Connectors
RainbowKit
Connectors
RainbowKit
Code Sample
In addition to providing deeper integrations via our JS SDK and APIs, Bitski also offers a set of plug-and-play connectors which work with the existing Web3 ecosystem.
Use the following code snippets below to easily add Bitski to your RainbowKit setup.
These code snippets provide a Bitski connector which can hook into our browser extension if installed. As a fallback, users can also login or sign up for a Bitksi Wallet using username and password. This gives Dapps the ability to not only provide a native Web3 solution for crypto natives, but also provide an intuitive onboarding process for new users.
Required dependencies: @rainbow-me/rainbowkit, bitski, wagmi.
See the CodeSandbox’s package.json for more details.
import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import type { AppProps } from 'next/app';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { arbitrum, goerli, mainnet, optimism, polygon } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import {
injectedWallet,
walletConnectWallet,
rainbowWallet,
metaMaskWallet,
coinbaseWallet
} from '@rainbow-me/rainbowkit/wallets';
import { Bitski } from 'bitski';
import { bitskiWallet } from './bitskiWallet';
const { chains, provider, webSocketProvider } = configureChains(
[
mainnet,
polygon,
optimism,
arbitrum,
],
[publicProvider()]
);
/*
* Replace the clientId and callbackUrl with your own.
* You can get a clientId and setup your callback url at https://developer.bitski.com.
*/
const bitski = new Bitski(
'your-client-id'
'https://your-callback-url.com/callback'
);
const connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [
bitskiWallet({ bitski, chains }),
],
},
{
groupName: 'Other Wallets',
wallets: [
injectedWallet({ chains }),
walletConnectWallet({ chains, projectId: 'YOUR_PROJECT_ID' }),
metaMaskWallet({ chains }),
coinbaseWallet({ appName: 'YOUR_APP_NAME', chains }),
rainbowWallet({ chains }),
],
},
])
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
});
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</WagmiConfig>
);
}
export default MyApp;