React Components Reference

Complete reference for Selendra React components and hooks.

Provider Components

SelendraProvider

Context provider making the SDK available to all child components.

Props

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	Child components
`sdk`	`SelendraSDK`	Yes	SDK instance
`autoConnect`	`boolean`	No	Auto-connect on mount
`onError`	`(error: Error) => void`	No	Error handler callback

Example

import { SelendraProvider, SelendraSDK } from "@selendrajs/sdk/react";

const sdk = new SelendraSDK({
  network: "mainnet",
  wsEndpoint: "wss://rpc.selendra.org",
});

function App() {
  return (
    <SelendraProvider sdk={sdk} autoConnect>
      <MyApp />
    </SelendraProvider>
  );
}

NetworkProvider

Provides network configuration and switching capabilities.

Props

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	Child components
`networks`	`NetworkConfig[]`	Yes	Available networks
`defaultNetwork`	`string`	No	Default network ID
`onNetworkChange`	`(network: string) => void`	No	Network change callback

Core Hooks

useSelendra()

Access the Selendra SDK instance from context.

Returns

SelendraSDK;

Example

import { useSelendra } from "@selendrajs/sdk/react";

function ChainInfo() {
  const sdk = useSelendra();
  const [chainInfo, setChainInfo] = useState(null);

  useEffect(() => {
    sdk.getChainInfo().then(setChainInfo);
  }, [sdk]);

  return chainInfo ? <div>Chain: {chainInfo.chainName}</div> : null;
}

useAccount()

Manages account connection and state.

Returns

interface UseAccountReturn {
  account: Account | null;
  isConnected: boolean;
  isConnecting: boolean;
  error: Error | null;
  connect: () => Promise<void>;
  disconnect: () => Promise<void>;
  switchAccount: (address: string) => Promise<void>;
  accounts: Account[];
}

Example

function WalletConnect() {
  const { account, isConnected, isConnecting, connect, disconnect } =
    useAccount();

  if (isConnecting) return <div>Connecting...</div>;

  return isConnected ? (
    <div>
      <p>Connected: {account?.address}</p>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  ) : (
    <button onClick={connect}>Connect Wallet</button>
  );
}

useBalance()

Gets and monitors account balance.

Parameters

interface UseBalanceOptions {
  address?: string;
  token?: string;
  refreshInterval?: number;
}

Returns

interface UseBalanceReturn {
  balance: Balance | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

Example

function BalanceDisplay({ address }) {
  const { balance, loading, error } = useBalance({
    address,
    refreshInterval: 5000, // Refresh every 5 seconds
  });

  if (loading) return <div>Loading balance...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      Balance: {balance?.free} {balance?.tokenSymbol}
    </div>
  );
}

useNetwork()

Manages network selection and switching.

Returns

interface UseNetworkReturn {
  network: NetworkConfig;
  networks: NetworkConfig[];
  isSwitching: boolean;
  switchNetwork: (networkId: string) => Promise<void>;
  addNetwork: (network: NetworkConfig) => void;
}

Example

function NetworkSelector() {
  const { network, networks, switchNetwork } = useNetwork();

  return (
    <select value={network.id} onChange={(e) => switchNetwork(e.target.value)}>
      {networks.map((net) => (
        <option key={net.id} value={net.id}>
          {net.name}
        </option>
      ))}
    </select>
  );
}

useTransaction()

Handles transaction creation and submission.

Returns

interface UseTransactionReturn {
  send: (options: SendTransactionOptions) => Promise<Transaction>;
  estimateGas: (options: SendTransactionOptions) => Promise<bigint>;
  transaction: Transaction | null;
  isLoading: boolean;
  error: Error | null;
  reset: () => void;
}

Example

function TransferForm() {
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");
  const { send, isLoading, error } = useTransaction();

  const handleTransfer = async () => {
    try {
      const tx = await send({
        to: recipient,
        amount: BigInt(amount),
      });
      console.log("Transaction sent:", tx.hash);
    } catch (err) {
      console.error("Transfer failed:", err);
    }
  };

  return (
    <div>
      <input
        placeholder="Recipient address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      />
      <input
        type="number"
        placeholder="Amount"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <button onClick={handleTransfer} disabled={isLoading}>
        {isLoading ? "Sending..." : "Send"}
      </button>
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

useContract()

Options & Returns

interface UseContractOptions {
  address: string;
  abi: any[];
  autoConnect?: boolean;
}

interface UseContractReturn {
  contract: Contract | null;
  call: (functionName: string, ...args: any[]) => Promise<any>;
  send: (
    functionName: string,
    options?: ContractSendOptions,
    ...args: any[]
  ) => Promise<Transaction>;
  isLoading: boolean;
  error: Error | null;
}

useEventListener()

Options & Returns

interface UseEventListenerOptions {
  contract?: Contract;
  eventName?: string;
  fromBlock?: number;
  filters?: Record<string, any>;
}

interface UseEventListenerReturn {
  events: Event[];
  isLoading: boolean;
  error: Error | null;
  unsubscribe: () => void;
}

UI Components

Component	Props	Description
`<AddressDisplay />`	`address`, `format`, `showCopy`, `showExplorer`	Display address with formatting and copy functionality
`<BalanceDisplay />`	`balance`, `format`, `showSymbol`, `decimals`	Display formatted balance with symbol
`<NetworkBadge />`	`network`, `size`, `showIcon`	Display network status badge
`<TransactionStatus />`	`transaction`, `showHash`, `showDetails`	Show transaction status with details

Example

<AddressDisplay address={account.address} format="short" showCopy showExplorer />
<BalanceDisplay balance={balance} format="compact" showSymbol />

Form Components

Component	Props	Description
`<AddressInput />`	`value`, `onChange`, `placeholder`, `required`	Input with address validation
`<AmountInput />`	`value`, `onChange`, `token`, `decimals`, `maxAmount`	Input with balance formatting
`<WalletSelector />`	`selectedWallet`, `onWalletSelect`, `wallets`	Wallet selection dropdown
`<TransactionForm />`	`fields`, `onSubmit`, `validation`, `loading`	Complete transaction form

TypeScript Types

Core Types

interface Account {
  address: string;
  name?: string;
  type: "substrate" | "evm";
  publicKey: string;
}

interface Balance {
  free: bigint;
  reserved: bigint;
  frozen: bigint;
  total: bigint;
  tokenSymbol: string;
  decimals: number;
}

interface Transaction {
  hash: string;
  from: string;
  to: string;
  amount?: bigint;
  status: "pending" | "included" | "finalized" | "failed";
  events: TransactionEvent[];
}

interface NetworkConfig {
  id: string;
  name: string;
  rpcUrl: string;
  explorerUrl?: string;
  chainId: number;
}

This React components reference covers all major components and hooks. For complete examples, check our examples directory and tutorials.

Contribute

Found an issue or want to contribute?

Help us improve this documentation by editing this page on GitHub.

Edit this page on GitHub

← Back to Documentation