Set up guide
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.
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'
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 which establishes a connection, then sets the
connection, provider, and address states:const connectWallet = async () => {
const connection = await connect();
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" });
Example:
useEffect(() => {
const connectToStarknet = async () => {
const connection = await connect({ modalMode: "neverAsk" });
if (connection && connection.isConnected) {
setConnection(connection);
setProvider(connection.account);
setAddress(connection.selectedAddress);
}
};
connectToStarknet();
}, [])
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('');
}
- 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.
The Web Wallet SDK also gives developers the option to customize the look of the connect Modal.
You could choose which wallet options you would like to make available to your users, or decide to go email only!
All modal variants
For full connection options (1st option shown):
const connection = await connect();
For an alternative look (2nd option shown):
const connection = await connect({
modalWalletAppearance: "all"
});
For email only (3rd option shown):
const connection = await connect({
include: ["argentWebWallet"]
modalWalletAppearance: "email_only",
});
To exclude web wallet from the modal:
const connection = await connect({
exclude: ["argentWebWallet"]
});
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.
We created an example dapp to demonstrate how to integrate the web wallet SDK into your application:
Last modified 1mo ago