@pollar/react

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

Version: 0.10.1

npm install @pollar/react

<PollarProvider>

Wraps your application root. Required for all hooks and components to work. Internally renders every Pollar modal — login, transaction, send, receive, KYC, ramp, tx history, wallet balance, enabled-assets, swap, earn, sessions, and distribution-rules — so you do not need to mount them manually.

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

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

Props:

To register wallet-login providers (Stellar Wallets Kit, Privy), put them on client.walletAdapters, not on this component. See Wallet Adapters.

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,
    verified,
    wallet,
    login,
    logout,
    buildTx,
    signAndSubmitTx,
    signTx,
    submitTx,
    buildAndSignAndSubmitTx,
    runTx,
    tx,
    txHistory,
    network,
    setNetwork,
    walletBalance,
    refreshWalletBalance,
    enabledAssets,
    refreshAssets,
    setTrustline,
    getSwapConfig,
    getSwapTokens,
    getSwapQuote,
    swap,
    getEarnProviders,
    getEarnOpportunities,
    getEarnPosition,
    earnDeposit,
    earnWithdraw,
    getClient,
    openLoginModal,
    openTxModal,
    openKycModal,
    openRampModal,
    openTxHistoryModal,
    openWalletBalanceModal,
    openSendModal,
    openReceiveModal,
    openEnabledAssetsModal,
    openSwapModal,
    openEarnModal,
    openSessionsModal,
    openDistributionRulesModal,
    sessions,
    appConfig,
    styles,
  } = usePollar();
}

Authentication

PollarLoginOptions:

Transactions

The transaction modal opens automatically when buildTx is called. See @pollar/core for TransactionState step details and the per-call BuildOutcome / SignOutcome / SubmitOutcome return types.

Network

Wallet Balance

For an arbitrary public key / network, use getClient().getWalletBalance(publicKey) from @pollar/core.

Enabled assets & trustlines

Swap

Earn

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 comes from your remote dashboard configuration (or the appConfig override passed to <PollarProvider>), exposed as styles on usePollar().

<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.

Live (non-template) modal components are also exported for direct rendering: SendModal, SwapModal, EarnModal, ReceiveModal, EnabledAssetsModal, WalletBalanceModal, SessionsModal, DistributionRulesModal, plus KycStatus, RouteDisplay, and TxStatusView.

Import the corresponding *Props type for full type safety:

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

Types

import type {
  PollarConfig,
  PollarStyles,
  LoginButtonProps,
  AuthModalProps,
  KycStep,
  RampStep,
  TransactionModalTemplateProps,
  WalletBalanceModalTemplateProps,
  // re-exported from @pollar/core so you can author custom login providers
  PollarAuthProvider,
  AuthProviderContext,
} from '@pollar/react';

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