mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-21 23:47:56 +00:00
Implement comprehensive error handling system
- shared/lib/error-handler.ts: Substrate error → user-friendly EN/KMR messages
* Maps 30+ blockchain error types (Staking, Identity, Tiki, ValidatorPool, DEX, Governance)
* extractDispatchError() - Parse Substrate DispatchError
* getUserFriendlyError() - Convert to bilingual messages
* handleBlockchainError() - Toast helper with auto language detection
* SUCCESS_MESSAGES - Success templates with {{param}} interpolation
- web/src/components/ErrorBoundary.tsx: Global React error boundary
* Catches unhandled React errors with fallback UI
* Error details with stack trace (developer mode)
* Try Again / Reload Page / Go Home buttons
* RouteErrorBoundary - Smaller boundary for individual routes
* Support email link (info@pezkuwichain.io)
- shared/components/AsyncComponent.tsx: Async data loading patterns
* CardSkeleton / ListItemSkeleton / TableSkeleton - Animated loading states
* LoadingState - Kurdistan green spinner with custom message
* ErrorState - Red alert with retry button
* EmptyState - Empty inbox icon with optional action
* AsyncComponent<T> - Generic wrapper handling Loading/Error/Empty/Success states
- web/src/App.tsx: Wrapped with ErrorBoundary
* All React errors now caught gracefully
* Beautiful fallback UI instead of white screen of death
Production-ready error handling with bilingual support (EN/KMR).
This commit is contained in:
Claude
@@ -0,0 +1,282 @@
|
||||
// ========================================
|
||||
// Async Component Pattern
|
||||
// ========================================
|
||||
// Standard pattern for loading/error/empty states
|
||||
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Loader2, AlertCircle, Inbox, RefreshCw } from 'lucide-react';
|
||||
|
||||
// ========================================
|
||||
// LOADING SKELETON
|
||||
// ========================================
|
||||
|
||||
export const CardSkeleton: React.FC = () => {
|
||||
return (
|
||||
<Card className="bg-gray-900 border-gray-800 animate-pulse">
|
||||
<CardContent className="p-6">
|
||||
<div className="h-6 bg-gray-800 rounded w-1/3 mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-gray-800 rounded"></div>
|
||||
<div className="h-4 bg-gray-800 rounded w-5/6"></div>
|
||||
<div className="h-4 bg-gray-800 rounded w-4/6"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export const ListItemSkeleton: React.FC = () => {
|
||||
return (
|
||||
<div className="flex items-center gap-4 p-4 bg-gray-900 border border-gray-800 rounded-lg animate-pulse">
|
||||
<div className="w-12 h-12 bg-gray-800 rounded-full"></div>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 bg-gray-800 rounded w-1/4"></div>
|
||||
<div className="h-3 bg-gray-800 rounded w-1/2"></div>
|
||||
</div>
|
||||
<div className="h-8 w-20 bg-gray-800 rounded"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const TableSkeleton: React.FC<{ rows?: number }> = ({ rows = 5 }) => {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: rows }).map((_, i) => (
|
||||
<div key={i} className="flex gap-4 p-3 bg-gray-900 border border-gray-800 rounded animate-pulse">
|
||||
<div className="h-4 bg-gray-800 rounded flex-1"></div>
|
||||
<div className="h-4 bg-gray-800 rounded w-24"></div>
|
||||
<div className="h-4 bg-gray-800 rounded w-32"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// LOADING COMPONENT
|
||||
// ========================================
|
||||
|
||||
export const LoadingState: React.FC<{
|
||||
message?: string;
|
||||
fullScreen?: boolean;
|
||||
}> = ({ message = 'Loading...', fullScreen = false }) => {
|
||||
const content = (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Loader2 className="w-12 h-12 text-green-500 animate-spin" />
|
||||
<p className="text-gray-400">{message}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (fullScreen) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
||||
<Card className="bg-gray-900 border-gray-800 p-8">
|
||||
<CardContent>{content}</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// ERROR STATE
|
||||
// ========================================
|
||||
|
||||
export const ErrorState: React.FC<{
|
||||
message?: string;
|
||||
error?: Error | string;
|
||||
onRetry?: () => void;
|
||||
fullScreen?: boolean;
|
||||
}> = ({
|
||||
message = 'An error occurred',
|
||||
error,
|
||||
onRetry,
|
||||
fullScreen = false,
|
||||
}) => {
|
||||
const errorMessage = typeof error === 'string' ? error : error?.message;
|
||||
|
||||
const content = (
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">{message}</strong>
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-gray-400 mb-4">{errorMessage}</p>
|
||||
)}
|
||||
{onRetry && (
|
||||
<Button
|
||||
onClick={onRetry}
|
||||
size="sm"
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Try Again
|
||||
</Button>
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
|
||||
if (fullScreen) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<CardContent className="p-8">{content}</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className="p-4">{content}</div>;
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// EMPTY STATE
|
||||
// ========================================
|
||||
|
||||
export const EmptyState: React.FC<{
|
||||
message?: string;
|
||||
description?: string;
|
||||
icon?: ReactNode;
|
||||
action?: {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
fullScreen?: boolean;
|
||||
}> = ({
|
||||
message = 'No data found',
|
||||
description,
|
||||
icon,
|
||||
action,
|
||||
fullScreen = false,
|
||||
}) => {
|
||||
const content = (
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
{icon || <Inbox className="w-16 h-16 text-gray-600" />}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{message}</h3>
|
||||
{description && <p className="text-sm text-gray-400">{description}</p>}
|
||||
</div>
|
||||
{action && (
|
||||
<Button onClick={action.onClick} className="bg-green-600 hover:bg-green-700">
|
||||
{action.label}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (fullScreen) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 p-8">
|
||||
<CardContent>{content}</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className="p-12">{content}</div>;
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// ASYNC COMPONENT WRAPPER
|
||||
// ========================================
|
||||
|
||||
export interface AsyncComponentProps<T> {
|
||||
/** Loading state */
|
||||
isLoading: boolean;
|
||||
/** Error object */
|
||||
error?: Error | string | null;
|
||||
/** Data */
|
||||
data?: T | null;
|
||||
/** Children render function */
|
||||
children: (data: T) => ReactNode;
|
||||
/** Custom loading component */
|
||||
LoadingComponent?: React.ComponentType;
|
||||
/** Custom error component */
|
||||
ErrorComponent?: React.ComponentType<{ error: Error | string; onRetry?: () => void }>;
|
||||
/** Custom empty component */
|
||||
EmptyComponent?: React.ComponentType;
|
||||
/** Retry callback */
|
||||
onRetry?: () => void;
|
||||
/** Loading message */
|
||||
loadingMessage?: string;
|
||||
/** Error message */
|
||||
errorMessage?: string;
|
||||
/** Empty message */
|
||||
emptyMessage?: string;
|
||||
/** Full screen mode */
|
||||
fullScreen?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Standard async component pattern
|
||||
* Handles loading, error, empty, and success states
|
||||
*
|
||||
* @example
|
||||
* <AsyncComponent
|
||||
* isLoading={loading}
|
||||
* error={error}
|
||||
* data={courses}
|
||||
* onRetry={refetch}
|
||||
* >
|
||||
* {(courses) => <CourseList courses={courses} />}
|
||||
* </AsyncComponent>
|
||||
*/
|
||||
export function AsyncComponent<T>({
|
||||
isLoading,
|
||||
error,
|
||||
data,
|
||||
children,
|
||||
LoadingComponent,
|
||||
ErrorComponent,
|
||||
EmptyComponent,
|
||||
onRetry,
|
||||
loadingMessage = 'Loading...',
|
||||
errorMessage = 'Failed to load data',
|
||||
emptyMessage = 'No data available',
|
||||
fullScreen = false,
|
||||
}: AsyncComponentProps<T>): JSX.Element {
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
if (LoadingComponent) {
|
||||
return <LoadingComponent />;
|
||||
}
|
||||
return <LoadingState message={loadingMessage} fullScreen={fullScreen} />;
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
if (ErrorComponent) {
|
||||
return <ErrorComponent error={error} onRetry={onRetry} />;
|
||||
}
|
||||
return (
|
||||
<ErrorState
|
||||
message={errorMessage}
|
||||
error={error}
|
||||
onRetry={onRetry}
|
||||
fullScreen={fullScreen}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (!data || (Array.isArray(data) && data.length === 0)) {
|
||||
if (EmptyComponent) {
|
||||
return <EmptyComponent />;
|
||||
}
|
||||
return <EmptyState message={emptyMessage} fullScreen={fullScreen} />;
|
||||
}
|
||||
|
||||
// Success state - render children with data
|
||||
return <>{children(data)}</>;
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
// ========================================
|
||||
// Error Handler & User-Friendly Messages
|
||||
// ========================================
|
||||
// Convert blockchain errors to human-readable messages
|
||||
|
||||
import type { ApiPromise } from '@polkadot/api';
|
||||
import type { DispatchError } from '@polkadot/types/interfaces';
|
||||
|
||||
// ========================================
|
||||
// ERROR MESSAGE MAPPINGS
|
||||
// ========================================
|
||||
|
||||
interface ErrorMessage {
|
||||
en: string;
|
||||
kmr: string; // Kurmanji
|
||||
}
|
||||
|
||||
/**
|
||||
* User-friendly error messages for common blockchain errors
|
||||
* Key format: "palletName.errorName"
|
||||
*/
|
||||
const ERROR_MESSAGES: Record<string, ErrorMessage> = {
|
||||
// Staking errors
|
||||
'staking.InsufficientBond': {
|
||||
en: 'Bond amount too small. Please check minimum staking requirement.',
|
||||
kmr: 'Mîqdara bond zêde piçûk e. Ji kerema xwe mîqdara kêmtirîn kontrol bike.',
|
||||
},
|
||||
'staking.AlreadyBonded': {
|
||||
en: 'You have already bonded tokens. Use "Bond More" to add additional stake.',
|
||||
kmr: 'We berê token bond kirine. Ji bo zêdekirin "Bond More" bikar bîne.',
|
||||
},
|
||||
'staking.NotStash': {
|
||||
en: 'This account is not a stash account. Please use your staking controller.',
|
||||
kmr: 'Ev account stash nîne. Ji kerema xwe controller bikar bîne.',
|
||||
},
|
||||
'staking.NoMoreChunks': {
|
||||
en: 'Too many unbonding chunks. Please wait for previous unbondings to complete.',
|
||||
kmr: 'Zêde chunk unbonding hene. Ji kerema xwe li çavkaniyên berê bisekine.',
|
||||
},
|
||||
|
||||
// Identity KYC errors
|
||||
'identityKyc.AlreadyApplied': {
|
||||
en: 'You already have a pending citizenship application. Please wait for approval.',
|
||||
kmr: 'We berê serlêdana welatîtiyê heye. Ji kerema xwe li pejirandina bisekine.',
|
||||
},
|
||||
'identityKyc.AlreadyApproved': {
|
||||
en: 'Your citizenship application is already approved!',
|
||||
kmr: 'Serlêdana welatîtiya we berê hatiye pejirandin!',
|
||||
},
|
||||
'identityKyc.NotApproved': {
|
||||
en: 'Your KYC is not approved yet. Please complete citizenship application first.',
|
||||
kmr: 'KYC-ya we hîn nehatiye pejirandin. Pêşî serlêdana welatîtiyê temam bike.',
|
||||
},
|
||||
'identityKyc.IdentityNotSet': {
|
||||
en: 'Please set your identity information first.',
|
||||
kmr: 'Ji kerema xwe pêşî agahdariya nasnameya xwe saz bike.',
|
||||
},
|
||||
|
||||
// Tiki errors
|
||||
'tiki.RoleAlreadyAssigned': {
|
||||
en: 'This role is already assigned to the user.',
|
||||
kmr: 'Ev rol berê ji bikarhêner re hatiye veqetandin.',
|
||||
},
|
||||
'tiki.UnauthorizedRoleAssignment': {
|
||||
en: 'You do not have permission to assign this role.',
|
||||
kmr: 'We destûra veqetandina vê rolê nîne.',
|
||||
},
|
||||
'tiki.RoleNotFound': {
|
||||
en: 'The specified role does not exist.',
|
||||
kmr: 'Rola diyarkirî tune ye.',
|
||||
},
|
||||
|
||||
// ValidatorPool errors
|
||||
'validatorPool.AlreadyInPool': {
|
||||
en: 'You are already registered in the validator pool.',
|
||||
kmr: 'We berê di pool-a validator de tomar bûyî.',
|
||||
},
|
||||
'validatorPool.NotInPool': {
|
||||
en: 'You are not registered in the validator pool.',
|
||||
kmr: 'We di pool-a validator de tomar nebûyî.',
|
||||
},
|
||||
'validatorPool.InsufficientStake': {
|
||||
en: 'Insufficient stake for validator pool. Please increase your stake.',
|
||||
kmr: 'Stake ji bo pool-a validator kêm e. Ji kerema xwe stake-ya xwe zêde bike.',
|
||||
},
|
||||
|
||||
// DEX/AssetConversion errors
|
||||
'assetConversion.PoolNotFound': {
|
||||
en: 'Liquidity pool not found for this token pair.',
|
||||
kmr: 'Pool-a liquidity ji bo vê cuda-token nehat dîtin.',
|
||||
},
|
||||
'assetConversion.InsufficientLiquidity': {
|
||||
en: 'Insufficient liquidity in pool. Try a smaller amount.',
|
||||
kmr: 'Liquidity-ya pool-ê kêm e. Mîqdareke piçûktir biceribîne.',
|
||||
},
|
||||
'assetConversion.SlippageTooHigh': {
|
||||
en: 'Price impact too high. Increase slippage tolerance or reduce amount.',
|
||||
kmr: 'Bandora bihayê zêde mezin e. Toleransa slippage zêde bike an mîqdarê kêm bike.',
|
||||
},
|
||||
'assetConversion.AmountTooSmall': {
|
||||
en: 'Swap amount too small. Minimum swap amount not met.',
|
||||
kmr: 'Mîqdara swap zêde piçûk e. Mîqdara kêmtirîn nehatiye gihîştin.',
|
||||
},
|
||||
|
||||
// Balance/Asset errors
|
||||
'balances.InsufficientBalance': {
|
||||
en: 'Insufficient balance. You do not have enough tokens for this transaction.',
|
||||
kmr: 'Balance-ya we kêm e. Ji bo vê transaction token-ên we têr nînin.',
|
||||
},
|
||||
'balances.ExistentialDeposit': {
|
||||
en: 'Amount is below existential deposit. Account would be reaped.',
|
||||
kmr: 'Mîqdar ji existential deposit kêmtir e. Account dê were jêbirin.',
|
||||
},
|
||||
'assets.BalanceLow': {
|
||||
en: 'Asset balance too low for this operation.',
|
||||
kmr: 'Balance-ya asset-ê ji bo vê operation zêde kêm e.',
|
||||
},
|
||||
'assets.NoPermission': {
|
||||
en: 'You do not have permission to perform this operation on this asset.',
|
||||
kmr: 'We destûra vê operation-ê li ser vê asset-ê nîne.',
|
||||
},
|
||||
|
||||
// Governance errors
|
||||
'referenda.NotOngoing': {
|
||||
en: 'This referendum is not currently active.',
|
||||
kmr: 'Ev referendum niha ne çalak e.',
|
||||
},
|
||||
'referenda.AlreadyVoted': {
|
||||
en: 'You have already voted on this referendum.',
|
||||
kmr: 'We berê li ser vê referendum-ê deng da.',
|
||||
},
|
||||
'convictionVoting.NotVoter': {
|
||||
en: 'You are not eligible to vote. Citizenship required.',
|
||||
kmr: 'We mafê dengdanê nîne. Welatîtî pêwîst e.',
|
||||
},
|
||||
|
||||
// Treasury errors
|
||||
'treasury.InsufficientProposersBalance': {
|
||||
en: 'Insufficient balance to submit treasury proposal. Bond required.',
|
||||
kmr: 'Ji bo pêşniyara treasury-yê balance kêm e. Bond pêwîst e.',
|
||||
},
|
||||
|
||||
// System/General errors
|
||||
'system.CallFiltered': {
|
||||
en: 'This action is not permitted by the system filters.',
|
||||
kmr: 'Ev çalakî ji hêla fîltireyên sîstemê ve nayê destûrdan.',
|
||||
},
|
||||
'BadOrigin': {
|
||||
en: 'Unauthorized: You do not have permission for this action.',
|
||||
kmr: 'Destûrnîn: We destûra vê çalakiyê nîne.',
|
||||
},
|
||||
'Module': {
|
||||
en: 'A blockchain module error occurred. Please try again.',
|
||||
kmr: 'Xeletiya module-ya blockchain-ê qewimî. Ji kerema xwe dîsa biceribîne.',
|
||||
},
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// ERROR EXTRACTION & FORMATTING
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Extract error information from DispatchError
|
||||
*/
|
||||
export function extractDispatchError(
|
||||
api: ApiPromise,
|
||||
dispatchError: DispatchError
|
||||
): {
|
||||
section: string;
|
||||
name: string;
|
||||
docs: string;
|
||||
raw: string;
|
||||
} {
|
||||
if (dispatchError.isModule) {
|
||||
const decoded = api.registry.findMetaError(dispatchError.asModule);
|
||||
return {
|
||||
section: decoded.section,
|
||||
name: decoded.name,
|
||||
docs: decoded.docs.join(' ').trim(),
|
||||
raw: `${decoded.section}.${decoded.name}`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
section: 'Unknown',
|
||||
name: dispatchError.type,
|
||||
docs: dispatchError.toString(),
|
||||
raw: dispatchError.toString(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get user-friendly error message
|
||||
* Falls back to blockchain docs if no custom message exists
|
||||
*/
|
||||
export function getUserFriendlyError(
|
||||
api: ApiPromise,
|
||||
dispatchError: DispatchError,
|
||||
language: 'en' | 'kmr' = 'en'
|
||||
): string {
|
||||
const errorInfo = extractDispatchError(api, dispatchError);
|
||||
const errorKey = errorInfo.raw;
|
||||
|
||||
// Check if we have a custom message
|
||||
const customMessage = ERROR_MESSAGES[errorKey];
|
||||
if (customMessage) {
|
||||
return customMessage[language];
|
||||
}
|
||||
|
||||
// Fallback to blockchain documentation
|
||||
if (errorInfo.docs && errorInfo.docs.length > 0) {
|
||||
return errorInfo.docs;
|
||||
}
|
||||
|
||||
// Final fallback
|
||||
return `Transaction failed: ${errorInfo.section}.${errorInfo.name}`;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TOAST HELPER
|
||||
// ========================================
|
||||
|
||||
export interface ToastFunction {
|
||||
(options: {
|
||||
title: string;
|
||||
description: string;
|
||||
variant?: 'default' | 'destructive';
|
||||
}): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle blockchain error with toast notification
|
||||
* Automatically extracts user-friendly message
|
||||
*/
|
||||
export function handleBlockchainError(
|
||||
error: any,
|
||||
api: ApiPromise | null,
|
||||
toast: ToastFunction,
|
||||
language: 'en' | 'kmr' = 'en'
|
||||
): void {
|
||||
console.error('Blockchain error:', error);
|
||||
|
||||
// If it's a dispatch error from transaction callback
|
||||
if (error?.isModule !== undefined && api) {
|
||||
const userMessage = getUserFriendlyError(api, error, language);
|
||||
toast({
|
||||
title: language === 'en' ? 'Transaction Failed' : 'Transaction Têk Çû',
|
||||
description: userMessage,
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// If it's a standard error object
|
||||
if (error?.message) {
|
||||
toast({
|
||||
title: language === 'en' ? 'Error' : 'Xeletî',
|
||||
description: error.message,
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// If it's a string
|
||||
if (typeof error === 'string') {
|
||||
toast({
|
||||
title: language === 'en' ? 'Error' : 'Xeletî',
|
||||
description: error,
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Generic fallback
|
||||
toast({
|
||||
title: language === 'en' ? 'Error' : 'Xeletî',
|
||||
description:
|
||||
language === 'en'
|
||||
? 'An unexpected error occurred. Please try again.'
|
||||
: 'Xeletîyek nediyar qewimî. Ji kerema xwe dîsa biceribîne.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SUCCESS MESSAGES
|
||||
// ========================================
|
||||
|
||||
export interface SuccessMessage {
|
||||
en: string;
|
||||
kmr: string;
|
||||
}
|
||||
|
||||
export const SUCCESS_MESSAGES: Record<string, SuccessMessage> = {
|
||||
// Staking
|
||||
'staking.bonded': {
|
||||
en: 'Successfully staked {{amount}} HEZ. Rewards will start in the next era.',
|
||||
kmr: '{{amount}} HEZ bi serkeftî stake kirin. Xelat di era pêşîn de dest pê dike.',
|
||||
},
|
||||
'staking.unbonded': {
|
||||
en: 'Unbonded {{amount}} HEZ. Withdrawal available in {{days}} days.',
|
||||
kmr: '{{amount}} HEZ unbond kirin. Di {{days}} rojan de derbasdarî dibe.',
|
||||
},
|
||||
'staking.nominated': {
|
||||
en: 'Successfully nominated {{count}} validators.',
|
||||
kmr: 'Bi serkeftî {{count}} validator nomînekirin.',
|
||||
},
|
||||
'staking.scoreStarted': {
|
||||
en: 'Staking score tracking started! Your score will accumulate over time.',
|
||||
kmr: 'Şopa staking dest pê kir! Xala we dê bi demê re kom bibe.',
|
||||
},
|
||||
|
||||
// Citizenship
|
||||
'citizenship.applied': {
|
||||
en: 'Citizenship application submitted successfully! We will review your application.',
|
||||
kmr: 'Serlêdana welatîtiyê bi serkeftî hate şandin! Em ê serlêdana we binirxînin.',
|
||||
},
|
||||
|
||||
// Governance
|
||||
'governance.voted': {
|
||||
en: 'Your vote has been recorded successfully!',
|
||||
kmr: 'Deng-a we bi serkeftî hate tomarkirin!',
|
||||
},
|
||||
'governance.proposed': {
|
||||
en: 'Proposal submitted successfully! Voting will begin soon.',
|
||||
kmr: 'Pêşniyar bi serkeftî hate şandin! Dengdan hêdî dest pê dike.',
|
||||
},
|
||||
|
||||
// DEX
|
||||
'dex.swapped': {
|
||||
en: 'Successfully swapped {{from}} {{fromToken}} for {{to}} {{toToken}}',
|
||||
kmr: 'Bi serkeftî {{from}} {{fromToken}} bo {{to}} {{toToken}} guhertin',
|
||||
},
|
||||
'dex.liquidityAdded': {
|
||||
en: 'Successfully added liquidity to the pool!',
|
||||
kmr: 'Bi serkeftî liquidity li pool-ê zêde kir!',
|
||||
},
|
||||
'dex.liquidityRemoved': {
|
||||
en: 'Successfully removed liquidity from the pool!',
|
||||
kmr: 'Bi serkeftî liquidity ji pool-ê derxist!',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle successful blockchain transaction
|
||||
*/
|
||||
export function handleBlockchainSuccess(
|
||||
messageKey: string,
|
||||
toast: ToastFunction,
|
||||
params: Record<string, string | number> = {},
|
||||
language: 'en' | 'kmr' = 'en'
|
||||
): void {
|
||||
const template = SUCCESS_MESSAGES[messageKey];
|
||||
|
||||
if (!template) {
|
||||
toast({
|
||||
title: language === 'en' ? 'Success' : 'Serkeft',
|
||||
description: language === 'en' ? 'Transaction successful!' : 'Transaction serkeftî!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Replace template variables like {{amount}}
|
||||
let message = template[language];
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
message = message.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
|
||||
});
|
||||
|
||||
toast({
|
||||
title: language === 'en' ? 'Success' : 'Serkeft',
|
||||
description: message,
|
||||
});
|
||||
}
|
||||
+51
-48
@@ -19,61 +19,64 @@ import { AuthProvider } from '@/contexts/AuthContext';
|
||||
import { ProtectedRoute } from '@/components/ProtectedRoute';
|
||||
import NotFound from '@/pages/NotFound';
|
||||
import { Toaster } from '@/components/ui/toaster';
|
||||
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||
import './App.css';
|
||||
import './i18n/config';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
|
||||
<AuthProvider>
|
||||
<AppProvider>
|
||||
<PolkadotProvider endpoint="ws://127.0.0.1:9944">
|
||||
<WalletProvider>
|
||||
<WebSocketProvider>
|
||||
<IdentityProvider>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<ErrorBoundary>
|
||||
<AuthProvider>
|
||||
<AppProvider>
|
||||
<PolkadotProvider endpoint="ws://127.0.0.1:9944">
|
||||
<WalletProvider>
|
||||
<WebSocketProvider>
|
||||
<IdentityProvider>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
|
||||
<Route path="/email-verification" element={<EmailVerification />} />
|
||||
<Route path="/reset-password" element={<PasswordReset />} />
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/be-citizen" element={<BeCitizen />} />
|
||||
<Route path="/dashboard" element={
|
||||
<ProtectedRoute>
|
||||
<Dashboard />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/profile/settings" element={
|
||||
<ProtectedRoute>
|
||||
<ProfileSettings />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/admin" element={
|
||||
<ProtectedRoute requireAdmin>
|
||||
<AdminPanel />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/wallet" element={
|
||||
<ProtectedRoute>
|
||||
<WalletDashboard />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/reserves" element={
|
||||
<ProtectedRoute>
|
||||
<ReservesDashboardPage />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</IdentityProvider>
|
||||
</WebSocketProvider>
|
||||
</WalletProvider>
|
||||
</PolkadotProvider>
|
||||
</AppProvider>
|
||||
</AuthProvider>
|
||||
<Toaster />
|
||||
<Route path="/email-verification" element={<EmailVerification />} />
|
||||
<Route path="/reset-password" element={<PasswordReset />} />
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/be-citizen" element={<BeCitizen />} />
|
||||
<Route path="/dashboard" element={
|
||||
<ProtectedRoute>
|
||||
<Dashboard />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/profile/settings" element={
|
||||
<ProtectedRoute>
|
||||
<ProfileSettings />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/admin" element={
|
||||
<ProtectedRoute requireAdmin>
|
||||
<AdminPanel />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/wallet" element={
|
||||
<ProtectedRoute>
|
||||
<WalletDashboard />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/reserves" element={
|
||||
<ProtectedRoute>
|
||||
<ReservesDashboardPage />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</IdentityProvider>
|
||||
</WebSocketProvider>
|
||||
</WalletProvider>
|
||||
</PolkadotProvider>
|
||||
</AppProvider>
|
||||
</AuthProvider>
|
||||
<Toaster />
|
||||
</ErrorBoundary>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
// ========================================
|
||||
// Error Boundary Component
|
||||
// ========================================
|
||||
// Catches React errors and displays fallback UI
|
||||
|
||||
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
errorInfo: ErrorInfo | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Global Error Boundary
|
||||
* Catches unhandled errors in React component tree
|
||||
*
|
||||
* @example
|
||||
* <ErrorBoundary>
|
||||
* <App />
|
||||
* </ErrorBoundary>
|
||||
*/
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): Partial<State> {
|
||||
// Update state so next render shows fallback UI
|
||||
return {
|
||||
hasError: true,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
|
||||
// Log error to console
|
||||
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||
|
||||
// Update state with error details
|
||||
this.setState({
|
||||
error,
|
||||
errorInfo,
|
||||
});
|
||||
|
||||
// Call custom error handler if provided
|
||||
if (this.props.onError) {
|
||||
this.props.onError(error, errorInfo);
|
||||
}
|
||||
|
||||
// In production, you might want to log to an error reporting service
|
||||
// Example: Sentry.captureException(error);
|
||||
}
|
||||
|
||||
handleReset = (): void => {
|
||||
this.setState({
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
});
|
||||
};
|
||||
|
||||
handleReload = (): void => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
handleGoHome = (): void => {
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
render(): ReactNode {
|
||||
if (this.state.hasError) {
|
||||
// Use custom fallback if provided
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
// Default error UI
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-2xl w-full">
|
||||
<CardContent className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500 mb-6">
|
||||
<AlertTriangle className="h-6 w-6 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<h2 className="text-xl font-bold mb-2 text-white">Something Went Wrong</h2>
|
||||
<p className="mb-4">
|
||||
An unexpected error occurred. We apologize for the inconvenience.
|
||||
</p>
|
||||
{this.state.error && (
|
||||
<details className="mt-4 p-4 bg-gray-950 rounded border border-gray-700">
|
||||
<summary className="cursor-pointer text-sm font-semibold text-gray-400 hover:text-gray-300">
|
||||
Error Details (for developers)
|
||||
</summary>
|
||||
<div className="mt-3 text-xs font-mono space-y-2">
|
||||
<div>
|
||||
<strong className="text-red-400">Error:</strong>
|
||||
<pre className="mt-1 text-gray-400 whitespace-pre-wrap">
|
||||
{this.state.error.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
{this.state.errorInfo && (
|
||||
<div>
|
||||
<strong className="text-red-400">Component Stack:</strong>
|
||||
<pre className="mt-1 text-gray-400 whitespace-pre-wrap">
|
||||
{this.state.errorInfo.componentStack}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<Button
|
||||
onClick={this.handleReset}
|
||||
className="bg-green-600 hover:bg-green-700 flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Try Again
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.handleReload}
|
||||
variant="outline"
|
||||
className="border-gray-700 hover:bg-gray-800 flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Reload Page
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.handleGoHome}
|
||||
variant="outline"
|
||||
className="border-gray-700 hover:bg-gray-800 flex items-center gap-2"
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
Go Home
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-sm text-gray-500">
|
||||
If this problem persists, please contact support at{' '}
|
||||
<a
|
||||
href="mailto:info@pezkuwichain.io"
|
||||
className="text-green-400 hover:underline"
|
||||
>
|
||||
info@pezkuwichain.io
|
||||
</a>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// No error, render children normally
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ROUTE-LEVEL ERROR BOUNDARY
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Smaller error boundary for individual routes
|
||||
* Less intrusive, doesn't take over the whole screen
|
||||
*/
|
||||
export const RouteErrorBoundary: React.FC<{
|
||||
children: ReactNode;
|
||||
routeName?: string;
|
||||
}> = ({ children, routeName = 'this page' }) => {
|
||||
const [hasError, setHasError] = React.useState(false);
|
||||
|
||||
const handleReset = () => {
|
||||
setHasError(false);
|
||||
};
|
||||
|
||||
if (hasError) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">Error loading {routeName}</strong>
|
||||
An error occurred while rendering this component.
|
||||
<div className="mt-4">
|
||||
<Button onClick={handleReset} size="sm" className="bg-green-600 hover:bg-green-700">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorBoundary fallback={<RouteErrorFallback routeName={routeName} onReset={handleReset} />}>
|
||||
{children}
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
const RouteErrorFallback: React.FC<{ routeName: string; onReset: () => void }> = ({
|
||||
routeName,
|
||||
onReset,
|
||||
}) => {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">Error loading {routeName}</strong>
|
||||
An unexpected error occurred.
|
||||
<div className="mt-4">
|
||||
<Button onClick={onReset} size="sm" className="bg-green-600 hover:bg-green-700">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user