From bd7649273fabb4687bd085b2ab718359bed3b758 Mon Sep 17 00:00:00 2001
From: Keith Broughton <101608096+keithbro-imx@users.noreply.github.com>
Date: Fri, 10 May 2024 13:05:35 +1000
Subject: [PATCH] fix: Coin logos not loading in the Balance Widget (#1752)

---
 .../widgets/wallet/components/BalanceItem/BalanceItem.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.tsx
index 2a6a009155..e1c9cea9dc 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.tsx
@@ -5,6 +5,8 @@ import {
 import {
   IMTBLWidgetEvents, TokenFilterTypes, TokenInfo, WidgetTheme,
 } from '@imtbl/checkout-sdk';
+import { IMAGE_RESIZER_URL } from 'lib';
+import { Environment } from '@imtbl/config';
 import { ShowMenuItem } from './BalanceItemStyles';
 import { BalanceInfo } from '../../functions/tokenBalances';
 import { WalletContext } from '../../context/WalletContext';
@@ -44,6 +46,7 @@ export function BalanceItem({
   );
 
   const isPassport = isPassportProvider(provider);
+  const environment = checkout?.config.environment ?? Environment.PRODUCTION;
 
   useEffect(() => {
     const getOnRampAllowedTokens = async () => {
@@ -89,8 +92,9 @@ export function BalanceItem({
   return (
     <MenuItem testId={`balance-item-${balanceInfo.symbol}`} emphasized>
       <MenuItem.FramedImage
+        imageResizeServiceUrl={IMAGE_RESIZER_URL[environment]}
         imageUrl={balanceInfo.icon}
-        defaultImageUrl={getDefaultTokenImage(checkout?.config.environment, theme)}
+        defaultImageUrl={getDefaultTokenImage(environment, theme)}
         circularFrame
       />
       <MenuItem.Label>{balanceInfo.symbol}</MenuItem.Label>