From 577c6f0f91ff07536db150156cee42d1798e60c4 Mon Sep 17 00:00:00 2001 From: Charlie McKenzie Date: Tue, 16 Apr 2024 08:53:13 +1000 Subject: [PATCH] Added blocklistWalletRdns to connect widget and new session for walletconnect --- packages/checkout/sdk/src/types/config.ts | 2 +- .../widgets/definitions/parameters/connect.ts | 2 ++ .../src/lib/hooks/useInjectedProviders.ts | 23 ++++++++++--------- .../src/lib/hooks/useWalletConnect.ts | 2 +- .../src/widgets/connect/ConnectWidget.tsx | 7 +++++- .../src/widgets/connect/ConnectWidgetRoot.tsx | 1 + .../widgets/connect/components/WalletList.tsx | 12 +++++++--- .../widgets/connect/views/ConnectWallet.tsx | 9 ++++++-- .../ui/marketplace-orchestrator/MainPage.tsx | 13 +++++++++-- 9 files changed, 50 insertions(+), 21 deletions(-) diff --git a/packages/checkout/sdk/src/types/config.ts b/packages/checkout/sdk/src/types/config.ts index 54f464007e..b12cf3e4e6 100644 --- a/packages/checkout/sdk/src/types/config.ts +++ b/packages/checkout/sdk/src/types/config.ts @@ -130,7 +130,7 @@ export type ConnectConfig = { /** List for sorting injected wallets via wallet rdns */ priorityWalletRdns: string[]; /** List for blocking injected wallets via wallet rdns */ - blacklistWalletRdns: string[]; + blocklistWalletRdns: string[]; } }; diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts index 255030f5f3..8caa01f79f 100644 --- a/packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts +++ b/packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts @@ -11,4 +11,6 @@ export type ConnectWidgetParams = { language?: WidgetLanguage; /** The target chain to connect to as part of the connection process (defaults to Immutable zkEVM / Immutable zkEVM Testnet) */ targetChainId?: ChainId; + /** List of wallets rdns to exclude from the connect widget */ + blocklistWalletRdns?: string[]; }; diff --git a/packages/checkout/widgets-lib/src/lib/hooks/useInjectedProviders.ts b/packages/checkout/widgets-lib/src/lib/hooks/useInjectedProviders.ts index 69eae3c872..be5e8b228e 100644 --- a/packages/checkout/widgets-lib/src/lib/hooks/useInjectedProviders.ts +++ b/packages/checkout/widgets-lib/src/lib/hooks/useInjectedProviders.ts @@ -18,7 +18,7 @@ export interface UseInjectedProvidersParams { type ConnectConfig = { injected: { priorityWalletRdns: WalletProviderRdns | string[]; - blacklistWalletRdns: WalletProviderRdns | string[]; + blocklistWalletRdns: WalletProviderRdns | string[]; }; }; @@ -33,19 +33,15 @@ const processProviders = ( checkout: Checkout | null, injectedProviders: EIP6963ProviderDetail[], priorityWalletRdns: WalletProviderRdns | string[] = [], - blacklistWalletRdns: WalletProviderRdns | string[] = [], + blocklistWalletRdns: WalletProviderRdns | string[] = [], ) => { const getIndex = (rdns: string) => { const index = priorityWalletRdns.indexOf(rdns); return index >= 0 ? index : DEFAULT_PRIORITY_INDEX; }; - // Filter & sort providers - const filteredProviders = injectedProviders - .filter(({ info }) => !blacklistWalletRdns.includes(info.rdns)) - .sort((a, b) => ( - getIndex(a.info.rdns) - getIndex(b.info.rdns) - )); + // Injected providers + const filteredProviders = [...injectedProviders]; // Attempt to fallback to window.ethereum if no EIP-6963 providers are found // Assuming this is MetaMask on mobile @@ -63,7 +59,12 @@ const processProviders = ( filteredProviders.unshift(getPassportProviderDetail(passportWeb3Provider.provider as EIP1193Provider)); } - return filteredProviders; + // Filter & sort providers + return filteredProviders + .filter(({ info }) => !blocklistWalletRdns.includes(info.rdns)) + .sort((a, b) => ( + getIndex(a.info.rdns) - getIndex(b.info.rdns) + )); }; /** @@ -79,12 +80,12 @@ export const useInjectedProviders = ({ checkout }: UseInjectedProvidersParams) = const filterAndProcessProviders = useCallback(async (injectedProviders: EIP6963ProviderDetail[]) => { const connectConfig = await checkout?.config.remote.getConfig('connect') as ConnectConfig; const priorityWalletRdns = connectConfig.injected?.priorityWalletRdns ?? []; - const blacklistWalletRdns = connectConfig.injected?.blacklistWalletRdns ?? []; + const blocklistWalletRdns = connectConfig.injected?.blocklistWalletRdns ?? []; const filteredProviders = processProviders( checkout, injectedProviders, priorityWalletRdns, - blacklistWalletRdns, + blocklistWalletRdns, ); setProviders(filteredProviders); }, [checkout, setProviders]); diff --git a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts index ffef439b17..b7141d1662 100644 --- a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts +++ b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts @@ -124,7 +124,7 @@ export const useWalletConnect = () => { setWalletConnectBusy(true); reject(error); }); - } else if (!ethereumProvider?.session) { + } else if (!ethereumProvider?.session || !restoreSession) { // if we don't have a display uri and no connected session // call connect to generate display_uri event ethereumProvider?.connect(); diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx index a1c0f58a3a..0ecd911806 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx @@ -60,6 +60,7 @@ export default function ConnectWidget({ checkout, targetChainId, allowedChains, + blocklistWalletRdns, deepLink = ConnectWidgetViews.CONNECT_WALLET, }: ConnectWidgetInputs) { const { t } = useTranslation(); @@ -186,7 +187,11 @@ export default function ConnectWidget({ )} {view.type === ConnectWidgetViews.CONNECT_WALLET && ( - + )} {view.type === ConnectWidgetViews.SWITCH_NETWORK && isZkEvmChainId(targetChain) && ( diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidgetRoot.tsx index 1f89ab712f..5a56b221b0 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidgetRoot.tsx @@ -68,6 +68,7 @@ export class Connect extends Base { config={this.strongConfig()} checkout={this.checkout} targetChainId={this.parameters.targetChainId} + blocklistWalletRdns={this.parameters.blocklistWalletRdns} /> 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 3b54d699ad..e4b7f0fbc7 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx @@ -41,11 +41,13 @@ import { identifyUser } from '../../../lib/analytics/identifyUser'; export interface WalletListProps { targetChainId: ChainId; allowedChains: ChainId[]; + blocklistWalletRdns?: string[]; } export function WalletList(props: WalletListProps) { const { t } = useTranslation(); const { targetChainId, allowedChains } = props; + const blocklistWalletRdns = props?.blocklistWalletRdns || []; const { connectDispatch, connectState: { checkout }, @@ -61,13 +63,17 @@ export function WalletList(props: WalletListProps) { const [chosenProviderDetail, setChosenProviderDetail] = useState(); const filteredProviders = useMemo(() => ( - providers.filter((provider) => (!(provider.info.rdns === WalletProviderRdns.PASSPORT))) + providers + .filter((provider) => (!(provider.info.rdns === WalletProviderRdns.PASSPORT))) + .filter((provider) => (!blocklistWalletRdns.includes(provider.info.rdns))) ), [providers]); // Don't allow Passport if targetChainId is L1 const passportProviderDetail = useMemo(() => ( targetChainId !== getL1ChainId(checkout!.config) - && providers.find((provider) => provider.info.rdns === WalletProviderRdns.PASSPORT) + && providers + .filter((provider) => (!blocklistWalletRdns.includes(provider.info.rdns))) + .find((provider) => provider.info.rdns === WalletProviderRdns.PASSPORT) ), [providers, checkout]); const selectWeb3Provider = useCallback((web3Provider: Web3Provider, providerName: string) => { @@ -197,7 +203,7 @@ export function WalletList(props: WalletListProps) { }); await openWalletConnectModal({ connectCallback, - restoreSession: true, + restoreSession: false, }); }; diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/ConnectWallet.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/ConnectWallet.tsx index c1aa1ddfdc..504a81fda7 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/views/ConnectWallet.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/views/ConnectWallet.tsx @@ -12,9 +12,10 @@ import { UserJourney, useAnalytics } from '../../../context/analytics-provider/S export interface ConnectWalletProps { targetChainId: ChainId; allowedChains: ChainId[]; + blocklistWalletRdns?: string[]; } -export function ConnectWallet({ targetChainId, allowedChains }: ConnectWalletProps) { +export function ConnectWallet({ targetChainId, allowedChains, blocklistWalletRdns }: ConnectWalletProps) { const { t } = useTranslation(); const { connectState: { sendCloseEvent }, @@ -67,7 +68,11 @@ export function ConnectWallet({ targetChainId, allowedChains }: ConnectWalletPro - + ); diff --git a/packages/checkout/widgets-sample-app/src/components/ui/marketplace-orchestrator/MainPage.tsx b/packages/checkout/widgets-sample-app/src/components/ui/marketplace-orchestrator/MainPage.tsx index eaf09bee29..99d67798fa 100644 --- a/packages/checkout/widgets-sample-app/src/components/ui/marketplace-orchestrator/MainPage.tsx +++ b/packages/checkout/widgets-sample-app/src/components/ui/marketplace-orchestrator/MainPage.tsx @@ -105,8 +105,16 @@ export const MainPage = () => { }, [walletWidget, bridgeWidget, onRampWidget, swapWidget]); // button click functions to open/close widgets - const openConnectWidget = useCallback((targetChainId?: ChainId) => { - connectWidget.mount('connect-target', {targetChainId: targetChainId}); + const openConnectWidget = useCallback((targetChainId?: ChainId, blockWallets: boolean = false) => { + const connectParams = {targetChainId: targetChainId}; + if (blockWallets) { + connectParams.blocklistWalletRdns = [ + 'com.immutable.passport', + 'io.metamask', + 'xyz.frontier.wallet', + ]; + } + connectWidget.mount('connect-target', connectParams); }, [connectWidget]) const openWalletWidget = useCallback(() => { @@ -164,6 +172,7 @@ export const MainPage = () => { +