feat: create ZapInvoiceModal and use it

src/features/ui/components/modal-root.tsx

@@ -43,6 +43,7 @@ import {
   VideoModal,
   EditRuleModal,
   ZapPayRequestModal,
+  ZapInvoiceModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import ModalLoading from './modal-loading';
@@ -89,6 +90,7 @@ const MODAL_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
   'SELECT_BOOKMARK_FOLDER': SelectBookmarkFolderModal,
   'UNAUTHORIZED': UnauthorizedModal,
   'VIDEO': VideoModal,
+  'ZAP_INVOICE': ZapInvoiceModal,
   'ZAP_PAY_REQUEST': ZapPayRequestModal,
 };
 

src/features/ui/components/modals/zap-invoice.tsx

@@ -0,0 +1,46 @@
+import { QRCodeCanvas } from 'qrcode.react';
+import React  from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { closeModal } from 'soapbox/actions/modals';
+import CopyableInput from 'soapbox/components/copyable-input';
+import { Modal, Button } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
+});
+
+interface IZapInvoice{
+  account: AccountEntity;
+  invoice: string;
+  onClose:(type?: string) => void;
+}
+
+const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onClickClose = () => {
+    onClose('ZAP_INVOICE');
+    dispatch(closeModal('ZAP_PAY_REQUEST'));
+  };
+
+  const renderTitle = () => {
+    return <FormattedMessage id='zap.send_to' defaultMessage='Send zaps to {target}' values={{ target: account.display_name }} />;
+  };
+
+  return (
+    <Modal title={renderTitle()} onClose={onClickClose}>
+      <QRCodeCanvas value={invoice} />
+      <CopyableInput value={invoice} />
+      <a href={'lightning:' + invoice}>
+        <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+      </a>
+    </Modal>
+  );
+};
+
+export default ZapInvoiceModal;

src/features/ui/util/async-components.ts

@@ -177,3 +177,4 @@ export const Rules = lazy(() => import('soapbox/features/admin/rules'));
 export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
 export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));
 export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request'));
+export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice'));

src/features/zap/components/zap-pay-request-form.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { zap } from 'soapbox/actions/interactions';
-import { closeModal } from 'soapbox/actions/modals';
+import { openModal, closeModal } from 'soapbox/actions/modals';
 import Account from 'soapbox/components/account';
 import { Stack, Button, Select } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
@@ -36,6 +36,7 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
         return;
       }
       // open QR code modal
+      dispatch(openModal('ZAP_INVOICE', { invoice, account }));
     }
   };