diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx index e9193bb..91dce56 100644 --- a/components/chainSelect/ChainSelect.tsx +++ b/components/chainSelect/ChainSelect.tsx @@ -1,6 +1,7 @@ import { StargateClient } from "@cosmjs/stargate"; import { assert } from "@cosmjs/utils"; import axios from "axios"; +import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import { useAppContext } from "../../context/AppContext"; import GearIcon from "../icons/Gear"; @@ -41,13 +42,15 @@ const chainsUrl = "https://api.github.com/repos/cosmos/chain-registry/contents"; const testnetsUrl = "https://api.github.com/repos/cosmos/chain-registry/contents/testnets"; const ChainSelect = () => { + const router = useRouter(); const { state, dispatch } = useAppContext(); // UI State const [chainArray, setChainArray] = useState([]); const [chainOptions, setChainOptions] = useState([]); const [chainError, setChainError] = useState(null); - const [showSettings, setShowSettings] = useState(false); + const [showAuxView, setShowAuxView] = useState(null); + const [storedOption, setStoredOption] = useState(null); const [selectValue, setSelectValue] = useState({ label: "Loading...", value: -1 }); // Chain State @@ -90,7 +93,7 @@ const ChainSelect = () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (error: any) { console.log(error); - setShowSettings(true); + setShowAuxView("settings"); setChainError(error.message); } }, [state.chain.registryName]); @@ -167,7 +170,7 @@ const ChainSelect = () => { }, }); - setShowSettings(false); + setShowAuxView(null); } catch (error) { if (error instanceof Error) { setChainError(error.message); @@ -176,7 +179,7 @@ const ChainSelect = () => { } console.error("Error getting chain info", error); - setShowSettings(true); + setShowAuxView("settings"); } }; @@ -206,12 +209,34 @@ const ChainSelect = () => { throw new Error("No RPC nodes available for this chain"); }; - const onChainSelect = (option: ChainOption) => { + const changeChain = (option: ChainOption) => { const index = chainOptions.findIndex((opt) => opt.label === option.label); setSelectValue(chainOptions[index]); getChainInfo(chainArray[option.value]); }; + const onChainSelect = (option: ChainOption) => { + if (router.pathname !== "/" && option.label !== selectValue.label) { + setStoredOption(option); + setShowAuxView("confirmRedirect"); + return; + } + + changeChain(option); + setStoredOption(null); + }; + + const redirectAndChangeChain = () => { + setShowAuxView(null); + + if (storedOption) { + changeChain(storedOption); + setStoredOption(null); + } + + router.push("/"); + }; + const setChainFromForm = async () => { setChainError(null); try { @@ -239,11 +264,11 @@ const ChainSelect = () => { assert(tempRegistryName, "tempRegistryName missing"); const selectedOption = findExistingOption(chainOptions, tempRegistryName); setSelectValue(selectedOption); - setShowSettings(false); + setShowAuxView(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (error: any) { console.log(error); - setShowSettings(true); + setShowAuxView("settings"); setChainError(error.message); } }; @@ -261,17 +286,23 @@ const ChainSelect = () => { name="chain-select" /> - {showSettings ? ( - ) : ( - )} - {showSettings && ( + {showAuxView === "settings" ? ( <> {chainError &&

{chainError}

} @@ -356,7 +387,16 @@ const ChainSelect = () => {