wallet container seperated and refactored

This commit is contained in:
ue 2019-11-16 16:56:20 +03:00
parent 946dd85e23
commit e4c553cfd2
5 changed files with 245 additions and 268 deletions

View File

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

View File

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

View File

@ -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) => (
<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() {
const {
isClaiming,
claimRewardBalance,
currentAccountUsername,
handleOnWalletRefresh,
intl,
isRefreshing,
selectedUsername,
walletData,
handleOnScroll,
} = this.props;
return (
<ThemeContainer>
{isDarkTheme => (
<ScrollView
onScroll={handleOnScroll && handleOnScroll}
style={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleOnWalletRefresh}
progressBackgroundColor="#357CE6"
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
titleColor="#fff"
colors={['#fff']}
/>
}
contentContainerStyle={styles.scrollContentContainer}
>
{!walletData ? (
<Fragment>
<WalletDetailsPlaceHolder />
</Fragment>
) : (
<Fragment>
{walletData.hasUnclaimedRewards && (
return (
<SteemWalletContainer
setEstimatedWalletValue={setEstimatedWalletValue}
selectedUser={selectedUser}
handleOnScroll={handleOnScroll}
>
{({
isClaiming,
claimRewardBalance,
currentAccountUsername,
handleOnWalletRefresh,
refreshing,
selectedUsername,
walletData,
}) => (
<ThemeContainer>
{isDarkTheme => (
<ScrollView
onScroll={handleOnScroll && handleOnScroll}
style={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={handleOnWalletRefresh}
progressBackgroundColor="#357CE6"
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
titleColor="#fff"
colors={['#fff']}
/>
}
contentContainerStyle={styles.scrollContentContainer}
>
{!walletData ? (
<Fragment>
<WalletDetailsPlaceHolder />
</Fragment>
) : (
<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
defaultTitle={intl.formatMessage({
id: 'profile.unclaimed_rewards',
title={intl.formatMessage({
id: 'profile.wallet_details',
})}
expanded
>
{currentAccountUsername === selectedUsername ? (
<MainButton
isLoading={isClaiming}
isDisable={isClaiming}
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)
)}
<WalletDetails
intl={intl}
walletData={walletData}
isShowDropdowns={currentAccountUsername === selectedUsername}
/>
</CollapsibleCard>
)}
<CollapsibleCard
titleColor="#788187"
title={intl.formatMessage({
id: 'profile.wallet_details',
})}
expanded
>
<WalletDetails
intl={intl}
walletData={walletData}
isShowDropdowns={currentAccountUsername === selectedUsername}
/>
</CollapsibleCard>
<Transaction walletData={walletData} />
</Fragment>
)}
</ScrollView>
)}
</ThemeContainer>
);
}
}
<Transaction walletData={walletData} />
</Fragment>
)}
</ScrollView>
)}
</ThemeContainer>
)}
</SteemWalletContainer>
);
};
export default injectIntl(WalletView);
export default WalletView;

View File

@ -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,
};

View File

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