Feat/staking v3 improvements4 (#1089)

* Unstake from unregistered * usePeriod hook * era lengths * Owner page logic * Owner page fixes * Fixes on your projects and dapp select modal * Successful vote message * Leaderboard voting * Group dApps by category * Cleanup expired entries * dApp page logic * Minor Dapps component styling * Select up to max number of staked contracts for voting * Navigate to staking home if a dApp doesn't exists
AstarNetwork · Dec 14, 2023 · ade332b · ade332b
1 parent 3608a6a
commit ade332b
Show file tree

Hide file tree

Showing 22 changed files with 338 additions and 177 deletions.
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -741,6 +741,7 @@ export default {
     stakeOn: 'Stake on {name}',
     tier: 'Tier',
     tierLeaderboard: 'Tier Leaderboard',
+    leaderboard: 'Leaderboard',
     myStaking: 'My Staking',
     myDapps: 'My dApps',
     unbonding: 'Unbonding',

diff --git a/src/staking-v3/components/Dapps.vue b/src/staking-v3/components/Dapps.vue
@@ -1,23 +1,26 @@
 <template>
-  <div class="wrapper--dapps">
-    <div v-for="(dapp, index) in registeredDapps" :key="index">
-      <div v-if="dapp" class="card--dapp" @click="navigateDappPage(dapp.basic.address)">
-        <div class="card__top">
-          <div>
-            <img :src="dapp.basic.iconUrl" alt="icon" class="icon--dapp" />
+  <div v-if="dapps.length > 0">
+    <div class="title">{{ category }}</div>
+    <div class="wrapper--dapps">
+      <div v-for="(dapp, index) in dapps" :key="index">
+        <div v-if="dapp" class="card--dapp" @click="navigateDappPage(dapp.basic.address)">
+          <div class="card__top">
+            <div>
+              <img :src="dapp.basic.iconUrl" alt="icon" class="icon--dapp" />
+            </div>
+            <div>
+              <span class="text--title">{{ dapp.basic.name }}</span>
+            </div>
           </div>
-          <div>
-            <span class="text--title">{{ dapp.basic.name }}</span>
-          </div>
-        </div>
-        <div class="card__bottom">
-          <div>
-            <span class="text--label">T{{ getDappTier(dapp.chain.id) ?? '-' }}</span>
-          </div>
-          <div>
-            <span class="text--label">
-              <token-balance-native :balance="dapp.chain.totalStake?.toString() ?? '0'" />
-            </span>
+          <div class="card__bottom">
+            <div>
+              <span class="text--label">T{{ getDappTier(dapp.chain.id) ?? '-' }}</span>
+            </div>
+            <div>
+              <span class="text--label">
+                <token-balance-native :balance="dapp.chain.totalStake?.toString() ?? '0'" />
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -26,20 +29,35 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { useDappStaking, useDappStakingNavigation, useDapps } from '../hooks';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
+import { CombinedDappInfo } from '../logic';
 
 export default defineComponent({
   components: {
     TokenBalanceNative,
   },
-  setup() {
+  props: {
+    category: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
     const { registeredDapps } = useDapps();
     const { getDappTier } = useDappStaking();
     const { navigateDappPage } = useDappStakingNavigation();
 
-    return { registeredDapps, getDappTier, navigateDappPage };
+    const dapps = computed<CombinedDappInfo[]>(() =>
+      registeredDapps.value.filter(
+        (x) =>
+          x.basic.mainCategory?.toLowerCase() === props.category.toLowerCase() ||
+          (x.basic.mainCategory === undefined && props.category.toLowerCase() === 'others')
+      )
+    );
+
+    return { dapps, getDappTier, navigateDappPage };
   },
 });
 </script>

diff --git a/src/staking-v3/components/DiscoverV3.vue b/src/staking-v3/components/DiscoverV3.vue
@@ -5,13 +5,20 @@
     <feature-dapp />
     <staking />
     <leaderboard />
+    <leaderboard-vote />
     <!-- <ad /> -->
     <dynamic-ads-area />
     <toggle-buttons
       :captions="[$t('stakingV3.ourDapps'), $t('stakingV3.ourData')]"
       @button-selected="toggleDapps"
     />
-    <dapps v-if="displayIndex === 0" />
+    <div v-if="displayIndex === 0" class="dapps">
+      <dapps category="DeFi" />
+      <dapps category="NFT" />
+      <dapps category="Tooling" />
+      <dapps category="Utility" />
+      <dapps category="Others" />
+    </div>
     <data-list v-if="displayIndex === 1" />
   </div>
 </template>
@@ -22,6 +29,7 @@ import FeatureDapp from './FeatureDapp.vue';
 // import Ad from './Ad.vue';
 import Dapps from './Dapps.vue';
 import Leaderboard from './leaderboard/Leaderboard.vue';
+import LeaderboardVote from './leaderboard/LeaderboardVote.vue';
 import Staking from './my-staking/Staking.vue';
 import DataList from './data/DataList.vue';
 import DynamicAdsArea from './DynamicAdsArea.vue';
@@ -33,6 +41,7 @@ export default defineComponent({
     // Ad,
     Dapps,
     Leaderboard,
+    LeaderboardVote,
     Staking,
     DataList,
     DynamicAdsArea,

diff --git a/src/staking-v3/components/dapp-selector/ModalSelectDapp.vue b/src/staking-v3/components/dapp-selector/ModalSelectDapp.vue
@@ -44,6 +44,7 @@ import { fadeDuration } from '@astar-network/astar-ui';
 import ModalWrapper from 'src/components/common/ModalWrapper.vue';
 import { wait } from 'src/v2/common';
 import { Dapp } from './Model';
+import { useDappStaking } from 'src/staking-v3/hooks';
 
 export default defineComponent({
   components: {
@@ -69,7 +70,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const maxDappsToSelect = 10;
+    const { constants } = useDappStaking();
+    const maxDappsToSelect = computed<number>(
+      () => constants.value?.maxNumberOfStakedContracts ?? 0
+    );
     const isClosingModal = ref<boolean>(false);
     const selectedDapps = ref<Dapp[]>([]);
     const searchTerm = ref<string>('');
@@ -92,7 +96,7 @@ export default defineComponent({
       if (indexToRemove >= 0) {
         selectedDapps.value.splice(indexToRemove, 1);
       } else {
-        if (selectedDapps.value.length < maxDappsToSelect) {
+        if (selectedDapps.value.length < maxDappsToSelect.value) {
           selectedDapps.value.push(dapp);
         }
       }

diff --git a/src/staking-v3/components/dapp/Builders.vue b/src/staking-v3/components/dapp/Builders.vue
@@ -6,7 +6,7 @@
     <div class="box--builders">
       <div v-for="(team, index) in teams" :key="index" class="card--builders">
         <div class="row--details">
-          <img class="image--builder-icon" :src="team.iconFile" :alt="dapp.dapp.name" />
+          <img class="image--builder-icon" :src="team.iconFile" :alt="dapp.basic.name" />
           <div>
             <div class="text--name">{{ team.name }}</div>
           </div>
@@ -54,28 +54,22 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-
-interface Developer {
-  iconFile: string;
-  name: string;
-  githubAccountUrl: string;
-  linkedInAccountUrl: string;
-  twitterAccountUrl: string;
-}
+import { CombinedDappInfo } from 'src/staking-v3/logic';
+import { defineComponent, computed, PropType } from 'vue';
+import { Developer } from 'src/staking-v3/logic';
 
 export default defineComponent({
   props: {
     dapp: {
-      type: Object,
+      type: Object as PropType<CombinedDappInfo>,
       required: true,
     },
   },
   setup(props) {
     const teams = computed<Developer[] | null>(() => {
       try {
-        if (props.dapp.dapp && props.dapp.dapp.hasOwnProperty('developers')) {
-          const developers = props.dapp.dapp.developers as Developer[];
+        if (props.dapp.extended && props.dapp.extended.hasOwnProperty('developers')) {
+          const developers = props.dapp.extended.developers as Developer[];
           return developers.map((it) => {
             return {
               ...it,
@@ -95,5 +89,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use 'src/components/dapp-staking/dapp/styles/builders.scss';
+@use 'src/staking-v3/components/dapp/styles/builders.scss';
 </style>
diff --git a/src/staking-v3/components/dapp/DappAvatar.vue b/src/staking-v3/components/dapp/DappAvatar.vue
@@ -2,22 +2,22 @@
   <div class="wrapper--dapp-avatar">
     <div class="column--avatar">
       <div>
-        <img class="image--dapp-icon" :src="dapp.dapp.iconUrl" :alt="dapp.dapp.name" />
+        <img class="image--dapp-icon" :src="dapp.extended?.iconUrl" :alt="dapp.extended?.name" />
       </div>
       <div class="column--details">
         <div class="row--dapp-title">
-          <span class="text--xl text--color">{{ dapp.dapp.name }}</span>
+          <span class="text--xl text--color">{{ dapp.extended?.name }}</span>
         </div>
-        <div v-if="dapp.dapp.tags" class="row--tags">
-          <div v-for="tag in dapp.dapp.tags" :key="tag" class="tag">
+        <div v-if="dapp.extended?.tags" class="row--tags">
+          <div v-for="tag in dapp.extended?.tags" :key="tag" class="tag">
             <span class="text--tag"> {{ tag }} </span>
           </div>
         </div>
         <div class="row--stake">
           <astar-button
             class="btn-size--stake"
             :disabled="isZkEvm"
-            @click="goStakeLink(dapp.dapp.address)"
+            @click="navigateToVote(dapp.chain.address)"
           >
             <span class="text--btn-stake">
               {{ $t('dappStaking.stake') }}
@@ -44,41 +44,39 @@
 <script lang="ts">
 import { useAccount, useNetworkInfo } from 'src/hooks';
 import { networkParam, Path } from 'src/router/routes';
-import { defineComponent, computed } from 'vue';
+import { useDappStakingNavigation } from 'src/staking-v3/hooks';
+import { CombinedDappInfo } from 'src/staking-v3/logic';
+import { defineComponent, computed, PropType } from 'vue';
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
   props: {
     dapp: {
-      type: Object,
+      type: Object as PropType<CombinedDappInfo>,
       required: true,
     },
   },
   setup(props) {
     const router = useRouter();
     const { currentAccount } = useAccount();
     const { isZkEvm } = useNetworkInfo();
+    const { navigateToVote } = useDappStakingNavigation();
     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 => {
       const url = networkParam + Path.DappStaking + Path.Register;
       router.push(url);
     };
 
-    const goStakeLink = (address: string): void => {
-      const base = networkParam + Path.DappStaking + Path.Stake;
-      const url = `${base}?dapp=${address.toLowerCase()}`;
-      router.push(url);
-    };
-
+    // Disable dApp editing for now
     const isDisabledEditButton = computed<boolean>(
-      () => currentAccount.value !== props.dapp.contract.developerAddress
+      () => true // currentAccount.value !== props.dapp.chain.owner
     );
 
     return {
       isDisabledEditButton,
       goEditLink,
-      goStakeLink,
+      navigateToVote,
       twitterUrl,
       isZkEvm,
     };
@@ -87,7 +85,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use 'src/components/dapp-staking/dapp/styles/dapp-avatar.scss';
+@use 'src/staking-v3/components/dapp/styles/dapp-avatar.scss';
 
 .twitter-icon {
   width: 20px;

diff --git a/src/staking-v3/components/dapp/DappImages.vue b/src/staking-v3/components/dapp/DappImages.vue
@@ -57,11 +57,12 @@
 </template>
 <script lang="ts">
 import { useBreakpoints } from 'src/hooks';
-import { computed, defineComponent, ref, watchEffect, onUnmounted } from 'vue';
+import { CombinedDappInfo } from 'src/staking-v3/logic';
+import { computed, defineComponent, ref, watchEffect, onUnmounted, PropType } from 'vue';
 export default defineComponent({
   props: {
     dapp: {
-      type: Object,
+      type: Object as PropType<CombinedDappInfo>,
       required: true,
     },
   },
@@ -73,8 +74,11 @@ export default defineComponent({
     const arrowSize = computed<number>(() => (width.value > screenSize.sm ? 40 : 30));
     const images = computed<string[]>(() => {
       try {
-        const isImages = props.dapp && props.dapp.dapp.imagesUrl.length > 0;
-        return isImages ? props.dapp.dapp.imagesUrl : [];
+        if (props.dapp.extended !== undefined && props.dapp.extended.imagesUrl.length > 0) {
+          return props.dapp.extended.imagesUrl;
+        }
+
+        return [];
       } catch (error) {
         return [];
       }
@@ -138,5 +142,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use 'src/components/dapp-staking/dapp/styles/dapp-images.scss';
+@use 'src/staking-v3/components/dapp/styles/dapp-images.scss';
 </style>