feat: dApp staking via EVM wallets (#857)

* feat: stake with evm wallets * feat: updated compound function * feat: created EvmDappStakingService * fix: updated useCompoundRewards * feat: added withdraw function to the service * fix: resolved console errors * refactor: senderSs58Account * feat: added useClaimAll for SS58 * wip: multicall * wip: BatchRequest * feat: display Transaction Speed for EVM wallets * fix: dApp address in getIndividualClaimTxs * feat: claim rewards * refactor: clean up * fix: enables claiming rewards on Shibuya only * refactor: clean up * fix: typo * refactor: added dapp staking service factory * fix: updated setEvmGasCost * feat: added a toast to remind users claiming rewards before staking * feat: added failureMessage params in sendEvmTransaction function * fix: changed chopstick wss endpoint for Acala * fix: remove paras ad
AstarNetwork · Sep 7, 2023 · dbbd80e · dbbd80e · 4everland · Sep 7, 2023
1 parent c1f74f7
commit dbbd80e
Show file tree

Hide file tree

Showing 44 changed files with 1,003 additions and 342 deletions.
diff --git a/src/assets/img/paras_logo.svg b/src/assets/img/paras_logo.svg
diff --git a/src/components/assets/transfer/LocalTransfer.vue b/src/components/assets/transfer/LocalTransfer.vue
@@ -233,6 +233,7 @@ export default defineComponent({
       selectedGas,
       evmGasCost,
       isTransferNativeToken,
+      isEnableSpeedConfiguration,
       setSelectedGas,
       inputHandler,
       setSelectedTip,
@@ -245,14 +246,6 @@ export default defineComponent({
     );
 
     const store = useStore();
-    const isEnableSpeedConfiguration = computed<boolean>(() => {
-      const currentWallet = store.getters['general/currentWallet'];
-      return (
-        currentWallet !== SupportWallet.TalismanEvm &&
-        currentWallet !== SupportWallet.SubWalletEvm &&
-        currentWallet !== SupportWallet.OneKeyEvm
-      );
-    });
 
     const transfer = async (): Promise<void> => {
       await transferAsset({

diff --git a/src/components/dapp-staking/StakingTop.vue b/src/components/dapp-staking/StakingTop.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { useMeta } from 'quasar';
-import { useDispatchGetDapps, usePageReady } from 'src/hooks';
+import { useDispatchGetDapps, useNetworkInfo, usePageReady } from 'src/hooks';
 import { useStore } from 'src/store';
 import { computed, defineComponent, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -69,19 +69,6 @@ export default defineComponent({
       store.commit('general/setLoading', isLoad);
     };
 
-    watch(
-      [isH160],
-      () => {
-        if (isH160.value) {
-          store.dispatch('general/showAlertMsg', {
-            msg: t('dappStaking.error.onlySupportsSubstrate'),
-            alertType: 'error',
-          });
-        }
-      },
-      { immediate: true }
-    );
-
     watch(
       [dapps],
       () => {

diff --git a/src/components/dapp-staking/dapp/Dapp.vue b/src/components/dapp-staking/dapp/Dapp.vue
@@ -12,7 +12,7 @@
     <dapp-stats-charts :dapp="dapp" />
     <div class="bottom--links">
       <router-link :to="buildStakePageLink(dapp.dapp.address)">
-        <astar-irregular-button :disabled="isH160" :height="28" class="btn--stake-switch">
+        <astar-irregular-button :height="28" class="btn--stake-switch">
           {{ $t('dappStaking.dappPage.stakeOrSwitchTo') }} {{ dapp.dapp.name }}
         </astar-irregular-button>
       </router-link>

diff --git a/src/components/dapp-staking/dapp/DappAvatar.vue b/src/components/dapp-staking/dapp/DappAvatar.vue
@@ -14,11 +14,7 @@
           </div>
         </div>
         <div class="row--stake">
-          <astar-button
-            :disabled="isH160"
-            class="btn-size--stake"
-            @click="goStakeLink(dapp.dapp.address)"
-          >
+          <astar-button class="btn-size--stake" @click="goStakeLink(dapp.dapp.address)">
             <span class="text--btn-stake">
               {{ $t('dappStaking.stake') }}
             </span>
@@ -59,7 +55,6 @@ export default defineComponent({
     const router = useRouter();
     const { currentAccount } = useAccount();
     const store = useStore();
-    const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
     const twitterUrl = `https://twitter.com/intent/tweet?text=Nominate and Stake with us on @AstarNetwork!&hashtags=dAppStaking,Build2Earn&url=${window.location.href}`;
 
     const goEditLink = (): void => {
@@ -80,7 +75,6 @@ export default defineComponent({
     return {
       isDisabledEditButton,
       goEditLink,
-      isH160,
       goStakeLink,
       twitterUrl,
     };

diff --git a/src/components/dapp-staking/my-staking/DynamicAdsArea.vue b/src/components/dapp-staking/my-staking/DynamicAdsArea.vue
@@ -91,8 +91,6 @@ export default defineComponent({
           return require('/src/assets/img/ic_astar_farm.svg');
         }
       } else if (index === 1) {
-        return require('/src/assets/img/paras_logo.svg');
-      } else if (index === 2) {
         return require('/src/assets/img/ic_algem_staking.svg');
       } else {
         return img;

diff --git a/src/components/dapp-staking/my-staking/MyRewards.vue b/src/components/dapp-staking/my-staking/MyRewards.vue
@@ -37,8 +37,9 @@
             :height="24"
             :disabled="!canClaim || !canClaimWithoutError"
             @click="claimAll"
-            >{{ $t('myReward.claim') }}</astar-button
           >
+            {{ $t('myReward.claim') }}
+          </astar-button>
         </div>
       </div>
       <div v-else class="card">
@@ -93,8 +94,9 @@
             :height="24"
             :disabled="!canClaim || !canClaimWithoutError"
             @click="claimAll"
-            >{{ $t('myReward.claim') }}</astar-button
           >
+            {{ $t('myReward.claim') }}
+          </astar-button>
         </div>
       </div>
       <div class="card">
@@ -111,12 +113,7 @@
           <div class="value">
             {{ isCompounding ? $t('dappStaking.on') : $t('dappStaking.off') }}
           </div>
-          <astar-button
-            :disabled="isH160"
-            :width="80"
-            :height="24"
-            @click="changeDestinationForRestaking"
-          >
+          <astar-button :width="80" :height="24" @click="changeDestinationForRestaking">
             {{ isCompounding ? $t('dappStaking.turnOff') : $t('dappStaking.turnOn') }}
           </astar-button>
         </div>
@@ -144,25 +141,26 @@
   </div>
 </template>
 <script lang="ts">
+import { estimatePendingRewards } from '@astar-network/astar-sdk-core';
+import { $api } from 'src/boot/api';
 import TokenBalance from 'src/components/common/TokenBalance.vue';
+import { endpointKey } from 'src/config/chainEndpoints';
 import { useAccount, useClaimAll, useNetworkInfo, useStakerInfo } from 'src/hooks';
 import { useClaimedReward } from 'src/hooks/dapps-staking/useClaimedReward';
 import { RewardDestination } from 'src/hooks/dapps-staking/useCompoundRewards';
-import { endpointKey } from 'src/config/chainEndpoints';
-import { defineComponent, computed, ref, watch } from 'vue';
 import { useStore } from 'src/store';
-import { $api } from 'src/boot/api';
-import { estimatePendingRewards } from '@astar-network/astar-sdk-core';
+import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 
 export default defineComponent({
   components: {
     TokenBalance,
   },
   setup() {
-    const { nativeTokenSymbol } = useNetworkInfo();
+    const { nativeTokenSymbol, currentNetworkIdx } = useNetworkInfo();
     const { claimAll, canClaim, amountOfEras, isLoading, canClaimWithoutError, isDappDeveloper } =
       useClaimAll();
     const { totalStaked, isLoadingTotalStaked } = useStakerInfo();
+    const store = useStore();
 
     const pendingRewards = ref<number>(0);
     const isLoadingPendingRewards = ref<boolean>(false);
@@ -175,11 +173,9 @@ export default defineComponent({
     };
 
     const { claimed, isLoadingClaimed, isCompounding, setRewardDestination } = useClaimedReward();
-    const { currentAccount } = useAccount();
-    const { currentNetworkIdx } = useNetworkInfo();
+    const { currentAccount, senderSs58Account } = useAccount();
+
     const isShiden = computed(() => currentNetworkIdx.value === endpointKey.SHIDEN);
-    const store = useStore();
-    const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
     const goToSubscan = () => {
       let rootName = 'astar';
       if (isShiden.value) {
@@ -197,13 +193,13 @@ export default defineComponent({
       isLoadingPendingRewards.value = true;
       const { stakerPendingRewards } = await estimatePendingRewards({
         api: $api!,
-        walletAddress: currentAccount.value,
+        walletAddress: senderSs58Account.value,
       });
       pendingRewards.value = stakerPendingRewards;
       isLoadingPendingRewards.value = false;
     };
 
-    watch([currentAccount, amountOfEras], setPendingRewards, { immediate: false });
+    watch([senderSs58Account, amountOfEras], setPendingRewards, { immediate: false });
 
     return {
       isLoading,
@@ -219,7 +215,6 @@ export default defineComponent({
       nativeTokenSymbol,
       isLoadingTotalStaked,
       goToSubscan,
-      isH160,
       pendingRewards,
       isLoadingPendingRewards,
       isDappDeveloper,

diff --git a/src/components/dapp-staking/my-staking/TopMetric.vue b/src/components/dapp-staking/my-staking/TopMetric.vue
@@ -95,8 +95,10 @@
   </div>
 </template>
 <script lang="ts">
+import { formatNumber } from '@astar-network/astar-sdk-core';
 import { BN } from '@polkadot/util';
 import { $api } from 'src/boot/api';
+import PieChart from 'src/components/common/PieChart.vue';
 import { endpointKey } from 'src/config/chainEndpoints';
 import {
   AccountLedger,
@@ -107,20 +109,18 @@ import {
   useCurrentEra,
   useNetworkInfo,
 } from 'src/hooks';
-import { formatNumber } from '@astar-network/astar-sdk-core';
 import { useStore } from 'src/store';
 import { TvlModel } from 'src/v2/models';
 import { DappCombinedInfo, SmartContractState } from 'src/v2/models/DappsStaking';
 import { computed, defineComponent, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import PieChart from 'src/components/common/PieChart.vue';
 
 export default defineComponent({
   components: { PieChart },
   setup() {
     const store = useStore();
     const { stakerApr, stakerApy } = useAprFromApi();
-    const { currentAccount } = useAccount();
+    const { senderSs58Account } = useAccount();
     const dappsCount = computed<number>(
       () =>
         store.getters['dapps/getRegisteredDapps']().filter(
@@ -150,7 +150,9 @@ export default defineComponent({
 
     const checkIsCompoundingAccount = async (): Promise<void> => {
       try {
-        const ledger = await $api?.query.dappsStaking.ledger<AccountLedger>(currentAccount.value);
+        const ledger = await $api?.query.dappsStaking.ledger<AccountLedger>(
+          senderSs58Account.value
+        );
         const isStaker = ledger && !ledger.locked.eq(new BN(0));
         const isCompounding = ledger?.toJSON().rewardDestination === RewardDestination.StakeBalance;
         isApr.value = isStaker ? !isCompounding : true;
@@ -160,9 +162,9 @@ export default defineComponent({
     };
 
     watch(
-      [currentAccount],
+      [senderSs58Account],
       async () => {
-        if (!currentAccount.value) return;
+        if (!senderSs58Account.value) return;
         await checkIsCompoundingAccount();
       },
       { immediate: false }

diff --git a/src/components/dapp-staking/my-staking/components/CardList.vue b/src/components/dapp-staking/my-staking/components/CardList.vue
@@ -41,7 +41,6 @@
         </div>
         <astar-button
           v-if="index === hoverIndex || width < widthCardLineUp"
-          :disabled="isH160"
           class="button--stake"
           :width="274"
           :height="24"
@@ -84,7 +83,6 @@ export default defineComponent({
     const hoverIndex = ref<number>(-1);
     const isToStakePage = ref<boolean>(false);
     const { nativeTokenSymbol } = useNetworkInfo();
-    const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
 
     const goStakePageLink = (address: string | undefined): void => {
       isToStakePage.value = true;
@@ -108,7 +106,6 @@ export default defineComponent({
       goDappPageLink,
       nativeTokenSymbol,
       widthCardLineUp,
-      isH160,
     };
   },
 });
parameters	Value
IC	b5oiz-tyaaa-aaaag-abp6a-cai
Assigned domain	https://b5oiz-tyaaa-aaaag-abp6a-cai.ic0.app/
Custom domain	https://decentralized.portal.astar.network