diff --git a/kleros-sdk/package.json b/kleros-sdk/package.json index c7cc0aeb8..8b29618ac 100644 --- a/kleros-sdk/package.json +++ b/kleros-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@kleros/kleros-sdk", - "version": "2.1.8", + "version": "2.1.10", "description": "SDK for Kleros version 2", "repository": "git@github.com:kleros/kleros-v2.git", "homepage": "https://github.com/kleros/kleros-v2/tree/master/kleros-sdk#readme", @@ -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" } } diff --git a/web-devtools/src/assets/svgs/socialmedia/discord.svg b/web-devtools/src/assets/svgs/socialmedia/discord.svg index cd9ecfead..8689eefd8 100644 --- a/web-devtools/src/assets/svgs/socialmedia/discord.svg +++ b/web-devtools/src/assets/svgs/socialmedia/discord.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/etherscan.svg b/web-devtools/src/assets/svgs/socialmedia/etherscan.svg index bb140d2cc..56aea0390 100644 --- a/web-devtools/src/assets/svgs/socialmedia/etherscan.svg +++ b/web-devtools/src/assets/svgs/socialmedia/etherscan.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg b/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg index 6734e2d0d..cbd9a8137 100644 --- a/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg +++ b/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/github.svg b/web-devtools/src/assets/svgs/socialmedia/github.svg index e38d90278..74c5a4a9c 100644 --- a/web-devtools/src/assets/svgs/socialmedia/github.svg +++ b/web-devtools/src/assets/svgs/socialmedia/github.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/linkedin.svg b/web-devtools/src/assets/svgs/socialmedia/linkedin.svg index 6a710c481..0b10e33e9 100644 --- a/web-devtools/src/assets/svgs/socialmedia/linkedin.svg +++ b/web-devtools/src/assets/svgs/socialmedia/linkedin.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/reddit.svg b/web-devtools/src/assets/svgs/socialmedia/reddit.svg index 56f344582..29638aba9 100644 --- a/web-devtools/src/assets/svgs/socialmedia/reddit.svg +++ b/web-devtools/src/assets/svgs/socialmedia/reddit.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/slack.svg b/web-devtools/src/assets/svgs/socialmedia/slack.svg index 9a2a63779..25551ed1d 100644 --- a/web-devtools/src/assets/svgs/socialmedia/slack.svg +++ b/web-devtools/src/assets/svgs/socialmedia/slack.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/snapshot.svg b/web-devtools/src/assets/svgs/socialmedia/snapshot.svg index dee191af5..fa69e3684 100644 --- a/web-devtools/src/assets/svgs/socialmedia/snapshot.svg +++ b/web-devtools/src/assets/svgs/socialmedia/snapshot.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/youtube.svg b/web-devtools/src/assets/svgs/socialmedia/youtube.svg index 42fbfdc45..6411254ea 100644 --- a/web-devtools/src/assets/svgs/socialmedia/youtube.svg +++ b/web-devtools/src/assets/svgs/socialmedia/youtube.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/utils/parseWagmiError.ts b/web-devtools/src/utils/parseWagmiError.ts new file mode 100644 index 000000000..ffd1ef597 --- /dev/null +++ b/web-devtools/src/utils/parseWagmiError.ts @@ -0,0 +1,17 @@ +import { type SimulateContractErrorType } from "@wagmi/core"; + +type ExtendedWagmiError = SimulateContractErrorType & { shortMessage?: string; metaMessages?: string[] }; + +/** + * @param error + * @description Tries to extract the human readable error message, otherwise reverts to error.message + * @returns Human readable error if possible + */ +export const parseWagmiError = (error: SimulateContractErrorType) => { + const extError = error as ExtendedWagmiError; + + const metaMessage = extError?.metaMessages?.[0]; + const shortMessage = extError?.shortMessage; + + return metaMessage ?? shortMessage ?? error.message; +}; diff --git a/web-devtools/src/utils/wrapWithToast.ts b/web-devtools/src/utils/wrapWithToast.ts index 9e6459061..7405c73c8 100644 --- a/web-devtools/src/utils/wrapWithToast.ts +++ b/web-devtools/src/utils/wrapWithToast.ts @@ -1,6 +1,8 @@ import { toast, ToastPosition, Theme } from "react-toastify"; import { type PublicClient, type TransactionReceipt } from "viem"; +import { parseWagmiError } from "./parseWagmiError"; + export const OPTIONS = { position: "top-center" as ToastPosition, autoClose: 5000, @@ -35,11 +37,11 @@ export async function wrapWithToast( }) ) .catch((error) => { - toast.error(error.shortMessage ?? error.message, OPTIONS); + toast.error(parseWagmiError(error), OPTIONS); return { status: false }; }); } export async function catchShortMessage(promise: Promise) { - return await promise.catch((error) => toast.error(error.shortMessage ?? error.message, OPTIONS)); + return await promise.catch((error) => toast.error(parseWagmiError(error), OPTIONS)); } 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..f55365693 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 ¯\_( ͡° ͜ʖ ͡°)_/¯} /> - - - - - - - - + + + + + + + + + }> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + Page not found} /> + + + + + + + + + ); }; diff --git a/web/src/assets/svgs/footer/secured-by-kleros.svg b/web/src/assets/svgs/footer/secured-by-kleros.svg index a195863ea..eac640c7a 100644 --- a/web/src/assets/svgs/footer/secured-by-kleros.svg +++ b/web/src/assets/svgs/footer/secured-by-kleros.svg @@ -1,12 +1,12 @@ - - - + + + - + diff --git a/web/src/assets/svgs/icons/book-open.svg b/web/src/assets/svgs/icons/book-open.svg index 36d3597e3..fb1010fb1 100644 --- a/web/src/assets/svgs/icons/book-open.svg +++ b/web/src/assets/svgs/icons/book-open.svg @@ -1,3 +1,3 @@ - + diff --git a/web/src/assets/svgs/icons/close.svg b/web/src/assets/svgs/icons/close.svg index a768ad17f..e2c3c9d66 100644 --- a/web/src/assets/svgs/icons/close.svg +++ b/web/src/assets/svgs/icons/close.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/code.svg b/web/src/assets/svgs/icons/code.svg index aae881487..ee8f0de12 100644 --- a/web/src/assets/svgs/icons/code.svg +++ b/web/src/assets/svgs/icons/code.svg @@ -1,15 +1,5 @@ - - - - - - - - - - - - - - + + + + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/eth.svg b/web/src/assets/svgs/icons/eth.svg index da728a2d8..28595a80c 100644 --- a/web/src/assets/svgs/icons/eth.svg +++ b/web/src/assets/svgs/icons/eth.svg @@ -1,3 +1,3 @@ - + diff --git a/web/src/assets/svgs/socialmedia/discord.svg b/web/src/assets/svgs/socialmedia/discord.svg index cd9ecfead..8689eefd8 100644 --- a/web/src/assets/svgs/socialmedia/discord.svg +++ b/web/src/assets/svgs/socialmedia/discord.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/etherscan.svg b/web/src/assets/svgs/socialmedia/etherscan.svg index bb140d2cc..56aea0390 100644 --- a/web/src/assets/svgs/socialmedia/etherscan.svg +++ b/web/src/assets/svgs/socialmedia/etherscan.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/ghost-blog.svg b/web/src/assets/svgs/socialmedia/ghost-blog.svg index 6734e2d0d..cbd9a8137 100644 --- a/web/src/assets/svgs/socialmedia/ghost-blog.svg +++ b/web/src/assets/svgs/socialmedia/ghost-blog.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/github.svg b/web/src/assets/svgs/socialmedia/github.svg index e38d90278..74c5a4a9c 100644 --- a/web/src/assets/svgs/socialmedia/github.svg +++ b/web/src/assets/svgs/socialmedia/github.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/linkedin.svg b/web/src/assets/svgs/socialmedia/linkedin.svg index 6a710c481..0b10e33e9 100644 --- a/web/src/assets/svgs/socialmedia/linkedin.svg +++ b/web/src/assets/svgs/socialmedia/linkedin.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/reddit.svg b/web/src/assets/svgs/socialmedia/reddit.svg index 56f344582..29638aba9 100644 --- a/web/src/assets/svgs/socialmedia/reddit.svg +++ b/web/src/assets/svgs/socialmedia/reddit.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/slack.svg b/web/src/assets/svgs/socialmedia/slack.svg index 9a2a63779..25551ed1d 100644 --- a/web/src/assets/svgs/socialmedia/slack.svg +++ b/web/src/assets/svgs/socialmedia/slack.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/snapshot.svg b/web/src/assets/svgs/socialmedia/snapshot.svg index dee191af5..fa69e3684 100644 --- a/web/src/assets/svgs/socialmedia/snapshot.svg +++ b/web/src/assets/svgs/socialmedia/snapshot.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/telegram.svg b/web/src/assets/svgs/socialmedia/telegram.svg index 22e46b18a..85690c4fd 100644 --- a/web/src/assets/svgs/socialmedia/telegram.svg +++ b/web/src/assets/svgs/socialmedia/telegram.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/youtube.svg b/web/src/assets/svgs/socialmedia/youtube.svg index 42fbfdc45..6411254ea 100644 --- a/web/src/assets/svgs/socialmedia/youtube.svg +++ b/web/src/assets/svgs/socialmedia/youtube.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/components/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx index a61051dd5..e482f0020 100644 --- a/web/src/components/CasesDisplay/CasesGrid.tsx +++ b/web/src/components/CasesDisplay/CasesGrid.tsx @@ -17,10 +17,10 @@ import DisputeView from "components/DisputeView"; import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton"; const GridContainer = styled.div` - --gap: 24px; + --gap: 16px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(100%, max(350px, (100% - var(--gap) * 2)/3)), 1fr)); - align-items: center; + grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr)); + align-items: stretch; gap: var(--gap); `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 5fdf19a3b..7b30e7751 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -1,17 +1,16 @@ import React from "react"; import styled from "styled-components"; -import { Link, useLocation } from "react-router-dom"; +import { useLocation } from "react-router-dom"; import ArrowIcon from "svgs/icons/arrow.svg"; import { responsiveSize } from "styles/responsiveSize"; -import LightButton from "../LightButton"; - import CasesGrid, { ICasesGrid } from "./CasesGrid"; import Search from "./Search"; import StatsAndFilters from "./StatsAndFilters"; +import { StyledArrowLink } from "../StyledArrowLink"; const TitleContainer = styled.div` display: flex; @@ -25,14 +24,8 @@ const StyledTitle = styled.h1` margin: 0px; `; -const StyledButton = styled(LightButton)` - display: flex; - flex-direction: row-reverse; - gap: 8px; - > .button-text { - color: ${({ theme }) => theme.primaryBlue}; - } - padding: 0px; +const StyledLabel = styled.label` + font-size: 16px; `; interface ICasesDisplay extends ICasesGrid { @@ -59,16 +52,16 @@ const CasesDisplay: React.FC = ({ {title} {location.pathname.startsWith("/cases/display/1/desc/all") ? ( - - - + + Create a case + ) : null} - + {disputes?.length === 0 ? ( -

No cases found

+ No cases found ) : ( theme.whiteBackground}; padding: 0px; + cursor: pointer; + + &:hover { + label { + color: ${({ theme }) => theme.white} !important; + transition: color 0.2s; + } + } ${landscapeStyle( () => css` - background-color: ${({ theme }) => theme.whiteLowOpacity}; + background-color: ${({ theme }) => theme.whiteLowOpacitySubtle}; + &:hover { + transition: background-color 0.1s; + background-color: ${({ theme }) => theme.whiteLowOpacityStrong}; + } flex-direction: row; align-content: center; border-radius: 300px; @@ -50,13 +62,14 @@ const AccountContainer = styled.div` () => css` gap: 12px; > label { - color: ${({ theme }) => theme.primaryText}; + color: ${({ theme }) => theme.white}CC !important; font-weight: 400; font-size: 14px; } ` )} `; + const ChainConnectionContainer = styled.div` display: flex; width: fit-content; diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 1624bdb15..12ce6a104 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -27,13 +27,10 @@ const QuestionAndDescription = styled.div` div:first-child p:first-of-type { font-size: 16px; font-weight: 600; + margin: 0; } `; -const StyledReactMarkDown = styled(ReactMarkdown)` - margin: 0px; -`; - const VotingOptions = styled(QuestionAndDescription)` display: flex; flex-direction: column; @@ -45,11 +42,15 @@ const AnswersContainer = styled.div` flex-direction: column; `; +const AnswersHeader = styled.h3` + margin: 0; +`; + const Answer = styled.div` margin: 0px; display: flex; flex-wrap: wrap; - gap: ${responsiveSize(2, 8)}; + gap: 6px; > label { max-width: 100%; } @@ -70,11 +71,11 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR; return ( <> - {isUndefined(disputeDetails) ? : disputeDetails?.title ?? errMsg} + {isUndefined(disputeDetails) ? : (disputeDetails?.title ?? errMsg)} {!isUndefined(disputeDetails) && ( - {disputeDetails?.question} - {disputeDetails?.description} + {disputeDetails?.question} + {disputeDetails?.description} )} {isUndefined(disputeDetails?.frontendUrl) ? null : ( @@ -83,14 +84,14 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp )} - {isUndefined(disputeDetails) ? null :

Voting Options

} + {isUndefined(disputeDetails) ? null : Voting Options} {disputeDetails?.answers?.map((answer: IAnswer, i: number) => ( Option {i + 1}: ))} diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index f30bce9ef..91adfc4ad 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -1,7 +1,5 @@ import React from "react"; -import styled, { css } from "styled-components"; - -import { Link } from "react-router-dom"; +import styled from "styled-components"; import PaperclipIcon from "svgs/icons/paperclip.svg"; import PolicyIcon from "svgs/icons/policy.svg"; @@ -9,42 +7,24 @@ import PolicyIcon from "svgs/icons/policy.svg"; import { getIpfsUrl } from "utils/getIpfsUrl"; import { isUndefined } from "utils/index"; -import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; -const ShadeArea = styled.div` +import { InternalLink } from "components/InternalLink"; + +const Container = styled.div` display: flex; - flex-direction: column; - justify-content: center; - width: 100%; + align-items: center; + flex-direction: row; + flex-wrap: wrap; + gap: 8px 16px; padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)}; - margin-top: 16px; background-color: ${({ theme }) => theme.mediumBlue}; - - ${landscapeStyle( - () => css` - flex-direction: row; - justify-content: space-between; - ` - )}; `; const StyledP = styled.p` font-size: 14px; - margin-top: 0; - margin-bottom: 16px; + margin: 0; color: ${({ theme }) => theme.primaryBlue}; - ${landscapeStyle( - () => css` - margin-bottom: 0; - ` - )}; -`; - -const StyledA = styled.a` - display: flex; - align-items: center; - gap: 4px; `; const StyledPolicyIcon = styled(PolicyIcon)` @@ -57,16 +37,16 @@ const StyledPaperclipIcon = styled(PaperclipIcon)` fill: ${({ theme }) => theme.primaryBlue}; `; -const LinkContainer = styled.div` - display: flex; - gap: ${responsiveSize(16, 24)}; - flex-wrap: wrap; - align-items: center; -`; - -const StyledLink = styled(Link)` +const StyledInternalLink = styled(InternalLink)` display: flex; gap: 4px; + + &:hover { + svg { + transition: fill 0.1s; + fill: ${({ theme }) => theme.secondaryBlue}; + } + } `; type Attachment = { @@ -81,28 +61,26 @@ interface IPolicies { export const Policies: React.FC = ({ disputePolicyURI, courtId, attachment }) => { return ( - - Make sure you read and understand the Policies - - {!isUndefined(attachment) && !isUndefined(attachment.uri) ? ( - - - {attachment.label ?? "Attachment"} - - ) : null} - {isUndefined(disputePolicyURI) ? null : ( - - - Dispute Policy - - )} - {isUndefined(courtId) ? null : ( - - - Court Policy - - )} - - + + Policy documents: + {!isUndefined(attachment) && !isUndefined(attachment.uri) ? ( + + + {attachment.label ?? "Attachment"} + + ) : null} + {isUndefined(disputePolicyURI) ? null : ( + + + Dispute Policy + + )} + {isUndefined(courtId) ? null : ( + + + Court Policy + + )} + ); }; diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index 1027b0436..2c2e370a3 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -19,6 +19,11 @@ const StyledCard = styled(Card)` height: 100%; max-height: 335px; min-height: 290px; + transition: background-color 0.1s; + + &:hover { + background-color: ${({ theme }) => theme.lightGrey}BB; + } `; const CardContainer = styled.div` @@ -56,7 +61,7 @@ interface IDisputeCardView { const DisputeCardView: React.FC = ({ isLoading, ...props }) => { return ( - + {isLoading ? : } diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx index 2985fa3f2..68d729164 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx @@ -1,14 +1,9 @@ -import React, { useMemo } from "react"; +import React from "react"; import styled, { css } from "styled-components"; -import LawBalanceIcon from "svgs/icons/law-balance.svg"; - -import { useCourtTree } from "hooks/queries/useCourtTree"; - import { landscapeStyle } from "styles/landscapeStyle"; import Field, { IField } from "components/Field"; -import { getCourtsPath } from "pages/Courts/CourtDetails"; import CardLabel from "../CardLabels"; @@ -22,12 +17,6 @@ const Container = styled.div` justify-content: flex-end; `; -const CourtBranchFieldContainer = styled.div` - display: flex; - margin-top: 16px; - flex-wrap: wrap; -`; - const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>` display: flex; flex-direction: column; @@ -42,7 +31,6 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>` css` ${landscapeStyle( () => css` - margin-top: 16px; gap: 32px; flex-direction: row; flex-wrap: wrap; @@ -56,7 +44,6 @@ const StyledField = styled(Field)` max-width: 100%; label { &.value { - margin-left: 8px; overflow: hidden; text-overflow: ellipsis; text-wrap: auto; @@ -66,36 +53,9 @@ const StyledField = styled(Field)` type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo; -const DisputeInfoCard: React.FC = ({ - isOverview, - showLabels, - fieldItems, - court, - courtId, - disputeID, - round, -}) => { - const { data } = useCourtTree(); - const courtPath = getCourtsPath(data?.court, courtId); - const items = useMemo( - () => [...(courtPath?.map((node) => ({ text: node.name, value: node.id })) ?? [])], - [courtPath] - ); - - const courtBranchValue = items.map((item) => item.text).join(" / "); +const DisputeInfoCard: React.FC = ({ isOverview, showLabels, fieldItems, disputeID, round }) => { return ( - {court && courtId && isOverview && ( - - - - )} {fieldItems.map((item) => item.display ? : null diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx index 65c0bdec7..a82417c29 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx @@ -30,6 +30,7 @@ const RestOfFieldsContainer = styled.div` grid-template-columns: repeat(3, min-content); justify-content: start; `; + const StyledField = styled(Field)<{ style?: string }>` ${({ style }) => style ?? ""} `; diff --git a/web/src/components/DisputeView/DisputeInfo/index.tsx b/web/src/components/DisputeView/DisputeInfo/index.tsx index 7bf1f48cc..46c8747f0 100644 --- a/web/src/components/DisputeView/DisputeInfo/index.tsx +++ b/web/src/components/DisputeView/DisputeInfo/index.tsx @@ -76,7 +76,7 @@ const DisputeInfo: React.FC = ({ name: "Court", value: court, link: `/courts/${courtId}`, - display: !isUndefined(court) && !isUndefined(courtId) && !isOverview, + display: !isUndefined(court) && !isUndefined(courtId), }, { icon: RoundIcon, diff --git a/web/src/components/DisputeView/DisputeListView.tsx b/web/src/components/DisputeView/DisputeListView.tsx index cbecdeedb..cdd4e64c3 100644 --- a/web/src/components/DisputeView/DisputeListView.tsx +++ b/web/src/components/DisputeView/DisputeListView.tsx @@ -18,7 +18,13 @@ const StyledListItem = styled(Card)` flex-grow: 1; width: 100%; height: 82px; + transition: background-color 0.1s; + + &:hover { + background-color: ${({ theme }) => theme.lightGrey}BB; + } `; + const ListContainer = styled.div` display: flex; justify-content: space-between; @@ -58,7 +64,7 @@ const DisputeListView: React.FC = (props) => { const { isDisconnected } = useAccount(); return ( - + diff --git a/web/src/components/DottedMenuButton.tsx b/web/src/components/DottedMenuButton.tsx index ab279ddd0..3684b24ed 100644 --- a/web/src/components/DottedMenuButton.tsx +++ b/web/src/components/DottedMenuButton.tsx @@ -60,6 +60,11 @@ const ButtonContainer = styled.div` border-radius: 50%; z-index: 1; background-color: ${({ theme }) => theme.lightBackground}; + + transition: background-color 0.1s; + :hover { + background-color: ${({ theme }) => theme.lightGrey}; + } `; const StyledDottedMenu = styled(DottedMenu)` diff --git a/web/src/components/ErrorFallback.tsx b/web/src/components/ErrorFallback.tsx new file mode 100644 index 000000000..6b9fef67b --- /dev/null +++ b/web/src/components/ErrorFallback.tsx @@ -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 = ({ 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. + +