add claim warning banner (#1104)

* add claim warning banner * update style
AstarNetwork · Dec 29, 2023 · 4e7b3f8 · 4e7b3f8
1 parent e1cd87f
commit 4e7b3f8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 18 deletions.
diff --git a/src/components/header/ClaimWarningBanner.vue b/src/components/header/ClaimWarningBanner.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="banner" :class="`banner--${network}`">
+    {{ $t('warning.claimRewards') }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    network: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
+.banner {
+  color: $gray-2;
+  font-weight: 600;
+  padding: 4px 16px 8px 16px;
+  line-height: 1.25;
+  font-size: 12px;
+  @media (min-width: $sm) {
+    font-size: 14px;
+  }
+
+  // shibuya, zKatana, local
+  background: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
+
+  // astar native
+  &.banner--0 {
+    background: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
+  }
+
+  // shiden
+  &.banner--1 {
+    background: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
+  }
+
+  // zkEVM
+  &.banner--3 {
+    background: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
+  }
+}
+</style>
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
@@ -24,6 +24,8 @@
       <mobile-nav v-if="width <= screenSize.lg" />
     </header-comp>
 
+    <claim-warning-banner :network="currentNetworkIdx" />
+
     <!-- Modals -->
     <modal-network
       v-if="modalNetwork"
@@ -108,6 +110,7 @@ import { container } from 'src/v2/common';
 import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
 import { Symbols } from 'src/v2/symbols';
 import { isValidAddressPolkadotAddress } from '@astar-network/astar-sdk-core';
+import ClaimWarningBanner from './ClaimWarningBanner.vue';
 
 interface Modal {
   modalNetwork: boolean;
@@ -127,6 +130,7 @@ export default defineComponent({
     ModalPolkasafe,
     ModalAccountUnification,
     MobileNav,
+    ClaimWarningBanner,
   },
   setup() {
     const { width, screenSize } = useBreakpoints();

diff --git a/src/components/header/HeaderComp.vue b/src/components/header/HeaderComp.vue
@@ -46,40 +46,30 @@ export default defineComponent({
   padding-left: 16px;
   padding-right: 16px;
   border-bottom: 3px solid transparent;
-  border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
-  border-image-slice: 1;
   @media (min-width: $lg) {
     padding: 40px 40px 25px 40px;
     height: 6rem;
   }
 
+  // shibuya, zKatana, local
+  border-image: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
+  border-image-slice: 1;
+
   // astar native
   &.header__border-0 {
-    border-image: linear-gradient(270deg, #e6007a 25%, #ff9dd1 100%);
+    border-image: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
     border-image-slice: 1;
   }
 
   // shiden
   &.header__border-1 {
-    border-image: linear-gradient(270deg, #5928b1 25%, #b092ea 100%);
-    border-image-slice: 1;
-  }
-
-  // shibuya
-  &.header__border-2 {
-    border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
+    border-image: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
     border-image-slice: 1;
   }
 
   // zkEVM
   &.header__border-3 {
-    border-image: linear-gradient(270deg, #703ac2 25%, #226dff 100%);
-    border-image-slice: 1;
-  }
-
-  // zKatana
-  &.header__border-4 {
-    border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
+    border-image: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
     border-image-slice: 1;
   }
 }

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -67,6 +67,8 @@ export default {
       'Account balances in {network} network is below than the existential deposit amount',
     withdrawalNotSupport: "The portal doesn't support withdrawing to {chain} at this moment",
     ledgerNotOpened: 'Ledger has not opened Astar App. Please open it and refresh this page.',
+    claimRewards:
+      'DApp Staking V3 is coming early next year! Make sure to claim your rewards and stay tuned for the release date.',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',

diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
@@ -67,7 +67,8 @@ export default defineComponent({
   height: 100%;
   @media (min-width: $lg) {
     padding: 0 40px;
-    padding-top: 12px;
+    padding-top: 42px;
+    // padding-top: 12px; without the header warning banner
   }
 }
 </style>