From 13db0c9ec40efdf1c715f1400c7525a2b47a8720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gon=C3=A7alves?= <rodrigo.santana@iovlabs.org>
Date: Fri, 22 Sep 2023 00:48:53 -0300
Subject: [PATCH] add less than symbol for small amounts

---
 src/components/token/index.tsx                              | 2 +-
 src/lib/utils.ts                                            | 5 +----
 .../transactionSummary/TransactionSummaryComponent.tsx      | 5 +++++
 .../ReviewRelayTransaction/ReviewTransactionContainer.tsx   | 6 +++---
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/token/index.tsx b/src/components/token/index.tsx
index f25150533..93142acd0 100644
--- a/src/components/token/index.tsx
+++ b/src/components/token/index.tsx
@@ -122,7 +122,7 @@ export const TokenBalance = ({
                   {'<'}
                 </Typography>
               )}
-              <DollarIcon size={16} color={sharedColors.subTitle} />
+              <DollarIcon size={16} color={sharedColors.labelLight} />
             </>
           )}
           {!isNaN(Number(secondValue?.balance)) && (
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 4cf7e1e55..1c96690be 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -20,10 +20,7 @@ export const roundBalance = (num: number, decimalPlaces?: number) => {
 }
 
 export const displayRoundBalance = (num: number): string => {
-  let rounded = roundBalance(num, 4)
-  if (!rounded) {
-    rounded = roundBalance(num, 8)
-  }
+  const rounded = roundBalance(num, 4) || roundBalance(num, 8)
   return rounded.toString()
 }
 
diff --git a/src/screens/transactionSummary/TransactionSummaryComponent.tsx b/src/screens/transactionSummary/TransactionSummaryComponent.tsx
index a3164c9cb..338fcc4da 100644
--- a/src/screens/transactionSummary/TransactionSummaryComponent.tsx
+++ b/src/screens/transactionSummary/TransactionSummaryComponent.tsx
@@ -225,6 +225,11 @@ export const TransactionSummaryComponent = ({
             </View>
           </View>
           <View style={styles.dollarAmountWrapper}>
+            {usdValue.symbol === '<' && (
+              <Typography type="body1" color={sharedColors.labelLight}>
+                {'<'}
+              </Typography>
+            )}
             <DollarIcon size={14} color={sharedColors.labelLight} />
             <Typography
               type={'body2'}
diff --git a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx
index d0f2978a1..92c0738fc 100644
--- a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx
+++ b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx
@@ -187,7 +187,7 @@ export const ReviewTransactionContainer = ({
     // get usd values
     const tokenUsd = convertToUSD(Number(value), tokenQuote)
     const feeUsd = convertToUSD(Number(feeValue), feeQuote)
-    const smallAmount = !Number(tokenUsd) && !!Number(value)
+    const isAmountSmall = !Number(tokenUsd) && !!Number(value)
 
     return {
       transaction: {
@@ -197,9 +197,9 @@ export const ReviewTransactionContainer = ({
           balance: value.toString(),
         },
         usdValue: {
-          symbol: smallAmount ? '<' : '$',
+          symbol: isAmountSmall ? '<' : '$',
           symbolType: 'usd',
-          balance: smallAmount ? '0.01' : tokenUsd,
+          balance: isAmountSmall ? '0.01' : tokenUsd,
         },
         fee: {
           tokenValue: feeValue,