Edit NFT modal: form shouldn't reset on chain change

package.json

@@ -75,7 +75,7 @@
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-google-recaptcha": "^3.1.0",
-    "react-hook-form": "7.43.9",
+    "react-hook-form": "^7.43.9",
     "react-intersection-observer": "^9.4.3",
     "react-live-chat-loader": "^2.9.1",
     "react-markdown": "^8.0.7",

src/components/[guild]/collect/hooks/useNftDetails.ts

@@ -14,7 +14,7 @@ const currentDate = new Date()
 currentDate.setUTCHours(0, 0, 0, 0)
 const noonUnixTimestamp = currentDate.getTime() / 1000
 
-const fetchNftDetails = ([_, chain, address]) =>
+const fetchNftDetails = ([_, chain, address]: string[]) =>
   fetcher(`/api/nft/${chain}/${address}`)
 
 export const guildNftRewardMetadataSchema = z.object({
@@ -39,14 +39,15 @@ const useNftDetails = (chain: Chain, address: `0x${string}`) => {
   const relevantGuildPlatform = guildPlatforms?.find(
     (gp) =>
       gp.platformId === PlatformType.CONTRACT_CALL &&
-      gp.platformGuildData.chain === chain &&
-      gp.platformGuildData.contractAddress?.toLowerCase() === address?.toLowerCase()
+      gp.platformGuildData?.chain === chain &&
+      gp.platformGuildData?.contractAddress?.toLowerCase() === address?.toLowerCase()
   )
 
   const guildPlatformData =
     relevantGuildPlatform?.platformGuildData as PlatformGuildData["CONTRACT_CALL"]
 
   const shouldFetch = Boolean(chain && address)
+  // console.log({ shouldFetch})
 
   const {
     data: nftDetails,
@@ -90,14 +91,6 @@ const useNftDetails = (chain: Chain, address: `0x${string}`) => {
     error: multicallError,
     refetch,
   } = useReadContracts({
-    /**
-     * We need to @ts-ignore this line, since we get a "Type instantiation is
-     * excessively deep and possibly infinite" error here until strictNullChecks is
-     * set to false in our tsconfig. We should set it to true & sort out the related
-     * issues in another PR.
-     */
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     contracts: [
       {
         ...contract,

src/pages/[guild]/collect/[chain]/[address].tsx

@@ -30,18 +30,20 @@ import useWeb3ConnectionManager from "components/_app/Web3ConnectionManager/hook
 import Layout from "components/common/Layout"
 import LinkPreviewHead from "components/common/LinkPreviewHead"
 import { AnimatePresence } from "framer-motion"
+import { useAtom, useSetAtom } from "jotai"
 import { GetStaticPaths } from "next"
 import dynamic from "next/dynamic"
 import {
   alchemyApiUrl,
   validateNftAddress,
   validateNftChain,
 } from "pages/api/nft/collectors/[chain]/[address]"
-import { useRef } from "react"
+import { useEffect, useRef } from "react"
 import { SWRConfig, unstable_serialize } from "swr"
 import { Guild, PlatformType } from "types"
 import fetcher from "utils/fetcher"
 import { Chain } from "wagmiConfig/chains"
+import { isNftLoadingAtom } from "./atoms"
 
 type Props = {
   chain: Chain
@@ -206,7 +208,14 @@ const CollectNftPageProviderWrapper = (
   props: Omit<Props, "urlName" | "fallback">
 ) => {
   const { chain, address, guildPlatformId, rolePlatformId, roleId } = props
-  const { guildPlatforms } = useGuild()
+  const { guildPlatforms, isLoading } = useGuild()
+  const [isNftLoading, setIsNftLoading] = useAtom(isNftLoadingAtom)
+
+  useEffect(() => {
+    setIsNftLoading(isLoading)
+  }, [isLoading])
+
+  console.log("guildplatforms update", isLoading, isNftLoading)
 
   return (
     <CollectNftProvider

src/pages/[guild]/collect/[chain]/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai"
+
+export const isNftLoadingAtom = atom(true)

src/platforms/ContractCall/components/EditNftModal.tsx

@@ -19,7 +19,7 @@ import useNftDetails from "components/[guild]/collect/hooks/useNftDetails"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import { Modal } from "components/common/Modal"
-import { useCallback } from "react"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm, useWatch } from "react-hook-form"
 import { GuildPlatform } from "types"
 import { formatUnits } from "viem"
@@ -133,15 +133,20 @@ const EditNftForm = ({
   })
 
   const handleSubmitCallback = useCallback(
-    (data: CreateNftFormType) =>
-      onSubmit({
+    (data: CreateNftFormType) => {
+      console.log("modal", { data, dirt: methods.formState.dirtyFields })
+      return onSubmit({
         fields: {
           ...data,
-          startTime: datetimeLocalToIsoString(data.startTime),
-          endTime: datetimeLocalToIsoString(data.endTime),
+          startTime:
+            (data.startTime && datetimeLocalToIsoString(data.startTime)) ??
+            undefined,
+          endTime:
+            (data.endTime && datetimeLocalToIsoString(data.endTime)) ?? undefined,
         },
         dirtyFields: methods.formState.dirtyFields,
-      }),
+      })
+    },
     [methods.formState.dirtyFields, onSubmit]
   )
 

src/platforms/ContractCall/hooks/useEditNft.ts

@@ -2,20 +2,74 @@ import type { ExtractAbiFunctions } from "abitype"
 import useEditRolePlatform from "components/[guild]/AccessHub/hooks/useEditRolePlatform"
 import { CreateNftFormType } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddContractCallPanel/components/CreateNftForm/components/NftDataForm"
 import { generateGuildRewardNFTMetadata } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddContractCallPanel/components/CreateNftForm/hooks/useCreateNft"
+// import useNftDetails from "components/[guild]/collect/hooks/useNftDetails"
 import useGuildPlatform from "components/[guild]/hooks/useGuildPlatform"
 import pinFileToIPFS from "hooks/usePinata/utils/pinataUpload"
 import useShowErrorToast from "hooks/useShowErrorToast"
 import useSubmit from "hooks/useSubmit"
 import useToast from "hooks/useToast"
+import { useSetAtom } from "jotai"
+import { isNftLoadingAtom } from "pages/[guild]/collect/[chain]/atoms"
 import { useCallback } from "react"
 import { FormState } from "react-hook-form"
 import guildRewardNftAbi from "static/abis/guildRewardNft"
 import processViemContractError from "utils/processViemContractError"
 import { encodeFunctionData, parseUnits } from "viem"
-import { useWalletClient } from "wagmi"
+import { useReadContracts, useWalletClient } from "wagmi"
 import { wagmiConfig } from "wagmiConfig"
 import { CHAIN_CONFIG, Chain, Chains } from "wagmiConfig/chains"
 
+const useNftRefetch = (chain: Chain, address: `0x${string}`) => {
+  const contract = {
+    address,
+    abi: guildRewardNftAbi,
+    chainId: Chains[chain],
+  } as const
+
+  const {
+    data,
+    isLoading: isMulticallLoading,
+    error: multicallError,
+    refetch,
+  } = useReadContracts({
+    contracts: [
+      {
+        ...contract,
+        functionName: "locked",
+      },
+      {
+        ...contract,
+        functionName: "totalSupply",
+      },
+      {
+        ...contract,
+        functionName: "maxSupply",
+      },
+      {
+        ...contract,
+        functionName: "mintableAmountPerUser",
+      },
+      {
+        ...contract,
+        functionName: "tokenURI",
+        args: [BigInt(0)],
+      },
+      {
+        ...contract,
+        functionName: "fee",
+      },
+      {
+        ...contract,
+        functionName: "treasury",
+      },
+    ],
+    query: {
+      staleTime: Infinity,
+    },
+  })
+  return { refetch, data }
+}
+
 const useEditNft = ({
   guildPlatformId,
   rolePlatformId,
@@ -93,8 +147,10 @@ const useEditNft = ({
     return apiData
   }
 
+  const setIsNftLoading = useSetAtom(isNftLoadingAtom)
   const editNft = useSubmit(editNftContractCalls, {
     onSuccess: (apiData) => {
+      setIsNftLoading(true)
       if (!Object.keys(apiData.rolePlatform).length) {
         showSuccessToast()
         onSuccess()