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

0% Statements 0/18
0% Branches 0/12
0% Functions 0/6
0% Lines 0/18

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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128                                                                                                                                                                                                                                                               
import styled from "styled-components";
import { useState } from "react";
import { Box, Button, Text, Flex, Flash } from "rimble-ui";
import { ContentCopy } from "@rimble/icons";
import { VC } from "vc-schema-tools";
import { HoverPathFill, ShareIcon, UnstyledButton } from "../../../elements";
import { ModalContentFullWidth, ModalWithX } from "../../../elements/Modals";
import { H3, H6 } from "../../../layouts/LayoutComponents";
import { colors, fonts } from "../../../../themes";
import { config } from "../../../../config";
import { CopyableTruncatableText } from "../../../elements/CopyableTruncatableText/CopyableTruncatableText";
import { ShareViaDidComm } from "./ShareViaDidComm";
import { ShareViaQr } from "./ShareViaQr";
import { ShareViaSocial } from "./ShareViaSocial";
 
const _ShareBox: React.FC<{ className?: string }> = (props) => (
  <Box borderBottom={4} p={4} className={props.className}>
    {props.children}
  </Box>
);
const ShareBox = styled(_ShareBox)`
  &:first-child {
    padding-top: 0;
  }
  &:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
`;
 
export interface CredentialShareProps {
  vc: VC;
  issueVcFlow?: boolean;
}
 
export const CredentialShare: React.FC<CredentialShareProps> = (props) => {
  const { vc, issueVcFlow } = props;
 
  if (!vc.proof?.jwt) {
    return <Flash variant="danger">Cannot share VC: missing proof.jwt</Flash>;
  }
 
  const vcUrl = `${config.SEARCH_UI_URL}/vc-validator?vc=${vc.proof.jwt}`;
  return (
    <>
      <ShareBox>
        <H3 mt={0} mb={1}>
          {issueVcFlow ? "Recipient Information" : "Share Credential"}
        </H3>
        <Text color={colors.silver} fontFamily={fonts.sansSerif} fontSize={1}>
          Choose any methods below to send or share credential.
        </Text>
      </ShareBox>
 
      <ShareBox>
        <H6 mt={0} mb={2}>
          Send by Identifier (DID)
        </H6>
        <ShareViaDidComm vc={vc} />
      </ShareBox>
 
      <ShareBox>
        <H6 mt={0} mb={2}>
          Share by link
        </H6>
        <CopyableTruncatableText
          text={vcUrl}
          useInput
          copyButtonOverride={(copied) => (
            <Button>
              <Flex alignItems="center">
                <ContentCopy size="24px" mr={2} /> {copied ? "Copied" : "Copy"}
              </Flex>
            </Button>
          )}
        />
      </ShareBox>
 
      <ShareBox>
        <H6 mt={0} mb={3}>
          Share on social media
        </H6>
        <ShareViaSocial vc={vc} vcUrl={vcUrl} />
      </ShareBox>
 
      {issueVcFlow && (
        <ShareBox>
          <H6 mt={0} mb={3}>
            Share by QR code
          </H6>
          <ShareViaQr url={vcUrl} inline />
        </ShareBox>
      )}
    </>
  );
};
 
export const CredentialShareButton: React.FC<CredentialShareProps> = (props) => {
  const { vc } = props;
  const [modalOpen, setModalOpen] = useState(false);
 
  if (!vc.proof) {
    // VC has no JWT so can't initialize share component - it probably hasn't been isued yet
    return <></>;
  }
 
  return (
    <>
      {props.children || (
        <UnstyledButton onClick={() => setModalOpen(true)}>
          <HoverPathFill>
            <Box p={1}>
              <ShareIcon />
            </Box>
          </HoverPathFill>
        </UnstyledButton>
      )}
 
      <ModalWithX isOpen={modalOpen} close={() => setModalOpen(false)} width={9}>
        <ModalContentFullWidth>
          <CredentialShare vc={vc} />
        </ModalContentFullWidth>
        <Box p={3} />
      </ModalWithX>
    </>
  );
};