Create Publication

We are looking for publications that demonstrate building dApps or smart contracts!
See the full list of Gitcoin bounties that are eligible for rewards.

Tutorial Thumbnail
Intermediate · 1 hour

Using VUE.JS and Reach

The business purpose of the tutorial is to teach how the Reach platform can be used on Algorand blockchain development, making it faster and cheaper to develop future Algorand projects. The objective of this tutorial is to teach how to create a transaction using the Reach platform and sending it into the network programmatically. To accomplish this objective, we will use the Reach front-end library to connect to a MyAlgo wallet using the TestNet network and perform a transaction.

Requirements

Requirements
Vue CLI
Vue CLI 4.x requires NodeJS version 8.9 or above
Bootstrap
Font Awesome
Animate.css
Docker
Reach executable
Reach JavaScript standard library
VS Code
Install Vetur for VS code extension

Background

This project will take as base the tutorial from Nicholas Burka “Build a Web dApp Algorand Wallet Interface Using Reach and Vue” you can follow that project here. Here will be using Vue 3 framework with Reach front-end library and other additional libraries like Bootstrap and Font Awesome. So you can more easily jump between the two projects, variable names were preserved.

In this Algorand TestNet Transaction with VUE.JS and Reach Web application, the user can connect to MyAlgo wallet and check wallet balance. After the wallet makes the connection, the user can perform a transaction by pressing the buy button. Here all the backend is compiled by Reach JavaScript.

Steps

1. Setting up Project

First, let’s start to set up the project.
To create an App, with Vue running all, you need to install a CLI command-line interface, using the terminal with this command. Remember: Vue CLI 4.x requires NodeJS version 8.9 or above.

npm install -g @vue/cli  # npm

Note

You can find more information about the Vue CLI at this URL.

2. Creating a Project

I will use a terminal command to create a project, but you can use a GUI or Graphical User Interface.
Once the CLI is installed, you can create a project using the CLI with a vue command and then use the create option with the name of the project you want to create.

cd ~/Desktop
vue create my-app

Vue Version

I will use Vue 3. Press Up Arrows, Down Arrows on the keyboard and select Manual Features.

EditorImages/2021/09/29 14:37/2_1step1.png

Figure 2-1 Pick a preset

Manual Features
Next, choose to go manual so we can select more options.
EditorImages/2021/09/29 14:39/2_2.png
Figure 2-2 Manually select
With your arrows, keys choose the following options using the Spacebar and then press Enter on your keyboard when finished.
EditorImages/2021/09/29 14:39/2_3.png
Figure 2-3 Features
Choose Vue version
EditorImages/2021/09/29 14:41/2_4.png
Figure 2-4 Vue version
CSS Pre-processors
EditorImages/2021/09/29 14:42/2_5.png
Figure 2-5 Sass/SCSS
Linter / Formatter
EditorImages/2021/09/29 14:44/2_6.png
Figure 2-6 ESLint
Babel
EditorImages/2021/09/29 14:45/2_8.png
Figure 2-7 package.json
Finally, once you finish setting things up, you can save your preset.

3. Adding Modules

Note

Before you do the following, make sure you are in the right folder (my-app folder).

Now we need to install some additional libraries to make our project work. You can go to the Requirements links and explore all the libraries that will be using on this project.
On Terminal run the command.

npm i @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome@prerelease bootstrap@next popper.js animate.css

EditorImages/2021/09/29 14:49/3_1.png
Figure 3-1 Additional libraries

4. Reach Installation

Next, we need to install Reach JavaScript standard library, stdlib , using the terminal with this command.

Note

First, make sure you install Docker on Mac or Windows with Docker Desktop.

First, and in the right folder “cd my-app”, install Reach by running on the terminal:

 curl https://docs.reach.sh/reach -o reach ; chmod +x reach

Second, and in the right folder “cd my-app”, install Reach JavaScript standard library by running on the terminal:

npm install @reach-sh/stdlib

EditorImages/2021/09/29 14:53/4_1.png
Figure 4-1 Reach JavaScript standard library

5. MyAlgo Wallet

The Reach team are frequently adding new features, so be sure you are running the last version .

Now on Algorand, it can provide a wallet that directly connects to the Algorand network .

Start to import Reach library and MyAlgoConnect for Algorand in our App.vue file.

import { loadStdlib } from "@reach-sh/stdlib";
import MyAlgoConnect from "@reach-sh/stdlib/ALGO_MyAlgoConnect";

Second, need to specified the network connection and the key to set the wallet fallback to be My Algo used with Algorand TestNet.

const stdlib = loadStdlib("ALGO");

stdlib.setWalletFallback(
  stdlib.walletFallback({
    providerEnv: "TestNet",
    MyAlgoConnect,
  })
);

6. App.vue file

In our App.vue file, we need to add the data and methods to connect to MyAlgo wallet and the code to perform a transaction.

Note

I will preserve the Variables name and Data/Methods so you can more easily compare the Nicholas Burka Vue project.

The Data
data: () => {
    return {
      algodClient: undefined,
      acc: undefined,
      acc2: undefined,
      addr: undefined,
      balAtomic: undefined,
      bal: undefined,
      faucetLoading: false,
    };
  },

Variables Names meaning.

acc - The default account will be connected to a wallet.
acc2 - Returns a Reach receiver account.
addr - Wallet address
balAtomic - The balance of network token
bal - Formatted balance of the wallet

The methods

WalletConnect
Now, connect MyAlgo Wallet.
First, we need to set the default account to MyAlgo Wallet (sender account). Next, add your address (public key) for the receiver.
The balance of your wallet will be presented on screen.

async WalletConnect() {
      try {
        this.acc = await stdlib.getDefaultAccount();
        this.acc2 = await stdlib.connectAccount({
          addr: "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA",
        });
        this.addr = stdlib.formatAddress(this.acc.getAddress());
        this.balAtomic = await stdlib.balanceOf(this.acc);
        this.bal = String(stdlib.formatCurrency(this.balAtomic, 4));
      } catch (err) {
        console.log(err);
      }
    },

Transaction

Reach will perform the transaction with the transfer expression. The “stdlib.transfer” will perform a transfer of network tokens from the Default Account (sender) “acc” to the receiver account “acc2” with the amount established “algoValue”.

async BuyNFT() {
      this.faucetLoading = true;
      try {
        const algoValue = 1000000;
        await stdlib.transfer(this.acc, this.acc2, algoValue);

        this.updateBalance();
      } catch (err) {
        console.log(err);
      }
      this.faucetLoading = false;
    },
  },
};

7. Wallet.vue file

Components
First, delete HelloWorld.vue component and create a new component Wallet.vue.

All the UI and the frontend interface will be created and presented on the web browser.
We need to create a button to connect with MyAlgo wallet “TestNet” and a button to perform the transaction. Then we need to present the balance and the account address.

Note

The v-if directive will display an element if the expression is true.

<template>
  <div id="wallet">
    <p>Connect your Wallet</p>
    <div class="col-1 m-auto" id="wallet">
      <button class="btn btn-success" v-on:click="WalletConnect()">
        <fa icon="wallet" /> Wallet
      </button>
    </div>
    <div class="img-fluid max-width: 50%" alt="Responsive image" id="wallet">
      <table class="table">
        <tbody>
          <tr>
            <td>
              <img
                class="img-fluid img-thumbnail"
                src="../assets/AlgoInclusionNft.jpg"
                alt="Ballon NFT"
              />
            </td>
            <td>
              <div v-if="addr">
                <p id="addr">{{ addr }}</p>
                <p id="bal">{{ bal }} ALGO Available</p>

                <div id="transaction">
                  <button class="btn btn-info" v-on:click="BuyNFT()">
                    <fa icon="shopping-cart" /> Buy NFT
                  </button>
                  <p>(Loading... please wait, devnets only)</p>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

Methods
Here we use a function call when calling the method. On this function, a special $emit variable is added to trigger a new custom event “WalletConnect and BuyNFT” in the parent component.

<script>
export default {
  props: ["addr", "bal", "faucetLoading"],
  methods: {
    BuyNFT: function () {
      this.$emit("BuyNFT");
    },
    WalletConnect: function () {
      console.log("conn");
      this.$emit("WalletConnect");
    },
  },
};
</script>

8. Main.js

Here we need to import some additional libraries to make our project work.
This project has the intention to evolve in the future. First, we import the bootstrap framework to add styles and import Animate.css to get some built-in animation sequences on future parts of this project.
Next, we import the Vue Font Awesome modules so we can use great icons.

import "bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "animate.css/animate.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faShoppingCart } from "@fortawesome/free-solid-svg-icons";
import { faWallet } from "@fortawesome/free-solid-svg-icons";

library.add(faShoppingCart, faWallet);

createApp(App).use(store).component("fa", FontAwesomeIcon).mount("#app");

9. Run and Test

Note

First make sure you add the assets on the ./src/assets folder.

The src attribute contains the path to the image you want to embed. This tutorial has two Images on the src assets folder.

Wallet.Vue component

<img
                class="img-fluid img-thumbnail"
                src="../assets/AlgoInclusionNft.jpg"
                alt="Ballon NFT"
              />

App.Vue component

<img
      class="img-fluid m-auto d-block"
      src="./assets/algorandlogoblack.svg"
      alt="Algorand Logo"
    />

EditorImages/2021/10/09 20:47/9_5Assets.png

Figure 9-1 Add Assets

Note

Fund your account Using Dispenser - TestNet Dispenser link

For TestNet with Reach, we need to fund the account that you want to use as the sender (“getDefaultAccount()”).
When the App start and you click, the Wallet button will start a popup MyAlgo Wallet. Then you select the wallet you want to use as the sender (“getDefaultAccount()”).

this.acc = await stdlib.getDefaultAccount();

EditorImages/2021/10/09 21:04/9_6wallet.png
Figure 9-2 Connect Sender Wallet

Now we are ready to start debugging our project.
Open the Terminal and run de “CD” command to move to the directory you create for this project (my-app folder).
Open two Terminal Tabs.

EditorImages/2021/10/09 21:05/9_7terminaltab.png
Figure 9-3 New Terminal Tab

First, run on Terminal to start the Docker container,

REACH_CONNECTOR_MODE=ALGO ./reach devnet

EditorImages/2021/10/09 21:06/9_8reachdev.png

Figure 9-4 Reach Algo Connector

And then, on the other Tab run serve.

npm run serve

EditorImages/2021/10/09 21:06/9_9serve.png
Figure 9-5 Run Serve

Steps to perform a transaction

EditorImages/2021/10/09 21:08/9_4.png
Figure 9-6 Connect Wallet
EditorImages/2021/10/09 21:08/9_2.png
Figure 9-7 Receiver
EditorImages/2021/10/09 21:08/9_3.png
Figure 9-8 Transaction

10. Github Project

Go to the following link and try the full project.
https://github.com/3dlifee/webViewAlgo.git

Thanks.

Warning: This tutorial is intended for learning purposes only. It does not cover error checking and other edge cases. Therefore, it should not be used as a production application