Skip to content

Commit f379208

Browse files
authored
Merge branch 'master' into fix/incorrect-chain-detection
2 parents a37faf3 + 847a9dc commit f379208

File tree

7 files changed

+291
-139
lines changed

7 files changed

+291
-139
lines changed
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styled from "styled-components";
2+
3+
export const ErrorButtonMessage = styled.div`
4+
display: flex;
5+
align-items: center;
6+
gap: 4px;
7+
justify-content: center;
8+
margin: 12px;
9+
color: ${({ theme }) => theme.error};
10+
font-size: 14px;
11+
`;

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

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import styled from "styled-components";
33
import { Button } from "@kleros/ui-components-library";
44
import { EnsureChain } from "components/EnsureChain";
55
import { EnsureAuth } from "components/EnsureAuth";
6+
import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
7+
import { ErrorButtonMessage } from "./ErrorButtonMessage";
68

79
const Container = styled.div`
810
display: flex;
@@ -12,28 +14,49 @@ const Container = styled.div`
1214
gap: 16px;
1315
`;
1416

17+
const ButtonsContainer = styled.div`
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
`;
22+
1523
interface IButtons {
1624
toggleModal: () => void;
1725
callback: () => void;
1826
buttonText: string;
1927
isLoading?: boolean;
2028
isDisabled?: boolean;
29+
insufficientBalance: boolean;
2130
}
2231

23-
const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText, callback, isLoading, isDisabled }) => {
32+
const Buttons: React.FC<IButtons> = ({
33+
toggleModal,
34+
buttonText,
35+
callback,
36+
isLoading,
37+
isDisabled,
38+
insufficientBalance,
39+
}) => {
2440
return (
2541
<Container>
2642
<Button variant="secondary" text="Return" onClick={toggleModal} />
2743
<EnsureChain>
2844
<EnsureAuth>
29-
<Button
30-
text={buttonText}
31-
onClick={() => {
32-
callback();
33-
}}
34-
isLoading={isLoading}
35-
disabled={isDisabled}
36-
/>
45+
<ButtonsContainer>
46+
<Button
47+
text={buttonText}
48+
onClick={() => {
49+
callback();
50+
}}
51+
isLoading={isLoading}
52+
disabled={isDisabled}
53+
/>
54+
{insufficientBalance ? (
55+
<ErrorButtonMessage>
56+
<ClosedCircleIcon /> Insufficient balance
57+
</ErrorButtonMessage>
58+
) : null}
59+
</ButtonsContainer>
3760
</EnsureAuth>
3861
</EnsureChain>
3962
</Container>

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

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,22 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
7878

7979
const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
8080

81-
const isDisabled = useMemo(() => {
82-
if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
81+
const insufficientBalance = useMemo(() => {
82+
if (!userBalance || !depositRequired) return true;
8383
return userBalance?.value < depositRequired;
84-
}, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
84+
}, [userBalance, depositRequired]);
8585

86-
const { data: config } = useSimulateCurateV2ChallengeRequest({
87-
query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled },
86+
const isDisabled = useMemo(() => {
87+
if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
88+
return insufficientBalance;
89+
}, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid, insufficientBalance]);
90+
91+
const {
92+
data: config,
93+
isLoading: isConfigLoading,
94+
isError: isConfigError,
95+
} = useSimulateCurateV2ChallengeRequest({
96+
query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled && !insufficientBalance },
8897
address: registryAddress,
8998
args: [itemId as `0x${string}`, JSON.stringify(evidence)],
9099
value: depositRequired,
@@ -95,20 +104,22 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
95104
const isLoading = useMemo(
96105
() =>
97106
isBalanceLoading ||
98-
isLoadingArbCost ||
99107
isSubmissionChallengeDepositLoading ||
100108
isRemovalChallengeDepositLoading ||
101109
isLoadingExtradata ||
102110
isChallengingItem ||
103-
isEvidenceUploading,
111+
isEvidenceUploading ||
112+
isConfigLoading ||
113+
isLoadingArbCost,
104114
[
105115
isBalanceLoading,
106116
isLoadingArbCost,
107117
isSubmissionChallengeDepositLoading,
108118
isRemovalChallengeDepositLoading,
109-
isLoadingArbCost,
119+
isLoadingExtradata,
110120
isChallengingItem,
111121
isEvidenceUploading,
122+
isConfigLoading,
112123
]
113124
);
114125

@@ -118,23 +129,25 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
118129
<DepositRequired value={depositRequired} />
119130
<EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
120131
<Info alertMessage={alertMessage} />
121-
<Buttons
122-
buttonText="Challenge"
123-
toggleModal={toggleModal}
124-
isDisabled={isDisabled || isChallengingItem}
125-
isLoading={isLoading}
126-
callback={() => {
127-
if (challengeRequest && publicClient && config) {
128-
setIsChallengingItem(true);
129-
wrapWithToast(async () => await challengeRequest(config.request), publicClient)
130-
.then(() => {
131-
refetch();
132-
toggleModal();
133-
})
134-
.finally(() => setIsChallengingItem(false));
135-
}
136-
}}
137-
/>
132+
<div>
133+
<Buttons
134+
buttonText="Challenge"
135+
isDisabled={isDisabled || isChallengingItem || isConfigError}
136+
isLoading={isLoading && !insufficientBalance}
137+
callback={() => {
138+
if (challengeRequest && publicClient && config) {
139+
setIsChallengingItem(true);
140+
wrapWithToast(async () => await challengeRequest(config.request), publicClient)
141+
.then(() => {
142+
refetch();
143+
toggleModal();
144+
})
145+
.finally(() => setIsChallengingItem(false));
146+
}
147+
}}
148+
{...{ insufficientBalance, toggleModal }}
149+
/>
150+
</div>
138151
</ReStyledModal>
139152
);
140153
};

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

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -57,60 +57,74 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
5757

5858
const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
5959

60+
const insufficientBalance = useMemo(() => {
61+
if (!userBalance || !depositRequired) return true;
62+
return userBalance?.value < depositRequired;
63+
}, [userBalance, depositRequired]);
64+
6065
const isDisabled = useMemo(() => {
6166
if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
6267
return userBalance?.value < depositRequired;
6368
}, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
6469

65-
const { data: config } = useSimulateCurateV2RemoveItem({
70+
const {
71+
data: config,
72+
isLoading: isConfigLoading,
73+
isError: isConfigError,
74+
} = useSimulateCurateV2RemoveItem({
6675
query: { enabled: !isDisabled && !isUndefined(evidence) },
6776
address: registryAddress,
6877
args: [itemId as `0x${string}`, JSON.stringify(evidence)],
6978
value: depositRequired,
7079
});
7180

7281
const { writeContractAsync: removeItem } = useWriteCurateV2RemoveItem();
73-
const isLoading = useMemo(
74-
() =>
82+
83+
const isLoading = useMemo(() => {
84+
return (
7585
isBalanceLoading ||
76-
isLoadingArbCost ||
7786
isRemovalDepositLoading ||
78-
isLoadingArbCost ||
87+
isLoadingExtradata ||
7988
isRemovingItem ||
80-
isEvidenceUploading,
81-
[
82-
isBalanceLoading,
83-
isLoadingArbCost,
84-
isRemovalDepositLoading,
85-
isLoadingExtradata,
86-
isRemovingItem,
87-
isEvidenceUploading,
88-
]
89-
);
89+
isEvidenceUploading ||
90+
isConfigLoading ||
91+
isLoadingArbCost
92+
);
93+
}, [
94+
isBalanceLoading,
95+
isLoadingArbCost,
96+
isRemovalDepositLoading,
97+
isLoadingExtradata,
98+
isRemovingItem,
99+
isEvidenceUploading,
100+
isConfigLoading,
101+
]);
90102

91103
return (
92104
<ReStyledModal {...{ toggleModal }}>
93105
<Header text={`Remove ${isItem ? "Item" : "List"}`} />
94106
<DepositRequired value={depositRequired ?? 0} />
95107
<EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
96108
<Info alertMessage={alertMessage(isItem)} />
97-
<Buttons
98-
buttonText="Remove"
99-
toggleModal={toggleModal}
100-
isDisabled={isDisabled || isRemovingItem}
101-
isLoading={isLoading}
102-
callback={() => {
103-
if (removeItem && publicClient && config) {
104-
setIsRemovingItem(true);
105-
wrapWithToast(async () => await removeItem(config.request), publicClient)
106-
.then((res) => {
107-
refetch();
108-
toggleModal();
109-
})
110-
.finally(() => setIsRemovingItem(false));
111-
}
112-
}}
113-
/>
109+
<div>
110+
<Buttons
111+
buttonText="Remove"
112+
isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError}
113+
isLoading={isLoading && !insufficientBalance}
114+
callback={() => {
115+
if (removeItem && publicClient && config) {
116+
setIsRemovingItem(true);
117+
wrapWithToast(async () => await removeItem(config.request), publicClient)
118+
.then((res) => {
119+
refetch();
120+
toggleModal();
121+
})
122+
.finally(() => setIsRemovingItem(false));
123+
}
124+
}}
125+
{...{ toggleModal, insufficientBalance }}
126+
/>
127+
</div>
114128
</ReStyledModal>
115129
);
116130
};

web/src/components/ActionButton/Modal/ResubmitModal.tsx

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,19 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
3636
const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
3737
const { data: itemData, isLoading: isItemDataLoading } = useItemDetailsQuery(`${itemId}@${registryAddress}`);
3838

39-
const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
39+
const {
40+
data: arbitratorExtraData,
41+
isLoading: isLoadingExtradata,
42+
isError: isErrorExtradata,
43+
} = useReadCurateV2GetArbitratorExtraData({
4044
address: registryAddress,
4145
});
4246

43-
const { data: removalDeposit, isLoading: isSubmissionDepositLoading } = useReadCurateV2SubmissionBaseDeposit({
47+
const {
48+
data: removalDeposit,
49+
isLoading: isSubmissionDepositLoading,
50+
isError: isErrorSubmissionDeposit,
51+
} = useReadCurateV2SubmissionBaseDeposit({
4452
address: registryAddress,
4553
});
4654

@@ -51,20 +59,28 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
5159
return (arbitrationCost as bigint) + removalDeposit;
5260
}, [arbitrationCost, removalDeposit]);
5361

62+
const insufficientBalance = useMemo(() => {
63+
if (!userBalance || !depositRequired) return true;
64+
return userBalance?.value < depositRequired;
65+
}, [userBalance, depositRequired]);
66+
5467
const isLoading = useMemo(
5568
() =>
56-
isBalanceLoading || isLoadingArbCost || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
57-
[isBalanceLoading, isLoadingArbCost, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
69+
isBalanceLoading || isItemDataLoading || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
70+
[isBalanceLoading, isItemDataLoading, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
5871
);
5972

6073
const isDisabled = useMemo(() => {
61-
if (!userBalance || !depositRequired) return true;
62-
return userBalance?.value < depositRequired;
63-
}, [depositRequired, userBalance]);
74+
return Boolean(insufficientBalance || isErrorExtradata || isErrorSubmissionDeposit);
75+
}, [insufficientBalance, isErrorExtradata, isErrorSubmissionDeposit]);
6476

65-
const { data: config, isError } = useSimulateCurateV2AddItem({
77+
const {
78+
data: config,
79+
isLoading: isConfigLoading,
80+
isError: isConfigError,
81+
} = useSimulateCurateV2AddItem({
6682
query: {
67-
enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading,
83+
enabled: address && registryAddress && !isLoading && !isDisabled,
6884
},
6985
address: registryAddress,
7086
args: [itemData?.item?.data ?? ""],
@@ -78,23 +94,25 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
7894
<Header text={`Resubmit ${isItem ? "Item" : "List"}`} />
7995
<DepositRequired value={depositRequired ?? 0} />
8096
<Info alertMessage={alertMessage(isItem)} />
81-
<Buttons
82-
buttonText="Resubmit"
83-
toggleModal={toggleModal}
84-
isDisabled={isDisabled || isError || isResubmittingItem}
85-
isLoading={isLoading}
86-
callback={() => {
87-
if (!resubmitItem || !config?.request || !publicClient) return;
88-
setIsResubmittingItem(true);
89-
wrapWithToast(async () => await resubmitItem(config.request), publicClient)
90-
.then((res) => {
91-
refetch();
92-
toggleModal();
93-
})
94-
.catch(() => {})
95-
.finally(() => setIsResubmittingItem(false));
96-
}}
97-
/>
97+
<div>
98+
<Buttons
99+
buttonText="Resubmit"
100+
isLoading={(isConfigLoading && !insufficientBalance && isLoadingArbCost) || isLoading}
101+
isDisabled={isDisabled || isConfigError || isLoading}
102+
callback={() => {
103+
if (!resubmitItem || !config?.request || !publicClient) return;
104+
setIsResubmittingItem(true);
105+
wrapWithToast(async () => await resubmitItem(config.request), publicClient)
106+
.then((res) => {
107+
refetch();
108+
toggleModal();
109+
})
110+
.catch(() => {})
111+
.finally(() => setIsResubmittingItem(false));
112+
}}
113+
{...{ toggleModal, insufficientBalance }}
114+
/>
115+
</div>
98116
</ReStyledModal>
99117
);
100118
};

0 commit comments

Comments
 (0)