Set up guide

Installation

To get started with integrating the web wallet SDK in your dApp, you will need to install the @argent/get-starknet package and its peer dependencies:

yarn add @argent/get-starknet starknet

or for usage with NPM:

npm install @argent/get-starknet starknet

If your application is using the starknet-react library, we've built a connector. The documentation is available here.

Imports

After installation, we get access to different methods, such as connect , disconnect, etc which we should import for use in our application:

import { connect, disconnect } from '@argent/get-starknet'

Establishing a connection

To establish a wallet connection, we need to call the connect method which was imported earlier like this:

const connection = await connect();

Below is an example function that establishes a connection, then sets the connection, provider, and address states:

const connectWallet = async() => {
  const connection = await connect({webWalletUrl: "https://web.argent.xyz"});

  if(connection && connection.isConnected) {
    setConnection(connection)
    setProvider(connection.account)
    setAddress(connection.selectedAddress)
  }
 }

And to reconnect to a previously connected wallet on load:

const connection = await connect({modalMode: "neverAsk", webWalletUrl: "https://web.argent.xyz"})

Example:

useEffect(() => {

  const connectToStarknet = async () => {
	
    const connection = await connect({modalMode: "neverAsk", webWalletUrl: "https://web.argent.xyz"})
	
    if (connection && connection.isConnected) {
      setConnection(connection);
      setProvider(connection.account);
      setAddress(connection.selectedAddress);
    }
  };
	
  connectToStarknet();
}, [])

Disconnecting wallet

To disconnect an existing connection, simply call the disconnect method from our imports:

await disconnect();

Example:

const disconnectWallet = async () => {

  await disconnect();
	
  setConnection(undefined);
  setProvider(undefined);
  setAddress('');
}

Available methods

1. isConnected - This method available after an attempt to establish a connection, can be used to confirm if an account was truly connected.

2. selectedAddress - This method can be called to get the wallet address of a connected account.

3. account - This method gives us access to the account object. It uses starknet.js AccountInterface and extends the starknet.js Provider.

It's important to note that web wallet is only available for users on mainnet. If as a dApp for integration and testing purposes, you need access to an internal testnet environment, please contact Argent privately.

Signing transactions

Signing transactions in web wallet is similar to how it's done using the Argent X browser extension.

const tx = await connection.account.execute({
   //let's assume this is an erc20 contract
   contractAddress: "0x...",
   selector: "transfer",
   calldata: [
	"0x...",
	// ...
   ]
})

It will show up like this to the user:

If the user's wallet is already funded it will ask the user to confirm the transaction. The dapp will get feedback if the user has confirmed or rejected the transaction request. If confirmed, the dapp will get a transaction hash.

Users wallet is not funded

In a case where the user has no funds, the user is guided through the “Add funds” screens where they can go to on-ramps and more. We tried to make the funding process of new wallets as easy as possible with regards KYC. Once this process is completed, the user's wallet will be funded and now ready to be deployed.

Users wallet is not deployed

After a user has funded their wallet, they are ready for their first transaction. The wallet deployment will be done along the first transaction and is almost invisible to the user. Just note that a connected wallet may not be deployed yet.

Further examples

We created an example dapp to demonstrate how to integrate the web wallet SDK into your application:

• Demo dapp

• Source code