Quick Start: Deposit Error Feedback System

What's New

Three new components have been added to improve error feedback for failed deposits:

DepositErrorAlert - Semantic error alert component
DepositForm - Deposit form with validation
SEP24Flow - Enhanced deposit flow with error handling

Quick Examples

Using DepositErrorAlert

import { DepositErrorAlert } from './components/DepositErrorAlert';
import type { DepositError } from './components/DepositErrorAlert';

const [error, setError] = useState<DepositError | null>(null);

// Show an error
<DepositErrorAlert
  error={error}
  onDismiss={() => setError(null)}
  onRetry={() => handleRetry()}
  dismissible={true}
/>

// Create an error object
const networkError: DepositError = {
  type: 'network',
  title: 'Connection Error',
  message: 'Failed to process your deposit. Please check your internet connection.',
  details: 'Error: Network timeout after 30 seconds',
  retryable: true,
};
setError(networkError);

Using DepositForm

import { DepositForm } from './components/DepositForm';

<DepositForm
  fields={uiConfig.fieldRequirements.deposit}
  assetCode="USDC"
  onSubmit={(values) => {
    console.log('Deposit details:', values);
    // Send to backend API
  }}
/>

Using Enhanced SEP24Flow

import { SEP24Flow } from './components/SEP24Flow';

// For deposits
<SEP24Flow type="deposit" uiConfig={config} />

// For withdrawals
<SEP24Flow type="withdraw" uiConfig={config} />

Error Types Reference

Type	Color	Use Case	Retryable
`validation`	Amber	Field validation fails	No
`network`	Rose	API/connection failure	Yes
`kyc`	Orange	Identity verification required	Yes
`server`	Red	Backend error (5xx)	Yes
`asset`	Cyan	Asset unavailable	No
`amount`	Amber	Amount invalid	No

Validation Rules

Amount

✅ Format: Decimal with 1-2 places (e.g., 50.00)
✅ Range: $10 - $100,000
❌ Less than $10
❌ More than $100,000
❌ Non-decimal format

Email

✅ Standard email format
❌ Missing @ or domain
❌ Invalid characters

Wallet Address

✅ Stellar G-address (56 characters starting with G)
❌ Wrong length
❌ Invalid characters
❌ Wrong prefix

Required Fields

✅ Must contain value
❌ Empty or whitespace only

File Locations

dashboard/src/components/
├── DepositErrorAlert.tsx          (NEW - 101 lines)
├── DepositForm.tsx                (NEW - 253 lines)
├── SEP24Flow.tsx                  (ENHANCED - +78 lines)
└── DEPOSIT_ERROR_FEEDBACK.md      (DOCUMENTATION - 230 lines)

Build & Deployment

# Build the dashboard
cd dashboard
npm run build

# Expected output
# ✓ 1945 modules transformed
# ✓ No errors or warnings
# ✓ Build size: ~50 KB gzip

Testing

Quick Manual Test - Validation Errors

Navigate to Deposit flow
Select an asset (e.g., USDC)
Leave amount empty and click Submit
See validation error message
Fix the error and resubmit

Quick Manual Test - KYC Error

Complete deposit form
Cancel KYC verification
See "Verification Required" error
Click "Try Again" to restart KYC

Quick Manual Test - Keyboard Navigation

Tab through all form fields
Use arrow keys in dropdowns
Press Enter to submit
Press Escape to dismiss alerts (if applicable)

Key Features

✅ Semantic Errors: Different error types for different scenarios ✅ Color-Coded: Visual indication of error severity ✅ Accessible: Full ARIA support, keyboard navigation ✅ Dismissible: Users can close errors ✅ Retryable: Some errors allow retry attempts ✅ Validated: Real-time field-level validation ✅ Clear Messaging: User-friendly error descriptions ✅ Smooth Animations: Professional UX with transitions

Component Props Reference

DepositErrorAlert

interface DepositErrorAlertProps {
  error: DepositError | null;
  onDismiss?: () => void;
  onRetry?: () => void;
  dismissible?: boolean;
}

interface DepositError {
  type: 'validation' | 'network' | 'kyc' | 'server' | 'asset' | 'amount';
  title: string;
  message: string;
  details?: string;
  retryable?: boolean;
}

DepositForm

interface DepositFormProps {
  fields: FieldRequirement[];
  assetCode: string;
  onSubmit: (values: FormValues) => void;
}

SEP24Flow

interface SEP24FlowProps {
  type: 'deposit' | 'withdraw';
  uiConfig: UiConfig;
}

Integration with Backend

To integrate with real backend APIs:

DepositForm onSubmit: Call your deposit API
Error Handling: Catch errors and create DepositError objects
Error Display: Set error state to show in DepositErrorAlert
Retry Logic: Implement retry handler

const handleDepositFormSubmit = async (values) => {
  try {
    const response = await api.createDeposit({
      asset: selectedAsset,
      ...values,
    });
    // Success - navigate to next step
    goToStep(3);
  } catch (error) {
    // Handle error
    if (error.code === 'NETWORK_ERROR') {
      setError({
        type: 'network',
        title: 'Connection Error',
        message: 'Failed to create deposit',
        retryable: true,
      });
    }
    // etc.
  }
};

Accessibility Checklist

Support & Documentation

Full documentation: DEPOSIT_ERROR_FEEDBACK.md
Implementation summary: ../IMPLEMENTATION_SUMMARY.md
Component source files with inline comments
Commit message with detailed feature list

Branch: feature/issue-585-dashboard-improve-error-feedback-fo Status: ✅ Ready for review and testing Last Updated: June 28, 2026

FilesExpand file tree

QUICK_START_ERROR_FEEDBACK.md

Latest commit

History