Fix: token icons ui issues (#3384)

* 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 <[email protected]> --------- Co-authored-by: katspaugh <[email protected]>
safe-global · Mar 5, 2024 · b5427fb · b5427fb
1 parent cb4470d
commit b5427fb
Showing 1 changed file with 4 additions and 2 deletions.
diff --git 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}