fix(bridge-ui): truncate selected token name to 5 characters (#16066)

taikoxyz · Feb 26, 2024 · dc24155 · dc24155
1 parent f064224
commit dc24155
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
@@ -11,6 +11,7 @@
   import type { Token } from '$libs/token';
   import { classNames } from '$libs/util/classNames';
   import { noop } from '$libs/util/noop';
+  import { truncateString } from '$libs/util/truncateString';
   import { account } from '$stores/account';
 
   import AddCustomErc20 from './AddCustomERC20.svelte';
@@ -102,7 +103,7 @@
           <i role="img" aria-label={ct.name}>
             <Erc20 />
           </i>
-          <span class="body-bold">{ct.symbol}</span>
+          <span class="body-bold">{truncateString(ct.symbol, 10)}</span>
         </div>
       </li>
     {/each}

diff --git a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
@@ -22,6 +22,7 @@
   import { ETHToken, fetchBalance as getTokenBalance, type Token, TokenType } from '$libs/token';
   import { getTokenAddresses } from '$libs/token/getTokenAddresses';
   import { getLogger } from '$libs/util/logger';
+  import { truncateString } from '$libs/util/truncateString';
   import { uid } from '$libs/util/uid';
   import { type Account, account } from '$stores/account';
   import { connectedSourceChain } from '$stores/network';
@@ -230,7 +231,7 @@
               <svelte:component this={Erc20} size={20} />
             </i>
           {/if}
-          <span class={textClass}>{value.symbol}</span>
+          <span class={textClass}>{truncateString(value.symbol, 5)}</span>
         </div>
       {/if}
     </div>

diff --git a/packages/bridge-ui/src/libs/util/balance.ts b/packages/bridge-ui/src/libs/util/balance.ts
@@ -9,7 +9,7 @@ export function renderBalance(balance: Maybe<GetBalanceReturnType>) {
   if (!balance) return '0.00';
   // if (typeof balance === 'bigint') return balance.toString();
   const maxlength = Number(balance.formatted) < 0.000001 ? balance.decimals : 6;
-  return `${truncateString(balance.formatted, maxlength, '')} ${balance.symbol}`;
+  return `${truncateString(balance.formatted, maxlength, '')} ${truncateString(balance.symbol, 5)}`;
 }
 
 export function renderEthBalance(balance: bigint, maxlength = 8): string {