wallet (WIP): Hook up handlers to minimal send-transaction screen
This commit is contained in:
Oskar Thorén
Roman Volosovskyi
parent
dabaa0ae1c
commit
8d040aee11
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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))])
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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]]])
|
||||
Loading…
Reference in New Issue