以太坊钱包换了手机后(以太坊钱包转出收费吗)
了解如何使用 Coinbase 钱包让新用户更轻松地加入您的 Web3 DApp，然后看看它是如何使用包含的项目和代码示例完成的。
Web3 代表了互联网发展的激动人心的篇章。区块链提供的原语将导致无限数量的应用程序和用例。我们已经看到了 ICO、DeFi、NFT 和点对点支付系统的爆炸式增长。然而，在实现这项新技术的大规模采用之前，我们还有很长的路要走。用户体验是仍然缺乏的一个领域。
作为 Web3 开发人员，当普通人不了解非托管加密钱包或签名交易等概念时，我们应该如何吸引下一波用户？本文将探讨这个问题，并提供一个解决方案来帮助创造更好的用户体验。我们将看一个真实世界的示例，说明我们如何使用Coinbase 钱包 SDK为新用户创建无缝的入职体验。
现实世界的问题
Web3 中最有趣的概念之一是医疗保健和区块链技术的交叉点。HIPAA 合规性意味着患者记录可能不应该放在公共区块链上。但是，我们可以通过数百种其他方式使用区块链来彻底改变医疗保健行业。
在任何医疗机构工作之前，医护人员 (HCW) 必须经过超过六周的审查和验证。医院系统损失的时间和收入是巨大的。受信任的第三方连续数周进行认证验证、背景调查等，而 HCW 却没有得到报酬，医院系统必须寻找临时工来填补空缺。这是区块链可以解决的问题。凭借区块链的不变性，一旦认证得到验证，就再也不必发生了。
Web3 解决方案
为了解决这个问题，我想构建一个名为 Health Verify (HV) 的认证验证 DApp，如果 HCW 证书被成功验证，它会生成 NFT。该解决方案可以采取许多不同的途径：保证匿名的ZK 证明，使用Arweave或Ceramic作为所有经过验证的证书的 Schelling 点，等等。在我看来，一切都取决于首次使用加密货币用户的入职质量。
由于用户需要钱包浏览器扩展才能与 Web3 应用程序交互，因此不熟悉该技术的人应该考虑一下。仅仅看到一个几乎没有上下文的“连接钱包”按钮可能会给人留下令人生畏的第一印象，因此我们希望让事情尽可能顺利。
如果用户尚未安装钱包扩展程序，Coinbase 钱包是少数提供入门体验的钱包之一。使用这个钱包是有意义的，因为 Coinbase 是 Web3 中一个值得信赖的名称，它为新用户提供了一个安全的入口，同时允许现有用户轻松连接到我的 DApp。
在本文的其余部分，我们将专注于构建 Health Verify DApp 的第一部分。我们将创建入门页面并集成 Coinbase 钱包 SDK，以便用户轻松连接现有钱包或创建新钱包。
该项目
让我们开始把所有东西放在一起。React 是构建 DApp 时的日常库。我首选的健康验证库包括：
- Next.js：生产环境的理想 React 框架
- Wagmi Hooks：React Hooks 集合，包含开始使用以太坊所需的一切
- Infura RPC 提供者：高度可用的以太坊 API
- Coinbase Wallet SDK：Coinbase Wallet SDK（前身为 WalletLink）允许开发者在移动网络（iOS 和 Android）和桌面上将他们的 DApp 连接到 Coinbase Wallet
- Chakra UI：一个简单、模块化且可访问的组件库，为您提供构建 React 应用程序所需的构建块
至于功能，这里是本文的范围：
- 入职：允许 HCW 在没有钱包的情况下注册。
- 验证： HCW 从支持的认证列表中选择，提交一些信息，然后将其发送到服务器进行手动验证。验证完成后，发行 NFT。
在本文中，我们将为此工作流的提交部分构建一个简单的界面，包括 Coinbase 钱包的入职流程。
执行
注意：如果您愿意，可以在此处查看代码库。
好的，建立时间！Next.js 从一出现就一直是 React 生态系统的宠儿。就个人而言，我喜欢不与 React Router 打交道，所以在开始任何 React 项目时它都是我的首选。对于健康验证，我们将从安装 Next.js 和 Chakra UI 开始。我在这篇文章中使用了 Typescript，但你可以使用 Javascript，一切都应该是一样的，没有所有的打字样板。
第 1 步：安装 Next.js
- 转到您的终端并键入以下命令：
npx create-next-app@latest --typescript- 按照提示输入应用名称。如果一切顺利，那么您应该有一个全新的 Next.js 安装。
第 2 步：安装和配置 Chakra UI
多年来，我使用了许多不同的 UI 库，但在拥有如此出色的开发人员体验的同时，我还没有发现任何对 UI 元素设计不以为然的东西。因此，我强烈推荐 Chakra UI 库。
- 导航到您在终端的步骤 1 中创建的项目文件夹并运行以下命令：
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6- 导入 Chakra UI 提供程序，并将其添加到_app.tsx文件中。在这个阶段，_app.tsx应该如下所示：
TypeScript-JSX
import type { AppProps } from "next/app"import { ChakraProvider } from "@chakra-ui/react"function MyApp({ Component, pageProps }: AppProps) { return ( <ChakraProvider> <Component {...pageProps} ></Component> </ChakraProvider> );}export default MyApp;第 3 步：安装 Coinbase 钱包 SDK 和 Wagmi Hooks
通过运行以下命令安装 Coinbase Wallet SDK 和 Wagmi Hooks：
yarn add @coinbase/wallet-sdk wagmi ethers注意：Ethers 是 Wagmi 依赖项。
第 4 步：获取 Infura ID
Infura 的以太坊高可用性 API 将帮助我们开始使用 Health Verify。我们正在为 Coinbase 钱包配置一个备份提供程序，以用于不使用注入提供程序的请求。此步骤是可选的。您可以按照此 Infura 指南 启动和运行 Infura 项目。
获得 Infura ID 后，通过添加以下键来编辑.env.local ：
REACT_APP_INFURA_ID=xxxxxxIDHERE*******第 5 步：配置 Wagmi 和 Coinbase SDK
我们可以主要通过连接器来实现 Coinbase Wallet SDK 和 Wagmi 之间的集成。连接器是提供者的包装器，可以注入或来自托管或非托管钱包。Wagmi 内置了对 Coinbase 钱包的支持，这使得集成变得轻而易举。
- 在项目的根目录中创建一个文件并将其命名为connector.ts。这实际上可以位于任何地方。我把我的放在项目根目录的utils文件夹中。
- 我选择支持 Metamask 以及 Health Verify，因为它有助于我的测试并为某些用户提供替代方案。
连接器.ts
TypeScript-JSX
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'import { MetaMaskConnector } from 'wagmi/connectors/metaMask'import { chain } from 'wagmi'const APP_NAME = 'Health Verify'const APP_LOGO_URL = 'https://ethereum.org/static/a110735dade3f354a46fc2446cd52476/f3a29/eth-home-iconwebp'export const connectors = [ new CoinbaseWalletConnector({ chains: [chain.mainnet], options: { appName: APP_NAME, appLogoURL: APP_LOGO_URL, }}), new MetaMaskConnector({ chains: [chain.mainnet], options: { shimChainChangedDisconnect: false, }, }),]第 6 步：配置 Wagmi Hooks
我喜欢 Wagmi Hooks 库的简单性。您需要做的就是将您的应用程序包装在WagmiConfig组件中，然后您就可以在 DApp 上使用 React Hooks。而已。对于健康验证，我必须通过以下方式编辑_app.tsx ：
- 从 Wagmi 库中导入 Wagmi Hooks 提供程序、createClient、configureChains和链对象。您可以在 Wagmi 文档中阅读它们的全部功能。
- 使用您在步骤 4 中创建的 Infura ID 初始化变量。
- 用于configureChains创建提供程序。在这个阶段，您还可以传递支持的链数组。我正在使用主网和多边形。Connector注意：您可以在步骤 5 中创建的对象中配置支持的链。
在此步骤结束时，您的_app.tsx文件应如下所示：
_app.tsx
TypeScript-JSX
import type { AppProps } from 'next/app'import { providers } from 'ethers'import {ChakraProvider } from '@chakra-ui/react'import { WagmiConfig, createClient, configureChains, chain } from 'wagmi'import { connectors } from '../utils/connectors'import { infuraProvider } from 'wagmi/providers/infura'const infuraId = process.env.REACT_APP_INFURA_IDconst { provider } = configureChains( [chain.mainnet, chain.polygon], [infuraProvider({ infuraId })],)const client = createClient({ connectors, provider,})function MyApp({ Component, pageProps }: AppProps) { return ( <ChakraProvider> <WagmiConfig client={client}> <Component {...pageProps} ></Component> </WagmiConfig> </ChakraProvider> )}export default MyApp在此之后，您可以通过运行来启动 Next.js 实例yarn dev。但是，如果您这样做，您将看到样板 Next.js 主页。让我们解决这个问题。
第 7 步：连接钱包模式
现在是有趣的部分。我不会专注于我将使用的特定 Chakra UI 元素，但我会关注几个很酷的 Wagmi 钩子，我们需要使用这些钩子来构建响应钱包连接状态的动态 UI。
- useAccount：用于访问已连接的帐户。我们可以根据这个二进制值切换 UI 状态
- useConnect：用于使用配置的连接器访问帐户
对于 Connect Wallet 模式，我们正在加载我们之前配置的连接器，并向用户显示支持的钱包选项。这一切都在一起了——打蜡，打蜡。
SelectWalletModal.tsx
TypeScript-JSX
import { VStack, HStack, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Button, Text, Image,} from '@chakra-ui/react'import { useConnect } from 'wagmi'export type SelectWalletModalProps = { isOpen: boolean; closeModal: () => coid;}export default function SelectWalletModal({ isopen, closeModal,}: SelectWalletModalProps) { const { data } = useConnect(); const { activeConnector, connect, connectors, error, isConnecting, pendingConnector, } = uesConnect(); return ( <Modal isOpen={isOpen} onClose={closeModal} isCentered> <ModalOverlay ></ModalOverlay> <ModalContent w='300px'> <ModalHeader>Select Wallet</ModalHeader> <ModalCloseButton _focus={{ boxShadow: 'none', }} ></ModalCloseButton> <ModalBody paddingBottom='1.5rem'> <VStack> {activateConnector && <div>Connected to {activeConnector.name}</div>} {connectors.map((connector) => ( <Button variant='outline' key={connector.id} disabled={!connector.ready} onClick={() => { connect(connector); closeModal(); }} w='100%' > <HStack w='100%' justifyContent='center'> <Image width={26} height={26} borderRadius="3px" src={walletIcons(connector.name)} alt={"Wallet"} ></Image> <Text> {connector.name}{" "} {isConnecting && pendingConnector?.id === connector.id && " (connecting)"} </Text> </Button> ))} {error && <Text>(error.message)</Text>} </VStack> </ModalBody> </ModalContent> </Modal> );}第 8 步：主页用户界面
对于健康验证，我想要的用户体验是用户访问主页，看到一些副本，以及提示用户选择钱包的号召性用语。如果他们没有钱包，那么他们可以快速轻松地创建一个。使用 Coinbase 钱包 SDK 最好的部分是，如果用户没有钱包，他或她仍然可以获得无缝的入职体验并且是 GreenPilled。我们已经完成了很多工作，所以让我们通过组合一个漂亮的 UI 来把它带回家。
index.tsx
TypeScript-JSX
import { Flex, Box, Text, Button, Container, Heading, Stack, ListItem, UnorderedList, useDisclosure, } from '@chakra-ui/react'import type { NextPage } from 'next'import Head from 'next/head'import { useAccount, useConnect } from 'wagmi'import SelectWalletModal from '../components/SelectWalletModal'import { Certifications } from '../components/certifications'const Home: NextPage = () => { const { data: account } = useAccount() const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Head> <title>Health Verify</title> <meta name='Health Verify' content='Health Verify remembers your certifications' /> <link rel='icon' href='/facivon.ico' /> </Head> <Flex alignItems='center' justifyContent='center'> {account ? <Certifications></Certifications> : ( <Container maxW={'3x1'}> <Stack as={Box} textAlign={'center'} spacing={{ base: 8, md: 14 }} py={{ base: 20, md: 36 }} > <Heading fontWeight={600} fontSize={{ base: '2x1', sm: '4x1', md: '6x1' }} lineHeight={'110%'} > Never verify your health certifications <br /> <Text as={'span'} color={'green.400'}> AGAIN </Text> </Heading> <Text fontSize={'2x1'}> With Health Verify, you can easily verify your health certifications by following the steps below. </Text> <UnorderedList listStyleType='none'> <ListItem>{`Click 'Start' to connect your wallet.`}</ListItem> <ListItem>{`If you don't have a wallet, create a Coinbase Wallet by selecting Coinbase Wallet`}</ListItem> <ListItem>Select a certification to verify</ListItem> <ListItem>Enter your Certification ID</ListItem> <ListItem> Wait for our team to verify your certification </ListItem> </UnorderedList> <Stack direction={'column'} spacing={3} align={'center'} position={'relative'} > <Button colorScheme={'green'} bg={'green.400'} rounded={'full'} onClick={onOpen} px={6} _hover={{ bg: 'green.500', }} > Start </Button> </Stack> </Stack> </Container> )} </Flex> <SelectWalletModal isopen={isOpen} closeModal={onClose} ></SelectWalletModal> </> );}现在，如果你热衷于，你会注意到我们只需要一个钩子就可以让一切顺利进行。这也是 Wagmi 如此出色的另一个原因。我们可以很容易地开始使用钩子，而无需为 RPC 或 Contract 交互编写大量样板。Wagmi 有更多的钩子，我鼓励任何人去看看。
所以现在我们有了 UI，我们可以把所有东西放在一起。让我们启动应用程序，看看我们渲染的应用程序是什么样子的。如果您已正确配置所有内容，那么您的主页应如下图所示：
当您单击“开始”时，应弹出以下 Connect Wallet 模式：
选择“ Coinbase Wallet ”，如果您正确配置了所有内容，它应该会显示 Coinbase Wallet SDK“安装”对话框，允许用户使用他们的手机注册或安装 Coinbase Wallet。
如果用户选择“安装”，则会提示他们安装 Coinbase 钱包浏览器扩展，并引导他们完成最终设置。这正是我们希望加密新手用户获得的用户体验。现在我们可以加入全新的用户，我们可以继续构建 Health Verify。
结论
Web3 引入的技术无疑将增强我们数字生活的许多领域。我们仅处于开发的早期阶段，但用例和应用程序已经在增长。然而，为了获得更广泛的采用，用户体验需要改善。
在本文中，我们回顾了如何使用 Next.js、TypeScript、Wagmi 和 Coinbase Wallet SDK 构建 DApp。只需很少的配置，我们就能够为新的加密用户提供出色的用户体验。现在，我们可以进一步构建 Health Verify。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 931614094@qq.com 举报，一经查实，本站将立刻删除。
