stacker.news/pages/withdrawls/[id].js

101 lines
2.6 KiB
JavaScript
Raw Normal View History

2021-05-13 01:51:37 +00:00
import { useQuery } from '@apollo/client'
import gql from 'graphql-tag'
import LayoutCenter from '../../components/layout-center'
2021-05-13 13:28:38 +00:00
import { CopyInput, Input, InputSkeleton } from '../../components/form'
import InputGroup from 'react-bootstrap/InputGroup'
import InvoiceStatus from '../../components/invoice-status'
2021-05-13 01:51:37 +00:00
export async function getServerSideProps ({ params: { id } }) {
return {
props: {
id
}
}
}
export default function Withdrawl ({ id }) {
const query = gql`
{
withdrawl(id: ${id}) {
bolt11
2021-05-13 21:19:51 +00:00
satsPaid
satsFeePaying
satsFeePaid
2021-05-13 13:28:38 +00:00
status
2021-05-13 01:51:37 +00:00
}
}`
return (
<LayoutCenter>
<LoadWithdrawl query={query} />
</LayoutCenter>
)
}
2021-05-13 21:19:51 +00:00
export function WithdrawlSkeleton ({ status }) {
return (
<>
<div className='w-100'>
<InputSkeleton label='invoice' />
</div>
<div className='w-100'>
<InputSkeleton label='max fee' />
</div>
<InvoiceStatus status={status} />
</>
)
}
2021-05-13 01:51:37 +00:00
function LoadWithdrawl ({ query }) {
const { loading, error, data } = useQuery(query, { pollInterval: 1000 })
if (error) return <div>error</div>
if (!data || loading) {
2021-05-13 21:19:51 +00:00
return <WithdrawlSkeleton status='loading' />
}
let status = 'pending'
let variant = 'default'
switch (data.withdrawl.status) {
case 'CONFIRMED':
status = `sent ${data.withdrawl.satsPaid} sats with ${data.withdrawl.satsFeePaid} sats in routing fees`
variant = 'confirmed'
break
case 'INSUFFICIENT_BALANCE':
status = <>insufficient balance <small className='ml-3'>contact keyan!</small></>
variant = 'failed'
break
case 'INVALID_PAYMENT':
status = 'invalid invoice'
variant = 'failed'
break
case 'PATHFINDING_TIMEOUT':
2021-05-20 01:09:32 +00:00
status = <>timed out finding route <small className='ml-3'>try increasing max fee</small></>
2021-05-13 21:19:51 +00:00
variant = 'failed'
break
case 'ROUTE_NOT_FOUND':
2021-05-20 01:09:32 +00:00
status = <>no route <small className='ml-3'>try increasing max fee</small></>
2021-05-13 21:19:51 +00:00
variant = 'failed'
break
default:
break
2021-05-13 01:51:37 +00:00
}
2021-05-13 13:28:38 +00:00
return (
<>
<div className='w-100'>
<CopyInput
label='invoice' type='text'
placeholder={data.withdrawl.bolt11} readOnly
/>
</div>
<div className='w-100'>
<Input
label='max fee' type='text'
2021-05-13 21:19:51 +00:00
placeholder={data.withdrawl.satsFeePaying} readOnly
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
2021-05-13 13:28:38 +00:00
/>
</div>
2021-05-13 21:19:51 +00:00
<InvoiceStatus variant={variant} status={status} />
2021-05-13 13:28:38 +00:00
</>
)
2021-05-13 01:51:37 +00:00
}