v3 vote period style

src/components/assets/Assets.vue

@@ -16,16 +16,15 @@
         <template v-if="isDappStakingV3">
           <staking />
         </template>
-        <div class="container">
-          <div v-if="!isLoading" class="container">
-            <div v-if="isH160">
-              <evm-asset-list :tokens="evmAssets.assets" />
-            </div>
-            <div v-else>
-              <!-- Memo: hide xvm panel because AA might replace it -->
-              <!-- <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" /> -->
-              <xcm-native-asset-list v-if="isEnableXcm" :xcm-assets="xcmAssets.assets" />
-            </div>
+
+        <div v-if="!isLoading" class="container">
+          <div v-if="isH160">
+            <evm-asset-list :tokens="evmAssets.assets" />
+          </div>
+          <div v-else>
+            <!-- Memo: hide xvm panel because AA might replace it -->
+            <!-- <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" /> -->
+            <xcm-native-asset-list v-if="isEnableXcm" :xcm-assets="xcmAssets.assets" />
           </div>
         </div>
       </div>

src/i18n/en-US/index.ts

@@ -703,6 +703,7 @@ export default {
     },
     successfullyStaked: 'You successfully staked to {contractAddress}',
     voteTitle: 'Vote!',
+    voteText: 'I would like to vote my tokens with',
     stakeTitle: 'Stake!',
     minimumStakingAmount: 'Minimum staking amount is {amount} {symbol}',
     minBalanceAfterStaking:
@@ -729,13 +730,14 @@ export default {
     newDappPromotion: 'New dApp promotion',
     votingNow: 'Voting Now',
     voteNow: 'Vote now',
+    voteStakeToday: 'Vote / Stake today',
     vote: 'Vote',
-    voteToday: 'Vote today and be eligible for  bonus rewards',
+    voteToday: 'Be entitled to bonus pool today',
     stakeOn: 'Stake on {name}',
     tier: 'Tier',
     tierLeaderboard: 'Tier Leaderboard',
+    projectLeaderboards: 'Project Leaderboards',
     rewardPerDay: 'Reward per era',
-    leaderboard: 'Leaderboard',
     myStaking: 'My Staking',
     myDapps: 'My dApps',
     unbonding: 'Unbonding',

src/staking-v3/components/Dapps.vue

@@ -51,7 +51,6 @@ import { CombinedDappInfo } from '../logic';
 // Import Swiper
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
-import 'swiper/css/navigation';
 
 export default defineComponent({
   components: {

src/staking-v3/components/FeatureDapp.vue

@@ -1,47 +1,53 @@
 <template>
-  <div class="wrapper--promo">
-    <div class="row--title">
-      <span class="text--promo-title">{{
-        isVotingPeriod ? $t('stakingV3.votingNow') : $t('stakingV3.newDappPromotion')
-      }}</span>
-    </div>
-    <div class="text--promo-description">
-      <span>{{ isVotingPeriod ? $t('stakingV3.voteToday') : promotedDapp?.shortDescription }}</span>
-    </div>
-    <div class="row--button">
-      <astar-button
-        v-if="isVotingPeriod"
-        class="button--link pink--button"
-        @click="navigateToVote()"
-      >
-        {{ $t('stakingV3.voteNow') }}
-        <astar-icon-arrow-up-right />
-      </astar-button>
-      <astar-button
-        v-else
-        class="button--link outlined--button"
-        @click="navigateToVote(promotedDapp?.address)"
-      >
-        {{ $t('stakingV3.stakeOn', { name: promotedDapp?.name }) }}
-        <astar-icon-arrow-up-right />
-      </astar-button>
-    </div>
-    <div class="row--data">
-      <kpi-card :title="periodName.toUpperCase()">
-        <span class="text--value">{{ periodCurrentDay }}</span>
-        <span class="text--value-small">/{{ periodDuration }}</span>
-      </kpi-card>
-      <kpi-card v-if="!isVotingPeriod" :title="$t('stakingV3.basicRewards')">-- %</kpi-card>
-      <kpi-card :title="$t('stakingV3.bonusRewards')">-- %</kpi-card>
-      <kpi-card :title="$t('dashboard.tvl')">
-        <format-balance :balance="currentEraInfo?.totalLocked?.toString() ?? ''" />
-      </kpi-card>
-      <div v-if="!isVotingPeriod" class="row--start-staking">
-        <button class="button--staking" @click="navigateToVote()">
-          <span class="text--start-staking">Start Staking Now</span>
+  <div :class="`wrapper--promo ${isVotingPeriod && 'voting-period'}`">
+    <div class="wrapper--promo__inner">
+      <div class="row--title">
+        <span class="text--promo-title">{{
+          isVotingPeriod ? $t('stakingV3.votingNow') : $t('stakingV3.newDappPromotion')
+        }}</span>
+      </div>
+      <div v-if="isVotingPeriod" class="row--countdown">
+        <span>--:--:--:--</span>
+      </div>
+      <div class="text--promo-description">
+        <span>{{
+          isVotingPeriod ? $t('stakingV3.voteToday') : promotedDapp?.shortDescription
+        }}</span>
+      </div>
+      <div class="row--button">
+        <astar-button
+          v-if="!isVotingPeriod"
+          class="button--link outlined--button"
+          @click="navigateToVote(promotedDapp?.address)"
+        >
+          {{ $t('stakingV3.stakeOn', { name: promotedDapp?.name }) }}
+          <astar-icon-arrow-up-right />
+        </astar-button>
+      </div>
+      <div class="row--data">
+        <button v-if="isVotingPeriod" class="button--vote" @click="navigateToVote()">
+          <span>{{ $t('stakingV3.voteStakeToday') }}</span>
+          <vote-button-bg />
         </button>
+        <kpi-card :title="periodName.toUpperCase()">
+          <span class="text--value">{{ periodCurrentDay }}</span>
+          <span class="text--value-small">/{{ periodDuration }}</span>
+        </kpi-card>
+        <kpi-card v-if="!isVotingPeriod" :title="$t('stakingV3.basicRewards')">-- %</kpi-card>
+        <kpi-card :title="$t('stakingV3.bonusRewards')">-- %</kpi-card>
+        <kpi-card :title="$t('dashboard.tvl')">
+          <format-balance :balance="currentEraInfo?.totalLocked?.toString() ?? ''" />
+        </kpi-card>
+        <div v-if="!isVotingPeriod" class="row--start-staking">
+          <button class="button--staking" @click="navigateToVote()">
+            <span class="text--start-staking">Start Staking Now</span>
+          </button>
+        </div>
       </div>
     </div>
+    <div v-if="isVotingPeriod" class="bg--vote">
+      <img :src="require('/src/staking-v3/assets/vote_hero_bg.webp')" alt="" />
+    </div>
   </div>
 </template>
 
@@ -57,11 +63,13 @@ import {
 import { Campaign } from 'src/v2/models';
 import FormatBalance from 'src/components/common/FormatBalance.vue';
 import KpiCard from './KpiCard.vue';
+import VoteButtonBg from './VoteButtonBg.vue';
 
 export default defineComponent({
   components: {
     FormatBalance,
     KpiCard,
+    VoteButtonBg,
   },
   setup() {
     const { constants, currentEraInfo, isVotingPeriod } = useDappStaking();

src/staking-v3/components/RewardsPanel.vue

@@ -1,14 +1,19 @@
 <template>
-  <div v-if="hasRewards" class="note">
-    <b>{{ $t('stakingV3.rewardsWillBeClaimed') }}</b>
-    <div class="note--row">
-      <div>{{ $t('stakingV3.basicRewards') }}</div>
+  <div v-if="hasRewards" class="rewards">
+    <div class="rewards--row title--rewards">{{ $t('stakingV3.rewardsWillBeClaimed') }}</div>
+    <div class="rewards--row">
+      <div class="text--rewards">{{ $t('stakingV3.basicRewards') }}</div>
       <div><token-balance-native :balance="rewards?.staker.toString() ?? ''" /></div>
     </div>
-    <div class="note--row">
-      <div>{{ $t('stakingV3.bonusRewards') }}</div>
+    <div class="rewards--row">
+      <div class="text--rewards">{{ $t('stakingV3.bonusRewards') }}</div>
       <div><token-balance-native :balance="rewards?.bonus.toString() ?? ''" /></div>
     </div>
+    <img
+      class="bg--rewards"
+      :src="require('/src/staking-v3/assets/unclaimed_rewards_bg.webp')"
+      alt="wallet-icon"
+    />
   </div>
 </template>
 

src/staking-v3/components/Vote.vue

@@ -4,39 +4,17 @@
     <div class="title">
       {{ isVotingPeriod ? $t('stakingV3.voteTitle') : $t('stakingV3.stakeTitle') }}
     </div>
+    <div v-if="isVotingPeriod" class="text--title">{{ $t('stakingV3.voteText') }}</div>
     <div class="inner--vote">
-      <div>
-        <div class="note">
-          <b>{{ $t('toast.note') }}</b>
-          <ul>
-            <li>
-              {{
-                $t('stakingV3.minimumStakingAmount', {
-                  amount: constants?.minStakeAmountToken,
-                  symbol: nativeTokenSymbol,
-                })
-              }}
-            </li>
-            <li>
-              {{
-                $t('stakingV3.minBalanceAfterStaking', {
-                  amount: constants?.minBalanceAfterStaking,
-                  symbol: nativeTokenSymbol,
-                })
-              }}
-            </li>
-          </ul>
-        </div>
+      <div class="column--main">
         <div v-for="dapp in selectedDapps" :key="dapp.address" class="dapp-amount">
-          <div class="dapp">
-            <dapp-selector
-              :dapps="dapps"
-              :on-select-dapps="handleSelectDapp"
-              :placeholder="$t('stakingV3.chooseProject')"
-              :selected-dapp="dapp"
-              :disable-selection="!canAddDapp"
-            />
-          </div>
+          <dapp-selector
+            :dapps="dapps"
+            :on-select-dapps="handleSelectDapp"
+            :placeholder="$t('stakingV3.chooseProject')"
+            :selected-dapp="dapp"
+            :disable-selection="!canAddDapp"
+          />
           <div class="amount">
             <amount
               :amount="dapp.amount"
@@ -51,41 +29,46 @@
             :placeholder="$t('stakingV3.chooseProject')"
           />
         </div>
-        <div class="note">
-          <div class="note--row">
+
+        <div class="balance">
+          <div class="balance--row">
             <div>
               <b>{{ $t('stakingV3.availableToVote') }}</b>
             </div>
             <div>
               <b><token-balance-native :balance="useableBalance" /></b>
             </div>
           </div>
-          <div class="note--row">
-            <div>
-              {{ $t('stakingV3.lockedBalance') }}
+
+          <div class="container--locked-balance">
+            <div class="balance--row">
+              <div>
+                {{ $t('stakingV3.lockedBalance') }}
+              </div>
+              <div><token-balance-native :balance="locked.toString()" /></div>
             </div>
-            <div><token-balance-native :balance="locked.toString()" /></div>
-          </div>
-          <div class="note--row">
-            <div>
-              {{ isVotingPeriod ? $t('stakingV3.alreadyVoted') : $t('stakingV3.alreadyStaked') }}
+            <div class="balance--row">
+              <div>
+                {{ isVotingPeriod ? $t('stakingV3.alreadyVoted') : $t('stakingV3.alreadyStaked') }}
+              </div>
+              <div><token-balance-native :balance="totalStake.toString()" /></div>
             </div>
-            <div><token-balance-native :balance="totalStake.toString()" /></div>
-          </div>
-          <div class="note--row" :class="remainLockedToken !== BigInt(0) && 'warning--text'">
-            <div>
-              <b>{{ $t('stakingV3.remainingLockedBalance') }}</b>
+            <div class="balance--row" :class="remainLockedToken !== BigInt(0) && 'warning--text'">
+              <div>
+                <b>{{ $t('stakingV3.remainingLockedBalance') }}</b>
+              </div>
+              <div>
+                <b
+                  ><token-balance-native :balance="max(remainLockedToken, BigInt(0)).toString()"
+                /></b>
+              </div>
             </div>
-            <div>
-              <b
-                ><token-balance-native :balance="max(remainLockedToken, BigInt(0)).toString()"
-              /></b>
+            <div v-if="remainLockedToken > BigInt(0)" class="note warning">
+              {{ $t('stakingV3.voteLockedTokensWarning') }}
             </div>
           </div>
-          <div v-if="remainLockedToken > BigInt(0)" class="note warning">
-            {{ $t('stakingV3.voteLockedTokensWarning') }}
-          </div>
-          <div class="note--row">
+
+          <div class="balance--row">
             <div>
               <b>{{ isVotingPeriod ? $t('stakingV3.totalVote') : $t('stakingV3.totalStake') }}</b>
             </div>
@@ -111,9 +94,36 @@
           :dapps-selected="handleDappsSelected"
         />
       </div>
-      <div class="column--help">Banners</div>
+
+      <div class="column--help">
+        <div class="note">
+          <b>{{ $t('toast.note') }}</b>
+          <ul>
+            <li>
+              {{
+                $t('stakingV3.minimumStakingAmount', {
+                  amount: constants?.minStakeAmountToken,
+                  symbol: nativeTokenSymbol,
+                })
+              }}
+            </li>
+            <li>
+              {{
+                $t('stakingV3.minBalanceAfterStaking', {
+                  amount: constants?.minBalanceAfterStaking,
+                  symbol: nativeTokenSymbol,
+                })
+              }}
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
-    <div class="bg--vote" :style="{ backgroundImage: `url(${bg_img.light})` }" />
+
+    <div
+      class="bg--vote"
+      :style="{ backgroundImage: `url(${require('/src/staking-v3/assets/vote_bg.webp')})` }"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -260,10 +270,6 @@ export default defineComponent({
       }
     );
 
-    const bg_img = {
-      light: require('/src/staking-v3/assets/vote_bg_light.webp'),
-    };
-
     return {
       constants,
       nativeTokenSymbol,
@@ -285,7 +291,6 @@ export default defineComponent({
       canAddDapp,
       Path,
       isVotingPeriod,
-      bg_img,
     };
   },
 });