Fix: Restore claim disabled message modal overlay (#611)

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,10 @@ 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) || {}
+
+    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,7 +69,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()
 
@@ -143,6 +150,12 @@ const OldClaim = memo(() => {
 
     const handleClaim = useCallback(async () => {
         setRefreshRate('everyBlock')
+
+        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 } : {})
@@ -164,12 +177,12 @@ 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) {
@@ -192,7 +205,7 @@ const OldClaim = memo(() => {
         },
         lg: {
             flexDirection: 'row',
-            justifyContent: 'justify-evenly',
+            justifyContent: 'space-evenly',
         },
     })
 
@@ -294,9 +307,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 +344,11 @@ Learn how here`,
     return (
         <>
             <Box w="100%" mb="8" style={mainView}>
-                {/* <Dialog /> */}
                 <CentreBox style={claimView}>
                     <div className="flex flex-col items-center text-center lg:w-1/2">
-                        <Box style={balanceContainer}>
+                        <Box style={balanceContainer} position="relative" borderRadius="2xl" overflow="hidden">
+                            <Dialog />
+
                             {claimed ? (
                                 <Box justifyContent="center" display="flex" alignItems="center" textAlign="center">
                                     <ClaimBalance refresh={refreshRate} />

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 = () => (
-    <Box>
-        <Title color="main" fontSize="l" lineHeight={36}>
-            Claiming Unavailable
-        </Title>
-    </Box>
-)
+export const useDisabledClaimingModal = (message: string) => {
+    const [isVisible, setIsVisible] = useState(false)
 
-const DialogBody = ({ message }: { message: string }) => (
-    <View>
-        <Image resizeMode="contain" source={{ uri: Maintance }} w="auto" h={120} mb={4} />
-        <Text fontFamily="subheading" lineHeight="20px">
-            {message}
-        </Text>
-    </View>
-)
+    const showModal = useCallback(() => setIsVisible(true), [])
 
-export const useDisabledClaimingModal = (message: string) => {
-    const { Modal, showModal } = useModal()
+    const Dialog = useCallback(() => {
+        if (!isVisible) return null
 
-    const Dialog = useCallback(
-        () => (
-            <React.Fragment>
-                <Modal
-                    _modalContainer={{ paddingLeft: 18, paddingRight: 18, paddingBottom: 18 }}
-                    header={<DialogHeader />}
-                    body={<DialogBody message={message} />}
-                    onClose={noop}
-                    closeText="x"
-                />
-            </React.Fragment>
-        ),
-        [Modal]
-    )
+        return (
+            <Box
+                position="absolute"
+                top={0}
+                bottom={0}
+                left={0}
+                right={0}
+                zIndex={50}
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                borderRadius="2xl"
+            >
+                <Box bg="white" p={6} borderRadius="xl" alignItems="center" shadow={3} w="90%" maxW="320px">
+                    <Title color="main" fontSize="l" lineHeight={36} mb={2}>
+                        Claiming Unavailable
+                    </Title>
+                    <img
+                        src={Maintance}
+                        alt="Maintenance"
+                        style={{ height: '120px', objectFit: 'contain', marginBottom: '16px' }}
+                    />
+                    <Text fontFamily="subheading" lineHeight="20px" textAlign="center" color="gray.600">
+                        {message || 'Claiming is temporarily disabled.'}
+                    </Text>
+                </Box>
+            </Box>
+        )
+    }, [isVisible, message])
 
     return { Dialog, showModal }
 }