fix lifecycleStatus

src/pay/components/PayButton.tsx

@@ -6,7 +6,7 @@ import { usePayContext } from './PayProvider';
 export function PayButton({ text = 'Pay with Crypto' }: { text?: string }) {
   const { lifecycleStatus, handleSubmit } = usePayContext();
 
-  const isLoading = lifecycleStatus === 'loading';
+  const isLoading = lifecycleStatus?.statusName === 'transactionPending';
 
   return (
     <button

src/pay/components/PayProvider.tsx

@@ -7,15 +7,15 @@ import {
 } from 'react';
 import type { ContractFunctionParameters } from 'viem';
 import { useAccount, useConnect } from 'wagmi';
-import { useWriteContracts } from 'wagmi/experimental';
 import { useValue } from '../../internal/hooks/useValue';
+import type { LifeCycleStatus } from '../../transaction';
+import { useWriteContracts } from '../../transaction/hooks/useWriteContracts';
 import { useCommerceContracts } from '../hooks/useCommerceContracts';
-import type { LifeCycleStatus } from '../types';
 
 type PayContextType = {
   handleSubmit: () => void;
   lifecycleStatus?: LifeCycleStatus;
-  setLifecycleStatus: (status: LifeCycleStatus) => void;
+  setLifeCycleStatus: (status: LifeCycleStatus) => void;
 };
 
 const emptyContext = {} as PayContextType;
@@ -53,10 +53,17 @@ export function PayProvider({
       },
     },
   });
-  const [lifecycleStatus, setLifecycleStatus] = useState<LifeCycleStatus>();
+  const [transactionId, setTransactionId] = useState('');
+  const [lifecycleStatus, setLifeCycleStatus] = useState<LifeCycleStatus>({
+    statusName: 'init',
+    statusData: null,
+  });
 
   // TODO: use the transaction hook
-  const { writeContractsAsync } = useWriteContracts();
+  const { writeContractsAsync } = useWriteContracts({
+    setLifeCycleStatus,
+    setTransactionId,
+  });
 
   const fetchContracts = useCommerceContracts({
     address,
@@ -66,7 +73,10 @@ export function PayProvider({
   });
 
   const handleSubmit = useCallback(async () => {
-    setLifecycleStatus('loading');
+    setLifeCycleStatus({
+      statusName: 'transactionPending',
+      statusData: null,
+    });
     if (isConnected) {
       // Fetch contracts
       await fetchContracts();
@@ -87,13 +97,13 @@ export function PayProvider({
     connectAsync,
     connectors,
     writeContractsAsync,
-    setLifecycleStatus,
+    setLifeCycleStatus,
   ]);
 
   const value = useValue({
     handleSubmit,
     lifecycleStatus,
-    setLifecycleStatus,
+    setLifeCycleStatus,
   });
   return <PayContext.Provider value={value}>{children}</PayContext.Provider>;
 }