
Ethereum represents the gateway to a worldwide, decentralized computing paradigm. This platform enables you to run decentralized applications (DApps) and smart contracts that have no central points of failure or control, integrate with a payment network, and operate on an open blockchain. With this practical guide, Andreas M. Antonopoulos and Gavin Wood provide everything you need to know about building smart contracts and DApps on Ethereum and other virtual-machine blockchains.

Discover why IBM, Microsoft, NASDAQ, and hundreds of other organizations are experimenting with Ethereum. This essential guide shows you how to develop the skills necessary to be an innovator in this growing and exciting new industry.

A guide to the operation and use of Ethereum and other EVM-compatible blockchains.

Mastering Ethereum


The story of the idealists, technologists, and opportunists fighting to bring cryptocurrency to the masses.

In their short history, Bitcoin and other cryptocurrencies have gone through booms, busts, and internecine wars, recently reaching a market valuation of more than $2 trillion. The central promise of crypto endures—vast fortunes made from decentralized networks not controlled by any single entity and not yet regulated by many governments.

The recent growth of crypto would have been all but impossible if not for a brilliant young man named Vitalik Buterin and his creation: Ethereum. In this book, Laura Shin takes readers inside the founding of this novel cryptocurrency network, which enabled users to launch their own new coins, thus creating a new crypto fever. She introduces readers to larger-than-life characters like Buterin, the Web3 wunderkind; his short-lived CEO, Charles Hoskinson; and Joe Lubin, a former Goldman Sachs VP who became one of crypto’s most well-known billionaires. Sparks fly as these outsized personalities fight for their piece of a seemingly limitless new business opportunity.

This fascinating book shows the crypto market for what it really is: a deeply personal struggle to influence the coming revolution in money, culture, and power.

Idealism, Greed, Lies, and the Making of the First Big Cryptocurrency Craze

The Cryptopians


Tokens - often referred to as cryptocurrencies - can represent anything from an asset to an access right, such as gold, diamonds, a fraction of a Picasso painting or an entry ticket to a concert. Tokens could also be used to reward social media contributions, incentivize the reduction of CO2 emissions, or even ones attention for watching an ad. While it has become easy to create a token, which is collectively managed by a public Web3 infrastructure like a blockchain network, the understanding of how to apply these tokens is still vague.

The industry keeps referring to “Blockchain” as different from “Bitcoin,” creating an artificial divide that is often misleading. There seems to be too little understanding about the fact that Bitcoin is a blockchain network, which is (a) globally managed by people who mostly do not know each other, and (b) enabled by the consensus protocol that (c) incentivizes all network actors for their contributions with a native token. The governance rules are tied to the minting of a native blockchain token. The Bitcoin token can, therefore, be seen as the currency of a distributed Internet tribe, called the Bitcoin network, where network actors are rewarded with Bitcoins, just as the Ether is the currency of the distributed Internet tribe Ethereum network, or Sia is the native currency of the Sia network. The Bitcoin network and other distributed ledgers all represent a collectively maintained public infrastructure and are the backbone of the next generation Internet, what the crypto community refers to as the Web3.

This book attempts to summarize existing knowledge about blockchain networks and other distributed ledgers as the backbone of the Web3, and contextualize the socio-economic implications of the Web3 applications such as smart contracts, tokens, and DAOs to the concepts of money, economics, governance and decentralized finance (DeFi).

Token Economy


Learn to Code Blockchain DApps By Building Simple Games

CryptoZombies is an interactive school that teaches you all things technical about blockchains. Learn to make smart contracts in Solidity or Libra by making your own crypto-collectibles game.

#1 Solidity Tutorial & Ethereum Blockchain Programming Course

CryptoZombies


Node Guardians is a gamified educational platform that creates lore-rich programming challenges for experienced Solidity, Huff, Cairo and Noir developers. Think of it as a skill-based RPG where developers can become familiar with specific stack components and a place where they can showcase their abilities. 

### Skills Upgrade

We have created a series of coding challenges called “quests” to engage smart contract developers, providing them with the knowledge to build safe and gas efficient applications. In addition to practical skills, we also provide theoretical knowledge about crypto history, technology and economics through building a library of articles that break down complex concepts of distributed systems & decentralized finance.


### Public Good

Node Guardians is a public good for developers and will always remain so. 
In addition to supporting the growth of cool ecosystems, we plan to make the platform sustainable by managing [infrastructure](https://infra.nodeguardians.io/) across various networks.

Rewarding non-contributing operators wastes funds, we prefer community-building and education.


Node Guardians is a gamified educational platform that creates lore-rich programming challenges for experienced Solidity, Cairo, Huff and Noir developers.

Node Guardians


Speed Run Ethereum aims to provide a structured learning path for onboarding developers to Ethereum.

Ethereum Dev Speed Run with a framework for submitting challenges, get feedback from ethereum builders, and in the process unlocking new challenges and proof of completion.

Speedrun Ethereum

Teaching the next generation of smart contract developers and auditors. Learn from industry-leading experts how to build the next generation of web3 applications and level up your career.


Level up your web3 career through industry leading comprehensive courses

Cyfrin Updraft


This is an initiative for the early solidity developers by those who were early developers sometime.

In this approach, we are looking to categorize the smart contract according to the difficulty level in multiple standards. For now, we are keeping the standard 0 to 5(can be discussed).

This initiative needs great support from Blockchain enthusiast, developer and researchers to build this school in a way which can attract learners and provide them ease for development.

First place for early developers to learn Solidity 

solidity-school


## Introductory Modules

- What is a SNARK?
- Building a SNARK (part 1)
- Building a SNARK (part 2)

## Whiteboard Sessions with ZK Projects​

- SNARKs vs. STARKS with Brendan and Bobbin
- PLONK and Custom Gates with Adrian Hamelink
- Lookup Arguments for Performance Optimisation with Mary Maller
- Zero Knowledge Virtual Machine (zkVM) with grjte
- Achieving Decentralised Private Computation with Pratyush Mishra
- Introduction to zkRollups with Barry Whitehat
- zkEVM with Jordi Baylina
- ZK Swaps with Henry de Valence
- zkID with Oleksandr Brezhniev
- Fast Recursion with Plonky2 with William Borgeaud

ZK Whiteboard Sessions is an educational series on all things zero knowledge

ZK Whiteboard Sessions


## What is a smart contract?

Smart contracts are the backbone of decentralized applications (DApps) and Web3. A smart contract is a simple program that lives on a blockchain network (such as Ethereum). They're actually not that smart. And nothing like a (legal) contract. They’re more like an executable piece of code that requires input or an trigger from an external source. They can validate those input conditions and if correct, execute their own logic to update the state on a blockchain.

## Benefits

They often serve the following purposes:
- Store and maintain data
- Manage relationships with users, or other contracts

Benefits of smart contracts are
- Immutable - once deployed none can change them
- Composable - they’re public and anyone can interact with them, or build on top of them. Much like public APIs

## Resources

The following resources have been the most popular resources on the site for a long time. These are all highly recommend to start learning about Solidity


### 1. Official Solidity website
The most obvious resources is ofcourse the official website and documentation of the Solidity team itself. The Solidity team covers all the core concepts and fundamentals of Solidity and smart contracts in general. Highly recommended

https://soliditylang.org/


### 2. Solidity by Example
The second one on the list is Solidity by Example. A great collection of more practical examples, incl. source code and supporting videos.

https://solidity-by-example.org/


### 3. CryptoZombies 
CryptoZombies is an interactive school that teaches you all things technical about blockchains. A fun and interactive way to write smart contracts in Solidity by making your own crypto-collectibles game.

https://cryptozombies.io/


### 4. Speedrun Ethereum

Speedrun Ethereum helps you get to the next level. It teaches you how to build on Ethereum; the superpowers and the gotchas while you build up your Web3 portfolio. If you like this, also make sure to check out the other work of the amazing [Austin Griffith](https://twitter.com/austingriffith) such as [ETH-build](https://eth.build/) and [Scaffold-eth](https://scaffoldeth.io/).

https://speedrunethereum.com/


### 5. Smart Contract Best Practices 

Smart contracts are complex instruments that have the authority to allocate high-value resources between complex systems. Often working autonomously. With huge financial loss at risk. This makes them critical components in these systems. Development of such components requires thoughtful design, solid engineering practices, rigorous testing and a strong security mindset. This document provides a baseline knowledge of security considerations.

https://consensys.github.io/smart-contract-best-practices/


## Other resources

If you'd like to read more, make sure to checkout all the other [Solidity](/tags/smart%20contracts) resources on the site.

Solidity is a programming language designed for developing smart contracts that run on Ethereum. It's the most in demand skill in the Web3 space. These are the best resources to help you learn more about it.

Best resources to learn Solidity


Navigating conversations and understanding key concepts in web3 sometimes requires its own terminology. In this regard, web3 is not just a technological shift, but also a cultural one.

This guide will provide you with the **most essential terms** to decode the language and become a web3 citizen. It is tailored to provide you with clear and concise definitions for the unique terms that define this industry.

Dive in, discover, and enhance your fluency in the unique lexicon of the web3 industry. (-:

If you want to contribute to the glossary, [have a look on Github](https://github.com/wslyvh/useWeb3/tree/main).

## Glossary a-z

- **Airdrop**  
  Distribution of free tokens, usually to promote a product or incentivise early users

- **Altcoin**  
  Alternative coin, any cryptocurrency other than Bitcoin

- **AMM**  
  Automated Market Maker, popular mechanism among decentralized exchanges (DEXes) involving liquidity pools instead of an orderbook-based system

- **Anon**  
  Anonymous, entity that wishes to remain anonymous or pseudonymous

- **Beacon Chain**  
  Ethereum’s proof-of-stake (PoS) consensus layer

- **Bridge**  
  Service that transfers tokens between multiple blockchains (cross-chain)

- **BUIDL**  
  Term to describe the web3 building ethos, even despite a bear market, inspired by HODL

- **CeFi**  
  Centralized finance, the “traditional” finance sector, in contrast to DeFi (decentralized finance)

- **CEX**  
  Centralized Exchange, app for swapping tokens run by a company, often used for fiat exchange; in contrast to DEX (Decentralized Exchange)

- **Cypherpunks**  
  Cypher + punks, movement originating in the early 90s, emphasizing the need for privacy in the digital age, enforced by cryptography

- **DAO**  
  Decentralized Autonomous Organization, blockchain-based organizations that are owned and governed by their members via tokens

- **DApp**  
  Decentralized Application, blockchain-based services that use smart contracts in their backend and thus have a distributed nature, without the need for intermediaries

- **DeFi**  
  Decentralized Finance, general term for decentralized services in the financial sector, that are permissionless and globally available, e.g., DEXes (decentralized exchanges) or lending protocols

- **Degen**  
  Degenerate, term for a person that is deeply involved in crypto or a specific sector, e.g., DeFi Degens

- **DEX**  
  Decentralized Exchange, blockchain-based app for swapping tokens that use smart contracts to be permissionless

- **Diamond Hands**  
  Holding a digital asset through very volatile times

- **DYOR**  
  Do Your Own Research, principle of self-verification instead of trusting others

- **EIP**  
  Ethereum Improvement Proposal, a process to describe standards for the Ethereum platform

- **ERC**  
  Ethereum Request for Comments, form of EIP to specify application layer standards; the most popular ones are ERC20 for fungible tokens and ERC721 for non-fungible tokens

- **EVM**  
  Ethereum Virtual Machine, the environment in which all Ethereum accounts and smart contracts live, the EVM defines the rules for computing a new valid state from block to block

- **Exchange**  
  An application that allows users to buy and sell crypto assets

- **Exit Scam**  
  Scenario in which a project or a part of a team steals the investors’ money and leaves

- **Explorer**  
  Webpage that displays information about the transaction history of a blockchain

- **Faucet**  
  Service that dispenses free tokens, usually for test networks

- **Flippening**  
  Term to describe a pivotal change in price or perception, e.g., when the market cap of a token exceeds the one of another token

- **FOMO**  
  Fear Of Missing Out, term to describe the feeling of not being included in something, e.g., a crypto investment or news

- **Fork**  
  Split of a blockchain or project due to technical issues or a dispute

- **FUD**  
  Fear, Uncertainty and Doubt, the opposite of FOMO

- **Gas**  
  Term for the fee that Ethereum transactions cost; it is used to reward validators and prevents malicious use of the blockchain

- **Genesis Block**  
  The first block recorded in a blockchain

- **Gm**  
  Good morning, form of greetings in crypto communities; due to the global nature of web3 it can be used at any time of the day

- **Hash**  
  Function that can be used to map data of arbitrary size to fixed-size values, e.g., for encryption, cryptographic hash functions are used in many parts of the web3 industry

- **HODL**  
  A frequent term referring to a strict buy-and-hold strategy, became famous after a misspelling in the bitcointalk forum in 2013

- **ICO**  
  Initial coin offering, the process of selling tokens when launching a new crypto project, inspired by the initial public offering (IPO) for stocks.

- **JOMO**  
  Joy Of Missing Out, converting FOMO into a positive feeling

- **KYC**  
  Know Your Customer, a process to verify the identity of customers; often used by centralized exchanges or entities

- **Layer 1**  
  Base blockchain architecture that serves as the foundation for other layers, also called mainnet, e.g., Ethereum

- **Layer 2**  
  Built on top of layer 1, usually for scaling purposes, e.g., Optimism

- **Minting**  
  Process of creating new token(s)

- **Mixer**  
  Decentralized Application that “mixes” tokens to cover their transaction history, used for private transactions

- **NFT**  
  Non-Fungible Token, a type of token that is not interchangeable or divisible, in contrast to fungible tokens; often used for digital collectibles

- **Node**  
  An instance holding a copy of the blockchain, it is connected to other nodes, synchronizing the blockchain and thus forming the network

- **OG**  
  Original Gangster, a person who was very early involved in crypto or a specific project

- **Oracle**  
  Data bridge to bring real-world information onto the blockchain

- **P2P**  
  Peer-to-peer, referring to a transaction between two people without other (central) parties involved

- **Rollups**  
  Popular type of layer 2, scaling solution that uses transaction bundling (“rolling up”) transactions before publishing them to the main chain

- **Rug Pull**  
  Scenario in which a team abandons a project and/or removes its liquidity, similar to exit scams

- **SBTs**  
  Soul-Bound-token, type of NFT that is non-transferrable

- **Smart contract**  
  Programs that run on the blockchain that follow the "if this then that" logic, they execute themselves when certain conditions are met

- **Snapshot**  
  Record of a blockchain at a particular block height, also the name of a popular DAO voting tool

- **Solidity**  
  Smart Contract Programming Language, created for the Ethereum blockchain but popular for other chains as well

- **Stablecoin**  
  A cryptocurrency that is pegged to another asset, mostly USD

- **Staking**  
  Process of locking tokens to contribute to validation in a proof of stake blockchain

- **Token**  
  Representation of a digital asset on a blockchain

- **TVL**  
  Total Value Locked, equivalent of USD locked in a blockchain or protocol, often used as an indicator in DeFi, e.g. in lending protocols

- **Validator**  
  Virtual entity participating in the consensus of a proof of stake blockchain, they participate in producing blocks and validating transactions

- **WAGMI**  
  Acronym for “We're All Gonna Make It”, expression used to show an optimistic attitude about the future of web3

- **Whale**  
  An entity holding a large amount of cryptocurrency, sometimes even a significant part of a project

- **Whitepaper**  
  Document that is released with new crypto projects to explain the details of the project.

- **ZKP**  
  Zero-Knowledge-Proof, cryptographic mechanism to verify an information without revealing it, often used for scaling solutions of privacy applications


The glossary provides you with definitions for the most important terms to navigate the web3 landscape.

Crypto glossary – important terms to navigate web3


This handbook is for people who are interested in exploring the vision behind “Web3”, and who wish to acquire in-demand skills that are essential to realizing that vision.  

A Handbook for Smart Contract Development

Learn Solidity


Create Eth App supports multiple frontend frameworks. It comes with a host of decentralized finance templates pre-filled with contract ABIs, addresses and subgraphs. Everything you need to build a modern Ethereum-powered single-page app.

- Learning how to write Ethereum-powered apps in a comfortable and feature-rich development environment.
- Starting new Ethereum-powered single-page React applications without wasting time on copy-pasting boilerplates
- Creating examples with React for your Ethereum-related libraries and components.

Create Ethereum-powered apps with one command

Create Eth App


**Features**
- Next.js
- Ethereum
- Typescript
- Chakra UI
- Wagmi
- Connectkit
- Ethers.js

An open-source Next.js + Ethereum starter kit to quickly ship Web3 Apps

Nexth Starter kit


Everything you need to build on Ethereum!

Quickly experiment with Solidity using a frontend that adapts to your smart contract

Forkable Ethereum dev stack focused on fast product iterations

Scaffold-ETH


Becoming a blockchain engineer is the most fun, rewarding, and exhilarating choice I’ve and my colleagues have ever made. And we’ve already blazed the trail for you to get started! In this article, we will show you exactly how to learn to become a blockchain engineer, from beginner to professional.

Spoiler alert, here is the exact blueprint we are going to cover to get you to a successful blockchain engineer:

1. Understand why you should become a blockchain engineer
2. Take a Blockchain Course
3. Join a Hackathon, the Community, & Build
4. Start your own protocol, Take a job, Freelance & Contribute

If you make it this far, you’ve done it! Although, I’ll add a bonus step 5 that we will talk about soon.

5. You’ve made it! Keep learning!

That’s it! These are the exact steps you need to take to become a blockchain engineer!

Become a blockchain, solidity, and smart contract engineer by following these steps

Become a Blockchain Engineer


Odds are you’ve heard about the Ethereum blockchain, whether or not you know what it is. It’s been in the news a lot lately, including the cover of some major magazines, but reading those articles can be like gibberish if you don’t have a foundation for what exactly Ethereum is. So what is it? In essence, a public database that keeps a permanent record of digital transactions. Importantly, this database doesn’t require any central authority to maintain and secure it. Instead it operates as a “trustless” transactional system — a framework in which individuals can make peer-to-peer transactions without needing to trust a third party OR one another.

Still confused? That’s where this post comes in. My aim is to explain how Ethereum functions at a technical level, without complex math or scary-looking formulas. Even if you’re not a programmer, I hope you’ll walk away with at least better grasp of the tech. If some parts are too technical and difficult to grok, that’s totally fine! There’s really no need to understand every little detail. I recommend just focusing on understanding things at a broad level.

Many of the topics covered in this post are a breakdown of the concepts discussed in the yellow paper. I’ve added my own explanations and diagrams to make understanding Ethereum easier. Those brave enough to take on the technical challenge can also read the Ethereum yellow paper.

Many of the topics covered in this post are a breakdown of the concepts discussed in the yellow paper. I’ve added my own explanations and diagrams to make it easier.

How does Ethereum work, anyway?


I recently joined Edge & Node as a Developer Relations Engineer and have been diving deeper into smart contract development with Ethereum. I have settled upon what I think is the best stack for building full stack dApps with Solidity:

▶︎ Client Framework - React
▶︎ Ethereum development environment - Hardhat
▶︎ Ethereum Web Client Library - Ethers.js
▶︎ API layer - The Graph Protocol

Building Full Stack dApps with React, Ethers.js, Solidity, and Hardhat

The Complete Guide to Full Stack Ethereum Development


Educational sandbox for building on web3. Visually understand how Ethereum works by doing.

ETH.Build


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

This course will give you a full introduction into all of the core concepts in blockchain, smart contracts, solidity, NFTs/ERC721s, ERC20s, Coding Decentralized Finance (DeFi), javascript and solidity, Chainlink, Ethereum, upgradable smart contracts, and full stack blockchain development.   

Some of the technologies covered are:
- The Graph
- Chainlink
- Metamask
- Alchemy
- Remix
- Hardhat
- Solidity
- Openzeppelin
- Trail of Bits
- Ganache
- Ethers
- Etherscan
- Coinmarketcap
- Aave
- IPFS
- Fleek.hq
- Filecoin
- NextJS
- Moralis
- Web3uikit
- Opensea
- Pinata
- Nft.storage

 And more!

Follow along with the videos and you'll be a blockchain wizard in no time!  💻 The repository with helpful links to all code, resources, and support forums is located here: https://github.com/smartcontractkit/full-blockchain-solidity-course-js.

This course will give you a full introduction into all of the core concepts related to blockchain, smart contracts, Solidity, ERC20s, full-stack Web3 dapps, decentralized finance (DeFi), JavaScript, TypeScript, Chainlink, Ethereum, upgradable smart contracts, DAOs, the graph, moralis, aave, IPFS, and more. Follow along with the videos and you'll be a blockchain wizard in no time!

Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript – 32-Hour Course


Learning Solidity with a collection of YouTube videos and example code.

Learning Solidity


Here we collect and discuss the best DeFi & Blockchain researches and tools 

DeFi Developer roadmap


ETH Gas Tracker helps you discover how gas works, why it matters and help you set optimal gas fees to use the Ethereum network more efficiently. Get real-time gas prices, historical data, and average fees to time your transactions and save money. Ethereum Gas Tracker is the best way to track gas prices and provides an API for developers to integrate gas data into their applications.

Monitor and track the Ethereum, and L2 gas prices to reduce transaction fees and save money

ETH Gas Tracker


This document provides a baseline knowledge of security considerations for intermediate Solidity programmers. It is maintained by ConsenSys Diligence, with contributions from our friends in the broader Ethereum community.

A guide to Ethereum smart contract security best practices

Smart Contract Best Practices

Create stories for the following Simulator components:
- [ ] WalletHome
- [ ] Simulator (through index.tsx)
- [ ] ConnectWeb3
- [ ] CreateAccount
- [ ] SendReceive

feature ✨

help wanted

Status: Stale

good first issue

Ethereum.org is a primary online resource for the Ethereum community.

ethereum-org-website

Markdown

Create stories for Simulator components

Create stories for the following header components:
- [ ] LanguagePicker
- [ ] Nav
- [ ] Search

Create stories for Header components

Create story for the following BannerGrid components:
- [ ] Banner
- [ ] BannerBody
- [ ] BannerImage
- [ ] BannerGrid
- [ ] BannerGridCell

Create issue for BannerGrid components

# Create story tests for AssetDownload component

## Prerequisite

To get yourself up to speed on how we use storybook on ethereum.org, learn more [here](https://github.com/ethereum/ethereum-org-website/blob/dev/docs/applying-storybook.md)

## What to do
- [ ] Create story file `/src/components/AssetDownload/AssetDownload.stories.tsx`
- [ ] Write story testing render of the AssetDownload component in context of use. 

Note: When testing the AssetDownload, make sure to include stories that test both the ArtistDownloadImage component, and the ArtistDownloadArtist component. You can get context of how this component is used on the [assets page](https://github.com/ethereum/ethereum-org-website/blob/9fe3b2d2af409bee47fba1759541af962ce2274c/src/pages/assets.tsx#L187)

Create story for AssetDownload component

_This is part of our [Testing](https://github.com/ethereum/ethereum-org-website/issues/12746) epic from our Q2 roadmap._

## Description

We have implemented support for storybook to do testing on [ethereum.org](https://ethereum.org/). We would like to be able to catch visual regressions before they reach production, helping us build confidence so that we can improve stability of ethereum.org through a testing suite. The first phase of this will be implementing visual storybook tests on our suite of components. 

Below is the list of components in the ethereum.org repo, broken down by [Atomic design](https://www.uxpin.com/studio/blog/atomic-ui-components/#:~:text=Atoms.,Examples%20include%20buttons%20or%20forms.).

## How to contribute
If you’d like to help with adding stories for components, please follow these steps:

1. Read the [storybook documentation](https://github.com/ethereum/ethereum-org-website/blob/dev/docs/applying-storybook.md) for the project
2. Leave a comment here asking which component you would ke to work out. We will be going from the top of the list to bottom (Atoms to Pages).
3. We assign you to the file (by adding your handle next to the file name in the list).
    - Read and follow our storybook implementation guide for some tips & guidance.
    - **If you were assigned to multiple files** then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
4. Once you finish it (PR merged), we’ll mark it as done.
5. Repeat!

-----

## Components

### Atoms

In Atomic Design, as in chemistry, atoms are the basic elements that help inform everything. In the world of web applications, atoms are the foundational elements, such as HTML tags, fonts, animations, and color palettes. Web design “atoms” can also be less concrete. Examples include buttons or forms.

```[tasklist]
### Typeography
- [x] Headings
- [x] @chakra-ui/components/Link
- [x] Text 
```

```[tasklist]
### Media & icons - All visual references used in ethereum.org
- [x] Avatars
- [x] Icons
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13067
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13242
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13734
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13250
```

```[tasklist]
### Forms - Base html components used in forms
- [x] Buttons
- [x] Checkbox
- [x] Input variations and state
- [x] Radio
- [x] Select
- [x] Slider
- [x] Switch
```

### Molecules

Molecules are the next-largest building block. Created by the joining of different atomic elements, molecules are complex by nature. Because they’re the product of various atoms, though, it’s possible to break them down, conceptually, into UI elements that are easier to digest. Examples of web design molecules include the things that become the backbone of the larger design system, such as form labels or input field.

```[tasklist]
### Navigation - components used to navigate to other pages. Inner or external to ethereum.org.
- [ ] https://github.com/ethereum/ethereum-org-website/issues/14152
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13044
- [x] Breadcrumbs
-  [ ] https://github.com/ethereum/ethereum-org-website/issues/13733
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13878
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13879
- [ ] https://github.com/ethereum/ethereum-org-website/issues/14595
- [ ] DocsNav
- [ ] LeftNavBar
- [x] Links
- [ ] MergeArticleList
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13210
- [x] Sidenav #13063 @pettinarip
```

```[tasklist]
### Display content - components used to show data/information primary
- [ ] ActionCard
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13045
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13046
- [ ] BeaconChainActions
- [ ] BoxGrid
- [ ] BugBountyCards
- [ ] Callout
- [ ] Card
- [ ] CardList
- [ ] Codeblock
- [ ] CommunityEvents
- [ ] ContributorsQuizBanner
- [ ] CopyToClipboard
- [ ] DataProductCard
- [ ] EnergyConsumptionChart
- [ ] EnvWarningBanner
- [ ] EventCard
- [ ] FeedbackCard
- [ ] FileContributors
- [ ] GitStars
- [ ] HorizontalCard
- [ ] InfoBanner
- [ ] IssuesList
- [ ] Layer2ProductCard
- [ ] Leaderboard
- [ ] LearningToolsCardGrid
- [x] GlossaryDefinition
- [ ] NetworkUpgradeSummary
- [ ] Layer2Onboard
- [ ] MarkdownImage
- [ ] MatomoOptOut
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13047
- [ ] OrderedList
- [ ] ProductCard
- [ ] ProductDisclaimer
- [ ] ProductList
- [ ] RandomAppList
- [ ] Progress
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13048
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13211
- [ ] RoadmapImageContent
- [ ] SocialListItem
- [ ] StablecoinBoxGrid
- [ ] StablecoinsTable
- [x] Stat
- [ ] StateErrorMessage
- [x] Tables
- [x] Tags
- [ ] TitleCardList
- [ ] TranslationBanner
- [ ] TranslationBannerLegal
- [ ] TranslationLeaderboard
- [ ] TutorialMetadata
- [ ] TutorialTags
- [ ] UpgradeStatus
- [ ] UpgradeTableOfContents
- [ ] Youtube
```

```[tasklist]
### Disclosure content - components used to hide and show content useing interactive functions
- [x] Accordion
- [ ] ButtonDropdown
- [ ] StablecoinAccordion
- [x] Switch
- [ ] Tabs
```

```[tasklist]
### Overlay content - components used on top from the main page
- [ ] CodeModal
- [ ] ExpandableCard
- [ ] ExpandableInfo
- [x] FeedbackWidget
- [x] GlossaryTooltip
- [x] Modal
- [ ] Popover
- [x] Tooltip
- [ ] TooltipLink
```

```[tasklist]
### Action feedback - components used to show feedback of a user action
- [x] Alerts
```

### Organisms

Atoms combine to form molecules, and groups of molecules form organisms. In the world of Atomic Design, organisms are the UI elements that shape both the appearance and functionality of a website. They’re also the elements that start to impact user interface. The way a developer arranges molecules informs the site experience and the complexity of the finished product. Examples of organisms include logos, search fields, and main navigation which together may form a header organism.

```[tasklist]
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13050
- [ ] Footer
- [ ] MainArticle
- [x] Hero
- [ ] https://github.com/ethereum/ethereum-org-website/pull/13055
```

```[tasklist]
### Snippets - composed components has use cases or references to display the same type of data
-  [ ] https://github.com/ethereum/ethereum-org-website/issues/13052
```

### Templates

At this phase of the Atomic Design process, we start to break with the chemistry analogy and shift back into the lexicon of front-end development, as a whole. Templates, then, are “organisms” strung together at the page-level or beyond. Templates, online atoms, organisms, and molecules, are highly concrete. They provide a fixed context for the more abstract pieces to fit and are responsible for pulling the site together into something resembling its final form. An HTML wireframe is an excellent example of a template.

```[tasklist]
### Templates - base pages to be used in creation of new content. They incorporate all of the components mandatory for the page
- [ ] Docs
- [ ] Roadmap [Blocked on refactor]
- [x] RootLayout (BaseLayout)
- [ ] Staking [Blocked on refactor]
- [ ] Static
- [ ] Tutorial
- [ ] Upgrade [Blocked on refactor]
- [ ] Usecases [Blocked on refactor]
```

### Pages

Pages, finally, are the final element of Atomic Design. According to Frost himself, pages are the specific instances of templates. Pages are the most tangible element of all and are the places users spend most of their time. They’re also one of the most essential phases of the Atomic Design process since the final iteration of pages is where developers get to see whether the entire design system is effective or not. In short, the final appearance of the pages dictates whether the product design is ready to launch, or whether the developer needs to loop back and make changes to earlier UI design elements.

```[tasklist]
### Special cases - Pages that are unique and require custom made components
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13053
- [ ] https://github.com/ethereum/ethereum-org-website/issues/13054
```

```[tasklist]
### Pages - List of pages with final content to showcase and inspire
- [ ] / (homepage)
- [ ] /404
- [ ] /assets
- [ ] /bug-bounty
- [ ] /community
- [ ] /contributing/translation-program
- [ ] /contributing/translation-program/acknowledgements
- [ ] /contributing/translation-program/contributors
- [ ] /dapps
- [ ] /developers
- [ ] /developers/learning-tools
- [ ] /developers/local-environment
- [ ] /developers/tutorials
- [ ] /eth
- [ ] /gas
- [ ] /get-eth
- [ ] /layer-2
- [ ] /learn
- [ ] /quizzes
- [ ] /roadmap
- [ ] /roadmap/vision
- [ ] /run-a-node
- [ ] /stablecoins
- [ ] /staking
- [ ] /staking/deposit-contract
- [ ] /wallets
- [ ] /wallets/find-wallet
- [ ] /what-is-ethereum
```

-----

## How to contribute
If you’d like to help with adding stories for components, please follow these steps:

1. Read the [storybook documentation](https://github.com/ethereum/ethereum-org-website/blob/dev/docs/applying-storybook.md) for the project
2. Leave a comment here asking which component you would ke to work out. We will be going from the top of the list to bottom (Atoms to Pages).
3. We assign you to the file (by adding your handle next to the file name in the list).
    - Read and follow our storybook implementation guide for some tips & guidance.
    - **If you were assigned to multiple files** then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
4. Once you finish it (PR merged), we’ll mark it as done.
5. Repeat!

epic 💪

hacktoberfest

hacktoberfest-beginner

Implementation of visual testing epic

### Describe the desired feature

For long call sequences, re-executing reverted transactions probably adds more overhead than it is worth, considering it is unlikely that tx level mutations will make the majority of them successful e.g. 99% of a call sequence with a length of 500 is failing. It would make more sense to shrink the call sequence some portion of the time to only include successful transaction and insert/extend 

enhancement

echidna

Haskell

add call sequence mutation that removes all reverting txs in the sequences

### Describe the bug

If you delete imports, Nuxt auto-imports do not work: 

for example works: 

```vue
<script setup lang="ts">
import { useAccount, useDisconnect } from '@wagmi/vue';

const { address, chainId, status } = useAccount();
const { disconnect } = useDisconnect();
</script>
```


not working: 

```vue
<script setup lang="ts">
const { address, chainId, status } = useAccount();
const { disconnect } = useDisconnect();
</script>
```

<img width="454" alt="Screenshot 2024-05-23 at 16 06 16" src="https://github.com/wevm/wagmi/assets/12596485/e6b52670-9fa8-4925-a528-760ddb2985e7">


```log
Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/eventemitter3@5.0.1/node_modules/eventemitter3/index.js?v=2c858a2b' 
does not provide an export named 'default' (at index.mjs:1:8)
```



### Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/reslear/nuxt-wagmi-starter

### Steps To Reproduce

> stackblitz also not working because metask sdk issues.

1. clone repo [github.com/reslear/nuxt-wagmi-starter](https://github.com/reslear/nuxt-wagmi-starter)

2. install and run dev:

```
pnpm install
pnpm dev
```

4. go to `components/Account.vue` and comment import line: 

<img width="519" alt="Screenshot 2024-05-23 at 16 09 31" src="https://github.com/wevm/wagmi/assets/12596485/d66f1d3b-4172-4bc8-998f-a2ee823d92d9">

5. see result 


### Wagmi Version

latest

### Viem Version

latest

### TypeScript Version

latest

### Check existing issues

- [X] I checked there isn't [already an issue](https://github.com/wevm/wagmi/issues) for the bug I encountered.

### Anything else?

_No response_

Good First Issue

wagmi

TypeScript

autoimport Nuxt eventemitter3 does not provide an export named 'default'

iCandy is running their own rollup that uses the same underlying infrastructure as zkSync hence contracts are compiled the same way. They have asked for support in our Remix Plugin and I think the only thing that needs to be implemented is a whitelist to support other RPCs and networks within Metamask.
Their network details:
name: zkCandy Sepolia Testnet
rpc url: https://sepolia.rpc.zkcandy.io/
chain id: 302
token: ETH
explorer: https://sepolia.explorer.zkcandy.io/

question

zksync-remix-plugin

Add ability to connect to other roll-ups using zkSync infra

We should add a check in CI to ensure that within a task folder, the numbering of tasks is increasing and does not overlap.

ie. #200 currently introduces a new dir `tasks/sep/009-fpac-upgrade` which is incorrect since there is already a `tasks/sep/009-presigned-pause`. 

This happens easily due to race conditions between new tasks, so we should automatically check for it.

superchain-ops

Solidity

Enforce folder numbering

https://clucene.sourceforge.net/download.shtml#2_3_2

https://github.com/quickwit-oss/tantivy

priority-medium

indexer

multiplier

Investigate using CLucene / Tantivy instead of SQLite's FTS for symbol search

<img width="1219" alt="image" src="https://github.com/trailofbits/multiplier/assets/43664/0f6bcdff-31cd-4ffd-abfb-32fb560206a6">

There is probably a lot more, causing database bloat.

priority-high

Investigate multiple versions of classes/methods in indexed LLVM

We have a race condition. If this measurement is called before `Db` is started, the measurement fails with the message:
```
Error when calling MFA defined by measurement: 'Elixir.LambdaEthereumConsensus.Telemetry' db_size []
Class=exit
Reason={noproc,{'Elixir.GenServer',call,
                                   ['Elixir.LambdaEthereumConsensus.Store.Db',
                                    get_ref,5000]}}
```

Elixir implementation of an Ethereum consensus client, which offers high reliance & fault tolerance

lambda_ethereum_consensus

Elixir

Delay DB size metric until `Db` is started

Hello,

Thanks for publishing this project; it is great.

I would like to ask if we can sort the issues by name. 

enhancement :sparkles:

priority:low

Create code bookmarks and code highlights with a click.

vscode-weaudit

[Feature Request] Sort issues by name

![image](https://github.com/trailofbits/multiplier/assets/43664/ae01a6b5-7ac4-45b7-9038-1d002173e0e2)


Fix parent tracking of lambdas

We should fetch a block from each one, and then compare them, failing if they aren't equal.

Allow multiple checkpoint sync urls

### Which components does the task require to be changed? (think hard pls)

snforge

### Description

There are no tests for most cheatcodes like `start_cheat_account_contract_address` etc.

snforge

maintenance

Blazing fast toolkit for developing Starknet contracts.

starknet-foundry

Rust

Add tests for new cheatcodes

Hi,
Hope your doing well.

I recently experienced my first mistake using weAudit, I deleted the wrong finding and it was impossible to retrieve what I wrote…

Now I commit the .weaudit file in my local git to prevent this kind of problem. But a backup and a CTRL-Z command would be very helpful!

Regards,

Feature request: Implement a CTRL-Z / backup of notes and findings

https://www.notion.so/fuellabs/RPC-Consistency-Proposal-c8442b5d8f4c492abab08449cb43b4f2?pvs=4

Rust full node implementation of the Fuel v2 protocol.

fuel-core

RPC Consistency Proposal

Currently, the FPC repo has a scorecard of 4.3 (see https://scorecard.dev/viewer/?uri=github.com/hyperledger/fabric-private-chaincode)

<img src="https://api.scorecard.dev/projects/github.com/hyperledger/fabric-private-chaincode/badge">

This issue is about improving our scorecard value by applying best practices as suggested by [OpenSSF](https://github.com/ossf/scorecard)

TODOS:
- [x] Dangerous-Workflows
- [x] Token-Permissions #764
- [ ] Vulnerabilities #759
- [ ] Maintained
- [ ] Code-Review
- [ ] Binary-Artifacts
- [ ] Fuzzing (TBD)
- [ ] SAST
- [ ] Pinned-Dependencies
- [x] Security-Policy
- [ ] CII-Best-Practices
- [x] License
- [ ] Branch-Protection
- [ ] Packaging
- [ ] Signed-Releases

FPC enables Confidential Chaincode Execution for Hyperledger Fabric using Intel SGX.

fabric-private-chaincode

Improve OpenSSF Scorecard report


Report from user from Loom: https://www.loom.com/share/7da7aae4aa9e4a9cb48965e73e61f1a6?sid=ef95c42e-f387-48c2-84d6-4a0d68334082

MACI Platform - Voting and Funding using MACI

Contribute to open-source Web3 projects

✨ Ethereum.org

✨ Privacy & Scaling Explorations

✨ Solidity