feat: improve staking related UI

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",
 }

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",

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(() => {

src/screens/ManageStaking/tabs/Restaking/components/RedelegationListItem/index.tsx

@@ -56,23 +56,20 @@ const RedelegationListItem: React.FC<RedelegationListItemProps> = ({ redelegatio
       <Spacer paddingVertical={8} />
 
       {/* Restake amount */}
-      <View style={styles.dataField}>
-        <Typography.Body>{t('restaking')}</Typography.Body>
-        <Typography.Body>{amount}</Typography.Body>
-      </View>
+      <Typography.Body>
+        {t('amount', { ns: 'common' })}: {amount}
+      </Typography.Body>
 
       {/* Restake completion info */}
-      <View style={styles.dataField}>
-        <Typography.Body>{t('staking:expected delivery')}</Typography.Body>
-        <View style={styles.dataFieldMultipleValue}>
-          <Typography.Body>{format(redelegation.completionTime, 'dd MMM, hh:mm')}</Typography.Body>
-          <Typography.Body style={styles.daysToComplete}>
-            {t('common:in days', {
-              count: differenceInDays(redelegation.completionTime, new Date()),
-            })}
-          </Typography.Body>
-        </View>
-      </View>
+      <Typography.Body>
+        {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()),
+        })}
+        {')'}
+      </Typography.Body>
     </View>
   );
 };

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;

src/screens/ManageStaking/tabs/Unbonding/components/UnbondingDelegationListItem/index.tsx

@@ -67,25 +67,20 @@ const UnbondingDelegationListItem: React.FC<UnbondingDelegationListItemProps> =
         <Spacer paddingVertical={8} />
 
         {/* Amount of coins that the user unbonded from the validator */}
-        <View style={styles.dataField}>
-          <Typography.Body>{t('unbonding')}</Typography.Body>
-          <Typography.Body>{formatCoin(coinAmount)}</Typography.Body>
-        </View>
+        <Typography.Body>
+          {t('amount', { ns: 'common' })}: {formatCoin(coinAmount)}
+        </Typography.Body>
 
         {/* Unbond completion info */}
-        <View style={styles.dataField}>
-          <Typography.Body>{t('expected delivery')}</Typography.Body>
-          <View style={styles.dataFieldMultipleValue}>
-            <Typography.Body>
-              {format(unbondingDelegation.completionTime, 'dd MMM, hh:mm')}
-            </Typography.Body>
-            <Typography.Body style={styles.daysToComplete}>
-              {t('common:in days', {
-                count: differenceInDays(unbondingDelegation.completionTime, new Date()),
-              })}
-            </Typography.Body>
-          </View>
-        </View>
+        <Typography.Body>
+          {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()),
+          })}
+          {')'}
+        </Typography.Body>
       </View>
     </TouchableOpacity>
   );

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<RestakeToItemParams> = ({ redelegation }) => {
+  const { t } = useTranslation();
   const chainInfo = useCurrentChainInfo();
   const styles = useStyles();
 
@@ -42,7 +44,7 @@ const RestakeToItem: React.FC<RestakeToItemParams> = ({ 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<RestakeToItemParams> = ({ redelegation }) => {
         </View>
       )}
 
-      {/* Redelegation information */}
-      <View style={styles.valuesContainer}>
-        <Typography.Body1>{redelegatedAmount}</Typography.Body1>
-        <Typography.Body style={styles.redelegationCompletionText}>
-          {redelegationEndDate}
-        </Typography.Body>
-      </View>
+      {/* Amount being redelegate */}
+      <Typography.Regular16>
+        {t('amount')}: {redelegatedAmount}
+      </Typography.Regular16>
+
+      {/* Completion date */}
+      <Typography.Regular16>
+        {t('completition date')}: {redelegationEndDate}
+      </Typography.Regular16>
     </View>
   );
 };

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,
   },
 }));
 

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<UnbondingDelegationItemParams> = ({
   unbondingDelegation,
 }) => {
+  const { t } = useTranslation();
   const chainInfo = useCurrentChainInfo();
-  const styles = useStyles();
 
   // -------- DATA --------
 
@@ -37,16 +37,21 @@ const UnbondingDelegationItem: React.FC<UnbondingDelegationItemParams> = ({
   );
 
   const unbondingCompletitionTime = React.useMemo(
-    () => format(unbondingDelegation.completionTime, 'yyyy-MM-dd HH:mm'),
+    () => format(unbondingDelegation.completionTime, 'EEEE do MMMM, HH:mm'),
     [unbondingDelegation.completionTime],
   );
 
   return (
-    <View style={styles.root}>
-      <Typography.Body1>{unbondingAmount}</Typography.Body1>
-      <Typography.Body style={styles.unbondingCompletionText}>
-        {unbondingCompletitionTime}
-      </Typography.Body>
+    <View>
+      {/* Amount being redelegate */}
+      <Typography.Regular16>
+        {t('amount')}: {unbondingAmount}
+      </Typography.Regular16>
+
+      {/* Completion date */}
+      <Typography.Regular16>
+        {t('completition date')}: {unbondingCompletitionTime}
+      </Typography.Regular16>
     </View>
   );
 };

src/screens/ValidatorStakingInfo/index.tsx

@@ -132,29 +132,14 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
     unbondTokens(onSuccess);
   }, [refetchTotalStaked, refetchUnbondigDelegations, unbondTokens]);
 
-  return (
-    <StyledSafeAreaView topBar={<TopBar stackProps={props} />}>
-      <ValidatorNameWithStatus
-        validator={validator}
-        loading={validatorLoading}
-        onPress={onValidatorPressed}
-      />
-
-      <Spacer paddingVertical={8} />
-
-      <ScrollView>
-        {/* User total delegated amount torward the validator */}
-        <View style={styles.inlineDataField}>
-          <Typography.Body1>{t('staked')}</Typography.Body1>
-          {totalStakedLoading || totalStaked === undefined ? (
-            <TypographyContentLoaders.Body width={200} />
-          ) : (
-            <Typography.Body1>{formatCoins(totalStaked)}</Typography.Body1>
-          )}
-        </View>
-        <Divider />
+  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 (
+      <>
         <View style={redelegationsLoading ? styles.inlineDataField : styles.dataField}>
           <Typography.Body1>{t('restake to')}</Typography.Body1>
           {redelegationsLoading ? (
@@ -166,9 +151,19 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
           )}
         </View>
         <Divider />
+      </>
+    );
+  }, [redelegations, redelegationsLoading, styles.dataField, styles.inlineDataField, t]);
 
-        {/* User unbonding tokens from this validator */}
-        <View style={styles.inlineDataField}>
+  const unbondingView = React.useMemo(() => {
+    if (!loadingUnbondingTokens && (unbondingTokens?.length ?? 0) === 0) {
+      return undefined;
+    }
+
+    // User unbonding tokens from this validator
+    return (
+      <>
+        <View style={loadingUnbondingTokens ? styles.inlineDataField : styles.dataField}>
           <Typography.Body1>{t('unbonding')}</Typography.Body1>
           {loadingUnbondingTokens ? (
             <StyledActivityIndicator />
@@ -184,6 +179,34 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
           )}
         </View>
         <Divider />
+      </>
+    );
+  }, [loadingUnbondingTokens, styles.dataField, styles.inlineDataField, t, unbondingTokens]);
+
+  return (
+    <StyledSafeAreaView topBar={<TopBar stackProps={props} />}>
+      <ValidatorNameWithStatus
+        validator={validator}
+        loading={validatorLoading}
+        onPress={onValidatorPressed}
+      />
+
+      <Spacer paddingVertical={8} />
+
+      <ScrollView>
+        {/* User total delegated amount torward the validator */}
+        <View style={styles.inlineDataField}>
+          <Typography.Body1>{t('staked')}</Typography.Body1>
+          {totalStakedLoading || totalStaked === undefined ? (
+            <TypographyContentLoaders.Body width={200} />
+          ) : (
+            <Typography.Body1>{formatCoins(totalStaked)}</Typography.Body1>
+          )}
+        </View>
+        <Divider />
+
+        {redelgationView}
+        {unbondingView}
 
         {/* User pending rewards torward the validator */}
         <View style={styles.inlineDataField}>