feature #1996 - navigation from status author name or profile image to profile screen

This commit is contained in:
Goran Jovic 2017-11-25 11:26:04 +01:00 committed by Goran Jović
parent 3795cd9888
commit c38f1ce8a4
7 changed files with 111 additions and 45 deletions

View File

@ -35,6 +35,7 @@
:sync-state :done :sync-state :done
:wallet {} :wallet {}
:wallet.transactions constants/default-wallet-transactions :wallet.transactions constants/default-wallet-transactions
:wallet-selected-asset {}
:prices {} :prices {}
:notifications {} :notifications {}
:network constants/default-network :network constants/default-network
@ -178,6 +179,7 @@
:discoveries/new-discover :discoveries/new-discover
:wallet/wallet :wallet/wallet
:wallet/wallet.transactions :wallet/wallet.transactions
:wallet/wallet-selected-asset
:prices/prices :prices/prices
:prices/prices-loading? :prices/prices-loading?
:notifications/notifications])) :notifications/notifications]))

View File

@ -1,7 +1,8 @@
(ns status-im.ui.screens.wallet.assets.styles (ns status-im.ui.screens.wallet.assets.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.ui.components.styles :as styles] (: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 ;; TODO(goranjovic) - the following styles will be removed once reusable components
;; from other Wallet screens have been generalized and extracted ;; from other Wallet screens have been generalized and extracted
@ -59,14 +60,64 @@
:android {:letter-spacing -0.18} :android {:letter-spacing -0.18}
:ios {:letter-spacing -0.2}}) :ios {:letter-spacing -0.2}})
(defstyle main-button-text (defstyle main-button-text
{:color styles/color-blue4 {:color styles/color-blue4
:background-color styles/color-blue4-transparent
:padding 20
:padding-horizontal nil :padding-horizontal nil
:android {:font-size 13 :android {:font-size 13
:letter-spacing 0.46} :letter-spacing 0.46}
:ios {:font-size 15 :ios {:font-size 15
:letter-spacing -0.2}}) :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}})

View File

@ -1,11 +1,8 @@
(ns status-im.ui.screens.wallet.assets.subs (ns status-im.ui.screens.wallet.assets.subs
(:require [re-frame.core :as re-frame])) (: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 ;; in a different PR
(re-frame/reg-sub :token-balance (re-frame/reg-sub :token-balance
(fn [_db] (fn [db]
{:token-symbol "SNT" (assoc-in db [:wallet-selected-asset :usd-value] 0.93)))
:token-name "Status"
:token-value 30
:usd-value 0.93}))

View File

@ -1,9 +1,6 @@
(ns status-im.ui.screens.wallet.assets.views (ns status-im.ui.screens.wallet.assets.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [clojure.string :as string] (:require [status-im.ui.components.react :as react]
[re-frame.core :as re-frame]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar :as status-bar] [status-im.ui.components.status-bar :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.button.view :as button] [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.assets.styles :as assets.styles]
[status-im.ui.screens.wallet.main.styles :as main.styles] [status-im.ui.screens.wallet.main.styles :as main.styles]
[status-im.ui.components.tabs.views :as tabs] [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?] (defview my-token-tab-title [active?]
(letsubs [ {:keys [token-symbol]} [:token-balance]] (letsubs [ {:keys [symbol]} [:token-balance]]
[react/text {:uppercase? true [react/text {:uppercase? true
:style (assets.styles/tab-title active?)} :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 [] (defview my-token-tab-content []
(letsubs [syncing? [:syncing?] (letsubs [syncing? [:syncing?]
{:keys [token-symbol {:keys [symbol
token-value amount
decimals
usd-value]} [:token-balance]] usd-value]} [:token-balance]]
[react/view components.styles/flex [react/view components.styles/flex
[react/view {:style assets.styles/total-balance-container} [react/view {:style assets.styles/total-balance-container}
[react/view {:style assets.styles/total-balance} [react/view {:style assets.styles/total-balance}
[react/text {:style assets.styles/total-balance-value} token-value] [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} token-symbol]] [react/text {:style assets.styles/total-balance-currency} symbol]]
[react/view {:style assets.styles/value-variation} [react/view {:style assets.styles/value-variation}
[react/text {:style assets.styles/value-variation-title} [react/text {:style assets.styles/value-variation-title}
(str usd-value " " "USD")] (str usd-value " " "USD")]
[components/change-display 0.05]] [components/change-display 0.05]]
[react/view {:style (merge button.styles/buttons-container main.styles/buttons)} [react/view {:style (merge button.styles/buttons-container main.styles/buttons)}
[button/button {:disabled? syncing? [button/button {:disabled? syncing?
:on-press #() :on-press #(utils/show-popup "TODO" "Not implemented yet!")
:style (button.styles/button-bar :first) :text-style assets.styles/main-button-text} :style (assets.styles/button-bar :first)
(i18n/label :t/wallet-send-token {:symbol token-symbol})] :text-style assets.styles/main-button-text}
(i18n/label :t/wallet-send-token {:symbol symbol})]
[button/button {:disabled? true [button/button {:disabled? true
:on-press #() :on-press #(utils/show-popup "TODO" "Not implemented yet!")
:style (button.styles/button-bar :last) :text-style assets.styles/main-button-text} :style (assets.styles/button-bar :last)
:text-style assets.styles/main-button-text}
(i18n/label :t/wallet-exchange)]]] (i18n/label :t/wallet-exchange)]]]
[react/view [react/view
[react/text (i18n/label :t/transactions)] [react/text {:style assets.styles/transactions-title} (i18n/label :t/transactions)]
[react/text "Transaction list goes here"]]])) [react/view {:flex-direction :row}
[transactions/history-list]]]]))
(defn market-value-tab-title [active?] (defn market-value-tab-title [active?]
[react/text {:uppercase? true [react/text {:uppercase? true
@ -69,15 +73,22 @@
:content market-value-tab-title :content market-value-tab-title
:screen market-value-tab-content}]) :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 [] (defview my-token-main []
(letsubs [current-tab [:get :view-id] (letsubs [current-tab [:get :view-id]
{:keys [token-symbol token-name]} [:token-balance]] {:keys [symbol name icon]} [:token-balance]]
[react/view {:style component.styles/flex} [react/view {:style component.styles/flex}
[status-bar/status-bar] [status-bar/status-bar]
[toolbar/toolbar {} [toolbar/toolbar {:style assets.styles/token-toolbar-container}
toolbar/default-nav-back toolbar/default-nav-back
[toolbar/content-title [token-toolbar name symbol icon]]
(str token-symbol " - " token-name)]]
[tabs/swipable-tabs tabs-list current-tab true [tabs/swipable-tabs tabs-list current-tab true
{:navigation-event :navigation-replace {:navigation-event :navigation-replace
:tab-style assets.styles/tab :tab-style assets.styles/tab

View File

@ -203,3 +203,9 @@
:content (i18n/label :t/transactions-delete-content) :content (i18n/label :t/transactions-delete-content)
:confirm-button-text (i18n/label :t/confirm) :confirm-button-text (i18n/label :t/confirm)
:on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}})) :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]}))

View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.main.views (ns status-im.ui.screens.wallet.main.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [clojure.string :as string] (:require [re-frame.core :as rf]
[re-frame.core :as rf]
[status-im.ui.components.button.view :as btn] [status-im.ui.components.button.view :as btn]
[status-im.ui.components.drawer.view :as drawer] [status-im.ui.components.drawer.view :as drawer]
[status-im.ui.components.list.views :as list] [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.view :as toolbar]
[status-im.ui.components.toolbar.actions :as act] [status-im.ui.components.toolbar.actions :as act]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.react-native.resources :as resources]
[status-im.utils.config :as config] [status-im.utils.config :as config]
[status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.core :as ethereum]
[status-im.utils.ethereum.tokens :as tokens] [status-im.utils.ethereum.tokens :as tokens]
[status-im.utils.money :as money] [status-im.utils.money :as money]
[status-im.utils.platform :as platform]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.ui.screens.wallet.main.styles :as styles] [status-im.ui.screens.wallet.main.styles :as styles]
[status-im.ui.screens.wallet.styles :as wallet.styles] [status-im.ui.screens.wallet.styles :as wallet.styles]
@ -88,9 +85,9 @@
[react/text {:style styles/add-asset-text} [react/text {:style styles/add-asset-text}
(i18n/label :t/wallet-add-asset)]]]]]) (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` (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 [react/view
[list/item [list/item
(let [{:keys [source style]} icon] (let [{:keys [source style]} icon]

View File

@ -5,7 +5,9 @@
(defn- asset-border [color] (defn- asset-border [color]
{:border-color color :border-width 1 :border-radius 32}) {:border-color color :border-width 1 :border-radius 32})
(def ethereum {:name "Ethereum" :symbol :ETH :decimals 18 (def ethereum {:name "Ethereum"
:symbol :ETH
:decimals 18
:icon {:source (js/require "./resources/images/assets/ethereum.png") :icon {:source (js/require "./resources/images/assets/ethereum.png")
:style (asset-border styles/color-light-blue-transparent)}}) :style (asset-border styles/color-light-blue-transparent)}})