diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx index 947d939b..a7b9411a 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')} > - + 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..366f12ed 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 @@ -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) && ( - + {amount !== undefined && (isEdit ? ( @@ -318,7 +320,18 @@ function AmountFieldInput({ disabled={!token ? true : disabled} /> ) : ( - Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(amount) + ( + + {children} + + )} + > + {Intl.NumberFormat('en-US', { maximumFractionDigits: 4, useGrouping: true }).format( + amount, + )} + ))} @@ -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' : ''} diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx index cf5a9855..bcfee623 100644 --- a/packages/react-app/src/components/modals/challenge-modal.tsx +++ b/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(); const [challengeFee, setChallengeFee] = useState(undefined); const [isFormValid, setIsFormValid] = useState(false); - const { setTransaction } = useTransactionContext(); + const { setTransaction, transaction } = useTransactionContext(); const formRef = useRef(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" />, 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(); const [scheduleTimeout, setScheduleTimeout] = useState(); const [buttonLabel, setButtonLabel] = useState('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(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) && ( - {transaction + {transaction && transaction?.modalId === id ? txFailed && : buttons} 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(null); const [isFormValid, setIsFormValid] = useState(false); - const { setTransaction } = useTransactionContext(); + const { setTransaction, transaction } = useTransactionContext(); const [isEnoughBalance, setIsEnoughBalance] = useState(false); const [questDataState, setQuestDataState] = useState(questData); const [questDeposit, setQuestDeposit] = useState(); @@ -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(); const modalId = useMemo(() => uniqueId('reclaim-funds-modal'), []); @@ -150,8 +151,14 @@ export default function ReclaimFundsModal({ icon={} 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(); const [dispute, setDispute] = useState(); 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(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 + } /> } 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;