Building UI Overview

​

What this section is

The JavaScript SDK is headless: it gives you the logic for auth, wallets, and money movement, and you build the interface. Building UI is a set of end-to-end guides that show how to turn that logic into real flows — signing a user in, connecting a wallet, confirming a transaction, running a swap — with copy-and-adapt examples for both vanilla TypeScript and React. Each guide is task-focused: it states its prerequisites, walks the flow step by step with TypeScript and React tabs, and ends with an error table and related pages. In a React web app, you can skip building some screens. React UI components (@dynamic-labs-sdk/react-ui) provide prebuilt widgets for connecting a wallet and for running a Flow payment, and you can change their text and styles.

​

How the SDK maps to UI

Every guide reuses the same mental model, so once you’ve built one flow the rest feel familiar:

• Each action is a plain async function. Call it from vanilla TypeScript, or use its matching React hook (fn ↔ useFn). Reads map to query hooks; actions map to mutation hooks.
• Auth and wallet state come from the SDK. Read the signed-in user and their wallets from SDK state (and, in React, the corresponding hooks) rather than tracking it yourself.
• Every guide assumes a created, initialized client. Set the client up once at startup — see Creating a Dynamic client and Initializing the Dynamic client.

​

The pages

The guides follow the journey you actually build, from first sign-in through moving money.

​

React UI

Prebuilt React components for web apps.

• React UI components
• Connect wallet widget
• Flow payment widget
• Text keys

​

Authentication

Getting a user signed in — the entry point of every app.

• Email & SMS OTP sign-in
• Social sign-in & OAuth redirect handling
• Passkey sign-in & registration

​

Right after login

Bootstrapping the session once the user is authenticated.

• Post-login user setup
• Account conflict resolution
• Account merging

​

Wallets

Connecting, displaying, and transacting with wallets — the core of a web3 app.

• Connecting external wallets
• Connect wallet widget (prebuilt, React)
• Connected wallets management
• Token balances & display
• Transaction confirmation & simulation
• Network switching & validation

​

Embedded wallet lifecycle

Securing, backing up, and maintaining Dynamic embedded wallets.

• Embedded wallet password & security
• Wallet backup & recovery
• Embedded wallet delegated access
• Upgrading legacy embedded wallets to Dynamic WaaS

​

Advanced auth & identity

Higher-assurance authentication and account management.

• MFA enrollment & management
• Step-up authentication
• Device registration
• User profile & settings
• Handling blocked wallets

​

Money movement

Funding wallets and moving value.

• Funding flows
• Building a swap UI
• Build a custom Flow payment UI
• Flow payment widget (prebuilt, React)

​

What to expect from the examples

• UI-agnostic. Examples focus on the SDK logic and state, not styling — bring your own components and CSS.
• Both tabs, every page. A TypeScript tab for any framework and a React tab using hooks.
• React UI pages are the exception. They document prebuilt React components, so their examples are React only.

​

Where to go next