[#10957] Fix slow assets list

src/quo/components/controls/styles.cljs

@@ -50,7 +50,7 @@
    :shadow-color     (:shadow-01 @colors/theme)
    :shadow-offset    {:width 0 :height 4}})
 
-(defn checkbox-style [state disabled]
+(defn animated-checkbox-style [state disabled]
   {:width            18
    :height           18
    :border-radius    4
@@ -62,6 +62,21 @@
                                            (:interactive-04 @colors/theme)
                                            (:interactive-01 @colors/theme)))})
 
-(defn check-icon-style [state hold]
+(defn checkbox-style [value disabled]
+  {:width            18
+   :height           18
+   :border-radius    4
+   :justify-content  :center
+   :align-items      :center
+   :background-color (if value
+                       (if disabled
+                         (:interactive-04 @colors/theme)
+                         (:interactive-01 @colors/theme))
+                       (:ui-01 @colors/theme))})
+
+(defn animated-check-icon-style [state hold]
   {:opacity       (animated/mix hold 1 0.6)
    :transform     [{:scale (animated/mix state 0.0001 1)}]})
+
+(defn check-icon-style [value]
+  {:opacity (if value 1 0)})

src/quo/components/controls/view.cljs

@@ -2,6 +2,7 @@
   (:require [reagent.core :as reagent]
             [cljs-bean.core :as bean]
             [quo.react :as react]
+            [quo.react-native :as rn]
             [quo.animated :as animated]
             [quo.gesture-handler :as gh]
             [quo.design-system.colors :as colors]
@@ -60,13 +61,27 @@
                   :accessibility-role  :radio}
    [animated/view {:style (styles/radio-bullet-style transition hold)}]])
 
-(defn checkbox-view [{:keys [transition hold disabled]}]
+(defn checkbox-view [props]
-  [animated/view {:style               (styles/checkbox-style transition disabled)
+  (let [{:keys [value onChange disabled]} (bean/bean props)]
-                  :accessibility-label :checkbox
+    (reagent/as-element
-                  :accessibility-role  :checkbox}
+     [rn/touchable-highlight
-   [animated/view {:style (styles/check-icon-style transition hold)}
+      {:on-press (when onChange onChange)}
+      [rn/view {:style               (styles/checkbox-style value disabled)
+                :accessibility-label :checkbox
+                :accessibility-role  :checkbox}
+       [rn/view {:style (styles/check-icon-style value)}
+        [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]])))
+
+(defn animated-checkbox-view [{:keys [transition hold disabled]}]
+  [animated/view
+   {:style               (styles/animated-checkbox-style transition disabled)
+    :accessibility-label :checkbox
+    :accessibility-role  :checkbox}
+   [animated/view {:style (styles/animated-check-icon-style transition hold)}
     [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]])
 
 (def switch (reagent/adapt-react-class (react/memo (control-builder switch-view))))
 (def radio (reagent/adapt-react-class (react/memo (control-builder radio-view))))
-(def checkbox (reagent/adapt-react-class (react/memo (control-builder checkbox-view))))
+(def animated-checkbox
+  (reagent/adapt-react-class (react/memo (control-builder animated-checkbox-view))))
+(def checkbox (reagent/adapt-react-class (react/memo checkbox-view)))

src/quo/components/list/item.cljs

@@ -129,14 +129,17 @@
    [icon-column props]
    [title-column props]])
 
-(defn right-side [{:keys [chevron active accessory accessory-text]}]
+(defn right-side [{:keys [chevron active accessory accessory-text animated-accessory?]}]
   (when (or chevron accessory)
     [rn/view {:style {:align-items    :center
                       :flex-direction :row}}
      [rn/view {:style (:tiny spacing/padding-horizontal)}
       (case accessory
         :radio    [controls/radio {:value active}]
-        :checkbox [controls/checkbox {:value active}]
+        :checkbox [(if animated-accessory?
+                     controls/animated-checkbox
+                     controls/checkbox)
+                   {:value active}]
         :switch   [controls/switch {:value active}]
         :text     [text/text {:color           :secondary
                               :number-of-lines 1}
@@ -154,7 +157,7 @@
   [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
            title subtitle active on-press on-long-press chevron size text-size
            accessory-text accessibility-label title-accessibility-label
-           haptic-feedback haptic-type error animated title-text-weight]
+           haptic-feedback haptic-type error animated animated-accessory? title-text-weight]
     :or   {subtitle-max-lines 1
            theme              :main
            haptic-feedback    true
@@ -202,11 +205,12 @@
                    :text-size                 text-size
                    :subtitle                  subtitle
                    :subtitle-max-lines        subtitle-max-lines}]
-       [right-side {:chevron        chevron
+       [right-side {:chevron             chevron
-                    :active         active
+                    :active              active
-                    :on-press       on-press
+                    :on-press            on-press
-                    :accessory-text accessory-text
+                    :accessory-text      accessory-text
-                    :accessory      accessory}]]]
+                    :animated-accessory? animated-accessory?
+                    :accessory           accessory}]]]
      (when error
        [tooltip/tooltip (merge {:bottom-value 0}
                                (when accessibility-label

src/status_im/subs.cljs

@@ -1089,6 +1089,12 @@
 
 ;;PROFILE ==============================================================================================================
 
+(re-frame/reg-sub
+ :mnemonic
+ :<- [:multiaccount]
+ (fn [{:keys [mnemonic]}]
+   mnemonic))
+
 (re-frame/reg-sub
  :get-profile-unread-messages-number
  :<- [:multiaccount]

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

@@ -163,7 +163,7 @@
 
 (defn accounts-overview []
   (fn []
-    (let [{:keys [mnemonic]} @(re-frame/subscribe [:multiaccount])]
+    (let [mnemonic @(re-frame/subscribe [:mnemonic])]
       [react/view {:flex 1}
        [quo/animated-header
         {:extended-header   total-value

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

@@ -49,19 +49,21 @@
       (not= (:checked? old-token) (:checked? new-token)))
     :reagent-render
     (fn [{:keys [symbol name icon color checked?] :as token}]
-      [quo/list-item {:active        checked?
+      [quo/list-item
-                      :accessory     :checkbox
+       {:active              checked?
-                      :animated      false
+        :accessory           :checkbox
-                      :icon          (if icon
+        :animated-accessory? false
-                                       [list/item-image icon]
+        :animated            false
-                                       [chat-icon/custom-icon-view-list name color])
+        :icon                (if icon
-                      :title         name
+                               [list/item-image icon]
-                      :subtitle      (clojure.core/name symbol)
+                               [chat-icon/custom-icon-view-list name color])
-                      :on-press      #(re-frame/dispatch
+        :title               name
-                                       [:wallet.settings/toggle-visible-token (keyword symbol) (not checked?)])
+        :subtitle            (clojure.core/name symbol)
-                      :on-long-press #(re-frame/dispatch
+        :on-press            #(re-frame/dispatch
-                                       [:bottom-sheet/show-sheet
+                               [:wallet.settings/toggle-visible-token (keyword symbol) (not checked?)])
-                                        {:content (custom-token-actions-view token)}])}])}))
+        :on-long-press       #(re-frame/dispatch
+                               [:bottom-sheet/show-sheet
+                                {:content (custom-token-actions-view token)}])}])}))
 
 (defn- render-token-wrapper
   [token]