Merge pull request #15959 from ethereum/fix-perisist-success

fix: keep mint success UI after rerender

Author: pettinarip

app/[locale]/10years/_components/NFTMintCard/Mint.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react"
 import { Address } from "viem"
 import {
   useEnsName,
@@ -15,7 +16,12 @@ import GasPriceDisplay from "./GasPriceDisplay"
 import { useNetworkContract } from "@/hooks/useNetworkContract"
 import { getErrorMessage } from "@/lib/torch"
 
-export default function Mint({ address }: { address: Address }) {
+interface MintProps {
+  address: Address
+  onSuccess?: (txHash: string) => void
+}
+
+export default function Mint({ address, onSuccess }: MintProps) {
   const { data: ensName } = useEnsName({ address })
   const { contractData, isSupportedNetwork } = useNetworkContract()
 
@@ -40,6 +46,12 @@ export default function Mint({ address }: { address: Address }) {
     },
   })
 
+  useEffect(() => {
+    if (isConfirmed && hash && onSuccess) {
+      onSuccess(hash)
+    }
+  }, [isConfirmed, hash, onSuccess])
+
   const handleMintClick = async () => {
     mint({
       address: contractData.address as `0x${string}`,

app/[locale]/10years/_components/NFTMintCard/Prechecks.tsx

@@ -1,13 +1,16 @@
+import { useState } from "react"
 import { Address } from "viem"
 import { useReadContract } from "wagmi"
 
 import MintAlreadyMinted from "./views/MintAlreadyMinted"
+import MintSuccess from "./views/MintSuccess"
 import Mint from "./Mint"
 
 import { useNetworkContract } from "@/hooks/useNetworkContract"
 
 export default function Prechecks({ address }: { address: Address }) {
   const { contractData, isSupportedNetwork } = useNetworkContract()
+  const [successTxHash, setSuccessTxHash] = useState<string | null>(null)
 
   const { data: hasMinted, error: hasMintedError } = useReadContract({
     address: contractData.address,
@@ -19,13 +22,21 @@ export default function Prechecks({ address }: { address: Address }) {
     },
   })
 
+  const handleMintSuccess = (txHash: string) => {
+    setSuccessTxHash(txHash)
+  }
+
   if (hasMintedError) {
     return <div className="flex justify-center">Error checking minted</div>
   }
 
+  if (successTxHash) {
+    return <MintSuccess txHash={successTxHash} />
+  }
+
   if (hasMinted) {
     return <MintAlreadyMinted />
   }
 
-  return <Mint address={address} />
+  return <Mint address={address} onSuccess={handleMintSuccess} />
 }