From 9287822c64f747b3d19f784070a812c51e5ea14b Mon Sep 17 00:00:00 2001
From: en <enes@nostrdev.com>
Date: Thu, 30 Jan 2025 18:01:37 +0100
Subject: [PATCH 1/2] fix(zaps): zap split UX

Closes #140
---
 src/components/Zap.tsx | 76 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/components/Zap.tsx b/src/components/Zap.tsx
index 5a1fe9f..dfd1a74 100644
--- a/src/components/Zap.tsx
+++ b/src/components/Zap.tsx
@@ -2,6 +2,7 @@ import { getRelayListForUser } from '@nostr-dev-kit/ndk'
 import { QRCodeSVG } from 'qrcode.react'
 import React, {
   Dispatch,
+  PropsWithChildren,
   ReactNode,
   SetStateAction,
   useCallback,
@@ -135,8 +136,9 @@ export const ZapQR = React.memo(
     handleClose,
     handleQRExpiry,
     setTotalZapAmount,
-    setHasZapped
-  }: ZapQRProps) => {
+    setHasZapped,
+    children
+  }: PropsWithChildren<ZapQRProps>) => {
     const { ndk } = useNDKContext()
 
     useDidMount(() => {
@@ -176,13 +178,22 @@ export const ZapQR = React.memo(
     }
 
     return (
-      <div className='inputLabelWrapperMain' style={{ alignItems: 'center' }}>
+      <div
+        className='inputLabelWrapperMain inputLabelWrapperMainQR'
+        style={{ alignItems: 'center' }}
+      >
         <QRCodeSVG
           className='popUpMainCardBottomQR'
           onClick={onQrCodeClicked}
           value={paymentRequest.pr}
           height={235}
           width={235}
+          imageSettings={{
+            src: 'https://m.primal.net/JPWc.png',
+            height: 35,
+            width: 35,
+            excavate: false
+          }}
         />
         <label
           className='popUpMainCardBottomLnurl'
@@ -195,6 +206,7 @@ export const ZapQR = React.memo(
           {paymentRequest.pr}
         </label>
         <Timer onTimerExpired={handleQRExpiry} />
+        {children}
       </div>
     )
   }
@@ -749,6 +761,56 @@ export const ZapSplit = ({
     if (!invoices) return null
 
     const authorInvoice = invoices.get('author')
+    const feedback = (isFirst: boolean) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          flexWrap: 'wrap',
+          gridGap: '10px'
+        }}
+      >
+        <div
+          className='btn btnMain'
+          style={{
+            flexGrow: 1,
+            cursor: 'default',
+            background: isFirst ? undefined : 'unset'
+          }}
+        >
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='-64 0 512 512'
+            width='1em'
+            height='1em'
+            fill='currentColor'
+          >
+            <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
+          </svg>
+          1st Invoice
+        </div>
+        <div
+          className='btn btnMain'
+          style={{
+            flexGrow: 1,
+            cursor: 'default',
+            background: isFirst ? 'unset' : undefined
+          }}
+        >
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='-64 0 512 512'
+            width='1em'
+            height='1em'
+            fill='currentColor'
+          >
+            <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
+          </svg>
+          2nd Invoice
+        </div>
+      </div>
+    )
     if (authorInvoice) {
       return (
         <ZapQR
@@ -758,7 +820,9 @@ export const ZapSplit = ({
           handleQRExpiry={() => removeInvoice('author')}
           setTotalZapAmount={setTotalZapAmount}
           setHasZapped={setHasZapped}
-        />
+        >
+          {feedback(true)}
+        </ZapQR>
       )
     }
 
@@ -773,7 +837,9 @@ export const ZapSplit = ({
             handleClose()
           }}
           handleQRExpiry={() => removeInvoice('admin')}
-        />
+        >
+          {feedback(false)}
+        </ZapQR>
       )
     }
 
-- 
2.34.1


From c1b4dac5a38349b6dccc8267c75b4f46403e7953 Mon Sep 17 00:00:00 2001
From: en <enes@nostrdev.com>
Date: Thu, 30 Jan 2025 18:21:55 +0100
Subject: [PATCH 2/2] feat(zaps): show profile image on qr if available

---
 src/components/Zap.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/Zap.tsx b/src/components/Zap.tsx
index dfd1a74..376397c 100644
--- a/src/components/Zap.tsx
+++ b/src/components/Zap.tsx
@@ -128,6 +128,7 @@ type ZapQRProps = {
   handleQRExpiry: () => void
   setTotalZapAmount?: Dispatch<SetStateAction<number>>
   setHasZapped?: Dispatch<SetStateAction<boolean>>
+  profileImage?: string
 }
 
 export const ZapQR = React.memo(
@@ -137,6 +138,7 @@ export const ZapQR = React.memo(
     handleQRExpiry,
     setTotalZapAmount,
     setHasZapped,
+    profileImage,
     children
   }: PropsWithChildren<ZapQRProps>) => {
     const { ndk } = useNDKContext()
@@ -188,13 +190,22 @@ export const ZapQR = React.memo(
           value={paymentRequest.pr}
           height={235}
           width={235}
-          imageSettings={{
-            src: 'https://m.primal.net/JPWc.png',
-            height: 35,
-            width: 35,
-            excavate: false
-          }}
         />
+        {profileImage && (
+          <div style={{ marginTop: '-20px' }}>
+            <img
+              src={profileImage}
+              alt='Profile Avatar'
+              style={{
+                width: '100%',
+                maxWidth: '50px',
+                borderRadius: '8px',
+                border: 'solid 2px #494949',
+                boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
+              }}
+            />
+          </div>
+        )}
         <label
           className='popUpMainCardBottomLnurl'
           onClick={() => {
@@ -273,7 +284,7 @@ export const ZapPopUp = ({
   const [amount, setAmount] = useState<number>(0)
   const [message, setMessage] = useState('')
   const [paymentRequest, setPaymentRequest] = useState<PaymentRequest>()
-
+  const [receiverMetadata, setRecieverMetadata] = useState<UserProfile>()
   const userState = useAppSelector((state) => state.user)
 
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -320,6 +331,8 @@ export const ZapPopUp = ({
         return null
       }
 
+      setRecieverMetadata(receiverMetadata)
+
       // Find the receiver's read relays.
       const receiverRelays = await Promise.race([
         getRelayListForUser(receiver, ndk),
@@ -490,6 +503,7 @@ export const ZapPopUp = ({
                       handleQRExpiry={handleQRExpiry}
                       setTotalZapAmount={setTotalZapAmount}
                       setHasZapped={setHasZapped}
+                      profileImage={receiverMetadata?.image}
                     />
                   )}
                   {lastNode}
@@ -820,6 +834,7 @@ export const ZapSplit = ({
           handleQRExpiry={() => removeInvoice('author')}
           setTotalZapAmount={setTotalZapAmount}
           setHasZapped={setHasZapped}
+          profileImage={author?.image}
         >
           {feedback(true)}
         </ZapQR>
@@ -837,6 +852,7 @@ export const ZapSplit = ({
             handleClose()
           }}
           handleQRExpiry={() => removeInvoice('admin')}
+          profileImage={admin?.image}
         >
           {feedback(false)}
         </ZapQR>
-- 
2.34.1