diff options
| author | Adam Soltys <[email protected]> | 2024-11-14 13:32:52 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2024-11-14 16:09:51 -0800 |
| commit | 0f35462ebdde3701e8fe927b3debace9abf79305 (patch) | |
| tree | 786d8c833e16762b87a193fb4c09d634784f7744 /src/components | |
| parent | 614fbd99b7963ec89666b8b4252fa5f73c81653c (diff) | |
| download | coinos-ui-0f35462ebdde3701e8fe927b3debace9abf79305.tar.gz coinos-ui-0f35462ebdde3701e8fe927b3debace9abf79305.zip | |
payment amount helpers
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/InvoiceTypes.svelte | 4 | ||||
| -rw-r--r-- | src/components/Success.svelte | 59 |
2 files changed, 61 insertions, 2 deletions
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte index 4dae235a..4e1e5b20 100644 --- a/src/components/InvoiceTypes.svelte +++ b/src/components/InvoiceTypes.svelte @@ -30,9 +30,9 @@ class:text-secondary={type === types.lightning} onclick={() => setType(types.lightning)} > - <div class="bg-base-100 rounded-full w-8 h-8 text-center flex"> + <div class="bg-base-100 rounded-full w-8 h-8 items-center justify-center flex"> <div class="m-auto"> - <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" + <iconify-icon icon="ph:lightning-fill" class="text-yellow-300 text-3xl" ></iconify-icon> </div> </div> diff --git a/src/components/Success.svelte b/src/components/Success.svelte new file mode 100644 index 00000000..f82a4dcb --- /dev/null +++ b/src/components/Success.svelte @@ -0,0 +1,59 @@ +<script> + import { browser } from "$app/environment"; + import { scale } from "svelte/transition"; + import Amount from "$comp/Amount.svelte"; + import { Confetti } from "svelte-confetti"; + const { amount, tip, rate, currency, title } = $props(); + + let loaded = $state(false); + $effect(() => { + if (browser) + window.requestAnimationFrame((p) => { + loaded = true; + }); + }); +</script> + +<div class="text-center mt-20 md:mt-0"> + {#if loaded} + <div class="relative flex justify-center"> + <div class="absolute top-64 pointer-events-none"> + <Confetti + amount="20" + size="40" + duration="1600" + delay={[0, 500]} + fallDistance="50px" + colorArray={["url(/images/bolt.svg)"]} + /> + <Confetti + amount="40" + delay={[0, 500]} + size="15" + fallDistance="50px" + duration="1600" + colorArray={[ + "#FFD700", // Gold + "#FF6F61", // Coral + "#6BCB77", // Mint green + "#4D96FF", // Light blue + "#FF9CEE", // Light pink + "#FFD580", // Soft orange + "#87CEEB", // Sky blue + "#FFB6C1", // Light coral pink + "#C1C7FF", // Lavender + ]} + /> + </div> + </div> + + <iconify-icon + icon="ph:check-fat-fill" + class="text-green-400" + width="160" + in:scale={{ start: 0.2, duration: 500 }} + /> + {/if} + <h1 class="text-3xl md:text-4xl font-bold mb-6">{title}</h1> + <Amount {amount} {tip} {rate} {currency} /> +</div> |