diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 56a3835b7e..d4dd36b1f5 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -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" diff --git a/src/status_im/ui/screens/subs.cljs b/src/status_im/ui/screens/subs.cljs index c5d7fd7d90..4be548051c 100644 --- a/src/status_im/ui/screens/subs.cljs +++ b/src/status_im/ui/screens/subs.cljs @@ -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)) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index f1f5a1e5a8..4aa053977c 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/wallet/assets/styles.cljs b/src/status_im/ui/screens/wallet/assets/styles.cljs new file mode 100644 index 0000000000..cb488db9af --- /dev/null +++ b/src/status_im/ui/screens/wallet/assets/styles.cljs @@ -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}}) + diff --git a/src/status_im/ui/screens/wallet/assets/subs.cljs b/src/status_im/ui/screens/wallet/assets/subs.cljs new file mode 100644 index 0000000000..b1c67a279b --- /dev/null +++ b/src/status_im/ui/screens/wallet/assets/subs.cljs @@ -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})) \ 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 new file mode 100644 index 0000000000..7bf6fe453e --- /dev/null +++ b/src/status_im/ui/screens/wallet/assets/views.cljs @@ -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}]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index fc6f4f8fa7..012f696c8b 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -159,4 +159,29 @@ :viewBox "0 0 16 8"}) (def recipient-name-container - {:padding-right 6}) \ No newline at end of file + {: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})) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index f79671590f..d582283344 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -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 "%") + "-%")]])) diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index 74f4c76e5a..f095bf0d57 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -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} diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index ea4ba3c1b7..a1d5ec38a8 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -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])