🇮🇩 Baca versi Bahasa Indonesia

Base Transfer — UI & API

Base Transfer is an ETH transfer application built for the Base Mainnet, powered by:

• 🧠 React + Tailwind CSS v4.1.17 for a modern and responsive UI
• ⚙️ Node.js + Express + Ethers.js for transaction sending and gas fee estimation
• 💾 Local transaction log storage (transactions.json)
• 🌗 Dark / Light Mode support with automatic theme persistence

---

🚀 Key Features

🎨 Frontend (UI)

• Recipient & Amount (IDR) input
  Automatically converts IDR to ETH using CoinGecko API.
• Automatic transaction estimation
  Displays gas fee (ETH & IDR) and total estimated cost.
• Send transactions directly to the Base network
  Uses Base Mainnet RPC and provides a Basescan link after confirmation.
• Persistent Dark Mode toggle
  Implements data-theme="dark" using Tailwind v4 @custom-variant.
• 10-second balance sync countdown after successful transfer.
• Auto-reset button after a successful transaction — restores the UI to its initial state.

⚙️ Backend (API)

• Endpoint /api/estimate
  Calculates estimated gas fee and total ETH value based on the given IDR amount.
• Endpoint /api/send
  Sends an on-chain transaction using the private key from .env,
  and logs the result into transactions.json:

  {
    "timestamp": "2025-11-11T12:00:00.000Z",
    "from": "0xServerWallet",
    "to": "0xReceiver",
    "idr": 600,
    "ethAmount": "0.00001055",
    "txHash": "0xabc...",
    "blockNumber": 123456,
    "gasUsed": "21000"
  }
  

• Endpoint /api/balance Fetches the server wallet’s ETH balance and converts it to IDR.
• Endpoint /api/txlogs (optional, development only) Returns all saved transactions from transactions.json.

---

🧩 Project Structure

Frontend

base-transfer-ui/
├─ src/
│  ├─ App.jsx          
│  ├─ main.jsx          
│  ├─ index.css         
├─ public/
├─ postcss.config.cjs
├─ tailwind.config.js
├─ vite.config.js
├─ package.json
└─ README.md

Backend

server.js               
.env                    
transactions.json       

---

⚡ Installation & Setup

1️⃣ Backend

npm install express cors body-parser axios ethers dotenv
node server.js

Create a .env file:

PRIVATE_KEY=0xYOUR_PRIVATE_KEY
RPC_URL=https://mainnet.base.org
PORT=3001

2️⃣ Frontend

cd base-transfer-ui
npm install
npm run dev

Open your browser: http://localhost:5173

---

🌐 API Routes

Endpoint	Method	Description
/api/estimate	POST	Estimate gas fee and total ETH
/api/send	POST	Send ETH transaction
/api/balance	GET	Retrieve wallet balance & ETH→IDR rate
/api/txlogs	GET	(Dev) View local transaction logs

---

📦 Core Technologies

Component	Version	Description
React	^19.2.0	Frontend UI library
Tailwind CSS	^4.1.17	Modern utility-first styling
Vite	^7.2.2	Fast dev server & bundler
Ethers.js	^6.15.0	Blockchain interaction layer
Express.js	^4.x	Lightweight API backend
CoinGecko API	—	Real-time ETH→IDR price data

---

🔐 Security Notes

⚠️ Never commit your .env file to a public repository. Use wallets with limited funds for testing. For production, consider encryption or secure database storage for private keys.

---

📜 License

This project is released under the MIT License. Built with ❤️ by 0xFAS.

---

☕ Donate

If you’d like to support development:

♦️ Ethereum: 0x8B42A04627120f4e23c8702d2b8127A3827aDcf9

❤️ Thank you for your support!