From 46ed0663e26e0cf8c0b2951556acc11cff4be6eb Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 3 Dec 2024 13:36:27 +0530 Subject: [PATCH 1/5] chore(kleros-sdk): move-viem-to-peer-dependencies --- kleros-sdk/package.json | 5 ++++- web/package.json | 2 +- yarn.lock | 28 ++++++++++++++++++++++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/kleros-sdk/package.json b/kleros-sdk/package.json index c7cc0aeb8..76035b80f 100644 --- a/kleros-sdk/package.json +++ b/kleros-sdk/package.json @@ -39,13 +39,16 @@ "rimraf": "^6.0.1", "ts-node": "^10.9.2", "typescript": "^5.6.3", + "viem": "^2.21.53", "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.53" } } diff --git a/web/package.json b/web/package.json index 0e0f3c17c..fd4a41e8c 100644 --- a/web/package.json +++ b/web/package.json @@ -117,7 +117,7 @@ "react-toastify": "^9.1.3", "react-use": "^17.5.1", "styled-components": "^5.3.3", - "viem": "^2.21.48", + "viem": "^2.21.53", "wagmi": "^2.13.0" } } diff --git a/yarn.lock b/yarn.lock index 31014172f..7f6997509 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5018,9 +5018,11 @@ __metadata: rimraf: "npm:^6.0.1" ts-node: "npm:^10.9.2" typescript: "npm:^5.6.3" - viem: "npm:^2.21.48" + viem: "npm:^2.21.53" vitest: "npm:^1.6.0" zod: "npm:^3.23.8" + peerDependencies: + viem: ^2.21.53 languageName: unknown linkType: soft @@ -5260,7 +5262,7 @@ __metadata: react-use: "npm:^17.5.1" styled-components: "npm:^5.3.3" typescript: "npm:^5.6.3" - viem: "npm:^2.21.48" + viem: "npm:^2.21.53" vite: "npm:^5.4.11" vite-plugin-node-polyfills: "npm:^0.21.0" vite-plugin-svgr: "npm:^4.3.0" @@ -34857,6 +34859,28 @@ __metadata: languageName: node linkType: hard +"viem@npm:^2.21.53": + version: 2.21.53 + resolution: "viem@npm:2.21.53" + dependencies: + "@noble/curves": "npm:1.6.0" + "@noble/hashes": "npm:1.5.0" + "@scure/bip32": "npm:1.5.0" + "@scure/bip39": "npm:1.4.0" + abitype: "npm:1.0.6" + isows: "npm:1.0.6" + ox: "npm:0.1.2" + webauthn-p256: "npm:0.0.10" + ws: "npm:8.18.0" + peerDependencies: + typescript: ">=5.0.4" + peerDependenciesMeta: + typescript: + optional: true + checksum: 10/fe41684a63b4d493b7cfb7f30451d5275c51dda196047c949710f05cf920bb22d5f3ff16375d1854797b0f0c8f5c31c0dd8720826f135e2b3040e2067d18b88f + languageName: node + linkType: hard + "vite-node@npm:1.6.0": version: 1.6.0 resolution: "vite-node@npm:1.6.0" From 63655a0613cb30b80a6b97b12ba17903af467f72 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 3 Dec 2024 16:10:15 +0530 Subject: [PATCH 2/5] feat(web): error-page --- web/package.json | 2 +- web/src/app.tsx | 151 ++++++++++++++------------- web/src/components/ErrorFallback.tsx | 130 +++++++++++++++++++++++ yarn.lock | 10 +- 4 files changed, 214 insertions(+), 79 deletions(-) create mode 100644 web/src/components/ErrorFallback.tsx diff --git a/web/package.json b/web/package.json index 0e0f3c17c..c12dbc666 100644 --- a/web/package.json +++ b/web/package.json @@ -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", diff --git a/web/src/app.tsx b/web/src/app.tsx index a961e70ca..23a158b6c 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -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"; @@ -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 ( - - - - - - - - }> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯} /> - - - - - - - - + + + + + + + + + }> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯} /> + + + + + + + + + ); }; diff --git a/web/src/components/ErrorFallback.tsx b/web/src/components/ErrorFallback.tsx new file mode 100644 index 000000000..88431a868 --- /dev/null +++ b/web/src/components/ErrorFallback.tsx @@ -0,0 +1,130 @@ +import React from "react"; +import styled, { css } from "styled-components"; + +import { FallbackProps } from "react-error-boundary"; +import { Link } from "react-router-dom"; + +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 = ({ error, resetErrorBoundary }) => { + // eslint-disable-next-line no-console + console.log("Error:", { error }); + + return ( + <> + + + + + + + +
Ooops, Something went wrong in Athens!
+ Please reload the page or contact us if the issue is not resolved. + +