payment amount helpers

2 files changed, 20 insertions, 81 deletions

diff --git a/src/routes/(app)/invoice/[id]/[email protected] b/src/routes/(app)/invoice/[id]/[email protected]
index 05fd603f..13b121d8 100644
--- a/src/routes/(app)/invoice/[id]/[email protected]
+++ b/src/routes/(app)/invoice/[id]/[email protected]
@@ -1,6 +1,4 @@
 <script>
-  import { run } from 'svelte/legacy';
-
   import { SvelteToast } from "@zerodevx/svelte-toast";
   import { onDestroy, onMount } from "svelte";
   import { close, connect, send } from "$lib/socket";
@@ -26,13 +24,12 @@
 
   let { data, children } = $props();
 
-  let { generate, rate, user, subject, token, rates, theme } = $state(data);
-
-  let update = (data) => {
-    ({ rate, user, subject, token, rates, theme } = data);
-  };
+  let { user, subject, token } = $derived(data);
+  let { theme } = $state(data);
 
   $themeStore = theme;
+  $effect(() => (theme = $themeStore));
+  $effect(() => browser && connect(token));
 
   onMount(async () => {
     if (browser) {
@@ -58,7 +55,6 @@
     }
   });
 
-
   let lost,
     checkTimer,
     expireTimer,
@@ -83,15 +79,6 @@
       clearTimeout(expireTimer);
     }
   });
-  run(() => {
-    update(data);
-  });
-  run(() => {
-    theme = $themeStore;
-  });
-  run(() => {
-    browser && connect(token);
-  });
 </script>
 
 {#if browser && user && $passwordPrompt}
@@ -115,13 +102,9 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="min-h-dvh" data-theme={theme}>
+<main class="pb-4 min-h-dvh" data-theme={theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     {@render children?.()}
   {/if}
 </main>
-
-{#if $invoice}
-  <Invoice {user} />
-{/if}
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index d6cfaa46..b031dd8c 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -1,70 +1,26 @@
 <script>
-  import { run } from "svelte/legacy";
-
-  import { scale } from "svelte/transition";
-  import Icon from "$comp/Icon.svelte";
-  import { toast } from "@zerodevx/svelte-toast";
-  import { browser } from "$app/environment";
+  import Success from "$comp/Success.svelte";
   import { t } from "$lib/translations";
-  import { toFiat, f, s, sat, sats } from "$lib/utils";
 
   let { data } = $props();
-  let amount,
-    currency = $state(),
-    rate = $state(),
-    received = $state(),
-    pending = $state(),
-    tip = $state(),
-    user = $state(),
-    id;
-  let update = (data) => {
-    ({ amount, currency, rate, received, pending, tip, user, id } =
-      data.invoice);
-  };
+  let { amount, currency, rate, received, pending, tip, user, id } = $derived(
+    data.invoice,
+  );
 
-  toast.pop(0);
-  run(() => {
-    update(data);
-  });
+  // toast.pop(0);
 </script>
 
 <div class="container px-4 text-center mx-auto">
-  {#if received}
-    <div
-      class="flex w-full py-5 max-w-[200px] mx-auto"
-      in:scale={{ start: 0.5 }}
-    >
-      <Icon icon="check" style="mx-auto" />
-    </div>
-
-    <h1 class="text-3xl md:text-4xl font-bold mb-6">
-      {$t("invoice.paymentSuccessful")}
-    </h1>
-
-    <h2 class="text-2xl md:text-3xl font-semibold">
-      {f(toFiat(received - tip, rate), currency)}
-      {#if tip}
-        <span class="text-lg">
-          + {f(toFiat(tip, rate), currency)}
-        </span>
-      {/if}
-    </h2>
-    <h3 class="text-secondary md:text-lg mb-6 mt-1">
-      ⚡️{s(received - tip)}
-
-      {#if tip}
-        <span class="text-lg">
-          + ⚡️{s(tip)}
-        </span>
-      {/if}
-    </h3>
-  {/if}
+  <Success
+    amount={received - tip}
+    {rate}
+    {tip}
+    {currency}
+    title={$t("invoice.paymentSuccessful")}
+  />
 
   {#if pending}
-    <div
-      class="flex w-full py-5 max-w-[200px] mx-auto"
-      in:scale={{ start: 0.5 }}
-    >
+    <div class="flex w-full py-5 max-w-[200px] mx-auto">
       <Icon icon="orangeclock" style="mx-auto" />
     </div>
 
@@ -88,9 +44,9 @@
 </div>
 
 <a href={`/${user.username}`}>
-  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
+  <div class="opacity-0 w-screen h-screen fixed top-24 left-0 z-50"></div>
 </a>
 
-<div class="flex justify-center">
+<div class="flex justify-center mt-4">
   {$t("payments.tapAnywhere")}
 </div>