Skip to content

Commit 07d053c

Browse files
kemurukemuru
authored
Merge branch 'dev' into feat/hover-effects-everywhere
2 parents 738314b + 468b0c8 commit 07d053c

File tree

4 files changed

+213
-79
lines changed

4 files changed

+213
-79
lines changed

‎web/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"react": "^18.3.1",
107107
"react-chartjs-2": "^4.3.1",
108108
"react-dom": "^18.3.1",
109-
"react-error-boundary": "^3.1.4",
109+
"react-error-boundary": "^4.1.2",
110110
"react-identicons": "^1.2.5",
111111
"react-is": "^18.3.1",
112112
"react-loading-skeleton": "^3.5.0",

‎web/src/app.tsx

+78-73
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { lazy, Suspense } from "react";
22

3+
import { ErrorBoundary } from "react-error-boundary";
34
import { Route } from "react-router-dom";
45

56
import "react-loading-skeleton/dist/skeleton.css";
67
import "react-toastify/dist/ReactToastify.css";
8+
79
import AtlasProvider from "context/AtlasProvider";
810
import GraphqlBatcherProvider from "context/GraphqlBatcher";
911
import IsListProvider from "context/IsListProvider";
@@ -22,84 +24,87 @@ import Web3Provider from "context/Web3Provider";
2224
import Loader from "components/Loader";
2325
import Layout from "layout/index";
2426

27+
import ErrorFallback from "./components/ErrorFallback";
2528
import { SentryRoutes } from "./utils/sentry";
2629

2730
const App: React.FC = () => {
2831
return (
2932
<StyledComponentsProvider>
30-
<Web3Provider>
31-
<QueryClientProvider>
32-
<GraphqlBatcherProvider>
33-
<AtlasProvider>
34-
<IsListProvider>
35-
<NewDisputeProvider>
36-
<SentryRoutes>
37-
<Route path="/" element={<Layout />}>
38-
<Route
39-
index
40-
element={
41-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
42-
<Home />
43-
</Suspense>
44-
}
45-
/>
46-
<Route
47-
path="cases/*"
48-
element={
49-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
50-
<Cases />
51-
</Suspense>
52-
}
53-
/>
54-
<Route
55-
path="courts/*"
56-
element={
57-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
58-
<Courts />
59-
</Suspense>
60-
}
61-
/>
62-
<Route
63-
path="dashboard/:page/:order/:filter"
64-
element={
65-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
66-
<Dashboard />
67-
</Suspense>
68-
}
69-
/>
70-
<Route
71-
path="resolver/*"
72-
element={
73-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
74-
<DisputeResolver />
75-
</Suspense>
76-
}
77-
/>
78-
<Route
79-
path="get-pnk/*"
80-
element={
81-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
82-
<GetPnk />
83-
</Suspense>
84-
}
85-
/>
86-
<Route
87-
path="settings/*"
88-
element={
89-
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
90-
<Settings />
91-
</Suspense>
92-
}
93-
/>
94-
<Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
95-
</Route>
96-
</SentryRoutes>
97-
</NewDisputeProvider>
98-
</IsListProvider>
99-
</AtlasProvider>
100-
</GraphqlBatcherProvider>
101-
</QueryClientProvider>
102-
</Web3Provider>
33+
<ErrorBoundary FallbackComponent={ErrorFallback}>
34+
<Web3Provider>
35+
<QueryClientProvider>
36+
<GraphqlBatcherProvider>
37+
<AtlasProvider>
38+
<IsListProvider>
39+
<NewDisputeProvider>
40+
<SentryRoutes>
41+
<Route path="/" element={<Layout />}>
42+
<Route
43+
index
44+
element={
45+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
46+
<Home />
47+
</Suspense>
48+
}
49+
/>
50+
<Route
51+
path="cases/*"
52+
element={
53+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
54+
<Cases />
55+
</Suspense>
56+
}
57+
/>
58+
<Route
59+
path="courts/*"
60+
element={
61+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
62+
<Courts />
63+
</Suspense>
64+
}
65+
/>
66+
<Route
67+
path="dashboard/:page/:order/:filter"
68+
element={
69+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
70+
<Dashboard />
71+
</Suspense>
72+
}
73+
/>
74+
<Route
75+
path="resolver/*"
76+
element={
77+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
78+
<DisputeResolver />
79+
</Suspense>
80+
}
81+
/>
82+
<Route
83+
path="get-pnk/*"
84+
element={
85+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
86+
<GetPnk />
87+
</Suspense>
88+
}
89+
/>
90+
<Route
91+
path="settings/*"
92+
element={
93+
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
94+
<Settings />
95+
</Suspense>
96+
}
97+
/>
98+
<Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
99+
</Route>
100+
</SentryRoutes>
101+
</NewDisputeProvider>
102+
</IsListProvider>
103+
</AtlasProvider>
104+
</GraphqlBatcherProvider>
105+
</QueryClientProvider>
106+
</Web3Provider>
107+
</ErrorBoundary>
103108
</StyledComponentsProvider>
104109
);
105110
};

‎web/src/components/ErrorFallback.tsx

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React from "react";
2+
import styled, { css } from "styled-components";
3+
4+
import { FallbackProps } from "react-error-boundary";
5+
6+
import { Button } from "@kleros/ui-components-library";
7+
8+
import ErrorIcon from "svgs/icons/warning-outline.svg";
9+
10+
import { landscapeStyle } from "styles/landscapeStyle";
11+
import { responsiveSize } from "styles/responsiveSize";
12+
13+
import HeroImage from "./HeroImage";
14+
15+
const Container = styled.div`
16+
width: 100%;
17+
height: 100vh;
18+
background-color: ${({ theme }) => theme.lightBackground};
19+
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
20+
max-width: 1780px;
21+
margin: 0 auto;
22+
`;
23+
24+
const ErrorContainer = styled.div`
25+
display: flex;
26+
width: 100%;
27+
gap: 48px 16px;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: center;
31+
${landscapeStyle(
32+
() => css`
33+
flex-direction: row;
34+
justify-content: space-between;
35+
`
36+
)}
37+
`;
38+
39+
const InfoWrapper = styled.div`
40+
display: flex;
41+
flex-direction: column;
42+
gap: 32px;
43+
align-items: center;
44+
flex: 1;
45+
${landscapeStyle(
46+
() => css`
47+
align-items: start;
48+
`
49+
)}
50+
`;
51+
52+
const textCss = css`
53+
margin: 0;
54+
text-align: center;
55+
white-space: pre-line;
56+
57+
${landscapeStyle(
58+
() => css`
59+
text-align: left;
60+
`
61+
)}
62+
`;
63+
64+
const Header = styled.h1`
65+
${textCss}
66+
`;
67+
68+
const Subtitle = styled.h3`
69+
${textCss}
70+
max-width: 735px;
71+
`;
72+
73+
const HeaderIconContainer = styled.div`
74+
svg {
75+
width: 64px;
76+
height: 64px;
77+
path {
78+
fill: ${({ theme }) => theme.error};
79+
}
80+
}
81+
`;
82+
83+
const ButtonsContainer = styled.div`
84+
display: flex;
85+
gap: 16px;
86+
`;
87+
88+
const IconContainer = styled.div`
89+
svg {
90+
width: 250px;
91+
height: 250px;
92+
path {
93+
fill: ${({ theme }) => theme.whiteBackground};
94+
}
95+
}
96+
`;
97+
98+
const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
99+
// eslint-disable-next-line no-console
100+
console.log("Error:", { error });
101+
102+
return (
103+
<>
104+
<HeroImage />
105+
<Container>
106+
<ErrorContainer>
107+
<InfoWrapper>
108+
<HeaderIconContainer>
109+
<ErrorIcon />
110+
</HeaderIconContainer>
111+
<Header>Ooops, Something went wrong in Athens!</Header>
112+
<Subtitle>Please reload the page or contact us if the issue is not resolved.</Subtitle>
113+
<ButtonsContainer>
114+
<Button text={"Reload"} onClick={resetErrorBoundary} />
115+
<a href={"https://t.me/kleros"} target="_blank" rel="noreferrer">
116+
<Button text={"Contact us"} />
117+
</a>
118+
</ButtonsContainer>
119+
</InfoWrapper>
120+
<IconContainer>
121+
<ErrorIcon />
122+
</IconContainer>
123+
</ErrorContainer>
124+
</Container>
125+
</>
126+
);
127+
};
128+
129+
export default ErrorFallback;

‎yarn.lock

+5-5
Original file line numberDiff line numberDiff line change
@@ -5250,7 +5250,7 @@ __metadata:
52505250
react: "npm:^18.3.1"
52515251
react-chartjs-2: "npm:^4.3.1"
52525252
react-dom: "npm:^18.3.1"
5253-
react-error-boundary: "npm:^3.1.4"
5253+
react-error-boundary: "npm:^4.1.2"
52545254
react-identicons: "npm:^1.2.5"
52555255
react-is: "npm:^18.3.1"
52565256
react-loading-skeleton: "npm:^3.5.0"
@@ -29443,14 +29443,14 @@ __metadata:
2944329443
languageName: node
2944429444
linkType: hard
2944529445

29446-
"react-error-boundary@npm:^3.1.4":
29447-
version: 3.1.4
29448-
resolution: "react-error-boundary@npm:3.1.4"
29446+
"react-error-boundary@npm:^4.1.2":
29447+
version: 4.1.2
29448+
resolution: "react-error-boundary@npm:4.1.2"
2944929449
dependencies:
2945029450
"@babel/runtime": "npm:^7.12.5"
2945129451
peerDependencies:
2945229452
react: ">=16.13.1"
29453-
checksum: 10/7418637bf352b88f35ff3798e6faa094ee046df9d422fc08f54c017892c3c0738dac661ba3d64d97209464e7a60e7fbbeffdbeaee5edc38f3aaf5f1f4a8bf610
29453+
checksum: 10/a8b59e5ef891bb6c48874d12c72bbd1a9292a56751adeee5666e228bd3a4913084329a9c21f7baafa0df68dc6d25e18883edb25946ce5763981885cbb93786eb
2945429454
languageName: node
2945529455
linkType: hard
2945629456

0 commit comments

Comments
 (0)