Coinbase Wallet enableMobileWalletLinking showing Coinbase Wallet open app website

[marcusmolchany]

Describe the bug

I am trying to use wagmi in a react-native-webview to login to my Expo app using Coinbase Wallet mobile. The webview shows the npm create wagmin@latest site on a next app from vercel. I've included the option enableMobileWalletLinking: true, because we do not want our login page to open up inside of Coinbase Wallet's dapp browser, instead we want to Wallet Link to connect, sign a message, and then stay within our Expo app.

Currently, when we choose Coinbase Wallet as our connection option, we get redirected to Coinbase Wallet, are shown the connect sheet in the Coinbase Wallet app, and then when we return to our app showing the webview, the webview has changed to show a Coinbase Wallet website that forwards us to the iOS App Store.

screenshot

Link to Minimal Reproducible Example

https://stackblitz.com/edit/new-wagmi-wiqtks?file=src%2Fwagmi.ts

Steps To Reproduce

• Set your VITE_WC_PROJECT_ID
• Create an Expo app with a react-native-webview
• set app.json expo.ios.infoPlist.LSApplicationQueriesSchemes to ["cbwallet"]
• Present the react-native-webview with https://stackblitz.com/edit/new-wagmi-wiqtks?file=src%2Fwagmi.ts and choose "Coinbase Wallet" as the login option

Wagmi Version

2.5.19

Viem Version

2.9.9

TypeScript Version

5.4.4

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[imaksp]

Hi, this could possibly be fixed by forcefully upgrading to 3.9.3 version of cb sdk (wagmi is using 3.9.1 fixed version), but not creating PR as draft PR which upgrades it directly to v4 already exists here:
#3784

[marcusmolchany]

For anyone experiencing this issue, we got around temporarily by doing:

const coinbaseRedirectUrls = Object.freeze([
  "https://go.cb-w.com/",
  "https://v3eo.app.link/",
]);

export const isCoinbaseRedirectUrl = (url: string): boolean =>
  coinbaseRedirectUrls.some((coinbaseRedirectUrl) =>
    url.startsWith(coinbaseRedirectUrl)
  );

// in our component render function
  return(
        <WebView
          ref={webviewRef}
          source={{ uri: /* your login url */ }}
          onMessage={(event) => {
            // handle postMessage back to react-native-webview
            // with `event.nativeEvent.data)`
          }}
          onNavigationStateChange={(event) => {
            // note: handle coinbase wallet redirect
            if (isCoinbaseRedirectUrl(event.url)) {
              console.log("handling coinbase redirect url", event.url);
              // note: prevent react-native-webview from loading
              // the coinbase redirect url
              webviewRef?.current?.stopLoading();
              // note: use expo Linking to open the coinbase redirect url
              // which will deeplink into the coinbase wallet app
              Linking.openURL(event.url);
              return;
            }
          }}
        />
  );

[tmm]

Wagmi now uses the v4 of the CB SDK so this should no longer be an issue.

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Wagmi version. If you have any questions or comments you can create a new discussion thread.