update code

src/Screens/Tool/CaculatedStopLoss.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {Component, useState} from 'react';
+import {
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  TouchableWithoutFeedback,
+  ScrollView,
+  Keyboard,
+  Platform,
+} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+import PickerItem from '../../components/Picker/PickerItem';
+import I18n from '../../helper/i18/i18n';
+import AppText from '../../components/AppText';
+import TextField from '../../components/Input/TextField';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import R from '../../assets/R';
+import RadioForm, {
+  RadioButton,
+  RadioButtonInput,
+  RadioButtonLabel,
+} from 'react-native-simple-radio-button';
+
+var radio_props = [
+  {label: 'Mua', value: 0},
+  {label: 'Bán', value: 1},
+];
+
+const dataType = [
+  {
+    value: '0',
+    name: 'Ngô mini',
+  },
+  {
+    value: '1',
+    name: 'Đỗ mini',
+  },
+];
+
+const {width} = Dimensions.get('window');
 
 const CaculatedStopLoss = (props) => {
+  const [product, setProduct] = useState();
+  const [type, setType] = useState('BUY');
+  const [lot, setLot] = useState('BUY');
+  const [priceOpen, setPriceOpen] = useState(525);
+  const [fee, setFee] = useState(0);
+  const [surplus, setSurplus] = useState(0);
+
+  const [inSession, setInSession] = useState(0);
+  const [priceClose, setPriceClose] = useState(525);
+
   return (
-    <View>
-      <Text>CaculatedStopLoss</Text>
+    <View style={{flex: 1}}>
+      <HeaderBack title={'CaculatedStopLoss'} />
+      <KeyboardAvoidingView
+        behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+        style={{flex: 1}}
+        keyboardVerticalOffset={-50}>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 5}}>
+              <AppText style={styles.txtTitle} i18nKey={'Product'} />
+              <PickerItem
+                width={width - 20}
+                data={dataType}
+                onValueChange={(value, items) => {
+                  setProduct(items);
+                }}
+              />
+
+              <AppText style={styles.txtTitle} i18nKey={'Tradding'} />
+              <RadioForm
+                formHorizontal={true}
+                labelHorizontal={true}
+                radio_props={radio_props}
+                style={styles.row}
+                initial={0}
+                onPress={(value) => {
+                  console.log({value: value});
+                }}
+              />
+              <TextField title={I18n.t('CountLotTradding')} />
+              <TextField title={I18n.t('PriceOpen')} />
+              <TextField title={I18n.t('FeeTradding')} />
+              <TextField title={I18n.t('SurpusInit')} />
+              <TextField title={I18n.t('withdrawalsSession')} />
+              <TextField title={I18n.t('PriceClose')} />
+              <TextField title={I18n.t('PriceStopLoss')} />
+              <AppText style={styles.note} i18nKey={'noteStopLoss'} />
+              <View style={styles.footer}>
+                <TouchableOpacity style={styles.btnContainer}>
+                  <AppText style={styles.txtBtn} i18nKey={'Caculate'} />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </ScrollView>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginTop: 15,
+  },
+  note: {
+    fontSize: getFontXD(36),
+    fontStyle: 'italic',
+    marginTop: 10,
+  },
+  row: {
+    height: HEIGHTXD(109),
+    width: '80%',
+    justifyContent: 'space-between',
+    marginVertical: 5,
+    paddingHorizontal: 10,
+  },
+  footer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 20,
+  },
+  btnContainer: {
+    width: WIDTHXD(428),
+    height: HEIGHTXD(120),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.main,
+    borderRadius: 10,
+  },
+  txtBtn: {
+    fontSize: getFontXD(48),
+    color: R.colors.white,
+    fontWeight: '600',
+  },
+});
+
 export default CaculatedStopLoss;

src/Screens/Tool/ConvertUnit.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {Component, useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+
+import PickerItem from '../../components/Picker/PickerItem';
+import I18n from '../../helper/i18/i18n';
+import AppText from '../../components/AppText';
+import TextField from '../../components/Input/TextField';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import R from '../../assets/R';
+
+const dataType = [
+  {
+    value: '0',
+    name: 'KG',
+  },
+  {
+    value: '1',
+    name: 'Pound',
+  },
+];
 
 const ConvertUnit = (props) => {
+  const [product, setProduct] = useState();
   return (
-    <View>
-      <Text>ConvertUnit</Text>
+    <View style={{flex: 1}}>
+      <HeaderBack title={'ConvertUnit'} />
+      <View style={{flex: 1, paddingTop: 20, paddingHorizontal: 20}}>
+        <AppText style={styles.txtTitle} i18nKey={'ConversionUnit'} />
+        <View style={styles.Item}>
+          <View style={styles.wrap}>
+            <PickerItem
+              width={WIDTHXD(431)}
+              data={dataType}
+              onValueChange={(value, items) => {
+                setProduct(items);
+              }}
+            />
+            <TextInput keyboardType={'number-pad'} style={styles.wrapInput} />
+          </View>
+          <Text style={styles.txtNote}>1KG = 2 Pount</Text>
+        </View>
+
+        <View style={styles.Item}>
+          <View style={styles.wrap}>
+            <PickerItem
+              width={WIDTHXD(431)}
+              data={dataType}
+              onValueChange={(value, items) => {
+                setProduct(items);
+              }}
+            />
+            <TextInput keyboardType={'number-pad'} style={styles.wrapInput} />
+          </View>
+          <Text style={styles.txtNote}>1 Pount = 0.5 KG</Text>
+        </View>
+
+        <View style={styles.footer}>
+          <TouchableOpacity style={styles.btnContainer}>
+            <AppText style={styles.txtBtn} i18nKey={'Caculate'} />
+          </TouchableOpacity>
+        </View>
+      </View>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginTop: 15,
+  },
+  note: {
+    fontSize: getFontXD(36),
+    fontStyle: 'italic',
+    marginTop: 10,
+  },
+  row: {
+    height: HEIGHTXD(109),
+    width: '80%',
+    justifyContent: 'space-between',
+    marginVertical: 5,
+    paddingHorizontal: 10,
+  },
+  footer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 20,
+  },
+  btnContainer: {
+    width: WIDTHXD(428),
+    height: HEIGHTXD(120),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.main,
+    borderRadius: 10,
+  },
+  txtBtn: {
+    fontSize: getFontXD(48),
+    color: R.colors.white,
+    fontWeight: '600',
+  },
+  wrapInput: {
+    width: WIDTHXD(431),
+    backgroundColor: R.colors.white,
+    height: HEIGHTXD(109),
+    fontSize: getFontXD(42),
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+    elevation: 2,
+  },
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  Item: {
+    marginBottom: 20,
+  },
+  txtNote: {
+    fontSize: getFontXD(36),
+    textAlign: 'right',
+    marginTop: 10,
+  },
+});
 export default ConvertUnit;

src/Screens/Tool/ExchangeRate.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {Component, useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+const {width} = Dimensions.get('window');
+import PickerItem from '../../components/Picker/PickerItem';
+import I18n from '../../helper/i18/i18n';
+import AppText from '../../components/AppText';
+import TextField from '../../components/Input/TextField';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import R from '../../assets/R';
+
+const dataType = [
+  {
+    value: '0',
+    name: 'KG',
+  },
+  {
+    value: '1',
+    name: 'Pound',
+  },
+];
 
 const ExchangeRate = (props) => {
+  const [product, setProduct] = useState();
   return (
-    <View>
-      <Text>ExchangeRate</Text>
+    <View style={{flex: 1}}>
+      <HeaderBack title={'ConvertUnit'} />
+      <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
+        <AppText style={styles.txtTitle} i18nKey={'Product'} />
+        <PickerItem
+          width={width - 20}
+          data={dataType}
+          onValueChange={(value, items) => {
+            setProduct(items);
+          }}
+        />
+        <TextField title={I18n.t('UnitsQuotedFloor')} />
+        <TextField title={I18n.t('ConversionPrice')} />
+        <TextField title={I18n.t('ConvertUSD')} />
+
+        <View style={styles.footer}>
+          <TouchableOpacity style={styles.btnContainer}>
+            <AppText style={styles.txtBtn} i18nKey={'Delete'} />
+          </TouchableOpacity>
+        </View>
+      </View>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginTop: 15,
+  },
+  note: {
+    fontSize: getFontXD(36),
+    fontStyle: 'italic',
+    marginTop: 10,
+  },
+  row: {
+    height: HEIGHTXD(109),
+    width: '80%',
+    justifyContent: 'space-between',
+    marginVertical: 5,
+    paddingHorizontal: 10,
+  },
+  footer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 30,
+  },
+  btnContainer: {
+    width: WIDTHXD(428),
+    height: HEIGHTXD(120),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.red2,
+    borderRadius: 10,
+  },
+  txtBtn: {
+    fontSize: getFontXD(48),
+    color: R.colors.white,
+    fontWeight: '600',
+  },
+  wrapInput: {
+    width: WIDTHXD(431),
+    backgroundColor: R.colors.white,
+    height: HEIGHTXD(109),
+    fontSize: getFontXD(42),
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+    elevation: 2,
+  },
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  Item: {
+    marginBottom: 20,
+  },
+  txtNote: {
+    fontSize: getFontXD(36),
+    textAlign: 'right',
+    marginTop: 10,
+  },
+});
 export default ExchangeRate;

src/helper/i18/locales/en.js

@@ -238,4 +238,22 @@ export default {
   CaculatedStopLoss: 'Caculated stop loss',
   ConvertUnit: 'Convert unit',
   ExchangeRate: 'Exchange rate',
+
+  Product: 'Product',
+  CountLotTradding: 'Count lot rradding',
+  PriceOpen: 'Price open',
+  FeeTradding: 'Fee tradding',
+  SurpusInit: 'Surpus init',
+  withdrawalsSession: 'Withdrawals in session',
+  PriceClose: 'Price close',
+  PriceStopLoss: 'Price stop loss',
+  noteStopLoss:
+    '(estimated according to the current state processing rate of MXV)',
+  Caculate: 'Caculate',
+  ConversionUnit: 'Conversion unit',
+  Delete: 'Delete',
+
+  UnitsQuotedFloor: 'Units quoted in the floor',
+  ConversionPrice: 'Conversion price',
+  ConvertUSD: 'Convert USD/Ton',
 };

src/helper/i18/locales/vn.js

@@ -239,4 +239,20 @@ export default {
   CaculatedStopLoss: 'Tính giá cắt lỗ',
   ConvertUnit: 'Chuyển đổi đơn vị',
   ExchangeRate: 'Quy đổi tỷ giá',
+
+  Product: 'Mặt hàng',
+  CountLotTradding: 'Số lot giao dịch',
+  PriceOpen: 'Giá mở bán',
+  FeeTradding: 'Phí giao dịch',
+  SurpusInit: 'Số dư ban đầu',
+  withdrawalsSession: 'Nộp/rút trong phiên',
+  PriceClose: 'Giá đóng trạng thái',
+  PriceStopLoss: 'Giá cắt lỗ',
+  noteStopLoss: 'Ước tính theo tỷ lệ xử lý trạng thái hiện tại của MXV',
+  Caculate: 'Tính',
+  ConversionUnit: 'Đơn vị quy đổi',
+  Delete: 'Xoá',
+  UnitsQuotedFloor: 'Đơn vị yết giá trên sàn',
+  ConversionPrice: 'Giá quy đổi',
+  ConvertUSD: 'Quy đổi  USD/Tấn',
 };