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;
  });