implemented request transaction

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "Base64": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
+      "integrity": "sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg="
+    },
     "abbrev": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
@@ -958,11 +963,6 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
       "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
     },
-    "Base64": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
-      "integrity": "sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg="
-    },
     "base64-js": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
@@ -4940,9 +4940,9 @@
       "integrity": "sha1-lpHS50yRBGvRiiAgtk4qPYvpQLI="
     },
     "react-native-qrcode": {
-      "version": "0.2.5",
+      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/react-native-qrcode/-/react-native-qrcode-0.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-qrcode/-/react-native-qrcode-0.2.6.tgz",
-      "integrity": "sha1-DYHxnVlEsL/m7MNX/gqgmSnAEQU=",
+      "integrity": "sha1-3ZLxUcEYhgCSr5+lvAmV8vnd2xY=",
       "requires": {
         "create-react-class": "15.6.0",
         "prop-types": "15.5.10",
@@ -6125,11 +6125,6 @@
         }
       }
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-    },
     "string-range": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/string-range/-/string-range-1.2.2.tgz",
@@ -6150,6 +6145,11 @@
       "resolved": "https://registry.npmjs.org/string.fromcodepoint/-/string.fromcodepoint-0.2.1.tgz",
       "integrity": "sha1-jZeDM8C8klOPUPOD5IiPPlYZ1lM="
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

package.json

@@ -70,7 +70,7 @@
     "react-native-mapbox-gl": "github:mapbox/react-native-mapbox-gl#d2a0a851d57672132344596b26a4776172370937",
     "react-native-orientation": "github:youennPennarun/react-native-orientation",
     "react-native-popup-menu": "^0.7.1",
-    "react-native-qrcode": "^0.2.2",
+    "react-native-qrcode": "^0.2.6",
     "react-native-randombytes": "^2.1.0",
     "react-native-sortable-listview": "^0.1.1",
     "react-native-splash-screen": "1.0.9",

resources/icons/share.svg

@@ -0,0 +1,5 @@
+<svg width="24px" height="24px">
+    <g fill-rule="nonzero" fill="#000000">
+        <path d="M13,5.41421356 L13,14 C13,14.5522847 12.5522847,15 12,15 C11.4477153,15 11,14.5522847 11,14 L11,5.41421356 L8.70710678,7.70710678 C8.31658249,8.09763107 7.68341751,8.09763107 7.29289322,7.70710678 C6.90236893,7.31658249 6.90236893,6.68341751 7.29289322,6.29289322 L11.2928932,2.29289322 C11.6834175,1.90236893 12.3165825,1.90236893 12.7071068,2.29289322 L16.7071068,6.29289322 C17.0976311,6.68341751 17.0976311,7.31658249 16.7071068,7.70710678 C16.3165825,8.09763107 15.6834175,8.09763107 15.2928932,7.70710678 L13,5.41421356 L13,5.41421356 Z M3,11 C3,10.4477153 3.44771525,10 4,10 C4.55228475,10 5,10.4477153 5,11 L5,18 C5,18.5522847 5.44771525,19 6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,11 C19,10.4477153 19.4477153,10 20,10 C20.5522847,10 21,10.4477153 21,11 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,11 Z"></path>
+    </g>
+</svg>

src/status_im/components/icons/vector_icons.cljs

@@ -63,7 +63,8 @@
             :icons/commands-list       (slurp-svg "./resources/icons/commands_list.svg")
             :icons/dropdown-up         (slurp-svg "./resources/icons/dropdown_up.svg")
             :icons/dropdown            (slurp-svg "./resources/icons/dropdown.svg")
-            :icons/grab                (slurp-svg "./resources/icons/grab.svg")})
+            :icons/grab                (slurp-svg "./resources/icons/grab.svg")
+            :icons/share               (slurp-svg "./resources/icons/share.svg")})
 
 (defn normalize-property-name [n]
   (if (= n :icons/options)

src/status_im/components/styles.cljs

@@ -27,7 +27,10 @@
 (def color-steel "#838b91")
 (def color-white "white")
 (def color-white-transparent "#ffffff66")
+(def color-white-transparent-1 "#f1f1f11a")
 (def color-white-transparent-2 "#fefefe21")
+(def color-white-transparent-3 "#FFFFFF1A")
+(def color-white-transparent-4 "#FFFFFF33")
 (def color-light-blue "#628fe3")
 (def color-light-blue-transparent "#628fe333")
 (def color-light-blue2 "#eff3fc")

src/status_im/components/toolbar_new/actions.cljs

@@ -47,6 +47,9 @@
   {:icon    :icons/close
    :handler handler})
 
+(def default-close
+  (close default-handler))
+
 (defn close-white [handler]
   {:icon      :icons/close
    :icon-opts {:color :white}

src/status_im/components/toolbar_new/view.cljs

@@ -118,6 +118,7 @@
            background-color
            custom-content
            hide-border?
+           modal?
            border-style
            title-style
            style]}]
@@ -126,7 +127,7 @@
      [rn/view tst/toolbar
       (when-not hide-nav?
         [rn/view (tst/toolbar-nav-actions-container actions)
-         [nav-button (or nav-action act/default-back)]])
+         [nav-button (or nav-action (if modal? act/default-close act/default-back))]])
       (or custom-content
           [rn/view {:style tst/toolbar-container}
            [rn/text {:style (merge tst/toolbar-title-text title-style)
@@ -195,6 +196,7 @@
                                    nav-action
                                    actions
                                    style
+                                   modal?
                                    on-search-submit]
                             :as   opts}]
   (let [toggle-search-fn #(do
@@ -207,7 +209,8 @@
                                             (rf/dispatch [:set-in [:toolbar-search :text] ""])))]
                              [act/search-icon])
                            (into [(act/search #(toggle-search-fn search-key))] actions))]
-    [toolbar {:style          style
+    [toolbar {:modal?         modal?
+              :style          style
               :nav-action     (if show-search?
                                 (act/back #(toggle-search-fn nil))
                                 nav-action)

src/status_im/translations/en.cljs

@@ -345,6 +345,10 @@
    :wallet-add-asset                      "Add asset"
    :wallet-total-value                    "Total value"
    :wallet-settings                       "Wallet Settings"
+   :request-transaction                   "Request Transaction"
+   :send-request                          "Send request"
+   :share                                 "Share"
+   :currency                              "Currency"
    :transactions                          "Transactions"
    :transactions-sign                     "Sign"
    :transactions-sign-all                 "Sign all"

src/status_im/ui/screens/contacts/contact_list_modal/views.cljs

@@ -19,7 +19,8 @@
   (letsubs [show-search [:get-in [:toolbar-search :show]]
             search-text [:get-in [:toolbar-search :text]]]
     (toolbar-with-search
-      {:show-search?       (= show-search :contact-list)
+      {:modal?             true
+       :show-search?       (= show-search :contact-list)
        :search-text        search-text
        :search-key         :contact-list
        :title              (label :t/contacts)
@@ -61,20 +62,21 @@
             params [:get :contacts/click-params]]
     [drawer-view
      [view {:flex 1}
-      [status-bar {:type :modal}]
+      [status-bar]
       [contact-list-modal-toolbar]
       [list-view {:dataSource                (lw/to-datasource contacts)
                   :enableEmptySections       true
                   :renderRow                 (render-row click-handler action params)
                   :bounces                   false
                   :keyboardShouldPersistTaps :always
-                  :renderHeader              #(list-item
+                  :renderHeader              (when-not (:hide-actions? params)
+                                               #(list-item
                                                   [view
                                                    [actions-view action click-handler]
                                                    [common/bottom-shadow]
                                                    [common/form-title (label :t/choose-from-contacts)
                                                     {:count-value (count contacts)}]
-                                                 [common/list-header]])
+                                                   [common/list-header]]))
                   :renderFooter              #(list-item [view
                                                           [common/list-footer]
                                                           [common/bottom-shadow]])

src/status_im/ui/screens/db.cljs

@@ -102,7 +102,8 @@
                   :accounts/login
                   :my-profile/drawer
                   :my-profile/profile
-                  :my-profile/default-name]
+                  :my-profile/default-name
+                  :wallet/request-transaction]
                  :opt-un
                  [::current-public-key
                   ::modal

src/status_im/ui/screens/views.cljs

@@ -43,6 +43,7 @@
             [status-im.ui.screens.profile.qr-code.views :refer [qr-code-view]]
 
             [status-im.ui.screens.wallet.send.views :refer [send-transaction]]
+            [status-im.ui.screens.wallet.request.views :refer [request-transaction]]
             [status-im.ui.screens.wallet.wallet-list.views :refer [wallet-list-screen]]
             [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]))
 
@@ -63,6 +64,7 @@
                           (:wallet :chat-list :discover :contact-list) main-tabs
                           :wallet-list wallet-list-screen
                           :wallet-send-transaction send-transaction
+                          :wallet-request-transaction request-transaction
                           :discover-search-results discover-search-results
                           :new-chat new-chat
                           :new-group new-group

src/status_im/ui/screens/wallet/components/styles.cljs

@@ -0,0 +1,63 @@
+(ns status-im.ui.screens.wallet.components.styles
+  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
+  (:require [status-im.components.styles :as styles]))
+
+(def text-input
+  {:color          :white
+   :padding-left   14
+   :padding-right  14
+   :font-size      15
+   :padding-bottom 0
+   :padding-top    0
+   :height         52
+   :letter-spacing -0.2})
+
+(def label
+  {:color          :white
+   :font-size      14
+   :line-height    16
+   :letter-spacing -0.2})
+
+(defstyle amount-container
+  {:margin-top       8
+   :height           52
+   :background-color styles/color-white-transparent-3
+   :ios              {:border-radius 8}
+   :android          {:border-radius 4}})
+
+(def network
+  {:color          :white
+   :font-size      13
+   :letter-spacing -0.2})
+
+(def network-container
+  {:padding-horizontal 10
+   :height             27
+   :border-radius      100
+   :border-width       1
+   :border-color       styles/color-white-transparent-4
+   :align-items        :center
+   :justify-content    :center})
+
+(defstyle currency-container
+  {:margin-top       8
+   :height           52
+   :background-color styles/color-white-transparent-3
+   :justify-content  :center
+   :padding          14
+   :ios              {:border-radius 8}
+   :android          {:border-radius 4}})
+
+(defstyle wallet-container
+  {:margin-top       8
+   :height           52
+   :background-color styles/color-white-transparent-3
+   :justify-content  :center
+   :padding          14
+   :ios              {:border-radius 8}
+   :android          {:border-radius 4}})
+
+(def value
+  {:color          :white
+   :font-size      15
+   :letter-spacing -0.2})

src/status_im/ui/screens/wallet/components/views.cljs

@@ -0,0 +1,40 @@
+(ns status-im.ui.screens.wallet.components.views
+  (:require [status-im.components.react :as react]
+            [status-im.ui.screens.wallet.components.styles :as styles]
+            [status-im.i18n :as i18n]))
+
+(defn amount-input [& [{:keys [input-options style]}]]
+  [react/view {:flex 1}
+   [react/text {:style styles/label} (i18n/label :t/amount)]
+   [react/view (merge styles/amount-container style)
+    [react/text-input
+     (merge
+       {:keyboard-type          :numeric
+        :max-length             15
+        :placeholder            "0.000"
+        :placeholder-text-color "#ffffff66"
+        :selection-color        :white
+        :style                  styles/text-input}
+       input-options)]]])
+
+;;TODO (andrey) this should be choose component with the list of currencies
+(defn choose-currency [& [style]]
+  [react/view
+   [react/text {:style styles/label} (i18n/label :t/currency)]
+   [react/view (merge styles/currency-container
+                      style)
+    [react/text {:style styles/value} "ETH"]]])
+
+;;TODO (andrey) this should be choose component with the list of wallets
+(defn choose-wallet [& [style]]
+  [react/view
+   [react/text {:style styles/label} (i18n/label :t/wallet)]
+   [react/view (merge styles/wallet-container
+                      style)
+    [react/text {:style styles/value} "Main wallet"]]])
+
+(defn network-label
+  ([n] (network-label [{} n]))
+  ([style n] [react/view (merge styles/network-container
+                                style)
+               [react/text {:style styles/network} n]]))

src/status_im/ui/screens/wallet/db.cljs

@@ -1,6 +1,6 @@
 (ns status-im.ui.screens.wallet.db
-  (:require [cljs.spec.alpha :as spec]))
+  (:require [cljs.spec.alpha :as spec]
-
+            status-im.ui.screens.wallet.request.db))
 ;; (angusiguess) If we add more error types we can treat them as 'one-of' the following
 (spec/def :wallet/error #{:error})
 

src/status_im/ui/screens/wallet/events.cljs

@@ -8,7 +8,8 @@
 
             [status-im.native-module.core :as status]
             [status-im.ui.screens.wallet.navigation]
-            [taoensso.timbre :as log]))
+            [taoensso.timbre :as log]
+            status-im.ui.screens.wallet.request.events))
 
 (defn get-balance [{:keys [web3 account-id on-success on-error]}]
   (if (and web3 account-id)

src/status_im/ui/screens/wallet/main/views.cljs

@@ -73,7 +73,7 @@
        :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction])
        :disabled? (not config/wallet-wip-enabled?)}
       {:text     (i18n/label :t/wallet-request)
-       :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-request-transaction])
+       :on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
        :disabled? (not config/wallet-wip-enabled?)}
       {:text      (i18n/label :t/wallet-exchange)
        :disabled? true}]]]])
@@ -127,7 +127,7 @@
                                    :renderItem (list/wrap-render-fn render-add-asset-fn)}]
        :render-section-header-fn #()
        :on-refresh               #(rf/dispatch [:update-wallet])
-       :refreshing               (or prices-loading? balance-loading?)}]]))
+       :refreshing               (boolean (or prices-loading? balance-loading?))}]]))
 
 (defview wallet []
   (letsubs [eth-balance      [:eth-balance]

src/status_im/ui/screens/wallet/navigation.cljs

@@ -11,3 +11,7 @@
   [db _]
   (re-frame/dispatch [:update-transactions])
   db)
+
+(defmethod navigation/preload-data! :wallet-request-transaction
+  [db _]
+  (dissoc db :wallet/request-transaction))

src/status_im/ui/screens/wallet/request/db.cljs

@@ -0,0 +1,8 @@
+(ns status-im.ui.screens.wallet.request.db
+  (:require-macros [status-im.utils.db :refer [allowed-keys]])
+  (:require [cljs.spec.alpha :as spec]))
+
+(spec/def ::amount (spec/nilable string?))
+
+(spec/def :wallet/request-transaction (allowed-keys
+                                        :opt-un [::amount]))

src/status_im/ui/screens/wallet/request/events.cljs

@@ -0,0 +1,13 @@
+(ns status-im.ui.screens.wallet.request.events
+  (:require
+    [re-frame.core :as re-frame :refer [dispatch reg-fx]]
+    [status-im.utils.handlers :as handlers]))
+
+(handlers/register-handler-fx
+  :wallet-send-request
+  (fn [{{:wallet/keys [request-transaction]} :db} [_ {:keys [whisper-identity] :as contact}]]
+    {:dispatch-n [[:navigate-back]
+                  [:navigate-to-clean :chat-list]
+                  [:chat-with-command whisper-identity :request
+                   {:contact contact
+                    :amount (:amount request-transaction)}]]}))

src/status_im/ui/screens/wallet/request/styles.cljs

@@ -0,0 +1,57 @@
+(ns status-im.ui.screens.wallet.request.styles
+  (:require [status-im.components.styles :as styles]))
+
+(def main-container
+  {:flex 1})
+
+(def network-label
+  {:margin-top 27})
+
+(def network-container
+  {:flex        1
+   :align-items :center})
+
+(def qr-container
+  {:margin-top 16})
+
+(def choose-wallet-container
+  {:margin-top        27
+   :margin-horizontal 15})
+
+(def amount-container
+  {:margin-top        16
+   :margin-horizontal 15
+   :flex-direction    :row})
+
+(def choose-currency-container
+  {:margin-left 8})
+
+(def choose-currency
+  {:width 116})
+
+(def separator
+  {:height            1
+   :margin-horizontal 15
+   :background-color  styles/color-white-transparent-1
+   :margin-top        16})
+
+(def buttons-container
+  {:margin-vertical    15
+   :padding-horizontal 12
+   :flex-direction     :row
+   :align-items        :center})
+
+(def share-icon-container
+  {:margin-right 8})
+
+(def forward-icon-container
+  {:margin-left 8})
+
+(def button-text
+  {:color          :white
+   :font-size      15
+   :letter-spacing -0.2})
+
+(def send-request-container
+  {:flex-direction :row
+   :align-items    :center})

src/status_im/ui/screens/wallet/request/views.cljs

@@ -0,0 +1,69 @@
+(ns status-im.ui.screens.wallet.request.views
+  (:require-macros [status-im.utils.views :as views])
+  (:require
+    [re-frame.core :as re-frame]
+    [status-im.components.react :as react]
+    [status-im.components.qr-code :as components.qr-code]
+    [status-im.components.toolbar-new.actions :as actions]
+    [status-im.components.toolbar-new.view :as toolbar]
+    [status-im.components.status-bar :as status-bar]
+    [status-im.ui.screens.wallet.send.styles :as wallet-styles]
+    [status-im.components.icons.vector-icons :as vi]
+    [status-im.ui.screens.wallet.components.views :as components]
+    [status-im.ui.screens.wallet.request.styles :as styles]
+    [status-im.i18n :as i18n]
+    [status-im.utils.platform :as platform]))
+
+(defn toolbar-view []
+  [toolbar/toolbar2 {:style wallet-styles/toolbar :hide-border? true}
+   [toolbar/nav-button (actions/back-white actions/default-handler)]
+   [toolbar/content-title {:color :white} (i18n/label :t/request-transaction)]])
+
+(defn send-request []
+  (re-frame/dispatch [:navigate-to-modal
+                      :contact-list-modal
+                      {:handler #(re-frame/dispatch [:wallet-send-request %1])
+                       :action  :request
+                       :params  {:hide-actions? true}}]))
+
+(views/defview qr-code []
+  (views/letsubs [account [:get-current-account]]
+    [components.qr-code/qr-code
+     {:value   (.stringify js/JSON (clj->js {:address (:address account)
+                                             :amount  0}))
+      :bgColor :white
+      :fgColor "#4360df"
+      :size    256}]))
+
+(views/defview request-transaction []
+  [react/keyboard-avoiding-view  {:style wallet-styles/wallet-modal-container}
+   [status-bar/status-bar {:type :wallet}]
+   [toolbar-view]
+   [react/view styles/main-container
+    [react/scroll-view
+     [react/view styles/network-container
+      ;;TODO (andrey) name of active network should be used
+      [components/network-label styles/network-label "Testnet"]
+      [react/view styles/qr-container
+       [qr-code]]]]
+    [react/view styles/choose-wallet-container
+     [components/choose-wallet]]
+    [react/view styles/amount-container
+     [components/amount-input
+      {:input-options {:on-change-text
+                       #(re-frame/dispatch [:set-in [:wallet/request-transaction :amount] %])}}]
+     [react/view styles/choose-currency-container
+      [components/choose-currency styles/choose-currency]]]]
+   [react/view styles/separator]
+   [react/view styles/buttons-container
+    [vi/icon :icons/share {:color :white :container-style styles/share-icon-container}]
+    [react/text {:style      styles/button-text
+                 :font       (if platform/android? :medium :default)
+                 :uppercase? (get-in platform/platform-specific [:uppercase?])} (i18n/label :t/share)]
+    [react/view {:flex 1}]
+    [react/touchable-highlight {:on-press send-request}
+     [react/view styles/send-request-container
+      [react/text {:style      styles/button-text
+                   :font       (if platform/android? :medium :default)
+                   :uppercase? (get-in platform/platform-specific [:uppercase?])} (i18n/label :t/send-request)]
+      [vi/icon :icons/forward {:color :white :container-style styles/forward-icon-container}]]]]])

src/status_im/ui/screens/wallet/send/styles.cljs

@@ -1,13 +1,19 @@
 (ns status-im.ui.screens.wallet.send.styles
+  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
   (:require [status-im.components.styles :as styles]))
 
 (def wallet-container
   {:flex             1
    :background-color styles/color-white})
 
-(def toolbar
+(def wallet-modal-container
-  {:background-color styles/color-blue5
+  {:flex             1
-   :elevation        0})
+   :background-color styles/color-blue4})
+
+(defstyle toolbar
+  {:ios     {:background-color styles/color-blue4}
+   :android {:background-color styles/color-blue5
+             :elevation        0}})
 
 (def toolbar-title-container
   {:flex           1