Show warning message if the account is not owner of name

# Conflicts:
#	.pnp.cjs
#	package.json
#	yarn.lock

.gitignore

@@ -49,4 +49,6 @@ build
 .sentryclirc
 
 # Intelij files
-.idea
+.idea
+# Sentry
+.sentryclirc

components/back-button/index.tsx

@@ -0,0 +1,61 @@
+import { FunctionComponent } from "react";
+import styled from "styled-components";
+import color from "../../styles/color";
+
+import ArrowLeftIcon from "../../public/images/svg/arrow-left.svg";
+import Image from "next/image";
+
+export const BackButton: FunctionComponent = () => {
+  return (
+    <Container
+      onClick={() => {
+        location.href = "/";
+      }}
+    >
+      <ContentContainer>
+        <IconContainer>
+          <Image
+            src={ArrowLeftIcon}
+            fill={true}
+            sizes="1rem"
+            alt="arrow left icon"
+          />
+        </IconContainer>
+        <div>BACK</div>
+      </ContentContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  width: 100%;
+  padding: 0.7rem 0.5rem;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+
+  color: ${color.grey["400"]};
+
+  cursor: pointer;
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.25rem;
+`;
+
+const IconContainer = styled.div`
+  position: relative;
+
+  width: 1rem;
+  height: 1rem;
+`;

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

@@ -0,0 +1,78 @@
+import { ChainItemType } from "../../types";
+import {
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
+
+import { ChainImage } from "./chain-image";
+import { Flex1 } from "../../styles/flex-1";
+import {
+  ChainInfoContainer,
+  ChainItemContainer,
+  ChainName,
+  WalletAddress,
+} from "./chain-item";
+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 {
+  chainList: ChainItemType[];
+  checkedItems: Set<unknown>;
+  setCheckedItems: Dispatch<SetStateAction<Set<unknown>>>;
+}
+
+export const AllChainsItem: FunctionComponent<Props> = (props) => {
+  const { chainList, checkedItems, setCheckedItems } = props;
+
+  const [checked, setChecked] = useState(false);
+
+  const checkHandler = () => {
+    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="all chains"
+        isLoading={false}
+        checked={checked}
+        onClick={checkHandler}
+      >
+        <ChainImage src={AllChainsIcon} fill={true} alt={`all chain images`} />
+        <ChainInfoContainer>
+          <ChainName>{`.all chains(${chainList.length})`}</ChainName>
+          <WalletAddress>
+            {chainList.map((chain) => chain.chainName).join(", ")}
+          </WalletAddress>
+        </ChainInfoContainer>
+
+        <Flex1 />
+
+        <Checkbox checked={checked} />
+      </ChainItemContainer>
+    </AllChainsContainer>
+  );
+};
+
+const AllChainsContainer = styled.div`
+  width: 100%;
+
+  background-color: ${color.grey["900"]};
+`;

components/chain-list/chain-image.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import Image, { ImageProps } from "next/image";
+
+import ICNSLogo from "../../public/images/icns-logo-120x120.png";
+import styled from "styled-components";
+
+export const ChainImage = ({ src, ...props }: ImageProps) => {
+  const [srcState, setSrcState] = useState(src);
+
+  return (
+    <ImageWrapper>
+      <Image
+        {...props}
+        src={srcState}
+        alt="chain image"
+        sizes="3rem"
+        onError={() => setSrcState(ICNSLogo)}
+      />
+    </ImageWrapper>
+  );
+};
+
+const ImageWrapper = styled.div`
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+
+  img {
+    border-radius: 50%;
+  }
+`;

components/chain-list/chain-item.tsx

@@ -1,60 +1,147 @@
-import { AccountInfo } from "../../types";
-import { FunctionComponent } from "react";
-import {
-  ChainImageContainer,
-  ChainInfoContainer,
-  ChainItemContainer,
-} from "./chain-list";
+import { ChainItemType, DisabledChainItemType } from "../../types";
+import { FunctionComponent, useEffect, useState } from "react";
 
-import Image from "next/image";
 import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
 import styled from "styled-components";
+import { ChainImage } from "./chain-image";
+import { Checkbox } from "../checkbox";
 
 interface Props {
-  chainInfo: AccountInfo;
+  chainItem: ChainItemType | DisabledChainItemType;
+  checkedItemHandler: (chainItem: ChainItemType, isChecked: boolean) => void;
+  checkedItems: Set<unknown>;
 }
 
 export const ChainItem: FunctionComponent<Props> = (props) => {
-  const { chainInfo } = props;
+  const { chainItem, checkedItemHandler, checkedItems } = props;
+  const disabled = "disabled" in chainItem && chainItem.disabled;
+  // XXX: Currently, this component can't handle `checked` state well,
+  //      If chain is disabled, it should be disabled in general.
+  //      However, if it is disabled due to the limitation of ethermint and ledger,
+  //      it should be not checked.
+  //      To solve this problem, for now, just use dumb way.
+  //      If chain is disabled with explicit reason, it should be unchecked.
+  const [checked, setChecked] = useState(!!disabled && !chainItem.reason);
+
+  useEffect(() => {
+    if (disabled) {
+      if (chainItem.reason) {
+        setChecked(false);
+      } else {
+        setChecked(true);
+      }
+    }
+  }, [chainItem, disabled]);
+
+  const checkHandler = () => {
+    if (!disabled) {
+      setChecked(!checked);
+      checkedItemHandler(chainItem, !checked);
+    }
+  };
+
+  useEffect(() => {
+    if (!disabled) {
+      setChecked(checkedItems.has(chainItem));
+    }
+  }, [checkedItems]);
+
   return (
-    <ChainItemContainer key={chainInfo.prefix} isLoading={false}>
-      <ChainImageContainer width="3rem" height="3rem">
-        <Image
-          src={chainInfo.chainImageUrl}
-          fill={true}
-          alt={`${chainInfo.prefix} chain image`}
-        />
-      </ChainImageContainer>
+    <ChainItemContainer
+      key={chainItem.prefix}
+      isLoading={false}
+      disabled={disabled}
+      checked={checked}
+      onClick={checkHandler}
+    >
+      <ChainImage
+        src={chainItem.chainImageUrl}
+        fill={true}
+        alt={`${chainItem.prefix} chain image`}
+      />
       <ChainInfoContainer>
-        <ChainName>{`.${chainInfo.prefix}`}</ChainName>
-        <WalletAddress>{chainInfo.address}</WalletAddress>
+        <ChainName>{`.${chainItem.prefix}`}</ChainName>
+        {chainItem.address ? (
+          <WalletAddress>{chainItem.address}</WalletAddress>
+        ) : null}
+        {disabled && chainItem.reason ? (
+          <DisabledReason>{chainItem.reason.message}</DisabledReason>
+        ) : null}
       </ChainInfoContainer>
 
       <Flex1 />
 
-      <ChainCheckBox />
+      <Checkbox checked={checked} />
     </ChainItemContainer>
   );
 };
 
-const ChainName = styled.div`
+export const ChainItemContainer = styled.div<{
+  isLoading: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  isSkeleton?: boolean;
+}>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 1rem;
+
+  padding: 1.5rem;
+
+  cursor: pointer;
+
+  opacity: ${(props) => (props.disabled ? "0.5" : "1")};
+
+  background-color: ${(props) =>
+    props.disabled
+      ? color.black
+      : props.checked
+      ? color.grey["800"]
+      : props.isSkeleton
+      ? color.grey["800"]
+      : color.grey["900"]};
+
+  &:hover {
+    background: ${(props) => (props.isLoading ? null : color.grey["700"])};
+  }
+`;
+
+export const ChainInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const ChainName = styled.div`
   font-weight: 600;
   font-size: 0.8rem;
   line-height: 1rem;
 
-  color: ${color.grey["100"]};
+  color: ${color.white};
 `;
 
-const WalletAddress = styled.div`
+export const WalletAddress = styled.div`
   font-weight: 500;
   font-size: 0.8rem;
   line-height: 1rem;
 
+  max-height: 2rem;
+  max-width: 27rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   color: ${color.grey["400"]};
 `;
 
-const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
-  width: 1.5rem;
-  height: 1.5rem;
+export const DisabledReason = styled.div`
+  color: ${color.grey["200"]};
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
 `;

components/chain-list/chain-list.tsx

@@ -1,19 +1,48 @@
-import { FunctionComponent } from "react";
-import { AccountInfo, WidthHeightProps } from "../../types";
+import { Dispatch, FunctionComponent, SetStateAction, useEffect } from "react";
+import { ChainItemType, DisabledChainItemType } from "../../types";
 import color from "../../styles/color";
 import styled from "styled-components";
 import { ChainItem } from "./chain-item";
 
 interface Props {
-  chainList: AccountInfo[];
+  chainList: ChainItemType[];
+  disabledChainList: DisabledChainItemType[];
+  checkedItems: Set<unknown>;
+  setCheckedItems: Dispatch<SetStateAction<Set<unknown>>>;
 }
 
 export const ChainList: FunctionComponent<Props> = (props) => {
-  const { chainList } = props;
+  const { chainList, disabledChainList, checkedItems, setCheckedItems } = props;
+
+  const checkedItemHandler = (chainItem: ChainItemType, isChecked: boolean) => {
+    const tempSet = new Set(checkedItems);
+
+    if (isChecked) {
+      tempSet.add(chainItem);
+    } else if (!isChecked && checkedItems.has(chainItem)) {
+      tempSet.delete(chainItem);
+    }
+
+    setCheckedItems(tempSet);
+  };
+
   return (
-    <ChainContainer color={color.grey["800"]}>
-      {chainList.map((chainInfo) => (
-        <ChainItem key={chainInfo.prefix} chainInfo={chainInfo} />
+    <ChainContainer color={color.grey["900"]}>
+      {chainList.map((chainItem) => (
+        <ChainItem
+          key={chainItem.chainId}
+          chainItem={chainItem}
+          checkedItemHandler={checkedItemHandler}
+          checkedItems={checkedItems}
+        />
+      ))}
+      {disabledChainList.map((chainItem) => (
+        <ChainItem
+          key={chainItem.chainId}
+          chainItem={chainItem}
+          checkedItemHandler={checkedItemHandler}
+          checkedItems={checkedItems}
+        />
       ))}
     </ChainContainer>
   );
@@ -23,37 +52,10 @@ export const ChainContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: 33rem;
+  //max-height: 33rem;
   overflow: scroll;
 
+  flex: 1;
+
   background-color: ${(props) => props.color};
 `;
-
-export const ChainItemContainer = styled.div<{ isLoading: boolean }>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 1rem;
-
-  padding: 1.5rem;
-
-  cursor: pointer;
-
-  &:hover {
-    background: ${(props) => (props.isLoading ? null : color.grey["700"])};
-  }
-`;
-
-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;
-  gap: 0.5rem;
-`;

components/checkbox/index.tsx

@@ -0,0 +1,70 @@
+import { FunctionComponent } from "react";
+import color from "../../styles/color";
+import styled from "styled-components";
+
+export const Checkbox: FunctionComponent<{ checked: boolean }> = ({
+  checked,
+}) => {
+  return (
+    <ChainCheckBoxContainer>
+      <ChainCheckBoxHidden checked={checked} readOnly={true} />
+      <ChainCheckBoxStyled checked={checked}>
+        <Center>
+          <Icon width="18" height="14" viewBox="0 0 15 12">
+            <path
+              strokeLinecap="square"
+              strokeWidth="2"
+              d="M2.25 4.426l4.083 5.011 6.417-7.874"
+            />
+          </Icon>
+        </Center>
+      </ChainCheckBoxStyled>
+    </ChainCheckBoxContainer>
+  );
+};
+
+const Center = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Icon = styled.svg`
+  fill: none;
+  stroke: ${color.orange["50"]};
+`;
+
+const ChainCheckBoxContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const ChainCheckBoxStyled = styled.div<{ checked: boolean }>`
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: ${(props) => (props.checked ? "none" : "2px solid #868686")};
+  background: ${(props) =>
+    props.checked ? color.orange["200"] : color.grey["400"]};
+
+  ${Icon} {
+    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
+  }
+`;
+
+const ChainCheckBoxHidden = styled.input.attrs({ type: "checkbox" })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;

components/connect-wallet-modal/index.ts

@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./wallet-item";

components/connect-wallet-modal/index.tsx

@@ -1,74 +0,0 @@
-import { FunctionComponent } from "react";
-import ReactModal from "react-modal";
-import styled from "styled-components";
-import color from "../../styles/color";
-import { WalletList } from "../../constants/wallet";
-import { WalletItem } from "./wallet-item";
-
-interface Props {
-  isModalOpen: boolean;
-  onCloseModal: () => void;
-}
-
-export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
-  const { isModalOpen, onCloseModal } = props;
-
-  return (
-    <ReactModal
-      isOpen={isModalOpen}
-      onRequestClose={onCloseModal}
-      style={{
-        overlay: { background: "#181818b3" },
-        content: {
-          top: "50%",
-          left: "50%",
-          right: "auto",
-          bottom: "auto",
-          padding: 0,
-          marginRight: "-50%",
-          transform: "translate(-50%, -50%)",
-          background: color.grey["800"],
-          border: 0,
-        },
-      }}
-    >
-      <ModalContainer>
-        <ModalTitle>Connect Wallet</ModalTitle>
-        <ModalDescription>
-          Plz check which account is selected after you connect it
-        </ModalDescription>
-
-        {WalletList.map((walletItem) => {
-          return <WalletItem wallet={walletItem} key={walletItem.name} />;
-        })}
-      </ModalContainer>
-    </ReactModal>
-  );
-};
-
-const ModalContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.9rem;
-  padding: 2.2rem;
-`;
-
-const ModalTitle = styled.div`
-  font-family: "Inter", serif;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 1.8rem;
-
-  color: ${color.white};
-`;
-
-const ModalDescription = styled.div`
-  font-family: "Inter", serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
-  line-height: 1.1rem;
-
-  color: ${color.grey["400"]};
-`;

components/connect-wallet-modal/modal.tsx

@@ -1,7 +1,9 @@
-import ReactModal from "react-modal";
 import { FunctionComponent } from "react";
+import ReactModal from "react-modal";
 import styled from "styled-components";
 import color from "../../styles/color";
+import { WalletList } from "../../constants/wallet";
+import { WalletItem } from "./wallet-item";
 
 interface Props {
   isModalOpen: boolean;
@@ -15,8 +17,9 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
     <ReactModal
       isOpen={isModalOpen}
       onRequestClose={onCloseModal}
+      ariaHideApp={false}
       style={{
-        overlay: { background: "#181818b3" },
+        overlay: { background: "#121212cc" },
         content: {
           top: "50%",
           left: "50%",
@@ -36,35 +39,9 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
           Plz check which account is selected after you connect it
         </ModalDescription>
 
-        {/*<ChainConnectItem>*/}
-        {/*  <ChainConnectIcon>*/}
-        {/*    <Image src={KeplrIcon} fill={true} alt="Keplr Icon" />*/}
-        {/*  </ChainConnectIcon>*/}
-        {/*  <ChainConnectContentContainer>*/}
-        {/*    <ChainConnectContentTitle>Keplr</ChainConnectContentTitle>*/}
-        {/*  </ChainConnectContentContainer>*/}
-
-        {/*  <Flex1 />*/}
-
-        {/*  <Image src={ArrowRightIcon} alt="arrow right icon" />*/}
-        {/*</ChainConnectItem>*/}
-
-        {/*<ChainConnectItem>*/}
-        {/*  <ChainConnectIcon>*/}
-        {/*    <Image src={CosmostationIcon} fill={true} alt="Cosmostation Icon" />*/}
-        {/*  </ChainConnectIcon>*/}
-
-        {/*  <ChainConnectContentContainer>*/}
-        {/*    <ChainConnectContentTitle>Cosmostation</ChainConnectContentTitle>*/}
-
-        {/*    <ChainConnectContentDescription>*/}
-        {/*      Coming soon*/}
-        {/*    </ChainConnectContentDescription>*/}
-        {/*  </ChainConnectContentContainer>*/}
-        {/*  <Flex1 />*/}
-
-        {/*  <Image src={ArrowRightIcon} alt="arrow right icon" />*/}
-        {/*</ChainConnectItem>*/}
+        {WalletList.map((walletItem) => {
+          return <WalletItem wallet={walletItem} key={walletItem.name} />;
+        })}
       </ModalContainer>
     </ReactModal>
   );
@@ -75,6 +52,8 @@ const ModalContainer = styled.div`
   flex-direction: column;
   gap: 0.9rem;
   padding: 2.2rem;
+
+  min-width: 28rem;
 `;
 
 const ModalTitle = styled.div`

components/connect-wallet-modal/wallet-item.tsx

@@ -1,11 +1,22 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import ArrowRightIcon from "../../public/images/svg/arrow-right.svg";
 import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
 import styled from "styled-components";
 import Image from "next/image";
-import { WalletType } from "../../constants/wallet";
-import { TwitterAuthUrlResponse } from "../../types";
+import {
+  MINIMUM_VERSION,
+  SELECTED_WALLET_KEY,
+  WALLET_INSTALL_URL,
+  WalletType,
+} from "../../constants/wallet";
+import { getKeplrFromWindow, KeplrWallet } from "../../wallets";
+import { loginWithTwitter } from "../../queries";
+import {
+  KEPLR_NOT_FOUND_ERROR,
+  KEPLR_VERSION_ERROR,
+} from "../../constants/error-message";
+import semver from "semver/preload";
 
 interface Props {
   wallet: WalletType;
@@ -13,23 +24,64 @@ interface Props {
 
 export const WalletItem: FunctionComponent<Props> = (props: Props) => {
   const { wallet } = props;
+  const [isInstalled, setIsInstalled] = useState<boolean>();
+
+  useEffect(() => {
+    setIsInstalled(!!window.keplr);
+  }, []);
 
   const onClickWalletItem = async () => {
-    const { authUrl }: TwitterAuthUrlResponse = await (
-      await fetch("/api/twitter-auth-url")
-    ).json();
+    try {
+      if (wallet.name === "Keplr") {
+        await connectKeplr();
+        localStorage.setItem(SELECTED_WALLET_KEY, wallet.name);
+      }
 
-    window.location.href = authUrl;
+      await loginWithTwitter();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const connectKeplr = async () => {
+    const keplr = await getKeplrFromWindow();
+
+    if (keplr === undefined) {
+      window.location.href = WALLET_INSTALL_URL;
+      throw new Error(KEPLR_NOT_FOUND_ERROR);
+    }
+
+    if (semver.lt(keplr.version, MINIMUM_VERSION)) {
+      throw new Error(KEPLR_VERSION_ERROR);
+    }
+
+    if (keplr) {
+      const wallet = new KeplrWallet(keplr);
+      const chainIds = (await wallet.getChainInfosWithoutEndpoints()).map(
+        (c) => c.chainId,
+      );
+
+      await wallet.init(chainIds);
+    }
   };
 
   return (
     <WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}>
       <WalletIcon>
-        <Image src={wallet.image} fill={true} alt="wallet Icon" />
+        <Image
+          src={wallet.image}
+          fill={true}
+          sizes="3.75rem"
+          alt="wallet Icon"
+        />
       </WalletIcon>
       <WalletContentContainer>
         <WalletName>{wallet.name}</WalletName>
-        {wallet.isReady ? null : (
+        {wallet.isReady ? (
+          isInstalled ? null : (
+            <WalletDescription>Go to install Keplr Extension</WalletDescription>
+          )
+        ) : (
           <WalletDescription>Comming soon</WalletDescription>
         )}
       </WalletContentContainer>

components/error-boundary/index.tsx

@@ -0,0 +1,43 @@
+import { captureException } from "@sentry/nextjs";
+import Link from "next/link";
+import { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+
+    captureException(error);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <h1>
+          Oops.. there is something wrong.
+          <br /> Please try again. <Link href="/">Go to home</Link>
+        </h1>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

components/final-check-modal/index.tsx

@@ -0,0 +1,300 @@
+import { FunctionComponent } from "react";
+import color from "../../styles/color";
+import ReactModal from "react-modal";
+import styled from "styled-components";
+import TwitterIcon from "../../public/images/svg/twitter-modal-icon.svg";
+import Image from "next/image";
+import { PrimaryButton } from "../primary-button";
+import { SecondaryButton } from "../secondary-button";
+import { MINIMUM_OSMO_FEE } from "../../constants/wallet";
+import { useRouter } from "next/router";
+import { Bech32Address } from "@keplr-wallet/cosmos";
+
+interface Props {
+  twitterUserName: string | undefined;
+  walletInfo:
+    | { name: string; pubKey: Uint8Array; bech32Address: string }
+    | undefined;
+  isModalOpen: boolean;
+  onCloseModal: () => void;
+  onClickRegisterButton: () => Promise<void>;
+  isLoadingRegistration?: boolean;
+}
+
+export const FinalCheckModal: FunctionComponent<Props> = (props) => {
+  const {
+    twitterUserName,
+    walletInfo,
+    isModalOpen,
+    onCloseModal,
+    onClickRegisterButton,
+    isLoadingRegistration,
+  } = props;
+  const router = useRouter();
+
+  return (
+    <ReactModal
+      isOpen={isModalOpen}
+      onRequestClose={onCloseModal}
+      ariaHideApp={false}
+      style={{
+        overlay: { background: "#121212cc" },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          padding: 0,
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          background: color.grey["800"],
+          border: 0,
+        },
+      }}
+    >
+      <ModalContainer>
+        <ModalTitle>Final Checks</ModalTitle>
+        <ModalDescription>{`You are claiming the ICNS name ${twitterUserName} on main keplr account`}</ModalDescription>
+
+        <NameBox
+          marginTop="3.875rem"
+          icon={
+            <Image
+              src={require("../../public/images/icons/twitter-small.png")}
+              alt="twitter"
+              width={24}
+              height={24}
+              style={{
+                marginRight: "4px",
+              }}
+            />
+          }
+          title="Your Twitter ID"
+          content={`@${twitterUserName}`}
+        />
+        <div
+          style={{
+            width: "100%",
+            height: "3.625rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            fill="none"
+            viewBox="0 0 48 48"
+          >
+            <path
+              stroke="#EBEBEB"
+              strokeLinecap="round"
+              strokeWidth="2"
+              d="M18.44 19.008h-2.656a5.162 5.162 0 00-5.162 5.162v0a5.162 5.162 0 005.162 5.162h2.655M29.305 28.988h2.655a5.162 5.162 0 005.162-5.162v0a5.162 5.162 0 00-5.162-5.162h-2.655M19.295 24.242h9.155"
+            />
+          </svg>
+        </div>
+        <NameBox
+          marginTop="0"
+          icon={
+            <Image
+              src={require("../../public/images/icons/keplr-small.png")}
+              alt="twitter"
+              width={20}
+              height={20}
+              style={{
+                marginRight: "8px",
+              }}
+            />
+          }
+          title="Main Keplr Account"
+          content={Bech32Address.shortenAddress(
+            walletInfo?.bech32Address || "",
+            28,
+          )}
+        />
+
+        <SubTextsContainer>
+          <SubText>
+            ☑️ ICNS name can only be claimed once per Twitter account.
+            <br />
+            ☑️ ICNS name can’t be transferred at this time.
+            <br />
+            ☑️ Please make sure you’ve selected the right account on your
+            wallet.
+          </SubText>
+          <br />
+          <SubText>
+            <SubBoldText>{MINIMUM_OSMO_FEE}</SubBoldText> will be spent as a
+            spam-prevention fee.
+          </SubText>
+        </SubTextsContainer>
+
+        <ButtonContainer>
+          <RegisterButton>
+            <PrimaryButton
+              onClick={onClickRegisterButton}
+              isLoading={isLoadingRegistration}
+            >
+              Register
+            </PrimaryButton>
+          </RegisterButton>
+          <CancelButton>
+            <SecondaryButton
+              onClick={async () => {
+                await router.push("/");
+              }}
+            >
+              Use a different account
+            </SecondaryButton>
+          </CancelButton>
+        </ButtonContainer>
+      </ModalContainer>
+    </ReactModal>
+  );
+};
+
+const ModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  max-width: 43.5rem;
+
+  padding: 2rem 2.25rem;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+`;
+
+const ModalTitle = styled.div`
+  font-weight: 600;
+  font-size: 1.625rem;
+  line-height: 1.94rem;
+
+  color: ${color.white};
+
+  margin-bottom: 1.75rem;
+`;
+
+const ModalDescription = styled.div`
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.18rem;
+
+  color: ${color.grey["100"]};
+`;
+
+const SubTextsContainer = styled.div`
+  margin-top: 1.75rem;
+
+  padding: 2rem 1.5rem;
+
+  background-color: ${color.grey["700"]};
+`;
+
+const SubText = styled.div`
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  color: ${color.grey["300"]};
+`;
+
+const SubBoldText = styled.span`
+  color: ${color.grey["100"]};
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+
+  margin-top: 1.75rem;
+`;
+
+const RegisterButton = styled.div`
+  width: 60%;
+  height: 4.125rem;
+`;
+
+const CancelButton = styled.div`
+  width: 80%;
+  height: 3.8rem;
+`;
+
+const NameBox: FunctionComponent<{
+  title: string;
+  content: string;
+
+  icon?: React.ReactElement;
+
+  marginTop: string;
+}> = ({ icon, title, content, marginTop }) => {
+  return (
+    <NameBoxContainer
+      style={{
+        marginTop,
+      }}
+    >
+      <NameBoxTitleContainer>
+        {icon ? <NameBoxIconContainer>{icon}</NameBoxIconContainer> : null}
+        <NameBoxTitle>{title}</NameBoxTitle>
+      </NameBoxTitleContainer>
+      <NameBoxContentContainer>{content}</NameBoxContentContainer>
+    </NameBoxContainer>
+  );
+};
+
+const NameBoxContainer = styled.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+`;
+
+const NameBoxTitleContainer = styled.div`
+  position: absolute;
+  top: -1.9rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const NameBoxIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  height: 1px;
+`;
+
+const NameBoxTitle = styled.div`
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.18rem;
+
+  color: ${color.grey["400"]};
+`;
+
+const NameBoxContentContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  padding: 2.125rem 0;
+  
+  background-color ${color.grey["700"]};
+  border: 1px solid ${color.grey["300"]};
+
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.81rem;
+  
+  color: ${color.white}
+`;

components/logo/index.tsx

@@ -6,15 +6,34 @@ import Link from "next/link";
 import LogoIcon from "../../public/images/svg/logo.svg";
 
 // Styles
-import { LogoContainer } from "./styled";
+import styled from "styled-components";
 import { FunctionComponent } from "react";
 
 export const Logo: FunctionComponent = () => {
   return (
     <Link href="/">
       <LogoContainer>
-        <Image src={LogoIcon} fill={true} alt="Home Logo" />
+        <Image
+          src={LogoIcon}
+          fill={true}
+          sizes="10rem"
+          alt="Home Logo"
+          priority
+        />
       </LogoContainer>
     </Link>
   );
 };
+
+export const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+  width: 10rem;
+  height: 5rem;
+
+  margin-top: 5rem;
+  margin-left: 5rem;
+`;

components/logo/styled.ts

@@ -1,16 +0,0 @@
-// Styles
-import styled from "styled-components";
-
-export const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-
-  width: 160px;
-  height: 80px;
-
-  margin-top: 80px;
-  margin-left: 80px;
-`;

components/primary-button/index.ts

@@ -1,31 +0,0 @@
-import styled from "styled-components";
-import color from "../../styles/color";
-
-export const PrimaryButton = styled.button`
-  width: 100%;
-  height: 100%;
-
-  border: none;
-
-  background-color: ${color.orange["100"]};
-  padding: 11px 30px;
-
-  font-family: "Inter", serif;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 20px;
-
-  color: ${color.orange["50"]};
-
-  cursor: pointer;
-
-  &:hover {
-    transition-duration: 0.5s;
-    background-color: ${color.orange["200"]};
-  }
-
-  &:disabled {
-    background-color: ${color.orange["200"]};
-  }
-`;

components/primary-button/index.tsx

@@ -0,0 +1,112 @@
+import { ButtonHTMLAttributes, FunctionComponent } from "react";
+import styled, { keyframes } from "styled-components";
+import color from "../../styles/color";
+
+interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  isLoading?: boolean;
+}
+
+export const PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({
+  children,
+  isLoading,
+  disabled,
+  ...props
+}) => {
+  return (
+    <StyledPrimaryButton {...props} disabled={disabled || isLoading}>
+      {isLoading ? (
+        <SpinnerWrapper>
+          <Spinner />
+          <Spinner />
+          <Spinner />
+          <Spinner />
+        </SpinnerWrapper>
+      ) : (
+        <span>{children}</span>
+      )}
+    </StyledPrimaryButton>
+  );
+};
+
+const StyledPrimaryButton = styled.button`
+  display: flex;
+  align-items center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  border: none;
+
+  padding: 11px 30px;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+
+  background-color: ${color.orange["100"]};
+
+  cursor: pointer;
+
+  &:hover {
+    transition-duration: 0.5s;
+    background-color: ${color.orange["200"]};
+
+    span {
+      opacity: 0.5;
+    }
+  }
+
+  &:disabled {
+    background-color: ${color.orange["300"]};
+    cursor: not-allowed;
+
+    span {
+      opacity: 0.5;
+    }
+  }
+
+  span {
+    transition-duration: 0.5s;
+    color: ${color.orange["50"]};
+  }
+`;
+
+const SpinnerWrapper = styled.div`
+  display: flex;
+  position: relative;
+
+  width: 20px;
+  height: 20px;
+`;
+
+const spinAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const Spinner = styled.div<{ animationDelay?: string }>`
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  animation: ${spinAnimation} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  ${({ animationDelay }) =>
+    animationDelay ? `animation-delay: ${animationDelay};` : ""}
+
+  border-radius: 100%;
+  border-style: solid;
+  border-width: 3px;
+  border-color: white transparent transparent transparent;
+`;

components/search-input/index.tsx

@@ -0,0 +1,81 @@
+import { Dispatch, FunctionComponent, SetStateAction } from "react";
+
+import Image from "next/image";
+
+import styled from "styled-components";
+import color from "../../styles/color";
+
+import SearchIcon from "../../public/images/svg/search-icon.svg";
+
+interface Props {
+  searchValue: string;
+  setSearchValue: Dispatch<SetStateAction<string>>;
+}
+
+export const SearchInput: FunctionComponent<Props> = (props) => {
+  const { searchValue, setSearchValue } = props;
+
+  return (
+    <SearchContainer>
+      <SearchIconContainer>
+        <Image src={SearchIcon} fill={true} sizes="1.3rem" alt="search icon" />
+      </SearchIconContainer>
+
+      <SearchText
+        type="text"
+        placeholder="search"
+        value={searchValue}
+        onChange={(event) => {
+          setSearchValue(event.target.value);
+        }}
+      />
+    </SearchContainer>
+  );
+};
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  height: 2.3rem;
+
+  padding: 0.6rem 1.4rem;
+
+  border-radius: 3rem;
+  background-color: ${color.grey["700"]};
+`;
+
+const SearchIconContainer = styled.div`
+  position: relative;
+
+  width: 1.3rem;
+  height: 1.3rem;
+`;
+
+const SearchText = styled.input`
+  border: none;
+
+  color: ${color.white};
+  background-color: ${color.grey["700"]};
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.2rem;
+
+  width: 5.5rem;
+  transition: width 0.2s ease-out;
+
+  ::placeholder,
+  ::-webkit-input-placeholder {
+    color: ${color.grey["400"]};
+  }
+
+  &:focus {
+    outline: none;
+
+    width: 10rem;
+  }
+`;

components/secondary-button/index.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import color from "../../styles/color";
+
+export const SecondaryButton = styled.button`
+  width: 100%;
+  height: 100%;
+
+  border: none;
+
+  padding: 11px 30px;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.025rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+
+  color: ${color.grey["200"]};
+  background-color: transparent;
+
+  cursor: pointer;
+`;

components/skeleton/skeleton-animation.ts

@@ -9,13 +9,13 @@ export const SkeletonAnimation = styled.div`
       ${color.grey["400"]},
       transparent
     ),
-    linear-gradient(${color.grey["500"]}, ${color.grey["500"]}),
+    linear-gradient(${color.grey["600"]}, ${color.grey["600"]}),
     radial-gradient(
       38px circle at 19px 19px,
-      ${color.grey["500"]} 50%,
+      ${color.grey["600"]} 50%,
       transparent 51%
     ),
-    linear-gradient(${color.grey["500"]}, ${color.grey["500"]});
+    linear-gradient(${color.grey["600"]}, ${color.grey["600"]});
   background-repeat: no-repeat;
   background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
   background-position: -315px 0, 0 0, 0px 190px, 50px 195px;

components/skeleton/skeleton-chain-list.tsx

@@ -21,120 +21,97 @@ import {
 } from "../twitter-profile";
 import {
   ChainContainer,
-  ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
 } from "../chain-list";
 
 export const SkeletonChainList: FunctionComponent = () => (
   <ContentContainer>
-    <ProfileContainer color={color.grey["700"]}>
-      <SkeletonCircle width="5.5rem" height="5.5rem" />
+    <SkeletonContainer>
+      <ProfileContainer color={color.grey["800"]}>
+        <SkeletonCircle width="5.5rem" height="5.5rem" />
 
-      <ProfileContentContainer>
-        <ProfileNameContainer>
-          <SkeletonText width="5rem" height="1.5rem" />
-        </ProfileNameContainer>
-        <ProfileUserNameContainer>
-          <SkeletonText width="5rem" height="1rem" />
-        </ProfileUserNameContainer>
+        <ProfileContentContainer>
+          <ProfileNameContainer>
+            <SkeletonText width="5rem" height="1.5rem" />
+          </ProfileNameContainer>
+          <ProfileUserNameContainer>
+            <SkeletonText width="5rem" height="1rem" />
+          </ProfileUserNameContainer>
 
-        <ProfileFollowContainer>
-          <SkeletonText width="8rem" height="1rem" />
-          <SkeletonText width="8rem" height="1rem" />
-        </ProfileFollowContainer>
+          <ProfileFollowContainer>
+            <SkeletonText width="8rem" height="1rem" />
+            <SkeletonText width="8rem" height="1rem" />
+          </ProfileFollowContainer>
 
-        <SkeletonText width="20rem" height="1rem" />
-      </ProfileContentContainer>
-    </ProfileContainer>
+          <SkeletonText width="20rem" height="1rem" />
+        </ProfileContentContainer>
+      </ProfileContainer>
+    </SkeletonContainer>
 
     <ChainListTitleContainer>
       <SkeletonTitle />
     </ChainListTitleContainer>
 
-    <ChainContainer color={color.grey["700"]}>
-      <ChainItemContainer isLoading={true}>
-        <ChainImageContainer width="3rem" height="3rem">
-          <SkeletonCircle width="3rem" height="3rem" />
-        </ChainImageContainer>
-        <ChainInfoContainer>
-          <SkeletonText width="4rem" height="1rem" />
-          <SkeletonText width="12rem" height="1rem" />
-        </ChainInfoContainer>
-      </ChainItemContainer>
+    <ChainContainer color={color.grey["800"]}>
+      {Array(10)
+        .fill("")
+        .map((_, index) => (
+          <div key={index}>
+            <ChainItemContainer isLoading={true} isSkeleton={true}>
+              <SkeletonImageContainer>
+                <SkeletonCircle width="3rem" height="3rem" />
+              </SkeletonImageContainer>
+              <ChainInfoContainer>
+                <SkeletonText width="4rem" height="1rem" />
+                <SkeletonText width="12rem" height="1rem" />
+              </ChainInfoContainer>
+            </ChainItemContainer>
 
-      <SkeletonDivider />
-
-      <ChainItemContainer isLoading={true}>
-        <ChainImageContainer width="3rem" height="3rem">
-          <SkeletonCircle width="3rem" height="3rem" />
-        </ChainImageContainer>
-        <ChainInfoContainer>
-          <SkeletonText width="4rem" height="1rem" />
-          <SkeletonText width="12rem" height="1rem" />
-        </ChainInfoContainer>
-      </ChainItemContainer>
-
-      <SkeletonDivider />
-
-      <ChainItemContainer isLoading={true}>
-        <ChainImageContainer width="3rem" height="3rem">
-          <SkeletonCircle width="3rem" height="3rem" />
-        </ChainImageContainer>
-        <ChainInfoContainer>
-          <SkeletonText width="4rem" height="1rem" />
-          <SkeletonText width="12rem" height="1rem" />
-        </ChainInfoContainer>
-      </ChainItemContainer>
-
-      <SkeletonDivider />
-
-      <ChainItemContainer isLoading={true}>
-        <ChainImageContainer width="3rem" height="3rem">
-          <SkeletonCircle width="3rem" height="3rem" />
-        </ChainImageContainer>
-        <ChainInfoContainer>
-          <SkeletonText width="4rem" height="1rem" />
-          <SkeletonText width="12rem" height="1rem" />
-        </ChainInfoContainer>
-      </ChainItemContainer>
-
-      <SkeletonDivider />
-
-      <ChainItemContainer isLoading={true}>
-        <ChainImageContainer width="3rem" height="3rem">
-          <SkeletonCircle width="3rem" height="3rem" />
-        </ChainImageContainer>
-        <ChainInfoContainer>
-          <SkeletonText width="4rem" height="1rem" />
-          <SkeletonText width="12rem" height="1rem" />
-        </ChainInfoContainer>
-      </ChainItemContainer>
-
-      <SkeletonDivider />
+            <SkeletonDivider />
+          </div>
+        ))}
     </ChainContainer>
 
-    <ButtonContainer>
-      <SkeletonButton />
-    </ButtonContainer>
+    <SkeletonButtonContainer>
+      <ButtonContainer>
+        <SkeletonButton />
+      </ButtonContainer>
+    </SkeletonButtonContainer>
   </ContentContainer>
 );
 
+const SkeletonContainer = styled.div`
+  width: 100%;
+  padding-top: 2.4rem;
+`;
+
 const SkeletonTitle = styled.div`
   width: 8rem;
   height: 1.5rem;
-  background-color: ${color.grey["700"]};
+  background-color: ${color.grey["800"]};
+`;
+
+const SkeletonImageContainer = styled.div`
+  width: 3rem;
+  height: 3rem;
+
+  position: relative;
+`;
+
+const SkeletonButtonContainer = styled.div`
+  margin-top: 1.5rem;
 `;
 
 const SkeletonButton = styled.div`
   width: 12rem;
   height: 4rem;
 
-  background-color: ${color.grey["700"]};
+  background-color: ${color.grey["800"]};
 `;
 
 const SkeletonDivider = styled(SkeletonAnimation)`
   width: 100%;
   height: 1px;
-  background-color: ${color.grey["500"]};
+  background-color: ${color.grey["600"]};
 `;

components/skeleton/skeleton-circle.ts

@@ -12,6 +12,6 @@ export const SkeletonCircle = styled(SkeletonAnimation)<WidthHeightProps>`
   width: ${(props) => props.width};
   height: ${(props) => props.height};
 
-  background-color: ${color.grey["500"]};
+  background-color: ${color.grey["600"]};
   border-radius: 50%;
 `;

components/twitter-profile/index.tsx

@@ -12,11 +12,12 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
   const { twitterProfileInformation } = props;
 
   return (
-    <ProfileContainer color={color.grey["800"]}>
+    <ProfileContainer color={color.grey["900"]}>
       <ProfileImageContainer>
         <Image
           src={twitterProfileInformation?.profile_image_url ?? ""}
           fill={true}
+          sizes="5rem"
           alt="twitter profile image"
         />
       </ProfileImageContainer>
@@ -129,5 +130,10 @@ export const ProfileDescriptionContainer = styled.div`
   font-size: 0.8rem;
   line-height: 1rem;
 
+  max-width: 27.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   color: ${color.grey["100"]};
 `;

config.ts

@@ -1,160 +0,0 @@
-import { AccountInfo } from "./types";
-
-export const AccountInfos: AccountInfo[] = [
-  {
-    prefix: "cosmos",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/cosmoshub/chain.png",
-  },
-  {
-    prefix: "osmo",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png",
-  },
-  {
-    prefix: "agoric",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/agoric/chain.png",
-  },
-  {
-    prefix: "akash",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/akashnet/chain.png",
-  },
-  {
-    prefix: "axelar",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/axelar-dojo/chain.png",
-  },
-  {
-    prefix: "bostrom",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/bostrom/chain.png",
-  },
-  {
-    prefix: "persistence",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/core/chain.png",
-  },
-  {
-    prefix: "cro",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/crypto-org-chain-mainnet/chain.png",
-  },
-  {
-    prefix: "emoney",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/emoney/chain.png",
-  },
-  {
-    prefix: "evmos",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/evmos_9001/chain.png",
-  },
-  {
-    prefix: "gravity",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/gravity-bridge/chain.png",
-  },
-  {
-    prefix: "ixo",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/impacthub/chain.png",
-  },
-  {
-    prefix: "star",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/iov-mainnet-ibc/chain.png",
-  },
-  {
-    prefix: "iaa",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/irishub/chain.png",
-  },
-  {
-    prefix: "juno",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/juno/chain.png",
-  },
-  {
-    prefix: "kava",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/kava_2222/chain.png",
-  },
-  {
-    prefix: "regen",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/regen/chain.png",
-  },
-  {
-    prefix: "secret",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/secret/chain.png",
-  },
-  {
-    prefix: "sent",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/sentinelhub/chain.png",
-  },
-  {
-    prefix: "certik",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/shentu-2.2/chain.png",
-  },
-  {
-    prefix: "sif",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/sifchain/chain.png",
-  },
-  {
-    prefix: "somm",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/sommelier/chain.png",
-  },
-  {
-    prefix: "stars",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/stargaze/chain.png",
-  },
-  {
-    prefix: "stride",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/stride/chain.png",
-  },
-  {
-    prefix: "tgrade",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/tgrade-mainnet/chain.png",
-  },
-  {
-    prefix: "umee",
-    address: "cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs",
-    chainImageUrl:
-      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/umee/chain.png",
-  },
-];

constants/error-message.ts

@@ -0,0 +1,5 @@
+export const TWITTER_LOGIN_ERROR = "Twitter login access denied";
+export const TWITTER_PROFILE_ERROR = "Twitter auth code is not valid";
+
+export const KEPLR_NOT_FOUND_ERROR = "Can't fount window.keplr";
+export const KEPLR_VERSION_ERROR = "You should update keplr";

constants/icns.ts

@@ -0,0 +1,18 @@
+export const MainChainId = "osmo-test-4";
+
+export const REFERRAL_KEY = "icns-referral";
+
+export const RPC_URL =
+  process.env.OSMOSIS_RPC_URL ?? "https://rpc.testnet.osmosis.zone";
+export const REST_URL =
+  process.env.OSMOSIS_REST_URL ?? "https://lcd.testnet.osmosis.zone";
+
+export const NAME_NFT_ADDRESS =
+  process.env.ICNS_NAME_NFT_CONTRACT_ADDRESS ??
+  "osmo1xahnjn872smah6xle8n3z5a5teqq390qr959l805mkuw0kcy8g5smtdagg";
+export const REGISTRAR_ADDRESS =
+  process.env.ICNS_REGISTRAR_CONTRACT_ADDRESS ??
+  "osmo1npn97g7hsgqlp70rw8nhd7c7vyvkukv9x0n25sn4fk5mgcjlz4gq9zlgf3";
+export const RESOLVER_ADDRESS =
+  process.env.ICNS_RESOLVER_CONTRACT_ADDRESS ??
+  "osmo1002awr7frr9wk44lc3vfzt0d2w6vz5z03ql6fszjsjy8vdcvk0sskruz3c";

constants/twitter.ts

@@ -7,3 +7,5 @@ export const twitterOAuthScopes = [
 ];
 
 export const twitterApiBaseUrl = "https://api.twitter.com/2";
+
+export const SHARE_URL = "https://twitter.com/share";