Sending The Tx

A practical guide to sending a state-changing transaction with viem. Learn how to use `viem` with MetaMask to send transactions that alter smart contract state from a frontend. Master the vital "simulate-then-write" pattern for safer and more reliable user interactions on a local Anvil node.

Solidity Developer

Full-Stack Web3 Development Crash Course
1. Introduction
A foundational project to Introduction to the HTML/JS Buy Me A Coffee dApp. Discover how plain HTML and JavaScript can interact with a Solidity smart contract to create a simple dApp. Practice connecting wallets, sending test Ether, reading contract state, and triggering withdrawals on a local blockchain. Duration: 4min
2. Setup
A step-by-step walkthrough to setting up your web3 frontend project. Create the project directory, define application goals with a README.md, and build the basic HTML file structure. Add essential tags like head, body, title, and the first interactive element – a connect button with a unique ID. Duration: 4min
3. Connecting Your Wallet To Your Site
An introductory guide to connecting your wallet to a website. Discover the process websites use to detect browser wallets via the injected `window.ethereum` object. Explore how wallets like MetaMask mediate communication between dApps and the blockchain using RPC URLs. Duration: 8min
4. JavaScript In HTML
A foundational guide to linking external JavaScript to Your HTML. Learn the best practice of separating JavaScript from HTML by creating and linking external `.js` files. Follow the steps using the `<script>` tag and verify the connection in the browser console. Duration: 2min
5. Adding Connect Functionality
A practical guide to connecting your dApp: Adding a web3 wallet button with JavaScript and Viem. Learn to implement a 'Connect Wallet' feature using vanilla JavaScript, detect browser wallets, and leverage the `viem` library. Master asynchronous connection requests with `async`/`await` for robust dApp interactions. Duration: 13min
6. Connecting To Different Chains
A foundational walkthrough to connecting your web app to MetaMask. Walk through the process of linking a web app to the MetaMask wallet and enabling blockchain interactions. Explore the connection flow, user confirmations, and implement a basic connection using JavaScript and `viem`. Duration: 1min
7. Sending Contract Transactions Setup
A practical guide to setting up the fund function. Add HTML elements and initial JavaScript logic to interact with a smart contract's fund function. Learn to read user input, ensure wallet connectivity, and prepare for transaction simulation using Viem's Public Client. Duration: 11min
8. Sending Contract Transactions Constants
A crucial pattern for managing smart contract details: The constants file. Explore the necessity of a dedicated constants file for handling smart contract addresses and ABIs in web applications. See how this centralizes configuration, aiding multi-chain support and code organization. Duration: 2min
9. Simulations
A detailed lesson to simulating contract interactions with `viem`. Discover how to use `viem`'s `simulateContract` for pre-flight checks on your blockchain transactions, ensuring they'll likely succeed. Learn to configure all necessary parameters from ABI and account to chain and value conversion. Duration: 6min
10. Local Node
An essential walkthrough to local dApps testing with Anvil. Discover the advantages of local blockchain environments over live networks for front-end development. Learn to install Anvil, connect MetaMask, and utilize saved states for efficient, zero-cost testing. Duration: 7min
11. Sending The Tx
A practical guide to sending a state-changing transaction with viem. Learn how to use `viem` with MetaMask to send transactions that alter smart contract state from a frontend. Master the vital "simulate-then-write" pattern for safer and more reliable user interactions on a local Anvil node. Duration: 4min
12. Getbalance
A practical guide to how to fetch smart contract balances using viem. Learn to query smart contract ETH balances from a web frontend using viem's PublicClient. Understand read operations, balance formatting, and handling block confirmations in local Anvil setups. Duration: 5min
13. Mid Point Review
A consolidating review to mid-point review: Building your web3 frontend. Revisit connecting wallets, reading balances (`publicClient`), and sending transactions (`walletClient`, simulate/write). Solidify understanding of `window.ethereum`, `viem` usage, and local testing with `anvil`. Duration: 4min
14. Withdrawing AI
A guided walkthrough to adding withdraw functionality to your dApp frontend. Implement the crucial `withdraw` function on a dApp frontend, enabling fund retrieval from a smart contract. Learn to leverage AI assistance for code generation while understanding the critical importance of manual review in web3. Duration: 7min
15. Typescript
A guided transition to from JavaScript to TypeScript. Explore the benefits of TypeScript and follow the steps to convert a JavaScript dApp frontend. Learn about compilation, type safety, configuration, and using Vite for an efficient development workflow. Duration: 14min
16. Review
An essential review to reviewing your first dApp frontend: Connecting, reading, and writing with Viem. Recap key Viem concepts like WalletClient, PublicClient, and the simulate-then-write pattern used in a basic dApp frontend. Learn how connect, read balances, and execute fund/withdraw transactions. Duration: 5min
17. Challenges
A practical challenge to querying smart contract data from the frontend. Apply your frontend skills to read data directly from a deployed smart contract by adding a query button. Learn the crucial distinction between gasless read operations (`view` functions) and state-changing write operations. Duration: 2min

Course Overview

About the course

What you'll learn

How to build full-stack web3 applications on ZKsync

JavaScript/TypeScript: viem, wagmi, synpress

Nodejs and pnpm

rindexer

Circle Compliance Engine and USDC

Fleek site hosting and CLI

How to build a static and dynamic React/Next.js site

How to leverage AI to code faster and more securely

Course Description

Who is this course for?

  • Software engineers
  • Frontend developers
  • Backend developers
  • web3 developers
  • Smart contract security researchers

Potential Careers

Smart Contract Auditor

$100,000 - $200,000 (avg. salary)

DeFi Developer

$75,000 - $200,000 (avg. salary)

Smart Contract Engineer

$100,000 - $150,000 (avg. salary)

Web3 developer

$60,000 - $150,000 (avg. salary)

Web3 Developer Relations

$85,000 - $125,000 (avg. salary)

Security researcher

$49,999 - $120,000 (avg. salary)

Meet your instructors

Patrick Collins

Patrick Collins

Founder at Cyfrin

Web3 engineer, educator, and Cyfrin co-founder. Patrick's smart contract development and security courses have helped hundreds of thousands of engineers kickstarting their careers into web3.

Last updated on May 15, 2025