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

.pnp.cjs

@@ -36,6 +36,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@next/eslint-plugin-next", "npm:13.0.5"],\
             ["@sentry/nextjs", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:7.27.0"],\
             ["@svgr/webpack", "npm:6.5.1"],\
+            ["@types/cors", "npm:2.8.13"],\
             ["@types/eslint", "npm:8.4.10"],\
             ["@types/node", "npm:18.11.9"],\
             ["@types/react", "npm:18.0.25"],\
@@ -47,6 +48,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@typescript-eslint/parser", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.45.0"],\
             ["axios", "npm:0.27.2"],\
             ["buffer", "npm:6.0.3"],\
+            ["cors", "npm:2.8.5"],\
             ["crypto", "npm:1.0.1"],\
             ["eslint", "npm:8.28.0"],\
             ["eslint-config-next", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:13.0.5"],\
@@ -62,6 +64,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["next", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:13.0.5"],\
             ["prettier", "npm:2.8.0"],\
             ["react", "npm:18.2.0"],\
+            ["react-countup", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:6.4.0"],\
             ["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\
             ["react-is", "npm:18.2.0"],\
             ["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\
@@ -3292,6 +3295,34 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["@rollup/plugin-babel", [\
+        ["npm:6.0.3", {\
+          "packageLocation": "./.yarn/cache/@rollup-plugin-babel-npm-6.0.3-1259d28dd2-412c1c3bb5.zip/node_modules/@rollup/plugin-babel/",\
+          "packageDependencies": [\
+            ["@rollup/plugin-babel", "npm:6.0.3"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:9555373101f58738ea803ff9e79b0d8b52a66e88c21dac99d127fd080df7e60c5efb4c82f30a042556261bfb95e0c5292626cc000800b004d622753bbf9e02e5#npm:6.0.3", {\
+          "packageLocation": "./.yarn/__virtual__/@rollup-plugin-babel-virtual-082525a879/0/cache/@rollup-plugin-babel-npm-6.0.3-1259d28dd2-412c1c3bb5.zip/node_modules/@rollup/plugin-babel/",\
+          "packageDependencies": [\
+            ["@rollup/plugin-babel", "virtual:9555373101f58738ea803ff9e79b0d8b52a66e88c21dac99d127fd080df7e60c5efb4c82f30a042556261bfb95e0c5292626cc000800b004d622753bbf9e02e5#npm:6.0.3"],\
+            ["@babel/core", null],\
+            ["@babel/helper-module-imports", "npm:7.18.6"],\
+            ["@rollup/pluginutils", "virtual:082525a8792b89cbfd614faa6bcd1a9496584eedab2ae9d69d9f4375690e041544351047f44ef6dab868f44ac8fb8bbc2f5d9aa598e4e4521132888b2cfef8a9#npm:5.0.2"],\
+            ["@types/babel__core", null],\
+            ["@types/rollup", null],\
+            ["rollup", null]\
+          ],\
+          "packagePeers": [\
+            "@babel/core",\
+            "@types/babel__core",\
+            "@types/rollup",\
+            "rollup"\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["@rollup/plugin-sucrase", [\
         ["npm:4.0.4", {\
           "packageLocation": "./.yarn/cache/@rollup-plugin-sucrase-npm-4.0.4-11cf77c62a-ccb01d7eb3.zip/node_modules/@rollup/plugin-sucrase/",\
@@ -3347,6 +3378,29 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["picomatch", "npm:2.3.1"]\
           ],\
           "linkType": "HARD"\
+        }],\
+        ["npm:5.0.2", {\
+          "packageLocation": "./.yarn/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip/node_modules/@rollup/pluginutils/",\
+          "packageDependencies": [\
+            ["@rollup/pluginutils", "npm:5.0.2"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:082525a8792b89cbfd614faa6bcd1a9496584eedab2ae9d69d9f4375690e041544351047f44ef6dab868f44ac8fb8bbc2f5d9aa598e4e4521132888b2cfef8a9#npm:5.0.2", {\
+          "packageLocation": "./.yarn/__virtual__/@rollup-pluginutils-virtual-7805b1dbc6/0/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip/node_modules/@rollup/pluginutils/",\
+          "packageDependencies": [\
+            ["@rollup/pluginutils", "virtual:082525a8792b89cbfd614faa6bcd1a9496584eedab2ae9d69d9f4375690e041544351047f44ef6dab868f44ac8fb8bbc2f5d9aa598e4e4521132888b2cfef8a9#npm:5.0.2"],\
+            ["@types/estree", "npm:1.0.0"],\
+            ["@types/rollup", null],\
+            ["estree-walker", "npm:2.0.2"],\
+            ["picomatch", "npm:2.3.1"],\
+            ["rollup", null]\
+          ],\
+          "packagePeers": [\
+            "@types/rollup",\
+            "rollup"\
+          ],\
+          "linkType": "HARD"\
         }]\
       ]],\
       ["@rushstack/eslint-patch", [\
@@ -3957,6 +4011,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["@types/cors", [\
+        ["npm:2.8.13", {\
+          "packageLocation": "./.yarn/cache/@types-cors-npm-2.8.13-4b8ac1068f-7ef197ea19.zip/node_modules/@types/cors/",\
+          "packageDependencies": [\
+            ["@types/cors", "npm:2.8.13"],\
+            ["@types/node", "npm:18.11.9"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["@types/eslint", [\
         ["npm:8.4.10", {\
           "packageLocation": "./.yarn/cache/@types-eslint-npm-8.4.10-9df5f4bc78-21e009ed9e.zip/node_modules/@types/eslint/",\
@@ -5466,6 +5530,17 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["cors", [\
+        ["npm:2.8.5", {\
+          "packageLocation": "./.yarn/cache/cors-npm-2.8.5-c9935a2d12-ced838404c.zip/node_modules/cors/",\
+          "packageDependencies": [\
+            ["cors", "npm:2.8.5"],\
+            ["object-assign", "npm:4.1.1"],\
+            ["vary", "npm:1.1.2"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["cosmiconfig", [\
         ["npm:7.1.0", {\
           "packageLocation": "./.yarn/cache/cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip/node_modules/cosmiconfig/",\
@@ -5480,6 +5555,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["countup.js", [\
+        ["npm:2.3.2", {\
+          "packageLocation": "./.yarn/cache/countup.js-npm-2.3.2-fce559ea32-77bb509cd1.zip/node_modules/countup.js/",\
+          "packageDependencies": [\
+            ["countup.js", "npm:2.3.2"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["create-hash", [\
         ["npm:1.2.0", {\
           "packageLocation": "./.yarn/cache/create-hash-npm-1.2.0-afd048e1ce-02a6ae3bb9.zip/node_modules/create-hash/",\
@@ -7291,6 +7375,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@next/eslint-plugin-next", "npm:13.0.5"],\
             ["@sentry/nextjs", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:7.27.0"],\
             ["@svgr/webpack", "npm:6.5.1"],\
+            ["@types/cors", "npm:2.8.13"],\
             ["@types/eslint", "npm:8.4.10"],\
             ["@types/node", "npm:18.11.9"],\
             ["@types/react", "npm:18.0.25"],\
@@ -7302,6 +7387,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@typescript-eslint/parser", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.45.0"],\
             ["axios", "npm:0.27.2"],\
             ["buffer", "npm:6.0.3"],\
+            ["cors", "npm:2.8.5"],\
             ["crypto", "npm:1.0.1"],\
             ["eslint", "npm:8.28.0"],\
             ["eslint-config-next", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:13.0.5"],\
@@ -7317,6 +7403,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["next", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:13.0.5"],\
             ["prettier", "npm:2.8.0"],\
             ["react", "npm:18.2.0"],\
+            ["react-countup", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:6.4.0"],\
             ["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\
             ["react-is", "npm:18.2.0"],\
             ["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\
@@ -9155,6 +9242,30 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["react-countup", [\
+        ["npm:6.4.0", {\
+          "packageLocation": "./.yarn/cache/react-countup-npm-6.4.0-d1c6fe7973-259277fa70.zip/node_modules/react-countup/",\
+          "packageDependencies": [\
+            ["react-countup", "npm:6.4.0"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:6.4.0", {\
+          "packageLocation": "./.yarn/__virtual__/react-countup-virtual-9555373101/0/cache/react-countup-npm-6.4.0-d1c6fe7973-259277fa70.zip/node_modules/react-countup/",\
+          "packageDependencies": [\
+            ["react-countup", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:6.4.0"],\
+            ["@rollup/plugin-babel", "virtual:9555373101f58738ea803ff9e79b0d8b52a66e88c21dac99d127fd080df7e60c5efb4c82f30a042556261bfb95e0c5292626cc000800b004d622753bbf9e02e5#npm:6.0.3"],\
+            ["@types/react", "npm:18.0.25"],\
+            ["countup.js", "npm:2.3.2"],\
+            ["react", "npm:18.2.0"]\
+          ],\
+          "packagePeers": [\
+            "@types/react",\
+            "react"\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["react-dom", [\
         ["npm:18.2.0", {\
           "packageLocation": "./.yarn/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip/node_modules/react-dom/",\
@@ -10550,6 +10661,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["vary", [\
+        ["npm:1.1.2", {\
+          "packageLocation": "./.yarn/cache/vary-npm-1.1.2-b49f70ae63-ae0123222c.zip/node_modules/vary/",\
+          "packageDependencies": [\
+            ["vary", "npm:1.1.2"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["warning", [\
         ["npm:4.0.3", {\
           "packageLocation": "./.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip/node_modules/warning/",\

components/primary-button/index.tsx

@@ -75,7 +75,7 @@ const StyledPrimaryButton = styled.button`
   }
 `;
 
-const SpinnerWrapper = styled.div`
+export const SpinnerWrapper = styled.div`
   display: flex;
   position: relative;
 
@@ -92,7 +92,7 @@ const spinAnimation = keyframes`
   }
 `;
 
-const Spinner = styled.div<{ animationDelay?: string }>`
+export const Spinner = styled.div<{ animationDelay?: string }>`
   display: block;
   position: absolute;
   top: 0;

components/twitter-profile/index.tsx

@@ -1,18 +1,80 @@
 import color from "../../styles/color";
 import styled from "styled-components";
 import { TwitterAuthInfoResponse } from "../../types";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import Image from "next/image";
 
+import ICNSIcon from "../../public/images/svg/icns-logo.svg";
+
 interface Props {
+  isOwner?: boolean;
+  registeredTwitterName?: string;
   twitterProfileInformation?: TwitterAuthInfoResponse | null;
 }
 
 export const TwitterProfile: FunctionComponent<Props> = (props) => {
-  const { twitterProfileInformation } = props;
+  const { isOwner, registeredTwitterName, twitterProfileInformation } = props;
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const onClickInviteLink = async () => {
+    await navigator.clipboard.writeText(
+      `https://app.icns.xyz?referral=${registeredTwitterName}`,
+    );
+
+    setIsCopied(true);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
 
   return (
     <ProfileContainer color={color.grey["900"]}>
+      {registeredTwitterName ? (
+        isCopied ? (
+          <InviteLinkContainer>
+            copied
+            <CopiedIcon
+              width="14"
+              height="12"
+              viewBox="0 0 14 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2 4.92614L6.08333 9.9375L12.5 2.0625"
+                stroke="current"
+                strokeWidth="2"
+                strokeLinecap="square"
+              />
+            </CopiedIcon>
+          </InviteLinkContainer>
+        ) : (
+          <InviteLinkContainer onClick={onClickInviteLink}>
+            copy invite link
+            <CopyIcon
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="none"
+              viewBox="0 0 16 16"
+            >
+              <path
+                stroke="current"
+                strokeLinecap="square"
+                strokeWidth="1.5"
+                d="M10.667 2.667h-8v8"
+              />
+              <path
+                stroke="current"
+                strokeLinecap="square"
+                strokeWidth="1.5"
+                d="M5.417 5.417H13.25V13.25H5.417z"
+              />
+            </CopyIcon>
+          </InviteLinkContainer>
+        )
+      ) : null}
       <ProfileImageContainer>
         <Image
           src={twitterProfileInformation?.profile_image_url ?? ""}
@@ -24,7 +86,13 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
 
       <ProfileContentContainer>
         <ProfileNameContainer>
-          {twitterProfileInformation?.name}
+          <ProfileName>{twitterProfileInformation?.name}</ProfileName>
+
+          {isOwner ? (
+            <IsOwnerIcon>
+              <ICNSIcon />
+            </IsOwnerIcon>
+          ) : null}
         </ProfileNameContainer>
         <ProfileUserNameContainer>
           @{twitterProfileInformation?.username}
@@ -58,6 +126,8 @@ export const ProfileContainer = styled.div`
   display: flex;
   flex-direction: row;
 
+  position: relative;
+
   width: 100%;
 
   padding: 1.5rem 2rem;
@@ -65,6 +135,45 @@ export const ProfileContainer = styled.div`
   background-color: ${(props) => props.color};
 `;
 
+const CopyIcon = styled.svg`
+  stroke: ${color.grey["100"]};
+`;
+
+const CopiedIcon = styled.svg`
+  stroke: ${color.grey["100"]};
+`;
+
+export const InviteLinkContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.2rem;
+
+  position: absolute;
+
+  top: 1.75rem;
+  right: 1.5rem;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 0.875rem;
+  text-transform: uppercase;
+
+  color: ${color.grey["100"]};
+
+  cursor: pointer;
+
+  &:hover {
+    color: ${color.grey["200"]};
+
+    ${CopyIcon} {
+      stroke: ${color.grey["200"]};
+    }
+  }
+`;
+
 export const ProfileContentContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -87,6 +196,12 @@ export const ProfileImageContainer = styled.div`
 `;
 
 export const ProfileNameContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const ProfileName = styled.div`
   font-weight: 600;
   font-size: 1.2rem;
   line-height: 1.5rem;
@@ -94,6 +209,15 @@ export const ProfileNameContainer = styled.div`
   color: ${color.white};
 `;
 
+export const IsOwnerIcon = styled.div`
+  height: 1px;
+  background-color: red;
+  margin-top: 0.1rem;
+
+  display: flex;
+  align-items: center;
+`;
+
 export const ProfileUserNameContainer = styled.div`
   font-weight: 500;
   font-size: 0.8rem;

constants/icns.ts

@@ -20,6 +20,9 @@ export const RESOLVER_ADDRESS =
   process.env.NEXT_PUBLIC_ICNS_RESOLVER_CONTRACT_ADDRESS ??
   "osmo1002awr7frr9wk44lc3vfzt0d2w6vz5z03ql6fszjsjy8vdcvk0sskruz3c";
 
+export const CLAIM_URL =
+  "https://lcd-osmosis.keplr.app/cosmwasm/wasm/v1/contract/osmo1mypljhatv0prfr9cjzzvamxdf2ctg34xkt50sudxads9zhqnyneqjuvy26/smart/eyJudW1fdG9rZW5zIjp7fX0=";
+
 export const CHAIN_ALLOWLIST =
   process.env.NEXT_PUBLIC_CHAIN_ALLOWLIST ||
   [

hooks/use-interval.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+import useIsomorphicLayoutEffect from "./use-isomorphic-layout-effect";
+
+function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useIsomorphicLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+export default useInterval;

hooks/use-isomorphic-layout-effect.tsx

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from "react";
+
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;

package.json

@@ -18,10 +18,12 @@
     "@sentry/nextjs": "^7.27.0",
     "axios": "^0.27.2",
     "buffer": "^6.0.3",
+    "cors": "^2.8.5",
     "crypto": "^1.0.1",
     "iron-session": "^6.3.1",
     "next": "13.0.5",
     "react": "18.2.0",
+    "react-countup": "^6.4.0",
     "react-dom": "18.2.0",
     "react-is": "^18.2.0",
     "react-modal": "^3.16.1",
@@ -33,6 +35,7 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.0.5",
     "@svgr/webpack": "^6.5.1",
+    "@types/cors": "^2",
     "@types/eslint": "^8.4.10",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",

pages/_app.tsx

@@ -58,100 +58,6 @@ export default function App({ Component, pageProps }: AppProps) {
     <ThemeProvider theme={pageTheme}>
       <Head>
         <title>Interchain Name Service</title>
-        <meta content="Interchain Name Service" property="og:title" />
-        <meta content="Interchain Name Service" name="twitter:title" />
-        <meta
-          content="Your identity for the Interchain. Claim yours today."
-          property="og:description"
-        />
-        <meta
-          content="Your identity for the Interchain. Claim yours today."
-          property="twitter:description"
-        />
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-        <meta content={`${origin}/images/og-image.jpg`} name="twitter:image" />
-        <meta content={`ICNS image`} name="twitter:image:alt" />
-        <meta content={`${origin}/images/og-image.jpg`} property="og:image" />
-        <meta content="summary_large_image" name="twitter:card" />
-        <meta property="og:type" content="website" />
-
-        {/* generated favicons */}
-        <link
-          rel="apple-touch-icon"
-          sizes="57x57"
-          href="/images/favicon/apple-icon-57x57.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="60x60"
-          href="/images/favicon/apple-icon-60x60.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="72x72"
-          href="/images/favicon/apple-icon-72x72.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="76x76"
-          href="/images/favicon/apple-icon-76x76.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="114x114"
-          href="/images/favicon/apple-icon-114x114.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="120x120"
-          href="/images/favicon/apple-icon-120x120.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="144x144"
-          href="/images/favicon/apple-icon-144x144.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="152x152"
-          href="/images/favicon/apple-icon-152x152.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/images/favicon/apple-icon-180x180.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="192x192"
-          href="/images/favicon/android-icon-192x192.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/images/favicon/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="96x96"
-          href="/images/favicon/favicon-96x96.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/images/favicon/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/images/favicon/manifest.json" />
-        <meta name="msapplication-TileColor" content="#ffffff" />
-        <meta
-          name="msapplication-TileImage"
-          content="/images/favicon/ms-icon-144x144.png"
-        />
-        <meta name="theme-color" content="#ffffff" />
       </Head>
       <React.Fragment>
         <GlobalStyle />

pages/_document.tsx

@@ -54,6 +54,109 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
             rel="stylesheet"
           />
+          <meta content="Interchain Name Service" property="og:title" />
+          <meta content="Interchain Name Service" name="twitter:title" />
+          <meta
+            content="Your identity for the Interchain. Claim yours today."
+            property="og:description"
+          />
+          <meta
+            content="Your identity for the Interchain. Claim yours today."
+            property="twitter:description"
+          />
+          <meta
+            name="viewport"
+            content="initial-scale=1.0, width=device-width"
+          />
+          <meta
+            content={`https://app.icns.xyz/images/og-image.jpg`}
+            name="twitter:image"
+          />
+          <meta content={`ICNS image`} name="twitter:image:alt" />
+          <meta
+            content={`https://app.icns.xyz/images/og-image.jpg`}
+            property="og:image"
+          />
+          <meta content="summary_large_image" name="twitter:card" />
+          <meta property="og:type" content="website" />
+
+          {/* generated favicons */}
+          <link
+            rel="apple-touch-icon"
+            sizes="57x57"
+            href="/images/favicon/apple-icon-57x57.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="60x60"
+            href="/images/favicon/apple-icon-60x60.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="72x72"
+            href="/images/favicon/apple-icon-72x72.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="76x76"
+            href="/images/favicon/apple-icon-76x76.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="114x114"
+            href="/images/favicon/apple-icon-114x114.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="120x120"
+            href="/images/favicon/apple-icon-120x120.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="144x144"
+            href="/images/favicon/apple-icon-144x144.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="152x152"
+            href="/images/favicon/apple-icon-152x152.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/images/favicon/apple-icon-180x180.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="192x192"
+            href="/images/favicon/android-icon-192x192.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/images/favicon/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="96x96"
+            href="/images/favicon/favicon-96x96.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/images/favicon/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/images/favicon/manifest.json" />
+          <meta name="msapplication-TileColor" content="#ffffff" />
+          <meta
+            name="msapplication-TileImage"
+            content="/images/favicon/ms-icon-144x144.png"
+          />
+          <meta name="theme-color" content="#ffffff" />
         </Head>
         <body>
           <Main />

pages/api/allowlist.ts

@@ -0,0 +1,23 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { CHAIN_ALLOWLIST } from "../../constants/icns";
+import Cors from "cors";
+
+const cors = Cors({
+  methods: ["GET"],
+});
+
+export default async function (req: NextApiRequest, res: NextApiResponse) {
+  await new Promise((resolve, reject) => {
+    cors(req, res, (result: any) => {
+      if (result instanceof Error) {
+        return reject(result);
+      }
+
+      return resolve(result);
+    });
+  });
+
+  res.status(200).json({
+    chains: CHAIN_ALLOWLIST,
+  });
+}

pages/complete/index.tsx

@@ -77,7 +77,7 @@ export default function CompletePage() {
     const width = 500;
     const height = 700;
     window.open(
-      `${SHARE_URL}?url=https://app.icns.xyz?referral=${twitterUsername}&text=${shareMessage}`,
+      `${SHARE_URL}?url=https://app.icns.xyz/?referral=${twitterUsername}&text=${shareMessage}`,
       "Share Twitter",
       `top=${(window.screen.height - height) / 2}, left=${
         (window.screen.width - width) / 2

pages/index.tsx

@@ -6,17 +6,23 @@ import color from "../styles/color";
 
 // Components
 import { ConnectWalletModal } from "../components/connect-wallet-modal";
-import { PrimaryButton } from "../components/primary-button";
+import {
+  PrimaryButton,
+  Spinner,
+  SpinnerWrapper,
+} from "../components/primary-button";
 
 // Image Assets
 import { useEffect, useState } from "react";
 import { Logo } from "../components/logo";
-import { REFERRAL_KEY } from "../constants/icns";
+import { CLAIM_URL, REFERRAL_KEY } from "../constants/icns";
 import { SELECTED_WALLET_KEY } from "../constants/wallet";
 import StarIcon from "../public/images/svg/bg-asset-3.svg";
 import CheckIcon from "../public/images/svg/check-icon.svg";
 import MainLogo from "../public/images/svg/main-logo.svg";
 import MainTitle from "../public/images/svg/main-title.svg";
+import CountUp from "react-countup";
+import useInterval from "../hooks/use-interval";
 
 export default function Home() {
   const [currentReferral, setCurrentReferral] = useState("");
@@ -24,6 +30,8 @@ export default function Home() {
   const [isConnectWalletModalOpen, setIsConnectWalletModalOpen] =
     useState(false);
 
+  const [count, setCount] = useState<{ start: number; end: number }>();
+
   const onClickConnectWalletButton = async () => {
     amplitude.track("click connect wallet button");
 
@@ -46,10 +54,46 @@ export default function Home() {
     localStorage.removeItem(SELECTED_WALLET_KEY);
   }, []);
 
+  useEffect(() => {
+    setTimeout(() => {
+      countUpCallback();
+    }, 1000);
+  }, []);
+
+  useInterval(async () => {
+    await countUpCallback();
+  }, 10000);
+
+  const countUpCallback = async () => {
+    const response: { data: { count: number } } = await (
+      await fetch(CLAIM_URL)
+    ).json();
+
+    setCount({
+      start: (count?.end ?? 100) - 100,
+      end: response.data.count,
+    });
+  };
+
   return (
     <Container>
       <Logo />
 
+      <CountUpContainer>
+        {count ? (
+          <CountUpText>
+            <CountUp start={count?.start} end={count?.end ?? 0} duration={1} />
+          </CountUpText>
+        ) : (
+          <SpinnerWrapper>
+            <Spinner />
+            <Spinner />
+            <Spinner />
+            <Spinner />
+          </SpinnerWrapper>
+        )}
+        <CountUpDescription>ICNS names claimed so far</CountUpDescription>
+      </CountUpContainer>
       <MainContainer>
         <MainTitleContainer>
           <MainTitleImageBackground>
@@ -150,6 +194,45 @@ const MainContainer = styled.div`
   }
 `;
 
+const CountUpContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1.25rem;
+
+  width: calc(25rem - 2px);
+  height: calc(5rem - 2px);
+
+  position: absolute;
+
+  margin-top: calc(10rem + 2px);
+  margin-left: calc(55rem + 2px);
+
+  background-color: ${color.black};
+`;
+
+const CountUpText = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.2rem;
+  letter-spacing: 0.46rem;
+
+  color: ${color.white};
+`;
+
+const CountUpDescription = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.1rem;
+
+  color: ${color.grey["400"]};
+`;
+
 const MainTitleContainer = styled.div`
   display: flex;
   flex-direction: column;

pages/verification/index.tsx

@@ -106,6 +106,8 @@ export default function VerificationPage() {
   const [searchValue, setSearchValue] = useState("");
 
   const [nftOwnerAddress, setNFTOwnerAddress] = useState("");
+  // Handle the token id which actually registered.
+  const [registeredTwitterName, setRegisteredTwitterName] = useState("");
   const [isOwner, setIsOwner] = useState(false);
 
   const [isModalOpen, setModalOpen] = useState(false);
@@ -209,6 +211,13 @@ export default function VerificationPage() {
           isRegistered: "data" in registeredQueryResponse,
         });
 
+        if (
+          "data" in registeredQueryResponse &&
+          registeredQueryResponse.data?.name
+        ) {
+          setRegisteredTwitterName(registeredQueryResponse.data.name);
+        }
+
         if ("data" in registeredQueryResponse) {
           const ownerOfQueryResponse = await queryOwnerOfTwitterName(
             registeredQueryResponse.data.name,
@@ -465,7 +474,7 @@ export default function VerificationPage() {
           pathname: "complete",
           query: {
             txHash: Buffer.from(txHash).toString("hex"),
-            twitterUsername: twitterInfo.username,
+            twitterUsername: registeredTwitterName || twitterInfo.username,
           },
         });
       }
@@ -554,7 +563,11 @@ export default function VerificationPage() {
         ) : (
           <ContentContainer>
             <BackButton />
-            <TwitterProfile twitterProfileInformation={twitterAuthInfo} />
+            <TwitterProfile
+              isOwner={isOwner}
+              registeredTwitterName={registeredTwitterName}
+              twitterProfileInformation={twitterAuthInfo}
+            />
             <ChainListTitleContainer>
               <ChainListTitle>Chain List</ChainListTitle>
               <SearchInput

public/images/svg/icns-logo.svg

@@ -0,0 +1,13 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="19" height="19" rx="9.5" fill="#121212"/>
+<path d="M3.95654 6.78418H6.28393V10.0425H3.95654V6.78418Z" fill="#FB5232"/>
+<rect x="3.95654" y="4.45654" width="2.32738" height="2.32738" rx="1.16369" fill="#FFCDC4"/>
+<rect x="7.21484" y="10.042" width="2.32738" height="5.58572" fill="#EBFFBF"/>
+<path d="M3.95654 10.042V10.042C5.75607 10.042 7.21488 11.5008 7.21488 13.3003V15.6277H3.95654V10.042Z" fill="#00B86E"/>
+<path d="M6.28394 7.2494C6.28394 5.70695 7.53434 4.45654 9.0768 4.45654H15.128V10.0423H9.0768C7.53434 10.0423 6.28394 8.79186 6.28394 7.2494V7.2494Z" fill="#F4CC3E"/>
+<path d="M8.61133 7.24966C8.61133 6.99258 8.81973 6.78418 9.07681 6.78418H15.128V7.71513H9.07681C8.81973 7.71513 8.61133 7.50673 8.61133 7.24966V7.24966Z" fill="#121212"/>
+<path d="M9.5421 12.8353C9.5421 12.4686 9.61434 12.1054 9.75469 11.7666C9.89505 11.4277 10.1008 11.1198 10.3601 10.8605C10.6195 10.6011 10.9273 10.3954 11.2662 10.2551C11.605 10.1147 11.9682 10.0425 12.335 10.0425L12.335 12.8353H9.5421Z" fill="#BED4FF"/>
+<path d="M15.1278 12.835C15.1278 13.2017 15.0556 13.5649 14.9152 13.9037C14.7749 14.2426 14.5692 14.5505 14.3098 14.8098C14.0505 15.0692 13.7426 15.2749 13.4037 15.4152C13.0649 15.5556 12.7017 15.6278 12.335 15.6278L12.335 12.835H15.1278Z" fill="#5A4CFA"/>
+<path d="M12.335 10.0425H15.1278L12.335 12.8353V10.0425Z" fill="#BED4FF"/>
+<path d="M12.335 15.6279H9.5421L12.335 12.8351V15.6279Z" fill="#5A4CFA"/>
+</svg>

yarn.lock

@@ -2090,6 +2090,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-babel@npm:^6.0.2":
+  version: 6.0.3
+  resolution: "@rollup/plugin-babel@npm:6.0.3"
+  dependencies:
+    "@babel/helper-module-imports": ^7.18.6
+    "@rollup/pluginutils": ^5.0.1
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    "@types/babel__core": ^7.1.9
+    rollup: ^1.20.0||^2.0.0||^3.0.0
+  peerDependenciesMeta:
+    "@types/babel__core":
+      optional: true
+    rollup:
+      optional: true
+  checksum: 412c1c3bb5dd029cbf0b37315ad54b51ef378b8d2fd91d1ec44d73cade723cec8718b5affa2ce8a8b06660710d11765056fac4068521f18737ce26142506a8b1
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-sucrase@npm:4.0.4":
   version: 4.0.4
   resolution: "@rollup/plugin-sucrase@npm:4.0.4"
@@ -2124,6 +2143,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/pluginutils@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "@rollup/pluginutils@npm:5.0.2"
+  dependencies:
+    "@types/estree": ^1.0.0
+    estree-walker: ^2.0.2
+    picomatch: ^2.3.1
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: edea15e543bebc7dcac3b0ac8bc7b8e8e6dbd46e2864dbe5dd28072de1fbd5b0e10d545a610c0edaa178e8a7ac432e2a2a52e547ece1308471412caba47db8ce
+  languageName: node
+  linkType: hard
+
 "@rushstack/eslint-patch@npm:^1.1.3":
   version: 1.2.0
   resolution: "@rushstack/eslint-patch@npm:1.2.0"
@@ -2527,6 +2562,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cors@npm:^2":
+  version: 2.8.13
+  resolution: "@types/cors@npm:2.8.13"
+  dependencies:
+    "@types/node": "*"
+  checksum: 7ef197ea19d2e5bf1313b8416baa6f3fd6dd887fd70191da1f804f557395357dafd8bc8bed0ac60686923406489262a7c8a525b55748f7b2b8afa686700de907
+  languageName: node
+  linkType: hard
+
 "@types/eslint@npm:^8.4.10":
   version: 8.4.10
   resolution: "@types/eslint@npm:8.4.10"
@@ -2537,7 +2581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*":
+"@types/estree@npm:*, @types/estree@npm:^1.0.0":
   version: 1.0.0
   resolution: "@types/estree@npm:1.0.0"
   checksum: 910d97fb7092c6738d30a7430ae4786a38542023c6302b95d46f49420b797f21619cdde11fa92b338366268795884111c2eb10356e4bd2c8ad5b92941e9e6443
@@ -3741,6 +3785,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cors@npm:^2.8.5":
+  version: 2.8.5
+  resolution: "cors@npm:2.8.5"
+  dependencies:
+    object-assign: ^4
+    vary: ^1
+  checksum: ced838404ccd184f61ab4fdc5847035b681c90db7ac17e428f3d81d69e2989d2b680cc254da0e2554f5ed4f8a341820a1ce3d1c16b499f6e2f47a1b9b07b5006
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^7.0.1":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
@@ -3754,6 +3808,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"countup.js@npm:^2.3.2":
+  version: 2.3.2
+  resolution: "countup.js@npm:2.3.2"
+  checksum: 77bb509cd17619568c8d841f9dbba7d75c70948d7f9acd0a1acea80e3894c4b4173e27e8896268c1f53415ebee465229f1e623da5ad759083a618484ac4f9b60
+  languageName: node
+  linkType: hard
+
 "create-hash@npm:^1.1.0, create-hash@npm:^1.1.2, create-hash@npm:^1.2.0":
   version: 1.2.0
   resolution: "create-hash@npm:1.2.0"
@@ -4581,7 +4642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^2.0.1":
+"estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2":
   version: 2.0.2
   resolution: "estree-walker@npm:2.0.2"
   checksum: 6151e6f9828abe2259e57f5fd3761335bb0d2ebd76dc1a01048ccee22fabcfef3c0859300f6d83ff0d1927849368775ec5a6d265dde2f6de5a1be1721cd94efc
@@ -5196,6 +5257,7 @@ __metadata:
     "@next/eslint-plugin-next": ^13.0.5
     "@sentry/nextjs": ^7.27.0
     "@svgr/webpack": ^6.5.1
+    "@types/cors": ^2
     "@types/eslint": ^8.4.10
     "@types/node": 18.11.9
     "@types/react": 18.0.25
@@ -5207,6 +5269,7 @@ __metadata:
     "@typescript-eslint/parser": ^5.45.0
     axios: ^0.27.2
     buffer: ^6.0.3
+    cors: ^2.8.5
     crypto: ^1.0.1
     eslint: 8.28.0
     eslint-config-next: 13.0.5
@@ -5222,6 +5285,7 @@ __metadata:
     next: 13.0.5
     prettier: ^2.8.0
     react: 18.2.0
+    react-countup: ^6.4.0
     react-dom: 18.2.0
     react-is: ^18.2.0
     react-modal: ^3.16.1
@@ -6411,7 +6475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
+"object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
@@ -6841,6 +6905,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-countup@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "react-countup@npm:6.4.0"
+  dependencies:
+    "@rollup/plugin-babel": ^6.0.2
+    countup.js: ^2.3.2
+  peerDependencies:
+    react: ">= 16.3.0"
+  checksum: 259277fa70fc778fa3d67b375f5c44fdc3c8e5c9cc73225605f456adff31406966ff00379cb23ec771cb624a70c91c46d8216583c9dfc3fedb69071d31cb3208
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -8047,6 +8123,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vary@npm:^1":
+  version: 1.1.2
+  resolution: "vary@npm:1.1.2"
+  checksum: ae0123222c6df65b437669d63dfa8c36cee20a504101b2fcd97b8bf76f91259c17f9f2b4d70a1e3c6bbcee7f51b28392833adb6b2770b23b01abec84e369660b
+  languageName: node
+  linkType: hard
+
 "warning@npm:^4.0.3":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"