Merge branch 'main' into enhance-lightning-design

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) {
-    const invoice = response.headers['ln-invoice'];
+  return api(getState).post('/api/v1/ditto/zap', { amount, comment, account_id: account.id, status_id: status?.id }).then(async function(response) {
+    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/account/components/header.tsx

@@ -75,6 +75,7 @@ const messages = defineMessages({
   profileExternal: { id: 'account.profile_external', defaultMessage: 'View profile on {domain}' },
   header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
   subscribeFeed: { id: 'account.rss_feed', defaultMessage: 'Subscribe to RSS feed' },
+  zap: { id: 'zap.send_to', defaultMessage: 'Send zaps to {target}' },
 });
 
 interface IHeader {
@@ -282,6 +283,10 @@ const Header: React.FC<IHeader> = ({ account }) => {
     copy(nip19.npubEncode(account.nostr.pubkey!));
   };
 
+  const handleZapAccount: React.EventHandler<React.MouseEvent> = (e) => {
+    dispatch(openModal('ZAP_PAY_REQUEST', { account }));
+  };
+
   const makeMenu = () => {
     const menu: Menu = [];
 
@@ -621,8 +626,22 @@ const Header: React.FC<IHeader> = ({ account }) => {
     );
   };
 
+  const renderZapAccount = () => {
+    return (
+      <IconButton
+        src={require('@tabler/icons/outline/bolt.svg')}
+        onClick={handleZapAccount}
+        title={intl.formatMessage(messages.zap, { target: account.display_name })}
+        theme='outlined'
+        className='px-2'
+        iconClassName='h-4 w-4'
+      />
+    );
+  };
+
   const info = makeInfo();
   const menu = makeMenu();
+  const acceptsZaps = account.ditto.accepts_zaps === true;
 
   return (
     <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
@@ -664,6 +683,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <SubscriptionButton account={account} />
               {renderMessageButton()}
               {renderShareButton()}
+              {acceptsZaps && renderZapAccount()}
 
               {menu.length > 0 && (
                 <DropdownMenu items={menu} placement='bottom-end'>

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

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