Batch requesting in Typescript with web3 is an efficient way to improve

When attempting to send a batch request of transactions to my contract from web3, I encountered an issue with typing in the .request method. My contract's methods are defined as 

NonPayableTransactionObject<void>
using Typechain, and it seems that this type does not support the necessary typing for the .request method when using batch.add(). For instance...

let batch = new web3.eth.BatchRequest();
for (let id of tokenIDs) {
    batch.add(myContract.methods.myMethod(id).send.request({ from: defaultAccount })   
}
batch.execute();

This results in the error message 

Property 'request' does not exist on type '(tx?: NonPayableTx | undefined) => PromiEvent<TransactionReceipt>'.ts(2339)
.

I'm wondering if there is an alternative approach to sending transactions to a contract via Batch Request using Typescript/Typechain?

typescriptethereumweb3js

Answer №1

The TypeChain library does not provide type declarations for the .request methods in both the .send and .call methods. However, even though TypeChain is only a type definition, the .request method remains accessible at runtime. To avoid TypeScript compiler errors, you can simply cast the .send method to any:

batch.add((myContract.methods.myMethod(id).send as any).request({ from: defaultAccount });

Alternatively, you can use statically typed Contract Classes in TypeScript with the 0xweb library.

You can generate the class using 

0xweb install 0x.... --chain eth --name MyContract
and then call read methods in batch:

import { MyContract } from '@dequanto/eth/MyContract'

const myContract = new MyContract();
const requests = tokenIds.map(id => {
    return myContract
        .$config({ send: 'manual', from:'0x...'})
        .myMethod(id);
});
const results = await myContract.$executeBatch(requests);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular2- Techniques for exchanging data between isolated components

I am currently working on a project using Angular 2. Within this project, I have created two components: WorkspacesComponent and PagesComponent. In the database, each workspace contains a number of pages. I have written the code below to display the list ...

eventstypescriptangulareventemitter

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

Currently, I am utilizing a mean stack in order to craft a bug tracking system. The issue arises when my express.js service returns an array of issues, which I assign to another array that functions as the dataSource for mat-table. However, despite the ar ...

angulartypescriptexpressangular-materialangular6

Retrieving the inner text of a dragged element using Angular Material's DragAndDrop feature

Can the inner text of a dragged element be retrieved and utilized in the "onDrop" function within Angular's cdkDragAndDrop feature? onDrop(event: CdkDragDrop<string[]>) { if (event.previousContainer === event.container) { moveItemIn ...

angulartypescriptangular-materialangular-cdk-drag-drop

Bringing in TypeScript definitions for gridster

After starting a new ionic project, I decided to include the gridster.js library by running npm install gridster and npm install @types/jquery.gridster in the root directory of my project. However, when trying to import the installed definitions, I encount ...

cordovatypescriptionic-frameworktypescript-typingsgridster

An issue occurred during the project compilation using npm

My project installation process is giving me some trouble. Initially, when I run npm install, it successfully installs all the dependencies. However, when I proceed to execute npm run compile, I encounter an error. Below is the log file for a better under ...

javascripttypescriptnpmlerna

Encountering a module error when using SignalR with Webpack and TypeScript: 'Unable to locate module './NodeHttpClient''

I am currently working on integrating a SignalR client into an Angular application using Webpack and TypeScript. Here is the content of my package.json file: { "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/tes ...

angulartypescriptwebpacksignalrsignalr.client

Combine a constant interface with a generic function to create a unique generic interface

When dealing with legacy code that utilizes a const in the following pattern: const fnUsedInSetPrototypeOf = { equalityComparer<T>(a: T, b: T) { return a === b }, otherFn<T> (this: T) { /*...*/ }, // ... other things, all along the ...

typescripttypescript-generics

React and TypeScript warns about possible undefined object

certificate?: any; <S.Contents>{certificate[0]}</S.Contents> <S.Contents>{certificate[1]}</S.Contents> <S.Contents>{certificate[3]}</S.Contents> If I set the type of props to `any` and use it as an index of an array, e ...

reactjstypescript

Discovering if objects possess intersecting branches and devising a useful error notification

I have 2 items that must not share any common features: const translated = { a: { b: { c: "Hello", d: "World" } } }; const toTranslate = { a: { b: { d: "Everybody" } } }; The code ab ...

typescript

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

Currently working with React and Axios. Lately, I've been experimenting with custom configurations in Axios as shown below: import $axios from 'helpers/axiosInstance' $axios.get('/customers', { handlerEnabled: false }) However, wh ...

javascriptreactjstypescripttypesaxios

Tips for integrating Tesseract with Angular 2 and above

I'm currently exploring the use of Tesseract within one of my components for OCR processing on a file. .ts: import * as Tesseract from 'tesseract.js'; fileToUpload: File = null; handleFileInput(files: FileList) { this.fileToUpload = f ...

angulartypescriptimportocrtesseract

Example showcasing the functionality of the react-custom-scrollbars package in a TypeScript React application

In my TypeScript React project, I am struggling to set up the react-custom-scrollbars package successfully. Despite consulting the examples provided in the GitHub repository, I have not been able to get it working. Can someone share a functional example ...

reactjstypescriptnpm

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

htmlangulartypescript

What is the best way to display the source code of a function in TypeScript?

I am interested in obtaining the source code for my TypeScript function ** written in TypeScript **. Here is the TypeScript code: var fn = function (a:number, b:number) { return a + b; }; console.log("Code: " + fn); This code snippet displays the Ja ...

typescript

Sequencing API Calls: A Guide on Making Sequential API Requests

Currently, I am working on mastering RxJS. Within my project, there are 3 API calls that need to be made. Specifically, I must execute the 2nd API call and then pass its data as a parameter to the 3rd API call. My attempt at achieving this functionality is ...

angulartypescriptrxjs

unanticipated installation issue with published npm package on verdaccio

I am on a mission to create and release a package containing commonly used TypeScript functions on Verdaccio, an npm registry that operates on Docker. After completing the build for my TypeScript package, this is how my project structure looks: The impor ...

typescriptnpmnode-modulesverdaccio

Having trouble getting TypeScript to compile on Visual Studio Online TFS?

Currently, I am utilizing Typescript 1.7 within an MVC environment. Locally, my Typescript functions properly and compiles without any issues. However, when integrating with visualstudioonline TFS for continuous integration to an azure website, I have enc ...

typescripttfsbuildazure-devops

Different varieties of typescript variables

My variable is declared with two possible types. Consider this example: let foo: number | number[] = null; Then, I have an if condition that assigns either a single number or an array to that variable: if(condition) { foo = 3; } else { foo = [1,2,3 ...

angulartypescript

Learn how to connect a formArray from the parent component to the child component in Angular with reactive forms, allowing you to easily modify the values within the formArray

In my parent component, there is a reactive form with controls and a form group. When the user selects a playerType from a dropdown menu, I dynamically add a formArray to the formGroup. This form array will contain either 2 or 3 form groups based on the p ...

htmlangulartypescriptangular-reactive-formsangular-forms

Executing multiple http post requests in Angular2 using a for loop

I've encountered an issue while attempting to upload multiple files with individual titles. The problem arises when sending requests to the server, as I'm trying to pass each file and its corresponding title one by one. I have an array called bin ...

angulartypescripthttpfor-loopfile-upload