feat: add tally wallet

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<AccountDetailsProps> = ({
     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 (

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 (
       <div className="flex flex-col items-center justify-center w-4 h-4 flex-nowrap">
         <Image
@@ -88,6 +88,12 @@ function StatusIcon({ connector }: { connector: AbstractConnector; account: stri
         <Image src="https://app.sushi.com/images/wallets/clover.svg" alt={'Clover'} width="16px" height="16px" />
       </div>
     )
+  } else if (connector === injectedTally) {
+    return (
+      <div className="flex flex-col items-center justify-center w-4 h-4 flex-nowrap">
+        <Image src="https://app.sushi.com/images/wallets/tally.svg" alt={'Tally'} width="16px" height="16px" />
+      </div>
+    )
   }
   return null
 }

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>) | 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.',
@@ -55,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

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

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)
+            })
+          }
         }
       }
 

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<PendingView> = ({ 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
             }

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<WalletModal> = ({ 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') {

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