added sp view

2024-12-20 11:51:52 +03:00 · 2019-11-25 17:54:07 +03:00 · 2019-11-25 17:54:07 +03:00 · d064ed60f6
commit d064ed60f6
parent b522106e1f
14 changed files with 167 additions and 41 deletions
--- 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,
--- a/src/components/points/index.js
+++ b/src/components/points/index.js
@ -1,3 +0,0 @@
-import Points from './view/pointsView';
-
-export { Points };
--- a/src/components/walletHeader/index.js
+++ b/src/components/walletHeader/index.js
@ -0,0 +1,3 @@
+import WalletHeader from './view/walletHeaderView';
+
+export { WalletHeader };
--- a/src/components/walletHeader/view/walletHeaderStyles.js
+++ b/src/components/walletHeader/view/walletHeaderStyles.js
--- a/src/components/walletHeader/view/walletHeaderView.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 && (
          <MainButton
            isLoading={isClaiming}
            isDisable={isClaiming}
@ -125,7 +125,7 @@ const PointsView = ({
  );
 };

-export default withNavigation(PointsView);
+export default withNavigation(WalletHeaderView);

 // const refreshControl = () => (
 //   <ThemeContainer>
--- 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",
--- 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);
--- a/src/globalStyles.js
+++ b/src/globalStyles.js
@ -7,6 +7,7 @@ export default EStyleSheet.create({
  },
  defaultContainer: {
    flex: 1,
+    backgroundColor: '$primaryLightBackground',
  },
  listWrapper: {
    paddingHorizontal: 8,
--- 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',
--- 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,
      }) => (
-        <Points
+        <WalletHeader
          componentDidUpdate={() => handleOnSelected(userActivities, 'estm')}
          index={index}
          showIconList
--- a/src/screens/wallet/screen/pointsStyles.js
+++ b/src/screens/wallet/screen/pointsStyles.js
@ -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',
-  },
-});
--- 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 }) => (
+  <View style={globalStyles.swipeItemWrapper}>
+    <AccountContainer>
+      {({ currentAccount }) => (
+        <SteemWalletContainer selectedUser={currentAccount}>
+          {({
+            isClaiming,
+            claimRewardBalance,
+            handleOnWalletRefresh,
+            refreshing,
+            userActivities,
+            spBalance,
+            isLoading,
+            steemSavingBalance,
+            estimatedValue,
+            steemPowerDropdown,
+            savingSteemDropdown,
+            unclaimedBalance,
+            navigate,
+          }) => (
+            <WalletHeader
+              componentDidUpdate={() => 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: <FormatedCurrency isApproximate value={estimatedValue} />,
+                },
+                {
+                  textKey: 'estimated_value',
+                  value: <FormatedCurrency isApproximate value={estimatedValue} />,
+                },
+              ]}
+            />
+          )}
+        </SteemWalletContainer>
+      )}
+    </AccountContainer>
+  </View>
+);
+
+export default SpView;
--- 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,
          }) => (
-            <Points
+            <WalletHeader
              componentDidUpdate={() => 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}
--- 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 (
    <Fragment>
      <Header />
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView style={globalStyles.defaultContainer}>
        <LoggedInContainer>
          {() => (
            <>
@ -46,6 +47,11 @@ const WalletScreen = () => {
                  handleOnSelected={_handleSwipeItemChange}
                  currentIndex={currentIndex}
                />
+                <SpView
+                  index={2}
+                  handleOnSelected={_handleSwipeItemChange}
+                  currentIndex={currentIndex}
+                />
              </Swiper>

              <Transaction type="wallet" transactions={selectedUserActivities} />