Introduction

AccountInfo displays identity details for a given ss58 address. It shows a concise summary (name + truncated address) with optional avatar/identicon and a verified badge. On hover or click it reveals richer details (legal name, socials, email, matrix, etc.) and includes a one-click copy action.

Features

• summary view: name or truncated address with optional verified badge
• avatar/identicon: shows on-chain image if present, otherwise a deterministic identicon
• details popover/hover: configurable fields (display, legal, socials, email, matrix, verified)
• copy to clipboard: accessible copy button for the full address
• configurable truncation: control or disable address truncation
• themes: identicon themes: polkadot, substrate, beachball, jdenticon
• skeleton state: graceful loading placeholder
• adapter friendly: base component uses injected services; dedot wrapper wires data for you

Installation

npx polkadot-ui@latest add account-info

The Account Info component additionally depends on tanstack 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}>
    //... 
  </QueryClientProvider>
}

Usage

// import the dedot or papi version of the component
import { AccountInfo } from "@/registry/polkadot-ui/blocks/account-info/account-info.dedot"

export default function Example() {
  return (
    <div className="space-y-6">
      <AccountInfo address="5F3sa2TJAWMqDhXG6jhV4N8ko9xE2Z4sQYDPoV8eP2eK7x7Y" />
    </div>
  )
}

Props

The AccountInfo wrapper exposes the base props minus services (it injects data from dedot).

Identity fields you can include in fields:

type AccountInfoField =
  | "display"
  | "legal"
  | "email"
  | "twitter"
  | "github"
  | "discord"
  | "matrix"
  | "image"
  | "verified"

Notes:

• The AccountInfoBase also accepts a services prop ({ identity, isLoading, error }) used by adapters. You do not need to provide it when using the AccountInfo/AccountInfoWithProvider wrappers.
• A loading skeleton is available as AccountInfoSkeleton.

Examples