Merge pull request #259 from arconnectio/staging

ArConnect 1.5.1
wanderwallet · Mar 12, 2024 · 1c80718 · 1c80718
2 parents cb9cac1 + d43330c
commit 1c80718
Show file tree

Hide file tree

Showing 16 changed files with 359 additions and 194 deletions.
diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json
@@ -1401,6 +1401,22 @@
     "message": "Pin ArConnect to your browser so it's accessible and easy to connect to your favorite dApps.",
     "description": "Installation complete paragraph"
   },
+  "enable_notifications_title": {
+    "message": "Enable Notifications in ArConnect",
+    "description": "Enable Notification title"
+  },
+  "introducing_notifications": {
+    "message": "Introducing Notifications",
+    "description": "Alternative Enable Notification title"
+  },
+  "enable_notifications_paragraph": {
+    "message": "Stay updated with instant alerts for transactions and ao messages.",
+    "description": "Enable notifications paragraph"
+  },
+  "alternative_enable_notifications_paragraph": {
+    "message": "Receive notifications instantly when a transaction processes.",
+    "description": "Enable notifications paragraph"
+  },
   "get_started":{    
     "message": "Get Started",
     "description": "Get started title"

diff --git a/assets/ecosystem/notifications-promo.svg b/assets/ecosystem/notifications-promo.svg
diff --git a/assets/setup/notifications-example.png b/assets/setup/notifications-example.png
diff --git a/assets/setup/notifications-example.svg b/assets/setup/notifications-example.svg
diff --git a/src/components/popup/WalletHeader.tsx b/src/components/popup/WalletHeader.tsx
@@ -232,16 +232,6 @@ export default function WalletHeader() {
         </Tooltip>
       </AddressContainer>
       <WalletActions>
-        <Tooltip content="Notifications" position="bottom">
-          <Action
-            as={Bell03}
-            onClick={() => {
-              setNewNotifications(false);
-              push("/notifications");
-            }}
-          />
-          {newNotifications && <Notifier />}
-        </Tooltip>
         <Tooltip content="Viewblock" position="bottom">
           <Action
             as={BoxIcon}
@@ -265,6 +255,25 @@ export default function WalletHeader() {
             }
           />
         </Tooltip>
+        {!isExpanded && (
+          <Tooltip
+            content={browser.i18n.getMessage("expand_view")}
+            position="bottomEnd"
+          >
+            <Action as={MaximizeIcon} onClick={expandView} />
+          </Tooltip>
+        )}
+        <Tooltip content="Notifications" position="bottom">
+          <Action
+            as={Bell03}
+            onClick={() => {
+              setNewNotifications(false);
+              push("/notifications");
+            }}
+            style={{ width: "17px", height: "17px" }}
+          />
+          {newNotifications && <Notifier />}
+        </Tooltip>
         <AppAction
           onClick={(e) => {
             e.stopPropagation();
@@ -274,14 +283,6 @@ export default function WalletHeader() {
           <Action as={GlobeIcon} />
           <AppOnline online={!!activeAppData} />
         </AppAction>
-        {!isExpanded && (
-          <Tooltip
-            content={browser.i18n.getMessage("expand_view")}
-            position="bottomEnd"
-          >
-            <Action as={MaximizeIcon} onClick={expandView} />
-          </Tooltip>
-        )}
         <AnimatePresence>
           {appDataOpen && (
             <AppInfoWrapper
@@ -490,7 +491,7 @@ const ExpandArrow = styled(ChevronDownIcon)<{ open: boolean }>`
 
 const Notifier = styled.div`
   position: absolute;
-  right: -0.7px;
+  right: -1.5px;
   top: 0;
   width: 8px;
   height: 8px;

diff --git a/src/components/popup/home/Balance.tsx b/src/components/popup/home/Balance.tsx
@@ -2,14 +2,8 @@ import { formatTokenBalance, formatFiatBalance } from "~tokens/currency";
 import Application, { type AppInfo } from "~applications/application";
 import { gql } from "~gateways/api";
 import Graph, { GraphText } from "~components/popup/Graph";
-import { Spacer, Tooltip } from "@arconnect/components";
-import {
-  useEffect,
-  useMemo,
-  useState,
-  type SVGProps,
-  type HTMLProps
-} from "react";
+import { Loading, Tooltip } from "@arconnect/components";
+import { useEffect, useMemo, useState, type HTMLProps } from "react";
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import { useHistory } from "~utils/hash_router";
@@ -18,11 +12,9 @@ import { getArPrice } from "~lib/coingecko";
 import { getAppURL } from "~utils/format";
 import { useTheme } from "~utils/theme";
 import {
-  ArrowDownLeftIcon,
   ArrowUpRightIcon,
   EyeIcon,
   EyeOffIcon,
-  SettingsIcon,
   LockIcon
 } from "@iconicicons/react";
 import useActiveTab from "~applications/useActiveTab";
@@ -36,6 +28,7 @@ import { findGateway } from "~gateways/wayfinder";
 import type { Gateway } from "~gateways/gateway";
 
 export default function Balance() {
+  const [loading, setLoading] = useState(false);
   // grab address
   const [activeAddress] = useStorage<string>({
     key: "active_address",
@@ -108,11 +101,12 @@ export default function Balance() {
   useEffect(() => {
     (async () => {
       if (!activeAddress) return;
-
+      setLoading(true);
       const gateway = await findGateway({ graphql: true });
       const history = await balanceHistory(activeAddress, gateway);
 
       setHistoricalBalance(history);
+      setLoading(false);
     })();
   }, [activeAddress]);
 
@@ -128,36 +122,49 @@ export default function Balance() {
     push("/unlock");
   }
 
+  useEffect(() => {
+    if (balance !== historicalBalance[0]) {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
+  }, [balance, historicalBalance]);
+
   return (
     <Graph data={historicalBalance}>
       <BalanceHead>
-        <div>
-          <BalanceText title noMargin>
-            {(!hideBalance && formatTokenBalance(balance)) ||
-              "*".repeat(balance.toFixed(2).length)}
-            <Ticker>AR</Ticker>
-          </BalanceText>
-          <FiatBalanceText noMargin>
-            {(!hideBalance &&
-              formatFiatBalance(fiat, currency.toLowerCase())) ||
-              "*".repeat(fiat.toFixed(2).length) + " " + currency.toUpperCase()}
-            <IconButtons>
-              <Tooltip
-                content={browser.i18n.getMessage(
-                  hideBalance ? "balance_show" : "balance_hide"
-                )}
-              >
-                <BalanceIconButton
-                  onClick={() => setHideBalance((val) => !val)}
-                  as={hideBalance ? EyeOffIcon : EyeIcon}
-                />
-              </Tooltip>
-              <Tooltip content={browser.i18n.getMessage("lock_wallet")}>
-                <BalanceIconButton onClick={lockWallet} as={LockIcon} />
-              </Tooltip>
-            </IconButtons>
-          </FiatBalanceText>
-        </div>
+        {loading && <Loading style={{ width: "20px", height: "20px" }} />}
+        {!loading && (
+          <div>
+            <BalanceText title noMargin>
+              {(!hideBalance && formatTokenBalance(balance)) ||
+                "*".repeat(balance.toFixed(2).length)}
+              <Ticker>AR</Ticker>
+            </BalanceText>
+            <FiatBalanceText noMargin>
+              {(!hideBalance &&
+                formatFiatBalance(fiat, currency.toLowerCase())) ||
+                "*".repeat(fiat.toFixed(2).length) +
+                  " " +
+                  currency.toUpperCase()}
+              <IconButtons>
+                <Tooltip
+                  content={browser.i18n.getMessage(
+                    hideBalance ? "balance_show" : "balance_hide"
+                  )}
+                >
+                  <BalanceIconButton
+                    onClick={() => setHideBalance((val) => !val)}
+                    as={hideBalance ? EyeOffIcon : EyeIcon}
+                  />
+                </Tooltip>
+                <Tooltip content={browser.i18n.getMessage("lock_wallet")}>
+                  <BalanceIconButton onClick={lockWallet} as={LockIcon} />
+                </Tooltip>
+              </IconButtons>
+            </FiatBalanceText>
+          </div>
+        )}
         {activeAppData && (
           <ActiveAppIcon
             outline={theme === "light" ? "#000" : "#232323"}

diff --git a/src/components/popup/home/NoBalance.tsx b/src/components/popup/home/NoBalance.tsx
@@ -1,4 +1,4 @@
-import { Button, Section, Text } from "@arconnect/components";
+import { Button, ButtonV2, Section, Text } from "@arconnect/components";
 import { ArrowRightIcon } from "@iconicicons/react";
 import { useHistory } from "~utils/hash_router";
 import noBalanceArt from "url:/assets/ar/no_funds.png";
@@ -17,17 +17,15 @@ export default function NoBalance() {
       </NoBalanceText>
       <ButtonWrapper>
         {/* <BuyButton route={"/purchase"} logo={true} /> */}
-        <Container>
-          <CustomButton
-            onClick={() => push("/receive")}
-            small
-            fullWidth
-            className="normal-font-weight"
-          >
-            {browser.i18n.getMessage("receive_AR_button")}
-            <ArrowRight />
-          </CustomButton>
-        </Container>
+        <ButtonV2
+          onClick={() => push("/receive")}
+          secondary
+          fullWidth
+          className="normal-font-weight"
+        >
+          {browser.i18n.getMessage("receive_AR_button")}
+          <ArrowRight style={{ marginLeft: "5px" }} />
+        </ButtonV2>
       </ButtonWrapper>
     </Wrapper>
   );
@@ -52,34 +50,14 @@ const Art = styled.img.attrs({
   alt: "No balance art"
 })`
   user-select: none;
-  width: 184px;
+  width: 137px;
 `;
 
 const ButtonWrapper = styled.div`
   width: 100%;
   margin-top: -2px;
 `;
 
-const Container = styled.div`
-  height: 55px;
-`;
-
-const CustomButton = styled(Button)`
-  &.normal-font-weight {
-    font-weight: normal;
-  }
-  background-color: black;
-  border: 3px solid #ab9aff;
-  margin-bottom: 10px;
-  height: 46.78px;
-  transition: all 0.23s ease-in-out;
-
-  &:hover {
-    transform: scale(1.02);
-    border: 1px solid #ab9aff;
-  }
-`;
-
 const ArrowRight = styled(ArrowRightIcon)`
   width: 16px;
   height: 16px;

diff --git a/src/components/popup/home/Tokens.tsx b/src/components/popup/home/Tokens.tsx
@@ -59,6 +59,7 @@ export default function Tokens() {
         {aoTokens.map((token) => (
           <Token
             key={token.id}
+            divisibility={token.Denomination}
             ao={true}
             type={"asset"}
             defaultLogo={token?.Logo}