From 6fd5a97b59d77a07dce4a7e07688d64f34b3b167 Mon Sep 17 00:00:00 2001
From: Mohsen Ghafouri <maxghafori@gmail.com>
Date: Mon, 25 Sep 2023 13:19:50 +0300
Subject: [PATCH 1/9] [#17288] refactor: migrate previews to new api (#17366)

---
 .../list_items/token_value/view.cljs          |   6 +-
 .../navigation/bottom_nav_tab/view.cljs       |   2 +-
 src/quo2/core.cljs                            |   2 +
 .../quo_preview/browser/browser_input.cljs    |  67 ++----
 .../quo_preview/list_items/token_value.cljs   |  49 ++--
 .../quo_preview/list_items/user_list.cljs     |  49 ++--
 src/status_im2/contexts/quo_preview/main.cljs |  18 +-
 .../contexts/quo_preview/messages/gap.cljs    |   2 +-
 .../quo_preview/messages/system_message.cljs  |   2 +-
 .../navigation/bottom_nav_tab.cljs            |  57 ++---
 .../navigation/floating_shell_button.cljs     |  39 ++--
 .../quo_preview/navigation/page_nav.cljs      | 211 ++++++------------
 .../quo_preview/navigation/top_nav.cljs       |  69 ++----
 .../jump_to/components/bottom_tabs/view.cljs  |   4 +-
 14 files changed, 194 insertions(+), 383 deletions(-)

diff --git a/src/quo2/components/list_items/token_value/view.cljs b/src/quo2/components/list_items/token_value/view.cljs
index 64e3c0ecd4a6..84dd240d2681 100644
--- a/src/quo2/components/list_items/token_value/view.cljs
+++ b/src/quo2/components/list_items/token_value/view.cljs
@@ -12,9 +12,9 @@
     [reagent.core :as reagent]))
 
 (defn- internal-view
-  [{:keys [theme customization-color status token metrics? values on-press]}]
+  []
   (let [state (reagent/atom :default)]
-    (fn []
+    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -42,7 +42,7 @@
            [text/text
             {:size  :paragraph-2
              :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (string/upper-case (clj->js token)))]]]
+            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
          [rn/view
           {:style {:align-items     :flex-end
                    :justify-content :space-between}}
diff --git a/src/quo2/components/navigation/bottom_nav_tab/view.cljs b/src/quo2/components/navigation/bottom_nav_tab/view.cljs
index a5129c802d51..b9a695237160 100644
--- a/src/quo2/components/navigation/bottom_nav_tab/view.cljs
+++ b/src/quo2/components/navigation/bottom_nav_tab/view.cljs
@@ -86,6 +86,6 @@
            counter-label]
           [rn/view {:style (styles/notification-dot customization-color)}]))]]))
 
-(defn bottom-nav-tab
+(defn view
   [opts]
   [:f> f-bottom-nav-tab opts])
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index fe561af2a14d..34dffaf719dd 100644
--- a/src/quo2/core.cljs
+++ b/src/quo2/core.cljs
@@ -77,6 +77,7 @@
     quo2.components.messages.gap
     quo2.components.messages.system-message
     quo2.components.navigation.floating-shell-button.view
+    quo2.components.navigation.bottom-nav-tab.view
     quo2.components.navigation.page-nav.view
     quo2.components.navigation.top-nav.view
     quo2.components.notifications.activity-log.view
@@ -262,6 +263,7 @@
 (def skeleton-list quo2.components.loaders.skeleton-list.view/view)
 
 ;;;; Navigation
+(def bottom-nav-tab quo2.components.navigation.bottom-nav-tab.view/view)
 (def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
 (def page-nav quo2.components.navigation.page-nav.view/page-nav)
 (def top-nav quo2.components.navigation.top-nav.view/view)
diff --git a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs
index b760b5951d83..5335afd88166 100644
--- a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs
+++ b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs
@@ -1,55 +1,28 @@
 (ns status-im2.contexts.quo-preview.browser.browser-input
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
-            [utils.re-frame :as rf]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show Favicon"
-    :key   :favicon?
-    :type  :boolean}
-   {:label "Locked"
-    :key   :locked?
-    :type  :boolean}
-   {:label "Disabled"
-    :key   :disabled?
-    :type  :boolean}])
+  [{:key :favicon? :type :boolean}
+   {:key :locked? :type :boolean}
+   {:key :blur? :type :boolean}
+   {:key :placeholder :type :text}
+   {:key :disabled? :type :boolean}
+   (preview/customization-color-option)])
 
-(defn preview-browser-input
+(defn view
   []
-  (reagent/with-let [keyboard-shown?        (reagent/atom false)
-                     keyboard-show-listener (.addListener rn/keyboard
-                                                          "keyboardWillShow"
-                                                          #(reset! keyboard-shown? true))
-                     keyboard-hide-listener (.addListener rn/keyboard
-                                                          "keyboardWillHide"
-                                                          #(reset! keyboard-shown? false))
-                     {:keys [bottom]}       (safe-area/get-insets)
-                     state                  (reagent/atom {:blur?       false
-                                                           :disabled?   false
-                                                           :favicon?    false
-                                                           :placeholder "Search or enter dapp domain"
-                                                           :locked?     false})]
-    [preview/preview-container
-     {:state      state
-      :descriptor descriptor}
-     [quo/page-nav
-      {:type      :no-title
-       :icon-name :i/arrow-left
-       :on-press  #(rf/dispatch [:navigate-back])}]
-
-     [rn/flat-list
-      {:key-fn                       str
-       :keyboard-should-persist-taps :always
-       :style                        {:flex 1}}]
-     [rn/view
-      [quo/browser-input
-       (assoc @state
-              :customization-color :blue
-              :favicon             (when (:favicon? @state) :i/verified))]
-      [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]
-    (finally
-     (.remove keyboard-show-listener)
-     (.remove keyboard-hide-listener))))
+  (let [state (reagent/atom {:blur?       false
+                             :disabled?   false
+                             :favicon?    false
+                             :placeholder "Search or enter dapp domain"
+                             :locked?     false})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/browser-input
+        (assoc @state
+               :favicon
+               (when (:favicon? @state) :i/verified))]])))
diff --git a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs
index ee813d66bdb1..08317b929036 100644
--- a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs
@@ -1,42 +1,23 @@
 (ns status-im2.contexts.quo-preview.list-items.token-value
   (:require
     [quo2.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Token:"
-    :key     :token
+  [{:key     :token
     :type    :select
-    :options [{:key   :eth
-               :value "ETH"}
-              {:key   :snt
-               :value "SNT"}]}
-   {:label   "State:"
-    :key     :state
+    :options [{:key :eth}
+              {:key :snt}]}
+   {:key     :status
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :pressed
-               :value "Pressed"}
-              {:key   :active
-               :value "Active"}]}
-   {:label   "Status:"
-    :key     :status
-    :type    :select
-    :options [{:key   :empty
-               :value "Empty"}
-              {:key   :positive
-               :value "Positive"}
-              {:key   :negative
-               :value "Negative"}]}
+    :options [{:key :empty}
+              {:key :positive}
+              {:key :negative}]}
    (preview/customization-color-option)
-   {:label "Metrics?:"
-    :key   :metrics?
-    :type  :boolean}])
+   {:key :metrics? :type :boolean}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:token               :snt
                              :state               :default
@@ -49,11 +30,9 @@
                                                    :fiat-change       "€0.00"}})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        [rn/view
-         {:style {:align-items :center
-                  :margin-top  50}}
-         [quo/token-value @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center
+                                    :margin-top  50}}
+       [quo/token-value @state]])))
 
diff --git a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs
index 200d28fa4f21..f6771969a9f0 100644
--- a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs
@@ -1,35 +1,19 @@
 (ns status-im2.contexts.quo-preview.list-items.user-list
-  (:require [react-native.core :as rn]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.components.list-items.user-list :as user-list]
+            [quo2.core :as quo]
             [utils.address :as address]))
 
 (def descriptor
-  [{:label "Primary name"
-    :key   :primary-name
+  [{:key   :primary-name
     :type  :text
     :limit 24}
-   {:label "Secondary name"
-    :key   :secondary-name
-    :type  :text}
-   {:label "Chat key"
-    :key   :chat-key
-    :type  :text}
-   {:label "Is contact?"
-    :key   :contact?
-    :type  :boolean}
-   {:label "Is verified?"
-    :key   :verified?
-    :type  :boolean}
-   {:label "Is untrustworthy?"
-    :key   :untrustworthy?
-    :type  :boolean}
-   {:label "Online?"
-    :key   :online?
-    :type  :boolean}
-   {:label   "Accessory:"
-    :key     :accessory
+   {:key :secondary-name :type :text}
+   {:key :contact? :type :boolean}
+   {:key :verified? :type :boolean}
+   {:key :untrustworthy? :type :boolean}
+   {:key :online? :type :boolean}
+   {:key     :accessory
     :type    :select
     :options [{:key   {:type :options}
                :value "Options"}
@@ -38,7 +22,7 @@
               {:key   {:type :close}
                :value "Close"}]}])
 
-(defn preview-user-list
+(defn view
   []
   (let [state (reagent/atom {:primary-name   "Alisher Yakupov"
                              :short-chat-key (address/get-shortened-compressed-key
@@ -50,11 +34,8 @@
                              :online?        false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical    60
-          :padding--horizontal 15
-          :justify-content     :center}
-         [user-list/user-list @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical   30
+                                    :padding-horizontal 15}}
+       [quo/user-list @state]])))
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 0852e1d4773e..6f0d6f4a2789 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -169,7 +169,7 @@
                        {:name      :wallet-ctas
                         :component wallet-ctas/view}]
    :browser           [{:name      :browser-input
-                        :component browser-input/preview-browser-input}]
+                        :component browser-input/view}]
    :calendar          [{:name      :calendar
                         :component calendar/view}
                        {:name      :calendar-day
@@ -275,10 +275,10 @@
                        {:name      :preview-lists
                         :component preview-lists/view}
                        {:name      :token-value
-                        :component token-value/preview}
+                        :component token-value/view}
                        {:name      :user-list
                         :options   {:topBar {:visible true}}
-                        :component user-list/preview-user-list}]
+                        :component user-list/view}]
    :loaders           [{:name      :skeleton-list
                         :options   {:topBar {:visible true}}
                         :component skeleton-list/view}]
@@ -287,19 +287,19 @@
                        {:name      :markdown-list
                         :component markdown-list/view}]
    :messages          [{:name      :gap
-                        :component messages-gap/preview-messages-gap}
+                        :component messages-gap/view}
                        {:name      :system-messages
-                        :component system-message/preview-system-message}
+                        :component system-message/view}
                        {:name      :author
                         :component messages-author/view}]
    :navigation        [{:name      :bottom-nav-tab
-                        :component bottom-nav-tab/preview-bottom-nav-tab}
+                        :component bottom-nav-tab/view}
                        {:name      :top-nav
-                        :component top-nav/preview}
+                        :component top-nav/view}
                        {:name      :page-nav
-                        :component page-nav/preview-page-nav}
+                        :component page-nav/view}
                        {:name      :floating-shell-button
-                        :component floating-shell-button/preview-floating-shell-button}]
+                        :component floating-shell-button/view}]
    :notifications     [{:name      :activity-logs
                         :component activity-logs/preview-activity-logs}
                        {:name      :activity-logs-photos
diff --git a/src/status_im2/contexts/quo_preview/messages/gap.cljs b/src/status_im2/contexts/quo_preview/messages/gap.cljs
index 2210fa9dd7d3..9b64c9780ec2 100644
--- a/src/status_im2/contexts/quo_preview/messages/gap.cljs
+++ b/src/status_im2/contexts/quo_preview/messages/gap.cljs
@@ -8,7 +8,7 @@
   [{:key :timestamp-far :type :text}
    {:key :timestamp-near :type :text}])
 
-(defn preview-messages-gap
+(defn view
   []
   (let [state (reagent/atom {:timestamp-far          "Jan 8 · 09:12"
                              :timestamp-near         "Mar 8 · 22:42"
diff --git a/src/status_im2/contexts/quo_preview/messages/system_message.cljs b/src/status_im2/contexts/quo_preview/messages/system_message.cljs
index cede99d56858..fca47b1c2aa9 100644
--- a/src/status_im2/contexts/quo_preview/messages/system_message.cljs
+++ b/src/status_im2/contexts/quo_preview/messages/system_message.cljs
@@ -30,7 +30,7 @@
          {:child        (when (= (:type @state) :pinned) [rn/text (:content @state)])
           :display-name (:pinned-by @state)}))
 
-(defn preview-system-message
+(defn view
   []
   (let [state (reagent/atom {:type      :pinned
                              :pinned-by "Steve"
diff --git a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
index 359481f43253..feaf9efb3887 100644
--- a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
@@ -1,15 +1,12 @@
 (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
-  (:require [clojure.string :as string]
-            [quo2.components.navigation.bottom-nav-tab.view :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :icon
+  [{:key     :icon
     :type    :select
     :options [{:key   :i/communities
                :value "Communities"}
@@ -19,33 +16,15 @@
                :value "Wallet"}
               {:key   :i/browser
                :value "Browser"}]}
-   {:label "Selected?"
-    :key   :selected?
-    :type  :boolean}
-   {:label "Pass through?"
-    :key   :pass-through?
-    :type  :boolean}
-   {:label "New Notifications?"
-    :key   :new-notifications?
-    :type  :boolean}
-   {:label   "Notification Indicator"
-    :key     :notification-indicator
+   {:key :selected? :type :boolean}
+   {:key :pass-through? :type :boolean}
+   {:key :new-notifications? :type :boolean}
+   {:key     :notification-indicator
     :type    :select
-    :options [{:key   :counter
-               :value :counter}
-              {:key   :unread-dot
-               :value :unread-dot}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-
-   {:label   "Customization color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[k _]]
-                    {:key   k
-                     :value (string/capitalize (name k))})
-                  colors/customization)}])
+    :options [{:key :counter}
+              {:key :unread-dot}]}
+   {:key :counter-label :type :text}
+   (preview/customization-color-option)])
 
 (defn get-icon-color
   [selected? pass-through?]
@@ -60,11 +39,11 @@
     (reanimated/set-shared-value
      icon-color-anim
      (get-icon-color selected? pass-through?))
-    [quo2/bottom-nav-tab
+    [quo/bottom-nav-tab
      (merge state {:icon-color-anim icon-color-anim})
      (:value state)]))
 
-(defn preview-bottom-nav-tab
+(defn view
   []
   (let [state         (reagent/atom {:icon                   :i/communities
                                      :new-notifications?     true
@@ -76,10 +55,8 @@
         pass-through? (reagent/cursor state [:pass-through?])]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [:f> f-bottom-tab @state @selected? @pass-through?]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [:f> f-bottom-tab @state @selected? @pass-through?]])))
diff --git a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
index 9c8a2ea378d3..cea718f0e60d 100644
--- a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
@@ -1,29 +1,18 @@
 (ns status-im2.contexts.quo-preview.navigation.floating-shell-button
   (:require [quo2.core :as quo]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [utils.i18n :as i18n]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show jump to?"
-    :key   :show-jump-to?
-    :type  :boolean}
-   {:label "Show search?"
-    :key   :show-search?
-    :type  :boolean}
-   {:label "Show mention?"
-    :key   :show-mention?
-    :type  :boolean}
-   {:label   "Scroll Type"
-    :key     :scroll-type
+  [{:key :show-jump-to? :type :boolean}
+   {:key :show-search? :type :boolean}
+   {:key :show-mention? :type :boolean}
+   {:key     :scroll-type
     :type    :select
-    :options [{:key   :notification-up
-               :value "Notification Up"}
-              {:key   :notification-down
-               :value "Notification Down"}
-              {:key   :scroll-to-bottom
-               :value "Scroll To Bottom"}]}])
+    :options [{:key :notification-up}
+              {:key :notification-down}
+              {:key :scroll-to-bottom}]}])
 
 (defn mock-data
   [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
@@ -41,16 +30,14 @@
     (= scroll-type :scroll-to-bottom)
     (assoc :scroll-to-bottom {:on-press #()})))
 
-(defn preview-floating-shell-button
+(defn view
   []
   (let [state (reagent/atom {:show-jump-to? true
                              :scroll-type   :notification-down})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/floating-shell-button (mock-data @state) nil]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [quo/floating-shell-button (mock-data @state) nil]])))
diff --git a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
index a67930ab5bf9..ca59feacd00a 100644
--- a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
@@ -2,43 +2,31 @@
   (:require [clojure.string :as string]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def ^:private descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :no-title
-               :value "No Title"}
-              {:key   :title
-               :value "Title"}
-              {:key   :dropdown
-               :value "Dropdown"}
-              {:key   :token
-               :value "Token"}
-              {:key   :channel
-               :value "Channel"}
+    :options [{:key :no-title}
+              {:key :title}
+              {:key :dropdown}
+              {:key :token}
+              {:key :channel}
               {:key   :title-description
                :value "Title + Description"}
-              {:key   :wallet-networks
-               :value "Wallet Networks"}
-              {:key   :community
-               :value "Community"}
-              {:key   :network
-               :value "Network"}]}
-   {:label   "Background"
-    :key     :background
+              {:key :wallet-networks}
+              {:key :community}
+              {:key :network}]}
+   {:key     :background
     :type    :select
     :options (map (fn [bg-type]
                     {:key   bg-type
                      :value (string/capitalize (name bg-type))})
                   [:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])}
-   {:label   "Icon"
-    :key     :icon-name
+   {:key     :icon-name
     :type    :select
     :options [{:key   :i/placeholder
                :value "Placeholder"}
@@ -60,79 +48,55 @@
       :value "3 actions"}]))
 
 (def account-switcher
-  {:key   :account-switcher
-   :value "Account-switcher"})
+  {:key :account-switcher})
 
 (def no-title-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}])
 
 (def title-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}
-   {:label "Title"
-    :key   :title
-    :type  :text}
-   {:label   "Text Align"
-    :key     :text-align
+   {:key :title :type :text}
+   {:key     :text-align
     :type    :select
-    :options [{:key   :left
-               :value "Left"}
-              {:key   :center
-               :value "Center"}]}])
+    :options [{:key :left}
+              {:key :center}]}])
 
 (def dropdown-descriptor
-  [{:label "Dropdown Selected?"
-    :key   :dropdown-selected?
-    :type  :boolean}
-   {:label "Dropdown Text"
-    :key   :dropdown-text
-    :type  :text}])
+  [{:key :dropdown-selected? :type :boolean}
+   {:key :dropdown-text :type :text}])
 
 (def token-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj right-side-options account-switcher)}
-
-   {:label   "Token Logo"
-    :key     :token-logo
+   {:key     :token-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :status-logo)
                :value "Status logo"}
               {:key   (resources/get-mock-image :rarible)
                :value "Rarible"}]}
-
-   {:label "Token Name"
-    :key   :token-name
-    :type  :text}
-   {:label "Token Abbreviation"
-    :key   :token-abbreviation
-    :type  :text}])
+   {:key  :token-name
+    :type :text}
+   {:key  :token-abbreviation
+    :type :text}])
 
 (def channel-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-
-   {:label   "Channel Emoji"
-    :key     :channel-emoji
+   {:key     :channel-emoji
     :type    :select
     :options [{:key   "🍇"
                :value "🍇"}
               {:key   "🍑"
                :value "🍑"}]}
 
-   {:label "Channel Name"
-    :key   :channel-name
-    :type  :text}
-   {:label   "Channel Icon"
-    :key     :channel-icon
+   {:key :channel-name :type :text}
+   {:key     :channel-icon
     :type    :select
     :options [{:key   :i/locked
                :value "Locked"}
@@ -140,18 +104,12 @@
                :value "Unlocked"}]}])
 
 (def title-description-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (butlast right-side-options)}
-   {:label "title"
-    :key   :title
-    :type  :text}
-   {:label "description"
-    :key   :description
-    :type  :text}
-   {:label   "Picture"
-    :key     :picture
+   {:key :title :type :text}
+   {:key :description :type :text}
+   {:key     :picture
     :type    :select
     :options [{:key   nil
                :value "No picture"}
@@ -161,74 +119,49 @@
                :value "Photo 2"}]}])
 
 (def wallet-networks-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options (conj (take 2 right-side-options) account-switcher)}])
 
 (def community-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-   {:label   "Community Logo"
-    :key     :community-logo
+   {:key     :community-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :diamond)
                :value "Diamond"}
               {:key   (resources/get-mock-image :coinbase)
                :value "Coinbase"}]}
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}])
+   {:key :community-name :type :text}])
 
 (def network-descriptor
-  [{:label   "Right Side"
-    :key     :right-side
+  [{:key     :right-side
     :type    :select
     :options right-side-options}
-   {:label   "Network Logo"
-    :key     :network-logo
+   {:key     :network-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :diamond)
                :value "Diamond"}
               {:key   (resources/get-mock-image :coinbase)
                :value "Coinbase"}]}
-   {:label "Network name"
-    :key   :network-name
-    :type  :text}])
+   {:key  :network-name
+    :type :text}])
 
 (defn- photo-bg
   [background]
-  (when (#{:photo :blur} background)
+  (when (#{:photo} background)
     [rn/image
      {:style  {:position :absolute
                :top      0
                :bottom   0
-               :left     0
+               :left     20
                :right    0
                :width    "100%"
                :height   200}
       :source (resources/get-mock-image :photo2)}]))
 
-(defn- blur-bg
-  [background]
-  (when (= :blur background)
-    [rn/view
-     {:style {:position :absolute
-              :top      0
-              :bottom   0
-              :left     0
-              :right    0
-              :width    "100%"
-              :height   200}}
-     [blur/view
-      {:style       {:width  "100%"
-                     :height 20}
-       :blur-type   :light
-       :blur-amount 20}]]))
-
-(defn preview-page-nav
+(defn view
   [{:keys [theme]}]
   (let [state (reagent/atom
                {:type               :title-description
@@ -257,30 +190,30 @@
                 :network-logo       (resources/get-mock-image :diamond)})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor (concat descriptor
-                            (case (:type @state)
-                              :no-title          no-title-descriptor
-                              :title             title-descriptor
-                              :dropdown          dropdown-descriptor
-                              :token             token-descriptor
-                              :channel           channel-descriptor
-                              :title-description title-description-descriptor
-                              :wallet-networks   wallet-networks-descriptor
-                              :community         community-descriptor
-                              :network           network-descriptor
-                              nil))}
-       [rn/view
-        {:style {:background-color (case (:background @state)
-                                     :white       colors/white
-                                     :neutral-5   colors/neutral-5
-                                     :neutral-90  colors/neutral-90
-                                     :neutral-95  colors/neutral-95
-                                     :neutral-100 colors/neutral-100
-                                     nil)
-                 :padding-vertical 40
-                 :height           200
-                 :width            "100%"}}
-        [photo-bg (:background @state)]
-        [blur-bg (:background @state)]
-        [quo/page-nav @state]]])))
+       {:state                     state
+        :descriptor                (concat descriptor
+                                           (case (:type @state)
+                                             :no-title          no-title-descriptor
+                                             :title             title-descriptor
+                                             :dropdown          dropdown-descriptor
+                                             :token             token-descriptor
+                                             :channel           channel-descriptor
+                                             :title-description title-description-descriptor
+                                             :wallet-networks   wallet-networks-descriptor
+                                             :community         community-descriptor
+                                             :network           network-descriptor
+                                             nil))
+        :blur?                     (= :blur (:background @state))
+        :show-blur-background?     (= :blur (:background @state))
+        :component-container-style {:background-color (case (:background @state)
+                                                        :white       colors/white
+                                                        :neutral-5   colors/neutral-5
+                                                        :neutral-90  colors/neutral-90
+                                                        :neutral-95  colors/neutral-95
+                                                        :neutral-100 colors/neutral-100
+                                                        nil)
+                                    :margin-vertical  40
+                                    :width            "100%"}}
+
+       [photo-bg (:background @state)]
+       [quo/page-nav @state]])))
diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
index 7087e52e9344..e16fe943e4e3 100644
--- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
@@ -1,11 +1,8 @@
 (ns status-im2.contexts.quo-preview.navigation.top-nav
   (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [quo2.core :as quo]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]
-            [quo2.theme :as quo.theme]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
   [{:key     :notification
@@ -21,9 +18,9 @@
     :type :number}
    (preview/customization-color-option)])
 
-(defn preview
+(defn view
   []
-  (let [state (reagent/atom {:noticication-count  0
+  (let [state (reagent/atom {:notification-count  0
                              :customization-color :blue})]
     (fn []
       (let [blur?               (:blur? @state)
@@ -32,43 +29,25 @@
             notification        (:notification @state)
             notification-count  (:notification-count @state)]
         [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [rn/view {:padding-bottom 150}
-          [rn/view
-           {:padding-vertical   60
-            :padding-horizontal 20
-            :flex-direction     :row
-            :align-items        :center}
-           (when blur?
-             [rn/image
-              {:source (resources/get-mock-image (quo.theme/theme-value :light-blur-background
-                                                                        :dark-blur-background))
-               :style  {:position :absolute
-                        :top      0
-                        :left     0
-                        :right    0
-                        :bottom   0}}])
-           (when jump-to?
-             [rn/image
-              {:background-color colors/neutral-100
-               :style            {:position :absolute
-                                  :top      0
-                                  :left     0
-                                  :right    0
-                                  :bottom   0}}])
-           [quo/top-nav
-            {:container-style          {:flex 1 :z-index 2}
-             :max-unread-notifications 99
-             :blur?                    blur?
-             :notification             notification
-             :customization-color      customization-color
-             :notification-count       notification-count
-             :jump-to?                 jump-to?
-             :avatar-props             {:online?   true
-                                        :full-name "Test User"}
-             :avatar-on-press          #(js/alert "avatar pressed")
-             :scan-on-press            #(js/alert "scan pressed")
-             :activity-center-on-press #(js/alert "activity-center pressed")
-             :qr-code-on-press         #(js/alert "qr pressed")}]]]]))))
+         {:state                     state
+          :descriptor                descriptor
+          :blur?                     (and blur? (not jump-to?))
+          :show-blur-background?     (and blur? (not jump-to?))
+          :component-container-style {:padding-vertical   60
+                                      :padding-horizontal 20
+                                      :background-color   (when jump-to? colors/neutral-100)}}
+         [quo/top-nav
+          {:container-style          {:flex 1 :z-index 2}
+           :max-unread-notifications 99
+           :blur?                    blur?
+           :notification             notification
+           :customization-color      customization-color
+           :notification-count       notification-count
+           :jump-to?                 jump-to?
+           :avatar-props             {:online?   true
+                                      :full-name "Test User"}
+           :avatar-on-press          #(js/alert "avatar pressed")
+           :scan-on-press            #(js/alert "scan pressed")
+           :activity-center-on-press #(js/alert "activity-center pressed")
+           :qr-code-on-press         #(js/alert "qr pressed")}]]))))
 
diff --git a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
index 292092a00eb9..440d1552dea7 100644
--- a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
@@ -4,11 +4,11 @@
             [react-native.gesture :as gesture]
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
+            [quo2.core :as quo]
             [status-im2.contexts.shell.jump-to.utils :as utils]
             [status-im2.contexts.shell.jump-to.state :as state]
             [status-im2.contexts.shell.jump-to.animation :as animation]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
-            [quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab]
             [status-im2.contexts.shell.jump-to.components.bottom-tabs.style :as style]))
 
 (defn blur-overlay-params
@@ -25,7 +25,7 @@
         icon-color          (->> stack-id
                                  (get shell.constants/tabs-icon-color-keywords)
                                  (get shared-values))]
-    [bottom-nav-tab/bottom-nav-tab
+    [quo/bottom-nav-tab
      (-> notifications-data
          (get stack-id)
          (assoc :test-ID             stack-id

From 53f40b55f22976d81d33ff05a45304d91f46e67d Mon Sep 17 00:00:00 2001
From: Ibrahem Khalil <vampirekid017@gmail.com>
Date: Mon, 25 Sep 2023 13:42:37 +0300
Subject: [PATCH 2/9] Adjust PR template to add before/after (#17402)

---
 .github/PULL_REQUEST_TEMPLATE.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 3b6e6619624f..c2f7c38efbbd 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -63,4 +63,10 @@ Documentation change PR (review please): https://github.com/status-im/status.im/
 
 <!-- (PRs will only be accepted if squashed into single commit.) -->
 
+### Before and after screenshots comparison
+
+| Figma (if available) | iOS (if available)    | Android (if available)
+| --- | --- | --- |
+| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
+
 status: ready <!-- Can be ready or wip -->

From 723573833ea0c16be17b3c9c1ee5367212ef5061 Mon Sep 17 00:00:00 2001
From: flexsurfer <flexsurfer@users.noreply.github.com>
Date: Mon, 25 Sep 2023 12:45:39 +0200
Subject: [PATCH 3/9] [#17357] move status-im.async-storage.core (#17380)

---
 .../async_storage.cljs}                       | 44 +++++++++---------
 src/status_im/async_storage/transit.cljs      | 13 ------
 src/status_im/communities/core.cljs           | 46 -------------------
 src/status_im/events.cljs                     |  7 ++-
 src/status_im/notifications/local.cljs        |  2 +-
 src/status_im/wallet/core.cljs                | 14 +++---
 src/status_im2/common/async_storage.cljs      |  7 +++
 .../contexts/chat/composer/effects.cljs       |  2 +-
 .../contexts/chat/composer/keyboard.cljs      |  2 +-
 src/status_im2/contexts/chat/events.cljs      |  8 ++--
 .../contexts/communities/discover/view.cljs   |  2 -
 .../onboarding/common/background/view.cljs    |  2 +-
 .../contexts/shell/jump_to/utils.cljs         |  2 +-
 src/status_im2/core.cljs                      |  2 +-
 src/status_im2/events.cljs                    |  1 +
 15 files changed, 50 insertions(+), 104 deletions(-)
 rename src/{status_im/async_storage/core.cljs => react_native/async_storage.cljs} (54%)
 delete mode 100644 src/status_im/async_storage/transit.cljs
 create mode 100644 src/status_im2/common/async_storage.cljs

diff --git a/src/status_im/async_storage/core.cljs b/src/react_native/async_storage.cljs
similarity index 54%
rename from src/status_im/async_storage/core.cljs
rename to src/react_native/async_storage.cljs
index 80312fae3bf1..d03254984965 100644
--- a/src/status_im/async_storage/core.cljs
+++ b/src/react_native/async_storage.cljs
@@ -1,30 +1,37 @@
-(ns status-im.async-storage.core
+(ns react-native.async-storage
   (:require ["@react-native-async-storage/async-storage" :default async-storage]
-            [goog.functions :as f]
-            [re-frame.core :as re-frame]
-            [status-im.async-storage.transit :refer [clj->transit transit->clj]]
-            [taoensso.timbre :as log]))
+            [cognitect.transit :as transit]
+            [taoensso.timbre :as log]
+            goog.functions))
 
 (def ^:private debounce-ms 250)
 
-(def key->string str)
+(def ^:private reader (transit/reader :json))
+(def ^:private writer (transit/writer :json))
+
+(defn clj->transit [o] (transit/write writer o))
+(defn transit->clj
+  [o]
+  (try (transit/read reader o)
+       (catch :default e
+         (log/error e))))
 
 (defn set-item!
   [k value]
   (-> ^js async-storage
-      (.setItem (key->string k)
+      (.setItem (str k)
                 (clj->transit value))
       (.catch (fn [error]
                 (log/error "[async-storage]" error)))))
 
-(defn- set-item-factory
+(defn set-item-factory
   []
   (let [tmp-storage (atom {})
-        debounced   (f/debounce (fn []
-                                  (doseq [[k v] @tmp-storage]
-                                    (swap! tmp-storage dissoc k)
-                                    (set-item! k v)))
-                                debounce-ms)]
+        debounced   (goog.functions/debounce (fn []
+                                               (doseq [[k v] @tmp-storage]
+                                                 (swap! tmp-storage dissoc k)
+                                                 (set-item! k v)))
+                                             debounce-ms)]
     (fn [items]
       (swap! tmp-storage merge items)
       (debounced))))
@@ -32,7 +39,7 @@
 (defn get-items
   [ks cb]
   (-> ^js async-storage
-      (.multiGet (to-array (map key->string ks)))
+      (.multiGet (to-array (map str ks)))
       (.then (fn [^js data]
                (cb (->> (js->clj data)
                         (map (comp transit->clj second))
@@ -44,7 +51,7 @@
 (defn get-item
   [k cb]
   (-> ^js async-storage
-      (.getItem (key->string k))
+      (.getItem (str k))
       (.then (fn [^js data]
                (-> data
                    js->clj
@@ -53,10 +60,3 @@
       (.catch (fn [error]
                 (cb nil)
                 (log/error "[async-storage]" error)))))
-
-(re-frame/reg-fx ::set! (set-item-factory))
-
-(re-frame/reg-fx
- ::get
- (fn [{ks :keys cb :cb}]
-   (get-items ks cb)))
diff --git a/src/status_im/async_storage/transit.cljs b/src/status_im/async_storage/transit.cljs
deleted file mode 100644
index 841dd94cb588..000000000000
--- a/src/status_im/async_storage/transit.cljs
+++ /dev/null
@@ -1,13 +0,0 @@
-(ns status-im.async-storage.transit
-  (:require [cognitect.transit :as transit]
-            [taoensso.timbre :as log]))
-
-(def reader (transit/reader :json))
-(def writer (transit/writer :json))
-
-(defn clj->transit [o] (transit/write writer o))
-(defn transit->clj
-  [o]
-  (try (transit/read reader o)
-       (catch :default e
-         (log/error e))))
diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs
index 3d4710a1a9cd..23a07843077d 100644
--- a/src/status_im/communities/core.cljs
+++ b/src/status_im/communities/core.cljs
@@ -6,7 +6,6 @@
             [quo2.foundations.colors :as quo2.colors]
             [re-frame.core :as re-frame]
             [status-im.utils.deprecated-types :as types]
-            [status-im.async-storage.core :as async-storage]
             [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles]
             [status-im.utils.universal-links.core :as universal-links]
             [status-im.bottom-sheet.events :as bottom-sheet]
@@ -815,51 +814,6 @@
                     :on-success  #(re-frame/dispatch [:sanitize-messages-and-process-response %])
                     :on-error    #(log/error "failed to reorder community category" %)}]})
 
-(defn category-hash
-  [public-key community-id category-id]
-  (hash (str public-key community-id category-id)))
-
-(rf/defn store-category-state
-  {:events [::store-category-state]}
-  [{:keys [db]} community-id category-id state-open?]
-  (let [public-key (get-in db [:profile/profile :public-key])
-        hash       (category-hash public-key community-id category-id)]
-    {::async-storage/set! {hash state-open?}}))
-
-(rf/defn update-category-states-in-db
-  {:events [::category-states-loaded]}
-  [{:keys [db]} community-id hashes states]
-  (let [public-key     (get-in db [:profile/profile :public-key])
-        categories-old (get-in db [:communities community-id :categories])
-        categories     (reduce (fn [acc [category-id category]]
-                                 (let [hash             (get hashes category-id)
-                                       state            (get states hash)
-                                       category-updated (assoc category :state state)]
-                                   (assoc acc category-id category-updated)))
-                               {}
-                               categories-old)]
-    {:db (update-in db [:communities community-id :categories] merge categories)}))
-
-(rf/defn load-category-states
-  {:events [:communities/load-category-states]}
-  [{:keys [db]} community-id]
-  (let [public-key            (get-in db [:profile/profile :public-key])
-        categories            (get-in db [:communities community-id :categories])
-        {:keys [keys hashes]} (reduce (fn [acc category]
-                                        (let [category-id (get category 0)
-                                              hash        (category-hash
-                                                           public-key
-                                                           community-id
-                                                           category-id)]
-                                          (-> acc
-                                              (assoc-in [:hashes category-id] hash)
-                                              (update :keys #(conj % hash)))))
-                                      {}
-                                      categories)]
-    {::async-storage/get {:keys keys
-                          :cb   #(re-frame/dispatch
-                                  [::category-states-loaded community-id hashes %])}}))
-
 ;; Note - dispatch is used to make sure we are opening community once `pop-to-root` is processed.
 ;; Don't directly merge effects using `navigation/navigate-to`, because it will work in debug and
 ;; release, but for e2e `pop-to-root` closes even currently opened community
diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs
index 1a8aa3860119..bfaa44f3547b 100644
--- a/src/status_im/events.cljs
+++ b/src/status_im/events.cljs
@@ -2,7 +2,6 @@
   (:require
     clojure.set
     [re-frame.core :as re-frame]
-    [status-im.async-storage.core :as async-storage]
     status-im.backup.core
     status-im.bootnodes.core
     status-im.browser.core
@@ -193,9 +192,9 @@
   (rf/merge cofx
             (cond
               (= :chat view-id)
-              {::async-storage/set! {:chat-id (get-in cofx [:db :current-chat-id])
-                                     :key-uid (get-in cofx [:db :profile/profile :key-uid])}
-               :db                  (assoc db :screens/was-focused-once? true)}
+              {:async-storage-set {:chat-id (get-in cofx [:db :current-chat-id])
+                                   :key-uid (get-in cofx [:db :profile/profile :key-uid])}
+               :db                (assoc db :screens/was-focused-once? true)}
 
               (not (get db :screens/was-focused-once?))
               {:db (assoc db :screens/was-focused-once? true)})
diff --git a/src/status_im/notifications/local.cljs b/src/status_im/notifications/local.cljs
index 06ee95a3b6be..8aa31d7d118f 100644
--- a/src/status_im/notifications/local.cljs
+++ b/src/status_im/notifications/local.cljs
@@ -4,7 +4,7 @@
             [clojure.string :as string]
             [quo.platform :as platform]
             [re-frame.core :as re-frame]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im.ethereum.decode :as decode]
             [status-im.ethereum.tokens :as tokens]
             [utils.i18n :as i18n]
diff --git a/src/status_im/wallet/core.cljs b/src/status_im/wallet/core.cljs
index 92f701fb6c43..dbd745dcd3d4 100644
--- a/src/status_im/wallet/core.cljs
+++ b/src/status_im/wallet/core.cljs
@@ -3,7 +3,7 @@
     [clojure.set :as set]
     [clojure.string :as string]
     [re-frame.core :as re-frame]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [status-im.bottom-sheet.events :as bottom-sheet]
     [status-im.contact.db :as contact.db]
     [status-im.ethereum.core :as ethereum]
@@ -826,8 +826,8 @@
 (rf/defn get-buy-crypto-preference
   {:events [::get-buy-crypto]}
   [_]
-  {::async-storage/get {:keys [:buy-crypto-hidden]
-                        :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
+  {:async-storage-get {:keys [:buy-crypto-hidden]
+                       :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
 
 (rf/defn wallet-will-focus
   {:events [::wallet-stack]}
@@ -848,8 +848,8 @@
 (rf/defn hide-buy-crypto
   {:events [::hide-buy-crypto]}
   [{:keys [db]}]
-  {:db                  (assoc db :wallet/buy-crypto-hidden true)
-   ::async-storage/set! {:buy-crypto-hidden true}})
+  {:db                (assoc db :wallet/buy-crypto-hidden true)
+   :async-storage-set {:buy-crypto-hidden true}})
 
 (rf/defn store-buy-crypto
   {:events [::store-buy-crypto-preference]}
@@ -1025,8 +1025,8 @@
 (rf/defn switch-transactions-management-enabled
   {:events [:multiaccounts.ui/switch-transactions-management-enabled]}
   [{:keys [db]} enabled?]
-  {::async-storage/set! {:transactions-management-enabled? enabled?}
-   :db                  (assoc db :wallet/transactions-management-enabled? enabled?)})
+  {:async-storage-set {:transactions-management-enabled? enabled?}
+   :db                (assoc db :wallet/transactions-management-enabled? enabled?)})
 
 (re-frame/reg-fx
  :wallet/initialize-transactions-management-enabled
diff --git a/src/status_im2/common/async_storage.cljs b/src/status_im2/common/async_storage.cljs
new file mode 100644
index 000000000000..303073a9af33
--- /dev/null
+++ b/src/status_im2/common/async_storage.cljs
@@ -0,0 +1,7 @@
+(ns status-im2.common.async-storage
+  (:require [re-frame.core :as re-frame]
+            react-native.async-storage))
+
+(re-frame/reg-fx :async-storage-set (react-native.async-storage/set-item-factory))
+(re-frame/reg-fx :async-storage-get
+                 (fn [{ks :keys cb :cb}] (react-native.async-storage/get-items ks cb)))
diff --git a/src/status_im2/contexts/chat/composer/effects.cljs b/src/status_im2/contexts/chat/composer/effects.cljs
index 62e9c79164fa..ca37d9816090 100644
--- a/src/status_im2/contexts/chat/composer/effects.cljs
+++ b/src/status_im2/contexts/chat/composer/effects.cljs
@@ -5,7 +5,7 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.keyboard :as kb]
     [status-im2.contexts.chat.composer.utils :as utils]
diff --git a/src/status_im2/contexts/chat/composer/keyboard.cljs b/src/status_im2/contexts/chat/composer/keyboard.cljs
index fa99c1a80fac..0d519b276169 100644
--- a/src/status_im2/contexts/chat/composer/keyboard.cljs
+++ b/src/status_im2/contexts/chat/composer/keyboard.cljs
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.chat.composer.keyboard
   (:require [oops.core :as oops]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [react-native.core :as rn]
             [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]))
diff --git a/src/status_im2/contexts/chat/events.cljs b/src/status_im2/contexts/chat/events.cljs
index 3092931e88d4..383b25836545 100644
--- a/src/status_im2/contexts/chat/events.cljs
+++ b/src/status_im2/contexts/chat/events.cljs
@@ -18,7 +18,7 @@
             [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [re-frame.core :as re-frame]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
             [status-im2.common.muting.helpers :refer [format-mute-till]]))
 
@@ -173,9 +173,9 @@
     (chat.state/reset-visible-item)
     (rf/merge cofx
               (merge
-               {:db                  (dissoc db :current-chat-id)
-                ::async-storage/set! {:chat-id nil
-                                      :key-uid nil}}
+               {:db                (dissoc db :current-chat-id)
+                :async-storage-set {:chat-id nil
+                                    :key-uid nil}}
                (let [community-id (get-in db [:chats chat-id :community-id])]
                  ;; When navigating back from community chat to community, update switcher card
                  ;; A close chat event is also called while opening any chat.
diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs
index 053e83b63684..072defd6a601 100644
--- a/src/status_im2/contexts/communities/discover/view.cljs
+++ b/src/status_im2/contexts/communities/discover/view.cljs
@@ -23,7 +23,6 @@
         :on-press  #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
       [quo/community-list-item
        {:on-press      (fn []
-                         (rf/dispatch [:communities/load-category-states (:id item)])
                          (rf/dispatch [:dismiss-keyboard])
                          (rf/dispatch [:communities/navigate-to-community (:id item)]))
         :on-long-press #(rf/dispatch
@@ -147,7 +146,6 @@
 
              [quo/community-list-item
               {:on-press      (fn []
-                                (rf/dispatch [:communities/load-category-states (:id community)])
                                 (rf/dispatch [:dismiss-keyboard])
                                 (rf/dispatch [:communities/navigate-to-community (:id community)]))
                :on-long-press #(js/alert "TODO: to be implemented")}
diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs
index 052523e91f17..54986220b219 100644
--- a/src/status_im2/contexts/onboarding/common/background/view.cljs
+++ b/src/status_im2/contexts/onboarding/common/background/view.cljs
@@ -6,7 +6,7 @@
             [oops.core :refer [oget]]
             [react-native.platform :as platform]
             [status-im2.common.resources :as resources]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as shell.state]
             [status-im2.contexts.onboarding.common.carousel.view :as carousel]
             [status-im2.contexts.onboarding.common.background.style :as style]
diff --git a/src/status_im2/contexts/shell/jump_to/utils.cljs b/src/status_im2/contexts/shell/jump_to/utils.cljs
index 72dd630e9114..274d40040660 100644
--- a/src/status_im2/contexts/shell/jump_to/utils.cljs
+++ b/src/status_im2/contexts/shell/jump_to/utils.cljs
@@ -5,7 +5,7 @@
             [react-native.platform :as platform]
             [react-native.safe-area :as safe-area]
             [react-native.reanimated :as reanimated]
-            [status-im.async-storage.core :as async-storage]
+            [react-native.async-storage :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as state]
             [status-im2.contexts.shell.jump-to.constants :as shell.constants]
             [quo2.theme :as quo.theme]))
diff --git a/src/status_im2/core.cljs b/src/status_im2/core.cljs
index f4da25ca9c18..7990fb0be49e 100644
--- a/src/status_im2/core.cljs
+++ b/src/status_im2/core.cljs
@@ -15,7 +15,7 @@
     [status-im2.setup.dev :as dev]
     [status-im2.setup.global-error :as global-error]
     [status-im2.common.log :as log]
-    [status-im.async-storage.core :as async-storage]
+    [react-native.async-storage :as async-storage]
     [native-module.core :as native-module]
     [status-im.notifications.local :as notifications]
     [status-im.utils.universal-links.core :as utils.universal-links]
diff --git a/src/status_im2/events.cljs b/src/status_im2/events.cljs
index d808c61fa2aa..d4c6cf9920b3 100644
--- a/src/status_im2/events.cljs
+++ b/src/status_im2/events.cljs
@@ -16,6 +16,7 @@
             status-im2.contexts.shell.share.events
             status-im2.contexts.syncing.events
             status-im2.contexts.onboarding.common.overlay.events
+            status-im2.common.async-storage
             [status-im2.db :as db]
             [utils.re-frame :as rf]))
 

From f47a4a18e89e1b01277f88aeedd8f92c12ffadb8 Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Mon, 25 Sep 2023 13:22:07 +0200
Subject: [PATCH 4/9] chore: add docs with size (#17279)

* chore: update guidelines for sizes

* chore: update to size uses in codebase to follow new convention

---------

Co-authored-by: Ulises M <ulises.ssb@hotmail.com>
---
 src/quo2/README.md                            | 29 +++++++
 .../components/avatars/group_avatar/view.cljs | 22 ++---
 src/quo2/components/avatars/icon_avatar.cljs  | 18 ++---
 .../dropdowns/network_dropdown/view.cljs      |  2 +-
 .../list_items/preview_list/properties.cljs   | 80 +++++++++----------
 .../list_items/preview_list/view.cljs         |  4 +-
 .../components/messages/system_message.cljs   |  2 +-
 .../components/settings/data_item/view.cljs   |  2 +-
 .../components/tags/context_tag/view.cljs     |  2 +-
 .../tags/network_tags/component_spec.cljs     |  2 +-
 .../components/tags/network_tags/view.cljs    |  2 +-
 .../tags/number_tag/component_spec.cljs       |  4 +-
 .../components/tags/number_tag/style.cljs     | 40 +++++-----
 src/quo2/components/tags/number_tag/view.cljs |  2 +-
 src/quo2/components/wallet/keypair/view.cljs  | 25 +++---
 .../common/confirmation_drawer/view.cljs      |  2 +-
 .../contexts/chat/group_details/view.cljs     |  2 +-
 .../chat/home/chat_list_item/view.cljs        |  2 +-
 .../contexts/communities/overview/view.cljs   |  2 +-
 .../quo_preview/avatars/group_avatar.cljs     | 12 +--
 .../quo_preview/avatars/icon_avatar.cljs      | 10 +--
 .../quo_preview/list_items/preview_lists.cljs | 12 +--
 .../contexts/quo_preview/tags/number_tag.cljs | 12 +--
 .../components/switcher_cards/view.cljs       |  4 +-
 24 files changed, 162 insertions(+), 132 deletions(-)

diff --git a/src/quo2/README.md b/src/quo2/README.md
index 32a955eaa564..dac79a906783 100644
--- a/src/quo2/README.md
+++ b/src/quo2/README.md
@@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
   ...)
 ```
 
+### Handling Sizes
+In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
+
+The convention is `:size-<number>`, e.g size `20` is `:size-20`
+
+```clojure
+;; bad
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      20 20
+                      40 40
+                      0)}}]
+  ...)
+```
+
+```clojure
+;; good
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      :size-20 20
+                      :size-40 40
+                      0)}}]
+  ...)
+```
+
 ## Clojure var conventions
 
 - Due to the fact that every `view` namespace should export only one component
diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs
index 7d7608624e25..1620c0eefc41 100644
--- a/src/quo2/components/avatars/group_avatar/view.cljs
+++ b/src/quo2/components/avatars/group_avatar/view.cljs
@@ -7,21 +7,21 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:size/s-20 {:icon      12
-               :container 20}
-   :size/s-28 {:icon      16
-               :container 28}
-   :size/s-32 {:icon      16
-               :container 32}
-   :size/s-48 {:icon      20
-               :container 48}
-   :size/s-80 {:icon      32
-               :container 80}})
+  {:size-20 {:icon      12
+             :container 20}
+   :size-28 {:icon      16
+             :container 28}
+   :size-32 {:icon      16
+             :container 32}
+   :size-48 {:icon      20
+             :container 48}
+   :size-80 {:icon      32
+             :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size/s-20
+        :or   {size                :size-20
                customization-color :blue
                picture             nil
                icon-name           :i/group}}]
diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs
index 9f62a8975ec5..bf8f6c2d9aea 100644
--- a/src/quo2/components/avatars/icon_avatar.cljs
+++ b/src/quo2/components/avatars/icon_avatar.cljs
@@ -5,19 +5,19 @@
             [react-native.core :as rn]))
 
 (def ^:private sizes
-  {:size/s-48 {:component 48
-               :icon      20}
-   :size/s-32 {:component 32
-               :icon      20}
-   :size/s-24 {:component 24
-               :icon      16}
-   :size/s-20 {:component 20
-               :icon      12}})
+  {:size-48 {:component 48
+             :icon      20}
+   :size-32 {:component 32
+             :icon      20}
+   :size-24 {:component 24
+             :icon      16}
+   :size-20 {:component 20
+             :icon      12}})
 
 (defn icon-avatar-internal
   [{:keys [size icon color opacity border? theme]
     :or   {opacity 20
-           size    :size/s-32}}]
+           size    :size-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/custom-color color 50 opacity)
         icon-color                                  (colors/custom-color-by-theme color 50 60)]
diff --git a/src/quo2/components/dropdowns/network_dropdown/view.cljs b/src/quo2/components/dropdowns/network_dropdown/view.cljs
index b368bec77225..d14548fcf26b 100644
--- a/src/quo2/components/dropdowns/network_dropdown/view.cljs
+++ b/src/quo2/components/dropdowns/network_dropdown/view.cljs
@@ -20,7 +20,7 @@
        [preview-list/view
         {:type      :network
          :list-size (count networks)
-         :size      :size/s-20}
+         :size      :size-20}
         networks]])))
 
 (def view (quo.theme/with-theme internal-view))
diff --git a/src/quo2/components/list_items/preview_list/properties.cljs b/src/quo2/components/list_items/preview_list/properties.cljs
index b8a2f09cf426..21945efe8816 100644
--- a/src/quo2/components/list_items/preview_list/properties.cljs
+++ b/src/quo2/components/list_items/preview_list/properties.cljs
@@ -7,43 +7,43 @@
   (if (types-for-squared-border type) :squared :rounded))
 
 (def sizes
-  {:size/s-32 {:size             32
-               :user-avatar-size :small
-               :border-radius    {:rounded 16 :squared 10}
-               :hole-radius      {:rounded 18 :squared 12}
-               :margin-left      -8
-               :hole-size        36
-               :hole-x           22
-               :hole-y           -2}
-   :size/s-24 {:size             24
-               :user-avatar-size :xs
-               :border-radius    {:rounded 12 :squared 8}
-               :hole-radius      {:rounded 13 :squared 9}
-               :margin-left      -4
-               :hole-size        26
-               :hole-x           19
-               :hole-y           -1}
-   :size/s-20 {:size             20
-               :user-avatar-size :xxs
-               :border-radius    {:rounded 10 :squared 8}
-               :hole-radius      {:rounded 11 :squared 9}
-               :margin-left      -4
-               :hole-size        22
-               :hole-x           15
-               :hole-y           -1}
-   :size/s-16 {:size             16
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 8 :squared 8}
-               :hole-radius      {:rounded 9 :squared 9}
-               :margin-left      -4
-               :hole-size        18
-               :hole-x           11
-               :hole-y           -1}
-   :size/s-14 {:size             14
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 7 :squared 7}
-               :hole-radius      {:rounded 8 :squared 8}
-               :margin-left      -2
-               :hole-size        16
-               :hole-x           11
-               :hole-y           -1}})
+  {:size-32 {:size             32
+             :user-avatar-size :small
+             :border-radius    {:rounded 16 :squared 10}
+             :hole-radius      {:rounded 18 :squared 12}
+             :margin-left      -8
+             :hole-size        36
+             :hole-x           22
+             :hole-y           -2}
+   :size-24 {:size             24
+             :user-avatar-size :xs
+             :border-radius    {:rounded 12 :squared 8}
+             :hole-radius      {:rounded 13 :squared 9}
+             :margin-left      -4
+             :hole-size        26
+             :hole-x           19
+             :hole-y           -1}
+   :size-20 {:size             20
+             :user-avatar-size :xxs
+             :border-radius    {:rounded 10 :squared 8}
+             :hole-radius      {:rounded 11 :squared 9}
+             :margin-left      -4
+             :hole-size        22
+             :hole-x           15
+             :hole-y           -1}
+   :size-16 {:size             16
+             :user-avatar-size :xxxs
+             :border-radius    {:rounded 8 :squared 8}
+             :hole-radius      {:rounded 9 :squared 9}
+             :margin-left      -4
+             :hole-size        18
+             :hole-x           11
+             :hole-y           -1}
+   :size-14 {:size             14
+             :user-avatar-size :xxxs
+             :border-radius    {:rounded 7 :squared 7}
+             :hole-radius      {:rounded 8 :squared 8}
+             :margin-left      -2
+             :hole-size        16
+             :hole-x           11
+             :hole-y           -1}})
diff --git a/src/quo2/components/list_items/preview_list/view.cljs b/src/quo2/components/list_items/preview_list/view.cljs
index 3ec739ebefff..768df73e7b46 100644
--- a/src/quo2/components/list_items/preview_list/view.cljs
+++ b/src/quo2/components/list_items/preview_list/view.cljs
@@ -118,13 +118,13 @@
   "[preview-list opts items]
    opts
    {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
+    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
     :number        number of items in the list (optional)
     :blur?         overflow-label blur?}
    items           preview list items (only 4 items is required for preview)
   "
   [{:keys [type size number blur? theme more-than-99-label]} items]
-  (let [size-key      (if (contains? properties/sizes size) size :size/s-24)
+  (let [size-key      (if (contains? properties/sizes size) size :size-24)
         number        (or number (count items))
         margin-left   (get-in properties/sizes [size-key :margin-left])
         border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs
index b965e15d2465..71c6e4419b29 100644
--- a/src/quo2/components/messages/system_message.cljs
+++ b/src/quo2/components/messages/system_message.cljs
@@ -21,7 +21,7 @@
   [rn/view
    {:margin-right 8}
    [icon-avatar/icon-avatar
-    {:size    :size/s-32
+    {:size    :size-32
      :icon    icon
      :color   color
      :opacity opacity}]])
diff --git a/src/quo2/components/settings/data_item/view.cljs b/src/quo2/components/settings/data_item/view.cljs
index 5a9c80e05d79..18cdaf225295 100644
--- a/src/quo2/components/settings/data_item/view.cljs
+++ b/src/quo2/components/settings/data_item/view.cljs
@@ -88,7 +88,7 @@
      :preview [preview-list/view
                {:type   :communities
                 :number 3
-                :size   :size/s-24}
+                :size   :size-24}
                communities-list]
      :graph   [text/text "graph"]
      :none    nil
diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs
index 645f821efaf4..16ecf428b28d 100644
--- a/src/quo2/components/tags/context_tag/view.cljs
+++ b/src/quo2/components/tags/context_tag/view.cljs
@@ -114,7 +114,7 @@
      [tag-skeleton {:theme theme :size size :text group-name}
       [group-avatar/view
        {:icon-name           :i/members
-        :size                (if (= size 24) :size/s-20 :size/s-28)
+        :size                (if (= size 24) :size-20 :size-28)
         :customization-color (colors/custom-color customization-color 50)}]]
 
      (:channel :community)
diff --git a/src/quo2/components/tags/network_tags/component_spec.cljs b/src/quo2/components/tags/network_tags/component_spec.cljs
index e249ded34259..51a3b05d04f3 100644
--- a/src/quo2/components/tags/network_tags/component_spec.cljs
+++ b/src/quo2/components/tags/network_tags/component_spec.cljs
@@ -15,5 +15,5 @@
                 :networks [{:source "network-icon1.png"}
                            {:source "network-icon2.png"}
                            {:source "network-icon3.png"}]
-                :size     :size/s-32}])
+                :size     :size-32}])
     (h/is-truthy (h/get-by-text "Multiple Networks"))))
diff --git a/src/quo2/components/tags/network_tags/view.cljs b/src/quo2/components/tags/network_tags/view.cljs
index 64620d61aa04..6e0df2032424 100644
--- a/src/quo2/components/tags/network_tags/view.cljs
+++ b/src/quo2/components/tags/network_tags/view.cljs
@@ -14,7 +14,7 @@
    [preview-list/view
     {:type   :network
      :number (count networks)
-     :size   :size/s-16} networks]
+     :size   :size-16} networks]
    [text/text
     {:weight :medium
      :size   :paragraph-2
diff --git a/src/quo2/components/tags/number_tag/component_spec.cljs b/src/quo2/components/tags/number_tag/component_spec.cljs
index 44de6e69ea16..7543d52678a2 100644
--- a/src/quo2/components/tags/number_tag/component_spec.cljs
+++ b/src/quo2/components/tags/number_tag/component_spec.cljs
@@ -8,13 +8,13 @@
     (h/render [number-tag/view
                {:type   :rounded
                 :number "3"
-                :size   :size/s-32
+                :size   :size-32
                 :blur?  false}])
     (h/is-truthy (h/get-by-text "+3")))
   (h/test "+48 render"
     (h/render [number-tag/view
                {:type   :squared
                 :number "48"
-                :size   :size/s-24
+                :size   :size-24
                 :blur?  true}])
     (h/is-truthy (h/get-by-text "+48"))))
diff --git a/src/quo2/components/tags/number_tag/style.cljs b/src/quo2/components/tags/number_tag/style.cljs
index b8ea4303bdce..9a653fd8b6f9 100644
--- a/src/quo2/components/tags/number_tag/style.cljs
+++ b/src/quo2/components/tags/number_tag/style.cljs
@@ -2,26 +2,26 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:size/s-32 {:size          32
-               :width-extra   40
-               :border-radius {:rounded 16 :squared 10}
-               :icon-size     20}
-   :size/s-24 {:size          24
-               :width-extra   32
-               :border-radius {:rounded 12 :squared 8}
-               :icon-size     16}
-   :size/s-20 {:size          20
-               :width-extra   24
-               :border-radius {:rounded 10 :squared 8}
-               :icon-size     12}
-   :size/s-16 {:size          16
-               :width-extra   20
-               :border-radius {:rounded 8 :squared 8}
-               :icon-size     12}
-   :size/s-14 {:size          14
-               :width-extra   16
-               :border-radius {:rounded 7 :squared 7}
-               :icon-size     12}})
+  {:size-32 {:size          32
+             :width-extra   40
+             :border-radius {:rounded 16 :squared 10}
+             :icon-size     20}
+   :size-24 {:size          24
+             :width-extra   32
+             :border-radius {:rounded 12 :squared 8}
+             :icon-size     16}
+   :size-20 {:size          20
+             :width-extra   24
+             :border-radius {:rounded 10 :squared 8}
+             :icon-size     12}
+   :size-16 {:size          16
+             :width-extra   20
+             :border-radius {:rounded 8 :squared 8}
+             :icon-size     12}
+   :size-14 {:size          14
+             :width-extra   16
+             :border-radius {:rounded 7 :squared 7}
+             :icon-size     12}})
 
 (defn get-color
   [blur? theme]
diff --git a/src/quo2/components/tags/number_tag/view.cljs b/src/quo2/components/tags/number_tag/view.cljs
index a3b06f0192fd..61ef93dec882 100644
--- a/src/quo2/components/tags/number_tag/view.cljs
+++ b/src/quo2/components/tags/number_tag/view.cljs
@@ -12,7 +12,7 @@
     [rn/view (style/container props)
      (if (and (> size-value 20) (< (count number) 3))
        [text/text
-        {:size   (if (= size :size/s-32)
+        {:size   (if (= size :size-32)
                    :paragraph-2
                    :label)
          :weight :medium
diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs
index 0d8795ca3625..dcc27af94231 100644
--- a/src/quo2/components/wallet/keypair/view.cljs
+++ b/src/quo2/components/wallet/keypair/view.cljs
@@ -25,18 +25,19 @@
        (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
 
 (defn avatar
-  [{:keys [type details customization-color]}]
-  (let [{:keys [full-name]} details]
-    (if (= type :default-keypair)
-      [user-avatar/user-avatar
-       {:full-name           full-name
-        :ring?               true
-        :size                :small
-        :customization-color customization-color}]
-      [icon-avatar/icon-avatar
-       {:size    :size-32
-        :icon    :i/placeholder
-        :border? true}])))
+  [{{:keys [full-name]} :details
+    avatar-type         :type
+    customization-color :customization-color}]
+  (if (= avatar-type :default-keypair)
+    [user-avatar/user-avatar
+     {:full-name           full-name
+      :ring?               true
+      :size                :small
+      :customization-color customization-color}]
+    [icon-avatar/icon-avatar
+     {:size    :size-32
+      :icon    :i/placeholder
+      :border? true}]))
 
 (defn title-view
   [{:keys [details action selected? type blur? customization-color on-options-press theme]}]
diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs
index cfbba52dc1e4..1e5f3758fb83 100644
--- a/src/status_im2/common/confirmation_drawer/view.cljs
+++ b/src/status_im2/common/confirmation_drawer/view.cljs
@@ -11,7 +11,7 @@
   (if group-chat
     [quo/group-avatar
      {:customization-color color
-      :size                :size/s-20}]
+      :size                :size-20}]
     [quo/user-avatar
      {:full-name         display-name
       :profile-picture   photo-path
diff --git a/src/status_im2/contexts/chat/group_details/view.cljs b/src/status_im2/contexts/chat/group_details/view.cljs
index 1f4b711741ce..0105a66b35bb 100644
--- a/src/status_im2/contexts/chat/group_details/view.cljs
+++ b/src/status_im2/contexts/chat/group_details/view.cljs
@@ -169,7 +169,7 @@
                :padding-horizontal 20}}
       [quo/group-avatar
        {:customization-color color
-        :size                :size/s-32}]
+        :size                :size-32}]
       [quo/text
        {:weight :semi-bold
         :size   :heading-1
diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
index 3636da13c57c..ddefe234bb0d 100644
--- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
+++ b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
@@ -181,7 +181,7 @@
          (assoc :ring? false))])
     [quo/group-avatar
      {:customization-color color
-      :size                :size/s-32}]))
+      :size                :size-32}]))
 
 (defn notification
   [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs
index 7286fa1026a9..0b50ccca4f43 100644
--- a/src/status_im2/contexts/communities/overview/view.cljs
+++ b/src/status_im2/contexts/communities/overview/view.cljs
@@ -24,7 +24,7 @@
      [quo/preview-list
       {:type   :user
        :number (count user-list)
-       :size   :size/s-24}
+       :size   :size-24}
       user-list]
      [quo/text
       {:accessibility-label :communities-screen-title
diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
index 335721201d06..9f1a0b0c05a3 100644
--- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
@@ -7,15 +7,15 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key   :size/s-20
+    :options [{:key   :size-20
                :value "20"}
-              {:key   :size/s-28
+              {:key   :size-28
                :value "28"}
-              {:key   :size/s-32
+              {:key   :size-32
                :value "32"}
-              {:key   :size/s-48
+              {:key   :size-48
                :value "48"}
-              {:key   :size/s-80
+              {:key   :size-80
                :value "80"}]}
    {:label "Avatar:"
     :key   :picture?
@@ -27,7 +27,7 @@
 (defn view
   []
   (let [state (reagent/atom {:customization-color :blue
-                             :size                :size/s-20
+                             :size                :size-20
                              :picture?            false})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
index e2caa1b90ea4..a39438b08aa5 100644
--- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
@@ -6,10 +6,10 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key :size/s-20}
-              {:key :size/s-24}
-              {:key :size/s-32}
-              {:key :size/s-48}]}
+    :options [{:key :size-20}
+              {:key :size-24}
+              {:key :size-32}
+              {:key :size-48}]}
    {:key     :icon
     :type    :select
     :options [{:key   :i/placeholder20
@@ -20,7 +20,7 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:size  :size/s-48
+  (let [state (reagent/atom {:size  :size-48
                              :icon  :i/placeholder20
                              :color :primary})]
     (fn []
diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
index 529da6f66122..20c2de77794f 100644
--- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
@@ -24,15 +24,15 @@
                :value "Network"}]}
    {:key     :size
     :type    :select
-    :options [{:key   :size/s-32
+    :options [{:key   :size-32
                :value "32"}
-              {:key   :size/s-24
+              {:key   :size-24
                :value "24"}
-              {:key   :size/s-20
+              {:key   :size-20
                :value "20"}
-              {:key   :size/s-16
+              {:key   :size-16
                :value "16"}
-              {:key   :size/s-14
+              {:key   :size-14
                :value "14"}]}
    {:key  :number
     :type :text}
@@ -105,7 +105,7 @@
 (defn view
   []
   (let [state (reagent/atom {:type               :accounts
-                             :size               :size/s-32
+                             :size               :size-32
                              :number             4
                              :more-than-99-label "99+"})
         type  (reagent/cursor state [:type])
diff --git a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
index 2634c8006a09..9a881e0128cf 100644
--- a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs
@@ -13,15 +13,15 @@
     :type :text}
    {:key     :size
     :type    :select
-    :options [{:key   :size/s-32
+    :options [{:key   :size-32
                :value "32"}
-              {:key   :size/s-24
+              {:key   :size-24
                :value "24"}
-              {:key   :size/s-20
+              {:key   :size-20
                :value "20"}
-              {:key   :size/s-16
+              {:key   :size-16
                :value "16"}
-              {:key   :size/s-14
+              {:key   :size-14
                :value "14"}]}
    {:key  :blur?
     :type :boolean}])
@@ -30,7 +30,7 @@
   []
   (let [state (reagent/atom {:type   :squared
                              :number "148"
-                             :size   :size/s-32
+                             :size   :size-32
                              :blur?  false})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
index d67b36d4fb5c..0eb3971b79fe 100644
--- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
@@ -68,7 +68,7 @@
        [quo/preview-list
         {:type               :collectibles
          :more-than-99-label (i18n/label :counter-99-plus)
-         :size               :size/s-24}
+         :size               :size-24}
         data]
 
        constants/content-type-sticker
@@ -125,7 +125,7 @@
     shell.constants/private-group-chat-card
     [quo/group-avatar
      {:customization-color customization-color
-      :size                :size/s-48
+      :size                :size-48
       :override-theme      :dark}]
 
     (shell.constants/community-card

From a9b63e0f22afdd9817114b09408255df54ea4bcc Mon Sep 17 00:00:00 2001
From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Date: Mon, 25 Sep 2023 19:58:20 +0800
Subject: [PATCH 5/9] Update "Preview List" component to use "Number Tag" for
 overflow item (#17257)

This commit updates

- the preview-list component to use "number-tag" for overflow items in the list as a follow-up of the PR Update "Preview list" component.

- the usage of the preview-list component in the context-tag (multiuser and multinetwork type) is updated as it was broken.

- the size APIs of preview-list and number-tag and their usage across the codebase to respect the new guidelines.

---------

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
---
 .../list_items/preview_list/view.cljs         | 96 ++++---------------
 .../settings/settings_item/view.cljs          |  3 +-
 .../components/tags/context_tag/view.cljs     | 17 ++--
 .../components/tags/number_tag/style.cljs     | 15 +--
 src/quo2/components/tags/number_tag/view.cljs |  4 +-
 .../quo_preview/list_items/preview_lists.cljs |  7 +-
 .../quo_preview/tags/context_tags.cljs        | 80 +++++++++-------
 .../components/switcher_cards/view.cljs       |  5 +-
 8 files changed, 90 insertions(+), 137 deletions(-)

diff --git a/src/quo2/components/list_items/preview_list/view.cljs b/src/quo2/components/list_items/preview_list/view.cljs
index 768df73e7b46..bbedcf0766cf 100644
--- a/src/quo2/components/list_items/preview_list/view.cljs
+++ b/src/quo2/components/list_items/preview_list/view.cljs
@@ -1,67 +1,13 @@
 (ns quo2.components.list-items.preview-list.view
   (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as quo2.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
             [quo2.components.list-items.preview-list.properties :as properties]
+            [quo2.components.tags.number-tag.view :as number-tag]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
             [react-native.hole-view :as hole-view]))
 
-;; This overflow item needs to be cleaned up once the "number tag" component is implemented
-;; https://github.com/status-im/status-mobile/issues/17045
-(defn get-overflow-color
-  [blur? blur-light-color blur-dark-color light-color dark-color theme]
-  (if blur?
-    (colors/theme-colors blur-light-color blur-dark-color theme)
-    (colors/theme-colors light-color dark-color theme)))
-
-(def more-icon-for-sizes #{16 14})
-
-(defn overflow-label
-  [{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
-  [rn/view
-   {:style {:width            size
-            :height           size
-            :margin-left      margin-left
-            :border-radius    border-radius
-            :justify-content  :center
-            :align-items      :center
-            :background-color (get-overflow-color
-                               blur?
-                               colors/neutral-80-opa-5
-                               colors/white-opa-5
-                               colors/neutral-20
-                               colors/neutral-90
-                               theme)}}
-   (if (more-icon-for-sizes size)
-     [quo2.icons/icon :i/more
-      {:size  12
-       :color (get-overflow-color
-               blur?
-               colors/neutral-80-opa-70
-               colors/white-opa-70
-               colors/neutral-50
-               colors/neutral-40
-               theme)}]
-     [quo2.text/text
-      {:size   (if (= size 32) :paragraph-2 :label)
-       :weight :medium
-       :style  {:color       (get-overflow-color
-                              blur?
-                              colors/neutral-80-opa-70
-                              colors/white-opa-70
-                              colors/neutral-50
-                              colors/neutral-40
-                              theme)
-                :margin-left -2}}
-      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
-      (if (< label 100)
-        (str "+" label)
-        more-than-99-label)])])
-
 (defn- preview-item
   [{:keys [item type size-key]}]
   (let [size             (get-in properties/sizes [size-key :size])
@@ -70,22 +16,22 @@
                                  [size-key :border-radius (properties/border-type type)])]
     (case type
       :user                        [user-avatar/user-avatar
-                                    (merge {:ring?             false
-                                            :status-indicator? false
-                                            :size              user-avatar-size}
-                                           item)]
+                                    (assoc item
+                                           :ring?             false
+                                           :status-indicator? false
+                                           :size              user-avatar-size)]
 
       :accounts                    [account-avatar/view
-                                    (merge item {:size size})]
+                                    (assoc item :size size)]
 
       (:communities :collectibles) [fast-image/fast-image
-                                    {:source (:source item)
+                                    {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
 
       (:tokens :network :dapps)    [fast-image/fast-image
-                                    {:source (:source item)
+                                    {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
@@ -123,11 +69,11 @@
     :blur?         overflow-label blur?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size number blur? theme more-than-99-label]} items]
-  (let [size-key      (if (contains? properties/sizes size) size :size-24)
-        number        (or number (count items))
-        margin-left   (get-in properties/sizes [size-key :margin-left])
-        border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
+  [{:keys [type size number blur?]} items]
+  (let [size-key    (if (contains? properties/sizes size) size :size-24)
+        number      (or number (count items))
+        border-type (properties/border-type type)
+        margin-left (get-in properties/sizes [size-key :margin-left])]
     [rn/view {:style {:flex-direction :row}}
      (for [index (range (if (> number 4) 3 number))]
        ^{:key (str index number)}
@@ -138,13 +84,11 @@
          :item     (get (vec items) index)
          :number   number}])
      (when (> number 4)
-       [overflow-label
-        {:label              (- number 3)
-         :size               (get-in properties/sizes [size-key :size])
-         :blur?              blur?
-         :border-radius      border-radius
-         :margin-left        margin-left
-         :theme              theme
-         :more-than-99-label more-than-99-label}])]))
+       [number-tag/view
+        {:type            border-type
+         :number          (str (- number 3))
+         :size            size-key
+         :blur?           blur?
+         :container-style {:margin-left margin-left}}])]))
 
 (def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/settings/settings_item/view.cljs b/src/quo2/components/settings/settings_item/view.cljs
index 9d7252f3cc0b..71a188cda60b 100644
--- a/src/quo2/components/settings/settings_item/view.cljs
+++ b/src/quo2/components/settings/settings_item/view.cljs
@@ -83,7 +83,8 @@
                label-props]
      :color   [rn/view
                {:style (style/label-dot label-props)}]
-     :preview [preview-list/view {:type (:type label-props)} (:data label-props)]
+     :preview [preview-list/view {:type (:type label-props) :size :size-24}
+               (:data label-props)]
      nil)])
 
 (defn action-component
diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs
index 16ecf428b28d..6320bdd916cb 100644
--- a/src/quo2/components/tags/context_tag/view.cljs
+++ b/src/quo2/components/tags/context_tag/view.cljs
@@ -91,19 +91,20 @@
      :default
      [tag-skeleton {:theme theme :size size :text full-name}
       [user-avatar/user-avatar
-       {:full-name         full-name
-        :profile-picture   profile-picture
-        :size              (if (= size 24) :xxs 28)
-        :status-indicator? false
-        :ring?             false}]]
+       {:full-name           full-name
+        :profile-picture     profile-picture
+        :size                (if (= size 24) :xxs 28)
+        :status-indicator?   false
+        :ring?               false
+        :customization-color customization-color}]]
 
      :multiuser
-     [preview-list/view {:type :user :size 20}
+     [preview-list/view {:type :user :size :size-20}
       users]
 
      :multinetwork
-     [preview-list/view {:type :network :size 20}
-      (map #(hash-map :profile-picture %) networks)]
+     [preview-list/view {:type :network :size :size-20}
+      networks]
 
      :audio
      [tag-skeleton {:theme theme :text (str duration)}
diff --git a/src/quo2/components/tags/number_tag/style.cljs b/src/quo2/components/tags/number_tag/style.cljs
index 9a653fd8b6f9..30a618b30b61 100644
--- a/src/quo2/components/tags/number_tag/style.cljs
+++ b/src/quo2/components/tags/number_tag/style.cljs
@@ -55,10 +55,11 @@
     (get-in sizes [size (if widen? :width-extra :size)])))
 
 (defn container
-  [{:keys [type number size blur? theme]}]
-  {:style {:width            (get-width size number)
-           :height           (get-in sizes [size :size])
-           :border-radius    (get-shape-value size :border-radius type)
-           :justify-content  :center
-           :align-items      :center
-           :background-color (get-bg-color blur? theme)}})
+  [{:keys [type number size blur? theme container-style]}]
+  {:style (assoc container-style
+                 :width            (get-width size number)
+                 :height           (get-in sizes [size :size])
+                 :border-radius    (get-shape-value size :border-radius type)
+                 :justify-content  :center
+                 :align-items      :center
+                 :background-color (get-bg-color blur? theme))})
diff --git a/src/quo2/components/tags/number_tag/view.cljs b/src/quo2/components/tags/number_tag/view.cljs
index 61ef93dec882..2098d32e8898 100644
--- a/src/quo2/components/tags/number_tag/view.cljs
+++ b/src/quo2/components/tags/number_tag/view.cljs
@@ -1,9 +1,9 @@
 (ns quo2.components.tags.number-tag.view
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [react-native.core :as rn]
             [quo2.components.tags.number-tag.style :as style]
-            [quo2.theme :as quo.theme]))
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]))
 
 (defn view-internal
   [{:keys [number size blur? theme] :as props}]
diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
index 20c2de77794f..63f3e7b410e6 100644
--- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
+++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
@@ -104,10 +104,9 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:type               :accounts
-                             :size               :size-32
-                             :number             4
-                             :more-than-99-label "99+"})
+  (let [state (reagent/atom {:type   :accounts
+                             :size   :size-32
+                             :number 4})
         type  (reagent/cursor state [:type])
         blur? (reagent/cursor state [:blur?])]
     (fn []
diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
index e967a1170594..9c4880022940 100644
--- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
@@ -1,5 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.context-tags
   (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
@@ -69,8 +70,9 @@
       :type    :select
       :options (map (fn [idx]
                       {:key   (mapv (fn [picture idx-name]
-                                      {:profile-picture picture
-                                       :full-name       (str (inc idx-name))})
+                                      {:profile-picture     picture
+                                       :full-name           (str (inc idx-name))
+                                       :customization-color (rand-nth (keys colors/customization))})
                                     (take idx (cycle users))
                                     (range))
                        :value (str idx)})
@@ -175,12 +177,15 @@
           :customization-color :army
           :profile-picture     nil
           :full-name           "Full Name"
-          :users               [{:profile-picture (resources/mock-images :user-picture-male5)
-                                 :full-name       "1"}
-                                {:profile-picture nil
-                                 :full-name       "3"}
-                                {:profile-picture (resources/mock-images :user-picture-male5)
-                                 :full-name       "2"}]
+          :users               [{:profile-picture     (resources/mock-images :user-picture-male5)
+                                 :full-name           "1"
+                                 :customization-color (rand-nth (keys colors/customization))}
+                                {:profile-picture     nil
+                                 :full-name           "3"
+                                 :customization-color (rand-nth (keys colors/customization))}
+                                {:profile-picture     (resources/mock-images :user-picture-male5)
+                                 :full-name           "2"
+                                 :customization-color (rand-nth (keys colors/customization))}]
           :group-name          "Group"
           :community-logo      (resources/mock-images :coinbase)
           :community-name      "Community"
@@ -200,31 +205,34 @@
           :address             example-pk
           :icon                :i/placeholder
           :context             "Context"
-          :duration            "00:32"})]
-    (fn []
-      [preview/preview-container
-       {:state      state
-        :descriptor (concat descriptor
-                            (case (:type @state)
-                              :default      default-descriptor
-                              :multiuser    multiuser-descriptor
-                              :group        group-descriptor
-                              :channel      channel-descriptor
-                              :community    community-descriptor
-                              :token        token-descriptor
-                              :network      network-descriptor
-                              :multinetwork multinetwork-descriptor
-                              :account      account-descriptor
-                              :collectible  collectible-descriptor
-                              :address      address-descriptor
-                              :icon         icon-descriptor
-                              :audio        audio-descriptor
-                              default-descriptor))}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:padding-vertical 60}}
-         [preview/blur-view
-          {:style                 {:flex              1
-                                   :margin-vertical   20
-                                   :margin-horizontal 40}
-           :show-blur-background? (:blur? @state)}
-          [quo/context-tag @state]]]]])))
+          :duration            "00:32"})
+        type (reagent/cursor state [:type])]
+    [:f>
+     (fn []
+       (rn/use-effect (fn []
+                        (when (#{:multiuser :multinetwork :audio} @type)
+                          (swap! state assoc :size 24)))
+                      [@type])
+       [preview/preview-container
+        {:state                 state
+         :descriptor            (concat descriptor
+                                        (case (:type @state)
+                                          :default      default-descriptor
+                                          :multiuser    multiuser-descriptor
+                                          :group        group-descriptor
+                                          :channel      channel-descriptor
+                                          :community    community-descriptor
+                                          :token        token-descriptor
+                                          :network      network-descriptor
+                                          :multinetwork multinetwork-descriptor
+                                          :account      account-descriptor
+                                          :collectible  collectible-descriptor
+                                          :address      address-descriptor
+                                          :icon         icon-descriptor
+                                          :audio        audio-descriptor
+                                          default-descriptor))
+         :blur-height           80
+         :blur?                 true
+         :show-blur-background? (:blur? @state)}
+        [rn/view {:style {:align-items :center}}
+         [quo/context-tag @state]]])]))
diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
index 0eb3971b79fe..8e4ca907dcd5 100644
--- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
@@ -66,9 +66,8 @@
 
        constants/content-type-image
        [quo/preview-list
-        {:type               :collectibles
-         :more-than-99-label (i18n/label :counter-99-plus)
-         :size               :size-24}
+        {:type :collectibles
+         :size :size-24}
         data]
 
        constants/content-type-sticker

From 1dfab2b41612bf617130bc2aff8de7b8675a485a Mon Sep 17 00:00:00 2001
From: Mohsen Ghafouri <maxghafori@gmail.com>
Date: Mon, 25 Sep 2023 15:47:38 +0300
Subject: [PATCH 6/9] [#17333] fix: disable ring for small avatar (#17385)

---
 src/status_im2/common/confirmation_drawer/view.cljs             | 1 +
 src/status_im2/contexts/chat/messages/content/deleted/view.cljs | 1 +
 src/status_im2/subs/profile.cljs                                | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs
index 1e5f3758fb83..c9c4331b7e77 100644
--- a/src/status_im2/common/confirmation_drawer/view.cljs
+++ b/src/status_im2/common/confirmation_drawer/view.cljs
@@ -16,6 +16,7 @@
      {:full-name         display-name
       :profile-picture   photo-path
       :size              :xxs
+      :ring?             false
       :status-indicator? false}]))
 
 (defn extra-action-view
diff --git a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs
index c0db70c2bb58..360ed96e68e6 100644
--- a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs
+++ b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs
@@ -17,6 +17,7 @@
      {:full-name         display-name
       :profile-picture   profile-picture
       :status-indicator? false
+      :ring?             false
       :size              :xxxs}]]
    [quo/text
     {:weight          :semi-bold
diff --git a/src/status_im2/subs/profile.cljs b/src/status_im2/subs/profile.cljs
index c1e8082a8647..6c81783e8bb3 100644
--- a/src/status_im2/subs/profile.cljs
+++ b/src/status_im2/subs/profile.cljs
@@ -40,7 +40,7 @@
  (fn [[multiaccounts port font-file] [_ target-key-uid]]
    (let [{:keys [images ens-name?] :as multiaccount} (get multiaccounts target-key-uid)
          image-name                                  (-> images first :type)
-         override-ring?                              (not ens-name?)]
+         override-ring?                              (when ens-name? false)]
      (when multiaccount
        {:fn
         (if image-name

From 3082605d1e9897da1b1784588aa22fdc65c84823 Mon Sep 17 00:00:00 2001
From: mmilad75 <55688834+mmilad75@users.noreply.github.com>
Date: Mon, 25 Sep 2023 16:30:54 +0330
Subject: [PATCH 7/9] Handle account-card component pressed state bg color
 (#17234)

Handle account-card component pressed state bg color
---
 src/quo2/components/buttons/button/view.cljs  |  17 +-
 .../components/wallet/account_card/style.cljs |  19 +-
 .../components/wallet/account_card/view.cljs  | 204 +++++++++++-------
 .../foundations/customization_colors.cljs     |   3 +-
 .../quo_preview/wallet/account_card.cljs      |   4 +-
 5 files changed, 150 insertions(+), 97 deletions(-)

diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs
index 58cba2cf5736..57ca495a388a 100644
--- a/src/quo2/components/buttons/button/view.cljs
+++ b/src/quo2/components/buttons/button/view.cljs
@@ -29,10 +29,11 @@
    only icon
    [button {:icon-only? true} :i/close-circle]"
   [_ _]
-  (let [pressed? (reagent/atom false)]
+  (let [pressed-state? (reagent/atom false)]
     (fn
       [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-               customization-color theme accessibility-label icon-only? container-style inner-style]
+               customization-color theme accessibility-label icon-only? container-style inner-style
+               pressed? on-press-in on-press-out]
         :or   {type                :primary
                size                40
                customization-color (cond (= type :primary)  :blue
@@ -46,14 +47,18 @@
                                            :background          background
                                            :type                type
                                            :theme               theme
-                                           :pressed?            @pressed?
+                                           :pressed?            (if pressed? pressed? @pressed-state?)
                                            :icon-only?          icon-only?})
             icon-size (when (= 24 size) 12)]
         [rn/touchable-without-feedback
          {:disabled            disabled?
           :accessibility-label accessibility-label
-          :on-press-in         #(reset! pressed? true)
-          :on-press-out        #(reset! pressed? nil)
+          :on-press-in         (fn []
+                                 (reset! pressed-state? true)
+                                 (when on-press-in (on-press-in)))
+          :on-press-out        (fn []
+                                 (reset! pressed-state? nil)
+                                 (when on-press-out (on-press-out)))
           :on-press            on-press
           :on-long-press       on-long-press}
          [rn/view
@@ -76,7 +81,7 @@
              [customization-colors/overlay
               {:customization-color customization-color
                :theme               theme
-               :pressed?            @pressed?}])
+               :pressed?            (if pressed? pressed? @pressed-state?)}])
            (when (= background :photo)
              [blur/view
               {:blur-radius   20
diff --git a/src/quo2/components/wallet/account_card/style.cljs b/src/quo2/components/wallet/account_card/style.cljs
index 54c30e62390c..90c0d6ac6ece 100644
--- a/src/quo2/components/wallet/account_card/style.cljs
+++ b/src/quo2/components/wallet/account_card/style.cljs
@@ -9,7 +9,7 @@
     colors/white))
 
 (defn card
-  [customization-color watch-only? metrics? theme]
+  [{:keys [customization-color watch-only? metrics? theme pressed?]}]
   {:width              162
    :height             (if metrics? 88 68)
    :background-color   (if watch-only?
@@ -21,7 +21,10 @@
    :border-radius      16
    :border-width       1
    :border-color       (if watch-only?
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                         (colors/theme-colors
+                          (if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
+                          (if pressed? colors/white-opa-10 colors/white-opa-5)
+                          theme)
                          colors/neutral-80-opa-10)
    :padding-horizontal 12
    :padding-top        6
@@ -67,10 +70,13 @@
    :margin-horizontal 4})
 
 (defn add-account-container
-  [theme metrics?]
+  [{:keys [theme metrics? pressed?]}]
   {:width              161
    :height             (if metrics? 88 68)
-   :border-color       (colors/theme-colors colors/neutral-20 colors/white-opa-5 theme)
+   :border-color       (colors/theme-colors
+                        (if pressed? colors/neutral-40 colors/neutral-30)
+                        (if pressed? colors/neutral-70 colors/neutral-80)
+                        theme)
    :border-width       1
    :border-style       :dashed
    :align-items        :center
@@ -84,7 +90,7 @@
    :line-height 20})
 
 (defn loader-view
-  [width height watch-only? theme]
+  [{:keys [width height watch-only? theme]}]
   {:width            width
    :height           height
    :background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10)
@@ -93,3 +99,6 @@
 (def loader-container
   {:flex-direction :row
    :align-items    :center})
+
+(def metrics-icon-container
+  {:margin-left 4})
diff --git a/src/quo2/components/wallet/account_card/view.cljs b/src/quo2/components/wallet/account_card/view.cljs
index c7b6f7bb28c1..85e033a396ae 100644
--- a/src/quo2/components/wallet/account_card/view.cljs
+++ b/src/quo2/components/wallet/account_card/view.cljs
@@ -5,8 +5,9 @@
             [quo2.components.wallet.account-card.style :as style]
             [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
-            [utils.i18n :as i18n]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]
+            [reagent.core :as reagent]
+            [quo2.foundations.customization-colors :as customization-colors]))
 
 (defn- loading-view
   [{:keys [customization-color type theme metrics?]}]
@@ -14,103 +15,142 @@
         empty-type? (= :empty type)]
     [rn/view
      {:accessibility-label :loading
-      :style               (style/card customization-color watch-only? metrics? theme)}
+      :style               (style/card {:customization-color customization-color
+                                        :watch-only?         watch-only?
+                                        :metrics?            metrics?
+                                        :theme               theme
+                                        :pressed?            false})}
      [rn/view {:style style/loader-container}
       [rn/view
-       {:style (assoc (style/loader-view 16
-                                         16
-                                         watch-only?
-                                         theme)
+       {:style (assoc (style/loader-view {:width       16
+                                          :height      16
+                                          :watch-only? watch-only?
+                                          :theme       theme})
                       :margin-right 8
                       :margin-top   2)}]
       [rn/view {:style style/watch-only-container}
-       [rn/view {:style (style/loader-view 57 8 watch-only? theme)}]
-       (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
+       [rn/view
+        {:style (style/loader-view {:width       57
+                                    :height      8
+                                    :watch-only? watch-only?
+                                    :theme       theme})}]
+       (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
      [rn/view
-      {:style (assoc (style/loader-view
-                      (if empty-type? 56 80)
-                      16
-                      watch-only?
-                      theme)
+      {:style (assoc (style/loader-view {:width       (if empty-type? 56 80)
+                                         :height      16
+                                         :watch-only? watch-only?
+                                         :theme       theme})
                      :margin-top
                      13)}]
      (when metrics?
        [rn/view
         {:accessibility-label :metrics
-         :style               (assoc (style/loader-view
-                                      (if empty-type? 37 96)
-                                      8
-                                      watch-only?
-                                      theme)
+         :style               (assoc (style/loader-view {:width       (if empty-type? 37 96)
+                                                         :height      8
+                                                         :watch-only? watch-only?
+                                                         :theme       theme})
                                      :margin-top
                                      10)}])]))
 
+(defn- metrics-percentage
+  [watch-only? theme account-percentage]
+  [text/text
+   {:weight              :semi-bold
+    :size                :paragraph-2
+    :accessibility-label :metrics
+    :style               (style/metrics watch-only? theme)}
+   account-percentage])
+
+(defn- metrics-info
+  [watch-only? theme account-amount]
+  [:<>
+   [rn/view (style/separator watch-only? theme)]
+   [text/text
+    {:weight :semi-bold
+     :size   :paragraph-2
+     :style  (style/metrics watch-only? theme)}
+    account-amount]
+   [rn/view {:style style/metrics-icon-container}
+    [icon/icon
+     :i/positive
+     {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
+                                  colors/white-opa-70
+                                  theme)
+      :size  16}]]])
+
 (defn- user-account
-  [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics?
-           theme on-press]}]
-  (let [watch-only?        (= :watch-only type)
-        empty-type?        (= :empty type)
-        account-amount     (if (= :empty state) "€0.00" amount)
-        account-name       (if (= :empty state) (i18n/label :t/Account 1) name)
-        account-percentage (if (= :empty state) "€0.00" percentage-value)]
-    (if loading?
-      [loading-view
-       {:customization-color customization-color
-        :type                type
-        :theme               theme
-        :metrics?            metrics?}]
-      [rn/pressable
-       {:style    (style/card customization-color watch-only? metrics? theme)
-        :on-press on-press}
-       [rn/view {:style style/profile-container}
-        [rn/view {:style {:padding-bottom 2 :margin-right 2}}
-         [text/text {:style style/emoji} emoji]]
-        [rn/view {:style style/watch-only-container}
-         [text/text
-          {:size   :paragraph-2
-           :weight :medium
-           :style  (style/account-name watch-only? theme)}
-          account-name]
-         (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
-       [text/text
-        {:size   :heading-2
-         :weight :semi-bold
-         :style  (style/account-value watch-only? theme)}
-        balance]
-       (when metrics?
-         [rn/view {:style style/metrics-container}
-          [text/text
-           {:weight              :semi-bold
-            :size                :paragraph-2
-            :accessibility-label :metrics
-            :style               (style/metrics watch-only? theme)}
-           account-percentage]
-          (when (not empty-type?)
-            [:<>
-             [rn/view (style/separator watch-only? theme)]
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
+                 theme on-press]}]
+      (let [watch-only? (= :watch-only type)]
+        (if loading?
+          [loading-view
+           {:customization-color customization-color
+            :type                type
+            :theme               theme
+            :metrics?            metrics?}]
+          [rn/pressable
+           {:on-press-in  on-press-in
+            :on-press-out on-press-out
+            :style        (style/card {:customization-color customization-color
+                                       :watch-only?         watch-only?
+                                       :metrics?            metrics?
+                                       :theme               theme
+                                       :pressed?            @pressed?})
+            :on-press     on-press}
+           (when (and customization-color (not watch-only?))
+             [customization-colors/overlay
+              {:customization-color customization-color
+               :border-radius       16
+               :theme               theme
+               :pressed?            @pressed?}])
+           [rn/view {:style style/profile-container}
+            [rn/view {:style {:padding-bottom 2 :margin-right 2}}
+             [text/text {:style style/emoji} emoji]]
+            [rn/view {:style style/watch-only-container}
              [text/text
-              {:weight :semi-bold
-               :size   :paragraph-2
-               :style  (style/metrics watch-only? theme)} account-amount]
-             [rn/view {:style {:margin-left 4}}
-              [icon/icon :positive
-               {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
-                                            colors/white-opa-70
-                                            theme)
-                :size  16}]]])])])))
+              {:size   :paragraph-2
+               :weight :medium
+               :style  (style/account-name watch-only? theme)}
+              name]
+             (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
+           [text/text
+            {:size   :heading-2
+             :weight :semi-bold
+             :style  (style/account-value watch-only? theme)}
+            balance]
+           (when metrics?
+             [rn/view {:style style/metrics-container}
+              [metrics-percentage watch-only? theme percentage-value]
+              (when (not= :empty type)
+                [metrics-info watch-only? theme amount])])])))))
 
 (defn- add-account-view
-  [{:keys [on-press customization-color theme metrics?]}]
-  [rn/view (style/add-account-container theme metrics?)
-   [button/button
-    {:type                :primary
-     :size                24
-     :icon                true
-     :accessibility-label :add-account
-     :on-press            on-press
-     :customization-color customization-color
-     :icon-only?          true}
-    :i/add]])
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [on-press customization-color theme metrics?]}]
+      [rn/pressable
+       {:on-press     on-press
+        :on-press-in  #(reset! pressed? true)
+        :on-press-out #(reset! pressed? false)
+        :style        (style/add-account-container {:theme    theme
+                                                    :metrics? metrics?
+                                                    :pressed? @pressed?})}
+       [button/button
+        {:type                :primary
+         :size                24
+         :icon                true
+         :accessibility-label :add-account
+         :on-press            on-press
+         :pressed?            @pressed?
+         :on-press-in         #(reset! pressed? true)
+         :on-press-out        #(reset! pressed? false)
+         :customization-color customization-color
+         :icon-only?          true}
+        :i/add]])))
 
 (defn- view-internal
   [{:keys [type] :as props}]
@@ -121,4 +161,4 @@
     :empty       [user-account props]
     nil))
 
-(def view (theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/foundations/customization_colors.cljs b/src/quo2/foundations/customization_colors.cljs
index e67fd306e0e3..125d9871e9da 100644
--- a/src/quo2/foundations/customization_colors.cljs
+++ b/src/quo2/foundations/customization_colors.cljs
@@ -10,11 +10,12 @@
       (colors/alpha colors/black (if pressed? 0 0.2)))))
 
 (defn overlay
-  [{:keys [theme pressed? customization-color]}]
+  [{:keys [theme pressed? customization-color border-radius]}]
   [rn/view
    {:position         :absolute
     :top              0
     :left             0
     :right            0
     :bottom           0
+    :border-radius    border-radius
     :background-color (get-overlay-color theme pressed? customization-color)}])
diff --git a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs
index 2a20291e9245..a13bebb8877c 100644
--- a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs
+++ b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs
@@ -116,7 +116,5 @@
                    :justify-content  :center
                    :margin-left      8}}
           [icon/icon :i/check {:color colors/white :size 16}]]]
-        [rn/view {:style {:flex 1}}
-         [preview/customizer state descriptor]]
-        [rn/view {:style {:align-items :center :margin-top 40}}
+        [rn/view {:style {:align-items :center :margin-bottom 20}}
          [quo/account-card @state]]])]))

From aa405c66e9918a6d41118146c01db700d07c2019 Mon Sep 17 00:00:00 2001
From: Ajay Sivan <ajayesivan@gmail.com>
Date: Mon, 25 Sep 2023 14:04:03 +0530
Subject: [PATCH 8/9] Remove old quo requires from status_im2 namespace

---
 Makefile                                              |  1 +
 scripts/lint-old-quo-usage.sh                         | 11 +++++++++++
 src/status_im2/common/qr_code_viewer/style.cljs       |  6 ++----
 src/status_im2/common/theme/core.cljs                 |  6 ++----
 .../contexts/chat/messages/content/text/style.cljs    |  2 +-
 .../quo_preview/community/community_card_view.cljs    |  5 ++---
 .../contexts/quo_preview/community/data.cljs          |  5 ++---
 .../contexts/quo_preview/inputs/profile_input.cljs    |  2 +-
 .../quo_preview/onboarding/small_option_card.cljs     |  2 +-
 src/status_im2/contexts/quo_preview/tags/tag.cljs     |  2 +-
 .../contexts/syncing/sheets/enter_password/view.cljs  |  6 ++----
 11 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 scripts/lint-old-quo-usage.sh

diff --git a/Makefile b/Makefile
index aaf02a9cf2fd..c0682da226c2 100644
--- a/Makefile
+++ b/Makefile
@@ -311,6 +311,7 @@ endef
 lint: export TARGET := clojure
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
+	sh scripts/lint-old-quo-usage.sh && \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
diff --git a/scripts/lint-old-quo-usage.sh b/scripts/lint-old-quo-usage.sh
new file mode 100644
index 000000000000..b88887fb1ac9
--- /dev/null
+++ b/scripts/lint-old-quo-usage.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :as' --include '*.cljs' --include '*.clj' './src/status_im2')
+
+echo -e "\nChecking 'status_im2' namespace for 'quo' namespace usage."
+
+if [ -n "$QUO_USAGES" ]; then
+    echo -e "\033[0;31mERROR: Usage of the old 'quo' namespace detected in 'status_im2' code. Please update to 'quo2'. \n"
+    echo -e "$QUO_USAGES \033[0m"
+    exit 1
+fi
diff --git a/src/status_im2/common/qr_code_viewer/style.cljs b/src/status_im2/common/qr_code_viewer/style.cljs
index 6108246071fd..072b8c7498d0 100644
--- a/src/status_im2/common/qr_code_viewer/style.cljs
+++ b/src/status_im2/common/qr_code_viewer/style.cljs
@@ -1,5 +1,5 @@
 (ns status-im2.common.qr-code-viewer.style
-  (:require [quo.design-system.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def qr-code-padding 16)
 
@@ -9,9 +9,7 @@
    :width              width
    :height             width
    :padding-horizontal 16
-   :background-color   colors/white-persist
-   :border-color       colors/black-transparent
+   :background-color   colors/white
    :align-items        :center
    :justify-content    :center
-   :border-width       1
    :border-radius      8})
diff --git a/src/status_im2/common/theme/core.cljs b/src/status_im2/common/theme/core.cljs
index c402d14219d8..15c5beb67291 100644
--- a/src/status_im2/common/theme/core.cljs
+++ b/src/status_im2/common/theme/core.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.common.theme.core
-  (:require [quo.theme :as quo]
-            [quo2.theme :as quo2]
+  (:require [quo2.theme :as quo.theme]
             [utils.re-frame :as rf]
             [oops.core :refer [oget]]
             [react-native.core :as rn]
@@ -31,5 +30,4 @@
 
 (defn set-theme
   [value]
-  (quo/set-theme value)
-  (quo2/set-theme value))
+  (quo.theme/set-theme value))
diff --git a/src/status_im2/contexts/chat/messages/content/text/style.cljs b/src/status_im2/contexts/chat/messages/content/text/style.cljs
index f68b4964ddc7..60da56153362 100644
--- a/src/status_im2/contexts/chat/messages/content/text/style.cljs
+++ b/src/status_im2/contexts/chat/messages/content/text/style.cljs
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.chat.messages.content.text.style
   (:require [quo2.foundations.colors :as colors]
-            [quo.platform :as platform]))
+            [react-native.platform :as platform]))
 
 (def block
   {:border-radius      6
diff --git a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs
index a238612eb6d6..2a6a981d8c7e 100644
--- a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs
+++ b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.community.community-card-view
-  (:require [quo.design-system.colors :as quo.colors]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]
@@ -13,7 +12,7 @@
    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
    :cover (resources/get-mock-image :community-cover)
    :community-icon (resources/get-mock-image :status-logo)
-   :color (rand-nth quo.colors/chat-colors)
+   :customization-color :blue
    :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]
    :tags [{:id        1
            :tag-label (i18n/label :t/music)
diff --git a/src/status_im2/contexts/quo_preview/community/data.cljs b/src/status_im2/contexts/quo_preview/community/data.cljs
index d5731ec6aa38..db50cec3b195 100644
--- a/src/status_im2/contexts/quo_preview/community/data.cljs
+++ b/src/status_im2/contexts/quo_preview/community/data.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.community.data
-  (:require [quo.design-system.colors :as quo.colors]
-            [utils.i18n :as i18n]
+  (:require [utils.i18n :as i18n]
             [status-im2.common.resources :as resources]))
 
 (def thumbnail
@@ -11,8 +10,8 @@
    :name "Status"
    :description
    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
+   :customization-color :blue
    :community-icon thumbnail
-   :color (rand-nth quo.colors/chat-colors)
    :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]
    :tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
           {:id        2
diff --git a/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs b/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs
index 3c98947388d8..f6d9c170e062 100644
--- a/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs
+++ b/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs
@@ -3,7 +3,7 @@
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [quo.react-native :as rn]))
+            [react-native.core :as rn]))
 
 (def descriptor
   [{:key  :disabled?
diff --git a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
index 9865831db1b6..e8b70a93b766 100644
--- a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
+++ b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.quo-preview.onboarding.small-option-card
   (:require
-    [quo.react-native :as rn]
+    [react-native.core :as rn]
     [quo2.components.onboarding.small-option-card.view :as quo2]
     [quo2.foundations.colors :as colors]
     [reagent.core :as reagent]
diff --git a/src/status_im2/contexts/quo_preview/tags/tag.cljs b/src/status_im2/contexts/quo_preview/tags/tag.cljs
index cb7f108988a9..593b2fd5c529 100644
--- a/src/status_im2/contexts/quo_preview/tags/tag.cljs
+++ b/src/status_im2/contexts/quo_preview/tags/tag.cljs
@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.tags.tag
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.tags.tag :as tag]
             [status-im.ui.components.react :as react]
diff --git a/src/status_im2/contexts/syncing/sheets/enter_password/view.cljs b/src/status_im2/contexts/syncing/sheets/enter_password/view.cljs
index 9286895eeef8..73e2a149fdd9 100644
--- a/src/status_im2/contexts/syncing/sheets/enter_password/view.cljs
+++ b/src/status_im2/contexts/syncing/sheets/enter_password/view.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.contexts.syncing.sheets.enter-password.view
   (:require [utils.i18n :as i18n]
-            [quo.core :as quo-old]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
@@ -22,13 +21,12 @@
         (i18n/label :t/enter-your-password)]
        [rn/view {:flex-direction :row :align-items :center}
         [rn/view {:flex 1}
-         [quo-old/text-input
+         [quo/input
           {:placeholder         (i18n/label :t/enter-your-password)
            :auto-focus          true
            :accessibility-label :password-input
-           :show-cancel         false
            :on-change-text      #(reset! entered-password %)
-           :secure-text-entry   true}]]]
+           :type                :password}]]]
        [rn/view
         {:padding-horizontal 18
          :margin-top         20}

From f7592368f0a424d92c1447ee1bb9ae20888a500b Mon Sep 17 00:00:00 2001
From: Ajay Sivan <ajayesivan@gmail.com>
Date: Mon, 25 Sep 2023 16:12:56 +0530
Subject: [PATCH 9/9] Fix lint-old-quo-usage script and usage

---
 Makefile                      | 2 +-
 scripts/lint-old-quo-usage.sh | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Makefile b/Makefile
index c0682da226c2..9329f21ce0e4 100644
--- a/Makefile
+++ b/Makefile
@@ -311,7 +311,7 @@ endef
 lint: export TARGET := clojure
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
-	sh scripts/lint-old-quo-usage.sh && \
+	sh scripts/lint-old-quo-usage.sh \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
diff --git a/scripts/lint-old-quo-usage.sh b/scripts/lint-old-quo-usage.sh
index b88887fb1ac9..29fe88554456 100644
--- a/scripts/lint-old-quo-usage.sh
+++ b/scripts/lint-old-quo-usage.sh
@@ -1,6 +1,8 @@
 #!/usr/bin/env sh
 
-QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :as' --include '*.cljs' --include '*.clj' './src/status_im2')
+set -euo pipefail
+
+QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :as' --include '*.cljs' --include '*.clj' './src/status_im2' || true)
 
 echo -e "\nChecking 'status_im2' namespace for 'quo' namespace usage."