首页 > 其他分享 >从 Web2 起点探索 Coinbase API

从 Web2 起点探索 Coinbase API

时间:2022-09-21 11:57:05浏览次数:355  
标签:wallet Web3 开发人员 Web2 coinbase API Coinbase SDK

从 Web2 起点探索 Coinbase API

对从哪里开始使用 Web3 感到困惑?开始使用 Coinbase 开发者工具

Image from 关注

1977年,我心中那个有抱负的音乐家在看了电影《星球大战》后想学钢琴。我的目标是学习如何演奏每个人都在谈论的电影的主题,所以我买了乐谱。我们家里有一架钢琴,是我祖父母送给我们的礼物。

当我看到页面上的所有注释时,10岁版本的我很快就不知所措了:

我想我可以从更简单的开始,所以我开始在钢琴凳上筛选文件。然后我发现了这个很酷的音符图表模板,它非常适合钢琴的琴键。我找不到完全匹配的,但是 这里 是一个例子:

这对我来说改变了游戏规则。我把所有其他的音乐都扔回钢琴凳上,开始工作,学习如何演奏《星球大战》。在很短的时间内,我学会了在没有一节课的情况下演奏那首歌(和钢琴)。

这让我想知道为什么这样的“模板”并不存在于生活的各个方面。

新技术的 Catch-22

新的语言、平台、框架和设计模式都有一个共同的要求——开发人员的接受和采用。大多数情况下,大多数人都有另一个共同挑战:比预期更陡峭的学习曲线。

对我来说,Web3 目前处于这种状态,尽管我已经在我的“ 从全栈开发人员转变为 Web3 先锋 “ 出版物。

前沿开发人员已经在使用 Web3 做伟大的事情。但是接下来的一百万开发者——比如我——想要开始而不感到不知所措和沮丧呢?我们如何找到一种方法让他们使用 Web3?

我想找到一个用于 Web3 开发的帮助模板,我在开始探索 Coinbase SDK .

Coinbase SDK/API

根据维基百科, 币库 是一家美国上市公司,自 2012 年 6 月起运营加密货币交易平台。与我所写的类似 马基塔 , Coinbase 提供了一系列应用程序编程接口 (API) 和软件开发工具包 (SDK),供有兴趣构建专注于数字货币的应用程序的开发人员使用。

一个这样的例子是 Coinbase 钱包 SDK .

对于本出版物,我想完成以下任务:

  • 使用 React 创建一个简单的 Web3 应用程序
  • 将我的钱包浏览器扩展与 Dapp 集成
  • 允许用户使用 Coinbase 钱包 SDK 进行捐赠

使用 Coinbase 钱包 SDK 创建 Web3 应用程序

首先,我们可以使用 React CLI 创建一个名为 coinbase-wallet-example 的 React 应用程序:

npx create-react-app coinbase-wallet-example

创建 React 应用程序后,我使用以下命令更改为 coinbase-wallet-example 目录:

cd coinbase-wallet-example

由于较新版本的 create-react-app 不再包含 polyfill 支持——这是使用的必要要求 web3.js 正确 - 这需要旧版本的 react-scripts:

npm install --save-exact [[email protected]](/cdn-cgi/l/email-protection)

由于我们将构建一个 Web3 示例,因此使用 npm 安装了 web3 框架(可以找到其他选项 这里 ):

npm 安装 web3

接下来,使用 npm 安装 Coinbase Wallet SDK(其他选项可以找到 这里 ):

npm install @coinbase/wallet-sdk

使用 胖的 区块链开发套件,我创建了一个名为 coinbase 钱包示例

接下来,我切换到 Ropsten 测试网络并记下项目的密钥和 URL:

现在,我们只需要包含以下代码来初始化 Coinbase 钱包 SDK 和 Web3 对象:

 从'导入 CoinbaseWalletSDK[ @coinbase/wallet-sdk](https://twitter.com/coinbase/wallet-sdk) '  
 从“web3”导入 Web3; const APP_NAME = 'coinbase-wallet-example';  
 常量 APP_LOGO_URL = './coinbase-logo.png';  
 常量 DEFAULT_ETH_JSONRPC_URL = '[ https://ropsten.infura.io/v3/56f](https://ropsten.infura.io/v3/56f) ... d69';  
 常量 DEFAULT_CHAIN_ID = 3; // 1=以太坊(主网),3=Ropsten,5=Gorli

在 - 的里面 使用效果() 在我的应用程序的方法中,我包含了初始化 Coinbase 钱包和 Web3 的必要代码:

 const coinbaseWallet = new CoinbaseWalletSDK({  
 应用名称:APP_NAME,  
 appLogoUrl:APP_LOGO_URL,  
 }); 常量 walletSDKProvider = coinbaseWallet.makeWeb3Provider(  
 DEFAULT_ETH_JSONRPC_URL,  
 DEFAULT_CHAIN_ID  
 ); const web3 = new Web3(walletSDKProvider);

对于这个非常简单的示例,我们不会利用智能合约,而是提供一个目标地址来发送捐款:

 const DONATION_ADDRESS = '0x7 ... c94';

为了降低风险,将更新代码以设置 捐赠地址 到正在使用的钱包的连接地址。

DONATION_ADDRESS = 帐户;

这意味着代码将向发送者发送资金,只留下从用户钱包中提取的汽油费。 React Dapp 将允许用户连接他们的钱包,然后提供捐赠金额(使用 WEI 单位),然后按下捐赠按钮将资金发送到 捐赠地址 .

这个简单 Dapp 的完整源代码如下所示:

运行基于 React 的 Dapp 就像使用以下命令一样简单:

npm 开始

结论

自 2021 年以来,我一直在努力遵循以下使命宣言,我认为它适用于任何 IT 专业人士:

“将时间集中在提供扩展知识产权价值的特性/功能上。将框架、产品和服务用于其他一切。”

— J.维斯特

我在介绍中引用的笔记图表模板被证明是我生命中的一个关键点。这颗隐藏在我们钢琴长凳上的宝石不仅让我能够演奏《星球大战》主题曲,还提升了我演奏音乐的能力。这个简单的模板和学习的愿望最终为我进入 伯克利音乐学院 以及参与多部音乐作品的能力。

Coinbase API 和 SDK(或开发人员工具)为渴望在新兴 Web3 世界中起步的开发人员提供了类似的目的。开发人员可以将这些模块包含到他们的应用程序中并快速开始,而不会陷入细节中。

在这两种情况下,笔记图表模板和 Coinbase 开发人员工具都遵循我的使命宣言,允许个人继续专注于他们的主要目标——无论是第一次学习弹钢琴,还是使用 Web3 做一些很酷的事情。

如果您对本出版物的源代码感兴趣,可以在 GitLab 上的以下地址找到它:

[

John Vester / coinbase-wallet-example · GitLab

coinbase-wallet-example 存储库是基于 React 和 web3 构建的简单 web3 Dapp 示例,以说明它是多么容易......

gitlab.com

](https://gitlab.com/johnjvester/coinbase-wallet-example)

有一个非常棒的一天!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/38412/46032111

标签:wallet,Web3,开发人员,Web2,coinbase,API,Coinbase,SDK
From: https://www.cnblogs.com/amboke/p/16715089.html

相关文章

  • FastAPI 学习之路(一)fastapi--高性能web开发框架
    fastapi是高性能的web框架。他的主要特点是:-快速编码-减少人为bug-直观-简易-具有交互式文档- 高性能-基于API的开放标准     支持python3.6版本。安装......
  • Target API level升级到31后Android 12启动黑屏卡死
    1)TargetAPIlevel升级到31后Android12启动黑屏卡死​2)UnityRenderer中SortingLayer、SortingOrder底层如何实现渲染排序3)如何用Addressable实现按需下载4)多个Package需......
  • .NET 6当中的Web API版本控制
    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进。为了了解ASP.NETCoreWebAPI的版本控制,我们必须了解......
  • javascript的API和跨域问题
    document.getElementById(),根据ID来精确查找元素document.querySelectorAll(),根据选择器来查找,返回一个或者多个元素document.querySelector(),根据选择器来查找,同类多个......
  • .NET 6 EFCore WebApi 使用 JMeter 进行吞吐量测试
    .NET6EFCoreWebApi使用JMeter进行吞吐量测试开发环境VS2022.NET6测试环境测试工具接口压力测试工具:JMeter数据库MySQL5.7数据库和WebApi服务在同一台服务......
  • React Native — REST API 调用
    ReactNative—RESTAPI调用ReactNative/JSShorts的一部分:切中要害|简单的1.0获取fetchAPI是一个现成的JS函数。我们可以使用它在我们的ReactNative......
  • arcgis for javascript api做缓冲区分析
    需求内容:对某个arcgisserver发布的服务进行缓冲区分析,并且下载缓冲区的结果要素图层思路: 通过arcgis服务的find操作拿到所有的要素对要素进行缓冲区分析下载缓......
  • 使用 Buffered Paint API 绘制带有淡入淡出动画的控件
    使用BufferedPaintAPI绘制带有淡入淡出动画的控件发表于2011年10月23日 Windows窗体提供了许多机制来构建与操作系统风格相匹配的专业自定义UI控件;通过结......
  • 02.构建RESTful API相关
    几个常用注解@Controller:修饰class,用来创建处理http请求的对象@RestController:Spring4之后加入的注解,原来在@Controller中返回json需要@ResponseBody来配合,如果直接用@R......
  • CTP API开发期货自动交易平台概论
    题目比较小众,先介绍一下CTP。综合交易平台CTP(ComprehensiveTransactionPlatform)是由上海期货信息技术有限公司(上海期货交易所的全资子公司)开发的期货交易平台,CTP平台以"......