feat: new network and wallet modal (#1123)

* feat: new network modal styling

* styles: network modal styling

* feat: added changing network feature

* feat: added wallet and account UI

* words: updated i18

* styling: wallet selection UI

* feat: update network and accounts

* feat: update network and accounts (2)

* fix: select EVM accounts

* fix: multisig account

* fix: styles

* fix: updated connection features

* fix: fixed EVM issue

* fix: clean up

* fix: modified animation condition

* feat: added ads section

* fix: disable selecting advanced option for zkEVM

* style: network card bottom

* style: network card bottom (2)

* feat: update astar-ui

* fix: refactor

* fix: open modal

* fix: open modal (2)

* fix: tests

* fix: switching tabs

* feat: update test files

* feat: update test files (2)

* fix: updated stylings

* fix: do not go to the bridge page if it is disabled

* wip

* fix: tests

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@astar-network/astar-sdk-core": "^0.2.8",
-    "@astar-network/astar-ui": "^0.0.138",
+    "@astar-network/astar-ui": "^0.0.140",
     "@astar-network/metamask-astar-adapter": "^0.5.4",
     "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",

src/components/assets/Assets.vue

@@ -10,8 +10,8 @@
           :is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount"
         />
 
-        <staking v-if="isDappStakingV3" />
-        <your-project v-if="isDappStakingV3" />
+        <staking v-if="isDappStakingV3 && !isZkEvm" />
+        <your-project v-if="isDappStakingV3 && !isZkEvm" />
 
         <div v-if="!isLoading">
           <div v-if="isH160">
@@ -199,6 +199,7 @@ export default defineComponent({
       isLoading,
       bg,
       isDappStakingV3,
+      isZkEvm,
     };
   },
 });

src/components/assets/NativeAssetList.vue

@@ -264,28 +264,27 @@
   </div>
 </template>
 <script lang="ts">
+import { checkIsNullOrUndefined, truncate } from '@astar-network/astar-sdk-core';
 import { u8aToString } from '@polkadot/util';
 import { ethers } from 'ethers';
+import ModalEvmWithdraw from 'src/components/assets/modals/ModalEvmWithdraw.vue';
+import ModalFaucet from 'src/components/assets/modals/ModalFaucet.vue';
+import ModalVesting from 'src/components/assets/modals/ModalVesting.vue';
 import {
   useBalance,
-  useBalloons,
+  useBreakpoints,
   useEvmDeposit,
+  useFaucet,
   useNetworkInfo,
   usePrice,
-  useBreakpoints,
-  useFaucet,
 } from 'src/hooks';
-import { checkIsNullOrUndefined, truncate } from '@astar-network/astar-sdk-core';
 import { getTokenImage } from 'src/modules/token';
 import { generateAstarNativeTokenObject } from 'src/modules/xcm/tokens';
-import { useStore } from 'src/store';
-import { computed, defineComponent, ref, watchEffect, watch } from 'vue';
-import { buildTransferPageLink } from 'src/router/routes';
-import ModalEvmWithdraw from 'src/components/assets/modals/ModalEvmWithdraw.vue';
-import ModalFaucet from 'src/components/assets/modals/ModalFaucet.vue';
-import ModalVesting from 'src/components/assets/modals/ModalVesting.vue';
 import { Path } from 'src/router';
+import { buildTransferPageLink } from 'src/router/routes';
 import { useDappStaking } from 'src/staking-v3';
+import { useStore } from 'src/store';
+import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 
 export default defineComponent({
   components: {
@@ -307,8 +306,6 @@ export default defineComponent({
     const isShibuya = ref<boolean>(false);
     const isFaucet = ref<boolean>(false);
     const isExpand = ref<boolean>(false);
-    const { isBalloonNativeToken, isBalloonNativeTokenClosing, handleCloseNativeTokenBalloon } =
-      useBalloons();
 
     const store = useStore();
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
@@ -393,9 +390,6 @@ export default defineComponent({
 
     // Ref: https://stackoverflow.com/questions/48143381/css-expand-contract-animation-to-show-hide-content
     const expandAsset = async (isOpen: boolean): Promise<void> => {
-      if (isBalloonNativeToken.value) {
-        await handleCloseNativeTokenBalloon();
-      }
       isExpand.value = !isOpen;
       const el = document.getElementById(isOpen ? 'asset-expand' : 'asset-expand-close');
       el && el.classList.toggle('asset-expanded');
@@ -427,8 +421,6 @@ export default defineComponent({
       isSkeleton,
       isSupportAuTransfer,
       isExpand,
-      isBalloonNativeToken,
-      isBalloonNativeTokenClosing,
       width,
       screenSize,
       reservedTtl,
@@ -438,7 +430,6 @@ export default defineComponent({
       handleModalFaucet,
       handleModalEvmWithdraw,
       expandAsset,
-      handleCloseNativeTokenBalloon,
     };
   },
 });

src/components/assets/styles/asset-list.scss

@@ -228,10 +228,6 @@
   }
 }
 
-.column--expand {
-  position: relative;
-}
-
 .icon--expand {
   color: $astar-blue;
   width: 40px;

src/components/bridge/BridgeSelection.vue

@@ -3,7 +3,11 @@
     <div class="container--selection">
       <div class="column--selection">
         <button :disabled="!isEnableEthBridge">
-          <router-link :to="buildEthereumBridgePageLink()" class="button--bridge">
+          <component
+            :is="isEnableEthBridge ? 'router-link' : 'div'"
+            :to="buildEthereumBridgePageLink()"
+            class="button--bridge"
+          >
             <div class="row--title">
               <img class="img--logo" :src="require('src/assets/img/ethereum.png')" alt="ethereum" />
               <span class="text--bridge-title">{{ $t('bridge.ethereumBridge.title') }}</span>
@@ -13,7 +17,7 @@
                 {{ $t('bridge.ethereumBridge.text', { l1: l1Name, l2: l2Name }) }}
               </span>
             </div>
-          </router-link>
+          </component>
         </button>
         <p class="text--bridge">
           {{ $t('bridge.ethereumBridge.text2') }}
@@ -29,7 +33,11 @@
 
       <div class="column--selection">
         <button :disabled="!isEnableAstrBridge">
-          <router-link :to="buildEthereumBridgePageLink()" class="button--bridge">
+          <component
+            :is="isEnableAstrBridge ? 'router-link' : 'div'"
+            :to="buildEthereumBridgePageLink()"
+            class="button--bridge"
+          >
             <div class="row--title">
               <img
                 class="img--logo"
@@ -45,7 +53,7 @@
                 }}
               </span>
             </div>
-          </router-link>
+          </component>
         </button>
         <p class="text--bridge">{{ $t('bridge.astarBridge.text2') }}</p>
       </div>

src/components/header/AccountButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button type="button" class="btn--account">
+    <button type="button" class="btn--account" data-testid="btn-account">
       <img
         v-if="width >= screenSize.sm"
         class="icon"