#40 #42 #45

src/components/Button/index.js

@@ -1,13 +1,31 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, Text } from 'react-native';
 import styles from './styles';
 
-let Button = ({ text, style, disabled, textStyle, ...restProps }) => {
+const Button = ({ text, style, disabled, textStyle, ...restProps }) => {
+  const buttonStyles = useMemo(
+    () => {
+      let stylesObject = {
+        ...styles.button,
+        ...style
+      };
+      if (disabled) {
+        stylesObject = {
+          ...stylesObject,
+          ...styles.disabled
+        }
+      }
+      return stylesObject;
+    },
+    [disabled, style]
+  );
+
   return (
     <TouchableOpacity
       rounded
-      style={{ ...styles.button, ...style }}
+      style={buttonStyles}
+      disabled={disabled}
       {...restProps}
     >
       <Text style={{ ...styles.buttonText, ...textStyle }}>{text}</Text>
@@ -18,12 +36,14 @@ let Button = ({ text, style, disabled, textStyle, ...restProps }) => {
 Button.defaultProps = {
   style: {},
   textStyle: {},
+  disabled: false
 };
 
 Button.propTypes = {
   text: PropTypes.string.isRequired,
   style: PropTypes.object,
   textStyle: PropTypes.object,
+  disabled: PropTypes.bool
 };
 
 export default Button;

src/components/Button/styles.js

@@ -15,4 +15,7 @@ export default StyleSheet.create({
     color: colors.white,
     fontSize: 20,
   },
+  disabled: {
+    backgroundColor: colors.grey.light
+  }
 });

src/navigation/Root.js

@@ -9,6 +9,7 @@ import PaymentScreen, { Methods } from './../screens/PaymentScreen';
 import SeedWordsScreen from './../screens/SeedWordsScreen';
 import TransactionInfoScreen from './../screens/TransactionInfoScreen';
 import ChatScreen from '../screens/ChatScreen';
+import PairInputScreen from '../screens/PairInput';
 
 const RootNav = createStackNavigator(
   {
@@ -28,6 +29,10 @@ const RootNav = createStackNavigator(
       screen: (props, compProps) => <QRCodeScreen {...props} {...compProps} />,
       path: 'qrCode'
     },
+    PairInput: {
+      screen: (props, compProps) => <PairInputScreen {...props} {...compProps} />,
+      path: 'pairInput'
+    },
     MakePayment: {
       screen: props => (
         <PaymentScreen

src/sagas/device.js

@@ -13,7 +13,7 @@ import DeviceInfo from 'react-native-device-info';
 import * as Crypto from 'react-native-crypto';
 import uuid from 'uuid/v4';
 import NetInfo from "@react-native-community/netinfo";
-import { AppState } from'react-native';
+import { AppState, Alert } from 'react-native';
 
 import NavigationService from './../navigation/service';
 import { actionTypes } from '../constants';

src/sagas/wallet.js

@@ -1,7 +1,6 @@
 import { takeLatest, take, call, put, select } from '@redux-saga/core/effects';
 import Mnemonic from 'bitcore-mnemonic';
 import { toWif, getChash160 } from 'obyte/lib/utils';
-import { Alert } from 'react-native';
 import { REHYDRATE } from 'redux-persist';
 import NavigationService from './../navigation/service';
 import { oClient, testnet } from './../lib/oCustom';

src/screens/ChatListScreen/ActionsBar.js

@@ -9,6 +9,7 @@ import { hubAddress, urlHost } from './../../lib/oCustom';
 import AddContactIcon from './../../assets/images/icon-person-add.svg';
 import ScanIcon from './../../assets/images/icon-scan.svg';
 import QRIcon from './../../assets/images/icon-qr.svg';
+import PersonAddIcon from './../../assets/images/icon-person-add.svg';
 import styles from './styles';
 
 class ActionsBar extends React.Component {
@@ -26,11 +27,14 @@ class ActionsBar extends React.Component {
   render() {
     return (
       <View style={styles.actionsBar}>
-        {/**
-        <TouchableOpacity style={styles.iconButton}>
-          <AddContactIcon style={styles.icon} width={20} height={20} />
+        <TouchableOpacity
+          style={styles.iconButton}
+          onPress={() =>
+            this.props.navigation.navigate('PairInput')
+          }
+        >
+          <AddContactIcon style={styles.icon} width={15} height={15} />
         </TouchableOpacity>
-        */}
         <TouchableOpacity
           style={styles.iconButton}
           onPress={() =>

src/screens/ChatScreen/ActionsBar.js

@@ -17,7 +17,8 @@ const ActionsBar = ({
   myWalletAddress,
   correspondentWalletAddress,
   correspondentAddress,
-  insertAddress
+  insertAddress,
+  onRequestSignMessage
 }) => {
   const actionSheet = useRef();
 
@@ -60,6 +61,11 @@ const ActionsBar = ({
     );
   }, [correspondentAddress]);
 
+  const handleRequestToSignMessage = useCallback(
+    () => {},
+    []
+  );
+
   const handleActionPress = useCallback(
     index => {
       switch (index) {
@@ -72,6 +78,9 @@ const ActionsBar = ({
         case 2:
           handleDeleteContact();
           break;
+        case 3:
+          onRequestSignMessage();
+          break;
         default:
       }
     },
@@ -149,10 +158,11 @@ const ActionsBar = ({
           'Insert my address',
           'Clear chat history',
           'Delete contact',
+          'Request to Sign a Message',
           'Cancel',
         ]}
-        cancelButtonIndex={3}
-        destructiveButtonIndex={3}
+        cancelButtonIndex={4}
+        destructiveButtonIndex={4}
         onPress={handleActionPress}
       />
     </View>

src/screens/ChatScreen/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, Fragment, useEffect } from 'react';
+import React, { useState, useMemo, Fragment } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { TouchableOpacity, Text, Clipboard, Alert, View, Linking } from 'react-native';
@@ -23,16 +23,6 @@ import { testnet } from "../../lib/oCustom";
 
 import WarningIcon from '../../assets/images/warning.svg';
 
-const messageTypes = [
-  "WALLET_ADDRESS",
-  "REQUEST_PAYMENT",
-  "SIGN_MESSAGE_REQUEST",
-  "SIGNED_MESSAGE",
-  "URL",
-  "COMMAND",
-  "SUGGEST_COMMAND"
-];
-
 const ChatScreen = ({
   myWalletAddress, correspondentWalletAddress, messages, navigation, backRoute, addressWif
 }) => {
@@ -58,6 +48,15 @@ const ChatScreen = ({
           isConnected
         }));
       });
+      setText("");
+    }
+  };
+
+  const onRequestSignMessage = () => {
+    if (!text) {
+      Alert.alert('', 'Text field is empty');
+    } else {
+      onSend([{ text: `[Data request](sign-message-request:${text})` }]);
     }
   };
 
@@ -284,6 +283,7 @@ const ChatScreen = ({
             clearChatHistory={onClearChatHistory}
             removeCorrespondent={onRemoveCorespondent}
             onSend={onSend}
+            onRequestSignMessage={onRequestSignMessage}
             insertAddress={insertAddress}
             correspondentWalletAddress={correspondentWalletAddress}
             correspondentAddress={correspondent.address}

src/screens/PairInput/index.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useDispatch } from "react-redux";
+
+import { acceptInvitation } from './../../actions/correspondents';
+
+import { View, Platform, KeyboardAvoidingView, TextInput, Clipboard, TouchableOpacity, Alert } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
+
+import Header from '../../components/Header';
+import Button from './../../components/Button';
+import CopyIcon from './../../assets/images/icon-copy.svg';
+
+import { REGEX_PAIRING } from "../../lib/messaging";
+
+import styles from './styles';
+
+const PairInputScreen = ({ navigation, backRoute }) => {
+  const dispatch = useDispatch();
+  const [address, setAddress] = useState("");
+
+  const onChangeAddress = (value) => {
+    setAddress(value);
+  };
+
+  const handleAddContact = () => {
+    if (REGEX_PAIRING.test(address)) {
+      dispatch(acceptInvitation({ data: address }));
+    } else {
+      Alert.alert("Warning", "Wrong pairing code");
+    }
+  };
+
+  const pasteAddress = async () => {
+    let copiedAddress = await Clipboard.getString();
+    setAddress(copiedAddress);
+  };
+
+  return (
+    <SafeAreaView
+      style={styles.container}
+      forceInset={{ top: 'always', bottom: 'always' }}
+    >
+      <KeyboardAvoidingView style={styles.content}>
+        <Header
+          navigation={navigation}
+          size='compact'
+          titlePosition='center'
+          backRoute={backRoute}
+          hasBackButton
+        />
+        <View style={styles.addressInputBox}>
+          <TextInput
+            style={styles.addressInput}
+            value={address}
+            onChangeText={onChangeAddress}
+            autoCorrect={false}
+          />
+          {!address && (
+            <View style={styles.addressInputPaste}>
+              <TouchableOpacity onPress={pasteAddress}>
+                <CopyIcon
+                  style={styles.addressInputPasteIcon}
+                  width={19}
+                  height={22}
+                />
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
+        <Button
+          text='Add contact'
+          onPress={handleAddContact}
+          style={styles.addButton}
+          disabled={!address.length}
+        />
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+PairInputScreen.defaultProps = {
+  backRoute: null,
+};
+
+PairInputScreen.propTypes = {
+  backRoute: PropTypes.string,
+};
+
+export default PairInputScreen;

src/screens/PairInput/styles.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../constants';
+
+export default StyleSheet.create({
+  container: {
+    backgroundColor: colors.white,
+    flex: 1,
+  },
+  content: {
+    paddingHorizontal: 10,
+  },
+  addressInputBox: {
+    marginTop: 50,
+    borderRadius: 7,
+    borderWidth: 2,
+    borderColor: colors.grey.lightest,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  addressInput: {
+    padding: 10,
+    fontSize: 18,
+    color: colors.black,
+    backgroundColor: 'transparent',
+    flex: 1
+  },
+  addButton: {
+    alignSelf: 'center',
+    marginTop: 40
+  },
+  addressInputPaste: {
+    marginLeft: 'auto',
+    marginRight: 10,
+    marginVertical: 10
+  },
+  addressInputPasteIcon: {
+    marginLeft: 'auto',
+    color: colors.grey.light
+  }
+});