src/lib/components/Offline.svelte

@@ -1,72 +0,0 @@
-<div class="offline-container">
-  <div class="flicker">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="48"
-      height="48"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        d="M2.28 3L1 4.27l1.47 1.47c-.43.26-.86.55-1.27.86L3 9c.53-.4 1.08-.75 1.66-1.07l2.23 2.23c-.74.34-1.45.75-2.09 1.24l1.8 2.4c.78-.58 1.66-1.03 2.6-1.33L11.75 15c-1.25.07-2.41.5-3.35 1.2L12 21l2.46-3.27L17.74 21L19 19.72M12 3c-2.15 0-4.2.38-6.1 1.07l2.39 2.4C9.5 6.16 10.72 6 12 6c3.38 0 6.5 1.11 9 3l1.8-2.4C19.79 4.34 16.06 3 12 3m0 6c-.38 0-.75 0-1.12.05l3.19 3.2c1.22.28 2.36.82 3.33 1.55l1.8-2.4C17.2 9.89 14.7 9 12 9"
-      ></path>
-    </svg>
-    <h1>YOU ARE OFFLINE</h1>
-  </div>
-  <p>Please check your internet connection.</p>
-  <p class="explanation">
-    An internet connection is required to sync your wallet and make
-    transactions.
-  </p>
-</div>
-
-<style>
-  .offline-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    text-align: center;
-    color: var(--text-color);
-    font-family: "Press Start 2P", "VT323", monospace, sans-serif;
-    text-shadow: 1px 1px 0 #000;
-  }
-
-  h1 {
-    font-size: 2rem;
-    font-weight: bold;
-    text-transform: uppercase;
-    margin-top: 1rem;
-    color: var(--primary-color);
-  }
-
-  p {
-    font-size: 1rem;
-    margin-top: 1rem;
-    color: var(--accent-color);
-  }
-
-  .explanation {
-    margin-top: 2rem;
-    max-width: 40ch;
-    line-height: 1.5;
-    color: var(--text-color);
-    font-size: 0.8rem;
-    opacity: 0.8;
-  }
-
-  .flicker {
-    animation: flicker 1.5s infinite;
-  }
-
-  @keyframes flicker {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.7;
-    }
-  }
-</style>

src/lib/components/PasswordDialog.svelte

@@ -6,8 +6,7 @@
     openWallet,
   } from "$lib/wallet.svelte";
   import { browser } from "$app/environment";
-  import { onMount, tick } from "svelte";
+  import { onMount } from "svelte";
-  import { fly } from "svelte/transition";
 
   let { onunlock }: { onunlock: () => void } = $props();
 
@@ -15,11 +14,8 @@
   let password = $state("");
   let error = $state("");
   let isValidating = $state(false);
-  let show = $state(false);
 
-  onMount(async () => {
+  onMount(() => {
-    show = true;
-    await tick();
     dialogEl?.showModal();
   });
 
@@ -45,50 +41,45 @@
   }
 </script>
 
-{#if show}
+<dialog bind:this={dialogEl}>
-  <dialog
+  <h2>Unlock Wallet</h2>
-    bind:this={dialogEl}
+  <p>Enter your wallet password to decrypt your seed.</p>
-    transition:fly={{ y: 250, duration: 250, delay: 0.5 }}
+  {#if error}
-  >
+    <p
-    <h2>Unlock Wallet</h2>
+      style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
-    <p>Enter your wallet password to decrypt your seed.</p>
+    >
-    {#if error}
+      {error}
-      <p
+    </p>
-        style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
+  {/if}
-      >
+  <input
-        {error}
+    type="password"
-      </p>
+    class="retro-input"
-    {/if}
+    bind:value={password}
-    <input
+    placeholder="Password"
-      type="password"
+    disabled={isValidating}
-      class="retro-input"
+    onkeydown={(e) => {
-      bind:value={password}
+      if (e.key === "Enter" && !isValidating) {
-      placeholder="Password"
+        attemptUnlock();
+      }
+    }}
+  />
+  <div style="margin-top:1rem;text-align:center;">
+    <button
+      class="retro-btn primary"
       disabled={isValidating}
-      onkeydown={(e) => {
+      onclick={() => {
-        if (e.key === "Enter" && !isValidating) {
+        attemptUnlock();
-          attemptUnlock();
+      }}>{isValidating ? "Validating..." : "Unlock"}</button
-        }
+    >
-      }}
+  </div>
-    />
+</dialog>
-    <div style="margin-top:1rem;text-align:center;">
-      <button
-        class="retro-btn primary"
-        disabled={isValidating}
-        onclick={() => {
-          attemptUnlock();
-        }}>{isValidating ? "Validating..." : "Unlock"}</button
-      >
-    </div>
-  </dialog>
-{/if}
 
 <style>
   dialog {
     z-index: 2000;
   }
   dialog::backdrop {
-    background: transparent;
+    background: rgba(0, 0, 0, 1);
   }
   h2 {
     margin-top: 0;

src/lib/components/PaymentHistoryItem.svelte

@@ -59,7 +59,10 @@
             ...{payment.txId?.slice(-16)}
           </a>
         {:else if (payment as Payment).details.type === "lightning"}
-          <a href="https://liquid.network/tx/{payment.txId}" target="_blank">
+          <a
+            href="https://liquid.network/tx/{payment.claimTxId}"
+            target="_blank"
+          >
             ...{payment.txId?.slice(-16)}
           </a>
         {/if}

src/lib/components/SplashScreen.svelte

@@ -1,247 +1,158 @@
 <script lang="ts">
-  let { closing = false } = $props();
+  let containerEl: HTMLDivElement;
+  let mouseX = $state(0);
+  let mouseY = $state(0);
+
+  function handleMouseMove(event: MouseEvent) {
+    if (!containerEl) return;
+    const { clientX, clientY } = event;
+    const { left, top, width, height } = containerEl.getBoundingClientRect();
+    mouseX = (clientX - left - width / 2) / (width / 2);
+    mouseY = (clientY - top - height / 2) / (height / 2);
+  }
 </script>
 
-<div class="splash-screen" class:closing>
+<div
-  <div class="content">
+  class="splash-screen"
-    <div class="logo-container">
+  bind:this={containerEl}
-      <img src="/logo-no-text.png" alt="Portal BTC Logo" class="logo" />
+  onmousemove={handleMouseMove}
-    </div>
+  onmouseleave={() => {
-
+    mouseX = 0;
-    <div class="branding">
+    mouseY = 0;
-      <h1 class="app-name">
+  }}
-        <span class="portal">PORTAL</span><span class="btc">BTC</span>
+>
-      </h1>
+  <div class="grid-container" style="--mouse-x: {mouseX}; --mouse-y: {mouseY};">
-      <p class="tagline">Your portal to everything Bitcoin</p>
+    <div class="grid" />
-    </div>
-
-    <div class="loading-container">
-      <div class="loading-bar">
-        <div class="loading-fill"></div>
-      </div>
-      <div class="loading-text">Initializing wallet...</div>
-    </div>
   </div>
-  <div class="arx-branding">
+  <div class="logo-container">
-    <span class="powered-by">Powered by</span>
+    <img src="/favicon.png" alt="Portal BTC Logo" class="logo" />
-    <img src="/arx-logo.svg" alt="Arx" class="arx-logo" />
   </div>
+  <div class="scanlines"></div>
 </div>
 
 <style>
-  .splash-screen.closing {
-    animation: wipe-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
-  }
-
-  @keyframes wipe-out {
-    from {
-      clip-path: circle(150% at top right);
-    }
-    to {
-      clip-path: circle(0% at top right);
-    }
-  }
-
   .splash-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
+    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
+    color: white;
+    opacity: 1;
+    transition: opacity 1s ease-out;
     overflow: hidden;
   }
 
-  .content {
+  .grid-container {
-    text-align: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    perspective: 400px;
+    transform-style: preserve-3d;
+    transform: rotateX(calc(var(--mouse-y) * -5deg))
+      rotateY(calc(var(--mouse-x) * 5deg));
+    transition: transform 0.2s linear;
+  }
+
+  .grid {
+    position: absolute;
+    width: 250vw;
+    height: 250vh;
+    top: -75vh;
+    left: -75vw;
+    background-image:
+      linear-gradient(rgba(0, 255, 255, 0.4) 1px, transparent 1px),
+      linear-gradient(to right, rgba(0, 255, 255, 0.4) 1px, transparent 1px);
+    background-size: 50px 50px;
+    transform: rotateX(80deg) translateY(200px) translateZ(-300px);
+    animation: moveGrid 5s linear infinite;
+    will-change: background-position;
+  }
+
+  @keyframes moveGrid {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: 0 -100px;
+    }
   }
 
   .logo-container {
     position: relative;
-    width: 120px;
+    width: 40vw;
-    height: 120px;
+    max-width: 300px;
-    margin: 0 auto 2rem;
+    animation: flicker 3s infinite;
-    animation: logoFloat 4s ease-in-out infinite;
-  }
-
-  @keyframes logoFloat {
-    0%,
-    100% {
-      transform: translateY(0px);
-    }
-    50% {
-      transform: translateY(-10px);
-    }
   }
 
   .logo {
-    position: relative;
     width: 100%;
-    height: 100%;
+    height: auto;
-    object-fit: contain;
+    object-fit: contain;
-    filter: drop-shadow(0 0 10px black) drop-shadow(0 0 20px black);
+    animation: pulse 2.5s infinite ease-in-out;
-  }
+    filter: drop-shadow(0 0 7px #ff00ff) drop-shadow(0 0 15px #00ffff)
-
+      drop-shadow(0 0 20px #ff00ff);
-  .branding {
+  }
-    margin-bottom: 1.5rem;
+
-  }
+  @keyframes pulse {
-
+    0% {
-  .app-name {
+      transform: scale(1);
-    font-size: 2rem;
+    }
-    margin: 0 0 1rem 0;
+    50% {
-    letter-spacing: 0.2em;
+      transform: scale(1.05);
-    line-height: 1.2;
+    }
-  }
+    100% {
-
+      transform: scale(1);
-  .portal {
+    }
-    color: var(--primary-color);
+  }
-    -webkit-text-fill-color: white;
+
-    -webkit-text-stroke: 1px;
+  @keyframes flicker {
-  }
+    0%,
-
+    100% {
-  .btc {
+      opacity: 1;
-    color: var(--accent-color);
+    }
-    -webkit-text-fill-color: white;
+    50% {
-    -webkit-text-stroke: 1px;
+      opacity: 0.95;
-  }
+    }
-
+    52% {
-  .tagline {
+      opacity: 1;
-    font-size: 0.6rem;
+    }
-    color: rgba(255, 255, 255, 0.8);
+    55% {
-    -webkit-text-fill-color: white;
+      opacity: 0.98;
-    -webkit-text-stroke: 1px;
+    }
-    margin: 0;
+    56% {
-    letter-spacing: 0.1em;
+      opacity: 1;
-    animation: fadeInUp 1s ease-out 1s both;
+    }
-  }
+  }
-
+
-  @keyframes fadeInUp {
+  .scanlines {
-    from {
+    position: fixed;
-      opacity: 0;
+    top: 0;
-      transform: translateY(20px);
+    left: 0;
-    }
+    width: 100%;
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .loading-container {
-    animation: fadeInUp 1s ease-out 1.5s both;
-  }
-
-  .loading-bar {
-    width: 200px;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid var(--accent-color);
-    border-radius: 2px;
-    margin: 0 auto 1rem;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .loading-fill {
     height: 100%;
     background: linear-gradient(
-      90deg,
+      to bottom,
-      var(--primary-color) 0%,
+      rgba(18, 16, 16, 0) 50%,
-      var(--accent-color) 50%,
+      rgba(0, 0, 0, 0.25) 50%
-      var(--primary-color) 100%
     );
-    border-radius: 2px;
+    background-size: 100% 4px;
-    animation: loadingProgress 3s ease-in-out infinite;
+    animation: scanlines 0.2s linear infinite;
+    pointer-events: none;
+    z-index: 10000;
   }
 
-  @keyframes loadingProgress {
+  @keyframes scanlines {
     0% {
-      width: 0%;
+      background-position: 0 0;
-      transform: translateX(-100%);
-    }
-    50% {
-      width: 100%;
-      transform: translateX(0%);
     }
     100% {
-      width: 100%;
+      background-position: 0 4px;
-      transform: translateX(100%);
-    }
-  }
-
-  .loading-text {
-    font-size: 0.5rem;
-    color: rgba(255, 255, 255, 0.9);
-    letter-spacing: 0.1em;
-    animation: loadingText 2s ease-in-out infinite;
-  }
-
-  @keyframes loadingText {
-    0%,
-    20% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-    80%,
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .arx-branding {
-    position: absolute;
-    bottom: 2rem;
-    right: 2rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    opacity: 0;
-    animation: fadeInUp 1s ease-out 2s both;
-  }
-
-  .powered-by {
-    font-size: 0.85rem;
-    color: white;
-    -webkit-text-fill-color: white;
-    -webkit-text-stroke: 1px;
-  }
-
-  .arx-logo {
-    height: 2rem;
-    filter: drop-shadow(0 0 5px black);
-  }
-
-  @media (max-width: 768px) {
-    .app-name {
-      font-size: 1.5rem;
-    }
-
-    .tagline {
-      font-size: 0.5rem;
-    }
-
-    .logo-container {
-      width: 100px;
-      height: 100px;
-    }
-
-    .loading-bar {
-      width: 150px;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .app-name {
-      font-size: 1.2rem;
-    }
-
-    .logo-container {
-      width: 80px;
-      height: 80px;
     }
   }
 </style>

src/lib/components/ToggleSwitch.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  let {
-    label,
-    checked = $bindable(),
-  }: {
-    label: string;
-    checked: boolean;
-  } = $props();
-</script>
-
-<div class="switch-container">
-  <span class="switch-label">{label}</span>
-  <label class="switch">
-    <input type="checkbox" bind:checked />
-    <div class="track">
-      <div class="knob" />
-    </div>
-  </label>
-</div>
-
-<style>
-  .switch-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 0;
-    font-family: "Press Start 2P", monospace;
-  }
-
-  .switch-label {
-    font-size: 0.8rem;
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 90px;
-    height: 40px;
-    cursor: pointer;
-    user-select: none;
-    transform: translateY(-50%);
-  }
-
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .track {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      145deg,
-      var(--surface-alt-color) 0%,
-      #1a1a1a 100%
-    );
-    border: 3px solid var(--accent-color);
-    border-radius: 4px;
-    box-shadow: 2px 2px 0 #000;
-  }
-
-  .switch:active .track {
-    transform: translate(1px, 1px);
-    box-shadow: 1px 1px 0 #000;
-  }
-
-  .knob {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 40px;
-    height: 30px;
-    background: linear-gradient(145deg, var(--primary-color) 0%, #d4af00 100%);
-    border: 2px solid #000;
-    border-radius: 2px;
-    transition: transform 0.2s ease-in-out;
-    z-index: 1;
-    box-shadow:
-      inset 0 0 2px rgba(255, 255, 255, 0.3),
-      inset 0 0 5px rgba(0, 0, 0, 0.5);
-  }
-
-  input:checked ~ .track .knob {
-    transform: translateX(41px);
-  }
-</style>

src/lib/online.svelte.ts

@@ -1,24 +0,0 @@
-import { writable } from "svelte/store";
-
-function createOnline() {
-  const { subscribe, set } = writable(navigator.onLine);
-
-  function handleOnline() {
-    set(true);
-  }
-
-  function handleOffline() {
-    set(false);
-  }
-
-  if (typeof window !== "undefined") {
-    window.addEventListener("online", handleOnline);
-    window.addEventListener("offline", handleOffline);
-  }
-
-  return {
-    subscribe,
-  };
-}
-
-export const online = createOnline();

src/lib/settings.svelte.ts

@@ -1,28 +0,0 @@
-import { persistentDbWritable } from "$lib/index";
-import type { Writable } from "svelte/store";
-import Dexie, { type Table } from "dexie";
-
-interface MetaEntry {
-  key: string;
-  value: string;
-}
-
-class SettingsDB extends Dexie {
-    meta!: Table<MetaEntry, string>;
-
-    constructor() {
-        super("settings");
-        this.version(1).stores({
-            meta: "&key"
-        });
-    }
-}
-
-const settingsDB = new SettingsDB();
-
-export const shaderEnabled: Writable<boolean> = persistentDbWritable<boolean, SettingsDB>(
-    "shaderEnabled",
-    true,
-
-    settingsDB
-);

src/lib/style.css

@@ -31,7 +31,8 @@ body {
   letter-spacing: 0.5px;
   line-height: 1.2;
   text-shadow: 1px 1px 0 #000;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .app-wrapper {
@@ -43,6 +44,14 @@ body {
   padding: 2rem 1rem 4rem;
 }
 
+.container {
+  width: 100%;
+  max-width: 28rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .send-receive-buttons {
   display: flex;
   gap: 0.75rem;
@@ -59,9 +68,6 @@ body {
   box-shadow:
     0 0 0 4px #000,
     0 0 0 8px var(--primary-color);
-  .header {
-    cursor: pointer;
-  }
 }
 
 .retro-card::before {

src/routes/+layout.svelte

@@ -10,9 +10,6 @@
   import SplashScreen from "$lib/components/SplashScreen.svelte";
   import ErrorDialog from "$lib/components/ErrorDialog.svelte";
   import InstallPrompt from "$lib/components/InstallPrompt.svelte";
-  import { online } from "$lib/online.svelte";
-  import Offline from "$lib/components/Offline.svelte";
-  import { shaderEnabled } from "$lib/settings.svelte";
 
   type AppError = {
     message: string;
@@ -21,7 +18,6 @@
 
   let { children } = $props();
   let showSplash = $state(true);
-  let closingSplash = $state(false);
   let currentError = $state<AppError | null>(null);
   let showInstallPrompt = $state(false);
   let deferredPrompt: Event | undefined = $state(undefined);
@@ -49,10 +45,7 @@
 
   onMount(() => {
     setTimeout(() => {
-      closingSplash = true;
+      showSplash = false;
-      setTimeout(() => {
-        showSplash = false;
-      }, 1000);
     }, 3000);
 
     window.addEventListener("error", (event: ErrorEvent) => {
@@ -96,82 +89,34 @@
   <title>Portal BTC</title>
 </svelte:head>
 
-<div class="container" class:retro-shader={$shaderEnabled}>
+{#if showInstallPrompt && deferredPrompt}
-  {#if !$online}
+  <InstallPrompt onInstall={handleInstallClick} />
-    <Offline />
+{:else if showSplash}
-  {:else if showInstallPrompt && deferredPrompt}
+  <SplashScreen />
-    <InstallPrompt onInstall={handleInstallClick} />
+{:else}
-  {:else if showSplash}
+  <main class="app-wrapper">
-    <SplashScreen closing={closingSplash} />
+    {#if showSettingsButton}
-  {:else if !$walletState.open && !isOnSetup}
+      <div class="settings-button-container">
-    <PasswordDialog onunlock={() => startNwc()} />
+        <button class="retro-btn settings-btn" onclick={goToSettings}>
-  {:else}
+          <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
-    <main class="app-wrapper">
+          Settings
-      {#if showSettingsButton}
+        </button>
-        <div class="settings-button-container">
+      </div>
-          <button class="retro-btn settings-btn" onclick={goToSettings}>
+    {/if}
-            <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
-            Settings
-          </button>
-        </div>
-      {/if}
 
+    {#if isOnSetup || $walletState.open}
       {@render children()}
-    </main>
+    {/if}
-  {/if}
+  </main>
 
-  <ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+  {#if !$walletState.open && !isOnSetup}
-</div>
+    <PasswordDialog onunlock={() => startNwc()} />
+  {/if}
+{/if}
+
+<ErrorDialog error={currentError} onclose={() => (currentError = null)} />
 
 <style>
-  .container {
-    height: 100vh;
-    max-height: 100vh;
-    width: 100vw;
-    overflow-y: auto;
-  }
-  .retro-shader {
-    position: relative;
-  }
-
-  .retro-shader::before {
-    content: " ";
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background:
-      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
-      linear-gradient(
-        90deg,
-        rgba(255, 0, 0, 0.06),
-        rgba(0, 255, 0, 0.02),
-        rgba(0, 0, 255, 0.06)
-      );
-    z-index: 2000;
-    background-size:
-      100% 2px,
-      3px 100%;
-    background-attachment: fixed;
-    pointer-events: none;
-  }
-
-  .retro-shader::after {
-    content: " ";
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(18, 16, 16, 0.1);
-    opacity: 0;
-    z-index: 2001;
-    pointer-events: none;
-  }
-
   .settings-button-container {
     position: absolute;
     top: 1rem;

src/routes/settings/+page.svelte

@@ -4,8 +4,6 @@
   import LightningSettings from "$lib/components/LightningSettings.svelte";
   import NostrWalletConnect from "$lib/components/NostrWalletConnect.svelte";
   import DangerZone from "$lib/components/DangerZone.svelte";
-  import { shaderEnabled } from "$lib/settings.svelte";
-  import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 
   function goBack() {
     goto("/");
@@ -24,13 +22,6 @@
 
   <NostrWalletConnect />
 
-  <details class="retro-card" open>
-    <summary class="header">
-      <h2>Design</h2>
-    </summary>
-    <ToggleSwitch label="Shader" bind:checked={$shaderEnabled} />
-  </details>
-
   <div class="retro-card">
     <h2>Source Code</h2>
     <Button