diff --git a/src/custom/pages/Claim/ClaimAddress.tsx b/src/custom/pages/Claim/ClaimAddress.tsx index 3fdf44c73..de5c289d6 100644 --- a/src/custom/pages/Claim/ClaimAddress.tsx +++ b/src/custom/pages/Claim/ClaimAddress.tsx @@ -9,7 +9,7 @@ import useENS from 'hooks/useENS' import { useClaimDispatchers, useClaimState } from 'state/claim/hooks' import { ClaimStatus } from 'state/claim/actions' -type ClaimAddressProps = Pick & { +export type ClaimAddressProps = Pick & { toggleWalletModal: () => void } diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index 19abf9128..9cfa119ea 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -11,7 +11,7 @@ import { CustomLightSpinner } from 'theme' import Circle from 'assets/images/blue-loader.svg' import { Countdown } from 'pages/Claim/Countdown' -type ClaimsTableProps = { +export type ClaimsTableProps = { handleSelectAll: (event: React.ChangeEvent) => void handleSelect: (event: React.ChangeEvent, index: number) => void userClaimData: EnhancedUserClaimData[] diff --git a/src/custom/pages/Claim/FooterNavButtons.tsx b/src/custom/pages/Claim/FooterNavButtons.tsx new file mode 100644 index 000000000..645333fcd --- /dev/null +++ b/src/custom/pages/Claim/FooterNavButtons.tsx @@ -0,0 +1,111 @@ +import { Trans } from '@lingui/macro' +import { isAddress } from '@ethersproject/address' +import { useClaimDispatchers, useClaimState } from 'state/claim/hooks' +import { ButtonPrimary, ButtonSecondary } from 'components/Button' +import { ClaimStatus } from 'state/claim/actions' +import { FooterNavButtons as FooterNavButtonsWrapper } from 'pages/Claim/styled' +import { useActiveWeb3React } from 'hooks/web3' +import { ClaimsTableProps } from './ClaimsTable' +import { ClaimAddressProps } from './ClaimAddress' +import { ReactNode } from 'react' + +type FooterNavButtonsProps = Pick & + Pick & { + isPaidClaimsOnly: boolean + resolvedAddress: string | null + handleSubmitClaim: () => void + handleCheckClaim: () => void + } + +export default function FooterNavButtons({ + hasClaims, + isAirdropOnly, + isPaidClaimsOnly, + resolvedAddress, + toggleWalletModal, + handleSubmitClaim, + handleCheckClaim, +}: FooterNavButtonsProps) { + const { account } = useActiveWeb3React() + const { + // account + activeClaimAccount, + // claiming + claimStatus, + // investment + investFlowStep, + isInvestFlowActive, + // table select change + selected, + } = useClaimState() + + const { + // investing + setInvestFlowStep, + setIsInvestFlowActive, + } = useClaimDispatchers() + + const isInputAddressValid = isAddress(resolvedAddress || '') + + // User is connected and has some unclaimed claims + const isConnectedAndHasClaims = !!activeClaimAccount && !!hasClaims && claimStatus === ClaimStatus.DEFAULT + const noPaidClaimsSelected = !selected.length + + let buttonContent: ReactNode = null + // Disconnected, show wallet connect + if (!account) { + buttonContent = ( + + Connect a wallet + + ) + } + + // User has no set active claim account and/or has claims, show claim account search + if (!activeClaimAccount || !hasClaims) { + buttonContent = ( + + Check claimable vCOW + + ) + } + + // USER is CONNECTED + HAS SOMETHING TO CLAIM + if (isConnectedAndHasClaims) { + if (!isInvestFlowActive) { + buttonContent = ( + + Claim vCOW + + ) + } else if (!isAirdropOnly) { + buttonContent = ( + <> + {investFlowStep === 0 ? ( + setInvestFlowStep(1)}> + Approve tokens + + ) : investFlowStep === 1 ? ( + setInvestFlowStep(2)}> + Review + + ) : ( + + Claim and invest vCOW + + )} + + + investFlowStep === 0 ? setIsInvestFlowActive(false) : setInvestFlowStep(investFlowStep - 1) + } + > + Go back + + + ) + } + } + + return {buttonContent} +} diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx index 9f9ac56cd..56f614ed0 100644 --- a/src/custom/pages/Claim/index.tsx +++ b/src/custom/pages/Claim/index.tsx @@ -1,15 +1,13 @@ -import { useEffect, useMemo } from 'react' -import { Trans } from '@lingui/macro' +import { useCallback, useEffect, useMemo } from 'react' import { CurrencyAmount, MaxUint256 } from '@uniswap/sdk-core' import { useActiveWeb3React } from 'hooks/web3' import { useUserEnhancedClaimData, useUserUnclaimedAmount, useClaimCallback, ClaimInput } from 'state/claim/hooks' -import { ButtonPrimary, ButtonSecondary } from 'components/Button' -import { PageWrapper, FooterNavButtons } from 'pages/Claim/styled' +import { PageWrapper } from 'pages/Claim/styled' import EligibleBanner from './EligibleBanner' -import { getFreeClaims, hasPaidClaim, getIndexes, getPaidClaims } from 'state/claim/hooks/utils' +import { getFreeClaims, hasPaidClaim, getIndexes, getPaidClaims, hasFreeClaim } from 'state/claim/hooks/utils' import { useWalletModalToggle } from 'state/application/hooks' import Confetti from 'components/Confetti' -import { isAddress } from 'web3-utils' + import useENS from 'hooks/useENS' import ClaimNav from './ClaimNav' @@ -31,6 +29,7 @@ import { GNO, USDC_BY_CHAIN } from 'constants/tokens' import { isSupportedChain } from 'utils/supportedChainId' import { useErrorModal } from 'hooks/useErrorMessageAndModal' import { EnhancedUserClaimData } from './types' +import FooterNavButtons from './FooterNavButtons' const GNO_CLAIM_APPROVE_MESSAGE = 'Approving GNO for investing in vCOW' const USDC_CLAIM_APPROVE_MESSAGE = 'Approving USDC for investing in vCOW' @@ -48,7 +47,6 @@ export default function Claim() { // claiming claimStatus, // investment - isInvestFlowActive, investFlowStep, // table select change selected, @@ -66,7 +64,6 @@ export default function Claim() { // setClaimedAmount, // TODO: uncomment when used // investing setIsInvestFlowActive, - setInvestFlowStep, // claim row selection setSelected, setSelectedAll, @@ -76,7 +73,6 @@ export default function Claim() { // addresses const { address: resolvedAddress, name: resolvedENS } = useENS(inputAddress) - const isInputAddressValid = useMemo(() => isAddress(resolvedAddress || ''), [resolvedAddress]) // toggle wallet when disconnected const toggleWalletModal = useWalletModalToggle() @@ -91,6 +87,7 @@ export default function Claim() { const hasClaims = useMemo(() => userClaimData.length > 0, [userClaimData]) const isAirdropOnly = useMemo(() => !hasPaidClaim(userClaimData), [userClaimData]) + const isPaidClaimsOnly = useMemo(() => hasPaidClaim(userClaimData) && !hasFreeClaim(userClaimData), [userClaimData]) // claim callback const { claimCallback } = useClaimCallback(activeClaimAccount) @@ -128,9 +125,8 @@ export default function Claim() { setInputAddress('') } - // TODO: useCallback // handle submit claim - const handleSubmitClaim = () => { + const handleSubmitClaim = useCallback(() => { // Reset error handling handleCloseError() @@ -177,7 +173,17 @@ export default function Claim() { } else { setIsInvestFlowActive(true) } - } + }, [ + activeClaimAccount, + investFlowStep, + selected, + userClaimData, + claimCallback, + handleCloseError, + handleSetError, + setClaimStatus, + setIsInvestFlowActive, + ]) // on account/activeAccount/non-connected account (if claiming for someone else) change useEffect(() => { @@ -255,58 +261,15 @@ export default function Claim() { }} /> - - {/* General claim vCOW button (no invest) */} - {!!activeClaimAccount && !!hasClaims && !isInvestFlowActive && claimStatus === ClaimStatus.DEFAULT ? ( - account ? ( - - Claim vCOW - - ) : ( - - Connect a wallet - - ) - ) : null} - - {/* Check for claims button */} - {(!activeClaimAccount || !hasClaims) && ( - - Check claimable vCOW - - )} - - {/* Invest flow button */} - {!!activeClaimAccount && - !!hasClaims && - claimStatus === ClaimStatus.DEFAULT && - !isAirdropOnly && - !!isInvestFlowActive && ( - <> - {investFlowStep === 0 ? ( - setInvestFlowStep(1)}> - Approve tokens - - ) : investFlowStep === 1 ? ( - setInvestFlowStep(2)}> - Review - - ) : ( - - Claim and invest vCOW - - )} - - - investFlowStep === 0 ? setIsInvestFlowActive(false) : setInvestFlowStep(investFlowStep - 1) - } - > - Go back - - - )} - + ) }