Allow pay per invoice for bounty and job posts

components/bounty-form.js

@@ -8,6 +8,8 @@ import InputGroup from 'react-bootstrap/InputGroup'
 import { bountySchema } from '../lib/validate'
 import { SubSelectInitial } from './sub-select-form'
 import CancelButton from './cancel-button'
+import { useCallback } from 'react'
+import { useAnonymous } from '../lib/anonymous'
 
 export function BountyForm ({
   item,
@@ -49,6 +51,33 @@ export function BountyForm ({
     `
   )
 
+  const submitUpsertBounty = useCallback(
+    // we ignore the invoice since only stackers can post bounties
+    // the invoice is only for funding the wallet
+    async (_, boost, bounty, values, __) => {
+      const { error } = await upsertBounty({
+        variables: {
+          sub: item?.subName || sub?.name,
+          id: item?.id,
+          boost: boost ? Number(boost) : undefined,
+          bounty: bounty ? Number(bounty) : undefined,
+          ...values
+        }
+      })
+      if (error) {
+        throw new Error({ message: error.toString() })
+      }
+
+      if (item) {
+        await router.push(`/items/${item.id}`)
+      } else {
+        const prefix = sub?.name ? `/~${sub.name}` : ''
+        await router.push(prefix + '/recent')
+      }
+    }, [upsertBounty, router])
+
+  const anonUpsertBounty = useAnonymous(submitUpsertBounty, { requireSession: true })
+
   return (
     <Form
       initial={{
@@ -61,26 +90,8 @@ export function BountyForm ({
       schema={schema}
       onSubmit={
         handleSubmit ||
-        (async ({ boost, bounty, ...values }) => {
+        (async ({ boost, bounty, cost, ...values }) => {
-          const { error } = await upsertBounty({
+          await anonUpsertBounty(cost, boost, bounty, values)
-            variables: {
-              sub: item?.subName || sub?.name,
-              id: item?.id,
-              boost: boost ? Number(boost) : undefined,
-              bounty: bounty ? Number(bounty) : undefined,
-              ...values
-            }
-          })
-          if (error) {
-            throw new Error({ message: error.toString() })
-          }
-
-          if (item) {
-            await router.push(`/items/${item.id}`)
-          } else {
-            const prefix = sub?.name ? `/~${sub.name}` : ''
-            await router.push(prefix + '/recent')
-          }
         })
       }
       storageKeyPrefix={item ? undefined : 'bounty'}

components/job-form.js

@@ -5,7 +5,7 @@ import InputGroup from 'react-bootstrap/InputGroup'
 import Image from 'react-bootstrap/Image'
 import BootstrapForm from 'react-bootstrap/Form'
 import Alert from 'react-bootstrap/Alert'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Info from './info'
 import AccordianItem from './accordian-item'
 import styles from '../styles/post.module.css'
@@ -17,6 +17,7 @@ import Avatar from './avatar'
 import ActionTooltip from './action-tooltip'
 import { jobSchema } from '../lib/validate'
 import CancelButton from './cancel-button'
+import { useAnonymous } from '../lib/anonymous'
 
 function satsMin2Mo (minute) {
   return minute * 30 * 24 * 60
@@ -50,6 +51,40 @@ export default function JobForm ({ item, sub }) {
     }`
   )
 
+  const submitUpsertJob = useCallback(
+    // we ignore the invoice since only stackers can post bounties
+    // the invoice is only for funding the wallet
+    async (_, maxBid, stop, start, values, __) => {
+      let status
+      if (start) {
+        status = 'ACTIVE'
+      } else if (stop) {
+        status = 'STOPPED'
+      }
+
+      const { error } = await upsertJob({
+        variables: {
+          id: item?.id,
+          sub: item?.subName || sub?.name,
+          maxBid: Number(maxBid),
+          status,
+          logo: Number(logoId),
+          ...values
+        }
+      })
+      if (error) {
+        throw new Error({ message: error.toString() })
+      }
+
+      if (item) {
+        await router.push(`/items/${item.id}`)
+      } else {
+        await router.push(`/~${sub.name}/recent`)
+      }
+    }, [upsertJob, router])
+
+  const anonUpsertJob = useAnonymous(submitUpsertJob, { requireSession: true })
+
   return (
     <>
       <Form
@@ -68,32 +103,7 @@ export default function JobForm ({ item, sub }) {
         schema={jobSchema}
         storageKeyPrefix={storageKeyPrefix}
         onSubmit={(async ({ maxBid, stop, start, ...values }) => {
-          let status
+          await anonUpsertJob(1000, maxBid, stop, start, values)
-          if (start) {
-            status = 'ACTIVE'
-          } else if (stop) {
-            status = 'STOPPED'
-          }
-
-          const { error } = await upsertJob({
-            variables: {
-              id: item?.id,
-              sub: item?.subName || sub?.name,
-              maxBid: Number(maxBid),
-              status,
-              logo: Number(logoId),
-              ...values
-            }
-          })
-          if (error) {
-            throw new Error({ message: error.toString() })
-          }
-
-          if (item) {
-            await router.push(`/items/${item.id}`)
-          } else {
-            await router.push(`/~${sub.name}/recent`)
-          }
         })}
       >
         <div className='form-group'>

lib/anonymous.js

@@ -100,7 +100,8 @@ export const isInsufficientFundsError = (error) => {
 }
 
 const defaultOptions = {
-  forceInvoice: false
+  forceInvoice: false,
+  requireSession: false
 }
 export const useAnonymous = (fn, options = defaultOptions) => {
   const me = useMe()
@@ -164,6 +165,9 @@ export const useAnonymous = (fn, options = defaultOptions) => {
   }, [invoice?.id])
 
   const anonFn = useCallback(async (amount, ...args) => {
+    if (!me && options.requireSession) {
+      throw new Error('you must be logged in')
+    }
     if (me && !options.forceInvoice) {
       try {
         return await fn(amount, ...args)