show wrong network on connect button and refactoring (#1575)

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 ? (
         <ButtonAccount
           connectionColor={connectionColor}
           connectionMessage={connectionMessage}
-          hasNetworkMismatch={hasNetworkMismatch}
+          isWrongNetwork={isWrongNetwork}
           label={label}
           onClick={toggle}
         />
@@ -148,15 +156,15 @@ function AccountModule() {
         visible={opened}
       >
         {({ account, screenId, activating, activationError, providerInfo }) => {
-          if (screenId === 'connecting') {
+          if (screenId === SCREEN_ID.connecting) {
             return (
               <ConnectingScreen
                 providerId={activating}
                 onCancel={handleResetConnection}
               />
             )
           }
-          if (screenId === 'connected') {
+          if (screenId === SCREEN_ID.connected) {
             return (
               <ConnectedScreen
                 account={account}
@@ -172,7 +180,7 @@ function AccountModule() {
               />
             )
           }
-          if (screenId === 'error') {
+          if (screenId === SCREEN_ID.error) {
             return (
               <ErrorScreen
                 error={activationError}
@@ -205,7 +213,7 @@ function useConnectionInfo() {
     syncDelay: clientSyncDelay,
   } = useSyncInfo()
 
-  const { walletNetworkName, hasNetworkMismatch } = useNetworkConnectionData()
+  const { walletNetworkName, isWrongNetwork } = useNetworkConnectionData()
 
   const { connectionMessage, connectionColor } = useWalletConnectionDetails(
     clientListening,
@@ -224,7 +232,7 @@ function useConnectionInfo() {
     clientSyncDelay,
     connectionColor,
     connectionMessage,
-    hasNetworkMismatch,
+    isWrongNetwork,
     label,
     walletConnectionStatus,
     walletListening,

src/components/AccountModule/AccountModuleConnectedScreen.js

@@ -37,7 +37,7 @@ function AccountModuleConnectedScreen({
   const wallet = useWallet()
   const theme = useTheme()
 
-  const { walletNetworkName, hasNetworkMismatch } = useNetworkConnectionData()
+  const { walletNetworkName, isWrongNetwork } = useNetworkConnectionData()
 
   const copyAddress = useCopyToClipboard(account, 'Address copied')
 
@@ -156,7 +156,7 @@ function AccountModuleConnectedScreen({
         )}
       </FlexWrapper>
 
-      {hasNetworkMismatch ? (
+      {isWrongNetwork ? (
         <div
           css={`
             margin-top: ${1 * GU}px;

src/components/AccountModule/AccountModuleErrorScreen.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { GU, Link, textStyle, useTheme } from '@aragon/ui'
-import { ChainUnsupportedError } from 'use-wallet'
+import { ChainUnsupportedError } from '../../wallet'
 import { useNetworkConfig } from '../../network-config'
 import connectionError from './assets/connection-error.png'
 

src/components/AccountModule/ButtonAccount.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import {
   ButtonBase,
@@ -10,16 +10,21 @@ import {
   useTheme,
   useViewport,
 } from '@aragon/ui'
-import { shortenAddress } from '../../web3-utils'
+import { shortenAddress, getEmptyAddress } from '../../web3-utils'
 import { useWallet } from '../../wallet'
 
 const ButtonAccount = React.forwardRef(function ButtonAccount(
-  { connectionColor, connectionMessage, hasNetworkMismatch, label, onClick },
+  { connectionColor, connectionMessage, isWrongNetwork, label, onClick },
   ref
 ) {
   const theme = useTheme()
   const wallet = useWallet()
   const { above } = useViewport()
+
+  const walletAccount = useMemo(() => {
+    return wallet.account || getEmptyAddress()
+  }, [wallet.account])
+
   return (
     <ButtonBase
       ref={ref}
@@ -43,7 +48,7 @@ const ButtonAccount = React.forwardRef(function ButtonAccount(
         `}
       >
         <div css="position: relative">
-          <EthIdenticon address={wallet.account} radius={RADIUS} />
+          <EthIdenticon address={walletAccount} radius={RADIUS} />
           <div
             css={`
               position: absolute;
@@ -83,7 +88,7 @@ const ButtonAccount = React.forwardRef(function ButtonAccount(
                     {label}
                   </div>
                 ) : (
-                  <div>{shortenAddress(wallet.account)}</div>
+                  <div>{shortenAddress(walletAccount)}</div>
                 )}
               </div>
               <div
@@ -92,7 +97,7 @@ const ButtonAccount = React.forwardRef(function ButtonAccount(
                   color: ${connectionColor};
                 `}
               >
-                {hasNetworkMismatch ? 'Wrong network' : connectionMessage}
+                {isWrongNetwork ? 'Wrong network' : connectionMessage}
               </div>
             </div>
 
@@ -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,
 }

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',

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

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) {

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 }