Skip to content

Commit

Permalink
Merge branch 'dev' into feat/google-translate
Browse files Browse the repository at this point in the history
  • Loading branch information
@Harman-singh-waraich
Harman-singh-waraich committed Dec 4, 2024
2 parents 73ce498 + b43cd4f commit 8b046ba
Show file tree
Hide file tree
Showing 5 changed files with 222 additions and 83 deletions.
7 changes: 5 additions & 2 deletions kleros-sdk/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kleros/kleros-sdk",
"version": "2.1.8",
"version": "2.1.9",
"description": "SDK for Kleros version 2",
"repository": "[email protected]:kleros/kleros-v2.git",
"homepage": "https://github.com/kleros/kleros-v2/tree/master/kleros-sdk#readme",
Expand Down Expand Up @@ -39,13 +39,16 @@
"rimraf": "^6.0.1",
"ts-node": "^10.9.2",
"typescript": "^5.6.3",
"viem": "^2.21.48",
"vitest": "^1.6.0"
},
"dependencies": {
"@reality.eth/reality-eth-lib": "^3.2.44",
"@urql/core": "^5.0.8",
"mustache": "^4.2.0",
"viem": "^2.21.48",
"zod": "^3.23.8"
},
"peerDependencies": {
"viem": "^2.21.48"
}
}
2 changes: 1 addition & 1 deletion web/package.json
View file
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
155 changes: 80 additions & 75 deletions web/src/app.tsx
View file
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,87 +24,90 @@ import Web3Provider from "context/Web3Provider";
import Loader from "components/Loader";
import Layout from "layout/index";

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

const App: React.FC = () => {
return (
<StyledComponentsProvider>
<Web3Provider>
<QueryClientProvider>
<GraphqlBatcherProvider>
<AtlasProvider>
<IsListProvider>
<NewDisputeProvider>
<TranslateProvider>
<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>
</TranslateProvider>
</NewDisputeProvider>
</IsListProvider>
</AtlasProvider>
</GraphqlBatcherProvider>
</QueryClientProvider>
</Web3Provider>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Web3Provider>
<QueryClientProvider>
<GraphqlBatcherProvider>
<AtlasProvider>
<IsListProvider>
<NewDisputeProvider>
<TranslateProvider>
<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>
</TranslateProvider>
</NewDisputeProvider>
</IsListProvider>
</AtlasProvider>
</GraphqlBatcherProvider>
</QueryClientProvider>
</Web3Provider>
</ErrorBoundary>
</StyledComponentsProvider>
);
};
Expand Down
129 changes: 129 additions & 0 deletions web/src/components/ErrorFallback.tsx
View file
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;
12 changes: 7 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5021,6 +5021,8 @@ __metadata:
viem: "npm:^2.21.48"
vitest: "npm:^1.6.0"
zod: "npm:^3.23.8"
peerDependencies:
viem: ^2.21.48
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -5248,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 @@ -29441,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

0 comments on commit 8b046ba

Please sign in to comment.