fix(zaps): zap split UX

Closes #140

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>
       )
     }