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>
This commit is contained in:
parent
bf31ca4f06
commit
a77752ab83
@ -3,6 +3,7 @@ import { Unicon } from 'components/Unicon'
|
|||||||
import { Connection, ConnectionType } from 'connection'
|
import { Connection, ConnectionType } from 'connection'
|
||||||
import useENSAvatar from 'hooks/useENSAvatar'
|
import useENSAvatar from 'hooks/useENSAvatar'
|
||||||
import styled from 'styled-components/macro'
|
import styled from 'styled-components/macro'
|
||||||
|
import { useIsDarkMode } from 'theme/components/ThemeToggle'
|
||||||
import { flexColumnNoWrap } from 'theme/styles'
|
import { flexColumnNoWrap } from 'theme/styles'
|
||||||
|
|
||||||
import sockImg from '../../assets/svg/socks.svg'
|
import sockImg from '../../assets/svg/socks.svg'
|
||||||
@ -58,9 +59,10 @@ const Socks = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const MiniWalletIcon = ({ connection, side }: { connection: Connection; side: 'left' | 'right' }) => {
|
const MiniWalletIcon = ({ connection, side }: { connection: Connection; side: 'left' | 'right' }) => {
|
||||||
|
const isDarkMode = useIsDarkMode()
|
||||||
return (
|
return (
|
||||||
<MiniIconContainer side={side}>
|
<MiniIconContainer side={side}>
|
||||||
<MiniImg src={connection.getIcon?.()} alt={`${connection.getName()} icon`} />
|
<MiniImg src={connection.getIcon?.(isDarkMode)} alt={`${connection.getName()} icon`} />
|
||||||
</MiniIconContainer>
|
</MiniIconContainer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap
|
|||||||
import Loader from 'components/Icons/LoadingSpinner'
|
import Loader from 'components/Icons/LoadingSpinner'
|
||||||
import { Connection, ConnectionType } from 'connection'
|
import { Connection, ConnectionType } from 'connection'
|
||||||
import styled from 'styled-components/macro'
|
import styled from 'styled-components/macro'
|
||||||
|
import { useIsDarkMode } from 'theme/components/ThemeToggle'
|
||||||
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
|
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
|
||||||
|
|
||||||
import NewBadge from './NewBadge'
|
import NewBadge from './NewBadge'
|
||||||
@ -68,6 +69,7 @@ type OptionProps = {
|
|||||||
}
|
}
|
||||||
export default function Option({ connection, pendingConnectionType, activate }: OptionProps) {
|
export default function Option({ connection, pendingConnectionType, activate }: OptionProps) {
|
||||||
const isPending = pendingConnectionType === connection.type
|
const isPending = pendingConnectionType === connection.type
|
||||||
|
const isDarkMode = useIsDarkMode()
|
||||||
const content = (
|
const content = (
|
||||||
<TraceEvent
|
<TraceEvent
|
||||||
events={[BrowserEvent.onClick]}
|
events={[BrowserEvent.onClick]}
|
||||||
@ -83,7 +85,7 @@ export default function Option({ connection, pendingConnectionType, activate }:
|
|||||||
>
|
>
|
||||||
<OptionCardLeft>
|
<OptionCardLeft>
|
||||||
<IconWrapper>
|
<IconWrapper>
|
||||||
<img src={connection.getIcon?.()} alt="Icon" />
|
<img src={connection.getIcon?.(isDarkMode)} alt="Icon" />
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
<HeaderText>{connection.getName()}</HeaderText>
|
<HeaderText>{connection.getName()}</HeaderText>
|
||||||
{connection.isNew && <NewBadge />}
|
{connection.isNew && <NewBadge />}
|
||||||
|
@ -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 { ConnectionType, getConnections, useGetConnection } from 'connection'
|
||||||
import { renderHook } from 'test-utils'
|
import { renderHook } from 'test-utils'
|
||||||
|
|
||||||
@ -108,6 +110,9 @@ describe('connection utility/metadata tests', () => {
|
|||||||
expect(injected.getName()).toBe('Browser Wallet')
|
expect(injected.getName()).toBe('Browser Wallet')
|
||||||
expect(injected.overrideActivate?.()).toBeFalsy()
|
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
|
// Ensures we provide multiple connection options if in an unknown injected browser
|
||||||
expect(displayed.length).toEqual(4)
|
expect(displayed.length).toEqual(4)
|
||||||
})
|
})
|
||||||
|
@ -4,13 +4,14 @@ import { GnosisSafe } from '@web3-react/gnosis-safe'
|
|||||||
import { MetaMask } from '@web3-react/metamask'
|
import { MetaMask } from '@web3-react/metamask'
|
||||||
import { Network } from '@web3-react/network'
|
import { Network } from '@web3-react/network'
|
||||||
import { Connector } from '@web3-react/types'
|
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 { SupportedChainId } from 'constants/chains'
|
||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import { isMobile, isNonIOSPhone } from 'utils/userAgent'
|
import { isMobile, isNonIOSPhone } from 'utils/userAgent'
|
||||||
@ -34,8 +35,7 @@ export interface Connection {
|
|||||||
connector: Connector
|
connector: Connector
|
||||||
hooks: Web3ReactHooks
|
hooks: Web3ReactHooks
|
||||||
type: ConnectionType
|
type: ConnectionType
|
||||||
// TODO(WEB-3130): add darkmode check for icons
|
getIcon?(isDarkMode: boolean): string
|
||||||
getIcon?(): string
|
|
||||||
shouldDisplay(): boolean
|
shouldDisplay(): boolean
|
||||||
overrideActivate?: () => boolean
|
overrideActivate?: () => boolean
|
||||||
isNew?: boolean
|
isNew?: boolean
|
||||||
@ -65,13 +65,15 @@ const getShouldAdvertiseMetaMask = () =>
|
|||||||
const getIsGenericInjector = () => getIsInjected() && !getIsMetaMaskWallet() && !getIsCoinbaseWallet()
|
const getIsGenericInjector = () => getIsInjected() && !getIsMetaMaskWallet() && !getIsCoinbaseWallet()
|
||||||
|
|
||||||
const [web3Injected, web3InjectedHooks] = initializeConnector<MetaMask>((actions) => new MetaMask({ actions, onError }))
|
const [web3Injected, web3InjectedHooks] = initializeConnector<MetaMask>((actions) => new MetaMask({ actions, onError }))
|
||||||
|
|
||||||
const injectedConnection: Connection = {
|
const injectedConnection: Connection = {
|
||||||
// TODO(WEB-3131) re-add "Install MetaMask" string when no injector is present
|
// TODO(WEB-3131) re-add "Install MetaMask" string when no injector is present
|
||||||
getName: () => (getIsGenericInjector() ? 'Browser Wallet' : 'MetaMask'),
|
getName: () => (getIsGenericInjector() ? 'Browser Wallet' : 'MetaMask'),
|
||||||
connector: web3Injected,
|
connector: web3Injected,
|
||||||
hooks: web3InjectedHooks,
|
hooks: web3InjectedHooks,
|
||||||
type: ConnectionType.INJECTED,
|
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(),
|
shouldDisplay: () => getIsMetaMaskWallet() || getShouldAdvertiseMetaMask() || getIsGenericInjector(),
|
||||||
// If on non-injected, non-mobile browser, prompt user to install Metamask
|
// If on non-injected, non-mobile browser, prompt user to install Metamask
|
||||||
overrideActivate: () => {
|
overrideActivate: () => {
|
||||||
@ -82,14 +84,13 @@ const injectedConnection: Connection = {
|
|||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const [web3GnosisSafe, web3GnosisSafeHooks] = initializeConnector<GnosisSafe>((actions) => new GnosisSafe({ actions }))
|
const [web3GnosisSafe, web3GnosisSafeHooks] = initializeConnector<GnosisSafe>((actions) => new GnosisSafe({ actions }))
|
||||||
export const gnosisSafeConnection: Connection = {
|
export const gnosisSafeConnection: Connection = {
|
||||||
getName: () => 'Gnosis Safe',
|
getName: () => 'Gnosis Safe',
|
||||||
connector: web3GnosisSafe,
|
connector: web3GnosisSafe,
|
||||||
hooks: web3GnosisSafeHooks,
|
hooks: web3GnosisSafeHooks,
|
||||||
type: ConnectionType.GNOSIS_SAFE,
|
type: ConnectionType.GNOSIS_SAFE,
|
||||||
getIcon: () => GNOSIS_ICON_URL,
|
getIcon: () => GNOSIS_ICON,
|
||||||
shouldDisplay: () => false,
|
shouldDisplay: () => false,
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -101,7 +102,7 @@ export const walletConnectConnection: Connection = {
|
|||||||
connector: web3WalletConnect,
|
connector: web3WalletConnect,
|
||||||
hooks: web3WalletConnectHooks,
|
hooks: web3WalletConnectHooks,
|
||||||
type: ConnectionType.WALLET_CONNECT,
|
type: ConnectionType.WALLET_CONNECT,
|
||||||
getIcon: () => WALLET_CONNECT_ICON_URL,
|
getIcon: () => WALLET_CONNECT_ICON,
|
||||||
shouldDisplay: () => !getIsInjectedMobileBrowser(),
|
shouldDisplay: () => !getIsInjectedMobileBrowser(),
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,7 +114,7 @@ export const uniwalletConnectConnection: Connection = {
|
|||||||
connector: web3UniwalletConnect,
|
connector: web3UniwalletConnect,
|
||||||
hooks: web3UniwalletConnectHooks,
|
hooks: web3UniwalletConnectHooks,
|
||||||
type: ConnectionType.UNIWALLET,
|
type: ConnectionType.UNIWALLET,
|
||||||
getIcon: () => UNIWALLET_ICON_URL,
|
getIcon: () => UNIWALLET_ICON,
|
||||||
shouldDisplay: () => Boolean(!getIsInjectedMobileBrowser() && !isNonIOSPhone),
|
shouldDisplay: () => Boolean(!getIsInjectedMobileBrowser() && !isNonIOSPhone),
|
||||||
isNew: true,
|
isNew: true,
|
||||||
}
|
}
|
||||||
@ -125,7 +126,7 @@ const [web3CoinbaseWallet, web3CoinbaseWalletHooks] = initializeConnector<Coinba
|
|||||||
options: {
|
options: {
|
||||||
url: RPC_URLS[SupportedChainId.MAINNET][0],
|
url: RPC_URLS[SupportedChainId.MAINNET][0],
|
||||||
appName: 'Uniswap',
|
appName: 'Uniswap',
|
||||||
appLogoUrl: UNISWAP_LOGO_URL,
|
appLogoUrl: UNISWAP_LOGO,
|
||||||
reloadOnDisconnect: false,
|
reloadOnDisconnect: false,
|
||||||
},
|
},
|
||||||
onError,
|
onError,
|
||||||
@ -137,7 +138,7 @@ const coinbaseWalletConnection: Connection = {
|
|||||||
connector: web3CoinbaseWallet,
|
connector: web3CoinbaseWallet,
|
||||||
hooks: web3CoinbaseWalletHooks,
|
hooks: web3CoinbaseWalletHooks,
|
||||||
type: ConnectionType.COINBASE_WALLET,
|
type: ConnectionType.COINBASE_WALLET,
|
||||||
getIcon: () => COINBASE_ICON_URL,
|
getIcon: () => COINBASE_ICON,
|
||||||
shouldDisplay: () =>
|
shouldDisplay: () =>
|
||||||
Boolean((isMobile && !getIsInjectedMobileBrowser()) || !isMobile || getIsCoinbaseWalletBrowser()),
|
Boolean((isMobile && !getIsInjectedMobileBrowser()) || !isMobile || getIsCoinbaseWalletBrowser()),
|
||||||
// If on a mobile browser that isn't the coinbase wallet browser, deeplink to the coinbase wallet app
|
// If on a mobile browser that isn't the coinbase wallet browser, deeplink to the coinbase wallet app
|
||||||
|
Loading…
Reference in New Issue
Block a user