-
+
) : (
-
{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 }