Skip to main content

Chromia React Kit

note

We are currently updating this documentation. While it offers a general overview, some details may be outdated. Please check back soon for the latest version.

Welcome to the Chromia React Kit documentation!

The Chromia React Kit streamlines the integration of React-based front-end applications with the Chromia blockchain. It offers a suite of tools and react custom hooks that enable developers to build decentralized applications effortlessly (dApps), simplifying and managing blockchain interactions.

Why use the Chromia React Kit?​

  • Easily connect your React app to the Chromia blockchain.
  • A comprehensive reusable custom React Hooks for interacting with Chromia blockchain assets via FT4 libraries and Filehub.
  • Custom, reusable SWR hook for effortlessly constructing queries and operations to interact with the Dappmetadata Provider, Postchain Client, Directory Chain and Economy Chain.
  • Fully TypeScript-ready.
  • Leverage SWR features such as caching and revalidation. Learn more at SWR

Getting started​

Install dependencies​

Begin by installing the Chromia React library:

npm install @chromia/react

Core features​

FT4 provider​

The FT4 provider manages the FT4-related state for your application. Wrap your application in this provider to ensure that FT4-related queries and operations function correctly. We will use the provider in conjunction with Wagmi for the example code below:

import { FtProvider } from "@chromia/react";
import { useAccount, useConnectors } from "wagmi";
import type { createWeb3ProviderEvmKeyStore } from "@chromia/ft4";

const useEthereumProvider = () => {
  const { connector } = useAccount();
  const allConnectors = useConnectors();

  const matchingConnector = allConnectors.find((c) => c.id === connector?.id);
  return matchingConnector?.getProvider();
};

function App() {
  const ethProvider = useEthereumProvider();
  return (
    <FtProvider
      useEthereumProvider={getEthereumProvider as () => Promise<Parameters<typeof createWeb3ProviderEvmKeyStore>[0]>}
      useAccount={useAccount}
      defaultClientConfig={config}
    >
      <Component />
    </FtProvider>
  );
}

Custom hooks​

The React Kit offers custom hooks to streamline interactions with the Chromia blockchain. For example:

createChromiaHooks​

Simplify interactions with the Postchain client. The createChromiaHooks function returns reusable SWR async functions useChromiaQuery, useChromiaImmutableQuery and useChromiaInfiniteQuery, enabling you to perform various queries and operations tailored to your specific scenarios. The example below demonstrates how to use the createChromiaHooks:

import { createChromiaHooks } from "@chromia/react";
import type { ClientConfig } from "@chromia/react";
import { FailoverStrategy } from "postchain-client";

type QueryOrOperationType = {
  [QUERY_OR_OPERATION_NAME]: {
    params: [QUERY_OR_OPERATION_PARAM_TYPE];
    return: [QUERY_OR_OPERATION_RESPONSE_TYPE];
  };
};

const clientConfig: ClientConfig = {
  directoryNodeUrlPool: [BLOCKCHAIN_URL],
  failOverConfig: {
    strategy: FailoverStrategy.AbortOnError,
  },
};

export const { useChromiaInfiniteQuery, useChromiaImmutableQuery, useChromiaQuery } =
  createChromiaHooks<QueryOrOperationType>({
    clientConfig,
  });

useFtQuery​

The useFtQuery hooks return reusable SWR async functions useSWR, enabling you to perform various queries and operations to interact with the ft4 library. The example below demonstrates how to set the useFtQuery hook in action:

import { useFtQuery } from "@chromia/react";

const { data, isLoading, error } = useFtQuery({
  clientConfig: [CLIENT_CONFIG],
  queryName: [QUERY_NAME],
  queryParams: [QUERY_PARAM],
  accountId: [ACCOUNT_ID],
  options: [SWR_CONFIGURATION],
});

useFileHubImage​

The useFileHubImage hook simplifies interaction with Filehub, returning image data directly from it:

import { useFileHubImage } from "@chromia/react";

const image = useFileHubImage([FILEHUB_IMAGE_URL]);

Additional resources​