mirror of https://github.com/lukechilds/polar.git
jamaljsr
5 years ago
6 changed files with 154 additions and 9 deletions
@ -0,0 +1,124 @@ |
|||
import React, { ReactNode } from 'react'; |
|||
import { useAsyncCallback } from 'react-async-hook'; |
|||
import { Col, Form, InputNumber, Modal, Result, Row } from 'antd'; |
|||
import { FormComponentProps } from 'antd/lib/form'; |
|||
import { usePrefixedTranslation } from 'hooks'; |
|||
import { LightningNode } from 'shared/types'; |
|||
import { useStoreActions, useStoreState } from 'store'; |
|||
import { Network } from 'types'; |
|||
import { delay } from 'utils/async'; |
|||
import { format } from 'utils/units'; |
|||
import CopyableInput from 'components/common/form/CopyableInput'; |
|||
import LightningNodeSelect from 'components/common/form/LightningNodeSelect'; |
|||
|
|||
interface FormFields { |
|||
nodeName?: string; |
|||
amount?: string; |
|||
} |
|||
|
|||
interface Props extends FormComponentProps<FormFields> { |
|||
network: Network; |
|||
} |
|||
|
|||
const CreateInvoiceModal: React.FC<Props> = ({ network, form }) => { |
|||
const { l } = usePrefixedTranslation( |
|||
'cmps.designer.lightning.actions.CreateInvoiceModal', |
|||
); |
|||
const { visible, nodeName, invoice, amount } = useStoreState( |
|||
s => s.modals.createInvoice, |
|||
); |
|||
const { showCreateInvoice, hideCreateInvoice } = useStoreActions(s => s.modals); |
|||
const { notify } = useStoreActions(s => s.app); |
|||
|
|||
const createAsync = useAsyncCallback(async (node: LightningNode, amount: string) => { |
|||
try { |
|||
await delay(500); |
|||
showCreateInvoice({ |
|||
nodeName: node.name, |
|||
amount, |
|||
invoice: |
|||
'lnbc2m1pw7k8zmpp5az7tf6matv8ntaanmsdrkaq48xwl7a8gg4q2j0f2rpvqx5cxpj6qdqqcqzpgxqyz5vqj5pp20l7uhpvx3lvqqenjud365c8nmsmnu37ffza8e4lftr5k69z38aptdcjwh6ms5hc992g5dxwckulvwm7gly88ukhsy3f0hqc2yqp2guv38', |
|||
}); |
|||
} catch (error) { |
|||
notify({ message: l('submitError'), error }); |
|||
} |
|||
}); |
|||
|
|||
const handleSubmit = () => { |
|||
form.validateFields((err, values: FormFields) => { |
|||
if (err) return; |
|||
|
|||
const { lightning } = network.nodes; |
|||
const node = lightning.find(n => n.name === values.nodeName); |
|||
if (!node || !values.amount) return; |
|||
createAsync.execute(node, values.amount); |
|||
}); |
|||
}; |
|||
|
|||
let cmp: ReactNode; |
|||
if (!invoice) { |
|||
cmp = ( |
|||
<Form hideRequiredMark colon={false}> |
|||
<Row type="flex" gutter={16}> |
|||
<Col span={12}> |
|||
<LightningNodeSelect |
|||
network={network} |
|||
id="nodeName" |
|||
form={form} |
|||
label={l('nodeLabel')} |
|||
disabled={createAsync.loading} |
|||
initialValue={nodeName} |
|||
/> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label={l('amountLabel') + ' (sats)'}> |
|||
{form.getFieldDecorator('amount', { |
|||
initialValue: 50000, |
|||
rules: [{ required: true, message: l('cmps.forms.required') }], |
|||
})( |
|||
<InputNumber |
|||
min={1} |
|||
disabled={createAsync.loading} |
|||
formatter={v => `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} |
|||
parser={v => `${v}`.replace(/(undefined|,*)/g, '')} |
|||
style={{ width: '100%' }} |
|||
/>, |
|||
)} |
|||
</Form.Item> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
); |
|||
} else { |
|||
cmp = ( |
|||
<Result |
|||
status="success" |
|||
title={l('successTitle')} |
|||
subTitle={l('successDesc', { nodeName, amount: format(`${amount}`) })} |
|||
extra={<CopyableInput label="Invoice" value={invoice} />} |
|||
/> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<> |
|||
<Modal |
|||
title={l('title')} |
|||
visible={visible} |
|||
onCancel={() => hideCreateInvoice()} |
|||
destroyOnClose |
|||
footer={invoice ? null : undefined} |
|||
cancelText={l('cancelBtn')} |
|||
okText={l('okBtn')} |
|||
okButtonProps={{ |
|||
loading: createAsync.loading, |
|||
}} |
|||
onOk={handleSubmit} |
|||
> |
|||
{cmp} |
|||
</Modal> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default Form.create<Props>()(CreateInvoiceModal); |
Loading…
Reference in new issue