lbry-desktop/ui/component/walletSend/view.jsx

118 lines
3.8 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as MODALS from 'constants/modal_types';
2019-06-17 22:32:38 +02:00
import React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-02-13 17:27:20 +01:00
import { Form, FormField } from 'component/common/form';
2018-03-26 23:32:43 +02:00
import { Formik } from 'formik';
import { validateSendTx } from 'util/form-validation';
2019-09-26 18:07:11 +02:00
import Card from 'component/common/card';
2020-09-02 22:08:37 +02:00
import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';
2018-03-26 23:32:43 +02:00
type DraftTransaction = {
address: string,
2018-04-25 23:40:56 +02:00
amount: ?number, // So we can use a placeholder in the input
2018-03-26 23:32:43 +02:00
};
2018-03-26 23:32:43 +02:00
type Props = {
openModal: (id: string, { address: string, amount: number }) => void,
2018-03-26 23:32:43 +02:00
balance: number,
};
class WalletSend extends React.PureComponent<Props> {
constructor() {
super();
(this: any).handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(values: DraftTransaction) {
const { openModal } = this.props;
2018-04-25 23:40:56 +02:00
const { address, amount } = values;
if (amount && address) {
const modalProps = { address, amount };
openModal(MODALS.CONFIRM_TRANSACTION, modalProps);
2018-04-25 23:40:56 +02:00
}
}
render() {
2019-11-22 22:13:00 +01:00
const { balance } = this.props;
return (
2019-09-26 18:07:11 +02:00
<Card
2020-09-02 22:08:37 +02:00
title={<LbcSymbol prefix={__('Send')} isTitle />}
subtitle={
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
Send LBRY Credits to your friends or favorite creators.
</I18nMessage>
}
2019-09-26 18:07:11 +02:00
actions={
<Formik
initialValues={{
address: '',
amount: '',
}}
onSubmit={this.handleSubmit}
validate={validateSendTx}
render={({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form onSubmit={handleSubmit}>
<fieldset-group class="fieldset-group--smushed">
<FormField
2020-09-02 22:08:37 +02:00
autoFocus
2019-09-26 18:07:11 +02:00
type="number"
name="amount"
label={__('Amount')}
className="form-field--price-amount"
affixClass="form-field--fix-no-height"
min="0"
step="any"
placeholder="12.34"
onChange={handleChange}
onBlur={handleBlur}
value={values.amount}
/>
2019-09-26 18:07:11 +02:00
<FormField
type="text"
name="address"
placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs"
className="form-field--address"
label={__('Recipient address')}
onChange={handleChange}
onBlur={handleBlur}
value={values.address}
/>
</fieldset-group>
<div className="card__actions">
<Button
button="primary"
type="submit"
label={__('Send')}
disabled={
!values.address ||
!!Object.keys(errors).length ||
!(parseFloat(values.amount) > 0.0) ||
parseFloat(values.amount) === balance
}
/>
{!!Object.keys(errors).length || (
<span className="error__text">
2019-09-26 18:07:11 +02:00
{(!!values.address && touched.address && errors.address) ||
(!!values.amount && touched.amount && errors.amount) ||
(parseFloat(values.amount) === balance &&
__('Decrease amount to account for transaction fee')) ||
2020-09-04 19:14:48 +02:00
(parseFloat(values.amount) > balance && __('Not enough Credits'))}
2019-09-26 18:07:11 +02:00
</span>
)}
</div>
</Form>
)}
/>
}
/>
);
}
}
2017-06-06 06:21:55 +02:00
export default WalletSend;