From 8d040aee11ae4a57bfc9de793eb099f1f8675431 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Thor=C3=A9n?= Date: Fri, 11 Aug 2017 10:58:20 +0200 Subject: [PATCH] wallet (WIP): Hook up handlers to minimal send-transaction screen --- src/status_im/android/core.cljs | 4 + src/status_im/components/main_tabs.cljs | 3 +- src/status_im/components/tabs/tabs.cljs | 3 +- src/status_im/ios/core.cljs | 4 + .../ui/screens/wallet/main_screen/styles.cljs | 9 +- .../ui/screens/wallet/main_screen/views.cljs | 33 ++-- .../ui/screens/wallet/send/styles.cljs | 163 ++++++++++++++++++ .../ui/screens/wallet/send/views.cljs | 101 +++++++++++ 8 files changed, 302 insertions(+), 18 deletions(-) create mode 100644 src/status_im/ui/screens/wallet/send/styles.cljs create mode 100644 src/status_im/ui/screens/wallet/send/views.cljs diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index 8d385e61a2..432b54a080 100644 --- a/src/status_im/android/core.cljs +++ b/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 diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index 1d5f41a3b1..600dabaf7d 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/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 diff --git a/src/status_im/components/tabs/tabs.cljs b/src/status_im/components/tabs/tabs.cljs index 5b7ab9c7e0..b81f036a59 100644 --- a/src/status_im/components/tabs/tabs.cljs +++ b/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))]) diff --git a/src/status_im/ios/core.cljs b/src/status_im/ios/core.cljs index f757cd6b5b..90d2786e54 100644 --- a/src/status_im/ios/core.cljs +++ b/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 diff --git a/src/status_im/ui/screens/wallet/main_screen/styles.cljs b/src/status_im/ui/screens/wallet/main_screen/styles.cljs index cdde2aa779..1d6676dc35 100644 --- a/src/status_im/ui/screens/wallet/main_screen/styles.cljs +++ b/src/status_im/ui/screens/wallet/main_screen/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/wallet/main_screen/views.cljs b/src/status_im/ui/screens/wallet/main_screen/views.cljs index 800c5ad7a3..9e9f9d94d5 100644 --- a/src/status_im/ui/screens/wallet/main_screen/views.cljs +++ b/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} - [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} diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs new file mode 100644 index 0000000000..b20e36ab38 --- /dev/null +++ b/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}) diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs new file mode 100644 index 0000000000..2c2b1e3fca --- /dev/null +++ b/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]]])