wip

src/config/locales/en-US.json

@@ -619,7 +619,6 @@
     "percent_information": "Percent info",
     "next": "NEXT",
     "delegate": "Delegate",
-    "power_down": "Power Down",
     "withdraw_hive": "Withdraw HIVE",
     "withdraw_hbd": "Withdraw HIVE Dollar",
     "incoming_funds": "Incoming Funds",
@@ -638,7 +637,10 @@
     "confirm_summary": "Delegate {hp} HP ({vests} VESTS) To @{delegator} from @{delegatee} ",
     "confirm_summary_para": "This will overwrite your previous delegation of {prev} HP to this user.",
     "username_alert": "Username Error!",
-    "username_alert_detail": "Please select different username"
+    "username_alert_detail": "Please select different username",
+    "power_down": "Power Down",
+    "power_down_amount_head": "withdraw amount",
+    "power_down_amount_subhead": "power down info here"
   },
   "boost": {
     "title": "Get Points",

src/screens/transfer/screen/powerDownScreen.js

@@ -5,6 +5,7 @@ import { injectIntl } from 'react-intl';
 import Slider from '@esteemapp/react-native-slider';
 import get from 'lodash/get';
 
+import { View as AnimatedView } from 'react-native-animatable';
 import { getWithdrawRoutes } from '../../../providers/hive/dhive';
 import AUTH_TYPE from '../../../constants/authType';
 
@@ -19,6 +20,7 @@ import {
   Icon,
   IconButton,
   BeneficiarySelectionContent,
+  TextInput,
 } from '../../../components';
 import WithdrawAccountModal from './withdrawAccountModal';
 
@@ -51,6 +53,7 @@ class PowerDownView extends Component {
 
     this.startActionSheet = React.createRef();
     this.stopActionSheet = React.createRef();
+    this.amountTextInput = React.createRef();
   }
 
   // Component Functions
@@ -90,6 +93,11 @@ class PowerDownView extends Component {
     }
   };
 
+  _handleAmountChange = ({ value, availableVestingShares }) => {
+    this.setState({ amount: value });
+  };
+
+  // renderers
   _renderDropdown = (accounts, currentAccountName) => (
     <DropdownButton
       dropdownButtonStyle={styles.dropdownButtonStyle}
@@ -209,6 +217,26 @@ class PowerDownView extends Component {
     );
   };
 
+  _renderAmountInput = (placeholder, availableVestingShares) => {
+    const { isAmountValid } = this.state;
+    return (
+      <TextInput
+        style={[styles.amountInput, !isAmountValid && styles.error]}
+        onChangeText={(value) => {
+          this._handleAmountChange({ value, availableVestingShares });
+        }}
+        value={this.state.amount}
+        placeholder={placeholder}
+        placeholderTextColor="#c1c5c7"
+        autoCapitalize="none"
+        multiline={false}
+        keyboardType="decimal-pad"
+        innerRef={this.amountTextInput}
+        blurOnSubmit={false}
+      />
+    );
+  };
+
   _handleSetDisableDone = (value) => {
     this.setState({ disableDone: value });
   };
@@ -282,12 +310,41 @@ class PowerDownView extends Component {
 
     console.log('this.state : ', this.state);
 
+    const _renderMiddleContent = () => {
+      const { intl } = this.props;
+      return (
+        <AnimatedView animation="bounceInRight" delay={500} useNativeDriver>
+          <View style={styles.stepTwoContainer}>
+            <Text style={styles.sectionHeading}>
+              {intl.formatMessage({ id: 'transfer.power_down_amount_head' })}
+            </Text>
+            <Text style={styles.sectionSubheading}>
+              {intl.formatMessage({ id: 'transfer.power_down_amount_subhead' })}
+            </Text>
+
+            <TransferFormItem
+              label={intl.formatMessage({ id: 'transfer.new_amount' })}
+              rightComponent={() =>
+                this._renderAmountInput(
+                  intl.formatMessage({ id: 'transfer.amount' }),
+                  availableVestingShares,
+                )
+              }
+              containerStyle={styles.paddBottom}
+            />
+            {/* {_renderSlider()} */}
+          </View>
+        </AnimatedView>
+      );
+    };
+
     return (
       <Fragment>
         <BasicHeader title={intl.formatMessage({ id: `transfer.${transferType}` })} />
         <View style={styles.container}>
-          <ScrollView style={styles.scroll} contentContainerStyle={{ flexGrow: 1 }}>
+          <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
             {this._renderBeneficiarySelectionContent()}
+            {_renderMiddleContent()}
             <View style={styles.middleContent}>
               {/* <TransferFormItem
                 label={intl.formatMessage({ id: 'transfer.from' })}

src/screens/transfer/screen/transferStyles.js

@@ -323,5 +323,15 @@ export default EStyleSheet.create({
   },
   beneficiaryContainer: {
     paddingHorizontal: 12,
+    zIndex: 2,
+    paddingVertical: 16,
+    borderRadius: 12,
+    backgroundColor: '$primaryLightBackground',
+  },
+  scrollContentContainer: {
+    flexGrow: 1,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: 'red',
   },
 });