feature #1996 - navigation from status author name or profile image to profile screen
This commit is contained in:
parent
3795cd9888
commit
c38f1ce8a4
|
@ -35,6 +35,7 @@
|
||||||
:sync-state :done
|
:sync-state :done
|
||||||
:wallet {}
|
:wallet {}
|
||||||
:wallet.transactions constants/default-wallet-transactions
|
:wallet.transactions constants/default-wallet-transactions
|
||||||
|
:wallet-selected-asset {}
|
||||||
:prices {}
|
:prices {}
|
||||||
:notifications {}
|
:notifications {}
|
||||||
:network constants/default-network
|
:network constants/default-network
|
||||||
|
@ -178,6 +179,7 @@
|
||||||
:discoveries/new-discover
|
:discoveries/new-discover
|
||||||
:wallet/wallet
|
:wallet/wallet
|
||||||
:wallet/wallet.transactions
|
:wallet/wallet.transactions
|
||||||
|
:wallet/wallet-selected-asset
|
||||||
:prices/prices
|
:prices/prices
|
||||||
:prices/prices-loading?
|
:prices/prices-loading?
|
||||||
:notifications/notifications]))
|
:notifications/notifications]))
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
(ns status-im.ui.screens.wallet.assets.styles
|
(ns status-im.ui.screens.wallet.assets.styles
|
||||||
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
|
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
|
||||||
(:require [status-im.ui.components.styles :as styles]
|
(: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
|
;; TODO(goranjovic) - the following styles will be removed once reusable components
|
||||||
;; from other Wallet screens have been generalized and extracted
|
;; from other Wallet screens have been generalized and extracted
|
||||||
|
@ -59,14 +60,64 @@
|
||||||
:android {:letter-spacing -0.18}
|
:android {:letter-spacing -0.18}
|
||||||
:ios {:letter-spacing -0.2}})
|
:ios {:letter-spacing -0.2}})
|
||||||
|
|
||||||
|
|
||||||
(defstyle main-button-text
|
(defstyle main-button-text
|
||||||
{:color styles/color-blue4
|
{:color styles/color-blue4
|
||||||
:background-color styles/color-blue4-transparent
|
|
||||||
:padding 20
|
|
||||||
:padding-horizontal nil
|
:padding-horizontal nil
|
||||||
:android {:font-size 13
|
:android {:font-size 13
|
||||||
:letter-spacing 0.46}
|
:letter-spacing 0.46}
|
||||||
:ios {:font-size 15
|
:ios {:font-size 15
|
||||||
:letter-spacing -0.2}})
|
: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}})
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
(ns status-im.ui.screens.wallet.assets.subs
|
(ns status-im.ui.screens.wallet.assets.subs
|
||||||
(:require [re-frame.core :as re-frame]))
|
(: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
|
;; in a different PR
|
||||||
(re-frame/reg-sub :token-balance
|
(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}))
|
|
|
@ -1,9 +1,6 @@
|
||||||
(ns status-im.ui.screens.wallet.assets.views
|
(ns status-im.ui.screens.wallet.assets.views
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
(: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.status-bar :as status-bar]
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
[status-im.ui.components.toolbar.view :as toolbar]
|
||||||
[status-im.ui.components.button.view :as button]
|
[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.assets.styles :as assets.styles]
|
||||||
[status-im.ui.screens.wallet.main.styles :as main.styles]
|
[status-im.ui.screens.wallet.main.styles :as main.styles]
|
||||||
[status-im.ui.components.tabs.views :as tabs]
|
[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?]
|
(defview my-token-tab-title [active?]
|
||||||
(letsubs [ {:keys [token-symbol]} [:token-balance]]
|
(letsubs [ {:keys [symbol]} [:token-balance]]
|
||||||
[react/text {:uppercase? true
|
[react/text {:uppercase? true
|
||||||
:style (assets.styles/tab-title active?)}
|
: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 []
|
(defview my-token-tab-content []
|
||||||
(letsubs [syncing? [:syncing?]
|
(letsubs [syncing? [:syncing?]
|
||||||
{:keys [token-symbol
|
{:keys [symbol
|
||||||
token-value
|
amount
|
||||||
|
decimals
|
||||||
usd-value]} [:token-balance]]
|
usd-value]} [:token-balance]]
|
||||||
[react/view components.styles/flex
|
[react/view components.styles/flex
|
||||||
[react/view {:style assets.styles/total-balance-container}
|
[react/view {:style assets.styles/total-balance-container}
|
||||||
[react/view {:style assets.styles/total-balance}
|
[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/view {:style assets.styles/value-variation}
|
||||||
[react/text {:style assets.styles/value-variation-title}
|
[react/text {:style assets.styles/value-variation-title}
|
||||||
(str usd-value " " "USD")]
|
(str usd-value " " "USD")]
|
||||||
[components/change-display 0.05]]
|
[components/change-display 0.05]]
|
||||||
[react/view {:style (merge button.styles/buttons-container main.styles/buttons)}
|
[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}
|
||||||
|
(i18n/label :t/wallet-send-token {:symbol symbol})]
|
||||||
[button/button {:disabled? true
|
[button/button {:disabled? true
|
||||||
:on-press #()
|
:on-press #(utils/show-popup "TODO" "Not implemented yet!")
|
||||||
:style (button.styles/button-bar :last) :text-style assets.styles/main-button-text}
|
:style (assets.styles/button-bar :last)
|
||||||
|
:text-style assets.styles/main-button-text}
|
||||||
(i18n/label :t/wallet-exchange)]]]
|
(i18n/label :t/wallet-exchange)]]]
|
||||||
[react/view
|
[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?]
|
(defn market-value-tab-title [active?]
|
||||||
[react/text {:uppercase? true
|
[react/text {:uppercase? true
|
||||||
|
@ -69,15 +73,22 @@
|
||||||
:content market-value-tab-title
|
:content market-value-tab-title
|
||||||
:screen market-value-tab-content}])
|
: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 []
|
(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}
|
[react/view {:style component.styles/flex}
|
||||||
[status-bar/status-bar]
|
[status-bar/status-bar]
|
||||||
[toolbar/toolbar {}
|
[toolbar/toolbar {:style assets.styles/token-toolbar-container}
|
||||||
toolbar/default-nav-back
|
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
|
[tabs/swipable-tabs tabs-list current-tab true
|
||||||
{:navigation-event :navigation-replace
|
{:navigation-event :navigation-replace
|
||||||
:tab-style assets.styles/tab
|
:tab-style assets.styles/tab
|
||||||
|
|
|
@ -203,3 +203,9 @@
|
||||||
:content (i18n/label :t/transactions-delete-content)
|
:content (i18n/label :t/transactions-delete-content)
|
||||||
:confirm-button-text (i18n/label :t/confirm)
|
:confirm-button-text (i18n/label :t/confirm)
|
||||||
:on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}}))
|
: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]}))
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
(ns status-im.ui.screens.wallet.main.views
|
(ns status-im.ui.screens.wallet.main.views
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
(: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.button.view :as btn]
|
||||||
[status-im.ui.components.drawer.view :as drawer]
|
[status-im.ui.components.drawer.view :as drawer]
|
||||||
[status-im.ui.components.list.views :as list]
|
[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.view :as toolbar]
|
||||||
[status-im.ui.components.toolbar.actions :as act]
|
[status-im.ui.components.toolbar.actions :as act]
|
||||||
[status-im.i18n :as i18n]
|
[status-im.i18n :as i18n]
|
||||||
[status-im.react-native.resources :as resources]
|
|
||||||
[status-im.utils.config :as config]
|
[status-im.utils.config :as config]
|
||||||
[status-im.utils.ethereum.core :as ethereum]
|
[status-im.utils.ethereum.core :as ethereum]
|
||||||
[status-im.utils.ethereum.tokens :as tokens]
|
[status-im.utils.ethereum.tokens :as tokens]
|
||||||
[status-im.utils.money :as money]
|
[status-im.utils.money :as money]
|
||||||
[status-im.utils.platform :as platform]
|
|
||||||
[status-im.utils.utils :as utils]
|
[status-im.utils.utils :as utils]
|
||||||
[status-im.ui.screens.wallet.main.styles :as styles]
|
[status-im.ui.screens.wallet.main.styles :as styles]
|
||||||
[status-im.ui.screens.wallet.styles :as wallet.styles]
|
[status-im.ui.screens.wallet.styles :as wallet.styles]
|
||||||
|
@ -88,9 +85,9 @@
|
||||||
[react/text {:style styles/add-asset-text}
|
[react/text {:style styles/add-asset-text}
|
||||||
(i18n/label :t/wallet-add-asset)]]]]])
|
(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`
|
(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
|
[react/view
|
||||||
[list/item
|
[list/item
|
||||||
(let [{:keys [source style]} icon]
|
(let [{:keys [source style]} icon]
|
||||||
|
|
|
@ -5,7 +5,9 @@
|
||||||
(defn- asset-border [color]
|
(defn- asset-border [color]
|
||||||
{:border-color color :border-width 1 :border-radius 32})
|
{:border-color color :border-width 1 :border-radius 32})
|
||||||
|
|
||||||
(def ethereum {:name "Ethereum" :symbol :ETH :decimals 18
|
(def ethereum {:name "Ethereum"
|
||||||
|
:symbol :ETH
|
||||||
|
:decimals 18
|
||||||
:icon {:source (js/require "./resources/images/assets/ethereum.png")
|
:icon {:source (js/require "./resources/images/assets/ethereum.png")
|
||||||
:style (asset-border styles/color-light-blue-transparent)}})
|
:style (asset-border styles/color-light-blue-transparent)}})
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue