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

src/status_im/ui/screens/db.cljs

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

src/status_im/ui/screens/wallet/assets/styles.cljs

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

src/status_im/ui/screens/wallet/assets/subs.cljs

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

src/status_im/ui/screens/wallet/assets/views.cljs

@@ -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]
+  (: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.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
+            {:keys [symbol
-                    token-value
+                    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-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/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?
+       [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}
-       [button/button {:disabled? true
+        (i18n/label :t/wallet-send-token {:symbol symbol})]
-                       :on-press  #()
+       [button/button {:disabled?  true
-                       :style     (button.styles/button-bar :last) :text-style assets.styles/main-button-text}
+                       :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 {: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?]
   [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]
+  (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}
      [status-bar/status-bar]
-     [toolbar/toolbar {}
+     [toolbar/toolbar {:style assets.styles/token-toolbar-container}
       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
       {:navigation-event     :navigation-replace
        :tab-style            assets.styles/tab

src/status_im/ui/screens/wallet/events.cljs

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

src/status_im/ui/screens/wallet/main/views.cljs

@@ -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]
+  (:require [re-frame.core :as rf]
-            [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]

src/status_im/utils/ethereum/tokens.cljs

@@ -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
+(def ethereum {:name     "Ethereum"
-                     :icon {:source (js/require "./resources/images/assets/ethereum.png")
+               :symbol   :ETH
-                            :style (asset-border styles/color-light-blue-transparent)}})
+               :decimals 18
+               :icon     {:source (js/require "./resources/images/assets/ethereum.png")
+                          :style  (asset-border styles/color-light-blue-transparent)}})
 
 (def all
   {:mainnet