[ISSUE #2883] Migrate wallet/request to latest mockups

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
status-im · Feb 8, 2018 · 748b0fc · 748b0fc
1 parent 96f08ab
commit 748b0fc
Show file tree

Hide file tree

Showing 39 changed files with 467 additions and 695 deletions.
diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs
@@ -53,8 +53,8 @@
      [toolbar/toolbar {}
       (when-not (or show-actions? creating?)
         (if (empty? accounts)
-          [toolbar/nav-clear-text (i18n/label :t/recover)
-           #(re-frame/dispatch [:navigate-to-modal :recover-modal])]
+          [toolbar/nav-clear-text {:handler #(re-frame/dispatch [:navigate-to-modal :recover-modal])}
+           (i18n/label :t/recover)]
           toolbar/default-nav-back))
       [toolbar-content/toolbar-content-view]
       [toolbar-action show-actions?]]

diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs
@@ -318,8 +318,10 @@
    :wallet-manage-assets                  "Manage Assets"
    :signing-phrase-description            "Sign the transaction by entering your password. Make sure that the words above match your secret signing phrase"
    :wallet-insufficient-funds             "Insufficient funds"
-   :request-transaction                   "Request transaction"
+   :receive                               "Receive"
+   :request-qr-legend                     "Share this code to receive assets"
    :send-request                          "Send request"
+   :send-transaction-request              "Send a transaction request"
    :share                                 "Share"
    :eth                                   "ETH"
    :gwei                                  "Gwei"
@@ -352,6 +354,8 @@
    :sign-later-text                       "Check the transaction history to sign this transaction"
    :not-applicable                        "Not applicable for unsigned transactions"
    :send-transaction                      "Send transaction"
+   :new-request                           "New request"
+   :request-transaction                   "Request transaction"
    :receive-transaction                   "Receive transaction"
    :new-transaction                       "New Transaction"
    :transaction-history                   "Transaction History"

diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs
@@ -5,6 +5,7 @@
 (def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background
 (def white-lighter-transparent "rgba(255, 255, 255, 0.6)") ;; Used for input placeholder color
 (def black "#000000") ;; Used as the default text color
+(def black-transparent "#00000020") ;; Used as background color for rounded button on dark background
 (def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color
 (def gray-light "#d9dae1") ;; Used as divider color
 (def gray-lighter "#eef2f5")  ;; Used as a background or shadow

diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs
@@ -1,12 +1,12 @@
 (ns status-im.ui.components.common.common
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [status-im.ui.components.react :as react]
+  (:require [status-im.i18n :as i18n]
+            [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.context-menu :as context-menu]
             [status-im.ui.components.common.styles :as styles]
             [status-im.utils.ethereum.core :as ethereum]
-            [status-im.utils.platform :as platform]
-            [status-im.i18n :as i18n]))
+            [status-im.utils.platform :as platform]))
 
 (defn top-shadow []
   (when platform/android?
@@ -72,15 +72,3 @@
        (if (ethereum/testnet? network-id)
          (i18n/label :t/testnet-text {:testnet (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
          (i18n/label :t/mainnet-text))]]]))
-
-(defn icon-or-label
-  "Renders a touchable icon on Android or a label or iOS."
-  [action-opts label-kw label-style icon-id icon-opts]
-  [react/touchable-highlight action-opts
-   (if platform/ios?
-     [react/view
-      [react/text {:style (merge styles/label-action-text label-style)}
-       (i18n/label label-kw)]]
-     [react/view styles/icon-action
-      [vector-icons/icon icon-id icon-opts]])])
-
diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs
@@ -6,7 +6,7 @@
 (def gradient-top
   {:flexDirection   :row
    :height          3
-   :backgroundColor styles/color-light-gray})
+   :backgroundColor colors/gray-lighter})
 
 (def gradient-top-colors
   ["rgba(25, 53, 76, 0.01)"
@@ -15,19 +15,19 @@
 (def gradient-bottom
   {:flexDirection   :row
    :height          2
-   :backgroundColor styles/color-light-gray})
+   :backgroundColor colors/gray-lighter})
 
 (def gradient-bottom-colors
   ["rgba(25, 53, 76, 0.1)"
    "rgba(25, 53, 76, 0.01)"])
 
 (def separator-wrapper
-  {:background-color styles/color-white})
+  {:background-color colors/white})
 
 (defstyle separator
   {:android {:height 0}
    :ios     {:height           1
-             :background-color styles/color-gray5
+             :background-color colors/gray-light
              :opacity          0.5}})
 
 (def list-separator
@@ -41,20 +41,20 @@
    :padding-right  16
    :flex           1
    :flex-direction :row
-   :ios            {:background-color styles/color-white
+   :ios            {:background-color colors/white
                     :padding-top      19
                     :padding-bottom   15
                     :margin-top       16}
-   :android        {:background-color styles/color-light-gray
+   :android        {:background-color colors/gray-lighter
                     :padding-top      20
                     :padding-bottom   17
                     :margin-top       8}})
 
 (defstyle form-title-extend-container
   {:ios     {:margin-top       16
-             :background-color styles/color-white}
+             :background-color colors/white}
    :android {:margin-top       8
-             :background-color styles/color-light-gray}})
+             :background-color colors/gray-lighter}})
 
 (def form-title-extend-button
   {:padding 16})
@@ -80,7 +80,7 @@
    :android {:height 11}})
 
 (defstyle list-header-footer-spacing
-  {:android {:background-color styles/color-white
+  {:android {:background-color colors/white
              :height           8}})
 
 (def network-container
@@ -91,7 +91,7 @@
 
 (defn network-text [text-color]
   {:flex           1
-   :color          (or text-color styles/color-black)
+   :color          (or text-color colors/black)
    :letter-spacing -0.2
    :font-size      14
    :margin-left    16})
@@ -109,10 +109,3 @@
    :color         colors/blue
    :ios           {:font-size 15}
    :android       {:font-size 14}})
-
-(def icon-action
-  {:width           40
-   :height          40
-   :margin-right    4
-   :align-items     :center
-   :justify-content :center})
diff --git a/src/status_im/ui/components/qr_code_viewer/styles.cljs b/src/status_im/ui/components/qr_code_viewer/styles.cljs
@@ -4,25 +4,21 @@
 
 (def qr-code-hint
   {:color          colors/gray
-   :padding-bottom 24
+   :padding-top    24
+   :padding-bottom 22
    :text-align     :center})
 
 (def qr-code-padding
   15)
 
-(defn qr-code-container [dimensions]
+(defn qr-code-container [width]
   {:background-color colors/white
-   :width            (:width dimensions)
+   :width            width
    :align-items      :center
    :justify-content  :center
    :padding          qr-code-padding
    :border-radius    8})
 
-(def toolbar-done-text-ios
-  {:color          colors/blue
-   :letter-spacing -0.2
-   :font-size      17})
-
 (defstyle name-container
   {:flex           0.6
    :flex-direction :column
@@ -47,7 +43,6 @@
 (def toolbar-action-icon-container
   {:width           40
    :height          40
-   :margin-right    16
    :align-items     :center
    :justify-content :center})
 
@@ -66,16 +61,14 @@
    :justify-content :center})
 
 (def qr-code
-  {:background-color colors/gray-lighter
-   :flex-grow        1
+  {:flex-grow        1
    :align-items      :center
    :justify-content  :center})
 
 (def footer
-  {:background-color colors/gray-lighter
-   :flex-direction   :row
+  {:flex-direction   :row
    :justify-content  :center
-   :padding-bottom   50})
+   :padding-top      22})
 
 (def wallet-info
   {:align-items    :center

diff --git a/src/status_im/ui/components/qr_code_viewer/views.cljs b/src/status_im/ui/components/qr_code_viewer/views.cljs
@@ -1,59 +1,29 @@
 (ns status-im.ui.components.qr-code-viewer.views
-  (:require [re-frame.core :as re-frame]
-            [status-im.ui.components.react :as react]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]
-            [status-im.ui.components.status-bar.view :as status-bar]
-            [status-im.ui.components.list-selection :as list-selection]
-            [status-im.ui.components.qr-code-viewer.styles :as styles]
-            [status-im.ui.components.common.common :as common]
-            [status-im.ui.components.common.styles :as common.styles]
-            [status-im.utils.platform :as platform]
-            [status-im.i18n :as i18n]
+  (:require [reagent.core :as reagent]
             [status-im.react-native.js-dependencies :as rn-dependencies]
-            [reagent.core :as r])
-  (:require-macros [status-im.utils.views :refer [defview letsubs]]))
+            [status-im.ui.components.qr-code-viewer.styles :as styles]
+            [status-im.ui.components.react :as react]))
 
 (defn qr-code [props]
-  (r/create-element
+  (reagent/create-element
     rn-dependencies/qr-code
     (clj->js (merge {:inverted true} props))))
 
-(defn qr-viewer-toolbar [name qr-value]
-  [react/view styles/account-toolbar
-   [react/view styles/toolbar-contents
-    [react/view styles/toolbar-action-container
-     [common/icon-or-label {:on-press #(re-frame/dispatch [:navigate-back])}
-      :t/done styles/toolbar-done-text-ios :icons/close {:color :black}]]
-    [react/view styles/name-container
-     [react/text {:style           styles/name-text
-                  :number-of-lines 1} name]]
-    [react/view styles/toolbar-action-container
-     [react/touchable-highlight {:on-press #(list-selection/open-share {:message qr-value})}
-      [react/view styles/toolbar-action-icon-container
-       [vector-icons/icon :icons/share {:color :black}]]]]]])
-
-(defn qr-viewer-body [qr-value dimensions]
-  [react/view {:style     styles/qr-code
-               :on-layout #(let [layout (.. % -nativeEvent -layout)]
-                             (re-frame/dispatch [:set-in [:qr-modal :dimensions] {:width  (* 0.7 (.-width layout))
-                                                                                  :height (.-height layout)}]))}
-   [react/text {:style styles/qr-code-hint} (i18n/label :t/qr-code-public-key-hint)]
-   (when (:width dimensions)
-     [react/view {:style (styles/qr-code-container dimensions)}
-      [qr-code {:value qr-value
-                :size  (- (min (:width dimensions)
-                               (:height dimensions))
-                          (* 2 styles/qr-code-padding))}]])])
-
-(defn qr-viewer-footer [qr-value]
+(defn- footer [style value]
   [react/view styles/footer
    [react/view styles/wallet-info
-    [react/text {:style styles/hash-value-text} qr-value]]])
+    [react/text {:style (merge styles/hash-value-text style)}
+     value]]])
 
-(defview qr-viewer []
-  (letsubs [{:keys [qr-value dimensions contact]} [:get :qr-modal]]
-    [react/view styles/wallet-qr-code
-     [status-bar/status-bar {:type :modal}]
-     [qr-viewer-toolbar (:name contact) qr-value]
-     [qr-viewer-body qr-value dimensions]
-     [qr-viewer-footer qr-value]]))
+(defn qr-code-viewer [{:keys [hint-style footer-style]} value hint legend]
+  {:pre [(not (nil? value))]}
+  (let [{:keys [width height]} (react/get-dimensions "window")]
+    [react/view {:style     styles/qr-code}
+     [react/text {:style (merge styles/qr-code-hint hint-style)}
+      hint]
+     (when width
+       (let [size (int (* 0.7 (min width height)))]
+         [react/view {:style (styles/qr-code-container size)}
+          [qr-code {:value value
+                    :size  (- size (* 2 styles/qr-code-padding))}]]))
+     [footer footer-style legend]]))
diff --git a/src/status_im/ui/components/status_bar/styles.cljs b/src/status_im/ui/components/status_bar/styles.cljs
@@ -39,23 +39,23 @@
 ;; :modal
 (defstyle status-bar-modal
   {:ios     (create-status-bar-style {:background-color "#2f3031"})
-   :android (create-status-bar-style {:background-color styles/color-black})})
+   :android (create-status-bar-style {:background-color colors/black})})
 
 (defstyle view-modal
   {:ios     (create-view-style {:background-color "#2f3031"})
-   :android (create-view-style {:background-color styles/color-black
+   :android (create-view-style {:background-color colors/black
                                 :height           0})})
 
 ;; :modal-white
 (defstyle status-bar-modal-white
   {:ios     (create-status-bar-style {:background-color colors/white
                                       :bar-style        "default"})
-   :android (create-status-bar-style {:background-color styles/color-black
+   :android (create-status-bar-style {:background-color colors/black
                                       :bar-style        "light-content"})})
 
 (defstyle view-modal-white
   {:ios     (create-view-style {:background-color colors/white})
-   :android (create-view-style {:background-color styles/color-black
+   :android (create-view-style {:background-color colors/black
                                 :height           0})})
 
 ;; :modal-wallet
@@ -90,8 +90,8 @@
 
 ;; :wallet
 (defstyle status-bar-wallet
-          {:ios     (create-status-bar-style {:background-color colors/blue})
-           :android (create-status-bar-style {:translucent?     true})})
+  {:ios     (create-status-bar-style {:background-color colors/blue})
+   :android (create-status-bar-style {:translucent?     true})})
 
 (def view-wallet
   (create-view-style {:background-color styles/color-blue4

diff --git a/src/status_im/ui/components/status_bar/view.cljs b/src/status_im/ui/components/status_bar/view.cljs
@@ -12,7 +12,7 @@
           :modal-wallet [styles/status-bar-modal-wallet styles/view-modal-wallet]
           :transaction  [styles/status-bar-transaction styles/view-transaction]
           :wallet       [styles/status-bar-wallet styles/view-wallet]
-          :wallet-tab  [styles/status-bar-wallet-tab styles/view-wallet-tab]
+          :wallet-tab   [styles/status-bar-wallet-tab styles/view-wallet-tab]
           [styles/status-bar-default styles/view-default])]
     [react/view
      [react/status-bar status-bar-style]

diff --git a/src/status_im/ui/components/toolbar/view.cljs b/src/status_im/ui/components/toolbar/view.cljs
@@ -1,6 +1,7 @@
 (ns status-im.ui.components.toolbar.view
   (:require [reagent.core :as reagent]
             [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.list-selection :as list-selection]
@@ -28,20 +29,30 @@
    [vector-icons/icon icon icon-opts]])
 
 (defn nav-text
-  ([text] (nav-text text nil))
-  ([props text] (nav-text props text nil))
-  ([props text handler]
-   [react/text (utils/deep-merge {:style (merge styles/item styles/item-text) :on-press (or handler #(re-frame/dispatch [:navigate-back]))}
+  ([text] (nav-text nil text))
+  ([{:keys [handler] :as props} text]
+   [react/text (utils/deep-merge {:style    (merge styles/item styles/item-text)
+                                  :on-press (or handler #(re-frame/dispatch [:navigate-back]))}
                                  props)
     text]))
 
 (defn nav-clear-text
-  ([text] (nav-clear-text text nil))
-  ([text handler]
-   (nav-text styles/item-text-white-background text handler)))
+  ([text] (nav-clear-text nil text))
+  ([props text]
+   (nav-text (merge props styles/item-text-white-background) text)))
 
 (def default-nav-back [nav-button actions/default-back])
 
+(defn default-done
+  "Renders a touchable icon on Android or a label or iOS."
+  [{:keys [icon] :as props}]
+  (if platform/ios?
+    [react/view
+     [nav-text props
+      (i18n/label :t/done)]]
+    [react/view
+     [nav-button (merge props {:icon (or icon :icons/close)})]]))
+
 ;; Content
 
 (defn content-wrapper [content]