From 7d52c27d5c9471840ed893a7c8820de8e8ce8967 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 15 Jan 2024 23:05:51 +0530 Subject: [PATCH 01/11] fix(web): appeal-tab-not-becoming-active-on-its-own --- web/src/pages/Cases/CaseDetails/Tabs.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Tabs.tsx b/web/src/pages/Cases/CaseDetails/Tabs.tsx index 1321d675e..21ff58fd1 100644 --- a/web/src/pages/Cases/CaseDetails/Tabs.tsx +++ b/web/src/pages/Cases/CaseDetails/Tabs.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useMemo } from "react"; import styled from "styled-components"; import { useNavigate, useLocation, useParams } from "react-router-dom"; import { Tabs as TabsComponent } from "@kleros/ui-components-library"; @@ -67,16 +67,19 @@ const Tabs: React.FC = () => { setCurrentTab(TABS.findIndex(({ path }) => path === currentPathName)); }, [currentPathName]); - useEffect(() => { - TABS[3].disabled = + const tabs = useMemo(() => { + const updatedTabs = [...TABS]; + updatedTabs[3].disabled = (parseInt(currentPeriodIndex) < 3 && rounds.length === 1) || (!isUndefined(appealCost) && isLastRound(appealCost) && parseInt(currentPeriodIndex) === 3); - }, [currentPeriodIndex, id, currentTab, rounds.length, appealCost]); + + return updatedTabs; + }, [currentPeriodIndex, id, rounds.length, appealCost]); return ( { setCurrentTab(n); navigate(TABS[n].path); From 86533848be580473c783069ab3a769086360ff98 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 16 Jan 2024 00:05:21 +0530 Subject: [PATCH 02/11] feat(web): add-last-funded-choice-info-label --- .../Appeal/Classic/Options/StageTwo.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx index fe7a4ec66..2c5fc7d74 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx @@ -4,9 +4,13 @@ import OptionCard from "../../OptionCard"; import { useFundingContext, useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext"; import { isUndefined } from "utils/index"; import { formatUnitsWei } from "utils/format"; +import Skeleton from "react-loading-skeleton"; const Container = styled.div` + display: flex; + flex-direction: column; margin: 24px 0; + justify-content: center; `; const OptionsContainer = styled.div` @@ -16,6 +20,9 @@ const OptionsContainer = styled.div` margin-top: 12px; `; +const StyledLabel = styled.label` + margin-bottom: 6px; +`; interface IStageTwo { setAmount: (val: string) => void; } @@ -28,15 +35,25 @@ const StageTwo: React.FC = ({ setAmount }) => { if (!isUndefined(winningChoice)) setSelectedOption(parseInt(winningChoice)); if (!isUndefined(winnerRequiredFunding)) setAmount(formatUnitsWei(winnerRequiredFunding)); }); + return ( {!isUndefined(winningChoice) && !isUndefined(fundedChoices) && !isUndefined(paidFees) && + !isUndefined(options) && fundedChoices.length > 0 && !fundedChoices.includes(winningChoice) ? ( <> - + Loser deadline has finalized, you can only fund the current winner. + + Following choice was funded in the stage one :{" "} + + {fundedChoices.map((choice) => + isUndefined(options[choice]) ? : options[choice] + )} + + Date: Tue, 16 Jan 2024 11:14:21 +0530 Subject: [PATCH 03/11] fix(web): fund-input-not-selectable-in-stage-two-appeal --- .../Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx index 2c5fc7d74..b7cb0ea91 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx @@ -34,7 +34,7 @@ const StageTwo: React.FC = ({ setAmount }) => { useEffect(() => { if (!isUndefined(winningChoice)) setSelectedOption(parseInt(winningChoice)); if (!isUndefined(winnerRequiredFunding)) setAmount(formatUnitsWei(winnerRequiredFunding)); - }); + }, [winnerRequiredFunding, winningChoice]); return ( @@ -57,7 +57,7 @@ const StageTwo: React.FC = ({ setAmount }) => { Date: Tue, 16 Jan 2024 11:54:21 +0530 Subject: [PATCH 04/11] fix(web): disable-fund-button-on-error-and-zero-input --- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 019e70bff..8ecf5d41e 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useMemo, useState } from "react"; import styled from "styled-components"; import { useParams } from "react-router-dom"; import { useAccount, useBalance, usePublicClient } from "wagmi"; @@ -57,7 +57,7 @@ const useNeedFund = () => { const useFundAppeal = (parsedAmount) => { const { id } = useParams(); const { selectedOption } = useSelectedOptionContext(); - const { config: fundAppealConfig } = usePrepareDisputeKitClassicFundAppeal({ + const { config: fundAppealConfig, isError } = usePrepareDisputeKitClassicFundAppeal({ enabled: !isUndefined(id) && !isUndefined(selectedOption), args: [BigInt(id ?? 0), BigInt(selectedOption ?? 0)], value: parsedAmount, @@ -65,7 +65,7 @@ const useFundAppeal = (parsedAmount) => { const { writeAsync: fundAppeal } = useDisputeKitClassicFundAppeal(fundAppealConfig); - return fundAppeal; + return { fundAppeal, isError }; }; interface IFund { @@ -89,7 +89,13 @@ const Fund: React.FC = ({ amount, setAmount, setIsOpen }) => { const parsedAmount = useParsedAmount(debouncedAmount); const [isSending, setIsSending] = useState(false); - const fundAppeal = useFundAppeal(parsedAmount); + const { fundAppeal, isError } = useFundAppeal(parsedAmount); + + const isFundDisabled = useMemo( + () => + isDisconnected || isSending || !balance || parsedAmount > balance.value || Number(parsedAmount) <= 0 || isError, + [isDisconnected, isSending, balance, parsedAmount, isError] + ); return needFund ? ( @@ -105,7 +111,8 @@ const Fund: React.FC = ({ amount, setAmount, setIsOpen }) => { /> balance.value} + disabled={isFundDisabled} + isLoading={isSending} text={isDisconnected ? "Connect to Fund" : "Fund"} onClick={() => { if (fundAppeal) { From 2f738e884552234515efce8548a18792ea205b29 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 16 Jan 2024 13:51:59 +0530 Subject: [PATCH 05/11] fix(web): fix-popup-opening-on-user-reject --- web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 8ecf5d41e..727c57e2c 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -118,8 +118,8 @@ const Fund: React.FC = ({ amount, setAmount, setIsOpen }) => { if (fundAppeal) { setIsSending(true); wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient) - .then(() => { - setIsOpen(true); + .then((res) => { + res.status && setIsOpen(true); }) .finally(() => { setIsSending(false); From 9e9a9ee9beb4929ee34d60c870e6fbc90b20015e Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 16 Jan 2024 13:53:02 +0530 Subject: [PATCH 06/11] fix(web): fix-fully-funded-option-still-selectable --- .../Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx index 5072dd81b..69ead6692 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx @@ -27,7 +27,7 @@ interface IStageOne { } const StageOne: React.FC = ({ setAmount }) => { - const { paidFees, winningChoice, loserRequiredFunding, winnerRequiredFunding } = useFundingContext(); + const { paidFees, winningChoice, loserRequiredFunding, winnerRequiredFunding, fundedChoices } = useFundingContext(); const options = useOptionsContext(); const loserSideCountdown = useLoserSideCountdownContext(); const { selectedOption, setSelectedOption } = useSelectedOptionContext(); @@ -50,6 +50,7 @@ const StageOne: React.FC = ({ setAmount }) => { winner={i.toString() === winningChoice} funding={paidFees[i] ? BigInt(paidFees[i]) : 0n} required={requiredFunding} + canBeSelected={!fundedChoices?.includes(i.toString())} onClick={() => { setSelectedOption(i); setAmount(formatUnitsWei(requiredFunding)); From dd58dbb20520ef4bcebeff90520055e77fa6fabd Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 16 Jan 2024 20:44:38 +0530 Subject: [PATCH 07/11] feat(web): add-stage-explaner-for-stage-2-appeal --- web/src/hooks/useClassicAppealContext.tsx | 26 ++++++-- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 8 +-- .../Appeal/Classic/Options/StageOne.tsx | 6 +- .../Appeal/Classic/Options/StageTwo.tsx | 26 +++----- .../Appeal/Classic/Options/index.tsx | 4 +- .../Appeal/Classic/StageExplainer.tsx | 63 +++++++++++++++---- 6 files changed, 88 insertions(+), 45 deletions(-) diff --git a/web/src/hooks/useClassicAppealContext.tsx b/web/src/hooks/useClassicAppealContext.tsx index 706b8577e..87a1f614e 100644 --- a/web/src/hooks/useClassicAppealContext.tsx +++ b/web/src/hooks/useClassicAppealContext.tsx @@ -9,7 +9,11 @@ import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicApp import { useCountdown } from "hooks/useCountdown"; import { getLocalRounds } from "utils/getLocalRounds"; -const LoserSideCountdownContext = createContext(undefined); +interface ICountdownContext { + loserSideCountdown?: number | undefined; + winnerSideCountdown?: number | undefined; +} +const CountdownContext = createContext({}); const OptionsContext = createContext(undefined); @@ -60,6 +64,12 @@ export const ClassicAppealProvider: React.FC<{ dispute?.court.timesPerPeriod[Periods.appeal], multipliers?.loser_appeal_period_multiplier.toString() ); + + const winnerSideCountdown = useWinnerSideCountdown( + dispute?.lastPeriodChange, + dispute?.court.timesPerPeriod[Periods.appeal] + ); + const { loserRequiredFunding, winnerRequiredFunding } = useMemo( () => ({ loserRequiredFunding: getRequiredFunding(appealCost, multipliers?.loser_stake_multiplier), @@ -70,7 +80,7 @@ export const ClassicAppealProvider: React.FC<{ const fundedChoices = getFundedChoices(data?.dispute); const [selectedOption, setSelectedOption] = useState(); return ( - + ({ selectedOption, setSelectedOption }), [selectedOption, setSelectedOption])} > @@ -89,11 +99,11 @@ export const ClassicAppealProvider: React.FC<{ {children} - + ); }; -export const useLoserSideCountdownContext = () => useContext(LoserSideCountdownContext); +export const useCountdownContext = () => useContext(CountdownContext); export const useSelectedOptionContext = () => useContext(SelectedOptionContext); export const useFundingContext = () => useContext(FundingContext); export const useOptionsContext = () => useContext(OptionsContext); @@ -136,6 +146,14 @@ function useLoserSideCountdown(lastPeriodChange = "0", appealPeriodDuration = "0 return useCountdown(deadline); } +function useWinnerSideCountdown(lastPeriodChange = "0", appealPeriodDuration = "0") { + const deadline = useMemo( + () => Number(BigInt(lastPeriodChange) + BigInt(appealPeriodDuration)), + [lastPeriodChange, appealPeriodDuration] + ); + return useCountdown(deadline); +} + const getDeadline = (lastPeriodChange: string, appealPeriodDuration: string, loserTimeMultiplier: string): number => { const parsedLastPeriodChange = BigInt(lastPeriodChange); const parsedAppealPeriodDuration = BigInt(appealPeriodDuration); diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 727c57e2c..56fc81604 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -9,11 +9,7 @@ import { isUndefined } from "utils/index"; import { EnsureChain } from "components/EnsureChain"; import { usePrepareDisputeKitClassicFundAppeal, useDisputeKitClassicFundAppeal } from "hooks/contracts/generated"; import { useParsedAmount } from "hooks/useParsedAmount"; -import { - useLoserSideCountdownContext, - useSelectedOptionContext, - useFundingContext, -} from "hooks/useClassicAppealContext"; +import { useSelectedOptionContext, useFundingContext, useCountdownContext } from "hooks/useClassicAppealContext"; const Container = styled.div` display: flex; @@ -42,7 +38,7 @@ const StyledButton = styled(Button)` `; const useNeedFund = () => { - const loserSideCountdown = useLoserSideCountdownContext(); + const { loserSideCountdown } = useCountdownContext(); const { fundedChoices, winningChoice } = useFundingContext(); const needFund = (loserSideCountdown ?? 0) > 0 || diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx index 69ead6692..edd75f7c3 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx @@ -3,8 +3,8 @@ import styled from "styled-components"; import StageExplainer from "../StageExplainer"; import OptionCard from "../../OptionCard"; import { + useCountdownContext, useFundingContext, - useLoserSideCountdownContext, useOptionsContext, useSelectedOptionContext, } from "hooks/useClassicAppealContext"; @@ -29,12 +29,12 @@ interface IStageOne { const StageOne: React.FC = ({ setAmount }) => { const { paidFees, winningChoice, loserRequiredFunding, winnerRequiredFunding, fundedChoices } = useFundingContext(); const options = useOptionsContext(); - const loserSideCountdown = useLoserSideCountdownContext(); + const { loserSideCountdown } = useCountdownContext(); const { selectedOption, setSelectedOption } = useSelectedOptionContext(); return ( - + {!isUndefined(paidFees) && diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx index b7cb0ea91..6c0bf3f87 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx @@ -1,16 +1,18 @@ import React, { useEffect } from "react"; import styled from "styled-components"; import OptionCard from "../../OptionCard"; -import { useFundingContext, useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext"; +import { + useCountdownContext, + useFundingContext, + useOptionsContext, + useSelectedOptionContext, +} from "hooks/useClassicAppealContext"; import { isUndefined } from "utils/index"; import { formatUnitsWei } from "utils/format"; -import Skeleton from "react-loading-skeleton"; +import StageExplainer from "../StageExplainer"; const Container = styled.div` - display: flex; - flex-direction: column; margin: 24px 0; - justify-content: center; `; const OptionsContainer = styled.div` @@ -20,15 +22,13 @@ const OptionsContainer = styled.div` margin-top: 12px; `; -const StyledLabel = styled.label` - margin-bottom: 6px; -`; interface IStageTwo { setAmount: (val: string) => void; } const StageTwo: React.FC = ({ setAmount }) => { const { paidFees, winningChoice, winnerRequiredFunding, fundedChoices } = useFundingContext(); + const { winnerSideCountdown } = useCountdownContext(); const options = useOptionsContext(); const { selectedOption, setSelectedOption } = useSelectedOptionContext(); useEffect(() => { @@ -45,15 +45,7 @@ const StageTwo: React.FC = ({ setAmount }) => { fundedChoices.length > 0 && !fundedChoices.includes(winningChoice) ? ( <> - Loser deadline has finalized, you can only fund the current winner. - - Following choice was funded in the stage one :{" "} - - {fundedChoices.map((choice) => - isUndefined(options[choice]) ? : options[choice] - )} - - + = ({ setAmount }) => { - const loserSideCountdown = useLoserSideCountdownContext(); + const { loserSideCountdown } = useCountdownContext(); return !isUndefined(loserSideCountdown) ? ( {loserSideCountdown > 0 ? : } diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx index d3fd96015..3a45aee54 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx @@ -3,6 +3,9 @@ import styled from "styled-components"; import { Box } from "@kleros/ui-components-library"; import { secondsToDayHourMinute } from "utils/date"; import HourglassIcon from "svgs/icons/hourglass.svg"; +import { isUndefined } from "utils/index"; +import { useFundingContext, useOptionsContext } from "hooks/useClassicAppealContext"; +import Skeleton from "react-loading-skeleton"; const StyledBox = styled(Box)` border-radius: 3px; @@ -12,6 +15,7 @@ const StyledBox = styled(Box)` padding: 16px 24px; & > div > label { display: block; + margin-bottom: 4px; } `; @@ -31,24 +35,57 @@ const CountdownLabel = styled.label` `; interface IStageExplainer { - loserSideCountdown: number | undefined; + countdown?: number | undefined; + stage: 1 | 2; } -const StageExplainer: React.FC = ({ loserSideCountdown }) => ( - - - - {typeof loserSideCountdown !== "undefined" && secondsToDayHourMinute(loserSideCountdown)} - -
+const StageOneExplanation: React.FC = () => ( + <> + {" "} + + + +); + +const StageTwoExplanation: React.FC = () => { + const { fundedChoices } = useFundingContext(); + const options = useOptionsContext(); + return ( + <> + -
- -); + + ); +}; + +const StageExplainer: React.FC = ({ countdown, stage }) => { + return ( + + + + {!isUndefined(countdown) ? secondsToDayHourMinute(countdown) : null} + +
{stage === 1 ? : }
+ + ); +}; export default StageExplainer; From 6da30891567cac36c3d133bc134d05370ad274a1 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 17 Jan 2024 12:00:45 +0530 Subject: [PATCH 08/11] refactor(web): add-loading-indicator-in-stage-two-appeal-display --- .../Appeal/Classic/Options/StageTwo.tsx | 42 +++++++++---------- .../Appeal/Classic/StageExplainer.tsx | 8 +++- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx index 6c0bf3f87..99e95a67d 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx @@ -10,6 +10,7 @@ import { import { isUndefined } from "utils/index"; import { formatUnitsWei } from "utils/format"; import StageExplainer from "../StageExplainer"; +import Skeleton from "react-loading-skeleton"; const Container = styled.div` margin: 24px 0; @@ -38,28 +39,27 @@ const StageTwo: React.FC = ({ setAmount }) => { return ( - {!isUndefined(winningChoice) && - !isUndefined(fundedChoices) && - !isUndefined(paidFees) && - !isUndefined(options) && - fundedChoices.length > 0 && - !fundedChoices.includes(winningChoice) ? ( - <> - - - setSelectedOption(parseInt(winningChoice!, 10))} - /> - - + {!isUndefined(winningChoice) && !isUndefined(fundedChoices) && !isUndefined(paidFees) ? ( + fundedChoices.length > 0 && !fundedChoices.includes(winningChoice) ? ( + <> + + + setSelectedOption(parseInt(winningChoice!, 10))} + /> + + + ) : ( + + ) ) : ( - + )} ); diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx index 3a45aee54..569954f1a 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx @@ -80,8 +80,12 @@ const StageExplainer: React.FC = ({ countdown, stage }) => { return ( - - {!isUndefined(countdown) ? secondsToDayHourMinute(countdown) : null} + {!isUndefined(countdown) ? ( + <> + + {countdown > 0 ? secondsToDayHourMinute(countdown) : } + + ) : null}
{stage === 1 ? : }
 From dea63d5037e76ad76621cbbcf7239cc27b18d6aa Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 17 Jan 2024 14:52:01 +0530 Subject: [PATCH 09/11] refactor(web): fix-code-smells --- web/src/hooks/useClassicAppealContext.tsx | 9 +++-- .../Appeal/Classic/Options/StageTwo.tsx | 38 ++++++++++--------- .../Appeal/Classic/StageExplainer.tsx | 6 +-- 3 files changed, 29 insertions(+), 24 deletions(-) diff --git a/web/src/hooks/useClassicAppealContext.tsx b/web/src/hooks/useClassicAppealContext.tsx index 87a1f614e..067d30b2c 100644 --- a/web/src/hooks/useClassicAppealContext.tsx +++ b/web/src/hooks/useClassicAppealContext.tsx @@ -10,8 +10,8 @@ import { useCountdown } from "hooks/useCountdown"; import { getLocalRounds } from "utils/getLocalRounds"; interface ICountdownContext { - loserSideCountdown?: number | undefined; - winnerSideCountdown?: number | undefined; + loserSideCountdown?: number; + winnerSideCountdown?: number; } const CountdownContext = createContext({}); @@ -79,8 +79,11 @@ export const ClassicAppealProvider: React.FC<{ ); const fundedChoices = getFundedChoices(data?.dispute); const [selectedOption, setSelectedOption] = useState(); + return ( - + ({ loserSideCountdown, winnerSideCountdown }), [loserSideCountdown, winnerSideCountdown])} + > ({ selectedOption, setSelectedOption }), [selectedOption, setSelectedOption])} > diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx index 99e95a67d..ff2d16d7b 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx @@ -40,24 +40,26 @@ const StageTwo: React.FC = ({ setAmount }) => { return ( {!isUndefined(winningChoice) && !isUndefined(fundedChoices) && !isUndefined(paidFees) ? ( - fundedChoices.length > 0 && !fundedChoices.includes(winningChoice) ? ( - <> - - - setSelectedOption(parseInt(winningChoice!, 10))} - /> - - - ) : ( - - ) + <> + {fundedChoices.length > 0 && !fundedChoices.includes(winningChoice) ? ( + <> + + + setSelectedOption(parseInt(winningChoice!, 10))} + /> + + + ) : ( + + )} + ) : ( )} diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx index 569954f1a..bdeb125a9 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx @@ -35,7 +35,7 @@ const CountdownLabel = styled.label` `; interface IStageExplainer { - countdown?: number | undefined; + countdown: number | undefined; stage: 1 | 2; } @@ -67,7 +67,7 @@ const StageTwoExplanation: React.FC = () => { {!isUndefined(fundedChoices) && !isUndefined(options) ? fundedChoices.map((choice) => - isUndefined(options[choice]) ? : options[choice] + isUndefined(options[choice]) ? : options[choice] ) : null} @@ -83,7 +83,7 @@ const StageExplainer: React.FC = ({ countdown, stage }) => { {!isUndefined(countdown) ? ( <> - {countdown > 0 ? secondsToDayHourMinute(countdown) : } + {countdown > 0 ? secondsToDayHourMinute(countdown) : Time's up} ) : null} From f0c5d3fafc17842ab41fbed9debb71b344110120 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 17 Jan 2024 15:21:20 +0530 Subject: [PATCH 10/11] refactor(web): center-connect-button-in-fund-input --- .../Cases/CaseDetails/Appeal/Classic/Fund.tsx | 60 ++++++++++--------- .../Appeal/Classic/StageExplainer.tsx | 18 +++--- 2 files changed, 41 insertions(+), 37 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 56fc81604..56ea16d14 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -14,6 +14,7 @@ import { useSelectedOptionContext, useFundingContext, useCountdownContext } from const Container = styled.div` display: flex; flex-direction: column; + align-items: center; gap: 8px; `; @@ -34,9 +35,12 @@ const StyledField = styled(Field)` const StyledButton = styled(Button)` margin: auto; - margin-top: 12px; + margin-top: 4px; `; +const StyledLabel = styled.label` + align-self: flex-start; +`; const useNeedFund = () => { const { loserSideCountdown } = useCountdownContext(); const { fundedChoices, winningChoice } = useFundingContext(); @@ -95,36 +99,34 @@ const Fund: React.FC = ({ amount, setAmount, setIsOpen }) => { return needFund ? ( - -
- { - setAmount(e.target.value); + How much ETH do you want to contribute? + { + setAmount(e.target.value); + }} + placeholder="Amount to fund" + /> + + { + if (fundAppeal) { + setIsSending(true); + wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient) + .then((res) => { + res.status && setIsOpen(true); + }) + .finally(() => { + setIsSending(false); + }); + } }} - placeholder="Amount to fund" /> - - { - if (fundAppeal) { - setIsSending(true); - wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient) - .then((res) => { - res.status && setIsOpen(true); - }) - .finally(() => { - setIsSending(false); - }); - } - }} - /> - -
+ ) : ( <> diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx index bdeb125a9..153f2df32 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx @@ -40,7 +40,7 @@ interface IStageExplainer { } const StageOneExplanation: React.FC = () => ( - <> +
{" "}
); const StageTwoExplanation: React.FC = () => { const { fundedChoices } = useFundingContext(); const options = useOptionsContext(); return ( - <> - +
+ - +
); }; @@ -87,7 +89,7 @@ const StageExplainer: React.FC = ({ countdown, stage }) => { ) : null} -
{stage === 1 ? : }
+ {stage === 1 ? : } ); }; From a8b9dc5fbee6b90358b5aab63b1069ddafb82d76 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 17 Jan 2024 22:44:57 +0530 Subject: [PATCH 11/11] refactor(web): update-stage-2-explanation --- .../pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx index 153f2df32..206ce2d79 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx @@ -60,8 +60,8 @@ const StageTwoExplanation: React.FC = () => { Loser deadline has finalized, you can only fund the current winner.