chore: Update setting UI

src/pages/settings/About.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { Divider } from '@/components'
+import { VERSION } from '@/data/config'
+import LinkIcon from '@/assets/icons-v3/link.svg'
+import MetaletLogo from '@/assets/images/metalet-logo-v3.svg?url'
+</script>
+
+<template>
+  <div class="pt-20 flex flex-col items-center h-full">
+    <img class="mx-auto w-[130px]" :src="MetaletLogo" alt="metalet-logo" />
+
+    <div class="mt-5 text-center">
+      <h1 class="text-3xl font-extrabold">Metalet</h1>
+      <p class="mt-2 text-sm text-gray-primary">v{{ VERSION }}</p>
+    </div>
+
+    <div class="w-64 mt-6 grow">
+      <Divider />
+      <a
+        target="_blank"
+        class="flex items-center justify-between py-4"
+        href="https://docs.google.com/document/d/1JFUS6f3Vs3Jh2CA4xpTixOUaMto4pANxmM_7b3suut8/edit"
+      >
+        <span class="text-sm font-medium">Terms of Service</span>
+        <LinkIcon class="w-4.5" />
+      </a>
+      <Divider />
+      <a
+        target="_blank"
+        class="flex items-center justify-between py-4"
+        href="https://docs.google.com/document/d/1MyCcA9E6sVd6ThvQaocBeN07umYUJB4zhbhT3E4LxWw/edit"
+      >
+        <span class="text-sm font-medium">Privacy policy</span>
+        <LinkIcon class="w-4.5" />
+      </a>
+      <Divider />
+    </div>
+
+    <a href="https://metalet.space/" target="_blank" class="text-center text-xs text-blue-primary py-12">
+      Go to the official website to learn more.
+    </a>
+  </div>
+</template>

src/pages/settings/Index.vue

@@ -89,7 +89,7 @@ const showResetModal = ref(false)
       <img :src="ArrowRightIcon" alt="" />
     </router-link>
     <router-link
-      to="/wallet/backup"
+      to="/settings/security"
       class="h-15 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-secondary rounded-lg px-4"
     >
       <div class="flex items-center gap-3">
@@ -115,7 +115,10 @@ const showResetModal = ref(false)
       </div>
       <SelectNetwork />
     </div>
-    <div class="h-15 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-secondary rounded-lg px-4">
+    <router-link
+      to="/settings/about"
+      class="h-15 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-secondary rounded-lg px-4"
+    >
       <div class="flex items-center gap-3">
         <MetaletIcon />
         <span>About Metalet</span>
@@ -124,7 +127,7 @@ const showResetModal = ref(false)
         <span class="text-sm text-gray-primary">{{ VERSION }}</span>
         <img :src="ArrowRightIcon" alt="" />
       </div>
-    </div>
+    </router-link>
     <router-link
       to="/settings/toolkit"
       class="h-15 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-secondary rounded-lg px-4"

src/pages/settings/Security.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import ResetModal from '@/components/ResetModal.vue'
+import ArrowRightIcon from '@/assets/icons-v3/arrow_right.svg?url'
+
+const showResetModal = ref(false)
+</script>
+
+<template>
+  <div class="-mx-4">
+    <router-link
+      to="/wallet/backup"
+      class="h-15 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-secondary rounded-lg px-4"
+    >
+      <span>Change Password</span>
+      <img :src="ArrowRightIcon" alt="" />
+    </router-link>
+    <div class="h-15 flex items-center cursor-pointer rounded-lg px-4">
+      <span class="text-red-500 hover:underline" @click="showResetModal = true">Reset wallet</span>
+    </div>
+  </div>
+  <ResetModal v-model:show="showResetModal" />
+</template>

src/router.ts

@@ -392,7 +392,7 @@ const routes = [
         meta: {
           secondaryHeader: true,
           headerTitle: 'Toolkit',
-          noFooter: false,
+          noFooter: true,
         },
       },
       {
@@ -401,7 +401,7 @@ const routes = [
         meta: {
           secondaryHeader: true,
           headerTitle: 'BTC Merge',
-          noFooter: false,
+          noFooter: true,
         },
       },
       {
@@ -410,10 +410,26 @@ const routes = [
         meta: {
           secondaryHeader: true,
           headerTitle: 'Space Merge',
-          noFooter: false,
+          noFooter: true,
+        },
+      },
+      {
+        path: '/settings/about',
+        component: () => import('./pages/settings/About.vue'),
+        meta: {
+          secondaryHeader: true,
+          noFooter: true,
+        },
+      },
+      {
+        path: '/settings/security',
+        component: () => import('./pages/settings/Security.vue'),
+        meta: {
+          secondaryHeader: true,
+          headerTitle: 'Wallet Security',
+          noFooter: true,
         },
       },
-
       {
         path: '/tools/path-finder',
         component: () => import('./pages/tools/PathFinder.vue'),