---
title: "1. Radix dApp Toolkit"
path: "/developers/frontend/01-radix-dapp-toolkit"
version: "1.1.0"
author: "Hydrate"
createdAt: "2026-02-19T06:11:26.721Z"
updatedAt: "2026-03-16T18:21:03.330Z"
---

# 1. Radix dApp Toolkit

<Infobox>
| **Building a Frontend dApp** |
| Difficulty | Intermediate |
| Est. Time | 60–90 minutes |
| Prerequisites | Node.js, a [deployed Scrypto package](/developers/getting-started/03-deploying) |
| Language | TypeScript / JavaScript |
| Key Library | [@radixdlt/radix-dapp-toolkit](https://www.npmjs.com/package/@radixdlt/radix-dapp-toolkit) |
| Scaffolding | `npx create-radix-app@latest` |
| Official Docs | [Building a Frontend dApp](/developers/legacy-docs/build/build-dapps/dapp-application-stack/building-a-frontend-dapp) |
</Infobox>

## Introduction

A Radix dApp consists of two layers: on-ledger [blueprints](/contents/tech/core-concepts/blueprints-and-packages) deployed as [Scrypto](/developers/legacy-docs/updates/roadmap/scrypto/scrypto) packages, and an off-ledger frontend that connects to the user's [Radix Wallet](/contents/tech/core-protocols/radix-wallet) to sign and submit transactions. The [Radix dApp Toolkit (RDT)](https://github.com/radixdlt/radix-dapp-toolkit) is the official TypeScript library that handles wallet connection, session management, data requests, and transaction submission. This guide covers integrating RDT into a web application.

## Project Setup

The fastest way to start is the official scaffolding tool:

`npx create-radix-app@latest`
This generates a project with RDT pre-configured, the Connect Button wired up, and example transaction code. Alternatively, add RDT to an existing project:

`npm install @radixdlt/radix-dapp-toolkit`
### Initialising the Toolkit

Create an RDT instance with your dApp's configuration:

```
import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'

const rdt = RadixDappToolkit({
  dAppDefinitionAddress: 'account_rdx...', // your dApp definition account
  networkId: RadixNetwork.Stokenet,         // or RadixNetwork.Mainnet
  applicationName: 'My dApp',
  applicationVersion: '1.0.0',
})
```

The `dAppDefinitionAddress` is a Radix account that you own, registered as your dApp's identity through the [Developer Console](https://console.radixdlt.com/) metadata settings. This is how the wallet identifies your application to the user.

## Wallet Connection & Authentication

RDT provides the **√ Connect Button**, a framework-agnostic web component that handles the full wallet connection flow:

```
<!-- Add to your HTML -->
<radix-connect-button />
```

When a user clicks the button, RDT coordinates with the [Radix Wallet Connector](https://chromewebstore.google.com/detail/radix-wallet-connector/bfeplaecgkoeckiidkgkmlllfbaanlkl) browser extension to establish a connection to the user's mobile wallet. The user authenticates using a **Persona** — a reusable identity that can share selected accounts and personal data with your dApp.

### Requesting Account Data

Configure what data your dApp needs at connection time:

```
import { DataRequestBuilder } from '@radixdlt/radix-dapp-toolkit'

rdt.walletApi.setRequestData(
  DataRequestBuilder.accounts().atLeast(1),
  DataRequestBuilder.persona().withProof(),
)
```

This asks the user to share at least one account address and a cryptographic proof of Persona ownership. For [ROLA (Radix Off-Ledger Authentication)](/contents/tech/core-protocols/rola-authentication), provide a challenge generator that fetches a 32-byte hex challenge from your backend:

```
rdt.walletApi.provideChallengeGenerator(async () => {
  const res = await fetch('/api/auth/challenge')
  return (await res.json()).challenge
})
```

## Submitting Transactions

Radix transactions are built using [transaction manifests](/contents/tech/core-protocols/transaction-manifests) — a declarative syntax that describes what the transaction should do. Your dApp sends a manifest *stub* to the wallet; the wallet completes it by adding fee payment and any user-specified assertions.

```
const result = await rdt.walletApi.sendTransaction({
  transactionManifest: `
    CALL_METHOD
      Address("component_rdx...")
      "buy_token"
      Decimal("100")
    ;
    CALL_METHOD
      Address("${accountAddress}")
      "deposit_batch"
      Expression("ENTIRE_WORKTOP")
    ;
  `,
})
```

The user reviews the transaction in their wallet — seeing exactly which assets move where — signs it, and the wallet submits it to the network. Your dApp receives a transaction hash that you can track via the [Gateway API](/contents/tech/core-protocols/radix-gateway-api).

### Reacting to Wallet Data

Subscribe to wallet state changes to update your UI in real time:

```
rdt.walletApi.walletData$.subscribe((walletData) => {
  const accounts = walletData.accounts
  // Update UI with connected accounts
})
```

## External Links

- [Radix dApp Toolkit — GitHub](https://github.com/radixdlt/radix-dapp-toolkit)

- [@radixdlt/radix-dapp-toolkit — npm](https://www.npmjs.com/package/@radixdlt/radix-dapp-toolkit)

- [Building a Frontend dApp — Official Docs](https://docs.radixdlt.com/docs/building-a-frontend-dapp)

- [Run Your First Frontend dApp — Official Docs](https://docs.radixdlt.com/docs/learning-to-run-your-first-front-end-dapp)

- [Radix Wallet SDK — GitHub](https://github.com/radixdlt/wallet-sdk)