Merge pull request #25 from polkadot-api/fix/custom-network-on-uri

fix custom network on URI

src/pages/Network/Network.tsx

@@ -24,26 +24,19 @@ import { Label } from "@/components/ui/label"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import {
+  isValidUri,
   Network,
   networkCategories,
   onChangeChain,
   SelectedChain,
   selectedChain$,
 } from "@/state/chains/chain.state"
+import { addCustomNetwork, getCustomNetwork } from "@/state/chains/networks"
 import { useStateObservable } from "@react-rxjs/core"
 import { useCommandState } from "cmdk"
 import { Check, ChevronDown } from "lucide-react"
 import { FC, useEffect, useRef, useState } from "react"
 
-const isValidUri = (input: string): boolean => {
-  try {
-    new URL(input)
-  } catch {
-    return false
-  }
-  return true
-}
-
 const EmptyOption: React.FC<{
   enteredText: string
   selectedNetwork: Network
@@ -114,6 +107,7 @@ export function NetworkSwitcher() {
         </Button>
       </DialogTrigger>
       <NetworkSwitchDialogContent
+        key={selectedChain.endpoint}
         selectedChain={selectedChain}
         onClose={() => setOpen(false)}
       />
@@ -148,10 +142,16 @@ const NetworkSwitchDialogContent: FC<{
   }
 
   const handleConfirm = () => {
-    onChangeChain({
-      network: selectedNetwork,
-      endpoint: selectedRpc,
-    })
+    if (selectedNetwork.id === "custom-network") {
+      addCustomNetwork(selectedRpc)
+      onChangeChain({ network: getCustomNetwork(), endpoint: selectedRpc })
+      setEnteredText("")
+    } else {
+      onChangeChain({
+        network: selectedNetwork,
+        endpoint: selectedRpc,
+      })
+    }
     onClose()
   }
 

src/state/chains/chain.state.ts

@@ -18,7 +18,13 @@ import {
   switchMap,
   tap,
 } from "rxjs"
-import { defaultNetwork, Network, networkCategories } from "./networks"
+import {
+  addCustomNetwork,
+  defaultNetwork,
+  getCustomNetwork,
+  Network,
+  networkCategories,
+} from "./networks"
 import {
   createSmoldotSource,
   getSmoldotProvider,
@@ -64,23 +70,39 @@ selectedChainChanged$.subscribe(({ network, endpoint }) =>
     endpoint,
   }),
 )
-const getDefaultChain = (): SelectedChain => {
-  const findNetwork = (networkId: string) => {
-    for (const { networks } of networkCategories) {
-      for (const network of networks) {
-        if (network.id === networkId) {
-          return network
-        }
-      }
-    }
-    return null
+
+const allNetworks = networkCategories.map((x) => x.networks).flat()
+const findNetwork = (networkId: string): Network | undefined =>
+  allNetworks.find((x) => x.id == networkId)
+
+export const isValidUri = (input: string): boolean => {
+  try {
+    new URL(input)
+  } catch {
+    return false
   }
+  return true
+}
+
+const defaultSelectedChain: SelectedChain = {
+  network: defaultNetwork,
+  endpoint: "light-client",
+}
+const getDefaultChain = (): SelectedChain => {
   const hashParams = getHashParams()
   if (hashParams.has("networkId") && hashParams.has("endpoint")) {
-    const network = findNetwork(hashParams.get("networkId")!)
-    if (network) {
-      return { network, endpoint: hashParams.get("endpoint")! }
+    const networkId = hashParams.get("networkId")!
+    const endpoint = hashParams.get("endpoint")!
+    if (networkId === "custom") {
+      if (!isValidUri(endpoint)) return defaultSelectedChain
+      addCustomNetwork(endpoint)
+      return {
+        network: getCustomNetwork(),
+        endpoint,
+      }
     }
+    const network = findNetwork(networkId)
+    if (network) return defaultSelectedChain
   }
 
   return {

src/state/chains/networks/index.ts

@@ -38,13 +38,13 @@ const networks = {
   Kusama,
   Paseo,
   Westend,
-  Development: [
+  Custom: [
     {
-      id: "localhost",
-      display: "Localhost",
+      id: "custom",
+      display: "Custom",
       lightclient: false,
       endpoints: {
-        "Local (ws://127.0.0.1:9944)": "ws://127.0.0.1:9944",
+        "ws://127.0.0.1:9944": "ws://127.0.0.1:9944",
       },
     } as Network,
   ],
@@ -54,4 +54,9 @@ export const networkCategories: NetworkCategory[] = Object.entries(
   networks,
 ).map(([name, networks]) => ({ name, networks }))
 
+export const getCustomNetwork = () => networks.Custom[0]
+export const addCustomNetwork = (uri: string) => {
+  getCustomNetwork().endpoints[uri] = uri
+}
+
 export const defaultNetwork = Polkadot[0]