Simulating transactions using react/nextjs + wagmi + hardhat

[mhpaler]

If you're using react/nextjs + wagmi + hardhat and want to simulate a transaction happening on a real blockchain (ie. it takes a few seconds for the transaction to complete), make sure you use mempool order: "fifo" in your hardhat config. eg:

networks: {
    hardhat: {
      mining: {
        auto: false,
        interval: 5000,
        mempool: {
          order: "fifo",
        },
      },
      accounts: {
        mnemonic: mnemonic.local,
      },
      chainId: 31337,
    },
...

Took me quite a while of testing to figure this out and hope it helps someone else!