From 12022eebba81f9c161e4490bada141439ba5e160 Mon Sep 17 00:00:00 2001
From: Alec Chen <93971719+0xAlec@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:33:59 -0400
Subject: [PATCH] handle both connection flows with new hook

---
 src/pay/components/PayProvider.tsx | 51 ++++++++----------------------
 1 file changed, 14 insertions(+), 37 deletions(-)

diff --git a/src/pay/components/PayProvider.tsx b/src/pay/components/PayProvider.tsx
index ed7ddef2cf..8dfbc4980b 100644
--- a/src/pay/components/PayProvider.tsx
+++ b/src/pay/components/PayProvider.tsx
@@ -2,17 +2,15 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useRef,
   useState,
 } from 'react';
 import type { ContractFunctionParameters } from 'viem';
 import { useAccount, useConnect } from 'wagmi';
 import { useWriteContracts } from 'wagmi/experimental';
-import { buildPayTransaction } from '../../api';
 import { useValue } from '../../internal/hooks/useValue';
+import { useCommerceContracts } from '../hooks/useCommerceContracts';
 import type { LifeCycleStatus } from '../types';
-import { getCommerceContracts } from '../utils/getCommerceContracts';
 
 type PayContextType = {
   handleSubmit: () => void;
@@ -47,13 +45,11 @@ export function PayProvider({
   const contractsRef = useRef<ContractFunctionParameters[] | undefined>(
     undefined,
   );
-
   const { address, isConnected } = useAccount();
   const { connectAsync, connectors } = useConnect({
     mutation: {
       onSuccess: async () => {
-        const commerceContracts = await fetchData();
-        contractsRef.current = commerceContracts;
+        await fetchContracts();
       },
     },
   });
@@ -62,40 +58,23 @@ export function PayProvider({
   // TODO: use the transaction hook
   const { writeContractsAsync } = useWriteContracts();
 
-  const fetchData = useCallback(async () => {
-    if (!address) {
-      console.error('Address is not available');
-      return;
-    }
-    const response = await buildPayTransaction({
-      address,
-      chainId,
-      chargeId,
-    });
-    if ('error' in response) {
-      console.error('Error in Commerce API call:', response.error);
-      return;
-    }
-    return getCommerceContracts({ transaction: response });
-  }, [address, chainId, chargeId, isConnected]);
-
-  useEffect(() => {
-    const fetchContracts = async () => {
-      if (address && isConnected) {
-        const commerceContracts = await fetchData();
-        contractsRef.current = commerceContracts;
-        console.log('Successfully fetched contracts');
-      }
-    };
-
-    fetchContracts();
-  }, [address, isConnected, fetchData]);
+  const fetchContracts = useCommerceContracts({
+    address,
+    chainId,
+    chargeId,
+    contractsRef,
+  });
 
   const handleSubmit = useCallback(async () => {
     setLifecycleStatus('loading');
-    if (!isConnected) {
+    if (isConnected) {
+      // Fetch contracts
+      await fetchContracts();
+    } else {
+      // Prompt for wallet connection
       await connectAsync({ connector: connectors[0] });
     }
+
     if (contractsRef.current) {
       await writeContractsAsync({
         contracts: contractsRef.current,
@@ -104,10 +83,8 @@ export function PayProvider({
       console.error('Contracts are not available');
     }
   }, [
-    address,
     isConnected,
     connectAsync,
-    writeContractsAsync,
     connectors,
     writeContractsAsync,
     setLifecycleStatus,