diff --git a/packages/checkout/widgets-lib/src/components/NetworkSwitchDrawer/NetworkSwitchDrawer.tsx b/packages/checkout/widgets-lib/src/components/NetworkSwitchDrawer/NetworkSwitchDrawer.tsx index b8e2d9dddb..df0f4a29d6 100644 --- a/packages/checkout/widgets-lib/src/components/NetworkSwitchDrawer/NetworkSwitchDrawer.tsx +++ b/packages/checkout/widgets-lib/src/components/NetworkSwitchDrawer/NetworkSwitchDrawer.tsx @@ -1,5 +1,11 @@ import { - Body, Box, Button, CloudImage, Drawer, Heading, Logo, + AspectRatioImage, + Body, + Box, + ButtCon, + Button, + Drawer, + Heading, } from '@biom3/react'; import { Web3Provider } from '@ethersproject/providers'; import { ChainId, Checkout } from '@imtbl/checkout-sdk'; @@ -12,7 +18,9 @@ import { isWalletConnectProvider, } from 'lib/provider'; import { getRemoteImage } from 'lib/utils'; -import { useCallback, useMemo } from 'react'; +import { + useCallback, useMemo, useEffect, +} from 'react'; import { useTranslation } from 'react-i18next'; export interface NetworkSwitchDrawerProps { @@ -33,14 +41,18 @@ export function NetworkSwitchDrawer({ }: NetworkSwitchDrawerProps) { const { t } = useTranslation(); + const ethImageUrl = getRemoteImage( + checkout.config.environment ?? Environment.PRODUCTION, + '/switchnetworkethereum.png', + ); + + const zkevmImageUrl = getRemoteImage( + checkout.config.environment ?? Environment.PRODUCTION, + '/switchnetworkzkevm.png', + ); + const targetChainName = getChainNameById(targetChainId); - const networkSwitchImage = useMemo(() => { - if (targetChainId === getL1ChainId(checkout.config)) { - const ethNetworkImageUrl = getRemoteImage(Environment.SANDBOX, '/switchnetworkethereum.svg'); - return ; - } - return ; - }, [targetChainId]); + const showEthImage = targetChainId === getL1ChainId(checkout.config); const handleSwitchNetwork = useCallback(async () => { if (!checkout) return; @@ -73,31 +85,53 @@ export function NetworkSwitchDrawer({ const requireManualSwitch = isWalletConnect && isMetaMaskMobileWalletPeer; + // Image preloading - load images into browser when component mounts + // show cached images when drawer is made visible + useEffect(() => { + const switchNetworkEthImage = new Image(); + switchNetworkEthImage.src = ethImageUrl; + const switchNetworkzkEVMImage = new Image(); + switchNetworkzkEVMImage.src = zkevmImageUrl; + }, []); + return ( + + - {networkSwitchImage} {t('drawers.networkSwitch.heading', { wallet: walletDisplayName, @@ -105,20 +139,35 @@ export function NetworkSwitchDrawer({ {/** MetaMask mobile requires manual switch */} {requireManualSwitch && ( - - {t('drawers.networkSwitch.manualSwitch.body', { - chain: targetChainName, - })} - + + {t('drawers.networkSwitch.manualSwitch.body', { + chain: targetChainName, + })} + )} {!requireManualSwitch && ( - - {t('drawers.networkSwitch.controlledSwitch.body', { - chain: targetChainName, - })} - + + {t('drawers.networkSwitch.controlledSwitch.body', { + chain: targetChainName, + })} + )} - {!requireManualSwitch && ( - + )}