From d7484404d1b2dafe66ced6aea307e948f3e46d0c Mon Sep 17 00:00:00 2001 From: Sharon Sheah <37326128+sharonsheah@users.noreply.github.com> Date: Fri, 8 Mar 2024 13:14:35 +1100 Subject: [PATCH] feat: Hook up error drawers to connect widget (#1580) --- .../src/lib/hooks/useWalletConnect.ts | 11 +++- .../bridge/components/WalletNetworkButton.tsx | 25 ++++++--- .../widgets/connect/components/WalletList.tsx | 51 +++++++++++++++---- 3 files changed, 69 insertions(+), 18 deletions(-) diff --git a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts index 92dc4fbe56..ffef439b17 100644 --- a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts +++ b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts @@ -22,7 +22,7 @@ export const useWalletConnect = () => { (async () => setEthereumProvider(await WalletConnectManager.getInstance().getProvider()))(); setWalletConnectModal(WalletConnectManager.getInstance().getModal()); } - }, []); + }, [isWalletConnectEnabled]); const openWalletConnectModal = useCallback(async ({ connectCallback, @@ -133,6 +133,14 @@ export const useWalletConnect = () => { ), [ethereumProvider, walletConnectModal]); const getWalletLogoUrl = useCallback(async () => await WalletConnectManager.getInstance().getWalletLogoUrl(), []); + const getWalletName = useCallback(() => { + if (!ethereumProvider || !ethereumProvider.session) return 'Other'; + let peerName = ethereumProvider.session.peer.metadata.name; + peerName = peerName.replace('Wallet', ''); + peerName = peerName.replace('wallet', ''); + peerName = peerName.trim(); + return peerName; + }, [ethereumProvider]); return { isWalletConnectEnabled, @@ -141,5 +149,6 @@ export const useWalletConnect = () => { walletConnectModal, openWalletConnectModal, getWalletLogoUrl, + getWalletName, }; }; diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx index d9f42da756..f6f4da6a27 100644 --- a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx +++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx @@ -5,7 +5,7 @@ import { ChainId, WalletProviderRdns } from '@imtbl/checkout-sdk'; import { getChainNameById } from 'lib/chains'; import { networkIcon } from 'lib'; import { Web3Provider } from '@ethersproject/providers'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useWalletConnect } from 'lib/hooks/useWalletConnect'; import { networkButtonStyles, @@ -44,8 +44,21 @@ export function WalletNetworkButton({ const [walletLogoUrl, setWalletLogoUrl] = useState( undefined, ); + const [walletConnectPeerName, setWalletConnectPeerName] = useState('Other'); const [isWalletConnect, setIsWalletConnect] = useState(false); - const { isWalletConnectEnabled, getWalletLogoUrl } = useWalletConnect(); + const { isWalletConnectEnabled, getWalletLogoUrl, getWalletName } = useWalletConnect(); + + const walletDisplayName = useMemo(() => { + if (walletProviderDetail?.info.rdns === WalletProviderRdns.PASSPORT) { + return walletName; + } + + if (isWalletConnectProvider(walletProvider)) { + return walletConnectPeerName; + } + + return walletProviderDetail?.info.name; + }, [walletProviderDetail, walletConnectPeerName, walletProvider]); useEffect(() => { if (isWalletConnectEnabled) { @@ -55,9 +68,10 @@ export function WalletNetworkButton({ (async () => { setWalletLogoUrl(await getWalletLogoUrl()); })(); + setWalletConnectPeerName(getWalletName()); } } - }, [isWalletConnectEnabled, walletProvider]); + }, [isWalletConnectEnabled, walletProvider, getWalletLogoUrl, getWalletName]); return ( - - {walletProviderDetail?.info.rdns === WalletProviderRdns.PASSPORT - ? walletName : walletProviderDetail?.info.name} - + {walletDisplayName} {walletAddress} diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx index faef059cb6..ded4cc8308 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx @@ -1,6 +1,7 @@ import { Box } from '@biom3/react'; import { ChainId, + CheckoutErrorType, WalletProviderName, WalletProviderRdns, } from '@imtbl/checkout-sdk'; import { @@ -9,11 +10,12 @@ import { import { motion } from 'framer-motion'; import { useTranslation } from 'react-i18next'; import { Web3Provider } from '@ethersproject/providers'; +import { UnableToConnectDrawer } from 'components/UnableToConnectDrawer/UnableToConnectDrawer'; +import { ChangedYourMindDrawer } from 'components/ChangedYourMindDrawer/ChangedYourMindDrawer'; import { ConnectWidgetViews } from '../../../context/view-context/ConnectViewContextTypes'; import { ConnectActions, ConnectContext } from '../context/ConnectContext'; import { WalletItem } from './WalletItem'; import { - SharedViews, ViewActions, ViewContext, } from '../../../context/view-context/ViewContext'; @@ -56,6 +58,10 @@ export function WalletList(props: WalletListProps) { const [showWalletDrawer, setShowWalletDrawer] = useState(false); const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect(); + const [showChangedYourMindDrawer, setShowChangedYourMindDrawer] = useState(false); + const [showUnableToConnectDrawer, setShowUnableToConnectDrawer] = useState(false); + const [chosenProviderDetail, setChosenProviderDetail] = useState(); + const filteredProviders = useMemo(() => ( providers.filter((provider) => (!(provider.info.rdns === WalletProviderRdns.PASSPORT))) ), [providers]); @@ -150,22 +156,24 @@ export function WalletList(props: WalletListProps) { getProviderSlugFromRdns(providerDetail.info.rdns), ); await handleConnectViewUpdate(web3Provider); - } catch (err: any) { + } catch (err: CheckoutErrorType | any) { + if (err.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) { // eslint-disable-next-line no-console - console.error('Connect rejected', err); + console.error('Connect rejected', err); + + setShowChangedYourMindDrawer(true); + } else { + // eslint-disable-next-line no-console + console.error('Connect error', err); - // TODO: Wire up error state drawers or throw them + setShowUnableToConnectDrawer(true); + } } } catch (err: any) { // eslint-disable-next-line no-console console.error('Connect unknown error', err); - viewDispatch({ - payload: { - type: ViewActions.UPDATE_VIEW, - view: { type: SharedViews.ERROR_VIEW, error: err }, - }, - }); + setShowUnableToConnectDrawer(true); } }, [checkout]); @@ -203,6 +211,7 @@ export function WalletList(props: WalletListProps) { const handleWalletChange = async (event: WalletChangeEvent) => { const { providerDetail } = event; + setChosenProviderDetail(providerDetail); track({ userJourney: UserJourney.CONNECT, screen: 'ConnectWallet', @@ -220,6 +229,9 @@ export function WalletList(props: WalletListProps) { const handleWalletItemClick = useCallback( async (providerDetail: EIP6963ProviderDetail) => { + setShowChangedYourMindDrawer(false); + setShowUnableToConnectDrawer(false); + setChosenProviderDetail(providerDetail); track({ userJourney: UserJourney.CONNECT, screen: 'ConnectWallet', @@ -236,6 +248,11 @@ export function WalletList(props: WalletListProps) { [track, checkout], ); + const onChosenProviderDetailChange = useCallback(() => { + if (!chosenProviderDetail) return; + handleWalletItemClick(chosenProviderDetail!); + }, [chosenProviderDetail]); + const onBrowserWalletsClick = useCallback(() => { setShowWalletDrawer(true); }, [track]); @@ -316,6 +333,20 @@ export function WalletList(props: WalletListProps) { }} onWalletChange={handleWalletChange} /> + + setShowChangedYourMindDrawer(false)} + onTryAgain={onChosenProviderDetailChange} + /> + + setShowUnableToConnectDrawer(false)} + onTryAgain={() => setShowUnableToConnectDrawer(false)} + /> ); }