From d2e39c1451baa33a2a9f64f52c227019788c84f4 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 8 Jan 2025 11:51:46 -0800
Subject: [PATCH 01/23] feat: add backup page

---
 packages/extension/src/ui/onboard/App.vue     |   4 +-
 .../src/ui/onboard/create-wallet/routes.ts    |   1 +
 .../restore-wallet/backup-detected.vue        | 125 ++++++++++++++++++
 .../src/ui/onboard/restore-wallet/routes.ts   |   6 +
 .../onboard/restore-wallet/type-password.vue  |   2 +-
 5 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue

diff --git a/packages/extension/src/ui/onboard/App.vue b/packages/extension/src/ui/onboard/App.vue
index c85392d11..ac95a7bdd 100644
--- a/packages/extension/src/ui/onboard/App.vue
+++ b/packages/extension/src/ui/onboard/App.vue
@@ -46,6 +46,7 @@ const isShowBackButton = () => {
     route.name != 'user-analytics' &&
     route.name != 'create-wallet-wallet-ready' &&
     route.name != 'restore-wallet-wallet-ready' &&
+    route.name != 'restore-wallet-backup-detected' &&
     !(route.name as string).includes('hardware-wallet')
   );
 };
@@ -54,7 +55,8 @@ const wrapClassObject = () => {
   return {
     'onboard__wrap--ready':
       route.name == 'create-wallet-wallet-ready' ||
-      route.name == 'restore-wallet-wallet-ready',
+      route.name == 'restore-wallet-wallet-ready' ||
+      route.name == 'restore-wallet-backup-detected',
     'onboard__wrap--auto-height': route.path.match(/hardware-wallet/),
   };
 };
diff --git a/packages/extension/src/ui/onboard/create-wallet/routes.ts b/packages/extension/src/ui/onboard/create-wallet/routes.ts
index 6595098b2..aa5f6b789 100644
--- a/packages/extension/src/ui/onboard/create-wallet/routes.ts
+++ b/packages/extension/src/ui/onboard/create-wallet/routes.ts
@@ -5,6 +5,7 @@ import CheckPhrase from './double-check-phrase.vue';
 import WalletReady from './wallet-ready.vue';
 import UserAnalytics from '../user-analytics.vue';
 import { RouteRecordRaw } from 'vue-router';
+
 export const routes = {
   pickPassword: {
     path: 'pick-password',
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
new file mode 100644
index 000000000..38f2c9206
--- /dev/null
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="backup-detected">
+    <h3>Found backup</h3>
+
+    <div class="backup-detected__backups">
+      <h4>Please choose a backup to use:</h4>
+      <div class="backup-detected__backup-items-container">
+        <a
+          v-for="backup in backups"
+          :key="backup"
+          @click="selectBackup(backup)"
+          :class="[
+            { selected: selectedBackup === backup },
+            'backup-detected__backup-item',
+          ]"
+        >
+          {{ backup }}
+        </a>
+      </div>
+    </div>
+    <base-button title="Use backup" :disabled="disabled" :click="useBackup" />
+    <base-button
+      style="margin-top: 10px"
+      no-background
+      title="Skip"
+      :click="skip"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import BaseButton from '@action/components/base-button/index.vue';
+import { computed, ref } from 'vue';
+
+const selectedBackup = ref('');
+const disabled = computed(() => !selectedBackup.value);
+const backups = ['Backup 1', 'Backup 2', 'Backup 3'];
+
+const selectBackup = (backup: string) => {
+  if (selectedBackup.value === backup) {
+    selectedBackup.value = '';
+  } else {
+    selectedBackup.value = backup;
+  }
+};
+const useBackup = () => {
+  // replace with actual functionality
+  window.close();
+};
+
+const skip = () => {
+  window.close();
+};
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+
+.selected {
+  background: @default;
+  border-radius: 10px;
+}
+.backup-detected {
+  width: 100%;
+
+  &__logo {
+    margin-bottom: 24px;
+  }
+
+  h3 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: 0.25px;
+    color: @primaryLabel;
+    margin: 0 0 24px 0;
+  }
+  h4 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 24px;
+    color: @secondaryLabel;
+    margin: 0 0 8px 0;
+  }
+
+  &__backup-items-container {
+    height: 150px;
+  }
+
+  &__backup-item {
+    height: 50px;
+    padding: 0 16px;
+    display: flex;
+    font-size: 16px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__backups {
+    margin-bottom: 24px;
+
+    h4 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: @secondaryLabel;
+      margin: 0 0 8px 0;
+    }
+
+    &-wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+
+      a {
+        display: block;
+        margin-right: 24px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/onboard/restore-wallet/routes.ts b/packages/extension/src/ui/onboard/restore-wallet/routes.ts
index a86a6a640..fdee17e79 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/routes.ts
+++ b/packages/extension/src/ui/onboard/restore-wallet/routes.ts
@@ -5,6 +5,7 @@ import PickPassword from './pick-password.vue';
 import TypePassword from './type-password.vue';
 import WalletReady from '../create-wallet/wallet-ready.vue';
 import UserAnalytics from '../user-analytics.vue';
+import BackupDetected from './backup-detected.vue';
 import { RouteRecordRaw } from 'vue-router';
 export const routes = {
   start: {
@@ -37,6 +38,11 @@ export const routes = {
     name: 'user-analytics',
     component: UserAnalytics,
   },
+  backupDetected: {
+    path: 'backup-detected',
+    name: 'backup-detected',
+    component: BackupDetected,
+  },
   walletReady: {
     path: 'wallet-ready',
     name: 'wallet-ready',
diff --git a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
index b785ccbfb..ed212c892 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
@@ -45,7 +45,7 @@ const nextAction = () => {
     onboardInitializeWallets(store.mnemonic, store.password).then(() => {
       isInitializing.value = false;
       router.push({
-        name: routes.walletReady.name,
+        name: routes.backupDetected.name,
       });
     });
   }

From e81cd7b2a5169f54601dae2df458d3b0997eaf4c Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Tue, 4 Feb 2025 16:27:35 -0800
Subject: [PATCH 02/23] devop: backups are functioning

---
 .../src/libs/backup-state/configs.ts          |   3 +
 .../extension/src/libs/backup-state/index.ts  | 276 ++++++++++++++++++
 .../extension/src/libs/backup-state/types.ts  |  24 ++
 .../src/libs/keyring/public-keyring.ts        |   8 +
 .../src/libs/utils/initialize-wallet.ts       |  31 +-
 .../src/providers/ethereum/networks/ftm.ts    |   2 +-
 packages/extension/src/types/provider.ts      |   3 +-
 packages/extension/src/ui/action/App.vue      |   5 +-
 .../accounts/components/add-account-form.vue  |   5 +
 .../views/swap/libs/send-transactions.ts      |  38 +--
 .../restore-wallet/backup-detected.vue        |  83 ++++--
 .../onboard/restore-wallet/type-password.vue  |  14 +-
 packages/signers/ethereum/src/index.ts        |   9 +-
 packages/signers/ethereum/src/utils.ts        |  47 ---
 packages/types/src/index.ts                   |   1 +
 packages/utils/package.json                   |   1 +
 packages/utils/src/index.ts                   |  12 +
 packages/utils/src/nacl-encrypt-decrypt.ts    | 119 ++++++++
 yarn.lock                                     |   1 +
 19 files changed, 584 insertions(+), 98 deletions(-)
 create mode 100644 packages/extension/src/libs/backup-state/configs.ts
 create mode 100644 packages/extension/src/libs/backup-state/index.ts
 create mode 100644 packages/extension/src/libs/backup-state/types.ts
 delete mode 100644 packages/signers/ethereum/src/utils.ts
 create mode 100644 packages/utils/src/nacl-encrypt-decrypt.ts

diff --git a/packages/extension/src/libs/backup-state/configs.ts b/packages/extension/src/libs/backup-state/configs.ts
new file mode 100644
index 000000000..0f7ac2d1d
--- /dev/null
+++ b/packages/extension/src/libs/backup-state/configs.ts
@@ -0,0 +1,3 @@
+const BACKUP_URL = 'https://rabbit.ethvm.dev/';
+
+export { BACKUP_URL };
diff --git a/packages/extension/src/libs/backup-state/index.ts b/packages/extension/src/libs/backup-state/index.ts
new file mode 100644
index 000000000..ec1cf8a2d
--- /dev/null
+++ b/packages/extension/src/libs/backup-state/index.ts
@@ -0,0 +1,276 @@
+import BrowserStorage from '../common/browser-storage';
+import { InternalStorageNamespace } from '@/types/provider';
+import {
+  BackupData,
+  BackupResponseType,
+  BackupType,
+  IState,
+  StorageKeys,
+} from './types';
+import PublicKeyRing from '../keyring/public-keyring';
+import sendUsingInternalMessengers from '../messenger/internal-messenger';
+import { InternalMethods } from '@/types/messenger';
+import EthNetwork from '@/providers/ethereum/networks/eth';
+import {
+  bufferToHex,
+  hexToBuffer,
+  NACL_VERSION,
+  naclEncrypt,
+} from '@enkryptcom/utils';
+import { hashPersonalMessage } from '@ethereumjs/util';
+import { v4 as uuidv4 } from 'uuid';
+import { BACKUP_URL } from './configs';
+import { EnkryptAccount, SignerType, WalletType } from '@enkryptcom/types';
+import KeyRingBase from '../keyring/keyring';
+
+class BackupState {
+  private storage: BrowserStorage;
+
+  constructor() {
+    this.storage = new BrowserStorage(InternalStorageNamespace.backupState);
+  }
+
+  async getMainWallet(): Promise<EnkryptAccount> {
+    const pkr = new PublicKeyRing();
+    const allAccounts = await pkr.getAccounts();
+    const mainWallet = allAccounts.find(
+      acc =>
+        acc.walletType === 'mnemonic' &&
+        acc.pathIndex === 0 &&
+        acc.signerType === 'secp256k1' &&
+        acc.basePath === EthNetwork.basePath,
+    );
+    if (!mainWallet) {
+      throw new Error('No main wallet found');
+    }
+    return mainWallet;
+  }
+
+  async getBackups(pubkey?: string): Promise<BackupType[]> {
+    if (!pubkey) {
+      const mainWallet = await this.getMainWallet();
+      pubkey = mainWallet.publicKey;
+    }
+    const rawResponse = await fetch(`${BACKUP_URL}backups/${pubkey}`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    });
+    const content: BackupResponseType = await rawResponse.json();
+    return content.backups;
+  }
+
+  async restoreBackup(
+    backup: BackupType,
+    keyringPassword: string,
+  ): Promise<void> {
+    const mainWallet = await this.getMainWallet();
+    await sendUsingInternalMessengers({
+      method: InternalMethods.unlock,
+      params: [keyringPassword, false],
+    });
+    await sendUsingInternalMessengers({
+      method: InternalMethods.ethereumDecrypt,
+      params: [backup.payload, mainWallet],
+    }).then(async res => {
+      if (res.error) {
+        console.error(res);
+        return null;
+      } else {
+        const kr = new KeyRingBase();
+        await kr.unlock(keyringPassword);
+        const existingAccounts = await kr.getKeysArray();
+        const decryptedBackup: BackupData = JSON.parse(
+          JSON.parse(res.result as string),
+        );
+        console.log(decryptedBackup);
+        const highestPathIndex: Record<string, number> = {};
+        decryptedBackup.accounts.forEach(acc => {
+          const id = `${acc.basePath}###${acc.signerType}`;
+          const idx = acc.pathIndex;
+          if (!highestPathIndex[id] || highestPathIndex[id] < idx) {
+            highestPathIndex[id] = idx;
+          }
+        });
+
+        console.log(highestPathIndex);
+        const getAccountByIndex = (
+          accounts: Omit<EnkryptAccount, 'address' | 'publicKey'>[],
+          basePath: string,
+          signerType: SignerType,
+          idx: number,
+        ): EnkryptAccount | null => {
+          for (const acc of accounts) {
+            if (
+              acc.basePath === basePath &&
+              acc.pathIndex === idx &&
+              acc.signerType === signerType
+            ) {
+              return acc as EnkryptAccount;
+            }
+          }
+          return null;
+        };
+
+        for (const key of Object.keys(highestPathIndex)) {
+          const [basePath, signerType] = key.split('###');
+          for (let i = 0; i <= highestPathIndex[key]; i++) {
+            const newAccount = getAccountByIndex(
+              decryptedBackup.accounts,
+              basePath,
+              signerType as SignerType,
+              i,
+            );
+            const existingAccount = getAccountByIndex(
+              existingAccounts,
+              basePath,
+              signerType as SignerType,
+              i,
+            );
+            if (existingAccount && newAccount) {
+              console.log('Account already exists, just renaming');
+              await kr.renameAccount(existingAccount.address, newAccount.name);
+              continue;
+            } else if (newAccount) {
+              console.log('creating new account', newAccount);
+              await kr.saveNewAccount({
+                basePath: newAccount.basePath,
+                name: newAccount.name,
+                signerType: newAccount.signerType,
+                walletType: newAccount.walletType,
+              });
+            } else if (!newAccount) {
+              console.log('edge case shouldnt happen', newAccount);
+              await kr.saveNewAccount({
+                basePath: basePath,
+                name: `New Account from backup ${i}`,
+                signerType: signerType as SignerType,
+                walletType: WalletType.mnemonic,
+              });
+            }
+          }
+        }
+        await this.setUserId(decryptedBackup.uuid);
+      }
+    });
+  }
+
+  async backup(firstTime: boolean): Promise<boolean> {
+    const state = await this.getState();
+    if (firstTime && state.lastBackupTime !== 0) {
+      return true;
+    }
+    const pkr = new PublicKeyRing();
+    const allAccounts = await pkr.getAccounts();
+    const mainWallet = await this.getMainWallet();
+    const backupData: BackupData = {
+      accounts: allAccounts
+        .filter(
+          acc => !acc.isTestWallet && acc.walletType !== WalletType.privkey,
+        )
+        .map(acc => {
+          return {
+            basePath: acc.basePath,
+            pathIndex: acc.pathIndex,
+            name: acc.name,
+            signerType: acc.signerType,
+            walletType: acc.walletType,
+            isHardware: acc.isHardware,
+            HWOptions: acc.HWOptions,
+          };
+        }),
+      uuid: state.userId,
+    };
+    const encryptPubKey = await sendUsingInternalMessengers({
+      method: InternalMethods.getEthereumEncryptionPublicKey,
+      params: [mainWallet],
+    }).then(res => {
+      if (res.error) {
+        console.error(res);
+        return null;
+      } else {
+        return JSON.parse(res.result as string);
+      }
+    });
+    if (!encryptPubKey) {
+      console.error('No encrypt public key found');
+      return false;
+    }
+    const encryptedStr = naclEncrypt({
+      publicKey: encryptPubKey,
+      data: JSON.stringify(backupData),
+      version: NACL_VERSION,
+    });
+    const msgHash = bufferToHex(hashPersonalMessage(hexToBuffer(encryptedStr)));
+    return sendUsingInternalMessengers({
+      method: InternalMethods.sign,
+      params: [msgHash, mainWallet],
+    }).then(async res => {
+      if (res.error) {
+        console.error(res);
+        return false;
+      } else {
+        const rawResponse = await fetch(
+          `${BACKUP_URL}backups/${mainWallet.publicKey}/${state.userId}`,
+          {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              payload: encryptedStr,
+              signature: JSON.parse(res.result as string),
+            }),
+          },
+        );
+        const content = await rawResponse.json();
+        if (content.message === 'Ok') {
+          await this.setState({
+            lastBackupTime: new Date().getTime(),
+            userId: state.userId,
+          });
+          return true;
+        }
+        console.error(content);
+        return false;
+      }
+    });
+  }
+
+  async setState(state: IState): Promise<void> {
+    return this.storage.set(StorageKeys.backupInfo, state);
+  }
+
+  async getState(): Promise<IState> {
+    const state = await this.storage.get(StorageKeys.backupInfo);
+    if (!state) {
+      const newState: IState = {
+        lastBackupTime: 0,
+        userId: uuidv4(),
+      };
+      await this.setState(newState);
+      return newState;
+    }
+    return state;
+  }
+
+  async getLastUpdatedTime(): Promise<Date> {
+    const state: IState = await this.getState();
+    return new Date(state.lastBackupTime);
+  }
+
+  async getUserId(): Promise<string> {
+    const state: IState = await this.getState();
+    return state.userId;
+  }
+
+  async setUserId(userId: string): Promise<void> {
+    const state: IState = await this.getState();
+    await this.setState({ ...state, userId });
+  }
+}
+
+export default BackupState;
diff --git a/packages/extension/src/libs/backup-state/types.ts b/packages/extension/src/libs/backup-state/types.ts
new file mode 100644
index 000000000..80acb885f
--- /dev/null
+++ b/packages/extension/src/libs/backup-state/types.ts
@@ -0,0 +1,24 @@
+import { EnkryptAccount } from '@enkryptcom/types';
+
+export enum StorageKeys {
+  backupInfo = 'backup-info',
+}
+
+export interface IState {
+  lastBackupTime: number;
+  userId: string;
+}
+
+export interface BackupType {
+  userId: string;
+  payload: string;
+  updatedAt: string;
+}
+export interface BackupResponseType {
+  backups: BackupType[];
+}
+
+export interface BackupData {
+  accounts: Omit<EnkryptAccount, 'address' | 'publicKey'>[];
+  uuid: string;
+}
diff --git a/packages/extension/src/libs/keyring/public-keyring.ts b/packages/extension/src/libs/keyring/public-keyring.ts
index bdfd73589..e5cbb58b6 100644
--- a/packages/extension/src/libs/keyring/public-keyring.ts
+++ b/packages/extension/src/libs/keyring/public-keyring.ts
@@ -23,6 +23,7 @@ class PublicKeyRing {
         signerType: SignerType.secp256k1,
         walletType: WalletType.mnemonic,
         isHardware: false,
+        isTestWallet: true,
       };
       allKeys['0xb1ea5a3e5ea7fa1834d48058ecda26d8c59e8251'] = {
         address: '0xb1ea5a3e5ea7fa1834d48058ecda26d8c59e8251', //optimism nfts
@@ -33,6 +34,7 @@ class PublicKeyRing {
         signerType: SignerType.secp256k1,
         walletType: WalletType.mnemonic,
         isHardware: false,
+        isTestWallet: true,
       };
       allKeys['0xe5dc07bdcdb8c98850050c7f67de7e164b1ea391'] = {
         address: '0xe5dc07bdcdb8c98850050c7f67de7e164b1ea391',
@@ -43,6 +45,7 @@ class PublicKeyRing {
         signerType: SignerType.secp256k1,
         walletType: WalletType.ledger,
         isHardware: true,
+        isTestWallet: true,
       };
       allKeys['5E56EZk6jmpq1q3Har3Ms99D9TLN9ra2inFh7Q1Hj6GpUx6D'] = {
         address: '5E56EZk6jmpq1q3Har3Ms99D9TLN9ra2inFh7Q1Hj6GpUx6D',
@@ -53,6 +56,7 @@ class PublicKeyRing {
         signerType: SignerType.sr25519,
         walletType: WalletType.ledger,
         isHardware: true,
+        isTestWallet: true,
       };
       allKeys['5E56EZk6jmpq1q3Har3Ms99D9TLN9ra2inFh7Q1Hj6GpUx6D'] = {
         address: '5CFnoCsP3pDK2thhSqYPwKELJFLQ1hBodqzSUypexyh7eHkB',
@@ -63,6 +67,7 @@ class PublicKeyRing {
         signerType: SignerType.sr25519,
         walletType: WalletType.mnemonic,
         isHardware: false,
+        isTestWallet: true,
       };
       allKeys[
         'bc1puzz9tmxawd7zdd7klfgtywrgpma3u22fz5ecxhucd4j8tygqe5ms2vdd9y'
@@ -76,6 +81,7 @@ class PublicKeyRing {
         signerType: SignerType.secp256k1btc,
         walletType: WalletType.mnemonic,
         isHardware: false,
+        isTestWallet: true,
       };
       allKeys['77hREDDaAiimedtD9bR1JDMgYLW3AA5yPvD91pvrueRp'] = {
         address: '77hREDDaAiimedtD9bR1JDMgYLW3AA5yPvD91pvrueRp',
@@ -86,6 +92,7 @@ class PublicKeyRing {
         signerType: SignerType.ed25519sol,
         walletType: WalletType.mnemonic,
         isHardware: false,
+        isTestWallet: true,
       };
       allKeys['tQvduDby4rvC6VU4rSirhVWuRYxbJz3rvUrVMkUWsZP'] = {
         address: 'tQvduDby4rvC6VU4rSirhVWuRYxbJz3rvUrVMkUWsZP',
@@ -96,6 +103,7 @@ class PublicKeyRing {
         signerType: SignerType.ed25519sol,
         walletType: WalletType.mnemonic,
         isHardware: false,
+        isTestWallet: true,
       };
     }
     return allKeys;
diff --git a/packages/extension/src/libs/utils/initialize-wallet.ts b/packages/extension/src/libs/utils/initialize-wallet.ts
index d5978605a..b205af19d 100644
--- a/packages/extension/src/libs/utils/initialize-wallet.ts
+++ b/packages/extension/src/libs/utils/initialize-wallet.ts
@@ -6,12 +6,23 @@ import KadenaNetworks from '@/providers/kadena/networks';
 import SolanaNetworks from '@/providers/solana/networks';
 import { NetworkNames, WalletType } from '@enkryptcom/types';
 import { getAccountsByNetworkName } from '@/libs/utils/accounts';
+import BackupState from '../backup-state';
 export const initAccounts = async (keyring: KeyRing) => {
-  const secp256k1btc = await getAccountsByNetworkName(NetworkNames.Bitcoin);
-  const secp256k1 = await getAccountsByNetworkName(NetworkNames.Ethereum);
-  const sr25519 = await getAccountsByNetworkName(NetworkNames.Polkadot);
-  const ed25519kda = await getAccountsByNetworkName(NetworkNames.Kadena);
-  const ed25519sol = await getAccountsByNetworkName(NetworkNames.Solana);
+  const secp256k1btc = (
+    await getAccountsByNetworkName(NetworkNames.Bitcoin)
+  ).filter(acc => !acc.isTestWallet);
+  const secp256k1 = (
+    await getAccountsByNetworkName(NetworkNames.Ethereum)
+  ).filter(acc => !acc.isTestWallet);
+  const sr25519 = (
+    await getAccountsByNetworkName(NetworkNames.Polkadot)
+  ).filter(acc => !acc.isTestWallet);
+  const ed25519kda = (
+    await getAccountsByNetworkName(NetworkNames.Kadena)
+  ).filter(acc => !acc.isTestWallet);
+  const ed25519sol = (
+    await getAccountsByNetworkName(NetworkNames.Solana)
+  ).filter(acc => !acc.isTestWallet);
   if (secp256k1.length == 0)
     await keyring.saveNewAccount({
       basePath: EthereumNetworks.ethereum.basePath,
@@ -51,7 +62,15 @@ export const initAccounts = async (keyring: KeyRing) => {
 export const onboardInitializeWallets = async (
   mnemonic: string,
   password: string,
-): Promise<void> => {
+): Promise<{ backupsFound: boolean }> => {
   const kr = new KeyRing();
+  const backupsState = new BackupState();
   await kr.init(mnemonic, password);
+  await kr.unlock(password);
+  const mainAccount = await kr.getNewAccount({
+    basePath: EthereumNetworks.ethereum.basePath,
+    signerType: EthereumNetworks.ethereum.signer[0],
+  });
+  const backups = await backupsState.getBackups(mainAccount.publicKey);
+  return { backupsFound: backups.length > 0 };
 };
diff --git a/packages/extension/src/providers/ethereum/networks/ftm.ts b/packages/extension/src/providers/ethereum/networks/ftm.ts
index 4c3f109f3..c21c31abb 100644
--- a/packages/extension/src/providers/ethereum/networks/ftm.ts
+++ b/packages/extension/src/providers/ethereum/networks/ftm.ts
@@ -15,7 +15,7 @@ const ftmOptions: EvmNetworkOptions = {
   isTestNetwork: false,
   currencyName: 'FTM',
   currencyNameLong: 'Fantom',
-  node: 'https://rpc.ankr.com/fantom/',
+  node: 'wss://fantom.callstaticrpc.com',
   icon,
   coingeckoID: 'fantom',
   coingeckoPlatform: CoingeckoPlatform.Fantom,
diff --git a/packages/extension/src/types/provider.ts b/packages/extension/src/types/provider.ts
index 601e67b47..862fb1c81 100644
--- a/packages/extension/src/types/provider.ts
+++ b/packages/extension/src/types/provider.ts
@@ -53,6 +53,7 @@ export enum InternalStorageNamespace {
   rateState = 'RateState',
   recentlySentAddresses = 'RecentlySentAddresses',
   updatesState = 'UpdatesState',
+  backupState = 'BackupState',
 }
 export enum EnkryptProviderEventMethods {
   persistentEvents = 'PersistentEvents',
@@ -130,7 +131,7 @@ export abstract class BackgroundProviderInterface extends EventEmitter {
 export abstract class ProviderAPIInterface {
   abstract node: string;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(node: string, options?: unknown) { }
+  constructor(node: string, options?: unknown) {}
   abstract init(): Promise<void>;
   abstract getBalance(address: string): Promise<string>;
   abstract getTransactionStatus(
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 0ade5518e..c8583612e 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -192,11 +192,13 @@ import UpdatedIcon from '@/ui/action/icons/updates/updated.vue';
 import HeartIcon from '@/ui/action/icons/updates/heart.vue';
 import { getLatestEnkryptUpdates } from '@action/utils/browser';
 import { Updates } from '@/ui/action/types/updates';
+import BackupState from '@/libs/backup-state';
 
 const domainState = new DomainState();
 const networksState = new NetworksState();
 const rateState = new RateState();
 const updatesState = new UpdatesState();
+const backupState = new BackupState();
 const appMenuRef = ref(null);
 const showDepositWindow = ref(false);
 const accountHeaderData = ref<AccountsHeaderData>({
@@ -369,7 +371,7 @@ const openBuyPage = () => {
       case NetworkNames.SyscoinNEVM:
       case NetworkNames.Rollux:
         return `${(currentNetwork.value as EvmNetwork).options.buyLink}&address=${currentNetwork.value.displayAddress(
-          accountHeaderData.value.selectedAccount!.address
+          accountHeaderData.value.selectedAccount!.address,
         )}`;
       case NetworkNames.SyscoinNEVMTest:
       case NetworkNames.RolluxTest:
@@ -421,6 +423,7 @@ onMounted(async () => {
         .then(() => (isLoading.value = false));
     } else {
       init();
+      backupState.backup(true).catch(console.error);
       setTimeout(() => {
         rateState.showPopup().then(show => {
           if (show) {
diff --git a/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue b/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue
index fac1b9ea9..c907ce028 100644
--- a/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue
+++ b/packages/extension/src/ui/action/views/accounts/components/add-account-form.vue
@@ -54,6 +54,7 @@ import { sendToBackgroundFromAction } from '@/libs/messenger/extension';
 import { InternalMethods } from '@/types/messenger';
 import { EnkryptAccount, KeyRecordAdd, WalletType } from '@enkryptcom/types';
 import Keyring from '@/libs/keyring/public-keyring';
+import BackupState from '@/libs/backup-state';
 
 const isFocus = ref(false);
 const accountName = ref('');
@@ -120,6 +121,10 @@ const addAccount = async () => {
       params: [keyReq],
     }),
   }).then(() => {
+    const backupState = new BackupState();
+    backupState.backup(false).catch(() => {
+      console.error('Failed to backup');
+    });
     emit('update:init');
     emit('window:close');
   });
diff --git a/packages/extension/src/ui/action/views/swap/libs/send-transactions.ts b/packages/extension/src/ui/action/views/swap/libs/send-transactions.ts
index 192357bb7..d5da3724a 100644
--- a/packages/extension/src/ui/action/views/swap/libs/send-transactions.ts
+++ b/packages/extension/src/ui/action/views/swap/libs/send-transactions.ts
@@ -75,7 +75,7 @@ const getBaseActivity = (options: ExecuteSwapOptions): Activity => {
  */
 export const executeSwap = async (
   options: ExecuteSwapOptions,
-): Promise<{ hash: string, sentAt: number }[]> => {
+): Promise<{ hash: string; sentAt: number }[]> => {
   const activityState = new ActivityState();
   const api = await options.network.api();
   if (options.networkType === NetworkType.Bitcoin) {
@@ -173,12 +173,12 @@ export const executeSwap = async (
           { address: txActivity.from, network: options.network.name },
         );
       });
-    return [{ hash, sentAt: Date.now(), }];
+    return [{ hash, sentAt: Date.now() }];
   } else if (options.networkType === NetworkType.Solana) {
     // Execute the swap on Solana
     const conn = (api as SolanaAPI).api.web3;
 
-    const solTxs: { hash: string, sentAt: number, }[] = [];
+    const solTxs: { hash: string; sentAt: number }[] = [];
 
     /** Enkrypt representation of the swap transactions */
     const enkSolTxs = options.swap.transactions as EnkryptSolanaTransaction[];
@@ -219,7 +219,7 @@ export const executeSwap = async (
               // Might need to update the block hash
               console.warn(
                 `Failed to get fee for legacy transaction while checking` +
-                ` whether to update block hash: ${String(err)}`,
+                  ` whether to update block hash: ${String(err)}`,
               );
               shouldUpdateBlockHash = true;
             }
@@ -228,7 +228,7 @@ export const executeSwap = async (
             if (shouldUpdateBlockHash) {
               console.warn(
                 `Unsigned legacy transaction might have an` +
-                ` out-of-date block hash, trying to update it...`,
+                  ` out-of-date block hash, trying to update it...`,
               );
               const backoff = [0, 500, 1_000, 2_000];
               let backoffi = 0;
@@ -238,7 +238,7 @@ export const executeSwap = async (
                   // Just continue and hope for the best with old block hash...
                   console.warn(
                     `Failed to get latest blockhash after ${backoffi} attempts,` +
-                    ` continuing with old block hash for legacy transaction...`,
+                      ` continuing with old block hash for legacy transaction...`,
                   );
                   break update_block_hash;
                 }
@@ -246,7 +246,7 @@ export const executeSwap = async (
                 if (backoffMs > 0) {
                   console.warn(
                     `Waiting ${backoffMs}ms before retrying latest block` +
-                    ` hash for legacy transaction...`,
+                      ` hash for legacy transaction...`,
                   );
                   await new Promise(res => setTimeout(res, backoffMs));
                 }
@@ -257,7 +257,7 @@ export const executeSwap = async (
                 } catch (err) {
                   console.warn(
                     `Failed to get latest blockhash on attempt` +
-                    ` ${backoffi + 1}: ${String(err)}`,
+                      ` ${backoffi + 1}: ${String(err)}`,
                   );
                 }
                 backoffi++;
@@ -330,7 +330,7 @@ export const executeSwap = async (
               // Might need to update the block hash
               console.warn(
                 `Failed to get fee for versioned transaction while checking` +
-                ` whether to update block hash: ${String(err)}`,
+                  ` whether to update block hash: ${String(err)}`,
               );
               shouldUpdateBlockHash = true;
             }
@@ -339,7 +339,7 @@ export const executeSwap = async (
             if (shouldUpdateBlockHash) {
               console.warn(
                 `Unsigned versioned transaction might have an` +
-                ` out-of-date block hash, trying to update it...`,
+                  ` out-of-date block hash, trying to update it...`,
               );
               const backoff = [0, 500, 1_000, 2_000];
               let backoffi = 0;
@@ -349,7 +349,7 @@ export const executeSwap = async (
                   // Just continue and hope for the best with old block hash...
                   console.warn(
                     `Failed to get latest blockhash after ${backoffi} attempts,` +
-                    ` continuing with old block hash for versioned transaction...`,
+                      ` continuing with old block hash for versioned transaction...`,
                   );
                   break update_block_hash;
                 }
@@ -357,7 +357,7 @@ export const executeSwap = async (
                 if (backoffMs > 0) {
                   console.warn(
                     `Waiting ${backoffMs}ms before retrying latest block` +
-                    ` hash for versioned transaction...`,
+                      ` hash for versioned transaction...`,
                   );
                   await new Promise(res => setTimeout(res, backoffMs));
                 }
@@ -368,7 +368,7 @@ export const executeSwap = async (
                 } catch (err) {
                   console.warn(
                     `Failed to get latest blockhash on attempt` +
-                    ` ${backoffi + 1}: ${String(err)}`,
+                      ` ${backoffi + 1}: ${String(err)}`,
                   );
                 }
                 backoffi++;
@@ -434,8 +434,8 @@ export const executeSwap = async (
             );
             throw new Error(
               'Failed to send Solana swap transaction: blockhash not found.' +
-              ' Too much time may have passed between the creation and sending' +
-              ' of the transaction',
+                ' Too much time may have passed between the creation and sending' +
+                ' of the transaction',
             );
           }
 
@@ -454,7 +454,7 @@ export const executeSwap = async (
         } else {
           console.error(
             `Failed to send Solana swap transaction,` +
-            ` unhandled error ${(err as Error).name}`,
+              ` unhandled error ${(err as Error).name}`,
           );
         }
         // Solana transactions can have big errors
@@ -475,7 +475,7 @@ export const executeSwap = async (
         network: options.network.name,
       });
 
-      solTxs.push({ hash: txHash, sentAt: Date.now(), });
+      solTxs.push({ hash: txHash, sentAt: Date.now() });
     }
 
     // Finished executing the swap on Solana
@@ -504,7 +504,7 @@ export const executeSwap = async (
     );
     const txs = await Promise.all(txsPromises);
     /** Hashes of transactions successfully sent & mined, in order of execution */
-    const txPromises: { hash: `0x${string}`, sentAt: number, }[] = [];
+    const txPromises: { hash: `0x${string}`; sentAt: number }[] = [];
 
     for (const txInfo of txs) {
       // Submit each transaction, in-order one-by-one
@@ -566,7 +566,7 @@ export const executeSwap = async (
             );
           }),
         );
-      txPromises.push({ hash, sentAt: Date.now(), });
+      txPromises.push({ hash, sentAt: Date.now() });
     }
     return txPromises;
   } else {
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index 38f2c9206..3869aa118 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -7,21 +7,26 @@
       <div class="backup-detected__backup-items-container">
         <a
           v-for="backup in backups"
-          :key="backup"
+          :key="backup.userId"
           @click="selectBackup(backup)"
           :class="[
             { selected: selectedBackup === backup },
             'backup-detected__backup-item',
           ]"
         >
-          {{ backup }}
+          {{ new Date(backup.updatedAt).toLocaleString() }}
         </a>
       </div>
     </div>
-    <base-button title="Use backup" :disabled="disabled" :click="useBackup" />
+    <base-button
+      :title="backupBtnText"
+      :disabled="backupBtnDisabled"
+      :click="useBackup"
+    />
     <base-button
       style="margin-top: 10px"
       no-background
+      :disabled="processing"
       title="Skip"
       :click="skip"
     />
@@ -29,26 +34,70 @@
 </template>
 <script setup lang="ts">
 import BaseButton from '@action/components/base-button/index.vue';
-import { computed, ref } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
+import { useRestoreStore } from './store';
+import KeyRing from '@/libs/keyring/keyring';
+import EthereumNetworks from '@/providers/ethereum/networks';
+import { WalletType } from '@enkryptcom/types';
+import BackupState from '@/libs/backup-state';
+import { BackupType } from '@/libs/backup-state/types';
+import { useRouter } from 'vue-router';
+import { routes } from '../restore-wallet/routes';
 
-const selectedBackup = ref('');
-const disabled = computed(() => !selectedBackup.value);
-const backups = ['Backup 1', 'Backup 2', 'Backup 3'];
+const selectedBackup = ref<BackupType>();
+const backups = ref<BackupType[]>([]);
+const store = useRestoreStore();
+const router = useRouter();
+const backupState = new BackupState();
+const kr = new KeyRing();
+const password = store.password;
+const backupBtnText = ref('Use backup');
 
-const selectBackup = (backup: string) => {
-  if (selectedBackup.value === backup) {
-    selectedBackup.value = '';
-  } else {
-    selectedBackup.value = backup;
-  }
+const processing = ref(false);
+
+const backupBtnDisabled = computed(() => {
+  return !selectedBackup.value || processing.value;
+});
+onBeforeMount(async () => {
+  await kr.unlock(password);
+  await backupState.getMainWallet().catch(async () => {
+    await kr.saveNewAccount({
+      basePath: EthereumNetworks.ethereum.basePath,
+      name: 'EVM Account 1',
+      signerType: EthereumNetworks.ethereum.signer[0],
+      walletType: WalletType.mnemonic,
+    });
+  });
+  const mainWallet = await backupState.getMainWallet();
+  backups.value = await backupState.getBackups(mainWallet.publicKey);
+});
+
+const selectBackup = (backup: BackupType) => {
+  selectedBackup.value = backup;
 };
-const useBackup = () => {
-  // replace with actual functionality
-  window.close();
+const useBackup = async () => {
+  if (selectedBackup.value) {
+    backupBtnText.value = 'Restoring backup...';
+    processing.value = true;
+    await backupState
+      .restoreBackup(selectedBackup.value, password)
+      .then(() => {
+        router.push({
+          name: routes.walletReady.name,
+        });
+      })
+      .catch(() => {
+        backupBtnText.value = 'Failed to restore backup';
+        processing.value = false;
+        selectedBackup.value = undefined;
+      });
+  }
 };
 
 const skip = () => {
-  window.close();
+  router.push({
+    name: routes.walletReady.name,
+  });
 };
 </script>
 
diff --git a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
index ed212c892..2fc15603e 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
@@ -42,11 +42,17 @@ const isInitializing = ref(false);
 const nextAction = () => {
   if (!isDisabled.value) {
     isInitializing.value = true;
-    onboardInitializeWallets(store.mnemonic, store.password).then(() => {
+    onboardInitializeWallets(store.mnemonic, store.password).then(res => {
       isInitializing.value = false;
-      router.push({
-        name: routes.backupDetected.name,
-      });
+      if (res.backupsFound) {
+        router.push({
+          name: routes.backupDetected.name,
+        });
+      } else {
+        router.push({
+          name: routes.walletReady.name,
+        });
+      }
     });
   }
 };
diff --git a/packages/signers/ethereum/src/index.ts b/packages/signers/ethereum/src/index.ts
index c44392d96..248010cc8 100644
--- a/packages/signers/ethereum/src/index.ts
+++ b/packages/signers/ethereum/src/index.ts
@@ -8,11 +8,16 @@ import {
 } from "@ethereumjs/util";
 import { mnemonicToSeed } from "bip39";
 import { Errors, SignerInterface, KeyPair } from "@enkryptcom/types";
-import { hexToBuffer, bufferToHex } from "@enkryptcom/utils";
+import {
+  hexToBuffer,
+  bufferToHex,
+  encryptedDataStringToJson,
+  naclDecodeHex,
+  naclDecrypt,
+} from "@enkryptcom/utils";
 import HDkey from "hdkey";
 import { box as naclBox } from "tweetnacl";
 import { encodeBase64 } from "tweetnacl-util";
-import { encryptedDataStringToJson, naclDecodeHex, naclDecrypt } from "./utils";
 
 export class EthereumSigner implements SignerInterface {
   async generate(mnemonic: string, derivationPath = ""): Promise<KeyPair> {
diff --git a/packages/signers/ethereum/src/utils.ts b/packages/signers/ethereum/src/utils.ts
deleted file mode 100644
index 5bbbfb0aa..000000000
--- a/packages/signers/ethereum/src/utils.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { EthEncryptedData } from "@enkryptcom/types";
-import { hexToBuffer } from "@enkryptcom/utils";
-import { decodeBase64, encodeUTF8 } from "tweetnacl-util";
-import { box as naclBox } from "tweetnacl";
-
-const naclDecodeHex = (msgHex: string): Uint8Array =>
-  decodeBase64(hexToBuffer(msgHex).toString("base64"));
-
-const encryptedDataStringToJson = (strData: string): EthEncryptedData => {
-  const buf = hexToBuffer(strData);
-  return JSON.parse(buf.toString("utf8"));
-};
-const naclDecrypt = ({
-  encryptedData,
-  privateKey,
-}: {
-  encryptedData: EthEncryptedData;
-  privateKey: string;
-}): string => {
-  switch (encryptedData.version) {
-    case "x25519-xsalsa20-poly1305": {
-      const recieverPrivateKeyUint8Array = naclDecodeHex(privateKey);
-      const recieverEncryptionPrivateKey = naclBox.keyPair.fromSecretKey(
-        recieverPrivateKeyUint8Array,
-      ).secretKey;
-      const nonce = decodeBase64(encryptedData.nonce);
-      const ciphertext = decodeBase64(encryptedData.ciphertext);
-      const ephemPublicKey = decodeBase64(encryptedData.ephemPublicKey);
-      const decryptedMessage = naclBox.open(
-        ciphertext,
-        nonce,
-        ephemPublicKey,
-        recieverEncryptionPrivateKey,
-      );
-      let output;
-      try {
-        output = encodeUTF8(decryptedMessage);
-        return output;
-      } catch (err) {
-        throw new Error("Decryption failed.");
-      }
-    }
-    default:
-      throw new Error("Encryption type/version not supported.");
-  }
-};
-export { naclDecodeHex, encryptedDataStringToJson, naclDecrypt };
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index e93fe1d48..de3dcb0fe 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -71,6 +71,7 @@ interface HWwalletOptions {
 
 interface EnkryptAccount extends KeyRecord {
   isHardware: boolean;
+  isTestWallet?: boolean;
   HWOptions?: HWwalletOptions;
 }
 
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 1d9aba1db..fb55254b3 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -43,6 +43,7 @@
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "tsup": "^8.3.5",
+    "tweetnacl-util": "^0.15.1",
     "typescript": "^5.6.3",
     "typescript-eslint": "8.14.0",
     "vitest": "^2.1.4"
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 0a68c2efd..8159f2964 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -11,6 +11,13 @@ import { encrypt, decrypt } from "./encrypt";
 import MemoryStorage from "./memory-storage";
 import { fromBase, toBase, isValidDecimals } from "./units";
 import { DebugLogger } from "./debug-logger";
+import {
+  naclDecodeHex,
+  encryptedDataStringToJson,
+  naclDecrypt,
+  naclEncrypt,
+  NACL_VERSION,
+} from "./nacl-encrypt-decrypt";
 
 const bufferToHex = (buf: Buffer | Uint8Array, nozerox = false): string =>
   nozerox
@@ -42,4 +49,9 @@ export {
   toBase,
   isValidDecimals,
   DebugLogger,
+  naclDecodeHex,
+  encryptedDataStringToJson,
+  naclDecrypt,
+  naclEncrypt,
+  NACL_VERSION,
 };
diff --git a/packages/utils/src/nacl-encrypt-decrypt.ts b/packages/utils/src/nacl-encrypt-decrypt.ts
new file mode 100644
index 000000000..d09a8fa51
--- /dev/null
+++ b/packages/utils/src/nacl-encrypt-decrypt.ts
@@ -0,0 +1,119 @@
+import { EthEncryptedData } from "@enkryptcom/types";
+import { box as naclBox, randomBytes } from "tweetnacl";
+import {
+  decodeBase64,
+  encodeUTF8,
+  decodeUTF8,
+  encodeBase64,
+} from "tweetnacl-util";
+import { hexToBuffer, utf8ToHex } from ".";
+
+const NACL_VERSION = "x25519-xsalsa20-poly1305";
+
+const naclDecodeHex = (msgHex: string): Uint8Array =>
+  decodeBase64(hexToBuffer(msgHex).toString("base64"));
+
+const encryptedDataStringToJson = (strData: string): EthEncryptedData => {
+  const buf = hexToBuffer(strData);
+  return JSON.parse(buf.toString("utf8"));
+};
+
+const JsonToEncryptedDataString = (strData: EthEncryptedData): string => {
+  const hex = utf8ToHex(JSON.stringify(strData));
+  return hex;
+};
+
+const naclDecrypt = ({
+  encryptedData,
+  privateKey,
+}: {
+  encryptedData: EthEncryptedData;
+  privateKey: string;
+}): string => {
+  switch (encryptedData.version) {
+    case NACL_VERSION: {
+      const recieverPrivateKeyUint8Array = naclDecodeHex(privateKey);
+      const recieverEncryptionPrivateKey = naclBox.keyPair.fromSecretKey(
+        recieverPrivateKeyUint8Array,
+      ).secretKey;
+      const nonce = decodeBase64(encryptedData.nonce);
+      const ciphertext = decodeBase64(encryptedData.ciphertext);
+      const ephemPublicKey = decodeBase64(encryptedData.ephemPublicKey);
+      const decryptedMessage = naclBox.open(
+        ciphertext,
+        nonce,
+        ephemPublicKey,
+        recieverEncryptionPrivateKey,
+      );
+      let output;
+      try {
+        output = encodeUTF8(decryptedMessage);
+        return output;
+      } catch (err) {
+        throw new Error("Decryption failed.");
+      }
+    }
+    default:
+      throw new Error("Encryption type/version not supported.");
+  }
+};
+
+const naclEncrypt = ({
+  publicKey,
+  data,
+  version,
+}: {
+  publicKey: string;
+  data: unknown;
+  version: string;
+}): string => {
+  if (!publicKey) {
+    throw new Error("Missing publicKey parameter");
+  } else if (!data) {
+    throw new Error("Missing data parameter");
+  } else if (!version) {
+    throw new Error("Missing version parameter");
+  }
+
+  switch (version) {
+    case NACL_VERSION: {
+      if (typeof data !== "string") {
+        throw new Error("Message data must be given as a string");
+      }
+      const ephemeralKeyPair = naclBox.keyPair();
+
+      let pubKeyUInt8Array;
+      try {
+        pubKeyUInt8Array = decodeBase64(publicKey);
+      } catch (err) {
+        throw new Error("Bad public key");
+      }
+      const msgParamsUInt8Array = decodeUTF8(data);
+      const nonce = randomBytes(24);
+      const encryptedMessage = naclBox(
+        msgParamsUInt8Array,
+        nonce,
+        pubKeyUInt8Array,
+        ephemeralKeyPair.secretKey,
+      );
+      const output = {
+        version: NACL_VERSION,
+        nonce: encodeBase64(nonce),
+        ephemPublicKey: encodeBase64(ephemeralKeyPair.publicKey),
+        ciphertext: encodeBase64(encryptedMessage),
+      };
+      return JsonToEncryptedDataString(output);
+    }
+
+    default:
+      throw new Error("Encryption type/version not supported.");
+  }
+};
+
+export {
+  naclDecodeHex,
+  encryptedDataStringToJson,
+  naclDecrypt,
+  naclEncrypt,
+  NACL_VERSION,
+};
diff --git a/yarn.lock b/yarn.lock
index e382f92c0..5e1daf567 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2086,6 +2086,7 @@ __metadata:
     ts-node: "npm:^10.9.2"
     tsconfig-paths: "npm:^4.2.0"
     tsup: "npm:^8.3.5"
+    tweetnacl-util: "npm:^0.15.1"
     typescript: "npm:^5.6.3"
     typescript-eslint: "npm:8.14.0"
     vitest: "npm:^2.1.4"

From 40d095cf9dfe039878c5bd99010d7f757f31c416 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 4 Feb 2025 17:02:46 -0800
Subject: [PATCH 03/23] fix: minor ui cleanup

---
 .../restore-wallet/backup-detected.vue        | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index 3869aa118..35e4061da 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -105,8 +105,9 @@ const skip = () => {
 @import '@action/styles/theme.less';
 
 .selected {
-  background: @default;
+  background: @primary;
   border-radius: 10px;
+  color: @white;
 }
 .backup-detected {
   width: 100%;
@@ -134,16 +135,29 @@ const skip = () => {
   }
 
   &__backup-items-container {
-    height: 150px;
+    padding: 16px;
+    min-height: 150px;
+    max-height: 300px;
+    overflow-y: auto;
+    background: @white;
+    border-radius: 8px;
   }
 
   &__backup-item {
-    height: 50px;
-    padding: 0 16px;
+    // height: 50px;
+    margin: 4px;
+    padding: 16px;
     display: flex;
     font-size: 16px;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
+    border: 1px solid @white;
+
+    &:hover {
+      border: 1px solid @primary;
+      border-radius: 10px;
+    }
   }
 
   &__backups {

From 274981ecdfa120942b79e4d39da7d765459bb4b4 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Wed, 5 Feb 2025 09:33:54 -0800
Subject: [PATCH 04/23] devop: cleanup

---
 .../src/libs/utils/initialize-wallet.ts       | 20 ++++++++-----
 packages/extension/src/ui/onboard/App.vue     | 13 ++++-----
 .../onboard/restore-wallet/type-password.vue  | 29 +++++++++++--------
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/packages/extension/src/libs/utils/initialize-wallet.ts b/packages/extension/src/libs/utils/initialize-wallet.ts
index b205af19d..feaf10adc 100644
--- a/packages/extension/src/libs/utils/initialize-wallet.ts
+++ b/packages/extension/src/libs/utils/initialize-wallet.ts
@@ -66,11 +66,17 @@ export const onboardInitializeWallets = async (
   const kr = new KeyRing();
   const backupsState = new BackupState();
   await kr.init(mnemonic, password);
-  await kr.unlock(password);
-  const mainAccount = await kr.getNewAccount({
-    basePath: EthereumNetworks.ethereum.basePath,
-    signerType: EthereumNetworks.ethereum.signer[0],
-  });
-  const backups = await backupsState.getBackups(mainAccount.publicKey);
-  return { backupsFound: backups.length > 0 };
+  try {
+    await kr.unlock(password);
+    const mainAccount = await kr.getNewAccount({
+      basePath: EthereumNetworks.ethereum.basePath,
+      signerType: EthereumNetworks.ethereum.signer[0],
+    });
+    const backups = await backupsState.getBackups(mainAccount.publicKey);
+    kr.lock();
+    return { backupsFound: backups.length > 0 };
+  } catch (e) {
+    console.error(e);
+    return { backupsFound: false };
+  }
 };
diff --git a/packages/extension/src/ui/onboard/App.vue b/packages/extension/src/ui/onboard/App.vue
index ac95a7bdd..855561743 100644
--- a/packages/extension/src/ui/onboard/App.vue
+++ b/packages/extension/src/ui/onboard/App.vue
@@ -2,11 +2,7 @@
   <div class="onboard__container">
     <logo class="onboard__logo" />
     <div class="onboard__wrap" :class="wrapClassObject()">
-      <a
-        v-if="isShowBackButton()"
-        class="onboard__back"
-        @click="$router.go(-1)"
-      >
+      <a v-if="isShowBackButton()" class="onboard__back" @click="router.go(-1)">
         <arrow-back />
       </a>
       <router-view />
@@ -14,8 +10,8 @@
 
     <div
       v-if="
-        $route.name == 'create-wallet-wallet-ready' ||
-        $route.name == 'restore-wallet-wallet-ready'
+        route.name == 'create-wallet-wallet-ready' ||
+        route.name == 'restore-wallet-wallet-ready'
       "
       class="onboard__info"
     >
@@ -35,9 +31,10 @@ import ArrowBack from '@action/icons/common/arrow-back.vue';
 import ExtensionIcon from '@action/icons/tip/extension-icon.vue';
 import OnlineIcon from '@action/icons/tip/online-icon.vue';
 import PinIcon from '@action/icons/tip/pin-icon.vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
+const router = useRouter();
 
 const isShowBackButton = () => {
   return (
diff --git a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
index 2fc15603e..7a4bcc143 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
@@ -42,18 +42,23 @@ const isInitializing = ref(false);
 const nextAction = () => {
   if (!isDisabled.value) {
     isInitializing.value = true;
-    onboardInitializeWallets(store.mnemonic, store.password).then(res => {
-      isInitializing.value = false;
-      if (res.backupsFound) {
-        router.push({
-          name: routes.backupDetected.name,
-        });
-      } else {
-        router.push({
-          name: routes.walletReady.name,
-        });
-      }
-    });
+    onboardInitializeWallets(store.mnemonic, store.password)
+      .then(res => {
+        isInitializing.value = false;
+        if (res.backupsFound) {
+          router.push({
+            name: routes.backupDetected.name,
+          });
+        } else {
+          router.push({
+            name: routes.walletReady.name,
+          });
+        }
+      })
+      .catch(error => {
+        isInitializing.value = false;
+        console.error('Wallet initialization failed:', error);
+      });
   }
 };
 const isDisabled = computed(() => {

From 00e4e72f54b637a38b0de7aee8d2ae34b7e3be26 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Wed, 5 Feb 2025 11:33:59 -0800
Subject: [PATCH 05/23] devop: backup settings

---
 .../extension/src/libs/backup-state/index.ts     |  5 +++++
 .../extension/src/libs/backup-state/types.ts     |  1 +
 .../components/settings-inner-header.vue         |  5 +++++
 .../src/ui/action/views/settings/index.vue       | 15 +++++++++++++++
 .../settings/views/settings-backups/index.vue    | 16 ++++++++++++++++
 .../settings/views/settings-general/index.vue    |  8 +++++++-
 .../src/ui/onboard/create-wallet/store.ts        |  2 +-
 .../ui/onboard/create-wallet/wallet-ready.vue    | 13 +++++++++++++
 8 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue

diff --git a/packages/extension/src/libs/backup-state/index.ts b/packages/extension/src/libs/backup-state/index.ts
index ec1cf8a2d..ea10e6671 100644
--- a/packages/extension/src/libs/backup-state/index.ts
+++ b/packages/extension/src/libs/backup-state/index.ts
@@ -162,6 +162,9 @@ class BackupState {
     if (firstTime && state.lastBackupTime !== 0) {
       return true;
     }
+    if (!state.enabled) {
+      return true;
+    }
     const pkr = new PublicKeyRing();
     const allAccounts = await pkr.getAccounts();
     const mainWallet = await this.getMainWallet();
@@ -231,6 +234,7 @@ class BackupState {
           await this.setState({
             lastBackupTime: new Date().getTime(),
             userId: state.userId,
+            enabled: state.enabled,
           });
           return true;
         }
@@ -250,6 +254,7 @@ class BackupState {
       const newState: IState = {
         lastBackupTime: 0,
         userId: uuidv4(),
+        enabled: true,
       };
       await this.setState(newState);
       return newState;
diff --git a/packages/extension/src/libs/backup-state/types.ts b/packages/extension/src/libs/backup-state/types.ts
index 80acb885f..3a7cb3604 100644
--- a/packages/extension/src/libs/backup-state/types.ts
+++ b/packages/extension/src/libs/backup-state/types.ts
@@ -7,6 +7,7 @@ export enum StorageKeys {
 export interface IState {
   lastBackupTime: number;
   userId: string;
+  enabled: boolean;
 }
 
 export interface BackupType {
diff --git a/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue b/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue
index e8dbf5afe..136f2f783 100644
--- a/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue
+++ b/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue
@@ -8,6 +8,7 @@
     <h2 v-show="isSupport">Support</h2>
     <h2 v-show="isPhrase">Recovery phrase</h2>
     <h2 v-show="isReset">Reset wallet?</h2>
+    <h2 v-show="isBackups">Backups</h2>
 
     <a class="settings__close" @click="$emit('window:close')">
       <close-icon />
@@ -43,6 +44,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  isBackups: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
diff --git a/packages/extension/src/ui/action/views/settings/index.vue b/packages/extension/src/ui/action/views/settings/index.vue
index 9848842a2..695d2f990 100644
--- a/packages/extension/src/ui/action/views/settings/index.vue
+++ b/packages/extension/src/ui/action/views/settings/index.vue
@@ -13,6 +13,7 @@
       />
       <settings-general
         v-if="isGeneral"
+        @open:backups="backupsAction"
         @window:close="close"
         @window:back="startAction"
       />
@@ -38,6 +39,12 @@
         @window:close="close"
         @window:back="startAction"
       />
+      <settings-backups
+        v-if="isBackups"
+        v-bind="$attrs"
+        @window:close="close"
+        @window:back="generalAction"
+      />
     </div>
   </div>
 </template>
@@ -50,6 +57,7 @@ import SettingsSupport from './views/settings-support/index.vue';
 import SettingsAbout from './views/settings-about/index.vue';
 import SettingsRecovery from './views/settings-recovery/index.vue';
 import ResetWallet from '@action/views/reset-wallet/index.vue';
+import SettingsBackups from './views/settings-backups/index.vue';
 
 const isStart = ref(true);
 const isGeneral = ref(false);
@@ -57,6 +65,7 @@ const isAbout = ref(false);
 const isSupport = ref(false);
 const isPhrase = ref(false);
 const isReset = ref(false);
+const isBackups = ref(false);
 const mnemonic = ref('');
 
 const emit = defineEmits<{
@@ -72,6 +81,7 @@ const setAllToFalse = () => {
   isSupport.value = false;
   isPhrase.value = false;
   isReset.value = false;
+  isBackups.value = false;
   mnemonic.value = '';
 };
 const recoveryPhraseAction = (phrase: string) => {
@@ -103,6 +113,11 @@ const startAction = () => {
   setAllToFalse();
   isStart.value = true;
 };
+
+const backupsAction = () => {
+  setAllToFalse();
+  isBackups.value = true;
+};
 </script>
 
 <style lang="less">
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
new file mode 100644
index 000000000..2079ef6bd
--- /dev/null
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <settings-inner-header v-bind="$attrs" :is-backups="true" />
+
+    <settings-button title="Enable backups" :is-link="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SettingsInnerHeader from '@action/views/settings/components/settings-inner-header.vue';
+import SettingsButton from '@action/views/settings/components/settings-button.vue';
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+</style>
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
index 330a4c334..5d6151bd3 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
@@ -49,7 +49,7 @@
         information is collected.
       </p>
     </div>
-
+    <settings-button title="Backups" @click="$emit('open:backups')" />
     <!-- <base-select
       :select="selecTimer"
       title="Auto-lock timer"
@@ -67,6 +67,7 @@
 import { onMounted, ref } from 'vue';
 import SettingsInnerHeader from '@action/views/settings/components/settings-inner-header.vue';
 // import BaseSelect from "@action/components/base-select/index.vue";
+import SettingsButton from '@action/views/settings/components/settings-button.vue';
 import SettingsSwitch from '@action/views/settings/components/settings-switch.vue';
 import SettingsState from '@/libs/settings-state';
 import { SettingsType } from '@/libs/settings-state/types';
@@ -77,6 +78,11 @@ const isEthereumDisabled = ref(false);
 const isPolkadotjsDisabled = ref(false);
 const isUnisatEnabled = ref(true);
 const isMetricsEnabled = ref(true);
+
+defineEmits<{
+  (e: 'open:backups'): void;
+}>();
+
 onMounted(async () => {
   const allSettings: SettingsType = await settingsState.getAllSettings();
   isEthereumDisabled.value = allSettings.evm.inject.disabled;
diff --git a/packages/extension/src/ui/onboard/create-wallet/store.ts b/packages/extension/src/ui/onboard/create-wallet/store.ts
index 7e938e4ac..d6933dca7 100644
--- a/packages/extension/src/ui/onboard/create-wallet/store.ts
+++ b/packages/extension/src/ui/onboard/create-wallet/store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-export const useOnboardStore = defineStore('restoreWallet', () => {
+export const useOnboardStore = defineStore('newWallet', () => {
   const mnemonic = ref('');
   const password = ref('');
 
diff --git a/packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue b/packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue
index 2bda4c394..c9b46b710 100644
--- a/packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue
+++ b/packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue
@@ -37,6 +37,19 @@ import GithubIcon from '@action/icons/social/github-icon.vue';
 import InstagramIcon from '@action/icons/social/instagram-icon.vue';
 import RedditIcon from '@action/icons/social/reddit-icon.vue';
 import TwitterIcon from '@action/icons/social/twitter-icon.vue';
+import { useRestoreStore } from '../restore-wallet/store';
+import { useOnboardStore } from './store';
+import { onMounted } from 'vue';
+
+const onboardStore = useOnboardStore();
+const restoreStore = useRestoreStore();
+
+onMounted(() => {
+  onboardStore.setPassword('');
+  onboardStore.setMnemonic('');
+  restoreStore.setMnemonic('');
+  restoreStore.setPassword('');
+});
 
 const finishAction = () => {
   window.close();

From e1c02d1a5f1963b290d6d4f1dee90c968ef4e856 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Wed, 5 Feb 2025 14:11:54 -0800
Subject: [PATCH 06/23] devop: backup functionality complete

---
 .../src/libs/backup-state/configs.ts          |   7 +-
 .../extension/src/libs/backup-state/index.ts  | 118 +++++++++++++++---
 .../src/libs/utils/initialize-wallet.ts       |  12 +-
 .../src/providers/ethereum/networks/ftm.ts    |   2 +-
 .../src/ui/action/components/switch/index.vue |  19 +--
 .../settings/views/settings-backups/index.vue |  99 ++++++++++++++-
 .../restore-wallet/backup-detected.vue        |  13 +-
 7 files changed, 237 insertions(+), 33 deletions(-)

diff --git a/packages/extension/src/libs/backup-state/configs.ts b/packages/extension/src/libs/backup-state/configs.ts
index 0f7ac2d1d..45e185eea 100644
--- a/packages/extension/src/libs/backup-state/configs.ts
+++ b/packages/extension/src/libs/backup-state/configs.ts
@@ -1,3 +1,6 @@
 const BACKUP_URL = 'https://rabbit.ethvm.dev/';
-
-export { BACKUP_URL };
+const HEADERS = {
+  Accept: 'application/json',
+  'Content-Type': 'application/json',
+};
+export { BACKUP_URL, HEADERS };
diff --git a/packages/extension/src/libs/backup-state/index.ts b/packages/extension/src/libs/backup-state/index.ts
index ea10e6671..20ac58964 100644
--- a/packages/extension/src/libs/backup-state/index.ts
+++ b/packages/extension/src/libs/backup-state/index.ts
@@ -16,10 +16,11 @@ import {
   hexToBuffer,
   NACL_VERSION,
   naclEncrypt,
+  utf8ToHex,
 } from '@enkryptcom/utils';
 import { hashPersonalMessage } from '@ethereumjs/util';
 import { v4 as uuidv4 } from 'uuid';
-import { BACKUP_URL } from './configs';
+import { BACKUP_URL, HEADERS } from './configs';
 import { EnkryptAccount, SignerType, WalletType } from '@enkryptcom/types';
 import KeyRingBase from '../keyring/keyring';
 
@@ -35,9 +36,9 @@ class BackupState {
     const allAccounts = await pkr.getAccounts();
     const mainWallet = allAccounts.find(
       acc =>
-        acc.walletType === 'mnemonic' &&
+        acc.walletType === WalletType.mnemonic &&
         acc.pathIndex === 0 &&
-        acc.signerType === 'secp256k1' &&
+        acc.signerType === EthNetwork.signer[0] &&
         acc.basePath === EthNetwork.basePath,
     );
     if (!mainWallet) {
@@ -46,22 +47,96 @@ class BackupState {
     return mainWallet;
   }
 
-  async getBackups(pubkey?: string): Promise<BackupType[]> {
-    if (!pubkey) {
+  getBackupSigHash(pubkey: string): string {
+    const now = new Date();
+    const messageToSign = `${pubkey}-GET-BACKUPS-${(now.getUTCMonth() + 1).toString().padStart(2, '0')}-${now.getUTCDate().toString().padStart(2, '0')}-${now.getUTCFullYear()}`;
+    return bufferToHex(
+      hashPersonalMessage(hexToBuffer(utf8ToHex(messageToSign))),
+    );
+  }
+  async getBackups(options?: {
+    signature: string;
+    pubkey: string;
+  }): Promise<BackupType[]> {
+    let signature: string = '';
+    let pubkey: string = '';
+    if (options) {
+      signature = options.signature;
+      pubkey = options.pubkey;
+    } else {
       const mainWallet = await this.getMainWallet();
       pubkey = mainWallet.publicKey;
+      const msgHash = this.getBackupSigHash(mainWallet.publicKey);
+      console.log('get backups signature', msgHash, mainWallet);
+      signature = await sendUsingInternalMessengers({
+        method: InternalMethods.sign,
+        params: [msgHash, mainWallet],
+      }).then(res => {
+        if (res.error) {
+          console.error(res);
+          return null;
+        } else {
+          return JSON.parse(res.result as string);
+        }
+      });
+    }
+    if (!signature) {
+      console.error('No signature found');
+      return [];
     }
-    const rawResponse = await fetch(`${BACKUP_URL}backups/${pubkey}`, {
-      method: 'GET',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
+    console.log('get backups signature', signature);
+
+    const rawResponse = await fetch(
+      `${BACKUP_URL}backups/${pubkey}?signature=${signature}`,
+      {
+        method: 'GET',
+        headers: HEADERS,
       },
-    });
+    );
     const content: BackupResponseType = await rawResponse.json();
     return content.backups;
   }
 
+  async deleteBackup(userId: string): Promise<boolean> {
+    const mainWallet = await this.getMainWallet();
+    const now = new Date();
+    const messageToSign = `${userId}-DELETE-BACKUP-${(now.getUTCMonth() + 1).toString().padStart(2, '0')}-${now.getUTCDate().toString().padStart(2, '0')}-${now.getUTCFullYear()}`;
+    const msgHash = bufferToHex(
+      hashPersonalMessage(hexToBuffer(utf8ToHex(messageToSign))),
+    );
+    const signature = await sendUsingInternalMessengers({
+      method: InternalMethods.sign,
+      params: [msgHash, mainWallet],
+    }).then(res => {
+      if (res.error) {
+        console.error(res);
+        return null;
+      } else {
+        return JSON.parse(res.result as string);
+      }
+    });
+    if (!signature) {
+      console.error('No signature found');
+      return false;
+    }
+    console.log('delete signature', signature);
+    return fetch(
+      `${BACKUP_URL}backups/${mainWallet.publicKey}/users/${userId}?signature=${signature}`,
+      {
+        method: 'DELETE',
+        headers: HEADERS,
+      },
+    )
+      .then(res => res.json())
+      .then(content => {
+        if (content.message === 'Ok') {
+          return true;
+        }
+        console.error(content);
+        return false;
+      });
+  }
+
   async restoreBackup(
     backup: BackupType,
     keyringPassword: string,
@@ -216,16 +291,12 @@ class BackupState {
         return false;
       } else {
         const rawResponse = await fetch(
-          `${BACKUP_URL}backups/${mainWallet.publicKey}/${state.userId}`,
+          `${BACKUP_URL}backups/${mainWallet.publicKey}/users/${state.userId}?signature=${JSON.parse(res.result as string)}`,
           {
             method: 'POST',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-            },
+            headers: HEADERS,
             body: JSON.stringify({
               payload: encryptedStr,
-              signature: JSON.parse(res.result as string),
             }),
           },
         );
@@ -276,6 +347,19 @@ class BackupState {
     const state: IState = await this.getState();
     await this.setState({ ...state, userId });
   }
+
+  async disableBackups(): Promise<void> {
+    const state: IState = await this.getState();
+    await this.setState({ ...state, enabled: false });
+  }
+  async enableBackups(): Promise<void> {
+    const state: IState = await this.getState();
+    await this.setState({ ...state, enabled: true });
+  }
+  async isBackupEnabled(): Promise<boolean> {
+    const state: IState = await this.getState();
+    return state.enabled;
+  }
 }
 
 export default BackupState;
diff --git a/packages/extension/src/libs/utils/initialize-wallet.ts b/packages/extension/src/libs/utils/initialize-wallet.ts
index feaf10adc..ba1457f43 100644
--- a/packages/extension/src/libs/utils/initialize-wallet.ts
+++ b/packages/extension/src/libs/utils/initialize-wallet.ts
@@ -72,7 +72,17 @@ export const onboardInitializeWallets = async (
       basePath: EthereumNetworks.ethereum.basePath,
       signerType: EthereumNetworks.ethereum.signer[0],
     });
-    const backups = await backupsState.getBackups(mainAccount.publicKey);
+    const sigHash = backupsState.getBackupSigHash(mainAccount.publicKey);
+    const signature = await kr.sign(sigHash as `0x${string}`, {
+      basePath: EthereumNetworks.ethereum.basePath,
+      signerType: EthereumNetworks.ethereum.signer[0],
+      pathIndex: 0,
+      walletType: WalletType.mnemonic,
+    });
+    const backups = await backupsState.getBackups({
+      pubkey: mainAccount.publicKey,
+      signature,
+    });
     kr.lock();
     return { backupsFound: backups.length > 0 };
   } catch (e) {
diff --git a/packages/extension/src/providers/ethereum/networks/ftm.ts b/packages/extension/src/providers/ethereum/networks/ftm.ts
index c21c31abb..f7dacae5d 100644
--- a/packages/extension/src/providers/ethereum/networks/ftm.ts
+++ b/packages/extension/src/providers/ethereum/networks/ftm.ts
@@ -15,7 +15,7 @@ const ftmOptions: EvmNetworkOptions = {
   isTestNetwork: false,
   currencyName: 'FTM',
   currencyNameLong: 'Fantom',
-  node: 'wss://fantom.callstaticrpc.com',
+  node: 'wss://fantom-rpc.publicnode.com',
   icon,
   coingeckoID: 'fantom',
   coingeckoPlatform: CoingeckoPlatform.Fantom,
diff --git a/packages/extension/src/ui/action/components/switch/index.vue b/packages/extension/src/ui/action/components/switch/index.vue
index 4eec1d802..0db605bb0 100644
--- a/packages/extension/src/ui/action/components/switch/index.vue
+++ b/packages/extension/src/ui/action/components/switch/index.vue
@@ -1,25 +1,26 @@
 <template>
   <label class="switch">
-    <input
-      type="checkbox"
-      :checked="isChecked"
-      @click.prevent="checkLocal($event)"
-    />
+    <input type="checkbox" v-model="checkboxVal" />
     <span class="slider round" />
   </label>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 const emit = defineEmits<{
   (e: 'update:check', isChecked: boolean): void;
 }>();
-defineProps({
+const props = defineProps({
   isChecked: Boolean,
 });
 
-const checkLocal = (e: any) => {
-  emit('update:check', e.target.checked);
-};
+const checkboxVal = computed({
+  get: () => props.isChecked,
+  set: v => {
+    emit('update:check', v);
+  },
+});
 </script>
 
 <style lang="less">
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 2079ef6bd..c179ea14d 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -1,16 +1,111 @@
 <template>
   <div>
     <settings-inner-header v-bind="$attrs" :is-backups="true" />
-
-    <settings-button title="Enable backups" :is-link="true" />
+    <settings-switch
+      title="Enable backups"
+      :is-checked="isBackupsEnabled"
+      @update:check="toggleBackups"
+    />
+    <div class="settings__label">
+      <p>
+        Backups are currently {{ isBackupsEnabled ? 'enabled' : 'disabled' }}.
+      </p>
+    </div>
+    <p>Current Backups</p>
+    <table>
+      <thead>
+        <tr>
+          <th
+            v-for="(header, i) in headers"
+            :key="`${header}${i}`"
+            class="header-item"
+          >
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="entity in backups"
+          :key="`entity-${entity.userId}`"
+          class="table-rows"
+        >
+          <td>{{ entity.userId }}</td>
+          <td>{{ entity.updatedAt }}</td>
+          <td>
+            {{ currentUserId === entity.userId ? 'true' : 'false' }}
+          </td>
+          <td>
+            <settings-button
+              style="max-width: 100px"
+              title="delete"
+              @click="deleteBackup(entity.userId)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
 <script setup lang="ts">
+import BackupState from '@/libs/backup-state';
+import { BackupType } from '@/libs/backup-state/types';
 import SettingsInnerHeader from '@action/views/settings/components/settings-inner-header.vue';
+import SettingsSwitch from '@action/views/settings/components/settings-switch.vue';
 import SettingsButton from '@action/views/settings/components/settings-button.vue';
+import { onMounted, ref } from 'vue';
+
+const backupState = new BackupState();
+const isBackupsEnabled = ref(true);
+const currentUserId = ref('');
+const backups = ref<BackupType[]>([]);
+const headers = ['userid', 'last updated', 'this', 'delete'];
+
+onMounted(async () => {
+  isBackupsEnabled.value = await backupState.isBackupEnabled();
+  currentUserId.value = await backupState.getUserId();
+  backups.value = await backupState.getBackups();
+});
+
+const toggleBackups = async (checked: boolean) => {
+  isBackupsEnabled.value = checked;
+  if (isBackupsEnabled.value) {
+    await backupState.enableBackups();
+    await backupState.backup(false);
+    backups.value = await backupState.getBackups();
+  } else {
+    await backupState.disableBackups();
+  }
+};
+
+const deleteBackup = async (userId: string) => {
+  await backupState.deleteBackup(userId);
+  backups.value = await backupState.getBackups();
+};
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
+.settings {
+  &__label {
+    padding: 0 48px;
+    margin-bottom: 10px;
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @tertiaryLabel;
+      margin: 0;
+    }
+  }
+
+  &__wrap {
+    .base-select__container {
+      margin-bottom: 12px;
+    }
+  }
+}
 </style>
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index 35e4061da..fdcecf9c7 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -69,7 +69,18 @@ onBeforeMount(async () => {
     });
   });
   const mainWallet = await backupState.getMainWallet();
-  backups.value = await backupState.getBackups(mainWallet.publicKey);
+  const sigHash = backupState.getBackupSigHash(mainWallet.publicKey);
+  const signature = await kr.sign(sigHash as `0x${string}`, {
+    basePath: EthereumNetworks.ethereum.basePath,
+    signerType: EthereumNetworks.ethereum.signer[0],
+    pathIndex: 0,
+    walletType: WalletType.mnemonic,
+  });
+  backups.value = await backupState.getBackups({
+    pubkey: mainWallet.publicKey,
+    signature,
+  });
+  kr.lock();
 });
 
 const selectBackup = (backup: BackupType) => {

From 3dbaa9c513a54072e59d486baa50d59f1961101b Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Mon, 10 Feb 2025 14:01:23 -0800
Subject: [PATCH 07/23] devop: switch to new api

---
 .../extension/src/libs/backup-state/index.ts  | 139 ++++++++++--------
 .../extension/src/libs/backup-state/types.ts  |  10 +-
 .../src/libs/utils/initialize-wallet.ts       |   4 +-
 .../settings/views/settings-backups/index.vue |  10 +-
 .../restore-wallet/backup-detected.vue        |  18 +--
 .../onboard/restore-wallet/type-password.vue  |   6 +-
 6 files changed, 101 insertions(+), 86 deletions(-)

diff --git a/packages/extension/src/libs/backup-state/index.ts b/packages/extension/src/libs/backup-state/index.ts
index 20ac58964..d0a09e299 100644
--- a/packages/extension/src/libs/backup-state/index.ts
+++ b/packages/extension/src/libs/backup-state/index.ts
@@ -5,6 +5,7 @@ import {
   BackupResponseType,
   BackupType,
   IState,
+  ListBackupType,
   StorageKeys,
 } from './types';
 import PublicKeyRing from '../keyring/public-keyring';
@@ -31,6 +32,23 @@ class BackupState {
     this.storage = new BrowserStorage(InternalStorageNamespace.backupState);
   }
 
+  async #getSignature(
+    msgHash: string,
+    mainWallet: EnkryptAccount,
+  ): Promise<string> {
+    return sendUsingInternalMessengers({
+      method: InternalMethods.sign,
+      params: [msgHash, mainWallet],
+    }).then(res => {
+      if (res.error) {
+        console.error(res);
+        return null;
+      } else {
+        return JSON.parse(res.result as string);
+      }
+    });
+  }
+
   async getMainWallet(): Promise<EnkryptAccount> {
     const pkr = new PublicKeyRing();
     const allAccounts = await pkr.getAccounts();
@@ -47,17 +65,18 @@ class BackupState {
     return mainWallet;
   }
 
-  getBackupSigHash(pubkey: string): string {
+  getListBackupMsgHash(pubkey: string): string {
     const now = new Date();
     const messageToSign = `${pubkey}-GET-BACKUPS-${(now.getUTCMonth() + 1).toString().padStart(2, '0')}-${now.getUTCDate().toString().padStart(2, '0')}-${now.getUTCFullYear()}`;
     return bufferToHex(
       hashPersonalMessage(hexToBuffer(utf8ToHex(messageToSign))),
     );
   }
-  async getBackups(options?: {
+
+  async listBackups(options?: {
     signature: string;
     pubkey: string;
-  }): Promise<BackupType[]> {
+  }): Promise<ListBackupType[]> {
     let signature: string = '';
     let pubkey: string = '';
     if (options) {
@@ -66,26 +85,13 @@ class BackupState {
     } else {
       const mainWallet = await this.getMainWallet();
       pubkey = mainWallet.publicKey;
-      const msgHash = this.getBackupSigHash(mainWallet.publicKey);
-      console.log('get backups signature', msgHash, mainWallet);
-      signature = await sendUsingInternalMessengers({
-        method: InternalMethods.sign,
-        params: [msgHash, mainWallet],
-      }).then(res => {
-        if (res.error) {
-          console.error(res);
-          return null;
-        } else {
-          return JSON.parse(res.result as string);
-        }
-      });
+      const msgHash = this.getListBackupMsgHash(mainWallet.publicKey);
+      signature = await this.#getSignature(msgHash, mainWallet);
     }
     if (!signature) {
       console.error('No signature found');
       return [];
     }
-    console.log('get backups signature', signature);
-
     const rawResponse = await fetch(
       `${BACKUP_URL}backups/${pubkey}?signature=${signature}`,
       {
@@ -93,10 +99,31 @@ class BackupState {
         headers: HEADERS,
       },
     );
-    const content: BackupResponseType = await rawResponse.json();
+    const content = (await rawResponse.json()) as {
+      backups: ListBackupType[];
+    };
     return content.backups;
   }
 
+  async getBackup(userId: string): Promise<BackupType | null> {
+    const mainWallet = await this.getMainWallet();
+    const now = new Date();
+    const messageToSign = `${userId}-GET-BACKUP-${(now.getUTCMonth() + 1).toString().padStart(2, '0')}-${now.getUTCDate().toString().padStart(2, '0')}-${now.getUTCFullYear()}`;
+    const msgHash = bufferToHex(
+      hashPersonalMessage(hexToBuffer(utf8ToHex(messageToSign))),
+    );
+    const signature = await this.#getSignature(msgHash, mainWallet);
+    const rawResponse = await fetch(
+      `${BACKUP_URL}backups/${mainWallet.publicKey}/users/${userId}?signature=${signature}`,
+      {
+        method: 'GET',
+        headers: HEADERS,
+      },
+    );
+    const content = (await rawResponse.json()) as BackupResponseType;
+    return content.backup;
+  }
+
   async deleteBackup(userId: string): Promise<boolean> {
     const mainWallet = await this.getMainWallet();
     const now = new Date();
@@ -104,17 +131,7 @@ class BackupState {
     const msgHash = bufferToHex(
       hashPersonalMessage(hexToBuffer(utf8ToHex(messageToSign))),
     );
-    const signature = await sendUsingInternalMessengers({
-      method: InternalMethods.sign,
-      params: [msgHash, mainWallet],
-    }).then(res => {
-      if (res.error) {
-        console.error(res);
-        return null;
-      } else {
-        return JSON.parse(res.result as string);
-      }
-    });
+    const signature = await this.#getSignature(msgHash, mainWallet);
     if (!signature) {
       console.error('No signature found');
       return false;
@@ -129,7 +146,7 @@ class BackupState {
     )
       .then(res => res.json())
       .then(content => {
-        if (content.message === 'Ok') {
+        if ((content as { message: string }).message === 'Ok') {
           return true;
         }
         console.error(content);
@@ -137,15 +154,17 @@ class BackupState {
       });
   }
 
-  async restoreBackup(
-    backup: BackupType,
-    keyringPassword: string,
-  ): Promise<void> {
+  async restoreBackup(userId: string, keyringPassword: string): Promise<void> {
     const mainWallet = await this.getMainWallet();
     await sendUsingInternalMessengers({
       method: InternalMethods.unlock,
       params: [keyringPassword, false],
     });
+    const backup = await this.getBackup(userId);
+    if (!backup) {
+      console.error('No backup found');
+      return;
+    }
     await sendUsingInternalMessengers({
       method: InternalMethods.ethereumDecrypt,
       params: [backup.payload, mainWallet],
@@ -282,36 +301,28 @@ class BackupState {
       version: NACL_VERSION,
     });
     const msgHash = bufferToHex(hashPersonalMessage(hexToBuffer(encryptedStr)));
-    return sendUsingInternalMessengers({
-      method: InternalMethods.sign,
-      params: [msgHash, mainWallet],
-    }).then(async res => {
-      if (res.error) {
-        console.error(res);
-        return false;
-      } else {
-        const rawResponse = await fetch(
-          `${BACKUP_URL}backups/${mainWallet.publicKey}/users/${state.userId}?signature=${JSON.parse(res.result as string)}`,
-          {
-            method: 'POST',
-            headers: HEADERS,
-            body: JSON.stringify({
-              payload: encryptedStr,
-            }),
-          },
-        );
-        const content = await rawResponse.json();
-        if (content.message === 'Ok') {
-          await this.setState({
-            lastBackupTime: new Date().getTime(),
-            userId: state.userId,
-            enabled: state.enabled,
-          });
-          return true;
-        }
-        console.error(content);
-        return false;
+    return this.#getSignature(msgHash, mainWallet).then(async signature => {
+      const rawResponse = await fetch(
+        `${BACKUP_URL}backups/${mainWallet.publicKey}/users/${state.userId}?signature=${signature}`,
+        {
+          method: 'POST',
+          headers: HEADERS,
+          body: JSON.stringify({
+            payload: encryptedStr,
+          }),
+        },
+      );
+      const content = (await rawResponse.json()) as { message: string };
+      if (content.message === 'Ok') {
+        await this.setState({
+          lastBackupTime: new Date().getTime(),
+          userId: state.userId,
+          enabled: state.enabled,
+        });
+        return true;
       }
+      console.error(content);
+      return false;
     });
   }
 
diff --git a/packages/extension/src/libs/backup-state/types.ts b/packages/extension/src/libs/backup-state/types.ts
index 3a7cb3604..ef86ce012 100644
--- a/packages/extension/src/libs/backup-state/types.ts
+++ b/packages/extension/src/libs/backup-state/types.ts
@@ -10,13 +10,17 @@ export interface IState {
   enabled: boolean;
 }
 
-export interface BackupType {
+export interface ListBackupType {
   userId: string;
-  payload: string;
   updatedAt: string;
 }
+
+export interface BackupType extends ListBackupType {
+  payload: string;
+}
+
 export interface BackupResponseType {
-  backups: BackupType[];
+  backup: BackupType;
 }
 
 export interface BackupData {
diff --git a/packages/extension/src/libs/utils/initialize-wallet.ts b/packages/extension/src/libs/utils/initialize-wallet.ts
index ba1457f43..ff66e07c2 100644
--- a/packages/extension/src/libs/utils/initialize-wallet.ts
+++ b/packages/extension/src/libs/utils/initialize-wallet.ts
@@ -72,14 +72,14 @@ export const onboardInitializeWallets = async (
       basePath: EthereumNetworks.ethereum.basePath,
       signerType: EthereumNetworks.ethereum.signer[0],
     });
-    const sigHash = backupsState.getBackupSigHash(mainAccount.publicKey);
+    const sigHash = backupsState.getListBackupMsgHash(mainAccount.publicKey);
     const signature = await kr.sign(sigHash as `0x${string}`, {
       basePath: EthereumNetworks.ethereum.basePath,
       signerType: EthereumNetworks.ethereum.signer[0],
       pathIndex: 0,
       walletType: WalletType.mnemonic,
     });
-    const backups = await backupsState.getBackups({
+    const backups = await backupsState.listBackups({
       pubkey: mainAccount.publicKey,
       signature,
     });
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index c179ea14d..0521dfe90 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -50,7 +50,7 @@
 
 <script setup lang="ts">
 import BackupState from '@/libs/backup-state';
-import { BackupType } from '@/libs/backup-state/types';
+import { ListBackupType } from '@/libs/backup-state/types';
 import SettingsInnerHeader from '@action/views/settings/components/settings-inner-header.vue';
 import SettingsSwitch from '@action/views/settings/components/settings-switch.vue';
 import SettingsButton from '@action/views/settings/components/settings-button.vue';
@@ -59,13 +59,13 @@ import { onMounted, ref } from 'vue';
 const backupState = new BackupState();
 const isBackupsEnabled = ref(true);
 const currentUserId = ref('');
-const backups = ref<BackupType[]>([]);
+const backups = ref<ListBackupType[]>([]);
 const headers = ['userid', 'last updated', 'this', 'delete'];
 
 onMounted(async () => {
   isBackupsEnabled.value = await backupState.isBackupEnabled();
   currentUserId.value = await backupState.getUserId();
-  backups.value = await backupState.getBackups();
+  backups.value = await backupState.listBackups();
 });
 
 const toggleBackups = async (checked: boolean) => {
@@ -73,7 +73,7 @@ const toggleBackups = async (checked: boolean) => {
   if (isBackupsEnabled.value) {
     await backupState.enableBackups();
     await backupState.backup(false);
-    backups.value = await backupState.getBackups();
+    backups.value = await backupState.listBackups();
   } else {
     await backupState.disableBackups();
   }
@@ -81,7 +81,7 @@ const toggleBackups = async (checked: boolean) => {
 
 const deleteBackup = async (userId: string) => {
   await backupState.deleteBackup(userId);
-  backups.value = await backupState.getBackups();
+  backups.value = await backupState.listBackups();
 };
 </script>
 
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index fdcecf9c7..0153aeb07 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -34,18 +34,18 @@
 </template>
 <script setup lang="ts">
 import BaseButton from '@action/components/base-button/index.vue';
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, unref } from 'vue';
 import { useRestoreStore } from './store';
 import KeyRing from '@/libs/keyring/keyring';
 import EthereumNetworks from '@/providers/ethereum/networks';
 import { WalletType } from '@enkryptcom/types';
 import BackupState from '@/libs/backup-state';
-import { BackupType } from '@/libs/backup-state/types';
+import { ListBackupType } from '@/libs/backup-state/types';
 import { useRouter } from 'vue-router';
 import { routes } from '../restore-wallet/routes';
 
-const selectedBackup = ref<BackupType>();
-const backups = ref<BackupType[]>([]);
+const selectedBackup = ref<ListBackupType>();
+const backups = ref<ListBackupType[]>([]);
 const store = useRestoreStore();
 const router = useRouter();
 const backupState = new BackupState();
@@ -59,7 +59,7 @@ const backupBtnDisabled = computed(() => {
   return !selectedBackup.value || processing.value;
 });
 onBeforeMount(async () => {
-  await kr.unlock(password);
+  await kr.unlock(unref(password));
   await backupState.getMainWallet().catch(async () => {
     await kr.saveNewAccount({
       basePath: EthereumNetworks.ethereum.basePath,
@@ -69,21 +69,21 @@ onBeforeMount(async () => {
     });
   });
   const mainWallet = await backupState.getMainWallet();
-  const sigHash = backupState.getBackupSigHash(mainWallet.publicKey);
+  const sigHash = backupState.getListBackupMsgHash(mainWallet.publicKey);
   const signature = await kr.sign(sigHash as `0x${string}`, {
     basePath: EthereumNetworks.ethereum.basePath,
     signerType: EthereumNetworks.ethereum.signer[0],
     pathIndex: 0,
     walletType: WalletType.mnemonic,
   });
-  backups.value = await backupState.getBackups({
+  backups.value = await backupState.listBackups({
     pubkey: mainWallet.publicKey,
     signature,
   });
   kr.lock();
 });
 
-const selectBackup = (backup: BackupType) => {
+const selectBackup = (backup: ListBackupType) => {
   selectedBackup.value = backup;
 };
 const useBackup = async () => {
@@ -91,7 +91,7 @@ const useBackup = async () => {
     backupBtnText.value = 'Restoring backup...';
     processing.value = true;
     await backupState
-      .restoreBackup(selectedBackup.value, password)
+      .restoreBackup(selectedBackup.value.userId, unref(password))
       .then(() => {
         router.push({
           name: routes.walletReady.name,
diff --git a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
index 7a4bcc143..400f22e7c 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/type-password.vue
@@ -27,7 +27,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, unref } from 'vue';
 import BaseButton from '@action/components/base-button/index.vue';
 import BaseInput from '@action/components/base-input/index.vue';
 import { useRouter } from 'vue-router';
@@ -42,7 +42,7 @@ const isInitializing = ref(false);
 const nextAction = () => {
   if (!isDisabled.value) {
     isInitializing.value = true;
-    onboardInitializeWallets(store.mnemonic, store.password)
+    onboardInitializeWallets(unref(store.mnemonic), unref(store.password))
       .then(res => {
         isInitializing.value = false;
         if (res.backupsFound) {
@@ -62,7 +62,7 @@ const nextAction = () => {
   }
 };
 const isDisabled = computed(() => {
-  return typePassword.value !== store.password || isInitializing.value;
+  return typePassword.value !== unref(store.password) || isInitializing.value;
 });
 const passwordUpdated = (value: string) => {
   typePassword.value = value.trim();

From 75ed672fa75a6d8574b0842e5917f7186658da53 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 12 Feb 2025 11:20:32 -0800
Subject: [PATCH 08/23] feat: clean up table, add loading state, add no backup
 state

---
 .../settings/views/settings-backups/index.vue | 272 ++++++++++++++----
 1 file changed, 218 insertions(+), 54 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 0521dfe90..0a31b6b19 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -1,75 +1,155 @@
 <template>
-  <div>
+  <div class="settings-container">
     <settings-inner-header v-bind="$attrs" :is-backups="true" />
+
     <settings-switch
       title="Enable backups"
       :is-checked="isBackupsEnabled"
       @update:check="toggleBackups"
     />
+
     <div class="settings__label">
       <p>
-        Backups are currently {{ isBackupsEnabled ? 'enabled' : 'disabled' }}.
+        Backups are currently
+        <strong>{{ isBackupsEnabled ? 'enabled' : 'disabled' }}</strong
+        >.
       </p>
     </div>
-    <p>Current Backups</p>
-    <table>
-      <thead>
-        <tr>
-          <th
-            v-for="(header, i) in headers"
-            :key="`${header}${i}`"
-            class="header-item"
-          >
-            {{ header }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="entity in backups"
-          :key="`entity-${entity.userId}`"
-          class="table-rows"
-        >
-          <td>{{ entity.userId }}</td>
-          <td>{{ entity.updatedAt }}</td>
-          <td>
-            {{ currentUserId === entity.userId ? 'true' : 'false' }}
-          </td>
-          <td>
-            <settings-button
-              style="max-width: 100px"
-              title="delete"
-              @click="deleteBackup(entity.userId)"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+
+    <div v-if="isBackupsEnabled">
+      <div v-if="loading">
+        <div class="settings__backup-header">Loading backups</div>
+        <table class="settings__backup-table">
+          <thead>
+            <tr>
+              <th v-for="(header, i) in headers" :key="`header-${i}`">
+                {{ header }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <balance-loader class="settings__backup-table__loader-one" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-one" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-two" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-two" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <balance-loader class="settings__backup-table__loader-one" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-one" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-two" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-two" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <balance-loader class="settings__backup-table__loader-one" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-one" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-two" />
+              </td>
+              <td>
+                <balance-loader class="settings__backup-table__loader-two" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-else-if="backups.length === 0">
+        <div class="settings__backup-header">No backups found</div>
+      </div>
+
+      <div v-else>
+        <div class="settings__backup-header">Current backups</div>
+
+        <table class="settings__backup-table">
+          <thead>
+            <tr>
+              <th v-for="(header, i) in headers" :key="`header-${i}`">
+                {{ header }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(entity, index) in backups"
+              :key="`entity-${entity.userId}-${index}`"
+            >
+              <td>{{ entity.userId }}</td>
+              <td>{{ formatDate(entity.updatedAt) }}</td>
+              <td>
+                <span
+                  :class="[
+                    'settings__backup-table__status-badge',
+                    entity.userId === currentUserId
+                      ? 'settings__backup-table__status-active'
+                      : 'settings__backup-table__status-inactive',
+                  ]"
+                >
+                  {{ entity.userId === currentUserId ? 'Active' : 'Inactive' }}
+                </span>
+              </td>
+              <td>
+                <div
+                  class="settings__backup-table__action-button"
+                  @click="deleteBackup(entity.userId)"
+                >
+                  <delete-icon />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import BackupState from '@/libs/backup-state';
 import { ListBackupType } from '@/libs/backup-state/types';
 import SettingsInnerHeader from '@action/views/settings/components/settings-inner-header.vue';
 import SettingsSwitch from '@action/views/settings/components/settings-switch.vue';
-import SettingsButton from '@action/views/settings/components/settings-button.vue';
-import { onMounted, ref } from 'vue';
+import deleteIcon from '@/ui/action/icons/actions/trash.vue';
+import BalanceLoader from '@action/icons/common/balance-loader.vue';
 
 const backupState = new BackupState();
+const loading = ref(true);
 const isBackupsEnabled = ref(true);
 const currentUserId = ref('');
 const backups = ref<ListBackupType[]>([]);
-const headers = ['userid', 'last updated', 'this', 'delete'];
+const headers = ['User ID', 'Last Updated', 'Status', 'Delete'];
 
 onMounted(async () => {
   isBackupsEnabled.value = await backupState.isBackupEnabled();
   currentUserId.value = await backupState.getUserId();
   backups.value = await backupState.listBackups();
+  loading.value = false;
 });
 
 const toggleBackups = async (checked: boolean) => {
   isBackupsEnabled.value = checked;
+  loading.value = true;
   if (isBackupsEnabled.value) {
     await backupState.enableBackups();
     await backupState.backup(false);
@@ -77,35 +157,119 @@ const toggleBackups = async (checked: boolean) => {
   } else {
     await backupState.disableBackups();
   }
+  loading.value = false;
 };
 
 const deleteBackup = async (userId: string) => {
+  loading.value = true;
   await backupState.deleteBackup(userId);
   backups.value = await backupState.listBackups();
+  loading.value = false;
+};
+
+const formatDate = (dateString: string) => {
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  };
+  return new Date(dateString).toLocaleDateString(undefined, options);
 };
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
-.settings {
-  &__label {
-    padding: 0 48px;
-    margin-bottom: 10px;
-    p {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
-      letter-spacing: 0.5px;
-      color: @tertiaryLabel;
-      margin: 0;
+
+.settings-container {
+  padding: 16px;
+}
+
+.settings__label {
+  padding: 0 48px;
+  margin-bottom: 10px;
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    color: @tertiaryLabel;
+  }
+}
+
+.settings__backup-header {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+  margin: 30px 0 15px;
+}
+
+.settings__backup-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 12px;
+  overflow: hidden;
+  background: @primaryBg;
+
+  &__loader-one {
+    width: 100px;
+  }
+
+  &__loader-two {
+    width: 65px;
+  }
+
+  thead {
+    background: @darkBg;
+    th {
+      padding: 10px;
+      text-align: left;
+      font-weight: bold;
+      text-align: center;
+      height: 30px;
+
+      &:first-child {
+        width: 150px;
+      }
     }
   }
 
-  &__wrap {
-    .base-select__container {
-      margin-bottom: 12px;
+  tbody {
+    tr {
+      &:nth-child(even) {
+        background: @primary007;
+      }
+    }
+
+    td {
+      padding: 10px;
+      border-bottom: 1px solid @default;
+      text-align: center;
+
+      &:nth-child(1) {
+        text-align: left;
+      }
     }
   }
+
+  &__status-badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  &__status-active {
+    background: #d4f5d4;
+    color: #2a7a2a;
+  }
+
+  &__status-inactive {
+    background: #fddede;
+    color: #b02a2a;
+  }
+
+  &__action-button {
+    cursor: pointer;
+  }
 }
 </style>

From 75a393f2b28a6eccbe5d4ba94318177c9b7666e7 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Wed, 12 Feb 2025 11:39:43 -0800
Subject: [PATCH 09/23] devop: new uuid for each restore

---
 packages/extension/src/libs/backup-state/index.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/extension/src/libs/backup-state/index.ts b/packages/extension/src/libs/backup-state/index.ts
index d0a09e299..d7be0275b 100644
--- a/packages/extension/src/libs/backup-state/index.ts
+++ b/packages/extension/src/libs/backup-state/index.ts
@@ -246,7 +246,6 @@ class BackupState {
             }
           }
         }
-        await this.setUserId(decryptedBackup.uuid);
       }
     });
   }
@@ -354,11 +353,6 @@ class BackupState {
     return state.userId;
   }
 
-  async setUserId(userId: string): Promise<void> {
-    const state: IState = await this.getState();
-    await this.setState({ ...state, userId });
-  }
-
   async disableBackups(): Promise<void> {
     const state: IState = await this.getState();
     await this.setState({ ...state, enabled: false });

From 7888dbc0db39f3906e72e7888e4375b2b8831ba3 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 12 Feb 2025 12:15:18 -0800
Subject: [PATCH 10/23] feat: updates

---
 .../settings/views/settings-backups/index.vue | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 0a31b6b19..b6490f66f 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -3,20 +3,16 @@
     <settings-inner-header v-bind="$attrs" :is-backups="true" />
 
     <settings-switch
-      title="Enable backups"
+      :title="`Settings backup ${isBackupsEnabled ? 'on' : 'off'}`"
       :is-checked="isBackupsEnabled"
       @update:check="toggleBackups"
     />
 
     <div class="settings__label">
-      <p>
-        Backups are currently
-        <strong>{{ isBackupsEnabled ? 'enabled' : 'disabled' }}</strong
-        >.
-      </p>
+      <p>Vince provide copy</p>
     </div>
 
-    <div v-if="isBackupsEnabled">
+    <div v-if="isBackupsEnabled" class="settings__backup">
       <div v-if="loading">
         <div class="settings__backup-header">Loading backups</div>
         <table class="settings__backup-table">
@@ -94,18 +90,17 @@
               v-for="(entity, index) in backups"
               :key="`entity-${entity.userId}-${index}`"
             >
-              <td>{{ entity.userId }}</td>
+              <td>{{ concatId(entity.userId) }}</td>
               <td>{{ formatDate(entity.updatedAt) }}</td>
               <td>
                 <span
                   :class="[
                     'settings__backup-table__status-badge',
-                    entity.userId === currentUserId
-                      ? 'settings__backup-table__status-active'
-                      : 'settings__backup-table__status-inactive',
+                    'settings__backup-table__status-active',
                   ]"
+                  v-if="entity.userId === currentUserId"
                 >
-                  {{ entity.userId === currentUserId ? 'Active' : 'Inactive' }}
+                  Active
                 </span>
               </td>
               <td>
@@ -138,7 +133,7 @@ const loading = ref(true);
 const isBackupsEnabled = ref(true);
 const currentUserId = ref('');
 const backups = ref<ListBackupType[]>([]);
-const headers = ['User ID', 'Last Updated', 'Status', 'Delete'];
+const headers = ['User ID', 'Generated', 'Status', 'Delete'];
 
 onMounted(async () => {
   isBackupsEnabled.value = await backupState.isBackupEnabled();
@@ -160,6 +155,10 @@ const toggleBackups = async (checked: boolean) => {
   loading.value = false;
 };
 
+const concatId = (userId: string) => {
+  return `${userId.slice(0, 4)}...${userId.slice(-4)}`;
+};
+
 const deleteBackup = async (userId: string) => {
   loading.value = true;
   await backupState.deleteBackup(userId);
@@ -184,6 +183,10 @@ const formatDate = (dateString: string) => {
   padding: 16px;
 }
 
+.settings__backup {
+  margin: 0 32px 12px 32px;
+}
+
 .settings__label {
   padding: 0 48px;
   margin-bottom: 10px;
@@ -219,7 +222,14 @@ const formatDate = (dateString: string) => {
   }
 
   thead {
-    background: @darkBg;
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 11px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    margin: 0;
+
     th {
       padding: 10px;
       text-align: left;
@@ -234,15 +244,8 @@ const formatDate = (dateString: string) => {
   }
 
   tbody {
-    tr {
-      &:nth-child(even) {
-        background: @primary007;
-      }
-    }
-
     td {
       padding: 10px;
-      border-bottom: 1px solid @default;
       text-align: center;
 
       &:nth-child(1) {
@@ -259,13 +262,8 @@ const formatDate = (dateString: string) => {
   }
 
   &__status-active {
-    background: #d4f5d4;
-    color: #2a7a2a;
-  }
-
-  &__status-inactive {
-    background: #fddede;
-    color: #b02a2a;
+    background: @primaryLight;
+    color: @primary;
   }
 
   &__action-button {

From 73f87c210092685769516bd38aa5bea012b02cf0 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Wed, 12 Feb 2025 17:22:16 -0800
Subject: [PATCH 11/23] devop: generate names for uuids

---
 .../settings/views/settings-backups/index.vue |   7 +-
 .../restore-wallet/backup-detected.vue        |   2 +
 packages/utils/src/index.ts                   |   2 +
 packages/utils/src/random-names.ts            | 603 ++++++++++++++++++
 4 files changed, 609 insertions(+), 5 deletions(-)
 create mode 100644 packages/utils/src/random-names.ts

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index b6490f66f..269d675ab 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -90,7 +90,7 @@
               v-for="(entity, index) in backups"
               :key="`entity-${entity.userId}-${index}`"
             >
-              <td>{{ concatId(entity.userId) }}</td>
+              <td>{{ generateRandomNameWithSeed('_', entity.userId) }}</td>
               <td>{{ formatDate(entity.updatedAt) }}</td>
               <td>
                 <span
@@ -127,6 +127,7 @@ import SettingsInnerHeader from '@action/views/settings/components/settings-inne
 import SettingsSwitch from '@action/views/settings/components/settings-switch.vue';
 import deleteIcon from '@/ui/action/icons/actions/trash.vue';
 import BalanceLoader from '@action/icons/common/balance-loader.vue';
+import { generateRandomNameWithSeed } from '@enkryptcom/utils';
 
 const backupState = new BackupState();
 const loading = ref(true);
@@ -155,10 +156,6 @@ const toggleBackups = async (checked: boolean) => {
   loading.value = false;
 };
 
-const concatId = (userId: string) => {
-  return `${userId.slice(0, 4)}...${userId.slice(-4)}`;
-};
-
 const deleteBackup = async (userId: string) => {
   loading.value = true;
   await backupState.deleteBackup(userId);
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index 0153aeb07..e4a233323 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -14,6 +14,7 @@
             'backup-detected__backup-item',
           ]"
         >
+          {{ generateRandomNameWithSeed('_', backup.userId) }} -
           {{ new Date(backup.updatedAt).toLocaleString() }}
         </a>
       </div>
@@ -43,6 +44,7 @@ import BackupState from '@/libs/backup-state';
 import { ListBackupType } from '@/libs/backup-state/types';
 import { useRouter } from 'vue-router';
 import { routes } from '../restore-wallet/routes';
+import { generateRandomNameWithSeed } from '@enkryptcom/utils';
 
 const selectedBackup = ref<ListBackupType>();
 const backups = ref<ListBackupType[]>([]);
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 8159f2964..ac877522e 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -18,6 +18,7 @@ import {
   naclEncrypt,
   NACL_VERSION,
 } from "./nacl-encrypt-decrypt";
+import { generateRandomNameWithSeed } from "./random-names";
 
 const bufferToHex = (buf: Buffer | Uint8Array, nozerox = false): string =>
   nozerox
@@ -54,4 +55,5 @@ export {
   naclDecrypt,
   naclEncrypt,
   NACL_VERSION,
+  generateRandomNameWithSeed,
 };
diff --git a/packages/utils/src/random-names.ts b/packages/utils/src/random-names.ts
new file mode 100644
index 000000000..02590c6f8
--- /dev/null
+++ b/packages/utils/src/random-names.ts
@@ -0,0 +1,603 @@
+// Docker names generator, JavaScript/TypeScript port
+// https://github.com/shamrin/namesgenerator
+// Copyright (c) 2017 Alexey Shamrin
+// MIT License
+
+const left = [
+  "admiring",
+  "adoring",
+  "affectionate",
+  "agitated",
+  "amazing",
+  "angry",
+  "awesome",
+  "blissful",
+  "boring",
+  "brave",
+  "clever",
+  "cocky",
+  "compassionate",
+  "competent",
+  "condescending",
+  "confident",
+  "cranky",
+  "dazzling",
+  "determined",
+  "distracted",
+  "dreamy",
+  "eager",
+  "ecstatic",
+  "elastic",
+  "elated",
+  "elegant",
+  "eloquent",
+  "epic",
+  "fervent",
+  "festive",
+  "flamboyant",
+  "focused",
+  "friendly",
+  "frosty",
+  "gallant",
+  "gifted",
+  "goofy",
+  "gracious",
+  "happy",
+  "hardcore",
+  "heuristic",
+  "hopeful",
+  "hungry",
+  "infallible",
+  "inspiring",
+  "jolly",
+  "jovial",
+  "keen",
+  "kind",
+  "laughing",
+  "loving",
+  "lucid",
+  "mystifying",
+  "modest",
+  "musing",
+  "naughty",
+  "nervous",
+  "nifty",
+  "nostalgic",
+  "objective",
+  "optimistic",
+  "peaceful",
+  "pedantic",
+  "pensive",
+  "practical",
+  "priceless",
+  "quirky",
+  "quizzical",
+  "relaxed",
+  "reverent",
+  "romantic",
+  "sad",
+  "serene",
+  "sharp",
+  "silly",
+  "sleepy",
+  "stoic",
+  "stupefied",
+  "suspicious",
+  "tender",
+  "thirsty",
+  "trusting",
+  "unruffled",
+  "upbeat",
+  "vibrant",
+  "vigilant",
+  "vigorous",
+  "wizardly",
+  "wonderful",
+  "xenodochial",
+  "youthful",
+  "zealous",
+  "zen",
+];
+
+const right = [
+  // Muhammad ibn Jābir al-Ḥarrānī al-Battānī was a founding father of astronomy. https://en.wikipedia.org/wiki/Mu%E1%B8%A5ammad_ibn_J%C4%81bir_al-%E1%B8%A4arr%C4%81n%C4%AB_al-Batt%C4%81n%C4%AB
+  "albattani",
+
+  // Frances E. Allen, became the first female IBM Fellow in 1989. In 2006, she became the first female recipient of the ACM's Turing Award. https://en.wikipedia.org/wiki/Frances_E._Allen
+  "allen",
+
+  // June Almeida - Scottish virologist who took the first pictures of the rubella virus - https://en.wikipedia.org/wiki/June_Almeida
+  "almeida",
+
+  // Maria Gaetana Agnesi - Italian mathematician, philosopher, theologian and humanitarian. She was the first woman to write a mathematics handbook and the first woman appointed as a Mathematics Professor at a University. https://en.wikipedia.org/wiki/Maria_Gaetana_Agnesi
+  "agnesi",
+
+  // Archimedes was a physicist, engineer and mathematician who invented too many things to list them here. https://en.wikipedia.org/wiki/Archimedes
+  "archimedes",
+
+  // Maria Ardinghelli - Italian translator, mathematician and physicist - https://en.wikipedia.org/wiki/Maria_Ardinghelli
+  "ardinghelli",
+
+  // Aryabhata - Ancient Indian mathematician-astronomer during 476-550 CE https://en.wikipedia.org/wiki/Aryabhata
+  "aryabhata",
+
+  // Wanda Austin - Wanda Austin is the President and CEO of The Aerospace Corporation, a leading architect for the US security space programs. https://en.wikipedia.org/wiki/Wanda_Austin
+  "austin",
+
+  // Charles Babbage invented the concept of a programmable computer. https://en.wikipedia.org/wiki/Charles_Babbage.
+  "babbage",
+
+  // Stefan Banach - Polish mathematician, was one of the founders of modern functional analysis. https://en.wikipedia.org/wiki/Stefan_Banach
+  "banach",
+
+  // John Bardeen co-invented the transistor - https://en.wikipedia.org/wiki/John_Bardeen
+  "bardeen",
+
+  // Jean Bartik, born Betty Jean Jennings, was one of the original programmers for the ENIAC computer. https://en.wikipedia.org/wiki/Jean_Bartik
+  "bartik",
+
+  // Laura Bassi, the world's first female professor https://en.wikipedia.org/wiki/Laura_Bassi
+  "bassi",
+
+  // Hugh Beaver, British engineer, founder of the Guinness Book of World Records https://en.wikipedia.org/wiki/Hugh_Beaver
+  "beaver",
+
+  // Alexander Graham Bell - an eminent Scottish-born scientist, inventor, engineer and innovator who is credited with inventing the first practical telephone - https://en.wikipedia.org/wiki/Alexander_Graham_Bell
+  "bell",
+
+  // Karl Friedrich Benz - a German automobile engineer. Inventor of the first practical motorcar. https://en.wikipedia.org/wiki/Karl_Benz
+  "benz",
+
+  // Homi J Bhabha - was an Indian nuclear physicist, founding director, and professor of physics at the Tata Institute of Fundamental Research. Colloquially known as 'father of Indian nuclear programme'- https://en.wikipedia.org/wiki/Homi_J._Bhabha
+  "bhabha",
+
+  // Bhaskara II - Ancient Indian mathematician-astronomer whose work on calculus predates Newton and Leibniz by over half a millennium - https://en.wikipedia.org/wiki/Bh%C4%81skara_II#Calculus
+  "bhaskara",
+
+  // Elizabeth Blackwell - American doctor and first American woman to receive a medical degree - https://en.wikipedia.org/wiki/Elizabeth_Blackwell
+  "blackwell",
+
+  // Niels Bohr is the father of quantum theory. https://en.wikipedia.org/wiki/Niels_Bohr.
+  "bohr",
+
+  // Kathleen Booth, she's credited with writing the first assembly language. https://en.wikipedia.org/wiki/Kathleen_Booth
+  "booth",
+
+  // Anita Borg - Anita Borg was the founding director of the Institute for Women and Technology (IWT). https://en.wikipedia.org/wiki/Anita_Borg
+  "borg",
+
+  // Satyendra Nath Bose - He provided the foundation for Bose–Einstein statistics and the theory of the Bose–Einstein condensate. - https://en.wikipedia.org/wiki/Satyendra_Nath_Bose
+  "bose",
+
+  // Evelyn Boyd Granville - She was one of the first African-American woman to receive a Ph.D. in mathematics; she earned it in 1949 from Yale University. https://en.wikipedia.org/wiki/Evelyn_Boyd_Granville
+  "boyd",
+
+  // Brahmagupta - Ancient Indian mathematician during 598-670 CE who gave rules to compute with zero - https://en.wikipedia.org/wiki/Brahmagupta#Zero
+  "brahmagupta",
+
+  // Walter Houser Brattain co-invented the transistor - https://en.wikipedia.org/wiki/Walter_Houser_Brattain
+  "brattain",
+
+  // Emmett Brown invented time travel. https://en.wikipedia.org/wiki/Emmett_Brown (thanks Brian Goff)
+  "brown",
+
+  // Rachel Carson - American marine biologist and conservationist, her book Silent Spring and other writings are credited with advancing the global environmental movement. https://en.wikipedia.org/wiki/Rachel_Carson
+  "carson",
+
+  // Subrahmanyan Chandrasekhar - Astrophysicist known for his mathematical theory on different stages and evolution in structures of the stars. He has won nobel prize for physics - https://en.wikipedia.org/wiki/Subrahmanyan_Chandrasekhar
+  "chandrasekhar",
+
+  // Claude Shannon - The father of information theory and founder of digital circuit design theory. (https://en.wikipedia.org/wiki/Claude_Shannon)
+  "shannon",
+
+  // Joan Clarke - Bletchley Park code breaker during the Second World War who pioneered techniques that remained top secret for decades. Also an accomplished numismatist https://en.wikipedia.org/wiki/Joan_Clarke
+  "clarke",
+
+  // Jane Colden - American botanist widely considered the first female American botanist - https://en.wikipedia.org/wiki/Jane_Colden
+  "colden",
+
+  // Gerty Theresa Cori - American biochemist who became the third woman—and first American woman—to win a Nobel Prize in science, and the first woman to be awarded the Nobel Prize in Physiology or Medicine. Cori was born in Prague. https://en.wikipedia.org/wiki/Gerty_Cori
+  "cori",
+
+  // Seymour Roger Cray was an American electrical engineer and supercomputer architect who designed a series of computers that were the fastest in the world for decades. https://en.wikipedia.org/wiki/Seymour_Cray
+  "cray",
+
+  // This entry reflects a husband and wife team who worked together:
+  // Joan Curran was a Welsh scientist who developed radar and invented chaff, a radar countermeasure. https://en.wikipedia.org/wiki/Joan_Curran
+  // Samuel Curran was an Irish physicist who worked alongside his wife during WWII and invented the proximity fuse. https://en.wikipedia.org/wiki/Samuel_Curran
+  "curran",
+
+  // Marie Curie discovered radioactivity. https://en.wikipedia.org/wiki/Marie_Curie.
+  "curie",
+
+  // Charles Darwin established the principles of natural evolution. https://en.wikipedia.org/wiki/Charles_Darwin.
+  "darwin",
+
+  // Leonardo Da Vinci invented too many things to list here. https://en.wikipedia.org/wiki/Leonardo_da_Vinci.
+  "davinci",
+
+  // Edsger Wybe Dijkstra was a Dutch computer scientist and mathematical scientist. https://en.wikipedia.org/wiki/Edsger_W._Dijkstra.
+  "dijkstra",
+
+  // Donna Dubinsky - played an integral role in the development of personal digital assistants (PDAs) serving as CEO of Palm, Inc. and co-founding Handspring. https://en.wikipedia.org/wiki/Donna_Dubinsky
+  "dubinsky",
+
+  // Annie Easley - She was a leading member of the team which developed software for the Centaur rocket stage and one of the first African-Americans in her field. https://en.wikipedia.org/wiki/Annie_Easley
+  "easley",
+
+  // Thomas Alva Edison, prolific inventor https://en.wikipedia.org/wiki/Thomas_Edison
+  "edison",
+
+  // Albert Einstein invented the general theory of relativity. https://en.wikipedia.org/wiki/Albert_Einstein
+  "einstein",
+
+  // Gertrude Elion - American biochemist, pharmacologist and the 1988 recipient of the Nobel Prize in Medicine - https://en.wikipedia.org/wiki/Gertrude_Elion
+  "elion",
+
+  // Douglas Engelbart gave the mother of all demos: https://en.wikipedia.org/wiki/Douglas_Engelbart
+  "engelbart",
+
+  // Euclid invented geometry. https://en.wikipedia.org/wiki/Euclid
+  "euclid",
+
+  // Leonhard Euler invented large parts of modern mathematics. https://de.wikipedia.org/wiki/Leonhard_Euler
+  "euler",
+
+  // Pierre de Fermat pioneered several aspects of modern mathematics. https://en.wikipedia.org/wiki/Pierre_de_Fermat
+  "fermat",
+
+  // Enrico Fermi invented the first nuclear reactor. https://en.wikipedia.org/wiki/Enrico_Fermi.
+  "fermi",
+
+  // Richard Feynman was a key contributor to quantum mechanics and particle physics. https://en.wikipedia.org/wiki/Richard_Feynman
+  "feynman",
+
+  // Benjamin Franklin is famous for his experiments in electricity and the invention of the lightning rod.
+  "franklin",
+
+  // Galileo was a founding father of modern astronomy, and faced politics and obscurantism to establish scientific truth.  https://en.wikipedia.org/wiki/Galileo_Galilei
+  "galileo",
+
+  // William Henry 'Bill' Gates III is an American business magnate, philanthropist, investor, computer programmer, and inventor. https://en.wikipedia.org/wiki/Bill_Gates
+  "gates",
+
+  // Adele Goldberg, was one of the designers and developers of the Smalltalk language. https://en.wikipedia.org/wiki/Adele_Goldberg_(computer_scientist)
+  "goldberg",
+
+  // Adele Goldstine, born Adele Katz, wrote the complete technical description for the first electronic digital computer, ENIAC. https://en.wikipedia.org/wiki/Adele_Goldstine
+  "goldstine",
+
+  // Shafi Goldwasser is a computer scientist known for creating theoretical foundations of modern cryptography. Winner of 2012 ACM Turing Award. https://en.wikipedia.org/wiki/Shafi_Goldwasser
+  "goldwasser",
+
+  // James Golick, all around gangster.
+  "golick",
+
+  // Jane Goodall - British primatologist, ethologist, and anthropologist who is considered to be the world's foremost expert on chimpanzees - https://en.wikipedia.org/wiki/Jane_Goodall
+  "goodall",
+
+  // Lois Haibt - American computer scientist, part of the team at IBM that developed FORTRAN - https://en.wikipedia.org/wiki/Lois_Haibt
+  "haibt",
+
+  // Margaret Hamilton - Director of the Software Engineering Division of the MIT Instrumentation Laboratory, which developed on-board flight software for the Apollo space program. https://en.wikipedia.org/wiki/Margaret_Hamilton_(scientist)
+  "hamilton",
+
+  // Stephen Hawking pioneered the field of cosmology by combining general relativity and quantum mechanics. https://en.wikipedia.org/wiki/Stephen_Hawking
+  "hawking",
+
+  // Werner Heisenberg was a founding father of quantum mechanics. https://en.wikipedia.org/wiki/Werner_Heisenberg
+  "heisenberg",
+
+  // Grete Hermann was a German philosopher noted for her philosophical work on the foundations of quantum mechanics. https://en.wikipedia.org/wiki/Grete_Hermann
+  "hermann",
+
+  // Jaroslav Heyrovský was the inventor of the polarographic method, father of the electroanalytical method, and recipient of the Nobel Prize in 1959. His main field of work was polarography. https://en.wikipedia.org/wiki/Jaroslav_Heyrovsk%C3%BD
+  "heyrovsky",
+
+  // Dorothy Hodgkin was a British biochemist, credited with the development of protein crystallography. She was awarded the Nobel Prize in Chemistry in 1964. https://en.wikipedia.org/wiki/Dorothy_Hodgkin
+  "hodgkin",
+
+  // Erna Schneider Hoover revolutionized modern communication by inventing a computerized telephone switching method. https://en.wikipedia.org/wiki/Erna_Schneider_Hoover
+  "hoover",
+
+  // Grace Hopper developed the first compiler for a computer programming language and  is credited with popularizing the term 'debugging' for fixing computer glitches. https://en.wikipedia.org/wiki/Grace_Hopper
+  "hopper",
+
+  // Frances Hugle, she was an American scientist, engineer, and inventor who contributed to the understanding of semiconductors, integrated circuitry, and the unique electrical principles of microscopic materials. https://en.wikipedia.org/wiki/Frances_Hugle
+  "hugle",
+
+  // Hypatia - Greek Alexandrine Neoplatonist philosopher in Egypt who was one of the earliest mothers of mathematics - https://en.wikipedia.org/wiki/Hypatia
+  "hypatia",
+
+  // Mary Jackson, American mathematician and aerospace engineer who earned the highest title within NASA's engineering department - https://en.wikipedia.org/wiki/Mary_Jackson_(engineer)
+  "jackson",
+
+  // Yeong-Sil Jang was a Korean scientist and astronomer during the Joseon Dynasty; he invented the first metal printing press and water gauge. https://en.wikipedia.org/wiki/Jang_Yeong-sil
+  "jang",
+
+  // Betty Jennings - one of the original programmers of the ENIAC. https://en.wikipedia.org/wiki/ENIAC - https://en.wikipedia.org/wiki/Jean_Bartik
+  "jennings",
+
+  // Mary Lou Jepsen, was the founder and chief technology officer of One Laptop Per Child (OLPC), and the founder of Pixel Qi. https://en.wikipedia.org/wiki/Mary_Lou_Jepsen
+  "jepsen",
+
+  // Katherine Coleman Goble Johnson - American physicist and mathematician contributed to the NASA. https://en.wikipedia.org/wiki/Katherine_Johnson
+  "johnson",
+
+  // Irène Joliot-Curie - French scientist who was awarded the Nobel Prize for Chemistry in 1935. Daughter of Marie and Pierre Curie. https://en.wikipedia.org/wiki/Ir%C3%A8ne_Joliot-Curie
+  "joliot",
+
+  // Karen Spärck Jones came up with the concept of inverse document frequency, which is used in most search engines today. https://en.wikipedia.org/wiki/Karen_Sp%C3%A4rck_Jones
+  "jones",
+
+  // A. P. J. Abdul Kalam - is an Indian scientist aka Missile Man of India for his work on the development of ballistic missile and launch vehicle technology - https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam
+  "kalam",
+
+  // Susan Kare, created the icons and many of the interface elements for the original Apple Macintosh in the 1980s, and was an original employee of NeXT, working as the Creative Director. https://en.wikipedia.org/wiki/Susan_Kare
+  "kare",
+
+  // Mary Kenneth Keller, Sister Mary Kenneth Keller became the first American woman to earn a PhD in Computer Science in 1965. https://en.wikipedia.org/wiki/Mary_Kenneth_Keller
+  "keller",
+
+  // Johannes Kepler, German astronomer known for his three laws of planetary motion - https://en.wikipedia.org/wiki/Johannes_Kepler
+  "kepler",
+
+  // Har Gobind Khorana - Indian-American biochemist who shared the 1968 Nobel Prize for Physiology - https://en.wikipedia.org/wiki/Har_Gobind_Khorana
+  "khorana",
+
+  // Jack Kilby invented silicone integrated circuits and gave Silicon Valley its name. - https://en.wikipedia.org/wiki/Jack_Kilby
+  "kilby",
+
+  // Maria Kirch - German astronomer and first woman to discover a comet - https://en.wikipedia.org/wiki/Maria_Margarethe_Kirch
+  "kirch",
+
+  // Donald Knuth - American computer scientist, author of 'The Art of Computer Programming' and creator of the TeX typesetting system. https://en.wikipedia.org/wiki/Donald_Knuth
+  "knuth",
+
+  // Sophie Kowalevski - Russian mathematician responsible for important original contributions to analysis, differential equations and mechanics - https://en.wikipedia.org/wiki/Sofia_Kovalevskaya
+  "kowalevski",
+
+  // Marie-Jeanne de Lalande - French astronomer, mathematician and cataloguer of stars - https://en.wikipedia.org/wiki/Marie-Jeanne_de_Lalande
+  "lalande",
+
+  // Hedy Lamarr - Actress and inventor. The principles of her work are now incorporated into modern Wi-Fi, CDMA and Bluetooth technology. https://en.wikipedia.org/wiki/Hedy_Lamarr
+  "lamarr",
+
+  // Leslie B. Lamport - American computer scientist. Lamport is best known for his seminal work in distributed systems and was the winner of the 2013 Turing Award. https://en.wikipedia.org/wiki/Leslie_Lamport
+  "lamport",
+
+  // Mary Leakey - British paleoanthropologist who discovered the first fossilized Proconsul skull - https://en.wikipedia.org/wiki/Mary_Leakey
+  "leakey",
+
+  // Henrietta Swan Leavitt - she was an American astronomer who discovered the relation between the luminosity and the period of Cepheid variable stars. https://en.wikipedia.org/wiki/Henrietta_Swan_Leavitt
+  "leavitt",
+
+  // Daniel Lewin -  Mathematician, Akamai co-founder, soldier, 9/11 victim-- Developed optimization techniques for routing traffic on the internet. Died attempting to stop the 9-11 hijackers. https://en.wikipedia.org/wiki/Daniel_Lewin
+  "lewin",
+
+  // Ruth Lichterman - one of the original programmers of the ENIAC. https://en.wikipedia.org/wiki/ENIAC - https://en.wikipedia.org/wiki/Ruth_Teitelbaum
+  "lichterman",
+
+  // Barbara Liskov - co-developed the Liskov substitution principle. Liskov was also the winner of the Turing Prize in 2008. - https://en.wikipedia.org/wiki/Barbara_Liskov
+  "liskov",
+
+  // Ada Lovelace invented the first algorithm. https://en.wikipedia.org/wiki/Ada_Lovelace (thanks James Turnbull)
+  "lovelace",
+
+  // Auguste and Louis Lumière - the first filmmakers in history - https://en.wikipedia.org/wiki/Auguste_and_Louis_Lumi%C3%A8re
+  "lumiere",
+
+  // Mahavira - Ancient Indian mathematician during 9th century AD who discovered basic algebraic identities - https://en.wikipedia.org/wiki/Mah%C4%81v%C4%ABra_(mathematician)
+  "mahavira",
+
+  // Maria Mayer - American theoretical physicist and Nobel laureate in Physics for proposing the nuclear shell model of the atomic nucleus - https://en.wikipedia.org/wiki/Maria_Mayer
+  "mayer",
+
+  // John McCarthy invented LISP: https://en.wikipedia.org/wiki/John_McCarthy_(computer_scientist)
+  "mccarthy",
+
+  // Barbara McClintock - a distinguished American cytogeneticist, 1983 Nobel Laureate in Physiology or Medicine for discovering transposons. https://en.wikipedia.org/wiki/Barbara_McClintock
+  "mcclintock",
+
+  // Malcolm McLean invented the modern shipping container: https://en.wikipedia.org/wiki/Malcom_McLean
+  "mclean",
+
+  // Kay McNulty - one of the original programmers of the ENIAC. https://en.wikipedia.org/wiki/ENIAC - https://en.wikipedia.org/wiki/Kathleen_Antonelli
+  "mcnulty",
+
+  // Lise Meitner - Austrian/Swedish physicist who was involved in the discovery of nuclear fission. The element meitnerium is named after her - https://en.wikipedia.org/wiki/Lise_Meitner
+  "meitner",
+
+  // Carla Meninsky, was the game designer and programmer for Atari 2600 games Dodge 'Em and Warlords. https://en.wikipedia.org/wiki/Carla_Meninsky
+  "meninsky",
+
+  // Johanna Mestorf - German prehistoric archaeologist and first female museum director in Germany - https://en.wikipedia.org/wiki/Johanna_Mestorf
+  "mestorf",
+
+  // Marvin Minsky - Pioneer in Artificial Intelligence, co-founder of the MIT's AI Lab, won the Turing Award in 1969. https://en.wikipedia.org/wiki/Marvin_Minsky
+  "minsky",
+
+  // Maryam Mirzakhani - an Iranian mathematician and the first woman to win the Fields Medal. https://en.wikipedia.org/wiki/Maryam_Mirzakhani
+  "mirzakhani",
+
+  // Samuel Morse - contributed to the invention of a single-wire telegraph system based on European telegraphs and was a co-developer of the Morse code - https://en.wikipedia.org/wiki/Samuel_Morse
+  "morse",
+
+  // Ian Murdock - founder of the Debian project - https://en.wikipedia.org/wiki/Ian_Murdock
+  "murdock",
+
+  // John von Neumann - todays computer architectures are based on the von Neumann architecture. https://en.wikipedia.org/wiki/Von_Neumann_architecture
+  "neumann",
+
+  // Isaac Newton invented classic mechanics and modern optics. https://en.wikipedia.org/wiki/Isaac_Newton
+  "newton",
+
+  // Florence Nightingale, more prominently known as a nurse, was also the first female member of the Royal Statistical Society and a pioneer in statistical graphics https://en.wikipedia.org/wiki/Florence_Nightingale#Statistics_and_sanitary_reform
+  "nightingale",
+
+  // Alfred Nobel - a Swedish chemist, engineer, innovator, and armaments manufacturer (inventor of dynamite) - https://en.wikipedia.org/wiki/Alfred_Nobel
+  "nobel",
+
+  // Emmy Noether, German mathematician. Noether's Theorem is named after her. https://en.wikipedia.org/wiki/Emmy_Noether
+  "noether",
+
+  // Poppy Northcutt. Poppy Northcutt was the first woman to work as part of NASA’s Mission Control. http://www.businessinsider.com/poppy-northcutt-helped-apollo-astronauts-2014-12?op=1
+  "northcutt",
+
+  // Robert Noyce invented silicone integrated circuits and gave Silicon Valley its name. - https://en.wikipedia.org/wiki/Robert_Noyce
+  "noyce",
+
+  // Panini - Ancient Indian linguist and grammarian from 4th century CE who worked on the world's first formal system - https://en.wikipedia.org/wiki/P%C4%81%E1%B9%87ini#Comparison_with_modern_formal_systems
+  "panini",
+
+  // Ambroise Pare invented modern surgery. https://en.wikipedia.org/wiki/Ambroise_Par%C3%A9
+  "pare",
+
+  // Louis Pasteur discovered vaccination, fermentation and pasteurization. https://en.wikipedia.org/wiki/Louis_Pasteur.
+  "pasteur",
+
+  // Cecilia Payne-Gaposchkin was an astronomer and astrophysicist who, in 1925, proposed in her Ph.D. thesis an explanation for the composition of stars in terms of the relative abundances of hydrogen and helium. https://en.wikipedia.org/wiki/Cecilia_Payne-Gaposchkin
+  "payne",
+
+  // Radia Perlman is a software designer and network engineer and most famous for her invention of the spanning-tree protocol (STP). https://en.wikipedia.org/wiki/Radia_Perlman
+  "perlman",
+
+  // Rob Pike was a key contributor to Unix, Plan 9, the X graphic system, utf-8, and the Go programming language. https://en.wikipedia.org/wiki/Rob_Pike
+  "pike",
+
+  // Henri Poincaré made fundamental contributions in several fields of mathematics. https://en.wikipedia.org/wiki/Henri_Poincar%C3%A9
+  "poincare",
+
+  // Laura Poitras is a director and producer whose work, made possible by open source crypto tools, advances the causes of truth and freedom of information by reporting disclosures by whistleblowers such as Edward Snowden. https://en.wikipedia.org/wiki/Laura_Poitras
+  "poitras",
+
+  // Claudius Ptolemy - a Greco-Egyptian writer of Alexandria, known as a mathematician, astronomer, geographer, astrologer, and poet of a single epigram in the Greek Anthology - https://en.wikipedia.org/wiki/Ptolemy
+  "ptolemy",
+
+  // C. V. Raman - Indian physicist who won the Nobel Prize in 1930 for proposing the Raman effect. - https://en.wikipedia.org/wiki/C._V._Raman
+  "raman",
+
+  // Srinivasa Ramanujan - Indian mathematician and autodidact who made extraordinary contributions to mathematical analysis, number theory, infinite series, and continued fractions. - https://en.wikipedia.org/wiki/Srinivasa_Ramanujan
+  "ramanujan",
+
+  // Sally Kristen Ride was an American physicist and astronaut. She was the first American woman in space, and the youngest American astronaut. https://en.wikipedia.org/wiki/Sally_Ride
+  "ride",
+
+  // Rita Levi-Montalcini - Won Nobel Prize in Physiology or Medicine jointly with colleague Stanley Cohen for the discovery of nerve growth factor (https://en.wikipedia.org/wiki/Rita_Levi-Montalcini)
+  "montalcini",
+
+  // Dennis Ritchie - co-creator of UNIX and the C programming language. - https://en.wikipedia.org/wiki/Dennis_Ritchie
+  "ritchie",
+
+  // Wilhelm Conrad Röntgen - German physicist who was awarded the first Nobel Prize in Physics in 1901 for the discovery of X-rays (Röntgen rays). https://en.wikipedia.org/wiki/Wilhelm_R%C3%B6ntgen
+  "roentgen",
+
+  // Rosalind Franklin - British biophysicist and X-ray crystallographer whose research was critical to the understanding of DNA - https://en.wikipedia.org/wiki/Rosalind_Franklin
+  "rosalind",
+
+  // Meghnad Saha - Indian astrophysicist best known for his development of the Saha equation, used to describe chemical and physical conditions in stars - https://en.wikipedia.org/wiki/Meghnad_Saha
+  "saha",
+
+  // Jean E. Sammet developed FORMAC, the first widely used computer language for symbolic manipulation of mathematical formulas. https://en.wikipedia.org/wiki/Jean_E._Sammet
+  "sammet",
+
+  // Carol Shaw - Originally an Atari employee, Carol Shaw is said to be the first female video game designer. https://en.wikipedia.org/wiki/Carol_Shaw_(video_game_designer)
+  "shaw",
+
+  // Dame Stephanie 'Steve' Shirley - Founded a software company in 1962 employing women working from home. https://en.wikipedia.org/wiki/Steve_Shirley
+  "shirley",
+
+  // William Shockley co-invented the transistor - https://en.wikipedia.org/wiki/William_Shockley
+  "shockley",
+
+  // Françoise Barré-Sinoussi - French virologist and Nobel Prize Laureate in Physiology or Medicine; her work was fundamental in identifying HIV as the cause of AIDS. https://en.wikipedia.org/wiki/Fran%C3%A7oise_Barr%C3%A9-Sinoussi
+  "sinoussi",
+
+  // Betty Snyder - one of the original programmers of the ENIAC. https://en.wikipedia.org/wiki/ENIAC - https://en.wikipedia.org/wiki/Betty_Holberton
+  "snyder",
+
+  // Frances Spence - one of the original programmers of the ENIAC. https://en.wikipedia.org/wiki/ENIAC - https://en.wikipedia.org/wiki/Frances_Spence
+  "spence",
+
+  // Richard Matthew Stallman - the founder of the Free Software movement, the GNU project, the Free Software Foundation, and the League for Programming Freedom. He also invented the concept of copyleft to protect the ideals of this movement, and enshrined this concept in the widely-used GPL (General Public License) for software. https://en.wikiquote.org/wiki/Richard_Stallman
+  "stallman",
+
+  // Michael Stonebraker is a database research pioneer and architect of Ingres, Postgres, VoltDB and SciDB. Winner of 2014 ACM Turing Award. https://en.wikipedia.org/wiki/Michael_Stonebraker
+  "stonebraker",
+
+  // Janese Swanson (with others) developed the first of the Carmen Sandiego games. She went on to found Girl Tech. https://en.wikipedia.org/wiki/Janese_Swanson
+  "swanson",
+
+  // Aaron Swartz was influential in creating RSS, Markdown, Creative Commons, Reddit, and much of the internet as we know it today. He was devoted to freedom of information on the web. https://en.wikiquote.org/wiki/Aaron_Swartz
+  "swartz",
+
+  // Bertha Swirles was a theoretical physicist who made a number of contributions to early quantum theory. https://en.wikipedia.org/wiki/Bertha_Swirles
+  "swirles",
+
+  // Nikola Tesla invented the AC electric system and every gadget ever used by a James Bond villain. https://en.wikipedia.org/wiki/Nikola_Tesla
+  "tesla",
+
+  // Ken Thompson - co-creator of UNIX and the C programming language - https://en.wikipedia.org/wiki/Ken_Thompson
+  "thompson",
+
+  // Linus Torvalds invented Linux and Git. https://en.wikipedia.org/wiki/Linus_Torvalds
+  "torvalds",
+
+  // Alan Turing was a founding father of computer science. https://en.wikipedia.org/wiki/Alan_Turing.
+  "turing",
+
+  // Varahamihira - Ancient Indian mathematician who discovered trigonometric formulae during 505-587 CE - https://en.wikipedia.org/wiki/Var%C4%81hamihira#Contributions
+  "varahamihira",
+
+  // Sir Mokshagundam Visvesvaraya - is a notable Indian engineer.  He is a recipient of the Indian Republic's highest honour, the Bharat Ratna, in 1955. On his birthday, 15 September is celebrated as Engineer's Day in India in his memory - https://en.wikipedia.org/wiki/Visvesvaraya
+  "visvesvaraya",
+
+  // Christiane Nüsslein-Volhard - German biologist, won Nobel Prize in Physiology or Medicine in 1995 for research on the genetic control of embryonic development. https://en.wikipedia.org/wiki/Christiane_N%C3%BCsslein-Volhard
+  "volhard",
+
+  // Marlyn Wescoff - one of the original programmers of the ENIAC. https://en.wikipedia.org/wiki/ENIAC - https://en.wikipedia.org/wiki/Marlyn_Meltzer
+  "wescoff",
+
+  // Andrew Wiles - Notable British mathematician who proved the enigmatic Fermat's Last Theorem - https://en.wikipedia.org/wiki/Andrew_Wiles
+  "wiles",
+
+  // Roberta Williams, did pioneering work in graphical adventure games for personal computers, particularly the King's Quest series. https://en.wikipedia.org/wiki/Roberta_Williams
+  "williams",
+
+  // Sophie Wilson designed the first Acorn Micro-Computer and the instruction set for ARM processors. https://en.wikipedia.org/wiki/Sophie_Wilson
+  "wilson",
+
+  // Jeannette Wing - co-developed the Liskov substitution principle. - https://en.wikipedia.org/wiki/Jeannette_Wing
+  "wing",
+
+  // Steve Wozniak invented the Apple I and Apple II. https://en.wikipedia.org/wiki/Steve_Wozniak
+  "wozniak",
+
+  // The Wright brothers, Orville and Wilbur - credited with inventing and building the world's first successful airplane and making the first controlled, powered and sustained heavier-than-air human flight - https://en.wikipedia.org/wiki/Wright_brothers
+  "wright",
+
+  // Rosalyn Sussman Yalow - Rosalyn Sussman Yalow was an American medical physicist, and a co-winner of the 1977 Nobel Prize in Physiology or Medicine for development of the radioimmunoassay technique. https://en.wikipedia.org/wiki/Rosalyn_Sussman_Yalow
+  "yalow",
+
+  // Ada Yonath - an Israeli crystallographer, the first woman from the Middle East to win a Nobel prize in the sciences. https://en.wikipedia.org/wiki/Ada_Yonath
+  "yonath",
+];
+
+const sumAscii = (str: string) => {
+  let sum = 0;
+  for (let i = 0; i < str.length; i++) {
+    sum += str.charCodeAt(i);
+  }
+  return sum;
+};
+
+const generateRandomNameWithSeed = (sep = "_", seedStr: string) => {
+  let seed = sumAscii(seedStr);
+  const random = () => {
+    const x = Math.sin(seed++) * 10000;
+    return Math.floor((x - Math.floor(x)) * 10000);
+  };
+  return `${left[random() % left.length]}${sep}${right[random() % right.length]}`;
+};
+
+export { generateRandomNameWithSeed };

From d11eca87bab444ab0d81be5cb91c8621331b4ee7 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Thu, 13 Feb 2025 10:54:16 -0800
Subject: [PATCH 12/23] devop: clean up and loading state

---
 .../settings/components/settings-switch.vue   |  21 +-
 .../settings/views/settings-backups/index.vue | 294 ++++++++----------
 2 files changed, 155 insertions(+), 160 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/components/settings-switch.vue b/packages/extension/src/ui/action/views/settings/components/settings-switch.vue
index 240f2c59b..a36e8379d 100644
--- a/packages/extension/src/ui/action/views/settings/components/settings-switch.vue
+++ b/packages/extension/src/ui/action/views/settings/components/settings-switch.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="settings-switch">
+  <div
+    class="settings-switch"
+    :class="{ 'settings-switch-has-border': hasBorder }"
+  >
     <h5>{{ title }}</h5>
     <div class="settings-switch__switch">
       <Switch v-bind="$attrs" :is-checked="isChecked" />
@@ -23,6 +26,12 @@ defineProps({
       return false;
     },
   },
+  hasBorder: {
+    type: Boolean,
+    default: () => {
+      return true;
+    },
+  },
 });
 </script>
 
@@ -32,13 +41,11 @@ defineProps({
 .settings-switch {
   height: 48px;
   background: #ffffff;
-  margin: 0 32px 12px 32px;
+  margin: 0 32px;
   box-sizing: border-box;
-  border: 1px solid @gray02;
   box-sizing: border-box;
   border-radius: 10px;
   width: calc(~'100% - 64px');
-  padding: 12px 16px;
   display: block;
   position: relative;
   cursor: pointer;
@@ -52,6 +59,12 @@ defineProps({
     margin-bottom: 0;
   }
 
+  &-has-border {
+    border: 1px solid @gray02;
+    padding: 12px 16px;
+    margin: 0 32px 12px 32px;
+  }
+
   h5 {
     font-style: normal;
     font-weight: 400;
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index b6490f66f..a2219db9b 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -6,114 +6,67 @@
       :title="`Settings backup ${isBackupsEnabled ? 'on' : 'off'}`"
       :is-checked="isBackupsEnabled"
       @update:check="toggleBackups"
+      :has-border="false"
     />
 
-    <div class="settings__label">
+    <div class="settings-container__label">
       <p>Vince provide copy</p>
     </div>
 
-    <div v-if="isBackupsEnabled" class="settings__backup">
+    <div class="settings-container__backup">
       <div v-if="loading">
-        <div class="settings__backup-header">Loading backups</div>
-        <table class="settings__backup-table">
-          <thead>
-            <tr>
-              <th v-for="(header, i) in headers" :key="`header-${i}`">
-                {{ header }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <balance-loader class="settings__backup-table__loader-one" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-one" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-two" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-two" />
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <balance-loader class="settings__backup-table__loader-one" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-one" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-two" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-two" />
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <balance-loader class="settings__backup-table__loader-one" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-one" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-two" />
-              </td>
-              <td>
-                <balance-loader class="settings__backup-table__loader-two" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="settings-container__backup-header">Fetching backups</div>
+        <div
+          v-for="(item, index) in [1, 2, 3]"
+          :key="`entity-${item}-${index}`"
+          class="settings-container__backup-item"
+        >
+          <div class="settings-container__backup-item__loading-container">
+            <balance-loader />
+            <balance-loader />
+          </div>
+          <div class="settings-container__backup-status__loading">
+            <balance-loader />
+          </div>
+        </div>
       </div>
-
       <div v-else-if="backups.length === 0">
-        <div class="settings__backup-header">No backups found</div>
+        <div class="settings-container__backup-header">No backups found</div>
       </div>
-
       <div v-else>
-        <div class="settings__backup-header">Current backups</div>
-
-        <table class="settings__backup-table">
-          <thead>
-            <tr>
-              <th v-for="(header, i) in headers" :key="`header-${i}`">
-                {{ header }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(entity, index) in backups"
-              :key="`entity-${entity.userId}-${index}`"
-            >
-              <td>{{ concatId(entity.userId) }}</td>
-              <td>{{ formatDate(entity.updatedAt) }}</td>
-              <td>
+        <div class="settings-container__backup-header">Current backups</div>
+        <div class="settings-container__backup-container">
+          <div
+            v-for="(entity, index) in backups"
+            :key="`entity-${entity.userId}-${index}`"
+            class="settings-container__backup-item"
+          >
+            <div>
+              <h4>{{ concatId(entity.userId) }}</h4>
+              <p>Last backup on: {{ formatDate(entity.updatedAt) }}</p>
+            </div>
+            <div class="settings-container__backup-status">
+              <div v-if="entity.userId === currentUserId">
                 <span
                   :class="[
-                    'settings__backup-table__status-badge',
-                    'settings__backup-table__status-active',
+                    'settings-container__backup-status-badge',
+                    'settings-container__backup-status-active',
                   ]"
-                  v-if="entity.userId === currentUserId"
                 >
                   Active
                 </span>
-              </td>
-              <td>
+              </div>
+              <div>
                 <div
-                  class="settings__backup-table__action-button"
+                  class="settings-container__backup-status-button"
                   @click="deleteBackup(entity.userId)"
                 >
                   <delete-icon />
                 </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -133,7 +86,6 @@ const loading = ref(true);
 const isBackupsEnabled = ref(true);
 const currentUserId = ref('');
 const backups = ref<ListBackupType[]>([]);
-const headers = ['User ID', 'Generated', 'Status', 'Delete'];
 
 onMounted(async () => {
   isBackupsEnabled.value = await backupState.isBackupEnabled();
@@ -156,7 +108,7 @@ const toggleBackups = async (checked: boolean) => {
 };
 
 const concatId = (userId: string) => {
-  return `${userId.slice(0, 4)}...${userId.slice(-4)}`;
+  return `${userId.slice(0, 12)}...${userId.slice(-4)}`;
 };
 
 const deleteBackup = async (userId: string) => {
@@ -181,93 +133,123 @@ const formatDate = (dateString: string) => {
 
 .settings-container {
   padding: 16px;
-}
 
-.settings__backup {
-  margin: 0 32px 12px 32px;
-}
+  &__backup {
+    margin: 0 32px 12px 32px;
 
-.settings__label {
-  padding: 0 48px;
-  margin-bottom: 10px;
+    &-container {
+      height: 288; // adding a small cutoff to let user know there's more
+      overflow-y: auto;
+    }
 
-  p {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    color: @tertiaryLabel;
-  }
-}
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 0;
+
+      h4 {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #202124;
+        margin: 0 0 1px 0;
+      }
 
-.settings__backup-header {
-  font-style: normal;
-  font-weight: bold;
-  font-size: 16px;
-  margin: 30px 0 15px;
-}
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: #5f6368;
+        margin: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;
+      }
 
-.settings__backup-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-radius: 12px;
-  overflow: hidden;
-  background: @primaryBg;
+      &__loading-container {
+        display: flex;
+        flex-direction: column;
 
-  &__loader-one {
-    width: 100px;
-  }
+        svg {
+          &:first-child {
+            width: 150px;
+            margin-bottom: 5px;
+          }
 
-  &__loader-two {
-    width: 65px;
-  }
+          &:last-child {
+            width: 100px;
+          }
+        }
+      }
+    }
 
-  thead {
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 11px;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    margin: 0;
+    &-status {
+      display: flex;
+      align-items: center;
 
-    th {
-      padding: 10px;
-      text-align: left;
-      font-weight: bold;
-      text-align: center;
-      height: 30px;
+      &__loading {
+        svg {
+          width: 100px;
+        }
+      }
 
-      &:first-child {
-        width: 150px;
+      &-badge {
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: bold;
       }
-    }
-  }
 
-  tbody {
-    td {
-      padding: 10px;
-      text-align: center;
+      &-active {
+        color: @primary;
+      }
 
-      &:nth-child(1) {
-        text-align: left;
+      &-inactive {
+        color: @secondaryLabel;
+      }
+
+      &-button {
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 0;
+        transition: background 300ms ease-in-out;
+        width: 16px;
+        height: 16px;
+        padding: 5px 8px 5px 8px;
+        background: transparent;
+        border-radius: 24px;
+        transition: @opacity-noBG-transition;
+        cursor: pointer;
+        &:hover {
+          background: @black007;
+        }
       }
     }
   }
 
-  &__status-badge {
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: bold;
-  }
+  &__label {
+    padding: 0 48px;
+    margin-bottom: 10px;
 
-  &__status-active {
-    background: @primaryLight;
-    color: @primary;
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: @tertiaryLabel;
+      margin: 0;
+    }
   }
 
-  &__action-button {
-    cursor: pointer;
+  &__backup-header {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    margin: 30px 0 15px;
   }
 }
 </style>

From 10cd0ca2f09453bcc79a03e8fb6e71c8b4494f27 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Thu, 13 Feb 2025 11:40:02 -0800
Subject: [PATCH 13/23] fix: change titles

---
 .../views/settings/components/settings-inner-header.vue    | 2 +-
 .../action/views/settings/views/settings-backups/index.vue | 7 +++----
 .../action/views/settings/views/settings-general/index.vue | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue b/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue
index 136f2f783..4e95041d2 100644
--- a/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue
+++ b/packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue
@@ -8,7 +8,7 @@
     <h2 v-show="isSupport">Support</h2>
     <h2 v-show="isPhrase">Recovery phrase</h2>
     <h2 v-show="isReset">Reset wallet?</h2>
-    <h2 v-show="isBackups">Backups</h2>
+    <h2 v-show="isBackups">Settings backup</h2>
 
     <a class="settings__close" @click="$emit('window:close')">
       <close-icon />
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 35a5740a6..30becb19f 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -3,10 +3,9 @@
     <settings-inner-header v-bind="$attrs" :is-backups="true" />
 
     <settings-switch
-      :title="`Settings backup ${isBackupsEnabled ? 'on' : 'off'}`"
+      :title="`Backup ${isBackupsEnabled ? 'on' : 'off'}`"
       :is-checked="isBackupsEnabled"
       @update:check="toggleBackups"
-      :has-border="false"
     />
 
     <div class="settings-container__label">
@@ -41,8 +40,8 @@
             :key="`entity-${entity.userId}-${index}`"
             class="settings-container__backup-item"
           >
-            <div>
-              <h4>{{ generateRandomNameWithSeed('_', entity.userId) }}</h4>
+            <div class="settings-container__backup-item__name">
+              <h4>{{ generateRandomNameWithSeed(' ', entity.userId) }}</h4>
               <p>Last backup on: {{ formatDate(entity.updatedAt) }}</p>
             </div>
             <div class="settings-container__backup-status">
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
index 5d6151bd3..86f85a6ba 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
@@ -49,7 +49,7 @@
         information is collected.
       </p>
     </div>
-    <settings-button title="Backups" @click="$emit('open:backups')" />
+    <settings-button title="Settings backup" @click="$emit('open:backups')" />
     <!-- <base-select
       :select="selecTimer"
       title="Auto-lock timer"

From c3150463d017b705c1ba018d308d8beecea4494c Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Thu, 13 Feb 2025 11:43:09 -0800
Subject: [PATCH 14/23] fix: remove underscore

---
 .../extension/src/ui/onboard/restore-wallet/backup-detected.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index e4a233323..4f704c5db 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -14,7 +14,7 @@
             'backup-detected__backup-item',
           ]"
         >
-          {{ generateRandomNameWithSeed('_', backup.userId) }} -
+          {{ generateRandomNameWithSeed(' ', backup.userId) }} -
           {{ new Date(backup.updatedAt).toLocaleString() }}
         </a>
       </div>

From 829098a8dc7c140400bba8bc65d33376f728706c Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Thu, 13 Feb 2025 15:39:57 -0800
Subject: [PATCH 15/23] feat: cleanup, enable identicon

---
 packages/extension/package.json               |  1 +
 .../settings-backups/backup-identicon.vue     | 34 ++++++++++++++++
 .../settings/views/settings-backups/index.vue | 19 +++++++--
 .../restore-wallet/backup-detected.vue        | 39 +++++++++++++++++--
 yarn.lock                                     | 21 ++++++++++
 5 files changed, 108 insertions(+), 6 deletions(-)
 create mode 100644 packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue

diff --git a/packages/extension/package.json b/packages/extension/package.json
index d0778bbbd..d3389c582 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -67,6 +67,7 @@
     "ethereum-cryptography": "^2.2.1",
     "ethereumjs-abi": "^0.6.8",
     "eventemitter3": "^5.0.1",
+    "jdenticon": "^3.3.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "moment": "^2.30.1",
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue
new file mode 100644
index 000000000..03e2a8427
--- /dev/null
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue
@@ -0,0 +1,34 @@
+<template>
+  <div ref="jdenticonHolder" class="jdenticon-container"></div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, onMounted, Ref } from 'vue';
+import * as jdenticon from 'jdenticon';
+
+const props = defineProps<{
+  hash: string;
+}>();
+const element: Ref<HTMLElement> = useTemplateRef('jdenticonHolder');
+onMounted(() => {
+  element.value.innerHTML = jdenticon.toSvg(props.hash, 200);
+});
+</script>
+
+<style lang="less">
+.jdenticon-container {
+  border-radius: 50%;
+  overflow: hidden;
+  height: 32px;
+  width: 32px;
+  position: relative;
+
+  svg {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: -4px;
+    left: -4px;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 30becb19f..925d0f069 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -40,9 +40,12 @@
             :key="`entity-${entity.userId}-${index}`"
             class="settings-container__backup-item"
           >
-            <div class="settings-container__backup-item__name">
-              <h4>{{ generateRandomNameWithSeed(' ', entity.userId) }}</h4>
-              <p>Last backup on: {{ formatDate(entity.updatedAt) }}</p>
+            <div class="settings-container__backup-item__content">
+              <backup-identicon :hash="entity.userId" />
+              <div class="settings-container__backup-item__name">
+                <h4>{{ generateRandomNameWithSeed(' ', entity.userId) }}</h4>
+                <p>Last backup on: {{ formatDate(entity.updatedAt) }}</p>
+              </div>
             </div>
             <div class="settings-container__backup-status">
               <div v-if="entity.userId === currentUserId">
@@ -79,6 +82,7 @@ import SettingsInnerHeader from '@action/views/settings/components/settings-inne
 import SettingsSwitch from '@action/views/settings/components/settings-switch.vue';
 import deleteIcon from '@/ui/action/icons/actions/trash.vue';
 import BalanceLoader from '@action/icons/common/balance-loader.vue';
+import BackupIdenticon from './backup-identicon.vue';
 import { generateRandomNameWithSeed } from '@enkryptcom/utils';
 
 const backupState = new BackupState();
@@ -144,6 +148,15 @@ const formatDate = (dateString: string) => {
       align-items: center;
       padding: 10px 0;
 
+      &__content {
+        display: flex;
+        align-items: center;
+      }
+
+      &__name {
+        margin-left: 10px;
+      }
+
       h4 {
         font-style: normal;
         font-weight: 400;
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index 4f704c5db..fce09b0bb 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -14,8 +14,11 @@
             'backup-detected__backup-item',
           ]"
         >
-          {{ generateRandomNameWithSeed(' ', backup.userId) }} -
-          {{ new Date(backup.updatedAt).toLocaleString() }}
+          <backup-identicon :hash="backup.userId" />
+          <div class="backup-detected__backup-item__name">
+            <h4>{{ generateRandomNameWithSeed(' ', backup.userId) }}</h4>
+            <p>{{ formatDate(backup.updatedAt) }}</p>
+          </div>
         </a>
       </div>
     </div>
@@ -45,6 +48,7 @@ import { ListBackupType } from '@/libs/backup-state/types';
 import { useRouter } from 'vue-router';
 import { routes } from '../restore-wallet/routes';
 import { generateRandomNameWithSeed } from '@enkryptcom/utils';
+import backupIdenticon from '@/ui/action/views/settings/views/settings-backups/backup-identicon.vue';
 
 const selectedBackup = ref<ListBackupType>();
 const backups = ref<ListBackupType[]>([]);
@@ -107,6 +111,15 @@ const useBackup = async () => {
   }
 };
 
+const formatDate = (dateString: string) => {
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  };
+  return new Date(dateString).toLocaleDateString(undefined, options);
+};
+
 const skip = () => {
   router.push({
     name: routes.walletReady.name,
@@ -163,7 +176,6 @@ const skip = () => {
     display: flex;
     font-size: 16px;
     align-items: center;
-    justify-content: center;
     cursor: pointer;
     border: 1px solid @white;
 
@@ -171,6 +183,27 @@ const skip = () => {
       border: 1px solid @primary;
       border-radius: 10px;
     }
+
+    &__name {
+      margin-left: 10px;
+
+      h4 {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #202124;
+        margin: 0 0 1px 0 !important;
+      }
+
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        color: @tertiaryLabel;
+        margin: 0;
+      }
+    }
   }
 
   &__backups {
diff --git a/yarn.lock b/yarn.lock
index 18f11c576..31bb86589 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1770,6 +1770,7 @@ __metadata:
     ethereumjs-abi: "npm:^0.6.8"
     eventemitter3: "npm:^5.0.1"
     fs-extra: "npm:^11.3.0"
+    jdenticon: "npm:^3.3.0"
     jsdom: "npm:^26.0.0"
     less: "npm:^4.2.2"
     less-loader: "npm:^12.2.0"
@@ -14196,6 +14197,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-renderer@npm:~2.2.0":
+  version: 2.2.1
+  resolution: "canvas-renderer@npm:2.2.1"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10/857ebc09893e977b46e1acb14e1b02e4bd96c71d965721b0d635586e5ac96ccb8a1adf184cdfd19053b3adcb38b9d0db6ad1f517914f3ea753fd48d802bd92c4
+  languageName: node
+  linkType: hard
+
 "case-sensitive-paths-webpack-plugin@npm:^2.3.0":
   version: 2.4.0
   resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -20481,6 +20491,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jdenticon@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "jdenticon@npm:3.3.0"
+  dependencies:
+    canvas-renderer: "npm:~2.2.0"
+  bin:
+    jdenticon: bin/jdenticon.js
+  checksum: 10/9ac359aa58a7b92274acf8e7dcc96de373c621c97c16bea4219f3b7db910bc15b33175ac8b0b4fe5f44d5f7b41dcc78c06606b1071b5437788df18ccbdc5519d
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-diff@npm:27.5.1"

From 7748adbc53cd415f43f0d20fb1c9ae663d32fa7f Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Fri, 14 Feb 2025 11:24:50 -0800
Subject: [PATCH 16/23] feat: add delete confirmation page for backups

---
 .../settings/views/settings-backups/index.vue | 156 +++++++++++-------
 .../settings/views/settings-general/index.vue |   6 +
 .../restore-wallet/backup-detected.vue        |   5 +-
 3 files changed, 108 insertions(+), 59 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 925d0f069..508fa54ae 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -1,69 +1,72 @@
 <template>
   <div class="settings-container">
     <settings-inner-header v-bind="$attrs" :is-backups="true" />
-
-    <settings-switch
-      :title="`Backup ${isBackupsEnabled ? 'on' : 'off'}`"
-      :is-checked="isBackupsEnabled"
-      @update:check="toggleBackups"
-    />
-
-    <div class="settings-container__label">
-      <p>Vince provide copy</p>
-    </div>
-
-    <div class="settings-container__backup">
-      <div v-if="loading">
-        <div class="settings-container__backup-header">Fetching backups</div>
-        <div
-          v-for="(item, index) in [1, 2, 3]"
-          :key="`entity-${item}-${index}`"
-          class="settings-container__backup-item"
-        >
-          <div class="settings-container__backup-item__loading-container">
-            <balance-loader />
-            <balance-loader />
-          </div>
-          <div class="settings-container__backup-status__loading">
-            <balance-loader />
-          </div>
-        </div>
+    <div v-if="!isDelete">
+      <div class="settings-container__label">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
       </div>
-      <div v-else-if="backups.length === 0">
-        <div class="settings-container__backup-header">No backups found</div>
-      </div>
-      <div v-else>
-        <div class="settings-container__backup-header">Current backups</div>
-        <div class="settings-container__backup-container">
+      <settings-switch
+        :title="`Backup ${isBackupsEnabled ? 'on' : 'off'}`"
+        :is-checked="isBackupsEnabled"
+        @update:check="toggleBackups"
+      />
+
+      <div class="settings-container__backup">
+        <div v-if="loading">
+          <div class="settings-container__backup-header">Fetching backups</div>
           <div
-            v-for="(entity, index) in backups"
-            :key="`entity-${entity.userId}-${index}`"
+            v-for="(item, index) in [1, 2, 3]"
+            :key="`entity-${item}-${index}`"
             class="settings-container__backup-item"
           >
-            <div class="settings-container__backup-item__content">
-              <backup-identicon :hash="entity.userId" />
-              <div class="settings-container__backup-item__name">
-                <h4>{{ generateRandomNameWithSeed(' ', entity.userId) }}</h4>
-                <p>Last backup on: {{ formatDate(entity.updatedAt) }}</p>
-              </div>
+            <div class="settings-container__backup-item__loading-container">
+              <balance-loader />
+              <balance-loader />
             </div>
-            <div class="settings-container__backup-status">
-              <div v-if="entity.userId === currentUserId">
-                <span
-                  :class="[
-                    'settings-container__backup-status-badge',
-                    'settings-container__backup-status-active',
-                  ]"
-                >
-                  Active
-                </span>
+            <div class="settings-container__backup-status__loading">
+              <balance-loader />
+            </div>
+          </div>
+        </div>
+        <div v-else-if="backups.length === 0">
+          <div class="settings-container__backup-header">No backups found</div>
+        </div>
+        <div class="settings-container__backup" v-else>
+          <div class="settings-container__backup-header">Current backups</div>
+          <div class="settings-container__backup-container">
+            <div
+              v-for="(entity, index) in backups"
+              :key="`entity-${entity.userId}-${index}`"
+              class="settings-container__backup-item"
+            >
+              <div class="settings-container__backup-item__content">
+                <backup-identicon :hash="entity.userId" />
+                <div class="settings-container__backup-item__name">
+                  <h4>{{ generateRandomNameWithSeed(' ', entity.userId) }}</h4>
+                  <p>Last backup on: {{ formatDate(entity.updatedAt) }}</p>
+                </div>
               </div>
-              <div>
-                <div
-                  class="settings-container__backup-status-button"
-                  @click="deleteBackup(entity.userId)"
-                >
-                  <delete-icon />
+              <div class="settings-container__backup-status">
+                <div v-if="entity.userId === currentUserId">
+                  <span
+                    :class="[
+                      'settings-container__backup-status-badge',
+                      'settings-container__backup-status-active',
+                    ]"
+                  >
+                    Active
+                  </span>
+                </div>
+                <div>
+                  <div
+                    class="settings-container__backup-status-button"
+                    @click="showDeleteBackup(entity)"
+                  >
+                    <delete-icon />
+                  </div>
                 </div>
               </div>
             </div>
@@ -71,6 +74,37 @@
         </div>
       </div>
     </div>
+
+    <div class="settings-container__backup" v-else>
+      <div class="settings-container__backup-header">
+        Are you sure you want to delete:
+      </div>
+      <div class="settings-container__backup-item">
+        <div class="settings-container__backup-item__content">
+          <backup-identicon :hash="selectedBackup.userId" />
+          <div class="settings-container__backup-item__name">
+            <h4>
+              {{ generateRandomNameWithSeed(' ', selectedBackup.userId) }}
+            </h4>
+            <p>Last backup on: {{ formatDate(selectedBackup.updatedAt) }}</p>
+          </div>
+        </div>
+      </div>
+      <div style="margin: 10px 50px">
+        <base-button
+          title="Delete"
+          @click="deleteBackup(selectedBackup.userId)"
+          style="margin-top: 10px"
+          red
+        />
+        <base-button
+          title="Cancel"
+          @click="isDelete = false"
+          style="margin-top: 10px"
+          no-background
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -83,6 +117,7 @@ import SettingsSwitch from '@action/views/settings/components/settings-switch.vu
 import deleteIcon from '@/ui/action/icons/actions/trash.vue';
 import BalanceLoader from '@action/icons/common/balance-loader.vue';
 import BackupIdenticon from './backup-identicon.vue';
+import BaseButton from '@action/components/base-button/index.vue';
 import { generateRandomNameWithSeed } from '@enkryptcom/utils';
 
 const backupState = new BackupState();
@@ -90,6 +125,8 @@ const loading = ref(true);
 const isBackupsEnabled = ref(true);
 const currentUserId = ref('');
 const backups = ref<ListBackupType[]>([]);
+const isDelete = ref(false);
+const selectedBackup = ref<ListBackupType | null>();
 
 onMounted(async () => {
   isBackupsEnabled.value = await backupState.isBackupEnabled();
@@ -111,6 +148,11 @@ const toggleBackups = async (checked: boolean) => {
   loading.value = false;
 };
 
+const showDeleteBackup = (backup: ListBackupType) => {
+  selectedBackup.value = backup;
+  isDelete.value = true;
+};
+
 const deleteBackup = async (userId: string) => {
   loading.value = true;
   await backupState.deleteBackup(userId);
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
index 86f85a6ba..c61452a02 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
@@ -50,6 +50,12 @@
       </p>
     </div>
     <settings-button title="Settings backup" @click="$emit('open:backups')" />
+    <div class="settings__label">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
     <!-- <base-select
       :select="selecTimer"
       title="Auto-lock timer"
diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index fce09b0bb..9098d67b9 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -60,6 +60,7 @@ const password = store.password;
 const backupBtnText = ref('Use backup');
 
 const processing = ref(false);
+const loadingBackups = ref(true);
 
 const backupBtnDisabled = computed(() => {
   return !selectedBackup.value || processing.value;
@@ -87,6 +88,7 @@ onBeforeMount(async () => {
     signature,
   });
   kr.lock();
+  loadingBackups.value = false;
 });
 
 const selectBackup = (backup: ListBackupType) => {
@@ -131,7 +133,7 @@ const skip = () => {
 @import '@action/styles/theme.less';
 
 .selected {
-  background: @primary;
+  border: 1px solid @primary !important;
   border-radius: 10px;
   color: @white;
 }
@@ -170,7 +172,6 @@ const skip = () => {
   }
 
   &__backup-item {
-    // height: 50px;
     margin: 4px;
     padding: 16px;
     display: flex;

From eff1a45d008d6ff9fb8b062af16f60ca75fe9527 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Fri, 14 Feb 2025 12:14:44 -0800
Subject: [PATCH 17/23] chore: margins

---
 .../settings/views/settings-backups/index.vue  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 508fa54ae..155c4100e 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -90,19 +90,13 @@
           </div>
         </div>
       </div>
-      <div style="margin: 10px 50px">
+      <div class="settings-container__backup-delete-buttons">
         <base-button
           title="Delete"
           @click="deleteBackup(selectedBackup.userId)"
-          style="margin-top: 10px"
           red
         />
-        <base-button
-          title="Cancel"
-          @click="isDelete = false"
-          style="margin-top: 10px"
-          no-background
-        />
+        <base-button title="Cancel" @click="isDelete = false" no-background />
       </div>
     </div>
   </div>
@@ -179,6 +173,14 @@ const formatDate = (dateString: string) => {
   &__backup {
     margin: 0 32px 12px 32px;
 
+    &-delete-buttons {
+      margin: 65px 50px;
+
+      a {
+        margin-top: 10px;
+      }
+    }
+
     &-container {
       height: 288px; // adding a small cutoff to let user know there's more
       overflow-y: auto;

From 3a8ab1df184549a3e80165d6f2b5b38abbc20f98 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:15:32 -0800
Subject: [PATCH 18/23] devop: switch url

---
 packages/extension/src/libs/backup-state/configs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/libs/backup-state/configs.ts b/packages/extension/src/libs/backup-state/configs.ts
index 45e185eea..2837d11af 100644
--- a/packages/extension/src/libs/backup-state/configs.ts
+++ b/packages/extension/src/libs/backup-state/configs.ts
@@ -1,4 +1,4 @@
-const BACKUP_URL = 'https://rabbit.ethvm.dev/';
+const BACKUP_URL = 'https://backupstore.enkrypt.com/';
 const HEADERS = {
   Accept: 'application/json',
   'Content-Type': 'application/json',

From ebe36dc2df2681e1340c0dac7b452edca5eeef0d Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 18 Feb 2025 10:59:40 -0800
Subject: [PATCH 19/23] feat: loading state for backup page

---
 .../restore-wallet/backup-detected.vue        | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
index 9098d67b9..cd7f00b4e 100644
--- a/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
+++ b/packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue
@@ -4,7 +4,10 @@
 
     <div class="backup-detected__backups">
       <h4>Please choose a backup to use:</h4>
-      <div class="backup-detected__backup-items-container">
+      <div
+        class="backup-detected__backup-items-container"
+        v-if="!loadingBackups"
+      >
         <a
           v-for="backup in backups"
           :key="backup.userId"
@@ -21,6 +24,18 @@
           </div>
         </a>
       </div>
+      <div class="backup-detected__backup-items-container" v-else>
+        <a
+          v-for="(backup, idx) in [1, 2, 3]"
+          :key="`entity-${backup.userId}-${idx}`"
+          class="backup-detected__backup-item-loading"
+        >
+          <div class="backup-detected__backup-item-loading__loading-container">
+            <balance-loader />
+            <balance-loader />
+          </div>
+        </a>
+      </div>
     </div>
     <base-button
       :title="backupBtnText"
@@ -49,6 +64,7 @@ import { useRouter } from 'vue-router';
 import { routes } from '../restore-wallet/routes';
 import { generateRandomNameWithSeed } from '@enkryptcom/utils';
 import backupIdenticon from '@/ui/action/views/settings/views/settings-backups/backup-identicon.vue';
+import BalanceLoader from '@action/icons/common/balance-loader.vue';
 
 const selectedBackup = ref<ListBackupType>();
 const backups = ref<ListBackupType[]>([]);
@@ -207,6 +223,37 @@ const skip = () => {
     }
   }
 
+  &__backup-item-loading {
+    margin: 4px;
+    padding: 16px;
+    display: flex;
+    font-size: 16px;
+    align-items: center;
+    border: 1px solid @white;
+    cursor: not-allowed;
+
+    &__loading-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+
+      svg {
+        width: 100px;
+
+        &:first-child {
+          width: 150px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+
+    &:hover {
+      border: 1px solid @white;
+      border-radius: 10px;
+    }
+  }
+
   &__backups {
     margin-bottom: 24px;
 

From ff20eec34efee1a3990eaf95e0c13141c9190afa Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 18 Feb 2025 12:01:00 -0800
Subject: [PATCH 20/23] chore: copy changes and margin

---
 .../views/settings/views/settings-backups/index.vue | 13 +++++++------
 .../views/settings/views/settings-general/index.vue |  4 ++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index 155c4100e..c5b1730cc 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -4,8 +4,9 @@
     <div v-if="!isDelete">
       <div class="settings-container__label">
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Save your current list of accounts across all networks, so you don't
+          need to re-generate them when you import or restore your wallet with
+          Enkrypt. You will still need your recovery phrase.
         </p>
       </div>
       <settings-switch
@@ -171,7 +172,7 @@ const formatDate = (dateString: string) => {
   padding: 16px;
 
   &__backup {
-    margin: 0 32px 12px 32px;
+    margin: 0 16px 12px;
 
     &-delete-buttons {
       margin: 65px 50px;
@@ -182,7 +183,7 @@ const formatDate = (dateString: string) => {
     }
 
     &-container {
-      height: 288px; // adding a small cutoff to let user know there's more
+      height: 225px; // adding a small cutoff to let user know there's more
       overflow-y: auto;
     }
 
@@ -286,8 +287,8 @@ const formatDate = (dateString: string) => {
   }
 
   &__label {
-    padding: 0 48px;
-    margin-bottom: 10px;
+    padding: 0 32px;
+    margin-bottom: 27px;
 
     p {
       font-style: normal;
diff --git a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
index c61452a02..819151194 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-general/index.vue
@@ -52,8 +52,8 @@
     <settings-button title="Settings backup" @click="$emit('open:backups')" />
     <div class="settings__label">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
+        Save your current list of accounts across all networks, so you don't
+        need to re-generate them.
       </p>
     </div>
     <!-- <base-select

From c811fbd3974ddbbc088975e8a2f83e6aec761598 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 18 Feb 2025 12:08:56 -0800
Subject: [PATCH 21/23] fix: spacing

---
 .../action/views/settings/views/settings-backups/index.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index c5b1730cc..ea9fd387c 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -16,7 +16,7 @@
       />
 
       <div class="settings-container__backup">
-        <div v-if="loading">
+        <div v-if="loading" class="settings-container__backup">
           <div class="settings-container__backup-header">Fetching backups</div>
           <div
             v-for="(item, index) in [1, 2, 3]"
@@ -32,7 +32,10 @@
             </div>
           </div>
         </div>
-        <div v-else-if="backups.length === 0">
+        <div
+          v-else-if="backups.length === 0"
+          class="settings-container__backup"
+        >
           <div class="settings-container__backup-header">No backups found</div>
         </div>
         <div class="settings-container__backup" v-else>

From fa715f0890ab6d267b40a64cc60d0c8b83799375 Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Tue, 18 Feb 2025 13:20:32 -0800
Subject: [PATCH 22/23] fix: backup on new wallets

---
 packages/extension/src/libs/backup-state/index.ts | 7 -------
 packages/extension/src/ui/action/App.vue          | 2 +-
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/extension/src/libs/backup-state/index.ts b/packages/extension/src/libs/backup-state/index.ts
index d7be0275b..346c26739 100644
--- a/packages/extension/src/libs/backup-state/index.ts
+++ b/packages/extension/src/libs/backup-state/index.ts
@@ -136,7 +136,6 @@ class BackupState {
       console.error('No signature found');
       return false;
     }
-    console.log('delete signature', signature);
     return fetch(
       `${BACKUP_URL}backups/${mainWallet.publicKey}/users/${userId}?signature=${signature}`,
       {
@@ -179,7 +178,6 @@ class BackupState {
         const decryptedBackup: BackupData = JSON.parse(
           JSON.parse(res.result as string),
         );
-        console.log(decryptedBackup);
         const highestPathIndex: Record<string, number> = {};
         decryptedBackup.accounts.forEach(acc => {
           const id = `${acc.basePath}###${acc.signerType}`;
@@ -188,8 +186,6 @@ class BackupState {
             highestPathIndex[id] = idx;
           }
         });
-
-        console.log(highestPathIndex);
         const getAccountByIndex = (
           accounts: Omit<EnkryptAccount, 'address' | 'publicKey'>[],
           basePath: string,
@@ -224,11 +220,9 @@ class BackupState {
               i,
             );
             if (existingAccount && newAccount) {
-              console.log('Account already exists, just renaming');
               await kr.renameAccount(existingAccount.address, newAccount.name);
               continue;
             } else if (newAccount) {
-              console.log('creating new account', newAccount);
               await kr.saveNewAccount({
                 basePath: newAccount.basePath,
                 name: newAccount.name,
@@ -236,7 +230,6 @@ class BackupState {
                 walletType: newAccount.walletType,
               });
             } else if (!newAccount) {
-              console.log('edge case shouldnt happen', newAccount);
               await kr.saveNewAccount({
                 basePath: basePath,
                 name: `New Account from backup ${i}`,
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index c8583612e..ff8617cd8 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -410,6 +410,7 @@ const init = async () => {
     setNetwork(defaultNetwork);
   }
   await setActiveNetworks();
+  backupState.backup(true).catch(console.error);
   isLoading.value = false;
 };
 
@@ -423,7 +424,6 @@ onMounted(async () => {
         .then(() => (isLoading.value = false));
     } else {
       init();
-      backupState.backup(true).catch(console.error);
       setTimeout(() => {
         rateState.showPopup().then(show => {
           if (show) {

From 213808c02e0524b3f0090a29effe19730fc13034 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 19 Feb 2025 10:39:05 -0800
Subject: [PATCH 23/23] fix: close delete modal after deleting

---
 .../ui/action/views/settings/views/settings-backups/index.vue   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
index ea9fd387c..defe0eb93 100644
--- a/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
+++ b/packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue
@@ -156,6 +156,7 @@ const deleteBackup = async (userId: string) => {
   await backupState.deleteBackup(userId);
   backups.value = await backupState.listBackups();
   loading.value = false;
+  isDelete.value = false;
 };
 
 const formatDate = (dateString: string) => {
@@ -188,6 +189,7 @@ const formatDate = (dateString: string) => {
     &-container {
       height: 225px; // adding a small cutoff to let user know there's more
       overflow-y: auto;
+      padding-right: 10px;
     }
 
     &-item {