show available balance on tip/support modal for mobile devices

ui/component/walletSendTip/view.jsx

@@ -3,6 +3,9 @@ import React from 'react';
 import Button from 'component/button';
 import { FormField, Form } from 'component/common/form';
 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 = {
   uri: string,
@@ -17,27 +20,14 @@ type Props = {
   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();
-
-class WalletSendTip extends React.PureComponent<Props, State> {
-  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;
+  const isMobile = useIsMobile();
 
+  function handleSendButtonClicked() {
     sendSupport(tipAmount, claimId, isSupport);
 
     // 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 validTipInput = regexp.test(event.target.value);
     const tipAmount = parseFloat(event.target.value);
@@ -67,28 +56,32 @@ class WalletSendTip extends React.PureComponent<Props, State> {
       tipError = __('Not enough credits');
     }
 
-    this.setState({
+    setTipAmount(tipAmount);
-      tipAmount,
+    setTipError(tipError);
-      tipError,
-    });
   }
 
-  render() {
+  const label =
-    const { title, isPending, onCancel, claimIsMine, isSupport } = this.props;
-    const { tipAmount, tipError } = this.state;
-
-    return (
-      <React.Fragment>
-        <Form>
-          <FormField
-            autoFocus
-            name="tip-input"
-            label={
     tipAmount && tipAmount !== 0
       ? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', {
           amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''),
         })
-                : __('Amount')
+      : __('Amount');
+
+  return (
+    <React.Fragment>
+      <Form onSubmit={handleSendButtonClicked}>
+        <FormField
+          autoFocus
+          name="tip-input"
+          label={
+            <React.Fragment>
+              {label}{' '}
+              {isMobile && (
+                <I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
+                  (%lbc_balance% available)
+                </I18nMessage>
+              )}
+            </React.Fragment>
           }
           className="form-field--price-amount"
           error={tipError}
@@ -96,14 +89,9 @@ class WalletSendTip extends React.PureComponent<Props, State> {
           step="any"
           type="number"
           placeholder="1.23"
-            onChange={event => this.handleSupportPriceChange(event)}
+          onChange={event => handleSupportPriceChange(event)}
           inputButton={
-              <Button
+            <Button button="primary" type="submit" label={__('Send')} disabled={isPending || tipError || !tipAmount} />
-                button="primary"
-                label={__('Send')}
-                disabled={isPending || tipError || !tipAmount}
-                onClick={this.handleSendButtonClicked}
-              />
           }
           helper={
             <React.Fragment>
@@ -127,6 +115,5 @@ class WalletSendTip extends React.PureComponent<Props, State> {
     </React.Fragment>
   );
 }
-}
 
 export default WalletSendTip;

ui/modal/modalSendTip/index.js

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