feat(zaps): show profile image on qr if available

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>