feat: changes to publish to 2 peers for lightpush and not use store confirmations

Tabs "Open" and "Gated" in Discover communities screen were never implemented in
the code, they are dummies. We now hide them under the flag
config/show-not-implemented-features?, which is disabled for users.

Fixes: https://github.com/status-im/status-mobile/issues/20682

To avoid regressions and be quicker, I opted to not remove the "All" tab even
though is the only one shown now, as that would require me to check non-trivial
code due to the fact that the tabs can be sticky as the user scrolls.

.env

@@ -26,7 +26,6 @@ APN_TOPIC=im.status.ethereum.pr
 COMMUNITIES_ENABLED=1
 DATABASE_MANAGEMENT_ENABLED=1
 DELETE_MESSAGE_ENABLED=1
-COLLECTIBLES_ENABLED=1
 COMMANDS_ENABLED=1
 TWO_MINUTES_SYNCING=1
 SWAP_ENABLED=1

.env.release

@@ -18,6 +18,5 @@ PARTITIONED_TOPIC=0
 ENABLE_ROOT_ALERT=1
 MAX_IMAGES_BATCH=1
 DELETE_MESSAGE_ENABLED=1
-COLLECTIBLES_ENABLED=1
 FAST_CREATE_COMMUNITY_ENABLED=0
 TEST_NETWORKS_ENABLED=0

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

Makefile

@@ -457,6 +457,12 @@ 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-clean-geth: export TARGET := android-sdk
+android-clean-geth: export VERSION ?= debug
+android-clean-geth:
+	adb shell 'rm /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>

modules/react-native-status/android/src/main/java/im/status/ethereum/module/AccountManager.kt

@@ -246,6 +246,14 @@ class AccountManager(private val reactContext: ReactApplicationContext) : ReactC
         utils.executeRunnableStatusGoMethod({ Statusgo.openAccounts(rootDir) }, callback)
     }
 
+    @ReactMethod
+    private fun initializeApplication(request: String, callback: Callback) {
+        Log.d(TAG, "initializeApplication")
+        Log.d(TAG, "[Initializing application $request")
+        utils.executeRunnableStatusGoMethod({ Statusgo.initializeApplication(request) }, callback)
+    }
+
+
     @ReactMethod
     fun logout() {
         Log.d(TAG, "logout")

modules/react-native-status/android/src/main/java/im/status/ethereum/module/StatusModule.kt

@@ -76,6 +76,16 @@ class StatusModule(private val reactContext: ReactApplicationContext, private va
         utils.executeRunnableStatusGoMethod({ Statusgo.getNodeConfig() }, callback)
     }
 
+    @ReactMethod
+    fun addCentralizedMetric(request: String, callback: Callback) {
+        utils.executeRunnableStatusGoMethod({ Statusgo.addCentralizedMetric(request) }, callback)
+    }
+
+    @ReactMethod
+    fun toggleCentralizedMetrics(request: String, callback: Callback) {
+        utils.executeRunnableStatusGoMethod({ Statusgo.toggleCentralizedMetrics(request) }, callback)
+    }
+
     @ReactMethod
     fun deleteImportedKey(keyUID: String, address: String, password: String, callback: Callback) {
         val keyStoreDir = utils.getKeyStorePath(keyUID)

modules/react-native-status/android/src/main/java/im/status/ethereum/module/Utils.kt

@@ -153,4 +153,9 @@ class Utils(private val reactContext: ReactApplicationContext) : ReactContextBas
 
         return strArray
     }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    fun validateConnectionString(connectionString: String): String {
+        return Statusgo.validateConnectionString(connectionString)
+    }
 }

modules/react-native-status/ios/RCTStatus/AccountManager.m

@@ -195,6 +195,15 @@ RCT_EXPORT_METHOD(verifyDatabasePassword:(NSString *)keyUID
     callback(@[result]);
 }
 
+RCT_EXPORT_METHOD(initializeApplication:(NSString *)request
+                  callback:(RCTResponseSenderBlock)callback) {
+#if DEBUG
+    NSLog(@"initializeApplication() method called");
+#endif
+    NSString *result = StatusgoInitializeApplication(request);
+    callback(@[result]);
+}
+
 RCT_EXPORT_METHOD(openAccounts:(RCTResponseSenderBlock)callback) {
 #if DEBUG
     NSLog(@"OpenAccounts() method called");

modules/react-native-status/ios/RCTStatus/RCTStatus.m

@@ -176,6 +176,24 @@ RCT_EXPORT_METHOD(appStateChange:(NSString *)type) {
     StatusgoAppStateChange(type);
 }
 
+RCT_EXPORT_METHOD(addCentralizedMetric:(NSString *)request
+                  callback:(RCTResponseSenderBlock)callback) {
+#if DEBUG
+    NSLog(@"addCentralizedMetric() method called");
+#endif
+    NSString *result = StatusgoAddCentralizedMetric(request);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(toggleCentralizedMetrics:(NSString *)request
+                  callback:(RCTResponseSenderBlock)callback) {
+#if DEBUG
+    NSLog(@"toggleCentralizedMetrics() method called");
+#endif
+    NSString *result = StatusgoToggleCentralizedMetrics(request);
+    callback(@[result]);
+}
+
 RCT_EXPORT_METHOD(startLocalNotifications) {
 #if DEBUG
     NSLog(@"StartLocalNotifications() method called");

modules/react-native-status/ios/RCTStatus/Utils.m

@@ -128,4 +128,8 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(toChecksumAddress:(NSString *)address) {
     return StatusgoToChecksumAddress(address);
 }
 
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(validateConnectionString:(NSString *)cs) {
+    return StatusgoValidateConnectionString(cs);
+}
+
 @end

modules/react-native-status/nodejs/status.cpp

@@ -302,6 +302,36 @@ void _MultiAccountStoreAccount(const FunctionCallbackInfo<Value>& args) {
 	delete c;
 }
 
+void _InitializeApplication(const FunctionCallbackInfo<Value>& args) {
+	Isolate* isolate = args.GetIsolate();
+        Local<Context> context = isolate->GetCurrentContext();
+
+	if (args.Length() != 1) {
+		// Throw an Error that is passed back to JavaScript
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for InitializeApplication")));
+		return;
+	}
+
+	// Check the argument types
+
+	if (!args[0]->IsString()) {
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong argument type for request")));
+		return;
+	}
+
+
+	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
+	char *arg0 = *arg0Obj;
+
+	// Call exported Go function, which returns a C string
+	char *c = InitializeApplication(arg0);
+
+	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
+	args.GetReturnValue().Set(ret);
+	delete c;
+}
 
 void _InitKeystore(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
@@ -1935,6 +1965,7 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "multiAccountStoreDerivedAccounts", _MultiAccountStoreDerivedAccounts);
 	NODE_SET_METHOD(exports, "multiAccountStoreAccount", _MultiAccountStoreAccount);
 	NODE_SET_METHOD(exports, "initKeystore", _InitKeystore);
+	NODE_SET_METHOD(exports, "initializeApplication", _InitializeApplication);
 	NODE_SET_METHOD(exports, "fleets", _Fleets);
 	NODE_SET_METHOD(exports, "stopCPUProfiling", _StopCPUProfiling);
 	NODE_SET_METHOD(exports, "encodeTransfer", _EncodeTransfer);
@@ -1972,7 +2003,7 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "signTypedData", _SignTypedData);
 	NODE_SET_METHOD(exports, "sendTransaction", _SendTransaction);
 	NODE_SET_METHOD(exports, "appStateChange", _AppStateChange);
-    NODE_SET_METHOD(exports, "setSignalEventCallback", _SetSignalEventCallback);
+        NODE_SET_METHOD(exports, "setSignalEventCallback", _SetSignalEventCallback);
 	NODE_SET_METHOD(exports, "validateNodeConfig", _ValidateNodeConfig);
 	NODE_SET_METHOD(exports, "hashTypedData", _HashTypedData);
 	NODE_SET_METHOD(exports, "recover", _Recover);

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

scripts/build-android.sh

@@ -45,6 +45,8 @@ SECRETS_ENV_VARS=(
     'INFURA_TOKEN'
     'INFURA_TOKEN_SECRET'
     'OPENSEA_API_KEY'
+    'MIXPANEL_APP_ID'
+    'MIXPANEL_TOKEN'
     'POKT_TOKEN'
 )
 

shadow-cljs.edn

@@ -67,6 +67,8 @@
          :closure-defines
          {status-im.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
           status-im.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
+          status-im.config/MIXPANEL_APP_ID                #shadow/env "MIXPANEL_APP_ID"
+          status-im.config/MIXPANEL_TOKEN                 #shadow/env "MIXPANEL_TOKEN"
           status-im.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
           status-im.config/RARIBLE_MAINNET_API_KEY        #shadow/env "RARIBLE_MAINNET_API_KEY"
           status-im.config/RARIBLE_TESTNET_API_KEY        #shadow/env "RARIBLE_TESTNET_API_KEY"
@@ -102,6 +104,8 @@
     {status-im.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
      status-im.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
      status-im.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+     status-im.config/MIXPANEL_APP_ID                #shadow/env "MIXPANEL_APP_ID"
+     status-im.config/MIXPANEL_TOKEN                 #shadow/env "MIXPANEL_TOKEN"
      status-im.config/RARIBLE_MAINNET_API_KEY        #shadow/env "RARIBLE_MAINNET_API_KEY"
      status-im.config/RARIBLE_TESTNET_API_KEY        #shadow/env "RARIBLE_TESTNET_API_KEY"
      status-im.config/ALCHEMY_ETHEREUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ETHEREUM_MAINNET_TOKEN"
@@ -143,6 +147,8 @@
     status-im.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
     status-im.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
     status-im.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+    status-im.config/MIXPANEL_APP_ID                #shadow/env "MIXPANEL_APP_ID"
+    status-im.config/MIXPANEL_TOKEN                 #shadow/env "MIXPANEL_TOKEN"
     status-im.config/RARIBLE_MAINNET_API_KEY        #shadow/env "RARIBLE_MAINNET_API_KEY"
     status-im.config/RARIBLE_TESTNET_API_KEY        #shadow/env "RARIBLE_TESTNET_API_KEY"
     status-im.config/ALCHEMY_ETHEREUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ETHEREUM_MAINNET_TOKEN"

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

@@ -26,7 +26,6 @@
     legacy.status-im.ui.components.invite.events
     [legacy.status-im.ui.components.react :as react]
     legacy.status-im.ui.screens.notifications-settings.events
-    legacy.status-im.ui.screens.privacy-and-security-settings.events
     [legacy.status-im.utils.dimensions :as dimensions]
     legacy.status-im.utils.logging.core
     [legacy.status-im.utils.utils :as utils]
@@ -108,8 +107,7 @@
     (when (and (multiaccounts.model/logged-in? db)
                (= current-theme-type status-im.constants/theme-type-system))
       {:profile.settings/switch-theme-fx
-       [(get-in db [:profile/profile :appearance])
-        (:view-id db) true]})))
+       [(get-in db [:profile/profile :appearance]) (:view-id db)]})))
 
 (defn- on-biometric-auth-fail
   [{:keys [code]}]
@@ -135,7 +133,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/multiaccounts/update/core.cljs

@@ -120,12 +120,3 @@
   {:events [:multiaccounts.ui/switch-backup-enabled]}
   [cofx enabled?]
   (multiaccount-update cofx :backup-enabled? enabled? {}))
-
-(rf/defn toggle-opensea-nfts-visibility
-  {:events [::toggle-opensea-nfts-visiblity]}
-  [cofx visible?]
-  (rf/merge cofx
-            {:db       (assoc-in (:db cofx) [:profile/profile :opensea-enabled?] visible?)
-             ;; need to add fully qualified namespace to counter circular deps
-             :dispatch [:legacy.status-im.wallet.core/fetch-collectibles-collection]}
-            (multiaccount-update :opensea-enabled? visible? {})))

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/dapps_permissions/styles.cljs

@@ -1,11 +0,0 @@
-(ns legacy.status-im.ui.screens.dapps-permissions.styles
-  (:require
-    [legacy.status-im.ui.components.colors :as colors]))
-
-(def icon-container
-  {:width            40
-   :height           40
-   :border-radius    20
-   :background-color colors/gray-lighter
-   :align-items      :center
-   :justify-content  :center})

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

@@ -1,64 +0,0 @@
-(ns legacy.status-im.ui.screens.dapps-permissions.views
-  (:require-macros [legacy.status-im.utils.views :as views])
-  (:require
-    [legacy.status-im.ui.components.colors :as colors]
-    [legacy.status-im.ui.components.core :as quo]
-    [legacy.status-im.ui.components.icons.icons :as icons]
-    [legacy.status-im.ui.components.list.item :as list.item]
-    [legacy.status-im.ui.components.list.views :as list]
-    [legacy.status-im.ui.components.react :as react]
-    [legacy.status-im.ui.components.topbar :as topbar]
-    [legacy.status-im.ui.screens.dapps-permissions.styles :as styles]
-    [re-frame.core :as re-frame]
-    [status-im.constants :as constants]
-    [utils.i18n :as i18n]))
-
-(defn d-icon
-  []
-  [react/view styles/icon-container
-   [icons/icon :main-icons/dapp {:color colors/gray}]])
-
-(defn prepare-items
-  [{:keys [dapp permissions]}]
-  {:title    dapp
-   :chevron  true
-   :on-press #(re-frame/dispatch [:navigate-to :manage-dapps-permissions
-                                  {:dapp dapp :permissions permissions}])
-   :icon     [d-icon]})
-
-(defn prepare-items-manage
-  [name]
-  (fn [permission]
-    {:title     (cond
-                  (= permission constants/dapp-permission-web3)
-                  name
-                  (= permission constants/dapp-permission-contact-code)
-                  (i18n/label :t/contact-code))
-     :size      :small
-     :accessory [icons/icon :main-icons/check {}]}))
-
-(views/defview dapps-permissions
-  []
-  (views/letsubs [permissions [:dapps/permissions]]
-    [list/flat-list
-     {:data      (vec (map prepare-items (vals permissions)))
-      :key-fn    (fn [_ i] (str i))
-      :render-fn list.item/list-item}]))
-
-(views/defview manage
-  []
-  (views/letsubs [{:keys [dapp permissions]} [:get-screen-params]
-                  {:keys [name]}             [:dapps-account]]
-    [:<>
-     [topbar/topbar {:title dapp}]
-     [list/flat-list
-      {:data      (vec (map (prepare-items-manage name) permissions))
-       :key-fn    (fn [_ i] (str i))
-       :render-fn list.item/list-item}]
-     [react/view
-      {:padding-vertical   16
-       :padding-horizontal 16}
-      [quo/button
-       {:theme    :negative
-        :on-press #(re-frame/dispatch [:dapps/revoke-access dapp])}
-       (i18n/label :t/revoke-access)]]]))

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

@@ -1,13 +0,0 @@
-(ns legacy.status-im.ui.screens.link-previews-settings.styles)
-
-(def link-preview-settings-image
-  {:height     100
-   :align-self :center
-   :margin-top 16})
-
-(def whitelist-container
-  {:flex-direction  :row
-   :justify-content :space-between})
-
-(def enable-all
-  {:align-self :flex-end})

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

@@ -1,67 +0,0 @@
-(ns legacy.status-im.ui.screens.link-previews-settings.views
-  (:require-macros [legacy.status-im.utils.views :as views])
-  (:require
-    [legacy.status-im.react-native.resources :as resources]
-    [legacy.status-im.ui.components.core :as components]
-    [legacy.status-im.ui.components.list.item :as list.item]
-    [legacy.status-im.ui.components.list.views :as list]
-    [legacy.status-im.ui.components.react :as react]
-    [legacy.status-im.ui.screens.link-previews-settings.styles :as styles]
-    [quo.core :as quo]
-    [re-frame.core :as re-frame]
-    [status-im.contexts.chat.messenger.messages.link-preview.events]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
-
-(defn prepare-urls-items-data
-  [link-previews-enabled-sites]
-  (fn [{:keys [title address]}]
-    (let [enabled? (contains? link-previews-enabled-sites title)]
-      {:title     title
-       :subtitle  address
-       :size      :small
-       :accessory :switch
-       :active    (contains? link-previews-enabled-sites title)
-       :on-press  #(re-frame/dispatch
-                    [:chat.ui/enable-link-previews title ((complement boolean) enabled?)])})))
-
-(views/defview link-previews-settings
-  []
-  (views/letsubs [link-previews-whitelist     [:link-previews-whitelist]
-                  link-previews-enabled-sites [:link-preview/enabled-sites]]
-    (let [all-enabled (= (count link-previews-whitelist) (count link-previews-enabled-sites))]
-      [:<>
-       [quo/page-nav
-        {:type       :title
-         :title      (i18n/label :t/chat-link-previews)
-         :background :blur
-         :icon-name  :i/close
-         :on-press   #(rf/dispatch [:navigate-back])}]
-       [react/image
-        {:source (resources/get-theme-image :unfurl)
-         :style  styles/link-preview-settings-image}]
-       [components/text {:style {:margin 16}}
-        (i18n/label :t/you-can-choose-preview-websites)]
-       [components/separator {:style {:margin-vertical 8}}]
-
-       [react/view styles/whitelist-container
-        [components/list-header (i18n/label :t/websites)]
-
-        (when (> (count link-previews-whitelist) 1)
-          [components/button
-           {:on-press #(re-frame/dispatch [:chat.ui/enable-all-link-previews
-                                           link-previews-whitelist
-                                           (not all-enabled)])
-            :type     :secondary
-            :style    styles/enable-all}
-           (if all-enabled
-             (i18n/label :t/disable-all)
-             (i18n/label :t/enable-all))])]
-       [list/flat-list
-        {:data      (vec (map (prepare-urls-items-data link-previews-enabled-sites)
-                              link-previews-whitelist))
-         :key-fn    (fn [_ i] (str i))
-         :render-fn list.item/list-item
-         :footer    [quo/text
-                     {:color :secondary
-                      :style {:margin 16}} (i18n/label :t/previewing-may-share-metadata)]}]])))

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/privacy_and_security_settings/delete_profile.cljs

@@ -1,81 +0,0 @@
-(ns legacy.status-im.ui.screens.privacy-and-security-settings.delete-profile
-  (:require
-    [legacy.status-im.ui.components.chat-icon.screen :as chat-icon.screen]
-    [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]
-    [legacy.status-im.ui.screens.privacy-and-security-settings.events :as delete-profile]
-    [re-frame.core :as re-frame]
-    [reagent.core :as reagent]
-    [status-im.contexts.profile.utils :as profile.utils]
-    [utils.i18n :as i18n]
-    [utils.security.core :as security]))
-
-(defn valid-password?
-  [password]
-  (>= (count password) 6))
-
-(defn on-delete-profile
-  [password]
-  #(do
-     (re-frame/dispatch
-      [::delete-profile/delete-profile @password])
-     (reset! password nil)))
-
-(defn delete-profile
-  []
-  (let [password       (reagent/atom nil)
-        text-input-ref (atom nil)]
-    (fn []
-      (let [profile               @(re-frame/subscribe [:profile/profile])
-            error                 @(re-frame/subscribe [:delete-profile/error])
-            keep-keys-on-keycard? @(re-frame/subscribe
-                                    [:delete-profile/keep-keys-on-keycard?])]
-        (when (and @text-input-ref error (not @password))
-          (.clear ^js @text-input-ref))
-        [react/keyboard-avoiding-view {:style {:flex 1}}
-         [react/scroll-view {:style {:flex 1}}
-          [react/view {:style {:align-items :center}}
-           [quo/text
-            {:weight :bold
-             :size   :x-large}
-            (i18n/label :t/delete-profile)]]
-          [list.item/list-item
-           {:title (profile.utils/displayed-name profile)
-            :icon  [chat-icon.screen/contact-icon-contacts-tab profile]}]
-          [quo/text
-           {:style {:margin-horizontal 24}
-            :align :center
-            :color :negative}
-           (i18n/label :t/delete-profile-warning)]
-          [quo/text-input
-           {:style             {:margin-horizontal 36
-                                :margin-top        36}
-            :show-cancel       false
-            :secure-text-entry true
-            :return-key-type   :next
-            :on-submit-editing nil
-            :auto-focus        true
-            :on-change-text    #(reset! password (security/mask-data %))
-            :bottom-value      36
-            :get-ref           #(reset! text-input-ref %)
-            :error             (when (and error (not @password))
-                                 (if (= :wrong-password error)
-                                   (i18n/label :t/wrong-password)
-                                   (str error)))}]]
-         [react/view {:style {:align-items :center}}
-          [quo/separator]
-          (when (not keep-keys-on-keycard?)
-            [quo/text
-             {:style {:margin-horizontal 24 :margin-bottom 16}
-              :align :center
-              :color :negative}
-             (i18n/label :t/delete-profile-warning)])
-          [react/view
-           {:style {:margin-vertical 8}}
-           [quo/button
-            {:on-press            (on-delete-profile password)
-             :theme               :negative
-             :accessibility-label :delete-profile-confirm
-             :disabled            ((complement valid-password?) @password)}
-            (i18n/label :t/delete-profile)]]]]))))

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

@@ -1,73 +0,0 @@
-(ns legacy.status-im.ui.screens.privacy-and-security-settings.events
-  (:require
-    [clojure.string :as string]
-    [legacy.status-im.utils.deprecated-types :as types]
-    [native-module.core :as native-module]
-    [re-frame.core :as re-frame]
-    [taoensso.timbre :as log]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]
-    [utils.security.core :as security]))
-
-(defn safe-blank?
-  [s]
-  (or (not s)
-      (string/blank? s)))
-
-(re-frame/reg-fx
- ::delete-profile
- (fn [{:keys [address key-uid callback masked-password]}]
-   (let [hashed-password
-         (-> masked-password
-             security/safe-unmask-data
-             native-module/sha3)]
-     (native-module/verify
-      address
-      hashed-password
-      (fn [result]
-        (let [{:keys [error]} (types/json->clj result)]
-          (log/info "[delete-profile] verify-password" result error)
-          (if-not (safe-blank? error)
-            (callback :wrong-password nil)
-            (native-module/delete-multiaccount
-             key-uid
-             (fn [result]
-               (let [{:keys [error]} (types/json->clj result)]
-                 (callback error nil)))))))))))
-
-(rf/defn delete-profile
-  {:events [::delete-profile]}
-  [{:keys [db] :as cofx} masked-password]
-  (log/info "[delete-profile] delete")
-  (let [{:keys [key-uid wallet-root-address]} (:profile/profile db)]
-    {:db (dissoc db :delete-profile/error)
-     ::delete-profile
-     {:masked-password masked-password
-      :key-uid key-uid
-      :address wallet-root-address
-      :callback
-      (fn [error result]
-        (log/info "[delete-profile] callback" error)
-        (if (safe-blank? error)
-          (re-frame/dispatch [::on-delete-profile-success result])
-          (re-frame/dispatch [::on-delete-profile-failure error])))}}))
-
-(rf/defn on-delete-profile-success
-  {:events [::on-delete-profile-success]}
-  [cofx]
-  (log/info "[delete-profile] on-success")
-  {:effects.utils/show-popup
-   {:title      (i18n/label :t/profile-deleted-title)
-    :content    (i18n/label :t/profile-deleted-content)
-    :on-dismiss #(re-frame/dispatch [:logout])}})
-
-(rf/defn on-delete-profile-failure
-  {:events [::on-delete-profile-failure]}
-  [{:keys [db]} error]
-  (log/info "[delete-profile] on-failure" error)
-  {:db (assoc db :delete-profile/error error)})
-
-(rf/defn keep-keys-on-keycard
-  {:events [::keep-keys-on-keycard]}
-  [{:keys [db] :as cofx} checked?]
-  {:db (assoc-in db [:delete-profile/keep-keys-on-keycard?] checked?)})

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

@@ -1,34 +0,0 @@
-(ns legacy.status-im.ui.screens.privacy-and-security-settings.messages-from-contacts-only
-  (:require-macros [legacy.status-im.utils.views :as views])
-  (:require
-    [legacy.status-im.multiaccounts.update.core :as multiaccounts.update]
-    [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]
-    [utils.re-frame :as rf]))
-
-(rf/defn handle-messages-from-contacts-only-switched
-  {:events [::messages-from-contacts-only-switched]}
-  [cofx value]
-  (multiaccounts.update/multiaccount-update cofx
-                                            :messages-from-contacts-only
-                                            value
-                                            {}))
-
-(views/defview messages-from-contacts-only-view
-  []
-  (views/letsubs [{:keys [messages-from-contacts-only]} [:profile/profile]]
-    [react/view {:margin-top 8}
-     [list.item/list-item
-      {:active    (not messages-from-contacts-only)
-       :accessory :radio
-       :title     (i18n/label :t/anyone)
-       :on-press  #(re-frame/dispatch [::messages-from-contacts-only-switched false])}]
-     [list.item/list-item
-      {:active             messages-from-contacts-only
-       :accessory          :radio
-       :title              (i18n/label :t/contacts)
-       :subtitle           (i18n/label :t/messages-from-contacts-only-subtitle)
-       :subtitle-max-lines 4
-       :on-press           #(re-frame/dispatch [::messages-from-contacts-only-switched true])}]]))

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

@@ -1,175 +0,0 @@
-(ns legacy.status-im.ui.screens.privacy-and-security-settings.views
-  (:require
-    [legacy.status-im.multiaccounts.reset-password.core :as reset-password]
-    [legacy.status-im.multiaccounts.update.core :as multiaccounts.update]
-    [legacy.status-im.ui.components.core :as components]
-    [legacy.status-im.ui.components.list.item :as list.item]
-    [legacy.status-im.ui.components.react :as react]
-    [quo.core :as quo]
-    [re-frame.core :as re-frame]
-    [react-native.platform :as platform]
-    [status-im.config :as config]
-    [status-im.constants :as constants]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf])
-  (:require-macros [legacy.status-im.utils.views :as views]))
-
-(defn separator
-  []
-  [components/separator {:style {:margin-vertical 8}}])
-
-(def titles
-  {constants/profile-pictures-visibility-contacts-only (i18n/label :t/recent-recipients)
-   constants/profile-pictures-visibility-everyone      (i18n/label :t/everyone)
-   constants/profile-pictures-visibility-none          (i18n/label :t/none)
-   constants/profile-pictures-show-to-contacts-only    (i18n/label :t/recent-recipients)
-   constants/profile-pictures-show-to-everyone         (i18n/label :t/everyone)
-   constants/profile-pictures-show-to-none             (i18n/label :t/none)})
-
-(views/defview privacy-and-security
-  []
-  (views/letsubs [{:keys [preview-privacy?
-                          messages-from-contacts-only
-                          webview-allow-permission-requests?
-                          opensea-enabled?
-                          profile-pictures-visibility]}
-                  [:profile/profile]
-                  has-picture [:profile/has-picture]
-                  profile-pictures-show-to [:multiaccount/profile-pictures-show-to]]
-    [:<>
-     [quo/page-nav
-      {:type       :no-title
-       :background :blur
-       :icon-name  :i/close
-       :on-press   #(rf/dispatch [:navigate-back])}]
-     [react/scroll-view {:padding-vertical 8}
-      [components/list-header (i18n/label :t/privacy)]
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/set-dapp-access-permissions)
-        :on-press            #(re-frame/dispatch [:navigate-to :dapps-permissions])
-        :accessibility-label :dapps-permissions-button
-        :chevron             true}]
-      [list.item/list-item
-       {:size                    :small
-        :title                   (if platform/android?
-                                   (i18n/label :t/hide-content-when-switching-apps)
-                                   (i18n/label :t/hide-content-when-switching-apps-ios))
-        :container-margin-bottom 8
-        :active                  preview-privacy?
-        :accessory               :switch
-        :on-press                #(re-frame/dispatch
-                                   [:profile.settings/change-preview-privacy
-                                    ((complement boolean) preview-privacy?)])}]
-      (when config/collectibles-enabled?
-        [list.item/list-item
-         {:size                    :small
-          :title                   (i18n/label :t/display-collectibles)
-          :container-margin-bottom 8
-          :active                  opensea-enabled?
-          :accessory               :switch
-          :on-press                #(re-frame/dispatch
-                                     [::multiaccounts.update/toggle-opensea-nfts-visiblity
-                                      (not opensea-enabled?)])}])
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/chat-link-previews)
-        :chevron             true
-        :on-press            #(re-frame/dispatch [:open-modal :legacy-link-previews-settings])
-        :accessibility-label :chat-link-previews}]
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/accept-new-chats-from)
-        :chevron             true
-        :accessory           :text
-        :accessory-text      (i18n/label (if messages-from-contacts-only
-                                           :t/contacts
-                                           :t/anyone))
-        :on-press            #(re-frame/dispatch [:navigate-to :messages-from-contacts-only])
-        :accessibility-label :accept-new-chats-from}]
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/reset-password)
-        :chevron             true
-        :accessory           :text
-        :on-press            #(do
-                                (re-frame/dispatch [::reset-password/clear-form-vals])
-                                (re-frame/dispatch [:navigate-to :reset-password]))
-        :accessibility-label :reset-password}]
-      (when platform/android?
-        [list.item/list-item
-         {:size               :small
-          :title              (i18n/label :t/webview-camera-permission-requests)
-          :active             webview-allow-permission-requests?
-          :accessory          :switch
-          :subtitle           (i18n/label :t/webview-camera-permission-requests-subtitle)
-          :subtitle-max-lines 2
-          :on-press           #(re-frame/dispatch
-                                [:profile.settings/profile-update
-                                 :webview-allow-permission-requests?
-                                 ((complement boolean) webview-allow-permission-requests?)])}])
-      [separator]
-      [components/list-header (i18n/label :t/privacy-photos)]
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/show-profile-pictures)
-        :accessibility-label :show-profile-pictures
-        :accessory           :text
-        :accessory-text      (get titles profile-pictures-visibility)
-        :on-press            #(re-frame/dispatch [:navigate-to :privacy-and-security-profile-pic])
-        :chevron             true}]
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/show-profile-pictures-to)
-        :disabled            (not has-picture)
-        :accessibility-label :show-profile-pictures-to
-        :accessory           :text
-        :accessory-text      (get titles profile-pictures-show-to)
-        :on-press            #(re-frame/dispatch [:navigate-to
-                                                  :privacy-and-security-profile-pic-show-to])
-        :chevron             true}]
-
-      [separator]
-      [list.item/list-item
-       {:size                :small
-        :theme               :negative
-        :title               (i18n/label :t/delete-my-profile)
-        :on-press            #(re-frame/dispatch [:navigate-to :delete-profile])
-        :accessibility-label :dapps-permissions-button
-        :chevron             true}]]]))
-
-(defn ppst-radio-item
-  [id value]
-  [list.item/list-item
-   {:active    (= value id)
-    :accessory :radio
-    :title     (get titles id)
-    :on-press  #(re-frame/dispatch [:profile.settings/change-profile-pictures-show-to id])}])
-
-(views/defview profile-pic-show-to
-  []
-  (views/letsubs [{:keys [profile-pictures-show-to]} [:profile/profile]]
-    [react/view {:margin-top 8}
-     [ppst-radio-item constants/profile-pictures-show-to-everyone profile-pictures-show-to]
-     [ppst-radio-item constants/profile-pictures-show-to-contacts-only profile-pictures-show-to]
-     [ppst-radio-item constants/profile-pictures-show-to-none profile-pictures-show-to]
-
-     [react/view {:style {:margin-horizontal 16}}
-      [components/text {:color :secondary}
-       (i18n/label :t/privacy-show-to-warning)]]]))
-
-(defn ppvf-radio-item
-  [id value]
-  [list.item/list-item
-   {:active    (= value id)
-    :accessory :radio
-    :title     (get titles id)
-    :on-press  #(re-frame/dispatch [:profile.settings/profile-update :profile-pictures-visibility id])}])
-
-(views/defview profile-pic
-  []
-  (views/letsubs [{:keys [profile-pictures-visibility]} [:profile/profile]]
-    [react/view {:margin-top 8}
-     [ppvf-radio-item constants/profile-pictures-visibility-everyone profile-pictures-visibility]
-     [ppvf-radio-item constants/profile-pictures-visibility-contacts-only profile-pictures-visibility]
-     [ppvf-radio-item constants/profile-pictures-visibility-none profile-pictures-visibility]]))

src/legacy/status_im/ui/screens/profile/user/views.cljs

@@ -13,12 +13,6 @@
   []
   [rn/scroll-view {:flex 1}
    [components/list-header "Legacy settings"]
-   [list.item/list-item
-    {:icon                :main-icons/security
-     :title               (i18n/label :t/privacy-and-security)
-     :accessibility-label :privacy-and-security-settings-button
-     :chevron             true
-     :on-press            #(re-frame/dispatch [:open-modal :legacy-privacy-and-security])}]
    [list.item/list-item
     {:icon                :main-icons/mobile
      :title               (i18n/label :t/sync-settings)

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

@@ -8,12 +8,10 @@
     [legacy.status-im.ui.screens.bug-report :as bug-report]
     [legacy.status-im.ui.screens.communities.invite :as communities.invite]
     [legacy.status-im.ui.screens.communities.members :as members]
-    [legacy.status-im.ui.screens.dapps-permissions.views :as dapps-permissions]
     [legacy.status-im.ui.screens.default-sync-period-settings.view :as default-sync-period-settings]
     [legacy.status-im.ui.screens.fleet-settings.views :as fleet-settings]
     [legacy.status-im.ui.screens.glossary.view :as glossary]
     [legacy.status-im.ui.screens.help-center.views :as help-center]
-    [legacy.status-im.ui.screens.link-previews-settings.views :as link-previews-settings]
     [legacy.status-im.ui.screens.log-level-settings.views :as log-level-settings]
     [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
     [legacy.status-im.ui.screens.notifications-settings.views :as notifications-settings]
@@ -21,10 +19,6 @@
     [legacy.status-im.ui.screens.offline-messaging-settings.views :as offline-messaging-settings]
     [legacy.status-im.ui.screens.pairing.views :as pairing]
     [legacy.status-im.ui.screens.peers-stats :as peers-stats]
-    [legacy.status-im.ui.screens.privacy-and-security-settings.delete-profile :as delete-profile]
-    [legacy.status-im.ui.screens.privacy-and-security-settings.messages-from-contacts-only :as
-     messages-from-contacts-only]
-    [legacy.status-im.ui.screens.privacy-and-security-settings.views :as privacy-and-security]
     [legacy.status-im.ui.screens.profile.seed.views :as profile.seed]
     [legacy.status-im.ui.screens.profile.user.views :as profile.user]
     [legacy.status-im.ui.screens.progress.views :as progress]
@@ -53,7 +47,8 @@
   []
   [;;PROGRESS
    {:name      :progress
-    :options   {:insets {:top? true}}
+    :options   {:insets {:top? true}
+                :theme  :dark}
     :component progress/progress}
 
    ;;COMMUNITY
@@ -93,17 +88,6 @@
                 :insets {:top? platform/android?}}
     :component profile.user/legacy-settings}
 
-   ;; PRIVACY AND SECURITY
-   {:name      :legacy-privacy-and-security
-    :options   {:topBar {:visible false}
-                :insets {:top? platform/android?}}
-    :component privacy-and-security/privacy-and-security}
-
-   {:name      :legacy-link-previews-settings
-    :options   {:topBar {:visible false}
-                :insets {:top? platform/android?}}
-    :component link-previews-settings/link-previews-settings}
-
    ;; SYNC
    {:name      :legacy-sync-settings
     :options   {:topBar {:visible false}
@@ -149,25 +133,6 @@
    {:name      :edit-mailserver
     :options   {:insets {:top? true}}
     :component edit-mailserver/edit-mailserver}
-   {:name      :dapps-permissions
-    :options   {:topBar (topbar-options :t/dapps-permissions)
-                :insets {:top? true}}
-    :component dapps-permissions/dapps-permissions}
-   {:name      :messages-from-contacts-only
-    :options   {:topBar (topbar-options :t/accept-new-chats-from)
-                :insets {:top? true}}
-    :component messages-from-contacts-only/messages-from-contacts-only-view}
-   {:name      :privacy-and-security-profile-pic-show-to
-    :options   {:topbar (topbar-options :t/show-profile-pictures-to)
-                :insets {:top? true}}
-    :component privacy-and-security/profile-pic-show-to}
-   {:name      :privacy-and-security-profile-pic
-    :options   {:topBar (topbar-options :t/show-profile-pictures)
-                :insets {:top? true}}
-    :component privacy-and-security/profile-pic}
-   {:name      :manage-dapps-permissions
-    :options   {:insets {:top? true}}
-    :component dapps-permissions/manage}
    {:name      :rpc-usage-info
     :options   {:topBar (topbar-options :t/rpc-usage-info)
                 :insets {:top? true}}
@@ -195,9 +160,6 @@
     :options   {:topBar (topbar-options :t/reset-password)
                 :insets {:top? true}}
     :component reset-password/reset-password}
-   {:name      :delete-profile
-    :insets    {:bottom? true}
-    :component delete-profile/delete-profile}
    {:name      :default-sync-period-settings
     :options   {:topBar (topbar-options :t/default-sync-period)
                 :insets {:top? true}}

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/utils/test.cljs

@@ -1,130 +0,0 @@
-(ns legacy.status-im.utils.test
-  (:require
-    [legacy.status-im.utils.deprecated-types :as types]
-    [re-frame.core :as re-frame]))
-
-(def native-status (js/require "../../modules/react-native-status/nodejs/bindings"))
-
-(def fs (js/require "fs"))
-(def path (js/require "path"))
-(def os (js/require "os"))
-
-(def tmpdir (.tmpdir os))
-
-(def test-dir-prefix (.join path tmpdir "status-mobile-tests"))
-
-(def test-dir (.mkdtempSync fs test-dir-prefix))
-
-(def initialized? (atom false))
-
-(defn signal-received-callback
-  [a]
-  (re-frame/dispatch [:signals/signal-received a]))
-
-;; We poll for signals, could not get callback working
-(defn init!
-  []
-  (when-not @initialized?
-    (.setSignalEventCallback native-status)
-    (reset! initialized? true)
-    (js/setInterval (fn []
-                      (.pollSignal native-status signal-received-callback)
-                      100))))
-
-(def ui-helper
-  (clj->js
-   {:clearCookies     identity
-    :clearStorageAPIs identity}))
-
-(def encryption-utils
-  (clj->js
-   {:sha3
-    (fn [s] (.sha3 native-status s))
-    :setBlankPreviewFlag
-    identity
-    :encodeTransfer
-    (fn [to-norm amount-hex]
-      (.encodeTransfer native-status to-norm amount-hex))
-    :hexToNumber
-    (fn [hex] (.hexToNumber native-status hex))
-    :decodeParameters
-    (fn [decode-param-json]
-      (.decodeParameters native-status decode-param-json))
-    :numberToHex
-    (fn [num-str] (.numberToHex native-status num-str))
-    :initKeystore
-    (fn [key-uid callback]
-      (callback (.initKeystore native-status
-                               (str test-dir "/keystore/" key-uid))))
-    :multiformatDeserializePublicKey
-    (fn [public-key deserialization-key callback]
-      (callback (.multiformatDeserializePublicKey
-                 native-status
-                 public-key
-                 deserialization-key)))}))
-
-(def account-manager
-  (clj->js
-   {:openAccounts
-    (fn [callback]
-      (callback (.openAccounts native-status test-dir)))
-    :createAccountAndLogin
-    (fn [request] (.createAccountAndLogin native-status request))
-    :logout
-    (fn [] (.logout native-status))
-    :multiAccountImportMnemonic
-    (fn [json callback]
-      (callback (.multiAccountImportMnemonic native-status json)))
-    :multiAccountLoadAccount
-    (fn [json callback]
-      (callback (.multiAccountLoadAccount native-status json)))
-    :multiAccountDeriveAddresses
-    (fn [json callback]
-      (callback (.multiAccountDeriveAddresses native-status json)))
-    :multiAccountGenerateAndDeriveAddresses
-    (fn [json callback]
-      (callback (.multiAccountGenerateAndDeriveAddresses native-status json)))
-    :multiAccountStoreDerived
-    (fn [json callback]
-      (callback (.multiAccountStoreDerivedAccounts native-status json)))}))
-
-(def utils
-  (clj->js
-   {:backupDisabledDataDir
-    (fn [] (str test-dir "/backup"))
-    :keystoreDir (fn [] "")
-    :toChecksumAddress
-    (fn [address] (.toChecksumAddress native-status address))
-    :checkAddressChecksum
-    (fn [address] (.checkAddressChecksum native-status address))
-    :validateMnemonic
-    (fn [json callback] (callback (.validateMnemonic native-status json)))
-    :isAddress
-    (fn [address] (.isAddress native-status address))}))
-
-(def log-manager
-  (clj->js
-   {:logFileDirectory
-    (fn [] (str test-dir "/log"))
-    :initLogging
-    (fn [enabled mobile-system log-level callback]
-      (callback (.initLogging native-status
-                              (types/clj->json {:Enabled      enabled
-                                                :MobileSystem mobile-system
-                                                :Level        log-level
-                                                :File         (str test-dir "/geth.log")}))))}))
-
-(def network
-  (clj->js
-   {:callPrivateRPC
-    (fn [payload callback]
-      (callback (.callPrivateRPC native-status payload)))}))
-
-(def status
-  (clj->js
-   {:getNodeConfig
-    (fn [] (types/clj->json {:WakuV2Config ""}))
-    :fleets
-    (fn [] (.fleets native-status))
-    :startLocalNotifications
-    identity}))

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/native_module/core.cljs

@@ -72,10 +72,12 @@
   (log/debug "[native-module] init-keystore" key-uid)
   (.initKeystore ^js (encryption) key-uid callback))
 
-(defn open-accounts
-  [callback]
-  (log/debug "[native-module] open-accounts")
-  (.openAccounts ^js (account-manager) #(callback (types/json->clj %))))
+(defn initialize-application
+  [request callback]
+  (log/debug "[native-module] initialize-application")
+  (.initializeApplication ^js (account-manager)
+                          (types/clj->json request)
+                          #(callback (types/json->clj %))))
 
 (defn prepare-dir-and-update-config
   [key-uid config callback]
@@ -513,6 +515,14 @@
   (let [result (.checkAddressChecksum ^js (utils) address)]
     (types/json->clj result)))
 
+(defn toggle-centralized-metrics
+  [enabled callback]
+  (.toggleCentralizedMetrics ^js (status) (types/clj->json {:enabled enabled}) callback))
+
+(defn add-centralized-metric
+  [metric]
+  (.addCentralizedMetric ^js (status) (types/clj->json metric) #(log/debug "pushed metric" % metric)))
+
 (defn address?
   [address]
   (log/debug "[native-module] address?")
@@ -533,6 +543,13 @@
    (log/debug "[native-module] validate-mnemonic")
    (.validateMnemonic ^js (utils) mnemonic callback)))
 
+(defn validate-connection-string
+  [connection-string]
+  (log/debug "[native-module] validate-connection-string")
+  (->> connection-string
+       (.validateConnectionString ^js (utils))
+       types/json->clj))
+
 (defn delete-multiaccount
   "Delete multiaccount from database, deletes multiaccount's database and
   key files."
@@ -643,7 +660,6 @@
    (native-utils/promisify-native-module-call create-account-from-private-key private-key))
   ([private-key callback]
    (log/debug "[native-module] create-account-from-private-key")
-
    (.createAccountFromPrivateKey ^js (account-manager)
                                  (types/clj->json {:privateKey private-key})
                                  callback)))

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

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

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

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

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

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

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

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

src/quo/components/info/info_message.cljs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/quo/components/list_items/user.cljs

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

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

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

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

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

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

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

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

@@ -1,17 +1,39 @@
 (ns quo.components.profile.expanded-collectible.view
   (:require
     [clojure.string :as string]
-    [promesa.core :as promesa]
     [quo.components.counter.collectible-counter.view :as collectible-counter]
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
     [quo.components.profile.expanded-collectible.style :as style]
     [quo.foundations.colors :as colors]
+    [quo.foundations.gradients :as gradients]
     [quo.theme]
     [react-native.core :as rn]
+    [react-native.reanimated :as reanimated]
     [schema.core :as schema]
     [utils.i18n :as i18n]))
 
+(def loader-out 650)
+(def image-in 1000)
+(def error-wait-time 800)
+
+(defn on-load-end
+  [{:keys [loader-opacity image-opacity]}]
+  (reanimated/animate loader-opacity 0 loader-out)
+  (reanimated/animate image-opacity 1 image-in))
+
+(defn on-load-error
+  [set-error]
+  (js/setTimeout set-error error-wait-time))
+
+(defn- loading-image
+  [{:keys [theme gradient-color-index loader-opacity aspect-ratio]}]
+  [reanimated/view {:style (style/loading-image-with-opacity loader-opacity)}
+   [gradients/view
+    {:theme           theme
+     :container-style (style/gradient-view aspect-ratio)
+     :color-index     gradient-color-index}]])
+
 (defn- counter-view
   [counter]
   [collectible-counter/view
@@ -21,7 +43,7 @@
 (defn- fallback-view
   [{:keys [label theme counter on-mount]}]
   (rn/use-mount on-mount)
-  [rn/view {:style (style/fallback {:theme theme})}
+  [rn/view {:style (style/fallback theme)}
    [counter-view counter]
    [rn/view
     [icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
@@ -31,56 +53,71 @@
      :style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
     label]])
 
+(defn- collectible-image
+  [{:keys [aspect-ratio theme gradient-color-index supported-file? set-error native-ID
+           square? image-src on-collectible-load counter]}]
+  (let [loader-opacity (reanimated/use-shared-value (if supported-file? 1 0))
+        image-opacity  (reanimated/use-shared-value (if supported-file? 0 1))]
+    [:<>
+     [loading-image
+      {:aspect-ratio         aspect-ratio
+       :loader-opacity       loader-opacity
+       :theme                theme
+       :gradient-color-index gradient-color-index}]
+
+     [reanimated/view {:style (style/supported-file image-opacity)}
+      [rn/image
+       {:style       (style/image square? aspect-ratio theme)
+        :source      image-src
+        :native-ID   native-ID
+        :on-load-end (fn []
+                       (on-load-end {:loader-opacity loader-opacity
+                                     :image-opacity  image-opacity}))
+        :on-error    #(on-load-error set-error)
+        :on-load     on-collectible-load}]
+      (when counter
+        [counter-view counter])
+      [rn/view {:style (style/collectible-border theme)}]]]))
+
 (defn view-internal
   [{:keys [container-style square? on-press counter image-src native-ID supported-file?
-           on-collectible-load]}]
-  (let [theme                          (quo.theme/use-theme)
-        [image-size set-image-size]    (rn/use-state {})
-        [image-error? set-image-error] (rn/use-state (or (nil? image-src)
-                                                         (string/blank? image-src)))]
-    (rn/use-effect
-     (fn []
-       (promesa/let [[image-width image-height] (rn/image-get-size image-src)]
-         (set-image-size {:width        image-width
-                          :height       image-height
-                          :aspect-ratio (/ image-width image-height)})))
-     [image-src])
+           on-collectible-load aspect-ratio gradient-color-index]
+    :or   {gradient-color-index :gradient-1
+           on-collectible-load  (fn [])}}]
+  (let [theme              (quo.theme/use-theme)
+        [error? set-error] (rn/use-state (or (nil? image-src)
+                                             (string/blank? image-src)))]
     [rn/pressable
-     {:on-press            (when (and (not image-error?) supported-file?) on-press)
+     {:style               (merge container-style (style/container aspect-ratio))
       :accessibility-label :expanded-collectible
-      :style               (merge container-style style/container)}
-     (cond
-       (not supported-file?)
+      :on-press            (when (and (not error?) supported-file?)
+                             on-press)}
+     (if (or (not supported-file?) error?)
        [fallback-view
-        {:label    (i18n/label :t/unsupported-file)
+        {:label    (i18n/label (if-not supported-file?
+                                 :t/unsupported-file
+                                 :t/cant-fetch-info))
          :counter  counter
          :theme    theme
          :on-mount on-collectible-load}]
-
-       image-error?
-       [fallback-view
-        {:label    (i18n/label :t/cant-fetch-info)
-         :counter  counter
-         :theme    theme
-         :on-mount on-collectible-load}]
-
-       :else
-       [rn/view
-        [rn/image
-         {:style     (style/image square? (:aspect-ratio image-size) theme)
-          :source    image-src
-          :native-ID native-ID
-          :on-error  #(set-image-error true)
-          :on-load   on-collectible-load}]
-        (when counter
-          [counter-view counter])
-        [rn/view {:style (style/collectible-border theme)}]])]))
+       [collectible-image
+        {:aspect-ratio         aspect-ratio
+         :theme                theme
+         :supported-file?      supported-file?
+         :set-error            set-error
+         :native-ID            native-ID
+         :square?              square?
+         :image-src            image-src
+         :on-collectible-load  on-collectible-load
+         :counter              counter
+         :gradient-color-index gradient-color-index}])]))
 
 (def ?schema
   [:=>
    [: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]]
@@ -88,7 +125,8 @@
       [:square? {:optional true} [:maybe boolean?]]
       [:counter {:optional true} [:maybe string?]]
       [:on-press {:optional true} [:maybe fn?]]
-      [:on-collectible-load {:optional true} [:maybe fn?]]]]]
+      [:on-collectible-load {:optional true} [:maybe fn?]]
+      [:gradient-color-index {:optional true} [:maybe keyword?]]]]]
    :any])
 
 (def view (schema/instrument #'view-internal ?schema))

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -51,7 +51,7 @@
 (defn color
   [blur? theme]
   {:color (if blur?
-            colors/white-opa-70
+            colors/white-opa-40
             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
 
 (defn label-dot

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/context_tag/schema.cljs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/quo/core.cljs

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

src/quo/core_spec.cljs

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

src/quo/foundations/resources.cljs

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

src/react_native/wallet_connect.cljs

@@ -22,6 +22,8 @@
    (clj->js {:proposal            proposal
              :supportedNamespaces supported-namespaces})))
 
+;; Get an error from this list:
+;; https://github.com/WalletConnect/walletconnect-monorepo/blob/c6e9529418a0c81d4efcc6ac4e61f242a50b56c5/packages/utils/src/errors.ts
 (defn get-sdk-error
   [error-key]
   (getSdkError error-key))

src/status_im/common/biometric/utils.cljs

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

src/status_im/common/bottom_sheet/style.cljs

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

src/status_im/common/bottom_sheet/view.cljs

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

src/status_im/common/check_before_syncing/style.cljs

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

src/status_im/common/check_before_syncing/view.cljs

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

src/status_im/common/contact_list_item/view.cljs

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

src/status_im/common/enter_seed_phrase/style.cljs

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