diff --git a/src/assets/images/tally.svg b/src/assets/images/tally.svg new file mode 100644 index 000000000..a5131ffd3 --- /dev/null +++ b/src/assets/images/tally.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/WalletModal/PendingView.tsx b/src/components/WalletModal/PendingView.tsx index 0c53e11ac..7c47adcdd 100644 --- a/src/components/WalletModal/PendingView.tsx +++ b/src/components/WalletModal/PendingView.tsx @@ -61,6 +61,7 @@ export default function PendingView({ tryActivation: (connector: AbstractConnector) => void }) { const isMetamask = window?.ethereum?.isMetaMask + const isTally = window?.ethereum?.isTally return ( @@ -71,9 +72,15 @@ export default function PendingView({ if (isMetamask && option.name !== 'MetaMask') { return null } + if (isTally && option.name !== 'Tally Ho') { + return null + } if (!isMetamask && option.name === 'MetaMask') { return null } + if (!isTally && option.name === 'Tally Ho') { + return null + } } return ( diff --git a/src/components/Web3Status/ConnectWalletPopover.tsx b/src/components/Web3Status/ConnectWalletPopover.tsx index 0668d6aa8..b6089dfe6 100644 --- a/src/components/Web3Status/ConnectWalletPopover.tsx +++ b/src/components/Web3Status/ConnectWalletPopover.tsx @@ -6,6 +6,7 @@ import { isMobile } from 'react-device-detect' import { SUPPORTED_WALLETS } from '../../constants' import { injected } from '../../connectors' import MetamaskIcon from '../../assets/images/metamask.png' +import TallyIcon from '../../assets/images/tally.svg' import { ModalView } from '.' import Popover from '../Popover' import { useCloseModals, useModalOpen } from '../../state/application/hooks' @@ -114,6 +115,9 @@ export const ConnectWalletPopover = ({ setModal, tryActivation, children }: Conn function getOptions() { const isMetamask = window.ethereum && window.ethereum.isMetaMask + const isTally = window.ethereum && window.ethereum.isTally + const tallyInstalled = window.tally && window.tally.isTally + return Object.keys(SUPPORTED_WALLETS).map(key => { const option = SUPPORTED_WALLETS[key] // check for mobile options @@ -152,6 +156,17 @@ export const ConnectWalletPopover = ({ setModal, tryActivation, children }: Conn onClick={closeModals} /> ) + } else if (option.name === 'Tally Ho' && !tallyInstalled) { + return ( + + ) } else { return null //dont want to return install twice } @@ -160,8 +175,12 @@ export const ConnectWalletPopover = ({ setModal, tryActivation, children }: Conn else if (option.name === 'MetaMask' && !isMetamask) { return null } + // don't return tally if injected provider isn't tally + else if (option.name === 'Tally Ho' && !isTally) { + return null + } // likewise for generic - else if (option.name === 'Injected' && isMetamask) { + else if (option.name === 'Injected' && (isMetamask || isTally)) { return null } } diff --git a/src/constants/index.tsx b/src/constants/index.tsx index 33ded7bce..966306663 100644 --- a/src/constants/index.tsx +++ b/src/constants/index.tsx @@ -217,6 +217,14 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = { color: '#010101', primary: true, }, + TALLY: { + connector: injected, + name: 'Tally Ho', + iconName: 'tally.svg', + description: 'Connect using Tally Ho Wallet.', + href: null, + color: '#D59B4B', + }, METAMASK: { connector: injected, name: 'MetaMask', diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index ec658df3f..b4bf943e9 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -14,11 +14,15 @@ interface EthereumProviderRequestArguments { interface Window { ethereum?: { isMetaMask?: true + isTally?: true on?: (...args: any[]) => void removeListener?: (...args: any[]) => void request?: (args: EthereumProviderRequestArguments) => Promise isCoinbaseWallet?: boolean } + tally?: { + isTally?: true + } web3?: Record }