0
# Configuration
1

2
Setup and configuration functions for integrating RainbowKit with wagmi and custom wallet selections.
3

4
## Capabilities
5

6
### getDefaultConfig
7

8
Creates a default wagmi configuration optimized for RainbowKit with sensible defaults.
9

10
```typescript { .api }
11
/**
12
 * Creates a default wagmi configuration optimized for RainbowKit
13
 * @param parameters - Configuration parameters
14
 * @returns Configured wagmi Config object
15
 */
16
function getDefaultConfig<T extends readonly [Chain, ...Chain[]]>(
17
  parameters: GetDefaultConfigParameters<T>
18
): Config;
19

20
interface GetDefaultConfigParameters<T extends readonly [Chain, ...Chain[]]> {
21
  /** Application name shown in wallet connection prompts */
22
  appName: string;
23
  /** WalletConnect project ID from https://cloud.walletconnect.com */
24
  projectId: string;
25
  /** Array of blockchain networks to support */
26
  chains: T;
27
  /** Application description for wallet connection */
28
  appDescription?: string;
29
  /** Application URL for wallet connection */
30
  appUrl?: string;
31
  /** Application icon URL for wallet connection */
32
  appIcon?: string;
33
  /** Custom wallet list (uses default wallets if not provided) */
34
  wallets?: WalletList;
35
  /** Enable server-side rendering support */
36
  ssr?: boolean;
37
}
38
```
39

40
**Usage Examples:**
41

42
```typescript
43
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
44
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
45

46
// Basic configuration
47
const config = getDefaultConfig({
48
  appName: 'My DApp',
49
  projectId: 'YOUR_PROJECT_ID',
50
  chains: [mainnet, polygon, optimism, arbitrum],
51
});
52

53
// Full configuration
54
const advancedConfig = getDefaultConfig({
55
  appName: 'Advanced DApp',
56
  appDescription: 'The best DApp for advanced users',
57
  appUrl: 'https://mydapp.com',
58
  appIcon: 'https://mydapp.com/icon.png',
59
  projectId: 'YOUR_PROJECT_ID',
60
  chains: [mainnet, polygon, optimism, arbitrum],
61
  ssr: true,
62
});
63
```
64

65
### connectorsForWallets
66

67
Creates wallet connectors from a custom wallet list configuration.
68

69
```typescript { .api }
70
/**
71
 * Creates wallet connectors from a custom wallet list
72
 * @param walletList - Array of wallet groups to include
73
 * @param parameters - Connector configuration parameters
74
 * @returns Array of wagmi connector functions
75
 */
76
function connectorsForWallets(
77
  walletList: WalletList,
78
  parameters: ConnectorsForWalletsParameters
79
): CreateConnectorFn[];
80

81
interface ConnectorsForWalletsParameters {
82
  /** WalletConnect project ID from https://cloud.walletconnect.com */
83
  projectId: string;
84
  /** Application name shown in wallet connection prompts */
85
  appName: string;
86
  /** Application description for wallet connection */
87
  appDescription?: string;
88
  /** Application URL for wallet connection */
89
  appUrl?: string;
90
  /** Application icon URL for wallet connection */
91
  appIcon?: string;
92
  /** Additional WalletConnect parameters */
93
  walletConnectParameters?: RainbowKitWalletConnectParameters;
94
}
95

96
type WalletList = {
97
  groupName: string;
98
  wallets: CreateWalletFn[];
99
}[];
100

101
type CreateWalletFn = (options?: WalletOptions) => Wallet;
102
```
103

104
**Usage Examples:**
105

106
```typescript
107
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
108
import { metaMaskWallet, coinbaseWallet, rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
109

110
// Custom wallet configuration
111
const connectors = connectorsForWallets(
112
  [
113
    {
114
      groupName: 'Popular',
115
      wallets: [metaMaskWallet, coinbaseWallet, rainbowWallet],
116
    },
117
  ],
118
  {
119
    appName: 'My DApp',
120
    projectId: 'YOUR_PROJECT_ID',
121
  }
122
);
123

124
// Use with wagmi createConfig
125
import { createConfig, http } from 'wagmi';
126
import { mainnet, polygon } from 'wagmi/chains';
127

128
const config = createConfig({
129
  connectors,
130
  chains: [mainnet, polygon],
131
  transports: {
132
    [mainnet.id]: http(),
133
    [polygon.id]: http(),
134
  },
135
});
136
```
137

138
### getDefaultWallets
139

140
Returns the default wallet configuration used by RainbowKit.
141

142
```typescript { .api }
143
/**
144
 * Returns default wallet configuration (overloaded function)
145
 */
146
function getDefaultWallets(): { wallets: WalletList };
147
function getDefaultWallets(parameters: ConnectorsForWalletsParameters): {
148
  connectors: CreateConnectorFn[];
149
  wallets: WalletList;
150
};
151
```
152

153
**Usage Examples:**
154

155
```typescript
156
import { getDefaultWallets } from '@rainbow-me/rainbowkit';
157

158
// Get default wallet list only
159
const { wallets } = getDefaultWallets();
160

161
// Get default wallets with connectors
162
const { connectors, wallets } = getDefaultWallets({
163
  appName: 'My DApp',
164
  projectId: 'YOUR_PROJECT_ID',
165
});
166
```
167

168
### getWalletConnectConnector
169

170
Creates a WalletConnect connector for integrating with WalletConnect protocol.
171

172
```typescript { .api }
173
/**
174
 * Creates a WalletConnect connector
175
 * @param parameters - WalletConnect configuration parameters
176
 * @returns WalletConnect connector function
177
 */
178
function getWalletConnectConnector(
179
  parameters: WalletConnectConnectorParameters
180
): CreateConnectorFn;
181

182
interface WalletConnectConnectorParameters {
183
  /** WalletConnect project ID */
184
  projectId: string;
185
  /** Application metadata */
186
  metadata?: {
187
    name: string;
188
    description: string;
189
    url: string;
190
    icons: string[];
191
  };
192
  /** Whether to show QR modal (default: false for RainbowKit) */
193
  showQrModal?: boolean;
194
  /** Additional WalletConnect parameters */
195
  qrModalOptions?: {
196
    themeMode?: 'light' | 'dark';
197
    themeVariables?: Record<string, string>;
198
  };
199
}
200
```
201

202
**Usage Examples:**
203

204
```typescript
205
import { getWalletConnectConnector } from '@rainbow-me/rainbowkit';
206

207
const walletConnectConnector = getWalletConnectConnector({
208
  projectId: 'YOUR_PROJECT_ID',
209
  metadata: {
210
    name: 'My DApp',
211
    description: 'My DApp description',
212
    url: 'https://mydapp.com',
213
    icons: ['https://mydapp.com/icon.png'],
214
  },
215
});
216
```
217

218
## Advanced Configuration Patterns
219

220
### Custom Wallet Groups
221

222
```typescript
223
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
224
import {
225
  metaMaskWallet,
226
  coinbaseWallet,
227
  ledgerWallet,
228
  trustWallet,
229
  argentWallet,
230
} from '@rainbow-me/rainbowkit/wallets';
231

232
const connectors = connectorsForWallets(
233
  [
234
    {
235
      groupName: 'Popular',
236
      wallets: [metaMaskWallet, coinbaseWallet],
237
    },
238
    {
239
      groupName: 'Hardware',
240
      wallets: [ledgerWallet],
241
    },
242
    {
243
      groupName: 'Mobile',
244
      wallets: [trustWallet, argentWallet],
245
    },
246
  ],
247
  {
248
    appName: 'My DApp',
249
    projectId: 'YOUR_PROJECT_ID',
250
  }
251
);
252
```
253

254
### Environment-Specific Configuration
255

256
```typescript
257
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
258
import { mainnet, sepolia, polygon, polygonMumbai } from 'wagmi/chains';
259

260
const config = getDefaultConfig({
261
  appName: 'My DApp',
262
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
263
  chains: process.env.NODE_ENV === 'production' 
264
    ? [mainnet, polygon] 
265
    : [sepolia, polygonMumbai],
266
  appDescription: 'My DApp for Web3',
267
  appUrl: process.env.NODE_ENV === 'production' 
268
    ? 'https://mydapp.com' 
269
    : 'http://localhost:3000',
270
  ssr: true, // Enable for Next.js SSR
271
});
272
```