Add invite copy button
This commit is contained in:
HeesungB
parent
e12fdbfbda
commit
5a67d14139
@ -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;
|
||||
|
||||
@ -554,7 +554,10 @@ export default function VerificationPage() {
|
||||
) : (
|
||||
<ContentContainer>
|
||||
<BackButton />
|
||||
<TwitterProfile twitterProfileInformation={twitterAuthInfo} />
|
||||
<TwitterProfile
|
||||
isOwner={isOwner}
|
||||
twitterProfileInformation={twitterAuthInfo}
|
||||
/>
|
||||
<ChainListTitleContainer>
|
||||
<ChainListTitle>Chain List</ChainListTitle>
|
||||
<SearchInput
|
||||
|
||||
13
public/images/svg/icns-logo.svg
Normal file
13
public/images/svg/icns-logo.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in New Issue
Block a user