# 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:

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

***

### Quick Start

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

{% code title="Basic Setup" lineNumbers="true" %}

```tsx
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>
  )
}
```

{% endcode %}

***

### Component List

| Component                                                                                   | Description                                                          |
| ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| [`AmountInput`](https://docs.wdk.tether.io/ui-kits/api-reference#amountinput)               | Numeric input with token/fiat toggle, balance helper and Max action  |
| [`AssetSelector`](https://docs.wdk.tether.io/ui-kits/api-reference#assetselector)           | Token search & pick list with recent items and empty states          |
| [`NetworkSelector`](https://docs.wdk.tether.io/ui-kits/api-reference#networkselector)       | Network picker with gas level indicators and colors                  |
| [`Balance`](https://docs.wdk.tether.io/ui-kits/api-reference#balance)                       | Displays a balance value with optional masking and custom loader     |
| [`CryptoAddressInput`](https://docs.wdk.tether.io/ui-kits/api-reference#cryptoaddressinput) | Address input with QR scan and paste helpers, validation state       |
| [`QRCode`](https://docs.wdk.tether.io/ui-kits/api-reference#qrcode)                         | QR renderer for addresses/payment requests with labeling and styling |
| [`TransactionItem`](https://docs.wdk.tether.io/ui-kits/api-reference#transactionitem)       | Single transaction row (sent/received) with token, amounts, network  |
| [`TransactionList`](https://docs.wdk.tether.io/ui-kits/api-reference#transactionlist)       | Virtualized list of transactions using `TransactionItem`             |
| [`SeedPhrase`](https://docs.wdk.tether.io/ui-kits/api-reference#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 Core. Here's an example of how to wire WDK data into the UI components:

{% code title="WDK Integration Example" lineNumbers="true" %}

```tsx
import * as React from 'react'
import { useWdkApp, useBalance, BaseAsset } from '@tetherto/wdk-react-native-core'
import {
  ThemeProvider,
  lightTheme,
  Balance,
  CryptoAddressInput,
  AmountInput
} from '@tetherto/wdk-uikit-react-native'

const usdt = new BaseAsset({
  id: 'usdt-ethereum',
  network: 'ethereum',
  symbol: 'USDT',
  name: 'Tether USD',
  decimals: 6,
  isNative: false,
  address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
})

export function SendScreen() {
  const { state } = useWdkApp()
  const { data: usdtBalance } = useBalance(0, usdt)
  const [amount, setAmount] = React.useState('')
  const [address, setAddress] = React.useState('')

  if (state.status !== 'READY') {
    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?.balance ?? '0'}
        tokenBalanceUSD={'$0.00'}
        inputMode={'token'}
        onToggleInputMode={() => {/* Toggle fiat/token */}}
        onUseMax={() => setAmount(usdtBalance?.balance ?? '0')}
      />
      <Balance
        value={parseFloat(usdtBalance?.balance ?? '0')}
        currency="USD"
      />
    </ThemeProvider>
  )
}
```

{% endcode %}

***

### 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](https://docs.wdk.tether.io/ui-kits/react-native-ui-kit/theming).

***

### Common Patterns

#### Address Input with Validation

{% code title="Address Input Pattern" lineNumbers="true" %}

```tsx
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 */}}
    />
  )
}
```

{% endcode %}

***

### Next Steps

* [Components List](https://docs.wdk.tether.io/ui-kits/react-native-ui-kit/api-reference) - Complete API reference for all components
* [Theming Guide](https://docs.wdk.tether.io/ui-kits/react-native-ui-kit/theming) - Deep dive into theming capabilities
* [React Native Starter](https://docs.wdk.tether.io/start-building/react-native-quickstart) - See a complete implementation

***

### Need Help?

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-discord">:discord:</i></td><td><strong>Discord Community</strong></td><td>Connect with developers, ask questions, share your projects</td><td><a href="https://discord.gg/arYXDhHB2w" class="button primary">Join Community</a></td><td><a href="https://discord.gg/arYXDhHB2w">https://discord.gg/arYXDhHB2w</a></td></tr><tr><td><i class="fa-github">:github:</i></td><td><strong>GitHub Issues</strong></td><td>Report bugs, request features, and get technical help</td><td><a href="https://github.com/tetherto/wdk-core" class="button secondary">Open an Issue</a></td><td><a href="https://github.com/tetherto/wdk-core">https://github.com/tetherto/wdk-core</a></td></tr><tr><td><i class="fa-envelope">:envelope:</i></td><td><strong>Email Contact</strong></td><td>For sensitive or private matters, contact our team directly</td><td><a href="mailto:wallet-info.tether.io" class="button secondary">Send an email</a></td><td><a href="mailto:wallet-info.tether.io">mailto:wallet-info.tether.io</a></td></tr></tbody></table>