Add learn links (#1165)

* add learn links * clean up
AstarNetwork · Feb 6, 2024 · 54fd24a · 54fd24a
1 parent 20dc746
commit 54fd24a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git 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
@@ -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
@@ -115,26 +115,52 @@
 
         <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,
                   })
                 }}
               </li>
               <li>
                 {{
-                  $t('stakingV3.minBalanceAfterStaking', {
+                  $t('stakingV3.voting.minBalanceAfterStaking', {
                     amount: constants?.minBalanceAfterStaking,
                     symbol: nativeTokenSymbol,
                   })
                 }}
               </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
@@ -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;
+  }
+}