diff --git a/src/pages/Network/Network.tsx b/src/pages/Network/Network.tsx index 01edba2..53d30e8 100644 --- a/src/pages/Network/Network.tsx +++ b/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() { 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() } diff --git a/src/state/chains/chain.state.ts b/src/state/chains/chain.state.ts index d60bd00..518a472 100644 --- a/src/state/chains/chain.state.ts +++ b/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 { diff --git a/src/state/chains/networks/index.ts b/src/state/chains/networks/index.ts index b4c8e85..84f69f2 100644 --- a/src/state/chains/networks/index.ts +++ b/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]