Polkadot.js uplift to v11.3.1

package.json

@@ -31,22 +31,22 @@
     "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",
     "@layerzerolabs/scan-client": "^0.0.8",
-    "@polkadot/api": "^10.9.1",
-    "@polkadot/api-contract": "^10.9.1",
-    "@polkadot/extension-dapp": "0.46.5",
-    "@polkadot/hw-ledger": "^12.3.2",
-    "@polkadot/keyring": "^12.3.2",
-    "@polkadot/networks": "^12.3.2",
-    "@polkadot/rpc-provider": "^10.9.1",
-    "@polkadot/types": "^10.9.1",
-    "@polkadot/types-known": "^10.9.1",
-    "@polkadot/types-support": "^10.9.1",
-    "@polkadot/ui-keyring": "^3.5.1",
-    "@polkadot/util": "^12.3.2",
-    "@polkadot/util-crypto": "^12.3.2",
-    "@polkadot/vue-identicon": "^3.5.1",
-    "@polkadot/wasm-crypto": "^7.2.1",
-    "@polkadot/x-randomvalues": "^12.3.2",
+    "@polkadot/api": "^11.3.1",
+    "@polkadot/api-contract": "^11.3.1",
+    "@polkadot/extension-dapp": "0.47.5",
+    "@polkadot/hw-ledger": "^12.6.2",
+    "@polkadot/keyring": "^12.6.2",
+    "@polkadot/networks": "^12.6.2",
+    "@polkadot/rpc-provider": "^11.3.1",
+    "@polkadot/types": "^11.3.1",
+    "@polkadot/types-known": "^11.3.1",
+    "@polkadot/types-support": "^11.3.1",
+    "@polkadot/ui-keyring": "^3.6.6",
+    "@polkadot/util": "^12.6.2",
+    "@polkadot/util-crypto": "^12.6.2",
+    "@polkadot/vue-identicon": "^3.6.6",
+    "@polkadot/wasm-crypto": "^7.3.2",
+    "@polkadot/x-randomvalues": "^12.6.2",
     "@quasar/app-webpack": "^3.11.2",
     "@quasar/extras": "^1.16.7",
     "@vue/apollo-composable": "^4.0.0-beta.4",
@@ -72,7 +72,7 @@
     "luxon": "^2.5.2",
     "marked": "^4.0.15",
     "path": "^0.12.7",
-    "polkasafe": "^1.1.10",
+    "polkasafe": "^1.4.2",
     "quasar": "^2.12.7",
     "query-string": "^7.1.0",
     "reflect-metadata": "^0.1.13",

src/components/assets/Account.vue

@@ -72,7 +72,7 @@
                 width="24"
                 :src="iconWallet"
                 alt="wallet-icon"
-                :class="multisig && 'img--polkasafe'"
+                :class="multisig && 'img--polkasafe-account'"
               />
             </div>
 
@@ -145,7 +145,7 @@
 </template>
 <script lang="ts">
 import { getShortenAddress, isValidEvmAddress, wait } from '@astar-network/astar-sdk-core';
-import { FrameSystemAccountInfo } from '@polkadot/types/lookup';
+import { FrameSystemAccountInfo } from 'src/v2/repositories/implementations';
 import copy from 'copy-to-clipboard';
 import { ethers } from 'ethers';
 import { $api } from 'src/boot/api';

src/components/header/modals/SelectMultisigAccount.vue

@@ -158,13 +158,13 @@ import { hasProperty, isValidAddressPolkadotAddress } from '@astar-network/astar
 import { web3Enable } from '@polkadot/extension-dapp';
 import type { InjectedExtension } from '@polkadot/extension-inject/types';
 import { encodeAddress } from '@polkadot/util-crypto';
-import { Polkasafe } from 'polkasafe';
 import { useExtensions } from 'src/hooks/useExtensions';
 import { polkasafeUrl } from 'src/links';
 import { Multisig, addProxyAccounts } from 'src/modules/multisig';
 import { container } from 'src/v2/common';
 import { ASTAR_ADDRESS_PREFIX } from 'src/v2/repositories/implementations';
 import { Symbols } from 'src/v2/symbols';
+import { PolkasafeWrapper } from 'src/types/polkasafe';
 
 export default defineComponent({
   components: {
@@ -285,7 +285,7 @@ export default defineComponent({
       return truncate(ethers.utils.formatEther(balance || '0'));
     };
 
-    const setMultisigAccounts = async (c: Polkasafe, signatory: string): Promise<void> => {
+    const setMultisigAccounts = async (c: PolkasafeWrapper, signatory: string): Promise<void> => {
       const { data, error } = await c.connectAddress(signatory);
       if (error) throw Error(error);
       if (!hasProperty(data, 'multisigAddresses')) {
@@ -314,9 +314,9 @@ export default defineComponent({
     };
 
     const handleInitializePolkasafe = async (signatory: string, injector: any): Promise<void> => {
-      const client = new Polkasafe();
+      const client = new PolkasafeWrapper();
       await client.connect('astar', signatory, injector);
-      container.addConstant<Polkasafe>(Symbols.PolkasafeClient, client);
+      container.addConstant<PolkasafeWrapper>(Symbols.PolkasafeClient, client);
       await setMultisigAccounts(client, signatory);
     };
 
@@ -340,8 +340,8 @@ export default defineComponent({
         const signatory = encodeAddress(selectedSignatory.value.address, substratePrefix);
 
         try {
-          const polkasafeClient = container.get<Polkasafe>(Symbols.PolkasafeClient);
-          const isSigned = polkasafeClient && polkasafeClient.address === signatory;
+          const polkasafeClient = container.get<PolkasafeWrapper>(Symbols.PolkasafeClient);
+          const isSigned = polkasafeClient && polkasafeClient.getAddress() === signatory;
           if (isSigned) {
             await setMultisigAccounts(polkasafeClient, signatory);
           } else {

src/css/icon.scss

@@ -16,6 +16,11 @@
   height: 24px;
 }
 
+.img--polkasafe-account {
+  width: 24px;
+  height: 24px;
+}
+
 .body--dark {
   .img--polkasafe {
     // Memo: #FFFFFF

src/hooks/chain/useAvgBlockTime.ts

@@ -5,6 +5,7 @@ import { computed, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
 import { wait } from '@astar-network/astar-sdk-core';
 import { useCurrentEra } from '../useCurrentEra';
+import { u64 } from '@polkadot/types';
 
 export const useAvgBlockTime = (path: string) => {
   const { blockPerEra, era, progress, nextEraStartingBlock } = useCurrentEra();
@@ -57,7 +58,7 @@ export const useAvgBlockTime = (path: string) => {
   }): Promise<number> => {
     if (!$api) return 0;
     const block = await $api?.at(hash);
-    const tsBlockTimeAgo = await block.query.timestamp.now();
+    const tsBlockTimeAgo = await block.query.timestamp.now<u64>();
     const spentSecs = (tsNow - tsBlockTimeAgo.toNumber()) / 1000;
     return spentSecs / (blockHeight - blockErasAgo);
   };
@@ -78,7 +79,7 @@ export const useAvgBlockTime = (path: string) => {
       const block30EraAgo = blockHeight - block30Eras;
 
       const [tsNow, hashBlock1EraAgo, hashBlock7ErasAgo, hashBlock30ErasAgo] = await Promise.all([
-        apiRef.query.timestamp.now(),
+        apiRef.query.timestamp.now<u64>(),
         apiRef.rpc.chain.getBlockHash(block1EraAgo),
         apiRef.rpc.chain.getBlockHash(block7ErasAgo),
         apiRef.rpc.chain.getBlockHash(block30EraAgo),

src/hooks/helper/plasmUtils.ts

@@ -15,11 +15,7 @@ import { LOCAL_STORAGE } from 'src/config/localStorage';
  */
 export const balanceFormatter = (bal: BN | string, decimal = ASTAR_DECIMALS): string => {
   let amount;
-  if (isString(bal)) {
-    amount = defaultAmountWithDecimals(new BN(bal), decimal);
-  } else {
-    amount = defaultAmountWithDecimals(bal, decimal);
-  }
+  amount = defaultAmountWithDecimals(bal.toString(), decimal);
 
   const defaultCurrency = localStorage.getItem(LOCAL_STORAGE.DEFAULT_CURRENCY);
   return `${nFormatter(Number(amount))} ${defaultCurrency}`;

src/hooks/transfer/useTokenTransfer.ts

@@ -1,15 +1,12 @@
 import {
   ASTAR_SS58_FORMAT,
   SUBSTRATE_SS58_FORMAT,
-  getEvmGasCost,
   getShortenAddress,
   isValidAddressPolkadotAddress,
   isValidEvmAddress,
-  sampleEvmWalletAddress,
 } from '@astar-network/astar-sdk-core';
 import { $api, $web3 } from 'boot/api';
 import { ethers } from 'ethers';
-import ABI from 'src/config/abi/ERC20.json';
 import { getTokenBal } from 'src/config/web3';
 import { useAccount, useBalance, useGasPrice, useNetworkInfo } from 'src/hooks';
 import { HistoryTxType } from 'src/modules/account';
@@ -19,12 +16,12 @@ import { Path } from 'src/router';
 import { useStore } from 'src/store';
 import { container } from 'src/v2/common';
 import { Asset } from 'src/v2/models';
+import { FrameSystemAccountInfo } from 'src/v2/repositories/implementations';
 import { IAccountUnificationService, IAssetsService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { Ref, computed, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import { AbiItem } from 'web3-utils';
 
 export function useTokenTransfer(selectedToken: Ref<Asset>) {
   const transferAmt = ref<string | null>(null);
@@ -239,7 +236,7 @@ export function useTokenTransfer(selectedToken: Ref<Asset>) {
     const apiRef = $api;
     if (!apiRef || !address || !web3Ref) return 0;
     if (isValidAddressPolkadotAddress(address)) {
-      const { data } = await apiRef.query.system.account(address);
+      const { data } = await apiRef.query.system.account<FrameSystemAccountInfo>(address);
       const transferableBalance = data.free.sub(data.frozen);
       return Number(ethers.utils.formatEther(transferableBalance.toString()));
     }

src/hooks/useAppRouter.ts

@@ -1,7 +1,6 @@
 import { getRandomFromArray, wait } from '@astar-network/astar-sdk-core';
 import { web3Enable } from '@polkadot/extension-dapp';
 import { encodeAddress } from '@polkadot/util-crypto';
-import { Polkasafe } from 'polkasafe';
 import { checkIsLightClient } from 'src/config/api/polkadot/connectApi';
 import { ASTAR_CHAIN } from 'src/config/chain';
 import {
@@ -24,6 +23,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { handleAddDefaultTokens } from './../modules/zk-evm-bridge/l1-bridge/index';
 import { useAccount } from './useAccount';
 import { checkIsNativeWallet } from './helper/wallet';
+import { PolkasafeWrapper } from 'src/types/polkasafe';
 
 const { NETWORK_IDX, SELECTED_ENDPOINT, SELECTED_ADDRESS, SELECTED_WALLET, MULTISIG } =
   LOCAL_STORAGE;
@@ -125,14 +125,15 @@ export function useAppRouter() {
     const delay = 2000;
     await wait(delay);
     const multisigStored = localStorage.getItem(LOCAL_STORAGE.MULTISIG);
+
     if (!multisigStored) return;
     // Memo: PolkaSafe supports Astar only
     if (currentNetworkIdx.value !== endpointKey.ASTAR) {
       handleResetAccount();
       return;
     }
     const multisig = JSON.parse(multisigStored);
-    const client = new Polkasafe();
+    const client = new PolkasafeWrapper();
     const substratePrefix = 42;
     const signatory = encodeAddress(multisig.signatory.address, substratePrefix);
     const extensions = await web3Enable('AstarNetwork/astar-apps');
@@ -145,7 +146,7 @@ export function useAppRouter() {
         alertType: 'info',
       });
       await client.connect('astar', signatory, signer as any);
-      container.addConstant<Polkasafe>(Symbols.PolkasafeClient, client);
+      container.addConstant<PolkasafeWrapper>(Symbols.PolkasafeClient, client);
     } catch (error) {
       console.error(error);
       await disconnectAccount();

src/hooks/useBalance.ts

@@ -1,15 +1,36 @@
 import { ETHEREUM_EXTENSION } from 'src/modules/account';
-import { DappCombinedInfo } from 'src/v2/models/DappsStaking';
 import { VoidFn } from '@polkadot/api/types';
 import { BalanceLockTo212 } from '@polkadot/types/interfaces';
-import { PalletBalancesBalanceLock, PalletVestingVestingInfo } from '@polkadot/types/lookup';
+import { PalletBalancesBalanceLock, PalletVestingVestingInfo } from 'src/v2/models';
 import { BN } from '@polkadot/util';
 import { $api, $web3 } from 'boot/api';
 import { SystemAccount } from 'src/modules/account';
 import { useStore } from 'src/store';
 import { computed, onUnmounted, ref, Ref, watch } from 'vue';
-import { getVested, isValidEvmAddress } from '@astar-network/astar-sdk-core';
-import { useDappStaking, useDapps } from 'src/staking-v3';
+import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
+import { useDapps } from 'src/staking-v3';
+import { Option, Vec, u32 } from '@polkadot/types';
+
+// Temporarily moved here until uplift polkadot js for astar.js
+export const getVested = ({
+  currentBlock,
+  startBlock,
+  perBlock,
+  locked,
+}: {
+  currentBlock: BN;
+  startBlock: BN;
+  perBlock: BN;
+  locked: BN;
+}): BN => {
+  if (currentBlock.lt(startBlock)) {
+    return new BN(0);
+  }
+
+  const blockHasPast = currentBlock.sub(startBlock);
+  const vested = BN.min(locked, blockHasPast.mul(perBlock));
+  return vested;
+};
 
 function useCall(addressRef: Ref<string>) {
   const { allDapps } = useDapps();
@@ -59,13 +80,13 @@ function useCall(addressRef: Ref<string>) {
 
     const results = await Promise.all([
       api.query.system.account<SystemAccount>(address),
-      api.query.vesting.vesting(address),
-      api.query.system.number(),
+      api.query.vesting.vesting<Option<Vec<PalletVestingVestingInfo>>>(address),
+      api.query.system.number<u32>(),
       api.derive.balances?.all(address),
     ]);
 
     const accountInfo = results[0];
-    const vesting: PalletVestingVestingInfo[] = results[1].unwrapOr(undefined) || [];
+    const vesting = results[1].unwrapOr(undefined)?.toArray() || [];
     const currentBlock = results[2];
     const vestedClaimable = results[3].vestedClaimable;
     const locks: (PalletBalancesBalanceLock | BalanceLockTo212)[] = results[3].lockedBreakdown;
@@ -78,8 +99,8 @@ function useCall(addressRef: Ref<string>) {
       const vested = getVested({
         currentBlock: currentBlock.toBn(),
         startBlock: v.startingBlock.toBn() || new BN(0),
-        perBlock: v.perBlock || new BN(0),
-        locked: v.locked,
+        perBlock: v.perBlock.toBn() || new BN(0),
+        locked: v.locked.toBn(),
       });
       vestedRef.value = vestedRef.value.add(vested);
       remainingVests.value = remainingVests.value.add(v.locked.sub(vested));

src/hooks/usePrice.ts

@@ -1,7 +1,7 @@
 import { useStore } from 'src/store';
-import { computed, ref, watchEffect } from 'vue';
-import { useNetworkInfo } from 'src/hooks';
-import { getUsdBySymbol } from '@astar-network/astar-sdk-core';
+import { computed, ref, watch } from 'vue';
+import { useAccount, useNetworkInfo } from 'src/hooks';
+import { getUsdBySymbol, wait } from '@astar-network/astar-sdk-core';
 
 export function usePrice() {
   const store = useStore();
@@ -12,19 +12,27 @@ export function usePrice() {
   });
 
   const { isMainnet, isAstarZkEvm } = useNetworkInfo();
+  const { currentAccount } = useAccount();
 
-  watchEffect(async () => {
-    const tokenSymbolRef = tokenSymbol.value;
-    if (!tokenSymbolRef) return;
-    try {
-      if (isMainnet.value) {
-        const nativeToken = isAstarZkEvm.value ? 'ETH' : tokenSymbolRef;
-        nativeTokenUsd.value = await getUsdBySymbol(nativeToken);
+  watch(
+    [tokenSymbol, currentAccount, isMainnet],
+    async () => {
+      if (!currentAccount.value || !isMainnet.value) return;
+      // Memo: hacky way to fix the 'invalid BigNumber string' error
+      await wait(500);
+      const tokenSymbolRef = tokenSymbol.value;
+      if (!tokenSymbolRef) return;
+      try {
+        if (isMainnet.value) {
+          const nativeToken = isAstarZkEvm.value ? 'ETH' : tokenSymbolRef;
+          nativeTokenUsd.value = await getUsdBySymbol(nativeToken);
+        }
+      } catch (error: any) {
+        console.error(error.message);
       }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  });
+    },
+    { immediate: false }
+  );
 
   return {
     nativeTokenUsd,

src/hooks/xcm/useTransferRouter.ts

@@ -25,8 +25,7 @@ export const pathEvm = '-evm';
 export type TransferMode = 'local' | 'xcm';
 export const astarNetworks = ['astar', 'shiden', 'shibuya'];
 export const astarNativeTokens = ['sdn', 'astr', 'sby'];
-// e.g.: endpointKey.SHIDEN;
-const disabledXcmChains: endpointKey[] | undefined = [endpointKey.SHIDEN, endpointKey.ASTAR];
+const disabledXcmChains: endpointKey[] = [];
 
 export interface NetworkFromTo {
   from: string;
@@ -376,9 +375,8 @@ export function useTransferRouter() {
       return false;
     }
 
-    const isDisabledXcmChain = Boolean(
-      disabledXcmChains && disabledXcmChains.some((it) => it === currentNetworkIdx.value)
-    );
+    const isDisabledXcmChain = disabledXcmChains.some((it) => it === currentNetworkIdx.value);
+
     const originChain = token.value?.originChain || '';
     return checkIsDisabledToken(originChain) || isDisabledXcmChain;
   });