Setting up the front end#
In this part, you will create a web front end. Users can interact with the smart contract more easily using a front end compared to interacting with the node directly. Non-tech users might find it inconvenient to interact with smart contracts via the Concordium node and some users may choose not to host their own Concordium node locally. This tutorial part shows you a setup that eliminates the need for the user to host their own Concordium node.
You can lower the bar for entry by coding an appealing front end that provides additional information to your potential customers. Web front ends are a familiar sight nowadays, but to use the front end, users will also need to download a web wallet as a browser extension. The installation and safe usage of the Concordium Wallet for Web might be new for people using your front end. Providing comprehensive explanations and step-by-step guides on your website on topics related to the Concordium Wallet for Web is important for a good user experience. The Concordium Wallet for Web connects via HTTPS to a server that is connected to a Concordium node. This setup alleviates the need for the user to host their own Concordium node.
Note
Before you start with part 2 of this tutorial, make sure you have:
access to the a chromium web browser on your computer
Node.js is a JavaScript runtime environment and yarn is a package manager
used in combination with node.js. You can download node.js and
yarn on their official websites.
Concordium Wallet for Web#
A web wallet is a piece of code that can be added as an extension to supported browsers such as Chrome.
The web wallet allows you to interact with the chain and make transactions.
Currently, the Concordium Wallet for Web does this by connecting to a (gRPC) server that communicates with a node.
The Concordium Wallet for Web hosts the private keys corresponding to the accounts of the user.
Your front-end code that is run in the browser constructs the transaction object
and sends it to the Concordium Wallet for Web. The transaction object is signed by the private key hosted in the Concordium Wallet for Web
and transmitted to the server via HTTPS. This server has access to a Concordium node and converts
the request (including the signed transaction object) that comes via HTTPS from the Concordium Wallet for Web
to a request that the Concordium node can execute. The signed transaction is
transmitted via peer-to-peer communication to other Concordium nodes and becomes
part of the Concordium blockchain.
Installation#
You are ready now to install the Concordium Wallet for Web. Install the extension for your browser as described here.
The Concordium Wallet for Web connects to a server hosted by Concordium which will take care of the Concordium node on your behalf.
You are ready now to start the Concordium Wallet for Web by clicking on the Concordium icon at the top right of the
Chromebrowser.
Note
The puzzle icon at the top right of the
Chromebrowser allows you to manage your browser extensions. You can enable pinning of the Concordium Wallet for Web.
Create a new account on testnet by going through the setup steps of the Concordium Wallet for Web. You have to choose a password to secure your Concordium Wallet for Web. This password is needed to log in to your Concordium Wallet for Web.
The Concordium Wallet for Web creates a unique secret recovery phrase. Write down the secret recovery phrase and keep it in a safe place to be able to recover your accounts in case you lose access to your device.
You have completed the setup. Check that your Concordium Wallet for Web is connected to the testnet.
Before you can create a new account. You need to create an identity.
You are ready now to create a new account on testnet.
You completed the Concordium Wallet for Web setup. Send some CCD to your new account or request some CCD from the testnet faucet button within the Concordium Wallet for Web. Check that your account balance is displayed and you have enough CCD to be able to execute transactions.
Note
You are connected to a website with your Concordium Wallet for Web when you see the green
Connectedbutton. You can toggle on/off the connection by clicking on the button.
You can find more information on how to set up the Concordium Wallet for Web in Setup the Concordium Wallet for web.
Running the web front end#
You have successfully added the Concordium Wallet for Web to your browser in the previous section.
In the next step of the tutorial, you are going to clone a voting demo front end written with the React library
and run it locally. The demo front end has the required packages installed to connect to the Concordium Wallet for Web
and implements common flows to deal with the different states that the Concordium Wallet for Web could be in. For example,
the front end will display a connect wallet button when loading the website. Furthermore, the front end has flows
to react to the events when the user switches the account in the browser wallet or
connects/disconnects an account in the Concordium Wallet for Web to update the front-end state accordingly.
Note
React is a popular open-source front-end JavaScript library.
Clone this repository.
$git clone https://github.com/Concordium/concordium-browser-wallet/tree/main/examples/voting
Build and run the front end as described below:
Run
yarnin the root folder to install all dependencies.
$yarn
Run
yarn buildto build the package.
$yarn build
Navigate to the voting example folder.
$cd ./examples/voting/
Run
yarn watchto enable hot-reload (useful for development) of the web front end whenever you do any changes to the code.
$yarn watch
Run
yarn startin another terminal to start the web front end.
$yarn start
This command logs a URL in the console (typically http://127.0.0.1:8080). Open this URL in the Chrome browser.
Note
Check that your Concordium Wallet for Web is connected to the testnet and not to mainnet.
You completed the local front end setup. You are running your own local dApp now. If you want, you can compare it with Concordium’s voting dApp hosted on testnet. You can use your Concordium Wallet for Web to connect to the dApp.
