Skip to content

Commit 3ba2584

Browse files
tractorsstractorss
authored
Merge pull request #37 from kleros/fix/disable-action-button-properly
fix: diable-action-button-properly
2 parents 91a0053 + a6fa163 commit 3ba2584

File tree

7 files changed

+129
-106
lines changed

7 files changed

+129
-106
lines changed

‎web/src/components/ActionButton/ExecuteButton.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ interface IExecuteButton {
1010
registryAddress: Address;
1111
itemId: string;
1212
refetch: () => void;
13+
disabled?: boolean;
1314
}
14-
const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refetch }) => {
15+
const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refetch, disabled }) => {
1516
const publicClient = usePublicClient();
1617
const [isExecuting, setIsExecuting] = useState(false);
1718

@@ -26,7 +27,7 @@ const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refe
2627
<EnsureChain>
2728
<Button
2829
text="Execute"
29-
disabled={isLoading || isError || isExecuting || isPreparingConfig}
30+
disabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
3031
isLoading={isLoading || isExecuting}
3132
onClick={() => {
3233
if (!executeRequest) return;

‎web/src/components/ActionButton/Modal/Buttons/index.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import styled from "styled-components";
33
import { Button } from "@kleros/ui-components-library";
44
import { EnsureChain } from "components/EnsureChain";
5+
import { EnsureAuth } from "components/EnsureAuth";
56

67
const Container = styled.div`
78
display: flex;
@@ -24,14 +25,16 @@ const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText, callback, isLoad
2425
<Container>
2526
<Button variant="secondary" text="Return" onClick={toggleModal} />
2627
<EnsureChain>
27-
<Button
28-
text={buttonText}
29-
onClick={() => {
30-
callback();
31-
}}
32-
isLoading={isLoading}
33-
disabled={isDisabled}
34-
/>
28+
<EnsureAuth>
29+
<Button
30+
text={buttonText}
31+
onClick={() => {
32+
callback();
33+
}}
34+
isLoading={isLoading}
35+
disabled={isDisabled}
36+
/>
37+
</EnsureAuth>
3538
</EnsureChain>
3639
</Container>
3740
);

‎web/src/components/ActionButton/Modal/ChallengeItemModal.tsx

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { IBaseModal } from ".";
1717
import EvidenceUpload, { Evidence } from "./EvidenceUpload";
1818
import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
1919
import Modal from "components/Modal";
20-
import { EnsureAuth } from "components/EnsureAuth";
2120

2221
const ReStyledModal = styled(Modal)`
2322
gap: 32px;
@@ -113,46 +112,44 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
113112
<DepositRequired value={depositRequired} />
114113
<EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
115114
<Info alertMessage={alertMessage} />
116-
<EnsureAuth>
117-
<Buttons
118-
buttonText="Challenge"
119-
toggleModal={toggleModal}
120-
isDisabled={isDisabled || isChallengingItem}
121-
isLoading={isLoading}
122-
callback={async () => {
123-
setIsChallengingItem(true);
124-
125-
const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
126-
type: "application/json",
127-
});
128-
129-
uploadFileToIPFS(evidenceFile)
130-
.then(async (res) => {
131-
if (res.status === 200 && walletClient) {
132-
const response = await res.json();
133-
const fileURI = response["cids"][0];
134-
135-
const { request } = await prepareWriteCurateV2({
136-
//@ts-ignore
137-
address: registryAddress,
138-
functionName: "challengeRequest",
139-
args: [itemId as `0x${string}`, fileURI],
140-
value: depositRequired,
141-
});
142-
143-
wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
144-
.then((res) => {
145-
console.log({ res });
146-
refetch();
147-
toggleModal();
148-
})
149-
.finally(() => setIsChallengingItem(false));
150-
}
151-
})
152-
.catch((err) => console.log(err));
153-
}}
154-
/>
155-
</EnsureAuth>
115+
<Buttons
116+
buttonText="Challenge"
117+
toggleModal={toggleModal}
118+
isDisabled={isDisabled || isChallengingItem}
119+
isLoading={isLoading}
120+
callback={async () => {
121+
setIsChallengingItem(true);
122+
123+
const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
124+
type: "application/json",
125+
});
126+
127+
uploadFileToIPFS(evidenceFile)
128+
.then(async (res) => {
129+
if (res.status === 200 && walletClient) {
130+
const response = await res.json();
131+
const fileURI = response["cids"][0];
132+
133+
const { request } = await prepareWriteCurateV2({
134+
//@ts-ignore
135+
address: registryAddress,
136+
functionName: "challengeRequest",
137+
args: [itemId as `0x${string}`, fileURI],
138+
value: depositRequired,
139+
});
140+
141+
wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
142+
.then((res) => {
143+
console.log({ res });
144+
refetch();
145+
toggleModal();
146+
})
147+
.finally(() => setIsChallengingItem(false));
148+
}
149+
})
150+
.catch((err) => console.log(err));
151+
}}
152+
/>
156153
</ReStyledModal>
157154
);
158155
};

‎web/src/components/ActionButton/Modal/EvidenceUpload.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ interface IEvidenceUpload {
5858
const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceUploading }) => {
5959
const [title, setTitle] = useState("");
6060
const [description, setDescription] = useState("");
61-
const [fileURI, setFileUri] = useState("");
61+
const [fileURI, setFileURI] = useState("");
6262

6363
useEffect(() => {
6464
setEvidence({
@@ -79,7 +79,7 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
7979
.then(async (res) => {
8080
const response = await res.json();
8181
const fileURI = response["cids"][0];
82-
setFileUri(fileURI);
82+
setFileURI(fileURI);
8383
})
8484
.catch((err) => console.log(err))
8585
.finally(() => setIsEvidenceUploading(false));

‎web/src/components/ActionButton/Modal/RemoveModal.tsx

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { wrapWithToast } from "utils/wrapWithToast";
1616
import EvidenceUpload, { Evidence } from "./EvidenceUpload";
1717
import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
1818
import Modal from "components/Modal";
19-
import { EnsureAuth } from "components/EnsureAuth";
2019

2120
const ReStyledModal = styled(Modal)`
2221
gap: 32px;
@@ -89,46 +88,44 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
8988
<DepositRequired value={depositRequired ?? 0} />
9089
<EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
9190
<Info alertMessage={alertMessage(isItem)} />
92-
<EnsureAuth>
93-
<Buttons
94-
buttonText="Remove"
95-
toggleModal={toggleModal}
96-
isDisabled={isDisabled || isRemovingItem}
97-
isLoading={isLoading}
98-
callback={() => {
99-
setIsRemovingItem(true);
100-
101-
const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
102-
type: "application/json",
103-
});
104-
105-
uploadFileToIPFS(evidenceFile)
106-
.then(async (res) => {
107-
if (res.status === 200 && walletClient) {
108-
const response = await res.json();
109-
const fileURI = response["cids"][0];
110-
111-
const { request } = await prepareWriteCurateV2({
112-
//@ts-ignore
113-
address: registryAddress,
114-
functionName: "removeItem",
115-
args: [itemId as `0x${string}`, fileURI],
116-
value: depositRequired,
117-
});
118-
119-
wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
120-
.then((res) => {
121-
console.log({ res });
122-
refetch();
123-
toggleModal();
124-
})
125-
.finally(() => setIsRemovingItem(false));
126-
}
127-
})
128-
.catch((err) => console.log(err));
129-
}}
130-
/>
131-
</EnsureAuth>
91+
<Buttons
92+
buttonText="Remove"
93+
toggleModal={toggleModal}
94+
isDisabled={isDisabled || isRemovingItem}
95+
isLoading={isLoading}
96+
callback={() => {
97+
setIsRemovingItem(true);
98+
99+
const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
100+
type: "application/json",
101+
});
102+
103+
uploadFileToIPFS(evidenceFile)
104+
.then(async (res) => {
105+
if (res.status === 200 && walletClient) {
106+
const response = await res.json();
107+
const fileURI = response["cids"][0];
108+
109+
const { request } = await prepareWriteCurateV2({
110+
//@ts-ignore
111+
address: registryAddress,
112+
functionName: "removeItem",
113+
args: [itemId as `0x${string}`, fileURI],
114+
value: depositRequired,
115+
});
116+
117+
wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
118+
.then((res) => {
119+
console.log({ res });
120+
refetch();
121+
toggleModal();
122+
})
123+
.finally(() => setIsRemovingItem(false));
124+
}
125+
})
126+
.catch((err) => console.log(err));
127+
}}
128+
/>
132129
</ReStyledModal>
133130
);
134131
};

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Modal, { getModalButtonText } from "./Modal";
1111
import ExecuteButton from "./ExecuteButton";
1212
import { useCurateV2ChallengePeriodDuration } from "hooks/contracts/generated";
1313
import { useQueryClient } from "@tanstack/react-query";
14+
import { isUndefined } from "src/utils";
1415

1516
const StyledKlerosIcon = styled(KlerosIcon)`
1617
path {
@@ -48,17 +49,26 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
4849
}, [itemId, registryAddress, queryClient]);
4950

5051
let ButtonComponent: JSX.Element | null = useMemo(() => {
52+
const disabled = isUndefined(registryAddress) || isUndefined(itemId) || isLoading;
53+
5154
if (status === Status.Disputed)
5255
return (
5356
<a href={`${COURT_SITE}/cases/${disputeId}/overview`} target="_blank" rel="noreferrer">
54-
<Button disabled={isLoading} Icon={StyledKlerosIcon} text={`View Case #${disputeId ?? 0}`} />
57+
<Button disabled={disabled} Icon={StyledKlerosIcon} text={`View Case #${disputeId ?? 0}`} />
5558
</a>
5659
);
5760

5861
if (isExecutable && ![Status.Included, Status.Removed].includes(status))
59-
return <ExecuteButton {...{ registryAddress, itemId, refetch }} />;
62+
return <ExecuteButton {...{ registryAddress, itemId, refetch, disabled }} />;
6063

61-
return <Button variant="secondary" text={getModalButtonText(status ?? 0, isItem)} onClick={toggleModal} />;
64+
return (
65+
<Button
66+
variant="secondary"
67+
disabled={disabled}
68+
text={getModalButtonText(status ?? 0, isItem)}
69+
onClick={toggleModal}
70+
/>
71+
);
6272
}, [isExecutable, registryAddress, status, itemId, isLoading, disputeId, isItem, toggleModal, refetch]);
6373

6474
return (

‎web/src/pages/SubmitList/ListParameters/LogoUpload.tsx

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,31 @@ const LogoUpload: React.FC = () => {
4141
toast.error("File type not supported", toastOptions);
4242
return;
4343
}
44-
setIsLogoUploading(true);
44+
const reader = new FileReader();
45+
reader.onload = (event) => {
46+
const image = new Image();
47+
image.onload = () => {
48+
if (image.width !== image.height) {
49+
toast.error("Image aspect ratio must be 1:1", toastOptions);
50+
return;
51+
}
4552

46-
uploadFileToIPFS(file)
47-
.then(async (res) => {
48-
const response = await res.json();
49-
const logoURI = response["cids"][0];
50-
setListMetadata({ ...listMetadata, logoURI });
51-
})
52-
.catch((err) => console.log(err))
53-
.finally(() => setIsLogoUploading(false));
53+
setIsLogoUploading(true);
54+
55+
uploadFileToIPFS(file)
56+
.then(async (res) => {
57+
const response = await res.json();
58+
const logoURI = response.cids[0];
59+
setListMetadata({ ...listMetadata, logoURI });
60+
})
61+
.catch((err) => console.log(err))
62+
.finally(() => setIsLogoUploading(false));
63+
};
64+
65+
image.src = event.target?.result as string;
66+
};
67+
68+
reader.readAsDataURL(file);
5469
};
5570
return (
5671
<Container>

0 commit comments

Comments
 (0)