2021-12-15 16:50:11 +00:00
|
|
|
import { useQuery } from '@apollo/client'
|
|
|
|
import Link from 'next/link'
|
|
|
|
import { Table } from 'react-bootstrap'
|
|
|
|
import { getGetServerSideProps } from '../api/ssrApollo'
|
|
|
|
import Layout from '../components/layout'
|
|
|
|
import MoreFooter from '../components/more-footer'
|
|
|
|
import UserHeader from '../components/user-header'
|
|
|
|
import { WALLET_HISTORY } from '../fragments/wallet'
|
|
|
|
import styles from '../styles/satistics.module.css'
|
|
|
|
import Moon from '../svgs/moon-fill.svg'
|
|
|
|
import Check from '../svgs/check-double-line.svg'
|
|
|
|
import ThumbDown from '../svgs/thumb-down-fill.svg'
|
2021-12-16 17:27:12 +00:00
|
|
|
import { Checkbox, Form } from '../components/form'
|
|
|
|
import { useRouter } from 'next/router'
|
2021-12-16 20:02:17 +00:00
|
|
|
import Item from '../components/item'
|
|
|
|
import Comment from '../components/comment'
|
2022-08-18 20:57:48 +00:00
|
|
|
import React from 'react'
|
2023-01-12 23:53:09 +00:00
|
|
|
import ItemJob from '../components/item-job'
|
2021-12-15 16:50:11 +00:00
|
|
|
|
|
|
|
export const getServerSideProps = getGetServerSideProps(WALLET_HISTORY)
|
|
|
|
|
|
|
|
function satusClass (status) {
|
2021-12-16 20:02:17 +00:00
|
|
|
if (!status) {
|
|
|
|
return ''
|
|
|
|
}
|
|
|
|
|
2021-12-15 16:50:11 +00:00
|
|
|
switch (status) {
|
|
|
|
case 'CONFIRMED':
|
|
|
|
return ''
|
|
|
|
case 'PENDING':
|
|
|
|
return 'text-muted'
|
|
|
|
default:
|
|
|
|
return styles.failed
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function Satus ({ status }) {
|
|
|
|
if (!status) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
const desc = () => {
|
|
|
|
switch (status) {
|
|
|
|
case 'CONFIRMED':
|
|
|
|
return 'confirmed'
|
|
|
|
case 'EXPIRED':
|
|
|
|
return 'expired'
|
|
|
|
case 'INSUFFICIENT_BALANCE':
|
|
|
|
return "you didn't have enough sats"
|
|
|
|
case 'INVALID_PAYMENT':
|
|
|
|
return 'invalid payment'
|
|
|
|
case 'PATHFINDING_TIMEOUT':
|
|
|
|
case 'ROUTE_NOT_FOUND':
|
|
|
|
return 'no route found'
|
|
|
|
case 'PENDING':
|
|
|
|
return 'pending'
|
|
|
|
default:
|
|
|
|
return 'unknown failure'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const color = () => {
|
|
|
|
switch (status) {
|
|
|
|
case 'CONFIRMED':
|
|
|
|
return 'success'
|
|
|
|
case 'PENDING':
|
|
|
|
return 'muted'
|
|
|
|
default:
|
|
|
|
return 'danger'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Icon = () => {
|
|
|
|
switch (status) {
|
|
|
|
case 'CONFIRMED':
|
|
|
|
return <Check width='14' height='14' className='fill-success' />
|
|
|
|
case 'PENDING':
|
|
|
|
return <Moon width='14' height='14' className='spin fill-grey' />
|
|
|
|
default:
|
|
|
|
return <ThumbDown width='14' height='14' className='fill-danger' />
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Icon /><small className={`text-${color()}`}>{' ' + desc()}</small>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-16 20:02:17 +00:00
|
|
|
function Detail ({ fact }) {
|
2022-03-17 20:13:19 +00:00
|
|
|
if (fact.type === 'earn') {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={satusClass(fact.status)}>
|
2023-01-12 23:53:09 +00:00
|
|
|
SN distributes the sats it earns back to its best users daily. These sats come from <Link href='/~jobs' passHref><a>jobs</a></Link>, boosts, posting fees, and donations. You can see the daily rewards pool and make a donation <Link href='/rewards' passHref><a>here</a></Link>.
|
2022-03-17 20:13:19 +00:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
2022-12-08 00:04:02 +00:00
|
|
|
if (fact.type === 'donation') {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={satusClass(fact.status)}>
|
2022-12-19 22:27:52 +00:00
|
|
|
You made a donation to <Link href='/rewards' passHref><a>daily rewards</a></Link>!
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
if (fact.type === 'referral') {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={satusClass(fact.status)}>
|
|
|
|
You stacked sats from <Link href='/referrals/month' passHref><a>a referral</a></Link>!
|
2022-12-08 00:04:02 +00:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-16 20:02:17 +00:00
|
|
|
if (!fact.item) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={satusClass(fact.status)}>
|
|
|
|
{fact.description || 'no description'}
|
|
|
|
</div>
|
|
|
|
<Satus status={fact.status} />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
if (fact.item.title) {
|
2023-01-12 23:53:09 +00:00
|
|
|
if (fact.item.isJob) {
|
|
|
|
return <ItemJob className={styles.itemWrapper} item={fact.item} />
|
|
|
|
}
|
2021-12-16 20:02:17 +00:00
|
|
|
return <div className={styles.itemWrapper}><Item item={fact.item} /></div>
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div className={styles.commentWrapper}><Comment item={fact.item} includeParent noReply truncate /></div>
|
|
|
|
}
|
|
|
|
|
2022-05-18 19:31:24 +00:00
|
|
|
export default function Satistics ({ data: { me, walletHistory: { facts, cursor } } }) {
|
2021-12-16 17:27:12 +00:00
|
|
|
const router = useRouter()
|
|
|
|
const { data, fetchMore } = useQuery(WALLET_HISTORY, { variables: { inc: router.query.inc } })
|
|
|
|
|
|
|
|
function filterRoutePush (filter, add) {
|
2021-12-16 20:17:50 +00:00
|
|
|
const inc = new Set(router.query.inc?.split(','))
|
2021-12-16 17:27:12 +00:00
|
|
|
inc.delete('')
|
|
|
|
// depending on addrem, add or remove filter
|
|
|
|
if (add) {
|
|
|
|
inc.add(filter)
|
|
|
|
} else {
|
|
|
|
inc.delete(filter)
|
|
|
|
}
|
|
|
|
|
|
|
|
const incstr = [...inc].join(',')
|
|
|
|
router.push(`/satistics?inc=${incstr}`)
|
|
|
|
}
|
|
|
|
|
|
|
|
function included (filter) {
|
2021-12-16 20:17:50 +00:00
|
|
|
const inc = new Set(router.query.inc?.split(','))
|
2021-12-16 17:27:12 +00:00
|
|
|
return inc.has(filter)
|
|
|
|
}
|
2021-12-15 16:50:11 +00:00
|
|
|
|
2021-12-16 20:02:17 +00:00
|
|
|
function href (fact) {
|
|
|
|
switch (fact.type) {
|
|
|
|
case 'withdrawal':
|
|
|
|
case 'invoice':
|
|
|
|
return `/${fact.type}s/${fact.factId}`
|
2022-08-18 20:57:48 +00:00
|
|
|
case 'earn':
|
2022-12-08 00:04:02 +00:00
|
|
|
case 'donation':
|
2022-12-19 22:27:52 +00:00
|
|
|
case 'referral':
|
2022-08-18 20:57:48 +00:00
|
|
|
return
|
2021-12-16 20:02:17 +00:00
|
|
|
default:
|
|
|
|
return `/items/${fact.factId}`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-15 16:50:11 +00:00
|
|
|
if (data) {
|
2022-05-18 19:31:24 +00:00
|
|
|
({ me, walletHistory: { facts, cursor } } = data)
|
2021-12-15 16:50:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const SatisticsSkeleton = () => (
|
|
|
|
<div className='d-flex justify-content-center mt-3 mb-1'>
|
|
|
|
<Moon className='spin fill-grey' />
|
|
|
|
</div>)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Layout noSeo>
|
|
|
|
<UserHeader user={me} />
|
2021-12-16 17:27:12 +00:00
|
|
|
<div className='mt-3'>
|
|
|
|
<Form
|
|
|
|
initial={{
|
|
|
|
invoice: included('invoice'),
|
|
|
|
withdrawal: included('withdrawal'),
|
|
|
|
stacked: included('stacked'),
|
|
|
|
spent: included('spent')
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className='d-flex justify-content-around flex-wrap'>
|
|
|
|
<Checkbox
|
|
|
|
label='invoice' name='invoice' inline
|
2022-01-19 21:51:55 +00:00
|
|
|
checked={included('invoice')}
|
2021-12-16 17:27:12 +00:00
|
|
|
handleChange={c => filterRoutePush('invoice', c)}
|
|
|
|
/>
|
|
|
|
<Checkbox
|
|
|
|
label='withdrawal' name='withdrawal' inline
|
2022-01-19 21:51:55 +00:00
|
|
|
checked={included('withdrawal')}
|
2021-12-16 17:27:12 +00:00
|
|
|
handleChange={c => filterRoutePush('withdrawal', c)}
|
|
|
|
/>
|
|
|
|
<Checkbox
|
|
|
|
label='stacked' name='stacked' inline
|
2022-01-19 21:51:55 +00:00
|
|
|
checked={included('stacked')}
|
2021-12-16 17:27:12 +00:00
|
|
|
handleChange={c => filterRoutePush('stacked', c)}
|
|
|
|
/>
|
|
|
|
<Checkbox
|
|
|
|
label='spent' name='spent' inline
|
2022-01-19 21:51:55 +00:00
|
|
|
checked={included('spent')}
|
2021-12-16 17:27:12 +00:00
|
|
|
handleChange={c => filterRoutePush('spent', c)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</Form>
|
2021-12-17 16:57:32 +00:00
|
|
|
<Table className='mt-3 mb-0' bordered hover responsive size='sm'>
|
2021-12-16 17:27:12 +00:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th className={styles.type}>type</th>
|
|
|
|
<th>detail</th>
|
2022-11-23 18:12:09 +00:00
|
|
|
<th className={styles.sats}>
|
2022-12-19 22:27:52 +00:00
|
|
|
sats
|
2022-11-23 18:12:09 +00:00
|
|
|
</th>
|
2021-12-16 17:27:12 +00:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2022-08-18 20:57:48 +00:00
|
|
|
{facts.map((f, i) => {
|
|
|
|
const uri = href(f)
|
2022-08-25 17:27:03 +00:00
|
|
|
const Wrapper = uri ? Link : ({ href, ...props }) => <React.Fragment {...props} />
|
2022-08-18 20:57:48 +00:00
|
|
|
return (
|
|
|
|
<Wrapper href={uri} key={f.id}>
|
|
|
|
<tr className={styles.row}>
|
|
|
|
<td className={`${styles.type} ${satusClass(f.status)}`}>{f.type}</td>
|
|
|
|
<td className={styles.description}>
|
|
|
|
<Detail fact={f} />
|
|
|
|
</td>
|
2022-12-19 22:27:52 +00:00
|
|
|
<td className={`${styles.sats} ${satusClass(f.status)}`}>{f.sats}</td>
|
2022-08-18 20:57:48 +00:00
|
|
|
</tr>
|
|
|
|
</Wrapper>
|
|
|
|
)
|
|
|
|
})}
|
2021-12-16 17:27:12 +00:00
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
<MoreFooter cursor={cursor} fetchMore={fetchMore} Skeleton={SatisticsSkeleton} />
|
|
|
|
</div>
|
2021-12-15 16:50:11 +00:00
|
|
|
</Layout>
|
|
|
|
)
|
|
|
|
}
|