[Bug]: MetaMask SDK not working on Brave @ iOS when using HTTPS.

[andremfaria]

SDK

Web

Provide environment information

IOS 17.4
Brave 1.65
MetamaskSDK 0.18.6
Metamask Mobile app 7.22.0

MetaMask SDK Version

0.18.6

MetaMask Mobile app Version

7.22.0 (1325)

What browser are you using? (if relevant)

Brave 1.65 (122)

How are you deploying your application? (if relevant)

No response

Describe the Bug

On Mobile, using Brave, when we access a web app that has https enabled, we try to connect but the SDK is undefined.

We see the following errors on the Brave mobile logs when the page first loads:

Raw logs:

[Warning] [blocked] The page at https://192.168.1.67:5173/ was not allowed to display insecure content from user-script://null/index.iife.min.js.map.

[Error] Not allowed to request resource
[Error] Cannot load user-script://null/index.iife.min.js.map due to access control checks.
[Debug] [vite] connecting... (client, line 469)
[Debug] [vite] connected. (client, line 576)
[Debug] MM_SDK [MetaMaskSDK: constructor()]: begin. +0ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [MetaMaskSDK: performSDKInitialization()] options +0ms – {logging: {developerMode: true, sdk: true}, dappMetadata: {name: "Demo React App", url: "https://192.168.1.67:5173"}, communicationLayerPreference: "socket", …} (@metamask_sdk-react.js, line 19251)
{logging: {developerMode: true, sdk: true}, dappMetadata: {name: "Demo React App", url: "https://192.168.1.67:5173"}, communicationLayerPreference: "socket", enableAnalytics: true, injectProvider: true, …}Object
[Debug] MM_SDK [MetaMaskSDK: initializeMetaMaskSDK()] already initializing +1ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK-React [MetaMaskProviderClient] sdk already initialized +0ms (@metamask_sdk-react.js, line 42898)
[Debug] MM_SDK [WakeLockManager: setDebug()] activate debug mode +0ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [RemoteConnection: initializeConnector()] initialize connector +503ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [initializeMobileProvider] cachedAccountAddress: null, cachedChainId: null +23ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [Ethereum: init()] Initializing Ethereum service +0ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [SDKProvider: initializeStateAsync()] initialize state async started +1ms (@metamask_sdk-react.js, line 19251)
[Debug] MM_SDK [SDKProvider: constructor()] autoRequestAccounts=false +1ms (@metamask_sdk-react.js, line 19251)
[Error] TypeError: Attempted to assign to readonly property. — metamask-sdk.js:5:193994
	(anonymous function) (@metamask_sdk-react.js:42638)
	s3 (@metamask_sdk-react.js:16761)
[Error] [MetaMaskSDK: constructor()] error during initialization – TypeError: Attempted to assign to readonly property. — metamask-sdk.js:5:193994
TypeError: Attempted to assign to readonly property. — metamask-sdk.js:5:193994
	(anonymous function) (@metamask_sdk-react.js:42621)
[Error] Unhandled Promise Rejection: TypeError: Attempted to assign to readonly property.
	(anonymous function) (@metamask_sdk-react.js:22826:93)
[Error] Unhandled Promise Rejection: Error: Ethereum instance not intiialized - call Ethereum.factory first.

Expected Behavior

We should be able to connect the accounts on Brave @ iOS

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

https://github.com/andremfaria/mm-sdk-brave-ios-problem

To Reproduce

• Use Safari Web Inspector to view the Brave logs on your mobile device.
• Run the example app.
• Open Brave on your iPhone and access https://<your_local_network_ip>:5172/.
• Hit the "Connect" button.
• Nothing happens. SDK is undefined.

[christopherferreira9]

Hi @andremfaria ! I gave this a try but wasn't able to reproduce the issue although I'm using the latest version of the SDK. For sdk-react we're just about to release a new version, I'll update this issue once we do so that you can give it another quick go.
With this specific dapp I was able to get an issue related to the selectedAddress which is somewhat expected since brave has it's own provider injected. Will sync back with the team about this.

Screen.Recording.2024-06-04.at.19.34.13.mov

[christopherferreira9]

Hi @andremfaria ! I'm going to close this issue to avoid having stale issues open. Please feel free to give as a ping with a new issue or through a comment so that we can open a new issue.

[andremfaria]

Hello, @christopherferreira9 . I tried with the latest version (0.26.3), and the problem persists. Please note that in your video, you are testing in a test app using HTTP. This issue only occurs with HTTPS. You can check this reproducible code: https://github.com/andremfaria/mm-sdk-brave-ios-problem.

[christopherferreira9]

@andremfaria I'm reopening this issue to investigate further.

[Elabar]

Had the same issue.

For now, I just wrap the MetaMaskProvider with a ErrorBoundary and ask user to try in Safari when sdk not found by calling const { sdk } = useSdk