fix: re-implement dark mode for connector icons (#6329)

* init

* init

* Update src/connection/index.test.tsx

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/components/Identicon/StatusIcon.test.tsx

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/components/Identicon/StatusIcon.test.tsx

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* address comments

* unit test + remove _url in names

---------

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/components/Identicon/StatusIcon.tsx

@@ -3,6 +3,7 @@ import { Unicon } from 'components/Unicon'
 import { Connection, ConnectionType } from 'connection'
 import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexColumnNoWrap } from 'theme/styles'
 
 import sockImg from '../../assets/svg/socks.svg'
@@ -58,9 +59,10 @@ const Socks = () => {
 }
 
 const MiniWalletIcon = ({ connection, side }: { connection: Connection; side: 'left' | 'right' }) => {
+  const isDarkMode = useIsDarkMode()
   return (
     <MiniIconContainer side={side}>
-      <MiniImg src={connection.getIcon?.()} alt={`${connection.getName()} icon`} />
+      <MiniImg src={connection.getIcon?.(isDarkMode)} alt={`${connection.getName()} icon`} />
     </MiniIconContainer>
   )
 }

src/components/WalletModal/Option.tsx

@@ -3,6 +3,7 @@ import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap
 import Loader from 'components/Icons/LoadingSpinner'
 import { Connection, ConnectionType } from 'connection'
 import styled from 'styled-components/macro'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 
 import NewBadge from './NewBadge'
@@ -68,6 +69,7 @@ type OptionProps = {
 }
 export default function Option({ connection, pendingConnectionType, activate }: OptionProps) {
   const isPending = pendingConnectionType === connection.type
+  const isDarkMode = useIsDarkMode()
   const content = (
     <TraceEvent
       events={[BrowserEvent.onClick]}
@@ -83,7 +85,7 @@ export default function Option({ connection, pendingConnectionType, activate }:
       >
         <OptionCardLeft>
           <IconWrapper>
-            <img src={connection.getIcon?.()} alt="Icon" />
+            <img src={connection.getIcon?.(isDarkMode)} alt="Icon" />
           </IconWrapper>
           <HeaderText>{connection.getName()}</HeaderText>
           {connection.isNew && <NewBadge />}

src/connection/index.test.tsx

@@ -1,3 +1,5 @@
+import INJECTED_DARK_ICON from 'assets/svg/browser-wallet-dark.svg'
+import INJECTED_LIGHT_ICON from 'assets/svg/browser-wallet-light.svg'
 import { ConnectionType, getConnections, useGetConnection } from 'connection'
 import { renderHook } from 'test-utils'
 
@@ -108,6 +110,9 @@ describe('connection utility/metadata tests', () => {
     expect(injected.getName()).toBe('Browser Wallet')
     expect(injected.overrideActivate?.()).toBeFalsy()
 
+    expect(injected.getIcon?.(/* isDarkMode */ false)).toBe(INJECTED_LIGHT_ICON)
+    expect(injected.getIcon?.(/* isDarkMode */ true)).toBe(INJECTED_DARK_ICON)
+
     // Ensures we provide multiple connection options if in an unknown injected browser
     expect(displayed.length).toEqual(4)
   })

src/connection/index.ts

@@ -4,13 +4,14 @@ import { GnosisSafe } from '@web3-react/gnosis-safe'
 import { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
 import { Connector } from '@web3-react/types'
-import COINBASE_ICON_URL from 'assets/images/coinbaseWalletIcon.svg'
+import COINBASE_ICON from 'assets/images/coinbaseWalletIcon.svg'
-import GNOSIS_ICON_URL from 'assets/images/gnosis.png'
+import GNOSIS_ICON from 'assets/images/gnosis.png'
-import METAMASK_ICON_URL from 'assets/images/metamask.svg'
+import METAMASK_ICON from 'assets/images/metamask.svg'
-import UNIWALLET_ICON_URL from 'assets/images/uniwallet.svg'
+import UNIWALLET_ICON from 'assets/images/uniwallet.svg'
-import WALLET_CONNECT_ICON_URL from 'assets/images/walletConnectIcon.svg'
+import WALLET_CONNECT_ICON from 'assets/images/walletConnectIcon.svg'
-import INJECTED_LIGHT_ICON_URL from 'assets/svg/browser-wallet-light.svg'
+import INJECTED_DARK_ICON from 'assets/svg/browser-wallet-dark.svg'
-import UNISWAP_LOGO_URL from 'assets/svg/logo.svg'
+import INJECTED_LIGHT_ICON from 'assets/svg/browser-wallet-light.svg'
+import UNISWAP_LOGO from 'assets/svg/logo.svg'
 import { SupportedChainId } from 'constants/chains'
 import { useCallback } from 'react'
 import { isMobile, isNonIOSPhone } from 'utils/userAgent'
@@ -34,8 +35,7 @@ export interface Connection {
   connector: Connector
   hooks: Web3ReactHooks
   type: ConnectionType
-  // TODO(WEB-3130): add darkmode check for icons
+  getIcon?(isDarkMode: boolean): string
-  getIcon?(): string
   shouldDisplay(): boolean
   overrideActivate?: () => boolean
   isNew?: boolean
@@ -65,13 +65,15 @@ const getShouldAdvertiseMetaMask = () =>
 const getIsGenericInjector = () => getIsInjected() && !getIsMetaMaskWallet() && !getIsCoinbaseWallet()
 
 const [web3Injected, web3InjectedHooks] = initializeConnector<MetaMask>((actions) => new MetaMask({ actions, onError }))
+
 const injectedConnection: Connection = {
   // TODO(WEB-3131) re-add "Install MetaMask" string when no injector is present
   getName: () => (getIsGenericInjector() ? 'Browser Wallet' : 'MetaMask'),
   connector: web3Injected,
   hooks: web3InjectedHooks,
   type: ConnectionType.INJECTED,
-  getIcon: () => (getIsGenericInjector() ? INJECTED_LIGHT_ICON_URL : METAMASK_ICON_URL),
+  getIcon: (isDarkMode: boolean) =>
+    getIsGenericInjector() ? (isDarkMode ? INJECTED_DARK_ICON : INJECTED_LIGHT_ICON) : METAMASK_ICON,
   shouldDisplay: () => getIsMetaMaskWallet() || getShouldAdvertiseMetaMask() || getIsGenericInjector(),
   // If on non-injected, non-mobile browser, prompt user to install Metamask
   overrideActivate: () => {
@@ -82,14 +84,13 @@ const injectedConnection: Connection = {
     return false
   },
 }
-
 const [web3GnosisSafe, web3GnosisSafeHooks] = initializeConnector<GnosisSafe>((actions) => new GnosisSafe({ actions }))
 export const gnosisSafeConnection: Connection = {
   getName: () => 'Gnosis Safe',
   connector: web3GnosisSafe,
   hooks: web3GnosisSafeHooks,
   type: ConnectionType.GNOSIS_SAFE,
-  getIcon: () => GNOSIS_ICON_URL,
+  getIcon: () => GNOSIS_ICON,
   shouldDisplay: () => false,
 }
 
@@ -101,7 +102,7 @@ export const walletConnectConnection: Connection = {
   connector: web3WalletConnect,
   hooks: web3WalletConnectHooks,
   type: ConnectionType.WALLET_CONNECT,
-  getIcon: () => WALLET_CONNECT_ICON_URL,
+  getIcon: () => WALLET_CONNECT_ICON,
   shouldDisplay: () => !getIsInjectedMobileBrowser(),
 }
 
@@ -113,7 +114,7 @@ export const uniwalletConnectConnection: Connection = {
   connector: web3UniwalletConnect,
   hooks: web3UniwalletConnectHooks,
   type: ConnectionType.UNIWALLET,
-  getIcon: () => UNIWALLET_ICON_URL,
+  getIcon: () => UNIWALLET_ICON,
   shouldDisplay: () => Boolean(!getIsInjectedMobileBrowser() && !isNonIOSPhone),
   isNew: true,
 }
@@ -125,7 +126,7 @@ const [web3CoinbaseWallet, web3CoinbaseWalletHooks] = initializeConnector<Coinba
       options: {
         url: RPC_URLS[SupportedChainId.MAINNET][0],
         appName: 'Uniswap',
-        appLogoUrl: UNISWAP_LOGO_URL,
+        appLogoUrl: UNISWAP_LOGO,
         reloadOnDisconnect: false,
       },
       onError,
@@ -137,7 +138,7 @@ const coinbaseWalletConnection: Connection = {
   connector: web3CoinbaseWallet,
   hooks: web3CoinbaseWalletHooks,
   type: ConnectionType.COINBASE_WALLET,
-  getIcon: () => COINBASE_ICON_URL,
+  getIcon: () => COINBASE_ICON,
   shouldDisplay: () =>
     Boolean((isMobile && !getIsInjectedMobileBrowser()) || !isMobile || getIsCoinbaseWalletBrowser()),
   // If on a mobile browser that isn't the coinbase wallet browser, deeplink to the coinbase wallet app