@pollar/react

React hooks and pre-built UI components for Pollar. Built on top of @pollar/core.

npm install @pollar/react

<PollarProvider>

Wraps your application root. Required for all hooks and components to work. Internally renders the login, transaction, KYC, ramp, tx history, and wallet balance modals — you do not need to mount them manually.

import { PollarProvider } from '@pollar/react';

<PollarProvider
  config={{ apiKey: 'pub_testnet_xxxxxxxxxxxxxxxxxxxx' }}
>
  <App />
</PollarProvider>

Props:

PollarClientConfig:

usePollar()

The primary hook. Provides access to all Pollar functionality from a single import. Must be used inside <PollarProvider>.

'use client';
import { usePollar } from '@pollar/react';

function MyComponent() {
  const {
    isAuthenticated,
    walletAddress,
    login,
    logout,
    buildTx,
    signAndSubmitTx,
    transaction,
    txHistory,
    network,
    setNetwork,
    getBalance,
    getClient,
    openLoginModal,
    openTransactionModal,
    openKycModal,
    openRampWidget,
    openTxHistoryModal,
    openWalletBalanceModal,
    config,
    styles,
  } = usePollar();
}

Authentication

PollarLoginOptions:

Transactions

The transaction modal opens automatically when buildTx is called. See @pollar/core for TransactionState step details.

Network

Wallet Balance

Transaction History

KYC

Ramps

Utilities

Modal entry points

All Pollar modals are mounted inside <PollarProvider> and controlled programmatically:

Components

<WalletButton>

Pre-built button that handles the complete authentication flow. When logged out, opens the login modal. When logged in, shows the wallet address with a dropdown for balance, transaction history, and logout.

import { WalletButton } from '@pollar/react';

<WalletButton />

No props required. Appearance is controlled by the styles configuration passed to <PollarProvider>.

<KycModal>

Pre-built KYC verification modal. Can be rendered directly when you need more control than openKycModal() provides.

import { KycModal } from '@pollar/react';

<KycModal
  onClose={() => setOpen(false)}
  country="US"
  level="basic"
  onApproved={() => console.log('KYC approved')}
/>

<KycStatus>

Displays the current KYC status for the authenticated user.

import { KycStatus } from '@pollar/react';

<KycStatus />

<RampWidget>

Pre-built fiat on/off-ramp widget with support for on-ramp (fiat → crypto) and off-ramp (crypto → fiat) flows.

import { RampWidget } from '@pollar/react';

<RampWidget onClose={() => setOpen(false)} />

<WalletBalanceModal>

Displays the token balances of the authenticated wallet with a manual refresh option.

import { WalletBalanceModal } from '@pollar/react';

<WalletBalanceModal onClose={() => setOpen(false)} />

Template components

Template components handle rendering only — they receive all data and callbacks as props and contain no internal logic. Use them to build fully custom UI while reusing Pollar's layout and visual structure.

Import the corresponding *Props type for full type safety:

import {
  TransactionModalTemplate,
  type TransactionModalTemplateProps,
  WalletBalanceModalTemplate,
  type WalletBalanceModalTemplateProps,
} from '@pollar/react';

Types

import type {
  PollarConfig,
  PollarStyles,
  AuthProviderProps,
  AuthContextValue,
  LoginButtonProps,
  AuthModalProps,
  KycStep,
  RampStep,
  TransactionModalTemplateProps,
  WalletBalanceModalTemplateProps,
} from '@pollar/react';

Core types such as TransactionState, TxHistoryState, WalletBalanceContent, PollarLoginOptions, StellarNetwork, and WalletType are imported directly from @pollar/core.