feat: added top page (#1033)

AstarNetwork · Nov 20, 2023 · 879705a · 879705a
1 parent 08a4123
commit 879705a
Show file tree

Hide file tree

Showing 10 changed files with 388 additions and 4 deletions.
diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -14,7 +14,7 @@ import RegisterDapp from 'src/pages/RegisterDapp.vue';
 import StakeManage from 'src/pages/StakeManage.vue';
 import DappPage from 'src/pages/DappPage.vue';
 import DappStakingV3Page from 'src/pages/DappStakingV3.vue';
-import { StakingHome } from 'src/staking-v3';
+import DiscoverV3 from 'src/staking-v3/components/DiscoverV3.vue';
 import { RouteRecordRaw } from 'vue-router';
 
 export {
@@ -176,7 +176,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: 'discover',
-        component: StakingHome,
+        component: DiscoverV3,
       },
     ],
   },

diff --git a/src/staking-v3/components/Ad.vue b/src/staking-v3/components/Ad.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="wrapper--ad">
+    <div class="card--ad">
+      <div>
+        <span class="text--title"> Unstoppable Community Grant </span>
+      </div>
+      <div>
+        <span class="text--value">The essential project to bring liquidity</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use './styles/ad.scss';
+</style>
diff --git a/src/staking-v3/components/Dapps.vue b/src/staking-v3/components/Dapps.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="wrapper--dapps">
+    <div v-for="(dapp, index) in registeredDapps" :key="index">
+      <div v-if="dapp" class="card--dapp">
+        <div class="card__top">
+          <div>
+            <img :src="dapp.basic.iconUrl" alt="icon" class="icon--dapp" />
+          </div>
+          <div>
+            <span class="text--title">{{ dapp.basic.name }}</span>
+          </div>
+        </div>
+        <div class="card__bottom">
+          <div>
+            <span class="text--label">2,432</span>
+          </div>
+          <div>
+            <span class="text--label">1.078M ASTR</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useDapps } from '../hooks';
+
+export default defineComponent({
+  setup() {
+    const { registeredDapps } = useDapps();
+
+    return { registeredDapps };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use './styles/dapps.scss';
+</style>
diff --git a/src/staking-v3/components/DiscoverV3.vue b/src/staking-v3/components/DiscoverV3.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="wrapper--discover">
+    <!-- Todo: Delete -->
+    <staking-home />
+    <feature-dapp />
+    <ad />
+    <dapps />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import StakingHome from './StakingHome.vue';
+import FeatureDapp from './FeatureDapp.vue';
+import Ad from './Ad.vue';
+import Dapps from './Dapps.vue';
+
+export default defineComponent({
+  components: {
+    StakingHome,
+    FeatureDapp,
+    Ad,
+    Dapps,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use './styles/discover-v3.scss';
+</style>
diff --git a/src/staking-v3/components/FeatureDapp.vue b/src/staking-v3/components/FeatureDapp.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="wrapper--promo">
+    <div class="row--title">
+      <span class="text--promo-title"> New dapp promotion </span>
+    </div>
+    <div>
+      <span> Ligtning-fast speed with near-zero gas fees dex in now available on Astar </span>
+    </div>
+    <div class="row--button">
+      <astar-button class="button--link"> Stake on Singlar </astar-button>
+    </div>
+    <div class="row--data">
+      <div class="card--data">
+        <div class="card__top">
+          <span class="text--card-title">BUILD</span>
+        </div>
+        <div class="card__bottom">
+          <span class="text--value">21</span>
+          <span class="text--value-small">/120</span>
+        </div>
+      </div>
+      <div class="promo__data">
+        <div class="card--data">
+          <div class="card__top">
+            <span class="text--card-title">Basic Rewards</span>
+          </div>
+          <div class="card__bottom">
+            <span class="text--value">9.7%</span>
+          </div>
+        </div>
+      </div>
+      <div class="promo__data">
+        <div class="card--data">
+          <div class="card__top">
+            <span class="text--card-title">Bonus Rewards</span>
+          </div>
+          <div class="card__bottom">
+            <span class="text--value">2.3%</span>
+          </div>
+        </div>
+      </div>
+      <div class="promo__data">
+        <div class="card--data">
+          <div class="card__top">
+            <span class="text--card-title">TVL</span>
+          </div>
+          <div class="card__bottom">
+            <span class="text--value">39.4%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row--start-staking">
+      <button class="button--staking">
+        <span class="text--start-staking">Start Staking Now</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+<style lang="scss" scoped>
+@use './styles/feature-dapp.scss';
+</style>
diff --git a/src/staking-v3/components/StakingHome.vue b/src/staking-v3/components/StakingHome.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, watch } from 'vue';
+import { defineComponent, onMounted, watch, watchEffect } from 'vue';
 import { useDapps, useDappStaking } from '../hooks';
 import { useAccount } from 'src/hooks';
 
@@ -53,6 +53,11 @@ export default defineComponent({
       }
     });
 
+    watchEffect(() => {
+      console.log('registeredDapps', registeredDapps.value);
+      console.log('protocolState', protocolState.value);
+    });
+
     return {
       registeredDapps,
       protocolState,
@@ -73,6 +78,6 @@ export default defineComponent({
 
 <style scoped>
 .main--wrapper {
-  margin-top: 40px;
+  margin-bottom: 40px;
 }
 </style>
diff --git a/src/staking-v3/components/styles/ad.scss b/src/staking-v3/components/styles/ad.scss
@@ -0,0 +1,44 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--ad {
+  padding: 0 16px;
+  width: 100%;
+  margin-bottom: 8px;
+  @media (min-width: $md) {
+    padding: 0;
+  }
+}
+
+.card--ad {
+  background-color: $navy-1;
+  width: 100%;
+  height: 196px;
+  border-radius: 10px;
+  padding: 24px 32px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  max-width: 374px;
+}
+
+.text--title {
+  font-weight: 700;
+  font-size: 20px;
+  color: white;
+}
+
+.text--value {
+  font-weight: 700;
+  font-size: 14px;
+  color: white;
+}
+
+.body--dark {
+  .card--ad {
+    background-color: $astar-blue;
+  }
+  .text--title,
+  .text--value {
+    color: $gray-1;
+  }
+}
diff --git a/src/staking-v3/components/styles/dapps.scss b/src/staking-v3/components/styles/dapps.scss
@@ -0,0 +1,48 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--dapps {
+  padding: 0 16px;
+  width: 100%;
+  @media (min-width: $md) {
+    padding: 0;
+  }
+}
+
+.card--dapp {
+  width: 280px;
+  height: 196px;
+  border: 1px solid $navy-1;
+  border-radius: 16px;
+  padding: 32px;
+}
+
+.card__top {
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid $navy-3;
+}
+
+.icon--dapp {
+  width: 80px;
+  height: 80px;
+}
+
+.card__bottom {
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+}
+
+.body--dark {
+}
+
+.body--dark {
+  .card--dapp {
+    border: 1px solid $gray-1;
+  }
+  .card__top {
+    border-bottom: 1px solid $gray-4;
+  }
+}
diff --git a/src/staking-v3/components/styles/discover-v3.scss b/src/staking-v3/components/styles/discover-v3.scss
@@ -0,0 +1,9 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--discover {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 34px;
+  margin-bottom: 34px;
+}