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.

Features

✅ Connection Validation: Checks connection status for specific blockchain networks
✅ Loading States: Optional loading indicators during connection establishment
✅ Flexible Fallbacks: Customizable content for disconnected states
✅ Chain-Specific: Works with any configured chain ID
✅ TypeScript: Full type safety with comprehensive interfaces
✅ Provider Agnostic: Works with both dedot and polkadot-api (PAPI) providers

Installation

npx polkadot-ui@latest add require-connection

Usage

Basic Example

Please connect to Paseo to continue

With Loading State

Connecting to Paseo People...

Protecting Transaction UI

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>

Best Practices

1. Graceful Fallbacks

Always provide meaningful fallback content that explains why the connection is required:

<RequireConnection
  chainId={paseo.id}
  fallback={
    <div className="text-center p-6">
      <h3>Paseo Connection Required</h3>
      <p>This feature needs access to the Paseo blockchain.</p>
    </div>
  }
>
  <ChainFeature />
</RequireConnection>

2. Loading States

For better UX, provide loading states for slow connections:

<RequireConnection
  chainId={paseo.id}
  loadingFallback={<Spinner>Connecting to Paseo...</Spinner>}
  fallback={<ConnectionError />}
>
  <Content />
</RequireConnection>

3. Informative Error Messages

Use descriptive error messages to help users understand what's needed:

<RequireConnection
  chainId={paseo.id}
  fallback={
    <Alert>
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>Paseo Connection Required</AlertTitle>
      <AlertDescription>
        This blockchain interface requires a connection to the Paseo network.
        Please ensure your provider is configured correctly.
      </AlertDescription>
    </Alert>
  }
>
  <BlockchainInterface />
</RequireConnection>

Examples

Connect to Paseo to view this example

Require Connection

On this page