From d064ed60f6d91e5d000d6edb522a289160ea9fe1 Mon Sep 17 00:00:00 2001 From: ue Date: Mon, 25 Nov 2019 17:54:07 +0300 Subject: [PATCH] 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} /> +