scaffold-eth / eth-components Goto Github PK

View Code? Open in Web Editor NEW

122.0 122.0 27.0 5.09 MB

📦 React library of commonly used Ethereum components

TypeScript 98.75% JavaScript 0.80% Shell 0.09% CSS 0.37%

ethereum react solidity typescript web3

eth-components's Introduction

🏗 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

🔭 Learning Solidity

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

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

📧 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

💬 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-components's People

Contributors

Stargazers

Watchers

eth-components's Issues

Account: Improve connect button

The connect button needs:

a longer is loading state
to be blocked when web3modal is open
to prevent people when clicking on it when web3modal is open or page is loading

Update eth-components with changes from eth-hook v4

see related case: scaffold-eth/eth-ui#96

Add latest changes from scaffold-eth components to eth-components

Transaction error message should be human readable for some circumstances

The error messages given can be difficult to understand, especially when first getting started.

Image below provided from Austin

Update the docs and comments and use markdown

see also #20
update documentation with markdown api/docs similar to scaffold-eth/eth-ui#48

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
see eth-hooks and do that first scaffold-eth/eth-ui#39 (comment)

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/

Component 'Account' does not show web3modal dialog when clicking 'connect' button

Hello there

I am currently building a simple poc app to demonstrate chain access from a webapp. The app is based on next with react/antd and i want to make use of eth-hooks and eth-components to use standard components for display.
I have build a simple page that should use the Account component to handle the wallet connection and show the current account details.
I have implemented the poc in the repository https://github.com/doerfli/eth-components-web3modallogin
The page in question is the index (https://github.com/doerfli/eth-components-web3modallogin/blob/main/pages/index.tsx) using the ShowAccount component (https://github.com/doerfli/eth-components-web3modallogin/blob/main/components/show_account.tsx) to display the data. The configuration for the EthersModalConnector can be found in https://github.com/doerfli/eth-components-web3modallogin/blob/main/utils/appConfig.ts

Now when i run the application, the following problem appears

on the desktop it will automatically connect to my Metamask without showing any web3modal dialog. But at least the connection works and i can call be contract in the Counter react component.
on the mobile it will show a grey opaque modal without any content.

I would like to have a web3modal dialog shown in both situations so the user can choose his wallet as well as the chain to connect to.

Can you please help me and figure out what i am doing wrong? I somehow have the feeling that for some reason the web3modal component is skipped when connecting.

Thanks,
Marc

fixes for esm

should be fully compatible with esm
should work with nextjs

Address component icon should be positioned next to text

The icon for the Address component doesn't show next to the address text:

Local faucet doesn't work

Trying to send eth using the local faucet gives an invalid address error. I can open the wallet and send eth that way though.

Seems like it's not parsing the address correctly, because when I paste it in, it doesn't show the little address icon:

Broken layout and ether input in v3.0.9

When running the default scaffold-eth/typescript app, which uses eth-components v3.0.9

some of the layout is misaligned
the ether input has a faulty check and results in not displaying the switch

I have done the changes in my factory setup but I guess most users would have to do them also.

The result

⚠️ I don't mean the changes in background color or font, but strictly the above mentioned layout issues

I could make the fixes myself and PR

Ethers context bugbash 🐛 (eth-components v2)

Add callbacks to login and logout

see scaffold-eth/eth-ui#207

Update eth-components docs to typedoc in v2

Module not found: Can't resolve 'antd'

Looks like using this library by itself doesn't work.

In my package.json I have:

  "dependencies": {
     // ....
    "eth-components": "^3.0.39",
  },

And I'm using the Address component:

<Address address={'0xblablah'}/>

And I'm getting the following error:

./node_modules/eth-components/chunk-DDPV2RQ2.js:1:103
Module not found: Can't resolve 'antd'

Import trace for requested module:
./node_modules/eth-components/ant/index.js
./components/Addresses.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found

Move the typescript components from scaffold-eth typescript branch
Setup the project structure for typescript (mimic eth-hooks)

  "dependencies": {
     // ....
    "eth-components": "^3.0.39",
  },