Migrate data from umami old version to new version

apps/desktop-e2e/src/global.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      onBackupData: (fn: (event: any, data?: Record<string, string>) => void) => void;
+    };
+  }
+}

apps/desktop/package.json

@@ -93,9 +93,9 @@
     "@umami/state": "workspace:^",
     "@umami/test-utils": "workspace:^",
     "@umami/tezos": "workspace:^",
-    "@umami/utils": "workspace:^",
     "@umami/typescript-config": "workspace:^",
     "@umami/tzkt": "workspace:^",
+    "@umami/utils": "workspace:^",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-jest": "^29.7.0",
     "bignumber.js": "^9.1.2",
@@ -156,6 +156,10 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "electron-updater": "6.3.9"
+    "electron-log": "^5.2.4",
+    "electron-updater": "6.3.9",
+    "level": "^9.0.0",
+    "level-supports": "^6.0.0",
+    "level-transcoder": "^1.0.1"
   }
 }

apps/desktop/public/electron.js

@@ -4,9 +4,16 @@ const path = require("path");
 const url = require("url");
 const process = require("process");
 const { autoUpdater } = require("electron-updater");
+const { Level } = require("level");
+const log = require("electron-log");
+const fs = require("fs");
+
 const APP_PROTOCOL = "app";
 const APP_HOST = "assets";
 
+// backupData is used to store the backup data from the previous version of the app
+let backupData;
+
 const appURL = app.isPackaged
   ? url.format({
       pathname: `${APP_HOST}/index.html`,
@@ -26,6 +33,117 @@ protocol.registerSchemesAsPrivileged([
   },
 ]);
 
+// Configure electron-log
+log.transports.file.resolvePathFn = () => path.join(app.getPath("userData"), "umami-desktop.log");
+
+async function createBackupFromPrevDB() {
+  const dbPath = path.normalize(path.join(app.getPath("userData"), "Local Storage", "leveldb"));
+  const backupPath = path.normalize(
+    path.join(app.getPath("userData"), "Local Storage", "backup_leveldb.json")
+  );
+
+  if (!fs.existsSync(dbPath)) {
+    log.error("LevelDB database not found at path. Code:EM01", dbPath);
+    return;
+  }
+
+  if (fs.existsSync(backupPath)) {
+    log.info("Backup file already exists. Skipping migration.");
+    return;
+  }
+
+  const db = new Level(dbPath);
+
+  try {
+    log.info("Opening the db");
+    await db.open();
+    log.info("DB is opened");
+
+    const storage = {};
+
+    // Function to clean up the string (removing non-printable chars)
+    function cleanString(str) {
+      str = str.replace(/[\x00\x01\x17\x10\x0f]/g, "");
+
+      return str;
+    }
+
+    const KEYS_TO_MIGRATE = ["_file://\x00\x01persist:accounts", "_file://\x00\x01persist:root"];
+    const ROOT_KEYS_TO_MIGRATE = [
+      "batches",
+      "beacon",
+      "networks",
+      "contacts",
+      "protocolSettings",
+      "_persist",
+    ];
+
+    const extractKeys = json => {
+      const regexp = /"([^"]+)":("[^"\\]*(?:\\.[^"\\]*)*"|{[^}]+})/g;
+
+      const result = {};
+      const matches = json.matchAll(regexp);
+
+      for (const [_, key, value] of matches) {
+        if (ROOT_KEYS_TO_MIGRATE.includes(key)) {
+          try {
+            // Try to parse the value if it's a valid JSON
+            result[key] = JSON.parse(value);
+          } catch {
+            // If parsing fails, store as raw string
+            result[key] = value.replace(/^"|"$/g, "");
+          }
+        }
+      }
+
+      return result;
+    };
+
+    for await (const [_key, value] of db.iterator()) {
+      if (KEYS_TO_MIGRATE.includes(_key)) {
+        let cleanedValue = cleanString(value);
+
+        const key = _key.includes("_file://\x00\x01persist:root")
+          ? "persist:root"
+          : "persist:accounts";
+
+        try {
+          storage[key] = JSON.parse(cleanedValue);
+        } catch (_) {
+          // Store as raw value if JSON parsing fails
+          storage[key] = cleanedValue;
+        }
+      }
+    }
+
+    if (Object.keys(storage).length === 0) {
+      log.info("No data found to migrate. Code:EM02");
+      return;
+    }
+
+    const preparedStorage = {
+      ...storage,
+      "persist:root": extractKeys(storage["persist:root"]),
+    };
+
+    backupData = preparedStorage;
+
+    // Write storage object to JSON file
+    try {
+      fs.writeFileSync(backupPath, JSON.stringify(preparedStorage, null, 2), "utf-8");
+      log.info("Backup successfully created at:", backupPath);
+    } catch (err) {
+      log.error("Error during LevelDB backup creation. Code:EM2.", err);
+    }
+  } catch (err) {
+    log.error("Error during key migration. Code:EM4.", err);
+  } finally {
+    db.close().catch(err => {
+      log.error("Error closing the database. Code:EM5", err);
+    });
+  }
+}
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;
@@ -129,9 +247,12 @@ function createWindow() {
   });
 
   mainWindow.loadURL(appURL);
+
   mainWindow.once("ready-to-show", () => {
     mainWindow.show();
 
+    mainWindow.webContents.send("backupData", backupData);
+
     if (deeplinkURL) {
       mainWindow.webContents.send("deeplinkURL", deeplinkURL);
       deeplinkURL = null;
@@ -174,7 +295,7 @@ function start() {
   try {
     autoUpdater.checkForUpdatesAndNotify();
   } catch (e) {
-    console.log(e);
+    log.error(e);
   }
 
   if (!app.isDefaultProtocolClient("umami")) {
@@ -198,7 +319,7 @@ function start() {
       }
       mainWindow.focus();
       // Protocol handler for win32
-      // argv: An array of the second instance’s (command line / deep linked) arguments
+      // argv: An array of the second instance's (command line / deep linked) arguments
       if (process.platform === "win32" || process.platform === "linux") {
         // Protocol handler for windows & linux
         const index = argv.findIndex(arg => arg.startsWith("umami://"));
@@ -223,7 +344,16 @@ function start() {
   // This method will be called when Electron has finished its initialization and
   // is ready to create the browser windows.
   // Some APIs can only be used after this event occurs.
-  app.whenReady().then(createWindow);
+  app.whenReady().then(async () => {
+    // Execute createBackupFromPrevDB at the beginning
+    try {
+      await createBackupFromPrevDB();
+    } catch (error) {
+      log.error("Error has occured while migrating the app", error);
+    }
+
+    createWindow();
+  });
 
   app.on("activate", function () {
     // On macOS it's common to re-create a window in the app when the
@@ -236,7 +366,7 @@ function start() {
   // Send event to UI when app update is ready to be installed.
   // If the update installation won't be triggered by the user, it will be applied the next time the app starts.
   autoUpdater.on("update-downloaded", event => {
-    console.log(`Umami update ${event.version} downloaded and ready to be installed`, url);
+    log.info(`Umami update ${event.version} downloaded and ready to be installed`, url);
     return mainWindow.webContents.send("app-update-downloaded");
   });
 

apps/desktop/public/preload.js

@@ -15,6 +15,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
   // Notify UI if app update is available to be installed.
   onAppUpdateDownloaded: callback => ipcRenderer.on("app-update-downloaded", callback),
 
+  // handle the backupData send in electron.js
+  onBackupData: callback => ipcRenderer.on("backupData", callback),
+
   // Notify Electron that app update should be installed.
   installAppUpdateAndQuit: () => ipcRenderer.send("install-app-update"),
 

apps/desktop/src/Router.tsx

@@ -8,12 +8,14 @@ import {
   useResetBeaconConnections,
 } from "@umami/state";
 import { noop } from "lodash";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import { AnnouncementBanner } from "./components/AnnouncementBanner";
+import { Loader } from "./components/Loader/Loader";
 import { SocialLoginWarningModal } from "./components/SocialLoginWarningModal/SocialLoginWarningModal";
 import { BeaconProvider } from "./utils/beacon/BeaconProvider";
+import { persistor } from "./utils/persistor";
 import { useDeeplinkHandler } from "./utils/useDeeplinkHandler";
 import { AddressBookView } from "./views/addressBook/AddressBookView";
 import { BatchPage } from "./views/batch/BatchPage";
@@ -83,12 +85,46 @@ const LoggedOutRouter = () => {
     WalletClient.destroy().then(resetBeaconConnections).catch(noop);
   }, [resetBeaconConnections]);
 
+  const [isDataLoading, setIsDataLoading] = useState(
+    () => !localStorage.getItem("migration_2_3_3_to_2_3_4_completed")
+  );
+
+  useEffect(() => {
+    if (localStorage.getItem("migration_2_3_3_to_2_3_4_completed")) {
+      return;
+    }
+
+    persistor.pause();
+
+    if (window.electronAPI) {
+      window.electronAPI.onBackupData((_, data) => {
+        if (data) {
+          setTimeout(() => {
+            localStorage.clear();
+
+            localStorage.setItem("migration_2_3_3_to_2_3_4_completed", "true");
+            localStorage.setItem("persist:accounts", JSON.stringify(data["persist:accounts"]));
+            localStorage.setItem("persist:root", JSON.stringify(data["persist:root"]));
+
+            window.location.reload();
+          }, 3000);
+        } else {
+          setIsDataLoading(false);
+          localStorage.setItem("migration_2_3_3_to_2_3_4_completed", "true");
+        }
+      });
+    }
+  }, []);
+
   return (
-    <HashRouter>
-      <Routes>
-        <Route element={<Navigate to="/welcome" />} path="/*" />
-        <Route element={<WelcomeScreen />} path="/welcome" />
-      </Routes>
-    </HashRouter>
+    <>
+      {isDataLoading && <Loader />}
+      <HashRouter>
+        <Routes>
+          <Route element={<Navigate to="/welcome" />} path="/*" />
+          <Route element={<WelcomeScreen />} path="/welcome" />
+        </Routes>
+      </HashRouter>
+    </>
   );
 };

apps/desktop/src/components/Loader/Loader.tsx

@@ -0,0 +1,18 @@
+import { Flex, Spinner } from "@chakra-ui/react";
+
+export const Loader = () => (
+  <Flex
+    position="absolute"
+    zIndex="9999"
+    top="0"
+    left="0"
+    alignItems="center"
+    justifyContent="center"
+    width="full"
+    height="100vh"
+    backdropFilter="blur(10px)"
+    backgroundColor="rgba(0, 0, 0, 0.2)"
+  >
+    <Spinner />
+  </Flex>
+);

apps/desktop/src/global.d.ts

@@ -8,6 +8,7 @@ declare global {
       onDeeplink: (callback: (url: string) => void) => void;
       onAppUpdateDownloaded: (callback: () => void) => void;
       installAppUpdateAndQuit: () => void;
+      onBackupData: (fn: (event: any, data?: Record<string, string>) => void) => void;
     };
   }
 }

apps/desktop/src/index.tsx

@@ -10,6 +10,7 @@ import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 
 import { ErrorPage } from "./components/ErrorPage";
+import { Loader } from "./components/Loader/Loader";
 import { ReactQueryProvider } from "./providers/ReactQueryProvider";
 import { UmamiTheme } from "./providers/UmamiTheme";
 import { Router } from "./Router";
@@ -29,7 +30,7 @@ root.render(
   <StrictMode>
     <UmamiTheme>
       <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor}>
+        <PersistGate loading={<Loader />} persistor={persistor}>
           <ErrorBoundary fallback={<ErrorPage />} onError={logError}>
             <ReactQueryProvider>
               <Router />

apps/web/src/global.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      onBackupData: (fn: (event: any, data?: Record<string, string>) => void) => void;
+    };
+  }
+}

packages/components/src/global.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      onBackupData: (fn: (event: any, data?: Record<string, string>) => void) => void;
+    };
+  }
+}

packages/data-polling/src/global.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      onBackupData: (fn: (event: any, data?: Record<string, string>) => void) => void;
+    };
+  }
+}

packages/state/.eslintrc.cjs

@@ -5,4 +5,12 @@ module.exports = {
     parser: "@typescript-eslint/parser",
     tsconfigRootDir: __dirname,
   },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "import/no-unused-modules": "off",
+      },
+    },
+  ],
 };