Connecting/Funding an Algorand (test) Wallet from a VanillaJS + Parcel + Reach Application

Today we’ll be creating a basic wallet connect/fund system with a combination of Reach, Algosigner, and VanillaJS + Parcel. This project will allow us to connect a web application to a throwaway test wallet and add test funds to it.

UPDATE — 12/3/2021: to get this tutorial to work a bit better I switched from using getDefaultAccount to createAccount. This eliminates all signing events making testing dapps a breeze. This also means you can ignore that Algosigner requirement below.

Some prerequisites before you begin; this tutorial assumes you’ve already setup Reach proper plus installed Algosigner, created a throwaway test wallet with it, and kept the wallet phrase on hand (it’ll be used later in this tutorial); if you’ve completed both of those, then let’s get started.

To begin we’ll open up VS Code, open a terminal therein, run cd desktop to get to our preferred folder (or whichever command gets you to your preferred folder), and then run mkdir connectWallet. This will give us a folder to open in VSCode where we can continue to build the project. With that folder opened, and another terminal open, we’ll run npm init -y (the -y just auto-accepts all the init questions) and complete the foundation of our project.

Before we build out the folder structure, we are going to run new-item .babelrc to create that file and then add this object to it:

That will come into play later when we integrate Parcel, now on to the folder structure. First, we’ll create a parent folder with mkdir src, cd into that, and make an index.js and index.html file using the new-item command. Next, we’ll run yarn add -D parcel-bundler to bring in our bundler of choice.

Once that finishes installing we’ll open up the package.json file and make these edits to the scripts object:

However, once we finish, remember to close the file as future edits, by way of the terminal, can cause a version control issue if you leave it open. Now onto the HTML.

Inside the index.html file we’ll type in html:5 and hit enter to get a boilerplate, set up a basic button (that calls connectWallet on click) inside a div, and use a script tag to connect to the index.js file like so:

Before we head over to the index.js file, let’s run yarn add @reach-sh/stdlib

Now inside the index.js file, we are going to start by importing the library above using the following method:

We’ll work our way back to that import; for now, we’ll establish the onload functionality and the foundation of the connectWallet function:

Seems kind of empty, but there’s a reason for that: the connectWallet function will call two helper functions getAccount and getBalance; these two functions will use the reach library to perform the two actions they are describing.

First the getAccount function; it’s rather simple, we use the reach.createAccount function to create an account and then console.log the variable so we can see the functions output.

The getBalance function is a tiny bit more complicated. We start by getting the wallet’s balance with reach.balanceOf; however, it’s in microAlgos, so we need to convert it to Algos’ using reach.formatCurrency. As before, we console.log the balance to view it in the final application.

Now we can await both of those functions inside connectWallet, setup the account and balance variables above it, all resulting in our index.js file looking like this:

However, we can’t test it just yet; we need to integrate reach proper so that we can stand up an Algorand testnet for our application. To do that, we’ll open up a wsl terminal in VSCode, run cd src , and paste in this command curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reach (courtesy of the reach docs).

With that installed, and from the same wsl terminal, we can now run REACH_CONNECTOR_MODE=ALGO ./reach devnet to stand up the Algorand testnet. Move over to a regular terminal, run yarn dev ,travel to the localhost link it returns, and we can now view our application.

Not much to look at, but let’s see what the button does.

UPDATE — 12/3/2021: due to changing this tutorial to use createAccount instead of getDefaultAccount you will no longer see this popup.

Alright, now we’ll enter our throwaway test wallet phrase… (or click cancel to generate a temp wallet just for this browser session)

NOTE: This prompt isn’t what the user is going to see in your future on-production dapps, it’s just here to speed up development by auto-signing the transactions. To view the other methods of dapp connection available for Algorand, in Reach, please see this page in the Reach docs

Nice! We got the account and balance information for our test wallet.

That was part 1 though, now on to part 2 where we create a system to fund this test wallet.

To start we’ll open index.js and create a new function fundWallet:

This will start with getting the value of an input field we’ll create later and tying it to a local variable called fundAmount. Then we use a parsed version of that local variable, by way of reach.parseCurrency, when calling reach.fundFromFaucet to fund the wallet with the amount specified in the input field. Lastly, we call our getBalance function to update the files balance variable and log the updated balance.

The HTML for this is a bit simpler. Inside of a div adjacent to the existing button, we’ll create an input field with an id of fundAmountInput and a button that onclick calls the fundWallet function we just made; once those parts are put together, our index.html should look like this:

Alright, provided our Algorand testnet is still running along with our application, we can go see how this both looks and works.

Still not much to look at, but this tutorial is about functionality and not style. We’ll repeat the prior steps of clicking the button, clicking cancel to generate the wallet, and verifying that it’s connected by way of the console:

Now though, we can enter a value into the input field, click the fund wallet button, and…

Success! Our connect/fund system is working and we can connect to and fund test wallets!

Now, we have passed through the gate into the kingdom of decentralized app development. With the ability to connect our applications to test wallets and fund them with test funds, we have the basic tools to start creating and testing dapps on Algorand.

However, it’d probably be best to start with the primary tutorial the Reach team put together. It’ll introduce you to the other side of dapp development (namely, the contracts) and it circles back to where you are now on the fronted.

After that, if you want to put a few more feathers of experience in your hat before trying to build one of your designs, the Reach team has a plethora of simple workshops for various dapp projects that have yet to be converted into web apps; these would be a great test of your skill, after completing the primary tutorial, and I highly recommend them.

Remember to join the Reach discord for any further questions and thank you all for reading this!