scaffold-eth / eth-ui

🖇 React library of commonly used Ethereum hooks

🏗 Scaffold-ETH

🚨🚨 This repository has been archived and is now read-only 🚨🚨

You are still welcome to fork and use as a template but no more changes will be made to this repository.

🎖 Scaffold-ETH 2 is the latest version, we recommend you fork: https://github.com/scaffold-eth/scaffold-eth-2

---

everything you need to build on Ethereum! 🚀

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

🏄‍♂️ Quick Start

Prerequisites: Node (v18 LTS) plus Yarn (v1.x) and Git

🚨 If you are using a version < v18 you will need to remove openssl-legacy-provider from the start script in package.json

1️⃣ clone/fork 🏗 scaffold-eth:

git clone https://github.com/scaffold-eth/scaffold-eth.git

2️⃣ install and start your 👷‍ Hardhat chain:

cd scaffold-eth
yarn install
yarn chain

3️⃣ in a second terminal window, start your 📱 frontend:

🚨 if your contracts are not deployed to localhost, you will need to update the default network in App.jsx to match your default network in hardhat-config.js.

cd scaffold-eth
yarn start

4️⃣ in a third terminal window, 🛰 deploy your contract:

🚨 if you are not deploying to localhost, you will need to run yarn generate first and then fund the deployer account. To view account balances, run yarn account. You will also need to update hardhat-config.js with the correct default network.

cd scaffold-eth
yarn deploy

🔏 Edit your smart contract YourContract.sol in packages/hardhat/contracts

📝 Edit your frontend App.jsx in packages/react-app/src

💼 Edit your deployment scripts in packages/hardhat/deploy

📱 Open http://localhost:3000 to see the app

🚨📡 To deploy to a public domain, use yarn surge. You will need to have a surge account and have the surge CLI installed. There is also the option to deploy to IPFS using yarn ipfs and yarn s3 to deploy to an AWS bucket 🪣 There are scripts in the packages/react-app/src/scripts folder to help with this.`

📚 Documentation

Documentation, tutorials, challenges, and many more resources, visit: docs.scaffoldeth.io

🍦 Other Flavors

• scaffold-eth-typescript
• scaffold-eth-tailwind
• scaffold-nextjs
• scaffold-chakra
• Scaffold-ETH x Buildbear
• eth-hooks
• eth-components
• scaffold-eth-expo
• scaffold-eth-truffle

🔭 Learning Solidity

📕 Read the docs: https://docs.soliditylang.org

📚 Go through each topic from solidity by example editing YourContract.sol in 🏗 scaffold-eth

• Primitive Data Types
• Mappings
• Structs
• Modifiers
• Events
• Inheritance
• Payable
• Fallback

📧 Learn the Solidity globals and units

🛠 Buidl

Check out all the active branches, open issues, and join/fund the 🏰 BuidlGuidl!

• 🚤 Follow the full Ethereum Speed Run

• 🎟 Create your first NFT

• 🥩 Build a staking smart contract

• 🏵 Deploy a token and vendor

• 🎫 Extend the NFT example to make a "buyer mints" marketplace

• 🎲 Learn about commit/reveal

• ✍️ Learn how ecrecover works

• 👩‍👩‍👧‍👧 Build a multi-sig that uses off-chain signatures

• ⏳ Extend the multi-sig to stream ETH

• ⚖️ Learn how a simple DEX works

• 🦍 Ape into learning!

💌 P.S.

🌍 You need an RPC key for testnets and production deployments, create an Alchemy account and replace the value of ALCHEMY_KEY = xxx in packages/react-app/src/constants.js with your new key.

📣 Make sure you update the InfuraID before you go to production. Huge thanks to Infura for our special account that fields 7m req/day!

🏃💨 Speedrun Ethereum

Register as a builder here and start on some of the challenges and build a portfolio.

💬 Support Chat

Join the telegram support chat 💬 or buidlguidl discord to ask questions and find others building with 🏗 scaffold-eth!

---

🙏 Please check out our Gitcoin grant too!

Automated with Gitpod

eth-ui's Issues

useEventListener needs to be updated as it uses a deprecated method

• resetEventsBlock is deprecated
• change logic to properly use contract.queryFilter( event [ , fromBlockOrBlockHash [ , toBlock ] ) in addNewEvent
• make addNewEvent logic to just get events using the above qureyFunction
• cache in state if there are performance issues

related test ticket should be done after

• #59

cant install using node 12

plz make this repo include the stable node versions.
this repo is not useful if only include the latest node version. it has to be inclusive to run on stable node versions.

https://nodejs.org/en/about/releases/
Release | Status | Codename | Initial Release | Active LTS Start | Maintenance LTS Start | End-of-life
v12 | Maintenance LTS | Erbium | 2019-04-23 | 2019-10-21 | 2020-11-30 | 2022-04-30
v14 | Active LTS | Fermium | 2020-04-21 | 2020-10-27 | 2021-10-19 | 2023-04-30
v16 | Current |   | 2021-04-20 | 2021-10-26 | 2022-10-18 | 2024-04-30
v17 | Pending |   | 2021-10-19 |   | 2022-04-01 | 2022-06-01
v18 | Pending |   | 2022-04-19 | 2022-10-25 | 2023-10-18 | 2025-04-30

https://github.com/scaffold-eth/eth-hooks/blob/0f9ed3aaed0960eb74c80eb2cdb62d8d3ecdfcc3/package.json#L9

Is this meant to be used in production?

linear test issue [SET-12]

Automatically created from Linear (#12)

via LinearSync

Add tests for useBlockNumberContext

Add ENS name resolution hooks

We need a hook which takes an address and spits out the corresponding ENS name (and another for vice versa)

Inspiration: https://github.com/TomAFrench/NoteStream/blob/dev/packages/react-app/src/hooks/useENSName.ts

unexpected "export"

using with nextjs typescript, when importing any hook from the library, throws error when reading "export * from './useBlockNumber'; at index.js.

Is the best way to contribute here adding a github action that publishes a package to npm on successful push or pr to main that works with the tests and this scenario?

useProviderAndSigner doesn't work and the current design doesn't fit a library hook

look into bugs:

• currently, the hook does a lot and is very application-specific.
• change it so that it doesn't differentiate injecteProvider vs localProvider
• change the typescript app to reflect these changes
• fix the design of useBurner

See: https://github.com/orgs/scaffold-eth/projects/2#card-69736781

which lock file should we use? yarn.lock or package-lock.json?

We should choose only one of them and remove the other

v4 tests: useTokenBalance

• should be similar to the existing useBalance tests done in #31

🗺 Epic: eth-hooks v3 initial project

Epic for v3 eth-hooks

See scaffold-eth/scaffold-eth-typescript#23 for context

• #25
• #29
• #33
• #31
• #35
• #37
• #38
• #39
• #47
• #48
• #53

Add tests for useNonce, useTimestamp, useUserAddress

Add tests for useContractReader

create github actions to run tests

1. create github action to run the new tests
2. prevent direct commits to master
3. create develop branch for staged releases

Export test-utils so it can be used by library consumers

test issue [SET-11]

eth-hooks v2: add docs to gitbook

eth-hooks v3-beta add docs to gitbook

Add typescript sourcemaps to output of eth-hooks

Create an action to automatically merge develop into gitbook and run yarn docs:ts

Release v3 of eth-hooks from beta

release v3

• #91

Research testing with waffle/hardhat/jest.

Write 1-2 tests for hooks that will serve as template for future testing

• useBlockNumber

linear test issue 2 [SET-14]

test stuff

no date &

      "**/node_modules/": true,
      "**/obj": true,
      "node_modules": true,
      "node_modules/*/**": true,
      "**/node_modules": true,

---

Automatically created from Linear (#14)

via LinearSync

Use esbuild as a bundler

use esbuild as a bundler instead of typescript.

• currently we use typescript and some copy paste shx commands to build the library.
• this will be more robust with esbuild

https://medium.com/geekculture/build-a-library-with-esbuild-23235712f3c
https://jamesthom.as/2021/05/setting-up-esbuild-for-typescript-libraries/
https://souporserious.com/bundling-typescript-with-esbuild-for-npm/

Update and cleanup eth-hooks types

• update the eth hooks type with stricter typescript typing
• check compatibility with hooks in main repo

Ethers Context bugbash 🐛 (eth-hooks v3)

Add test for useEventListener

• should be done after #67

Add tests for useOnRepetition

test issue 2

🧪 Tests: Add activator and fake connector to MockProvider

Create a harness with for react-hook-testing library to be able to test the hooks with context

• requires update and changes due to context v3
• update the existing tests for context

Add tests for EthersAppContext

Replace parameter provider with context

https://github.com/orgs/scaffold-eth/projects/2#card-69883528

Add context to eth-hooks v3, eth-components v2 and scaffold-eth-typescript

Overview

• This change adds concept of context using web3-react
• Creates a connector for web3modal to connect it with web3-react
• Creates a connector for web3modal that allows it to use StaticJsonUrlRpc so localproviders and burner wallets work
• replace provider that's being passed around in hooks and components with a web3react based context

App changes

• All components, hooks and typescript app now use context, EthersAppContext
• There is a BlockNumberContext as part of EthersAppContext that any hook can subscribe to easily. useOnBlock or usePoller are NOT required
• Split the app out into chunks
• Fixed issues with login and log out and made it more seemless
• Some UI changes

PRs

• scaffold-eth/scaffold-eth-typescript#6
• scaffold-eth/eth-components#11
• #40

eth-hooks v3-beta update documentation and comments

Convert the repo to use typedoc or tsdocs to generate documentation.
update documentaion

Add tests for useContractLoader

update docs for v3

• related to changes in #48

v2 useOnRepetition doesn't reset on args changes

related to #42 but gonna change the logic. @azf20

Tied to balance issues in scaffold-eth: https://github.com/scaffold-eth/scaffold-eth/issues/471 @codenamejason

Branch changes: master -> release, develop -> next

it might make it easier for people to understand the purpose of the main branches.

• rename branches and push
• change github actions
• change branch protection
• delete old branches

🗺 Epic: unit tests for hooks in v3

We want to write tests for all the hooks to increase the reliability of the library and app

Setup hardhat and environment for tests

• #25
• #33
• #57
• #68

Write tests for the new context

• #63
• #61

Write tests for the hooks

• #60
• #59
• #76
• #75
• #74
• #73

Create an action to autmatically build master and publish npm:latest version

Revisit polling frequency

A lot of the polling frequencies are much higher than necessary for a mainnet application. For example, we test for new blocks roughly once every 2 seconds whereas the typical blocktime is 15 seconds.

There's also the question of does a user need their balance being updated every second? There are savings to be made here without impairing UX.

Higher frequencies may be desirable for local chains but we should ensure that the default works well on mainnet

useEventListener returns repeated events in Scaffold-Eth

Sometimes useEventListener works as expected and returns the right event logs, with no duplicates. However, other times, it completely fails to do its job and returns many copies of the same log, so that there are 3x or 4x as many logs as expected.

useEventListener call back isn't correct

See: https://t.me/c/1551360911/1009 @azf20

Currently we are assuming callback args events Event[]
The actual signature is export type Listener = (...args: Array<any>) => void;

• the last of this array is the actual event

The following is the fix

const addNewEvent = useCallback((...newEvent) => {
        if (newEvent != null && newEvent.length > 0) {
            const _event = newEvent[newEvent.length - 1]
            const newMap = new Map([[getEventKey(_event), _event]]);
            setEventMap((oldMap) => new Map([...oldMap, ...newMap]));
        }
    }, [setEventMap]);

create a useWeb3Modal hook that facilitates using the web3modal easily

Create an action to automatically build develop and publish npm:next version

eth-hooks testing: useBalance, useBlockNumber

Update documentation for eth-hooks

Update jsdoc documentation for eth-hooks. export jsdoc documentation using jsdoc2md.

Add tests for EthersModalConnector

Investigating Replacing useEffect/useState combination with a useReducer in hooks

For example using contracts:

• loading contracts as need via context

• a reducer/functtion

• see convo: https://t.me/c/1551360911/811

• see example: https://github.com/moonshotcollective/tip.party/blob/develop/packages/react-app/src/hooks/TokenImport.js

• Its using the pattern from useState for async updates

Related to:

• #93

EthersModalConnector: Add an inconsistent state error

EthersModalConnector needs to throw errors when the state is inconsistant without breaking the app.

leadTrigger on useOnRepetition makes a lot of RPC calls

Testing eth-hooks as part of the stage branch of scaffold-eth, there are lots of RPC calls.

This appears to be related to the leadTrigger in useOnRepetition (link). This is executed multiple times, rather than just once. I think using callFunctionWithArgs as a useEffect dependency might be leading to the problem.

I tried a couple of things - removing callFunctionWithArgs as a dependency here worked. I was also able to patch this in my scaffold-eth branch by introducing a "firstCall" useRef which is set to true by default, is required to execute the leadTrigger function, and is set to false when it has been executed. This significantly reduced the polling intensity

Something like:

import { useCallback, useEffect, useRef } from 'react';
...
export const useOnRepetition = (callback, options, ...args) => {
const firstCall = useRef(true)
...
if (options.leadTrigger && firstCall.current) {
            console.log('got that lead trigger')
            firstCall.current = false;
            callFunctionWithArgs();

There might be a more elegant way to solve this