From bf0193692f337ef270cc3ed90cace4ceb3074ee3 Mon Sep 17 00:00:00 2001 From: apoorvlathey Date: Mon, 23 Jan 2023 19:02:27 +0530 Subject: [PATCH] upgrade network select dropdown to be searchable --- package.json | 1 + src/components/Body/index.tsx | 47 +++--- yarn.lock | 259 +++++++++++++++++++++++++++++++++- 3 files changed, 290 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 558227c..94bc622 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@types/react-dom": "^17.0.11", "@walletconnect/client": "^1.6.2", "axios": "^0.24.0", + "chakra-react-select": "^4.4.3", "ethereum-checksum-address": "^0.0.6", "ethers": "^5.4.5", "framer-motion": "^4", diff --git a/src/components/Body/index.tsx b/src/components/Body/index.tsx index 69e104f..0157b75 100644 --- a/src/components/Body/index.tsx +++ b/src/components/Body/index.tsx @@ -55,6 +55,7 @@ import { DeleteIcon, CloseIcon, } from "@chakra-ui/icons"; +import { Select as RSelect, SingleValue } from "chakra-react-select"; import WalletConnect from "@walletconnect/client"; import { IClientMeta } from "@walletconnect/types"; import { ethers } from "ethers"; @@ -70,6 +71,11 @@ interface SafeDappInfo { iconUrl: string; } +interface SelectedNetworkOption { + label: string; + value: number; +} + const slicedText = (txt: string) => { return txt.length > 6 ? `${txt.slice(0, 4)}...${txt.slice(txt.length - 2, txt.length)}` @@ -141,6 +147,12 @@ function Body() { const [isAddressValid, setIsAddressValid] = useState(true); const [uri, setUri] = useState(""); const [networkIndex, setNetworkIndex] = useState(networkIndexViaURL); + const [selectedNetworkOption, setSelectedNetworkOption] = useState< + SingleValue + >({ + label: networkInfo[networkIndexViaURL].name, + value: networkIndexViaURL, + }); const [connector, setConnector] = useState(); const [peerMeta, setPeerMeta] = useState(); const [isConnected, setIsConnected] = useState(false); @@ -210,6 +222,10 @@ function Body() { setTenderlyForkId(storedTenderlyForkId ? storedTenderlyForkId : ""); }, []); + useEffect(() => { + updateNetwork((selectedNetworkOption as SelectedNetworkOption).value); + }, [selectedNetworkOption]); + useEffect(() => { if (provider && addressFromURL && urlFromURL) { initIFrame(); @@ -696,22 +712,21 @@ function Body() { )} - + + ({ + label: network.name, + value: i, + }))} + value={selectedNetworkOption} + onChange={setSelectedNetworkOption} + size="md" + placeholder="Select chain..." + tagVariant="solid" + closeMenuOnSelect + useBasicStyles + /> +