stacker.news/pages/wallet.js

148 lines
3.9 KiB
JavaScript
Raw Normal View History

2021-05-06 21:15:22 +00:00
import { useRouter } from 'next/router'
import { Form, Input, SubmitButton } from '../components/form'
import Link from 'next/link'
import Button from 'react-bootstrap/Button'
import * as Yup from 'yup'
2021-05-12 23:04:19 +00:00
import { gql, useMutation, useQuery } from '@apollo/client'
2021-05-06 21:15:22 +00:00
import { InvoiceSkeleton } from '../components/invoice'
import LayoutCenter from '../components/layout-center'
2021-05-13 13:28:38 +00:00
import InputGroup from 'react-bootstrap/InputGroup'
2021-05-13 21:19:51 +00:00
import { WithdrawlSkeleton } from './withdrawls/[id]'
2021-05-06 21:15:22 +00:00
export default function Wallet () {
return (
<LayoutCenter>
<WalletForm />
</LayoutCenter>
)
}
export function WalletForm () {
const router = useRouter()
if (!router.query.type) {
return (
<div className='align-items-center'>
<Link href='/wallet?type=fund'>
<Button variant='success'>fund</Button>
</Link>
<span className='mx-3 font-weight-bold text-muted'>or</span>
<Link href='/wallet?type=withdrawl'>
<Button variant='success'>withdrawl</Button>
</Link>
</div>
)
}
if (router.query.type === 'fund') {
return <FundForm />
} else {
return <WithdrawlForm />
}
}
export const FundSchema = Yup.object({
2021-05-13 01:51:37 +00:00
amount: Yup.number().typeError('must be a number').required('required')
.positive('must be positive').integer('must be whole')
2021-05-06 21:15:22 +00:00
})
export function FundForm () {
const router = useRouter()
2021-05-13 21:19:51 +00:00
const [createInvoice, { called, error }] = useMutation(gql`
2021-05-06 21:15:22 +00:00
mutation createInvoice($amount: Int!) {
2021-05-11 15:52:50 +00:00
createInvoice(amount: $amount) {
id
}
2021-05-06 21:15:22 +00:00
}`)
2021-05-13 21:19:51 +00:00
if (called && !error) {
2021-05-11 15:52:50 +00:00
return <InvoiceSkeleton status='generating' />
2021-05-06 21:15:22 +00:00
}
return (
<Form
initial={{
amount: 1000
}}
schema={FundSchema}
onSubmit={async ({ amount }) => {
2021-05-11 15:52:50 +00:00
const { data } = await createInvoice({ variables: { amount: Number(amount) } })
router.push(`/invoices/${data.createInvoice.id}`)
2021-05-06 21:15:22 +00:00
}}
>
<Input
label='amount'
name='amount'
required
autoFocus
2021-05-13 13:28:38 +00:00
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
2021-05-06 21:15:22 +00:00
/>
<SubmitButton variant='success' className='mt-2'>generate invoice</SubmitButton>
</Form>
)
}
2021-05-12 23:04:19 +00:00
export const WithdrawlSchema = Yup.object({
invoice: Yup.string().required('required'),
2021-05-13 01:51:37 +00:00
maxFee: Yup.number().typeError('must be a number').required('required')
.min(0, 'must be positive').integer('must be whole')
2021-05-12 23:04:19 +00:00
})
2021-05-06 21:15:22 +00:00
export function WithdrawlForm () {
2021-05-13 01:51:37 +00:00
const router = useRouter()
2021-05-12 23:04:19 +00:00
const query = gql`
{
me {
2021-05-13 21:19:51 +00:00
sats
2021-05-12 23:04:19 +00:00
}
}`
const { data } = useQuery(query, { pollInterval: 1000 })
2021-05-13 21:19:51 +00:00
const [createWithdrawl, { called, error }] = useMutation(gql`
2021-05-12 23:04:19 +00:00
mutation createWithdrawl($invoice: String!, $maxFee: Int!) {
2021-05-13 01:51:37 +00:00
createWithdrawl(invoice: $invoice, maxFee: $maxFee) {
id
}
2021-05-12 23:04:19 +00:00
}`)
2021-05-13 21:19:51 +00:00
if (called && !error) {
return <WithdrawlSkeleton status='sending' />
}
2021-05-12 23:04:19 +00:00
return (
<>
2021-05-13 21:19:51 +00:00
<h2 className={`${data ? 'visible' : 'invisible'} text-success pb-5`}>
you have <span className='text-monospace'>{data && data.me.sats}</span> sats
2021-05-12 23:04:19 +00:00
</h2>
<Form
className='pt-3'
initial={{
2021-05-13 01:51:37 +00:00
invoice: '',
maxFee: 0
2021-05-12 23:04:19 +00:00
}}
2021-05-13 21:19:51 +00:00
initialError={error ? error.toString() : undefined}
2021-05-12 23:04:19 +00:00
schema={WithdrawlSchema}
onSubmit={async ({ invoice, maxFee }) => {
2021-05-13 21:19:51 +00:00
console.log('calling')
2021-05-13 01:51:37 +00:00
const { data } = await createWithdrawl({ variables: { invoice, maxFee: Number(maxFee) } })
router.push(`/withdrawls/${data.createWithdrawl.id}`)
2021-05-12 23:04:19 +00:00
}}
>
<Input
label='invoice'
name='invoice'
required
autoFocus
/>
<Input
label='max fee'
name='maxFee'
required
2021-05-13 21:19:51 +00:00
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
2021-05-12 23:04:19 +00:00
/>
<SubmitButton variant='success' className='mt-2'>withdrawl</SubmitButton>
</Form>
</>
)
2021-05-06 21:15:22 +00:00
}