UI Development for Safe Token Migration
Typical situation: the user sees a single "Migrate" button, signs an infinite approve, and risks losing funds. Our interface reveals every detail and prevents blind actions. A UI with balance preview reduces errors by 3 times compared to an interface without preview. We guarantee transparency in every step.
Why Token Migration Needs a Dedicated UI?
Unlike regular transfers, migration requires approving a contract. Without a clear UI, phishing and mistakes increase. Our interface shows allowance, exchange rate, and network fees before signing. Transparency builds trust: you see the exact approve amount, conversion rate, and fees. We follow the ERC-20 standard for compatibility.
How We Build the Migration Interface
The standard scheme: old token (v1) → new token (v2) via a migrator contract. The UI covers three transactions:
-
approve(migratorContract, amount)on v1 -
migrate(amount)on migrator - (optional) add v2 to MetaMask via
wallet_watchAsset
async function migrateTokens(amount: bigint) { const currentAllowance = await v1Token.allowance(userAddress, MIGRATOR_ADDRESS); if (currentAllowance < amount) { const approveTx = await v1Token.approve(MIGRATOR_ADDRESS, amount); await approveTx.wait(); } const migrateTx = await migrator.migrate(amount); const receipt = await migrateTx.wait(); return receipt; } Our web3 migration interface ensures safe ERC-20 migration. We've developed over 50 such interfaces with a 90% reduction in support tickets.
What Does the Balance Display Show Before/After?
We explicitly show the deduction of v1, the receipt of v2, and the exchange rate. The preview updates on amount input, so users see exact numbers before signing.
function MigrationPreview({ amount, exchangeRate }: Props) { const v2Amount = (BigInt(amount) * BigInt(exchangeRate * 100)) / 100n; return ( <div className="migration-preview"> <div className="from"><span>You give: {formatEther(amount)} {V1_SYMBOL}</span></div> <ArrowIcon /> <div className="to"><span>You receive: {formatEther(v2Amount)} {V2_SYMBOL}</span></div> </div> ); } Stepper with Transaction States
Each step – approve, migrate, done – shows an explicit status: idle, pending, confirmed, error. Our transaction stepper is 3x more efficient than manual monitoring.
type MigrationStep = 'idle' | 'approving' | 'approved' | 'migrating' | 'done' | 'error'; const stepConfig = { idle: { label: 'Ready for migration', icon: 'clock' }, approving: { label: 'Confirming approve...', icon: 'spinner' }, approved: { label: 'Approve confirmed', icon: 'check' }, migrating: { label: 'Migrating tokens...', icon: 'spinner' }, done: { label: 'Migration complete', icon: 'check-circle' }, error: { label: 'Error', icon: 'x-circle' }, }; Each transaction links to Etherscan immediately, allowing independent tracking.
How to Protect Users from Infinite Approve?
If the contract requests type(uint256).max, we warn users. We offer a choice: exact amount or unlimited. For migration, exact amount is safer and recommended. A clear warning appears before signing.
| Parameter | Exact amount | Unlimited (max) |
|---|---|---|
| Security | High – only requested amount | Low – contract can spend everything |
| Convenience | Requires re-approve for second migration | One approve forever |
| Recommendation | ✅ For migration | ❌ Avoid |
How Are Errors and Edge Cases Handled?
Partial migration: the UI shows current v1 and v2 balances, remaining amount, and avoids redundant approval. Migration deadline: a countdown timer warns 7 days and 24 hours in advance; after deadline, the button disables with explanation. Revert reasons: we decode over 10 error types into human-readable messages, such as "Migration period ended" or "Insufficient tokens", reducing support inquiries by 80%.
function parseRevertReason(error: any): string { const message = error?.info?.error?.message || error?.message || ''; if (message.includes('Migration ended')) return 'Migration period ended'; if (message.includes('Insufficient balance')) return 'Insufficient tokens'; if (message.includes('user rejected')) return 'Transaction cancelled by user'; return 'Unknown error. Please try again later.'; } What If the User Makes a Mistake in Approve?
If the user approves an amount larger than needed, the UI immediately warns and offers a "Reset allowance" button to revoke excess via approve(0). This minimizes risk.
Step-by-Step User Guide
- Connect wallet (MetaMask, WalletConnect).
- Enter migration amount.
- Confirm approve for the required amount.
- Confirm migration.
- Add new token to wallet (automatic).
Development Stages and Timelines
| Stage | Duration | Result |
|---|---|---|
| Analysis | 0.5–1 day | Document with contract logic and scenarios |
| Design | 0.5–1 day | Wireframe stepper, error behavior, texts |
| Implementation | 1–2 days | Code in React/Next.js, ethers.js or viem |
| Testing | 0.5–1 day | Simulation of all scenarios on testnet |
| Deployment | 0.5 day | Production, transaction monitoring |
Full migration UI: starting at $2,500, completion in 2–5 days. Price depends on contract complexity. Contact us for an exact quote.
What's Included in the Turnkey Solution
- Integration of migrator contract (ERC-20, ERC-1155, any custom) using the ERC-20 standard.
- Approve/migrate components with balance preview.
- Transaction stepper with Etherscan links.
- Edge case handling: partial migration, deadline, reverts.
- Adding new token to wallet (
wallet_watchAsset). - Testing on testnet (Goerli, Sepolia).
- Documentation for launch and support.
Our team has 5+ years of experience and guarantees a secure, transparent migration interface. Request a consultation to discuss your project.