feat: create ZapPayRequestModal

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

@@ -42,6 +42,7 @@ import {
   UnauthorizedModal,
   VideoModal,
   EditRuleModal,
+  ZapPayRequestModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import ModalLoading from './modal-loading';
@@ -88,6 +89,7 @@ const MODAL_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
   'SELECT_BOOKMARK_FOLDER': SelectBookmarkFolderModal,
   'UNAUTHORIZED': UnauthorizedModal,
   'VIDEO': VideoModal,
+  'ZAP_PAY_REQUEST': ZapPayRequestModal,
 };
 
 export type ModalType = keyof typeof MODAL_COMPONENTS | null;

src/features/ui/components/modals/zap-pay-request.tsx

@@ -0,0 +1,32 @@
+import React  from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Modal } from 'soapbox/components/ui';
+
+import ZapPayRequestForm from '../../../zap/components/zap-pay-request-form';
+
+import type { Status as StatusEntity, Account as AccountEntity   } from 'soapbox/types/entities';
+
+interface IZapPayRequestModal {
+  account: AccountEntity;
+  status?: StatusEntity;
+  onClose:(type?: string) => void;
+}
+
+const ZapPayRequestModal: React.FC<IZapPayRequestModal> = ({ account, status, onClose }) => {
+  const onClickClose = () => {
+    onClose('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}>
+      <ZapPayRequestForm account={account} status={status} />
+    </Modal>
+  );
+};
+
+export default ZapPayRequestModal;

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

@@ -176,3 +176,4 @@ export const Relays = lazy(() => import('soapbox/features/admin/relays'));
 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'));