Merge pull request #327 from arconnectio/staging

ArConnect 1.11.0
arconnectio · May 16, 2024 · a4bbfd4 · a4bbfd4
2 parents 237fcb0 + 045a53b
commit a4bbfd4
Show file tree

Hide file tree

Showing 31 changed files with 973 additions and 862 deletions.
diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json
@@ -1480,13 +1480,17 @@
     "description": "Buy AR with Onramper button text"
   },
   "buy_screen_pay": {
-    "message": "You pay",
+    "message": "You Pay",
     "description": "Payment input label title"
   },
   "buy_screen_receive": {
-    "message": "You receive",
+    "message": "You Receive",
     "description": "Receive input label title"
   },
+  "buy_screen_switch": {
+    "message": "Switch",
+    "description": "Switch button"
+  },
   "buy_screen_payment_method": {
     "message": "Payment Method",
     "description": "Select payment method title"
@@ -1548,7 +1552,7 @@
     "description": "Info message text on purchase in progress page"
   },
   "order_id_purchase_pending": {
-    "message":  "Order ID:",
+    "message":  "Quote ID:",
     "description": "Order ID text on purchase in progress page"
   },
   "choose_payment_method": {

diff --git a/assets/ecosystem/switch-vertical.svg b/assets/ecosystem/switch-vertical.svg
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     ]
   },
   "dependencies": {
-    "@arconnect/components": "^0.3.7",
+    "@arconnect/components": "^0.3.8",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",
     "@arconnect/webext-bridge": "^5.0.6",

diff --git a/shim.d.ts b/shim.d.ts
@@ -46,9 +46,15 @@ declare module "styled-components" {
     theme: string;
     primaryText: string;
     secondaryText: string;
+    secondaryTextv2: string;
     background: string;
+    backgroundSecondary: string;
+    inputField: string;
+    primary: string;
     cardBorder: string;
+    fail: string;
     cardBackground: string;
+    primaryTextv2: string;
   }
 }
 

diff --git a/src/components/popup/HeadV2.tsx b/src/components/popup/HeadV2.tsx
@@ -26,6 +26,7 @@ export default function HeadV2({
   title,
   showOptions = true,
   back,
+  padding,
   showBack = true,
   allowOpen = true
 }: Props) {
@@ -97,6 +98,7 @@ export default function HeadV2({
       displayTheme={theme}
       collapse={scrollDirection === "down"}
       scrolled={scrolled}
+      padding={padding}
     >
       <BackWrapper
         onClick={async () => {
@@ -142,6 +144,7 @@ const HeadWrapper = styled(Section)<{
   collapse: boolean;
   scrolled: boolean;
   displayTheme: DisplayTheme;
+  padding: string;
 }>`
   position: sticky;
   top: 0;
@@ -151,7 +154,7 @@ const HeadWrapper = styled(Section)<{
   display: flex;
   flex-direction: row;
   width: full;
-  padding: 15px;
+  padding: ${(props) => (props.padding ? props.padding : "15px")};
   justify-content: space-between;
   align-items: center;
   background-color: rgba(${(props) => props.theme.background}, 0.75);
@@ -241,6 +244,7 @@ interface Props {
   showOptions?: boolean;
   // allow opening the wallet switcher
   showBack?: boolean;
+  padding?: string;
   allowOpen?: boolean;
   back?: (...args) => any;
 }
diff --git a/src/components/popup/Token.tsx b/src/components/popup/Token.tsx
@@ -23,13 +23,19 @@ import { useGateway } from "~gateways/wayfinder";
 import aoLogo from "url:/assets/ecosystem/ao-logo.svg";
 import { getUserAvatar } from "~lib/avatar";
 import { abbreviateNumber } from "~utils/format";
+import Skeleton from "~components/Skeleton";
 
 export default function Token({ onClick, ...props }: Props) {
   const [totalBalance, setTotalBalance] = useState("");
   const [isMillion, setIsMillion] = useState(false);
   // display theme
   const theme = useTheme();
 
+  const arweaveLogo = useMemo(
+    () => (theme === "dark" ? arLogoLight : arLogoDark),
+    [theme]
+  );
+
   // token balance
   const fractBalance = useMemo(
     () =>
@@ -71,11 +77,15 @@ export default function Token({ onClick, ...props }: Props) {
         setLogo(viewblock.getTokenLogo(props.id));
         setLogo(await loadTokenLogo(props.id, props.defaultLogo, theme));
       } else {
-        const logo = await getUserAvatar(props.defaultLogo);
-        setLogo(logo);
+        if (props.defaultLogo) {
+          const logo = await getUserAvatar(props.defaultLogo);
+          setLogo(logo);
+        } else {
+          setLogo(arweaveLogo);
+        }
       }
     })();
-  }, [props, theme, logo]);
+  }, [props, theme, logo, arweaveLogo]);
 
   return (
     <Wrapper onClick={onClick}>
@@ -87,16 +97,26 @@ export default function Token({ onClick, ...props }: Props) {
         {props?.ao && <Image src={aoLogo} alt="ao logo" />}
       </LogoAndDetails>
       <BalanceSection>
-        {isMillion ? (
-          <BalanceTooltip content={totalBalance} position="topEnd">
-            <NativeBalance style={{}}>
-              {props.ao ? props.balance : balance} {props.ticker}
-            </NativeBalance>
-          </BalanceTooltip>
+        {props?.loading ? (
+          <Skeleton width="80px" height="20px" />
+        ) : props?.error ? (
+          <TooltipV2 content={DegradedMessage} position="left">
+            <WarningIcon />
+          </TooltipV2>
         ) : (
-          <NativeBalance>
-            {props.ao ? props.balance : balance} {props.ticker}
-          </NativeBalance>
+          <>
+            {isMillion ? (
+              <BalanceTooltip content={totalBalance} position="topEnd">
+                <NativeBalance>
+                  {props.ao ? props.balance : balance} {props.ticker}
+                </NativeBalance>
+              </BalanceTooltip>
+            ) : (
+              <NativeBalance>
+                {props.ao ? props.balance : balance} {props.ticker}
+              </NativeBalance>
+            )}
+          </>
         )}
 
         <FiatBalance>{fiatBalance}</FiatBalance>
@@ -105,6 +125,36 @@ export default function Token({ onClick, ...props }: Props) {
   );
 }
 
+const DegradedMessage: React.ReactNode = (
+  <div style={{ textAlign: "center" }}>
+    <div style={{ fontSize: "14px" }}>ao token process network degraded.</div>
+    <div style={{ fontSize: "12px", color: "#a3a3a3" }}>
+      ao token process will be available when <br />
+      the network issues are resolved.
+    </div>
+  </div>
+);
+
+export const WarningIcon = ({ color }) => {
+  return (
+    <svg
+      width="23"
+      height="22"
+      viewBox="0 0 23 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.5 7V11M11.5 15H11.51M21.5 11C21.5 16.5228 17.0228 21 11.5 21C5.97715 21 1.5 16.5228 1.5 11C1.5 5.47715 5.97715 1 11.5 1C17.0228 1 21.5 5.47715 21.5 11Z"
+        stroke={color || "#FF1A1A"}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
 const Wrapper = styled.div`
   position: relative;
   display: flex;
@@ -170,6 +220,7 @@ export const TokenName = styled(Text).attrs({
   display: flex;
   align-items: center;
   gap: 0.34rem;
+  width: min-content;
   font-size: 1rem;
   color: rgb(${(props) => props.theme.primaryText});
 `;
@@ -202,6 +253,8 @@ const BalanceSection = styled.div`
 
 interface Props extends Token {
   ao?: boolean;
+  loading?: boolean;
+  error?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
 }
 

diff --git a/src/components/popup/home/BuyButton.tsx b/src/components/popup/home/BuyButton.tsx
@@ -1,82 +1,33 @@
 import { useHistory } from "~utils/hash_router";
-import { Button } from "@arconnect/components";
+import { Button, ButtonV2 } from "@arconnect/components";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
 import arLogoDark from "url:/assets/ar/logo_dark.png";
-import { EventType, trackEvent } from "~utils/analytics";
-import { useLocation } from "wouter";
-
-interface ButtonWrapperProps {
-  id?: string;
-  padding?: boolean;
-  route?: string;
-  logo?: boolean;
-  onClick?: () => void;
-  useCustomClickHandler?: boolean;
-  closeBuyAR?: boolean;
-}
-
-interface RouteEventMap {
-  [route: string]: EventType;
-}
-
-export default function BuyButton({
-  padding,
-  route,
-  logo,
-  onClick,
-  useCustomClickHandler,
-  closeBuyAR
-}: ButtonWrapperProps) {
-  const [push] = useHistory();
-  const [location] = useLocation();
-
-  const eventMap: RouteEventMap = {
-    "/": EventType.BUY_AR_DASHBOARD,
-    "/purchase": EventType.BUY_AR_PURCHASE,
-    "/confirm-purchase": EventType.BUY_AR_CONFIRM_PURCHASE
-  };
-
-  const targetRoute = route === "/purchase" ? "/purchase" : "/confirm-purchase";
-
-  const handleClick = async () => {
-    await trackEvent(eventMap[location], {});
-
-    if (useCustomClickHandler) {
-      onClick();
-    } else if (closeBuyAR) {
-      push("/");
-    } else {
-      push(targetRoute);
-    }
-  };
 
+export default function BuyButton() {
   return (
-    <ButtonWrapper padding={padding} route={route} logo={logo}>
-      <CustomButton
-        className="normal-font-weight"
-        small
-        fullWidth
-        onClick={handleClick}
-      >
-        {closeBuyAR && browser.i18n.getMessage("close_purchase_pending")}
-        {!closeBuyAR && browser.i18n.getMessage("buy_ar_button")}
-        {logo && <ARLogo src={arLogoDark} alt={"AR"} draggable={false} />}
-      </CustomButton>
+    <ButtonWrapper>
+      <PureBuyButton />
     </ButtonWrapper>
   );
 }
 
-const ButtonWrapper = styled.div<ButtonWrapperProps>`
-  height: 55px;
-  padding: ${(props) => (props.padding ? "0px 12px" : "0")};
-`;
+export const PureBuyButton = () => {
+  const [push] = useHistory();
 
-const CustomButton = styled(Button)`
-  &.normal-font-weight {
-    font-weight: normal;
-  }
-  margin-top: 10px;
+  return (
+    <ButtonV2
+      fullWidth
+      onClick={() => push("/purchase")}
+      style={{ display: "flex", gap: "5px" }}
+    >
+      {browser.i18n.getMessage("buy_ar_button")}
+      <ARLogo src={arLogoDark} alt={"AR"} draggable={false} />
+    </ButtonV2>
+  );
+};
+const ButtonWrapper = styled.div`
+  padding: 16px 15px 0 15px;
 `;
 
 const ARLogo = styled.img`

diff --git a/src/components/popup/home/NoBalance.tsx b/src/components/popup/home/NoBalance.tsx
@@ -4,7 +4,7 @@ import { useHistory } from "~utils/hash_router";
 import noBalanceArt from "url:/assets/ar/no_funds.png";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
-// import BuyButton from "./BuyButton";
+import { PureBuyButton } from "./BuyButton";
 
 export default function NoBalance() {
   const [push] = useHistory();
@@ -16,7 +16,7 @@ export default function NoBalance() {
         {browser.i18n.getMessage("home_no_balance", "$AR")}
       </NoBalanceText>
       <ButtonWrapper>
-        {/* <BuyButton route={"/purchase"} logo={true} /> */}
+        <PureBuyButton />
         <ButtonV2
           onClick={() => push("/receive")}
           secondary
@@ -54,8 +54,10 @@ const Art = styled.img.attrs({
 `;
 
 const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   width: 100%;
-  margin-top: -2px;
 `;
 
 const ArrowRight = styled(ArrowRightIcon)`

diff --git a/src/components/popup/home/Tokens.tsx b/src/components/popup/home/Tokens.tsx
@@ -14,7 +14,7 @@ export default function Tokens() {
   const ao = useAo();
 
   // all tokens
-  const [aoTokens] = useAoTokens();
+  const [aoTokens, loading] = useAoTokens();
 
   // assets
   const assets = useMemo(
@@ -58,7 +58,9 @@ export default function Tokens() {
         ))}
         {aoTokens.map((token) => (
           <Token
+            loading={loading}
             key={token.id}
+            error={token.balance === null}
             divisibility={token.Denomination}
             ao={true}
             type={"asset"}