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);