Signing transactions using uport – Nikhil Yadav – Medium

Signing transactions using uport – Nikhil Yadav – Medium

While working on an Ethereum based project, I realised the need for the users to be able to sign the transactions in a non-web3 injected browser. Metamask was doing a great job for all my needs but what about the users accessing my Dapp in chrome for mobile? After some research, I decided to use uport in addition to metamask. However, metamask and uport use different versions of web3, therefore, I had to write separate code for both set of users. In this tutorial, I will discuss how to use uport for this job because there are already enough tutorials for using metamask. To read about uport, you can visit their website https://developer.uport.me. I found the website overwhelming and couldn’t decide easily what tool or library will do the job for me. After some reading and hit and trial, I decided to use uport-connect.

I have already uploaded this project on GitHub. You can clone it from https://github.com/nikhil3000/uport-sign

Let’s start with a simple smart contract which stores a number and has getter and setter functions. The setter function will be transaction whereas the getter function will be a simple call.

pragma solidity >=0.4.22 <0.6.0;

contract test 
function getNum () public view returns(uint)
function setNum(uint _num) public 
}
						
					

Before we write the code to call the functions of this smart contract we need to do some initial setup. As this is a one-time setup after which we can make as many calls/transactions we want, I am doing it in componentDidMount() function of my react project.

const connect = new Connect('Test Web3', )

const provider = connect.getProvider()

const web3 = new Web3(provider)

const abi = [], "name": "setNum", "outputs": [], "payable": false, "stateMutability": "nonpayable", "type": "function" }, , ], "payable": false, "stateMutability": "view", "type": "function" }];

const address = "0x5573b56dd293552f449db7482833a68f7b5f9062";

var numberContract = new web3.eth.Contract(abi, address);

this.setState();

You can find the ABI for your contract in remix ide. The numberContract object will now be used to make all the function calls. After obtaining this object, function calls are very similar to how we called them using web3 and metamask.

setNumber(e) , (err, hash) => 

getNumber(e) , (err,num)=>

Notice the difference between the two calls. Since the first function call is an ethereum transaction, .send() is used, whereas, the second function call is an ethereum call, therefore .call() is used.

It is important to mention that from address in these function calls is not used anywhere and hence is a hardcoded address.

Some tips:

1. Uport uses the last account in the accounts tab in their mobile app, so make sure it has sufficient funds.
2. Sometimes the modal showing the QR code is not completely visible on the screen and therefore can’t be scanned. Just go the code of this element under inspect element, right clicking on the image tag for this QR code will let you open it in a new tab.
3. For more demo code, go to the examples folder in the github repo for uport-connect.

I hope this helps you to use uport for signing transactions. Feel free to comment any doubts or errors in my code.

Published at Wed, 20 Mar 2019 20:11:31 +0000