Tutorial
Prepare to Connect User Wallets

Prepare to Connect User Wallets

Install useDApp

In the world of blockchain users rely on Web3 wallets to login to applications and interact with the blockchain, sign and execute transactions securely.

To streamline the development process, we will be using a powerful tool called useDApp (opens in a new tab) - Framework for Rapid Dapp Development.

To get started, add the following npm package @usedapp/core and its peer dependency in your project:

npm install @usedapp/core ethers

Setup

The first thing you need to do is set up DAppProvider with a config and wrap your whole App in it.

pages/_app.js
import '@/styles/globals.css'
import * as ethers from 'ethers'
import { DAppProvider, Polygon } from '@usedapp/core'
 
const config = {
  readOnlyChainId: Polygon.chainId,
  readOnlyUrls: {
    // in this tutorial we use Ankr public RPC. It's free and has its own limits
    // in the production version with a large number of users, we do not recommend using it
    [Polygon.chainId]: new ethers.providers.StaticJsonRpcProvider('https://rpc.ankr.com/polygon'),
  },
}
 
export default function App({ Component, pageProps }) {
  return (
    <DAppProvider config={config}>
      <Component {...pageProps} /> {/* Wrap your app with the Provider */}
    </DAppProvider>
  )
}

Page Layout

Let's add a header with navigation, and then we'll add a connection button to this header

pages/_app.js
...
import Link from 'next/link'
 
...
 
const PageLayout = ({ children }) => (
  <div className="container pb-12">
    <div className="flex items-center justify-between pt-3 pb-16">
      <div className="text-lg font-semibold">Azuro Betting Website</div>
      <div className="flex space-x-8">
        <Link className="text-md" href="/">Events</Link>
        <Link className="text-md" href="/bets-history">Bets History</Link>
      </div>
    </div>
    {children}
  </div>
)
 
export default function App({ Component, pageProps }) {
  return (
    <DAppProvider config={config}>
      <PageLayout>
        <Component {...pageProps} />
      </PageLayout>
    </DAppProvider>
  )
}

Connect Button

pages/_app.js
...
import { DAppProvider, Polygon, useEthers } from '@usedapp/core'
 
...
 
const ConnectButton = () => {
  const { account, deactivate, activateBrowserWallet } = useEthers()
 
  // 'account' being undefined means that user is not connected
  const title = account ? 'Disconnect' : 'Connect'
  const action = account ? deactivate : activateBrowserWallet
 
  return (
    <button className="button" onClick={() => action()}>{title}</button>
  )
}
 
const PageLayout = ({ children }) => (
  <div className="container pb-12">
    <div className="flex items-center justify-between pt-3 pb-16">
      <div className="text-lg font-semibold">Azuro Betting Website</div>
      <div className="flex space-x-8">
        <Link className="text-md" href="/">Events</Link>
        <Link className="text-md" href="/bets-history">Bets History</Link>
      </div>
      <ConnectButton />
    </div>
    {children}
  </div>
)
 
...

Visit localhost:3000 (opens in a new tab) and ensure that the Connect Button is present and functioning properly.

Setup a ProjectGet Games