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