ArConnect 1.11.1

assets/_locales/en/messages.json

@@ -1267,6 +1267,22 @@
     "message": "Keystone support is in beta. Some API features might not be supported.",
     "description": "Warning about keystone support"
   },
+  "keystone_ao_description": {
+    "message": "Keystone does not support sending ao tokens. Keystone only supports receiving ao tokens. Sending support coming soon.",
+    "description": "Description about keystone ao issue"
+  },
+  "keystone_ao_title": {
+    "message": "Keystone Error Detected.",
+    "description": "Title about keystone ao issue"
+  },
+  "keystone_ao_popup": {
+    "message": "Keystone does not support sending ao tokens. Keystone only supports receiving ao tokens. Sending support coming soon. Send and receiving AR Tokens is supported",
+    "description": "Popup description about keystone ao issue"
+  },
+  "keystone_ao_popup_title": {
+    "message": "Keystone AO Token Support Notice",
+    "description": "Popup description about keystone ao issue"
+  },
   "token_price_estimate_warning": {
     "message": "Price estimate by",
     "description": "Price estimate warning text. Full text is displayed with a link to Redstone.finance"
@@ -1730,6 +1746,14 @@
     "message": "AO testnet is now live!",
     "description": "ao announcement title text"
   },
+  "ao_degraded": {
+    "message": "AO Token Process Network Degraded.",
+    "description": "ao degraded title text"
+  },
+  "ao_degraded_description": {
+    "message": "AO token process will be available when the network issues are resolved.",
+    "description": "ao degraded description text"
+  },
   "import_token": {
     "message": "Import Token",
     "description": "import token button description"

src/routes/popup/announcement.tsx

@@ -5,10 +5,10 @@ import {
   Text,
   type DisplayTheme
 } from "@arconnect/components";
-import notificationGraphic from "url:/assets/ecosystem/notifications-promo.svg";
 import { ExtensionStorage } from "~utils/storage";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import browser from "webextension-polyfill";
+import aoLogo from "url:/assets/ecosystem/ao-token-logo.png";
 import styled from "styled-components";
 import { useStorage } from "@plasmohq/storage/hook";
 
@@ -19,6 +19,7 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
   });
 
   const [checked, setChecked] = useState(!!notifications);
+  const modalRef = useRef(null);
 
   useEffect(() => {
     if (notifications !== undefined) {
@@ -31,65 +32,46 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
     setNotifications((prev) => !prev);
   };
 
+  const handleClickOutside = (event) => {
+    if (modalRef.current && !modalRef.current.contains(event.target)) {
+      ExtensionStorage.set("show_announcement", false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
   return (
     <ModalV2
       root={document.getElementById("__plasmo")}
       open={isOpen}
       setOpen={setOpen}
-      announcement={true}
     >
-      <ContentWrapper>
+      <ContentWrapper ref={modalRef}>
         <Content>
           <div>
             <img
-              src={notificationGraphic}
-              alt="notification graphic"
+              src={aoLogo}
+              alt="ao logo"
               style={{ width: "100px", height: "auto" }}
             />
             <HeaderText noMargin heading>
-              {browser.i18n.getMessage("introducing_notifications")}
+              {browser.i18n.getMessage("keystone_ao_popup_title")}
             </HeaderText>
             <Spacer y={1} />
             <CenterText>
-              {browser.i18n.getMessage("enable_notifications_paragraph")}
+              {browser.i18n.getMessage("keystone_ao_popup")}
             </CenterText>
             <Spacer y={1} />
           </div>
-          <CheckContainer>
-            {checked ? (
-              <CheckedSvg
-                onClick={handleCheckbox}
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z"
-                  fill="white"
-                />
-              </CheckedSvg>
-            ) : (
-              <UncheckedSvg
-                onClick={handleCheckbox}
-                width="19"
-                height="18"
-                viewBox="0 0 19 18"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  x="1.5"
-                  y="1"
-                  width="16"
-                  height="16"
-                  rx="1"
-                  stroke="#A3A3A3"
-                  stroke-width="2"
-                />
-              </UncheckedSvg>
-            )}
-            {browser.i18n.getMessage("enable_notifications_title")}
-          </CheckContainer>
         </Content>
         <ButtonV2
           fullWidth
@@ -98,7 +80,6 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
             setNotifications(checked);
             ExtensionStorage.set("show_announcement", false);
           }}
-          style={{ marginTop: "43px", fontWeight: "400" }}
         >
           {browser.i18n.getMessage("got_it")}
         </ButtonV2>

src/routes/popup/index.tsx

@@ -13,7 +13,7 @@ import { trackEvent, EventType, trackPage, PageType } from "~utils/analytics";
 import styled from "styled-components";
 import { useTokens } from "~tokens";
 import { useAoTokens } from "~tokens/aoTokens/ao";
-import { useBalance } from "~wallets/hooks";
+import { useActiveWallet, useBalance } from "~wallets/hooks";
 import BuyButton from "~components/popup/home/BuyButton";
 
 export default function Home() {
@@ -26,7 +26,7 @@ export default function Home() {
     key: "active_address",
     instance: ExtensionStorage
   });
-  const [, setShowAnnouncement] = useStorage<boolean>({
+  const [announcement, setShowAnnouncement] = useStorage<boolean>({
     key: "show_announcement",
     instance: ExtensionStorage
   });
@@ -39,6 +39,9 @@ export default function Home() {
   // ao Tokens
   const [aoTokens] = useAoTokens();
 
+  // checking to see if it's a hardware wallet
+  const wallet = useActiveWallet();
+
   // assets
   const assets = useMemo(
     () => tokens.filter((token) => token.type === "asset"),
@@ -90,7 +93,9 @@ export default function Home() {
       }
     };
     checkExpiration();
+  }, []);
 
+  useEffect(() => {
     // check whether to show announcement
     (async () => {
       // reset announcements if setting_notifications is uninitialized
@@ -99,21 +104,18 @@ export default function Home() {
         setLoggedIn(true);
       }
 
-      const announcement = await ExtensionStorage.get("show_announcement");
-      if (announcement === undefined) {
-        setShowAnnouncement(true);
-      }
-      if (announcement || announcement === "true") {
+      // WALLET.TYPE JUST FOR KEYSTONE POPUP
+      if (announcement && wallet?.type === "hardware") {
         setOpen(true);
       } else {
         setOpen(false);
       }
     })();
-  }, []);
+  }, [wallet, announcement]);
 
   return (
     <HomeWrapper>
-      {/* {loggedIn && <AnnouncementPopup isOpen={isOpen} setOpen={setOpen} />} */}
+      {loggedIn && <AnnouncementPopup isOpen={isOpen} setOpen={setOpen} />}
       <WalletHeader />
       <Balance />
       {(!noBalance && (

src/routes/popup/receive.tsx

@@ -17,6 +17,9 @@ import { useEffect, type MouseEventHandler, useState } from "react";
 import { PageType, trackPage } from "~utils/analytics";
 import HeadV2 from "~components/popup/HeadV2";
 import { useTheme } from "~utils/theme";
+import { Degraded, WarningWrapper } from "./send";
+import { WarningIcon } from "~components/popup/Token";
+import { useActiveWallet } from "~wallets/hooks";
 
 export default function Receive() {
   // active address
@@ -34,6 +37,9 @@ export default function Receive() {
   const theme = useTheme();
   const { setToast } = useToasts();
 
+  const wallet = useActiveWallet();
+  const keystoneWarning = wallet?.type === "hardware";
+
   const copyAddress: MouseEventHandler = (e) => {
     e.stopPropagation();
     copy(activeAddress);
@@ -53,42 +59,52 @@ export default function Receive() {
       <div>
         <HeadV2 title={browser.i18n.getMessage("receive")} />
       </div>
-      <ContentWrapper>
-        <Section style={{ paddingBottom: "8px" }}>
-          <QRCodeWrapper displayTheme={theme}>
-            <QRCodeSVG
-              fgColor="#fff"
-              bgColor="transparent"
-              size={285.84}
-              value={activeAddress ?? ""}
-            />
-          </QRCodeWrapper>
-        </Section>
-        <Section style={{ paddingTop: "8px" }}>
-          <AddressField fullWidth onClick={copyAddress}>
-            {formatAddress(activeAddress ?? "", 6)}
-            <TooltipV2
-              content={browser.i18n.getMessage("copy_address")}
-              position="bottom"
-            >
-              <CopyAction as={copied ? CheckIcon : CopyIcon} />
-            </TooltipV2>
-          </AddressField>
-        </Section>
-      </ContentWrapper>
+      <div>
+        {keystoneWarning && (
+          <Degraded>
+            <WarningWrapper>
+              <WarningIcon color="#fff" />
+            </WarningWrapper>
+            <div>
+              <span>{browser.i18n.getMessage("keystone_ao_description")}</span>
+            </div>
+          </Degraded>
+        )}
+        <ContentWrapper>
+          <Section style={{ padding: "8px 15px 0 15px" }}>
+            <QRCodeWrapper displayTheme={theme}>
+              <QRCodeSVG
+                fgColor="#fff"
+                bgColor="transparent"
+                size={275}
+                value={activeAddress ?? ""}
+              />
+            </QRCodeWrapper>
+          </Section>
+          <Section style={{ padding: "8px 15px 0 15px" }}>
+            <AddressField fullWidth onClick={copyAddress}>
+              {formatAddress(activeAddress ?? "", 6)}
+              <TooltipV2
+                content={browser.i18n.getMessage("copy_address")}
+                position="bottom"
+              >
+                <CopyAction as={copied ? CheckIcon : CopyIcon} />
+              </TooltipV2>
+            </AddressField>
+          </Section>
+        </ContentWrapper>
+      </div>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
   height: calc(100vh - 72px);
 `;
 
 const ContentWrapper = styled.div`
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -122,7 +138,6 @@ const QRCodeWrapper = styled.div<{ displayTheme: DisplayTheme }>`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: max-content%;
   background-color: ${(props) =>
     props.theme.displayTheme === "light" ? "#7866D3" : "#8E7BEA"};
   border-radius: 21.44px;

src/routes/popup/send/confirm.tsx

@@ -735,7 +735,7 @@ export default function Confirm({ tokenID, qty }: Props) {
 
 const PasswordWrapper = styled.div`
   display: flex;
-  padding-top: 16px;
+  padding: 16px 0;
   flex-direction: column;
 
   p {
@@ -814,7 +814,6 @@ const ConfirmWrapper = styled.div`
   height: 100%;
   flex-direction: column;
   padding: 0 15px;
-  overflow: hidden;
 `;
 
 const Address = styled.div`