Project Overview:
Currency Conversion is a decentralized web application built on top of Scaffold-ETH 2, designed to provide real-time Ethereum (ETH) to fiat currency conversions. This project bridges on-chain Ethereum data with off-chain fiat currency values, allowing users to view the current ETH price in multiple fiat currencies through a clean and responsive interface.
Key Features: Real-time ETH Price Tracking: Fetches and displays the latest Ethereum price against a wide range of fiat currencies. Integration with RafaelCaso’s Currency Conversion API: Utilizes the RafaelCaso/currency-conversion-extension API for accurate and up-to-date conversion rates. Scaffold-ETH 2 Powered: Leverages Scaffold-ETH 2's modern development stack for rapid prototyping and a seamless Web3 UX. Responsive Frontend UI: User-friendly interface that shows ETH price conversions in an intuitive table or card layout. Ethereum Connected: Live wallet connection support using wagmi/hooks to reflect user's wallet status (optional extension).
Tech Stack: Frontend: React, Tailwind CSS (via Scaffold-ETH 2) Web3 Library: Wagmi, ethers.js Backend API: RafaelCaso Currency Conversion Extension (REST API) Scaffold-ETH 2: For smart contract interactions (even though this project focuses on off-chain data display) Deployment: Vercel / Netlify / Localhost Dev Environment
Use Cases: ETH price monitoring in local fiat currencies. Educational showcase of integrating Web2 APIs into Web3 dApps. Starter template for building financial dashboards on Scaffold-ETH 2.
⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
- ✅ Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
- 🪝 Custom hooks: Collection of React hooks wrapper around wagmi to simplify interactions with smart contracts with typescript autocompletion.
- 🧱 Components: Collection of common web3 components to quickly build your frontend.
- 🔥 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.
Before you begin, you need to install the following tools:
- Node (>= v20.18.3)
- Yarn (v1 or v2+)
- Git
To get started with Scaffold-ETH 2, follow the steps below:
- Install dependencies if it was skipped in CLI:
cd my-dapp-example
yarn install
- 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 packages/hardhat/hardhat.config.ts.
- 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.
- 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 contracts in
packages/hardhat/contracts - Edit your frontend homepage at
packages/nextjs/app/page.tsx. For guidance on routing and configuring pages/layouts checkout the Next.js documentation. - Edit your deployment scripts in
packages/hardhat/deploy
Visit our docs to learn how to start building with Scaffold-ETH 2.
To know more about its features, check out our website.
We welcome contributions to Scaffold-ETH 2!
Please see CONTRIBUTING.MD for more information and guidelines for contributing to Scaffold-ETH 2.