How to Get Hooked Up to the Hyperverse From Scratch

What is the Hyperverse?

GM! Today, I will be guiding you through everything you need to do to get your app hooked up to the Hyperverse so you can start building killer web3 apps.

Step 1: Install Node to be able to import and use the NPM

Step 2: Install create-next-app and run npx create-next-app example-dapp --ts

• This will automatically build a folder named example-dapp which is a Next.js application that uses Typescript

• --ts is to create the build using Typescript which is not required, but highly encouraged

Step 3: Install packages

• cd example-dapp: This simply allows us to change the directly since we are now working inside the example project’s folder
• yarn - npm i -g yarn
• -g is not required as all it does is give your entire machine access to using yarn instead of just this project
• yarn add @decentology/hyperverse
• yarn add @decentology/hyperverse-ethereum
• Installing these packages simply gives the project the ability to now import and actually use these packages

You can also choose to build on other chains that we currently support by doing:

• yarn add @decentology/hyperverse-flow
• yarn add @decentology/hyperverse-metis

Step 4: Import packages

You should see something like this in your _app.tsx file:

import "../styles/globals.css";

import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {

   return <Component {...pageProps} />

}

export default MyApp;

Now, add these two lines of code above the function:

import { initialize, Provider, Network } from '@decentology/hyperverse';

import { Ethereum } from '@decentology/hyperverse-ethereum';

We are now importing these packages which gives our code access to the functionality that they provide. This will help us with wallet connection, access to view the user’s address, access to read and let users know when they need to switch networks, and access to blockchain-specific SDK features.

Step 5: Initialize the Hyperverse

Add this code inside the function before the return statement:

const hyperverse = initialize({

   blockchain: Ethereum,

  network: Network.Testnet,

   modules: [],

});

This allows us to actually initialize the Hyperverse with the given parameters. In this case, we are initializing it using the Ethereum blockchain and Rinkeby Test Network.

• You can find all the available blockchains at this path

Step 6: Wrap the app in the Hyperverse Provider:

return (

 <Provider initialState={hyperverse}>

     <Component {...pageProps} />

  </Provider>

)

The Provider makes hyperverse available to any nested components that need access to it. In this case we want the entire app to have access to it which is why we do it here!

Step 7: Your app is officially hooked up to the Hyperverse and ready to buidl!

The end result should look something like this:

import '../styles/globals.css'

import type { AppProps } from 'next/app'

import { initialize, Provider, Network } from '@decentology/hyperverse';

import { Ethereum } from '@decentology/hyperverse-ethereum';

function MyApp({ Component, pageProps }: AppProps) {

   const hyperverse = initialize({

       blockchain: Ethereum,

      network: Network.Testnet,

      modules: [],

   });

   return (

     <Provider initialState={hyperverse}>

        <Component {...pageProps} />

     </Provider>

   )

}

export default MyApp

Run yarn dev to see your app running on localhost:3000!

Here is the GitHub repo that follows these steps and you can fork it if you wish!

Next steps: Join our discord to connect with the Hyperverse team and other builders building on the Hyperverse!