Merge branch 'feat/dapp-staking-v3' into feat/shibuya-scope-style

src/i18n/en-US/index.ts

@@ -743,6 +743,7 @@ export default {
     tier: 'Tier',
     tierLeaderboard: 'Tier Leaderboard',
     rewardPerDay: 'Reward per day',
+    leaderboard: 'Leaderboard',
     myStaking: 'My Staking',
     myDapps: 'My dApps',
     unbonding: 'Unbonding',
@@ -796,7 +797,6 @@ export default {
     dapp: {
       voteAndStake: 'Vote & Stake',
       overview: 'Overview',
-      StartStakingNow: 'Start staking now',
     },
     unregisteredDappInfo:
       "This project has been unregistered. You don't have to do anything - If you do not move funds within this period, you will continue to earn basic rewards and be entitled to receive bonus.",

src/staking-v3/components/Dapps.vue

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div v-if="filteredDapps.length > 0">
+    <div class="title">{{ category }}</div>
     <div class="wrapper--dapps">
       <div v-for="(dapp, index) in filteredDapps" :key="index">
         <div v-if="dapp" class="card--dapp" @click="navigateDappPage(dapp.basic.address)">
@@ -21,16 +22,14 @@
         </div>
       </div>
     </div>
-    <div v-if="search.length > 0 && filteredDapps.length === 0" class="box--no-result">
-      <span class="text--title">{{ $t('assets.noResults') }}</span>
-    </div>
   </div>
 </template>
 
 <script lang="ts">
 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: {
@@ -41,14 +40,22 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    category: {
+      type: String,
+      required: true,
+    },
   },
   setup(props) {
     const { registeredDapps } = useDapps();
     const { getDappTier } = useDappStaking();
     const { navigateDappPage } = useDappStakingNavigation();
 
-    const filteredDapps = computed(() => {
-      const dapps = registeredDapps.value;
+    const filteredDapps = computed<(CombinedDappInfo | undefined)[]>(() => {
+      const dapps = registeredDapps.value.filter(
+        (x) =>
+          x.basic.mainCategory?.toLowerCase() === props.category.toLowerCase() ||
+          (x.basic.mainCategory === undefined && props.category.toLowerCase() === 'others')
+      );
 
       if (props.search === '') return dapps;
 
@@ -65,8 +72,6 @@ export default defineComponent({
       return result.length > 0 ? result : [];
     });
 
-    console.log('registeredDapps', registeredDapps.value);
-
     return { filteredDapps, getDappTier, navigateDappPage };
   },
 });

src/staking-v3/components/DiscoverV3.vue

@@ -5,6 +5,7 @@
     <feature-dapp />
     <!-- <staking /> -->
     <leaderboard />
+    <leaderboard-vote />
     <!-- <ad /> -->
     <dynamic-ads-area />
 
@@ -23,9 +24,16 @@
           />
         </div>
       </div>
-      <dapps v-if="displayIndex === 0" :search="searchText" />
+      <div v-if="displayIndex === 0" class="dapps">
+        <dapps category="DeFi" :search="searchText" />
+        <dapps category="NFT" :search="searchText" />
+        <dapps category="Tooling" :search="searchText" />
+        <dapps category="Utility" :search="searchText" />
+        <dapps category="Others" :search="searchText" />
+      </div>
       <data-list v-if="displayIndex === 1" />
     </div>
+
     <div class="bg--discover" />
   </div>
 </template>
@@ -36,6 +44,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';
@@ -47,6 +56,7 @@ export default defineComponent({
     // Ad,
     Dapps,
     Leaderboard,
+    LeaderboardVote,
     // Staking,
     DataList,
     DynamicAdsArea,

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

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

@@ -7,7 +7,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>
@@ -55,28 +55,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,

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

@@ -2,18 +2,18 @@
   <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">
-          {{ dapp.dapp.name }}
+          {{ dapp.extended?.name }}
         </div>
         <div class="row--dapp-description">
-          {{ dapp.dapp.description }}
+          {{ dapp.extended?.description }}
         </div>
-        <div v-if="dapp.dapp.tags" class="row--tags">
-          <div v-for="tag in dapp.dapp.tags" :key="tag" class="tag">
-            {{ 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>
@@ -44,34 +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);
     };
 
+    // 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,
+      navigateToVote,
       twitterUrl,
       isZkEvm,
     };

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 [];
       }

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

@@ -1,51 +1,53 @@
 <template>
   <div class="wrapper--dapp-statistics">
     <div class="row--data">
-      <button class="button--vote-stake" @click="navigateToVote(dapp.dapp.address)">
+      <button class="button--vote-stake" @click="navigateToVote(dapp.extended?.address)">
         {{ $t('stakingV3.dapp.voteAndStake') }}
       </button>
 
       <kpi-card :title="$t('dappStaking.dappPage.totalStaked')">
-        <token-balance :balance="dapp.stakerInfo.totalStakeFormatted" :symbol="nativeTokenSymbol" />
+        <token-balance-native :balance="dapp.chain.totalStake?.toString() || '0'" />
       </kpi-card>
 
-      <kpi-card :title="$t('dappStaking.dappPage.totalStaker')">
+      <!-- <kpi-card :title="$t('dappStaking.dappPage.totalStaker')">
         <span>{{ $n(dapp.stakerInfo.stakersCount) }}</span>
-      </kpi-card>
+      </kpi-card> -->
 
       <kpi-card :title="$t('stakingV3.currentTier')">
-        <span>{{ $n(1) }}</span>
+        <span>{{ getDappTier(dapp.chain.id) ?? '--' }}</span>
       </kpi-card>
 
-      <kpi-card :title="$t('stakingV3.totalEarned')">
-        <span> {{ $t('amountToken', { amount: 10, token: nativeTokenSymbol }) }}</span>
-      </kpi-card>
+      <!-- <kpi-card :title="$t('stakingV3.totalEarned')">
+        <span>{{ $t('amountToken', { amount: 10, token: nativeTokenSymbol }) }}</span>
+      </kpi-card> -->
     </div>
   </div>
 </template>
 <script lang="ts">
-import TokenBalance from 'src/components/common/TokenBalance.vue';
-import { useNetworkInfo } from 'src/hooks';
-import { defineComponent } from 'vue';
+import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
+import { useDappStaking, useDappStakingNavigation } from 'src/staking-v3/hooks';
+import { CombinedDappInfo } from 'src/staking-v3/logic';
+import { defineComponent, PropType } from 'vue';
 import KpiCard from '../KpiCard.vue';
-import { useDappStakingNavigation } from '../../hooks';
 
 export default defineComponent({
   components: {
-    TokenBalance,
+    TokenBalanceNative,
     KpiCard,
   },
   props: {
     dapp: {
-      type: Object,
+      type: Object as PropType<CombinedDappInfo>,
       required: true,
     },
   },
-  setup() {
-    const { nativeTokenSymbol } = useNetworkInfo();
+  setup(props) {
+    const { getDappTier } = useDappStaking();
     const { navigateToVote } = useDappStakingNavigation();
 
-    return { nativeTokenSymbol, navigateToVote };
+    console.log('dapp', props.dapp);
+
+    return { getDappTier, navigateToVote };
   },
 });
 </script>

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

@@ -20,9 +20,9 @@
 <script lang="ts">
 import StatsChart from './StatsChart.vue';
 import { useNetworkInfo } from 'src/hooks';
-import { DappCombinedInfo } from 'src/v2/models';
 import { defineComponent, PropType, ref, watchEffect } from 'vue';
 import { StatsDetail, fetchDappTransactions, fetchDappUAW } from '@astar-network/astar-sdk-core';
+import { DappCombinedInfo } from 'src/v2/models';
 
 export default defineComponent({
   components: {