Creating a Shopping Dapp with React.js and Thanos Wallet

1. Downloading Thanos Wallet

Download Thanos wallet from chrome webstore and set up a new account.

2. Get XTZ into testnet account

To interact with blockchain we need some Tez and you can easily get it from here.

3. Create a contract

Here comes the shopping contract.

import smartpy as sp
class Shopping(sp.Contract):
    def __init__(self,params):
        self.init(orders = sp.map(tkey = sp.TInt , tvalue = sp.TRecord(units = sp.TInt, contactPerson = sp.TString , deliveryAddress = sp.TString , fulfilled = sp.TBool , item=sp.TString)), counter = sp.int(0),admin=params)
        
    def incrementCounter(self):
        self.data.counter += 1
        
    @sp.entry_point
    def purchase(self,params):
        self.incrementCounter()
        orderData = sp.record(units = params.units , contactPerson = params.contactPerson  , deliveryAddress = params.deliveryAddress , item = params.item , fulfilled = False)
        
        self.data.orders[self.data.counter] = orderData
    
    @sp.entry_point
    def closeOrder(self,params):
        sp.verify(sp.sender == self.data.admin)
        self.data.orders[params.orderID].fulfilled = True
        
@add_test(name="ShoppingContractTest")
def test():
    
    shopping = Shopping(sp.address("tz1WgZqDQcYBeG35GupoNgGAqexBaFJLPJut"))
    scenario = sp.test_scenario()
    scenario += shopping
    scenario += shopping.purchase(units = 3 , contactPerson = "Pawan" , deliveryAddress="301 ABCD Street XYZ City" , item = "Mango")
    scenario += shopping.closeOrder(orderID = 1).run(sender = sp.address("tz1WgZqDQcYBeG35GupoNgGAqexBaFJLPJut"))

4. Deploying the contract with Tezster CLI

Follow these steps —

Generate the Michelson code and Initial Storage from SmartPy.

Deploy the contract with Tezster CLI.

You can also deploy in SmartPy ide directly or you could use Bundle-react for deploying and testing smart contracts as well for building react apps on Mac and Linux.

If you are not familiar with Tezster CLI, you can refer its documentation here. Alternatively you can deploy contract using SmartPy.

5. Creating a React app

create-react-app thanosshoppingdapp --scripts-version 1.1.5

6. Developing our dapp

Note : I understand that different parts of react application should be spread in granular components, but in order to be beginners’ friendly, I will write the code in App.js file itself.

Following these steps —

Install Thanos wallet plugin and Taquito libraries

yarn add @taquito/taquito@^6.3.0-wallet.3 @thanos-wallet/dapp

Import Thanos wallet plugin

import { ThanosWallet } from "@thanos-wallet/dapp";

Create a constructor

constructor(props) {
super(props);
this.wallet = null;
this.tezos = null;
this.shopping=null;
}

State to store user’s actions

state = {
Name : "",
Address : "",
Item :"",
Units : 0,
transactionInitiated : false,
transactionCompleted : false
}

Create a wallet configuration function

checkWalletConfigurable = async() => {
try
{
await ThanosWallet.isAvailable();
this.wallet = new ThanosWallet("Shopping Dapp");
await this.wallet.connect("carthagenet");
this.tezos = this.wallet.toTezos();
this.shopping = await this.tezos.wallet.at("KT18j478hHyyxsmL1Kk6runXMYMDxJ7mytNQ");
}
catch(e)
{
console.log(e , 'Error');
}
}

Calling configuration function when the app gets mounted

componentDidMount()
{
this.checkWalletConfigurable();
}

Creating a function for sending user input to contract

sendDataToContract = async() => {
this.setState({transactionInitiated : true})
const operation = await this.shopping.methods.purchase(this.state.Name , this.state.Address,this.state.Item,this.state.Units).send();
await operation.confirmation();
this.setState({transactionCompleted : true})
}

Lets Render()

render() {
return (
<div className="App">
<h1>Place a new order</h1>
<input type="text" placeholder="Your Name" onChange={(event) => {this.updateState(event.target.value , "Name")}}/>
<input type="text" placeholder="Your Address" onChange={(event) => {this.updateState(event.target.value , "Address")}}/>
<input type="text" placeholder="Item" onChange={(event) => {this.updateState(event.target.value , "Item")}}/>
<input type="number" placeholder="Units" onChange={(event) => {this.updateState(event.target.value , "Units")}}/>
<p>{this.state.transactionInitiated === true && this.state.transactionCompleted === false ? "Transaction started awaiting confirmation" : null}</p>
<p>{this.state.transactionInitiated === true && this.state.transactionCompleted === true ? "Transaction Successfull" : null}</p>
<button onClick={() => this.sendDataToContract()}>Send Data</button>
</div>
);
}

Finally App.js file looks like this.

7. Starting development server

Make sure you have Dapps enabled in Thanos Settings.

Once the browser window opens Thanos will prompt you to connect the particular dapp with Thanos by entering your wallet password.

8. Let's send the transaction

Congratulations! You have created your Dapp.

Thanos wallet is an intuitive Metamask equivalent for Tezos blockchain. Check them out here.

Follow us on Twitter and Telegram to stay updated about all cool updates and events happening at Tezos India.