React get metamask latest transaction status

Question

i am using this, to make a function call in smart contract via metamask in react:

export default class EthereumForm1 extends Component {
  constructor (props) {
    super (props);
    const MyContract = window.web3.eth.contract(ContractABI);

    this.state = {
      ContractInstance: MyContract.at('ContractAddress')
    }
    this.doPause = this.doPause.bind (this);
}
  doPause() {
    const { pause } = this.state.ContractInstance;

    pause (
      {
        gas: 30000,
        gasPrice: 32000000000,
        value: window.web3.toWei (0, 'ether')
      },
      (err) => {
      if (err) console.error ('Error1::::', err);
      console.log ('Contract should be paused');
    })
  }

What i want is to run jQuery code with loading gif: $(".Loading").show(); while transaction is being processed and remove it after. Also, it would be good to add transaction status in div after, like in metamask(either passed or rejected).

Metamask transaction status image

Answer 1

You don't need jquery to do this. React state can manage the status of the progress automatically. All you have to do is to call setState function.

class EthereumFrom1 extends React.Component {

    state = {
        loading: false
    };

    constructor(props) {
        super(props);

        this.doPause = this.doPause.bind(this);

    }

    doPause() {
        const {pause} = this.state.ContractInstance;

        pause(
            {
                gas: 30000,
                gasPrice: 32000000000,
                value: window.web3.toWei(0, 'ether')
            },
            (err) => {
                if (err) console.error('Error1::::', err);
                this.setState({loading: true});
            })
    }

    render() {
        return (
            <div>
                {this.state.loading ?
                    <div className="Loading">
                        Loading...
                    </div> : <div>done</div>
                }
            </div>

        )
    }
}

Answer 2

What helped me was checking every few seconds if my transactiopn finished, and if yes hiding the loader.

if (latestTx != null) {
  window.web3.eth.getTransactionReceipt(latestTx, function (error, result) {
    if (error) {
      $(".Loading").hide();
      console.error ('Error1::::', error);
    }
    console.log(result);
    if(result != null){
      latestTx = null;
      $(".Loading").hide();
    }
  });
}