2023-08-09 23:45:59 +00:00
|
|
|
import { useState, useCallback, useEffect } from 'react'
|
|
|
|
import { useMutation, useQuery } from '@apollo/client'
|
|
|
|
import { Button } from 'react-bootstrap'
|
|
|
|
import { gql } from 'graphql-tag'
|
2023-08-08 21:04:06 +00:00
|
|
|
import { numWithUnits } from '../lib/format'
|
2023-08-09 23:45:59 +00:00
|
|
|
import AccordianItem from './accordian-item'
|
|
|
|
import Qr, { QrSkeleton } from './qr'
|
|
|
|
import { CopyInput } from './form'
|
|
|
|
import { INVOICE } from '../fragments/wallet'
|
|
|
|
import InvoiceStatus from './invoice-status'
|
|
|
|
import { useMe } from './me'
|
|
|
|
import { useShowModal } from './modal'
|
|
|
|
import { sleep } from '../lib/time'
|
|
|
|
import FundError, { isInsufficientFundsError } from './fund-error'
|
2021-05-06 21:15:22 +00:00
|
|
|
|
2023-07-13 03:08:32 +00:00
|
|
|
export function Invoice ({ invoice, onConfirmation, successVerb }) {
|
2021-05-13 13:28:38 +00:00
|
|
|
let variant = 'default'
|
2021-05-11 15:52:50 +00:00
|
|
|
let status = 'waiting for you'
|
2023-08-08 18:19:31 +00:00
|
|
|
let webLn = true
|
2021-05-11 15:52:50 +00:00
|
|
|
if (invoice.confirmedAt) {
|
2021-05-13 13:28:38 +00:00
|
|
|
variant = 'confirmed'
|
2023-08-09 22:02:43 +00:00
|
|
|
status = `${numWithUnits(invoice.satsReceived, { abbreviate: false })} ${successVerb || 'deposited'}`
|
2023-08-08 18:19:31 +00:00
|
|
|
webLn = false
|
2021-05-11 15:52:50 +00:00
|
|
|
} else if (invoice.cancelled) {
|
2021-05-13 13:28:38 +00:00
|
|
|
variant = 'failed'
|
2021-05-11 15:52:50 +00:00
|
|
|
status = 'cancelled'
|
2023-08-08 18:19:31 +00:00
|
|
|
webLn = false
|
2021-05-11 15:52:50 +00:00
|
|
|
} else if (invoice.expiresAt <= new Date()) {
|
2021-05-13 13:28:38 +00:00
|
|
|
variant = 'failed'
|
2021-05-11 15:52:50 +00:00
|
|
|
status = 'expired'
|
2023-08-08 18:19:31 +00:00
|
|
|
webLn = false
|
2021-05-11 15:52:50 +00:00
|
|
|
}
|
2021-05-06 21:15:22 +00:00
|
|
|
|
2023-08-10 02:13:09 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (invoice.confirmedAt) {
|
|
|
|
onConfirmation?.(invoice)
|
|
|
|
}
|
|
|
|
}, [invoice.confirmedAt])
|
|
|
|
|
2023-08-08 18:19:31 +00:00
|
|
|
const { nostr } = invoice
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2023-08-11 00:58:33 +00:00
|
|
|
<Qr
|
|
|
|
webLn={webLn} value={invoice.bolt11}
|
|
|
|
description={numWithUnits(invoice.satsRequested, { abbreviate: false })}
|
|
|
|
statusVariant={variant} status={status}
|
|
|
|
/>
|
2023-08-08 18:19:31 +00:00
|
|
|
<div className='w-100'>
|
|
|
|
{nostr
|
|
|
|
? <AccordianItem
|
|
|
|
header='Nostr Zap Request'
|
|
|
|
body={
|
|
|
|
<pre>
|
|
|
|
<code>
|
|
|
|
{JSON.stringify(nostr, null, 2)}
|
|
|
|
</code>
|
|
|
|
</pre>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
: null}
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
2021-05-06 21:15:22 +00:00
|
|
|
}
|
2023-08-09 23:45:59 +00:00
|
|
|
|
2023-08-10 05:10:05 +00:00
|
|
|
const Contacts = ({ invoiceHash, invoiceHmac }) => {
|
2023-08-09 23:45:59 +00:00
|
|
|
const subject = `Support request for payment hash: ${invoiceHash}`
|
|
|
|
const body = 'Hi, I successfully paid for <insert action> but the action did not work.'
|
|
|
|
return (
|
2023-08-10 19:41:56 +00:00
|
|
|
<div className='d-flex flex-column justify-content-center mt-2'>
|
2023-08-09 23:45:59 +00:00
|
|
|
<span>Payment hash</span>
|
|
|
|
<div className='w-100'>
|
|
|
|
<CopyInput type='text' placeholder={invoiceHash} readOnly noForm />
|
|
|
|
</div>
|
2023-08-10 05:10:05 +00:00
|
|
|
<span>Payment HMAC</span>
|
|
|
|
<div className='w-100'>
|
|
|
|
<CopyInput type='text' placeholder={invoiceHmac} readOnly noForm />
|
|
|
|
</div>
|
2023-08-09 23:45:59 +00:00
|
|
|
<div className='d-flex flex-row justify-content-center'>
|
|
|
|
<a
|
|
|
|
href={`mailto:kk@stacker.news?subject=${subject}&body=${body}`} className='nav-link p-0 d-inline-flex'
|
|
|
|
target='_blank' rel='noreferrer'
|
|
|
|
>
|
|
|
|
e-mail
|
|
|
|
</a>
|
|
|
|
<span className='mx-2 text-muted'> \ </span>
|
|
|
|
<a
|
|
|
|
href='https://tribes.sphinx.chat/t/stackerzchat' className='nav-link p-0 d-inline-flex'
|
|
|
|
target='_blank' rel='noreferrer'
|
|
|
|
>
|
|
|
|
sphinx
|
|
|
|
</a>
|
|
|
|
<span className='mx-2 text-muted'> \ </span>
|
|
|
|
<a
|
|
|
|
href='https://t.me/k00bideh' className='nav-link p-0 d-inline-flex'
|
|
|
|
target='_blank' rel='noreferrer'
|
|
|
|
>
|
|
|
|
telegram
|
|
|
|
</a>
|
|
|
|
<span className='mx-2 text-muted'> \ </span>
|
|
|
|
<a
|
|
|
|
href='https://simplex.chat/contact#/?v=1-2&smp=smp%3A%2F%2F6iIcWT_dF2zN_w5xzZEY7HI2Prbh3ldP07YTyDexPjE%3D%40smp10.simplex.im%2FebLYaEFGjsD3uK4fpE326c5QI1RZSxau%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAV086Oj5yCsavWzIbRMCVuF6jq793Tt__rWvCec__viI%253D%26srv%3Drb2pbttocvnbrngnwziclp2f4ckjq65kebafws6g4hy22cdaiv5dwjqd.onion&data=%7B%22type%22%3A%22group%22%2C%22groupLinkId%22%3A%22cZwSGoQhyOUulzp7rwCdWQ%3D%3D%22%7D' className='nav-link p-0 d-inline-flex'
|
|
|
|
target='_blank' rel='noreferrer'
|
|
|
|
>
|
|
|
|
simplex
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-08-10 05:10:05 +00:00
|
|
|
const ActionInvoice = ({ id, hash, hmac, errorCount, repeat, ...props }) => {
|
2023-08-09 23:45:59 +00:00
|
|
|
const { data, loading, error } = useQuery(INVOICE, {
|
|
|
|
pollInterval: 1000,
|
|
|
|
variables: { id }
|
|
|
|
})
|
|
|
|
if (error) {
|
|
|
|
if (error.message?.includes('invoice not found')) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
return <div>error</div>
|
|
|
|
}
|
|
|
|
if (!data || loading) {
|
|
|
|
return <QrSkeleton status='loading' />
|
|
|
|
}
|
|
|
|
|
2023-08-10 19:41:56 +00:00
|
|
|
let errorStatus = 'Something went wrong trying to perform the action after payment.'
|
2023-08-09 23:45:59 +00:00
|
|
|
if (errorCount > 1) {
|
|
|
|
errorStatus = 'Something still went wrong.\nPlease contact admins for support or to request a refund.'
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Invoice invoice={data.invoice} {...props} />
|
|
|
|
{errorCount > 0
|
|
|
|
? (
|
|
|
|
<>
|
2023-08-10 19:41:56 +00:00
|
|
|
<div className='my-3'>
|
|
|
|
<InvoiceStatus variant='failed' status={errorStatus} />
|
|
|
|
</div>
|
2023-08-10 21:04:06 +00:00
|
|
|
<div className='d-flex flex-row mt-3 justify-content-center'><Button variant='info' onClick={repeat}>Retry</Button></div>
|
|
|
|
<Contacts invoiceHash={hash} invoiceHmac={hmac} />
|
2023-08-09 23:45:59 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
: null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const defaultOptions = {
|
|
|
|
forceInvoice: false,
|
|
|
|
requireSession: false
|
|
|
|
}
|
|
|
|
export const useInvoiceable = (fn, options = defaultOptions) => {
|
|
|
|
const me = useMe()
|
|
|
|
const [createInvoice, { data }] = useMutation(gql`
|
|
|
|
mutation createInvoice($amount: Int!) {
|
|
|
|
createInvoice(amount: $amount) {
|
|
|
|
id
|
|
|
|
hash
|
2023-08-10 05:10:05 +00:00
|
|
|
hmac
|
2023-08-09 23:45:59 +00:00
|
|
|
}
|
|
|
|
}`)
|
|
|
|
const showModal = useShowModal()
|
|
|
|
const [fnArgs, setFnArgs] = useState()
|
|
|
|
|
|
|
|
// fix for bug where `showModal` runs the code for two modals and thus executes `onConfirmation` twice
|
|
|
|
let errorCount = 0
|
|
|
|
const onConfirmation = useCallback(
|
2023-08-10 05:10:05 +00:00
|
|
|
(onClose, hmac) => {
|
2023-08-09 23:45:59 +00:00
|
|
|
return async ({ id, satsReceived, hash }) => {
|
|
|
|
await sleep(2000)
|
|
|
|
const repeat = () =>
|
2023-08-10 05:10:05 +00:00
|
|
|
fn(satsReceived, ...fnArgs, hash, hmac)
|
2023-08-09 23:45:59 +00:00
|
|
|
.then(onClose)
|
|
|
|
.catch((error) => {
|
|
|
|
console.error(error)
|
|
|
|
errorCount++
|
|
|
|
onClose()
|
|
|
|
showModal(onClose => (
|
|
|
|
<ActionInvoice
|
|
|
|
id={id}
|
|
|
|
hash={hash}
|
2023-08-10 05:10:05 +00:00
|
|
|
hmac={hmac}
|
|
|
|
onConfirmation={onConfirmation(onClose, hmac)}
|
2023-08-09 23:45:59 +00:00
|
|
|
successVerb='received'
|
|
|
|
errorCount={errorCount}
|
|
|
|
repeat={repeat}
|
|
|
|
/>
|
|
|
|
), { keepOpen: true })
|
|
|
|
})
|
|
|
|
// prevents infinite loop of calling `onConfirmation`
|
|
|
|
if (errorCount === 0) await repeat()
|
|
|
|
}
|
|
|
|
}, [fn, fnArgs]
|
|
|
|
)
|
|
|
|
|
|
|
|
const invoice = data?.createInvoice
|
|
|
|
useEffect(() => {
|
|
|
|
if (invoice) {
|
|
|
|
showModal(onClose => (
|
|
|
|
<ActionInvoice
|
|
|
|
id={invoice.id}
|
|
|
|
hash={invoice.hash}
|
2023-08-10 05:10:05 +00:00
|
|
|
hmac={invoice.hmac}
|
|
|
|
onConfirmation={onConfirmation(onClose, invoice.hmac)}
|
2023-08-09 23:45:59 +00:00
|
|
|
successVerb='received'
|
|
|
|
/>
|
|
|
|
), { keepOpen: true }
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}, [invoice?.id])
|
|
|
|
|
|
|
|
const actionFn = useCallback(async (amount, ...args) => {
|
|
|
|
if (!me && options.requireSession) {
|
|
|
|
throw new Error('you must be logged in')
|
|
|
|
}
|
2023-08-11 03:11:41 +00:00
|
|
|
if (!amount || (me && !options.forceInvoice)) {
|
2023-08-09 23:45:59 +00:00
|
|
|
try {
|
|
|
|
return await fn(amount, ...args)
|
|
|
|
} catch (error) {
|
|
|
|
if (isInsufficientFundsError(error)) {
|
|
|
|
showModal(onClose => {
|
|
|
|
return (
|
|
|
|
<FundError
|
|
|
|
onClose={onClose}
|
|
|
|
amount={amount}
|
2023-08-10 05:10:05 +00:00
|
|
|
onPayment={async (_, invoiceHash, invoiceHmac) => { await fn(amount, ...args, invoiceHash, invoiceHmac) }}
|
2023-08-09 23:45:59 +00:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
2023-08-11 03:03:10 +00:00
|
|
|
throw error
|
2023-08-09 23:45:59 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
setFnArgs(args)
|
|
|
|
return createInvoice({ variables: { amount } })
|
|
|
|
}, [fn, setFnArgs, createInvoice])
|
|
|
|
|
|
|
|
return actionFn
|
|
|
|
}
|