fix: create hook to handle subscription

src/graphql/subscriptions/fundingActivity.ts

@@ -0,0 +1,58 @@
+import { gql } from '@apollo/client'
+
+export const FRAGMENT_FUNDING_TX_FOR_PROJECT_FUNDING = gql`
+  fragment FundingTxForProjectFunding on FundingTx {
+    id
+    comment
+    amount
+    funder {
+      id
+      amountFunded
+      timesFunded
+      confirmedAt
+      user {
+        id
+        username
+        imageUrl
+        externalAccounts {
+          externalUsername
+          public
+          accountType
+        }
+      }
+    }
+    paidAt
+    onChain
+    media
+    source
+    method
+    projectId
+    sourceResource {
+      ... on Project {
+        id
+        name
+        title
+        image
+        createdAt
+        thumbnailImage
+      }
+      ... on Entry {
+        createdAt
+        id
+        image
+        title
+      }
+    }
+  }
+`
+
+export const PROJECT_FUNDING_SUBSCRIPTION = gql`
+  ${FRAGMENT_FUNDING_TX_FOR_PROJECT_FUNDING}
+  subscription ActivityCreated($input: ActivityCreatedSubscriptionInput) {
+    activityCreated(input: $input) {
+      ... on FundingTx {
+        ...FundingTxForProjectFunding
+      }
+    }
+  }
+`

src/hooks/fundingFlow/useFundSubscription.tsx

@@ -0,0 +1,58 @@
+import { useSubscription } from '@apollo/client'
+import { useState } from 'react'
+
+import { ACTIVITY_CREATION_SUBSCRIPTION } from '../../graphql/subscriptions'
+import {
+  ActivityCreatedSubscription,
+  ActivityCreatedSubscriptionInput,
+  ActivityResourceType,
+  FundingTxForLandingPageFragment,
+} from '../../types'
+
+type UseFundSubscriptionProps = {
+  projectId: number
+}
+
+export const useFundSubscription = ({
+  projectId,
+}: UseFundSubscriptionProps) => {
+  const [skip, setSkip] = useState(true)
+  const [fundingTxId, setFundingTxId] = useState<number | null>(null)
+  const [funded, setFunded] = useState(false)
+
+  const startListening = (id: number) => {
+    setFundingTxId(id)
+    setSkip(false)
+  }
+
+  const stopListening = () => {
+    setFundingTxId(null)
+    setFunded(false)
+    setSkip(true)
+  }
+
+  const skipSubscription = skip || !projectId || !fundingTxId
+
+  const { loading } = useSubscription<
+    ActivityCreatedSubscription,
+    ActivityCreatedSubscriptionInput
+  >(ACTIVITY_CREATION_SUBSCRIPTION, {
+    variables: {
+      where: {
+        projectIds: [projectId],
+        resourceType: ActivityResourceType.FundingTx,
+      },
+    },
+    skip: skipSubscription,
+    onData(options) {
+      console.log('checking value', options)
+      const activityCreated = options.data.data
+        ?.activityCreated as FundingTxForLandingPageFragment
+      if (activityCreated.id === fundingTxId) {
+        setFunded(false)
+      }
+    },
+  })
+  console.log('checking loading', loading)
+  return { startListening, stopListening, funded }
+}

src/hooks/useFundingFlow.tsx → src/hooks/fundingFlow/useFundingFlow.tsx

@@ -1,4 +1,4 @@
-import { ApolloError } from '@apollo/client'
+import { ApolloError, useQuery } from '@apollo/client'
 import {
   useCallback,
   useContext,
@@ -9,9 +9,9 @@ import {
 } from 'react'
 import { RejectionError, WebLNProvider } from 'webln'
 
-import { ApolloErrors, fundingStages, stageList } from '../constants'
-import { IFundingStages } from '../constants'
-import { AuthContext } from '../context'
+import { ApolloErrors, fundingStages, stageList } from '../../constants'
+import { IFundingStages } from '../../constants'
+import { AuthContext } from '../../context'
 import {
   FundingInput,
   FundingMutationResponse,
@@ -20,9 +20,11 @@ import {
   InvoiceStatus,
   useFundingTxWithInvoiceStatusLazyQuery,
   useFundMutation,
+  useGetFundingTxLazyQuery,
   useRefreshFundingInvoiceMutation,
-} from '../types'
-import { sha256, toInt, useNotification } from '../utils'
+} from '../../types'
+import { sha256, toInt, useNotification } from '../../utils'
+import { useFundSubscription } from './useFundSubscription'
 
 export type UseFundingFlowReturn = ReturnType<typeof useFundingFlow>
 
@@ -127,6 +129,10 @@ export const useFundingFlow = (options?: IFundingFlowOptions) => {
     funder: { ...initialFunding.funder, user },
   })
 
+  const { startListening } = useFundSubscription({
+    projectId: fundingTx.projectId,
+  })
+
   const [amounts, setAmounts] =
     useState<FundingMutationResponse['amountSummary']>(initialAmounts)
 
@@ -233,14 +239,17 @@ export const useFundingFlow = (options?: IFundingFlowOptions) => {
             .then((success) => {
               if (!success) {
                 fundIntervalRef.current = intervalFactory()
+                startListening(data.fund.fundingTx?.id)
                 setWebLNErrored(true)
               }
             })
             .catch(() => {
               fundIntervalRef.current = intervalFactory()
+              startListening(data.fund.fundingTx?.id)
               setFundingRequestErrored(true)
             })
         } else {
+          startListening(data.fund.fundingTx?.id)
           fundIntervalRef.current = intervalFactory()
         }
       } catch (e) {
@@ -329,11 +338,24 @@ export const useFundingFlow = (options?: IFundingFlowOptions) => {
 
       gotoNextStage()
       setFundingInput(input)
-      await fundProject({ variables: { input } })
+
+      // await fundProject({ variables: { input } })
+      await getFundingTx()
     },
     [fundProject, gotoNextStage, toast],
   )
 
+  const [getFundingTx] = useGetFundingTxLazyQuery({
+    variables: {
+      id: 185727,
+    },
+    onCompleted(data) {
+      console.log('we are getting data', data)
+      setFundingTx(data.fundingTx)
+      startListening(data.fundingTx?.id)
+    },
+  })
+
   const [refreshInvoice] = useRefreshFundingInvoiceMutation({
     variables: {
       fundingTxID: fundingTx.id,

src/hooks/index.ts

@@ -1,7 +1,7 @@
+export * from './fundingFlow/useFundingFlow'
 export * from './useAllGeyserProjectEntries'
 export * from './useDebounce'
 export * from './useFormState'
-export * from './useFundingFlow'
 export * from './useFundingFormState'
 export * from './useListenerState'
 export * from './useQueryWithPagination'