Eth Metaverse Template

This template allows you to create your own multiplayer Metaverse DApp, that lets users interact with smart contracts through the use of solidity, and engage with other users inside a 3D environment in real-time via the use of Websockets.

Summary:

Building on that last point..

PLEASE READ: Using this template involves you using your own AWS account to create cloud resources.

This means that you will be billed by Amazon for usage of those resources.

You are responsible for what you create using this library, it is VERY important that you fully understand what it does before you use it.

If you are uncomfortable with your understanding of what this library does, or you are not familiar with AWS/Terraform/Serverless Framework - then it is my recommendation that you DO NOT use this library.

This template is not related in anyway to where I am employed and is not endorsing this technical approach for web3 authentication or metaverse implementation, this is to be used for experimentation and inspiration.

Lastly, deploying smart contracts can result in users data / funds being compromised and stolen. If you decide to use this template be sure to thoroughly test and audit your code base to help increase security and reduce risk of hacks and exploits.

What does this template do?

This template helps you create all cloud resources and setup a local host development environment for your own custom multiplayer Metaverse Decentralised App (DApp).

Toggle the below tabs to understand how this works:

Summary

This template allows you to create a multiplayer Metaverse DApp that can render on different devices by

using the users account address from the Metamask Wallet as part of the Web3 login process
once logged in, they gain access to the web 3d environment created with React Three Fiber (three.js and react.js)
then their positional data in the 3d environment is sent in real time to a database and stored against the account address that they used to sign in with
as that data is sent in real time to the database, the websockets also then update the DApp front ends of all other users with your position, so all users can see each other moving and interacting with the DApp in real-time

The below image over simplifies how this concept works across multiple users signed in on Metamask using their laptops.

Tech Stack

This template is powered by Terraform, Serverless Framework and Next.js, the breakdown of what they each do is as follows.

Terraform is responsible for creating all cloud resources, excluding lambda functions.

Serverless Framework creates the lambda functions that run the Back End business logic (e.g retrieving/saving DynamoDB data, Auth with Web3.js and STS tokens etc) and deploys them to the API Gateway created by Terraform.

Next.js is the Front End that, once statically served from the S3 bucket – renders the 3D environment, communicates with the Back End via HTTP requests / Web Sockets and authenticates/interacts with the Ethereum Blockchain via Metamask and Web3.js.

App Flow

The way a user would then interact with the app is as follows:

A user visits the url for your web app using their devices web browser, the Next.js pages and content is served to them from the S3 bucket.
Once the page loads, the user signs in using their Metamask wallet (see here how this works for further explanation on the details)
Once they have successfully logged in:
- their positional data is sent in real time to the Web Socket API and stored in DynamoDB for other users to render and see
- they can use their metamask wallet to interact with smart contracts in 3d, as they normally would do in a DApp

How to use this template

To use this template follow the below steps.

Step 1: Install

Look at the Installation instructions to install the required libraries.

Step 2: Unwrap

Follow the steps outlined in the Setup instructions until you get to Step 3, at that point please bear the below points in mind:

choose this metaverse template by running the command unwrap Eth-Metaverse.
if you decide that you’d rather create the AWS Secret yourself manually, then the JSON format you want to adapt is below – be sure to replace all values as appropriate to your configuration.

				
					{
  "eth_tf_sls_service_name": "eth-metaverse",
  "tf_sls_next_stage": "dev",
  "tf_sls_next_region": "eu-west-2",
  "tf_sls_next_root_domain_name": "jamesmiller.blog",
  "tf_sls_next_domain_name": "dev.jamesmiller.blog",
  "tf_state_s3_bucket": "my-wrapperjs-config.jamesmiller.blog",
  "tf_state_s3_key": "terraform.tfstate",
  "eth_network": "goerli",
  "eth_network_api_url": "https://eth-goerli.g.alchemy.com/v2/abcdefghijklmnopqrstuvwxyz",
  "eth_account_address": "678910",
  "next_greeter": "abcdefg", // address of deployed greeter contract, add manually after deploying contract
  "next_jmbToken": "hijklmnop", // address of deployed erc20 token contract, add manually after deploying contract
  "next_greeterArtifact": {...}, // ABI for the deployed greeter contract, add manually after deploying contract
  "next_jmbTokenArtifact": {...}, // ABI for the deployed ERC20 token contract, add manually after deploying contract
}

Step 3: Gobble

Continue on from Step 3 until you’ve completed Step 6 of the Setup instructions, you can now run gobble dev to run the application and access the webpage on https://localhost:3000.

Please note WebXR API requires https and Wrapperjs uses an autogenerated SSL certificate – if an error message like the below appears, this is expected and you can click to proceed onto next step.

And there you go – you’re in!!

To move, use your ‘W’ / ‘A’ / ‘S’ / ‘D’ and ‘↑’ / ‘↓‘ / ‘←’ / ‘→’ keys!

GO MAKE SOME COOL STUFF 😀

OPTIONAL

You will notice if you check the logs, that there are some error messages.

This is because the WebSocket and HTTP APIs haven’t had lambda functions deployed to them yet.

If you want to get rid of these error logs and enable the real-time multiplayer functionality, then you must run gobble serverless deploy to deploy the appropriate Back End web socket resources

Table of Contents