From e3e26a0338eff2089c9616aa7e77233bf2f3cf2a Mon Sep 17 00:00:00 2001 From: Ignacio Date: Thu, 11 Apr 2024 15:29:06 +0800 Subject: [PATCH] feat: add unstaked tokens --- public/locales/en/staking.json | 5 +- public/locales/zh-CN/staking.json | 1 + public/locales/zh-HK/staking.json | 1 + .../network_card/staking_data_box.tsx | 97 ++++++++++++------- 4 files changed, 66 insertions(+), 38 deletions(-) diff --git a/public/locales/en/staking.json b/public/locales/en/staking.json index d86193e3..f3f8fea3 100644 --- a/public/locales/en/staking.json +++ b/public/locales/en/staking.json @@ -205,8 +205,9 @@ "totalStaked": "Total staked", "trusted provider": "Pick Trusted Provider", "trusted provider desc": "We have the infrastructure in place to act as validators and to secure networks", - "unbonding period": "Unbonding period", - "unbondingTokens": "Unbonding tokens", + "unbonding period": "Unstaking period", + "unbondingTokens": "Unstaking tokens", + "unstakedTokens": "Unstaked", "unstaking para 1": "The action of transferring your staked tokens from one validator to another, it is called restaking your tokens. Your rewards will keep calculating if you choose to restake. Your rewards will stop calculating once you choose unstaking. It is subject to a lockup period (normally 21-day) and during this lockup, you cannot do anything with your tokens that are undergoing unlocking.", "unstaking para 2": "Therefore, if your plan is to continue with staking, and you simply wish to switch to a different validator, use restake instead to continue accruing your staking rewards and airdrops.", "unstaking para 3": "After the first restaking, you need to wait for a certain period of time (corresponding with unstaking period) before making another restaking transaction. And do make sure you have sufficient funds in your available balance to pay for the transaction fee.", diff --git a/public/locales/zh-CN/staking.json b/public/locales/zh-CN/staking.json index e6572fec..cce09bb3 100644 --- a/public/locales/zh-CN/staking.json +++ b/public/locales/zh-CN/staking.json @@ -204,6 +204,7 @@ "trusted provider desc": "我们已经建立了完善的验证人基础设施，全天候监控区块链网络安全", "unbonding period": "解绑期", "unbondingTokens": "解绑代币", + "unstakedTokens": "未抵押的", "unstaking para 1": "将您质押的代币从一个验证器转移到另一个验证器的操作称为重新质押您的代币。", "unstaking para 2": "因此，如果您的计划是继续质押，并且您只是希望切换到不同的验证器，请使用重新质押来继续累积您的质押奖励和空投。", "unstaking para 3": "第一次重质押后，您需要等待一定时间（对应解质押期）才能进行下一次重质押交易。", diff --git a/public/locales/zh-HK/staking.json b/public/locales/zh-HK/staking.json index 0517e91e..2d3fc6ba 100644 --- a/public/locales/zh-HK/staking.json +++ b/public/locales/zh-HK/staking.json @@ -204,6 +204,7 @@ "trusted provider desc": "我們已經建立了完善的驗證人基礎設施，全天候監控區塊鏈網路安全", "unbonding period": "解綁期", "unbondingTokens": "解綁代幣", + "unstakedTokens": "未抵押的", "unstaking para 1": "將您質押的代幣從一個驗證器轉移到另一個驗證器的操作稱為重新質押您的代幣。", "unstaking para 2": "因此，如果您的計劃是繼續質押，並且您只是希望切換到不同的驗證器，請使用重新質押來繼續累積您的質押獎勵和空投。", "unstaking para 3": "第一次重質押後，您需要等待一定時間（對應解質押期）才能進行下一次重質押交易。", diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx b/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx index 23ee5a52..8e9c139f 100644 --- a/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx +++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx @@ -20,6 +20,7 @@ import { formatStakedDataUSD, } from "@src/screens/staking/lib/staking_sdk/formatters"; import type { StakeAccount } from "@src/screens/staking/lib/staking_sdk/staking_client_types"; +import { sumCoins } from "@src/screens/staking/lib/staking_sdk/utils/coins"; import type { Network, NetworkKey } from "@src/utils/network_info"; import StakeAccounts, { StakeAccountsNum } from "./stake_accounts"; @@ -45,49 +46,67 @@ const StakingDataBox = ({ network, onFocusContent }: PopOverProps) => { onFocusContent(isDisplayed); }; - const { claimableRewards, stakeAccounts, stakedData, unbondingTokens } = - useMemo(() => { - const result = { - claimableRewards: null as NetworkClaimableRewards | null, - stakeAccounts: null as null | StakeAccount[], - stakedData: null as Coin | null, - unbondingTokens: null as { period: string; text: string } | null, - }; - - if (!!stakingNetworkId) { - result.stakeAccounts = getStakeAccountsForNetwork( - stakingRef.current.state, - stakingNetworkId, - ); + const { + claimableRewards, + stakeAccounts, + stakedData, + unbondingTokens, + unstakedTokens, + } = useMemo(() => { + const result = { + claimableRewards: null as NetworkClaimableRewards | null, + stakeAccounts: null as null | StakeAccount[], + stakedData: null as Coin | null, + unbondingTokens: null as { period: string; text: string } | null, + unstakedTokens: null as Coin | null, + }; + + if (!!stakingNetworkId) { + result.stakeAccounts = getStakeAccountsForNetwork( + stakingRef.current.state, + stakingNetworkId, + ); - result.stakedData = getStakedDataForNetwork( - stakingRef.current.state, - stakingNetworkId, - ); + result.stakedData = getStakedDataForNetwork( + stakingRef.current.state, + stakingNetworkId, + ); - result.claimableRewards = - getClaimableRewardsForNetwork( - stakingRef.current.state, - stakingNetworkId, - ) || null; + result.unstakedTokens = result.stakeAccounts.reduce( + (acc, stakeAccount) => { + if (stakeAccount.status !== "inactive") return acc; + + return sumCoins(acc || undefined, { + amount: stakeAccount.amount, + denom: stakeAccount.denom, + }); + }, + null as Coin | null, + ); - const unbonding = getUnbondingTokensForNetwork( + result.claimableRewards = + getClaimableRewardsForNetwork( stakingRef.current.state, stakingNetworkId, - ); - - if (unbonding) { - result.unbondingTokens = { - period: unbonding.period - ? new Date(Number(unbonding.period) * 1000).toLocaleString() - : "", - text: formatCoin(unbonding.coin, { decimals: 4 }), - }; - } + ) || null; + + const unbonding = getUnbondingTokensForNetwork( + stakingRef.current.state, + stakingNetworkId, + ); + + if (unbonding) { + result.unbondingTokens = { + period: unbonding.period + ? new Date(Number(unbonding.period) * 1000).toLocaleString() + : "", + text: formatCoin(unbonding.coin, { decimals: 4 }), + }; } + } - return result; - }, [stakingNetworkId, stakingRef]); + return result; + }, [stakingNetworkId, stakingRef]); useEffect(() => { fetchCoinPriceForNetwork(stakingRef.current, stakingNetworkId); @@ -175,6 +194,12 @@ const StakingDataBox = ({ network, onFocusContent }: PopOverProps) => { )} + {!!unstakedTokens && ( +
+
{t("unstakedTokens")}
+
{formatCoin(unstakedTokens)}
+
+ )} {!!stakeAccounts?.length && (
{t("accounts")}