What is RainbowKit?
RainbowKit is a React library that allows developers an easy way to connect crypto wallets to their sites. It is highly customizable and very intuitive.
Key features
-Abstraction
-Personalization
-Simple to use
Basic configuration and theming
Dependencies
Wagmi, for wagmi v2: TanStack Query
Viem
Config overview:
import '@rainbow-me/rainbowkit/styles.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider, http } from 'wagmi'
import { getDefaultConfig } from '@rainbow-me/rainbowkit'
import { mainnet } from 'wagmi/chains'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
const config = getDefaultConfig({
appName: 'RainbowKit demo',
projectId: 'YOUR_PROJECT_ID',
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
ssr: true, // If your dApp uses server side rendering (SSR)
})
const queryClient = new QueryClient()
const App = () => {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{/* Your App */}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
Customization
We can change the color and font style of the principal modal by adding a custom theme to the provider.
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider
theme={darkTheme({
accentColor: '#7b3fe4',
accentColorForeground: 'white',
borderRadius: 'small',
fontStack: 'system',
overlayBlur: 'small',
})}
{...etc}
>
{/* Your App */}
</RainbowKitProvider>
);
To change de modal size
export const App = () => (
<RainbowKitProvider modalSize="compact" {...etc}>
{/* Your App */}
</RainbowKitProvider>
);
Localization
export const App = () => (
<RainbowKitProvider locale="zh-CN" {...etc}>
{/* Your App */}
</RainbowKitProvider>
);
Using Next JS
// next.config.js
{
i18n: {
locales: ['default', 'en', 'zh-CN'],
defaultLocale: 'default',
},
}
import { RainbowKitProvider, Locale } from '@rainbow-me/rainbowkit';
export const App = () => {
const { locale } = useRouter() as { locale: Locale };
return (
<RainbowKitProvider locale={locale} {...etc}>
{/* Your App */}
</RainbowKitProvider>
)
};
Modal hooks
import {
useConnectModal,
useAccountModal,
useChainModal,
} from '@rainbow-me/rainbowkit';
export const YourApp = () => {
const { openConnectModal } = useConnectModal();
const { openAccountModal } = useAccountModal();
const { openChainModal } = useChainModal();
return (
<>
{openConnectModal && (
<button onClick={openConnectModal} type="button">
Open Connect Modal
</button>
)}
{openAccountModal && (
<button onClick={openAccountModal} type="button">
Open Account Modal
</button>
)}
{openChainModal && (
<button onClick={openChainModal} type="button">
Open Chain Modal
</button>
)}
</>
);
};
Customization of the Connect Button
import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => { return (
<ConnectButton.Custom>
{({
account,
chain,
openAccountModal,
openChainModal,
openConnectModal,
authenticationStatus, mounted,
}) => {
// Note: If your app doesn't use authentication, you
// can remove all 'authenticationStatus' checks
const ready = mounted && authenticationStatus !== 'loading';
const connected =
ready &&
account &&
chain &&
(!authenticationStatus ||
authenticationStatus === 'authenticated'); return (
<div
{...(!ready && {
'aria-hidden': true,
'style': {
opacity: 0,
pointerEvents: 'none',
userSelect: 'none',
},
})}
>
{(() => {
if (!connected) {
return (
<button onClick={openConnectModal} type="button">
Connect Wallet
</button>
);
}
if (chain.unsupported) { return (
<button onClick={openChainModal} type="button">
Wrong network
</button>
);
}
return (
<div style={{ display: 'flex', gap: 12 }}>
<button
onClick={openChainModal}
style={{ display: 'flex', alignItems: 'center' }}
type="button"
>
{chain.hasIcon && (
<div
style={{
background: chain.iconBackground,
width: 12,
height: 12,
borderRadius: 999,
overflow: 'hidden',
marginRight: 4,
}}
>
{chain.iconUrl && (
<img
alt={chain.name ?? 'Chain icon'}
src={chain.iconUrl}
style={{ width: 12, height: 12 }}
/>
)}
</div>
)}
{chain.name}
</button>
<button onClick={openAccountModal} type="button">
{account.displayName}
{account.displayBalance ? ` (${account.displayBalance})`
: ''}
</button>
</div>
);
})()}
</div>
);
}}
</ConnectButton.Custom>
);
};
Adding a custom Chain
import {
RainbowKitProvider,
getDefaultConfig,
Chain,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
QueryClientProvider,
QueryClient,
} from "@tanstack/react-query";
const avalanche = {
id: 43_114,
name: 'Avalanche',
iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
iconBackground: '#fff',
nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
rpcUrls: {
default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
},
blockExplorers: {
default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
},
contracts: {
multicall3: {
address: '0xca11bde05977b3631167028862be2a173976ca11',
blockCreated: 11_907_934,
},
},
} as const satisfies Chain;
const config = getDefaultConfig({
appName: 'My RainbowKit App',
projectId: 'YOUR_PROJECT_ID',
chains: [avalanche],
});
const queryClient = new QueryClient();
const App = () => {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{/* Your App */}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
};
The abstraction provided by the library is very useful, so you only need to know the basics. You can have a Web3 wallet management system up and running in just a few minutes.
Fuente: https://www.rainbowkit.com/docs/introduction
- August 15, 2024
Tags
Get tech
insights in
your inbox
insights in
your inbox
