@web3-react/core#UnsupportedChainIdError TypeScript Examples
The following examples show how to use
@web3-react/core#UnsupportedChainIdError.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Connect.tsx From nft-market with MIT License | 6 votes |
|
function getErrorMessage(error: Error) {
console.log(error)
if (error instanceof NoEthereumProviderError) {
return 'No Ethereum browser extension detected, install MetaMask on desktop or visit from a dApp browser on mobile.'
} else if (error instanceof UnsupportedChainIdError) {
return "You're connected to an unsupported network. Please connect to Rinkeby network"
} else if (
error instanceof UserRejectedRequestErrorInjected ||
error instanceof UserRejectedRequestErrorWalletConnect
) {
return 'Please authorize this website to access your Ethereum account.'
} else {
console.error(error)
return 'An unknown error occurred. Check the console for more details.'
}
}
Example #2
| Source File: ConnectWallet.tsx From lp-inspector with MIT License | 6 votes |
|
function ConnectWallet({ children, callback }: ConnectWalletProps) {
const { activate, active, account, error } = useWeb3React<Web3Provider>();
const [btnText, setBtnText] = useState(children);
const [btnClass, setBtnClass] = useState("connect-wallet-btn");
useEffect(() => {
if (error && error instanceof UnsupportedChainIdError) {
setBtnText("Supported only BSC chain (56).");
setBtnClass("connect-wallet-btn connect-wallet-btn-error");
} else if (account) {
setBtnClass("connect-wallet-btn");
const ellisizeText =
account.substring(0, 6) +
"..." +
account.substring(account.length - 4, account.length);
setBtnText(ellisizeText);
callback(account);
} else {
setBtnClass("connect-wallet-btn");
setBtnText(children);
}
}, [account, activate, active, callback, children, error]);
function handleClick(e: React.MouseEvent<HTMLDivElement>) {
activate(injectedConnector);
}
return (
<div className="connect-wallet-container" onClick={handleClick}>
{!active ? (
<button className={btnClass} disabled={active}>
{btnText}
</button>
) : (
<p>{btnText}</p>
)}
</div>
);
}
Example #3
| Source File: useAuth.ts From mozartfinance-swap-interface with GNU General Public License v3.0 | 6 votes |
|
useAuth = () => {
const { activate, deactivate } = useWeb3React()
const { toastError } = useToast()
const login = useCallback((connectorID: ConnectorNames) => {
const connector = connectorsByName[connectorID]
if (connector) {
activate(connector, async (error: Error) => {
window.localStorage.removeItem(connectorLocalStorageKey)
if (error instanceof UnsupportedChainIdError) {
toastError('Unsupported Chain Id', 'Unsupported Chain Id Error. Check your chain Id.')
} else if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
toastError('Provider Error', 'No provider was found')
} else if (
error instanceof UserRejectedRequestErrorInjected ||
error instanceof UserRejectedRequestErrorWalletConnect
) {
if (connector instanceof WalletConnectConnector) {
const walletConnector = connector as WalletConnectConnector
walletConnector.walletConnectProvider = null
}
toastError('Authorization Error', 'Please authorize to access your account')
} else {
toastError(error.name, error.message)
}
})
} else {
toastError("Can't find connector", 'The connector config is wrong')
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return { login, logout: deactivate }
}
Example #4
| Source File: useAuth.ts From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 6 votes |
|
useAuth = () => {
const { activate, deactivate } = useWeb3React()
const { toastError } = useToast()
const login = useCallback((connectorID: ConnectorNames) => {
const connector = connectorsByName[connectorID]
if (connector) {
activate(connector, async (error: Error) => {
window.localStorage.removeItem(connectorLocalStorageKey)
if (error instanceof UnsupportedChainIdError) {
toastError('Unsupported Chain Id', 'Unsupported Chain Id Error. Check your chain Id.')
} else if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
toastError('Provider Error', 'No provider was found')
} else if (
error instanceof UserRejectedRequestErrorInjected ||
error instanceof UserRejectedRequestErrorWalletConnect
) {
if (connector instanceof WalletConnectConnector) {
const walletConnector = connector as WalletConnectConnector
walletConnector.walletConnectProvider = null
}
toastError('Authorization Error', 'Please authorize to access your account')
} else {
toastError(error.name, error.message)
}
})
} else {
toastError("Can't find connector", 'The connector config is wrong')
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return { login, logout: deactivate }
}
Example #5
| Source File: useAuth.ts From pancake-swap-testnet with MIT License | 6 votes |
|
useAuth = () => {
const { activate, deactivate } = useWeb3React()
const { toastError } = useToast()
const login = useCallback((connectorID: ConnectorNames) => {
const connector = connectorsByName[connectorID]
if (connector) {
activate(connector, async (error: Error) => {
window.localStorage.removeItem(connectorLocalStorageKey)
if (error instanceof UnsupportedChainIdError) {
toastError('Unsupported Chain Id', 'Unsupported Chain Id Error. Check your chain Id.')
} else if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
toastError('Provider Error', 'No provider was found')
} else if (
error instanceof UserRejectedRequestErrorInjected ||
error instanceof UserRejectedRequestErrorWalletConnect
) {
if (connector instanceof WalletConnectConnector) {
const walletConnector = connector as WalletConnectConnector
walletConnector.walletConnectProvider = null
}
toastError('Authorization Error', 'Please authorize to access your account')
} else {
toastError(error.name, error.message)
}
})
} else {
toastError("Can't find connector", 'The connector config is wrong')
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return { login, logout: deactivate }
}
Example #6
| Source File: useAuth.ts From vvs-ui with GNU General Public License v3.0 | 5 votes |
|
useAuth = () => {
const { t } = useTranslation()
const dispatch = useAppDispatch()
const { activate, deactivate } = useWeb3React()
const { toastError } = useToast()
const login = useCallback(
(connectorID: ConnectorNames) => {
const connector = connectorsByName[connectorID]
if (connector) {
window.gtag('event', 'wallet', {
hitType: 'event',
eventCategory: 'Wallet',
eventAction: 'connect',
eventLabel: connectorID,
})
activate(connector, async (error: Error) => {
if (error instanceof UnsupportedChainIdError && connectorID !== ConnectorNames.CDCDefiWallet) {
const hasSetup = await setupNetwork()
if (hasSetup) {
activate(connector)
}
} else {
window.localStorage.removeItem(connectorLocalStorageKey)
if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
toastError(t('Provider Error'), t('No provider was found'))
} else if (
error instanceof UserRejectedRequestErrorInjected ||
error instanceof UserRejectedRequestErrorWalletConnect
) {
if (connector instanceof WalletConnectConnector) {
const walletConnector = connector as WalletConnectConnector
walletConnector.walletConnectProvider = null
}
toastError(t('Authorization Error'), t('Please authorize to access your account'))
} else {
/** :TODO: remote this code */
if(error instanceof UnsupportedChainIdError && connectorID === ConnectorNames.CDCDefiWallet) {
toastError('Wrong Network', 'Please switch to [Cronos Beta] on Chrome Wallet Extension to connect')
return
}
toastError(error.name, error.message)
}
}
})
} else {
toastError(t('Unable to find connector'), t('The connector config is wrong'))
}
},
[t, activate, toastError],
)
const logout = useCallback(() => {
dispatch(profileClear())
deactivate()
// This localStorage key is set by @web3-react/walletconnect-connector
if (window.localStorage.getItem('walletconnect')) {
connectorsByName.walletconnect.close()
connectorsByName.walletconnect.walletConnectProvider = null
}
window.localStorage.removeItem(connectorLocalStorageKey)
}, [deactivate, dispatch])
return { login, logout }
}
Example #7
| Source File: index.tsx From luaswap-interface with GNU General Public License v3.0 | 5 votes |
|
function Web3StatusInner() {
const { t } = useTranslation()
const { account, connector, error } = useWeb3React()
const { ENSName } = useENSName(account ?? undefined)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
if (account) {
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
</Web3StatusConnected>
)
} else if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
} else {
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect to a wallet')}</Text>
</Web3StatusConnect>
)
}
}
Example #8
| Source File: index.tsx From cheeseswap-interface with GNU General Public License v3.0 | 5 votes |
|
function Web3StatusInner() {
const { t } = useTranslation()
const { account, connector, error } = useWeb3React()
const { ENSName } = useENSName(account ?? undefined)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
if (account) {
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
</Web3StatusConnected>
)
} else if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
} else {
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect to a wallet')}</Text>
</Web3StatusConnect>
)
}
}
Example #9
| Source File: index.tsx From forward.swaps with GNU General Public License v3.0 | 5 votes |
|
function Web3StatusInner() {
const { t } = useTranslation()
const { account, connector, error } = useWeb3React()
const { ENSName } = useENSName(account ?? undefined)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
if (account) {
console.log('account +')
console.log(account)
console.log(connector)
let biconomy: any
if (i < 1) {
if (window && window.ethereum) {
biconomy = new Biconomy(window.ethereum, { apiKey: BICONOMY_API_KEY })
console.log(window.ethereum)
console.log('biconomy init')
biconomy
.onEvent(biconomy.READY, () => {
//ercForwarderClient = biconomy.erc20ForwarderClient
//permitClient = biconomy.permitClient
})
.onEvent(biconomy.ERROR, () => {})
setBiconomy(biconomy)
console.log('biconomy setter invoked')
i++
}
}
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
</Web3StatusConnected>
)
} else if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
} else {
console.log('account ++')
if (j < 1) {
Swal.fire(`Please switch your wallet to Kovan network`)
j++
}
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect to a wallet')}</Text>
</Web3StatusConnect>
)
}
}
Example #10
| Source File: index.tsx From dyp with Do What The F*ck You Want To Public License | 5 votes |
|
function Web3StatusInner() {
const { t } = useTranslation()
const { account, connector, error } = useWeb3React()
const { ENSName } = useENSName(account ?? undefined)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
if (account) {
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
</Web3StatusConnected>
)
} else if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
} else {
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect your wallet')}</Text>
</Web3StatusConnect>
)
}
}
Example #11
| Source File: useAuth.ts From glide-frontend with GNU General Public License v3.0 | 5 votes |
|
useAuth = () => {
const { t } = useTranslation()
const dispatch = useAppDispatch()
const { activate, deactivate } = useWeb3React()
const { toastError } = useToast()
const login = useCallback(
(connectorID: ConnectorNames) => {
const connector = connectorsByName[connectorID]
if (connector) {
activate(connector, async (error: Error) => {
if (error instanceof UnsupportedChainIdError) {
const hasSetup = await setupNetwork(20) // specify network to switch to
if (hasSetup) {
activate(connector)
}
} else {
window.localStorage.removeItem(connectorLocalStorageKey)
if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
toastError(t('Provider Error'), t('No provider was found'))
} else if (
error instanceof UserRejectedRequestErrorInjected ||
error instanceof UserRejectedRequestErrorWalletConnect
) {
if (connector instanceof WalletConnectConnector) {
const walletConnector = connector as WalletConnectConnector
walletConnector.walletConnectProvider = null
}
toastError(t('Authorization Error'), t('Please authorize to access your account'))
} else {
toastError(error.name, error.message)
}
}
})
} else {
toastError(t('Unable to find connector'), t('The connector config is wrong'))
}
},
[t, activate, toastError],
)
const logout = useCallback(() => {
dispatch(profileClear())
deactivate()
// This localStorage key is set by @web3-react/walletconnect-connector
if (window.localStorage.getItem('walletconnect')) {
connectorsByName.walletconnect.close()
connectorsByName.walletconnect.walletConnectProvider = null
}
window.localStorage.removeItem("walletconnect")
}, [deactivate, dispatch])
return { login, logout }
}
Example #12
| Source File: index.tsx From goose-frontend-amm with GNU General Public License v3.0 | 5 votes |
|
function Web3StatusInner() {
const { t } = useTranslation()
const { account, connector, error } = useWeb3React()
const { ENSName } = useENSName(account ?? undefined)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
if (account) {
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
</Web3StatusConnected>
)
} if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
}
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect to a wallet')}</Text>
</Web3StatusConnect>
)
}
Example #13
| Source File: index.tsx From skeleton-web3-interface with GNU General Public License v3.0 | 5 votes |
|
function Web3StatusInner() {
const { t } = useTranslation()
const { account, connector, error } = useWeb3React()
const { ENSName } = useENSName(account ?? undefined)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
if (account) {
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
</Web3StatusConnected>
)
} else if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
} else {
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect to a wallet')}</Text>
</Web3StatusConnect>
)
}
}
Example #14
| Source File: index.tsx From skeleton-web3-interface with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map(key => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
connector &&
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={require('../../assets/images/' + option.iconName)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>Please connect to the appropriate Ethereum network.</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to Ethereum? </span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #15
| Source File: index.tsx From luaswap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map(key => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
connector &&
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={require('../../assets/images/' + option.iconName)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>Please connect to the appropriate Ethereum network.</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
{/* <span>New to Ethereum? </span>{' '} */}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #16
| Source File: index.tsx From sushiswap-exchange with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useWalletModalOpen()
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map(key => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
connector &&
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={require('../../assets/images/' + option.iconName)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>Please connect to the appropriate Ethereum network.</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to Ethereum? </span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #17
| Source File: index.tsx From cuiswap with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useWalletModalOpen()
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async connector => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map(key => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={require('../../assets/images/' + option.iconName)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>Please connect to the appropriate Ethereum network.</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to Ethereum? </span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={null} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #18
| Source File: index.tsx From goose-frontend-amm with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName,
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useWalletModalOpen()
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
// eslint-disable-next-line @typescript-eslint/no-shadow
const tryActivation = async (connector: AbstractConnector | undefined) => {
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
if (connector) {
activate(connector, undefined, true).catch((err) => {
if (err instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map((key) => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
// disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
if (option.connector !== connector && !option.href) {
tryActivation(option.connector)
}
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require(`../../assets/images/${option.iconName}`)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color="#E8831D"
header="Install Metamask"
subheader={null}
link="https://metamask.io/"
icon={MetamaskIcon}
/>
)
}
return null // dont want to return install twice
}
// don't return metamask if injected provider isn't metamask
if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
// eslint-disable-next-line no-unused-expressions
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} // use option.descriptio to bring back multi-line
icon={require(`../../assets/images/${option.iconName}`)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>
Please connect to the appropriate Binance Smart Chain network.
<a href="https://docs.binance.org/smart-chain/wallet/metamask.html">How?</a>
</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to BSC? </span>{' '}
<ExternalLink href="https://docs.binance.org/smart-chain/wallet/metamask.html">
Learn more about wallets
</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #19
| Source File: index.tsx From dyp with Do What The F*ck You Want To Public License | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map(key => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
connector &&
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={require('../../assets/images/' + option.iconName)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>Please connect to the appropriate Ethereum network.</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect your wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to Ethereum? </span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #20
| Source File: index.tsx From cheeseswap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}) {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useWalletModalOpen()
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map(key => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
connector &&
activate(connector, undefined, true).catch(error => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={require('../../assets/images/' + option.iconName)}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>
Please connect to the appropriate Binance Smart Chain network.
<a href="https://docs.binance.org/smart-chain/wallet/metamask.html">How?</a>
</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to BSC? </span>{' '}
<ExternalLink href="https://docs.binance.org/smart-chain/wallet/metamask.html">
Learn more about wallets
</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #21
| Source File: index.tsx From sybil-interface with GNU General Public License v3.0 | 4 votes |
|
export default function WalletModal({
pendingTransactions,
confirmedTransactions,
ENSName,
}: {
pendingTransactions: string[] // hashes of pending
confirmedTransactions: string[] // hashes of confirmed
ENSName?: string
}): JSX.Element {
// important that these are destructed from the account-specific web3-react context
const { active, account, connector, activate, error } = useWeb3React()
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
const [pendingError, setPendingError] = useState<boolean>()
const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
const toggleWalletModal = useWalletModalToggle()
const previousAccount = usePrevious(account)
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal()
}
}, [account, previousAccount, toggleWalletModal, walletModalOpen])
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [walletModalOpen])
// close modal when a connection is successful
const activePrevious = usePrevious(active)
const connectorPrevious = usePrevious(connector)
useEffect(() => {
if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
setWalletView(WALLET_VIEWS.ACCOUNT)
}
}, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = ''
Object.keys(SUPPORTED_WALLETS).map((key) => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name)
}
return true
})
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name,
})
setPendingWallet(connector) // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING)
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
connector.walletConnectProvider = undefined
}
connector &&
activate(connector, undefined, true).catch((error) => {
if (error instanceof UnsupportedChainIdError) {
activate(connector) // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true)
}
})
}
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal()
})
}, [toggleWalletModal])
// get wallets user can switch too, depending on device/browser
function getOptions() {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return Object.keys(SUPPORTED_WALLETS).map((key) => {
const option = SUPPORTED_WALLETS[key]
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null
}
if (!window.web3 && !window.ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector && !option.href && tryActivation(option.connector)
}}
id={`connect-${key}`}
key={key}
active={option.connector && option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={option.iconURL}
/>
)
}
return null
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(window.web3 || window.ethereum)) {
if (option.name === 'MetaMask') {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
)
} else {
return null //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (option.name === 'MetaMask' && !isMetamask) {
return null
}
// likewise for generic
else if (option.name === 'Injected' && isMetamask) {
return null
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector)
}}
key={key}
active={option.connector === connector}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.description to bring back multi-line
icon={option.iconURL}
/>
)
)
})
}
function getModalContent() {
if (error) {
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
<HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
<ContentWrapper>
{error instanceof UnsupportedChainIdError ? (
<h5>Please connect to the appropriate Ethereum network.</h5>
) : (
'Error connecting. Try refreshing the page.'
)}
</ContentWrapper>
</UpperSection>
)
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
)
}
return (
<UpperSection>
<CloseIcon onClick={toggleWalletModal}>
<CloseColor />
</CloseIcon>
{walletView !== WALLET_VIEWS.ACCOUNT ? (
<HeaderRow color="blue">
<HoverText
onClick={() => {
setPendingError(false)
setWalletView(WALLET_VIEWS.ACCOUNT)
}}
>
Back
</HoverText>
</HeaderRow>
) : (
<HeaderRow>
<HoverText>Connect to a wallet</HoverText>
</HeaderRow>
)}
<ContentWrapper>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
<OptionGrid>{getOptions()}</OptionGrid>
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Blurb>
<span>New to Ethereum? </span>{' '}
<ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
</Blurb>
)}
</ContentWrapper>
</UpperSection>
)
}
return (
<Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
<Wrapper>{getModalContent()}</Wrapper>
</Modal>
)
}
Example #22
| Source File: WalletModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
WalletModal: React.FC<WalletModalProps> = ({
pendingTransactions,
confirmedTransactions,
ENSName,
}) => {
const classes = useStyles();
// important that these are destructed from the account-specific web3-react context
const {
active,
account,
connector,
activate,
error,
deactivate,
} = useWeb3React();
const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT);
const [pendingWallet, setPendingWallet] = useState<
AbstractConnector | undefined
>();
const [pendingError, setPendingError] = useState<boolean>();
const walletModalOpen = useModalOpen(ApplicationModal.WALLET);
const toggleWalletModal = useWalletModalToggle();
const previousAccount = usePrevious(account);
// close on connection, when logged out before
useEffect(() => {
if (account && !previousAccount && walletModalOpen) {
toggleWalletModal();
}
if (!walletModalOpen && error) {
deactivate();
}
}, [
account,
previousAccount,
toggleWalletModal,
walletModalOpen,
deactivate,
error,
]);
// always reset to account view
useEffect(() => {
if (walletModalOpen) {
setPendingError(false);
setWalletView(WALLET_VIEWS.ACCOUNT);
}
}, [walletModalOpen]);
// close modal when a connection is successful
const activePrevious = usePrevious(active);
const connectorPrevious = usePrevious(connector);
useEffect(() => {
if (
walletModalOpen &&
((active && !activePrevious) ||
(connector && connector !== connectorPrevious && !error))
) {
setWalletView(WALLET_VIEWS.ACCOUNT);
}
}, [
setWalletView,
active,
error,
connector,
walletModalOpen,
activePrevious,
connectorPrevious,
]);
const tryActivation = async (connector: AbstractConnector | undefined) => {
let name = '';
Object.keys(SUPPORTED_WALLETS).map((key) => {
if (connector === SUPPORTED_WALLETS[key].connector) {
return (name = SUPPORTED_WALLETS[key].name);
}
return true;
});
// log selected wallet
ReactGA.event({
category: 'Wallet',
action: 'Change Wallet',
label: name,
});
setPendingWallet(connector); // set wallet for pending view
setWalletView(WALLET_VIEWS.PENDING);
// if the connector is walletconnect and the user has already tried to connect, manually reset the connector
if (
connector instanceof WalletConnectConnector &&
connector.walletConnectProvider?.wc?.uri
) {
connector.walletConnectProvider = undefined;
}
connector &&
activate(connector, undefined, true).catch((error) => {
if (error instanceof UnsupportedChainIdError) {
activate(connector); // a little janky...can't use setError because the connector isn't set
} else {
setPendingError(true);
}
});
};
// close wallet modal if fortmatic modal is active
useEffect(() => {
fortmatic.on(OVERLAY_READY, () => {
toggleWalletModal();
});
}, [toggleWalletModal]);
// get wallets user can switch too, depending on device/browser
function getOptions() {
const { ethereum, web3 } = window as any;
const isMetamask = ethereum && !ethereum.isBitKeep && ethereum.isMetaMask;
const isBlockWallet = ethereum && ethereum.isBlockWallet;
const isBitKeep = ethereum && ethereum.isBitKeep;
return Object.keys(SUPPORTED_WALLETS).map((key) => {
const option = SUPPORTED_WALLETS[key];
//disable safe app by in the list
if (option.connector === safeApp) {
return null;
}
// check for mobile options
if (isMobile) {
//disable portis on mobile for now
if (option.connector === portis) {
return null;
}
if (!web3 && !ethereum && option.mobile) {
return (
<Option
onClick={() => {
option.connector !== connector &&
!option.href &&
tryActivation(option.connector);
}}
id={`connect-${key}`}
key={key}
active={
option.connector === connector &&
(connector !== injected ||
isBlockWallet ===
(option.name === GlobalConst.walletName.BLOCKWALLET) ||
isBitKeep ===
(option.name === GlobalConst.walletName.BITKEEP) ||
isMetamask ===
(option.name === GlobalConst.walletName.METAMASK))
}
color={option.color}
link={option.href}
header={option.name}
subheader={null}
icon={option.iconName}
/>
);
}
return null;
}
// overwrite injected when needed
if (option.connector === injected) {
// don't show injected if there's no injected provider
if (!(web3 || ethereum)) {
if (option.name === GlobalConst.walletName.METAMASK) {
return (
<Option
id={`connect-${key}`}
key={key}
color={'#E8831D'}
header={'Install Metamask'}
subheader={null}
link={'https://metamask.io/'}
icon={MetamaskIcon}
/>
);
} else {
return null; //dont want to return install twice
}
}
// don't return metamask if injected provider isn't metamask
else if (
option.name === GlobalConst.walletName.METAMASK &&
!isMetamask
) {
return null;
} else if (
option.name === GlobalConst.walletName.BITKEEP &&
!isBitKeep
) {
return null;
} else if (
option.name === GlobalConst.walletName.BLOCKWALLET &&
!isBlockWallet
) {
return null;
}
// likewise for generic
else if (
option.name === GlobalConst.walletName.INJECTED &&
(isMetamask || isBitKeep || isBlockWallet)
) {
return null;
}
}
// return rest of options
return (
!isMobile &&
!option.mobileOnly && (
<Option
id={`connect-${key}`}
onClick={() => {
option.connector === connector
? setWalletView(WALLET_VIEWS.ACCOUNT)
: !option.href && tryActivation(option.connector);
}}
key={key}
active={
option.connector === connector &&
(connector !== injected ||
isBlockWallet ===
(option.name === GlobalConst.walletName.BLOCKWALLET) ||
isBitKeep ===
(option.name === GlobalConst.walletName.BITKEEP) ||
isMetamask ===
(option.name === GlobalConst.walletName.METAMASK))
}
color={option.color}
link={option.href}
header={option.name}
subheader={null} //use option.descriptio to bring back multi-line
icon={option.iconName}
/>
)
);
});
}
function getModalContent() {
if (error) {
return (
<Box position='relative'>
<Box position='absolute' top='16px' right='16px' display='flex'>
<Close style={{ cursor: 'pointer' }} onClick={toggleWalletModal} />
</Box>
<Box mt={2} textAlign='center'>
<Typography variant='subtitle2'>
{error instanceof UnsupportedChainIdError
? 'Wrong Network'
: 'Error connecting'}
</Typography>
</Box>
<Box mt={3} mb={2} textAlign='center'>
<Typography variant='body2'>
{error instanceof UnsupportedChainIdError
? 'Please connect to the appropriate Polygon network.'
: 'Error connecting. Try refreshing the page.'}
</Typography>
</Box>
</Box>
);
}
if (account && walletView === WALLET_VIEWS.ACCOUNT) {
return (
<AccountDetails
toggleWalletModal={toggleWalletModal}
pendingTransactions={pendingTransactions}
confirmedTransactions={confirmedTransactions}
ENSName={ENSName}
openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
/>
);
}
return (
<Box paddingX={3} paddingY={4}>
<Box display='flex' justifyContent='space-between'>
<Typography variant='h5'>Connect wallet</Typography>
<Close style={{ cursor: 'pointer' }} onClick={toggleWalletModal} />
</Box>
<Box mt={4}>
{walletView === WALLET_VIEWS.PENDING ? (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
) : (
getOptions()
)}
{walletView !== WALLET_VIEWS.PENDING && (
<Box className={classes.blurb}>
<Typography variant='body2'>New to Matic?</Typography>
<a
href='https://docs.matic.network/docs/develop/wallets/getting-started'
target='_blank'
rel='noopener noreferrer'
>
<Typography variant='body2'>Learn about Wallets ↗</Typography>
</a>
</Box>
)}
</Box>
</Box>
);
}
return (
<CustomModal open={walletModalOpen} onClose={toggleWalletModal}>
<Box
maxHeight='80vh'
display='flex'
flexDirection='column'
overflow='auto'
>
{getModalContent()}
</Box>
</CustomModal>
);
}
Example #23
| Source File: index.tsx From cuiswap with GNU General Public License v3.0 | 4 votes |
|
export default function Web3Status() {
const { t } = useTranslation()
const { active, account, connector, error } = useWeb3React()
const contextNetwork = useWeb3React(NetworkContextName)
const { ENSName } = useENSName(account)
const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => {
const txs = Object.values(allTransactions)
return txs.filter(recentTransactionsOnly).sort(newTranscationsFirst)
}, [allTransactions])
const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
const confirmed = sortedRecentTransactions.filter(tx => tx.receipt).map(tx => tx.hash)
const hasPendingTransactions = !!pending.length
const hasSocks = useHasSocks()
const toggleWalletModal = useWalletModalToggle()
// handle the logo we want to show with the account
function getStatusIcon() {
if (connector === injected) {
return <Identicon />
} else if (connector === walletconnect) {
return (
<IconWrapper size={16}>
<img src={WalletConnectIcon} alt={''} />
</IconWrapper>
)
} else if (connector === walletlink) {
return (
<IconWrapper size={16}>
<img src={CoinbaseWalletIcon} alt={''} />
</IconWrapper>
)
} else if (connector === fortmatic) {
return (
<IconWrapper size={16}>
<img src={FortmaticIcon} alt={''} />
</IconWrapper>
)
} else if (connector === portis) {
return (
<IconWrapper size={16}>
<img src={PortisIcon} alt={''} />
</IconWrapper>
)
}
}
function getWeb3Status() {
if (account) {
return (
<Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
{hasPendingTransactions ? (
<RowBetween>
<Text>{pending?.length} Pending</Text> <Loader stroke="white" />
</RowBetween>
) : (
<>
{hasSocks ? SOCK : null}
<Text>{ENSName || shortenAddress(account)}</Text>
</>
)}
{!hasPendingTransactions && getStatusIcon()}
</Web3StatusConnected>
)
} else if (error) {
return (
<Web3StatusError onClick={toggleWalletModal}>
<NetworkIcon />
<Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
</Web3StatusError>
)
} else {
return (
<Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
<Text>{t('Connect to a wallet')}</Text>
</Web3StatusConnect>
)
}
}
if (!contextNetwork.active && !active) {
return null
}
return (
<>
{getWeb3Status()}
<WalletModal ENSName={ENSName} pendingTransactions={pending} confirmedTransactions={confirmed} />
</>
)
}
