ERROR TypeError: XDR Write Error: [object Object] is not a ScVal

[ysfkel]

Getting the following error when I call the add_account function in the below contract . The function takes a address argument, so from the react app, when i convert the address to ScVal using StellarSdk.Address, I get the error . I get thesame error when I try to call a simple contract that takes a simple i128 value . How do I convert javascipt types from a react app to scVal the corret way ?

list.tsx?t=1717348093628:50 Error in contractInvoke:  TypeError: XDR Write Error: [object Object] is not a ScVal
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:778:25)
    at F.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:605:35)
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:710:22)
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:779:69)
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:710:22)
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:779:69)
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:710:22)
    at F.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:605:35)
    at n2.write (@soroban-react_contracts.js?t=1717347073433&v=55163878:710:22)
    at n2.toXDR (@soroban-react_contracts.js?t=1717347073433&v=55163878:205:29)

import { TxResponse, contractInvoke} from "@soroban-react/contracts";
import { useSorobanReact } from '@soroban-react/core';

import * as StellarSdk from '@stellar/stellar-sdk';
import { useEffect } from "react";

const List = () =>  {
     const sorobanContext = useSorobanReact();

    const addr = new StellarSdk.Address('CB3RBKDU2ERADNOOQ2RVLEUSGSASPO53D67SUNRP2DJ7WR5JIZ3GXS4D').toScVal();

    const sendTx = async() => {
        try {
        const response = (await contractInvoke({
            contractAddress: "CD6VCRGMFSUKRSHJLC3OD5MDYZZ5EYL4EEIPHADZU4N2W3K2SH245UYA",
            method: 'add_account', 
            args: [addr], 
            sorobanContext,
            signAndSend: true,
            skipAddingFootprint: true, //
            fee: 100, 
          })) as TxResponse;

          console.log('response ', response)
        } catch (error) {
            console.error('Error in contractInvoke: ', error);
        }   
    }
    useEffect(() => {
        sendTx();
    }, [])

    return(<>
    </>)
}
export default List

Contract

#![no_std]
use soroban_sdk::{contract, contractimpl, log, symbol_short, Address, Env, Symbol};

const ACCOUNT: Symbol = symbol_short!("ACCOUNT");

#[contract]
pub struct MyContract;

#[contractimpl]
impl MyContract {

    pub fn add_account(env: Env, account: Address) {

        env.storage().instance().set(&ACCOUNT, &account); 
        env.storage().instance().extend_ttl(50, 100);
    }

    pub fn get_account(e: Env) -> Address {
        e.storage().instance().get(&ACCOUNT).unwrap()
    }
}

I also get exactly thesame error when i try to call a contract function which accepts a i128

import { TxResponse, contractInvoke, useContractValue} from "@soroban-react/contracts";
import {  useSorobanReact } from '@soroban-react/core';
import { useEffect } from "react";
import * as StellarSdk from '@stellar/stellar-sdk'; 
const List = () =>  {
     const sorobanContext = useSorobanReact();

     const numberScVal = new StellarSdk.XdrLargeInt("i128","1000000000000").toScVal();

    const xxx = async() => {
        try {
        const response = (await contractInvoke({
            contractAddress: "CD6VCRGMFSUKRMHJLC3OD5MDYZZ5EYL4EEIPHADZU4N2W3K2SH245XYO",
            method: 'update_counter', 
            args: [numberScVal],//args, 
            sorobanContext,
            signAndSend: false,
            skipAddingFootprint: true, //
            fee: 100,  
          })) as TxResponse;

          console.log('response ', response)
        } catch (error) {
            console.error('Error in contractInvoke: ', error);
        }   
    }
    useEffect(() => {
        xxx();
    }, [])

    return(<>
    </>)
}
export default List

Contract

#![no_std]
use soroban_sdk::{contract, contractimpl, log, symbol_short, Address, Env, Symbol};

const COUNTER: Symbol = symbol_short!("COUNTER"); 
#[contract]
pub struct IncrementContract;

#[contractimpl]
impl IncrementContract {

    pub fn update_counter(env: Env, number: i128) {
        // Save the count.
        env.storage().instance().set(&COUNTER, &number);  
    } 

    pub fn get_counter(e: Env) -> i128 {
        e.storage().instance().get(&COUNTER).unwrap()
    }

}

@esteblock , @mauroepce , @benjaminsalon , @rdevperu , @paulbellamy @joaquinsoza , @abstract829 , @sreuland , @chopan123 @tsachiherman

[benjaminsalon]

Hey @ysfkel can you tell me which version of @stellar/stellar-sdk you are using in your project? It's probably a mismatch between the version you are using and the version @soroban-react is using. @soroban-react is currently a bit late and still using the v11.3.0. We should update the version on our side soon @esteblock , but in the mean time @ysfkel you can try to match the version and use v11.3.0.

@esteblock I think this is an example of why we should expose the helper methods as part of @soroban-react and remove the need for having the @stellar/stellar-sdk package in the frontend to avoid mismatch with breaking changes.

[ysfkel]

``

Hey @ysfkel can you tell me which version of @stellar/stellar-sdk you are using in your project? It's probably a mismatch between the version you are using and the version @soroban-react is using. @soroban-react is currently a bit late and still using the v11.3.0. We should update the version on our side soon @esteblock , but in the mean time @ysfkel you can try to match the version and use v11.3.0.

@esteblock I think this is an example of why we should expose the helper methods as part of @soroban-react and remove the need for having the @stellar/stellar-sdk package in the frontend to avoid mismatch with breaking changes.

Hey @benjaminsalon ,thanks for the response, I tried v11.3.0 however, I got thesame error