Blockchain Dev

Blockchain Dev

1655187522

What is Web5? Web5... The Web3 Killer?

Web5... The Web3 Killer?

Web5 is a new decentralized web framework based on the Bitcoin Lightning Network designed to replace Web3.


Web5 announced by Jack Dorsey’s Block to replace web3 as future of internet

Block, formerly Square, has announced it is working on web5 to replace web3 to focus on decentralized applications and allowing users to own their own data

Jack Dorsey announced at Consensus 2022 that TBD, the Bitcoin arm of Block, is working on a new vision for the internet – something it is calling web5. The potentially revolutionary technology will be designed to allow users to take control of their own data rather than giving it away to third parties. The mission statement for TBD reads,

“We believe in a decentralized future that returns ownership and control over your finances, data, and identity. Guided by this vision, TBD is building infrastructure that enables everyone to access and participate in the global economy.”

The evolution of the web

TBD believes that the evolution of the internet puts “individuals at the center.” In the first web version, most of the content was static HTML except for forums and chat protocols such as IRC. The social media evolution led to what is known as web2 and allowed users to interact with centralized applications such as Facebook.

Twitter and MySpace to create their own content and share information in real-time. With the invention of Bitcoin and blockchain, the world is now moving towards web3, which centers around decentralized applications using zero-knowledge proofs to secure data, tokenized content, and protect users’ identities.

While web3 has yet to establish itself as the dominant technology of the internet, Jack Dorsey believes it is already time for a change. This change comes from what he calls web5, which will be built on top of Bitcoin, where data is stored with the user, not the application. The amalgamation of web2 and web3 creates web5 for those confused about where web4 went. The slide below illustrates the difference between the current internet and web5.

tbd deck

Source: Web5 Deck

No tokens in web5

Web5 will be built on top of Bitcoin and will not require any other tokens to function. The idea of web5 is a Bitcoin maximalist approach to innovation that, if successful, could eliminate the need for any cryptocurrency other than Bitcoin. Mike Brock, Head of TBD, confirmed, “No. There are no tokens to invest in with web5. Kthx.” He also took a shot at web3, saying,

“Some people seem to think we are joking about web5 and we are not for real working on it. I promise you, that we are for real working on it. It will actually exist, unlike web3.”

Dorsey backed up this sentiment declaring, “this will likely be our most important contribution to the internet. proud of the team. #web5 (RIP web3 VCs 🤫).” Dorsey has been vocal about his views on web3, suggesting that web3 is owned by venture capitalist firms regardless of the technology’s decentralized nature.

Reaction to web5 announcement

The crypto community has taken great joy in discussing what happened to web4, with many entertaining tweets found on Crypto Twitter. Snoop Dog even announced he is now working on web6, to which TBD joined in the fun, replying, “cool, we got five on it.” However, not all crypto community views the announcement as fun and games. Unsurprisingly, many proponents of a decentralized internet built solely around Bitcoin exist. TokenScript creator and founder of SmartToken Labs, Victor Zhang, exclusively told CryptoSlate,

“The “web5” Jack wants to make is nothing new… It is still an application centric framework. Can be considered as web2.5 😂”

Meltem Demirors of CoinShares pointed out that the deck for TBD’s web5 was shared via a Google Doc, “super decentralized web5 on Google docs is the best troll I’ve seen in a while.” Co-founder of DeFiPulse declared,

“web4 is jack dorsey’s imaginary implementation of lightning network in twitter and other web 2.0 apps.

web5 is jack dorsey’s imaginary impmentation of ethereum in bitcoin.”

However, some community members appear to believe that the technology behind web3 and web5 can work in tandem; perhaps the future is web8 with both running simultaneously? Matt Huang, Co-founder of Paradigm, appealed for a move away from such debates stating,

“The web2 v web3 v web5 skirmishes are a distraction. Build from first principles and not through analogy… crypto unlocks possibilities that our 2022 minds cannot fully fathom. Embrace that uncertainty and potential toward a better future!”

Web5 breakdown

The concept of web5 is built upon the thesis that web3 is not enough to make a decentralized web. TBD explains the problem as follows,

“The web democratized the exchange of information, but it’s missing a key layer: identity. We struggle to secure personal data with hundreds of accounts and passwords we can’t remember. On the web today, identity and personal data have become the property of third parties.”

Web5 is to be made up of four key components, all based around decentralization and Bitcoin, Decentralized identifiers, Self-sovereign identity service, Decentralized Web Nodes, and Self-sovereign identity SDK. Ultimately, TBD defines web5 as,

“Web5 is a Decentralized Web Platform that enables developers to leverage Decentralized Identifiers, Verifiable Credentials, and Decentralized Web Nodes to write Decentralized Web Apps, returning ownership and control over identity and data to individuals.”

The difference between traditional web2 applications and the new web5 ecosystem is explained in the slide below. In web2, progressive web apps relay information directly to centralized servers within minimal cached details stored with the users. Web5 works through decentralized web nodes owned by users instead of a centralized server.

pwa dwa

#webdevelopment #crypto #web5 #web3 #bitcoin #blockchain 

 

What is GEEK

Buddha Community

What is Web5? Web5... The Web3 Killer?
Blockchain Dev

Blockchain Dev

1655187522

What is Web5? Web5... The Web3 Killer?

Web5... The Web3 Killer?

Web5 is a new decentralized web framework based on the Bitcoin Lightning Network designed to replace Web3.


Web5 announced by Jack Dorsey’s Block to replace web3 as future of internet

Block, formerly Square, has announced it is working on web5 to replace web3 to focus on decentralized applications and allowing users to own their own data

Jack Dorsey announced at Consensus 2022 that TBD, the Bitcoin arm of Block, is working on a new vision for the internet – something it is calling web5. The potentially revolutionary technology will be designed to allow users to take control of their own data rather than giving it away to third parties. The mission statement for TBD reads,

“We believe in a decentralized future that returns ownership and control over your finances, data, and identity. Guided by this vision, TBD is building infrastructure that enables everyone to access and participate in the global economy.”

The evolution of the web

TBD believes that the evolution of the internet puts “individuals at the center.” In the first web version, most of the content was static HTML except for forums and chat protocols such as IRC. The social media evolution led to what is known as web2 and allowed users to interact with centralized applications such as Facebook.

Twitter and MySpace to create their own content and share information in real-time. With the invention of Bitcoin and blockchain, the world is now moving towards web3, which centers around decentralized applications using zero-knowledge proofs to secure data, tokenized content, and protect users’ identities.

While web3 has yet to establish itself as the dominant technology of the internet, Jack Dorsey believes it is already time for a change. This change comes from what he calls web5, which will be built on top of Bitcoin, where data is stored with the user, not the application. The amalgamation of web2 and web3 creates web5 for those confused about where web4 went. The slide below illustrates the difference between the current internet and web5.

tbd deck

Source: Web5 Deck

No tokens in web5

Web5 will be built on top of Bitcoin and will not require any other tokens to function. The idea of web5 is a Bitcoin maximalist approach to innovation that, if successful, could eliminate the need for any cryptocurrency other than Bitcoin. Mike Brock, Head of TBD, confirmed, “No. There are no tokens to invest in with web5. Kthx.” He also took a shot at web3, saying,

“Some people seem to think we are joking about web5 and we are not for real working on it. I promise you, that we are for real working on it. It will actually exist, unlike web3.”

Dorsey backed up this sentiment declaring, “this will likely be our most important contribution to the internet. proud of the team. #web5 (RIP web3 VCs 🤫).” Dorsey has been vocal about his views on web3, suggesting that web3 is owned by venture capitalist firms regardless of the technology’s decentralized nature.

Reaction to web5 announcement

The crypto community has taken great joy in discussing what happened to web4, with many entertaining tweets found on Crypto Twitter. Snoop Dog even announced he is now working on web6, to which TBD joined in the fun, replying, “cool, we got five on it.” However, not all crypto community views the announcement as fun and games. Unsurprisingly, many proponents of a decentralized internet built solely around Bitcoin exist. TokenScript creator and founder of SmartToken Labs, Victor Zhang, exclusively told CryptoSlate,

“The “web5” Jack wants to make is nothing new… It is still an application centric framework. Can be considered as web2.5 😂”

Meltem Demirors of CoinShares pointed out that the deck for TBD’s web5 was shared via a Google Doc, “super decentralized web5 on Google docs is the best troll I’ve seen in a while.” Co-founder of DeFiPulse declared,

“web4 is jack dorsey’s imaginary implementation of lightning network in twitter and other web 2.0 apps.

web5 is jack dorsey’s imaginary impmentation of ethereum in bitcoin.”

However, some community members appear to believe that the technology behind web3 and web5 can work in tandem; perhaps the future is web8 with both running simultaneously? Matt Huang, Co-founder of Paradigm, appealed for a move away from such debates stating,

“The web2 v web3 v web5 skirmishes are a distraction. Build from first principles and not through analogy… crypto unlocks possibilities that our 2022 minds cannot fully fathom. Embrace that uncertainty and potential toward a better future!”

Web5 breakdown

The concept of web5 is built upon the thesis that web3 is not enough to make a decentralized web. TBD explains the problem as follows,

“The web democratized the exchange of information, but it’s missing a key layer: identity. We struggle to secure personal data with hundreds of accounts and passwords we can’t remember. On the web today, identity and personal data have become the property of third parties.”

Web5 is to be made up of four key components, all based around decentralization and Bitcoin, Decentralized identifiers, Self-sovereign identity service, Decentralized Web Nodes, and Self-sovereign identity SDK. Ultimately, TBD defines web5 as,

“Web5 is a Decentralized Web Platform that enables developers to leverage Decentralized Identifiers, Verifiable Credentials, and Decentralized Web Nodes to write Decentralized Web Apps, returning ownership and control over identity and data to individuals.”

The difference between traditional web2 applications and the new web5 ecosystem is explained in the slide below. In web2, progressive web apps relay information directly to centralized servers within minimal cached details stored with the users. Web5 works through decentralized web nodes owned by users instead of a centralized server.

pwa dwa

#webdevelopment #crypto #web5 #web3 #bitcoin #blockchain 

 

Castore  DeRose

Castore DeRose

1654928579

What is Web5 - What's New?

Web 5 brings decentralized identity and data storage to individual’s applications. In this post, you'll learn What is Web 5? 

Jack Dorsey’s Bitcoin-focused TBD business unit, a subsidiary of Block Inc., announced Friday that it is building a new decentralized web: Web5: “Identity and personal data have become the property of third parties. Web 5 brings decentralized identity and data storage to individual’s applications. It lets devs focus on creating delightful user experiences, while returning ownership of data and identity to individuals.”

Web 5’s monetary layer will be built on the foundation of Bitcoin. This is unsurprising, given Dorsey’s outspoken Bitcoin “maximalism.” The other technologies underpinning Web 5 are borrowed from myriad areas of cryptography and computer science.

Web 5, like Web 3, will enable users to interact with one another without intermediaries. This, in theory, means no threat from government censors or centralized service outages, among other supposed advantages.

Similar to other attempts to create a decentralized layer on top of the web, Web 5 will also aim to provide users with a “decentralized identity” allowing them to seamlessly move from application to application without needing to explicitly log in. User data, rather than getting stored with third party products and services, will be controlled by users and only be exposed with their permission.

TBD's definition of WEB5

At CoinDesk’s Consensus Festival here in Austin, TBD – the bitcoin-focused subsidiary of Dorsey’s Block (SQ) – announced its new vision for a decentralized internet layer on Friday. Its name? Web 5.

Mike Brock explained that Web 5 – in addition to being “two better than Web 3” – would beat out incumbent models by abandoning their blockchain-centric approaches to a censorship free, identity-focused web experience.

WEB5: AN EXTRA DECENTRALIZED WEB PLATFORM

Building an extra decentralized web that puts you in control of your data and identity

The web democratized the exchange of information, but it's missing a key layer: identity. We struggle to secure personal data with hundreds of accounts and passwords we can’t remember. On the web today, identity and personal data have become the property of third parties.

Web5 brings decentralized identity and data storage to your applications. It lets devs focus on creating delightful user experiences, while returning ownership of data and identity to individuals.

1. The Pillars of web5

2. Decentralized Identifier

3. Veritable Credentials

4. Decentralized Web Nodes

Personal datastores that hold public and encrypted data.

5. The Anatomy of an Identity Wallet

Wallets act as agents for individuals or institutions by facilitating identity and data interactions.

6. Web5 Network Topology 

7. Visualizing web5 and the DWP Stack

DECENTRALIZED WEB APPS (DWAs): web apps enhanced with decentralized identity and data storage capabilities.

8. From PWAs to DWAs

9. ACME Bank?

10. tbDEX Message Threads

11. Music to my ears

12. Hotel me your travel plans

Components

TBD’s Web5 is made up of software components and services such as decentralized identifiers (DIDs), decentralized web node (DWNs), self-sovereign identity service (SSIS) and a self-sovereign identity software development kit (ssi-sdk). These components let developers focus on building user experiences while more easily enabling decentralized identity and data storage in applications.

1. DECENTRALIZED IDENTIFIERS

Web5’s DID component leverages ION, an open, public and permissionless second-layer DID network that runs atop the Bitcoin blockchain. It is based on the deterministic Sidetree protocol, which requires no special tokens, trusted validators or additional consensus mechanisms to function.

A DID is essentially a globally unique persistent identifier that doesn’t require a centralized registration authority and is often generated and registered cryptographically. It consists of a unique uniform resource identifier (URI) string that serves as an ID with additional public key infrastructure (PKI) metadata describing the cryptographic keys and other fundamental PKI values linked to a unique, user-controlled, self-sovereign identifier in a target system such as the Bitcoin blockchain.

ION only allows DIDs to be deactivated by their owners, being hence censorship-resistant, and includes registry capabilities to support decentralized package managers and app stores. The decentralized network can in theory process thousands of DID operations per second.

View ComponentsHere

2. DECENTRALIZED WEB NODE

The DWN leveraged by Web5 is a reference implementation of the Decentralized Identity Foundation’s DWN draft specification. Two people from Block have contributed to the specification: Moe Jangda as a contributor and Daniel Bucher as an editor.

According to the specification, a DWN is a mechanism for data storage and message transmission that participants can leverage to locate public or private data linked to a given DID. It enables the interaction between different entities that need to verify the identity of each other in order to transfer information to one another.

“Decentralized Web Nodes are a mesh-like datastore construction that enable an entity to operate multiple nodes that sync to the same state across one another, enabling the owning entity to secure, manage, and transact their data with others without reliance on location or provider-specific infrastructure, interfaces, or routing mechanisms,” per the specification.


Source: DIF.

TBD’s goal is to produce a first version of the current draft specification along with a reference implementation by July 1, 2022.

Contributions from the development community are welcome. Interested developers can submit proposals as pull requests to the GitHub repository. Likewise, issues can also be submitted on the same GitHub repository.

View ComponentsHere

3. SELF-SOVEREIGN IDENTITY SERVICE

Web5’s SSIS is a web service that wraps the ssi-sdk.

The SSIS interacts with the standards around verifiable credentials, credential revocations, requesting credentials, exchanging credentials, data schemas for credentials and other verifiable data, messaging using DWN and usage of DIDs.

“Using these core standards, the SSIS enables robust functionality to facilitate all verifiable interactions such as creating, signing, issuing, curating, requesting, revoking, exchanging, validating, verifying credentials in varying degrees of complexity,” per its webpage.

View ComponentsHere

4. SELF-SOVEREIGN IDENTITY SDK

Standards-based primitives for using Decentralized Identifiers and Verifiable Credentials.

The ssi-sdk encapsulates standards related to self-sovereign identity.

“The ssi-sdk intends to provide flexible functionality based on a set of standards-based primitives for building decentralized identity applications in a modular manner: with limited dependencies between components,” per its webpage.

View ComponentsHere

WEB5: Use Cases

Control Your Identity

Alice holds a digital wallet that securely manages her identity, data, and authorizations for external apps and connections. Alice uses her wallet to sign in to a new decentralized social media app. Because Alice has connected to the app with her decentralized identity, she does not need to create a profile, and all the connections, relationships, and posts she creates through the app are stored with her, in her decentralized web node. Now Alice can switch apps whenever she wants, taking her social persona with her.

Own Your Data

Bob is a music lover and hates having his personal data locked to a single vendor. It forces him to regurgitate his playlists and songs over and over again across different music apps. Thankfully there's a way out of this maze of vendor-locked silos: Bob can keep this data in his decentralized web node. This way Bob is able to grant any music app access to his settings and preferences, enabling him to take his personalized music experience wherever he chooses.

"(Web 2), (Web 3) -> (Web 5)" reads one slide in a Google Doc presentation shared by Dorsey that lays out his vision. "The Decentralized Web Platform (DWP) enables developers to write Decentralized Web Apps (DWAs) using Decentralized Identifiers (DIDs) and Decentralized Web Nodes (DWNs), returning ownership and control over identity and data to individuals <-- We are calling this Web5." 

Block’s Web5 promises to do away with anything that has stopped Web3 from being truly (say it with me) “decentralized.” They promise no utility tokens or consensus models, instead relying on a (sigh) decentralized web-based on blockchain tech.

Visit: TBD website 

What to expect next?

Thank you for reading!

#blockchain #bitcoin #technology #web3 #web5 

How to Build a 2D Web3 Game

Do you recall the early days of the video game industry when classic games in 2D environments had everyone stuck to their screen for hours? Retro games are still quite popular, and even modern game developers still create 2D games today. However, Web3 brings new concepts to the gaming industry, such as the play-to-earn (P2E) model, where players can earn fungible and non-fungible tokens (NFTs). Thus, if we combine popular 2D environments and Web3, offering earning potentials, the ability to use NFTs as in-game assets, etc., our 2D Web3 game would attract numerous users. As such, we decided to illustrate herein how to build a 2D Web3 game using the right Web3 tech stack and accomplish this process in a matter of minutes.

Moving forward, we’ll incorporate a publicly available 2D game into a React application. In addition, to include Web3 functionality, we’ll use the ultimate Web3 development platform, Moralis. This “Firebase for crypto” platform will enable us to easily incorporate Web3 authentication using the most popular Web3 walletMetaMask. Also, with Moralis’ SDK, we will get a chance to add other on-chain features to our 2D Web3 game example. Plus, we’ll rely on some other phenomenal tools to get us to the finish line, such as Phaser and Visual Studio Code (VSC). Nonetheless, we encourage you to follow our lead and join us by tackling this example project. By doing so, you will not only learn to create a 2D Web3 game but also get familiar with the tools mentioned above. So, create your free Moralis account, which you’ll need as we move on.    

Preview of Our 2D Web3 Game Example

Before we start our example project, we want to do a quick demo of our example 2D Web3 game. This will help you determine whether or not you want to roll up your sleeves and follow our tutorial as we move on. 

First, users are greeted by the “Start” button:

Web3 Game Login

By clicking on the above button, users are prompted by their MetaMask extensions to sign the “Log in using Moralis” message. Essentially, this is how to authenticate with MetaMask:  

After receiving the above signature request, users need to click on the “Sign” button. By doing so, they complete their Web3 login for our game. 

Also, keep in mind that there are different ways to implement Web3 authentication. However, when using Moralis, things are made as simple as possible. For web dapps (decentralized applications), MetaMask integration is the go-to tool. On the other hand, WalletConnect is the best solution for mobile dapps. Nonetheless, Moralis also offers Web3 authentication via email and Web3 social login. Both of these options are excellent to boost Web3 user onboarding success rates.

The Aim of Our 2D Web3 Game

Once users confirm the sign-in message, they are presented with the game’s main menu screen: 

Then, users need to click anywhere on the screen to start the game. This loads the game: 

Moreover, the purpose of the game is to click (shoot) the bandits (cowboys with the guns) before they shoot you. As you can see in the screenshot above, there are also characters with money bags. Players are not supposed to shoot them. In addition, the numbers at the top indicate the money bags that players need to collect to complete the level. However, if any of the bandits shoot the player before getting shot, it is game over:

Now you know what we will be creating. Hence, you can decide whether or not you want to follow along with our progress moving on. However, we need to point out that we will not be dealing with the frontend of the above-presented game. By using Phaser, we will use an existing Web2 game as a boilerplate and then just add Web3 backend features.  

Build a 2D Web3 Game with Phaser and Moralis

As mentioned, we will use Phaser, the most popular open-source studio game engine, to find a finished 2D game. Then, we will use the best Web3 backend platform, Moralis, to incorporate the above-presented blockchain functionality. Essentially, we will take a 2D Web2 game and convert it into a 2D Web3 game.

Obtaining an Existing Game from Phaser

So, we start by going to Phaser’s official website. There, we select “Examples” from the top menu. On the next page, we scroll down a bit and click on the “Games” folder. From there, we select the “Bank Panic” game:

Now that we’ve set up our minds on a particular example game, we can use Phaser’s code and assets available on GitHub. Hence, use the “Download” option in the top menu:

On the “Download” page, we get to download Phaser:

Then, click on the “clone” option on the next page to get to Phaser’s GitHub:

There, click on “photonstorm”:

Next, we will select “phaser3-examples” to ensure that the “Bank Panic” game files are included:

Inside “phaser3-examples”, open the “public” folder:

Then, inside the “public” folder, click on the “assets” folder:

Next, open “games” and finally “bank-panic”:

When we look inside the “bank-panic” folder, we see that it contains sounds, images, and other files required for this game to function properly. As such, we have a green light to clone the code. Thus, we go back to the “phaser3-example” page, where we click on “code” and then ”Download ZIP”:

Using VSC to Set Things Up Properly

Note: We use VSC in this example; however, feel free to use your preferred code editor.

We start by creating a React app template. We do this by entering the “npx create-react-app phaser-moralis” command into VSC’s terminal:

Also, keep in mind that “phaser-moralis” is the name we decided to use for our dapp. You can follow our lead or use any name you want. To finally create our React app, enter “yes” next to “Ok to proceed? (y)”. Once that folder is created, we add it to our IDE workspace:

Then, select the “phaser-moralis” folder and click on “Add”:

Now, we unzip the “phaser3-examples-master.zip” file that we downloaded previously. Once unzipped, we navigate to the “bank panic” folder (phaser3-examples-master > public > src > games > bank panic). This is where our example game’s scene files are:

As you can see in the screenshot above, we select all files except the “main.js” file. We move those files into a new “scenes” folder, within our “src” folder inside our React app’s folder (created above):

Now that we’ve transferred our example game’s scene files, we need to do the same for all of the image and sound files. To do this, we have to locate the “bank panic” folder inside “assets” and then “games”. Then, we copy or move the entire folder into the  new “assets” folder inside the “public” folder of our project:

By moving these files, we are essentially integrating Phaser’s example game into our ReactJS application.  Next, we navigate into the “phaser-moralis” folder by entering the “cd phaser-moralis” command in VSC’s terminal.

2D Web3 Game Code Walkthrough – Tweaking Phaser Files

All of you who want to access the finished code of our 2D Web3 game, you can do so on GitHub. Though, we recommend following along with our steps and making the necessary tweaks to get the most out of this article. We start by changing the title inside the “index.html” file from “React App” to “Phase x React x Moralis”:

Then, change “.js” extensions into “.jsx” extensions for “App.js” and for “index.js”:

Next, we tweak the “index.jsx” file by adding a container to which our canvas element will attach to. Above the “<App />” line, we add the following:

<div id= “game-container”></div>

Moreover, we wrap the above container around the “App” component:

Then, we open the “App.jsx” file, where we first import our Phaser files at the top:

This is also our cue to install Phaser by entering “npm i phaser” into VSC’s terminal. Next, still inside the “App.jsx” file, we initiate our “game” variable using “let game = null;”. Then, we need to add some additional imports and tweak the “App()” function. This is also where we add the following “config” object, through which our Phaser game gets initiated:

  if (!loaded) {
    setLoaded(true);
    const config = {
      type: Phaser.AUTO,
      //gameTitle: "Phaser x Moralis",
      parent: "game-container",
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
      autoFocus: true,
      fps: {
        target: 60,
      },
      physics: {
        default: "arcade",
        arcade: {
          gravity: { y: 200 },
          debug: false,
        },
      },
      backgroundColor: "#282c34",
      scale: {
        mode: Phaser.Scale.ScaleModes.NONE,
      },
      scene: [Boot, Preloader, MainMenu, MainGame],
    };
    // init 2d game (Phaser canvas element)
    if (game === null) {
      // init instance of phaser game as per config
      game = new Phaser.Game(config);
      // listen to in-game events
      // before starting we sign in with wallet
      game.events.on("LOGIN_PLAYER", (event) => {
        console.log("⛓⛓⛓ Login via Web3 Wallet ⛓⛓⛓");
        // trigger wallet authentication
        login();
      });
    }

Importing Phaser

For the above code to function, we also need to import Phaser in our scene files (“Boot.js”, “Door.js”, “Game.js”, “MainMenu.js”, and “Preloader.js”) using the ‘import phaser from “phaser”;’ line. Moreover, we also need to assign the initial values inside the “Game.js” file:

Furthermore, we need to change some file paths inside the “Preloader.js” and “Boot.js” files. Inside the former,  we change the “assets/game/bank-panic/” value inside “this.load.setPath” to “assets/bank-panic/”. Moreover, inside the “Boot.js”, we change “assets/game/bank-panic/loading.png” to “assets/bank-panic/loading.png”.

Going From 2D Web2 Game to 2D Web3 Game with Moralis 

With all of the above tweaks applied, we have a functioning 2D game available. However, it currently has nothing to do with Web3. Fortunately, we can use Moralis to include all sorts of Web3 features seamlessly. Though, for this example project, we will focus on adding Web3 authentication.

We start by importing React Moralis with the “npm i react-moralis” command in VSC’s terminal. Then, we revisit the “index.jsx” file, where we import “react-moralis” with the ‘import { MoralisProvider } from “react-moralis”;’ line. Next, we add a standard “Application” function (video below at 12:05). The latter serves as a standard login to our Moralis server. To make that work, we also create a new “.env” file (12:52), where we add our Moralis server’s details:

The next task is to obtain our Moralis server’s details. If you’re new to Moralis, here are the steps to get the details (13:15):

  • Log in to your Moralis account or create your free Moralis account.
  • Create a Moralis server.
  • Access the server’s details and copy them.
  • Paste the server’s details (server URL and app ID) into the “.env” file.

Moving forward, we made some small tweaks to the “index.jsx” file (14:10). Then, we add React-Moralis functions in “App.jsx” (14:36), which gives us the power of Moralis’ SDK. As such, we easily cover authentication with MetaMask. Finally, we include Redux for dispatching events from our 2D Web3 game to our React hooks and vice versa (15:13). 

Note: Make sure to watch the video below and watch closely to get all the steps right.

https://www.youtube.com/watch?v=Z4dWavvyhbA

How to Build a 2D Web3 Game – Summary

At this point, you should have your own 2D Web3 game functioning properly. Using Phaser, MetaMask, and Moralis, you’ve been able to do that in less than thirty minutes. Along the way, you’ve learned how to use Phaser’s example games. Moreover, you’ve learned how to complete the initial Moralis setup and then use it to include Web3 functionality. As such, you can now use these skills to create your own 2D Web3 games. However, you may not yet be confident enough to start your own projects. Thus, taking on other example projects may be the right direction for you. On the other hand, you may want to explore other blockchain development topics.  

  This story was originally published at https://moralis.io/how-to-build-a-2d-web3-game-full-guide%ef%bf%bc/ 

#web3 #web3 

Sean Wade

Sean Wade

1648871509

How to Build a Web3 Netflix Clone

Moralis Projects - Learn to Build a Web3 Netflix Clone

Join Moralis Projects for weekly challenges building Web3 projects! Moralis Projects represent the best way to learn how to build Web3 projects with real-life use cases. You’ll build the projects alongside the community, allowing you to make new connections whilst building. What’s more, you can even earn NFTs for completing Moralis Projects! New Moralis Projects

Prerequisites

  1. Web Programming using ReactJS
  2. Knowledge of and experience using wallet like Metamask

This Week’s Challenge – Web3 Netflix Clone

In this week’s project you will be building a Web3 Netflix Clone, with movie assets stored in a decentral fashion on IPFS. Users will only be able to view a movie on the website if they have been authenticated through their crypto wallet. 

This authentication is facilitated by Moralis’ Web3 Development Platform, which is the number one way to build your first dapp. We’ll also be using the Moralis database to allow authenticated users to add films to their personal list of favorites.

Need Help?

There is an official Discord channel on the Moralis Discord Server dedicated to  each Moralis Project. This channel can be used to connect with others building each week’s projects, to ask questions, and present your builds. There will be a Moralis Tech Support wizard helping out as well if you’ve got any questions or need any assistance.

Be sure to join the Discord server to take part in the conversation! Then be sure to set up notifications in projects-notifications and jump into this week’s channel; #web3-Netflix.

Can You Improve Our Projects?

All Moralis Projects are starter tutorials designed to give you a strong push in the right direction on your Web3 development journey. Also, if you want to go even further and build a more ambitious project based on what you learned in a Moralis Project, we highly encourage it!

If you find mistakes in any Moralis Projects, feel free to share them with the community and even suggest merge requests in the final build repos, to get you some extra brownie points.

How to Get Started

The starter code required for this week’s build may be cloned from the youtube-tutorials GitHub Repository.

git clone https://github.com/MoralisWeb3/youtube-tutorials.git

After cloning the repo, be sure to navigate to the correct folder.

cd youtube-tutorials

cd Netflix-Starter

And finally you can install all the project dependencies by running the command

yarn

Original article source at https://moralis.io

#moralis #web3 #netflix #nft #blockchain

How to Create Transaction with Web3.js

Abstract

The demo code provides developers with an overview of how to sign, send, and receive receipt of transactions, and verify the results of their execution. The sample also provides the event monitoring code so that the developer can understand how to listen to an event one or more times.

Getting Started

Understanding The Functions of the Smart Contract

  • Constructor: The constructor function of the smart contract, which is called when the contract is deploying, at the same time it will initialize the number to _initialNumber;
  • increment: The function of incrementing the number by given _value;
  • rest: The function of resetting the number to 0;
  • getNumber: The function of getting the number.

How to run it

  1. Install dependencies: npm install
  2. Copy the configuration file: cp .env.example .env
  3. Edit the configuration file: vim .env, copy your project ID and private key to the .env file.
PRIVATE_KEY=YOUR_PRIVATE_KEY
INFURA_ID=YOUR_PROJECT_ID

4.   Run the index.js file: node index.js

Interpret Source Code

compile.js

You can't use .sol files directly, you need to compile it to binary file firstly.

Load the smart contract file Incrementer.sol into source variable.

// Load contract
const source = fs.readFileSync("Incrementer.sol", "utf8");

Compile the smart contract file

const input = {
  language: "Solidity",
  sources: {
    "Incrementer.sol": {
      content: source,
    },
  },
  settings: {
    outputSelection: {
      "*": {
        "*": ["*"],
      },
    },
  },
};

const tempFile = JSON.parse(solc.compile(JSON.stringify(input)));

| Note: The version of solidity in this task is 0.8.0, different versions may have different compile ways.

Get the Contract Object

const contractFile = tempFile.contracts["Incrementer.sol"]["Incrementer"];

Export contractFile Object

If you want to use the contractFile object in other js files, you need to export it.

module.exports = contractFile;

index.js

1. Load the Incrementer smart contract from compile file

const contractOfIncrementer = require("./compile");

2. Read private key from environment variables

For security’s sake, the private key is not hard-coded, but it can be read as environment variables. When run this task, the dotenv plugin will automatically read the configurations in the .env file and load them as environment variables, and then you can use the private key and other environment variables via process.env.

require("dotenv").config();
const privatekey = process.env.PRIVATE_KEY;

3. Create the web3 instance

web3 is the main API of the web3js library. It is used to interact with the blockchain.

// Provider
const providerRPC = {
  development: "https://kovan.infura.io/v3/" + process.env.INFURA_ID,
  moonbase: "https://rpc.testnet.moonbeam.network",
};
const web3 = new Web3(providerRPC.development); //Change to correct network

| Note: The INFURA_ID is the PROJECT ID of the Infura project you created in last task

4. Get the account address

On blockchain, each user has a address, which is unique for others, and you can get the address by the private key. In this task, you can use the we3.eth.accounts.privateKeyToAccount API to get your account address by passing the private key as a parameter.

const account = web3.eth.accounts.privateKeyToAccount(privatekey);
const account_from = {
  privateKey: privatekey,
  accountAddress: account.address,
};

5. Get the bytecode and abi

When deploying the smart contract, you need to specify the bytecode and abi of the smart contract. The bytecode is the compiled binary code of the smart contract, and the abi (Application Binary Interface) is the interface of the smart contract.

const bytecode = contractOfIncrementer.evm.bytecode.object;
const abi = contractOfIncrementer.abi;

6. Get contract instance

In the last step, you got the bytecode and abi, so you can create the contract instance by the abi.

// Create contract instance
  const deployContract = new web3.eth.Contract(abi);

7. Create the transaction of the deployContract

// Create Tx
const deployTx = deployContract.deploy({
    data: bytecode,
    arguments: [5],
});

8. Sign the transaction

Use your private key to sign the transaction.

// Sign Tx
const deployTransaction = await web3.eth.accounts.signTransaction(
    {
        data: deployTx.encodeABI(),
        gas: 8000000,
    },
    account_from.privateKey
);

9. Send the transaction / Deploy your smart contract

Send your deploy transaction to the blockchain. You will receive a receipt, and get this contract address from the receipt.

const deployReceipt = await web3.eth.sendSignedTransaction(
    deployTransaction.rawTransaction
);
console.log(`Contract deployed at address: ${deployReceipt.contractAddress}`);

10. Load the contract instance from blockchain through above address

In previous steps, you built a contract instance, and then deployed the transaction by sending the contract to the blockchain so that you can operate the transaction later. Besides, you could also load a contract instance that is already on the blockchain so that you can operate it directly and avoid the process of deploying it.

let incrementer = new web3.eth.Contract(abi, deployReceipt.contractAddress);

11. Use the view function of a contract

Whether a contract instance is create by deploying, or by loading, you can interact with the contract once you have an instance of the contract already on the blockchain.
There are two types of contract functions: view and without view. The functions with view promise not to modify the state, while the functions without view will generate the corresponding block data on the blockchain. For example, after calling the getNumber function of the contract, you will get the public variable number of the contract, and this operation will not charge any gas.

let number = await incrementer.methods.getNumber().call();

12. Build a transaction

Before you send the transaction to the blockchain, you need to build the transaction, it means you need to specify the parameters of the transaction.

let incrementTx = incrementer.methods.increment(_value);

// Sign with Pk
let incrementTransaction = await web3.eth.accounts.signTransaction(
  {
    to: createReceipt.contractAddress,
    data: incrementTx.encodeABI(),
    gas: 8000000,
  },
  account_from.privateKey
);

13. Send the transaction and get the receipt

You can use sendSignedTransaction function to send above transaction to the blockchain, and got the receipt to check result.

const incrementReceipt = await web3.eth.sendSignedTransaction(
  incrementTransaction.rawTransaction
);

Listen to Event Increment

When invoking the interfaces of the contract, the only way to get information about the processing details, apart from the results returned by the interface, is through events.
In the interfaces, you retrieve the corresponding internal information by triggering an event, and then capturing this event generated by the external block.

const web3Socket = new Web3(
new Web3.providers.WebsocketProvider(
    'wss://kovan.infura.io/ws/v3/' + process.env.INFURA_ID
));
incrementer = new web3Socket.eth.Contract(abi, createReceipt.contractAddress);

| kovan don't support http protocol to event listen, need to use websocket. More details , please refer to this blog

Listen to Increment event only once

incrementer.once('Increment', (error, event) => {
    console.log('I am a onetime event listener, I am going to die now');
});

Listen to Increment event continuously

incrementer.events.Increment(() => {
    console.log("I am a longlive event listener, I get a event now");
});

References

Link: https://github.com/Dapp-Learning-DAO/Dapp-Learning/tree/main/basic/02-web3js-transaction

#solidity #blockchain #smartcontract #web3 #web3.js