feat: superhero id translations and refactoring

Author: akalogerakisunicorn

src/composables/addressBook.ts

@@ -143,7 +143,7 @@ export const useAddressBook = createCustomScopedComposable(() => {
     Object.assign(savedEntry, entry);
   }
 
-  function addAddressBookEntriesFromJson(json: string) {
+  function addAddressBookEntriesFromJson(json: string, showModal = true) {
     try {
       const newEntries: IAddressBookEntry[] = JSON.parse(json);
       const totalEntries = Object.keys(newEntries).length;
@@ -162,11 +162,13 @@ export const useAddressBook = createCustomScopedComposable(() => {
         }
       });
 
-      openModal(MODAL_ADDRESS_BOOK_IMPORT, {
-        totalEntries,
-        successfulEntriesCount,
-        existingEntriesCount,
-      });
+      if (showModal) {
+        openModal(MODAL_ADDRESS_BOOK_IMPORT, {
+          totalEntries,
+          successfulEntriesCount,
+          existingEntriesCount,
+        });
+      }
     } catch (error) {
       handleUnknownError(error);
     }

src/composables/superheroId.ts

@@ -1,4 +1,9 @@
-import { Ref, ref, watch } from 'vue';
+import {
+  Ref,
+  ref,
+  watch,
+  computed,
+} from 'vue';
 import { SuperheroIDService } from '@/protocols/aeternity/libs/SuperheroIDService';
 import type { Encoded } from '@aeternity/aepp-sdk';
 import { useAccounts } from '@/composables/accounts';
@@ -7,6 +12,7 @@ import { useModals } from '@/composables/modals';
 import { MODAL_CONFIRM_TRANSACTION_SIGN, PROTOCOLS } from '@/constants';
 import { unpackTx } from '@aeternity/aepp-sdk';
 import { useNetworks } from '@/composables/networks';
+import { useAddressBook } from '@/composables/addressBook';
 
 const superheroSvcRef = ref<SuperheroIDService | null>(null);
 const hasSuperheroIdRef = ref(false);
@@ -16,16 +22,20 @@ export function useSuperheroId(): {
   hasSuperheroId: Ref<boolean>;
   refreshHasSuperheroId: () => Promise<void>;
   syncAddressBook: (json: string) => Promise<void>;
-  loadAddressBook: () => Promise<string | undefined>;
+  loadAddressBook: () => Promise<void>;
 } { // eslint-disable-line
   const { aeAccounts } = useAccounts();
   const { getAeSdk } = useAeSdk();
   const { openModal } = useModals();
+  const { addAddressBookEntriesFromJson } = useAddressBook();
+
+  const firstAeAddress = computed(() => (
+    aeAccounts.value?.[0]?.address as Encoded.AccountAddress | undefined));
 
   const svcRef = superheroSvcRef as unknown as Ref<SuperheroIDService | null>;
 
   async function refreshHasSuperheroId(): Promise<void> {
-    const addr = aeAccounts.value?.[0]?.address;
+    const addr = firstAeAddress.value;
     if (!addr) {
       hasSuperheroIdRef.value = false;
       return;
@@ -39,7 +49,7 @@ export function useSuperheroId(): {
   }
 
   async function syncAddressBook(json: string): Promise<void> {
-    const addr = aeAccounts.value?.[0]?.address;
+    const addr = firstAeAddress.value;
     if (!addr) throw new Error('No æternity account');
     if (!superheroSvcRef.value) throw new Error('Connect Superhero ID first');
     const svc = superheroSvcRef.value;
@@ -59,13 +69,15 @@ export function useSuperheroId(): {
     hasSuperheroIdRef.value = true;
   }
 
-  async function loadAddressBook(): Promise<string | undefined> {
-    const addr = aeAccounts.value?.[0]?.address;
-    if (!addr) return undefined;
+  async function loadAddressBook() {
+    const addr = firstAeAddress.value;
+    if (!addr) throw new Error('No æternity account');
     const svc = superheroSvcRef.value || new SuperheroIDService();
     const val = await svc.getId();
     hasSuperheroIdRef.value = !!val;
-    return val;
+    if (val) {
+      addAddressBookEntriesFromJson(val, false);
+    }
   }
 
   // Re-init on network change if an AE account exists
@@ -75,9 +87,8 @@ export function useSuperheroId(): {
   });
 
   // Auto-initialize service when first AE account is available; clear on removal
-
   watch(
-    () => aeAccounts.value?.[0]?.address,
+    () => firstAeAddress.value,
     async (addr) => {
       if (addr) {
         if (!superheroSvcRef.value) superheroSvcRef.value = new SuperheroIDService();

src/popup/locales/en.json

@@ -162,6 +162,19 @@
     "latestTransactionCard": {
       "title": "Latest transactions"
     },
+    "superheroId": {
+      "title": "Superhero ID",
+      "createDescription": "Create your Superhero ID to store your settings to the blockchain",
+      "connectDescription": "Connect to restore your settings from the blockchain",
+      "createBtn": "Create",
+      "connectBtn": "Connect",
+      "createdMsg": "Created Superhero ID.",
+      "createFailed": "Create failed",
+      "connectFailed": "Connection to Superhero ID contract failed",
+      "restoreMsg": "Your address book and preferences have been restored",
+      "deployFailed": "Deploy failed",
+      "deployedMsg": "Deployed: {ct}"
+    },
     "pendingMultisigCard": {
       "title": "Pending multisig transaction"
     }

src/popup/pages/AddressBook.vue

@@ -43,6 +43,7 @@
 <script lang="ts">
 import { IonPage } from '@ionic/vue';
 import { defineComponent, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { ROUTE_ADDRESS_BOOK_ADD } from '@/popup/router/routeNames';
 import {
@@ -68,6 +69,7 @@ export default defineComponent({
   },
   setup() {
     const hideButtons = ref(false);
+    const { t } = useI18n();
 
     const { exportAddressBook, importAddressBook, addressBook } = useAddressBook();
     const { openDefaultModal } = useModals();
@@ -82,9 +84,9 @@ export default defineComponent({
         const addr = aeAccounts.value?.[0]?.address as `ak_${string}`;
         if (!addr) throw new Error('No æternity account');
         await syncAddressBook(JSON.stringify(addressBook.value));
-        openDefaultModal({ title: 'Superhero ID', msg: 'Address Book Sync with SH ID completed' });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('pages.addressBook.export.title') });
       } catch (e) {
-        openDefaultModal({ title: 'Superhero ID', msg: 'Sync failed' });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('common.connectionFailed') });
         handleUnknownError(e);
       } finally {
         isSyncing.value = false;

src/popup/pages/Dashboard.vue

@@ -43,17 +43,17 @@
         <template #cards>
           <DashboardCard
             v-if="!hasSuperheroId"
-            title="Superhero ID"
-            description="Create your Superhero ID to store your settings to the blockchain"
-            btn-text="Create"
+            :title="$t('dashboard.superheroId.title')"
+            :description="$t('dashboard.superheroId.createDescription')"
+            :btn-text="$t('dashboard.superheroId.createBtn')"
             @click="onCreateSuperheroId"
           />
 
           <DashboardCard
             v-if="hasSuperheroId"
-            title="Superhero ID"
-            description="Connect to restore your settings from the blockchain"
-            btn-text="Connect"
+            :title="$t('dashboard.superheroId.title')"
+            :description="$t('dashboard.superheroId.connectDescription')"
+            :btn-text="$t('dashboard.superheroId.connectBtn')"
             @click="onConnectSuperheroId"
           />
 
@@ -113,6 +113,7 @@ import {
   onIonViewWillEnter,
   onIonViewDidLeave,
 } from '@ionic/vue';
+import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import {
@@ -175,6 +176,7 @@ export default defineComponent({
   },
   setup() {
     const pageIsActive = ref(true);
+    const { t } = useI18n();
 
     const route = useRoute();
 
@@ -186,10 +188,9 @@ export default defineComponent({
       activeAccountGlobalIdx,
       setActiveAccountByGlobalIdx,
       setActiveAccountByAddressAndProtocol,
-      aeAccounts,
     } = useAccounts();
     const { multisigAccounts } = useMultisigAccounts();
-    const { addressBook, addAddressBookEntriesFromJson } = useAddressBook();
+    const { addressBook } = useAddressBook();
     const {
       superheroSvc,
       hasSuperheroId,
@@ -236,30 +237,29 @@ export default defineComponent({
         const svc = superheroSvc.value!;
         const ct = await svc.deployFromSource(source);
         connectedContractId.value = ct;
-        openDefaultModal({ title: 'Contract', msg: `Deployed: ${ct}` });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('dashboard.superheroId.deployedMsg', { ct }) });
       } catch (e) {
-        openDefaultModal({ title: 'Contract', msg: 'Deploy failed' });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('dashboard.superheroId.deployFailed') });
         handleUnknownError(e);
       }
     }
 
     async function onConnectSuperheroId() {
-      if (!aeAccounts.value.length) return;
       try {
-        const json = await loadAddressBook();
-        if (json) addAddressBookEntriesFromJson(json);
+        await loadAddressBook();
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('dashboard.superheroId.restoreMsg') });
       } catch (e) {
-        openDefaultModal({ title: 'Superhero ID', msg: 'Connection to Superhero ID contract failed' });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('dashboard.superheroId.connectFailed') });
         handleUnknownError(e);
       }
     }
 
     async function onCreateSuperheroId() {
       try {
         await syncAddressBook(JSON.stringify(addressBook.value));
-        openDefaultModal({ title: 'Superhero ID', msg: 'Created Superhero ID.' });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('dashboard.superheroId.createdMsg') });
       } catch (e) {
-        openDefaultModal({ title: 'Superhero ID', msg: 'Create failed' });
+        openDefaultModal({ title: t('dashboard.superheroId.title'), msg: t('dashboard.superheroId.createFailed') });
       }
     }