Handling UI when a trasaction is in pending (MetaMask)

0 votes

I have a Metamask payment that works fine. It's triggered by an onClick of a button. I want to show something to the user during the pending of the transaction, but i cant figure out how since the promise returned is already the mined transaction. This is the code:

web3js.eth.sendTransaction({
                to: '0x6Dc8956E655Ccd80187265107b848D8c5B6d2459',
                from: address,
                })
                    .then(function (txHash) {
                                    console.log(txHash);
                             }).catch(error => {
                                console.log(error);
                              });
                      })
Oct 3, 2018 in Blockchain by slayer
• 29,050 points
25 views

1 answer to this question.

0 votes

You need to use the state of your component

In constructor:

this.state = {willShowLoader: false}

In your onclick function (the second parameter is the callback)

this.state.setState({willShowLoader: true}, sendTransaction)

In your send transaction function: (note the setState inside of then)

web3js.eth.sendTransaction({
            to: '0x6Dc8956E655Ccd80187265107b848D8c5B6d2459',
            from: address,
            })
                .then(function (txHash) {
                          this.setState({willShowLoader:false})
                                console.log(txHash);
                         }).catch(error => {
                            console.log(error);
                          });
                  })

Then in your render method: (using conditional rendering)

(this.state.willShowLoader)?<Spinner/>:<notSpinner/>
answered Oct 3, 2018 by digger
• 27,640 points

Related Questions In Blockchain

+1 vote
1 answer
0 votes
1 answer

In a Blockchain, how difficult is it to modify the third to last block?

Technically, it's not difficult at all, all ...READ MORE

answered Apr 20, 2018 in Blockchain by Christine
• 15,790 points
65 views
+1 vote
1 answer

Is it possible to store blockchain in a sql or no-sql database?

Currently, following are the options to store ...READ MORE

answered Apr 20, 2018 in Blockchain by Perry
• 17,020 points

edited Aug 9, 2018 by Omkar 61 views
0 votes
1 answer

Truffle tests not running after truffle init

This was a bug. They've fixed it. ...READ MORE

answered Sep 11, 2018 in Blockchain by Christine
• 15,790 points
138 views
0 votes
1 answer
+3 votes
2 answers

How to run ethereumjs using Node.JS

You need to install testrpc globally on ...READ MORE

answered Mar 27, 2018 in Blockchain by ned_crew
• 1,620 points
136 views
+1 vote
3 answers

What is the pattern for handling throw on a Solidity contract in tests

In my opinion the cleanest way is: it("should ...READ MORE

answered Sep 25, 2018 in Blockchain by Lupin
120 views
0 votes
1 answer