feat(frontend): add browser wallet icons (sifiorg#369)

* dependencies: upgrade shared-ui version

* feat: use wallet icons and name in connection modal

* feat: use wallet icon in header menu

packages/frontend/package.json

@@ -27,7 +27,7 @@
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.12",
     "@sifi/sdk": "^1.9.0",
-    "@sifi/shared-ui": "^1.8.1",
+    "@sifi/shared-ui": "^1.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@types/three": "^0.127.1",
     "@uniswap/permit2-sdk": "^1.2.0",

packages/frontend/src/components/ConnectWallet/ConnectWallet.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent, useState, useEffect } from 'react';
-import { Modal, showToast, WalletOption } from '@sifi/shared-ui';
+import { Modal, showToast, WalletOption, useWalletBranding } from '@sifi/shared-ui';
 import useConnectWallet from 'src/hooks/useConnectWallet';
 import { type SupportedWallet } from 'src/connectors';
 import { getViemErrorMessage } from 'src/utils';
@@ -17,6 +17,7 @@ const ConnectWalletModal: FunctionComponent<ConnectWalletModalProps> = ({
   closeModal,
 }: ConnectWalletModalProps) => {
   const { connectWallet, error } = useConnectWallet();
+  const { text: injectedWalletText, icon: injectedWalletIcon } = useWalletBranding();
 
   useEffect(() => {
     if (error) {
@@ -29,11 +30,11 @@ const ConnectWalletModal: FunctionComponent<ConnectWalletModalProps> = ({
       <div className="pb-6">
         {supportedWallets.map(wallet => (
           <WalletOption
-            // Todo(Nathan): Make this dynamic
-            injectedWalletName={wallet === 'injected' ? 'MetaMask' : undefined}
             key={wallet}
             walletOption={wallet}
             activate={() => connectWallet(wallet)}
+            injectedWalletName={wallet === 'injected' ? injectedWalletText : undefined}
+            injectedWalletIcon={wallet === 'injected' ? injectedWalletIcon : undefined}
           />
         ))}
       </div>

packages/frontend/src/components/HeaderMenu/HeaderMenu.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { Menu } from '@sifi/shared-ui';
+import { Menu, useWalletBranding } from '@sifi/shared-ui';
 import { useAccount, useDisconnect, useEnsName, useNetwork } from 'wagmi';
 import { formatAddress, formatEnsName } from 'src/utils';
 
@@ -8,6 +8,7 @@ const HeaderMenu: FunctionComponent = () => {
   const { data: ensName } = useEnsName({ address });
   const { chain } = useNetwork();
   const { disconnect } = useDisconnect();
+  const { icon, text } = useWalletBranding();
 
   if (!address || !isConnected) return null;
 
@@ -21,7 +22,7 @@ const HeaderMenu: FunctionComponent = () => {
   ];
 
   return (
-    <Menu label={label} links={menuLinks}>
+    <Menu icon={icon ? { src: icon, alt: `${text} icon`} : undefined} label={label} links={menuLinks}>
       <div className="px-6 py-4">
         <span className="mb-3 block text-sm" id="network-label">
           Network