fix: long token name visible over balance

safe-global · Aug 28, 2024 · aab69ba · aab69ba
1 parent d4f4d6d
commit aab69ba
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/components/common/TokenAmount/index.tsx b/src/components/common/TokenAmount/index.tsx
@@ -16,6 +16,7 @@ const TokenAmount = ({
   direction,
   fallbackSrc,
   preciseAmount,
+  truncateText = false,
 }: {
   value: string
   decimals?: number
@@ -24,6 +25,7 @@ const TokenAmount = ({
   direction?: TransferDirection
   fallbackSrc?: string
   preciseAmount?: boolean
+  truncateText?: boolean
 }): ReactElement => {
   const sign = direction === TransferDirection.OUTGOING ? '-' : ''
   const amount =
@@ -33,9 +35,9 @@ const TokenAmount = ({
 
   return (
     <Tooltip title={fullAmount}>
-      <span className={classNames(css.container, { [css.verticalAlign]: logoUri })}>
+      <span className={classNames(css.container, { [css.verticalAlign]: logoUri }, { [css.w100]: truncateText })}>
         {logoUri && <TokenIcon logoUri={logoUri} tokenSymbol={tokenSymbol} fallbackSrc={fallbackSrc} />}
-        <b>
+        <b className={classNames(css.ellipsisText, { [css.w100]: truncateText })}>
           {sign}
           {amount} {tokenSymbol}
         </b>

diff --git a/src/components/common/TokenAmount/styles.module.css b/src/components/common/TokenAmount/styles.module.css
@@ -4,7 +4,15 @@
   gap: var(--space-1);
   color: var(--color-text-primary);
 }
+.w100{
+  width: 100%;
+}
 
 .verticalAlign {
   vertical-align: middle;
 }
+
+.ellipsisText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/components/transactions/TxInfo/index.tsx b/src/components/transactions/TxInfo/index.tsx
@@ -29,11 +29,13 @@ export const TransferTx = ({
   omitSign = false,
   withLogo = true,
   preciseAmount = false,
+  truncateText = false,
 }: {
   info: Transfer
   omitSign?: boolean
   withLogo?: boolean
   preciseAmount?: boolean
+  truncateText?: boolean
 }): ReactElement => {
   const chainConfig = useCurrentChain()
   const { nativeCurrency } = chainConfig || {}
@@ -49,6 +51,7 @@ export const TransferTx = ({
         tokenSymbol={nativeCurrency?.symbol}
         logoUri={withLogo ? nativeCurrency?.logoUri : undefined}
         preciseAmount={preciseAmount}
+        truncateText={truncateText}
       />
     )
   }
@@ -60,6 +63,7 @@ export const TransferTx = ({
         direction={direction}
         logoUri={withLogo ? transfer?.logoUri : undefined}
         preciseAmount={preciseAmount}
+        truncateText={truncateText}
       />
     )
   }
@@ -77,6 +81,7 @@ export const TransferTx = ({
         direction={undefined}
         logoUri={withLogo ? transfer?.logoUri : undefined}
         fallbackSrc="/images/common/nft-placeholder.png"
+        truncateText={truncateText}
       />
     )
   }
@@ -121,7 +126,7 @@ const TxInfo = ({ info, ...rest }: { info: TransactionInfo; omitSign?: boolean;
   }
 
   if (isTransferTxInfo(info)) {
-    return <TransferTx info={info} {...rest} />
+    return <TransferTx info={info} {...rest} truncateText />
   }
 
   if (isCustomTxInfo(info)) {