feat: cleanup, enable identicon

enkryptcom · Feb 13, 2025 · 829098a · 829098a
1 parent 5abdb83
commit 829098a
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,14 +176,34 @@ const skip = () => {
     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;
     }
+
+    &__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
@@ -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"