improve getNetworkFromQueryString

smartcontractkit · Aug 9, 2023 · b81d4fb · b81d4fb
1 parent f7eb792
commit b81d4fb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/src/features/data/chains.test.ts b/src/features/data/chains.test.ts
@@ -5,14 +5,18 @@ describe("getNetworkFromQueryString", () => {
   test("works with testnet", () => {
     const queryString = "ethereum-sepolia"
     const chain = CHAINS.filter((chain) => chain.label === "Ethereum")[0]
-    const network = chain.networks.filter((network) => network.name === "Sepolia Testnet")[0]
-    expect(getNetworkFromQueryString(queryString)).toEqual({ chain, network })
+    const chainNetwork = chain.networks.filter((network) => network.name === "Sepolia Testnet")[0]
+    expect(getNetworkFromQueryString(queryString)).toEqual({ chain, chainNetwork })
   })
 
   test("works with mainnet", () => {
     const queryString = "polygon-mainnet"
     const chain = CHAINS.filter((chain) => chain.label === "Polygon (Matic)")[0]
-    const network = chain.networks.filter((network) => network.name === "Polygon Mainnet")[0]
-    expect(getNetworkFromQueryString(queryString)).toEqual({ chain, network })
+    const chainNetwork = chain.networks.filter((network) => network.name === "Polygon Mainnet")[0]
+    expect(getNetworkFromQueryString(queryString)).toEqual({ chain, chainNetwork })
+  })
+  test("return null when invalid queryString", () => {
+    const queryString = "falsy-string"
+    expect(getNetworkFromQueryString(queryString)).toEqual({ chain: null, chainNetwork: null })
   })
 })
diff --git a/src/features/data/chains.ts b/src/features/data/chains.ts
@@ -16,13 +16,16 @@ export interface Chain {
   img?: string
   networkStatusUrl: string
   networks: ChainNetwork[]
-  label?: string
+  label: string
   tags?: ChainTags
   supportedFeatures: ("vrfSubscription" | "vrfDirectFunding" | "feeds")[]
 }
 
-export const getNetworkFromQueryString = (queryString): { chain: Chain; chainNetwork: ChainNetwork } => {
+export const getNetworkFromQueryString = (
+  queryString: string
+): { chain: Chain | null; chainNetwork: ChainNetwork | null } => {
   const chain = CHAINS.find((chain) => chain.networks.some((network) => network.queryString === queryString))
+  if (!chain) return { chain: null, chainNetwork: null }
   const chainNetwork = chain.networks.filter((network) => network.queryString === queryString)[0]
   return { chain, chainNetwork }
 }

diff --git a/src/features/vrf/v2/components/CostTable.tsx b/src/features/vrf/v2/components/CostTable.tsx
@@ -1,4 +1,4 @@
-import { CHAINS, Chain, ChainNetwork, getNetworkFromQueryString } from "~/features/data/chains"
+import { Chain, ChainNetwork, getNetworkFromQueryString } from "~/features/data/chains"
 import "./costTable.css"
 import { useEffect, useReducer, useState } from "preact/hooks"
 import { BigNumber, utils } from "ethers"
@@ -88,7 +88,7 @@ type Action =
   | { type: "SET_CALLBACK_GAS"; payload: number }
   | { type: "SET_LINK_PREMIUM"; payload: number }
   | { type: "SET_DECIMAL_PLACES"; payload: number }
-  | { type: "SET_GAS_LANE_LIST"; payload: number[] | null }
+  | { type: "SET_GAS_LANE_LIST"; payload: number[] }
   | { type: "SET_CURRENT_GAS_LANE"; payload: number }
   | { type: "SET_CURRENT_VERIFICATION_GAS"; payload: number }
   | { type: "SET_PRICE_FEED"; payload: string }
@@ -161,24 +161,6 @@ export const CostTable = ({ method }: Props) => {
   const [network] = useQueryString("network", "")
   const [networkName, setNetworkName] = useState<string>("")
 
-  const getDataResponse = async (mainChainName: string, networkName: string): Promise<dataResponse> => {
-    const cacheKey = `${mainChainName}-${networkName === mainChainName ? chain.networkType : networkName}-${
-      method === "vrfSubscription" ? "subscription" : "directFunding"
-    }`
-    if (cache[cacheKey] && cache[cacheKey].latestCacheUpdate - Date.now() < CACHE_EXPIRY_TIME) {
-      return cache[cacheKey].data
-    }
-
-    const response = await fetch(getGasCalculatorUrl({ mainChainName, networkName, chain, method }), { method: "GET" })
-
-    const json: dataResponse = await response.json()
-    cache[cacheKey] = {
-      data: json,
-      latestCacheUpdate: Date.now(),
-    }
-    return json
-  }
-
   useEffect(() => {
     if (typeof network !== "string" || network === "") return
 
@@ -235,7 +217,26 @@ export const CostTable = ({ method }: Props) => {
       console.error(error)
     })
     return () => dispatch({ type: "SET_LOADING", payload: false })
-  }, [method, network, mainChain, chain])
+  }, [method, network])
+
+  if (!mainChain || !chain) return
+  const getDataResponse = async (mainChainName: string, networkName: string): Promise<dataResponse> => {
+    const cacheKey = `${mainChainName}-${networkName === mainChainName ? chain.networkType : networkName}-${
+      method === "vrfSubscription" ? "subscription" : "directFunding"
+    }`
+    if (cache[cacheKey] && cache[cacheKey].latestCacheUpdate - Date.now() < CACHE_EXPIRY_TIME) {
+      return cache[cacheKey].data
+    }
+
+    const response = await fetch(getGasCalculatorUrl({ mainChainName, networkName, chain, method }), { method: "GET" })
+
+    const json: dataResponse = await response.json()
+    cache[cacheKey] = {
+      data: json,
+      latestCacheUpdate: Date.now(),
+    }
+    return json
+  }
 
   const handleRadioChange = (event) => {
     dispatch({ type: "SET_CURRENT_GAS_LANE", payload: parseInt(event.target.value) })
@@ -308,7 +309,6 @@ export const CostTable = ({ method }: Props) => {
       })
     }
   }
-
   const getsupportedNetworkShortcut = () => {
     const chainName = mainChain.label.toLowerCase()
     switch (chainName) {
@@ -489,9 +489,6 @@ export const CostTable = ({ method }: Props) => {
     }
     return res
   }
-  if (!mainChain || !chain) {
-    return
-  }
   if (state.isLoading) {
     return <p className="loading-text">Data is being fetched. Please wait a moment...</p>
   } else {