Show invite link only to registered twitter user

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,7 +30,8 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
 
   return (
     <ProfileContainer color={color.grey["900"]}>
-      {isCopied ? (
+      {registeredTwitterName ? (
+        isCopied ? (
           <InviteLinkContainer>
             copied
             <CopiedIcon
@@ -71,7 +73,8 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
               />
             </CopyIcon>
           </InviteLinkContainer>
-      )}
+        )
+      ) : null}
       <ProfileImageContainer>
         <Image
           src={twitterProfileInformation?.profile_image_url ?? ""}

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>