Dev

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')}>

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
 
@@ -74,6 +75,13 @@ const TokenAmountButtonStyled = styled(Button)<{ compact?: boolean }>`
   min-width: 0;
 `;
 
+const AmountEllipsisWrapperStyled = styled.div`
+  overflow: hidden;
+  max-width: ${GUpx(15)};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 // #endregion
 
 type TokenBadgeProp = {
@@ -293,13 +301,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 ? (
@@ -318,7 +320,18 @@ function AmountFieldInput({
               disabled={!token ? true : disabled}
             />
           ) : (
-            Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(amount)
+            <ConditionalWrapper
+              condition={compact}
+              wrapper={(children) => (
+                <AmountEllipsisWrapperStyled title={children?.toString()}>
+                  {children}
+                </AmountEllipsisWrapperStyled>
+              )}
+            >
+              {Intl.NumberFormat('en-US', { maximumFractionDigits: 4, useGrouping: true }).format(
+                amount,
+              )}
+            </ConditionalWrapper>
           ))}
       </AmountTokenWrapperStyled>
     </FieldInput>
@@ -330,7 +343,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 +396,7 @@ function AmountFieldInput({
       tooltip={tooltip}
       isLoading={isLoading}
       wide={wide}
-      compact
+      compact={compact}
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}
       error={error}
       className={!isEdit ? 'fit-content' : ''}

packages/react-app/src/components/modals/challenge-modal.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+/* eslint-disable no-nested-ternary */
 import { Button, useToast, IconFlag, Timer } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { useState, useRef, useEffect, useMemo } from 'react';
@@ -57,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 } = useTransactionContext();
+  const { setTransaction, transaction } = useTransactionContext();
   const formRef = useRef<HTMLFormElement>(null);
   const { walletAddress } = useWallet();
   const modalId = useMemo(() => uniqueId('challenge-modal'), []);
@@ -281,7 +281,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"
         />,

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"
           />

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}

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>

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
                       }
                     />
                   </>

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}

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}

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
+                    }
                   />
                 </>
               }

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;