Skip to content

Commit 8b046ba

Browse files
Harman-singh-waraichHarman-singh-waraich
committed
Merge branch 'dev' into feat/google-translate
2 parents 73ce498 + b43cd4f commit 8b046ba

File tree

5 files changed

+222
-83
lines changed

5 files changed

+222
-83
lines changed

‎kleros-sdk/package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kleros/kleros-sdk",
3-
"version": "2.1.8",
3+
"version": "2.1.9",
44
"description": "SDK for Kleros version 2",
55
"repository": "[email protected]:kleros/kleros-v2.git",
66
"homepage": "https://github.com/kleros/kleros-v2/tree/master/kleros-sdk#readme",
@@ -39,13 +39,16 @@
3939
"rimraf": "^6.0.1",
4040
"ts-node": "^10.9.2",
4141
"typescript": "^5.6.3",
42+
"viem": "^2.21.48",
4243
"vitest": "^1.6.0"
4344
},
4445
"dependencies": {
4546
"@reality.eth/reality-eth-lib": "^3.2.44",
4647
"@urql/core": "^5.0.8",
4748
"mustache": "^4.2.0",
48-
"viem": "^2.21.48",
4949
"zod": "^3.23.8"
50+
},
51+
"peerDependencies": {
52+
"viem": "^2.21.48"
5053
}
5154
}

‎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

+80-75
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,87 +24,90 @@ 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 TranslateProvider from "./context/TranslateProvider";
2629
import { SentryRoutes } from "./utils/sentry";
2730

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

‎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

+7-5
Original file line numberDiff line numberDiff line change
@@ -5021,6 +5021,8 @@ __metadata:
50215021
viem: "npm:^2.21.48"
50225022
vitest: "npm:^1.6.0"
50235023
zod: "npm:^3.23.8"
5024+
peerDependencies:
5025+
viem: ^2.21.48
50245026
languageName: unknown
50255027
linkType: soft
50265028

@@ -5248,7 +5250,7 @@ __metadata:
52485250
react: "npm:^18.3.1"
52495251
react-chartjs-2: "npm:^4.3.1"
52505252
react-dom: "npm:^18.3.1"
5251-
react-error-boundary: "npm:^3.1.4"
5253+
react-error-boundary: "npm:^4.1.2"
52525254
react-identicons: "npm:^1.2.5"
52535255
react-is: "npm:^18.3.1"
52545256
react-loading-skeleton: "npm:^3.5.0"
@@ -29441,14 +29443,14 @@ __metadata:
2944129443
languageName: node
2944229444
linkType: hard
2944329445

29444-
"react-error-boundary@npm:^3.1.4":
29445-
version: 3.1.4
29446-
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"
2944729449
dependencies:
2944829450
"@babel/runtime": "npm:^7.12.5"
2944929451
peerDependencies:
2945029452
react: ">=16.13.1"
29451-
checksum: 10/7418637bf352b88f35ff3798e6faa094ee046df9d422fc08f54c017892c3c0738dac661ba3d64d97209464e7a60e7fbbeffdbeaee5edc38f3aaf5f1f4a8bf610
29453+
checksum: 10/a8b59e5ef891bb6c48874d12c72bbd1a9292a56751adeee5666e228bd3a4913084329a9c21f7baafa0df68dc6d25e18883edb25946ce5763981885cbb93786eb
2945229454
languageName: node
2945329455
linkType: hard
2945429456

0 commit comments

Comments
 (0)