Merge pull request #396 from arconnectio/staging

ArConnect 1.14.1

assets/_locales/en/messages.json

@@ -1805,7 +1805,7 @@
     "description": "ao announcement title text"
   },
   "ao_token_announcement_title": {
-    "message": "Congrats on the AO Token 4 year emissions rewards 🥳",
+    "message": "Congrats on earning AO Tokens for hodling AR! 🥳",
     "description": "ao token announcement title text"
   },
   "ao_token_send_popup": {

assets/_locales/zh_CN/messages.json

@@ -1803,7 +1803,7 @@
       "description": "ao announcement title text"
   },
   "ao_token_announcement_title": {
-    "message": "恭喜获得 AO Token 4 年排放奖励 🥳",
+    "message": "恭喜您通过持有 AR 获得 AO 代币！🥳",
     "description": "ao token announcement title text"
   },
   "ao_token_send_popup": {

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

@@ -26,11 +26,24 @@ const background: ModuleFunction<number[]> = async (
     throw new Error(err);
   }
 
-  await authenticate({
-    type: "signDataItem",
-    data: dataItem,
-    appData
-  });
+  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) => {

src/components/popup/home/AoBanner.tsx

@@ -1,12 +1,11 @@
 import type { DisplayTheme } from "@arconnect/components";
-import { useStorage } from "@plasmohq/storage/hook";
+import { CloseIcon } from "@iconicicons/react";
 import { Quantity } from "ao-tokens";
-import type { TokenInfo } from "ao-tokens/dist/utils";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import styled, { useTheme } from "styled-components";
 import browser from "webextension-polyfill";
-import { getTagValue, useAo, type Message } from "~tokens/aoTokens/ao";
-import { AO_NATIVE_TOKEN } from "~utils/ao_import";
+import { useAo } from "~tokens/aoTokens/ao";
+import { AO_NATIVE_TOKEN_BALANCE_MIRROR } from "~utils/ao_import";
 import { ExtensionStorage } from "~utils/storage";
 
 interface AoBannerProps {
@@ -18,39 +17,26 @@ export default function AoBanner({ activeAddress }: AoBannerProps) {
   const theme = useTheme();
   const [showBanner, setShowBanner] = useState(false);
 
-  const [aoTokens] = useStorage(
-    {
-      key: "ao_tokens",
-      instance: ExtensionStorage
-    },
-    []
-  );
-
-  const aoToken = useMemo<TokenInfo | undefined>(() => {
-    if (aoTokens.length === 0) return undefined;
-    return aoTokens.find((token) => token.processId === AO_NATIVE_TOKEN);
-  }, [aoTokens]);
-
   async function getAoNativeTokenBalance() {
     const res = await ao.dryrun({
       Id: "0000000000000000000000000000000000000000001",
       Owner: activeAddress,
-      process: AO_NATIVE_TOKEN,
+      process: AO_NATIVE_TOKEN_BALANCE_MIRROR,
       tags: [{ name: "Action", value: "Balance" }]
     });
 
-    // find result message
-    for (const msg of res.Messages as Message[]) {
-      const balance = getTagValue("Balance", msg.Tags);
+    const balance = res.Messages[0].Data;
 
-      // return balance if found
-      if (balance) {
-        return new Quantity(BigInt(balance), BigInt(aoToken.Denomination));
-      }
+    if (balance) {
+      return new Quantity(BigInt(balance), BigInt(12));
     }
 
-    // default return
-    return new Quantity(0, BigInt(aoToken.Denomination));
+    return new Quantity(0, BigInt(12));
+  }
+
+  async function hideBanner() {
+    setShowBanner(false);
+    await ExtensionStorage.set(`ao_hide_banner_${activeAddress}`, true);
   }
 
   async function fetchAoNativeTokenBalance() {
@@ -59,30 +45,115 @@ export default function AoBanner({ activeAddress }: AoBannerProps) {
   }
 
   useEffect(() => {
-    if (activeAddress && aoToken && ao) {
-      fetchAoNativeTokenBalance().catch(() => {});
+    if (activeAddress && ao) {
+      ExtensionStorage.get(`ao_hide_banner_${activeAddress}`).then(
+        (hideBanner) => {
+          if (!hideBanner) {
+            fetchAoNativeTokenBalance().catch(() => {});
+          } else {
+            setShowBanner(false);
+          }
+        }
+      );
     }
-  }, [activeAddress, aoToken, ao]);
+  }, [activeAddress, ao]);
 
-  if (!activeAddress || !aoToken || !showBanner) {
+  if (!activeAddress || !showBanner) {
     return null;
   }
 
   return (
-    <Banner displayTheme={theme.displayTheme}>
+    <Banner displayTheme={theme.displayTheme} show={showBanner}>
+      <BannerVector />
+      <Close onClick={hideBanner} />
       <h4>{browser.i18n.getMessage("ao_token_announcement_title")}</h4>
     </Banner>
   );
 }
 
-const Banner = styled.div<{ displayTheme: DisplayTheme }>`
+function BannerVector() {
+  return (
+    <BannerVectorWrapper>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="100%"
+        height="100%"
+        viewBox="0 0 378 40"
+        fill="none"
+      >
+        <g
+          style={{ mixBlendMode: "color-dodge" }}
+          opacity="0.5"
+          filter="url(#filter0_f_8_50)"
+        >
+          <path
+            d="M190 21C65.2 2.2 0.666666 36.1667 -16 55.5H395V-9C378.667 8.83334 314.8 39.8 190 21Z"
+            fill="url(#paint0_radial_8_50)"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_8_50"
+            x="-24"
+            y="-17"
+            width="427"
+            height="80.5"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="4"
+              result="effect1_foregroundBlur_8_50"
+            />
+          </filter>
+          <radialGradient
+            id="paint0_radial_8_50"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(-16 -9) rotate(8.91893) scale(416.03 608.898)"
+          >
+            <stop offset="0.141974" stop-color="#544A81" />
+            <stop offset="0.226901" stop-color="#8E7BEA" />
+            <stop offset="0.587079" stop-color="#544A81" />
+            <stop offset="1" stop-color="#8E7BEA" />
+          </radialGradient>
+        </defs>
+      </svg>
+    </BannerVectorWrapper>
+  );
+}
+
+const Banner = styled.div<{ displayTheme: DisplayTheme; show: boolean }>`
   display: flex;
   padding: 0.75rem;
-  background: ${(props) =>
-    props.displayTheme === "light" ? "#ffffff" : "#191919"};
+  position: relative;
+  flex-direction: row;
+  color: #ffffff;
+  background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 0.4) 100%
+    ),
+    radial-gradient(
+      945.06% 141.42% at 0% 0%,
+      #8e7bea 0%,
+      #544a81 41.29%,
+      #8e7bea 77.31%,
+      #544a81 85.8%
+    );
   border-bottom: 2px solid #8e7bea;
   justify-content: center;
-
+  align-items: center;
+  gap: 8px;
   h4 {
     font-weight: 500;
     font-size: 0.8rem !important;
@@ -91,3 +162,28 @@ const Banner = styled.div<{ displayTheme: DisplayTheme }>`
     font-size: inherit;
   }
 `;
+
+const BannerVectorWrapper = styled.div`
+  height: 70px;
+  width: 100%;
+  position: absolute;
+  right: -17px;
+  bottom: -15.5px;
+`;
+
+const Close = styled(CloseIcon)`
+  z-index: 1;
+  font-size: 1.3rem;
+  width: 1em;
+  height: 1em;
+  cursor: pointer;
+  transition: all 0.23s ease-in-out;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:active {
+    transform: scale(0.95) translateY(-50%);
+  }
+`;

src/tokens/aoTokens/ao.ts

@@ -9,6 +9,10 @@ import { ArweaveSigner, createData } from "arbundles";
 import { getActiveKeyfile } from "~wallets";
 import { isLocalWallet } from "~utils/assertions";
 import { freeDecryptedWallet } from "~wallets/encryption";
+import {
+  AO_NATIVE_TOKEN,
+  AO_NATIVE_TOKEN_BALANCE_MIRROR
+} from "~utils/ao_import";
 
 export type AoInstance = ReturnType<typeof connect>;
 
@@ -152,22 +156,19 @@ export function useAoTokens(): [TokenInfoWithBalance[], boolean] {
               const balance = Number(
                 await timeoutPromise(
                   (async () => {
-                    if (id === "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w") {
-                      try {
-                        const res = await dryrun({
-                          Id: "0000000000000000000000000000000000000000001",
-                          Owner: activeAddress,
-                          process:
-                            "F-EvpwmZXIlndrEqXOXSSifUeyn-LMBdeJKI6Gflk1g",
-                          tags: [{ name: "Action", value: "Balance" }]
-                        });
-                        const balance = res.Messages[0].Data;
-                        if (balance) {
-                          return new Quantity(BigInt(balance), BigInt(12));
-                        }
-                      } catch (err) {
-                        console.error("Error during dryrun:", err);
+                    if (id === AO_NATIVE_TOKEN) {
+                      const res = await dryrun({
+                        Id: "0000000000000000000000000000000000000000001",
+                        Owner: activeAddress,
+                        process: AO_NATIVE_TOKEN_BALANCE_MIRROR,
+                        tags: [{ name: "Action", value: "Balance" }]
+                      });
+                      const balance = res.Messages[0].Data;
+                      if (balance) {
+                        return new Quantity(BigInt(balance), BigInt(12));
                       }
+                      // default return
+                      return new Quantity(0, BigInt(12));
                     } else {
                       const aoToken = await Token(id);
                       const balance = await aoToken.getBalance(activeAddress);

src/utils/ao_import.ts

@@ -2,6 +2,8 @@ import { getAoTokens } from "~tokens";
 import { ExtensionStorage } from "./storage";
 
 export const AO_NATIVE_TOKEN = "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w";
+export const AO_NATIVE_TOKEN_BALANCE_MIRROR =
+  "F-EvpwmZXIlndrEqXOXSSifUeyn-LMBdeJKI6Gflk1g";
 export const AO_NATIVE_OLD_TOKEN =
   "BJj8sNao3XPqsoJnea4DnJyPzHnKhkhcY1HtWBxHcLs";