cerc-io/icns-frontend
16
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

Show invite link only to registered twitter user

Browse Source
This commit is contained in:
Thunnini 2022-12-21 23:10:18 +09:00
parent 7addde9981
commit 5a8878c9e3
2 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
components/twitter-profile/index.tsx
View File

@ -8,16 +8,17 @@ import ICNSIcon from "../../public/images/svg/icns-logo.svg";
interface Props { interface Props {
isOwner?: boolean; isOwner?: boolean;
registeredTwitterName?: string;
twitterProfileInformation?: TwitterAuthInfoResponse | null; twitterProfileInformation?: TwitterAuthInfoResponse | null;
} }
export const TwitterProfile: FunctionComponent<Props> = (props) => { export const TwitterProfile: FunctionComponent<Props> = (props) => {
const { isOwner, twitterProfileInformation } = props; const { isOwner, registeredTwitterName, twitterProfileInformation } = props;
const [isCopied, setIsCopied] = useState<boolean>(false); const [isCopied, setIsCopied] = useState<boolean>(false);
const onClickInviteLink = async () => { const onClickInviteLink = async () => {
await navigator.clipboard.writeText( await navigator.clipboard.writeText(
`https://app.icns.xyz?referral=${twitterProfileInformation?.username}`, `https://app.icns.xyz?referral=${registeredTwitterName}`,
); );
setIsCopied(true); setIsCopied(true);
@ -29,49 +30,51 @@ export const TwitterProfile: FunctionComponent<Props> = (props) => {
return ( return (
<ProfileContainer color={color.grey["900"]}> <ProfileContainer color={color.grey["900"]}>
{isCopied ? ( {registeredTwitterName ? (
<InviteLinkContainer> isCopied ? (
copied <InviteLinkContainer>
<CopiedIcon copied
width="14" <CopiedIcon
height="12" width="14"
viewBox="0 0 14 12" height="12"
fill="none" viewBox="0 0 14 12"
xmlns="http://www.w3.org/2000/svg" fill="none"
> xmlns="http://www.w3.org/2000/svg"
<path >
d="M2 4.92614L6.08333 9.9375L12.5 2.0625" <path
stroke="current" d="M2 4.92614L6.08333 9.9375L12.5 2.0625"
strokeWidth="2" stroke="current"
strokeLinecap="square" strokeWidth="2"
/> strokeLinecap="square"
</CopiedIcon> />
</InviteLinkContainer> </CopiedIcon>
) : ( </InviteLinkContainer>
<InviteLinkContainer onClick={onClickInviteLink}> ) : (
copy invite link <InviteLinkContainer onClick={onClickInviteLink}>
<CopyIcon copy invite link
xmlns="http://www.w3.org/2000/svg" <CopyIcon
width="16" xmlns="http://www.w3.org/2000/svg"
height="16" width="16"
fill="none" height="16"
viewBox="0 0 16 16" fill="none"
> viewBox="0 0 16 16"
<path >
stroke="current" <path
strokeLinecap="square" stroke="current"
strokeWidth="1.5" strokeLinecap="square"
d="M10.667 2.667h-8v8" strokeWidth="1.5"
/> d="M10.667 2.667h-8v8"
<path />
stroke="current" <path
strokeLinecap="square" stroke="current"
strokeWidth="1.5" strokeLinecap="square"
d="M5.417 5.417H13.25V13.25H5.417z" strokeWidth="1.5"
/> d="M5.417 5.417H13.25V13.25H5.417z"
</CopyIcon> />
</InviteLinkContainer> </CopyIcon>
)} </InviteLinkContainer>
)
) : null}
<ProfileImageContainer> <ProfileImageContainer>
<Image <Image
src={twitterProfileInformation?.profile_image_url ?? ""} src={twitterProfileInformation?.profile_image_url ?? ""}

10
pages/verification/index.tsx
View File

@ -106,6 +106,8 @@ export default function VerificationPage() {
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
const [nftOwnerAddress, setNFTOwnerAddress] = useState(""); const [nftOwnerAddress, setNFTOwnerAddress] = useState("");
// Handle the token id which actually registered.
const [registeredTwitterName, setRegisteredTwitterName] = useState("");
const [isOwner, setIsOwner] = useState(false); const [isOwner, setIsOwner] = useState(false);
const [isModalOpen, setModalOpen] = useState(false); const [isModalOpen, setModalOpen] = useState(false);
@ -209,6 +211,13 @@ export default function VerificationPage() {
isRegistered: "data" in registeredQueryResponse, isRegistered: "data" in registeredQueryResponse,
}); });
if (
"data" in registeredQueryResponse &&
registeredQueryResponse.data?.name
) {
setRegisteredTwitterName(registeredQueryResponse.data.name);
}
if ("data" in registeredQueryResponse) { if ("data" in registeredQueryResponse) {
const ownerOfQueryResponse = await queryOwnerOfTwitterName( const ownerOfQueryResponse = await queryOwnerOfTwitterName(
registeredQueryResponse.data.name, registeredQueryResponse.data.name,
@ -556,6 +565,7 @@ export default function VerificationPage() {
<BackButton /> <BackButton />
<TwitterProfile <TwitterProfile
isOwner={isOwner} isOwner={isOwner}
registeredTwitterName={registeredTwitterName}
twitterProfileInformation={twitterAuthInfo} twitterProfileInformation={twitterAuthInfo}
/> />
<ChainListTitleContainer> <ChainListTitleContainer>