/P

Primary LanguageTypeScriptMIT LicenseMIT

๐Ÿ— QuickNode + Scaffold-ETH 2

This is a customized version of the Scaffold-ETH 2 repository, modified to integrate with QuickNode.

๐Ÿ›  QuickNode Enhanced: This version of Scaffold-ETH comes pre-configured to use QuickNode's high-speed blockchain infrastructure for an enhanced dApp development experience.

  • ๐Ÿš€ QuickNode HTTP/WSS Provider: Easily connect to Ethereum networks using QuickNode's robust and scalable nodes.
  • ๐Ÿ“ฆ Customized QuickNode Setup: We've adapted the configuration and deployment setup to align with QuickNode's services.
  • ๐ŸŒ Global Node Network: Benefit from QuickNode's global network of nodes to ensure your dApp performs consistently and reliably across the globe.

๐Ÿงช 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.

โš™๏ธ Built using NextJS, RainbowKit, Hardhat, Wagmi, and Typescript.

  • โœ… Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
  • ๐Ÿ”ฅ Burner Wallet & Local Faucet: Quickly test your application with a burner wallet and local faucet.
  • ๐Ÿ” Integration with Wallet Providers: Connect to different wallet providers and interact with the Ethereum network.

Debug Contracts tab

Requirements

Before you begin, you need to install the following tools:

Quickstart

To get started with Scaffold-ETH 2, follow the steps below:

Step 1: Clone this repo & install dependencies

git clone https://github.com/quiknode-labs/scaffold-eth-2
cd scaffold-eth-2
yarn install

Step 2: Setup for Deployment on Mainnet/Testnet

To deploy the smart contract to a production blockchain like Ethereum mainnet, you can use QuickNode. Follow the steps below to integrate QuickNode with your dApp.

2.1: Sign up for a QuickNode account if you haven't already: QuickNode Sign Up
2.2: Once you have your QuickNode account, click the Create an Endpoint button, select any EVM chain (mainnet or testnet based on your preference), and configure your endpoint. Copy the HTTP Provider URL and keep it handy)
2.3: Navigate to the .env.example files located in both packages/nextjs and packages/hardhat directories. Then rename both files to .env)
2.4: Set the QUICKNODE_ENDPOINT environment variable with your QuickNode HTTP Provider URL like so:

# .env file
QUICKNODE_ENDPOINT=your_quicknode_http_provider_url_here

Step 3: Run a local network in the first terminal

yarn chain

This 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.

Step 4: On a second terminal, deploy the test contract:

yarn deploy

This 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.

Step 5: On a third terminal, start your NextJS app:

yarn start

Visit your app on: http://localhost:3000. You can interact with your smart contract using the Debug Contracts page. You can tweak the app config in packages/nextjs/scaffold.config.ts.

Run smart contract test with yarn hardhat:test

  • Edit your smart contract YourContract.sol in packages/hardhat/contracts
  • Edit your frontend in packages/nextjs/pages
  • Edit your deployment scripts in packages/hardhat/deploy

Configure Mainnet/Testnet Deployment

First, you will need to replace the DEPLOYER_PRIVATE_KEY placeholder in the hardhat/.env file with your actual private key. Make sure you have enough funds in your deployer account in order to pay for the transaction. If you are using testnet, you can retrieve testnet funds from the QuickNode Multi-Chain Faucet.

To deploy the sample smart contract, run the following command:

yarn deploy --network myquicknode

This name "myquicknode" is configured in the hardhat.config.js file and references the blockchain network your QuickNode endpoint is configured to (e.g. mainnet or testnet).

Additionally, if you want to run the scaffold frontend against your configured QuickNode endpoint, you'll need to update the nextjs/scaffold.config.ts file, specifically line 14, to update the targetNetwork to the blockchain you're using (e.g. mainnet, goerli, sepolia, etc.).

Documentation

To get the most out of QuickNode, visit our documentation.

For understanding Scaffold-ETH specifics, you can still refer to the original Scaffold-ETH documentation.