Refactor/remove ethers

biome.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "a11y": {
+        "noNoninteractiveTabindex": "off",
+        "useAnchorContent": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "ignore": ["node_modules", "dist", ".docusaurus", "static"]
+  }
+}

package.json

@@ -44,7 +44,9 @@
     "@polkadot/vue-identicon": "3.8.3",
     "@quasar/app-webpack": "^3.11.2",
     "@quasar/extras": "^1.16.7",
+    "@tanstack/vue-query": "5.56.2",
     "@vue/apollo-composable": "^4.0.0-beta.4",
+    "@wagmi/vue": "0.0.48",
     "@walletconnect/ethereum-provider": "^2.12.2",
     "@walletconnect/modal": "^2.6.2",
     "animate.css": "^4.1.1",
@@ -80,6 +82,7 @@
     "three": "^0.165.0",
     "v-odometer": "^2.0.1",
     "validator": "^13.7.0",
+    "viem": "2.x",
     "vue-i18n": "^9.2.2",
     "vue-js-progress": "^1.0.2",
     "vue-router": "^4.0.0",

src/components/assets/Account.vue

@@ -144,30 +144,30 @@
   </div>
 </template>
 <script lang="ts">
-import { getShortenAddress, isValidEvmAddress, wait } from '@astar-network/astar-sdk-core';
-import { FrameSystemAccountInfo } from 'src/v2/repositories/implementations';
-import copy from 'copy-to-clipboard';
-import { ethers } from 'ethers';
-import { $api } from 'src/boot/api';
-import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
-import AuIcon from 'src/components/header/modals/account-unification/AuIcon.vue';
-import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
-import { SupportWallet, supportWalletObj } from 'src/config/wallets';
+import { getShortenAddress, isValidEvmAddress, wait } from "@astar-network/astar-sdk-core";
+import copy from "copy-to-clipboard";
+import { $api } from "src/boot/api";
+import ModalLockdropWarning from "src/components/assets/modals/ModalLockdropWarning.vue";
+import AuIcon from "src/components/header/modals/account-unification/AuIcon.vue";
+import { endpointKey, providerEndpoints } from "src/config/chainEndpoints";
+import { SupportWallet, supportWalletObj } from "src/config/wallets";
 import {
   useAccount,
   useAccountUnification,
   useBalance,
   useConnectWallet,
   useNetworkInfo,
   useWalletIcon,
-} from 'src/hooks';
-import { ETHEREUM_EXTENSION } from 'src/modules/account';
-import { useEvmAccount } from 'src/hooks/custom-signature/useEvmAccount';
-import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/addressUtils';
-import { useDappStaking } from 'src/staking-v3';
-import { useStore } from 'src/store';
-import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from "src/hooks";
+import { useEvmAccount } from "src/hooks/custom-signature/useEvmAccount";
+import { getEvmMappedSs58Address, setAddressMapping } from "src/hooks/helper/addressUtils";
+import { formatEtherAsNumber } from "src/lib/formatters";
+import { ETHEREUM_EXTENSION } from "src/modules/account";
+import { useDappStaking } from "src/staking-v3";
+import { useStore } from "src/store";
+import type { FrameSystemAccountInfo } from "src/v2/repositories/implementations";
+import { computed, defineComponent, ref, watch, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   components: {
@@ -213,24 +213,24 @@
 
     const store = useStore();
     const { t } = useI18n();
-    const isDarkTheme = computed<boolean>(() => store.getters['general/theme'] === 'DARK');
+    const isDarkTheme = computed<boolean>(() => store.getters["general/theme"] === "DARK");
 
-    const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
-    const isEthWallet = computed<boolean>(() => store.getters['general/isEthWallet']);
+    const isH160 = computed<boolean>(() => store.getters["general/isH160Formatted"]);
+    const isEthWallet = computed<boolean>(() => store.getters["general/isEthWallet"]);
 
     const { currentNetworkIdx, isZkEvm } = useNetworkInfo();
 
     const isWalletConnect = computed<boolean>(() => {
-      const currentWallet = store.getters['general/currentWallet'];
+      const currentWallet = store.getters["general/currentWallet"];
       return currentWallet === SupportWallet.WalletConnect;
     });
 
     const blockscout = computed<string>(
       () =>
-        `${providerEndpoints[currentNetworkIdx.value].blockscout}/address/${currentAccount.value}`
+        `${providerEndpoints[currentNetworkIdx.value].blockscout}/address/${currentAccount.value}`,
     );
     const subScan = computed<string>(
-      () => `${providerEndpoints[currentNetworkIdx.value].subscan}/account/${currentAccount.value}`
+      () => `${providerEndpoints[currentNetworkIdx.value].subscan}/account/${currentAccount.value}`,
     );
 
     const totalBal = computed<number>(() => {
@@ -240,14 +240,14 @@
 
     const signatoryIconWallet = computed<string>(() => {
       // @ts-ignore
-      return multisig.value ? supportWalletObj[multisig.value.signatory.source].img : '';
+      return multisig.value ? supportWalletObj[multisig.value.signatory.source].img : "";
     });
 
     const copyAddress = () => {
       copy(currentAccount.value);
-      store.dispatch('general/showAlertMsg', {
-        msg: t('toast.copyAddressSuccessfully'),
-        alertType: 'copied',
+      store.dispatch("general/showAlertMsg", {
+        msg: t("toast.copyAddressSuccessfully"),
+        alertType: "copied",
       });
     };
 
@@ -265,15 +265,14 @@
       () => {
         balUsd.value = null;
         const h160LockedBal =
-          isZkEvm.value || !isH160.value ? '0' : String(ledger?.value?.locked.toString());
+          isZkEvm.value || !isH160.value ? "0" : String(ledger?.value?.locked.toString());
         if (!balance.value || !props.nativeTokenUsd) return;
 
         const bal =
-          Number(ethers.utils.formatEther(balance.value.toString())) +
-          Number(ethers.utils.formatEther(h160LockedBal));
+          formatEtherAsNumber(balance.value.toString()) + formatEtherAsNumber(h160LockedBal);
         balUsd.value = props.nativeTokenUsd * bal;
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     watchEffect(async () => {
@@ -321,17 +320,17 @@
           isLockdropAccount.value = false;
         }
       },
-      { immediate: false }
+      { immediate: false },
     );
 
     const bg_img = {
-      native: require('/src/assets/img/account_bg_native.webp'),
-      shiden: require('/src/assets/img/account_bg_shiden.webp'),
-      testnet: require('/src/assets/img/account_bg_testnet.webp'),
-      zk: require('/src/assets/img/account_bg_zk.webp'),
+      native: require("/src/assets/img/account_bg_native.webp"),
+      shiden: require("/src/assets/img/account_bg_shiden.webp"),
+      testnet: require("/src/assets/img/account_bg_testnet.webp"),
+      zk: require("/src/assets/img/account_bg_zk.webp"),
     };
 
-    const bg = computed<String>(() => {
+    const bg = computed<string>(() => {
       if (currentNetworkIdx.value === endpointKey.ASTAR) {
         return bg_img.native;
       } else if (currentNetworkIdx.value === endpointKey.SHIDEN) {

src/components/assets/EvmNativeToken.vue

@@ -118,22 +118,22 @@
   </div>
 </template>
 <script lang="ts">
-import { truncate } from '@astar-network/astar-sdk-core';
-import { ethers } from 'ethers';
+import { truncate } from "@astar-network/astar-sdk-core";
 import { $web3 } from 'src/boot/api';
 import { cbridgeAppLink } from 'src/c-bridge';
 import ModalFaucet from 'src/components/assets/modals/ModalFaucet.vue';
+import { layerZeroBridgeEnabled, nativeBridgeEnabled } from "src/features";
 import { useAccount, useBreakpoints, useFaucet, useNetworkInfo } from 'src/hooks';
+import { formatEtherAsNumber } from "src/lib/formatters";
 import { faucetSethLink } from 'src/links';
 import { getTokenImage } from 'src/modules/token';
 import {
   buildEthereumBridgePageLink,
-  buildTransferPageLink,
   buildLzBridgePageLink,
-} from 'src/router/routes';
+  buildTransferPageLink,
+} from "src/router/routes";
 import { useStore } from 'src/store';
-import { computed, defineComponent, ref, watchEffect } from 'vue';
-import { nativeBridgeEnabled, layerZeroBridgeEnabled } from 'src/features';
+import { computed, defineComponent, ref, watchEffect } from "vue";
 import CustomRouterLink from '../common/CustomRouterLink.vue';
 
 export default defineComponent({
@@ -172,7 +172,7 @@ export default defineComponent({
       if (isLoading.value || !nativeTokenSymbol.value || !isH160.value || !$web3.value) return;
       try {
         const balWei = await $web3.value!.eth.getBalance(currentAccount.value);
-        bal.value = Number(ethers.utils.formatEther(balWei));
+        bal.value = formatEtherAsNumber(balWei);
         isShibuya.value = nativeTokenSymbol.value === 'SBY';
         isRocstar.value = nativeTokenSymbol.value === 'RSTR';
         isFaucet.value = isRocstar.value

src/components/assets/NativeAssetList.vue

@@ -273,12 +273,12 @@
 </template>
 <script lang="ts">
 import { checkIsNullOrUndefined, truncate } from '@astar-network/astar-sdk-core';
-import { u8aToString } from '@polkadot/util';
-import { ethers } from 'ethers';
+import { u8aToString } from "@polkadot/util";
 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, useBreakpoints, useEvmDeposit, useFaucet, useNetworkInfo } from 'src/hooks';
+import { formatEtherAsNumber, formatEtherAsString } from "src/lib/formatters";
 import { getTokenImage } from 'src/modules/token';
 import { generateAstarNativeTokenObject } from 'src/modules/xcm/tokens';
 import { Path } from 'src/router';
@@ -330,9 +330,8 @@ export default defineComponent({
     );
 
     const transferableBalance = computed<string>(() => {
-      return accountData.value
-        ? ethers.utils.formatEther(accountData.value.getUsableTransactionBalance().toString())
-        : '0';
+      const accountValue = accountData.value?.getUsableTransactionBalance().toString();
+      return accountValue ? formatEtherAsString(accountValue) : "0";
     });
 
     const isSkeleton = computed<boolean>(() => {
@@ -353,9 +352,10 @@ export default defineComponent({
       const tokenSymbolRef = nativeTokenSymbol.value;
       if (!balance.value || !tokenSymbolRef) return;
       try {
-        bal.value = Number(ethers.utils.formatEther(balance.value.toString()));
-        isShibuya.value = tokenSymbolRef === 'SBY';
-        isRocstar.value = tokenSymbolRef === 'RSTR';
+        const balValue = balance.value.toString();
+        bal.value = formatEtherAsNumber(balValue);
+        isShibuya.value = tokenSymbolRef === "SBY";
+        isRocstar.value = tokenSymbolRef === "RSTR";
         isFaucet.value = isRocstar.value
           ? false
           : isShibuya.value || faucetBalRequirement.value > bal.value;
@@ -379,19 +379,16 @@ export default defineComponent({
       const dappStake = accountDataRef.locks.find((it) => u8aToString(it.id) === 'dapstake');
       const reserved = accountDataRef.reserved;
       if (vesting) {
-        const amount = String(vesting.amount);
-        vestingTtl.value = Number(ethers.utils.formatEther(amount));
+        vestingTtl.value = formatEtherAsNumber(vesting.amount.toString());
       }
       if (dappStake) {
-        const amount = String(dappStake.amount);
-        lockInDappStaking.value = Number(ethers.utils.formatEther(amount));
+        lockInDappStaking.value = formatEtherAsNumber(dappStake.amount.toString());
       } else if (isDappStakingV3.value && ledger.value) {
-        lockInDappStaking.value = Number(ethers.utils.formatEther(ledger.value.locked));
+        lockInDappStaking.value = formatEtherAsNumber(ledger.value.locked);
       }
 
       if (reserved) {
-        const amount = reserved.toString();
-        reservedTtl.value = Number(ethers.utils.formatEther(amount));
+        reservedTtl.value = formatEtherAsNumber(reserved.toString());
       }
     });
 

src/components/common/TokenBalanceNative.vue

@@ -1,17 +1,17 @@
 <template>
   <token-balance
-    :balance="ethers.utils.formatEther(balance)"
+    :balance="formatEtherAsString(balance)"
     :text="text"
     :decimals="decimals"
     :symbol="showTokenSymbol ? dappStakingCurrency : ''"
   />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { ethers } from 'ethers';
-import TokenBalance from './TokenBalance.vue';
-import { useNetworkInfo } from 'src/hooks';
+import { useNetworkInfo } from "src/hooks";
+import { formatEtherAsString } from "src/lib/formatters";
+import { defineComponent } from "vue";
+import TokenBalance from "./TokenBalance.vue";
 
 export default defineComponent({
   components: {
@@ -25,7 +25,7 @@ export default defineComponent({
     text: {
       type: String,
       required: false,
-      default: '',
+      default: "",
     },
     decimals: {
       type: Number,
@@ -41,7 +41,7 @@ export default defineComponent({
   setup() {
     const { dappStakingCurrency } = useNetworkInfo();
 
-    return { dappStakingCurrency, ethers };
+    return { dappStakingCurrency, formatEtherAsString };
   },
 });
 </script>

src/components/header/modals/SelectAccount.vue

@@ -90,19 +90,19 @@ import {
   truncate,
   wait,
 } from '@astar-network/astar-sdk-core';
-import { ApiPromise } from '@polkadot/api';
-import copy from 'copy-to-clipboard';
-import { ethers } from 'ethers';
+import type { ApiPromise } from "@polkadot/api";
+import copy from "copy-to-clipboard";
 import { $api } from 'src/boot/api';
 import { astarChain } from 'src/config/chain';
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { SupportWallet } from 'src/config/wallets';
 import { useAccount, useBreakpoints, useNetworkInfo } from 'src/hooks';
 import { castMobileSource, checkIsEthereumWallet } from 'src/hooks/helper/wallet';
+import { formatEtherAsString } from "src/lib/formatters";
 import { useStore } from 'src/store';
-import { SubstrateAccount } from 'src/store/general/state';
-import { PropType, computed, defineComponent, onUnmounted, ref, watch } from 'vue';
+import type { SubstrateAccount } from "src/store/general/state";
+import { type PropType, computed, defineComponent, onUnmounted, ref, watch } from "vue";
 import { useI18n } from 'vue-i18n';
 import Account from './Account.vue';
 import UnifiedAccount from './UnifiedAccount.vue';
@@ -233,7 +233,7 @@ export default defineComponent({
       if (!accountBalanceMap.value) return 0;
       const account = accountBalanceMap.value.find((it) => it.address === address);
       const balance = account ? account.balance : '0';
-      return truncate(ethers.utils.formatEther(balance || '0'));
+      return truncate(formatEtherAsString(balance || "0"));
     };
 
     const updateAccountMap = async (): Promise<void> => {