[#12050] replace list-item usage by quo

Signed-off-by: andrey <motor4ik@gmail.com>

src/quo/components/list/item.cljs

@@ -194,7 +194,7 @@
 
 (defn list-item
   [{: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
            accessory-text accessibility-label title-accessibility-label accessory-style
            haptic-feedback haptic-type error animated animated-accessory? title-text-weight]
@@ -204,9 +204,10 @@
            animated           platform/ios?
            haptic-type        :selection}}]
   (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)
+        icon-color (or icon-color (:icon-color (themes theme)))
+        icon-bg-color (or icon-bg-color (:icon-bg-color (themes theme)))
         optional-haptic (fn []
                           (when haptic-feedback
                             (haptic/trigger haptic-type)))

src/status_im/ui/components/list/styles.cljs

@@ -18,19 +18,6 @@
    :align-items     :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-wrapper-size (+ icon-size (* 2 8)))
 

src/status_im/ui/components/list/views.cljs

@@ -1,6 +1,5 @@
 (ns status-im.ui.components.list.views
   (: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.react :as react]
             [status-im.utils.platform :as platform]
@@ -9,71 +8,16 @@
 (def flat-list-class (reagent/adapt-react-class (.-FlatList 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
   (memoize
    (fn [f render-data]
      (fn [^js 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
   (memoize
    (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 []
          (reagent/as-element separator))))))
 

src/status_im/ui/screens/network/edit_network/views.cljs

@@ -15,11 +15,11 @@
                :testnet (i18n/label :t/ropsten-network)
                :rinkeby (i18n/label :t/rinkeby-network)
                :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/letsubs [manage-network [:networks/manage]
@@ -40,20 +40,18 @@
            {:label          (i18n/label :t/rpc-url)
             :placeholder    (i18n/label :t/specify-rpc-url)
             :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]
                          :key-fn      (fn [_ i] (str i))
-                           :separator   list/base-separator
                          :render-data manage-network
-                           :render-fn   render-network-type}]]
+                         :render-fn   render-network-type}]
         (when custom?
-           [react/view {:padding-vertical 8}
+          [react/view styles/edit-network-view
            [quo/text-input
             {:label          (i18n/label :t/network-id)
              :placeholder    (i18n/label :t/specify-network-id)
-              :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]]
+             :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]
        [react/view styles/bottom-container
         [react/view {:flex 1}]
         [quo/button

src/status_im/ui/screens/network/views.cljs

@@ -7,7 +7,8 @@
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [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]))
 
 (defn- network-icon [connected? size]
@@ -29,15 +30,13 @@
 
 (defn render-network [{:keys [id name] :as network} _ _ 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/letsubs [current-network [:networks/current-network]

src/status_im/ui/screens/signing/views.cljs

@@ -6,7 +6,6 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.copyable-text :as copyable-text]
             [status-im.wallet.utils :as wallet.utils]
-            [status-im.ui.components.list.views :as list]
             [status-im.keycard.common :as keycard.common]
             [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
             [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.components.bottom-panel.views :as bottom-panel]
             [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 []
   [react/view {:height 1 :background-color colors/gray-lighter}])
@@ -60,7 +60,7 @@
                               :style {:margin-right 8}}
                     display-symbol]
                    (if icon
-                     [list/item-image
+                     [wallet.components/token-icon
                       (assoc icon
                              :style {:background-color colors/gray-lighter
                                      :border-radius    16}

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

@@ -7,7 +7,6 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.icons :as icons]
             [quo.core :as quo]
-            [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.screens.wallet.account.styles :as styles]
@@ -18,7 +17,8 @@
             [status-im.utils.money :as money]
             [status-im.wallet.utils :as wallet.utils]
             [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]))
 
 (def state (reagent/atom {:tab :assets}))
@@ -82,7 +82,7 @@
     [quo/list-item
      {:title          (wallet.utils/display-symbol collectible)
       :subtitle       name
-      :icon           [list/item-image icon]
+      :icon           [wallet.components/token-icon icon]
       :accessory      :text
       :accessory-text items-number}]))
 

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

@@ -8,7 +8,6 @@
             [status-im.ui.components.chat-icon.screen :as chat-icon]
             [status-im.ui.components.colors :as colors]
             [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.screens.wallet.accounts.sheets :as sheets]
             [status-im.ui.screens.wallet.accounts.styles :as styles]
@@ -16,7 +15,8 @@
             [status-im.wallet.utils :as wallet.utils]
             [status-im.keycard.login :as keycard.login]
             [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]))
 
 (views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width]
@@ -77,7 +77,7 @@
     :subtitle            (str (if value value "...") " " currency)
     :accessibility-label (str (:symbol token) "-asset-value")
     :icon                (if icon
-                           [list/item-image icon]
+                           [wallet.components/token-icon icon]
                            [chat-icon/custom-icon-view-list (:name token) color])}])
 
 (views/defview assets []

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

@@ -7,3 +7,11 @@
 
 (defn 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)}]])

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

@@ -10,7 +10,6 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.tooltip.views :as tooltip]
             [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.ui.components.icons.icons :as icons]
             [status-im.multiaccounts.core :as multiaccounts]
@@ -42,7 +41,8 @@
                                         :margin-left    16}
                   :accessibility-label :choose-asset-button}
       (if icon
-        [list/item-image (assoc icon :style {:background-color colors/gray-lighter
+        [components/token-icon
+         (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])
       [react/text {:style           {:margin-left 8

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

@@ -8,7 +8,8 @@
             [reagent.core :as reagent]
             [status-im.ui.components.topbar :as topbar]
             [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]]))
 
 (defonce search-active? (reagent/atom false))
@@ -54,7 +55,7 @@
         :animated-accessory? false
         :animated            false
         :icon                (if icon
-                               [list/item-image icon]
+                               [wallet.components/token-icon icon]
                                [chat-icon/custom-icon-view-list name color])
         :title               name
         :subtitle            (clojure.core/name symbol)

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

@@ -9,14 +9,15 @@
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.screens.wallet.transactions.styles :as styles]
             [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]]))
 
 (defn- transaction-icon
   [icon-key background-color color]
   {: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
   [k]
@@ -36,45 +37,29 @@
 
 (defn render-transaction
   [{: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]}
    _ _ {: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
-                            :ellipsize-mode  "tail"
-                            :number-of-lines 1}
-         [{:accessibility-label :amount-text}
-          amount-text]
                      " "
-         [{:accessibility-label :currency-text}
-          currency-text]]
-        [react/text {:style styles/tx-time}
-         time-formatted]]
-       [react/view {:style styles/address-row}
-        [react/text {:style styles/address-label}
-         label]
                      (when contact
                        [react/text {:style               styles/address-contact
                                     :accessibility-label contact-accessibility-label}
                         contact])
-        [quo/text {:style               styles/address-hash
+                     " "
-                   :monospace           true
+                     (utils/get-shortened-address address)
-                   :color               :secondary
+                     " "
-                   :ellipsize-mode      "middle"
+                     (i18n/label :t/at)
-                   :number-of-lines     1
+                     " "
-                   :accessibility-label address-accessibility-label}
+                     time-formatted)
-         address]]]
+      :chevron             true}
-      [list/item-icon {:icon      :main-icons/next
+     (when type (transaction-type->icon (keyword type))))]
-                       :style     {:margin-top 10}
-                       :icon-opts (merge styles/forward
-                                         {:accessibility-label :show-transaction-button})}]]]]
    (when (and transactions-management-enabled?
               (not keycard-account?)
               (= type :pending))
@@ -184,19 +169,16 @@
                                       [:transactions/fetch-more address]))}
             (i18n/label :t/transactions-load-more)]}]))]))
 
-;; NOTE: Is this needed?
 (defn details-header
   [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)])]
-   [react/view {:style styles/details-header-infos}
-    [react/nested-text {:style styles/details-header-value}
              [{:accessibility-label :amount-text} amount-text]
              " "
              [{:accessibility-label :currency-text} currency-text]]
-    [react/text {:style styles/details-header-date} date]]])
+     :subtitle date}
+    (transaction-type->icon type))])
 
 (defn progress-bar [progress failed?]
   [react/view {:style styles/progress-bar}