fix: exposes web3provider props in the class component

Author: itofarina

src/components/molecules/Account.tsx

@@ -0,0 +1,105 @@
+import React, { FC, useState } from 'react'
+import Web3 from 'web3'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import ProviderInfo, { EProvider } from '../../models/ProviderInfo'
+import { shortenString } from '../../utils'
+import { Button, Typography } from '../atoms'
+import { colors, fonts } from '../../theme'
+import AccountModal from './AccountModal'
+import NetworkIndicator from '../atoms/NetworkIndicator'
+import NetworkInfo from '../../models/NetworkInfo'
+
+export interface AccountProps {
+  web3?: Web3
+  networkInfo?: NetworkInfo
+  account?: string
+  setProvider?: (provider: EProvider) => Promise<void>
+  availableProviders?: ProviderInfo[]
+  currentNetworkId?: number
+  requiredNetworkId?: number
+  onCorrectNetworkMessage?: string
+  onNetworkMismatchMessage?: string
+  noNetworkMessage?: string
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  accountText: {
+    fontSize: fonts.size.tiny,
+    textAlign: 'center',
+  },
+  button: {
+    border: `1px solid ${colors.white}`,
+    '&:hover': {
+      border: `1px solid ${colors.transparent}`,
+    },
+  },
+  networkIndicator: {
+    marginRight: theme.spacing(1),
+  },
+}))
+
+const Account: FC<AccountProps> = ({
+  web3,
+  networkInfo,
+  account,
+  setProvider,
+  availableProviders,
+  currentNetworkId,
+  requiredNetworkId,
+  onCorrectNetworkMessage,
+  onNetworkMismatchMessage,
+  noNetworkMessage,
+}) => {
+  const classes = useStyles()
+
+  const [open, setOpen] = useState(false)
+  const handleClose = (): void => setOpen(false)
+  const handleOpen = (): void => setOpen(true)
+
+  const accountText = (): string => {
+    if (!web3) return 'Connect wallet'
+
+    if (currentNetworkId !== requiredNetworkId) {
+      return 'Wrong Network'
+    }
+
+    if (account) {
+      return shortenString(account)
+    }
+    return 'Unlock your wallet'
+  }
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleOpen} className={classes.button} variant="contained" color="primary" rounded>
+        {
+          !!requiredNetworkId && (
+            <NetworkIndicator
+              iconClassName={classes.networkIndicator}
+              currentNetworkId={currentNetworkId}
+              requiredNetworkId={requiredNetworkId}
+              onCorrectNetworkMessage={onCorrectNetworkMessage}
+              onNetworkMismatchMessage={onNetworkMismatchMessage}
+              noNetworkMessage={noNetworkMessage}
+            />
+          )
+        }
+        <Typography className={classes.accountText}>
+          {accountText()}
+        </Typography>
+      </Button>
+
+      <AccountModal
+        open={open}
+        onClose={handleClose}
+        networkInfo={networkInfo}
+        web3={web3}
+        onProviderSet={handleClose}
+        setProvider={setProvider}
+        availableProviders={availableProviders}
+      />
+    </React.Fragment>
+  )
+}
+
+export default Account

src/components/molecules/AccountModal.tsx

@@ -4,11 +4,13 @@ import {
   Button, LoginOption, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle,
 } from '../atoms'
 import ProviderInfo, { EProvider } from '../../models/ProviderInfo'
+import NetworkInfo from '../../models/NetworkInfo'
 
 export interface AccountModalProps {
   web3?: Web3
-  setProvider: (provider: EProvider, onProviderSet?:
-    (account: string) => void) => Promise<void>
+  networkInfo?: NetworkInfo
+  setProvider?: (provider: EProvider, onProviderSet?:
+    (account?: string) => void) => Promise<void>
   availableProviders?: ProviderInfo[]
   onClose?: () => void
   onProviderSet?: (account) => void
@@ -40,7 +42,7 @@ const AccountModal: FC<AccountModalProps> = ({
                   providerInfo={providerInfo}
                   key={providerInfo.eProvider}
                   onClick={async (): Promise<void> => {
-                    await setProvider(providerInfo.eProvider, onProviderSet)
+                    if (setProvider) await setProvider(providerInfo.eProvider, onProviderSet)
                   }}
                 />
               ),

src/components/organisms/Account.tsx

@@ -141,9 +141,7 @@ const Account: FC<AccountProps> = (props) => {
         }}
       >
         <Typography className={classes.rightNetwork}>
-          You are successfully connected to
-          {networkInfo?.name}
-          .
+          {`You are successfully connected to ${networkInfo?.name}.`}
         </Typography>
       </Popover>
       <AccountModal

src/providers/Web3Provider.tsx

@@ -17,7 +17,7 @@ export interface Web3ProviderProps {
     requiredNetworkId?: number
   }
   actions: {
-    setProvider: (
+    setProvider?: (
       provider: EProvider,
       onStateChanged?: (account?: string) => void
     ) => Promise<void>
@@ -29,15 +29,15 @@ export interface Web3ProviderProps {
   availableProviders?: ProviderInfo[]
 }
 
-const defaultState: Web3ProviderState = {
+export const defaultWeb3State: Web3ProviderState = {
   provider: undefined,
   web3: undefined,
   account: undefined,
   networkInfo: undefined,
 }
 
 export const Web3Store = createContext<Web3ProviderProps>({
-  state: defaultState,
+  state: defaultWeb3State,
   actions: {
     setProvider: (): Promise<void> => Promise.resolve(),
     onConnectedNetworkChange: (): any => 0,
@@ -86,7 +86,7 @@ const shouldReadAccount = (
   return false
 }
 
-class Web3Provider extends Component<{}, Web3ProviderState> {
+class Web3Provider extends Component<Web3ProviderProps, Web3ProviderState> {
   private readonly requiredNetworkId?: number
 
   private readonly requiredChainId?: number
@@ -95,7 +95,7 @@ class Web3Provider extends Component<{}, Web3ProviderState> {
 
   constructor(props: Web3ProviderProps) {
     super(props)
-    this.state = defaultState
+    this.state = defaultWeb3State
     this.requiredNetworkId = props.requiredNetworkId
     this.requiredChainId = props.requiredChainId
     this.onConnectedNetworkChange = props.actions.onConnectedNetworkChange

src/providers/index.ts

@@ -1,3 +1,3 @@
-import Web3Provider, { Web3Store } from './Web3Provider'
+import Web3Provider, { Web3Store, defaultWeb3State } from './Web3Provider'
 
-export { Web3Provider, Web3Store }
+export { Web3Provider, Web3Store, defaultWeb3State }