Display stake/unstake errors (#1122)

* canStake updated

* canUnstake

* Min remaining balance after staking check

* Open a dApp in the new tab

* Cleanup

* Message text fix

* Another message fix

* Show number of unclaimed eras on dApp owner page

* Owner page navigate from fix

* availableToVote fix

src/i18n/en-US/index.ts

@@ -445,7 +445,7 @@ export default {
         'All funds will be transferred because the min. staking amount is {minStakingAmount} {symbol}',
       invalidBalance: 'Insufficient transferrable balance to complete the transaction',
       warningLeaveMinAmount:
-        'Account must hold greater than {amount}{symbol} in transferrable when you stake.',
+        'Account must hold amount greater than {amount}{symbol} in transferrable after you stake.',
     },
     maintenance: {
       switching: 'Switching to',
@@ -704,7 +704,8 @@ export default {
       NoExpiredEntries: 'There are no expired entries to clean up.',
       NoStakingInfo: 'Account has no staking information for the contract',
       NotOperatedDApp: 'dApp is part of dApp staking but is not active anymore.',
-      PeriodEndsNextEra: 'Period ends in the next era.',
+      PeriodEndsNextEra:
+        'Period ends in the next era. It is not possible to stake in the last era of a period.',
       TooManyStakedContracts:
         'There are too many contract stake entries for the account. This can be cleaned up by either unstaking or cleaning expired entries.',
       TooManyUnlockingChunks:
@@ -717,6 +718,7 @@ export default {
       UnstakeFromPastPeriod:
         'Unstaking is rejected since the period in which past stake was active has passed.',
       ZeroAmount: 'Amount must be greater than 0.',
+      LockedAmountBelowThreshold: 'Minimum staking amount is {amount} tokens per dApp.',
     },
     successfullyStaked: 'You successfully staked to {contractAddress}',
     voteTitle: 'Vote!',
@@ -826,6 +828,8 @@ export default {
     startStakingNow: 'Start Staking Now',
     noEntry: 'No entry',
     burn: 'Burn',
+    willUnstakeAll:
+      'The operation will unstake all of your staked tokens because the minimum staking amount is {amount} tokens.',
   },
   bridge: {
     bridge: 'Bridge',

src/staking-v3/components/Dapps.vue

@@ -19,7 +19,7 @@
         }"
       >
         <swiper-slide v-for="(dapp, index) in filteredDapps" :key="index">
-          <div v-if="dapp" class="card--dapp" @click="navigateDappPage(dapp.basic.address)">
+          <a v-if="dapp" class="card--dapp" :href="getDappPageUrl(dapp.basic.address)">
             <div class="card__top">
               <div class="icon--dapp">
                 <img :src="dapp.basic.iconUrl" alt="icon" />
@@ -36,7 +36,7 @@
                 <token-balance-native :balance="dapp.chain.totalStake?.toString() ?? '0'" />
               </div>
             </div>
-          </div>
+          </a>
         </swiper-slide>
       </swiper>
     </div>
@@ -48,8 +48,6 @@ import { defineComponent, computed } from 'vue';
 import { useDappStaking, useDappStakingNavigation, useDapps } from '../hooks';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 import { CombinedDappInfo } from '../logic';
-
-// Import Swiper
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 
@@ -72,7 +70,7 @@ export default defineComponent({
   setup(props) {
     const { registeredDapps } = useDapps();
     const { getDappTier } = useDappStaking();
-    const { navigateDappPage } = useDappStakingNavigation();
+    const { getDappPageUrl } = useDappStakingNavigation();
 
     const filteredDapps = computed<CombinedDappInfo[]>(() => {
       const dapps = registeredDapps.value.filter(
@@ -90,7 +88,7 @@ export default defineComponent({
       return result;
     });
 
-    return { filteredDapps, getDappTier, navigateDappPage };
+    return { filteredDapps, getDappTier, getDappPageUrl };
   },
 });
 </script>

src/staking-v3/components/ErrorPanel.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    errorMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.error {
+  border-radius: 16px;
+  border: 1px solid $warning-red;
+  background: $box-red;
+  padding: 16px;
+  color: $white;
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>

src/staking-v3/components/Owner.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { useNetworkInfo } from 'src/hooks';
-import { computed, defineComponent, watch, ref, onBeforeMount } from 'vue';
+import { computed, defineComponent, watch, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useDapps, useDappStakingNavigation, useDappStaking, RewardsPerPeriod } from '../hooks';
 import { CombinedDappInfo } from '../logic';
@@ -72,17 +72,13 @@ export default defineComponent({
       }
     };
 
-    onBeforeMount(() => {
-      if (!dapp.value) {
-        navigateToHome();
-      }
-    });
-
     watch(
       [dapp],
       () => {
         if (dapp.value) {
           fetchRewards();
+        } else {
+          navigateToHome();
         }
       },
       { immediate: true }

src/staking-v3/components/Vote.vue

@@ -95,6 +95,7 @@
             </div>
           </div>
           <rewards-panel />
+          <error-panel :error-message="errorMessage" />
           <div class="wrapper--button">
             <astar-button
               :disabled="!canConfirm()"
@@ -157,6 +158,7 @@ import { useRoute } from 'vue-router';
 import { CombinedDappInfo, DappStakeInfo } from '../logic';
 import BackToPage from 'src/components/common/BackToPage.vue';
 import RewardsPanel from './RewardsPanel.vue';
+import ErrorPanel from './ErrorPanel.vue';
 import { Path } from 'src/router';
 
 export default defineComponent({
@@ -167,11 +169,19 @@ export default defineComponent({
     ModalSelectDapp,
     BackToPage,
     RewardsPanel,
+    ErrorPanel,
   },
   setup() {
-    const { constants, ledger, totalStake, isVotingPeriod, claimLockAndStake } = useDappStaking();
+    const {
+      constants,
+      ledger,
+      totalStake,
+      isVotingPeriod,
+      stakerInfo,
+      canStake,
+      claimLockAndStake,
+    } = useDappStaking();
     const { registeredDapps, getDapp } = useDapps();
-    const { stakerInfo } = useDappStaking();
     const { goBack } = useDappStakingNavigation();
     const { nativeTokenSymbol } = useNetworkInfo();
     const { currentAccount } = useAccount();
@@ -195,6 +205,7 @@ export default defineComponent({
       const stakeToken = ethers.utils.parseEther(totalStakeAmount.value.toString()).toBigInt();
       return locked.value - stakeToken - totalStake.value;
     });
+    let remainLockedTokenInitial = BigInt(0);
 
     // Needed to display dApp name and logo on the page.
     const dAppToMoveTokensFrom = computed<CombinedDappInfo | undefined>(() =>
@@ -211,7 +222,7 @@ export default defineComponent({
     });
 
     const availableToVote = computed<bigint>(
-      () => BigInt(useableBalance.value) + max(remainLockedToken.value, BigInt(0))
+      () => BigInt(useableBalance.value) + max(remainLockedTokenInitial, BigInt(0))
     );
 
     const amountToUnstake = computed<bigint>(() =>
@@ -220,13 +231,28 @@ export default defineComponent({
         : availableToMove.value
     );
 
+    const stakeInfo = computed<DappStakeInfo[]>(() => {
+      const stakeInfo: DappStakeInfo[] = [];
+      selectedDapps.value.forEach((dapp) => {
+        if (dapp.amount > 0) {
+          stakeInfo.push({
+            id: dapp.id,
+            address: dapp.address,
+            amount: dapp.amount,
+          });
+        }
+      });
+
+      return stakeInfo;
+    });
+
+    const errorMessage = ref<string>('');
+
     const canConfirm = (): boolean => {
-      // TODO use canStake from useDappStaking after multiple stakes will be supported.
-      return (
-        totalStakeAmount.value > 0 &&
-        availableToVote.value >
-          ethers.utils.parseEther(totalStakeAmount.value.toString()).toBigInt()
-      );
+      const [enabled, message] = canStake(stakeInfo.value, availableToVote.value);
+      errorMessage.value = message;
+
+      return enabled && totalStakeAmount.value > 0;
     };
 
     const handleDappsSelected = (dapps: Dapp[]): void => {
@@ -248,22 +274,11 @@ export default defineComponent({
     const canAddDapp = computed<boolean>((): boolean => selectedDappAddress.value === '');
 
     const confirm = async (): Promise<void> => {
-      const stakeInfo: DappStakeInfo[] = [];
-      selectedDapps.value.forEach((dapp) => {
-        if (dapp.amount > 0) {
-          stakeInfo.push({
-            id: dapp.id,
-            address: dapp.address,
-            amount: dapp.amount,
-          });
-        }
-      });
-
       // If additional funds locking is required remainLockedToken value will be negative.
       // In case of nomination transfer no additional funds locking is required.
       const tokensToLock = remainLockedToken.value + availableToMove.value;
       await claimLockAndStake(
-        stakeInfo,
+        stakeInfo.value,
         tokensToLock < 0 ? tokensToLock * BigInt(-1) : BigInt(0),
         dAppToMoveFromAddress.value,
         amountToUnstake.value
@@ -299,6 +314,16 @@ export default defineComponent({
       }
     );
 
+    watch(
+      [remainLockedToken],
+      () => {
+        if (remainLockedTokenInitial === BigInt(0)) {
+          remainLockedTokenInitial = remainLockedToken.value;
+        }
+      },
+      { immediate: true }
+    );
+
     return {
       constants,
       nativeTokenSymbol,
@@ -322,6 +347,7 @@ export default defineComponent({
       isVotingPeriod,
       dAppToMoveTokensFrom,
       availableToMove,
+      errorMessage,
     };
   },
 });

src/staking-v3/components/YourRewards.vue

@@ -7,7 +7,9 @@
     <div class="row--claim-temporary">
       <div>
         <span class="text--lg">Unclaimed Eras: </span>
-        <span class="text--lg">--</span>
+        <span class="text--lg">
+          <b>{{ unclaimedEras }}</b>
+        </span>
       </div>
       <div>
         <span class="text--lg">Claimable Amount: </span>
@@ -138,7 +140,7 @@
 <script lang="ts">
 import { useNetworkInfo } from 'src/hooks';
 import { RewardsPerPeriod, useDappStaking } from '../hooks';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, computed } from 'vue';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 
 export default defineComponent({
@@ -157,15 +159,19 @@ export default defineComponent({
       required: true,
     },
   },
-  setup() {
+  setup(props) {
     const { nativeTokenSymbol } = useNetworkInfo();
     const { rewardExpiresInNextPeriod } = useDappStaking();
 
     const formatPeriod = (period: number): string => {
       return period.toString().padStart(3, '0');
     };
 
-    return { nativeTokenSymbol, formatPeriod, rewardExpiresInNextPeriod };
+    const unclaimedEras = computed<number>(() =>
+      props.rewardsPerPeriod.reduce((acc, cur) => acc + cur.erasToReward, 0)
+    );
+
+    return { nativeTokenSymbol, unclaimedEras, formatPeriod, rewardExpiresInNextPeriod };
   },
 });
 </script>

src/staking-v3/components/dapp/DappBackground.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper--dapp-background">
-    <img class="image--dapp-icon" :src="dapp.basic.iconUrl" :alt="dapp.basic.name" />
+    <img class="image--dapp-icon" :src="dapp?.basic.iconUrl" :alt="dapp?.basic.name" />
   </div>
 </template>
 <script lang="ts">

src/staking-v3/components/dapp/DappV3.vue

@@ -43,7 +43,7 @@ import { Path } from 'src/router';
 import { useStore } from 'src/store';
 import { container } from 'src/v2/common';
 import { Symbols } from 'src/v2/symbols';
-import { computed, defineComponent, watch, onBeforeMount, ref, onMounted } from 'vue';
+import { computed, defineComponent, watch, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useDapps, useDappStakingNavigation } from '../../hooks';
 import { CombinedDappInfo, IDappStakingRepository } from 'src/staking-v3/logic';
@@ -100,17 +100,13 @@ export default defineComponent({
       }
     };
 
-    onBeforeMount(() => {
-      if (!dapp.value) {
-        navigateToHome();
-      }
-    });
-
     watch(
       [dapp, registeredDapps],
       () => {
-        if (dapp != undefined) {
+        if (dapp.value != undefined) {
           getDappFromApi();
+        } else if (registeredDapps.value.length > 0 && dapp.value === undefined) {
+          navigateToHome();
         }
       },
       { immediate: true }