diff --git a/src/components/lightning/inline-invoice-card.tsx b/src/components/lightning/inline-invoice-card.tsx index 7d40eba01..9ff6c168a 100644 --- a/src/components/lightning/inline-invoice-card.tsx +++ b/src/components/lightning/inline-invoice-card.tsx @@ -2,16 +2,30 @@ import React, { useState } from "react"; import { useAsync } from "react-use"; import dayjs from "dayjs"; import { requestProvider } from "webln"; -import { Box, BoxProps, Button, ButtonGroup, IconButton, Text } from "@chakra-ui/react"; +import { + Box, + BoxProps, + Button, + ButtonGroup, + CloseButton, + Flex, + IconButton, + Input, + Text, + useDisclosure, +} from "@chakra-ui/react"; import { parsePaymentRequest, readablizeSats } from "../../helpers/bolt11"; -import { CopyToClipboardIcon } from "../icons"; +import { CopyIconButton } from "../copy-icon-button"; +import QrCode02 from "../icons/qr-code-02"; +import QrCodeSvg from "../qr-code/qr-code-svg"; export type InvoiceButtonProps = { paymentRequest: string; }; export const InlineInvoiceCard = ({ paymentRequest, ...props }: Omit & InvoiceButtonProps) => { const { value: invoice, error } = useAsync(async () => parsePaymentRequest(paymentRequest)); + const more = useDisclosure(); const [loading, setLoading] = useState(false); const handleClick = async (event: React.SyntheticEvent) => { @@ -41,37 +55,46 @@ export const InlineInvoiceCard = ({ paymentRequest, ...props }: Omit - - Lightning Invoice - {invoice.description} - - - - {isExpired ? "Expired" : "Expires"}: {dayjs(invoice.expiry).fromNow()} - - - - } - title="Copy to clipboard" - aria-label="copy invoice" - variant="outline" - /> - - - + {more.isOpen ? ( + <> + + + + + + + + + + ) : ( + + + Lightning Invoice + {invoice.description} + + + + {isExpired ? "Expired" : "Expires"}: {dayjs(invoice.expiry).fromNow()} + + + + + } onClick={more.onToggle} aria-label="Show QrCode" /> + + + + )} + ); }; diff --git a/src/views/discovery/dvm-feed/components/feed-status.tsx b/src/views/discovery/dvm-feed/components/feed-status.tsx index 644d1cd0e..f7923f84b 100644 --- a/src/views/discovery/dvm-feed/components/feed-status.tsx +++ b/src/views/discovery/dvm-feed/components/feed-status.tsx @@ -73,7 +73,7 @@ export default function FeedStatus({ chain, pointer }: { chain: ChainedDVMJob[]; const response = lastJob.responses.find((r) => r.pubkey === pointer.pubkey); if (response?.result) return ; - const cardProps = { minW: "2xl", mx: "auto" }; + const cardProps = { w: "full", maxW: "2xl", mx: "auto", overflow: "hidden" }; const cardHeader = ( @@ -109,7 +109,7 @@ export default function FeedStatus({ chain, pointer }: { chain: ChainedDVMJob[]; ); case "processing": return ( - + Processing @@ -119,7 +119,7 @@ export default function FeedStatus({ chain, pointer }: { chain: ChainedDVMJob[]; ); case "error": return ( - + Error! diff --git a/src/views/discovery/dvm-feed/components/feed.tsx b/src/views/discovery/dvm-feed/components/feed.tsx index 0116f61f6..7c8bdbc76 100644 --- a/src/views/discovery/dvm-feed/components/feed.tsx +++ b/src/views/discovery/dvm-feed/components/feed.tsx @@ -1,6 +1,7 @@ -import { ChainedDVMJob, getEventIdsFromJobs } from "../../../../helpers/nostr/dvm"; import FeedStatus from "./feed-status"; import { AddressPointer } from "nostr-tools/nip19"; + +import { ChainedDVMJob, getEventIdsFromJobs } from "../../../../helpers/nostr/dvm"; import useSingleEvents from "../../../../hooks/use-single-events"; import TimelineItem from "../../../../components/timeline-page/generic-note-timeline/timeline-item";