55fe7d10eb
- Fix all TypeScript compilation errors (40+ fixes) - Add missing type definitions (TransactionRequest, SafeInfo) - Fix TransactionRequestStatus vs TransactionStatus confusion - Fix import paths and provider type issues - Fix test file errors and mock providers - Implement comprehensive security features - AES-GCM encryption with PBKDF2 key derivation - Input validation and sanitization - Rate limiting and nonce management - Replay attack prevention - Access control and authorization - Add comprehensive test suite - Integration tests for transaction flow - Security validation tests - Wallet management tests - Encryption and rate limiter tests - E2E tests with Playwright - Add extensive documentation - 12 numbered guides (setup, development, API, security, etc.) - Security documentation and audit reports - Code review and testing reports - Project organization documentation - Update dependencies - Update axios to latest version (security fix) - Update React types to v18 - Fix peer dependency warnings - Add development tooling - CI/CD workflows (GitHub Actions) - Pre-commit hooks (Husky) - Linting and formatting (Prettier, ESLint) - Security audit workflow - Performance benchmarking - Reorganize project structure - Move reports to docs/reports/ - Clean up root directory - Organize documentation - Add new features - Smart wallet management (Gnosis Safe, ERC4337) - Transaction execution and approval workflows - Balance management and token support - Error boundary and monitoring (Sentry) - Fix WalletConnect configuration - Handle missing projectId gracefully - Add environment variable template
97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { Component, ErrorInfo, ReactNode } from "react";
|
|
import { Box, Button, Heading, Text, VStack } from "@chakra-ui/react";
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
errorInfo: ErrorInfo | null;
|
|
}
|
|
|
|
class ErrorBoundary extends Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = {
|
|
hasError: false,
|
|
error: null,
|
|
errorInfo: null,
|
|
};
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
return {
|
|
hasError: true,
|
|
error,
|
|
errorInfo: null,
|
|
};
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
// Log error to error tracking service
|
|
console.error("Error caught by boundary:", error, errorInfo);
|
|
|
|
this.setState({
|
|
error,
|
|
errorInfo,
|
|
});
|
|
|
|
// In production, send to error tracking service
|
|
if (process.env.NODE_ENV === "production") {
|
|
// Example: sendToErrorTracking(error, errorInfo);
|
|
}
|
|
}
|
|
|
|
handleReset = () => {
|
|
this.setState({
|
|
hasError: false,
|
|
error: null,
|
|
errorInfo: null,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<Box p={8} textAlign="center">
|
|
<VStack spacing={4}>
|
|
<Heading size="lg" color="red.400">
|
|
Something went wrong
|
|
</Heading>
|
|
<Text color="gray.400">
|
|
{this.state.error?.message || "An unexpected error occurred"}
|
|
</Text>
|
|
{process.env.NODE_ENV === "development" && this.state.errorInfo && (
|
|
<Box
|
|
p={4}
|
|
bg="gray.800"
|
|
borderRadius="md"
|
|
maxW="4xl"
|
|
overflow="auto"
|
|
textAlign="left"
|
|
>
|
|
<Text fontSize="sm" fontFamily="mono" whiteSpace="pre-wrap">
|
|
{this.state.error?.stack}
|
|
{"\n\n"}
|
|
{this.state.errorInfo.componentStack}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
<Button onClick={this.handleReset} colorScheme="blue">
|
|
Try Again
|
|
</Button>
|
|
</VStack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary;
|