68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
import { useQuery } from '@apollo/client'
|
|
import gql from 'graphql-tag'
|
|
import LayoutCenter from '../../components/layout-center'
|
|
import { CopyInput, Input, InputSkeleton } from '../../components/form'
|
|
import InputGroup from 'react-bootstrap/InputGroup'
|
|
import InvoiceStatus from '../../components/invoice-status'
|
|
|
|
export async function getServerSideProps ({ params: { id } }) {
|
|
return {
|
|
props: {
|
|
id
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function Withdrawl ({ id }) {
|
|
const query = gql`
|
|
{
|
|
withdrawl(id: ${id}) {
|
|
bolt11
|
|
msatsFeePaying
|
|
status
|
|
}
|
|
}`
|
|
return (
|
|
<LayoutCenter>
|
|
<LoadWithdrawl query={query} />
|
|
</LayoutCenter>
|
|
)
|
|
}
|
|
|
|
function LoadWithdrawl ({ query }) {
|
|
const { loading, error, data } = useQuery(query, { pollInterval: 1000 })
|
|
if (error) return <div>error</div>
|
|
if (!data || loading) {
|
|
return (
|
|
<>
|
|
<div className='w-100'>
|
|
<InputSkeleton label='invoice' />
|
|
</div>
|
|
<div className='w-100'>
|
|
<InputSkeleton label='max fee' />
|
|
</div>
|
|
<InvoiceStatus status='pending' />
|
|
</>
|
|
)
|
|
}
|
|
|
|
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'
|
|
placeholder={data.withdrawl.msatsFeePaying} readOnly
|
|
append={<InputGroup.Text className='text-monospace'>millisats</InputGroup.Text>}
|
|
/>
|
|
</div>
|
|
<InvoiceStatus status='pending' />
|
|
</>
|
|
)
|
|
}
|