💰 Swap Wallet
The Wallet is your personal digital vault where you store, manage, and transact with all your tokens. It's the central hub for all your DeFi activities on the platform.
Overview: Your Digital Wallet
What is the Wallet: The Wallet is your personal digital vault where you store, manage, and transact with all your tokens. It's the central hub for all your DeFi activities on the platform. Think of it as your bank account, but completely decentralized and under your full control.
Accessing the Wallet:
Connect your wallet using the "Connect" button in the top-right corner
Once connected, click on your address to open the full wallet interface
The wallet opens as a dedicated page with complete functionality
Core Philosophy: In real DeFi, your wallet is your identity. Understanding wallet management is crucial because:
Non-custodial: You control your assets, not a third party
Self-sovereign: No one can freeze or seize your funds
Transparent: All transactions are on-chain and verifiable
Irreversible: Mistakes can't be undone (in production)
Wallet Personalization
The platform allows complete customization of your wallet to make it truly yours.
Custom Wallet Name
What it is: Give your wallet a memorable, personalized name instead of just showing the address.
How to customize:
Click directly on the wallet title (defaults to "My Wallet")
The title becomes editable
Type your desired name (e.g., "Trading Wallet", "Main Portfolio", "DeFi Experiments")
Press Enter or click outside to save
Use cases:
Multiple wallets: Differentiate between different accounts
Purpose-specific: Name by function (Trading, Savings, Airdrops)
Personal branding: Make it uniquely yours
Organization: Keep track of what each wallet is for
Real-world application: While blockchain addresses are immutable, wallet software (MetaMask, Ledger, etc.) allows naming accounts locally. This is crucial when managing multiple wallets for different purposes.
Color Customization
What it is: Choose from 7 color schemes to personalize your wallet's appearance.
How to customize:
Click the Settings button (⚙️) in the wallet header
A settings panel expands below
Under "Wallet Color", see a palette of 7 colors
Click any color circle to select it
The change applies immediately across:
Wallet avatar circle
Wallet title color
Total balance section background and border
Various accent elements
Available colors:
Blue (#3B82F6): Professional, trustworthy (default)
Green (#10B981): Growth, profit-focused
Purple (#8B5CF6): Creative, unique
Orange (#F59E0B): Energetic, active trading
Red (#EF4444): High-risk, aggressive
Pink (#EC4899): Personal, distinctive
Cyan (#06B6D4): Cool, analytical
Visual feedback:
Selected color shows white border
Slight scale animation on selection
Instant preview across the entire wallet
Balance Privacy Toggle
What it is: Hide or show your token balances for privacy in public settings.
How to use:
Click the eye icon (👁️) in the wallet header
Toggle between:
Visible: Shows all amounts and values
Hidden: Replaces all numbers with "••••••"
What gets hidden:
Total balance amount
Individual token balances
USD values
All numeric displays
When to use:
Screen sharing: During video calls or presentations
Public places: When using devices in coffee shops, airports
Screenshots: Before taking or sharing screenshots
Privacy: When you don't want observers to see your holdings
Real-world importance: In production DeFi:
Your wallet balance is publicly visible on blockchain explorers
Anyone with your address can see all your transactions
Privacy practices are essential for security (preventing targeted attacks)
Consider using multiple wallets for different purposes
Total Balance Overview
What it displays: The prominent balance section shows your complete portfolio value at a glance.
Components:
Total Balance (USD):
Displays aggregate value of all tokens in your wallet
Calculated by: (Token Amount × Token Price) for each holding
Updates in real-time as prices change
Format: $X,XXX.XX with thousands separators
24h Change:
Shows profit/loss in last 24 hours
Format: +$XXX.XX (2.XX%) or -$XXX.XX (-2.XX%)
Green color with ↑ icon for gains
Red color with ↓ icon for losses
Simulated based on token price movements
Visual design:
Large, prominent display for quick reading
Colored background matching your wallet theme
Subtle transparency and border effects
Gradient styling for premium feel
Calculation details:
For each token you hold:
Token Value = Balance × Current Price
Total Balance = Sum of all Token Values
24h Change = (Current Total - Total 24h Ago) / Total 24h Ago × 100Example:
Holdings:
- 10 ETH @ $2,847 = $28,470
- 5,000 USDT @ $1.00 = $5,000
- 50 BNB @ $312.45 = $15,622.50
Total Balance: $49,092.50
Navigation Tabs
The wallet has two main views accessible via tabs.
Tokens Tab (Asset View)
What it shows: Complete list of all tokens in your wallet with detailed information.
Information per token:
Token logo: Authentic logos from CoinGecko
Symbol: Token ticker (ETH, BTC, USDT, etc.)
Balance: Amount of tokens you hold (4 decimal precision)
USD Value: Current value in dollars
24h Change: Price movement with percentage
Green ↑ for positive
Red ↓ for negative
Sorting: Tokens are automatically sorted by USD value (highest first)
Empty state: If you have no tokens:
Shows friendly "No tokens found" message
Explains how to get started
"Go to Faucet" button for quick access
Encourages experimentation
Interaction:
Each token card is slightly hoverable (subtle scale effect)
Clicking a token (future enhancement) could show more details
Visual hierarchy makes scanning easy
Technical details:
Logos loaded from CoinGecko CDN
Fallback to placeholder if logo fails to load
Real-time balance calculations
Responsive grid layout
Activity Tab (Transaction History)
What it shows: Complete chronological history of all your wallet transactions.
Transaction types displayed:
🟢 FAUCET / RECEIVE:
Tokens received from faucet
Icon: Green arrow pointing down-right
Shows amount received
Timestamp of receipt
🔵 SEND:
Tokens sent to another address
Icon: Blue arrow pointing up-right
Shows amount sent
Recipient address (truncated)
🟣 SWAP:
Token exchanges
Icon: Purple bidirectional arrows
Shows "from" token and amount
Timestamp of swap
Information per transaction:
Type: Visual icon and label
Amount: Quantity and token symbol
Timestamp: Full date and time (local timezone)
Status:
🟡 PENDING: Transaction processing (appears for 2 seconds)
🟢 COMPLETED: Successfully executed
🔴 FAILED: Transaction failed (rare in simulation)
Sorting:
Most recent transactions appear first (reverse chronological)
Scroll to see older transactions
Empty state: If no transactions yet:
Clock icon (48px, subtle opacity)
"No transactions yet" heading
"Your transaction history will appear here" subtitle
Encourages making first transaction
Real-world application: In production DeFi:
Transaction history is on-chain and permanent
Blockchain explorers (Etherscan, etc.) show same information
Each transaction has a unique hash for tracking
Gas fees are deducted for each transaction
Transaction times vary based on network congestion
Quick Actions Bar
What it is: Five prominent action buttons for the most common wallet operations.
Visual design:
Grid layout (5 columns)
Icon + label for each action
Color-coded for quick recognition
Active state highlighting
Hover effects for feedback
1. 📤 Send (Blue)
Purpose: Transfer tokens to another wallet address
When to use:
Sending tokens to friends or family
Paying for goods/services
Moving tokens between your wallets
Distributing tokens to team members
What it does:
Opens the Send form interface
Pre-selects the Send tab
Allows you to configure transfer details
2. 🔄 Swap (Purple)
Purpose: Exchange one token for another
When to use:
Converting between cryptocurrencies
Taking profits (crypto → stablecoin)
Entering positions (stablecoin → crypto)
Portfolio rebalancing
What it does:
Opens the Swap form interface
Shows FROM/TO token selectors
Displays exchange rate calculation
3. 💧 Faucet (Green)
Purpose: Receive free test tokens
When to use:
Starting fresh with no tokens
Need more tokens for experiments
Testing different token combinations
Practicing without constraints
What it does:
Opens the Faucet request form
Lists all available tokens
Allows requesting up to 100 tokens at once
4. 👥 Contacts (Orange)
Purpose: Manage frequently-used wallet addresses
When to use:
Adding regular recipients
Organizing your network
Quick access to common addresses
Avoiding address typos
What it does:
Opens the Contacts management interface
Shows favorites and all contacts
Provides quick send functionality
5. 💼 Assets (Cyan)
Purpose: View your token holdings
When to use:
Checking current balances
Reviewing portfolio allocation
Monitoring holdings
General wallet overview
What it does:
Returns to the Tokens tab view
Default view of the wallet
Shows all holdings with values
Faucet Integration
What is a faucet: A faucet is a tool that dispenses free tokens for testing, education, and experimentation. In blockchain, faucets are essential for testing environments.
How to Use the Wallet Faucet
Step-by-step process:
1. Access the Faucet
Click the green "Faucet" quick action button
Or navigate using tabs if already in another section
2. Select Token A dropdown menu displays 10+ popular tokens:
ETH (Ethereum) - $2,847
BTC (Bitcoin) - $43,250
USDT (Tether) - $1.00
BNB (Binance Coin) - $312
USDC (USD Coin) - $1.00
SOL (Solana) - $98
MATIC (Polygon) - $0.87
AVAX (Avalanche) - $36
ADA (Cardano) - $0.52
DOT (Polkadot) - $7.23
3. Enter Amount
Input field accepts numeric values
Default: 10 tokens
Recommended: 10-100 tokens
Maximum per request: 100 tokens
No minimum (but amounts under 1 may be impractical)
4. Request Tokens Click the "Request [Token]" button (gradient green)
5. Confirmation Modal A modal appears showing:
Title: "Confirm Faucet Request"
You will receive: Exact amount and token
Warning: Blue alert box with details
"Confirm Transaction"
"Please review the details carefully"
Actions:
Cancel (gray): Closes modal, no action
Confirm (gradient blue-purple): Proceeds with request
6. Processing After confirmation:
Transaction created with status PENDING (yellow)
Toast notification: "Requesting X TOKEN from faucet..."
Appears in Activity tab immediately
Processing time: ~2 seconds (simulated blockchain confirmation)
7. Completion
Balance automatically updates (adds requested amount)
Transaction status changes to COMPLETED (green)
Toast notification: "Received X TOKEN from faucet!"
Tokens now visible in Tokens tab
Faucet Features
Unlimited requests:
No daily limits
Request as many times as needed
Any amount up to 100 per request
All tokens available
Multiple tokens:
Request different tokens in sequence
Build diverse portfolio
Test various combinations
Experiment freely
Instant delivery:
No waiting periods
Immediate balance update
Real-time availability
Seamless experience
Real-World Faucet Comparison
Testnet faucets:
Dispense test tokens for development
Usually have rate limits (24h cooldown)
Limited amounts per request
Require social media verification sometimes
Mainnet faucets (rare):
Very limited availability
Tiny amounts (dust)
Marketing purposes only
Often have complex requirements
Our educational faucet:
Removes all barriers to learning
Unlimited experimentation
Focus on education, not scarcity
Safe environment for mistakes
Swap Functionality
What is a swap: A swap is the exchange of one cryptocurrency for another directly through a decentralized exchange (DEX). This is the core functionality of platforms like Uniswap.
Understanding Token Swapping
The mechanics:
Automated Market Maker (AMM): Algorithmic pricing based on pool ratios
Liquidity pools: Reserves of token pairs that enable instant trading
Price impact: Your trade affects the token price based on size
Slippage: Difference between expected and executed price
Why swap:
Convert between cryptocurrencies
Take profits (crypto → stablecoin)
Enter positions (stablecoin → crypto)
Rebalance portfolio
Access tokens not on centralized exchanges
How to Perform a Swap
Step-by-step guide:
1. Open Swap Interface
Click purple "Swap" quick action
Or select swap from available tabs
2. Configure Source Token (FROM)
Select the token you want to exchange:
Dropdown shows all tokens you have balance in
Only tokens with available balance are selectable
Example: ETH, USDT, BNB
Enter the amount to swap:
Input field for quantity
Shows available balance below
Format: "Balance: X.XXXX TOKEN"
Cannot exceed available balance
Balance validation:
Real-time check of sufficient funds
Error if amount exceeds balance
Visual feedback on input
3. Use Token Inverter (Optional)
The circular button with bidirectional arrows (🔄):
Swaps the FROM and TO tokens instantly
Useful for reverse operations
Maintains entered amount
Quick workflow enhancement
4. Configure Destination Token (TO)
Select the token you want to receive:
Dropdown shows all available tokens
Independent of current holdings
Example: USDT, BTC, MATIC
View estimated output:
Automatically calculated based on:
Current token prices
Exchange rate
Amount entered in FROM field
Formula:
(FROM amount × FROM price) / TO priceUpdates in real-time as you type
Display format:
You will receive: ~X.XXXX TOKENThe ~ (tilde) indicates "approximately"
5. Review Exchange Details
Before proceeding, verify:
Exchange rate: Conversion ratio between tokens
FROM amount: Exact quantity being swapped
TO amount: Expected receipt (estimated)
Available balance: Ensure sufficient funds
Example calculation:
Swap: 10 ETH → USDT
ETH price: $2,847
USDT price: $1.00
Calculation:
10 ETH × $2,847 = $28,470
$28,470 ÷ $1.00 = 28,470 USDT
You pay: 10 ETH
You receive: ~28,470 USDT6. Execute Swap Click "Swap Tokens" button (gradient purple-pink)
7. Confirmation Modal
A modal appears with complete transaction details:
Header:
Title: "Confirm Swap"
Close button (X) to cancel
You Pay section:
Label: "You pay"
Display: Amount and FROM token
Example: "10.0000 ETH"
Gray background box
Visual separator:
Centered arrow icon (→)
Circular background
Indicates direction of swap
You Receive section:
Label: "You receive (estimated)"
Display: Calculated TO amount
Example: "28,470.0000 USDT"
Gray background box
Note: "estimated" emphasizes this is approximate
Alert box:
Blue background
Alert circle icon
"Confirm Transaction" header
"Please review the details carefully" message
Reminds user to verify before proceeding
Action buttons:
Cancel (gray): Closes modal, no transaction
Confirm (gradient): Proceeds with swap
8. Processing Phase
After clicking Confirm:
Immediate effects:
FROM token balance DEDUCTED instantly
Example: Had 50 ETH, swapped 10, now have 40 ETH
Balance updates in real-time
Transaction creation:
Type: SWAP
Status: PENDING (yellow indicator)
Timestamp: Current time
Appears in Activity tab
User feedback:
Toast notification appears
Message: "Swapping X FROM for ~Y TO"
Visual confirmation of action
9. Completion (2 seconds later)
TO token balance ADDED:
Calculated amount deposited
Example: Receive 28,470 USDT
Visible in Tokens tab
Transaction updated:
Status changes to COMPLETED (green)
Timestamp preserved
Full details retained
Final notification:
Success toast message
Confirmation of receipt
Encourages checking balance
Swap Validations
Preventing errors:
❌ Cannot swap without sufficient balance:
Error: "Insufficient balance"
Toast notification displays
Transaction blocked
Check your holdings first
❌ Must enter an amount:
Error: "Please enter an amount to swap"
Cannot proceed with empty field
Minimum: any amount > 0
❌ Must select tokens:
Both FROM and TO required
Cannot be the same token
System prevents invalid combinations
✅ Valid swap requirements:
FROM token with adequate balance
TO token selected
Amount greater than 0
Not exceeding available balance
Swap Best Practices
Before swapping:
Check current prices: Ensure rates are favorable
Verify amounts: Double-check quantities
Review modal: Read all details in confirmation
Consider timing: Market conditions matter (in real DeFi)
During swap:
Read confirmation carefully: Last chance to cancel
Verify TO token: Ensure it's correct
Check estimated amount: Seems reasonable?
After swap:
Confirm balance update: Both FROM and TO
Check Activity tab: Transaction recorded
Review outcome: Did you receive expected amount?
Real-World Swap Considerations
In production DeFi:
Gas fees:
Every swap costs ETH (or native token)
Fees vary: $1-$100+ depending on network
Higher gas = faster confirmation
Can exceed swap value for small amounts
Price impact:
Large trades significantly move price
More impactful in smaller pools
Can lose 5-10%+ on big swaps
Check impact before executing
Slippage protection:
Set maximum acceptable price change
Transaction reverts if exceeded
Protects from sandwich attacks
Typical: 0.5-1% for normal tokens
MEV (Maximal Extractable Value):
Bots can front-run your transaction
They see your swap before confirmation
Can profit from your trade
Use private transactions or limit orders
Failed transactions:
Still cost gas even if failed
Reasons: insufficient liquidity, slippage, timeout
Funds returned but gas lost
Send Functionality
What is sending: Sending (or transferring) is the act of moving tokens from your wallet to another wallet address. It's the most fundamental blockchain operation.
Understanding Token Transfers
The process:
From: Your wallet (the sender)
To: Recipient's wallet address
Amount: Quantity of specific token
Irreversible: Cannot undo once confirmed (in real blockchain)
Use cases:
Paying for goods/services
Sending to friends/family
Moving tokens between your own wallets
Distributing tokens to team/community
Donations/tips
Payment for work/services
Critical importance: In production blockchain:
Transactions are PERMANENT
Wrong address = permanent loss
No customer service to reverse
Always verify addresses multiple times
Start with small test transaction if unsure
How to Send Tokens
Comprehensive guide:
1. Open Send Interface
Click blue "Send" quick action
Or select Send from tabs
2. Select Token
Dropdown menu shows all tokens in your wallet:
Only displays tokens you own
Shows token symbols (ETH, BTC, USDT, etc.)
Select the token you want to send
Example tokens:
ETH for Ethereum
USDT for Tether stablecoin
BNB for Binance Coin
Any token in your balance
3. Enter Recipient Address
What is an address:
Hexadecimal string starting with "0x"
42 characters long
Example:
0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbUnique identifier for destination wallet
How to enter:
Copy from source (sender's clipboard)
Paste into "Recipient Address" field
Or type manually (NOT recommended)
Or select from your Contacts (see Contacts section)
⚠️ CRITICAL WARNING:
ALWAYS copy-paste addresses
NEVER type manually (high error risk)
One wrong character = lost tokens forever
No undo or recovery in real blockchain
Verify first few and last few characters after pasting
Address validation:
System checks format (must start with 0x)
Must be 42 characters
Hexadecimal characters only
Real blockchain also validates checksum
4. Enter Amount
Input field for quantity:
Numeric values only
Decimals supported (up to 18 decimal places)
Example: 10, 0.5, 100.25
Balance display: Shows below input:
Balance: X.XXXX TOKENReal-time remaining balance
Helps prevent over-sending
Visual reference
Validation:
Cannot send more than you have
Must be positive amount
Must be greater than 0
5. Review Transaction Details
Before clicking send, verify:
Token: Correct cryptocurrency selected
Recipient: Address is accurate (verify multiple times)
Amount: Quantity is intended
Balance: Sufficient funds available
Example review:
Send: 100 USDT
To: 0x742d...f0bEb
Balance: 5,000 USDT
After: 4,900 USDT remaining6. Click "Send [TOKEN]"
Button shows specific token being sent
Example: "Send ETH", "Send USDT"
Gradient blue-purple styling
Full-width button
7. Confirmation Modal
Modal displays complete transaction summary:
Header:
Title: "Confirm Send"
X button to close/cancel
Amount section:
Label: "Amount"
Display: Quantity and token
Example: "100.0000 USDT"
Large, prominent text
Gray background box
Recipient section:
Label: "Recipient"
Display: FULL address (not truncated)
Example: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb"
Monospace font for clarity
Allows visual verification
Gray background box
⚠️ THIS IS YOUR LAST CHANCE:
Verify address one final time
Check amount carefully
Ensure everything is correct
No undo after this point
Alert box:
Blue background with icon
"Confirm Transaction"
"Please review the details carefully"
Emphasizes importance of verification
Action buttons:
Cancel (gray): Abort transaction, close modal
Confirm (gradient): Execute send, irreversible
8. Processing
After clicking Confirm:
Immediate balance deduction:
FROM balance decreases instantly
Example: Had 5,000 USDT, sent 100, now 4,900
Real-time update in Tokens tab
Reflects in total balance calculation
Transaction record created:
Type: SEND
Status: COMPLETED (instant in simulation)
From: Your address
To: Recipient address
Amount: Exact quantity sent
Token: Cryptocurrency sent
Timestamp: Current time
Appears immediately in Activity tab
User notification:
Toast message appears
Format: "Sent X TOKEN to 0xABC...123"
Address shown truncated (first 6, last 4)
Green success styling
9. Verification
After sending:
Check balance: Verify deduction
Check Activity: Confirm transaction recorded
Optional: Ask recipient to confirm receipt (in real scenario)
Activity tab displays:
🔵 SEND
100 USDT
To: 0x742d...f0bEb
Date: Jan 6, 2025 3:45 PM
Status: COMPLETED ✓Send Validations
System protections:
❌ Cannot send without all fields:
Error: "Please fill in all fields"
Requires: token, address, amount
All three must be valid
❌ Cannot send more than balance:
Error: "Insufficient balance"
Checks real-time available amount
Prevents over-sending
❌ Cannot send to invalid address:
Must start with "0x"
Must be 42 characters
Must be hexadecimal
System validates format
❌ Cannot send zero or negative:
Amount must be positive
Must be greater than 0
Decimals allowed
✅ Valid send requirements:
Token selected
Valid recipient address
Amount > 0 and ≤ balance
All fields completed
Send Best Practices
Critical safety measures:
1. Triple-check addresses:
Verify first 6 characters
Verify last 4 characters
Check middle section too
Use Contacts feature for frequent recipients
Start with small test transaction for new addresses
2. Use Contacts:
Save frequently-used addresses
Reduces copy-paste errors
Quick access
Organized management
3. Start small:
For new addresses, send small amount first
Confirm receipt
Then send full amount
Costs more but worth the security
4. Save transaction records:
Screenshot confirmation
Note transaction hash (in real blockchain)
Keep Activity history
Document for accounting/taxes
5. Verify before confirming:
Read modal completely
Check every detail
Take a moment
Don't rush
Real-World Send Considerations
In production blockchain:
Gas fees:
Every send costs network fees
Varies: $0.50 to $50+ (Ethereum)
Failed sends still cost gas
Consider gas when sending small amounts
Transaction time:
Not instant (unlike simulation)
Ethereum: 15 seconds to 5 minutes
Bitcoin: 10-60 minutes
Depends on gas paid and network congestion
Confirmations:
Transactions get "confirmed" in blocks
More confirmations = more security
Exchanges require 12+ confirmations often
Irreversible after ~6 confirmations
Wrong address scenarios:
Similar address:
Attackers can generate similar-looking addresses
Check entire address, not just beginning/end
Use address book/contacts
Wrong network:
Sending ETH address on BSC = lost
Each network has different addresses
Verify network before sending
Contract address:
Some addresses are smart contracts
May not accept transfers
Can result in lost funds
Cross-chain:
Sending BTC to ETH address = lost forever
Different blockchains = incompatible
Always match token to network
Contact Management System
What are contacts: Contacts allow you to save frequently-used wallet addresses with human-readable names. This is essential for preventing address errors and streamlining transfers.
Why contacts matter:
Blockchain addresses are complex (0x + 40 hex characters)
Human error rate is high when copy-pasting
Frequent recipients need quick access
Organization improves workflow
Reduces anxiety about wrong addresses
Understanding Contact Types
Two categories:
⭐ Favorites:
Your most important contacts
Priority display at top
Marked with yellow star icon
Quick access for frequent transfers
Example: Family, business partners, main wallets
📋 All Contacts:
Complete contact list
Less frequently used addresses
Can be promoted to Favorites
Organized alphabetically
Example: Occasional recipients, backup wallets
Adding a New Contact
Step-by-step guide:
1. Access Contacts Section
Click orange "Contacts" quick action
Or navigate using tabs
Interface loads with contact management view
2. Locate "Add New Contact" Form Appears at top of Contacts section:
Prominent header: "Add New Contact"
Two input fields
Add Contact button
3. Enter Contact Name
Name field requirements:
Human-readable identifier
Use descriptive names
Examples:
"Alice Johnson"
"Bob - Trading Partner"
"Main Exchange Wallet"
"Emergency Backup"
"Mom's Wallet"
Best practices for naming:
Be specific (not just "Friend 1")
Include relationship or purpose
Use consistent naming scheme
Consider adding notes in name (in parentheses)
4. Enter Wallet Address
Address field requirements:
Full 42-character address
Must start with "0x"
Hexadecimal characters (0-9, a-f)
Example:
0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
⚠️ Critical address verification:
Copy address from reliable source
Verify first 6 and last 4 characters
Check for typos
Test with small transaction first
Wrong address = permanent loss (in real DeFi)
Where to get addresses:
Recipient sends via secure channel
Copy from blockchain explorer
Your other wallet interfaces
Trusted third-party tools
5. Click "Add Contact"
Blue button at bottom of form
Validates inputs
Creates contact entry
6. Confirmation
Toast notification: "Contact added!"
Contact appears in "All Contacts" list
Form clears for next entry
Ready to use immediately
Contact Display Information
Each contact card shows:
Avatar:
Circular emoji icon
Default: 👤 (person icon)
Future: Customizable avatars
Visual identifier
Name:
Large, bold text
Your custom name
Easy to scan
Prominent display
Address:
Truncated format for readability
Shows: First 10 + "..." + Last 8 characters
Example:
0x742d35Cc...5f0bEbFull address available on click/hover (future)
Monospace font for clarity
Status indicator:
Star icon (filled yellow or empty gray)
Indicates favorite status
Visual quick reference
Contact Actions
Three buttons per contact:
1. 📤 Send Button (Blue)
What it does:
Pre-fills Send form with this contact's address
Automatically switches to Send tab
Shows toast: "Sending to [Name]"
Ready for amount entry
How to use:
Click blue Send icon on contact
Send form opens with address populated
Select token
Enter amount
Proceed with send as normal
Benefits:
Zero risk of address typo
One-click workflow
Saves time
Reduces anxiety
2. ⭐ Favorite Button (Yellow/Gray)
What it does:
Toggles favorite status
Filled star (yellow) = Favorite
Empty star (gray) = Regular contact
Visual changes: When favorited:
Contact moves to "Favorites" section
Star icon filled yellow
Button background yellow
Stays at top of list
When unfavorited:
Contact moves to "All Contacts" section
Star icon empty
Button background gray
How to use:
Click star icon to toggle
Changes apply instantly
No confirmation needed
Reversible anytime
Use cases:
Mark frequent recipients
Prioritize important addresses
Organize by usage frequency
Quick access to main wallets
3. ✕ Delete Button (Red)
What it does:
Permanently removes contact
No confirmation dialog (be careful!)
Cannot be undone
Only in "All Contacts" section
How to use:
Click red X button
Contact immediately deleted
Toast confirmation: "Contact deleted"
Removed from list
⚠️ Warning:
NO confirmation prompt
Deletion is immediate
Cannot undo
Be certain before clicking
When to delete:
Contact no longer needed
Address changed
Duplicate entry
Cleanup/organization
Safety tip:
Consider unfavoriting instead of deleting
Keep historical contacts for reference
You might need address later
Contact Organization
Favorites section:
Location: Top of Contacts view
Visual design:
Header: "Favorites"
Colorful gradient avatars (blue-purple)
Star icon filled yellow
Priority positioning
Purpose:
Quick access to most-used contacts
Reduced scrolling
High-visibility placement
Streamlined workflow
All Contacts section:
Location: Below Favorites
Visual design:
Header: "All Contacts"
Gray gradient avatars
Star icon empty
Standard list format
Purpose:
Complete contact directory
Less frequent recipients
Backup addresses
Comprehensive view
Contact Best Practices
Security practices:
1. Verify addresses before adding:
Test with small transaction first
Confirm with recipient via separate channel
Check blockchain explorer
Cross-reference multiple sources
2. Use descriptive names:
Include full name or business name
Add context (purpose, relationship)
Avoid ambiguous labels
Update names as needed
3. Organize with favorites:
Keep frequent contacts starred
Review and update regularly
Remove unused contacts
Maintain clean list
4. Backup your contacts:
In real wallets, export contact list
Keep separate record
Document addresses securely
Consider encrypted storage
5. Regular audits:
Review contact list monthly
Remove obsolete entries
Verify addresses still valid
Update names/notes
Real-World Contact Management
In production wallets:
MetaMask:
Has built-in address book
Stored locally in browser
Not synced across devices
Can export/import
Ledger/Hardware wallets:
Contacts managed in companion software
Some support labels on-device
Enhanced security for address verification
Requires manual entry often
Exchange wallets:
Whitelisting for withdrawal addresses
24h delay for new addresses (security)
Mandatory for some jurisdictions
Email/2FA confirmation required
ENS (Ethereum Name Service):
Use names instead of addresses
Example: "alice.eth" instead of "0x742d..."
Resolves to current address
Decentralized domain system
Costs to register
Annual renewal fees
Best practice:
Maintain contacts in multiple places
Use ENS names when possible
Keep paper backup of critical addresses
Verify addresses through multiple channels
Confirmation Modals
What are confirmation modals: Confirmation modals are pop-up dialogs that appear before executing critical actions. They serve as the final checkpoint to review transaction details and prevent costly mistakes.
Why they exist:
Prevent errors: Last chance to catch mistakes
Educational: See exactly what will happen
Security: Matches real wallet behavior
Transparency: No hidden actions
Control: Explicit user consent required
Philosophy: In blockchain, transactions are irreversible. Confirmation modals are your last line of defense against:
Wrong addresses
Incorrect amounts
Unintended actions
Scam transactions
Fat-finger errors
Modal Structure
Standard components across all modals:
Header section:
Title: Describes the action (e.g., "Confirm Swap")
Close button (X): Cancel and close modal
Dark/light theme adaptive
Clean, clear typography
Content section:
Action details: Specific to transaction type
Visual separators: Make information scannable
Formatted displays: Easy-to-read layouts
All relevant data: Nothing hidden
Alert box:
Blue background: Attention-grabbing
Alert icon: Visual warning indicator
"Confirm Transaction" heading
Warning text: "Please review the details carefully"
Purpose: Reminds user this is important
Footer section:
Cancel button (gray):
Left side
Aborts transaction
Closes modal
No changes made
Safe option
Confirm button (gradient blue-purple):
Right side
Executes transaction
Irreversible (in real blockchain)
Prominent styling
Requires deliberate click
Swap Confirmation Modal
Specific to token swaps
Title: "Confirm Swap"
Content displays:
"You Pay" section:
Label in gray
Amount + token symbol
Large font size (2xl)
Bold weight
Example: "10.0000 ETH"
Gray background box
Rounded corners
Visual separator:
Centered arrow icon (→)
Circular background
Indicates transaction direction
Purple accent color
Clear flow visualization
"You Receive (estimated)" section:
Label in gray
Calculated amount + token symbol
Large font size (2xl)
Bold weight
Example: "28,470.0000 USDT"
Gray background box
Note: "(estimated)" emphasizes approximation
Why "estimated":
Prices can change between submission and confirmation
Blockchain confirmation takes time
Slippage may occur
Final amount may vary slightly
Real DEXs work the same way
What to verify:
FROM token is correct
FROM amount is intended
TO token is correct
TO amount is reasonable (check rate)
You can afford the FROM amount
Common mistakes to catch:
Wrong token selected
Decimal point error (10 vs 1.0)
Swapping in wrong direction
Unreasonable exchange rate
Send Confirmation Modal
Specific to token transfers
Title: "Confirm Send"
Content displays:
"Amount" section:
Label in gray
Quantity + token symbol
Large font (2xl)
Bold weight
Example: "100.0000 USDT"
Gray background box
"Recipient" section:
Label in gray
FULL address displayed (not truncated)
Example:
0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbMonospace font for clarity
Break-all for long addresses
Gray background box
⚠️ CRITICAL VERIFICATION: This is your LAST CHANCE to verify the recipient address:
Check first 6-8 characters
Check last 4-6 characters
Verify middle section too
Compare against source
One wrong character = lost forever
What to verify:
Amount is correct
Token is correct
Address is EXACT (character by character)
You can afford to send
Recipient confirmed this is their address
Red flags:
Address looks unfamiliar
Amount seems wrong
Different token than intended
Recipient never confirmed address
Faucet Confirmation Modal
Specific to faucet requests
Title: "Confirm Faucet Request"
Content displays:
"You will receive" section:
Label in gray
Amount + token symbol
Large font (2xl)
Bold weight
Example: "50.0000 ETH"
Gray background box
Simpler than other modals:
Only receiving, not sending
No risk of loss
Educational context
Lower stakes
What to verify:
Token is correct
Amount is as intended
This is what you want to test with
Why confirm faucet requests:
Maintains consistent UX
Teaches confirmation habit
Prevents accidental clicks
Builds muscle memory for real DeFi
Modal Interaction Patterns
Opening:
Triggered by action button click
Smooth fade-in animation
Backdrop darkens (60% black)
Backdrop blur effect
Modal slides in
Focus locks to modal
Reading:
Scan all sections top to bottom
Pay special attention to amounts and addresses
Use the alert box as reminder to slow down
Take your time - no rush
Closing without action:
Click X button (top right)
Click Cancel button (bottom left)
Click backdrop outside modal
Press Escape key (future enhancement)
No changes made
Safe to close anytime
Confirming:
Click Confirm button (bottom right)
Action executes immediately
Modal closes
Toast notification appears
Changes take effect
(In real blockchain) Transaction submitted to network
Best Practices for Confirmation Modals
Always: ✅ Read every field ✅ Verify amounts ✅ Check addresses character-by-character ✅ Take your time ✅ When in doubt, cancel and re-check
Never: ❌ Rush through confirmations ❌ Assume details are correct ❌ Ignore the alert box ❌ Confirm without reading ❌ Let someone pressure you to confirm quickly
Mental checklist:
Is this the action I intended?
Are all values correct?
Is the recipient address verified?
Can I afford this?
Am I certain about this?
If answer to ANY is "No" or "Maybe" → Click Cancel
Real-World Modal Importance
In production DeFi:
MetaMask confirmations:
Shows gas fee estimate
Displays contract interaction details
Can view transaction data (advanced)
Signing requires password/biometric
Ledger requires physical button press
Critical differences from simulation:
Gas fees: Cost money even if failed
Irreversible: No undo button exists
Scams: Malicious sites can trigger fake modals
Timing: Price can change during confirmation
MEV: Bots may front-run your transaction
Common scams to watch for:
Unlimited approval modals: Granting unlimited token access
Fake token swaps: Scam tokens that look legitimate
Drainer contracts: Empty your wallet when approved
Phishing sites: Identical-looking fake sites
Protection strategies:
Use hardware wallets for large amounts
Always verify contract addresses
Check transaction details in block explorer
Start with small test transactions
Use reputable interfaces only
Keep wallet software updated
Last updated