degmods/degmods.com
6
1
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

Zap split UX improvements and show profile image near QR code #210

Merged
enes merged 2 commits from issues/140-zap-split-ux into staging 2025-01-30 17:27:26 +00:00
Conversation 0 Commits 2 Files Changed 1 +23 -7
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c1b4dac5a3 - Show all commits

28
src/components/Zap.tsx
View File

@ -128,6 +128,7 @@ type ZapQRProps = {
handleQRExpiry: () => void handleQRExpiry: () => void
setTotalZapAmount?: Dispatch<SetStateAction<number>> setTotalZapAmount?: Dispatch<SetStateAction<number>>
setHasZapped?: Dispatch<SetStateAction<boolean>> setHasZapped?: Dispatch<SetStateAction<boolean>>
profileImage?: string
} }
export const ZapQR = React.memo( export const ZapQR = React.memo(
@ -137,6 +138,7 @@ export const ZapQR = React.memo(
handleQRExpiry, handleQRExpiry,
setTotalZapAmount, setTotalZapAmount,
setHasZapped, setHasZapped,
profileImage,
children children
}: PropsWithChildren<ZapQRProps>) => { }: PropsWithChildren<ZapQRProps>) => {
const { ndk } = useNDKContext() const { ndk } = useNDKContext()
@ -188,13 +190,22 @@ export const ZapQR = React.memo(
value={paymentRequest.pr} value={paymentRequest.pr}
height={235} height={235}
width={235} width={235}
imageSettings={{ />
src: 'https://m.primal.net/JPWc.png', {profileImage && (
height: 35, <div style={{ marginTop: '-20px' }}>
width: 35, <img
excavate: false 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 <label
className='popUpMainCardBottomLnurl' className='popUpMainCardBottomLnurl'
onClick={() => { onClick={() => {
@ -273,7 +284,7 @@ export const ZapPopUp = ({
const [amount, setAmount] = useState<number>(0) const [amount, setAmount] = useState<number>(0)
const [message, setMessage] = useState('') const [message, setMessage] = useState('')
const [paymentRequest, setPaymentRequest] = useState<PaymentRequest>() const [paymentRequest, setPaymentRequest] = useState<PaymentRequest>()
const [receiverMetadata, setRecieverMetadata] = useState<UserProfile>()
const userState = useAppSelector((state) => state.user) const userState = useAppSelector((state) => state.user)
const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@ -320,6 +331,8 @@ export const ZapPopUp = ({
return null return null
} }
setRecieverMetadata(receiverMetadata)
// Find the receiver's read relays. // Find the receiver's read relays.
const receiverRelays = await Promise.race([ const receiverRelays = await Promise.race([
getRelayListForUser(receiver, ndk), getRelayListForUser(receiver, ndk),
@ -490,6 +503,7 @@ export const ZapPopUp = ({
handleQRExpiry={handleQRExpiry} handleQRExpiry={handleQRExpiry}
setTotalZapAmount={setTotalZapAmount} setTotalZapAmount={setTotalZapAmount}
setHasZapped={setHasZapped} setHasZapped={setHasZapped}
profileImage={receiverMetadata?.image}
/> />
)} )}
{lastNode} {lastNode}
@ -820,6 +834,7 @@ export const ZapSplit = ({
handleQRExpiry={() => removeInvoice('author')} handleQRExpiry={() => removeInvoice('author')}
setTotalZapAmount={setTotalZapAmount} setTotalZapAmount={setTotalZapAmount}
setHasZapped={setHasZapped} setHasZapped={setHasZapped}
profileImage={author?.image}
> >
{feedback(true)} {feedback(true)}
</ZapQR> </ZapQR>
@ -837,6 +852,7 @@ export const ZapSplit = ({
handleClose() handleClose()
}} }}
handleQRExpiry={() => removeInvoice('admin')} handleQRExpiry={() => removeInvoice('admin')}
profileImage={admin?.image}
> >
{feedback(false)} {feedback(false)}
</ZapQR> </ZapQR>