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

For this tutorial, we’ll be building an application that can connect to an Algorand test wallet, access the account and balance information, and fund that test 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.

To accomplish this we’ll be using Reach, Algosigner, and Svelte all of which map to the three following prerequisites for this tutorial: 1) Reach Proper set up on your machine, 2) the Algosigner extension installed plus creating a test wallet with it (with phrase kept nearby for use in this tutorial), and 3) create-svelte-app installed globally on your machine. Once all those are complete, you are ready to begin the tutorial.

To begin, we’ll open up VS Code, open up the terminal, run cd desktop (or whichever folder you want to put this project in), then run svelte create connectWallet, and select sveltejs/template-webpack from the prompt. This will create a Svelte project boilerplate which we’ll use for this tutorial.

Once we’ve opened up that project in VS Code, we’ll open up the terminal again and type in yarn add @reach-sh/stdlib ; this will bring in the Reach library that is crucial to this project. It will take a while to install (it’s also installing the rest of the packages), but once it does we’ll move to the src/App.svelte file and set up the following so that we can use it:

With that integrated, we’ll remove this boilerplate HTML, replace it with a div, and put a button inside that div that on click will call a connectWallet function. While we are at it, we will remove the style tags and all their contents (this will avoid some warnings that show up because of removing the boilerplate HTML).

While we’ll set up a connectWallet function in the script tag, we won’t give it any content yet, that’s because it will be calling two helper functions from it later on in the tutorial: getAccount and getBalance .

The getAccount function is fairly simple. The first part of it is a call reach.createAccount and assigning its result to an account variable (which we’ll create later); this will create a test wallet that we can fund later. The second part is just a console.log which will help us verify we pulled in the account object.

The getBalance function is a bit more complex. First, we call reach.balanceOf on the account object and assign its result to a local rawBalance variable. The reason we do this is that the result of reach.balanceOf is in microAlgos by default; in our next step, we take care of this fact by running rawBalance through reach.formatCurrency, which turns it into a balance in Algos that we can assign to our balance variable. Lastly, we’ll console.log the balance variable much like we console.log the account variable in the prior function.

Now we’ll bring in the account and balance variables, call the getAccount and getBalance function from connectWallet , and our file should end up looking like this:

However, we can’t run the program just yet; first, we need to install Reach proper so we can fire up an Algorand testnet. To do this we’ll open a wsl terminal in VS Code, run cd src , and then run this command curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reach (courtesy of the Reach docs). Now with Reach Proper installed, we can start up an Algorand testnet with REACH_CONNECTOR_MODE=ALGO ./reach devnet . To start up the frontend of our application, we’ll open a normal terminal, run yarn dev, and navigate to the localhost link it posts to see how our application looks.

It’s not much, but this tutorial is about functionality and not style; to interact with it we’ll click the “connect wallet” button,

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

Enter our phrase (or click cancel if you want the application to generate and use a temp wallet exclusive to this 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

And success! Our application connected to the wallet and pulled in the account and balance information! Now to fund the wallet.

To start with, we’ll add a bit more to the HTML in the form of a new div, an input inside that div bound to a fundAmount variable, and a button below that input that calls a fundWallet function on click:

The fundWallet function is fairly lean: we call reach.fundFromFaucet give it the account variable, and also give it the fundAmount variable (but only after we have run it through reach.parseCurrency to convert it from Algos to microAlgos). Then we’ll call the getBalance function to update the balance that the application is aware of and let us know the wallet has been funded.

Lastly, we’ll integrate that fundAmount variable, which should leave our file looking like this, and we are now ready to test the funding functionality.

Like before we’ll click the “connect wallet” button, decide on whether we’ll use a phrase or generate a temp wallet, and verify we are getting the account and balance info.

To test the funding feature, however, we’ll enter in a value such as 5, click “fund wallet,” and in a few seconds…

Excellent! Our test wallet received the test funds!

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!