From 634e9b19e73088e5f7d7f6f62daf23914b39e84f Mon Sep 17 00:00:00 2001
From: Ayumi Takahashi <ayumee528@gmail.com>
Date: Fri, 19 Jan 2024 00:34:05 -0800
Subject: [PATCH] hotfix: add link banner for ledger users (#1144)

* add link banner for ledger users

* use endpointKey
---
 src/components/header/ClaimWarningBanner.vue | 47 +++++++++++++++++---
 src/i18n/en-US/index.ts                      |  3 ++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/components/header/ClaimWarningBanner.vue b/src/components/header/ClaimWarningBanner.vue
index 73770332b..b245b8cfe 100644
--- a/src/components/header/ClaimWarningBanner.vue
+++ b/src/components/header/ClaimWarningBanner.vue
@@ -1,11 +1,28 @@
 <template>
-  <div class="banner" :class="`banner--${network}`">
-    {{ network !== 2 ? $t('warning.claimRewards') : $t('warning.underDevelopmentShibuyaWarning') }}
+  <div>
+    <a
+      v-if="network !== endpointKey.SHIBUYA"
+      href="https://docs.astar.network/docs/learn/dapp-staking/dapp-staking-faq/#q-i-am-a-leger-astar-native-app-user-what-do-i-need-to-do"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="banner"
+      :class="`banner--${network}`"
+    >
+      <span>
+        <span class="text--ledger-users">{{ $t('warning.ledgerUsers') }}</span>
+        {{ $t('warning.ledgerUsersImportantInformation') }}
+      </span>
+      <astar-icon-arrow-right />
+    </a>
+    <div v-else class="banner" :class="`banner--${network}`">
+      {{ $t('warning.underDevelopmentShibuyaWarning') }}
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { endpointKey } from 'src/config/chainEndpoints';
 
 export default defineComponent({
   props: {
@@ -15,7 +32,7 @@ export default defineComponent({
     },
   },
   setup() {
-    return {};
+    return { endpointKey };
   },
 });
 </script>
@@ -26,13 +43,15 @@ export default defineComponent({
 .banner {
   color: $gray-2;
   font-weight: 600;
-  padding: 4px 16px 8px 16px;
-  line-height: 1.25;
+  padding: 4px 8px 8px 8px;
   font-size: 12px;
   position: relative;
   z-index: 1;
+  display: flex;
+  align-items: center;
   @media (min-width: $sm) {
     font-size: 14px;
+    padding: 4px 16px 8px 16px;
   }
 
   // shibuya, zKatana, local
@@ -53,4 +72,22 @@ export default defineComponent({
     background: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
   }
 }
+
+a.banner {
+  transition: all 0.2s ease;
+  &:hover {
+    filter: brightness(1.1);
+  }
+}
+
+.text--ledger-users {
+  font-weight: 800;
+  padding: 3px 9px;
+  border-radius: 4px;
+  border: 1px solid $gray-2;
+  margin-right: 4px;
+  @media (min-width: $sm) {
+    margin-right: 8px;
+  }
+}
 </style>
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 477c538c9..5aa4b1d58 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -71,6 +71,9 @@ export default {
       'DApp Staking V3 is coming early 2024! Make sure to claim your rewards and stay tuned for the release date.',
     underDevelopmentShibuyaWarning:
       'dApp Staking V3 is in beta. We are adding fixes and improves everyday to get ready for the launch.',
+    ledgerUsers: 'Ledger Users',
+    ledgerUsersImportantInformation:
+      'Important information regarding the upcoming transition to dApp Staking V3. Check out the details',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',