### 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 (

e.stopPropagation()}>

MetaMask

Continue with MetaMask

Approve connection request in wallet.

{isConnecting ? 'Connecting...' : 'Connect with MetaMask'}

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 (

{isMetaMaskActive ? (



) : (

)}

);
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(





);
```

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.

Start with main.jsx, TestComponent.jsx, and the MetaMaskProvider integration shown in the report. Build the Vite app with npm run build and serve dist with npx serve dist, comparing behavior with and without MetaMaskProvider. Done means the production-served app is detected as production while retaining the MetaMask connection flow.

Written by the indexing model from the issue text.