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] 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,
       });
     });
   }