How do I call a smart contract function in my frontend?

TypeScript SDK
1

I want to call a function in my frontend. What are the methods to do this?

2

You can use .get() or .call() to call a function in your contract.

get() is for read-only functions and doesn’t require a signature from the user. .call() is for writing functions and requires a signature from the user.

Here is an example:

// Connects out Contract instance to the deployed contract
// address using the given wallet.
const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);

function App() {
  useEffect(() => {
    async function main() {
      // Executes the counter function to query the current contract state
      // the `.get()` is read-only, because of this it don't expand coins.
      const { value } = await contract.functions.count().get();

In this example, we’re calling a function called count with the .get() method.

Check out the repo for this code to see a simple example.

Check out the developer quickstart for a step by step guide for creating a fullstack dapp on Fuel.

3

But, how do I call a function with a Vec parameter? The request ends with

Error: unexpected Vec decode (argument="struct", value="not implemented", code=INVALID_ARGUMENT, version=0.20.0)

for the call as follows:

    const args = [
      "0x4254430000000000000000000000000000000000000000000000000000000000",
    ];


    const a = new VecCoder(new B256Coder()).getEncodedVectorData(args);
    /// const b = new VecCoder(new B256Coder()).encode(args);
    
    const result = await contract.functions.read_prices([a]).get();

The abi is

    #[storage(read)]
    fn read_prices(feed_ids: Vec<b256>) -> Vec<U256>;
4

You can see how in the TS-SDK docs here: Vectors | Fuels-ts .

5

You mean

const result = await contract.functions.read_prices(args).get();

?

No, that doesn’t work too. The same result.

6

OK, that’s because of returning Vec, not because of passing it as an argument, probably.