Skip to content

README-ID.md

Latest commit

 

History

History
149 lines (114 loc) · 3.97 KB

README-ID.md

File metadata and controls

149 lines (114 loc) · 3.97 KB

Base Transfer — UI & API

Base Transfer adalah aplikasi transfer ETH di jaringan Base Mainnet yang dibangun menggunakan:

  • 🧠 React + Tailwind CSS v4.1.17 untuk antarmuka modern dan responsif
  • ⚙️ Node.js + Express + Ethers.js untuk backend pengiriman transaksi dan estimasi gas fee
  • 💾 Penyimpanan log transaksi lokal (transactions.json)
  • 🌗 Dukungan Dark Mode / Light Mode dengan penyimpanan preferensi otomatis

🚀 Fitur Utama

🎨 Frontend (UI)

  • Input alamat tujuan & jumlah (IDR)
    Mengonversi IDR ke ETH secara otomatis berdasarkan kurs dari CoinGecko.
  • Estimasi transaksi otomatis
    Menampilkan estimasi biaya gas (ETH dan IDR) dan total keseluruhan.
  • Kirim transaksi langsung ke jaringan Base
    Transaksi dikonfirmasi melalui RPC Base Mainnet dan ditampilkan link-nya ke Basescan.
  • Dark mode toggle (persisted)
    Menggunakan data-theme="dark" dengan @custom-variant dari Tailwind v4.
  • Countdown sinkronisasi saldo (10 detik) setelah transaksi sukses.
  • Tombol reset otomatis setelah transaksi berhasil — mengembalikan UI ke kondisi awal.

⚙️ Backend (API)

  • Endpoint /api/estimate
    • Menghitung estimasi gas fee dan total ETH berdasarkan input IDR.
  • Endpoint /api/send
    • Mengirim transaksi on-chain menggunakan private key dari .env.
    • Mencatat log transaksi ke file 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
    • Mengambil saldo wallet server dalam ETH dan konversi ke IDR.
  • Endpoint /api/txlogs (opsional, hanya untuk development)
    Mengembalikan daftar seluruh transaksi yang tersimpan di transactions.json.

🧩 Struktur Proyek

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

⚡ Instalasi & Setup

1️⃣ Backend

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

Buat file .env:

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

2️⃣ Frontend

cd base-transfer-ui
npm install
npm run dev

Buka di browser: http://localhost:5173

🌐 API Routes

Endpoint Method Deskripsi
/api/estimate POST Estimasi biaya gas dan total ETH
/api/send POST Kirim transaksi ETH
/api/balance GET Ambil saldo wallet + kurs ETH→IDR
/api/txlogs GET (Dev) Lihat log transaksi lokal

📦 Teknologi Utama

Komponen Versi Deskripsi
React ^19.2.0 Library UI utama
Tailwind CSS ^4.1.17 Styling utilitas modern
Vite ^7.2.2 Dev server & bundler
Ethers.js ^6.15.0 Interaksi blockchain Base
Express.js ^4.x Server API backend
CoinGecko API — Kurs ETH ke IDR realtime

🔐 Catatan Keamanan

Jangan pernah commit .env ke repository publik. Pastikan private key hanya digunakan pada wallet dengan saldo terbatas. Untuk produksi, pertimbangkan enkripsi atau database terproteksi.

📜 Lisensi

Proyek ini dirilis di bawah lisensi MIT. Dikembangkan dengan ❤️ oleh 0xFAS.

☕ Donate

♦️ Ethereum: 0x8B42A04627120f4e23c8702d2b8127A3827aDcf9

❤️ Thank You