wallet container seperated and refactored

src/components/wallet/container/walletContainer.js

@@ -1,164 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { injectIntl } from 'react-intl';
-
-import { toastNotification } from '../../../redux/actions/uiAction';
-
-// Dsteem
-import { getAccount, claimRewardBalance } from '../../../providers/steem/dsteem';
-
-// Utils
-import { groomingWalletData } from '../../../utils/wallet';
-import parseToken from '../../../utils/parseToken';
-
-// Component
-import WalletView from '../view/walletView';
-
-/*
- *            Props Name               Description            Value
- * @props -->  currentAccountUsername   description here      Value Type Here
- @ props -->   selectedUsername
- @ props -->   walletData
- *
- */
-
-class WalletContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      walletData: null,
-      isClaiming: false,
-      isRefreshing: false,
-    };
-  }
-
-  componentDidMount() {
-    const { selectedUser } = this.props;
-
-    this._getWalletData(selectedUser);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { selectedUser } = this.props;
-
-    if (selectedUser.name !== nextProps.selectedUser.name) {
-      this._getWalletData(nextProps.selectedUser);
-    }
-  }
-
-  // Components functions
-
-  _getWalletData = async selectedUser => {
-    const { setEstimatedWalletValue, globalProps } = this.props;
-    const walletData = await groomingWalletData(selectedUser, globalProps);
-
-    this.setState({ walletData });
-    setEstimatedWalletValue(walletData.estimatedValue);
-  };
-
-  _isHasUnclaimedRewards = account =>
-    parseToken(account.reward_steem_balance) > 0 ||
-    parseToken(account.reward_sbd_balance) > 0 ||
-    parseToken(account.reward_vesting_steem) > 0;
-
-  _claimRewardBalance = async () => {
-    const { currentAccount, intl, pinCode, dispatch } = this.props;
-    const { isClaiming } = this.state;
-    let isHasUnclaimedRewards;
-
-    if (isClaiming) {
-      return;
-    }
-
-    await this.setState({ isClaiming: true });
-
-    getAccount(currentAccount.name)
-      .then(account => {
-        isHasUnclaimedRewards = this._isHasUnclaimedRewards(account[0]);
-        if (isHasUnclaimedRewards) {
-          const {
-            reward_steem_balance: steemBal,
-            reward_sbd_balance: sbdBal,
-            reward_vesting_balance: vestingBal,
-          } = account[0];
-          return claimRewardBalance(currentAccount, pinCode, steemBal, sbdBal, vestingBal);
-        }
-        this.setState({ isClaiming: false });
-      })
-      .then(() => getAccount(currentAccount.name))
-      .then(account => {
-        this._getWalletData(account && account[0]);
-        if (isHasUnclaimedRewards) {
-          dispatch(
-            toastNotification(
-              intl.formatMessage({
-                id: 'alert.claim_reward_balance_ok',
-              }),
-            ),
-          );
-        }
-      })
-      .then(account => {
-        this._getWalletData(account && account[0]);
-        this.setState({ isClaiming: false });
-      })
-      .catch(() => {
-        this.setState({ isClaiming: false });
-
-        dispatch(
-          toastNotification(
-            intl.formatMessage({
-              id: 'alert.fail',
-            }),
-          ),
-        );
-      });
-  };
-
-  _handleOnWalletRefresh = () => {
-    const { selectedUser, dispatch, intl } = this.props;
-    this.setState({ isRefreshing: true });
-
-    getAccount(selectedUser.name)
-      .then(account => {
-        this._getWalletData(account && account[0]);
-        this.setState({ isRefreshing: false });
-      })
-      .catch(() => {
-        dispatch(
-          toastNotification(
-            intl.formatMessage({
-              id: 'alert.fail',
-            }),
-          ),
-        );
-        this.setState({ isRefreshing: false });
-      });
-  };
-
-  render() {
-    const { currentAccount, selectedUser, handleOnScroll } = this.props;
-    const { walletData, isClaiming, isRefreshing } = this.state;
-
-    return (
-      <WalletView
-        currentAccountUsername={currentAccount.name}
-        selectedUsername={selectedUser && selectedUser.name}
-        walletData={walletData}
-        claimRewardBalance={this._claimRewardBalance}
-        isClaiming={isClaiming}
-        handleOnWalletRefresh={this._handleOnWalletRefresh}
-        isRefreshing={isRefreshing}
-        handleOnScroll={handleOnScroll}
-      />
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  currentAccount: state.account.currentAccount,
-  pinCode: state.application.pin,
-  globalProps: state.account.globalProps,
-});
-
-export default injectIntl(connect(mapStateToProps)(WalletContainer));

src/components/wallet/index.js

@@ -1,5 +1,4 @@
-import WalletView from './view/walletView';
+import Wallet from './view/walletView';
-import Wallet from './container/walletContainer';
 
-export { WalletView, Wallet };
+export { Wallet };
 export default Wallet;

src/components/wallet/view/walletView.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-wrap-multilines */
-import React, { PureComponent, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { View, Text, ScrollView, RefreshControl } from 'react-native';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 // Components
 import { Icon } from '../../icon';
@@ -10,27 +10,15 @@ import { CollapsibleCard } from '../../collapsibleCard';
 import { WalletDetails } from '../../walletDetails';
 import { Transaction } from '../../transaction';
 import { WalletDetailsPlaceHolder } from '../../basicUIElements';
-import { ThemeContainer } from '../../../containers';
+import { ThemeContainer, SteemWalletContainer } from '../../../containers';
 
 // Styles
 import styles from './walletStyles';
 
-class WalletView extends PureComponent {
+const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) => {
-  /* Props
+  const intl = useIntl();
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
 
-  constructor(props) {
+  const _getUnclaimedText = (walletData, isPreview) => (
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-
-  _getUnclaimedText = (walletData, isPreview) => (
     <Text style={[isPreview ? styles.unclaimedTextPreview : styles.unclaimedText]}>
       {walletData.rewardSteemBalance
         ? `${Math.round(walletData.rewardSteemBalance * 1000) / 1000} STEEM`
@@ -44,93 +32,95 @@ class WalletView extends PureComponent {
     </Text>
   );
 
-  render() {
+  return (
-    const {
+    <SteemWalletContainer
-      isClaiming,
+      setEstimatedWalletValue={setEstimatedWalletValue}
-      claimRewardBalance,
+      selectedUser={selectedUser}
-      currentAccountUsername,
+      handleOnScroll={handleOnScroll}
-      handleOnWalletRefresh,
+    >
-      intl,
+      {({
-      isRefreshing,
+        isClaiming,
-      selectedUsername,
+        claimRewardBalance,
-      walletData,
+        currentAccountUsername,
-      handleOnScroll,
+        handleOnWalletRefresh,
-    } = this.props;
+        refreshing,
-
+        selectedUsername,
-    return (
+        walletData,
-      <ThemeContainer>
+      }) => (
-        {isDarkTheme => (
+        <ThemeContainer>
-          <ScrollView
+          {isDarkTheme => (
-            onScroll={handleOnScroll && handleOnScroll}
+            <ScrollView
-            style={styles.scrollView}
+              onScroll={handleOnScroll && handleOnScroll}
-            refreshControl={
+              style={styles.scrollView}
-              <RefreshControl
+              refreshControl={
-                refreshing={isRefreshing}
+                <RefreshControl
-                onRefresh={handleOnWalletRefresh}
+                  refreshing={refreshing}
-                progressBackgroundColor="#357CE6"
+                  onRefresh={handleOnWalletRefresh}
-                tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
+                  progressBackgroundColor="#357CE6"
-                titleColor="#fff"
+                  tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
-                colors={['#fff']}
+                  titleColor="#fff"
-              />
+                  colors={['#fff']}
-            }
+                />
-            contentContainerStyle={styles.scrollContentContainer}
+              }
-          >
+              contentContainerStyle={styles.scrollContentContainer}
-            {!walletData ? (
+            >
-              <Fragment>
+              {!walletData ? (
-                <WalletDetailsPlaceHolder />
+                <Fragment>
-              </Fragment>
+                  <WalletDetailsPlaceHolder />
-            ) : (
+                </Fragment>
-              <Fragment>
+              ) : (
-                {walletData.hasUnclaimedRewards && (
+                <Fragment>
+                  {walletData.hasUnclaimedRewards && (
+                    <CollapsibleCard
+                      titleColor="#788187"
+                      isBoldTitle
+                      defaultTitle={intl.formatMessage({
+                        id: 'profile.unclaimed_rewards',
+                      })}
+                      expanded
+                    >
+                      {currentAccountUsername === selectedUsername ? (
+                        <MainButton
+                          isLoading={isClaiming}
+                          isDisable={isClaiming}
+                          style={styles.mainButton}
+                          height={50}
+                          onPress={() => claimRewardBalance()}
+                        >
+                          <View style={styles.mainButtonWrapper}>
+                            {_getUnclaimedText(walletData)}
+                            <View style={styles.mainIconWrapper}>
+                              <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+                            </View>
+                          </View>
+                        </MainButton>
+                      ) : (
+                        _getUnclaimedText(walletData, true)
+                      )}
+                    </CollapsibleCard>
+                  )}
                   <CollapsibleCard
                     titleColor="#788187"
-                    isBoldTitle
+                    title={intl.formatMessage({
-                    defaultTitle={intl.formatMessage({
+                      id: 'profile.wallet_details',
-                      id: 'profile.unclaimed_rewards',
                     })}
                     expanded
                   >
-                    {currentAccountUsername === selectedUsername ? (
+                    <WalletDetails
-                      <MainButton
+                      intl={intl}
-                        isLoading={isClaiming}
+                      walletData={walletData}
-                        isDisable={isClaiming}
+                      isShowDropdowns={currentAccountUsername === selectedUsername}
-                        style={styles.mainButton}
+                    />
-                        height={50}
-                        onPress={() => claimRewardBalance()}
-                      >
-                        <View style={styles.mainButtonWrapper}>
-                          {this._getUnclaimedText(walletData)}
-                          <View style={styles.mainIconWrapper}>
-                            <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
-                          </View>
-                        </View>
-                      </MainButton>
-                    ) : (
-                      this._getUnclaimedText(walletData, true)
-                    )}
                   </CollapsibleCard>
-                )}
+                  <Transaction walletData={walletData} />
-                <CollapsibleCard
+                </Fragment>
-                  titleColor="#788187"
+              )}
-                  title={intl.formatMessage({
+            </ScrollView>
-                    id: 'profile.wallet_details',
+          )}
-                  })}
+        </ThemeContainer>
-                  expanded
+      )}
-                >
+    </SteemWalletContainer>
-                  <WalletDetails
+  );
-                    intl={intl}
+};
-                    walletData={walletData}
-                    isShowDropdowns={currentAccountUsername === selectedUsername}
-                  />
-                </CollapsibleCard>
-                <Transaction walletData={walletData} />
-              </Fragment>
-            )}
-          </ScrollView>
-        )}
-      </ThemeContainer>
-    );
-  }
-}
 
-export default injectIntl(WalletView);
+export default WalletView;

src/containers/index.js

@@ -7,6 +7,7 @@ import RedeemContainer from './redeemContainer';
 import SpinGameContainer from './spinGameContainer';
 import TransferContainer from './transferContainer';
 import ThemeContainer from './themeContainer';
+import SteemWalletContainer from './steemWalletContainer';
 
 export {
   AccountContainer,
@@ -18,4 +19,5 @@ export {
   SpinGameContainer,
   TransferContainer,
   ThemeContainer,
+  SteemWalletContainer,
 };

src/containers/steemWalletContainer.js

@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { toastNotification } from '../redux/actions/uiAction';
+
+// Dsteem
+import { getAccount, claimRewardBalance } from '../providers/steem/dsteem';
+
+// Utils
+import { groomingWalletData } from '../utils/wallet';
+import parseToken from '../utils/parseToken';
+
+const WalletContainer = ({
+  children,
+  currentAccount,
+  globalProps,
+  handleOnScroll,
+  pinCode,
+  selectedUser,
+  setEstimatedWalletValue,
+}) => {
+  const [isClaiming, setIsClaiming] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [walletData, setWalletData] = useState(null);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    _getWalletData(selectedUser);
+  }, [_getWalletData, selectedUser]);
+
+  useEffect(() => {
+    _getWalletData(selectedUser);
+  }, [_getWalletData, selectedUser]);
+
+  // Components functions
+
+  const _getWalletData = useCallback(
+    async _selectedUser => {
+      const _walletData = await groomingWalletData(_selectedUser, globalProps);
+
+      setWalletData(_walletData);
+      setEstimatedWalletValue(_walletData.estimatedValue);
+    },
+    [globalProps, setEstimatedWalletValue],
+  );
+
+  const _isHasUnclaimedRewards = account => {
+    return (
+      parseToken(get(account, 'reward_steem_balance')) > 0 ||
+      parseToken(get(account, 'reward_sbd_balance')) > 0 ||
+      parseToken(get(account, 'reward_vesting_steem')) > 0
+    );
+  };
+
+  const _claimRewardBalance = async () => {
+    let isHasUnclaimedRewards;
+
+    if (isClaiming) {
+      return;
+    }
+
+    await setIsClaiming(true);
+
+    getAccount(currentAccount.name)
+      .then(account => {
+        isHasUnclaimedRewards = _isHasUnclaimedRewards(account[0]);
+        if (isHasUnclaimedRewards) {
+          const {
+            reward_steem_balance: steemBal,
+            reward_sbd_balance: sbdBal,
+            reward_vesting_balance: vestingBal,
+          } = account[0];
+          return claimRewardBalance(currentAccount, pinCode, steemBal, sbdBal, vestingBal);
+        }
+        setIsClaiming(false);
+      })
+      .then(() => getAccount(currentAccount.name))
+      .then(account => {
+        _getWalletData(account && account[0]);
+        if (isHasUnclaimedRewards) {
+          dispatch(
+            toastNotification(
+              intl.formatMessage({
+                id: 'alert.claim_reward_balance_ok',
+              }),
+            ),
+          );
+        }
+      })
+      .then(account => {
+        _getWalletData(account && account[0]);
+        setIsClaiming(false);
+      })
+      .catch(() => {
+        setIsClaiming(false);
+
+        dispatch(
+          toastNotification(
+            intl.formatMessage({
+              id: 'alert.fail',
+            }),
+          ),
+        );
+      });
+  };
+
+  const _handleOnWalletRefresh = () => {
+    setRefreshing(true);
+
+    getAccount(selectedUser.name)
+      .then(account => {
+        _getWalletData(account && account[0]);
+        setRefreshing(false);
+      })
+      .catch(() => {
+        dispatch(
+          toastNotification(
+            intl.formatMessage({
+              id: 'alert.fail',
+            }),
+          ),
+        );
+        setRefreshing(false);
+      });
+  };
+
+  return (
+    children &&
+    children({
+      claimRewardBalance: _claimRewardBalance,
+      currentAccountUsername: currentAccount.name,
+      handleOnWalletRefresh: _handleOnWalletRefresh,
+      isClaiming: isClaiming,
+      refreshing: refreshing,
+      selectedUsername: get(selectedUser, 'name', ''),
+      walletData: walletData,
+    })
+  );
+};
+
+const mapStateToProps = state => ({
+  currentAccount: state.account.currentAccount,
+  pinCode: state.application.pin,
+  globalProps: state.account.globalProps,
+});
+
+export default connect(mapStateToProps)(WalletContainer);