Learn Ethereum, Nuxt and Xstate

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

ethereum

Welcome to Noah's course on Introduction to Smart Contracts with Ethereum and Solidity. 

Introduction to Introduction to Smart Contracts with Ethereum and Solidity

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

There are several Ethereum test networks like Ropsten, Rinkeby and Kovan that you can use to deploy your contract to have it publicly available without having to use the mainnet and real ETH.
In this course you'll deploy to Rinkeby netwok (but, the process is the same for the other networks).

The first step will be update your Metamask Wallet to connect to the Rinkeby network.

Next, you'll need some test/fake Ethere to use for testing the Dapp in the network, for that you'll need to use a [faucet like this one](https://www.rinkebyfaucet.com/). Just visit that faucet and add your wallet address.

You will also deploy your web application to vercel to see your project live on the internet!

Deploy your Smart Contract to Goerli Test Network and App to Vercel

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Now that we have an application that is accepting tips to the smart contract that was defined, we need to be able to withdraw the funds that are sent to the contract. The smart contract function for this is already defined so we will just need to call the function from the front end.

To do this we will create a new route to display the contract information. We will then check if the current user is the contract owner and if so allow that user to withdraw the contract funds by clicking a button that we wire up to call the withdraw function from the smart contract.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Withdraw eth from a Smart Contract in a Svelte Application

It is time to interact with the contract, let's send some eth!

For this you'll need a form that is rendered only when the wallet is connected.
This form use the `sendTip` function and gather some required information. On submit, it will read the `sendingTip` loading state variable and disable or enable the button.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Create a Form in Svelte and Send a Tip to an Solidity Smart Contract

Now is time to setup the client to talk with the contract, for that you will need to store and access the contract ABI (this is a file generated by the contract compilation) as well as use ethers to set up a connection to the contract. 

Once set up is complete, we will listen to any tip events that come in from the contract and display tip information in the application.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Interact with a Solidity Smart Contract Using Ethers and the Contract ABI in SvetleKit

Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.

1. Avoid re-connecting every time the browser is refreshed
2. Get more information about the user and the network.

For the first, let's run a little function every time the component is mounted.

Then, let's read and display some more information:

- The user balance
- The network that the user is currently connected

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.


Retrieve Ethereum Network and Account information on Mount and Display it in Svelte

The first step in this part of the journey, will be to setup a simple UI that allow you to connect the current user to the blockchain through it's wallet.

To do this, let's write some code.

Sveltekit applications works by using a file system routing method, meaning that you need to create files under the `src/routes/` folder and those will be then reflected as routes (urls) in your app. Let's keep ti simple and just use the default route here, open `src/routes/index.svelte` and delete the content of it.

You're first step will be create a button that allow the user to "sing-in" to your new dapp and allow the UI to react to that showing a different content if the authorization process was successful.


Connect a Metamask Account to a Svelte Application

Before jumping into the Dapp code you need to setup an Ethereum wallet.
There are bunch of wallet applications and types outher, but for this project we're going to use Metamask.

### What is an ethereum Wallet

A wallet is an application that let's you interact with your Ethereum account. You're wallet is the one that works as a gate between the Dapp and your data, through it the applications can read your balance, send transactions, etc.

You can swap wallet providers at any time or manage multiple accounts in one application. This is because the wallet are non-custodial, meaning that they don't hold your assets, you do.

Just to set some concepts down:

- An Ethereum account is an "entity" that can send transactions and store some assets, it "lives" inside the blockchain.
- The accout have an address (like your profile URL of some social app or your email address) that can be used to send or receive funds.
- A wallt is an application that allow you to interact with the Ethereum account.

There are different types of Wallets:

- Hardware wallets that hold your crypto assets offline - The most secure of all
- Mobile apps, like Argent.
- Web wallets, that let you interact through the browser: Like Metamask.
- Desktp apps

Set up a Metamask Wallet with your local Ethereum Network

Now you need a way to keep a local network alive, deploy the smart contract there and then interact with it. You can think on this like a local web server. When you develop an API you have a local server running it so the client application can talk to it so you can develop and test, this is the same idea.

Head over to your terminal and run tthe following command.

```bash
$ npm run hardhat node
```

This will ramp up a local ethreum network using hardhat and will show in the console a set of accounts and private keys that can be used for testing pruposes.

These are 20 test accounts and addresses created for your. Each account is also rich! are loaded with 10000 ETH. (fake eth btw).

Right now this is just an empty blockchain. There are no blocks nor smart contracts on it. But you want to create a new block and put the smart contract that you just created there, for that you need to create a little script that will use ethers.js power to compile and deploy.

Deploy a Solidity Smart Contract with Hardhat to a Local Ethereum Network

To reduce the amount of gas used, we will create a withdraw function that lets the owner of the contract withdraw funds that have been added when they want rather than withdraw with every transaction.

Your smart contract is ready to be used, since you have confidence in the code after testing it.

But there are a few things that you can add to improve the behavior and security of it.

Let's start by adding events.

Similar to any other programming language Events in solidity are a way to inform the calling application about the current state of the contract. Like notifying the javascript client about a change made to the contract allowing the client application to react to it.

Events are defined within the contract as a global and are called from inside a function. To declare an event you use the `event` keyword, followed by an identifier and the parameter list. The values passed to the parameters are then used to log the information that is saved as part of the transaction inside the block.

To send the event you'll use the `emit` keyword from anywhere inside the contract by passing the name of the event and the corresponding parameters.

For this contract you want to let the client application to know when a tip was successfully sent. To do that you'll create a new event named `NewTip` like this

```javascript
event NewTip(address indexed from, string message, string name, uint256 amount);
```

It will accept an address to identify who sent the tip, the message of the tip and also the name and the amount of eth sent,

And then, it will be emitted from the `sendTip` function

```javascript
// send the event
emit NewTip(msg.sender, _message, _name, msg.value);
```

This event will use the same parameters that the rest of the `sendTip` operation.

- `msg.sender` to get the address of who sent the tip
- `_message` the string with the message sent
- `_name` the name of the sender
- `msg.value` the amount of `eth` sent.

Add eth Withdraw Functionality in a Smart Contract and Emit Solidity Events

Tests are important, as always but it may be more important when you are developing an smart contract. Why?
Because the blockchain is immutable.

The main difference between Solidity development and other languages or environment is that after the implementation of an smart contract in the Ethereum network the contract is immutable, meaning that it will never be modified or updated again.

The first code that get's deployed is the one that will remains unchanged for the rest of time. This is because one the main concerns of Solidity is security. If there's a flaw in your contract code, there is no way to patch it later. You would have to tell to the users of the contract to use a different contract (identified by an `address`) to get the fix.

Sounds uncomfortable right? But, believe it or not, this is a **feature**. The code that your wrote it becomes a **law**. IF you read the code of an smart contract (and verified that that code is actually the one deployed) you can be sure that every time you call a function it will behave exactly as the code says it.

So you need to be sure before deploy and the best way to get that confidence is by testing.

[Hardhat](https://hardhat.org/) (the development environment of choice for this course) offers the tools to test the smart contract using Javascript or Typescript by leveraging the power of [Ethers.js](https://docs.ethers.io/) to interact with the Ethereum network and [Waffle](https://getwaffle.io/), a testing library built on top of Ethere.js

You already dip your toes on a bit of testing code, now let's add a more robust test to check that the contract behaves as expected.



Test Smart Contract Functionality with Ethers and Hardhat

It's time to add functionality to our smart contract. In this lesson we will define a function `sendTip` that accepts a `_message` and `_name`. We will check the senders balance and if it's higher than the tip amount transer the eth specified. We will also increment our `totalTips` contract variable and  add the tip to our Tips array.

While adding this function you'll learn how to handle errors within Solidity functions

Create a Smart Contract Function that Transfers eth from One Address to Another

Now, we have the base contract to work on. The goal of the contract is to act as a tip jar, a way to allow users or followers to send you some ETH through the web, including some message. But also, to showcase the people that sent you that money by making the actions public in the web too. This means that the contract need to:

1. Identify to who to send the tip
2. Store the tip sender data including the message, and the amount of eth.
3. Allow a way to retrieve the actions (the tips sent) made through it.

We will add an `address payable` variable of owner to tell the contract that the contract will receive payments. 

For the actual tip data, we will define a Tip `struct` that will have all the information needed to send a tip.

Store Data in a Smart Contract struct Variable

The first step in this journey will be get your hands into a new language to harness the power of the blockchain. I'm talking about Solidity

**This isn't a Solidity focused course but we will review some concepts to get you up to speed with it.

The first thing to notice is that Solidity is an statically-typed language created specifically to create smart contracts for the Ethereum network.

An smart contract is like "real life" contract. Is a way to establish terms for an agreement. But the "smart" part it's because this type of contract is declared as machine code that is executed in a blockchain. This expand the idea of the original blockchain, Bitcon, aout sending and receiveing money without a centralized intermiediary to create trust and make possible to automate and dcentralize virtually any kinf of deal or transaction.

Since the contracts run in the blockchain (like Ethereum network) they offer high security, trust, inmmutability and reliability.

Since the blockchain is immutable you have to be care on what are you deploying. After deployed it cannot be change and you'll need to deploy a new contract.

For Solidity, a contract is a collection of code (a program) and data (the state) that lives inside the blockchain, it can be identify by its Ethereum address. You can leverage your previous knowledge and use some analogies to understand the smart contract.

You can think on the contract as your "backend" or "server side" program. This server expose an API and store some data (the state) into the a databse (the blockchain), but the database is not written nor query with a different language like SQL, you can imagine that Solidity is automatically connected to the database and everything you deeclare (like a variable) is stored in the database.

Create and Test a Solidity Smart Contract with a Public Variable

We'll start our project by installing all of the necessary tools to get started with Web3 development. 

This project will use SvelteKit Tailwind CSS for it's UI. We have some handy initializers that we will run to do the configuration for us. 

On the Web3 side of things we will use Hardhat, Ethers.js, and hardhat-waffle for smart contract development.

Set up an Ethereum Project using SvelteKit with Tailwind CSS and Hardhat

We will start up a local blockchain that behaves like Ethereum, allowing us to test and prototype our smart contracts' behavior rapidly. It provides useful features out of the box, such as logging so we can follow the executions as they happen and pre-funded accounts with their corresponding private keys.

**Please Be Warry!** Never use or send money to the addresses on mainnet Ethereum. These keys are the same every single time. There are sure to be bots waiting to drain these wallets when funds get sent to them.

Start a Local Blockchain With Anvil

Jotai's state management is primitive and flexible. This gives you room to build, compose, and share state throughout your application exactly how you need it.

This flexibility can become hard to manage when you have complex requirements that span across a number of states your application can be in.

Jotai lets you leverage other state management solutions through integrations so that you can solve the problem you're facing exactly how you need to.

One of those integrations is XState. XState gives you a safe abstraction to enumerate and handle the complex states your application can be in.

With Jotai + XState, you get the flexibility and ease of use of Jotai with the power of XState.

XState is a sophisticated library to provide a better and safer abstraction for state management. 

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

Complex State Management in React with Jotai and XState

Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

xstate

Sometimes adding initial values through the jotai Provider is not what you want. Provider will create a whole new store with atom values

One way to initialize a state machine inside Jotai is to turn our initial `lightAtom` into a function `createLightAtom`. This function will take an `initial` property that we can pass to `createLightMachine` when we declare the function. We will then useEffect to initialize our lightMachine.

There is a small limitation with this pattern, the machine is initialized with it's default value and then over ridden with the value we pass in the effect. The initial render will use that default value while the second render will have the value we passed in.


Initialize a Xstate Machine with Jotai Atom in Atom Pattern

We currently have a machine that displays a circle of green. When you click it, it will cycle through green, yellow, and Red.

What if you wanted to pass XState initial values from Jotai, you'll need to use the `initialValues` prop on Jotai Provider and pass a list of pair (atom and value) to it.

To do this we'll refactor the creation of the lightMachine to be a function that accepts an atom as an initial value.

One note to be aware of is that this initial value will only be set when the XState machines instantiate.


Provide XState with Initial Values through Jotai Provider

Sometimes you need to display values in specific ways throughout your application based on the state that you are managing. The way to do this is to derive your state so you don't have to track multiple stateful items.

In Jotai, this is accomplished by creating an atom, getting the value from another atom that you are managing (in this case from Xstate), and using that value how you need it in your derived atom. This atom will be re-evaluated every time the managed state changes.

This pattern is great to use if you have complex state managed in something like Xstate but need a derived state value that is not strongly tied to that managed state. The pattern works the same for async and synchronous function calls as well as pulling in multiple atoms and libraries to use in your derived state.


Derive Jotai Atom State from Complex State Managed in Xstate 



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

Search

Search Results