Setting up a front end#

As an alternative to interacting with smart contracts directly, users might have a better experience using a web-based application.

For the Piggybank example, such an application is available in this repository. The application is able to perform contract updates on behalf of the user, either using the Concordium Wallet for Web or Concordium Wallet for Android via Wallet Connect (v2).

The wCCD tutorial part 3 explains how to set up the Concordium Wallet for Web. Wallet Connect is currently supported by the Concordium Wallet for Android. iOS support will be added in the near future.

The steps for setting up the Piggybank dApp are very similar to the wCCD tutorial, only with the repository linked above.

The complete minimal steps for running the dApp in development mode are:

$ git clone https://github.com/Concordium/concordium-dapp-piggybank.git
$ cd concordium-dapp-piggybank
$ yarn
$ yarn start

This starts a local server running on port 3000 and opens the application in your default web browser.

The repository documentation describes how to build the application for production, optionally into a Docker image.

For instructions about how to connect either the Concordium Wallet for Web or Concordium Wallet for Android to a dApp, see Connect dApps.