Skip to content

Latest commit

Β 

History

History
323 lines (261 loc) Β· 7.01 KB

File metadata and controls

323 lines (261 loc) Β· 7.01 KB

🎯 CoreLiquid UI/UX Testing Guide

Testing dengan Real Wallet & Real Transactions di Core Testnet


πŸ“‹ Prerequisites

1. WalletConnect Project ID (WAJIB!)

# 1. Kunjungi https://cloud.walletconnect.com/
# 2. Buat akun dan project baru
# 3. Copy Project ID
# 4. Update di file .env:
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_actual_project_id_here

2. Core Testnet tCORE Tokens

# Wallet Address untuk testing: 0x19C7fc7C730Fc6b8CEc573b4082F8d353bEA77cE
# 1. Kunjungi Core Testnet Faucet: https://scan.test.btcs.network/faucet
# 2. Request tCORE tokens ke address di atas
# 3. Minimal 1-2 tCORE untuk testing transaksi

3. MetaMask Setup

# Tambahkan Core Testnet ke MetaMask:
# Network Name: Core Testnet
# RPC URL: https://rpc.test2.btcs.network
# Chain ID: 1114
# Currency Symbol: tCORE
# Block Explorer: https://scan.test2.btcs.network

πŸš€ Step-by-Step Testing Guide

Step 1: Setup Environment

cd /Users/faliqulfikri/Documents/core\ hackathon/coreliquid-master

# Install dependencies
npm install
# atau
pnpm install

# Check environment configuration
npm run check-env

Step 2: Start Development Server

# Start Next.js development server
npm run dev
# atau
pnpm dev

# Server akan berjalan di: http://localhost:3000

Step 3: Import Wallet ke MetaMask

# Private Key untuk testing (SUDAH ADA DI .env):
# 0x6241ca52a2e2cee1c9cbd048870abce11e2272a816dbff3f3d3ade137bc2dd9d
# Address: 0x19C7fc7C730Fc6b8CEc573b4082F8d353bEA77cE

# 1. Buka MetaMask
# 2. Import Account -> Private Key
# 3. Paste private key di atas
# 4. Switch ke Core Testnet network

Step 4: Connect Wallet di UI

# 1. Buka http://localhost:3000
# 2. Klik "Connect Wallet"
# 3. Pilih MetaMask
# 4. Approve connection
# 5. Pastikan network Core Testnet (1114)

πŸ§ͺ Testing Scenarios

Scenario 1: Dashboard Overview

# URL: http://localhost:3000/dashboard
# Test:
# βœ… Wallet connection status
# βœ… Balance display (tCORE, CORE tokens, BTC tokens)
# βœ… Portfolio overview
# βœ… Real-time data updates

Scenario 2: Staking Operations

# URL: http://localhost:3000/staking
# Test:
# βœ… Core Native Staking interface
# βœ… Stake tCORE tokens
# βœ… View staking rewards
# βœ… Unstake operations
# βœ… Real transaction di Core Testnet

Scenario 3: Liquidity Operations

# URL: http://localhost:3000/liquidity
# Test:
# βœ… Add liquidity to pools
# βœ… Remove liquidity
# βœ… View LP token balance
# βœ… Yield farming rewards
# βœ… Real transaction confirmations

Scenario 4: Lending/Borrowing

# URL: http://localhost:3000/lending
# Test:
# βœ… Deposit assets as collateral
# βœ… Borrow against collateral
# βœ… Repay loans
# βœ… Fixed-cost lending system
# βœ… Zero-interest compliance

Scenario 5: Swap Operations

# URL: http://localhost:3000/swap
# Test:
# βœ… Token swaps (CORE <-> BTC)
# βœ… Price impact calculation
# βœ… Slippage tolerance
# βœ… Transaction execution
# βœ… Real DEX functionality

Scenario 6: Portfolio Management

# URL: http://localhost:3000/portfolio
# Test:
# βœ… Asset allocation view
# βœ… Performance tracking
# βœ… Transaction history
# βœ… Yield analytics
# βœ… Risk assessment

πŸ” Real Transaction Verification

Setiap kali melakukan transaksi:

  1. Confirm di MetaMask

    • Check gas fee
    • Confirm transaction
    • Wait for confirmation
  2. Verify di Core Explorer

    # Buka: https://scan.test2.btcs.network
    # Search transaction hash
    # Verify:
    # βœ… Transaction status: Success
    # βœ… Gas used
    # βœ… Contract interaction
    # βœ… Event logs
  3. Check Balance Updates

    • Refresh UI
    • Verify balance changes
    • Check transaction history

πŸ“Š Contract Addresses untuk Verification

Deployed Contracts (Core Testnet):

# Core Tokens
CORE Token: 0xcAc1f956DE2B60059971cC8CeE12aC11B5295E0a
BTC Token:  0xC515E6030cC331Be138E9FE011ce23dd6eA0c9d6

# TULL Contracts
Simple TULL:    0x0B306BF915C4d645ff596e518fAf3F9669b97016
Optimized TULL: 0xc6e7DF5E7b4f2A278906862b61205850344D4e7d

# Core Native Staking
Staking Contract: 0xDB8cFf278adCCF9E9b5da745B44E754fC4EE3C76
stCORE Token:     0xBb2180ebd78ce97360503434eD37fcf4a1Df61c3

# DeFi Protocols
Liquidity Pool: 0x50EEf481cae4250d252Ae577A09bF514f224C6C4
LP Token:       0x62c20Aa1e0272312BC100b4e23B4DC1Ed96dD7D1
Revenue Model:  0xDEb1E9a6Be7Baf84208BB6E10aC9F9bbE1D70809

πŸ› Troubleshooting

Issue 1: Wallet Connection Failed

# Solution:
# 1. Check WalletConnect Project ID di .env
# 2. Clear browser cache
# 3. Restart development server
# 4. Try different browser

Issue 2: Transaction Failed

# Solution:
# 1. Check tCORE balance untuk gas
# 2. Increase gas limit
# 3. Check network (harus Core Testnet 1114)
# 4. Verify contract addresses

Issue 3: Balance Not Updating

# Solution:
# 1. Refresh page
# 2. Check transaction confirmation
# 3. Wait for block confirmation
# 4. Check RPC connection

Issue 4: Contract Interaction Failed

# Solution:
# 1. Check contract addresses di .env
# 2. Verify ABI compatibility
# 3. Check function parameters
# 4. Increase gas limit

πŸ“ˆ Success Metrics

UI/UX Testing berhasil jika:

βœ… Wallet Connection

  • MetaMask connects successfully
  • Network switches to Core Testnet
  • Balance displays correctly

βœ… Transaction Execution

  • All buttons clickable and responsive
  • Transaction prompts appear
  • MetaMask confirmation works
  • Transactions confirm on-chain

βœ… Real-time Updates

  • Balance updates after transactions
  • Transaction history shows
  • Portfolio reflects changes

βœ… Cross-feature Integration

  • Staking -> Portfolio updates
  • Liquidity -> Balance changes
  • Lending -> Collateral tracking

βœ… Error Handling

  • Graceful error messages
  • Network error recovery
  • Transaction failure handling

🎯 Demo Script untuk Hackathon

5-Minute Demo Flow:

  1. [0:00-0:30] Setup & Connection

    • Open localhost:3000
    • Connect MetaMask
    • Show Core Testnet network
  2. [0:30-1:30] Dashboard Overview

    • Show portfolio balance
    • Highlight real contract addresses
    • Display transaction history
  3. [1:30-2:30] Staking Demo

    • Navigate to staking
    • Stake some tCORE
    • Show real transaction hash
    • Verify on Core Explorer
  4. [2:30-3:30] Liquidity Demo

    • Add liquidity to pool
    • Show LP token minting
    • Real transaction confirmation
  5. [3:30-4:30] Lending Demo

    • Deposit collateral
    • Borrow against it
    • Show zero-interest system
  6. [4:30-5:00] Verification

    • Show all transactions on Core Explorer
    • Highlight real addresses
    • Demonstrate live functionality

πŸš€ Ready untuk Hackathon!

Setelah mengikuti guide ini, Anda akan memiliki:

  • βœ… Fully functional UI dengan real wallet
  • βœ… Real transactions di Core Testnet
  • βœ… Verifiable transaction proofs
  • βœ… Complete demo scenario
  • βœ… Professional presentation ready

Good luck dengan hackathon! πŸ†