From e192737f64758a7b3bc9f07be1516995b6dacf6d Mon Sep 17 00:00:00 2001 From: ue Date: Sat, 16 Nov 2019 15:55:38 +0300 Subject: [PATCH 01/14] try to clear points view --- package.json | 1 + src/components/points/view/pointsStyles.js | 3 +- src/components/points/view/pointsView.js | 395 ++++++++++----------- src/containers/pointsContainer.js | 2 +- src/screens/points/screen/pointsScreen.js | 48 ++- yarn.lock | 7 + 6 files changed, 236 insertions(+), 220 deletions(-) diff --git a/package.json b/package.json index 0519de56f..a08ae247b 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "react-native-slider": "^0.11.0", "react-native-snap-carousel": "^3.8.0", "react-native-svg": "^9.5.3", + "react-native-swiper": "^1.5.14", "react-native-vector-icons": "^6.6.0", "react-native-version": "^3.1.0", "react-native-version-number": "^0.3.5", diff --git a/src/components/points/view/pointsStyles.js b/src/components/points/view/pointsStyles.js index ec87a271d..9dcd66a23 100644 --- a/src/components/points/view/pointsStyles.js +++ b/src/components/points/view/pointsStyles.js @@ -52,7 +52,7 @@ export default EStyleSheet.create({ width: 36, height: 36, borderRadius: 36 / 2, - backgroundColor: '$primaryGrayBackground', + backgroundColor: '$primaryLightBackground', justifyContent: 'center', alignItems: 'center', }, @@ -119,6 +119,7 @@ export default EStyleSheet.create({ }, scrollContainer: { flex: 1, + backgroundColor: '$primaryBackgroundColor', }, scrollContentContainer: { paddingBottom: 60, diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index cc9bfc841..4c9f4c129 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -1,7 +1,7 @@ /* eslint-disable react/jsx-wrap-multilines */ -import React, { Component, Fragment } from 'react'; +import React, { useRef, Fragment } from 'react'; import { Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity } from 'react-native'; -import { injectIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import { Popover, PopoverController } from 'react-native-modal-popover'; import { get } from 'lodash'; import { withNavigation } from 'react-navigation'; @@ -24,39 +24,40 @@ import { default as ROUTES } from '../../../constants/routeNames'; // Styles import styles from './pointsStyles'; +// dropdownRef = React.createRef(); -class PointsView extends Component { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ +const PointsView = ({ + fetchUserActivity, + refreshing, + isLoading, + claimPoints, + isClaiming, + userActivities, + handleOnDropdownSelected, + navigation, + unclaimedBalance, + userBalance, + dropdownOptions, + type = '', +}) => { + const intl = useIntl(); + const dropdownRef = useRef(); + const refreshControl = () => ( + + {isDarkTheme => ( + + )} + + ); - constructor(props) { - super(props); - this.state = {}; - - this.dropdownRef = React.createRef(); - } - - // Component Functions - - refreshControl = ({ isDarkTheme }) => { - const { fetchUserActivity, refreshing } = this.props; - - return ( - - ); - }; - - _getTranslation = id => { - const { intl } = this.props; + const _getTranslation = id => { let translation; try { @@ -68,198 +69,160 @@ class PointsView extends Component { return translation; }; - _renderLoading = () => { - const { isLoading, intl } = this.props; - + const _renderLoading = () => { if (isLoading) { return ; } + return {intl.formatMessage({ id: 'points.no_activity' })}; }; - _showDropdown = () => { - this.dropdownRef.current.show(); - }; + return ( + + + refreshControl()} + contentContainerStyle={styles.scrollContentContainer} + > + + dropdownRef.current.show()} style={styles.pointText}> + {userBalance} + + + + {intl.formatMessage({ id: 'points.esteemPoints' })} - render() { - const { - claimPoints, - isClaiming, - userActivities, - userPoints, - handleOnDropdownSelected, - navigation, - intl, - } = this.props; - const unclaimedPoints = get(userPoints, 'unclaimed_points', 0); + + unclaimedBalance > 0 ? claimPoints() : navigation.navigate(ROUTES.SCREENS.BOOST) + } + > + + + {unclaimedBalance > 0 ? unclaimedBalance : intl.formatMessage({ id: 'boost.buy' })} + + + + + + - return ( - - - - {isDarkTheme => ( - - - - {get(userPoints, 'points')} - - - - - {intl.formatMessage({ id: 'points.esteemPoints' })} - + + get(item, 'type', Math.random()).toString()} + horizontal + renderItem={({ item }) => ( + + {({ + openPopover, + closePopover, + popoverVisible, + setPopoverAnchor, + popoverAnchorRect, + }) => ( + + + + + + + + {_getTranslation(get(POINTS[get(item, 'type')], 'nameKey'))} + + closePopover()} + fromRect={popoverAnchorRect} + placement="top" + supportedOrientations={['portrait', 'landscape']} + > + + + {_getTranslation(get(POINTS[get(item, 'type')], 'descriptionKey'))} + + + + + )} + + )} + /> + - - unclaimedPoints > 0 ? claimPoints() : navigation.navigate(ROUTES.SCREENS.BOOST) + + item.id.toString()} + ListEmptyComponent={_renderLoading()} + renderItem={({ item, index }) => ( + } > - - - {unclaimedPoints > 0 - ? unclaimedPoints - : intl.formatMessage({ id: 'boost.buy' })} - - - - - - + {(get(item, 'memo') || get(item, 'sender')) && ( + + )} + + )} + /> + + + + ); +}; - - get(item, 'type', Math.random()).toString()} - horizontal - renderItem={({ item }) => ( - - {({ - openPopover, - closePopover, - popoverVisible, - setPopoverAnchor, - popoverAnchorRect, - }) => ( - - - - - - - - {this._getTranslation(get(POINTS[get(item, 'type')], 'nameKey'))} - - closePopover()} - fromRect={popoverAnchorRect} - placement="top" - supportedOrientations={['portrait', 'landscape']} - > - - - {this._getTranslation( - get(POINTS[get(item, 'type')], 'descriptionKey'), - )} - - - - - )} - - )} - /> - - - - item.id.toString()} - ListEmptyComponent={this._renderLoading()} - renderItem={({ item, index }) => ( - - } - > - {(get(item, 'memo') || get(item, 'sender')) && ( - - )} - - )} - /> - - - )} - - - ); - } -} - -export default withNavigation(injectIntl(PointsView)); +export default withNavigation(PointsView); diff --git a/src/containers/pointsContainer.js b/src/containers/pointsContainer.js index d0be600de..7a3afa583 100644 --- a/src/containers/pointsContainer.js +++ b/src/containers/pointsContainer.js @@ -245,7 +245,7 @@ class PointsContainer extends Component { accounts, balance, boost: this._boost, - claimPoints: this._claimPoints, + claim: this._claimPoints, currentAccount, currentAccountName: currentAccount.name, fetchUserActivity: this._fetchUserPointActivities, diff --git a/src/screens/points/screen/pointsScreen.js b/src/screens/points/screen/pointsScreen.js index 8017c1b39..c73f5272a 100644 --- a/src/screens/points/screen/pointsScreen.js +++ b/src/screens/points/screen/pointsScreen.js @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; import { useIntl } from 'react-intl'; import { SafeAreaView } from 'react-native'; +import get from 'lodash/get'; // Containers import { PointsContainer } from '../../../containers'; @@ -22,7 +23,7 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => { {({ handleOnDropdownSelected, - claimPoints, + claim, fetchUserActivity, isClaiming, isLoading, @@ -31,14 +32,22 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => { userPoints, }) => ( )} @@ -58,3 +67,38 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => { }; export default PointsScreen; + +// const viewStyle = () => { +// return { +// flex: 1, +// justifyContent: 'center', +// alignItems: 'center', +// }; +// }; + +// +// +// +// +// +// +// +// diff --git a/yarn.lock b/yarn.lock index d3fdc471e..ad9245eb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7634,6 +7634,13 @@ react-native-svg@^9.5.3: resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.11.1.tgz#b1ccf48de413ff8c4f476f202aaa3893f4c8b59a" integrity sha512-BmNCM81SSzhj1+N5rYiy7sxrkmybgiT8Cu8yVRB7zVoWze/i1lbCWJah+Gk0OHHwR35ZA31oVKf5jtO4G1n94Q== +react-native-swiper@^1.5.14: + version "1.5.14" + resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.5.14.tgz#1c6f949ca377186300f972bb0f30d24062c899aa" + integrity sha512-Kn0fxKooN7Shwu1qJYHB+Y8ssXXnvrIwReHXU5jCdyYNfz2QbBv0Cv3sa2Mqzr+XgzORCFFIokc8uCCUITDrVA== + dependencies: + prop-types "^15.5.10" + react-native-tab-view@^2.9.0: version "2.10.0" resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.10.0.tgz#5e249e5650502010013449ffd4e5edc18a95364b" From b266b3864102c8dd8c4c26aabe87c1ac0598dad9 Mon Sep 17 00:00:00 2001 From: ue Date: Sat, 16 Nov 2019 16:56:20 +0300 Subject: [PATCH 02/14] wallet container seperated and refactored --- .../wallet/container/walletContainer.js | 164 --------------- src/components/wallet/index.js | 5 +- src/components/wallet/view/walletView.js | 192 +++++++++--------- src/containers/index.js | 2 + src/containers/steemWalletContainer.js | 150 ++++++++++++++ 5 files changed, 245 insertions(+), 268 deletions(-) delete mode 100644 src/components/wallet/container/walletContainer.js create mode 100644 src/containers/steemWalletContainer.js 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); From 9f2b958d1bfb4da3be89c3fb119638b18abbe369 Mon Sep 17 00:00:00 2001 From: ue Date: Sun, 17 Nov 2019 15:40:59 +0300 Subject: [PATCH 03/14] created login container && enhanced points --- .../horizontalIconListStyles.js | 78 +++++++++++++++++ .../horizontalIconListView.js | 84 +++++++++++++++++++ src/components/index.js | 2 + src/components/points/view/pointsStyles.js | 72 ---------------- src/components/points/view/pointsView.js | 67 +-------------- src/components/posts/view/postsStyles.js | 2 +- src/components/posts/view/postsView.js | 1 + .../userAvatar/view/userAvatarView.js | 4 +- src/containers/index.js | 10 ++- src/containers/loggedInContainer.js | 40 +++++++++ src/containers/pointsContainer.js | 4 +- src/navigation/service.js | 5 +- .../container/applicationContainer.js | 6 +- .../application/screen/applicationScreen.js | 4 +- .../notification/screen/notificationScreen.js | 35 ++++---- .../pinCode/container/pinCodeContainer.js | 12 +-- .../points/container/pointsContainer.js | 22 ----- src/screens/points/index.js | 5 +- src/screens/points/screen/pointsScreen.js | 83 +++++++++--------- src/screens/points/screen/pointsStyles.js | 3 - 20 files changed, 288 insertions(+), 251 deletions(-) create mode 100644 src/components/horizontalIconList/horizontalIconListStyles.js create mode 100644 src/components/horizontalIconList/horizontalIconListView.js create mode 100644 src/containers/loggedInContainer.js delete mode 100644 src/screens/points/container/pointsContainer.js diff --git a/src/components/horizontalIconList/horizontalIconListStyles.js b/src/components/horizontalIconList/horizontalIconListStyles.js new file mode 100644 index 000000000..266a98f81 --- /dev/null +++ b/src/components/horizontalIconList/horizontalIconListStyles.js @@ -0,0 +1,78 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + iconsWrapper: { + marginVertical: 24, + marginHorizontal: 32, + justifyContent: 'center', + alignSelf: 'center', + flexDirection: 'row', + }, + iconsList: { + height: 55, + }, + subText: { + color: '$darkIconColor', + fontSize: 8, + justifyContent: 'center', + alignSelf: 'center', + marginTop: 5, + }, + iconWrapper: { + marginHorizontal: 16, + width: 36, + height: 36, + borderRadius: 36 / 2, + backgroundColor: '$primaryLightBackground', + justifyContent: 'center', + alignItems: 'center', + }, + iconButton: { + marginTop: 1, + marginLeft: 1, + }, + icon: { + fontSize: 24, + color: '$primaryDarkText', + }, + badge: { + position: 'absolute', + right: -9, + top: 20, + backgroundColor: '$primaryBlue', + justifyContent: 'center', + alignItems: 'center', + padding: 2, + height: 12, + minWidth: 18, + borderRadius: 12 / 2, + }, + badgeText: { + fontSize: 8, + color: '$white', + fontWeight: '600', + }, + popoverDetails: { + flexDirection: 'row', + height: 130, + width: '$deviceWidth / 2', + borderRadius: 20, + paddingHorizontal: 26, + backgroundColor: '$primaryBackgroundColor', + }, + arrow: { + borderTopColor: '$primaryBackgroundColor', + }, + popoverWrapper: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + overlay: { + backgroundColor: '#403c4449', + }, + popoverText: { + color: '$primaryDarkText', + }, +}); diff --git a/src/components/horizontalIconList/horizontalIconListView.js b/src/components/horizontalIconList/horizontalIconListView.js new file mode 100644 index 000000000..a1bdc3e21 --- /dev/null +++ b/src/components/horizontalIconList/horizontalIconListView.js @@ -0,0 +1,84 @@ +import React from 'react'; +import { useIntl } from 'react-intl'; +import { View, FlatList, TouchableOpacity, Text } from 'react-native'; +import { Popover, PopoverController } from 'react-native-modal-popover'; +import get from 'lodash/get'; + +import styles from './horizontalIconListStyles'; + +import { IconButton } from '..'; + +const HorizontalIconList = ({ options, optionsKeys }) => { + const intl = useIntl(); + const _getTranslation = id => { + let translation; + + try { + translation = intl.formatMessage({ id }); + } catch (error) { + translation = ''; + } + + return translation; + }; + + return ( + + get(item, 'type', Math.random()).toString()} + horizontal + renderItem={({ item }) => ( + + {({ + openPopover, + closePopover, + popoverVisible, + setPopoverAnchor, + popoverAnchorRect, + }) => ( + + + + + + + + {_getTranslation(get(options[get(item, 'type')], 'nameKey'))} + + closePopover()} + fromRect={popoverAnchorRect} + placement="top" + supportedOrientations={['portrait', 'landscape']} + > + + + {_getTranslation(get(options[get(item, 'type')], 'descriptionKey'))} + + + + + )} + + )} + /> + + ); +}; + +export { HorizontalIconList }; diff --git a/src/components/index.js b/src/components/index.js index 001c417b1..6d620979a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -51,6 +51,7 @@ import PostButton from './postButton/postButtonView'; import ProfileEditForm from './profileEditForm/profileEditFormView'; import ScaleSlider from './scaleSlider/scaleSliderView'; import { ProductItemLine } from './productItemLine/productItemLineView'; +import { HorizontalIconList } from './horizontalIconList/horizontalIconListView'; // View import { Comment } from './comment'; @@ -187,4 +188,5 @@ export { WalletDetailsPlaceHolder, WalletLineItem, WalletUnclaimedPlaceHolder, + HorizontalIconList, }; diff --git a/src/components/points/view/pointsStyles.js b/src/components/points/view/pointsStyles.js index 9dcd66a23..407e8df62 100644 --- a/src/components/points/view/pointsStyles.js +++ b/src/components/points/view/pointsStyles.js @@ -37,59 +37,10 @@ export default EStyleSheet.create({ alignSelf: 'center', marginTop: 5, }, - iconsWrapper: { - marginVertical: 24, - marginHorizontal: 32, - justifyContent: 'center', - alignSelf: 'center', - flexDirection: 'row', - }, - iconsList: { - height: 55, - }, - iconWrapper: { - marginHorizontal: 16, - width: 36, - height: 36, - borderRadius: 36 / 2, - backgroundColor: '$primaryLightBackground', - justifyContent: 'center', - alignItems: 'center', - }, - iconButton: { - marginTop: 1, - marginLeft: 1, - }, - activeIconWrapper: { - backgroundColor: '$primaryBlue', - }, - activeIcon: { - color: '$white', - }, icon: { fontSize: 24, color: '$primaryDarkText', }, - badge: { - position: 'absolute', - right: -9, - top: 20, - backgroundColor: '$primaryBlue', - justifyContent: 'center', - alignItems: 'center', - padding: 2, - height: 12, - minWidth: 18, - borderRadius: 12 / 2, - }, - badgeText: { - fontSize: 8, - color: '$white', - fontWeight: '600', - }, - activeBadge: { - backgroundColor: '$black', - }, listWrapper: { marginHorizontal: 8, }, @@ -124,27 +75,4 @@ export default EStyleSheet.create({ scrollContentContainer: { paddingBottom: 60, }, - popoverDetails: { - flexDirection: 'row', - height: 130, - width: '$deviceWidth / 2', - borderRadius: 20, - paddingHorizontal: 26, - backgroundColor: '$primaryBackgroundColor', - }, - arrow: { - borderTopColor: '$primaryBackgroundColor', - }, - popoverWrapper: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - overlay: { - backgroundColor: '#403c4449', - }, - popoverText: { - color: '$primaryDarkText', - }, }); diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index 4c9f4c129..4cb151e91 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -2,17 +2,12 @@ import React, { useRef, Fragment } from 'react'; import { Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity } from 'react-native'; import { useIntl } from 'react-intl'; -import { Popover, PopoverController } from 'react-native-modal-popover'; import { get } from 'lodash'; import { withNavigation } from 'react-navigation'; // Components import { LineBreak, WalletLineItem, ListPlaceHolder } from '../../basicUIElements'; -import { IconButton } from '../../iconButton'; -import { Icon } from '../../icon'; -import { MainButton } from '../../mainButton'; -import { DropdownButton } from '../../dropdownButton'; -import { CollapsibleCard } from '../../collapsibleCard'; +import { Icon, MainButton, DropdownButton, CollapsibleCard, HorizontalIconList } from '../..'; import { ThemeContainer } from '../../../containers'; // Utils @@ -30,7 +25,7 @@ const PointsView = ({ fetchUserActivity, refreshing, isLoading, - claimPoints, + claim, isClaiming, userActivities, handleOnDropdownSelected, @@ -110,7 +105,7 @@ const PointsView = ({ style={styles.mainButton} height={50} onPress={() => - unclaimedBalance > 0 ? claimPoints() : navigation.navigate(ROUTES.SCREENS.BOOST) + unclaimedBalance > 0 ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST) } > @@ -123,61 +118,7 @@ const PointsView = ({ - - get(item, 'type', Math.random()).toString()} - horizontal - renderItem={({ item }) => ( - - {({ - openPopover, - closePopover, - popoverVisible, - setPopoverAnchor, - popoverAnchorRect, - }) => ( - - - - - - - - {_getTranslation(get(POINTS[get(item, 'type')], 'nameKey'))} - - closePopover()} - fromRect={popoverAnchorRect} - placement="top" - supportedOrientations={['portrait', 'landscape']} - > - - - {_getTranslation(get(POINTS[get(item, 'type')], 'descriptionKey'))} - - - - - )} - - )} - /> - + { + const intl = useIntl(); + + if (!isLoggedIn) { + return ( + navigate(ROUTES.SCREENS.LOGIN)} + /> + ); + } + + return ( + children && + children({ + isLoggedIn, + isLoginDone, + }) + ); +}; + +const mapStateToProps = state => ({ + isLoggedIn: state.application.isLoggedIn, + isLoginDone: state.application.isLoginDone, +}); + +export default connect(mapStateToProps)(LoggedInContainer); diff --git a/src/containers/pointsContainer.js b/src/containers/pointsContainer.js index 7a3afa583..42447da29 100644 --- a/src/containers/pointsContainer.js +++ b/src/containers/pointsContainer.js @@ -237,7 +237,7 @@ class PointsContainer extends Component { userActivities, userPoints, } = this.state; - const { children, accounts, currentAccount } = this.props; + const { children, accounts, currentAccount, user } = this.props; return ( children && @@ -262,12 +262,14 @@ class PointsContainer extends Component { userActivities, userPoints, redeemType: get(navigationParams, 'redeemType'), + user, }) ); } } const mapStateToProps = state => ({ + user: state.account.currentAccount, username: state.account.currentAccount.name, activeBottomTab: state.ui.activeBottomTab, isConnected: state.application.isConnected, diff --git a/src/navigation/service.js b/src/navigation/service.js index 6e424c6fb..f11b0ca37 100644 --- a/src/navigation/service.js +++ b/src/navigation/service.js @@ -16,7 +16,4 @@ const navigate = navigationProps => { // add other navigation functions that you need and export them -export default { - navigate, - setTopLevelNavigator, -}; +export { navigate, setTopLevelNavigator }; diff --git a/src/screens/application/container/applicationContainer.js b/src/screens/application/container/applicationContainer.js index abafbc44c..aed305808 100644 --- a/src/screens/application/container/applicationContainer.js +++ b/src/screens/application/container/applicationContainer.js @@ -38,7 +38,7 @@ import { import { getUser, getPost } from '../../../providers/steem/dsteem'; import { switchAccount } from '../../../providers/steem/auth'; import { setPushToken } from '../../../providers/esteem/esteem'; -import NavigationService from '../../../navigation/service'; +import { navigate } from '../../../navigation/service'; // Actions import { @@ -261,7 +261,7 @@ class ApplicationContainer extends Component { if (routeName && (profile || content)) { this.navigationTimeout = setTimeout(() => { clearTimeout(this.navigationTimeout); - NavigationService.navigate({ + navigate({ routeName, params, key: permlink || author, @@ -401,7 +401,7 @@ class ApplicationContainer extends Component { } if (!some(params, isEmpty)) { - NavigationService.navigate({ + navigate({ routeName, params, key, diff --git a/src/screens/application/screen/applicationScreen.js b/src/screens/application/screen/applicationScreen.js index 74f11ac0c..f9efef068 100644 --- a/src/screens/application/screen/applicationScreen.js +++ b/src/screens/application/screen/applicationScreen.js @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import { createAppContainer } from 'react-navigation'; import AppNavitation from '../../../navigation/routes'; -import NavigationService from '../../../navigation/service'; +import { setTopLevelNavigator } from '../../../navigation/service'; // Services import { toastNotification as toastNotificationAction } from '../../../redux/actions/uiAction'; @@ -62,7 +62,7 @@ class ApplicationScreen extends Component { {!isConnected && } { - NavigationService.setTopLevelNavigator(navigatorRef); + setTopLevelNavigator(navigatorRef); }} /> diff --git a/src/screens/notification/screen/notificationScreen.js b/src/screens/notification/screen/notificationScreen.js index b802cb55c..56ac8bc1f 100644 --- a/src/screens/notification/screen/notificationScreen.js +++ b/src/screens/notification/screen/notificationScreen.js @@ -4,7 +4,8 @@ import ScrollableTabView from 'react-native-scrollable-tab-view'; import { injectIntl } from 'react-intl'; // Components -import { TabBar, LeaderBoard, Notification, Header, NoPost } from '../../../components'; +import { TabBar, LeaderBoard, Notification, Header } from '../../../components'; +import { LoggedInContainer } from '../../../containers'; // Styles import styles from './notificationStyles'; @@ -23,8 +24,6 @@ class NotificationScreen extends PureComponent { intl, navigateToNotificationRoute, readAllNotification, - handleLoginPress, - isLoggedIn, isNotificationRefreshing, changeSelectedFilter, } = this.props; @@ -45,24 +44,18 @@ class NotificationScreen extends PureComponent { })} style={styles.tabbarItem} > - {isLoggedIn ? ( - - ) : ( - - )} + + {() => ( + + )} + { - const _handleOnPressLogin = () => { - navigation.navigate(ROUTES.SCREENS.LOGIN); - }; - - return ; -}; - -const matStateToProps = state => ({ - isLoggedIn: state.application.isLoggedIn, -}); - -export default connect(matStateToProps)(PointsContainer); diff --git a/src/screens/points/index.js b/src/screens/points/index.js index c9f1a1d02..4c9efb6f8 100644 --- a/src/screens/points/index.js +++ b/src/screens/points/index.js @@ -1,5 +1,4 @@ -import PointsScreen from './screen/pointsScreen'; -import Points from './container/pointsContainer'; +import Points from './screen/pointsScreen'; -export { PointsScreen, Points }; +export { Points }; export default Points; diff --git a/src/screens/points/screen/pointsScreen.js b/src/screens/points/screen/pointsScreen.js index c73f5272a..660652c26 100644 --- a/src/screens/points/screen/pointsScreen.js +++ b/src/screens/points/screen/pointsScreen.js @@ -4,63 +4,56 @@ import { SafeAreaView } from 'react-native'; import get from 'lodash/get'; // Containers -import { PointsContainer } from '../../../containers'; +import { PointsContainer, LoggedInContainer } from '../../../containers'; // Components -import { Header, Points, NoPost } from '../../../components'; +import { Header, Points } from '../../../components'; // Styles import styles from './pointsStyles'; -const PointsScreen = ({ isLoggedIn, handleLoginPress }) => { +const PointsScreen = () => { const intl = useIntl(); return (
- {isLoggedIn ? ( - - {({ - handleOnDropdownSelected, - claim, - fetchUserActivity, - isClaiming, - isLoading, - refreshing, - userActivities, - userPoints, - }) => ( - - )} - - ) : ( - - )} + + {() => ( + + {({ + handleOnDropdownSelected, + claim, + fetchUserActivity, + isClaiming, + isLoading, + refreshing, + userActivities, + userPoints, + }) => ( + + )} + + )} + ); diff --git a/src/screens/points/screen/pointsStyles.js b/src/screens/points/screen/pointsStyles.js index 53adee26e..163dc9b91 100644 --- a/src/screens/points/screen/pointsStyles.js +++ b/src/screens/points/screen/pointsStyles.js @@ -13,7 +13,4 @@ export default EStyleSheet.create({ color: '#788187', fontWeight: 'bold', }, - noPostContainer: { - flex: 1, - }, }); From 91eced499a9051b5e3ee02d4481f8d48fc1e64c2 Mon Sep 17 00:00:00 2001 From: ue Date: Sun, 17 Nov 2019 16:12:32 +0300 Subject: [PATCH 04/14] pointsContainer convert to hooks --- .../view/placeHolder/boostPlaceHolderView.js | 2 +- src/components/points/view/pointsView.js | 2 +- .../productItemLine/productItemLineView.js | 5 +- src/containers/pointsContainer.js | 202 ++++++++---------- 4 files changed, 94 insertions(+), 117 deletions(-) diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js index b9f7a0ba3..2bf401d72 100644 --- a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js +++ b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js @@ -20,7 +20,7 @@ const BoostPlaceHolder = () => { {({ isDarkTheme }) => { const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; return ( - + diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index 4cb151e91..995c82f1a 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -123,7 +123,7 @@ const PointsView = ({ item.id.toString()} + keyExtractor={item => get(item, 'created').toString()} ListEmptyComponent={_renderLoading()} renderItem={({ item, index }) => ( { - const intl = useIntl(); - return ( - + {_renderDeal(product)} { + const [userPoints, setUserPoints] = useState({}); + const [userActivities, setUserActivities] = useState(null); + const [refreshing, setRefreshing] = useState(false); + const [isClaiming, setIsClaiming] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [navigationParams, setNavigationParams] = useState({}); + const [balance, setBalance] = useState(0); + const intl = useIntl(); + const dispatch = useDispatch(); + const fetchInterval = useCallback(() => setInterval(_fetchUserPointActivities, 6 * 60 * 1000), [ + _fetchUserPointActivities, + ]); + useEffect(() => { if (isConnected) { - this._fetchUserPointActivities(username); - this.fetchInterval = setInterval(this._fetchUserPointActivities, 6 * 60 * 1000); + _fetchUserPointActivities(username); + fetchInterval(); } if (get(navigation, 'state.params', null)) { - const navigationParams = get(navigation, 'state.params'); + const _navigationParams = get(navigation, 'state.params'); - this.setState({ navigationParams }); + setNavigationParams(_navigationParams); } - } + }, [_fetchUserPointActivities, fetchInterval, isConnected, navigation, username]); - UNSAFE_componentWillReceiveProps(nextProps) { - const { username } = this.props; - const _username = get(nextProps, 'username'); - - if ( - nextProps.isConnected && - ((nextProps.activeBottomTab === ROUTES.TABBAR.POINTS && _username) || - (_username !== username && _username)) - ) { - this._fetchUserPointActivities(_username); + useEffect(() => { + if (isConnected && activeBottomTab === ROUTES.TABBAR.POINTS && username) { + _fetchUserPointActivities(username); } - } + }, [isConnected, username, _fetchUserPointActivities, activeBottomTab]); - componentWillUnmount() { - clearInterval(this.fetchInterval); - } + useEffect(() => { + return clearInterval(fetchInterval); + }); // Component Functions - _handleOnDropdownSelected = index => { - const { dispatch, isPinCodeOpen, navigation } = this.props; - const { balance } = this.state; + const _handleOnDropdownSelected = index => { let navigateTo; let navigateParams; @@ -123,35 +124,34 @@ class PointsContainer extends Component { } }; - _groomUserActivities = userActivities => - userActivities.map(item => ({ + const _groomUserActivities = _userActivities => + _userActivities.map(item => ({ ...item, icon: get(POINTS[get(item, 'type')], 'icon'), iconType: get(POINTS[get(item, 'type')], 'iconType'), textKey: get(POINTS[get(item, 'type')], 'textKey'), })); - _fetchUserPointActivities = async username => { - if (!username) { + const _fetchUserPointActivities = useCallback(async _username => { + if (!_username) { return; } - this.setState({ refreshing: true }); + setRefreshing(true); - await getUser(username) + await getUser(_username) .then(userPoints => { - const balance = Math.round(get(userPoints, 'points') * 1000) / 1000; - this.setState({ userPoints, balance }); + const _balance = Math.round(get(userPoints, 'points') * 1000) / 1000; + setUserPoints(userPoints); + setBalance(_balance); }) .catch(err => { Alert.alert(get(err, 'message', 'Error')); }); - await getUserPoints(username) + await getUserPoints(_username) .then(userActivities => { if (Object.entries(userActivities).length !== 0) { - this.setState({ - userActivities: this._groomUserActivities(userActivities), - }); + setUserActivities(_groomUserActivities(userActivities)); } }) .catch(err => { @@ -160,17 +160,15 @@ class PointsContainer extends Component { } }); - this.setState({ - refreshing: false, - isLoading: false, - }); - }; + setRefreshing(false); + setIsLoading(false); + }, []); - _getUserBalance = async username => { - await getUser(username) - .then(userPoints => { - const balance = Math.round(get(userPoints, 'points') * 1000) / 1000; - return balance; + const _getUserBalance = async _username => { + await getUser(_username) + .then(_userPoints => { + const _balance = Math.round(get(_userPoints, 'points') * 1000) / 1000; + return _balance; }) .catch(err => { if (err) { @@ -179,14 +177,12 @@ class PointsContainer extends Component { }); }; - _claimPoints = async () => { - const { username } = this.props; - - this.setState({ isClaiming: true }); + const _claimPoints = async () => { + setIsClaiming(true); await claim(username) .then(() => { - this._fetchUserPointActivities(username); + _fetchUserPointActivities(username); }) .catch(error => { if (error) { @@ -199,74 +195,58 @@ class PointsContainer extends Component { } }); - this.setState({ isClaiming: false }); + setIsClaiming(false); }; - _boost = async (point, permlink, author, user) => { - const { currentAccount, pinCode, dispatch, intl, navigation } = this.props; - this.setState({ isLoading: true }); + const _boost = async (point, permlink, author, _user) => { + setIsLoading(true); - await boost(user || currentAccount, pinCode, point, permlink, author) + await boost(_user || currentAccount, pinCode, point, permlink, author) .then(() => { - this.setState({ isLoading: false }); + setIsLoading(false); navigation.goBack(); dispatch(toastNotification(intl.formatMessage({ id: 'alert.successful' }))); }) .catch(error => { if (error) { - this.setState({ isLoading: false }); + setIsLoading(false); dispatch(toastNotification(intl.formatMessage({ id: 'alert.fail' }))); } }); }; - _getESTMPrice = points => { - const { globalProps } = this.props; + const _getESTMPrice = points => { const { base, quote } = globalProps; return points * 0.01 * (base / quote); }; - render() { - const { + return ( + children && + children({ + accounts, balance, + boost: _boost, + claim: _claimPoints, + currentAccount, + currentAccountName: currentAccount.name, + fetchUserActivity: _fetchUserPointActivities, + getAccount, + getESTMPrice: _getESTMPrice, + getUserBalance: _getUserBalance, + getUserDataWithUsername, + handleOnDropdownSelected: _handleOnDropdownSelected, isClaiming, isLoading, navigationParams, refreshing, userActivities, userPoints, - } = this.state; - const { children, accounts, currentAccount, user } = this.props; - - return ( - children && - children({ - accounts, - balance, - boost: this._boost, - claim: this._claimPoints, - currentAccount, - currentAccountName: currentAccount.name, - fetchUserActivity: this._fetchUserPointActivities, - getAccount, - getESTMPrice: this._getESTMPrice, - getUserBalance: this._getUserBalance, - getUserDataWithUsername, - handleOnDropdownSelected: this._handleOnDropdownSelected, - handleOnPressTransfer: this._handleOnPressTransfer, - isClaiming, - isLoading, - navigationParams, - refreshing, - userActivities, - userPoints, - redeemType: get(navigationParams, 'redeemType'), - user, - }) - ); - } -} + redeemType: get(navigationParams, 'redeemType'), + user, + }) + ); +}; const mapStateToProps = state => ({ user: state.account.currentAccount, @@ -280,4 +260,4 @@ const mapStateToProps = state => ({ globalProps: state.account.globalProps, }); -export default withNavigation(connect(mapStateToProps)(injectIntl(PointsContainer))); +export default withNavigation(connect(mapStateToProps)(PointsContainer)); From 7c47d46622e0bf6060e68449c23ebf7b661e26c7 Mon Sep 17 00:00:00 2001 From: ue Date: Sun, 17 Nov 2019 23:00:08 +0300 Subject: [PATCH 05/14] gaint clean up & refactoring & made common comp for transations & wallet screen & view --- .../basicUIElements/view/card/cardStyles.js | 4 - src/components/points/view/pointsStyles.js | 3 - src/components/points/view/pointsView.js | 62 ++--- .../container/transactionContainer.js | 35 --- src/components/transaction/index.js | 5 +- src/components/transaction/transactionView.js | 80 +++++++ .../transaction/view/transactionStyles.js | 7 - .../transaction/view/transactionView.js | 103 --------- src/components/wallet/view/walletView.js | 16 +- .../walletDetails/view/walletDetailsView.js | 216 +++++++++--------- src/constants/options/points.js | 20 +- src/containers/steemWalletContainer.js | 3 + src/globalStyles.js | 3 + src/screens/application/index.js | 12 +- src/screens/launch/screen/launchStyles.js | 2 + src/screens/points/screen/pointsScreen.js | 1 + src/utils/wallet.js | 26 ++- 17 files changed, 263 insertions(+), 335 deletions(-) delete mode 100644 src/components/transaction/container/transactionContainer.js create mode 100644 src/components/transaction/transactionView.js delete mode 100644 src/components/transaction/view/transactionStyles.js delete mode 100644 src/components/transaction/view/transactionView.js diff --git a/src/components/basicUIElements/view/card/cardStyles.js b/src/components/basicUIElements/view/card/cardStyles.js index 21ffb40fe..2d1a8a424 100644 --- a/src/components/basicUIElements/view/card/cardStyles.js +++ b/src/components/basicUIElements/view/card/cardStyles.js @@ -4,9 +4,5 @@ export default EStyleSheet.create({ wrapper: { flexDirection: 'column', backgroundColor: '$primaryBackgroundColor', - shadowOpacity: 0.2, - shadowColor: '#e7e7e7', - paddingHorizontal: 8, - paddingVertical: 8, }, }); diff --git a/src/components/points/view/pointsStyles.js b/src/components/points/view/pointsStyles.js index 407e8df62..550fd4a74 100644 --- a/src/components/points/view/pointsStyles.js +++ b/src/components/points/view/pointsStyles.js @@ -41,9 +41,6 @@ export default EStyleSheet.create({ fontSize: 24, color: '$primaryDarkText', }, - listWrapper: { - marginHorizontal: 8, - }, mainButton: { marginVertical: 8, alignSelf: 'center', diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index 995c82f1a..2fd795a2b 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -1,17 +1,25 @@ /* eslint-disable react/jsx-wrap-multilines */ import React, { useRef, Fragment } from 'react'; -import { Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity } from 'react-native'; +import { Text, View, FlatList, ScrollView, RefreshControl } from 'react-native'; import { useIntl } from 'react-intl'; import { get } from 'lodash'; import { withNavigation } from 'react-navigation'; // Components import { LineBreak, WalletLineItem, ListPlaceHolder } from '../../basicUIElements'; -import { Icon, MainButton, DropdownButton, CollapsibleCard, HorizontalIconList } from '../..'; +import { + Icon, + MainButton, + DropdownButton, + CollapsibleCard, + HorizontalIconList, + Transaction, +} from '../..'; import { ThemeContainer } from '../../../containers'; // Utils import { getTimeFromNow } from '../../../utils/time'; +import { groomingPointsTransactionData } from '../../../utils/wallet'; // Constants import POINTS, { POINTS_KEYS } from '../../../constants/options/points'; @@ -19,7 +27,6 @@ import { default as ROUTES } from '../../../constants/routeNames'; // Styles import styles from './pointsStyles'; -// dropdownRef = React.createRef(); const PointsView = ({ fetchUserActivity, @@ -34,6 +41,7 @@ const PointsView = ({ userBalance, dropdownOptions, type = '', + showIconList, }) => { const intl = useIntl(); const dropdownRef = useRef(); @@ -118,49 +126,13 @@ const PointsView = ({ - + {showIconList && } - - get(item, 'created').toString()} - ListEmptyComponent={_renderLoading()} - renderItem={({ item, index }) => ( - - } - > - {(get(item, 'memo') || get(item, 'sender')) && ( - - )} - - )} - /> - + groomingPointsTransactionData(item)} + /> ); diff --git a/src/components/transaction/container/transactionContainer.js b/src/components/transaction/container/transactionContainer.js deleted file mode 100644 index 6cd96f355..000000000 --- a/src/components/transaction/container/transactionContainer.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { PureComponent } from 'react'; -import { connect } from 'react-redux'; - -// Component -import TransactionView from '../view/transactionView'; - -/** - * Props Name Description Value - * @props --> intl Function for language support function - * @props --> walletData User wallet data object - * - */ - -class TransactionContainer extends PureComponent { - constructor(props) { - super(props); - this.state = {}; - } - - // Component Life Cycle Functions - - // Component Functions - - render() { - const { walletData, steemPerMVests } = this.props; - - return ; - } -} - -const mapStateToProps = state => ({ - steemPerMVests: state.account.globalProps.steemPerMVests, -}); - -export default connect(mapStateToProps)(TransactionContainer); diff --git a/src/components/transaction/index.js b/src/components/transaction/index.js index 861309b0a..477c2224e 100644 --- a/src/components/transaction/index.js +++ b/src/components/transaction/index.js @@ -1,5 +1,4 @@ -import TransactionView from './view/transactionView'; -import Transaction from './container/transactionContainer'; +import Transaction from './transactionView'; -export { TransactionView, Transaction }; +export { Transaction }; export default Transaction; diff --git a/src/components/transaction/transactionView.js b/src/components/transaction/transactionView.js new file mode 100644 index 000000000..9a0458f56 --- /dev/null +++ b/src/components/transaction/transactionView.js @@ -0,0 +1,80 @@ +/* eslint-disable react/jsx-wrap-multilines */ +import React from 'react'; +import { useIntl } from 'react-intl'; +import { View, Text, FlatList } from 'react-native'; +import get from 'lodash/get'; +import isEmpty from 'lodash/isEmpty'; + +// Utilities +import { getTimeFromNow } from '../../utils/time'; + +// Components +import { WalletLineItem, ListPlaceHolder } from '../basicUIElements'; +import { CollapsibleCard } from '..'; + +import globalStyles from '../../globalStyles'; + +const TransactionView = ({ transactions, groomingTransactionData, type }) => { + const intl = useIntl(); + + const _renderLoading = () => { + if (isEmpty(transactions)) { + return ; + } + + return ( + {intl.formatMessage({ id: 'points.no_activity' })} + ); + }; + + const _renderItem = (item, index) => { + const transactionData = groomingTransactionData(item); + + return ( + + } + > + {(get(transactionData, 'details') || get(transactionData, 'memo')) && ( + + )} + + ); + }; + + return ( + + _renderItem(item, index)} + /> + + ); +}; + +export default TransactionView; diff --git a/src/components/transaction/view/transactionStyles.js b/src/components/transaction/view/transactionStyles.js deleted file mode 100644 index 7a3c5b10e..000000000 --- a/src/components/transaction/view/transactionStyles.js +++ /dev/null @@ -1,7 +0,0 @@ -import EStyleSheet from 'react-native-extended-stylesheet'; - -export default EStyleSheet.create({ - container: { - marginTop: 8, - }, -}); diff --git a/src/components/transaction/view/transactionView.js b/src/components/transaction/view/transactionView.js deleted file mode 100644 index 28d38d08a..000000000 --- a/src/components/transaction/view/transactionView.js +++ /dev/null @@ -1,103 +0,0 @@ -/* eslint-disable react/jsx-wrap-multilines */ -import React, { PureComponent } from 'react'; -import { injectIntl } from 'react-intl'; -import { View } from 'react-native'; -import get from 'lodash/get'; - -// Utilities -import { groomingTransactionData } from '../../../utils/wallet'; -import { getTimeFromNow } from '../../../utils/time'; - -// Components -// import { FilterBar } from '../../filterBar'; -import { WalletLineItem, Card } from '../../basicUIElements'; -import { CollapsibleCard } from '../../collapsibleCard'; - -import styles from './transactionStyles'; - -class TransactionView extends PureComponent { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ - - constructor(props) { - super(props); - this.state = {}; - } - - // Component Life Cycles - - // Component Functions - // _handleOnDropdownSelect = () => {}; - - render() { - const { - walletData: { transactions }, - intl, - intl: { formatNumber }, - steemPerMVests, - } = this.props; - - return ( - - {/* this feature not implemented yet */} - {/* this._handleOnDropdownSelect()} - rightIconName="ios-lock" - iconSize={16} - /> */} - - {transactions && - transactions.map((item, index) => { - const transactionData = groomingTransactionData(item, steemPerMVests, formatNumber); - if (transactionData.length === 0) return null; - - const value = transactionData.value.trim().split(' '); - - return ( - - } - > - {(get(transactionData, 'details') || get(transactionData, 'memo')) && ( - - )} - - ); - })} - - - ); - } -} - -export default injectIntl(TransactionView); diff --git a/src/components/wallet/view/walletView.js b/src/components/wallet/view/walletView.js index 33a1be4d8..b837fb978 100644 --- a/src/components/wallet/view/walletView.js +++ b/src/components/wallet/view/walletView.js @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import { View, Text, ScrollView, RefreshControl } from 'react-native'; import { useIntl } from 'react-intl'; +import get from 'lodash/get'; // Components import { Icon } from '../../icon'; @@ -9,9 +10,11 @@ import { MainButton } from '../../mainButton'; import { CollapsibleCard } from '../../collapsibleCard'; import { WalletDetails } from '../../walletDetails'; import { Transaction } from '../../transaction'; -import { WalletDetailsPlaceHolder } from '../../basicUIElements'; +import { WalletDetailsPlaceHolder, Card } from '../../basicUIElements'; import { ThemeContainer, SteemWalletContainer } from '../../../containers'; +import { groomingTransactionData } from '../../../utils/wallet'; + // Styles import styles from './walletStyles'; @@ -46,6 +49,7 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) = refreshing, selectedUsername, walletData, + steemPerMVests, }) => ( {isDarkTheme => ( @@ -112,7 +116,15 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) = isShowDropdowns={currentAccountUsername === selectedUsername} /> - + + + groomingTransactionData(item, steemPerMVests, intl.formatNumber) + } + transactions={get(walletData, 'transactions')} + /> + )} diff --git a/src/components/walletDetails/view/walletDetailsView.js b/src/components/walletDetails/view/walletDetailsView.js index d6ec98df1..ce9132437 100644 --- a/src/components/walletDetails/view/walletDetailsView.js +++ b/src/components/walletDetails/view/walletDetailsView.js @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React from 'react'; import { View } from 'react-native'; // Components @@ -10,130 +10,120 @@ import { vestsToSp } from '../../../utils/conversions'; // Styles import styles from './walletDetailsStyles'; -class WalletDetailsView extends PureComponent { - // Component Life Cycles - - // Component Functions - - render() { - const { walletData, intl, navigate, isShowDropdowns } = this.props; - - const steemDropdown = ['transfer_token', 'transfer_to_saving', 'powerUp']; - const sbdDropdown = ['transfer_token', 'transfer_to_saving']; - const savingSteemDropdown = ['withdraw_steem']; - const savingSbdDropdown = ['withdraw_sbd']; - const steemPowerDropdown = ['delegate', 'power_down']; - - return ( - - - intl.formatMessage({ id: `transfer.${item}` }), - )} - onDropdownSelect={index => navigate(steemDropdown[index], 'STEEM')} - /> - - - intl.formatMessage({ id: `transfer.${item}` }), - )} - onDropdownSelect={a => navigate(steemPowerDropdown[a], 'STEEM_POWER')} - /> - - {walletData.vestingSharesDelegated > 0 && ( - - )} - {walletData.vestingSharesReceived > 0 && ( - - )} - {(walletData.vestingSharesDelegated > 0 || walletData.vestingSharesReceived > 0) && ( - - )} - +const WalletDetailsView = ({ walletData, intl, navigate, isShowDropdowns }) => { + const steemDropdown = ['transfer_token', 'transfer_to_saving', 'powerUp']; + const sbdDropdown = ['transfer_token', 'transfer_to_saving']; + const savingSteemDropdown = ['withdraw_steem']; + const savingSbdDropdown = ['withdraw_sbd']; + const steemPowerDropdown = ['delegate', 'power_down']; + return ( + + intl.formatMessage({ id: `transfer.${item}` }))} + onDropdownSelect={index => navigate(steemDropdown[index], 'STEEM')} + /> + intl.formatMessage({ id: `transfer.${item}` }))} - onDropdownSelect={a => navigate(sbdDropdown[a], 'SBD')} + dropdownOptions={steemPowerDropdown.map(item => + intl.formatMessage({ id: `transfer.${item}` }), + )} + onDropdownSelect={a => navigate(steemPowerDropdown[a], 'STEEM_POWER')} /> - + + {walletData.vestingSharesDelegated > 0 && ( - intl.formatMessage({ id: `transfer.${item}` }), - )} - onDropdownSelect={a => navigate(savingSteemDropdown[a], 'SAVING_STEEM')} - /> - - intl.formatMessage({ id: `transfer.${item}` }), - )} - onDropdownSelect={a => navigate(savingSbdDropdown[a], 'SAVING_SBD')} - /> - - {walletData.showPowerDown && ( - )} - - ); - } -} + {walletData.vestingSharesReceived > 0 && ( + + )} + {(walletData.vestingSharesDelegated > 0 || walletData.vestingSharesReceived > 0) && ( + + )} + + + intl.formatMessage({ id: `transfer.${item}` }))} + onDropdownSelect={a => navigate(sbdDropdown[a], 'SBD')} + /> + + + intl.formatMessage({ id: `transfer.${item}` }), + )} + onDropdownSelect={a => navigate(savingSteemDropdown[a], 'SAVING_STEEM')} + /> + + intl.formatMessage({ id: `transfer.${item}` }), + )} + onDropdownSelect={a => navigate(savingSbdDropdown[a], 'SAVING_SBD')} + /> + + {walletData.showPowerDown && ( + + )} + + ); +}; export default WalletDetailsView; diff --git a/src/constants/options/points.js b/src/constants/options/points.js index 6c66a390b..bcd35c668 100644 --- a/src/constants/options/points.js +++ b/src/constants/options/points.js @@ -1,7 +1,7 @@ export default { 999: { icon: 'compare-arrows', - textKey: 'points.incoming_transfer_title', + textKey: 'incoming_transfer_title', nameKey: 'points.incoming_transfer', descriptionKey: 'points.incoming_transfer_description', iconType: 'MaterialIcons', @@ -9,7 +9,7 @@ export default { }, 998: { icon: 'compare-arrows', - textKey: 'points.outgoing_transfer_title', + textKey: 'outgoing_transfer_title', nameKey: 'points.outgoing_transfer', descriptionKey: 'points.outgoing_transfer_description', iconType: 'MaterialIcons', @@ -17,7 +17,7 @@ export default { }, 150: { icon: 'local-activity', - textKey: 'points.delegation_title', + textKey: 'delegation_title', nameKey: 'points.delegation', descriptionKey: 'points.delegation_desc', iconType: 'MaterialIcons', @@ -25,7 +25,7 @@ export default { }, 100: { icon: 'pencil', - textKey: 'points.post_title', + textKey: 'post_title', nameKey: 'points.post', descriptionKey: 'points.post_desc', iconType: 'MaterialCommunityIcons', @@ -33,7 +33,7 @@ export default { }, 110: { icon: 'comment-text-outline', - textKey: 'points.comment_title', + textKey: 'comment_title', nameKey: 'points.comment', descriptionKey: 'points.comment_desc', iconType: 'MaterialCommunityIcons', @@ -41,7 +41,7 @@ export default { }, 120: { icon: 'upcircleo', - textKey: 'points.vote_title', + textKey: 'vote_title', nameKey: 'points.vote', descriptionKey: 'points.vote_desc', iconType: 'AntDesign', @@ -49,7 +49,7 @@ export default { }, 130: { icon: 'repeat', - textKey: 'points.reblog_title', + textKey: 'reblog_title', nameKey: 'points.reblog', descriptionKey: 'points.reblog_desc', iconType: 'MaterialIcons', @@ -57,7 +57,7 @@ export default { }, 10: { icon: 'favorite-border', - textKey: 'points.checkin_title', + textKey: 'checkin_title', nameKey: 'points.checkin', descriptionKey: 'points.checkin_desc', iconType: 'MaterialIcons', @@ -65,7 +65,7 @@ export default { }, 20: { icon: 'person-outline', - textKey: 'points.login_title', + textKey: 'login_title', nameKey: 'points.login', descriptionKey: 'points.login_desc', iconType: 'MaterialIcons', @@ -73,7 +73,7 @@ export default { }, 30: { icon: 'check-all', - textKey: 'points.checkin_extra_title', + textKey: 'checkin_extra_title', nameKey: 'points.checkin_extra', descriptionKey: 'points.checkin_extra_desc', iconType: 'MaterialCommunityIcons', diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index 9658d93b1..11beca16e 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -20,6 +20,7 @@ const WalletContainer = ({ pinCode, selectedUser, setEstimatedWalletValue, + steemPerMVests, }) => { const [isClaiming, setIsClaiming] = useState(false); const [refreshing, setRefreshing] = useState(false); @@ -137,6 +138,7 @@ const WalletContainer = ({ refreshing: refreshing, selectedUsername: get(selectedUser, 'name', ''), walletData: walletData, + steemPerMVests, }) ); }; @@ -145,6 +147,7 @@ const mapStateToProps = state => ({ currentAccount: state.account.currentAccount, pinCode: state.application.pin, globalProps: state.account.globalProps, + steemPerMVests: state.account.globalProps.steemPerMVests, }); export default connect(mapStateToProps)(WalletContainer); diff --git a/src/globalStyles.js b/src/globalStyles.js index 0a5ab2c75..9bae4350b 100644 --- a/src/globalStyles.js +++ b/src/globalStyles.js @@ -8,6 +8,9 @@ export default EStyleSheet.create({ defaultContainer: { flex: 1, }, + listWrapper: { + paddingHorizontal: 8, + }, text: { fontFamily: '$primaryFont', letterSpacing: '$primaryLatterSpacing', diff --git a/src/screens/application/index.js b/src/screens/application/index.js index dbc9a9c75..89ac90fbf 100644 --- a/src/screens/application/index.js +++ b/src/screens/application/index.js @@ -8,13 +8,15 @@ import { Modal } from '../../components'; import { PinCode } from '../pinCode'; const Application = () => { - const [showAnimation, setShowAnimation] = useState(true); + const [showAnimation, setShowAnimation] = useState(process.env.NODE_ENV !== 'development'); useEffect(() => { - setTimeout(() => { - setShowAnimation(false); - }, 500); - }, []); + if (!showAnimation) { + setTimeout(() => { + setShowAnimation(false); + }, 2000); + } + }, [showAnimation]); return ( diff --git a/src/screens/launch/screen/launchStyles.js b/src/screens/launch/screen/launchStyles.js index 59ee658cf..d4ce37b6e 100644 --- a/src/screens/launch/screen/launchStyles.js +++ b/src/screens/launch/screen/launchStyles.js @@ -6,9 +6,11 @@ export default EStyleSheet.create({ justifyContent: 'center', alignItems: 'center', backgroundColor: '$pureWhite', + zIndex: 999, }, darkContainer: { flex: 1, + zIndex: 999, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1e2835', diff --git a/src/screens/points/screen/pointsScreen.js b/src/screens/points/screen/pointsScreen.js index 660652c26..fbb6f03e3 100644 --- a/src/screens/points/screen/pointsScreen.js +++ b/src/screens/points/screen/pointsScreen.js @@ -33,6 +33,7 @@ const PointsScreen = () => { userPoints, }) => ( { @@ -9,16 +10,16 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe return []; } - const result = {}; + let result = { iconType: 'MaterialIcons' }; - [result.opName] = transaction[1].op; + [result.textKey] = transaction[1].op; const opData = transaction[1].op[1]; const { timestamp } = transaction[1]; - result.transDate = timestamp; + result.created = timestamp; result.icon = 'local-activity'; - switch (result.opName) { + switch (result.textKey) { case 'curation_reward': const { reward } = opData; const { comment_author: commentAuthor, comment_permlink: commentPermlink } = opData; @@ -55,7 +56,7 @@ export const groomingTransactionData = (transaction, steemPerMVests, formatNumbe } ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`; result.details = author && permlink ? `@${author}/${permlink}` : null; - if (result.opName === 'comment_benefactor_reward') { + if (result.textKey === 'comment_benefactor_reward') { result.icon = 'comment'; } break; @@ -167,3 +168,18 @@ export const groomingWalletData = async (user, globalProps) => { return walletData; }; + +export const groomingPointsTransactionData = transaction => { + if (!transaction) { + return null; + } + let result = { ...transaction }; + + result.details = get(transaction, 'sender') + ? `from @${get(transaction, 'sender')}` + : get(transaction, 'receiver') && `to @${get(transaction, 'receiver')}`; + + result.value = `${get(transaction, 'amount')} ESTM`; + + return result; +}; From b6793d7f95a7ccb4498ffafb47f667c2738d5f21 Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 18 Nov 2019 22:44:37 +0300 Subject: [PATCH 06/14] added swiper && unificate for pointsView & groom wallet data from container --- src/components/points/view/pointsView.js | 82 ++++-------- src/components/transaction/transactionView.js | 24 ++-- src/components/wallet/view/walletView.js | 12 +- src/constants/routeNames.js | 2 +- src/containers/pointsContainer.js | 24 +++- src/containers/steemWalletContainer.js | 11 +- src/globalStyles.js | 7 + src/navigation/baseNavigator.js | 6 +- src/screens/index.js | 4 +- src/screens/points/index.js | 4 - src/screens/points/screen/pointsScreen.js | 98 -------------- src/screens/wallet/index.js | 4 + .../{points => wallet}/screen/pointsStyles.js | 0 src/screens/wallet/screen/walletScreen.js | 122 ++++++++++++++++++ 14 files changed, 205 insertions(+), 195 deletions(-) delete mode 100644 src/screens/points/index.js delete mode 100644 src/screens/points/screen/pointsScreen.js create mode 100644 src/screens/wallet/index.js rename src/screens/{points => wallet}/screen/pointsStyles.js (100%) create mode 100644 src/screens/wallet/screen/walletScreen.js diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index 2fd795a2b..02735c69e 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -1,24 +1,16 @@ /* eslint-disable react/jsx-wrap-multilines */ -import React, { useRef, Fragment } from 'react'; -import { Text, View, FlatList, ScrollView, RefreshControl } from 'react-native'; +import React, { useRef, Fragment, useEffect } from 'react'; +import { Text, View, ScrollView, RefreshControl } from 'react-native'; import { useIntl } from 'react-intl'; import { get } from 'lodash'; import { withNavigation } from 'react-navigation'; // Components -import { LineBreak, WalletLineItem, ListPlaceHolder } from '../../basicUIElements'; -import { - Icon, - MainButton, - DropdownButton, - CollapsibleCard, - HorizontalIconList, - Transaction, -} from '../..'; +import { LineBreak } from '../../basicUIElements'; +import { Icon, MainButton, DropdownButton, HorizontalIconList, Transaction } from '../..'; import { ThemeContainer } from '../../../containers'; // Utils -import { getTimeFromNow } from '../../../utils/time'; import { groomingPointsTransactionData } from '../../../utils/wallet'; // Constants @@ -41,53 +33,39 @@ const PointsView = ({ userBalance, dropdownOptions, type = '', + componentDidUpdate, showIconList, + currentIndex, + index, }) => { const intl = useIntl(); const dropdownRef = useRef(); - const refreshControl = () => ( - - {isDarkTheme => ( - - )} - - ); - const _getTranslation = id => { - let translation; - - try { - translation = intl.formatMessage({ id }); - } catch (error) { - translation = ''; + useEffect(() => { + if (index === currentIndex) { + componentDidUpdate(); } + }, [componentDidUpdate, currentIndex, index]); - return translation; - }; - - const _renderLoading = () => { - if (isLoading) { - return ; - } - - return {intl.formatMessage({ id: 'points.no_activity' })}; - }; + // const refreshControl = () => ( + // + // {isDarkTheme => ( + // + // )} + // + // ); return ( - refreshControl()} - contentContainerStyle={styles.scrollContentContainer} - > + dropdownRef.current.show()} style={styles.pointText}> {userBalance} @@ -127,13 +105,7 @@ const PointsView = ({ {showIconList && } - - groomingPointsTransactionData(item)} - /> - + ); }; diff --git a/src/components/transaction/transactionView.js b/src/components/transaction/transactionView.js index 9a0458f56..611198f54 100644 --- a/src/components/transaction/transactionView.js +++ b/src/components/transaction/transactionView.js @@ -14,7 +14,7 @@ import { CollapsibleCard } from '..'; import globalStyles from '../../globalStyles'; -const TransactionView = ({ transactions, groomingTransactionData, type }) => { +const TransactionView = ({ transactions, type }) => { const intl = useIntl(); const _renderLoading = () => { @@ -28,38 +28,36 @@ const TransactionView = ({ transactions, groomingTransactionData, type }) => { }; const _renderItem = (item, index) => { - const transactionData = groomingTransactionData(item); - return ( } > - {(get(transactionData, 'details') || get(transactionData, 'memo')) && ( + {(get(item, 'details') || get(item, 'memo')) && ( )} diff --git a/src/components/wallet/view/walletView.js b/src/components/wallet/view/walletView.js index b837fb978..6eeb5c356 100644 --- a/src/components/wallet/view/walletView.js +++ b/src/components/wallet/view/walletView.js @@ -2,7 +2,6 @@ import React, { Fragment } from 'react'; import { View, Text, ScrollView, RefreshControl } from 'react-native'; import { useIntl } from 'react-intl'; -import get from 'lodash/get'; // Components import { Icon } from '../../icon'; @@ -13,8 +12,6 @@ import { Transaction } from '../../transaction'; import { WalletDetailsPlaceHolder, Card } from '../../basicUIElements'; import { ThemeContainer, SteemWalletContainer } from '../../../containers'; -import { groomingTransactionData } from '../../../utils/wallet'; - // Styles import styles from './walletStyles'; @@ -50,6 +47,7 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) = selectedUsername, walletData, steemPerMVests, + userActivities, }) => ( {isDarkTheme => ( @@ -117,13 +115,7 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) = /> - - groomingTransactionData(item, steemPerMVests, intl.formatNumber) - } - transactions={get(walletData, 'transactions')} - /> + )} diff --git a/src/constants/routeNames.js b/src/constants/routeNames.js index 714b1ac4c..fea17e1ec 100644 --- a/src/constants/routeNames.js +++ b/src/constants/routeNames.js @@ -31,7 +31,7 @@ export default { TABBAR: { FEED: `Feed${TABBAR_SUFFIX}`, NOTIFICATION: `Notification${TABBAR_SUFFIX}`, - POINTS: `Points${TABBAR_SUFFIX}`, + WALLET: `Wallet${TABBAR_SUFFIX}`, POST_BUTTON: `PostButton${TABBAR_SUFFIX}`, PROFILE: `Profile${TABBAR_SUFFIX}`, }, diff --git a/src/containers/pointsContainer.js b/src/containers/pointsContainer.js index 0589e478c..52dcadd40 100644 --- a/src/containers/pointsContainer.js +++ b/src/containers/pointsContainer.js @@ -18,6 +18,9 @@ import POINTS from '../constants/options/points'; // Constants import ROUTES from '../constants/routeNames'; +// Utils +import { groomingPointsTransactionData } from '../utils/wallet'; + /* * Props Name Description Value *@props --> props name here description here Value Type Here @@ -64,7 +67,7 @@ const PointsContainer = ({ }, [_fetchUserPointActivities, fetchInterval, isConnected, navigation, username]); useEffect(() => { - if (isConnected && activeBottomTab === ROUTES.TABBAR.POINTS && username) { + if (isConnected && activeBottomTab === ROUTES.TABBAR.WALLET && username) { _fetchUserPointActivities(username); } }, [isConnected, username, _fetchUserPointActivities, activeBottomTab]); @@ -125,12 +128,14 @@ const PointsContainer = ({ }; const _groomUserActivities = _userActivities => - _userActivities.map(item => ({ - ...item, - icon: get(POINTS[get(item, 'type')], 'icon'), - iconType: get(POINTS[get(item, 'type')], 'iconType'), - textKey: get(POINTS[get(item, 'type')], 'textKey'), - })); + _userActivities.map(item => + groomingPointsTransactionData({ + ...item, + icon: get(POINTS[get(item, 'type')], 'icon'), + iconType: get(POINTS[get(item, 'type')], 'iconType'), + textKey: get(POINTS[get(item, 'type')], 'textKey'), + }), + ); const _fetchUserPointActivities = useCallback(async _username => { if (!_username) { @@ -244,6 +249,11 @@ const PointsContainer = ({ userPoints, redeemType: get(navigationParams, 'redeemType'), user, + dropdownOptions: [ + intl.formatMessage({ id: 'points.dropdown_transfer' }), + intl.formatMessage({ id: 'points.dropdown_promote' }), + intl.formatMessage({ id: 'points.dropdown_boost' }), + ], }) ); }; diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index 11beca16e..15f27fa8d 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -9,7 +9,7 @@ import { toastNotification } from '../redux/actions/uiAction'; import { getAccount, claimRewardBalance } from '../providers/steem/dsteem'; // Utils -import { groomingWalletData } from '../utils/wallet'; +import { groomingWalletData, groomingTransactionData } from '../utils/wallet'; import parseToken from '../utils/parseToken'; const WalletContainer = ({ @@ -25,6 +25,7 @@ const WalletContainer = ({ const [isClaiming, setIsClaiming] = useState(false); const [refreshing, setRefreshing] = useState(false); const [walletData, setWalletData] = useState(null); + const [userActivities, setUserActivities] = useState(null); const intl = useIntl(); const dispatch = useDispatch(); @@ -43,9 +44,14 @@ const WalletContainer = ({ const _walletData = await groomingWalletData(_selectedUser, globalProps); setWalletData(_walletData); + setUserActivities( + get(_walletData, 'transactions', []).map(item => + groomingTransactionData(item, steemPerMVests, intl.formatNumber), + ), + ); setEstimatedWalletValue(_walletData.estimatedValue); }, - [globalProps, setEstimatedWalletValue], + [globalProps, intl.formatNumber, setEstimatedWalletValue, steemPerMVests], ); const _isHasUnclaimedRewards = account => { @@ -139,6 +145,7 @@ const WalletContainer = ({ selectedUsername: get(selectedUser, 'name', ''), walletData: walletData, steemPerMVests, + userActivities, }) ); }; diff --git a/src/globalStyles.js b/src/globalStyles.js index 9bae4350b..c8f7aded7 100644 --- a/src/globalStyles.js +++ b/src/globalStyles.js @@ -10,6 +10,8 @@ export default EStyleSheet.create({ }, listWrapper: { paddingHorizontal: 8, + backgroundColor: '$primaryBackgroundColor', + flex: 1.7, }, text: { fontFamily: '$primaryFont', @@ -68,4 +70,9 @@ export default EStyleSheet.create({ alignSelf: 'center', backgroundColor: '$primaryBackgroundColor', }, + swipeItemWrapper: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, }); diff --git a/src/navigation/baseNavigator.js b/src/navigation/baseNavigator.js index 1ebde3f00..ccebc1a68 100644 --- a/src/navigation/baseNavigator.js +++ b/src/navigation/baseNavigator.js @@ -6,7 +6,7 @@ import ROUTES from '../constants/routeNames'; // Components import { Icon, IconContainer } from '../components/icon'; -import { Feed, Notification, Profile, Points } from '../screens'; +import { Feed, Notification, Profile, Wallet } from '../screens'; import { PostButton, BottomTabBar } from '../components'; const BaseNavigator = createBottomTabNavigator( @@ -40,8 +40,8 @@ const BaseNavigator = createBottomTabNavigator( tabBarIcon: ({ tintColor }) => , }, }, - [ROUTES.TABBAR.POINTS]: { - screen: Points, + [ROUTES.TABBAR.WALLET]: { + screen: Wallet, navigationOptions: () => ({ tabBarIcon: ({ tintColor }) => ( diff --git a/src/screens/index.js b/src/screens/index.js index 5de20e384..d81fa0503 100755 --- a/src/screens/index.js +++ b/src/screens/index.js @@ -7,7 +7,7 @@ import { Launch } from './launch'; import { Login } from './login'; import { Notification } from './notification'; import { PinCode } from './pinCode'; -import { Points } from './points'; +import { Wallet } from './wallet'; import { Post } from './post'; import { SearchResult } from './searchResult'; import { Settings } from './settings'; @@ -32,7 +32,7 @@ export { Login, Notification, PinCode, - Points, + Wallet, Post, Profile, ProfileEdit, diff --git a/src/screens/points/index.js b/src/screens/points/index.js deleted file mode 100644 index 4c9efb6f8..000000000 --- a/src/screens/points/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import Points from './screen/pointsScreen'; - -export { Points }; -export default Points; diff --git a/src/screens/points/screen/pointsScreen.js b/src/screens/points/screen/pointsScreen.js deleted file mode 100644 index fbb6f03e3..000000000 --- a/src/screens/points/screen/pointsScreen.js +++ /dev/null @@ -1,98 +0,0 @@ -import React, { Fragment } from 'react'; -import { useIntl } from 'react-intl'; -import { SafeAreaView } from 'react-native'; -import get from 'lodash/get'; - -// Containers -import { PointsContainer, LoggedInContainer } from '../../../containers'; - -// Components -import { Header, Points } from '../../../components'; - -// Styles -import styles from './pointsStyles'; - -const PointsScreen = () => { - const intl = useIntl(); - - return ( - -
- - - {() => ( - - {({ - handleOnDropdownSelected, - claim, - fetchUserActivity, - isClaiming, - isLoading, - refreshing, - userActivities, - userPoints, - }) => ( - - )} - - )} - - - - ); -}; - -export default PointsScreen; - -// const viewStyle = () => { -// return { -// flex: 1, -// justifyContent: 'center', -// alignItems: 'center', -// }; -// }; - -// -// -// -// -// -// -// -// diff --git a/src/screens/wallet/index.js b/src/screens/wallet/index.js new file mode 100644 index 000000000..0cb89a1df --- /dev/null +++ b/src/screens/wallet/index.js @@ -0,0 +1,4 @@ +import Wallet from './screen/walletScreen'; + +export { Wallet }; +export default Wallet; diff --git a/src/screens/points/screen/pointsStyles.js b/src/screens/wallet/screen/pointsStyles.js similarity index 100% rename from src/screens/points/screen/pointsStyles.js rename to src/screens/wallet/screen/pointsStyles.js diff --git a/src/screens/wallet/screen/walletScreen.js b/src/screens/wallet/screen/walletScreen.js new file mode 100644 index 000000000..5c83f9759 --- /dev/null +++ b/src/screens/wallet/screen/walletScreen.js @@ -0,0 +1,122 @@ +import React, { Fragment, useState, useEffect } from 'react'; +import { useIntl } from 'react-intl'; +import { View } from 'react-native'; +import Swiper from 'react-native-swiper'; +import { SafeAreaView } from 'react-native'; +import get from 'lodash/get'; + +// Containers +import { PointsContainer, LoggedInContainer } from '../../../containers'; + +// Components +import { Header, Points, Transaction } from '../../../components'; + +// Styles +import styles from './pointsStyles'; +import globalStyles from '../../../globalStyles'; + +const WalletScreen = () => { + const intl = useIntl(); + const [selectedUserActivities, setSelectedUserActivities] = useState(null); + const [selectedType, setSelectedType] = useState('points'); + const [currentIndex, setCurrentIndex] = useState(0); + + return ( + +
+ + + {() => ( + <> + setCurrentIndex(index)} + > + + + {({ + handleOnDropdownSelected, + claim, + fetchUserActivity, + isClaiming, + isLoading, + refreshing, + userActivities, + userPoints, + dropdownOptions, + }) => ( + { + setSelectedUserActivities(userActivities); + setSelectedType('points'); + }} + index={0} + showIconList + claim={claim} + setSelectedUserActivities={setSelectedUserActivities} + fetchUserActivity={fetchUserActivity} + isClaiming={isClaiming} + isLoading={isLoading} + refreshing={refreshing} + userActivities={userActivities} + unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} + userBalance={get(userPoints, 'points')} + handleOnDropdownSelected={handleOnDropdownSelected} + type="estm" + dropdownOptions={dropdownOptions} + currentIndex={currentIndex} + /> + )} + + + + + {({ + handleOnDropdownSelected, + claim, + fetchUserActivity, + isClaiming, + isLoading, + refreshing, + userActivities, + userPoints, + dropdownOptions, + }) => ( + { + setSelectedUserActivities(userActivities.reverse()); + setSelectedType('wallet'); + }} + index={1} + showIconList + claim={claim} + setSelectedUserActivities={setSelectedUserActivities} + fetchUserActivity={fetchUserActivity} + isClaiming={isClaiming} + isLoading={isLoading} + refreshing={refreshing} + userActivities={userActivities} + unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} + userBalance={213} + handleOnDropdownSelected={handleOnDropdownSelected} + type="estm" + dropdownOptions={dropdownOptions} + /> + )} + + + + + + + )} + + + + ); +}; + +export default WalletScreen; From 337316d7c4531b17309640b77b238ffa115d5ec3 Mon Sep 17 00:00:00 2001 From: ue Date: Tue, 19 Nov 2019 23:35:21 +0300 Subject: [PATCH 07/14] seperated balance for currencys added first swipe item --- src/components/points/view/pointsStyles.js | 1 + src/components/points/view/pointsView.js | 6 +- src/config/locales/en-US.json | 11 ++- src/containers/steemWalletContainer.js | 24 ++++- src/screens/wallet/screen/estmView.js | 46 +++++++++ src/screens/wallet/screen/spView.js | 0 src/screens/wallet/screen/steemView.js | 50 ++++++++++ src/screens/wallet/screen/walletScreen.js | 104 +++++---------------- 8 files changed, 153 insertions(+), 89 deletions(-) create mode 100644 src/screens/wallet/screen/estmView.js create mode 100644 src/screens/wallet/screen/spView.js create mode 100644 src/screens/wallet/screen/steemView.js diff --git a/src/components/points/view/pointsStyles.js b/src/components/points/view/pointsStyles.js index 550fd4a74..25198ba6a 100644 --- a/src/components/points/view/pointsStyles.js +++ b/src/components/points/view/pointsStyles.js @@ -67,6 +67,7 @@ export default EStyleSheet.create({ }, scrollContainer: { flex: 1, + width: '100%', backgroundColor: '$primaryBackgroundColor', }, scrollContentContainer: { diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index 02735c69e..84a004d7e 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -83,7 +83,7 @@ const PointsView = ({ dropdownStyle={styles.dropdownStyle} /> - {intl.formatMessage({ id: 'points.esteemPoints' })} + {intl.formatMessage({ id: `wallet.${type}.title` })} - {unclaimedBalance > 0 ? unclaimedBalance : intl.formatMessage({ id: 'boost.buy' })} + {unclaimedBalance > 0 + ? unclaimedBalance + : intl.formatMessage({ id: `wallet.${type}.buy` })} diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index db445afe1..414cf1ea9 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -8,7 +8,15 @@ "transfer_to_vesting": "Transfer To Vesting", "transfer_from_savings": "Transfer From Savings", "withdraw_vesting": "Power Down", - "fill_order": "Fill Order" + "fill_order": "Fill Order", + "estm": { + "title": "eSteem Points", + "buy": "GET ESTM" + }, + "steem": { + "title": "STEEM", + "buy": "GET STEEM" + } }, "notification": { "vote": "likes your post", @@ -37,7 +45,6 @@ }, "points": { "post": "Post", - "esteemPoints": "eSteem Points", "comment": "Comment", "checkin": "Check-in", "vote": "Vote", diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index 15f27fa8d..843cb823f 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -11,6 +11,7 @@ import { getAccount, claimRewardBalance } from '../providers/steem/dsteem'; // Utils import { groomingWalletData, groomingTransactionData } from '../utils/wallet'; import parseToken from '../utils/parseToken'; +import { vestsToSp } from '../utils/conversions'; const WalletContainer = ({ children, @@ -23,6 +24,7 @@ const WalletContainer = ({ steemPerMVests, }) => { const [isClaiming, setIsClaiming] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const [walletData, setWalletData] = useState(null); const [userActivities, setUserActivities] = useState(null); @@ -44,12 +46,13 @@ const WalletContainer = ({ const _walletData = await groomingWalletData(_selectedUser, globalProps); setWalletData(_walletData); + setIsLoading(false); setUserActivities( get(_walletData, 'transactions', []).map(item => groomingTransactionData(item, steemPerMVests, intl.formatNumber), ), ); - setEstimatedWalletValue(_walletData.estimatedValue); + setEstimatedWalletValue && setEstimatedWalletValue(_walletData.estimatedValue); }, [globalProps, intl.formatNumber, setEstimatedWalletValue, steemPerMVests], ); @@ -134,6 +137,19 @@ const WalletContainer = ({ }); }; + const sbdBalance = useCallback(Math.round(get(walletData, 'sbdBalance') * 1000) / 1000, [ + walletData, + ]); + const spBalance = useCallback( + Math.round( + vestsToSp(get(walletData, 'vestingShares', 1), get(walletData, 'steemPerMVests', 1)) * 1000, + ) / 1000, + [walletData], + ); + const steemBalance = useCallback(Math.round(get(walletData, 'balance', 1) * 1000) / 1000, [ + walletData, + ]); + return ( children && children({ @@ -143,9 +159,13 @@ const WalletContainer = ({ isClaiming: isClaiming, refreshing: refreshing, selectedUsername: get(selectedUser, 'name', ''), - walletData: walletData, + isLoading, + walletData, steemPerMVests, userActivities, + steemBalance, + spBalance, + sbdBalance, }) ); }; diff --git a/src/screens/wallet/screen/estmView.js b/src/screens/wallet/screen/estmView.js new file mode 100644 index 000000000..bc64c26fa --- /dev/null +++ b/src/screens/wallet/screen/estmView.js @@ -0,0 +1,46 @@ +import React from 'react'; +import get from 'lodash/get'; +import { View } from 'react-native'; + +import { Points } from '../../../components'; +import { PointsContainer } from '../../../containers'; + +import globalStyles from '../../../globalStyles'; + +const EstmView = ({ handleOnSelected, index, currentIndex }) => ( + + + {({ + handleOnDropdownSelected, + claim, + fetchUserActivity, + isClaiming, + isLoading, + refreshing, + userActivities, + userPoints, + dropdownOptions, + }) => ( + handleOnSelected(userActivities, 'estm')} + index={index} + showIconList + claim={claim} + fetchUserActivity={fetchUserActivity} + isClaiming={isClaiming} + isLoading={isLoading} + refreshing={refreshing} + userActivities={userActivities} + unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} + userBalance={get(userPoints, 'points')} + handleOnDropdownSelected={handleOnDropdownSelected} + type="estm" + dropdownOptions={dropdownOptions} + currentIndex={currentIndex} + /> + )} + + +); + +export default EstmView; diff --git a/src/screens/wallet/screen/spView.js b/src/screens/wallet/screen/spView.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/screens/wallet/screen/steemView.js b/src/screens/wallet/screen/steemView.js new file mode 100644 index 000000000..66cdd6eb0 --- /dev/null +++ b/src/screens/wallet/screen/steemView.js @@ -0,0 +1,50 @@ +import React from 'react'; +import get from 'lodash/get'; +import { View } from 'react-native'; + +import { Points } from '../../../components'; +import { SteemWalletContainer, AccountContainer } from '../../../containers'; + +import globalStyles from '../../../globalStyles'; + +const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( + + + {({ currentAccount }) => ( + + {({ + isClaiming, + claimRewardBalance, + handleOnWalletRefresh, + refreshing, + walletData, + steemPerMVests, + userActivities, + steemBalance, + isLoading, + }) => ( + handleOnSelected(userActivities, 'steem')} + index={index} + showIconList + claim={claimRewardBalance} + fetchUserActivity={handleOnWalletRefresh} + isClaiming={isClaiming} + isLoading={isLoading} + refreshing={refreshing} + userActivities={userActivities} + unclaimedBalance={0} + userBalance={steemBalance} + handleOnDropdownSelected={null} + type="steem" + dropdownOptions={[]} + currentIndex={currentIndex} + /> + )} + + )} + + +); + +export default SteeemView; diff --git a/src/screens/wallet/screen/walletScreen.js b/src/screens/wallet/screen/walletScreen.js index 5c83f9759..ae9713ab2 100644 --- a/src/screens/wallet/screen/walletScreen.js +++ b/src/screens/wallet/screen/walletScreen.js @@ -1,26 +1,28 @@ -import React, { Fragment, useState, useEffect } from 'react'; -import { useIntl } from 'react-intl'; -import { View } from 'react-native'; +import React, { Fragment, useState } from 'react'; import Swiper from 'react-native-swiper'; import { SafeAreaView } from 'react-native'; -import get from 'lodash/get'; // Containers -import { PointsContainer, LoggedInContainer } from '../../../containers'; +import { LoggedInContainer } from '../../../containers'; // Components -import { Header, Points, Transaction } from '../../../components'; +import { Header, Transaction } from '../../../components'; +import EstmView from './estmView'; +import SteemView from './steemView'; // Styles import styles from './pointsStyles'; -import globalStyles from '../../../globalStyles'; const WalletScreen = () => { - const intl = useIntl(); const [selectedUserActivities, setSelectedUserActivities] = useState(null); const [selectedType, setSelectedType] = useState('points'); const [currentIndex, setCurrentIndex] = useState(0); + const _handleSwipeItemChange = (userActivities, type) => { + setSelectedUserActivities(userActivities); + setSelectedType(type); + }; + return (
@@ -34,83 +36,19 @@ const WalletScreen = () => { index={0} onIndexChanged={index => setCurrentIndex(index)} > - - - {({ - handleOnDropdownSelected, - claim, - fetchUserActivity, - isClaiming, - isLoading, - refreshing, - userActivities, - userPoints, - dropdownOptions, - }) => ( - { - setSelectedUserActivities(userActivities); - setSelectedType('points'); - }} - index={0} - showIconList - claim={claim} - setSelectedUserActivities={setSelectedUserActivities} - fetchUserActivity={fetchUserActivity} - isClaiming={isClaiming} - isLoading={isLoading} - refreshing={refreshing} - userActivities={userActivities} - unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} - userBalance={get(userPoints, 'points')} - handleOnDropdownSelected={handleOnDropdownSelected} - type="estm" - dropdownOptions={dropdownOptions} - currentIndex={currentIndex} - /> - )} - - - - - {({ - handleOnDropdownSelected, - claim, - fetchUserActivity, - isClaiming, - isLoading, - refreshing, - userActivities, - userPoints, - dropdownOptions, - }) => ( - { - setSelectedUserActivities(userActivities.reverse()); - setSelectedType('wallet'); - }} - index={1} - showIconList - claim={claim} - setSelectedUserActivities={setSelectedUserActivities} - fetchUserActivity={fetchUserActivity} - isClaiming={isClaiming} - isLoading={isLoading} - refreshing={refreshing} - userActivities={userActivities} - unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} - userBalance={213} - handleOnDropdownSelected={handleOnDropdownSelected} - type="estm" - dropdownOptions={dropdownOptions} - /> - )} - - + + - + )} From 3c2313949700a1bd9eea185a02db0cc2584cf3bc Mon Sep 17 00:00:00 2001 From: ue Date: Wed, 20 Nov 2019 00:14:29 +0300 Subject: [PATCH 08/14] fixed intl issues --- src/components/transaction/transactionView.js | 4 +- src/config/locales/en-US.json | 70 +++++++++---------- src/constants/options/points.js | 40 +++++------ src/containers/pointsContainer.js | 6 +- src/screens/wallet/screen/steemView.js | 1 + 5 files changed, 60 insertions(+), 61 deletions(-) diff --git a/src/components/transaction/transactionView.js b/src/components/transaction/transactionView.js index 611198f54..fb6ad2603 100644 --- a/src/components/transaction/transactionView.js +++ b/src/components/transaction/transactionView.js @@ -23,7 +23,7 @@ const TransactionView = ({ transactions, type }) => { } return ( - {intl.formatMessage({ id: 'points.no_activity' })} + {intl.formatMessage({ id: 'wallet.no_activity' })} ); }; @@ -38,7 +38,7 @@ const TransactionView = ({ transactions, type }) => { key={item.created.toString()} index={index + 1} text={intl.formatMessage({ - id: `${type}.${get(item, 'textKey')}`, + id: `wallet.${get(item, 'textKey')}`, })} description={getTimeFromNow(get(item, 'created'))} isCircleIcon diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 414cf1ea9..f6a97cccc 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -9,6 +9,40 @@ "transfer_from_savings": "Transfer From Savings", "withdraw_vesting": "Power Down", "fill_order": "Fill Order", + "post": "Post", + "comment": "Comment", + "checkin": "Check-in", + "vote": "Vote", + "reblog": "Reblog", + "login": "Login", + "incoming_transfer_title": "Incoming transfer", + "outgoing_transfer_title": "Outgoing transfer", + "checkin_extra": "Bonus", + "delegation": "Delegation", + "delegation_title": "Delegation reward", + "post_title": "Points for post", + "comment_title": "Points for comment", + "vote_title": "Points for vote", + "reblog_title": "Points for reblog", + "login_title": "Points for login", + "checkin_title": "Points for heartbeat", + "checkin_extra_title": "Usage bonus", + "no_activity": "No activity here!", + "outgoing_transfer_description": "", + "incoming_transfer_description": "", + "delegation_desc": "You can earn 1 point per day for each 100sp delegation", + "post_desc": "You can earn point by posting regularly. Posting gives you 15 points.", + "comment_desc": "Each comment you make helps you to grow your audience and make friendship but also earns you 5 points.", + "checkin_desc": "Checking in on eSteem app gives you 0.25 points and helps you stay connected with your friends.", + "vote_desc": "By voting you give reward to other creators and show your appreciation but also earn 0.01 x vote weight points.", + "reblog_desc": " Share what post you like with your friends and earn 1 points.", + "login_desc": "When you login into eSteem app you are entitled to earn 100 points automatically.", + "checkin_extra_desc": "Consistent use of app gives you extra chances to earn more 10 points, be more active and earn more.", + "dropdown_transfer": "Gift", + "dropdown_promote": "Promote", + "dropdown_boost": "Boost", + "from": "From", + "to": "To", "estm": { "title": "eSteem Points", "buy": "GET ESTM" @@ -43,42 +77,6 @@ "weekly": "Weekly", "monthly": "Monthly" }, - "points": { - "post": "Post", - "comment": "Comment", - "checkin": "Check-in", - "vote": "Vote", - "reblog": "Reblog", - "login": "Login", - "incoming_transfer_title": "Incoming transfer", - "outgoing_transfer_title": "Outgoing transfer", - "checkin_extra": "Bonus", - "delegation": "Delegation", - "delegation_title": "Delegation reward", - "delegation_desc": "You can earn 1 point per day for each 100sp delegation", - "post_title": "Points for post", - "comment_title": "Points for comment", - "vote_title": "Points for vote", - "reblog_title": "Points for reblog", - "login_title": "Points for login", - "checkin_title": "Points for heartbeat", - "checkin_extra_title": "Usage bonus", - "no_activity": "No activity here!", - "outgoing_transfer_description": "", - "incoming_transfer_description": "", - "post_desc": "You can earn point by posting regularly. Posting gives you 15 points.", - "comment_desc": "Each comment you make helps you to grow your audience and make friendship but also earns you 5 points.", - "checkin_desc": "Checking in on eSteem app gives you 0.25 points and helps you stay connected with your friends.", - "vote_desc": "By voting you give reward to other creators and show your appreciation but also earn 0.01 x vote weight points.", - "reblog_desc": " Share what post you like with your friends and earn 1 points.", - "login_desc": "When you login into eSteem app you are entitled to earn 100 points automatically.", - "checkin_extra_desc": "Consistent use of app gives you extra chances to earn more 10 points, be more active and earn more.", - "dropdown_transfer": "Gift", - "dropdown_promote": "Promote", - "dropdown_boost": "Boost", - "from": "From", - "to": "To" - }, "messages": { "comingsoon": "Messages feature is coming soon!" }, diff --git a/src/constants/options/points.js b/src/constants/options/points.js index bcd35c668..caeef507b 100644 --- a/src/constants/options/points.js +++ b/src/constants/options/points.js @@ -2,80 +2,80 @@ export default { 999: { icon: 'compare-arrows', textKey: 'incoming_transfer_title', - nameKey: 'points.incoming_transfer', - descriptionKey: 'points.incoming_transfer_description', + nameKey: 'wallet.incoming_transfer', + descriptionKey: 'wallet.incoming_transfer_description', iconType: 'MaterialIcons', point: 0.1, }, 998: { icon: 'compare-arrows', textKey: 'outgoing_transfer_title', - nameKey: 'points.outgoing_transfer', - descriptionKey: 'points.outgoing_transfer_description', + nameKey: 'wallet.outgoing_transfer', + descriptionKey: 'wallet.outgoing_transfer_description', iconType: 'MaterialIcons', point: 0.1, }, 150: { icon: 'local-activity', textKey: 'delegation_title', - nameKey: 'points.delegation', - descriptionKey: 'points.delegation_desc', + nameKey: 'wallet.delegation', + descriptionKey: 'wallet.delegation_desc', iconType: 'MaterialIcons', point: 1, }, 100: { icon: 'pencil', textKey: 'post_title', - nameKey: 'points.post', - descriptionKey: 'points.post_desc', + nameKey: 'wallet.post', + descriptionKey: 'wallet.post_desc', iconType: 'MaterialCommunityIcons', point: 15, }, 110: { icon: 'comment-text-outline', textKey: 'comment_title', - nameKey: 'points.comment', - descriptionKey: 'points.comment_desc', + nameKey: 'wallet.comment', + descriptionKey: 'wallet.comment_desc', iconType: 'MaterialCommunityIcons', point: 5, }, 120: { icon: 'upcircleo', textKey: 'vote_title', - nameKey: 'points.vote', - descriptionKey: 'points.vote_desc', + nameKey: 'wallet.vote', + descriptionKey: 'wallet.vote_desc', iconType: 'AntDesign', point: 0.3, }, 130: { icon: 'repeat', textKey: 'reblog_title', - nameKey: 'points.reblog', - descriptionKey: 'points.reblog_desc', + nameKey: 'wallet.reblog', + descriptionKey: 'wallet.reblog_desc', iconType: 'MaterialIcons', point: 1, }, 10: { icon: 'favorite-border', textKey: 'checkin_title', - nameKey: 'points.checkin', - descriptionKey: 'points.checkin_desc', + nameKey: 'wallet.checkin', + descriptionKey: 'wallet.checkin_desc', iconType: 'MaterialIcons', point: 0.25, }, 20: { icon: 'person-outline', textKey: 'login_title', - nameKey: 'points.login', - descriptionKey: 'points.login_desc', + nameKey: 'wallet.login', + descriptionKey: 'wallet.login_desc', iconType: 'MaterialIcons', point: 100, }, 30: { icon: 'check-all', textKey: 'checkin_extra_title', - nameKey: 'points.checkin_extra', - descriptionKey: 'points.checkin_extra_desc', + nameKey: 'wallet.checkin_extra', + descriptionKey: 'wallet.checkin_extra_desc', iconType: 'MaterialCommunityIcons', point: 10, }, diff --git a/src/containers/pointsContainer.js b/src/containers/pointsContainer.js index 52dcadd40..7d4b8cba9 100644 --- a/src/containers/pointsContainer.js +++ b/src/containers/pointsContainer.js @@ -250,9 +250,9 @@ const PointsContainer = ({ redeemType: get(navigationParams, 'redeemType'), user, dropdownOptions: [ - intl.formatMessage({ id: 'points.dropdown_transfer' }), - intl.formatMessage({ id: 'points.dropdown_promote' }), - intl.formatMessage({ id: 'points.dropdown_boost' }), + intl.formatMessage({ id: 'wallet.dropdown_transfer' }), + intl.formatMessage({ id: 'wallet.dropdown_promote' }), + intl.formatMessage({ id: 'wallet.dropdown_boost' }), ], }) ); diff --git a/src/screens/wallet/screen/steemView.js b/src/screens/wallet/screen/steemView.js index 66cdd6eb0..c5ff53eeb 100644 --- a/src/screens/wallet/screen/steemView.js +++ b/src/screens/wallet/screen/steemView.js @@ -39,6 +39,7 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( type="steem" dropdownOptions={[]} currentIndex={currentIndex} + showIconList={false} /> )} From c8bf8ab3776b5646622b61666f480ed3ff429799 Mon Sep 17 00:00:00 2001 From: ue Date: Thu, 21 Nov 2019 00:06:40 +0300 Subject: [PATCH 09/14] added real data to steem view wip on actions --- .../walletLineItem/walletLineItemStyles.js | 1 + .../formattedCurrencyView.js | 7 +- src/components/points/view/pointsStyles.js | 12 +- src/components/points/view/pointsView.js | 146 +++++++++++------- src/config/locales/en-US.json | 24 +++ src/containers/pointsContainer.js | 6 +- src/containers/steemWalletContainer.js | 43 ++++-- src/screens/wallet/screen/estmView.js | 6 +- src/screens/wallet/screen/steemView.js | 23 ++- 9 files changed, 179 insertions(+), 89 deletions(-) diff --git a/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js b/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js index 9387a288a..3f0bdb43e 100644 --- a/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js +++ b/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js @@ -46,6 +46,7 @@ export default EStyleSheet.create({ marginLeft: 8, fontFamily: '$primaryFont', color: '$iconColor', + width: '100%', }, onlyText: { marginLeft: 40, diff --git a/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js b/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js index b5ebf1715..c6085cfbc 100644 --- a/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js +++ b/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js @@ -1,12 +1,15 @@ import React, { Fragment } from 'react'; import { connect } from 'react-redux'; -const FormattedCurrency = ({ value, fixAt = 3, currency }) => { +const FormattedCurrency = ({ value, fixAt = 3, currency, isApproximate = false }) => { const { currencyRate, currencySymbol } = currency; const valueInCurrency = value * currencyRate; const toFixedValue = valueInCurrency.toFixed(fixAt); - return {`${currencySymbol} ${toFixedValue}`}; + return ( + {`${isApproximate && + '~'}${currencySymbol} ${toFixedValue}`} + ); }; const mapStateToProps = state => ({ diff --git a/src/components/points/view/pointsStyles.js b/src/components/points/view/pointsStyles.js index 25198ba6a..08e53c717 100644 --- a/src/components/points/view/pointsStyles.js +++ b/src/components/points/view/pointsStyles.js @@ -1,7 +1,7 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ - pointText: { + balanceText: { color: '$primaryBlue', fontSize: 26, marginTop: 24, @@ -9,11 +9,10 @@ export default EStyleSheet.create({ alignSelf: 'center', fontWeight: 'bold', }, - pointsWrapper: { - flexDirection: 'row', + balanceWrapper: { + flexDirection: 'column', justifyContent: 'center', alignSelf: 'center', - flex: 1, }, dropdownRowText: { fontSize: 14, @@ -73,4 +72,9 @@ export default EStyleSheet.create({ scrollContentContainer: { paddingBottom: 60, }, + valueDescriptions: { + marginLeft: -30, + marginTop: 20, + marginBottom: -10, + }, }); diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index 84a004d7e..5bd2a7b18 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -1,17 +1,13 @@ /* eslint-disable react/jsx-wrap-multilines */ import React, { useRef, Fragment, useEffect } from 'react'; -import { Text, View, ScrollView, RefreshControl } from 'react-native'; +import { Text, View } from 'react-native'; import { useIntl } from 'react-intl'; -import { get } from 'lodash'; import { withNavigation } from 'react-navigation'; +import get from 'lodash/get'; // Components import { LineBreak } from '../../basicUIElements'; -import { Icon, MainButton, DropdownButton, HorizontalIconList, Transaction } from '../..'; -import { ThemeContainer } from '../../../containers'; - -// Utils -import { groomingPointsTransactionData } from '../../../utils/wallet'; +import { Icon, MainButton, DropdownButton, HorizontalIconList, WalletLineItem } from '../..'; // Constants import POINTS, { POINTS_KEYS } from '../../../constants/options/points'; @@ -31,11 +27,14 @@ const PointsView = ({ navigation, unclaimedBalance, userBalance, - dropdownOptions, type = '', componentDidUpdate, showIconList, currentIndex, + userSecondBalance, + secondBalanceName, + valueDescriptions, + showBuyButton, index, }) => { const intl = useIntl(); @@ -47,65 +46,79 @@ const PointsView = ({ } }, [componentDidUpdate, currentIndex, index]); - // const refreshControl = () => ( - // - // {isDarkTheme => ( - // - // )} - // - // ); + // onPress={() => dropdownRef.current.show()} + const _getBalanceItem = (balance, options, key) => + balance !== undefined && ( + + {balance} + intl.formatMessage({ id: `wallet.${itemKey}` }))} + noHighlight + dropdownButtonStyle={styles.dropdownButtonStyle} + onSelect={handleOnDropdownSelected} + rowTextStyle={styles.dropdownRowText} + dropdownStyle={styles.dropdownStyle} + iconStyle={styles.dropdownIconStyle} + /> + {intl.formatMessage({ id: `wallet.${key}.title` })} + + ); return ( - - dropdownRef.current.show()} style={styles.pointText}> - {userBalance} - - - - {intl.formatMessage({ id: `wallet.${type}.title` })} + {userBalance.map(item => + _getBalanceItem( + get(item, 'balance', 0), + get(item, 'options', []), + get(item, 'nameKey', 'estm'), + ), + )} - - unclaimedBalance > 0 ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST) - } - > - - - {unclaimedBalance > 0 - ? unclaimedBalance - : intl.formatMessage({ id: `wallet.${type}.buy` })} - - - + {(showBuyButton || (!showBuyButton && !!unclaimedBalance)) && ( + + unclaimedBalance > 0 ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST) + } + > + + + {unclaimedBalance > 0 + ? unclaimedBalance + : intl.formatMessage({ id: `wallet.${type}.buy` })} + + + + - - + + )} + {/* {valueDescriptions && } */} + {valueDescriptions && + valueDescriptions.map(item => ( + + ))} {showIconList && } @@ -113,3 +126,18 @@ const PointsView = ({ }; export default withNavigation(PointsView); + +// const refreshControl = () => ( +// +// {isDarkTheme => ( +// +// )} +// +// ); diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index f6a97cccc..17ca69d93 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -43,10 +43,34 @@ "dropdown_boost": "Boost", "from": "From", "to": "To", + "estimated_value_desc": "*determined by purchase value", + "estimated_value": "Estimated value", + "amount_information": "Drag the slider to adjust the amount", + "amount": "Amount", + "memo": "Memo", + "information": "Are you sure to transfer funds?", + "amount_desc": "Balance", + "memo_desc": "This memo is public", + "to_placeholder": "Username", + "memo_placeholder": "Enter your notes here", + "transfer_token": "Transfer", + "points": "Gift ESTM to someone", + "transfer_to_saving": "Transfer To Saving", + "powerUp": "Power Up", + "withdraw_to_saving": "Withdraw To Saving", + "steemconnect_title": "Steemconnect Transfer", + "next": "NEXT", + "delegate": "Delegate", + "power_down": "Power Down", + "withdraw_steem": "Withdraw Steem", + "withdraw_sbd": "Withdraw Steem Dollar", "estm": { "title": "eSteem Points", "buy": "GET ESTM" }, + "saving": { + "title": "STEEM Savings" + }, "steem": { "title": "STEEM", "buy": "GET STEEM" diff --git a/src/containers/pointsContainer.js b/src/containers/pointsContainer.js index 7d4b8cba9..4bb8f1535 100644 --- a/src/containers/pointsContainer.js +++ b/src/containers/pointsContainer.js @@ -249,11 +249,7 @@ const PointsContainer = ({ userPoints, redeemType: get(navigationParams, 'redeemType'), user, - dropdownOptions: [ - intl.formatMessage({ id: 'wallet.dropdown_transfer' }), - intl.formatMessage({ id: 'wallet.dropdown_promote' }), - intl.formatMessage({ id: 'wallet.dropdown_boost' }), - ], + dropdownOptions: ['dropdown_transfer', 'dropdown_promote', 'dropdown_boost'], }) ); }; diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index 843cb823f..bd4131eb0 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -13,6 +13,12 @@ import { groomingWalletData, groomingTransactionData } from '../utils/wallet'; import parseToken from '../utils/parseToken'; import { vestsToSp } from '../utils/conversions'; +const STEEM_DROPDOWN = ['transfer_token', 'transfer_to_saving', 'powerUp']; +const SBD_DROPDOWN = ['transfer_token', 'transfer_to_saving']; +const SAVING_STEEM_DROPDOWN = ['withdraw_steem']; +const SAVING_SBD_DROPDOWN = ['withdraw_sbd']; +const STEEM_POWER_DROPDOWN = ['delegate', 'power_down']; + const WalletContainer = ({ children, currentAccount, @@ -28,6 +34,11 @@ const WalletContainer = ({ const [refreshing, setRefreshing] = useState(false); const [walletData, setWalletData] = useState(null); const [userActivities, setUserActivities] = useState(null); + const [sbdBalance, setSbdBalance] = useState(0); + const [steemBalance, setSteemBalance] = useState(0); + const [spBalance, setSpBalance] = useState(0); + const [steemSavingBalance, setSteemSavingBalance] = useState(0); + const [estimatedValue, setEstimatedValue] = useState(0); const intl = useIntl(); const dispatch = useDispatch(); @@ -39,6 +50,18 @@ const WalletContainer = ({ _getWalletData(selectedUser); }, [_getWalletData, selectedUser]); + useEffect(() => { + setSbdBalance(Math.round(get(walletData, 'sbdBalance', 0) * 1000) / 1000); + setSteemBalance(Math.round(get(walletData, 'balance', 0) * 1000) / 1000); + setSteemSavingBalance(Math.round(get(walletData, 'savingBalance', 0) * 1000) / 1000); + setSpBalance( + Math.round( + vestsToSp(get(walletData, 'vestingShares', 0), get(walletData, 'steemPerMVests', 0)) * 1000, + ) / 1000, + ); + setEstimatedValue(get(walletData, 'estimatedValue', 0)); + }, [walletData]); + // Components functions const _getWalletData = useCallback( @@ -137,19 +160,6 @@ const WalletContainer = ({ }); }; - const sbdBalance = useCallback(Math.round(get(walletData, 'sbdBalance') * 1000) / 1000, [ - walletData, - ]); - const spBalance = useCallback( - Math.round( - vestsToSp(get(walletData, 'vestingShares', 1), get(walletData, 'steemPerMVests', 1)) * 1000, - ) / 1000, - [walletData], - ); - const steemBalance = useCallback(Math.round(get(walletData, 'balance', 1) * 1000) / 1000, [ - walletData, - ]); - return ( children && children({ @@ -166,6 +176,13 @@ const WalletContainer = ({ steemBalance, spBalance, sbdBalance, + steemSavingBalance, + estimatedValue, + steemDropdown: STEEM_DROPDOWN, + sbdDropdown: SBD_DROPDOWN, + savingSteemDropdown: SAVING_STEEM_DROPDOWN, + savingSbdDropdown: SAVING_SBD_DROPDOWN, + steemPowerDropdown: STEEM_POWER_DROPDOWN, }) ); }; diff --git a/src/screens/wallet/screen/estmView.js b/src/screens/wallet/screen/estmView.js index bc64c26fa..a78ab9e52 100644 --- a/src/screens/wallet/screen/estmView.js +++ b/src/screens/wallet/screen/estmView.js @@ -32,11 +32,13 @@ const EstmView = ({ handleOnSelected, index, currentIndex }) => ( refreshing={refreshing} userActivities={userActivities} unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} - userBalance={get(userPoints, 'points')} + userBalance={[ + { balance: get(userPoints, 'points'), nameKey: 'estm', options: dropdownOptions }, + ]} handleOnDropdownSelected={handleOnDropdownSelected} type="estm" - dropdownOptions={dropdownOptions} currentIndex={currentIndex} + showBuyButton /> )} diff --git a/src/screens/wallet/screen/steemView.js b/src/screens/wallet/screen/steemView.js index c5ff53eeb..c6d160077 100644 --- a/src/screens/wallet/screen/steemView.js +++ b/src/screens/wallet/screen/steemView.js @@ -2,8 +2,9 @@ import React from 'react'; import get from 'lodash/get'; import { View } from 'react-native'; -import { Points } from '../../../components'; +import { Points, FormatedCurrency } from '../../../components'; import { SteemWalletContainer, AccountContainer } from '../../../containers'; +import { navigate } from '../../../navigation/service'; import globalStyles from '../../../globalStyles'; @@ -22,6 +23,9 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( userActivities, steemBalance, isLoading, + steemSavingBalance, + estimatedValue, + steemDropdown, }) => ( handleOnSelected(userActivities, 'steem')} @@ -34,12 +38,23 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( refreshing={refreshing} userActivities={userActivities} unclaimedBalance={0} - userBalance={steemBalance} - handleOnDropdownSelected={null} + userBalance={[ + { balance: steemBalance, nameKey: 'steem', options: steemDropdown }, + { balance: steemSavingBalance, nameKey: 'saving', options: [] }, + ]} + handleOnDropdownSelected={selectedIndex => { + navigate({ routeName: steemDropdown[selectedIndex], params: 'STEEM' }); + }} type="steem" - dropdownOptions={[]} currentIndex={currentIndex} showIconList={false} + valueDescriptions={[ + { + textKey: 'estimated_value', + value: , + subTextKey: 'estimated_value_desc', + }, + ]} /> )} From b522106e1fcc44292bef401269a1bc54c0a3c538 Mon Sep 17 00:00:00 2001 From: ue Date: Thu, 21 Nov 2019 00:17:50 +0300 Subject: [PATCH 10/14] fixed currency issue --- .../formattedCurrency/formattedCurrencyView.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js b/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js index c6085cfbc..da56c4a72 100644 --- a/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js +++ b/src/components/formatedElements/formattedCurrency/formattedCurrencyView.js @@ -7,8 +7,9 @@ const FormattedCurrency = ({ value, fixAt = 3, currency, isApproximate = false } const toFixedValue = valueInCurrency.toFixed(fixAt); return ( - {`${isApproximate && - '~'}${currencySymbol} ${toFixedValue}`} + {`${ + isApproximate ? '~' : '' + }${currencySymbol} ${toFixedValue}`} ); }; From d064ed60f6d91e5d000d6edb522a289160ea9fe1 Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 25 Nov 2019 17:54:07 +0300 Subject: [PATCH 11/14] added sp view --- src/components/index.js | 4 +- src/components/points/index.js | 3 - src/components/walletHeader/index.js | 3 + .../view/walletHeaderStyles.js} | 0 .../view/walletHeaderView.js} | 10 +-- src/config/locales/en-US.json | 10 +++ src/containers/steemWalletContainer.js | 64 ++++++++++++++++++ src/globalStyles.js | 1 + src/screens/transfer/screen/transferStyles.js | 1 + src/screens/wallet/screen/estmView.js | 4 +- src/screens/wallet/screen/pointsStyles.js | 16 ----- src/screens/wallet/screen/spView.js | 65 +++++++++++++++++++ src/screens/wallet/screen/steemView.js | 17 ++--- src/screens/wallet/screen/walletScreen.js | 10 ++- 14 files changed, 167 insertions(+), 41 deletions(-) delete mode 100644 src/components/points/index.js create mode 100644 src/components/walletHeader/index.js rename src/components/{points/view/pointsStyles.js => walletHeader/view/walletHeaderStyles.js} (100%) rename src/components/{points/view/pointsView.js => walletHeader/view/walletHeaderView.js} (94%) delete mode 100644 src/screens/wallet/screen/pointsStyles.js diff --git a/src/components/index.js b/src/components/index.js index 6d620979a..818bed0ff 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -59,7 +59,7 @@ import { Comments } from './comments'; import { CommentsDisplay } from './commentsDisplay'; import { LeaderBoard } from './leaderboard'; import { Notification } from './notification'; -import { Points } from './points'; +import { WalletHeader } from './walletHeader'; import { Posts } from './posts'; import { Transaction } from './transaction'; import { VotersDisplay } from './votersDisplay'; @@ -136,7 +136,7 @@ export { ParentPost, PercentBar, PinAnimatedInput, - Points, + WalletHeader, PostBody, PostBoost, PostButton, diff --git a/src/components/points/index.js b/src/components/points/index.js deleted file mode 100644 index 5020ccebc..000000000 --- a/src/components/points/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Points from './view/pointsView'; - -export { Points }; diff --git a/src/components/walletHeader/index.js b/src/components/walletHeader/index.js new file mode 100644 index 000000000..a860fb819 --- /dev/null +++ b/src/components/walletHeader/index.js @@ -0,0 +1,3 @@ +import WalletHeader from './view/walletHeaderView'; + +export { WalletHeader }; diff --git a/src/components/points/view/pointsStyles.js b/src/components/walletHeader/view/walletHeaderStyles.js similarity index 100% rename from src/components/points/view/pointsStyles.js rename to src/components/walletHeader/view/walletHeaderStyles.js diff --git a/src/components/points/view/pointsView.js b/src/components/walletHeader/view/walletHeaderView.js similarity index 94% rename from src/components/points/view/pointsView.js rename to src/components/walletHeader/view/walletHeaderView.js index 5bd2a7b18..7818eefa4 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/walletHeader/view/walletHeaderView.js @@ -14,9 +14,9 @@ import POINTS, { POINTS_KEYS } from '../../../constants/options/points'; import { default as ROUTES } from '../../../constants/routeNames'; // Styles -import styles from './pointsStyles'; +import styles from './walletHeaderStyles'; -const PointsView = ({ +const WalletHeaderView = ({ fetchUserActivity, refreshing, isLoading, @@ -59,7 +59,7 @@ const PointsView = ({ options={options.map(itemKey => intl.formatMessage({ id: `wallet.${itemKey}` }))} noHighlight dropdownButtonStyle={styles.dropdownButtonStyle} - onSelect={handleOnDropdownSelected} + onSelect={selectedIndex => handleOnDropdownSelected(options[selectedIndex])} rowTextStyle={styles.dropdownRowText} dropdownStyle={styles.dropdownStyle} iconStyle={styles.dropdownIconStyle} @@ -80,7 +80,7 @@ const PointsView = ({ ), )} - {(showBuyButton || (!showBuyButton && !!unclaimedBalance)) && ( + {showBuyButton && ( ( // diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 17ca69d93..0187c7120 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -74,6 +74,9 @@ "steem": { "title": "STEEM", "buy": "GET STEEM" + }, + "steem_power": { + "title": "STEEM POWER" } }, "notification": { @@ -350,6 +353,13 @@ "powerUp": "Power Up", "withdraw_to_saving": "Withdraw To Saving", "steemconnect_title": "Steemconnect Transfer", + "estimated_weekly": "Estimated Weekly", + "destination_accounts": "Destination Accounts", + "stop_information": "Are you sure want to stop?", + "percent": "Percent", + "auto_vests": "Auto Vests", + "save": "SAVE", + "percent_information": "Percent info", "next": "NEXT", "delegate": "Delegate", "power_down": "Power Down", diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index bd4131eb0..77e687367 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -8,10 +8,17 @@ import { toastNotification } from '../redux/actions/uiAction'; // Dsteem import { getAccount, claimRewardBalance } from '../providers/steem/dsteem'; +// Actions +import { openPinCodeModal } from '../redux/actions/applicationActions'; + // Utils import { groomingWalletData, groomingTransactionData } from '../utils/wallet'; import parseToken from '../utils/parseToken'; import { vestsToSp } from '../utils/conversions'; +import { navigate } from '../navigation/service'; + +// Constants +import ROUTES from '../constants/routeNames'; const STEEM_DROPDOWN = ['transfer_token', 'transfer_to_saving', 'powerUp']; const SBD_DROPDOWN = ['transfer_token', 'transfer_to_saving']; @@ -28,6 +35,7 @@ const WalletContainer = ({ selectedUser, setEstimatedWalletValue, steemPerMVests, + isPinCodeOpen, }) => { const [isClaiming, setIsClaiming] = useState(false); const [isLoading, setIsLoading] = useState(true); @@ -39,6 +47,7 @@ const WalletContainer = ({ const [spBalance, setSpBalance] = useState(0); const [steemSavingBalance, setSteemSavingBalance] = useState(0); const [estimatedValue, setEstimatedValue] = useState(0); + const [unclaimedBalance, setUnclaimedBalance] = useState(''); const intl = useIntl(); const dispatch = useDispatch(); @@ -60,6 +69,23 @@ const WalletContainer = ({ ) / 1000, ); setEstimatedValue(get(walletData, 'estimatedValue', 0)); + setUnclaimedBalance( + `${ + get(walletData, 'rewardSteemBalance', 0) + ? `${Math.round(get(walletData, 'rewardSteemBalance', 0) * 1000) / 1000} STEEM` + : '' + } + ${ + get(walletData, 'rewardSbdBalance', 0) + ? ` ${Math.round(get(walletData, 'rewardSbdBalance', 0) * 1000) / 1000} SBD` + : '' + } + ${ + get(walletData, 'rewardVestingSteem', 0) + ? ` ${Math.round(get(walletData, 'rewardVestingSteem', 0) * 1000) / 1000} SP` + : '' + }`, + ); }, [walletData]); // Components functions @@ -160,6 +186,41 @@ const WalletContainer = ({ }); }; + const _navigate = async (transferType, fundType) => { + let balance; + + switch (fundType) { + case 'STEEM': + balance = Math.round(walletData.balance * 1000) / 1000; + break; + case 'SBD': + balance = Math.round(walletData.sbdBalance * 1000) / 1000; + break; + case 'SAVING_STEEM': + balance = Math.round(walletData.savingBalance * 1000) / 1000; + break; + case 'SAVING_SBD': + balance = Math.round(walletData.savingBalanceSbd * 1000) / 1000; + break; + default: + break; + } + + if (isPinCodeOpen) { + dispatch( + openPinCodeModal({ + navigateTo: ROUTES.SCREENS.TRANSFER, + navigateParams: { transferType, fundType, balance }, + }), + ); + } else { + navigate({ + routeName: ROUTES.SCREENS.TRANSFER, + params: { transferType, fundType, balance }, + }); + } + }; + return ( children && children({ @@ -178,11 +239,13 @@ const WalletContainer = ({ sbdBalance, steemSavingBalance, estimatedValue, + navigate: _navigate, steemDropdown: STEEM_DROPDOWN, sbdDropdown: SBD_DROPDOWN, savingSteemDropdown: SAVING_STEEM_DROPDOWN, savingSbdDropdown: SAVING_SBD_DROPDOWN, steemPowerDropdown: STEEM_POWER_DROPDOWN, + unclaimedBalance: unclaimedBalance.trim(), }) ); }; @@ -192,6 +255,7 @@ const mapStateToProps = state => ({ pinCode: state.application.pin, globalProps: state.account.globalProps, steemPerMVests: state.account.globalProps.steemPerMVests, + isPinCodeOpen: state.application.isPinCodeOpen, }); export default connect(mapStateToProps)(WalletContainer); diff --git a/src/globalStyles.js b/src/globalStyles.js index c8f7aded7..4782c0f7e 100644 --- a/src/globalStyles.js +++ b/src/globalStyles.js @@ -7,6 +7,7 @@ export default EStyleSheet.create({ }, defaultContainer: { flex: 1, + backgroundColor: '$primaryLightBackground', }, listWrapper: { paddingHorizontal: 8, diff --git a/src/screens/transfer/screen/transferStyles.js b/src/screens/transfer/screen/transferStyles.js index 9989fb8c3..f3f492d07 100644 --- a/src/screens/transfer/screen/transferStyles.js +++ b/src/screens/transfer/screen/transferStyles.js @@ -174,6 +174,7 @@ export default EStyleSheet.create({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + backgroundColor: '$primaryBackgroundColor', }, checkView: { flexDirection: 'row', diff --git a/src/screens/wallet/screen/estmView.js b/src/screens/wallet/screen/estmView.js index a78ab9e52..1da1e5d1e 100644 --- a/src/screens/wallet/screen/estmView.js +++ b/src/screens/wallet/screen/estmView.js @@ -2,7 +2,7 @@ import React from 'react'; import get from 'lodash/get'; import { View } from 'react-native'; -import { Points } from '../../../components'; +import { WalletHeader } from '../../../components'; import { PointsContainer } from '../../../containers'; import globalStyles from '../../../globalStyles'; @@ -21,7 +21,7 @@ const EstmView = ({ handleOnSelected, index, currentIndex }) => ( userPoints, dropdownOptions, }) => ( - handleOnSelected(userActivities, 'estm')} index={index} showIconList diff --git a/src/screens/wallet/screen/pointsStyles.js b/src/screens/wallet/screen/pointsStyles.js deleted file mode 100644 index 163dc9b91..000000000 --- a/src/screens/wallet/screen/pointsStyles.js +++ /dev/null @@ -1,16 +0,0 @@ -import EStyleSheet from 'react-native-extended-stylesheet'; - -export default EStyleSheet.create({ - container: { - flex: 1, - backgroundColor: '$primaryLightBackground', - }, - image: { - width: 193, - height: 189, - }, - text: { - color: '#788187', - fontWeight: 'bold', - }, -}); diff --git a/src/screens/wallet/screen/spView.js b/src/screens/wallet/screen/spView.js index e69de29bb..16b922cf8 100644 --- a/src/screens/wallet/screen/spView.js +++ b/src/screens/wallet/screen/spView.js @@ -0,0 +1,65 @@ +import React from 'react'; +import { View } from 'react-native'; + +import { WalletHeader, FormatedCurrency } from '../../../components'; +import { SteemWalletContainer, AccountContainer } from '../../../containers'; + +import globalStyles from '../../../globalStyles'; + +const SpView = ({ handleOnSelected, index, currentIndex }) => ( + + + {({ currentAccount }) => ( + + {({ + isClaiming, + claimRewardBalance, + handleOnWalletRefresh, + refreshing, + userActivities, + spBalance, + isLoading, + steemSavingBalance, + estimatedValue, + steemPowerDropdown, + savingSteemDropdown, + unclaimedBalance, + navigate, + }) => ( + handleOnSelected(userActivities, 'steem_power')} + index={index} + claim={claimRewardBalance} + fetchUserActivity={handleOnWalletRefresh} + isClaiming={isClaiming} + isLoading={isLoading} + refreshing={refreshing} + userActivities={userActivities} + unclaimedBalance={unclaimedBalance} + showBuyButton={unclaimedBalance.length > 0} + userBalance={[ + { balance: spBalance, nameKey: 'steem_power', options: steemPowerDropdown }, + ]} + handleOnDropdownSelected={option => navigate(option, 'STEEM_POWER')} + type="steem_power" + currentIndex={currentIndex} + showIconList={false} + valueDescriptions={[ + { + textKey: 'estimated_value', + value: , + }, + { + textKey: 'estimated_value', + value: , + }, + ]} + /> + )} + + )} + + +); + +export default SpView; diff --git a/src/screens/wallet/screen/steemView.js b/src/screens/wallet/screen/steemView.js index c6d160077..ae9e4b3e8 100644 --- a/src/screens/wallet/screen/steemView.js +++ b/src/screens/wallet/screen/steemView.js @@ -1,10 +1,8 @@ import React from 'react'; -import get from 'lodash/get'; import { View } from 'react-native'; -import { Points, FormatedCurrency } from '../../../components'; +import { WalletHeader, FormatedCurrency } from '../../../components'; import { SteemWalletContainer, AccountContainer } from '../../../containers'; -import { navigate } from '../../../navigation/service'; import globalStyles from '../../../globalStyles'; @@ -18,19 +16,18 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( claimRewardBalance, handleOnWalletRefresh, refreshing, - walletData, - steemPerMVests, userActivities, steemBalance, isLoading, steemSavingBalance, estimatedValue, steemDropdown, + savingSteemDropdown, + navigate, }) => ( - handleOnSelected(userActivities, 'steem')} index={index} - showIconList claim={claimRewardBalance} fetchUserActivity={handleOnWalletRefresh} isClaiming={isClaiming} @@ -40,11 +37,9 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( unclaimedBalance={0} userBalance={[ { balance: steemBalance, nameKey: 'steem', options: steemDropdown }, - { balance: steemSavingBalance, nameKey: 'saving', options: [] }, + { balance: steemSavingBalance, nameKey: 'saving', options: savingSteemDropdown }, ]} - handleOnDropdownSelected={selectedIndex => { - navigate({ routeName: steemDropdown[selectedIndex], params: 'STEEM' }); - }} + handleOnDropdownSelected={option => navigate(option, 'STEEM')} type="steem" currentIndex={currentIndex} showIconList={false} diff --git a/src/screens/wallet/screen/walletScreen.js b/src/screens/wallet/screen/walletScreen.js index ae9713ab2..4e962d327 100644 --- a/src/screens/wallet/screen/walletScreen.js +++ b/src/screens/wallet/screen/walletScreen.js @@ -9,9 +9,10 @@ import { LoggedInContainer } from '../../../containers'; import { Header, Transaction } from '../../../components'; import EstmView from './estmView'; import SteemView from './steemView'; +import SpView from './spView'; // Styles -import styles from './pointsStyles'; +import globalStyles from '../../../globalStyles'; const WalletScreen = () => { const [selectedUserActivities, setSelectedUserActivities] = useState(null); @@ -26,7 +27,7 @@ const WalletScreen = () => { return (
- + {() => ( <> @@ -46,6 +47,11 @@ const WalletScreen = () => { handleOnSelected={_handleSwipeItemChange} currentIndex={currentIndex} /> + From 7f7e59d6665f231e9a492fd8cbf38033306c1b7a Mon Sep 17 00:00:00 2001 From: ue Date: Tue, 26 Nov 2019 21:58:19 +0300 Subject: [PATCH 12/14] done with sp view --- src/components/transaction/transactionView.js | 22 +++++++++++++++++-- src/components/upvote/view/upvoteView.js | 14 ++---------- .../walletHeader/view/walletHeaderView.js | 21 ++---------------- src/config/locales/en-US.json | 1 + src/containers/steemWalletContainer.js | 15 +++++++++---- src/screens/wallet/screen/estmView.js | 6 +++-- src/screens/wallet/screen/spView.js | 7 +++--- src/screens/wallet/screen/walletScreen.js | 13 +++++++++-- src/utils/vote.js | 16 ++++++++++++++ 9 files changed, 70 insertions(+), 45 deletions(-) create mode 100644 src/utils/vote.js diff --git a/src/components/transaction/transactionView.js b/src/components/transaction/transactionView.js index fb6ad2603..7e24fdec6 100644 --- a/src/components/transaction/transactionView.js +++ b/src/components/transaction/transactionView.js @@ -1,7 +1,7 @@ /* eslint-disable react/jsx-wrap-multilines */ import React from 'react'; import { useIntl } from 'react-intl'; -import { View, Text, FlatList } from 'react-native'; +import { View, Text, FlatList, RefreshControl } from 'react-native'; import get from 'lodash/get'; import isEmpty from 'lodash/isEmpty'; @@ -11,10 +11,11 @@ import { getTimeFromNow } from '../../utils/time'; // Components import { WalletLineItem, ListPlaceHolder } from '../basicUIElements'; import { CollapsibleCard } from '..'; +import { ThemeContainer } from '../../containers'; import globalStyles from '../../globalStyles'; -const TransactionView = ({ transactions, type }) => { +const TransactionView = ({ transactions, type, refreshing, setRefreshing }) => { const intl = useIntl(); const _renderLoading = () => { @@ -27,6 +28,21 @@ const TransactionView = ({ transactions, type }) => { ); }; + const refreshControl = () => ( + + {isDarkTheme => ( + setRefreshing(true)} + progressBackgroundColor="#357CE6" + tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'} + titleColor="#fff" + colors={['#fff']} + /> + )} + + ); + const _renderItem = (item, index) => { return ( { _renderItem(item, index)} /> diff --git a/src/components/upvote/view/upvoteView.js b/src/components/upvote/view/upvoteView.js index 695aac5fc..f15ac1080 100644 --- a/src/components/upvote/view/upvoteView.js +++ b/src/components/upvote/view/upvoteView.js @@ -8,6 +8,7 @@ import get from 'lodash/get'; // Utils import parseToken from '../../../utils/parseToken'; import { vestsToRshares } from '../../../utils/conversions'; +import { getEstimatedAmount } from '../../../utils/vote'; // Components import { Icon } from '../../icon'; @@ -71,20 +72,9 @@ class UpvoteView extends Component { if (currentAccount && Object.entries(currentAccount).length !== 0) { const { sliderValue } = this.state; - const { fundRecentClaims, fundRewardBalance, base, quote } = globalProps; - - const votingPower = currentAccount.voting_power; - const totalVests = - parseToken(get(currentAccount, 'vesting_shares')) + - parseToken(get(currentAccount, 'received_vesting_shares')) - - parseToken(get(currentAccount, 'delegated_vesting_shares')); - const votePct = sliderValue * 10000; - - const rShares = vestsToRshares(totalVests, votingPower, votePct); - const estimated = (rShares / fundRecentClaims) * fundRewardBalance * (base / quote); this.setState({ - amount: estimated.toFixed(5), + amount: getEstimatedAmount(currentAccount, globalProps, sliderValue), }); } }; diff --git a/src/components/walletHeader/view/walletHeaderView.js b/src/components/walletHeader/view/walletHeaderView.js index 7818eefa4..cb01afcd0 100644 --- a/src/components/walletHeader/view/walletHeaderView.js +++ b/src/components/walletHeader/view/walletHeaderView.js @@ -86,13 +86,11 @@ const WalletHeaderView = ({ isDisable={isClaiming} style={styles.mainButton} height={50} - onPress={() => - unclaimedBalance > 0 ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST) - } + onPress={() => (unclaimedBalance ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST))} > - {unclaimedBalance > 0 + {unclaimedBalance ? unclaimedBalance : intl.formatMessage({ id: `wallet.${type}.buy` })} @@ -126,18 +124,3 @@ const WalletHeaderView = ({ }; export default withNavigation(WalletHeaderView); - -// const refreshControl = () => ( -// -// {isDarkTheme => ( -// -// )} -// -// ); diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 0187c7120..cb4f6a374 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -45,6 +45,7 @@ "to": "To", "estimated_value_desc": "*determined by purchase value", "estimated_value": "Estimated value", + "estimated_amount": "Vote value", "amount_information": "Drag the slider to adjust the amount", "amount": "Amount", "memo": "Memo", diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index 77e687367..d25caa77f 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -16,6 +16,7 @@ import { groomingWalletData, groomingTransactionData } from '../utils/wallet'; import parseToken from '../utils/parseToken'; import { vestsToSp } from '../utils/conversions'; import { navigate } from '../navigation/service'; +import { getEstimatedAmount } from '../utils/vote'; // Constants import ROUTES from '../constants/routeNames'; @@ -48,9 +49,14 @@ const WalletContainer = ({ const [steemSavingBalance, setSteemSavingBalance] = useState(0); const [estimatedValue, setEstimatedValue] = useState(0); const [unclaimedBalance, setUnclaimedBalance] = useState(''); + const [estimatedAmount, setEstimatedAmount] = useState(0); const intl = useIntl(); const dispatch = useDispatch(); + useEffect(() => { + setEstimatedAmount(getEstimatedAmount(currentAccount, globalProps)); + }, [currentAccount, globalProps]); + useEffect(() => { _getWalletData(selectedUser); }, [_getWalletData, selectedUser]); @@ -138,7 +144,7 @@ const WalletContainer = ({ }) .then(() => getAccount(currentAccount.name)) .then(account => { - _getWalletData(account && account[0]); + _getWalletData(selectedUser); if (isHasUnclaimedRewards) { dispatch( toastNotification( @@ -150,7 +156,7 @@ const WalletContainer = ({ } }) .then(account => { - _getWalletData(account && account[0]); + _getWalletData(selectedUser); setIsClaiming(false); }) .catch(() => { @@ -171,7 +177,7 @@ const WalletContainer = ({ getAccount(selectedUser.name) .then(account => { - _getWalletData(account && account[0]); + _getWalletData(selectedUser); setRefreshing(false); }) .catch(() => { @@ -245,7 +251,8 @@ const WalletContainer = ({ savingSteemDropdown: SAVING_STEEM_DROPDOWN, savingSbdDropdown: SAVING_SBD_DROPDOWN, steemPowerDropdown: STEEM_POWER_DROPDOWN, - unclaimedBalance: unclaimedBalance.trim(), + unclaimedBalance: unclaimedBalance && unclaimedBalance.trim(), + estimatedAmount, }) ); }; diff --git a/src/screens/wallet/screen/estmView.js b/src/screens/wallet/screen/estmView.js index 1da1e5d1e..3ae13a683 100644 --- a/src/screens/wallet/screen/estmView.js +++ b/src/screens/wallet/screen/estmView.js @@ -22,7 +22,7 @@ const EstmView = ({ handleOnSelected, index, currentIndex }) => ( dropdownOptions, }) => ( handleOnSelected(userActivities, 'estm')} + componentDidUpdate={() => handleOnSelected(userActivities, 'estm', fetchUserActivity)} index={index} showIconList claim={claim} @@ -31,7 +31,9 @@ const EstmView = ({ handleOnSelected, index, currentIndex }) => ( isLoading={isLoading} refreshing={refreshing} userActivities={userActivities} - unclaimedBalance={get(userPoints, 'unclaimed_points', 0)} + unclaimedBalance={ + get(userPoints, 'unclaimed_points') > 0 && get(userPoints, 'unclaimed_points') + } userBalance={[ { balance: get(userPoints, 'points'), nameKey: 'estm', options: dropdownOptions }, ]} diff --git a/src/screens/wallet/screen/spView.js b/src/screens/wallet/screen/spView.js index 16b922cf8..7b17951bc 100644 --- a/src/screens/wallet/screen/spView.js +++ b/src/screens/wallet/screen/spView.js @@ -19,12 +19,11 @@ const SpView = ({ handleOnSelected, index, currentIndex }) => ( userActivities, spBalance, isLoading, - steemSavingBalance, estimatedValue, steemPowerDropdown, - savingSteemDropdown, unclaimedBalance, navigate, + estimatedAmount, }) => ( handleOnSelected(userActivities, 'steem_power')} @@ -50,8 +49,8 @@ const SpView = ({ handleOnSelected, index, currentIndex }) => ( value: , }, { - textKey: 'estimated_value', - value: , + textKey: 'estimated_amount', + value: , }, ]} /> diff --git a/src/screens/wallet/screen/walletScreen.js b/src/screens/wallet/screen/walletScreen.js index 4e962d327..db807a951 100644 --- a/src/screens/wallet/screen/walletScreen.js +++ b/src/screens/wallet/screen/walletScreen.js @@ -18,8 +18,9 @@ const WalletScreen = () => { const [selectedUserActivities, setSelectedUserActivities] = useState(null); const [selectedType, setSelectedType] = useState('points'); const [currentIndex, setCurrentIndex] = useState(0); + const [refreshing, setRefreshing] = useState(false); - const _handleSwipeItemChange = (userActivities, type) => { + const _handleSwipeItemChange = (userActivities, type, xx) => { setSelectedUserActivities(userActivities); setSelectedType(type); }; @@ -40,21 +41,29 @@ const WalletScreen = () => { - + )} diff --git a/src/utils/vote.js b/src/utils/vote.js new file mode 100644 index 000000000..8f36d10f4 --- /dev/null +++ b/src/utils/vote.js @@ -0,0 +1,16 @@ +import parseToken from './parseToken'; +import get from 'lodash/get'; +import { vestsToRshares } from './conversions'; + +export const getEstimatedAmount = (account, globalProps, value = 100) => { + const { fundRecentClaims, fundRewardBalance, base, quote } = globalProps; + const votingPower = account.voting_power; + const totalVests = + parseToken(get(account, 'vesting_shares')) + + parseToken(get(account, 'received_vesting_shares')) - + parseToken(get(account, 'delegated_vesting_shares')); + const votePct = value * 10000; + const rShares = vestsToRshares(totalVests, votingPower, votePct); + + return ((rShares / fundRecentClaims) * fundRewardBalance * (base / quote)).toFixed(5); +}; From 07ceb2ba72340bde527d6e23db452e45a152e8ab Mon Sep 17 00:00:00 2001 From: ue Date: Tue, 26 Nov 2019 22:40:25 +0300 Subject: [PATCH 13/14] created filter for transfer --- src/components/transaction/transactionView.js | 6 +++--- src/components/walletHeader/view/walletHeaderView.js | 6 ------ src/containers/steemWalletContainer.js | 12 ++++++++++-- src/screens/wallet/screen/estmView.js | 2 +- src/screens/wallet/screen/spView.js | 2 +- src/screens/wallet/screen/steemView.js | 5 ++--- src/screens/wallet/screen/walletScreen.js | 7 ++++--- 7 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/transaction/transactionView.js b/src/components/transaction/transactionView.js index 7e24fdec6..ceaf912cc 100644 --- a/src/components/transaction/transactionView.js +++ b/src/components/transaction/transactionView.js @@ -15,16 +15,16 @@ import { ThemeContainer } from '../../containers'; import globalStyles from '../../globalStyles'; -const TransactionView = ({ transactions, type, refreshing, setRefreshing }) => { +const TransactionView = ({ transactions, type, refreshing, setRefreshing, isLoading }) => { const intl = useIntl(); const _renderLoading = () => { - if (isEmpty(transactions)) { + if (isLoading) { return ; } return ( - {intl.formatMessage({ id: 'wallet.no_activity' })} + {intl.formatMessage({ id: 'wallet.no_activity' })} ); }; diff --git a/src/components/walletHeader/view/walletHeaderView.js b/src/components/walletHeader/view/walletHeaderView.js index cb01afcd0..338337129 100644 --- a/src/components/walletHeader/view/walletHeaderView.js +++ b/src/components/walletHeader/view/walletHeaderView.js @@ -17,12 +17,8 @@ import { default as ROUTES } from '../../../constants/routeNames'; import styles from './walletHeaderStyles'; const WalletHeaderView = ({ - fetchUserActivity, - refreshing, - isLoading, claim, isClaiming, - userActivities, handleOnDropdownSelected, navigation, unclaimedBalance, @@ -31,8 +27,6 @@ const WalletHeaderView = ({ componentDidUpdate, showIconList, currentIndex, - userSecondBalance, - secondBalanceName, valueDescriptions, showBuyButton, index, diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index d25caa77f..5dc17594e 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -42,7 +42,7 @@ const WalletContainer = ({ const [isLoading, setIsLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const [walletData, setWalletData] = useState(null); - const [userActivities, setUserActivities] = useState(null); + const [userActivities, setUserActivities] = useState([]); const [sbdBalance, setSbdBalance] = useState(0); const [steemBalance, setSteemBalance] = useState(0); const [spBalance, setSpBalance] = useState(0); @@ -50,6 +50,7 @@ const WalletContainer = ({ const [estimatedValue, setEstimatedValue] = useState(0); const [unclaimedBalance, setUnclaimedBalance] = useState(''); const [estimatedAmount, setEstimatedAmount] = useState(0); + const [transferHistory, setTransferHistory] = useState([]); const intl = useIntl(); const dispatch = useDispatch(); @@ -66,6 +67,12 @@ const WalletContainer = ({ }, [_getWalletData, selectedUser]); useEffect(() => { + setTransferHistory( + userActivities.filter( + item => + get(item, 'textKey') === 'transfer' || get(item, 'textKey') === 'transfer_to_vesting', + ), + ); setSbdBalance(Math.round(get(walletData, 'sbdBalance', 0) * 1000) / 1000); setSteemBalance(Math.round(get(walletData, 'balance', 0) * 1000) / 1000); setSteemSavingBalance(Math.round(get(walletData, 'savingBalance', 0) * 1000) / 1000); @@ -92,7 +99,7 @@ const WalletContainer = ({ : '' }`, ); - }, [walletData]); + }, [userActivities, walletData]); // Components functions @@ -240,6 +247,7 @@ const WalletContainer = ({ walletData, steemPerMVests, userActivities, + transferHistory, steemBalance, spBalance, sbdBalance, diff --git a/src/screens/wallet/screen/estmView.js b/src/screens/wallet/screen/estmView.js index 3ae13a683..51e5713b9 100644 --- a/src/screens/wallet/screen/estmView.js +++ b/src/screens/wallet/screen/estmView.js @@ -22,7 +22,7 @@ const EstmView = ({ handleOnSelected, index, currentIndex }) => ( dropdownOptions, }) => ( handleOnSelected(userActivities, 'estm', fetchUserActivity)} + componentDidUpdate={() => handleOnSelected(userActivities, isLoading, fetchUserActivity)} index={index} showIconList claim={claim} diff --git a/src/screens/wallet/screen/spView.js b/src/screens/wallet/screen/spView.js index 7b17951bc..c5fb32607 100644 --- a/src/screens/wallet/screen/spView.js +++ b/src/screens/wallet/screen/spView.js @@ -26,7 +26,7 @@ const SpView = ({ handleOnSelected, index, currentIndex }) => ( estimatedAmount, }) => ( handleOnSelected(userActivities, 'steem_power')} + componentDidUpdate={() => handleOnSelected(userActivities, isLoading)} index={index} claim={claimRewardBalance} fetchUserActivity={handleOnWalletRefresh} diff --git a/src/screens/wallet/screen/steemView.js b/src/screens/wallet/screen/steemView.js index ae9e4b3e8..482e3cc79 100644 --- a/src/screens/wallet/screen/steemView.js +++ b/src/screens/wallet/screen/steemView.js @@ -16,7 +16,7 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( claimRewardBalance, handleOnWalletRefresh, refreshing, - userActivities, + transferHistory, steemBalance, isLoading, steemSavingBalance, @@ -26,14 +26,13 @@ const SteeemView = ({ handleOnSelected, index, currentIndex }) => ( navigate, }) => ( handleOnSelected(userActivities, 'steem')} + componentDidUpdate={() => handleOnSelected(transferHistory, isLoading)} index={index} claim={claimRewardBalance} fetchUserActivity={handleOnWalletRefresh} isClaiming={isClaiming} isLoading={isLoading} refreshing={refreshing} - userActivities={userActivities} unclaimedBalance={0} userBalance={[ { balance: steemBalance, nameKey: 'steem', options: steemDropdown }, diff --git a/src/screens/wallet/screen/walletScreen.js b/src/screens/wallet/screen/walletScreen.js index db807a951..f543c73f7 100644 --- a/src/screens/wallet/screen/walletScreen.js +++ b/src/screens/wallet/screen/walletScreen.js @@ -16,13 +16,13 @@ import globalStyles from '../../../globalStyles'; const WalletScreen = () => { const [selectedUserActivities, setSelectedUserActivities] = useState(null); - const [selectedType, setSelectedType] = useState('points'); + const [isLoading, setIsLoading] = useState('points'); const [currentIndex, setCurrentIndex] = useState(0); const [refreshing, setRefreshing] = useState(false); - const _handleSwipeItemChange = (userActivities, type, xx) => { + const _handleSwipeItemChange = (userActivities, _isLoading) => { setSelectedUserActivities(userActivities); - setSelectedType(type); + setIsLoading(_isLoading); }; return ( @@ -63,6 +63,7 @@ const WalletScreen = () => { transactions={selectedUserActivities} refreshing={refreshing} setRefreshing={setRefreshing} + isLoading={isLoading} /> )} From c99a504601c233b2613fe4ea4d10372d33c85188 Mon Sep 17 00:00:00 2001 From: ue Date: Wed, 27 Nov 2019 22:31:28 +0300 Subject: [PATCH 14/14] latest touches && horizontal icon list with popover seperated && added hint icon --- .../walletLineItem/walletLineItemStyles.js | 9 +++ .../view/walletLineItem/walletLineItemView.js | 17 +++-- .../horizontalIconListStyles.js | 27 +------- .../horizontalIconListView.js | 67 ++++++------------- src/components/index.js | 2 + .../popoverWrapper/popoverWrapperStyles.js | 27 ++++++++ .../popoverWrapper/popoverWrapperView.js | 35 ++++++++++ src/components/transaction/transactionView.js | 4 +- src/components/wallet/view/walletView.js | 7 +- .../walletHeader/view/walletHeaderStyles.js | 2 +- .../walletHeader/view/walletHeaderView.js | 7 +- src/config/locales/en-US.json | 2 +- src/containers/steemWalletContainer.js | 9 ++- src/globalStyles.js | 3 + src/screens/wallet/screen/walletScreen.js | 3 +- 15 files changed, 127 insertions(+), 94 deletions(-) create mode 100644 src/components/popoverWrapper/popoverWrapperStyles.js create mode 100644 src/components/popoverWrapper/popoverWrapperView.js diff --git a/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js b/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js index 3f0bdb43e..a8a456c9d 100644 --- a/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js +++ b/src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js @@ -9,6 +9,9 @@ export default EStyleSheet.create({ fitContent: { marginVertical: 0, }, + textWrapper: { + flexDirection: 'row', + }, iconTextWrapper: { flexDirection: 'row', alignSelf: 'center', @@ -35,6 +38,7 @@ export default EStyleSheet.create({ text: { fontFamily: '$primaryFont', color: '$primaryBlack', + alignSelf: 'center', fontSize: 16, marginLeft: 8, }, @@ -85,4 +89,9 @@ export default EStyleSheet.create({ dropdownStyle: { minWidth: '$deviceWidth * 0.7', }, + hintIcon: { + marginLeft: 10, + justifyContent: 'center', + alignItems: 'center', + }, }); diff --git a/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js b/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js index 751b39466..1a71f3895 100644 --- a/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js +++ b/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js @@ -2,9 +2,7 @@ import React from 'react'; import { View, Text } from 'react-native'; // Components -import GrayWrapper from '../grayWrapper/grayWrapperView'; -import { Icon } from '../../../icon'; -import { DropdownButton } from '../../../dropdownButton'; +import { DropdownButton, PopoverWrapper, Icon, GrayWrapper } from '../../..'; // Styles import styles from './walletLineItemStyles'; @@ -27,6 +25,8 @@ const WalletLineItem = ({ isHasdropdown, dropdownOptions, onDropdownSelect, + hintIconName, + hintDescription, }) => ( @@ -44,7 +44,7 @@ const WalletLineItem = ({ )} {!!text && ( - + {text} + {!!hintIconName && ( + + + + )} )} {!!description && ( diff --git a/src/components/horizontalIconList/horizontalIconListStyles.js b/src/components/horizontalIconList/horizontalIconListStyles.js index 266a98f81..46dfd6970 100644 --- a/src/components/horizontalIconList/horizontalIconListStyles.js +++ b/src/components/horizontalIconList/horizontalIconListStyles.js @@ -2,8 +2,8 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ iconsWrapper: { - marginVertical: 24, - marginHorizontal: 32, + marginVertical: 10, + marginHorizontal: 0, justifyContent: 'center', alignSelf: 'center', flexDirection: 'row', @@ -52,27 +52,4 @@ export default EStyleSheet.create({ color: '$white', fontWeight: '600', }, - popoverDetails: { - flexDirection: 'row', - height: 130, - width: '$deviceWidth / 2', - borderRadius: 20, - paddingHorizontal: 26, - backgroundColor: '$primaryBackgroundColor', - }, - arrow: { - borderTopColor: '$primaryBackgroundColor', - }, - popoverWrapper: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - overlay: { - backgroundColor: '#403c4449', - }, - popoverText: { - color: '$primaryDarkText', - }, }); diff --git a/src/components/horizontalIconList/horizontalIconListView.js b/src/components/horizontalIconList/horizontalIconListView.js index a1bdc3e21..2dcfa3176 100644 --- a/src/components/horizontalIconList/horizontalIconListView.js +++ b/src/components/horizontalIconList/horizontalIconListView.js @@ -1,12 +1,11 @@ import React from 'react'; import { useIntl } from 'react-intl'; -import { View, FlatList, TouchableOpacity, Text } from 'react-native'; -import { Popover, PopoverController } from 'react-native-modal-popover'; +import { View, FlatList, Text } from 'react-native'; import get from 'lodash/get'; import styles from './horizontalIconListStyles'; -import { IconButton } from '..'; +import { IconButton, PopoverWrapper } from '..'; const HorizontalIconList = ({ options, optionsKeys }) => { const intl = useIntl(); @@ -30,51 +29,25 @@ const HorizontalIconList = ({ options, optionsKeys }) => { keyExtractor={item => get(item, 'type', Math.random()).toString()} horizontal renderItem={({ item }) => ( - - {({ - openPopover, - closePopover, - popoverVisible, - setPopoverAnchor, - popoverAnchorRect, - }) => ( - - - - - - - - {_getTranslation(get(options[get(item, 'type')], 'nameKey'))} - - closePopover()} - fromRect={popoverAnchorRect} - placement="top" - supportedOrientations={['portrait', 'landscape']} - > - - - {_getTranslation(get(options[get(item, 'type')], 'descriptionKey'))} - - - + + + + - )} - + + {_getTranslation(get(options[get(item, 'type')], 'nameKey'))} + + + )} /> diff --git a/src/components/index.js b/src/components/index.js index 818bed0ff..a4002f7c9 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -52,6 +52,7 @@ import ProfileEditForm from './profileEditForm/profileEditFormView'; import ScaleSlider from './scaleSlider/scaleSliderView'; import { ProductItemLine } from './productItemLine/productItemLineView'; import { HorizontalIconList } from './horizontalIconList/horizontalIconListView'; +import { PopoverWrapper } from './popoverWrapper/popoverWrapperView'; // View import { Comment } from './comment'; @@ -189,4 +190,5 @@ export { WalletLineItem, WalletUnclaimedPlaceHolder, HorizontalIconList, + PopoverWrapper, }; diff --git a/src/components/popoverWrapper/popoverWrapperStyles.js b/src/components/popoverWrapper/popoverWrapperStyles.js new file mode 100644 index 000000000..6c775cdf6 --- /dev/null +++ b/src/components/popoverWrapper/popoverWrapperStyles.js @@ -0,0 +1,27 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + popoverDetails: { + flexDirection: 'row', + height: 130, + width: '$deviceWidth / 2', + borderRadius: 20, + paddingHorizontal: 26, + backgroundColor: '$primaryBackgroundColor', + }, + arrow: { + borderTopColor: '$primaryBackgroundColor', + }, + popoverWrapper: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + overlay: { + backgroundColor: '#403c4449', + }, + popoverText: { + color: '$primaryDarkText', + }, +}); diff --git a/src/components/popoverWrapper/popoverWrapperView.js b/src/components/popoverWrapper/popoverWrapperView.js new file mode 100644 index 000000000..81a1b56fc --- /dev/null +++ b/src/components/popoverWrapper/popoverWrapperView.js @@ -0,0 +1,35 @@ +import React, { Fragment } from 'react'; +import { View, Text, TouchableOpacity } from 'react-native'; +import { Popover, PopoverController } from 'react-native-modal-popover'; + +import styles from './popoverWrapperStyles'; + +const PopoverWrapper = ({ children, text }) => { + return ( + + {({ openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect }) => ( + + + {children} + + closePopover()} + fromRect={popoverAnchorRect} + placement="top" + supportedOrientations={['portrait', 'landscape']} + > + + {text} + + + + )} + + ); +}; + +export { PopoverWrapper }; diff --git a/src/components/transaction/transactionView.js b/src/components/transaction/transactionView.js index ceaf912cc..968acded5 100644 --- a/src/components/transaction/transactionView.js +++ b/src/components/transaction/transactionView.js @@ -3,7 +3,6 @@ import React from 'react'; import { useIntl } from 'react-intl'; import { View, Text, FlatList, RefreshControl } from 'react-native'; import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; // Utilities import { getTimeFromNow } from '../../utils/time'; @@ -24,7 +23,7 @@ const TransactionView = ({ transactions, type, refreshing, setRefreshing, isLoad } return ( - {intl.formatMessage({ id: 'wallet.no_activity' })} + {intl.formatMessage({ id: 'wallet.no_activity' })} ); }; @@ -84,6 +83,7 @@ const TransactionView = ({ transactions, type, refreshing, setRefreshing, isLoad ( @@ -115,7 +114,11 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) = /> - + )} diff --git a/src/components/walletHeader/view/walletHeaderStyles.js b/src/components/walletHeader/view/walletHeaderStyles.js index 08e53c717..f6a7887a2 100644 --- a/src/components/walletHeader/view/walletHeaderStyles.js +++ b/src/components/walletHeader/view/walletHeaderStyles.js @@ -65,7 +65,7 @@ export default EStyleSheet.create({ height: 24, }, scrollContainer: { - flex: 1, + flex: 0.935, width: '100%', backgroundColor: '$primaryBackgroundColor', }, diff --git a/src/components/walletHeader/view/walletHeaderView.js b/src/components/walletHeader/view/walletHeaderView.js index 338337129..8d099bfdb 100644 --- a/src/components/walletHeader/view/walletHeaderView.js +++ b/src/components/walletHeader/view/walletHeaderView.js @@ -6,7 +6,6 @@ import { withNavigation } from 'react-navigation'; import get from 'lodash/get'; // Components -import { LineBreak } from '../../basicUIElements'; import { Icon, MainButton, DropdownButton, HorizontalIconList, WalletLineItem } from '../..'; // Constants @@ -40,7 +39,6 @@ const WalletHeaderView = ({ } }, [componentDidUpdate, currentIndex, index]); - // onPress={() => dropdownRef.current.show()} const _getBalanceItem = (balance, options, key) => balance !== undefined && ( @@ -64,7 +62,6 @@ const WalletHeaderView = ({ return ( - {userBalance.map(item => _getBalanceItem( @@ -95,18 +92,18 @@ const WalletHeaderView = ({ )} - {/* {valueDescriptions && } */} {valueDescriptions && valueDescriptions.map(item => ( diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index cb4f6a374..518b81d13 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -43,7 +43,7 @@ "dropdown_boost": "Boost", "from": "From", "to": "To", - "estimated_value_desc": "*determined by purchase value", + "estimated_value_desc": "Determined by purchase value", "estimated_value": "Estimated value", "estimated_amount": "Vote value", "amount_information": "Drag the slider to adjust the amount", diff --git a/src/containers/steemWalletContainer.js b/src/containers/steemWalletContainer.js index 5dc17594e..ef3cb84a6 100644 --- a/src/containers/steemWalletContainer.js +++ b/src/containers/steemWalletContainer.js @@ -67,12 +67,11 @@ const WalletContainer = ({ }, [_getWalletData, selectedUser]); useEffect(() => { - setTransferHistory( - userActivities.filter( - item => - get(item, 'textKey') === 'transfer' || get(item, 'textKey') === 'transfer_to_vesting', - ), + const _transferHistory = userActivities.filter( + item => get(item, 'textKey') === 'transfer' || get(item, 'textKey') === 'transfer_to_vesting', ); + + setTransferHistory(_transferHistory); setSbdBalance(Math.round(get(walletData, 'sbdBalance', 0) * 1000) / 1000); setSteemBalance(Math.round(get(walletData, 'balance', 0) * 1000) / 1000); setSteemSavingBalance(Math.round(get(walletData, 'savingBalance', 0) * 1000) / 1000); diff --git a/src/globalStyles.js b/src/globalStyles.js index 4782c0f7e..781f8a9fd 100644 --- a/src/globalStyles.js +++ b/src/globalStyles.js @@ -76,4 +76,7 @@ export default EStyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, + tabBarBottom: { + marginBottom: 60, + }, }); diff --git a/src/screens/wallet/screen/walletScreen.js b/src/screens/wallet/screen/walletScreen.js index f543c73f7..bb71a9f0d 100644 --- a/src/screens/wallet/screen/walletScreen.js +++ b/src/screens/wallet/screen/walletScreen.js @@ -1,6 +1,6 @@ import React, { Fragment, useState } from 'react'; import Swiper from 'react-native-swiper'; -import { SafeAreaView } from 'react-native'; +import { SafeAreaView, View } from 'react-native'; // Containers import { LoggedInContainer } from '../../../containers'; @@ -57,7 +57,6 @@ const WalletScreen = () => { currentIndex={currentIndex} /> -