Select account - unified account display (#995)

* Load mapped EVM account * Display unified account modal * Merge branch 'main' into feat/au-select-account * Connected account dot and radio button fixes * Revert radio changes * Cleanup * Amount repositioned * Fix for dark theme * dot margin
AstarNetwork · Nov 7, 2023 · aaee0cc · aaee0cc
1 parent bb8c86f
commit aaee0cc
Show file tree

Hide file tree

Showing 8 changed files with 351 additions and 78 deletions.
diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
@@ -111,6 +111,7 @@ import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/add
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
+import AuIcon from '../header/modals/account-unification/AuIcon.vue';
 
 export default defineComponent({
   components: {

diff --git a/src/components/header/modals/Account.vue b/src/components/header/modals/Account.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="wrapper--account-detail">
+    <div class="box--account">
+      <div v-if="accountName" class="row--account">
+        <div class="account-name">
+          {{ accountName }}
+        </div>
+      </div>
+      <div class="row--account">
+        <div class="address">
+          {{ getShortenAddress(accountAddress) }}
+        </div>
+      </div>
+      <div v-if="showBalance" class="row--balance-icons">
+        <div>
+          <span v-if="showBalanceValue" class="text--balance">
+            {{ $n(getBalance(accountAddress)) }}
+            {{ nativeTokenSymbol }}
+          </span>
+          <span v-else class="text--balance-hide"> ----- {{ nativeTokenSymbol }} </span>
+        </div>
+      </div>
+    </div>
+    <div class="icons">
+      <button class="box--share btn--primary" @click="copyAddress(accountAddress)">
+        <div class="icon--primary">
+          <astar-icon-copy />
+        </div>
+        <q-tooltip>
+          <span class="text--tooltip">{{ $t('copy') }}</span>
+        </q-tooltip>
+      </button>
+      <a :href="explorerUrl + accountAddress" target="_blank" rel="noopener noreferrer">
+        <button class="box--share btn--primary">
+          <div class="icon--primary">
+            <astar-icon-external-link />
+          </div>
+          <q-tooltip>
+            <span class="text--tooltip">{{ $t('assets.explorer') }}</span>
+          </q-tooltip>
+        </button>
+      </a>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getShortenAddress } from '@astar-network/astar-sdk-core';
+import copy from 'copy-to-clipboard';
+import { useStore } from 'src/store';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  props: {
+    accountName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    accountAddress: {
+      type: String,
+      required: true,
+    },
+    explorerUrl: {
+      type: String,
+      required: true,
+    },
+    showBalanceValue: {
+      type: Boolean,
+      required: true,
+    },
+    showBalance: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    nativeTokenSymbol: {
+      type: String,
+      required: true,
+    },
+    getBalance: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup() {
+    const store = useStore();
+    const { t } = useI18n();
+
+    const copyAddress = (address: string): void => {
+      copy(address);
+      store.dispatch('general/showAlertMsg', {
+        msg: t('toast.copyAddressSuccessfully'),
+        alertType: 'copied',
+      });
+    };
+
+    return { getShortenAddress, copyAddress };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@use 'src/components/header/styles/modal-account.scss';
+</style>
diff --git a/src/components/header/modals/ModalAccount.vue b/src/components/header/modals/ModalAccount.vue
@@ -53,53 +53,26 @@
                   class="radio-btn"
                   @change="selAccount = account.address"
                 />
-                <div class="wrapper--account-detail">
-                  <div class="box--account">
-                    <div class="row--account">
-                      <div class="account-name">
-                        <span>
-                          {{ account.name }}
-                        </span>
-                      </div>
-                      <div class="address">
-                        <span>
-                          {{ getShortenAddress(account.address, 4) }}
-                        </span>
-                      </div>
-                    </div>
-                    <div class="row--balance-icons">
-                      <div>
-                        <span v-if="isShowBalance && !isLoadingBalance" class="text--balance">
-                          {{ $n(displayBalance(account.address)) }}
-                          {{ nativeTokenSymbol }}
-                        </span>
-                        <span v-else class="text--balance-hide">
-                          ----- {{ nativeTokenSymbol }}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="icons">
-                    <button class="box--share btn--primary" @click="copyAddress(account.address)">
-                      <div class="icon--primary">
-                        <astar-icon-copy />
-                      </div>
-                      <q-tooltip>
-                        <span class="text--tooltip">{{ $t('copy') }}</span>
-                      </q-tooltip>
-                    </button>
-                    <a :href="subScan + account.address" target="_blank" rel="noopener noreferrer">
-                      <button class="box--share btn--primary">
-                        <div class="icon--primary">
-                          <astar-icon-external-link />
-                        </div>
-                        <q-tooltip>
-                          <span class="text--tooltip">{{ $t('subscan') }}</span>
-                        </q-tooltip>
-                      </button>
-                    </a>
-                  </div>
-                </div>
+                <account
+                  v-if="!account.evmAddress"
+                  :account-name="account.name"
+                  :account-address="account.address"
+                  :explorer-url="subScan"
+                  :native-token-symbol="nativeTokenSymbol"
+                  :show-balance-value="isShowBalance && !isLoadingBalance"
+                  :get-balance="displayBalance"
+                />
+                <unified-account
+                  v-else
+                  :native-address="account.address"
+                  :evm-address="account.evmAddress ?? ''"
+                  :account-name="account.name"
+                  :show-balance="isShowBalance && !isLoadingBalance"
+                  :native-token-symbol="nativeTokenSymbol"
+                  :explorer-url="subScan"
+                  :avatar-url="account.avatarUrl ?? ''"
+                  :get-balance="displayBalance"
+                />
                 <div v-if="index === previousSelIdx" class="dot" />
               </label>
             </li>
@@ -146,13 +119,17 @@ import { useStore } from 'src/store';
 import { SubstrateAccount } from 'src/store/general/state';
 import { computed, defineComponent, PropType, ref, watch, onUnmounted, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useBreakpoints, useNetworkInfo } from 'src/hooks';
+import { useBreakpoints, useNetworkInfo, useAccount } from 'src/hooks';
 import { Ledger } from '@polkadot/hw-ledger';
 import { astarChain } from 'src/config/chain';
+import UnifiedAccount from './UnifiedAccount.vue';
+import Account from './Account.vue';
 
 export default defineComponent({
   components: {
     SelectedWallet,
+    UnifiedAccount,
+    Account,
   },
   props: {
     isOpen: {
@@ -207,6 +184,7 @@ export default defineComponent({
     const { t } = useI18n();
     const { width, screenSize } = useBreakpoints();
     const { currentNetworkChain } = useNetworkInfo();
+    const { checkIfUnified } = useAccount();
 
     const substrateAccounts = computed<SubstrateAccount[]>(() => {
       const accounts: SubstrateAccount[] = accountBalanceMap.value || [];
@@ -300,11 +278,21 @@ export default defineComponent({
       isLoadingBalance.value = true;
       const updatedAccountMap = await Promise.all(
         substrateAccountsAll.value.map(async (it) => {
-          const balance = await fetchNativeBalance({
-            api: $api as ApiPromise,
-            address: it.address,
-          });
-          return { ...it, balance };
+          const [balance, unifiedAccount] = await Promise.all([
+            fetchNativeBalance({
+              api: $api as ApiPromise,
+              address: it.address,
+            }),
+            checkIfUnified(it.address, false),
+          ]);
+
+          return {
+            ...it,
+            balance,
+            evmAddress: unifiedAccount?.evmAddress,
+            name: unifiedAccount?.name ?? it.name,
+            avatarUrl: unifiedAccount?.avatarUrl,
+          };
         })
       );
       // Memo: we use local `accountBalanceMap` state because updating global `substrateAccounts` state triggers UI bug on this drawer