Skip to main content

Iota dApp Kit

The Iota dApp Kit is a set of React components, hooks, and utilities to help you build a dApp for the Iota ecosystem. Its hooks and components provide an interface for querying data from the Iota blockchain and connecting to Iota wallets.

Core Features​

Some of the core features of the dApp Kit include:

  • Query hooks to get the information your dApp needs
  • Automatic wallet state management
  • Support for all Iota wallets
  • Pre-built React components
  • Lower level hooks for custom components

Install​

To use the Iota dApp Kit in your project, run the following command in your project root:

npm i --save @iota/dapp-kit @iota/iota-sdk @tanstack/react-query

Setting up providers​

To use the hooks and components in the dApp Kit, wrap your app with the providers shown in the following example. The props available on the providers are covered in more detail in their respective pages.

import { createNetworkConfig, IotaClientProvider, WalletProvider } from '@iota/dapp-kit';
import { getFullnodeUrl } from '@iota/iota-sdk/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Config options for the networks you want to connect to
const { networkConfig } = createNetworkConfig({
    localnet: { url: getFullnodeUrl('localnet') },
    testnet: { url: getFullnodeUrl('testnet') },
});
const queryClient = new QueryClient();

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <IotaClientProvider networks={networkConfig} defaultNetwork="localnet">
                <WalletProvider>
                    <YourApp />
                </WalletProvider>
            </IotaClientProvider>
        </QueryClientProvider>
    );
}

Using UI components to connect to a wallet​

The dApp Kit provides a set of flexible UI components that you can use to connect and manage wallet accounts from your dApp. The components are built on top of Radix UI and are customizable.

To use the provided UI components, import the dApp Kit CSS stylesheet into your dApp. For more information regarding customization options, check out the respective documentation pages for the components and themes.

import '@iota/dapp-kit/dist/index.css';

Using hooks to make RPC calls​

The dApp Kit provides a set of hooks for making RPC calls to the Iota blockchain. The hooks are thin wrappers around useQuery from @tanstack/react-query. For more comprehensive documentation on how to use these query hooks, check out the react-query documentation.

import { useIotaClientQuery } from '@iota/dapp-kit';

function MyComponent() {
    const { data, isPending, error, refetch } = useIotaClientQuery('getOwnedObjects', {
        owner: '0x123',
    });

    if (isPending) {
        return <div>Loading...</div>;
    }

    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}