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 && (
-
+
)}
diff --git a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
index 3db10b5912..92dc4fbe56 100644
--- a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
+++ b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
@@ -52,6 +52,25 @@ export const useWalletConnect = () => {
} else {
// eslint-disable-next-line no-console
console.log('activate succeeded but there is no connected session');
+
+ if (displayUri.current !== '') {
+ walletConnectModal?.openModal({
+ uri: displayUri.current,
+ })
+ .then((result) => {
+ setWalletConnectBusy(false);
+ resolve(result);
+ })
+ .catch((error) => {
+ // Error opening WalletConnect Modal
+ setWalletConnectBusy(true);
+ reject(error);
+ });
+ } else {
+ // if we don't have a display uri and no connected session
+ // call connect to generate display_uri event
+ ethereumProvider?.connect();
+ }
}
// eslint-disable-next-line no-console
}).catch((err) => console.log('activate existing pairing error', err));
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
index 18e4b7293c..3c116e9d3b 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
@@ -65,4 +65,5 @@ export const rawImageStyle = {
width: '32px',
height: '32px',
padding: '6px',
+ left: 'base.spacing.x3',
};
diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
index 13adc401c9..136ebf7a5f 100644
--- a/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
@@ -1,6 +1,7 @@
import {
useCallback, useContext, useEffect, useState,
} from 'react';
+import { Web3Provider } from '@ethersproject/providers';
import { useTranslation } from 'react-i18next';
import { isWalletConnectProvider } from 'lib/provider';
import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
@@ -40,7 +41,7 @@ export function SwitchNetworkZkEVM() {
connectDispatch({
payload: {
type: ConnectActions.SET_PROVIDER,
- provider,
+ provider: new Web3Provider(provider.provider as any),
},
});