From 33705f3014a922d8e0b827b32c6114f86e9e94cf Mon Sep 17 00:00:00 2001
From: simkasss <s.kastantinaviciute@gmail.com>
Date: Wed, 9 Aug 2023 12:15:18 +0300
Subject: [PATCH] improve getNetworkFromQueryString

---
 src/features/data/chains.test.ts             | 12 ++++++++----
 src/features/data/chains.ts                  |  7 +++++--
 src/features/vrf/v2/components/CostTable.tsx |  8 +++-----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/features/data/chains.test.ts b/src/features/data/chains.test.ts
index e04e7b3a0e9..0d0c7b3636c 100644
--- 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
index 4d83fa47b57..130b928f854 100644
--- 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
index 946718bed69..2260a23458c 100644
--- 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,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 {