Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import styled from "styled-components"; import { useState } from "react"; import { Tooltip, Box, Text } from "rimble-ui"; import { VC } from "vc-schema-tools"; import { TwitterBird, LinkedIn, Facebook, Medium, YouTube } from "../../../elements/Icons"; import { baseColors } from "../../../../themes/colors"; import { SvgProps } from "../../../elements/Icons/SvgProps"; import { ModalWithX } from "../../../elements/Modals"; import { CopyToClipboard } from "../../../elements/CopyToClipboard/CopyToClipboard"; const ShareTextTextarea = styled.textarea` width: 100%; height: 320px; `; function getShareLink( vc: VC, vcUrl: string, ): { shareLink?: string; Icon?: React.FC<SvgProps>; showCopyModal?: boolean; shareText?: string; siteName?: string } { const profileUrl: string | false = vc.type.includes("SocialMediaProfileLinkage") && vc.credentialSubject.socialMediaProfileUrl; if (!profileUrl) { return {}; } const shareText = `I'm linking this account to my Decentralized Identifier (DID) My credential 👉 ${vcUrl}`; let shareLink: string | undefined; let Icon: React.FC | undefined; let showCopyModal = false; let siteName: string | undefined; if (profileUrl.includes("twitter.com")) { shareLink = "https://twitter.com/intent/tweet?hashtags=SertoID&text=" + encodeURIComponent(shareText); Icon = TwitterBird; siteName = "Twitter"; } else if (profileUrl.includes("linkedin.com")) { shareLink = "https://www.linkedin.com/sharing/share-offsite/?url=" + encodeURIComponent(vcUrl); Icon = LinkedIn; siteName = "LinkedIn"; } else if (profileUrl.includes("facebook.com")) { shareLink = "https://www.facebook.com/sharer.php?u=" + encodeURIComponent(vcUrl); Icon = Facebook; siteName = "Facebook"; } else if (profileUrl.includes("medium.com")) { showCopyModal = true; Icon = Medium; siteName = "Medium"; } else if (profileUrl.includes("youtube.com")) { showCopyModal = true; Icon = YouTube; siteName = "YouTube"; } return { shareLink, Icon, showCopyModal, shareText, siteName }; } export const SocialMediaVerify: React.FunctionComponent<{ vc: VC; vcUrl: string }> = (props) => { const { shareLink, Icon, showCopyModal, shareText, siteName } = getShareLink(props.vc, props.vcUrl); const [isModalOpen, setIsModalOpen] = useState(false); if (!Icon || !shareText) { return null; } return ( <> <Tooltip placement="top" message="Verify account by publishing this credential"> {showCopyModal ? ( <span onClick={() => setIsModalOpen(true)} style={{ cursor: "pointer" }}> <Icon color={baseColors.warning} /> </span> ) : ( <a href={shareLink} target="_blank"> <Icon color={baseColors.warning} /> </a> )} </Tooltip> <ModalWithX borderRadius={2} isOpen={isModalOpen} close={() => setIsModalOpen(false)}> <Box maxWidth={9} px={5} py={3}> <Text my={4}> Copy and paste the following message into your {siteName} about page, or into{" "} {siteName === "YouTube" ? "the description of a video (can be unlisted)" : "a post"} on your account: </Text> <ShareTextTextarea value={shareText} readOnly /> <Box mt={3}> <CopyToClipboard textButton text={shareText} /> </Box> <Text my={4}> Note that you may change the message, but the URL itself must be included for verification. </Text> </Box> </ModalWithX> </> ); }; |