cleanup

6 files changed, 84 insertions, 37 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 7c231219..12fa8100 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -7,7 +7,6 @@
   import Icon from "$comp/Icon.svelte";
   import Balance from "$comp/Balance.svelte";
   import { t } from "$lib/translations";
-  import { decrypt } from "nostr-tools/nip49";
   import { arkkey } from "$lib/ark";
 
   let { user, rate, account, last } = $props();
@@ -43,7 +42,8 @@
     }
   };
 
-  let submitPassword = () => {
+  let submitPassword = async () => {
+    const { decrypt } = await import("nostr-tools/nip49");
     $arkkey = hex.encode(decrypt(seed, password));
     passwordPrompt = false;
     if (pendingUrl) {
diff --git a/src/components/AppForm.svelte b/src/components/AppForm.svelte
index f5b8afaa..f9491f38 100644
--- a/src/components/AppForm.svelte
+++ b/src/components/AppForm.svelte
@@ -5,7 +5,6 @@
   import AmountField from "$comp/AmountField.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import Toggle from "$comp/Toggle.svelte";
-  import { getPublicKey } from "nostr-tools";
   import { onMount, tick } from "svelte";
   import { bytesToHex, randomBytes } from "@noble/hashes/utils.js";
   import { goto } from "$app/navigation";
@@ -35,8 +34,9 @@
     if (!budget_renewal) budget_renewal = "never";
   });
 
-  let generate = () => {
+  let generate = async () => {
     secret = bytesToHex(randomBytes(32));
+    const { getPublicKey } = await import("nostr-tools");
     pubkey = getPublicKey(secret);
   };
 
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 5de5ac56..eec704a8 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -4,8 +4,6 @@
   import Popup from "$comp/Popup.svelte";
   import { back } from "$lib/utils";
 
-  import "maplibre-gl/dist/maplibre-gl.css";
-
   let { locations } = $props();
   let map;
   let mapContainer = $state(),
@@ -172,10 +170,46 @@
   let locationMarkers = {};
   let popups = {};
   let counter = 0;
+  let maplibrePromise;
+
+  const loadMaplibre = async () => {
+    if (window.maplibregl) return window.maplibregl;
+    if (maplibrePromise) return maplibrePromise;
+
+    maplibrePromise = new Promise((resolve, reject) => {
+      const existing = document.querySelector("script[data-maplibre]");
+      if (existing) {
+        if (window.maplibregl) return resolve(window.maplibregl);
+        existing.addEventListener("load", () => resolve(window.maplibregl));
+        existing.addEventListener("error", reject);
+        return;
+      }
+
+      const css = document.createElement("link");
+      css.rel = "stylesheet";
+      css.href =
+        "https://unpkg.com/[email protected]/dist/maplibre-gl.css";
+      document.head.appendChild(css);
+
+      const script = document.createElement("script");
+      script.src =
+        "https://unpkg.com/[email protected]/dist/maplibre-gl.js";
+      script.async = true;
+      script.defer = true;
+      script.dataset.maplibre = "true";
+      script.onload = () => resolve(window.maplibregl);
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+
+    return maplibrePromise;
+  };
 
-  onMount(() => {
+  onMount(async () => {
     if (browser) {
-      import("maplibre-gl").then(({ default: maplibre }) => {
+      await tick();
+      if (!mapContainer) return;
+      loadMaplibre().then((maplibre) => {
         map = new maplibre.Map({
           container: mapContainer,
           style: "https://tiles.stadiamaps.com/styles/stamen_toner.json",
diff --git a/src/components/Nostr.svelte b/src/components/Nostr.svelte
index fc85100c..4f45da9f 100644
--- a/src/components/Nostr.svelte
+++ b/src/components/Nostr.svelte
@@ -40,6 +40,11 @@
 
   let connectUrl = $state();
   let nostrConnect = async () => {
+    const { Relay } = await import("nostr-tools/relay");
+    const { nip04, generateSecretKey, getPublicKey } = await import(
+      "nostr-tools"
+    );
+    const { getConversationKey, decrypt } = await import("nostr-tools/nip44");
     let connectionSecret = crypto.randomUUID();
 
     let sk = generateSecretKey();
@@ -89,6 +94,7 @@
   };
 
   let nsecSign = async () => {
+    const { nip19, getPublicKey } = await import("nostr-tools");
     let sk;
     if (nsec.startsWith("nsec")) sk = nip19.decode(nsec).data as Uint8Array;
     else sk = hexToBytes(nsec);
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index 401b415a..5b1573f7 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -15,8 +15,7 @@
   {min}
   {max}
   bind:value
-  class="range"
+  class="range w-full"
   oninput={handle}
 />
 
-
diff --git a/src/components/Success.svelte b/src/components/Success.svelte
index b2e126b3..d7561081 100644
--- a/src/components/Success.svelte
+++ b/src/components/Success.svelte
@@ -2,9 +2,9 @@
   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, locale, title } = $props();
 
+  let ConfettiComp = $state(null);
   let loaded = $state(false);
   $effect(() => {
     if (browser)
@@ -12,38 +12,46 @@
         loaded = true;
       });
   });
+
+  $effect(async () => {
+    if (!browser || !loaded || ConfettiComp) return;
+    const mod = await import("svelte-confetti");
+    ConfettiComp = mod.Confetti;
+  });
 </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
-          ]}
-        />
+        {#if ConfettiComp}
+          <ConfettiComp
+            amount="20"
+            size="40"
+            duration="1600"
+            delay={[0, 500]}
+            fallDistance="50px"
+            colorArray={["url(/images/bolt.svg)"]}
+          />
+          <ConfettiComp
+            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
+            ]}
+          />
+        {/if}
       </div>
     </div>