diff --git a/src/pages/gd/Claim/OldClaim.tsx b/src/pages/gd/Claim/OldClaim.tsx index ff5301046..f73df60ee 100644 --- a/src/pages/gd/Claim/OldClaim.tsx +++ b/src/pages/gd/Claim/OldClaim.tsx @@ -23,7 +23,7 @@ import { import { useAppKit } from '@reown/appkit/react' import { QueryParams } from '@usedapp/core' import { noop } from 'lodash' -// import { useFeatureFlagWithPayload } from 'posthog-react-native' +import { useFeatureFlagWithPayload } from 'posthog-react-native' import moment from 'moment' import { getEnv } from 'utils/env' @@ -39,8 +39,7 @@ import BillyGrin from 'assets/images/claim/billygrin.png' import BillyConfused from 'assets/images/claim/billyconfused.png' import { useIsSimpleApp } from 'state/simpleapp/simpleapp' - -// import { useDisabledClaimingModal } from './useDisabledClaimModal' +import { useDisabledClaimingModal } from './useDisabledClaimModal' import { useGoodDappFeatures } from 'hooks/useFeaturesEnabled' const OldClaim = memo(() => { @@ -57,9 +56,11 @@ const OldClaim = memo(() => { const { open } = useAppKit() const network = SupportedV2Networks[chainId] const sendData = useSendAnalyticsData() - // todo: fix UI for displaying claiming disabled modal - // const [, payload] = useFeatureFlagWithPayload('claim-feature') - // const { enabled: claimEnabled = true, disabledMessage = '' } = (payload as any) || {} + + // Uncommented per maintainer's instructions + const [, payload] = useFeatureFlagWithPayload('claim-feature') + const { enabled: claimEnabled = true, disabledMessage = '' } = (payload as any) || {} + const { activeNetworksByFeature, activeChainFeatures } = useGoodDappFeatures() const supportedChains = activeNetworksByFeature['claimEnabled'] || [] const isProd = getEnv() === 'production' @@ -69,8 +70,14 @@ const OldClaim = memo(() => { const isHoliday = holiday >= '12-24' || holiday <= '01-01' const isSimpleApp = useIsSimpleApp() - // const { Dialog, showModal } = useDisabledClaimingModal(disabledMessage) + const { Dialog, showModal } = useDisabledClaimingModal(disabledMessage) + + useEffect(() => { + if (!claimEnabled) { + showModal() + } + }, [claimEnabled, showModal]) const isMinipay = isMiniPay() const supportedChainsDisplay = useMemo(() => { @@ -83,14 +90,9 @@ const OldClaim = memo(() => { return supportedChains.map((chainId) => chainNames[chainId] || `Chain ID: ${chainId}`).join(', ') }, [supportedChains]) - // there are three possible scenarios - // 1. claim amount is 0, meaning user has claimed that day - // 2. status === success, meaning user has just claimed. Could happen that claimAmount has not been updated right after tx confirmation - // 3. If neither is true, there is a claim ready for user or its a new user and FV will be triggered instead useEffect(() => { const hasClaimed = async () => { if (state.status === 'Mining') { - // don't do anything until transaction is mined return } @@ -108,14 +110,12 @@ const OldClaim = memo(() => { setRefreshRate('everyBlock') } if (claimAmount) hasClaimed().catch(noop) - // eslint-disable-next-line react-hooks-addons/no-unused-deps, react-hooks/exhaustive-deps }, [claimAmount, chainId, refreshRate]) - // upon switching chain we want temporarily to poll everyBlock up untill we have the latest data useEffect(() => { setClaimed(undefined) setRefreshRate('everyBlock') - }, [/* used */ chainId]) + }, [chainId]) const handleEvents = useCallback( (event: string) => { @@ -130,8 +130,6 @@ const OldClaim = memo(() => { sendData({ event: 'claim', action: 'claim_start', network }) break case 'finish': - // finish event does not handle rejected case - // sendData({ event: 'claim', action: 'claim_success', network }) break default: sendData({ event: 'claim', action: event, network }) @@ -143,8 +141,14 @@ const OldClaim = memo(() => { const handleClaim = useCallback(async () => { setRefreshRate('everyBlock') + + // Added check to block claim and show modal if feature flag is disabled + if (!claimEnabled) { + showModal() + return false + } + if (activeChainFeatures['claimEnabled'] || !isProd || isMinipay) { - // minipay doesnt handle gasPrice correctly, so we let it decide const claim = await send(isMinipay ? { gasPrice: undefined } : {}) if (!claim) { @@ -164,17 +168,16 @@ const OldClaim = memo(() => { sendData({ event: 'claim', action: 'claim_success', network }) return true } else { - // showModal() + showModal() } return false - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [send, network, sendData, activeChainFeatures, isSimpleApp]) + }, [send, network, sendData, activeChainFeatures, isSimpleApp, claimEnabled, showModal]) const handleConnect = useCallback(async () => { if (!address) { await open({ view: 'Connect' }) - return false // Return false so button resets when modal is dismissed + return false } return true }, [address, open]) @@ -192,7 +195,7 @@ const OldClaim = memo(() => { }, lg: { flexDirection: 'row', - justifyContent: 'justify-evenly', + justifyContent: 'space-evenly', }, }) @@ -294,9 +297,7 @@ const OldClaim = memo(() => { content: [ { description: { - text: `After claiming your G$, use it to support your community, buy products and services, support causes you care about, vote in the GoodDAO, and more. - -Learn how here`, + text: `After claiming your G$, use it to support your community, buy products and services, support causes you care about, vote in the GoodDAO, and more. \n\nLearn how here`, color: 'white', }, ...(isSmallTabletView && { imgSrc: BillyHappy }), @@ -333,10 +334,13 @@ Learn how here`, return ( <> - {/* */}
- + {/* CRITICAL LAYOUT FIX: position relative so the overlay covers just this area */} + + {/* This is the overlay we built */} + + {claimed ? ( diff --git a/src/pages/gd/Claim/useDisabledClaimModal.tsx b/src/pages/gd/Claim/useDisabledClaimModal.tsx index 0ee2df8bf..3d6a7220c 100644 --- a/src/pages/gd/Claim/useDisabledClaimModal.tsx +++ b/src/pages/gd/Claim/useDisabledClaimModal.tsx @@ -1,44 +1,46 @@ -import React, { useCallback } from 'react' -import { Image, Title, useModal } from '@gooddollar/good-design' -import { Box, Text, View } from 'native-base' -import { noop } from 'lodash' +import { useCallback, useState } from 'react' +import { Title } from '@gooddollar/good-design' +import { Box, Text } from 'native-base' import Maintance from 'assets/images/claim/maintance.png' -const DialogHeader = () => ( - - - Claiming Unavailable - - -) +export const useDisabledClaimingModal = (message: string) => { + const [isVisible, setIsVisible] = useState(false) -const DialogBody = ({ message }: { message: string }) => ( - - - - {message} - - -) + const showModal = useCallback(() => setIsVisible(true), []) -export const useDisabledClaimingModal = (message: string) => { - const { Modal, showModal } = useModal() + const Dialog = useCallback(() => { + if (!isVisible) return null - const Dialog = useCallback( - () => ( - - } - body={} - onClose={noop} - closeText="x" - /> - - ), - [Modal] - ) + return ( + + + + Claiming Unavailable + + Maintenance + + {message || 'Claiming is temporarily disabled.'} + + + + ) + }, [isVisible, message]) return { Dialog, showModal } }