reloading contact list when selected and unselected

* Add variant unknown variant for collectibles

* Fix blank collectibles listed

* Improve `expanded-collectible` animation and add support for different gradient-colors

* Make :wallet/collectible-details-owner subscription depend on `wallet/accounts` instead of `:wallet`

* Make collectible tabs component more flexible

* Remove now unused subscriptions

* Improve UX navigation to collectible detail page

* Pass the current collectible gradient-color when a collectible is pressed

* Fix tests

src/legacy/status_im/events.cljs

@@ -108,8 +108,7 @@
     (when (and (multiaccounts.model/logged-in? db)
                (= current-theme-type status-im.constants/theme-type-system))
       {:profile.settings/switch-theme-fx
-       [(get-in db [:profile/profile :appearance])
-        (:view-id db) true]})))
+       [(get-in db [:profile/profile :appearance]) (:view-id db)]})))
 
 (defn- on-biometric-auth-fail
   [{:keys [code]}]

src/quo/components/profile/collectible_list_item/style.cljs

@@ -11,7 +11,7 @@
 (defn fallback
   [{:keys [theme opacity]}]
   [{:opacity opacity}
-   {:opacity          default-opacity-for-image
+   {:opacity          1
     :background-color (colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme)
     :border-style     :dashed
     :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
@@ -60,8 +60,13 @@
    :padding-right  0
    :padding-top    4})
 
-(def card-detail-text
-  {:flex 1})
+(defn card-detail-text
+  [empty-name? theme]
+  {:flex         1
+   :margin-right 8
+   :color        (if empty-name?
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+                   (colors/theme-colors colors/neutral-100 colors/white theme))})
 
 (defn card-loader
   [opacity]
@@ -115,6 +120,7 @@
   [{:opacity opacity}
    {:flex           1
     :flex-direction :row
+    :column-gap     8
     :opacity        default-opacity-for-image}])
 
 (defn supported-file

src/quo/components/profile/collectible_list_item/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.profile.collectible-list-item.view
   (:require
+    [clojure.string :as string]
     [quo.components.avatars.collection-avatar.view :as collection-avatar]
     [quo.components.counter.collectible-counter.view :as collectible-counter]
     [quo.components.icon :as icon]
@@ -21,7 +22,7 @@
 (def cached-load-time 200)
 (def error-wait-time 800)
 
-(defn on-load-end
+(defn animate-loading-image
   [{:keys [load-time set-state loader-opacity image-opacity]}]
   (reanimated/animate loader-opacity 0 timing-options-out)
   (reanimated/animate image-opacity 1 timing-options-in)
@@ -60,12 +61,12 @@
                  (assoc prev-state :avatar-loaded? true)))))
 
 (defn- fallback-view
-  [{:keys [label theme image-opacity]}]
-  [reanimated/view
-   {:style (style/fallback {:opacity image-opacity
-                            :theme   theme})}
+  [{:keys [label theme image-opacity on-load-end]}]
+  (rn/use-mount on-load-end)
+  [reanimated/view {:style (style/fallback {:opacity image-opacity :theme theme})}
    [rn/view
-    [icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
+    [icon/icon :i/sad
+     {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
    [rn/view {:style {:height 4}}]
    [text/text
     {:size  :paragraph-2
@@ -93,31 +94,43 @@
   [{:keys [community? avatar-image-src collectible-name theme state set-state]}]
   (let [loader-opacity            (reanimated/use-shared-value 1)
         avatar-opacity            (reanimated/use-shared-value 0)
-        [load-time set-load-time] (rn/use-state (datetime/now))]
+        [load-time set-load-time] (rn/use-state (datetime/now))
+        set-avatar-loaded         (fn []
+                                    (on-load-avatar {:set-state      set-state
+                                                     :load-time      load-time
+                                                     :loader-opacity loader-opacity
+                                                     :avatar-opacity avatar-opacity}))
+        empty-name?               (string/blank? collectible-name)]
+    (rn/use-mount (fn []
+                    (when (string/blank? avatar-image-src)
+                      (set-avatar-loaded))))
     [rn/view {:style style/card-details-container}
      [reanimated/view {:style (style/avatar-container avatar-opacity)}
-      (if community?
-        [preview-list/view
-         {:type :communities
-          :size :size-20}
+      (cond
+        (string/blank? avatar-image-src)
+        [loading-square theme]
+
+        community?
+        [preview-list/view {:type :communities :size :size-20}
          [avatar-image-src]]
+
+        :else
         [collection-avatar/view
          {:size        :size-20
           :on-start    #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
-          :on-load-end #(on-load-avatar {:set-state      set-state
-                                         :load-time      load-time
-                                         :loader-opacity loader-opacity
-                                         :avatar-opacity avatar-opacity})
+          :on-load-end set-avatar-loaded
           :image       avatar-image-src}])
-      [rn/view {:style {:width 8}}]
       [text/text
        {:size            :paragraph-1
         :weight          :semi-bold
         :ellipsize-mode  :tail
         :number-of-lines 1
-        :style           style/card-detail-text}
-       collectible-name]]
-     (when (not (:avatar-loaded? state))
+        :style           (style/card-detail-text empty-name? theme)}
+       (if empty-name?
+         (i18n/label :t/unknown)
+         collectible-name)]]
+
+     (when-not (:avatar-loaded? state)
        [reanimated/view {:style (style/card-loader loader-opacity)}
         [loading-square theme]
         [loading-message theme]])]))
@@ -128,40 +141,44 @@
   (let [theme                     (quo.theme/use-theme)
         loader-opacity            (reanimated/use-shared-value (if supported-file? 1 0))
         image-opacity             (reanimated/use-shared-value (if supported-file? 0 1))
-        [load-time set-load-time] (rn/use-state (datetime/now))]
+        [load-time set-load-time] (rn/use-state (datetime/now))
+        set-image-loaded          (fn []
+                                    (animate-loading-image {:load-time      load-time
+                                                            :set-state      set-state
+                                                            :loader-opacity loader-opacity
+                                                            :image-opacity  image-opacity}))]
     [rn/view {:style (style/card-view-container theme)}
      [rn/view {:style {:aspect-ratio 1}}
       (cond
-        (:image-error? state)
-        [fallback-view
-         {:image-opacity image-opacity
-          :theme         theme
-          :label         (i18n/label :t/cant-fetch-info)}]
+        (:image-error? state)        [fallback-view
+                                      {:image-opacity image-opacity
+                                       :on-load-end   set-image-loaded
+                                       :theme         theme
+                                       :label         (i18n/label :t/cant-fetch-info)}]
+        (not supported-file?)        [fallback-view
+                                      {:image-opacity image-opacity
+                                       :on-load-end   set-image-loaded
+                                       :theme         theme
+                                       :label         (i18n/label :t/unsupported-file)}]
+        (not (:image-loaded? state)) [loading-image
+                                      {:loader-opacity       loader-opacity
+                                       :theme                theme
+                                       :gradient-color-index gradient-color-index}])
 
-        (not supported-file?)
-        [fallback-view
-         {:image-opacity image-opacity
-          :theme         theme
-          :label         (i18n/label :t/unsupported-file)}]
-
-        (not (:image-loaded? state))
-        [loading-image
-         {:loader-opacity       loader-opacity
-          :theme                theme
-          :gradient-color-index gradient-color-index}])
       (when supported-file?
         [reanimated/view {:style (style/supported-file image-opacity)}
          [rn/image
           {:style         style/image
            :on-load       #(on-load % set-state)
            :on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
-           :on-load-end   #(on-load-end {:load-time      load-time
-                                         :set-state      set-state
-                                         :loader-opacity loader-opacity
-                                         :image-opacity  image-opacity})
+           :on-load-end   set-image-loaded
            :on-error      #(on-load-error set-state)
            :source        image-src}]])]
-     (when (and (:image-loaded? state) (not (:image-error? state)) counter)
+
+     (when (and (or (:image-loaded? state)
+                    (not supported-file?))
+                (not (:image-error? state))
+                counter)
        [collectible-counter/view
         {:container-style style/collectible-counter
          :size            :size-24
@@ -206,10 +223,10 @@
          {:style         style/image
           :on-load       #(on-load % set-state)
           :on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
-          :on-load-end   #(on-load-end {:load-time      load-time
-                                        :set-state      set-state
-                                        :loader-opacity loader-opacity
-                                        :image-opacity  image-opacity})
+          :on-load-end   #(animate-loading-image {:load-time      load-time
+                                                  :set-state      set-state
+                                                  :loader-opacity loader-opacity
+                                                  :image-opacity  image-opacity})
           :on-error      #(on-load-error set-state)
           :source        image-src}]])
      (when (and (:image-loaded? state) (not (:image-error? state)) counter)

src/quo/components/profile/expanded_collectible/view.cljs

@@ -11,38 +11,24 @@
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
     [schema.core :as schema]
-    [utils.datetime :as datetime]
     [utils.i18n :as i18n]))
 
-(def timing-options-out 650)
-(def timing-options-in 1000)
-(def first-load-time 500)
-(def cached-load-time 200)
+(def loader-out 650)
+(def image-in 1000)
 (def error-wait-time 800)
 
 (defn on-load-end
-  [{:keys [load-time set-state loader-opacity image-opacity]}]
-  (reanimated/animate loader-opacity 0 timing-options-out)
-  (reanimated/animate image-opacity 1 timing-options-in)
-  (if (> load-time cached-load-time)
-    (js/setTimeout
-     (fn []
-       (set-state (fn [prev-state]
-                    (assoc prev-state :image-loaded? true))))
-     first-load-time)
-    (set-state (fn [prev-state]
-                 (assoc prev-state :image-loaded? true)))))
+  [{:keys [loader-opacity image-opacity]}]
+  (reanimated/animate loader-opacity 0 loader-out)
+  (reanimated/animate image-opacity 1 image-in))
 
 (defn on-load-error
-  [set-state]
-  (js/setTimeout (fn []
-                   (set-state (fn [prev-state] (assoc prev-state :image-error? true))))
-                 error-wait-time))
+  [set-error]
+  (js/setTimeout set-error error-wait-time))
 
 (defn- loading-image
   [{:keys [theme gradient-color-index loader-opacity aspect-ratio]}]
-  [reanimated/view
-   {:style (style/loading-image-with-opacity loader-opacity)}
+  [reanimated/view {:style (style/loading-image-with-opacity loader-opacity)}
    [gradients/view
     {:theme           theme
      :container-style (style/gradient-view aspect-ratio)
@@ -67,62 +53,64 @@
      :style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
     label]])
 
+(defn- collectible-image
+  [{:keys [aspect-ratio theme gradient-color-index supported-file? set-error native-ID
+           square? image-src on-collectible-load counter]}]
+  (let [loader-opacity (reanimated/use-shared-value (if supported-file? 1 0))
+        image-opacity  (reanimated/use-shared-value (if supported-file? 0 1))]
+    [:<>
+     [loading-image
+      {:aspect-ratio         aspect-ratio
+       :loader-opacity       loader-opacity
+       :theme                theme
+       :gradient-color-index gradient-color-index}]
+
+     [reanimated/view {:style (style/supported-file image-opacity)}
+      [rn/image
+       {:style       (style/image square? aspect-ratio theme)
+        :source      image-src
+        :native-ID   native-ID
+        :on-load-end (fn []
+                       (on-load-end {:loader-opacity loader-opacity
+                                     :image-opacity  image-opacity}))
+        :on-error    #(on-load-error set-error)
+        :on-load     on-collectible-load}]
+      (when counter
+        [counter-view counter])
+      [rn/view {:style (style/collectible-border theme)}]]]))
+
 (defn view-internal
   [{:keys [container-style square? on-press counter image-src native-ID supported-file?
-           on-collectible-load aspect-ratio]}]
-  (let [theme                     (quo.theme/use-theme)
-        loader-opacity            (reanimated/use-shared-value
-                                   (if supported-file? 1 0))
-        image-opacity             (reanimated/use-shared-value
-                                   (if supported-file? 0 1))
-        [load-time set-load-time] (rn/use-state (datetime/now))
-        [state set-state]         (rn/use-state {:image-loaded? false
-                                                 :image-error?  (or (nil? image-src)
-                                                                    (string/blank?
-                                                                     image-src))})]
+           on-collectible-load aspect-ratio gradient-color-index]
+    :or   {gradient-color-index :gradient-1
+           on-collectible-load  (fn [])}}]
+  (let [theme              (quo.theme/use-theme)
+        [error? set-error] (rn/use-state (or (nil? image-src)
+                                             (string/blank? image-src)))]
     [rn/pressable
-     {:on-press            (when (and (not (:image-error? state)) supported-file?) on-press)
+     {:style               (merge container-style (style/container aspect-ratio))
       :accessibility-label :expanded-collectible
-      :style               (merge container-style
-                                  (style/container aspect-ratio))}
-     (cond
-       (not supported-file?)
+      :on-press            (when (and (not error?) supported-file?)
+                             on-press)}
+     (if (or (not supported-file?) error?)
        [fallback-view
-        {:aspect-ratio aspect-ratio
-         :label        (i18n/label :t/unsupported-file)
-         :counter      counter
-         :theme        theme
-         :on-mount     on-collectible-load}]
-
-       (:image-error? state)
-       [fallback-view
-        {:label    (i18n/label :t/cant-fetch-info)
+        {:label    (i18n/label (if-not supported-file?
+                                 :t/unsupported-file
+                                 :t/cant-fetch-info))
          :counter  counter
          :theme    theme
          :on-mount on-collectible-load}]
-
-       (not (:image-loaded? state))
-       [loading-image
+       [collectible-image
         {:aspect-ratio         aspect-ratio
-         :loader-opacity       loader-opacity
          :theme                theme
-         :gradient-color-index :gradient-5}])
-     (when supported-file?
-       [reanimated/view {:style (style/supported-file image-opacity)}
-        [rn/image
-         {:style         (style/image square? aspect-ratio theme)
-          :source        image-src
-          :native-ID     native-ID
-          :on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
-          :on-load-end   #(on-load-end {:load-time      load-time
-                                        :set-state      set-state
-                                        :loader-opacity loader-opacity
-                                        :image-opacity  image-opacity})
-          :on-error      #(on-load-error set-state)
-          :on-load       on-collectible-load}]
-        (when counter
-          [counter-view counter])
-        [rn/view {:style (style/collectible-border theme)}]])]))
+         :supported-file?      supported-file?
+         :set-error            set-error
+         :native-ID            native-ID
+         :square?              square?
+         :image-src            image-src
+         :on-collectible-load  on-collectible-load
+         :counter              counter
+         :gradient-color-index gradient-color-index}])]))
 
 (def ?schema
   [:=>
@@ -137,7 +125,8 @@
       [:square? {:optional true} [:maybe boolean?]]
       [:counter {:optional true} [:maybe string?]]
       [:on-press {:optional true} [:maybe fn?]]
-      [:on-collectible-load {:optional true} [:maybe fn?]]]]]
+      [:on-collectible-load {:optional true} [:maybe fn?]]
+      [:gradient-color-index {:optional true} [:maybe keyword?]]]]]
    :any])
 
 (def view (schema/instrument #'view-internal ?schema))

src/quo/components/tags/context_tag/schema.cljs

@@ -6,7 +6,7 @@
    [:type {:optional true}
     [:maybe
      [:enum :default :multiuser :group :channel :community :token :network :multinetwork :account
-      :collectible :address :icon :audio :wallet-user]]]
+      :collectible :address :icon :audio :wallet-user :dapp]]]
    [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
    [:container-style {:optional true} [:maybe :map]]
    [:blur? {:optional true} [:maybe :boolean]]

src/quo/components/tags/context_tag/view.cljs

@@ -17,16 +17,18 @@
     [schema.core :as schema]))
 
 (defn- tag-skeleton
-  [{:keys [size text] :or {size 24}} logo-component]
-  (let [theme (quo.theme/use-theme)]
-    [rn/view {:style (style/tag-container size)}
-     logo-component
-     [rn/view {:style (style/tag-spacing size)}
-      [text/text
-       {:style  (style/text theme)
-        :weight :medium
-        :size   (if (= size 24) :paragraph-2 :paragraph-1)}
-       text]]]))
+  [{:keys [size text theme]
+    :or   {size  24
+           theme (quo.theme/use-theme)}}
+   logo-component]
+  [rn/view {:style (style/tag-container size)}
+   logo-component
+   [rn/view {:style (style/tag-spacing size)}
+    [text/text
+     {:style  (style/text theme)
+      :weight :medium
+      :size   (if (= size 24) :paragraph-2 :paragraph-1)}
+     text]]])
 
 (defn- communities-tag
   [{:keys [size community-logo community-name blur? channel? channel-name]}]
@@ -81,95 +83,100 @@
        context]]]))
 
 (defn- view-internal
-  [{:keys [type size state blur? customization-color profile-picture full-name users
+  [{:keys [type theme size state blur? customization-color profile-picture full-name users
            group-name amount token network-logo network-name networks
-           account-name emoji collectible collectible-name collectible-number duration container-style]
+           account-name emoji collectible collectible-name collectible-number
+           dapp-name dapp-logo duration container-style]
     :or   {customization-color :blue
            type                :default
-           state               :default}
+           state               :default
+           theme               (quo.theme/use-theme)}
     :as   props}]
-  (let [theme (quo.theme/use-theme)]
-    [rn/view {:style (merge {:align-items :flex-start} container-style)}
-     [rn/view
-      {:style               (style/container {:theme               theme
-                                              :type                type
-                                              :size                size
-                                              :state               state
-                                              :blur?               blur?
-                                              :customization-color customization-color})
-       :accessibility-label :context-tag}
-      (case type
-        :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
-           :customization-color customization-color}]]
+  [rn/view {:style (merge {:align-items :flex-start} container-style)}
+   [rn/view
+    {:style               (style/container {:theme               theme
+                                            :type                type
+                                            :size                size
+                                            :state               state
+                                            :blur?               blur?
+                                            :customization-color customization-color})
+     :accessibility-label :context-tag}
+    (case type
+      :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
+         :customization-color customization-color}]]
 
-        :multiuser
-        [preview-list/view {:type :user :size :size-20}
-         users]
+      :multiuser
+      [preview-list/view {:type :user :size :size-20}
+       users]
 
-        :multinetwork
-        [preview-list/view {:type :network :size :size-20}
-         networks]
+      :multinetwork
+      [preview-list/view {:type :network :size :size-20}
+       networks]
 
-        :audio
-        [tag-skeleton {:theme theme :text (str duration)}
-         [rn/view {:style (style/audio-tag-icon-container customization-color theme)}
-          [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
+      :audio
+      [tag-skeleton {:theme theme :text (str duration)}
+       [rn/view {:style (style/audio-tag-icon-container customization-color theme)}
+        [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
 
-        :group
-        [tag-skeleton {:theme theme :size size :text group-name}
-         [group-avatar/view
-          {:icon-name           :i/members
-           :size                (if (= size 24) :size-20 :size-28)
-           :customization-color (colors/custom-color customization-color 50)}]]
+      :group
+      [tag-skeleton {:theme theme :size size :text group-name}
+       [group-avatar/view
+        {:icon-name           :i/members
+         :size                (if (= size 24) :size-20 :size-28)
+         :customization-color (colors/custom-color customization-color 50)}]]
 
-        (:channel :community)
-        [communities-tag (assoc props :channel? (= type :channel))]
+      (:channel :community)
+      [communities-tag (assoc props :channel? (= type :channel))]
 
-        :token
-        [tag-skeleton {:theme theme :size size :text (str amount " " token)}
-         [token/view
-          {:style (style/token-logo size)
-           :token token
-           :size  (if (= size 24) :size-20 :size-28)}]]
+      :token
+      [tag-skeleton {:theme theme :size size :text (str amount " " token)}
+       [token/view
+        {:style (style/token-logo size)
+         :token token
+         :size  (if (= size 24) :size-20 :size-28)}]]
 
-        :network
-        [tag-skeleton {:theme theme :size size :text network-name}
-         [rn/image {:style (style/circle-logo size) :source network-logo}]]
+      :network
+      [tag-skeleton {:theme theme :size size :text network-name}
+       [rn/image {:style (style/circle-logo size) :source network-logo}]]
 
-        :collectible
-        [tag-skeleton
-         {:theme theme
-          :size  size
-          :text  (str collectible-name " #" collectible-number)}
-         [rn/image {:style (style/rounded-logo size) :source collectible}]]
+      :collectible
+      [tag-skeleton
+       {:theme theme
+        :size  size
+        :text  (str collectible-name " #" collectible-number)}
+       [rn/image {:style (style/rounded-logo size) :source collectible}]]
 
-        :account
-        [tag-skeleton {:theme theme :size size :text account-name}
-         [account-avatar/view
-          {:customization-color customization-color
-           :emoji               emoji
-           :size                (if (= size 24) 20 28)}]]
+      :account
+      [tag-skeleton {:theme theme :size size :text account-name}
+       [account-avatar/view
+        {:customization-color customization-color
+         :emoji               emoji
+         :size                (if (= size 24) 20 28)}]]
 
-        :address
-        [address-tag props]
+      :address
+      [address-tag props]
 
-        :icon
-        [icon-tag props]
+      :icon
+      [icon-tag props]
 
-        :wallet-user
-        [tag-skeleton {:theme theme :size size :text full-name}
-         [wallet-user-avatar/wallet-user-avatar
-          {:full-name           full-name
-           :size                (if (= size 24) :size-20 :size-24)
-           :customization-color customization-color}]]
+      :wallet-user
+      [tag-skeleton {:theme theme :size size :text full-name}
+       [wallet-user-avatar/wallet-user-avatar
+        {:full-name           full-name
+         :size                (if (= size 24) :size-20 :size-24)
+         :customization-color customization-color}]]
 
-        nil)]]))
+      :dapp
+      [tag-skeleton {:theme theme :size size :text dapp-name}
+       [rn/image {:style (style/circle-logo size) :source dapp-logo}]]
+
+      nil)]])
 
 (def view (schema/instrument #'view-internal component-schema/?schema))

src/quo/foundations/resources.cljs

@@ -24,12 +24,13 @@
   (get ui k))
 
 (def dapps
-  {:coingecko (js/require "../resources/images/dapps/CoinGecko.png")
-   :1inch     (js/require "../resources/images/dapps/1inch.png")
-   :aave      (js/require "../resources/images/dapps/Aave.png")
-   :uniswap   (js/require "../resources/images/dapps/Uniswap.png")
-   :zapper    (js/require "../resources/images/dapps/Zapper.png")
-   :zerion    (js/require "../resources/images/dapps/Zerion.png")})
+  {:coingecko      (js/require "../resources/images/dapps/CoinGecko.png")
+   :1inch          (js/require "../resources/images/dapps/1inch.png")
+   :aave           (js/require "../resources/images/dapps/Aave.png")
+   :uniswap        (js/require "../resources/images/dapps/Uniswap.png")
+   :zapper         (js/require "../resources/images/dapps/Zapper.png")
+   :zerion         (js/require "../resources/images/dapps/Zerion.png")
+   :wallet-connect (js/require "../resources/images/dapps/WalletConnect.png")})
 
 (defn get-dapp
   [k]

src/status_im/contexts/onboarding/enable_notifications/view.cljs

@@ -72,10 +72,7 @@
   (let [insets (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
      [rn/view {:style style/page-heading}
-      [quo/page-nav
-       {:background :blur
-        :icon-name  :i/arrow-left
-        :on-press   #(rf/dispatch [:navigate-back])}]
+      [quo/page-nav {:type :no-title :background :blur}]
       [page-title]]
      [enable-notifications-simple]
      [enable-notification-buttons {:insets insets}]]))

src/status_im/contexts/onboarding/events.cljs

@@ -73,7 +73,7 @@
                                       :onboarding/navigated-to-enter-seed-phrase-from-screen
                                       :screen/onboarding.new-to-status)]]
                :dispatch-later [{:ms       constants/onboarding-generating-keys-animation-duration-ms
-                                 :dispatch [:onboarding/navigate-to-identifiers]}]
+                                 :dispatch [:onboarding/navigate-to-enable-notifications]}]
                :db             (-> db
                                    (dissoc :profile/login)
                                    (dissoc :auth-method)

src/status_im/contexts/profile/login/events.cljs

@@ -83,8 +83,7 @@
                   [[:profile.settings/switch-theme-fx
                     [(or (:appearance settings)
                          constants/theme-type-dark)
-                     :shell-stack
-                     false]]
+                     :shell-stack]]
                    [:dispatch [:init-root :shell-stack]]
                    [:dispatch [:profile/show-testnet-mode-banner-if-enabled]]]))})))
 

src/status_im/contexts/profile/settings/effects.cljs

@@ -4,7 +4,6 @@
             [react-native.platform :as platform]
             [status-im.common.theme.core :as theme]
             [status-im.constants :as constants]
-            [status-im.setup.hot-reload :as hot-reload]
             [utils.re-frame :as rf]))
 
 (re-frame/reg-fx
@@ -20,7 +19,7 @@
 
 (re-frame/reg-fx
  :profile.settings/switch-theme-fx
- (fn [[theme-type view-id reload-ui?]]
+ (fn [[theme-type view-id]]
    (let [theme (if (or (= theme-type constants/theme-type-dark)
                        (and (= theme-type constants/theme-type-system)
                             (theme/device-theme-dark?)))
@@ -28,8 +27,4 @@
                  :light)]
      (theme/set-legacy-theme theme)
      (rf/dispatch [:theme/switch theme])
-     (rf/dispatch [:reload-status-nav-color view-id])
-     (when reload-ui?
-       (re-frame/dispatch [:dismiss-all-overlays])
-       (when js/goog.DEBUG
-         (hot-reload/reload))))))
+     (rf/dispatch [:reload-status-nav-color view-id]))))

src/status_im/contexts/profile/settings/events.cljs

@@ -95,14 +95,14 @@
 (rf/reg-event-fx :profile.settings/change-appearance
  (fn [_ [theme]]
    {:fx [[:dispatch [:profile.settings/profile-update :appearance theme]]
-         [:profile.settings/switch-theme-fx [theme :appearance true]]]}))
+         [:profile.settings/switch-theme-fx [theme :appearance]]]}))
 
 (rf/reg-event-fx :profile.settings/switch-theme
  (fn [{:keys [db]} [theme view-id]]
    (let [theme (or theme
                    (get-in db [:profile/profile :appearance])
                    constants/theme-type-dark)]
-     {:fx [[:profile.settings/switch-theme-fx [theme view-id false]]]})))
+     {:fx [[:profile.settings/switch-theme-fx [theme view-id]]]})))
 
 (rf/reg-fx :profile.settings/get-profile-picture
  (fn [key-uid]

src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs

@@ -36,8 +36,10 @@
 (defn- address-input
   [{:keys [input-value on-change-text paste-into-input clear-input]}]
   (let [empty-input?    (string/blank? input-value)
-        on-scan-address (rn/use-callback #(rf/dispatch [:open-modal :screen/wallet.scan-address
-                                                        {:on-result on-change-text}]))]
+        on-scan-address (rn/use-callback (fn []
+                                           (rf/dispatch [:wallet/clean-scanned-address])
+                                           (rf/dispatch [:open-modal :screen/wallet.scan-address
+                                                         {:on-result on-change-text}])))]
     [rn/view {:style style/input-container}
      [quo/input
       {:accessibility-label :add-address-to-save
@@ -161,7 +163,9 @@
                                                (rf/dispatch
                                                 [:open-modal :screen/settings.save-address]))
                                              [address ens-name? address-or-ens])]
-    (rn/use-unmount #(rf/dispatch [:wallet/clear-address-to-save]))
+    (rn/use-mount (fn []
+                    (rf/dispatch [:wallet/clean-scanned-address])
+                    (rf/dispatch [:wallet/clear-address-to-save])))
     [quo/overlay {:type :shell}
      [floating-button-page/view
       {:footer-container-padding 0

src/status_im/contexts/wallet/account/tabs/view.cljs

@@ -11,9 +11,7 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn- on-collectible-press
-  [{:keys [id]} aspect-ratio]
-  (rf/dispatch [:wallet/get-collectible-details id aspect-ratio]))
+(def on-collectible-press #(rf/dispatch [:wallet/navigate-to-collectible-details %]))
 
 (defn- on-collectible-long-press
   [{:keys [preview-url collectible-details id]}]

src/status_im/contexts/wallet/collectible/events.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.collectible.events
   (:require [camel-snake-kebab.extras :as cske]
+            [clojure.string :as string]
             [react-native.platform :as platform]
             [status-im.contexts.wallet.collectible.utils :as collectible-utils]
             [taoensso.timbre :as log]
@@ -44,13 +45,6 @@
 
 (rf/reg-event-fx :wallet/clear-stored-collectibles clear-stored-collectibles)
 
-(defn store-last-collectible-details
-  [{:keys [db]} [collectible]]
-  {:db       (assoc-in db [:wallet :last-collectible-details] collectible)
-   :dispatch [:navigate-to :screen/wallet.collectible]})
-
-(rf/reg-event-fx :wallet/store-last-collectible-details store-last-collectible-details)
-
 (rf/reg-event-fx
  :wallet/request-new-collectibles-for-account
  (fn [{:keys [db]} [{:keys [request-id account amount]}]]
@@ -166,39 +160,58 @@
              [:dispatch [:wallet/flush-collectibles-fetched]])]})))
 
 (rf/reg-event-fx
- :wallet/get-collectible-details
- (fn [{:keys [db]} [collectible-id aspect-ratio]]
+ :wallet/navigate-to-collectible-details
+ (fn [{:keys [db]}
+      [{{collectible-id :id :as collectible} :collectible
+        aspect-ratio                         :aspect-ratio
+        gradient-color                       :gradient-color}]]
    (let [request-id               0
          collectible-id-converted (cske/transform-keys transforms/->PascalCaseKeyword collectible-id)
          data-type                (collectible-data-types :details)
          request-params           [request-id [collectible-id-converted] data-type]]
-     {:db (assoc-in db [:wallet :last-collectible-aspect-ratio] aspect-ratio)
+     {:db (assoc-in db
+           [:wallet :ui :collectible]
+           {:details        collectible
+            :aspect-ratio   aspect-ratio
+            :gradient-color gradient-color})
       :fx [[:json-rpc/call
             [{:method   "wallet_getCollectiblesByUniqueIDAsync"
               :params   request-params
               :on-error (fn [error]
                           (log/error "failed to request collectible"
-                                     {:event  :wallet/get-collectible-details
+                                     {:event  :wallet/navigate-to-collectible-details
                                       :error  error
-                                      :params request-params}))}]]]})))
+                                      :params request-params}))}]]
+           ;; We delay the navigation because we need re-frame to update the DB on time.
+           ;; By doing it, we skip a blink while visiting the collectible detail page.
+           [:dispatch-later
+            {:ms       1
+             :dispatch [:navigate-to :screen/wallet.collectible]}]]})))
+
+(defn- keep-not-empty-value
+  [old-value new-value]
+  (if (or (string/blank? new-value) (nil? new-value))
+    old-value
+    new-value))
+
+(def merge-skipping-empty-values (partial merge-with keep-not-empty-value))
 
 (rf/reg-event-fx
  :wallet/get-collectible-details-done
- (fn [_ [{:keys [message]}]]
-   (let [response               (cske/transform-keys transforms/->kebab-case-keyword
-                                                     (transforms/json->clj message))
-         {:keys [collectibles]} response
-         collectible            (first collectibles)]
+ (fn [{db :db} [{:keys [message]}]]
+   (let [response                      (cske/transform-keys transforms/->kebab-case-keyword
+                                                            (transforms/json->clj message))
+         {[collectible] :collectibles} response]
      (if collectible
-       {:fx [[:dispatch [:wallet/store-last-collectible-details collectible]]]}
+       {:db (update-in db [:wallet :ui :collectible :details] merge-skipping-empty-values collectible)}
        (log/error "failed to get collectible details"
                   {:event    :wallet/get-collectible-details-done
                    :response response})))))
 
 (rf/reg-event-fx
- :wallet/clear-last-collectible-details
+ :wallet/clear-collectible-details
  (fn [{:keys [db]}]
-   {:db (update-in db [:wallet] dissoc :last-collectible-details :last-collectible-aspect-ratio)}))
+   {:db (update-in db [:wallet :ui] dissoc :collectible)}))
 
 (rf/reg-event-fx :wallet/trigger-share-collectible
  (fn [_ [{:keys [title uri]}]]

src/status_im/contexts/wallet/collectible/events_test.cljs

@@ -43,18 +43,6 @@
 
         (is (match? result-db expected-db))))))
 
-(deftest store-last-collectible-details-test
-  (testing "store-last-collectible-details"
-    (let [db               {:wallet {}}
-          last-collectible {:description "Pandaria"
-                            :image-url   "https://..."}
-          expected-db      {:wallet {:last-collectible-details {:description "Pandaria"
-                                                                :image-url   "https://..."}}}
-          effects          (events/store-last-collectible-details {:db db}
-                                                                  [last-collectible])
-          result-db        (:db effects)]
-      (is (match? result-db expected-db)))))
-
 (deftest request-new-collectibles-for-account-from-signal-test
   (testing "request new collectibles for account from signal"
     (let [db       {:wallet {}}

src/status_im/contexts/wallet/collectible/tabs/about/view.cljs

@@ -8,12 +8,11 @@
 (def ^:private link-card-space 28)
 
 (defn view
-  []
-  (let [window-width               (rf/sub [:dimensions/window-width])
-        item-width                 (- (/ window-width 2) link-card-space)
-        {:keys [collectible-data]} (rf/sub [:wallet/last-collectible-details])
-        link-card-container-style  (style/link-card item-width)
-        collectible-about          {:cards []}]
+  [{:keys [collectible-data]}]
+  (let [window-width              (rf/sub [:dimensions/window-width])
+        item-width                (- (/ window-width 2) link-card-space)
+        link-card-container-style (style/link-card item-width)
+        collectible-about         {:cards []}]
     [:<>
      [rn/view {:style style/title}
       [quo/text

src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs

@@ -21,27 +21,25 @@
     :container-style style/traits-item}])
 
 (defn- traits-section
-  []
-  (let [traits (rf/sub [:wallet/last-collectible-details-traits])]
-    (when (pos? (count traits))
-      [rn/view
-       [quo/section-label
-        {:section         (i18n/label :t/traits)
-         :container-style style/traits-title-container}]
-       [rn/flat-list
-        {:render-fn               trait-item
-         :data                    traits
-         :key                     :collectibles-list
-         :key-fn                  :id
-         :num-columns             2
-         :content-container-style style/traits-container}]])))
+  [traits]
+  [rn/view
+   [quo/section-label
+    {:section         (i18n/label :t/traits)
+     :container-style style/traits-title-container}]
+   [rn/flat-list
+    {:render-fn               trait-item
+     :data                    traits
+     :key                     :collectibles-list
+     :key-fn                  :id
+     :num-columns             2
+     :content-container-style style/traits-container}]])
 
 (defn- info
-  []
-  (let [chain-id                   (rf/sub [:wallet/last-collectible-details-chain-id])
-        {:keys [network-name]}     (rf/sub [:wallet/network-details-by-chain-id chain-id])
-        subtitle                   (string/capitalize (name (or network-name "")))
-        {:keys [name emoji color]} (rf/sub [:wallet/last-collectible-details-owner])]
+  [{:keys [chain-id account]}]
+  (let [{:keys [network-name]} (rf/sub [:wallet/network-details-by-chain-id chain-id])
+        subtitle               (some-> network-name
+                                       name
+                                       string/capitalize)]
     [rn/view {:style style/info-container}
      [rn/view {:style style/account}
       [quo/data-item
@@ -49,10 +47,10 @@
         :status              :default
         :size                :default
         :title               (i18n/label :t/account-title)
-        :subtitle            name
-        :emoji               emoji
         :subtitle-type       :account
-        :customization-color color}]]
+        :subtitle            (:name account)
+        :emoji               (:emoji account)
+        :customization-color (:color account)}]]
      [rn/view {:style style/network}
       [quo/data-item
        {:subtitle-type :network
@@ -64,7 +62,12 @@
         :subtitle      subtitle}]]]))
 
 (defn view
-  []
-  [:<>
-   [info]
-   [traits-section]])
+  [collectible]
+  (let [owner-account (rf/sub [:wallet/collectible-details-owner collectible])
+        traits        (-> collectible :collectible-data :traits)]
+    [:<>
+     [info
+      {:chain-id (-> collectible :id :contract-id :chain-id)
+       :account  owner-account}]
+     (when (pos? (count traits))
+       [traits-section traits])]))

src/status_im/contexts/wallet/collectible/tabs/view.cljs

@@ -5,9 +5,9 @@
             [status-im.contexts.wallet.collectible.tabs.overview.view :as overview]))
 
 (defn view
-  [{:keys [selected-tab]}]
+  [{:keys [selected-tab collectible]}]
   (case selected-tab
-    :overview [overview/view]
-    :about    [about/view]
+    :overview [overview/view collectible]
+    :about    [about/view collectible]
     :activity [activity/view]
     nil))

src/status_im/contexts/wallet/collectible/utils.cljs

@@ -12,7 +12,7 @@
       :balance
       js/parseInt))
 
-(def ^:const supported-collectible-types
+(def supported-collectible-types
   #{"image/jpeg"
     "image/gif"
     "image/bmp"

src/status_im/contexts/wallet/collectible/view.cljs

@@ -76,11 +76,10 @@
 (defn navigate-back-and-clear-collectible
   []
   (rf/dispatch [:navigate-back])
-  (js/setTimeout #(rf/dispatch [:wallet/clear-last-collectible-details]) 700))
+  (rf/dispatch [:wallet/clear-collectible-details]))
 
 (defn animated-header
-  [{:keys [scroll-amount title-opacity page-nav-type picture title description theme
-           id]}]
+  [{:keys [scroll-amount title-opacity page-nav-type picture title description theme id]}]
   (let [blur-amount   (header-animations/use-blur-amount scroll-amount)
         layer-opacity (header-animations/use-layer-opacity
                        scroll-amount
@@ -149,8 +148,9 @@
       (let [title-ref                      (rn/use-ref-atom nil)
             set-title-ref                  (rn/use-callback #(reset! title-ref %))
             animation-shared-element-id    (rf/sub [:animation-shared-element-id])
-            collectible-owner              (rf/sub [:wallet/last-collectible-details-owner])
-            aspect-ratio                   (rf/sub [:wallet/last-collectible-aspect-ratio])
+            collectible-owner              (rf/sub [:wallet/collectible-details-owner collectible])
+            aspect-ratio                   (rf/sub [:wallet/collectible-aspect-ratio])
+            gradient-color                 (rf/sub [:wallet/collectible-gradient-color])
             {:keys [id
                     preview-url
                     collection-data
@@ -181,35 +181,36 @@
          [rn/view
           [gradient-layer preview-uri]
           [quo/expanded-collectible
-           {:aspect-ratio        aspect-ratio
-            :image-src           preview-uri
-            :container-style     (style/preview-container)
-            :counter             (utils/collectible-owned-counter total-owned)
-            :native-ID           (when (= animation-shared-element-id token-id) :shared-element)
-            :supported-file?     (utils/supported-file? (:animation-media-type collectible-data))
-            :on-press            (fn []
-                                   (if svg?
-                                     (js/alert "Can't visualize SVG images in lightbox")
-                                     (rf/dispatch
-                                      [:lightbox/navigate-to-lightbox
-                                       token-id
-                                       {:images           [collectible-image]
-                                        :index            0
-                                        :on-options-press #(rf/dispatch [:show-bottom-sheet
-                                                                         {:content
-                                                                          (fn []
-                                                                            [options-drawer/view
-                                                                             {:name collectible-name
-                                                                              :image
-                                                                              preview-uri
-                                                                              :id id}])}])}])))
-            :on-collectible-load (fn []
-                                   ;; We need to delay the measurement because the
-                                   ;; navigation has an animation
-                                   (js/setTimeout
-                                    #(some-> @title-ref
-                                             (oops/ocall "measureInWindow" set-title-bottom))
-                                    300))}]]
+           {:aspect-ratio         aspect-ratio
+            :image-src            preview-uri
+            :container-style      (style/preview-container)
+            :gradient-color-index gradient-color
+            :counter              (utils/collectible-owned-counter total-owned)
+            :native-ID            (when (= animation-shared-element-id token-id) :shared-element)
+            :supported-file?      (utils/supported-file? (:animation-media-type collectible-data))
+            :on-press             (fn []
+                                    (if svg?
+                                      (js/alert "Can't visualize SVG images in lightbox")
+                                      (rf/dispatch
+                                       [:lightbox/navigate-to-lightbox
+                                        token-id
+                                        {:images           [collectible-image]
+                                         :index            0
+                                         :on-options-press #(rf/dispatch [:show-bottom-sheet
+                                                                          {:content
+                                                                           (fn []
+                                                                             [options-drawer/view
+                                                                              {:name collectible-name
+                                                                               :image
+                                                                               preview-uri
+                                                                               :id id}])}])}])))
+            :on-collectible-load  (fn []
+                                    ;; We need to delay the measurement because the
+                                    ;; navigation has an animation
+                                    (js/setTimeout
+                                     #(some-> @title-ref
+                                              (oops/ocall "measureInWindow" set-title-bottom))
+                                     300))}]]
          [rn/view {:style (style/background-color theme)}
           [header collectible-name collection-name collection-image set-title-ref]
           [cta-buttons
@@ -225,39 +226,43 @@
             :default-active @selected-tab
             :on-change      on-tab-change
             :data           tabs-data}]
-          [tabs/view {:selected-tab @selected-tab}]]]))))
+          [tabs/view
+           {:selected-tab @selected-tab
+            :collectible  collectible}]]]))))
+
+(defn- get-title-bottom-y-position
+  [y-element-position element-height]
+  (let [{:keys [top]} (safe-area/get-insets)
+        title-height  -56]
+    (+ y-element-position
+       element-height
+       title-height
+       (when platform/ios? (* top -2)))))
 
 (defn view
   [_]
-  (let [{:keys [top]}              (safe-area/get-insets)
-        theme                      (quo.theme/use-theme)
-        title-bottom-coord         (rn/use-ref-atom 0)
-        set-title-bottom           (rn/use-callback
-                                    (fn [_ y _ height]
-                                      (reset! title-bottom-coord
-                                        (+ y
-                                           height
-                                           -56
-                                           (when platform/ios?
-                                             (* top -2))))))
-        scroll-amount              (reanimated/use-shared-value 0)
-        title-opacity              (reanimated/use-shared-value 0)
-        collectible                (rf/sub [:wallet/last-collectible-details])
-        {:keys [preview-url
-                collection-data
-                collectible-data]} collectible
-        {preview-uri :uri}         preview-url
-        {collectible-name :name}   collectible-data
-        {collection-name :name}    collection-data]
+  (let [{:keys [top]}       (safe-area/get-insets)
+        theme               (quo.theme/use-theme)
+        title-bottom-coord  (rn/use-ref-atom 0)
+        set-title-bottom    (rn/use-callback
+                             (fn [_ y _ height]
+                               (reset! title-bottom-coord
+                                 (get-title-bottom-y-position y height))))
+        scroll-amount       (reanimated/use-shared-value 0)
+        title-opacity       (reanimated/use-shared-value 0)
+        {:keys [collection-data
+                collectible-data
+                preview-url]
+         :as   collectible} (rf/sub [:wallet/collectible-details])]
     [rn/view {:style (style/background-color theme)}
      [animated-header
       {:id            (:id collectible)
        :scroll-amount scroll-amount
        :title-opacity title-opacity
        :page-nav-type :title-description
-       :picture       preview-uri
-       :title         collectible-name
-       :description   collection-name
+       :picture       (:uri preview-url)
+       :title         (:name collectible-data)
+       :description   (:name collection-data)
        :theme         theme}]
      [reanimated/scroll-view
       {:style     (style/scroll-view top)

src/status_im/contexts/wallet/common/account_switcher/view.cljs

@@ -37,7 +37,7 @@
       :networks            networks
       :align-center?       true
       :networks-on-press   #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])
-      :right-side          [(when (and (ff/enabled? ::wallet.wallet-connect)
+      :right-side          [(when (and (ff/enabled? ::ff/wallet.wallet-connect)
                                        (not watch-only?))
                               {:icon-name :i/dapps
                                :on-press  #(rf/dispatch [:navigate-to :screen/wallet.connected-dapps])})

src/status_im/contexts/wallet/common/collectibles_tab/view.cljs

@@ -13,25 +13,34 @@
   [{:keys [preview-url collection-data collectible-data total-owned on-press on-long-press]
     :as   collectible}
    index]
-  (let [on-press-fn      (rn/use-callback #(when on-press
-                                             (on-press collectible %)))
-        on-long-press-fn (rn/use-callback #(when on-long-press
-                                             (on-long-press collectible)))]
+  (let [gradient-color   (keyword (str "gradient-" (inc (mod index 5))))
+        on-press-fn      (rn/use-callback
+                          (fn [aspect-ratio]
+                            (when (fn? on-press)
+                              (on-press {:collectible    (dissoc collectible :on-press :on-long-press)
+                                         :aspect-ratio   aspect-ratio
+                                         :gradient-color gradient-color}))))
+        on-long-press-fn (rn/use-callback
+                          (fn [aspect-ratio]
+                            (when on-long-press
+                              (on-long-press
+                               (dissoc collectible :on-press :on-long-press)
+                               aspect-ratio))))]
     [quo/collectible-list-item
      {:type                 :card
       :image-src            (:uri preview-url)
       :avatar-image-src     (:image-url collection-data)
-      :collectible-name     (:name collection-data)
+      :collectible-name     (:name collectible-data)
       :supported-file?      (utils/supported-file? (:animation-media-type collectible-data))
-      :gradient-color-index (keyword (str "gradient-" (inc (mod index 5))))
+      :gradient-color-index gradient-color
       :counter              (utils/collectible-owned-counter total-owned)
       :container-style      style/collectible-container
       :on-press             on-press-fn
       :on-long-press        on-long-press-fn}]))
 
 (defn view
-  [{:keys [collectibles filtered? on-end-reached
-           on-collectible-press current-account-address on-collectible-long-press]}]
+  [{:keys [collectibles filtered? on-end-reached on-collectible-press
+           current-account-address on-collectible-long-press]}]
   (let [theme                   (quo.theme/use-theme)
         no-results-match-query? (and filtered? (empty? collectibles))]
     (cond

src/status_im/contexts/wallet/common/utils.cljs

@@ -177,7 +177,7 @@
   "This function returns token values in the props of token-value (quo) component"
   [{:keys [token color currency currency-symbol]}]
   (let [balance                           (calculate-total-token-balance token)
-        fiat-unformatted-value            (calculate-token-fiat-value
+        fiat-value                        (calculate-token-fiat-value
                                            {:currency currency
                                             :balance  balance
                                             :token    token})
@@ -191,7 +191,7 @@
         crypto-value                      (get-standard-crypto-format token balance)
         fiat-value                        (get-standard-fiat-format crypto-value
                                                                     currency-symbol
-                                                                    fiat-unformatted-value)]
+                                                                    fiat-value)]
     {:token               (:symbol token)
      :token-name          (:name token)
      :state               :default
@@ -201,11 +201,10 @@
                             (neg? change-pct-24hour) :negative
                             :else                    :empty)
      :customization-color color
-     :values              {:crypto-value           crypto-value
-                           :fiat-value             fiat-value
-                           :fiat-unformatted-value fiat-unformatted-value
-                           :fiat-change            formatted-token-price
-                           :percentage-change      percentage-change}}))
+     :values              {:crypto-value      crypto-value
+                           :fiat-value        fiat-value
+                           :fiat-change       formatted-token-price
+                           :percentage-change percentage-change}}))
 
 (defn get-multichain-address
   [networks address]

src/status_im/contexts/wallet/connected_dapps/scan_dapp/style.cljs

@@ -0,0 +1,11 @@
+(ns status-im.contexts.wallet.connected-dapps.scan-dapp.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def subtitle-container
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 20
+   :gap                4})
+
+(def subtitle-text
+  {:color colors/white})

src/status_im/contexts/wallet/connected_dapps/scan_dapp/view.cljs

@@ -0,0 +1,44 @@
+(ns status-im.contexts.wallet.connected-dapps.scan-dapp.view
+  (:require [quo.core :as quo]
+            [quo.foundations.resources :as quo.resources]
+            [quo.theme]
+            [react-native.core :as rn]
+            [react-native.hooks :as hooks]
+            [status-im.common.scan-qr-code.view :as scan-qr-code]
+            [status-im.contexts.wallet.connected-dapps.scan-dapp.style :as style]
+            [utils.debounce :as debounce]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [{:keys [keyboard-shown]}   (hooks/use-keyboard)
+        {:keys [name emoji color]} (rf/sub [:wallet/current-viewing-account])]
+    (rn/use-mount
+     (fn []
+       (when keyboard-shown
+         (rn/dismiss-keyboard!))))
+    [scan-qr-code/view
+     {:title           (i18n/label :t/scan-qr)
+      :subtitle        [rn/view style/subtitle-container
+                        [quo/context-tag
+                         {:theme               :dark
+                          :type                :account
+                          :size                24
+                          :account-name        name
+                          :emoji               emoji
+                          :customization-color color}]
+                        [quo/text
+                         {:style style/subtitle-text
+                          :size  :paragraph-1}
+                         (i18n/label :t/wallet-connect-via)]
+                        [quo/context-tag
+                         {:theme     :dark
+                          :type      :dapp
+                          :size      24
+                          :dapp-name (i18n/label :t/wallet-connect-label)
+                          :dapp-logo (quo.resources/get-dapp :wallet-connect)}]]
+      :on-success-scan (fn [scanned-text]
+                         (debounce/debounce-and-dispatch
+                          [:wallet-connect/on-scan-connection scanned-text]
+                          300))}]))

src/status_im/contexts/wallet/connected_dapps/view.cljs

@@ -90,7 +90,7 @@
       {:title          (i18n/label :t/connected-dapps)
        :wallet-account wallet-account
        :on-close       #(rf/dispatch [:navigate-back])
-       :on-add         #(js/alert "Feature not implemented")}]
+       :on-add         #(rf/dispatch [:navigate-to :screen/wallet.scan-dapp])}]
      (if (empty? pairings)
        [quo/empty-state
         {:title           (i18n/label :t/no-dapps)

src/status_im/contexts/wallet/events.cljs

@@ -362,15 +362,11 @@
 
 (rf/reg-event-fx :wallet/address-validation-success
  (fn [{:keys [db]}]
-   {:db (-> db
-            (assoc-in [:wallet :ui :search-address :valid-ens-or-address?] true)
-            (assoc-in [:wallet :ui :search-address :loading?] false))}))
+   {:db (assoc-in db [:wallet :ui :search-address :valid-ens-or-address?] true)}))
 
 (rf/reg-event-fx :wallet/address-validation-failed
  (fn [{:keys [db]}]
-   {:db (-> db
-            (assoc-in [:wallet :ui :search-address :valid-ens-or-address?] false)
-            (assoc-in [:wallet :ui :search-address :loading?] false))}))
+   {:db (assoc-in db [:wallet :ui :search-address :valid-ens-or-address?] false)}))
 
 (rf/reg-event-fx :wallet/clean-local-suggestions
  (fn [{:keys [db]}]
@@ -378,10 +374,6 @@
             (assoc-in [:wallet :ui :search-address :local-suggestions] [])
             (assoc-in [:wallet :ui :search-address :valid-ens-or-address?] false))}))
 
-(rf/reg-event-fx :wallet/searching-address
- (fn [{:keys [db]}]
-   {:db (assoc-in db [:wallet :ui :search-address :loading?] true)}))
-
 (rf/reg-event-fx
  :wallet/navigate-to-chain-explorer-from-bottom-sheet
  (fn [_ [explorer-link address]]

src/status_im/contexts/wallet/home/tabs/view.cljs

@@ -17,9 +17,7 @@
                               :name  (:name collectible-data)
                               :image (:uri preview-url)}])}]))
 
-(defn- on-collectible-press
-  [{:keys [id]} aspect-ratio]
-  (rf/dispatch [:wallet/get-collectible-details id aspect-ratio]))
+(def on-collectible-press #(rf/dispatch [:wallet/navigate-to-collectible-details %]))
 
 (defn view
   [{:keys [selected-tab]}]

src/status_im/contexts/wallet/send/select_address/view.cljs

@@ -76,7 +76,6 @@
                                     300)))
         :on-change-text        (fn [text]
                                  (rf/dispatch [:wallet/clean-local-suggestions])
-                                 (rf/dispatch [:wallet/searching-address])
                                  (validate-address text)
                                  (reset! input-value text))
         :valid-ens-or-address? valid-ens-or-address?}])))
@@ -183,8 +182,7 @@
         input-focused? (reagent/atom false)]
     (fn []
       (let [selected-tab          (or (rf/sub [:wallet/send-tab]) (:id (first tabs-data)))
-            valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))
-            searching-address?    (rf/sub [:wallet/searching-address?])]
+            valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
         [floating-button-page/view
          {:content-container-style      {:flex 1}
           :footer-container-padding     0
@@ -200,7 +198,7 @@
            :title-accessibility-label :title-label}]
          [address-input input-value input-focused?]
          [quo/divider-line]
-         (when (and (not valid-ens-or-address?) (> (count @input-value) 0) (not searching-address?))
+         (when (and (not valid-ens-or-address?) (> (count @input-value) 0))
            [rn/view {:style {:padding 20}}
             [quo/info-message
              {:status :error

src/status_im/contexts/wallet/send/select_asset/view.cljs

@@ -32,7 +32,7 @@
      {:collectibles         collectibles
       :filtered?            search-performed?
       :on-end-reached       #(rf/dispatch [:wallet/request-collectibles-for-current-viewing-account])
-      :on-collectible-press (fn [collectible]
+      :on-collectible-press (fn [{:keys [collectible]}]
                               (rf/dispatch [:wallet/set-collectible-to-send
                                             {:collectible    collectible
                                              :current-screen :screen/wallet.select-asset}]))}]))

src/status_im/contexts/wallet/wallet_connect/events.cljs

@@ -67,8 +67,7 @@
                     :session-networks                session-networks
                     :address                         (-> without-watched
                                                          first
-                                                         :address)
-            )
+                                                         :address))
         :fx [[:dispatch
               [:open-modal :screen/wallet.wallet-connect-session-proposal]]]}
        {:fx [[:dispatch
@@ -190,27 +189,25 @@
  (fn [_ [scanned-text]]
    (let [parsed-uri         (wallet-connect/parse-uri scanned-text)
          version            (:version parsed-uri)
+         valid-wc-uri?      (wc-utils/valid-uri? parsed-uri)
          expired?           (-> parsed-uri
                                 :expiryTimestamp
                                 wc-utils/timestamp-expired?)
          version-supported? (wc-utils/version-supported? version)]
-     (cond
-       expired?
+     (if (or (not valid-wc-uri?) expired? (not version-supported?))
        {:fx [[:dispatch
               [:toasts/upsert
                {:type  :negative
                 :theme :dark
-                :text  (i18n/label :t/wallet-connect-qr-expired)}]]]}
+                :text  (cond (not valid-wc-uri?)
+                             (i18n/label :t/wallet-connect-wrong-qr)
 
-       (not version-supported?)
-       {:fx [[:dispatch
-              [:toasts/upsert
-               {:type  :negative
-                :theme :dark
-                :text  (i18n/label :t/wallet-connect-version-not-supported
-                                   {:version version})}]]]}
+                             expired?
+                             (i18n/label :t/wallet-connect-qr-expired)
 
-       :else
+                             (not version-supported?)
+                             (i18n/label :t/wallet-connect-version-not-supported
+                                         {:version version}))}]]]}
        {:fx [[:dispatch [:wallet-connect/pair scanned-text]]]}))))
 
 (rf/reg-event-fx

src/status_im/navigation/events.cljs

@@ -123,16 +123,6 @@
                     (hide-bottom-sheet new-cofx)
                     {:show-bottom-sheet {:theme theme}}))))))
 
-(rf/defn dismiss-all-overlays
-  {:events [:dismiss-all-overlays]}
-  [_]
-  {:dispatch-n [[:hide-popover]
-                [:hide-visibility-status-popover]
-                [:hide-bottom-sheet]
-                [:bottom-sheet-hidden]
-                [:bottom-sheet/hide-old-navigation-overlay]
-                [:toasts/close-all-toasts]]})
-
 (rf/defn set-view-id
   {:events [:set-view-id]}
   [{:keys [db]} view-id]

src/status_im/navigation/roots.cljs

@@ -37,15 +37,15 @@
                                      :id      :screen/profile.profiles
                                      :options (options/dark-root-options)}}]}}}
 
-   :screen/onboarding.enable-notifications
-   {:root {:stack {:children [{:component {:name    :screen/onboarding.enable-notifications
-                                           :id      :screen/onboarding.enable-notifications
-                                           :options (options/dark-root-options)}}]}}}
+  ;;  :screen/onboarding.enable-notifications
+  ;;  {:root {:stack {:children [{:component {:name    :screen/onboarding.enable-notifications
+  ;;                                          :id      :screen/onboarding.enable-notifications
+  ;;                                          :options (options/dark-root-options)}}]}}}
 
-   :screen/onboarding.welcome
-   {:root {:stack {:children [{:component {:name    :screen/onboarding.welcome
-                                           :id      :screen/onboarding.welcome
-                                           :options (options/dark-root-options)}}]}}}
+  ;;  :screen/onboarding.welcome
+  ;;  {:root {:stack {:children [{:component {:name    :screen/onboarding.welcome
+  ;;                                          :id      :screen/onboarding.welcome
+  ;;                                          :options (options/dark-root-options)}}]}}}
    :screen/onboarding.syncing-results
    {:root {:stack {:children [{:component {:name    :screen/onboarding.syncing-results
                                            :id      :screen/onboarding.syncing-results

src/status_im/navigation/screens.cljs

@@ -108,6 +108,7 @@
     [status-im.contexts.wallet.bridge.select-asset.view :as wallet-bridge-select-asset]
     [status-im.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im.contexts.wallet.common.scan-account.view :as wallet-scan-address]
+    [status-im.contexts.wallet.connected-dapps.scan-dapp.view :as wallet-scan-dapp]
     [status-im.contexts.wallet.connected-dapps.view :as wallet-connected-dapps]
     [status-im.contexts.wallet.send.from.view :as wallet-select-from]
     [status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
@@ -350,7 +351,10 @@
                  :animations             (merge
                                           transitions/new-to-status-modal-animations
                                           transitions/push-animations-for-transparent-background)
-                 :modalPresentationStyle :overCurrentContext}
+                 :popGesture             false
+                 :modalPresentationStyle :overCurrentContext
+                 :hardwareBackButton     {:dismissModalOnPress false
+                                          :popStackOnPress     false}}
      :component enable-notifications/view}
 
     {:name      :screen/onboarding.identifiers
@@ -411,10 +415,6 @@
      :options   {:insets {:top? true}}
      :component wallet-accounts/view}
 
-    {:name      :screen/wallet.connected-dapps
-     :options   {:insets {:top? true}}
-     :component wallet-connected-dapps/view}
-
     {:name      :screen/wallet.wallet-connect-session-proposal
      :options   {:sheet? true}
      :component wallet-connect-session-proposal/view}
@@ -549,6 +549,16 @@
      :options   {:sheet? true}
      :component wallet-connect-send-transaction/view}
 
+    {:name      :screen/wallet.connected-dapps
+     :options   {:insets {:top? true}}
+     :component wallet-connected-dapps/view}
+
+    {:name      :screen/wallet.scan-dapp
+     :options   (merge
+                 options/dark-screen
+                 {:modalPresentationStyle :overCurrentContext})
+     :component wallet-scan-dapp/view}
+
     ;; Settings
 
     {:name      :screen/settings-password

src/status_im/subs/wallet/collectibles.cljs

@@ -20,8 +20,7 @@
 (defn- preview-url
   [{{collectible-image-url :image-url
      animation-url         :animation-url
-     animation-media-type  :animation-media-type} :collectible-data
-    {collection-image-url :image-url}             :collection-data}]
+     animation-media-type  :animation-media-type} :collectible-data}]
   (cond
     (svg-animation? animation-url animation-media-type)
     {:uri  animation-url
@@ -34,7 +33,7 @@
     {:uri collectible-image-url}
 
     :else
-    {:uri collection-image-url}))
+    {:uri nil}))
 
 (defn add-collectibles-preview-url
   [collectibles]
@@ -91,35 +90,36 @@
              current-account-collectibles))))
 
 (re-frame/reg-sub
- :wallet/last-collectible-details
- :<- [:wallet]
- (fn [wallet]
-   (let [last-collectible (:last-collectible-details wallet)]
-     (assoc last-collectible :preview-url (preview-url last-collectible)))))
+ :wallet/collectible
+ :<- [:wallet/ui]
+ :-> :collectible)
 
 (re-frame/reg-sub
- :wallet/last-collectible-aspect-ratio
- :<- [:wallet]
- (fn [wallet]
-   (:last-collectible-aspect-ratio wallet)))
-
-(re-frame/reg-sub
- :wallet/last-collectible-details-chain-id
- :<- [:wallet/last-collectible-details]
+ :wallet/collectible-details
+ :<- [:wallet/collectible]
  (fn [collectible]
-   (get-in collectible [:id :contract-id :chain-id])))
+   (as-> collectible $
+     (:details $)
+     (assoc $ :preview-url (preview-url $)))))
 
 (re-frame/reg-sub
- :wallet/last-collectible-details-traits
- :<- [:wallet/last-collectible-details]
+ :wallet/collectible-aspect-ratio
+ :<- [:wallet/collectible]
  (fn [collectible]
-   (get-in collectible [:collectible-data :traits])))
+   (:aspect-ratio collectible 1)))
 
 (re-frame/reg-sub
- :wallet/last-collectible-details-owner
- :<- [:wallet/last-collectible-details]
- :<- [:wallet]
- (fn [[collectible wallet]]
-   (let [address (:address (first (:ownership collectible)))
-         account (get-in wallet [:accounts address])]
-     account)))
+ :wallet/collectible-gradient-color
+ :<- [:wallet/collectible]
+ (fn [collectible]
+   (:gradient-color collectible :gradient-1)))
+
+(re-frame/reg-sub
+ :wallet/collectible-details-owner
+ :<- [:wallet/accounts]
+ (fn [accounts [_ collectible]]
+   (let [collectible-address (-> collectible :ownership first :address)]
+     (some #(when (= (:address %) collectible-address)
+              %)
+           accounts))))
+

src/status_im/subs/wallet/collectibles_test.cljs

@@ -2,49 +2,25 @@
   (:require
     [cljs.test :refer [is testing]]
     [re-frame.db :as rf-db]
-    status-im.subs.root
-    status-im.subs.wallet.collectibles
+    [status-im.subs.root]
+    [status-im.subs.wallet.collectibles]
     [test-helpers.unit :as h]
     [utils.re-frame :as rf]))
 
-(def ^:private traits
-  [{:trait-type   "Background"
-    :value        "Gradient 5"
-    :display-type ""
-    :max-value    ""}
-   {:trait-type   "Skin"
-    :value        "Pale"
-    :display-type ""
-    :max-value    ""}
-   {:trait-type   "Clothes"
-    :value        "Naked"
-    :display-type ""
-    :max-value    ""}])
+(def collectible-owner-wallet
+  {:ui       {:collectible {:details {:ownership [{:address "0x1"}]}}}
+   :accounts {"0x1" {:address "0x1"
+                     :name    "account 1"
+                     :color   "army"}}})
 
-(def ^:private collectible-owner-wallet
-  {:last-collectible-details {:ownership [{:address "0x1"}]}
-   :accounts                 {"0x1" {:name  "account 1"
-                                     :color "army"}}})
-
-(h/deftest-sub :wallet/last-collectible-details-chain-id
-  [sub-name]
-  (testing "correct chain-id of the last collectible should be returned"
-    (swap! rf-db/app-db assoc-in [:wallet :last-collectible-details :id :contract-id :chain-id] "1")
-    (let [result (rf/sub [sub-name])]
-      (is (= "1" result)))))
-
-(h/deftest-sub :wallet/last-collectible-details-traits
-  [sub-name]
-  (testing "correct traits of the last collectible should be returned"
-    (swap! rf-db/app-db assoc-in [:wallet :last-collectible-details :collectible-data :traits] traits)
-    (let [result (rf/sub [sub-name])]
-      (is (= traits result)))))
-
-(h/deftest-sub :wallet/last-collectible-details-owner
+(h/deftest-sub :wallet/collectible-details-owner
   [sub-name]
   (testing "correct owner of the last collectible should be returned"
-    (swap! rf-db/app-db assoc-in [:wallet] collectible-owner-wallet)
-    (let [result (rf/sub [sub-name])]
-      (is (= {:name  "account 1"
-              :color "army"}
+    (swap! rf-db/app-db assoc :wallet collectible-owner-wallet)
+    (let [collectible (-> collectible-owner-wallet :ui :collectible :details)
+          result      (rf/sub [sub-name collectible])]
+      (is (= {:name                      "account 1"
+              :color                     "army"
+              :address                   "0x1"
+              :network-preferences-names #{}}
              result)))))

src/status_im/subs/wallet/wallet.cljs

@@ -496,13 +496,11 @@
  :<- [:profile/currency]
  :<- [:profile/currency-symbol]
  (fn [[{:keys [color]} tokens currency currency-symbol]]
-   (let [calculated-tokens (mapv #(utils/calculate-token-value {:token           %
-                                                                :color           color
-                                                                :currency        currency
-                                                                :currency-symbol currency-symbol})
-                                 tokens)]
-     (vec (sort-by #(get-in % [:values :fiat-unformatted-value]) > calculated-tokens)))))
-
+   (mapv #(utils/calculate-token-value {:token           %
+                                        :color           color
+                                        :currency        currency
+                                        :currency-symbol currency-symbol})
+         tokens)))
 
 (rf/reg-sub
  :wallet/aggregated-tokens
@@ -524,19 +522,16 @@
  :<- [:profile/currency]
  :<- [:profile/currency-symbol]
  (fn [[aggregated-tokens color currency currency-symbol]]
-   (let [balance             (utils/calculate-balance-from-tokens {:currency currency
-                                                                   :tokens   aggregated-tokens})
-         formatted-balance   (utils/prettify-balance currency-symbol balance)
-         token-values        (mapv #(utils/calculate-token-value {:token           %
-                                                                  :color           color
-                                                                  :currency        currency
-                                                                  :currency-symbol currency-symbol})
-                                   aggregated-tokens)
-         sorted-token-values (sort-by #(-> % :values :fiat-unformatted-value) > token-values)]
+   (let [balance           (utils/calculate-balance-from-tokens {:currency currency
+                                                                 :tokens   aggregated-tokens})
+         formatted-balance (utils/prettify-balance currency-symbol balance)]
      {:balance           balance
       :formatted-balance formatted-balance
-      :tokens            sorted-token-values})))
-
+      :tokens            (mapv #(utils/calculate-token-value {:token           %
+                                                              :color           color
+                                                              :currency        currency
+                                                              :currency-symbol currency-symbol})
+                               aggregated-tokens)})))
 
 (rf/reg-sub
  :wallet/network-preference-details
@@ -600,11 +595,6 @@
  :<- [:wallet/search-address]
  :-> :valid-ens-or-address?)
 
-(rf/reg-sub
- :wallet/searching-address?
- :<- [:wallet/search-address]
- :-> :loading?)
-
 (rf/reg-sub
  :wallet/aggregated-fiat-balance-per-chain
  :<- [:wallet/aggregated-tokens]

test/appium/views/sign_in_view.py

@@ -244,8 +244,8 @@ class SignInView(BaseView):
         self.generate_keys_button.click_until_presence_of_element(self.profile_title_input)
         self.set_profile(username)
         self.set_password(password)
-        if self.enable_biometric_maybe_later_button.is_element_displayed(10):
-            self.enable_biometric_maybe_later_button.click()
+        # if self.enable_biometric_maybe_later_button.is_element_displayed(10):
+        #     self.enable_biometric_maybe_later_button.click()
         # self.next_button.click_until_absense_of_element(self.element_by_translation_id("intro-wizard-title2"))
         # if keycard:
         #     keycard_flow = self.keycard_storage_button.click()
@@ -256,7 +256,7 @@ class SignInView(BaseView):
         #     self.create_password_input.send_keys(password)
         #     self.confirm_your_password_input.send_keys(password)
         #     self.next_button.click()
-        self.identifiers_button.wait_and_click(30)
+        # self.identifiers_button.wait_and_click(30)
         if enable_notifications:
             self.enable_notifications_button.click_until_presence_of_element(self.start_button)
             if self.allow_button.is_element_displayed():
@@ -283,9 +283,9 @@ class SignInView(BaseView):
         self.continue_button.click_until_presence_of_element(self.profile_title_input)
         self.set_profile(username, set_image)
         self.set_password(password)
-        if self.enable_biometric_maybe_later_button.is_element_displayed(10):
-            self.enable_biometric_maybe_later_button.click()
-        self.identifiers_button.wait_and_click(30)
+        # if self.enable_biometric_maybe_later_button.is_element_displayed(10):
+        #     self.enable_biometric_maybe_later_button.click()
+        # self.identifiers_button.wait_and_click(30)
         if enable_notifications:
             self.enable_notifications_button.click_until_presence_of_element(self.start_button)
         else:

translations/en.json

@@ -2733,8 +2733,11 @@
     "dapp-will-be-able-to": "{{dapp-name}} will be able to:",
     "check-your-account-balance-and-activity": "Check your account balance and activity",
     "request-txns-and-message-signing": "Request transactions and message signing",
+    "wallet-connect-label": "WalletConnect",
+    "wallet-connect-via": "via",
     "wallet-connect-qr-expired": "WalletConnect QR has expired",
     "wallet-connect-version-not-supported": "WalletConnect version {{version}} is not supported",
+    "wallet-connect-wrong-qr": "It’s not a WalletConnect QR",
     "add-network-preferences": "Add network preferences",
     "saved-address-network-preference-selection-description": "Only change if you know which networks the address owner is happy to to receive funds on",
     "add-preferences": "Add preferences",