Additional leaderboards for voting subperiod

src/i18n/en-US/index.ts

@@ -943,6 +943,9 @@ export default {
       whatIsDappStaking: 'What is dApp staking?',
       howToParticipate: 'How to participate dApp staking?',
     },
+    stakes: 'Stakes',
+    transactions: 'Transactions',
+    users: 'Users',
   },
   bridge: {
     bridge: 'Bridge',

src/router/index.ts

@@ -6,8 +6,7 @@ import {
   createWebHistory,
 } from 'vue-router';
 import { StateInterface } from 'src/store';
-import routes, { Path } from 'src/router/routes';
-import { $api } from '../boot/api';
+import routes from 'src/router/routes';
 export { Path } from 'src/router/routes';
 export { getHeaderName, buildTransferPageLink } from 'src/router/utils';
 
@@ -38,22 +37,5 @@ export default route<StateInterface>(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
   });
 
-  // TODO - remove after the portal v3 is live.
-  Router.beforeEach((to, from, next) => {
-    // Prevent accessing to dApp staking pages if v3 is deployed to a node, but not supported by UI
-    const networksSupportV3 = ['development', 'shibuya-testnet', 'custom-node', 'shiden'];
-    const isStakingV3 = $api?.query.hasOwnProperty('dappStaking');
-    const dontNavigateToDappStaking =
-      to.path.includes('/dapp-staking') &&
-      !to.path.includes('/maintenance') &&
-      !networksSupportV3.includes(to.params?.network?.toString());
-
-    if (isStakingV3 && dontNavigateToDappStaking) {
-      next({ path: Path.DappStaking + Path.Maintenance });
-    } else {
-      next();
-    }
-  });
-
   return Router;
 });

src/router/routes.ts

@@ -8,7 +8,6 @@ import XvmTransfer from 'pages/XvmTransfer.vue';
 import { endpointKey, getNetworkName } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import Store from 'src/pages/DappStaking.vue';
-import StakingTop from 'components/dapp-staking/StakingTop.vue';
 import Dashboard from 'src/pages/Dashboard.vue';
 import RegisterDapp from 'src/pages/RegisterDapp.vue';
 import StakeManage from 'src/pages/StakeManage.vue';
@@ -153,12 +152,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: 'discover',
-        component:
-          networkParam === '/development' ||
-          networkParam === '/shibuya-testnet' ||
-          networkParam === '/shiden'
-            ? DiscoverV3
-            : StakingTop,
+        component: DiscoverV3,
       },
       {
         path: 'owner',

src/staking-v3/components/Dapps.vue

@@ -134,6 +134,7 @@ export default defineComponent({
       tooling: require('/src/staking-v3/assets/category_blue.webp'),
       utility: require('/src/staking-v3/assets/category_sky.webp'),
       others: require('/src/staking-v3/assets/category_green.webp'),
+      'unstoppable-grants': require('/src/staking-v3/assets/category_unstoppable.webp'),
     };
 
     return {

src/staking-v3/components/DiscoverV3.vue

@@ -49,7 +49,6 @@ import LeaderboardVote from './leaderboard/LeaderboardVote.vue';
 import DynamicAdsArea from './DynamicAdsArea.vue';
 import ToggleButtons from './ToggleButtons.vue';
 import DataList from './data/DataList.vue';
-import RegisterBanner from './RegisterBanner.vue';
 import { useDappStaking } from '../hooks';
 
 export default defineComponent({

src/staking-v3/components/DynamicAdsArea.vue

@@ -95,3 +95,29 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import './styles/ads-area.scss';
 </style>
+
+<style lang="scss">
+.swiper--ads-area {
+  .swiper-button-prev,
+  .swiper-button-next {
+    color: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: $navy-1;
+    &::after {
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+  .swiper-button-prev {
+    padding-right: 2px;
+  }
+  .swiper-button-next {
+    padding-left: 2px;
+  }
+  .swiper-button-disabled {
+    display: none;
+  }
+}
+</style>

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

@@ -1,15 +1,15 @@
 <template>
   <div :class="`wrapper--dapp-avatar ${small ? 'small' : ''}`">
     <div class="column--avatar">
-      <div>
-        <img class="image--dapp-icon" :src="dapp.extended?.iconUrl" :alt="dapp.extended?.name" />
+      <div class="image--dapp-icon">
+        <img :src="dapp.extended?.iconUrl" :alt="dapp.extended?.name" />
       </div>
       <div class="column--details">
         <div class="row--dapp-title">
           {{ dapp.extended?.name }}
         </div>
         <div v-if="!small" class="row--dapp-description">
-          {{ dapp.extended?.description }}
+          {{ dapp.extended?.shortDescription }}
         </div>
         <div v-if="dapp.extended?.tags && !small" class="row--tags">
           <div v-for="tag in dapp.extended?.tags" :key="tag" class="tag">

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

@@ -67,11 +67,16 @@
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   @media (min-width: $sm) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   @media (min-width: $lg) {
-    display: flex;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  @media (min-width: $xl) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  @media (min-width: $xxl) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
 
@@ -84,7 +89,6 @@
   flex-direction: column;
   gap: 12px;
   @media (min-width: $lg) {
-    width: 200px;
     padding: 24px 32px;
   }
 }

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

@@ -22,12 +22,15 @@
 }
 
 .image--dapp-icon {
-  width: 120px;
-  height: 120px;
-  border-radius: 16px;
-  object-fit: contain;
-  overflow: hidden;
-  margin: auto;
+  flex-shrink: 0;
+  img {
+    width: 120px;
+    height: 120px;
+    border-radius: 16px;
+    object-fit: contain;
+    overflow: hidden;
+    margin: auto;
+  }
 }
 
 .row--dapp-title {
@@ -129,11 +132,13 @@
     }
   }
   .image--dapp-icon {
-    width: 44px;
-    height: 44px;
-    @media (min-width: $sm) {
-      width: 60px;
-      height: 60px;
+    img {
+      width: 44px;
+      height: 44px;
+      @media (min-width: $sm) {
+        width: 60px;
+        height: 60px;
+      }
     }
   }
   .row--dapp-title {

src/staking-v3/components/leaderboard/LeaderboardVote.vue

@@ -1,36 +1,55 @@
 <template>
-  <div v-if="isLeaderboardEmpty" class="wrapper--leaderboard">
+  <div class="wrapper--leaderboard">
     <div class="wrapper--leaderboard__inner">
       <div class="title">{{ $t('stakingV3.projectLeaderboards') }}</div>
-
       <div class="container--boards">
-        <div class="wrapper--tier">
-          <swiper
-            v-if="paginatedDapps.length > 0"
-            class="swiper--tier"
-            :navigation="true"
-            :modules="modules"
-          >
-            <swiper-slide v-for="(dapps, page) in paginatedDapps" :key="page">
-              <div class="container--dapps">
-                <div v-for="(dapp, index) in dapps" :key="dapp.chain.id">
-                  <div class="dapp">
-                    <div>{{ index + 1 + page * dappsPerPage }}</div>
-                    <div class="dapp--button" @click="navigateDappPage(dapp.basic.address)">
-                      <div class="dapp--image">
-                        <img :src="dapp.basic.iconUrl" :alt="dapp.basic.name" />
-                      </div>
-                      <div>{{ dapp.basic.name }}</div>
-                    </div>
-                    <div class="amount">
-                      <token-balance-native :balance="dapp.chain.totalStake?.toString() ?? '0'" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </swiper-slide>
-          </swiper>
-        </div>
+        <swiper
+          class="swiper--leaderboard"
+          :slides-per-view="1.25"
+          :slides-per-group="1"
+          :space-between="8"
+          :navigation="true"
+          :modules="modules"
+          :breakpoints="{
+            '768': {
+              slidesPerView: 2.5,
+              slidesPerGroup: 2,
+              spaceBetween: 8,
+            },
+            '1024': {
+              slidesPerView: 2.5,
+              slidesPerGroup: 2,
+              spaceBetween: 8,
+            },
+            '1280': {
+              slidesPerView: 3.5,
+              slidesPerGroup: 3,
+              spaceBetween: 8,
+            },
+          }"
+        >
+          <swiper-slide>
+            <leaderboard-vote-panel
+              :title="$t('stakingV3.stakes')"
+              :paginated-dapps="paginatedStakeRankingVoting"
+              :contains-balance="true"
+            />
+          </swiper-slide>
+          <swiper-slide>
+            <leaderboard-vote-panel
+              :title="$t('stakingV3.transactions')"
+              :paginated-dapps="paginatedTransactionsRanking"
+              :contains-balance="false"
+            />
+          </swiper-slide>
+          <swiper-slide>
+            <leaderboard-vote-panel
+              :title="$t('stakingV3.users')"
+              :paginated-dapps="paginatedUsersRanking"
+              :contains-balance="false"
+            />
+          </swiper-slide>
+        </swiper>
       </div>
     </div>
     <div class="bg--leaderboard">
@@ -40,10 +59,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { useLeaderboard } from '../../hooks';
-import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
-import { useDappStakingNavigation } from '../../hooks';
+import { defineComponent } from 'vue';
+import { useLeaderboard, useDapps } from '../../hooks';
+import LeaderboardVotePanel from './LeaderboardVotePanel.vue';
 
 // Import Swiper
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -53,30 +71,26 @@ import { Navigation } from 'swiper/modules';
 
 export default defineComponent({
   components: {
-    TokenBalanceNative,
     Swiper,
     SwiperSlide,
+    LeaderboardVotePanel,
   },
   setup() {
-    const { sortedDapps, isLeaderboardEmpty } = useLeaderboard();
-
-    const { navigateDappPage } = useDappStakingNavigation();
-
-    const dappsPerPage = 5;
-    const paginatedDapps = computed(() => {
-      const result = [];
-      for (let i = 0; i < sortedDapps.value.length; i += dappsPerPage) {
-        result.push(sortedDapps.value.slice(i, i + dappsPerPage));
-      }
-      return result;
-    });
+    const {
+      isLeaderboardEmpty,
+      paginatedStakeRankingVoting,
+      paginatedTransactionsRanking,
+      paginatedUsersRanking,
+      dappsPerPage,
+    } = useLeaderboard();
 
     return {
       modules: [Navigation],
       isLeaderboardEmpty,
-      paginatedDapps,
+      paginatedStakeRankingVoting,
+      paginatedTransactionsRanking,
+      paginatedUsersRanking,
       dappsPerPage,
-      navigateDappPage,
     };
   },
 });