使用Starknet.js和get-starknet编写简单的基于Starknet的DAPP

简介

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文件中)：

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网络进行交互。