Adding Cryptocurrency Payments to a React Todo App (or How I Got My Kids To Do Their Chores)
Tags: react, crypto, tutorial, burst
Published: 2019-06-18 14:32:42

Let’s pretend I have a lazy kid that responds really well to financial incentives. In this tutorial, we will build a React Todo App that sends a cryptocurrency payment whenever a Task is marked Complete from the Todo list. When we’re done, the app should look like this:

![](https://thepracticaldev.s3.amazonaws.com/i/ppv6nr7vfel1rmed8ug5.gif)

We can build the app above by following these steps:
1. Clone the todo-react app
2. Generate a wallet address
3. Send crypto whenever a Task is Completed

# Step 1: Clone the todo-react app
Fire up your Terminal, head over to GitHub, find a good Todo app (I picked this one), and clone it to your machine. 

```
git clone https://github.com/tastejs/todomvc.git
```

Change directory into the react-todo example.

```
cd todomvc/examples/react
```

Install all dependencies.

```
npm install
```

Start a web server for local development.

```
python -m SimpleHTTPServer
```

Open your browser to `localhost:8000` and you should see the app.

# Step 2: Generate a wallet address 

In order to send crypto whenever a Task is Completed, we need an address to send it to. But first, we need to pick a cryptocurrency. In this tutorial, we will use Burstcoin due to its ease of use and well-documented libraries. 

For this app to work, both the sender (me) and the recipient (my unmotivated child) will need a wallet address. The sender’s wallet will also need to have some Burst in it to send. 

[Download a Burst wallet](https://www.burst-coin.org/download-wallet) or [use an online wallet](https://wallet1.burst-team.us:2083) to generate some wallet addresses, and fill one of them with Burst. Burst is listed at [several exchanges](https://www.burst-coin.org/exchanges). Be sure to keep note of your passphrases.  

In this example, we will use the TestNet running at http://testnet.getburst.net:6876 to create our accounts so we don’t have to spend any real money. If you need some Test Burst, please reach out on Discord and someone will send you some.

#Step 3: Send crypto whenever a Task is Completed

This is the meat of the tutorial, but it can be broken down into the following steps:

## Install `@burstjs/core` and `@burstjs/crypto`

In `index.html`, add these two script tags right before `</body>` to bring in @burstjs/core and @burstjs/crypto as `b$` and `b$crypto`, respectively.

```html
<script src='https://cdn.jsdelivr.net/npm/@burstjs/core/dist/burstjs.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@burstjs/crypto/dist/burstjs.crypto.min.js'></script>
```

## Add a `sendBurst` function to `app.jsx`

```javascript
sendBurst: function() {

    const api = b$.composeApi({
        nodeHost: "http://testnet.getburst.net:6876",
        apiRootUrl: "/burst"
    });

    const recipientAddress = 'BURST-WQJC-854G-2LQT-8T8EA';

    const senderPassphrase = 'password123'; // BURST-9CVF-6DTE-ST5Q-GTDYA

    const keys = b$crypto.generateMasterKeys(senderPassphrase);

    return api.transaction.sendMoney({
        // NOTE: amountNQT is actually in burst
        amountNQT: '1',
        feeNQT: '0.08',
        deadline: 24 * 60, // 24 hours
        type: 1
        }, keys.publicKey, keys.signPrivateKey, recipientAddress);

},
```

Let’s walk through what this code is doing, line by line.

First, we create a function called `sendBurst`.

```javascript
sendBurst: function() {
```

Then, we tell BurstJS which Burst API node we want to talk to. After all, we have to submit the transaction to the blockchain somehow. In this case, we are sending Burst to the TestNet running on getburst.net.

```javascript
const api = b$.composeApi({
    nodeHost: "http://testnet.getburst.net:6876",
    apiRootUrl: "/burst"
});
```

Next, we create a variable to store the address of our recipient (in this example, my ungrateful child).

```javascript
const recipientAddress = 'BURST-WQJC-854G-2LQT-8T8EA';
```

Then we create a variable to store the passphrase to my wallet (this is your 12-word passphrase). Note: this is for demonstration purposes only - don't put passphrases in source code! 

```javascript
const senderPassphrase = 'password123'; // BURST-9CVF-6DTE-ST5Q-GTDYA
```

Next, we generate some account keys from my passphrase. 

```javascript
const keys = b$crypto.generateMasterKeys(senderPassphrase);
```

Finally, we call the `sendMoney` function from the BurstJS transaction API.

```javascript
return api.transaction.sendMoney({
    // NOTE: amountNQT is actually in burst
    amountNQT: '1',
    feeNQT: '0.08',
    deadline: 24 * 60, // 24 hours
    type: 1
    }, keys.publicKey, keys.signPrivateKey, recipientAddress);

```
Note: BurstJS signs transactions locally before broadcasting the signed transactions to the network. This means your private key is never sent over the wire.

Then we close the function. That’s it for the `sendBurst` function.

## Update the `toggle` function

```javascript
toggle: function (todoToToggle) {
    if (!todoToToggle.completed) {
        this.sendBurst().then((response) => {
            console.log(response);
            this.props.model.toggle(todoToToggle);
        });
    } else {
        this.props.model.toggle(todoToToggle);
    }
},

```


In this code, we first check that the user has marked a Task as completed, as we don’t want to send payment if the user is un-checking a previously completed task. 

```javascript
if (!todoToToggle.completed) {
```

If the task is being marked as completed, we call `this.sendBurst()` with a `.then()` handler to update the item if the Burst was sent successfully.

```javascript
this.sendBurst().then((response) => {
    console.log(response);
    this.props.model.toggle(todoToToggle);
});

```

With that, you should be able to send Burst anytime you mark a Task as Complete.

# Conclusion

In a few simple steps, we just cloned a todo app, and added the ability for it to send a crypto transaction whenever a Task is marked Complete.

In the real world, we’d show the user some success message, and a failure message in the event of failure. That’s it, have fun and happy hacking!

View the source code on GitHub: https://github.com/blankey1337/react-crypto-todo

View the transaction from this demo: http://explorer.testnet.burst.devtrue.net/tx/2321852862536159906

## 🍻 Buy the dev a beer
@blankey1337 BURST-HT4V-8H5E-ESS5-223SB