From 93b28b5f6b1c6c1dafa7c9576a64a7843f35b5b5 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 13:10:58 +0100
Subject: [PATCH 01/21] add welcome page

---
 src/components/AndroidPWAPrompt.vue | 122 ++++++++++++++++++++++++++++
 src/components/WelcomeDialog.vue    |   6 +-
 src/pages/ErrorNotFound.vue         |   9 +-
 src/pages/WalletPage.vue            |  20 ++---
 src/pages/WelcomePage.vue           |  96 ++++++++++++++++++++++
 src/pages/welcome/WelcomeSlide1.vue |  34 ++++++++
 src/pages/welcome/WelcomeSlide2.vue |  64 +++++++++++++++
 src/pages/welcome/WelcomeSlide3.vue |  95 ++++++++++++++++++++++
 src/pages/welcome/WelcomeSlide4.vue | 107 ++++++++++++++++++++++++
 src/router/routes.js                |  10 ++-
 10 files changed, 538 insertions(+), 25 deletions(-)
 create mode 100644 src/components/AndroidPWAPrompt.vue
 create mode 100644 src/pages/WelcomePage.vue
 create mode 100644 src/pages/welcome/WelcomeSlide1.vue
 create mode 100644 src/pages/welcome/WelcomeSlide2.vue
 create mode 100644 src/pages/welcome/WelcomeSlide3.vue
 create mode 100644 src/pages/welcome/WelcomeSlide4.vue

diff --git a/src/components/AndroidPWAPrompt.vue b/src/components/AndroidPWAPrompt.vue
new file mode 100644
index 00000000..792e5d26
--- /dev/null
+++ b/src/components/AndroidPWAPrompt.vue
@@ -0,0 +1,122 @@
+<!-- src/components/AndroidPWAPrompt.vue -->
+<template>
+  <transition
+    appear
+    enter-active-class="animated fadeInDown"
+    leave-active-class="animated fadeOutUp"
+    mode="out-in"
+  >
+    <div
+      v-if="showAndroidPWAPrompt"
+      class="pwa-prompt android-pwa-prompt q-pa-md text-center"
+    >
+      <div class="pwa-prompt-content">
+        <span>
+          Tap <q-icon name="menu" size="sm" /> and
+          <strong>Install App</strong>
+        </span>
+        <q-btn
+          flat
+          icon="close"
+          @click="closePrompt"
+          size="sm"
+          class="close-btn q-px-sm"
+        />
+      </div>
+
+      <div class="pwa-prompt-arrow"></div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "AndroidPWAPrompt",
+  data() {
+    return {
+      showAndroidPWAPromptLocal:
+        localStorage.getItem("cashu.showAndroidPWAPrompt") != "seen",
+      showAndroidPWAPrompt: false,
+    };
+  },
+  mounted() {
+    if (
+      this.showAndroidPWAPromptLocal &&
+      this.isChromeOnAndroid() &&
+      !this.isInStandaloneMode()
+    ) {
+      this.showAndroidPWAPrompt = true;
+    }
+  },
+  methods: {
+    closePrompt() {
+      localStorage.setItem("cashu.showAndroidPWAPrompt", "seen");
+      this.showAndroidPWAPrompt = false;
+    },
+    isChromeOnAndroid() {
+      const userAgent = navigator.userAgent.toLowerCase();
+      const isAndroid = /android/.test(userAgent);
+      const isChrome =
+        /chrome/.test(userAgent) && !/edge|edg|opr|opera/.test(userAgent);
+      return isAndroid && isChrome;
+    },
+    isInStandaloneMode() {
+      return window.matchMedia("(display-mode: standalone)").matches;
+    },
+  },
+});
+</script>
+
+<style scoped>
+@keyframes moveUpDown {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.pwa-prompt {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  margin: 0 auto;
+  z-index: 9999;
+  text-align: center;
+  display: flex;
+  flex-direction: column; /* Add this line */
+  align-items: center; /* Add this line */
+  justify-content: center;
+  animation: moveUpDown 2s infinite; /* Add this line for animation */
+}
+
+.pwa-prompt-content {
+  display: inline-flex;
+  align-items: center;
+  background-color: black;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+
+.pwa-prompt-content q-icon {
+  margin-right: 5px;
+}
+
+.pwa-prompt-arrow {
+  position: relative;
+  width: 0;
+  height: 0;
+  bottom: 58px;
+  left: 42%;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid white;
+  text-align: center;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/components/WelcomeDialog.vue b/src/components/WelcomeDialog.vue
index 643122df..04362fb3 100644
--- a/src/components/WelcomeDialog.vue
+++ b/src/components/WelcomeDialog.vue
@@ -2,7 +2,6 @@
   <q-dialog
     class="z-top"
     persistent
-    v-model="showWelcomeDialog"
     position="top"
     @drop="dragFile"
     @dragover="allowDrop"
@@ -114,10 +113,7 @@ export default defineComponent({
     setWelcomeDialogSeen: Function,
   },
   data: function () {
-    return {
-      showWelcomeDialog:
-        localStorage.getItem("cashu.welcomeDialogSeen") != "seen",
-    };
+    return {};
   },
   watch: {},
   computed: {
diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue
index 5d3e4545..bc06bbee 100644
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@@ -4,17 +4,18 @@
   >
     <div>
       <div style="font-size: 30vh">404</div>
-
-      <div class="text-h3" style="opacity: 0.8">Oops. Nothing here...</div>
-
+      <div class="text-h3 q-pb-lg" style="opacity: 0.8">
+        Oops. Nothing here...
+      </div>
       <q-btn
         rounded
+        size="lg"
         class="q-mt-xl"
         color="white"
         text-color="black"
         unelevated
         to="/"
-        label="Go Home"
+        label="Go back home"
       />
     </div>
   </div>
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index 5395f9de..25762c24 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -217,6 +217,7 @@ import { useNostrStore } from "src/stores/nostr";
 import { usePRStore } from "src/stores/payment-request";
 import { useStorageStore } from "src/stores/storage";
 import ReceiveTokenDialog from "src/components/ReceiveTokenDialog.vue";
+import { useWelcomeStore } from "../stores/welcome";
 import { notifyError, notify } from "../js/notify";
 import {
   X as XIcon,
@@ -435,20 +436,9 @@ export default {
       this.camera.show = false;
       this.focusInput("parseDialogInput");
     },
-    showWelcomeDialog: function () {
-      if (localStorage.getItem("cashu.welcomeDialogSeen") != "seen") {
-        this.welcomeDialog.show = true;
-      }
-    },
-    setWelcomeDialogSeen: function () {
-      localStorage.setItem("cashu.welcomeDialogSeen", "seen");
-      this.welcomeDialog.show = false;
-      // switch to settings tab
-      this.setTab("mints");
-
-      // if a wallet has been restored the "cashu.activeMintUrl" is not null
-      if (!!localStorage.getItem("cashu.activeMintUrl")) {
-        window.location.reload();
+    showWelcomePage: function () {
+      if (useWelcomeStore().showWelcome) {
+        window.location.href = "/welcome";
       }
     },
     setTab: function (to) {
@@ -631,7 +621,7 @@ export default {
     this.initSigner();
 
     // show welcome dialog
-    this.showWelcomeDialog();
+    this.showWelcomePage();
 
     // listen to NWC commands if enabled
     if (this.nwcEnabled) {
diff --git a/src/pages/WelcomePage.vue b/src/pages/WelcomePage.vue
new file mode 100644
index 00000000..a32c033c
--- /dev/null
+++ b/src/pages/WelcomePage.vue
@@ -0,0 +1,96 @@
+<!-- src/components/WelcomePage.vue -->
+<template>
+  <q-dialog
+    v-model="welcomeStore.showWelcome"
+    persistent
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    full-screen
+  >
+    <q-card class="q-pa-none" style="height: 100%; width: 100%">
+      <q-carousel
+        v-model="welcomeStore.currentSlide"
+        animated
+        control-color="primary"
+        navigation-visible
+        swipeable
+        arrows
+        prev-icon="arrow_left"
+        :next-icon="welcomeStore.canProceed ? 'arrow_right' : 'none'"
+        style="height: 100%; width: 100%"
+        padding
+        @before="onBeforeSlide"
+      >
+        <q-carousel-slide :name="0">
+          <WelcomeSlide1 />
+        </q-carousel-slide>
+        <q-carousel-slide :name="1">
+          <WelcomeSlide2 />
+        </q-carousel-slide>
+        <q-carousel-slide :name="2">
+          <WelcomeSlide3 />
+        </q-carousel-slide>
+        <q-carousel-slide :name="3">
+          <WelcomeSlide4 />
+        </q-carousel-slide>
+      </q-carousel>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { onMounted } from "vue";
+import { useWelcomeStore } from "src/stores/welcome";
+import WelcomeSlide1 from "./welcome/WelcomeSlide1.vue";
+import WelcomeSlide2 from "./welcome/WelcomeSlide2.vue";
+import WelcomeSlide3 from "./welcome/WelcomeSlide3.vue";
+import WelcomeSlide4 from "./welcome/WelcomeSlide4.vue";
+
+export default {
+  name: "WelcomePage",
+  components: {
+    WelcomeSlide1,
+    WelcomeSlide2,
+    WelcomeSlide3,
+    WelcomeSlide4,
+  },
+  setup() {
+    const welcomeStore = useWelcomeStore();
+
+    onMounted(() => {
+      welcomeStore.initializeWelcome();
+    });
+
+    const onBeforeSlide = (newSlide, oldSlide) => {
+      // Determine the direction of the slide transition
+      const isMovingForward = newSlide > oldSlide;
+      const isMovingBackward = newSlide < oldSlide;
+
+      if (isMovingForward && !welcomeStore.canProceed) {
+        // Notify the user that they cannot proceed yet
+        $q.notify({
+          type: "negative",
+          message: "Please complete the current step before proceeding.",
+        });
+        return false; // Prevent the transition
+      }
+
+      // Allow the transition
+      return true;
+    };
+
+    return {
+      welcomeStore,
+      onBeforeSlide,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.q-dialog__inner {
+  height: 100%;
+  width: 100%;
+  margin: 0; /* Align dialog to cover the entire viewport */
+}
+</style>
diff --git a/src/pages/welcome/WelcomeSlide1.vue b/src/pages/welcome/WelcomeSlide1.vue
new file mode 100644
index 00000000..0e609619
--- /dev/null
+++ b/src/pages/welcome/WelcomeSlide1.vue
@@ -0,0 +1,34 @@
+<!-- src/components/WelcomeSlide1.vue -->
+<template>
+  <div class="q-pa-md flex flex-center">
+    <div class="text-center">
+      <q-icon name="wallet" size="4em" color="primary" />
+      <h2 class="q-mt-md">Welcome to Cashu</h2>
+      <div class="text-left">
+        <p class="q-mt-sm">
+          Cashu is a simple and secure Bitcoin wallet that uses Ecash technology
+          to keep your funds secure and private.
+        </p>
+        <p class="q-mt-md">
+          To use this wallet, you need to connect to one or more Ecash mints.
+          Only use mints that you trust.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WelcomeSlide1",
+};
+</script>
+
+<style scoped>
+h2 {
+  font-weight: bold;
+}
+p {
+  font-size: large;
+}
+</style>
diff --git a/src/pages/welcome/WelcomeSlide2.vue b/src/pages/welcome/WelcomeSlide2.vue
new file mode 100644
index 00000000..176999a0
--- /dev/null
+++ b/src/pages/welcome/WelcomeSlide2.vue
@@ -0,0 +1,64 @@
+<!-- src/components/WelcomeSlide2.vue -->
+<template>
+  <div class="q-pa-md flex flex-center">
+    <div class="text-center relative-position">
+      <q-icon name="install_mobile" size="4em" color="primary" />
+      <h2 class="q-mt-md">Install PWA</h2>
+      <div class="text-left">
+        <p class="q-mt-md">
+          This wallet does not have a server backend but runs on your device.
+          For the best experience, use this wallet with your device's native web
+          browser (Safari on iOS, Chrome on Android).
+        </p>
+        <p>
+          <strong>Android:</strong> In Chrome click the hamburger menu at the
+          top right.
+        </p>
+        <p>
+          <strong>iOS:</strong> In Safari click the share button and press the
+          Add to Home screen button.
+        </p>
+        <p>
+          Once you have installed this app on your device, close this browser
+          window and use the app from your home screen.
+        </p>
+      </div>
+    </div>
+  </div>
+  <iOSPWAPrompt />
+  <AndroidPWAPrompt />
+</template>
+
+<script>
+import iOSPWAPrompt from "components/iOSPWAPrompt.vue";
+import AndroidPWAPrompt from "../../components/AndroidPWAPrompt.vue";
+export default {
+  name: "WelcomeSlide2",
+  components: {
+    iOSPWAPrompt,
+    AndroidPWAPrompt,
+  },
+};
+</script>
+
+<style scoped>
+.relative-position {
+  position: relative;
+}
+.instruction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+.instruction span {
+  margin-left: 0.5rem;
+  font-size: 1rem;
+}
+h2 {
+  font-weight: bold;
+}
+p {
+  font-size: large;
+}
+</style>
diff --git a/src/pages/welcome/WelcomeSlide3.vue b/src/pages/welcome/WelcomeSlide3.vue
new file mode 100644
index 00000000..23f2d59f
--- /dev/null
+++ b/src/pages/welcome/WelcomeSlide3.vue
@@ -0,0 +1,95 @@
+<!-- src/components/WelcomeSlide3.vue -->
+<template>
+  <div class="q-pa-md flex flex-center">
+    <div class="text-center">
+      <q-icon name="vpn_key" size="4em" color="primary" />
+      <h2 class="q-mt-md">Your Seed Phrase</h2>
+      <p class="q-mt-sm">
+        Store your seed phrase in a password manager or write it down on paper.
+        It is the only way to recover your wallet if you lose access to this
+        device. You can find your seed phrase in the settings menu.
+      </p>
+      <q-input
+        v-model="walletStore.mnemonic"
+        outlined
+        readonly
+        autogrow
+        class="q-mt-md q-pa-md"
+        label="Seed Phrase"
+        dense
+      >
+        <template v-slot:append>
+          <q-btn flat dense icon="content_copy" @click="copySeed" />
+        </template>
+      </q-input>
+      <q-btn
+        outline
+        rounded
+        color="primary "
+        class="q-mt-md"
+        @click="proceed"
+        style="font-size: large"
+      >
+        <q-icon
+          :name="welcomeStore.seedPhraseValidated ? 'check' : 'close'"
+          :color="welcomeStore.seedPhraseValidated ? 'positive' : 'negative'"
+          class="q-mr-sm"
+        />
+        I have written it down
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useWelcomeStore } from "src/stores/welcome";
+import { useWalletStore } from "src/stores/wallet";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+export default {
+  name: "WelcomeSlide3",
+  setup() {
+    const welcomeStore = useWelcomeStore();
+    const walletStore = useWalletStore();
+    const $q = useQuasar();
+
+    const copySeed = () => {
+      navigator.clipboard
+        .writeText(welcomeStore.seedPhrase)
+        .then(() => {
+          $q.notify({
+            type: "positive",
+            message: "Seed phrase copied to clipboard!",
+          });
+        })
+        .catch(() => {
+          $q.notify({
+            type: "negative",
+            message: "Failed to copy seed phrase.",
+          });
+        });
+    };
+
+    const proceed = () => {
+      welcomeStore.seedPhraseValidated = true;
+    };
+
+    return {
+      welcomeStore,
+      walletStore,
+      copySeed,
+      proceed,
+    };
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  font-weight: bold;
+}
+p {
+  font-size: large;
+}
+</style>
diff --git a/src/pages/welcome/WelcomeSlide4.vue b/src/pages/welcome/WelcomeSlide4.vue
new file mode 100644
index 00000000..0636402c
--- /dev/null
+++ b/src/pages/welcome/WelcomeSlide4.vue
@@ -0,0 +1,107 @@
+<!-- src/components/WelcomeSlide4.vue -->
+<template>
+  <div class="q-pa-md flex flex-center">
+    <div class="text-center" style="max-width: 600px; width: 100%">
+      <q-icon name="gavel" size="4em" color="primary" class="q-mb-md" />
+      <h2 class="text-center">Terms and Conditions</h2>
+      <div
+        class="text-left q-mt-sm"
+        style="
+          max-height: 300px;
+          max-width: 90%;
+          overflow-y: auto;
+          margin: 0 auto;
+        "
+      >
+        <p>
+          <!-- Filler text to simulate EULA -->
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+          scelerisque aliquam odio et faucibus. Nulla rhoncus feugiat eros quis
+          consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate
+          ut ligula. Vestibulum sit amet urna turpis. Praesent sit amet
+          tristique urna. Nulla facilisi. Pellentesque et mi orci. Pellentesque
+          habitant morbi tristique senectus et netus et malesuada fames ac
+          turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus
+          et ultrices posuere cubilia curae; Nulla facilisi. Donec aliquet,
+          tortor nec commodo ultricies, lacus quam interdum libero, et
+          pellentesque felis lorem nec dui. Nulla facilisi. Duis aliquet egestas
+          purus in blandit. Curabitur vulputate, ligula lacinia scelerisque
+          tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
+        </p>
+        <p>
+          <!-- Filler text to simulate EULA -->
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+          scelerisque aliquam odio et faucibus. Nulla rhoncus feugiat eros quis
+          consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate
+          ut ligula. Vestibulum sit amet urna turpis. Praesent sit amet
+          tristique urna. Nulla facilisi. Pellentesque et mi orci. Pellentesque
+          habitant morbi tristique senectus et netus et malesuada fames ac
+          turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus
+          et ultrices posuere cubilia curae; Nulla facilisi. Donec aliquet,
+          tortor nec commodo ultricies, lacus quam interdum libero, et
+          pellentesque felis lorem nec dui. Nulla facilisi. Duis aliquet egestas
+          purus in blandit. Curabitur vulputate, ligula lacinia scelerisque
+          tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
+        </p>
+        <p>
+          <!-- Filler text to simulate EULA -->
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+          scelerisque aliquam odio et faucibus. Nulla rhoncus feugiat eros quis
+          consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate
+          ut ligula. Vestibulum sit amet urna turpis. Praesent sit amet
+          tristique urna. Nulla facilisi. Pellentesque et mi orci. Pellentesque
+          habitant morbi tristique senectus et netus et malesuada fames ac
+          turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus
+          et ultrices posuere cubilia curae; Nulla facilisi. Donec aliquet,
+          tortor nec commodo ultricies, lacus quam interdum libero, et
+          pellentesque felis lorem nec dui. Nulla facilisi. Duis aliquet egestas
+          purus in blandit. Curabitur vulputate, ligula lacinia scelerisque
+          tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
+        </p>
+        <!-- Repeat or add more paragraphs as needed -->
+      </div>
+      <q-checkbox
+        v-model="welcomeStore.termsAccepted"
+        label="I agree to the Terms and Conditions"
+        class="q-mt-md"
+      />
+      <q-btn
+        flat
+        label="Accept and Continue"
+        color="primary"
+        class="full-width q-mt-sm"
+        :disable="!welcomeStore.termsAccepted"
+        @click="acceptTerms"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { useWelcomeStore } from "src/stores/welcome";
+import { useQuasar } from "quasar";
+
+export default {
+  name: "WelcomeSlide4",
+  setup() {
+    const welcomeStore = useWelcomeStore();
+    const $q = useQuasar();
+
+    const acceptTerms = () => {
+      welcomeStore.acceptTerms();
+      welcomeStore.closeWelcome();
+    };
+
+    return {
+      welcomeStore,
+      acceptTerms,
+    };
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  font-weight: bold;
+}
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 93169b14..c5304147 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -18,11 +18,19 @@ const routes = [
   },
   {
     path: "/already-running",
-    component: () => import("layouts/FullscreenLayout.vue"),
+    component: () => import("layouts/BlankLayout.vue"),
     children: [
       { path: "", component: () => import("src/pages/AlreadyRunning.vue") },
     ],
   },
+  {
+    path: "/welcome",
+    component: () => import("layouts/BlankLayout.vue"),
+    children: [
+      { path: "", component: () => import("src/pages/WelcomePage.vue") },
+    ],
+  },
+
   // Always leave this as last one,
   // but you can also remove it
   {

From a4146ceb015bf1f7b9dc7ea85ec7763bf11d0a79 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:34:53 +0100
Subject: [PATCH 02/21] lots of changes

---
 src/components/AndroidPWAPrompt.vue |  2 +-
 src/components/SettingsView.vue     | 11 +++++++
 src/pages/WalletPage.vue            |  6 +++-
 src/pages/WelcomePage.vue           |  3 +-
 src/pages/welcome/WelcomeSlide1.vue |  2 +-
 src/pages/welcome/WelcomeSlide2.vue | 50 ++++++++++++++++++++++-------
 src/pages/welcome/WelcomeSlide3.vue | 16 ++++++---
 src/pages/welcome/WelcomeSlide4.vue | 14 ++++----
 8 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/src/components/AndroidPWAPrompt.vue b/src/components/AndroidPWAPrompt.vue
index 792e5d26..6454566e 100644
--- a/src/components/AndroidPWAPrompt.vue
+++ b/src/components/AndroidPWAPrompt.vue
@@ -13,7 +13,7 @@
       <div class="pwa-prompt-content">
         <span>
           Tap <q-icon name="menu" size="sm" /> and
-          <strong>Install App</strong>
+          <strong>Add to Home screen</strong>
         </span>
         <q-btn
           flat
diff --git a/src/components/SettingsView.vue b/src/components/SettingsView.vue
index cdadb1ff..6793a7dd 100644
--- a/src/components/SettingsView.vue
+++ b/src/components/SettingsView.vue
@@ -19,6 +19,7 @@
                   readonly
                   v-model="hiddenMnemonic"
                   label="Seed phrase"
+                  class="seed-phrase"
                   autogrow
                 >
                   <template v-slot:append>
@@ -1477,3 +1478,13 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+:deep(.q-field__control) {
+  padding: 12px 12px !important;
+}
+.seed-phrase {
+  font-size: 0.9rem;
+  font-family: monospace;
+  padding: 12px 12px !important;
+}
+</style>
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index 25762c24..9c345bb6 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -123,6 +123,7 @@
       </div>
 
       <iOSPWAPrompt />
+      <AndroidPWAPrompt />
     </div>
 
     <!-- BOTTOM LIGHTNING BUTTONS -->
@@ -199,6 +200,7 @@ import SendDialog from "components/SendDialog.vue";
 import ReceiveDialog from "components/ReceiveDialog.vue";
 import QrcodeReader from "components/QrcodeReader.vue";
 import iOSPWAPrompt from "components/iOSPWAPrompt.vue";
+import AndroidPWAPrompt from "components/AndroidPWAPrompt.vue";
 // pinia stores
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useMintsStore } from "src/stores/mints";
@@ -219,6 +221,7 @@ import { useStorageStore } from "src/stores/storage";
 import ReceiveTokenDialog from "src/components/ReceiveTokenDialog.vue";
 import { useWelcomeStore } from "../stores/welcome";
 import { notifyError, notify } from "../js/notify";
+
 import {
   X as XIcon,
   Banknote as BanknoteIcon,
@@ -243,6 +246,7 @@ export default {
     SendDialog,
     ReceiveDialog,
     iOSPWAPrompt,
+    AndroidPWAPrompt,
     ScanIcon,
   },
   data: function () {
@@ -438,7 +442,7 @@ export default {
     },
     showWelcomePage: function () {
       if (useWelcomeStore().showWelcome) {
-        window.location.href = "/welcome";
+        this.$router.push("/welcome");
       }
     },
     setTab: function (to) {
diff --git a/src/pages/WelcomePage.vue b/src/pages/WelcomePage.vue
index a32c033c..fd935ddf 100644
--- a/src/pages/WelcomePage.vue
+++ b/src/pages/WelcomePage.vue
@@ -7,13 +7,12 @@
     transition-hide="slide-down"
     full-screen
   >
-    <q-card class="q-pa-none" style="height: 100%; width: 100%">
+    <q-card class="q-pa-none" style="height: 100%">
       <q-carousel
         v-model="welcomeStore.currentSlide"
         animated
         control-color="primary"
         navigation-visible
-        swipeable
         arrows
         prev-icon="arrow_left"
         :next-icon="welcomeStore.canProceed ? 'arrow_right' : 'none'"
diff --git a/src/pages/welcome/WelcomeSlide1.vue b/src/pages/welcome/WelcomeSlide1.vue
index 0e609619..21f199e6 100644
--- a/src/pages/welcome/WelcomeSlide1.vue
+++ b/src/pages/welcome/WelcomeSlide1.vue
@@ -3,7 +3,7 @@
   <div class="q-pa-md flex flex-center">
     <div class="text-center">
       <q-icon name="wallet" size="4em" color="primary" />
-      <h2 class="q-mt-md">Welcome to Cashu</h2>
+      <h2 class="q-mt-none">Welcome to Cashu</h2>
       <div class="text-left">
         <p class="q-mt-sm">
           Cashu is a simple and secure Bitcoin wallet that uses Ecash technology
diff --git a/src/pages/welcome/WelcomeSlide2.vue b/src/pages/welcome/WelcomeSlide2.vue
index 176999a0..e034b9aa 100644
--- a/src/pages/welcome/WelcomeSlide2.vue
+++ b/src/pages/welcome/WelcomeSlide2.vue
@@ -3,26 +3,38 @@
   <div class="q-pa-md flex flex-center">
     <div class="text-center relative-position">
       <q-icon name="install_mobile" size="4em" color="primary" />
-      <h2 class="q-mt-md">Install PWA</h2>
-      <div class="text-left">
-        <p class="q-mt-md">
-          This wallet does not have a server backend but runs on your device.
+      <h2 class="q-mt-none">Install PWA</h2>
+      <div class="text-left" v-if="!isPWA()">
+        <p class="q-mt-md instruction">
           For the best experience, use this wallet with your device's native web
-          browser (Safari on iOS, Chrome on Android).
+          browser (Safari on iOS, Chrome on Android) and install it as a PWA.
         </p>
-        <p>
-          <strong>Android:</strong> In Chrome click the hamburger menu at the
-          top right.
+        <h6>Android (Chrome)</h6>
+        <p class="sub-instruction">
+          1. <q-icon name="menu" size="1.5em" class="q-pr-xs" />
+          <span>Tap the menu on the top right </span><br />
+          2. Press <strong>Add to Home screen</strong>
         </p>
-        <p>
-          <strong>iOS:</strong> In Safari click the share button and press the
-          Add to Home screen button.
+        <h6>iOS (Safari)</h6>
+        <p class="sub-instruction">
+          1. <q-icon name="ios_share" size="1.2em" class="q-pr-xs" />
+          <span>Tap the share button </span> <br />
+          2. Press <strong>Add to Home screen</strong>
         </p>
         <p>
           Once you have installed this app on your device, close this browser
           window and use the app from your home screen.
         </p>
       </div>
+
+      <div class="text-center" v-if="isPWA()">
+        <q-icon name="check_circle" size="4em" color="positive" />
+        <h2 class="q-mt-lg">Success!</h2>
+        <p class="q-mt-md">
+          You have installed Cashu as a PWA. Close any other open browser
+          windows and use the app from your home screen.
+        </p>
+      </div>
     </div>
   </div>
   <iOSPWAPrompt />
@@ -38,6 +50,14 @@ export default {
     iOSPWAPrompt,
     AndroidPWAPrompt,
   },
+  setup() {
+    const isPWA = () => {
+      return window.matchMedia("(display-mode: standalone)").matches;
+    };
+    return {
+      isPWA,
+    };
+  },
 };
 </script>
 
@@ -58,7 +78,15 @@ export default {
 h2 {
   font-weight: bold;
 }
+h6 {
+  font-weight: bold;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
 p {
   font-size: large;
 }
+.sub-instruction {
+  margin-left: 0.5rem;
+}
 </style>
diff --git a/src/pages/welcome/WelcomeSlide3.vue b/src/pages/welcome/WelcomeSlide3.vue
index 23f2d59f..ac1215ed 100644
--- a/src/pages/welcome/WelcomeSlide3.vue
+++ b/src/pages/welcome/WelcomeSlide3.vue
@@ -3,7 +3,7 @@
   <div class="q-pa-md flex flex-center">
     <div class="text-center">
       <q-icon name="vpn_key" size="4em" color="primary" />
-      <h2 class="q-mt-md">Your Seed Phrase</h2>
+      <h2 class="q-mt-sm">Your Seed Phrase</h2>
       <p class="q-mt-sm">
         Store your seed phrase in a password manager or write it down on paper.
         It is the only way to recover your wallet if you lose access to this
@@ -14,7 +14,7 @@
         outlined
         readonly
         autogrow
-        class="q-mt-md q-pa-md"
+        class="q-mt-md q-pa-md seed-phrase"
         label="Seed Phrase"
         dense
       >
@@ -26,9 +26,9 @@
         outline
         rounded
         color="primary "
-        class="q-mt-md"
+        class="q-mt-lg"
         @click="proceed"
-        style="font-size: large"
+        style="font-size: 1rem"
       >
         <q-icon
           :name="welcomeStore.seedPhraseValidated ? 'check' : 'close'"
@@ -92,4 +92,12 @@ h2 {
 p {
   font-size: large;
 }
+:deep(.q-field__control) {
+  padding: 12px 12px !important;
+}
+.seed-phrase {
+  font-size: 0.9rem;
+  font-family: monospace;
+  padding: 12px 12px !important;
+}
 </style>
diff --git a/src/pages/welcome/WelcomeSlide4.vue b/src/pages/welcome/WelcomeSlide4.vue
index 0636402c..1e6fb87e 100644
--- a/src/pages/welcome/WelcomeSlide4.vue
+++ b/src/pages/welcome/WelcomeSlide4.vue
@@ -2,8 +2,8 @@
 <template>
   <div class="q-pa-md flex flex-center">
     <div class="text-center" style="max-width: 600px; width: 100%">
-      <q-icon name="gavel" size="4em" color="primary" class="q-mb-md" />
-      <h2 class="text-center">Terms and Conditions</h2>
+      <q-icon name="gavel" size="4em" color="primary" class="q-mb-none" />
+      <h2 class="text-center q-mt-lg q-mb-xl">Terms and Conditions</h2>
       <div
         class="text-left q-mt-sm"
         style="
@@ -62,14 +62,16 @@
       </div>
       <q-checkbox
         v-model="welcomeStore.termsAccepted"
-        label="I agree to the Terms and Conditions"
+        label="I have read and accept the terms and conditions"
         class="q-mt-md"
       />
       <q-btn
-        flat
-        label="Accept and Continue"
+        rounded
+        outline
+        :label="welcomeStore.termsAccepted ? 'Continue' : 'Accept to continue'"
         color="primary"
-        class="full-width q-mt-sm"
+        class="q-mt-lg"
+        style="font-size: 1rem"
         :disable="!welcomeStore.termsAccepted"
         @click="acceptTerms"
       />

From 3eb9cef53a159b571ba64f3a8083fc9a70c6609c Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 15:14:53 +0100
Subject: [PATCH 03/21] design

---
 src/pages/WelcomePage.vue           | 60 ++++++++++++++++-------------
 src/pages/welcome/WelcomeSlide1.vue | 44 +++++++++++++++++----
 src/pages/welcome/WelcomeSlide2.vue |  8 ++--
 src/pages/welcome/WelcomeSlide3.vue | 21 +++-------
 src/pages/welcome/WelcomeSlide4.vue | 19 ++++-----
 src/router/routes.js                |  2 +-
 6 files changed, 88 insertions(+), 66 deletions(-)

diff --git a/src/pages/WelcomePage.vue b/src/pages/WelcomePage.vue
index fd935ddf..cc46435c 100644
--- a/src/pages/WelcomePage.vue
+++ b/src/pages/WelcomePage.vue
@@ -12,13 +12,7 @@
         v-model="welcomeStore.currentSlide"
         animated
         control-color="primary"
-        navigation-visible
-        arrows
-        prev-icon="arrow_left"
-        :next-icon="welcomeStore.canProceed ? 'arrow_right' : 'none'"
-        style="height: 100%; width: 100%"
-        padding
-        @before="onBeforeSlide"
+        class="flex-1"
       >
         <q-carousel-slide :name="0">
           <WelcomeSlide1 />
@@ -33,6 +27,23 @@
           <WelcomeSlide4 />
         </q-carousel-slide>
       </q-carousel>
+
+      <div class="q-pa-md flex justify-between">
+        <q-btn
+          flat
+          icon="arrow_left"
+          label="Previous"
+          :disable="!welcomeStore.canGoPrev"
+          @click="welcomeStore.goToPrevSlide"
+        />
+        <q-btn
+          flat
+          icon="arrow_right"
+          label="Next"
+          :disable="!welcomeStore.canProceed"
+          @click="welcomeStore.goToNextSlide"
+        />
+      </div>
     </q-card>
   </q-dialog>
 </template>
@@ -60,27 +71,8 @@ export default {
       welcomeStore.initializeWelcome();
     });
 
-    const onBeforeSlide = (newSlide, oldSlide) => {
-      // Determine the direction of the slide transition
-      const isMovingForward = newSlide > oldSlide;
-      const isMovingBackward = newSlide < oldSlide;
-
-      if (isMovingForward && !welcomeStore.canProceed) {
-        // Notify the user that they cannot proceed yet
-        $q.notify({
-          type: "negative",
-          message: "Please complete the current step before proceeding.",
-        });
-        return false; // Prevent the transition
-      }
-
-      // Allow the transition
-      return true;
-    };
-
     return {
       welcomeStore,
-      onBeforeSlide,
     };
   },
 };
@@ -92,4 +84,20 @@ export default {
   width: 100%;
   margin: 0; /* Align dialog to cover the entire viewport */
 }
+
+.q-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.q-carousel {
+  flex: 1;
+}
+
+.custom-navigation {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+}
 </style>
diff --git a/src/pages/welcome/WelcomeSlide1.vue b/src/pages/welcome/WelcomeSlide1.vue
index 21f199e6..81409c7d 100644
--- a/src/pages/welcome/WelcomeSlide1.vue
+++ b/src/pages/welcome/WelcomeSlide1.vue
@@ -2,17 +2,45 @@
 <template>
   <div class="q-pa-md flex flex-center">
     <div class="text-center">
-      <q-icon name="wallet" size="4em" color="primary" />
-      <h2 class="q-mt-none">Welcome to Cashu</h2>
+      <img
+        src="/clean.png"
+        alt="Clean Icon"
+        class="q-my-lg"
+        style="width: 80px; height: 80px"
+      />
+
+      <h2 class="q-mt-md">Welcome to Cashu</h2>
       <div class="text-left">
         <p class="q-mt-sm">
-          Cashu is a simple and secure Bitcoin wallet that uses Ecash technology
-          to keep your funds secure and private.
-        </p>
-        <p class="q-mt-md">
-          To use this wallet, you need to connect to one or more Ecash mints.
-          Only use mints that you trust.
+          Cashu.me is a simple and secure Bitcoin wallet that uses Ecash
+          technology to keep your funds secure and private.
         </p>
+        <q-expansion-item
+          dense
+          dense-toggle
+          class="text-left"
+          label="Click to learn more"
+        >
+          <p class="q-mt-md">
+            This wallet is not affiliated with any mint. To use this wallet, you
+            need to connect to one or more Ecash mints that you trust.
+          </p>
+          <p class="q-mt-md">
+            This wallet stores ecash that only you have access to. If you delete
+            your browser data without a seed phrase backup, you will lose your
+            tokens.
+          </p>
+          <p class="q-mt-md">
+            This wallet stores ecash that only you have access to. If you delete
+            your browser data without a seed phrase backup, you will lose your
+            tokens.
+          </p>
+          <p class="q-mt-md">
+            This wallet is in beta. We hold no responsibility for people losing
+            access to funds. Use at your own risk! This code is open-source and
+            licensed under the MIT license.
+          </p>
+        </q-expansion-item>
       </div>
     </div>
   </div>
diff --git a/src/pages/welcome/WelcomeSlide2.vue b/src/pages/welcome/WelcomeSlide2.vue
index e034b9aa..14a6797a 100644
--- a/src/pages/welcome/WelcomeSlide2.vue
+++ b/src/pages/welcome/WelcomeSlide2.vue
@@ -2,8 +2,8 @@
 <template>
   <div class="q-pa-md flex flex-center">
     <div class="text-center relative-position">
-      <q-icon name="install_mobile" size="4em" color="primary" />
-      <h2 class="q-mt-none">Install PWA</h2>
+      <q-icon name="download_for_offline" size="4em" color="primary" />
+      <h2 class="q-mt-xl">Install PWA</h2>
       <div class="text-left" v-if="!isPWA()">
         <p class="q-mt-md instruction">
           For the best experience, use this wallet with your device's native web
@@ -12,13 +12,13 @@
         <h6>Android (Chrome)</h6>
         <p class="sub-instruction">
           1. <q-icon name="menu" size="1.5em" class="q-pr-xs" />
-          <span>Tap the menu on the top right </span><br />
+          <span>Tap the menu (top right) </span><br />
           2. Press <strong>Add to Home screen</strong>
         </p>
         <h6>iOS (Safari)</h6>
         <p class="sub-instruction">
           1. <q-icon name="ios_share" size="1.2em" class="q-pr-xs" />
-          <span>Tap the share button </span> <br />
+          <span>Tap share (bottom) </span> <br />
           2. Press <strong>Add to Home screen</strong>
         </p>
         <p>
diff --git a/src/pages/welcome/WelcomeSlide3.vue b/src/pages/welcome/WelcomeSlide3.vue
index ac1215ed..521c1c1c 100644
--- a/src/pages/welcome/WelcomeSlide3.vue
+++ b/src/pages/welcome/WelcomeSlide3.vue
@@ -3,7 +3,7 @@
   <div class="q-pa-md flex flex-center">
     <div class="text-center">
       <q-icon name="vpn_key" size="4em" color="primary" />
-      <h2 class="q-mt-sm">Your Seed Phrase</h2>
+      <h2 class="q-mt-xl">Your Seed Phrase</h2>
       <p class="q-mt-sm">
         Store your seed phrase in a password manager or write it down on paper.
         It is the only way to recover your wallet if you lose access to this
@@ -22,21 +22,12 @@
           <q-btn flat dense icon="content_copy" @click="copySeed" />
         </template>
       </q-input>
-      <q-btn
-        outline
-        rounded
-        color="primary "
-        class="q-mt-lg"
-        @click="proceed"
+      <q-checkbox
+        v-model="welcomeStore.seedPhraseValidated"
+        label="I have written it down"
+        class="q-mt-md"
         style="font-size: 1rem"
-      >
-        <q-icon
-          :name="welcomeStore.seedPhraseValidated ? 'check' : 'close'"
-          :color="welcomeStore.seedPhraseValidated ? 'positive' : 'negative'"
-          class="q-mr-sm"
-        />
-        I have written it down
-      </q-btn>
+      />
     </div>
   </div>
 </template>
diff --git a/src/pages/welcome/WelcomeSlide4.vue b/src/pages/welcome/WelcomeSlide4.vue
index 1e6fb87e..4a6ed2d4 100644
--- a/src/pages/welcome/WelcomeSlide4.vue
+++ b/src/pages/welcome/WelcomeSlide4.vue
@@ -7,7 +7,7 @@
       <div
         class="text-left q-mt-sm"
         style="
-          max-height: 300px;
+          max-height: 350px;
           max-width: 90%;
           overflow-y: auto;
           margin: 0 auto;
@@ -62,19 +62,9 @@
       </div>
       <q-checkbox
         v-model="welcomeStore.termsAccepted"
-        label="I have read and accept the terms and conditions"
+        label="I accept the terms and conditions"
         class="q-mt-md"
       />
-      <q-btn
-        rounded
-        outline
-        :label="welcomeStore.termsAccepted ? 'Continue' : 'Accept to continue'"
-        color="primary"
-        class="q-mt-lg"
-        style="font-size: 1rem"
-        :disable="!welcomeStore.termsAccepted"
-        @click="acceptTerms"
-      />
     </div>
   </div>
 </template>
@@ -106,4 +96,9 @@ export default {
 h2 {
   font-weight: bold;
 }
+p {
+  font-size: 0.82rem;
+  /* color grey */
+  color: #c6c6c6;
+}
 </style>
diff --git a/src/router/routes.js b/src/router/routes.js
index c5304147..5760ea7d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -34,7 +34,7 @@ const routes = [
   // Always leave this as last one,
   // but you can also remove it
   {
-    path: "/:catchAll(.*)*",
+    path: "/:pathMatch(.*)*",
     component: () => import("src/pages/ErrorNotFound.vue"),
   },
 ];

From 49fee7a076254618a2c7dd3a446eea6844c0659b Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 17:42:58 +0100
Subject: [PATCH 04/21] animations

---
 src/components/BalanceView.vue      |  8 ++++++++
 src/components/SettingsView.vue     | 21 ++++++++++++++++++++-
 src/css/app.scss                    | 10 ++++++++++
 src/pages/WalletPage.vue            | 26 ++++++++++++++------------
 src/pages/welcome/WelcomeSlide1.vue | 29 +++++++++++++++--------------
 src/pages/welcome/WelcomeSlide2.vue | 18 +++++++++++-------
 src/pages/welcome/WelcomeSlide3.vue | 11 +++++++----
 src/pages/welcome/WelcomeSlide4.vue |  8 ++++----
 8 files changed, 89 insertions(+), 42 deletions(-)

diff --git a/src/components/BalanceView.vue b/src/components/BalanceView.vue
index 1518d9c1..7bc2bb1f 100644
--- a/src/components/BalanceView.vue
+++ b/src/components/BalanceView.vue
@@ -242,3 +242,11 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+.animated.pulse {
+  animation-duration: 0.5s;
+}
+.animated.fadeInDown {
+  animation-duration: 0.3s;
+}
+</style>
diff --git a/src/components/SettingsView.vue b/src/components/SettingsView.vue
index 6793a7dd..1b6ff706 100644
--- a/src/components/SettingsView.vue
+++ b/src/components/SettingsView.vue
@@ -1072,6 +1072,19 @@
                   </row>
                 </q-item-section>
               </q-item>
+              <q-item>
+                <q-item-section>
+                  <row>
+                    <q-btn dense flat outline click @click="showOnboarding">
+                      Show onboarding
+                    </q-btn></row
+                  ><row>
+                    <q-item-label class="q-px-sm" caption
+                      >Show the onboarding screen again.
+                    </q-item-label>
+                  </row>
+                </q-item-section>
+              </q-item>
               <q-item>
                 <q-item-section>
                   <row>
@@ -1174,6 +1187,7 @@ import { useProofsStore } from "src/stores/proofs";
 import { usePRStore } from "../stores/payment-request";
 import { useRestoreStore } from "src/stores/restore";
 import { useReceiveTokensStore } from "../stores/receiveTokensStore";
+import { useWelcomeStore } from "src/stores/welcome";
 
 export default defineComponent({
   name: "SettingsView",
@@ -1449,6 +1463,11 @@ export default defineComponent({
       await this.resetNip46Signer();
       await this.generateNPCConnection();
     },
+    showOnboarding: function () {
+      const welcomeStore = useWelcomeStore();
+      welcomeStore.resetWelcome();
+      this.$router.push("/welcome");
+    },
     nukeWallet: async function () {
       // create a backup just in case
       await this.getLocalstorageToFile();
@@ -1479,7 +1498,7 @@ export default defineComponent({
 });
 </script>
 <style scoped>
-:deep(.q-field__control) {
+.seed-phrase :deep(.q-field__control) {
   padding: 12px 12px !important;
 }
 .seed-phrase {
diff --git a/src/css/app.scss b/src/css/app.scss
index d6ac0377..038d06ff 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -43,3 +43,13 @@
   max-width: 600px;
   margin: 0 auto;
 }
+
+.animated.tada {
+  animation-duration: 1s;
+}
+.animated.bounceIn {
+  animation-duration: 1s;
+}
+.animated.bounce {
+  animation-duration: 1s;
+}
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index 9c345bb6..52dc3a92 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -20,18 +20,20 @@
             Receive</q-btn
           >
         </div>
-        <div class="col-2 q-mb-md q-mx-none">
-          <q-btn
-            align="center"
-            size="lg"
-            outline
-            color="primary"
-            flat
-            @click="showCamera"
-          >
-            <ScanIcon size="2em" />
-          </q-btn>
-        </div>
+        <transition appear enter-active-class="animated pulse">
+          <div class="col-2 q-mb-md q-mx-none">
+            <q-btn
+              align="center"
+              size="lg"
+              outline
+              color="primary"
+              flat
+              @click="showCamera"
+            >
+              <ScanIcon size="2em" />
+            </q-btn>
+          </div>
+        </transition>
         <!-- button to showSendDialog -->
         <div class="col-5 q-mb-md">
           <q-btn
diff --git a/src/pages/welcome/WelcomeSlide1.vue b/src/pages/welcome/WelcomeSlide1.vue
index 81409c7d..3f8e0159 100644
--- a/src/pages/welcome/WelcomeSlide1.vue
+++ b/src/pages/welcome/WelcomeSlide1.vue
@@ -2,18 +2,19 @@
 <template>
   <div class="q-pa-md flex flex-center">
     <div class="text-center">
-      <img
-        src="/clean.png"
-        alt="Clean Icon"
-        class="q-my-lg"
-        style="width: 80px; height: 80px"
-      />
-
+      <transition appear enter-active-class="animated bounce">
+        <img
+          src="/clean.png"
+          alt="Clean Icon"
+          class="q-my-lg"
+          style="width: 80px; height: 80px"
+        />
+      </transition>
       <h2 class="q-mt-md">Welcome to Cashu</h2>
       <div class="text-left">
         <p class="q-mt-sm">
-          Cashu.me is a simple and secure Bitcoin wallet that uses Ecash
-          technology to keep your funds secure and private.
+          Cashu.me is a free and open-source Bitcoin wallet that uses ecash to
+          keep your funds secure and private.
         </p>
         <q-expansion-item
           dense
@@ -22,13 +23,13 @@
           label="Click to learn more"
         >
           <p class="q-mt-md">
-            This wallet is not affiliated with any mint. To use this wallet, you
-            need to connect to one or more Ecash mints that you trust.
+            Cashu is a free and open-source ecash protocol for Bitcoin. You can
+            learn more about it at
+            <a href="https://cashu.space" target="_blank">cashu.space</a>.
           </p>
           <p class="q-mt-md">
-            This wallet stores ecash that only you have access to. If you delete
-            your browser data without a seed phrase backup, you will lose your
-            tokens.
+            This wallet is not affiliated with any mint. To use this wallet, you
+            need to connect to one or more Cashu mints that you trust.
           </p>
           <p class="q-mt-md">
             This wallet stores ecash that only you have access to. If you delete
diff --git a/src/pages/welcome/WelcomeSlide2.vue b/src/pages/welcome/WelcomeSlide2.vue
index 14a6797a..89921566 100644
--- a/src/pages/welcome/WelcomeSlide2.vue
+++ b/src/pages/welcome/WelcomeSlide2.vue
@@ -2,7 +2,10 @@
 <template>
   <div class="q-pa-md flex flex-center">
     <div class="text-center relative-position">
-      <q-icon name="download_for_offline" size="4em" color="primary" />
+      <transition v-if="isPWA()" appear enter-active-class="animated bounceIn">
+        <q-icon name="check_circle" size="4em" color="positive" />
+      </transition>
+      <q-icon v-else name="download_for_offline" size="4em" color="primary" />
       <h2 class="q-mt-xl">Install PWA</h2>
       <div class="text-left" v-if="!isPWA()">
         <p class="q-mt-md instruction">
@@ -28,17 +31,18 @@
       </div>
 
       <div class="text-center" v-if="isPWA()">
-        <q-icon name="check_circle" size="4em" color="positive" />
-        <h2 class="q-mt-lg">Success!</h2>
+        <transition appear enter-active-class="animated tada">
+          <h3 class="q-mt-lg">Success!</h3>
+        </transition>
         <p class="q-mt-md">
-          You have installed Cashu as a PWA. Close any other open browser
-          windows and use the app from your home screen.
+          You are using Cashu as a PWA. Close any other open browser windows and
+          use the app from your home screen.
         </p>
       </div>
     </div>
   </div>
-  <iOSPWAPrompt />
-  <AndroidPWAPrompt />
+  <iOSPWAPrompt v-if="!isPWA()" />
+  <AndroidPWAPrompt v-if="!isPWA()" />
 </template>
 
 <script>
diff --git a/src/pages/welcome/WelcomeSlide3.vue b/src/pages/welcome/WelcomeSlide3.vue
index 521c1c1c..ff7ca521 100644
--- a/src/pages/welcome/WelcomeSlide3.vue
+++ b/src/pages/welcome/WelcomeSlide3.vue
@@ -5,9 +5,9 @@
       <q-icon name="vpn_key" size="4em" color="primary" />
       <h2 class="q-mt-xl">Your Seed Phrase</h2>
       <p class="q-mt-sm">
-        Store your seed phrase in a password manager or write it down on paper.
-        It is the only way to recover your wallet if you lose access to this
-        device. You can find your seed phrase in the settings menu.
+        Store your seed phrase in a password manager or on paper. Your seed
+        phrase is the only way to recover your funds if you lose access to this
+        device.
       </p>
       <q-input
         v-model="walletStore.mnemonic"
@@ -22,6 +22,9 @@
           <q-btn flat dense icon="content_copy" @click="copySeed" />
         </template>
       </q-input>
+      <p class="q-mt-none" style="font-size: 0.8rem; color: grey">
+        You can see your seed phrase in the settings.
+      </p>
       <q-checkbox
         v-model="welcomeStore.seedPhraseValidated"
         label="I have written it down"
@@ -83,7 +86,7 @@ h2 {
 p {
   font-size: large;
 }
-:deep(.q-field__control) {
+.seed-phrase :deep(.q-field__control) {
   padding: 12px 12px !important;
 }
 .seed-phrase {
diff --git a/src/pages/welcome/WelcomeSlide4.vue b/src/pages/welcome/WelcomeSlide4.vue
index 4a6ed2d4..4a2b8b40 100644
--- a/src/pages/welcome/WelcomeSlide4.vue
+++ b/src/pages/welcome/WelcomeSlide4.vue
@@ -1,9 +1,9 @@
 <!-- src/components/WelcomeSlide4.vue -->
 <template>
   <div class="q-pa-md flex flex-center">
-    <div class="text-center" style="max-width: 600px; width: 100%">
-      <q-icon name="gavel" size="4em" color="primary" class="q-mb-none" />
-      <h2 class="text-center q-mt-lg q-mb-xl">Terms and Conditions</h2>
+    <div class="text-center">
+      <q-icon name="gavel" size="4em" color="primary" />
+      <h2 class="text-center q-mt-xl">Terms</h2>
       <div
         class="text-left q-mt-sm"
         style="
@@ -62,7 +62,7 @@
       </div>
       <q-checkbox
         v-model="welcomeStore.termsAccepted"
-        label="I accept the terms and conditions"
+        label="I accept these terms and conditions"
         class="q-mt-md"
       />
     </div>

From bcd4abac04353b641407fcdf77ae8dabb849da46 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 18:12:37 +0100
Subject: [PATCH 05/21] prompt

---
 src/components/AndroidPWAPrompt.vue |  2 +-
 src/components/iOSPWAPrompt.vue     |  4 ++--
 src/pages/welcome/WelcomeSlide2.vue | 20 ++++++++++++--------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/AndroidPWAPrompt.vue b/src/components/AndroidPWAPrompt.vue
index 6454566e..04aeac01 100644
--- a/src/components/AndroidPWAPrompt.vue
+++ b/src/components/AndroidPWAPrompt.vue
@@ -12,7 +12,7 @@
     >
       <div class="pwa-prompt-content">
         <span>
-          Tap <q-icon name="menu" size="sm" /> and
+          Tap <q-icon name="more_vert" size="sm" /> and
           <strong>Add to Home screen</strong>
         </span>
         <q-btn
diff --git a/src/components/iOSPWAPrompt.vue b/src/components/iOSPWAPrompt.vue
index b079a75f..17f916d9 100644
--- a/src/components/iOSPWAPrompt.vue
+++ b/src/components/iOSPWAPrompt.vue
@@ -36,7 +36,7 @@ export default defineComponent({
   data: function () {
     return {
       showIosPWAPromptLocal:
-        localStorage.getItem("cashu.showIosPWAPrompt") != "seen",
+        localStorage.getItem("cashu.ui.showIosPWAPrompt") != "seen",
       showIosPWAPrompt: false,
     };
   },
@@ -53,7 +53,7 @@ export default defineComponent({
   computed: {},
   methods: {
     closePrompt() {
-      localStorage.setItem("cashu.showIosPWAPrompt", "seen");
+      localStorage.setItem("cashu.ui.showIosPWAPrompt", "seen");
       this.showIosPWAPrompt = false;
     },
     isiOsSafari() {
diff --git a/src/pages/welcome/WelcomeSlide2.vue b/src/pages/welcome/WelcomeSlide2.vue
index 89921566..dafa903e 100644
--- a/src/pages/welcome/WelcomeSlide2.vue
+++ b/src/pages/welcome/WelcomeSlide2.vue
@@ -9,24 +9,28 @@
       <h2 class="q-mt-xl">Install PWA</h2>
       <div class="text-left" v-if="!isPWA()">
         <p class="q-mt-md instruction">
-          For the best experience, use this wallet with your device's native web
-          browser (Safari on iOS, Chrome on Android) and install it as a PWA.
+          For the best experience, open this wallet with your device's native
+          web browser and install it as a Progressive Web App.
         </p>
         <h6>Android (Chrome)</h6>
         <p class="sub-instruction">
-          1. <q-icon name="menu" size="1.5em" class="q-pr-xs" />
+          1. <q-icon name="more_vert" size="1.5em" class="q-pr-xs" />
           <span>Tap the menu (top right) </span><br />
-          2. Press <strong>Add to Home screen</strong>
+          2.
+          <q-icon name="mobile_friendly" size="1.2em" class="q-pr-xs" /> Press
+          <strong>Add to Home screen</strong>
         </p>
         <h6>iOS (Safari)</h6>
         <p class="sub-instruction">
           1. <q-icon name="ios_share" size="1.2em" class="q-pr-xs" />
           <span>Tap share (bottom) </span> <br />
-          2. Press <strong>Add to Home screen</strong>
+          2.
+          <q-icon name="add_box_outline" size="1.2em" class="q-pr-xs" /> Press
+          <strong>Add to Home screen</strong>
         </p>
         <p>
-          Once you have installed this app on your device, close this browser
-          window and use the app from your home screen.
+          Once you installed this app on your device, close this browser window
+          and use the app from your home screen.
         </p>
       </div>
 
@@ -47,7 +51,7 @@
 
 <script>
 import iOSPWAPrompt from "components/iOSPWAPrompt.vue";
-import AndroidPWAPrompt from "../../components/AndroidPWAPrompt.vue";
+import AndroidPWAPrompt from "components/AndroidPWAPrompt.vue";
 export default {
   name: "WelcomeSlide2",
   components: {

From e8c5bac23caa9a88a601f4e41da8121d54626b28 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 19:02:58 +0100
Subject: [PATCH 06/21] better nuking

---
 src/components/AndroidPWAPrompt.vue | 13 ++++--------
 src/components/SettingsView.vue     |  3 +--
 src/components/iOSPWAPrompt.vue     | 13 ++++--------
 src/pages/WalletPage.vue            |  2 +-
 src/pages/WelcomePage.vue           | 31 +++++++++++++++++++++++++++--
 src/pages/welcome/WelcomeSlide2.vue |  4 ++--
 src/stores/mints.ts                 |  9 +++++----
 7 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/components/AndroidPWAPrompt.vue b/src/components/AndroidPWAPrompt.vue
index 04aeac01..9906f565 100644
--- a/src/components/AndroidPWAPrompt.vue
+++ b/src/components/AndroidPWAPrompt.vue
@@ -1,11 +1,6 @@
 <!-- src/components/AndroidPWAPrompt.vue -->
 <template>
-  <transition
-    appear
-    enter-active-class="animated fadeInDown"
-    leave-active-class="animated fadeOutUp"
-    mode="out-in"
-  >
+  <transition appear enter-active-class="animated fadeInDown">
     <div
       v-if="showAndroidPWAPrompt"
       class="pwa-prompt android-pwa-prompt q-pa-md text-center"
@@ -91,7 +86,7 @@ export default defineComponent({
   flex-direction: column; /* Add this line */
   align-items: center; /* Add this line */
   justify-content: center;
-  animation: moveUpDown 2s infinite; /* Add this line for animation */
+  animation: moveUpDown 1s infinite; /* Add this line for animation */
 }
 
 .pwa-prompt-content {
@@ -111,8 +106,8 @@ export default defineComponent({
   position: relative;
   width: 0;
   height: 0;
-  bottom: 58px;
-  left: 42%;
+  bottom: 60px;
+  left: 45%;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid white;
diff --git a/src/components/SettingsView.vue b/src/components/SettingsView.vue
index 1b6ff706..8843fdac 100644
--- a/src/components/SettingsView.vue
+++ b/src/components/SettingsView.vue
@@ -1472,8 +1472,7 @@ export default defineComponent({
       // create a backup just in case
       await this.getLocalstorageToFile();
       localStorage.clear();
-      this.$router.push("/");
-      this.$emit("close");
+      window.location.href = "/";
     },
     addRelay: function () {
       if (this.newRelay) {
diff --git a/src/components/iOSPWAPrompt.vue b/src/components/iOSPWAPrompt.vue
index 17f916d9..60d01fea 100644
--- a/src/components/iOSPWAPrompt.vue
+++ b/src/components/iOSPWAPrompt.vue
@@ -1,10 +1,5 @@
 <template>
-  <transition
-    appear
-    enter-active-class="animated fadeInUp"
-    leave-active-class="animated fadeInDown"
-    mode="out-in"
-  >
+  <transition enter-active-class="animated fadeInUp">
     <div
       v-if="showIosPWAPrompt"
       class="pwa-prompt q-pa-md q-mx-auto text-center"
@@ -58,7 +53,7 @@ export default defineComponent({
     },
     isiOsSafari() {
       const userAgent = window.navigator.userAgent.toLowerCase();
-      return /iphone|ipad|ipod/.test(userAgent) && /safari/.test(userAgent);
+      return /iphone|ipod/.test(userAgent) && /safari/.test(userAgent);
     },
     isInStandaloneMode() {
       return "standalone" in window.navigator && window.navigator.standalone;
@@ -89,7 +84,7 @@ export default defineComponent({
   flex-direction: column; /* Add this line */
   align-items: center; /* Add this line */
   justify-content: center;
-  animation: moveUpDown 2s infinite; /* Add this line for animation */
+  animation: moveUpDown 1s infinite; /* Add this line for animation */
 }
 
 .pwa-prompt-content {
@@ -111,7 +106,7 @@ export default defineComponent({
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid white;
-  margin: 0 auto;
+  margin: 2px auto;
   text-align: center;
 }
 </style>
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index 52dc3a92..45dc3797 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -545,7 +545,7 @@ export default {
         if (event.data.type == "new_tab_opened") {
           channel.postMessage({ type: "already_running", senderId: tabId });
         } else if (event.data.type == "already_running") {
-          window.location.href = "/already-running";
+          this.$router.push("/already-running");
         }
       };
     },
diff --git a/src/pages/WelcomePage.vue b/src/pages/WelcomePage.vue
index cc46435c..63f7aee8 100644
--- a/src/pages/WelcomePage.vue
+++ b/src/pages/WelcomePage.vue
@@ -4,8 +4,10 @@
     v-model="welcomeStore.showWelcome"
     persistent
     transition-show="slide-up"
-    transition-hide="slide-down"
+    transition-hide="fadeOut"
     full-screen
+    @drop.prevent="dragFile"
+    @dragover.prevent
   >
     <q-card class="q-pa-none" style="height: 100%">
       <q-carousel
@@ -49,8 +51,9 @@
 </template>
 
 <script>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { useWelcomeStore } from "src/stores/welcome";
+import { useMintsStore } from "src/stores/mints";
 import WelcomeSlide1 from "./welcome/WelcomeSlide1.vue";
 import WelcomeSlide2 from "./welcome/WelcomeSlide2.vue";
 import WelcomeSlide3 from "./welcome/WelcomeSlide3.vue";
@@ -66,6 +69,27 @@ export default {
   },
   setup() {
     const welcomeStore = useWelcomeStore();
+    const mintsStore = useMintsStore();
+    const fileUpload = ref(null);
+
+    const onChangeFileUpload = () => {
+      const file = fileUpload.value.files[0];
+      if (file) readFile(file);
+    };
+
+    const readFile = (file) => {
+      const reader = new FileReader();
+      reader.onload = (f) => {
+        const backup = JSON.parse(f.target.result);
+        mintsStore.restoreFromBackup(backup);
+      };
+      reader.readAsText(file);
+    };
+
+    const dragFile = (ev) => {
+      const file = ev.dataTransfer.files[0];
+      if (file) readFile(file);
+    };
 
     onMounted(() => {
       welcomeStore.initializeWelcome();
@@ -73,6 +97,9 @@ export default {
 
     return {
       welcomeStore,
+      fileUpload,
+      onChangeFileUpload,
+      dragFile,
     };
   },
 };
diff --git a/src/pages/welcome/WelcomeSlide2.vue b/src/pages/welcome/WelcomeSlide2.vue
index dafa903e..447ddeab 100644
--- a/src/pages/welcome/WelcomeSlide2.vue
+++ b/src/pages/welcome/WelcomeSlide2.vue
@@ -9,8 +9,8 @@
       <h2 class="q-mt-xl">Install PWA</h2>
       <div class="text-left" v-if="!isPWA()">
         <p class="q-mt-md instruction">
-          For the best experience, open this wallet with your device's native
-          web browser and install it as a Progressive Web App.
+          For the best experience, use this wallet with your device's native web
+          browser to install it as a Progressive Web App. Do this right now.
         </p>
         <h6>Android (Chrome)</h6>
         <p class="sub-instruction">
diff --git a/src/stores/mints.ts b/src/stores/mints.ts
index 7a38f462..93bba77b 100644
--- a/src/stores/mints.ts
+++ b/src/stores/mints.ts
@@ -420,7 +420,7 @@ export const useMintsStore = defineStore("mints", {
         console.error(error);
         try {
           notifyApiError(error, "Could not get mint info");
-        } catch {}
+        } catch { }
         throw error;
       }
     },
@@ -465,7 +465,7 @@ export const useMintsStore = defineStore("mints", {
         console.error(error);
         try {
           notifyApiError(error, "Could not get mint keys");
-        } catch {}
+        } catch { }
         throw error;
       }
     },
@@ -479,7 +479,7 @@ export const useMintsStore = defineStore("mints", {
         console.error(error);
         try {
           notifyApiError(error, "Could not get mint keysets");
-        } catch {}
+        } catch { }
         throw error;
       }
     },
@@ -495,7 +495,7 @@ export const useMintsStore = defineStore("mints", {
       notifySuccess("Mint removed");
     },
     restoreFromBackup: function (backup: any) {
-      if (!backup || !backup["cashu.welcomeDialogSeen"]) {
+      if (!backup) {
         notifyError("Unrecognized Backup Format!");
       } else {
         const keys = Object.keys(backup);
@@ -503,6 +503,7 @@ export const useMintsStore = defineStore("mints", {
           localStorage.setItem(key, backup[key]);
         });
         notifySuccess("Backup restored");
+        window.location.reload();
       }
     },
     assertMintError: function (response: { error?: any }, verbose = true) {

From 1457d195be2dbc529c7af92cd517d3f13f538170 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 20:17:04 +0100
Subject: [PATCH 07/21] terms

---
 src/components/MainHeader.vue       |  16 +-
 src/pages/TermsPage.vue             |  49 ++++++
 src/pages/WalletPage.vue            |   3 +
 src/pages/welcome/WelcomeSlide4.vue | 233 ++++++++++++++++++++++------
 src/router/routes.js                |   7 +
 5 files changed, 256 insertions(+), 52 deletions(-)
 create mode 100644 src/pages/TermsPage.vue

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index 89bcfd52..56a41b35 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -81,6 +81,16 @@
           <q-item-label caption>Wallet configuration</q-item-label>
         </q-item-section>
       </q-item>
+      <q-item-label header>Terms </q-item-label>
+      <q-item clickable to="/terms">
+        <q-item-section avatar>
+          <q-icon name="gavel" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>Terms</q-item-label>
+          <q-item-label caption>Terms of Service</q-item-label>
+        </q-item-section>
+      </q-item>
       <q-item-label header>Links </q-item-label>
       <EssentialLink
         v-for="link in essentialLinks"
@@ -121,12 +131,6 @@ const linksList = [
     icon: "rss_feed",
     link: "https://twitter.com/CashuBTC",
   },
-  {
-    title: "Terms",
-    caption: "Terms of service",
-    icon: "info_i",
-    link: "https://docs.cashu.space/contribute",
-  },
   {
     title: "Donate",
     caption: "Support Cashu development",
diff --git a/src/pages/TermsPage.vue b/src/pages/TermsPage.vue
new file mode 100644
index 00000000..31c62917
--- /dev/null
+++ b/src/pages/TermsPage.vue
@@ -0,0 +1,49 @@
+<!-- src/components/WelcomePage.vue -->
+<template>
+  <q-card class="bg-dark q-pa-none" style="height: 100%">
+    <WelcomeSlide4 />
+  </q-card>
+  <q-dialog persistent transition-show="slide-up" transition-hide="fadeOut">
+  </q-dialog>
+</template>
+
+<script>
+import { onMounted, ref } from "vue";
+import WelcomeSlide4 from "./welcome/WelcomeSlide4.vue";
+
+export default {
+  name: "TermsPage",
+  components: {
+    WelcomeSlide4,
+  },
+  setup() {
+    onMounted(() => {});
+
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.q-dialog__inner {
+  height: 100%;
+  width: 100%;
+  margin: 0; /* Align dialog to cover the entire viewport */
+}
+
+.q-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.q-carousel {
+  flex: 1;
+}
+
+.custom-navigation {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+}
+</style>
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index 45dc3797..7bc2b2e1 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -443,6 +443,9 @@ export default {
       this.focusInput("parseDialogInput");
     },
     showWelcomePage: function () {
+      if (!useWelcomeStore().termsAccepted) {
+        useWelcomeStore().showWelcome = true;
+      }
       if (useWelcomeStore().showWelcome) {
         this.$router.push("/welcome");
       }
diff --git a/src/pages/welcome/WelcomeSlide4.vue b/src/pages/welcome/WelcomeSlide4.vue
index 4a2b8b40..3447802e 100644
--- a/src/pages/welcome/WelcomeSlide4.vue
+++ b/src/pages/welcome/WelcomeSlide4.vue
@@ -13,52 +13,194 @@
           margin: 0 auto;
         "
       >
+        <p><strong>Last Updated: 17.12.2024</strong></p>
         <p>
-          <!-- Filler text to simulate EULA -->
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-          scelerisque aliquam odio et faucibus. Nulla rhoncus feugiat eros quis
-          consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate
-          ut ligula. Vestibulum sit amet urna turpis. Praesent sit amet
-          tristique urna. Nulla facilisi. Pellentesque et mi orci. Pellentesque
-          habitant morbi tristique senectus et netus et malesuada fames ac
-          turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus
-          et ultrices posuere cubilia curae; Nulla facilisi. Donec aliquet,
-          tortor nec commodo ultricies, lacus quam interdum libero, et
-          pellentesque felis lorem nec dui. Nulla facilisi. Duis aliquet egestas
-          purus in blandit. Curabitur vulputate, ligula lacinia scelerisque
-          tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
-        </p>
-        <p>
-          <!-- Filler text to simulate EULA -->
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-          scelerisque aliquam odio et faucibus. Nulla rhoncus feugiat eros quis
-          consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate
-          ut ligula. Vestibulum sit amet urna turpis. Praesent sit amet
-          tristique urna. Nulla facilisi. Pellentesque et mi orci. Pellentesque
-          habitant morbi tristique senectus et netus et malesuada fames ac
-          turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus
-          et ultrices posuere cubilia curae; Nulla facilisi. Donec aliquet,
-          tortor nec commodo ultricies, lacus quam interdum libero, et
-          pellentesque felis lorem nec dui. Nulla facilisi. Duis aliquet egestas
-          purus in blandit. Curabitur vulputate, ligula lacinia scelerisque
-          tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
-        </p>
-        <p>
-          <!-- Filler text to simulate EULA -->
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-          scelerisque aliquam odio et faucibus. Nulla rhoncus feugiat eros quis
-          consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate
-          ut ligula. Vestibulum sit amet urna turpis. Praesent sit amet
-          tristique urna. Nulla facilisi. Pellentesque et mi orci. Pellentesque
-          habitant morbi tristique senectus et netus et malesuada fames ac
-          turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus
-          et ultrices posuere cubilia curae; Nulla facilisi. Donec aliquet,
-          tortor nec commodo ultricies, lacus quam interdum libero, et
-          pellentesque felis lorem nec dui. Nulla facilisi. Duis aliquet egestas
-          purus in blandit. Curabitur vulputate, ligula lacinia scelerisque
-          tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.
-        </p>
-        <!-- Repeat or add more paragraphs as needed -->
+          <strong
+            >IMPORTANT NOTICE: THESE TERMS OF SERVICE CONTAIN AN ARBITRATION
+            PROVISION REQUIRING BINDING ARBITRATION OF DISPUTES AND A WAIVER OF
+            CERTAIN RIGHTS TO A JURY TRIAL. PLEASE READ THESE TERMS OF SERVICE
+            CAREFULLY. IF YOU DO NOT AGREE, DO NOT USE CASHU.ME.</strong
+          >
+        </p>
+        <p>
+          These Terms of Service (these “Terms”) constitute the entire agreement
+          and understanding between you (“you” or “your”) and Cashu.me
+          (“Cashu.me,” “we,” “us,” or “our”) regarding your use of the Cashu.me
+          website and any related applications, software, code, or services
+          (collectively, the “Site” or “Services”). By accessing or using the
+          Site or Services, you acknowledge that you have read, understand, and
+          agree to be bound by these Terms. If you do not agree, do not access
+          or use the Site or Services.
+        </p>
+        <p><strong>1. Nature of the Services</strong></p>
+        <p>
+          1.1 <strong>Non-Custodial Web Application:</strong> Cashu.me provides
+          a non-custodial web application (“wallet”) that is executed entirely
+          on your device. Our Site merely makes available client-side code
+          implementing the open-source Cashu protocol. We do not run a server
+          that holds your ecash or executes transactions on your behalf.
+        </p>
+        <p>
+          1.2 <strong>No Control Over Mints:</strong> Cashu.me does not issue
+          ecash and does not operate or control any Mint. The choice of any Mint
+          and any transaction or relationship you establish with that Mint is
+          solely between you and that Mint. Cashu.me has no involvement,
+          responsibility, or liability in any such interaction.
+        </p>
+        <p>
+          1.3 <strong>No Funds Access:</strong> At no time does Cashu.me have
+          custody, possession, or control of your ecash. Transactions occur
+          solely by your actions and through your chosen Mint. We do not
+          monitor, verify, or facilitate transfers between you and any Mint or
+          other parties.
+        </p>
+        <p><strong>2. User Responsibilities & Disclaimers</strong></p>
+        <p>
+          2.1 <strong>User’s Sole Responsibility:</strong> You understand and
+          agree that you use the Site and Services at your own risk and for your
+          own account. You alone are fully responsible for selecting Mints,
+          conducting transactions, and safeguarding your ecash and secret
+          values. Cashu.me is not a party to and disclaims any responsibility
+          for any agreements, terms, or disputes between you and any Mint.
+        </p>
+        <p>
+          2.2 <strong>No Partnership with Mints:</strong> Cashu.me is not
+          affiliated with, endorsed by, or responsible for any Mint. We make no
+          representations, warranties, or guarantees about any Mint’s integrity,
+          legality, liquidity, or functionality. Your relationship with any
+          Mint, including the issuance, redemption, or valuation of ecash, is
+          solely a matter between you and that Mint.
+        </p>
+        <p>
+          2.3 <strong>Risk of Ecash:</strong> Ecash is an experimental,
+          bearer-like digital asset that may not be recognized as money,
+          currency, or a store of value. Anyone with the secret value has
+          control over the ecash. You agree to review and understand all risks
+          disclosed in our Risk Disclosure Statement before using ecash.
+        </p>
+        <p><strong>3. Modifications to Terms</strong></p>
+        <p>
+          We may amend or update these Terms at any time without notice. Your
+          continued use of the Site or Services after any modifications
+          constitutes acceptance of the updated Terms. If you do not agree,
+          discontinue your use.
+        </p>
+        <p><strong>4. Compliance with Laws</strong></p>
+        <p>
+          Your use of the Site and any Services is void where prohibited by law.
+          You must determine whether your use of ecash and related activities
+          are lawful. You are solely responsible for compliance with all
+          applicable laws, taxes, and regulations.
+        </p>
+        <p><strong>5. License to Use the Site</strong></p>
+        <p>
+          Subject to your compliance with these Terms, we grant you a limited,
+          personal, non-exclusive, non-transferable, revocable license to use
+          the Site. We may suspend or terminate your access at our sole
+          discretion.
+        </p>
+        <p><strong>6. Risks and Limitation of Liability</strong></p>
+        <p>
+          6.1
+          <strong>No Liability for Interactions with Mints:</strong> Cashu.me is
+          not liable for any transactions, disputes, or issues arising from your
+          dealings with Mints.
+        </p>
+        <p>
+          6.2 <strong>Assumption of Risk:</strong> You acknowledge ecash-related
+          activities involve significant risks, including market volatility,
+          theft, and regulatory uncertainty.
+        </p>
+        <p>
+          6.3 <strong>No Warranties:</strong> THE SITE AND SERVICES ARE PROVIDED
+          “AS IS” WITHOUT ANY WARRANTIES. WE DISCLAIM ALL WARRANTIES TO THE
+          MAXIMUM EXTENT PERMITTED BY LAW.
+        </p>
+        <p>
+          6.4 <strong>Limitation of Liability:</strong> TO THE FULLEST EXTENT
+          PERMITTED BY LAW, CASHU.ME IS NOT LIABLE FOR INDIRECT, INCIDENTAL,
+          SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES ARISING OUT OF OR RELATED
+          TO THESE TERMS, THE SITE, OR THE SERVICES.
+        </p>
+        <p><strong>7. Indemnification and Release</strong></p>
+        <p>
+          You agree to indemnify and hold harmless Cashu.me and its affiliates
+          from claims arising out of your use of the Site or Services. If you
+          have a dispute with any Mint or third party, you release Cashu.me from
+          all related claims.
+        </p>
+        <p><strong>8. Arbitration and Dispute Resolution</strong></p>
+        <p>
+          Except for certain intellectual property claims, disputes shall be
+          resolved by binding arbitration in Wyoming under the American
+          Arbitration Association. The Federal Arbitration Act applies. You
+          waive any right to a trial by jury or to participate in a class
+          action.
+        </p>
+        <p><strong>9. Prohibited Uses</strong></p>
+        <p>
+          You may not use the Site or Services for unlawful activities, to
+          violate applicable laws, or to engage in market manipulation. We may
+          suspend or terminate access for prohibited uses.
+        </p>
+        <p><strong>10. Intellectual Property</strong></p>
+        <p>
+          All trademarks, logos, and content on the Site are owned by Cashu.me
+          or its licensors. You shall not use them without prior written
+          consent.
+        </p>
+        <p><strong>11. Your Representations and Warranties</strong></p>
+        <p>
+          You represent and warrant you have the right and authority to enter
+          into these Terms and that your use of the Site will be lawful.
+        </p>
+        <p><strong>12. No Investment Advice</strong></p>
+        <p>Cashu.me does not provide investment, legal, or tax advice.</p>
+        <p><strong>13. No Waiver</strong></p>
+        <p>
+          No failure or delay to exercise any right by Cashu.me shall constitute
+          a waiver of that right.
+        </p>
+        <p><strong>14. Force Majeure</strong></p>
+        <p>
+          Cashu.me is not liable for delays or failures due to events beyond our
+          reasonable control.
+        </p>
+        <p><strong>15. Assignment</strong></p>
+        <p>
+          You may not assign your rights without our consent. We may assign our
+          rights freely.
+        </p>
+        <p><strong>16. Severability</strong></p>
+        <p>
+          If any provision is deemed invalid, remaining provisions remain in
+          effect.
+        </p>
+        <p><strong>17. Electronic Communications; Language</strong></p>
+        <p>
+          By using the Site or Services, you consent to receive communications
+          electronically. We will communicate in English.
+        </p>
+        <p><strong>18. Governing Law; Venue</strong></p>
+        <p>
+          These Terms are governed by the laws of Wyoming. All disputes are
+          subject to arbitration or Wyoming courts, as provided herein.
+        </p>
+        <p><strong>19. E-Sign Consent Policy</strong></p>
+        <p>
+          By using the Site, you consent to receive all communications
+          electronically.
+        </p>
+        <p><strong>20. Risk Disclosure Statement</strong></p>
+        <p>
+          Using ecash involves significant risks including legal, market,
+          liquidity, counterparty, and operational risks. You acknowledge and
+          accept these risks.
+        </p>
+        <p><strong>21. Entire Agreement</strong></p>
+        <p>
+          These Terms represent the entire agreement between you and Cashu.me.
+        </p>
       </div>
       <q-checkbox
         v-model="welcomeStore.termsAccepted"
@@ -98,7 +240,6 @@ h2 {
 }
 p {
   font-size: 0.82rem;
-  /* color grey */
   color: #c6c6c6;
 }
 </style>
diff --git a/src/router/routes.js b/src/router/routes.js
index 5760ea7d..08429be6 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -30,6 +30,13 @@ const routes = [
       { path: "", component: () => import("src/pages/WelcomePage.vue") },
     ],
   },
+  {
+    path: "/terms",
+    component: () => import("layouts/FullscreenLayout.vue"),
+    children: [
+      { path: "", component: () => import("src/pages/TermsPage.vue") },
+    ],
+  },
 
   // Always leave this as last one,
   // but you can also remove it

From a777dd1e9e806a68938e2abdd242a87bf11d6287 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 20:36:19 +0100
Subject: [PATCH 08/21] fix primary

---
 src/components/NoMintWarnBanner.vue | 25 ++++++++++++++++++++++---
 src/css/base.scss                   | 25 +++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/components/NoMintWarnBanner.vue b/src/components/NoMintWarnBanner.vue
index a0854169..19b6883b 100644
--- a/src/components/NoMintWarnBanner.vue
+++ b/src/components/NoMintWarnBanner.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="q-ma-lg q-pa-md" style="border: 2px solid; border-radius: 10px">
+  <q-card class="q-ma-lg bg-dark q-pa-md">
     <q-card-section>
       <div class="row items-center justify-center">
-        <q-icon class="q-pb-md" name="account_balance" size="50px" />
+        <q-icon
+          color="primary"
+          class="q-pb-md"
+          name="account_balance"
+          size="50px"
+        />
       </div>
       <div class="row items-center justify-center">
         <div class="text-h6">Join a mint</div>
@@ -33,7 +38,7 @@
         />
       </div>
     </q-card-section>
-  </div>
+  </q-card>
 </template>
 <script>
 import { defineComponent, ref } from "vue";
@@ -89,3 +94,17 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+.q-dialog__inner {
+  height: 100%;
+  width: 100%;
+  margin: 0; /* Align dialog to cover the entire viewport */
+}
+
+.q-card {
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--q-primary);
+}
+</style>
diff --git a/src/css/base.scss b/src/css/base.scss
index 2eca4e93..28da7d3c 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -18,9 +18,9 @@ $themes: (
   "freedom": (
     primary: #e22156,
     secondary: #b91a45,
-    dark: #0a0a0a,
+    dark: #000,
     info: #1b1b1b,
-    marginal-bg: #2d293b,
+    marginal-bg: #000,
     marginal-text: #fff,
   ),
   "salvador": (
@@ -104,6 +104,27 @@ $themes: (
   }
 }
 
+@each $theme, $colors in $themes {
+  [data-theme="#{$theme}"] {
+    @each $name, $color in $colors {
+      @if $name == "primary" {
+        --q-primary: #{$color};
+      }
+      @if $name == "secondary" {
+        --q-secondary: #{$color};
+      }
+    }
+    @each $name, $color in $colors {
+      .bg-#{$name} {
+        background: $color !important;
+      }
+      .text-#{$name} {
+        color: $color !important;
+      }
+    }
+  }
+}
+
 [data-theme="monochrome"] .q-badge.bg-primary,
 [data-theme="cyber"] .q-badge.bg-primary {
   background: primary !important;

From cc3974bb88965b39e0535650e215e95b9806e3ab Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 20:39:00 +0100
Subject: [PATCH 09/21] run format

---
 src/components/AndroidPWAPrompt.vue | 4 ++--
 src/stores/mints.ts                 | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AndroidPWAPrompt.vue b/src/components/AndroidPWAPrompt.vue
index 9906f565..88df2bfa 100644
--- a/src/components/AndroidPWAPrompt.vue
+++ b/src/components/AndroidPWAPrompt.vue
@@ -32,7 +32,7 @@ export default defineComponent({
   data() {
     return {
       showAndroidPWAPromptLocal:
-        localStorage.getItem("cashu.showAndroidPWAPrompt") != "seen",
+        localStorage.getItem("cashu.ui.showAndroidPWAPrompt") != "seen",
       showAndroidPWAPrompt: false,
     };
   },
@@ -47,7 +47,7 @@ export default defineComponent({
   },
   methods: {
     closePrompt() {
-      localStorage.setItem("cashu.showAndroidPWAPrompt", "seen");
+      localStorage.setItem("cashu.ui.showAndroidPWAPrompt", "seen");
       this.showAndroidPWAPrompt = false;
     },
     isChromeOnAndroid() {
diff --git a/src/stores/mints.ts b/src/stores/mints.ts
index 93bba77b..d22e8058 100644
--- a/src/stores/mints.ts
+++ b/src/stores/mints.ts
@@ -420,7 +420,7 @@ export const useMintsStore = defineStore("mints", {
         console.error(error);
         try {
           notifyApiError(error, "Could not get mint info");
-        } catch { }
+        } catch {}
         throw error;
       }
     },
@@ -465,7 +465,7 @@ export const useMintsStore = defineStore("mints", {
         console.error(error);
         try {
           notifyApiError(error, "Could not get mint keys");
-        } catch { }
+        } catch {}
         throw error;
       }
     },
@@ -479,7 +479,7 @@ export const useMintsStore = defineStore("mints", {
         console.error(error);
         try {
           notifyApiError(error, "Could not get mint keysets");
-        } catch { }
+        } catch {}
         throw error;
       }
     },

From 4cefef4bbe9721b0221f82e2e591e28eaf33aadc Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 20:39:42 +0100
Subject: [PATCH 10/21] link

---
 src/components/MainHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index 56a41b35..a25b82a0 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -133,7 +133,7 @@ const linksList = [
   },
   {
     title: "Donate",
-    caption: "Support Cashu development",
+    caption: "Support Cashu",
     icon: "favorite",
     link: "https://docs.cashu.space/contribute",
   },

From 2df5bdb8990b47bc581dc5e73d28d217164835a7 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 20:45:25 +0100
Subject: [PATCH 11/21] button

---
 src/pages/WelcomePage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/WelcomePage.vue b/src/pages/WelcomePage.vue
index 63f7aee8..1e051efe 100644
--- a/src/pages/WelcomePage.vue
+++ b/src/pages/WelcomePage.vue
@@ -35,9 +35,10 @@
           flat
           icon="arrow_left"
           label="Previous"
-          :disable="!welcomeStore.canGoPrev"
+          v-if="welcomeStore.canGoPrev"
           @click="welcomeStore.goToPrevSlide"
         />
+        <q-space />
         <q-btn
           flat
           icon="arrow_right"

From 29a11a52ba38dc84b605205886989ed748c2a8ef Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:10:08 +0100
Subject: [PATCH 12/21] update tos

---
 src/pages/welcome/WelcomeSlide4.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/welcome/WelcomeSlide4.vue b/src/pages/welcome/WelcomeSlide4.vue
index 3447802e..c6301bce 100644
--- a/src/pages/welcome/WelcomeSlide4.vue
+++ b/src/pages/welcome/WelcomeSlide4.vue
@@ -131,11 +131,12 @@
         </p>
         <p><strong>8. Arbitration and Dispute Resolution</strong></p>
         <p>
-          Except for certain intellectual property claims, disputes shall be
-          resolved by binding arbitration in Wyoming under the American
-          Arbitration Association. The Federal Arbitration Act applies. You
-          waive any right to a trial by jury or to participate in a class
-          action.
+          Except for certain intellectual property claims, any dispute arising
+          out of or relating to these Terms, the Site, or the Services shall be
+          resolved through final and binding arbitration administered by a
+          reputable arbitration provider. You agree that all proceedings will be
+          conducted on an individual basis and you waive any right to a trial by
+          jury or to participate in a class action.
         </p>
         <p><strong>9. Prohibited Uses</strong></p>
         <p>
@@ -181,10 +182,11 @@
           By using the Site or Services, you consent to receive communications
           electronically. We will communicate in English.
         </p>
-        <p><strong>18. Governing Law; Venue</strong></p>
+        <p><strong>18. Governing Law</strong></p>
         <p>
-          These Terms are governed by the laws of Wyoming. All disputes are
-          subject to arbitration or Wyoming courts, as provided herein.
+          These Terms and any dispute arising from or related to these Terms,
+          the Site, or the Services shall be governed by principles of law
+          generally applicable, without regard to any conflicts of law rules.
         </p>
         <p><strong>19. E-Sign Consent Policy</strong></p>
         <p>

From 364429bd8ee14e9e7eda3a4ca1574aa56c2ecb6e Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:25:25 +0100
Subject: [PATCH 13/21] fix payment request mint

---
 src/components/PaymentRequestDialog.vue | 43 ++++++++++++++++++----
 src/pages/WalletPage.vue                |  2 +-
 src/stores/payment-request.ts           | 27 ++++++++++++--
 src/stores/wallet.ts                    | 48 +++++++------------------
 4 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/components/PaymentRequestDialog.vue b/src/components/PaymentRequestDialog.vue
index c774d13a..41f4d2c7 100644
--- a/src/components/PaymentRequestDialog.vue
+++ b/src/components/PaymentRequestDialog.vue
@@ -38,9 +38,15 @@
         <div class="row justify-center">
           <q-card-section class="q-pa-sm">
             <div class="row justify-center q-pt-sm">
-              <q-chip outline class="q-pa-md q-py-md" style="height: 36px">
-                <q-icon name="account_balance" size="xs" class="q-mr-xs" />
-                {{ getShortUrl(activeMintUrl) }}
+              <q-chip
+                outline
+                clickable
+                class="q-pa-md q-py-md"
+                style="height: 36px"
+                @click="setActiveMintUrl"
+              >
+                <q-icon name="account_balance" size="xs" class="q-mr-sm" />
+                {{ getShortUrl(chosenMintUrl) }}
               </q-chip>
               <div @click="toggleUnit" class="q-mt-xs q-ml-sm">
                 <ToggleUnit class="q-py-none" color="white" />
@@ -118,6 +124,8 @@ export default defineComponent({
       amountInputValue: "",
       amountLabelDefault: "Add amount",
       amountLabel: "Add amount",
+      chosenMintUrl: "Any mint",
+      memo: "",
     };
   },
   computed: {
@@ -134,14 +142,33 @@ export default defineComponent({
     toggleUnit() {
       this.paymentRequestAmount = undefined;
       this.amountLabel = this.amountLabelDefault;
-      this.newPaymentRequest(this.paymentRequestAmount);
+      this.newPaymentRequest(
+        this.paymentRequestAmount,
+        this.memo,
+        this.chosenMintUrl
+      );
     },
     newRequest() {
-      this.newPaymentRequest(this.paymentRequestAmount);
+      this.newPaymentRequest(
+        this.paymentRequestAmount,
+        this.memo,
+        this.chosenMintUrl
+      );
     },
     getShortUrl(url) {
       return getShortUrl(url);
     },
+    setActiveMintUrl() {
+      if (this.activeMintUrl == this.chosenMintUrl) {
+        return;
+      }
+      this.chosenMintUrl = this.activeMintUrl;
+      this.newPaymentRequest(
+        this.paymentRequestAmount,
+        this.memo,
+        this.chosenMintUrl
+      );
+    },
     startEditingAmount() {
       this.isEditingAmount = true;
       this.$nextTick(() => {
@@ -162,7 +189,11 @@ export default defineComponent({
           this.activeUnit
         );
       }
-      this.newPaymentRequest(this.paymentRequestAmount);
+      this.newPaymentRequest(
+        this.paymentRequestAmount,
+        this.memo,
+        this.chosenMintUrl
+      );
       this.isEditingAmount = false;
       this.amountInputValue = "";
     },
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
index 7bc2b2e1..0f9b018c 100644
--- a/src/pages/WalletPage.vue
+++ b/src/pages/WalletPage.vue
@@ -371,7 +371,6 @@ export default {
       "checkPendingTokens",
       "decodeRequest",
       "initializeMnemonic",
-      "createPaymentRequest",
     ]),
     ...mapActions(useCameraStore, ["closeCamera", "showCamera"]),
     ...mapActions(useNWCStore, ["listenToNWCCommands"]),
@@ -385,6 +384,7 @@ export default {
       "initSigner",
     ]),
     ...mapActions(useStorageStore, ["checkLocalStorage"]),
+    ...mapActions(usePRStore, ["createPaymentRequest"]),
     // TOKEN METHODS
     decodeToken: function (encoded_token) {
       try {
diff --git a/src/stores/payment-request.ts b/src/stores/payment-request.ts
index a55765b4..fcf9b536 100644
--- a/src/stores/payment-request.ts
+++ b/src/stores/payment-request.ts
@@ -14,6 +14,7 @@ import { useTokensStore } from "./tokens";
 import token from "src/js/token";
 import { notify, notifyError, notifySuccess } from "src/js/notify";
 import { useLocalStorage } from "@vueuse/core";
+import { v4 as uuidv4 } from "uuid";
 
 export const usePRStore = defineStore("payment-request", {
   state: () => ({
@@ -27,9 +28,31 @@ export const usePRStore = defineStore("payment-request", {
   }),
   getters: {},
   actions: {
-    newPaymentRequest(amount?: number, memo?: string) {
+    newPaymentRequest(amount?: number, memo?: string, mintUrl?: string) {
       const walletStore = useWalletStore();
-      this.showPRKData = walletStore.createPaymentRequest(amount, memo);
+      this.showPRKData = this.createPaymentRequest(amount, memo, mintUrl);
+    },
+    createPaymentRequest: function (amount?: number, memo?: string, mintUrl?: string) {
+      const nostrStore = useNostrStore();
+      const mintStore = useMintsStore();
+      const tags = [["n", "17"]];
+      const transport = [
+        {
+          type: PaymentRequestTransportType.NOSTR,
+          target: nostrStore.seedSignerNprofile,
+          tags: tags,
+        },
+      ] as PaymentRequestTransport[];
+      const uuid = uuidv4().split("-")[0];
+      const paymentRequest = new PaymentRequest(
+        transport,
+        uuid,
+        amount,
+        mintStore.activeUnit,
+        mintUrl?.length ? mintStore.activeMintUrl ? [mintStore.activeMintUrl] : undefined : undefined,
+        memo
+      );
+      return paymentRequest.toEncodedRequest();
     },
     async decodePaymentRequest(pr: string) {
       console.log("decodePaymentRequest", pr);
diff --git a/src/stores/wallet.ts b/src/stores/wallet.ts
index 66b53c9b..125c519f 100644
--- a/src/stores/wallet.ts
+++ b/src/stores/wallet.ts
@@ -42,8 +42,6 @@ import * as bolt11Decoder from "light-bolt11-decoder";
 import { bech32 } from "bech32";
 import axios from "axios";
 import { date } from "quasar";
-import { useNostrStore } from "./nostr";
-import { v4 as uuidv4 } from "uuid";
 
 // bip39 requires Buffer
 // import { Buffer } from 'buffer';
@@ -740,8 +738,8 @@ export const useWalletStore = defineStore("wallet", {
 
         notifySuccess(
           "Paid " +
-            uIStore.formatCurrency(amount_paid, mintStore.activeUnit) +
-            " via Lightning"
+          uIStore.formatCurrency(amount_paid, mintStore.activeUnit) +
+          " via Lightning"
         );
         console.log("#### pay lightning: token paid");
         // delete spent tokens from db
@@ -988,10 +986,10 @@ export const useWalletStore = defineStore("wallet", {
         const proofStore = useProofsStore();
         notifySuccess(
           "Sent " +
-            uIStore.formatCurrency(
-              proofStore.sumProofs(spentProofs),
-              mintStore.activeUnit
-            )
+          uIStore.formatCurrency(
+            proofStore.sumProofs(spentProofs),
+            mintStore.activeUnit
+          )
         );
       } else {
         console.log("### token not paid yet");
@@ -1088,8 +1086,8 @@ export const useWalletStore = defineStore("wallet", {
         if (!!window.navigator.vibrate) navigator.vibrate(200);
         notifySuccess(
           "Received " +
-            uIStore.formatCurrency(invoice.amount, mintStore.activeUnit) +
-            " via Lightning"
+          uIStore.formatCurrency(invoice.amount, mintStore.activeUnit) +
+          " via Lightning"
         );
         return proofs;
       } catch (error) {
@@ -1138,10 +1136,10 @@ export const useWalletStore = defineStore("wallet", {
             if (!!window.navigator.vibrate) navigator.vibrate(200);
             notifySuccess(
               "Sent " +
-                uIStore.formatCurrency(
-                  useProofsStore().sumProofs(proofs),
-                  mintStore.activeUnit
-                )
+              uIStore.formatCurrency(
+                useProofsStore().sumProofs(proofs),
+                mintStore.activeUnit
+              )
             );
           }
           // set invoice in history to paid
@@ -1436,27 +1434,5 @@ export const useWalletStore = defineStore("wallet", {
       }
       return false;
     },
-    createPaymentRequest: function (amount?: number, memo?: string): string {
-      const nostrStore = useNostrStore();
-      const mintStore = useMintsStore();
-      const tags = [["n", "17"]];
-      const transport = [
-        {
-          type: PaymentRequestTransportType.NOSTR,
-          target: nostrStore.seedSignerNprofile,
-          tags: tags,
-        },
-      ] as PaymentRequestTransport[];
-      const uuid = uuidv4().split("-")[0];
-      const paymentRequest = new PaymentRequest(
-        transport,
-        uuid,
-        amount,
-        mintStore.activeUnit,
-        mintStore.activeMintUrl ? [mintStore.activeMintUrl] : undefined,
-        memo
-      );
-      return paymentRequest.toEncodedRequest();
-    },
   },
 });

From f5420bf0161e60475951b9037a3b1ae550712ce6 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 01:08:42 +0100
Subject: [PATCH 14/21] slight changes

---
 src/components/MainHeader.vue       | 1 +
 src/pages/welcome/WelcomeSlide1.vue | 2 +-
 src/pages/welcome/WelcomeSlide3.vue | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index a25b82a0..31c244c6 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -9,6 +9,7 @@
         color="primary"
         aria-label="Menu"
         @click="toggleLeftDrawer"
+        :disable="uiStore.globalMutexLock"
       />
       <q-toolbar-title></q-toolbar-title>
       <transition
diff --git a/src/pages/welcome/WelcomeSlide1.vue b/src/pages/welcome/WelcomeSlide1.vue
index 3f8e0159..54e506d5 100644
--- a/src/pages/welcome/WelcomeSlide1.vue
+++ b/src/pages/welcome/WelcomeSlide1.vue
@@ -19,7 +19,7 @@
         <q-expansion-item
           dense
           dense-toggle
-          class="text-left"
+          class="text-left q-mt-lg"
           label="Click to learn more"
         >
           <p class="q-mt-md">
diff --git a/src/pages/welcome/WelcomeSlide3.vue b/src/pages/welcome/WelcomeSlide3.vue
index ff7ca521..67276c6b 100644
--- a/src/pages/welcome/WelcomeSlide3.vue
+++ b/src/pages/welcome/WelcomeSlide3.vue
@@ -28,7 +28,7 @@
       <q-checkbox
         v-model="welcomeStore.seedPhraseValidated"
         label="I have written it down"
-        class="q-mt-md"
+        class="q-mt-sm"
         style="font-size: 1rem"
       />
     </div>

From 0339f133720dc4d956eb197c1a91912009a69729 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 01:09:24 +0100
Subject: [PATCH 15/21] slight changes

---
 src/components/MainHeader.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index 31c244c6..12779fa5 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -65,6 +65,7 @@
         :color="countdown > 0 ? 'negative' : 'primary'"
         aria-label="Refresh"
         @click="reload"
+        :disable="uiStore.globalMutexLock"
       >
       </q-btn>
     </q-toolbar>

From d65e4a5971f2ccdf598fdcb1ac85097f86efb4cf Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 01:10:31 +0100
Subject: [PATCH 16/21] slight changes

---
 src/components/MainHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index 12779fa5..33ae1343 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -65,7 +65,7 @@
         :color="countdown > 0 ? 'negative' : 'primary'"
         aria-label="Refresh"
         @click="reload"
-        :disable="uiStore.globalMutexLock"
+        :disable="uiStore.globalMutexLock && countdown === 0"
       >
       </q-btn>
     </q-toolbar>

From 867f843dbc8288e35f41535c4227e35e3e99f510 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 09:35:44 +0100
Subject: [PATCH 17/21] add welcome

---
 src/stores/welcome.ts | 127 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 src/stores/welcome.ts

diff --git a/src/stores/welcome.ts b/src/stores/welcome.ts
new file mode 100644
index 00000000..5d99535e
--- /dev/null
+++ b/src/stores/welcome.ts
@@ -0,0 +1,127 @@
+// src/stores/welcome.ts
+import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core";
+import { computed } from "vue";
+
+export type WelcomeState = {
+  showWelcome: boolean;
+  currentSlide: number;
+  seedPhraseValidated: boolean;
+  termsAccepted: boolean;
+};
+
+// Define the Pinia store
+export const useWelcomeStore = defineStore("welcome", {
+  state: (): WelcomeState => ({
+    showWelcome: useLocalStorage<boolean>("cashu.welcome.showWelcome", true),
+    currentSlide: useLocalStorage<number>("cashu.welcome.currentSlide", 0),
+    seedPhraseValidated: useLocalStorage<boolean>(
+      "cashu.welcome.seedPhraseValidated",
+      false
+    ),
+    termsAccepted: useLocalStorage<boolean>(
+      "cashu.welcome.termsAccepted",
+      false
+    ),
+  }),
+  getters: {
+    // Determines if the current slide is the last one
+    isLastSlide: (state) => state.currentSlide === 3, // Adjust if you have more slides
+
+    // Determines if the user can proceed to the next slide
+    canProceed: (state) => {
+      switch (state.currentSlide) {
+        case 0:
+          return true;
+        case 1:
+          return true; // Assuming no validation for PWA install
+        case 2:
+          return state.seedPhraseValidated;
+        case 3:
+          return state.termsAccepted;
+        default:
+          return false;
+      }
+    },
+
+    // Determines if the user can navigate to the previous slide
+    canGoPrev: (state) => state.currentSlide > 0,
+  },
+  actions: {
+    /**
+     * Initializes the welcome dialog based on local storage.
+     * Should be called when the store is initialized.
+     */
+    initializeWelcome() {
+      if (!this.showWelcome) {
+        window.location.href = "/";
+      }
+    },
+
+    /**
+     * Closes the welcome dialog and marks it as seen.
+     */
+    closeWelcome() {
+      this.showWelcome = false;
+      // Redirect to home or desired route
+      window.location.href = "/";
+    },
+
+    /**
+     * Sets the current slide index.
+     * @param index - The index of the slide to navigate to.
+     */
+    setCurrentSlide(index: number) {
+      this.currentSlide = index;
+    },
+
+    /**
+     * Marks the terms as accepted.
+     */
+    acceptTerms() {
+      this.termsAccepted = true;
+    },
+
+    /**
+     * Validates the seed phrase.
+     */
+    validateSeedPhrase() {
+      this.seedPhraseValidated = true;
+    },
+
+    /**
+     * Resets the welcome dialog state (useful for testing or resetting).
+     */
+    resetWelcome() {
+      this.showWelcome = true;
+      this.currentSlide = 0;
+      this.termsAccepted = false;
+      this.seedPhraseValidated = false;
+    },
+
+    /**
+     * Navigates to the previous slide if possible.
+     */
+    goToPrevSlide() {
+      if (this.canGoPrev) {
+        this.currentSlide -= 1;
+      }
+      // Optionally, handle edge cases or emit events
+    },
+
+    /**
+     * Navigates to the next slide if possible.
+     * If on the last slide, it can close the welcome dialog.
+     */
+    goToNextSlide() {
+      if (this.canProceed) {
+        if (this.isLastSlide) {
+          this.closeWelcome();
+        } else {
+          this.currentSlide += 1;
+        }
+      }
+      // Optionally, handle edge cases or emit events
+    },
+  },
+});

From 8baf6d2924137fba8328a296425838c7c0c5975e Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 09:51:53 +0100
Subject: [PATCH 18/21] layout

---
 src/layouts/BlankLayout.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/layouts/BlankLayout.vue

diff --git a/src/layouts/BlankLayout.vue b/src/layouts/BlankLayout.vue
new file mode 100644
index 00000000..a670c498
--- /dev/null
+++ b/src/layouts/BlankLayout.vue
@@ -0,0 +1,17 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "BlankLayout",
+  mixins: [windowMixin],
+  components: {},
+});
+</script>

From a6fbe05a26c2d222d15d1b0c401f32e836d0019f Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 10:51:55 +0100
Subject: [PATCH 19/21] receive dialog no hyphen wrap

---
 src/components/ReceiveTokenDialog.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ReceiveTokenDialog.vue b/src/components/ReceiveTokenDialog.vue
index da7889f1..ef9fdade 100644
--- a/src/components/ReceiveTokenDialog.vue
+++ b/src/components/ReceiveTokenDialog.vue
@@ -25,7 +25,7 @@
           label="Paste Cashu token"
           type="textarea"
           autofocus
-          class="q-mb-lg"
+          class="q-mb-lg cashub-nowrap"
           @keyup.enter="receiveIfDecodes"
         >
           <template v-if="receiveData.tokensBase64" v-slot:append>
@@ -327,4 +327,11 @@ export default defineComponent({
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
 }
+
+.cashub-nowrap {
+  word-break: break-all;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  hyphens: none;
+}
 </style>

From ba7b8a6d192c8d407ea7ead162ec26dde70641bd Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 13:30:27 +0100
Subject: [PATCH 20/21] Reverse proxy

---
 README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/README.md b/README.md
index 00570169..88c08575 100644
--- a/README.md
+++ b/README.md
@@ -49,3 +49,47 @@ npm run build
 ### Customize the configuration
 
 See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).
+
+### Reverse proxy
+
+For Quasar Vue Router with history mode, add this fallback URL to allow refreshes: https://router.vuejs.org/guide/essentials/history-mode.html#HTML5-Mode
+
+`Caddyfile`:
+
+```
+# CORS snippet by https://kalnytskyi.com/posts/setup-cors-caddy-2/
+(cors) {
+  @cors_preflight method OPTIONS
+  @cors header Origin {args.0}
+
+  handle @cors_preflight {
+    header Access-Control-Allow-Origin "{args.0}"
+    header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
+    header Access-Control-Allow-Headers "Content-Type"
+    header Access-Control-Max-Age "3600"
+    respond "" 204
+  }
+
+  handle @cors {
+    header Access-Control-Allow-Origin "{args.0}"
+    header Access-Control-Expose-Headers "Link"
+  }
+}
+host.com {
+    import cors *
+    encode gzip
+
+    header /service-worker.js {
+            Service-Worker-Allowed "/"
+            Cache-Control "no-cache"
+    }
+
+    # SPA root
+    root * /usr/share/caddy/cashu.me/
+
+    # quasar vue router fallback history mode
+    try_files {path} /index.html
+
+    file_server
+}
+```

From 5e324816f4e1cb5ee19e27621f8feb0037f7068d Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:07:13 +0100
Subject: [PATCH 21/21] notes on reverse proxy

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 88c08575..6eda7149 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,8 @@ See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quas
 
 For Quasar Vue Router with history mode, add this fallback URL to allow refreshes: https://router.vuejs.org/guide/essentials/history-mode.html#HTML5-Mode
 
+More info: https://stackoverflow.com/questions/36399319/vue-router-return-404-when-revisit-to-the-url
+
 `Caddyfile`:
 
 ```