fix: missing/empty user-avatar in component previews (#17430)

src/status_im2/contexts/quo_preview/list_items/user_list.cljs

@@ -1,7 +1,8 @@
 (ns status-im2.contexts.quo-preview.list-items.user-list
-  (:require [reagent.core :as reagent]
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.core :as quo]
             [utils.address :as address]))
 
 (def descriptor
@@ -27,6 +28,7 @@
   (let [state (reagent/atom {:primary-name   "Alisher Yakupov"
                              :short-chat-key (address/get-shortened-compressed-key
                                               "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N")
+                             :photo-path     (resources/mock-images :user-picture-female2)
                              :ens-verified   true
                              :contact?       false
                              :verified?      false

src/status_im2/contexts/quo_preview/messages/system_message.cljs

@@ -2,6 +2,7 @@
   (:require [quo2.core :as quo]
             [react-native.core :as rn]
             [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
@@ -28,7 +29,8 @@
   [state]
   (merge @state
          {:child        (when (= (:type @state) :pinned) [rn/text (:content @state)])
-          :display-name (:pinned-by @state)}))
+          :display-name (:pinned-by @state)
+          :photo-path   (resources/mock-images :user-picture-female2)}))
 
 (defn view
   []

src/status_im2/contexts/quo_preview/navigation/top_nav.cljs

@@ -1,7 +1,8 @@
 (ns status-im2.contexts.quo-preview.navigation.top-nav
-  (:require [quo2.foundations.colors :as colors]
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [quo2.core :as quo]
+            [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
@@ -44,8 +45,9 @@
            :customization-color      customization-color
            :notification-count       notification-count
            :jump-to?                 jump-to?
-           :avatar-props             {:online?   true
-                                      :full-name "Test User"}
+           :avatar-props             {:online?         true
+                                      :full-name       "Test User"
+                                      :profile-picture (resources/mock-images :user-picture-female2)}
            :avatar-on-press          #(js/alert "avatar pressed")
            :scan-on-press            #(js/alert "scan pressed")
            :activity-center-on-press #(js/alert "activity-center pressed")

src/status_im2/contexts/quo_preview/notifications/toast.cljs

@@ -3,6 +3,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]
             [utils.re-frame :as rf]))
 
@@ -67,6 +68,14 @@
     :text       "This is an example toast"
     :duration   30000}])
 
+(defn toast-button-with-user-avatar
+  []
+  [toast-button
+   "Toast: with user-avatar"
+   {:text "This is an example toast"
+    :user {:profile-picture (resources/mock-images :user-picture-female2)
+           :size            :small}}])
+
 (defn update-toast-button
   []
   (let [suffix (reagent/atom 0)]
@@ -98,5 +107,6 @@
      [toast-button-with-undo-action]
      [toast-button-multiline]
      [toast-button-30s-duration]
+     [toast-button-with-user-avatar]
      [update-toast-button]
      [update-toast-button]]]])