From a6795dd2b39fac3bd3626c15d28f6137693c6243 Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 29 May 2024 18:23:59 -0300
Subject: [PATCH] feat: create ZapPayRequestModal

---
 src/features/ui/components/modal-root.tsx     |  2 ++
 .../ui/components/modals/zap-pay-request.tsx  | 32 +++++++++++++++++++
 src/features/ui/util/async-components.ts      |  1 +
 3 files changed, 35 insertions(+)
 create mode 100644 src/features/ui/components/modals/zap-pay-request.tsx

diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index 5fdc0225a..3f0743df2 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/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;
diff --git a/src/features/ui/components/modals/zap-pay-request.tsx b/src/features/ui/components/modals/zap-pay-request.tsx
new file mode 100644
index 000000000..34c627f1b
--- /dev/null
+++ b/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;
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index 7d413bc5b..d358c3bd3 100644
--- a/src/features/ui/util/async-components.ts
+++ b/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'));