From 54fd24ac437b029e558d4033e0cfcc640b607aec Mon Sep 17 00:00:00 2001
From: Ayumi Takahashi <ayumee528@gmail.com>
Date: Mon, 5 Feb 2024 22:23:00 -0800
Subject: [PATCH] Add learn links (#1165)

* add learn links

* clean up
---
 src/i18n/en-US/index.ts                    | 12 ++++++--
 src/links/index.ts                         |  2 ++
 src/staking-v3/components/Vote.vue         | 34 ++++++++++++++++++++--
 src/staking-v3/components/styles/vote.scss | 11 +++++++
 4 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 006cf48fc..7d040950d 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -744,9 +744,6 @@ export default {
     transferText: 'I would like to move my funds from',
     stakeVoteOn: 'And vote/stake on',
     stakeTitle: 'Stake!',
-    minimumStakingAmount: 'Minimum staking amount is {amount} {symbol}',
-    minBalanceAfterStaking:
-      'Account must hold more than {amount} {symbol} transferable tokens after you stake.',
     selectProjects: 'Select projects',
     chooseProject: 'Choose a project to vote',
     availableToVote: 'Available to vote',
@@ -921,6 +918,15 @@ export default {
     unlockFrom: 'Unlock from {name}',
     startUnlocking: 'Start unlocking',
     unlockingDay: 'Unlocking takes {unbondingPeriod} days before you can withdraw',
+    voting: {
+      note: 'Note',
+      minimumStakingAmount: 'Minimum staking amount is {amount} {symbol}',
+      minBalanceAfterStaking:
+        'Account must hold more than {amount} {symbol} transferable tokens after you stake.',
+      learn: 'Learn',
+      whatIsDappStaking: 'What is dApp staking?',
+      howToParticipate: 'How to participate dApp staking?',
+    },
   },
   bridge: {
     bridge: 'Bridge',
diff --git a/src/links/index.ts b/src/links/index.ts
index 1f53836df..25d91826e 100644
--- a/src/links/index.ts
+++ b/src/links/index.ts
@@ -11,6 +11,8 @@ export const docsUrl = {
   tokenomics2: 'https://docs.astar.network/docs/learn/tokenomics2/',
   faqLedger:
     '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',
+  learnDappStaking: 'https://docs.astar.network/docs/learn/dapp-staking/',
+  dappStakingForStakers: 'https://docs.astar.network/docs/use/dapp-staking/for-stakers/',
 };
 
 export const socialUrl = {
diff --git a/src/staking-v3/components/Vote.vue b/src/staking-v3/components/Vote.vue
index 93fdb38d0..6f221e94d 100644
--- a/src/staking-v3/components/Vote.vue
+++ b/src/staking-v3/components/Vote.vue
@@ -115,11 +115,11 @@
 
         <div class="column--help">
           <div class="note">
-            <b>{{ $t('toast.note') }}</b>
+            <b>{{ $t('stakingV3.voting.note') }}</b>
             <ul>
               <li>
                 {{
-                  $t('stakingV3.minimumStakingAmount', {
+                  $t('stakingV3.voting.minimumStakingAmount', {
                     amount: constants?.minStakeAmountToken,
                     symbol: nativeTokenSymbol,
                   })
@@ -127,7 +127,7 @@
               </li>
               <li>
                 {{
-                  $t('stakingV3.minBalanceAfterStaking', {
+                  $t('stakingV3.voting.minBalanceAfterStaking', {
                     amount: constants?.minBalanceAfterStaking,
                     symbol: nativeTokenSymbol,
                   })
@@ -135,6 +135,32 @@
               </li>
             </ul>
           </div>
+
+          <div class="note">
+            <b>{{ $t('stakingV3.voting.learn') }}</b>
+            <ul>
+              <li>
+                <a
+                  :href="docsUrl.learnDappStaking"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="link--learn"
+                >
+                  {{ $t('stakingV3.voting.whatIsDappStaking') }}
+                </a>
+              </li>
+              <li>
+                <a
+                  :href="docsUrl.dappStakingForStakers"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="link--learn"
+                >
+                  {{ $t('stakingV3.voting.howToParticipate') }}
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -160,6 +186,7 @@ import BackToPage from 'src/components/common/BackToPage.vue';
 import RewardsPanel from './RewardsPanel.vue';
 import ErrorPanel from './ErrorPanel.vue';
 import { Path } from 'src/router';
+import { docsUrl } from 'src/links';
 
 export default defineComponent({
   components: {
@@ -358,6 +385,7 @@ export default defineComponent({
       dAppToMoveTokensFrom,
       availableToMove,
       errorMessage,
+      docsUrl,
     };
   },
 });
diff --git a/src/staking-v3/components/styles/vote.scss b/src/staking-v3/components/styles/vote.scss
index f29127dd8..151893c38 100644
--- a/src/staking-v3/components/styles/vote.scss
+++ b/src/staking-v3/components/styles/vote.scss
@@ -65,6 +65,9 @@ li {
 
 .column--help {
   order: 1;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
   @media (min-width: $sm) {
     width: 320px;
     order: 2;
@@ -228,3 +231,11 @@ li {
   font-size: 14px;
   font-weight: 500;
 }
+
+.link--learn{
+  color: $astar-blue;
+  transition: all 0.2s ease;
+  &:hover{
+    color: $astar-blue-dark;
+  }
+}