Get Started

The WDK React Native UI Kit provides ready-made, themeable components for building wallet applications. It's designed to work seamlessly with the SDK and offers:

Ready-made wallet building blocks: amount input, asset selector, address input, QR code, balance, transaction lists, seed phrase components
Themeable out of the box: light/dark modes, brand colors, ThemeProvider and useTheme API
Type-safe and documented: Excellent developer experience with TypeScript support
Composable and unopinionated: No business logic; wire in your own data/state from WDK
Mobile-first: React Native primitives with sensible defaults and accessible touch targets

Installation

Install the UI Kit package:

npm install @tetherto/wdk-uikit-react-native

Quick Start

Wrap your app with the theme provider and render a simple component:

Basic Setup

import { ThemeProvider, lightTheme, TransactionList } from '@tetherto/wdk-uikit-react-native'

export default function App() {
  const transactions = [ /* your transactions */ ]

  return (
    <ThemeProvider initialTheme={lightTheme}>
      <TransactionList transactions={transactions} />
    </ThemeProvider>
  )
}

Component List

Component	Description
`AmountInput`	Numeric input with token/fiat toggle, balance helper and Max action
`AssetSelector`	Token search & pick list with recent items and empty states
`NetworkSelector`	Network picker with gas level indicators and colors
`Balance`	Displays a balance value with optional masking and custom loader
`CryptoAddressInput`	Address input with QR scan and paste helpers, validation state
`QRCode`	QR renderer for addresses/payment requests with labeling and styling
`TransactionItem`	Single transaction row (sent/received) with token, amounts, network
`TransactionList`	Virtualized list of transactions using `TransactionItem`
`SeedPhrase`	Grid of seed words with optional editing and loading states

Integration with WDK

Components are designed to work seamlessly with the WDK React Native Provider. Here's an example of how to wire WDK data into the UI components:

WDK Integration Example

import * as React from 'react'
import { useWallet } from '@tetherto/wdk-react-native-provider'
import {
  ThemeProvider,
  lightTheme,
  Balance,
  CryptoAddressInput,
  AmountInput
} from '@tetherto/wdk-uikit-react-native'

export function SendScreen() {
  const { balances, isInitialized } = useWallet()
  const [amount, setAmount] = React.useState('')
  const [address, setAddress] = React.useState('')

  // Get USD₮ balance from the balances list
  const usdtBalance = balances.list.find(b => b.denomination === 'USDT')

  if (!isInitialized) {
    return <Text>Loading...</Text>
  }

  return (
    <ThemeProvider initialTheme={lightTheme}>
      <CryptoAddressInput
        value={address}
        onChangeText={setAddress}
        onQRScan={() => {/* Handle QR scan */}}
      />
      <AmountInput
        label="Enter Amount"
        tokenSymbol="USDT"
        value={amount}
        onChangeText={setAmount}
        tokenBalance={usdtBalance?.value ?? '0'}
        tokenBalanceUSD={usdtBalance?.valueUSD ?? '$0.00'}
        inputMode={'token'}
        onToggleInputMode={() => {/* Toggle fiat/token */}}
        onUseMax={() => setAmount(usdtBalance?.value ?? '0')}
      />
      <Balance
        value={parseFloat(usdtBalance?.valueUSD ?? '0')}
        currency="USD"
      />
    </ThemeProvider>
  )
}

The UI Kit provides a comprehensive theming system that allows you to use built-in light and dark themes, create custom brand themes from your colors and fonts, customize individual components with fine-grained control, and access theme values anywhere in your application. You can also switch themes dynamically based on user preferences.

For detailed theming documentation, including brand integration, custom themes, component customization, and advanced usage patterns, see the Theming Guide.

Common Patterns

Address Input with Validation

Address Input Pattern

import { CryptoAddressInput } from '@tetherto/wdk-uikit-react-native'

export function SendScreen() {
  const [address, setAddress] = React.useState('')
  const [error, setError] = React.useState('')

  const validateAddress = (addr: string) => {
    // Add your validation logic
    if (!addr.startsWith('T') && !addr.startsWith('0x')) {
      setError('Invalid address format')
    } else {
      setError('')
    }
  }

  return (
    <CryptoAddressInput
      value={address}
      onChangeText={(text) => {
        setAddress(text)
        validateAddress(text)
      }}
      error={error}
      onQRScan={() => {/* Open QR scanner */}}
    />
  )
}

Next Steps

Components List - Complete API reference for all components
Theming Guide - Deep dive into theming capabilities
React Native Quickstart - See a complete implementation

Need Help?

Discord CommunityConnect with developers, ask questions, share your projects

Join Community

GitHub IssuesReport bugs, request features, and get technical help

Open an Issue

Email ContactFor sensitive or private matters, contact our team directly

Send an email

Get Started

On this page