Building a Pure Frontend dApp

Overview

A Pure Frontend dApp is the simplest kind of dApp. It has no server backend portion at all – it is a website that connects to a user’s Radix Wallet, gets data from the Radix Network, and proposes transactions to the wallet.

For an overview of dApp types on Radix, see What is a dApp on Radix?.

It’s useful to start with the big picture of the various tools available to you, and how they connect together. The green blocks below are built by you and the blue blocks are existing tools for you to make use of.

pure frontend detail view

Your dApp website project will likely include the Radix dApp Toolkit, which provides a useful combined interface to a √ Connect Button, Wallet SDK, and Gateway SDK. For a pure front-end dApp, the Radix dApp Toolkit handles getting users logged in to your dApp and getting the information your dApp needs from their wallet, as well as automatically providing the user with useful status information. (See these links for more detailed information on installation and usage.)

Details on specific elements within the Radix dApp Toolkit:

The √ Connect Button provides a common, recognizable, Radix-branded UI "button" element that allows your users to easily see that they can connect their Radix Wallet to your website, and provide a familar experience in doing so.

The Wallet SDK is the workhorse for interacting with the Radix Wallet. It provides an interface for making requests to the wallet for various data held there for the user, including account addresses and more – if the user permits it. It also provides an interface for submitting transactions to the Radix Wallet, which then asks the user to review and submit it.

The Gateway SDK is how your dApp can see what’s happening on the network and what the state of things there is. A common pattern would be to ask the Gateway for the resources held in an account address provided to your dApp by the user’s wallet (in response to a Wallet SDK request). Your dApp might use that to show how many tokens they have of a given type to interact with your dApp.

Your frontend dApp may also have an "on-ledger backend" portion on the Radix Network itself. You can build your own powerful automation for assets as a component, written in Scrypto, as well as create assets of your own as "resources". Or third parties may have existing components and resources on the Radix Network that your frontend can interact with.

To group together the website, components, and resources that make up your dApp, you create an on-ledger dApp Definition that the Radix Wallet can recognize as your dApp’s unique identifier and information source.

Once deployed to the Radix Network, your dApp interacts with components by building transaction manifests that it submits (via Wallet SDK) to the Radix Wallet. These transaction manifests can describe how assets move between user accounts and one or more components to perform potentially complex and powerful actions.

Pure Frontend dApp Walkthrough

To see first-hand how to build a pure frontend dApp with these tools, see the following walkthrough on building a simple "gumball machine" dApp, including a Scrypto-based component, and a simple website that connects to the Radix Wallet and Radix Network: