diff --git a/src/graphql/subscriptions/fundingActivity.ts b/src/graphql/subscriptions/fundingActivity.ts new file mode 100644 index 000000000..a19f1dcd7 --- /dev/null +++ b/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 + } + } + } +` diff --git a/src/hooks/fundingFlow/useFundSubscription.tsx b/src/hooks/fundingFlow/useFundSubscription.tsx new file mode 100644 index 000000000..d3b4a762e --- /dev/null +++ b/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(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 } +} diff --git a/src/hooks/useFundingFlow.tsx b/src/hooks/fundingFlow/useFundingFlow.tsx similarity index 91% rename from src/hooks/useFundingFlow.tsx rename to src/hooks/fundingFlow/useFundingFlow.tsx index 4d5c736bc..ef39c15a2 100644 --- a/src/hooks/useFundingFlow.tsx +++ b/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 @@ -127,6 +129,10 @@ export const useFundingFlow = (options?: IFundingFlowOptions) => { funder: { ...initialFunding.funder, user }, }) + const { startListening } = useFundSubscription({ + projectId: fundingTx.projectId, + }) + const [amounts, setAmounts] = useState(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, diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 6723fb35d..511c5dd9d 100644 --- a/src/hooks/index.ts +++ b/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'