diff --git a/src/components/AccountModule/AccountModule.js b/src/components/AccountModule/AccountModule.js index cb9e08d58..6ca510787 100644 --- a/src/components/AccountModule/AccountModule.js +++ b/src/components/AccountModule/AccountModule.js @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { useWallet } from '../../wallet' +import { useWallet, WALLET_STATUS } from '../../wallet' import { useLocalIdentity } from '../../hooks' import { useNetworkConnectionData, @@ -15,11 +15,18 @@ import ConnectingScreen from './AccountModuleConnectingScreen' import ConnectedScreen from './AccountModuleConnectedScreen' import ErrorScreen from './AccountModuleErrorScreen' +const SCREEN_ID = Object.freeze({ + providers: WALLET_STATUS.providerId, + connecting: WALLET_STATUS.connecting, + connected: WALLET_STATUS.connected, + error: WALLET_STATUS.error, +}) + const SCREENS = [ - { id: 'providers', title: 'Use account from' }, - { id: 'connecting', title: 'Use account from' }, - { id: 'connected', title: 'Active account' }, - { id: 'error', title: 'Connection error' }, + { id: SCREEN_ID.providers, title: 'Use account from' }, + { id: SCREEN_ID.connecting, title: 'Use account from' }, + { id: SCREEN_ID.connected, title: 'Active account' }, + { id: SCREEN_ID.error, title: 'Connection error' }, ] function AccountModule() { @@ -48,7 +55,7 @@ function AccountModule() { clientSyncDelay, connectionColor, connectionMessage, - hasNetworkMismatch, + isWrongNetwork, label, walletConnectionStatus, walletListening, @@ -59,11 +66,11 @@ function AccountModule() { useEffect(() => { let timer - if (status === 'error') { + if (status === WALLET_STATUS.error) { setActivatingDelayed(null) } - if (status === 'connecting') { + if (status === WALLET_STATUS.connecting) { setActivatingDelayed(providerInfo.id) timer = setTimeout(() => { setActivatingDelayed(null) @@ -76,7 +83,8 @@ function AccountModule() { const previousScreenIndex = useRef(-1) const { screenIndex, direction } = useMemo(() => { - const screenId = status === 'disconnected' ? 'providers' : status + const screenId = + status === WALLET_STATUS.disconnected ? SCREEN_ID.providers : status const screenIndex = SCREENS.findIndex(screen => screen.id === screenId) const direction = previousScreenIndex.current > screenIndex ? -1 : 1 @@ -90,7 +98,7 @@ function AccountModule() { const screenId = screen.id const handlePopoverClose = useCallback(() => { - if (screenId === 'connecting' || screenId === 'error') { + if (screenId === SCREEN_ID.connecting || screenId === SCREEN_ID.error) { // reject closing the popover return false } @@ -106,11 +114,11 @@ function AccountModule() { height: 100%; `} > - {screenId === 'connected' ? ( + {screenId === SCREEN_ID.connected || isWrongNetwork ? ( @@ -148,7 +156,7 @@ function AccountModule() { visible={opened} > {({ account, screenId, activating, activationError, providerInfo }) => { - if (screenId === 'connecting') { + if (screenId === SCREEN_ID.connecting) { return ( ) } - if (screenId === 'connected') { + if (screenId === SCREEN_ID.connected) { return ( ) } - if (screenId === 'error') { + if (screenId === SCREEN_ID.error) { return ( - {hasNetworkMismatch ? ( + {isWrongNetwork ? (
{ + return wallet.account || getEmptyAddress() + }, [wallet.account]) + return (
- +
) : ( -
{shortenAddress(wallet.account)}
+
{shortenAddress(walletAccount)}
)}
- {hasNetworkMismatch ? 'Wrong network' : connectionMessage} + {isWrongNetwork ? 'Wrong network' : connectionMessage}
@@ -114,7 +119,7 @@ ButtonAccount.propTypes = { PropTypes.instanceOf(String), ]).isRequired, connectionMessage: PropTypes.string.isRequired, - hasNetworkMismatch: PropTypes.bool.isRequired, + isWrongNetwork: PropTypes.bool.isRequired, label: PropTypes.string, onClick: PropTypes.func.isRequired, } diff --git a/src/components/AccountModule/connection-hooks.js b/src/components/AccountModule/connection-hooks.js index 8eccf2b1d..3fb1bf12f 100644 --- a/src/components/AccountModule/connection-hooks.js +++ b/src/components/AccountModule/connection-hooks.js @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useState, useMemo } from 'react' import { useTheme } from '@aragon/ui' import BN from 'bn.js' import { @@ -16,41 +16,27 @@ import { MAX_PROVIDER_SYNC_DELAY, MILD_PROVIDER_SYNC_DELAY, OK_PROVIDER_SYNC_DELAY, - normalizeNetworkName, } from './utils' import { pollEvery } from '../../utils' -import { useWallet } from '../../wallet' +import { useWallet, ChainUnsupportedError, WALLET_STATUS } from '../../wallet' import { getWeb3, getLatestBlockTimestamp } from '../../web3-utils' -import { getNetworkSettings } from '../../network-config' +import { getNetworkSettings, normalizeNetworkName } from '../../network-config' import { useClientWeb3 } from '../../contexts/ClientWeb3Context' const BLOCK_TIMESTAMP_POLL_INTERVAL = 60000 export function useNetworkConnectionData() { - const { web3: walletWeb3, chainId } = useWallet() - const [walletChainId, setWalletChainId] = useState(-1) + const { networkType, status, error } = useWallet() - // get the wallet chainId whenever chainId changes to make - // sure web3 is connected to the same chain - useEffect(() => { - if (!walletWeb3) { - return - } - - let cancelled = false - walletWeb3.eth.getChainId((err, web3ChainId) => { - if (!err && !cancelled) { - setWalletChainId(web3ChainId) - } - }) - return () => { - cancelled = true - } - }, [walletWeb3, chainId]) + const isWrongNetwork = useMemo(() => { + return ( + status === WALLET_STATUS.error && error instanceof ChainUnsupportedError + ) + }, [status, error]) return { - walletNetworkName: normalizeNetworkName(walletChainId), - hasNetworkMismatch: walletChainId !== chainId, + walletNetworkName: normalizeNetworkName(networkType), + isWrongNetwork, } } @@ -62,7 +48,7 @@ export function useWalletConnectionDetails( clientSyncDelay, walletSyncDelay ) { - const { walletNetworkName, hasNetworkMismatch } = useNetworkConnectionData() + const { walletNetworkName, isWrongNetwork } = useNetworkConnectionData() const theme = useTheme() const { networkType } = useWallet() const networkSettings = getNetworkSettings(networkType) @@ -107,7 +93,7 @@ export function useWalletConnectionDetails( connectionMessageLong: 'Syncing issues', connectionColor: theme.warning, } - } else if (hasNetworkMismatch) { + } else if (isWrongNetwork) { return { connectionMessage: 'Wrong network', connectionMessageLong: 'Wrong network', diff --git a/src/components/AccountModule/utils.js b/src/components/AccountModule/utils.js index c0a1f9d27..bb36dc062 100644 --- a/src/components/AccountModule/utils.js +++ b/src/components/AccountModule/utils.js @@ -2,7 +2,6 @@ import { STATUS_CONNECTION_ERROR, STATUS_CONNECTION_WARNING, } from './connection-statuses' -import { getNetworkByChainId } from '../../network-config' export const DROPPED_PROVIDER_SYNC_DELAY = 45 export const MAX_PROVIDER_SYNC_DELAY = 30 @@ -56,7 +55,3 @@ export function getClientSyncState( description: `current block ${latestClientBlockNumber}`, } } - -export function normalizeNetworkName(chainId) { - return getNetworkByChainId(chainId).settings.shortName -} diff --git a/src/network-config.js b/src/network-config.js index ec09bb429..2a6a31bdd 100644 --- a/src/network-config.js +++ b/src/network-config.js @@ -132,13 +132,8 @@ export function getNetworkConfig(type) { ) } -export function getNetworkByChainId(chainId = -1) { - chainId = Number(chainId) - return ( - Object.values(networkConfigs).find( - network => network.settings.chainId === chainId - ) || networkConfigs.unknown - ) +export function normalizeNetworkName(networkType) { + return getNetworkConfig(networkType).settings.shortName } export function sanitizeNetworkType(networkType) { diff --git a/src/wallet.js b/src/wallet.js index de2a9f388..3d6f439b3 100644 --- a/src/wallet.js +++ b/src/wallet.js @@ -1,12 +1,24 @@ import React, { useContext, useEffect, useMemo, useState } from 'react' import PropTypes from 'prop-types' import BN from 'bn.js' -import { useWallet as useWalletBase, UseWalletProvider } from 'use-wallet' +import { + useWallet as useWalletBase, + UseWalletProvider, + ChainUnsupportedError, +} from 'use-wallet' import { getWeb3, filterBalanceValue } from './web3-utils' import { useWalletConnectors } from './ethereum-providers/connectors' import { LocalStorageWrapper } from './local-storage-wrapper' import { NETWORK_TYPE } from './NetworkType' +export const WALLET_STATUS = Object.freeze({ + providers: 'providers', + connecting: 'connecting', + connected: 'connected', + disconnected: 'disconnected', + error: 'error', +}) + const NETWORK_TYPE_DEFAULT = NETWORK_TYPE.main const WalletContext = React.createContext() @@ -24,8 +36,6 @@ function WalletContextProvider({ children }) { ...walletBaseRest } = useWalletBase() - console.log('========= ', type) - const [walletWeb3, setWalletWeb3] = useState(null) const [networkType, setNetworkType] = useState(NETWORK_TYPE_DEFAULT) @@ -110,3 +120,5 @@ WalletProvider.propTypes = { children: PropTypes.node } export function useWallet() { return useContext(WalletContext) } + +export { ChainUnsupportedError }