Moves data fetching into Web3Provider (#66)

synapsecns · Dec 15, 2023 · 0765694 · 0765694
1 parent fa6d383
commit 0765694
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 32 deletions.
diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
@@ -66,13 +66,12 @@ const chains = {
 
 export const Widget = ({
   chainIds,
-  web3Provider,
   networkProviders,
   theme,
   customTheme,
   tokens,
   toChainId,
-}: WidgetProps) => {
+}) => {
   const dispatch = useAppDispatch()
   const synapseSDK = new SynapseSDK(chainIds, networkProviders)
   const web3Context = useContext(Web3Context)
@@ -105,28 +104,6 @@ export const Widget = ({
     return generateTheme()
   })()
 
-  /** Fetch Web3 Provider Data */
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const signer = await web3Provider.getSigner()
-        const address = await signer.getAddress()
-        const network = await web3Provider.getNetwork()
-
-        web3Context.setWeb3Provider({
-          connectedAddress: address,
-          networkId: Number(network?.chainId),
-          signer,
-          provider: web3Provider,
-        })
-      } catch (e) {
-        console.log('Error', e)
-      }
-    }
-
-    web3Provider && fetchData()
-  }, [web3Provider])
-
   useEffect(() => {
     dispatch(setTokens(tokens))
     dispatch(setDestinationChainId(toChainId))

diff --git a/src/index.tsx b/src/index.tsx
@@ -8,6 +8,9 @@ import { store } from '@/state/store'
 
 import * as BRIDGEABLE from '@/constants/bridgeable'
 
+// TODO: After separating required fields need two types: BridgeProps (consumer) and WidgetProps (internal)
+// TODO: Can we clarify browserProvider vs. web3Provider vs. web3Context
+
 export const Bridge = ({
   chainIds,
   web3Provider,
@@ -18,11 +21,10 @@ export const Bridge = ({
   toChainId,
 }: WidgetProps) => {
   return (
-    <Web3Provider>
+    <Web3Provider config={web3Provider}>
       <Provider store={store}>
         <Widget
           chainIds={chainIds}
-          web3Provider={web3Provider}
           networkProviders={networkProviders}
           theme={theme}
           customTheme={customTheme}

diff --git a/src/providers/Web3Provider.tsx b/src/providers/Web3Provider.tsx
@@ -1,26 +1,56 @@
-import { createContext, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
 
-export interface web3ProviderTypes {
+export interface Web3ProviderTypes {
   connectedAddress: string
   networkId: number | null
   signer: any | null
   provider: any | null
 }
 
 export interface ContextType {
-  web3Provider: web3ProviderTypes | null
-  setWeb3Provider: React.Dispatch<React.SetStateAction<web3ProviderTypes>>
+  web3Provider: Web3ProviderTypes | null
+  setWeb3Provider: React.Dispatch<React.SetStateAction<Web3ProviderTypes>>
 }
 
 export const Web3Context = createContext<ContextType | null>(null)
 
-export const Web3Provider = ({ children }: { children: React.ReactNode }) => {
-  const [web3Provider, setWeb3Provider] = useState<web3ProviderTypes>({
+export const Web3Provider = ({
+  children,
+  config,
+}: {
+  children: React.ReactNode
+  config: any
+}) => {
+  const [web3Provider, setWeb3Provider] = useState<Web3ProviderTypes>({
     connectedAddress: '',
     networkId: null,
     signer: null,
     provider: null,
   })
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const signer = await config.getSigner()
+        const address = await signer.getAddress()
+        const network = await config.getNetwork()
+
+        setWeb3Provider({
+          connectedAddress: address,
+          networkId: Number(network?.chainId),
+          signer,
+          provider: config,
+        })
+      } catch (e) {
+        console.log('Error', e)
+      }
+    }
+
+    if (config) {
+      fetchData()
+    }
+  }, [config])
+
   return (
     <Web3Context.Provider value={{ web3Provider, setWeb3Provider }}>
       {children}