fix wallet provider

Author: hsy822

apps/remix-ide/src/app/plugins/prompt-blocks.ts

@@ -140,7 +140,8 @@ export const invariants = {
 3. **ALWAYS import React from 'react'** in any file using JSX (especially \`src/main.jsx\` and \`src/App.jsx\`).
    - Example: \`import React from 'react';\` must be at the top, even if you use \`createRoot\`.
 4. **ETHERS.JS PROVIDER RULES (CRITICAL):**
-   - **MUST USE:** Always use \`new ethers.BrowserProvider(window.ethereum)\` for both reading and writing.
+   - **MUST USE:** Always use \`ethers.BrowserProvider\` with a wallet provider for both reading and writing.
+   - **PROVIDER ACQUISITION:** Use \`window.__qdapp_getProvider ? await window.__qdapp_getProvider() : window.ethereum\` to get the provider. Store this raw provider in a ref/variable for reuse (e.g. network switching).
    - **FORBIDDEN:** NEVER use \`new ethers.JsonRpcProvider\`, \`InfuraProvider\`, or \`AlchemyProvider\`.
    - **FORBIDDEN:** NEVER generate code containing placeholders like 'YOUR_INFURA_KEY' or ask for API keys.
 4. Use React with JSX syntax (not "text/babel" scripts).
@@ -233,11 +234,24 @@ const switchNetwork = async (targetChainHex) => {
 1. **Connect Wallet** button must be visible in the header/navbar when disconnected.
 2. **Disconnect Wallet** button must be visible in the header/navbar when connected (next to the account address).
 3. **Switch Network** button must appear **only when** the connected wallet's chain ID differs from the DApp's target chain ID. Hide it when on the correct network.
-4. Check \`window.ethereum\` existence before any wallet operations.
-5. Show "Wrong Network" warning with a **Switch Network** button if chain ID mismatches.
-6. Use loading spinners for async actions.
-7. Handle "User rejected request" errors gracefully.
-8. Show truncated wallet address (e.g. \`0x1234...5678\`) when connected.
+4. Use loading spinners for async actions.
+5. Handle "User rejected request" errors gracefully.
+6. Show truncated wallet address (e.g. \`0x1234...5678\`) when connected.
+
+**WALLET PROVIDER ACQUISITION (CRITICAL):**
+The deployed DApp uses \`window.__qdapp_getProvider()\` to discover and select wallets via EIP-6963.
+Always get the raw provider like this:
+\`\`\`javascript
+const rawProvider = window.__qdapp_getProvider
+  ? await window.__qdapp_getProvider()
+  : window.ethereum;
+if (!rawProvider) {
+  alert('Please install a Web3 wallet (e.g. MetaMask).');
+  return;
+}
+const provider = new ethers.BrowserProvider(rawProvider);
+\`\`\`
+**Store \`rawProvider\` in a React ref** (e.g. \`rawProviderRef.current = rawProvider\`) so you can reuse it for network switching without calling \`__qdapp_getProvider\` again.
 
 **🚨 CHAIN ID COMPARISON (CRITICAL — prevents wrong-network false positive):**
 - ethers.js v6 returns \`network.chainId\` as a **BigInt** (e.g. \`11155111n\`).
@@ -260,6 +274,7 @@ const disconnectWallet = () => {
   setAccount(null);
   setProvider(null);
   setSigner(null);
+  rawProviderRef.current = null;
   // Clear saved wallet preference for wallet selection
   try { localStorage.removeItem('__qdapp_wallet_rdns'); } catch(e) {}
 };
@@ -268,17 +283,19 @@ The Disconnect button should be placed in the navbar/header, visible when connec
 When disconnected, the DApp should return to the initial "Connect Wallet" state.
 
 **Network Switch Pattern (mandatory — MUST be a visible button):**
+Use the stored \`rawProviderRef.current\` for network operations:
 \`\`\`javascript
 const switchNetwork = async (targetChainHex) => {
+  const rp = rawProviderRef.current;
+  if (!rp) return;
   try {
-    await window.ethereum.request({
+    await rp.request({
       method: 'wallet_switchEthereumChain',
       params: [{ chainId: targetChainHex }],
     });
   } catch (switchError) {
     if (switchError.code === 4902) {
-      // Chain not added — prompt to add it
-      await window.ethereum.request({ method: 'wallet_addEthereumChain', params: [...] });
+      await rp.request({ method: 'wallet_addEthereumChain', params: [...] });
     } else {
       throw switchError;
     }
@@ -295,7 +312,10 @@ Show a **"Switch to [Network Name]"** button when the user is on the wrong chain
 - **Read-Only:** For 'view'/'pure' functions, use \`new ethers.Contract(addr, abi, provider)\`.
 - **Write (Transaction):** For 'nonpayable'/'payable' functions, YOU MUST USE A SIGNER:
   \`\`\`javascript
-  const provider = new ethers.BrowserProvider(window.ethereum);
+  const rawProvider = window.__qdapp_getProvider
+    ? await window.__qdapp_getProvider()
+    : window.ethereum;
+  const provider = new ethers.BrowserProvider(rawProvider);
   const signer = await provider.getSigner();
   const contractWithSigner = new ethers.Contract(address, abi, signer);
   const tx = await contractWithSigner.functionName(args);

libs/remix-ui/quick-dapp-v2/src/lib/utils/wallet-selection-script.ts

@@ -3,10 +3,11 @@
  *
  * This script is injected into the <head> of the deployed HTML file and provides:
  *  1. EIP-6963 provider discovery
- *  2. A Proxy on window.ethereum that intercepts eth_requestAccounts
- *  3. A minimal wallet selection modal (inline HTML/CSS)
+ *  2. A wallet selection modal (inline HTML/CSS)
+ *  3. A global `window.__qdapp_getProvider()` function for DApp code to call
  *  4. localStorage-based auto-reconnect on page refresh
  *
+ * It does NOT override `window.ethereum` — avoids conflicts with MetaMask/Coinbase.
  * It is NOT injected in the IDE preview (VM Bridge or parent.ethereum are used there).
  */
 export function generateWalletSelectionScript(): string {
@@ -83,11 +84,11 @@ export function generateWalletSelectionScript(): string {
           return resolve(_providers[0].provider);
         }
 
-        // No providers? Fall back to legacy window.ethereum if captured
+        // No providers? Fall back to legacy window.ethereum
         if (_providers.length === 0) {
-          if (window.__qdapp_legacy_ethereum) {
+          if (window.ethereum) {
             _modalPromise = null;
-            return resolve(window.__qdapp_legacy_ethereum);
+            return resolve(window.ethereum);
           }
           _modalPromise = null;
           return reject(new Error('No Ethereum wallet detected. Please install a wallet extension.'));
@@ -178,119 +179,14 @@ export function generateWalletSelectionScript(): string {
     return div.innerHTML;
   }
 
-  // ── 4. Proxy window.ethereum ────────────────────────────────
-  // Capture any existing window.ethereum (e.g. from legacy injection)
-  if (window.ethereum) {
-    window.__qdapp_legacy_ethereum = window.ethereum;
-  }
-
-  var _resolved = false;
-  var _selectedProvider = null;
-  var _eventListeners = {};
-
-  function getProviderOrProxy() {
-    if (_resolved && _selectedProvider) return _selectedProvider;
-
-    return new Proxy({
-      isMetaMask: true,  // Some DApps check this
-      _isQuickDappProxy: true,
-
-      request: function(args) {
-        if (_resolved && _selectedProvider) {
-          return _selectedProvider.request(args);
-        }
-        return showWalletModal().then(function(provider) {
-          _selectedProvider = provider;
-          _resolved = true;
-          // Object.defineProperty getter will now return _selectedProvider
-          // Replay any buffered event listeners
-          Object.keys(_eventListeners).forEach(function(evt) {
-            _eventListeners[evt].forEach(function(cb) {
-              try { provider.on(evt, cb); } catch(e) {}
-            });
-          });
-          return provider.request(args);
-        });
-      },
-
-      on: function(event, cb) {
-        if (_resolved && _selectedProvider) {
-          return _selectedProvider.on(event, cb);
-        }
-        // Buffer listeners for later replay
-        if (!_eventListeners[event]) _eventListeners[event] = [];
-        _eventListeners[event].push(cb);
-        return this;
-      },
-
-      removeListener: function(event, cb) {
-        if (_resolved && _selectedProvider) {
-          return _selectedProvider.removeListener(event, cb);
-        }
-        if (_eventListeners[event]) {
-          _eventListeners[event] = _eventListeners[event].filter(function(l) { return l !== cb; });
-        }
-        return this;
-      },
-
-      removeAllListeners: function() {
-        if (_resolved && _selectedProvider) {
-          return _selectedProvider.removeAllListeners();
-        }
-        _eventListeners = {};
-        return this;
-      }
-    }, {
-      get: function(target, prop) {
-        // If we already resolved, delegate everything
-        if (_resolved && _selectedProvider) {
-          var val = _selectedProvider[prop];
-          if (typeof val === 'function') return val.bind(_selectedProvider);
-          return val;
-        }
-        // Return target's own methods
-        if (prop in target) {
-          var v = target[prop];
-          if (typeof v === 'function') return v.bind(target);
-          return v;
-        }
-        return undefined;
-      }
-    });
-  }
-
-  // Use Object.defineProperty to prevent wallet extensions from overwriting our Proxy.
-  // When MetaMask/Coinbase content scripts try to set window.ethereum, we capture
-  // their provider but keep our Proxy in control until the user selects a wallet.
-  var _proxyProvider = getProviderOrProxy();
-
-  try {
-    Object.defineProperty(window, 'ethereum', {
-      get: function() {
-        if (_resolved && _selectedProvider) return _selectedProvider;
-        return _proxyProvider;
-      },
-      set: function(val) {
-        if (val && !val._isQuickDappProxy) {
-          window.__qdapp_legacy_ethereum = val;
-        }
-        if (_resolved) {
-          _selectedProvider = val;
-        }
-      },
-      configurable: true,
-      enumerable: true
-    });
-  } catch (e) {
-    // MetaMask (Chrome) may define window.ethereum as non-configurable before us.
-    // Fall back to using the existing provider directly.
-    console.warn('[QuickDapp] Cannot override window.ethereum:', e.message);
-    if (window.ethereum) {
-      window.__qdapp_legacy_ethereum = window.ethereum;
-    }
-  }
+  // ── 4. Expose global provider getter ────────────────────────
+  // DApp code calls: window.__qdapp_getProvider()
+  // Returns a Promise<EIP1193Provider> — either auto-selected or user-picked.
+  window.__qdapp_getProvider = function() {
+    return showWalletModal();
+  };
 
-  console.log('[QuickDapp] Wallet selection script loaded. Detected', _providers.length, 'EIP-6963 providers.');
+  console.log('[QuickDapp] Wallet selection script loaded.');
 })();
 </script>`;
 }