refactor: update icon usage in ConnectWallet component

- Replaced `WalletIcon` with `GenericWalletIcon` - Introduced new icons: `CoinsIcon`, `OutlineWalletIcon` - Updated respective visual elements to use the new icons for better consistency
thirdweb-dev · Jun 14, 2024 · 9088174 · 9088174
1 parent 0df0764
commit 9088174
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 19 deletions.
diff --git a/.changeset/real-lies-visit.md b/.changeset/real-lies-visit.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update Connect Modal icons
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -69,10 +69,11 @@ import {
 } from "./NetworkSelector.js";
 import { onModalUnmount } from "./constants.js";
 import type { SupportedTokens } from "./defaultTokens.js";
+import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
+import { GenericWalletIcon } from "./icons/GenericWalletIcon.js";
+import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
 import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
-import { WalletIcon } from "./icons/WalletIcon.js";
-import { genericTokenIcon } from "./icons/dataUris.js";
 import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
@@ -184,7 +185,7 @@ export const ConnectedWalletDetails: React.FC<{
       ) : activeWallet?.id ? (
         <WalletImage size={iconSize.lg} id={activeWallet.id} client={client} />
       ) : (
-        <WalletIcon size={iconSize.lg} />
+        <GenericWalletIcon size={iconSize.lg} />
       )}
 
       <Container flex="column" gap="xxs">
@@ -330,7 +331,7 @@ function DetailsModal(props: {
             client={client}
           />
         ) : (
-          <WalletIcon size={iconSize.xxl} />
+          <GenericWalletIcon size={iconSize.xxl} />
         )}
 
         <Spacer y="md" />
@@ -491,12 +492,7 @@ function DetailsModal(props: {
               fontSize: fontSize.sm,
             }}
           >
-            <Img
-              width={iconSize.md}
-              height={iconSize.md}
-              src={genericTokenIcon}
-              client={client}
-            />
+            <CoinsIcon size={iconSize.md} />
             <Text color="primaryText">View Funds</Text>
           </MenuButton>
 
@@ -509,12 +505,7 @@ function DetailsModal(props: {
               fontSize: fontSize.sm,
             }}
           >
-            <Img
-              width={iconSize.md}
-              height={iconSize.md}
-              src={genericTokenIcon}
-              client={client}
-            />
+            <OutlineWalletIcon size={iconSize.md} />
             <Text color="primaryText">Manage Wallet</Text>
           </MenuButton>
 

diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/CoinsIcon.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/CoinsIcon.tsx
@@ -0,0 +1,46 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const CoinsIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      role="presentation"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.0901 10.37C19.0354 10.7224 19.8766 11.3075 20.5358 12.0712C21.1951 12.8349 21.6512 13.7524 21.8618 14.7391C22.0725 15.7257 22.031 16.7495 21.7411 17.7158C21.4513 18.6822 20.9224 19.5598 20.2035 20.2676C19.4846 20.9754 18.5988 21.4905 17.6281 21.7652C16.6573 22.04 15.633 22.0655 14.6498 21.8395C13.6666 21.6134 12.7562 21.1431 12.0029 20.472C11.2496 19.8009 10.6777 18.9507 10.3401 18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 6H8V10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7101 13.88L17.4101 14.59L14.5901 17.41"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/...web/ui/ConnectWallet/icons/WalletIcon.tsx → ...ConnectWallet/icons/GenericWalletIcon.tsx b/...web/ui/ConnectWallet/icons/WalletIcon.tsx → ...ConnectWallet/icons/GenericWalletIcon.tsx
@@ -3,7 +3,7 @@ import type { IconFC } from "./types.js";
 /**
  * @internal
  */
-export const WalletIcon: IconFC = (props) => {
+export const GenericWalletIcon: IconFC = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
@@ -0,0 +1,32 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const OutlineWalletIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      role="presentation"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
@@ -18,7 +18,7 @@ import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { TokenInfo } from "../../../defaultTokens.js";
-import { WalletIcon } from "../../../icons/WalletIcon.js";
+import { GenericWalletIcon } from "../../../icons/GenericWalletIcon.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
 
@@ -126,7 +126,7 @@ export function PayWithCrypto(props: {
         )}
 
         <Container flex="row" gap="xxs" center="y" color="secondaryText">
-          <WalletIcon size={fontSize.xs} />
+          <GenericWalletIcon size={fontSize.xs} />
           {balanceQuery.data ? (
             <Text size="xs" color="secondaryText" weight={500}>
               {formatTokenBalance(balanceQuery.data, true)}