feat(airGap): account import ui improvements

src/composables/accounts.ts

@@ -44,7 +44,7 @@ export function useAccounts({ store }: IDefaultComposableOptions) {
 
   function setActiveAccountByIdx(idx: number = 0) {
     // TODO replace with updating local state after removing the Vuex
-    store.commit('accounts/setActiveIdx', +(accounts.value[idx].idx || 0));
+    store.commit('accounts/setActiveIdx', idx);
   }
 
   function setActiveAccountByAddress(address?: string) {

src/composables/airGap.ts

@@ -11,7 +11,7 @@ import type {
 import { AeternityAddress } from '@airgap/aeternity';
 import { MainProtocolSymbols } from '@airgap/coinlib-core';
 import type { IAccount } from '../types';
-import { ACCOUNT_AIR_GAP_WALLET, handleUnknownError } from '../popup/utils';
+import { ACCOUNT_AIR_GAP_WALLET, MOBILE_SCHEMA, handleUnknownError } from '../popup/utils';
 
 export function useAirGap() {
   /**
@@ -45,8 +45,11 @@ export function useAirGap() {
         );
         const fragments = [];
 
-        // eslint-disable-next-line no-restricted-syntax, guard-for-in, no-unused-vars
-        for (const _index in [...Array(multiEncoder.fragmentsLength)]) {
+        // eslint-disable-next-line no-restricted-syntax, guard-for-in
+        for (
+          // eslint-disable-next-line  @typescript-eslint/no-unused-vars
+          const _index in [...Array(multiEncoder.fragmentsLength)]
+        ) {
           // eslint-disable-next-line no-await-in-loop
           fragments.push(await multiEncoder.nextPart());
         }
@@ -110,7 +113,7 @@ export function useAirGap() {
     networkId: string,
   ): Promise<string[]> {
     const id = Math.floor(Math.random() * 90000000 + 10000000);
-    const callbackURL = 'superhero://?d=';
+    const callbackURL = `${MOBILE_SCHEMA}?d=`;
     const payload: TransactionSignRequest = {
       callbackURL,
       publicKey,

src/lib/accounts/superhero.ts

@@ -58,7 +58,7 @@ export class AccountSuperhero extends AccountBase {
   sign(data: string | Uint8Array, opt: any): Promise<Uint8Array> {
     const { activeAccount } = useAccounts({ store: this.store });
     return IS_EXTENSION_BACKGROUND
-      ? sign(data, activeAccount.value.secretKey) as any
+      ? sign(data, activeAccount.value.secretKey as any) as any
       : this.store.dispatch('accounts/sign', data, opt);
   }
 

src/popup/components/AccountImportRow.vue

@@ -10,6 +10,7 @@
     <TokenAmount
       :amount="+numericBalance"
       fiat-below
+      fiat-right
     />
   </div>
 </template>
@@ -48,7 +49,7 @@ export default defineComponent({
     const isAirGapAccount = computed((): boolean => props.account.type === ACCOUNT_AIR_GAP_WALLET);
     onMounted(async () => {
       const sdk = await getSdk();
-      const fetchedBalance = await (sdk as any).balance(props.account.address);
+      const fetchedBalance = await sdk.balance(props.account.address);
       balance.value = new BigNumber(aettosToAe(fetchedBalance));
     });
 

src/popup/components/Modals/AccountCreate.vue

@@ -96,8 +96,7 @@ export default defineComponent({
     }
 
     async function connectHardwareWallet() {
-      const scanResult = await root.$store.dispatch('modals/open', {
-        name: MODAL_READ_QR_CODE,
+      const scanResult = await openModal(MODAL_READ_QR_CODE, {
         heading: root.$t('modals.importAirGapAccount.scanTitle'),
         title: root.$t('modals.importAirGapAccount.scanDescription'),
         icon: 'critical',
@@ -109,8 +108,7 @@ export default defineComponent({
 
       // Show Account import.
       try {
-        const selectedAccounts = await root.$store.dispatch('modals/open', {
-          name: MODAL_AIR_GAP_CONFIRM_IMPORT,
+        const selectedAccounts = await openModal(MODAL_AIR_GAP_CONFIRM_IMPORT, {
           accounts,
         });
         selectedAccounts.forEach((account: IAccount) => {

src/popup/components/Modals/AirGapConfirmImport.vue

@@ -6,18 +6,15 @@
     class="air-gap-confirm-import"
     @close="cancel()"
   >
-    <template #header>
+    <div>
       <div class="title">
         {{ $t('modals.importAirGapAccount.importConfirmDialog.title') }}
       </div>
-    </template>
-    <div>
       <div
-        v-if="filteredAccounts.length"
-        class="select-all"
+        v-if="accounts.length"
+        class="description"
       >
-        <CheckBox v-model="selectAll" />
-        {{ $t('modals.importAirGapAccount.importConfirmDialog.selectAll') }}
+        {{ $t('modals.importAirGapAccount.importConfirmDialog.description') }}
       </div>
       <div
         v-else
@@ -26,47 +23,36 @@
         {{ $t('modals.importAirGapAccount.importConfirmDialog.noAccountsFound') }}
       </div>
       <div
-        v-for="account in filteredAccounts"
+        v-for="account in accounts"
         :key="account.address"
         class="account-row"
         :class="{disabled: isAccountAlreadyImported(account)}"
       >
-        <CheckBox
-          v-model="selectedAccounts[account.address]"
-          :disabled="isAccountAlreadyImported(account)"
-        />
         <AccountImportRow :account="account" />
       </div>
     </div>
     <template #footer>
       <BtnMain
         variant="muted"
-        :text="$t('modals.cancel')"
+        :text="$t('common.cancel')"
         @click="cancel()"
       />
       <BtnMain
         extra-padded
-        :text="$t('modals.importAirGapAccount.importConfirmDialog.importAccounts')"
-        :disabled="!hasSelectedAccounts"
+        :text="$t('modals.importAirGapAccount.importConfirmDialog.importAccount')"
+        :disabled="!canImportAccounts"
         @click="confirm()"
       />
     </template>
   </Modal>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  ref,
-  watch,
-  computed,
-  PropType,
-} from '@vue/composition-api';
+import { computed, defineComponent, PropType } from '@vue/composition-api';
 import type { IAccount } from '../../../types';
 import { useState } from '../../../composables/vuex';
 
 import Modal from '../Modal.vue';
-import CheckBox from '../CheckBox.vue';
 import BtnMain from '../buttons/BtnMain.vue';
 import AccountImportRow from '../AccountImportRow.vue';
 
@@ -75,7 +61,6 @@ export default defineComponent({
     Modal,
     BtnMain,
     AccountImportRow,
-    CheckBox,
   },
   props: {
     resolve: {
@@ -88,52 +73,25 @@ export default defineComponent({
   },
   setup(props) {
     const importedAccounts = useState<IAccount[]>('accounts', 'list');
-    const searchPhrase = ref<string>('');
-    const selectAll = ref<boolean>(false);
-    const selectedAccounts = ref<Record<string, boolean>>({});
-    const hasSelectedAccounts = computed((): boolean => props.accounts.some(
-      (account) => selectedAccounts.value[account.address],
-    ));
-    const filteredAccounts = computed((): IAccount[] => (
-      props.accounts.filter((account) => account.address.includes(searchPhrase.value))
-    ));
+    const canImportAccounts = computed(() => props.accounts.length > 0);
 
     function isAccountAlreadyImported(account: IAccount) {
       return importedAccounts.value.some((acc) => acc.address === account.address);
     }
 
     function confirm() {
-      props.resolve(props.accounts.filter(
-        (account) => selectedAccounts.value[account.address],
-      ));
+      props.resolve(props.accounts.filter((account) => !isAccountAlreadyImported(account)));
     }
 
     function cancel() {
       props.reject();
     }
 
-    watch(
-      selectAll,
-      (_selectAll) => {
-        const _selectedAccounts: Record<string, boolean> = {
-          ...selectedAccounts.value,
-        };
-        props.accounts.forEach((account: IAccount) => {
-          _selectedAccounts[account.address] = _selectAll;
-        });
-        selectedAccounts.value = _selectedAccounts;
-      },
-    );
-
     return {
       confirm,
       cancel,
-      searchPhrase,
-      selectAll,
-      selectedAccounts,
-      filteredAccounts,
-      hasSelectedAccounts,
       isAccountAlreadyImported,
+      canImportAccounts,
     };
   },
 });
@@ -146,14 +104,23 @@ export default defineComponent({
 
 .air-gap-confirm-import {
   .title {
-    @extend %face-sans-15-medium;
+    @extend %face-sans-18-bold;
 
-    color: rgba(variables.$color-white, 0.75);
-    text-align: left;
+    color: variables.$color-white;
+    text-align: center;
+    padding: 12px;
+  }
+
+  .description {
+    @extend %face-sans-16-regular;
+
+    color: variables.$color-white;
+    line-height: 24px;
+    text-align: center;
     padding: 12px;
+    margin-bottom: 20px;
   }
 
-  .select-all,
   .account-row {
     @include mixins.flex(flex-start, center, row);