Merge pull request #465 from status-im/bug/#462

QR code screen (#462)

src/status_im/accounts/handlers.cljs

@@ -17,7 +17,8 @@
             [status-im.accounts.statuses :as statuses]
             [status-im.utils.gfycat.core :refer [generate-gfy]]
             [status-im.constants :refer [console-chat-id]]
-            [status-im.utils.scheduler :as s]))
+            [status-im.utils.scheduler :as s]
+            [status-im.navigation.handlers :as nav]))
 
 
 (defn save-account [_ [_ account]]
@@ -140,3 +141,10 @@
     db))
 
 (register-handler :console-create-account console-create-account)
+
+(defmethod nav/preload-data! :qr-code-view
+  [{:keys [current-account-id] :as db} [_ _ {:keys [contact qr-source amount?]}]]
+  (assoc db :qr-modal {:contact   (or contact
+                                      (get-in db [:accounts current-account-id]))
+                       :qr-source qr-source
+                       :amount?   amount?}))

src/status_im/accounts/styles.cljs

@@ -49,6 +49,11 @@
    :alignItems     :center
    :justifyContent :center})
 
+(def qr-photo-container
+  (merge photo-container
+         {:margin-left  8
+          :margin-right 4}))
+
 (def photo-image
   {:width         36
    :height        36
@@ -121,8 +126,7 @@
    :flex-direction :column})
 
 (def account-toolbar
-  {:background-color "#2f3031"
+  {:background-color "#2f3031"})
-   :padding-bottom   45})
 
 (def wallet-account-container
   {:flex           1
@@ -132,21 +136,18 @@
    :justifyContent :center})
 
 (def qr-code
-  {:align-items      :center
+  {:background-color "#2f3031"
-   :padding-vertical 40})
+   :flex             1
+   :align-items      :center
+   :justify-content  :center})
 
 (def footer
-  {:position         :absolute
+  {:background-color "#2f3031"})
-   :left             0
-   :right            0
-   :bottom           0
-   :height           166
-   :background-color "#2f3031"})
 
 (def wallet-info
   {:align-items    :center
-   :padding-top    42
+   :padding-bottom 20
-   :padding-bottom 20})
+   :padding-top    20})
 
 (def wallet-name-text
   {:color          color-white
@@ -160,8 +161,8 @@
   {:flex             1
    :flex-direction   :column
    :align-items      :center
-   :height           60
+   :justify-content  :center
-   :padding-top      20
+   :height           51
    :background-color "#7597e4"})
 
 (def done-button-text

src/status_im/accounts/views/qr_code.cljs

@@ -0,0 +1,64 @@
+(ns status-im.accounts.views.qr-code
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [status-im.components.react :refer [view
+                                                text
+                                                image
+                                                touchable-highlight
+                                                get-dimensions]]
+            [status-im.components.status-bar :refer [status-bar]]
+            [status-im.components.styles :refer [icon-close]]
+            [status-im.components.qr-code :refer [qr-code]]
+            [re-frame.core :refer [dispatch subscribe]]
+            [status-im.accounts.styles :as st]
+            [status-im.i18n :refer [label]]
+            [clojure.string :as s]
+            [reagent.core :as r]))
+
+(defview qr-code-view []
+  [{:keys [photo-path address name] :as contact} [:get-in [:qr-modal :contact]]
+   {:keys [qr-source amount? dimensions]} [:get :qr-modal]
+   {:keys [amount]} [:get :contacts-click-params]]
+  [view st/wallet-qr-code
+   [status-bar {:type :modal}]
+
+   [view st/account-toolbar
+    [view st/wallet-account-container
+     [view st/qr-photo-container
+      [view st/account-photo-container
+       [image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)}
+               :style  st/photo-image}]]]
+     [view st/name-container
+      [text {:style           st/name-text
+             :number-of-lines 1} name]]
+     [view st/online-container
+      [touchable-highlight {:onPress #(dispatch [:navigate-back])}
+       [image {:source {:uri :icon_close_white}
+               :style  icon-close}]]]]]
+
+   [view {:style     st/qr-code
+          :on-layout #(let [layout (.. % -nativeEvent -layout)]
+                       (dispatch [:set-in [:qr-modal :dimensions] {:width  (.-width layout)
+                                                                   :height (.-height layout)}]))}
+    (when (:width dimensions)
+      [view {:style {:background-color "white"
+                     :width            (:width dimensions)
+                     :align-items      :center
+                     :justify-content  :center
+                     :padding          40}}
+       [qr-code {:value (if amount?
+                          (prn-str {:address (get contact qr-source)
+                                    :amount  amount})
+                          (str "ethereum:" (get contact qr-source)))
+                 :size  (- (min (:width dimensions)
+                                (:height dimensions))
+                           80)}]])]
+
+   [view st/footer
+    [view st/wallet-info
+     [text {:style st/wallet-name-text} (label :t/main-wallet)]
+     [text {:style st/wallet-address-text} address]]
+
+    [touchable-highlight {:onPress #(dispatch [:navigate-back])}
+     [view st/done-button
+      [text {:style st/done-button-text} (label :t/done)]]]]])
+

src/status_im/accounts/views/wallet_qr_code.cljs

@@ -1,44 +0,0 @@
-(ns status-im.accounts.views.wallet-qr-code
-  (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [status-im.components.react :refer [view
-                                                text
-                                                image
-                                                touchable-highlight]]
-            [status-im.components.styles :refer [icon-close]]
-            [status-im.components.qr-code :refer [qr-code]]
-            [re-frame.core :refer [dispatch subscribe]]
-            [status-im.accounts.styles :as st]
-            [status-im.i18n :refer [label]]
-            [clojure.string :as s]))
-
-
-(defview wallet-qr-code []
-  [{:keys [address photo-path name] :as account} [:get-current-account]
-   {:keys [amount]} [:get :contacts-click-params]]
-  [view st/wallet-qr-code
-   [view st/account-toolbar
-    [view st/wallet-account-container
-     [view st/photo-container
-      [view st/account-photo-container
-       [image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)}
-               :style  st/photo-image}]]]
-     [view st/name-container
-      [text {:style           st/name-text
-             :number-of-lines 1} name]]
-     [view st/online-container
-      [touchable-highlight {:onPress #(dispatch [:navigate-back])}
-       [image {:source {:uri :icon-close-white}
-               :style  icon-close}]]]]]
-   [view st/qr-code
-    [qr-code {:value (prn-str {:address address
-                               :amount  amount})
-              :size  200}]]
-   [view st/footer
-    [view st/wallet-info
-     [text {:style st/wallet-name-text} (label :t/main-wallet)]
-     [text {:style st/wallet-address-text} address]]
-
-    [touchable-highlight {:onPress #(dispatch [:navigate-back])}
-     [view st/done-button
-      [text {:style st/done-button-text} (label :t/done)]]]]])
-

src/status_im/android/core.cljs

@@ -32,7 +32,7 @@
             [taoensso.timbre :as log]
             [status-im.components.status :as status]
             [status-im.chat.styles.screen :as st]
-            [status-im.accounts.views.wallet-qr-code :refer [wallet-qr-code]]))
+            [status-im.accounts.views.qr-code :refer [qr-code-view]]))
 
 (defn init-back-button-handler! []
   (let [new-listener (fn []
@@ -117,7 +117,7 @@
                            :on-request-close #(dispatch [:navigate-back])}
                     (let [component (case @modal-view
                                       :qr-scanner qr-scanner
-                                      :wallet-qr-code wallet-qr-code
+                                      :qr-code-view qr-code-view
                                       :confirm confirm
                                       :contact-list-modal contact-list)]
                       [component])]])]))))})))

src/status_im/android/platform.cljs

@@ -13,7 +13,10 @@
                            :transparent {:height       20
                                          :bar-style    "light-content"
                                          :translucent? true
-                                         :color        styles/color-transparent}}
+                                         :color        styles/color-transparent}
+                           :modal       {:height    0
+                                         :bar-style "light-content"
+                                         :color     styles/color-black}}
    :sized-text            {:margin-top        0
                            :additional-height 0}
    :chat                  {:new-message {:border-top-color styles/color-transparent

src/status_im/chat/handlers/webview_bridge.cljs

@@ -38,13 +38,14 @@
   (fn [db [_ bridge]]
     (assoc db :webview-bridge bridge)))
 
-(defn contacts-click-handler [whisper-identity action params]
+(defn contacts-click-handler [{:keys [whisper-identity] :as contact} action params]
   (dispatch [:navigate-back])
   (when action
-    (if (= whisper-identity :qr-scan)
+    (if (= contact :qr-scan)
       (if (= action :send)
         (dispatch [:show-scan-qr :webview-address-from-qr])
-        (dispatch [:navigate-to-modal :wallet-qr-code]))
+        (dispatch [:navigate-to-modal :qr-code-view {:qr-source :whisper-identity
+                                                     :amount?   true}]))
       (dispatch [:chat-with-command whisper-identity action params]))))
 
 (register-handler ::send-command

src/status_im/contacts/screen.cljs

@@ -82,10 +82,9 @@
      [view
       (doall
         (map (fn [contact]
-               (let [whisper-identity (:whisper-identity contact)
+               (let [click-handler (or click-handler on-press)]
-                     click-handler    (or click-handler on-press)]
                  ^{:key contact}
-                 [contact-extended-view contact nil (click-handler whisper-identity) nil]))
+                 [contact-extended-view contact nil (click-handler contact) nil]))
              contacts))]
      (when (<= contacts-limit (count contacts))
        [view st/show-all

src/status_im/contacts/views/contact.cljs

@@ -5,7 +5,7 @@
             [status-im.contacts.styles :as st]
             [status-im.contacts.views.contact-inner :refer [contact-inner-view]]))
 
-(defn on-press [whisper-identity]
+(defn on-press [{:keys [whisper-identity]}]
   #(dispatch [:start-chat whisper-identity {} :navigation-replace]))
 
 (defn letter-view [letter]
@@ -15,7 +15,7 @@
 
 (defview contact-view-with-letter [{:keys [whisper-identity letter] :as contact} click-handler action params]
   [touchable-highlight
-   {:onPress #(click-handler whisper-identity action params)}
+   {:onPress #(click-handler contact action params)}
    [view st/contact-container
     [letter-view letter]
     [contact-inner-view contact]]])
@@ -23,7 +23,7 @@
 (defview contact-view [{:keys [whisper-identity] :as contact}]
   [chat [:get-chat whisper-identity]]
   [touchable-highlight
-   {:onPress (on-press whisper-identity)}
+   {:onPress (on-press contact)}
    [view st/contact-container
     [contact-inner-view contact]]])
 

src/status_im/contacts/views/contact_list.cljs

@@ -40,8 +40,7 @@
         [contact-view-with-letter row click-handler action params]
         [contact-view row
          (or click-handler
-             (let [whisper-identity (:whisper-identity row)]
+             (on-press row))]))))
-               (on-press whisper-identity)))]))))
 
 (defn qr-scan [click-handler action]
   [touchable-highlight

src/status_im/ios/core.cljs

@@ -28,7 +28,7 @@
             status-im.data-store.core
             [taoensso.timbre :as log]
             [status-im.chat.styles.screen :as st]
-            [status-im.accounts.views.wallet-qr-code :refer [wallet-qr-code]]))
+            [status-im.accounts.views.qr-code :refer [qr-code-view]]))
 
 (defn orientation->keyword [o]
   (keyword (.toLowerCase o)))
@@ -101,7 +101,7 @@
                            :on-request-close #(dispatch [:navigate-back])}
                     (let [component (case @modal-view
                                       :qr-scanner qr-scanner
-                                      :wallet-qr-code wallet-qr-code
+                                      :qr-code-view qr-code-view
                                       :confirm confirm
                                       :contact-list-modal contact-list)]
                       [component])]])]))))})))

src/status_im/ios/platform.cljs

@@ -12,7 +12,10 @@
                                          :color     toolbar-background2}
                            :transparent {:height    20
                                          :bar-style "light-content"
-                                         :color     styles/color-transparent}}
+                                         :color     styles/color-transparent}
+                           :modal       {:height    20
+                                         :bar-style "light-content"
+                                         :color     "#2f3031"}}
    :toolbar               {:border-bottom-color styles/color-gray3
                            :border-bottom-width 0.5}
    :sized-text            {:margin-top        -5

src/status_im/profile/screen.cljs

@@ -21,7 +21,6 @@
             [status-im.components.status-bar :refer [status-bar]]
             [status-im.components.text-field.view :refer [text-field]]
             [status-im.components.selectable-field.view :refer [selectable-field]]
-            [status-im.components.qr-code :refer [qr-code]]
             [status-im.utils.phone-number :refer [format-phone-number]]
             [status-im.utils.image-processing :refer [img->base64]]
             [status-im.utils.platform :refer [platform-specific]]
@@ -113,18 +112,6 @@
                        :on-change-text         #(dispatch [:set-in [:profile-edit :status] %])
                        :default-value          status}]])})))
 
-(defview qr-modal []
-  [qr [:get-in [:profile-edit :qr-code]]]
-  [modal {:transparent    true
-          :visible        (not (nil? qr))
-          :animationType  :fade
-          :onRequestClose #(log/debug "Nothing happens")}
-   [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 profile []
   [{whisper-identity :whisper-identity
     address          :address
@@ -180,7 +167,8 @@
          [selectable-field {:label     (label :t/address)
                             :editable? false
                             :value     address}]]
-        [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]]
+        [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact   contact
+                                                                                :qr-source :whisper-identity}])}]]
        [view st/underline-container]])
 
     [view st/profile-property
@@ -189,11 +177,10 @@
        [selectable-field {:label     (label :t/public-key)
                           :editable? false
                           :value     whisper-identity}]]
-      [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] whisper-identity])}]]]
+      [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact   contact
+                                                                              :qr-source :public-key}])}]]]
 
-    [view st/underline-container]
+    [view st/underline-container]]])
-
-    [qr-modal]]])
 
 (defview my-profile []
   [edit? [:get-in [:profile-edit :edit?]]
@@ -229,7 +216,8 @@
          [selectable-field {:label     (label :t/address)
                             :editable? edit?
                             :value     address}]]
-        [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]]
+        [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact   account
+                                                                                :qr-source :address}])}]]
        [view st/underline-container]]
 
       [view st/profile-property
@@ -238,8 +226,7 @@
          [selectable-field {:label     (label :t/public-key)
                             :editable? edit?
                             :value     public-key}]]
-        [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]]
+        [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact   account
+                                                                                :qr-source :public-key}])}]]]
 
-      [view st/underline-container]
+      [view st/underline-container]]]))
-
-      [qr-modal]]]))