HRC20 DApp

ERC20 DApp
In this chapter, we'll build a React DApp for the HRC20 Token we deployed previously.
The features for this DApp are similar to the NodeJS CLI tool we've built. The DApp should:
Subscribe to and display token transfer events.
Display total supply, and update it automatically.
Be able to mint new tokens.
Display information about transactions made, e.g. number of confirmations.
It looks something like this:
The only additional complication is that we no longer allow DApp to create a transaction without user permission. Now for every transaction, we should give the user an opportunity to approve or deny it:
The HRC20 DApp is more complex than the CLI App, because it needs to track multiple transactions, and update the UI when a new confirmation occurs.
We will use mobx.js, a reactive programming framework, to keep data and view synchronized.
We can use Qtum's sample DAPP ERC20 project  https://github.com/qtumproject/qtumjs-dapp-erc20  , and use it to jump-start your own DApp project with HYDRA.
Brief Intro To Reactive Programming
Most of the complexity in GUI programming is in synchronizing the underlying data and the UI state. When data changes, the UI also needs to change. Conversely, when the UI changes (say user inputs a number), the data needs to change.
It is tedious and error-prone to keep the UI and data in sync.
It'd be nice to bind the UI and data, so they always change together. mobx provides the tool to do that, and it is almost indistinguishable from magic.
Let's first see how we manually update UI without reactive programming, then we'll see how mobx automates that process.
Manual UI Update
Suppose the data is:
1
const obj = {
2
  a: 1,
3
  b: 2,
4
}
Copied!
We read the data in a view rendering function:
1
function renderView(obj) {
2
  const view = (
3
    <div>
4
      a: {obj.a}
5
      <br/>
6
      b: {obj.b}
7
    div>
8
  )
9
  ReactDOM.render(view, document.querySelector("#root"))
10
}
Copied!
Now we update the data:
1
obj.a = 10
Copied!
Next, we'll need to manually call renderView again to refresh:
1
renderView(obj)
Copied!
If we forget to rerender, the view would be stale. In a complex application, there could be many different views using different pieces of data. It's a big challenge to keep track of everything correctly.
Reactive UI Update
Instead of calling renderView manually, we'd like it to be called automatically when we modify the object, like so:
1
obj.a = 10
Copied!
To accomplish this, mobx introduces two magic functions:
​observable: If you modify an observable object, code that depends on the object's data should automatically re-execute.
​autorun: Execute a piece of code, and track all the pieces of observable data that had been used. If anything changed, re-execute.
We change the previously example like this:
1
​
2
const obj = observable({
3
  a: 1,
4
  b: 2,
5
})
Copied!
And we render the UI using autorun, so it gets re-executed when obj is changed:
1
​
2
autorun(() => {
3
  renderView(obj)
4
})
Copied!
You can try this example on codepen.io. Modify obj in the provided console, and see the view changing.
Note: In actual React code, we won't explicitly call autorun, the framework handles it. But the idea is the same, modify an object, and the components that uses the object would automatically re-render.
Running The Project
Clone the project:
1
git clone https://github.com/hydra-chain/qtumjs-dapp-erc20.git
Copied!
Install project dependencies:
1
yarn install
2
# or: npm install
Copied!
Like the nodejs CLI tool, we'll need to make the information about deployed contracts available. Let's copy/link solar.development.json into the project:
1
ln -s ~/hydrabook/examples/mytoken/solar.development.json solar.development.json
Copied!
Then start the web server:
1
npm start
2
​
3
> [email protected] start /Users/rosen/hydra/hydrajs-dapp-erc20
4
> neutrino start
5
​
6
✔ Development server running on: http://localhost:3000
7
✔ Build completed
Copied!
Open http://localhost:3000, you should see:
Project Structure
​src/index.ts: the entry of the project, doing a little bit of setup.
​src/views: this directory contains all React components.
​src/Store.ts: this observable object manages the logic and data of the application.
The rpc and myToken instances are initialized with two global constants:
1
const rpc = new HydraRPC(HYDRA_RPC)
2
​
3
const myToken = new Contract(rpc, SOLAR_REPO.contracts["zeppelin-solidity/contracts/token/CappedToken.sol"])
Copied!
The constants QTUM_RPC and SOLAR_REPO are defined in config/development.js.
Display Total Supply
Store is an observable object. If the totalSupply property changes, the React component that uses it would update.
When the app first loads, it calls updateTotalSupply to get the total supply. The simplified Store code:
1
class Store {
2
  @observable public totalSupply: number = 0
3
​
4
  
5
  public async updateTotalSupply() {
6
    const result = await myToken.call("totalSupply")
7
    const supply = result.outputs[0]
8
​
9
    
10
    this.totalSupply = supply.toNumber()
11
  }
12
}
Copied!
Simply by setting this.totalSupply, the view that uses it would get re-rendered. Specifically, this chunk of JSX:
1
<h1>
2
  <span className="is-size-2"> {totalSupply} span>
3
  <br />
4
  Total Supply
5
h1>
Copied!
https://github.com/hydra-chain/hydrajs-dapp-erc20/blob/92d4aed5128ff5685e23bc1bb4e0b1842e0dccca/src/views/App.tsx#L28-L32
Subscribe To Mint Events
Let's subscribe to the Mint event so we can update the total supply immediately if somebody minted additional tokens. The simplified code:
1
class Store {
2
  @observable.shallow public transferEvents: ITransferLog[] = []
3
​
4
  
5
  private async observeEvents() {
6
    this.emitter = myToken.logEmitter()
7
​
8
    this.emitter.on("Mint", () => {
9
      this.updateTotalSupply()
10
    })
11
​
12
    this.emitter.on("Transfer", (log: ITransferLog) => {
13
      this.transferEvents.unshift(log)
14
    })
15
  }
16
}
Copied!
Here the app subscribe to both Mint and Transfer events, and does something when notified:
Mint: update the total supply.
Transfer: add the transfer event to an array, so we can display it in the UI.
The view that renders transferEvents is straightforward:
1
<h1> Transfers h1>
2
​
3
{transferEvents.length === 0 && "no transfer event observed yet"}
4
​
5
{
6
  transferEvents.map((log) => <TransferLog key={log.transactionHash} log={log} />)
7
}
Copied!
This view get updated when a new item is added to transferEvents.
Let's test this out. Use the NodeJS CLI to mint more tokens:
1
node index.js mint dcd32b87270aeb980333213da2549c9907e09e94 1000
2
​
3
mint tx: 7f0ff25475e2e6e0943fa6fb934999019d7a6a886126c220d0fa7cdcc3c36feb
4
​
5
✔ confirm mint
Copied!
Even though the minting was done outside app, we still get notified. The total supply should increment by 1000, and a new Transfer event should show up in the UI:
Transaction Lifecycle Management
In a typical web app, the user clicks a button, and the app makes an HTTP request to the server and get a response back. It's a simple cycle, and the user does not need to approve the HTTP request, or to know whether the request had been accepted by the server.
The lifecycle for a transaction has more stages:
1.
A transaction pending user audit & approval.
2.
A transaction is sent to qtumd, and broadcasted to the network.
3.
User waits for transaction to reach some number of confirmations.
Your app may need to give indication as to where transactions are in each of these stages.
Minting Tokens
The mintTokens method tracks the mint transactions that had been made, and updates the UI as the transactions progress through the various stages of their lifecycles.
The first half of the method creates a new observable txRecord. The second half updates the txRecord, which in turn triggers views to update.
The annotated code for mintTokens:
1
public async mintTokens(toAddress: string, amount: number) {
2
  
3
  
4
  this.txRecords.unshift({
5
    method: "mint",
6
    params: {
7
      toAddress,
8
      amount,
9
    },
10
​
11
    
12
    tx: undefined,
13
    error: undefined,
14
  })
15
​
16
  
17
  const txRecord = this.txRecords[0]
18
​
19
  
20
​
21
  try {
22
    
23
    
24
    const tx = await myToken.send("mint", [toAddress, amount])
25
​
26
    
27
    txRecord.tx = tx
28
​
29
    
30
    await tx.confirm(3, (tx2) => {
31
      
32
      
33
      
34
      txRecord.tx = tx2
35
    })
36
  } catch (err) {
37
    
38
    
39
    
40
    txRecord.error = err
41
  }
42
}
Copied!
Without the record keeping logic, the code boils down to:
1
const tx = await myToken.send("mint", [toAddress, amount])
2
await tx.confirm(3)
Copied!
Mint Token UX Workflow
Enter the address and amount, click mint. Initially the tx should be pending for authorization:
Go to the authorization UI to approve it (http://localhost:9899/):
The transaction record should update, and show the number of confirmations reached (up to 3):
Conclusion
We've built a DApp for our HRC20 token. Next let's hold a crowdsale ICO for it!

HRC20 With Hydrachainjs

How Transactions Work

Last modified 10mo ago

Copy link

Contents

ERC20 DApp

Brief Intro To Reactive Programming

Subscribe To Mint Events

Transaction Lifecycle Management

Minting Tokens

Mint Token UX Workflow

Conclusion