do not use AppContext.Consumer

apps/etherscan/src/app/components/HeaderWithSettings.tsx

@@ -69,9 +69,7 @@ const SettingsIcon: React.FC<IconProps> = ({from}: IconProps) => {
 
 export const HeaderWithSettings: React.FC<Props> = ({title = '', from}) => {
   return (
-    <AppContext.Consumer>
-      {() => (
-        <div className="d-flex justify-content-between">
+    <div className="d-flex justify-content-between">
           <h6 className="d-inline">{title}</h6>
           <div className="nav">
             <HomeIcon from={from} />
@@ -79,7 +77,5 @@ export const HeaderWithSettings: React.FC<Props> = ({title = '', from}) => {
             <SettingsIcon from={from} />
           </div>
         </div>
-      )}
-    </AppContext.Consumer>
   )
 }

apps/etherscan/src/app/views/CaptureKeyView.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 
 import {Formik, ErrorMessage, Field} from 'formik'
 import {useNavigate, useLocation} from 'react-router-dom'
@@ -10,55 +10,54 @@ export const CaptureKeyView: React.FC<React.PropsWithChildren> = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const [msg, setMsg] = useState('')
+  const context = React.useContext(AppContext)
+
+  useEffect(() => {
+    if (!context.apiKey) setMsg('Please provide a 34-character API key to continue')
+  }, [context.apiKey])
+
   return (
-    <AppContext.Consumer>
-      {({apiKey, clientInstance, setAPIKey}) => {
-        if (!apiKey) setMsg('Please provide a 34-character API key to continue')
-        return (
-          <div>
-            <Formik
-              initialValues={{apiKey}}
-              validate={(values) => {
-                const errors = {} as any
-                if (!values.apiKey) {
-                  errors.apiKey = 'Required'
-                } else if (values.apiKey.length !== 34) {
-                  errors.apiKey = 'API key should be 34 characters long'
-                }
-                return errors
-              }}
-              onSubmit={(values) => {
-                const apiKey = values.apiKey
-                if (apiKey.length === 34) {
-                  setAPIKey(values.apiKey)
-                  navigate(location && location.state ? location.state : '/')
-                }
-              }}
-            >
-              {({errors, touched, handleSubmit}) => (
-                <form onSubmit={handleSubmit}>
-                  <div className="form-group mb-2">
-                    <label htmlFor="apikey">API Key</label>
-                    <Field
-                      className={errors.apiKey && touched.apiKey ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
-                      type="password"
-                      name="apiKey"
-                      placeholder="e.g. GM1T20XY6JGSAPWKDCYZ7B2FJXKTJRFVGZ"
-                    />
-                    <ErrorMessage className="invalid-feedback" name="apiKey" component="div" />
-                  </div>
+    <div>
+      <Formik
+        initialValues={{apiKey: context.apiKey}}
+        validate={(values) => {
+          const errors = {} as any
+          if (!values.apiKey) {
+            errors.apiKey = 'Required'
+          } else if (values.apiKey.length !== 34) {
+            errors.apiKey = 'API key should be 34 characters long'
+          }
+          return errors
+        }}
+        onSubmit={(values) => {
+          const apiKey = values.apiKey
+          if (apiKey.length === 34) {
+            context.setAPIKey(values.apiKey)
+            navigate(location && location.state ? location.state : '/')
+          }
+        }}
+      >
+        {({errors, touched, handleSubmit}) => (
+          <form onSubmit={handleSubmit}>
+            <div className="form-group mb-2">
+              <label htmlFor="apikey">API Key</label>
+              <Field
+                className={errors.apiKey && touched.apiKey ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
+                type="password"
+                name="apiKey"
+                placeholder="e.g. GM1T20XY6JGSAPWKDCYZ7B2FJXKTJRFVGZ"
+              />
+              <ErrorMessage className="invalid-feedback" name="apiKey" component="div" />
+            </div>
 
-                  <div>
-                    <SubmitButton text="Save" dataId="save-api-key" disable={errors && errors.apiKey ? true : false} />
-                  </div>
-                </form>
-              )}
-            </Formik>
+            <div>
+              <SubmitButton text="Save" dataId="save-api-key" disable={errors && errors.apiKey ? true : false} />
+            </div>
+          </form>
+        )}
+      </Formik>
 
-            <div data-id="api-key-result" className="text-primary mt-4 text-center" style={{fontSize: '0.8em'}} dangerouslySetInnerHTML={{__html: msg}} />
-          </div>
-        )
-      }}
-    </AppContext.Consumer>
+      <div data-id="api-key-result" className="text-primary mt-4 text-center" style={{fontSize: '0.8em'}} dangerouslySetInnerHTML={{__html: msg}} />
+    </div>
   )
 }

apps/etherscan/src/app/views/HomeView.tsx

@@ -8,28 +8,24 @@ import {Receipt} from '../types'
 import {VerifyView} from './VerifyView'
 
 export const HomeView: React.FC<React.PropsWithChildren> = () => {
-  return (
-    <AppContext.Consumer>
-      {({apiKey, clientInstance, setReceipts, receipts, contracts, networkName}) => {
-        return !apiKey ? (
-          <Navigate
-            to={{
-              pathname: '/settings'
-            }}
-          />
-        ) : (
-          <VerifyView
-            contracts={contracts}
-            client={clientInstance}
-            apiKey={apiKey}
-            onVerifiedContract={(receipt: Receipt) => {
-              const newReceipts = [...receipts, receipt]
-              setReceipts(newReceipts)
-            }}
-            networkName={networkName}
-          />
-        )
+  const context = React.useContext(AppContext)
+  
+  return !context.apiKey ? (
+    <Navigate
+      to={{
+        pathname: '/settings'
       }}
-    </AppContext.Consumer>
+    />
+  ) : (
+    <VerifyView
+      contracts={context.contracts}
+      client={context.clientInstance}
+      apiKey={context.apiKey}
+      onVerifiedContract={(receipt: Receipt) => {
+        const newReceipts = [...context.receipts, receipt]
+        context.setReceipts(newReceipts)
+      }}
+      networkName={context.networkName}
+    />
   )
 }

apps/etherscan/src/app/views/ReceiptsView.tsx

@@ -16,6 +16,7 @@ interface FormValues {
 export const ReceiptsView: React.FC<React.PropsWithChildren> = () => {
   const [results, setResults] = useState({succeed: false, message: ''})
   const [isProxyContractReceipt, setIsProxyContractReceipt] = useState(false)
+  const context = React.useContext(AppContext)
 
   const onGetReceiptStatus = async (values: FormValues, clientInstance: any, apiKey: string) => {
     try {
@@ -48,84 +49,78 @@ export const ReceiptsView: React.FC<React.PropsWithChildren> = () => {
     }
   }
 
-  return (
-    <AppContext.Consumer>
-      {({apiKey, clientInstance, receipts, setReceipts}) => {
-        return !apiKey ? (
-          <Navigate
-            to={{
-              pathname: '/settings'
-            }}
-          />
-        ) : (
-          <div>
-            <Formik
-              initialValues={{receiptGuid: ''}}
-              validate={(values) => {
-                const errors = {} as any
-                if (!values.receiptGuid) {
-                  errors.receiptGuid = 'Required'
-                }
-                return errors
-              }}
-              onSubmit={(values) => onGetReceiptStatus(values, clientInstance, apiKey)}
-            >
-              {({errors, touched, handleSubmit, handleChange}) => (
-                <form onSubmit={handleSubmit}>
-                  <div className="form-group mb-2">
-                    <label htmlFor="receiptGuid">Receipt GUID</label>
-                    <Field
-                      className={errors.receiptGuid && touched.receiptGuid ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
-                      type="text"
-                      name="receiptGuid"
-                    />
-                    <ErrorMessage className="invalid-feedback" name="receiptGuid" component="div" />
-                  </div>
+  return !context.apiKey ? (
+    <Navigate
+      to={{
+        pathname: '/settings'
+      }}
+    />
+  ) : (
+    <div>
+      <Formik
+        initialValues={{receiptGuid: ''}}
+        validate={(values) => {
+          const errors = {} as any
+          if (!values.receiptGuid) {
+            errors.receiptGuid = 'Required'
+          }
+          return errors
+        }}
+        onSubmit={(values) => onGetReceiptStatus(values, context.clientInstance, context.apiKey)}
+      >
+        {({errors, touched, handleSubmit, handleChange}) => (
+          <form onSubmit={handleSubmit}>
+            <div className="form-group mb-2">
+              <label htmlFor="receiptGuid">Receipt GUID</label>
+              <Field
+                className={errors.receiptGuid && touched.receiptGuid ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
+                type="text"
+                name="receiptGuid"
+              />
+              <ErrorMessage className="invalid-feedback" name="receiptGuid" component="div" />
+            </div>
 
-                  <div className="d-flex mb-2 custom-control custom-checkbox">
-                    <Field
-                      className="custom-control-input"
-                      type="checkbox"
-                      name="isProxyReceipt"
-                      id="isProxyReceipt"
-                      onChange={async (e) => {
-                        handleChange(e)
-                        if (e.target.checked) setIsProxyContractReceipt(true)
-                        else setIsProxyContractReceipt(false)
-                      }}
-                    />
-                    <label className="form-check-label custom-control-label" htmlFor="isProxyReceipt">
-                      It's a proxy contract GUID
-                    </label>
-                  </div>
-                  <SubmitButton text="Check" disable={!touched.receiptGuid || (touched.receiptGuid && errors.receiptGuid) ? true : false} />
-                </form>
-              )}
-            </Formik>
+            <div className="d-flex mb-2 custom-control custom-checkbox">
+              <Field
+                className="custom-control-input"
+                type="checkbox"
+                name="isProxyReceipt"
+                id="isProxyReceipt"
+                onChange={async (e) => {
+                  handleChange(e)
+                  if (e.target.checked) setIsProxyContractReceipt(true)
+                  else setIsProxyContractReceipt(false)
+                }}
+              />
+              <label className="form-check-label custom-control-label" htmlFor="isProxyReceipt">
+                It's a proxy contract GUID
+              </label>
+            </div>
+            <SubmitButton text="Check" disable={!touched.receiptGuid || (touched.receiptGuid && errors.receiptGuid) ? true : false} />
+          </form>
+        )}
+      </Formik>
 
-            <div
-              className={results['succeed'] ? 'text-success mt-3 text-center' : 'text-danger mt-3 text-center'}
-              dangerouslySetInnerHTML={{
-                __html: results.message ? results.message : ''
-              }}
-            />
+      <div
+        className={results['succeed'] ? 'text-success mt-3 text-center' : 'text-danger mt-3 text-center'}
+        dangerouslySetInnerHTML={{
+          __html: results.message ? results.message : ''
+        }}
+      />
 
-            <ReceiptsTable receipts={receipts} />
-            <br />
-            <CustomTooltip tooltipText="Clear the list of receipts" tooltipId="etherscan-clear-receipts" placement="bottom">
-              <Button
-                className="btn-sm"
-                onClick={() => {
-                  setReceipts([])
-                }}
-              >
-                Clear
-              </Button>
-            </CustomTooltip>
-          </div>
-        )
-      }}
-    </AppContext.Consumer>
+      <ReceiptsTable receipts={context.receipts} />
+      <br />
+      <CustomTooltip tooltipText="Clear the list of receipts" tooltipId="etherscan-clear-receipts" placement="bottom">
+        <Button
+          className="btn-sm"
+          onClick={() => {
+            context.setReceipts([])
+          }}
+        >
+          Clear
+        </Button>
+      </CustomTooltip>
+    </div>
   )
 }