From 5a8878c9e31ac6ae219cd2e7227f1a79ebad5f18 Mon Sep 17 00:00:00 2001
From: Thunnini <yunjh1994@gmail.com>
Date: Wed, 21 Dec 2022 23:10:18 +0900
Subject: [PATCH] Show invite link only to registered twitter user

---
 components/twitter-profile/index.tsx | 93 ++++++++++++++--------------
 pages/verification/index.tsx         | 10 +++
 2 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/components/twitter-profile/index.tsx b/components/twitter-profile/index.tsx
index 0161fa5..00d14bf 100644
--- a/components/twitter-profile/index.tsx
+++ b/components/twitter-profile/index.tsx
@@ -8,16 +8,17 @@ 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 { isOwner, 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=${twitterProfileInformation?.username}`,
+      `https://app.icns.xyz?referral=${registeredTwitterName}`,
     );
 
     setIsCopied(true);
@@ -29,49 +30,51 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
 
   return (
     <ProfileContainer color={color.grey["900"]}>
-      {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>
-      )}
+      {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 ?? ""}
diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx
index 03a3103..d027802 100644
--- a/pages/verification/index.tsx
+++ b/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,
@@ -556,6 +565,7 @@ export default function VerificationPage() {
             <BackButton />
             <TwitterProfile
               isOwner={isOwner}
+              registeredTwitterName={registeredTwitterName}
               twitterProfileInformation={twitterAuthInfo}
             />
             <ChainListTitleContainer>