Added blocklistWalletRdns to connect widget and new session for walle…

…tconnect
immutable · Apr 15, 2024 · 577c6f0 · 577c6f0
1 parent ff3c508
commit 577c6f0
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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({
             <LoadingView loadingText="Loading" />
           )}
           {view.type === ConnectWidgetViews.CONNECT_WALLET && (
-            <ConnectWallet targetChainId={targetChain} allowedChains={allowedChains ?? [targetChain]} />
+            <ConnectWallet
+              targetChainId={targetChain}
+              allowedChains={allowedChains ?? [targetChain]}
+              blocklistWalletRdns={blocklistWalletRdns}
+            />
           )}
           {view.type === ConnectWidgetViews.SWITCH_NETWORK && isZkEvmChainId(targetChain) && (
             <SwitchNetworkZkEVM />

diff --git 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<WidgetType.CONNECT> {
                 config={this.strongConfig()}
                 checkout={this.checkout}
                 targetChainId={this.parameters.targetChainId}
+                blocklistWalletRdns={this.parameters.blocklistWalletRdns}
               />
             </Suspense>
           </ThemeProvider>

diff --git 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<EIP6963ProviderDetail>();
 
   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
@@ -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
         </Body>
       </Box>
       <Box sx={{ paddingX: 'base.spacing.x2' }}>
-        <WalletList targetChainId={targetChainId} allowedChains={allowedChains} />
+        <WalletList
+          targetChainId={targetChainId}
+          allowedChains={allowedChains}
+          blocklistWalletRdns={blocklistWalletRdns}
+        />
       </Box>
     </SimpleLayout>
   );

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
@@ -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 = () => {
         <Box sx={{ padding: 'base.spacing.x4', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', gap: 'base.spacing.x6', alignItems: 'center', flexWrap: 'wrap' }}>
           <Button onClick={() => openConnectWidget()}>Connect</Button>
           <Button onClick={() => openConnectWidget(checkout.config.isProduction ? ChainId.ETHEREUM : ChainId.SEPOLIA)}>Connect (Layer 1)</Button>
+          <Button onClick={() => openConnectWidget(undefined, true)}>Connect (Blocked)</Button>
           <Button onClick={openWalletWidget}>Wallet</Button>
           <Button onClick={openSwapWidget}>Swap</Button>
           <Button onClick={openBridgeWidget}>Bridge</Button>