feature #2465 - my token screen layout

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"

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

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

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

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

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

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})
+  {: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}))

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 "%")
+        "-%")]]))

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}

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