Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add tally wallet #633

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: integrate tally wallet
  • Loading branch information
amritkumarj committed Feb 22, 2022

Unverified

This user has not yet uploaded their public signing key.
commit 71802d106588454da55dba8982e83ba421d72305
4 changes: 4 additions & 0 deletions public/images/wallets/tally.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions src/components/AccountDetails/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
10 changes: 8 additions & 2 deletions src/components/Web3Status/index.tsx
Original file line number Diff line number Diff line change
@@ -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
}
24 changes: 13 additions & 11 deletions src/config/wallets.ts
Original file line number Diff line number Diff line change
@@ -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.',
@@ -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',
},
}
74 changes: 52 additions & 22 deletions src/hooks/useEagerConnect.ts
Original file line number Diff line number Diff line change
@@ -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
26 changes: 19 additions & 7 deletions src/hooks/useInactiveListener.ts
Original file line number Diff line number Diff line change
@@ -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)
})
}
}
}

4 changes: 2 additions & 2 deletions src/modals/WalletModal/PendingView.tsx
Original file line number Diff line number Diff line change
@@ -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
}
4 changes: 2 additions & 2 deletions src/modals/WalletModal/index.tsx
Original file line number Diff line number Diff line change
@@ -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') {
3 changes: 2 additions & 1 deletion sushi-env.d.ts
Original file line number Diff line number Diff line change
@@ -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