How to extend web3js with TypeScript?

Question

So I'm trying to build a prototype on React w/ TypeScript for an application that I'm developing - which in the future I'm going to migrate to Django, that's why I want to use web3js, to pass it later to web3.py - and a I wanna use the relay methods of Infura, so the users don't need to have a cryptowallet.

How I'm trying to do it is by following the Infura tutorial on ITX and getting everything on web3js. Right now what I have is this:

//Configure the provider
let web3  = new Web3(
  new Web3.providers.HttpProvider(
    `https://:${process.env.REACT_APP_PROJECT_SECRET}@${process.env.REACT_APP_ETHEREUM_NETWORK}.infura.io/v3/${process.env.REACT_APP_PROJECT_ID}`
  )
);

web3.extend({
  property: "relay",
  methods: [
    {
      name: "getBalance",
      call: "relay_getBalance",
      params: 1
    },
  ],
})

This is what I do at the start of the React component. Later, I wanna have a callback that, when I want, it'll retrieve the balance of the gas pool so it'll be something like:

() => web3.relay.getBalance(...)

The problem is that, when I try to use it like that, as the property doesn't exist on the Web3 class, I can't compile it. Is there a way to extend the class definition so I can define - and use - the relay methods inside its own module? I've tried with JS and works fine, but I would really like to keep the project on TS.

How to extend web3js with TypeScript?

0 Answers