converting string to hex in signing function + transactionmodal

App.js

@@ -15,7 +15,7 @@ import {
 import { createAppContainer, createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
 import Apps, {Foam, Fork, Mintbase, Test} from './src/Apps'
 import CameraScreen from './src/AliceCore/Screens/Camera';
-import Profile from './src/AliceCore/Screens/Profile';
+import Tokens from './src/AliceCore/Screens/Tokens';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 MapboxGL.setAccessToken('pk.eyJ1IjoibWFya3BlcmVpciIsImEiOiJjancwNDg4eWswNzk1NGJ0Z3V5OGtxZWltIn0.gZ7ev6fQETAFa4J9kao10w');
 //TODO: change API key on release to TestFlight
@@ -64,8 +64,8 @@ const AppTabNavigator = createMaterialTopTabNavigator({
       )
     }
   },
-  Profile: {
-    screen: Profile,
+  Tokens: {
+    screen: Tokens,
     navigationOptions: {
       tabBarLabel: 'Settings',
       tabBarIcon: ({ focused }) => (
@@ -86,8 +86,8 @@ const AppTabNavigator = createMaterialTopTabNavigator({
     }
   }
 }, {
-  initialRouteName: 'Profile',
-  order: ['Home', 'Apps', 'Profile', 'Activity'],
+  initialRouteName: 'Tokens',
+  order: ['Home', 'Apps', 'Tokens', 'Activity'],
   tabBarPosition: 'bottom',
   animationEnabled: true,
   tabBarOptions: {

EmbeddedView.js

@@ -10,6 +10,7 @@ export default class SimpleView extends React.Component{
     return (
       <View style={styles.container}>
         {this.props.children}
+        <Text>TEST</Text>
       </View>
     );
   }

src/AliceComponents/TransactionModal/CameraModal.js

@@ -0,0 +1,113 @@
+'use strict';
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native'
+import Modal from "react-native-modal";
+import Camera from "../../AliceSDK/Camera";
+import ReactNativeHaptic from 'react-native-haptic-feedback';
+import _ from "lodash";
+// const Web3 = require('web3');
+// const web3 = new Web3();
+// web3.setProvider(new web3.providers.HttpProvider('https://ropsten.infura.io/rqmgop6P5BDFqz6yfGla'));
+// const privKey = 'cf06f0b35515af10b5dfef470e3a1e743470bf9033d06f198b4e829cb2e7ef05';
+
+export default class CameraModal extends Component {
+  static propTypes = {
+    visible: PropTypes.bool,
+    modalControl: PropTypes.func
+  };
+
+  static defaultProps = {
+    screen: false
+  };
+
+  constructor(props) {
+    super(props);
+    this.camera = null;
+    this.state = {
+      exchangeRate: 0,
+      account: 'alpha',
+      visibleModal: null,
+      publicAddress: '',
+      txCount: 0,
+      balance: 0,
+      privKey: false,
+      pubKey: false,
+      mode: 'loading',
+      transaction: null,
+      result: null,
+      signedTx: null,
+      phoneUid: '',
+      showInput: false,
+      socketId: '',
+      cameraType: 'back',
+      flash: false,
+    };
+  }
+
+  // _signKey = async (msg, socketId) => {
+  //   // ReactNativeHaptic.generate('selection');
+  //   const account = await web3.eth.accounts.privateKeyToAccount(privKey)
+  //     .sign(msg);
+  //
+  //   console.log('PHONE ID: ', this.state.phoneUid);
+  //   fetch(`https://login.tenzorum.app/login/${socketId}/${this.state.phoneUid}/${msg}/${account.signature}`)
+  //     .then((res) => {
+  //       console.log('RES: ', res)
+  //     })
+  // };
+  //
+  _onBarcodeRead = (read) => {
+    if (read) {
+      console.log('READ PUBLIC ADDRESS', read.data)
+      this.props.addressScan(read.data)
+      this.props.modalControl();
+      // const dataArray = read.data.split('.');
+      // TouchID.authenticate('verify user')
+      //   .then(success => {
+      //     this._signKey(dataArray[0], dataArray[1]);
+      //     this.setState({socketId: dataArray[1]})
+      //   })
+      //   .catch(error => {
+      //     console.log('ERROR: ', error);
+      //   });
+    }
+  };
+
+  render () {
+    return (
+      <Modal style={{marginLeft: 90,width: 200, height: 200, borderRadius: 15, alignItems: 'center', justifyContent: 'center'}} isVisible={this.props.isVisible}>
+        <Camera style={{width: 200, height: 200, borderRadius: 15}}  type={this.state.cameraType} flashMode={this.state.flash ? Camera.Constants.FlashMode.torch : Camera.Constants.FlashMode.off}
+          // onBarCodeRead={_.debounce(this._onBarcodeRead, 2000, {
+          //   'leading': true,
+          //   'trailing': false
+          // })}
+          />
+        <TouchableOpacity onPress={this.props.modalControl} style={{width: 40, height: 40, marginTop: 10, borderRadius: 10, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center'}}>
+          <Text style={{color: 'white'}}>x</Text>
+        </TouchableOpacity>
+      </Modal>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+    modal: {
+      width: 250,
+      height: 250,
+      borderRadius: 15,
+      backgroundColor: 'white',
+      padding: 10,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    rectangleContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'transparent'
+    }
+  })
+
+

src/AliceComponents/TransactionModal/Input.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import {
+  AlertIOS,
+  AppRegistry,
+  Dimensions,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+
+let {height, width} = Dimensions.get('window');
+
+export default class Input extends Component {
+  constructor() {
+    super();
+    this.state = {
+      visibleModal: null
+    };
+  }
+
+  render() {
+    const {} = this.state;
+    const {onChangeText, _this, placeholder, keyboardType, autoCapitalize, value} = this.props;
+    return (
+      <View style={styles.inputContainer}>
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          keyboardAppearance='dark'
+          keyboardType={keyboardType}
+          placeholder={placeholder}
+          placeholderTextColor='grey'
+          style={styles.input}
+          selectionColor='grey'
+          autoCapitalize={autoCapitalize}
+          numberOfLines={1}
+        />
+      </View>
+    )
+  }
+}
+
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    width: '100%',
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: '#ccc',
+  },
+  input: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    // borderColor: '#ccc',
+    // borderWidth: 1,
+    // borderRadius: 10,
+    paddingLeft: 4,
+    overflow: 'hidden',
+    // shadowColor: 'rgba(0,0,0,0.5)',
+    // shadowRadius: 1,
+    // shadowOpacity: 1,
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 0
+    // },
+  },
+  inputStyle: {
+    marginLeft: 10,
+    backgroundColor: "transparent",
+    height: 35,
+    width: '100%',
+    padding: 5,
+    fontWeight: '900',
+    fontSize: 20,
+    color: '#333',
+  },
+  topNavText: {
+    fontFamily: 'DIN Condensed',
+    color: 'white',
+    fontSize: 16,
+  },
+});
+

src/AliceComponents/TransactionModal/QrModal.js

@@ -0,0 +1,56 @@
+'use strict';
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {
+  Clipboard,
+  StyleSheet,
+  Text,
+  TouchableOpacity
+} from 'react-native'
+import QRCode from 'react-native-qrcode-svg'
+import Modal from 'react-native-modal'
+
+export default class QrModal extends Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    isVisible: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    screen: false
+  };
+
+  render () {
+    return (
+      <Modal isVisible={this.props.isVisible} style={{marginLeft: 90, width: 200, height: 200, borderRadius: 15, alignItems: 'center', justifyContent: 'center'}}>
+        <TouchableOpacity onPress={() => Clipboard.setString(this.props.value)} style={styles.modal}>
+          <QRCode value={this.props.value || 'none'} style={{margin: 10}}/>
+          <Text style={{fontSize: 25, fontFamily: 'Menlo'}}>{this.props.value}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this.props.modalControl} style={{width: 40, height: 40, marginTop: 10, borderRadius: 10, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center'}}>
+          <Text style={{color: 'white'}}>x</Text>
+        </TouchableOpacity>
+      </Modal>
+
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    width: 250,
+    height: 350,
+    borderRadius: 15,
+    backgroundColor: 'white',
+    padding: 10,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rectangleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent'
+  }
+})