diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 3 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/invoice/[hash]/+page.svelte | 68 |
2 files changed, 53 insertions, 18 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index 8176ae4c..0a00e7f8 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -239,7 +239,10 @@ "takeFunds": "Take Funds", "show": "Show", "hide": "Hide", + "qr": "QR", "copyLink": "Copy Link", + "copyText": "Copy Text", + "openLink": "Open Link", "total": "Total", "gainLoss": "Gain/Loss", "presentValue": "Present Value", diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte index 68783112..dbf36694 100644 --- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte @@ -35,7 +35,7 @@ user: { username, currency } } = invoice; - let showQr = !amount; + let showQr = invoice.uid === user.id; $: src = sm; @@ -58,14 +58,14 @@ tipPercent = (tip / amount) * 100; - // if (browser && window.NDEFReader) { + // if (browser && window.NDEFReader) { // try { // ndef = new NDEFReader(); // await ndef.scan(); - // + // // ndef.removeEventListener('readingerror', readingerror); // ndef.removeEventListener('reading', reading); - // + // // ndef.addEventListener('readingerror', readingerror); // ndef.addEventListener('reading', reading); // } catch (e) { @@ -110,7 +110,7 @@ }; </script> -<div class="container mx-auto max-w-lg px-4 space-y-5"> +<div class="container mx-auto max-w-lg px-4 space-y-8"> <div class="whitespace-nowrap my-auto ml-auto flex gap-2"> <button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full" @@ -136,18 +136,25 @@ </button> </div> - <div> - <a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}> - <div class="relative flex"> - <div class="flex mx-auto w-[360px] h-[360px]"> - <img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={txt} /> + {#if showQr} + <div> + <a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}> + <div class="relative flex"> + <div class="flex mx-auto w-[360px] h-[360px]"> + <img + {src} + class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" + bind:this={qr} + alt={txt} + /> + </div> + <div + class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0" + /> </div> - <div - class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0" - /> - </div> - </a> - </div> + </a> + </div> + {/if} {#if amount > 0} <div class="text-center font-bold text-2xl"> @@ -172,10 +179,35 @@ </div> {/if} - <div class="w-full flex justify-center"> + <div class="text-center"> + <a href={link}> + + {txt.substr(0, 20)}...{txt.substr(-20)} + + </a> + </div> + + <div class="w-full flex justify-center gap-2"> <button class="flex rounded-full border py-3 px-5 hover:opacity-80" on:click={() => copy(txt)}> <Icon icon="copy" style="mr-1" /> - <div class="text-secondary">{txt.substr(0, 10)}...{txt.substr(-10)}</div></button + <div class="text-secondary">{$t('payments.copyText')}</div></button + > + <a href={link}> + <button class="flex rounded-full border py-3 px-5 hover:opacity-80"> + <Icon icon="link" style="mr-1 w-6" /> + <div class="text-secondary">{$t('payments.openLink')}</div></button + > + </a> + + <button + class="flex rounded-full border py-3 px-5 hover:opacity-80" + on:click={() => (showQr = !showQr)} + > + <Icon icon="qr" style="mr-1 invert" /> + <div class="text-secondary"> + {showQr ? $t('payments.hide') : $t('payments.show')} + {$t('payments.qr')} + </div></button > </div> </div> |