サンプルアプリに戻る

EVM Token Factory

The EVM Token Factory app enables you to create an ERC-20 token on any EVM-compatible blockchain. You can customize the token name, symbol, and initial supply with ease.

アプリをデプロイする

リポジトリを表示

フロントエンドフレームワーク／ライブラリ：

React/Next.js

言語：

TypeScript

ビルドツール／開発サーバー：

Next.js

---

概要

The EVM Token Factory app enables you to create an ERC-20 token on any EVM-compatible blockchain. You can customize the token name, symbol, and initial supply with ease. Currently, the app supports Sepolia and Holesky, but you can add more networks as needed.

重要なお知らせ

The Holesky testnet is no longer actively maintained. The overall process is valid for other chains, such as Hoodi testnet. If you’d like to see an updated version of this app or support for additional chains, please open an issue or a PR in the qn-guide-examples repository.

The app uses Next.js 14 以下のツールを使って立ち上げたプロジェクト create-next-app.

---

はじめに

プロジェクトディレクトリを開きます：

cd sample-dapps/evm-token-factory

環境変数の設定

1. 名前を変更 .env.example ～へ .env.local and update it with RPC URLs for each blockchain. Also, include your WalletConnect. project ID (optionally, you can leave this blank but some features will not be supported). To create RPC URLs for each chain, you can run your own node locally or use a service like Quicknode to quickly spin up a node endpoint.

Configure Smart Contract Addresses

2. を更新する factoryAddress value in evm-token-factory/app/utils/ethereum.ts with your deployed factory contract address. This is the address you received in the output during the 展開 section.

3. Remove any unused chains (e.g., mainnet) from the src/context/web3modal.tsx ファイル。

RPC Configuration

This app requires a valid RPC URL for each blockchain you want to support. Here are more details on how RPC is configured throughout the app.

• The RPC URLs referenced in the .env.local file are for the WalletConnect modal.
• To send transactions, the app utilizes the ethers.BrowserProvider class to wrap an injected provider (e.g., MetaMask, Rabby, Coinbase Wallet) and use the providers RPC configuration. Therefore, users interacting with the app should have the network they're creating tokens on added to their wallet and switched to that RPC network. Failing to do so will result in the app displaying a "This app doesn’t support your current network. Switch to an available option following to continue." message.

If you do not want to support a blockchain(s), you can remove references of the chain(s) from the src/context/web3modal.tsx ファイル。

依存関係をインストールする

次に、依存関係をインストールします：

npm install
# または
yarn
# または
pnpm install
# または
bun install

After, start the development server:

npm run dev
# または
yarn dev
# または
pnpm dev
# または
bun dev

Open http://localhost:3000 with your browser to see the app.

---

Dappの利用方法

1. Connect your wallet

   • Make sure you have enough ETH (or other native EVM gas token) in your wallet to cover the create token transaction
   • If you are using Testnet, you can get free ETH from the Quicknode Faucet

2. Click "Create Token" and confirm the transaction to create the ERC-20 token!

建築

├── app
│   ├── api
│   │   └── evm
│   │       └── createToken
│   │           └── route.ts # API Method for calling CreateToken function
│   ├── components
│   │   ├── Connect.tsx # Web3Modal Component
│   │   ├── Footer.tsx
│   │   └── Navbar.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx # The Web3Modal component
│   ├── page.tsx # Main page for Token Factory
│   └── utils
│       ├── abi.json # Factory ABI
│       └── ethereum.ts # Chain configuration and helpers
├── context
│   └── web3modal.tsx # Wallet Adapter Context providers 
├── contracts
│   ├── README.md
│   ├── foundry.toml # Forge configuration
│   ├── lib # Dependencies
│   ├── remappings.txt # Library mappings
│   ├── script
│   │   ├── Counter.s.sol
│   │   └── CreateToken.s.sol
│   ├── src
│   │   ├── Counter.sol
│   │   ├── Factory.sol
│   │   └── Token.sol
│   └── test
│       ├── Counter.t.sol
│       ├── Factory.t.sol
│       └── Token.t.sol
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── next.svg
│   ├── preview.png
│   ├── preview2.png
│   └── vercel.svg
├── .env.example # Configure RPCs and WalletConnect Project ID
├── tailwind.config.ts
└── tsconfig.json

---

スマートコントラクト

The ERC-20 Token Factory backend built on smart contracts with Solidity can be deployed on any EVM-compatible blockchain. For demonstration purposes, we have deployed the Token Factory to the Sepolia and Holesky testnet. It has not been deployed to any mainnet or L2 chains yet due to gas fee constraints but feel free to deploy it and open a PR in this repo.

The ERC-20 Token Factory is built with two smart contracts:

• Factory: The Factory contract (contracts/Factory.sol) inherits the Token.sol smart contract and acts as a Factory for creating and tracking new ERC-20 tokens.

• トークン: This is an ERC-20 smart contract (contracts/Token.sol) defined by the OpenZeppelin standard and includes a ミント そして transferOwnership function call in the constructor upon deployment.

Supported Chains & Addresses

• Sepolia: 0x28D99a0A1B430B3669B8A2799dCDd7d332ceDb1C
• Holesky: 0x5fCCa8dCeD28B13f2924CB78B934Ab0AF445542A

Deploy the Factory to another EVM blockchain

To deploy the Factory contract on a new chain using Foundry, follow these steps:

1. 確実に ファウンドリー is installed and navigate inside the 契約 directory. Install the required dependencies with the following commands:

forge install foundry-rs/forge-std --no-commit
forge install OpenZeppelin/openzeppelin-contracts --no-commit

2. Build (compile) the smart contracts using the Forgeビルド command.

3. Run tests using the フォージテスト command.

4. To deploy, run the forge create command below and input the proper RPC network and private key values:

forge create --rpc-url QUICKNODE_HTTP_URL \
--private-key YOUR_PRIVATE_KEY \
src/Factory.sol:TokenFactory

5. Edit the src/context/web3modal.tsx file and add a new chain object with its chain ID (find a list こちら), name, native gas token currency, explorer URL, and RPC URL (e.g., Quicknode):

export const mainnet = {
  chainId: 1,
  name: 'Ethereum',
  currency: 'ETH',
  explorerUrl: 'https://etherscan.io',
  rpcUrl: process.env.NEXT_PUBLIC_MAINNET_RPC_URL
}

6. Add the Factory address and explorer URL to the CHAINS object in app/utils/ethereum.ts. For example:

    1: { // Ethereum Mainnet
        factoryAddress: "FACTORY_ADDRESS",
        explorerUrl: "https://etherscan.io", 
    },

If you would like to learn more about creating and deploying smart contracts, check out these resources:

• Hardhat を使用してスマートコントラクトを作成・デプロイする方法
• Foundry入門
• Different Ways to Verify Your Smart Contract Code
• How to Create and Deploy an ERC20 Token

---

Next.js ドキュメント

Next.js についてさらに詳しく知りたい場合は、以下のリソースをご覧ください：

• Next.js ドキュメント- Next.js の機能と API について学びましょう。
• Next.js を学ぶ- インタラクティブな Next.js チュートリアル。

Next.jsのGitHubリポジトリをご覧ください。皆様からのフィードバックや貢献を歓迎します！

投稿とフィードバック

皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！

問題の報告やフィードバックをお寄せいただくには、GitHubのイシューを qn-ガイド-例 リポジトリ。

投稿するには、以下の手順に従ってください：

1. リポジトリをフォークする
2. フィーチャーブランチを作成する：
   git checkout -b feature/amazing-feature
3. 変更内容をコミットします：
   git commit -m "素晴らしい機能を追加"
4. ブランチをプッシュしてください：
   git push origin feature/amazing-feature
5. プルリクエストを作成してください。

その他のサンプルアプリを見る

Aave V3 Liquidation Tracker

This application provides real-time monitoring and in-depth analysis of liquidation events on the Aave V3 protocol. Built on a serverless architecture, this app showcases the power of Quicknode Streams for seamless blockchain data streaming.

Ethereum Transaction Report Application

This application fetches and analyzes Ethereum transactions for a given address using Quicknode's EVM Blockbook add-on, providing detailed reports within a specified date range.

Ethereum Wallet Explorer

This application uses Quicknode's Ethereum endpoint and APIs to query the blockchain for tokens, transactions, and NFTs associated with a given wallet.

• コミュニティのメンバーとチャットしましょう
• 当社の製品変更履歴をご覧ください
• 当社のサービスの状況をご確認ください
• 最新のお知らせについては、当社のブログをご覧ください

Web3の最新ニュースをお探しですか？

毎月、ブロックチェーン界隈の最もクールな情報をまとめたニュースレター「#Web3Vibes」を配信しています。ぜひ以下からご登録ください！

メールアドレス