lint

This change adds support for processing app signals for syncing changes when adding, editing, or removing keypairs, accounts, and watch-only accounts.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -2,7 +2,7 @@
 name: MVPBug Report
 about: MVPBug Report
 title: ''
-labels: 'E:Mobile Bug MVP'
+labels: ['E:Mobile Bug MVP', ':1234: low prio']
 assignees: ''
 
 ---

ci/Jenkinsfile.android

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -71,7 +71,7 @@ pipeline {
         }
         stage('Upload') {
           steps { script {
-            def urls = apks.collect { s3.uploadArtifact(it) }
+            def urls = apks.collect { s5cmd.upload(it) }
             if (urls.size() > 1) { /* Return only the universal APK. */
               env.PKG_URL = urls.find { it.contains('universal') }
             } else { /* If no universal is available pick first. */

ci/Jenkinsfile.combined

@@ -1,5 +1,7 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
+
+import groovy.json.JsonBuilder
 
 pipeline {
   agent { label 'linux' }
@@ -72,7 +74,7 @@ pipeline {
           iOS: utils.pkgUrl(ios),
           Diawi: utils.getEnv(ios, 'DIAWI_URL'),
           /* upload the sha256 checksums file too */
-          SHA: s3.uploadArtifact(sha),
+          SHA: s5cmd.upload(sha),
         ]
         /* add URLs to the build description */
         jenkins.setBuildDesc(urls)
@@ -83,7 +85,7 @@ pipeline {
       steps { script {
         switch (utils.getBuildType()) {
           case 'nightly': /* Create JSON file with newest build URLs */
-            s3.updateBucketJSON(urls, 'latest.json');
+            updateBucketJSON(urls, 'latest.json');
             break;
           case 'release':
             github.publishReleaseFiles(repo: 'status-mobile');
@@ -114,3 +116,22 @@ def Boolean getPublishDefault(Boolean previousValue) {
   if (previousValue != null) { return previousValue }
   return false
 }
+
+/* Helper for updating JSON with newest builds. */
+def updateBucketJSON(urls, fileName) {
+  /* latest.json has slightly different key names */
+  def content = [
+    DIAWI: urls.Diawi,
+    APK: urls.Apk, IOS: urls.iOS,
+    APP: urls.App, MAC: urls.Mac,
+    WIN: urls.Win, SHA: urls.SHA
+  ]
+  def filePath = "${pwd()}/pkg/${fileName}"
+  /* it might not exist */
+  sh "mkdir -p ${pwd()}/pkg"
+  def contentJson = new JsonBuilder(content).toPrettyString()
+  println "${filePath}:\n${contentJson}"
+  writeFile(file: filePath, text: contentJson)
+  return s5cmd.upload(filePath)
+}
+

ci/Jenkinsfile.e2e-nightly

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.ios

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.tests

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -75,7 +75,7 @@ pipeline {
     stage('Upload') {
       steps {
         script {
-          env.PKG_URL = s3.uploadArtifact(LOG_FILE)
+          env.PKG_URL = s5cmd.upload(LOG_FILE)
         }
       }
     }

ci/tests/Jenkinsfile.e2e-nightly

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-prs

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-upgrade

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
 

ci/tools/Jenkinsfile.fastlane-clean

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
   agent { label 'macos' }

ci/tools/Jenkinsfile.nix-cache

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
   agent { label params.AGENT_LABEL }

ci/tools/Jenkinsfile.playstore-meta

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
   agent { label 'linux' }

ci/tools/Jenkinsfile.xcode-clean

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.8.12'
+library 'status-jenkins-lib@v1.9.1'
 
 pipeline {
   agent {

doc/merging-pr-process.md

@@ -32,14 +32,16 @@ status-mobile code that makes it to the `develop` branch, should always point to
 In practice, this means that sometimes they need to be merged in lockstep.
 1) Create a PR in status-go and status-mobile. Update the status-go version to the PR revision `scripts/update-status-go.sh $git_revision`.
 2) Get both PRs reviewed and approved. Once status-mobile PR has been approved, go through manual QA testing if necessary. Don't merge status-mobile PR just yet.
-3) Now that you know the integration between client & server is working, bump the `VERSION` in status-go and merge it.
-4) Once merged, tag the version with the new version and push the tag:
+3) Now that you know the integration between client & server is working, merge the status-go PR first.
+4) Once merged, tag the merged commit with the new version and push the tag:
 ```
   git checkout develop
   git pull develop
-  git tag vx.y.z
+  make tag-version
   git push origin vx.y.z
 ```
+:warning: If a specific commit need to tagged in status-go, use `make tag-version TARGET_COMMIT={hash}`. More info about tagging in [status-go](https://github.com/status-im/status-go/blob/develop/RELEASING.md#tagging-versions).
+
 5) Update status-mobile with the new status-go version, using the new tag `scripts/update-status-go.sh "vx.y.z"`
 6) If you had to rebase status-go to include new changes, e2e test MUST be re-run. If there's any issue you will
    have to fix in status-go with another PR and follow the same process.

doc/ui-guidelines.md

@@ -31,7 +31,7 @@ NOW:
 (defn view
   [{:keys [on-press on-long-press icon]}]
   (let [[pressed? set-pressed] (rn/use-state false)
-        theme                  (theme/use-theme-value)
+        theme                  (theme/use-theme)
         on-press-in            (rn/use-callback #(set-pressed true))
         on-press-out           (rn/use-callback #(set-pressed nil))]
     [rn/pressable
@@ -47,7 +47,7 @@ NOW:
 - We no longer need to create an anonymous function for rendering. This removes unnecessary confusion and the need for specific knowledge on how it works and why it was needed.
 - `rn/use-state` is used instead of `reagent/atom`
 - State values no longer need to be dereferenced; they are accessible as regular symbols. This eliminates a common bug where the "@" symbol was inadvertently omitted.
-- `theme/with-theme` wrapper is not needed anymore, `(theme/use-theme-value)` hook can be used directly in the components
+- `theme/with-theme` wrapper is not needed anymore, `(theme/use-theme)` hook can be used directly in the components
 - `:f>` not needed anymore, all components are functional by default
 - `rn/use-callback` hook should be used for anon callback functions
 

ios/StatusIm/Info.plist

@@ -119,8 +119,6 @@
 	<array>
 		<string>armv7</string>
 	</array>
-	<key>UIStatusBarStyle</key>
-	<string>UIStatusBarStyleLightContent</string>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
@@ -133,7 +131,7 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
+	<true/>
 	<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
 	<array>
 		<string>A00000080400010101</string>

nix/overlay.nix

@@ -57,7 +57,7 @@ in {
   yarn = super.yarn.override { nodejs = super.nodejs-18_x; };
   openjdk = super.openjdk11_headless;
   xcodeWrapper = callPackage ./pkgs/xcodeenv/compose-xcodewrapper.nix { } {
-    versions = ["15.1" "15.2" "15.3"];
+    versions = ["15.1" "15.2" "15.3" "15.4"];
   };
   go = super.go_1_21;
   clang = super.clang_15;

package.json

@@ -20,9 +20,10 @@
     "@react-native-community/netinfo": "^4.4.0",
     "@react-native-community/push-notification-ios": "^1.4.1",
     "@react-native-community/slider": "^3.0.0",
-    "@walletconnect/react-native-compat": "^2.12.2",
-    "@walletconnect/web3wallet": "^1.11.2",
+    "@walletconnect/react-native-compat": "2.11.2",
+    "@walletconnect/web3wallet": "1.10.2",
     "base-64": "^1.0.0",
+    "big-integer": "1.6.51",
     "bignumber.js": "git+https://github.com/status-im/bignumber.js.git#refs/tags/v4.0.2-status",
     "chance": "^1.1.0",
     "emojilib": "^2.4.0",

src/legacy/status_im/data_store/chats.cljs

@@ -38,10 +38,12 @@
     :always
     (update :contacts conj (:id member))))
 
+(defn community-chat-id->channel-id [chat-id] (subs chat-id constants/community-id-length))
+
 (defn decode-chat-id
   [chat-id]
   (let [community-id (subs chat-id 0 constants/community-id-length)
-        channel-id   (subs chat-id constants/community-id-length)]
+        channel-id   (community-chat-id->channel-id chat-id)]
     {:community-id community-id
      :channel-id   channel-id}))
 

src/legacy/status_im/events.cljs

@@ -135,7 +135,8 @@
                                  (>= (- now app-in-background-since)
                                      constants/ms-in-bg-for-require-bioauth))]
     (rf/merge cofx
-              {:db (dissoc db :app-in-background-since)}
+              {:db                                   (dissoc db :app-in-background-since)
+               :effects.biometric/get-supported-type nil}
               (mailserver/process-next-messages-request)
               (when-not new-account?
                 (universal-links/process-stored-event))

src/legacy/status_im/multiaccounts/logout/core.cljs

@@ -28,7 +28,7 @@
   [{:keys [db] :as cofx} {:keys [auth-method logout?]}]
   (let [key-uid (get-in db [:profile/profile :key-uid])]
     (rf/merge cofx
-              {:set-root                               :progress
+              {:dispatch                               [:init-root :progress]
                :effects.shell/reset-state              nil
                :hide-popover                           nil
                ::logout                                nil

src/legacy/status_im/subs/root.cljs

@@ -17,7 +17,7 @@
 (reg-root-key-sub :ui/search :ui/search)
 (reg-root-key-sub :network/type :network/type)
 (reg-root-key-sub :network-status :network-status)
-(reg-root-key-sub :peers-count :peers-count)
+(reg-root-key-sub :peer-stats/count :peer-stats/count)
 (reg-root-key-sub :peers-summary :peers-summary)
 (reg-root-key-sub :web3-node-version :web3-node-version)
 

src/legacy/status_im/ui/components/connectivity/view.cljs

@@ -1,14 +1,9 @@
 (ns legacy.status-im.ui.components.connectivity.view
   (:require
-    [clojure.string :as string]
     [legacy.status-im.ui.components.animation :as animation]
     [legacy.status-im.ui.components.colors :as colors]
-    [legacy.status-im.ui.components.core :as quo]
-    [legacy.status-im.ui.components.list.item :as list.item]
-    [legacy.status-im.ui.components.react :as react]
-    [re-frame.core :as re-frame]
-    [utils.i18n :as i18n])
-  (:require-macros [legacy.status-im.utils.views :as views :refer [defview letsubs]]))
+    [legacy.status-im.ui.components.react :as react])
+  (:require-macros [legacy.status-im.utils.views :as views]))
 
 (defn easing
   [direction n]
@@ -72,112 +67,3 @@
                                           colors/white)
                       :left
                       (* 0.15 parent-width))}]]]))
-
-(defview loading-indicator
-  []
-  (letsubs [fetching?    [:mailserver/fetching?]
-            window-width [:dimensions/window-width]]
-    (when fetching?
-      [loading-indicator-anim window-width])))
-
-(defn hide-sheet-and-dispatch
-  [event]
-  (re-frame/dispatch [:bottom-sheet/hide-old])
-  (re-frame/dispatch event))
-
-(defview connectivity-sheet
-  []
-  (letsubs [{:keys [peers node mobile sync]}     [:connectivity/state]
-            current-mailserver-name              [:mailserver/current-name]
-            peers-count                          [:peers-count]
-            {:keys [syncing-on-mobile-network?]} [:profile/profile]]
-    [:<>
-     [quo/header {:title (i18n/label :t/connection-status) :border-bottom false}]
-     [quo/list-header (i18n/label :t/peer-to-peer)]
-     (if (= peers :offline)
-       [list.item/list-item
-        {:title               (i18n/label :t/not-connected-to-peers)
-         :accessibility-label "not-connected-to-peers"
-         :subtitle            (i18n/label :t/unable-to-send-messages)
-         :subtitle-max-lines  2
-         :theme               :negative
-         :icon                :main-icons/network}]
-       [list.item/list-item
-        {:title               (str (i18n/label :t/connected-to)
-                                   " " peers-count
-                                   " " (string/lower-case (i18n/label :t/peers)))
-         :accessibility-label "connected-to-n-peers"
-         :subtitle            (i18n/label :t/can-send-messages)
-         :subtitle-max-lines  2
-         :theme               :positive
-         :icon                :main-icons/network}])
-     [quo/list-header (i18n/label :t/history-nodes)]
-     (cond
-       (#{:error :offline} node)
-       [list.item/list-item
-        {:title               (i18n/label :t/not-connected-nodes)
-         :accessibility-label "not-connected-nodes"
-         :subtitle            (i18n/label :t/unable-to-fetch)
-         :theme               :negative
-         :icon                :main-icons/mailserver}]
-       (= node :disabled)
-       [list.item/list-item
-        {:title               (i18n/label :t/nodes-disabled)
-         :accessibility-label "nodes-disabled"
-         :subtitle            (i18n/label :t/unable-to-fetch)
-         :disabled            true
-         :icon                :main-icons/mailserver}]
-       (and mobile (not sync))
-       [list.item/list-item
-        {:title               (i18n/label :t/waiting-wi-fi)
-         :accessibility-label "waiting-wi-fi"
-         :subtitle            (i18n/label :t/unable-to-fetch)
-         :disabled            true
-         :icon                :main-icons/mailserver}]
-       (= node :connecting)
-       [list.item/list-item
-        {:title               (i18n/label :t/connecting)
-         :accessibility-label "connecting"
-         :subtitle            (i18n/label :t/unable-to-fetch)
-         :icon                :main-icons/mailserver}]
-       (= node :online)
-       [list.item/list-item
-        {:title               (str (i18n/label :t/connected-to) " " current-mailserver-name)
-         :accessibility-label "connected-to-mailserver"
-         :subtitle            (i18n/label :t/you-can-fetch)
-         :theme               :positive
-         :icon                :main-icons/mailserver}])
-     [list.item/list-item
-      {:title               (i18n/label :t/settings)
-       :accessibility-label "settings"
-       :theme               :accent
-       :on-press            #(hide-sheet-and-dispatch [:navigate-to :legacy-sync-settings])
-       :icon                :main-icons/settings}]
-     (when mobile
-       [:<>
-        [react/view
-         {:margin-vertical  8
-          :background-color colors/gray-lighter
-          :height           36
-          :align-items      :center
-          :justify-content  :center}
-         [react/text {:style {:color colors/gray}} (i18n/label :t/youre-on-mobile-network)]]
-        [list.item/list-item
-         {:title               (i18n/label :t/mobile-network-use-mobile)
-          :accessibility-label "mobile-network-use-mobile"
-          :accessory           :switch
-          :on-press            #(re-frame/dispatch [:mobile-network/set-syncing
-                                                    (not syncing-on-mobile-network?)])
-          :active              syncing-on-mobile-network?}]
-        [react/text {:style {:margin-horizontal 16 :margin-bottom 12 :color colors/gray}}
-         (i18n/label :t/status-mobile-descr)]])]))
-
-(defn get-icon
-  [{:keys [peers node mobile sync]}]
-  (if (or (= peers :offline)
-          (= node :offline)
-          (= node :connecting))
-    :main-icons/offline
-    (if mobile
-      (if sync :main-icons/mobile-sync :main-icons/mobile-sync-off)
-      (when (#{:error :disabled} node) :main-icons/node-offline))))

src/legacy/status_im/ui/screens/peers_stats.cljs

@@ -1,17 +1,21 @@
 (ns legacy.status-im.ui.screens.peers-stats
   (:require
-    [react-native.core :as react-native.core]
+    [react-native.core :as rn]
     [utils.i18n :as i18n]
-    [utils.re-frame :as re-frame]))
+    [utils.re-frame :as rf]))
 
 (defn peers-stats
   []
-  (let [peers-count (re-frame/sub [:peers-count])]
-    [react-native.core/view
-     {:flex              1
-      :margin-horizontal 8}
-     [react-native.core/view
+  (let [peers-count (rf/sub [:peer-stats/count])]
+    (rn/use-mount
+     (fn []
+       (rf/dispatch [:peer-stats/get-count])))
+
+    [rn/view
+     {:style {:flex              1
+              :margin-horizontal 8}}
+     [rn/view
       {:style {:flex-direction  :row
                :margin-vertical 8
                :justify-content :space-between}}
-      [react-native.core/text (str (i18n/label :t/peers-count) ": " peers-count)]]]))
+      [rn/text (str (i18n/label :t/peers-count) ": " peers-count)]]]))

src/legacy/status_im/ui/screens/screens.cljs

@@ -53,7 +53,8 @@
   []
   [;;PROGRESS
    {:name      :progress
-    :options   {:insets {:top? true}}
+    :options   {:insets {:top? true}
+                :theme  :dark}
     :component progress/progress}
 
    ;;COMMUNITY

src/legacy/status_im/utils/logging/core.cljs

@@ -128,7 +128,6 @@
                                                  :current-chat-id
                                                  :network
                                                  :network-status
-                                                 :peers-count
                                                  :peers-summary
                                                  :sync-state
                                                  :view-id

src/legacy/status_im/visibility_status_updates/core.cljs

@@ -130,7 +130,7 @@
              status-type]}]
           (and
            (= status-type constants/visibility-status-inactive)
-           (> (:peers-count db) 0))
+           (pos? (:peer-stats/count db)))
           ;; Disable broadcasting further updates
           (conj {:ms 1000
                  :dispatch

src/quo/components/buttons/predictive_keyboard/view.cljs

@@ -2,7 +2,7 @@
   (:require
     [quo.components.buttons.button.view :as button]
     [quo.components.buttons.predictive-keyboard.style :as style]
-    [quo.components.info.info-message :as info-message]
+    [quo.components.info.info-message.view :as info-message]
     [quo.foundations.colors :as colors]
     [quo.theme]
     [react-native.core :as rn]
@@ -57,17 +57,17 @@
           :key-fn                            str}]
 
         :error
-        [info-message/info-message
-         {:icon :i/info
-          :size :default
-          :type :error}
+        [info-message/view
+         {:icon   :i/info
+          :size   :default
+          :status :error}
          text]
 
         :info
-        [info-message/info-message
-         (merge {:icon :i/info
-                 :size :default
-                 :type (if (= type :error) :error :default)}
+        [info-message/view
+         (merge {:icon   :i/info
+                 :size   :default
+                 :status (if (= type :error) :error :default)}
                 (when blur?
                   {:text-color colors/white-opa-70
                    :icon-color colors/white-opa-40}))

src/quo/components/buttons/slide_button/view.cljs

@@ -14,9 +14,7 @@
     [react-native.reanimated :as reanimated]))
 
 (defn drag-gesture
-  [x-pos disabled? track-width sliding-complete?
-   set-sliding-complete
-   on-complete reset-fn]
+  [x-pos disabled? track-width sliding-complete? set-sliding-complete on-complete reset-fn]
   (-> (gesture/gesture-pan)
       (gesture/with-test-ID :slide-button-gestures)
       (gesture/enabled (not disabled?))
@@ -28,7 +26,8 @@
                              (reanimated/set-shared-value x-pos clamped-x)
                              (when (and reached-end? (not sliding-complete?))
                                (set-sliding-complete true)
-                               (when on-complete (on-complete reset-fn))))))
+                               (when on-complete
+                                 (on-complete reset-fn))))))
       (gesture/on-end (fn [event]
                         (let [x-translation (oops/oget event "translationX")
                               reached-end?  (>= x-translation track-width)]
@@ -56,9 +55,10 @@
         on-track-layout               (rn/use-callback
                                        #(set-track-width (oops/oget % "nativeEvent.layout.width")))
         reset-fn                      (rn/use-callback
-                                       (fn []
+                                       (fn [keep-at-end-after-slide?]
                                          (set-sliding-complete false)
-                                         (animations/reset-track-position x-pos)))
+                                         (when-not keep-at-end-after-slide?
+                                           (animations/reset-track-position x-pos))))
         dimensions                    (rn/use-callback
                                        (partial utils/get-dimensions
                                                 (or track-width constants/default-width)
@@ -71,14 +71,16 @@
                                                 (dimensions :thumb))
                                        [dimensions])
         custom-color                  (if (= type :danger) :danger customization-color)
-        gesture                       (rn/use-memo #(drag-gesture x-pos
-                                                                  disabled?
-                                                                  (dimensions :usable-track)
-                                                                  sliding-complete?
-                                                                  set-sliding-complete
-                                                                  on-complete
-                                                                  reset-fn)
-                                                   [sliding-complete? disabled?])]
+        gesture                       (rn/use-memo
+                                       (fn []
+                                         (drag-gesture x-pos
+                                                       disabled?
+                                                       (dimensions :usable-track)
+                                                       sliding-complete?
+                                                       set-sliding-complete
+                                                       on-complete
+                                                       reset-fn))
+                                       [sliding-complete? disabled? on-complete])]
     [gesture/gesture-detector
      {:gesture gesture}
      [reanimated/view

src/quo/components/drawers/action_drawers/view.cljs

@@ -8,10 +8,11 @@
     [react-native.core :as rn]))
 
 (defn- get-icon-color
-  [danger? theme]
-  (if danger?
-    (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+  [blur? danger? theme]
+  (cond
+    danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+    blur?   colors/white-opa-70
+    :else   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
 (defn- divider
   [theme blur?]
@@ -51,7 +52,7 @@
            :accessible          true
            :style               (style/left-icon sub-label)}
           [icon/icon icon
-           {:color    (or icon-color (get-icon-color danger? theme))
+           {:color    (or icon-color (get-icon-color blur? danger? theme))
             :no-color no-icon-color?
             :size     20}]])
        [rn/view
@@ -84,7 +85,7 @@
               :accessible          true
               :accessibility-label :right-icon-for-action}
              [icon/icon right-icon
-              {:color (get-icon-color danger? theme)
+              {:color (get-icon-color blur? danger? theme)
                :size  20}]])
           (when (= state :selected)
             [rn/view {:style style/right-icon}

src/quo/components/drawers/drawer_top/view.cljs

@@ -18,7 +18,7 @@
 
 (defn- left-image
   [{:keys [type customization-color account-avatar-emoji account-avatar-type icon-avatar
-           profile-picture]}]
+           profile-picture blur?]}]
   (case type
     :account         [account-avatar/view
                       {:customization-color customization-color
@@ -28,6 +28,7 @@
     :keypair         [icon-avatar/icon-avatar
                       {:icon    icon-avatar
                        :border? true
+                       :blur?   blur?
                        :color   :neutral}]
 
     :default-keypair [user-avatar/user-avatar
@@ -213,6 +214,7 @@
        [rn/view {:style style/left-container}
         [left-image
          {:type                 type
+          :blur?                blur?
           :customization-color  customization-color
           :account-avatar-emoji account-avatar-emoji
           :account-avatar-type  account-avatar-type

src/quo/components/info/info_message.cljs

@@ -1,48 +0,0 @@
-(ns quo.components.info.info-message
-  (:require
-    [quo.components.icon :as quo.icons]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(defn get-color
-  [k theme]
-  (case k
-    :success (colors/resolve-color :success theme)
-    :error   (colors/resolve-color :danger theme)
-    :warning (colors/resolve-color :warning theme)
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
-
-(defn info-message
-  "[info-message opts \"message\"]
-  opts
-  {:type           :default/:success/:error
-   :size           :default/:tiny
-   :icon           :i/info       ;; info message icon
-   :text-color     colors/white  ;; text color override
-   :icon-color     colors/white  ;; icon color override
-   :no-icon-color? false         ;; disable tint color for icon"
-  [{:keys [type size icon text-color icon-color no-icon-color? style accessibility-label
-           container-style]} message]
-  (let [theme      (quo.theme/use-theme)
-        weight     (if (= size :default) :regular :medium)
-        icon-size  (if (= size :default) 16 12)
-        size       (if (= size :default) :paragraph-2 :label)
-        text-color (or text-color (get-color type theme))
-        icon-color (or icon-color text-color)]
-    [rn/view
-     {:style (merge {:flex-direction :row
-                     :align-items    :center}
-                    style
-                    container-style)}
-     [quo.icons/icon icon
-      {:color    icon-color
-       :no-color no-icon-color?
-       :size     icon-size}]
-     [text/text
-      {:accessibility-label accessibility-label
-       :size                size
-       :weight              weight
-       :style               {:color             text-color
-                             :margin-horizontal 4}} message]]))

src/quo/components/info/info_message/component_spec.cljs

@@ -0,0 +1,32 @@
+(ns quo.components.info.info-message.component-spec
+  (:require
+    [quo.components.info.info-message.view :as info-message]
+    [test-helpers.component :as h]))
+
+(h/describe "Info: Info Message"
+  (h/test "basic render"
+    (h/render-with-theme-provider
+     [info-message/view
+      {:status              :default
+       :size                :default
+       :accessibility-label :info-message
+       :icon                :i/placeholder} "Message"])
+    (h/is-truthy (h/get-by-label-text :info-message)))
+
+  (h/test "render with correct message"
+    (h/render-with-theme-provider
+     [info-message/view
+      {:status              :default
+       :size                :default
+       :accessibility-label :info-message
+       :icon                :i/placeholder} "Message"])
+    (h/is-truthy (h/get-by-text "Message")))
+
+  (h/test "render icon"
+    (h/render-with-theme-provider
+     [info-message/view
+      {:status              :default
+       :size                :default
+       :accessibility-label :info-message
+       :icon                :i/placeholder} "Message"])
+    (h/is-truthy (h/get-by-label-text :icon))))

src/quo/components/info/info_message/style.cljs

@@ -0,0 +1,6 @@
+(ns quo.components.info.info-message.style)
+
+(def container
+  {:flex-direction :row
+   :gap            4
+   :align-items    :center})

src/quo/components/info/info_message/view.cljs

@@ -0,0 +1,53 @@
+(ns quo.components.info.info-message.view
+  (:require [quo.components.icon :as icons]
+            [quo.components.info.info-message.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:status {:optional true} [:maybe [:enum :default :success :error :warning]]]
+      [:size {:optional true} [:maybe [:enum :default :tiny]]]
+      [:blur? {:optional true} [:maybe :boolean]]
+      [:icon :keyword]
+      [:color {:optional true} [:maybe :string]]
+      [:text-color {:optional true} [:maybe :string]]
+      [:icon-color {:optional true} [:maybe :string]]
+      [:no-icon-color? {:optional true} [:maybe :boolean]]
+      [:accessibility-label {:optional true} [:maybe :keyword]]
+      [:container-style {:optional true} [:maybe :map]]]]
+    [:message :string]]
+   :any])
+
+(defn- get-color
+  [status theme blur?]
+  (case status
+    :success (if blur? colors/success-60 (colors/resolve-color :success theme))
+    :error   (if blur? colors/danger-60 (colors/resolve-color :danger theme))
+    :warning (if blur? colors/warning-60 (colors/resolve-color :warning theme))
+    (if blur? colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))))
+
+(defn view-internal
+  [{:keys [status size blur? icon color icon-color text-color no-icon-color? container-style
+           accessibility-label]} message]
+  (let [theme         (quo.theme/use-theme)
+        default-color (get-color status theme blur?)
+        text-color    (or text-color color default-color)
+        icon-color    (or icon-color color default-color)]
+    [rn/view {:style (merge style/container container-style)}
+     [icons/icon icon
+      {:size      (if (= size :tiny) 12 16)
+       :color     icon-color
+       :no-color? no-icon-color?}]
+     [text/text
+      {:size                (if (= size :tiny) :label :paragraph-2)
+       :accessibility-label accessibility-label
+       :style               {:color text-color}} message]]))
+
+(def view (schema/instrument #'view-internal ?schema))

src/quo/components/list_items/account_list_card/view.cljs

@@ -31,7 +31,8 @@
          :size   :paragraph-2}
         (:name account-props)]
        [address-text/view
-        {:networks networks
+        {:blur?    blur?
+         :networks networks
          :address  (:address account-props)
          :format   :short}]]]
      (when (= action :icon)

src/quo/components/list_items/dapp/style.cljs

@@ -34,7 +34,8 @@
 
 (def container-info
   {:flex-direction :row
-   :align-items    :center})
+   :align-items    :center
+   :flex           1})
 
 (def user-info
   {:margin-left 8})

src/quo/components/list_items/dapp/view.cljs

@@ -25,14 +25,16 @@
         :style  {:width 32 :height 32}}]
       [rn/view {:style style/user-info}
        [text/text
-        {:weight :semi-bold
-         :size   :paragraph-1
-         :style  (style/style-text-name theme)}
+        {:weight          :semi-bold
+         :size            :paragraph-1
+         :number-of-lines 1
+         :style           (style/style-text-name theme)}
         (:name dapp)]
        [text/text
-        {:weight :regular
-         :size   :paragraph-2
-         :style  (style/style-text-value theme)}
+        {:weight          :regular
+         :size            :paragraph-2
+         :number-of-lines 1
+         :style           (style/style-text-value theme)}
         (:value dapp)]]]
      (when right-component
        [right-component dapp])]))

src/quo/components/list_items/network_list/view.cljs

@@ -44,13 +44,14 @@
       [:label :string]
       [:fiat-value :string]
       [:token-value :string]
+      [:container-style {:optional true} [:maybe :map]]
       [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
       [:state {:optional true} [:enum :pressed :active :disabled :default]]
       [:on-press {:optional true} [:maybe fn?]]]]]
    :any])
 
 (defn- view-internal
-  [{:keys [on-press state customization-color]
+  [{:keys [on-press container-style state customization-color]
     :as   props
     :or   {customization-color :blue}}]
   (let [theme                  (quo.theme/use-theme)
@@ -59,7 +60,8 @@
         on-press-out           (rn/use-callback #(set-pressed false))
         internal-state         (if pressed? :pressed state)]
     [rn/pressable
-     {:style               (style/container internal-state customization-color theme)
+     {:style               (merge (style/container internal-state customization-color theme)
+                                  container-style)
       :on-press-in         (when-not (= state :disabled) on-press-in)
       :on-press-out        (when-not (= state :disabled) on-press-out)
       :on-press            (when-not (= state :disabled) on-press)

src/quo/components/list_items/user.cljs

@@ -8,7 +8,7 @@
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]))
 
-(def container-style
+(def container
   {:margin-horizontal  8
    :padding-vertical   8
    :padding-horizontal 12
@@ -43,9 +43,9 @@
 (defn user
   [{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified?
            untrustworthy? on-press on-long-press accessory customization-color theme
-           allow-multiple-presses? disabled?]}]
+           allow-multiple-presses? disabled? container-style]}]
   [rn/touchable-highlight
-   {:style                   container-style
+   {:style                   (merge container container-style)
     :underlay-color          (colors/resolve-color customization-color theme 5)
     :allow-multiple-presses? allow-multiple-presses?
     :accessibility-label     :user-list

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

@@ -34,6 +34,12 @@
     (set-state (fn [prev-state]
                  (assoc prev-state :image-loaded? true)))))
 
+(defn on-load
+  [evt set-state]
+  (let [source       (.. evt -nativeEvent -source)
+        aspect-ratio (/ (.-width source) (.-height source))]
+    (set-state (fn [prev-state] (assoc prev-state :image-aspect-ratio aspect-ratio)))))
+
 (defn on-load-error
   [set-state]
   (js/setTimeout (fn []
@@ -147,6 +153,7 @@
         [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
@@ -197,6 +204,7 @@
        [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
@@ -219,12 +227,13 @@
 (defn- view-internal
   [{:keys [container-style type on-press on-long-press supported-file?]
     :as   props}]
-  (let [[state set-state]  (rn/use-state {:image-loaded?  false
-                                          :image-error?   false
-                                          :avatar-loaded? false})
+  (let [[state set-state]  (rn/use-state {:image-loaded?      false
+                                          :image-aspect-ratio nil
+                                          :image-error?       false
+                                          :avatar-loaded?     false})
         collectible-ready? (or (:image-loaded? state) (not supported-file?))]
     [rn/pressable
-     {:on-press            (when collectible-ready? on-press)
+     {:on-press            (when collectible-ready? #(on-press (:image-aspect-ratio state)))
       :on-long-press       (when collectible-ready? on-long-press)
       :accessibility-label :collectible-list-item
       :style               container-style}

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

@@ -1,10 +1,13 @@
 (ns quo.components.profile.expanded-collectible.style
   (:require [quo.foundations.colors :as colors]))
 
-(def container
-  {:align-items     :center
-   :justify-content :center
-   :border-radius   16})
+(defn container
+  [aspect-ratio]
+  (cond-> {:align-items     :center
+           :justify-content :center
+           :border-radius   16}
+    aspect-ratio (assoc :width        "100%"
+                        :aspect-ratio aspect-ratio)))
 
 (defn image
   [square? aspect-ratio theme]
@@ -25,18 +28,43 @@
    :border-color  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)})
 
 (defn fallback
-  [{:keys [theme]}]
-  {: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)
-   :border-width     1
-   :border-radius    16
-   :width            "100%"
-   :aspect-ratio     1
-   :align-items      :center
-   :justify-content  :center})
+  ([theme]
+   (fallback theme 1))
+  ([theme aspect-ratio]
+   {: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)
+    :border-width     1
+    :border-radius    16
+    :width            "100%"
+    :aspect-ratio     aspect-ratio
+    :align-items      :center
+    :justify-content  :center}))
 
 (def counter
   {:position :absolute
    :top      12
    :right    12})
+
+(defn loading-image-with-opacity
+  [opacity]
+  [{:align-items     :center
+    :aspect-ratio    1
+    :border-radius   16
+    :justify-content :center
+    :opacity         opacity
+    :position        :absolute
+    :width           "100%"
+    :z-index         1}])
+
+(defn gradient-view
+  [aspect-ratio]
+  {:border-radius   16
+   :width           "100%"
+   :aspect-ratio    aspect-ratio
+   :align-items     :center
+   :justify-content :center})
+
+(defn supported-file
+  [opacity]
+  {:opacity opacity})

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

@@ -1,17 +1,53 @@
 (ns quo.components.profile.expanded-collectible.view
   (:require
     [clojure.string :as string]
-    [promesa.core :as promesa]
     [quo.components.counter.collectible-counter.view :as collectible-counter]
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
     [quo.components.profile.expanded-collectible.style :as style]
     [quo.foundations.colors :as colors]
+    [quo.foundations.gradients :as gradients]
     [quo.theme]
     [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 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)))))
+
+(defn on-load-error
+  [set-state]
+  (js/setTimeout (fn []
+                   (set-state (fn [prev-state] (assoc prev-state :image-error? true))))
+                 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)}
+   [gradients/view
+    {:theme           theme
+     :container-style (style/gradient-view aspect-ratio)
+     :color-index     gradient-color-index}]])
+
 (defn- counter-view
   [counter]
   [collectible-counter/view
@@ -21,7 +57,7 @@
 (defn- fallback-view
   [{:keys [label theme counter on-mount]}]
   (rn/use-mount on-mount)
-  [rn/view {:style (style/fallback {:theme theme})}
+  [rn/view {:style (style/fallback theme)}
    [counter-view counter]
    [rn/view
     [icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
@@ -33,45 +69,57 @@
 
 (defn view-internal
   [{:keys [container-style square? on-press counter image-src native-ID supported-file?
-           on-collectible-load]}]
-  (let [theme                          (quo.theme/use-theme)
-        [image-size set-image-size]    (rn/use-state {})
-        [image-error? set-image-error] (rn/use-state (or (nil? image-src)
-                                                         (string/blank? image-src)))]
-    (rn/use-effect
-     (fn []
-       (promesa/let [[image-width image-height] (rn/image-get-size image-src)]
-         (set-image-size {:width        image-width
-                          :height       image-height
-                          :aspect-ratio (/ image-width image-height)})))
-     [image-src])
+           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))})]
     [rn/pressable
-     {:on-press            (when (and (not image-error?) supported-file?) on-press)
+     {:on-press            (when (and (not (:image-error? state)) supported-file?) on-press)
       :accessibility-label :expanded-collectible
-      :style               (merge container-style style/container)}
+      :style               (merge container-style
+                                  (style/container aspect-ratio))}
      (cond
        (not supported-file?)
        [fallback-view
-        {:label    (i18n/label :t/unsupported-file)
-         :counter  counter
-         :theme    theme
-         :on-mount on-collectible-load}]
+        {:aspect-ratio aspect-ratio
+         :label        (i18n/label :t/unsupported-file)
+         :counter      counter
+         :theme        theme
+         :on-mount     on-collectible-load}]
 
-       image-error?
+       (:image-error? state)
        [fallback-view
         {:label    (i18n/label :t/cant-fetch-info)
          :counter  counter
          :theme    theme
          :on-mount on-collectible-load}]
 
-       :else
-       [rn/view
+       (not (:image-loaded? state))
+       [loading-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 image-size) theme)
-          :source    image-src
-          :native-ID native-ID
-          :on-error  #(set-image-error true)
-          :on-load   on-collectible-load}]
+         {: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)}]])]))
@@ -81,6 +129,7 @@
    [:catn
     [:props
      [:map {:closed true}
+      [:aspect-ratio {:optional true} [:maybe number?]]
       [:image-src {:optional true} [:maybe string?]]
       [:supported-file? {:optional true} [:maybe boolean?]]
       [:container-style {:optional true} [:maybe :map]]

src/quo/components/selectors/disclaimer/view.cljs

@@ -12,7 +12,8 @@
   [{:keys [checked? blur? accessibility-label container-style on-change icon customization-color]} label]
   (let [theme (quo.theme/use-theme)]
     [rn/touchable-without-feedback
-     {:on-press            on-change
+     {:on-press            (when on-change
+                             #(on-change (not checked?)))
       :accessibility-label :disclaimer-touchable-opacity}
      [rn/view {:style (merge container-style (style/container blur? theme))}
       [selectors/view

src/quo/components/selectors/selectors/style.cljs

@@ -31,7 +31,7 @@
 (defn- checkbox-border-unchecked-color
   [theme]
   {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
-   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)})
+   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)})
 
 (defn- filled-checkbox-background-color
   [theme]

src/quo/components/settings/category/component_spec.cljs

@@ -51,3 +51,24 @@
                              :right-icon :i/globe
                              :chevron?   true}]}])
     (h/is-truthy (h/get-by-text "subtitle"))))
+
+(h/describe "Data Item Category tests"
+  (h/test "category renders"
+    (h/render [category/category
+               {:list-type :data-item
+                :label     "Label"
+                :data      [{:title      "Item 1"
+                             :subtitle   "subtitle"
+                             :right-icon :i/globe}]}])
+    (h/is-truthy (h/get-by-text "Label"))
+    (h/is-truthy (h/get-by-text "Item 1"))
+    (h/is-truthy (h/get-by-text "subtitle")))
+
+  (h/test "category renders without label"
+    (h/render [category/category
+               {:list-type :data-item
+                :data      [{:title      "Item 1"
+                             :subtitle   "subtitle"
+                             :right-icon :i/globe}]}])
+    (h/is-falsy (h/query-by-label-text "Label"))
+    (h/is-truthy (h/get-by-text "Item 1"))))

src/quo/components/settings/category/data_item/view.cljs

@@ -0,0 +1,32 @@
+(ns quo.components.settings.category.data-item.view
+  (:require
+    [quo.components.markdown.text :as text]
+    [quo.components.settings.category.style :as style]
+    [quo.components.settings.data-item.view :as data-item]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [label data container-style blur?]}]
+  (let [theme     (quo.theme/use-theme)
+        last-item (rn/use-memo #(last data) [data])]
+    [rn/view {:style (merge (style/container label) container-style)}
+     (when label
+       [text/text
+        {:weight :medium
+         :size   :paragraph-2
+         :style  (style/label blur? theme)}
+        label])
+     [rn/view {:style (style/settings-items blur? theme)}
+      (for [item data
+            ;; NOTE: overwriting the background of the data-item in favor of the category bg
+            :let [data-item-container-style (-> item :container-style (assoc :background-color nil))
+                  data-item-props           (assoc item
+                                                   :blur?           blur?
+                                                   :container-style data-item-container-style)]]
+        ^{:key item}
+        [:<>
+         [data-item/view data-item-props]
+         (when-not (= item last-item)
+           [rn/view {:style (style/settings-separator blur? theme)}])])]]))
+

src/quo/components/settings/category/view.cljs

@@ -1,10 +1,13 @@
 (ns quo.components.settings.category.view
   (:require
+    [quo.components.settings.category.data-item.view :as data-item]
     [quo.components.settings.category.reorder.view :as reorder]
     [quo.components.settings.category.settings.view :as settings]))
 
 (defn category
   [{:keys [list-type] :as props}]
-  (if (= list-type :settings)
-    [settings/settings-category props]
-    [reorder/reorder-category props]))
+  (condp = list-type
+    :settings  [settings/settings-category props]
+    :data-item [data-item/view props]
+    :reorder   [reorder/reorder-category props]
+    nil))

src/quo/components/settings/data_item/style.cljs

@@ -6,8 +6,14 @@
   [{:keys [size card? blur? actionable? theme]}]
   {:flex-direction     :row
    :justify-content    :space-between
-   :padding-vertical   (when (= size :default) 8)
-   :padding-horizontal (when (= size :default) 12)
+   :padding-vertical   (case size
+                         :default 8
+                         :large   12
+                         nil)
+   :padding-horizontal (case size
+                         :default 12
+                         :large   16
+                         nil)
    :border-radius      16
    :border-width       (when (and card? (not= size :small)) 1)
    :background-color   (if blur?
@@ -24,15 +30,27 @@
 
 (defn loading-container
   [size blur? theme]
-  {:width            (if (= size :default) 132 72)
-   :height           (if (= size :default) 16 10)
+  {:width            (case size
+                       :large 132
+                       :small 72
+                       132)
+   :height           (case size
+                       :large 16
+                       :small 10
+                       16)
    :background-color (if blur?
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-5
                                             colors/neutral-90
                                             theme))
-   :border-radius    (if (= size :default) 6 3)
-   :margin-vertical  (if (= size :default) 4 3)})
+   :border-radius    (case size
+                       :large 6
+                       :small 3
+                       6)
+   :margin-vertical  (case size
+                       :large 4
+                       :small 3
+                       4)})
 
 (def subtitle-container
   {:flex-direction :row

src/quo/components/share/qr_code/style.cljs

@@ -39,6 +39,12 @@
 (def avatar-container-rounded
   (assoc avatar-container-common :border-radius 16))
 
+(def big-avatar-container-rounded
+  (assoc avatar-container-common
+         :width         84
+         :height        84
+         :border-radius 42))
+
 (def community-logo-image
   {:width         64
    :height        64

src/quo/components/share/qr_code/view.cljs

@@ -13,8 +13,9 @@
     :as         props}]
   [rn/view {:style style/avatar-overlay}
    [rn/view
-    {:style (if (= avatar-type :wallet-account)
-              style/avatar-container-rounded
+    {:style (case avatar-type
+              :wallet-account style/avatar-container-rounded
+              :saved-address  style/big-avatar-container-rounded
               style/avatar-container-circular)}
     (case avatar-type
       :profile
@@ -37,7 +38,7 @@
       [channel-avatar/view (assoc props :locked? nil :size :size-64)]
 
       :saved-address
-      [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)]
+      [wallet-avatar/wallet-user-avatar (assoc props :size :size-80)]
 
       nil)]])
 

src/quo/components/tags/summary_tag/style.cljs

@@ -28,5 +28,10 @@
    :height        24
    :border-radius 12})
 
+(def dapp
+  {:width         24
+   :height        24
+   :border-radius 12})
+
 (def token-image
   {:border-radius 12})

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

@@ -23,6 +23,10 @@
     [rn/image
      {:source image-source
       :style  style/network}]
+    :dapp
+    [rn/image
+     {:source image-source
+      :style  style/dapp}]
     :saved-address
     [wallet-user-avatar/wallet-user-avatar
      {:full-name           label
@@ -50,7 +54,7 @@
     - :label - string - tag label
     - :customization-color - color - It will be passed down to components that
       should vary based on a custom color.
-    - :type - :token / :user / :collectible / :saved-address / :network / :account
+    - :type - :token / :user / :collectible / :saved-address / :network / :account / :dapp
     - :emoji - string - emoji used for displaying account avatar
     - :image-source - resource - image to display on :network, :collectible and :user
     - :theme - :light / :dark"

src/quo/components/wallet/keypair/style.cljs

@@ -7,14 +7,14 @@
   [{:keys [blur? customization-color theme selected? container-style]}]
   (merge {:border-radius  16
           :border-width   1
-          :border-color   (if selected?
-                            (if blur?
-                              colors/white
-                              (colors/resolve-color customization-color theme))
-                            (if blur?
-                              colors/white-opa-5
-                              (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)))
-          :padding-bottom 8}
+          :padding-bottom 8
+          :border-color   (cond
+                            (and selected? blur?) colors/white
+                            selected?             (colors/resolve-color customization-color theme)
+                            blur?                 colors/white-opa-5
+                            :else                 (colors/theme-colors colors/neutral-10
+                                                                       colors/neutral-80
+                                                                       theme))}
          container-style))
 
 (def header-container

src/quo/components/wallet/keypair/view.cljs

@@ -47,12 +47,13 @@
       :accessibility-label :title}
      [text/text {:weight :semi-bold}
       (if (= type :default-keypair) (keypair-string full-name) full-name)]
-     (if (= action :selector)
-       [selectors/view
-        {:type                :radio
-         :checked?            selected?
-         :blur?               blur?
-         :customization-color customization-color}]
+     (case action
+       :none     nil
+       :selector [selectors/view
+                  {:type                :radio
+                   :checked?            selected?
+                   :blur?               blur?
+                   :customization-color customization-color}]
        [rn/pressable {:on-press on-options-press}
         [icon/icon :i/options
          {:color               (if blur?
@@ -94,20 +95,23 @@
 
 (defn view
   [{:keys [accounts action container-style selected? on-press] :as props}]
-  [rn/pressable
-   {:style    (style/container (merge props
-                                      {:selected?       selected?
-                                       :container-style container-style}))
-    :on-press #(when (= action :selector) (on-press))}
-   [rn/view {:style style/header-container}
-    [avatar props]
-    [rn/view
-     {:style {:margin-left 8
-              :flex        1}}
-     [title-view (assoc props :selected? selected?)]
-     [details-view props]]]
-   [rn/flat-list
-    {:data      accounts
-     :render-fn acc-list-card
-     :separator [rn/view {:style {:height 8}}]
-     :style     {:padding-horizontal 8}}]])
+  (let [theme (quo.theme/use-theme)]
+    [rn/pressable
+     {:style          (style/container (assoc props
+                                              :selected?       selected?
+                                              :container-style container-style
+                                              :theme           theme))
+      :on-press       #(when (= action :selector) (on-press))
+      :pointer-events (when (= action :selector) :box-only)}
+     [rn/view {:style style/header-container}
+      [avatar props]
+      [rn/view
+       {:style {:margin-left 8
+                :flex        1}}
+       [title-view (assoc props :selected? selected?)]
+       [details-view props]]]
+     [rn/flat-list
+      {:data      accounts
+       :render-fn acc-list-card
+       :separator [rn/view {:style {:height 8}}]
+       :style     {:padding-horizontal 8}}]]))

src/quo/components/wallet/missing_keypairs/view.cljs

@@ -11,7 +11,7 @@
     [utils.i18n :as i18n]))
 
 (defn title-view
-  [{:keys [keypairs blur? on-import-press]}]
+  [{:keys [keypairs blur? on-import-press show-import-all?]}]
   (let [theme (quo.theme/use-theme)]
     [rn/view
      {:accessibility-label :title
@@ -29,12 +29,13 @@
          :style  {:color colors/warning-60}}
         (i18n/label :t/amount-missing-keypairs
                     {:amount (str (count keypairs))})]
-       [button/button
-        {:type       :outline
-         :background :blur
-         :size       24
-         :on-press   on-import-press}
-        (i18n/label :t/import)]]
+       (when show-import-all?
+         [button/button
+          {:type       :outline
+           :background :blur
+           :size       24
+           :on-press   on-import-press}
+          (i18n/label :t/import)])]
       [text/text
        {:size  :paragraph-2
         :style (style/subtitle blur? theme)}

src/quo/components/wallet/token_input/view.cljs

@@ -81,8 +81,9 @@
                                         (js->clj :keywordize-keys true)
                                         (on-selection-change))))]
     (fn [{:keys [token customization-color show-keyboard? crypto? currency value error? selection
-                 handle-on-swap]
-          :or   {show-keyboard? true}}]
+                 handle-on-swap allow-selection?]
+          :or   {show-keyboard?   true
+                 allow-selection? true}}]
       (let [theme        (quo.theme/use-theme)
             window-width (:width (rn/get-window))]
         [rn/pressable
@@ -107,7 +108,8 @@
                      :selection-color          customization-color
                      :show-soft-input-on-focus show-keyboard?
                      :on-selection-change      handle-selection-change
-                     :selection                (clj->js selection)}
+                     :selection                (clj->js selection)
+                     :editable                 allow-selection?}
               controlled-input?       (assoc :value value)
               (not controlled-input?) (assoc :default-value value-internal))]
            [token-name-text theme (if crypto? token currency)]]]

src/quo/core.cljs

@@ -68,7 +68,7 @@
     quo.components.graph.wallet-graph.view
     quo.components.header
     quo.components.icon
-    quo.components.info.info-message
+    quo.components.info.info-message.view
     quo.components.info.information-box.view
     quo.components.inputs.address-input.view
     quo.components.inputs.input.view
@@ -301,7 +301,7 @@
 (def icon quo.components.icon/icon)
 
 ;;;; Info
-(def info-message quo.components.info.info-message/info-message)
+(def info-message quo.components.info.info-message.view/view)
 (def information-box quo.components.info.information-box.view/view)
 
 ;;;; Inputs

src/quo/core_spec.cljs

@@ -41,6 +41,7 @@
     quo.components.dropdowns.network-dropdown.component-spec
     quo.components.gradient.gradient-cover.component-spec
     quo.components.graph.wallet-graph.component-spec
+    quo.components.info.info-message.component-spec
     quo.components.inputs.address-input.component-spec
     quo.components.inputs.input.component-spec
     quo.components.inputs.locked-input.component-spec

src/status_im/common/biometric/utils.cljs

@@ -11,9 +11,10 @@
 (defn get-label-by-type
   [biometric-type]
   (condp = biometric-type
-    constants/biometrics-type-android (i18n/label :t/biometric-fingerprint)
-    constants/biometrics-type-face-id (i18n/label :t/biometric-faceid)
-    (i18n/label :t/biometric-touchid)))
+    constants/biometrics-type-android  (i18n/label :t/biometric-fingerprint)
+    constants/biometrics-type-face-id  (i18n/label :t/biometric-faceid)
+    constants/biometrics-type-touch-id (i18n/label :t/biometric-touchid)
+    (i18n/label :t/biometric)))
 
 (defn get-icon-by-type
   [biometric-type]

src/status_im/common/bottom_sheet/style.cljs

@@ -1,7 +1,6 @@
 (ns status-im.common.bottom-sheet.style
   (:require
-    [quo.foundations.colors :as colors]
-    [react-native.platform :as platform]))
+    [quo.foundations.colors :as colors]))
 
 (def ^:private sheet-border-radius 20)
 
@@ -22,11 +21,8 @@
    :left     0
    :right    0})
 
-(defn shell-bg
-  [blur-background]
-  {:background-color (if blur-background
-                       blur-background
-                       (if platform/ios? colors/white-opa-5 colors/neutral-100-opa-90))
+(def shell-bg
+  {:background-color colors/bottom-sheet-background-blur
    :flex             1})
 
 (def shell-bg-container

src/status_im/common/bottom_sheet/view.cljs

@@ -63,7 +63,7 @@
 (defn view
   [{:keys [hide? insets]}
    {:keys [content selected-item padding-bottom-override border-radius on-close shell?
-           gradient-cover? customization-color hide-handle? blur-radius blur-background]
+           gradient-cover? customization-color hide-handle? blur-radius]
     :or   {border-radius 12}}]
   (let [theme                             (quo.theme/use-theme)
         {window-height :height}           (rn/get-window)
@@ -134,7 +134,7 @@
        (when shell?
          [rn/view {:style style/shell-bg-container}
           [quo/blur
-           {:style         (style/shell-bg blur-background)
+           {:style         style/shell-bg
             :blur-radius   (or blur-radius 20)
             :blur-amount   32
             :blur-type     :transparent

src/status_im/common/check_before_syncing/style.cljs

@@ -0,0 +1,24 @@
+(ns status-im.common.check-before-syncing.style)
+
+(def buttons-container
+  {:flex-direction   :row
+   :justify-content  :space-between
+   :gap              12
+   :padding-vertical 12})
+
+(def button {:flex 1})
+
+(def checkbox
+  {:margin-top     16
+   :flex-direction :row
+   :align-items    :center})
+
+(def checkbox-text {:margin-left 10})
+
+(def checkboxes-container {:margin-bottom 10 :padding-right 10})
+
+(def header {:margin-bottom 8})
+
+(def description {:margin-right -33})
+
+(def view-container {:padding-horizontal 33})

src/status_im/common/check_before_syncing/view.cljs

@@ -0,0 +1,74 @@
+(ns status-im.common.check-before-syncing.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.common.check-before-syncing.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(def checks
+  [(i18n/label :t/check-before-syncing-doc-checkbox-1)
+   (i18n/label :t/check-before-syncing-doc-checkbox-2)
+   (i18n/label :t/check-before-syncing-doc-checkbox-3)])
+
+(defn- checkbox
+  [on-change customization-color description]
+  [rn/view {:style style/checkbox}
+   [quo/selectors
+    {:type                :checkbox
+     :blur?               true
+     :customization-color customization-color
+     :on-change           on-change}]
+   [quo/text {:style style/checkbox-text} description]])
+
+(defn- compute-new-checked-count
+  [set-checked-count checked?]
+  (if checked?
+    (set-checked-count inc)
+    (set-checked-count dec)))
+
+(defn- hide-bottom-sheet
+  []
+  (rf/dispatch [:hide-bottom-sheet]))
+
+(defn view
+  [{:keys [on-submit customization-color]}]
+  (let [[checked-count set-checked-count] (rn/use-state 0)
+        on-change                         (partial compute-new-checked-count set-checked-count)
+        render-checkbox                   (rn/use-callback
+                                           (partial checkbox on-change customization-color)
+                                           [customization-color])
+        on-cancel                         hide-bottom-sheet
+        on-continue                       (rn/use-callback
+                                           (fn []
+                                             (hide-bottom-sheet)
+                                             (on-submit))
+                                           [on-submit])]
+    [rn/view
+     {:style               style/view-container
+      :accessibility-label :check-before-syncing-bottom-sheet}
+     [quo/text
+      {:weight :semi-bold
+       :size   :heading-2
+       :style  style/header} (i18n/label :t/check-before-syncing)]
+     [quo/text {:style style/description} (i18n/label :t/check-before-syncing-doc-description)]
+
+     (into
+      [rn/view {:style style/checkboxes-container}]
+      (mapv render-checkbox checks))
+
+     [rn/view {:style style/buttons-container}
+      [quo/button
+       {:type                :grey
+        :container-style     style/button
+        :accessibility-label :cancel-button
+        :on-press            on-cancel}
+       (i18n/label :t/cancel)]
+      [quo/button
+       {:container-style     style/button
+        :disabled?           (not= checked-count (count checks))
+        :customization-color (or customization-color :blue)
+        :accessibility-label :continue-button
+
+        :on-press            on-continue}
+       (i18n/label :t/continue)]]]))

src/status_im/common/contact_list_item/view.cljs

@@ -6,7 +6,8 @@
 
 (defn contact-list-item
   [{:keys [on-press on-long-press accessory allow-multiple-presses? disabled?]}
-   {:keys [primary-name secondary-name public-key compressed-key ens-verified added?]}
+   {:keys [primary-name secondary-name public-key compressed-key ens-verified added?
+           container-style]}
    theme]
   (let [photo-path          (rf/sub [:chats/photo-path public-key])
         online?             (rf/sub [:visibility-status-updates/online? public-key])
@@ -25,4 +26,5 @@
       :on-press                on-press
       :on-long-press           on-long-press
       :accessory               accessory
+      :container-style         container-style
       :disabled?               disabled?}]))

src/status_im/common/enter_seed_phrase/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im.common.enter-seed-phrase.style
-  (:require
-    [react-native.safe-area :as safe-area]))
+  (:require [react-native.platform :as platform]))
 
 (def full-layout {:flex 1})
 
@@ -11,6 +10,13 @@
    :left     0
    :right    0})
 
+(defn recovery-phrase-container
+  [{:keys [banner-offset insets keyboard-shown?]}]
+  {:flex           1
+   :padding-bottom (if keyboard-shown?
+                     (when platform/ios? banner-offset)
+                     (:bottom insets))})
+
 (def form-container
   {:flex               1
    :padding-horizontal 20
@@ -29,9 +35,7 @@
    :margin-top        12
    :margin-horizontal -20})
 
-(defn continue-button
-  [keyboard-shown?]
-  {:margin-top    :auto
-   :margin-bottom (when-not keyboard-shown? (safe-area/get-bottom))})
+(def continue-button
+  {:margin-top :auto})
 
 (def keyboard-container {:margin-top :auto})

src/status_im/common/enter_seed_phrase/view.cljs

@@ -96,7 +96,7 @@
        (take 7)))
 
 (defn recovery-phrase-screen
-  [{:keys [keypair title recovering-keypair? render-controls]}]
+  [{:keys [banner-offset initial-insets keypair title recovering-keypair? render-controls]}]
   (reagent/with-let [keyboard-shown?           (reagent/atom false)
                      keyboard-show-listener    (.addListener rn/keyboard
                                                              "keyboardDidShow"
@@ -114,7 +114,8 @@
                      seed-phrase               (reagent/atom "")
                      on-change-seed-phrase     (fn [new-phrase]
                                                  (when @invalid-seed-phrase?
-                                                   (reset! invalid-seed-phrase? false)
+                                                   (reset! invalid-seed-phrase? false))
+                                                 (when @incorrect-seed-phrase?
                                                    (reset! incorrect-seed-phrase? false))
                                                  (reset! seed-phrase new-phrase))
                      on-submit                 (fn []
@@ -161,7 +162,10 @@
           button-disabled?         (or error-state?
                                        (not (constants/seed-phrase-valid-length word-count))
                                        (not all-words-valid?))]
-      [:<>
+      [rn/view
+       {:style (style/recovery-phrase-container {:insets          initial-insets
+                                                 :banner-offset   banner-offset
+                                                 :keyboard-shown? @keyboard-shown?})}
        [recovery-phrase-form
         {:title                 title
          :keypair               keypair
@@ -172,18 +176,18 @@
         (if (fn? render-controls)
           (render-controls {:submit-disabled?          button-disabled?
                             :keyboard-shown?           @keyboard-shown?
-                            :container-style           (style/continue-button @keyboard-shown?)
+                            :container-style           style/continue-button
                             :prepare-seed-phrase       secure-clean-seed-phrase
                             :focus-input               focus-input
                             :seed-phrase               (security/mask-data @seed-phrase)
                             :set-incorrect-seed-phrase set-incorrect-seed-phrase})
           [quo/button
-           {:container-style (style/continue-button @keyboard-shown?)
+           {:container-style style/continue-button
             :type            :primary
             :disabled?       button-disabled?
             :on-press        on-submit}
            (i18n/label :t/continue)])]
-       (when @keyboard-shown?
+       (when (or @keyboard-shown? error-state?)
          [rn/view {:style style/keyboard-container}
           [quo/predictive-keyboard
            {:type     suggestions-state
@@ -197,7 +201,8 @@
 
 (defn screen
   [{:keys [initial-insets title keypair navigation-icon recovering-keypair? render-controls]}]
-  (let [{navigation-bar-top :top} initial-insets]
+  (let [{navigation-bar-top :top} initial-insets
+        banner-offset             (rf/sub [:alert-banners/top-margin])]
     [rn/view {:style style/full-layout}
      [rn/keyboard-avoiding-view {:style style/page-container}
       [quo/page-nav
@@ -210,6 +215,8 @@
        {:title               title
         :keypair             keypair
         :render-controls     render-controls
+        :banner-offset       banner-offset
+        :initial-insets      initial-insets
         :recovering-keypair? recovering-keypair?}]]]))
 
 (defn view

src/status_im/common/floating_button_page/view.cljs

@@ -58,7 +58,7 @@
 
 (defn view
   [{:keys [header footer customization-color footer-container-padding header-container-style
-           gradient-cover? keyboard-should-persist-taps]
+           content-container-style gradient-cover? keyboard-should-persist-taps]
     :or   {footer-container-padding (safe-area/get-top)}}
    & children]
   (reagent/with-let [scroll-view-ref              (atom nil)
@@ -110,7 +110,9 @@
           :always-bounce-vertical          @keyboard-did-show?
           :shows-vertical-scroll-indicator false
           :keyboard-should-persist-taps    keyboard-should-persist-taps}
-         (into [rn/view {:on-layout set-content-container-height}]
+         (into [rn/view
+                {:style     content-container-style
+                 :on-layout set-content-container-height}]
                children)]
         [rn/keyboard-avoiding-view
          {:style                    style/keyboard-avoiding-view

src/status_im/common/password_authentication/view.cljs

@@ -31,10 +31,10 @@
            :on-change-text #(reset! entered-password %)}]
          (when (not-empty error)
            [quo/info-message
-            {:type         :error
-             :size         :default
-             :icon         :i/info
-             :containstyle {:margin-top 8}}
+            {:status          :error
+             :size            :default
+             :icon            :i/info
+             :container-style {:margin-top 8}}
             (i18n/label :t/oops-wrong-password)])
          [quo/button
           {:container-style {:margin-bottom 12 :margin-top 40}

src/status_im/common/peer_stats/events.cljs

@@ -0,0 +1,17 @@
+(ns status-im.common.peer-stats.events
+  (:require
+    [taoensso.timbre :as log]
+    [utils.re-frame :as rf]))
+
+(rf/reg-event-fx :peer-stats/get-count
+ (fn []
+   {:fx [[:json-rpc/call
+          [{:method     :wakuext_peers
+            :on-success [:peer-stats/get-count-success]
+            :on-error   (fn [error]
+                          (log/error "failed to fetch wakuv2 peer count"
+                                     {:error error}))}]]]}))
+
+(rf/reg-event-fx :peer-stats/get-count-success
+ (fn [{:keys [db]} [response]]
+   {:db (assoc db :peer-stats/count (count response))}))

src/status_im/common/raw_data_block/style.cljs

@@ -2,12 +2,13 @@
   (:require [quo.foundations.colors :as colors]))
 
 (def container
-  {:flex            1
-   :padding         10
-   :margin-vertical 10.5
-   :border-width    1
-   :border-color    colors/neutral-10
-   :border-radius   16})
+  {:flex          1
+   :padding       10
+   :margin-top    10.5
+   :margin-bottom 0
+   :border-width  1
+   :border-color  colors/neutral-10
+   :border-radius 16})
 
 (def content
   {:padding-bottom 20})

src/status_im/common/raw_data_block/view.cljs

@@ -4,7 +4,7 @@
             [status-im.common.raw-data-block.style :as style]))
 
 (defn view
-  [{:keys [data]}]
+  [data]
   [rn/scroll-view
    {:style                   style/container
     :content-container-style style/content}

src/status_im/common/signals/events.cljs

@@ -10,7 +10,6 @@
     [status-im.contexts.communities.discover.events]
     [status-im.contexts.profile.push-notifications.local.events :as local-notifications]
     [taoensso.timbre :as log]
-    [utils.debounce :as debounce]
     [utils.re-frame :as rf]
     [utils.transforms :as transforms]))
 
@@ -20,17 +19,10 @@
         peers-count      (count peers-summary)]
     (rf/merge cofx
               {:db (assoc db
-                          :peers-summary peers-summary
-                          :peers-count   peers-count)}
+                          :peers-summary    peers-summary
+                          :peer-stats/count peers-count)}
               (visibility-status-updates/peers-summary-change peers-count))))
 
-(rf/reg-event-fx :wakuv2-peer-stats
- (fn [{:keys [db]} [^js peer-stats-js]]
-   (let [peer-stats (transforms/js->clj peer-stats-js)]
-     {:db (assoc db
-                 :peer-stats  peer-stats
-                 :peers-count (count (:peers peer-stats)))})))
-
 (rf/defn process
   {:events [:signals/signal-received]}
   [{:keys [db] :as cofx} event-str]
@@ -46,9 +38,6 @@
       "wallet"
       {:fx [[:dispatch [:wallet/signal-received event-js]]]}
 
-      "wakuv2.peerstats"
-      (debounce/debounce-and-dispatch [:wakuv2-peer-stats event-js] 1000)
-
       "envelope.sent"
       (messages.transport/update-envelopes-status
        cofx

src/status_im/common/standard_authentication/enter_password/view.cljs

@@ -33,6 +33,7 @@
           :size                24}]]
        [password-input/view
         {:on-press-biometrics on-press-biometrics
+         :blur?               true
          :processing          processing
          :error               error
          :default-password    password

src/status_im/common/standard_authentication/events.cljs

@@ -20,7 +20,7 @@
 (rf/reg-event-fx :standard-auth/authorize authorize)
 
 (defn authorize-with-biometric
-  [_ [{:keys [on-auth-success on-auth-fail] :as args}]]
+  [_ [{:keys [on-auth-success on-auth-fail on-close] :as args}]]
   (let [args-with-biometric-btn
         (assoc args
                :on-press-biometric
@@ -31,7 +31,9 @@
             {:prompt-message (i18n/label :t/biometric-auth-confirm-message)
              :on-cancel      #(rf/dispatch [:standard-auth/authorize-with-password
                                             args-with-biometric-btn])
-             :on-success     #(rf/dispatch [:standard-auth/on-biometric-success on-auth-success])
+             :on-success     (fn []
+                               (rf/dispatch [:standard-auth/on-biometric-success on-auth-success])
+                               (rf/dispatch [:standard-auth/close on-close]))
              :on-fail        (fn [err]
                                (rf/dispatch [:standard-auth/authorize-with-password
                                              args-with-biometric-btn])
@@ -45,6 +47,7 @@
   [{:keys [db]} [on-auth-success]]
   (let [key-uid (get-in db [:profile/profile :key-uid])]
     {:fx [[:keychain/get-user-password [key-uid on-auth-success]]
+          [:dispatch [:standard-auth/set-success true]]
           [:dispatch [:standard-auth/reset-login-password]]]}))
 
 (schema/=> on-biometric-success events-schema/?on-biometric-success)
@@ -71,6 +74,7 @@
           (fn [password]
             (let [sha3-pwd                 (security/hash-masked-password password)
                   on-auth-success-callback #(on-auth-success sha3-pwd)]
+              (rf/dispatch [:standard-auth/set-success true])
               (rf/dispatch [:standard-auth/reset-login-password])
               (if has-partially-operable-accounts?
                 (rf/dispatch [:wallet/make-partially-operable-accounts-fully-operable
@@ -89,10 +93,7 @@
   {:fx [[:dispatch [:standard-auth/reset-login-password]]
         [:dispatch
          [:show-bottom-sheet
-          {:on-close (fn []
-                       (rf/dispatch [:standard-auth/reset-login-password])
-                       (when on-close
-                         (on-close)))
+          {:on-close #(rf/dispatch [:standard-auth/close on-close])
            :theme    theme
            :shell?   blur?
            :content  #(bottom-sheet-password-view args)}]]]})
@@ -104,3 +105,23 @@
  :standard-auth/reset-login-password
  (fn [{:keys [db]}]
    {:db (update db :profile/login dissoc :password :error)}))
+
+(rf/reg-fx
+ :standard-auth/on-close
+ (fn [{:keys [on-close success?]}]
+   (when on-close
+     (on-close success?))))
+
+(rf/reg-event-fx
+ :standard-auth/close
+ (fn [{:keys [db]} [on-close]]
+   {:db (assoc-in db [:profile/login :success?] false)
+    :fx [[:dispatch [:standard-auth/reset-login-password]]
+         [:standard-auth/on-close
+          {:on-close on-close
+           :success? (get-in db [:profile/login :success?])}]]}))
+
+(rf/reg-event-fx
+ :standard-auth/set-success
+ (fn [{:keys [db]} [success?]]
+   {:db (assoc-in db [:profile/login :success?] success?)}))

src/status_im/common/standard_authentication/password_input/view.cljs

@@ -16,8 +16,7 @@
   [error]
   (if (and (some? error)
            (or (= error "file is not a database")
-               (string/starts-with? error "failed to set ")
-               (string/starts-with? error "Failed")))
+               (string/starts-with? (string/lower-case error) "failed")))
     (i18n/label :t/oops-wrong-password)
     error))
 
@@ -34,9 +33,9 @@
                   [theme])]
     [rn/view {:style style/error-message}
      [quo/info-message
-      {:type :error
-       :size :default
-       :icon :i/info}
+      {:status :error
+       :size   :default
+       :icon   :i/info}
       error-message]
      [rn/pressable
       {:hit-slop {:top 6 :bottom 20 :left 0 :right 0}

src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs

@@ -16,7 +16,8 @@
         on-complete     (rn/use-callback
                          (fn [reset]
                            (rf/dispatch [:standard-auth/authorize
-                                         {:on-close              #(js/setTimeout reset 200)
+                                         {:on-close              (fn [success?]
+                                                                   (js/setTimeout #(reset success?) 200))
                                           :auth-button-icon-left auth-button-icon-left
                                           :theme                 theme
                                           :blur?                 blur?

src/status_im/common/validation/keypair.cljs

@@ -14,10 +14,12 @@
   (> (-> s str string/trim count) constants/key-pair-name-max-length))
 
 (defn validation-keypair-name
-  [s]
+  [s existing-keypair-names]
   (cond
     (string/blank? s)                      nil
     (validators/has-emojis? s)             (i18n/label :t/key-name-error-emoji)
     (validators/has-special-characters? s) (i18n/label :t/key-name-error-special-char)
-    (keypair-too-short? s)                 (i18n/label :t/your-key-pair-name-is-too-short)
-    (keypair-too-long? s)                  (i18n/label :t/your-key-pair-name-is-too-long)))
+    (keypair-too-short? s)                 (i18n/label :t/key-name-error-too-short
+                                                       {:count constants/key-pair-name-min-length})
+    (keypair-too-long? s)                  (i18n/label :t/your-key-pair-name-is-too-long)
+    (contains? existing-keypair-names s)   (i18n/label :t/key-name-error-taken)))

src/status_im/common/validation/keypair_test.cljs

@@ -2,6 +2,7 @@
   (:require
     [cljs.test :refer-macros [deftest are]]
     [status-im.common.validation.keypair :as keypair-validator]
+    [status-im.constants :as constants]
     [utils.i18n :as i18n]))
 
 (deftest keypair-name-too-short-test
@@ -18,10 +19,12 @@
 
 (deftest validation-keypair-name-test
   (are [arg expected]
-   (= (keypair-validator/validation-keypair-name arg) expected)
+   (= (keypair-validator/validation-keypair-name arg #{"Collection"}) expected)
    nil                         nil
    ""                          nil
    "name !"                    (i18n/label :t/key-name-error-special-char)
    "Hello 😊"                  (i18n/label :t/key-name-error-emoji)
-   "abc"                       (i18n/label :t/your-key-pair-name-is-too-short)
+   "abc"                       (i18n/label :t/key-name-error-too-short
+                                           {:count constants/key-pair-name-min-length})
+   "Collection"                (i18n/label :t/key-name-error-taken)
    (apply str (repeat 25 "a")) (i18n/label :t/your-key-pair-name-is-too-long)))

src/status_im/constants.cljs

@@ -268,18 +268,22 @@
 (def ^:const wallet-connect-personal-sign-method "personal_sign")
 (def ^:const wallet-connect-eth-sign-method "eth_sign")
 (def ^:const wallet-connect-eth-send-transaction-method "eth_sendTransaction")
+(def ^:const wallet-connect-eth-sign-transaction-method "eth_signTransaction")
 (def ^:const wallet-connect-eth-sign-typed-method "eth_signTypedData")
 (def ^:const wallet-connect-eth-sign-typed-v4-method "eth_signTypedData_v4")
 (def ^:const wallet-connect-supported-methods
   #{wallet-connect-personal-sign-method
     wallet-connect-eth-sign-method
     wallet-connect-eth-send-transaction-method
+    wallet-connect-eth-sign-transaction-method
     wallet-connect-eth-sign-typed-method
     wallet-connect-eth-sign-typed-v4-method})
 (def ^:const wallet-connect-supported-events #{"accountsChanged" "chainChanged"})
 (def ^:const wallet-connect-session-proposal-event "session_proposal")
 (def ^:const wallet-connect-session-request-event "session_request")
 
+(def ^:const transaction-pending-type-wallet-connect-transfer "WalletConnectTransfer")
+
 (def ^:const dapp-permission-contact-code "contact-code")
 (def ^:const dapp-permission-web3 "web3")
 (def ^:const dapp-permission-qr-code "qr-code")
@@ -492,11 +496,18 @@
 (def ^:const optimism-abbreviated-name "Oeth.")
 (def ^:const arbitrum-abbreviated-name "Arb1.")
 
+(def ^:const mainnet-full-name "Mainnet")
+(def ^:const optimism-full-name "Optimism")
+(def ^:const arbitrum-full-name "Arbitrum")
+
 (def ^:const mainnet-network-name :mainnet)
 (def ^:const ethereum-network-name :ethereum)
 (def ^:const optimism-network-name :optimism)
 (def ^:const arbitrum-network-name :arbitrum)
 
+(def ^:const layer-1-network 1)
+(def ^:const layer-2-network 2)
+
 (def ^:const default-network-names [mainnet-network-name optimism-network-name arbitrum-network-name])
 
 (def ^:const default-network-count (count default-network-names))
@@ -542,3 +553,10 @@
 (def ^:const community-joined-notification-type "communityJoined")
 
 (def ^:const default-telemetry-server-url "https://telemetry.status.im")
+
+(def ^:const contact-item-height 56)
+
+(def ^:const slippages [0.1 0.5 1])
+(def ^:const default-slippage 0.5)
+(def ^:const max-recommended-slippage 5)
+(def ^:const max-slippage-decimal-places 2)

src/status_im/contexts/chat/group_create/view.cljs

@@ -105,10 +105,10 @@
         :max-length      constants/max-group-chat-name-length}]
       (when error-message
         [quo/info-message
-         {:type  :error
-          :icon  :i/info
-          :size  :default
-          :style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
+         {:status          :error
+          :icon            :i/info
+          :size            :default
+          :container-style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
          error-message])
       [quo/divider-line]
       [rn/view

src/status_im/contexts/chat/home/chat_list_item/view.cljs

@@ -173,20 +173,21 @@
 
 (defn avatar-view
   [{:keys [contact chat-id full-name color muted? image]}]
-  (if contact ; `contact` is passed when it's not a group chat
-    (let [online?    (rf/sub [:visibility-status-updates/online? chat-id])
-          photo-path (rf/sub [:chats/photo-path chat-id])]
-      [quo/user-avatar
-       (cond-> {:full-name       full-name
-                :size            :small
-                :online?         online?
-                :profile-picture photo-path}
-         muted?
-         (assoc :ring? false))])
-    [quo/group-avatar
-     {:customization-color color
-      :picture             (when image {:uri image})
-      :size                :size-32}]))
+  [rn/view {:style {:justify-content :center}}
+   (if contact ; `contact` is passed when it's not a group chat
+     (let [online?    (rf/sub [:visibility-status-updates/online? chat-id])
+           photo-path (rf/sub [:chats/photo-path chat-id])]
+       [quo/user-avatar
+        (cond-> {:full-name       full-name
+                 :size            :small
+                 :online?         online?
+                 :profile-picture photo-path}
+          muted?
+          (assoc :ring? false))])
+     [quo/group-avatar
+      {:customization-color color
+       :picture             (when image {:uri image})
+       :size                :size-32}])])
 
 (defn- notification-layout
   [child]

src/status_im/contexts/chat/home/view.cljs

@@ -66,7 +66,8 @@
                                              (chat-list-item/chat-list-item item theme))
         :scroll-event-throttle             8
         :content-container-style           {:padding-bottom
-                                            jump-to.constants/floating-shell-button-height}
+                                            jump-to.constants/floating-shell-button-height
+                                            :padding-top 8}
         :on-scroll                         #(common.banner/set-scroll-shared-value
                                              {:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
                                               :shared-value scroll-shared-value})}])))

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -98,9 +98,8 @@
                               window-height
                               loading-indicator-page-loading-height)]
     [rn/view {:padding-top top-spacing}
-     ;; Only use animated loading skeleton for ios
-     ;; https://github.com/status-im/status-mobile/issues/17426
-     [quo/skeleton-list (skeleton-list-props :messages parent-height platform/ios?)]]))
+     ;; Don't use animated loading skeleton https://github.com/status-im/status-mobile/issues/17426
+     [quo/skeleton-list (skeleton-list-props :messages parent-height false)]]))
 
 (defn header-height
   [{:keys [insets able-to-send-message? images reply edit link-previews? input-content-height]}]

src/status_im/contexts/chat/messenger/messages/transport/events.cljs

@@ -21,6 +21,7 @@
     [status-im.contexts.chat.messenger.messages.pin.events :as messages.pin]
     [status-im.contexts.communities.events :as communities]
     [status-im.contexts.shell.activity-center.events :as activity-center]
+    [status-im.contexts.wallet.data-store :as wallet.data-store]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
 
@@ -54,8 +55,11 @@
         ^js cleared-histories          (.-clearedHistories response-js)
         ^js identity-images            (.-identityImages response-js)
         ^js accounts                   (.-accounts response-js)
+        ^js keypairs                   (.-keypairs response-js)
         ^js ens-username-details-js    (.-ensUsernameDetails response-js)
         ^js customization-color-js     (.-customizationColor response-js)
+        ^js saved-addresses-js         (.-savedAddresses response-js)
+        ^js watch-only-accounts        (.-watchOnlyAccounts response-js)
         sync-handler                   (when-not process-async process-response)]
     (cond
 
@@ -177,6 +181,22 @@
         (rf/merge cofx
                   (process-next response-js sync-handler)))
 
+      (seq watch-only-accounts)
+      (do
+        (js-delete response-js "watchOnlyAccounts")
+        (rf/merge cofx
+                  {:fx [[:dispatch
+                         [:wallet/reconcile-watch-only-accounts
+                          (types/js->clj watch-only-accounts)]]]}
+                  (process-next response-js sync-handler)))
+
+      (seq keypairs)
+      (do
+        (js-delete response-js "keypairs")
+        (rf/merge cofx
+                  {:fx [[:dispatch [:wallet/reconcile-keypairs (types/js->clj keypairs)]]]}
+                  (process-next response-js sync-handler)))
+
       (seq settings)
       (do
         (js-delete response-js "settings")
@@ -199,6 +219,13 @@
                   (models.visibility-status-updates/sync-visibility-status-update
                    current-visibility-status-clj)))
 
+      (seq saved-addresses-js)
+      (let [saved-addresses (-> saved-addresses-js types/js->clj wallet.data-store/rpc->saved-addresses)]
+        (js-delete response-js "savedAddresses")
+        (rf/merge cofx
+                  {:fx [[:dispatch [:wallet/reconcile-saved-addresses saved-addresses]]]}
+                  (process-next response-js sync-handler)))
+
       (seq ens-username-details-js)
       (let [ens-username-details-clj (types/js->clj ens-username-details-js)]
         (js-delete response-js "ensUsernameDetails")

src/status_im/contexts/communities/actions/channel_view_details/view.cljs

@@ -6,32 +6,44 @@
             [status-im.common.contact-list-item.view :as contact-list-item]
             [status-im.common.contact-list.view :as contact-list]
             [status-im.common.home.actions.view :as home.actions]
+            [status-im.constants :as constants]
             [status-im.contexts.communities.actions.channel-view-details.style :as style]
             [status-im.feature-flags :as ff]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn- contact-item
-  [public-key]
-  (let [show-profile-actions                         #(rf/dispatch
-                                                       [:show-bottom-sheet
-                                                        {:content (fn [] [home.actions/contact-actions
-                                                                          {:public-key public-key}])}])
-        [primary-name secondary-name]                (rf/sub [:contacts/contact-two-names-by-identity
-                                                              public-key])
-        {:keys [ens-verified added? compressed-key]} (rf/sub [:contacts/contact-by-address public-key])
-        theme                                        (quo.theme/use-theme)]
+  [public-key _ _ {:keys [theme]}]
+  (let [show-profile-actions     (rn/use-callback
+                                  (fn []
+                                    (rf/dispatch
+                                     [:show-bottom-sheet
+                                      {:content (fn [] [home.actions/contact-actions
+                                                        {:public-key public-key}])}]))
+                                  [public-key])
+        on-press                 (rn/use-callback
+                                  (fn []
+                                    (rf/dispatch [:chat.ui/show-profile public-key]))
+                                  [public-key])
+        [primary-name
+         secondary-name]         (rf/sub [:contacts/contact-two-names-by-identity public-key])
+        {:keys [ens-verified
+                added?
+                compressed-key]} (rf/sub [:contacts/contact-by-address public-key])]
     [contact-list-item/contact-list-item
-     {:on-press      #(rf/dispatch [:chat.ui/show-profile public-key])
+     {:on-press      on-press
       :on-long-press show-profile-actions
       :accessory     {:type     :options
                       :on-press show-profile-actions}}
-     {:primary-name   primary-name
-      :secondary-name secondary-name
-      :compressed-key compressed-key
-      :public-key     public-key
-      :ens-verified   ens-verified
-      :added?         added?}
+     {:primary-name    primary-name
+      :secondary-name  secondary-name
+      :compressed-key  compressed-key
+      :public-key      public-key
+      :ens-verified    ens-verified
+      :added?          added?
+      ;; We hardcode the height of the container to match exactly the height
+      ;; used in the `get-item-layout` function.
+      :container-style {:height constants/contact-item-height}}
      theme]))
 
 (defn- footer
@@ -40,10 +52,12 @@
 
 (defn- get-item-layout
   [_ index]
-  #js {:length 200 :offset (* 200 index) :index index})
+  #js {:length constants/contact-item-height
+       :offset (* constants/contact-item-height index)
+       :index  index})
 
 (defn- members
-  [items]
+  [items theme]
   [rn/section-list
    {:key-fn                            :public-key
     :content-container-style           {:padding-bottom 20}
@@ -53,70 +67,70 @@
     :sticky-section-headers-enabled    false
     :render-section-header-fn          contact-list/contacts-section-header
     :render-section-footer-fn          footer
+    :render-data                       {:theme theme}
     :render-fn                         contact-item
-    :scroll-event-throttle             8}])
+    :scroll-event-throttle             32}])
 
 (defn view
-  [_args]
-  (fn []
-    (let [{:keys [chat-id community-id]} (rf/sub [:get-screen-params
-                                                  :screen/chat.view-channel-members-and-details])
-          {:keys [description chat-name emoji muted chat-type color]
-           :as   chat}                   (rf/sub [:chats/chat-by-id chat-id])
-          pins-count                     (rf/sub [:chats/pin-messages-count chat-id])
-          items                          (rf/sub [:communities/sorted-community-members-section-list
-                                                  community-id])
-          theme                          (quo.theme/use-theme)]
-      (rn/use-mount (fn []
-                      (rf/dispatch [:pin-message/load-pin-messages chat-id])))
-      [:<>
-       (when (ff/enabled? ::ff/shell.jump-to)
-         [quo/floating-shell-button
-          {:jump-to {:on-press            #(rf/dispatch [:shell/navigate-to-jump-to])
-                     :customization-color color
-                     :label               (i18n/label :t/jump-to)}}
-          style/floating-shell-button])
-       [quo/gradient-cover {:customization-color color :opacity 0.4}]
-       [quo/page-nav
-        {:background :blur
-         :icon-name  :i/arrow-left
-         :on-press   #(rf/dispatch [:navigate-back])
-         :right-side [{:icon-name :i/options
-                       :on-press  #(rf/dispatch [:show-bottom-sheet
-                                                 {:content (fn [] [home.actions/chat-actions
-                                                                   chat
-                                                                   false
-                                                                   true])}])}]}]
-       [quo/text-combinations
-        {:container-style                 style/text-combinations
-         :title                           [quo/channel-name
-                                           {:channel-name chat-name
-                                            :unlocked?    true}]
-         :theme                           theme
-         :emoji                           (when (not (string/blank? emoji)) (string/trim emoji))
-         :customization-color             color
-         :title-accessibility-label       :welcome-title
-         :description                     description
-         :description-accessibility-label :welcome-sub-title}]
-       [rn/view {:style style/wrapper}
-        [rn/view
-         {:style style/channel-actions-wrapper}
-         [quo/channel-actions
-          {:actions
-           [{:big?                true
-             :label               (i18n/label :t/pinned-messages-2)
-             :customization-color color
-             :icon                :i/pin
-             :counter-value       pins-count
-             :on-press            (fn []
-                                    (rf/dispatch [:dismiss-keyboard])
-                                    (rf/dispatch [:pin-message/show-pins-bottom-sheet
-                                                  chat-id]))}
-            {:label               (if muted (i18n/label :t/unmute-channel) (i18n/label :t/mute-channel))
-             :customization-color color
-             :icon                (if muted :i/muted :i/activity-center)
-             :on-press            (fn []
-                                    (if muted
-                                      (home.actions/unmute-chat-action chat-id)
-                                      (home.actions/mute-chat-action chat-id chat-type muted)))}]}]]]
-       [members items color]])))
+  []
+  (let [{:keys [chat-id community-id]} (rf/sub [:get-screen-params
+                                                :screen/chat.view-channel-members-and-details])
+        {:keys [description chat-name emoji muted chat-type color]
+         :as   chat}                   (rf/sub [:chats/chat-by-id chat-id])
+        pins-count                     (rf/sub [:chats/pin-messages-count chat-id])
+        items                          (rf/sub [:communities/sorted-community-members-section-list
+                                                community-id chat-id])
+        theme                          (quo.theme/use-theme)]
+    (rn/use-mount (fn []
+                    (rf/dispatch [:pin-message/load-pin-messages chat-id])))
+    [:<>
+     (when (ff/enabled? ::ff/shell.jump-to)
+       [quo/floating-shell-button
+        {:jump-to {:on-press            #(rf/dispatch [:shell/navigate-to-jump-to])
+                   :customization-color color
+                   :label               (i18n/label :t/jump-to)}}
+        style/floating-shell-button])
+     [quo/gradient-cover {:customization-color color :opacity 0.4}]
+     [quo/page-nav
+      {:background :blur
+       :icon-name  :i/arrow-left
+       :on-press   #(rf/dispatch [:navigate-back])
+       :right-side [{:icon-name :i/options
+                     :on-press  #(rf/dispatch [:show-bottom-sheet
+                                               {:content (fn [] [home.actions/chat-actions
+                                                                 chat
+                                                                 false
+                                                                 true])}])}]}]
+     [quo/text-combinations
+      {:container-style                 style/text-combinations
+       :title                           [quo/channel-name
+                                         {:channel-name chat-name
+                                          :unlocked?    true}]
+       :theme                           theme
+       :emoji                           (when (not (string/blank? emoji)) (string/trim emoji))
+       :customization-color             color
+       :title-accessibility-label       :welcome-title
+       :description                     description
+       :description-accessibility-label :welcome-sub-title}]
+     [rn/view {:style style/wrapper}
+      [rn/view
+       {:style style/channel-actions-wrapper}
+       [quo/channel-actions
+        {:actions
+         [{:big?                true
+           :label               (i18n/label :t/pinned-messages-2)
+           :customization-color color
+           :icon                :i/pin
+           :counter-value       pins-count
+           :on-press            (fn []
+                                  (rf/dispatch [:dismiss-keyboard])
+                                  (rf/dispatch [:pin-message/show-pins-bottom-sheet
+                                                chat-id]))}
+          {:label               (if muted (i18n/label :t/unmute-channel) (i18n/label :t/mute-channel))
+           :customization-color color
+           :icon                (if muted :i/muted :i/activity-center)
+           :on-press            (fn []
+                                  (if muted
+                                    (home.actions/unmute-chat-action chat-id)
+                                    (home.actions/mute-chat-action chat-id chat-type muted)))}]}]]]
+     [members items theme]]))

src/status_im/contexts/communities/events.cljs

@@ -230,7 +230,7 @@
   (when community
     {:db (update db :communities/fetching-communities dissoc community-id)
      :fx [[:dispatch [:communities/handle-community community]]
-          [:dispatch [:communities/update-last-opened-at community-id]]
+          [:dispatch [:chat.ui/spectate-community community-id]]
           [:dispatch
            [:chat.ui/cache-link-preview-data (link-preview.events/community-link community-id)
             community]]]}))
@@ -251,7 +251,7 @@
               :error err}))
 
 (defn fetch-community
-  [{:keys [db]} [{:keys [community-id update-last-opened-at?]}]]
+  [{:keys [db]} [{:keys [community-id]}]]
   (when (and community-id
              (not (get-in db [:communities community-id]))
              (not (get-in db [:communities/fetching-communities community-id])))
@@ -262,11 +262,8 @@
                                     :WaitForResponse true}]
                       :on-success (fn [community]
                                     (if community
-                                      (do (when update-last-opened-at?
-                                            (rf/dispatch [:communities/update-last-opened-at
-                                                          community-id]))
-                                          (rf/dispatch [:chat.ui/community-fetched community-id
-                                                        community]))
+                                      (rf/dispatch [:chat.ui/community-fetched community-id
+                                                    community])
                                       (failed-to-fetch-community
                                        community-id
                                        "community wasn't found at the store node")))
@@ -280,8 +277,7 @@
      [:schema
       [:vector
        [:map {:closed true}
-        [:community-id {:optional true} :string]
-        [:update-last-opened-at? {:optional true} [:maybe :boolean]]]]]]]
+        [:community-id {:optional true} :string]]]]]]
    [:maybe
     [:map
      [:db map?]
@@ -340,10 +336,9 @@
       (rf/merge
        cofx
        {:fx [[:dispatch [:chat.ui/spectate-community community-id]]
+             [:dispatch [:communities/update-last-opened-at community-id]]
              [:dispatch
-              [:communities/fetch-community
-               {:community-id           community-id
-                :update-last-opened-at? true}]]
+              [:communities/fetch-community {:community-id community-id}]]
              [:dispatch [:navigate-to :community-overview community-id]]
              (when (get-in db [:communities community-id :joined])
                [:dispatch
@@ -358,10 +353,7 @@
   (let [community-id (or community-id (get-in db [:chats chat-id :community-id]))]
     (merge
      {:fx [(when community-id
-             [:dispatch
-              [:communities/fetch-community
-               {:community-id           community-id
-                :update-last-opened-at? true}]])
+             [:dispatch [:communities/fetch-community {:community-id community-id}]])
            (if pop-to-root?
              [:dispatch [:chat/pop-to-root-and-navigate-to-chat chat-id]]
              [:dispatch

src/status_im/contexts/communities/events_test.cljs

@@ -49,7 +49,7 @@
         (testing "dispatch fxs"
           (is (match?
                {:fx [[:dispatch [:communities/handle-community {:id community-id}]]
-                     [:dispatch [:communities/update-last-opened-at community-id]]
+                     [:dispatch [:chat.ui/spectate-community community-id]]
                      [:dispatch
                       [:chat.ui/cache-link-preview-data "community-link+community-id"
                        {:id community-id}]]]}
@@ -60,7 +60,7 @@
         (testing "dispatch fxs, do not spectate community"
           (is (match?
                {:fx [[:dispatch [:communities/handle-community {:id community-id}]]
-                     [:dispatch [:communities/update-last-opened-at community-id]]
+                     [:dispatch [:chat.ui/spectate-community community-id]]
                      [:dispatch
                       [:chat.ui/cache-link-preview-data "community-link+community-id"
                        {:id community-id}]]]}
@@ -71,7 +71,7 @@
         (testing "dispatch fxs, do not spectate community"
           (is (match?
                {:fx [[:dispatch [:communities/handle-community {:id community-id}]]
-                     [:dispatch [:communities/update-last-opened-at community-id]]
+                     [:dispatch [:chat.ui/spectate-community community-id]]
                      [:dispatch
                       [:chat.ui/cache-link-preview-data "community-link+community-id"
                        {:id community-id}]]]}

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

@@ -4,6 +4,7 @@
     re-frame.db
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
+    [status-im.common.check-before-syncing.view :as check-before-syncing]
     [status-im.common.not-implemented :as not-implemented]
     [status-im.common.resources :as resources]
     [status-im.config :as config]
@@ -25,6 +26,14 @@
    [:onboarding/navigate-to-sign-in-by-syncing]
    1000))
 
+(defn- show-check-before-syncing
+  []
+  (rf/dispatch
+   [:show-bottom-sheet
+    {:content (fn [] [check-before-syncing/view
+                      {:on-submit navigate-to-sign-in-by-syncing}])
+     :shell?  true}]))
+
 (defn- navigate-to-sign-in-by-seed-phrase
   [create-profile?]
   (rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase
@@ -62,7 +71,7 @@
     :accessibility-label :scan-sync-code-option-card
     :image               (resources/get-image :generate-keys)
     :max-height          (option-card-max-height window-height)
-    :on-press            navigate-to-sign-in-by-syncing}])
+    :on-press            show-check-before-syncing}])
 
 (defn sign-in-options
   [sign-in-type]

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

@@ -38,14 +38,11 @@
    [rn/view {:style style/info-message}
     (when shown
       [quo/info-message
-       {:type       status
-        :size       :default
-        :icon       (if (= status :success) :i/positive-state :i/info)
-        :text-color (when (= status :default)
-                      colors/white-70-blur)
-        :icon-color (when (= status :default)
-                      colors/white-70-blur)
-        :style      {}}
+       {:status status
+        :size   :default
+        :icon   (if (= status :success) :i/positive-state :i/info)
+        :color  (when (= status :default)
+                  colors/white-70-blur)}
        text])]])
 
 (defn password-inputs

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

@@ -158,12 +158,11 @@
                                     :on-change-text on-change-text}}]]
 
            [quo/info-message
-            {:type       info-type
-             :size       :default
-             :icon       (if valid-name? :i/positive-state :i/info)
-             :text-color (when (= :default info-type) colors/white-70-blur)
-             :icon-color (when (= :default info-type) colors/white-70-blur)
-             :style      style/info-message}
+            {:status          info-type
+             :size            :default
+             :icon            (if valid-name? :i/positive-state :i/info)
+             :color           (when (= :default info-type) colors/white-70-blur)
+             :container-style style/info-message}
             info-message]
            [quo/text
             {:size   :paragraph-2

src/status_im/contexts/onboarding/events.cljs

@@ -89,7 +89,7 @@
     (merge
      {:db (assoc db :profile/profiles-overview multiaccounts)}
      (when-not (seq multiaccounts)
-       {:set-root :screen/onboarding.intro}))))
+       {:dispatch [:init-root :screen/onboarding.intro]}))))
 
 (rf/defn password-set
   {:events [:onboarding/password-set]}

src/status_im/contexts/preview/quo/buttons/slide_button.cljs

@@ -1,7 +1,6 @@
 (ns status-im.contexts.preview.quo.buttons.slide-button
   (:require
     [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im.contexts.preview.quo.preview :as preview]))
 
@@ -18,41 +17,36 @@
     :type :boolean}
    {:key  :blur?
     :type :boolean}
+   {:key  :keep-at-end-after-slide?
+    :type :boolean}
    (preview/customization-color-option {:key :color})])
 
 (defn f-view
   []
-  (let [state     (reagent/atom {:disabled? false
-                                 :color     :blue
-                                 :size      :size-48})
-        color     (reagent/cursor state [:color])
-        blur?     (reagent/cursor state [:blur?])
-        complete? (reagent/atom false)]
+  (let [state                    (reagent/atom {:disabled?                false
+                                                :color                    :blue
+                                                :size                     :size-48
+                                                :keep-at-end-after-slide? false})
+        color                    (reagent/cursor state [:color])
+        blur?                    (reagent/cursor state [:blur?])
+        keep-at-end-after-slide? (reagent/cursor state [:keep-at-end-after-slide?])]
     (fn []
-      (rn/use-effect (fn []
-                       (reset! complete? true)
-                       (js/setTimeout #(reset! complete? false) 50))
-                     [(:size @state)])
       [preview/preview-container
        {:state                     state
         :descriptor                descriptor
         :component-container-style (when-not @blur? (:align-items :center))
         :blur?                     @blur?
         :show-blur-background?     true}
-       (if (not @complete?)
-         [quo/slide-button
-          {:track-text          "We gotta slide"
-           :track-icon          :face-id
-           :customization-color @color
-           :size                (:size @state)
-           :disabled?           (:disabled? @state)
-           :blur?               @blur?
-           :type                (:type @state)
-           :on-complete         (fn [_]
-                                  (js/setTimeout (fn [] (reset! complete? true))
-                                                 1000)
-                                  (js/alert "I don't wanna slide anymore"))}]
-         [quo/button {:on-press (fn [] (reset! complete? false))}
-          "Try again"])])))
+       [quo/slide-button
+        {:track-text          "We gotta slide"
+         :track-icon          :face-id
+         :customization-color @color
+         :size                (:size @state)
+         :disabled?           (:disabled? @state)
+         :blur?               @blur?
+         :type                (:type @state)
+         :on-complete         (fn [reset-fn]
+                                (js/alert "Slide complete")
+                                (reset-fn @keep-at-end-after-slide?))}]])))
 
 (defn view [] [:f> f-view])

src/status_im/contexts/preview/quo/info/info_message.cljs

@@ -1,28 +1,43 @@
 (ns status-im.contexts.preview.quo.info.info-message
   (:require
     [quo.core :as quo]
-    [reagent.core :as reagent]
+    [react-native.core :as rn]
     [status-im.contexts.preview.quo.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:key     :status
     :type    :select
     :options [{:key :default}
               {:key :success}
-              {:key :error}]}
+              {:key :error}
+              {:key :warning}]}
    {:key     :size
     :type    :select
     :options [{:key :default}
               {:key :tiny}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key     :icon
+    :type    :select
+    :options [{:key :i/placeholder}
+              {:key :i/info}]}
    {:key  :message
     :type :text}])
 
 (defn view
   []
-  (let [state (reagent/atom {:type    :default
-                             :size    :default
-                             :icon    :i/placeholder
-                             :message "This is a message"})]
-    (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [quo/info-message @state (:message @state)]])))
+  (let [[state set-state] (rn/use-state
+                           {:status  :default
+                            :size    :default
+                            :message "This is a message"
+                            :blur?   false
+                            :icon    :i/placeholder})
+        blur?             (:blur? state)]
+    [preview/preview-container
+     {:state                 state
+      :descriptor            descriptor
+      :blur-dark-only?       true
+      :show-blur-background? blur?
+      :blur?                 blur?
+      :set-state             set-state}
+     [quo/info-message (dissoc state :message) (:message state)]]))

src/status_im/contexts/preview/quo/notifications/notification.cljs

@@ -65,9 +65,9 @@
                :customization-color :blue}
     :header   [rn/view
                [quo/info-message
-                {:type :success
-                 :size :tiny
-                 :icon :i/placeholder}
+                {:status :success
+                 :size   :tiny
+                 :icon   :i/placeholder}
                 "info-message as title"]]
     :body     [quo/snippet {:language :clojure :max-lines 15 :syntax true}
                snippet-preview/clojure-example]

src/status_im/contexts/preview/quo/settings/category.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.preview.quo.settings.category
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
     [reagent.core :as reagent]
     [status-im.common.resources :as resources]
     [status-im.contexts.preview.quo.preview :as preview]))
@@ -17,6 +18,24 @@
       :image-props :i/browser
       :image-size  32})))
 
+(defn create-data-item-array
+  [n]
+  (vec
+   (for [i (range n)]
+     {:blur?         false
+      :description   :default
+      :icon-right?   true
+      :right-icon    :i/chevron-right
+      :icon-color    colors/neutral-10
+      :card?         false
+      :label         :preview
+      :status        :default
+      :size          :default
+      :right-content {:type :accounts
+                      :data [{:emoji "🔥" :customization-color :yellow}]}
+      :title         (str "Item title " i)
+      :subtitle      "Item subtitle"})))
+
 (def descriptor
   [{:key :blur? :type :boolean}
    {:key     :list-type
@@ -24,7 +43,11 @@
     :options [{:key   :settings
                :value :settings}
               {:key   :reorder
-               :value :reorder}]}])
+               :value :reorder}
+              {:key   :data-item
+               :value :data-item}]}])
+
+(def ^:constant n-items 5)
 
 (defn view
   []
@@ -32,7 +55,10 @@
                              :blur?     false
                              :list-type :settings})]
     (fn []
-      (let [data (create-item-array 5)]
+      (let [list-type (:list-type @state)
+            data      (if (= list-type :data-item)
+                        (create-data-item-array n-items)
+                        (create-item-array n-items))]
         [preview/preview-container
          {:state                 state
           :descriptor            descriptor

src/status_im/contexts/preview/quo/settings/data_item.cljs

@@ -55,7 +55,8 @@
    {:type    :select
     :key     :size
     :options [{:key :default}
-              {:key :small}]}])
+              {:key :small}
+              {:key :large}]}])
 
 (defn view
   []

src/status_im/contexts/preview/quo/tags/summary_tag.cljs

@@ -51,7 +51,9 @@
               {:value "Saved address"
                :key   :saved-address}
               {:value "Account"
-               :key   :account}]}])
+               :key   :account}
+              {:value "Dapp"
+               :key   :dapp}]}])
 
 (defn view
   []