add vote period ranking pagination (#1130)

* add vote period leaderboard pagination

* clean up

* clean up

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

@@ -4,43 +4,74 @@
 
     <div class="container--boards">
       <div class="wrapper--tier">
-        <div class="container--dapps">
-          <div v-for="(dapp, index) in sortedDapps" :key="dapp.chain.id">
-            <div class="dapp">
-              <div>{{ index + 1 }}</div>
-              <div class="dapp--button" @click="navigateDappPage(dapp.basic.address)">
-                <div class="dapp--image">
-                  <img :src="dapp.basic.iconUrl" :alt="dapp.basic.name" />
+        <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 + 1) }}</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>{{ 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>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { useLeaderboard } from '../../hooks';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 import { useDappStakingNavigation } from '../../hooks';
 
+// Import Swiper
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper/modules';
+
 export default defineComponent({
   components: {
     TokenBalanceNative,
+    Swiper,
+    SwiperSlide,
   },
   setup() {
     const { sortedDapps, isLeaderboardEmpty } = useLeaderboard();
 
     const { navigateDappPage } = useDappStakingNavigation();
 
-    return { sortedDapps, isLeaderboardEmpty, navigateDappPage };
+    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;
+    });
+
+    return {
+      modules: [Navigation],
+      isLeaderboardEmpty,
+      paginatedDapps,
+      navigateDappPage,
+    };
   },
 });
 </script>

src/staking-v3/components/leaderboard/styles/leaderboard.scss

@@ -39,9 +39,15 @@
     padding-right: 48px;
   }
 }
+
 .swiper {
   overflow: visible;
 }
+
+.wrapper--tier .swiper {
+  overflow: hidden;
+}
+
 .swiper-slide {
   height: auto;
 }