Release hotfix to main (#1189)

* Enable dApp staking v3 on Astar (#1182) * Add text ellipsis to the dApp cards (#1186) * add text ellipsis to the dapp card * update * Revert "update" This reverts commit 29c7d3f. * fix the arrow style of the ads section * fix builders card layout * fix dapp page short description * Don't batch a single call (#1184) * Don't batch a single call * Ubstoppable grants background * Min staking amount warning condition fix * Code review update * Category title padding fix * Fix for min staking amount warning (#1191) --------- Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
AstarNetwork · Feb 16, 2024 · 221236f · 221236f
1 parent 6966500
commit 221236f
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 49 deletions.
diff --git a/src/router/index.ts b/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;
 });
diff --git a/src/router/routes.ts b/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',

diff --git a/src/staking-v3/assets/category_unstoppable.webp b/src/staking-v3/assets/category_unstoppable.webp
diff --git a/src/staking-v3/components/Dapps.vue b/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 {

diff --git a/src/staking-v3/components/DiscoverV3.vue b/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({

diff --git a/src/staking-v3/components/DynamicAdsArea.vue b/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>
diff --git a/src/staking-v3/components/dapp/DappAvatar.vue b/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">

diff --git a/src/staking-v3/components/dapp/styles/builders.scss b/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;
   }
 }

diff --git a/src/staking-v3/components/dapp/styles/dapp-avatar.scss b/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 {

diff --git a/src/staking-v3/components/styles/dapps.scss b/src/staking-v3/components/styles/dapps.scss
@@ -88,14 +88,24 @@
 .text--title {
   font-weight: 700;
   font-size: 16px;
-  margin: 12px 0 8px 0;
+  margin: 0 0 4px 0;
   line-height: 1.25;
+  overflow: hidden;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
 .text--description {
   color: $navy-4;
   font-size: 12px;
   font-weight: 500;
+  overflow: hidden;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
 
 .card__bottom {
@@ -161,7 +171,7 @@
 .title--category {
   width: 60%;
   backdrop-filter: blur(20px);
-  padding: 24px;
+  padding: 18px;
   background-color: rgba(255, 255, 255, 0.05);
   color: white;
   font-size: 24px;

diff --git a/src/staking-v3/hooks/useDappStaking.ts b/src/staking-v3/hooks/useDappStaking.ts
@@ -412,7 +412,8 @@ export function useDappStaking() {
         return [false, t('stakingV3.dappStaking.TooManyStakedContracts')];
       } else if (
         constants.value?.minStakeAmountToken &&
-        stake.amount < constants.value.minStakeAmountToken
+        stake.amount < constants.value.minStakeAmountToken &&
+        getStakerInfo(stake.address) === undefined
       ) {
         return [
           false,

diff --git a/src/staking-v3/logic/repositories/DappStakingRepository.ts b/src/staking-v3/logic/repositories/DappStakingRepository.ts
@@ -397,7 +397,7 @@ export class DappStakingRepository implements IDappStakingRepository {
   public async batchAllCalls(calls: ExtrinsicPayload[]): Promise<ExtrinsicPayload> {
     const api = await this.api.getApi();
 
-    return api.tx.utility.batchAll(calls);
+    return calls.length === 1 ? calls[0] : api.tx.utility.batchAll(calls);
   }
 
   public async getCurrentEraInfo(): Promise<EraInfo> {