How to Call Smart Contracts from the Frontend

In this guide, you will learn how to interact with Klever smart contracts from your frontend application using the Klever JavaScript SDK.

Prerequisites

Klever Extension installed in browser
A deployed smart contract on Klever Blockchain
Basic JavaScript/TypeScript knowledge

Setup

Install the required packages:

npm install @klever/connect-contracts @klever/connect-wallet @klever/connect-provider

Connect a browser wallet:

import { KleverProvider } from '@klever/connect-provider'
import { BrowserWallet } from '@klever/connect-wallet'

const provider = new KleverProvider('testnet')
const wallet = new BrowserWallet(provider)

// Prompts the user to connect via Klever Extension
await wallet.connect()
console.log('Connected:', wallet.address)

Reading Contract Data (View Functions)

View functions don't modify state and are free to call. Use contract.call():

import { Contract } from '@klever/connect-contracts'
import contractAbi from './mycontract.abi.json'

// Provider-only — no wallet needed for reads
const provider = new KleverProvider('testnet')
const contract = new Contract(contractAddress, contractAbi, provider)

const counterValue = await contract.call('getCounter')
console.log('Counter:', counterValue)

Writing to Smart Contracts (State-Changing Functions)

Write functions require gas and user approval. Use contract.invoke():

import { Contract } from '@klever/connect-contracts'
import { BrowserWallet } from '@klever/connect-wallet'
import { KleverProvider } from '@klever/connect-provider'

const provider = new KleverProvider('testnet')
const wallet = new BrowserWallet(provider)
await wallet.connect()

const contract = new Contract(contractAddress, contractAbi, wallet)

// Sends a transaction — prompts user approval in Klever Extension
const tx = await contract.invoke('increment')
console.log('Transaction hash:', tx.hash)

Functions with Parameters

Pass arguments as spread args — the SDK encodes them from the ABI automatically:

// u32 parameter
const tx = await contract.invoke('setValue', 42)

// Address + BigUint parameters
const tx = await contract.invoke('transfer', recipientAddress, 1000n)

// Wait for on-chain confirmation (optional)
const receipt = await tx.wait()
console.log('Confirmed!')

Payable Functions

To send KLV along with a call, pass { value: { KLV: amount } } as the last argument:

import { parseKLV } from '@klever/connect-core'

const tx = await contract.invoke(
  'bet',
  1,
  50,
  { value: { KLV: parseKLV('10') } }, // Send 10 KLV with the call
)

Complete Example

Here's a minimal working example that reads and writes to a counter contract:

import { KleverProvider } from '@klever/connect-provider'
import { BrowserWallet } from '@klever/connect-wallet'
import { Contract } from '@klever/connect-contracts'
import contractAbi from './counter.abi.json'

const CONTRACT_ADDRESS = 'klv1your_contract_address'
const provider = new KleverProvider('testnet')
const wallet = new BrowserWallet(provider)

// Connect wallet
await wallet.connect()
console.log('Connected:', wallet.address)

// Create contract instance
const contract = new Contract(CONTRACT_ADDRESS, contractAbi, wallet)

// Read counter value (free)
const currentValue = await contract.call('getCounter')
console.log('Current counter:', currentValue)

// Increment counter (sends transaction)
const tx = await contract.invoke('increment')
console.log('Transaction sent:', tx.hash)

// Wait for confirmation
const receipt = await tx.wait()
console.log('Confirmed!')

That's it! For the full Contract API including event parsing and ABI utilities, see connect-contracts.