2023-11-11 00:18:10 +00:00
|
|
|
import { useEffect, useContext, createContext, useState, useCallback, useMemo } from 'react'
|
2023-07-24 18:35:05 +00:00
|
|
|
import Table from 'react-bootstrap/Table'
|
2022-08-10 15:06:31 +00:00
|
|
|
import ActionTooltip from './action-tooltip'
|
|
|
|
import Info from './info'
|
|
|
|
import styles from './fee-button.module.css'
|
|
|
|
import { gql, useQuery } from '@apollo/client'
|
2024-03-20 00:37:31 +00:00
|
|
|
import { ANON_FEE_MULTIPLIER, SSR } from '@/lib/constants'
|
|
|
|
import { numWithUnits } from '@/lib/format'
|
2023-08-09 22:02:43 +00:00
|
|
|
import { useMe } from './me'
|
2024-03-20 00:37:31 +00:00
|
|
|
import AnonIcon from '@/svgs/spy-fill.svg'
|
2023-08-10 19:41:56 +00:00
|
|
|
import { useShowModal } from './modal'
|
|
|
|
import Link from 'next/link'
|
2023-11-11 00:18:10 +00:00
|
|
|
import { SubmitButton } from './form'
|
2022-08-10 15:06:31 +00:00
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
const FeeButtonContext = createContext()
|
2022-08-10 15:06:31 +00:00
|
|
|
|
2023-12-10 21:41:20 +00:00
|
|
|
export function postCommentBaseLineItems ({ baseCost = 1, comment = false, allowFreebies = true, me }) {
|
2023-11-11 00:18:10 +00:00
|
|
|
const anonCharge = me
|
|
|
|
? {}
|
|
|
|
: {
|
|
|
|
anonCharge: {
|
2023-12-10 22:56:06 +00:00
|
|
|
term: `x ${ANON_FEE_MULTIPLIER}`,
|
2023-11-11 00:18:10 +00:00
|
|
|
label: 'anon mult',
|
2023-12-10 22:56:06 +00:00
|
|
|
modifier: (cost) => cost * ANON_FEE_MULTIPLIER
|
2023-11-11 00:18:10 +00:00
|
|
|
}
|
2023-08-10 19:41:56 +00:00
|
|
|
}
|
2023-11-11 00:18:10 +00:00
|
|
|
return {
|
|
|
|
baseCost: {
|
|
|
|
term: baseCost,
|
|
|
|
label: `${comment ? 'comment' : 'post'} cost`,
|
2023-12-10 21:41:20 +00:00
|
|
|
modifier: (cost) => cost + baseCost,
|
|
|
|
allowFreebies
|
2023-11-11 00:18:10 +00:00
|
|
|
},
|
|
|
|
...anonCharge
|
|
|
|
}
|
2023-08-10 19:41:56 +00:00
|
|
|
}
|
|
|
|
|
2023-12-10 21:41:20 +00:00
|
|
|
export function postCommentUseRemoteLineItems ({ parentId } = {}) {
|
2022-08-10 15:06:31 +00:00
|
|
|
const query = parentId
|
|
|
|
? gql`{ itemRepetition(parentId: "${parentId}") }`
|
|
|
|
: gql`{ itemRepetition }`
|
2023-11-20 19:20:28 +00:00
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
return function useRemoteLineItems () {
|
|
|
|
const [line, setLine] = useState({})
|
|
|
|
|
|
|
|
const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
|
2022-08-10 15:06:31 +00:00
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
useEffect(() => {
|
2023-11-20 19:20:28 +00:00
|
|
|
const repetition = data?.itemRepetition
|
|
|
|
if (!repetition) return setLine({})
|
2023-11-11 00:18:10 +00:00
|
|
|
setLine({
|
|
|
|
itemRepetition: {
|
|
|
|
term: <>x 10<sup>{repetition}</sup></>,
|
|
|
|
label: <>{repetition} {parentId ? 'repeat or self replies' : 'posts'} in 10m</>,
|
|
|
|
modifier: (cost) => cost * Math.pow(10, repetition)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}, [data?.itemRepetition])
|
|
|
|
|
|
|
|
return line
|
|
|
|
}
|
|
|
|
}
|
2023-07-20 22:34:39 +00:00
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
export function FeeButtonProvider ({ baseLineItems = {}, useRemoteLineItems = () => null, children }) {
|
|
|
|
const [lineItems, setLineItems] = useState({})
|
2023-11-13 15:30:01 +00:00
|
|
|
const [disabled, setDisabled] = useState(false)
|
2023-11-11 00:18:10 +00:00
|
|
|
|
|
|
|
const remoteLineItems = useRemoteLineItems()
|
|
|
|
|
|
|
|
const mergeLineItems = useCallback((newLineItems) => {
|
|
|
|
setLineItems(lineItems => ({
|
|
|
|
...lineItems,
|
|
|
|
...newLineItems
|
|
|
|
}))
|
|
|
|
}, [setLineItems])
|
|
|
|
|
|
|
|
const value = useMemo(() => {
|
|
|
|
const lines = { ...baseLineItems, ...lineItems, ...remoteLineItems }
|
|
|
|
return {
|
|
|
|
lines,
|
|
|
|
merge: mergeLineItems,
|
2023-11-13 15:30:01 +00:00
|
|
|
total: Object.values(lines).reduce((acc, { modifier }) => modifier(acc), 0),
|
|
|
|
disabled,
|
|
|
|
setDisabled
|
2023-11-11 00:18:10 +00:00
|
|
|
}
|
2023-11-13 15:30:01 +00:00
|
|
|
}, [baseLineItems, lineItems, remoteLineItems, mergeLineItems, disabled, setDisabled])
|
2023-11-11 00:18:10 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<FeeButtonContext.Provider value={value}>
|
|
|
|
{children}
|
|
|
|
</FeeButtonContext.Provider>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function useFeeButton () {
|
2023-11-21 23:32:22 +00:00
|
|
|
const context = useContext(FeeButtonContext)
|
|
|
|
return context
|
2023-11-11 00:18:10 +00:00
|
|
|
}
|
|
|
|
|
2023-11-19 20:16:35 +00:00
|
|
|
function FreebieDialog () {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className='fw-bold'>you don't have enough sats, so this one is on us</div>
|
|
|
|
<ul className='mt-2'>
|
|
|
|
<li>Free items have limited visibility until other stackers zap them.</li>
|
|
|
|
<li>To get fully visibile right away, fund your account with a few sats or earn some on Stacker News.</li>
|
|
|
|
</ul>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
export default function FeeButton ({ ChildButton = SubmitButton, variant, text, disabled }) {
|
|
|
|
const me = useMe()
|
2023-11-13 15:30:01 +00:00
|
|
|
const { lines, total, disabled: ctxDisabled } = useFeeButton()
|
2023-12-10 21:41:20 +00:00
|
|
|
// freebies: there's only a base cost and we don't have enough sats
|
|
|
|
const free = total === lines.baseCost?.modifier(0) && lines.baseCost?.allowFreebies && me?.privates?.sats < total
|
2023-11-19 20:16:35 +00:00
|
|
|
const feeText = free
|
|
|
|
? 'free'
|
|
|
|
: total > 1
|
|
|
|
? numWithUnits(total, { abbreviate: false, format: true })
|
|
|
|
: undefined
|
2023-12-10 21:41:20 +00:00
|
|
|
disabled ||= ctxDisabled
|
2023-11-06 20:53:33 +00:00
|
|
|
|
2022-08-10 15:06:31 +00:00
|
|
|
return (
|
2023-08-10 19:41:56 +00:00
|
|
|
<div className={styles.feeButton}>
|
2023-11-20 19:20:28 +00:00
|
|
|
<ActionTooltip overlayText={feeText}>
|
2023-12-10 21:41:20 +00:00
|
|
|
<ChildButton variant={variant} disabled={disabled} nonDisabledText={feeText}>{text}</ChildButton>
|
2022-08-10 15:06:31 +00:00
|
|
|
</ActionTooltip>
|
2023-08-10 19:41:56 +00:00
|
|
|
{!me && <AnonInfo />}
|
2023-11-19 20:16:35 +00:00
|
|
|
{(free && <Info><FreebieDialog /></Info>) ||
|
|
|
|
(total > 1 && <Info><Receipt lines={lines} total={total} /></Info>)}
|
2022-08-10 15:06:31 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2022-08-18 18:15:24 +00:00
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
function Receipt ({ lines, total }) {
|
2022-08-18 18:15:24 +00:00
|
|
|
return (
|
|
|
|
<Table className={styles.receipt} borderless size='sm'>
|
|
|
|
<tbody>
|
2023-11-11 00:18:10 +00:00
|
|
|
{Object.entries(lines).map(([key, { term, label, omit }]) => (
|
|
|
|
!omit &&
|
|
|
|
<tr key={key}>
|
|
|
|
<td>{term}</td>
|
|
|
|
<td align='right' className='font-weight-light'>{label}</td>
|
|
|
|
</tr>))}
|
2022-08-18 18:15:24 +00:00
|
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
|
|
<tr>
|
2023-11-11 00:18:10 +00:00
|
|
|
<td className='fw-bold'>{numWithUnits(total, { abbreviate: false, format: true })}</td>
|
2022-08-18 18:15:24 +00:00
|
|
|
<td align='right' className='font-weight-light'>total fee</td>
|
|
|
|
</tr>
|
|
|
|
</tfoot>
|
|
|
|
</Table>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-11-11 00:18:10 +00:00
|
|
|
function AnonInfo () {
|
|
|
|
const showModal = useShowModal()
|
2023-11-06 20:53:33 +00:00
|
|
|
|
2022-08-18 18:15:24 +00:00
|
|
|
return (
|
2023-11-11 00:18:10 +00:00
|
|
|
<AnonIcon
|
|
|
|
className='fill-muted ms-2 theme' height={22} width={22}
|
|
|
|
onClick={
|
|
|
|
(e) =>
|
|
|
|
showModal(onClose =>
|
|
|
|
<div><div className='fw-bold text-center'>You are posting without an account</div>
|
|
|
|
<ol className='my-3'>
|
|
|
|
<li>You'll pay by invoice</li>
|
|
|
|
<li>Your content will be content-joined (get it?!) under the <Link href='/anon' target='_blank'>@anon</Link> account</li>
|
|
|
|
<li>Any sats your content earns will go toward <Link href='/rewards' target='_blank'>rewards</Link></li>
|
|
|
|
<li>We won't be able to notify you when you receive replies</li>
|
|
|
|
</ol>
|
|
|
|
<small className='text-center fst-italic text-muted'>btw if you don't need to be anonymous, posting is cheaper with an account</small>
|
|
|
|
</div>)
|
|
|
|
}
|
|
|
|
/>
|
2022-08-18 18:15:24 +00:00
|
|
|
)
|
|
|
|
}
|