From typink/dedot Apps

Overview

This guide helps you adopt Polkadot UI in an existing Typink/Dedot project incrementally.

Prerequisites

Existing Typink app using Dedot
React 18+ and TypeScript
Tailwind v4 enabled (recommended)

In our example, we'll use the demo Typink app from github. You can use your existing typink app in a similar way. To follow along, clone the repo and install the dependencies.

git clone https://github.com/dedotdev/typink.git # clone the repo
cd typink/examples/demo-general # go to the demo app
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

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 typink/dedot Apps

On this page