diff --git a/src/assets/images/cypherDIcon.png b/src/assets/images/cypherDIcon.png new file mode 100644 index 000000000..04678a730 Binary files /dev/null and b/src/assets/images/cypherDIcon.png differ diff --git a/src/components/AccountDetails/AccountDetails.tsx b/src/components/AccountDetails/AccountDetails.tsx index 4a0c1b5ff..ee5c40df9 100755 --- a/src/components/AccountDetails/AccountDetails.tsx +++ b/src/components/AccountDetails/AccountDetails.tsx @@ -4,7 +4,7 @@ import { useActiveWeb3React } from 'hooks'; import { AppDispatch } from 'state'; import { Box } from '@material-ui/core'; import { clearAllTransactions } from 'state/transactions/actions'; -import { shortenAddress, getEtherscanLink } from 'utils'; +import { shortenAddress, getEtherscanLink, getWalletKeys } from 'utils'; import { SUPPORTED_WALLETS } from 'constants/index'; import { ReactComponent as Close } from 'assets/images/CloseIcon.svg'; import { injected, walletlink, safeApp } from 'connectors'; @@ -45,24 +45,9 @@ const AccountDetails: React.FC = ({ const { t } = useTranslation(); function formatConnectorName() { - const { ethereum } = window as any; - const isMetaMask = !!( - ethereum && - !ethereum.isBitKeep && - ethereum.isMetaMask - ); - const isBitkeep = !!(ethereum && ethereum.isBitKeep); - const isBlockWallet = !!(ethereum && ethereum.isBlockWallet); - const name = Object.keys(SUPPORTED_WALLETS) - .filter( - (k) => - SUPPORTED_WALLETS[k].connector === connector && - (connector !== injected || - (isBlockWallet && k === 'BLOCKWALLET') || - (isBitkeep && k === 'BITKEEP') || - (isMetaMask && k === 'METAMASK')), - ) - .map((k) => SUPPORTED_WALLETS[k].name)[0]; + const name = getWalletKeys(connector).map( + (k) => SUPPORTED_WALLETS[k].name, + )[0]; return ( {t('connectedWith')} {name} diff --git a/src/components/AccountDetails/StatusIcon.tsx b/src/components/AccountDetails/StatusIcon.tsx index 10800e420..a84871f54 100755 --- a/src/components/AccountDetails/StatusIcon.tsx +++ b/src/components/AccountDetails/StatusIcon.tsx @@ -4,24 +4,14 @@ import { SUPPORTED_WALLETS } from 'constants/index'; import { injected, portis } from 'connectors'; import { useActiveWeb3React } from 'hooks'; import { useTranslation } from 'react-i18next'; +import { getWalletKeys } from 'utils'; const StatusIcon: React.FC = () => { const { t } = useTranslation(); const { connector } = useActiveWeb3React(); - const { ethereum } = window as any; - const isMetaMask = !!(ethereum && !ethereum.isBitKeep && ethereum.isMetaMask); - const isBlockWallet = !!(ethereum && ethereum.isBlockWallet); - const isBitkeep = !!(ethereum && ethereum.isBitKeep); - const icon = Object.keys(SUPPORTED_WALLETS) - .filter( - (k) => - SUPPORTED_WALLETS[k].connector === connector && - (connector !== injected || - (isBlockWallet && k === 'BLOCKWALLET') || - (isBitkeep && k === 'BITKEEP') || - (isMetaMask && k === 'METAMASK')), - ) - .map((k) => SUPPORTED_WALLETS[k].iconName)[0]; + const icon = getWalletKeys(connector).map( + (k) => SUPPORTED_WALLETS[k].iconName, + )[0]; return ( wallet icon diff --git a/src/components/WalletModal/PendingView.tsx b/src/components/WalletModal/PendingView.tsx index be3165ed3..2ce0b8efe 100755 --- a/src/components/WalletModal/PendingView.tsx +++ b/src/components/WalletModal/PendingView.tsx @@ -18,9 +18,11 @@ const PendingView: React.FC = ({ setPendingError, tryActivation, }) => { - const isMetamask = (window as any).ethereum?.isMetaMask; - const isBlockWallet = (window as any).ethereum?.isBlockWallet; - const isBitKeep = (window as any).ethereum?.isBitKeep; + const { ethereum } = window as any; + const isMetamask = ethereum?.isMetaMask; + const isBlockWallet = ethereum?.isBlockWallet; + const isCypherD = ethereum?.isCypherD; + const isBitKeep = ethereum?.isBitKeep; return ( @@ -64,6 +66,12 @@ const PendingView: React.FC = ({ if (!isBitKeep && option.name === GlobalConst.walletName.BITKEEP) { return null; } + if (isCypherD && option.name !== GlobalConst.walletName.CYPHERD) { + return null; + } + if (!isCypherD && option.name === GlobalConst.walletName.CYPHERD) { + return null; + } if ( isBlockWallet && option.name !== GlobalConst.walletName.BLOCKWALLET diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx index b47fb23d0..2468bf178 100755 --- a/src/components/WalletModal/WalletModal.tsx +++ b/src/components/WalletModal/WalletModal.tsx @@ -153,6 +153,7 @@ const WalletModal: React.FC = ({ const { ethereum, web3 } = window as any; const isMetamask = ethereum && !ethereum.isBitKeep && ethereum.isMetaMask; const isBlockWallet = ethereum && ethereum.isBlockWallet; + const isCypherD = ethereum && ethereum.isCypherD; const isBitKeep = ethereum && ethereum.isBitKeep; return Object.keys(SUPPORTED_WALLETS).map((key) => { const option = SUPPORTED_WALLETS[key]; @@ -180,6 +181,8 @@ const WalletModal: React.FC = ({ active={ option.connector === connector && (connector !== injected || + isCypherD === + (option.name === GlobalConst.walletName.CYPHERD) || isBlockWallet === (option.name === GlobalConst.walletName.BLOCKWALLET) || isBitKeep === @@ -234,11 +237,16 @@ const WalletModal: React.FC = ({ !isBlockWallet ) { return null; + } else if ( + option.name === GlobalConst.walletName.CYPHERD && + !isCypherD + ) { + return null; } // likewise for generic else if ( option.name === GlobalConst.walletName.INJECTED && - (isMetamask || isBitKeep || isBlockWallet) + (isMetamask || isBitKeep || isBlockWallet || isCypherD) ) { return null; } @@ -259,6 +267,8 @@ const WalletModal: React.FC = ({ active={ option.connector === connector && (connector !== injected || + isCypherD === + (option.name === GlobalConst.walletName.CYPHERD) || isBlockWallet === (option.name === GlobalConst.walletName.BLOCKWALLET) || isBitKeep === diff --git a/src/constants/index.ts b/src/constants/index.ts index b906f0493..4b65371f7 100755 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -10,6 +10,7 @@ import { } from '../connectors'; import MetamaskIcon from 'assets/images/metamask.png'; import BlockWalletIcon from 'assets/images/blockwalletIcon.svg'; +import cypherDIcon from 'assets/images/cypherDIcon.png'; import BitKeepIcon from 'assets/images/bitkeep.png'; import CoinbaseWalletIcon from 'assets/images/coinbaseWalletIcon.svg'; import WalletConnectIcon from 'assets/images/walletConnectIcon.svg'; @@ -101,6 +102,7 @@ export const GlobalConst = { }, walletName: { METAMASK: 'Metamask', + CYPHERD: 'Cypher D', BLOCKWALLET: 'BlockWallet', BITKEEP: 'BitKeep', INJECTED: 'Injected', @@ -129,6 +131,14 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = { href: null, color: '#1673ff', }, + CYPHERD: { + connector: injected, + name: GlobalConst.walletName.CYPHERD, + iconName: cypherDIcon, + description: 'CypherD browser extension.', + href: null, + color: '#E8831D', + }, BITKEEP: { connector: injected, name: GlobalConst.walletName.BITKEEP, diff --git a/src/utils/index.ts b/src/utils/index.ts index db8cdea98..f040f85c6 100755 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -50,8 +50,7 @@ import { BigNumber, BigNumberish } from '@ethersproject/bignumber'; import { formatUnits } from 'ethers/lib/utils'; import { AddressZero } from '@ethersproject/constants'; import { TokenAddressMap } from 'state/lists/hooks'; -import { GlobalConst, GlobalValue } from 'constants/index'; -import { Palette } from '@material-ui/core/styles/createPalette'; +import { GlobalConst, GlobalValue, SUPPORTED_WALLETS } from 'constants/index'; import tokenData from 'constants/tokens.json'; import stakeData from 'constants/stake.json'; import { @@ -65,6 +64,9 @@ import { unwrappedToken } from './wrappedCurrency'; import { useUSDCPriceToken } from './useUSDCPrice'; import { CallState } from 'state/multicall/hooks'; import { DualStakingBasic, StakingBasic } from 'types'; +import { AbstractConnector } from '@web3-react/abstract-connector'; +import { injected } from 'connectors'; + dayjs.extend(utc); dayjs.extend(weekOfYear); @@ -1914,6 +1916,25 @@ export function escapeRegExp(string: string): string { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } +export function getWalletKeys( + connector: AbstractConnector | undefined, +): string[] { + const { ethereum } = window as any; + const isMetaMask = !!(ethereum && !ethereum.isBitKeep && ethereum.isMetaMask); + const isBitkeep = !!(ethereum && ethereum.isBitKeep); + const isBlockWallet = !!(ethereum && ethereum.isBlockWallet); + const isCypherDWallet = !!(ethereum && ethereum.isCypherD); + return Object.keys(SUPPORTED_WALLETS).filter( + (k) => + SUPPORTED_WALLETS[k].connector === connector && + (connector !== injected || + (isCypherDWallet && k == 'CYPHERD') || + (isBlockWallet && k === 'BLOCKWALLET') || + (isBitkeep && k === 'BITKEEP') || + (isMetaMask && k === 'METAMASK')), + ); +} + export function getTokenAddress(token: Token | undefined) { if (!token) return; if (token.symbol?.toLowerCase() === 'wmatic') return 'ETH';