From c38f1ce8a498cdf4394af0ec96f4962a1633e1a8 Mon Sep 17 00:00:00 2001 From: Goran Jovic Date: Sat, 25 Nov 2017 11:26:04 +0100 Subject: [PATCH] feature #1996 - navigation from status author name or profile image to profile screen --- src/status_im/ui/screens/db.cljs | 2 + .../ui/screens/wallet/assets/styles.cljs | 59 +++++++++++++++-- .../ui/screens/wallet/assets/subs.cljs | 9 +-- .../ui/screens/wallet/assets/views.cljs | 63 +++++++++++-------- src/status_im/ui/screens/wallet/events.cljs | 6 ++ .../ui/screens/wallet/main/views.cljs | 9 +-- src/status_im/utils/ethereum/tokens.cljs | 8 ++- 7 files changed, 111 insertions(+), 45 deletions(-) diff --git a/src/status_im/ui/screens/db.cljs b/src/status_im/ui/screens/db.cljs index 096563e1bd..355e19272b 100644 --- a/src/status_im/ui/screens/db.cljs +++ b/src/status_im/ui/screens/db.cljs @@ -35,6 +35,7 @@ :sync-state :done :wallet {} :wallet.transactions constants/default-wallet-transactions + :wallet-selected-asset {} :prices {} :notifications {} :network constants/default-network @@ -178,6 +179,7 @@ :discoveries/new-discover :wallet/wallet :wallet/wallet.transactions + :wallet/wallet-selected-asset :prices/prices :prices/prices-loading? :notifications/notifications])) diff --git a/src/status_im/ui/screens/wallet/assets/styles.cljs b/src/status_im/ui/screens/wallet/assets/styles.cljs index cb488db9af..f76b15268b 100644 --- a/src/status_im/ui/screens/wallet/assets/styles.cljs +++ b/src/status_im/ui/screens/wallet/assets/styles.cljs @@ -1,7 +1,8 @@ (ns status-im.ui.screens.wallet.assets.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require [status-im.ui.components.styles :as styles] - [status-im.ui.components.tabs.styles :as tabs.styles])) + [status-im.ui.components.tabs.styles :as tabs.styles] + [status-im.utils.platform :as platform])) ;; TODO(goranjovic) - the following styles will be removed once reusable components ;; from other Wallet screens have been generalized and extracted @@ -59,14 +60,64 @@ :android {:letter-spacing -0.18} :ios {:letter-spacing -0.2}}) - (defstyle main-button-text {:color styles/color-blue4 - :background-color styles/color-blue4-transparent - :padding 20 :padding-horizontal nil :android {:font-size 13 :letter-spacing 0.46} :ios {:font-size 15 :letter-spacing -0.2}}) +(defstyle transactions-title + {:margin-left 16 + :color styles/color-gray4}) + +;; TODO(goranjovic): Generalize this and the set of buttons from main Wallet screen +;; into a single component e.g. button-set that would receive an ordered collection +;; of button descriptions (text, handler, disabled?, etc) and render them properly +;; while managing the position dependent formatting under the hood. +;; https://github.com/status-im/status-react/issues/2492 +(defn- border [position] + (let [radius (if platform/ios? 8 4)] + (case position + :first {:border-bottom-left-radius radius + :border-top-left-radius radius + :ios {:border-width 1} + :border-right-color styles/color-blue4} + :last {:border-bottom-right-radius radius + :border-top-right-radius radius + :ios {:border-top-width 1 + :border-right-width 1 + :border-bottom-width 1}} + {:android {:border-left-width 1 + :border-right-width 1} + :ios {:border-top-width 1 + :border-right-width 1 + :border-bottom-width 1} + :border-right-color styles/color-blue4}))) + +(defnstyle button-bar [position] + (merge {:border-color styles/color-white-transparent-3 + :background-color styles/color-blue4-transparent} + (border position))) + +(def token-toolbar-container + {:height 130 + :align-items :flex-start}) + +(def token-toolbar + {:flex-direction :column + :align-items :center + :justify-content :center + :height 130}) + +(defstyle token-name-title + {:margin-top 8 + :margin-bottom 4 + :android {:font-size 16} + :ios {:font-size 17}}) + +(defstyle token-symbol-title + {:color styles/color-gray4 + :android {:font-size 14} + :ios {:font-size 15}}) diff --git a/src/status_im/ui/screens/wallet/assets/subs.cljs b/src/status_im/ui/screens/wallet/assets/subs.cljs index b1c67a279b..dd6b08712e 100644 --- a/src/status_im/ui/screens/wallet/assets/subs.cljs +++ b/src/status_im/ui/screens/wallet/assets/subs.cljs @@ -1,11 +1,8 @@ (ns status-im.ui.screens.wallet.assets.subs (:require [re-frame.core :as re-frame])) -;; TODO(goranjovic) - this is currently hardcoded, will be replaced with actual data +;; TODO(goranjovic) - the USD value is currently hardcoded, will be replaced with actual data ;; in a different PR (re-frame/reg-sub :token-balance - (fn [_db] - {:token-symbol "SNT" - :token-name "Status" - :token-value 30 - :usd-value 0.93})) \ No newline at end of file + (fn [db] + (assoc-in db [:wallet-selected-asset :usd-value] 0.93))) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/assets/views.cljs b/src/status_im/ui/screens/wallet/assets/views.cljs index 7bf6fe453e..83a4a33e57 100644 --- a/src/status_im/ui/screens/wallet/assets/views.cljs +++ b/src/status_im/ui/screens/wallet/assets/views.cljs @@ -1,9 +1,6 @@ (ns status-im.ui.screens.wallet.assets.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [clojure.string :as string] - [re-frame.core :as re-frame] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.react :as react] + (:require [status-im.ui.components.react :as react] [status-im.ui.components.status-bar :as status-bar] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.button.view :as button] @@ -14,42 +11,49 @@ [status-im.ui.screens.wallet.assets.styles :as assets.styles] [status-im.ui.screens.wallet.main.styles :as main.styles] [status-im.ui.components.tabs.views :as tabs] - [status-im.ui.components.list.views :as list] - [status-im.ui.components.styles :as components.styles])) + [status-im.ui.components.styles :as components.styles] + [status-im.ui.screens.wallet.transactions.views :as transactions] + [status-im.utils.utils :as utils] + [status-im.ui.components.chat-icon.styles :as chat-icon.styles] + [status-im.utils.money :as money])) (defview my-token-tab-title [active?] - (letsubs [ {:keys [token-symbol]} [:token-balance]] + (letsubs [ {:keys [symbol]} [:token-balance]] [react/text {:uppercase? true :style (assets.styles/tab-title active?)} - (i18n/label :t/wallet-my-token {:symbol token-symbol})])) + (i18n/label :t/wallet-my-token {:symbol symbol})])) (defview my-token-tab-content [] (letsubs [syncing? [:syncing?] - {:keys [token-symbol - token-value + {:keys [symbol + amount + decimals usd-value]} [:token-balance]] [react/view components.styles/flex [react/view {:style assets.styles/total-balance-container} [react/view {:style assets.styles/total-balance} - [react/text {:style assets.styles/total-balance-value} token-value] - [react/text {:style assets.styles/total-balance-currency} token-symbol]] + [react/text {:style assets.styles/total-balance-value} (money/to-fixed (money/token->unit (or amount 0) decimals))] + [react/text {:style assets.styles/total-balance-currency} symbol]] [react/view {:style assets.styles/value-variation} [react/text {:style assets.styles/value-variation-title} (str usd-value " " "USD")] [components/change-display 0.05]] [react/view {:style (merge button.styles/buttons-container main.styles/buttons)} - [button/button {:disabled? syncing? - :on-press #() - :style (button.styles/button-bar :first) :text-style assets.styles/main-button-text} - (i18n/label :t/wallet-send-token {:symbol token-symbol})] - [button/button {:disabled? true - :on-press #() - :style (button.styles/button-bar :last) :text-style assets.styles/main-button-text} + [button/button {:disabled? syncing? + :on-press #(utils/show-popup "TODO" "Not implemented yet!") + :style (assets.styles/button-bar :first) + :text-style assets.styles/main-button-text} + (i18n/label :t/wallet-send-token {:symbol symbol})] + [button/button {:disabled? true + :on-press #(utils/show-popup "TODO" "Not implemented yet!") + :style (assets.styles/button-bar :last) + :text-style assets.styles/main-button-text} (i18n/label :t/wallet-exchange)]]] [react/view - [react/text (i18n/label :t/transactions)] - [react/text "Transaction list goes here"]]])) + [react/text {:style assets.styles/transactions-title} (i18n/label :t/transactions)] + [react/view {:flex-direction :row} + [transactions/history-list]]]])) (defn market-value-tab-title [active?] [react/text {:uppercase? true @@ -69,15 +73,22 @@ :content market-value-tab-title :screen market-value-tab-content}]) +(defn token-toolbar [name symbol icon] + [react/view assets.styles/token-toolbar + [react/image (assoc icon :style (chat-icon.styles/image-style 64))] + [react/text {:style assets.styles/token-name-title} + name] + [react/text {:style assets.styles/token-symbol-title} + symbol]]) + (defview my-token-main [] - (letsubs [current-tab [:get :view-id] - {:keys [token-symbol token-name]} [:token-balance]] + (letsubs [current-tab [:get :view-id] + {:keys [symbol name icon]} [:token-balance]] [react/view {:style component.styles/flex} [status-bar/status-bar] - [toolbar/toolbar {} + [toolbar/toolbar {:style assets.styles/token-toolbar-container} toolbar/default-nav-back - [toolbar/content-title - (str token-symbol " - " token-name)]] + [token-toolbar name symbol icon]] [tabs/swipable-tabs tabs-list current-tab true {:navigation-event :navigation-replace :tab-style assets.styles/tab diff --git a/src/status_im/ui/screens/wallet/events.cljs b/src/status_im/ui/screens/wallet/events.cljs index 2f7ec577c3..d415c3c779 100644 --- a/src/status_im/ui/screens/wallet/events.cljs +++ b/src/status_im/ui/screens/wallet/events.cljs @@ -203,3 +203,9 @@ :content (i18n/label :t/transactions-delete-content) :confirm-button-text (i18n/label :t/confirm) :on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}})) + +(handlers/register-handler-fx + :navigate-to-asset + (fn [{:keys [db]} [_ asset]] + {:db (assoc db :wallet-selected-asset asset) + :dispatch [:navigate-to :wallet-my-token]})) diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index e2e32ed8ce..0f7ab4457b 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.screens.wallet.main.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [clojure.string :as string] - [re-frame.core :as rf] + (:require [re-frame.core :as rf] [status-im.ui.components.button.view :as btn] [status-im.ui.components.drawer.view :as drawer] [status-im.ui.components.list.views :as list] @@ -10,12 +9,10 @@ [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.actions :as act] [status-im.i18n :as i18n] - [status-im.react-native.resources :as resources] [status-im.utils.config :as config] [status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.tokens :as tokens] [status-im.utils.money :as money] - [status-im.utils.platform :as platform] [status-im.utils.utils :as utils] [status-im.ui.screens.wallet.main.styles :as styles] [status-im.ui.screens.wallet.styles :as wallet.styles] @@ -88,9 +85,9 @@ [react/text {:style styles/add-asset-text} (i18n/label :t/wallet-add-asset)]]]]]) -(defn render-asset [{:keys [name symbol icon decimals amount]}] +(defn render-asset [{:keys [name symbol icon decimals amount] :as asset}] (if name ;; If no 'name' then this the dummy value used to render `add-asset` - [list/touchable-item #(utils/show-popup "TODO" (str "Details about " symbol " here")) + [list/touchable-item #(rf/dispatch [:navigate-to-asset asset]) [react/view [list/item (let [{:keys [source style]} icon] diff --git a/src/status_im/utils/ethereum/tokens.cljs b/src/status_im/utils/ethereum/tokens.cljs index 0557a25783..027fdd9b6d 100644 --- a/src/status_im/utils/ethereum/tokens.cljs +++ b/src/status_im/utils/ethereum/tokens.cljs @@ -5,9 +5,11 @@ (defn- asset-border [color] {:border-color color :border-width 1 :border-radius 32}) -(def ethereum {:name "Ethereum" :symbol :ETH :decimals 18 - :icon {:source (js/require "./resources/images/assets/ethereum.png") - :style (asset-border styles/color-light-blue-transparent)}}) +(def ethereum {:name "Ethereum" + :symbol :ETH + :decimals 18 + :icon {:source (js/require "./resources/images/assets/ethereum.png") + :style (asset-border styles/color-light-blue-transparent)}}) (def all {:mainnet