Fix all chains logic

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;
+  chainList: ChainItemType[];
-  setAllChecked: Dispatch<SetStateAction<boolean>>;
+  checkedItems: Set<unknown>;
-  chainItem: ChainItemType;
+  setCheckedItems: Dispatch<SetStateAction<Set<unknown>>>;
 }
 
 export const AllChainsItem: FunctionComponent<Props> = (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 (
     <AllChainsContainer>
       <ChainItemContainer
-        key={chainItem.prefix}
+        key="all chains"
         isLoading={false}
-        checked={allChecked}
+        checked={checked}
         onClick={checkHandler}
       >
-        <ChainImage
+        <ChainImage src={AllChainsIcon} fill={true} alt={`all chain images`} />
-          src={chainItem.chainImageUrl}
-          fill={true}
-          alt={`${chainItem.prefix} chain image`}
-        />
         <ChainInfoContainer>
-          <ChainName>{`.${chainItem.prefix}`}</ChainName>
+          <ChainName>{`.all chains(${chainList.length})`}</ChainName>
-          <WalletAddress>{chainItem.address}</WalletAddress>
+          <WalletAddress>
+            {chainList.map((chain) => chain.chainName).join(", ")}
+          </WalletAddress>
         </ChainInfoContainer>
 
         <Flex1 />
 
-        <Checkbox checked={allChecked} />
+        <Checkbox checked={checked} />
       </ChainItemContainer>
     </AllChainsContainer>
   );

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<SetStateAction<boolean>>;
   chainList: ChainItemType[];
   disabledChainList: ChainItemType[];
   checkedItems: Set<unknown>;
@@ -14,14 +12,7 @@ interface Props {
 }
 
 export const ChainList: FunctionComponent<Props> = (props) => {
-  const {
+  const { chainList, disabledChainList, checkedItems, setCheckedItems } = props;
-    allChecked,
-    setAllChecked,
-    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> = (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 (
     <ChainContainer color={color.grey["900"]}>
       {chainList.map((chainItem) => (

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<ChainItemType>();
-  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() {
               />
             </ChainListTitleContainer>
 
-            {allChains && !searchValue ? (
+            {!searchValue ? (
               <AllChainsItem
-                allChecked={allChecked}
+                chainList={chainList}
-                setAllChecked={setAllChecked}
+                checkedItems={checkedItems}
-                chainItem={allChains}
+                setCheckedItems={setCheckedItems}
               />
             ) : null}
 
             <ChainList
-              allChecked={allChecked}
-              setAllChecked={setAllChecked}
               chainList={chainList.filter(
                 (chain) =>
                   chain.chainId.includes(searchValue) ||