feat: migration to latest ui components library with file viewer

web/package.json

@@ -92,13 +92,12 @@
   "dependencies": {
     "@bigmi/react": "^0.1.0",
     "@coinbase/wallet-sdk": "^4.3.2",
-    "@cyntler/react-doc-viewer": "^1.17.0",
     "@graphql-tools/batch-execute": "^9.0.11",
     "@graphql-tools/utils": "^10.7.2",
     "@kleros/kleros-app": "workspace:^",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^2.20.0",
+    "@kleros/ui-components-library": "^3.8.0",
     "@lifi/wallet-management": "^3.7.1",
     "@lifi/widget": "^3.18.1",
     "@mdxeditor/editor": "^3.45.0",

web/src/app.tsx

@@ -7,6 +7,8 @@ import { Route } from "react-router-dom";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
 import "ethereum-identity-kit/css";
+import "@kleros/ui-components-library/style.css";
+import "@kleros/ui-components-library/theme.css";
 import "./i18n";
 
 import AtlasProvider from "context/AtlasProvider";

web/src/components/CasesDisplay/Filters.tsx

@@ -11,6 +11,7 @@ import ListIcon from "svgs/icons/list.svg";
 
 import { useIsList } from "context/IsListProvider";
 import useIsDesktop from "hooks/useIsDesktop";
+import type { SelectItem } from "utils/uiComponentsTypes";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
 
 import { hoverShortTransitionTiming } from "styles/commonStyles";
@@ -59,15 +60,15 @@ const Filters: React.FC = () => {
   const location = useRootPath();
   const [searchParams] = useSearchParams();
 
-  const handleStatusChange = (value: string | number) => {
-    const parsedValue = JSON.parse(value as string);
+  const handleStatusChange = (item: SelectItem) => {
+    const parsedValue = JSON.parse(item.itemValue as string);
     const encodedFilter = encodeURIFilter({ ...filterObject, ...parsedValue });
     navigate(`${location}/1/${order}/${encodedFilter}?${searchParams.toString()}`);
   };
 
-  const handleOrderChange = (value: string | number) => {
+  const handleOrderChange = (item: SelectItem) => {
     const encodedFilter = encodeURIFilter({ ruled, period, ...filterObject });
-    navigate(`${location}/1/${value}/${encodedFilter}?${searchParams.toString()}`);
+    navigate(`${location}/1/${item.itemValue}/${encodedFilter}?${searchParams.toString()}`);
   };
 
   const { isList, setIsList } = useIsList();
@@ -79,10 +80,30 @@ const Filters: React.FC = () => {
         smallButton
         simpleButton
         items={[
-          { value: JSON.stringify({}), text: t("filters.all_cases"), dot: theme.primaryText },
-          { value: JSON.stringify({ ruled: false }), text: t("filters.in_progress"), dot: theme.primaryBlue },
-          { value: JSON.stringify({ period: "appeal" }), text: t("filters.appeal"), dot: theme.tint },
-          { value: JSON.stringify({ ruled: true }), text: t("filters.closed"), dot: theme.primaryPurple },
+          {
+            id: JSON.stringify({}),
+            itemValue: JSON.stringify({}),
+            text: t("filters.all_cases"),
+            dot: theme.primaryText,
+          },
+          {
+            id: JSON.stringify({ ruled: false }),
+            itemValue: JSON.stringify({ ruled: false }),
+            text: t("filters.in_progress"),
+            dot: theme.primaryBlue,
+          },
+          {
+            id: JSON.stringify({ period: "appeal" }),
+            itemValue: JSON.stringify({ period: "appeal" }),
+            text: t("filters.appeal"),
+            dot: theme.tint,
+          },
+          {
+            id: JSON.stringify({ ruled: true }),
+            itemValue: JSON.stringify({ ruled: true }),
+            text: t("filters.closed"),
+            dot: theme.primaryPurple,
+          },
         ]}
         defaultValue={JSON.stringify({ ruled, period })}
         callback={handleStatusChange}
@@ -91,8 +112,8 @@ const Filters: React.FC = () => {
         smallButton
         simpleButton
         items={[
-          { value: "desc", text: t("filters.newest") },
-          { value: "asc", text: t("filters.oldest") },
+          { id: "desc", itemValue: "desc", text: t("filters.newest") },
+          { id: "asc", itemValue: "asc", text: t("filters.oldest") },
         ]}
         defaultValue={order}
         callback={handleOrderChange}

web/src/components/CasesDisplay/Search.tsx

@@ -9,6 +9,7 @@ import { useDebounce } from "react-use";
 import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
 
 import { isEmpty, isUndefined } from "utils/index";
+import type { CascaderItem } from "utils/uiComponentsTypes";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
 
 import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
@@ -76,10 +77,10 @@ const Search: React.FC = () => {
   );
 
   const { data: courtTreeData } = useCourtTree();
-  const items = useMemo(() => {
+  const items = useMemo<CascaderItem[] | undefined>(() => {
     if (!isUndefined(courtTreeData?.court)) {
       const courts = [rootCourtToItems(courtTreeData.court, "id")];
-      courts.push({ label: t("filters.all_courts"), value: "all" });
+      courts.push({ label: t("filters.all_courts"), itemValue: "all", id: "all" });
       return courts;
     }
     return undefined;
@@ -91,9 +92,10 @@ const Search: React.FC = () => {
         <DropdownCascader
           items={items}
           placeholder={t("forms.placeholders.select_court")}
-          onSelect={(value) => {
+          callback={(item) => {
             const { court: _, ...filterWithoutCourt } = decodedFilter;
-            const newFilter = value === "all" ? filterWithoutCourt : { ...decodedFilter, court: value.toString() };
+            const newFilter =
+              item.itemValue === "all" ? filterWithoutCourt : { ...decodedFilter, court: item.itemValue.toString() };
             navigate(`${location}/${page}/${order}/${encodeURIFilter(newFilter)}?${searchParams.toString()}`);
           }}
         />
@@ -106,7 +108,7 @@ const Search: React.FC = () => {
           type="text"
           placeholder={t("forms.placeholders.search_by_id")}
           value={search}
-          onChange={(e) => setSearch(e.target.value)}
+          onChange={(value) => setSearch(value)}
         />
       </SearchBarContainer>
     </Container>

web/src/components/ClaimPnkButton.tsx

@@ -73,7 +73,7 @@ const ClaimPnkButton: React.FC = () => {
           text={faucetCheck ? t("buttons.claim_pnk") : t("buttons.empty_faucet")}
           onClick={handleRequest}
           isLoading={isSending}
-          disabled={isSending || claimed || !faucetCheck || isUndefined(address)}
+          isDisabled={isSending || claimed || !faucetCheck || isUndefined(address)}
           Icon={faucetCheck ? FaucetIcon : undefined}
         />
       ) : null}

web/src/components/ConnectWallet/index.tsx

@@ -29,7 +29,7 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
     <Button
       {...{ className }}
       isLoading={isLoading}
-      disabled={isLoading}
+      isDisabled={isLoading}
       text={t("buttons.switch_to_chain", { chainName: DEFAULT_CHAIN.name })}
       onClick={handleSwitch}
     />
@@ -43,7 +43,7 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
   return (
     <Button
       {...{ className }}
-      disabled={isOpen}
+      isDisabled={isOpen}
       small
       text={t("buttons.connect")}
       onClick={async () => open({ view: "Connect" })}

web/src/components/DisputeFeatures/Features/GatedErc1155.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { useTranslation } from "react-i18next";
 
-import { Field } from "@kleros/ui-components-library";
+import { TextField } from "@kleros/ui-components-library";
 
 import { Features } from "consts/disputeFeature";
 import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
@@ -20,7 +20,7 @@ const FieldContainer = styled.div`
   padding-left: 32px;
 `;
 
-const StyledField = styled(Field)`
+const StyledField = styled(TextField)`
   width: 100%;
   margin-top: 8px;
   margin-bottom: 32px;
@@ -45,7 +45,7 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
     enabled: validationEnabled && props.checked,
   });
 
-  const [validationMessage, variant] = useMemo(() => {
+  const [validationMessage, variant] = useMemo<[string | undefined, "info" | "error" | "success"]>(() => {
     if (isValidating) return [`Validating ERC-1155 token...`, "info"];
     else if (validationError) return [validationError, "error"];
     else if (isValid === true) return [`Valid ERC-1155 token`, "success"];
@@ -69,26 +69,26 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
     }
   }, [isValid, setDisputeData, props.checked]);
 
-  const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleTokenAddressChange = (value: string) => {
     const currentData = disputeData.disputeKitData as IGatedDisputeData;
 
     setDisputeData({
       ...disputeData,
       disputeKitData: {
         ...currentData,
-        tokenGate: event.target.value,
+        tokenGate: value,
         isTokenGateValid: null, // Reset validation state when address changes
       },
     });
   };
 
-  const handleTokenIdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleTokenIdChange = (value: string) => {
     const currentData = disputeData.disputeKitData as IGatedDisputeData;
     // DEV: we only update the tokenGate value here, and the disputeKidID,
     // and type are still handled in Resolver/Court/FeatureSelection.tsx
     setDisputeData({
       ...disputeData,
-      disputeKitData: { ...currentData, tokenId: event.target.value },
+      disputeKitData: { ...currentData, tokenId: value },
     });
   };
 
@@ -100,15 +100,15 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
       {props.checked ? (
         <FieldContainer>
           <StyledField
-            dir="auto"
+            inputProps={{ dir: "auto" }}
             onChange={handleTokenAddressChange}
             value={tokenGateAddress}
             placeholder={t("forms.placeholders.token_address_example")}
             variant={variant}
             message={validationMessage}
           />
           <StyledField
-            dir="auto"
+            inputProps={{ dir: "auto" }}
             onChange={handleTokenIdChange}
             value={(disputeData.disputeKitData as IGatedDisputeData)?.tokenId ?? "0"}
             placeholder={t("forms.placeholders.token_id_example")}

web/src/components/DisputeFeatures/Features/GatedErc20.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { useTranslation } from "react-i18next";
 
-import { Field } from "@kleros/ui-components-library";
+import { TextField } from "@kleros/ui-components-library";
 
 import { Features } from "consts/disputeFeature";
 import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
@@ -20,7 +20,7 @@ const FieldContainer = styled.div`
   padding-left: 32px;
 `;
 
-const StyledField = styled(Field)`
+const StyledField = styled(TextField)`
   width: 100%;
   margin-top: 8px;
   margin-bottom: 32px;
@@ -45,7 +45,7 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
     enabled: validationEnabled && props.checked,
   });
 
-  const [validationMessage, variant] = useMemo(() => {
+  const [validationMessage, variant] = useMemo<[string | undefined, "info" | "error" | "success"]>(() => {
     if (isValidating) return [`Validating ERC-20 or ERC-721 token...`, "info"];
     else if (validationError) return [validationError, "error"];
     else if (isValid === true) return [`Valid ERC-20 or ERC-721 token`, "success"];
@@ -68,15 +68,15 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
     }
   }, [isValid, setDisputeData, props.checked]);
 
-  const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleTokenAddressChange = (value: string) => {
     const currentData = disputeData.disputeKitData as IGatedDisputeData;
     // DEV: we only update the tokenGate value here, and the disputeKidID,
     // and type are still handled in Resolver/Court/FeatureSelection.tsx
     setDisputeData({
       ...disputeData,
       disputeKitData: {
         ...currentData,
-        tokenGate: event.target.value,
+        tokenGate: value,
         isTokenGateValid: null, // Reset validation state when address changes
       },
     });
@@ -90,7 +90,7 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
       {props.checked ? (
         <FieldContainer>
           <StyledField
-            dir="auto"
+            inputProps={{ dir: "auto" }}
             onChange={handleTokenAddressChange}
             value={tokenGateAddress}
             placeholder={t("forms.placeholders.token_address_example")}

web/src/components/DisputeFeatures/Features/index.tsx

@@ -3,10 +3,9 @@ import styled from "styled-components";
 
 import { useTranslation } from "react-i18next";
 
-import { Radio } from "@kleros/ui-components-library";
-
 import { Features } from "consts/disputeFeature";
 
+import Radio from "components/Radio";
 import WithHelpTooltip from "components/WithHelpTooltip";
 
 import ArgentinaConsumerProtection from "./ArgentinaConsumerProtection";

web/src/components/EnsureAuth.tsx

@@ -52,7 +52,7 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonText, clas
       <Button
         text={buttonText ?? t("wallet.sign_in")}
         onClick={handleClick}
-        disabled={isSigningIn || !address}
+        isDisabled={isSigningIn || !address}
         isLoading={isSigningIn}
         {...{ className }}
       />