Skip to main content
info

This package is currently in alpha and is subject to change.

FCL RainbowKit Adapter

Offers a RainbowKit-compatible wallet definition that uses Flow’s COA via FCL. Once installed, RainbowKit can display a “Flow Wallet” (or other FCL-enabled wallets) in its wallet selection modal.

Installation​


_10
npm install @onflow/fcl-rainbowkit-adapter

Usage​

Below is a typical usage example that shows how to set up a RainbowKit config for the Flow testnet, using this adapter. (From your provided sample.)


_35
import * as fcl from '@onflow/fcl'
_35
import { createFclConnector, flowWallet } from '@onflow/fcl-rainbowkit-adapter'
_35
import { connectorsForWallets } from '@rainbow-me/rainbowkit'
_35
import { flowTestnet } from 'wagmi/chains'
_35
import { createConfig, http } from 'wagmi'
_35
_35
// Configure FCL (Flow testnet in this example)
_35
fcl.config({
_35
"accessNode.api": "https://rest-testnet.onflow.org",
_35
"discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn",
_35
"walletconnect.projectId": "9b70cfa398b2355a5eb9b1cf99f4a981", // example WC projectId
_35
})
_35
_35
// Create a list of connectors from your wallets
_35
const connectors = connectorsForWallets([
_35
{
_35
groupName: "Recommended",
_35
wallets: [
_35
flowWallet(),
_35
],
_35
},
_35
], {
_35
appName: 'RainbowKit demo',
_35
projectId: '9b70cfa398b2355a5eb9b1cf99f4a981',
_35
})
_35
_35
// Wagmi config
_35
export const config = createConfig({
_35
chains: [flowTestnet],
_35
connectors,
_35
ssr: true,
_35
transports: {
_35
[flowTestnet.id]: http(),
_35
}
_35
});

API​

flowWallet(options?: FlowWalletOptions): RainbowKitWallet​

  • Returns a RainbowKit-compatible wallet definition that integrates @onflow/fcl-ethereum-provider.
  • Parameters
    • options?: FlowWalletOptions – optional configuration, such as names/icons or custom gateway endpoints.
  • Returns: A RainbowKitWallet object to be included in connectorsForWallets.

createFclConnector(config?: CreateFclConnectorOptions): Connector​

  • A lower-level helper to build your own FCL-based EIP-1193 connectors for RainbowKit if you don’t want the preconfigured flowWallet.
  • Parameters
    • config?: CreateFclConnectorOptions – typical Wagmi + FCL config object (i.e., chain ID, network URL, FCL services, etc.).
  • Returns: A valid Wagmi Connector for EVM interactions via FCL.
Rate this page