diff --git a/src/pages/gd/Claim/OldClaim.tsx b/src/pages/gd/Claim/OldClaim.tsx index 5f3689ad5..e2e1aab6b 100644 --- a/src/pages/gd/Claim/OldClaim.tsx +++ b/src/pages/gd/Claim/OldClaim.tsx @@ -11,7 +11,7 @@ import { useScreenSize, ClaimSuccessModal, } from '@gooddollar/good-design' -import { Box, Center, Text, useBreakpointValue } from 'native-base' +import { Box, Button, Center, Spinner, Text, useBreakpointValue } from 'native-base' import { useConnectionInfo } from 'hooks/useConnectionInfo' import { useClaim, @@ -42,11 +42,13 @@ import { useIsSimpleApp } from 'state/simpleapp/simpleapp' import { useDisabledClaimingModal } from './useDisabledClaimModal' import { useGoodDappFeatures } from 'hooks/useFeaturesEnabled' +const INITIAL_PERIOD_EPOCH_MS = 86_400_000 + const OldClaim = memo(() => { const { i18n } = useLingui() const [refreshRate, setRefreshRate] = useState(12) const claimDetails = useClaim(refreshRate) - const { claimAmount } = claimDetails + const { claimAmount, isWhitelisted, nextClaimTime } = claimDetails const isMinipay = isMiniPay() const { resetState, state, send } = useContractFunctionWithDefaultGasFees( claimDetails.contract, @@ -58,6 +60,8 @@ const OldClaim = memo(() => { ) const [claimed, setClaimed] = useState(undefined) + const [dataChainId, setDataChainId] = useState(undefined) + const [claimLoadError, setClaimLoadError] = useState(false) const { address, chainId } = useConnectionInfo() const { open } = useAppKit() const network = SupportedV2Networks[chainId] @@ -107,24 +111,40 @@ const OldClaim = memo(() => { if (claimAmount?.isZero()) { setClaimed(true) + setDataChainId(chainId) setRefreshRate(12) resetState() return } else if (state.status === 'Success') { setClaimed(true) + setDataChainId(chainId) + setRefreshRate(12) return } setClaimed(false) - setRefreshRate('everyBlock') + setDataChainId(chainId) + setRefreshRate(12) + } + if (claimAmount && (!nextClaimTime || nextClaimTime.getTime() > INITIAL_PERIOD_EPOCH_MS)) { + hasClaimed().catch(noop) } - if (claimAmount) hasClaimed().catch(noop) // eslint-disable-next-line react-hooks-addons/no-unused-deps, react-hooks/exhaustive-deps - }, [claimAmount, chainId, refreshRate]) + }, [claimAmount, chainId, nextClaimTime, resetState, state.status]) + + useEffect(() => { + if (!isWhitelisted && nextClaimTime && nextClaimTime.getTime() > INITIAL_PERIOD_EPOCH_MS) { + setDataChainId(chainId) + setClaimed(false) + setRefreshRate(12) + } + }, [isWhitelisted, nextClaimTime, chainId]) - // upon switching chain we want temporarily to poll everyBlock up untill we have the latest data + // upon switching chain we want temporarily to poll everyBlock up until we have the latest data useEffect(() => { + setDataChainId(undefined) setClaimed(undefined) + setClaimLoadError(false) setRefreshRate('everyBlock') }, [/* used */ chainId]) @@ -152,7 +172,41 @@ const OldClaim = memo(() => { [sendData, network] ) + const isClaimDataLoading = Boolean( + address && + (activeChainFeatures['claimEnabled'] || !isProd || isMinipay) && + !claimLoadError && + (dataChainId !== chainId || + !nextClaimTime || + nextClaimTime.getTime() <= INITIAL_PERIOD_EPOCH_MS || + (isWhitelisted && (claimAmount === undefined || claimed === undefined))) + ) + + useEffect(() => { + if (!isClaimDataLoading) { + return + } + + const timeoutId = setTimeout(() => { + setClaimLoadError(true) + setRefreshRate(12) + }, 15000) + + return () => clearTimeout(timeoutId) + }, [isClaimDataLoading]) + + const handleRetry = useCallback(() => { + setClaimLoadError(false) + setDataChainId(undefined) + setClaimed(undefined) + setRefreshRate('everyBlock') + }, []) + const handleClaim = useCallback(async () => { + if (isClaimDataLoading) { + return false + } + setRefreshRate('everyBlock') if (!claimEnabled) { @@ -186,7 +240,16 @@ const OldClaim = memo(() => { return false // eslint-disable-next-line react-hooks/exhaustive-deps - }, [send, network, sendData, activeChainFeatures, isSimpleApp, claimEnabled, showModal]) + }, [ + isClaimDataLoading, + send, + network, + sendData, + activeChainFeatures, + isSimpleApp, + claimEnabled, + showModal, + ]) const handleConnect = useCallback(async () => { if (!address) { @@ -353,7 +416,30 @@ const OldClaim = memo(() => { - {claimed ? ( + {claimLoadError ? ( +
+ + {i18n._(t`Unable to load claim data. Please check your connection and try again.`)} + + +
+ ) : isClaimDataLoading ? ( +
+ +
+ ) : claimed ? (