@argent/get-starknet

Introduction

@argent/get-starknet package is a light package wrapper around Starknet.js, developed for seamless interaction with any wallet extension on StarkNet.

Starknet.js is an open-source Javascript Library, that allows developers to interact with StarkNet from a front-end client.

To get started with this package, we need to take a short detour to understand a few concepts from Starknet.js.

Provider

The Provider is an API from Starknet.js, that enables you to interact with StarkNet, without necessarily signing messages, e.g. when performing read calls. You can read states without signing messages, but you cannot alter or modify the contract’s state.

Account

The Account API extends the primary features of the Provider API to also include the Signer API, which can be used to create and verify signatures.

This API unlike the Provider, can make both read and write calls to the blockchain, and as such is the primary way to interact with StarkNet contracts.

Signer

The Signer API simply allows you to sign transactions and messages.

Contract

Contracts are primarily how we create instantiations of our smart contracts with javascript. It takes in the contract’s ABI, the contract’s address, and the provider or account.

Installation

To get started with @argent/get-starknet, you’d need to install it as a yarn or NPM package into your project. To do this, run:

yarn add @argent/get-starknet starknet

or for usage with NPM:

npm install @argent/get-starknet starknet

Usage with dApp

After installation, you’d have access to a connect function which you need to import and call to enable the user to pick a wallet on a button click:

import { connect } from "@argent/get-starknet"

const starknet = connect()

You can also try to connect to an approved wallet silently:

const starknet = connect({ showList: false })

Next, we want to throw an error, if connection was not found (ie the starknet variable was not initialised):

if (!starknet) {
  throw Error("User rejected wallet selection or silent connect found nothing")
}

If connection was found, we can go ahead to connect our wallet:

await starknet.enable()

Rather than the random connection we did above, we can also create a connection using a specific package version:

await starknet?.enable({ starknetVersion: "v4" })

Check if wallet connection was successful, and if yes, you can make read and write calls to your starknet contract using the account API:

if(starknet.isConnected) {
    starknet.account.execute({ ... })
} 

If the connection wasn’t successful, you still have access to the provider API which you can use to make read calls to the blockchain:

else {
    starknet.provider.callContract( ... )
}

You can also get the connected user’s wallet address from the starknet variable, like this:

const userAddress = starknet.selectedAddress

Sample connection logic using React

const connectWallet = async() => {
   try{
         const starknet = await connect()
         await starknet?.enable({ starknetVersion: "v4" })
         // set account to an account state
        setAccount(starknet.account)     
        // set user address to an address state 
        setAddress(starknet.selectedAddress)     
        // set connection status to an IsConnected state     
        setIsConnected(true)   
      }   
    catch(error){
        alert(error.message)
    }
}

Contract Instantiations

With contracts, we get to do data transformations in JavaScript based on an ABI. To create a contract instantiation, we need the contract’s ABI, contract’s address, and the provider or account.

The contract’s ABI and address can be gotten from compiling and deploying the contract, while we can get our provider or account from the starknet variable initialised on the wallet connection.

It is advisable to instead use an account, than a provider as account extends the features of the provider API, enabling us to make both reads and write calls to StarkNet contracts.

To instantiate a contract, we need first to get the account API:

const account = starknet.account

Then we can now instantiate using the ABI, contract address and the account API:

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

Example dApp and source code

We created an example dApp that you could try out to understand how to easily connect your wallet using the @argent/get-starknet package.

https://argentlabs.github.io/argent-x/

The source codes are also available in our GitHub repo here:

github.com/argentlabs/argent-x