feat(CovalentContractCallFields): add MinMaxAmount

src/requirements/WalletActivity/WalletActivityRequirement.tsx

@@ -29,6 +29,7 @@ import { Requirement as RequirementType } from "types"
 import formatRelativeTimeFromNow from "utils/formatRelativeTimeFromNow"
 import pluralize from "utils/pluralize"
 import shortenHex from "utils/shortenHex"
+import { CHAIN_CONFIG } from "wagmiConfig/chains"
 
 const requirementIcons: Record<
   string,
@@ -301,6 +302,19 @@ const WalletActivityRequirement = (props: RequirementProps): JSX.Element => {
                   </>
                 )}
 
+                {(req.data.minAmount || req.data.maxAmount) && (
+                  <>
+                    <span>
+                      {req.data.minAmount && req.data.maxAmount
+                        ? ` with ${req.data.minAmount} - ${req.data.maxAmount}`
+                        : req.data.minAmount
+                          ? ` with at least ${req.data.minAmount}`
+                          : ` with at most ${req.data.maxAmount}`}
+                    </span>
+                    <span>{` ${CHAIN_CONFIG[req.chain].nativeCurrency.symbol}`}</span>
+                  </>
+                )}
+
                 {req.type === "COVALENT_CONTRACT_CALL_COUNT" ? (
                   <BeforeAfterDates minTs={minAmount} maxTs={maxAmount} />
                 ) : (

src/requirements/WalletActivity/components/CovalentContractCallFields.tsx

@@ -15,15 +15,18 @@ import {
 } from "@/components/ui/Select"
 import { Skeleton } from "@/components/ui/Skeleton"
 import { useFormContext, useWatch } from "react-hook-form"
+import MinMaxAmount from "requirements/common/MinMaxAmount"
 import { RequirementFormProps } from "requirements/types"
 import { ADDRESS_REGEX } from "utils/guildCheckout/constants"
+import { CHAIN_CONFIG } from "wagmiConfig/chains"
 import { useCovalentContractAbiMethods } from "../hooks/useCovalentContractAbiMethods"
 import { CovalentContractCallCountChain } from "../types"
 import { abiItemToFunctionSignature } from "../utils"
 import { ContractMethodInputsFieldArray } from "./ContractMethodInputsFieldArray"
 import TxCountFormControl from "./TxCountFormControl"
 
 export const CovalentContractCallFields = ({
+  field,
   baseFieldPath,
 }: RequirementFormProps) => {
   const { control, resetField, getValues } = useFormContext()
@@ -139,6 +142,15 @@ export const CovalentContractCallFields = ({
         baseFieldPath={baseFieldPath}
         formLabel="Number of contract calls"
       />
+
+      <MinMaxAmount
+        label={
+          chain ? `${CHAIN_CONFIG[chain].nativeCurrency.symbol} amount` : "TX value"
+        }
+        field={field}
+        baseFieldPath={baseFieldPath}
+        format="FLOAT"
+      />
     </>
   )
 }

src/requirements/common/MinMaxAmount.tsx

@@ -22,7 +22,7 @@ import parseFromObject from "utils/parseFromObject"
 
 type Props = {
   baseFieldPath: string
-  field: Requirement
+  field?: Requirement
   label?: string
   format?: "INT" | "FLOAT"
   hideSetMaxButton?: boolean
@@ -53,7 +53,7 @@ const MinMaxAmount = ({
   const handleChange = (newValue, onChange) => {
     if (/^[0-9]*\.0*$/i.test(newValue)) return onChange(newValue)
     const parsedValue = format === "INT" ? parseInt(newValue) : parseFloat(newValue)
-    return onChange(isNaN(parsedValue) ? null : parsedValue)
+    return onChange(isNaN(parsedValue) ? undefined : parsedValue)
   }
 
   return (