status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/ui/screens/db.cljs
View File

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

59
src/status_im/ui/screens/wallet/assets/styles.cljs
View File

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

9
src/status_im/ui/screens/wallet/assets/subs.cljs
View File

@ -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}))
(fn [db]
(assoc-in db [:wallet-selected-asset :usd-value] 0.93)))

63
src/status_im/ui/screens/wallet/assets/views.cljs
View File

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

6
src/status_im/ui/screens/wallet/events.cljs
View File

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

9
src/status_im/ui/screens/wallet/main/views.cljs
View File

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

8
src/status_im/utils/ethereum/tokens.cljs
View File

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