How to Get Hooked Up to the Hyperverse From Scratch

March 15, 2022

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

Step 3: Install packages

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

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.

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: Import one of our smart modules to start interacting with the blockchain!