了解如何使用 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_ID
const { 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。