Require Connection

A component that conditionally renders content based on blockchain connection status.

Introduction

RequireConnection is a component that conditionally renders content based on blockchain connection status, ensuring that protected UI components only display when connected to the required chain.

Installation

npx polkadot-ui@latest add require-connection

Usage

Require Connection

Render children only when a connection is established

Make sure your app is connected to Paseo to continue. This is the content that will be displayed when you are not connected to Paseo.

Require Connection - Basic Example

Render content when connected to the target chain

Please connect to Paseo to continue

Require Connection - With Loading State

Show a loading fallback while connecting

Connecting to Paseo...

Require Connection - Protecting Transaction UI

Gate transaction interfaces behind connection status

Please connect to Paseo to submit transactions

Props

Prop	Type	Required	Description
`chainId`	`ChainId`	✅	The chain ID that must be connected
`children`	`ReactNode`	✅	Content to render when connected
`fallback`	`ReactNode`	✅	Content to render when not connected
`loadingFallback`	`ReactNode`	❌	Optional content to show while connecting

Connection States

The component handles three distinct states:

Loading: Connection is being established (shows loadingFallback if provided)
Connected: Chain is connected (shows children)
Disconnected: Chain is not connected (shows fallback)

Supported Chain IDs

The component works with any chain ID configured in your polkadot-ui config:

"paseo" - Paseo Relay Chain
"paseoPeople" - Paseo People Chain
Any custom chains you've added to your configuration

Use Cases

Multi-Chain Support

function MultiChainComponent() {
  return (
    <div className="space-y-6">
      <RequireConnection
        chainId={paseo.id}
        fallback={<ConnectMessage chain="paseo" />}
      >
        <RelayChainFeatures />
      </RequireConnection>

      <RequireConnection
        chainId={paseo.id}
        fallback={<ConnectMessage chain="paseoPeople" />}
      >
        <PeopleChainFeatures />
      </RequireConnection>
    </div>
  );
}

Dashboard Sections

<RequireConnection
  chainId={paseo.id}
  loadingFallback={<DashboardSkeleton />}
  fallback={<ConnectPrompt />}
>
  <ChainDashboard />
</RequireConnection>

Nested Protection

<RequireConnection chainId={paseo.id} fallback={<ConnectRelay />}>
  <RequireConnection chainId="paseoPeople" fallback={<ConnectPeople />}>
    <CrossChainFeature />
  </RequireConnection>
</RequireConnection>

Require Connection

On this page