{"id":19163209,"url":"https://github.com/programmer-ke/scaffold-eth-solidity-by-example","last_synced_at":"2025-09-02T04:33:43.270Z","repository":{"id":190181820,"uuid":"681619466","full_name":"programmer-ke/scaffold-eth-solidity-by-example","owner":"programmer-ke","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-23T13:18:48.000Z","size":2126,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-03T21:43:22.414Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/programmer-ke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-22T11:59:52.000Z","updated_at":"2023-08-22T12:04:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"5d4af8b7-1f92-4ada-a2f1-3487e735a793","html_url":"https://github.com/programmer-ke/scaffold-eth-solidity-by-example","commit_stats":null,"previous_names":["programmer-ke/scaffold-eth-solidity-by-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programmer-ke%2Fscaffold-eth-solidity-by-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programmer-ke%2Fscaffold-eth-solidity-by-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programmer-ke%2Fscaffold-eth-solidity-by-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programmer-ke%2Fscaffold-eth-solidity-by-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/programmer-ke","download_url":"https://codeload.github.com/programmer-ke/scaffold-eth-solidity-by-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240245887,"owners_count":19771029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T09:14:29.196Z","updated_at":"2025-02-22T22:42:35.414Z","avatar_url":"https://github.com/programmer-ke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🏗 Scaffold-ETH 2\n\n🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.\n\n⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, and Typescript.\n\n- ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.\n- 🔥 **Burner Wallet \u0026 Local Faucet**: Quickly test your application with a burner wallet and local faucet.\n- 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.\n\n## Contents\n\n- [Requirements](#requirements)\n- [Quickstart](#quickstart)\n- [Deploying your Smart Contracts to a Live Network](#deploying-your-smart-contracts-to-a-live-network)\n- [Deploying your NextJS App](#deploying-your-nextjs-app)\n  - [Scaffold App Configuration](#scaffold-app-configuration)\n- [Interacting with your Smart Contracts: SE-2 Custom Hooks](#interacting-with-your-smart-contracts-se-2-custom-hooks)\n- [Disabling Type \u0026 Linting Error Checks](#disabling-type-and-linting-error-checks)\n  - [Disabling commit checks](#disabling-commit-checks)\n  - [Deploying to Vercel without any checks](#deploying-to-vercel-without-any-checks)\n  - [Disabling Github Workflow](#disabling-github-workflow)\n- [Contributing to Scaffold-ETH 2](#contributing-to-scaffold-eth-2)\n\n## Requirements\n\nBefore you begin, you need to install the following tools:\n\n- [Node (v18 LTS)](https://nodejs.org/en/download/)\n- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))\n- [Git](https://git-scm.com/downloads)\n\n## Quickstart\n\nTo get started with Scaffold-ETH 2, follow the steps below:\n\n1. Clone this repo \u0026 install dependencies\n\n```\ngit clone https://github.com/scaffold-eth/scaffold-eth-2.git\ncd scaffold-eth-2\nyarn install\n```\n\n2. Run a local network in the first terminal:\n\n```\nyarn chain\n```\n\nThis command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in `hardhat.config.ts`.\n\n3. On a second terminal, deploy the test contract:\n\n```\nyarn deploy\n```\n\nThis command deploys a test smart contract to the local network. The contract is located in `packages/hardhat/contracts` and can be modified to suit your needs. The `yarn deploy` command uses the deploy script located in `packages/hardhat/deploy` to deploy the contract to the network. You can also customize the deploy script.\n\n4. On a third terminal, start your NextJS app:\n\n```\nyarn start\n```\n\nVisit your app on: `http://localhost:3000`. You can interact with your smart contract using the contract component or the example ui in the frontend. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.\n\nRun smart contract test with `yarn hardhat:test`\n\n- Edit your smart contract `YourContract.sol` in `packages/hardhat/contracts`\n- Edit your frontend in `packages/nextjs/pages`\n- Edit your deployment scripts in `packages/hardhat/deploy`\n\n## Deploying your Smart Contracts to a Live Network\n\nOnce you are ready to deploy your smart contracts, there are a few things you need to adjust.\n\n1. Select the network\n\nBy default, `yarn deploy` will deploy the contract to the local network. You can change the defaultNetwork in `packages/hardhat/hardhat.config.ts.` You could also simply run `yarn deploy --network target_network` to deploy to another network.\n\nCheck the `hardhat.config.ts` for the networks that are pre-configured. You can also add other network settings to the `hardhat.config.ts` file. Here are the [Alchemy docs](https://docs.alchemy.com/docs/how-to-add-alchemy-rpc-endpoints-to-metamask) for information on specific networks.\n\nExample: To deploy the contract to the Sepolia network, run the command below:\n\n```\nyarn deploy --network sepolia\n```\n\n2. Generate a new account or add one to deploy the contract(s) from. Additionally you will need to add your Alchemy API key. Rename `.env.example` to `.env` and fill the required keys.\n\n```\nALCHEMY_API_KEY=\"\",\nDEPLOYER_PRIVATE_KEY=\"\"\n```\n\nThe deployer account is the account that will deploy your contracts. Additionally, the deployer account will be used to execute any function calls that are part of your deployment script.\n\nYou can generate a random account / private key with `yarn generate` or add the private key of your crypto wallet. `yarn generate` will create a random account and add the DEPLOYER_PRIVATE_KEY to the .env file. You can check the generated account with `yarn account`.\n\n3. Deploy your smart contract(s)\n\nRun the command below to deploy the smart contract to the target network. Make sure to have some funds in your deployer account to pay for the transaction.\n\n```\nyarn deploy --network network_name\n```\n\n4. Verify your smart contract\n\nYou can verify your smart contract on Etherscan by running:\n\n```\nyarn verify --network network_name\n```\n\n## Deploying your NextJS App\n\n**Hint**: We recommend connecting your GitHub repo to Vercel (through the Vercel UI) so it gets automatically deployed when pushing to `main`.\n\nIf you want to deploy directly from the CLI, run `yarn vercel` and follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.\n\nIf you want to redeploy to the same production URL you can run `yarn vercel --prod`. If you omit the `--prod` flag it will deploy it to a preview/test URL.\n\n**Make sure to check the values of your Scaffold Configuration before deploying your NextJS App.**\n\n### Scaffold App Configuration\n\nYou can configure different settings for your dapp at `packages/nextjs/scaffold.config.ts`.\n\n```ts\nexport type ScaffoldConfig = {\n  targetNetwork: chains.Chain;\n  pollingInterval: number;\n  alchemyApiKey: string;\n  walletConnectProjectId: string;\n  onlyLocalBurnerWallet: boolean;\n  walletAutoConnect: boolean;\n  // your dapp custom config, eg:\n  // tokenIcon : string;\n};\n```\n\nThe configuration parameters are described below, make sure to update the values according to your needs:\n\n- **targetNetwork**  \n  Sets the blockchain network where your dapp is deployed. Use values from `wagmi/chains`.\n\n- **pollingInterval**  \n  The interval in milliseconds at which your front-end application polls the RPC servers for fresh data. _Note that this setting does not affect the local network._\n\n- **alchemyApiKey**  \n  Default Alchemy API key from Scaffold ETH 2 for local testing purposes.  \n  It's recommended to obtain your own API key from the [Alchemy Dashboard](https://dashboard.alchemyapi.io/) and store it in an environment variable: `NEXT_PUBLIC_ALCHEMY_API_KEY` at `\\packages\\nextjs\\.env.local` file.\n\n- **walletConnectProjectId**  \n  WalletConnect's default project ID from Scaffold ETH 2 for local testing purposes.\n  It's recommended to obtain your own project ID from the [WalletConnect website](https://cloud.walletconnect.com) and store it in an environment variable: `NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID` at `\\packages\\nextjs\\.env.local` file.\n\n- **onlyLocalBurnerWallet**  \n  Controls the networks where the Burner Wallet feature is available. This feature provides a lightweight wallet for users.\n\n  - `true` =\u003e Use Burner Wallet only on hardhat network.\n  - `false` =\u003e Use Burner Wallet on all networks.\n\n- **walletAutoConnect**  \n  Set it to `true` to activate automatic wallet connection behavior:\n  - If the user was connected into a wallet before, on page reload it reconnects automatically.\n  - If user is not connected to any wallet, on reload, it connects to the burner wallet if it is enabled for the current network. See `onlyLocalBurnerWallet`\n\nYou can extend this configuration file, adding new parameters that you need to use across your dapp **(make sure you update the above type `ScaffoldConfig`)**:\n\n```ts\n  tokenIcon: \"💎\",\n```\n\nTo use the values from the `ScaffoldConfig` in any other file of your application, you first need to import it in those files:\n\n```ts\nimport scaffoldConfig from \"~~/scaffold.config\";\n```\n\n## Interacting with your Smart Contracts: SE-2 Custom Hooks\n\nScaffold-ETH 2 provides a collection of custom React hooks designed to simplify interactions with your deployed smart contracts. These hooks are wrappers around `wagmi`, automatically loading the necessary contract ABI and address. They offer an easy-to-use interface for reading from, writing to, and monitoring events emitted by your smart contracts.\n\nTo help developers get started with smart contract interaction using Scaffold-ETH 2, we've provided the following custom hooks:\n\n- [useScaffoldContractRead](#usescaffoldcontractread): for reading public variables and getting data from read-only functions of your contract.\n- [useScaffoldContractWrite](#usescaffoldcontractwrite): for sending transactions to your contract to write data or perform an action.\n- [useScaffoldEventSubscriber](#usescaffoldeventsubscriber): for subscribing to your contract events and receiving real-time updates when events are emitted.\n- [useScaffoldEventHistory](#usescaffoldeventhistory): for retrieving historical event logs for your contract, providing past activity data.\n- [useDeployedContractInfo](#usedeployedcontractinfo): for fetching details from your contract, including the ABI and address.\n- [useScaffoldContract](#usescaffoldcontract): for obtaining a contract instance that lets you interact with the methods of your deployed smart contract.\n\nThese hooks offer a simplified and streamlined interface for interacting with your smart contracts. If you need to interact with external contracts, you can use `wagmi` directly, or add external contract data to your `deployedContracts.ts` file.\n\n### useScaffoldContractRead:\n\nUse this hook to read public variables and get data from read-only functions of your smart contract.\n\n```ts\nconst { data: totalCounter } = useScaffoldContractRead({\n  contractName: \"YourContract\",\n  functionName: \"getGreeting\",\n  args: [\"ARGUMENTS IF THE FUNCTION ACCEPTS ANY\"],\n});\n```\n\nThis example retrieves the data returned by the `getGreeting` function of the `YourContract` smart contract. If the function accepts any arguments, they can be passed in the args array. The retrieved data is stored in the `data` property of the returned object.\n\n### useScaffoldContractWrite:\n\nUse this hook to send a transaction to your smart contract to write data or perform an action.\n\n```ts\nconst { writeAsync, isLoading, isMining } = useScaffoldContractWrite({\n  contractName: \"YourContract\",\n  functionName: \"setGreeting\",\n  args: [\"The value to set\"],\n  // For payable functions, expressed in ETH\n  value: \"0.01\",\n  // The number of block confirmations to wait for before considering transaction to be confirmed (default : 1).\n  blockConfirmations: 1,\n  // The callback function to execute when the transaction is confirmed.\n  onBlockConfirmation: (txnReceipt) =\u003e {\n    console.log(\"Transaction blockHash\", txnReceipt.blockHash);\n  },\n});\n```\n\nTo send the transaction, you can call the `writeAsync` function returned by the hook. Here's an example usage:\n\n```ts\n\u003cbutton className=\"btn btn-primary\" onClick={() =\u003e writeAsync()}\u003e\n  Send TX\n\u003c/button\u003e\n```\n\nThis example sends a transaction to the `YourContract` smart contract to call the `setGreeting` function with the arguments passed in `args`. The `writeAsync` function sends the transaction to the smart contract, and the `isLoading` and `isMining` properties indicate whether the transaction is currently being processed by the network.\n\n### useScaffoldEventSubscriber:\n\nUse this hook to subscribe to events emitted by your smart contract, and receive real-time updates when these events are emitted.\n\n```ts\nuseScaffoldEventSubscriber({\n  contractName: \"YourContract\",\n  eventName: \"GreetingChange\",\n  // The listener function is called whenever a GreetingChange event is emitted by the contract.\n  // It receives the parameters emitted by the event, for this example: GreetingChange(address greetingSetter, string newGreeting, bool premium, uint256 value);\n  listener: (greetingSetter, newGreeting, premium, value) =\u003e {\n    console.log(greetingSetter, newGreeting, premium, value);\n  },\n});\n```\n\nThis example subscribes to the `GreetingChange` event emitted by the `YourContract` smart contract, and logs the parameters emitted by the event to the console whenever it is emitted. The `listener` function accepts the parameters emitted by the event, and can be customized according to your needs.\n\n### useScaffoldEventHistory:\n\nUse this hook to retrieve historical event logs for your smart contract, providing past activity data.\n\n```ts\nconst {\n  data: events,\n  isLoading: isLoadingEvents,\n  error: errorReadingEvents,\n  } = useScaffoldEventHistory({\n  contractName: \"YourContract\",\n  eventName: \"GreetingChange\",\n  // Specify the starting block number from which to read events, this is a bigint.\n  fromBlock: 31231n,\n  blockData: true,\n  // Apply filters to the event based on parameter names and values { [parameterName]: value },\n  filters: { premium: true }\n  // If set to true it will return the transaction data for each event (default: false),\n  transactionData: true,\n  // If set to true it will return the receipt data for each event (default: false),\n  receiptData: true\n});\n```\n\nThis example retrieves the historical event logs for the `GreetingChange` event of the `YourContract` smart contract, starting from block number 31231 and filtering events where the premium parameter is true. The data property of the returned object contains an array of event objects, each containing the event parameters and (optionally) the block, transaction, and receipt data. The `isLoading` property indicates whether the event logs are currently being fetched, and the `error` property contains any error that occurred during the fetching process (if applicable).\n\n### useDeployedContractInfo:\n\nUse this hook to fetch details about a deployed smart contract, including the ABI and address.\n\n```ts\n// ContractName: name of the deployed contract\nconst { data: deployedContractData } = useDeployedContractInfo(contractName);\n```\n\nThis example retrieves the details of the deployed contract with the specified name and stores the details in the deployedContractData object.\n\n### useScaffoldContract:\n\nUse this hook to get your contract instance by providing the contract name. It enables you interact with your contract methods.\nFor reading data or sending transactions, it's recommended to use `useScaffoldContractRead` and `useScaffoldContractWrite`.\n\n```ts\nconst { data: yourContract } = useScaffoldContract({\n  contractName: \"YourContract\",\n});\n// Returns the greeting and can be called in any function, unlike useScaffoldContractRead\nawait yourContract?.read.greeting();\n\n// Used to write to a contract and can be called in any function\nimport { useWalletClient } from \"wagmi\";\n\nconst { data: walletClient } = useWalletClient();\nconst { data: yourContract } = useScaffoldContract({\n  contractName: \"YourContract\",\n  walletClient,\n});\nconst setGreeting = async () =\u003e {\n  // Call the method in any function\n  await yourContract?.write.setGreeting([\"the greeting here\"]);\n};\n```\n\nThis example uses the `useScaffoldContract` hook to obtain a contract instance for the `YourContract` smart contract. The data property of the returned object contains the contract instance that can be used to call any of the smart contract methods.\n\n## Disabling type and linting error checks\n\n\u003e **Hint**\n\u003e Typescript helps you catch errors at compile time, which can save time and improve code quality, but can be challenging for those who are new to the language or who are used to the more dynamic nature of JavaScript. Below are the steps to disable type \u0026 lint check at different levels\n\n### Disabling commit checks\n\nWe run `pre-commit` [git hook](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) which lints the staged files and don't let you commit if there is an linting error.\n\nTo disable this, go to `.husky/pre-commit` file and comment out `yarn lint-staged --verbose`\n\n```diff\n- yarn lint-staged --verbose\n+ # yarn lint-staged --verbose\n```\n\n### Deploying to Vercel without any checks\n\nBy default, Vercel runs types and lint checks before building your app. The deployment will fail if there are any types or lint errors.\n\nTo ignore these checks while deploying from the CLI, use:\n\n```shell\nyarn vercel:yolo\n```\n\nIf your repo is connected to Vercel, you can set `NEXT_PUBLIC_IGNORE_BUILD_ERROR` to `true` in a [environment variable](https://vercel.com/docs/concepts/projects/environment-variables).\n\n### Disabling Github Workflow\n\nWe have github workflow setup checkout `.github/workflows/lint.yaml` which runs types and lint error checks every time code is **pushed** to `main` branch or **pull request** is made to `main` branch\n\nTo disable it, **delete `.github` directory**\n\n## Contributing to Scaffold-ETH 2\n\nWe welcome contributions to Scaffold-ETH 2!\n\nPlease see [CONTRIBUTING.MD](https://github.com/scaffold-eth/scaffold-eth-2/blob/main/CONTRIBUTING.md) for more information and guidelines for contributing to Scaffold-ETH 2.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammer-ke%2Fscaffold-eth-solidity-by-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogrammer-ke%2Fscaffold-eth-solidity-by-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammer-ke%2Fscaffold-eth-solidity-by-example/lists"}