fix: WT-2132 Use default token images for tokens without icons (#1501)

immutable · Feb 21, 2024 · 10d32b7 · 10d32b7
1 parent f8c8ef7
commit 10d32b7
Show file tree

Hide file tree

Showing 23 changed files with 149 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );