站点图标 夏森林

手把手教你自建所谓的币圈数字钱包#React.js#Next.js#Defi#NFT#Web3#Coinbase#Blockchain#Sanity.io

您将建立一个硬币库带有 nexjs 的区块链 web 3.0 应用程序

将使用 styled 设置此应用的样式组件后,您将学习如何

创建和发出您自己的代币然后我们将使用第三个 web sdk 添加

web 3.0 身份验证,因此用户需要使用 metamask 登录,我们将使用 sanity

io 作为我们的数据库,您将在其中存储您新创建的代币,包括

关于他们的信息,包括他们的美元价格转换和他们的标志将

构建前端并更新投资组合余额,并添加发送和

根据来自的数据接收模态理智和区块链使用第三

网络,您将学习高级技能,例如如何将 grok 与 sanity 的 api 一起使用

实际检索您的数据,然后我们将添加发送和发送的功能

在区块链上接收你的代币使用您刚刚构建的前端

nexjs 最后我们将部署这个应用程序使用凡尔赛并在其上托管您的应用程序

互联网,你准备好了吗?

说了这么多,让我们开始吧立即进入并演示应用程序

所以这是我的应用程序现在注意到我不能登录我必须实际连接我的

钱包繁荣我点击我的元面具弹出,我将点击下一个并连接

连接完成后,您会看到我的应用程序会自动打开并

检索我所有的代币和硬币从我的元掩码或我的理智数据库

我有,但如果你看这里拉我的四个比特币和我的两个

以太坊,它实际上在告诉你正是我现在的投资组合余额

假设我要卖掉我的一个比特币很好,因为一个比特币大约

你应该期待四万美元我的投资组合余额减少了大约

四万 所以让我们继续试试看,我会点击发送

收到漂亮的模态弹出我会在这里继续,我会输入

地址和这个地址我有实际上在我的帐户中创建了另一个帐户

元掩码所以我就去那个帐户,它只是称为接收者

coinbase 我只是用这个来发送coinbase 可以,或者代币,我会的

复制这个,我会粘贴那个地址就在这里,而不是以太坊和

注意它实际上是如何拉动的我有很多以太坊和比特币

这又是从区块链对这一切如此繁荣

顺便说一句,这真是太酷了首先我认为是这样

太令人兴奋了,所以现在让我们说我点击比特币我去发送一个比特币到

我们将继续点击该地址,现在观看正在进行的传输,并观看一次

它完成了它实际上会转动绿色让我们等几秒钟

繁荣它设置成功让我们去我的元面具,让我们看看,我

已经收到了一个比特币的权利回到我的 bts 硬币基地我只

在这里留下三个比特币,因为我当我实际上发送了一个

点击刷新你会看到这个下降大约四万美元让我们给

那一个尝试等待它等待它并且繁荣看看那些家伙多漂亮

你刚刚看到它从 170 000 下降到 130 000 整个区块链是

在技​​术堆栈中使用此应用程序就像我已经告诉过你它已经建成

使用 next.js,它很漂亮在这里你可以看到钱包已连接

是的,然后如果我进入我的发送和收到手表这个你真的可以打

接收正确,它会弹出你的他们应该把它寄给你的地址

钱包地址并检查一下我可以选择比特币然后我去

收到,突然间它说比特币就在这里,这个二维码是

实际功能,所以如果你要实际上扫描它会给出的这个二维码

你这个确切的地址没问题,所以你可以实际上现在就拿出你的手机

如果你想继续扫描那个,一旦你扫描它就会给

你确切的地址,你就可以发送比特币或以太坊呃那里

好的这就是构建 这是演示

您正在构建的应用程序看对了我可以改变哪个呃

切换我在左侧如果我的话,天平看起来非常漂亮

走出这里你可以在顶部看到我连接我的钱包

连接它确切地知道哪个钱包就像 coinbase 我看到了我的图表

在这里,我在下面看到了一些资产就在这里,然后在左边

手侧真的真的很光滑看起来和coinbase一模一样,如果

你对此很兴奋 这是该应用程序的演示,现在我们实际上是

会跳进去开始编码如果你准备好了我就从头开始

准备好了,让我们直接跳进去

好吧,让我们继续创建我们的下一个应用程序,所以我们将如何做到这一点

我将进入我的 github文件夹,您可以选择去任何地方

想要正确,我要初始化这个应用程序,所以我要说 npx create

下一个最新的应用程序就是这样,然后只要给它你想叫的任何东西

例如,对于我们来说,我们将将其称为 coinbase 区块链,然后

只需按 Enter 即可安装反应,然后在里面,因为

记住下一个在一天结束时是建立在反应之上,所以你正在使用

所有 react 的技术加上一些下一个很好的小洒,所以

别担心,这不像一些全新的东西它仍然是

在一天结束时做出反应,所以我们走吧在我们的项目里面就是这样

现在我要在我的像这样的视觉工作室代码和

我们要做的是我本质上是运行它,看看它是否真的

现在出现了,我们要试试在我们的本地主机上运行这个应用程序

我只是要做纱线开发在这里你也可以做 npm run dev

但这就是你想要的命令运行下一个文件让我们看看

在这里和繁荣我看到一堆下一个相关的东西现在都在这里

我们的下一个应用程序是我们必须创建的做实际上是创建我们的应用程序疯狂

以及我们必须得到理智设置这将是我们的后端

成为我们的数据库,这就是我们要去的地方存储所有内容,让我们继续

这样做现在我要打开我要做 sanity.io 所以你可以去

chrome 去 sanity.io 和你应该很好,我们会登录

对你来说,你可能只是要去一旦你需要创建一个帐户

创建帐户点击创建新项目在顶部,好的,它会

给你这个命令是您需要的重要命令

现在对你来说你没有理智安装所以你需要什么

要做的是首先在这里执行此命令让我们回去,你会需要

再次粘贴该命令,这是你需要做什么

要做 sudo npm install 然后你需要在全球范围内安装它

在任何地方我都不会点击安装因为我已经安装了但是

你应该这样做,因为嗯命令将帮助您安装它

所以呃,这就是我刚才的命令之前没有显示,现在我

在那里显示它,所以输入命令你应该能够安装

完成后,sanity cli 没问题在我们的应用程序里面可以

我们将创建一个名为工作室,所以我要打开新文件夹

我要做工作室,我们要 cd在那个文件夹里面,所以我要 cd

在工作室里面,好吧,伙计们现在什么时候我们将要做理智的初始化确保

做 sanity init dash dash 优惠券聪明的程序员确保你这样做

因为一旦你这样做了确保你得到最好的计划

附带 200 000 个 api 请求 1百万 api cdn 请求和 20

您获得的千兆字节带宽所有这些都是免费的,所以它是

难以置信,确保你使用它你可以继续建造尽可能多的

你想要的项目现在在这里我要像这样说理智网好吧,我们是

将创建一个新项目以及什么我们应该把这个项目称为你吗

随便你怎么称呼我都会称它为

呃 coinbase 你知道 final 或 coinbase区块链应用程序让我们这样称呼它

然后我会按回车键去通过默认设置

它可以与我们分享,然后项目输出路径让我们按回车

你应该很好然后为了什么你想要的架构只是做干净的项目

没有预定义的模式就是这样我们想要开始的选项

现在安装过程是它实际上正在建立你的

带有健全性文件的工作室文件夹在里面,你可以在左边看到

手边我所有的文件现在都在开始出现,我可以走了

在我想要的任何这些中,但只有一个真正重要的是

这个模式文件真的很重要这就是你要去的地方

建立你的架构,这就是你要添加你的架构,所以我

只是要去这里,我要去基本上复制粘贴我的架构在这里

好吧,让我们来这里我做的一件事需要做的是在我做任何事情之前

在我的 git 忽略我只想继续并删除那个斜线,那会是什么

做的是它不仅会忽略这个节点模块,但这个也是因为我

不想跟踪所有这些那里的节点模块,所以这是我的架构

我只需要更新架构我多么想要我的硬币呃我的令牌

架构看起来不错,我们将构建我们的架构在这里,这就是它

应该看起来像我的架构中有 um我想要的是标题币

名称将是硬币,然后是类型是这将是一个文件

理智中的一切都有这个结构标题名称类型标题名称

类型,这将是一个重复你会不断的模式

继续看还好,所以现在文档我们需要有字段,所以

字段将包含一堆东西,所以第一个字段将是

令牌那么在这种情况下那个令牌是什么我们只是给标题名称

它的名字将是名字和类型将是字符串,因为我是

将其存储为字符串格式接下来我需要将其存储为

符号 好的 那么符号是什么例如你可能有 ethereum 这个名字

它可能是以太坊,但符号会是 eth right s 或 eth 或任何你

伙计们想把它称为下一件事需要的是我的合约地址

对所以标题是这个名字是这个呃它也将是类型字符串,并且

那么我只需要两件事在此之后我需要价格所以美元价格

所以例如什么是呃以太坊的美元转换权 3 300 截至今天 3 100

截至今天,什么是比特币 41截至今天600美元

可能会根据你的时间而改变看视频然后当然

你想要标志,但标志是唯一的标志的不同之处在于我们

想将其存储为图像,这是你的整体文件这是它应该的

看起来像所以确保你你有什么东西看起来

就像这样,这将是你的架构现在这个架构完好无损,我们

实际上应该能够做某事就像一个理智的开始,很快

我们将能够真正看到这一点让我们继续打理智开始,然后

让我们等待它编译它会掀起理智的后端斜线

数据库没问题,为什么我们要使用理智伙计们,理智就像最简单的一样

在这个星球上使用的数据库呢规模大公司由它提供动力

像 figma sonos 和很多其他的大牌实际运行的公司使用它

他们也得到了耐克的认可当我在他们的网站上看到时

为什么我们要使用理智,就像指向并单击,但它可以是

现在就可以随心所欲地扩展它让我登录 我刚刚登录

我的 github 帐户,你可以看到我有硬币就在这里,硬币是

空的,但基于我们的架构当我真正创造硬币时给了它

看什么是什么领域将会有所以看看这个

名称符号是的,就像它一样我现在很快

用三个 s 将其称为符号,您可以看到它刚刚实时更新所以

超级快,它是如何工作的,而且进展顺利实时更新并再次更新

所以这是超级迷人的合同解决我的美元价格,因为徽标是

一个图像它会自动使它成为轻松将图像拖放到此处

好吧,这就是为什么那样工作的原因如果您没有,请快速免责声明

理智 io 但请确保你去为他们注册他们有一个免费的计划

您可以使用和添加尽可能多的用户想要所以让我快速告诉你

真的很快,所以他们得到了几个让你开始理智的方法我

o 你可以点击开始,或者你可以点击登录,然后点击这里

如果您没有帐户,请创建一个帐户如果你能看到的话,帐户是对的

在右下角是 uh create一个帐户,然后当它创建一个

只需注册即可我使用的谷歌 github 或电子邮件

github所以我就是这样注册的所以你可以用github注册然后

你应该很高兴,那就是现在真的一切都如此,直到我们得到

图像和标志我们要做什么我只是要在这里创建以太坊吗

例如,我们将其命名为 eth 和价格转换就是这样

说 3100 美元,或者我们可以输入一个eth 到 usd 这就是转换

我们得到了,所以我们可以继续前进像这样添加,好吧,我只是

喜欢就这样离开它让它更简单,然后点击

发布所以这是我们已经发布的一件事刚刚添加到我们的数据库中,现在我

只是要添加比特币 btc 和价格我只想说

因为我认为这就是今天嗯,好吧,那我们就去

向下滚动,在底部我们有 uh来吧,仔细检查一下

然后我们看到这个绿色按钮在这里,我将点击发布

在这个,然后我们可以像这样我们也可以添加 solana 然后为此

该符号将被出售并用于我们实际上可以查到的价格

所以一美元兑一美元大约是 141美元,所以我要随身携带

把它放在那里,然后我们要点击发布,所以有

我们只有两条信息需要一个是合约地址这个我们

需要创建我们自己的 solana 和我们的拥有以太坊和我们自己的比特币

我们不会利用现有的,所以不要让它混淆

你我们要创造我们自己的呃测试网络上的硬币没问题,所以我们是

不会使用真正的以太坊真正的比特币真正的solana

这就是我们正在等待的第二个我们正在等待的只是徽标

这只是这些图像和什么我们很快就会得到它们

一旦我们得到它们,我们就可以走了我只想说的一个免责声明是

这个项目确实有很多设置比几乎任何项目

我们曾经做过,所以只要确保你坚持下去,因为一旦你得到

没错,你会过得很好成功的位置只需要一些

是时候设置了,因为你必须设置up meta mask and sanity and third web

我们有很多事情要做设置,但别担心,我们会设置所有

他们在一起好吧,所以不要让那个吓坏你我们会经历它

一起设置一件事时间很好所以我们真的只是

将完成整个理智在我们前进之前进行设置,所以

我们想要做的是添加全球水平的权利,所以让我来吧

暂时离开这里我会回去或者实际上你知道

什么让我们理智开始运行让我们在这里做第三件事,嗯

我想要做的是下面我要安装我要去

做纱线添加,我们会做理智的客户好的,我们将安装它,因为

我们将需要它,因为我们想要能够互动和使用理智

前端,所以我要安装这个包,还有一个

我需要安装的包,而不是稍后安装,我们将

继续并立即安装它好吧,所以我要添加纱线,我们是

会做桑迪斜线图片网址这将当我获取图像时,请允许我们点赞

就像包装上的标志一样请允许我把那个标志变成一个

实际图像而不仅仅是参考因为一开始它只是给你一个

参考好吧,所以现在在根水平我想做的是嗯我想做

只做我们要调用的新文件夹它是库,然后在这个库中

文件夹我们将创建一个新文件我要说

sanity.js 好的,我们将从 sanity 客户端导入 sanity 客户端

因为这个项目将很大,我想动一动

通过设置和前端处理很快,所以我可能会喜欢

跳过一些代码我不会去的

给你看我要搬家很快通过前端部分

因为我想更新颖区块链之类的东西,然后是后面

结束部分并花更多时间在上面好吧,只是让你知道

当我们继续经历它时好吧,在这里面我得到了我的

理智的客户现在我要设置好了,我们将导出缺点

客户,我们会说理智客户还好,然后我们会给

它是一个项目 ID,现在我需要去获取这个项目的 id 所以我们要做什么

要做的是我们要去我们的sanity.io 斜线管理页面正确和打开

这个页面我要去coinbase区块链应用程序,然后是我的

项目 id 我只是要复制它结束,我们将把它粘贴到

然后我要说数据集是您需要提供的生产 api 版本

它是一个特定的,否则有时它中断或错误,然后我们

继续并给它一个令牌在这里,为了令牌,我们要做什么

做在我们的管理范围内,我要去在我的 api 前面,我要添加 api

令牌命中编辑器,我只想说coinbase 应用程序只需点击保存,然后它就是

会给我这个我要去的令牌只需继续并将其粘贴在右侧

这里得到了那个令牌,然后我们就将设置最终使用cdn,我是

只是要把它设置为假好的这将确保我总是

现在在这里获取最新数据我想继续并启用

localhost 3000 这样我的应用程序实际上工作,然后一旦你部署你的应用程序

你需要添加你的在这里也部署了应用程序的 url

你的应用程序被授权的方式好吧这就是你想要做的,并确保

你有这另一件事我们是我们需要的是我们的资产,所以让我们

确保我们继续下载它们现在我们将拥有这个谷歌

视频中链接的驱动器文件夹描述,所以你们可以继续

访问它,所以我们需要代码资产好吧,所以我要去

需要这个,我会需要这个另一个好的,所以我要做什么

继续,我要下载这个文件夹,所以健全的资产将

成为我下载的第一件事然后我需要下载我的代码资产

文件夹以及让我们继续也下载这个,所以现在我两个都有

其中下载了,所以现在你可以看到代码资产文件夹和健全资产

文件夹和代码资产文件夹,我们将有点用,但理智

资产是我们立即需要的,并且为了理智资产,我要做的就是

我只是需要它们来保持理智好吗所以我可以继续上传它们

理智,所以我只是在这里添加它使用这个名为 yoink 的应用程序它可以让我

只是在那儿放一个占位符你不需要你的墨水,好吧,但是你

只需要访问这些照片,现在我会去我的观点好在我的

本地主机 三 三 三 三 斜线斜线硬币我只是要上传

图片,所以对于 solana,我要上传这里的 solana 图像

完成了,我只是要打发表在上面,这样你就可以看到沙龙

比特币的图像现在在那里将使用比特币图像和

只需点击发布即可然后我们将继续使用以太坊并使用

eth 图像好吧,只是要去,然后点击发布,基本上所有

我们的图片现在应该上传了代码资产文件夹,我们会回来

稍后,但只记得你在哪里现在下载它我们接下来的事情

需要设置的是元掩码,所以现在我们在第三个网络上

我们需要做的是确保在我们的我们有 rankib 测试网络的元掩码

准备好了,这是测试网络以太坊所以我要做的就是我

可以点击我的帐户图标我要打的coinbase区块链

设置进入高级,然后我们只是要继续表演

测试网络,我们将打开它好吧,现在当我点击 x 然后我回去

当我点击这里你会看到我看到一堆东西,包括rankinb

测试网络好吧,那是你的以太坊测试网络所以点击我有零

eth 当前当你进入它时,你也应该有零以太

我们要继续点击这里开始呃,我们要点击获取让我们获取

开始 metamask 我要连接我的它的元掩码检测到我有

零 eth 让我们继续打rinkeby 测试网络 testnet 和

现在让我们创建第一个项目会说我资金不足

所以我们要继续点击获得资金的链接这是我得到的

假以太坊又名以太坊用于我的测试网络我不需要链接,所以你可以 x

没关系,我确实需要把我的帐户地址,因为它在询问

你想在哪里收到这笔钱你想在哪里收到

以太坊所以让我们把它粘贴进去让我们打我不是机器人,我们是

要点击发送请求所以现在我们等待确认,这应该

大约需要 10 到 20 秒或者可能更不用说哇它只是说请求

已经完成了,很快我们走吧和繁荣我们有 0.1 eth 辉煌的一切

现在回到第三个网络因为你应该有足够的

eth的数量,所以我要打现在刷新它说我有 0.1 eth 和

我将把这个项目称为coinbase克隆或 coinbase 区块链应用程序全部

好吧,让我们点击创建它在说汽油费受到打击

确认授权,然后我们将一旦我们进入那就是我们开始的时候

使我们的代币正常和第三个网络让你的制作变得非常容易

令牌并设置所有内容你的项目真是太棒了

就像他们对整体所做的那样区块链空间他们真的做到了

整个过程超级超级简单所以我们要点击添加模块,我要

在这里选择令牌好吧,然后点击设置模块和我的第一个令牌只是调用它

比特币好吧,我们称它为 b2 btc 呃,我们如果我们也可以称为比特币 2.0

只是为了好玩好吧比特币2.0你就这样称呼它,或者你可以把它留作

这也很好,让我们点击部署模块我们不需要上传图片

在这里,我们可以保持原样没关系,让我们确认一下

当然你必须付出一点点薄荷并创造这些就像哦,你有

支付一些gas费基本可以搞定这些项目很快就会进行

这将要完成 我们要对以太坊也重复这个过程

好吧,你看它只是给了我一秒钟通知第二笔交易我

去确认一下然后我要重复这个过程

接下来我要创建让我们只是说灵魂,然后我要创造 eth

好的,所以我要做这个过程三分开的时间,所以我的第一个完成了

只需点击确认配置回到项目底部,让我们

点击添加模块并重复此过程再次点击令牌底部设置模块

我们要说茄属植物

在这里我们要说 sol 它是一个部署模块,然后我们将

重复这个过程好吧,现在 solana 是也完成了,我们要点击确认

配置,我们将回到项目我们将添加模块,我们将

做最后一个令牌让我们去这里以太坊,我会说 eth 这将是

我们创造了这些是我们的代币让你随心所欲地称呼它

可以称它为聪明的cpt程序员令牌好吧,你可以调用它

无论你想要什么,这些都是你自己的你现在做得很好的代币我们

以太坊也完成了所以现在我们要做的是

给自己一些代币好吧在比特币中,让我们铸造几个

如果我们有比特币会不会很好七个比特币好吧,让我们给

我们自己七个比特币,让我们确认这个呃交易和gas

费用和我们可能拥有的一切付钱,所以这会给我们七个

比特币和一开始所有这些也将归我们所有

这个案子,然后我们会铸造我们的,我们会的对以太坊做同样的过程

solana,我们会铸造,我们会做确定我们拥有这些好吧,我们走吧

在这里,例如在比特币中你可以看到你拥有的七个,好吧,我们走吧

到索拉纳,我们会铸币的让我们的意思是,我有 50 个 solana,我们

将用以太坊做同样的过程一旦完成就可以了,所以 solana 就完成了

让我们去以太坊和薄荷和以太坊我会说让我们说我有

像 15 ethereum 好吧,我们走吧通过那个,然后我们现在就完成了

我已经完成了让我们来打刷新看看我有多少以太坊

好吧,让我们回去吧,让我们看看我有多少 solana 我有 50

solana 我们去以太坊吧,我有 50 个以太坊,让我们去比特币我有

七个比特币,这样就完美了这些都完成了,他们有真正的

合约地址,所以如果你去rinkybee.etherscan.io

然后你粘贴你会看到这个合约地址是真实存在的

这是真实的,并且有一个创造者这个权利所以谁是创造者

施乐三,你可以看到我是施乐三张光盘的创造者,所以你

知道这个的创造者是谁非常酷,你可以看到

合同创建,然后你可以看到那

还有其他事情发生这里也是三分钟前

铸币没问题方法和第一种方法只是

纯粹的创造就是这份契约地址正确,您可能会看到

我们为您制作的所有产品都会找到他们,所以在这里这个假茄

如果我搜索它,我只是创建了它实际上应该提取的合约地址

假的 solana 就在这里由谁创作多少

如果我进入这里,我会铸造一切可以看到上面写着rankib测试网

仅交易,我可以看到代币从这里转移到我的

帐户,大约有 50 个 solana为了能够

在我的元数据中访问这个面具我需要做的是抓住这些

合同地址和我的元掩码中需要实际导入这些令牌,所以

点击导入令牌粘贴它等待它并且 btc 符号应该自动

弹出并注意我有七个比特币或七个比特币我可以复制

solano one 并在此处执行相同的过程所以我要点击导入令牌粘贴

应该说溶胶和50灵魂确实副本这个呃导入令牌粘贴所以现在我

有 solana 以太币和比特币没问题很明显你可以看到这是我们的以太

已经创造了权利,这与这个东方好吧,这是我们的东方现在

所有这些我们都准备好了实际上前进并添加这个

在我们的理智之内也可以现在和内部获取这些合同

我们的理智我们要粘贴这些地址好,所以让我们去这里

让我们小心地做这件事,这样我们就明白了对,所以我要抓比特币

我们将在这里添加比特币地址点击发布,我们将捕获 solana,我们将

去 solana 这里粘贴那个合同地址,我们将等待这个

加载然后点击发布然后我们会抢到以太坊合约地址

我们将进入以太坊内部粘贴合约地址往下打

发布所以现在我们的理智已经完全更新了我们得到的所有数据

需要放在这里,我们会基本上从这里开始另一件事

我想做,因为我会在两个之间转移这笔钱

不同的账户让我们打开我们的元面具现在,呃,我们走吧

前进并转到我的第二个帐户创建的称为接收器

coinbase 2,嗯,让我们继续吧解雇,然后这个我们也是

开始添加这些令牌好吧所以我要粘贴这个这给了我

好的,让我们复制我们的 solana one让我们回到这里,我们将导入

会贴这给我灵魂好吗让我们复制它并粘贴它

这将给我们 btc 所以现在我们有了有这些可用的两个帐户

所以接收者coinbase和coinbase区块链 coinbase 区块链是

一个连接到第三个网络的,所以让我们回到那个,这是我们的

现在主要的,一切都在现在我们想要做什么

这是我设置的最后一部分承诺一旦你完成了这一切

你已经完成了整个设置,我保证我们会

很快就会解码好的,我知道绝对是我们做过的最大的设置

拥有我们曾经构建的所有应用程序聪明的程序员相信我,我明白了,但是

一旦这个设置完成,它就会开始要一帆风顺,所以就挂了

和我在一起,你最后一件事想做的是让我们抓住我们的让我们去

我们的钱包让我们转到您的主账户在这里所以对我来说这是一个硬币库

区块链一,我们要去提前了解帐户详细信息,嗯,我们是

我要导出私钥在这里输入我的密码

它只是给了我我的私人此帐户的密钥 好的,我要走了

把这个密钥复制到这里好吗复制,我只是要完成

然后我要创建一个 n 文件让我们下一个下划线 public

下划线元掩码私有键或者我们可以只做元掩码键和

粘贴那个所以这是一个好的所以这是我的

钥匙,我就在这里,下次公开元掩码键,我们应该很好,所以

设置方面现在我们几乎完成,现在我们准备开始编码

我非常兴奋,让我们直接进入它

好的,所以我们要做的第一件事要做的是向我们的应用程序添加身份验证

所以让我们现在就开始吧这个过程会很漂亮

直截了当,但让我们有点一起走过,好吧,所以我

去我的 app.js好的,这将在

页面下划线 app.js 是这个文件就在这儿

现在我想做什么我需要在我的第三个网站中添加吗

好吧,为了做到这一点,我实际上将需要

在这里写下这一行,让所有这项工作我实际上需要安装

所有这些依赖项所以这里根据第三个网站

我需要做的是我需要实际安装所有这些

在这里你可以运行这个 npm 或者这个纱线一根可以,任何一根都可以

所以我只是要复制那个粘贴我们可以安装这个让我们添加

还有一件事,所以这是这如何有第三个网络反应和第三个

网络挂钩我也想要的是第三个web sdk 因为我们需要它

稍后,让我们继续执行此操作方式第三个 web sdk 并点击 enter 和 now

嗯,继续安装这个好的,这样你就可以看看

我写的行快了

这就是它的样子好吧,漂亮,所以现在一旦这个

安装即将进行我们准备开始使用第三个网络

现在我实际上需要做的下一件事我需要基本上添加

支持的链,所以这里有一个关于链条的一点点,你可以看到

对于 rinkybee 来说,我们的实际 id需要是链四

我要继续摆脱那

接下来我需要做的是我需要实际上把它包在我的第三个里面

网络,例如我现在需要用我的第三个来关闭它

像这样的网络提供商好的

我需要把它包装在一个回报中,所以我们去这里 我们去那里 我不

需要分号我们就这样有效地完成了我所拥有的

现在完成的是我正在包装第三个网络中的整个应用程序

登录所以这意味着

你知道我在这里使用的任何东西我不需要返回这里

我可以摆脱那种回报的方式就像这样

在我喜欢加载所有的应用程序上现在的页面所有页面都在进行

使用此身份验证进行包装所以现在在全球范围内我将能够访问

此身份验证是否在我的组件或在我的 index.js 或任何

我实际制作的其他新页面所以现在我已经包装了整个应用程序

在身份验证中我需要做的是更新我的索引页面

对于我的索引页,我将保留它有点简单,但我们只是去

在这里做几件事好吧,所以我真的不需要

图像和类似的东西,我实际上也不需要样式

我将使用样式组件,所以让我们继续添加,所以让我们做

纱线添加风格组件

像这样好吧,我要打再次输入你可以做 npm 没关系

只是要缩小这里好吧,所以现在我有样式组件没问题,所以我们

我将为此使用样式组件两种风格都不需要下一个头

组件没问题,然后接下来的事情我真正需要的是我需要做

确定我的钩子我有我的第三个网络挂钩,因为那是

我们需要什么提供那种认证

好吧,除此之外,让我们继续吧返回并摆脱里面的一切

暂时还好,我就走了它就像一个

像这样的空白 div 所以如果我们要去我们当地的主人这会

你知道这里什么都没有现在是的,如果我在这里写你好

你会看见你好突然出现在那里

好吧,就这样它在这里,但它现在是空的

接下来我需要做的就是我要去说 const 地址

然后我得到地址和连接钱包

从使用 web3 所以这是 web3 或第三个网钩

我们有在这里,这会给我们地址

和连接钱包然后我只是基本上需要创建一个简单的页面

所以我会告诉你那是什么样子的伙计们,我们将通过

前端,因为我又想得到很快就可以通过主应用程序了

所以我们会稍微经历一下

以更快的速度好吧实际上让我们这样做

好的,所以我要只需在里面执行以下操作

这个 div我要说我要添加一个按钮

好的,然后对于这个按钮,我们将说

连接钱包

好的连接钱包然后我要点击这里说

连接钱包我们要做注入

好的所以让我们试一试,让我们看看

会发生什么我会点击连接钱包

所以我要做的就是确保我的其他钱包被断开所以

像的意思你知道例如

我的另一个钱包已连接到localhost 3000 所以我只是继续

进去我刚去了连接的网站

移除我现在删除了 uh localhost 3000

回到我的 coinbase 区块链钱包如果我点击连接钱包它会弹出

如此清晰,似乎是嗯,工作正常,现在我什至可以添加

就像一个条件,本质上检查这是否有效

好的,让我们继续构建我们的现在造型,我们将使用该造型

向前进好的,所以我要把我的包装纸放在这里

好吧,这整件事都会发生在包装中

所以让我们这样做没关系

所以现在既然在我的包装里你可以看到它在中间

太好了,这就是我们想要的接下来我们要做的是 uh for

钱包连接我们会给它一个有点造型,所以让我们继续吧

现在就这样做

和钱包连接我要做什么说是

这里我们要去钱包连接好的,我们要包装这个

钱包连接按钮现在让我们为此创建一些样式

我们刚刚创建的按钮让我们继续做吧

而不是常规按钮我要去称它为这样的按钮

就像那样好的,所以现在它看起来像

不错的按钮再说一次,我不会过多介绍

CSS 和样式,因为我们有一个我们正在制作的大量视频

前端,所以请随意观看在

youtube但我会稍微解释一下

右边的造型就是这样好的 颜色是蓝色 对

我们在那里有我们的字体颜色你看到的这种黑色

在那里字体粗细

然后字体大小就是这样我们正在获取字体大小和填充

是我们如何得到这个填充和然后当然是边界半径

我们那些漂亮的圆角好的,然后悬停

它变成了这样的指针好的,所以当我点击

砰,它就在那里弹出,好吧,我不是我要连接

完成这个造型好的,接下来我们需要

做的是添加细节细节只会说

就在那下面按钮它会说你需要

在 chrome 上能够运行此应用程序,以便详细信息

看起来有点像这样吧在此按钮下方

我会添加我的详细信息,这样你就可以看到你需要你需要 chrome 才能

运行这个应用程序,所以如果我全屏显示这个正确地注意到一切都很好

集中,当我去这里时它仍然很好而且集中,所以

样式是很棒 很完美 它正在做

正是我们需要做的好的,现在我们需要做的是

创建一个条件渲染登录后

显示别的东西,一旦你不是登录显示其他内容所以如果

你没有登录它应该告诉你这个

但是当你登录时它应该显示您喜欢的主页

好吧,让我们继续吧创造它,我该怎么说

那就是我要说嘿地址存在

如果地址存在然后我只想让你渲染 h2 而我

希望你只呈现用户的现在的地址

好吧,然后如果它不存在那么这就是我想要发生的事情,所以我

我要把这些括号放在这里要拿这个

我将正确处理所有这些代码那里

好的和粘贴到这里

好的所以如果地址存在

然后告诉我地址​​是什么否则给我看这个页面

显然它正在检测地址不存在该陈述是错误的所以

它在这里向我展示了这个,所以让我们点击连接

钱包,现在让我们实际连接让我们看看发生了什么

当我连接它时,我可以看到它实际上向我展示了我的

钱包地址没问题如果我进入这里并断开连接

连接的站点 localhost 断开连接繁荣你可以看到它检测到它所以

它正在工作现在我们需要做的一切都很好

做的是我们需要创建一个仪表板所有就在这些页面里面,我在这里

我要创建一个新文件将其称为dashboard.js 好的

然后在仪表板中,我将点击 rafce 点击标签

所以这些是我的片段,我只是有点自动完成这个

好的,现在我有了我的仪表板我要说的就是你

知道我只是要在这个 div 中我只想说地址

让我们将地址解构为道具然后让我们回到我们的 index.js

而不是这个,我实际上要去说

呈现我的仪表板组件对,我要给它

地址没问题,并确保像这样从顶部导入它

好的所以现在它应该呈现我的仪表板

我登录后点击下一个组件继续

你去我的仪表板组件现在正在渲染,我很好

会再次断开连接所以连接的站点断开连接

凉爽的好吧,现在让我们开始吧

处理我们的仪表板组件和我认为实际上添加了一些东西

在这种情况下最好连接和待在这

凉爽的所以现在仪表板将有

很多事情,比如如果我真的看起来在我们这里的真正的

仪表板有很多东西例如,我们正在看这里

我们有这个侧边栏零件

我们有这个头组件我们有这个投资组合图表组件

然后我们有这个投资组合底部的组件

好的,然后我们有一些额外的喜欢赚取一些利息等等等等

这边好的

所以我们可以开始使用多个我们可以从标题开始或

侧边栏我通常喜欢开始与标题

好吧,让我们继续开始吧首先是我们的标题

好的,现在我们要建立一个标题让我们创建一个组件文件夹

在根级别,所以我要说像这样的组件

在我要创建的组件内部一个新文件将被调用

header.js 我要进入这里我们要自动完成这个

好的,对于我的头文件我需要一些样式

好的,让我们创建我们的包装样式我们将创建我们的

标题样式好,我将拥有按钮容器

好的好的,为什么那么好,因为

标题正确,我要制作资产看起来像这么大

资产对,然后是按钮容器 i

需要确保它处于弹性状态框,所以它在行中而不是列中

好的然后我们做一些计算

和类似的东西在这里所以它占用了你知道这就像响应式的

它占用了正确的空间所以让我们把它放回去

凉爽的好吧,然后我们想要我们的

按钮给它还有一个造型

然后就是这样,所以这些是我想要的样式组件

基本上为此现在我们只想本质上

写代码让我们从我们的按钮开始吧

你可以看到那是什么样子好吧,让我们有我们的

一种买卖按钮所以让我们这样做

好的,让我们确保我们的标题是实际上出现在我们的内部

仪表板,所以我要去我的仪表板

我们会说

这里我们会说

标题

所以我们现在只说标题让我们看看它是否出现

好吧,它是说 styled 没有定义所以我需要做的是进入这里

只需导入它,导入样式从

样式组件如果你看到我的自动完成

真的很聪明那只是因为

我正在使用 github copilot 作为扩展所以你也可以得到那个扩展

因为你可以看到我的买卖按钮在这里

但我们当然希望它在标题,所以我们将继续努力

那现在我需要的另一个按钮是

发送和接收按钮好的,让我们继续粘贴

现在它在抱怨当然因为它需要在一个

包装器,所以它需要有一个父母所以让我们做

这所以现在你可以看到我有我的发送和

收到,我得到这个很少就在这里吧,因为在我的包装中

我有这个如果我删除,这是边框底部

这个边框底部你看到它消失了当我添加它时,它又回到了那里,我们

去好的,所以买卖发送和

接收按钮看起来真的非常好

现在我需要真正建立一个按钮容器并将它们放在里面

按钮容器,所以这个按钮容器将确保它们在

柔性好吧,让我们继续说吧

在那里让我们结束

这两个按钮的正下方像这样

好的,现在我们将它们放在 flexbox 中

好的,然后我需要做的就是添加

标题在这里好吧,让我们做标题

然后在那个标题里面我要去说资产

繁荣,你去,所以你可以看到它做得多么好

对,它会自动给这个弯曲一个,这就是为什么它很大并且

占用产权 产权有在这里弯曲一个

这就是为什么它占据了整个空间

如果从标题我们拿走 flex 的

你会注意到他们都像挤在一起一样

但这不是我们想要的我们需要它

一直到那里完美,所以现在我们的标题正在寻找

非常好好吧,让我们继续前进

所以现在我们需要做的就是真的把这家伙从这里移到顶部好吗

和这不会发生在标题内部

这需要发生在我们的内部仪表板还可以

所以我现在需要做的基本上是创建一个包装器和一个容器

这就是他们看起来像我我的包装纸就在这里

好的,这将环绕整个页面并给它一些样式,我们

当然需要做 import styled从

风格像这样的组件命中刷新所以

错误消失好的,你可以看到

我们的页面看起来还不错,所以有时一个页面的行为很有趣,你

需要做的就是基本杀了您正在运行的服务器,所以 ctrl c

这是我的理智工作室运行这是我的下一个应用程序

运行正常,所以只需 ctrl c 就可以了点击进入所以 yarn dev 或 npm run dev

那应该修复它所以现在让我们刷新

现在它正在寻找它需要的方式没关系,现在我们基本上

将为此添加一个包装器我们刚刚创建的

让我们把它放在那里所以让我们全屏显示

包装器,你可以看到它现在看起来不错我需要做的就是

把它放在一个主容器中,所以让我们去吧,我会做主要的

哎呀主容器

好的 然后让我们继续就在那儿弹出,然后在那儿轰隆隆你

去现在它出现了

正是它需要正确显示的位置在这里的顶部

所以现在看起来不错,我们走吧前进并工作并添加侧边栏

左侧但实际上在我们添加侧边栏之前

让我们继续实际添加里面有所有硬币的桌子

我认为这是一个很好的补充我认为它使我们的应用程序变得有趣

为了完成这项工作,我们需要带入我们的资产记住我有

你早点下载所以我们需要访问这两个

我们需要的这些代码资产我们的资产文件夹包含所有这些

这里的代币然后我们需要访问

也是静态的所以我们现在需要这两个

所以让我们继续把他们带进来

将文件夹添加到工作区

所以实际上删除这些文件夹,因为它以一种有趣的方式添加了它,所以

我们只是要创建我们自己的名为 assets 的文件夹

在这个资产文件夹中,我们将继续复制所有这些

我要进入我的下载代码资产资产,我只是要去

复制这些好的,我们将移动它

在我们的资产文件夹中,就像那

然后我们将创建另一个文件夹

这将被称为静止的

好的,然后在静态我们要做类似的事情

基本上只是将所有静态的东西移到那里

这些是预定义的东西所以我会展示这些井里面有什么

你,但本质上这就是一切那在左边

所以本质上是我们的侧边栏项目意思是如果我去我的应用程序

这是这里的东西对,所以我有

为你付出和为你学习和赚取和通知之类的东西

这就像已经做好了,所以你不需要

担心这一切你需要担心about 是你将如何得到这些

图标出现,这很容易我们只需要做的就是做到这一点

发生只是安装包

需要所以我清楚地看到我们的包裹

这里需要的是这个反应图标包所以我要继续说

纱添加

我要说反应图标就这样

所以让我们继续安装它还有其他几个

我们需要安装的东西,但是我们可以继续,稍后再做

所以这会给我所有的图标等等我的导航栏在你的左边

知道它非常接近准备好了因为我们拥有我们将要制作的所有数据

这个很快我们的事情现在想工作是资产吗

有点在底部,所以让我们继续努力吧

为此,我们只需要确保您拥有所有图像

就在这里说让我们开始吧工作

让我们也看看里面有什么我们的静态文件夹,所以我们有我们的导航

正确的项目,这就是一切将在我们的导航中

然后我们实际上的另一件事这里有硬币

所以让我们来看看我们的硬币所以在硬币里面我所做的一切都是正确的

这是我们正在导入我们所有的徽标所以那在我们的资产文件夹中,所以我

只是导入所有这些然后我只是在创造我们的硬币所以

这只是这里的静态数据,所以我创造我的硬币其中有多少

我有的硬币那里的余额是多少,然后我

把呃比特币solana放在那里以太坊中的多边形只是说

什么是正确的平衡,就是这样他们在这里根据

余额你知道这里发生了什么

平衡我做了多少我做了多少我知道他们的美元价值是多少

例子你知道它的价格是多少

价格变化是多少所以这只是喜欢造型

在这里我们正在做的只是我们使用的是硬编码的数据

好吧,这就是为什么我只是给你这些文件,你可以使用

他们就是硬币让我们继续建立我们的投资组合

我们要进入的组件我在这里要说

投资组合.js我们将确保我们正在导入

这好的,然后为此我要

做几件事,所以我们要显然我们需要一个包装器

因为一切都会进入里面所以让我们创建我们的包装器

然后在我们的包装器内部会有一些内容

把所有东西都很好地结合在一起好吧 然后

我需要的呃实际上只是几件事

我将需要样式投资组合表

然后我们创建的表需要给它一定的造型

这种情况下,我们只需要确保它有

并不是说我们只需要确保它有

好宽度我们将需要安装

表格行好吧,基本上你知道那是

整个表,然后是表行样式是需要的,也是需要的

每行看起来像和

然后我们有表项当然只有几件事

在那之后,我们得到了表格项目然后我们也想确保我们

有一个分隔线,所以你会看到那个分隔线就在那里,我们需要访问它

好的,然后就是这个差不多就是这样

担心的现在我们需要做的就是拥有

一个也是标题那个标题就是那个说你的

右手边的资产在这里你样式的资产

所以我们得到了这一切,现在让我们建立我们的投资组合表,所以我要去这里

我们会说文件夹

桌子像这样

然后在我的投资组合表里面

我们将需要表格项目,所以让我们看看我们是否为我们的

表项我们有,所以我们需要我们的桌子

物品好的,所以我要说桌子

物品然后在这里我要添加我的

头衔,这将是你的资产像这样

现在让我们确保我们的投资组合组件出现了,所以我们要走了

去我们的仪表板.js

好的实际上我们不会添加它

到我们的仪表板我们要做什么我们要创造另一个

它将被调用的组件main.js

main.js 将包含主要的所有内容

所以我们要在那里添加投资组合所以让我们先这样做吧

我只是要做 rfce完美的

然后在我的主要里面我要去做我刚才说的,所以首先

全部我们只需要设计一个

这里主要是包装器,所以我要走了在这里添加一些样式

然后在我的主要里面我需要使用我的包装

然后在我的包装里面我要去添加我创建的投资组合

这可以是一个自闭合标签

我们去吧凉爽的

现在让我们去我们的应用程序嗯,我们将添加 main

到我们的主页,所以我们的主页是我们的dashboard.js

所以让我们去我们的仪表板我们页面中的 dot js 文件

和这里的里面我要在下面添加主要内容

标题但仍在主要内部容器,所以让我们开始吧

让我们按回车,让它自动完成它和自动从这里导入

它在抱怨它不知道是什么设置这个样式,让我们进入 main 并添加

那是从 styled 导入的样式像这样的组件

让我们点击刷新

让我们去投资组合吧也没有,所以导入样式

从样式化的组件

完美的让我们继续,也把这个

在一个包装里面,所以我们要去因为我们确实创造了我们的

包装样式所以让我们把这一切都放在一个

包装我们就可以了,你的资产现在是

有点出现,但原因它没有出现是我不喜欢

添加我需要添加的行好吧,让我们继续添加那些

行所以我们要做的是

让我们在这里放一个分隔线在我要去的桌子下面

说分频器

然后在分隔线下我们要去现在建立我们的桌子

好的在这张桌子里面我会有

再次表项好吧,让我们关闭我们的表格项目

然后在这个表项里面我将有我们的表格行

像这样然后在这一行里面我们要去

说以下,所以我们只是去说

名称这将是平衡的 这是

将价格

这将是你的位置应该开始在右边看到这个

手侧弹出

分配然后我们将有最后一个

但最后一个我们实际上只是使用最后一个,我们将做

下面我们要说bs 3点

垂直的

并使其成为一个自闭合标签和我们只需要导入这个

bs 三个点垂直所以去顶部,我只想说导入

bs 三个点垂直从

反应图标 bs 好的,所以我们开始了三个点出现

但你注意到这一切就像真的很亲密 那不是我们

希望我们希望它有一些分离在他们之间,所以我要做

用 flex 所以我们要说风格

假设我们给它一个 3 的 flex我们将给它一个 2 的通量

然后我要重复这个在这里处理

为了所有这些,这将有一个

flex of one 这将有一个通量这将有一个零通量

好的好吧,就在这张桌子下面

现在让我们继续添加我们的项目分隔线

然后在这个分隔线下我只是要做一个 div 然后在这里我们将

实际上现在开始形成展示我们的硬币我会做coins.map

这个硬币来自静态硬币没问题,所以它正在进口

从那里开始所以在我们的coins.map中我现在要说

你得到的每一枚硬币请执行下列操作

好的,所以我只是要退回它好的,然后我要说

创建一个 div 好,然后在里面这个 div

结束它在这个 div 里面我想让你做什么

是创建硬币

然后给它一个硬币,我们就走提前制作这个组件

然后我们将使用分隔线

现在在我们继续做之前组件让我们把它注释掉

真的很快,让我们说h2 我们就给它

我们可以试试 coin.name

所以至少现在它开始了出现在这种表格中

当然我们需要做的是风格这样

我们将继续创造我们的现在让我们进入硬币组件

组件我们会这样,我们会做 coin.js

好的现在我想要在我的硬币组件里面

确保它看起来不错,所以我们会

添加所有使它看起来的东西很好,所以第一件事

让我们导入我们需要的所有东西所以我需要我的样式组件

我需要有这个垂直的这里的点

然后让我们也使用下一张图片因为它是高度优化的

比使用常规图像标签更好现在的造型让我们继续

风格这个所以我当然要创造我让我们做 rf rafce

让我们点击保存,这样我们就有了硬币我们正在导出默认值

让我们继续添加我们的包装器我们的包装器会有一堆

造型以确保它看起来不错然后我们有我们的名称列,所以我们

需要为我们的名称列添加样式这是那个就在那里

名称我们需要为我们的

硬币图标也是如此,让我们这样做繁荣,我们去,然后我们将需要

一些主要和次要样式好的

凉爽的那么这个主要和次要是什么

如果我去最终的应用程序就好了你会看到这是主要文本

这是次要文本对

很酷,所以我们得到了我们的初选和我们的次要的,现在让我们开始构建

拿出我们的硬币,所以首先我们的当然需要一个

像这样的包装然后在我们的包装内

我们会有一个 div在那个 div 里面我们会有另一个

div我们会给它一种 flex 3 的风格

像这样然后在这个 div 里面

我想做几件事所以我想拥有我的

列的名称好的

然后在里面我想把我的硬币图标

在这里我将拥有我们的形象我们会给它一个 coin.logo 的来源

我们会给它 alt 的 coin.name太好了,让我们关闭它

完美,这枚硬币将得到和解构,因为我们将

从硬币中传递这枚硬币组件所以

在里面您从仪表板了解的仪表板或

无论我们在哪里创造这个,我们都是将传递此信息

背部很酷,所以coin.name

好吧,让我们通过我们的硬币让我们看看到目前为止发生了什么

所以让我们回到我们的投资组合让我们这样做

让我们点击 n 并导入硬币,所以现在它应该从硬币进口硬币

我们去吧我们开始真正看到它展示

对了,它看起来并不完美然而

但它开始出现所以那就是一个好兆头

好的凉爽的

好吧,让我们回到我们的硬币组件,让我们继续构建

我们的硬币组件,所以我们得到了我们的硬币图标然后我们需要做的下一件事

是创建另一个 div 然后我在这里将有一个小学

然后我们会有一个次要的

次要就这样在我的小学里,我要去

放硬币.name在我的中学,我将把我的

硬币点符号我们去吧

所以现在它开始看起来有点好一点

我们还有更多事情要做添加所以让我们继续

就在这下面我们将创建另一个 div

像这样我会给它一种风格

弯曲 2。

然后在这里我要说基本的

我们将添加一个这将是一个美元符号只是因为我们

会在它之后显示美元

像这样好的,我们开始吧

所以现在我们可以看到这一切

凉爽的这就是你知道我们的平衡

只是说我们有美元然后我想做的下一件事

就在这个初级之后,我们想要在它下面添加一个次要的,所以

我会说次要的

我们会做硬币点平衡

硬币然后我们会说硬币点符号

所以我们的桌子开始看起来真的很好

它正在融合很快就在一起了

所以让我们继续接下来的事情需要在下面

我要创建另一个 div我们会给它一个弹性

好的,然后在这个 div 中我要去说初级

我们要做同样的事情除了这一次我要说

价格美元我们去吧

凉爽的出现

很好所以看起来不错,现在是下一个

我们需要在下面做的事情这个主让我们创建另一个 div

我们会给它一种我们会说的风格颜色是硬币变化

所以对于其中一些人来说,它可能是颜色红色右或绿色

然后我们基本上会说如果改变

uh 小于零然后我们要给这个给它

这种红色否则我们会给它这个

绿色这就是我们要设计的风格

这些凉爽的

然后我们就继续写所以我们会说

coin.change 如果它大于零

然后基本上给我一个加号

好的所以你看

只有当其中一些变化大于零

可能没有大于零改变你可以去看看你的

你知道静态硬币文件所以如果你在这里寻找改变,改变

对负百分之四这就是为什么这里没有加号

但也许让我们看看以太坊以太坊有一个积极的变化,所以

你可以看到以太坊有一个绿色加号在那儿签名很好,让我们回去

接我们离开的地方,然后现在我只想告诉我

硬币找零,然后我们把这个百分号就在它旁边

就这样硬币变化现在出现了

然后我们需要做的是让我们走吧就在这儿

好的,然后我们会做flex one的风格

好的,我要在这里设置硬币点分配

我们会做百分比我们的预算分配了多少

有在这好的,然后关闭那个 div

然后我们将创建一个新的 div这将具有 flex zero 的样式

我要把我的三个垂直点在

就这样

凉爽的好的

所以我的桌子此时我的硬币是我的硬币图标

我的硬币都完成了如果我要添加另一个,就会出现

也会公平显示的硬币很快就对了,所以如果我去我的硬币

零件让我们这么说

我们复制我不知道这个呃以太坊从这里

我把它贴在那里我们说你知道而不是以太坊

这叫呃cp令牌

它是cpt和logo是的,让我们只是让它使用以太标志

为了平衡,我们会说我们有300

呃美元价值正确然后平衡

硬币让我们说七六价格美元是九

变化是24%

好吧,如果我去打开它你可以看到cpt

cpt 令牌显示在底部好的

所以让我们继续,嗯

让我们刷新一下让我们暂时删除它

好的,然后回到我们的应用程序那里我们没事

所以我们只是删除了它我们不需要它现在一个,但你可以看到我们的硬币

组件工作正常,甚至虽然它并不完美,但它喜欢

展示了它,它实际上建立了它现在我们应该做的是

在我们修复所有内容和添加之前适当的间距,一切都正确

就像我们在这里的样子让我们继续在我们的侧边栏上工作

组件,因为我只想快速掀起一切,然后修复和优化

事情是正确的,然后我就这样让mvp跑得快

可能的所以让我们开始在侧边栏上工作

现在所以对于侧边栏,我们要这样做

以类似的方式我要进去在我的组件中,我们将创建一个

新文件我将其命名为 side.js我们要打 rafc e 所以它会自动

里面现在就完美了边栏的让我们继续做

与我们相似的事物早做

好的我要在这里添加我的包装好的

我们将基本上添加包装器的样式,所以我得到了我的

它的高度我想要侧边栏有多大我想接受你知道

几乎是我的视口高度我想拥有一定的边界权

创造这样的分离权例子

就在这里,你可以看到所以创造那个然后我只是

计算它是你知道基本上只是在一边

不占用整个事情所以说话

好吧,冷静下一步我需要做什么我需要给它一个填充,所以我

给它填充然后我只是简单地关闭它

像这样

凉爽的好的

所以我们现在有了这个我要去创建我的徽标容器

好的所以在这里我只想说

利润1.5

好的,然后我们将关闭它离开

在此之后,让我们继续并给予它是一个标志好的标志,我们要给

它是一个宽度对象,适合左边距所以现在它要确保

徽标看起来不错,所以这些是我们正在谈论的徽标是正确的

这里好的

接着让我们继续做导航项目

容器好的

所以基本上这会让确定我在徘徊,所以每个人都有一个

如您所见,容器就在这里对,然后当我将鼠标悬停在

它在那里变成了一个指针

凉爽的好的,然后对于每个导航项目

我想要一堆事情发生所以我想让它得到样式和

边界半径,例如当我悬停在

你可以看到有一个边界半径在它周围我不知道你是否可以

请注意,但它就像你一样漂亮知道让我放大这里你应该是

能够在那里看到边界半径

一直到那里就是这样那个造型

凉爽的好的

然后背景颜色改变向右悬停,这就是我们想要的

功能就在那里好吧为什么我们添加那行代码然后

对于导航图标我想要发生的事情当我将鼠标悬停在它上面时

对,它有自己的导航图标有它自己的样式,例如,如果你

注意它有点灰有一个背景

你知道边界半径是那里的圆圈

所以这就是我们这样做的原因然后我们确保它是

集中放置项目以便显示网格而不是显示标志而不是

证明内容或对齐我们拥有的项目放置物品好,因为我们正在使用

网格凉爽的

好吧,就这样造型很重要,现在我们就去吧

需要继续创建这个我要继续创建我的

包装在这里好的,我的包装器将创建

包含那里的一切然后让我们添加一个徽标

现在好了,所以我们要做标志容器和这个标志的内部

容器我们会有我们的标志好的,然后在这个标志中,我要

有我的形象,这将是我们的币库徽标

好的现在对于源我们可能会遇到

所以我们需要做的就是实际上只是从这里导入

呃,让我们去拿我们的侧边栏现在出现所以让我们去我们的

显示侧边栏的条款让我们去我们的仪表板

好吧,我想让我们添加侧边栏所以我要去我的仪表板

在包装纸的正下方在这里,我将添加到我的侧边栏中,所以

我们会像这样做侧边栏保存

让我们去我们的应用程序看看它显示正常

每次我爱上这种进口风格从样式组件

让我们点击保存让我们刷新

好的构建图像请使用新的操作员很有趣,所以是什么

哦,因为我不是拉动图像,所以我们实际上需要

确保我们这样做让我们从下一个开始使用这里的图像

让我们再次刷新

好的,所以我们的侧边栏现在就在那里所以这很完美

它能够获得自己的空间将其余内容推出

对,所以我们的侧边栏是有点像我们想要的那样工作

工作正常,所以这是一个这是个好兆头

在这里放大一点就好了我们得到了侧边栏

酷现在我们需要做的是我们需要在我们的侧边栏中添加更多内容

让我们继续做吧所以在我们的侧边栏中

我要走了我们将创建我们的导航项目容器

好的,然后我要说我们要遍历我们所有的导航

物品没问题,所以我要去哪里买我要去的这些导航项目

说进口导航项目

从它来自我们拥有的静态文件夹

我们就在那里

完美的无法解析导航项目

让我们在这里检查一下我们的静态我们确实有导航项目哦

我拼错了静态拼写正确

完美的伟大的

好吧,现在这个错误是有道理的,所以没关系

我们将在这里映射我要保存

我要去那里输入

好的,我们去这里,我要去说导航项目点图

并且对于每个项目我想做以下我

本质上想要创建我的导航项

好的我们也可以给它一把钥匙

所以让我们做这个索引我可以说关键

可以只是索引,我们可以给它一个点击

所以点击我想要发生的事情实际上让我们点击一​​下

第二个需要我们添加一些状态

让我们在没有状态的情况下这样做现在我们得到了我们的导航项目

然后我想做导航图标,我们会给它一个风格和我的风格

会给它一个颜色好吧,这又是这样

会要求我们有点动态所以让我们

再放一秒钟因为这又是必需的状态

好的,然后在这里我要说项目点图标

像这样好的

完美,让我们刷新

伟大的很棒很棒很棒很棒很棒所以

现在我们的导航栏出现在这里

就像我们喜欢我们想要的一样好的,这是个好兆头

现在让我们确保我们添加导航标题在导航图标下也是如此

我们想做的是添加我们的标题好吧,这是我们的导航

图标就在下面让我们去导航标题

好的,我要说项目点标题

好的导航标题未定义不用担心,让我们继续前进

定义它,我们要让它为空所以我要说导航

标题好的,我们要去样式 div

空的,让我们去 const

好的现在应该定义导航标题

完美,你去看看当我将鼠标悬停在你身上时,你会得到那种效果

右臂我们得到了悬停效果

对,我有我的桌子我所有的资产都在这里

我的标题显示在顶部那里

所以该应用程序开始看起来像我们的样子

希望它看起来像好的,所以这是一个非常好的迹象

让我们回去开始添加继续添加更多的东西所以

我要添加你知道的事情这边的

我认为这是其中的一件事我们需要添加,然后我们需要

添加投资组合的东西在右上角 好的 所以我们走吧

前面并添加那些现在好了,所以一个我们需要做的事情才能真正确保

这看起来很棒,让我们把它包起来在内容上

一旦我们这样做了,这实际上会看起来好多了,好吧,我们走吧

先我们制作的这个内容样式

早点吧,让我们去吧,去吧这里

好吧,我会一路走下去我会在那里添加它

也添加它现在如果你看这个看起来

绝对比以前好很多好吧,我还想做一件事

这是我不喜欢这些侧边栏显示它有点难看

所以你知道现在有四个你知道的侧边栏滚动条出现

所以我们要做的是我们要去在我们的主要内部

而不是溢出滚动我要把它隐藏起来

所以现在表格的滚动条不见了

对,所以他们不会出现在任何地方,所以那挺好的

然后我们会尝试看看我们是否可以制作底部的这些滚动条

实际上也消失了,因为当我过去的时候,这不好

可以看到其余的,就像见鬼一样那

所以我们要去我们的dashboard.js然后在我们的仪表板里面

只是要去包装我只是要去添加溢出隐藏

现在看起来干净利落一切看起来

太好了这就是我们所追求的样子

现在在我们工作之前前端

你知道的东西例如有一些我们要添加的东西我想要

开始添加第三个 web 和 web3东西也是如此,例如在这里

我想说你知道钱包是已连接以及它与谁连接,所以我

想将其添加到应用程序中,就像如何在我们的应用程序中

我可以看到钱包已连接,它告诉我把地址告诉我,让我们继续努力吧

这个功能真的很快现在让我们创建一些样式

进入我们的 header.js,我们是将开始为

我们的按钮我们是为了我们的钱包

所以我们的钱包链接会有一些造型所以让我们去给它一些

造型就在那里还

所以这里的造型是你知道的只是

这家伙在这里我们基本上是给那个人造型

我们会给它一个钱包链接钱包链接标题也会有

一些造型,那就是绿色文字会说你的钱包是

连接的好的,然后我们会得到我们的

我们不需要提供的钱包地址这是一种颜色,所以让我们把它去掉

然后我们几乎是你知道很好,这就是我们的全部

现在我们只需要与钱包相关的样式要做的是在我们的按钮容器内

我们需要实际添加我们的钱包,所以让我们继续,让我们做钱包链接

在这里面我要去钱包链接标题

我会说钱包已连接

然后在下面是我们会有我们的钱包地址

好的,我们的钱包地址是基本上将是我们的钱包地址

我要把它切给我前七个 uh 字母

然后给我三个点点点这里的情况然后给我

其余的地址点切片 35我们去吧

很酷,让我们来看看如果它添加那好吧

钱包地址有问题那可能是因为这是

小写 w而我们实际需要的这个钱包地址

通过我们的道具传递它,所以我们会说钱包地址,我们是

还要说连接像这样的钱包

所以让我们回到我们的仪表板我们在哪里给出标题

所以我们的标题我们需要传入

像这样指向我们的标头的地址好吧,让我们回到我们的标题

好的一个钱包地址所以我们可以说钱包

像这样的地址给它地址

它将解构钱包地址然后使用它,让我们刷新

让我们看看会发生什么我们仍然收到错误

那是因为我还有另一个大写 w 这里所以这需要

小写所以让我们继续做这个让我们刷新一下

我们的钱包连接好了出现在这里

它向我们展示了我们的第一对字符串,然后它放

这三个点然后它告诉我们剩下的还好,差不多就是这样

发生在这里让我们删除之间的空间

点我会把它标准化让它看起来稍微好一点,我们去

现在这些看起来很相似好的完美,它知道哪个钱包

我连接到正确的你可以看到它从那里提取信息

现在让我们看看如果我注销会发生什么所以让我们去连接的网站让我们删除

本地主机并注销我在首页

我们要打 uh connect wallet一旦它让我们

让我们杀死我们的服务器,让我们开始吧我们的服务器再次

我们去吧

好的,所以它要求连接钱包所以假设我连接

我选择我的 coinbase 区块链之一让我们点击连接

你去吧,我进去了,所以你可以看到该身份验证实际上正在工作

正如预期的那样,它正在拉动我的钱包代码现在让我们完成

我们在这里的造型真的很快,所以例如,当我选择它时,我们希望它

变蓝就像这样我如何在这里选择它

变成蓝色并保持蓝色所以为此你需要

实际上跟踪状态所以让我们走吧并快速更新我们的内容

需要做的是我们需要跟踪状态所以我要在这里粘贴

基本上我要说的是嘿活动图标和设置活动图标和

那么默认状态将是不管最初的标题是什么,因为

一开始我希望资产是蓝色的这就是它所说的

做第零个蓝色

然后我们需要将 u-state 导入为好吧,实际上是从反应开始的,所以我们走吧

前进并做到这一点现在我们正在使用使用状态现在我们

实际上需要开始使用这个这个活动图标和设置活动图标

所以我们有我们的导航项目现在点击我们需要做的

一些东西所以让我们继续点击我们会说设置活动图标

到 item.title

然后我们需要的另一件事to pass 是样式属性

到我们的导航图标好吧,就像这样,所以我要说的都是

如果标题等于一个我刚刚点赞的那个

如果那是活动的,我点击了然后将其设置为蓝色就可以了

点击 点击 点击 点击 点击它有效

如此活跃的图标当我点击它时

如果这等于那个写在这里

然后把那个蓝色我们去吧

这就是制作它所需要的一切只发生几行代码

所以现在我们的侧边栏是完美的完全的

我们的桌子非常好去,我们的钱包已连接显示

现在看起来真的很好,我只需要在这里添加

我们当然需要带这张图表在

然后在这张图表的顶部,我们还需要

在这里建造这些,所以让我们在这里快速构建这些

让这些启动并运行所以这些只是促销,没错

他们都是这样,让我们​​继续前进吧那些促销

我要在这里创建一个组件它将被称为 promos.js

然后在 mypromos.js我要做一个我要做的

赛跑完成那个

然后在这里我要添加我的样式没问题,所以我们要添加

在我们的包装中我们要给它一些利润

顶部和一些填充权我们将有我们的报价卡

看起来就是这样的样式这个标题

将会它说的收益就是这样

将成为标题

然后我们需要有我们的风格描述,所以这只是字体大小

我们得到了占位符给它一个弹性一

然后这将是我们的额外的

完美的好的

凉爽的好吧,所以这就像我的任何事情

猜测底部的附加值好的

很酷,所以我们很擅长这个现在我们需要做的实际上只是

把这个放在一起,所以我要走了去这里说包装

好的,然后在我的包装内我要拥有我的

优惠卡

然后在这里我会有我的头衔让我说产量

赚了所以这是我的优惠卡一张

然后我们将有我们的报价卡两张这会说

学习和赚钱就这样,所以我们有两张牌

现在我们需要确保这些促销出现

那么我们希望这些宣传片在哪里展示向上

我们可能希望他们出现在缅因州

所以让我们回到 main在这个投资组合下面我是

要在此处添加此 chromos 不是如此定义

确保你像这样导入它让我们刷新

并且 styled 没有定义同样的问题,我爱上了每一个

一次,所以让我们继续添加所以我要说导入风格

从样式组件就像这样所以现在它应该把它带进来

完美,我们的卡片出现了看起来和预期的完全一样

现在我们需要做的就是完成我们需要完成

在它们内部进行样式设置并添加往里面加东西

好酷所以

这就是我需要做的我需要做的给它一个描述

好吧,那可以赚

并赚取高达取决于

2.84apy 在你的加密货币权利年度

百分比任何利益或任何权利

描述我们会有一个占位符的权利

在那之下那只是为了给它一些

额外的间距和类似的东西然后我会给它一个额外的

一个这样就可以了你会看到的,让我们展示一下

你,因为我会看起来更好,我们去所以这是我们在这里的补充

2.84%出现就在这里 繁荣

然后 span 标签知道如何设置样式它在 span 标签内

所以如果我进入我们额外的您可以看到 span 标签的组件

我们说,嘿,这样设计覆盖颜色使其变为灰色

然后字体大小

美丽的完美,然后我们需要填写我们的

学习并赚取一部分,所以我们要去前进并立即填写

赚到到

好的同样的东西占位符,然后验证

身份,我们给予它特别的蓝色

所以当我们去那里看的时候,我们就去现在在我们的本地主机上,您可以看到

呃,现在看起来超级坚固让我们在余额图表中添加

那张图表就在这里我是什么要做的就是我要付出

你在一个可下载的资产图表中,所以您不必复制文件

但都是硬编码的数据我们将继续建造它

你可以写出来你也可以下载

这个文件好的,它会被调用平衡

图表.js好的,它将成为一个组件

这然后在里面

我们要做几件事我们需要安装这个

图书馆就在这里,让我们继续吧安装它,所以我要说 yarn add

我们要做反应图表js2好的,然后我们需要开始

构建我们的图表,所以我们的图表正在运行有很多东西所以我们要

在此处创建此变量,称为 const数据可以保存我们的

图表,让我们实际构建我们的组件优先

现在我不需要从反应没必要就像

可选的,你真的不需要做那

这是我们的余额图表让我们构建我们的包装器

案例将是空的,然后我要把我的包装纸放在那里

让我们像这样结束包装器哦

好的,然后在这个里面包装我要添加一行

那条线就是你说的那条线看

在我们已完成的应用程序中,您会看到这个应用程序这条线就在那里,所以我们

只是再次对那行进行硬编码你可以添加它,这是一个额外的

挑战你,但请记住它只会让这个应用程序全部

前端基地,我们永远也达不到后端部分如此

其中一些只是为了一种让应用看起来很棒的节目

所以让我们添加那行然后我们需要做的就是

创建数据这将容纳一切,所以我要去

在这里做 const 数据好的,然后在这个数据中,我是

我要做两件事有标签

让我们把它留作空数组,然后我们将有数据

集,这将是一个空的数组没问题,所以这是两个

我的数据需要的东西我的标签

我会有多个标签所以有点像我在这里的几个月

4 月 5 月 6 月 7 月然后对于我的数据集,我将

在这里给它这个对象所以填充是假的线张力背景

color 这只是为了样式化那条线它是什么

点半径应该是点命中半径所有这些然后你就扑通一声加入

里面只有一些虚拟数据这创建了我们的余额图表,然后

我们需要做的就是继续前进并使用该余额表,所以我们

将继续我们的投资组合在我们的投资组合中,我将

导入这个我们要导入的余额表来自

平衡表并且无法解析刚刚拥有的图表点

杀死服务器并重新启动它这就是我在这里所做的一切杀死服务器

重新启动它好吧,呃,看起来像

它是好走

所以我现在导入了它现在我们只需要用它

所以我们需要做的就在下面我在哪里展示

让我们看看在哪里添加它的好地方现在让我们在上面添加它

投资组合表,所以我会向右走在投资组合表上方

我们会在那里添加它让我们看看如果它对我们有用

所以这里有错误所以我们走吧回到我们的余额图表

那是因为我们需要在这里解构所以我们

去解构数据和解构

选项

我们只需要实际创建选项这就是我们需要做的,我们走吧

就在这下面我们要做 const 选项

我要说插件传说然后我们要说显示

错误的

就这样现在选项已定义

好吧,现在我们有一件神奇的事情在这里做的只是从导入图表

收费汽车

即使我们没有使用它我们的代码

它实际上摆脱了我们的错误有和

这是我们的图表好吧,漂亮,所以现在我们得到了我们的

图表我们需要添加一些东西

那里所以我们要进入我们的内部

文件夹我们只需要再创造几个

例如我们需要创建的东西图表样式

所以我要去下面内容

我们需要创造和样式我们的图表

在它周围加上一个边框,这就是所以这会放一个

像正方形一样围绕它有点像周围有一个

数据表 资产表

接下来我们需要做的是只是为了平衡这个

真的不会有任何造型我们将有余额标题

并给它一个特定颜色

我们将有一个平衡值好

所以这些是我们需要的样式为此创建

现在让我们开始建设我的内容中这些都可以

会有图表好吧,在那个图表里面,我要

有一个 div在这里我将拥有

我的平衡和里面我们会保持平衡

标题我要说投资组合

平衡然后我们就会有我们的平衡

价值

和嗯我们会给它一个美元符号

我们当然会在这里从我们的钱包里拿出这个,所以我们要走了

说 2语言环境

细绳我们马上就做这个

让我们随便放一个现在的数字像 46 000 这样你就可以

看它显示投资组合余额是

出现在那里就是这样的样子

我们追求

让我们拿我们的余额图表,把它在我们的图表中,就像这样

我们去看看那有多好看着那里,我们就这样

我们这里的前端差不多差不多完成了

所以我在这里注意到的一个错误是当我尝试上下滚动时

就在我试图向上滚动时向下

它没有在任何地方移动我被卡住了所以我要做的是

进入我的 main.js 和我的 main我要做的就是我要做的

溢出y 滚动,因此允许滚动

y轴,所以在这里我可以看到它,但是仍然看起来很丑,我不想看到

滚动条

所以我要做的是说 webkit

像这样的滚动条带有双点和开头

我要说显示没有任何

现在让我们看看所以看我实际上可以上下滚动

但是没有滚动条所以

这就是我们所追求的样子对,就是这样

完全完美伟大的

如果我在悬停时查看我的图表看看那个漂亮的小59 80 81

对,它表明它非常好,你可以见底

如果你想定制这个你知道随时继续进行定制

它可以随心所欲嗯,我们现在开始变得漂亮了

接近所有惊人的区块链和 JavaScript 部分

所以为此做好准备,因为那是即将开始和理智,我们是

即将把它们混合在一起,这是一个我们正在构建的很多前端

我们正在进入它只是留在我身边好吧,现在让我们恢复理智

得到我们的,因为我们想做的是我们想要得到我们的全部平衡

在这里,所以我们要做的是要去拉

我们疯狂的一切在我们的理智数据库中

好吧,我要拉那个我要拉

然后我要做的是即将

在第三个网站上看到那个确切地看到

你知道每个令牌如何我每个人有多少钱

这些令牌中的例如理智你知道给我好吧这是一个比特币

那么我在第三个网站上查找我去我有多少

在比特币第三网络告诉我嘿你拥有三个比特币

好吧,很酷,然后我加三个然后我去恢复理智,我走了,还有什么

令牌我有它你有 eth 和它去,然后我去第三个网站,我去

我各有多少你有四个 eth 所以我去三个

加四然后我再次执行该过程,我变得理智

下一个令牌是什么我有 solana 好非常理智去问然后我们去

并问第三个网络嘿你知道多少

我有灵魂吗?第三张网告诉我们我们的钱包里有150个灵魂

好的,那么这就是我们所拥有的一旦我们完成了这个循环并且

像这样迭代你没事我们让您知道 x 的总数和

这不是我们不打算存储这个,因为它不在同一个

所以我们想做的是我们将这个乘以美元是一美元

值我们将它乘以它相应的 usd 和 this 由它的

对应的美元兑换权so例如首尔

136 美元所以 150 乘以 136 4

千乘以美元,因为 Eth 3 乘以

四万一千美元三个比特币然后等于一个大

呃数字所以让我们说那是我不知道十六万

美元,我只是在弥补150次是多少让我们看看130

所以我们的灵魂价值大约 20 盛大我只是在做这个随机数学这是

40 乘以 3 就是这样120 千

比特币然后4 乘以 3 100 是 12 k

对,所以所有这些结合起来应该是120 加 20 140 140 加 12 大约是 100

152 好的,所以我们想要这种平衡像这样更新

这基本上就是我们想要计算的方式那就是我们要去的地方

有理智和第三网络互相交流回来和

向前所以让我们去

理智好吧,我要做的是我

需要创建一个查询,所以我要点击视觉

好吧,让我们进入我们的内部想象

愿景将使我们能够创造一个很好的查询,这就是这个查询

看起来所以我在这里写了这个但我们也可以从头开始写

让我们删除让我们删除它并

我会让你走过这个和我一起放大一点

点这里,这样更容易阅读但我们使用的这种语言叫做

grok 这就是让我们创建这个查询所以我只是去

说给我类型是硬币的地方

接着在那里给我名字

所以假设我点击 fetch你会看到它刚刚给了我

背部我所有的硬币和他们所有的名字

好吧,很酷,有点像graphqli这就是你写graphql的方式

有点类似这个也给我是美元价格

让我们确保把逗号放在那里因为否则它会窒息

所以放逗号现在它给了我每个人的名字

每个完美的美元价格正是我们正在寻找的东西

你在的时候给我合同地址因为那将是必要的

很酷,所以我现在得到了我的合同地址把符号和标志也给我

好吧,现在我有了此网址的徽标图片

我得到了我的合同地址 我得到了it’s ethereum 是 eth 的象征

和美元价格,它正在这样做给我所有的人,所以我回来了

三的结果对,它是一个对象数组,所以

很简单的逻辑 api 的所有 api 是怎样的

对现在对我来说重要的是

明白所有这一切都只是在我的 ui 或

我的网址所以如果现在我要做的就是复制

这个网址,如果我粘贴那个网址并点击进入

繁荣看看我得到了我所有的数据在 24 毫秒内,所以速度非常快

对,这是快速进入,现在我在 22 秒内找回了它现在我进去了

17 毫秒 现在 13 毫秒所以你可以看到它正在缓存它并且

它只是让它越来越快每次我得到它

所以这就是我所需要的就是这个网址

所以让我们继续回到我们的应用程序这就是我们要做的,我们是

将创建一个使用效果挂钩

所以我要创建我的使用效果钩子让我们导入它

好的和对此的依赖一个将是一个空数组,所以

根本不值一提我基本上会说

这将是一个异步函数

这就是我们要做的我们会在这里尝试一下,所以我只是

要说 const硬币

我们会等待拿来

所以双引号只是因为有一个单引号

在里面

完美的当然我们需要抓住,所以我写了

我的尝试,让我们做我的捕捉我们就说

抓住错误

对,我们只做console.log错误

像那样

然后一旦我拿到这一切我需要做就是去

临时理智令牌,所以这些是我们的我们得到的理智标记

我会等待coins.json

一旦我有了它,我就会更新我的状态,所以让我们创建一个状态

将跟踪所有变量的变量所以我们要说理智

代币设置理智标记

我只是要做使用状态我们将从一个空的开始

大批你的状态没有定义所以都擅长

我们将导入您的顶部状态

好的现在我们得到了这个,我们只需要

更新状态,所以我要说将理智标记设置为

tamsanitytokens.result你知道为什么,因为我们知道我们

当我们运行这个查询时

我们有这个数组,它被称为结果

好的,这就是我们将得到的通过执行结果访问它

让我们缩小一点

凉爽的你知道我们在这里的时候让我们

安慰记录临时健全性令牌,这样我们就可以采取

看它我会点击检查

我们会打控制台

我们需要做的就是运行它我们会去这里,我们会说得到硬币

并确保它返回取消订阅凉爽的

让我们刷新

我们去看看结果

繁荣我们甚至确切地知道查询是什么

我们得到了结果好吧,如果我把自己藏在这里

你可以看到我们的结果就在那里我可以看到这些合同中的每一个

地址正确以太坊

比特币solana 所以这实际上是难以置信的

使用方便所以这太酷了

理智真的很酷太酷了,我的意思是真的很容易

你知道那是什么数据库易于使用它实际上变成了

我的意思是我们所做的只是一个 api要求

对,呃如此简单,并且该 api 已在线部署

所以即使我们把工作室关在这里从技术上讲应该仍然有效

确实如此,因为我刚刚尝试过试着把录音室关在这里我关了

关闭该服务器,我刷新了它仍然有效

所以即使没有工作室运行它工作得很好

惊人的所以现在我们已经清醒了

代币在我们继续之前让我们

只要确保我们还有一件事安装了我们将需要的

将是以太所以让我们做纱线加醚

这将是一个重要的包裹我们需要让我们确保

我们拼写正确没错,然后按 Enter

这将确保我们接下来的步骤很好

我们将要做的现在让我们在这里的顶部导入以太

所以我们要导入我会说乙醚

我会用醚做的

像这样然后让我们导入第三个 web sdk

所以我要设置第三个 web sdk从第三个 web sdk 就这样

因为我们需要所有这些现在

好了,现在我们有了第三个 web sdk现在添加了醚类

我们要做的是让我们创造第三个 web sdk

这就是我们要做的,所以我们走吧这里到处都是

我们将在这里初始化它这就像我们的第一件事

现在就创建我们的第三个 web sdk这把钥匙在这里我们只想说

元掩码这里的元掩码让我们转到我们的 n 文件

我们怎么称呼它是的,我们做到了好的,完美,所以这创建了我们的 sdk

然后我们可以随时使用好的完美

这里的网址将是重要的是让你知道我在哪里

这个网址来自去你的元面具

点击

这个按钮就在这里进入设置在你的设置里面一直走

下至网络去rankib测试网络点击那个

箭它会在这里告诉你你可以看到

链 id 为四对,这是我们的以太扫描

它还会向您显示您的 rpc url你需要所以拿那个网址

把那个坏男孩贴在那里这就是实现这一点所需要的

很酷,所以我们得到了这个 sdk启动并运行,这很好

现在我们需要做什么让我们继续更新这个

忽略那个真正的快好了,现在一切都很酷我们需要做

确保一旦我们得到它,我们就会看到这个在我们的理智标记内

我们相应地更新它好吧,让我们清理一下这个函数

相当多所以这就是我们要我们需要这么理智的代币吗

我们只需要做两件事我们需要得到

理智标记然后我们需要获得第三个网络

令牌就是我们需要做的所有事情所以我们需要跟踪这个

状态所以我们要说 const我们将设置第三个网络

令牌,然后我们会说设置第三网

代币我们会使用状态

像这样好的

伟大的现在

我们在这里发生了这一切需要做

呃把这部分清理一下吗我要重命名我的函数

我会称之为恢复理智第三个网络令牌,因为那是真的

这是在做什么,我要重命名它也在底部

我会清理很多所以我要去

我在这里摆脱这个控制台日志我要摆脱这个陷阱

将在这里摆脱这个尝试让我们继续努力清理它

这个点结果让我们执行以下操作我要去

像这样包起来,然后放一个点结果在那里,事实上我

可以称之为理智标记,因为范围的

好的,所以这个理智标记会不是理智的象征,因为它是

超出范围所以让我们使用它好的,所以那个变量很好

所以现在我们已经设置了理智标记现在我需要做的就是设置我的

第三个网络令牌所以这就是我需要的我要保持理智吗

令牌.map和

我会做的只是让你看到它好吧,我们只做 token.contract

地址,这样你就可以看到这给我们带来了什么你可以看到每个令牌

我实际上得到的合约地址就在你的右下角

可以看到所以

我需要做的是如果我把它喂给sdk 是对的,所以如果我做 sdk dot get

令牌模块第三个 web sdk 你会看到它

帮我真正从第三网

现在就在那里而不是控制台记录它我真正需要做的就是

返回这个作为一个数组

好的,我需要做的就是放

呃第三网络令牌

把它包起来保存就是这样,所以这是返回一个

大批好的,过一会你就会看到

到底是什么样子所以让我们只需在此处添加我们的控制台日志语句

一个要给我看理智标记一个将向我展示第三个网络令牌

第三个网络令牌就在那里应该

正在使用好吧,让我们复制,让我们粘贴

这里只需要一个资本w 就在那儿和右下角

你实际上可以看到这些值出现了,所以如果我隐藏

我自己在这里你可以看到我有理智而且它

清楚地告诉我我得到了三件事来自理智三代币和合约

地址 一个用于以太坊 一个用于用于 solana 的比特币

然后在第三张网里面你可以看到它向我展示了三个令牌

模块一二和三个

好吧,完美,我们就是这样毕竟,我们应该做的是

因为我们需要访问这些令牌在整个应用程序中都有

让我们提升我们的状态所以我们要代替投资组合

把它举起来,把这一切移到仪表板,让我们继续复制

这让我们去仪表板粘贴在那里

我们还将复制整个使用这些控制台日志的效果挂钩

陈述和我们将它们粘贴在这里

然后我们会复制我们的

基本上剪其实可以剪所有这

并粘贴到这里并削减你的 sdk 回去

将您的 sdk 粘贴到那里我们不需要任何这些

投资组合 我们的投资组合可以保持清洁像这样

现在它抱怨使用数据是没有定义所以让我们去我们的仪表板

我们需要定义新的状态和使用效果所以让我们在顶部

在这里,我们会说使用状态

然后我们也会使用效果像这

让我们刷新一下,希望它有效

我们去吧我们还在恢复理智

呃第三个网络信息一路在底端

我会隐藏自己让你看到完美,这正是我们所追求的

所以看起来很棒让我们继续摇摆不定

我们在这里需要的一切现在我们需要通过这个

信息下降,所以我们的标题正在运行需要它,我们的主要将需要

所以对于标题,我们已经给它钱包地址让我们给

它是我们的理智标记以及理智代币

然后让我们继续并给它我们的第三网

像这样的代币第三个网络令牌

然后让我们继续重复这个主要流程

所以主要得到这些东西和标题得到这些东西

所以现在这些组件可以访问所有这些数据

现在我们在投资组合中让我们继续并解构它

所以我要说第三个网络代币

我们将需要我们的理智令牌,我们需要我们的钱包地址

现在让我们通过控制台记录所有这些东西,看看我们是否真的

得到他们理智

让我们去这里理智令牌我们会说钱包地址

让我们确保我们得到它我要放一个

枪表情符号就在那里看看我们是不是这样

目前它正在将其发送给我们未定义,但我们很快就会解决这个问题

好吧我们的投资组合没有的原因

仍然可以访问它是因为只有main 和 header 可以访问它,所以我们

必须去找我们的投资组合在哪里让我们去我们的主要

从我们的主要内容来看,我们需要做的是我们需要解构那些所以我是什么

我要做的是复制这是我在这里的投资组合

好吧,让我们去主要的粘贴在那里

凉爽的让我们去我的仪表板

我会复制所有这三个让我们回到主要

并在此处粘贴这些所以这就是如何访问

它在这里你去钱包地址凉爽的

现在看起来我们的投资组合正在做

所以我们的投资组合现在是与我们分享第三个网络代币

繁荣就在那里,我们会去仪表板

我们将在这里注释掉这些行只是为了确保它来自

投资组合,如您所见它来自投资组合好吧枪

表情符号应该告诉你让我躲起来我自己在这里你可以看到枪表情符号

繁荣你可以看到令牌模块来自这里,所以看起来像

事情是相互联系的,我们正在传递数据来回

你知道如果你能看到它在层级右侧仪表板

我们这里有仪表板接着

我们有我们的子组件,所以在这里我们有

我们的另一个组件是我想这个组件就在这里

成为我们的

主组件右 main.js然后在这个之后我们有

把这个画出来所以我们有我们的

文件夹所以这就是为什么我们必须做道具

钻孔,我们必须通过从仪表板到的第三个 Web 令牌

主要成分对,所以基本上它看起来像

这就像我们有我们的三个我们的代币

我们必须从这里通过它们然后我们必须通过令牌

从缅因州到投资组合,所以它有这像

绕道多个步骤,但它最终最终进入投资组合

我们正在查看的层次结构好酷

所以现在我们可以访问这个让我们看看吧让我们去

缅因州

所以第三个网络令牌拥有的一件事这种方法的平衡是为了

例如我可以做第三个网络令牌是的,我可以在这里看到我所有的代币

所以我拥有的每一个令牌这

此处未显示的秘密方法但这是

余额一旦我们称之为

这让我们可以检查什么是你知道什么是平衡让我们

说我们实际上拥有的以太我们的钱包

所以我能做的是以下我们可以做第三个网络令牌,让我们得到

第零个令牌,因为在这种情况下我相信那是我可能的以太坊

错但是无论如何,让我们继续检查

第三个网络零九 x 零 xe9 随便是的,这是以太坊

我们得到的一个所以让我们回到这里零 xe9 是的

所以零

和我们能做的

像点平衡之类的东西然后我可以输入我的钱包地址

这实际上是返回一个承诺

所以如果我真的给你看这会返回一个保证所以我要做的是我

一旦你得到这个,就会做点然后抓住平衡

让我们通过控制台记录余额我们走了,所以你可以看到它正在显示

我得到了以太坊它向我展示

确切地价值是什么,我有什么

显示值为 15。所以 15意思是它说我有

15 乙这就是我所说的

所以让我们看看里面

让我们看看,是的,你确实可以实际上验证我有 15 eth 所以

它实际上是在拉动那个价值正确地

所以让我们回去,所以我们想要什么做的是我们要拉显示值

所以我要去这里做点展示

像这样的价值完美,所以我马上就到 15 岁了

现在我需要这是一个整数,所以我实际上可以将其解析为 int

我的意思是我可能是 15.0所以这可能很有用,但我可以

也有一个 int 和任何一个应该工作所以我能做的是如果我

想保留小数性质是我可以做数字

这样它只是把它放在一个数字中而不是一个整数,你可以看到

我会时不时地取回一个号码如果我愿意,我需要做的就是好

在这里更新这个人对,我需要能够通过

每种货币并重复处理并将总数加起来

例如我需要转换所有这些转换成美元

我所有的钱换成美元好还是把我所有的

代币成对应的usd值

所以例如对于 eth 我需要做什么

是返回这个权利并且基本上只是取回一个数字

这就是我需要做的,什么我的意思是一个数字是我需要

取这个数字并乘以这个实际上乘以第八个乘数

将乘以你知道,一旦我得到号码,我就可以

乘以 3 100对,你得到 46 000

所以如果我拿 15 eth,那是有道理的

乘以 3 100 我得到 46 000如果我把自己藏在这里你可以看到

406 000 出现在右下角

那里好的完美

现在我们需要做的就是重复这个处理第二个令牌的权利

在这种情况下,它将是象征性的这将是

比方说我的你知道比特币和比特币的价值

将是 41 642没错

那里说我有 291000

在比特币让我们仔细检查一下,这实际上是

比特币,不是别的东西7 比特币乘以 41 000 是

大约 287 000 所以看起来我们做对了

29.1万的数量就在那里然后如果我们得到最后一个

令牌将是价值 136 美元的 solana 井

所以应该给你6800让我们看看我们有多少 solana

在甲板上我们有大约 50 条茄属植物,所以50灵魂乘以136美元6800

美元,所以你知道的不多但这是我们需要做的所有事情

现在是每一次我们看到它只需要增加它所以一件事我

在我们继续之前要做的是跟随,我想做的是我

想创造一个价格一个

您的加密货币价格转换为美元就像查找表一样,让我们​​继续吧

做到这一点,所以我要说 const像这样给我们的令牌

好吧 然后我只想说四

令牌理智标记

好吧,这就像一个现代的 for 循环所以

使用这个而不是每个点四个我们将简单地说 token to usd

然后我们会做 token.contract地址

然后我们将对美元价格做代币好的,把它包装成数字

这样你就可以在一天结束

忽略下面的部分,我们将走通过那一起

现在让我们用控制台记录一下所以你可以看到,所以我们会做令牌

usd 所以这是你的查找表你会得到

并解决这个错误,你需要做的就是do 只是在这里说 const

对于理智令牌的缺点令牌你可以看到我有我的查找表

就在这里这个查找表我知道看起来令人困惑和奇怪

但这真的只是说好的比特币合约地址

这是它的美元价格对于 solana,这是美元的价格

为了ethereum 这是它的美元价格

这就是查找表所做的一切稍后我们将使用这个查找表

为了做我们的价格转换,并能够

乘如果我们得到七个以太坊会怎么样

我们不需要乘以硬编码136不过三百一元

好吧,所以现在我们想做的是我们基本上想把所有的

钱就像我们所说的一样关于所以让我们继续做吧

所以我要做的是创建一个我们将要创建的新函数

称之为计算总余额好的和

这就是它的样子然后在计算余额时我会说

全部的等于零,我们要做的

嗯,让我们做 const token第三个网络令牌,所以使用这四个

of loop 这是一种现代的做法这在大多数情况下都更好

每个超过四个所以我们有你想用的任何东西

每次使用四个嗯,一切都会很简单

对,所以我们要让它漂亮很简单,我们要说的是我们是

要说 const balance等于,我们将

获取代币余额使用我们需要输入的钱包地址

等待,因为它是一个异步任务

我们要让我们的函数异步像这样然后我们要说

只是增加总数经过

无论显示值是什么,我们得到

然后我们要做的是显示值

是呃调用方法号就可以了因为它我们把它作为一个字符串所以我们

需要把它变成一个实际的数字然后简单地乘以

在这里通过令牌到美元好吧,我们只是要给

它是地址这将查找我们的

例如,我们创建的表如果我告诉你控制台。桌子

我们对usd做token你可以在这里看到我们的桌子

这是我们的桌子那些是那些是所有的价值观

我们的桌子有权利,所以这是合同像我所说的那样映射地址

关于早些时候

现在让我们称之为返回 返回

全部的现在让我们做

计算总余额在这里我们将做控制台日志总数

像这样让我们看看我们得到了什么

并在那里繁荣 345 000 这使得完全有道理,因为如果你拿七个

比特币大约是 290一千美元,然后我有 15

即将三十岁的以太坊四万美元,然后我有

六千八百美元solana 如果你把这些都加起来

投资组合平衡完全有意义我们需要做的就是随身携带

那个号码在我们的里面

处于一种状态,这样我们就可以访问所以我只想说 const

好的,我们会去这里我们要说常量

钱包平衡套装

钱包

钱包余额我们将从零开始然后在这里而不是返回

我只是要做设置

总得这样老实说,我什至不需要返回

在这种情况下然后现在

我们需要做的就是调用这个在某个时候起作用,所以我们想要

确保我们使用我们的使用效果钩在这里

所以我们可以在上面或下面做我们会说使用效果

像这样做我们会把它放在里面

这里的使用效果然后我们就打电话给我,我会说计算总数

平衡就这样,我们会说返回

让我们确保我们的控制台日志

工作我会做控制台日志我们将总余额作为总和

我们会刷新让我们看看我们是否真的得到了什么

我们正在寻找好的,总余额为零,所以让我们

看看那里到底发生了什么所以这个常规的循环不会

在使用效果内正常工作我们将需要改变它

一些更先进的东西所以我要去

完全删除这个我们将从

开始,所以我要说缺点计算

总余额异步是的,我们将做我们通常的异步

然后在里面我实际上要做以下事情

所以我要说总余额这将等待,这将是一个

承诺不是全部我要做第三个网络令牌

我要在这上面做一张地图 我们是将做异步和每个令牌

我要你做以下事情给我余额

从那个令牌根据钱包地址

当前用户然后我想让你做的就是返回

余额显示值我们将乘以

你想做的一件事就是我们想要将其包装成数字,因此它是

一天结束时的数字像这样

以及为什么它包含在一个 promise.all 中因为这里

将返回一系列承诺然后 promise.all

await promise.all 将解决所有这些承诺以及这种方式有什么好处

写它是它的性能非常好

它会运行每一个它会基本上并行运行

它会执行所有的事情同样的确切时间

它本质上就是你想要的异步代码是正确的然后

最后一件事我们想要在这里做的是我们想要返回

总和所以首先让我们实际上试一试

所以对于这个功能,我只是去做控制台日志,我们将做总

平衡像这样

我很抱歉这不应该被称为计算钱包余额应该是

像这样计算总余额让我们看看它是否如此运行

我们会计算总余额将运行这个

我不需要这样做,我会做的我们甚至不需要这样做

实际上好吧,让我们点击刷新

让我们看看发生了什么这不是很好的平衡 这是平衡

就在这里这个 token.balance 的

并注意总余额是多少

数组的

我们所有的余额都以美元计这就是我们现在所需要的

去做归根结底就是打电话

减少这一点并总结一下例子

控制台日志totalbalance.reduce

我们将调用我们的累加器累加器

对和我们发生

然后总结一下

这就是我们想要的

最后一个论点将是这个我们要关闭所有的括号

现在你可以看到

它正确地总结了它所以只要你必须总结一个

数组总是只使用 reduce 和 this代码行在这里你可以

从字面上复制这个点减少等等并复制并粘贴你的另一件事

可以做的是你可以称它为 a b 和只是做一个加b

它就像一个递归函数,它有点像

称自己,嗯,这是累加器

所以这是第二个论点所以减少方法

给它两个参数返回这两个所以第一件事是它的功能

需要并减少第二件事

是嗯一个累加器和你想要的地方

累加器从初始开始值,所以这相当于 when

你喜欢总等于零好吧所以它只是累加器

所以这个累加器不断增加这个和这个曲线是什么

数组,所以就像第一次一样循环通过它

零加上那个然后 acc 就在这里变成这个值

然后是 20 然后是 kerr你知道从这里开始

曲线从那里开始,曲线变成这

那么你加 20291

000到

然后你做同样的过程然后将其添加到其中,然后在

结束你只是返回那个总和所以这就是我们在这里发生的事情

我现在只需要得到最终结果在这里做的很简单

而不是说 console.log 我只是需要设置钱包余额

为此,我们将继续设置钱包余额

到那个值,现在我要做的就是做的是我要去这里它说

钱包余额.localstring我只是要取消注释

我要评论这个一旦我这样做了,你就会看到我的

投资组合余额实际上正在呈现正确所以让我们去那里让我们

刷新

好吧,让我们看看发生了什么

好的,我们需要做的一件事使这项工作发生的事情不是

所有这些信息都正确加载当页面刷新此信息时

稍后加载,所以我们要做什么是说嘿注意第三个网络

代币让我们点击刷新

现在一旦第三个网络令牌获得更新,在那里更新为

好吧,我们也可以在这里添加理智不会伤害的

它只是确保它正在寻找这些正在更新,所以让我们刷新

每当理智和第三个网络令牌得到更新

繁荣它会触发它,因为记住如果理智还没有准备好

和/或第三个网络令牌尚未准备好这无论如何都行不通,所以可能

好吧让它等待,一旦那些如果那样的话,我们应该很高兴

有道理 好吧 很酷 所以说我们的投资组合余额现在是

装满完全准确地使用数据

从区块链所以我们已经在做一些

激动人心的部分现在我们要继续添加模态并使我们的发送和

接收功能性工作真的是这个应用程序的症结所在

说让我们开始吧现在让我们开始构建

莫代尔我已经换了衬衫,我是准备好去你喜欢我的你

喜欢我下面的黄色衬衫评论你喜欢它让我们继续前进

好吧,基本上我想做什么说到这就是开始

我的模态所以我们要做几个

让这件事发生的事情,所以我要走了将其粘贴到此处,然后我们将

浏览我添加的内容,所以我要从反应模态导入我的模态

我们需要安装它,所以我们会做纱线添加反应模型就像

这样就可以开始安装我的反应模态所以这就是你所需要的

yarn at 或 npm install我将从下一个开始使用路由,因为

为什么我需要路由好检查一下当我在这里点击发送和接收时

那条路线是如何变化的,这就是我们在这里做什么你知道我们不是

转到不同的页面,因为这只是一个你知道的查询参数

但是当我们这样做时,我们就是这样实际上弹出并提出

模型好的,这就是我们需要做的

这就是为什么我们需要路由器我们需要这个传输模型这是一个

我们实际上要制作的组件我们还没有这个组件,所以

让我们继续做吧开始的组件停止抱怨

我们将点击新文件夹我们会说这样的模态

在这个模型内部,我们将创建一个新文件

这个文件将被调用转移模态点js

在这个文件中我们将继续前进

像这样完成它好的

我需要做的就是放入一个这里有几件事,所以我要

保持这个非常非常基本的我要保持这个超级超级基本,所以我们都是

我们要做的就是简单地说返回

好的,然后我们就可以了里面会有一个div

我们要发送并收到

我们会给它一个文本颜色黑色,因此它可以显示在白色上

背景所以我们去黑色的

像那样然后复制那个样式然后

我们将其粘贴在这里,以便发送和接收这就是这里的所有内容

我们现在已经完成了,它应该停止抱怨

接下来我们要做的是使这个模型工作

是添加这条神秘的小线和这是将其锚定在任何

如果你想制作一个下一个 js 应用程序模态工作本质上是你必须做的

那个小技巧还可以酷接下来我们需要的是路由器所以

我要去这里添加我的路由器这将允许我拉

你知道信息来自链接改变

以及之后我需要做的事情这

只是建立我的模态,所以我要去这里

就在我的按钮容器下方我基本上会说模态的

好的和我们要说是开放的,因为它

modal 有多个参数可以,所以因为是开放的

我要说路由器

点查询点转移

我们就这样做所以这意味着如果查询存在

然后打开模态,否则不要打开模特,所以如果我击中,请注意这个

在这个最终版本中发送 enter so如果我点击发送和接收应用程序

查询存在,所以它打开它,但随后作为一旦我点击查询不

存在所以它关闭它所以我们将使用相同的技巧

这里然后根据要求关闭

我只想说回家的路页面,所以当你

单击它,然后关闭它它就消失了我还需要做的是包装这个

链接内的按钮,以便发送和接收按钮实际上需要是一个

链接就是这样,所以我们会继续,我们会链接这个

就这样

和这个链接

我们将为此创建一个href,所以换行这在

关联我们将创建一个 href 和我们的 href

会说以下转移

等于一就这样

凉爽的就模态而言

我们要做的就是我们要做的一切加在那里,所以现在当我看这个

点击发送和接收你可以看到我有一个模态实际上在这里弹出

对,所以它看起来还不是很好但它正在工作它正在弹出所以

这是一个非常好的迹象有什么东西在起作用

现在我们需要做的是在这个模型内部,我们需要渲染

我们的转移模态的,所以我要说

转移模态的

像这样,我们就要关门了暂时关闭

所以它只会渲染任何东西在我们的转移模型中

大小写发送和接收按钮让我们回到这里打中心

你可以看到发送和接收表现得如此完美到底是什么

我们一直在寻找现在让这个看起来不错,我们要去

添加一点样式,所以让我们继续做那我就是

要做的是我的模态,我们要去传入

我们要给它一些样式这就是要发生的事情

接下来我们要做的事情很酷,所以我们就在这里说缺点

自定义样式好的

在这些风格中我基本上只是添加一堆

的造型所以我们开始

所以这个造型会做什么你会看到等一下,但让我实际告诉你

先说对再解释它是如何工作的,我认为这会成功的

你更容易理解所以我们会说风格

他们只会传递自定义样式像那样

现在让我们看看我们的模态和繁荣

所以发生的事情是创建黑色模态

然后它正在添加它也在制作背景

那里是黑色的,例如,如果我摆脱这个让我们来看看你可以

看到我的发送和接收出现了还有这个

所以你知道这就是为什么会这样我转到我的传输 modal.js 文件,然后我

摆脱我的这里是黑色,我的风格是黑色

我在这里保存它,我们回去我取消注释

当我们去这里哦,让我们这样做

所以我的发送和接收仍然显示向上

好的,所以现在我们要把这个背景颜色留在这里你会

看看为什么稍后再叠加背景颜色对 这是做什么的

它给了我们这个漂亮的小覆盖,所以当我打这个

而不是它出现而不是它在后台像这样出现

就像这种灰色怪异的颜色我们希望覆盖颜色是这样的

漂亮的深色,所以当我点击时现在看起来

明显更好这就是我们想要采取的方法

此时此地我们能做的就是我们能实际上开始构建我们的传输

模型就像里面的东西这里

是我们现在要开始建造的只是为了快速解释这一点

这部分允许您将模态的

并添加背景覆盖和也使模态黑色

这实际上就是这样做的进入我们的转移模式

需要做的是我们需要创建一个包装

当然它会抱怨关于这个所以让我们继续添加

进口风格

从这样的样式组件

所以现在它不会抱怨而不是抱怨

div 我们将把它包裹在一个现在包装

像这样所以现在它看起来好多了

接下来我们需要的是需要创建一个选择器

好的,让我们创建选择器以及选择器将允许您做什么

确实是中心我们的文本和选择

例如当我去的时候在这里我们看看并繁荣它是如何做到的

发送和接收我们在一个专栏中所以我们只是把 display flex 所以它

把它排成一行,然后我们把之间的空间

所以它会均匀地将它们分开均匀地证明内容空间

对和订单项中心,使其集中

我们给了它一定的高度凉爽的

接下来我们要做的是如果你去看看

主应用请注意,当我将鼠标悬停在接收

是的,它变成了一点灰色,当我悬停在他们身上

它不仅转它会稍微改变颜色但是当我

点击选中的变成蓝色

所以我们需要添加造型

所以我要做的是我们要去抓住我们将要做的选择

基本上添加我们的选项样式所以我们的选项样式将是

这好的

这将使它如此悬停时实际上有一个背景

正在发生的颜色变化,所以请注意这当我点击发送和接收时

我悬停在现在有点难看所以

我们将使它变得更容易看到它确实有效

和我认为实际上可能有帮助的是

加起来包装将它们包装在选项中,让我们开始吧

前进,现在就这样做所以让我们去这里,我们会去选项

我们想要添加我们想要包装每个这些在选项标签中

像这样所以现在

发送和接收你可以看到有更好的设计,当我将鼠标悬停在他们身上时,你

可以看到颜色的变化一种从浅到浅的灰色

背景,所以这就是我们需要的现在无论哪个是选定的,我们

需要说明保持活跃所以每当我这样做时,我实际上

考虑使用状态为此

让我们开始吧所以我要创建一个状态,它会

被称为行动,所以我们要做设置动作

然后我们将使用状态发送像这样

然后我们要做选择

这个令牌部分我们实际上可以稍后做让我们从正确的行动开始吧

现在然后我需要做的下一件事是

基本上添加一个选定的样式和添加未选择的样式,所以如果我去

这里如果您注意到这是选择的方式

一个看起来和未选中的有这些边界像这样以及何时

我选择这个边界消失所以这就是选择和

未选中的正在那里工作所以我们现在需要做的就是在我们的

我们需要基本添加的选项在我们的选项中点击所以右键

这里我们首先要添加一个样式

好吧,如果我给它一个风格和

我们说以下我可以给它选择的风格,比如

硬编码的那种如果我回去

好吧,让我们修复那个错误,所以它说使用状态没有定义所以我

只是要去这里,我们会说使用那样的状态

现在发送和接收,我们不要成功

一个对象让我们实际上只是给它jsx 因为它已经是一个对象所以我们

这里不需要有两个波浪线让我们再试一次,让你振作起来

注意发送现在是蓝色的

如果我们在这里做同样的事情这和我们说未选择的风格

你可以看到接收有那个边框但是当我点击接收时,什么都没有

正在发生,所以这就是国家将要发生的地方进来,这就是我们需要的地方

做点击需要改变的事情所以让我们添加一个点击

以及点击后的内容将使我们能够做

我们会做设置动作吗发送

那我会把它贴在这里和这个

我们将采取行动,你能猜到吗收到

所以繁荣更新状态接收所以现在点击应该可以工作

但我们只需要做出我们的风格动态的,所以我将如何做到这一点

我只想说嘿

基于用户的任何操作选择

是的,如果它发送那么你可以选择一个选定的风格,如果

它不是发送然后你可以选择未选择的发送样式

我们基本上要做接收相同的东西,除了

重新发送我们要说接收

在那里所以这就是他们将如何决定

他们将如何被设计成这样现在,如果我全屏显示,我们就走了

繁荣看看那个它只是工作它是如此顺利而且它

效果很好伟大的

所以现在我们已经完成了,让我们继续添加更多内容

在下一部分,我们将构建真的是多种模态,所以我们有

已经建立了这个模态但是在发送时点击发送我们需要

在这里渲染一种模式此处的组件类型以及您点击时

接收我们需要渲染另一种类型这里的组件

例如,如果我去这里并点击发送发送或接收

请注意这是模态的 这就像一种类型

组件这是另一种类型组件然后观看

我实际上可以点击进入这是第三种类型的组件

所以就像这里实际发生了很多事情

好的,所以我们需要构建所有这些

并且能够在这里写当

你开始发送 eth,例如,如果我们抓取并选择一个钱包地址

这种情况下,我会去尝试发送我

某物在应用程序的最终版本中,所以我会

复制我的地址就在那里,我会说发送它

到那个地址我们会说每个发送一个

目前我的钱包如你所见15 假道德权利

这行不通,因为我们是发送到不同的合约地址

因为它是一个不同的应用程序,但那是好吧,让我们继续吧

我会在这里继续并注意现在这是一种不同的类型

模态的表示转入专业人士进度或

不同类型的组件,这是还有另一种类型的组件,所以有

喜欢需要渲染的多个东西

在那里,所以我们需要继续前进建立那些

所以让我们像简单的组件一样构建如果你点击发送会发生什么

或接收所以

我们可以做到的一种方法是我们可以基本上去

我们可以说你懂

选择模态的

我们可以把它变成一个函数,所以我基本可以这么说

好吧,这个它会根据状态而变化

所以这就是我们要做的正确的事情就在这里,所以我们有我们选择的模态

它会接受选项或您正在选择哪个选项

对,例如发送选项或接收选项或

你知道硬币选项哪个选项您是否选择并以此为基础

切换大小写的选项基于它将呈现的选项

无论您想要哪种模式或者您希望该模态呈现什么

例如,这就是这样工作,所以让我们下去吧

我将创建一个模态主样式

所以那是它只有一些填充和弯曲

所以它会占用,因为我们想在这里占据整个空间

让我们回去,我只是会说模态的

主要的像这样

在模态主要里面我想要什么我现在想渲染一些东西吗

例如,假设我是渲染h2,我说哟

并注意到那是正确的那里

完美的我想把这个从 h 改成那个

选定的模态和任何动作类型是

所以默认情况下动作类型是发送好吧,这就是它写的原因

发送现在如果我选择收到通知

变成接收好的

所以看起来它工作正常我选择的模态功能能够

正确选择模态好的,现在这里是模型

我们需要渲染使成为

好吧,这将被称为转移

我们将称之为一次转移转移

我们拥有的下一个将是叫

收到这将是接收模型,所以

让我们开始处理我们的转移模型,因为这是最好的

任何地方都是最重要的反正一个

让我们继续做吧所以

在这里,我将创建一个新的内部我的模态文件夹

我们将在这里创建一个新文件我会称之为转移

点js

好的让我们开始吧

以超级简单和 raf ce 完成摘录

在这里我只想说

约扎让我们回到我们的应用程序

如果用户点击发送而不是这个,它应该呈现

转移

像那样现在

点击导入,所以它应该从顶端

我们去吧,你看约扎

如果一切顺利它做到了

我在看它我爱你把它打碎顺便说一句,像按钮一样粉碎那个休息

好像按钮 好的 很酷 所以这就是我们得到的

在这里,我们让这个 yowza 出现了太好了,因为这次转会是

工作,我们需要保持更换这些组件,因为

为此,我们需要有多个案例我们将在稍后处理它们

让我们继续我们的转移吧所以让我们先处理我们的样式

首先我们要做一个包装

好的我们要

导入我们将要使用的样式组件说从样式组件样式化

像这样刷新

很酷,当然我们需要包装这个整个约扎

像这样在包装器中好,太棒了

所以第一件事完成了那么我们需要做的基本上就是添加

因为你知道像两个和附加字段,例如这里

你可以看到我们的两个领域和我们的薪酬字段没问题,让我们继续

也许我们的两个领域或在这个领域好

所以让我们来处理我们的金额部分现在或我们的数量样式所以在这里让我们

go put amount 它将是 flex 1显示 flex 和 flex 方向列

为什么你会问得好,因为这就是正确的列

否则这部分会是正确的如果不是在这里

太酷了数量是我们需要的

我们需要的另一个是我们的flex 输入容器,让我们继续

以及风格为此添加样式

我们需要另一个将是我们的弹性

输入

所以我要添加样式那

好的,然后我们还需要一个我们将在一秒钟内分解它

这将是警告我们走了,所以我们得到了警告

凉爽的好的,所以我们得到了所有的

我们现在需要让我们去构建这个所以我要说

在我的我要拥有我的我要暂时删除它,我们要走了

说数量

我将把这个模式留在这里所以你可以看到它实时更新

当我们不断向其中添加东西时,我们金额在我们的金额之内

会有我们的弹性输入像这样的容器

在这个容器里面,我们要有我们的弹性输入

这将是一个自闭合标签,所以我们能做到这一点

我要给它一个占位符零

像这样,所以你实际上可以看到它右下角有零显示

向上我们会说类型是数字

然后我们将做价值,我们将添加一个改变也是如此,但我们会这样做

稍后我们将离开这个原样

然后在这个弹性输入的正下方我想添加的是我只想添加

跨度标签

这个跨度标签将创建包含符号,例如我们

可以说我们去那里吃好的

看起来很漂亮让我躲起来我自己在这里所以你可以看到

你可以看到它看起来不错确切地

正是我们在这里追求的没错

这就是这一切看起来都很好现在我们要在下面添加

我们的警告量基本正确在此之下,我将简单地添加我的

警告组件在这里我要说数量是

必需的场地

凉爽的好的,我们基本上会

说颜色是如果数量存在那么我要你做的就是给它

一种不同的颜色,即该颜色在那里

我们将在其中硬编码一个金额案件

我们就说几句好的

重点是向你展示嘿,如果

我添加了一个数量然后它不会显示如果我拿走金额的话

那么它实际上会显示数量是你也可以做的必填字段

条件渲染以及这个整件事

所以没关系,或者你可以做颜色隐形

这也很好,两者都可以工作这只是这个空字符串只是一个

现在的占位符,当我们实际上加上我们的数量,我们实际上可以

正确跟踪它,例如我们想要在这里做的是说

常量数量

正确的设定金额并使用 state 我们将从零开始

我们将导入我们的使用日期然后改变你的样子

把这个我想更新我的金额,所以我们要

说是数量,然后我们要在这里添加一个基本的变化

要说

嘿将金额设置为

获取 e 输入,无论它们是什么参加活动,我们将

做 event.target.value

这将更新我们的金额我们应该很乐意这样做

我去这里我按一个

对,我们可以把这个留空实际上

所以现在我什么都没有写一两个现在显示还可以

硬编码我可以用实际金额

所以你可以从底部看到我的错误当我有金额时实际上消失了

当我现在删除它时,它说我的金额是必填字段

好的,所以我们为这部分在这里

是我们构建的数量部分此传输表单部分的样式,例如

我们在这里的表格,让我们走吧前进,现在就这样做

所以我要去拿那个造型所以我们只需要几个

这里的事情让我们有一个分隔线因为我们需要这个来善良

添加一点点添加其中一些分隔线将其分开

让我们拥有那个然后我需要有行

那我可以设计吗所以这些将是我添加的行

呃字段名我们将对其进行样式化

然后让我们为我添加样式图标在这里

这是呃我在寻找什么类型的造型

也许对于这个图标就在那里

我们在这里不需要这个边距,所以让我们摆脱它

让我们添加收件人的样式也是如此

这种造型将适用于输入你可以看到我在做

style.input 就在那里,所以这是指

当你输入正确的地址时那里

是的让我们为我们的硬币选择添加样式

列表所以让我们继续做正确的事

那里让我们添加样式

所以这将是例如,当我能够点击时

那种东西,让我们回去吧这里

让我们为我们的硬币添加样式名称

然后我们将拥有我们的继续按钮

你去吧所以这将是

这个继续按钮就在这里所以当我悬停在上面看看它是如何变成一个

指针向右,以便样式进行也在那里

现在让我们继续构建建立这个

我要一路登顶在这里,我们得到了我们的金额和

低于我们将要达到的金额有我们的转帐表格,让我们去这里

我们会说转移表格然后在这个转移表格里面

我们会有我们的行在这个注释行中,我将拥有

我的字段名,我们要说两个让我们来看看

我们只需要继续添加样式对于转移表格,因为现在是

说嘿我不知道怎么回事你说的是伙计,所以我们走吧

提前做,所以我会做对的在这个分隔线下面

让我们继续添加我们的转账表格所以现在它知道那是什么了

你现在去你看到这个到场得到填充

好的,就在这个字段名称的下面在这里,让我们添加我们的图标,所以我要

基本上就是这样说图标我们会做一个这样的钱包

现在它会像嘿,我不知道这个 fa 钱包是什么东西

好吧,这是来自反应图标,所以你会说 import fa

钱包来自像这样对图标 fa 做出反应,现在如果

你发现就在我的脸后面

你会在那里看到这个图标就是这样

那就是添加

凉爽的

只是决定让自己离开这样你就可以更好地看到模态

就在这个图标的正下方,我是将添加我的收件人

好的,这个收件人可以是自闭标签

和对于道具,我们会给它一个

占位符和占位符只是要说

地址所以你现在可以看到

该地址显示在那里所以占位符是我的一件事

需要让我们在这里添加更多所以占位符,我也需要

有一个价值,但我们会增加价值稍后我们可以动态添加它

所以我们能做的是我们实际上可以现在就去创造它

所以没关系所以我只想说 const value

或对不起收件人设置收件人

你说

好的

你可以让它成为此处空白为收件人

好吧,对于我们要达到的价值说

接受者然后改变

我们只是为 e 说这个将收件人设置为我们拥有的任何内容

就是这样凉爽的

惊人的好吧,让我们在这个下面

行让我们现在放一个分隔线,所以我要走了继续在这里放一个分隔线

很酷,所以增加了一点点分隔线有点难看

实际上,但它只是做了一个非常微妙的一点小小的改变,好吧,让我们呃

在我们的另一排工作好的,所以我们建造了第一排

这个领域现在让我们开始我们的第二个领域排

和字段名称将会

使用。。。支付

然后我们会做硬币选择列表所以这会给我们一个硬币清单

从中选择让我们做

硬币选择列出我在前面和里面拼错了

这里的我们会有图标

然后在这里我将使用我的图像来源

为此,我们将给它一个图片网址,这基本上会来

来自我们的一枚硬币所以

我要做的只是评论这个暂时出来

我要做的是抓住一个布拉德皮特的图像和点击复制图像

地址并将其粘贴到此处来源

所以一旦我这样做你可以看到我的图像正在弹出

稍后我们将使用一张图片一枚硬币

所以现在我们就这样吧很酷,所以你用什么付钱

好的,所以我们得到了我们的图标,现在在我们的图标下方,我们需要

实际上把我们的硬币名称所以在这个营地案例中,我们可以说

以太坊现在我们当然需要

将来动态地拉这个但是现在这很好

现在就在转移的下方表格我们将在另一行中添加所有

就在这一行,我们将添加我们的继续按钮,所以我会说继续

好的像这样我们将添加单词继续

并且繁荣继续现在出现在这里,我们将添加功能

继续正确,所以我们实际上击中了它一些真实的事情发生了,但现在

这很好 这很好很好,很好,我们最不需要的

添加是什么是你的平衡有这个权利,所以当我在这里

选择 eth 它告诉我吃多少我有余额

如果我选择比特币,它会告诉我如何我有很多比特币余额

对,所以我们希望能够放入这个平衡部分让我们继续

在这里这样做我们将基本上创建另一个

好的 然后在这一行里面我要做平衡标题

在这种情况下,对于余额标题,我只会将其硬编码为

伦理平衡

所以如果我们回到我们的应用程序余额标题

它说它没有定义,所以我们只需要添加平衡标题的样式

这根本不是问题我们只是没有添加那种样式

这个案例余额标题将是

我们真的不会给它任何样式,所以我们只做 const

平衡标题样式 div 并结束它只是这样我们就可以在那里拥有一些东西

然后我们要做同样的事情为了平衡所以我们要做平衡

风格 div 只是为了真的有这些 div 有名字

但不一定有任何样式案件

所以我在这里得到了我的余额头衔

好的,现在在它旁边我想要的真的是我的

平衡所以在这里我可以做我让我们说零点

你知道零 eth,所以我只想零点

或者让我们说1.2

对,我们就说 eth所以我已经硬编码了所有这些我们将

需要使所有这些动态化我们需要使这个动态

动态 这个动态现在它只是硬编码,但它是

美好的现在看看我打的时候

接收与发送看看有多好是我点击发送的时候

正确的发送只是挤满了呃有价值的信息

好吧,让我们恢复理智令牌

因为我要用那个令牌本质上

在此处构建此图像,而不是现在使用布拉德皮特的形象

让我们去转移模态在我的转移模型中,我们将

跟踪另一个状态,它是将成为我们选择的代币,我们

会设置选定的令牌我只是要使用状态,我们是

将使用零的理智标记现在你就像嘿,这个令牌在哪里

来自(哪里这个令牌将来自

我们经过的地方 我们正在使用的地方转移模态,让我们继续

看看我们在哪里使用转移模态的

在 header.js 中看起来我们是在我们的内部使用它

header.js 我们将传递它,所以我们要说理智

令牌将成为理智令牌让我们看看我们的可变理智

令牌我们这里又没有了我们需要支撑钻这个

再一次好吧

我们在哪里调用我们的标题组件所以让我们现在去那里

好吧,也许让我们去我们的

仪表板.js仪表板.js 页面

我们在这里调用我们的标题组件我们正在传递理智令牌,所以

让我们回到我们的标题并像这样传递理智令牌

现在我们将它们传递给我们的转移模型

很酷,现在让我们转到我们的传输模型并解构理智令牌

支撑钻头有点烦人正确的方式,但这就是我们需要做的

如果我们控制台日志这就是您将看到的控制台日志

理智标记我们去看看控制台

希望我不碍事,所以你伙计们可以看到控制台控制台

正确这里是一个数组这个数组有三个合约

地址正确,我点击进入其中你可以看到我的标志是坐着的

就在那里,然后我需要什么做实际上是使用理智的东西叫做

图像生成器来实际构建它所以在传输模式中我们只需要

把它传给我们的转账,所以我要去说理智标记

理智令牌关闭它让我们去我们的传输模式,让我们解构

理智令牌以及我们实际上更好

让我们不要称之为理智令牌让我们称之为

选定的令牌选定的令牌让我们回到我们的

转移模型,在这里我们称之为选择

令牌和选定的令牌将只是理智

代币将是那里的选定令牌

好的,所以粘贴因为从转移模式我们需要

选择我们的令牌,然后作为一旦我们这样做,我们需要这个

更新所以这就是我们称之为的原因选定的令牌

酷让我们回到我们的传输模式现在

现在让我们也控制台记录我们选择的令牌,让我们看看我们在这里看到什么

选定的令牌好的

和现在选择的令牌是未定义的

那是因为我们实际上需要把它包装在我们的使用效果中

所以我们要使用效果挂钩好的

和我们要包装这个做这个

然后在我们的使用效果钩子里我们要

console.log 我们选择的令牌让我们在这里也导入使用效果

好吧,所以现在我们正在使用我们的用途效果挂钩

现在我们要做的是让我们让我们的转移访问一堆

其他的东西,例如我们的这个需要访问我们的设置动作钩子

因为我们希望能够改变当前处于活动状态的操作

让我们授予对选定令牌的访问权限我们已经完成了让我们给它

访问第三个网站令牌也是

让我们让它访问钱包地址

因为转移需要访问对于所有这些信息,现在我们

需要支撑钻并发送此信息

所以让我们开始工作让我们去吧传递模式

和这里

对,我们不需要选择它令牌

但对于固定动作我们需要说设置动作

对于第三个网络令牌,我们需要说第三个网络令牌

对于钱包地址地址我们需要说钱包地址

现在让我们看看我们可以访问的传输模式

我们无法访问所有这些事情让我们继续,我要走了

从这里复制所有这些,所以第三网络

代币我要把它贴在那里

现在我们得到了第三个网络令牌和钱包地址,所以现在的转账模式是

访问它需要的所有信息

一旦它从它把它传到这里

现在转移模态如果我们去我们的标题

这就是我们所说的转移方式或转移方式需求

也可以访问所有这些道具它需要访问理智令牌

我们给它访问理智令牌它还应该可以访问第三个网络

代币所以让我们往前一层

让我们在标题中添加让我们添加第三个

网络令牌,因为我实际上已经

通过我们的标题传递它让我们给

对第三个 Web 令牌的访问是第三个网络

代币好的,然后是我们的转移模式

还需要访问钱包地址,所以让我们让它访问

钱包地址现在我要进入传递模式

现在转移模式应该可以访问所有这些和转移模式现在

将所有这些信息传递给我们的转移

所以现在我们的转移可以访问所有那

现在完美选定的令牌正在工作,因为它是

发送我可以在这里看到底部所以如果我放一个小枪表情符号

或火焰表情符号来吧表情符号工作

我们去吧你可以看到这是有效的

它显示在右下角那里

它准确地向我们展示了哪个令牌呃,如果你是,我们现在有哪个令牌

想知道为什么不显示对于你这样的你,你知道结果在

底部你需要做的是你需要

下车去主页然后当您点击发送和接收时

实际上显示在底部,所以让这个模型工作的诀窍是

你必须到这里然后去模态你不能直接

去那个链接它不会工作所以只是你现在需要知道的

每次我运行它时它确实有效我们很好

现在我们需要准备好构建图像,以便构建

您需要实际导入这些的图像两件事,所以图像 url builder 来自

理智的斜线图片网址,如果你还没有我会安装这个实时包

建议你现在就去做,这样你可以做纱线添加

理智的斜线图像网址,只需安装就是这样,但我已经有了

已安装然后你需要导入

来自 lib slash sanity 的客户端,所以我在这里有

sanity.js在里面我有我的客户

所以这就是你需要做的一旦你做到了,现在我们将

开始实际构建我们的图像 url好吧,现在建立我们的形象

需要做的就是说 const url 和我们要去我们现在要建造

我们的形象,所以我要去基本上都在这里说

除了这里末尾的宽度我要说给我一个网址,现在

让我们通过控制台记录我们的 url 并繁荣你看到我的图像就在那里

如果我去点击它会实际上给我我的以太坊形象

图像 好的 完美 就是这样我们正在寻找

好的,很好,这是如何工作的我是如何建立这个网址的,我只是

说嘿去图片网址生成器好吧

然后用它来构建这个然后我们要做点图像

给它特定的标志,然后把它变成一个网址,所以通常只是

给你一个参考我们本质上是把它变成一个网址,当然

我们需要在这里添加的另一件事是选定的令牌

为什么因为选择的令牌得到更新让我们说用户

点击此处选择不同的令牌就在它更新的时候,我的使用

效果挂钩并再次构建它我

让我们也在这里跟踪状态所以我基本上会说 const

我们会说图片你懂

你可以说是的图片网址集图片网址

我们会说使用状态以 null 开始

然后一旦发生这种情况,我们会说放

图像 url 到 url 就像这样和现在我不需要

这些不再记得当你的黑客想

做这个正确的刷新你必须从主页开始

你必须基本上摆脱模态的,所以一旦你离开模态

然后你点击发送和接收现在它应该可以工作了

所以让我们一直走到这里而不是这个硬编码的布拉德皮特

事物我们要更换这个,我们只是

会说图片网址就是这样

让我们再次回到我们的主页

现在它在那里检查一下我们做到了,伙计们,看看有多好

没错,我们现在得到了吓人的以太坊标志,所以如果你喜欢

那个喜欢按钮订阅的粉碎该死的频道,所以我们可以得到这个

向所有人发布视频并帮助尽可能多的人人们尽可能成为开发人员

2022完美我们要跟踪的另一个状态

of 是哪个令牌在此处处于活动状态,因此例如我可以选择这个或者我可以

选择另一个权利所以让我们保持跟踪那个状态所以我要说

常量积极的

第三网络令牌

我们可以设置活动的第三个网络令牌在这里留空

好的,然后基本上是我想要的要做的就是抓住那个令牌现在另一种用途

我实际上想在这里添加的效果

是这样我才能真正得到我们选择的令牌

令牌在我的第三个网络中找到它,然后然后基本上匹配

因为我需要的是我需要访问第三个网络令牌,这就是我真正想要的

需要所以让我们现在就开始吧所以我要在这里做

在里面我会说嘿const 活动令牌所以活动令牌

我要你怎么找到它是去第三网络令牌并找到我这个

这就是我希望你找到它的方式令牌

我要你找到的令牌在哪里令牌地址等于

选定的令牌点地址

好吧,这就是它的样子然后我想让你做的就是

控制台日志积极的

令牌,我们会说哈哈,这样我们就可以了喜欢很容易找到

好的让我们更新这个网址

好的,让我们去我们的主页,然后然后一旦我们在主页上

让我们点击发送和接收凉爽的

我们希望它真正得到更新每当第三个网络令牌被激活时

或选定的令牌被选中哦这个需要签约

地址不是常规地址,所以这是错误

现在我们可以找到它就在那里

它正在拉动我们的模块,我们能够看看它,如果我点击下拉菜单

在这里我可以看到所有的细节并查看它的内部,所以它实际上

拉了令牌模块,例如这可能是以太坊让我们这么说吧

可能刚刚拉所有信息

我们第三个里面的以太坊代币网络现在我们需要在这里做的一切

这个控制台日志是我需要的基本上说 set set active third web

令牌是什么无论那个令牌是什么,我们无处不在

有硬编码的东西,比如以太坊或我们实际上要使用的 eth balance

并用选定的令牌替换它例如在这里我们可以说选中

记号点符号好吧,那应该

本质上给我们 eth 或者在这种情况下我们不想说我们想要的符号

说名字好吧,现在这会给我们

完美的以太坊这来自健全性数据库

顺便一提而对于每个余额,我在这里

实际上要说选定的标记点象征

现在它从数据库,现在我要删除

这个 eth 在这里所以你会注意到它说 1.2

但我们要复制这个并粘贴在那里,所以现在

你看它说 1.2 eth 完美确切地

嗯我们在寻找什么,我们做到了

动态已经是我想要的另一件事我想得到这个吗

平衡就在它说 1.2 的地方因为那个

仍然是硬编码的,所以我们想要基本上得到平衡并这样做

我要创造另一个使用效果点击这里

好的,我们会这样做this 和 this 的依赖是

将成为我们的活跃的第三个网络令牌

以及它的实际内部是什么我要做的是我要说

const get balance 我们要做一个异步

在这里发挥作用在这里我要说等待

积极的第三网

令牌,我们将做平衡我们要做钱包地址

然后我们要设置平衡不管它是什么,当然它是

Rate this post
退出移动版