Merge pull request #241 from arconnectio/development

feat: updates ao token imports
arconnectio · Feb 29, 2024 · 89a8b99 · 89a8b99
2 parents 75afa51 + 77906f0
commit 89a8b99
Show file tree

Hide file tree

Showing 13 changed files with 319 additions and 84 deletions.
diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json
@@ -1669,5 +1669,17 @@
   "ao_announcement_title": {
     "message": "AO testnet is now live!",
     "description": "ao announcement title text"
+  },
+  "import_token": {
+    "message": "Import Token",
+    "description": "import token button description"
+  },
+  "token_already_added": {
+    "message": "Token Already Added",
+    "description": "token already imported"
+  },
+  "token_imported": {
+    "message": "Token Succesfully Added",
+    "description": "token added"
   }
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arconnect",
   "displayName": "ArConnect",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "[email protected]",

diff --git a/src/components/dashboard/SignSettings.tsx b/src/components/dashboard/SignSettings.tsx
@@ -22,7 +22,7 @@ export default function SignSettings() {
       const currentSetting = await ExtensionStorage.get(
         "setting_sign_notification"
       );
-      setSignSettingsState(currentSetting !== "false");
+      setSignSettingsState(currentSetting);
 
       // Check if signatureAllowance is set, if not, initialize to 10
       let allowance = await ExtensionStorage.get("signatureAllowance");

diff --git a/src/components/dashboard/Tokens.tsx b/src/components/dashboard/Tokens.tsx
@@ -1,10 +1,15 @@
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import { useLocation, useRoute } from "wouter";
-import { useEffect, useMemo } from "react";
-import type { Token } from "~tokens/token";
+import { useEffect, useMemo, useState } from "react";
+import type { Token, TokenType } from "~tokens/token";
 import { Reorder } from "framer-motion";
 import TokenListItem from "./list/TokenListItem";
+import styled from "styled-components";
+import PermissionCheckbox from "~components/auth/PermissionCheckbox";
+import browser from "webextension-polyfill";
+import { Button, Label, Spacer, Text } from "@arconnect/components";
+import { useAoTokens } from "~tokens/aoTokens/ao";
 
 export default function Tokens() {
   // tokens
@@ -16,6 +21,36 @@ export default function Tokens() {
     []
   );
 
+  const [aoTokens] = useAoTokens();
+
+  const enhancedAoTokens = useMemo(() => {
+    return aoTokens.map((token) => ({
+      id: token.id,
+      defaultLogo: token.Logo,
+      balance: token.balance,
+      ticker: token.Ticker,
+      type: "asset" as TokenType,
+      name: token.Name
+    }));
+  }, [aoTokens]);
+
+  const [aoSettingsState, setaoSettingsState] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      const currentSetting = await ExtensionStorage.get<boolean>(
+        "setting_ao_support"
+      );
+      setaoSettingsState(currentSetting);
+    })();
+  }, []);
+
+  const toggleaoSettings = async () => {
+    const newSetting = !aoSettingsState;
+    setaoSettingsState(newSetting);
+    await ExtensionStorage.set("setting_ao_support", newSetting);
+  };
+
   // router
   const [matches, params] = useRoute<{ id?: string }>("/tokens/:id?");
   const [, setLocation] = useLocation();
@@ -27,6 +62,9 @@ export default function Tokens() {
   );
 
   useEffect(() => {
+    if (activeTokenSetting === "new") {
+      return;
+    }
     if (!matches) return;
 
     const firstToken = tokens?.[0];
@@ -42,21 +80,67 @@ export default function Tokens() {
     setLocation("/tokens/" + firstToken.id);
   }, [tokens, activeTokenSetting]);
 
+  const addToken = () => {
+    setLocation("/tokens/new");
+  };
+
   return (
-    <Reorder.Group
-      as="div"
-      axis="y"
-      onReorder={setTokens}
-      values={tokens}
-      style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}
-    >
-      {tokens.map((token) => (
-        <TokenListItem
-          token={token}
-          active={activeTokenSetting === token.id}
-          key={token.id}
-        />
-      ))}
-    </Reorder.Group>
+    <Wrapper>
+      <div>
+        <PermissionCheckbox
+          checked={aoSettingsState}
+          onChange={toggleaoSettings}
+          style={{ padding: "0 9.6px" }}
+        >
+          {browser.i18n.getMessage(!!aoSettingsState ? "enabled" : "disabled")}
+          <br />
+          <Text noMargin>
+            {browser.i18n.getMessage("setting_ao_support_description")}
+          </Text>
+        </PermissionCheckbox>
+        <Spacer y={1.7} />
+        <Reorder.Group
+          as="div"
+          axis="y"
+          onReorder={setTokens}
+          values={tokens}
+          style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}
+        >
+          {tokens.map((token) => (
+            <TokenListItem
+              token={token}
+              active={activeTokenSetting === token.id}
+              key={token.id}
+            />
+          ))}
+          <Spacer y={2} />
+          {enhancedAoTokens.length > 0 && (
+            <>
+              <Label style={{ paddingLeft: "4px", margin: "0" }}>
+                ao tokens
+              </Label>
+              {enhancedAoTokens.map((token) => (
+                <TokenListItem
+                  token={token}
+                  ao={true}
+                  active={activeTokenSetting === token.id}
+                  key={token.id}
+                />
+              ))}
+            </>
+          )}
+        </Reorder.Group>
+      </div>
+      <Button fullWidth onClick={addToken} disabled={!aoSettingsState}>
+        {browser.i18n.getMessage("import_token")}
+      </Button>
+    </Wrapper>
   );
 }
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 64px);
+`;
diff --git a/src/components/dashboard/list/BaseElement.tsx b/src/components/dashboard/list/BaseElement.tsx
@@ -13,10 +13,11 @@ export default function BaseElement({
   active,
   img,
   dragControls,
+  ao = false,
   ...props
 }: Props & HTMLProps<HTMLDivElement>) {
   return (
-    <SettingWrapper active={active} {...(props as any)}>
+    <SettingWrapper active={active} {...(props as any)} ao={ao}>
       <ContentWrapper>
         <SettingIconWrapper img={img}>{children}</SettingIconWrapper>
         <div>
@@ -31,35 +32,39 @@ export default function BaseElement({
 
 export const setting_element_padding = ".8rem";
 
-const SettingWrapper = styled.div<{ active: boolean }>`
+const SettingWrapper = styled.div<{ active: boolean; ao?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: ${setting_element_padding};
   border-radius: 20px;
   overflow: hidden;
-  cursor: pointer;
+  cursor: ${(props) => (props.ao ? "default" : "pointer")};
   background-color: rgba(
     ${(props) => props.theme.theme},
     ${(props) =>
       props.active ? (props.theme.displayTheme === "light" ? ".2" : ".1") : "0"}
   );
   transition: all 0.23s ease-in-out;
-
-  &:hover {
-    background-color: rgba(
-      ${(props) =>
-        props.theme.theme +
-        ", " +
-        (props.active
-          ? props.theme.displayTheme === "light"
-            ? ".24"
-            : ".14"
-          : props.theme.displayTheme === "light"
-          ? ".14"
-          : ".04")}
-    );
-  }
+  ${(props) =>
+    !props.ao &&
+    `
+    &:hover {
+      background-color: rgba(
+        ${
+          props.theme.theme +
+          ", " +
+          (props.active
+            ? props.theme.displayTheme === "light"
+              ? ".24"
+              : ".14"
+            : props.theme.displayTheme === "light"
+            ? ".14"
+            : ".04")
+        }
+      );
+    }
+  `}
 `;
 
 const ContentWrapper = styled.div`
@@ -122,6 +127,7 @@ interface Props {
   description: string | ReactNode;
   active?: boolean;
   img?: string;
+  ao?: boolean;
   dragControls?: DragControls;
 }
 

diff --git a/src/components/dashboard/list/TokenListItem.tsx b/src/components/dashboard/list/TokenListItem.tsx
@@ -11,8 +11,10 @@ import BaseElement from "./BaseElement";
 import styled from "styled-components";
 import { useGateway } from "~gateways/wayfinder";
 import { concatGatewayURL } from "~gateways/utils";
+import aoLogo from "url:/assets/ecosystem/ao-logo.svg";
+import { getUserAvatar } from "~lib/avatar";
 
-export default function TokenListItem({ token, active }: Props) {
+export default function TokenListItem({ token, active, ao }: Props) {
   // format address
   const formattedAddress = useMemo(
     () => formatAddress(token.id, 8),
@@ -40,6 +42,10 @@ export default function TokenListItem({ token, active }: Props) {
             `${concatGatewayURL(token.gateway || gateway)}/${token.id}`
           );
         }
+        if (ao) {
+          const logo = await getUserAvatar(token.defaultLogo);
+          return setImage(logo);
+        }
 
         // query community logo using Warp DRE
         const node = new DRENode(await getDreForToken(token.id));
@@ -58,7 +64,21 @@ export default function TokenListItem({ token, active }: Props) {
   // router
   const [, setLocation] = useLocation();
 
-  return (
+  return ao ? (
+    <BaseElement
+      ao={true}
+      title={`${token.name} (${token.ticker})`}
+      description={
+        <div style={{ display: "flex", gap: "8px" }}>
+          {formattedAddress}
+          <Image src={aoLogo} alt="ao logo" />
+        </div>
+      }
+      active={active}
+    >
+      <TokenLogo src={image} />
+    </BaseElement>
+  ) : (
     <Reorder.Item
       as="div"
       value={token}
@@ -84,6 +104,13 @@ export default function TokenListItem({ token, active }: Props) {
   );
 }
 
+const Image = styled.img`
+  width: 16px;
+  padding: 0 8px;
+  border: 1px solid rgb(${(props) => props.theme.cardBorder});
+  border-radius: 2px;
+`;
+
 const TokenLogo = styled.img.attrs({
   alt: "token-logo",
   draggable: false
@@ -111,5 +138,6 @@ const TokenType = styled.span`
 
 interface Props {
   token: Token;
+  ao?: boolean;
   active: boolean;
 }