From 75694421cfa7108fa7c6498aff3fbe2ec8182ca7 Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Sat, 21 May 2022 13:01:28 -0400
Subject: [PATCH 1/6] Fix submit buttons hidden when tx pending

---
 packages/react-app/src/components/claim.tsx   | 18 ++++++----------
 .../field-input/amount-field-input.tsx        | 12 +++--------
 .../src/components/modals/challenge-modal.tsx | 21 +++++++++++++++++--
 .../components/modals/execute-claim-modal.tsx | 13 ++++++++++--
 .../src/components/modals/fund-modal.tsx      | 17 ++++++++++++---
 .../src/components/modals/modal-base.tsx      |  2 +-
 .../src/components/modals/quest-modal.tsx     | 18 ++++++++++++++--
 .../components/modals/reclaim-funds-modal.tsx | 13 +++++++++---
 .../modals/resolve-challenge-modal.tsx        | 19 ++++++++++++++---
 .../modals/schedule-claim-modal.tsx           | 17 ++++++++++++---
 10 files changed, 110 insertions(+), 40 deletions(-)

diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index 947d939b..48a05ec3 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -20,13 +20,10 @@ import { Outset, ChildSpacer } from './utils/spacer-util';
 
 const AddressWrapperStyled = styled.div<{ isSmallScreen: boolean }>`
   ${({ isSmallScreen }) =>
-    isSmallScreen
-      ? css`
-          max-width: 200px;
-        `
-      : css`
-          margin-top: 8px;
-        `}
+    isSmallScreen &&
+    css`
+      max-width: 200px;
+    `}
 `;
 
 // #endregion
@@ -132,11 +129,7 @@ export default function Claim({
           buttonEnd
           vertical={below('medium')}
         >
-          <FieldInput
-            label="Status"
-            isLoading={isLoading || state === ENUM_CLAIM_STATE.None}
-            compact
-          >
+          <FieldInput label="Status" isLoading={isLoading || state === ENUM_CLAIM_STATE.None}>
             <StateTag state={state ?? ''} className="pl-0" />
           </FieldInput>
           <AddressWrapperStyled isSmallScreen={below('medium')}>
@@ -160,6 +153,7 @@ export default function Claim({
               label="Claimed amount"
               value={claim.claimedAmount}
               isLoading={isLoading || state === ENUM_CLAIM_STATE.None}
+              compact={false}
             />
           )}
           {walletAddress && actionButton}
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 7f002d78..c08f2877 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
@@ -293,13 +293,7 @@ function AmountFieldInput({
     else onChange(nextValue);
   };
   const amountField = (isEdit || !tagOnly) && (
-    <FieldInput
-      id={amountInputId}
-      key={amountInputId}
-      label={amountLabel}
-      wide={wide}
-      compact={compact}
-    >
+    <FieldInput id={amountInputId} key={amountInputId} label={amountLabel} wide={wide} compact>
       <AmountTokenWrapperStyled isEdit={isEdit} wide={wide}>
         {amount !== undefined &&
           (isEdit ? (
@@ -330,7 +324,7 @@ function AmountFieldInput({
       key={tokenInputId}
       label={tokenLabel}
       wide={wide}
-      compact={compact}
+      compact
       tooltip="Select a token between the list or paste the token address"
     >
       {!isEdit || token?.token ? (
@@ -383,7 +377,7 @@ function AmountFieldInput({
       tooltip={tooltip}
       isLoading={isLoading}
       wide={wide}
-      compact
+      compact={compact}
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}
       error={error}
       className={!isEdit ? 'fit-content' : ''}
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index cf5a9855..631c06f5 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable no-undef */
 import { Button, useToast, IconFlag, Timer } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
@@ -57,7 +58,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 } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const formRef = useRef<HTMLFormElement>(null);
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('challenge-modal'), []);
@@ -281,7 +282,23 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           type="submit"
           form="form-challenge"
           disabled={
-            loading || !walletAddress || !isEnoughBalance || challengeTimeout || !isFormValid
+            loading ||
+            !walletAddress ||
+            !isEnoughBalance ||
+            challengeTimeout ||
+            !isFormValid ||
+            transaction
+          }
+          title={
+            challengeTimeout
+              ? 'Challenge timeout'
+              : 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/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index 6312a4c4..fdd0fcbc 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Button, IconCoin, Timer } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -43,7 +44,7 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
   const [amount, setAmount] = useState<TokenAmountModel>();
   const [scheduleTimeout, setScheduleTimeout] = useState<boolean>();
   const [buttonLabel, setButtonLabel] = useState<ReactNode>('Claim');
-  const { setTransaction } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('execute-claim-modal'), []);
 
@@ -171,9 +172,17 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
             label={buttonLabel}
             disabled={
               loading ||
+              !walletAddress ||
               !scheduleTimeout ||
               claim.state === ENUM_CLAIM_STATE.Challenged ||
-              !walletAddress
+              transaction
+            }
+            title={
+              loading || !walletAddress || !scheduleTimeout
+                ? '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 ae3941a1..87b13546 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Button } from '@1hive/1hive-ui';
 import { Form, Formik } from 'formik';
 import { noop, uniqueId } from 'lodash-es';
@@ -37,7 +38,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 } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const modalId = useMemo(() => uniqueId('fund-modal'), []);
 
@@ -111,8 +112,18 @@ export default function FundModal({ quest, onClose = noop }: Props) {
               form="form-fund"
               label="Fund"
               mode="strong"
-              title={loading ? 'Loading ...' : 'Fund'}
-              disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
+              title={
+                loading || !walletAddress
+                  ? 'Not ready ...'
+                  : !isFormValid
+                  ? 'Form not valid'
+                  : transaction
+                  ? 'Wait for previous transaction to complete'
+                  : 'Fund'
+              }
+              disabled={
+                loading || !walletAddress || !isEnoughBalance || !isFormValid || transaction
+              }
             />,
           ]}
           onClose={closeModal}
diff --git a/packages/react-app/src/components/modals/modal-base.tsx b/packages/react-app/src/components/modals/modal-base.tsx
index 426bceda..fbcbf4a6 100644
--- a/packages/react-app/src/components/modals/modal-base.tsx
+++ b/packages/react-app/src/components/modals/modal-base.tsx
@@ -141,7 +141,7 @@ export default function ModalBase({
         {(buttons || txFailed) && (
           <ModalFooterStyled>
             <ChildSpacer justify="start" align="center" buttonEnd={!txFailed}>
-              {transaction
+              {transaction && transaction?.modalId === id
                 ? txFailed && <Button onClick={onBackButtonClick}>Back</Button>
                 : buttons}
             </ChildSpacer>
diff --git a/packages/react-app/src/components/modals/quest-modal.tsx b/packages/react-app/src/components/modals/quest-modal.tsx
index 896d5b46..69e29fb2 100644
--- a/packages/react-app/src/components/modals/quest-modal.tsx
+++ b/packages/react-app/src/components/modals/quest-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Button, IconPlus, useTheme } from '@1hive/1hive-ui';
 import { debounce, noop, uniqueId } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -79,7 +80,7 @@ export default function QuestModal({
   const { questFactoryAddress } = getNetwork();
   const formRef = useRef<HTMLFormElement>(null);
   const [isFormValid, setIsFormValid] = useState(false);
-  const { setTransaction } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const [questDataState, setQuestDataState] = useState<QuestModel>(questData);
   const [questDeposit, setQuestDeposit] = useState<TokenAmountModel | null>();
@@ -334,8 +335,21 @@ export default function QuestModal({
                       type="submit"
                       form="form-quest"
                       className="m-8"
+                      title={
+                        !walletAddress || !questDeposit?.token
+                          ? 'Not ready ...'
+                          : !isFormValid
+                          ? 'Form not valid'
+                          : transaction
+                          ? 'Wait for previous transaction to complete'
+                          : 'Schedule claim'
+                      }
                       disabled={
-                        !walletAddress || !isEnoughBalance || !isFormValid || !questDeposit?.token
+                        !walletAddress ||
+                        !questDeposit?.token ||
+                        !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 3a7130af..0fff587b 100644
--- a/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
+++ b/packages/react-app/src/components/modals/reclaim-funds-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Button, IconCoin } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
@@ -50,7 +51,7 @@ export default function ReclaimFundsModal({
 }: Props) {
   const [opened, setOpened] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { setTransaction } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const { walletAddress } = useWallet();
   const [depositTokenAmount, setDepositTokenAmount] = useState<TokenAmountModel>();
   const modalId = useMemo(() => uniqueId('reclaim-funds-modal'), []);
@@ -150,8 +151,14 @@ export default function ReclaimFundsModal({
             icon={<IconCoin />}
             label="Reclaim"
             mode="strong"
-            title={loading ? 'Loading ...' : 'Reclaim'}
-            disabled={loading || !walletAddress}
+            title={
+              loading || !walletAddress
+                ? 'Not ready ...'
+                : transaction
+                ? 'Wait for previous transaction to complete'
+                : 'Reclaim remaining funds and deposit'
+            }
+            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 eca42bb7..8586fd85 100644
--- a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import {
   Button,
   IconFlag,
@@ -98,7 +99,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 } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const modalId = useMemo(() => uniqueId('resolve-challenge-modal'), []);
 
   useEffect(() => {
@@ -274,10 +275,22 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
           label="Resolve"
           mode="positive"
           disabled={
-            loading || !walletAddress || !isRuled || claim.state !== ENUM_CLAIM_STATE.Challenged
+            loading ||
+            !walletAddress ||
+            !isRuled ||
+            claim.state !== ENUM_CLAIM_STATE.Challenged ||
+            transaction
           }
           onClick={resolveChallengeTx}
-          title={isRuled ? 'Publish dispute result' : 'Need to be ruled in celeste'}
+          title={
+            !isRuled
+              ? 'Need to be ruled in celeste'
+              : loading || !walletAddress
+              ? 'Not ready ...'
+              : transaction
+              ? 'Wait for previous transaction to complete'
+              : 'Publish dispute result'
+          }
         />,
       ]}
       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 a25594de..ab075ed4 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Button } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { useState, useRef, useMemo, useEffect } from 'react';
@@ -66,7 +67,7 @@ export default function ScheduleClaimModal({
   const [isFormValid, setIsFormValid] = useState(false);
   const [isEnoughBalance, setIsEnoughBalance] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
-  const { setTransaction } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const modalId = useMemo(() => uniqueId('schedule-claim-modal'), []);
   let mounted = true;
 
@@ -256,8 +257,18 @@ export default function ScheduleClaimModal({
                     type="submit"
                     form="form-claim"
                     className="m-8"
-                    title="Schedule claim"
-                    disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
+                    title={
+                      loading || !walletAddress
+                        ? 'Not ready ...'
+                        : !isFormValid
+                        ? 'Form not valid'
+                        : transaction
+                        ? 'Wait for previous transaction to complete'
+                        : 'Schedule claim'
+                    }
+                    disabled={
+                      loading || !walletAddress || !isEnoughBalance || !isFormValid || transaction
+                    }
                   />
                 </>
               }

From 40ad4eb76c0b545b661a703689f3dc35d0ca1def Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Sun, 22 May 2022 15:31:39 -0400
Subject: [PATCH 2/6] Clenaup PR

---
 packages/react-app/src/components/claim.tsx                  | 1 -
 packages/react-app/src/components/modals/challenge-modal.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
index 48a05ec3..a7b9411a 100644
--- a/packages/react-app/src/components/claim.tsx
+++ b/packages/react-app/src/components/claim.tsx
@@ -153,7 +153,6 @@ export default function Claim({
               label="Claimed amount"
               value={claim.claimedAmount}
               isLoading={isLoading || state === ENUM_CLAIM_STATE.None}
-              compact={false}
             />
           )}
           {walletAddress && actionButton}
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 631c06f5..bcfee623 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable no-nested-ternary */
-/* eslint-disable no-undef */
 import { Button, useToast, IconFlag, Timer } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { useState, useRef, useEffect, useMemo } from 'react';

From fd65f694cb8f4b2699a62ffb8af37eb6aebd7bb4 Mon Sep 17 00:00:00 2001
From: Alex <alex0394@hotmail.com>
Date: Sun, 22 May 2022 16:49:46 -0400
Subject: [PATCH 3/6] added ellipsis for amount in create quest

---
 .../src/components/field-input/amount-field-input.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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 7f002d78..da4dd9a4 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
@@ -74,6 +74,13 @@ const TokenAmountButtonStyled = styled(Button)<{ compact?: boolean }>`
   min-width: 0;
 `;
 
+const AmountEllipsisWrapperStyled = styled.div`
+  overflow: hidden;
+  max-width: ${GUpx(9)};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 // #endregion
 
 type TokenBadgeProp = {
@@ -318,7 +325,9 @@ function AmountFieldInput({
               disabled={!token ? true : disabled}
             />
           ) : (
-            Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(amount)
+            <AmountEllipsisWrapperStyled>
+              {Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(amount)}
+            </AmountEllipsisWrapperStyled>
           ))}
       </AmountTokenWrapperStyled>
     </FieldInput>

From 21b8c784e7b777db5e1aa882b9e4a2e70ab7016c Mon Sep 17 00:00:00 2001
From: alexchan0394 <47338497+alexchan0394@users.noreply.github.com>
Date: Sun, 22 May 2022 17:54:55 -0400
Subject: [PATCH 4/6] Update
 packages/react-app/src/components/field-input/amount-field-input.tsx

need to add import { ConditionalWrapper } from '../utils/util';

Co-authored-by: Corantin <corantin.noll@gmail.com>
---
 .../components/field-input/amount-field-input.tsx   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

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 da4dd9a4..bc1ae3d9 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
@@ -325,7 +325,18 @@ function AmountFieldInput({
               disabled={!token ? true : disabled}
             />
           ) : (
-            <AmountEllipsisWrapperStyled>
+            <ConditionalWrapper
+              condition={compact}
+              wrapper={(children) => (
+                <AmountEllipsisWrapperStyled title={children?.toString()}>
+                  {children}
+                </AmountEllipsisWrapperStyled>
+              )}
+            >
+              {Intl.NumberFormat('en-US', { maximumFractionDigits: 4, useGrouping: true }).format(
+                amount,
+              )}
+            </ConditionalWrapper>
               {Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(amount)}
             </AmountEllipsisWrapperStyled>
           ))}

From f4ffb3936bf668e392af9c31cca6403a7411eac4 Mon Sep 17 00:00:00 2001
From: Alex <alex0394@hotmail.com>
Date: Sun, 22 May 2022 17:58:32 -0400
Subject: [PATCH 5/6] added import for ConditionalWrapper and changed to
 GUpx(15)

---
 .../src/components/field-input/amount-field-input.tsx        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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 bc1ae3d9..82df4147 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
@@ -17,6 +17,7 @@ import styled from 'styled-components';
 import { useCopyToClipboard } from 'src/hooks/use-copy-to-clipboard.hook';
 import { NETWORK_TOKENS } from 'src/constants';
 import { FieldInput } from './field-input';
+import { ConditionalWrapper } from '../utils/util';
 
 // #region StyledComponents
 
@@ -76,7 +77,7 @@ const TokenAmountButtonStyled = styled(Button)<{ compact?: boolean }>`
 
 const AmountEllipsisWrapperStyled = styled.div`
   overflow: hidden;
-  max-width: ${GUpx(9)};
+  max-width: ${GUpx(15)};
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
@@ -337,8 +338,6 @@ function AmountFieldInput({
                 amount,
               )}
             </ConditionalWrapper>
-              {Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(amount)}
-            </AmountEllipsisWrapperStyled>
           ))}
       </AmountTokenWrapperStyled>
     </FieldInput>

From d6dee35cd69873776a69218d63913dc99bb8bde9 Mon Sep 17 00:00:00 2001
From: Corantin Noll <corantin.noll@gmail.com>
Date: Mon, 23 May 2022 16:41:15 -0400
Subject: [PATCH 6/6] Hot fix json rpc

---
 packages/react-app/src/contexts/wallet.context.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-app/src/contexts/wallet.context.tsx b/packages/react-app/src/contexts/wallet.context.tsx
index 625cfe2e..b621ecd1 100644
--- a/packages/react-app/src/contexts/wallet.context.tsx
+++ b/packages/react-app/src/contexts/wallet.context.tsx
@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { getProviderFromUseWalletId } from 'src/ethereum-providers';
 import { useWallet, UseWalletProvider } from 'use-wallet';
 import { getNetwork } from '../networks';
-import { getUseWalletConnectors } from '../utils/web3.utils';
+import { getDefaultProvider, getUseWalletConnectors } from '../utils/web3.utils';
 
 export type WalletContextModel = {
   walletAddress: string;
@@ -54,13 +54,13 @@ function WalletAugmented({ children }: Props) {
         name: 'Wrong Network',
         message: `Please select the ${name} network in your wallet (${connectorInfo?.name}) and try again.`,
       });
-      return null;
+      return getDefaultProvider();
     }
 
     setActivationError(undefined);
 
     if (!ethereum) {
-      return new EthersProviders.JsonRpcProvider(undefined, chainId);
+      return getDefaultProvider();
     }
 
     const ensRegistry = undefined; // network?.ensRegistry;