From 8f731247cce6cb6bf83af937609b0685d53673d8 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.turetta94@gmail.com>
Date: Tue, 7 Nov 2023 17:24:24 +0100
Subject: [PATCH 1/5] feat: hide restaking and unbonding sections when empty

---
 src/assets/locales/en/staking.json         |  2 +-
 src/screens/ValidatorStakingInfo/index.tsx | 69 ++++++++++++++--------
 2 files changed, 47 insertions(+), 24 deletions(-)

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/screens/ValidatorStakingInfo/index.tsx b/src/screens/ValidatorStakingInfo/index.tsx
index 43311d751..a2d9439d8 100644
--- a/src/screens/ValidatorStakingInfo/index.tsx
+++ b/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,8 +151,18 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
           )}
         </View>
         <Divider />
+      </>
+    );
+  }, [redelegations, redelegationsLoading, styles.dataField, styles.inlineDataField, t]);
+
+  const unbondingView = React.useMemo(() => {
+    if (!loadingUnbondingTokens && (unbondingTokens?.length ?? 0) === 0) {
+      return undefined;
+    }
 
-        {/* User unbonding tokens from this validator */}
+    // User unbonding tokens from this validator
+    return (
+      <>
         <View style={styles.inlineDataField}>
           <Typography.Body1>{t('unbonding')}</Typography.Body1>
           {loadingUnbondingTokens ? (
@@ -184,6 +179,34 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
           )}
         </View>
         <Divider />
+      </>
+    );
+  }, [loadingUnbondingTokens, 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}>

From 98839c0277247f3c7c31bc42d9419e90363a4ce4 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.turetta94@gmail.com>
Date: Wed, 8 Nov 2023 11:54:34 +0100
Subject: [PATCH 2/5] feat: improved restaking from validator info

---
 src/assets/locales/en/common.json             |  2 ++
 .../components/RestakeToItem/index.tsx        | 20 ++++++++++------
 .../components/RestakeToItem/useStyles.ts     |  8 ++++---
 .../UnbondingDelegationItem/index.tsx         | 23 ++++++++++++++-----
 .../UnbondingDelegationItem/useStyles.ts      |  9 ++++----
 src/screens/ValidatorStakingInfo/index.tsx    |  4 ++--
 6 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json
index b0a3f4cd8..e77706ad4 100644
--- a/src/assets/locales/en/common.json
+++ b/src/assets/locales/en/common.json
@@ -52,4 +52,6 @@
   "generating": "Generating...",
   "balance": "Balance",
   "go back": "Go back",
+  "amount": "Amount",
+  "completition date": "Completition date",
 }
diff --git a/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx b/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx
index 2f13910c8..d2816da5d 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<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,12 +64,16 @@ 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>
+      {/* Amount being redelegate */}
+      <View style={styles.inlineFieldsContainer}>
+        <Typography.Regular16>{t('amount')}:</Typography.Regular16>
+        <Typography.Regular16 style={styles.fieldValue}>{redelegatedAmount}</Typography.Regular16>
+      </View>
+
+      {/* Completion date */}
+      <View style={styles.inlineFieldsContainer}>
+        <Typography.Regular16>{t('completition date')}:</Typography.Regular16>
+        <Typography.Regular16 style={styles.fieldValue}>{redelegationEndDate}</Typography.Regular16>
       </View>
     </View>
   );
diff --git a/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts b/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts
index efbb0e47d..f63776a70 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,13 @@ const useStyles = makeStyle((theme) => ({
   valuesContainer: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'flex-end',
   },
-  redelegationCompletionText: {
+  inlineFieldsContainer: {
+    flexDirection: 'row',
+  },
+  fieldValue: {
     color: theme.colors.primary,
+    marginStart: theme.spacing.s,
   },
 }));
 
diff --git a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx
index 2a4e4e73e..21b1e9f55 100644
--- a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx
+++ b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx
@@ -5,6 +5,7 @@ import { useCurrentChainInfo } from '@recoil/settings';
 import { formatCoin } from 'lib/FormatUtils';
 import { format } from 'date-fns';
 import Typography from 'components/Typography';
+import { useTranslation } from 'react-i18next';
 import useStyles from './useStyles';
 
 export interface UnbondingDelegationItemParams {
@@ -22,6 +23,7 @@ export interface UnbondingDelegationItemParams {
 const UnbondingDelegationItem: React.FC<UnbondingDelegationItemParams> = ({
   unbondingDelegation,
 }) => {
+  const { t } = useTranslation();
   const chainInfo = useCurrentChainInfo();
   const styles = useStyles();
 
@@ -37,16 +39,25 @@ 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 */}
+      <View style={styles.inlineFieldsContainer}>
+        <Typography.Regular16>{t('amount')}:</Typography.Regular16>
+        <Typography.Regular16 style={styles.fieldValue}>{unbondingAmount}</Typography.Regular16>
+      </View>
+
+      {/* Completion date */}
+      <View style={styles.inlineFieldsContainer}>
+        <Typography.Regular16>{t('completition date')}:</Typography.Regular16>
+        <Typography.Regular16 style={styles.fieldValue}>
+          {unbondingCompletitionTime}
+        </Typography.Regular16>
+      </View>
     </View>
   );
 };
diff --git a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts
index 6fe34a398..965ec5435 100644
--- a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts
+++ b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts
@@ -1,12 +1,11 @@
 import { makeStyle } from 'config/theme';
 
 const useStyles = makeStyle((theme) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
+  inlineFieldsContainer: {
+    flexDirection: 'row',
   },
-  unbondingCompletionText: {
+  fieldValue: {
+    marginStart: theme.spacing.s,
     color: theme.colors.primary,
   },
 }));
diff --git a/src/screens/ValidatorStakingInfo/index.tsx b/src/screens/ValidatorStakingInfo/index.tsx
index a2d9439d8..996d4511f 100644
--- a/src/screens/ValidatorStakingInfo/index.tsx
+++ b/src/screens/ValidatorStakingInfo/index.tsx
@@ -163,7 +163,7 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
     // User unbonding tokens from this validator
     return (
       <>
-        <View style={styles.inlineDataField}>
+        <View style={loadingUnbondingTokens ? styles.inlineDataField : styles.dataField}>
           <Typography.Body1>{t('unbonding')}</Typography.Body1>
           {loadingUnbondingTokens ? (
             <StyledActivityIndicator />
@@ -181,7 +181,7 @@ const ValidatorStakingInfo: React.FC<NavProps> = (props) => {
         <Divider />
       </>
     );
-  }, [loadingUnbondingTokens, styles.inlineDataField, t, unbondingTokens]);
+  }, [loadingUnbondingTokens, styles.dataField, styles.inlineDataField, t, unbondingTokens]);
 
   return (
     <StyledSafeAreaView topBar={<TopBar stackProps={props} />}>

From f7d3975f171e9c5a62c23b3748ff7b3e6116fbed Mon Sep 17 00:00:00 2001
From: Manuel <manuel.turetta94@gmail.com>
Date: Wed, 8 Nov 2023 12:08:53 +0100
Subject: [PATCH 3/5] feat: update staking and unbonding items

---
 src/assets/locales/en/common.json             |  7 +++--
 .../components/RedelegationListItem/index.tsx | 27 ++++++++---------
 .../RedelegationListItem/useStyles.ts         |  7 -----
 .../UnbondingDelegationListItem/index.tsx     | 29 ++++++++-----------
 4 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json
index e77706ad4..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",
@@ -54,4 +54,5 @@
   "go back": "Go back",
   "amount": "Amount",
   "completition date": "Completition date",
+  "completition time": "Completition time",
 }
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<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>
   );
 };
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<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>
   );

From 643211ffe37b2ebaea03783f912eafe65892ae1e Mon Sep 17 00:00:00 2001
From: Manuel <manuel.turetta94@gmail.com>
Date: Wed, 8 Nov 2023 12:27:22 +0100
Subject: [PATCH 4/5] fix: total restaked amount not being computed correctly

---
 src/hooks/staking/useTotalRedelegatingAmount.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

From 620fa56764ded820b6161d6f6089eb2c51d82b19 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.turetta94@gmail.com>
Date: Wed, 8 Nov 2023 13:03:32 +0100
Subject: [PATCH 5/5] feat: use the dark color instead of the orange

---
 .../components/RestakeToItem/index.tsx         | 14 ++++++--------
 .../components/RestakeToItem/useStyles.ts      |  7 -------
 .../UnbondingDelegationItem/index.tsx          | 18 ++++++------------
 .../UnbondingDelegationItem/useStyles.ts       | 13 -------------
 4 files changed, 12 insertions(+), 40 deletions(-)
 delete mode 100644 src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts

diff --git a/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx b/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx
index d2816da5d..953bd62df 100644
--- a/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx
+++ b/src/screens/ValidatorStakingInfo/components/RestakeToItem/index.tsx
@@ -65,16 +65,14 @@ const RestakeToItem: React.FC<RestakeToItemParams> = ({ redelegation }) => {
       )}
 
       {/* Amount being redelegate */}
-      <View style={styles.inlineFieldsContainer}>
-        <Typography.Regular16>{t('amount')}:</Typography.Regular16>
-        <Typography.Regular16 style={styles.fieldValue}>{redelegatedAmount}</Typography.Regular16>
-      </View>
+      <Typography.Regular16>
+        {t('amount')}: {redelegatedAmount}
+      </Typography.Regular16>
 
       {/* Completion date */}
-      <View style={styles.inlineFieldsContainer}>
-        <Typography.Regular16>{t('completition date')}:</Typography.Regular16>
-        <Typography.Regular16 style={styles.fieldValue}>{redelegationEndDate}</Typography.Regular16>
-      </View>
+      <Typography.Regular16>
+        {t('completition date')}: {redelegationEndDate}
+      </Typography.Regular16>
     </View>
   );
 };
diff --git a/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts b/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts
index f63776a70..4f54f5820 100644
--- a/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts
+++ b/src/screens/ValidatorStakingInfo/components/RestakeToItem/useStyles.ts
@@ -15,13 +15,6 @@ const useStyles = makeStyle((theme) => ({
     display: 'flex',
     flexDirection: 'column',
   },
-  inlineFieldsContainer: {
-    flexDirection: 'row',
-  },
-  fieldValue: {
-    color: theme.colors.primary,
-    marginStart: theme.spacing.s,
-  },
 }));
 
 export default useStyles;
diff --git a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx
index 21b1e9f55..beae8fbe9 100644
--- a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx
+++ b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/index.tsx
@@ -6,7 +6,6 @@ import { formatCoin } from 'lib/FormatUtils';
 import { format } from 'date-fns';
 import Typography from 'components/Typography';
 import { useTranslation } from 'react-i18next';
-import useStyles from './useStyles';
 
 export interface UnbondingDelegationItemParams {
   /**
@@ -25,7 +24,6 @@ const UnbondingDelegationItem: React.FC<UnbondingDelegationItemParams> = ({
 }) => {
   const { t } = useTranslation();
   const chainInfo = useCurrentChainInfo();
-  const styles = useStyles();
 
   // -------- DATA --------
 
@@ -46,18 +44,14 @@ const UnbondingDelegationItem: React.FC<UnbondingDelegationItemParams> = ({
   return (
     <View>
       {/* Amount being redelegate */}
-      <View style={styles.inlineFieldsContainer}>
-        <Typography.Regular16>{t('amount')}:</Typography.Regular16>
-        <Typography.Regular16 style={styles.fieldValue}>{unbondingAmount}</Typography.Regular16>
-      </View>
+      <Typography.Regular16>
+        {t('amount')}: {unbondingAmount}
+      </Typography.Regular16>
 
       {/* Completion date */}
-      <View style={styles.inlineFieldsContainer}>
-        <Typography.Regular16>{t('completition date')}:</Typography.Regular16>
-        <Typography.Regular16 style={styles.fieldValue}>
-          {unbondingCompletitionTime}
-        </Typography.Regular16>
-      </View>
+      <Typography.Regular16>
+        {t('completition date')}: {unbondingCompletitionTime}
+      </Typography.Regular16>
     </View>
   );
 };
diff --git a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts b/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts
deleted file mode 100644
index 965ec5435..000000000
--- a/src/screens/ValidatorStakingInfo/components/UnbondingDelegationItem/useStyles.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { makeStyle } from 'config/theme';
-
-const useStyles = makeStyle((theme) => ({
-  inlineFieldsContainer: {
-    flexDirection: 'row',
-  },
-  fieldValue: {
-    marginStart: theme.spacing.s,
-    color: theme.colors.primary,
-  },
-}));
-
-export default useStyles;