Zap split UX confusion #140

New Issue

freakoverse · 2024-11-17T12:15:50Z

freakoverse commented

2024-11-17 12:15:50 +00:00

2 QR codes are generated to zap a mod post, where once the first zap is paid (for the creator) and confirmed, it'll auto swap to a new QR code (for the site) and that's it, causing a bit of a confusion as to what's happening.

I'm thinking of making this more obvious with UI changes (unless its figured out how we can do zap splits in one transaction qr without running a LN node), by adding the user's profile picture and name somewhere associated with the current QR and showing a preview and text details of the next QR that'd be shown.

Update:
Added a screenshot for reference. (basically to show that there will be 2 QR codes, and they'd change to the second one, once the first is paid, changing the icon to a checkmark as well).
Added "inputLabelWrapperMainQR" to "inputLabelWrapperMain" that's hold the QR stuff (

).

Regarding the two buttons:

<div style="display:flex;flex-direction:row;width:100%;flex-wrap:wrap;">
<button class="btn btnMain" type="button"><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>5K</button>
<button class="btn btnMain" type="button"><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>5K</button>
</div>

Where the inactive one gets a style="background:unset;"

2 QR codes are generated to zap a mod post, where once the first zap is paid (for the creator) and confirmed, it'll auto swap to a new QR code (for the site) and that's it, causing a bit of a confusion as to what's happening. I'm thinking of making this more obvious with UI changes (unless its figured out how we can do zap splits in one transaction qr without running a LN node), by adding the user's profile picture and name somewhere associated with the current QR and showing a preview and text details of the next QR that'd be shown. Update: Added a screenshot for reference. (basically to show that there will be 2 QR codes, and they'd change to the second one, once the first is paid, changing the icon to a checkmark as well). Added "inputLabelWrapperMainQR" to "inputLabelWrapperMain" that's hold the QR stuff (<div class="inputLabelWrapperMain inputLabelWrapperMainQR" style="align-items: center;">). Regarding the two buttons: ``` <div style="display:flex;flex-direction:row;width:100%;flex-wrap:wrap;"> <button class="btn btnMain" type="button"><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>5K</button> <button class="btn btnMain" type="button"><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>5K</button> </div> ``` Where the inactive one gets a style="background:unset;"

Screenshot_121.jpg

69 KiB