Minor UX fixes

Includes
-some better error messages when using credits (publish, tip, send)
-claim new user reward after phone verification (requires API change)
-vertical stacking on send screen
-add missing blank slate message for transaction history

src/renderer/component/publishForm/view.jsx

@@ -155,10 +155,14 @@ class PublishForm extends React.PureComponent<Props> {
     const { balance, updatePublishForm } = this.props;
 
     let bidError;
-    if (balance <= bid) {
+    if (bid === 0) {
-      bidError = __('Not enough credits');
+      bidError = __('Deposit cannot be 0');
+    } else if (balance === bid) {
+      bidError = __('Please decrease your deposit to account for transaction fees');
+    } else if (balance < bid) {
+      bidError = __('Deposit cannot be higher than your balance');
     } else if (bid <= MINIMUM_PUBLISH_BID) {
-      bidError = __('Your bid must be higher');
+      bidError = __('Your deposit must be higher');
     }
 
     updatePublishForm({ bid, bidError });

src/renderer/component/selectChannel/view.jsx

@@ -55,11 +55,13 @@ class ChannelSection extends React.PureComponent<Props, State> {
 
   handleChannelChange(event: SyntheticInputEvent<*>) {
     const { onChannelChange } = this.props;
+    const { newChannelBid } = this.state;
     const channel = event.target.value;
 
     if (channel === CHANNEL_NEW) {
       this.setState({ addingChannel: true });
       onChannelChange(channel);
+      this.handleNewChannelBidChange(newChannelBid);
     } else {
       this.setState({ addingChannel: false });
       onChannelChange(channel);
@@ -84,14 +86,15 @@ class ChannelSection extends React.PureComponent<Props, State> {
     });
   }
 
-  handleNewChannelBidChange(event: SyntheticInputEvent<*>) {
+  handleNewChannelBidChange(newChannelBid: number) {
     const { balance } = this.props;
-    const newChannelBid = parseFloat(event.target.value);
     let newChannelBidError;
-    if (newChannelBid === balance) {
+    if (newChannelBid === 0) {
-      newChannelBidError = __('Please decrease your bid to account for transaction fees');
+      newChannelBidError = __('Your deposit cannot be 0');
+    } else if (newChannelBid === balance) {
+      newChannelBidError = __('Please decrease your deposit to account for transaction fees');
     } else if (newChannelBid > balance) {
-      newChannelBidError = __('Not enough credits');
+      newChannelBidError = __('Deposit cannot be higher than your balance');
     }
 
     this.setState({
@@ -176,6 +179,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
                 label={__('Name')}
                 type="text"
                 prefix="@"
+                placeholder={__('myChannelName')}
                 error={newChannelNameError}
                 value={newChannelName}
                 onChange={this.handleNewChannelNameChange}
@@ -183,6 +187,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
             </FormRow>
             <FormRow padded>
               <FormField
+                className="input--price-amount"
                 label={__('Deposit')}
                 postfix="LBC"
                 step="any"
@@ -193,7 +198,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
                 )}
                 error={newChannelBidError}
                 value={newChannelBid}
-                onChange={this.handleNewChannelBidChange}
+                onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}
               />
             </FormRow>
             <div className="card__actions">

src/renderer/component/walletSend/view.jsx

@@ -65,10 +65,13 @@ class WalletSend extends React.PureComponent<Props> {
                     value={values.amount}
                     error={
                       (!!values.amount && touched.amount && errors.amount) ||
-                      (values.amount > balance && __('Not enough'))
+                      (values.amount === balance &&
+                        __('Decrease amount to account for transaction fee')) ||
+                      (values.amount > balance && __('Not enough credits'))
                     }
                   />
-
+                </FormRow>
+                <FormRow padded>
                   <FormField
                     type="text"
                     name="address"
@@ -89,7 +92,8 @@ class WalletSend extends React.PureComponent<Props> {
                     disabled={
                       !values.address ||
                       !!Object.keys(errors).length ||
-                      !(parseFloat(values.amount) > 0.0)
+                      !(parseFloat(values.amount) > 0.0) ||
+                      parseFloat(values.amount) === balance
                     }
                   />
                 </div>

src/renderer/component/walletSendTip/view.jsx

@@ -9,7 +9,6 @@ type Props = {
   uri: string,
   title: string,
   claim: Claim,
-  errorMessage: string,
   isPending: boolean,
   sendSupport: (number, string, string) => void,
   onCancel: () => void,
@@ -18,7 +17,8 @@ type Props = {
 };
 
 type State = {
-  amount: number,
+  tipAmount: number,
+  newTipError: string,
 };
 
 class WalletSendTip extends React.PureComponent<Props, State> {
@@ -26,7 +26,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
     super(props);
 
     this.state = {
-      amount: 0,
+      tipAmount: 0,
+      newTipError: '',
     };
 
     (this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
@@ -35,9 +36,9 @@ class WalletSendTip extends React.PureComponent<Props, State> {
   handleSendButtonClicked() {
     const { claim, uri, sendSupport, sendTipCallback } = this.props;
     const { claim_id: claimId } = claim;
-    const { amount } = this.state;
+    const { tipAmount } = this.state;
 
-    sendSupport(amount, claimId, uri);
+    sendSupport(tipAmount, claimId, uri);
 
     // ex: close modal
     if (sendTipCallback) {
@@ -46,14 +47,24 @@ class WalletSendTip extends React.PureComponent<Props, State> {
   }
 
   handleSupportPriceChange(event: SyntheticInputEvent<*>) {
+    const { balance } = this.props;
+    const tipAmount = parseFloat(event.target.value);
+    let newTipError;
+    if (tipAmount === balance) {
+      newTipError = __('Please decrease your tip to account for transaction fees');
+    } else if (tipAmount > balance) {
+      newTipError = __('Not enough credits');
+    }
+
     this.setState({
-      amount: Number(event.target.value),
+      tipAmount,
+      newTipError,
     });
   }
 
   render() {
-    const { title, errorMessage, isPending, uri, onCancel, balance } = this.props;
+    const { title, isPending, uri, onCancel, balance } = this.props;
-    const { amount } = this.state;
+    const { tipAmount, newTipError } = this.state;
 
     return (
       <div>
@@ -67,7 +78,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
             label={__('Amount')}
             postfix={__('LBC')}
             className="input--price-amount"
-            error={errorMessage}
+            error={newTipError}
+            value={tipAmount}
             min="0"
             step="any"
             type="number"
@@ -84,7 +96,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
             <Button
               button="primary"
               label={__('Send')}
-              disabled={isPending || amount <= 0 || amount > balance}
+              disabled={isPending || tipAmount <= 0 || tipAmount > balance || tipAmount === balance}
               onClick={this.handleSendButtonClicked}
             />
             <Button

src/renderer/modal/modalRouter/view.jsx

@@ -94,7 +94,7 @@ class ModalRouter extends React.PureComponent<Props> {
     const { balance, page, isCreditIntroAcknowledged } = props;
 
     if (
-      balance <= 0 &&
+      balance === 0 &&
       !isCreditIntroAcknowledged &&
       (['send', 'publish'].includes(page) || this.isPaidShowPage(props))
     ) {

src/renderer/page/transactionHistory/view.jsx

@@ -31,7 +31,7 @@ class TransactionHistoryPage extends React.PureComponent {
           {transactions && transactions.length ? (
             <TransactionList transactions={transactions} />
           ) : (
-            ''
+            <div className="card__content">{__("Looks like you don't have any transactions")}</div>
           )}
         </section>
       </Page>

src/renderer/redux/actions/user.js

@@ -169,6 +169,7 @@ export function doUserPhoneVerify(verificationCode) {
           data: { phone_number: phoneNumber },
         });
         dispatch(doUserFetch());
+        dispatch(doClaimRewardType(rewards.TYPE_NEW_USER));
       })
       .catch(error => dispatch(doUserPhoneVerifyFailure(error)));
   };

src/renderer/redux/reducers/user.js

@@ -89,12 +89,10 @@ reducers[ACTIONS.USER_PHONE_VERIFY_STARTED] = state =>
   });
 
 reducers[ACTIONS.USER_PHONE_VERIFY_SUCCESS] = (state, action) => {
-  const user = Object.assign({}, state.user);
+  Object.assign({}, state, {
-  user.phone_number = action.data.phone_number;
-  return Object.assign({}, state, {
     phoneToVerify: '',
     phoneVerifyIsPending: false,
-    user,
+    user: action.data.user,
   });
 };