diff --git a/components/chain-list/all-chains-item.tsx b/components/chain-list/all-chains-item.tsx index c501842..890b882 100644 --- a/components/chain-list/all-chains-item.tsx +++ b/components/chain-list/all-chains-item.tsx @@ -1,5 +1,11 @@ import { ChainItemType } from "../../types"; -import { Dispatch, FunctionComponent, SetStateAction } from "react"; +import { + Dispatch, + FunctionComponent, + SetStateAction, + useEffect, + useState, +} from "react"; import { ChainImage } from "./chain-image"; import { Flex1 } from "../../styles/flex-1"; @@ -12,41 +18,54 @@ import { import color from "../../styles/color"; import styled from "styled-components"; import { Checkbox } from "../checkbox"; +import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg"; interface Props { - allChecked: boolean; - setAllChecked: Dispatch>; - chainItem: ChainItemType; + chainList: ChainItemType[]; + checkedItems: Set; + setCheckedItems: Dispatch>>; } export const AllChainsItem: FunctionComponent = (props) => { - const { allChecked, setAllChecked, chainItem } = props; + const { chainList, checkedItems, setCheckedItems } = props; + + const [checked, setChecked] = useState(false); const checkHandler = () => { - setAllChecked(!allChecked); + if (checked) { + setCheckedItems(new Set()); + } else if (chainList.length !== checkedItems.size) { + setCheckedItems(new Set(chainList)); + } }; + useEffect(() => { + if (chainList.length === checkedItems.size && checkedItems.size !== 0) { + setChecked(true); + } else { + setChecked(false); + } + }, [checkedItems]); + return ( - + - {`.${chainItem.prefix}`} - {chainItem.address} + {`.all chains(${chainList.length})`} + + {chainList.map((chain) => chain.chainName).join(", ")} + - + ); diff --git a/components/chain-list/chain-list.tsx b/components/chain-list/chain-list.tsx index 9796425..805b241 100644 --- a/components/chain-list/chain-list.tsx +++ b/components/chain-list/chain-list.tsx @@ -5,8 +5,6 @@ import styled from "styled-components"; import { ChainItem } from "./chain-item"; interface Props { - allChecked: boolean; - setAllChecked: Dispatch>; chainList: ChainItemType[]; disabledChainList: ChainItemType[]; checkedItems: Set; @@ -14,14 +12,7 @@ interface Props { } export const ChainList: FunctionComponent = (props) => { - const { - allChecked, - setAllChecked, - chainList, - disabledChainList, - checkedItems, - setCheckedItems, - } = props; + const { chainList, disabledChainList, checkedItems, setCheckedItems } = props; const checkedItemHandler = (chainItem: ChainItemType, isChecked: boolean) => { const tempSet = new Set(checkedItems); @@ -35,22 +26,6 @@ export const ChainList: FunctionComponent = (props) => { setCheckedItems(tempSet); }; - useEffect(() => { - if (allChecked) { - setCheckedItems(new Set(chainList)); - } else if (chainList.length === checkedItems.size) { - setCheckedItems(new Set()); - } - }, [allChecked]); - - useEffect(() => { - if (chainList.length === checkedItems.size && checkedItems.size !== 0) { - setAllChecked(true); - } else { - setAllChecked(false); - } - }, [checkedItems]); - return ( {chainList.map((chainItem) => ( diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index 9c12881..7d5f6e4 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -30,7 +30,6 @@ import { } from "../../wallets"; import { ChainIdHelper } from "@keplr-wallet/cosmos"; -import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg"; import { AllChainsItem } from "../../components/chain-list/all-chains-item"; import { SearchInput } from "../../components/search-input"; import { @@ -71,9 +70,6 @@ export default function VerificationPage() { const [registeredChainList, setRegisteredChainList] = useState< RegisteredAddresses[] >([]); - - const [allChains, setAllChains] = useState(); - const [allChecked, setAllChecked] = useState(false); const [checkedItems, setCheckedItems] = useState(new Set()); const [searchValue, setSearchValue] = useState(""); @@ -88,21 +84,11 @@ export default function VerificationPage() { useEffect(() => { if (wallet) { window.addEventListener("keplr_keystorechange", async () => { - init(); + await init(); }); } }, [wallet]); - useEffect(() => { - setAllChains({ - chainId: "all chains", - chainName: "all chains", - prefix: `all chains(${chainList.length})`, - address: chainList.map((chain) => chain.chainName).join(", "), - chainImageUrl: AllChainsIcon, - }); - }, [chainList]); - useEffect(() => { const disabledChainList = chainList.filter((chain) => { for (const registeredChain of registeredChainList) { @@ -121,18 +107,16 @@ export default function VerificationPage() { (chain) => !disabledChainList.includes(chain), ); - setAllChains({ - chainId: "all chains", - chainName: "all chains", - prefix: `all chains(${filteredChainList.length})`, - address: filteredChainList.map((chain) => chain.chainName).join(", "), - chainImageUrl: AllChainsIcon, - }); - setChainList(filteredChainList); setDisabledChainList(disabledChainList); + + setCheckedItems(new Set(filteredChainList)); }, [registeredChainList]); + useEffect(() => { + setCheckedItems(new Set(chainList)); + }, [chainList]); + const init = async () => { if (window.location.search) { try { @@ -381,17 +365,15 @@ export default function VerificationPage() { /> - {allChains && !searchValue ? ( + {!searchValue ? ( ) : null} chain.chainId.includes(searchValue) ||