From reactive-dot/papi Apps

How to install Polkadot UI components in an existing reactive-dot app by reusing the existing providers

Overview

This guide helps you adopt Polkadot UI in an existing Reactive Dot project incrementally.

Prerequisites

Existing Reactive Dot app using Reactive Dot
React 18+ and TypeScript
Tailwind v4 enabled (recommended)

In our example, we'll use the react-teleport-example app from papi github. You can use your existing reactive dot app in a similar way. To follow along, clone the repo and install the dependencies. The app uses vite and pnpm but the below process works for Next.js and other package managers as well.

git clone https://github.com/polkadot-api/react-teleport-example.git # clone the repo
cd react-teleport-example
yarn # install the dependencies, this uses yarn but polkadot-ui supports other package managers too

At the moment, you will need tailwind for polkadot-ui components to work. You can find more info at Vite + Tailwind CSS or Next.js + Tailwind CSS.

Steps

0) Update vite project

vite-tsconfig-paths is required for compiler aliases to work.

pnpm add -D vite-tsconfig-paths

Then add the following to your vite.config.ts:

import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

1) Add a component

In this example, we'll add the address-input component.

yarn dlx polkadot-ui@latest add address-input

The CLI detects Dedot and installs the Dedot component, hooks and utilities that are specific to Dedot and required for the component to work.

2) Ensure providers are wired

If you are migrating from an existing app, your app is likely already wrapped in a Typink provider.

Your component might require different network connections than your existing ones. Make sure to add the networks you want to connect to in the defaultNetworkIds prop of the TypinkProvider like e.g. defaultNetworkIds: [polkadot.id, polkadotPeople.id] if you want to connect to the Polkadot and Polkadot People networks.

If not, add it at the of your:

import { PolkadotProvider } from "@/lib/providers/polkadot-provider.dedot"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <PolkadotProvider defaultChain="paseo">{children}</PolkadotProvider>
}

PolkadotUI components also use react-query to fetch data. So you will need to wrap your app in a QueryClientProvider.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

const queryClient = new QueryClient()

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
}

Instead of doing this manually, you can use the PolkadotProvider component that is specific to Dedot. It combines the QueryClientProvider and TypinkProvider.

import { PolkadotProvider } from "@/registry/polkadot-ui/lib/polkadot-provider.dedot"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <PolkadotProvider>{children}</PolkadotProvider>
}

3) Replace custom UI with components

You can now replace your custom UI with the Polkadot UI components. In the typink demo you can replace the <Input /> in RecipientSelector.tsx with the <AddressInput /> component.

import { AddressInput } from "@/components/address-input.dedot"

// ...
  <AddressInput
    value={value}
    onChange={handleCustomInput}
    disabled={isDisabled}
    identityChain={polkadotPeople.id}
  />
// ...

4) Styling

Components are tailwind-based and customizable. Adjust tokens in your CSS variables or override classNames.

Tips

Migrate one component at a time
Keep your existing fetching/queries; components focus on UI and validation

From reactive-dot/papi Apps

On this page