An In-depth Guide To Getting Started With Starknet.js

Sadly, things are not quite as polished yet, with Starknet.js, as you’d find with ethers.js or web3.js, owing to the Starknet ecosystem being relatively new, so it took me some days of struggle, to finally build a working UI, which you can find here.

For this tutorial, we’d need:

1. The contract’s ABI

2. The contract’s Address

3. An Argent or Braavos wallet

4. React.js [front-end framework]

5. get-starknet [dependency]

6. Starknet [dependency]

7. Buffer [dependency]

For the sake of time, and as this tutorial is not targeted at learning Cairo, we’d be skipping the part of writing contracts and deploying to Starknet, and we’d just make use of the ABI and contract address of a contract i already deployed previously.

Here’s a peek at the contract, which consists of one storage variable names, one external function storeName, and one view function getName.

%lang starknetfrom starkware.cairo.common.math import assert_nnfrom starkware.cairo.common.cairo_builtins import HashBuiltinfrom starkware.starknet.common.syscalls import get_caller_address@storage_varfunc names(address: felt) -> (name: felt):end
@externalfunc storeName{syscall_ptr: felt*, pedersen_ptr: HashBuiltin*, range_check_ptr}(  _name: felt):  let (caller) = get_caller_address()  names.write(caller, _name)  return ()end
@viewfunc getName{syscall_ptr: felt*, pedersen_ptr: HashBuiltin*, range_check_ptr}(  _address: felt) -> (name: felt): let (name) = names.read(_address) return (name)end

Contract ABI

[
{
"inputs": [
{
"name": "_name",
"type": "felt"
}
],
"name": "storeName",
"outputs": [],
"type": "function"
},
{
"inputs": [
{
"name": "_address",
"type": "felt"
}
],
"name": "getName",
"outputs": [
{
"name": "name",
"type": "felt"
}
],
"stateMutability": "view",
"type": "function"
}
]

Contract Address

0x049e5c0e9fbb072d7f908e77e117c76d026b8daf9720fe1d74fa3309645eabce