Merge pull request #652 from Adamant-im/ui-add-stake-option

feat: UI add stake option
Adamant-im · Aug 5, 2024 · 9f3d808 · 9f3d808
2 parents a5ee527 + 9985324
commit 9f3d808
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 23 deletions.
diff --git a/src/components/WalletCardListActions.vue b/src/components/WalletCardListActions.vue
@@ -10,25 +10,37 @@
       </v-list-item-title>
     </v-list-item>
 
-    <v-list-item v-if="isADM" @click="buyTokens">
-      <template #prepend>
-        <v-icon :class="`${className}__icon`" icon="mdi-finance" />
-      </template>
+    <template v-if="isADM">
+      <v-list-item @click="stakeAndEarn">
+        <template #prepend>
+          <icon :width="24" :height="24"><stake-icon /></icon>
+        </template>
 
-      <v-list-item-title :class="`${className}__title`">
-        {{ $t('home.buy_tokens_btn') }}
-      </v-list-item-title>
-    </v-list-item>
+        <v-list-item-title :class="`${className}__title`">
+          {{ $t('home.stake_and_earn_btn') }}
+        </v-list-item-title>
+      </v-list-item>
 
-    <v-list-item v-if="isADM && !hasAdmTokens" @click="getFreeTokens">
-      <template #prepend>
-        <v-icon :class="`${className}__icon`" icon="mdi-gift" />
-      </template>
+      <v-list-item @click="buyTokens">
+        <template #prepend>
+          <v-icon :class="`${className}__icon`" icon="mdi-finance" />
+        </template>
 
-      <v-list-item-title :class="`${className}__title`">
-        {{ $t('home.free_adm_btn') }}
-      </v-list-item-title>
-    </v-list-item>
+        <v-list-item-title :class="`${className}__title`">
+          {{ $t('home.buy_tokens_btn') }}
+        </v-list-item-title>
+      </v-list-item>
+
+      <v-list-item v-if="!hasAdmTokens" @click="getFreeTokens">
+        <template #prepend>
+          <v-icon :class="`${className}__icon`" icon="mdi-gift" />
+        </template>
+
+        <v-list-item-title :class="`${className}__title`">
+          {{ $t('home.free_adm_btn') }}
+        </v-list-item-title>
+      </v-list-item>
+    </template>
 
     <buy-tokens-dialog v-model="showBuyTokensDialog" :adamant-address="$store.state.address" />
   </v-list>
@@ -37,11 +49,15 @@
 <script>
 import { AllCryptos } from '@/lib/constants/cryptos'
 import BuyTokensDialog from '@/components/BuyTokensDialog.vue'
+import Icon from '@/components/icons/BaseIcon.vue'
+import StakeIcon from '@/components/icons/common/Stake.vue'
 import { websiteUriToOnion } from '@/lib/uri'
 
 export default {
   components: {
-    BuyTokensDialog
+    BuyTokensDialog,
+    Icon,
+    StakeIcon
   },
   props: {
     crypto: {
@@ -72,6 +88,9 @@ export default {
         }
       })
     },
+    stakeAndEarn() {
+      this.$router.push('/votes')
+    },
     buyTokens() {
       this.showBuyTokensDialog = true
     },

diff --git a/src/components/icons/common/Stake.vue b/src/components/icons/common/Stake.vue
@@ -0,0 +1,12 @@
+<template>
+  <g>
+    <path
+      id="path0"
+      d="M402.992 32H108.992C88.571 32.0042 68.9878 40.1194 54.5495 54.5608C40.1111 69.0021 32 88.587 32 109.008V403.008C32.0042 423.426 40.1172 443.007 54.5551 457.445C68.993 471.883 88.5737 479.996 108.992 480H402.992C423.413 480 442.998 471.889 457.439 457.451C471.881 443.012 479.996 423.429 480 403.008V109.008C480 88.5842 471.887 68.9969 457.445 54.5551C443.003 40.1133 423.416 32 402.992 32ZM331.184 310.816L362.192 341.824C363.528 343.162 364.588 344.751 365.31 346.499C366.033 348.247 366.404 350.12 366.402 352.011C366.401 353.903 366.027 355.775 365.302 357.522C364.577 359.269 363.514 360.856 362.176 362.192C360.838 363.528 359.249 364.588 357.501 365.31C355.753 366.033 353.88 366.404 351.989 366.402C350.097 366.401 348.225 366.027 346.478 365.302C344.731 364.577 343.144 363.514 341.808 362.176L310.8 331.168C294.48 343.056 275.312 349.296 255.984 349.296C236.656 349.296 217.488 343.056 201.168 331.168L170.16 362.176C167.459 364.875 163.797 366.39 159.978 366.389C156.16 366.387 152.499 364.869 149.8 362.168C147.101 359.467 145.586 355.805 145.587 351.986C145.589 348.168 147.107 344.507 149.808 341.808L180.816 310.8C169.228 294.875 162.986 275.687 162.986 255.992C162.986 236.297 169.228 217.109 180.816 201.184L149.808 170.176C147.107 167.475 145.59 163.812 145.59 159.992C145.59 156.172 147.107 152.509 149.808 149.808C152.509 147.107 156.172 145.59 159.992 145.59C163.812 145.59 167.475 147.107 170.176 149.808L201.184 180.816C217.112 169.235 236.299 162.997 255.992 162.997C275.685 162.997 294.872 169.235 310.8 180.816L341.808 149.808C343.145 148.471 344.733 147.41 346.48 146.686C348.228 145.962 350.101 145.59 351.992 145.59C353.883 145.59 355.756 145.962 357.504 146.686C359.251 147.41 360.839 148.471 362.176 149.808C363.513 151.145 364.574 152.733 365.298 154.48C366.022 156.228 366.394 158.101 366.394 159.992C366.394 161.883 366.022 163.756 365.298 165.504C364.574 167.251 363.513 168.839 362.176 170.176L331.168 201.184C342.764 217.108 349.013 236.299 349.016 255.997C349.019 275.696 342.776 294.889 331.184 310.816Z"
+    />
+    <path
+      id="path1"
+      d="M256 191.472C247.521 191.457 239.121 193.117 231.285 196.357C223.449 199.597 216.329 204.353 210.336 210.352C198.245 222.47 191.455 238.89 191.455 256.008C191.455 273.127 198.245 289.546 210.336 301.664C222.452 313.759 238.873 320.552 255.992 320.552C273.112 320.552 289.532 313.759 301.648 301.664C313.739 289.546 320.53 273.127 320.53 256.008C320.53 238.89 313.739 222.47 301.648 210.352C295.661 204.349 288.546 199.591 280.711 196.35C272.877 193.11 264.478 191.452 256 191.472Z"
+    />
+  </g>
+</template>
diff --git a/src/locales/de.json b/src/locales/de.json
@@ -85,7 +85,8 @@
     "free_tokens_link": "https://adamant.im/de-free-adm-tokens/",
     "send_btn": "Send funds",
     "share_uri": "Share {crypto} address",
-    "show_qr_code": "Show QR code"
+    "show_qr_code": "Show QR code",
+    "stake_and_earn_btn": "Setzen und verdienen"
   },
   "login": {
     "brand_title": "ADAMANT",
@@ -271,6 +272,7 @@
     "sec": "sec",
     "select_delegates": "First select delegates",
     "sent": "Votes have been sent",
+    "stake_info": "Um ADM einzusetzen und belohnungen zu erhalten, stimmen sie für einen aktiven Forging-Pool, dem sie vertrauen. Mehr dazu lesen sie im <a target=\"_blank\" href=\"https://news.adamant.im/hodl-list-of-adamant-pools-join-in-and-get-rewards-491a98610f4b\">ADAMANT blog</a>.",
     "summary_info": "Voting cost: 50 ADM. <a target=\"_blank\" href=\"https://medium.com/adamant-im/earning-money-on-adm-forging-4c7b6eb15516\">Read about voting and forging</a>.",
     "summary_title": "Review voting",
     "table_head_name": "Name",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -120,6 +120,7 @@
     "send_crypto": "Send {crypto}",
     "share_uri": "Share {crypto} address",
     "show_qr_code": "Show QR code",
+    "stake_and_earn_btn": "Stake and earn",
     "wallet": "wallet",
     "wallet_crypto": "{crypto} wallet"
   },
@@ -389,6 +390,7 @@
     "sec": "sec",
     "select_delegates": "Choose delegates",
     "sent": "Votes have been sent",
+    "stake_info": "To stake ADM and get rewards, vote for an active forging pool you trust. Read more in the <a target=\"_blank\" href=\"https://news.adamant.im/hodl-list-of-adamant-pools-join-in-and-get-rewards-491a98610f4b\">ADAMANT blog</a>.",
     "summary_info": "Voting cost: 50 ADM. <a target=\"_blank\" href=\"https://medium.com/adamant-im/earning-money-on-adm-forging-4c7b6eb15516\">Read about voting and forging</a>.",
     "summary_title": "Review voting",
     "table_head_name": "Name",

diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -121,6 +121,7 @@
     "send_crypto": "Отправить {crypto}",
     "share_uri": "Поделиться ссылкой {crypto}",
     "show_qr_code": "Показать QR-код",
+    "stake_and_earn_btn": "Застейкать и заработать",
     "wallet": "кошелек",
     "wallet_crypto": "Кошелек {crypto}"
   },
@@ -390,6 +391,7 @@
     "sec": "сек",
     "select_delegates": "Выберите делегатов",
     "sent": "Голоса отправлены",
+    "stake_info": "Чтобы застейкать ADM и получать вознаграждения, проголосуйте за активный форжинг-пул, которому вы доверяете. Подробнее читайте в <a target=\"_blank\" href=\"https://news.adamant.im/hodl-list-of-adamant-pools-join-in-and-get-rewards-491a98610f4b\">блоге АДАМАНТа</a>.",
     "summary_info": "Стоимость голосования: 50 ADM. <a target=\"_blank\" href=\"https://medium.com/adamant-im/earning-money-on-adm-forging-4c7b6eb15516\">Читайте о голосовании и форжинге</a>.",
     "summary_title": "Голосование",
     "table_head_name": "Имя",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -119,6 +119,7 @@
     "send_crypto": "发送 {crypto}",
     "share_uri": "共享 {crypto} 地址",
     "show_qr_code": "显示二维码",
+    "stake_and_earn_btn": "质押并赚取",
     "wallet": "钱包",
     "wallet_crypto": "{crypto} 钱包"
   },
@@ -388,6 +389,7 @@
     "sec": "秒",
     "select_delegates": "选择代理人",
     "sent": "投票已发送",
+    "stake_info": "要质押 ADM 并获得奖励，请投票给您信任的活跃锻造池。阅读更多内容在 <a target=\"_blank\" href=\"https://news.adamant.im/hodl-list-of-adamant-pools-join-in-and-get-rewards-491a98610f4b\">ADAMANT 博客上</a>.",
     "summary_info": "投票成本：50 ADM。<a target=\"_blank\" href=\"https://medium.com/adamant-im/earning-money-on-adm-forging-4c7b6eb15516\">阅读有关投票和伪造的信息</a>。",
     "summary_title": "评审投票",
     "table_head_name": "名称",

diff --git a/src/views/Votes.vue b/src/views/Votes.vue
@@ -17,7 +17,7 @@
               class="a-input"
               color="primary"
             />
-            <div :class="`${className}__spacer`" />
+            <div :class="`${className}__info`" v-html="t('votes.stake_info')" />
             <delegates-table
               :page="pagination.page"
               :per-page="pagination.rowsPerPage"
@@ -265,6 +265,16 @@ export default defineComponent({
       }
     }
   }
+  &__info {
+    @include a-text-explanation-enlarged();
+    padding: 20px 16px !important;
+    :deep(a) {
+      text-decoration-line: none;
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+  }
   &__review {
     padding-top: 15px !important;
     padding-bottom: 15px !important;
@@ -275,10 +285,6 @@ export default defineComponent({
       padding-right: 16px;
     }
   }
-  &__spacer {
-    height: 20px;
-    margin-top: 5px;
-  }
 }
 
 /** Themes **/