Add invite copy button

components/twitter-profile/index.tsx

@@ -1,18 +1,77 @@
 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;
   twitterProfileInformation?: TwitterAuthInfoResponse | null;
 }
 
 export const TwitterProfile: FunctionComponent<Props> = (props) => {
-  const { twitterProfileInformation } = props;
+  const { isOwner, twitterProfileInformation } = props;
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const onClickInviteLink = async () => {
+    await navigator.clipboard.writeText(
+      `https://app.icns.xyz?referral=${twitterProfileInformation?.username}`,
+    );
+
+    setIsCopied(true);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
 
   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>
+      )}
       <ProfileImageContainer>
         <Image
           src={twitterProfileInformation?.profile_image_url ?? ""}
@@ -24,7 +83,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 +123,8 @@ export const ProfileContainer = styled.div`
   display: flex;
   flex-direction: row;
 
+  position: relative;
+
   width: 100%;
 
   padding: 1.5rem 2rem;
@@ -65,6 +132,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 +193,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 +206,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;

pages/verification/index.tsx

@@ -554,7 +554,10 @@ export default function VerificationPage() {
         ) : (
           <ContentContainer>
             <BackButton />
-            <TwitterProfile twitterProfileInformation={twitterAuthInfo} />
+            <TwitterProfile
+              isOwner={isOwner}
+              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>