diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json index b0a3f4cd8..8dd3e2e6c 100644 --- a/src/assets/locales/en/common.json +++ b/src/assets/locales/en/common.json @@ -32,9 +32,9 @@ "days distance_one": "{{ count }} Day Ago", "days distance_other": "{{ count }} Days Ago", "no results": "No results", - "in days_zero": "Today", - "in days_one": "in {{ count }} day", - "in days_other": "in {{ count }} days", + "days from now_zero": "Today", + "days from now_one": "{{ count }} day from now", + "days from now_other": "{{ count }} days from now", "it's empty": "It's empty", "claim": "Claim", "manage": "Manage", @@ -52,4 +52,7 @@ "generating": "Generating...", "balance": "Balance", "go back": "Go back", + "amount": "Amount", + "completition date": "Completition date", + "completition time": "Completition time", } diff --git a/src/assets/locales/en/staking.json b/src/assets/locales/en/staking.json index d1e1a89e9..34442cf24 100644 --- a/src/assets/locales/en/staking.json +++ b/src/assets/locales/en/staking.json @@ -10,7 +10,7 @@ "unbonded": "Unboned", "active": "Active", "unknown": "Unknown", - "restake to": "Restake to", + "restake to": "Restaking", "restake from": "Restake from", "pending rewards": "Pending rewards", "restaking": "Restaking", diff --git a/src/hooks/staking/useTotalRedelegatingAmount.ts b/src/hooks/staking/useTotalRedelegatingAmount.ts index 924c00d38..4f4ed863b 100644 --- a/src/hooks/staking/useTotalRedelegatingAmount.ts +++ b/src/hooks/staking/useTotalRedelegatingAmount.ts @@ -39,7 +39,7 @@ const useTotalRedelegatingAmount = (userAddress?: string) => { let amount = 0; let fetchError: ApolloError | undefined; - while (!completed && userAddress !== undefined) { + while (!completed && address !== undefined) { // eslint-disable-next-line no-await-in-loop const { data, error: apolloError } = await client.query({ query: GetAccountRedelegations, @@ -87,7 +87,7 @@ const useTotalRedelegatingAmount = (userAddress?: string) => { } setLoading(false); - }, [userAddress, client, address, currentChainInfo.stakeCurrency.coinMinimalDenom]); + }, [client, address, currentChainInfo.stakeCurrency.coinMinimalDenom]); // Effect to trigger the data fetch logic. React.useEffect(() => { diff --git a/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/index.tsx b/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/index.tsx index 647ff83d3..61ea0afb4 100644 --- a/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/index.tsx +++ b/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/index.tsx @@ -56,23 +56,20 @@ const RedelegationListItem: React.FC = ({ redelegatio {/* Restake amount */} - - {t('restaking')} - {amount} - + + {t('amount', { ns: 'common' })}: {amount} + {/* Restake completion info */} - - {t('staking:expected delivery')} - - {format(redelegation.completionTime, 'dd MMM, hh:mm')} - - {t('common:in days', { - count: differenceInDays(redelegation.completionTime, new Date()), - })} - - - + + {t('completition time', { ns: 'common' })}:{' '} + {format(redelegation.completionTime, 'EEEE do MMMM, HH:mm')} {'('} + {t('days from now', { + ns: 'common', + count: differenceInDays(redelegation.completionTime, new Date()), + })} + {')'} + ); }; diff --git a/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/useStyles.ts b/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/useStyles.ts index 84d401b11..ff6f0aafa 100644 --- a/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/useStyles.ts +++ b/src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/useStyles.ts @@ -11,13 +11,6 @@ const useStyles = makeStyle((theme) => ({ flexDirection: 'row', justifyContent: 'space-between', }, - dataFieldMultipleValue: { - display: 'flex', - alignItems: 'flex-end', - }, - daysToComplete: { - color: theme.colors.primary, - }, })); export default useStyles; diff --git a/src/screens/ManageStaking/tabs/Unbonding/components/UnbondingDelegationListItem/index.tsx b/src/screens/ManageStaking/tabs/Unbonding/components/UnbondingDelegationListItem/index.tsx index 7a37b1d56..d49edb5c2 100644 --- a/src/screens/ManageStaking/tabs/Unbonding/components/UnbondingDelegationListItem/index.tsx +++ b/src/screens/ManageStaking/tabs/Unbonding/components/UnbondingDelegationListItem/index.tsx @@ -67,25 +67,20 @@ const UnbondingDelegationListItem: React.FC = {/* Amount of coins that the user unbonded from the validator */} - - {t('unbonding')} - {formatCoin(coinAmount)} - + + {t('amount', { ns: 'common' })}: {formatCoin(coinAmount)} + {/* Unbond completion info */} - - {t('expected delivery')} - - - {format(unbondingDelegation.completionTime, 'dd MMM, hh:mm')} - - - {t('common:in days', { - count: differenceInDays(unbondingDelegation.completionTime, new Date()), - })} - - - + + {t('completition time', { ns: 'common' })}:{' '} + {format(unbondingDelegation.completionTime, 'EEEE do MMMM, HH:mm')} {'('} + {t('days from now', { + ns: 'common', + count: differenceInDays(unbondingDelegation.completionTime, new Date()), + })} + {')'} + ); diff --git a/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx b/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx index 2f13910c8..953bd62df 100644 --- a/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx +++ b/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx @@ -11,6 +11,7 @@ import { formatCoin } from 'lib/FormatUtils'; import { useCurrentChainInfo } from '@recoil/settings'; import { format } from 'date-fns'; import Spacer from 'components/Spacer'; +import { useTranslation } from 'react-i18next'; import useStyles from './useStyles'; export interface RestakeToItemParams { @@ -26,6 +27,7 @@ export interface RestakeToItemParams { * - Date of when the redelegation completes. */ const RestakeToItem: React.FC = ({ redelegation }) => { + const { t } = useTranslation(); const chainInfo = useCurrentChainInfo(); const styles = useStyles(); @@ -42,7 +44,7 @@ const RestakeToItem: React.FC = ({ redelegation }) => { ); const redelegationEndDate = React.useMemo( - () => format(redelegation.completionTime, 'yyyy-MM-dd HH:mm'), + () => format(redelegation.completionTime, 'EEEE do MMMM, HH:mm'), [redelegation.completionTime], ); @@ -62,13 +64,15 @@ const RestakeToItem: React.FC = ({ redelegation }) => { )} - {/* Redelegation information */} - - {redelegatedAmount} - - {redelegationEndDate} - - + {/* Amount being redelegate */} + + {t('amount')}: {redelegatedAmount} + + + {/* Completion date */} + + {t('completition date')}: {redelegationEndDate} + ); }; diff --git a/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts b/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts index efbb0e47d..4f54f5820 100644 --- a/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts +++ b/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts @@ -3,7 +3,6 @@ import { makeStyle } from 'config/theme'; const useStyles = makeStyle((theme) => ({ root: { display: 'flex', - flexDirection: 'row', justifyContent: 'space-between', paddingVertical: theme.spacing.s, }, @@ -15,10 +14,6 @@ const useStyles = makeStyle((theme) => ({ valuesContainer: { display: 'flex', flexDirection: 'column', - alignItems: 'flex-end', - }, - redelegationCompletionText: { - color: theme.colors.primary, }, })); diff --git a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx index 2a4e4e73e..beae8fbe9 100644 --- a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx +++ b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx @@ -5,7 +5,7 @@ import { useCurrentChainInfo } from '@recoil/settings'; import { formatCoin } from 'lib/FormatUtils'; import { format } from 'date-fns'; import Typography from 'components/Typography'; -import useStyles from './useStyles'; +import { useTranslation } from 'react-i18next'; export interface UnbondingDelegationItemParams { /** @@ -22,8 +22,8 @@ export interface UnbondingDelegationItemParams { const UnbondingDelegationItem: React.FC = ({ unbondingDelegation, }) => { + const { t } = useTranslation(); const chainInfo = useCurrentChainInfo(); - const styles = useStyles(); // -------- DATA -------- @@ -37,16 +37,21 @@ const UnbondingDelegationItem: React.FC = ({ ); const unbondingCompletitionTime = React.useMemo( - () => format(unbondingDelegation.completionTime, 'yyyy-MM-dd HH:mm'), + () => format(unbondingDelegation.completionTime, 'EEEE do MMMM, HH:mm'), [unbondingDelegation.completionTime], ); return ( - - {unbondingAmount} - - {unbondingCompletitionTime} - + + {/* Amount being redelegate */} + + {t('amount')}: {unbondingAmount} + + + {/* Completion date */} + + {t('completition date')}: {unbondingCompletitionTime} + ); }; diff --git a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts deleted file mode 100644 index 6fe34a398..000000000 --- a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyle } from 'config/theme'; - -const useStyles = makeStyle((theme) => ({ - root: { - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-end', - }, - unbondingCompletionText: { - color: theme.colors.primary, - }, -})); - -export default useStyles; diff --git a/src/screens/ValidatorStakingInfo/index.tsx b/src/screens/ValidatorStakingInfo/index.tsx index 43311d751..996d4511f 100644 --- a/src/screens/ValidatorStakingInfo/index.tsx +++ b/src/screens/ValidatorStakingInfo/index.tsx @@ -132,29 +132,14 @@ const ValidatorStakingInfo: React.FC = (props) => { unbondTokens(onSuccess); }, [refetchTotalStaked, refetchUnbondigDelegations, unbondTokens]); - return ( - }> - - - - - - {/* User total delegated amount torward the validator */} - - {t('staked')} - {totalStakedLoading || totalStaked === undefined ? ( - - ) : ( - {formatCoins(totalStaked)} - )} - - + const redelgationView = React.useMemo(() => { + if (!redelegationsLoading && (redelegations?.length ?? 0) === 0) { + return undefined; + } - {/* User redelegations from this validator torward other ones */} + /* User redelegations from this validator torward other ones */ + return ( + <> {t('restake to')} {redelegationsLoading ? ( @@ -166,9 +151,19 @@ const ValidatorStakingInfo: React.FC = (props) => { )} + + ); + }, [redelegations, redelegationsLoading, styles.dataField, styles.inlineDataField, t]); - {/* User unbonding tokens from this validator */} - + const unbondingView = React.useMemo(() => { + if (!loadingUnbondingTokens && (unbondingTokens?.length ?? 0) === 0) { + return undefined; + } + + // User unbonding tokens from this validator + return ( + <> + {t('unbonding')} {loadingUnbondingTokens ? ( @@ -184,6 +179,34 @@ const ValidatorStakingInfo: React.FC = (props) => { )} + + ); + }, [loadingUnbondingTokens, styles.dataField, styles.inlineDataField, t, unbondingTokens]); + + return ( + }> + + + + + + {/* User total delegated amount torward the validator */} + + {t('staked')} + {totalStakedLoading || totalStaked === undefined ? ( + + ) : ( + {formatCoins(totalStaked)} + )} + + + + {redelgationView} + {unbondingView} {/* User pending rewards torward the validator */}