A set of reusable, stateless components for the WDK UI Kit.
npm install @tetherto/wdk-uikit-react-nativeA set of reusable, stateless components anyone can use to ship production-quality wallet or wallet-enabled apps fast.
To see it in action, please check the Wallet WDK React Native Starter, a complete wallet application built with WDK and WDK UI Kit.
This repository is part of the WDK (Wallet Development Kit) project, which empowers developers to build secure, non-custodial wallets with unified blockchain access, stateless architecture, and complete user control.
For detailed documentation about the complete WDK ecosystem, visit docs.wallet.tether.io.
- Ready-made wallet building blocks: amount input, asset selector, address input, QR code, balance, transaction item/list, seed phrase
- Themeable out of the box: light/dark modes, brand colors, ThemeProvider and useTheme API
- Type-safe, documented props and theme types for excellent DX
- Composable and unopinionated: no business logic; wire in your own data/state from WDK or elsewhere
- Mobile-first: React Native primitives with sensible defaults and accessible touch targets
- Customizable visuals: override per-component variants via componentVariants or fine-tune with componentOverrides
``bash`
npm install @tetherto/wdk-uikit-react-native
Wrap your app with the theme and render a list.
`tsx
import { ThemeProvider, lightTheme, TransactionList } from '@tetherto/wdk-uikit-react-native'
export default function App() {
const transactions = [{ id: '1', token: 'USDT', amount: '10.00', fiatAmount: '10.00', fiatCurrency: 'USD', network: 'Ethereum', type: 'received' }]
return (
)
}
`
Wire data from WDK into these UI components.
`tsx
import * as React from 'react'
import WDK from '@tetherto/wdk'
import WalletManagerEvm from '@tetherto/wdk-wallet-evm'
import WalletManagerBtc from '@tetherto/wdk-wallet-btc'
import { ThemeProvider, lightTheme, Balance, CryptoAddressInput, AmountInput } from '@tetherto/wdk-uikit-react-native'
export function WalletScreen() {
const [balance, setBalance] = React.useState
const [error, setError] = React.useState
React.useEffect(() => {
async function bootstrap() {
try {
const wdkWithWallets = new WDK('your seed phrase')
.registerWallet('bitcoin', WalletManagerBtc, { provider: 'https://blockstream.info/api' })
const accounts = await wdkWithWallets.getAccount('bitcoin', 0)
const address = await accounts.getAddress()
const balance = await accounts.getBalance()
setBalance(balance)
} catch (e: any) {
setError(e?.message ?? 'Unknown error')
}
}
bootstrap()
}, [])
return (
tokenSymbol="BTC"
value={amount}
onChangeText={setAmount}
tokenBalance={balance ?? '0'}
inputMode={'token'}
onUseMax={() => setAmount(balance ?? 0)}
/>
)
}
`
| 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. |
Each component exposes a typed, minimal API designed to work with WDK data models. Below are the primary props. For example usage, see the Quick Start and the Template Wallet.
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| label | string | no | 'Enter Amount' | Field label |
| value | string | yes | โ | Amount text |
| onChangeText | (text: string) => void | yes | โ | Called when text changes |
| tokenSymbol | string | yes | โ | Token code, e.g. 'ETH' |
| tokenBalance | string | yes | โ | Token balance (e.g. '1.23') |
| tokenBalanceUSD | string | yes | โ | Balance in fiat (e.g. '$4200.00') |
| inputMode | 'token' | 'fiat' | yes | โ | Current input mode |
| onToggleInputMode | () => void | yes | โ | Switch token/fiat |
| onUseMax | () => void | yes | โ | Fill with max amount |
| error | string | no | โ | Error message |
| editable | boolean | no | true | Disable input when false |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| tokens | Token[] | yes | โ | Full list of tokens to display/filter |
| recentTokens | string[] | yes | โ | Array of recent token names to show in the Recent row |
| onSelectToken | (t: Token) => void | yes | โ | Called when user picks a token; disabled when hasBalance is false |
Token type:
`ts`
type Token = {
id: string
symbol: string
name: string
balance: string
balanceUSD: string
icon: ImageSourcePropType
color: string
network?: string
hasBalance: boolean
}
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| value | number | no | 0 | Balance number |
| isLoading | boolean | no | false | Show loader state |
| Loader | React.ComponentType | no | โ | Custom loader component |
| showHide | boolean | no | true | Toggle hide/show balance |
| currency | string | no | 'USD' | Currency label |
| EyeOpenIcon | React.ComponentType | no | default | Shown when hidden |
| EyeClosedIcon | React.ComponentType | no | default | Shown when visible |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| label | string | no | 'Recipient Address' | Field label |
| value | string | yes | โ | Address text |
| onChangeText | (text: string) => void | yes | โ | Called when text changes |
| placeholder | string | no | 'T08p3BGPIuh1l934IIflu....Kc2GXhKc' | Hint text |
| onPaste | () => void | no | โ | Paste action handler |
| onQRScan | () => void | no | โ | Open QR scanner |
| editable | boolean | no | true | Disable input when false |
| error | string | no | โ | Error message |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| value | string | yes | โ | Data to encode |
| size | number | no | 200 | QR side in px |
| color | string | no | theme.primary | Dot color |
| backgroundColor | string | no | 'transparent' | Background behind QR |
| label | string | no | โ | Optional title above QR |
| containerStyle | ViewStyle | no | โ | Wrapper style |
| labelStyle | any | no | โ | Style for label |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| transaction | { id: string; token: string; amount: string; fiatAmount: string; fiatCurrency: string; network: string; type: 'sent' | 'received' } | yes | โ | Transaction data |
| onPress | () => void | no | โ | Row press handler |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| transactions | Transaction[] | yes | โ | List of transactions |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| networks | { id: string; name: string; gasLevel: 'High' | 'Normal' | 'Low'; gasColor: string; icon: string | any; color: string }[] | yes | โ | Networks to pick from |
| onSelectNetwork | (network: Network) => void | yes | โ | Called when a network is chosen |
| Prop | Type | Required | Default | Notes |
| --- | --- | --- | --- | --- |
| words | string[] | yes | โ | Seed words list (12/24, etc.) |
| editable | boolean | no | false | Allow editing inputs |
| onWordChange | (index: number, word: string) => void | no | โ | Called on word edit |
| onKeyPress | (index: number, key: string) => void | no | โ | Handle key press (e.g. Backspace navigation) |
| isLoading | boolean | no | false | Show generating/loading state |
Use a built-in theme or create one from your brand. The theming system is lightweight and flexible:
- Follow system light/dark or force a mode
- Start with lightTheme/darkTheme, or generate from brand colors via createThemeFromBranduseTheme
- Access theme values anywhere with componentVariants
- Customize visuals globally with and surgically with componentOverrides
See full guidance in THEME_USAGE.md.
`tsx
import { ThemeProvider, darkTheme, createThemeFromBrand } from '@tetherto/wdk-uikit-react-native'
const brandTheme = createThemeFromBrand({
primaryColor: '#0F62FE',
secondaryColor: '#6F6F6F',
fontFamily: { regular: 'System', bold: 'System' },
}, 'light')
export function Root() {
return (
{/ your UI /}
)
}
`$3
Key types: Theme, ThemeMode, ColorPalette, Typography, Spacing, BorderRadius, ComponentVariant, ComponentOverrides, BrandConfig.
Theme shape:
`ts`
type Theme = {
mode: 'light' | 'dark' | 'auto'
colors: ColorPalette
typography: Typography
spacing: Spacing
borderRadius: BorderRadius
componentVariants?: ComponentVariant
componentOverrides?: ComponentOverrides
}
BrandConfig for createThemeFromBrand:
`ts`
type BrandConfig = {
primaryColor: string
secondaryColor?: string
fontFamily?: {
regular?: string
medium?: string
semiBold?: string
bold?: string
}
}
Notes:
- mode can be 'light', 'dark', or 'auto' (follows system settings).componentVariants
- sets default variants/styles per component key (e.g., AmountInput.default, TransactionItem.compact).componentOverrides
- enables targeted overrides for specific component parts (e.g., paddings, font sizes, colors).
Key theme pieces at a glance:
| Token | Purpose |
| --- | --- |
| colors | Brand palette and semantic UI colors. |typography
| | Font families, sizes, weights. |spacing
| | Consistent spacing scale for paddings/margins. |borderRadius
| | Rounded corners scale. |componentVariants
| | Default visual variants by component. |componentOverrides
| | Fine-grained style overrides by component part. |
Check the WDK React Native Starter Wallet, a complete wallet application built with WDK and WDK UI Kit.
`bash``
npm install
npm run lint
npm test
This project is licensed under the Apache-2.0 - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
- Read the code of conduct
- See contributing guide
For support, please open an issue on the GitHub repository.