The Viem Type Inference ABI has mysteriously vanished

I followed the documentation and online resources to migrate from Viem 0.8.x to 1.4.1, but I am facing difficulties making it work as intended.

Here is the function I am trying to read from my ABI:

{
        inputs: [],
        name: 'getTreasuryAndPhilantrophyBalanceInUSD',
        outputs: [
            {
                internalType: 'uint256',
                name: 'treasuryBalance',
                type: 'uint256',
            },
            {
                internalType: 'uint256',
                name: 'philantrophyBalance',
                type: 'uint256',
            },
        ],
        stateMutability: 'view',
        type: 'function',
},

I have exported my ABI as a const in a TypeScript file:

import { Abi } from 'viem';

export const abiTest: Abi = [...] as const;

This is how I implemented ReadContract:

const resultRead = await client.readContract({
        abi: abiCfaPeriphery,
        address: '...' as Address,
        functionName: 'getTreasuryAndPhilantrophyBalanceInUSD',
    });

    console.log('Result Read: ', resultRead);

The console output now shows:

Result Read:  [ 902828817075004553524n, 0n ]

In previous implementations, I used to get:

Result Read:  [ 902828817075004553524n, 0n, treasuryBalance:xxxx, philantrophyBalance:xxxxx ]

With this change, I can no longer access individual balances like before, which has caused issues in my implementation. Is there something important that I might be overlooking?

I have thoroughly gone through the following resources:

Viem Type Inference Explanation

TypeScript Const assertions

Thank you

Answer №1

After seeking help in the official github repository and engaging in a discussion, I was able to identify the root cause of the issue. The solution can be found below:

https://example.com/docs/faq.html#why-is-this-happening

It appears that my previous use of ethers.js resulted in it returning a strange hybrid Array/Object type, which is not standard for JavaScript.

To address this issue, it is recommended to return tuples in your smart contract instead, ensuring that the object is explicitly defined.

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

Error: The Class object cannot be found in Object(...)(...)

I've been encountering a TypeError while trying to implement this angular code. The error seems to be generated around Class({constructor: function() {}}), but I'm not exactly sure why. Any help on this would be greatly appreciated. import "hell ...

Using Generic Types in TypeScript for Conditional Logic

To better illustrate my goal, I will use code: Let's start with two classes: Shoe and Dress class Shoe { constructor(public size: number){} } class Dress { constructor(public style: string){} } I need a generic box that can hold either a ...

I am looking to replicate a DOM element using Angular 4

I am interested in creating a clone of a DOM element. For example, if I have the following structure: <div> <p></p> <p></p> <p></p> <p></p> <button (click)="copy()"></button> & ...

A more efficient method for defining and utilizing string enums in Typescript

enum PAGES { HOME = 'HOME', CONTACT = 'CONTACT', } export const links: { [key: string]: string } = { [PAGES.HOME]: '/home', [PAGES.CONTACT]: '/contact', }; export function getLink(page: string) { return B ...

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

Enhancing connected components in typescript with the redux dispatch method

When developing a connected component in TypeScript, I encountered an interesting design question. The issue arises with modal components, which are somewhat unique in that they are part of the DOM and are only shown or hidden. This poses a challenge where ...

Shifting a collection of dictionaries using a fixed text value

My scenario involves three variables with the same type: const foo = { name: "foo", age: 12, color: "red" } as const; const bar = { name: "bar", age: 46, color: "blue" } as const; const baz = { name: "baz", ...

Issues with Testing Angular 7 Components with RouterTestingModule and Accessing getCurrentNavigation()

I am currently facing a challenge while testing a component that utilizes routerLink in the template (handled by RouterTestingModule) and getCurrentNavigation() in the corresponding ts file to access navigation state information. Initially, I attempted to ...

Issue with displaying data in HTML even though it appears in the console log in Angular framework

I am able to retrieve JSON data from my server-side and view it on the console log, but I am encountering difficulties rendering it on the HTML page. Could this be due to incorrect syntax? I am attempting to access data from my MongoDB and display it usin ...

Sending the router outlet parameter to the parent element

Main component: <main-component> <sub-menu [menuItems]="routerlist"></submenu> <router-outlet></router-outlet> </main-component> Definition of router-outlet in TypeScript: To populate the menu list, I have initial ...

What changes can be implemented to convert this function to an asynchronous one?

Is it possible to convert the following function into an asynchronous function? getHandledSheet(): void { this.timesheetService.getAllTimesheets().subscribe({next: (response: TimeSheet[]) => {this.timesheetsHandled = response.filter(sheet => ...

The combination of Material UI and React Hook Form is encountering an issue with submitting disabled checkboxes

My current challenge involves ensuring that all fields are disabled while the form is submitting. I have successfully implemented this for text, selects, and radios, but I am facing difficulties with required checkboxes. I am working with nextjs typescrip ...

Sorting data by percentages in AngularJS

I am currently facing an issue with sorting percentages in a table column. Despite using methods like parseFloat and other AngularJS (1.5.0) sorting techniques, the percentages are not being sorted as expected. [ {percentage: 8.82} {percentage: 0. ...

Tips on integrating Ionic 2 with Angular 2 services

I'm a beginner with Ionic 2. I came across information in the Angular 2 documentation stating that services need to be injected during application bootstrapping. However, I didn't see any mention of bootstrapping while following the Ionic 2 tuto ...

Establishing the placement of map markers in Angular

Currently, I am in the process of developing a simple web application. The main functionality involves retrieving latitude and longitude data from my MongoDB database and displaying markers on a map, which is functioning correctly. However, the issue I&apo ...

What is the best way to apply multiple array filters to an object list in react.js?

Looking to filter an array of items using multiple filter arrays in order to display only the items that match all selected filters. For example: The main array contains a table with the following data: ID TypeID LocationID Name 1 2 ...

Angular dependency issue: Expected '{' or ';' for @types/node

I encountered an error while running "ng serve" in my Angular application. Originally built as Angular 2, it was upgraded to Angular 8 (with attempts at versions 6 and 7 along the way). However, after migrating from Angular 5, I started experiencing errors ...

Refresh the content of an Angular modal with updated data each time the modal is launched

Currently, I am working on an angular web project that involves a main component class loading a Modal to update a report. Within this Modal, there are tabs - one of which is the transaction tab for which I am responsible. However, I have encountered an is ...

What is the best way to showcase images at random in Angular?

I am trying to display a random array of images in the UI, but I'm encountering an error with innerHTML when using the code below in TypeScript. randomPic(){ this.randomNum= Math.floor(Math.random() * this.myPix.length); console.log(this.rando ...

What is the syntax for typing the router instance in Next.js?

I'm working on a password reset request form in my Next.js project. Here's the code I have: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } fro ...