Use ArSvgies package + cache images in localStorage for wallets and contacts

package.json

@@ -47,6 +47,7 @@
     ]
   },
   "dependencies": {
+    "@7i7o/arsvgies": "^1.1.0",
     "@arconnect/components": "^0.2.6",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",

src/components/Recipient.tsx

@@ -9,6 +9,7 @@ import { searchArNSName } from "~lib/arns";
 import { useToasts } from "@arconnect/components";
 import { formatAddress, isAddressFormat } from "~utils/format";
 import { ExtensionStorage } from "~utils/storage";
+import Squircle from "./Squircle";
 
 export type Contact = {
   name: string;
@@ -17,6 +18,7 @@ export type Contact = {
   notes: string;
   ArNSAddress: string;
   avatarId: string;
+  avatar: string;
 };
 
 export const generateProfileIcon = (name) => {
@@ -183,7 +185,7 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
                 }}
               >
                 {contact.profileIcon ? (
-                  <ProfilePicture src={contact.profileIcon} alt="Profile" />
+                  <ProfilePicture img={contact.profileIcon} />
                 ) : (
                   <AutoContactPic>
                     {generateProfileIcon(contact?.name || contact.address)}
@@ -253,16 +255,15 @@ const ContactItem = styled.div`
   }
 `;
 
-export const ProfilePicture = styled.img<{ size?: string }>`
-  width: ${(props) => (props.size ? props.size : "34px")};
-  height: ${(props) => (props.size ? props.size : "34px")};
-  border-radius: 50%;
+export const ProfilePicture = styled(Squircle)<{ size?: string }>`
+  width: ${(props) => (props.size ? props.size : "2rem")};
+  height: ${(props) => (props.size ? props.size : "2rem")};
   margin-right: 10px;
 `;
 
-export const AutoContactPic = styled.div<{ size?: string }>`
-  width: ${(props) => (props.size ? props.size : "34px")};
-  height: ${(props) => (props.size ? props.size : "34px")};
+export const AutoContactPic = styled(Squircle)<{ size?: string }>`
+  width: ${(props) => (props.size ? props.size : "2rem")};
+  height: ${(props) => (props.size ? props.size : "2rem")};
   display: flex;
   background-color: #ab9aff26;
   align-items: center;

src/components/dashboard/list/WalletListItem.tsx

@@ -7,7 +7,6 @@ import type { StoredWallet } from "~wallets";
 import HardwareWalletIcon from "~components/hardware/HardwareWalletIcon";
 import keystoneLogo from "url:/assets/hardware/keystone.png";
 import BaseElement, { SettingIcon } from "./BaseElement";
-import { svgie } from "~utils/svgies";
 
 export default function WalletListItem({
   wallet,
@@ -20,11 +19,6 @@ export default function WalletListItem({
   // format address
   const formattedAddress = useMemo(() => formatAddress(address, 8), [address]);
 
-  const svgieAvatar = useMemo(
-    () => svgie(address, { asDataURI: true }),
-    [address]
-  );
-
   // allow dragging with the drag icon
   const dragControls = useDragControls();
 
@@ -40,11 +34,11 @@ export default function WalletListItem({
         title={name}
         description={formattedAddress}
         active={active}
-        img={avatar || svgieAvatar}
+        img={avatar || wallet?.avatar}
         dragControls={dragControls}
         {...props}
       >
-        {!avatar && !svgieAvatar && <SettingIcon as={WalletIcon} />}
+        {!avatar && !wallet?.avatar && <SettingIcon as={WalletIcon} />}
         {wallet.type === "hardware" && wallet.api === "keystone" && (
           <HardwareIcon icon={keystoneLogo} color="#2161FF" />
         )}

src/components/dashboard/subsettings/AddContact.tsx

@@ -33,6 +33,7 @@ import styled from "styled-components";
 import { useLocation } from "wouter";
 import copy from "copy-to-clipboard";
 import { gql } from "~gateways/api";
+import { arSvgie } from "@7i7o/arsvgies";
 
 export default function AddContact() {
   // contacts
@@ -60,7 +61,8 @@ export default function AddContact() {
     profileIcon: "",
     notes: "",
     ArNSAddress: "",
-    avatarId: ""
+    avatarId: "",
+    avatar: ""
   });
 
   useEffect(() => {
@@ -128,10 +130,24 @@ export default function AddContact() {
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
-    setContact({
-      ...contact,
-      [name]: value
-    });
+    if (name !== "address") {
+      setContact({
+        ...contact,
+        [name]: value
+      });
+    } else {
+      if (!value || value.length !== 43) {
+        setContact({
+          ...contact,
+          [name]: value,
+          avatar: ""
+        });
+      } else {
+        arSvgie(value, { asDataURI: true }).then((avatar) =>
+          setContact({ ...contact, [name]: value, avatar })
+        );
+      }
+    }
   };
 
   async function fetchArnsAddresses(ownerAddress) {
@@ -200,7 +216,8 @@ export default function AddContact() {
       profileIcon: contact.profileIcon,
       notes: contact.notes,
       ArNSAddress: contact.ArNSAddress,
-      avatarId: contact.avatarId
+      avatarId: contact.avatarId,
+      avatar: contact.avatar
     };
 
     try {
@@ -213,7 +230,8 @@ export default function AddContact() {
         profileIcon: "",
         notes: "",
         ArNSAddress: "",
-        avatarId: ""
+        avatarId: "",
+        avatar: ""
       });
 
       setLocation(`/contacts/${contact.address}`);
@@ -232,7 +250,8 @@ export default function AddContact() {
       profileIcon: "",
       notes: "",
       ArNSAddress: "",
-      avatarId: ""
+      avatarId: "",
+      avatar: ""
     });
 
     removeContactModal.setOpen(false);
@@ -257,7 +276,10 @@ export default function AddContact() {
           {contact.avatarId && contact.profileIcon && (
             <ContactPic src={contact.profileIcon} />
           )}
-          {!contact.avatarId && !contact.profileIcon && (
+          {!contact.profileIcon && contact.avatar && (
+            <ContactPic img={contact.avatar} />
+          )}
+          {!contact.avatarId && !contact.profileIcon && !contact.avatar && (
             <AutoContactPic>
               {generateProfileIcon(contact.name, contact.address)}
             </AutoContactPic>

src/components/dashboard/subsettings/ContactSettings.tsx

@@ -11,7 +11,7 @@ import {
   useToasts
 } from "@arconnect/components";
 import { CheckIcon, CopyIcon } from "@iconicicons/react";
-import { useState, useEffect, type MouseEventHandler, useMemo } from "react";
+import { useState, useEffect, type MouseEventHandler } from "react";
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import styled from "styled-components";
@@ -22,7 +22,8 @@ import { uploadUserAvatar, getUserAvatar } from "~lib/avatar";
 import { getAllArNSNames } from "~lib/arns";
 import copy from "copy-to-clipboard";
 import { EventType, trackEvent } from "~utils/analytics";
-import { svgie } from "~utils/svgies";
+import Squircle from "~components/Squircle";
+import { arSvgie } from "@7i7o/arsvgies";
 
 export default function ContactSettings({ address }: Props) {
   // contacts
@@ -43,21 +44,15 @@ export default function ContactSettings({ address }: Props) {
     profileIcon: "",
     notes: "",
     ArNSAddress: "",
-    avatarId: ""
+    avatarId: "",
+    avatar: ""
   });
   const [contactIndex, setContactIndex] = useState(-1);
   const [arnsResults, setArnsResults] = useState([]);
   const [avatarLoading, setAvatarLoading] = useState(false);
   const [copied, setCopied] = useState(false);
   const [originalContact, setOriginalContact] = useState(null);
 
-  const svgieAvatar = useMemo(() => {
-    if (!contact.address || contact.avatarId) {
-      return "";
-    }
-    return svgie(contact.address, { asDataURI: true });
-  }, [contact.address, contact.avatarId]);
-
   useEffect(() => {
     const loadedContact = storedContacts.find((c) => c.address === address);
     if (loadedContact) {
@@ -71,7 +66,8 @@ export default function ContactSettings({ address }: Props) {
         profileIcon: "",
         notes: "",
         ArNSAddress: "",
-        avatarId: ""
+        avatarId: "",
+        avatar: ""
       });
       setContactIndex(-1);
     }
@@ -88,12 +84,30 @@ export default function ContactSettings({ address }: Props) {
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
-    setContact({
-      ...contact,
-      [name]: value
-    });
+    if (name !== "address") {
+      setContact({
+        ...contact,
+        [name]: value
+      });
+    } else {
+      if (!value || value.length !== 43) {
+        setContact({
+          ...contact,
+          [name]: value,
+          avatar: ""
+        });
+      } else {
+        arSvgie(value, { asDataURI: true }).then((avatar) =>
+          setContact({ ...contact, [name]: value, avatar })
+        );
+      }
+    }
   };
 
+  useEffect(() => {
+    console.log(`Changed Address: ${contact.address}`);
+  }, [contact.address]);
+
   const saveContact = async () => {
     // check if the address has been changed to a different one that's already in use
     const addressChanged =
@@ -293,7 +307,7 @@ export default function ContactSettings({ address }: Props) {
         <SubTitle>{browser.i18n.getMessage("contact_avatar")}</SubTitle>
         <PicWrapper>
           {contact.avatarId && !avatarLoading ? (
-            <ContactPic src={contact.profileIcon} />
+            <ContactPic img={contact.profileIcon} />
           ) : (
             avatarLoading &&
             contact.avatarId && (
@@ -302,10 +316,10 @@ export default function ContactSettings({ address }: Props) {
               </AutoContactPic>
             )
           )}
-          {!contact.profileIcon && svgieAvatar && (
-            <ContactPic src={svgieAvatar} />
+          {!contact.profileIcon && contact.avatar && (
+            <ContactPic img={contact.avatar} />
           )}
-          {!contact.profileIcon && !svgieAvatar && (
+          {!contact.profileIcon && !contact.avatar && (
             <AutoContactPic>
               {generateProfileIcon(contact.name, contact.address)}
             </AutoContactPic>
@@ -550,10 +564,9 @@ export const AutoContactPic = styled.div`
   background-color: #ab9aff26;
 `;
 
-export const ContactPic = styled.img`
+export const ContactPic = styled(Squircle)`
   width: 100px;
   height: 100px;
-  border-radius: 100%;
   margin-bottom: 10px;
 `;
 

src/components/dashboard/subsettings/WalletSettings.tsx

@@ -29,6 +29,7 @@ import browser from "webextension-polyfill";
 import styled from "styled-components";
 import copy from "copy-to-clipboard";
 import { formatAddress } from "~utils/format";
+import Squircle from "~components/Squircle";
 
 export default function WalletSettings({ address }: Props) {
   // wallets
@@ -219,6 +220,11 @@ export default function WalletSettings({ address }: Props) {
             <CheckIcon />
           </IconButton>
         </InputWithBtn>
+        <Spacer y={1} />
+        <PictureWrapper>
+          <ProfilePicture img={wallet?.avatar} size="240px" />
+        </PictureWrapper>
+        <Spacer y={1} />
       </div>
       <div>
         <Button
@@ -314,6 +320,17 @@ const Wrapper = styled.div`
   height: 100%;
 `;
 
+const PictureWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const ProfilePicture = styled(Squircle)<{ size?: string }>`
+  width: ${(props) => (props.size ? props.size : "2rem")};
+  height: ${(props) => (props.size ? props.size : "2rem")};
+`;
+
 const WalletName = styled(Text).attrs({
   title: true,
   noMargin: true

src/components/popup/Head.tsx

@@ -14,13 +14,13 @@ import { ExtensionStorage } from "~utils/storage";
 import HardwareWalletIcon, {
   hwIconAnimateProps
 } from "~components/hardware/HardwareWalletIcon";
-import { useHardwareApi } from "~wallets/hooks";
+import { useHardwareApi, useWalletsDetails } from "~wallets/hooks";
 import { useHistory } from "~utils/hash_router";
 import { useEffect, useMemo, useState } from "react";
 import keystoneLogo from "url:/assets/hardware/keystone.png";
 import WalletSwitcher from "./WalletSwitcher";
 import styled from "styled-components";
-import { svgie } from "~utils/svgies";
+import { type StoredWallet } from "~wallets";
 
 export default function Head({
   title,
@@ -72,9 +72,19 @@ export default function Head({
 
   const ans = useAnsProfile(activeAddress);
 
-  const svgieAvatar = useMemo(
-    () => svgie(activeAddress, { asDataURI: true }),
-    [activeAddress]
+  // wallets
+  const [wallets, setWallets] = useStorage<StoredWallet[]>(
+    {
+      key: "wallets",
+      instance: ExtensionStorage
+    },
+    []
+  );
+
+  // this wallet
+  const wallet = useMemo(
+    () => wallets?.find((w) => w.address === activeAddress),
+    [wallets, activeAddress]
   );
 
   // first render for animation
@@ -117,13 +127,13 @@ export default function Head({
       >
         <PageTitle>{title}</PageTitle>
         <ClickableAvatar
-          img={ans?.avatar || svgieAvatar}
+          img={ans?.avatar || wallet?.avatar}
           onClick={() => {
             if (!allowOpen) return;
             setOpen(true);
           }}
         >
-          {!ans?.avatar && !svgieAvatar && <NoAvatarIcon />}
+          {!ans?.avatar && !wallet?.avatar && <NoAvatarIcon />}
           <AnimatePresence initial={false}>
             {hardwareApi === "keystone" && (
               <HardwareWalletIcon