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 +71 -5
1 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9287822c64 - Show all commits

76
src/components/Zap.tsx
View File

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