hashjsreact.md

Hedera Composer Tutorial

Hedera provides a very accessible way for users to connect with and perform transactions on their favorite apps. This comes in the form of Composer, which is a browser extension of Hashing Systems. Composer provides users with a non-custodial crypto wallet from which users can easily manage their HBAR, making transactions, interacting with smart contracts, and buy Hashing Name Service domains, etc.

Note that it is currently available on only Google Chrome.

Composer also gives their developers an easy way to test their dapps on mainnet and testnet. They are making it a smooth experience to develop dapps on Hedera Platform.

You can learn more about how to get started with Composer here

Composer with React

React is a prevalent javascript library for building user interfaces. Developers can use the hash.js library provided to connect your Dapp made in React with Composer.

Installation

Hash.js can be installed easily on any react project by simply including hash.js file hosted here.

The file needs to be put in the HEAD tag of your website. One of the ways to do this is below. You may choose some other methods to include this too.

componentDidMount () {
const script = document.createElement("script");
script.src = "https://cdn.hashingsystems.com/hash.js";
script.type = "text/javascript";
script.async = true;
document.head.appendChild(script);
}

Next, hash.js provides straightforward functions that are available to use via the window global object once the script is included and loaded.

The functions supported by hash.js are listed below :-

• extensionid
• enable
• triggerCryptoTransfer
• triggerSmartContract
• deploySmartContract
• triggerCheckBalance
• ethAddressToAccountId
• accountIdToEthAddress

Detailed information of these are present under - https://github.com/hashingsystems/hash.js#api

To trigger a CryptoPayment from Composer

let data = {
    time:"1",
    memo:"My First Hedera Transaction",
    contentid:'test1',
    redirect:'{"nonPayingAccount":"/nomicropaymentreceived.html"}',
    recipientlist:'[{"tinybars": "444", "to":"0.0.1107"}]',
    type:'article'
}
window.hash.triggerCryptoTransfer(data, (err, res) => {
console.log("Callback::Error:", err)
console.log("Callback::Response:", res)
});

Let's Create a Tipping Website using React and Hash.js

The site will be simple in it's working, we will be able to tip any user for an amount in HBAR. This will trigger the Composer to create a transaction to that recipient and for the amount given.

Create a project using React

npx create-react-app hederapay

Coding the rest ...

Edit App.js as below

1. Include the hash.js into the react project in componentDidMount() function like :-

componentDidMount () {
    const script = document.createElement("script");
    script.src = "https://cdn.hashingsystems.com/hash.js";
    script.type = "text/javascript";
    script.async = true;
    document.head.appendChild(script);
  }

2. In the render function create two TextFields and one Button for creating our payment form

<div className="main">
        <Grid container spacing={3}>``
          <Grid item xs={12}>
            <center>
              <h1>Pay With Hbar</h1>
              <p>Pay Instantly on Hedera</p>
            </center>
          </Grid>
          <Grid item xs={12} sm={12}>
              <center><TextField  style = {{width: 450}}  value={this.state.recipient} name="recipient-add" onChange={this.handleInput} id="outlined-basic" label="Enter Account Id or HNS Domain" variant="outlined" fullWidth  /></center>
      </Grid>
          <Grid item xs={12} sm={12}>
              <center><TextField style = {{width: 450}}  type="number" value={this.state.amount} name="amount" onChange={this.handleInput} id="outlined-basic" label="Amount to Pay" variant="outlined" fullWidth  /></center>
          </Grid>
          <Grid item xs={12} sm={12}>
              <center><Button onClick={this.payAmount} size="large" className="pay-btn" variant="contained" color="primary">
          Pay Now
          </Button></center>
          </Grid>
        </Grid>
      </div>

Make Sure the button has an onclick listener to it in which we are going to put the code of the hash.js function triggering Composer.

For the sake of keeping this tutorial clean, I am keeping details of it. You can see the complete code in the Repository given towards the end of the tutorial.

3. Now create a payAmount function in the same Component and put the code in it like below :-

let data = {
      time:"1",
      memo:"My First Hedera Transaction",
      contentid:'test1',
      redirect:'{"nonPayingAccount": "/nomicropaymentreceived.html"}',
      recipientlist:'[{"tinybars": "' + this.state.amount + '", "to":"' + this.state.recipient + '"}]',
      type:'article'
}
    window.hash.triggerCryptoTransfer(data, (err, res) => {
      console.log("Callback::Error:", err)
      console.log("Callback::Response:", res)
    });
    this.setState({
      recipient : '',
      amount : '',
    })

We are taking the amount and recipient from the state of component.

See the whole code here :- https://github.com/Man-Jain/hederapay

Now it's time to run our project. Just do npm start and checkout the cool app you have made at localhost:3000