GM! Today, I will be guiding you through getting users to connect their wallets to your dapp!
GM! Today, I will be guiding you through getting users to connect their wallets to your Dapp!
In your index.tsx file we will import the useEthereum hook to help us with all things related to the wallet connection. (You can also import from other chains we support using useMetis or useFlow.)
Add this line of code to the top of the file
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
import { useEthereum } from '@decentology/hyperverse-ethereum'
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
Add this line of code right before the return
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
const { address, disconnect, connect, error } = useEthereum();
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
All we are doing is simply destructuring (syntax for fewer lines of code) these properties from the useEthereum hook to give us access to use them where we like.
address - gives us access to the user’s wallet address if they are connected
disconnect - function that is called to disconnect the user from the Dapp
connect - function that is called to pop up the wallet choices and then ask the user to connect to the Dapp
error - returns an error if there ever is one
Add these lines of code after the h1 tag
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
{!address ? (
<button onClick={connect}>
Connect Wallet
</button>
) : (
<button onClick={disconnect}>
<span>{address}</span>
</button>
)}
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
Here we are using HTML to build a button that says “Connect Wallet” when we do not have a wallet address and otherwise shows the wallet address if it does exist.
When the user clicks on the “Connect Wallet” button, we simply call the connect function which automatically leads to a pop up for the user to choose which Wallet Provider they are using and proceeds to ask the user to connect to the Dapp from their wallet.
When the user is connected and clicks on the same button, the disconnect function is called which automatically disconnects the user from the Dapp.
Note: Make sure you are on the Rinkeby Test Network for it to work
The end result code should look something like this:
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
import { useEthereum } from "@decentology/hyperverse-ethereum";
import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
const Home: NextPage = () => {
const { address, disconnect, connect, error } = useEthereum();
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="<https://nextjs.org>">Next.js!</a>
</h1>
{!address ? (
<button onClick={connect}>Connect Wallet</button>
) : (
<button onClick={disconnect}>
<span>{address}</span>
</button>
)}
</main>
<footer className={styles.footer}>
<a
href="<https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app>"
target="_blank"
rel="noopener noreferrer"
>
Powered by{" "}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
);
};
export default Home;
`````````````````````````````````````````````````````````````````````````````````````````````````````````````
Congratulations! You have officially made your first step in creating a Dapp!
Next steps: Here is a GitHub repo that follows these steps and is already hooked up to the Hyperverse with a beautiful UI for you to fork and start building right away!
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
![[Klaytn Hackathon Winners] Interview #2](https://uploads-ssl.webflow.com/62bf4bbd0888399347c42e48/62cdc6a628e84d393dfcedec_5fd79d39817946ea811db4d4_5ea0ac693db0d20890793796_3.png)
