Problem with Production Environment Detection using MetaMask SDK

SDK

Web

Provide environment information

Operating System: macOS Ventura 13.4 Node.js Version: 18.16.0 npm Version: 9.6.7 Vite Version: 5.2.0 React Version: 18.2.0 MetaMask SDK Version: 0.18.5 (also tested with 0.20.5) Browser: Chrome 126.0.6478.62 MetaMask Extension Version: 11.16.10

MetaMask SDK Version

0.20.5

MetaMask Mobile app Version

7.24.0

What browser are you using? (if relevant)

Chrome 126.0.6478.62

How are you deploying your application? (if relevant)

No response

Describe the Bug

Hello folks,

I want to report an issue I came across while using the MetaMask SDK in a React/Vite project.

In my project, when using the MetaMaskProvider from @metamask/sdk-react, the React extension in Chrome identifies the environment as "development" even when the application is served in production. This was verified by completely removing the MetaMaskProvider from the code, or by commenting out the code that utilizes MetaMaskProvider, which correctly identified the production environment. With MetaMaskProvider, the extension stays red (development environment); without it, the extension stays blue (production environment).

Without MetaMaskProvider:

With MetaMaskProvider:

Perhaps this is a specific issue in my environment, but since I haven't found a solution for it, I decided to post it here as an issue. It might be a configuration problem or an issue with the MetaMaskProvider integration, but I'm unsure about what exactly is causing this misidentification of the environment. If anyone can help me identify what I might be doing wrong or suggest other approaches to test, I would greatly appreciate it. Any guidance on what to try differently would be very welcome!

Expected Behavior

The React extension in Chrome should detect the application as "production" when the project is built and served correctly using the MetaMask SDK. The presence of MetaMaskProvider and integration with Web3 should not cause the extension to identify the environment as "development". The application should operate without altering the detection of the environment when using MetaMaskProvider with standard or minimal configuration options.

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

No response

To Reproduce

Start a new React project with Vite:

npm create vite@latest my-project -- --template react
cd my-project

Install the MetaMask SDK:

npm install @metamask/sdk @metamask/sdk-react

Create a simple component that uses MetaMask:

// TestComponent.jsx
import React, { useState } from 'react';
import { useSDK } from "@metamask/sdk-react";
import { useMetaMask } from './web3/MetaMaskContext';
import MetaMaskLogoImage from './assets/metamask-logo.png';
import { ChevronLeft } from 'lucide-react';

const TestComponent = React.memo(({ onClose, onBack }) => {
  const { sdk } = useSDK();
  const { activateMetaMask } = useMetaMask();
  const [isConnecting, setIsConnecting] = useState(false);

  const handleOutsideClick = (event) => {
    if (event.target === event.currentTarget && !isConnecting) {
      onClose();
    }
  };

  const connectMetaMask = async () => {
    console.log('Activating MetaMask...');
    activateMetaMask();
    if (!sdk) {
      console.error('MetaMask SDK is not ready.');
      return;
    }
    console.log('Attempting to connect...');
    setIsConnecting(true);
    try {
      const accounts = await sdk.connect();
      console.log('Connected to MetaMask successfully!', accounts[0]);
      setTimeout(() => {
        setIsConnecting(false);
        onClose();
      }, 500);
    } catch (error) {
      console.error('Failed to connect to MetaMask', error);
      setIsConnecting(false);
    }
  };

  return (
    <div onClick={handleOutsideClick}>
      <div onClick={e => e.stopPropagation()}>
        <div className='header' onClick={onBack}>
          <ChevronLeft />
          <h1>MetaMask</h1>
        </div>
        <div>
          <img src={MetaMaskLogoImage} alt="MetaMask logo" />
        </div>
        <div>
          <h2>Continue with MetaMask</h2>
          <p>Approve connection request in wallet.</p>
          <button onClick={connectMetaMask} disabled={isConnecting}>
            {isConnecting ? 'Connecting...' : 'Connect with MetaMask'}
          </button>
        </div>
      </div>
    </div>
  );
});

export default TestComponent;

Adjust main.jsx to integrate MetaMask:

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { MetaMaskProvider } from "@metamask/sdk-react";
import { MetaMaskProviderWrapper, useMetaMask } from "./web3/MetaMaskContext";

function AppWithMetaMask() {
  const { isMetaMaskActive } = useMetaMask();

  return (
    <React.Fragment>
      {isMetaMaskActive ? (
        <MetaMaskProvider
          debug={true}
          sdkOptions={{
            dappMetadata: {
              name: "TestProject",
              url: window.location.href,
            },
          }}
        >
          <App />
        </MetaMaskProvider>
      ) : (
        <App />
      )}
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MetaMaskProviderWrapper>
      <AppWithMetaMask />
    </MetaMaskProviderWrapper>
  </React.StrictMode>
);

Build and serve the project:

npm run build
npx serve dist

Observation: We adjusted main.jsx to integrate with the MetaMaskProvider from @metamask/sdk-react and included conditional rendering logic to check if MetaMask is active. This configuration causes the incorrect detection of the environment as development by the React extension, even when served as production.

MetaMask / metamask-sdk