feat: zap request in new format

- pass account_id in /api/v1/ditto/zap request body
- get invoice from body instead of header

src/actions/interactions.ts

@@ -12,7 +12,7 @@ import { openModal } from './modals';
 import { expandGroupFeaturedTimeline } from './timelines';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Group, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, APIEntity, Group, Status as StatusEntity } from 'soapbox/types/entities';
 
 const REBLOG_REQUEST = 'REBLOG_REQUEST';
 const REBLOG_SUCCESS = 'REBLOG_SUCCESS';
@@ -314,26 +314,26 @@ const undislikeFail = (status: StatusEntity, error: unknown) => ({
   skipLoading: true,
 });
 
-const zap = (status: StatusEntity, amount: number, comment: string) => (dispatch: AppDispatch, getState: () => RootState) => {
+const zap = (account: AccountEntity, status: StatusEntity|undefined, amount: number, comment: string) => (dispatch: AppDispatch, getState: () => RootState) => {
   if (!isLoggedIn(getState)) return;
 
-  dispatch(zapRequest(status));
+  if (status) dispatch(zapRequest(status));
 
-  return api(getState).post(`/api/v1/statuses/${status.id}/zap`, { amount, comment: comment ?? '' }).then(async function(response) {
+  return api(getState).post('/api/v1/ditto/zap', { amount, comment: comment ?? '', account_id: account.id, status_id: status?.id ?? '' }).then(async function(response) {
-    const invoice = response.headers['ln-invoice'];
+    const { invoice } =  response.data;
     if (!invoice) throw Error('Could not generate invoice');
     if (!window.webln) return invoice;
 
     try {
       await window.webln?.enable();
       await window.webln?.sendPayment(invoice);
-      dispatch(zapSuccess(status));
+      if (status) dispatch(zapSuccess(status));
       return undefined;
     } catch (e) { // In case it fails we just return the invoice so the QR code can be created
       return invoice;
     }
   }).catch(function(e) {
-    dispatch(zapFail(status, e));
+    if (status) dispatch(zapFail(status, e));
   });
 };
 

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

@@ -27,17 +27,15 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
 
   const handleSubmit = async (e?: React.FormEvent<Element>) => {
     e?.preventDefault();
-    if (status) {
+    const invoice = await dispatch(zap(account, status, zapAmount * 1000, zapComment));
-      const invoice = await dispatch(zap(status, zapAmount * 1000, zapComment));
+    // If invoice is undefined it means the user has paid through his extension
-      // If invoice is undefined it means the user has paid through his extension
+    // In this case, we simply close the modal
-      // In this case, we simply close the modal
+    if (!invoice) {
-      if (!invoice) {
+      dispatch(closeModal('ZAP_PAY_REQUEST'));
-        dispatch(closeModal('ZAP_PAY_REQUEST'));
+      return;
-        return;
-      }
-      // open QR code modal
-      dispatch(openModal('ZAP_INVOICE', { invoice, account }));
     }
+    // open QR code modal
+    dispatch(openModal('ZAP_INVOICE', { invoice, account }));
   };
 
   const zapOptions = () => {