Skip to content

PhilippeR26/Starknet-WalletAccount

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Starknet-WalletAccount

Presentation :

This repo contains a DAPP to interact with the Starknet blockchain, using the new wallet API.

You can test this DAPP ; it's already deployed here.

Important

Stars are appreciated!

specification :

The official Starkware specification of the wallet API is here : https://github.com/starkware-libs/starknet-specs/wallet-api/wallet_rpc.json

The corresponding TypeScript library is here : https://github.com/starknet-io/types-js

Important

  • An easier way to read the Wallet API: a documentation I created is here.
  • A documentation for wallet teams is here.

Wallet API entry points :

The Wallet API tab is exposing all the low level entry points of this API :

WalletAccount usage :

The WalletAccount tab allows you to test some features of this new Starknet.js class. Let's see more in detail this WalletAccount.
It's very similar to a Starknet.js Account class. There is anyway a huge difference : the private key is hold in a browser wallet (as ArgentX or Braavos), and any signature is managed by the wallet.
The architecture is :

If you want to read Starknet, the WalletAccount will read directly the blockchain. That's why at the initialization of a WalletAccount, you need to put in the parameters a Provider instance. It will be used for all reading activities.

If you want to write to Starknet, the WalletAccount will ask to the Wallet to sign and send the transaction.
As several Wallets can be installed in your browser, the WalletAccount needs the ID of one of the available wallets. You can ask to get-starknet to display a list of available wallets and to provide as a response the ID of the selected wallet.
You can also create your own UI to select the wallet. In this DAPP, I have created a custom UI here.
So, you instantiate a new Wallet account with :

import { connect } from "get-starknet"; // v4.0.8
import { WalletAccount } from "starknet"; // v8.6.0
const myFrontendProvider = "https://free-rpc.nethermind.io/sepolia-juno/v0_7";
// UI to select a wallet :
const selectedWallet = await connect({ modalMode: "alwaysAsk", modalTheme: "light" }); 
const my_WAccount = new WalletAccount(myFrontendProvider, selectedWallet);

Then you can use all the power of Starknet.js, exactly as a with a normal Account instance.
And you have some extra functionalities :

  • subscription to these events : account / network changes in the wallet.
  • direct access to the wallet API entry points.

Getting Started 🚀 :

For a local usage :

First, run the development server:

npm i
npm run dev

Open http://localhost:3000 with your browser to see the result.
CTRL + SHIFT + I to see debug information.

The DAPP is made in the next.js framework. Coded in Typescript. Using Starknet.js v6.8.0, get-starknet v4, Next.js framework, Zustand context & Chaka-ui components.

Deploy on Vercel 🎊 :

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

About

Tutorial to connect a Wallet (argentX, Braavos, ...) in your DAPP, using the new Wallet API and the new WalletAccount class of Starknet.js

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors