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

For this tutorial we’ll be creating a basic Algorand wallet connect/fund application using Algosigner, Reach, and Angular; this application will allow a user to connect to a throwaway test wallet and then deposit test funds in that wallet.

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.

Before we begin, there are three prerequisites for this tutorial: 1) setting up Reach proper, 2) installing Algosigner plus creating a throwaway test wallet and keeping its phrase on hand, and 3) setting up Angular Cli on your machine. Once those are complete, you can begin the tutorial.

To start, we’ll open VS Code, open a terminal, type in cd desktop (or whichever folder you’d prefer to put this project in), type in ng new --minimal connectWallet, select “no Angular routing” and whichever style system you prefer when prompted, and then open the connectWallet folder/project it creates.

Inside that project, we’ll bring in the Reach library with npm i @reach-sh/stdlib Once that finishes installing, we’ll open up the src/app/app.component.ts file and implement the library like so:

With that established, we’ll remove the boilerplate HTML and swap in a div plus a button that will call the connectWallet function on click:

On to functionality! We’ll create the connectWallet function like in this gist below; currently its empty because it’ll be occupied by calls to two helper functions: getAccount and getBalance

getAccount will use the reach.createAccount function to create a test account and assign the account object to the local variable account. After that, it’ll console.log it so that we can confirm that the function was successful.

getBalance is a bit more complex. We’ll create a local rawBalance variable that will hold the output of reach.balanceOf. When we use this Reach function we don’t get a balance back in Algos but in microAlgos; to translate the rawBalance variable, we use reach.formatCurrency on the line below it and assign the output (now in Algos) to the balance variable. Lastly, we console.log the balance to verify it was successfully retrieved.

Now to link all these pieces together, we’ll create the two variables used in the aforementioned functions, await both functions from the connectWallet function, and end up with a file that looks something like this:

Before we can run this program we need to install Reach proper into our project so that we can fire up an Algorand testnet. To do that, we’ll open up a wsl terminal in VS Code, run cd src , and then run curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reach (courtesy of the Reach docs); with that installed we can now run REACH_CONNECTOR_MODE=ALGO ./reach devnet

With the testnet up and running, we can go back to a normal terminal, run ng serve , open up the localhost link it gives us, and see how our application works.

Alright, here inside the application we can see… not much to be honest, but this a functional tutorial and not a style one; moving on, let’s click this, “connect wallet,” button and see what happens.

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

And there is the input prompt to enter our throwaway test wallet phrase; as you can see, we can also click cancel to generate a temporary test 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

Success! Inputting our phrase connected our application to the wallet and we can now see the account object and the wallets balance.

Connecting a wallet is all well and good but funding was the other key portion of this tutorial. To start work on that, we’ll add in some additional HTML:

Here we have a new button, calling the fundWallet function on click, seated below a new input that ties its value by way of ngModel to the fundAmount variable. To use ngModel, we’ll need to go over to the src/app/app.module.ts file and bring in FormsModule in the imports list. Once that’s done we can move on to the function:

fundWallet is a rather simple function: first it will call the reach.fundFromFaucet on the account object and the fund amount variable (translated back into microAlgos with reach.parseCurrency); then, it will call the getBalance function to showcase the updated balance.

With those pieces in place, and the fundAmount variable added to our component, the final version of the file should look something like this:

Now let’s see how it works in action:

We start with the same steps as before, clicking the connect wallet button, deciding how to connect using the prompt, and observing the console to verify the account object and balance are present:

Now though, we can enter a value in this new field; so we’ll give it five, click the “fund wallet” button, and in a few seconds…

Excellent! Our balance has updated and therefore our wallet connect/fund system is complete!

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) with Reach 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!