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

This commit is contained in:
Oskar Thorén 2017-08-11 10:58:20 +02:00 committed by Roman Volosovskyi
parent dabaa0ae1c
commit 8d040aee11
8 changed files with 302 additions and 18 deletions

View File

@ -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

View File

@ -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

View File

@ -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))])

View File

@ -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

View File

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

View File

@ -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}
[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"]]])
[action-button {:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
:view-style st/action-button
:text-style st/action-button-text
:text "Send"}]
[action-button {:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
:view-style st/action-button-center
:text-style st/action-button-text
:text "Request"}]
[action-button {:on-press (fn [] )
:view-style st/action-button
:text-style st/action-button-text-disabled
:text "Exchange"}]])
(defn main-section []
[rn/view {:style st/main-section}

View File

@ -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})

View File

@ -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]]])