CCIP-REACT-COMPONENTS

The CCIP-REACT-COMPONENTS package is a set of prebuilt ready-to-use UI components built on top of CCIP-JS. Using both packages, you can add a fully featured CCIP bridge to your app that can be styled to match your app design.

Table of contents

• CCIP-REACT-COMPONENTS
  • Table of contents
  • Installation
  • Example Usage
  • Network config
    • Tokens list
  • Config
    • Chains
      • Preselected chains
      • Preselect Token
    • Wallets
    • Theme
    • Variants
      • Drawer
  • Contributing
  • License

Installation

Install @chainlink/ccip-react-components:

Using NPM:

1npm install @chainlink/ccip-react-components

Using Yarn:

1yarn add @chainlink/ccip-react-components

Using PNPM:

1pnpm add @chainlink/ccip-react-components

Example Usage

For a working example of how to store, manage and use the NetworkConfig parameters, please refer to the example app here: in the NextJS Example

1import 'ccip-react-components/dist/style.css';
2import { CCIPWidget, Config, NetworkConfig } from 'ccip-react-components';
3import { sepolia, optimismSepolia } from 'viem/chains';
4
5const networkConfing: NetworkConfig = {
6  chains: [{ chain: sepolia }, { chain: optimismSepolia }],
7  linkContracts: {
8    [sepolia.id]: '0x779877A7B0D9E8603169DdbD7836e478b4624789',
9    [optimismSepolia.id]: '0xE4aB69C077896252FAFBD49EFD26B5D171A32410',
10  },
11  routerAddresses: {
12    [sepolia.id]: '0x0BF3dE8c5D3e8A2B34D2BEeB17ABfCeBaf363A59',
13    [optimismSepolia.id]: '0x114a20a10b43d4115e5aeef7345a1a71d2a60c57',
14  },
15  chainSelectors: {
16    [sepolia.id]: '16015286601757825753',
17    [optimismSepolia.id]: '5224473277236331295',
18  },
19  tokensList: [
20    {
21      symbol: 'CCIP-BnM',
22      address: {
23        [sepolia.id]: '0xFd57b4ddBf88a4e07fF4e34C487b99af2Fe82a05',
24        [optimismSepolia.id]: '0x8aF4204e30565DF93352fE8E1De78925F6664dA7',
25      },
26      logoURL:
27        'https://smartcontract.imgix.net/tokens/ccip-bnm.webp?auto=compress%2Cformat',
28    },
29  ],
30};
31
32const config: Config = {
33    theme: {
34        pallette: {
35            background: '#FFFFFF',
36            border: '#B3B7C0',
37            text: '#000000',
38        }
39        shape: {
40            radius: 6
41        },
42    }
43};
44
45<CCIPWidget config={config} networkConfig={networkConfig} />;

Network config

1/** Configure the networks, tokens and contracts that should be supported.
2 * List of all supported networks, transfer tokens, and their configurations: https://docs.chain.link/ccip/directory */
3export type NetworkConfig = {
4  /** List of all chains that should be supported */
5  chains: { chain: Chain; logoURL?: string }[];
6  /** You should provide a list of tokens that your app will support transfering.
7   * Refer to https://docs.chain.link/ccip/supported-networks for list of all currently supported
8   * tokens. For instructions on acquiring testnet tokens, refer to the documentation on
9   * https://docs.chain.link/ccip/test-tokens#mint-tokens-in-a-block-explorer.
10   */
11  tokensList: Token[];
12  /** Addresses for the LINK token contract on the corresponding chains */
13  linkContracts: AddressMap;
14  /** Addresses for the router contracts on the corresponding chains */
15  routerAddresses: AddressMap;
16  /** Selectors for the chains that should be supported */
17  chainSelectors: {
18    [chainId: number]: string | undefined;
19  };
20};

You should provide configuration for the networks and tokens that your app will support. Refer to CCIP documentation for list of all currently supported chains and tokens. For instructions on acquiring testnet tokens, refer to the documentation on CCIP Test Tokens.

1import { CCIPWidget, NetworkConfig } from 'ccip-react-components';
2import { sepolia, optimismSepolia } from 'viem/chains';
3
4const networkConfing: NetworkConfig = {
5  chains: [{ chain: sepolia }, { chain: optimismSepolia }],
6  linkContracts: {
7    [sepolia.id]: '0x779877A7B0D9E8603169DdbD7836e478b4624789',
8    [optimismSepolia.id]: '0xE4aB69C077896252FAFBD49EFD26B5D171A32410',
9  },
10  routerAddresses: {
11    [sepolia.id]: '0x0BF3dE8c5D3e8A2B34D2BEeB17ABfCeBaf363A59',
12    [optimismSepolia.id]: '0x114a20a10b43d4115e5aeef7345a1a71d2a60c57',
13  },
14  chainSelectors: {
15    [sepolia.id]: '16015286601757825753',
16    [optimismSepolia.id]: '5224473277236331295',
17  },
18  tokensList: [
19    {
20      symbol: 'CCIP-BnM',
21      address: {
22        [sepolia.id]: '0xFd57b4ddBf88a4e07fF4e34C487b99af2Fe82a05',
23        [optimismSepolia.id]: '0x8aF4204e30565DF93352fE8E1De78925F6664dA7',
24      },
25      logoURL: 'https://smartcontract.imgix.net/tokens/ccip-bnm.webp?auto=compress%2Cformat',
26    },
27  ],
28};
29
30<CCIPWidget networkConfig={networkConfig} />;

Tokens list

tokensList accepts an array of Token objects

1export declare type AddressMap = {
2  [chainId: number]: Address | undefined;
3};
4
5export declare type Token = {
6  /** The token's symbol that will be shown in the UI  */
7  symbol: string;
8  /** The token's address, represented as a mapping by chainId */
9  address: AddressMap;
10  /** URL of the token's logo that will be shown in the UI */
11  logoURL: string;
12  /** A list of meta information tags for organizing and sorting (optional) */
13  tags?: string[];
14};
15
16type AddressMap = {
17  [chainId: number]: Address | undefined;
18};

Config

1import { CCIPWidget, Config } from 'ccip-react-components';
2
3const config: Config = {
4    ...
5};
6
7<CCIPWidget config={config} />;

Chains

allow and deny configuration options are provided to control which chains can be used.

1import { mainnet, avalanche } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = {
4  // Only Ethereum and Avalanche will be available
5  chains: { allow: [mainnet.id, avalanche.id] },
6};

1import { mainnet, avalanche } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = {
4  // All chains except Ethereum and Avalanche will be available
5  chains: { deny: [mainnet.id, avalanche.id] },
6};

You can also specify source chains (chains from which transfers can be sent) and destination chains (chains from which transfers can be received).

1import { mainnet, avalanche } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = {
4  // Transfers can be sent only from Ethereum and Avalanche
5  chains: { from: { allow: [mainnet.id, avalanche.id] } },
6};

1import { mainnet, avalanche } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = {
4  // Transfers can be sent from all chains except Ethereum and Avalanche
5  chains: { from: { deny: [mainnet.id, avalanche.id] } },
6};

1import { mainnet, avalanche } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = {
4  // Transfers can be received only to Ethereum and Avalanche
5  chains: { to: { allow: [mainnet.id, avalanche.id] } },
6};

1import { mainnet, avalanche } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = {
4  // Transfers can be received on all chains except Ethereum and Avalanche
5  chains: { to: { deny: [mainnet.id, avalanche.id] } },
6};

Preselected chains

You can configure default chains: as soon as the component loads, the chains will display as preselected.

Preselect a chain to send a transfer from:

1import { mainnet } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = { fromChain: mainnet.id };

Preselect a chain to receive a transfer:

1import { mainnet } from 'viem/chains';
2import { Config } from 'ccip-react-components';
3const config: Config = { toChain: mainnet.id };

Preselect Token

You can also specify a default token to display as preselected:

1import { Config } from 'ccip-react-components';
2const config: Config = { token: 'USDC' };

Wallets

If needed, you can pass additional wallet configurations:

1import { Config } from 'ccip-react-components';
2const config: Config = { walletConfig: {
3  /** Configure the connection options for Injected Connectors
4   * More info: https://wagmi.sh/react/api/connectors/injected
5   */
6  injected?: InjectedParameters;
7  /** Configure the connection options for MetaMask
8   * More info: https://wagmi.sh/react/api/connectors/metaMask
9   */
10  metamask?: MetaMaskParameters;
11  /** Configure the connection options for Wallet Connect
12   * NOTE: A valid projectId should be provided in order to use Wallet Connect!
13   * More info: https://wagmi.sh/react/api/connectors/walletConnect
14   */
15  walletConnect?: WalletConnectParameters;
16  /** Configure the connection options for Coinbase Wallet
17   * More info: https://wagmi.sh/react/api/connectors/coinbaseWallet
18   */
19  coinbaseWallet?: CoinbaseWalletParameters;
20} };

Theme

You can customize the component's theme to be in line with your app design.

1import { Config } from 'ccip-react-components';
2const config: Config = { theme:
3    {
4    /** Define the app colors in HEX format */
5    palette?: {
6      /** Titles color and primary button background, default #000000 */
7      primary?: string;
8      /** Background color, default '#FFFFFF' */
9      background?: string;
10      /** Border color, default '#B3B7C0' */
11      border?: string;
12      /** Text color, default '#000000' */
13      text?: string;
14      /** Secondary text, inactive and placeholders color, default '#6D7480' */
15      muted?: string;
16      /** Input fields background color, default '#FFFFFF' */
17      input?: string;
18      /** Popovers, dropdowns and select fields background color, default '#F5F7FA' */
19      popover?: string;
20      /** Selected field from a dropdown background color, default '#D7DBE0' */
21      selected?: string;
22      /** Warning text color, default '#F7B955' */
23      warning?: string;
24      /** Warning text background color, default '#FFF5E0' */
25      warningBackground?: string;
26    };
27    shape?: {
28      /** Border radius size in px default 6 */
29      radius?: number;
30    };
31  };}

Variants

There are three variants: default, compact and drawer

Drawer

If you chose the drawer variant, you need to create and assign a ref in order to control it:

1import { useRef } from 'react';
2import { TDrawer, CCIPWidget, Config } from 'ccip-react-components';
3
4export const Page = () = {
5  const drawerRef = useRef<TDrawer>(null);
6  const toggleDrawer = () => drawerRef.current?.toggleDrawer();
7
8  return (
9    <div>
10      <button onClick={toggleDrawer}>Open</button>
11      <CCIPWidget config={config} ref={drawerRef} />
12    </div>
13  );
14}

Contributing

Please see the main README.

License

CCIP-React-Components is available under the MIT license.