From b5427fb3812450187be211fc62d2274e410ac268 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel.d@safe.global>
Date: Tue, 5 Mar 2024 10:11:31 +0100
Subject: [PATCH] Fix: token icons ui issues (#3384)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix - token icon not refreshing

When navigating to a token that doesn’t have an icon we were failing to update the icon when the user navigate to a token that has one.

* fix: don’t show token name on new line if too long

* Update src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>

---------

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>
---
 .../tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
index fe3022d74c..f426f72876 100644
--- a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
@@ -21,10 +21,12 @@ import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
 
 export const AutocompleteItem = (item: { tokenInfo: TokenInfo; balance: string }): ReactElement => (
   <Grid container alignItems="center" gap={1}>
-    <TokenIcon logoUri={item.tokenInfo.logoUri} tokenSymbol={item.tokenInfo.symbol} />
+    <TokenIcon logoUri={item.tokenInfo.logoUri} key={item.tokenInfo.address} tokenSymbol={item.tokenInfo.symbol} />
 
     <Grid item xs>
-      <Typography variant="body2">{item.tokenInfo.name}</Typography>
+      <Typography variant="body2" whiteSpace="normal">
+        {item.tokenInfo.name}
+      </Typography>
 
       <Typography variant="caption" component="p">
         {formatVisualAmount(item.balance, item.tokenInfo.decimals)} {item.tokenInfo.symbol}