From ec029703205665db5bd9a7ccd239f89f395aeb97 Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Wed, 25 May 2022 16:19:32 -0400
Subject: [PATCH 1/6] Fix ipfs warning + refactor claim to refresh data

---
 .../react-app/src/components/claim-list.tsx   |  6 +-
 packages/react-app/src/components/claim.tsx   | 74 ++++++++++++----
 .../src/components/modals/challenge-modal.tsx | 69 +++------------
 .../components/modals/execute-claim-modal.tsx | 88 +++++++------------
 packages/react-app/src/hooks/use-hooks.ts     | 37 ++++++++
 5 files changed, 142 insertions(+), 132 deletions(-)
 create mode 100644 packages/react-app/src/hooks/use-hooks.ts

diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx
index dc2e5684..ef1195cd 100644
--- a/packages/react-app/src/components/claim-list.tsx
+++ b/packages/react-app/src/components/claim-list.tsx
@@ -6,7 +6,7 @@ import { ENUM_CLAIM_STATE, ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { QuestModel } from 'src/models/quest.model';
 import { useEffect, useState } from 'react';
-import { getObjectFromIpfsSafe } from 'src/services/ipfs.service';
+import { getObjectFromIpfs, ipfsTheGraph } from 'src/services/ipfs.service';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { HelpTooltip } from './field-input/help-tooltip';
 import * as QuestService from '../services/quest.service';
@@ -83,8 +83,8 @@ export default function ClaimList({ questData, challengeDeposit, isLoading = fal
 
   const fetchClaimsUntilNew = (claimsCount?: number) => {
     if (!claimsCount) {
-      setClaims([loadingClaim, ...claims]);
       claimsCount = claims.length;
+      setClaims([loadingClaim, ...claims]);
     }
     setTimeout(async () => {
       const results = await QuestService.fetchQuestClaims(questData);
@@ -113,7 +113,7 @@ export default function ClaimList({ questData, challengeDeposit, isLoading = fal
       result.map(async (claim) => ({
         ...claim,
         evidence: claim.evidenceIpfsHash
-          ? await getObjectFromIpfsSafe(claim.evidenceIpfsHash)
+          ? await getObjectFromIpfs(claim.evidenceIpfsHash, ipfsTheGraph)
           : 'No evidence',
       })),
     );
diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index 0dfb337d..90a2c3a5 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -1,11 +1,13 @@
-import { useViewport } from '@1hive/1hive-ui';
-import { ReactNode, useEffect, useState } from 'react';
+import { useViewport, Timer } from '@1hive/1hive-ui';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ENUM_CLAIM_STATE, ENUM_DISPUTE_STATES, ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { useWallet } from 'src/contexts/wallet.context';
+import { useTimeout } from 'src/hooks/use-hooks';
 import { ClaimModel } from 'src/models/claim.model';
 import { QuestModel } from 'src/models/quest.model';
 import { TokenAmountModel } from 'src/models/token-amount.model';
+import { compareCaseInsensitive } from 'src/utils/string.util';
 import styled, { css } from 'styled-components';
 import { AddressFieldInput } from './field-input/address-field-input';
 import AmountFieldInput from './field-input/amount-field-input';
@@ -42,37 +44,75 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
   const { below } = useViewport();
   const [waitForClose, setWaitForClose] = useState(false);
   const [actionButton, setActionButton] = useState<ReactNode>();
+  const [isClaimable, setIsClaimable] = useState(false);
+
+  useTimeout(() => {
+    setIsClaimable(true);
+  }, Math.max((claim.executionTimeMs ?? 0) - Date.now(), 0));
 
   useEffect(() => {
     setState(claim.state);
   }, [claim.state]);
 
+  const timer = useMemo(
+    () =>
+      claim.executionTimeMs &&
+      claim.executionTimeMs - Date.now() > 0 && <Timer end={new Date(claim.executionTimeMs)} />,
+    [claim.executionTimeMs],
+  );
+
+  const onActionClose = () => {
+    setWaitForClose(false);
+  };
+
+  const executeClaimModal = useMemo(
+    () => (
+      <ExecuteClaimModal
+        claim={claim}
+        questTotalBounty={questData.bounty}
+        onClose={onActionClose}
+        isClaimable={isClaimable}
+      />
+    ),
+    [claim, questData.bounty, isClaimable],
+  );
+
+  const challengeModal = useMemo(
+    () => (
+      <ChallengeModal claim={claim} challengeDeposit={challengeDeposit} onClose={onActionClose} />
+    ),
+    [claim, challengeDeposit],
+  );
+
+  const resolveChallengeModal = useMemo(
+    () => <ResolveChallengeModal claim={claim} onClose={onActionClose} />,
+    [claim],
+  );
+
   useEffect(() => {
     if (waitForClose || !state) return;
     if (state === ENUM_CLAIM_STATE.Scheduled) {
-      if (walletAddress === claim.playerAddress) {
+      if (compareCaseInsensitive(walletAddress, claim.playerAddress) || isClaimable) {
         setActionButton(
-          <ExecuteClaimModal
-            claim={claim}
-            questTotalBounty={questData.bounty}
-            onClose={onActionClose}
-          />,
+          <>
+            {executeClaimModal}
+            {timer}
+          </>,
         );
       } else {
         setActionButton(
-          <ChallengeModal
-            claim={claim}
-            challengeDeposit={challengeDeposit}
-            onClose={onActionClose}
-          />,
+          <>
+            {challengeModal}
+            {timer}
+          </>,
         );
       }
     } else if (state === ENUM_CLAIM_STATE.Challenged) {
-      setActionButton(<ResolveChallengeModal claim={claim} onClose={onActionClose} />);
+      setActionButton(resolveChallengeModal);
     } else {
       setActionButton(undefined);
     }
-  }, [state, walletAddress, waitForClose]);
+  }, [state, walletAddress, waitForClose, isClaimable]);
 
   useEffect(() => {
     // If tx completion impact Claims, update them
@@ -108,10 +148,6 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
     }
   }, [transaction?.status, transaction?.type, transaction?.[0], claim.container]);
 
-  const onActionClose = () => {
-    setWaitForClose(false);
-  };
-
   return (
     <div className="wide">
       <Outset>
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index bcfee623..182ddae4 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Button, useToast, IconFlag, Timer } from '@1hive/1hive-ui';
+import { Button, useToast, IconFlag } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
@@ -51,8 +51,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
   const toast = useToast();
   const [loading, setLoading] = useState(false);
   const [opened, setOpened] = useState(false);
-  const [challengeTimeout, setChallengedTimeout] = useState<boolean | undefined>(undefined);
-  const [buttonLabel, setOpenButtonLabel] = useState<string>();
+  // const [challengeTimeout, setChallengedTimeout] = useState<boolean | undefined>(undefined);
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const [isFeeDepositSameToken, setIsFeeDepositSameToken] = useState<boolean>();
   const [challengeFee, setChallengeFee] = useState<TokenAmountModel | undefined>(undefined);
@@ -70,34 +69,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
     fetchFee();
   }, [walletAddress]);
 
-  useEffect(() => {
-    let handle: number;
-    const launchSetTimeoutAsync = async (execTimeMs: number) => {
-      const now = Date.now();
-
-      if (now > execTimeMs) setChallengedTimeout(true);
-      else {
-        setChallengedTimeout(false);
-        handle = window.setTimeout(() => {
-          setChallengedTimeout(true);
-        }, execTimeMs - now); // To ms
-      }
-    };
-    if (claim.executionTimeMs) launchSetTimeoutAsync(claim.executionTimeMs);
-    return () => {
-      if (handle) clearTimeout(handle);
-    };
-  }, [claim.executionTimeMs]);
-
-  useEffect(() => {
-    if (challengeTimeout !== undefined) {
-      if (challengeTimeout)
-        // wait to load
-        setOpenButtonLabel('Challenge period over');
-      else setOpenButtonLabel('Challenge');
-    }
-  }, [claim.state, challengeTimeout]);
-
   useEffect(() => {
     if (challengeFee)
       setIsFeeDepositSameToken(
@@ -219,19 +190,14 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
       title="Challenge quests"
       openButton={
         <OpenButtonWrapperStyled>
-          {buttonLabel && (
-            <OpenButtonStyled
-              icon={<IconFlag />}
-              onClick={() => setOpened(true)}
-              label={buttonLabel}
-              mode="negative"
-              title={challengeTimeout ? "This claim can't be challenged anymore" : buttonLabel}
-              disabled={!buttonLabel || loading || !walletAddress || challengeTimeout}
-            />
-          )}
-          {!loading && challengeTimeout === false && claim.executionTimeMs && (
-            <Timer end={new Date(claim.executionTimeMs)} />
-          )}
+          <OpenButtonStyled
+            icon={<IconFlag />}
+            onClick={() => setOpened(true)}
+            label="Challenge"
+            mode="negative"
+            title={"This claim can't be challenged anymore"}
+            disabled={loading || !walletAddress}
+          />
         </OpenButtonWrapperStyled>
       }
       buttons={[
@@ -276,22 +242,13 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
         <Button
           key="confirmButton"
           icon={<IconFlag />}
-          label={buttonLabel}
+          label="Challenge"
           mode="negative"
           type="submit"
           form="form-challenge"
-          disabled={
-            loading ||
-            !walletAddress ||
-            !isEnoughBalance ||
-            challengeTimeout ||
-            !isFormValid ||
-            transaction
-          }
+          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid || transaction}
           title={
-            challengeTimeout
-              ? 'Challenge timeout'
-              : loading || !walletAddress
+            loading || !walletAddress
               ? 'Not ready ...'
               : !isFormValid
               ? 'Form not valid'
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index fdd0fcbc..9ed17bb4 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Button, IconCoin, Timer } from '@1hive/1hive-ui';
+import { Button, IconCoin } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ENUM_CLAIM_STATE, ENUM, ENUM_TRANSACTION_STATUS } from 'src/constants';
@@ -15,7 +15,6 @@ import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
 import ModalBase, { ModalCallback } from './modal-base';
 import { AddressFieldInput } from '../field-input/address-field-input';
-import { FieldInput } from '../field-input/field-input';
 
 // #region StyledComponents
 
@@ -35,43 +34,29 @@ const OpenButtonWrapperStyled = styled.div`
 type Props = {
   claim: ClaimModel;
   questTotalBounty?: TokenAmountModel | null;
+  isClaimable?: boolean;
   onClose?: ModalCallback;
 };
 
-export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = noop }: Props) {
+export default function ExecuteClaimModal({
+  claim,
+  questTotalBounty,
+  isClaimable,
+  onClose = noop,
+}: Props) {
   const [opened, setOpened] = useState(false);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [amount, setAmount] = useState<TokenAmountModel>();
-  const [scheduleTimeout, setScheduleTimeout] = useState<boolean>();
   const [buttonLabel, setButtonLabel] = useState<ReactNode>('Claim');
   const { setTransaction, transaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('execute-claim-modal'), []);
 
   useEffect(() => {
-    let handle: number;
-    const launchTimeoutAsync = async (execTimeMs: number) => {
-      const now = Date.now();
-      if (now >= execTimeMs) setScheduleTimeout(true);
-      else {
-        setScheduleTimeout(false);
-        handle = window.setTimeout(() => {
-          setScheduleTimeout(true);
-        }, execTimeMs - now); // To ms
-      }
-      setLoading(false);
-    };
-    if (claim.executionTimeMs) launchTimeoutAsync(claim.executionTimeMs);
-    return () => {
-      if (handle) clearTimeout(handle);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (scheduleTimeout === undefined) return;
+    if (isClaimable === undefined) return;
     if (claim.state === ENUM_CLAIM_STATE.Challenged) setButtonLabel('Challenged by someone');
     else setButtonLabel('Claim');
-  }, [claim.state, claim.executionTimeMs, scheduleTimeout]);
+  }, [claim.state, claim.executionTimeMs, isClaimable]);
 
   useEffect(() => {
     if (questTotalBounty) {
@@ -137,32 +122,27 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
         title="Claim quest bounty"
         openButton={
           <OpenButtonWrapperStyled>
-            {!loading && !scheduleTimeout && claim.executionTimeMs ? (
-              <FieldInput label="Claimable in">
-                <Timer end={new Date(claim.executionTimeMs)} />
-              </FieldInput>
-            ) : (
-              <OpenButtonStyled
-                onClick={() => setOpened(true)}
-                icon={<IconCoin />}
-                label={buttonLabel}
-                mode="positive"
-                title={
-                  questTotalBounty &&
-                  claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
-                    ? 'Not enough funds in Quest bounty'
-                    : 'Loading...'
-                }
-                disabled={
-                  loading ||
-                  !scheduleTimeout ||
-                  claim.state === ENUM_CLAIM_STATE.Challenged ||
-                  !questTotalBounty ||
-                  !walletAddress ||
-                  claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
-                }
-              />
-            )}
+            <OpenButtonStyled
+              onClick={() => setOpened(true)}
+              icon={<IconCoin />}
+              label={buttonLabel}
+              mode="positive"
+              title={
+                questTotalBounty &&
+                claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
+                  ? 'Not enough funds in Quest bounty'
+                  : 'Loading...'
+              }
+              disabled={
+                loading ||
+                !isClaimable ||
+                claim.state === ENUM_CLAIM_STATE.Challenged ||
+                !questTotalBounty ||
+                !walletAddress ||
+                !isClaimable ||
+                claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
+              }
+            />
           </OpenButtonWrapperStyled>
         }
         buttons={
@@ -173,12 +153,12 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
             disabled={
               loading ||
               !walletAddress ||
-              !scheduleTimeout ||
+              !isClaimable ||
               claim.state === ENUM_CLAIM_STATE.Challenged ||
               transaction
             }
             title={
-              loading || !walletAddress || !scheduleTimeout
+              loading || !walletAddress || !isClaimable
                 ? 'Not ready ...'
                 : transaction
                 ? 'Wait for previous transaction to complete'
diff --git a/packages/react-app/src/hooks/use-hooks.ts b/packages/react-app/src/hooks/use-hooks.ts
new file mode 100644
index 00000000..fb3a6b45
--- /dev/null
+++ b/packages/react-app/src/hooks/use-hooks.ts
@@ -0,0 +1,37 @@
+/**
+ * Source : https://usehooks-ts.com/
+ */
+
+/* eslint-disable consistent-return */
+
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+/**
+ *
+ * @param callback
+ * @param delay
+ */
+export function useTimeout(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useIsomorphicLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the timeout.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setTimeout(() => savedCallback.current(), delay);
+
+    return () => clearTimeout(id);
+  }, [delay]);
+}

From d8964a131f220bdd328bf75b41fa757f37f0ee17 Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Wed, 25 May 2022 22:47:25 -0400
Subject: [PATCH 2/6] Multiple transaction

---
 .../react-app/src/components/claim-list.tsx   | 130 ++++++++++--------
 packages/react-app/src/components/claim.tsx   |  94 ++++++-------
 .../react-app/src/components/dashboard.tsx    |   2 +-
 .../field-input/amount-field-input.tsx        |  11 +-
 .../components/field-input/help-tooltip.tsx   |  14 +-
 packages/react-app/src/components/footer.tsx  |   2 +-
 .../src/components/header/header-menu.tsx     |   2 +-
 .../src/components/modals/challenge-modal.tsx |  15 +-
 ...quest-modal.tsx => create-quest-modal.tsx} |  16 +--
 .../components/modals/execute-claim-modal.tsx |  39 ++++--
 .../src/components/modals/fund-modal.tsx      |   8 +-
 .../components/modals/reclaim-funds-modal.tsx |  15 +-
 .../modals/resolve-challenge-modal.tsx        |  30 +++-
 .../modals/schedule-claim-modal.tsx           |  31 ++---
 packages/react-app/src/components/quest.tsx   |  19 +--
 packages/react-app/src/components/sidebar.tsx |   2 +-
 .../src/components/utils/debug-util.tsx       |   8 +-
 .../src/components/views/quest-list.tsx       |  18 ++-
 packages/react-app/src/constants.ts           |   2 +-
 .../src/contexts/transaction.context.tsx      |  32 ++++-
 .../react-app/src/hooks/use-mounted.hook.ts   |  12 ++
 .../react-app/src/services/quest.service.ts   |   8 +-
 .../src/services/transaction-handler.ts       |  18 +++
 23 files changed, 309 insertions(+), 219 deletions(-)
 rename packages/react-app/src/components/modals/{quest-modal.tsx => create-quest-modal.tsx} (98%)
 create mode 100644 packages/react-app/src/hooks/use-mounted.hook.ts

diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx
index ef1195cd..24bfcc15 100644
--- a/packages/react-app/src/components/claim-list.tsx
+++ b/packages/react-app/src/components/claim-list.tsx
@@ -2,12 +2,13 @@ import { Accordion, Box } from '@1hive/1hive-ui';
 import { ClaimModel } from 'src/models/claim.model';
 import styled from 'styled-components';
 import { GUpx } from 'src/utils/style.util';
-import { ENUM_CLAIM_STATE, ENUM_TRANSACTION_STATUS } from 'src/constants';
+import { ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { QuestModel } from 'src/models/quest.model';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getObjectFromIpfs, ipfsTheGraph } from 'src/services/ipfs.service';
 import { useTransactionContext } from 'src/contexts/transaction.context';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { HelpTooltip } from './field-input/help-tooltip';
 import * as QuestService from '../services/quest.service';
 import Claim from './claim';
@@ -46,23 +47,70 @@ type Props = {
   isLoading?: boolean;
 };
 
-const loadingClaim = { state: ENUM_CLAIM_STATE.None } as ClaimModel;
+const EvidenceRender = ({ claim, isLoading }: { claim: ClaimModel; isLoading: boolean }) => {
+  const [evidence, setEvidence] = useState<string>();
+  const isMountedRef = useIsMountedRef();
 
-export default function ClaimList({ questData, challengeDeposit, isLoading = false }: Props) {
-  const [claims, setClaims] = useState<ClaimModel[]>([loadingClaim]);
-  const [isLoadingState, setIsLoading] = useState(isLoading);
-  const { transaction } = useTransactionContext();
-  let isMounted = true;
-  useEffect(
-    () => () => {
-      isMounted = false;
-    },
-    [],
+  useEffect(() => {
+    if (!evidence) fetchEvidence();
+  }, [claim.evidenceIpfsHash, evidence]);
+
+  const fetchEvidence = async () => {
+    const evidenceResult = claim.evidenceIpfsHash
+      ? await getObjectFromIpfs(claim.evidenceIpfsHash, ipfsTheGraph)
+      : 'No evidence';
+    if (isMountedRef.current) {
+      setEvidence(evidenceResult);
+    }
+  };
+
+  return (
+    <Outset gu16>
+      <TextFieldInput
+        id="evidence"
+        value={evidence}
+        isMarkDown
+        wide
+        label="Evidence of completion"
+        isLoading={isLoading || !evidence}
+      />
+    </Outset>
   );
+};
 
-  useEffect(() => {
-    setIsLoading(isLoading);
-  }, [isLoading]);
+export default function ClaimList({ questData, challengeDeposit, isLoading = false }: Props) {
+  const [claims, setClaims] = useState<ClaimModel[]>([]);
+  const [loadingClaim, setLoadingClaim] = useState(true);
+  const { transaction } = useTransactionContext();
+  const isMountedRef = useIsMountedRef();
+  const skeletonClaim = useMemo(() => {
+    const fakeClaim = {} as ClaimModel;
+    return [
+      <Claim
+        isLoading
+        claim={fakeClaim}
+        questData={questData}
+        challengeDeposit={challengeDeposit}
+      />,
+      <EvidenceRender isLoading claim={fakeClaim} />,
+    ];
+  }, []);
+
+  const accordionItems = useMemo(() => {
+    const items = claims.map((claim: ClaimModel) => [
+      <Claim
+        claim={claim}
+        challengeDeposit={challengeDeposit}
+        questData={questData}
+        isLoading={isLoading}
+      />,
+      <EvidenceRender claim={claim} isLoading={isLoading} />,
+    ]);
+    if (loadingClaim) {
+      items.unshift(skeletonClaim);
+    }
+    return items;
+  }, [claims, loadingClaim]);
 
   useEffect(() => {
     if (questData.address) {
@@ -83,42 +131,27 @@ export default function ClaimList({ questData, challengeDeposit, isLoading = fal
 
   const fetchClaimsUntilNew = (claimsCount?: number) => {
     if (!claimsCount) {
+      setLoadingClaim(true);
       claimsCount = claims.length;
-      setClaims([loadingClaim, ...claims]);
     }
     setTimeout(async () => {
       const results = await QuestService.fetchQuestClaims(questData);
-      if (!isMounted) return;
+      if (!isMountedRef.current) return;
       if (results.length === claimsCount) {
         fetchClaimsUntilNew(claimsCount);
       } else {
         setClaims(results);
-        setIsLoading(false);
-        fetchEvidenceOfCompletions(results);
+        setLoadingClaim(false);
       }
     }, 1000);
   };
 
   const fetchClaims = async () => {
-    setIsLoading(true);
+    setLoadingClaim(true);
     const results = await QuestService.fetchQuestClaims(questData);
-    if (!isMounted) return;
+    if (!isMountedRef.current) return;
     setClaims(results); // Fetch visible data
-    setIsLoading(false);
-    await fetchEvidenceOfCompletions(results);
-  };
-
-  const fetchEvidenceOfCompletions = async (result: ClaimModel[]) => {
-    const claimsRes = await Promise.all(
-      result.map(async (claim) => ({
-        ...claim,
-        evidence: claim.evidenceIpfsHash
-          ? await getObjectFromIpfs(claim.evidenceIpfsHash, ipfsTheGraph)
-          : 'No evidence',
-      })),
-    );
-    if (!isMounted) return;
-    setClaims(claimsRes); // Fetch evidence wich is currently hidden in accordion
+    setLoadingClaim(false);
   };
 
   return (
@@ -127,27 +160,8 @@ export default function ClaimList({ questData, challengeDeposit, isLoading = fal
         <HeaderStyled>Claims</HeaderStyled>
         <HelpTooltip tooltip="A claim includes the proof of the quest's completion." />
       </ClaimHeaderStyled>
-      {claims?.length || isLoadingState ? (
-        <Accordion
-          items={claims.map((claim: ClaimModel) => [
-            <Claim
-              claim={claim}
-              challengeDeposit={challengeDeposit}
-              isLoading={isLoadingState}
-              questData={questData}
-            />,
-            <Outset gu8>
-              <TextFieldInput
-                id="evidence"
-                value={claim.evidence}
-                isMarkDown
-                wide
-                label="Evidence of completion"
-                isLoading={isLoading || !claim.evidence}
-              />
-            </Outset>,
-          ])}
-        />
+      {claims?.length || loadingClaim ? (
+        <Accordion items={accordionItems} />
       ) : (
         <BoxStyled>
           <i>No claims</i>
diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index 90a2c3a5..ba961f8f 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -4,6 +4,7 @@ import { ENUM_CLAIM_STATE, ENUM_DISPUTE_STATES, ENUM_TRANSACTION_STATUS } from '
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { useWallet } from 'src/contexts/wallet.context';
 import { useTimeout } from 'src/hooks/use-hooks';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { ClaimModel } from 'src/models/claim.model';
 import { QuestModel } from 'src/models/quest.model';
 import { TokenAmountModel } from 'src/models/token-amount.model';
@@ -43,11 +44,12 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
   const [state, setState] = useState(claim.state);
   const { below } = useViewport();
   const [waitForClose, setWaitForClose] = useState(false);
-  const [actionButton, setActionButton] = useState<ReactNode>();
   const [isClaimable, setIsClaimable] = useState(false);
+  const [actionButton, setActionButton] = useState<ReactNode>();
+  const isMountedRef = useIsMountedRef();
 
   useTimeout(() => {
-    setIsClaimable(true);
+    if (claim.executionTimeMs) setIsClaimable(true);
   }, Math.max((claim.executionTimeMs ?? 0) - Date.now(), 0));
 
   useEffect(() => {
@@ -65,55 +67,6 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
     setWaitForClose(false);
   };
 
-  const executeClaimModal = useMemo(
-    () => (
-      <ExecuteClaimModal
-        claim={claim}
-        questTotalBounty={questData.bounty}
-        onClose={onActionClose}
-        isClaimable={isClaimable}
-      />
-    ),
-    [claim, questData.bounty, isClaimable],
-  );
-
-  const challengeModal = useMemo(
-    () => (
-      <ChallengeModal claim={claim} challengeDeposit={challengeDeposit} onClose={onActionClose} />
-    ),
-    [claim, challengeDeposit],
-  );
-
-  const resolveChallengeModal = useMemo(
-    () => <ResolveChallengeModal claim={claim} onClose={onActionClose} />,
-    [claim],
-  );
-
-  useEffect(() => {
-    if (waitForClose || !state) return;
-    if (state === ENUM_CLAIM_STATE.Scheduled) {
-      if (compareCaseInsensitive(walletAddress, claim.playerAddress) || isClaimable) {
-        setActionButton(
-          <>
-            {executeClaimModal}
-            {timer}
-          </>,
-        );
-      } else {
-        setActionButton(
-          <>
-            {challengeModal}
-            {timer}
-          </>,
-        );
-      }
-    } else if (state === ENUM_CLAIM_STATE.Challenged) {
-      setActionButton(resolveChallengeModal);
-    } else {
-      setActionButton(undefined);
-    }
-  }, [state, walletAddress, waitForClose, isClaimable]);
-
   useEffect(() => {
     // If tx completion impact Claims, update them
     if (
@@ -148,6 +101,43 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
     }
   }, [transaction?.status, transaction?.type, transaction?.[0], claim.container]);
 
+  useEffect(() => {
+    if (waitForClose || !state || !isMountedRef.current) return;
+    if (state === ENUM_CLAIM_STATE.Scheduled) {
+      if (compareCaseInsensitive(walletAddress, claim.playerAddress) || isClaimable) {
+        setActionButton(
+          <>
+            <ExecuteClaimModal
+              claim={claim}
+              questTotalBounty={questData.bounty}
+              onClose={onActionClose}
+              isClaimable={isClaimable}
+            />
+            {timer}
+          </>,
+        );
+        return;
+      }
+      setActionButton(
+        <>
+          <ChallengeModal
+            claim={claim}
+            challengeDeposit={challengeDeposit}
+            onClose={onActionClose}
+          />
+          {timer}
+        </>,
+      );
+      return;
+    }
+
+    if (state === ENUM_CLAIM_STATE.Challenged) {
+      setActionButton(<ResolveChallengeModal claim={claim} onClose={onActionClose} />);
+      return;
+    }
+    setActionButton(undefined);
+  }, [state, walletAddress, waitForClose, isClaimable, claim, questData.bounty, challengeDeposit]);
+
   return (
     <div className="wide">
       <Outset>
@@ -184,7 +174,7 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
               isLoading={isLoading || state === ENUM_CLAIM_STATE.None}
             />
           )}
-          {walletAddress && actionButton}
+          {walletAddress && state && actionButton}
         </ChildSpacer>
       </Outset>
     </div>
diff --git a/packages/react-app/src/components/dashboard.tsx b/packages/react-app/src/components/dashboard.tsx
index 6c1784f4..cf30a3e2 100644
--- a/packages/react-app/src/components/dashboard.tsx
+++ b/packages/react-app/src/components/dashboard.tsx
@@ -7,7 +7,7 @@ import { getDashboardInfo } from 'src/services/quest.service';
 import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { FieldInput } from './field-input/field-input';
-import QuestModal from './modals/quest-modal';
+import QuestModal from './modals/create-quest-modal';
 import { ChildSpacer } from './utils/spacer-util';
 
 // #region StyledComponents
diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx
index 366f12ed..98bc7f7d 100644
--- a/packages/react-app/src/components/field-input/amount-field-input.tsx
+++ b/packages/react-app/src/components/field-input/amount-field-input.tsx
@@ -16,6 +16,7 @@ import { isAddress } from 'src/utils/web3.utils';
 import styled from 'styled-components';
 import { useCopyToClipboard } from 'src/hooks/use-copy-to-clipboard.hook';
 import { NETWORK_TOKENS } from 'src/constants';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { FieldInput } from './field-input';
 import { ConditionalWrapper } from '../utils/util';
 
@@ -189,7 +190,7 @@ function AmountFieldInput({
   showUsd = false,
   error,
 }: Props) {
-  let mounted = true;
+  const isMountedRef = useIsMountedRef();
   const { networkId } = getNetwork();
   const [tokens, setTokens] = useState<TokenModel[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>();
@@ -210,9 +211,6 @@ function AmountFieldInput({
 
   useEffect(() => {
     if (isEdit && !availableTokens.length) fetchAvailableTokens();
-    return () => {
-      mounted = false;
-    };
   }, [isEdit]);
 
   useEffect(() => {
@@ -226,7 +224,8 @@ function AmountFieldInput({
         setTokens([]);
         getTokenInfo(searchTerm)
           .then((tokenInfo) => {
-            if (typeof tokenInfo !== 'string') if (tokenInfo && mounted) setTokens([tokenInfo]);
+            if (typeof tokenInfo !== 'string')
+              if (tokenInfo && isMountedRef.current) setTokens([tokenInfo]);
           })
           .catch(Logger.exception);
       } else {
@@ -261,7 +260,7 @@ function AmountFieldInput({
   const fetchAvailableTokens = async () => {
     const networkDefaultTokens = (NETWORK_TOKENS[networkId] as TokenModel[]) ?? [];
     const questsUsedTokens = await fetchRewardTokens();
-    if (mounted) {
+    if (isMountedRef.current) {
       setAvailableTokens(
         arrayDistinctBy([...networkDefaultTokens, ...questsUsedTokens], (x) => x.token),
       );
diff --git a/packages/react-app/src/components/field-input/help-tooltip.tsx b/packages/react-app/src/components/field-input/help-tooltip.tsx
index f1131c9d..9aa9bea1 100644
--- a/packages/react-app/src/components/field-input/help-tooltip.tsx
+++ b/packages/react-app/src/components/field-input/help-tooltip.tsx
@@ -1,5 +1,6 @@
 import { useTheme, Button, IconQuestion, Popover } from '@1hive/1hive-ui';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useRef, useState } from 'react';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { ThemeInterface } from 'src/styles/theme';
 import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
@@ -56,14 +57,7 @@ export const HelpTooltip = ({ tooltip, children }: Props) => {
     _setIsHover(isHover);
   };
 
-  let isMounted = true;
-
-  useEffect(
-    () => () => {
-      isMounted = false;
-    },
-    [],
-  );
+  const isMountedRef = useIsMountedRef();
 
   const handleClick = (e: Event) => {
     e.stopPropagation();
@@ -75,7 +69,7 @@ export const HelpTooltip = ({ tooltip, children }: Props) => {
     setTimeout(() => {
       setShowing(true);
       setTimeout(() => setShowing(false), 100);
-      if (isHoverRef.current && isMounted) setVisible(true);
+      if (isHoverRef.current && isMountedRef.current) setVisible(true);
     }, 100);
   };
 
diff --git a/packages/react-app/src/components/footer.tsx b/packages/react-app/src/components/footer.tsx
index bd8e16e4..feb8d4a8 100644
--- a/packages/react-app/src/components/footer.tsx
+++ b/packages/react-app/src/components/footer.tsx
@@ -7,7 +7,7 @@ import { faDiscord, faTwitter } from '@fortawesome/free-brands-svg-icons';
 import { LogoTitle } from 'src/assets/logo-title';
 import { useWallet } from 'src/contexts/wallet.context';
 import { getNetwork } from 'src/networks';
-import QuestModal from './modals/quest-modal';
+import QuestModal from './modals/create-quest-modal';
 
 // #region StyledComponent
 
diff --git a/packages/react-app/src/components/header/header-menu.tsx b/packages/react-app/src/components/header/header-menu.tsx
index 7efb766f..0f84fbda 100644
--- a/packages/react-app/src/components/header/header-menu.tsx
+++ b/packages/react-app/src/components/header/header-menu.tsx
@@ -3,7 +3,7 @@ import { ENUM_QUEST_VIEW_MODE } from 'src/constants';
 import { useWallet } from 'src/contexts/wallet.context';
 import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
-import QuestModal from '../modals/quest-modal';
+import QuestModal from '../modals/create-quest-modal';
 // #region StyledComponents
 
 const HeaderNavStyled = styled.nav`
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 182ddae4..5cad7960 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -16,6 +16,7 @@ import { useWallet } from 'src/contexts/wallet.context';
 import { TokenModel } from 'src/models/token.model';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { approveTokenTransaction } from 'src/services/transaction-handler';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import AmountFieldInput from '../field-input/amount-field-input';
@@ -51,7 +52,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
   const toast = useToast();
   const [loading, setLoading] = useState(false);
   const [opened, setOpened] = useState(false);
-  // const [challengeTimeout, setChallengedTimeout] = useState<boolean | undefined>(undefined);
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const [isFeeDepositSameToken, setIsFeeDepositSameToken] = useState<boolean>();
   const [challengeFee, setChallengeFee] = useState<TokenAmountModel | undefined>(undefined);
@@ -60,11 +60,12 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
   const formRef = useRef<HTMLFormElement>(null);
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('challenge-modal'), []);
+  const isMountedRef = useIsMountedRef();
 
   useEffect(() => {
     const fetchFee = async () => {
       const feeAmount = await QuestService.fetchChallengeFee();
-      if (feeAmount) setChallengeFee(feeAmount);
+      if (feeAmount && isMountedRef.current) setChallengeFee(feeAmount);
     };
     fetchFee();
   }, [walletAddress]);
@@ -172,7 +173,9 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
         );
         toast(computeTransactionErrorMessage(e));
       } finally {
-        setLoading(false);
+        if (isMountedRef.current) {
+          setLoading(false);
+        }
       }
     }
   };
@@ -195,8 +198,8 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
             onClick={() => setOpened(true)}
             label="Challenge"
             mode="negative"
-            title={"This claim can't be challenged anymore"}
-            disabled={loading || !walletAddress}
+            title={"Open challenge for this quest's claim"}
+            disabled={!walletAddress}
           />
         </OpenButtonWrapperStyled>
       }
@@ -246,7 +249,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           mode="negative"
           type="submit"
           form="form-challenge"
-          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid || transaction}
+          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid || !!transaction}
           title={
             loading || !walletAddress
               ? 'Not ready ...'
diff --git a/packages/react-app/src/components/modals/quest-modal.tsx b/packages/react-app/src/components/modals/create-quest-modal.tsx
similarity index 98%
rename from packages/react-app/src/components/modals/quest-modal.tsx
rename to packages/react-app/src/components/modals/create-quest-modal.tsx
index 69e29fb2..e9e6b444 100644
--- a/packages/react-app/src/components/modals/quest-modal.tsx
+++ b/packages/react-app/src/components/modals/create-quest-modal.tsx
@@ -21,6 +21,7 @@ import { useTransactionContext } from 'src/contexts/transaction.context';
 import { IN_A_WEEK_IN_MS } from 'src/utils/date.utils';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { approveTokenTransaction, fundQuestTransaction } from 'src/services/transaction-handler';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import ModalBase, { ModalCallback } from './modal-base';
 import Stepper from '../utils/stepper';
 import { DateFieldInputFormik } from '../field-input/date-field-input';
@@ -84,24 +85,21 @@ export default function QuestModal({
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const [questDataState, setQuestDataState] = useState<QuestModel>(questData);
   const [questDeposit, setQuestDeposit] = useState<TokenAmountModel | null>();
-  let mounted = true;
+  const isMountedRef = useIsMountedRef();
   const modalId = useMemo(() => uniqueId('quest-modal'), []);
 
   useEffect(() => {
     feedDummyQuestData(questData).then((data) => {
-      if (mounted) {
+      if (isMountedRef.current) {
         setQuestDataState(data);
       }
     });
 
     QuestService.fetchCreateQuestDeposit(walletAddress).then((deposit) => {
-      if (mounted) {
+      if (isMountedRef.current) {
         setQuestDeposit(deposit);
       }
     });
-    return () => {
-      mounted = false;
-    };
   }, []);
 
   useEffect(() => {
@@ -237,7 +235,9 @@ export default function QuestModal({
           );
         }
 
-        if (mounted) setQuestDataState(emptyQuestData);
+        if (isMountedRef.current) {
+          setQuestDataState(emptyQuestData);
+        }
       } catch (e: any) {
         setTransaction(
           (oldTx) =>
@@ -349,7 +349,7 @@ export default function QuestModal({
                         !questDeposit?.token ||
                         !isEnoughBalance ||
                         !isFormValid ||
-                        transaction
+                        !!transaction
                       }
                     />
                   </>
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index 9ed17bb4..07cf818b 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Button, IconCoin } from '@1hive/1hive-ui';
+import { Button, IconCoin, IconCaution, Info } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ENUM_CLAIM_STATE, ENUM, ENUM_TRANSACTION_STATUS } from 'src/constants';
@@ -10,6 +10,8 @@ import { ClaimModel } from 'src/models/claim.model';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { useWallet } from 'src/contexts/wallet.context';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
+import { compareCaseInsensitive } from 'src/utils/string.util';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import * as QuestService from '../../services/quest.service';
 import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
@@ -29,6 +31,13 @@ const OpenButtonWrapperStyled = styled.div`
   flex-direction: column;
 `;
 
+const OnlyStackholderWarnStyled = styled(Info)`
+  padding: ${GUpx(1)};
+  margin-top: ${GUpx(4)};
+  display: flex;
+  align-items: center;
+`;
+
 // #endregion
 
 type Props = {
@@ -51,6 +60,7 @@ export default function ExecuteClaimModal({
   const { setTransaction, transaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('execute-claim-modal'), []);
+  const isMountedRef = useIsMountedRef();
 
   useEffect(() => {
     if (isClaimable === undefined) return;
@@ -111,7 +121,9 @@ export default function ExecuteClaimModal({
           },
       );
     } finally {
-      setLoading(false);
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
     }
   };
 
@@ -128,15 +140,14 @@ export default function ExecuteClaimModal({
               label={buttonLabel}
               mode="positive"
               title={
-                questTotalBounty &&
-                claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
-                  ? 'Not enough funds in Quest bounty'
-                  : 'Loading...'
+                !isClaimable
+                  ? 'Wait for the delay period to end before claiming...'
+                  : questTotalBounty &&
+                    claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
+                  ? 'Not enough funds in Quest to claim'
+                  : 'Open quest claim'
               }
               disabled={
-                loading ||
-                !isClaimable ||
-                claim.state === ENUM_CLAIM_STATE.Challenged ||
                 !questTotalBounty ||
                 !walletAddress ||
                 !isClaimable ||
@@ -147,7 +158,7 @@ export default function ExecuteClaimModal({
         }
         buttons={
           <Button
-            onClick={() => claimTx()}
+            onClick={claimTx}
             icon={<IconCoin />}
             label={buttonLabel}
             disabled={
@@ -155,7 +166,7 @@ export default function ExecuteClaimModal({
               !walletAddress ||
               !isClaimable ||
               claim.state === ENUM_CLAIM_STATE.Challenged ||
-              transaction
+              !!transaction
             }
             title={
               loading || !walletAddress || !isClaimable
@@ -184,6 +195,12 @@ export default function ExecuteClaimModal({
             isLoading={loading}
             value={claim.playerAddress}
           />
+          {!compareCaseInsensitive(claim.playerAddress, walletAddress) && (
+            <OnlyStackholderWarnStyled mode="warning">
+              <IconCaution />
+              <span>Only the player may execute the claim</span>
+            </OnlyStackholderWarnStyled>
+          )}
         </Outset>
       </ModalBase>
     </>
diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
index 87b13546..3330c1d9 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -12,6 +12,7 @@ import { useWallet } from 'src/contexts/wallet.context';
 import { FundModel } from 'src/models/fund.model';
 import { FormErrors } from 'src/models/form-errors';
 import { fundQuestTransaction } from 'src/services/transaction-handler';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
 import ModalBase, { ModalCallback } from './modal-base';
@@ -41,6 +42,7 @@ export default function FundModal({ quest, onClose = noop }: Props) {
   const { setTransaction, transaction } = useTransactionContext();
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const modalId = useMemo(() => uniqueId('fund-modal'), []);
+  const isMountedRef = useIsMountedRef();
 
   const closeModal = (success: boolean) => {
     setOpened(false);
@@ -59,7 +61,9 @@ export default function FundModal({ quest, onClose = noop }: Props) {
         walletAddress,
         setTransaction,
       );
-      setLoading(false);
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
     }
   };
 
@@ -122,7 +126,7 @@ export default function FundModal({ quest, onClose = noop }: Props) {
                   : 'Fund'
               }
               disabled={
-                loading || !walletAddress || !isEnoughBalance || !isFormValid || transaction
+                loading || !walletAddress || !isEnoughBalance || !isFormValid || !!transaction
               }
             />,
           ]}
diff --git a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
index 0fff587b..2616fe8e 100644
--- a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
+++ b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
@@ -14,6 +14,7 @@ import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { getTokenInfo } from 'src/utils/contract.util';
 import { toTokenAmountModel } from 'src/utils/data.utils';
 import { TokenModel } from 'src/models/token.model';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import * as QuestService from '../../services/quest.service';
 import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
@@ -55,13 +56,13 @@ export default function ReclaimFundsModal({
   const { walletAddress } = useWallet();
   const [depositTokenAmount, setDepositTokenAmount] = useState<TokenAmountModel>();
   const modalId = useMemo(() => uniqueId('reclaim-funds-modal'), []);
-  let isMounted = true;
+  const isMountedRef = useIsMountedRef();
 
   useEffect(() => {
     if (questData.deposit) {
       const depositAmount = questData.deposit;
       getTokenInfo(questData.deposit?.token).then((token) => {
-        if (isMounted) {
+        if (isMountedRef.current) {
           setDepositTokenAmount(
             toTokenAmountModel({
               ...token,
@@ -71,10 +72,6 @@ export default function ReclaimFundsModal({
         }
       });
     }
-
-    return () => {
-      isMounted = false;
-    };
   }, []);
 
   const reclaimFundTx = async () => {
@@ -122,7 +119,9 @@ export default function ReclaimFundsModal({
           },
       );
     } finally {
-      setLoading(false);
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
     }
   };
 
@@ -158,7 +157,7 @@ export default function ReclaimFundsModal({
                 ? 'Wait for previous transaction to complete'
                 : 'Reclaim remaining funds and deposit'
             }
-            disabled={loading || !walletAddress || transaction}
+            disabled={loading || !walletAddress || !!transaction}
           />
         }
         onClose={closeModal}
diff --git a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
index 8586fd85..2b50bb32 100644
--- a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
@@ -25,6 +25,8 @@ import { useWallet } from 'src/contexts/wallet.context';
 import Skeleton from 'react-loading-skeleton';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { getNetwork } from 'src/networks';
+import { getObjectFromIpfs, ipfsTheGraph } from 'src/services/ipfs.service';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import { Outset } from '../utils/spacer-util';
@@ -100,12 +102,19 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
   const [dispute, setDispute] = useState<DisputeModel>();
   const [isStackholder, setIsStackholder] = useState(false);
   const { setTransaction, transaction } = useTransactionContext();
+  const [evidence, setEvidence] = useState<string>();
   const modalId = useMemo(() => uniqueId('resolve-challenge-modal'), []);
+  const isMountedRef = useIsMountedRef();
+
+  useEffect(() => {
+    fetchEvidence();
+  }, []);
 
   useEffect(() => {
     const fetchChallengeAndDispute = async () => {
       if (!claim.container) throw new Error('Container is required to fetch challenge disputes');
       const challengeResult = await QuestService.fetchChallenge(claim.container);
+      if (!isMountedRef.current) return;
       if (!challengeResult)
         throw new Error(`Failed to fetch challenge with container id ${claim.container.id}`);
       setChallenge(challengeResult);
@@ -185,7 +194,18 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
           },
       );
     } finally {
-      setLoading(false);
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+    }
+  };
+
+  const fetchEvidence = async () => {
+    const evidenceResult = claim.evidenceIpfsHash
+      ? await getObjectFromIpfs(claim.evidenceIpfsHash, ipfsTheGraph)
+      : 'No evidence';
+    if (isMountedRef.current) {
+      setEvidence(evidenceResult);
     }
   };
 
@@ -255,8 +275,8 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
             onClick={() => setOpened(true)}
             label="Open resolve"
             mode="positive"
-            title={loading || !dispute ? 'Loading...' : 'Open resolve'}
-            disabled={loading || !dispute}
+            title={!dispute ? 'Loading...' : 'Open resolve'}
+            disabled={!dispute}
           />
         </OpenButtonWrapperStyled>
       }
@@ -279,7 +299,7 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
             !walletAddress ||
             !isRuled ||
             claim.state !== ENUM_CLAIM_STATE.Challenged ||
-            transaction
+            !!transaction
           }
           onClick={resolveChallengeTx}
           title={
@@ -308,7 +328,7 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
                     {player}
                     <LabelStyled>Player evidence of completion</LabelStyled>
                   </>,
-                  <TextFieldInput id="evidenceOfCompletion" value={claim.evidence} isMarkDown />,
+                  <TextFieldInput id="evidenceOfCompletion" value={evidence} isMarkDown />,
                 ],
                 [
                   <>
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index ab075ed4..07562b05 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { Button } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
-import { useState, useRef, useMemo, useEffect } from 'react';
+import { useState, useRef, useMemo } from 'react';
 import { GiBroadsword } from 'react-icons/gi';
 import styled from 'styled-components';
 import { Formik, Form } from 'formik';
@@ -17,6 +17,7 @@ import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 
 import { FormErrors } from 'src/models/form-errors';
 import { approveTokenTransaction } from 'src/services/transaction-handler';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import AmountFieldInput, { AmountFieldInputFormik } from '../field-input/amount-field-input';
@@ -69,14 +70,7 @@ export default function ScheduleClaimModal({
   const formRef = useRef<HTMLFormElement>(null);
   const { setTransaction, transaction } = useTransactionContext();
   const modalId = useMemo(() => uniqueId('schedule-claim-modal'), []);
-  let mounted = true;
-
-  useEffect(
-    () => () => {
-      mounted = false;
-    },
-    [],
-  );
+  const isMountedRef = useIsMountedRef();
 
   const closeModal = (succeed: any) => {
     setOpened(false);
@@ -103,18 +97,18 @@ export default function ScheduleClaimModal({
     return errors;
   };
 
-  const onClaimSubmit = (values: ClaimModel & { claimAll: boolean }, setSubmitting: Function) => {
+  const onClaimSubmit = (values: ClaimModel & { claimAll: boolean }) => {
     validate(values); // Validate one last time before submitting
     if (isFormValid) {
       if (values.claimAll) {
         values.claimedAmount.parsedAmount = 0;
         values.claimedAmount.token.amount = '0';
       }
-      scheduleClaimTx(values, setSubmitting);
+      scheduleClaimTx(values);
     }
   };
 
-  const scheduleClaimTx = async (values: Partial<ClaimModel>, setSubmitting: Function) => {
+  const scheduleClaimTx = async (values: Partial<ClaimModel>) => {
     try {
       setLoading(true);
       const { governQueueAddress } = getNetwork();
@@ -167,7 +161,7 @@ export default function ScheduleClaimModal({
       if (!scheduleReceipt?.status)
         throw new Error('Failed to schedule the claim, please retry in a few seconds');
     } catch (e: any) {
-      if (mounted) {
+      if (isMountedRef.current) {
         setTransaction(
           (oldTx) =>
             oldTx && {
@@ -178,8 +172,7 @@ export default function ScheduleClaimModal({
         );
       }
     } finally {
-      if (mounted) {
-        setSubmitting(false);
+      if (isMountedRef.current) {
         setLoading(false);
       }
     }
@@ -195,7 +188,7 @@ export default function ScheduleClaimModal({
           onClick={() => setOpened(true)}
           label="Schedule claim"
           mode="positive"
-          title={!questTotalBounty ? 'Loading ...' : 'Schedule claim'}
+          title={!questTotalBounty ? 'Loading ...' : 'Open schedule claim'}
           disabled={!questTotalBounty}
         />
       }
@@ -211,8 +204,8 @@ export default function ScheduleClaimModal({
             playerAddress: undefined,
           } as any
         }
-        onSubmit={(values, { setSubmitting }) => {
-          onClaimSubmit(values, setSubmitting);
+        onSubmit={(values) => {
+          onClaimSubmit(values);
         }}
         validateOnChange
         validate={validate}
@@ -267,7 +260,7 @@ export default function ScheduleClaimModal({
                         : 'Schedule claim'
                     }
                     disabled={
-                      loading || !walletAddress || !isEnoughBalance || !isFormValid || transaction
+                      loading || !walletAddress || !isEnoughBalance || !isFormValid || !!transaction
                     }
                   />
                 </>
diff --git a/packages/react-app/src/components/quest.tsx b/packages/react-app/src/components/quest.tsx
index e4c4443b..3dc0a344 100644
--- a/packages/react-app/src/components/quest.tsx
+++ b/packages/react-app/src/components/quest.tsx
@@ -18,6 +18,7 @@ import { TokenModel } from 'src/models/token.model';
 import { useWallet } from 'src/contexts/wallet.context';
 import { IN_A_WEEK_IN_MS } from 'src/utils/date.utils';
 import { useTransactionContext } from 'src/contexts/transaction.context';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import ScheduleClaimModal from './modals/schedule-claim-modal';
 import FundModal from './modals/fund-modal';
 import ReclaimFundsModal from './modals/reclaim-funds-modal';
@@ -124,7 +125,7 @@ export default function Quest({
   const { below } = useViewport();
   const { transaction } = useTransactionContext();
   const [waitForClose, setWaitForClose] = useState(false);
-  let isMounted = true;
+  const isMountedRef = useIsMountedRef();
 
   useEffect(() => {
     if (!isSummary) {
@@ -134,7 +135,7 @@ export default function Quest({
       } else {
         try {
           QuestService.fetchDeposits().then(({ challenge, claim }) => {
-            if (isMounted) {
+            if (isMountedRef.current) {
               setClaimDeposit(claim);
               setChallengeDeposit(challenge);
             }
@@ -144,9 +145,6 @@ export default function Quest({
         }
       }
     }
-    return () => {
-      isMounted = false;
-    };
   }, []);
 
   useEffect(() => {
@@ -199,7 +197,7 @@ export default function Quest({
           address,
           depositReleased ? undefined : questData.deposit,
         );
-        if (isMounted) {
+        if (isMountedRef.current) {
           questData.bounty = result;
           setIsDepositReleased(depositReleased);
           computeQuestState(questData, depositReleased);
@@ -208,8 +206,10 @@ export default function Quest({
         }
       }
     } catch (error) {
-      Logger.exception(error);
-      setBounty(undefined);
+      if (isMountedRef.current) {
+        Logger.exception(error);
+        setBounty(undefined);
+      }
     }
   };
 
@@ -311,6 +311,7 @@ export default function Quest({
 
             <TextFieldInput
               id="description"
+              label={isSummary ? undefined : 'Description'}
               value={questData?.description}
               isLoading={isLoading || !questData}
               multiline
@@ -321,7 +322,7 @@ export default function Quest({
             />
             {isSummary && fieldsRow}
           </ContentWrapperStyled>
-          {!isSummary && challengeDeposit && bounty && (
+          {!isSummary && challengeDeposit && (
             <ClaimList
               questData={{ ...questData, bounty }}
               challengeDeposit={challengeDeposit}
diff --git a/packages/react-app/src/components/sidebar.tsx b/packages/react-app/src/components/sidebar.tsx
index 88c00428..493ee796 100644
--- a/packages/react-app/src/components/sidebar.tsx
+++ b/packages/react-app/src/components/sidebar.tsx
@@ -1,6 +1,6 @@
 import { ENUM_QUEST_VIEW_MODE } from '../constants';
 import { useWallet } from '../contexts/wallet.context';
-import QuestModal from './modals/quest-modal';
+import QuestModal from './modals/create-quest-modal';
 import { Filter } from './filter';
 import { Outset } from './utils/spacer-util';
 
diff --git a/packages/react-app/src/components/utils/debug-util.tsx b/packages/react-app/src/components/utils/debug-util.tsx
index 83da26b3..d649b5c2 100644
--- a/packages/react-app/src/components/utils/debug-util.tsx
+++ b/packages/react-app/src/components/utils/debug-util.tsx
@@ -2,8 +2,7 @@ import { QuestModel } from 'src/models/quest.model';
 import { getNetwork } from 'src/networks';
 
 export const feedDummyQuestData = async (questData: QuestModel): Promise<QuestModel> => {
-  const { networkId } = getNetwork();
-  if (networkId === 'rinkeby' && localStorage.getItem('FLAG_DUMMY')?.toLowerCase() === 'true') {
+  if (isDevelopement() && localStorage.getItem('FLAG_DUMMY')?.toLowerCase() === 'true') {
     // Load dummy data only for rinkeby testing and flag activated
     const resp = await fetch('https://jaspervdj.be/lorem-markdownum/markdown.txt');
     const dummyData = await resp.text();
@@ -16,3 +15,8 @@ export const feedDummyQuestData = async (questData: QuestModel): Promise<QuestMo
   }
   return questData;
 };
+
+export const isDevelopement = () => {
+  const { networkId } = getNetwork();
+  return networkId === 'rinkeby';
+};
diff --git a/packages/react-app/src/components/views/quest-list.tsx b/packages/react-app/src/components/views/quest-list.tsx
index ea8f9f9c..6a5e269b 100644
--- a/packages/react-app/src/components/views/quest-list.tsx
+++ b/packages/react-app/src/components/views/quest-list.tsx
@@ -21,6 +21,7 @@ import { GUpx } from 'src/utils/style.util';
 import { useThemeContext } from 'src/contexts/theme.context';
 import { ThemeInterface } from 'src/styles/theme';
 import { useTransactionContext } from 'src/contexts/transaction.context';
+import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { useFilterContext } from '../../contexts/filter.context';
 import { Outset } from '../utils/spacer-util';
 import MainView from '../main-view';
@@ -84,7 +85,7 @@ export default function QuestList() {
   const { below } = useViewport();
   const { transaction } = useTransactionContext();
   const { setPage } = usePageContext();
-  let isMounted = true;
+  const isMountedRef = useIsMountedRef();
 
   const skeletonQuests: any[] = useMemo(() => {
     const fakeQuests = [];
@@ -100,9 +101,6 @@ export default function QuestList() {
 
   useEffect(() => {
     setPage(ENUM_PAGES.List);
-    return () => {
-      isMounted = false;
-    };
   }, []);
 
   useEffect(() => {
@@ -135,7 +133,9 @@ export default function QuestList() {
   const fetchQuestUntilNew = (newQuestAddress: string) => {
     setTimeout(async () => {
       const newQuest = await QuestService.fetchQuest(newQuestAddress);
-      if (!isMounted) return;
+      if (!isMountedRef.current) {
+        return;
+      }
       if (newQuest) {
         setQuests([newQuest, ...quests]);
         setNewQuestLoading(false);
@@ -155,7 +155,9 @@ export default function QuestList() {
       setQuests([]);
       setIsLoading(true);
       QuestService.fetchQuestsPaging(0, QUESTS_PAGE_SIZE, _filter ?? filter).then((res) => {
-        if (!isMounted) return;
+        if (!isMountedRef.current) {
+          return;
+        }
         setIsLoading(false);
         setQuests(res);
         setHasMore(res.length >= QUESTS_PAGE_SIZE);
@@ -166,7 +168,9 @@ export default function QuestList() {
   const loadMore = () => {
     setIsLoading(true);
     QuestService.fetchQuestsPaging(quests.length, QUESTS_PAGE_SIZE, filter).then((res) => {
-      if (!isMounted) return;
+      if (!isMountedRef.current) {
+        return;
+      }
       setIsLoading(false);
       setQuests(quests.concat(res));
       setHasMore(res.length >= QUESTS_PAGE_SIZE);
diff --git a/packages/react-app/src/constants.ts b/packages/react-app/src/constants.ts
index 99c6c23d..83c4cfc8 100644
--- a/packages/react-app/src/constants.ts
+++ b/packages/react-app/src/constants.ts
@@ -175,6 +175,6 @@ export const DEFAULT_FILTER = Object.freeze({
   status: ENUM_QUEST_STATE.Active,
 } as FilterModel);
 
-export const DEFAULT_CLAIM_EXECUTION_DELAY_MS = 60 * 15 * 1000; // Add 15 minutes by default
+export const DEFAULT_CLAIM_EXECUTION_DELAY_MS = 1 * 60 * 1000; // Add 15 minutes by default
 
 export const MAX_LINE_DESCRIPTION = 5;
diff --git a/packages/react-app/src/contexts/transaction.context.tsx b/packages/react-app/src/contexts/transaction.context.tsx
index 8d34e03a..f1effb89 100644
--- a/packages/react-app/src/contexts/transaction.context.tsx
+++ b/packages/react-app/src/contexts/transaction.context.tsx
@@ -1,9 +1,15 @@
-import React, { createContext, useContext, useState } from 'react';
+import { uniqueId } from 'lodash';
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { TransactionModel } from 'src/models/transaction.model';
 
+type IdentifiableTransactionModel = TransactionModel & { id: string };
+
 type TransactionContextModel = {
-  transaction: TransactionModel | undefined;
-  setTransaction: React.Dispatch<React.SetStateAction<TransactionModel | undefined>>;
+  getTransaction: (_id: string) => TransactionModel | undefined;
+  transaction: IdentifiableTransactionModel | undefined;
+  setTransaction: React.Dispatch<React.SetStateAction<IdentifiableTransactionModel | undefined>>;
+  queueTransaction: (_newTransaction: TransactionModel) => string;
+  clearCurrentTransaction: () => void;
 };
 
 const TransactionContext = createContext<TransactionContextModel | undefined>(undefined);
@@ -13,13 +19,31 @@ type Props = {
   children: React.ReactNode;
 };
 export const TransactionContextProvider = ({ children }: Props) => {
-  const [transaction, setTransaction] = useState<TransactionModel | undefined>();
+  const [transaction, setTransaction] = useState<IdentifiableTransactionModel | undefined>();
+  const transactionListRef = useRef([] as IdentifiableTransactionModel[]);
+
+  useEffect(() => {
+    if (!transaction) {
+      setTransaction(transactionListRef.current.pop());
+    }
+  }, [transaction]);
+
+  const queueTransaction = (newTransaction: TransactionModel) => {
+    const id = uniqueId();
+    transactionListRef.current.push({ id, ...newTransaction });
+    return id;
+  };
+
+  const getTransaction = (id: string) => transactionListRef.current.find((t) => t.id === id);
 
   return (
     <TransactionContext.Provider
       value={{
+        getTransaction,
         transaction,
         setTransaction,
+        queueTransaction,
+        clearCurrentTransaction: () => setTransaction(undefined),
       }}
     >
       {children}
diff --git a/packages/react-app/src/hooks/use-mounted.hook.ts b/packages/react-app/src/hooks/use-mounted.hook.ts
new file mode 100644
index 00000000..ff35d4ea
--- /dev/null
+++ b/packages/react-app/src/hooks/use-mounted.hook.ts
@@ -0,0 +1,12 @@
+import { useEffect, useRef } from 'react';
+
+export function useIsMountedRef() {
+  const isMountedRef = useRef(false);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  return isMountedRef;
+}
diff --git a/packages/react-app/src/services/quest.service.ts b/packages/react-app/src/services/quest.service.ts
index 32567544..6c82a614 100644
--- a/packages/react-app/src/services/quest.service.ts
+++ b/packages/react-app/src/services/quest.service.ts
@@ -311,13 +311,7 @@ export async function fetchChallenge(container: ContainerModel): Promise<Challen
   if (!result) return null;
 
   const { disputeId, reason, createdAt, resolver, collateral, challenger } = result;
-  let fetchedReason: string | undefined;
-  try {
-    fetchedReason = await getObjectFromIpfs(reason);
-  } catch (error) {
-    Logger.warn(error, 'Failed to get IPFS object when fetching challenge');
-    fetchedReason = await getObjectFromIpfs(reason, ipfsTheGraph); // try with thegraph ipfs node
-  }
+  const fetchedReason = await getObjectFromIpfs(reason, ipfsTheGraph);
   return {
     deposit: {
       parsedAmount: fromBigNumber(collateral.amount, collateral.decimals),
diff --git a/packages/react-app/src/services/transaction-handler.ts b/packages/react-app/src/services/transaction-handler.ts
index a471f324..5d1c50ca 100644
--- a/packages/react-app/src/services/transaction-handler.ts
+++ b/packages/react-app/src/services/transaction-handler.ts
@@ -1,5 +1,6 @@
 import { ContractReceipt } from 'ethers';
 import { Dispatch, SetStateAction } from 'react';
+import { isDevelopement } from 'src/components/utils/debug-util';
 import { ENUM, ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { TokenModel } from 'src/models/token.model';
@@ -18,6 +19,9 @@ export async function approveTokenTransaction(
 
   let approveTxReceipt: ContractReceipt | null;
   if (!allowance.isZero()) {
+    if (isDevelopement()) {
+      return; // Skip only if development mode (having permanent allowance is a security risk see https://kalis.me/unlimited-erc20-allowances/#:~:text=several%20such%20exploits.-,bug%20exploits,-In%20early%202020)
+    }
     // Reset approval to 0 before approving again
     setTransaction({
       modalId,
@@ -87,6 +91,13 @@ export async function approveTokenTransaction(
   }
 
   if (!approveTxReceipt?.status) {
+    setTransaction(
+      (oldTx) =>
+        oldTx && {
+          ...oldTx,
+          status: ENUM_TRANSACTION_STATUS.Failed,
+        },
+    );
     throw new Error(
       `Failed to approve token allowance : ${token.name} (${token.symbol}-${token.token})`,
     );
@@ -130,6 +141,13 @@ export async function fundQuestTransaction(
   );
 
   if (!txReceipt) {
+    setTransaction(
+      (oldTx) =>
+        oldTx && {
+          ...oldTx,
+          status: ENUM_TRANSACTION_STATUS.Failed,
+        },
+    );
     throw new Error('Failed to fund quest');
   }
 }

From 5e72c0de4ebdbed7f88ef2edcc1cc67c396d557f Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Thu, 26 May 2022 19:13:15 -0400
Subject: [PATCH 3/6] Fix when multiple transaction

---
 .../src/components/modals/challenge-modal.tsx |  40 +++---
 .../components/modals/create-quest-modal.tsx  |  46 +++----
 .../components/modals/execute-claim-modal.tsx |  41 +++---
 .../src/components/modals/fund-modal.tsx      |   8 +-
 .../components/modals/reclaim-funds-modal.tsx |  44 +++----
 .../modals/resolve-challenge-modal.tsx        |  44 +++----
 .../modals/schedule-claim-modal.tsx           |  44 +++----
 .../src/contexts/transaction.context.tsx      |  32 +----
 .../src/services/transaction-handler.ts       | 119 +++++++-----------
 9 files changed, 159 insertions(+), 259 deletions(-)

diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 5cad7960..9a815659 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -17,6 +17,7 @@ import { TokenModel } from 'src/models/token.model';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { approveTokenTransaction } from 'src/services/transaction-handler';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { TransactionModel } from 'src/models/transaction.model';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import AmountFieldInput from '../field-input/amount-field-input';
@@ -56,7 +57,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
   const [isFeeDepositSameToken, setIsFeeDepositSameToken] = useState<boolean>();
   const [challengeFee, setChallengeFee] = useState<TokenAmountModel | undefined>(undefined);
   const [isFormValid, setIsFormValid] = useState(false);
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const formRef = useRef<HTMLFormElement>(null);
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('challenge-modal'), []);
@@ -125,14 +126,15 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
         }
 
         if (!claim.container) throw new Error('Container is not defined');
-        setTransaction({
+        const txPayload = {
           modalId,
           estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimChallenging,
           message: `Challenging Quest (${isFeeDepositSameToken ? '2/2' : '3/3'})`,
           status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
           type: 'ClaimChallenge',
           args: { questAddress: claim.questAddress, containerId: claim.container.id },
-        });
+        } as TransactionModel;
+        setTransaction(txPayload);
         const challengeTxReceipt = await QuestService.challengeQuestClaim(
           walletAddress,
           {
@@ -142,25 +144,19 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           },
           claim.container,
           (txHash) => {
-            setTransaction(
-              (oldTx) =>
-                oldTx && {
-                  ...oldTx,
-                  hash: txHash,
-                  status: ENUM_TRANSACTION_STATUS.Pending,
-                },
-            );
+            setTransaction({
+              ...txPayload,
+              hash: txHash,
+              status: ENUM_TRANSACTION_STATUS.Pending,
+            });
           },
         );
-        setTransaction(
-          (oldTx) =>
-            oldTx && {
-              ...oldTx,
-              status: challengeTxReceipt?.status
-                ? ENUM_TRANSACTION_STATUS.Confirmed
-                : ENUM_TRANSACTION_STATUS.Failed,
-            },
-        );
+        setTransaction({
+          ...txPayload,
+          status: challengeTxReceipt?.status
+            ? ENUM_TRANSACTION_STATUS.Confirmed
+            : ENUM_TRANSACTION_STATUS.Failed,
+        });
         if (!challengeTxReceipt?.status) throw new Error('Failed to challenge the quest');
       } catch (e: any) {
         setTransaction(
@@ -249,14 +245,12 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           mode="negative"
           type="submit"
           form="form-challenge"
-          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid || !!transaction}
+          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
           title={
             loading || !walletAddress
               ? 'Not ready ...'
               : !isFormValid
               ? 'Form not valid'
-              : transaction
-              ? 'Wait for previous transaction to complete'
               : 'Challenge'
           }
           className="m-8"
diff --git a/packages/react-app/src/components/modals/create-quest-modal.tsx b/packages/react-app/src/components/modals/create-quest-modal.tsx
index e9e6b444..18f18d9e 100644
--- a/packages/react-app/src/components/modals/create-quest-modal.tsx
+++ b/packages/react-app/src/components/modals/create-quest-modal.tsx
@@ -22,6 +22,7 @@ import { IN_A_WEEK_IN_MS } from 'src/utils/date.utils';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { approveTokenTransaction, fundQuestTransaction } from 'src/services/transaction-handler';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { TransactionModel } from 'src/models/transaction.model';
 import ModalBase, { ModalCallback } from './modal-base';
 import Stepper from '../utils/stepper';
 import { DateFieldInputFormik } from '../field-input/date-field-input';
@@ -81,7 +82,7 @@ export default function QuestModal({
   const { questFactoryAddress } = getNetwork();
   const formRef = useRef<HTMLFormElement>(null);
   const [isFormValid, setIsFormValid] = useState(false);
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const [questDataState, setQuestDataState] = useState<QuestModel>(questData);
   const [questDeposit, setQuestDeposit] = useState<TokenAmountModel | null>();
@@ -179,13 +180,14 @@ export default function QuestModal({
 
       let newQuestAddress: string;
       try {
-        setTransaction({
+        const txPayload = {
           modalId,
           estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.QuestCreating,
           message: `Creating Quest (2/${values.bounty?.parsedAmount ? '3' : '2'})`,
           status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
           type: 'QuestCreate',
-        });
+        } as TransactionModel;
+        setTransaction(txPayload);
         const txReceiptSaveQuest = await QuestService.saveQuest(
           walletAddress,
           values.fallbackAddress ?? walletAddress,
@@ -197,30 +199,24 @@ export default function QuestModal({
           },
           undefined,
           (txHash) => {
-            setTransaction(
-              (oldTx) =>
-                oldTx && {
-                  ...oldTx,
-                  hash: txHash,
-                  status: ENUM_TRANSACTION_STATUS.Pending,
-                },
-            );
+            setTransaction({
+              ...txPayload,
+              hash: txHash,
+              status: ENUM_TRANSACTION_STATUS.Pending,
+            });
           },
         );
 
         newQuestAddress = txReceiptSaveQuest?.events?.flatMap((x) => x.args).filter((x) => !!x)[0];
         if (!newQuestAddress) throw Error('Something went wrong, Quest was not created');
 
-        setTransaction(
-          (oldTx) =>
-            oldTx && {
-              ...oldTx,
-              status: txReceiptSaveQuest?.status
-                ? ENUM_TRANSACTION_STATUS.Confirmed
-                : ENUM_TRANSACTION_STATUS.Failed,
-              args: { questAddress: newQuestAddress },
-            },
-        );
+        setTransaction({
+          ...txPayload,
+          status: txReceiptSaveQuest?.status
+            ? ENUM_TRANSACTION_STATUS.Confirmed
+            : ENUM_TRANSACTION_STATUS.Failed,
+          args: { questAddress: newQuestAddress },
+        });
         if (!txReceiptSaveQuest?.status || !newQuestAddress) {
           throw new Error('Failed to create quest');
         }
@@ -340,16 +336,10 @@ export default function QuestModal({
                           ? 'Not ready ...'
                           : !isFormValid
                           ? 'Form not valid'
-                          : transaction
-                          ? 'Wait for previous transaction to complete'
                           : 'Schedule claim'
                       }
                       disabled={
-                        !walletAddress ||
-                        !questDeposit?.token ||
-                        !isEnoughBalance ||
-                        !isFormValid ||
-                        !!transaction
+                        !walletAddress || !questDeposit?.token || !isEnoughBalance || !isFormValid
                       }
                     />
                   </>
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index 07cf818b..6d9e9c5a 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -12,6 +12,7 @@ import { useWallet } from 'src/contexts/wallet.context';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { compareCaseInsensitive } from 'src/utils/string.util';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { TransactionModel } from 'src/models/transaction.model';
 import * as QuestService from '../../services/quest.service';
 import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
@@ -57,7 +58,7 @@ export default function ExecuteClaimModal({
   const [loading, setLoading] = useState(false);
   const [amount, setAmount] = useState<TokenAmountModel>();
   const [buttonLabel, setButtonLabel] = useState<ReactNode>('Claim');
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('execute-claim-modal'), []);
   const isMountedRef = useIsMountedRef();
@@ -83,33 +84,28 @@ export default function ExecuteClaimModal({
   const claimTx = async () => {
     try {
       setLoading(true);
-      setTransaction({
+      const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimExecuting,
         message: 'Sending claimed amount to your wallet',
         status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
         type: 'ClaimExecute',
         args: { questAddress: claim.questAddress, containerId: claim.container!.id },
-      });
+      } as TransactionModel;
+      setTransaction(txPayload);
       const txReceipt = await QuestService.executeQuestClaim(walletAddress, claim, (txHash) => {
-        setTransaction(
-          (oldTx) =>
-            oldTx && {
-              ...oldTx,
-              hash: txHash,
-              status: ENUM_TRANSACTION_STATUS.Pending,
-            },
-        );
+        setTransaction({
+          ...txPayload,
+          hash: txHash,
+          status: ENUM_TRANSACTION_STATUS.Pending,
+        });
+      });
+      setTransaction({
+        ...txPayload,
+        status: txReceipt?.status
+          ? ENUM_TRANSACTION_STATUS.Confirmed
+          : ENUM_TRANSACTION_STATUS.Failed,
       });
-      setTransaction(
-        (oldTx) =>
-          oldTx && {
-            ...oldTx,
-            status: txReceipt?.status
-              ? ENUM_TRANSACTION_STATUS.Confirmed
-              : ENUM_TRANSACTION_STATUS.Failed,
-          },
-      );
       if (!txReceipt?.status) throw new Error('Failed to execute claim');
     } catch (e: any) {
       setTransaction(
@@ -165,14 +161,11 @@ export default function ExecuteClaimModal({
               loading ||
               !walletAddress ||
               !isClaimable ||
-              claim.state === ENUM_CLAIM_STATE.Challenged ||
-              !!transaction
+              claim.state === ENUM_CLAIM_STATE.Challenged
             }
             title={
               loading || !walletAddress || !isClaimable
                 ? 'Not ready ...'
-                : transaction
-                ? 'Wait for previous transaction to complete'
                 : 'Trigger claim operation in the chain'
             }
             mode="positive"
diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
index 3330c1d9..00e678fb 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -39,7 +39,7 @@ export default function FundModal({ quest, onClose = noop }: Props) {
   const [loading, setLoading] = useState(false);
   const [isFormValid, setIsFormValid] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const modalId = useMemo(() => uniqueId('fund-modal'), []);
   const isMountedRef = useIsMountedRef();
@@ -121,13 +121,9 @@ export default function FundModal({ quest, onClose = noop }: Props) {
                   ? 'Not ready ...'
                   : !isFormValid
                   ? 'Form not valid'
-                  : transaction
-                  ? 'Wait for previous transaction to complete'
                   : 'Fund'
               }
-              disabled={
-                loading || !walletAddress || !isEnoughBalance || !isFormValid || !!transaction
-              }
+              disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
             />,
           ]}
           onClose={closeModal}
diff --git a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
index 2616fe8e..f34226c2 100644
--- a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
+++ b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
@@ -15,6 +15,7 @@ import { getTokenInfo } from 'src/utils/contract.util';
 import { toTokenAmountModel } from 'src/utils/data.utils';
 import { TokenModel } from 'src/models/token.model';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { TransactionModel } from 'src/models/transaction.model';
 import * as QuestService from '../../services/quest.service';
 import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
@@ -52,7 +53,7 @@ export default function ReclaimFundsModal({
 }: Props) {
   const [opened, setOpened] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const [depositTokenAmount, setDepositTokenAmount] = useState<TokenAmountModel>();
   const modalId = useMemo(() => uniqueId('reclaim-funds-modal'), []);
@@ -77,37 +78,32 @@ export default function ReclaimFundsModal({
   const reclaimFundTx = async () => {
     try {
       setLoading(true);
-      setTransaction({
+      const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.QuestFundsReclaiming,
         message: 'Reclaiming funds and deposit',
         status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
         type: 'QuestReclaimFunds',
         args: { questAddress: questData.address },
-      });
+      } as TransactionModel;
+      setTransaction(txPayload);
       const txReceipt = await QuestService.reclaimQuestUnusedFunds(
         walletAddress,
         questData,
         (txHash) => {
-          setTransaction(
-            (oldTx) =>
-              oldTx && {
-                ...oldTx,
-                hash: txHash,
-                status: ENUM_TRANSACTION_STATUS.Pending,
-              },
-          );
+          setTransaction({
+            ...txPayload,
+            hash: txHash,
+            status: ENUM_TRANSACTION_STATUS.Pending,
+          });
         },
       );
-      setTransaction(
-        (oldTx) =>
-          oldTx && {
-            ...oldTx,
-            status: txReceipt?.status
-              ? ENUM_TRANSACTION_STATUS.Confirmed
-              : ENUM_TRANSACTION_STATUS.Failed,
-          },
-      );
+      setTransaction({
+        ...txPayload,
+        status: txReceipt?.status
+          ? ENUM_TRANSACTION_STATUS.Confirmed
+          : ENUM_TRANSACTION_STATUS.Failed,
+      });
       if (!txReceipt?.status) throw new Error('Failed to reclaim funds');
     } catch (e: any) {
       setTransaction(
@@ -151,13 +147,9 @@ export default function ReclaimFundsModal({
             label="Reclaim"
             mode="strong"
             title={
-              loading || !walletAddress
-                ? 'Not ready ...'
-                : transaction
-                ? 'Wait for previous transaction to complete'
-                : 'Reclaim remaining funds and deposit'
+              loading || !walletAddress ? 'Not ready ...' : 'Reclaim remaining funds and deposit'
             }
-            disabled={loading || !walletAddress || !!transaction}
+            disabled={loading || !walletAddress}
           />
         }
         onClose={closeModal}
diff --git a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
index 2b50bb32..73c60000 100644
--- a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
@@ -27,6 +27,7 @@ import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { getNetwork } from 'src/networks';
 import { getObjectFromIpfs, ipfsTheGraph } from 'src/services/ipfs.service';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { TransactionModel } from 'src/models/transaction.model';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import { Outset } from '../utils/spacer-util';
@@ -101,7 +102,7 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
   const [challenge, setChallenge] = useState<ChallengeModel | null>();
   const [dispute, setDispute] = useState<DisputeModel>();
   const [isStackholder, setIsStackholder] = useState(false);
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const [evidence, setEvidence] = useState<string>();
   const modalId = useMemo(() => uniqueId('resolve-challenge-modal'), []);
   const isMountedRef = useIsMountedRef();
@@ -147,7 +148,7 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
       setLoading(true);
       if (!claim.container) throw new Error('Container is not defined');
       const message = 'Resolving claim challenge';
-      setTransaction({
+      const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ChallengeResolving,
         message,
@@ -158,31 +159,26 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
           containerId: claim.container.id,
           disputeState: dispute!.state,
         },
-      });
+      } as TransactionModel;
+      setTransaction(txPayload);
       const challengeTxReceipt = await QuestService.resolveClaimChallenge(
         walletAddress,
         claim.container,
         dispute!,
         (txHash) => {
-          setTransaction(
-            (oldTx) =>
-              oldTx && {
-                ...oldTx,
-                hash: txHash,
-                status: ENUM_TRANSACTION_STATUS.Pending,
-              },
-          );
+          setTransaction({
+            ...txPayload,
+            hash: txHash,
+            status: ENUM_TRANSACTION_STATUS.Pending,
+          });
         },
       );
-      setTransaction(
-        (oldTx) =>
-          oldTx && {
-            ...oldTx,
-            status: challengeTxReceipt?.status
-              ? ENUM_TRANSACTION_STATUS.Confirmed
-              : ENUM_TRANSACTION_STATUS.Failed,
-          },
-      );
+      setTransaction({
+        ...txPayload,
+        status: challengeTxReceipt?.status
+          ? ENUM_TRANSACTION_STATUS.Confirmed
+          : ENUM_TRANSACTION_STATUS.Failed,
+      });
       if (!challengeTxReceipt?.status) throw new Error('Failed to challenge the quest');
     } catch (e: any) {
       setTransaction(
@@ -295,11 +291,7 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
           label="Resolve"
           mode="positive"
           disabled={
-            loading ||
-            !walletAddress ||
-            !isRuled ||
-            claim.state !== ENUM_CLAIM_STATE.Challenged ||
-            !!transaction
+            loading || !walletAddress || !isRuled || claim.state !== ENUM_CLAIM_STATE.Challenged
           }
           onClick={resolveChallengeTx}
           title={
@@ -307,8 +299,6 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
               ? 'Need to be ruled in celeste'
               : loading || !walletAddress
               ? 'Not ready ...'
-              : transaction
-              ? 'Wait for previous transaction to complete'
               : 'Publish dispute result'
           }
         />,
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index 07562b05..a9075262 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -18,6 +18,7 @@ import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { FormErrors } from 'src/models/form-errors';
 import { approveTokenTransaction } from 'src/services/transaction-handler';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { TransactionModel } from 'src/models/transaction.model';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import AmountFieldInput, { AmountFieldInputFormik } from '../field-input/amount-field-input';
@@ -68,7 +69,7 @@ export default function ScheduleClaimModal({
   const [isFormValid, setIsFormValid] = useState(false);
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
-  const { setTransaction, transaction } = useTransactionContext();
+  const { setTransaction } = useTransactionContext();
   const modalId = useMemo(() => uniqueId('schedule-claim-modal'), []);
   const isMountedRef = useIsMountedRef();
 
@@ -121,14 +122,15 @@ export default function ScheduleClaimModal({
         walletAddress,
         setTransaction,
       );
-      setTransaction({
+      const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimScheduling,
         message: 'Scheduling claim (2/2)',
         status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
         type: 'ClaimSchedule',
         args: { questAddress },
-      });
+      } as TransactionModel;
+      setTransaction(txPayload);
       const scheduleReceipt = await QuestService.scheduleQuestClaim(
         walletAddress,
         {
@@ -139,25 +141,19 @@ export default function ScheduleClaimModal({
           questAddress,
         },
         (txHash) => {
-          setTransaction(
-            (oldTx) =>
-              oldTx && {
-                ...oldTx,
-                hash: txHash,
-                status: ENUM_TRANSACTION_STATUS.Pending,
-              },
-          );
+          setTransaction({
+            ...txPayload,
+            hash: txHash,
+            status: ENUM_TRANSACTION_STATUS.Pending,
+          });
         },
       );
-      setTransaction(
-        (oldTx) =>
-          oldTx && {
-            ...oldTx,
-            status: scheduleReceipt?.status
-              ? ENUM_TRANSACTION_STATUS.Confirmed
-              : ENUM_TRANSACTION_STATUS.Failed,
-          },
-      );
+      setTransaction({
+        ...txPayload,
+        status: scheduleReceipt?.status
+          ? ENUM_TRANSACTION_STATUS.Confirmed
+          : ENUM_TRANSACTION_STATUS.Failed,
+      });
       if (!scheduleReceipt?.status)
         throw new Error('Failed to schedule the claim, please retry in a few seconds');
     } catch (e: any) {
@@ -181,7 +177,7 @@ export default function ScheduleClaimModal({
   return (
     <ModalBase
       id={modalId}
-      title="Claim quest"
+      title="Schedule a Quest claim"
       openButton={
         <OpenButtonStyled
           icon={<GiBroadsword />}
@@ -255,13 +251,9 @@ export default function ScheduleClaimModal({
                         ? 'Not ready ...'
                         : !isFormValid
                         ? 'Form not valid'
-                        : transaction
-                        ? 'Wait for previous transaction to complete'
                         : 'Schedule claim'
                     }
-                    disabled={
-                      loading || !walletAddress || !isEnoughBalance || !isFormValid || !!transaction
-                    }
+                    disabled={!isEnoughBalance}
                   />
                 </>
               }
diff --git a/packages/react-app/src/contexts/transaction.context.tsx b/packages/react-app/src/contexts/transaction.context.tsx
index f1effb89..8d34e03a 100644
--- a/packages/react-app/src/contexts/transaction.context.tsx
+++ b/packages/react-app/src/contexts/transaction.context.tsx
@@ -1,15 +1,9 @@
-import { uniqueId } from 'lodash';
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { TransactionModel } from 'src/models/transaction.model';
 
-type IdentifiableTransactionModel = TransactionModel & { id: string };
-
 type TransactionContextModel = {
-  getTransaction: (_id: string) => TransactionModel | undefined;
-  transaction: IdentifiableTransactionModel | undefined;
-  setTransaction: React.Dispatch<React.SetStateAction<IdentifiableTransactionModel | undefined>>;
-  queueTransaction: (_newTransaction: TransactionModel) => string;
-  clearCurrentTransaction: () => void;
+  transaction: TransactionModel | undefined;
+  setTransaction: React.Dispatch<React.SetStateAction<TransactionModel | undefined>>;
 };
 
 const TransactionContext = createContext<TransactionContextModel | undefined>(undefined);
@@ -19,31 +13,13 @@ type Props = {
   children: React.ReactNode;
 };
 export const TransactionContextProvider = ({ children }: Props) => {
-  const [transaction, setTransaction] = useState<IdentifiableTransactionModel | undefined>();
-  const transactionListRef = useRef([] as IdentifiableTransactionModel[]);
-
-  useEffect(() => {
-    if (!transaction) {
-      setTransaction(transactionListRef.current.pop());
-    }
-  }, [transaction]);
-
-  const queueTransaction = (newTransaction: TransactionModel) => {
-    const id = uniqueId();
-    transactionListRef.current.push({ id, ...newTransaction });
-    return id;
-  };
-
-  const getTransaction = (id: string) => transactionListRef.current.find((t) => t.id === id);
+  const [transaction, setTransaction] = useState<TransactionModel | undefined>();
 
   return (
     <TransactionContext.Provider
       value={{
-        getTransaction,
         transaction,
         setTransaction,
-        queueTransaction,
-        clearCurrentTransaction: () => setTransaction(undefined),
       }}
     >
       {children}
diff --git a/packages/react-app/src/services/transaction-handler.ts b/packages/react-app/src/services/transaction-handler.ts
index 5d1c50ca..be343814 100644
--- a/packages/react-app/src/services/transaction-handler.ts
+++ b/packages/react-app/src/services/transaction-handler.ts
@@ -17,87 +17,74 @@ export async function approveTokenTransaction(
 ) {
   const allowance = await getAllowanceOf(walletAddress, token, spender);
 
-  let approveTxReceipt: ContractReceipt | null;
+  let approveTxReceipt: ContractReceipt | null = null;
   if (!allowance.isZero()) {
     if (isDevelopement()) {
       return; // Skip only if development mode (having permanent allowance is a security risk see https://kalis.me/unlimited-erc20-allowances/#:~:text=several%20such%20exploits.-,bug%20exploits,-In%20early%202020)
     }
-    // Reset approval to 0 before approving again
-    setTransaction({
+    const txPayload = {
       modalId,
       estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.TokenAproval,
       message: 'Revoking already existing approval',
       status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
       type: 'TokenApproval',
-    });
+    } as TransactionModel;
+    // Reset approval to 0 before approving again
+    setTransaction(txPayload);
     approveTxReceipt = await approveTokenAmount(
       walletAddress,
       spender,
       { ...token, amount: '0' },
       (txHash) => {
-        setTransaction(
-          (oldTx) =>
-            oldTx && {
-              ...oldTx,
-              hash: txHash,
-              status: ENUM_TRANSACTION_STATUS.Pending,
-            },
-        );
+        setTransaction({
+          ...txPayload,
+          hash: txHash,
+          status: ENUM_TRANSACTION_STATUS.Pending,
+        });
       },
     );
 
     if (!approveTxReceipt?.status) {
-      setTransaction(
-        (oldTx) =>
-          oldTx && {
-            ...oldTx,
-            status: ENUM_TRANSACTION_STATUS.Failed,
-          },
-      );
+      setTransaction({
+        ...txPayload,
+        status: ENUM_TRANSACTION_STATUS.Failed,
+      });
       throw new Error(
         `Failed to revoke existing allowance : ${token.name} (${token.symbol}-${token.token})`,
       );
     }
   }
 
-  setTransaction({
+  const txPayload = {
     modalId,
     estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.TokenAproval,
     message,
     status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
     type: 'TokenApproval',
-  });
+  } as TransactionModel;
+  setTransaction(txPayload);
   try {
     approveTxReceipt = await approveTokenAmount(walletAddress, spender, token, (txHash) => {
-      setTransaction(
-        (oldTx) =>
-          oldTx && {
-            ...oldTx,
-            hash: txHash,
-            status: ENUM_TRANSACTION_STATUS.Pending,
-          },
-      );
+      setTransaction({
+        ...txPayload,
+        hash: txHash,
+        status: ENUM_TRANSACTION_STATUS.Pending,
+      });
     });
   } finally {
-    setTransaction(
-      (oldTx) =>
-        oldTx && {
-          ...oldTx,
-          status: approveTxReceipt?.status
-            ? ENUM_TRANSACTION_STATUS.Confirmed
-            : ENUM_TRANSACTION_STATUS.Failed,
-        },
-    );
+    setTransaction({
+      ...txPayload,
+      status: approveTxReceipt?.status
+        ? ENUM_TRANSACTION_STATUS.Confirmed
+        : ENUM_TRANSACTION_STATUS.Failed,
+    });
   }
 
   if (!approveTxReceipt?.status) {
-    setTransaction(
-      (oldTx) =>
-        oldTx && {
-          ...oldTx,
-          status: ENUM_TRANSACTION_STATUS.Failed,
-        },
-    );
+    setTransaction({
+      ...txPayload,
+      status: ENUM_TRANSACTION_STATUS.Failed,
+    });
     throw new Error(
       `Failed to approve token allowance : ${token.name} (${token.symbol}-${token.token})`,
     );
@@ -112,42 +99,32 @@ export async function fundQuestTransaction(
   walletAddress: string,
   setTransaction: Dispatch<SetStateAction<TransactionModel | undefined>>,
 ) {
-  setTransaction({
+  const txPayload = {
     modalId,
     estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.QuestFunding,
     message,
     status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
     type: 'QuestFund',
     args: { questAddress },
-  });
+  } as TransactionModel;
+  setTransaction(txPayload);
   const txReceipt = await fundQuest(walletAddress, questAddress, funds, (txHash) => {
-    setTransaction(
-      (oldTx) =>
-        oldTx && {
-          ...oldTx,
-          hash: txHash,
-          status: ENUM_TRANSACTION_STATUS.Pending,
-        },
-    );
+    setTransaction({
+      ...txPayload,
+      hash: txHash,
+      status: ENUM_TRANSACTION_STATUS.Pending,
+    });
+  });
+  setTransaction({
+    ...txPayload,
+    status: txReceipt?.status ? ENUM_TRANSACTION_STATUS.Confirmed : ENUM_TRANSACTION_STATUS.Failed,
   });
-  setTransaction(
-    (oldTx) =>
-      oldTx && {
-        ...oldTx,
-        status: txReceipt?.status
-          ? ENUM_TRANSACTION_STATUS.Confirmed
-          : ENUM_TRANSACTION_STATUS.Failed,
-      },
-  );
 
   if (!txReceipt) {
-    setTransaction(
-      (oldTx) =>
-        oldTx && {
-          ...oldTx,
-          status: ENUM_TRANSACTION_STATUS.Failed,
-        },
-    );
+    setTransaction({
+      ...txPayload,
+      status: ENUM_TRANSACTION_STATUS.Failed,
+    });
     throw new Error('Failed to fund quest');
   }
 }

From d4cb9c3b00da3b15cadfbb1ee54431de4d4050a3 Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Thu, 26 May 2022 20:30:55 -0400
Subject: [PATCH 4/6] Pimpup the way claimable is proceed

---
 packages/react-app/src/components/claim.tsx   |  21 +--
 .../src/components/modals/challenge-modal.tsx |  21 +--
 .../components/modals/execute-claim-modal.tsx |  36 ++---
 .../src/components/modals/fund-modal.tsx      |  26 +---
 .../components/modals/reclaim-funds-modal.tsx |  33 +----
 .../modals/resolve-challenge-modal.tsx        | 137 +++++++++---------
 .../modals/schedule-claim-modal.tsx           |  15 +-
 packages/react-app/src/hooks/use-now.hook.ts  |  17 +++
 packages/react-app/src/hooks/use-now.hooks.ts |  15 --
 9 files changed, 119 insertions(+), 202 deletions(-)
 create mode 100644 packages/react-app/src/hooks/use-now.hook.ts
 delete mode 100644 packages/react-app/src/hooks/use-now.hooks.ts

diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index ba961f8f..d3297dda 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -3,8 +3,8 @@ import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ENUM_CLAIM_STATE, ENUM_DISPUTE_STATES, ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { useWallet } from 'src/contexts/wallet.context';
-import { useTimeout } from 'src/hooks/use-hooks';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
+import { useNow } from 'src/hooks/use-now.hook';
 import { ClaimModel } from 'src/models/claim.model';
 import { QuestModel } from 'src/models/quest.model';
 import { TokenAmountModel } from 'src/models/token-amount.model';
@@ -44,23 +44,18 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
   const [state, setState] = useState(claim.state);
   const { below } = useViewport();
   const [waitForClose, setWaitForClose] = useState(false);
-  const [isClaimable, setIsClaimable] = useState(false);
   const [actionButton, setActionButton] = useState<ReactNode>();
   const isMountedRef = useIsMountedRef();
-
-  useTimeout(() => {
-    if (claim.executionTimeMs) setIsClaimable(true);
-  }, Math.max((claim.executionTimeMs ?? 0) - Date.now(), 0));
+  const now = useNow();
+  const claimable = useMemo(() => !!claim.executionTimeMs && claim.executionTimeMs <= now, [now]);
 
   useEffect(() => {
     setState(claim.state);
   }, [claim.state]);
 
   const timer = useMemo(
-    () =>
-      claim.executionTimeMs &&
-      claim.executionTimeMs - Date.now() > 0 && <Timer end={new Date(claim.executionTimeMs)} />,
-    [claim.executionTimeMs],
+    () => !claimable && claim.executionTimeMs && <Timer end={new Date(claim.executionTimeMs)} />,
+    [claim.executionTimeMs, claimable],
   );
 
   const onActionClose = () => {
@@ -104,14 +99,14 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
   useEffect(() => {
     if (waitForClose || !state || !isMountedRef.current) return;
     if (state === ENUM_CLAIM_STATE.Scheduled) {
-      if (compareCaseInsensitive(walletAddress, claim.playerAddress) || isClaimable) {
+      if (compareCaseInsensitive(walletAddress, claim.playerAddress) || claimable) {
         setActionButton(
           <>
             <ExecuteClaimModal
               claim={claim}
               questTotalBounty={questData.bounty}
               onClose={onActionClose}
-              isClaimable={isClaimable}
+              claimable={claimable}
             />
             {timer}
           </>,
@@ -136,7 +131,7 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
       return;
     }
     setActionButton(undefined);
-  }, [state, walletAddress, waitForClose, isClaimable, claim, questData.bounty, challengeDeposit]);
+  }, [state, walletAddress, waitForClose, claim, questData.bounty, challengeDeposit, claimable]);
 
   return (
     <div className="wide">
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 9a815659..66389a03 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -51,7 +51,6 @@ type Props = {
 
 export default function ChallengeModal({ claim, challengeDeposit, onClose = noop }: Props) {
   const toast = useToast();
-  const [loading, setLoading] = useState(false);
   const [opened, setOpened] = useState(false);
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const [isFeeDepositSameToken, setIsFeeDepositSameToken] = useState<boolean>();
@@ -86,7 +85,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
   const challengeTx = async (values: Partial<ChallengeModel>) => {
     if (isFormValid) {
       try {
-        setLoading(true);
         const { governQueueAddress } = getNetwork();
         if (
           challengeFee?.parsedAmount &&
@@ -168,10 +166,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
             },
         );
         toast(computeTransactionErrorMessage(e));
-      } finally {
-        if (isMountedRef.current) {
-          setLoading(false);
-        }
       }
     }
   };
@@ -211,7 +205,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
               : challengeDeposit
           }
           setIsEnoughBalance={setIsEnoughBalance}
-          isLoading={loading}
         />,
         challengeFee && !isFeeDepositSameToken && (
           <WalletBallance
@@ -225,7 +218,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           id="challengeDeposit"
           label="Challenge Deposit"
           tooltip="This amount will be staked when challenging this claim. If this challenge is denied, you will lose this deposit."
-          isLoading={loading}
           value={challengeDeposit}
           compact
         />,
@@ -234,7 +226,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           id="challengeFee"
           label="Challenge fee"
           tooltip="This is the challenge cost defined by Celeste."
-          isLoading={loading || challengeFee === undefined}
+          isLoading={challengeFee === undefined}
           value={challengeFee}
           compact
         />,
@@ -245,14 +237,8 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           mode="negative"
           type="submit"
           form="form-challenge"
-          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
-          title={
-            loading || !walletAddress
-              ? 'Not ready ...'
-              : !isFormValid
-              ? 'Form not valid'
-              : 'Challenge'
-          }
+          disabled={!walletAddress || !isEnoughBalance || !isFormValid}
+          title={!walletAddress ? 'Not ready ...' : !isFormValid ? 'Form not valid' : 'Challenge'}
           className="m-8"
         />,
       ]}
@@ -281,7 +267,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
                 isEdit
                 label="Challenge reason"
                 tooltip="Reason why this claim should be challenged."
-                isLoading={loading}
                 value={values.reason}
                 onChange={handleChange}
                 multiline
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index 6d9e9c5a..9065b3f9 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { Button, IconCoin, IconCaution, Info } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ENUM_CLAIM_STATE, ENUM, ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import styled from 'styled-components';
@@ -44,31 +44,24 @@ const OnlyStackholderWarnStyled = styled(Info)`
 type Props = {
   claim: ClaimModel;
   questTotalBounty?: TokenAmountModel | null;
-  isClaimable?: boolean;
+  claimable: boolean;
   onClose?: ModalCallback;
 };
 
 export default function ExecuteClaimModal({
   claim,
   questTotalBounty,
-  isClaimable,
   onClose = noop,
+  claimable,
 }: Props) {
   const [opened, setOpened] = useState(false);
   const [loading, setLoading] = useState(false);
   const [amount, setAmount] = useState<TokenAmountModel>();
-  const [buttonLabel, setButtonLabel] = useState<ReactNode>('Claim');
   const { setTransaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('execute-claim-modal'), []);
   const isMountedRef = useIsMountedRef();
 
-  useEffect(() => {
-    if (isClaimable === undefined) return;
-    if (claim.state === ENUM_CLAIM_STATE.Challenged) setButtonLabel('Challenged by someone');
-    else setButtonLabel('Claim');
-  }, [claim.state, claim.executionTimeMs, isClaimable]);
-
   useEffect(() => {
     if (questTotalBounty) {
       if (claim.claimAll) setAmount(questTotalBounty);
@@ -87,7 +80,7 @@ export default function ExecuteClaimModal({
       const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimExecuting,
-        message: 'Sending claimed amount to your wallet',
+        message: 'Claiming bounty',
         status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
         type: 'ClaimExecute',
         args: { questAddress: claim.questAddress, containerId: claim.container!.id },
@@ -133,10 +126,10 @@ export default function ExecuteClaimModal({
             <OpenButtonStyled
               onClick={() => setOpened(true)}
               icon={<IconCoin />}
-              label={buttonLabel}
+              label="Claim"
               mode="positive"
               title={
-                !isClaimable
+                !claimable
                   ? 'Wait for the delay period to end before claiming...'
                   : questTotalBounty &&
                     claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
@@ -146,8 +139,8 @@ export default function ExecuteClaimModal({
               disabled={
                 !questTotalBounty ||
                 !walletAddress ||
-                !isClaimable ||
-                claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
+                claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount ||
+                !claimable
               }
             />
           </OpenButtonWrapperStyled>
@@ -156,17 +149,10 @@ export default function ExecuteClaimModal({
           <Button
             onClick={claimTx}
             icon={<IconCoin />}
-            label={buttonLabel}
-            disabled={
-              loading ||
-              !walletAddress ||
-              !isClaimable ||
-              claim.state === ENUM_CLAIM_STATE.Challenged
-            }
+            label="Claim"
+            disabled={loading || !walletAddress || claim.state === ENUM_CLAIM_STATE.Challenged}
             title={
-              loading || !walletAddress || !isClaimable
-                ? 'Not ready ...'
-                : 'Trigger claim operation in the chain'
+              loading || !walletAddress ? 'Not ready ...' : 'Trigger claim operation in the chain'
             }
             mode="positive"
           />
diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
index 00e678fb..b4e7bd1b 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -12,7 +12,6 @@ import { useWallet } from 'src/contexts/wallet.context';
 import { FundModel } from 'src/models/fund.model';
 import { FormErrors } from 'src/models/form-errors';
 import { fundQuestTransaction } from 'src/services/transaction-handler';
-import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
 import ModalBase, { ModalCallback } from './modal-base';
@@ -36,13 +35,11 @@ type Props = {
 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);
   const modalId = useMemo(() => uniqueId('fund-modal'), []);
-  const isMountedRef = useIsMountedRef();
 
   const closeModal = (success: boolean) => {
     setOpened(false);
@@ -52,7 +49,6 @@ export default function FundModal({ quest, onClose = noop }: Props) {
   const onSubmit = async (values: FundModel) => {
     validate(values); // validate one last time before submiting
     if (isFormValid && quest.address) {
-      setLoading(true);
       await fundQuestTransaction(
         modalId,
         values.fundAmount,
@@ -61,9 +57,6 @@ export default function FundModal({ quest, onClose = noop }: Props) {
         walletAddress,
         setTransaction,
       );
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
     }
   };
 
@@ -106,7 +99,6 @@ export default function FundModal({ quest, onClose = noop }: Props) {
                 key="fundAmount"
                 askedTokenAmount={values.fundAmount}
                 setIsEnoughBalance={setIsEnoughBalance}
-                isLoading={loading}
               />
             ),
             <Button
@@ -116,14 +108,8 @@ export default function FundModal({ quest, onClose = noop }: Props) {
               form="form-fund"
               label="Fund"
               mode="strong"
-              title={
-                loading || !walletAddress
-                  ? 'Not ready ...'
-                  : !isFormValid
-                  ? 'Form not valid'
-                  : 'Fund'
-              }
-              disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
+              title={!walletAddress ? 'Not ready ...' : !isFormValid ? 'Form not valid' : 'Fund'}
+              disabled={!walletAddress || !isEnoughBalance || !isFormValid}
             />,
           ]}
           onClose={closeModal}
@@ -132,19 +118,13 @@ export default function FundModal({ quest, onClose = noop }: Props) {
         >
           <FormStyled id="form-fund" onSubmit={handleSubmit} ref={formRef}>
             <Outset gu16>
-              <AddressFieldInput
-                id="address"
-                label="Quest address"
-                value={quest.address}
-                isLoading={loading}
-              />
+              <AddressFieldInput id="address" label="Quest address" value={quest.address} />
               <AmountFieldInputFormik
                 id="fundAmount"
                 isEdit
                 label="Amount"
                 tooltip="The amount of the given token"
                 onChange={handleChange}
-                isLoading={loading}
                 value={values.fundAmount}
                 error={touched.fundAmount && (errors.fundAmount as string)}
               />
diff --git a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
index f34226c2..429775d3 100644
--- a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
+++ b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
@@ -8,7 +8,6 @@ import { QuestModel } from 'src/models/quest.model';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import styled from 'styled-components';
 import { GUpx } from 'src/utils/style.util';
-import Skeleton from 'react-loading-skeleton';
 import { useWallet } from 'src/contexts/wallet.context';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { getTokenInfo } from 'src/utils/contract.util';
@@ -52,7 +51,6 @@ export default function ReclaimFundsModal({
   isDepositReleased,
 }: Props) {
   const [opened, setOpened] = useState(false);
-  const [loading, setLoading] = useState(false);
   const { setTransaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const [depositTokenAmount, setDepositTokenAmount] = useState<TokenAmountModel>();
@@ -77,7 +75,6 @@ export default function ReclaimFundsModal({
 
   const reclaimFundTx = async () => {
     try {
-      setLoading(true);
       const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.QuestFundsReclaiming,
@@ -114,10 +111,6 @@ export default function ReclaimFundsModal({
             message: computeTransactionErrorMessage(e),
           },
       );
-    } finally {
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
     }
   };
 
@@ -146,10 +139,8 @@ export default function ReclaimFundsModal({
             icon={<IconCoin />}
             label="Reclaim"
             mode="strong"
-            title={
-              loading || !walletAddress ? 'Not ready ...' : 'Reclaim remaining funds and deposit'
-            }
-            disabled={loading || !walletAddress}
+            title={!walletAddress ? 'Not ready ...' : 'Reclaim remaining funds and deposit'}
+            disabled={!walletAddress}
           />
         }
         onClose={closeModal}
@@ -157,20 +148,11 @@ export default function ReclaimFundsModal({
       >
         <RowStyled>
           <Outset gu16>
-            <AmountFieldInputFormik
-              id="bounty"
-              label="Reclaimable funds"
-              isLoading={loading}
-              value={bounty}
-            />
+            <AmountFieldInputFormik id="bounty" label="Reclaimable funds" value={bounty} />
           </Outset>
           <Outset gu16>
             <FieldInput label="will be send to">
-              {!loading ? (
-                <IdentityBadge entity={questData.fallbackAddress} badgeOnly />
-              ) : (
-                <Skeleton />
-              )}
+              <IdentityBadge entity={questData.fallbackAddress} badgeOnly />
             </FieldInput>
           </Outset>
         </RowStyled>
@@ -180,17 +162,12 @@ export default function ReclaimFundsModal({
               <AmountFieldInputFormik
                 id="bounty"
                 label="Reclaimable deposit"
-                isLoading={loading}
                 value={depositTokenAmount}
               />
             </Outset>
             <Outset gu16>
               <FieldInput label="will be send to">
-                {!loading && questData.creatorAddress ? (
-                  <IdentityBadge entity={questData.creatorAddress} badgeOnly />
-                ) : (
-                  <Skeleton />
-                )}
+                <IdentityBadge entity={questData.creatorAddress} badgeOnly />
               </FieldInput>
             </Outset>
           </RowStyled>
diff --git a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
index 73c60000..8a0aff11 100644
--- a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
@@ -22,12 +22,13 @@ import { useTransactionContext } from 'src/contexts/transaction.context';
 import { ChallengeModel } from 'src/models/challenge.model';
 import { GUpx } from 'src/utils/style.util';
 import { useWallet } from 'src/contexts/wallet.context';
-import Skeleton from 'react-loading-skeleton';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { getNetwork } from 'src/networks';
 import { getObjectFromIpfs, ipfsTheGraph } from 'src/services/ipfs.service';
 import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { TransactionModel } from 'src/models/transaction.model';
+import Skeleton from 'react-loading-skeleton';
+import { ContainerModel } from 'src/models/govern.model';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
 import { Outset } from '../utils/spacer-util';
@@ -96,7 +97,6 @@ type Props = {
 export default function ResolveChallengeModal({ claim, onClose = noop }: Props) {
   const { walletAddress } = useWallet();
   const { networkId } = getNetwork();
-  const [loading, setLoading] = useState(true);
   const [opened, setOpened] = useState(false);
   const [isRuled, setRuled] = useState(false);
   const [challenge, setChallenge] = useState<ChallengeModel | null>();
@@ -112,20 +112,20 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
   }, []);
 
   useEffect(() => {
-    const fetchChallengeAndDispute = async () => {
-      if (!claim.container) throw new Error('Container is required to fetch challenge disputes');
-      const challengeResult = await QuestService.fetchChallenge(claim.container);
+    const fetchChallengeAndDispute = async (container: ContainerModel) => {
+      const challengeResult = await QuestService.fetchChallenge(container);
       if (!isMountedRef.current) return;
       if (!challengeResult)
-        throw new Error(`Failed to fetch challenge with container id ${claim.container.id}`);
+        throw new Error(`Failed to fetch challenge with container id ${container.id}`);
       setChallenge(challengeResult);
       if (challengeResult) {
         const disputeModel = await QuestService.fetchChallengeDispute(challengeResult);
         setDispute(disputeModel ?? undefined);
       }
-      setLoading(false);
     };
-    fetchChallengeAndDispute();
+    if (claim.container) {
+      fetchChallengeAndDispute(claim.container);
+    }
   }, [claim.container]);
 
   useEffect(() => {
@@ -145,7 +145,6 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
 
   const resolveChallengeTx = async () => {
     try {
-      setLoading(true);
       if (!claim.container) throw new Error('Container is not defined');
       const message = 'Resolving claim challenge';
       const txPayload = {
@@ -189,10 +188,6 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
             message: computeTransactionErrorMessage(e),
           },
       );
-    } finally {
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
     }
   };
 
@@ -210,50 +205,62 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
     onClose(success);
   };
 
-  const player = (
-    <IdentityBadge
-      customLabel="Player"
-      entity={claim?.playerAddress}
-      connectedAccount={claim?.playerAddress === walletAddress}
-    />
+  const player = useMemo(
+    () => (
+      <IdentityBadge
+        customLabel="Player"
+        entity={claim?.playerAddress}
+        connectedAccount={claim?.playerAddress === walletAddress}
+      />
+    ),
+    [claim?.playerAddress, walletAddress],
   );
 
-  const challenger = (
-    <IdentityBadge
-      customLabel="Challenger"
-      entity={challenge?.challengerAddress}
-      connectedAccount={challenge?.challengerAddress === walletAddress}
-    />
+  const challenger = useMemo(
+    () => (
+      <IdentityBadge
+        customLabel="Challenger"
+        entity={challenge?.challengerAddress}
+        connectedAccount={challenge?.challengerAddress === walletAddress}
+      />
+    ),
+    [challenge?.challengerAddress, walletAddress],
   );
 
-  const finalRuling = (
-    <FinalRulingWrapper>
-      {dispute?.state && (
-        <RulingInfoStyled mode={isRuled ? 'info' : 'warning'}>
-          <FinalRulingStyled>
-            {isRuled ? (
-              'Ruled in favor of'
-            ) : (
-              <>
-                Ruling in progress, please come back later...
-                {networkId === 'gnosis' ? (
-                  <LinkStyled external href={`https://celeste.1hive.org/#/disputes/${dispute.id}`}>
-                    See dispute
-                  </LinkStyled>
-                ) : (
-                  <HelpTooltip
-                    tooltip={`This is a mocked celeste dispute with id ${dispute.id}`}
-                    key={dispute.id}
-                  />
-                )}
-              </>
-            )}
-          </FinalRulingStyled>
-          {dispute.state === ENUM_DISPUTE_STATES.DisputeRuledForChallenger && challenger}
-          {dispute.state === ENUM_DISPUTE_STATES.DisputeRuledForSubmitter && player}
-        </RulingInfoStyled>
-      )}
-    </FinalRulingWrapper>
+  const finalRuling = useMemo(
+    () => (
+      <FinalRulingWrapper>
+        {dispute?.state && (
+          <RulingInfoStyled mode={isRuled ? 'info' : 'warning'}>
+            <FinalRulingStyled>
+              {isRuled ? (
+                'Ruled in favor of'
+              ) : (
+                <>
+                  Ruling in progress, please come back later...
+                  {networkId === 'gnosis' ? (
+                    <LinkStyled
+                      external
+                      href={`https://celeste.1hive.org/#/disputes/${dispute.id}`}
+                    >
+                      See dispute
+                    </LinkStyled>
+                  ) : (
+                    <HelpTooltip
+                      tooltip={`This is a mocked celeste dispute with id ${dispute.id}`}
+                      key={dispute.id}
+                    />
+                  )}
+                </>
+              )}
+            </FinalRulingStyled>
+            {dispute.state === ENUM_DISPUTE_STATES.DisputeRuledForChallenger && challenger}
+            {dispute.state === ENUM_DISPUTE_STATES.DisputeRuledForSubmitter && player}
+          </RulingInfoStyled>
+        )}
+      </FinalRulingWrapper>
+    ),
+    [isRuled, dispute?.state, player, challenger],
   );
 
   return (
@@ -281,7 +288,7 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
           {isRuled && !isStackholder && (
             <OnlyStackholderWarnStyled mode="warning">
               <IconCaution />
-              <span> Only a stackholder of this challenge may resolve it</span>
+              <span>Only a stackholder of this challenge may resolve it</span>
             </OnlyStackholderWarnStyled>
           )}
         </Fragment>,
@@ -290,14 +297,12 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
           icon={<IconFlag />}
           label="Resolve"
           mode="positive"
-          disabled={
-            loading || !walletAddress || !isRuled || claim.state !== ENUM_CLAIM_STATE.Challenged
-          }
+          disabled={!walletAddress || !isRuled || claim.state !== ENUM_CLAIM_STATE.Challenged}
           onClick={resolveChallengeTx}
           title={
             !isRuled
               ? 'Need to be ruled in celeste'
-              : loading || !walletAddress
+              : !walletAddress
               ? 'Not ready ...'
               : 'Publish dispute result'
           }
@@ -307,10 +312,10 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
       isOpen={opened}
     >
       <Outset gu16>
-        {loading ? (
-          <Skeleton />
-        ) : (
-          <>
+        <>
+          {!challenge || !evidence ? (
+            <Skeleton />
+          ) : (
             <Accordion
               items={[
                 [
@@ -325,13 +330,13 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
                     {challenger}
                     <LabelStyled>Challenge reason</LabelStyled>
                   </>,
-                  <TextFieldInput id="challengeReason" value={challenge!.reason} isMarkDown />,
+                  <TextFieldInput id="challengeReason" value={challenge.reason} isMarkDown />,
                 ],
               ]}
             />
-            {finalRuling}
-          </>
-        )}
+          )}
+          {finalRuling}
+        </>
       </Outset>
     </ModalBase>
   );
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index a9075262..7fd96e69 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -64,7 +64,6 @@ export default function ScheduleClaimModal({
   onClose = noop,
 }: Props) {
   const { walletAddress } = useWallet();
-  const [loading, setLoading] = useState(false);
   const [opened, setOpened] = useState(false);
   const [isFormValid, setIsFormValid] = useState(false);
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
@@ -111,7 +110,6 @@ export default function ScheduleClaimModal({
 
   const scheduleClaimTx = async (values: Partial<ClaimModel>) => {
     try {
-      setLoading(true);
       const { governQueueAddress } = getNetwork();
       const scheduleDeposit = (await QuestService.fetchDeposits()).claim;
       await approveTokenTransaction(
@@ -167,10 +165,6 @@ export default function ScheduleClaimModal({
             },
         );
       }
-    } finally {
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
     }
   };
 
@@ -228,7 +222,6 @@ export default function ScheduleClaimModal({
                     id="claimDeposit"
                     label="Claim Deposit"
                     tooltip="This amount will be staked when claiming a bounty. If the claim is challenged and ruled in favor of the challenger, you will lose this deposit."
-                    isLoading={loading}
                     value={claimDeposit}
                     compact
                   />
@@ -236,7 +229,6 @@ export default function ScheduleClaimModal({
                     key="WalletBallance-claimDeposit"
                     askedTokenAmount={claimDeposit}
                     setIsEnoughBalance={setIsEnoughBalance}
-                    isLoading={loading}
                   />
                   <Button
                     key="confirmButton"
@@ -247,7 +239,7 @@ export default function ScheduleClaimModal({
                     form="form-claim"
                     className="m-8"
                     title={
-                      loading || !walletAddress
+                      !walletAddress
                         ? 'Not ready ...'
                         : !isFormValid
                         ? 'Form not valid'
@@ -263,7 +255,6 @@ export default function ScheduleClaimModal({
                   isEdit
                   label="Evidence of completion"
                   tooltip="The necessary evidence that will confirm the completion of the quest. Make sure there is enough evidence as it will be useful if this claim is challenged in the future."
-                  isLoading={loading}
                   value={values.evidence}
                   onChange={handleChange}
                   onBlur={handleBlur}
@@ -280,7 +271,6 @@ export default function ScheduleClaimModal({
                       <AmountFieldInputFormik
                         id="questBounty"
                         label="Available bounty"
-                        isLoading={loading}
                         value={questTotalBounty}
                       />
                     </Outset>
@@ -292,7 +282,6 @@ export default function ScheduleClaimModal({
                         handleBlur={handleBlur}
                         value={values.claimAll}
                         tooltip={`Check this if you want to claim the entire bounty available passed the claim delay of ${DEFAULT_CLAIM_EXECUTION_DELAY_MS}.`}
-                        isLoading={loading}
                         isEdit
                       />
                     </Outset>
@@ -303,7 +292,6 @@ export default function ScheduleClaimModal({
                       isEdit
                       label="Claim amount"
                       tooltip="The expected amount to claim considering the Quest agreement. Check all bounty if you want to claim all available bounty at the moment the claim is executed."
-                      isLoading={loading}
                       value={values.claimAll ? questTotalBounty : values.claimedAmount}
                       error={touched.claimedAmount && (errors.claimedAmount as string)}
                       disabled={values.claimAll}
@@ -315,7 +303,6 @@ export default function ScheduleClaimModal({
                       id="playerAddress"
                       label="Player address"
                       value={values.playerAddress ?? walletAddress}
-                      isLoading={loading}
                       tooltip="Usually is the connected wallet but it can also be set to another address."
                       error={touched.playerAddress && errors.playerAddress}
                       onBlur={handleBlur}
diff --git a/packages/react-app/src/hooks/use-now.hook.ts b/packages/react-app/src/hooks/use-now.hook.ts
new file mode 100644
index 00000000..ce70a505
--- /dev/null
+++ b/packages/react-app/src/hooks/use-now.hook.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export const useNow = (intervalMs: number = 1000) => {
+  const [now, setNow] = useState<number>(Date.now());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setNow(Date.now());
+    }, intervalMs);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return now;
+};
diff --git a/packages/react-app/src/hooks/use-now.hooks.ts b/packages/react-app/src/hooks/use-now.hooks.ts
deleted file mode 100644
index 92dde4ce..00000000
--- a/packages/react-app/src/hooks/use-now.hooks.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-export const useNow = (isRunning = true) => {
-  const [now, setNow] = React.useState(Date.now());
-
-  React.useEffect(() => {
-    let id: any;
-    if (isRunning) {
-      id = setInterval(() => setNow(Date.now()), 11);
-    }
-    return () => id && clearInterval(id);
-  }, [isRunning]);
-
-  return now;
-};

From 3ded7ba6ac7d44229579236d15bf695d28dbd2c8 Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Thu, 26 May 2022 23:44:50 -0400
Subject: [PATCH 5/6] Cleanup

---
 packages/react-app/src/components/claim-list.tsx              | 2 +-
 packages/react-app/src/components/claim.tsx                   | 4 +++-
 .../react-app/src/components/modals/execute-claim-modal.tsx   | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx
index 24bfcc15..3ef2e1e0 100644
--- a/packages/react-app/src/components/claim-list.tsx
+++ b/packages/react-app/src/components/claim-list.tsx
@@ -110,7 +110,7 @@ export default function ClaimList({ questData, challengeDeposit, isLoading = fal
       items.unshift(skeletonClaim);
     }
     return items;
-  }, [claims, loadingClaim]);
+  }, [claims, loadingClaim, questData.bounty, isLoading, challengeDeposit]);
 
   useEffect(() => {
     if (questData.address) {
diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index d3297dda..b5e5e93d 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -88,7 +88,9 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
             setState(ENUM_CLAIM_STATE.Executed);
             break;
           case 'ClaimChallenge':
-            setState(ENUM_CLAIM_STATE.Challenged);
+            setTimeout(() => {
+              setState(ENUM_CLAIM_STATE.Challenged);
+            }, 1000); // Wait for subgrapph to index challenge event
             break;
           default:
         }
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index 9065b3f9..c432abc6 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -132,14 +132,14 @@ export default function ExecuteClaimModal({
                 !claimable
                   ? 'Wait for the delay period to end before claiming...'
                   : questTotalBounty &&
-                    claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount
+                    claim.claimedAmount.parsedAmount > questTotalBounty.parsedAmount
                   ? 'Not enough funds in Quest to claim'
                   : 'Open quest claim'
               }
               disabled={
                 !questTotalBounty ||
                 !walletAddress ||
-                claim.claimedAmount.parsedAmount >= questTotalBounty.parsedAmount ||
+                claim.claimedAmount.parsedAmount > questTotalBounty.parsedAmount ||
                 !claimable
               }
             />

From cd5f7f23944c15038cd093dafb689e20891de910 Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Fri, 27 May 2022 12:03:11 -0400
Subject: [PATCH 6/6] Hide buttons when wrong network

---
 packages/react-app/src/components/claim.tsx   |  4 +--
 .../react-app/src/components/dashboard.tsx    |  4 +--
 packages/react-app/src/components/footer.tsx  |  4 +--
 .../src/components/header/header-menu.tsx     |  4 +--
 .../src/components/modals/challenge-modal.tsx |  9 +++----
 .../components/modals/create-quest-modal.tsx  |  6 ++---
 .../components/modals/execute-claim-modal.tsx | 25 +++----------------
 .../src/components/modals/fund-modal.tsx      |  4 +--
 .../components/modals/reclaim-funds-modal.tsx |  3 +--
 .../modals/schedule-claim-modal.tsx           |  8 +-----
 packages/react-app/src/components/quest.tsx   |  4 +--
 packages/react-app/src/components/sidebar.tsx | 15 -----------
 .../react-app/src/contexts/wallet.context.tsx | 11 ++++++--
 13 files changed, 33 insertions(+), 68 deletions(-)
 delete mode 100644 packages/react-app/src/components/sidebar.tsx

diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index b5e5e93d..e2c3d494 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -39,7 +39,7 @@ type Props = {
 };
 
 export default function Claim({ claim, isLoading, challengeDeposit, questData }: Props) {
-  const { walletAddress } = useWallet();
+  const { walletAddress, walletConnected } = useWallet();
   const { transaction } = useTransactionContext();
   const [state, setState] = useState(claim.state);
   const { below } = useViewport();
@@ -171,7 +171,7 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
               isLoading={isLoading || state === ENUM_CLAIM_STATE.None}
             />
           )}
-          {walletAddress && state && actionButton}
+          {walletConnected && state && actionButton}
         </ChildSpacer>
       </Outset>
     </div>
diff --git a/packages/react-app/src/components/dashboard.tsx b/packages/react-app/src/components/dashboard.tsx
index cf30a3e2..0987b78f 100644
--- a/packages/react-app/src/components/dashboard.tsx
+++ b/packages/react-app/src/components/dashboard.tsx
@@ -47,7 +47,7 @@ const LabelStyled = styled.div`
 export default function Dashboard() {
   const theme = useTheme();
   const [dashboardModel, setDashboardModel] = useState<DashboardModel>();
-  const { walletAddress } = useWallet();
+  const { walletConnected } = useWallet();
 
   useEffect(() => {
     let isSubscribed = true;
@@ -84,7 +84,7 @@ export default function Dashboard() {
           <TextStyled theme={theme}>{dashboardModel?.questCount.toLocaleString()}</TextStyled>
         </FieldInput>
         <SpacerStyled>
-          {walletAddress && <QuestModal questMode={ENUM_QUEST_VIEW_MODE.Create} />}
+          {walletConnected && <QuestModal questMode={ENUM_QUEST_VIEW_MODE.Create} />}
         </SpacerStyled>
       </ChildSpacer>
     </BoxStyled>
diff --git a/packages/react-app/src/components/footer.tsx b/packages/react-app/src/components/footer.tsx
index feb8d4a8..e5c78663 100644
--- a/packages/react-app/src/components/footer.tsx
+++ b/packages/react-app/src/components/footer.tsx
@@ -76,7 +76,7 @@ const IconStyled = styled.div`
 export default function footer() {
   const theme = useTheme();
   const year = new Date().getFullYear();
-  const { walletAddress } = useWallet();
+  const { walletConnected } = useWallet();
   const { networkId } = getNetwork();
 
   return (
@@ -101,7 +101,7 @@ export default function footer() {
           <FooterNavItemStyled href="#" external={false}>
             Quest List
           </FooterNavItemStyled>
-          {walletAddress && (
+          {walletConnected && (
             <QuestModal questMode={ENUM_QUEST_VIEW_MODE.Create} buttonMode="link" />
           )}
         </FooterColumnStyled>
diff --git a/packages/react-app/src/components/header/header-menu.tsx b/packages/react-app/src/components/header/header-menu.tsx
index 0f84fbda..1b602ba5 100644
--- a/packages/react-app/src/components/header/header-menu.tsx
+++ b/packages/react-app/src/components/header/header-menu.tsx
@@ -30,7 +30,7 @@ type Props = {
 
 export default function HeaderMenu({ below }: Props) {
   const theme = useTheme();
-  const { walletAddress } = useWallet();
+  const { walletConnected } = useWallet();
 
   return (
     <HeaderNavStyled>
@@ -53,7 +53,7 @@ export default function HeaderMenu({ below }: Props) {
             <IconExternal />
           </HeaderNavItemStyled>
 
-          {walletAddress && (
+          {walletConnected && (
             <QuestModal questMode={ENUM_QUEST_VIEW_MODE.Create} buttonMode="normal" />
           )}
         </>
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 66389a03..b49276f5 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -68,7 +68,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
       if (feeAmount && isMountedRef.current) setChallengeFee(feeAmount);
     };
     fetchFee();
-  }, [walletAddress]);
+  }, []);
 
   useEffect(() => {
     if (challengeFee)
@@ -188,8 +188,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
             onClick={() => setOpened(true)}
             label="Challenge"
             mode="negative"
-            title={"Open challenge for this quest's claim"}
-            disabled={!walletAddress}
+            title="Open challenge for this quest's claim"
           />
         </OpenButtonWrapperStyled>
       }
@@ -237,8 +236,8 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           mode="negative"
           type="submit"
           form="form-challenge"
-          disabled={!walletAddress || !isEnoughBalance || !isFormValid}
-          title={!walletAddress ? 'Not ready ...' : !isFormValid ? 'Form not valid' : 'Challenge'}
+          disabled={!isEnoughBalance || !isFormValid}
+          title={!isFormValid ? 'Form not valid' : 'Challenge'}
           className="m-8"
         />,
       ]}
diff --git a/packages/react-app/src/components/modals/create-quest-modal.tsx b/packages/react-app/src/components/modals/create-quest-modal.tsx
index 18f18d9e..ac7bb46e 100644
--- a/packages/react-app/src/components/modals/create-quest-modal.tsx
+++ b/packages/react-app/src/components/modals/create-quest-modal.tsx
@@ -332,15 +332,13 @@ export default function QuestModal({
                       form="form-quest"
                       className="m-8"
                       title={
-                        !walletAddress || !questDeposit?.token
+                        !questDeposit?.token
                           ? 'Not ready ...'
                           : !isFormValid
                           ? 'Form not valid'
                           : 'Schedule claim'
                       }
-                      disabled={
-                        !walletAddress || !questDeposit?.token || !isEnoughBalance || !isFormValid
-                      }
+                      disabled={!questDeposit?.token || !isEnoughBalance || !isFormValid}
                     />
                   </>
                 }
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index c432abc6..4123dd49 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -11,10 +11,9 @@ import { TokenAmountModel } from 'src/models/token-amount.model';
 import { useWallet } from 'src/contexts/wallet.context';
 import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { compareCaseInsensitive } from 'src/utils/string.util';
-import { useIsMountedRef } from 'src/hooks/use-mounted.hook';
 import { TransactionModel } from 'src/models/transaction.model';
 import * as QuestService from '../../services/quest.service';
-import { AmountFieldInputFormik } from '../field-input/amount-field-input';
+import AmountFieldInput from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
 import ModalBase, { ModalCallback } from './modal-base';
 import { AddressFieldInput } from '../field-input/address-field-input';
@@ -55,12 +54,10 @@ export default function ExecuteClaimModal({
   claimable,
 }: Props) {
   const [opened, setOpened] = useState(false);
-  const [loading, setLoading] = useState(false);
   const [amount, setAmount] = useState<TokenAmountModel>();
   const { setTransaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('execute-claim-modal'), []);
-  const isMountedRef = useIsMountedRef();
 
   useEffect(() => {
     if (questTotalBounty) {
@@ -76,7 +73,6 @@ export default function ExecuteClaimModal({
 
   const claimTx = async () => {
     try {
-      setLoading(true);
       const txPayload = {
         modalId,
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimExecuting,
@@ -109,10 +105,6 @@ export default function ExecuteClaimModal({
             message: computeTransactionErrorMessage(e),
           },
       );
-    } finally {
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
     }
   };
 
@@ -138,7 +130,6 @@ export default function ExecuteClaimModal({
               }
               disabled={
                 !questTotalBounty ||
-                !walletAddress ||
                 claim.claimedAmount.parsedAmount > questTotalBounty.parsedAmount ||
                 !claimable
               }
@@ -150,10 +141,8 @@ export default function ExecuteClaimModal({
             onClick={claimTx}
             icon={<IconCoin />}
             label="Claim"
-            disabled={loading || !walletAddress || claim.state === ENUM_CLAIM_STATE.Challenged}
-            title={
-              loading || !walletAddress ? 'Not ready ...' : 'Trigger claim operation in the chain'
-            }
+            disabled={claim.state === ENUM_CLAIM_STATE.Challenged}
+            title="Trigger claim operation in the chain"
             mode="positive"
           />
         }
@@ -162,16 +151,10 @@ export default function ExecuteClaimModal({
         size="small"
       >
         <Outset gu16>
-          <AmountFieldInputFormik
-            id="bounty"
-            label="Claim amount"
-            isLoading={loading}
-            value={amount}
-          />
+          <AmountFieldInput id="bounty" label="Claim amount" value={amount} />
           <AddressFieldInput
             id="playerAddress"
             label="will be sent to"
-            isLoading={loading}
             value={claim.playerAddress}
           />
           {!compareCaseInsensitive(claim.playerAddress, walletAddress) && (
diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
index b4e7bd1b..799a6628 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -108,8 +108,8 @@ export default function FundModal({ quest, onClose = noop }: Props) {
               form="form-fund"
               label="Fund"
               mode="strong"
-              title={!walletAddress ? 'Not ready ...' : !isFormValid ? 'Form not valid' : 'Fund'}
-              disabled={!walletAddress || !isEnoughBalance || !isFormValid}
+              title={!isFormValid ? 'Form not valid' : 'Fund'}
+              disabled={!isEnoughBalance || !isFormValid}
             />,
           ]}
           onClose={closeModal}
diff --git a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
index 429775d3..0c6e245a 100644
--- a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
+++ b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
@@ -139,8 +139,7 @@ export default function ReclaimFundsModal({
             icon={<IconCoin />}
             label="Reclaim"
             mode="strong"
-            title={!walletAddress ? 'Not ready ...' : 'Reclaim remaining funds and deposit'}
-            disabled={!walletAddress}
+            title="Reclaim remaining funds and deposit"
           />
         }
         onClose={closeModal}
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index 7fd96e69..45ed52c8 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -238,13 +238,7 @@ export default function ScheduleClaimModal({
                     type="submit"
                     form="form-claim"
                     className="m-8"
-                    title={
-                      !walletAddress
-                        ? 'Not ready ...'
-                        : !isFormValid
-                        ? 'Form not valid'
-                        : 'Schedule claim'
-                    }
+                    title={!isFormValid ? 'Form not valid' : 'Schedule claim'}
                     disabled={!isEnoughBalance}
                   />
                 </>
diff --git a/packages/react-app/src/components/quest.tsx b/packages/react-app/src/components/quest.tsx
index 3dc0a344..b6710140 100644
--- a/packages/react-app/src/components/quest.tsx
+++ b/packages/react-app/src/components/quest.tsx
@@ -114,7 +114,7 @@ export default function Quest({
   isLoading = false,
   isSummary = false,
 }: Props) {
-  const { walletAddress } = useWallet();
+  const { walletConnected } = useWallet();
   const history = useHistory();
   const [bounty, setBounty] = useState<TokenAmountModel | undefined | null>(questData?.bounty);
   const [highlight, setHighlight] = useState<boolean>(true);
@@ -329,7 +329,7 @@ export default function Quest({
               isLoading={isLoading}
             />
           )}
-          {!isSummary && questData.address && walletAddress && (
+          {!isSummary && questData.address && walletConnected && (
             <QuestFooterStyled>
               {questData?.state === ENUM_QUEST_STATE.Active ? (
                 <>
diff --git a/packages/react-app/src/components/sidebar.tsx b/packages/react-app/src/components/sidebar.tsx
deleted file mode 100644
index 493ee796..00000000
--- a/packages/react-app/src/components/sidebar.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ENUM_QUEST_VIEW_MODE } from '../constants';
-import { useWallet } from '../contexts/wallet.context';
-import QuestModal from './modals/create-quest-modal';
-import { Filter } from './filter';
-import { Outset } from './utils/spacer-util';
-
-export default function Sidebar() {
-  const { walletAddress } = useWallet();
-  return (
-    <Outset horizontal gu16 className="pb-0 pt-24">
-      <Filter />
-      {walletAddress && <QuestModal questMode={ENUM_QUEST_VIEW_MODE.Create} />}
-    </Outset>
-  );
-}
diff --git a/packages/react-app/src/contexts/wallet.context.tsx b/packages/react-app/src/contexts/wallet.context.tsx
index b621ecd1..b67704a8 100644
--- a/packages/react-app/src/contexts/wallet.context.tsx
+++ b/packages/react-app/src/contexts/wallet.context.tsx
@@ -6,6 +6,7 @@ import { getNetwork } from '../networks';
 import { getDefaultProvider, getUseWalletConnectors } from '../utils/web3.utils';
 
 export type WalletContextModel = {
+  walletConnected: boolean;
   walletAddress: string;
   deactivateWallet: Function;
   activateWallet: Function;
@@ -30,6 +31,7 @@ function WalletAugmented({ children }: Props) {
   const { ethereum } = wallet;
   const [activationError, setActivationError] = useState<{ name: string; message: string }>();
   const [activatingId, setActivating] = useState<string>();
+  const [isConnected, setIsConnected] = useState(false);
 
   useEffect(() => {
     const lastWalletConnected = localStorage.getItem('LAST_WALLET_CONNECTOR');
@@ -39,6 +41,7 @@ function WalletAugmented({ children }: Props) {
   }, []);
 
   const ethers = useMemo(() => {
+    setIsConnected(false);
     const { chainId, networkId, name } = getNetwork();
 
     if (ethereum) {
@@ -63,6 +66,8 @@ function WalletAugmented({ children }: Props) {
       return getDefaultProvider();
     }
 
+    setIsConnected(true);
+
     const ensRegistry = undefined; // network?.ensRegistry;
     return new EthersProviders.Web3Provider(ethereum, {
       name: networkId,
@@ -76,10 +81,11 @@ function WalletAugmented({ children }: Props) {
     await wallet.connect(id);
   };
 
-  const handleDeconnect = () => {
+  const handleDisconnect = () => {
     setActivating(undefined);
     wallet.reset();
     localStorage.removeItem('LAST_WALLET_CONNECTOR');
+    setIsConnected(false);
   };
   const contextValue = useMemo(
     () => ({
@@ -88,9 +94,10 @@ function WalletAugmented({ children }: Props) {
       activationError,
       walletAddress: wallet.account,
       activateWallet: handleConnect,
-      deactivateWallet: handleDeconnect,
+      deactivateWallet: handleDisconnect,
       activatedId: wallet.connector,
       activatingId,
+      walletConnected: isConnected,
     }),
     [wallet, ethers],
   );