How to display blockchain transaction receipt details in an Ethereum Dapp

Question

In my dapp design, I wish to provide the user with an option to view Blockchain Transaction Receipt Details either by a link to sites like Etherscan or by providing full details on a separate page in the dapp.

How can this be accomplished?

Please help to provide some sample code or implementations for reference.

Answer 1

Let's assume you are using something like Web3.js as your front-end for your dApp.

You would use a function call like methods.myMethod.send() within web3.eth.Contract to call a specific contract function for your back-end smart contract.

The the function call will return a transactionHash which you can immediately use.

For a link to etherscan, simply take the transaction hash and add it to the end of a standard url like below:

'https://etherscan.io/tx/' + transactionHash

You can also continue to use Web3.js to get the details from the transaction if you want to show it directly in your UX using web3.eth.getTransaction():

web3.eth.getTransaction('0x9fc76417374aa880d4449a1f7f31ec597f00b1f6f3dd2d66f4c9c6c445836d8b§234')
.then(console.log);

> {
    "hash": "0x9fc76417374aa880d4449a1f7f31ec597f00b1f6f3dd2d66f4c9c6c445836d8b",
    "nonce": 2,
    "blockHash": "0xef95f2f1ed3ca60b048b4bf67cde2195961e0bba6f70bcbea9a2c4e133e34b46",
    "blockNumber": 3,
    "transactionIndex": 0,
    "from": "0xa94f5374fce5edbc8e2a8697c15331677e6ebf0b",
    "to": "0x6295ee1b4f6dd65047762f924ecd367c17eabf8f",
    "value": '123450000000000000',
    "gas": 314159,
    "gasPrice": '2000000000000',
    "input": "0x57cb2fc4"
}

Answer 2

getTransactionReceipt(hash [, callback]). Returns the receipt of a transaction by transaction hash.
Note. The receipt is not available for pending transactions

https://github.com/ethereum/wiki/wiki/JavaScript-API#web3ethgettransactionreceipt

var receipt = web3.eth.getTransactionReceipt('0x9fc76417374aa880d4449a1f7f31ec597f00b1f6f3dd2d66f4c9c6c445836d8b');
console.log(receipt);
{
  "transactionHash": "0x9fc76417374aa880d4449a1f7f31ec597f00b1f6f3dd2d66f4c9c6c445836d8b",
  "transactionIndex": 0,
  "blockHash": "0xef95f2f1ed3ca60b048b4bf67cde2195961e0bba6f70bcbea9a2c4e133e34b46",
  "blockNumber": 3,
  "contractAddress": "0xa94f5374fce5edbc8e2a8697c15331677e6ebf0b",
  "cumulativeGasUsed": 314159,
  "gasUsed": 30234,
  "logs": [{
         // logs as returned by getFilterLogs, etc.
     }, ...],
  "status": "0x1"
}

Returns
Object - A transaction receipt object, or null when no receipt was found:

• blockHash: String, 32 Bytes - hash of the block where this transaction was in.
• blockNumber: Number - block number where this transaction was in.
• transactionHash: String, 32 Bytes - hash of the transaction.
• transactionIndex: Number - integer of the transactions index position in the block.
• from: String, 20 Bytes - address of the sender.
• to: String, 20 Bytes - address of the receiver. null when its a contract creation transaction.
• cumulativeGasUsed: Number - The total amount of gas used when this transaction was executed in the block.
• gasUsed: Number - The amount of gas used by this specific transaction alone.
• contractAddress: String - 20 Bytes - The contract address created, if the transaction was a contract creation, otherwise null.
• logs: Array - Array of log objects, which this transaction generated.
• status: String - '0x0' indicates transaction failure , '0x1' indicates transaction succeeded.