feat: injected -> browser wallet w/ icon updates (#6155)

* feat: injected -> browser wallet w/ icon updates

* update tests

src/components/WalletModal/InjectedOption.tsx

@@ -1,18 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { Connector } from '@web3-react/types'
-import INJECTED_ICON_URL from 'assets/images/arrow-right.svg'
 import METAMASK_ICON_URL from 'assets/images/metamask.png'
+import INJECTED_DARK_ICON_URL from 'assets/svg/browser-wallet-dark.svg'
+import INJECTED_LIGHT_ICON_URL from 'assets/svg/browser-wallet-light.svg'
 import { ConnectionType, injectedConnection } from 'connection'
 import { getConnectionName } from 'connection/utils'
+import { useIsDarkMode } from 'state/user/hooks'
 
 import Option from './Option'
 
-const INJECTED_PROPS = {
-  color: '#010101',
-  icon: INJECTED_ICON_URL,
-  id: 'injected',
-}
-
 const METAMASK_PROPS = {
   color: '#E8831D',
   icon: METAMASK_ICON_URL,
@@ -37,9 +33,12 @@ export function MetaMaskOption({ tryActivation }: { tryActivation: (connector: C
 
 export function InjectedOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {
   const isActive = injectedConnection.hooks.useIsActive()
+  const isDarkMode = useIsDarkMode()
   return (
     <Option
-      {...INJECTED_PROPS}
+      color="#010101"
+      icon={isDarkMode ? INJECTED_DARK_ICON_URL : INJECTED_LIGHT_ICON_URL}
+      id="injected"
       isActive={isActive}
       header={getConnectionName(ConnectionType.INJECTED, false)}
       onClick={() => tryActivation(injectedConnection.connector)}

src/components/WalletModal/Option.tsx

@@ -75,15 +75,15 @@ const SubHeader = styled.div`
   font-size: 12px;
 `
 
-const IconWrapper = styled.div<{ size?: number | null }>`
+const IconWrapper = styled.div`
   ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
   padding-right: 12px;
   & > img,
   span {
-    height: ${({ size }) => (size ? size + 'px' : '28px')};
-    width: ${({ size }) => (size ? size + 'px' : '28px')};
+    height: 40px;
+    width: 40px;
   }
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     align-items: flex-end;
@@ -93,7 +93,6 @@ const IconWrapper = styled.div<{ size?: number | null }>`
 export default function Option({
   link = null,
   clickable = true,
-  size,
   onClick = null,
   color,
   header,
@@ -104,7 +103,6 @@ export default function Option({
 }: {
   link?: string | null
   clickable?: boolean
-  size?: number | null
   onClick?: null | (() => void)
   color: string
   header: React.ReactNode
@@ -129,7 +127,7 @@ export default function Option({
       >
         <OptionCardLeft>
           <HeaderText color={color}>
-            <IconWrapper size={size}>
+            <IconWrapper>
               <img src={icon} alt="Icon" />
             </IconWrapper>
             {header}

src/components/WalletModal/index.test.tsx

@@ -74,7 +74,7 @@ it('loads Wallet Modal on desktop with generic Injected', async () => {
   jest.spyOn(connectionUtils, 'getIsCoinbaseWallet').mockReturnValue(false)
 
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
-  expect(screen.getByText('Browser Wallet')).toBeInTheDocument()
+  expect(screen.getByText('Browser wallet')).toBeInTheDocument()
   expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
   expect(screen.getByText('WalletConnect')).toBeInTheDocument()
   expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(3)

src/connection/utils.ts

@@ -63,7 +63,7 @@ export function getConnectionName(
 ) {
   switch (connectionType) {
     case ConnectionType.INJECTED:
-      return hasMetaMaskExtension ? 'MetaMask' : 'Browser Wallet'
+      return hasMetaMaskExtension ? 'MetaMask' : 'Browser wallet'
     case ConnectionType.COINBASE_WALLET:
       return 'Coinbase Wallet'
     case ConnectionType.WALLET_CONNECT: