Add Shibuya Scope Style (#1078)

* add feature dApp area style * add dapps list and data list area style * add ad area style * add Leaderboard area style * move staking section to assets page * update the your projects section style on the assets page * move css files * add staking section style on the assets page * add vote and stake page style * adjust tvl text size * add owner page style * update astar ui * remove dark theme style from the vote page * update vote page style * remove dark theme from dapp staking pages * add project page style * clean up * add Leaderboard style * update dapp style * update lang * add input search * update * update leaderboard style * add category style * add tier paging * Small fix for loading a dApp * Changed a way how to subscribe and handle protocol state * clean up * update dapps search logic * remove operator from filter function --------- Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
AstarNetwork · Dec 20, 2023 · caaaf72 · caaaf72
1 parent 727639b
commit caaaf72
Show file tree

Hide file tree

Showing 58 changed files with 1,639 additions and 1,068 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@astar-network/astar-sdk-core": "^0.2.8",
-    "@astar-network/astar-ui": "^0.0.136",
+    "@astar-network/astar-ui": "^0.0.137",
     "@astar-network/metamask-astar-adapter": "^0.5.4",
     "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",

diff --git a/src/App.vue b/src/App.vue
@@ -40,7 +40,7 @@
 // https://polkadot.js.org/docs/api/FAQ/#since-upgrading-to-the-7x-series-typescript-augmentation-is-missing
 import 'reflect-metadata';
 import '@polkadot/api-augment';
-import { defineComponent, computed, ref, watch } from 'vue';
+import { defineComponent, computed, ref, watch, onMounted } from 'vue';
 import DashboardLayout from 'layouts/DashboardLayout.vue';
 import { useStore } from 'src/store';
 import ModalLoading from 'components/common/ModalLoading.vue';
@@ -143,17 +143,21 @@ export default defineComponent({
     });
 
     // **** dApp staking v3
-    if (isDappStakingV3.value) {
-      // dApp staking v3 data changed subscriptions.
-      container
-        .get<IDappStakingRepositoryV3>(Symbols.DappStakingRepositoryV3)
-        .startProtocolStateSubscription();
-
-      eventAggregator.subscribe(ProtocolStateChangedMessage.name, async (m) => {
-        const message = m as ProtocolStateChangedMessage;
-        store.commit('stakingV3/setProtocolState', message.state, { root: true });
+    // dApp staking v3 data changed subscriptions.
+    onMounted(() => {
+      if (isDappStakingV3.value) {
+        container
+          .get<IDappStakingRepositoryV3>(Symbols.DappStakingRepositoryV3)
+          .startProtocolStateSubscription();
+      }
+    });
+
+    eventAggregator.subscribe(ProtocolStateChangedMessage.name, async (m) => {
+      const message = m as ProtocolStateChangedMessage;
+      console.log('protocol state', message.state);
 
-        console.log('protocol state', message.state);
+      if (message.state) {
+        store.commit('stakingV3/setProtocolState', message.state, { root: true });
         await fetchDappsToStore();
         await Promise.all([
           getAllRewards(),
@@ -163,14 +167,14 @@ export default defineComponent({
           fetchStakerInfoToStore(),
           fetchEraLengthsToStore(),
         ]);
-      });
+      }
+    });
 
-      eventAggregator.subscribe(AccountLedgerChangedMessage.name, (m) => {
-        const message = m as AccountLedgerChangedMessage;
-        store.commit('stakingV3/setLedger', message.ledger, { root: true });
-        console.log('ledger', message.ledger);
-      });
-    }
+    eventAggregator.subscribe(AccountLedgerChangedMessage.name, (m) => {
+      const message = m as AccountLedgerChangedMessage;
+      store.commit('stakingV3/setLedger', message.ledger, { root: true });
+      console.log('ledger', message.ledger);
+    });
     // **** end dApp staking v3
 
     // Handle wallet change so we can inject proper wallet

diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -10,9 +10,12 @@
           :is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount"
         />
 
-        <div v-if="isDappStakingV3">
+        <template v-if="isDappStakingV3">
           <your-project />
-        </div>
+        </template>
+        <template v-if="isDappStakingV3">
+          <staking />
+        </template>
         <div class="container">
           <div v-if="!isLoading" class="container">
             <div v-if="isH160">
@@ -50,6 +53,7 @@ import { useStore } from 'src/store';
 import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
 import { Asset } from 'src/v2/models';
 import { computed, defineComponent, onUnmounted, ref, watch, watchEffect } from 'vue';
+import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
 
 export default defineComponent({
   components: {
@@ -59,6 +63,7 @@ export default defineComponent({
     EvmAssetList,
     XcmNativeAssetList,
     YourProject,
+    Staking,
   },
   setup() {
     const token = ref<Asset | null>(null);

diff --git a/src/components/assets/Rewards.vue b/src/components/assets/Rewards.vue
@@ -1,21 +1,19 @@
 <template>
-  <div>
-    <button v-if="!isDappDeveloper" class="wrapper--rewards" @click="handleClaim">
-      <div class="container--rewards">
-        <div class="text--title">
-          {{ $t('assets.yourEstimatedRewards') }}
-        </div>
-        <div class="row--data">
-          <div class="value">
-            <div>
-              <span class="text--amount">{{ $n(pendingRewards || 0) }}</span>
-              <span class="text--symbol">{{ nativeTokenSymbol }}</span>
-            </div>
+  <button v-if="!isDappDeveloper" class="wrapper--rewards" @click="handleClaim">
+    <div class="container--rewards">
+      <div class="text--title">
+        {{ $t('assets.yourEstimatedRewards') }}
+      </div>
+      <div class="row--data">
+        <div class="value">
+          <div>
+            <span class="text--amount">{{ $n(pendingRewards || 0) }}</span>
+            <span class="text--symbol">{{ nativeTokenSymbol }}</span>
           </div>
         </div>
       </div>
-    </button>
-  </div>
+    </div>
+  </button>
 </template>
 
 <script lang="ts">

diff --git a/src/components/assets/YourProject.vue b/src/components/assets/YourProject.vue
@@ -2,7 +2,8 @@
   <div v-if="ownDapps.length > 0" class="container">
     <div class="wrapper--your-project">
       <div class="row--title">
-        <span class="text--title">Your Project</span>
+        <astar-icon-project />
+        <span class="text--title">{{ $t('assets.yourProject') }}</span>
       </div>
       <div class="separator" />
       <div class="box--dapps">

diff --git a/src/components/assets/styles/your-project.scss b/src/components/assets/styles/your-project.scss
@@ -8,16 +8,16 @@
 }
 
 .box--dapps {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 32px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
 
-  @media (min-width: $sm) {
-  }
   @media (min-width: $md) {
-    flex-direction: row;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 32px;
+  }
+  @media (min-width: $xxl) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 
@@ -29,36 +29,38 @@
 }
 
 .row--title {
-}
-
-.container {
-  border: solid 1px $gray-2;
-  background-color: white;
-  box-shadow: none;
-  border-radius: 16px;
-  padding: 16px 0 24px 0;
-  @media (min-width: $sm) {
-    padding-left: 24px;
-    padding-right: 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  svg {
+    width: 32px;
+    height: 32px;
   }
 }
 
 .card--dapp {
   cursor: pointer;
-  width: 182px;
   background-color: $gray-1;
   border-radius: 16px;
-  column-gap: 16px;
-  height: 64px;
+  column-gap: 10px;
   display: flex;
   align-items: center;
   padding: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: $navy-1;
+  line-height: 1.25;
+  transition: all 0.2s ease;
+  &:hover{
+    background-color: $gray-2;
+  }
 }
 
 .icon--dapp-logo {
   width: 32px;
   height: 32px;
   border-radius: 8px;
+  object-fit: contain;
 }
 
 .separator {
@@ -69,13 +71,12 @@
 }
 
 .body--dark {
-  .container {
-    background-color: $navy-1;
-    border-color: $navy-3;
-    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
-  }
   .card--dapp {
     background-color: $navy-3;
+    color: $gray-1;
+    &:hover{
+      background-color: lighten($navy-3,5%);
+    }
   }
   .separator {
     background-color: $navy-3;

diff --git a/src/components/common/styles/back-to-page.scss b/src/components/common/styles/back-to-page.scss
@@ -24,3 +24,9 @@
 .icon--back {
   font-size: 18px;
 }
+
+.body--dark{
+  .container--back {
+    color: $gray-3;
+  }
+}
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -493,6 +493,7 @@ export default {
     removeFromFavorite: 'Remove from favorite',
     unifyAccounts: 'Unify accounts',
     yourEstimatedRewards: 'Claim your estimated rewards',
+    yourProject: 'Your Project',
     toast: {
       completedMessage: 'You have sent {transferAmt} {symbol} to {toAddress}',
       completedBridgeMessage: 'You have sent {transferAmt} {symbol} from {fromChain} to {toChain}',
@@ -736,6 +737,7 @@ export default {
     stakeOn: 'Stake on {name}',
     tier: 'Tier',
     tierLeaderboard: 'Tier Leaderboard',
+    rewardPerDay: 'Reward per day',
     leaderboard: 'Leaderboard',
     myStaking: 'My Staking',
     myDapps: 'My dApps',
@@ -787,9 +789,14 @@ export default {
     unfilledSlot: 'Unfilled slots',
     ourDapps: 'Our dApps',
     ourData: 'Our data',
+    dapp: {
+      voteAndStake: 'Vote & Stake',
+      overview: 'Overview',
+    },
     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.",
     voteSuccess: 'You successfully voted to {number} dApp(s). All pending rewards are claimed.',
+    searchDapps: 'Search dapps',
   },
   bridge: {
     bridge: 'Bridge',

diff --git a/src/staking-v3/assets/vote_bg_light.webp b/src/staking-v3/assets/vote_bg_light.webp
diff --git a/src/staking-v3/components/Amount.vue b/src/staking-v3/components/Amount.vue
@@ -76,4 +76,10 @@ export default defineComponent({
   height: 24px;
   margin-right: 8px;
 }
+
+.body--dark {
+  .text--title {
+    color: $navy-1;
+  }
+}
 </style>