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 #2465 - my token screen layout

This commit is contained in:
Goran Jovic 2017-11-22 09:13:21 +01:00 committed by Goran Jović
parent 3933ded384
commit 43537fd644
10 changed files with 213 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/translations/en.cljs
View File

@ -291,6 +291,7 @@
:main-wallet "Main Wallet"
:wallet-error "Error loading data"
:wallet-send "Send"
:wallet-send-token "Send {{symbol}}"
:wallet-request "Request"
:wallet-exchange "Exchange"
:wallet-assets "Assets"
@ -299,6 +300,8 @@
:wallet-settings "Wallet settings"
:signing-phrase-description "Sign the transaction by entering your password. Make sure that the words above match your secret signing phrase"
:wallet-insufficient-funds "Insufficient funds"
:wallet-my-token "My {{symbol}}"
:wallet-market-value "Market value"
:request-transaction "Request transaction"
:send-request "Send request"
:share "Share"

1
src/status_im/ui/screens/subs.cljs
View File

@ -14,6 +14,7 @@
status-im.ui.screens.wallet.send.subs
status-im.ui.screens.wallet.request.subs
status-im.ui.screens.wallet.wallet-list.subs
status-im.ui.screens.wallet.assets.subs
status-im.ui.screens.network-settings.subs
status-im.bots.subs))

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

@ -41,6 +41,7 @@
[status-im.ui.screens.wallet.wallet-list.views :refer [wallet-list-screen]]
[status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
[status-im.ui.screens.wallet.send.transaction-sent.views :refer [transaction-sent transaction-sent-modal]]
[status-im.ui.screens.wallet.assets.views :as wallet-assets]
[status-im.ui.components.status-bar :as status-bar]
@ -77,6 +78,7 @@
:wallet-request-transaction request-transaction
(:transactions-history :unsigned-transactions) wallet-transactions/transactions
:wallet-transaction-details wallet-transactions/transaction-details
(:wallet-my-token :wallet-market-value) wallet-assets/my-token-main
:new-chat new-chat
:new-group new-group
:edit-contact-group edit-contact-group

72
src/status_im/ui/screens/wallet/assets/styles.cljs Normal file
View File

@ -0,0 +1,72 @@
(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]))
;; TODO(goranjovic) - the following styles will be removed once reusable components
;; from other Wallet screens have been generalized and extracted
;; The main difference is in colors - Wallet main screen uses blue background and
;; white or very light text colors, while on assets screens its usually black text on white background
(defnstyle tab [active?]
{:flex 1
:height tabs.styles/tab-height
:justify-content :center
:align-items :center
:border-bottom-width (if active? 2 1)
:border-bottom-color (if active?
styles/color-blue4
styles/color-gray10-transparent)})
(def tabs-container
{:flex-direction :row})
(defnstyle tab-title [active?]
{:ios {:font-size 15}
:android {:font-size 14}
:text-align :center
:color (if active?
styles/color-blue4
styles/color-black)})
(def total-balance-container
{:padding-top 20
:padding-bottom 24
:align-items :center
:justify-content :center})
(def total-balance
{:flex-direction :row})
(def total-balance-value
{:font-size 37
:color styles/color-black})
(defstyle total-balance-currency
{:font-size 37
:margin-left 9
:color styles/color-gray4
:android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}})
(def value-variation
{:flex-direction :row
:align-items :center})
(defstyle value-variation-title
{:font-size 14
:color styles/color-gray4
: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}})

11
src/status_im/ui/screens/wallet/assets/subs.cljs Normal file
View File

@ -0,0 +1,11 @@
(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
;; 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}))

84
src/status_im/ui/screens/wallet/assets/views.cljs Normal file
View File

@ -0,0 +1,84 @@
(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]
[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]
[status-im.i18n :as i18n]
[status-im.ui.components.styles :as component.styles]
[status-im.ui.components.button.styles :as button.styles]
[status-im.ui.screens.wallet.components.views :as components]
[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]))
(defview my-token-tab-title [active?]
(letsubs [ {:keys [token-symbol]} [:token-balance]]
[react/text {:uppercase? true
:style (assets.styles/tab-title active?)}
(i18n/label :t/wallet-my-token {:symbol token-symbol})]))
(defview my-token-tab-content []
(letsubs [syncing? [:syncing?]
{:keys [token-symbol
token-value
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/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}
(i18n/label :t/wallet-exchange)]]]
[react/view
[react/text (i18n/label :t/transactions)]
[react/text "Transaction list goes here"]]]))
(defn market-value-tab-title [active?]
[react/text {:uppercase? true
:style (assets.styles/tab-title active?)}
(i18n/label :t/wallet-market-value)])
(defn market-value-tab-content []
[react/view
[react/text
"Market value goes here"]])
(def tabs-list
[{:view-id :wallet-my-token
:content my-token-tab-title
:screen my-token-tab-content}
{:view-id :wallet-market-value
:content market-value-tab-title
:screen market-value-tab-content}])
(defview my-token-main []
(letsubs [current-tab [:get :view-id]
{:keys [token-symbol token-name]} [:token-balance]]
[react/view {:style component.styles/flex}
[status-bar/status-bar]
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title
(str token-symbol " - " token-name)]]
[tabs/swipable-tabs tabs-list current-tab true
{:navigation-event :navigation-replace
:tab-style assets.styles/tab
:tabs-container-style assets.styles/tabs-container}]]))

27
src/status_im/ui/screens/wallet/components/styles.cljs
View File

@ -159,4 +159,29 @@
:viewBox "0 0 16 8"})
(def recipient-name-container
{:padding-right 6})
{:padding-right 6})
(def today-variation-container
{:border-radius 100
:margin-left 8
:padding-horizontal 8
:padding-vertical 4})
(def today-variation-container-positive
(merge today-variation-container
{:background-color styles/color-green-1}))
(def today-variation-container-negative
(merge today-variation-container
{:background-color styles/color-red-3}))
(def today-variation
{:font-size 12})
(def today-variation-positive
(merge today-variation
{:color styles/color-green-2}))
(def today-variation-negative
(merge today-variation
{:color styles/color-red-4}))

12
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -117,3 +117,15 @@
[react/text {:style styles/button-text
:font (if platform/android? :medium :default)
:uppercase? (get-in platform/platform-specific [:uppercase?])} label])
(defn change-display [change]
(let [pos-change? (or (pos? change) (zero? change))]
[react/view {:style (if pos-change?
styles/today-variation-container-positive
styles/today-variation-container-negative)}
[react/text {:style (if pos-change?
styles/today-variation-positive
styles/today-variation-negative)}
(if change
(str (when pos-change? "+") change "%")
"-%")]]))

25
src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -55,31 +55,6 @@
:android {:letter-spacing -0.18}
:ios {:letter-spacing -0.2}})
(def today-variation-container
{:border-radius 100
:margin-left 8
:padding-horizontal 8
:padding-vertical 4})
(def today-variation-container-positive
(merge today-variation-container
{:background-color styles/color-green-1}))
(def today-variation-container-negative
(merge today-variation-container
{:background-color styles/color-red-3}))
(def today-variation
{:font-size 12})
(def today-variation-positive
(merge today-variation
{:color styles/color-green-2}))
(def today-variation-negative
(merge today-variation
{:color styles/color-red-4}))
(defstyle buttons
{:margin-top 34
:android {:margin-horizontal 21}

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

@ -18,6 +18,7 @@
[status-im.ui.screens.wallet.main.styles :as styles]
[status-im.ui.screens.wallet.styles :as wallet.styles]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.screens.wallet.components.views :as components]
[status-im.ui.components.button.styles :as button.styles]
[status-im.ui.screens.wallet.views :as wallet.views]))
@ -50,18 +51,6 @@
[(assoc (act/opts [{:text (i18n/label :t/wallet-settings) :value show-not-implemented!}]) :icon-opts {:color :white})
transaction-history-action]]])
(defn- change-display [change]
(let [pos-change? (or (pos? change) (zero? change))]
[react/view {:style (if pos-change?
styles/today-variation-container-positive
styles/today-variation-container-negative)}
[react/text {:style (if pos-change?
styles/today-variation-positive
styles/today-variation-negative)}
(if change
(str (when pos-change? "+") change "%")
"-%")]]))
(defn main-section [usd-value change syncing? error-message]
[react/view {:style styles/main-section}
(if syncing?
@ -75,7 +64,7 @@
[react/view {:style styles/value-variation}
[react/text {:style styles/value-variation-title}
(i18n/label :t/wallet-total-value)]
[change-display change]]
[components/change-display change]]
[react/view {:style (merge button.styles/buttons-container styles/buttons)}
[btn/button {:disabled? syncing?
:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])