feat: add Brave Wallet (#448)

.changeset/honest-numbers-push.md

@@ -0,0 +1,7 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Ensure Brave Wallet and Tokenary aren’t detected as MetaMask
+
+Both Brave Wallet and Tokenary set `window.ethereum.isMetaMask` to `true` which causes issues with the logic for providing the fallback "Injected Wallet" option. Similar to wagmi, we now detect when MetaMask is being impersonated by these wallets.

.changeset/shiny-squids-sniff.md

@@ -0,0 +1,9 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Add Brave Wallet support
+
+Brave Wallet is now included as part of the default set of wallets returned from `getDefaultWallets`, but note that is only visible within the Brave browser to avoid prompting users to download an entirely different web browser.
+
+Brave Wallet is also included as part of the `wallet` object to support its usage in [custom wallet lists,](https://www.rainbowkit.com/docs/custom-wallet-list) e.g. `wallet.brave({ chains, shimDisconnect: true })`.

packages/rainbowkit/src/wallets/getDefaultWallets.ts

@@ -1,9 +1,10 @@
 import { Chain } from '../components/RainbowKitProvider/RainbowKitChainContext';
 import { WalletList } from './Wallet';
 import { connectorsForWallets } from './connectorsForWallets';
+import { brave } from './walletConnectors/brave/brave';
 import { coinbase } from './walletConnectors/coinbase/coinbase';
 import { injected } from './walletConnectors/injected/injected';
-import { metaMask } from './walletConnectors/metaMask/metaMask';
+import { isMetaMask, metaMask } from './walletConnectors/metaMask/metaMask';
 import { rainbow } from './walletConnectors/rainbow/rainbow';
 import { walletConnect } from './walletConnectors/walletConnect/walletConnect';
 
@@ -20,23 +21,22 @@ export const getDefaultWallets = ({
   const needsInjectedWalletFallback =
     typeof window !== 'undefined' &&
     window.ethereum &&
-    !window.ethereum.isMetaMask &&
-    !window.ethereum.isCoinbaseWallet;
+    !isMetaMask(window.ethereum) &&
+    !window.ethereum.isCoinbaseWallet &&
+    !window.ethereum.isBraveWallet;
 
   const wallets: WalletList = [
     {
       groupName: 'Popular',
       wallets: [
         rainbow({ chains }),
         coinbase({ appName, chains }),
-        metaMask({
-          chains,
-          shimDisconnect: true,
-        }),
+        metaMask({ chains, shimDisconnect: true }),
+        walletConnect({ chains }),
+        brave({ chains, shimDisconnect: true }),
         ...(needsInjectedWalletFallback
           ? [injected({ chains, shimDisconnect: true })]
           : []),
-        walletConnect({ chains }),
       ],
     },
   ];

packages/rainbowkit/src/wallets/walletConnectors/brave/brave.ts

@@ -0,0 +1,30 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { Wallet } from '../../Wallet';
+
+export interface BraveOptions {
+  chains: Chain[];
+  shimDisconnect?: boolean;
+}
+
+export const brave = ({ chains, shimDisconnect }: BraveOptions): Wallet => ({
+  id: 'brave',
+  name: 'Brave Wallet',
+  iconUrl: async () => (await import('./brave.svg')).default,
+  iconBackground: '#fff',
+  installed:
+    typeof window !== 'undefined' && window.ethereum?.isBraveWallet === true,
+  downloadUrls: {
+    // We're opting not to provide a download prompt if Brave isn't the current
+    // browser since it's unlikely to be a desired behavior for users. It's
+    // more of a convenience for users who are already using Brave rather than
+    // an explicit wallet choice for users coming from other browsers.
+  },
+  createConnector: () => ({
+    connector: new InjectedConnector({
+      chains,
+      options: { shimDisconnect },
+    }),
+  }),
+});

packages/rainbowkit/src/wallets/walletConnectors/index.ts

@@ -1,4 +1,5 @@
 import { argent } from './argent/argent';
+import { brave } from './brave/brave';
 import { coinbase } from './coinbase/coinbase';
 import { imToken } from './imToken/imToken';
 import { injected } from './injected/injected';
@@ -11,6 +12,7 @@ import { walletConnect } from './walletConnect/walletConnect';
 
 export const wallet = {
   argent,
+  brave,
   coinbase,
   imToken,
   injected,

packages/rainbowkit/src/wallets/walletConnectors/metaMask/metaMask.ts

@@ -11,12 +11,36 @@ export interface MetaMaskOptions {
   shimDisconnect?: boolean;
 }
 
+export function isMetaMask(ethereum: NonNullable<typeof window['ethereum']>) {
+  // Logic borrowed from wagmi's MetaMaskConnector
+  // https://github.com/tmm/wagmi/blob/main/packages/core/src/connectors/metaMask.ts
+  const isMetaMask = Boolean(ethereum.isMetaMask);
+
+  if (!isMetaMask) {
+    return false;
+  }
+
+  // Brave tries to make itself look like MetaMask
+  // Could also try RPC `web3_clientVersion` if following is unreliable
+  if (ethereum.isBraveWallet && !ethereum._events && !ethereum._state) {
+    return false;
+  }
+
+  if (ethereum.isTokenary) {
+    return false;
+  }
+
+  return true;
+}
+
 export const metaMask = ({
   chains,
   shimDisconnect,
 }: MetaMaskOptions): Wallet => {
   const isMetaMaskInjected =
-    typeof window !== 'undefined' && window.ethereum?.isMetaMask;
+    typeof window !== 'undefined' &&
+    typeof window.ethereum !== 'undefined' &&
+    isMetaMask(window.ethereum);
 
   const shouldUseWalletConnect = isMobile() && !isMetaMaskInjected;
 

site/data/docs/custom-wallet-list.mdx

@@ -72,6 +72,17 @@ wallet.argent(options: {
 });
 ```
 
+#### Brave Wallet
+
+```tsx
+import { wallet } from '@rainbow-me/rainbowkit';
+
+wallet.brave(options: {
+  chains: Chain[];
+  shimDisconnect?: boolean;
+});
+```
+
 #### Coinbase Wallet
 
 ```tsx