Skip to content

Commit

Permalink
Handle network switch events in wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZacharyCouchman
ZacharyCouchman committed Jul 20, 2023
1 parent e4a9058 commit 06c49f9
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 67 deletions.
59 changes: 4 additions & 55 deletions packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,11 @@ import { ConnectWidgetViews } from '../../context/view-context/ConnectViewContex
import { ErrorView } from '../../views/error/ErrorView';
import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
import {
WidgetTheme, ConnectTargetLayer, getTargetLayerChainId, getL2ChainId, getL1ChainId,
WidgetTheme, ConnectTargetLayer, getTargetLayerChainId,
} from '../../lib';
import { useInterval } from '../../lib/hooks/useInterval';
import {
addProviderAccountsListener,
addProviderChainListener,
removeProviderEventListeners,
} from '../../lib/providerEvents';
import { SharedViews } from '../../context/view-context/ViewContext';
import { addProviderAccountsListener, removeProviderEventListeners } from '../../lib/providerEvents';

export interface ConnectLoaderProps {
children?: React.ReactNode;
Expand Down Expand Up @@ -96,20 +92,13 @@ export function ConnectLoader({
};
clearInterval = useInterval(() => checkIfWeb3ProviderSet(), 10);

/** Handle account change events and reload widget when changed */
useEffect(() => {
if (!web3Provider) {
// connectLoaderDispatch({
// payload: {
// type: ConnectLoaderActions.UPDATE_CONNECTION_STATUS,
// connectionStatus: ConnectionStatus.NOT_CONNECTED_NO_PROVIDER,
// },
// });
return () => {};
}

function handleAccountsChanged(e: any) {
alert(`[ConnectLoader]: You changed your account ${e[0]}`);

if (e.length === 0) {
connectLoaderDispatch({
payload: {
Expand All @@ -130,54 +119,14 @@ export function ConnectLoader({
});
}

function handleChainChanged(e: any) {
alert(`[ConnectLoader]: You changed the chain ${e}`);
const chainId = parseInt(e, 16);
console.log(chainId);

const checkout = new Checkout({ baseConfig: { environment: widgetConfig.environment } });
// needs to be if chainId is targetChainId for this widget, then you may pass
// otherwise go to connected_wrong_network
if (chainId === getL2ChainId(checkout.config) && targetLayer === ConnectTargetLayer.LAYER2) {
console.log('imtbl zkevm testnet');
} else if (chainId === getL1ChainId(checkout.config) && targetLayer === ConnectTargetLayer.LAYER1) {
console.log('l1 chain');
} else {
connectLoaderDispatch({
payload: {
type: ConnectLoaderActions.UPDATE_CONNECTION_STATUS,
connectionStatus: ConnectionStatus.CONNECTED_WRONG_NETWORK,
deepLink: SharedViews.SWITCH_NETWORK,
},
});
}
}
// subscribe
addProviderAccountsListener(web3Provider, handleAccountsChanged);
addProviderChainListener(web3Provider, handleChainChanged);

function handleDisconnect(e:any) {
console.log(e);
connectLoaderDispatch({
payload: {
type: ConnectLoaderActions.UPDATE_CONNECTION_STATUS,
connectionStatus: ConnectionStatus.NOT_CONNECTED_NO_PROVIDER,
},
});
return () => {};
}
console.log('subscribing to disconnect event');
(web3Provider.provider as any).on('disconnect', handleDisconnect);

return () => {
// unsubscribe
console.log('unsubscribing');
removeProviderEventListeners(
web3Provider,
handleAccountsChanged,
handleChainChanged,
() => {},
);
(web3Provider.provider as any).removeListener('disconnect', handleDisconnect);
};
}, [web3Provider]);

Expand Down
85 changes: 73 additions & 12 deletions packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { BaseTokens, onDarkBase, onLightBase } from '@biom3/design-tokens';
import {
Checkout,
} from '@imtbl/checkout-sdk';
import { useEffect, useReducer } from 'react';
import { useCallback, useEffect, useReducer } from 'react';
import { Web3Provider } from '@ethersproject/providers';
import { IMTBLWidgetEvents } from '@imtbl/checkout-widgets';
import {
Expand All @@ -27,32 +27,41 @@ import {
import { WalletWidgetViews } from '../../context/view-context/WalletViewContextTypes';
import { Settings } from './views/Settings';
import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
import { WidgetTheme } from '../../lib';
import { WidgetTheme, getL1ChainId, getL2ChainId } from '../../lib';
import { CoinInfo } from './views/CoinInfo';
import { TopUpView } from '../../views/top-up/TopUpView';
import { SwitchNetwork } from '../../views/switch-network/SwitchNetwork';
import { ImmutableNetworkHero } from '../../components/Hero/ImmutableNetworkHero';
import {
addProviderChainListener,
removeProviderEventListeners,
} from '../../lib/providerEvents';

export interface WalletWidgetProps {
config: StrongCheckoutWidgetsConfig,
web3Provider?: Web3Provider
}

export function WalletWidget(props: WalletWidgetProps) {
/** Handle Widget Props */
const { config, web3Provider } = props;

const {
environment, theme, isOnRampEnabled, isSwapEnabled, isBridgeEnabled,
} = config;

const biomeTheme: BaseTokens = theme.toLowerCase() === WidgetTheme.LIGHT.toLowerCase()
? onLightBase
: onDarkBase;
const [viewState, viewDispatch] = useReducer(viewReducer, initialViewState);

/** Setup Wallet Widget State */
const [viewState, viewDispatch] = useReducer(viewReducer, initialViewState);
const [walletState, walletDispatch] = useReducer(
walletReducer,
initialWalletState,
);
const { checkout, provider } = walletState;

/** Set provider as it is passed in */
useEffect(() => {
if (web3Provider) {
walletDispatch({
Expand All @@ -64,8 +73,7 @@ export function WalletWidget(props: WalletWidgetProps) {
}
}, [web3Provider]);

const { checkout } = walletState;

/** Set Checkout instance and save config */
useEffect(() => {
walletDispatch({
payload: {
Expand All @@ -86,6 +94,7 @@ export function WalletWidget(props: WalletWidgetProps) {
});
}, [isBridgeEnabled, isSwapEnabled, isOnRampEnabled, environment]);

/** Setup Wallet Widget */
useEffect(() => {
(async () => {
if (!checkout || !web3Provider) return;
Expand Down Expand Up @@ -117,11 +126,55 @@ export function WalletWidget(props: WalletWidgetProps) {
})();
}, [checkout]);

const errorAction = () => {
// TODO: please remove or if necessary keep the eslint ignore
// eslint-disable-next-line no-console
console.log('Something went wrong');
};
/* Handle Wallet Events */
useEffect(() => {
if (!provider) return () => {};
if (!checkout) return () => {};

function handleChainChanged(e: any) {
const chainId = parseInt(e, 16);

if (chainId !== getL1ChainId(checkout!.config) && chainId !== getL2ChainId(checkout!.config)) {
viewDispatch({
payload: {
type: ViewActions.UPDATE_VIEW,
view: {
type: SharedViews.SWITCH_NETWORK,
},
},
});
}
}
addProviderChainListener(provider, handleChainChanged);

return () => {
removeProviderEventListeners(provider, () => {}, handleChainChanged);
};
}, [provider, checkout]);

const switchNetwork = useCallback(async () => {
if (!provider || !checkout) return;

const switchRes = await checkout.switchNetwork({
provider,
chainId: getL2ChainId(checkout.config),
});
walletDispatch({
payload: {
type: WalletActions.SET_PROVIDER,
provider: switchRes.provider,
},
});

viewDispatch({
payload: {
type: ViewActions.UPDATE_VIEW,
view: {
type: WalletWidgetViews.WALLET_BALANCES,
},
},
});
}, [provider, walletDispatch, viewDispatch]);

return (
<BiomeCombinedProviders theme={{ base: biomeTheme }}>
Expand All @@ -142,10 +195,18 @@ export function WalletWidget(props: WalletWidgetProps) {
{viewState.view.type === WalletWidgetViews.COIN_INFO && (
<CoinInfo />
)}
{viewState.view.type === SharedViews.SWITCH_NETWORK && (
<SwitchNetwork
heroContent={<ImmutableNetworkHero />}
switchNetwork={switchNetwork}
onClose={sendWalletWidgetCloseEvent}
switchToZkEVM
/>
)}
{viewState.view.type === SharedViews.ERROR_VIEW && (
<ErrorView
actionText="Try again"
onActionClick={errorAction}
onActionClick={sendWalletWidgetCloseEvent}
onCloseClick={sendWalletWidgetCloseEvent}
/>
)}
Expand Down

0 comments on commit 06c49f9

Please sign in to comment.