Transaction Detail Screen - Quick Start Guide

🎯 What Was Implemented

A comprehensive transaction detail screen that displays full information about individual transactions with proper handling of edge cases.

📍 Location

Screen: app/transaction/[id].tsx
Feature Module: src/features/transactions/
Tests: __tests__/transactionDetail.test.tsx

✨ Key Features

1. Transaction Information Display

✅ Amount with direction (+/-)
✅ Transaction status (Successful/Pending/Failed)
✅ Sender and recipient addresses
✅ Transaction hash
✅ Memo (when present)
✅ Timestamp
✅ Asset type

2. Interactive Features

✅ Copy to clipboard (hash, addresses, memo)
✅ Open in Stellar Explorer
✅ Contact name resolution
✅ Visual copy feedback

3. Error Handling

✅ Missing data gracefully handled
✅ Transaction not found state
✅ Clipboard failure alerts
✅ Explorer unavailability handling

🚀 How to Use

Navigate to Detail Screen

// From transaction list
import { useRouter } from 'expo-router';

const router = useRouter();
router.push(`/transaction/${transactionId}`);

Access Transaction Helpers

import { 
  getTransactionStatus, 
  formatTransactionAmount,
  getTransactionHash 
} from '@/features/transactions';

const status = getTransactionStatus(transaction);
const amount = formatTransactionAmount(transaction, userPublicKey);
const hash = getTransactionHash(transaction);

🧩 Component Structure

TransactionDetailScreen
├── Hero Section
│   ├── Direction Icon
│   ├── Amount Display
│   ├── Date
│   └── Status Badge
├── Details Card
│   ├── Type Row
│   ├── Status Row
│   ├── Memo Row (conditional)
│   ├── Hash Row
│   ├── Sender Row
│   └── Recipient Row
└── Explorer Section (conditional)
    └── Explorer Button or Unavailable Message

📊 Data Fields Handled

Required Fields

id - Transaction identifier
amount - Transaction amount (fallback: 'N/A')
from - Sender address (conditionally shown)
to - Recipient address (conditionally shown)

Optional Fields

hash or transaction_hash - Transaction hash
created_at or createdAt or timestamp - Date
memo - Memo text
memo_type - Memo type (text, id, hash, return)
transaction_successful - Success boolean
is_pending - Pending boolean
asset - Asset code (default: 'XLM')

🎨 Status States

Successful ✓

{
  transaction_successful: true,
  is_pending: false
}

Green checkmark icon
"Successful" label

Pending ⏱

{
  is_pending: true
}

Yellow clock icon
"Pending" label

Failed ✗

{
  transaction_successful: false
}

Red X icon
"Failed" label

🧪 Running Tests

# Run all tests
npm test

# Run transaction detail tests only
npm test transactionDetail.test.tsx

# Run with coverage
npm test -- --coverage

📝 Example Transaction Data

const exampleTransaction = {
  id: 'tx123',
  from: 'GABCD...XYZ',
  to: 'GXYZ...ABC',
  amount: '100.0000000',
  asset: 'XLM',
  created_at: '2024-01-15T10:30:00Z',
  hash: 'abc123...def456',
  memo: 'Payment for services',
  memo_type: 'text',
  transaction_successful: true,
  is_pending: false,
};

🔗 Integration Points

From History Screen

// app/(tabs)/history.tsx
<TransactionListItem
  transaction={tx}
  currentPublicKey={publicKey}
  onPress={(tx) => router.push(`/transaction/${tx.id}`)}
/>

With Contact Store

import { useAppStore } from '@/store/appStore';
import { resolveAddressLabel } from '@/utils/contacts';

const contacts = useAppStore((state) => state.contacts);
const label = resolveAddressLabel(address, contacts);

With Explorer

import { getExplorerTxUrl } from '@/services/stellar';

const explorerUrl = getExplorerTxUrl(transactionHash);
if (explorerUrl) {
  await Linking.openURL(explorerUrl);
}

🛠 Helper Functions

Status Detection

import { getTransactionStatus } from '@/features/transactions';

const status = getTransactionStatus(transaction);
// Returns: 'successful' | 'pending' | 'failed'

Direction Check

import { isSentTransaction } from '@/features/transactions';

const isSent = isSentTransaction(transaction, userPublicKey);
// Returns: true if user sent this transaction

Data Validation

import { validateTransactionData } from '@/features/transactions';

const { isValid, missingFields } = validateTransactionData(transaction);
// Returns validation result with missing field list

🐛 Common Issues & Solutions

Issue: Transaction not found

Solution: Ensure transaction exists in wallet store and ID is correct

Issue: Explorer link not working

Solution: Check network configuration and hash availability

Issue: Copy not working

Solution: Verify expo-clipboard permissions and installation

Issue: Date showing "Unknown date"

Solution: Check date field format (should be ISO 8601)

📚 Related Documentation

🎓 Best Practices

Always handle missing data - Use optional chaining and fallbacks
Validate before display - Check data exists before rendering
Provide user feedback - Show loading, error, and success states
Use helper functions - Don't duplicate transaction logic
Test edge cases - Missing fields, empty strings, null values

💡 Quick Tips

Use getTransactionHash() instead of direct field access
Use formatTransactionDate() for consistent date formatting
Use validateTransactionData() before critical operations
Check explorer URL availability before showing link
Always provide copy feedback to users

Need Help? Check the full documentation in src/features/transactions/README.md

FilesExpand file tree

TRANSACTION_DETAIL_QUICK_START.md

Latest commit

History