{"id":50841065,"url":"https://github.com/tetherto/wdk-uikit-react-native","last_synced_at":"2026-06-14T06:35:26.905Z","repository":{"id":345624940,"uuid":"1067947972","full_name":"tetherto/wdk-uikit-react-native","owner":"tetherto","description":"UI component library for building React Native crypto wallets.","archived":false,"fork":false,"pushed_at":"2026-03-19T23:32:23.000Z","size":31,"stargazers_count":2,"open_issues_count":3,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-20T14:19:30.129Z","etag":null,"topics":["android","ios","mobile","react-native","ui-components","wdk"],"latest_commit_sha":null,"homepage":"https://docs.wdk.tether.io/ui-kits/react-native-ui-kit","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tetherto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-01T16:11:25.000Z","updated_at":"2026-03-19T23:32:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tetherto/wdk-uikit-react-native","commit_stats":null,"previous_names":["tetherto/wdk-uikit-react-native"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/tetherto/wdk-uikit-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tetherto%2Fwdk-uikit-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tetherto%2Fwdk-uikit-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tetherto%2Fwdk-uikit-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tetherto%2Fwdk-uikit-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tetherto","download_url":"https://codeload.github.com/tetherto/wdk-uikit-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tetherto%2Fwdk-uikit-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34312072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","mobile","react-native","ui-components","wdk"],"created_at":"2026-06-14T06:35:23.923Z","updated_at":"2026-06-14T06:35:26.895Z","avatar_url":"https://github.com/tetherto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @tetherto/wdk-uikit-react-native\n\nA set of reusable, stateless components anyone can use to ship production-quality wallet or wallet-enabled apps fast.\n\nTo see it in action, please check the  Wallet [WDK React Native Starter](https://github.com/tetherto/wdk-starter-react-native), a complete wallet application built with WDK and WDK UI Kit.\n\n## 🔍 About WDK\n\nThis repository is part of the [**WDK (Wallet Development Kit)**](https://wallet.tether.io/) project, which empowers developers to build secure, non-custodial wallets with unified blockchain access, stateless architecture, and complete user control. \n\nFor detailed documentation about the complete WDK ecosystem, visit [docs.wallet.tether.io](https://docs.wallet.tether.io).\n\n\n## 🌟 Features\n\n- Ready-made wallet building blocks: amount input, asset selector, address input, QR code, balance, transaction item/list, seed phrase\n- Themeable out of the box: light/dark modes, brand colors, `ThemeProvider` and `useTheme` API\n- Type-safe, documented props and theme types for excellent DX\n- Composable and unopinionated: no business logic; wire in your own data/state from WDK or elsewhere\n- Mobile-first: React Native primitives with sensible defaults and accessible touch targets\n- Customizable visuals: override per-component variants via `componentVariants` or fine-tune with `componentOverrides`\n\n## ⬇️ Install\n\n```bash\nnpm install @tetherto/wdk-uikit-react-native\n```\n\n## 🚀 Quick Start\n\nWrap your app with the theme and render a list.\n\n```tsx\nimport { ThemeProvider, lightTheme, TransactionList } from '@tetherto/wdk-uikit-react-native'\n\nexport default function App() {\n  const transactions = [{ id: '1', token: 'USDT', amount: '10.00', fiatAmount: '10.00', fiatCurrency: 'USD', network: 'Ethereum', type: 'received' }]\n\n  return (\n    \u003cThemeProvider initialTheme={lightTheme}\u003e\n      \u003cTransactionList transactions={transactions} /\u003e\n    \u003c/ThemeProvider\u003e\n  )\n}\n```\n\n## 🔌 Use with WDK\n\nWire data from WDK into these UI components.\n\n```tsx\nimport * as React from 'react'\nimport WDK from '@tetherto/wdk'\nimport WalletManagerEvm from '@tetherto/wdk-wallet-evm'\nimport WalletManagerBtc from '@tetherto/wdk-wallet-btc'\nimport { ThemeProvider, lightTheme, Balance, CryptoAddressInput, AmountInput } from '@tetherto/wdk-uikit-react-native'\n\nexport function WalletScreen() {\n  const [balance, setBalance] = React.useState\u003cnumber | null\u003e(null)\n  const [error, setError] = React.useState\u003cstring | null\u003e(null)\n\n  React.useEffect(() =\u003e {\n    async function bootstrap() {\n      try {\n\n        const wdkWithWallets = new WDK('your seed phrase')\n          .registerWallet('bitcoin', WalletManagerBtc, { provider: 'https://blockstream.info/api' })\n\n        const accounts = await wdkWithWallets.getAccount('bitcoin', 0)\n        const address = await accounts.getAddress()\n        const balance = await accounts.getBalance()\n\n        setBalance(balance)\n      } catch (e: any) {\n        setError(e?.message ?? 'Unknown error')\n      }\n    }\n\n    bootstrap()\n  }, [])\n\n  return (\n    \u003cThemeProvider initialTheme={lightTheme}\u003e\n      \u003cCryptoAddressInput onQRScan={() =\u003e {/** do something */}} /\u003e\n      \u003cAmountInput\n        label=\"Enter Amount\"\n        tokenSymbol=\"BTC\"\n        value={amount}\n        onChangeText={setAmount}\n        tokenBalance={balance ?? '0'}\n        inputMode={'token'}\n        onUseMax={() =\u003e setAmount(balance ?? 0)}\n      /\u003e\n      \u003cBalance value={balance ?? 0} currency=\"BTC\" /\u003e\n    \u003c/ThemeProvider\u003e\n  )\n}\n```\n\n## 📚 Components\n\n| Component | Description |\n| --- | --- |\n| `AmountInput` | Numeric input with token/fiat toggle, balance helper and Max action. |\n| `AssetSelector` | Token search \u0026 pick list with recent items and empty states. |\n| `NetworkSelector` | Network picker with gas level indicators and colors. |\n| `Balance` | Displays a balance value with optional masking and custom loader. |\n| `CryptoAddressInput` | Address input with QR scan and paste helpers, validation state. |\n| `QRCode` | QR renderer for addresses/payment requests with labeling and styling. |\n| `TransactionItem` | Single transaction row (sent/received) with token, amounts, network. |\n| `TransactionList` | Virtualized list of transactions using `TransactionItem`. |\n| `SeedPhrase` | Grid of seed words with optional editing and loading states. |\n\n## 🧾 Component APIs\n\nEach 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.\n\n### AmountInput\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| label | string | no | 'Enter Amount' | Field label |\n| value | string | yes | — | Amount text |\n| onChangeText | (text: string) =\u003e void | yes | — | Called when text changes |\n| tokenSymbol | string | yes | — | Token code, e.g. 'ETH' |\n| tokenBalance | string | yes | — | Token balance (e.g. '1.23') |\n| tokenBalanceUSD | string | yes | — | Balance in fiat (e.g. '$4200.00') |\n| inputMode | 'token' | 'fiat' | yes | — | Current input mode |\n| onToggleInputMode | () =\u003e void | yes | — | Switch token/fiat |\n| onUseMax | () =\u003e void | yes | — | Fill with max amount |\n| error | string | no | — | Error message |\n| editable | boolean | no | true | Disable input when false |\n\n### AssetSelector\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| tokens | Token[] | yes | — | Full list of tokens to display/filter |\n| recentTokens | string[] | yes | — | Array of recent token names to show in the Recent row |\n| onSelectToken | (t: Token) =\u003e void | yes | — | Called when user picks a token; disabled when `hasBalance` is false |\n\n`Token` type:\n\n```ts\ntype Token = {\n  id: string\n  symbol: string\n  name: string\n  balance: string\n  balanceUSD: string\n  icon: ImageSourcePropType\n  color: string\n  network?: string\n  hasBalance: boolean\n}\n```\n\n### Balance\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| value | number | no | 0 | Balance number |\n| isLoading | boolean | no | false | Show loader state |\n| Loader | React.ComponentType | no | — | Custom loader component |\n| showHide | boolean | no | true | Toggle hide/show balance |\n| currency | string | no | 'USD' | Currency label |\n| EyeOpenIcon | React.ComponentType | no | default | Shown when hidden |\n| EyeClosedIcon | React.ComponentType | no | default | Shown when visible |\n\n### CryptoAddressInput\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| label | string | no | 'Recipient Address' | Field label |\n| value | string | yes | — | Address text |\n| onChangeText | (text: string) =\u003e void | yes | — | Called when text changes |\n| placeholder | string | no | 'T08p3BGPIuh1l934IIflu....Kc2GXhKc' | Hint text |\n| onPaste | () =\u003e void | no | — | Paste action handler |\n| onQRScan | () =\u003e void | no | — | Open QR scanner |\n| editable | boolean | no | true | Disable input when false |\n| error | string | no | — | Error message |\n\n### QRCode\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| value | string | yes | — | Data to encode |\n| size | number | no | 200 | QR side in px |\n| color | string | no | theme.primary | Dot color |\n| backgroundColor | string | no | 'transparent' | Background behind QR |\n| label | string | no | — | Optional title above QR |\n| containerStyle | ViewStyle | no | — | Wrapper style |\n| labelStyle | any | no | — | Style for label |\n\n### TransactionItem\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| transaction | { id: string; token: string; amount: string; fiatAmount: string; fiatCurrency: string; network: string; type: 'sent' | 'received' } | yes | — | Transaction data |\n| onPress | () =\u003e void | no | — | Row press handler |\n\n### TransactionList\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| transactions | Transaction[] | yes | — | List of transactions |\n\n### NetworkSelector\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| networks | { id: string; name: string; gasLevel: 'High' | 'Normal' | 'Low'; gasColor: string; icon: string | any; color: string }[] | yes | — | Networks to pick from |\n| onSelectNetwork | (network: Network) =\u003e void | yes | — | Called when a network is chosen |\n\n### SeedPhrase\n\n| Prop | Type | Required | Default | Notes |\n| --- | --- | --- | --- | --- |\n| words | string[] | yes | — | Seed words list (12/24, etc.) |\n| editable | boolean | no | false | Allow editing inputs |\n| onWordChange | (index: number, word: string) =\u003e void | no | — | Called on word edit |\n| onKeyPress | (index: number, key: string) =\u003e void | no | — | Handle key press (e.g. Backspace navigation) |\n| isLoading | boolean | no | false | Show generating/loading state |\n\n\n## 🎨 Theming\n\nUse a built-in theme or create one from your brand. The theming system is lightweight and flexible:\n\n- Follow system light/dark or force a mode\n- Start with `lightTheme`/`darkTheme`, or generate from brand colors via `createThemeFromBrand`\n- Access theme values anywhere with `useTheme`\n- Customize visuals globally with `componentVariants` and surgically with `componentOverrides`\n\nSee full guidance in [`THEME_USAGE.md`](./THEME_USAGE.md).\n\n```tsx\nimport { ThemeProvider, darkTheme, createThemeFromBrand } from '@tetherto/wdk-uikit-react-native'\n\nconst brandTheme = createThemeFromBrand({\n  primaryColor: '#0F62FE',\n  secondaryColor: '#6F6F6F',\n  fontFamily: { regular: 'System', bold: 'System' },\n}, 'light')\n\nexport function Root() {\n  return (\n    \u003cThemeProvider initialTheme={brandTheme /* or darkTheme */}\u003e\n      {/* your UI */}\n    \u003c/ThemeProvider\u003e\n  )\n}\n```\n### Theme API\n\nKey types: `Theme`, `ThemeMode`, `ColorPalette`, `Typography`, `Spacing`, `BorderRadius`, `ComponentVariant`, `ComponentOverrides`, `BrandConfig`.\n\n`Theme` shape:\n\n```ts\ntype Theme = {\n  mode: 'light' | 'dark' | 'auto'\n  colors: ColorPalette\n  typography: Typography\n  spacing: Spacing\n  borderRadius: BorderRadius\n  componentVariants?: ComponentVariant\n  componentOverrides?: ComponentOverrides\n}\n```\n\n`BrandConfig` for `createThemeFromBrand`:\n\n```ts\ntype BrandConfig = {\n  primaryColor: string\n  secondaryColor?: string\n  fontFamily?: {\n    regular?: string\n    medium?: string\n    semiBold?: string\n    bold?: string\n  }\n}\n```\n\nNotes:\n- `mode` can be 'light', 'dark', or 'auto' (follows system settings).\n- `componentVariants` sets default variants/styles per component key (e.g., `AmountInput.default`, `TransactionItem.compact`).\n- `componentOverrides` enables targeted overrides for specific component parts (e.g., paddings, font sizes, colors).\n\nKey theme pieces at a glance:\n\n| Token | Purpose |\n| --- | --- |\n| `colors` | Brand palette and semantic UI colors. |\n| `typography` | Font families, sizes, weights. |\n| `spacing` | Consistent spacing scale for paddings/margins. |\n| `borderRadius` | Rounded corners scale. |\n| `componentVariants` | Default visual variants by component. |\n| `componentOverrides` | Fine-grained style overrides by component part. |\n\n\n## 🧪 Full Example Integration\n\nCheck the [WDK React Native Starter Wallet](https://github.com/tetherto/wdk-starter-react-native), a complete wallet application built with WDK and WDK UI Kit.\n\n## 🛠️ Development\n\n```bash\nnpm install\nnpm run lint\nnpm test\n```\n\n## 📜 License\n\nThis project is licensed under the Apache-2.0 - see the [LICENSE](LICENSE) file for details.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n- Read the [code of conduct](CODE_OF_CONDUCT.md)\n- See [contributing guide](CONTRIBUTING.md)\n\n## 🆘 Support\n\nFor support, please open an issue on the GitHub repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftetherto%2Fwdk-uikit-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftetherto%2Fwdk-uikit-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftetherto%2Fwdk-uikit-react-native/lists"}