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.)


_50
import * as fcl from '@onflow/fcl'
_50
import { createFclConnector, flowWallet, useIsCadenceWalletConnected } from '@onflow/fcl-rainbowkit-adapter'
_50
import { connectorsForWallets } from '@rainbow-me/rainbowkit'
_50
import { flowTestnet } from 'wagmi/chains'
_50
import { createConfig, http } from 'wagmi'
_50
_50
// Configure FCL (Flow testnet in this example)
_50
fcl.config({
_50
"accessNode.api": "https://rest-testnet.onflow.org",
_50
"discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn",
_50
"walletconnect.projectId": "9b70cfa398b2355a5eb9b1cf99f4a981", // example WC projectId
_50
})
_50
_50
// Create a list of connectors from your wallets
_50
const connectors = connectorsForWallets([
_50
{
_50
groupName: "Recommended",
_50
wallets: [
_50
flowWallet(),
_50
],
_50
},
_50
], {
_50
appName: 'RainbowKit demo',
_50
projectId: '9b70cfa398b2355a5eb9b1cf99f4a981',
_50
})
_50
_50
// Wagmi config
_50
export const config = createConfig({
_50
chains: [flowTestnet],
_50
connectors,
_50
ssr: true,
_50
transports: {
_50
[flowTestnet.id]: http(),
_50
}
_50
});
_50
_50
// In your React component
_50
function MyApp() {
_50
const isCadenceConnected = useIsCadenceWalletConnected(config)
_50
_50
return (
_50
<div>
_50
{isCadenceConnected ? (
_50
<p>Cadence wallet is connected!</p>
_50
) : (
_50
<p>Please connect your Cadence wallet</p>
_50
)}
_50
</div>
_50
)
_50
}

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.

useIsCadenceWalletConnected(config: Config): boolean​

A React hook that monitors the connection status of both FCL (Cadence) and Wagmi accounts to determine whether a Cadence-aware wallet is connected.

  • Parameters
    • config: Config – The Wagmi configuration object
  • Returns: boolean – true when both Cadence-aware wallet is connected, false if no wallet, or an EVM-only wallet is connected.
Rate this page