"Enhance Your Smart Contract Interaction with Algrand's Method Calling

Currently, I am working on integrating an Algorand smart contract with a Next.js application. To sign transactions, I am utilizing Pera wallet. However, I have encountered an issue when attempting to call methods from the contract on the front end using the ABI and AtomicTransactionComposer. The error message received is as follows:

URLTokenBaseHTTPError: Network request error. Received status 400 (): TransactionPool.Remember: transaction BCJJTOCFMIZOJZNRKDFCIOPMXWRFUUQ24DDJWGJWRD46UXUYSZ7A: logic eval error: invalid Box reference 0x3239303135313533. Details: pc=587, opcodes=frame_dig -1; extract 2 0; box_get

Below is the relevant code snippet where I attempt to call the method in the smart contract:

const algodToken = '';
    const algodServer = 'https://testnet-api.algonode.cloud';
    const algodPort = undefined;
    const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
const suggestedParams = await algodClient.getTransactionParams().do();
    console.log('suggestedParams:', suggestedParams);

    const contract = new algosdk.ABIContract(myabi);
    const atc = new algosdk.AtomicTransactionComposer();

    atc.addMethodCall({
        suggestedParams,
        sender: account,
        signer: async (unsignedTxns) => {
            const txnGroups = unsignedTxns.map((t) => ({txn: t, signers: [t.from]}));
            return await peraWallet.signTransaction([txnGroups]);
        },
        appID: 468709015,
        method: algosdk.getMethodByName(contract.methods, 'readFundsWithdrawnStatus'),
        methodArgs: [APN],
    });

    const results = await atc.execute(algodClient, 3);
    console.log(`Contract read success ` + results.methodResults);
    return results.methodResults

The specific method that I am trying to call in the smart contract is as follows:

@app.external
def readFundsWithdrawnStatus(item_name: abi.String, *, output: abi.Bool) -> Expr:
    existing_sender_funds_item = SenderFundsContract()
    return Seq(
        existing_sender_funds_item.decode(app.state.sender_funds_item[item_name.get()].get()),
        output.set(existing_sender_funds_item.fundsWithdrawn) 
    )

I suspect that the network error may be due to either the methodArg being passed or potential issues with the AppID deployment. Any insights would be greatly appreciated.

Answer №1

Invalid box reference occurs when your transaction is missing references to boxes that are being read or written to. The AVM requires knowledge of all the resources it will interact with before execution, and this information must be included in the transaction.

In this particular scenario, the box reference seems to be item_name, which corresponds to APN in your client-side code. To include this box reference, you should add the following parameter to your addMethodCall:

boxes: { appIndex: 468709015, name: algosdk.ABIStringType.encode(APN) }
    atc.addMethodCall({
        suggestedParams,
        sender: account,
        signer: async (unsignedTxns) => {
            const txnGroups = unsignedTxns.map((t) => ({txn: t, signers: [t.from]}));
            return await peraWallet.signTransaction([txnGroups]);
        },
        appID: 468709015,
        method: algosdk.getMethodByName(contract.methods, 'readFundsWithdrawnStatus'),
        methodArgs: [APN],
        boxes: { appIndex: 468709015, name: algosdk.ABIStringType.encode(APN) }
    });

Visit for detailed documentation on addMethodCall

For more information about resources, check out

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

Troubleshooting Vue 3 Computed Property Not Updating

I'm currently facing a challenge while developing a login form using Vue 3. I am having difficulty in getting the state to update 'realtime' or computed. When attempting to login a user from the template, the code looks like this: <button ...

Activate Popover with Hover and simply click anywhere to dismiss

Currently utilizing Bootstrap 4 and intrigued by the popover feature that activates on hover and closes when clicked anywhere. I'm also interested in making links functional within the popover. Any suggestions or tips on how to achieve this? $(doc ...

Strings that automatically adjust to fit the content from a JSON object

I have a JSON object with a long string that I want to display. The string looks like this: "String":"<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever si ...

What is the best way to allow all authenticated routes to display the Devise ajax Login form?

I have successfully incorporated Devise to accept Ajax Login and have designed a form for logging in via ajax, displayed within a modal. However, I am only able to view the form and login when I set up event binders for specific buttons that activate the m ...

Handling Datatable: Executing an asynchronous function post an Ajax request

Upon receiving data from the web server, I want to manipulate it in Datatable. However, the response data is encoded and requires decoding using an asynchronous function called decodeData(). I attempted to call this async function in the dataSrc section as ...

Revamping array elements in React

Once I added an element to the array, I needed to update this array by doubling all elements except for the one that was just added. Despite trying setArray([]) before retrieving the array from the database, it didn't seem to work... const [array, se ...

Exploring alternatives to ref() when not responsive to reassignments in the Composition API

Check out this easy carousel: <template> <div ref="wrapperRef" class="js-carousel container"> <div class="row"> <slot></slot> </div> <div class=&q ...

Unable to save data retrieved using jQuery JSONP

My current project involves fetching photo data from Flickr using a jQuery AJAX call with JSONP. However, instead of immediately using the data, I want to store it for future use. In some cases, users will be able to perform different queries on the pre-fe ...

I am attempting to utilize diagram.highlightCollection in gojs to showcase nodes that do not meet a specific condition

I have a list of node IDs (keys) and I need to highlight those nodes. For empty nodes, the same condition works fine. For example: checkEmptyNodes() { const emptyNodes = []; const diagDetails = this.myserv.getDiagramData(); ...

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

I am trying to extract the value of a textbox inside a Nested Gridview using jQuery in ASP.NET. When a Button within the Nested Gridview is clicked, I want to display the textbox value in an alert box. Here is an example setup: <asp:GridView ID="Grid ...

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

What's the best way to keep track of the number of objects I've created

Using this HTML code, I can create member objects. However, I also need to determine the count of these member objects for certain calculations. Additionally, when a member object is deleted, the count of member objects should be reduced accordingly. The ...

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

I am implementing a code in the middleware.ts file to redirect users to specific pages based on their role. Here is the code snippet: import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { get ...

Addon for Firefox: Image Upload

I am looking for a way to streamline the process of uploading an image to a website through a Firefox Addon. While I know it is possible to use createElement('canvas'), convert Image data to base64, and XHR POST the data, I would prefer to lever ...

"Customize the look of the action button in Material-UI's

Is there a way to customize the appearance of action buttons within a Dialog, DatePicker, or TimePicker by accessing the containing div? I'm looking to add padding between these buttons and potentially change the background color of the div generated ...

Starting data initialization using a property object within a Vue component

I am encountering an issue with two Vue components, EventTask and EventCard. Within EventTask, there is a currentEvent object in the data section, which I pass as a prop to EventCard using the following code snippet: <event-card :current-event="cur ...

Capturing Data from Tables and Saving it with Protractor

Imagine having a table structured like this <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Code</th> </tr> <tr> <td>Alfreds Fu ...

What is the best way to switch from rows to cards in Bootstrap version 5.3?

In my current project, Next JS is the framework I am working with. I am faced with the challenge of creating a card layout that adapts based on device size - for smaller devices, I want a plain card with the image on top and text below, similar to Bootstra ...

Issue encountered in Angularjs during upgrade process from version 1.2.27 to 1.4.7

Recently, I upgraded my app from using AngularJS 1.2.27 to version 1.4.7, but now I am encountering an error in the AngularJS file. SyntaxError: Unexpected token : (angular.js:12477) at Function (native) at Object.sd. ...

If the URL matches a specific path, then append a parameter

I've created a script that adds a parameter to a URL based on specific subfolders. For example, if the URL contains /de, it will add ?_sft_language=german. However, I'm encountering an issue where the code is running multiple times instead of jus ...