Skip to main content

​
Workshop Amikom — EVM

In this workshop you build a full-stack “Tabungan Crypto” (crypto savings) dApp on Ethereum, end-to-end: from a Vite starter to an on-chain integration on the Sepolia testnet.

​
What you’ll build

A single-page dApp where a connected wallet can:
  • See its IDRT token balance and its Vault savings balance
  • Mint test tokens (open faucet)
  • Approve the Vault, then Deposit tokens into savings
  • Withdraw tokens back to the wallet
All styled with a bold neo-brutalism theme (thick black borders, hard offset shadows, sharp corners, vibrant colors), with live transaction status.

​
The core Web3 flow

            approve(vault, 100)              deposit(100)
 ┌──────────┐ ───────────────────►  ┌──────────┐ ───────────►  ┌──────────┐
 │  WALLET  │  "Vault, you may       │  IDRT    │  Vault pulls  │  VAULT   │
 │ (you)    │   pull 100 of my       │ (ERC20)  │  via          │ savings: │
 │          │ ◄───────────────────   │          │  transferFrom │   100    │
 └──────────┘        withdraw(100)   └──────────┘ ◄───────────  └──────────┘
                Vault sends tokens back
The approve → deposit pattern is the most fundamental idea in Web3: a contract may not pull your tokens without permission. You grant it first (approve), then the contract pulls them (transferFrom).

​
Tech stack

LayerTools
AppVite, React 19, TypeScript
StylingTailwind CSS v4, shadcn-style components (neo-brutalism)
WalletRainbowKit
Chain accesswagmi + viem
Data@tanstack/react-query
ContractsSolidity + Foundry (forge, cast, anvil)
NetworkEthereum Sepolia testnet

​
Repositories

Frontend starter

Vite + React + Tailwind v4 + shadcn, neo-brutalism themed (branch starter).

Smart contracts

Foundry project: RupiahToken (ERC20) + Vault.

​
Prerequisites

  • Basic JavaScript/TypeScript and React
  • Node.js 20+
  • A browser wallet (MetaMask) with some Sepolia ETH (grab from a faucet)
  • For the contracts section: Foundry (forge, cast)
Everything here runs on a testnet — no real funds. Use a throwaway test wallet, never one holding mainnet assets.

​
Workshop steps

1

The starter

Set up the Vite + shadcn neo-brutalism project.
2

Wallet setup

Add RainbowKit + wagmi + viem and a Connect button.
3

Smart contracts

Deploy RupiahToken + Vault to Sepolia.
4

Frontend integration

Wire balances, approve, deposit, withdraw, mint.

Start: The Starter

Clone and run the neo-brutalism Vite starter.