frontend: Replaced getNetworkConfig() with useNetworkConfig() hook to…

… force users use it as a hook.
kkomelin · May 16, 2024 · f2dcd89 · f2dcd89
1 parent 8163f6b
commit f2dcd89
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 67 deletions.
diff --git a/packages/frontend/src/components/GreetingForm.tsx b/packages/frontend/src/components/GreetingForm.tsx
@@ -1,7 +1,4 @@
-import {
-  CONTRACT_PACKAGE_VARIABLE_NAME,
-  useNetworkVariable,
-} from '@/config/networks'
+import { CONTRACT_PACKAGE_VARIABLE_NAME } from '@/config/networks'
 import {
   fromBytesToString,
   getResponseContentField,
@@ -13,6 +10,7 @@ import {
   prepareSetGreetingTransaction,
 } from '@/helpers/greeting/transactions'
 import { notification } from '@/helpers/notification'
+import useNetworkConfig from '@/hooks/useNetworkConfig'
 import useTransact from '@/hooks/useTransact'
 import { useCurrentAccount } from '@mysten/dapp-kit'
 import { Button, TextField } from '@radix-ui/themes'
@@ -24,6 +22,7 @@ const GreetingForm = () => {
   const [name, setName] = useState<string>('')
   const currentAccount = useCurrentAccount()
   const { data, isPending, error, refetch } = useOwnGreeting()
+  const { useNetworkVariable } = useNetworkConfig()
   const packageId = useNetworkVariable(CONTRACT_PACKAGE_VARIABLE_NAME)
   const { transact: create } = useTransact({
     onSuccess: () => {

diff --git a/packages/frontend/src/config/networks.ts b/packages/frontend/src/config/networks.ts
@@ -1,5 +1,3 @@
-import { getNetworkConfig } from '@/helpers/networks'
-
 // For localnet, we automatically create .env.local after deployment with the deployed package ID.
 export const LOCALNET_CONTRACT_PACKAGE_ID =
   import.meta.env.VITE_CONTRACT_PACKAGE_ID || '0xTODO'
@@ -16,6 +14,3 @@ export const CONTRACT_PACKAGE_VARIABLE_NAME = 'contractPackageId'
 export const CONTRACT_MODULE_NAME = 'greeting'
 
 export const EXPLORER_URL_VARIABLE_NAME = 'explorerUrl'
-
-export const { networkConfig, useNetworkVariable, useNetworkVariables } =
-  getNetworkConfig()
diff --git a/packages/frontend/src/helpers/networks.ts b/packages/frontend/src/helpers/networks.ts
@@ -1,52 +1,3 @@
-import {
-  CONTRACT_PACKAGE_VARIABLE_NAME,
-  DEVNET_CONTRACT_PACKAGE_ID,
-  DEVNET_EXPLORER_URL,
-  EXPLORER_URL_VARIABLE_NAME,
-  LOCALNET_CONTRACT_PACKAGE_ID,
-  LOCALNET_EXPLORER_URL,
-  MAINNET_CONTRACT_PACKAGE_ID,
-  MAINNET_EXPLORER_URL,
-  TESTNET_CONTRACT_PACKAGE_ID,
-  TESTNET_EXPLORER_URL,
-} from '@/config/networks'
-import { ENetwork } from '@/types/ENetwork'
-import { createNetworkConfig } from '@mysten/dapp-kit'
-import { getFullnodeUrl } from '@mysten/sui.js/client'
-
-export const getNetworkConfig = () => {
-  return createNetworkConfig({
-    [ENetwork.LOCALNET]: {
-      url: getFullnodeUrl(ENetwork.LOCALNET),
-      variables: {
-        [CONTRACT_PACKAGE_VARIABLE_NAME]: LOCALNET_CONTRACT_PACKAGE_ID,
-        [EXPLORER_URL_VARIABLE_NAME]: LOCALNET_EXPLORER_URL,
-      },
-    },
-    [ENetwork.DEVNET]: {
-      url: getFullnodeUrl(ENetwork.DEVNET),
-      variables: {
-        [CONTRACT_PACKAGE_VARIABLE_NAME]: DEVNET_CONTRACT_PACKAGE_ID,
-        [EXPLORER_URL_VARIABLE_NAME]: DEVNET_EXPLORER_URL,
-      },
-    },
-    [ENetwork.TESTNET]: {
-      url: getFullnodeUrl(ENetwork.TESTNET),
-      variables: {
-        [CONTRACT_PACKAGE_VARIABLE_NAME]: TESTNET_CONTRACT_PACKAGE_ID,
-        [EXPLORER_URL_VARIABLE_NAME]: TESTNET_EXPLORER_URL,
-      },
-    },
-    [ENetwork.MAINNET]: {
-      url: getFullnodeUrl(ENetwork.MAINNET),
-      variables: {
-        [CONTRACT_PACKAGE_VARIABLE_NAME]: MAINNET_CONTRACT_PACKAGE_ID,
-        [EXPLORER_URL_VARIABLE_NAME]: MAINNET_EXPLORER_URL,
-      },
-    },
-  })
-}
-
 export const transactionUrl = (explorerUrl: string, txDigest: string) => {
   return `${explorerUrl}/txblock/${txDigest}`
 }
diff --git a/packages/frontend/src/hooks/useNetworkConfig.tsx b/packages/frontend/src/hooks/useNetworkConfig.tsx
@@ -0,0 +1,50 @@
+import {
+  CONTRACT_PACKAGE_VARIABLE_NAME,
+  DEVNET_CONTRACT_PACKAGE_ID,
+  DEVNET_EXPLORER_URL,
+  EXPLORER_URL_VARIABLE_NAME,
+  LOCALNET_CONTRACT_PACKAGE_ID,
+  LOCALNET_EXPLORER_URL,
+  MAINNET_CONTRACT_PACKAGE_ID,
+  MAINNET_EXPLORER_URL,
+  TESTNET_CONTRACT_PACKAGE_ID,
+  TESTNET_EXPLORER_URL,
+} from '@/config/networks'
+import { ENetwork } from '@/types/ENetwork'
+import { createNetworkConfig } from '@mysten/dapp-kit'
+import { getFullnodeUrl } from '@mysten/sui.js/client'
+
+const useNetworkConfig = () => {
+  return createNetworkConfig({
+    [ENetwork.LOCALNET]: {
+      url: getFullnodeUrl(ENetwork.LOCALNET),
+      variables: {
+        [CONTRACT_PACKAGE_VARIABLE_NAME]: LOCALNET_CONTRACT_PACKAGE_ID,
+        [EXPLORER_URL_VARIABLE_NAME]: LOCALNET_EXPLORER_URL,
+      },
+    },
+    [ENetwork.DEVNET]: {
+      url: getFullnodeUrl(ENetwork.DEVNET),
+      variables: {
+        [CONTRACT_PACKAGE_VARIABLE_NAME]: DEVNET_CONTRACT_PACKAGE_ID,
+        [EXPLORER_URL_VARIABLE_NAME]: DEVNET_EXPLORER_URL,
+      },
+    },
+    [ENetwork.TESTNET]: {
+      url: getFullnodeUrl(ENetwork.TESTNET),
+      variables: {
+        [CONTRACT_PACKAGE_VARIABLE_NAME]: TESTNET_CONTRACT_PACKAGE_ID,
+        [EXPLORER_URL_VARIABLE_NAME]: TESTNET_EXPLORER_URL,
+      },
+    },
+    [ENetwork.MAINNET]: {
+      url: getFullnodeUrl(ENetwork.MAINNET),
+      variables: {
+        [CONTRACT_PACKAGE_VARIABLE_NAME]: MAINNET_CONTRACT_PACKAGE_ID,
+        [EXPLORER_URL_VARIABLE_NAME]: MAINNET_EXPLORER_URL,
+      },
+    },
+  })
+}
+
+export default useNetworkConfig
diff --git a/packages/frontend/src/hooks/useOwnGreeting.tsx b/packages/frontend/src/hooks/useOwnGreeting.tsx
@@ -1,12 +1,11 @@
-import {
-  CONTRACT_PACKAGE_VARIABLE_NAME,
-  useNetworkVariable,
-} from '@/config/networks'
+import { CONTRACT_PACKAGE_VARIABLE_NAME } from '@/config/networks'
 import { fullStructName } from '@/helpers/greeting/misc'
 import { useCurrentAccount, useSuiClientQuery } from '@mysten/dapp-kit'
+import useNetworkConfig from './useNetworkConfig'
 
 const useOwnGreeting = () => {
   const currentAccount = useCurrentAccount()
+  const { useNetworkVariable } = useNetworkConfig()
   const packageId = useNetworkVariable(CONTRACT_PACKAGE_VARIABLE_NAME)
 
   return useSuiClientQuery('getOwnedObjects', {

diff --git a/packages/frontend/src/hooks/useTransact.ts b/packages/frontend/src/hooks/useTransact.ts
@@ -1,7 +1,4 @@
-import {
-  EXPLORER_URL_VARIABLE_NAME,
-  useNetworkVariable,
-} from '@/config/networks'
+import { EXPLORER_URL_VARIABLE_NAME } from '@/config/networks'
 import { transactionUrl } from '@/helpers/networks'
 import { notification } from '@/helpers/notification'
 import {
@@ -10,6 +7,7 @@ import {
 } from '@mysten/dapp-kit'
 import { SuiTransactionBlockResponse } from '@mysten/sui.js/client'
 import { TransactionBlock } from '@mysten/sui.js/transactions'
+import useNetworkConfig from './useNetworkConfig'
 
 interface IProps {
   onSuccess?: (response: SuiTransactionBlockResponse) => void
@@ -19,6 +17,7 @@ interface IProps {
 const useTransact = ({ onSuccess, onError }: IProps) => {
   const client = useSuiClient()
   const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock()
+  const { useNetworkVariable } = useNetworkConfig()
   const explorerUrl = useNetworkVariable(EXPLORER_URL_VARIABLE_NAME)
 
   const transact = (txb: TransactionBlock) => {

diff --git a/packages/frontend/src/providers/SuiProvider.tsx b/packages/frontend/src/providers/SuiProvider.tsx
@@ -1,4 +1,4 @@
-import { networkConfig } from '@/config/networks'
+import useNetworkConfig from '@/hooks/useNetworkConfig'
 import { ENetwork } from '@/types/ENetwork'
 import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -7,6 +7,7 @@ import { FC, PropsWithChildren } from 'react'
 const queryClient = new QueryClient()
 
 const SuiProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { networkConfig } = useNetworkConfig()
   return (
     <QueryClientProvider client={queryClient}>
       <SuiClientProvider