feat: add lock-up notice (#199)

forbole · Mar 26, 2024 · 9aa094f · 9aa094f
1 parent d94a4ba
commit 9aa094f
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 3 deletions.
diff --git a/public/locales/en/staking.json b/public/locales/en/staking.json
@@ -33,6 +33,8 @@
   "definitions": {
     "apy": "Annual Percentage Yield (APY) shows the rate of token earnings you can achieve from staking. It includes compound interest, helping you gauge the potential growth of your investment.",
     "tvl": "Total Value Locked (TVL) is the total USD value of all assets staked with Forbole on this network. It indicates Forbole's staking scale and popularity.",
+    "unbonding_one": "After staking, your tokens will be locked and unable to be transferred until the {{count}}-day unstaking period ends.",
+    "unbonding_other": "After staking, your tokens will be locked and unable to be transferred until the {{count}}-days unstaking period ends",
     "votingPower": "The \"Voting Power\" is the total amount of tokens staked with Forbole on the network. The more amount of tokens staked, the higher the voting power."
   },
   "description": "Stake, earn and secure the networks with Forbole",
@@ -106,6 +108,10 @@
   "stake with us!": "Stake with us!",
   "stake_now": "Stake Now",
   "staked by forbole": "Staked by Forbole",
+  "staking": {
+    "days_one": "{{count}} day",
+    "days_other": "{{count}} days"
+  },
   "staking para 1": "The action that token holders stake their tokens to validators to secure the network is called staking. Staked tokens are eligible to receive staking rewards. Newly minted tokens and transactions fees are given out as rewards to bonded staking token holders.",
   "staking para 2": "Stakers stake their staking power to validators, but that does not mean the validators possess or have custody of the tokens staked to them. In other words, validators cannot steal or take away stakers’ tokens. Your staked amount of tokens will not be decreased in most situations, however, if your validator is punished by slashing, your staked token is at risk of being slashed too (see below for “slashing”).",
   "staking q": "What is staking?",
@@ -141,6 +147,7 @@
     },
     "title": "Stake with Forbole",
     "tokenAmount": "Token amount",
+    "unbonding": "Unstaking period",
     "walletSellect": "Stake from:"
   },
   "stakingWidget": {

diff --git a/public/locales/zh-CN/staking.json b/public/locales/zh-CN/staking.json
@@ -33,6 +33,7 @@
   "definitions": {
     "apy": "年收益率（APY）显示您可以通过质押获得的代币收益率。 它包括复利，帮助您衡量投资的潜在增长。",
     "tvl": "锁定总价值 (TVL) 是 Forbole 在该网络上质押的所有资产的美元总价值。 它表明了 Forbole 的质押规模和受欢迎程度。",
+    "unbonding_other": "质押后，您的代币将被锁定，直到 {{count}} 天解质期结束后才能转移",
     "votingPower": "“投票权”是指 Forbole 在网络上质押的代币总量。 质押的代币数量越多，投票权就越高。"
   },
   "description": " 在 Forbole 质押，赚取收益，守护网络",
@@ -106,6 +107,9 @@
   "stake with us!": "与我们一起赌注！",
   "stake_now": "立即质押",
   "staked by forbole": "Forbole 质押",
+  "staking": {
+    "days_other": "{{count}}天"
+  },
   "staking para 1": "代币持有者将其代币质押给验证者以保护网络的行为称为质押。",
   "staking para 2": "质押者将质押权质押给验证者，但这并不意味着验证者拥有或保管质押给他们的代币。",
   "staking q": "什么是质押？",
@@ -141,6 +145,7 @@
     },
     "title": "用 Forbole 进行桩桩",
     "tokenAmount": "代币数量",
+    "unbonding": "解押期",
     "walletSellect": "股权来自："
   },
   "stakingWidget": {

diff --git a/public/locales/zh-HK/staking.json b/public/locales/zh-HK/staking.json
@@ -33,6 +33,7 @@
   "definitions": {
     "apy": "年收益率（APY）顯示您可以透過質押獲得的代幣收益率。 它包括複利，幫助您衡量投資的潛在成長。",
     "tvl": "鎖定總價值 (TVL) 是 Forbole 在該網絡上質押的所有資產的美元總價值。 它顯示了 Forbole 的質押規模和受歡迎程度。",
+    "unbonding_other": "質押後，您的代幣將被鎖定，直到 {{count}} 天解質期結束後才能轉移",
     "votingPower": "「投票權」指 Forbole 在網路上質押的代幣總量。 質押的代幣數量越多，投票權越高。"
   },
   "description": " 在 Forbole 质押，赚取收益，守护网络",
@@ -106,6 +107,9 @@
   "stake with us!": "與我們一起賭注！",
   "stake_now": "立即質押",
   "staked by forbole": "Forbole 質押",
+  "staking": {
+    "days_other": "{{count}}日"
+  },
   "staking para 1": "代幣持有者將其代幣質押給驗證者以保護網路的行為稱為質押。",
   "staking para 2": "質押者將質押權質押給驗證者，但這並不意味著驗證者擁有或保管質押給他們的代幣。",
   "staking q": "什麼是質押？",
@@ -141,6 +145,7 @@
     },
     "title": "用 Forbole 進行樁樁",
     "tokenAmount": "代幣數量",
+    "unbonding": "解押期",
     "walletSellect": "股權來自："
   },
   "stakingWidget": {

diff --git a/...s/staking/components/networks/components/network_grid/components/network_card/popover.tsx b/...s/staking/components/networks/components/network_grid/components/network_card/popover.tsx
@@ -257,8 +257,10 @@ const PopOver = ({
 
               return networkSummary?.bonded > 0
                 ? [
-                    network.denom?.toUpperCase(),
-                    convertToMoney(networkSummary.bonded),
+                    t("votingPower"),
+                    `${convertToMoney(
+                      networkSummary.bonded,
+                    )} ${network.denom?.toUpperCase()}`,
                   ]
                 : null;
             })();

diff --git a/src/screens/staking/components/staking_section/staking_modal.module.scss b/src/screens/staking/components/staking_section/staking_modal.module.scss
@@ -53,3 +53,8 @@
   flex-direction: column;
   gap: 12px;
 }
+
+.labelValue {
+  color: #25282d;
+  font-weight: 600;
+}
diff --git a/src/screens/staking/components/staking_section/staking_modal.tsx b/src/screens/staking/components/staking_section/staking_modal.tsx
@@ -1,5 +1,6 @@
 import BigNumber from "bignumber.js";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import FormInput from "@src/components/form_input";
@@ -24,6 +25,7 @@ import { mainNetworkDenom } from "@src/screens/staking/lib/staking_sdk/core/base
 import { formatCoin } from "@src/screens/staking/lib/staking_sdk/formatters";
 import { getAccountNormalisedBalance } from "@src/screens/staking/lib/staking_sdk/utils/accounts";
 import { getEmptyCoin } from "@src/screens/staking/lib/staking_sdk/utils/coins";
+import { getUnbondingTimeForNetwork } from "@src/screens/staking/lib/staking_sdk/utils/networks";
 import {
   MAX_MEMO,
   stakeAmount,
@@ -52,6 +54,7 @@ const StakingModal = () => {
   const [memoError, setMemoError] = useState("");
   const [memo, setMemo] = useState("");
 
+  const { locale } = useRouter();
   const isOpen = !!selectedAccount && selectedAction === "stake";
 
   const { state: stakingState } = stakingRef.current;
@@ -183,6 +186,8 @@ const StakingModal = () => {
     return null;
   })();
 
+  const unbondingPeriod = getUnbondingTimeForNetwork(networkInfo, locale);
+
   return (
     <ModalBase onClose={onClose} open={isOpen} title={t("stakingModal.title")}>
       <form className={styles.wrapper} onSubmit={onSubmit}>
@@ -203,7 +208,27 @@ const StakingModal = () => {
               />{" "}
               APY
             </Label>
-            <div>{(networkInfo.apy * 100).toFixed(0)}%</div>
+            <div className={styles.labelValue}>
+              {(networkInfo.apy * 100).toFixed(0)}%
+            </div>
+          </div>
+        )}
+        {unbondingPeriod && (
+          <div className={styles.row}>
+            <Label className={styles.apy}>
+              <IconInfoCircle
+                data-tooltip-content={t("definitions.unbonding", {
+                  count: unbondingPeriod.days,
+                })}
+                data-tooltip-id={tooltipId}
+              />{" "}
+              {t("stakingModal.unbonding")}
+            </Label>
+            <div className={styles.labelValue}>
+              {t("staking.days", {
+                count: unbondingPeriod.days,
+              })}
+            </div>
           </div>
         )}
         <div className={styles.selectGroup}>