Get Started

Learn about the WDK React Native UI Kit and how to 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>
  )
}

---

Theming

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 Starter - See a complete implementation

---

Need Help?

Discord Community

Connect with developers, ask questions, share your projects

Join Community

GitHub Issues

Report bugs, request features, and get technical help

Open an Issue

Email Contact

For sensitive or private matters, contact our team directly

Send an email