feat: updated assets page for the EVM account (#900)

* feat: combine EVM assets panel

* feat: added native token on top

* styling: native token in EVM

* feat: added test code

* fix: hid XVM assets panel

* styling: added border line

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@astar-network/astar-sdk-core": "^0.2.5",
-    "@astar-network/astar-ui": "^0.0.94",
+    "@astar-network/astar-ui": "^0.0.104",
     "@ethersproject/bignumber": "^5.5.0",
     "@polkadot/api": "^10.9.1",
     "@polkadot/api-contract": "^10.9.1",

src/components/assets/Account.vue

@@ -64,6 +64,9 @@
           </div>
         </div>
       </div>
+      <div v-if="isH160">
+        <evm-native-token />
+      </div>
       <div v-if="multisig" class="row--details-signatory">
         <div class="column-account-name">
           <img v-if="iconWallet" width="24" :src="signatoryIconWallet" alt="wallet-icon" />
@@ -107,6 +110,7 @@ import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
+import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
 import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 import { ETHEREUM_EXTENSION } from 'src/hooks';
 import { supportWalletObj } from 'src/config/wallets';
@@ -115,6 +119,7 @@ export default defineComponent({
   components: {
     NativeAssetList,
     ModalLockdropWarning,
+    EvmNativeToken,
   },
   props: {
     ttlErc20Amount: {

src/components/assets/Assets.vue

@@ -31,7 +31,8 @@
           <evm-asset-list :tokens="evmAssets.assets" />
         </div>
         <div v-else class="container--assets">
-          <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" />
+          <!-- Memo: hide xvm panel because AA might replace it -->
+          <!-- <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" /> -->
           <xcm-native-asset-list v-if="isEnableXcm" :xcm-assets="xcmAssets.assets" />
         </div>
       </div>
@@ -46,7 +47,6 @@ import Account from 'src/components/assets/Account.vue';
 import DynamicLinks from 'src/components/assets/DynamicLinks.vue';
 import EvmAssetList from 'src/components/assets/EvmAssetList.vue';
 import XcmNativeAssetList from 'src/components/assets/XcmNativeAssetList.vue';
-import XvmNativeAssetList from 'src/components/assets/XvmNativeAssetList.vue';
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
@@ -62,7 +62,6 @@ export default defineComponent({
     DynamicLinks,
     EvmAssetList,
     XcmNativeAssetList,
-    XvmNativeAssetList,
   },
   setup() {
     const token = ref<Asset | null>(null);
@@ -72,7 +71,7 @@ export default defineComponent({
     const store = useStore();
     const { currentAccount } = useAccount();
     const { accountData } = useBalance(currentAccount);
-    const { isMainnet, currentNetworkIdx, evmNetworkIdx, isSupportXvmTransfer } = useNetworkInfo();
+    const { isMainnet, currentNetworkIdx, evmNetworkIdx } = useNetworkInfo();
     // Memo: load the dApps data in advance, so that users can access to dApp staging page smoothly
     useDispatchGetDapps();
 
@@ -182,7 +181,6 @@ export default defineComponent({
       accountData,
       isModalXcmBridge,
       isLoading,
-      isSupportXvmTransfer,
     };
   },
 });