feat: prioritize MetaMask over Brave Wallet

src/__tests__/ethereum-conflicts.test.tsx

@@ -28,9 +28,15 @@ describe("`window.ethereum` conflict tests", () => {
       const metaMaskTestingUtils = generateTestingUtils({
         providerType: "MetaMask",
       });
+      const braveWalletTestingUtils = generateTestingUtils({
+        providerType: "MetaMask",
+      });
+      const braveWalletProvider = braveWalletTestingUtils.getProvider();
+      (braveWalletProvider as any).isBraveWallet = true;
+
       const metaMaskProvider = metaMaskTestingUtils.getProvider();
       const ethereum = {
-        providers: [coinbaseProvider, metaMaskProvider],
+        providers: [coinbaseProvider, braveWalletProvider, metaMaskProvider],
       };
       (window as any).ethereum = ethereum;
 
@@ -48,6 +54,35 @@ describe("`window.ethereum` conflict tests", () => {
 
       (window as any).ethereum = originalEth;
     });
+
+    test("when the `providers` does have a valid Brave Wallet provider, it should synchronise in `notConnected` status", async () => {
+      let originalEth = (window as any).ethereum;
+      const testingUtils = generateTestingUtils();
+      const coinbaseProvider = testingUtils.getProvider();
+      const braveWalletTestingUtils = generateTestingUtils({
+        providerType: "MetaMask",
+      });
+      const braveWalletProvider = braveWalletTestingUtils.getProvider();
+      (braveWalletProvider as any).isBraveWallet = true;
+      const ethereum = {
+        providers: [coinbaseProvider, braveWalletProvider],
+      };
+      (window as any).ethereum = ethereum;
+
+      braveWalletTestingUtils.mockNotConnectedWallet();
+
+      const { result, waitForNextUpdate } = renderHook(useMetaMask, {
+        wrapper: MetaMaskProvider,
+      });
+
+      expect(result.current.status).toEqual("initializing");
+
+      await waitForNextUpdate();
+
+      expect(result.current.status).toEqual("notConnected");
+
+      (window as any).ethereum = originalEth;
+    });
   });
 
   test("when the `MetaMask` provider is corrupted or removed in the meantime, it should throw", async () => {

src/metamask-provider.tsx

@@ -21,13 +21,22 @@ type WindowInstanceWithEthereum = Window &
 function getMetaMaskProvider() {
   const ethereum = (window as WindowInstanceWithEthereum).ethereum;
   if (!ethereum) return null;
-  // The `providers` field is populated when CoinBase Wallet extension is also installed
+  // The `providers` field is populated
+  // - when CoinBase Wallet extension is also installed
+  // - when user is on Brave and Brave Wallet is not deactivated
   // The expected object is an array of providers, the MetaMask provider is inside
   // See https://docs.cloud.coinbase.com/wallet-sdk/docs/injected-provider-guidance for more information
+  // See also https://metamask.zendesk.com/hc/en-us/articles/360038596792-Using-Metamask-wallet-in-Brave-browser
   if (Array.isArray(ethereum.providers)) {
-    const metaMaskProvider = ethereum.providers.find((p: any) => p.isMetaMask);
-    if (!metaMaskProvider) return null;
-    return metaMaskProvider;
+    const metaMaskProvider = ethereum.providers.find(
+      (p: any) => p.isMetaMask && !p.isBraveWallet
+    );
+    if (metaMaskProvider) return metaMaskProvider;
+    const braveWalletProvider = ethereum.providers.find(
+      (p: any) => p.isMetaMask && p.isBraveWallet
+    );
+    if (!braveWalletProvider) return null;
+    return braveWalletProvider;
   }
   if (!ethereum.isMetaMask) return null;
   return ethereum;