Move useInvoice and useQrPayment into own files (#1686)

components/item-info.js

@@ -22,7 +22,7 @@ import { DropdownItemUpVote } from './upvote'
 import { useRoot } from './root'
 import { MuteSubDropdownItem, PinSubDropdownItem } from './territory-header'
 import UserPopover from './user-popover'
-import { useQrPayment } from './payment'
+import useQrPayment from './use-qr-payment'
 import { useRetryCreateItem } from './use-item-submit'
 import { useToast } from './toast'
 import { useShowModal } from './modal'

components/poll.js

@@ -5,7 +5,7 @@ import { useMe } from './me'
 import styles from './poll.module.css'
 import { signIn } from 'next-auth/react'
 import ActionTooltip from './action-tooltip'
-import { useQrPayment } from './payment'
+import useQrPayment from './use-qr-payment'
 import { useToast } from './toast'
 import { usePaidMutation } from './use-paid-mutation'
 import { POLL_VOTE, RETRY_PAID_ACTION } from '@/fragments/paidAction'

components/use-invoice.js

@@ -1,12 +1,10 @@
-import { useCallback } from 'react'
 import { useApolloClient, useMutation } from '@apollo/client'
-import { CANCEL_INVOICE, INVOICE } from '@/fragments/wallet'
+import { useCallback } from 'react'
-import Invoice from '@/components/invoice'
-import { useShowModal } from './modal'
-import { InvoiceCanceledError, InvoiceExpiredError } from '@/wallets/errors'
 import { RETRY_PAID_ACTION } from '@/fragments/paidAction'
+import { INVOICE, CANCEL_INVOICE } from '@/fragments/wallet'
+import { InvoiceExpiredError, InvoiceCanceledError } from '@/wallets/errors'
 
-export const useInvoice = () => {
+export default function useInvoice () {
   const client = useApolloClient()
   const [retryPaidAction] = useMutation(RETRY_PAID_ACTION)
 
@@ -60,45 +58,3 @@ export const useInvoice = () => {
 
   return { cancel, retry, isInvoice }
 }
-
-export const useQrPayment = () => {
-  const invoice = useInvoice()
-  const showModal = useShowModal()
-
-  const waitForQrPayment = useCallback(async (inv, walletError,
-    {
-      keepOpen = true,
-      cancelOnClose = true,
-      persistOnNavigate = false,
-      waitFor = inv => inv?.satsReceived > 0
-    } = {}
-  ) => {
-    return await new Promise((resolve, reject) => {
-      let paid
-      const cancelAndReject = async (onClose) => {
-        if (!paid && cancelOnClose) {
-          const updatedInv = await invoice.cancel(inv).catch(console.error)
-          reject(new InvoiceCanceledError(updatedInv))
-        }
-        resolve(inv)
-      }
-      showModal(onClose =>
-        <Invoice
-          id={inv.id}
-          modal
-          description
-          status='loading'
-          successVerb='received'
-          walletError={walletError}
-          waitFor={waitFor}
-          onExpired={inv => reject(new InvoiceExpiredError(inv))}
-          onCanceled={inv => { onClose(); reject(new InvoiceCanceledError(inv, inv?.actionError)) }}
-          onPayment={(inv) => { paid = true; onClose(); resolve(inv) }}
-          poll
-        />,
-      { keepOpen, persistOnNavigate, onClose: cancelAndReject })
-    })
-  }, [invoice])
-
-  return waitForQrPayment
-}

components/use-paid-mutation.js

@@ -1,6 +1,7 @@
 import { useApolloClient, useLazyQuery, useMutation } from '@apollo/client'
 import { useCallback, useState } from 'react'
-import { useInvoice, useQrPayment } from './payment'
+import useQrPayment from '@/components/use-qr-payment'
+import useInvoice from '@/components/use-invoice'
 import { InvoiceCanceledError, InvoiceExpiredError, WalletError, WalletPaymentError } from '@/wallets/errors'
 import { GET_PAID_ACTION } from '@/fragments/paidAction'
 import { useWalletPayment } from '@/wallets/payment'

components/use-qr-payment.js

@@ -0,0 +1,47 @@
+import { useCallback } from 'react'
+import Invoice from '@/components/invoice'
+import { InvoiceCanceledError, InvoiceExpiredError } from '@/wallets/errors'
+import { useShowModal } from '@/components/modal'
+import useInvoice from '@/components/use-invoice'
+
+export default function useQrPayment () {
+  const invoice = useInvoice()
+  const showModal = useShowModal()
+
+  const waitForQrPayment = useCallback(async (inv, walletError,
+    {
+      keepOpen = true,
+      cancelOnClose = true,
+      persistOnNavigate = false,
+      waitFor = inv => inv?.satsReceived > 0
+    } = {}
+  ) => {
+    return await new Promise((resolve, reject) => {
+      let paid
+      const cancelAndReject = async (onClose) => {
+        if (!paid && cancelOnClose) {
+          const updatedInv = await invoice.cancel(inv).catch(console.error)
+          reject(new InvoiceCanceledError(updatedInv))
+        }
+        resolve(inv)
+      }
+      showModal(onClose =>
+        <Invoice
+          id={inv.id}
+          modal
+          description
+          status='loading'
+          successVerb='received'
+          walletError={walletError}
+          waitFor={waitFor}
+          onExpired={inv => reject(new InvoiceExpiredError(inv))}
+          onCanceled={inv => { onClose(); reject(new InvoiceCanceledError(inv, inv?.actionError)) }}
+          onPayment={(inv) => { paid = true; onClose(); resolve(inv) }}
+          poll
+        />,
+      { keepOpen, persistOnNavigate, onClose: cancelAndReject })
+    })
+  }, [invoice])
+
+  return waitForQrPayment
+}

wallets/payment.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useSendWallets } from '@/wallets'
 import { formatSats } from '@/lib/format'
-import { useInvoice } from '@/components/payment'
+import useInvoice from '@/components/use-invoice'
 import { FAST_POLL_INTERVAL } from '@/lib/constants'
 import {
   WalletsNotAvailableError, WalletSenderError, WalletAggregateError, WalletPaymentAggregateError,