Merge pull request #415 from esteemapp/bugfix/reward

fixed reward ui bugs

src/components/basicUIElements/view/noPost/noPostView.js

@@ -25,7 +25,7 @@ const NoPost = ({
       <MainButton
         style={{ width: 150 }}
         onPress={handleOnButtonPress}
-        iconName="md-person"
+        iconName="person"
         iconColor="white"
         text={defaultText}
       />

src/components/mainButton/view/mainButtonView.js

@@ -2,27 +2,25 @@ import React, { Component, Fragment } from 'react';
 import {
   ActivityIndicator, Image, Text, TouchableOpacity, View,
 } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-
-// Constants
 
 // Components
+import { Icon } from '../../icon';
 
 // Styles
 import styles from './mainButtonStyles';
 
 class MainButton extends Component {
   /* Props
-    * ------------------------------------------------
-    *   @prop { string }     isLoading          - TODO:
-    *   @prop { string }     text               - TODO:
-    *   @prop { boolean }    secondText         - TODO:
-    *   @prop { boolean }    iconColor          - TODO:
-    *   @prop { boolean }    iconName           - TODO:
-    *   @prop { boolean }    isDisable          - TODO:
-    *
-    *
-    */
+   * ------------------------------------------------
+   *   @prop { string }     isLoading          - TODO:
+   *   @prop { string }     text               - TODO:
+   *   @prop { boolean }    secondText         - TODO:
+   *   @prop { boolean }    iconColor          - TODO:
+   *   @prop { boolean }    iconName           - TODO:
+   *   @prop { boolean }    isDisable          - TODO:
+   *
+   *
+   */
   constructor(props) {
     super(props);
 
@@ -45,7 +43,7 @@ class MainButton extends Component {
   _handleOnPress = () => {
     const { onPress } = this.props;
 
-    onPress && onPress();
+    if (onPress) onPress();
   };
 
   _getBody = () => {
@@ -54,15 +52,16 @@ class MainButton extends Component {
     } = this.props;
 
     if (isLoading) {
-      return <ActivityIndicator color="white" style={styles.activityIndicator} />;
+      this._getIndicator();
     }
+
     if (text) {
       return (
         <Fragment>
           {source ? (
             <Image source={source} style={styles.image} resizeMode="contain" />
           ) : (
-            <Ionicons color={iconColor} name={iconName} style={styles.icon} />
+            <Icon iconType="MaterialIcons" color={iconColor} name={iconName} style={styles.icon} />
           )}
           <Text style={styles.text}>
             {text}
@@ -71,19 +70,22 @@ class MainButton extends Component {
         </Fragment>
       );
     }
-    return <Ionicons color={iconColor} name={iconName} style={styles.icon} />;
+
+    return <Icon iconType="MaterialIcons" color={iconColor} name={iconName} style={styles.icon} />;
   };
 
+  _getIndicator = () => <ActivityIndicator color="white" style={styles.activityIndicator} />;
+
   render() {
     const {
-      wrapperStyle, children, height, style,
+      wrapperStyle, children, height, style, isLoading,
     } = this.props;
     const { isDisable } = this.state;
 
     return (
       <View style={wrapperStyle}>
         <TouchableOpacity
-          disabled={isDisable}
+          disabled={isLoading || isDisable}
           onPress={() => this._handleOnPress()}
           style={[
             styles.touchable,
@@ -92,7 +94,9 @@ class MainButton extends Component {
             style && style,
           ]}
         >
-          <View style={styles.body}>{children || this._getBody()}</View>
+          <View style={styles.body}>
+            {isLoading ? this._getIndicator() : children || this._getBody()}
+          </View>
         </TouchableOpacity>
       </View>
     );

src/components/wallet/container/walletContainer.js

@@ -25,7 +25,7 @@ class WalletContainer extends Component {
     super(props);
     this.state = {
       walletData: null,
-      claiming: false,
+      isClaiming: false,
       isRefreshing: false,
     };
   }
@@ -52,15 +52,15 @@ class WalletContainer extends Component {
     this.setState({ walletData });
   };
 
-  _claimRewardBalance = () => {
+  _claimRewardBalance = async () => {
     const { currentAccount, intl, pinCode } = this.props;
-    const { claiming } = this.state;
+    const { isClaiming } = this.state;
 
-    if (claiming) {
+    if (isClaiming) {
       return;
     }
 
-    this.setState({ claiming: true });
+    await this.setState({ isClaiming: true });
 
     getAccount(currentAccount.name)
       .then((account) => {
@@ -74,20 +74,22 @@ class WalletContainer extends Component {
       })
       .then(() => getAccount(currentAccount.name))
       .then((account) => {
+        this._getWalletData(account && account[0]);
+
         Alert.alert(
           intl.formatMessage({
             id: 'alert.claim_reward_balance_ok',
           }),
         );
-        this._getWalletData(account && account[0]);
       })
       .then((account) => {
         this._getWalletData(account && account[0]);
-        this.setState({ claiming: false });
+        this.setState({ isClaiming: false });
       })
       .catch((err) => {
+        this.setState({ isClaiming: false });
+
         Alert.alert(err);
-        this.setState({ claiming: false });
       });
   };
 
@@ -108,7 +110,7 @@ class WalletContainer extends Component {
 
   render() {
     const { currentAccount, selectedUser, isDarkTheme } = this.props;
-    const { walletData, claiming, isRefreshing } = this.state;
+    const { walletData, isClaiming, isRefreshing } = this.state;
 
     return (
       <WalletView
@@ -116,7 +118,7 @@ class WalletContainer extends Component {
         selectedUsername={selectedUser && selectedUser.name}
         walletData={walletData}
         claimRewardBalance={this._claimRewardBalance}
-        claiming={claiming}
+        isClaiming={isClaiming}
         handleOnWalletRefresh={this._handleOnWalletRefresh}
         isRefreshing={isRefreshing}
         isDarkTheme={isDarkTheme}

src/components/wallet/view/walletView.js

@@ -46,7 +46,7 @@ class WalletView extends PureComponent {
 
   render() {
     const {
-      claiming,
+      isClaiming,
       claimRewardBalance,
       currentAccountUsername,
       handleOnWalletRefresh,
@@ -88,10 +88,11 @@ class WalletView extends PureComponent {
               >
                 {currentAccountUsername === selectedUsername ? (
                   <MainButton
-                    isLoading={claiming}
+                    isLoading={isClaiming}
+                    isDisable={isClaiming}
                     style={styles.mainButton}
                     height={50}
-                    onPress={claimRewardBalance}
+                    onPress={() => claimRewardBalance()}
                   >
                     <View style={styles.mainButtonWrapper}>
                       {this._getUnclaimedText(walletData)}

src/screens/login/screen/loginScreen.js

@@ -157,7 +157,7 @@ class LoginScreen extends PureComponent {
               />
               <MainButton
                 onPress={() => handleOnPressLogin(username, password)}
-                iconName="md-person"
+                iconName="person"
                 iconColor="white"
                 text={intl.formatMessage({
                   id: 'login.login',
@@ -177,7 +177,6 @@ class LoginScreen extends PureComponent {
             <MainButton
               wrapperStyle={styles.mainButtonWrapper}
               onPress={() => this._handleOnModalToggle()}
-              iconName="md-person"
               source={STEEM_CONNECT_LOGO}
               text="steem"
               secondText="connect"