Skip to content

Commit

Permalink
Fixup last things
Browse files Browse the repository at this point in the history
  • Loading branch information
@Corantin
Corantin committed Mar 31, 2022
1 parent 9a1c660 commit fc0d8c5
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 32 deletions.
16 changes: 10 additions & 6 deletions packages/react-app/src/components/field-input/amount-field-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,24 +133,25 @@ function AmountFieldInput({

// Needed since the access of state in event handlers is not working
const hasFocusedRef = React.useRef(_hasFocused);
const setHasFocues = (data: boolean) => {
const setHasFocused = (data: boolean) => {
hasFocusedRef.current = data;
_setHasFocused(data);
};

const autoCompleteRef: React.Ref<any> = useRef(null);
const handleFocusIn = () => {
const handleFocusIn = (e: FocusEvent) => {
if (
document.activeElement === autoCompleteRef.current &&
walletAddress &&
isEdit &&
tokenEditable
) {
setHasFocues(true);
setHasFocused(true);
fetchAvailableTokens();
} else if (document.activeElement !== autoCompleteRef.current && hasFocusedRef.current) {
formik?.setFieldTouched(id, true);
setHasFocues(false);
formik?.handleBlur(e);
setHasFocused(false);
}
};
useEffect(() => {
Expand Down Expand Up @@ -241,7 +242,10 @@ function AmountFieldInput({
title={!token ? 'Set token first' : undefined}
onChange={onAmountChange}
placeHolder={placeHolder}
onBlur={() => formik?.setFieldTouched(id, true)}
onBlur={(e: React.FocusEvent) => {
formik?.setFieldTouched(id, true);
formik?.handleBlur(e);
}}
type="number"
value={amount}
wide={wide}
Expand Down Expand Up @@ -271,7 +275,7 @@ function AmountFieldInput({
onChange={setSearchTerm}
onSelect={onTokenChange}
ref={autoCompleteRef}
onBlur={() => formik?.setFieldTouched(id, true)}
onBlur={(e: FocusEvent) => formik?.handleBlur(e)}
placeholder="Search name or paste address"
wide={wide}
renderSelected={(i: number) => (
Expand Down
1 change: 1 addition & 0 deletions packages/react-app/src/components/field-input/field-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const ErrorStyled = styled.span`
color: ${(props: any) => props.theme.negative};
font-size: small;
margin-left: ${GUpx(2)};
font-style: italic;
`;
const LabelStyled = styled.label`
color: ${(props: any) => props.color};
Expand Down
30 changes: 19 additions & 11 deletions packages/react-app/src/components/modals/challenge-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
const [isEnoughBalance, setIsEnoughBalance] = useState(false);
const [isFeeDepositSameToken, setIsFeeDepositSameToken] = useState<boolean>();
const [challengeFee, setChallengeFee] = useState<TokenAmountModel | undefined>(undefined);
const [isFormValid, setIsFormValid] = useState(false);
const { setTransaction } = useTransactionContext();
const formRef = useRef<HTMLFormElement>(null);
const { walletAddress } = useWallet();
Expand Down Expand Up @@ -116,7 +117,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop

const challengeTx = async (values: Partial<ChallengeModel>, setSubmitting: Function) => {
if (!values.reason) {
toast('Validation : Reason is required');
toast('Reason is required');
} else {
try {
setLoading(true);
Expand Down Expand Up @@ -258,7 +259,9 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
};
const validate = (values: ChallengeModel) => {
const errors = {} as FormikErrors<ChallengeModel>;
if (!values.reason) errors.reason = 'Validation : Challenge reason is required';
if (!values.reason) errors.reason = 'Challenge reason is required';

setIsFormValid(Object.keys(errors).length === 0);
return errors;
};

Expand Down Expand Up @@ -333,7 +336,9 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
mode="negative"
type="submit"
form="form-challenge"
disabled={loading || !walletAddress || !isEnoughBalance || challengeTimeout}
disabled={
loading || !walletAddress || !isEnoughBalance || challengeTimeout || !isFormValid
}
/>,
]}
onClose={closeModal}
Expand All @@ -342,16 +347,19 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
<Formik
initialValues={{ reason: '' } as any}
onSubmit={(values, { setSubmitting }) => {
challengeTx(
{
reason: values.reason,
deposit: challengeDeposit,
},
setSubmitting,
);
validate(values); // validate one last time before submiting
if (isFormValid) {
challengeTx(
{
reason: values.reason,
deposit: challengeDeposit,
},
setSubmitting,
);
}
}}
validateOnBlur
validate={validate}
validateOnBlur
>
{({ values, handleSubmit, handleChange, errors, touched, handleBlur }) => (
<FormStyled id="form-challenge" onSubmit={handleSubmit} ref={formRef}>
Expand Down
11 changes: 7 additions & 4 deletions packages/react-app/src/components/modals/fund-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default function FundModal({ quest, onClose = noop }: Props) {
const { walletAddress } = useWallet();
const [opened, setOpened] = useState(false);
const [loading, setLoading] = useState(false);
const [isFormValid, setIsFormValid] = useState(false);
const formRef = useRef<HTMLFormElement>(null);
const { setTransaction } = useTransactionContext();
const [isEnoughBalance, setIsEnoughBalance] = useState(false);
Expand Down Expand Up @@ -102,6 +103,8 @@ export default function FundModal({ quest, onClose = noop }: Props) {
const errors = {} as FormErrors<FundModel>;
if (!values.fundAmount?.parsedAmount || values.fundAmount.parsedAmount <= 0)
errors.fundAmount = 'Amount invalid';

setIsFormValid(Object.keys(errors).length === 0);
return errors;
};

Expand All @@ -113,13 +116,13 @@ export default function FundModal({ quest, onClose = noop }: Props) {
} as FundModel
}
onSubmit={(values, { setSubmitting }) => {
const errors = validate(values);
// IsValid check
if (!Object.keys(errors).length) {
validate(values); // validate one last time before submiting
if (isFormValid) {
fundModalTx(values, setSubmitting);
}
}}
validate={validate}
validateOnBlur
>
{({ values, handleSubmit, handleChange, touched, errors }) => (
<ModalBase
Expand All @@ -146,7 +149,7 @@ export default function FundModal({ quest, onClose = noop }: Props) {
form="form-fund"
label="Fund"
mode="strong"
disabled={loading || !walletAddress || !isEnoughBalance}
disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
/>,
]}
onClose={closeModal}
Expand Down
23 changes: 15 additions & 8 deletions packages/react-app/src/components/modals/schedule-claim-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export default function ScheduleClaimModal({
const { walletAddress } = useWallet();
const [loading, setLoading] = useState(false);
const [opened, setOpened] = useState(false);
const [isFormValid, setIsFormValid] = useState(false);
const [isEnoughBalance, setIsEnoughBalance] = useState(false);
const formRef = useRef<HTMLFormElement>(null);
const { setTransaction } = useTransactionContext();
Expand All @@ -69,22 +70,28 @@ export default function ScheduleClaimModal({
};
const validate = (values: ClaimModel & { claimAll: boolean }) => {
const errors = {} as FormErrors<ClaimModel>;
if (!values.evidence) errors.evidence = 'Validation : Evidence of completion is required';
if (!values.claimedAmount) errors.claimedAmount = 'Validation : Claim amount is required';
if (!values.claimAll && values.claimedAmount.parsedAmount > questTotalBounty.parsedAmount)
errors.claimedAmount = 'Validation : Claim amount should not be higher than available bounty';
if (!values.evidence) errors.evidence = 'Evidence of completion is required';
if (!values.claimAll) {
if (!values.claimedAmount?.parsedAmount) errors.claimedAmount = 'Claim amount is required';
else if (values.claimedAmount.parsedAmount < 0)
errors.claimedAmount = 'Claim amount is invalid';
else if (values.claimedAmount.parsedAmount > questTotalBounty.parsedAmount)
errors.claimedAmount = 'Claim amount should not be higher than available bounty';
}

if (values.playerAddress) {
try {
values.playerAddress = toChecksumAddress(values.playerAddress);
} catch (error) {
errors.playerAddress = 'Validation : Player address is not valid';
errors.playerAddress = 'Player address is not valid';
}
}
setIsFormValid(Object.keys(errors).length === 0);
return errors;
};
const onClaimSubmit = (values: ClaimModel & { claimAll: boolean }, setSubmitting: Function) => {
const errors = validate(values);
if (!Object.keys(errors).length) {
validate(values); // Validate one last time before submitting
if (isFormValid) {
if (values.claimAll) {
values.claimedAmount.parsedAmount = 0;
values.claimedAmount.token.amount = '0';
Expand Down Expand Up @@ -214,7 +221,7 @@ export default function ScheduleClaimModal({
mode="positive"
type="submit"
form="form-claim"
disabled={loading || !walletAddress || !isEnoughBalance}
disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
/>,
]}
onClose={closeModal}
Expand Down
7 changes: 4 additions & 3 deletions packages/react-app/src/components/quest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export default function Quest({
const [isEdit, setIsEdit] = useState(false);
const [bounty, setBounty] = useState<TokenAmountModel | null>();
const [claimUpdated, setClaimUpdate] = useState(0);
const [isFormValid, setIsFormValid] = useState(false);
const { setTransaction } = useTransactionContext();
const [claimDeposit, setClaimDeposit] = useState<TokenAmountModel | null>();
const [challengeDeposit, setChallengeDeposit] = useState<TokenAmountModel | null>();
Expand Down Expand Up @@ -189,9 +190,8 @@ export default function Quest({
}, [questMode, questData, walletAddress]);

const onQuestSubmit = async (values: QuestModel, setSubmitting: Function) => {
const errors = validate(values);
// IsValid check
if (!Object.keys(errors).length) {
validate(values); // Validate one last time before submitting
if (isFormValid) {
setLoading(true);
let createdQuestAddress: string;
try {
Expand Down Expand Up @@ -352,6 +352,7 @@ export default function Quest({

debounceSave(data);

setIsFormValid(Object.keys(errors).length === 0);
return errors;
};

Expand Down

0 comments on commit fc0d8c5

Please sign in to comment.