lint

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

.clj-kondo/config.edn

@@ -10,6 +10,8 @@
                 legacy.status-im.utils.styles/def    clojure.core/def
                 legacy.status-im.utils.styles/defn   clojure.core/defn
                 test-helpers.unit/deftest-sub        clojure.core/defn
+                test-helpers.unit/deftest-event      clojure.core/defn
+
                 taoensso.tufte/defnp                 clojure.core/defn}
  :linters      {:case-duplicate-test           {:level :error}
                 :case-quoted-test              {:level :error}

.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: ''
 
 ---

.github/PULL_REQUEST_TEMPLATE.md

@@ -70,3 +70,19 @@ Documentation change PR (review please): https://github.com/status-im/status.im/
 | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
 
 status: ready <!-- Can be ready or wip -->
+
+<!-- Uncomment this section for status-go upgrade/dogfooding pull requests
+
+- Specify potentially impacted user flows in _Areas that maybe impacted*.
+- Ensure that _Steps to test_ is filled in.
+
+### Risk
+
+Described potential risks and worst case scenarios.
+
+Tick **one**:
+- [ ] Low risk: 2 devs MUST perform testing as specified above and attach their results as comments to this PR **before** merging.
+- [ ] High risk: QA team MUST perform additional testing in the specified affected areas **before** merging.
+
+
+-->

.zprintrc

@@ -41,6 +41,7 @@
   "reg-fx"            :arg1-pair
   "testing"           :arg1-body
   "deftest-sub"       :arg1-body
+  "deftest-event"     :arg1-body
   "test-async"        :arg1-body
   "wait-for"          :arg1-body
   "with-deps-check"   :arg1-body

Makefile

@@ -447,6 +447,16 @@ android-devices: export TARGET := android-sdk
 android-devices: ##@other Invoke adb devices
 	adb devices
 
+android-pull-geth: export TARGET := android-sdk
+android-pull-geth: export VERSION ?= debug
+android-pull-geth:
+	adb pull "/storage/emulated/0/Android/data/im.status.ethereum$$( [ "$(VERSION)" = "release" ] || echo ".$(VERSION)" )/files/Download/geth.log"
+
+android-tail-geth: export TARGET := android-sdk
+android-tail-geth: export VERSION ?= debug
+android-tail-geth:
+	adb shell 'while true; do cat; sleep 1; done < /storage/emulated/0/Android/data/im.status.ethereum$$( [ "$(VERSION)" = "release" ] || echo ".$(VERSION)" )/files/Download/geth.log'
+
 android-logcat: export TARGET := android-sdk
 android-logcat: ##@other Read status-mobile logs from Android phone using adb
 	adb logcat | grep -e RNBootstrap -e ReactNativeJS -e ReactNative -e StatusModule -e StatusNativeLogs -e 'F DEBUG   :' -e 'Go      :' -e 'GoLog   :' -e 'libc    :'

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",

shadow-cljs.edn

@@ -131,7 +131,8 @@
    :output-dir "target/test"
    :optimizations :simple
    :target :node-test
-   :dev {:devtools {:preloads [status-im.setup.schema-preload]}}
+   :dev {:devtools {:preloads [status-im.setup.schema-preload
+                               status-im.setup.test-preload]}}
    ;; Uncomment line below to `make test-watch` a specific file
    :ns-regexp #shadow/env "SHADOW_NS_REGEXP"
    :main legacy.status-im.test-runner/main

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/default_sync_period_settings/view.cljs

@@ -13,6 +13,7 @@
    constants/one-day    (i18n/label :t/one-day)
    constants/three-days (i18n/label :t/three-days)
    constants/one-week   (i18n/label :t/one-week)
+   constants/nine-days  (i18n/label :t/nine-days)
    constants/one-month  (i18n/label :t/one-month)})
 
 (defn radio-item
@@ -34,4 +35,5 @@
      [radio-item constants/one-day default-sync-period]
      [radio-item constants/three-days default-sync-period]
      [radio-item constants/one-week default-sync-period]
+     [radio-item constants/nine-days default-sync-period]
      [radio-item constants/one-month default-sync-period]]))

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

@@ -6,6 +6,7 @@
     [legacy.status-im.ui.components.react :as react]
     [quo.core :as quo]
     [react-native.platform :as platform]
+    [taoensso.timbre :as log]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -57,7 +58,15 @@
        :accessibility-label :local-notifications-settings-button
        :subtitle            (i18n/label :t/local-notifications-subtitle)
        :active              notifications-enabled?
-       :on-press            #(rf/dispatch [:push-notifications/switch (not notifications-enabled?)])
+       :on-press            (fn []
+                              (when-not notifications-enabled?
+                                (rf/dispatch
+                                 [:request-permissions
+                                  {:permissions [:post-notifications]
+                                   :on-allowed  #(log/info "push notification permissions were allowed")
+                                   :on-denied   #(log/error
+                                                  "user denied push notification permissions")}]))
+                              (rf/dispatch [:push-notifications/switch (not notifications-enabled?)]))
        :accessory           :switch}]]))
 
 (defn notifications-settings

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/ui/screens/sync_settings/views.cljs

@@ -57,14 +57,21 @@
         :accessory-text      (cond
                                (= default-sync-period constants/two-mins)
                                (i18n/label :t/two-minutes)
+
                                (or
                                 (nil? default-sync-period)
                                 (= default-sync-period constants/one-day))
                                (i18n/label :t/one-day)
+
                                (= default-sync-period constants/three-days)
                                (i18n/label :t/three-days)
+
+                               (= default-sync-period constants/nine-days)
+                               (i18n/label :t/nine-days)
+
                                (= default-sync-period constants/one-week)
                                (i18n/label :t/one-week)
+
                                (= default-sync-period constants/one-month)
                                (i18n/label :t/one-month))}]
       [list.item/list-item

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/bottom_actions/style.cljs

@@ -20,8 +20,9 @@
   {:background-color (when-not (or scroll? blur?)
                        (colors/theme-colors colors/white colors/neutral-95 theme))})
 
-(def buttons-container
-  {:flex-direction     :row
+(defn buttons-container
+  [actions]
+  {:flex-direction     (if (= actions :two-vertical-actions) :column :row)
    :justify-content    :space-around
    :padding-vertical   12
    :gap                12

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

@@ -17,9 +17,9 @@
    [:catn
     [:props
      [:map {:closed true}
-      [:actions [:maybe [:enum :one-action :two-actions]]]
+      [:actions [:maybe [:enum :one-action :two-actions :two-vertical-actions]]]
       [:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
-      [:description-text {:optional true} [:maybe :string]]
+      [:description-text {:optional true} [:maybe [:or :string :schema.common/hiccup]]]
       [:description-top-text {:optional true} [:maybe :string]]
       [:error-message {:optional true} [:maybe :string]]
       [:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
@@ -72,8 +72,9 @@
             :context (i18n/label (keyword "t" role))}
            context-tag-props)]])
 
-     [rn/view {:style style/buttons-container}
-      (when (= actions :two-actions)
+     [rn/view {:style (style/buttons-container actions)}
+      (when (or (= actions :two-actions)
+                (= actions :two-vertical-actions))
         [button/button
          (merge
           {:size                40
@@ -93,8 +94,10 @@
         button-one-props)
        button-one-label]]
      (when (= description :bottom)
-       [text/text
-        {:size  :paragraph-2
-         :style (style/description-bottom scroll? blur? theme)} description-text])]))
+       (if (string? description-text)
+         [text/text
+          {:size  :paragraph-2
+           :style (style/description-bottom scroll? blur? theme)} description-text]
+         description-text))]))
 
 (def view (schema/instrument #'view-internal ?schema))

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/inputs/search_input/style.cljs

@@ -4,19 +4,19 @@
     [quo.foundations.colors :as colors]))
 
 (defn placeholder-color
-  [state blur? override-theme]
+  [state blur? theme]
   (cond
     (and blur? (= state :active))
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
 
     blur? ; state is default
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
 
     (= state :active)
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
 
     :else ; Not blur and state is default
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
 
 (def clear-icon-container
   {:justify-content :center
@@ -26,16 +26,14 @@
    :width           20})
 
 (defn clear-icon
-  [blur? override-theme]
+  [blur? theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)))
+    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
+    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))
 
 (defn cursor
-  [customization-color override-theme]
-  (colors/theme-colors (colors/custom-color customization-color 50)
-                       (colors/custom-color customization-color 60)
-                       override-theme))
+  [customization-color theme]
+  (colors/resolve-color customization-color theme))
 
 (def tag-separator {:width 8})
 
@@ -61,10 +59,10 @@
    :justify-content :flex-start})
 
 (defn input-text
-  [disabled?]
+  [disabled? theme]
   (assoc (text/text-style {:size   :paragraph-1
                            :weight :regular}
-                          nil)
+                          theme)
          :flex             1
          :padding-vertical 5
          :min-width        120

src/quo/components/inputs/search_input/view.cljs

@@ -4,6 +4,7 @@
     [quo.components.icon :as icon]
     [quo.components.inputs.search-input.style :as style]
     [quo.foundations.colors :as colors]
+    [quo.theme]
     [react-native.core :as rn]))
 
 (def ^:private tag-separator [rn/view {:style style/tag-separator}])
@@ -15,12 +16,12 @@
         tags-coll))
 
 (defn- clear-button
-  [{:keys [on-press blur? override-theme]}]
+  [{:keys [on-press blur? theme]}]
   [rn/touchable-opacity
    {:style    style/clear-icon-container
     :on-press on-press}
    [icon/icon :i/clear
-    {:color (style/clear-icon blur? override-theme)
+    {:color (style/clear-icon blur? theme)
      :size  20}]])
 
 (defn- handle-backspace
@@ -31,7 +32,7 @@
 
 (def ^:private props-to-remove
   [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
-   :on-blur :on-clear :value :tags :disabled? :blur? :customization-color :override-theme])
+   :on-blur :on-clear :value :tags :disabled? :blur? :customization-color])
 
 (defn- add-children
   [text-input children]
@@ -40,12 +41,13 @@
     text-input))
 
 (defn search-input
-  [{:keys [value tags disabled? blur? on-change-text customization-color
-           on-clear on-focus on-blur override-theme container-style]
+  [{:keys [value tags disabled? blur? on-change-text customization-color show-clear-button?
+           on-clear on-focus on-blur container-style]
     :or   {customization-color :blue}
     :as   props}
    & children]
-  (let [[state set-state]  (rn/use-state :default)
+  (let [theme              (quo.theme/use-theme)
+        [state set-state]  (rn/use-state :default)
         on-focus           (rn/use-callback
                             (fn []
                               (set-state :active)
@@ -72,20 +74,20 @@
         [inner-tags tags])
       (add-children
        [rn/text-input
-        (cond-> {:style                  (style/input-text disabled?)
-                 :cursor-color           (style/cursor customization-color override-theme)
-                 :placeholder-text-color (style/placeholder-color state blur? override-theme)
+        (cond-> {:style                  (style/input-text disabled? theme)
+                 :cursor-color           (style/cursor customization-color theme)
+                 :placeholder-text-color (style/placeholder-color state blur? theme)
                  :editable               (not disabled?)
                  :on-key-press           on-key-press
-                 :keyboard-appearance    (colors/theme-colors :light :dark override-theme)
+                 :keyboard-appearance    (colors/theme-colors :light :dark theme)
                  :on-change-text         on-change-text
                  :on-focus               on-focus
                  :on-blur                on-blur}
           use-value?        (assoc :value value)
           (seq clean-props) (merge clean-props))]
        (when-not use-value? children))]
-     (when (or (seq value) (seq children))
+     (when (or (seq value) (seq children) show-clear-button?)
        [clear-button
-        {:on-press       on-clear
-         :blur?          blur?
-         :override-theme override-theme}])]))
+        {:on-press on-clear
+         :blur?    blur?
+         :theme    theme}])]))

src/quo/components/inputs/title_input/component_spec.cljs

@@ -13,7 +13,7 @@
                {:value      ""
                 :max-length 24}])
     (h/fire-event :on-focus (h/query-by-label-text :profile-title-input))
-    (-> (h/wait-for #(h/get-by-text "00"))
+    (-> (h/wait-for #(h/get-by-text "0"))
         (.then #(h/is-truthy (h/query-by-text "/24")))))
 
   (h/test "renders with max length digits and character count"
@@ -22,7 +22,7 @@
                 :max-length    24}
                "abc"])
     (h/fire-event :on-focus (h/query-by-label-text :profile-title-input))
-    (-> (h/wait-for #(h/get-by-text "03"))
+    (-> (h/wait-for #(h/get-by-text "3"))
         (.then #(h/is-truthy (h/query-by-text "/24")))))
 
   (h/test "text updates on change"

src/quo/components/inputs/title_input/view.cljs

@@ -71,9 +71,7 @@
          [text/text
           {:style (style/char-count blur? theme)
            :size  :paragraph-2}
-          (pad-0
-           (str
-            (count value)))]
+          (str (count value))]
          [text/text
           {:style (style/char-count blur? theme)
            :size  :paragraph-2}

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,30 +1,70 @@
 (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]
-  {:width         "100%"
-   :aspect-ratio  (if square? 1 aspect-ratio)
-   :border-radius 16})
+  [square? aspect-ratio theme]
+  {:width            "100%"
+   :aspect-ratio     (if square? 1 aspect-ratio)
+   :border-radius    16
+   :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})
+
+(defn collectible-border
+  [theme]
+  {:position      :absolute
+   :top           0
+   :left          0
+   :right         0
+   :bottom        0
+   :border-radius 16
+   :border-width  1
+   :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,29 +1,63 @@
 (ns quo.components.profile.expanded-collectible.view
   (:require
-    [promesa.core :as promesa]
+    [clojure.string :as string]
     [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.theme]
-    [quo.theme]
+    [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]
-  (when counter
-    [collectible-counter/view
-     {:container-style style/counter
-      :value           counter}]))
+  [collectible-counter/view
+   {:container-style style/counter
+    :value           counter}])
 
 (defn- fallback-view
-  [{:keys [label theme counter]}]
-  [rn/view
-   {:style (style/fallback {:theme theme})}
+  [{:keys [label theme counter on-mount]}]
+  (rn/use-mount on-mount)
+  [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)}]]
@@ -35,49 +69,67 @@
 
 (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 false)]
-    (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}]
+        {: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}]
+        {:label    (i18n/label :t/cant-fetch-info)
+         :counter  counter
+         :theme    theme
+         :on-mount on-collectible-load}]
 
-       (and (not image-error?) supported-file?)
-       [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))
-          :source    image-src
-          :native-ID native-ID
-          :on-error  #(set-image-error true)
-          :on-load   on-collectible-load}]
-        [counter-view counter]])]))
+         {: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)}]])]))
 
 (def ?schema
   [:=>
    [: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/settings/view.cljs

@@ -7,20 +7,23 @@
     [react-native.core :as rn]))
 
 (defn settings-category
-  [{:keys [label data container-style] :as props}]
-  (let [theme         (quo.theme/use-theme)
-        settings-item (filter identity data)]
+  [{:keys [label data blur? container-style]}]
+  (let [theme          (quo.theme/use-theme)
+        settings-items (remove nil? data)
+        last-index     (dec (count settings-items))]
     [rn/view {:style (merge (style/container label) container-style)}
      (when label
        [text/text
         {:weight :medium
          :size   :paragraph-2
-         :style  (style/label props theme)}
+         :style  (style/label blur? theme)}
         label])
-     [rn/view {:style (style/settings-items props theme)}
-      (for [item settings-item]
-        ^{:key item}
-        [:<>
-         [settings-item/view item]
-         (when-not (= item (last settings-item))
-           [rn/view {:style (style/settings-separator props theme)}])])]]))
+     [rn/view {:style (style/settings-items blur? theme)}
+      (map-indexed
+       (fn [index item]
+         ^{:key (str label (:title item))}
+         [:<>
+          [settings-item/view item]
+          (when-not (= last-index index)
+            [rn/view {:style (style/settings-separator blur? theme)}])])
+       settings-items)]]))

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

@@ -11,7 +11,7 @@
    :padding-bottom     8})
 
 (defn settings-items
-  [{:keys [blur?]} theme]
+  [blur? theme]
   {:border-radius    16
    :background-color (if blur?
                        colors/white-opa-5
@@ -22,7 +22,7 @@
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
 (defn label
-  [{:keys [blur?]} theme]
+  [blur? theme]
   {:margin-bottom 12
    :color         (if blur?
                     colors/white-opa-40
@@ -32,7 +32,7 @@
   {:margin-top 12})
 
 (defn settings-separator
-  [{:keys [blur?]} theme]
+  [blur? theme]
   {:height           1
    :background-color (if blur?
                        colors/white-opa-5

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/component_spec.cljs

@@ -10,9 +10,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         false
                 :card?               true
-                :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -27,9 +25,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         false
                 :card?               false
-                :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -45,9 +41,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         false
                 :card?               true
-                :label               :none
                 :status              :default
                 :size                :small
                 :title               "Label"
@@ -63,9 +57,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         false
                 :card?               true
-                :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -81,9 +73,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         false
                 :card?               true
-                :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -98,9 +88,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         false
                 :card?               true
-                :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -115,10 +103,8 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
-                :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -133,10 +119,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         true
-                :right-icon          :i/chevron-right
                 :card?               true
-                :label               :preview
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -151,10 +134,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         true
-                :right-icon          :i/chevron-right
                 :card?               true
-                :label               :preview
                 :status              :default
                 :size                :default
                 :title               "Label"
@@ -170,10 +150,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :icon-right?         true
-                :right-icon          :i/chevron-right
                 :card?               true
-                :label               :preview
                 :status              :default
                 :size                :default
                 :title               "Label"

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
@@ -71,9 +89,8 @@
             (colors/theme-colors colors/neutral-100
                                  colors/white
                                  theme))})
-(defn right-icon
-  [label]
-  {:margin-left (if (or (= label :graph) (= label :none)) 12 8)})
+(def right-icon
+  {:margin-left 12})
 
 (def left-side
   {:flex 1})

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

@@ -1,15 +1,13 @@
 (ns quo.components.settings.data-item.view
   (:require
     [quo.components.avatars.account-avatar.view :as account-avatar]
-    [quo.components.common.not-implemented.view :as not-implemented]
     [quo.components.icon :as icons]
     [quo.components.list-items.preview-list.view :as preview-list]
     [quo.components.markdown.text :as text]
     [quo.components.settings.data-item.style :as style]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [utils.i18n :as i18n]))
+    [react-native.core :as rn]))
 
 (defn- left-loading
   [{:keys [size blur?]}]
@@ -45,32 +43,24 @@
       subtitle]]))
 
 (defn- left-title
-  [{:keys [title label size blur?]}]
+  [{:keys [title blur?]}]
   (let [theme (quo.theme/use-theme)]
     [rn/view {:style style/title-container}
      [text/text
       {:weight :regular
        :size   :paragraph-2
        :style  (style/title blur? theme)}
-      title]
-     (when (and (= :graph label) (not= :small size))
-       [text/text
-        {:weight :regular
-         :size   :label
-         :style  (style/title blur? theme)}
-        (i18n/label :t/days)])]))
+      title]]))
 
 (defn- left-side
   "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
-  [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
+  [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type icon-color
            customization-color network-image emoji]
     :as   props}]
   (let [theme (quo.theme/use-theme)]
     [rn/view {:style style/left-side}
      [left-title
       {:title title
-       :label label
-       :size  size
        :blur? blur?
        :theme theme}]
      (if (= status :loading)
@@ -93,49 +83,43 @@
            :network-image       network-image}]))]))
 
 (defn- right-side
-  [{:keys [label icon-right? right-icon icon-color communities-list]}]
-  [rn/view {:style style/right-container}
-   (case label
-     :preview [preview-list/view
-               {:type   :communities
-                :number 3
-                :size   :size-24}
-               communities-list]
-     :graph   [text/text "graph"]
-     :none    nil
-     nil)
-   (when icon-right?
-     [rn/view {:style (style/right-icon label)}
-      [icons/icon right-icon
-       {:accessibility-label :icon-right
-        :color               icon-color
-        :size                20}]])])
+  [{:keys [right-icon right-content icon-color]}]
+  (let [{:keys [type data size]
+         :or   {size :size-24}} right-content]
+    [rn/view {:style style/right-container}
+     (when type
+       [preview-list/view
+        {:type   type
+         :number (count data)
+         :size   size}
+        data])
+     (when right-icon
+       [rn/view {:style style/right-icon}
+        [icons/icon right-icon
+         {:accessibility-label :icon-right
+          :color               icon-color
+          :size                20}]])]))
 
 (defn view
-  [{:keys [blur? card? icon-right? right-icon label status size on-press communities-list
-           container-style]
+  [{:keys [blur? card? right-icon right-content status size on-press container-style]
     :as   props}]
   (let [theme      (quo.theme/use-theme)
         icon-color (if (or blur? (= :dark theme))
                      colors/neutral-40
                      colors/neutral-50)]
-    (if (= :graph label)
-      [not-implemented/view {:blur? blur?}]
-      [rn/pressable
-       {:accessibility-label :data-item
-        :disabled            (not icon-right?)
-        :on-press            on-press
-        :style               (merge (style/container {:size        size
-                                                      :card?       card?
-                                                      :blur?       blur?
-                                                      :actionable? on-press
-                                                      :theme       theme})
-                                    container-style)}
-       [left-side props]
-       (when (and (= :default status) (not= :small size))
-         [right-side
-          {:label            label
-           :icon-right?      icon-right?
-           :right-icon       right-icon
-           :icon-color       icon-color
-           :communities-list communities-list}])])))
+    [rn/pressable
+     {:accessibility-label :data-item
+      :disabled            (not right-icon)
+      :on-press            on-press
+      :style               (merge (style/container {:size        size
+                                                    :card?       card?
+                                                    :blur?       blur?
+                                                    :actionable? on-press
+                                                    :theme       theme})
+                                  container-style)}
+     [left-side props]
+     (when (and (= :default status) (not= :small size))
+       [right-side
+        {:right-icon    right-icon
+         :right-content right-content
+         :icon-color    icon-color}])]))

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

@@ -116,7 +116,8 @@
     [rn/view {:style (style/left-container (:image props))}
      [text/text
       {:weight :medium
-       :style  {:color (when blur? colors/white)}} title]
+       :style  {:color (when blur? colors/white)}}
+      title]
      [description-component props]
      [tag-component props]]]
    [rn/view {:style (style/sub-container (:alignment action-props))}

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/text_combinations/page_top/style.cljs

@@ -70,7 +70,8 @@
                             (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}))
 
 (def search-input-container
-  {:margin-top        8
+  {:flex              0
+   :margin-top        8
    :margin-bottom     12
    :margin-horizontal 20})
 

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/network_bridge/view.cljs

@@ -31,7 +31,7 @@
         :else                 (string/capitalize (name network))))
 
 (defn view-internal
-  [{:keys [network status amount container-style on-press] :as args}]
+  [{:keys [network status amount container-style on-press on-long-press] :as args}]
   (let [theme (quo.theme/use-theme)]
     (if (= status :edit)
       [network-bridge-add (assoc args :theme theme)]
@@ -39,7 +39,8 @@
        {:style               (merge (style/container network status theme) container-style)
         :accessible          true
         :accessibility-label :container
-        :on-press            on-press}
+        :on-press            on-press
+        :on-long-press       on-long-press}
        (if (= status :loading)
          [rn/view
           {:style               (style/loading-skeleton 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/components/wallet/wallet_activity/view.cljs

@@ -46,9 +46,10 @@
   [rn/view
    {:style style/transaction-header-container}
    [text/text
-    {:weight :semi-bold
-     :size   :paragraph-1
-     :style  (style/transaction-header theme)}
+    {:weight              :semi-bold
+     :size                :paragraph-1
+     :style               (style/transaction-header theme)
+     :accessibility-label :transaction-header}
     (transaction transaction-translation)]
    (when (> counter 1)
      [rn/view (style/transaction-counter-container theme blur?)
@@ -59,9 +60,10 @@
        (i18n/label :t/x-counter {:counter counter})]])
    [rn/view {:style style/timestamp-container}
     [text/text
-     {:weight :regular
-      :size   :label
-      :style  (style/timestamp theme blur?)}
+     {:weight              :regular
+      :size                :label
+      :style               (style/timestamp theme blur?)
+      :accessibility-label :transaction-timestamp}
      timestamp]]])
 
 (defn transaction-icon-view

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

@@ -2,12 +2,13 @@
   (:require
     [quo.foundations.colors :as colors]))
 
-(def container-info
+(defn container-info
+  [{:keys [metrics]}]
   {:padding-horizontal 20
    :padding-top        12
    :padding-bottom     32
    :flex-grow          1
-   :max-height         98})
+   :height             (if (= metrics :none) 78 98)})
 
 (def container-info-top
   {:flex-direction  :row

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

@@ -116,7 +116,7 @@
 
 (defn- view-internal
   [props]
-  [rn/view {:style style/container-info}
+  [rn/view {:style (style/container-info props)}
    [view-info-top props]
    [view-info-bottom props]])
 

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/quo/foundations/colors.cljs

@@ -151,7 +151,7 @@
 (def black-opa-0 (alpha black 0))
 (def black-opa-30 (alpha black 0.3))
 (def black-opa-60 (alpha black 0.6))
-(def onboarding-header-black "#000716")
+(def onboarding-header-black neutral-100)
 (def border-avatar-light
   "Simulates a blurred, transparent border for avatars in light mode"
   "#475060")

src/schema/common.cljs

@@ -33,6 +33,9 @@
   [:fn {:error/message "schema.common/exception should be of type ExceptionInfo"}
    (fn [v] (instance? ExceptionInfo v))])
 
+(def ^:private ?hiccup
+  vector?)
+
 (defn register-schemas
   []
   (registry/register ::theme ?theme)
@@ -40,4 +43,5 @@
   (registry/register ::public-key ?public-key)
   (registry/register ::image-source ?image-source)
   (registry/register ::rpc-call ?rpc-call)
-  (registry/register ::exception ?exception))
+  (registry/register ::exception ?exception)
+  (registry/register ::hiccup ?hiccup))

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)]]]))