diff --git a/src/components/wallet/container/walletContainer.js b/src/components/wallet/container/walletContainer.js deleted file mode 100644 index 37e6e6996..000000000 --- a/src/components/wallet/container/walletContainer.js +++ /dev/null @@ -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 ( - - ); - } -} - -const mapStateToProps = state => ({ - currentAccount: state.account.currentAccount, - pinCode: state.application.pin, - globalProps: state.account.globalProps, -}); - -export default injectIntl(connect(mapStateToProps)(WalletContainer)); diff --git a/src/components/wallet/index.js b/src/components/wallet/index.js index 3ffcbd313..c318a3a19 100644 --- a/src/components/wallet/index.js +++ b/src/components/wallet/index.js @@ -1,5 +1,4 @@ -import WalletView from './view/walletView'; -import Wallet from './container/walletContainer'; +import Wallet from './view/walletView'; -export { WalletView, Wallet }; +export { Wallet }; export default Wallet; diff --git a/src/components/wallet/view/walletView.js b/src/components/wallet/view/walletView.js index bdd9ba257..33a1be4d8 100644 --- a/src/components/wallet/view/walletView.js +++ b/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 { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ +const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) => { + const intl = useIntl(); - constructor(props) { - super(props); - this.state = {}; - } - - // Component Life Cycles - - // Component Functions - - _getUnclaimedText = (walletData, isPreview) => ( + const _getUnclaimedText = (walletData, isPreview) => ( {walletData.rewardSteemBalance ? `${Math.round(walletData.rewardSteemBalance * 1000) / 1000} STEEM` @@ -44,93 +32,95 @@ class WalletView extends PureComponent { ); - render() { - const { - isClaiming, - claimRewardBalance, - currentAccountUsername, - handleOnWalletRefresh, - intl, - isRefreshing, - selectedUsername, - walletData, - handleOnScroll, - } = this.props; - - return ( - - {isDarkTheme => ( - - } - contentContainerStyle={styles.scrollContentContainer} - > - {!walletData ? ( - - - - ) : ( - - {walletData.hasUnclaimedRewards && ( + return ( + + {({ + isClaiming, + claimRewardBalance, + currentAccountUsername, + handleOnWalletRefresh, + refreshing, + selectedUsername, + walletData, + }) => ( + + {isDarkTheme => ( + + } + contentContainerStyle={styles.scrollContentContainer} + > + {!walletData ? ( + + + + ) : ( + + {walletData.hasUnclaimedRewards && ( + + {currentAccountUsername === selectedUsername ? ( + claimRewardBalance()} + > + + {_getUnclaimedText(walletData)} + + + + + + ) : ( + _getUnclaimedText(walletData, true) + )} + + )} - {currentAccountUsername === selectedUsername ? ( - claimRewardBalance()} - > - - {this._getUnclaimedText(walletData)} - - - - - - ) : ( - this._getUnclaimedText(walletData, true) - )} + - )} - - - - - - )} - - )} - - ); - } -} + + + )} + + )} + + )} + + ); +}; -export default injectIntl(WalletView); +export default WalletView; diff --git a/src/containers/index.js b/src/containers/index.js index eda2d5363..238e67d07 100644 --- a/src/containers/index.js +++ b/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, }; diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js new file mode 100644 index 000000000..9658d93b1 --- /dev/null +++ b/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);