fix/create incentives page

components/Pages/Trade/Incentivize/Create.tsx

@@ -4,9 +4,11 @@ import { Controller, useForm } from 'react-hook-form'
 import {
   Box,
   Input as ChakraInput,
+  Divider,
   HStack,
   InputGroup,
   Stack,
+  Text,
   useMediaQuery,
 } from '@chakra-ui/react'
 import { useChain } from '@cosmos-kit/react-lite'
@@ -15,6 +17,7 @@ import { useOpenFlow } from 'components/Pages/Trade/Incentivize/hooks/useOpenFlo
 import SubmitButton from 'components/SubmitButton'
 import { TooltipWithChildren } from 'components/TooltipWithChildren'
 import { WHALE_TOKEN_SYMBOL } from 'constants/index'
+import dayjs from 'dayjs'
 import { useRecoilValue } from 'recoil'
 import { chainState } from 'state/chainState'
 import { txRecoilState } from 'state/txRecoilState'
@@ -54,6 +57,10 @@ const Create = ({ poolId }: Props) => {
   const { simulate, submit } = useOpenFlow({ poolId,
     ...formData })
 
+  const startDate = formData.startDate === '' ? dayjs() : dayjs(formData.startDate)
+  const endDateMinimum = startDate.add(1, 'day')
+  const startDateInvalid = startDate.isBefore(dayjs(), 'day')
+
   return (
     <Stack as="form" gap="5" onSubmit={handleSubmit(() => submit())}>
       <Input
@@ -91,8 +98,7 @@ const Create = ({ poolId }: Props) => {
                 h="50px"
                 type="date"
                 paddingEnd={'2px'}
-                min={new Date().toISOString().
-                  slice(0, 16)}
+                min={dayjs().format('YYYY-MM-DD')}
                 focusBorderColor="brand.500"
               />
             </InputGroup>
@@ -120,25 +126,38 @@ const Create = ({ poolId }: Props) => {
                 h="50px"
                 type="date"
                 paddingEnd={'2px'}
-                min={new Date().toISOString().
-                  slice(0, 16)}
+                min={endDateMinimum.
+                  format('YYYY-MM-DD')}
                 focusBorderColor="brand.500"
               />
             </InputGroup>
           )}
         />
       </HStack>
 
+      <Divider opacity="0.2" />
+
+      <HStack justifyContent="space-between" minWidth={['280', '340']}>
+        <Text color="whiteAlpha.600">Fee</Text>
+        <HStack spacing="1" direction="row" alignItems={'baseline'}>
+          <Text >
+        1000</Text>
+          <Text fontSize={12} >
+          WHALE
+          </Text>
+        </HStack>
+      </HStack>
+
       <SubmitButton
-        label={simulate.buttonLabel || 'Submit'}
+        label={(startDateInvalid && 'Start date invalid') || simulate.buttonLabel || 'Submit'}
         isConnected={true}
         txStep={TxStep?.Ready}
         isLoading={
           txStep === TxStep.Estimating ||
           txStep === TxStep.Posting ||
           txStep === TxStep.Broadcasting
         }
-        isDisabled={!isValid || txStep !== TxStep.Ready || !isWalletConnected}
+        isDisabled={!isValid || txStep !== TxStep.Ready || !isWalletConnected || startDateInvalid}
       />
     </Stack>
   )

util/parseError.ts

@@ -16,6 +16,10 @@ export const parseError = (error: Error) => {
       regex: /flow start timestamp is too far into the future/u,
       message: 'Start date is too far in future',
     },
+    { regex: /flow start timestamp is after the end timestamp/u,
+      message: 'Start date is after the end date' },
+    { regex: /the flow you are intending to create doesn't meet the minimum/u,
+      message: '1000 WHALE minimum incentives' },
     {
       regex: /account sequence mismatch/u,
       message: 'You have pending transaction',