diff --git a/src/components/Zap.tsx b/src/components/Zap.tsx index 5a1fe9f..376397c 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, @@ -127,6 +128,7 @@ type ZapQRProps = { handleQRExpiry: () => void setTotalZapAmount?: Dispatch> setHasZapped?: Dispatch> + profileImage?: string } export const ZapQR = React.memo( @@ -135,8 +137,10 @@ export const ZapQR = React.memo( handleClose, handleQRExpiry, setTotalZapAmount, - setHasZapped - }: ZapQRProps) => { + setHasZapped, + profileImage, + children + }: PropsWithChildren) => { const { ndk } = useNDKContext() useDidMount(() => { @@ -176,7 +180,10 @@ export const ZapQR = React.memo( } return ( -
+
+ {profileImage && ( +
+ Profile Avatar +
+ )} + {children}
) } @@ -261,7 +284,7 @@ export const ZapPopUp = ({ const [amount, setAmount] = useState(0) const [message, setMessage] = useState('') const [paymentRequest, setPaymentRequest] = useState() - + const [receiverMetadata, setRecieverMetadata] = useState() const userState = useAppSelector((state) => state.user) const handleAmountChange = (event: React.ChangeEvent) => { @@ -308,6 +331,8 @@ export const ZapPopUp = ({ return null } + setRecieverMetadata(receiverMetadata) + // Find the receiver's read relays. const receiverRelays = await Promise.race([ getRelayListForUser(receiver, ndk), @@ -478,6 +503,7 @@ export const ZapPopUp = ({ handleQRExpiry={handleQRExpiry} setTotalZapAmount={setTotalZapAmount} setHasZapped={setHasZapped} + profileImage={receiverMetadata?.image} /> )} {lastNode} @@ -749,6 +775,56 @@ export const ZapSplit = ({ if (!invoices) return null const authorInvoice = invoices.get('author') + const feedback = (isFirst: boolean) => ( +
+
+ + + + 1st Invoice +
+
+ + + + 2nd Invoice +
+
+ ) if (authorInvoice) { return ( removeInvoice('author')} setTotalZapAmount={setTotalZapAmount} setHasZapped={setHasZapped} - /> + profileImage={author?.image} + > + {feedback(true)} + ) } @@ -773,7 +852,10 @@ export const ZapSplit = ({ handleClose() }} handleQRExpiry={() => removeInvoice('admin')} - /> + profileImage={admin?.image} + > + {feedback(false)} + ) }