diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedWallet.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedWallet.tsx index c2955c8601..039dc1e8b5 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedWallet.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedWallet.tsx @@ -1,6 +1,10 @@ -import { MouseEventHandler, ReactNode } from 'react'; +import { MouseEventHandler, ReactElement, ReactNode } from 'react'; import { - EllipsizedText, MenuItem, MenuItemProps, SxProps, + EllipsizedText, + MenuItem, + MenuItemProps, + Sticker, + SxProps, } from '@biom3/react'; import { EIP6963ProviderInfo } from '@imtbl/checkout-sdk'; @@ -8,12 +12,17 @@ const disabledStyles = { cursor: 'not-allowed', bg: 'base.color.translucent.inverse.800', }; +export type ChainInfo = { + name: string; + iconUrl: string; +}; export interface SelectedWalletProps { children?: ReactNode; label: string; caption?: string; providerInfo?: Partial; + chainInfo?: ChainInfo; onClick: MouseEventHandler; disabled?: boolean; sx?: SxProps; @@ -25,12 +34,41 @@ export function SelectedWallet({ children, onClick, providerInfo, + chainInfo, disabled, sx, }: SelectedWalletProps) { const selected = !!children && providerInfo?.rdns; const size: MenuItemProps['size'] = selected ? 'xSmall' : 'small'; + const getMenuItemImage = () => { + const menuItemImage = !providerInfo?.icon ? ( + + ) : ( + (( + } + /> + ) as ReactElement) + ); + + if (chainInfo && providerInfo?.rdns) { + return ( + + } + size="xSmall" + sx={{ bottom: 'base.spacing.x2', right: 'base.spacing.x2' }} + /> + {menuItemImage} + + ); + } + return menuItemImage; + }; + return ( - {!providerInfo?.icon && ( - - )} - {providerInfo?.icon && ( - } - /> - )} + {getMenuItemImage()} {label} {providerInfo?.name ? ( @@ -64,9 +93,7 @@ export function SelectedWallet({ /> ) : ( - - {caption} - + {caption} )} {children} diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx index b91a09b411..c550a6c3e7 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx @@ -259,6 +259,11 @@ export function AddTokens({ [providers], ); + const toChain = useMemo( + () => chains?.find((chain) => chain.id === ChainId.IMTBL_ZKEVM_MAINNET.toString()), + [chains], + ); + useEffect(() => { if (!id || isSwapAvailable === undefined) { return; } @@ -548,6 +553,16 @@ export function AddTokens({ ); }; + const getChainInfo = () => { + if (toChain) { + return { + iconUrl: toChain.iconUrl, + name: toChain.name, + }; + } + return undefined; + }; + return ( setShowDeliverToDrawer(true)} disabled={lockedToProvider} />