implemented #119 and #120

Former-commit-id: c81276e3b7

.re-natal

@@ -16,7 +16,9 @@
     "react-native-randombytes",
     "dismissKeyboard",
     "react-native-linear-gradient",
-    "react-native-android-sms-listener"
+    "react-native-android-sms-listener",
+    "react-native-camera",
+    "react-native-qrcode"
   ],
   "imageDirs": [
     "images"

android/app/build.gradle

@@ -130,6 +130,7 @@ dependencies {
     compile project(':react-native-i18n')
     compile project(':react-native-linear-gradient')
     compile project(':ReactNativeAndroidSmsListener')
+    compile project(':react-native-camera')
 //    compile(name:'geth', ext:'aar')
     compile(group: 'status-im', name: 'android-geth', version: '1.4.0-201604110816-a97a114', ext: 'aar')
 

android/app/src/main/java/com/statusim/MainActivity.java

@@ -18,9 +18,11 @@ import java.util.List;
 import java.util.Properties;
 import java.io.File;
 
+import com.lwansbrough.RCTCamera.*;
 import com.i18n.reactnativei18n.ReactNativeI18n;
 import io.realm.react.RealmReactPackage;
 
+
 public class MainActivity extends ReactActivity {
 
     @Override
@@ -82,6 +84,7 @@ public class MainActivity extends ReactActivity {
                 new ReactNativeI18n(),
                 new RandomBytesPackage(),
                 new LinearGradientPackage(),
+                new RCTCameraPackage(),
                 new SmsListener(this)
         );
     }

android/settings.gradle

@@ -18,3 +18,5 @@ include ':react-native-linear-gradient'
 project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':ReactNativeAndroidSmsListener'
 project(':ReactNativeAndroidSmsListener').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-sms-listener/android')
+include ':react-native-camera'
+project(':react-native-camera').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-camera/android')

package.json

@@ -11,12 +11,14 @@
     "react-native": "^0.24.1",
     "react-native-action-button": "^1.1.4",
     "react-native-android-sms-listener": "^0.1.3",
+    "react-native-camera": "github:codyhazelwood/react-native-camera",
     "react-native-circle-checkbox": "^0.1.3",
     "react-native-contacts": "^0.2.4",
     "react-native-i18n": "0.0.8",
     "react-native-invertible-scroll-view": "^1.0.0",
     "react-native-linear-gradient": "^1.5.7",
     "react-native-loading-spinner-overlay": "0.0.8",
+    "react-native-qrcode": "^0.2.2",
     "react-native-randombytes": "^2.0.0",
     "react-native-vector-icons": "^1.3.4",
     "realm": "^0.11.1"

src/status_im/android/core.cljs

@@ -8,6 +8,8 @@
             [status-im.components.react :refer [navigator app-registry]]
             [status-im.components.main-tabs :refer [main-tabs]]
             [status-im.contacts.screen :refer [contact-list]]
+            [status-im.contacts.views.new-contact :refer [new-contact]]
+            [status-im.qr-scanner.screen :refer [qr-scanner]]
             [status-im.discovery.screen :refer [discovery]]
             [status-im.discovery.tag :refer [discovery-tag]]
             [status-im.chat.screen :refer [chat]]
@@ -44,6 +46,8 @@
         :new-group [new-group]
         :group-settings [group-settings]
         :contact-list [main-tabs]
+        :new-contact [new-contact]
+        :qr-scanner [qr-scanner]
         :chat [chat]
         :profile [profile]
         :my-profile [my-profile]))))

src/status_im/components/camera.cljs

@@ -0,0 +1,7 @@
+(ns status-im.components.camera
+  (:require [reagent.core :as r]))
+
+(def class (.-default (js/require "react-native-camera")))
+
+(defn camera [props]
+  (r/create-element class (clj->js (merge {:inverted true} props))))

src/status_im/components/qr-code.cljs

@@ -0,0 +1,7 @@
+(ns status-im.components.qr-code
+  (:require [reagent.core :as r]))
+
+(def class (js/require "react-native-qrcode"))
+
+(defn qr-code [props]
+  (r/create-element class (clj->js (merge {:inverted true} props))))

src/status_im/components/styles.cljs

@@ -28,5 +28,29 @@
 (def toolbar-background2 color-light-gray)
 (def default-chat-color color-purple)
 
+(def toolbar-height 56)
+
 (def flex
   {:style {:flex 1}})
+
+(def hamburger-icon
+  {:width  16
+   :height 12})
+
+(def search-icon
+  {:width  17
+   :height 17})
+
+(def create-icon
+  {:fontSize 20
+   :height   22
+   :color    :white})
+
+(def import-qr-icon
+  {:margin 4})
+
+(def form-text-input
+  {:marginLeft -4
+   :fontSize   14
+   :fontFamily font
+   :color      text1-color})

src/status_im/components/toolbar.cljs

@@ -1,18 +1,19 @@
 (ns status-im.components.toolbar
   (:require [re-frame.core :refer [subscribe dispatch]]
             [status-im.components.react :refer [view
-                                              text-input
-                                              icon
-                                              text
-                                              image
-                                              touchable-highlight]]
+                                                text-input
+                                                icon
+                                                text
+                                                image
+                                                touchable-highlight]]
             [status-im.components.styles :refer [font
-                                               title-font
-                                               color-white
-                                               color-purple
-                                               text1-color
-                                               text2-color
-                                               toolbar-background1]]
+                                                 title-font
+                                                 color-white
+                                                 color-purple
+                                                 text1-color
+                                                 text2-color
+                                                 toolbar-background1
+                                                 toolbar-height]]
             [status-im.components.realm :refer [list-view]]
             [reagent.core :as r]))
 
@@ -20,7 +21,7 @@
                        background-color custom-content style]}]
   (let [style (merge {:flexDirection   :row
                       :backgroundColor (or background-color toolbar-background1)
-                      :height          56
+                      :height          toolbar-height
                       :elevation       2} style)]
     [view {:style style}
      (when (not hide-nav?)

src/status_im/contacts/handlers.cljs

@@ -99,3 +99,15 @@
 (register-handler :add-contacts
   (after save-contacts!)
   add-new-contacts)
+
+(defn add-new-contact [db [_ {:keys [whisper-identity] :as contact}]]
+  (-> db
+      (update :contacts assoc whisper-identity contact)
+      (assoc :new-contact {:name ""
+                           :address ""
+                           :whisper-identity ""
+                           :phone-number ""})))
+
+(register-handler :add-new-contact
+  (after save-contact)
+  add-new-contact)

src/status_im/contacts/screen.cljs

@@ -6,9 +6,18 @@
                                                 touchable-highlight
                                                 list-view
                                                 list-item]]
+            [status-im.components.action-button :refer [action-button
+                                                        action-button-item]]
             [status-im.contacts.views.contact :refer [contact-view]]
             [status-im.components.styles :refer [toolbar-background2]]
             [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.drawer.view :refer [drawer-view open-drawer]]
+            [status-im.components.icons.ionicons :refer [icon]]
+            [status-im.components.styles :refer [color-blue
+                                                 hamburger-icon
+                                                 search-icon
+                                                 create-icon
+                                                 toolbar-background2]]
             [status-im.contacts.styles :as st]
             [status-im.utils.listview :as lw]
             [status-im.i18n :refer [label]]))
@@ -17,20 +26,34 @@
   (list-item [contact-view row]))
 
 (defn contact-list-toolbar []
-  [toolbar {:title            (label :t/contacts)
+  [toolbar {:nav-action {:image   {:source {:uri :icon_hamburger}
+                                   :style  hamburger-icon}
+                         :handler open-drawer}
+            :title            (label :t/contacts)
             :background-color toolbar-background2
             :action           {:image   {:source {:uri :icon_search}
-                                         :style  st/search-icon}
+                                         :style  search-icon}
                                :handler (fn [])}}])
 
 (defview contact-list []
   [contacts [:get-contacts]]
-  [view st/contacts-list-container
-   [contact-list-toolbar]
-   ;; todo what if there is no contacts, should we show some information
-   ;; about this?
-   (when contacts
-     [list-view {:dataSource          (lw/to-datasource contacts)
-                 :enableEmptySections true
-                 :renderRow           render-row
-                 :style               st/contacts-list}])])
+   [drawer-view
+    [view st/contacts-list-container
+     [contact-list-toolbar]
+     ;; todo what if there is no contacts, should we show some information
+     ;; about this?
+     (when contacts
+       [list-view {:dataSource          (lw/to-datasource contacts)
+                   :enableEmptySections true
+                   :renderRow           render-row
+                   :style               st/contacts-list}])
+     [action-button {:buttonColor color-blue
+                     :offsetY     16
+                     :offsetX     16}
+      [action-button-item
+       {:title       (label :t/new-contact)
+        :buttonColor :#9b59b6
+        :onPress     #(dispatch [:navigate-to :new-contact])}
+       [icon {:name  :android-create
+              :style create-icon}]]
+      ]]])

src/status_im/contacts/styles.cljs

@@ -1,13 +1,12 @@
 (ns status-im.contacts.styles
   (:require [status-im.components.styles :refer [font
-                                               title-font
-                                               text1-color
-                                               color-white
-                                               online-color]]))
+                                                 title-font
+                                                 text1-color
+                                                 color-white
+                                                 toolbar-background2
+                                                 online-color]]))
+
 
-(def search-icon
-  {:width  17
-   :height 17})
 
 (def contacts-list-container
   {:flex            1
@@ -67,3 +66,23 @@
    :fontSize   16
    :fontFamily font
    :color      text1-color})
+
+(def import-qr-button
+  {:flex            1
+   :height          50
+   :alignItems      :center
+   :backgroundColor "#EFF4F6"})
+
+(def import-qr-button-content
+  {:flex            1
+   :flexDirection   :row
+   :height          50
+   :alignItems      :center
+   :alignSelf       :center})
+
+(def import-qr-text
+  {:flexDirection :column})
+
+(def contact-form-container
+  {:flex            1
+   :backgroundColor :white})

src/status_im/contacts/views/new_contact.cljs

@@ -0,0 +1,70 @@
+(ns status-im.contacts.views.new-contact
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view
+                                                text
+                                                text-input
+                                                image
+                                                touchable-highlight
+                                                list-view
+                                                list-item]]
+            [status-im.components.action-button :refer [action-button
+                                                        action-button-item]]
+            [status-im.components.styles :refer [toolbar-background2]]
+            [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.drawer.view :refer [drawer-view open-drawer]]
+            [status-im.components.icons.ionicons :refer [icon]]
+            [status-im.components.styles :refer [color-blue
+                                                 color-purple
+                                                 hamburger-icon
+                                                 search-icon
+                                                 create-icon
+                                                 import-qr-icon
+                                                 toolbar-background2
+                                                 form-text-input]]
+            [status-im.i18n :refer [label]]
+            [status-im.contacts.styles :as st]))
+
+(defn import-qr-button []
+  [touchable-highlight {:on-press #(dispatch [:navigate-to
+                                              :qr-scanner])}
+   [view st/import-qr-button
+    [view st/import-qr-button-content
+     [icon {:name :qr-scanner
+            :style import-qr-icon}]
+     [text {:style st/import-qr-text} (label :t/import-qr)]]]])
+
+(defview contact-name-input [name]
+   []
+   [text-input
+    {:underlineColorAndroid color-purple
+     :style                 form-text-input
+     :autoFocus             true
+     :placeholder           (label :t/contact-name)
+     :onChangeText          #(dispatch [:set-in [:new-contact :name] %])}
+    name])
+
+(defview contact-address-input [address]
+   []
+   [text-input
+    {:underlineColorAndroid color-purple
+     :style                 form-text-input
+     :autoFocus             true
+     :placeholder           (label :t/contact-address)
+     :onChangeText          #(dispatch [:set-in [:new-contact :address] %])}
+    address])
+
+(defview new-contact []
+  [{:keys [name address whisper-identity phone-number] :as new-contact} [:get :new-contact]]
+  [drawer-view
+   [view st/contact-form-container
+    [toolbar {:title            (label :t/new-contact)
+              :background-color toolbar-background2
+              :action           {:image   {:source {:uri :icon_add_gray}
+                                           :style  search-icon}
+                                 :handler (fn [] (dispatch [:add-new-contact new-contact]))}}]
+    [import-qr-button]
+    [contact-name-input name]
+    [contact-address-input address]
+    [text (str "Whisper identity: " whisper-identity)]
+    ]])

src/status_im/db.cljs

@@ -29,6 +29,10 @@
              :email                  "myemail@gmail.com"
              :status                 "Hi, this is my status"
              :current-tag            nil
+             :new-contact            {:name             ""
+                                      :address          ""
+                                      :whisper-identity ""
+                                      :phone-number     ""}
              :disable-group-creation false})
 
 (def protocol-initialized-path [:protocol-initialized])

src/status_im/profile/screen.cljs

@@ -11,6 +11,8 @@
             [status-im.components.chat-icon.screen :refer [profile-icon
                                                          my-profile-icon]]
             [status-im.profile.styles :as st]
+            [status-im.components.qr-code :refer [qr-code]]
+            [status-im.utils.types :refer [clj->json]]
             [status-im.i18n :refer [label]]))
 
 (defn profile-property-view [{:keys [name value]}]
@@ -64,8 +66,9 @@
    photo-path   [:get :photo-path]
    phone-number [:get :phone-number]
    email        [:get :email]
-   status       [:get :status]]
-  [scroll-view {:style st/profile}
+   status       [:get :status]
+   identity     [:get :identity]]
+  [view {:style st/profile}
    [touchable-highlight {:style    st/back-btn-touchable
                          :on-press #(dispatch [:navigate-back])}
     [view st/back-btn-container
@@ -81,10 +84,16 @@
      [my-profile-icon]]
     [text {:style st/user-name} username]
     [text {:style st/status} status]]
-   [view st/profile-properties-container
+   [scroll-view st/profile-properties-container
     [profile-property-view {:name  (label :t/username)
                             :value username}]
     [profile-property-view {:name  (label :t/phone-number)
                             :value phone-number}]
     [profile-property-view {:name  (label :t/email)
-                            :value email}]]])
+                            :value email}]
+    [view st/qr-code-container
+     [qr-code {:value (clj->json {:name username
+                                  :phone-number phone-number
+                                  :address email
+                                  :whisper-identity identity})
+              :size 150}]]]])

src/status_im/profile/styles.cljs

@@ -135,3 +135,8 @@
    :color         text2-color
    ;; IOS:
    :letterSpacing 0.5})
+
+(def qr-code-container
+  {:flex 1
+   :alignItems :center
+   :margin 15})

src/status_im/qr_scanner/screen.cljs

@@ -0,0 +1,43 @@
+(ns status-im.qr-scanner.screen
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view
+                                                icon
+                                                text
+                                                image
+                                                touchable-highlight]]
+            [status-im.components.camera :refer [camera]]
+            [status-im.components.styles :refer [toolbar-background2]]
+            [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.icons.ionicons :refer [icon]]
+            [status-im.components.styles :refer [color-blue]]
+            [status-im.i18n :refer [label]]
+            [status-im.qr-scanner.styles :as st]
+            [status-im.utils.logging :as log]))
+
+(defn qr-scanner-toolbar []
+  [toolbar {:title            (label :t/new-contact)
+            :background-color toolbar-background2}])
+
+(defview qr-scanner []
+  []
+  [view st/barcode-scanner-container
+   [qr-scanner-toolbar]
+   [camera {:onBarCodeRead (fn [{:keys [name address whisper-identity phone-number] :as contact}]
+                             (when name (dispatch [:set-in [:new-contact :name] name]))
+                             (when address (dispatch [:set-in [:new-contact :address] address]))
+                             (when whisper-identity (dispatch [:set-in [:new-contact :whisper-identity] whisper-identity]))
+                             (when phone-number (dispatch [:set-in [:new-contact :phone-number] phone-number]))
+                             (dispatch [:navigate-back]))
+            :style st/barcode-scanner}]
+   [view st/rectangle-container
+    [view st/rectangle
+     [image {:source {:uri :corner_left_top}
+             :style  st/corner-left-top}]
+     [image {:source {:uri :corner_right_top}
+             :style  st/corner-right-top}]
+     [image {:source {:uri :corner_right_bottom}
+             :style  st/corner-right-bottom}]
+     [image {:source {:uri :corner_left_bottom}
+             :style  st/corner-left-bottom}]]]
+   ])

src/status_im/qr_scanner/styles.cljs

@@ -0,0 +1,59 @@
+(ns status-im.qr-scanner.styles
+  (:require [status-im.components.styles :refer [toolbar-height]]))
+
+(def barcode-scanner-container
+  {:flex            1
+   :backgroundColor :white})
+
+(def barcode-scanner
+  {:flex 1
+   :justifyContent :flex-end
+   :alignItems :center})
+
+(def rectangle-container
+  {:position :absolute
+   :left 0
+   :top toolbar-height
+   :bottom 0
+   :right 0
+   :flex 1
+   :alignItems :center
+   :justifyContent :center
+   :backgroundColor :transparent})
+
+(def rectangle
+  {:height 250
+   :width 250
+   :backgroundColor :transparent})
+
+(def corner-left-top
+  {:position :absolute
+   :left 0
+   :top 0
+   :width 56
+   :height 56})
+
+(def corner-right-top
+  {:position :absolute
+   :right 0
+   :top 0
+   :width 56
+   :height 56})
+
+(def corner-right-bottom
+  {:position :absolute
+   :right 0
+   :bottom 0
+   :width 56
+   :height 56})
+
+(def corner-left-bottom
+  {:position :absolute
+   :left 0
+   :bottom 0
+   :width 56
+   :height 56})
+
+
+;:width 56
+;:height 56

src/status_im/translations/en.cljs

@@ -70,6 +70,7 @@
    ;contacts
    :contacts                              "Contacts"
    :no-name                               "Noname"
+   :new-contact                           "New Contact"
 
    ;group-settings
    :remove                                "Remove"
@@ -112,4 +113,9 @@
    :removed                               "removed"
    :You                                   "You"
 
+   ;new-contact
+   :import-qr                             "Import from QR"
+   :contact-name                          "Contact Name"
+   :contact-address                       "Contact Address"
+
    })

src/status_im/utils/types.cljs

@@ -6,4 +6,7 @@
     s))
 
 (defn to-edn-string [value]
-  (with-out-str (pr value)))
+  (with-out-str (pr value)))
+
+(defn clj->json [ds]
+  (.stringify js/JSON (clj->js ds)))