How to Onboard New Users With Coinbase Wallet

Web3 represents an exciting chapter in the development of the internet. The primitives that the blockchain provides will lead to an infinite number of applications and use cases. We’ve seen the explosion of ICOs, DeFi, NFTs, and peer-to-peer payment systems. However, we still have a long way to go before reaching the mass adoption of this new technology. User experience is one area where things still lack. \ As web3 developers, how are we supposed to onboard the next wave of users when the average person doesn’t understand concepts such as non-custodial crypto wallets or signed transactions? This article will explore the issue and offer a solution to help create a better user experience. We’ll look at a real-world example of how we can use the [Coinbase Wallet SDK](https://docs.cloud.coinbase.com/wallet-sdk/docs/welcome) to create a seamless onboarding experience for new users. ### Real-World Problems One of the concepts that is most intriguing in web3 is the intersection of healthcare and blockchain technology. HIPAA compliance means that patient records probably shouldn’t be put on a public blockchain. However, there are hundreds of other ways we can use the blockchain to revolutionize the healthcare sector. \ Healthcare Workers (HCW) have to spend in excess of six weeks being vetted and verified before working at any healthcare institution. The loss of time and income by hospital systems is huge. A trusted third party conducts certification verifications, background checks, et al. for weeks on end while an HCW isn’t paid, and the hospital system has to find a temporary worker to fill the gap. \ This is a problem that the blockchain can solve. With blockchain immutability, once a certification is verified, it never has to happen again. ### Web3 Solutions To solve this problem, I want to build a Certification Verification dapp called Health Verify (HV) that mints an NFT if a HCW certificate is successfully verified. There are many different paths this solution can take: [ZK proofs](https://en.wikipedia.org/wiki/Zero-knowledge_proof) to guarantee anonymity, using [Arweave](https://www.arweave.org/) or [Ceramic](https://ceramic.network/) as a schelling point for all verified certificates, and so on. \ In my view, everything rises and falls on the quality of the onboarding for first-time crypto users. \ Since a user requires a wallet browser extension in order to interact with web3 applications, there should be considerations for someone unfamiliar with the technology. Just seeing a “Connect Wallet” button with little context can be an intimidating first impression, so we want to make things as smooth as possible. \ [Coinbase wallet](https://docs.cloud.coinbase.com/wallet-sdk/docs/welcome) is one of the few wallets that offers an onboarding experience if the user doesn't already have a wallet extension installed. It makes sense to use this wallet because Coinbase is a trusted name in web3 and provides a secure on-ramp for new users while allowing existing users to easily connect to my dapp. \ For the rest of this article, we’ll focus on building the first part of the Health Verify dapp. We’ll create the onboarding page and integrate the Coinbase Wallet SDK to make it easy for users to either connect an existing wallet or create a new one. ### The Project So, let’s start pulling everything together. React is the library de jour when building dapps, my preferred libraries for Health Verify include: \ * [Next.js](https://nextjs.org/) - ideal React framework for production * [Wagmi Hooks](https://wagmi.sh/) - a collection of React Hooks containing everything you need to start working with Ethereum * [Infura RPC provider](https://infura.io/) - highly available Ethereum API * [Coinbase Wallet SDK](https://docs.cloud.coinbase.com/wallet-sdk/docs/welcome) - Coinbase Wallet SDK (formerly WalletLink) allows developers to connect their dapps to Coinbase Wallet on both mobile web (for iOS and Android) and desktop * [Chakra UI](https://chakra-ui.com/) - a simple, modular, and accessible component library that gives you the building blocks you need to build your React application \ As for features, here is the scope of this article: * Onboarding: Allows HCW to sign up if they don’t have a wallet. * Verification: HCW selects from a list of supported certifications, submits some information, and then sends it to a server for manual verification. After verification is complete, an NFT is issued. \ For this article, we’ll just build a simple interface for the submission portion of this workflow, including the Coinbase Wallet onboarding flow. ### Implementation **Note:** If you want to, you can view the codebase [here](https://github.com/teeolendo/health-verify). \ Okay, BUIDL time! Next.js has been a darling of the React ecosystem since it came out. Personally, I enjoy not dealing with React Router, so it’s a go-to of mine when starting any React project. For Health Verify, we’ll start by installing Next.js and Chakra UI. I use Typescript in this article, but you can use Javascript and everything should be the same, sans all the typing boilerplate. #### Step 1: Install Next.js * Go to your terminal and type the following command: \ ``` npx create-next-app@latest --typescript ``` \ * Follow the prompts and enter an app name. If all goes well, then you should have a fresh Next.js install. #### Step 2: Install and Configure Chakra UI I’ve used a number of different UI libraries over the years, but I haven’t found anything that is as un-opinionated about UI element design while having such an amazing developer experience. Therefore, I highly recommend the Chakra UI library. \ * Navigate to the project folder that you created in Step 1 in your terminal and run the following: ``` yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 ``` \ * Import the Chakra UI provider, and add it to the **_app.tsx** file. At this stage, the **_app.tsx** should look as below: ```typescript import type { AppProps } from "next/app" import { ChakraProvider } from "@chakra-ui/react" function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; ``` #### Step 3: Install Coinbase Wallet SDK and Wagmi Hooks Install the Coinbase Wallet SDK and Wagmi Hooks by running the following command: ``` yarn add @coinbase/wallet-sdk wagmi ethers ``` \ **Note**: Ethers is a Wagmi dependency. #### Step 4: Get an Infura ID Infura’s high availability API for Ethereum will help us get started with Health Verify. We are configuring a backup provider for the Coinbase Wallet to use for requests that won’t use the Injected Provider. This step is optional. You can follow [this](https://blog.infura.io/post/getting-started-with-infura-28e41844cc89) guide to get up and running with an Infura project. \ Once you have your Infura ID, edit the **.env.local** by adding the following key: ``` REACT_APP_INFURA_ID=xxxxxxIDHERE******* ``` #### Step 5: Configure Wagmi and Coinbase SDK We can achieve the integration between Coinbase Wallet SDK and Wagmi primarily via connectors. Connectors are wrappers for providers that can either be injected from custodial or non-custodial wallets. Wagmi has built-in support for Coinbase Wallet and that makes integration a piece of cake. \ * Create a file in the root of the project and call it **connectors.ts**. This can be located anywhere really. I put mine in a **utils** folder at the root of the project. * I choose to support Metamask as well for Health Verify as it helps with my testing and also provides an alternative for some users. \ [Connectors.ts](https://github.com/teeolendo/health-verify/blob/main/utils/connectors.ts) ```typescript 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, }, }), ] ``` #### Step 6: Configure Wagmi Hooks I love the Wagmi Hooks library for its simplicity. All you need to do is wrap your app in the [WagmiConfig](https://wagmi.sh/docs/WagmiConfig) component and you can use React Hooks on your dapp. That’s it. For Health Verify, I have to edit **_app.tsx** in the following ways: \ * Import the Wagmi Hooks provider, [createClient](https://wagmi.sh/docs/client), [configureChains](https://wagmi.sh/docs/providers/configuring-chains), and chain objects from the Wagmi library. You can read up on what they all do in the Wagmi documentation [here](https://wagmi.sh/docs/). \ * Initialize a variable with your Infura ID that you created in Step 4. \ * Use `configureChains` to create a provider. At this stage, you can also pass an array of supported chains. I’m using mainnet and polygon. Note: You can configure supported chains in the `Connector` object you created in Step 5. \ At the end of this step, your **_app.tsx** file should look like this: \ [_app.tsx](https://github.com/teeolendo/health-verify/blob/main/pages/_app.tsx) ```typescript 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 ( ) } export default MyApp ``` \ After this, you could fire up your Next.js instance by running `yarn dev`. However, if you do, you’ll see the boilerplate Next.js home page. Let’s fix that. #### Step 7: Connect Wallet Modal And now for the fun part. I won’t focus on the specific Chakra UI elements that I will use, but I will bring attention to several cool Wagmi hooks that we need to use in order to build a dynamic UI that responds to the wallet connection status. \ * `useAccount` - used to access the connected account. We can toggle UI states based on this binary value. \ * `useConnect` - used to access the account using the configured connectors. \ For the Connect Wallet Modal, we are loading the connectors that we configured earlier and are showing the user the supported wallet options. It’s all coming together—wax on, wax off. \ [SelectWalletModal.tsx](https://github.com/teeolendo/health-verify/blob/main/components/SelectWalletModal.tsx) ```typescript 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) => ( { connect(connector); closeModal(); }} w='100%' > {connector.name}{" "} {isConnecting && pendingConnector?.id === connector.id && " (connecting)"} ))} {error && (error.message) } ); } ``` #### Step 8: Home Page UI For Health Verify, my desired UX is that the user visits the home page, sees some copy, and a call-to-action that prompts the user to select a wallet. If they don’t have a wallet, then they can quickly and easily create one. The best part about using the Coinbase Wallet SDK is that if the user doesn’t have a wallet, he or she still gets a seamless onboarding experience and is green pilled. We have done a lot of the work already. so let’s bring it home by putting together a nice UI. \ [index.tsx](https://github.com/teeolendo/health-verify/blob/main/pages/index.tsx) ```typescript 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 <Button colorScheme={'green'} bg={'green.400'} rounded={'full'} onClick={onOpen} px={6} _hover={{ bg: 'green.500', }} > Start )} ); } ``` Now, if you’re keen, you’ll notice that we only need one hook to make everything work smoothly. This is another reason why Wagmi is so awesome. We can get started with hooks really easily without writing tons of boilerplate for RPC or Contract interactions. Wagmi has many more hooks that I’d encourage anyone to check out. \ So, now that we have our UI, we can bring everything together. Let’s start the app and see what our rendered app looks like. If you have everything configured correctly, then your home page should look like the image below: ![](https://cdn.hackernoon.com/images/nTMgodFHH4evRjSdNFNz3dacaM23-2022-08-01T22:18:44.516Z-cl6bbcg4l00060bs677rba2uc) When you click on “**Start**”, the following Connect Wallet modal should pop up: \ ![](https://cdn.hackernoon.com/images/nTMgodFHH4evRjSdNFNz3dacaM23-2022-08-01T22:18:44.518Z-cl6bbcg4m00070bs6ehye70nf) Select “**Coinbase Wallet**” and if you configured everything correctly, it should show the Coinbase Wallet SDK “**Install**” dialog that allows a user to either sign up with their mobile phone or install Coinbase Wallet. \ ![](https://cdn.hackernoon.com/images/nTMgodFHH4evRjSdNFNz3dacaM23-2022-08-01T22:18:44.520Z-cl6bbcg4o00080bs6gtyf0mlk)If the user selects "**Install**", then they will be prompted to install the Coinbase Wallet browser extension and be guided through the final setup. This is exactly the user experience we want for users new to crypto. Now that we can onboard brand new users, we can continue to build out Health Verify. ### Conclusion Web3 introduces technology that will undoubtedly enhance many areas of our digital lives. We are only at the early stages of development, but already the use cases and applications are growing. However, in order to reach wider adoption, the user experience needs to improve. \ In this article, we reviewed how to build a dapp using Next.js, Typescript, Wagmi, and the Coinbase Wallet SDK. With a little configuration, we were able to deliver a great user experience to new crypto users. Now, we can build out Health Verify even further.

How to Onboard New Users With Coinbase Wallet

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

@MichaelB

RELATED STORIES