|
| 1 | +--- |
| 2 | +description: Quickstart guide for using the MetaMask SDK with a JavaScript and RainbowKit dapp. |
| 3 | +toc_max_heading_level: 2 |
| 4 | +sidebar_label: JavaScript + RainbowKit |
| 5 | +keywords: [connect, MetaMask, JavaScript, RainbowKit, SDK, dapp, Wallet SDK] |
| 6 | +--- |
| 7 | + |
| 8 | +# Connect to MetaMask using JavaScript + RainbowKit |
| 9 | + |
| 10 | +Get started with MetaMask SDK in a JavaScript and RainbowKit dapp. |
| 11 | +You can [download the quickstart template](#set-up-using-a-template) or [manually set up the SDK](#set-up-manually) in an existing dapp. |
| 12 | + |
| 13 | +<p align="center"> |
| 14 | + <a href="https://metamask-rainbowkit-demo.vercel.app/" target="_blank"> |
| 15 | + <img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="600px" /> |
| 16 | + </a> |
| 17 | +</p> |
| 18 | + |
| 19 | +## Prerequisites |
| 20 | + |
| 21 | +- [Node.js](https://nodejs.org/) version 19 or later installed. |
| 22 | +- A package manager installed, such as [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/installation), or [bun](https://bun.sh/). |
| 23 | +- [MetaMask](https://metamask.io/) installed in your browser or on mobile. |
| 24 | +- A WalletConnect project ID from the [Reown dashboard](https://dashboard.reown.com/sign-in). |
| 25 | + |
| 26 | +## Set up using a template |
| 27 | + |
| 28 | +1. Download the [MetaMask SDK RainbowKit template](https://github.com/MetaMask/metamask-sdk-examples/tree/main/quickstarts/rainbowkit): |
| 29 | + |
| 30 | + ```bash |
| 31 | + npx degit MetaMask/metamask-sdk-examples/quickstarts/rainbowkit metamask-rainbowkit |
| 32 | + ``` |
| 33 | + |
| 34 | +2. Navigate into the repository: |
| 35 | + |
| 36 | + ```bash |
| 37 | + cd metamask-rainbowkit |
| 38 | + ``` |
| 39 | + |
| 40 | + <details> |
| 41 | + <summary>Degit vs. Git clone</summary> |
| 42 | + <div> |
| 43 | + |
| 44 | + `degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository. |
| 45 | + |
| 46 | + Alternatively, you can use `git clone`, which will download the entire repository. |
| 47 | + To do so, clone the MetaMask SDK examples repository and navigate into the `quickstarts/rainbowkit` directory: |
| 48 | + |
| 49 | + ```bash |
| 50 | + git clone https://github.com/MetaMask/metamask-sdk-examples |
| 51 | + cd metamask-sdk-examples/quickstarts/rainbowkit |
| 52 | + ``` |
| 53 | + |
| 54 | + </div> |
| 55 | + </details> |
| 56 | + |
| 57 | +3. Install dependencies: |
| 58 | + |
| 59 | + ```bash |
| 60 | + pnpm install |
| 61 | + ``` |
| 62 | + |
| 63 | +4. Create a `.env.local` file: |
| 64 | + |
| 65 | + ```bash |
| 66 | + touch .env.local |
| 67 | + ``` |
| 68 | + |
| 69 | +5. In `.env.local`, add a `VITE_WALLETCONNECT_PROJECT_ID` environment variable, replacing `<YOUR-PROJECT-ID>` with your WalletConnect project ID: |
| 70 | + |
| 71 | + ```text title=".env.local" |
| 72 | + VITE_WALLETCONNECT_PROJECT_ID=<YOUR-PROJECT-ID> |
| 73 | + ``` |
| 74 | + |
| 75 | +6. Run the project: |
| 76 | + |
| 77 | + ```bash |
| 78 | + pnpm dev |
| 79 | + ``` |
| 80 | + |
| 81 | +## Set up manually |
| 82 | + |
| 83 | +### 1. Install the SDK |
| 84 | + |
| 85 | +Install MetaMask SDK along with its peer dependencies to an existing React project: |
| 86 | + |
| 87 | +```bash npm2yarn |
| 88 | +npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query |
| 89 | +``` |
| 90 | + |
| 91 | +### 2. Import required dependencies |
| 92 | + |
| 93 | +In the root of your project, import the required RainbowKit, Wagmi, and TanStack Query dependencies: |
| 94 | + |
| 95 | +```jsx |
| 96 | +import "@rainbow-me/rainbowkit/styles.css" |
| 97 | +import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit" |
| 98 | +import { WagmiProvider } from "wagmi" |
| 99 | +import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets" |
| 100 | +import { mainnet, linea, sepolia, lineaSepolia } from "wagmi/chains" |
| 101 | +import { QueryClientProvider, QueryClient } from "@tanstack/react-query" |
| 102 | +``` |
| 103 | + |
| 104 | +### 3. Configure your project |
| 105 | + |
| 106 | +Set up your configuration with the desired chains and wallets. |
| 107 | +In the following example, replace `<YOUR-PROJECT-ID>` with your WalletConnect project ID: |
| 108 | + |
| 109 | +```jsx |
| 110 | +const config = getDefaultConfig({ |
| 111 | + appName: "MetaMask SDK RainbowKit Quickstart", |
| 112 | + projectId: "<YOUR-PROJECT-ID>", |
| 113 | + chains: [mainnet, linea, sepolia, lineaSepolia], |
| 114 | + wallets: [ |
| 115 | + { |
| 116 | + groupName: "Preferred", |
| 117 | + wallets: [metaMaskWallet], |
| 118 | + }, |
| 119 | + ], |
| 120 | + ssr: false, // true if your dapp uses server-side rendering. |
| 121 | +}) |
| 122 | +``` |
| 123 | + |
| 124 | +### 4. Set up providers |
| 125 | + |
| 126 | +Wrap your application with the `RainbowKitProvider`, `WagmiProvider`, and `QueryClientProvider` providers: |
| 127 | + |
| 128 | +```jsx |
| 129 | +const queryClient = new QueryClient() |
| 130 | + |
| 131 | +const App = () => { |
| 132 | + return ( |
| 133 | + <WagmiProvider config={config}> |
| 134 | + <QueryClientProvider client={queryClient}> |
| 135 | + <RainbowKitProvider> |
| 136 | + <App /> |
| 137 | + </RainbowKitProvider> |
| 138 | + </QueryClientProvider> |
| 139 | + </WagmiProvider> |
| 140 | + ) |
| 141 | +} |
| 142 | +``` |
| 143 | + |
| 144 | +### 5. Add the connect button |
| 145 | + |
| 146 | +Import and render the `ConnectButton` component: |
| 147 | + |
| 148 | +```jsx |
| 149 | +import { ConnectButton } from "@rainbow-me/rainbowkit" |
| 150 | + |
| 151 | +function App() { |
| 152 | + return <ConnectButton /> |
| 153 | +} |
| 154 | + |
| 155 | +export default App |
| 156 | +``` |
| 157 | + |
| 158 | +You can now test your dapp by running `pnpm run dev`. |
| 159 | + |
| 160 | +## Live example |
| 161 | + |
| 162 | +<iframe className="mt-6" width="100%" height="600px" frameBorder="0" src="https://stackblitz.com/github/MetaMask/metamask-sdk-examples/tree/main/quickstarts/rainbowkit?ctl=1&embed=1&file=src%2Fmain.tsx&hideNavigation=1"></iframe> |
0 commit comments