|
| 1 | +# Algo Builder Wallet Widget |
| 2 | + |
| 3 | +The purpose of this tutorial is a demonstration of the Algo Builder Wallet Widget integrated with the [@algo-builder/web](https://github.com/scale-it/algo-builder/tree/master/packages/web) package, written in Vue JS. The widget connects to major Algorand wallets (Algo Signer, Wallet Connect, MyAlgoWallet), sign and send transactions constructed with Algo SDK or Algo Builder framework. |
| 4 | + |
| 5 | +### Requirements |
| 6 | + |
| 7 | +- [Vue CLI](https://cli.vuejs.org/guide/installation.html)<br/> |
| 8 | +- [NodeJS](https://nodejs.org/en/download/) > v14.11.0<br/> |
| 9 | +- JavaScript package manager - either [YARN](https://classic.yarnpkg.com/en/docs/install) > v3.1.0 or NPM which comes with NodeJS.<br/> |
| 10 | +- IDE, e.g. [VSCode](https://code.visualstudio.com/download)<br/> |
| 11 | +- Other dependencies are listed in [package.json](https://github.com/scale-it/algo-builder-templates/blob/master/wallet/package.json). Install them with yarn install or npm install.<br/> |
| 12 | + |
| 13 | +### Background |
| 14 | + |
| 15 | +Algorand ecosystem lacks a maintained Vue JS component connected to main Algorand web wallets. |
| 16 | + |
| 17 | +[Algo Builder](https://algobuilder.dev/) is one of the major frameworks for smart contract development and integrations. We took a responsibility to provide the community a Vue JS wallet widget, well integrated with the Algo Builder framework and Algo SDK. |
| 18 | + |
| 19 | +In this tutorial we will create a basic Vue JS web application which connects web wallets and perform a simple transaction (for eg: send Algo or call application). With the wallet widget a user can: |
| 20 | + |
| 21 | +- select a network (such as MainNet, TestNet, BetaNet), |
| 22 | +- switch an account, |
| 23 | +- interact with the web wallet. |
| 24 | + |
| 25 | +### Steps |
| 26 | + |
| 27 | +#### 1. Setup |
| 28 | + |
| 29 | +The source code for this tutorial can be found on GitHub. Start by cloning the repository |
| 30 | + |
| 31 | + git clone https://github.com/scale-it/algo-builder-templates.git |
| 32 | + cd algo-builder-templates/wallet |
| 33 | + |
| 34 | +The repository contains the following templates:<br/> |
| 35 | +**htlc** : a descriptive example explaining how HTLC contracts work with Algo-Builder.<br/> |
| 36 | +**monitor-payments**: a nodejs app which monitors payment transactions to a particular address.<br/> |
| 37 | +**shop**: demonstrates a payment widget connected to different web wallets.<br/> |
| 38 | +**wallet**: (this tutorial) Algo Builder Wallet Wideget tutorial.<br/> |
| 39 | +**warcraft**: a descriptive example explaining how to create an escrow account with Algo Builder.<br/> |
| 40 | + |
| 41 | +#### 2. Environment Setup |
| 42 | + |
| 43 | +Install all dependencies in your environment:<br/> |
| 44 | +` yarn install` or `npm install` |
| 45 | + |
| 46 | +Now, run the app for local development. It will automatically rebuild the app when the code is updated.<br/> |
| 47 | +`yarn run dev` or `npm run dev` |
| 48 | + |
| 49 | +App should pop up in your browser, it will look similar to this: |
| 50 | +<img src="./t-wallet/assets/homescreen.png" height="200" title="Home Page" /> |
| 51 | + |
| 52 | +#### 3. Using the Wallet Widget |
| 53 | + |
| 54 | +Now you can select your preferred network and connect to a web wallet: |
| 55 | +<img src="./t-wallet/assets/address_selected.png" height="200" title="Account Selected" /> |
| 56 | + |
| 57 | +You can now interact with the algorand blockchain (send algos, or call an application): |
| 58 | +<img src="./t-wallet/assets/algo_transaction.png" height="200" title="Send Transaction" /> |
| 59 | + |
| 60 | +We present an example of Algo transfer and an application call, with parameters set in `src/constants`. |
| 61 | + |
| 62 | +```ts |
| 63 | +export const toAddress = "WK73JQQGCRQCZ5GLQHCXXB6OXIGF6SD22F5P7HPXF5PNH23YUUALUMKOZ4"; |
| 64 | +export const amount: number = 10e6; |
| 65 | +export const applicationId: number = 189; |
| 66 | +``` |
| 67 | + |
| 68 | +And finally you can disconnect your chosen wallet. |
| 69 | + |
| 70 | +#### 3. Style the Wallet Widget |
| 71 | + |
| 72 | +You can also style your wallet widget using your own custom styles or using an external library by editing the `App.vue` file: |
| 73 | + |
| 74 | +```ts |
| 75 | + <div> |
| 76 | + <select @change="handleNetworkChange"> |
| 77 | + <option :value="0" :key="0">Select a network</option> |
| 78 | + <option |
| 79 | + v-for="option in networkAvailable" |
| 80 | + :value="option.value" |
| 81 | + :key="option.id" |
| 82 | + > |
| 83 | + {{ option.value }} |
| 84 | + </option> |
| 85 | + </select> |
| 86 | + <div class="header" v-if="walletStore.network"> |
| 87 | + <select @change="connectWallet"> |
| 88 | + <option :value="0" :key="0">Select a wallet</option> |
| 89 | + <option |
| 90 | + v-for="option in walletsAvailable" |
| 91 | + :value="option.value" |
| 92 | + :key="option.id" |
| 93 | + > |
| 94 | + {{ option.value }} |
| 95 | + </option> |
| 96 | + </select> |
| 97 | + </div> |
| 98 | + <div class="header" v-if="currentAddress"> |
| 99 | + <select @change="setCurrentAddress"> |
| 100 | + <option :value="0" :key="0">Select a account</option> |
| 101 | + <option v-for="addr in walletAddresses" :value="addr" :key="addr"> |
| 102 | + {{ addr }} |
| 103 | + </option> |
| 104 | + </select> |
| 105 | + </div> |
| 106 | + </div> |
| 107 | +``` |
| 108 | + |
| 109 | +For eg: [Sigma Wallet](https://github.com/scale-it/algobuilder-msig) has a styled wallet widget using [Antd](https://www.antdv.com/) library. |
| 110 | +<img src="./t-wallet/assets/select_network.png" height="100" title="Select Network" /> |
| 111 | +<img src="./t-wallet/assets/styled_wallet.png" height="200" title="Styled Wallet Widget" /> |
| 112 | + |
| 113 | +The wallet component above and the whole web page can easily be customized to fulfil your UX design requirements along with providing the required functionality. |
0 commit comments