Polkasafe lib upgrade

package.json

@@ -25,6 +25,7 @@
     "playwright:ci": "node ./tests/chopsticks/start-chopsticks.js"
   },
   "dependencies": {
+    "@apollo/client": "^3.13.9",
     "@astar-network/astar-sdk-core": "^0.2.8",
     "@astar-network/astar-ui": "^0.0.142",
     "@astar-network/metamask-astar-adapter": "^0.5.4",
@@ -41,14 +42,12 @@
     "@polkadot/ui-keyring": "3.15.2",
     "@polkadot/util": "13.5.3",
     "@polkadot/util-crypto": "13.5.3",
-    "@polkadot/vue-identicon": "3.15.2",
     "@quasar/app-webpack": "^3.11.2",
     "@quasar/extras": "^1.16.7",
     "@vue/apollo-composable": "^4.0.0-beta.4",
     "@walletconnect/ethereum-provider": "^2.12.2",
     "@walletconnect/modal": "^2.6.2",
     "animate.css": "^4.1.1",
-    "apr-tools": "^0.1.3",
     "axios": "^0.24.0",
     "bn.js": "5.1.0",
     "connect-history-api-fallback": "^1.6.0",
@@ -58,6 +57,7 @@
     "ethereumjs-util": "^7.1.3",
     "ethers": "^5.5.4",
     "express": "^4.17.1",
+    "graphql": "^16.11.0",
     "highcharts": "^10.0.0",
     "highcharts-vue": "^1.4.0",
     "inversify": "^6.0.1",
@@ -67,9 +67,8 @@
     "luxon": "^2.5.2",
     "marked": "^4.0.15",
     "path": "^0.12.7",
-    "polkasafe": "^1.4.3",
+    "polkasafe": "^1.4.4",
     "quasar": "^2.12.7",
-    "query-string": "^7.1.0",
     "reflect-metadata": "^0.1.13",
     "secp256k1": "^4.0.2",
     "serve-static": "^1.14.1",
@@ -83,9 +82,7 @@
     "vue-i18n": "^9.2.2",
     "vue-js-progress": "^1.0.2",
     "vue-router": "^4.0.0",
-    "vue3-autocounter": "^1.0.6",
     "vue3-click-away": "^1.2.4",
-    "vue3-dropzone": "^0.0.7",
     "vue3-jazzicon": "^0.1.2",
     "vue3-recaptcha2": "^1.7.0",
     "vuex": "^4.0.1",
@@ -97,7 +94,6 @@
     "@playwright/test": "^1.31.0",
     "@polkadot/ts": "^0.4.22",
     "@quasar/quasar-app-extension-apollo": "^2.1.0-beta.1",
-    "@quasar/quasar-app-extension-qmarkdown": "^2.0.0-beta.10",
     "@quasar/quasar-app-extension-testing": "^2.2.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-beta.7",
     "@tailwindcss/custom-forms": "^0.2.1",
@@ -127,13 +123,9 @@
     "node-polyfill-webpack-plugin": "^1.1.4",
     "prettier": "^2.4.1",
     "push-dir": "^0.4.1",
-    "sass-loader": "12.3.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3",
     "tailwindcss-theme-variants": "^2.0.0-alpha.2"
   },
-  "resolutions": {
-    "@polkadot/types": "12.3.1"
-  },
   "browserslist": [
     "last 10 Chrome versions",
     "last 10 Firefox versions",

quasar.extensions.json

@@ -1,8 +1,4 @@
 {
-  "@quasar/qmarkdown": {
-    "import_md": false,
-    "import_vmd": false
-  },
   "@quasar/testing": {
     "harnesses": [
       "unit-jest@alpha"

src/components/assets/YourProject.vue

@@ -44,20 +44,19 @@ export default defineComponent({
   setup(props) {
     const { navigateOwnerPage } = useDappStakingNavigation();
     const { rewards, getDappRewards } = useDappStaking();
-    const dAppRewardsMap = ref<{ dapp: string, rewards: bigint }[]>([]);
+    const dAppRewardsMap = ref<{ dapp: string; rewards: bigint }[]>([]);
 
     const checkIsRewards = (address: string): boolean => {
       const dapp = dAppRewardsMap.value.find((it) => it.dapp === address);
       if (dapp) {
         return dapp.rewards > 0;
       }
       return false;
-    }
+    };
 
     const setDappRewardsMap = async (): Promise<void> => {
-      const dAppRewardsArray: { dapp: string, rewards: bigint }[] = [];
-      if (props.ownDapps.length === 0) return
-
+      const dAppRewardsArray: { dapp: string; rewards: bigint }[] = [];
+      if (props.ownDapps.length === 0) return;
 
       for await (const dapp of props.ownDapps) {
         const ownedContractAddress = dapp.chain.address;
@@ -67,7 +66,7 @@ export default defineComponent({
         }
       }
       dAppRewardsMap.value = dAppRewardsArray;
-    }
+    };
 
     watch([rewards], setDappRewardsMap, { immediate: false });
 

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

@@ -1,14 +1,14 @@
 @import 'src/css/quasar.variables.scss';
 
 .row {
+  display: flex;
+  align-items: center;
+  padding: 16px;
   &:hover {
     @media (min-width: $sm) {
       background-color: $gray-1;
     }
   }
-  display: flex;
-  align-items: center;
-  padding: 16px;
   @media (min-width: $sm) {
     padding: 22px 16px;
   }

src/components/assets/styles/your-project.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'src/css/quasar.variables.scss';
 
 .wrapper--your-project {
@@ -103,7 +104,7 @@
     background-color: $navy-3;
     color: $gray-1;
     &:hover {
-      background-color: lighten($navy-3, 5%);
+      background-color: color.adjust($navy-3, $lightness: 5%);
     }
   }
 

src/components/bridge/styles/bridge-selection.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'src/css/quasar.variables.scss';
 
 .wrapper--bridge-selection {
@@ -175,7 +176,7 @@
   a {
     color: $astar-blue;
     &:hover {
-      color: lighten($astar-blue, 10%);
+      color: color.adjust($astar-blue, $lightness: 10%);
     }
   }
 }
@@ -187,7 +188,7 @@
   a {
     color: $astar-blue;
     &:hover {
-      color: lighten($astar-blue-dark, 10%);
+      color: color.adjust($astar-blue-dark, $lightness: 10%);
     }
   }
 }
@@ -220,7 +221,7 @@
     a {
       color: $astar-blue-dark;
       &:hover {
-        color: lighten($astar-blue-dark, 10%);
+        color: color.adjust($astar-blue-dark, $lightness: 10%);
       }
     }
   }

src/config/web3/utils/index.ts

@@ -41,7 +41,7 @@ export const buildErc20Contract = ({
   if (!web3) {
     throw Error(`Cannot create web3 instance with network id ${srcChainId}`);
   }
-  return new web3.eth.Contract(ABI as AbiItem[], tokenAddress);
+  return new web3.eth.Contract(ABI as any, tokenAddress);
 };
 
 export const setupNetwork = async ({
@@ -203,7 +203,7 @@ export const getTokenBal = async ({
       if (!isTokenExist) {
         return '0';
       }
-      const contract = new web3.eth.Contract(ABI as AbiItem[], tokenAddress);
+      const contract = new web3.eth.Contract(ABI as any, tokenAddress);
       const decimals = await contract.methods.decimals().call();
       const balance = (await contract.methods.balanceOf(address).call()) ?? '0';
       const formattedBalance = ethers.utils.formatUnits(balance, decimals).toString();
@@ -266,7 +266,7 @@ export const fetchErc20TokenInfo = async ({
   srcChainId: number;
 }): Promise<Erc20Token | null> => {
   try {
-    const contract = new web3.eth.Contract(ABI as AbiItem[], address);
+    const contract = new web3.eth.Contract(ABI as any, address);
     const [decimal, name, symbol] = await Promise.all([
       contract.methods.decimals().call(),
       contract.methods.name().call(),

src/css/utils.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @function rem($px) {
-  @return ($px / 16) * 1rem;
+  @return math.div($px, 16) * 1rem;
 }

src/hooks/bridge/useImportToken.ts

@@ -43,7 +43,7 @@ export const useImportToken = ({
         return;
       }
 
-      const contract = new fromChainWeb3.eth.Contract(ABI as AbiItem[], tokenAddress);
+      const contract = new fromChainWeb3.eth.Contract(ABI as any, tokenAddress);
 
       const [decimal, name, symbol, userBalance] = await Promise.all([
         contract.methods.decimals().call(),
@@ -102,7 +102,7 @@ export const useImportToken = ({
     try {
       const fromChainWeb3 = web3Provider.value;
       const tokenAddress = importTokenAddress.value;
-      const contract = new fromChainWeb3.eth.Contract(ABI as AbiItem[], tokenAddress);
+      const contract = new fromChainWeb3.eth.Contract(ABI as any, tokenAddress);
 
       const [decimal, name, symbol] = await Promise.all([
         contract.methods.decimals().call(),

src/hooks/bridge/useL1History.ts

@@ -122,7 +122,7 @@ export const useL1History = () => {
             let decimal = 18;
 
             if (it.orig_addr !== astarNativeTokenErcAddr) {
-              const contract = new originNetWeb3.eth.Contract(ERC20_ABI as AbiItem[], it.orig_addr);
+              const contract = new originNetWeb3.eth.Contract(ERC20_ABI as any, it.orig_addr);
               const data = await Promise.all([
                 contract.methods.name().call(),
                 contract.methods.symbol().call(),

src/hooks/wallet/useAccountUnification.ts

@@ -144,7 +144,7 @@ export const useAccountUnification = () => {
         xcmAssets.value.assets.map(async (asset: Asset) => {
           try {
             if (!asset.mappedERC20Addr || !asset.metadata.symbol) return null;
-            const contract = new web3Provider.eth.Contract(ABI as AbiItem[], asset.mappedERC20Addr);
+            const contract = new web3Provider.eth.Contract(ABI as any, asset.mappedERC20Addr);
             const balance = (await contract.methods.balanceOf(from).call()) ?? ('0' as string);
             const evmData = {
               assetId: asset.id,

src/modules/evm/index.ts

@@ -1,5 +1,5 @@
 import Web3 from 'web3';
-import { TransactionConfig } from 'web3-eth';
+import { TransactionConfig } from 'web3-core';
 
 export const getRawEvmTransaction = async (
   web3: Web3,

src/modules/zk-evm-bridge/l1-bridge/utils.ts

@@ -35,7 +35,7 @@ export const getNetworkId = async (chainName: EthBridgeNetworkName): Promise<num
   const contractAddress = EthBridgeContract[chainName];
 
   const abi = ZK_EVM_AGGREGATED_BRIDGE_ABI;
-  const contract = new web3.eth.Contract(abi as AbiItem[], contractAddress);
+  const contract = new web3.eth.Contract(abi as any, contractAddress);
   return Number(await contract.methods.networkID().call());
 };
 
@@ -116,10 +116,7 @@ export const getBridgedTokenAddress = async ({
   const toChainContractAddress = EthBridgeContract[fromChainName];
 
   const abi = ZK_EVM_AGGREGATED_BRIDGE_ABI;
-  const fromChainContract = new fromChainWeb3.eth.Contract(
-    abi as AbiItem[],
-    toChainContractAddress
-  );
+  const fromChainContract = new fromChainWeb3.eth.Contract(abi as any, toChainContractAddress);
 
   const networkId = await getNetworkId(fromChainName);
 

src/staking-v3/components/ClaimAndRestakeButton.vue

@@ -58,20 +58,19 @@ export default defineComponent({
 
     // Staker info containing registered dApps only.
     // Rewards can't be re-staked for unregistered dApps.
-    const stakerInfoRegisteredDapps =
-      computed<Map<string, SingularStakingInfo>>(() => {
-        const result = new Map<string, SingularStakingInfo>();
+    const stakerInfoRegisteredDapps = computed<Map<string, SingularStakingInfo>>(() => {
+      const result = new Map<string, SingularStakingInfo>();
 
-        stakerInfo.value.forEach((value, key) => {
-          const dapp = getDapp(key);
-          if (dapp) {
-            result.set(key, value);
-          }
-        });
-
-        return result;
+      stakerInfo.value.forEach((value, key) => {
+        const dapp = getDapp(key);
+        if (dapp) {
+          result.set(key, value);
+        }
       });
 
+      return result;
+    });
+
     const amountToClaim = computed<bigint>(() => {
       if (props.claimType === ClaimType.Staker) {
         return rewards.value.staker.amount;

src/staking-v3/components/ModalOnboarding.vue

@@ -129,6 +129,8 @@ export default defineComponent({
 </style>
 
 <style lang="scss">
+@use 'sass:color';
+@import 'src/css/quasar.variables.scss';
 .body--dark {
   .wrapper--modal-onboarding {
     .modal-content {
@@ -151,7 +153,7 @@ export default defineComponent({
     z-index: 9999;
     transition: all 0.2s ease;
     &:hover {
-      background-color: lighten($astar-blue, 10%);
+      background-color: color.adjust($astar-blue, $lightness: 10%);
     }
     &::after {
       font-size: 12px;

src/staking-v3/components/ToggleButtons.vue

@@ -29,7 +29,7 @@ export default defineComponent({
     const handleButtonSelected = (index: number) => {
       selectedButtonIndex.value = index;
       emit('buttonSelected', index);
-    }
+    };
 
     return { selectedButtonIndex, handleButtonSelected };
   },

src/staking-v3/components/dapp/styles/dapp-statistics.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'src/css/quasar.variables.scss';
 
 .row--data {
@@ -74,6 +75,6 @@
   color: $astar-blue-dark;
   text-transform: lowercase;
   &:hover {
-    color: lighten($astar-blue-dark, 15%);
+    color: color.adjust($astar-blue-dark, $lightness: 15%);
   }
 }

src/staking-v3/components/data/DataCard.vue

@@ -57,6 +57,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
+@use 'sass:color';
 @import 'src/css/quasar.variables.scss';
 
 .wrapper--data-card {
@@ -129,7 +130,7 @@ export default defineComponent({
 .text--link {
   color: $astar-blue-dark;
   &:hover {
-    color: lighten($astar-blue-dark, 15%);
+    color: color.adjust($astar-blue-dark, $lightness: 15%);
   }
 }
 </style>