Skip to content

Commit 8c7d78a

Browse files
kemurukemuru
committed
feat: migration to latest ui components library with file viewer
1 parent 185686b commit 8c7d78a

71 files changed

Lines changed: 398 additions & 335 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎web/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,13 +92,12 @@
9292
"dependencies": {
9393
"@bigmi/react": "^0.1.0",
9494
"@coinbase/wallet-sdk": "^4.3.2",
95-
"@cyntler/react-doc-viewer": "^1.17.0",
9695
"@graphql-tools/batch-execute": "^9.0.11",
9796
"@graphql-tools/utils": "^10.7.2",
9897
"@kleros/kleros-app": "workspace:^",
9998
"@kleros/kleros-sdk": "workspace:^",
10099
"@kleros/kleros-v2-contracts": "workspace:^",
101-
"@kleros/ui-components-library": "^2.20.0",
100+
"@kleros/ui-components-library": "^3.8.0",
102101
"@lifi/wallet-management": "^3.7.1",
103102
"@lifi/widget": "^3.18.1",
104103
"@mdxeditor/editor": "^3.45.0",

‎web/src/app.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Route } from "react-router-dom";
77
import "react-loading-skeleton/dist/skeleton.css";
88
import "react-toastify/dist/ReactToastify.css";
99
import "ethereum-identity-kit/css";
10+
import "@kleros/ui-components-library/style.css";
11+
import "@kleros/ui-components-library/theme.css";
1012
import "./i18n";
1113

1214
import AtlasProvider from "context/AtlasProvider";

‎web/src/components/CasesDisplay/Filters.tsx‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ListIcon from "svgs/icons/list.svg";
1111

1212
import { useIsList } from "context/IsListProvider";
1313
import useIsDesktop from "hooks/useIsDesktop";
14+
import type { SelectItem } from "utils/uiComponentsTypes";
1415
import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
1516

1617
import { hoverShortTransitionTiming } from "styles/commonStyles";
@@ -59,15 +60,15 @@ const Filters: React.FC = () => {
5960
const location = useRootPath();
6061
const [searchParams] = useSearchParams();
6162

62-
const handleStatusChange = (value: string | number) => {
63-
const parsedValue = JSON.parse(value as string);
63+
const handleStatusChange = (item: SelectItem) => {
64+
const parsedValue = JSON.parse(item.itemValue as string);
6465
const encodedFilter = encodeURIFilter({ ...filterObject, ...parsedValue });
6566
navigate(`${location}/1/${order}/${encodedFilter}?${searchParams.toString()}`);
6667
};
6768

68-
const handleOrderChange = (value: string | number) => {
69+
const handleOrderChange = (item: SelectItem) => {
6970
const encodedFilter = encodeURIFilter({ ruled, period, ...filterObject });
70-
navigate(`${location}/1/${value}/${encodedFilter}?${searchParams.toString()}`);
71+
navigate(`${location}/1/${item.itemValue}/${encodedFilter}?${searchParams.toString()}`);
7172
};
7273

7374
const { isList, setIsList } = useIsList();
@@ -79,10 +80,30 @@ const Filters: React.FC = () => {
7980
smallButton
8081
simpleButton
8182
items={[
82-
{ value: JSON.stringify({}), text: t("filters.all_cases"), dot: theme.primaryText },
83-
{ value: JSON.stringify({ ruled: false }), text: t("filters.in_progress"), dot: theme.primaryBlue },
84-
{ value: JSON.stringify({ period: "appeal" }), text: t("filters.appeal"), dot: theme.tint },
85-
{ value: JSON.stringify({ ruled: true }), text: t("filters.closed"), dot: theme.primaryPurple },
83+
{
84+
id: JSON.stringify({}),
85+
itemValue: JSON.stringify({}),
86+
text: t("filters.all_cases"),
87+
dot: theme.primaryText,
88+
},
89+
{
90+
id: JSON.stringify({ ruled: false }),
91+
itemValue: JSON.stringify({ ruled: false }),
92+
text: t("filters.in_progress"),
93+
dot: theme.primaryBlue,
94+
},
95+
{
96+
id: JSON.stringify({ period: "appeal" }),
97+
itemValue: JSON.stringify({ period: "appeal" }),
98+
text: t("filters.appeal"),
99+
dot: theme.tint,
100+
},
101+
{
102+
id: JSON.stringify({ ruled: true }),
103+
itemValue: JSON.stringify({ ruled: true }),
104+
text: t("filters.closed"),
105+
dot: theme.primaryPurple,
106+
},
86107
]}
87108
defaultValue={JSON.stringify({ ruled, period })}
88109
callback={handleStatusChange}
@@ -91,8 +112,8 @@ const Filters: React.FC = () => {
91112
smallButton
92113
simpleButton
93114
items={[
94-
{ value: "desc", text: t("filters.newest") },
95-
{ value: "asc", text: t("filters.oldest") },
115+
{ id: "desc", itemValue: "desc", text: t("filters.newest") },
116+
{ id: "asc", itemValue: "asc", text: t("filters.oldest") },
96117
]}
97118
defaultValue={order}
98119
callback={handleOrderChange}

‎web/src/components/CasesDisplay/Search.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useDebounce } from "react-use";
99
import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
1010

1111
import { isEmpty, isUndefined } from "utils/index";
12+
import type { CascaderItem } from "utils/uiComponentsTypes";
1213
import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
1314

1415
import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
@@ -76,10 +77,10 @@ const Search: React.FC = () => {
7677
);
7778

7879
const { data: courtTreeData } = useCourtTree();
79-
const items = useMemo(() => {
80+
const items = useMemo<CascaderItem[] | undefined>(() => {
8081
if (!isUndefined(courtTreeData?.court)) {
8182
const courts = [rootCourtToItems(courtTreeData.court, "id")];
82-
courts.push({ label: t("filters.all_courts"), value: "all" });
83+
courts.push({ label: t("filters.all_courts"), itemValue: "all", id: "all" });
8384
return courts;
8485
}
8586
return undefined;
@@ -91,9 +92,10 @@ const Search: React.FC = () => {
9192
<DropdownCascader
9293
items={items}
9394
placeholder={t("forms.placeholders.select_court")}
94-
onSelect={(value) => {
95+
callback={(item) => {
9596
const { court: _, ...filterWithoutCourt } = decodedFilter;
96-
const newFilter = value === "all" ? filterWithoutCourt : { ...decodedFilter, court: value.toString() };
97+
const newFilter =
98+
item.itemValue === "all" ? filterWithoutCourt : { ...decodedFilter, court: item.itemValue.toString() };
9799
navigate(`${location}/${page}/${order}/${encodeURIFilter(newFilter)}?${searchParams.toString()}`);
98100
}}
99101
/>
@@ -106,7 +108,7 @@ const Search: React.FC = () => {
106108
type="text"
107109
placeholder={t("forms.placeholders.search_by_id")}
108110
value={search}
109-
onChange={(e) => setSearch(e.target.value)}
111+
onChange={(value) => setSearch(value)}
110112
/>
111113
</SearchBarContainer>
112114
</Container>

‎web/src/components/ClaimPnkButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const ClaimPnkButton: React.FC = () => {
7373
text={faucetCheck ? t("buttons.claim_pnk") : t("buttons.empty_faucet")}
7474
onClick={handleRequest}
7575
isLoading={isSending}
76-
disabled={isSending || claimed || !faucetCheck || isUndefined(address)}
76+
isDisabled={isSending || claimed || !faucetCheck || isUndefined(address)}
7777
Icon={faucetCheck ? FaucetIcon : undefined}
7878
/>
7979
) : null}

‎web/src/components/ConnectWallet/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
2929
<Button
3030
{...{ className }}
3131
isLoading={isLoading}
32-
disabled={isLoading}
32+
isDisabled={isLoading}
3333
text={t("buttons.switch_to_chain", { chainName: DEFAULT_CHAIN.name })}
3434
onClick={handleSwitch}
3535
/>
@@ -43,7 +43,7 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
4343
return (
4444
<Button
4545
{...{ className }}
46-
disabled={isOpen}
46+
isDisabled={isOpen}
4747
small
4848
text={t("buttons.connect")}
4949
onClick={async () => open({ view: "Connect" })}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from "styled-components";
33

44
import { useTranslation } from "react-i18next";
55

6-
import { Field } from "@kleros/ui-components-library";
6+
import { TextField } from "@kleros/ui-components-library";
77

88
import { Features } from "consts/disputeFeature";
99
import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
@@ -20,7 +20,7 @@ const FieldContainer = styled.div`
2020
padding-left: 32px;
2121
`;
2222

23-
const StyledField = styled(Field)`
23+
const StyledField = styled(TextField)`
2424
width: 100%;
2525
margin-top: 8px;
2626
margin-bottom: 32px;
@@ -45,7 +45,7 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
4545
enabled: validationEnabled && props.checked,
4646
});
4747

48-
const [validationMessage, variant] = useMemo(() => {
48+
const [validationMessage, variant] = useMemo<[string | undefined, "info" | "error" | "success"]>(() => {
4949
if (isValidating) return [`Validating ERC-1155 token...`, "info"];
5050
else if (validationError) return [validationError, "error"];
5151
else if (isValid === true) return [`Valid ERC-1155 token`, "success"];
@@ -69,26 +69,26 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
6969
}
7070
}, [isValid, setDisputeData, props.checked]);
7171

72-
const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
72+
const handleTokenAddressChange = (value: string) => {
7373
const currentData = disputeData.disputeKitData as IGatedDisputeData;
7474

7575
setDisputeData({
7676
...disputeData,
7777
disputeKitData: {
7878
...currentData,
79-
tokenGate: event.target.value,
79+
tokenGate: value,
8080
isTokenGateValid: null, // Reset validation state when address changes
8181
},
8282
});
8383
};
8484

85-
const handleTokenIdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
85+
const handleTokenIdChange = (value: string) => {
8686
const currentData = disputeData.disputeKitData as IGatedDisputeData;
8787
// DEV: we only update the tokenGate value here, and the disputeKidID,
8888
// and type are still handled in Resolver/Court/FeatureSelection.tsx
8989
setDisputeData({
9090
...disputeData,
91-
disputeKitData: { ...currentData, tokenId: event.target.value },
91+
disputeKitData: { ...currentData, tokenId: value },
9292
});
9393
};
9494

@@ -100,15 +100,15 @@ const GatedErc1155: React.FC<RadioInput> = (props) => {
100100
{props.checked ? (
101101
<FieldContainer>
102102
<StyledField
103-
dir="auto"
103+
inputProps={{ dir: "auto" }}
104104
onChange={handleTokenAddressChange}
105105
value={tokenGateAddress}
106106
placeholder={t("forms.placeholders.token_address_example")}
107107
variant={variant}
108108
message={validationMessage}
109109
/>
110110
<StyledField
111-
dir="auto"
111+
inputProps={{ dir: "auto" }}
112112
onChange={handleTokenIdChange}
113113
value={(disputeData.disputeKitData as IGatedDisputeData)?.tokenId ?? "0"}
114114
placeholder={t("forms.placeholders.token_id_example")}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from "styled-components";
33

44
import { useTranslation } from "react-i18next";
55

6-
import { Field } from "@kleros/ui-components-library";
6+
import { TextField } from "@kleros/ui-components-library";
77

88
import { Features } from "consts/disputeFeature";
99
import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
@@ -20,7 +20,7 @@ const FieldContainer = styled.div`
2020
padding-left: 32px;
2121
`;
2222

23-
const StyledField = styled(Field)`
23+
const StyledField = styled(TextField)`
2424
width: 100%;
2525
margin-top: 8px;
2626
margin-bottom: 32px;
@@ -45,7 +45,7 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
4545
enabled: validationEnabled && props.checked,
4646
});
4747

48-
const [validationMessage, variant] = useMemo(() => {
48+
const [validationMessage, variant] = useMemo<[string | undefined, "info" | "error" | "success"]>(() => {
4949
if (isValidating) return [`Validating ERC-20 or ERC-721 token...`, "info"];
5050
else if (validationError) return [validationError, "error"];
5151
else if (isValid === true) return [`Valid ERC-20 or ERC-721 token`, "success"];
@@ -68,15 +68,15 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
6868
}
6969
}, [isValid, setDisputeData, props.checked]);
7070

71-
const handleTokenAddressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
71+
const handleTokenAddressChange = (value: string) => {
7272
const currentData = disputeData.disputeKitData as IGatedDisputeData;
7373
// DEV: we only update the tokenGate value here, and the disputeKidID,
7474
// and type are still handled in Resolver/Court/FeatureSelection.tsx
7575
setDisputeData({
7676
...disputeData,
7777
disputeKitData: {
7878
...currentData,
79-
tokenGate: event.target.value,
79+
tokenGate: value,
8080
isTokenGateValid: null, // Reset validation state when address changes
8181
},
8282
});
@@ -90,7 +90,7 @@ const GatedErc20: React.FC<RadioInput> = (props) => {
9090
{props.checked ? (
9191
<FieldContainer>
9292
<StyledField
93-
dir="auto"
93+
inputProps={{ dir: "auto" }}
9494
onChange={handleTokenAddressChange}
9595
value={tokenGateAddress}
9696
placeholder={t("forms.placeholders.token_address_example")}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import styled from "styled-components";
33

44
import { useTranslation } from "react-i18next";
55

6-
import { Radio } from "@kleros/ui-components-library";
7-
86
import { Features } from "consts/disputeFeature";
97

8+
import Radio from "components/Radio";
109
import WithHelpTooltip from "components/WithHelpTooltip";
1110

1211
import ArgentinaConsumerProtection from "./ArgentinaConsumerProtection";

‎web/src/components/EnsureAuth.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonText, clas
5252
<Button
5353
text={buttonText ?? t("wallet.sign_in")}
5454
onClick={handleClick}
55-
disabled={isSigningIn || !address}
55+
isDisabled={isSigningIn || !address}
5656
isLoading={isSigningIn}
5757
{...{ className }}
5858
/>

0 commit comments

Comments
 (0)