All files / src/components/views/Credentials/CredentialShare SocialMediaVerify.tsx

0% Statements 0/35
0% Branches 0/22
0% Functions 0/4
0% Lines 0/35

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>
    </>
  );
};