YieldVault-RWA/frontend/src/components/ErrorFallback.tsx at 6fab34640bbd9069949f4bf1640a868d88b1a549 · amehsamuel200225-sketch/YieldVault-RWA · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React from "react";
import { RefreshCw, Home, AlertOctagon } from "lucide-react";
import { goHome, reloadPage } from "./errorNavigation";

interface ErrorFallbackProps {
  error: Error;
  resetError: () => void;
  onReload?: () => void;
  onGoHome?: () => void;
}

const ErrorFallback: React.FC<ErrorFallbackProps> = ({
  error,
  onReload = reloadPage,
  onGoHome = goHome,
}) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        padding: "24px",
      }}
    >
      <div
        className="glass-panel"
        style={{
          maxWidth: "480px",
          width: "100%",
          padding: "36px 32px",
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "24px",
        }}
      >
        <div
          style={{
            background: "var(--bg-error)",
            color: "var(--text-error)",
            padding: "16px",
            borderRadius: "50%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginBottom: "8px",
          }}
        >
          <AlertOctagon size={48} />
        </div>

        <div>
          <h1
            className="text-gradient"
            style={{ fontSize: "2rem", marginBottom: "8px" }}
          >
            Something went wrong
          </h1>
          <p
            style={{
              color: "var(--text-secondary)",
              fontSize: "1.05rem",
              marginBottom: "20px",
              lineHeight: "1.5",
            }}
          >
            We've encountered an unexpected issue. Our team has been notified and
            is working on it.
          </p>
          {error?.message && (
            <div
              style={{
                background: "rgba(0,0,0,0.2)",
                border: "1px solid var(--border-glass)",
                borderRadius: "var(--radius-md)",
                padding: "12px",
                fontSize: "0.9rem",
                color: "var(--text-tertiary)",
                maxWidth: "100%",
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
                fontFamily: "monospace",
              }}
            >
              {error.message}
            </div>
          )}
        </div>

        <div
          style={{
            display: "flex",
            gap: "16px",
            width: "100%",
            flexDirection: "column",
            marginTop: "8px",
          }}
        >
          <button
            className="btn btn-primary"
            onClick={onReload}
            style={{ width: "100%", padding: "14px" }}
          >
            <RefreshCw size={18} />
            Reload Page
          </button>

          <button
            className="btn btn-outline"
            onClick={onGoHome}
            style={{ width: "100%", padding: "14px" }}
          >
            <Home size={18} />
            Go Home
          </button>
        </div>
      </div>
    </div>
  );
};

export default ErrorFallback;