From 10d32b7d0d41a62a3d27d5aa74340afac523c2a8 Mon Sep 17 00:00:00 2001
From: Mikhala <122326421+imx-mikhala@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:32:11 +0800
Subject: [PATCH] fix: WT-2132 Use default token images for tokens without
 icons (#1501)

---
 .../components/CoinSelector/CoinSelector.tsx  |  4 +-
 .../CoinSelector/CoinSelectorOption.tsx       |  4 +-
 .../SelectForm/SelectForm.cy.tsx              | 11 ++++
 .../FormComponents/SelectForm/SelectForm.tsx  |  5 ++
 .../SelectInput/SelectInput.tsx               |  3 +
 .../Transactions/TransactionItem.tsx          |  4 +-
 .../TransactionItemWithdrawPending.tsx        |  4 +-
 .../Transactions/TransactionList.tsx          |  4 ++
 .../components/Transactions/Transactions.tsx  |  4 +-
 .../checkout/widgets-lib/src/lib/utils.ts     | 11 +++-
 .../src/widgets/bridge/BridgeWidget.tsx       |  7 ++-
 .../widgets/bridge/components/BridgeForm.tsx  |  3 +
 .../src/widgets/bridge/views/Bridge.tsx       |  4 +-
 .../widgets/swap/components/SwapForm.cy.tsx   | 56 +++++++++++--------
 .../src/widgets/swap/components/SwapForm.tsx  | 10 +++-
 .../src/widgets/swap/views/SwapCoins.tsx      | 14 +++--
 .../src/widgets/wallet/WalletWidget.tsx       |  3 +-
 .../components/BalanceItem/BalanceItem.cy.tsx | 13 +++++
 .../components/BalanceItem/BalanceItem.tsx    |  9 ++-
 .../TokenBalanceList/TokenBalanceList.cy.tsx  |  4 ++
 .../TokenBalanceList/TokenBalanceList.tsx     |  4 ++
 .../wallet/views/WalletBalances.cy.tsx        | 14 ++---
 .../widgets/wallet/views/WalletBalances.tsx   |  5 +-
 23 files changed, 149 insertions(+), 51 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx
index 57fb2f2208..b1769d17e1 100644
--- a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx
+++ b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx
@@ -12,13 +12,14 @@ type CoinSelectorProps = {
   onCloseDrawer?: () => void;
   heading: string;
   options: CoinSelectorOptionProps[];
+  defaultTokenImage: string;
   optionsLoading?: boolean;
   children?: any;
   visible?: boolean;
 };
 
 export function CoinSelector({
-  heading, options, optionsLoading, children, onCloseDrawer, visible,
+  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible,
 }: CoinSelectorProps) {
   const { t } = useTranslation();
   return (
@@ -52,6 +53,7 @@ export function CoinSelector({
               name={name}
               symbol={symbol}
               balance={balance}
+              defaultTokenImage={defaultTokenImage}
             />
           ))}
         </Box>
diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelectorOption.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelectorOption.tsx
index 807e76b19e..117d81f4b1 100644
--- a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelectorOption.tsx
+++ b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelectorOption.tsx
@@ -6,6 +6,7 @@ export interface CoinSelectorOptionProps {
   id: string;
   name: string;
   icon?: AllIconKeys | string;
+  defaultTokenImage: string;
   symbol: string;
   onClick?: () => void
   balance?: {
@@ -15,7 +16,7 @@ export interface CoinSelectorOptionProps {
 }
 
 export function CoinSelectorOption({
-  onClick, icon, name, symbol, balance, testId, id,
+  onClick, icon, name, symbol, balance, defaultTokenImage, testId, id,
 }: CoinSelectorOptionProps) {
   const { t } = useTranslation();
 
@@ -26,6 +27,7 @@ export function CoinSelectorOption({
         <MenuItem.FramedImage
           imageUrl={icon}
           circularFrame
+          defaultImageUrl={defaultTokenImage}
         />
       )}
 
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx
index b87f036670..03b047e537 100644
--- a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx
+++ b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx
@@ -15,16 +15,19 @@ describe('SelectForm', () => {
               id: 'imx',
               name: 'ImmutableX',
               symbol: 'IMX',
+              defaultTokenImage: 'default-token-image',
             },
             {
               id: 'eth',
               name: 'Ethereum',
               symbol: 'ETH',
+              defaultTokenImage: 'default-token-image',
             },
           ]}
           onSelectChange={() => {}}
           coinSelectorHeading="Select coin"
           selectedOption="imx"
+          defaultTokenImage="default-token-image"
         />
       </ViewContextTestComponent>,
     );
@@ -41,15 +44,18 @@ describe('SelectForm', () => {
               id: 'imx',
               name: 'ImmutableX',
               symbol: 'IMX',
+              defaultTokenImage: 'default-token-image',
             },
             {
               id: 'eth',
               name: 'Ethereum',
               symbol: 'ETH',
+              defaultTokenImage: 'default-token-image',
             },
           ]}
           onSelectChange={() => {}}
           coinSelectorHeading="Select coin"
+          defaultTokenImage="default-token-image"
         />
       </ViewContextTestComponent>,
     );
@@ -68,15 +74,18 @@ describe('SelectForm', () => {
               id: 'imx',
               name: 'ImmutableX',
               symbol: 'IMX',
+              defaultTokenImage: 'default-token-image',
             },
             {
               id: 'eth',
               name: 'Ethereum',
               symbol: 'ETH',
+              defaultTokenImage: 'default-token-image',
             },
           ]}
           onSelectChange={() => {}}
           coinSelectorHeading="Select coin"
+          defaultTokenImage="default-token-image"
         />
       </ViewContextTestComponent>,
     );
@@ -91,6 +100,7 @@ describe('SelectForm', () => {
           options={[]}
           onSelectChange={() => {}}
           coinSelectorHeading="Select coin"
+          defaultTokenImage="default-token-image"
         />
       </ViewContextTestComponent>,
     );
@@ -106,6 +116,7 @@ describe('SelectForm', () => {
           onSelectChange={() => {}}
           coinSelectorHeading="Select coin"
           selectedOption="imx"
+          defaultTokenImage="default-token-image"
         />
       </ViewContextTestComponent>,
     );
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx
index 34f1702fe3..a280ce8fdc 100644
--- a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx
+++ b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx
@@ -17,6 +17,7 @@ interface SelectFormProps {
   disabled?: boolean;
   onSelectChange: (value: string) => void;
   coinSelectorHeading: string;
+  defaultTokenImage: string;
 }
 
 export function SelectForm({
@@ -30,6 +31,7 @@ export function SelectForm({
   disabled,
   selectedOption,
   coinSelectorHeading,
+  defaultTokenImage,
 }: SelectFormProps) {
   const [coinSelectorOpen, setCoinSelectorOpen] = useState<boolean>(false);
 
@@ -54,6 +56,7 @@ export function SelectForm({
       <CoinSelector
         heading={coinSelectorHeading}
         options={coinSelectorOptions}
+        defaultTokenImage={defaultTokenImage}
         optionsLoading={optionsLoading ?? false}
         visible={coinSelectorOpen}
         onCloseDrawer={() => setCoinSelectorOpen(false)}
@@ -97,6 +100,8 @@ export function SelectForm({
                 <Option.FramedImage
                   imageUrl={option.icon}
                   circularFrame
+                  defaultImageUrl={defaultTokenImage}
+                  sx={{ background: 'base.color.translucent.standard.100' }}
                 />
               )}
               <Option.Label>{option.symbol}</Option.Label>
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx
index b98ccdfa65..56b2decaa9 100644
--- a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx
+++ b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx
@@ -30,6 +30,7 @@ interface SelectInputProps {
   textInputMaxButtonClick?: () => void;
   onSelectChange: (value: OptionKey) => void;
   selectedOption?: OptionKey;
+  defaultTokenImage: string;
 }
 
 export function SelectInput({
@@ -54,6 +55,7 @@ export function SelectInput({
   selectInputDisabled,
   selectedOption,
   coinSelectorHeading,
+  defaultTokenImage,
 }: SelectInputProps) {
   return (
     <Box sx={selectInputBoxStyle}>
@@ -68,6 +70,7 @@ export function SelectInput({
           disabled={selectInputDisabled}
           selectedOption={selectedOption}
           coinSelectorHeading={coinSelectorHeading}
+          defaultTokenImage={defaultTokenImage}
         />
       </Box>
       <Box sx={inputStyle}>
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
index c268c45f8a..64d52c3280 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
@@ -22,6 +22,7 @@ type TransactionItemProps = {
   fiatAmount: string,
   amount: string,
   icon: string,
+  defaultTokenImage: string,
 };
 
 export function TransactionItem({
@@ -31,6 +32,7 @@ export function TransactionItem({
   fiatAmount,
   amount,
   icon,
+  defaultTokenImage,
 }: TransactionItemProps) {
   const { track } = useAnalytics();
 
@@ -77,7 +79,7 @@ export function TransactionItem({
       >
         <Accordion.TargetLeftSlot sx={{ pr: 'base.spacing.x2' }}>
           <MenuItem size="xSmall">
-            <MenuItem.FramedImage imageUrl={icon} circularFrame />
+            <MenuItem.FramedImage imageUrl={icon} circularFrame defaultImageUrl={defaultTokenImage} />
             <MenuItem.Label>
               {label}
             </MenuItem.Label>
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
index 868af72ede..3f4a90925d 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
@@ -22,6 +22,7 @@ type TransactionItemWithdrawPendingProps = {
   fiatAmount: string,
   amount: string,
   icon: string,
+  defaultTokenImage: string,
 };
 
 export function TransactionItemWithdrawPending({
@@ -30,6 +31,7 @@ export function TransactionItemWithdrawPending({
   fiatAmount,
   amount,
   icon,
+  defaultTokenImage,
 }: TransactionItemWithdrawPendingProps) {
   const { viewDispatch } = useContext(ViewContext);
   const { track } = useAnalytics();
@@ -148,7 +150,7 @@ export function TransactionItemWithdrawPending({
       >
         <Accordion.TargetLeftSlot sx={{ pr: 'base.spacing.x2' }}>
           <MenuItem size="xSmall">
-            <MenuItem.FramedImage imageUrl={icon} circularFrame />
+            <MenuItem.FramedImage imageUrl={icon} circularFrame defaultImageUrl={defaultTokenImage} />
             <MenuItem.Label>
               {label}
             </MenuItem.Label>
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
index 39e315315a..74a23bd5e6 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
@@ -26,6 +26,7 @@ type TransactionListProps = {
   transactions: Transaction[],
   knownTokenMap: KnownNetworkMap,
   isPassport: boolean;
+  defaultTokenImage: string;
   changeWallet: () => void,
 };
 
@@ -34,6 +35,7 @@ export function TransactionList({
   transactions,
   knownTokenMap,
   isPassport,
+  defaultTokenImage,
   changeWallet,
 }: TransactionListProps) {
   const { cryptoFiatState } = useContext(CryptoFiatContext);
@@ -90,6 +92,7 @@ export function TransactionList({
                   fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                   amount={amount}
                   icon={getTransactionItemIcon(transaction)}
+                  defaultTokenImage={defaultTokenImage}
                 />
               );
             }
@@ -103,6 +106,7 @@ export function TransactionList({
                 fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                 amount={amount}
                 icon={getTransactionItemIcon(transaction)}
+                defaultTokenImage={defaultTokenImage}
               />
             );
           })}
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx b/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx
index 20de96eac7..2cebfcb99b 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx
@@ -39,10 +39,11 @@ import { TransactionList } from './TransactionList';
 import { NoTransactions } from './NoTransactions';
 
 type TransactionsProps = {
+  defaultTokenImage: string;
   onBackButtonClick: () => void;
 };
 
-export function Transactions({ onBackButtonClick }: TransactionsProps) {
+export function Transactions({ defaultTokenImage, onBackButtonClick }: TransactionsProps) {
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
 
   const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
@@ -342,6 +343,7 @@ export function Transactions({ onBackButtonClick }: TransactionsProps) {
               transactions={txs}
               knownTokenMap={knownTokenMap}
               isPassport={isPassport}
+              defaultTokenImage={defaultTokenImage}
               changeWallet={() => setShowWalletDrawer(true)}
             />
           )}
diff --git a/packages/checkout/widgets-lib/src/lib/utils.ts b/packages/checkout/widgets-lib/src/lib/utils.ts
index 9e84e62ae3..c36c372028 100644
--- a/packages/checkout/widgets-lib/src/lib/utils.ts
+++ b/packages/checkout/widgets-lib/src/lib/utils.ts
@@ -1,5 +1,5 @@
 import {
-  ChainId, CheckoutConfiguration, GetBalanceResult, NetworkInfo,
+  ChainId, CheckoutConfiguration, GetBalanceResult, NetworkInfo, WidgetTheme,
 } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { getL1ChainId, getL2ChainId } from './networkUtils';
@@ -157,3 +157,12 @@ export function getImxTokenImage(environment: Environment | undefined) {
 export function getTokenImageByAddress(environment: Environment | undefined, address: string) {
   return getRemoteImage(environment, `/tokens/${address.toLowerCase()}.svg`);
 }
+
+export function getDefaultTokenImage(
+  environment: Environment | undefined,
+  theme: WidgetTheme,
+) {
+  return theme === WidgetTheme.LIGHT
+    ? getRemoteImage(environment, '/tokens/defaultonlight.svg')
+    : getRemoteImage(environment, '/tokens/defaultondark.svg');
+}
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
index e214cd0be9..70ec1f076a 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
@@ -30,6 +30,7 @@ import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAna
 import { TopUpView } from 'views/top-up/TopUpView';
 import { useTranslation } from 'react-i18next';
 import { ClaimWithdrawalInProgress } from 'components/Transactions/ClaimWithdrawalInProgress';
+import { getDefaultTokenImage } from 'lib/utils';
 import {
   ViewActions,
   ViewContext,
@@ -80,7 +81,9 @@ export default function BridgeWidget({
     isOnRampEnabled,
     isSwapEnabled,
     isBridgeEnabled,
+    theme,
   } = config;
+  const defaultTokenImage = getDefaultTokenImage(checkout.config.environment, theme);
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
 
   const { page } = useAnalytics();
@@ -200,7 +203,7 @@ export default function BridgeWidget({
             <WalletNetworkSelectionView />
           )}
           {viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (
-            <Bridge amount={amount} tokenAddress={tokenAddress} />
+            <Bridge amount={amount} tokenAddress={tokenAddress} defaultTokenImage={defaultTokenImage} />
           )}
           {viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (
             <BridgeReview />
@@ -244,7 +247,7 @@ export default function BridgeWidget({
             />
           )}
           {viewState.view.type === BridgeWidgetViews.TRANSACTIONS && (
-            <Transactions onBackButtonClick={goBackToWalletNetworkSelector} />
+            <Transactions onBackButtonClick={goBackToWalletNetworkSelector} defaultTokenImage={defaultTokenImage} />
           )}
           {viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL && (
             <ClaimWithdrawal transaction={viewState.view.transaction} />
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
index 7ab2cea31e..3a11090a18 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
@@ -48,6 +48,7 @@ interface BridgeFormProps {
   defaultAmount?: string;
   defaultTokenAddress?: string;
   isTokenBalancesLoading?: boolean;
+  defaultTokenImage: string;
 }
 
 export function BridgeForm(props: BridgeFormProps) {
@@ -72,6 +73,7 @@ export function BridgeForm(props: BridgeFormProps) {
     defaultAmount,
     defaultTokenAddress,
     isTokenBalancesLoading,
+    defaultTokenImage,
   } = props;
 
   const { track } = useAnalytics();
@@ -345,6 +347,7 @@ export function BridgeForm(props: BridgeFormProps) {
               textAlign="left"
               errorMessage={t(tokenError)}
               onSelectChange={(option) => handleSelectTokenChange(option)}
+              defaultTokenImage={defaultTokenImage}
             />
             <TextInputForm
               testId="bridge-amount"
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/views/Bridge.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/views/Bridge.tsx
index 075fc98acc..d516f4c722 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/views/Bridge.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/views/Bridge.tsx
@@ -22,9 +22,10 @@ const REFRESH_TOKENS_INTERVAL_MS = 10000;
 export interface BridgeProps {
   amount?: string;
   tokenAddress?: string;
+  defaultTokenImage: string;
 }
 
-export function Bridge({ amount, tokenAddress }: BridgeProps) {
+export function Bridge({ amount, tokenAddress, defaultTokenImage }: BridgeProps) {
   const { t } = useTranslation();
   const { bridgeState, bridgeDispatch } = useContext(BridgeContext);
   const { checkout, from } = bridgeState;
@@ -112,6 +113,7 @@ export function Bridge({ amount, tokenAddress }: BridgeProps) {
         defaultAmount={amount}
         defaultTokenAddress={tokenAddress}
         isTokenBalancesLoading={isTokenBalancesLoading}
+        defaultTokenImage={defaultTokenImage}
       />
     </SimpleLayout>
   );
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx
index 29af416d7c..41b3e03271 100644
--- a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx
@@ -97,7 +97,7 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm />
+          <SwapForm theme={WidgetTheme.DARK} />
         </SwapWidgetTestComponent>,
       );
       cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible');
@@ -122,9 +122,11 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm data={{
-            fromTokenAddress: NATIVE,
-          }}
+          <SwapForm
+            theme={WidgetTheme.DARK}
+            data={{
+              fromTokenAddress: NATIVE,
+            }}
           />
         </SwapWidgetTestComponent>,
       );
@@ -139,9 +141,11 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm data={{
-            toTokenAddress: NATIVE,
-          }}
+          <SwapForm
+            theme={WidgetTheme.DARK}
+            data={{
+              toTokenAddress: NATIVE,
+            }}
           />
         </SwapWidgetTestComponent>,
       );
@@ -156,9 +160,11 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm data={{
-            fromTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
-          }}
+          <SwapForm
+            theme={WidgetTheme.DARK}
+            data={{
+              fromTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
+            }}
           />
         </SwapWidgetTestComponent>,
       );
@@ -173,9 +179,11 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm data={{
-            toTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
-          }}
+          <SwapForm
+            theme={WidgetTheme.DARK}
+            data={{
+              toTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
+            }}
           />
         </SwapWidgetTestComponent>,
       );
@@ -190,10 +198,12 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm data={{
-            fromTokenAddress: NATIVE,
-            toTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
-          }}
+          <SwapForm
+            theme={WidgetTheme.DARK}
+            data={{
+              fromTokenAddress: NATIVE,
+              toTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
+            }}
           />
         </SwapWidgetTestComponent>,
       );
@@ -210,10 +220,12 @@ describe('SwapForm', () => {
           initialStateOverride={testSwapState}
           cryptoConversionsOverride={cryptoConversions}
         >
-          <SwapForm data={{
-            fromTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
-            toTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
-          }}
+          <SwapForm
+            theme={WidgetTheme.DARK}
+            data={{
+              fromTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
+              toTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF',
+            }}
           />
         </SwapWidgetTestComponent>,
       );
@@ -292,7 +304,7 @@ describe('SwapForm', () => {
       it(`should only allow numbers with 6 decimal places in the swapFromAmount input - ${testCase.name}`, () => {
         mount(
           <SwapWidgetTestComponent>
-            <SwapForm />
+            <SwapForm theme={WidgetTheme.DARK} />
           </SwapWidgetTestComponent>,
         );
 
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
index 02de028481..0792ce1015 100644
--- a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
@@ -6,7 +6,7 @@ import {
   Body, Box, Heading, OptionKey,
 } from '@biom3/react';
 import { BigNumber, utils } from 'ethers';
-import { TokenInfo } from '@imtbl/checkout-sdk';
+import { TokenInfo, WidgetTheme } from '@imtbl/checkout-sdk';
 import { TransactionResponse } from '@imtbl/dex-sdk';
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,7 @@ import { amountInputValidation as textInputValidator } from '../../../lib/valida
 import { SwapContext } from '../context/SwapContext';
 import { CryptoFiatActions, CryptoFiatContext } from '../../../context/crypto-fiat-context/CryptoFiatContext';
 import {
-  calculateCryptoToFiat, formatZeroAmount, isNativeToken, tokenValueFormat,
+  calculateCryptoToFiat, formatZeroAmount, getDefaultTokenImage, isNativeToken, tokenValueFormat,
 } from '../../../lib/utils';
 import {
   DEFAULT_TOKEN_DECIMALS,
@@ -96,9 +96,10 @@ let quoteRequest: CancellablePromise<any>;
 
 export interface SwapFromProps {
   data?: SwapFormData;
+  theme: WidgetTheme;
 }
 
-export function SwapForm({ data }: SwapFromProps) {
+export function SwapForm({ data, theme }: SwapFromProps) {
   const { t } = useTranslation();
   const {
     swapState: {
@@ -110,6 +111,7 @@ export function SwapForm({ data }: SwapFromProps) {
   } = useContext(SwapContext);
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
+  const defaultTokenImage = getDefaultTokenImage(checkout?.config.environment, theme);
 
   const formatTokenOptionsId = useCallback((symbol: string, address?: string) => (isNativeToken(address)
     ? `${symbol.toLowerCase()}-${NATIVE}`
@@ -746,6 +748,7 @@ export function SwapForm({ data }: SwapFromProps) {
                 ? formatTokenOptionsId(fromToken.symbol, fromToken.address)
                 : undefined}
               coinSelectorHeading={t('views.SWAP.swapForm.from.selectorTitle')}
+              defaultTokenImage={defaultTokenImage}
             />
           </Box>
 
@@ -786,6 +789,7 @@ export function SwapForm({ data }: SwapFromProps) {
                 ? formatTokenOptionsId(toToken.symbol, toToken.address)
                 : undefined}
               coinSelectorHeading={t('views.SWAP.swapForm.to.selectorTitle')}
+              defaultTokenImage={defaultTokenImage}
             />
           </Box>
         </Box>
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx b/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx
index 8171445aa6..bd80a26eac 100644
--- a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx
@@ -93,12 +93,14 @@ export function SwapCoins({
           justifyContent: 'space-between',
         }}
       >
-        <SwapForm data={{
-          fromAmount,
-          toAmount,
-          fromTokenAddress,
-          toTokenAddress,
-        }}
+        <SwapForm
+          data={{
+            fromAmount,
+            toAmount,
+            fromTokenAddress,
+            toTokenAddress,
+          }}
+          theme={theme}
         />
         <NotEnoughImx
           environment={checkout?.config.environment ?? Environment.PRODUCTION}
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
index 1d7771dc25..99e7724125 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
@@ -52,6 +52,7 @@ export default function WalletWidget(props: WalletWidgetInputs) {
       isOnRampEnabled,
       isSwapEnabled,
       isBridgeEnabled,
+      theme,
     },
   } = props;
 
@@ -199,7 +200,7 @@ export default function WalletWidget(props: WalletWidgetInputs) {
             <LoadingView loadingText={loadingText} />
           )}
           {viewState.view.type === WalletWidgetViews.WALLET_BALANCES && (
-            <WalletBalances balancesLoading={balancesLoading} />
+            <WalletBalances balancesLoading={balancesLoading} theme={theme} />
           )}
           {viewState.view.type === WalletWidgetViews.SETTINGS && <Settings />}
           {viewState.view.type === WalletWidgetViews.COIN_INFO && (
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx
index c25cd3a921..f41e86c834 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx
@@ -7,6 +7,7 @@ import {
   WalletProviderName,
   IMTBLWidgetEvents,
   GetBalanceResult,
+  WidgetTheme,
 } from '@imtbl/checkout-sdk';
 import { cy } from 'local-cypress';
 import { Environment } from '@imtbl/config';
@@ -77,6 +78,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
       </ConnectLoaderTestComponent>,
@@ -120,6 +122,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
       </ConnectLoaderTestComponent>,
@@ -156,6 +159,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
         ,
@@ -196,6 +200,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
         ,
@@ -236,6 +241,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
       </ConnectLoaderTestComponent>,
@@ -286,6 +292,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
         ,
@@ -347,6 +354,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={balanceInfoNotInAllowList}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
         ,
@@ -388,6 +396,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
         ,
@@ -428,6 +437,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
       </ConnectLoaderTestComponent>,
@@ -455,6 +465,7 @@ describe('BalanceItem', () => {
           <BalanceItem
             balanceInfo={testBalanceInfo}
             bridgeToL2OnClick={() => {}}
+            theme={WidgetTheme.DARK}
           />
         </WalletWidgetTestComponent>
       </ConnectLoaderTestComponent>,
@@ -506,6 +517,7 @@ describe('BalanceItem', () => {
             <BalanceItem
               balanceInfo={testBalanceInfo}
               bridgeToL2OnClick={() => {}}
+              theme={WidgetTheme.DARK}
             />
           </WalletWidgetTestComponent>
         </ConnectLoaderTestComponent>,
@@ -534,6 +546,7 @@ describe('BalanceItem', () => {
             <BalanceItem
               balanceInfo={testBalanceInfo}
               bridgeToL2OnClick={() => {}}
+              theme={WidgetTheme.DARK}
             />
           </WalletWidgetTestComponent>
         </ConnectLoaderTestComponent>,
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 55035d3e98..f8e8f9dc6d 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
@@ -2,13 +2,15 @@ import { Heading, MenuItem } from '@biom3/react';
 import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
-import { IMTBLWidgetEvents, TokenFilterTypes, TokenInfo } from '@imtbl/checkout-sdk';
+import {
+  IMTBLWidgetEvents, TokenFilterTypes, TokenInfo, WidgetTheme,
+} from '@imtbl/checkout-sdk';
 import { ShowMenuItem } from './BalanceItemStyles';
 import { BalanceInfo } from '../../functions/tokenBalances';
 import { WalletContext } from '../../context/WalletContext';
 import { orchestrationEvents } from '../../../../lib/orchestrationEvents';
 import { getL1ChainId, getL2ChainId } from '../../../../lib/networkUtils';
-import { formatZeroAmount, tokenValueFormat } from '../../../../lib/utils';
+import { formatZeroAmount, getDefaultTokenImage, tokenValueFormat } from '../../../../lib/utils';
 import { ConnectLoaderContext } from '../../../../context/connect-loader-context/ConnectLoaderContext';
 import { isPassportProvider } from '../../../../lib/providerUtils';
 import { EventTargetContext } from '../../../../context/event-target-context/EventTargetContext';
@@ -16,11 +18,13 @@ import { UserJourney, useAnalytics } from '../../../../context/analytics-provide
 
 export interface BalanceItemProps {
   balanceInfo: BalanceInfo;
+  theme: WidgetTheme;
   bridgeToL2OnClick: (address?: string) => void;
 }
 
 export function BalanceItem({
   balanceInfo,
+  theme,
   bridgeToL2OnClick,
 }: BalanceItemProps) {
   const { connectLoaderState } = useContext(ConnectLoaderContext);
@@ -86,6 +90,7 @@ export function BalanceItem({
     <MenuItem testId={`balance-item-${balanceInfo.symbol}`} emphasized>
       <MenuItem.FramedImage
         imageUrl={balanceInfo.icon}
+        defaultImageUrl={getDefaultTokenImage(checkout?.config.environment, theme)}
         circularFrame
       />
       <MenuItem.Label>{balanceInfo.symbol}</MenuItem.Label>
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx
index 4e26db16ee..8031b1fd20 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx
@@ -1,6 +1,7 @@
 import { describe, it, cy } from 'local-cypress';
 import { mount } from 'cypress/react18';
 import { ViewContextTestComponent } from 'context/view-context/test-components/ViewContextTestComponent';
+import { WidgetTheme } from '@imtbl/checkout-sdk';
 import { TokenBalanceList } from './TokenBalanceList';
 import { cyIntercept, cySmartGet } from '../../../../lib/testUtils';
 import { ZERO_BALANCE_STRING } from '../../../../lib';
@@ -17,6 +18,7 @@ describe('TokenBalanceList', () => {
         <TokenBalanceList
           balanceInfoItems={[]}
           bridgeToL2OnClick={() => {}}
+          theme={WidgetTheme.DARK}
         />
       </ViewContextTestComponent>,
     );
@@ -37,6 +39,7 @@ describe('TokenBalanceList', () => {
             },
           ]}
           bridgeToL2OnClick={() => {}}
+          theme={WidgetTheme.DARK}
         />
       </ViewContextTestComponent>,
     );
@@ -71,6 +74,7 @@ describe('TokenBalanceList', () => {
             },
           ]}
           bridgeToL2OnClick={() => {}}
+          theme={WidgetTheme.DARK}
         />
       </ViewContextTestComponent>,
     );
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.tsx
index d3b209a9b8..5ae2b3e8c0 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.tsx
@@ -1,5 +1,6 @@
 import { Body, Box } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
+import { WidgetTheme } from '@imtbl/checkout-sdk';
 import { BalanceItem } from '../BalanceItem/BalanceItem';
 import { tokenBalanceListStyle, noTokensStyle } from './TokenBalanceListStyles';
 import { BalanceInfo } from '../../functions/tokenBalances';
@@ -12,11 +13,13 @@ const filterZeroBalances = (balanceInfoItems: BalanceInfo[]) => balanceInfoItems
 
 interface TokenBalanceListProps {
   balanceInfoItems: BalanceInfo[];
+  theme: WidgetTheme;
   bridgeToL2OnClick: (address?: string) => void;
 }
 
 export function TokenBalanceList({
   balanceInfoItems,
+  theme,
   bridgeToL2OnClick,
 }: TokenBalanceListProps) {
   const { t } = useTranslation();
@@ -35,6 +38,7 @@ export function TokenBalanceList({
           key={balance.id}
           balanceInfo={balance}
           bridgeToL2OnClick={bridgeToL2OnClick}
+          theme={theme}
         />
       ))}
     </Box>
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
index a7929e8d89..70c096de0a 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
@@ -101,7 +101,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} />
+              <WalletBalances balancesLoading={false} theme={WidgetTheme.DARK} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -121,7 +121,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading />
+              <WalletBalances balancesLoading theme={WidgetTheme.DARK} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -143,7 +143,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} />
+              <WalletBalances balancesLoading={false} theme={WidgetTheme.DARK} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -165,7 +165,7 @@ describe('WalletBalances', () => {
               initialStateOverride={{ ...baseWalletState, tokenBalances: [] }}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} />
+              <WalletBalances balancesLoading={false} theme={WidgetTheme.DARK} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -222,7 +222,7 @@ describe('WalletBalances', () => {
                 <WalletContext.Provider
                   value={{ walletState: testWalletState, walletDispatch: () => {} }}
                 >
-                  <WalletBalances balancesLoading={false} />
+                  <WalletBalances balancesLoading={false} theme={WidgetTheme.DARK} />
                 </WalletContext.Provider>
               </ConnectLoaderTestComponent>
             </ViewContextTestComponent>
@@ -250,7 +250,7 @@ describe('WalletBalances', () => {
               <WalletContext.Provider
                 value={{ walletState: testWalletState, walletDispatch: () => {} }}
               >
-                <WalletBalances balancesLoading={false} />
+                <WalletBalances balancesLoading={false} theme={WidgetTheme.DARK} />
               </WalletContext.Provider>
             </ConnectLoaderTestComponent>
           </ViewContextTestComponent>
@@ -284,7 +284,7 @@ describe('WalletBalances', () => {
               <WalletContext.Provider
                 value={{ walletState, walletDispatch: () => {} }}
               >
-                <WalletBalances balancesLoading={false} />
+                <WalletBalances balancesLoading={false} theme={WidgetTheme.DARK} />
               </WalletContext.Provider>
             </ConnectLoaderTestComponent>
           </ViewContextTestComponent>
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
index ffdcece2bf..6d6050656c 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
@@ -2,7 +2,7 @@ import { Box, ButtCon, MenuItem } from '@biom3/react';
 import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
-import { IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
+import { IMTBLWidgetEvents, WidgetTheme } from '@imtbl/checkout-sdk';
 import { fetchTokenSymbols } from 'lib/fetchTokenSymbols';
 import { CryptoFiatActions, CryptoFiatContext } from 'context/crypto-fiat-context/CryptoFiatContext';
 import { ButtonNavigationStyles } from 'components/Header/HeaderStyles';
@@ -37,9 +37,11 @@ import { BalanceInfo, mapTokenBalancesWithConversions } from '../functions/token
 
 type WalletBalancesProps = {
   balancesLoading: boolean;
+  theme: WidgetTheme;
 };
 export function WalletBalances({
   balancesLoading,
+  theme,
 }: WalletBalancesProps) {
   const { t } = useTranslation();
   const { connectLoaderState } = useContext(ConnectLoaderContext);
@@ -188,6 +190,7 @@ export function WalletBalances({
               <TokenBalanceList
                 balanceInfoItems={balanceInfos}
                 bridgeToL2OnClick={handleBridgeToL2OnClick}
+                theme={theme}
               />
             )}
           </Box>