From dc24155b306e447f0572d29918183570905866be Mon Sep 17 00:00:00 2001
From: leppaludi <105874219+leppaludi@users.noreply.github.com>
Date: Mon, 26 Feb 2024 06:16:10 +0000
Subject: [PATCH] fix(bridge-ui): truncate selected token name to 5 characters
 (#16066)

---
 .../bridge-ui/src/components/TokenDropdown/DropdownView.svelte | 3 ++-
 .../src/components/TokenDropdown/TokenDropdown.svelte          | 3 ++-
 packages/bridge-ui/src/libs/util/balance.ts                    | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
index 384ca7e9a9b..46d20e118f2 100644
--- 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
index 6f929afde84..47c8d4e71f6 100644
--- 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
index 5ebc71dcdcc..ceb8ec57b0d 100644
--- 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 {