improve getNetworkFromQueryString

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 })
   })
 })

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 }
 }

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,6 +161,7 @@ export const CostTable = ({ method }: Props) => {
   const [network] = useQueryString("network", "")
   const [networkName, setNetworkName] = useState<string>("")
 
+  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"
@@ -489,9 +490,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 {