fix: blocked cbw mobile popup (#398)

* raw connect button * direct connect in page * remove false * connect immediately * Update index.tsx * Update index.tsx * safari only * ios + safari
family · Jun 14, 2024 · 3e5c9bf · 3e5c9bf
1 parent ea2eb89
commit 3e5c9bf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/examples/testbench/src/components/Web3Provider.tsx b/examples/testbench/src/components/Web3Provider.tsx
@@ -41,7 +41,6 @@ export const ckConfig = getDefaultConfig({
   appName: 'ConnectKit testbench',
   appIcon: '/app.png',
   walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-  coinbaseWalletPreference: 'smartWalletOnly',
 });
 const customConfig = {
   ...ckConfig,

diff --git a/examples/testbench/src/pages/index.tsx b/examples/testbench/src/pages/index.tsx
@@ -64,7 +64,7 @@ const languages: SelectProps[] = [
   { label: 'Portuguese', value: 'pt-BR' },
   { label: 'Russian', value: 'ru-RU' },
   { label: 'Spanish', value: 'es-ES' },
-  { label: 'Turkish', value: 'tr-TR'},
+  { label: 'Turkish', value: 'tr-TR' },
   { label: 'Vietnamese', value: 'vi-VN' },
 ];
 

diff --git a/packages/connectkit/src/components/Common/ConnectorList/index.tsx b/packages/connectkit/src/components/Common/ConnectorList/index.tsx
@@ -15,8 +15,13 @@ import { ScrollArea } from '../../Common/ScrollArea';
 import Alert from '../Alert';
 
 import { WalletProps, useWallets } from '../../../wallets/useWallets';
-import { isWalletConnectConnector } from '../../../utils';
+import {
+  detectBrowser,
+  isCoinbaseWalletConnector,
+  isWalletConnectConnector,
+} from '../../../utils';
 import { useLastConnector } from '../../../hooks/useLastConnector';
+import { useConnect } from '../../../hooks/useConnect';
 
 const ConnectorList = () => {
   const context = useContext();
@@ -78,6 +83,8 @@ const ConnectorItem = ({
   const isMobile = useIsMobile();
   const context = useContext();
 
+  const { connect } = useConnect();
+
   /*
   const [ready, setReady] = useState(false);
   useEffect(() => {
@@ -94,7 +101,12 @@ const ConnectorItem = ({
       : undefined;
 
   const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
-  if (redirectToMoreWallets) deeplink = undefined; // mobile redirects to more wallets page
+  // Safari requires opening popup on user gesture, so we connect immediately here
+  const shouldConnectImmediately =
+    (detectBrowser() === 'safari' || detectBrowser() === 'ios') &&
+    isCoinbaseWalletConnector(wallet.connector.id);
+
+  if (redirectToMoreWallets || shouldConnectImmediately) deeplink = undefined; // mobile redirects to more wallets page
 
   return (
     <ConnectorButton
@@ -109,6 +121,9 @@ const ConnectorItem = ({
               if (redirectToMoreWallets) {
                 context.setRoute(routes.MOBILECONNECTORS);
               } else {
+                if (shouldConnectImmediately) {
+                  connect({ connector: wallet?.connector });
+                }
                 context.setRoute(routes.CONNECT);
                 context.setConnector({ id: wallet.id });
               }