From 71802d106588454da55dba8982e83ba421d72305 Mon Sep 17 00:00:00 2001 From: DhruvJain1122 Date: Tue, 22 Feb 2022 12:58:11 +0530 Subject: [PATCH 1/2] feat: integrate tally wallet --- public/images/wallets/tally.svg | 4 ++ src/components/AccountDetails/index.tsx | 5 +- src/components/Web3Status/index.tsx | 10 +++- src/config/wallets.ts | 24 ++++---- src/hooks/useEagerConnect.ts | 74 +++++++++++++++++-------- src/hooks/useInactiveListener.ts | 26 ++++++--- src/modals/WalletModal/PendingView.tsx | 4 +- src/modals/WalletModal/index.tsx | 4 +- sushi-env.d.ts | 3 +- 9 files changed, 105 insertions(+), 49 deletions(-) create mode 100644 public/images/wallets/tally.svg diff --git a/public/images/wallets/tally.svg b/public/images/wallets/tally.svg new file mode 100644 index 0000000000..7da3dc2d38 --- /dev/null +++ b/public/images/wallets/tally.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx index a23bd378d4..e08019013e 100644 --- a/src/components/AccountDetails/index.tsx +++ b/src/components/AccountDetails/index.tsx @@ -2,7 +2,7 @@ import Davatar from '@davatar/react' import { t } from '@lingui/macro' import { useLingui } from '@lingui/react' import { HeadlessUiModal } from 'app/components/Modal' -import { injected, SUPPORTED_WALLETS } from 'app/config/wallets' +import { injectedMetaMask, SUPPORTED_WALLETS } from 'app/config/wallets' import { getExplorerLink } from 'app/functions/explorer' import { shortenAddress } from 'app/functions/format' import { useActiveWeb3React } from 'app/services/web3' @@ -43,7 +43,8 @@ const AccountDetails: FC = ({ const name = Object.keys(SUPPORTED_WALLETS) .filter( (k) => - SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK')) + SUPPORTED_WALLETS[k].connector === connector && + (connector !== injectedMetaMask || isMetaMask === (k === 'METAMASK')) ) .map((k) => SUPPORTED_WALLETS[k].name)[0] return ( diff --git a/src/components/Web3Status/index.tsx b/src/components/Web3Status/index.tsx index c2dacace24..28a5dbabab 100644 --- a/src/components/Web3Status/index.tsx +++ b/src/components/Web3Status/index.tsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro' import { useLingui } from '@lingui/react' import { AbstractConnector } from '@web3-react/abstract-connector' import { useWeb3React } from '@web3-react/core' -import { injected } from 'app/config/wallets' +import { injectedMetaMask, injectedTally } from 'app/config/wallets' import { NetworkContextName } from 'app/constants' import { shortenAddress } from 'app/functions' import useENSName from 'app/hooks/useENSName' @@ -25,7 +25,7 @@ function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) { // eslint-disable-next-line react/prop-types function StatusIcon({ connector }: { connector: AbstractConnector; account: string; provider: Web3Provider }) { - if (connector === injected) { + if (connector === injectedMetaMask) { return (
{'Clover'}
) + } else if (connector === injectedTally) { + return ( +
+ {'Tally'} +
+ ) } return null } diff --git a/src/config/wallets.ts b/src/config/wallets.ts index 6fbad2080a..95d226aa90 100644 --- a/src/config/wallets.ts +++ b/src/config/wallets.ts @@ -12,10 +12,13 @@ export const network = new NetworkConnector({ urls: RPC, }) -export const injected = new InjectedConnector({ +export const injectedMetaMask = new InjectedConnector({ supportedChainIds, }) +export const injectedTally = new InjectedConnector({ + supportedChainIds: [1], +}) export interface WalletInfo { connector?: (() => Promise) | AbstractConnector name: string @@ -29,17 +32,8 @@ export interface WalletInfo { } export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = { - INJECTED: { - connector: injected, - name: 'Injected', - iconName: 'injected.svg', - description: 'Injected web3 provider.', - href: null, - color: '#010101', - primary: true, - }, METAMASK: { - connector: injected, + connector: injectedMetaMask, name: 'MetaMask', iconName: 'metamask.png', description: 'Easy-to-use browser extension.', @@ -199,4 +193,12 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = { href: null, color: '#269964', }, + Tally: { + connector: injectedTally, + name: 'Tally', + iconName: 'tally.png', + description: 'Login using Tally hosted wallet', + href: null, + color: '#E8831D', + }, } diff --git a/src/hooks/useEagerConnect.ts b/src/hooks/useEagerConnect.ts index 3850fb74a7..7bfada2c58 100644 --- a/src/hooks/useEagerConnect.ts +++ b/src/hooks/useEagerConnect.ts @@ -2,36 +2,66 @@ import { useWeb3React as useWeb3ReactCore } from '@web3-react/core' import { useEffect, useState } from 'react' import { isMobile } from 'react-device-detect' -import { injected } from '../config/wallets' +import { injectedMetaMask, injectedTally } from '../config/wallets' function useEagerConnect() { const { activate, active } = useWeb3ReactCore() // specifically using useWeb3ReactCore because of what this hook does const [tried, setTried] = useState(false) useEffect(() => { - injected.isAuthorized().then((isAuthorized) => { - if (isAuthorized) { - activate(injected, undefined, true) - // .then(() => window.ethereum.removeAllListeners(['networkChanged'])) - .catch(() => { - setTried(true) - }) - // @ts-ignore TYPE NEEDS FIXING - window.ethereum.removeAllListeners(['networkChanged']) - } else { - if (isMobile && window.ethereum) { - activate(injected, undefined, true) - // .then(() => window.ethereum.removeAllListeners(['networkChanged'])) - .catch(() => { + if (window.ethereum) { + if (window.ethereum?.isTally) { + injectedTally.isAuthorized().then((isAuthorized) => { + if (isAuthorized) { + activate(injectedTally, undefined, true) + // .then(() => window.ethereum.removeAllListeners(['networkChanged'])) + .catch(() => { + setTried(true) + }) + // @ts-ignore TYPE NEEDS FIXING + window.ethereum.removeAllListeners(['networkChanged']) + } else { + if (isMobile && window.ethereum) { + activate(injectedTally, undefined, true) + // .then(() => window.ethereum.removeAllListeners(['networkChanged'])) + .catch(() => { + setTried(true) + }) + // @ts-ignore TYPE NEEDS FIXING + window.ethereum.removeAllListeners(['networkChanged']) + } else { setTried(true) - }) - // @ts-ignore TYPE NEEDS FIXING - window.ethereum.removeAllListeners(['networkChanged']) - } else { - setTried(true) - } + } + } + }) + } else if (window.ethereum?.isMetaMask) { + injectedMetaMask.isAuthorized().then((isAuthorized) => { + if (isAuthorized) { + activate(injectedMetaMask, undefined, true) + // .then(() => window.ethereum.removeAllListeners(['networkChanged'])) + .catch(() => { + setTried(true) + }) + // @ts-ignore TYPE NEEDS FIXING + window.ethereum.removeAllListeners(['networkChanged']) + } else { + if (isMobile && window.ethereum) { + activate(injectedMetaMask, undefined, true) + // .then(() => window.ethereum.removeAllListeners(['networkChanged'])) + .catch(() => { + setTried(true) + }) + // @ts-ignore TYPE NEEDS FIXING + window.ethereum.removeAllListeners(['networkChanged']) + } else { + setTried(true) + } + } + }) } - }) + } else { + setTried(true) + } }, [activate]) // intentionally only running on mount (make sure it's only mounted once :)) // if the connection worked, wait until we get confirmation of that to flip the flag diff --git a/src/hooks/useInactiveListener.ts b/src/hooks/useInactiveListener.ts index 4a84322feb..a17a7afe3d 100644 --- a/src/hooks/useInactiveListener.ts +++ b/src/hooks/useInactiveListener.ts @@ -1,7 +1,7 @@ import { useWeb3React as useWeb3ReactCore } from '@web3-react/core' import { useEffect } from 'react' -import { injected } from '../config/wallets' +import { injectedMetaMask, injectedTally } from '../config/wallets' /** * Use for network and injected - logs user in @@ -16,17 +16,29 @@ function useInactiveListener(suppress = false) { if (ethereum && ethereum.on && !active && !error && !suppress) { const handleChainChanged = () => { // eat errors - activate(injected, undefined, true).catch((error) => { - console.error('Failed to activate after chain changed', error) - }) + if (ethereum.isTally) { + activate(injectedTally, undefined, true).catch((error) => { + console.error('Failed to activate after chain changed', error) + }) + } else if (ethereum.isMetaMask) { + activate(injectedMetaMask, undefined, true).catch((error) => { + console.error('Failed to activate after chain changed', error) + }) + } } const handleAccountsChanged = (accounts: string[]) => { if (accounts.length > 0) { // eat errors - activate(injected, undefined, true).catch((error) => { - console.error('Failed to activate after accounts changed', error) - }) + if (ethereum.isTally) { + activate(injectedTally, undefined, true).catch((error) => { + console.error('Failed to activate after accounts changed', error) + }) + } else if (ethereum.isMetaMask) { + activate(injectedMetaMask, undefined, true).catch((error) => { + console.error('Failed to activate after accounts changed', error) + }) + } } } diff --git a/src/modals/WalletModal/PendingView.tsx b/src/modals/WalletModal/PendingView.tsx index 6006055122..1eab7235e6 100644 --- a/src/modals/WalletModal/PendingView.tsx +++ b/src/modals/WalletModal/PendingView.tsx @@ -6,7 +6,7 @@ import Button from 'app/components/Button' import Dots from 'app/components/Dots' import { HeadlessUiModal } from 'app/components/Modal' import Typography from 'app/components/Typography' -import { injected, SUPPORTED_WALLETS } from 'config/wallets' +import { injectedMetaMask, SUPPORTED_WALLETS } from 'config/wallets' import Lottie from 'lottie-react' import React, { FC } from 'react' @@ -58,7 +58,7 @@ const PendingView: FC = ({ id, connector, error = false, setPending {Object.keys(SUPPORTED_WALLETS).map((_key) => { const option = SUPPORTED_WALLETS[_key] if (id === _key) { - if (option.connector === injected) { + if (option.connector === injectedMetaMask) { if (isMetamask && option.name !== 'MetaMask') { return null } diff --git a/src/modals/WalletModal/index.tsx b/src/modals/WalletModal/index.tsx index 9a10631f57..468cb667e8 100644 --- a/src/modals/WalletModal/index.tsx +++ b/src/modals/WalletModal/index.tsx @@ -8,7 +8,7 @@ import Button from 'app/components/Button' import ExternalLink from 'app/components/ExternalLink' import HeadlessUiModal from 'app/components/Modal/HeadlessUIModal' import Typography from 'app/components/Typography' -import { injected, SUPPORTED_WALLETS } from 'app/config/wallets' +import { injectedMetaMask, SUPPORTED_WALLETS } from 'app/config/wallets' import { OVERLAY_READY } from 'app/entities/connectors/FortmaticConnector' import usePrevious from 'app/hooks/usePrevious' import { ApplicationModal } from 'app/state/application/actions' @@ -151,7 +151,7 @@ const WalletModal: FC = ({ pendingTransactions, confirmedTransactio } // overwrite injected when needed - if (option.connector === injected) { + if (option.connector === injectedMetaMask) { // don't show injected if there's no injected provider if (!(window.web3 || window.ethereum)) { if (option.name === 'MetaMask') { diff --git a/sushi-env.d.ts b/sushi-env.d.ts index 91a5aa4d4c..ee7414b9b7 100644 --- a/sushi-env.d.ts +++ b/sushi-env.d.ts @@ -12,7 +12,8 @@ declare global { walletLinkExtension?: any ethereum?: { isCoinbaseWallet?: true - isMetaMask?: true + isMetaMask?: boolean + isTally?: boolean on?: (...args: any[]) => void removeListener?: (...args: any[]) => void removeAllListeners?: (...args: any[]) => void From 43017a76abd6065868fcff3a7659f9e7fff1c827 Mon Sep 17 00:00:00 2001 From: DhruvJain1122 Date: Tue, 22 Feb 2022 13:12:24 +0530 Subject: [PATCH 2/2] feat: position --- src/config/wallets.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/config/wallets.ts b/src/config/wallets.ts index 95d226aa90..49a2fd8c72 100644 --- a/src/config/wallets.ts +++ b/src/config/wallets.ts @@ -49,6 +49,14 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = { mobile: true, mobileOnly: true, }, + Tally: { + connector: injectedTally, + name: 'Tally', + iconName: 'tally.png', + description: 'Login using Tally hosted wallet', + href: null, + color: '#E8831D', + }, WALLET_CONNECT: { connector: async () => { const WalletConnectConnector = (await import('@web3-react/walletconnect-connector')).WalletConnectConnector @@ -193,12 +201,4 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = { href: null, color: '#269964', }, - Tally: { - connector: injectedTally, - name: 'Tally', - iconName: 'tally.png', - description: 'Login using Tally hosted wallet', - href: null, - color: '#E8831D', - }, }