Skip to content

Commit

Permalink
feat: Hook up error drawers to connect widget (#1580)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sharonsheah
sharonsheah authored Mar 8, 2024
1 parent 4014011 commit d748440
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 18 deletions.
11 changes: 10 additions & 1 deletion packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const useWalletConnect = () => {
(async () => setEthereumProvider(await WalletConnectManager.getInstance().getProvider()))();
setWalletConnectModal(WalletConnectManager.getInstance().getModal());
}
}, []);
}, [isWalletConnectEnabled]);

const openWalletConnectModal = useCallback(async ({
connectCallback,
Expand Down Expand Up @@ -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,
Expand All @@ -141,5 +149,6 @@ export const useWalletConnect = () => {
walletConnectModal,
openWalletConnectModal,
getWalletLogoUrl,
getWalletName,
};
};
25 changes: 18 additions & 7 deletions packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -44,8 +44,21 @@ export function WalletNetworkButton({
const [walletLogoUrl, setWalletLogoUrl] = useState<string | undefined>(
undefined,
);
const [walletConnectPeerName, setWalletConnectPeerName] = useState('Other');
const [isWalletConnect, setIsWalletConnect] = useState<boolean>(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) {
Expand All @@ -55,9 +68,10 @@ export function WalletNetworkButton({
(async () => {
setWalletLogoUrl(await getWalletLogoUrl());
})();
setWalletConnectPeerName(getWalletName());
}
}
}, [isWalletConnectEnabled, walletProvider]);
}, [isWalletConnectEnabled, walletProvider, getWalletLogoUrl, getWalletName]);

return (
<Box
Expand Down Expand Up @@ -87,10 +101,7 @@ export function WalletNetworkButton({
flex: 1,
}}
>
<Heading size="xSmall" sx={{ textTransform: 'capitalize' }}>
{walletProviderDetail?.info.rdns === WalletProviderRdns.PASSPORT
? walletName : walletProviderDetail?.info.name}
</Heading>
<Heading size="xSmall" sx={{ textTransform: 'capitalize' }}>{walletDisplayName}</Heading>
<Body size="xSmall" sx={walletCaptionStyles}>
{walletAddress}
</Body>
Expand Down
51 changes: 41 additions & 10 deletions packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Box } from '@biom3/react';
import {
ChainId,
CheckoutErrorType,
WalletProviderName, WalletProviderRdns,
} from '@imtbl/checkout-sdk';
import {
Expand All @@ -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';
Expand Down Expand Up @@ -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<EIP6963ProviderDetail>();

const filteredProviders = useMemo(() => (
providers.filter((provider) => (!(provider.info.rdns === WalletProviderRdns.PASSPORT)))
), [providers]);
Expand Down Expand Up @@ -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]);

Expand Down Expand Up @@ -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',
Expand All @@ -220,6 +229,9 @@ export function WalletList(props: WalletListProps) {

const handleWalletItemClick = useCallback(
async (providerDetail: EIP6963ProviderDetail<EIP1193Provider>) => {
setShowChangedYourMindDrawer(false);
setShowUnableToConnectDrawer(false);
setChosenProviderDetail(providerDetail);
track({
userJourney: UserJourney.CONNECT,
screen: 'ConnectWallet',
Expand All @@ -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]);
Expand Down Expand Up @@ -316,6 +333,20 @@ export function WalletList(props: WalletListProps) {
}}
onWalletChange={handleWalletChange}
/>

<ChangedYourMindDrawer
visible={showChangedYourMindDrawer}
checkout={checkout!}
onCloseDrawer={() => setShowChangedYourMindDrawer(false)}
onTryAgain={onChosenProviderDetailChange}
/>

<UnableToConnectDrawer
visible={showUnableToConnectDrawer}
checkout={checkout!}
onCloseDrawer={() => setShowUnableToConnectDrawer(false)}
onTryAgain={() => setShowUnableToConnectDrawer(false)}
/>
</Box>
);
}

0 comments on commit d748440

Please sign in to comment.