From 0f35462ebdde3701e8fe927b3debace9abf79305 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Thu, 14 Nov 2024 13:32:52 -0800
Subject: payment amount helpers

---
 src/components/InvoiceTypes.svelte |  4 +--
 src/components/Success.svelte      | 59 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Success.svelte

(limited to 'src/components')

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>
-- 
cgit v1.2.3