fix: code smells

Author: kemuru

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -16,7 +16,7 @@ import {
 import { isUndefined } from "utils/index";
 import { DEFAULT_CHAIN } from "consts/chains";
 
-const Fund: React.FC = () => {
+const useNeedFund = () => {
  const loserSideCountdown = useLoserSideCountdownContext();
  const { fundedChoices, winningChoice } = useFundingContext();
  const needFund =
@@ -25,25 +25,43 @@ const Fund: React.FC = () => {
  !isUndefined(winningChoice) &&
  fundedChoices.length > 0 &&
  !fundedChoices.includes(winningChoice));
+
+ return needFund;
+};
+
+const useFundAppeal = (parsedAmount) => {
  const { id } = useParams();
+ const { selectedOption } = useSelectedOptionContext();
+ const { config: fundAppealConfig } = usePrepareDisputeKitClassicFundAppeal({
+ enabled: !isUndefined(id) && !isUndefined(selectedOption),
+ args: [BigInt(id ?? 0), BigInt(selectedOption ?? 0)],
+ value: parsedAmount,
+ });
+
+ const { writeAsync: fundAppeal } = useDisputeKitClassicFundAppeal(fundAppealConfig);
+
+ return fundAppeal;
+};
+
+const Fund: React.FC = () => {
+ const needFund = useNeedFund();
  const { address, isDisconnected } = useAccount();
  const { data: balance } = useBalance({
  address,
  watch: true,
  });
+
  const [amount, setAmount] = useState("");
  const [debouncedAmount, setDebouncedAmount] = useState("");
  useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
+
  const parsedAmount = useParsedAmount(debouncedAmount);
+
  const [isSending, setIsSending] = useState(false);
- const { selectedOption } = useSelectedOptionContext();
+ const fundAppeal = useFundAppeal(parsedAmount);
+
  const { chain } = useNetwork();
- const { config: fundAppealConfig } = usePrepareDisputeKitClassicFundAppeal({
- enabled: !isUndefined(id) && !isUndefined(selectedOption),
- args: [BigInt(id ?? 0), BigInt(selectedOption ?? 0)],
- value: parsedAmount,
- });
- const { writeAsync: fundAppeal } = useDisputeKitClassicFundAppeal(fundAppealConfig);
+
  return needFund ? (
  <div>
  <label>How much ETH do you want to contribute?</label>
@@ -63,7 +81,7 @@ const Fund: React.FC = () => {
  onClick={() => {
  if (fundAppeal) {
  setIsSending(true);
- wrapWithToast(fundAppeal!())
+ wrapWithToast(fundAppeal())
  .then(() => {
  setAmount("");
  close();

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -48,8 +48,8 @@ const Evidence: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
  <ConnectButton />
  )}
  {data &&
- data.evidences.map(({ evidence, sender }, i) => (
- <EvidenceCard key={i} index={i + 1} sender={sender?.id} {...{ evidence }} />
+ data.evidences.map(({ id, evidence, sender }, i) => (
+ <EvidenceCard key={id} index={i + 1} sender={sender?.id} {...{ evidence }} />
  ))}
  </Container>
  );

web/src/pages/Cases/CaseDetails/Voting/Binary.tsx

@@ -20,6 +20,21 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
  const { data: walletClient } = useWalletClient();
  const { chain } = useNetwork();
 
+ const handleVote = async (voteOption: number) => {
+ setIsSending(true);
+ setChosenOption(voteOption);
+ const { request } = await prepareWriteDisputeKitClassic({
+ functionName: "castVote",
+ args: [parsedDisputeID, parsedVoteIDs, BigInt(voteOption), 0n, justification],
+ });
+ if (walletClient) {
+ wrapWithToast(walletClient.writeContract(request)).finally(() => {
+ setChosenOption(-1);
+ setIsSending(false);
+ });
+ }
+ };
+
  return id ? (
  <Container>
  <MainContainer>
@@ -35,26 +50,13 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
  />
  <OptionsContainer>
  {metaEvidence?.rulingOptions?.titles?.map((answer: string, i: number) => {
- chain && chain.id === DEFAULT_CHAIN ? (
+ return chain && chain.id === DEFAULT_CHAIN ? (
  <Button
  key={i}
  text={answer}
  disabled={isSending}
  isLoading={chosenOption === i + 1}
- onClick={async () => {
- setIsSending(true);
- setChosenOption(i + 1);
- const { request } = await prepareWriteDisputeKitClassic({
- functionName: "castVote",
- args: [parsedDisputeID, parsedVoteIDs, BigInt(i + 1), 0n, justification],
- });
- if (walletClient) {
- wrapWithToast(walletClient?.writeContract(request)).finally(() => {
- setChosenOption(-1);
- setIsSending(false);
- });
- }
- }}
+ onClick={() => handleVote(i + 1)}
  />
  ) : (
  <ConnectButton />
@@ -69,20 +71,7 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
  text="Refuse to Arbitrate"
  disabled={isSending}
  isLoading={chosenOption === 0}
- onClick={async () => {
- setIsSending(true);
- setChosenOption(0);
- const { request } = await prepareWriteDisputeKitClassic({
- functionName: "castVote",
- args: [parsedDisputeID, parsedVoteIDs, 0n, 0n, justification],
- });
- if (walletClient) {
- wrapWithToast(walletClient.writeContract(request)).finally(() => {
- setChosenOption(-1);
- setIsSending(false);
- });
- }
- }}
+ onClick={() => handleVote(0)}
  />
  ) : (
  <ConnectButton />
@@ -93,6 +82,7 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
  <></>
  );
 };
+
 const Container = styled.div`
  width: 100%;
  height: auto;

web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { formatEther } from "viem";
 import { useDebounce } from "react-use";
-import { useAccount, useNetwork } from "wagmi";
+import { useAccount } from "wagmi";
 import { Field } from "@kleros/ui-components-library";
 
 import { useParsedAmount } from "hooks/useParsedAmount";
@@ -26,7 +26,6 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, isSending, setIsSending
 
  const { id } = useParams();
  const { address } = useAccount();
- const { chain } = useNetwork();
  const { data: balance } = usePNKBalance(address);
  const parsedBalance = formatEther(balance ?? 0n);
  const { data: jurorBalance } = useJurorBalance(address, id);