Merge branch 'main' of https://github.com/interchain-name/icns-frontend into main

components/chain-list/all-chains-item.tsx

@@ -1,10 +1,15 @@
 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";
 import {
-  ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
   ChainName,
@@ -13,43 +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<SetStateAction<boolean>>;
-  chainItem: ChainItemType;
+  chainList: ChainItemType[];
+  checkedItems: Set<unknown>;
+  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}
       >
-        <ChainImageContainer width="3rem" height="3rem">
-          <ChainImage
-            src={chainItem.chainImageUrl}
-            fill={true}
-            alt={`${chainItem.prefix} chain image`}
-          />
-        </ChainImageContainer>
+        <ChainImage src={AllChainsIcon} fill={true} alt={`all chain images`} />
         <ChainInfoContainer>
-          <ChainName>{`.${chainItem.prefix}`}</ChainName>
-          <WalletAddress>{chainItem.address}</WalletAddress>
+          <ChainName>{`.all chains(${chainList.length})`}</ChainName>
+          <WalletAddress>
+            {chainList.map((chain) => chain.chainName).join(", ")}
+          </WalletAddress>
         </ChainInfoContainer>
 
         <Flex1 />
 
-        <Checkbox checked={allChecked} />
+        <Checkbox checked={checked} />
       </ChainItemContainer>
     </AllChainsContainer>
   );

components/chain-list/chain-image.tsx

@@ -21,6 +21,10 @@ export const ChainImage = ({ src, ...props }: ImageProps) => {
 };
 
 const ImageWrapper = styled.div`
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+
   img {
     border-radius: 50%;
   }

components/chain-list/chain-item.tsx

@@ -1,4 +1,4 @@
-import { ChainItemType, WidthHeightProps } from "../../types";
+import { ChainItemType } from "../../types";
 import { FunctionComponent, useEffect, useState } from "react";
 
 import color from "../../styles/color";
@@ -39,13 +39,11 @@ export const ChainItem: FunctionComponent<Props> = (props) => {
       checked={checked}
       onClick={checkHandler}
     >
-      <ChainImageContainer width="3rem" height="3rem">
       <ChainImage
         src={chainItem.chainImageUrl}
         fill={true}
         alt={`${chainItem.prefix} chain image`}
       />
-      </ChainImageContainer>
       <ChainInfoContainer>
         <ChainName>{`.${chainItem.prefix}`}</ChainName>
         <WalletAddress>{chainItem.address}</WalletAddress>
@@ -90,13 +88,6 @@ export const ChainItemContainer = styled.div<{
   }
 `;
 
-export const ChainImageContainer = styled.div<WidthHeightProps>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-
-  position: relative;
-`;
-
 export const ChainInfoContainer = styled.div`
   display: flex;
   flex-direction: column;

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 {
-    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> = (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) => (

components/skeleton/skeleton-chain-list.tsx

@@ -21,7 +21,6 @@ import {
 } from "../twitter-profile";
 import {
   ChainContainer,
-  ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
 } from "../chain-list";
@@ -60,9 +59,9 @@ export const SkeletonChainList: FunctionComponent = () => (
         .map((_, index) => (
           <div key={index}>
             <ChainItemContainer isLoading={true} isSkeleton={true}>
-              <ChainImageContainer width="3rem" height="3rem">
+              <SkeletonImageContainer>
                 <SkeletonCircle width="3rem" height="3rem" />
-              </ChainImageContainer>
+              </SkeletonImageContainer>
               <ChainInfoContainer>
                 <SkeletonText width="4rem" height="1rem" />
                 <SkeletonText width="12rem" height="1rem" />
@@ -93,6 +92,13 @@ const SkeletonTitle = styled.div`
   background-color: ${color.grey["800"]};
 `;
 
+const SkeletonImageContainer = styled.div`
+  width: 3rem;
+  height: 3rem;
+
+  position: relative;
+`;
+
 const SkeletonButtonContainer = styled.div`
   margin-top: 1.5rem;
 `;

pages/verification/index.tsx

@@ -32,7 +32,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 {
@@ -55,7 +54,7 @@ import {
   TWITTER_LOGIN_ERROR,
 } from "../../constants/error-message";
 import { makeClaimMessage, makeSetRecordMessage } from "../../messages";
-import Axios, { AxiosError } from "axios";
+import Axios from "axios";
 import { BackButton } from "../../components/back-button";
 
 export default function VerificationPage() {
@@ -73,9 +72,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("");
@@ -84,6 +80,45 @@ export default function VerificationPage() {
   const [isAgree, setIsAgree] = useState(false);
 
   useEffect(() => {
+    init();
+  }, []);
+
+  useEffect(() => {
+    if (wallet) {
+      window.addEventListener("keplr_keystorechange", async () => {
+        await init();
+      });
+    }
+  }, [wallet]);
+
+  useEffect(() => {
+    const disabledChainList = chainList.filter((chain) => {
+      for (const registeredChain of registeredChainList) {
+        if (
+          chain.prefix === registeredChain.bech32_prefix &&
+          chain.address === registeredChain.address
+        ) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
+    const filteredChainList = chainList.filter(
+      (chain) => !disabledChainList.includes(chain),
+    );
+
+    setChainList(filteredChainList);
+    setDisabledChainList(disabledChainList);
+
+    setCheckedItems(new Set(filteredChainList));
+  }, [registeredChainList]);
+
+  useEffect(() => {
+    setCheckedItems(new Set(chainList));
+  }, [chainList]);
+
   const init = async () => {
     if (window.location.search) {
       try {
@@ -135,49 +170,6 @@ export default function VerificationPage() {
     }
   };
 
-    init();
-  }, []);
-
-  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) {
-        if (
-          chain.prefix === registeredChain.bech32_prefix &&
-          chain.address === registeredChain.address
-        ) {
-          return true;
-        }
-      }
-
-      return false;
-    });
-
-    const filteredChainList = chainList.filter(
-      (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);
-  }, [registeredChainList]);
-
   const initWallet = async () => {
     const keplr = await getKeplrFromWindow();
 
@@ -351,10 +343,15 @@ export default function VerificationPage() {
     }
   };
 
-  const isRegisterButtonDisable =
-    checkedItems.size < 1 ||
-    (!isOwner && registeredChainList.length > 0) ||
-    !isAgree;
+  const isRegisterButtonDisable = (() => {
+    const hasCheckedItem = checkedItems.size > 0;
+
+    if (isOwner) {
+      return !hasCheckedItem;
+    } else {
+      return !(isAgree && hasCheckedItem);
+    }
+  })();
 
   return (
     <Container>
@@ -376,17 +373,15 @@ export default function VerificationPage() {
               />
             </ChainListTitleContainer>
 
-            {allChains && !searchValue ? (
+            {!searchValue ? (
               <AllChainsItem
-                allChecked={allChecked}
-                setAllChecked={setAllChecked}
-                chainItem={allChains}
+                chainList={chainList}
+                checkedItems={checkedItems}
+                setCheckedItems={setCheckedItems}
               />
             ) : null}
 
             <ChainList
-              allChecked={allChecked}
-              setAllChecked={setAllChecked}
               chainList={chainList.filter(
                 (chain) =>
                   chain.chainId.includes(searchValue) ||
@@ -403,6 +398,7 @@ export default function VerificationPage() {
               setCheckedItems={setCheckedItems}
             />
 
+            {!isOwner && (
               <AgreeContainer
                 onClick={() => {
                   setIsAgree(!isAgree);
@@ -411,7 +407,9 @@ export default function VerificationPage() {
                 <AgreeCheckBox type="checkbox" checked={isAgree} readOnly />I
                 check that Osmo is required for this transaction
               </AgreeContainer>
+            )}
 
+            {chainList.length > 0 && (
               <ButtonContainer disabled={isRegisterButtonDisable}>
                 <PrimaryButton
                   disabled={isRegisterButtonDisable}
@@ -420,6 +418,7 @@ export default function VerificationPage() {
                   Register
                 </PrimaryButton>
               </ButtonContainer>
+            )}
           </ContentContainer>
         )}
       </MainContainer>