Integrate AlgoSigner Components Into Your DApp Using React
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 the sample WebApp and launch it using:
$ yarn start
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
- Query historical data from an
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.