使用 Coinbase 钱包-新用户指南

科技 08-05 来源： qaseven

了解如何使用 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 (                                );}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 (                                                            )}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 (                                                Select Wallet                                                                            {activateConnector && Connected to {activeConnector.name}}                        {connectors.map((connector) => (                                                    ))}                        {error && (error.message)}                                                            );}

第 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 (        <>                            Health Verify                                                                        {account ?  : (                                                                                                Never verify your health certifications 
                                                            AGAIN                                                                                                        With Health Verify, you can easily verify your health certifications by following the steps below.                                                                            {`Click 'Start' to connect your wallet.`}                {`If you don't have a wallet, create a Coinbase Wallet by selecting Coinbase Wallet`}                            Select a certification to verify                            Enter your Certification ID                                                            Wait for our team to verify your certification                                                                                                                                                                                            )}                                    );}