文章目录

  • 简介
  • 安装
  • 基础用法
  • 高级用法

简介

Starknet.js是一个类似于ethers.js的库，提供了一系列API，能够将用户使用JavaScript / TypeScript语言编写的DAPP连接到Starknet网络，并执行declare、deploy、execute等功能。

get-starknet提供了一个hook，能够使Starknet DAPP和钱包无缝连接，支持多种钱包、多种模式。

安装

在react项目文件夹根目录下执行以下命令以安装starknet.js和get-starknet。

# using npmnpm install get-starknet starknet@next# using yarnyarn add get-starknet starknet@next# using pnpmpnpm add get-starknet starknet@next

基础用法

通过引入connect和disconnect来快速链接到或者断开钱包。下面展示一个简单的模板：

import { connect, disconnect } from "get-starknet"return <button onClick={() => connect()}>Connect wallet</button><button onClick={() => disconnect()}> Disconnect Wallet</button>

最终实现的效果为下图所示：

高级用法

除了最基本的链接和断开，get-starknet 还提供了一系列模式来实现链接钱包界面的颜色以及静默连接等。具体实现如下代码所示(用typescript编写，放在app.tsx文件中)：

function App() {const [walletName, setWalletName] = useState("")// 链接模式选择函数function handleConnect(options" />: ConnectOptions) {return async () => {const res = await connect(options)console.log(res) // 可通过此res获取starknet接口setWalletName(res?.name || "")}}// 断开模式选择函数function handleDisconnect(options?: DisconnectOptions) {return async () => {await disconnect(options)setWalletName("")}}return (<div className="App"><h1>get-starknet</h1><div className="card"><button onClick={handleConnect()}>链接钱包</button>// 每次连接前都会弹出链接对话框<button onClick={handleConnect({ modalMode: "alwaysAsk" })}>总是询问</button>// 静默连接<button onClick={handleConnect({ modalMode: "neverAsk" })}>从不询问</button>// 夜间模式<buttononClick={handleConnect({modalMode: "alwaysAsk",modalTheme: "dark",})}>夜间模式</button>// 日间模式<buttononClick={handleConnect({modalMode: "alwaysAsk",modalTheme: "light",})}>日间模式</button><button onClick={handleDisconnect()}>断开连接</button><button onClick={handleDisconnect({ clearLastWallet: true })}>断开连接并重置</button></div>{walletName && (<div><h2>Selected Wallet: <pre>{walletName}</pre></h2></div>)}</div>)}

连接钱包后，返回值的res是一个如下图所示的对象，通过这个对象，我们可以提取到starknet.js中的接口provider 、signer等等，进而能够与Starknet网络进行交互。