diff --git a/components/twitter-profile/index.tsx b/components/twitter-profile/index.tsx index 72a8598..0161fa5 100644 --- a/components/twitter-profile/index.tsx +++ b/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) => { - const { twitterProfileInformation } = props; + const { isOwner, twitterProfileInformation } = props; + const [isCopied, setIsCopied] = useState(false); + + const onClickInviteLink = async () => { + await navigator.clipboard.writeText( + `https://app.icns.xyz?referral=${twitterProfileInformation?.username}`, + ); + + setIsCopied(true); + + setTimeout(() => { + setIsCopied(false); + }, 1000); + }; return ( + {isCopied ? ( + + copied + + + + + ) : ( + + copy invite link + + + + + + )} = (props) => { - {twitterProfileInformation?.name} + {twitterProfileInformation?.name} + + {isOwner ? ( + + + + ) : null} @{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; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index 49a46b3..03a3103 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -554,7 +554,10 @@ export default function VerificationPage() { ) : ( - + Chain List + + + + + + + + + + + +