LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-05 05:15:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

show available balance on tip/support modal for mobile devices

Browse source
This commit is contained in:
Sean Yesmunt 2020-03-13 15:53:53 -04:00
parent 691e648f6a
commit 9b95b4994e
2 changed files with 67 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
ui/component/walletSendTip/view.jsx
View file

@ -3,6 +3,9 @@ import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import { FormField, Form } from 'component/common/form'; import { FormField, Form } from 'component/common/form';
import { MINIMUM_PUBLISH_BID } from 'constants/claim'; import { MINIMUM_PUBLISH_BID } from 'constants/claim';
import useIsMobile from 'effects/use-is-mobile';
import CreditAmount from 'component/common/credit-amount';
import I18nMessage from 'component/i18nMessage';
type Props = { type Props = {
uri: string, uri: string,
@ -17,27 +20,14 @@ type Props = {
isSupport: boolean, isSupport: boolean,
}; };
type State = { function WalletSendTip(props: Props) {
tipAmount: number, const { title, isPending, onCancel, claimIsMine, isSupport, balance, claim, sendTipCallback, sendSupport } = props;
tipError: string, const [tipAmount, setTipAmount] = React.useState(0);
}; const [tipError, setTipError] = React.useState();
const { claim_id: claimId } = claim;
class WalletSendTip extends React.PureComponent<Props, State> { const isMobile = useIsMobile();
constructor(props: Props) {
super(props);
this.state = {
tipAmount: 0,
tipError: '',
};
(this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
}
handleSendButtonClicked() {
const { claim, sendSupport, isSupport, sendTipCallback } = this.props;
const { claim_id: claimId } = claim;
const { tipAmount } = this.state;
function handleSendButtonClicked() {
sendSupport(tipAmount, claimId, isSupport); sendSupport(tipAmount, claimId, isSupport);
// ex: close modal // ex: close modal
@ -46,8 +36,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
} }
} }
handleSupportPriceChange(event: SyntheticInputEvent<*>) { function handleSupportPriceChange(event: SyntheticInputEvent<*>) {
const { balance } = this.props;
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/); const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
const validTipInput = regexp.test(event.target.value); const validTipInput = regexp.test(event.target.value);
const tipAmount = parseFloat(event.target.value); const tipAmount = parseFloat(event.target.value);
@ -67,66 +56,64 @@ class WalletSendTip extends React.PureComponent<Props, State> {
tipError = __('Not enough credits'); tipError = __('Not enough credits');
} }
this.setState({ setTipAmount(tipAmount);
tipAmount, setTipError(tipError);
tipError,
});
} }
render() { const label =
const { title, isPending, onCancel, claimIsMine, isSupport } = this.props; tipAmount && tipAmount !== 0
const { tipAmount, tipError } = this.state; ? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', {
amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''),
})
: __('Amount');
return ( return (
<React.Fragment> <React.Fragment>
<Form> <Form onSubmit={handleSendButtonClicked}>
<FormField <FormField
autoFocus autoFocus
name="tip-input" name="tip-input"
label={ label={
tipAmount && tipAmount !== 0 <React.Fragment>
? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', { {label}{' '}
amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''), {isMobile && (
}) <I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
: __('Amount') (%lbc_balance% available)
} </I18nMessage>
className="form-field--price-amount" )}
error={tipError} </React.Fragment>
min="0" }
step="any" className="form-field--price-amount"
type="number" error={tipError}
placeholder="1.23" min="0"
onChange={event => this.handleSupportPriceChange(event)} step="any"
inputButton={ type="number"
<Button placeholder="1.23"
button="primary" onChange={event => handleSupportPriceChange(event)}
label={__('Send')} inputButton={
disabled={isPending || tipError || !tipAmount} <Button button="primary" type="submit" label={__('Send')} disabled={isPending || tipError || !tipAmount} />
onClick={this.handleSendButtonClicked} }
/> helper={
} <React.Fragment>
helper={ {claimIsMine || isSupport
<React.Fragment> ? __(
{claimIsMine || isSupport 'This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.',
? __( { title }
'This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.', )
{ title } : __(
) 'This will appear as a tip for %title%, which will boost its ability to be discovered while active.',
: __( { title }
'This will appear as a tip for %title%, which will boost its ability to be discovered while active.', )}{' '}
{ title } <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
)}{' '} </React.Fragment>
<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />. }
</React.Fragment> />
} </Form>
/> <div className="card__actions">
</Form> <Button button="link" label={__('Cancel')} onClick={onCancel} />
<div className="card__actions"> </div>
<Button button="link" label={__('Cancel')} onClick={onCancel} /> </React.Fragment>
</div> );
</React.Fragment>
);
}
} }
export default WalletSendTip; export default WalletSendTip;

5
ui/modal/modalSendTip/index.js
View file

@ -6,7 +6,4 @@ const perform = dispatch => ({
closeModal: () => dispatch(doHideModal()), closeModal: () => dispatch(doHideModal()),
}); });
export default connect( export default connect(null, perform)(ModalSendTip);
null,
perform
)(ModalSendTip);