Learn Ethereum, Flux-architecture and Immutable

Web3 is a paradigm shift in how applications are interacted with, ran, and built. 

It’s not just a Pump-and-Dump scheme on cryptocurrencies or Bored Ape NFT profile pictures you can put on Twitter.

A fundamental tenet of Web3 is bringing ownership back to the user. You no longer have to trust that your data is being properly handled on someone else’s server (although, currently Web3 ecosystem mainly depends on centralized infrastructure such as GitHub).  

This ownership is achieved through blockchain, cryptocurrencies, NFTs, and smart contracts.

A great example of this type of ownership is through how you exchange money in Web3. There is no intermediary like Stripe, or PayPal to process your transactions. You can even build your own smart contracts that receive crypto (e.g. Ethereum or ‘eth’ for short) and then process that eth how you’d like.

Building this type of smart contract is exactly what Matías is going to show you how to do right now.

Matías builds out a Web3 application that allows you to receive tips in the form of eth in a tip jar on your website. This means your application will be backed by a smart contract that’s accepts eth, stores data, and emits Solidity events.

The frontend application uses SvelteKit which you’ll see how easy it is to get up and be productive with in minutes. A huge benefit here is that the JavaScript you write is just that, JavaScript. You’ll be able to take what you learn and implement it into any framework of your choosing.

While you build this application you will learn how to:

- Write a smart contract using Solidity language
- Test the smart contract using just JavaScript through the waffle framework
- Communicate and interact with the smart contract using ethers.js in a SvelteKit application
- Deploy your smart contract to make it public and accessible to anyone

Solidity is an object-oriented, high-level language for implementing smart contracts.

solidity

Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build an NFT Based Ticketing System

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

immutable

There are lots of techniques for accessing data kept in your Lists. In this lesson, we will compare how data stored in collections can be accessed directly in both standard Arrays and ImmutableJS Lists. We will also look at how to find data inside an Immutable List using the `findEntry` and `findIndex` methods.

Get items in an ImmutableJS List

The reduce function in ImmutableJS allows you to transform and create new data from an existing data structure. In this example, we will do some math and calculate a sum based on data in an ImmutableJS Map.

Calculate a sum using reduce in ImmutableJS

The key to being productive with Immutable JS is understanding how to update values that are nested. Using `setIn` you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use `updateIn` instead. `updateIn`  accepts the same path lookups as `setIn`, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.

Updating nested values with ImmutableJS

ImmutableJS reduce functions can be nested to get data out of complex data structures. In this example, we will create an Immutable List from an Immutable Map that is nested inside of an Immutable List that is itself nested inside of an Immutable Map.

Create a list with nested reduce functions in ImmutableJS

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's [Immutable.js](https://facebook.github.io/immutable-js/) library, let's take a moment to examine some of the pains and obstacles that mutable data structures present. 

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native `Array` to use [Immutable.List](https://facebook.github.io/immutable-js/docs/#/List) in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

Immutable.js: Introduction - Easing the Pains of Mutability

In this lesson we'll look at some of the differences between standard JavaScript Arrays and Immutable Lists. We'll create Immutable.JS Lists from scratch, as well as by converting regular Arrays. We will also compare and contrast the `push` and `concat` methods between both types of collection.

Create an immutable List using Immutable.js

Sometimes our update logic is asynchronous. In this lesson we will investigate two ways in which we can write asynchronous update logic. 

…But, we will also discuss why asynchronous producers should be avoided, and how that can be done by better separating our logic. 

This lesson also demonstrates the “createDraft” and “finishDraft” APIs

Write Asynchronous Producers in Immer and Why You Shouldn’t

In this lesson we will send patches over a WebSocket to our server, and distribute them again from there.

Create a Simple WebSocket Server to Distribute Patches from Immer

Simplify the process of creating a new smart contract by cloning the scaffold-eth repo. 

Once you’ve cloned the scaffold you can run a blockchain locally with `yarn chain` and also run your frontend with `yarn start`

You can find the repo here -> [https://github.com/scaffold-eth/scaffold-eth](https://github.com/scaffold-eth/scaffold-eth)

Create a New NFT Project with scaffold-eth

Ethereum is a decentralized, open-source blockchain with smart contract functionality. 

ethereum

We want to update the “Checked In” property on our NFT tickets once a user checks in with our dApp. 

To accomplish this we create `checkIn` method in our smart contract. To write `checkIn` we can just copy and paste a large portion of our `mint` method and remove the call to `safeMint`, set the id to the user’s token, set Checked In to `true`, and replace the placeholder image with our IPFS image.

Update an NFT’s Image and Other Metadata

A placeholder image isn’t going to cut it for our awesome NFT tickets. 

We can upload our own images to IPFS at [https://www.pinata.cloud/](https://www.pinata.cloud/)

Upload Static Assets to IPFS with Pinata

To confirm ownership we first have to add a `confirmOwnership` method to our smart contract and redeploy it. 

Then, we can call that `confirmOwnership` method on the connected smart contract within a `useEffect` hook in our React dApp.

Confirm a Wallet Owns an NFT in a Smart Contract

With the `QrReader` component from `react-qr-scanner` library, scanning a user’s wallet QR code is straightforward. 

We first make sure that the QR reader can be open and closed in the UI. Then using the `onScan` prop on `QrReader`, we get the wallet address from the QR code and add it to local state.

Scan an Ethereum Wallet's QR Code

Time to set up our dApp to actually mint an NFT when the buy button is clicked. 

`.mint` is called on our `connectedContract` with an object containing a `value` property. The value property is the NFTs cost in gwei. 

Then to polish everything up, we’ll add a loading state, and link the user to the transaction on Etherscan using `useToast`

Mint an NFT from a React dApp

It’s helpful for users to know how many NFTs are currently available and how many there are total.  

This information can be found on the smart contract. In our dApp we can get it off our `connectedContract`, stored locally in React state, using the `totalTicketCount` and `availableTicketCount` methods.

Fetch Mint Info From a Smart Contract

We need to give the owner of the smart contract the ability to open and close an NFT sale in the React dApp UI. 

We’ll use the `.openSale` and `.closeSale` methods off of the `connectedContract` stored in React state. Then for the best possible experience we’ll create a pending state while the sale is opening or closing. During the pending state the buttons will be disabled. 

Then we’ll bring in `useToast` from chakra-ui to give a message depending on if the opening/closing of the sale was successful or not.

Open and Close an NFT Sale From a React dApp

We don’t want any user to be able to access admin pages. Let’s check if the user’s wallet address matches the address of our connected smart contract. 

This can be done by using OpenZeppelin to get the owner address from the smart contract, then comparing that to the currently connected address.

Fetch the Owner's Wallet Address From a Smart Contract

Now it’s time to connect your dApp to your smart contract on the Rinkeby test network. 

You will copy over the `nfTixBooth.json` file from the smart contract project. Then, using the `ethers` library, you’ll connect to the smart contract.

Connect a React dApp to a Smart Contract Using ethers.js

Since we are storing the user’s wallet address in React state, it is lost when the dApp is reloaded. To fix this, we’ll cache the address in localStorage. 

We’ll use the `useEffect` hook to look for an address in localStorage if there isn’t one in local state.

Search

Search Results