Restore local storage state from backup file

* Check if the backup is in the expected format! * Restore state in local storage! * Reload the window, if wallet has been restored successfully!
aurorabor · Apr 24, 2023 · ef7a20b · ef7a20b
1 parent 11567e6
commit ef7a20b
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 19 deletions.
diff --git a/src/components/WelcomeDialog.vue b/src/components/WelcomeDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog class="z-top" persistent v-model="showWelcomeDialog" position="top">
+  <q-dialog class="z-top" persistent v-model="showWelcomeDialog" position="top" @drop="dragFile" @dragover="allowDrop">
     <q-card class="q-pa-lg z-top">
       <q-toolbar>
         <q-avatar>
@@ -36,6 +36,9 @@
           will lose your tokens. Press the Backup button to download a copy of
           your tokens.
         </p>
+        <p>
+          <strong class="text-green-13">RESTORE WALLET BACKUP</strong> by dragging and dropping the backup file here!
+        </p>
         <div class="row q-mt-lg">
           <q-btn
             outline
@@ -66,6 +69,8 @@
 </template>
 <script>
 import { defineComponent } from "vue";
+import { mapActions } from "pinia";
+import { useMintsStore } from "stores/mints";
 
 export default defineComponent({
   name: "WelcomeDialog",
@@ -85,6 +90,29 @@ export default defineComponent({
   },
   watch: {},
   computed: {},
-  methods: {},
+  methods: {
+     ...mapActions(useMintsStore, [
+       "restoreFromBackup",
+     ]),
+    dragFile(ev)
+    {
+      ev.preventDefault();
+
+      let files = ev.dataTransfer.files;
+      let file = files[0];
+
+      let reader = new FileReader();
+      reader.onload = f => {
+        let content = f.target.result;
+        let backup = JSON.parse(content);
+
+        this.restoreFromBackup(backup);
+      };
+      reader.readAsText(file);
+    },
+    allowDrop(ev) {
+      ev.preventDefault();
+    }
+  },
 });
 </script>
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
@@ -1112,6 +1112,11 @@ export default {
       this.welcomeDialog.show = false;
       // switch to settings tab
       this.setTab("settings");
+
+      // if a wallet has been restored the "cashu.activeMintUrl" is not null
+      if (!!localStorage.getItem("cashu.activeMintUrl")) {
+        window.location.reload();
+      }
     },
     setTab: function (to) {
       this.tab = to;

diff --git a/src/stores/mints.js b/src/stores/mints.js
@@ -1,29 +1,29 @@
-import { defineStore } from 'pinia'
-import { useLocalStorage } from "@vueuse/core"
+import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core";
 import { useWorkersStore } from "./workers";
-import {axios} from "boot/axios";
+import { axios } from "boot/axios";
 import { notifyApiError, notifyError, notifySuccess } from "src/js/notify";
 
-export const useMintsStore = defineStore('mints', {
+export const useMintsStore = defineStore("mints", {
   state: () => {
     return {
-      activeMintUrl: useLocalStorage('cashu.activeMintUrl', ''),
-      activeProofs: useLocalStorage('cashu.activeProofs', []),
-      keys: useLocalStorage('cashu.keys', {}),
-      keysets: useLocalStorage('cashu.keysets', []),
-      mintToAdd: 'https://8333.space:3338',
-      mints:  useLocalStorage('cashu.mints', []),
-      proofs: useLocalStorage('cashu.proofs', []),
+      activeMintUrl: useLocalStorage("cashu.activeMintUrl", ""),
+      activeProofs: useLocalStorage("cashu.activeProofs", []),
+      keys: useLocalStorage("cashu.keys", {}),
+      keysets: useLocalStorage("cashu.keysets", []),
+      mintToAdd: "https://8333.space:3338",
+      mints: useLocalStorage("cashu.mints", []),
+      proofs: useLocalStorage("cashu.proofs", []),
       showAddMintDialog: false,
-    }
+    };
   },
   getters: {},
   actions: {
     setShowAddMintDialog(show) {
-      this.showAddMintDialog = show
+      this.showAddMintDialog = show;
     },
     setMintToAdd(mint) {
-      this.mintToAdd = mint
+      this.mintToAdd = mint;
     },
     setProofs(proofs) {
       this.proofs = proofs;
@@ -56,7 +56,7 @@ export const useMintsStore = defineStore('mints', {
       }
     },
     activateMint: async function (url, verbose = false) {
-      const workers = useWorkersStore()
+      const workers = useWorkersStore();
       if (url === this.activeMintUrl) {
         return;
       }
@@ -165,6 +165,26 @@ export const useMintsStore = defineStore('mints', {
       }
       notifySuccess("Mint removed.");
     },
+    restoreFromBackup: function(backup) {
+      if(!backup || !backup["cashu.welcomeDialogSeen"])
+      {
+        notifyError("Unrecognized Backup Format!");
+      }
+      else
+      {
+        localStorage.setItem("cashu.welcomeDialogSeen", backup["cashu.welcomeDialogSeen"]);
+        localStorage.setItem("cashu.theme", backup["cashu.theme"]);
+        localStorage.setItem("cashu.mints", backup["cashu.mints"]);
+        localStorage.setItem("cashu.keysets", backup["cashu.keysets"]);
+        localStorage.setItem("cashu.keys", backup["cashu.keys"]);
+        localStorage.setItem("cashu.proofs", backup["cashu.proofs"]);
+        localStorage.setItem("cashu.historyTokens", backup["cashu.historyTokens"]);
+        localStorage.setItem("cashu.activeMintUrl", backup["cashu.activeMintUrl"]);
+        localStorage.setItem("cashu.activeProofs", backup["cashu.activeProofs"]);
+
+        notifySuccess("Backup Successfully Restored!");
+      }
+    },
     assertMintError: function (response, verbose = true) {
       if (response.error != null) {
         if (verbose) {
@@ -178,6 +198,6 @@ export const useMintsStore = defineStore('mints', {
         .map((t) => t)
         .flat()
         .reduce((sum, el) => (sum += el.amount), 0);
-    }
+    },
   },
-})
+});