ArConnect 1.10.0

assets/_locales/en/messages.json

@@ -1177,10 +1177,24 @@
     "message": "Click to view your last signed transaction",
     "description": "View last tx prompt content"
   },
+  "sign_item": {
+    "message": "Sign Item",
+    "description": "Sign message popup title"
+  },
   "titles_signature": {
     "message": "Sign message",
     "description": "Sign message popup title"
   },
+  "sign_data_description": {
+    "message": "$APPNAME$ wants to sign a transaction. Review the details below.",
+    "description": "Desription for signing an item containing a transfer",
+    "placeholders": {
+      "appname": {
+        "content": "$1",
+        "example": "permafacts.arweave.dev"
+      }
+    }
+  },
   "signature_description": {
     "message": "$APPNAME$ wants to sign a message. Review the message below.",
     "description": "App signature request for data that cannot be decoded to string",
@@ -1312,7 +1326,7 @@
     "description": "Label for the address input"
   },
   "transaction_send_address_input_placeholder": {
-    "message": "Address or ArNS name...",
+    "message": "Address, ANS or ArNS...",
     "description": "Placeholder for the address input"
   },
   "transaction_send_scan_address": {
@@ -1656,10 +1670,14 @@
     "message": "Your Contacts",
     "desription": "Your Contacts title in Send Modal"
   },
-  "check_address" : {
+  "check_address": {
     "message": "Please check the recipient address",
     "description": "Error message for invalid address/ArNS"
   },
+  "incorrect_address": {
+    "message": "Incorrect recipient address",
+    "description": "Error message for invalid ANS"
+  },
   "arns_added": {
     "message": " ar://$ADDRESS$ added", 
     "description": "ArNS recipient added",
@@ -1670,6 +1688,16 @@
       }
     } 
   },
+  "ans_added": {
+    "message": "$ADDRESS$ added", 
+    "description": "ANS recipient added",
+    "placeholders": {
+      "address": {
+        "content": "$1",
+        "example": "Address"
+      }
+    } 
+  },
   "setting_ao_support": {
     "message": "ao support",
     "description": "ao support settings title"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "arconnect",
   "displayName": "ArConnect",
-  "version": "1.9.0",
+  "version": "1.10.2",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "yarn@1.22.18",
@@ -59,6 +59,7 @@
     "@plasmohq/storage": "^1.7.2",
     "@segment/analytics-next": "^1.53.2",
     "@untitled-ui/icons-react": "^0.1.1",
+    "ao-tokens": "^0.0.3",
     "ar-gql": "^0.0.6",
     "arbundles": "^0.9.5",
     "arweave": "^1.13.0",

src/api/modules/connect/auth.ts

@@ -11,7 +11,8 @@ export type AuthType =
   | "token"
   | "sign"
   | "signMessage"
-  | "signature";
+  | "signature"
+  | "signDataItem";
 
 export interface AuthData {
   // type of auth to request from the user

src/api/modules/sign_data_item/sign_data_item.background.ts

@@ -13,6 +13,7 @@ import { getActiveKeyfile } from "~wallets";
 import browser from "webextension-polyfill";
 import { signAuth } from "../sign/sign_auth";
 import Arweave from "arweave";
+import authenticate from "../connect/auth";
 
 const background: ModuleFunction<number[]> = async (
   appData,
@@ -25,6 +26,25 @@ const background: ModuleFunction<number[]> = async (
     throw new Error(err);
   }
 
+  if (
+    dataItem.tags.some(
+      (tag) => tag.name === "Action" && tag.value === "Transfer"
+    ) &&
+    dataItem.tags.some(
+      (tag) => tag.name === "Data-Protocol" && tag.value === "ao"
+    )
+  ) {
+    try {
+      await authenticate({
+        type: "signDataItem",
+        data: dataItem,
+        appData
+      });
+    } catch {
+      throw new Error("User rejected the sign data item request");
+    }
+  }
+
   // grab the user's keyfile
   const decryptedWallet = await getActiveKeyfile().catch((e) => {
     isNotCancelError(e);

src/components/Recipient.tsx

@@ -15,6 +15,7 @@ import { searchArNSName } from "~lib/arns";
 import { useToasts } from "@arconnect/components";
 import { formatAddress, isAddressFormat } from "~utils/format";
 import { ExtensionStorage } from "~utils/storage";
+import { getAnsProfileByLabel, isANS } from "~lib/ans";
 
 export type Contact = {
   name: string;
@@ -80,6 +81,25 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
         return;
       } else {
         let search = targetInput.state;
+        const ANS = isANS(search);
+        if (ANS) {
+          const result = await getAnsProfileByLabel(search.slice(0, -3));
+          if (!result) {
+            setToast({
+              type: "error",
+              content: browser.i18n.getMessage("incorrect_address"),
+              duration: 2400
+            });
+          }
+          onClick({ address: result.user });
+          onClose();
+          setToast({
+            type: "success",
+            content: browser.i18n.getMessage("ans_added", [search]),
+            duration: 2400
+          });
+          return;
+        }
         if (targetInput.state.startsWith("ar://"))
           search = targetInput.state.substring(5);
         const result = await searchArNSName(search);
@@ -146,7 +166,7 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
           }}
         />
         <ButtonV2
-          style={{ borderRadius: "10px", width: "56px", padding: 0 }}
+          style={{ borderRadius: "10px", width: "30px", padding: 0 }}
           onClick={() => {
             submit();
           }}

src/components/dashboard/subsettings/AddToken.tsx

@@ -10,7 +10,7 @@ import {
 import browser from "webextension-polyfill";
 import { useEffect, useState } from "react";
 import { useAo, type TokenInfo, useAoTokens } from "~tokens/aoTokens/ao";
-import { getTokenInfo } from "~tokens/aoTokens/router";
+import { Token } from "ao-tokens";
 import styled from "styled-components";
 import { isAddress } from "~utils/assertions";
 import { addToken, getAoTokens, getDreForToken, useTokens } from "~tokens";
@@ -83,7 +83,9 @@ export default function AddToken() {
         //TODO double check
         isAddress(targetInput.state);
         if (type === "ao") {
-          const tokenInfo = await getTokenInfo(targetInput.state, ao);
+          const token = (await Token(targetInput.state)).info;
+          const denomination = Number(token.Denomination.toString());
+          const tokenInfo: TokenInfo = { ...token, Denomination: denomination };
           setToken(tokenInfo);
           setLoading(false);
         } else {

src/components/popup/Token.tsx

@@ -8,7 +8,7 @@ import { hoverEffect, useTheme } from "~utils/theme";
 import { loadTokenLogo, type Token } from "~tokens/token";
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
-import { Text } from "@arconnect/components";
+import { Text, TooltipV2 } from "@arconnect/components";
 import { getArPrice } from "~lib/coingecko";
 import { usePrice } from "~lib/redstone";
 import arLogoLight from "url:/assets/ar/logo_light.png";
@@ -22,8 +22,11 @@ import { defaultGateway } from "~gateways/gateway";
 import { useGateway } from "~gateways/wayfinder";
 import aoLogo from "url:/assets/ecosystem/ao-logo.svg";
 import { getUserAvatar } from "~lib/avatar";
+import { abbreviateNumber } from "~utils/format";
 
 export default function Token({ onClick, ...props }: Props) {
+  const [totalBalance, setTotalBalance] = useState("");
+  const [isMillion, setIsMillion] = useState(false);
   // display theme
   const theme = useTheme();
 
@@ -38,17 +41,20 @@ export default function Token({ onClick, ...props }: Props) {
     [props]
   );
 
-  const balance = useMemo(
-    () => formatTokenBalance(fractBalance),
-    [fractBalance]
-  );
+  const balance = useMemo(() => {
+    const formattedBalance = formatTokenBalance(fractBalance);
+    setTotalBalance(formattedBalance);
+    const numBalance = parseFloat(formattedBalance.replace(/,/g, ""));
+    setIsMillion(numBalance >= 1_000_000);
+    return abbreviateNumber(numBalance);
+  }, [fractBalance]);
 
   // token price
   const { price, currency } = usePrice(props.ticker);
 
   // fiat balance
   const fiatBalance = useMemo(() => {
-    if (!price) return "--";
+    if (!price) return <div />;
 
     const estimate = fractBalance * price;
 
@@ -81,9 +87,18 @@ export default function Token({ onClick, ...props }: Props) {
         {props?.ao && <Image src={aoLogo} alt="ao logo" />}
       </LogoAndDetails>
       <BalanceSection>
-        <NativeBalance>
-          {balance} {props.ticker}
-        </NativeBalance>
+        {isMillion ? (
+          <BalanceTooltip content={totalBalance} position="topEnd">
+            <NativeBalance style={{}}>
+              {props.ao ? props.balance : balance} {props.ticker}
+            </NativeBalance>
+          </BalanceTooltip>
+        ) : (
+          <NativeBalance>
+            {props.ao ? props.balance : balance} {props.ticker}
+          </NativeBalance>
+        )}
+
         <FiatBalance>{fiatBalance}</FiatBalance>
       </BalanceSection>
     </Wrapper>
@@ -111,6 +126,10 @@ const Wrapper = styled.div`
   }
 `;
 
+const BalanceTooltip = styled(TooltipV2)`
+  margin-right: 1rem;
+`;
+
 const Image = styled.img`
   width: 16px;
   padding: 0 8px;

src/lib/ans.ts

@@ -46,6 +46,17 @@ export async function getAnsProfileByLabel(label: string): Promise<AnsUser> {
   }
 }
 
+/**
+ * Checks if search has .ar appended to the end
+ * If so, it is an ANS address and can call getAnsProfileByLabel()
+ * @param label string to fetch profile for
+ */
+
+export const isANS = (label: string): boolean => {
+  const lastThreeLetters = label.slice(-3);
+  return lastThreeLetters === ".ar";
+};
+
 /**
  * React hook for a simple ANS profile
  *