简介
Starknet.js
是一个类似于ethers.js的库,提供了一系列API,能够将用户使用JavaScript / TypeScript语言编写的DAPP连接到Starknet网络,并执行declare
、deploy
、execute
等功能。
get-starknet
提供了一个hook,能够使Starknet DAPP和钱包无缝连接,支持多种钱包、多种模式。
安装
在react项目文件夹根目录下执行以下命令以安装starknet.js
和get-starknet
。
# using npm
npm install get-starknet starknet@next
# using yarn
yarn add get-starknet starknet@next
# using pnpm
pnpm 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文件中):文章来源:https://www.toymoban.com/news/detail-661877.html
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>
// 夜间模式
<button
onClick={handleConnect({
modalMode: "alwaysAsk",
modalTheme: "dark",
})}>
夜间模式
</button>
// 日间模式
<button
onClick={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网络进行交互。
文章来源地址https://www.toymoban.com/news/detail-661877.html
到了这里,关于使用Starknet.js和get-starknet编写简单的基于Starknet的DAPP的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!