Change contract

Change contract address
Fix unknown problem
2022-12-13 13:46:47 +09:00 · 2022-12-12 18:57:59 +09:00 · 2022-12-12 18:57:49 +09:00 · 2022-12-12 17:50:52 +09:00 · 2022-12-12 17:50:40 +09:00 · 2022-12-12 16:12:04 +09:00
176 changed files with 824 additions and 4347 deletions
@@ -49,6 +49,4 @@ build
 .sentryclirc

 # Intelij files
-.idea
-# Sentry
-.sentryclirc
+.idea
@@ -1,61 +0,0 @@
-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;
-`;
@@ -1,78 +0,0 @@
-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"]};
-`;
@@ -1,31 +0,0 @@
-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%;
-  }
-`;
@@ -1,147 +1,60 @@
-import { ChainItemType, DisabledChainItemType } from "../../types";
-import { FunctionComponent, useEffect, useState } from "react";
+import { AccountInfo } from "../../types";
+import { FunctionComponent } from "react";
+import {
+  ChainImageContainer,
+  ChainInfoContainer,
+  ChainItemContainer,
+} from "./chain-list";

+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 {
-  chainItem: ChainItemType | DisabledChainItemType;
-  checkedItemHandler: (chainItem: ChainItemType, isChecked: boolean) => void;
-  checkedItems: Set<unknown>;
+  chainInfo: AccountInfo;
 }

 export const ChainItem: FunctionComponent<Props> = (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]);
-
+  const { chainInfo } = props;
  return (
-    <ChainItemContainer
-      key={chainItem.prefix}
-      isLoading={false}
-      disabled={disabled}
-      checked={checked}
-      onClick={checkHandler}
-    >
-      <ChainImage
-        src={chainItem.chainImageUrl}
-        fill={true}
-        alt={`${chainItem.prefix} chain image`}
-      />
+    <ChainItemContainer key={chainInfo.prefix} isLoading={false}>
+      <ChainImageContainer width="3rem" height="3rem">
+        <Image
+          src={chainInfo.chainImageUrl}
+          fill={true}
+          alt={`${chainInfo.prefix} chain image`}
+        />
+      </ChainImageContainer>
      <ChainInfoContainer>
-        <ChainName>{`.${chainItem.prefix}`}</ChainName>
-        {chainItem.address ? (
-          <WalletAddress>{chainItem.address}</WalletAddress>
-        ) : null}
-        {disabled && chainItem.reason ? (
-          <DisabledReason>{chainItem.reason.message}</DisabledReason>
-        ) : null}
+        <ChainName>{`.${chainInfo.prefix}`}</ChainName>
+        <WalletAddress>{chainInfo.address}</WalletAddress>
      </ChainInfoContainer>

      <Flex1 />

-      <Checkbox checked={checked} />
+      <ChainCheckBox />
    </ChainItemContainer>
  );
 };

-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`
+const ChainName = styled.div`
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1rem;

-  color: ${color.white};
+  color: ${color.grey["100"]};
 `;

-export const WalletAddress = styled.div`
+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"]};
 `;

-export const DisabledReason = styled.div`
-  color: ${color.grey["200"]};
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
+const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
+  width: 1.5rem;
+  height: 1.5rem;
 `;
@@ -1,48 +1,19 @@
-import { Dispatch, FunctionComponent, SetStateAction, useEffect } from "react";
-import { ChainItemType, DisabledChainItemType } from "../../types";
+import { FunctionComponent } from "react";
+import { AccountInfo, WidthHeightProps } from "../../types";
 import color from "../../styles/color";
 import styled from "styled-components";
 import { ChainItem } from "./chain-item";

 interface Props {
-  chainList: ChainItemType[];
-  disabledChainList: DisabledChainItemType[];
-  checkedItems: Set<unknown>;
-  setCheckedItems: Dispatch<SetStateAction<Set<unknown>>>;
+  chainList: AccountInfo[];
 }

 export const ChainList: FunctionComponent<Props> = (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);
-  };
-
+  const { chainList } = props;
  return (
-    <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 color={color.grey["800"]}>
+      {chainList.map((chainInfo) => (
+        <ChainItem key={chainInfo.prefix} chainInfo={chainInfo} />
      ))}
    </ChainContainer>
  );
@@ -52,10 +23,37 @@ 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;
+`;
@@ -1,70 +0,0 @@
-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;
-`;
@@ -1,2 +0,0 @@
-export * from "./modal";
-export * from "./wallet-item";
@@ -0,0 +1,74 @@
+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"]};
+`;
@@ -1,9 +1,7 @@
-import { FunctionComponent } from "react";
 import ReactModal from "react-modal";
+import { FunctionComponent } from "react";
 import styled from "styled-components";
 import color from "../../styles/color";
-import { WalletList } from "../../constants/wallet";
-import { WalletItem } from "./wallet-item";

 interface Props {
  isModalOpen: boolean;
@@ -17,9 +15,8 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
    <ReactModal
      isOpen={isModalOpen}
      onRequestClose={onCloseModal}
-      ariaHideApp={false}
      style={{
-        overlay: { background: "#121212cc" },
+        overlay: { background: "#181818b3" },
        content: {
          top: "50%",
          left: "50%",
@@ -39,9 +36,35 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
          Plz check which account is selected after you connect it
        </ModalDescription>

-        {WalletList.map((walletItem) => {
-          return <WalletItem wallet={walletItem} key={walletItem.name} />;
-        })}
+        {/*<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>*/}
      </ModalContainer>
    </ReactModal>
  );
@@ -52,8 +75,6 @@ const ModalContainer = styled.div`
  flex-direction: column;
  gap: 0.9rem;
  padding: 2.2rem;
-
-  min-width: 28rem;
 `;

 const ModalTitle = styled.div`
@@ -1,22 +1,11 @@
-import { FunctionComponent, useEffect, useState } from "react";
+import { FunctionComponent } 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 {
-  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";
+import { WalletType } from "../../constants/wallet";
+import { TwitterAuthUrlResponse } from "../../types";

 interface Props {
  wallet: WalletType;
@@ -24,64 +13,23 @@ interface Props {

 export const WalletItem: FunctionComponent<Props> = (props: Props) => {
  const { wallet } = props;
-  const [isInstalled, setIsInstalled] = useState<boolean>();
-
-  useEffect(() => {
-    setIsInstalled(!!window.keplr);
-  }, []);

  const onClickWalletItem = async () => {
-    try {
-      if (wallet.name === "Keplr") {
-        await connectKeplr();
-        localStorage.setItem(SELECTED_WALLET_KEY, wallet.name);
-      }
+    const { authUrl }: TwitterAuthUrlResponse = await (
+      await fetch("/api/twitter-auth-url")
+    ).json();

-      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);
-    }
+    window.location.href = authUrl;
  };

  return (
    <WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}>
      <WalletIcon>
-        <Image
-          src={wallet.image}
-          fill={true}
-          sizes="3.75rem"
-          alt="wallet Icon"
-        />
+        <Image src={wallet.image} fill={true} alt="wallet Icon" />
      </WalletIcon>
      <WalletContentContainer>
        <WalletName>{wallet.name}</WalletName>
-        {wallet.isReady ? (
-          isInstalled ? null : (
-            <WalletDescription>Go to install Keplr Extension</WalletDescription>
-          )
-        ) : (
+        {wallet.isReady ? null : (
          <WalletDescription>Comming soon</WalletDescription>
        )}
      </WalletContentContainer>
@@ -1,43 +0,0 @@
-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;
@@ -1,300 +0,0 @@
-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}
-`;
@@ -6,34 +6,15 @@ import Link from "next/link";
 import LogoIcon from "../../public/images/svg/logo.svg";

 // Styles
-import styled from "styled-components";
+import { LogoContainer } from "./styled";
 import { FunctionComponent } from "react";

 export const Logo: FunctionComponent = () => {
  return (
    <Link href="/">
      <LogoContainer>
-        <Image
-          src={LogoIcon}
-          fill={true}
-          sizes="10rem"
-          alt="Home Logo"
-          priority
-        />
+        <Image src={LogoIcon} fill={true} alt="Home Logo" />
      </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;
-`;
@@ -0,0 +1,16 @@
+// 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;
+`;
@@ -0,0 +1,31 @@
+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"]};
+  }
+`;
@@ -1,112 +0,0 @@
-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;
-`;
@@ -1,81 +0,0 @@
-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;
-  }
-`;
@@ -1,24 +0,0 @@
-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;
-`;
@@ -9,13 +9,13 @@ export const SkeletonAnimation = styled.div`
      ${color.grey["400"]},
      transparent
    ),
-    linear-gradient(${color.grey["600"]}, ${color.grey["600"]}),
+    linear-gradient(${color.grey["500"]}, ${color.grey["500"]}),
    radial-gradient(
      38px circle at 19px 19px,
-      ${color.grey["600"]} 50%,
+      ${color.grey["500"]} 50%,
      transparent 51%
    ),
-    linear-gradient(${color.grey["600"]}, ${color.grey["600"]});
+    linear-gradient(${color.grey["500"]}, ${color.grey["500"]});
  background-repeat: no-repeat;
  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
@@ -21,97 +21,120 @@ import {
 } from "../twitter-profile";
 import {
  ChainContainer,
+  ChainImageContainer,
  ChainInfoContainer,
  ChainItemContainer,
 } from "../chain-list";

 export const SkeletonChainList: FunctionComponent = () => (
  <ContentContainer>
-    <SkeletonContainer>
-      <ProfileContainer color={color.grey["800"]}>
-        <SkeletonCircle width="5.5rem" height="5.5rem" />
+    <ProfileContainer color={color.grey["700"]}>
+      <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>
-    </SkeletonContainer>
+        <SkeletonText width="20rem" height="1rem" />
+      </ProfileContentContainer>
+    </ProfileContainer>

    <ChainListTitleContainer>
      <SkeletonTitle />
    </ChainListTitleContainer>

-    <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>
+    <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>

-            <SkeletonDivider />
-          </div>
-        ))}
+      <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 />
    </ChainContainer>

-    <SkeletonButtonContainer>
-      <ButtonContainer>
-        <SkeletonButton />
-      </ButtonContainer>
-    </SkeletonButtonContainer>
+    <ButtonContainer>
+      <SkeletonButton />
+    </ButtonContainer>
  </ContentContainer>
 );

-const SkeletonContainer = styled.div`
-  width: 100%;
-  padding-top: 2.4rem;
-`;
-
 const SkeletonTitle = styled.div`
  width: 8rem;
  height: 1.5rem;
-  background-color: ${color.grey["800"]};
-`;
-
-const SkeletonImageContainer = styled.div`
-  width: 3rem;
-  height: 3rem;
-
-  position: relative;
-`;
-
-const SkeletonButtonContainer = styled.div`
-  margin-top: 1.5rem;
+  background-color: ${color.grey["700"]};
 `;

 const SkeletonButton = styled.div`
  width: 12rem;
  height: 4rem;

-  background-color: ${color.grey["800"]};
+  background-color: ${color.grey["700"]};
 `;

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

-  background-color: ${color.grey["600"]};
+  background-color: ${color.grey["500"]};
  border-radius: 50%;
 `;
@@ -12,12 +12,11 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
  const { twitterProfileInformation } = props;

  return (
-    <ProfileContainer color={color.grey["900"]}>
+    <ProfileContainer color={color.grey["800"]}>
      <ProfileImageContainer>
        <Image
          src={twitterProfileInformation?.profile_image_url ?? ""}
          fill={true}
-          sizes="5rem"
          alt="twitter profile image"
        />
      </ProfileImageContainer>
@@ -130,10 +129,5 @@ 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"]};
 `;
@@ -0,0 +1,160 @@
+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",
+  },
+];
@@ -1,5 +0,0 @@
-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";
@@ -1,18 +0,0 @@
-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";
@@ -7,5 +7,3 @@ export const twitterOAuthScopes = [
 ];

 export const twitterApiBaseUrl = "https://api.twitter.com/2";
-
-export const SHARE_URL = "https://twitter.com/share";
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thunnini	c69788989d	Change contract	2022-12-13 13:46:47 +09:00
Thunnini	ef68b49027	Change contract address	2022-12-12 18:57:59 +09:00
Thunnini	c900e86e3a	Fix unknown problem	2022-12-12 18:57:49 +09:00
Thunnini	de2a90457e	WIP: test execute	2022-12-12 17:50:52 +09:00
Thunnini	7ae09a0c11	Change some typings	2022-12-12 17:50:40 +09:00
Thunnini	1ea85324aa	Use `Buffer` package instead of Buffer on nodejs	2022-12-12 16:12:04 +09:00