Unwanted behavior while using standard XDCPay RPC endpoints and web3 library

[tnkerer]

Summary: While using XDCPay standard RPC endpoints to connect to decentralized apps using the web3 npm package, dApps are unable to check for transactions receipt due to incompatibility with the Ethereum Standard RPC.

Reproducing the error

It is possible to use XDCPay injected provider to create a web3modal that can be used for ReactJS/Next.js dapps using web3 npm package. This would be the natural pathway to interact with decentralized apps in EVM-based networks, this is the case for XDC Network too.

By using XDCPay HttpProvider, however, we are using the XDC compatible endpoints:

  50: 'https://xdcpayrpc.blocksscan.io/',
  51: 'https://apothemxdcpayrpc.blocksscan.io/'

Which, at first glance, is not a problem since it does not prevent us from accessing web3 methods. We can still send and fetch blockchain data using a Web3 object created using XDCPay injected provider.

However, the problem is when we expect a transaction receipt to update our front-end information or compute transaction outcomes. We get the following message error:

Uncaught (in promise) Error: Failed to check for transaction receipt:
{}
    at Object._fireError (web3.min.js?2efa:9:16886)
    at eval (web3.min.js?2efa:10:25360)

Demo (error)

Screencast.from.28-09-2022.15.23.51.webm

Fix

To check if this behavior only occurred with RPC endpoints that are not fully compatible with the Ethereum standard, I have configured XDCPay to use the Ethereum-compatible alternative RPCs:

  50: 'https://erpc.xinfin.network/',
  51: 'https://erpc.apothem.network/'

Fortunately, using these endpoints is enough to avoid the compatibility error with the web3 library.

Demo (Fix)

Screencast.from.28-09-2022.15.47.05.webm

Video summary: Once the front-end receives the transaction confirmation receipt, the react DOM is updated with staking information

Sugestion

My suggestion would be to make Ethereum Compatible endpoints a native feature on XDCPay:

[BlocksScanIO]

We have test eth.getTransactionReceipt function on both RPC for mainnet and Testnet and it works, Can you share txhash / step to reproduce at our end?

Here is attached images for ref.

[tnkerer]

I have tracked down this issue to my generic Contract instance in my React App, looks like the problem is on my side. Here is my generic Contract instance code:

import Web3 from "web3";
import { AbiItem } from 'web3-utils';
import { Contract as Web3Contract } from "web3-eth-contract";

class Contract {
  web3: Web3;
  chainId: number;
  account: string | null;
  tag: string | null;
  events: object;
  contract: Web3Contract;

  constructor(options, tag: string, abi, address: string) {
    this.web3 = options.web3;
    this.chainId = options.chainId;
    this.account = options.account;

    this.contract = new this.web3.eth.Contract(abi as AbiItem[], address);

    if (tag) this.tag = tag;
    else this.tag = "contract-" + Date.now();

    this.events = {};
  }
  
  call(method, ...params) {
    return new Promise((resolve, reject) => {
      this.contract.methods[method](...params).call({from: this.account})
        .then(resolve)
        .catch(reject)
    });
  }

  send(method, options, ...params) {
    return new Promise((resolve, reject) => {
      this.contract.methods[method](...params).send({...options, from: this.account})
        .then(resolve)
        .catch(reject)
    });
  }

  on(event, callback, onerr) {
    if (this.events[event])
      return;
    this.contract.events[event]((err, res) => {
      if (err === null) {
        callback(res.returnValues, this.tag);
      } else {
        if (onerr) onerr(err);
        else console.log(err);
      }
    });
    this.events[event] = true;
  }
}

export default Contract;

I am analyzing how to fix the issue on my side, this code will work for erpc endpoints but not for standard XDC endpoints, so if you guys have any suggestions on what I can do, I would really appreciate it.

I will keep you guys updated if manage to solve it.

[tnkerer]

@BlocksScanIO adding more information on how to get the error:

To reproduce the error, you can run my example staking dapp locally:

git clone https://github.com/menezesphill/xdc-staking-dapp.git
cd ./xdc-staking-dapp/front-end

Install dependencies:

npm install

and run the app:

npm run dev

I added a faucet button so you can get test tokens and try the dapp for youself, you will get the error whenever you try to Deposit and/or withdraw tokens from the staking card. And only when using standard XDC endpoints (works fine with erpc endpoints).