wallet (WIP): Hook up handlers to minimal send-transaction screen

src/status_im/android/core.cljs

@@ -41,6 +41,8 @@
             [status-im.profile.screen :refer [profile my-profile]]
             [status-im.profile.edit.screen :refer [edit-my-profile]]
             [status-im.profile.photo-capture.screen :refer [profile-photo-capture]]
+            [status-im.ui.screens.wallet.send.views :refer [send-transaction]]
+            ;;[status-im.ui.screens.wallet.receive.views :refer [receive-transaction]]
             status-im.data-store.core
             [taoensso.timbre :as log]
             [status-im.components.status :as status]
@@ -123,6 +125,8 @@
            (let [current-view (validate-current-view @view-id @signed-up?)]
              (let [component (case current-view
                                :wallet main-tabs
+                               :wallet-send-transaction send-transaction
+                               ;;:wallet-receive-transaction receive-transaction
                                :discover main-tabs
                                :discover-search-results discover-search-results
                                :chat-list main-tabs

src/status_im/components/main_tabs.cljs

@@ -119,7 +119,8 @@
               [chats-list]
               [discover (= @view-id :discover)]
               [contact-groups-list (= @view-id :contact-list)]
-              ;; [wallet]
+              ;; TODO(oskarth): While wallet is in WIP we hide the wallet component
+              ;;[wallet (= @view-id :wallet)]
               ]
              [tabs {:selected-view-id @view-id
                     :prev-view-id     @prev-view-id

src/status_im/components/tabs/tabs.cljs

@@ -36,7 +36,8 @@
        [[create-tab 0 (nth tabs 0) selected-view-id prev-view-id]
         [create-tab 1 (nth tabs 1) selected-view-id prev-view-id]
         [create-tab 2 (nth tabs 2) selected-view-id prev-view-id]
-        ;; WALLET TAB [create-tab 3 (nth tabs 3) selected-view-id prev-view-id]
+        ;; WALLET TAB
+        ;;[create-tab 3 (nth tabs 3) selected-view-id prev-view-id]
         ])
      ;; todo: figure why it doesn't work on iOS release build
      #_(map-indexed #(create-tab %1 %2 selected-view-id prev-view-id) tab-list))])

src/status_im/ios/core.cljs

@@ -38,6 +38,8 @@
             [status-im.profile.screen :refer [profile my-profile]]
             [status-im.profile.edit.screen :refer [edit-my-profile]]
             [status-im.profile.photo-capture.screen :refer [profile-photo-capture]]
+            [status-im.ui.screens.wallet.send.views :refer [send-transaction]]
+            ;;[status-im.ui.screens.wallet.receive.views :refer [receive-transaction]]
             status-im.data-store.core
             [taoensso.timbre :as log]
             [status-im.chat.styles.screen :as st]
@@ -93,6 +95,8 @@
            (let [current-view (validate-current-view @view-id @signed-up?)]
              (let [component (case current-view
                                :wallet main-tabs
+                               :wallet-send-transaction send-transaction
+                               ;;:wallet-receive-transaction receive-transaction
                                :discover main-tabs
                                :discover-search-results discover-search-results
                                :chat-list main-tabs

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

@@ -94,10 +94,11 @@
    :border-radius    4})
 
 (def action-button
-  {:padding-vertical 13
+  {:padding-vertical   13
-   :flex-basis       0
+   :padding-horizontal 18
-   :flex             1
+   :flex-basis         0
-   :align-items      :center})
+   :flex               1
+   :align-items        :center})
 
 (def action-button-center
   (merge action-button

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

@@ -30,20 +30,29 @@
                     :custom-content [toolbar-title]
                     :custom-action  [toolbar-buttons]}])
 
+;; TODO: Use standard signature and move to action-button namespace
+(defn action-button [{:keys [on-press view-style text-style text]}]
+  [rn/touchable-highlight {:on-press on-press}
+   [rn/view {:style view-style}
+    [rn/text {:style      text-style
+              :font       :medium
+              :uppercase? false} text]]])
+
+;; TODO: button to go to send screen
 (defn action-buttons []
   [rn/view {:style st/action-buttons-container}
-   [rn/view {:style st/action-button}
+   [action-button {:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
-    [rn/text {:style      st/action-button-text
+                   :view-style st/action-button
-              :font       :medium
+                   :text-style st/action-button-text
-              :uppercase? true} "Send"]]
+                   :text "Send"}]
-   [rn/view {:style st/action-button-center}
+   [action-button {:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
-    [rn/text {:style      st/action-button-text
+                   :view-style st/action-button-center
-              :font       :medium
+                   :text-style st/action-button-text
-              :uppercase? true} "Request"]]
+                   :text "Request"}]
-   [rn/view {:style st/action-button}
+   [action-button {:on-press (fn [] )
-    [rn/text {:style      st/action-button-text-disabled
+                   :view-style st/action-button
-              :font       :medium
+                   :text-style st/action-button-text-disabled
-              :uppercase? true} "Exchange"]]])
+                   :text "Exchange"}]])
 
 (defn main-section []
   [rn/view {:style st/main-section}

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

@@ -0,0 +1,163 @@
+(ns status-im.ui.screens.wallet.send.styles
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
+  (:require [status-im.components.styles :as common]
+            [status-im.utils.platform :as platform]))
+
+;; XXX: Copy paste from main wallet
+;; TODO: Transfer to common space
+
+(def wallet-container
+  {:flex             1
+   :background-color common/color-white})
+
+(def toolbar
+  {:background-color common/color-blue5
+   :elevation        0})
+
+(def toolbar-title-container
+  {:flex           1
+   :flex-direction :row
+   :margin-left    6})
+
+(def toolbar-title-text
+  {:color        common/color-white
+   :font-size    17
+   :margin-right 4})
+
+(def toolbar-icon
+  {:width  24
+   :height 24})
+
+(def toolbar-title-icon
+  (merge toolbar-icon {:opacity 0.4}))
+
+(def toolbar-buttons-container
+  {:flex-direction  :row
+   :flex-shrink     1
+   :justify-content :space-between
+   :width           68
+   :margin-right    12})
+
+;;;;;;;;;;;;;;;;;;
+;; Main section ;;
+;;;;;;;;;;;;;;;;;;
+
+(def main-section
+  {:padding          16
+   :background-color common/color-blue4})
+
+(def total-balance-container
+  {:margin-top      18
+   :align-items     :center
+   :justify-content :center})
+
+(def total-balance
+  {:flex-direction :row})
+
+(def total-balance-value
+  {:font-size 37
+   :color     common/color-white})
+
+(def total-balance-currency
+  {:font-size   37
+   :margin-left 9
+   :color       common/color-white
+   :opacity     0.4})
+
+(def value-variation
+  {:flex-direction :row
+   :align-items    :center})
+
+(def value-variation-title
+  {:font-size 14
+   :color     common/color-white
+   :opacity   0.6})
+
+(def today-variation-container
+  {:border-radius      4
+   :margin-left        8
+   :padding-horizontal 8
+   :padding-vertical   4
+   :background-color   common/color-green-1})
+
+(def today-variation
+  {:font-size 12
+   :color     common/color-green-2})
+
+;;;;;;;;;;;;;;;;;;;;
+;; Action buttons ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(def action-buttons-container
+  {:flex-direction   :row
+   :background-color common/color-white-transparent-2
+   :margin-top       34
+   :margin-left      5
+   :margin-right     5
+   :border-radius    4})
+
+(def action-button
+  {:padding-vertical   13
+   :padding-horizontal 18
+   :flex-basis         0
+   :flex               1
+   :align-items        :center})
+
+(def action-button-center
+  (merge action-button
+         {:border-color       common/color-white-transparent-2
+          :border-left-width  1
+          :border-right-width 1}))
+
+(def action-button-text
+  {:font-size 13
+   :color     common/color-white})
+
+(def action-button-text-disabled
+  (merge action-button-text {:opacity 0.4}))
+
+;;;;;;;;;;;;;;;;;;;;
+;; Assets section ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(def asset-section
+  {:background-color common/color-white
+   :padding-vertical 16})
+
+(def asset-section-title
+  {:font-size   14
+   :margin-left 16
+   :color       common/color-gray4})
+
+(def asset-item-container
+  {:flex-direction :row
+   :align-items    :center
+   :padding        12})
+
+(def asset-item-currency-icon
+  {:height       40
+   :width        40
+   :margin-right 14})
+
+(def asset-item-value-container
+  {:flex           1
+   :flex-direction :row})
+
+(def asset-item-value
+  {:font-size 16
+   :color     common/color-black})
+
+(def asset-item-currency
+  {:font-size   16
+   :color       common/color-gray4
+   :margin-left 6})
+
+(def asset-item-details-icon
+  {:flex-shrink 1
+   :height      24
+   :width       24})
+
+(def asset-list-separator
+  {:margin-left         70
+   :border-bottom-width 1
+   :border-color        common/color-separator})

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

@@ -0,0 +1,101 @@
+(ns status-im.ui.screens.wallet.send.views
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [clojure.string :as string]
+            [re-frame.core :as rf]
+            [status-im.components.common.common :as common]
+            [status-im.components.drawer.view :as drawer]
+            [status-im.components.react :as rn]
+            [status-im.components.toolbar-new.view :as toolbar]
+            [status-im.components.toolbar-new.actions :as act]
+            [status-im.i18n :as i18n]
+            [status-im.utils.listview :as lw]
+            [status-im.utils.platform :as platform]
+            [status-im.ui.screens.wallet.main-screen.styles :as st]))
+
+;; XXX Copy paste from main-screen ns
+
+(defn toolbar-title []
+  [rn/view {:style st/toolbar-title-container}
+   [rn/text {:style st/toolbar-title-text
+             :font  :toolbar-title}
+    "Send Transaction"]
+   [rn/icon :dropdown_white st/toolbar-title-icon]])
+
+(defn toolbar-buttons []
+  [rn/view {:style st/toolbar-buttons-container}
+   [rn/icon :dots_vertical_white st/toolbar-icon]
+   [rn/icon :qr_white st/toolbar-icon]])
+
+(defn toolbar-view []
+  [toolbar/toolbar {:style          st/toolbar
+                    :nav-action     (act/list-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions]))
+                    :custom-content [toolbar-title]
+                    :custom-action  [toolbar-buttons]}])
+
+(defn action-buttons []
+  [rn/view {:style st/action-buttons-container}
+   [rn/view {:style st/action-button}
+    [rn/text {:style      st/action-button-text
+              :font       :medium
+              :uppercase? true} "Send"]]
+   [rn/view {:style st/action-button-center}
+    [rn/text {:style      st/action-button-text
+              :font       :medium
+              :uppercase? true} "Request"]]
+   [rn/view {:style st/action-button}
+    [rn/text {:style      st/action-button-text-disabled
+              :font       :medium
+              :uppercase? true} "Exchange"]]])
+
+(defn main-section []
+  [rn/view {:style st/main-section}
+   [rn/view {:style st/total-balance-container}
+    [rn/view {:style st/total-balance}
+     [rn/text {:style st/total-balance-value} "12.43"]
+     [rn/text {:style st/total-balance-currency} "USD"]]
+    [rn/view {:style st/value-variation}
+     [rn/text {:style st/value-variation-title} "Total value"]
+     [rn/view {:style st/today-variation-container}
+      [rn/text {:style st/today-variation} "+5.43%"]]]
+    [action-buttons]]])
+
+(defn asset-list-item [[id {:keys [currency amount] :as row}]]
+  [rn/view {:style st/asset-item-container}
+   [rn/image {:source {:uri :launch_logo}
+              :style  st/asset-item-currency-icon}]
+   [rn/view {:style st/asset-item-value-container}
+    [rn/text {:style st/asset-item-value} (str amount)]
+    [rn/text {:style      st/asset-item-currency
+              :uppercase? true}
+     id]]
+   [rn/icon :forward_gray st/asset-item-details-icon]])
+
+(defn render-separator-fn [assets-count]
+  (fn [_ row-id _]
+    (rn/list-item
+     ^{:key row-id}
+     [common/separator {} st/asset-list-separator])))
+
+(defn render-row-fn [row _ _]
+  (rn/list-item
+   [rn/touchable-highlight {:on-press #()}
+    [rn/view
+     [asset-list-item row]]]))
+
+(defn asset-section []
+  (let [assets {"eth" {:currency :eth :amount 0.445}
+                "snt" {:currency :snt :amount 1}
+                "gno" {:currency :gno :amount 0.024794}}]
+    [rn/view {:style st/asset-section}
+     [rn/text {:style st/asset-section-title} "Assets"]
+     [rn/list-view {:dataSource      (lw/to-datasource assets)
+                    :renderSeparator (when platform/ios? (render-separator-fn (count assets)))
+                    :renderRow       render-row-fn}]]))
+
+(defview send-transaction []
+  []
+  [rn/view {:style st/wallet-container}
+   [toolbar-view]
+   [rn/scroll-view
+    [main-section]
+    [asset-section]]])