[#12050] replace list-item usage by quo
Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
parent
c036469409
commit
ee02b90774
|
@ -194,7 +194,7 @@
|
||||||
|
|
||||||
(defn list-item
|
(defn list-item
|
||||||
[{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
|
[{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
|
||||||
left-side-alignment
|
left-side-alignment icon-color icon-bg-color
|
||||||
title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
|
title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
|
||||||
accessory-text accessibility-label title-accessibility-label accessory-style
|
accessory-text accessibility-label title-accessibility-label accessory-style
|
||||||
haptic-feedback haptic-type error animated animated-accessory? title-text-weight]
|
haptic-feedback haptic-type error animated animated-accessory? title-text-weight]
|
||||||
|
@ -204,9 +204,10 @@
|
||||||
animated platform/ios?
|
animated platform/ios?
|
||||||
haptic-type :selection}}]
|
haptic-type :selection}}]
|
||||||
(let [theme (if disabled :disabled theme)
|
(let [theme (if disabled :disabled theme)
|
||||||
{:keys [icon-color text-color icon-bg-color
|
{:keys [text-color active-background passive-background]}
|
||||||
active-background passive-background]}
|
|
||||||
(themes theme)
|
(themes theme)
|
||||||
|
icon-color (or icon-color (:icon-color (themes theme)))
|
||||||
|
icon-bg-color (or icon-bg-color (:icon-bg-color (themes theme)))
|
||||||
optional-haptic (fn []
|
optional-haptic (fn []
|
||||||
(when haptic-feedback
|
(when haptic-feedback
|
||||||
(haptic/trigger haptic-type)))
|
(haptic/trigger haptic-type)))
|
||||||
|
|
|
@ -18,19 +18,6 @@
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:justify-content :center})
|
:justify-content :center})
|
||||||
|
|
||||||
(def primary-text-base
|
|
||||||
{:font-size 16})
|
|
||||||
|
|
||||||
(def primary-text-only
|
|
||||||
(merge primary-text-base
|
|
||||||
{:padding-vertical 16}))
|
|
||||||
|
|
||||||
(def image-size 40)
|
|
||||||
|
|
||||||
(def item-image
|
|
||||||
{:width image-size
|
|
||||||
:height image-size})
|
|
||||||
|
|
||||||
(def icon-size 24)
|
(def icon-size 24)
|
||||||
(def icon-wrapper-size (+ icon-size (* 2 8)))
|
(def icon-wrapper-size (+ icon-size (* 2 8)))
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
(ns status-im.ui.components.list.views
|
(ns status-im.ui.components.list.views
|
||||||
(:require [reagent.core :as reagent]
|
(:require [reagent.core :as reagent]
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
|
||||||
[status-im.ui.components.list.styles :as styles]
|
[status-im.ui.components.list.styles :as styles]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.utils.platform :as platform]
|
[status-im.utils.platform :as platform]
|
||||||
|
@ -9,71 +8,16 @@
|
||||||
(def flat-list-class (reagent/adapt-react-class (.-FlatList react-native)))
|
(def flat-list-class (reagent/adapt-react-class (.-FlatList react-native)))
|
||||||
(def section-list-class (reagent/adapt-react-class (.-SectionList react-native)))
|
(def section-list-class (reagent/adapt-react-class (.-SectionList react-native)))
|
||||||
|
|
||||||
;;TODO THIS NAMESPACE is DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn item
|
|
||||||
([content] (item nil content))
|
|
||||||
([left content] (item left content nil))
|
|
||||||
([left content right]
|
|
||||||
[react/view {:style styles/item}
|
|
||||||
(when left
|
|
||||||
[react/view {:style styles/left-item-wrapper}
|
|
||||||
left])
|
|
||||||
[react/view {:style styles/content-item-wrapper}
|
|
||||||
content]
|
|
||||||
(when right
|
|
||||||
[react/view {:style styles/right-item-wrapper}
|
|
||||||
right])]))
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn touchable-item [handler item]
|
|
||||||
[react/touchable-highlight {:on-press handler}
|
|
||||||
[react/view
|
|
||||||
item]])
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn item-icon
|
|
||||||
[{:keys [icon style icon-opts]}]
|
|
||||||
{:pre [(not (nil? icon))]}
|
|
||||||
[react/view {:style (merge styles/item-icon-wrapper style)}
|
|
||||||
[icons/icon icon (merge icon-opts {:style styles/item-icon})]])
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn item-image
|
|
||||||
[{:keys [source style image-style]}]
|
|
||||||
[react/view {:style style}
|
|
||||||
[react/image {:source (if (fn? source) (source) source)
|
|
||||||
:style (merge styles/item-image image-style)}]])
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn item-primary-only
|
|
||||||
([s] (item-primary-only nil s))
|
|
||||||
([{:keys [style] :as props} s]
|
|
||||||
[react/text (merge {:style (merge styles/primary-text-only style)}
|
|
||||||
(dissoc props :style))
|
|
||||||
s]))
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn item-content
|
|
||||||
[& children]
|
|
||||||
(into [react/view {:style styles/item-content-view}] (keep identity children)))
|
|
||||||
|
|
||||||
;;TODO DEPRECATED, use status-im.ui.components.list-item.views
|
|
||||||
(defn list-item-with-radio-button
|
|
||||||
[{:keys [on-value-change style checked?]} item]
|
|
||||||
[react/touchable-highlight {:on-press #(on-value-change (not checked?))}
|
|
||||||
(conj item
|
|
||||||
[react/view {:style (merge style styles/item-checkbox)}])])
|
|
||||||
|
|
||||||
(def memo-wrap-render-fn
|
(def memo-wrap-render-fn
|
||||||
(memoize
|
(memoize
|
||||||
(fn [f render-data]
|
(fn [f render-data]
|
||||||
(fn [^js data]
|
(fn [^js data]
|
||||||
(reagent/as-element [f (.-item data) (.-index data) (.-separators data) render-data])))))
|
(reagent/as-element [f (.-item data) (.-index data) (.-separators data) render-data])))))
|
||||||
|
|
||||||
(def base-separator [react/view styles/base-separator])
|
|
||||||
|
|
||||||
(def default-separator [react/view styles/separator])
|
|
||||||
|
|
||||||
(def memo-separator-fn
|
(def memo-separator-fn
|
||||||
(memoize
|
(memoize
|
||||||
(fn [separator default-separator?]
|
(fn [separator default-separator?]
|
||||||
(when-let [separator (or separator (when (and platform/ios? default-separator?) default-separator))]
|
(when-let [separator (or separator (when (and platform/ios? default-separator?) [react/view styles/separator]))]
|
||||||
(fn []
|
(fn []
|
||||||
(reagent/as-element separator))))))
|
(reagent/as-element separator))))))
|
||||||
|
|
||||||
|
|
|
@ -15,11 +15,11 @@
|
||||||
:testnet (i18n/label :t/ropsten-network)
|
:testnet (i18n/label :t/ropsten-network)
|
||||||
:rinkeby (i18n/label :t/rinkeby-network)
|
:rinkeby (i18n/label :t/rinkeby-network)
|
||||||
:custom (i18n/label :t/custom))]
|
:custom (i18n/label :t/custom))]
|
||||||
[list/list-item-with-radio-button
|
[quo/list-item
|
||||||
{:checked? (= (get-in manage-network [:chain :value]) type)
|
{:title name
|
||||||
:on-value-change #(re-frame/dispatch [::network/input-changed :chain type])}
|
:accessory :radio
|
||||||
[list/item
|
:active (= (get-in manage-network [:chain :value]) type)
|
||||||
nil [list/item-primary-only name]]]))
|
:on-press #(re-frame/dispatch [::network/input-changed :chain type])}]))
|
||||||
|
|
||||||
(views/defview edit-network []
|
(views/defview edit-network []
|
||||||
(views/letsubs [manage-network [:networks/manage]
|
(views/letsubs [manage-network [:networks/manage]
|
||||||
|
@ -40,20 +40,18 @@
|
||||||
{:label (i18n/label :t/rpc-url)
|
{:label (i18n/label :t/rpc-url)
|
||||||
:placeholder (i18n/label :t/specify-rpc-url)
|
:placeholder (i18n/label :t/specify-rpc-url)
|
||||||
:default-value (get-in manage-network [:url :value])
|
:default-value (get-in manage-network [:url :value])
|
||||||
:on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]]
|
:on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]]]
|
||||||
[react/view {:padding-vertical 8}
|
[quo/list-header (i18n/label :t/network-chain)]
|
||||||
[react/i18n-text {:key :network-chain}]
|
[list/flat-list {:data [:mainnet :testnet :rinkeby :custom]
|
||||||
[list/flat-list {:data [:mainnet :testnet :rinkeby :custom]
|
:key-fn (fn [_ i] (str i))
|
||||||
:key-fn (fn [_ i] (str i))
|
:render-data manage-network
|
||||||
:separator list/base-separator
|
:render-fn render-network-type}]
|
||||||
:render-data manage-network
|
(when custom?
|
||||||
:render-fn render-network-type}]]
|
[react/view styles/edit-network-view
|
||||||
(when custom?
|
[quo/text-input
|
||||||
[react/view {:padding-vertical 8}
|
{:label (i18n/label :t/network-id)
|
||||||
[quo/text-input
|
:placeholder (i18n/label :t/specify-network-id)
|
||||||
{:label (i18n/label :t/network-id)
|
:on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]
|
||||||
:placeholder (i18n/label :t/specify-network-id)
|
|
||||||
:on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]]
|
|
||||||
[react/view styles/bottom-container
|
[react/view styles/bottom-container
|
||||||
[react/view {:flex 1}]
|
[react/view {:flex 1}]
|
||||||
[quo/button
|
[quo/button
|
||||||
|
|
|
@ -7,7 +7,8 @@
|
||||||
[status-im.ui.components.list.views :as list]
|
[status-im.ui.components.list.views :as list]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.components.topbar :as topbar]
|
[status-im.ui.components.topbar :as topbar]
|
||||||
[status-im.ui.components.colors :as colors])
|
[status-im.ui.components.colors :as colors]
|
||||||
|
[quo.core :as quo])
|
||||||
(:require-macros [status-im.utils.views :as views]))
|
(:require-macros [status-im.utils.views :as views]))
|
||||||
|
|
||||||
(defn- network-icon [connected? size]
|
(defn- network-icon [connected? size]
|
||||||
|
@ -29,15 +30,13 @@
|
||||||
|
|
||||||
(defn render-network [{:keys [id name] :as network} _ _ current-network]
|
(defn render-network [{:keys [id name] :as network} _ _ current-network]
|
||||||
(let [connected? (= id current-network)]
|
(let [connected? (= id current-network)]
|
||||||
[list/touchable-item #(re-frame/dispatch [::network/network-entry-pressed network])
|
[quo/list-item {:on-press #(re-frame/dispatch [::network/network-entry-pressed network])
|
||||||
[react/view styles/network-item
|
:icon :main-icons/network
|
||||||
[network-icon connected? 40]
|
:icon-bg-color (if connected? colors/blue colors/gray-lighter)
|
||||||
[react/view {:padding-horizontal 16}
|
:icon-color (if connected? colors/white-persist colors/gray)
|
||||||
[react/text {:style styles/network-item-name-text} name]
|
:title name
|
||||||
(when connected?
|
:subtitle (when connected? (i18n/label :t/connected))
|
||||||
[react/text {:style styles/network-item-connected-text
|
:chevron true}]))
|
||||||
:accessibility-label :connected-text}
|
|
||||||
(i18n/label :t/connected)])]]]))
|
|
||||||
|
|
||||||
(views/defview network-settings []
|
(views/defview network-settings []
|
||||||
(views/letsubs [current-network [:networks/current-network]
|
(views/letsubs [current-network [:networks/current-network]
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
[status-im.ui.components.colors :as colors]
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.copyable-text :as copyable-text]
|
[status-im.ui.components.copyable-text :as copyable-text]
|
||||||
[status-im.wallet.utils :as wallet.utils]
|
[status-im.wallet.utils :as wallet.utils]
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.keycard.common :as keycard.common]
|
[status-im.keycard.common :as keycard.common]
|
||||||
[status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
|
[status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
|
||||||
[status-im.ui.components.chat-icon.screen :as chat-icon]
|
[status-im.ui.components.chat-icon.screen :as chat-icon]
|
||||||
|
@ -25,7 +24,8 @@
|
||||||
[status-im.ui.screens.keycard.pin.views :as pin.views]
|
[status-im.ui.screens.keycard.pin.views :as pin.views]
|
||||||
[status-im.ui.components.bottom-panel.views :as bottom-panel]
|
[status-im.ui.components.bottom-panel.views :as bottom-panel]
|
||||||
[status-im.utils.utils :as utils]
|
[status-im.utils.utils :as utils]
|
||||||
[reagent.core :as reagent]))
|
[reagent.core :as reagent]
|
||||||
|
[status-im.ui.screens.wallet.components.views :as wallet.components]))
|
||||||
|
|
||||||
(defn separator []
|
(defn separator []
|
||||||
[react/view {:height 1 :background-color colors/gray-lighter}])
|
[react/view {:height 1 :background-color colors/gray-lighter}])
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
:style {:margin-right 8}}
|
:style {:margin-right 8}}
|
||||||
display-symbol]
|
display-symbol]
|
||||||
(if icon
|
(if icon
|
||||||
[list/item-image
|
[wallet.components/token-icon
|
||||||
(assoc icon
|
(assoc icon
|
||||||
:style {:background-color colors/gray-lighter
|
:style {:background-color colors/gray-lighter
|
||||||
:border-radius 16}
|
:border-radius 16}
|
||||||
|
|
|
@ -7,7 +7,6 @@
|
||||||
[status-im.ui.components.colors :as colors]
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
[status-im.ui.components.icons.icons :as icons]
|
||||||
[quo.core :as quo]
|
[quo.core :as quo]
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.components.topbar :as topbar]
|
[status-im.ui.components.topbar :as topbar]
|
||||||
[status-im.ui.screens.wallet.account.styles :as styles]
|
[status-im.ui.screens.wallet.account.styles :as styles]
|
||||||
|
@ -18,7 +17,8 @@
|
||||||
[status-im.utils.money :as money]
|
[status-im.utils.money :as money]
|
||||||
[status-im.wallet.utils :as wallet.utils]
|
[status-im.wallet.utils :as wallet.utils]
|
||||||
[status-im.ui.components.tabs :as tabs]
|
[status-im.ui.components.tabs :as tabs]
|
||||||
[quo.design-system.colors :as quo-colors])
|
[quo.design-system.colors :as quo-colors]
|
||||||
|
[status-im.ui.screens.wallet.components.views :as wallet.components])
|
||||||
(:require-macros [status-im.utils.views :as views]))
|
(:require-macros [status-im.utils.views :as views]))
|
||||||
|
|
||||||
(def state (reagent/atom {:tab :assets}))
|
(def state (reagent/atom {:tab :assets}))
|
||||||
|
@ -82,7 +82,7 @@
|
||||||
[quo/list-item
|
[quo/list-item
|
||||||
{:title (wallet.utils/display-symbol collectible)
|
{:title (wallet.utils/display-symbol collectible)
|
||||||
:subtitle name
|
:subtitle name
|
||||||
:icon [list/item-image icon]
|
:icon [wallet.components/token-icon icon]
|
||||||
:accessory :text
|
:accessory :text
|
||||||
:accessory-text items-number}]))
|
:accessory-text items-number}]))
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
[status-im.ui.components.chat-icon.screen :as chat-icon]
|
[status-im.ui.components.chat-icon.screen :as chat-icon]
|
||||||
[status-im.ui.components.colors :as colors]
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
[status-im.ui.components.icons.icons :as icons]
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.screens.wallet.accounts.sheets :as sheets]
|
[status-im.ui.screens.wallet.accounts.sheets :as sheets]
|
||||||
[status-im.ui.screens.wallet.accounts.styles :as styles]
|
[status-im.ui.screens.wallet.accounts.styles :as styles]
|
||||||
|
@ -16,7 +15,8 @@
|
||||||
[status-im.wallet.utils :as wallet.utils]
|
[status-im.wallet.utils :as wallet.utils]
|
||||||
[status-im.keycard.login :as keycard.login]
|
[status-im.keycard.login :as keycard.login]
|
||||||
[quo.react-native :as rn]
|
[quo.react-native :as rn]
|
||||||
[status-im.utils.utils :as utils.utils])
|
[status-im.utils.utils :as utils.utils]
|
||||||
|
[status-im.ui.screens.wallet.components.views :as wallet.components])
|
||||||
(:require-macros [status-im.utils.views :as views]))
|
(:require-macros [status-im.utils.views :as views]))
|
||||||
|
|
||||||
(views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width]
|
(views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width]
|
||||||
|
@ -75,9 +75,9 @@
|
||||||
:weight :inherit}
|
:weight :inherit}
|
||||||
(wallet.utils/display-symbol token)]]
|
(wallet.utils/display-symbol token)]]
|
||||||
:subtitle (str (if value value "...") " " currency)
|
:subtitle (str (if value value "...") " " currency)
|
||||||
:accessibility-label (str (:symbol token) "-asset-value")
|
:accessibility-label (str (:symbol token) "-asset-value")
|
||||||
:icon (if icon
|
:icon (if icon
|
||||||
[list/item-image icon]
|
[wallet.components/token-icon icon]
|
||||||
[chat-icon/custom-icon-view-list (:name token) color])}])
|
[chat-icon/custom-icon-view-list (:name token) color])}])
|
||||||
|
|
||||||
(views/defview assets []
|
(views/defview assets []
|
||||||
|
|
|
@ -7,3 +7,11 @@
|
||||||
|
|
||||||
(defn separator-dark []
|
(defn separator-dark []
|
||||||
[react/view (styles/separator-dark)])
|
[react/view (styles/separator-dark)])
|
||||||
|
|
||||||
|
(defn token-icon [{:keys [style source image-style]}]
|
||||||
|
[react/view {:style style}
|
||||||
|
[react/image {:source (if (fn? source) (source) source)
|
||||||
|
:style (merge
|
||||||
|
{:width 40
|
||||||
|
:height 40}
|
||||||
|
image-style)}]])
|
|
@ -10,7 +10,6 @@
|
||||||
[status-im.ui.components.colors :as colors]
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.tooltip.views :as tooltip]
|
[status-im.ui.components.tooltip.views :as tooltip]
|
||||||
[status-im.ui.components.chat-icon.screen :as chat-icon]
|
[status-im.ui.components.chat-icon.screen :as chat-icon]
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.wallet.utils :as wallet.utils]
|
[status-im.wallet.utils :as wallet.utils]
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
[status-im.ui.components.icons.icons :as icons]
|
||||||
[status-im.multiaccounts.core :as multiaccounts]
|
[status-im.multiaccounts.core :as multiaccounts]
|
||||||
|
@ -42,8 +41,9 @@
|
||||||
:margin-left 16}
|
:margin-left 16}
|
||||||
:accessibility-label :choose-asset-button}
|
:accessibility-label :choose-asset-button}
|
||||||
(if icon
|
(if icon
|
||||||
[list/item-image (assoc icon :style {:background-color colors/gray-lighter
|
[components/token-icon
|
||||||
:border-radius 50} :image-style {:width 32 :height 32})]
|
(assoc icon :style {:background-color colors/gray-lighter
|
||||||
|
:border-radius 50} :image-style {:width 32 :height 32})]
|
||||||
[chat-icon/custom-icon-view-list name color 32])
|
[chat-icon/custom-icon-view-list name color 32])
|
||||||
[react/text {:style {:margin-left 8
|
[react/text {:style {:margin-left 8
|
||||||
:max-width (/ window-width 4)}
|
:max-width (/ window-width 4)}
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.ui.components.topbar :as topbar]
|
[status-im.ui.components.topbar :as topbar]
|
||||||
[status-im.ui.components.search-input.view :as search-input]
|
[status-im.ui.components.search-input.view :as search-input]
|
||||||
[status-im.ui.components.colors :as colors])
|
[status-im.ui.components.colors :as colors]
|
||||||
|
[status-im.ui.screens.wallet.components.views :as wallet.components])
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
||||||
|
|
||||||
(defonce search-active? (reagent/atom false))
|
(defonce search-active? (reagent/atom false))
|
||||||
|
@ -54,7 +55,7 @@
|
||||||
:animated-accessory? false
|
:animated-accessory? false
|
||||||
:animated false
|
:animated false
|
||||||
:icon (if icon
|
:icon (if icon
|
||||||
[list/item-image icon]
|
[wallet.components/token-icon icon]
|
||||||
[chat-icon/custom-icon-view-list name color])
|
[chat-icon/custom-icon-view-list name color])
|
||||||
:title name
|
:title name
|
||||||
:subtitle (clojure.core/name symbol)
|
:subtitle (clojure.core/name symbol)
|
||||||
|
|
|
@ -9,14 +9,15 @@
|
||||||
[status-im.ui.components.topbar :as topbar]
|
[status-im.ui.components.topbar :as topbar]
|
||||||
[status-im.ui.screens.wallet.transactions.styles :as styles]
|
[status-im.ui.screens.wallet.transactions.styles :as styles]
|
||||||
[quo.core :as quo]
|
[quo.core :as quo]
|
||||||
[status-im.ui.components.toolbar :as toolbar])
|
[status-im.ui.components.toolbar :as toolbar]
|
||||||
|
[status-im.utils.utils :as utils])
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
||||||
|
|
||||||
(defn- transaction-icon
|
(defn- transaction-icon
|
||||||
[icon-key background-color color]
|
[icon-key background-color color]
|
||||||
{:icon icon-key
|
{:icon icon-key
|
||||||
:icon-opts {:color color}
|
:icon-color color
|
||||||
:style (styles/transaction-icon-background background-color)})
|
:icon-bg-color background-color})
|
||||||
|
|
||||||
(defn- transaction-type->icon
|
(defn- transaction-type->icon
|
||||||
[k]
|
[k]
|
||||||
|
@ -36,45 +37,29 @@
|
||||||
|
|
||||||
(defn render-transaction
|
(defn render-transaction
|
||||||
[{:keys [label contact address contact-accessibility-label
|
[{:keys [label contact address contact-accessibility-label
|
||||||
address-accessibility-label currency-text amount-text
|
currency-text amount-text
|
||||||
time-formatted on-touch-fn type hash]}
|
time-formatted on-touch-fn type hash]}
|
||||||
_ _ {:keys [keycard-account? transactions-management-enabled?]}]
|
_ _ {:keys [keycard-account? transactions-management-enabled?]}]
|
||||||
[react/view
|
[:<>
|
||||||
[list/touchable-item on-touch-fn
|
[quo/list-item
|
||||||
[react/view {:accessibility-label :transaction-item}
|
(merge
|
||||||
[list/item
|
{:on-press on-touch-fn
|
||||||
(when type
|
:accessibility-label :transaction-item
|
||||||
[list/item-icon (transaction-type->icon (keyword type))])
|
:title (str amount-text " " currency-text)
|
||||||
[list/item-content
|
:subtitle (str label
|
||||||
[react/view {:style styles/amount-time}
|
" "
|
||||||
[react/nested-text {:style styles/tx-amount
|
(when contact
|
||||||
:ellipsize-mode "tail"
|
[react/text {:style styles/address-contact
|
||||||
:number-of-lines 1}
|
:accessibility-label contact-accessibility-label}
|
||||||
[{:accessibility-label :amount-text}
|
contact])
|
||||||
amount-text]
|
" "
|
||||||
" "
|
(utils/get-shortened-address address)
|
||||||
[{:accessibility-label :currency-text}
|
" "
|
||||||
currency-text]]
|
(i18n/label :t/at)
|
||||||
[react/text {:style styles/tx-time}
|
" "
|
||||||
time-formatted]]
|
time-formatted)
|
||||||
[react/view {:style styles/address-row}
|
:chevron true}
|
||||||
[react/text {:style styles/address-label}
|
(when type (transaction-type->icon (keyword type))))]
|
||||||
label]
|
|
||||||
(when contact
|
|
||||||
[react/text {:style styles/address-contact
|
|
||||||
:accessibility-label contact-accessibility-label}
|
|
||||||
contact])
|
|
||||||
[quo/text {:style styles/address-hash
|
|
||||||
:monospace true
|
|
||||||
:color :secondary
|
|
||||||
:ellipsize-mode "middle"
|
|
||||||
:number-of-lines 1
|
|
||||||
:accessibility-label address-accessibility-label}
|
|
||||||
address]]]
|
|
||||||
[list/item-icon {:icon :main-icons/next
|
|
||||||
:style {:margin-top 10}
|
|
||||||
:icon-opts (merge styles/forward
|
|
||||||
{:accessibility-label :show-transaction-button})}]]]]
|
|
||||||
(when (and transactions-management-enabled?
|
(when (and transactions-management-enabled?
|
||||||
(not keycard-account?)
|
(not keycard-account?)
|
||||||
(= type :pending))
|
(= type :pending))
|
||||||
|
@ -92,12 +77,12 @@
|
||||||
{:on-press #(when link
|
{:on-press #(when link
|
||||||
(.openURL ^js react/linking link))}
|
(.openURL ^js react/linking link))}
|
||||||
[react/view
|
[react/view
|
||||||
{:style {:flex 1
|
{:style {:flex 1
|
||||||
:padding-horizontal 14
|
:padding-horizontal 14
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:background-color colors/blue-light
|
:background-color colors/blue-light
|
||||||
:height 52}}
|
:height 52}}
|
||||||
[icons/tiny-icon
|
[icons/tiny-icon
|
||||||
:tiny-icons/tiny-external
|
:tiny-icons/tiny-external
|
||||||
{:color colors/blue
|
{:color colors/blue
|
||||||
|
@ -120,26 +105,26 @@
|
||||||
|
|
||||||
(defn non-archival-node []
|
(defn non-archival-node []
|
||||||
[react/view
|
[react/view
|
||||||
{:style {:flex 1
|
{:style {:flex 1
|
||||||
:padding-horizontal 14
|
:padding-horizontal 14
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:background-color (quo/get-color :negative-02)
|
:background-color (quo/get-color :negative-02)
|
||||||
:height 52}}
|
:height 52}}
|
||||||
[react/text
|
[react/text
|
||||||
{:style {:color (quo/get-color :negative-01)}}
|
{:style {:color (quo/get-color :negative-01)}}
|
||||||
(i18n/label :t/non-archival-node)]])
|
(i18n/label :t/non-archival-node)]])
|
||||||
|
|
||||||
(defn history-list
|
(defn history-list
|
||||||
[{:keys [transaction-history-sections total]} address]
|
[{:keys [transaction-history-sections total]} address]
|
||||||
(let [fetching-recent-history? @(re-frame/subscribe [:wallet/fetching-recent-tx-history? address])
|
(let [fetching-recent-history? @(re-frame/subscribe [:wallet/fetching-recent-tx-history? address])
|
||||||
fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address])
|
fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address])
|
||||||
keycard-account? @(re-frame/subscribe [:multiaccounts/keycard-account?])
|
keycard-account? @(re-frame/subscribe [:multiaccounts/keycard-account?])
|
||||||
transactions-management-enabled? @(re-frame/subscribe [:wallet/transactions-management-enabled?])
|
transactions-management-enabled? @(re-frame/subscribe [:wallet/transactions-management-enabled?])
|
||||||
custom-rpc-node? @(re-frame/subscribe [:custom-rpc-node])
|
custom-rpc-node? @(re-frame/subscribe [:custom-rpc-node])
|
||||||
non-archival-rpc-node? @(re-frame/subscribe [:wallet/non-archival-node])
|
non-archival-rpc-node? @(re-frame/subscribe [:wallet/non-archival-node])
|
||||||
all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address])
|
all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address])
|
||||||
syncing-allowed? @(re-frame/subscribe [:mobile-network/syncing-allowed?])]
|
syncing-allowed? @(re-frame/subscribe [:mobile-network/syncing-allowed?])]
|
||||||
[react/view {:flex 1}
|
[react/view {:flex 1}
|
||||||
[etherscan-link address]
|
[etherscan-link address]
|
||||||
(cond non-archival-rpc-node?
|
(cond non-archival-rpc-node?
|
||||||
|
@ -154,11 +139,11 @@
|
||||||
[react/activity-indicator {:size :large
|
[react/activity-indicator {:size :large
|
||||||
:animating true}]])
|
:animating true}]])
|
||||||
[list/section-list
|
[list/section-list
|
||||||
{:sections transaction-history-sections
|
{:sections transaction-history-sections
|
||||||
:key-fn :hash
|
:key-fn :hash
|
||||||
:render-data {:keycard-account? keycard-account?
|
:render-data {:keycard-account? keycard-account?
|
||||||
:transactions-management-enabled? transactions-management-enabled?}
|
:transactions-management-enabled? transactions-management-enabled?}
|
||||||
:render-fn render-transaction
|
:render-fn render-transaction
|
||||||
:empty-component
|
:empty-component
|
||||||
[react/i18n-text {:style styles/empty-text
|
[react/i18n-text {:style styles/empty-text
|
||||||
:key (if (or fetching-recent-history? fetching-more-history?)
|
:key (if (or fetching-recent-history? fetching-more-history?)
|
||||||
|
@ -184,19 +169,16 @@
|
||||||
[:transactions/fetch-more address]))}
|
[:transactions/fetch-more address]))}
|
||||||
(i18n/label :t/transactions-load-more)]}]))]))
|
(i18n/label :t/transactions-load-more)]}]))]))
|
||||||
|
|
||||||
;; NOTE: Is this needed?
|
|
||||||
(defn details-header
|
(defn details-header
|
||||||
[date type amount-text currency-text]
|
[date type amount-text currency-text]
|
||||||
[react/view {:style styles/details-header}
|
[quo/list-item
|
||||||
[react/view {:style styles/details-header-icon}
|
(merge
|
||||||
(when type
|
{:title [react/nested-text {:style styles/details-header-value}
|
||||||
[list/item-icon (transaction-type->icon type)])]
|
[{:accessibility-label :amount-text} amount-text]
|
||||||
[react/view {:style styles/details-header-infos}
|
" "
|
||||||
[react/nested-text {:style styles/details-header-value}
|
[{:accessibility-label :currency-text} currency-text]]
|
||||||
[{:accessibility-label :amount-text} amount-text]
|
:subtitle date}
|
||||||
" "
|
(transaction-type->icon type))])
|
||||||
[{:accessibility-label :currency-text} currency-text]]
|
|
||||||
[react/text {:style styles/details-header-date} date]]])
|
|
||||||
|
|
||||||
(defn progress-bar [progress failed?]
|
(defn progress-bar [progress failed?]
|
||||||
[react/view {:style styles/progress-bar}
|
[react/view {:style styles/progress-bar}
|
||||||
|
@ -219,9 +201,9 @@
|
||||||
([label props-value]
|
([label props-value]
|
||||||
(details-list-row label props-value nil))
|
(details-list-row label props-value nil))
|
||||||
([label props-value extra-props-value]
|
([label props-value extra-props-value]
|
||||||
(let [[props value] (if (string? props-value)
|
(let [[props value] (if (string? props-value)
|
||||||
[nil props-value]
|
[nil props-value]
|
||||||
props-value)
|
props-value)
|
||||||
[extra-props extra-value] (if (string? extra-props-value)
|
[extra-props extra-value] (if (string? extra-props-value)
|
||||||
[nil extra-props-value]
|
[nil extra-props-value]
|
||||||
extra-props-value)]
|
extra-props-value)]
|
||||||
|
|
Loading…
Reference in New Issue