Merge pull request #459 from arconnectio/staging

ArConnect 1.18.0

assets/_locales/en/messages.json

@@ -61,6 +61,10 @@
     "message": "Save",
     "description": "Save button text"
   },
+  "generate": {
+    "message": "Generate",
+    "description": "Generate button text"
+  },
   "add_wallet": {
     "message": "Add wallet",
     "description": "Add a wallet text"
@@ -299,6 +303,10 @@
     "message": "Allows using dispatch transactions.",
     "description": "Description for the \"DISPATCH\" permission"
   },
+  "permissionAccessTokens": {
+    "message": "Allows access to view tokens and their balances that you've added to your wallet",
+    "description": "Description for the permission to access user-added token and token balances"
+  },
   "copyId": {
     "message": "Copy ID",
     "description": "Copy ID button text"
@@ -1373,6 +1381,14 @@
     "message": "Generate QR code",
     "description": "Generate QR code button"
   },
+  "generate_qr_code_title": {
+    "message": "Enter your password to generate QR Code",
+    "description": "Generate QR code title"
+  },
+  "cannot_generate_qr_code": {
+    "message": "Cannot generate QR code for your hardware wallet.",
+    "description": "Cannot generate QR text"
+  },
   "viewblock": {
     "message": "Viewblock",
     "description": "view block"
@@ -2179,5 +2195,9 @@
   "mismatch_warning": {
     "message": "Your wallet has a mismatched bit length. You can proceed, but may encounter errors. Transactions could fail or behave unexpectedly.",
     "description": "warning for mismatch wallet"
+  },
+  "transak_unavailable": {
+    "message": "Transak is unavailable at the moment. Please try again later.",
+    "description": "Transak unavailable error message"
   }
 }

assets/_locales/zh_CN/messages.json

@@ -61,6 +61,10 @@
     "message": "节省",
     "description": "Save button text"
   },
+  "generate": {
+    "message": "产生",
+    "description": "Generate button text"
+  },
   "add_wallet": {
       "message": "添加钱包",
       "description": "Add a wallet text"
@@ -295,6 +299,10 @@
       "message": "允许使用调度交易。",
       "description": "Description for the \"DISPATCH\" permission"
   },
+  "permissionAccessTokens": {
+    "message": "允许查看您已添加到钱包中的代币及其余额",
+    "description": "Description for the permission to access user-added token and token balances"
+  },
   "copyId": {
       "message": "复制 ID",
       "description": "Copy ID button text"
@@ -1361,6 +1369,14 @@
     "message": "生成二维码",
     "description": "Generate QR code button"
   },
+  "generate_qr_code_title": {
+    "message": "输入密码生成二维码",
+    "description": "Generate QR code title"
+  },
+  "cannot_generate_qr_code": {
+    "message": "无法为您的硬件钱包生成二维码。",
+    "description": "Cannot generate QR text"
+  },
   "viewblock": {
       "message": "Viewblock",
       "description": "view block"
@@ -2165,5 +2181,9 @@
   "mismatch_warning": {
     "message": "您的钱包存在不匹配的位长度。您可以继续操作，但可能会遇到错误。交易可能会失败或表现异常。",
     "description": "warning for mismatch wallet"
+  },
+  "transak_unavailable": {
+    "message": "Transak 目前不可用。请稍后再试。",
+    "description": "Transak unavailable error message"
   }
 }

package.json

@@ -78,6 +78,7 @@
     "plimit-lit": "^3.0.1",
     "pretty-bytes": "^6.0.0",
     "qrcode.react": "^3.1.0",
+    "qrloop": "^1.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fast-marquee": "^1.3.5",

src/api/background.ts

@@ -41,6 +41,8 @@ import signDataItemModule from "./modules/sign_data_item";
 import signDataItem from "./modules/sign_data_item/sign_data_item.background";
 import subscriptionModule from "./modules/subscription";
 import subscription from "./modules/subscription/subscription.background";
+import userTokensModule from "./modules/user_tokens";
+import userTokens from "./modules/user_tokens/user_tokens.background";
 
 /** Background modules */
 const modules: BackgroundModule<any>[] = [
@@ -63,7 +65,8 @@ const modules: BackgroundModule<any>[] = [
   { ...privateHashModule, function: privateHash },
   { ...verifyMessageModule, function: verifyMessage },
   { ...signDataItemModule, function: signDataItem },
-  { ...subscriptionModule, function: subscription }
+  { ...subscriptionModule, function: subscription },
+  { ...userTokensModule, function: userTokens }
 ];
 
 export default modules;

src/api/foreground.ts

@@ -59,6 +59,8 @@ import signDataItemModule from "./modules/sign_data_item";
 import signDataItem, {
   finalizer as signDataItemFinalizer
 } from "./modules/sign_data_item/sign_data_item.foreground";
+import userTokensModule from "./modules/user_tokens";
+import userTokens from "./modules/user_tokens/user_tokens.foreground";
 
 /** Foreground modules */
 const modules: ForegroundModule[] = [
@@ -93,7 +95,8 @@ const modules: ForegroundModule[] = [
     function: signDataItem,
     finalizer: signDataItemFinalizer
   },
-  { ...subscriptionModule, function: subscription }
+  { ...subscriptionModule, function: subscription },
+  { ...userTokensModule, function: userTokens }
 ];
 
 export default modules;

src/api/modules/user_tokens/index.ts

@@ -0,0 +1,11 @@
+import type { PermissionType } from "~applications/permissions";
+import type { ModuleProperties } from "~api/module";
+
+const permissions: PermissionType[] = ["ACCESS_TOKENS"];
+
+const userTokensModule: ModuleProperties = {
+  functionName: "userTokens",
+  permissions
+};
+
+export default userTokensModule;

src/api/modules/user_tokens/user_tokens.background.ts

@@ -0,0 +1,50 @@
+import type { ModuleFunction } from "~api/background";
+import { ExtensionStorage } from "~utils/storage";
+import {
+  getAoTokenBalance,
+  getNativeTokenBalance,
+  type TokenInfo,
+  type TokenInfoWithBalance
+} from "~tokens/aoTokens/ao";
+import { AO_NATIVE_TOKEN } from "~utils/ao_import";
+
+const background: ModuleFunction<TokenInfoWithBalance[] | TokenInfo[]> = async (
+  _,
+  options?: { fetchBalance?: boolean }
+) => {
+  const address = await ExtensionStorage.get("active_address");
+  const tokens = (await ExtensionStorage.get<TokenInfo[]>("ao_tokens")) || [];
+
+  if (!options?.fetchBalance) {
+    return tokens;
+  }
+
+  const enrichedTokens: TokenInfoWithBalance[] = await Promise.all(
+    tokens.map(async (token) => {
+      let balance: string | null = null;
+
+      try {
+        if (token.processId === AO_NATIVE_TOKEN) {
+          balance = await getNativeTokenBalance(address);
+        } else {
+          const balanceResult = await getAoTokenBalance(
+            address,
+            token.processId
+          );
+          balance = balanceResult.toString();
+        }
+      } catch (error) {
+        console.error(
+          `Error fetching balance for token ${token.Name} (${token.processId}):`,
+          error
+        );
+      }
+
+      return { ...token, balance };
+    })
+  );
+
+  return enrichedTokens;
+};
+
+export default background;

src/api/modules/user_tokens/user_tokens.foreground.ts

@@ -0,0 +1,6 @@
+import type { ModuleFunction } from "~api/module";
+
+// no need to transform anything in the foreground
+const foreground: ModuleFunction<void> = () => {};
+
+export default foreground;

src/applications/permissions.ts

@@ -10,7 +10,8 @@ export type PermissionType =
   | "DECRYPT"
   | "SIGNATURE"
   | "ACCESS_ARWEAVE_CONFIG"
-  | "DISPATCH";
+  | "DISPATCH"
+  | "ACCESS_TOKENS";
 
 /**
  * All permissions with their descriptions
@@ -24,7 +25,8 @@ export const permissionData: Record<PermissionType, string> = {
   DECRYPT: "permissionDescriptionDecrypt",
   SIGNATURE: "permissionDescriptionSignature",
   ACCESS_ARWEAVE_CONFIG: "permissionDescriptionArweaveConfig",
-  DISPATCH: "permissionDescriptionDispatch"
+  DISPATCH: "permissionDescriptionDispatch",
+  ACCESS_TOKENS: "permissionAccessTokens"
 };
 
 /**

src/routes/popup/explore.tsx

@@ -37,27 +37,29 @@ export default function Explore() {
         <div>
           {filteredApps.map((app, index) => (
             <AppWrapper key={index}>
-              <LogoWrapper>
-                <AppShortcut
-                  bgColor={
-                    theme === "light"
-                      ? app.assets?.lightBackground
-                      : app.assets?.darkBackground
-                  }
-                  onClick={() => {
-                    browser.tabs.create({ url: app.links.website });
-                  }}
-                >
-                  <Logo src={app.assets.logo} />
-                </AppShortcut>
-              </LogoWrapper>
-              <Description>
-                <Title>
-                  <AppTitle>{app.name}</AppTitle>
-                  <Pill>{app.category}</Pill>
-                </Title>
-                <AppDescription>{app.description}</AppDescription>
-              </Description>
+              <LogoDescriptionWrapper>
+                <LogoWrapper>
+                  <AppShortcut
+                    bgColor={
+                      theme === "light"
+                        ? app.assets?.lightBackground
+                        : app.assets?.darkBackground
+                    }
+                    onClick={() => {
+                      browser.tabs.create({ url: app.links.website });
+                    }}
+                  >
+                    <Logo src={app.assets.logo} />
+                  </AppShortcut>
+                </LogoWrapper>
+                <Description>
+                  <Title>
+                    <AppTitle>{app.name}</AppTitle>
+                    <Pill>{app.category}</Pill>
+                  </Title>
+                  <AppDescription>{app.description}</AppDescription>
+                </Description>
+              </LogoDescriptionWrapper>
               <IconWrapper>
                 <ShareIcon
                   style={{ cursor: "pointer" }}
@@ -152,6 +154,12 @@ const AppWrapper = styled.div`
   padding: 10px;
   gap: 12px;
   display: flex;
+  justify-content: space-between;
+`;
+
+const LogoDescriptionWrapper = styled.div`
+  gap: 12px;
+  display: flex;
 `;
 
 const AppShortcut = styled(AppIcon)<{ bgColor?: string }>`