Show QR in profile (#422)

ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_qr_gray.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/status_im/accounts/login/screen.cljs

@@ -20,7 +20,6 @@
                                                  icon-qr
                                                  button-input
                                                  white-form-text-input]]
-            [status-im.qr-scanner.views.scan-button :refer [scan-button]]
             [status-im.i18n :refer [label]]
             [status-im.accounts.login.styles :as st]))
 

src/status_im/components/image_button/styles.cljs

@@ -0,0 +1,28 @@
+(ns status-im.components.image-button.styles)
+
+(def image-button
+  {:position   :absolute
+   :bottom     2
+   :right      16
+   :flex       1
+   :height     50
+   :alignItems :center})
+
+(def image-button-content
+  {:flex          1
+   :flexDirection :row
+   :height        50
+   :alignItems    :center
+   :alignSelf     :center})
+
+(def image-button-text
+  {:flex          1
+   :flexDirection :column
+   :letter-spacing -0.3
+   :margin-left   8})
+
+(def scan-button-text
+  (merge image-button-text {:color "#7099e6"}))
+
+(def show-qr-button-text
+  (merge image-button-text {:color "#838c93"}))

src/status_im/components/image_button/view.cljs

@@ -0,0 +1,31 @@
+(ns status-im.components.image-button.view
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view
+                                                text
+                                                image
+                                                touchable-highlight]]
+            [status-im.components.styles :refer [icon-scan]]
+            [status-im.i18n :refer [label]]
+            [status-im.components.image-button.styles :as st]))
+
+(defn image-button [{:keys [value style icon handler]}]
+  [view st/image-button
+   [touchable-highlight {:on-press handler}
+    [view st/image-button-content
+     [image {:source {:uri (or icon :scan_blue)}
+             :style  icon-scan}]
+     (when text
+       [text {:style style} value])]]])
+
+(defn scan-button [{:keys [show-label? handler]}]
+  [image-button {:icon    :scan_blue
+                 :value   (if show-label?
+                            (label :t/scan-qr))
+                 :style   st/scan-button-text
+                 :handler handler}])
+
+(defn show-qr-button [{:keys [handler]}]
+  [image-button {:icon    :icon_qr_gray
+                 :value   (label :t/show-qr)
+                 :style   st/show-qr-button-text
+                 :handler handler}])

src/status_im/components/selectable_field/styles.cljs

@@ -14,9 +14,9 @@
    :font-size        14})
 
 (def text-container
-  {:padding 0
+  {:padding       0
-   :margin-bottom       18
+   :margin-bottom 18
-   :margin  0})
+   :margin        0})
 
 (def text
   {:font-size           16

src/status_im/contacts/views/new_contact.cljs

@@ -20,7 +20,7 @@
                                                  icon-back
                                                  button-input-container
                                                  button-input]]
-            [status-im.qr-scanner.views.scan-button :refer [scan-button]]
+            [status-im.components.image-button.view :refer [scan-button]]
             [status-im.i18n :refer [label]]
             [cljs.spec :as s]
             [status-im.contacts.validations :as v]
@@ -90,10 +90,10 @@
        :on-change-text #(do
                          (dispatch [:set-in [:new-contact-identity] %])
                          (dispatch [:set :new-contact-address-error nil]))}]
-     [scan-button {:showLabel (zero? (count whisper-identity))
+     [scan-button {:show-label? (zero? (count whisper-identity))
-                   :handler   #(dispatch [:scan-qr-code
+                   :handler     #(dispatch [:scan-qr-code
-                                          {:toolbar-title (label :t/new-contact)}
+                                            {:toolbar-title (label :t/new-contact)}
-                                          :set-contact-identity-from-qr])}]]))
+                                            :set-contact-identity-from-qr])}]]))
 
 
 (defview new-contact []

src/status_im/group_settings/screen.cljs

@@ -29,7 +29,7 @@
 (defview member-menu []
   [{:keys [name] :as participant} [:selected-participant]]
   (when participant
-    [modal {:animated       false
+    [modal {:animationType  :none
             :transparent    false
             :onRequestClose close-member-menu}
      [touchable-highlight {:style    st/modal-container

src/status_im/profile/screen.cljs

@@ -9,9 +9,11 @@
                                                 text-input
                                                 image
                                                 icon
+                                                modal
                                                 scroll-view
                                                 touchable-highlight
                                                 touchable-opacity
+                                                touchable-without-feedback
                                                 show-image-picker
                                                 dismiss-keyboard!]]
             [status-im.components.icons.custom-icons :refer [oct-icon]]
@@ -27,6 +29,7 @@
             [status-im.profile.validations :as v]
             [status-im.profile.styles :as st]
             [status-im.utils.random :refer [id]]
+            [status-im.components.image-button.view :refer [show-qr-button]]
             [status-im.i18n :refer [label]]))
 
 (defn toolbar [{:keys [account edit?]}]
@@ -161,8 +164,20 @@
                                        )}
       [view [text {:style st/report-user-text} (label :t/report-user)]]]]]])
 
+(defview qr-modal []
+  [qr [:get-in [:profile-edit :qr-code]]]
+  [modal {:transparent   true
+          :visible       (not (nil? qr))
+          :animationType :fade}
+   [touchable-without-feedback {:on-press #(dispatch [:set-in [:profile-edit :qr-code] nil])}
+    [view st/qr-code-container
+     [view st/qr-code
+      [qr-code {:value (str "ethereum:" qr)
+                :size  220}]]]]])
+
 (defview my-profile []
   [edit? [:get-in [:profile-edit :edit?]]
+   qr [:get-in [:profile-edit :qr-code]]
    current-account [:get-current-account]
    changed-account [:get :profile-edit]]
   (let [{:keys [phone
@@ -171,6 +186,7 @@
                                            changed-account
                                            current-account)]
     [scroll-view {:style                     st/profile
+                  :bounces                   false
                   :keyboardShouldPersistTaps true}
      [status-bar]
      [toolbar {:account account
@@ -188,16 +204,20 @@
        [view st/underline-container]]
 
       [view st/profile-property
-       [selectable-field {:label (label :t/address)
+       [view st/profile-property-row
-                          :value address}]
+        [view st/profile-property-field
+         [selectable-field {:label (label :t/address)
+                            :value address}]]
+        [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]]
        [view st/underline-container]]
 
       [view st/profile-property
-       [selectable-field {:label (label :t/public-key)
+       [view st/profile-property-row
-                          :value public-key}]]
+        [view st/profile-property-field
+         [selectable-field {:label (label :t/public-key)
+                            :value public-key}]]
+        [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]]
 
       [view st/underline-container]
 
-      [view st/qr-code-container
+      [qr-modal]]]))
-       [qr-code {:value (str "ethereum:" public-key)
-                 :size  220}]]]]))

src/status_im/profile/styles.cljs

@@ -121,6 +121,14 @@
 (def profile-property
   {:margin-left 16})
 
+(def profile-property-row
+  {:flex           1
+   :flex-direction :row})
+
+(def profile-property-field
+  {:margin-right 90
+   :flex         1})
+
 (def profile-input-wrapper
   {:margin-bottom 16})
 
@@ -143,9 +151,19 @@
    :letter-spacing 0.5})
 
 (def qr-code-container
-  {:flex       1
+  {:flex             1
-   :alignItems :center
+   :alignItems       :center
-   :margin     32})
+   :justify-content  :center
+   :background-color "#000000aa"})
+
+(def qr-code
+  {:width            250
+   :height           250
+   :background-color "white"
+   :border-radius    4
+   :align-items      :center
+   :padding-top      15
+   :elevation        4})
 
 (def hashtag
   {:color "#7099e6"})

src/status_im/qr_scanner/styles.cljs

@@ -74,25 +74,3 @@
    :flexDirection :column
    :color         color-white
    :margin-left   8})
-
-
-(def scan-button
-  {:position   :absolute
-   :bottom     0
-   :right      16
-   :flex       1
-   :height     50
-   :alignItems :center})
-
-(def scan-button-content
-  {:flex          1
-   :flexDirection :row
-   :height        50
-   :alignItems    :center
-   :alignSelf     :center})
-
-(def scan-text
-  {:flex          1
-   :flexDirection :column
-   :color         "#7099e6"
-   :margin-left   8})

src/status_im/qr_scanner/views/import_button.cljs

@@ -1,21 +0,0 @@
-(ns status-im.qr-scanner.views.import-button
-  (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
-            [status-im.components.react :refer [view
-                                                text
-                                                image
-                                                touchable-highlight]]
-            [status-im.components.styles :refer [icon-qr]]
-            [status-im.i18n :refer [label]]
-            [status-im.qr-scanner.styles :as st]))
-
-
-(defview import-button [handler]
-  []
-  [view st/import-button
-   [touchable-highlight
-    {:on-press handler}
-    [view st/import-button-content
-     [image {:source {:uri :icon_qr}
-             :style  icon-qr}]
-     [text {:style st/import-text} (label :t/import-qr)]]]])

src/status_im/qr_scanner/views/scan_button.cljs

@@ -1,22 +0,0 @@
-(ns status-im.qr-scanner.views.scan-button
-  (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
-            [status-im.components.react :refer [view
-                                                text
-                                                image
-                                                touchable-highlight]]
-            [status-im.components.styles :refer [icon-scan]]
-            [status-im.i18n :refer [label]]
-            [status-im.qr-scanner.styles :as st]))
-
-
-(defview scan-button [{:keys [showLabel icon labelStyle handler]}]
-  (let [showLabel (if (nil? showLabel) true showLabel)]
-    [view st/scan-button
-     [touchable-highlight
-      {:on-press handler}
-      [view st/scan-button-content
-       [image {:source {:uri (or icon :scan_blue)}
-               :style  icon-scan}]
-       (when showLabel [text {:style (merge st/scan-text labelStyle)}
-                                  (label :t/scan-qr)])]]]))

src/status_im/translations/en.cljs

@@ -117,6 +117,7 @@
    :contacts-group-people                 "People"
    :contacts-group-new-chat               "Start new chat"
    :no-contacts                           "No contacts yet"
+   :show-qr                               "Show QR"
 
    ;group-settings
    :remove                                "Remove"