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

这篇具有很好参考价值的文章主要介绍了使用Starknet.js和get-starknet编写简单的基于Starknet的DAPP。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

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

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

安装

在react项目文件夹根目录下执行以下命令以安装starknet.jsget-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

基础用法

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

import { connect, disconnect } from "get-starknet"

return <button onClick={() => connect()}>Connect wallet</button>
<button onClick={() => disconnect()}> Disconnect Wallet</button>

最终实现的效果为下图所示:
使用Starknet.js和get-starknet编写简单的基于Starknet的DAPP,区块链开发,javascript,开发语言,typescript,区块链,零知识证明

高级用法

除了最基本的链接和断开,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中的接口providersigner等等,进而能够与Starknet网络进行交互。
使用Starknet.js和get-starknet编写简单的基于Starknet的DAPP,区块链开发,javascript,开发语言,typescript,区块链,零知识证明文章来源地址https://www.toymoban.com/news/detail-661877.html

到了这里,关于使用Starknet.js和get-starknet编写简单的基于Starknet的DAPP的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • zkEVM战局简析:zkSync、StarkNet、Scroll和挑战者们

    不同的项目正在探索不同的方向,这或许是最利于行业的发展模式。 原文作者: Grant Griffith, 由 Odaily星球日报  Azuma  编译。 编者按:10 月 28 日,由 Matter Labs 构建的以太坊扩容解决方案正式发布了 zkSync 2.0 的第一阶段 Baby Alpha,虽然出于测试需求,该网络暂时不会向外部参

    2024年02月08日
    浏览(32)
  • you-get:一行命令下载视频和Python简单使用you-get

    安装you-get库如下所示 一般的you-get 下载命令如下所示 例如:you-get https://www.bilibili.com/video/BV13V41117xc?spm_id_from=333.337.search-card.all.click 效果如下: 下载命令:-l使用如下所示。 例如 效果如下所示。 运行的代码如下所示。 可以看到视频的下载信息。 视频具有下载信息的格式。

    2024年01月17日
    浏览(40)
  • 原生js创建get/post请求以及封装方式、axios的基本使用

    原生js创建get请求 原生js创建post请求 原生get和post封装方式1 原生get和post封装方式2 axios的基本使用

    2024年02月21日
    浏览(41)
  • 【Java】HashMap的简单使用(含小部分源码,get报错问题)

       📝个人主页:哈__ 期待您的关注  一、HashMap的特点 二、HashMap的一些常用方法  ①.put(K key, V value) 将键(key)/值(value)映射存放到Map集合中(HashMap的key值不可重复,如果已经有了该key值的存在,那么就会更新该key的value值)     ②.get(Object key) 返回指定键所映射的值

    2024年04月15日
    浏览(31)
  • 使用js编写一个函数判断所有数据类型的通用方法

    一、判断数据类型的方法 1、typeof 在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。 对于数组、对象来说,其关系错综复杂,使用 typeof 都会统一返回 “object” 字符串。 要想区别对象、数组单

    2024年02月22日
    浏览(48)
  • 使用Flask编写一个最简单的后端接口

    Flask是一个轻量级的Python Web框架,它使用Python语言编写,并且使用MVC模式进行开发。Flask被称为微框架,但这并不意味着它只能处理小型应用程序,而是指它的代码结构简单、易于扩展。 Flask架构适合小型和中型的应用程序开发,它提供了构建Web应用程序所需的基本功能,包

    2024年02月09日
    浏览(34)
  • 使用Go语言编写简单的HTTP服务器

    在Go语言中,我们可以使用标准库中的\\\"net/http\\\"包来编写HTTP服务器。下面是一个简单的示例,展示了如何使用Go编写一个基本的HTTP服务器。 go 复制代码 package  main import  ( \\\"fmt\\\"   \\\"net/http\\\"   ) func   main ()  { // 创建一个处理器函数,处理所有对根路径的请求 handler := func (w http.

    2024年01月24日
    浏览(47)
  • 使用Python编写简单的小程序、成绩计算器

    成绩计算器程序需要两个分数,以百分比表示 - 一个用于项目,一个用于考试。 项目和考试都为最终评估成绩贡献了50%。 程序应从中计算出总体百分比,并使用下表中的数据计算出最终成绩: 例 项目分数 - 78%,考试分数 - 65%。 最终成绩 = 71.5% ((78 + 65)*0.5),最终成绩

    2024年02月11日
    浏览(35)
  • 如何使用PHPUnit编写一个PHP单元测试-简单的代码示例

    在软件开发过程中,单元测试是一种重要的测试方法,可以确保代码的质量和可靠性。在PHP开发中,也可以通过编写单元测试来验证代码的正确性。下面将介绍一些编写PHP单元测试的基本步骤和常用工具。 首先,你需要一个PHP单元测试框架,比如PHPUnit。PHPUnit是PHP社区最流行

    2024年02月04日
    浏览(53)
  • kotlin 编写一个简单的天气预报app (七)使用material design

    对之前的天气预报的app进行了优化,原先的天气预报程序逻辑是这样的。 使用text和button组合了一个输入城市,并请求openweathermap对应数据,并显示的功能。 但是搜索城市的时候,可能会有错误,比如大小写,比如拼写之类的,所以打算给他升级一下。 目标: 在搜索的时候需

    2024年04月27日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包