Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/error page #1770

Merged
merged 5 commits into from
Dec 3, 2024
Merged

Feat/error page #1770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63655a0
feat(web): error-page
Harman-singh-waraich Dec 3, 2024
2750166
Merge branch 'dev' into feat/error-page
Harman-singh-waraich Dec 3, 2024
8dbdb09
Merge branch 'chore/update-viem-wagmi' into feat/error-page
Harman-singh-waraich Dec 3, 2024
0e46e62
chore(web): code-rabbit-review
Harman-singh-waraich Dec 3, 2024
e9a8a7d
Merge branch 'dev' into feat/error-page
alcercu Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
"react": "^18.3.1",
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.3.1",
"react-error-boundary": "^3.1.4",
"react-error-boundary": "^4.1.2",
"react-identicons": "^1.2.5",
"react-is": "^18.3.1",
"react-loading-skeleton": "^3.5.0",
Expand Down
151 changes: 78 additions & 73 deletions web/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { lazy, Suspense } from "react";

import { ErrorBoundary } from "react-error-boundary";
import { Route } from "react-router-dom";

import "react-loading-skeleton/dist/skeleton.css";
import "react-toastify/dist/ReactToastify.css";

import AtlasProvider from "context/AtlasProvider";
import GraphqlBatcherProvider from "context/GraphqlBatcher";
import IsListProvider from "context/IsListProvider";
Expand All @@ -22,84 +24,87 @@ import Web3Provider from "context/Web3Provider";
import Loader from "components/Loader";
import Layout from "layout/index";

import ErrorFallback from "./components/ErrorFallback";
import { SentryRoutes } from "./utils/sentry";

const App: React.FC = () => {
return (
<StyledComponentsProvider>
<Web3Provider>
<QueryClientProvider>
<GraphqlBatcherProvider>
<AtlasProvider>
<IsListProvider>
<NewDisputeProvider>
<SentryRoutes>
<Route path="/" element={<Layout />}>
<Route
index
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Home />
</Suspense>
}
/>
<Route
path="cases/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Cases />
</Suspense>
}
/>
<Route
path="courts/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Courts />
</Suspense>
}
/>
<Route
path="dashboard/:page/:order/:filter"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Dashboard />
</Suspense>
}
/>
<Route
path="resolver/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<DisputeResolver />
</Suspense>
}
/>
<Route
path="get-pnk/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<GetPnk />
</Suspense>
}
/>
<Route
path="settings/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Settings />
</Suspense>
}
/>
<Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
</Route>
</SentryRoutes>
</NewDisputeProvider>
</IsListProvider>
</AtlasProvider>
</GraphqlBatcherProvider>
</QueryClientProvider>
</Web3Provider>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Web3Provider>
<QueryClientProvider>
<GraphqlBatcherProvider>
<AtlasProvider>
<IsListProvider>
<NewDisputeProvider>
<SentryRoutes>
<Route path="/" element={<Layout />}>
<Route
index
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Home />
</Suspense>
}
/>
<Route
path="cases/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Cases />
</Suspense>
}
/>
<Route
path="courts/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Courts />
</Suspense>
}
/>
<Route
path="dashboard/:page/:order/:filter"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Dashboard />
</Suspense>
}
/>
<Route
path="resolver/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<DisputeResolver />
</Suspense>
}
/>
<Route
path="get-pnk/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<GetPnk />
</Suspense>
}
/>
<Route
path="settings/*"
element={
<Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
<Settings />
</Suspense>
}
/>
<Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
</Route>
</SentryRoutes>
</NewDisputeProvider>
</IsListProvider>
</AtlasProvider>
</GraphqlBatcherProvider>
</QueryClientProvider>
</Web3Provider>
</ErrorBoundary>
</StyledComponentsProvider>
);
};
Expand Down
129 changes: 129 additions & 0 deletions web/src/components/ErrorFallback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import React from "react";
import styled, { css } from "styled-components";

import { FallbackProps } from "react-error-boundary";

import { Button } from "@kleros/ui-components-library";

import ErrorIcon from "svgs/icons/warning-outline.svg";

import { landscapeStyle } from "styles/landscapeStyle";
import { responsiveSize } from "styles/responsiveSize";

import HeroImage from "./HeroImage";

const Container = styled.div`
width: 100%;
height: 100vh;
background-color: ${({ theme }) => theme.lightBackground};
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
max-width: 1780px;
margin: 0 auto;
`;

const ErrorContainer = styled.div`
display: flex;
width: 100%;
gap: 48px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
${landscapeStyle(
() => css`
flex-direction: row;
justify-content: space-between;
`
)}
`;

const InfoWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
flex: 1;
${landscapeStyle(
() => css`
align-items: start;
`
)}
`;

const textCss = css`
margin: 0;
text-align: center;
white-space: pre-line;

${landscapeStyle(
() => css`
text-align: left;
`
)}
`;

const Header = styled.h1`
${textCss}
`;

const Subtitle = styled.h3`
${textCss}
max-width: 735px;
`;

const HeaderIconContainer = styled.div`
svg {
width: 64px;
height: 64px;
path {
fill: ${({ theme }) => theme.error};
}
}
`;

const ButtonsContainer = styled.div`
display: flex;
gap: 16px;
`;

const IconContainer = styled.div`
svg {
width: 250px;
height: 250px;
path {
fill: ${({ theme }) => theme.whiteBackground};
}
}
`;

const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
// eslint-disable-next-line no-console
console.log("Error:", { error });

return (
<>
<HeroImage />
<Container>
<ErrorContainer>
<InfoWrapper>
<HeaderIconContainer>
<ErrorIcon />
</HeaderIconContainer>
<Header>Ooops, Something went wrong in Athens!</Header>
<Subtitle>Please reload the page or contact us if the issue is not resolved.</Subtitle>
<ButtonsContainer>
<Button text={"Reload"} onClick={resetErrorBoundary} />
<a href={"https://t.me/kleros"} target="_blank" rel="noreferrer">
<Button text={"Contact us"} />
</a>
</ButtonsContainer>
</InfoWrapper>
<IconContainer>
<ErrorIcon />
</IconContainer>
</ErrorContainer>
</Container>
</>
);
};

export default ErrorFallback;
10 changes: 5 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5250,7 +5250,7 @@ __metadata:
react: "npm:^18.3.1"
react-chartjs-2: "npm:^4.3.1"
react-dom: "npm:^18.3.1"
react-error-boundary: "npm:^3.1.4"
react-error-boundary: "npm:^4.1.2"
react-identicons: "npm:^1.2.5"
react-is: "npm:^18.3.1"
react-loading-skeleton: "npm:^3.5.0"
Expand Down Expand Up @@ -29443,14 +29443,14 @@ __metadata:
languageName: node
linkType: hard

"react-error-boundary@npm:^3.1.4":
version: 3.1.4
resolution: "react-error-boundary@npm:3.1.4"
"react-error-boundary@npm:^4.1.2":
version: 4.1.2
resolution: "react-error-boundary@npm:4.1.2"
dependencies:
"@babel/runtime": "npm:^7.12.5"
peerDependencies:
react: ">=16.13.1"
checksum: 10/7418637bf352b88f35ff3798e6faa094ee046df9d422fc08f54c017892c3c0738dac661ba3d64d97209464e7a60e7fbbeffdbeaee5edc38f3aaf5f1f4a8bf610
checksum: 10/a8b59e5ef891bb6c48874d12c72bbd1a9292a56751adeee5666e228bd3a4913084329a9c21f7baafa0df68dc6d25e18883edb25946ce5763981885cbb93786eb
languageName: node
linkType: hard

Expand Down
Loading