The Multichain Connect React library is a versatile TypeScript library that simplifies wallet integration for decentralized applications (dApps) by providing a unified interface for connecting to different wallets across multiple blockchains. It includes a React interface for seamless integration with React-based projects. The library allows developers to easily add new wallet adapters and supports customizable chain configurations. Once production ready, the library will consider porting over to the following Wallet Standard React interface.
The library offers a multi-chain wallet adapter that serves as a bridge between dApps and various wallet providers. It provides a standardized API for wallet interactions, enabling users to connect their preferred wallet across different blockchains seamlessly.
Includes a pre-built React interface that simplifies the integration of wallet functionality into React applications. This interface offers intuitive components and hooks that developers can leverage to handle wallet interactions and user authentication with ease.
Developers can specify the chains they want to support within their application. Multichain Connect React allows for easy configuration of supported chains, such as EVM supported chains, Solana, etc. This flexibility enables dApps to cater to specific blockchain ecosystems while maintaining a consistent user experience.
The library is designed with extensibility in mind. It provides a straightforward mechanism for adding additional wallet adapters, allowing developers to expand the range of supported wallets easily. By following the provided adapter interface and guidelines, new wallet integrations can be seamlessly incorporated into the existing framework. This also gives the user flexibility in which wallet adapters they choose to use.
To use the MultiChain Wallet Connect React components, follow these steps:
-
Install the package using npm:
npm install @civic/multichain-connect-react-core @civic/multichain-connect-react-solana-wallet-adapter @civic/multichain-connect-react-rainbowkit-wallet-adapter wagmi/providers/public @solana/web3.js
or using Yarn:
yarn add @civic/multichain-connect-react-core @civic/multichain-connect-react-solana-wallet-adapter @civic/multichain-connect-react-rainbowkit-wallet-adapter wagmi/providers/public @solana/web3.js
-
Import the necessary components and dependencies into your code:
import { MultichainWalletProvider, MultichainConnectButton, } from "@civic/multichain-connect-react-core"; import { Chain as SolanaChain, SolanaWalletAdapterConfig, } from "@civic/multichain-connect-react-solana-wallet-adapter"; import { Chain as EthereumChain, RainbowkitConfig, } from "@civic/multichain-connect-react-rainbowkit-wallet-adapter"; import { publicProvider } from "wagmi/providers/public"; import { Connection } from "@solana/web3.js"; import { mainnet, goerli, polygon, arbitrum, arbitrumGoerli, polygonMumbai, } from "wagmi/chains";
Note: Make sure you have the required dependencies installed, including
@solana/web3.js
.
To use the MultiChain Wallet Connect React components, follow these steps:
-
Wrap your application or relevant components with the
MultichainWalletProvider
component:<MultichainWalletProvider> {/* Your application components */} </MultichainWalletProvider>
-
Configure the Solana wallet adapter by using the
SolanaWalletAdapterConfig
component within theMultichainWalletProvider
:const solanaChains = [ { name: "Solana", rpcEndpoint: clusterEndpoint("mainnet-beta") }, ]; const solanaTestChains = [ { name: "Solana Devnet", rpcEndpoint: clusterEndpoint("devnet") }, ]; <MultichainWalletProvider> <SolanaWalletAdapterConfig chains={solanaChains} testnetChains={solanaTestChains} // These will display unde the testnets tab > {/* Your application components */} </SolanaWalletAdapterConfig> </MultichainWalletProvider>;
-
Configure the Rainbowkit wallet adapter by using the
RainbowkitConfig
component within theMultichainWalletProvider
:const evmChains = [polygon, mainnet]; const evmTestChains = [polygonMumbai, goerli]; const initialChain = { ...polygonMumbai, type: SupportedChains.Ethereum }; <MultichainWalletProvider initialChain={initialChain}> <RainbowkitConfig chains={evmChains} testnetChains={evmTestChains} // These will display unde the testnets tab theme={myCustomTheme} providers={[publicProvider()]} options={{ // Rainbowkit relies on WalletConnect which now needs to obtain a projectId from WalletConnect Cloud. walletConnectProjectId: "*YOUR WALLET CONNECT PROJECT ID*", }} > {/* Your application components */} </RainbowkitConfig> </MultichainWalletProvider>;
Replace
initialChain
,myCustomTheme
, andpublicProvider()
with the appropriate values and configurations for your project. -
Use the
MultichainConnectButton
component to display the wallet connection button in your application:<MultichainWalletProvider> <RainbowkitConfig> <SolanaWalletAdapterConfig> <MultichainConnectButton /> </SolanaWalletAdapterConfig> </RainbowkitConfig> </MultichainWalletProvider>
Customize the placement and appearance of the button as needed in your application's layout.
That's it! You can now integrate MultiChain Wallet Connect React components into your application to enable wallet connectivity and interactions with Solana and Ethereum-based chains.
The architecture can be viewed here.
sequenceDiagram
User->>UI: Open dApp
UI->>MultiChainConnect: Initialize with supported chains
MultiChainConnect->>WalletAdapter: Initialize the Wallet Adapter with wallets that conform to the wallet standard
MultiChainConnect->>UI: Show connect button
User->>MultiChainConnect: Connect
MultiChainConnect->>User: Open modal with supported chains
User->>MultiChainConnect: Select chain
MultiChainConnect->>MultiChainConnect: Store the selected chain
MultiChainConnect->>WalletAdapter: Launch selected chain's Wallet Adapter
WalletAdapter->>User: Return a list of available wallets the user can connect with
User->>WalletAdapter: Select wallet
WalletAdapter->>MultiChainConnect: Return connected Wallet
MultiChainConnect->>MultiChainConnect: Store the connected Wallet
MultiChainConnect->>WalletAdapter: Get connect UI for showing the connected wallet
WalletAdapter->>UI: Show UI for connected wallet and button for disconnecting wallet
When you run pnpm run geticons
or npm publish
, icons and configuration files are automatically fetched from our S3 bucket: s3://civic-evm-config/
. This ensures that you always have the latest versions of these files as part of your setup process.
- The configuration and icon files have been added to
.gitignore
to avoid accidental commits of these files into the repository. -
Always treat the S3 bucket (
s3://civic-evm-config/
) as the single source of truth for these files. Changes should be reflected in the S3 bucket and not within the repository.
- Creating your own button with custom styling:
import React from "react";
import styled from "styled-components";
import {
MultichainConnectedButton,
useWallet,
useModal,
} from "@civic/multichain-connect-react";
// Styled component named StyledButton
const StyledButton = styled.button`
display: inline-block;
border-radius: 20px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
border: 2px solid black;
background: white;
color: black;
`;
export function MultichainConnectButton(): JSX.Element | null {
const { connected } = useWallet();
const { openConnectModal } = useModal();
return (
<>
{!connected && (
<StyledButton type="button" onClick={openConnectModal}>
Connect
</StyledButton>
)}
<MultichainConnectedButton />
</>
);
}