MetaMask SDK in React popup shows even if i have the extension

[thecodingsage]

I am making a DAPP using React Vite, and i want to switch from using window.ethereum to MMSDK.

So, what happens is that even if I have the extension it opens the popup when the Submit Button is clicked.

Here are the screenshots for this:

My Extenstion:

If I click Submit:

There are no errors but the popup comes even though I have the extension.

Actually I cant give links and more images so please check my StackOverflow post: https://stackoverflow.com/q/76563765/18320612

[nakedwinnie]

Hey @thecodingsage, welcome to the MetaMask community!

Which MM SDK version are you using?

[thecodingsage]

Hey, im using version ^0.3.2. This is my package.json:

{
	"name": "land_ui",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
		"preview": "vite preview"
	},
	"dependencies": {
		"@metamask/sdk": "^0.3.2",
		"bootstrap": "^5.3.0",
		"dotenv": "^16.3.1",
		"ethers": "^6.6.1",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"web3": "^4.0.1"
	},
	"devDependencies": {
		"@types/react": "^18.0.37",
		"@types/react-dom": "^18.0.11",
		"@vitejs/plugin-react": "^4.0.0",
		"eslint": "^8.38.0",
		"eslint-plugin-react": "^7.32.2",
		"eslint-plugin-react-hooks": "^4.6.0",
		"eslint-plugin-react-refresh": "^0.3.4",
		"vite": "^4.3.9"
	},
	"pnpm": {
		"overrides": {
			"esbuild": "npm:esbuild-wasm@latest"
		}
	}
}

Thanks for your reply!

[thecodingsage]

@nakedwinnie I recently noticed a warning is coming when the button is pressed:

[snwlprd.eth]

Hello @thecodingsage !
Welcome to MetaMask community !

I deployed your application and tested it on an old version of Brave (Quite old and not updated for a long time), there was an error related to the fact that provider MetaMask is undefined:

BUT! When I tested this in my stable and updated version of Chrome, here is a successful connection to the MetaMask wallet via the SDK and displaying the connectable address (there are other errors below ):

What browsers and operating systems have you tested your application on?
You should probably also update @metamask/sdk to the current release version “0.3.3”

[thecodingsage]

Hey @snwlprd.eth

I have Brave Browser version 1.33.106 and can’t update it as I have an old MacBook Pro 2009 Mid with MacOSX 10.11.6.

Also, the latest version of the @metamask/sdk says no error, and the Install MetaMask Extenstion button works!

Unfortunately, the primary function doesn’t work and the popup still comes, but it says connected on the extension:

Also, is there no way but to buy a new laptop for this to work? Is there any hope?

BTW, I have version 10.32.0 of the extension.

Thanks for your reply!

[thecodingsage]

Also, I want add that it might not be a problem with the browser or the operating system as the test-dapp from the MetaMask docs works.

Here is the link to it if it helps: https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/test-dapp/

[snwlprd.eth]

@thecodingsage

Looking at the source code of this example, you can see that the ethers and @metamask/onboarding libraries are used.

You may also use the @metamask/detect-provider library, which is more likely to work in your environment.

[thecodingsage]

Can you please provide the source code? It’ll sure help! (Sorry for the late reply)

[snwlprd.eth]

@thecodingsage

Add this to the URL of the Github:
/MetaMask/test-dapp

[thecodingsage]

@snwlprd.eth @nakedwinnie Thanks so much for all your help!
Now it works on both Desktop and Mobile!

But I have a small question even if I use @metamask/sdk, do I have to use the MetaMask Mobile Browser?

Once again, Thanks so much for all your help!

[snwlprd.eth]

@thecodingsage

@metamask/sdk generic lib but probably your Brave current version is too old but you can play with options object config which is an argument maybe it will give some result