Integrate AlgoSigner Components Into Your DApp Using React

Background

React was the first frontend library to adopt the component-based architecture and today remains one of the most popular for JavaScript developers building WebApps. Often referred to as a web framework, React combined with Node provide the necessary foundation to quickly build out your next DApp and render a fully functional user interface.

AlgoSigner is an Algorand wallet extension for Chrome that lets users review, approve, sign and send transactions generated by your WebApp. Integrating AlgoSigner enables users to retain control of their wallet client-side so your DApp never has access their private keys. Your WebApp builds the unsigned transaction, presents it to the AlgoSigner extension which then displays the fields to the user for review/approval. Once the user clicks “sign” the AlgoSigner extension sends the transaction to the Algorand network.

Getting Started with React and AlgoSigner

The Algorand Developer Relations Team maintain a project to get you started quickly building Simple React Examples Using AlgoSigner. Begin by cloning the repo and navigating to the project directory:

$ git clone https://github.com/algorand/smart-contracts
$ cd devrel/algosigner-react

Adding AlgoSigner into your WebApp using React requires a development environment configured as follows:

• Install Node
• Install create-react-app
• Install Yarn
• Install AlgoSigner (Chrome browser extension)

Install the sample WebApp and launch it using:

$ yarn
$ yarn start

A simple WebApp will launch within your default browser displaying a few React components. To interact, ensure you configure an AlgoSigner wallet with at least one funded account on TestNet.

The React components used to render this page are rather simple. Importantly, these four components demonstrate interactions to:

• Check if AlgoSigner extension installed
• Get available Accounts from AlgoSigner
• Query live blockchain data using an algod endpoint
• Query historical data from an indexer endpoint

Exploring the component definitions we see some of the AlgoSigner parameters exposed. Notice within the GetAccounts method that ledger is assigned to TestNet in this case. Changing this to MainNet would load the relevant accounts from the AlgoSigner extension.

More advanced examples can be loaded by overwriting the App.js file such as:

$ cp src/2-App.js src/App.js
$ # - OR - 
$ $ cp src/3-App.js src/App.js

Loading the 3-App.js file reveals a DApp which is hard coded to appID 13793863 on TestNet. It’s the Hello World smart contract application which implements a global state “counter” to indicate how many times the application has been called by all users and a local state “counter” keeping track for each specific user’s calls.

First, OptIn to the application, then Call it to increment the state counters. Notice the users is prompted to review the contents of the transaction prior to signing. Finally, click the Get Global/Local State buttons to see your results.

The Team at Pure Stake provide additional guidance within this AlgoSigner Tutorial. Have fun building your next DApp using React and AlgoSigner.