payment amount helpers

19 files changed, 161 insertions, 249 deletions

diff --git a/bun.lockb b/bun.lockb
index 76b9db88..3d7468aa 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 03277460..f47d27e7 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "screenfull": "^6.0.2",
     "svelte": "^5.1.12",
     "svelte-adapter-bun": "^0.5.1",
+    "svelte-confetti": "^2.0.0",
     "svelte-dnd-action": "^0.9.39",
     "svelte-outclick": "^3.3.3",
     "svelte-preprocess": "^6.0.0",
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>
diff --git a/src/lib/invoice.ts b/src/lib/invoice.ts
index a48e02a4..9563d924 100644
--- a/src/lib/invoice.ts
+++ b/src/lib/invoice.ts
@@ -2,6 +2,7 @@ import { auth, get, post } from "$lib/utils";
 import { redirect } from "@sveltejs/kit";
 
 export default async ({ cookies, request }) => {
+	console.log("LOADING");
 	const form = await request.formData();
 	const aid = form.get("aid") || cookies.get("aid");
 
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index 02d441bf..566e989d 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -1,8 +1,8 @@
-import { invalidate } from "$app/navigation";
-import { navigating } from "$app/stores";
+import { goto, invalidate } from "$app/navigation";
+import { navigating, page } from "$app/stores";
 import { PUBLIC_SOCKET } from "$env/static/public";
 import { event, invoice, last, request } from "$lib/store";
-import { sat, sleep, success, wait } from "$lib/utils";
+import { s, sleep, success, wait } from "$lib/utils";
 import { get } from "svelte/store";
 
 let socket;
@@ -38,13 +38,20 @@ export const messages = (data) => ({
 	},
 
 	async payment() {
-		const { amount, confirmed } = data;
+		const { amount, confirmed, iid } = data;
 		invalidate("app:user");
 		invalidate("app:invoice");
 		invalidate("app:payments");
 
+		const {
+			url: { pathname },
+		} = get(page);
+
 		if (amount > 0) {
-			success(`${confirmed ? "Received" : "Detected"} ${sat(amount)}!`);
+			if (pathname.includes("receive")) {
+				await wait(() => !get(navigating));
+				await goto(`/invoice/${iid}`);
+			} else success(`${confirmed ? "Received" : "Detected"} ⚡️${s(amount)}!`);
 		}
 	},
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index ba1eb49a..aaaf543f 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -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,7 +24,7 @@
 
   let { data, children } = $props();
 
-  let { generate, rate, user, subject, token, rates } = $derived(data);
+  let { user, subject, token } = $derived(data);
   let { theme } = $state(data);
 
   $themeStore = theme;
@@ -113,13 +111,9 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="pb-20 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)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index e956aab7..b3b91405 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { run } from 'svelte/legacy';
-
+  import { scale } from "svelte/transition";
   import { btc, f, sat } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import Account from "$comp/Account.svelte";
@@ -22,11 +21,6 @@
   let rate = $derived(rates[currency]);
   let total = $derived(items.reduce((a, b) => a + b.price * b.quantity, 0));
 
-  let refresh = (d) => ({ accounts, items, subject, user, rates } = d);
-  run(() => {
-    refresh(data);
-  });
-
   let install = async () => {
     if (!$installPrompt) return;
     await $installPrompt.prompt();
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 17cb4f09..be4ed3d0 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -1,7 +1,5 @@
 <script>
   import { run } from "svelte/legacy";
-
-  import { send } from "$lib/socket";
   import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils";
   import { tick, onMount, onDestroy } from "svelte";
   import { browser } from "$app/environment";
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>
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 45dc8642..94226931 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -25,31 +25,6 @@
   let { user, payment: p } = $state(data);
   let locale = locales[user.language];
 
-  let refresh = (d) => {
-    ({ user, payment: p } = d);
-    ({
-      id,
-      hash,
-      amount,
-      created,
-      confirmed,
-      memo,
-      rate,
-      type,
-      ref,
-      path,
-      tip,
-      ourfee,
-      fee,
-      currency,
-    } = p);
-
-    if (amount > 0) [txid, vout] = ref.split(":");
-    else txid = hash;
-
-    if (!fee) fee = 0;
-  };
-
   let { username } = user;
   let {
     id,
@@ -64,9 +39,10 @@
     path,
     tip,
     ourfee,
-    fee,
+    fee = 0,
     currency,
-  } = $state(p);
+  } = $derived(p);
+  let [txid, vout] = $derived(amount > 0 ? ref.split(":") : [hash]);
   let a = Math.abs(amount);
 
   let expl = {
@@ -87,11 +63,6 @@
     }
   };
 
-  let txid = $state(),
-    vout = $state();
-  if (amount > 0) [txid, vout] = ref.split(":");
-  else txid = hash;
-
   let direction = $state("");
   onMount(() => {
     direction = amount > 0 ? $t("payments.from") : $t("payments.to");
@@ -100,9 +71,6 @@
       direction =
         direction[0].toUpperCase() + direction.substr(1, direction.length);
   });
-  run(() => {
-    refresh(data);
-  });
 </script>
 
 {#snippet field(title, amount)}
@@ -111,7 +79,7 @@
     <div class="flex gap-2 items-end">
       <div class="flex items-center">
         <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
-        ></iconify-icon>{amount}
+        ></iconify-icon>{s(amount)}
       </div>
       <span class="text-secondary text-lg">
         {f(toFiat(amount, rate), currency)}
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index d2f9782b..e651ba90 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -214,12 +214,14 @@
                 class="font-bold flex items-center"
                 class:text-red-800={p.amount < 0}
               >
-                <iconify-icon
-                  icon="ph:lightning-fill"
-                  width="24"
-                  class="text-yellow-300"
-                ></iconify-icon>
-                {si(Math.abs(p.amount) + (p.tip || 0), 0, 1)}
+                <div class="flex items-center">
+                  <iconify-icon
+                    icon="ph:lightning-fill"
+                    width="24"
+                    class="text-yellow-300"
+                  ></iconify-icon>
+                  <div>{si(Math.abs(p.amount), 0, 1)}</div>
+                </div>
 
                 {#if p.tip}
                   <span class="text-sm text-secondary">
@@ -256,28 +258,25 @@
                   </div>
                 </div>
               {:else}
-                <div class="text-secondary flex gap-2">
+                <div class="text-secondary flex items-center gap-1">
                   {#if p.type === types.lightning}
-                    <div class="text-3xl"><iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
-        ></iconify-icon></div>
+                    <iconify-icon
+                      icon="ph:lightning-fill"
+                      class="text-yellow-300 text-3xl"
+                    ></iconify-icon>
                   {:else if p.type === types.ecash}
                     <img src="/images/cash.png" class="w-12" />
                   {:else if p.type === types.reconcile}
                     <iconify-icon icon="ph:scales-bold" width="32"
                     ></iconify-icon>
                   {:else if p.type === types.bitcoin}
-                    <div class="my-auto">
-                      <img
-                        src="/images/bitcoin.svg"
-                        class="w-12 border-4 border-transparent"
-                        alt="Bitcoin"
-                      />
-                    </div>
+                    <iconify-icon icon="logos:bitcoin" class="text-3xl"
+                    ></iconify-icon>
                   {:else if p.type === types.liquid}
                     <div class="my-auto">
                       <img
                         src="/images/liquid.svg"
-                        class="w-12 border-4 border-transparent"
+                        class="w-10 border-4 border-transparent"
                         alt="Liquid"
                       />
                     </div>
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index af3e09f4..d8bd5f8c 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -1,9 +1,7 @@
 <script>
-  import { run } from "svelte/legacy";
-
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
-  import Icon from "$comp/Icon.svelte";
+  import Amount from "$comp/Amount.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
@@ -21,15 +19,7 @@
   } = $state(data);
   let a = $state();
 
-  let reload = (data) => {
-    ({
-      alias,
-      ourfee,
-      rates,
-      user: { currency },
-    } = data);
-    if (!$rate) $rate = rates[currency];
-  };
+  $effect(() => ($rate ||= rates[currency]));
 
   let showMax = $state();
 
@@ -42,17 +32,8 @@
 
   let show;
   let toggle = () => (show = !show);
-  run(() => {
-    reload(data);
-  });
   let amount = $derived(form?.amount || data.amount);
-  let maxfee;
-  run(() => {
-    maxfee = Math.max(5, Math.round(amount * 0.005));
-  });
-  run(() => {
-    update(form);
-  });
+  let maxfee = $state(Math.max(5, Math.round(amount * 0.005)));
 </script>
 
 <div class="container px-4 max-w-xl mx-auto text-center space-y-2">
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
index f2f14fef..2eb1f18b 100644
--- a/src/routes/(app)/sent/[id]/+page.svelte
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -1,27 +1,15 @@
 <script>
-  import { f, focus, s, sat, sats } from "$lib/utils";
-  import { scale } from "svelte/transition";
-  import Amount from "$comp/Amount.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { toast } from "@zerodevx/svelte-toast";
+  import { focus } from "$lib/utils";
   import { t } from "$lib/translations";
+  import Success from "$comp/Success.svelte";
 
   let { data } = $props();
   let { amount, rate, tip, user } = $state(data);
   let { currency, username } = user;
   amount = Math.abs(amount);
-
-  toast.pop(0);
 </script>
 
-<div class="text-center mt-20 md:mt-0">
-  <div class="flex w-full max-w-[200px] mx-auto py-4" in:scale={{ start: 0.5 }}>
-    <Icon icon="check" style="mx-auto" />
-  </div>
-  <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t("payments.sent")}!</h1>
-  <Amount {amount} {tip} {rate} {currency} />
-</div>
-
+<Success {amount} {rate} {tip} {currency} title={`${$t("payments.sent")}!`} />
 <a href={`/${username}`} use:focus>
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
diff --git a/src/routes/(app)/settings/preferences/+page.svelte b/src/routes/(app)/settings/preferences/+page.svelte
index 1f761ecb..a08eb952 100644
--- a/src/routes/(app)/settings/preferences/+page.svelte
+++ b/src/routes/(app)/settings/preferences/+page.svelte
@@ -179,7 +179,8 @@
     >
     <button type="button" class="flex w-full" onclick={editThreshold}>
       <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
-        ⚡️
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+      ></iconify-icon>
       </div>
       <div
         class="border-l-0 rounded-l-none pl-2 w-full p-4 border rounded-2xl text-left"
@@ -199,7 +200,8 @@
     >
     <button type="button" class="flex w-full" onclick={editReserve}>
       <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
-        ⚡️
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+      ></iconify-icon>
       </div>
       <div
         class="border-l-0 rounded-l-none pl-2 w-full p-4 border rounded-2xl text-left"
diff --git a/src/routes/(static)/login/+page.server.ts b/src/routes/(static)/login/+page.server.ts
index f77f24f2..6e268c92 100644
--- a/src/routes/(static)/login/+page.server.ts
+++ b/src/routes/(static)/login/+page.server.ts
@@ -18,7 +18,6 @@ export const actions = {
 			await login(user, cookies, request.headers.get("cf-connecting-ip"));
 		} catch (e) {
 			const { message } = e as Error;
-			console.log("message", message);
 			return fail(400, { error: "Login failed", message, ...form });
 		}
 
diff --git a/static/images/bolt.svg b/static/images/bolt.svg
new file mode 100644
index 00000000..594fa335
--- /dev/null
+++ b/static/images/bolt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8em" height="8em" viewBox="0 0 256 256"><path fill="rgb(253, 224, 71)" d="m213.85 125.46l-112 120a8 8 0 0 1-13.69-7l14.66-73.33l-57.63-21.64a8 8 0 0 1-3-13l112-120a8 8 0 0 1 13.69 7l-14.7 73.41l57.63 21.61a8 8 0 0 1 3 12.95Z"></path></svg>
diff --git a/static/images/liquid.svg b/static/images/liquid.svg
index f6879ad1..2602780b 100644
--- a/static/images/liquid.svg
+++ b/static/images/liquid.svg
@@ -1,51 +1,32 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 46 46" style="enable-background:new 0 0 46 46;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#46B4A5;}
-	.st1{fill:#FFFFFF;}
-</style>
-<desc>Created with Sketch.</desc>
-<g id="nav_liquid">
-	<g id="Group-7">
-		<circle id="Oval" class="st0" cx="23" cy="23" r="23"/>
-	</g>
-</g>
-<g>
-	<g>
-		<g>
-			<path class="st1" d="M14.6,29c-0.5,0-1-0.3-1.3-0.8c-0.8-1.8-1.1-3.7-1.1-5.6c0-7.3,5.4-13.4,12.6-14.3c0.8-0.1,1.4,0.4,1.5,1.2
-				s-0.4,1.4-1.2,1.5c-5.8,0.7-10.2,5.7-10.2,11.6c0,1.6,0.3,3.1,0.9,4.5c0.3,0.7,0,1.5-0.7,1.8C15,29,14.8,29,14.6,29z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st1" d="M17.6,21.4c-0.1,0-0.1,0-0.2,0c-0.4-0.1-0.7-0.6-0.6-1c1.2-4.6,5.4-7.8,10.1-7.8c2.4,0,4.8,0.9,6.7,2.4
-				c0.4,0.3,0.4,0.8,0.1,1.2c-0.3,0.4-0.8,0.4-1.2,0.1c-1.6-1.3-3.6-2-5.6-2c-4,0-7.5,2.7-8.5,6.6C18.3,21.1,17.9,21.4,17.6,21.4z"
-				/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st1" d="M20.8,38.6c-0.1,0-0.2,0-0.2,0c-6.9-2.1-11.7-8.8-11.7-16.2c0-3.2,0.9-6.3,2.6-9c0.3-0.4,0.8-0.5,1.2-0.3
-				c0.4,0.3,0.5,0.8,0.3,1.2c-1.5,2.4-2.4,5.2-2.4,8.1c0,6.7,4.3,12.7,10.5,14.6c0.4,0.1,0.7,0.6,0.6,1
-				C21.5,38.4,21.2,38.6,20.8,38.6z"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<path class="st1" d="M26.6,36.4c-4.1,0-7.9-1.6-10.5-4.4c-0.4-0.4-0.4-1.1,0.1-1.5c0.4-0.4,1.1-0.4,1.5,0.1
-				c2.2,2.5,5.7,3.8,9.5,3.6c0.6,0,1.1,0.4,1.1,1s-0.4,1.1-1,1.1C27.1,36.4,26.8,36.4,26.6,36.4z"/>
-		</g>
-	</g>
-	<g>
-		<path class="st1" d="M33.6,28.8c-0.3-0.3-0.8-0.4-1.2-0.1c-0.7,0.6-1.5,1.1-2.3,1.5c0,0-0.1,0-0.1,0.1c-0.1,0-0.2,0.1-0.4,0.1l0,0
-			c-0.1,0.1-0.3,0.1-0.4,0.1c-0.3,0.1-0.7,0.2-1,0.2l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.2,0s-0.1,0-0.2,0s-0.3,0-0.4,0H27
-			c-0.1,0-0.2,0-0.3,0h-0.1c-0.9,0-1.8-0.2-2.6-0.4c-0.4-0.1-0.9,0.1-1.1,0.5c-0.1,0.4,0.1,0.9,0.5,1.1c1,0.3,2,0.5,3,0.5l0,0
-			c0.1,0,0.1,0,0.2,0l0,0l0,0l0,0c0.2,0,0.3,0,0.5,0c0.1,0,0.1,0,0.2,0s0.2,0,0.3,0c0.1,0,0.3,0,0.4,0s0.1,0,0.2,0s0.2,0,0.3-0.1
-			c0,0,0,0,0.1,0c0.5-0.1,1.1-0.3,1.6-0.4c0,0,0,0,0.1,0s0.3-0.1,0.4-0.2c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1-0.1l0,0
-			c0.9-0.4,1.8-1,2.6-1.7C33.9,29.7,33.9,29.1,33.6,28.8z"/>
-	</g>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #14909c;
+      }
+
+      .cls-2 {
+        fill: #22e1c9;
+      }
+
+      .cls-3 {
+        fill: #0d1437;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <g>
+            <circle class="cls-3" cx="250" cy="250" r="250"/>
+            <path class="cls-1" d="M232.6,207.1c11.9-71.2,87.9-61.8,97-60.4,9.5,2.7,18.5-6.5,13.3-15.5-21-35.9-62.6-59.1-94.4-60.7,8-6.1,34.4-9.7,62.4-8.5,9.9.4,14-12.6,5.6-17.9-.8-.5-1.4-.9-2.5-1.2-38.3-11.7-79.4-12.9-118.5-2.6-29,7.6-57.1,21.2-81.9,41.4-10.4,8.5-20,17.6-28.2,27.4-62.4,72.5-70,178.9-16.8,259.9,1,1.6,2.1,3.1,3.1,4.7.9,1.1,1.2,1.7,1.6,2.2,2.5,3.6,5.1,7.2,8,10.8,3,3.8,6.4,7.5,9.8,11,.9.9,1.6,1.7,2.6,2.6,3,3.1,6.1,6.4,9.6,9.4.2.3.6.5.9.9,3.5,3.1,7.3,6.1,10.9,9.2.9.8,1.8,1.4,2.6,2.1,3.4,2.6,6.9,5,10.2,7.6.5.3.9.6,1.2.9,3.9,2.6,8,5.1,12,7.6.9.5,1.6.9,2.4,1.4,3.8,2.1,7.6,4.1,11.4,6,.5.3.9.5,1.2.6,4.4,2.1,8.8,4,13.2,5.8.6.3,1.1.5,1.7.8,4.2,1.6,8.5,3.1,12.7,4.4.4,0,.8.3.9.4,4.6,1.5,9.5,2.8,14.2,4h.6c4.6,1.1,9.5,2.1,14.2,2.9h.6c10,1.6,20.1,2.6,30.1,2.9h.2c49.9,1.2,100.2-14.4,142-48.3,25.5-20.8,45.3-46,58.8-73.8.8-1.5,1.5-3.1,2.2-4.6,3.9-8.6,7.4-17.5,10-26.5-130.8,49.3-239.9-17.7-225-106.6v-.2h-.5.1Z"/>
+            <path class="cls-2" d="M155.9,228.9c25.5-34.4,37.3-28.3,39.6-38.9,3.3-14.5-49.6-27.1-90.7,4.5,57.2-71.6,146.5-88.1,222.5-48.8,10.1,5.2,21.5-4.8,15.6-14.6-21-35.9-62.6-59.1-94.4-60.7,8-6.1,34.4-9.7,62.4-8.5,9.9.4,14-12.6,5.6-17.9-.8-.5-1.4-.9-2.5-1.2-38.3-11.7-79.4-12.9-118.5-2.6-29,7.6-57.1,21.2-81.9,41.4-10.4,8.5-20,17.6-28.2,27.4-62.4,72.5-70,178.9-16.8,259.9,1,1.6,2.1,3.1,3.1,4.7.9,1.1,1.2,1.7,1.6,2.2,2.5,3.6,5.1,7.2,8,10.8,55.4,68.5,144.1,94.4,224.1,73.3-204.5-30.3-173.4-198.9-149.5-230.9h-.1,0Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file