From 1e25436421faa3563d809b0763a18df474b510d2 Mon Sep 17 00:00:00 2001 From: Jordan Frankfurt Date: Tue, 14 Mar 2023 14:08:49 -0500 Subject: [PATCH] feat: injected -> browser wallet w/ icon updates (#6155) * feat: injected -> browser wallet w/ icon updates * update tests --- src/assets/svg/browser-wallet-dark.svg | 65 +++++++++++++++++++ src/assets/svg/browser-wallet-light.svg | 65 +++++++++++++++++++ src/components/WalletModal/InjectedOption.tsx | 15 ++--- src/components/WalletModal/Option.tsx | 10 ++- src/components/WalletModal/index.test.tsx | 2 +- src/connection/utils.ts | 2 +- 6 files changed, 143 insertions(+), 16 deletions(-) create mode 100644 src/assets/svg/browser-wallet-dark.svg create mode 100644 src/assets/svg/browser-wallet-light.svg diff --git a/src/assets/svg/browser-wallet-dark.svg b/src/assets/svg/browser-wallet-dark.svg new file mode 100644 index 0000000000..c5b787e797 --- /dev/null +++ b/src/assets/svg/browser-wallet-dark.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/browser-wallet-light.svg b/src/assets/svg/browser-wallet-light.svg new file mode 100644 index 0000000000..73f2c5d7eb --- /dev/null +++ b/src/assets/svg/browser-wallet-light.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/WalletModal/InjectedOption.tsx b/src/components/WalletModal/InjectedOption.tsx index cd105842af..0810913f95 100644 --- a/src/components/WalletModal/InjectedOption.tsx +++ b/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 (