[Bug]: Safari iOS: Unable to Connect within iframe after 0.27.0 Upgrade

[andremfaria]

SDK

Web

Provide environment information

web
sdk-react 0.27.0
safari 17.4

MetaMask SDK Version

0.27.0

MetaMask Mobile app Version

7.27.0

What browser are you using? (if relevant)

Safari 17.4

How are you deploying your application? (if relevant)

web

Describe the Bug

With the new version 0.27.0, if we are using an iframe and hit sdk?.connect(), nothing happens. This behaviour occurs in Safari on iOS.

Video:

Screen.Recording.2024-07-30.at.13.16.36.mov

Expected Behavior

We should be able to connect on Safari@IOS within an Iframe.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/andremfaria/mm-iframe/

To Reproduce

1. Run the Project: https://github.com/andremfaria/mm-iframe/

2. Open Safari on iOS:

   • Ensure you are using an iOS device.
   • Open the Safari browser.

3. Access the Local Server:

   • In Safari, navigate to http://<your-local-ip>:5173/iframe/index.html.
   • Replace <your-local-ip> with your actual local IP address.

4. Trigger the Issue:

   • On the webpage, locate and click the "Connect" button.

[christopherferreira9]

Hi @andremfaria ! Thank you for reporting!
Are you doing pnpm run dev or pnpm run build + serve the built folder?

I can see it working with both options though:

Screen.Recording.2024-08-12.at.12.15.30.mov

[andremfaria]

Hello @christopherferreira9, thanks for your feedback!

I noticed in your video that you're not using the iframe. Could you please test it on http://local-ip:port/iframe/index.html? The issue only happens when using an iframe.

[christopherferreira9]

Hi @andremfaria ! You're right, got it to reproduce going into the proper route, I'm sorry for the confusion. Will escalate to investigate.

[andremfaria]

Hi @christopherferreira9, just an update: I tested with version 0.28.1, and the issue is still occurring.

[abretonc7s]

Heu @andremfaria , this looks like an IOS limitation. Are you saying it was working on previous versions? And which one?

The sdk is emitting this event: ' provider.emit('display_uri', qrcodeLink); ' which contains the link of the deeplink or qrcode.

One way you could do it, is by listening for the 'display_uri' event from sdk then communicate it back to the iframe and from the iframe open the deeplink...

https://stackoverflow.com/questions/31573143/is-it-possible-to-browser-deeplink-to-an-app-without-popup

[andremfaria]

Hello @abretonc7s,

The last version where it worked was 0.26.5, and the issue began with 0.27.0.

I'll try your suggestion and let you know the results.

Thanks

[andremfaria]

Hello @abretonc7s
Just an update, I haven't tested yet on the real project, but on the reproducible code, I was able to connect by listening to that event and then opening the deep link.

Although I believe this isn't an iOS limitation, as setting the version to 0.26.5 or older on the reproducible code works fine. Most likely, this was a regression introduced when upgrading from 0.26.5 to 0.27.0.

[abretonc7s]

Hi @andremfaria , apologies for our slow response on this. I will have a deeper look and should have a fix by Monday.

[adamceresko]

Wait, @andremfaria did you say you now have it working?

A few notes:

1. You are correct, in v0.27, we changed how the deeplink is handled on the client side because we were having a lot of issues with timeouts and MM wallet app not being able to connect with the dapp consistently every time.
2. If we had to guess, that change is likely what caused the issue. In v0.28 and no v.0.29, we have removed support for universal links in favor of deeplinks for more upgrades we made in support of much better connection to the MM wallet.

Please confirm that you are unblocked and everything is working. If not, please specify the remaining issue and @abretonc7s can help.

[abretonc7s]

hi @andremfaria ,

here is a simpler fix you can use:

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <MetaMaskProvider debug={true}
    sdkOptions={{
      useDeeplink: true,
      extensionOnly: false,
      openDeeplink(arg) {
          console.log("openDeeplink", arg)
          window.open(arg, "_blank")
          console.log(`deeplink opened: ${arg}`)
      },
      logging: {
        developerMode: true,
        sdk: true,
    },
        dappMetadata: {
          name: "Demo React App",
          url: window.location.protocol + '//' + window.location.host,
        }
    }}>
    <App />
    </MetaMaskProvider>
  </React.StrictMode>,
)

Just add the opendeeplink function to the sdkOptions.