test

reabstract reanimated
test updates rebase rebase rebase https://github.com/status-im/status-go/compare/551715f4...550de3bf rebase https://github.com/status-im/status-go/compare/551715f4...550de3bf fix: image actions drawer lint fix: image action drawer refactor lint lint updates updates updates updates updates feat: zoomable image updates updates feat: zoomable image lint re-order arguments updates refactor refactor refactor refactor update event name refactor rebase feat: landscape feat: landscape udpates updates updates updates updates updates updates updates updates updates rebase updates feat: landscape mode updates updates updates updates updates updates updates feat: landscape mode feat: landscape mode add todo fix tests fix tests refactor refactor refactor refactor refactor refactor refactor refactor rollback lint rollback refactor rebase refactor fix arg feat: more lightbox gestures updates updates updates updates updates updates updates updates updates lint refactor remove extra line updates updates comment
2023-03-10 10:26:11 +04:00 · 2023-03-07 10:30:04 +04:00 · 2023-03-06 15:57:26 +01:00 · 2023-03-06 06:42:30 -08:00 · 2023-03-06 17:26:29 +05:30 · 2023-03-06 17:16:49 +05:30
485 changed files with 18944 additions and 16915 deletions
@@ -16,7 +16,11 @@

             ;; respect blank line
             ;; https://github.com/kkinnear/zprint/blob/main/doc/reference.md#respect-bl
-             :respect-bl]
+             :respect-bl
+
+             ;; hang multiline left-hand-thing 
+             ;; https://github.com/kkinnear/zprint/issues/273
+             :multi-lhs-hang]
 :fn-map
 {"reg-sub"         :arg1-pair
  "h/describe"      :arg1-body
@@ -349,8 +349,8 @@ component-test-watch: ##@ Watch tests and re-run no changes to cljs files
 component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
-component-test: ##@test Run tests once in NodeJS
-	# Here we create the gyp bindings for nodejs
+component-test: ##@test Run component tests once in NodeJS
+	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js

@@ -68,6 +68,14 @@ pipeline {
        }
      }
    }
+    stage('Component Tests') {
+      steps {
+        sh """#!/bin/bash
+          set -eo pipefail
+          make component-test 2>&1 | tee -a ${LOG_FILE}
+        """
+      }
+    }
    stage('Upload') {
      steps {
        script {
@@ -0,0 +1,47 @@
+library 'status-jenkins-lib@v1.6.6'
+
+pipeline {
+  agent {
+    label 'linux'
+  }
+
+  triggers {
+    cron('H 5 * * *')
+  }
+
+  options {
+    timestamps()
+    /* Prevent Jenkins jobs from running forever */
+    timeout(time: 15, unit: 'MINUTES')
+    /* Disable concurrent jobs */
+    disableConcurrentBuilds()
+    /* Don't keep more than 50 builds */
+    buildDiscarder(logRotator(numToKeepStr: '10'))
+  }
+
+  stages {
+    stage('Get Nodes') {
+      steps { script {
+        stagePerNode = nodesByLabel('macos').collectEntries {
+          ["${it}" : generateNodeCleanupStage(it)]
+        }
+      } }
+    }
+
+    stage('Clean Xcode') {
+      steps { script {
+        parallel stagePerNode
+      } }
+    }
+  }
+}
+
+def generateNodeCleanupStage(nodeLabel) {
+  return { stage(nodeLabel) {
+    node(nodeLabel) {
+      dir('/Users/jenkins/Library/Developer/Xcode') {
+        sh 'rm -fr Archives DerivedData'
+      }
+    }
+  } }
+}
@@ -1,4 +1,4 @@
-# Guidelines
+# Code Style Guidelines

 >The goal of this document is to help all contributors (core and external) to
 >write code in _unison_ and help establish good practices that serve the Status
@@ -77,7 +77,21 @@ Joshua Comeau.
 [rn/view {:style {:padding-horizontal 20}}]
 ```

-#### Styles def vs defn
+### Don't prepend booleans with is-
+
+It is a common practice in JavaScript and other languages to prepend boolean variable names with `is-*`. 
+In ClojureScript it is common practice to suffix boolean variable names with a `?`. 
+There is no need for both of these and so it is preferable to stick with the latter.
+
+```clojure
+;; bad
+(let [is-open? true] ...)
+
+;; good
+(let [open? true] ...)
+```
+
+### Styles def vs defn

 Always use `def` over `defn`, unless the style relies on dynamic values, such as
 deref'ed atoms.
@@ -170,7 +184,7 @@ Use the simple `defn` to declare components. Don't use `utils.views/defview` and
    (do-something window-width)))
 ```

-#### Use `[]` instead of `()` in Reagent components
+### Use `[]` instead of `()` in Reagent components

 - The `()` version [does NOT work with Form-2 and
  Form-3](https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md#a-further-significant-why)
@@ -18,8 +18,6 @@ Also test watcher can be launched. It will re-run the entire test suite when any

 Developers can also manually change the shadow-cljs option `:ns-regex` to control which namespaces the test runner should pick. 

-
-
 ## Testing with REPL

 The most convenient way to develop and run test locally is using REPL:
@@ -52,3 +50,19 @@ In the video below, you can see two buffers side-by-side. On the left the source
 Here I'm showing a terminal-only experience using Tmux (left pane Emacs, right pane the output coming from running the make target).

 [2022-12-19 13-17.webm](https://user-images.githubusercontent.com/46027/208471199-1909c446-c82d-42a0-9350-0c15ca562713.webm)
+
+## Component tests
+
+To run tests:
+
+```
+   make component-test
+```
+
+Also test watcher can be launched. It will re-run the entire test suite when any file is modified
+
+```
+   make component-test-watch
+```
+
+Check [component tests doc](./component-tests-overview.md) for more.
@@ -228,6 +228,8 @@ PODS:
    - React-Core
  - react-native-netinfo (4.7.0):
    - React
+  - react-native-orientation-locker (1.5.0):
+    - React-Core
  - react-native-randombytes (3.6.1):
    - React-Core
  - react-native-safe-area-context (2.0.0):
@@ -238,7 +240,7 @@ PODS:
    - React
  - react-native-status (1.0.0):
    - React
-  - react-native-status-keycard (2.5.38):
+  - react-native-status-keycard (2.5.39):
    - Keycard
    - React
  - react-native-webview (11.16.0):
@@ -433,6 +435,7 @@ DEPENDENCIES:
  - react-native-lottie-splash-screen (from `../node_modules/react-native-lottie-splash-screen`)
  - react-native-mail (from `../node_modules/react-native-mail`)
  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
  - react-native-randombytes (from `../node_modules/react-native-randombytes`)
  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
  - react-native-shake (from `../node_modules/react-native-shake`)
@@ -545,6 +548,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-mail"
  react-native-netinfo:
    :path: "../node_modules/@react-native-community/netinfo"
+  react-native-orientation-locker:
+    :path: "../node_modules/react-native-orientation-locker"
  react-native-randombytes:
    :path: "../node_modules/react-native-randombytes"
  react-native-safe-area-context:
@@ -666,12 +671,13 @@ SPEC CHECKSUMS:
  react-native-lottie-splash-screen: 068688c15dd478301fda00f8d87d7fb7d5b9a93e
  react-native-mail: 8fdcd3aef007c33a6877a18eb4cf7447a1d4ce4a
  react-native-netinfo: ddaca8bbb9e6e914b1a23787ccb879bc642931c9
+  react-native-orientation-locker: 851f6510d8046ea2f14aa169b1e01fcd309a94ba
  react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
  react-native-safe-area-context: 60f654e00b6cc416573f6d5dbfce3839958eb57a
  react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
  react-native-slider: 12bd76d3d568c9c5500825db54123d44b48e4ad4
  react-native-status: 21f75d492fd311dc111303da38a7a2b23a8a8466
-  react-native-status-keycard: f60ca57d789aad6875c64ece81ab06ef0609e0d3
+  react-native-status-keycard: f1c1227b2d5984c10fb44db68e4bfd2937f31e98
  react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703
  React-RCTActionSheet: e911b99f0d6fa7711ffc2f62d236b12a32771835
  React-RCTAnimation: ad8b853170a059faf31d6add34f67d22391bbe01
@@ -525,8 +525,8 @@
 			outputPaths = (
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "set -o errexit\nexport NODE_BINARY=\"node\"\nexport NODE_ARGS=\" --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
+			shellPath = "/usr/bin/env sh";
+			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\" --openssl-legacy-provider --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
 		};
 		0F876BD5356F61BF142A01A0 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -546,7 +546,7 @@
 				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-StatusImTests-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
@@ -568,7 +568,7 @@
 				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
@@ -583,8 +583,8 @@
 			outputPaths = (
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "set -o errexit\nexport NODE_BINARY=\"node\"\nexport NODE_ARGS=\" --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
+			shellPath = "/usr/bin/env sh";
+			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\" --openssl-legacy-provider --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
 		};
 		3AAD2AD724A3A60E0075D594 /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -597,7 +597,7 @@
 			outputPaths = (
 			);
 			runOnlyForDeploymentPostprocessing = 1;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./set_xcode_version.log 2>&1";
 		};
 		3C1038075AE5E6FB86AC2319 /* [CP] Copy Pods Resources */ = {
@@ -618,7 +618,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
@@ -640,7 +640,7 @@
 				"$(DERIVED_FILE_DIR)/Pods-Status-StatusImPR-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
@@ -662,7 +662,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
@@ -677,7 +677,7 @@
 			outputPaths = (
 			);
 			runOnlyForDeploymentPostprocessing = 1;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./set_xcode_version.log 2>&1";
 		};
 		E732E3E1B024946173BF6D3D /* [CP] Copy Pods Resources */ = {
@@ -698,7 +698,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
+			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
@@ -797,7 +797,7 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         final JSONObject jsonConfig = new JSONObject(configJSON);
         final String keyStorePath = pathCombine(this.getNoBackupDirectory(), "/keystore");
         jsonConfig.put("keystorePath", keyStorePath);
-
+         jsonConfig.put("rootDataDir", this.getNoBackupDirectory());
        executeRunnableStatusGoMethod(() -> Statusgo.inputConnectionStringForBootstrapping(connectionString, jsonConfig.toString()), callback);
    }

@@ -1139,11 +1139,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        executeRunnableStatusGoMethod(() -> Statusgo.generateAlias(seed), callback);
    }

-    @ReactMethod
-    public void emojiHash(final String publicKey, final Callback callback) throws JSONException {
-        executeRunnableStatusGoMethod(() -> Statusgo.emojiHash(publicKey), callback);
-    }
-
    @ReactMethod(isBlockingSynchronousMethod = true)
    public String identicon(final String seed) {
        return Statusgo.identicon(seed);
@@ -329,12 +329,13 @@ RCT_EXPORT_METHOD(inputConnectionStringForBootstrapping:(NSString *)cs
    NSDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:nil];
    NSFileManager *fileManager = [NSFileManager defaultManager];
    NSURL *rootUrl =[[fileManager URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask] lastObject];
+    NSURL *rootDataDir = rootUrl.path;
    NSURL *multiaccountKeystoreDir = [rootUrl URLByAppendingPathComponent:@"keystore"];
    NSString *keystoreDir = multiaccountKeystoreDir.path;

    [configDict setValue:keystoreDir forKey:@"keystorePath"];
+    [configDict setValue:rootDataDir forKey:@"rootDataDir"];
    NSString *modifiedConfigJSON = [configDict bv_jsonStringWithPrettyPrint:NO];
-
    NSString *result = StatusgoInputConnectionStringForBootstrapping(cs,modifiedConfigJSON);
    callback(@[result]);
 }
@@ -865,12 +866,6 @@ RCT_EXPORT_METHOD(generateAliasAsync:(NSString *)publicKey
    callback(@[result]);
 }

-RCT_EXPORT_METHOD(emojiHash:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-    NSString *result = StatusgoEmojiHash(publicKey);
-    callback(@[result]);
-}
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(identicon:(NSString *)publicKey) {
  return StatusgoIdenticon(publicKey);
 }
@@ -24,6 +24,7 @@ Generating scripts:
 - `get_deps.sh` - Calls Gradle to get all the dependencies of sub-projects.
 - `gradle_parser.awk` - An AWK script that parses above Gradle output.
 - `url2json.sh` - Converts the list of URLs into a format consumable by Nix.
+- `add_package.sh` - Allows for adding a missing package manually.

 Finally we have the Nix derivation in `default.nix` which produces a derivation with all of the Gradle project dependencies:
 ```
@@ -66,9 +67,14 @@ You can use the `add_package.sh` script to add missing Gradle dependencies:
 > make shell TARGET=gradle
 Configuring Nix shell for target 'gradle'...

-[nix-shell:~/status-mobile]$ nix/deps/gradle/add_package.sh com.android.tools.build:gradle:3.4.0
+[nix-shell:~/work/status-mobile]$ nix/deps/gradle/add_package.sh com.android.tools.build:gradle:3.5.3
+Changes made:
+ nix/deps/gradle/deps.urls | 24 ++++++++++++++++++++++++
+ 1 file changed, 24 insertions(+)
+
 Regenerating Nix files...
-Found 548 direct dependencies...
-Successfully added: com.android.tools.build:gradle:3.4.0
+Successfully added: com.android.tools.build:gradle:3.5.3
+
+NOTICE: Running 'make nix-update-gradle' in a new shell is recommended.
 ```
-This may take a bit longer than normal `make nix-update-gradle` but should add the missing package.
+Keep in mind that the changes made by this script do not affect the already spawned shell.
@@ -1,6 +1,10 @@
 #!/usr/bin/env bash

-set -Eeu
+# This script allows for adding a package by providing a Maven full name.
+# Such name consists of 3 sections separated by the colon character.
+# Example: com.android.tools.build:gradle:3.5.3
+
+set -Eeuo pipefail

 if [[ $# -ne 1 ]]; then
    echo "Usage: add_package.sh <package>" >&2
@@ -18,12 +22,15 @@ source "${GIT_ROOT}/scripts/colors.sh"
 echo "${1}" | go-maven-resolver >> nix/deps/gradle/deps.urls

 # Remove duplicates and sort.
-sort -uo nix/deps/gradle/deps.urls nix/deps/gradle/deps.urls
+sort -uVo nix/deps/gradle/deps.urls nix/deps/gradle/deps.urls
+
+echo -e "${GRN}Changes made:${RST}" >&2
+git diff --stat nix/deps/gradle/deps.urls
+echo

 # Re-generate dependencies JSON.
 "${GIT_ROOT}/nix/deps/gradle/generate.sh" gen_deps_json

-# Re-generate dependencies list.
-"${GIT_ROOT}/nix/deps/gradle/generate.sh" gen_deps_list
-
 echo -e "${GRN}Successfully added:${RST} ${BLD}${1}${RST}" >&2
+echo
+echo -e "${YLW}NOTICE:${RST} Running '${BLD}make nix-update-gradle${RST}' in a new shell is recommended."
@@ -1,68 +1,44 @@
 { stdenv, lib, pkgs, fetchurl, writeShellScriptBin }:

 let
-  inherit (lib)
-    removeSuffix optionalString splitString concatMapStrings
-    attrByPath attrValues last makeOverridable importJSON;
+  inherit (lib) concatStrings concatMapStrings mapAttrsToList makeOverridable;

-  inherit (pkgs) aapt2;
-
-  deps = importJSON ./deps.json;
-
-  # some .jar files have an `-aot` suffix that doesn't work for .pom files
-  getPOM = jarUrl: "${removeSuffix "-aot" jarUrl}.pom";
+  deps = lib.importJSON ./deps.json;

  script = writeShellScriptBin "create-local-maven-repo" (''
    mkdir -p $out
    cd $out
  '' +
-  (concatMapStrings (dep: 
-    let
-      url = "${dep.host}/${dep.path}";
-      pom = {
-        sha1 = attrByPath [ "pom" "sha1" ] "" dep;
-        sha256 = attrByPath [ "pom" "sha256" ] "" dep;
-      };
-      pom-download = optionalString (pom.sha256 != "") (
-        fetchurl { url = getPOM url; inherit (pom) sha256; }
-      );
-      jar = {
-        sha1 = attrByPath [ "jar" "sha1" ] "" dep;
-        sha256 = attrByPath [ "jar" "sha256" ] "" dep;
-      };
-      jar-download = optionalString (jar.sha256 != "") (
-        fetchurl { url = "${url}.${dep.type}"; inherit (jar) sha256; }
-      );
-      fileName = last (splitString "/" dep.path);
-      directory = removeSuffix fileName dep.path;
-    in
-      ''
-        mkdir -p ${directory}
-
-        ${optionalString (pom-download != "") ''
-        ln -s "${pom-download}" "${getPOM dep.path}"
-        ''}
-        ${optionalString (pom.sha1 != "") ''
-        echo "${pom.sha1}" > "${getPOM dep.path}.sha1"
-        ''}
-        ${optionalString (jar-download != "") ''
-        ln -s "${jar-download}" "${dep.path}.${dep.type}"
-        ''}
-        ${optionalString (jar.sha1 != "") ''
-        echo "${jar.sha1}" > "${dep.path}.${dep.type}.sha1"
-        ''}
+    # For each dependency in deps.json.
+    (concatMapStrings (dep: concatStrings
+      # And for each file in the 'files' dict of given dependency.
+      (mapAttrsToList (filename: hashes: let
+        # Download given file(POM, JAR, nodeps JAR, or AAR).
+        download = fetchurl {
+          url = "${dep.repo}/${dep.path}/${filename}";
+          inherit (hashes) sha256;
+        };
+        # And symlink it in the correct folder along with SHA1.
+      in ''
+        mkdir -p "${dep.path}"
+        ln -s "${download}" "${dep.path}/${filename}"
+        echo "${hashes.sha1}" > "${dep.path}/${filename}.sha1"
      '')
-    deps));
+      dep.files)
+    ) deps)
+  );

 in makeOverridable stdenv.mkDerivation {
  name = "status-mobile-maven-deps";
-  buildInputs = [ aapt2 ];
+
+  buildInputs = [ pkgs.aapt2 ];
+
  phases = [ "buildPhase" "patchPhase" ];
  buildPhase = "${script}/bin/create-local-maven-repo";
-  # Patched AAPT2 
+  # Replace AAPT2 package only with our patched version from overlay.
  patchPhase = ''
-    aapt2_dir=$out/com/android/tools/build/aapt2/${aapt2.version}
+    aapt2_dir=$out/com/android/tools/build/aapt2/${pkgs.aapt2.version}
    mkdir -p $aapt2_dir
-    ln -sf ${aapt2}/* $aapt2_dir
+    ln -sf ${pkgs.aapt2}/* $aapt2_dir
  '';
 }
@@ -357,8 +357,8 @@ com.github.bumptech.glide:glide:4.12.0
 com.github.bumptech.glide:okhttp3-integration:4.12.0
 com.github.clans:fab:1.6.4
 com.github.gundy:semver4j:0.16.4
-com.github.status-im.status-keycard-java:android:3.0.4
-com.github.status-im.status-keycard-java:lib:3.0.4
+com.github.status-im.status-keycard-java:android:3.1.1
+com.github.status-im.status-keycard-java:lib:3.1.1
 com.github.status-im:function:0.0.1
 com.github.wix-playground:ahbottomnavigation:3.3.0
 com.github.wix-playground:reflow-animator:1.0.6
@@ -285,8 +285,8 @@ https://dl.google.com/dl/android/maven2/com/google/android/material/material/1.0
 https://dl.google.com/dl/android/maven2/com/google/android/material/material/1.2.0-alpha03/material-1.2.0-alpha03.pom
 https://jitpack.io/com/github/Dimezis/BlurView/version-2.0.2/BlurView-version-2.0.2.pom
 https://jitpack.io/com/github/status-im/function/0.0.1/function-0.0.1.pom
-https://jitpack.io/com/github/status-im/status-keycard-java/android/3.0.4/android-3.0.4.pom
-https://jitpack.io/com/github/status-im/status-keycard-java/lib/3.0.4/lib-3.0.4.pom
+https://jitpack.io/com/github/status-im/status-keycard-java/android/3.1.1/android-3.1.1.pom
+https://jitpack.io/com/github/status-im/status-keycard-java/lib/3.1.1/lib-3.1.1.pom
 https://jitpack.io/com/github/wix-playground/ahbottomnavigation/3.3.0/ahbottomnavigation-3.3.0.pom
 https://jitpack.io/com/github/wix-playground/reflow-animator/1.0.6/reflow-animator-1.0.6.pom
 https://jitpack.io/com/github/yalantis/ucrop/2.2.6-native/ucrop-2.2.6-native.pom
@@ -503,12 +503,12 @@ https://repo.maven.apache.org/maven2/com/sun/istack/istack-commons-runtime/4.1.1
 https://repo.maven.apache.org/maven2/com/sun/istack/istack-commons/2.21/istack-commons-2.21.pom
 https://repo.maven.apache.org/maven2/com/sun/istack/istack-commons/4.1.1/istack-commons-4.1.1.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/2.2.11/jaxb-bom-ext-2.2.11.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/4.0.1/jaxb-bom-ext-4.0.1.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/4.0.2/jaxb-bom-ext-4.0.2.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/2.2.11/jaxb-parent-2.2.11.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/4.0.1/jaxb-parent-4.0.1.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/4.0.2/jaxb-parent-4.0.2.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-runtime-parent/2.2.11/jaxb-runtime-parent-2.2.11.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/2.2.11/jaxb-txw-parent-2.2.11.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/4.0.1/jaxb-txw-parent-4.0.1.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/4.0.2/jaxb-txw-parent-4.0.2.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/1.2.13/FastInfoset-1.2.13.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/2.1.0/FastInfoset-2.1.0.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/fastinfoset-project/1.2.13/fastinfoset-project-1.2.13.pom
@@ -561,9 +561,9 @@ https://repo.maven.apache.org/maven2/org/antlr/ST4/4.0.8/ST4-4.0.8.pom
 https://repo.maven.apache.org/maven2/org/antlr/ST4/4.3.4/ST4-4.3.4.pom
 https://repo.maven.apache.org/maven2/org/antlr/antlr4-master/4.5.2-1/antlr4-master-4.5.2-1.pom
 https://repo.maven.apache.org/maven2/org/antlr/antlr4-master/4.5.3/antlr4-master-4.5.3.pom
-https://repo.maven.apache.org/maven2/org/antlr/antlr4-master/4.11.1/antlr4-master-4.11.1.pom
+https://repo.maven.apache.org/maven2/org/antlr/antlr4-master/4.12.0/antlr4-master-4.12.0.pom
 https://repo.maven.apache.org/maven2/org/antlr/antlr4-runtime/4.5.2-1/antlr4-runtime-4.5.2-1.pom
-https://repo.maven.apache.org/maven2/org/antlr/antlr4-runtime/4.11.1/antlr4-runtime-4.11.1.pom
+https://repo.maven.apache.org/maven2/org/antlr/antlr4-runtime/4.12.0/antlr4-runtime-4.12.0.pom
 https://repo.maven.apache.org/maven2/org/antlr/antlr4/4.5.3/antlr4-4.5.3.pom
 https://repo.maven.apache.org/maven2/org/antlr/antlr-master/3.3/antlr-master-3.3.pom
 https://repo.maven.apache.org/maven2/org/antlr/antlr-master/3.5.2/antlr-master-3.5.2.pom
@@ -636,7 +636,7 @@ https://repo.maven.apache.org/maven2/org/bouncycastle/bcprov-jdk15on/1.56/bcprov
 https://repo.maven.apache.org/maven2/org/bouncycastle/bcprov-jdk15on/1.60/bcprov-jdk15on-1.60.pom
 https://repo.maven.apache.org/maven2/org/bouncycastle/bcprov-jdk15on/1.70/bcprov-jdk15on-1.70.pom
 https://repo.maven.apache.org/maven2/org/checkerframework/checker-qual/2.5.2/checker-qual-2.5.2.pom
-https://repo.maven.apache.org/maven2/org/checkerframework/checker-qual/3.29.0/checker-qual-3.29.0.pom
+https://repo.maven.apache.org/maven2/org/checkerframework/checker-qual/3.32.0/checker-qual-3.32.0.pom
 https://repo.maven.apache.org/maven2/org/codehaus/codehaus-parent/4/codehaus-parent-4.pom
 https://repo.maven.apache.org/maven2/org/codehaus/groovy/groovy-all/2.4.15/groovy-all-2.4.15.pom
 https://repo.maven.apache.org/maven2/org/codehaus/mojo/animal-sniffer-annotations/1.14/animal-sniffer-annotations-1.14.pom
@@ -656,16 +656,17 @@ https://repo.maven.apache.org/maven2/org/easymock/easymock/5.1.0/easymock-5.1.0.
 https://repo.maven.apache.org/maven2/org/eclipse/angus/angus-activation-project/2.0.0/angus-activation-project-2.0.0.pom
 https://repo.maven.apache.org/maven2/org/eclipse/angus/angus-activation/2.0.0/angus-activation-2.0.0.pom
 https://repo.maven.apache.org/maven2/org/eclipse/ee4j/project/1.0.7/project-1.0.7.pom
+https://repo.maven.apache.org/maven2/org/eclipse/ee4j/project/1.0.8/project-1.0.8.pom
 https://repo.maven.apache.org/maven2/org/eclipse/jdt/core/compiler/ecj/4.4.2/ecj-4.4.2.pom
 https://repo.maven.apache.org/maven2/org/eclipse/jdt/core/compiler/ecj/4.4/ecj-4.4.pom
 https://repo.maven.apache.org/maven2/org/eclipse/jdt/core/compiler/ecj/4.6.1/ecj-4.6.1.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/2.2.11/jaxb-bom-2.2.11.pom
-https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/4.0.1/jaxb-bom-4.0.1.pom
+https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/4.0.2/jaxb-bom-4.0.2.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-core/2.2.11/jaxb-core-2.2.11.pom
-https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-core/4.0.1/jaxb-core-4.0.1.pom
+https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-core/4.0.2/jaxb-core-4.0.2.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-runtime/2.2.11/jaxb-runtime-2.2.11.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/2.2.11/txw2-2.2.11.pom
-https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/4.0.1/txw2-4.0.1.pom
+https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/4.0.2/txw2-4.0.2.pom
 https://repo.maven.apache.org/maven2/org/hamcrest/hamcrest-core/1.3/hamcrest-core-1.3.pom
 https://repo.maven.apache.org/maven2/org/hamcrest/hamcrest-core/2.2/hamcrest-core-2.2.pom
 https://repo.maven.apache.org/maven2/org/hamcrest/hamcrest-parent/1.3/hamcrest-parent-1.3.pom
@@ -1,18 +1,16 @@
 #!/usr/bin/env bash

-# Stop on any failures, including in pipes
-set -e
-set -o pipefail
+# This script takes care of generating/updating the maven-sources.nix file
+# representing the offline Maven repo containing the dependencies
+# required to build the project
+
+set -Eeo pipefail

 if [[ -z "${IN_NIX_SHELL}" ]]; then
    echo "Remember to call 'make shell'!"
    exit 1
 fi

-# This script takes care of generating/updating the maven-sources.nix file
-# representing the offline Maven repo containing the dependencies
-# required to build the project
-
 GIT_ROOT=$(cd "${BASH_SOURCE%/*}" && git rev-parse --show-toplevel)
 source "${GIT_ROOT}/scripts/colors.sh"

@@ -27,41 +25,43 @@ ulimit -n 16384

 # Generate list of Gradle sub-projects.
 function gen_proj_list() {
-    ${CUR_DIR}/get_projects.sh | sort -u -o ${PROJ_LIST}
-    echo -e "Found ${GRN}$(wc -l < ${PROJ_LIST})${RST} sub-projects..."
+    "${CUR_DIR}/get_projects.sh" | sort -u -o "${PROJ_LIST}"
+    echo -e "Found ${GRN}$(wc -l < "${PROJ_LIST}")${RST} sub-projects..."
 }

 # Check each sub-project in parallel, the ":" is for local deps.
 function gen_deps_list() {
-    PROJECTS=$(cat ${PROJ_LIST})
-    ${CUR_DIR}/get_deps.sh ":" ${PROJECTS[@]} | sort -uV -o ${DEPS_LIST}
-    echo -e "${CLR}Found ${GRN}$(wc -l < ${DEPS_LIST})${RST} direct dependencies..."
+    PROJECTS=$(cat "${PROJ_LIST}")
+    # WARNING: The ${PROJECTS[@]} needs to remain unquoted to expand correctly.
+    # shellcheck disable=SC2068
+    "${CUR_DIR}/get_deps.sh" ":" ${PROJECTS[@]} | sort -uV -o "${DEPS_LIST}"
+    echo -e "${CLR}Found ${GRN}$(wc -l < "${DEPS_LIST}")${RST} direct dependencies..."
 }

 # Find download URLs for each dependency.
 function gen_deps_urls() {
-    cat ${DEPS_LIST} | go-maven-resolver | sort -uV -o ${DEPS_URLS}
-    echo -e "${CLR}Found ${GRN}$(wc -l < ${DEPS_URLS})${RST} dependency URLs..."
+    go-maven-resolver < "${DEPS_LIST}" | sort -uV -o "${DEPS_URLS}"
+    echo -e "${CLR}Found ${GRN}$(wc -l < "${DEPS_URLS}")${RST} dependency URLs..."
 }

 # Generate the JSON that Nix will consume.
 function gen_deps_json() {
    # Open the Nix attribute set.
-    echo -n "[" > ${DEPS_JSON}
+    echo -n "[" > "${DEPS_JSON}"

    # Format URLs into a Nix consumable file.
-    URLS=$(cat ${DEPS_URLS})
+    URLS=$(cat "${DEPS_URLS}")
    # Avoid rate limiting by using 4 of the available threads.
    parallel --will-cite --keep-order --jobs 4 \
        "${CUR_DIR}/url2json.sh" \
-        ::: ${URLS} \
-        >> ${DEPS_JSON}
+        ::: "${URLS}" \
+        >> "${DEPS_JSON}"

    # Drop tailing comma on last object, stupid JSON
-    sed -i '$ s/},/}/' ${DEPS_JSON}
+    sed -i '$ s/},/}/' "${DEPS_JSON}"

    # Close the Nix attribute set
-    echo "]" >> ${DEPS_JSON}
+    echo "]" >> "${DEPS_JSON}"
 }

 # ------------------------------------------------------------------------------
@@ -74,7 +74,7 @@ cd "${GIT_ROOT}/android"
 ./gradlew --stop >/dev/null

 # A way to run a specific stage of generation
-if [[ -n "${1}" ]] && type ${1} > /dev/null; then
+if [[ -n "${1}" ]] && type "${1}" > /dev/null; then
    ${1}; exit 0
 elif [[ -n "${1}" ]]; then
    echo "No such function: ${1}"; exit 1
@@ -86,6 +86,6 @@ gen_deps_list
 gen_deps_urls
 gen_deps_json

-REL_DEPS_JSON=$(realpath --relative-to=${PWD} ${DEPS_JSON})
+REL_DEPS_JSON=$(realpath --relative-to="${PWD}" "${DEPS_JSON}")
 echo -e "${CLR}Generated Nix deps file: ${REL_DEPS_JSON#../}"
 echo -e "${GRN}Done${RST}"
@@ -1,12 +1,19 @@
 #!/usr/bin/env bash

-set -Eeu
+# This script generates a list of dependencies for the main project and its
+# sub-projects defined using Gradle config files. It parses Gradle output of
+# 'dependencies' and 'buildEnvironment` tasks using AWK.
+
+set -Eeuo pipefail

 GIT_ROOT=$(cd "${BASH_SOURCE%/*}" && git rev-parse --show-toplevel)
-# Gradle needs to be run in 'android' subfolder
+# Gradle needs to be run in 'android' subfolder.
 cd "${GIT_ROOT}/android"

-AWK_SCRIPT="${GIT_ROOT}/nix/deps/gradle/gradle_parser.awk"
+# Show Gradle log in case of failure.
+GRADLE_LOG_FILE='/tmp/gradle.log'
+function show_gradle_log() { cat "${GRADLE_LOG_FILE}" >&2; }
+trap show_gradle_log ERR

 # Run the gradle command for a project:
 # - ':buildEnvironment' to get build tools
@@ -20,16 +27,11 @@ for i in "${!DEPS[@]}"; do
    NORMAL_DEPS[${i}]="${DEPS[${i}]}:dependencies"
 done

-# And clean up the output by:
-# - keep only lines that start with \--- or +---
-# - drop lines that end with (*) or (n) but don't start with (+)
-# - drop lines that refer to a project
-# - drop entries starting with `status-im:` like `status-go`
-# - drop entries that aren't just the name of the dependency
-# - extract the package name and version, ignoring version range indications,
-#   such as in `com.google.android.gms:play-services-ads:[15.0.1,16.0.0) -> 15.0.1`
+# And clean up the output using AWK script.
+AWK_SCRIPT="${GIT_ROOT}/nix/deps/gradle/gradle_parser.awk"

 ./gradlew --no-daemon --console plain \
    "${BUILD_DEPS[@]}" \
    "${NORMAL_DEPS[@]}" \
-    | awk -f ${AWK_SCRIPT}
+    | tee "${GRADLE_LOG_FILE}" \
+    | awk -f "${AWK_SCRIPT}"
@@ -1,12 +1,22 @@
 #!/usr/bin/env bash

-set -Eeu
+# This script generates a list of Gradle sub-projects by parsing the output
+# of Gradle 'projects' task using grep and sed. It is necessary in order to
+# collect list of dependencies for main project and its sub-projects.
+
+set -Eeuo pipefail

 GIT_ROOT=$(cd "${BASH_SOURCE%/*}" && git rev-parse --show-toplevel)
-# Gradle needs to be run in 'android' subfolder
+# Gradle needs to be run in 'android' subfolder.
 cd "${GIT_ROOT}/android"

+# Show Gradle log in case of failure.
+GRADLE_LOG_FILE='/tmp/gradle.log'
+function show_gradle_log() { cat "${GRADLE_LOG_FILE}" >&2; }
+trap show_gradle_log ERR
+
 # Print all our sub-projects
 ./gradlew projects --no-daemon --console plain 2>&1 \
+    | tee "${GRADLE_LOG_FILE}" \
    | grep "Project ':" \
    | sed -E "s;^.--- Project '\:([@_a-zA-Z0-9\-]+)';\1;"
@@ -26,6 +26,7 @@ react-native-lottie-splash-screen
 react-native-mail
 react-native-navigation
 react-native-nfc-manager
+react-native-orientation-locker
 react-native-permissions
 react-native-randombytes
 react-native-reanimated
@@ -6,8 +6,6 @@
 # a local Maven repository.
 #

-CUR_DIR=$(cd "${BASH_SOURCE%/*}" && pwd)
-
 # This defines URLs of Maven repos we know about and use.
 declare -a REPOS=(
  "https://repo.maven.apache.org/maven2"
@@ -36,84 +34,88 @@ function match_repo_url() {
    exit 1
 }

+function pom_has_nodeps_jar() {
+    grep '<shadedClassifierName>nodeps</shadedClassifierName>' "${1}" \
+        >/dev/null 2>&1 
+}
+
+function fetch_and_template_file() {
+    local FILENAME="${1}"
+    local OBJ_URL OBJ_NIX_FETCH_OUT OBJ_NAME OBJ_PATH
+
+    OBJ_URL="${REPO_URL}/${PKG_PATH}/${FILENAME}"
+    if ! OBJ_NIX_FETCH_OUT=$(nix_fetch "${OBJ_URL}"); then
+        echo " ! Failed to fetch: ${OBJ_URL}" >&2
+        exit 1
+    fi
+
+    OBJ_NAME="${FILENAME}"
+    OBJ_PATH=$(get_nix_path "${OBJ_NIX_FETCH_OUT}")
+    echo -n ",
+      \"${OBJ_NAME}\": {
+        \"sha1\": \"$(get_sha1 "${OBJ_PATH}")\",
+        \"sha256\": \"$(get_nix_sha "${OBJ_NIX_FETCH_OUT}")\"
+      }"
+}
+
 if [[ -z "${1}" ]]; then
-    echo "Required argument not given!" >&2
+    echo "Required POM URL argument not given!" >&2
    exit 1
 fi
-
 POM_URL=${1}
-# Drop the POM extension
-OBJ_REL_URL=${POM_URL%.pom}
+# Drop the POM extension.
+PKG_URL_NO_EXT="${POM_URL%.pom}"
+# Name of package without extension.
+PKG_NAME="$(basename "${PKG_URL_NO_EXT}")"

 echo -en "${CLR} - Nix entry for: ${1##*/}\r" >&2

-REPO_URL=$(match_repo_url "${OBJ_REL_URL}")
+REPO_URL=$(match_repo_url "${PKG_URL_NO_EXT}")

 if [[ -z "${REPO_URL}" ]]; then
-    echo "\r\n ? REPO_URL: ${REPO_URL}" >&2
+    echo " ! Repo URL not found: %s" "${REPO_URL}" >&2
+    exit 1
 fi
 # Get the relative path without full URL
-OBJ_REL_NAME="${OBJ_REL_URL#${REPO_URL}/}"
+PKG_PATH="${PKG_URL_NO_EXT#"${REPO_URL}/"}"
+PKG_PATH="$(dirname "${PKG_PATH}")"

 # Both JARs and AARs have a POM
-POM_NIX_FETCH_OUT=$(nix_fetch "${OBJ_REL_URL}.pom")
+POM_NIX_FETCH_OUT=$(nix_fetch "${PKG_URL_NO_EXT}.pom")
 POM_PATH=$(get_nix_path "${POM_NIX_FETCH_OUT}")
+POM_NAME=$(basename "${PKG_URL_NO_EXT}.pom")
 if [[ -z "${POM_PATH}" ]]; then
-    echo " ! Failed to fetch: ${OBJ_REL_URL}.pom" >&2
+    echo " ! Failed to fetch: ${PKG_URL_NO_EXT}.pom" >&2
    exit 1
 fi
 POM_SHA256=$(get_nix_sha "${POM_NIX_FETCH_OUT}")
 POM_SHA1=$(get_sha1 "${POM_PATH}")

-# Identify packaging type, JAR, AAR, or just POM.
-OBJ_TYPE_RAW=$(grep -oP '<packaging>\K[^<]+' "${POM_PATH}")
-# Bundle is a JAR made using maven-bundle-plugin.
-case "${OBJ_TYPE_RAW}" in
-    ''|'bundle') OBJ_TYPE=jar;;
-    'aar.asc')   OBJ_TYPE=aar;;
-    *)           OBJ_TYPE="${OBJ_TYPE_RAW}"
-esac
+# Identify packaging type, JAR, AAR, bundle, or just POM.
+OBJ_TYPE=$(grep -oP '<packaging>\K[^<]+' "${POM_PATH}")

 # Some deps are Eclipse plugins, and we don't need those.
 if [[ "${OBJ_TYPE}" == "eclipse-plugin" ]]; then
    exit 0
 fi

-# Some deps are just POMs, in which case there is no JAR to fetch.
-if [[ "${OBJ_TYPE}" != "pom" ]]; then
-    OBJ_NIX_FETCH_OUT=$(nix_fetch "${OBJ_REL_URL}.${OBJ_TYPE}")
-    # If type was a JAR or other, not getting one is an error.
-    if [[ ${?} -ne 0 ]]; then
-        # POMs without packaging type defined can still include JARs.
-        if [[ "${OBJ_TYPE_RAW}" != "" ]]; then
-            echo " ! Failed to fetch: ${OBJ_REL_URL}.${OBJ_TYPE}" >&2
-            exit 1
-        fi
-    else
-        OBJ_PATH=$(get_nix_path "${OBJ_NIX_FETCH_OUT}")
-        OBJ_SHA256=$(get_nix_sha "${OBJ_NIX_FETCH_OUT}")
-        OBJ_SHA1=$(get_sha1 "${OBJ_PATH}")
-    fi
-fi
-
 # Format into a Nix attrset entry
 echo -ne "
  {
-    \"path\": \"${OBJ_REL_NAME}\",
-    \"host\": \"${REPO_URL}\",
-    \"type\": \"${OBJ_TYPE}\","
-if [[ -n "${POM_SHA256}" ]]; then
-    echo -n "
-    \"pom\": {
-      \"sha1\": \"${POM_SHA1}\",
-      \"sha256\": \"${POM_SHA256}\"
-    }";[[ -n "${OBJ_SHA256}" ]] && echo -n ","
-fi
-if [[ -n "${OBJ_SHA256}" ]]; then
-    echo -n "
-    \"jar\": {
-      \"sha1\": \"${OBJ_SHA1}\",
-      \"sha256\": \"${OBJ_SHA256}\"
-    }"
-fi
-echo -e "\n  },"
+    \"path\": \"${PKG_PATH}\",
+    \"repo\": \"${REPO_URL}\",
+    \"files\": {
+      \"${POM_NAME}\": {
+        \"sha1\": \"${POM_SHA1}\",
+        \"sha256\": \"${POM_SHA256}\"
+      }"
+
+# Some deps are just POMs, in which case there is no JAR to fetch.
+[[ "${OBJ_TYPE}" == "" ]]        && fetch_and_template_file "${PKG_NAME}.jar"
+[[ "${OBJ_TYPE}" == "jar" ]]     && fetch_and_template_file "${PKG_NAME}.jar"
+[[ "${OBJ_TYPE}" == "bundle" ]]  && fetch_and_template_file "${PKG_NAME}.jar"
+[[ "${OBJ_TYPE}" =~ aar* ]]      && fetch_and_template_file "${PKG_NAME}.aar"
+[[ "${OBJ_TYPE}" == "aar.asc" ]] && fetch_and_template_file "${PKG_NAME}.${OBJ_TYPE}"
+pom_has_nodeps_jar "${POM_PATH}" && fetch_and_template_file "${PKG_NAME}-nodeps.jar"
+
+echo -e '\n    }\n  },'
@@ -29,7 +29,14 @@ stdenv.mkDerivation {
  # maven and google central repositories with our own local directories.
  # This prevents the builder from downloading Maven artifacts
  patchGradlePhase = ''
-    for modBuildGradle in $(find -L ./node_modules -name build.gradle); do
+    gradleConfigs=$(
+      find -L ./node_modules \
+        -name build.gradle -or \
+        -name build.gradle.kts -or \
+        -name settings.gradle -or \
+        -name settings.gradle.kts
+    )
+    for modBuildGradle in $gradleConfigs; do
      relativeToNode=''${modBuildGradle#*node_modules/}
      moduleName=''${relativeToNode%%/*}
      if [[ -L ./node_modules/$moduleName ]]; then
@@ -20,6 +20,7 @@ in {
    ];

    # WARNING: Executes shellHook in reverse order.
+    # WARNING: Only some variables are merged.
    inputsFrom = [
      fastlane.shell
      cocoapods-sh
@@ -1,8 +1,14 @@
-{ mkShell, deps }:
+{ mkShell, nodejs, deps }:

 mkShell {
-  # check if node modules changed and if so install them
+  # Check if node modules changed and if so install them.
  shellHook = ''
+    # Fix for ERR_OSSL_EVP_UNSUPPORTED error.
+    export NODE_OPTIONS="--openssl-legacy-provider";
+
+    # Fix Xcode using system Node.js version.
+    export NODE_BINARY="${nodejs}/bin/node";
+
    export STATUS_MOBILE_HOME=$(git rev-parse --show-toplevel)
    "$STATUS_MOBILE_HOME/nix/scripts/node_modules.sh" ${deps.nodejs-patched}
  '';
@@ -32,6 +32,18 @@ in {
  # For parsing gradle.properties into an attrset
  gradlePropParser = callPackage ./tools/gradlePropParser.nix { };

+  # Clojure formatting tool
+  zprint = super.zprint.override rec {
+    buildGraalvmNativeImage = args: super.buildGraalvmNativeImage ( args // rec {
+      inherit (args) pname;
+      version = "1.2.5";
+      src = self.fetchurl {
+        url = "https://github.com/kkinnear/${pname}/releases/download/${version}/${pname}-filter-${version}";
+        sha256 = "sha256-PWdR5jqyzvTk9HoxqDldwtZNik34dmebBtZZ5vtva4A=";
+      };
+    });
+  };
+
  # Package version adjustments
  gradle = super.gradle_5;
  nodejs = super.nodejs-16_x;
@@ -16,7 +16,8 @@ writeScript "patch-maven-srcs" (''
  gradleFile="$1"

  # Some of those find something, some don't, that's fine.
-  patchMavenSource "$gradleFile" 'mavenCentral()' 'mavenLocal()'
-  patchMavenSource "$gradleFile" 'google()'       'mavenLocal()'
-  patchMavenSource "$gradleFile" 'jcenter()'      'mavenLocal()'
+  patchMavenSource "$gradleFile" 'mavenCentral()'       'mavenLocal()'
+  patchMavenSource "$gradleFile" 'google()'             'mavenLocal()'
+  patchMavenSource "$gradleFile" 'jcenter()'            'mavenLocal()'
+  patchMavenSource "$gradleFile" 'gradlePluginPortal()' 'mavenLocal()'
 '')
@@ -19,7 +19,7 @@
    "@babel/preset-typescript": "^7.17.12",
    "@react-native-async-storage/async-storage": "^1.17.9",
    "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
-    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.0-status",
+    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.1-status",
    "@react-native-community/cameraroll": "git+https://github.com/status-im/react-native-cameraroll.git#refs/tags/v4.0.4-status.0",
    "@react-native-community/clipboard": "^1.2.2",
    "@react-native-community/hooks": "^2.5.1",
@@ -28,7 +28,6 @@
    "@react-native-community/push-notification-ios": "^1.4.1",
    "@react-native-community/slider": "^3.0.0",
    "@walletconnect/client": "^2.0.0-beta.23",
-    "@walletconnect/client-legacy": "npm:@walletconnect/client@^1.7.1",
    "bignumber.js": "git+https://github.com/status-im/bignumber.js.git#refs/tags/v4.0.2-status",
    "chance": "^1.1.0",
    "create-react-class": "^15.6.2",
@@ -62,6 +61,7 @@
    "react-native-lottie-splash-screen": "^1.0.1",
    "react-native-mail": "^6.1.1",
    "react-native-navigation": "^7.27.1",
+    "react-native-orientation-locker": "^1.5.0",
    "react-native-permissions": "^2.1.5",
    "react-native-randombytes": "^3.6.1",
    "react-native-reanimated": "2.3.3",
@@ -69,7 +69,7 @@
    "react-native-safe-area-context": "^2.0.0",
    "react-native-shake": "^3.3.1",
    "react-native-share": "^7.0.1",
-    "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#refs/tags/v2.5.38",
+    "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#refs/tags/v2.5.39",
    "react-native-svg": "^9.8.4",
    "react-native-touch-id": "^4.4.1",
    "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
@@ -1,11 +1,9 @@
 #!/usr/bin/env sh

-CHANGES=$(git diff --no-ext-diff --diff-filter=d --cached --unified=0 --no-prefix --minimal --exit-code src/quo src/quo2 | grep '^+' || echo '')
-
-INVALID_CHANGES=$(echo "$CHANGES" | grep -E '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im)')
+INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.|status-im2\.)' './src/quo2')

 if test -n "$INVALID_CHANGES"; then
-    echo "re-frame dispatch/subscribe and status-im are not allowed in quo/quo2 components"
+    echo "WARNING: re-frame, status-im are not allowed in quo2 components"
    echo ''
    echo "$INVALID_CHANGES"
    exit 1
@@ -1,64 +1,64 @@
 ;; shadow-cljs configuration
-{:source-paths   ["src" "test/cljs"]
+{:source-paths ["src" "test/cljs"]

- :dependencies   [[reagent "1.0.0"]
-                  [re-frame "0.12.0"]
-                  [binaryage/oops "0.7.0"]
-                  [com.andrewmcveigh/cljs-time "0.5.2"]
-                  [status-im/timbre "4.10.0-2-status"]
-                  [com.taoensso/encore "2.105.0"]
-                  [hickory "0.7.1"]
-                  [cljs-bean "1.3.0"]
-                  [com.cognitect/transit-cljs "0.8.248"]
-                  [mvxcvi/alphabase "1.0.0"]
-                  [camel-snake-kebab "0.4.3"]
-                  ;; dev dependencies
-                  [refactor-nrepl "2.5.0"]
-                  [cider/cider-nrepl "0.25.3"]
-                  [cider/piggieback "0.4.1"]
-                  [re-frisk-remote "1.6.0"]
-                  ;; routing
-                  [bidi "2.1.6"]
-                  ;; test dependencies
-                  [day8.re-frame/test "0.1.5"]
-                  [com.taoensso/tufte "2.1.0"]]
+ :dependencies [[reagent "1.0.0"]
+                [re-frame "0.12.0"]
+                [binaryage/oops "0.7.0"]
+                [com.andrewmcveigh/cljs-time "0.5.2"]
+                [status-im/timbre "4.10.0-2-status"]
+                [com.taoensso/encore "2.105.0"]
+                [hickory "0.7.1"]
+                [cljs-bean "1.3.0"]
+                [com.cognitect/transit-cljs "0.8.248"]
+                [mvxcvi/alphabase "1.0.0"]
+                [camel-snake-kebab "0.4.3"]
+                ;; dev dependencies
+                [refactor-nrepl "2.5.0"]
+                [cider/cider-nrepl "0.25.3"]
+                [cider/piggieback "0.4.1"]
+                [re-frisk-remote "1.6.0"]
+                ;; routing
+                [bidi "2.1.6"]
+                ;; test dependencies
+                [day8.re-frame/test "0.1.5"]
+                [com.taoensso/tufte "2.1.0"]]

 ;; port and middleware for repl in development
- :nrepl          {:port       7888
-                  :middleware [cider.piggieback/wrap-cljs-repl
-                               refactor-nrepl.middleware/wrap-refactor]}
+ :nrepl {:port       7888
+         :middleware [cider.piggieback/wrap-cljs-repl
+                      refactor-nrepl.middleware/wrap-refactor]}

 ;; shadow-cljs web interface
- :http           {:port 3449
-                  :host "0.0.0.0"}
+ :http {:port 3449
+        :host "0.0.0.0"}

 :cache-blockers #{status-im.utils.js-resources status-im.ui.components.icons.icons}

 :builds
 {:mobile
-  {:target     :react-native
+  {:target :react-native
   :output-dir "app"
-   :init-fn    status-im2.core/init
+   :init-fn status-im2.core/init
   ;; When false, the Shadow-CLJS watcher won't automatically refresh
   ;; the target files (a.k.a hot reload). When false, you can manually
   ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.
-   :devtools   {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
-   :dev        {:devtools         {:after-load   status-im2.setup.hot-reload/reload
-                                   :build-notify status-im2.setup.hot-reload/build-notify
-                                   :preloads     [re-frisk-remote.preload]}
-                :closure-defines
-                {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
-                 status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
-                :compiler-options {:output-feature-set :es5
-                                   :closure-defines
-                                   {re-frame.trace/trace-enabled? true}
-                                   :source-map         false
-                                   :infer-externs      true}
-                ;; if you want to use a real device, set your local ip
-                ;; in the SHADOW_HOST env variable to make sure that
-                ;; it will use the right interface
-                :local-ip         #shadow/env "SHADOW_HOST"}
-   :chunks     {:fleets status-im.fleet.default-fleet/default-fleets}
+   :devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
+   :dev {:devtools {:after-load   status-im2.setup.hot-reload/reload
+                    :build-notify status-im2.setup.hot-reload/build-notify
+                    :preloads     [re-frisk-remote.preload]}
+         :closure-defines
+         {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
+          status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+         :compiler-options {:output-feature-set :es5
+                            :closure-defines
+                            {re-frame.trace/trace-enabled? true}
+                            :source-map false
+                            :infer-externs true}
+         ;; if you want to use a real device, set your local ip
+         ;; in the SHADOW_HOST env variable to make sure that
+         ;; it will use the right interface
+         :local-ip #shadow/env "SHADOW_HOST"}
+   :chunks {:fleets status-im.fleet.default-fleet/default-fleets}
   :release
   {:closure-defines
    {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
@@ -77,10 +77,10 @@
  ;; produced by the target :mocks below and redefines node require
  ;; function to use the mocks instead of the rn libraries
  :test
-  {:output-to        "target/test/test.js"
-   :output-dir       "target/test"
-   :optimizations    :simple
-   :target           :node-test
+  {:output-to "target/test/test.js"
+   :output-dir "target/test"
+   :optimizations :simple
+   :target :node-test
   ;; When running tests without a REPL you can uncomment below line to `make test-watch` a specific file
   ;; :ns-regexp        "status-im2.subs.chat.messages-test$"
   :main
@@ -33,63 +33,64 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def svg #js {})

 (def react-native
-  (clj->js {:NativeModules            {:RNGestureHandlerModule {:Direction (fn [])}
-                                       :PushNotifications      {}
-                                       :Status                 utils.test/status
-                                       :ReanimatedModule       {:configureProps (fn [])}}
+  (clj->js
+   {:NativeModules            {:RNGestureHandlerModule {:Direction (fn [])}
+                               :PushNotifications      {}
+                               :Status                 utils.test/status
+                               :ReanimatedModule       {:configureProps (fn [])}}

-            :View                     {}
-            :RefreshControl           {}
-            :AppState                 {}
-            :Alert                    {:alert (fn [])}
-            :FlatList                 {}
-            :SectionList              {}
-            :Text                     {}
-            :StatusBar                {}
-            :ScrollView               {}
-            :KeyboardAvoidingView     {}
-            :TextInput                {}
-            :Image                    {}
-            :Picker                   {:Item {}}
-            :Switch                   {}
-            :Modal                    {}
-            :Keyboard                 {:dismiss (fn [])}
-            :Linking                  {}
-            :TouchableWithoutFeedback {}
-            :TouchableHighlight       {}
-            :Pressable                {}
-            :TouchableOpacity         {}
-            :ActivityIndicator        {}
-            :StyleSheet               {:create (fn [])}
-            :Animated                 {:createAnimatedComponent identity
-                                       :Value                   (fn [])
-                                       :ValueXY                 (fn [])
-                                       :View                    {}
-                                       :FlatList                {}
-                                       :ScrollView              {}
-                                       :Text                    {}}
-            :Easing                   {:bezier (fn [])
-                                       :poly   (fn [])
-                                       :out    (fn [])
-                                       :in     (fn [])
-                                       :inOut  (fn [])}
-            :DeviceEventEmitter       {:addListener (fn [])}
-            :Dimensions               {:get (fn []) :addEventListener identity}
-            :useWindowDimensions      {}
-            :Platform                 {:select (fn [])}
-            :I18nManager              {:isRTL ""}
-            :NativeEventEmitter       (fn [])
-            :LayoutAnimation          {:Presets       #js
-                                                       {:easeInEaseOut nil
-                                                        :linear        nil
-                                                        :spring        nil}
-                                       :Types         #js {}
-                                       :Properties    #{}
-                                       :create        (fn [])
-                                       :configureNext (fn [])}
-            :requireNativeComponent   (fn [] {:propTypes ""})
-            :Appearance               {:getColorScheme    (fn [])
-                                       :addChangeListener (fn [])}}))
+    :View                     {}
+    :RefreshControl           {}
+    :AppState                 {}
+    :Alert                    {:alert (fn [])}
+    :FlatList                 {}
+    :SectionList              {}
+    :Text                     {}
+    :StatusBar                {}
+    :ScrollView               {}
+    :KeyboardAvoidingView     {}
+    :TextInput                {}
+    :Image                    {}
+    :Picker                   {:Item {}}
+    :Switch                   {}
+    :Modal                    {}
+    :Keyboard                 {:dismiss (fn [])}
+    :Linking                  {}
+    :TouchableWithoutFeedback {}
+    :TouchableHighlight       {}
+    :Pressable                {}
+    :TouchableOpacity         {}
+    :ActivityIndicator        {}
+    :StyleSheet               {:create (fn [])}
+    :Animated                 {:createAnimatedComponent identity
+                               :Value                   (fn [])
+                               :ValueXY                 (fn [])
+                               :View                    {}
+                               :FlatList                {}
+                               :ScrollView              {}
+                               :Text                    {}}
+    :Easing                   {:bezier (fn [])
+                               :poly   (fn [])
+                               :out    (fn [])
+                               :in     (fn [])
+                               :inOut  (fn [])}
+    :DeviceEventEmitter       {:addListener (fn [])}
+    :Dimensions               {:get (fn []) :addEventListener identity}
+    :useWindowDimensions      {}
+    :Platform                 {:select (fn [])}
+    :I18nManager              {:isRTL ""}
+    :NativeEventEmitter       (fn [])
+    :LayoutAnimation          {:Presets       #js
+                                               {:easeInEaseOut nil
+                                                :linear        nil
+                                                :spring        nil}
+                               :Types         #js {}
+                               :Properties    #{}
+                               :create        (fn [])
+                               :configureNext (fn [])}
+    :requireNativeComponent   (fn [] {:propTypes ""})
+    :Appearance               {:getColorScheme    (fn [])
+                               :addChangeListener (fn [])}}))

 (set! js/ReactNative react-native)

@@ -138,6 +139,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def react-native-svg
  #js
   {:ClipPath #js {:render identity}
+    :Circle   #js {:render identity}
    :Defs     #js {:render identity}
    :Path     #js {:render identity}
    :Rect     #js {:render identity}
@@ -175,19 +177,19 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def react-native-navigation
  #js
   {:Navigation #js
-                 {:constants                   (fn [] #js {:then identity})
-                  :setDefaultOptions           identity
-                  :setRoot                     identity
-                  :dismissOverlay              #(js/Promise.resolve)
-                  :showOverlay                 identity
+                 {:constants (fn [] #js {:then identity})
+                  :setDefaultOptions identity
+                  :setRoot identity
+                  :dismissOverlay #(js/Promise.resolve)
+                  :showOverlay identity
                  :setLazyComponentRegistrator identity
-                  :pop                         identity
-                  :push                        identity
-                  :mergeOptions                identity
-                  :popToRoot                   identity
-                  :showModal                   identity
-                  :dismissModal                identity
-                  :registerComponent           identity
+                  :pop identity
+                  :push identity
+                  :mergeOptions identity
+                  :popToRoot identity
+                  :showModal identity
+                  :dismissModal identity
+                  :registerComponent identity
                  :events
                  (fn []
                    #js
@@ -264,7 +266,15 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (

 (def react-native-gesture-handler
  #js
-   {:default                  #js {}
+   {:FlatList                 #js {}
+    :Gesture                  #js {:Pan nil}
+    :GestureDetector          #js {}
+    :LongPressGestureHandler  #js {}
+    :NativeViewGestureHandler #js {}
+    :PanGestureHandler        #js {}
+    :PureNativeButton         #js {}
+    :RectButton               #js {}
+    :ScrollView               #js {}
    :State                    #js
                               {:BEGAN        nil
                                :ACTIVE       nil
@@ -272,19 +282,13 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
                                :END          nil
                                :FAILED       nil
                                :UNDETERMINED nil}
-    :PureNativeButton         #js {}
+    :Swipeable                #js {}
    :TapGestureHandler        #js {}
-    :PanGestureHandler        #js {}
    :TouchableHighlight       #js {}
-    :LongPressGestureHandler  #js {}
-    :TouchableWithoutFeedback #js {}
-    :NativeViewGestureHandler #js {}
-    :FlatList                 #js {}
-    :ScrollView               #js {}
    :TouchableOpacity         #js {}
-    :GestureDetector          #js {}
-    :Gesture                  #js {:Pan nil}
-    :createNativeWrapper      identity})
+    :TouchableWithoutFeedback #js {}
+    :createNativeWrapper      identity
+    :default                  #js {}})

 (def react-native-redash #js {:clamp nil})

@@ -330,6 +334,10 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def react-native-camera-roll
  (clj->js {:default #js {}}))

+(def react-native-orientation-locker
+  (clj->js {:default                    #js {}
+            :useDeviceOrientationChange #js {}}))
+
 (def wallet-connect-client
  #js
   {:default       #js {}
@@ -395,6 +403,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
    "react-native-share"                            react-native-share
    "@react-native-async-storage/async-storage"     async-storage
    "react-native-svg"                              react-native-svg
+    "react-native-orientation-locker"               react-native-orientation-locker
    "../src/js/worklet_factory.js"                  worklet-factory
    "../src/js/shell_worklets.js"                   shell-worklets
    "../src/js/bottom_sheet.js"                     bottom-sheet
@@ -66,15 +66,15 @@
           border-radius   8
           haptic-type     :selection}}
   children]
-  (let [theme'                                                        (cond
-                                                                        disabled :disabled
-                                                                        :else    theme)
+  (let [theme' (cond
+                 disabled :disabled
+                 :else    theme)
        {:keys [icon-color background-color text-color border-color]}
        (themes theme')

-        optional-haptic                                               (fn []
-                                                                        (when haptic-feedback
-                                                                          (haptic/trigger haptic-type)))]
+        optional-haptic (fn []
+                          (when haptic-feedback
+                            (haptic/trigger haptic-type)))]
    [animation/pressable
     (merge {:bg-color            background-color
             :border-radius       border-radius
@@ -14,24 +14,24 @@
  (fn [props]
    (let [{:keys [value onChange disabled]}
          (bean/bean props)
-          state                             (animated/use-value 0)
-          tap-state                         (animated/use-value (:undetermined gh/states))
-          tap-handler                       (animated/on-gesture {:state tap-state})
-          hold                              (react/use-memo
-                                             (fn []
-                                               (animated/with-timing-transition
-                                                (animated/eq tap-state (:began gh/states))
-                                                {}))
-                                             [])
-          transition                        (react/use-memo
-                                             (fn []
-                                               (animated/with-spring-transition state
-                                                                                (:lazy
-                                                                                 animated/springs)))
-                                             [])
-          press-end                         (fn []
-                                              (when (and (not disabled) onChange)
-                                                (onChange (not value))))]
+          state (animated/use-value 0)
+          tap-state (animated/use-value (:undetermined gh/states))
+          tap-handler (animated/on-gesture {:state tap-state})
+          hold (react/use-memo
+                (fn []
+                  (animated/with-timing-transition
+                   (animated/eq tap-state (:began gh/states))
+                   {}))
+                [])
+          transition (react/use-memo
+                      (fn []
+                        (animated/with-spring-transition state
+                                                         (:lazy
+                                                          animated/springs)))
+                      [])
+          press-end (fn []
+                      (when (and (not disabled) onChange)
+                        (onChange (not value))))]
      (animated/code!
       (fn []
         (animated/cond* (animated/eq tap-state (:end gh/states))
@@ -102,7 +102,7 @@
     (into [rn/view {:style header-actions-style}]
           (map header-action accessories))

-     component         component
+     component component

     :else
     [rn/view {:style header-action-placeholder}])])
@@ -111,7 +111,7 @@
  [{:keys [title subtitle component title-align]}]
  [:<>
   (cond
-     component            component
+     component component

     (and title subtitle)
     [:<>
@@ -125,12 +125,12 @@
        :number-of-lines 1}
       subtitle]]

-     title                [text/text
-                           {:weight          :bold
-                            :number-of-lines 0
-                            :align           title-align
-                            :size            :large}
-                           title])])
+     title [text/text
+            {:weight          :bold
+             :number-of-lines 0
+             :align           title-align
+             :size            :large}
+            title])])

 (defn header
  [{:keys [left-width right-width]}]
@@ -227,22 +227,22 @@
           animated                  platform/ios?
           active-background-enabled true
           haptic-type               :selection}}]
-  (let [theme                                                     (if disabled :disabled theme)
+  (let [theme (if disabled :disabled theme)
        {:keys [text-color active-background passive-background]}
        (themes theme)
-        icon-color                                                (or icon-color
-                                                                      (:icon-color (themes theme)))
-        icon-bg-color                                             (or icon-bg-color
-                                                                      (:icon-bg-color (themes theme)))
-        optional-haptic                                           (fn []
-                                                                    (when haptic-feedback
-                                                                      (haptic/trigger haptic-type)))
-        component                                                 (cond
-                                                                    (and (not on-press)
-                                                                         (not on-long-press))
-                                                                    rn/view
-                                                                    animated animated/pressable
-                                                                    :else rn/touchable-highlight)]
+        icon-color (or icon-color
+                       (:icon-color (themes theme)))
+        icon-bg-color (or icon-bg-color
+                          (:icon-bg-color (themes theme)))
+        optional-haptic (fn []
+                          (when haptic-feedback
+                            (haptic/trigger haptic-type)))
+        component (cond
+                    (and (not on-press)
+                         (not on-long-press))
+                    rn/view
+                    animated animated/pressable
+                    :else rn/touchable-highlight)]
    [rn/view
     {:background-color (cond (not= background-color nil)
                              background-color
@@ -47,7 +47,10 @@
    (into [component
           (merge {:style (text-style props)}
                  (dissoc props
-                          :style  :size
-                          :weight :color
-                          :align  :animated?))]
+                   :style
+                   :size
+                   :weight
+                   :color
+                   :align
+                   :animated?))]
          (reagent/children this))))
@@ -186,7 +186,7 @@
                            {:icon     :main-icons/show
                             :on-press #(reset! visible true)}

-                            :else                                  after)
+                            :else after)
            secure        (boolean (and secure-text-entry (not @visible))) ; must be a boolean to work on
                                                                           ; iOS
            auto-complete (cond
@@ -259,12 +259,15 @@
             (when (and platform/ios? (not after))
               {:clear-button-mode :while-editing})
             (dissoc props
-                     :style
-                     :keyboard-type :on-focus
-                     :on-blur
-                     :secure-text-entry
-                     :ref           :get-ref
-                     :auto-correct  :auto-complete-type))]
+              :style
+              :keyboard-type
+              :on-focus
+              :on-blur
+              :secure-text-entry
+              :ref
+              :get-ref
+              :auto-correct
+              :auto-complete-type))]
           (when after
             [accessory-element after])]
          (when (and show-cancel
@@ -61,9 +61,9 @@
         :justify-content  :center}
        [quo/button
         (merge (dissoc @state
-                        :theme
-                        :before
-                        :after)
+                 :theme
+                 :before
+                 :after)
                {:on-press #(println "Hello world!")}
                (when @theme
                  {:theme @theme})
@@ -121,8 +121,8 @@
                                   :property (:opacity layout-animation-properties)}}})

 (defonce enable-layout-animations
-         (when platform/android?
-           (.setLayoutAnimationEnabledExperimental ^js ui-manager true)))
+  (when platform/android?
+    (.setLayoutAnimationEnabledExperimental ^js ui-manager true)))

 (def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js rn)))

@@ -1,6 +1,6 @@
 (ns quo2.components.animated-header-flatlist.style
  (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]))
+            [react-native.reanimated :as ra]))

 (defn container-view
  [view-height]
@@ -27,7 +27,7 @@

 (defn blur-view
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:opacity animation}
   {:position :absolute
    :top      0
@@ -39,7 +39,7 @@

 (defn entity-picture
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:width  animation
    :height animation}
   {:transform        [{:scale 1}]
@@ -54,7 +54,7 @@

 (defn header-bottom-part
  [animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   {:border-top-right-radius animation
    :border-top-left-radius  animation}
   {:position         :absolute
@@ -66,9 +66,9 @@

 (defn header-comp
  [y-animation opacity-animation]
-  (reanimated/apply-animations-to-style
+  (ra/apply-animations-to-style
   ;; here using `left` won't work on Android, so we are using `translateX`
-   {:transform [{:translateX (reanimated/use-shared-value 64)} {:translateY y-animation}]
+   {:transform [{:translateX (ra/use-val 64)} {:translateY y-animation}]
    :opacity   opacity-animation}
   {:position :absolute
    :z-index  3}))
@@ -1,16 +1,15 @@
 (ns quo2.components.animated-header-flatlist.view
  (:require
-   [quo2.core :as quo]
-   [react-native.core :as rn]
-   [react-native.platform :as platform]
-   [react-native.reanimated :as reanimated]
-   [react-native.safe-area :as safe-area]
-   [reagent.core :as reagent]
-   [quo2.foundations.colors :as colors]
-   [status-im.ui.components.fast-image :as fast-image]
-   [quo2.components.animated-header-flatlist.style :as style]
-   [oops.core :as oops]
-   [utils.re-frame :as rf]))
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [react-native.reanimated :as ra]
+    [react-native.safe-area :as safe-area]
+    [react-native.fast-image :as fast-image]
+    [reagent.core :as reagent]
+    [quo2.foundations.colors :as colors]
+    [quo2.components.animated-header-flatlist.style :as style]
+    [oops.core :as oops]))

 (def header-height 234)
 (def cover-height 192)
@@ -19,16 +18,16 @@

 (defn interpolate
  [value input-range output-range]
-  (reanimated/interpolate value
-                          input-range
-                          output-range
-                          {:extrapolateLeft  "clamp"
-                           :extrapolateRight "clamp"}))
+  (ra/interpolate value
+                  input-range
+                  output-range
+                  {:extrapolateLeft  "clamp"
+                   :extrapolateRight "clamp"}))

 (defn scroll-handler
  [event initial-y scroll-y]
  (let [current-y (- (oops/oget event "nativeEvent.contentOffset.y") initial-y)]
-    (reanimated/set-shared-value scroll-y current-y)))
+    (ra/set-val scroll-y current-y)))

 (defn header
  [{:keys [theme-color display-picture-comp cover-uri title-comp]} top-inset scroll-y]
@@ -46,15 +45,13 @@
        {:style  {:width  "100%"
                  :height cover-height}
         :source {:uri cover-uri}}])
-     [reanimated/view {:style (style/header-bottom-part border-animation)}
+     [ra/view {:style (style/header-bottom-part border-animation)}
      [title-comp]]
-     [reanimated/view {:style (style/entity-picture size-animation)}
+     [ra/view {:style (style/entity-picture size-animation)}
      [display-picture-comp image-animation]]]))

-
-
 (defn animated-header-list
-  [{:keys [header-comp main-comp] :as parameters}]
+  [{:keys [header-comp main-comp back-button-on-press] :as parameters}]
  [safe-area/consumer
   (fn [insets]
     (let [window-height     (:height (rn/get-window))
@@ -67,7 +64,7 @@
           initial-y         (if platform/ios? (- (:top insets)) 0)]
       [:f>
        (fn []
-          (let [scroll-y                (reanimated/use-shared-value initial-y)
+          (let [scroll-y                (ra/use-val initial-y)
                opacity-animation       (interpolate scroll-y
                                                     [(* threshold 0.33) (* threshold 0.66)]
                                                     [0 1])
@@ -76,21 +73,21 @@
            [rn/view {:style (style/container-view view-height)}
             [rn/touchable-opacity
              {:active-opacity 1
-               :on-press       #(rf/dispatch [:navigate-back])
+               :on-press       back-button-on-press
               :style          (style/button-container {:left 20})}
              [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
             [rn/touchable-opacity
              {:active-opacity 1
               :style          (style/button-container {:right 20})}
              [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
-             [reanimated/blur-view
+             [ra/blur-view
              {:blurAmount   32
               :blurType     :light
               :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
               :style        (style/blur-view opacity-animation)}
-              [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)}
+              [ra/view {:style (style/header-comp translate-animation title-opacity-animation)}
               [header-comp]]]
-             [reanimated/flat-list
+             [ra/flat-list
              {:data                  [nil]
               :render-fn             main-comp
               :key-fn                str
@@ -1,6 +1,5 @@
 (ns quo2.components.avatars.user-avatar
-  (:require [clojure.string :refer [blank? split upper-case]]
-            [quo2.components.icon :as icons]
+  (:require [clojure.string :as string]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [quo2.theme :refer [dark?]]
@@ -40,115 +39,100 @@
            :font-size               :label}})

 (defn dot-indicator
-  [size status-indicator? online? ring? dark?]
-  (when status-indicator?
-    (let [dimensions   (get-in sizes [size :status-indicator])
-          border-width (get-in sizes [size :status-indicator-border])
-          right        (case size
-                         :big    2
-                         :medium 0
-                         :small  -2
-                         0)
-          bottom       (case size
-                         :big    (if ring?
-                                   -1
-                                   2)
-                         :medium (if ring?
-                                   0
-                                   -2)
-                         :small  (if ring?
-                                   -2
-                                   -2)
-                         0)]
-      [rn/view
-       {:style {:background-color (if online?
-                                    colors/success-50
-                                    colors/neutral-40)
-                :width            dimensions
-                :height           dimensions
-                :border-width     border-width
-                :border-radius    dimensions
-                :border-color     (if dark?
-                                    colors/neutral-100
-                                    colors/white)
-                :position         :absolute
-                :bottom           bottom
-                :right            right}}])))
+  [{:keys [size online? ring? dark?]}]
+  (let [dimensions   (get-in sizes [size :status-indicator])
+        border-width (get-in sizes [size :status-indicator-border])
+        right        (case size
+                       :big    2
+                       :medium 0
+                       :small  -2
+                       0)
+        bottom       (case size
+                       :big    (if ring? -1 2)
+                       :medium (if ring? 0 -2)
+                       :small  -2
+                       0)]
+    [rn/view
+     {:style {:background-color (if online?
+                                  colors/success-50
+                                  colors/neutral-40)
+              :width            dimensions
+              :height           dimensions
+              :border-width     border-width
+              :border-radius    dimensions
+              :border-color     (if dark?
+                                  colors/neutral-100
+                                  colors/white)
+              :position         :absolute
+              :bottom           bottom
+              :right            right}}]))

-(defn container-styling
+(defn initials-style
  [inner-dimensions outer-dimensions]
-  {:width         inner-dimensions
-   :position      :absolute
-   :top           (/ (- outer-dimensions inner-dimensions) 2)
-   :left          (/ (- outer-dimensions inner-dimensions) 2)
-   :height        inner-dimensions
-   :border-radius inner-dimensions})
+  {:position         :absolute
+   :top              (/ (- outer-dimensions inner-dimensions) 2)
+   :left             (/ (- outer-dimensions inner-dimensions) 2)
+   :width            inner-dimensions
+   :height           inner-dimensions
+   :border-radius    inner-dimensions
+   :justify-content  :center
+   :align-items      :center
+   :background-color (colors/custom-color-by-theme :turquoise 50 60)})

-(defn container
-  [inner-dimensions outer-dimensions & children]
-  [rn/view
-   {:style (merge {:background-color (colors/custom-color-by-theme :turquoise 50 60)
-                   :justify-content  :center
-                   :align-items      :center}
-                  (container-styling inner-dimensions outer-dimensions))}
-   children])
+(defn outer-styles
+  [outer-dimensions]
+  {:width         outer-dimensions
+   :height        outer-dimensions
+   :border-radius outer-dimensions})

-(def small-sizes #{:xs :xxs :xxxs})
-(def identicon-sizes #{:big :medium :small})
+(def one-initial-letter-sizes #{:xs :xxs :xxxs})
+(def valid-ring-sizes #{:big :medium :small})
+
+(defn initials-avatar
+  [{:keys [full-name size inner-dimensions outer-dimensions]}]
+  (let [amount-initials (if (one-initial-letter-sizes size) 1 2)
+        initials        (as-> full-name $
+                          (string/split $ " ")
+                          (map (comp string/upper-case first) $)
+                          (take amount-initials $)
+                          (string/join $))
+        font-size       (get-in sizes [size :font-size])]
+    [rn/view {:style (initials-style inner-dimensions outer-dimensions)}
+     [text/text
+      {:style  {:color colors/white-opa-70}
+       :weight :semi-bold
+       :size   font-size}
+      initials]]))

 (defn user-avatar
-  [{:keys [ring?
-           online?
-           size
-           status-indicator?
-           profile-picture
-           full-name]
-    :or   {full-name         "empty name"
-           status-indicator? true
+  "If no `profile-picture` is given, draws the initials based on the `full-name` and
+  uses `ring-background` to display the ring behind the initials when given. Otherwise,
+  shows the profile picture which already comes with the ring drawn over it."
+  [{:keys [full-name status-indicator? online? size profile-picture ring-background]
+    :or   {status-indicator? true
           online?           true
-           size              :big
-           ring?             true}}]
-  (let [initials             (if full-name
-                               (reduce str (map first (split full-name " ")))
-                               "")
-        first-initial-letter (if full-name
-                               (or (first full-name) "")
-                               "")
-        identicon?           (contains? identicon-sizes size)
-        small?               (contains? small-sizes size)
-        outer-dimensions     (get-in sizes [size :outer])
-        inner-dimensions     (get-in sizes
-                                     [size
-                                      (if ring?
-                                        :inner
-                                        :outer)])
-        font-size            (get-in sizes [size :font-size])
-        icon-text            (if-not (or (blank? first-initial-letter)
-                                         (blank? initials))
-                               (if small?
-                                 first-initial-letter
-                                 initials)
-                               "")]
+           size              :big}}]
+  (let [full-name        (or full-name "empty name")
+        draw-ring?       (and ring-background (valid-ring-sizes size))
+        outer-dimensions (get-in sizes [size :outer])
+        inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
    [rn/view
-     {:accessibility-label :user-avatar
-      :style               {:width         outer-dimensions
-                            :height        outer-dimensions
-                            :border-radius outer-dimensions}}
-     (when (and false (and ring? identicon?)) ;;TODO not implemented yet
-       [icons/icon :i/identicon-ring
-        {:size     outer-dimensions
-         :no-color true}])
-     (if profile-picture
-       ;; display image
+     {:style               (outer-styles outer-dimensions)
+      :accessibility-label :user-avatar}
+     ;; The `profile-picture` already has the ring in it
+     (when-let [image (or profile-picture ring-background)]
       [fast-image/fast-image
-        {:source profile-picture
-         :style  (container-styling inner-dimensions outer-dimensions)}]
-       ;; else display initials
-       [container inner-dimensions outer-dimensions
-        ^{:key :icon-text}
-        [text/text
-         {:weight :semi-bold
-          :size   font-size
-          :style  {:color colors/white-opa-70}}
-         (upper-case icon-text)]])
-     [dot-indicator size status-indicator? online? ring? (dark?)]]))
+        {:style  (outer-styles outer-dimensions)
+         :source image}])
+     (when-not profile-picture
+       [initials-avatar
+        {:full-name        full-name
+         :size             size
+         :inner-dimensions inner-dimensions
+         :outer-dimensions outer-dimensions}])
+     (when status-indicator?
+       [dot-indicator
+        {:size    size
+         :online? online?
+         :ring?   draw-ring?
+         :dark?   (dark?)}])]))
@@ -256,7 +256,7 @@
                    (if (= state :pressed)
                      (colors/theme-colors colors/neutral-100 colors/white)
                      :transparent)
-                    :width            width}
+                    :width width}
                   style)}
          [rn/view
           {:style (merge
@@ -0,0 +1,23 @@
+(ns quo2.components.colors.color-picker.component-spec
+  (:require [quo2.components.colors.color-picker.view :as color-picker]
+            [reagent.core :as reagent]
+            [test-helpers.component :as h]))
+
+(h/describe "color-picker"
+  (h/test "color picker rendered"
+    (h/render [color-picker/view])
+    (-> (h/expect (h/get-all-by-label-text :color-picker-item))
+        (.toHaveLength 12)))
+  (h/test "clicks on a color item"
+    (let [event (h/mock-fn)]
+      (h/render [color-picker/view {:on-change #(event)}])
+      (h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
+      (-> (h/expect event)
+          (.toHaveBeenCalled))))
+  (h/test "color picker color changed"
+    (let [selected (reagent/atom nil)]
+      (h/render [color-picker/view {:on-change #(reset! selected %)}])
+      (h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
+      (-> (h/expect @selected)
+          (.toStrictEqual :blue)))))
+
@@ -0,0 +1,48 @@
+(ns quo2.components.colors.color-picker.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def color-picker-container
+  {:max-width       338
+   :flex-direction  :row
+   :flex-wrap       :wrap
+   :justify-content :space-between})
+
+(def flex-break
+  {:flex-basis "100%"
+   :height     10})
+
+(defn color-button
+  [color selected?]
+  (merge {:width         48
+          :height        48
+          :border-width  4
+          :border-radius 24
+          :transform     [{:rotate "45deg"}]
+          :border-color  :transparent}
+         (when selected?
+           {:border-top-color    (colors/alpha color 0.4)
+            :border-end-color    (colors/alpha color 0.4)
+            :border-bottom-color (colors/alpha color 0.2)
+            :border-start-color  (colors/alpha color 0.2)})))
+
+(defn color-circle
+  [color border?]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "-45deg"}]
+   :background-color color
+   :justify-content  :center
+   :align-items      :center
+   :border-color     color
+   :border-width     (if border? 2 0)
+   :overflow         :hidden
+   :border-radius    20})
+
+(defn secondary-overlay
+  [secondary-color border?]
+  {:width            (if border? 18 20)
+   :height           40
+   :position         :absolute
+   :right            0
+   :background-color secondary-color})
+
@@ -0,0 +1,71 @@
+(ns quo2.components.colors.color-picker.view
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icon]
+            [reagent.core :as reagent]
+            [quo2.components.colors.color-picker.style :as style]))
+
+(def color-list [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta])
+
+(defn picker-colors
+  [blur?]
+  (concat (map (fn [color]
+                 {:name  color
+                  :color (colors/custom-color-by-theme color (if blur? 60 50) 60)})
+               color-list)
+          [{:name            :yinyang
+            :color           (colors/theme-colors (colors/custom-color :yin 50)
+                                                  (colors/custom-color :yang 50))
+            :secondary-color (colors/theme-colors (colors/custom-color :yang 50)
+                                                  (colors/custom-color :yin 50))}]))
+
+(defn- on-change-handler
+  [selected color-name on-change]
+  (reset! selected color-name)
+  (when on-change (on-change color-name)))
+
+(defn- color-item
+  [{:keys [name
+           color
+           secondary-color
+           selected?
+           on-press
+           blur?]}]
+  (let [border? (and (not blur?) (and secondary-color (not selected?)))]
+    [rn/touchable-opacity
+     {:style               (style/color-button color selected?)
+      :accessibility-label :color-picker-item
+      :on-press            #(on-press name)}
+     [rn/view
+      {:style (style/color-circle color border?)}
+      (when (and secondary-color (not selected?))
+        [rn/view
+         {:style (style/secondary-overlay secondary-color border?)}])
+      (when selected?
+        [icon/icon :i/check
+         {:size  20
+          :color (or secondary-color
+                     colors/white)}])]]))
+
+(defn view
+  "Options
+   - `default-selected?` Default selected color name.
+   - `selected` Selected color name.
+   - `on-change` Callback called when a color is selected `(fn [color-name])`.
+   - `blur?` Boolean to enable blur background support.}"
+  [{:keys [default-selected?]}]
+  (let [internal-selected (reagent/atom default-selected?)]
+    (fn [{:keys [blur? on-change selected]}]
+      (when (and (not (nil? selected)) (not= @internal-selected selected))
+        (reset! internal-selected selected))
+      [rn/view {:style style/color-picker-container}
+       (doall (map-indexed (fn [index color]
+                             [:<> {:key (color :name)}
+                              [color-item
+                               (merge color
+                                      {:selected? (= (color :name) @internal-selected)
+                                       :on-press  #(on-change-handler internal-selected % on-change)
+                                       :blur?     blur?})]
+                              (when (= index 5) [rn/view {:style style/flex-break}])])
+                           (picker-colors blur?)))])))
+
@@ -5,8 +5,8 @@
            [react-native.core :as rn]))

 (defn community-card-view-item
-  [{:keys [name description locked images
-           status tokens cover tags width]} on-press]
+  [{:keys [name description locked images cover
+           status tokens tags width]} on-press]
  [rn/touchable-without-feedback
   {:accessibility-label :community-card-item
    :on-press            on-press}
@@ -18,16 +18,16 @@
      :on-press on-press}
     [rn/view
      {:flex 1}
-      [rn/view (style/community-cover-container 40)
+      [rn/view (style/community-cover-container 60)
       [rn/image
        {:source cover
         :style
-         {:flex          1
-          :border-radius 20}}]]
+         {:flex                    1
+          :border-top-right-radius 20
+          :border-top-left-radius  20}}]]
      [rn/view (style/card-view-content-container 12)
       [rn/view (style/card-view-chat-icon 48)
        [icon/community-icon {:images images} 48]]
-
       (when (= status :gated)
         [rn/view (style/permission-tag-styles)
          [community-view/permission-tag-container
@@ -42,16 +42,15 @@
 (defn community-tags
  [tags]
  [rn/view (style/community-tags-container)
-   (for [{:keys [id tag-label resource]} tags]
-     ^{:key id}
+   (for [{:keys [name emoji]} tags]
+     ^{:key name}
     [rn/view {:margin-right 8}
      [tag/tag
-       {:id        id
-        :size      24
-        :label     tag-label
+       {:size      24
+        :label     name
        :type      :emoji
        :labelled? true
-        :resource  resource}]])])
+        :resource  emoji}]])])

 (defn community-title
  [{:keys [title description size] :or {size :small}}]
@@ -82,6 +81,5 @@
                       colors/neutral-80)
    :locked?          locked?
    :tokens           tokens
-
    :size             24
    :on-press         on-press}])
@@ -57,14 +57,18 @@

 (defn card-view-content-container
  [padding-horizontal]
-  {:flex             1
-   :height           20
-   :padding-left     padding-horizontal
-   :padding-right    padding-horizontal
-   :border-radius    16
-   :background-color (colors/theme-colors
-                      colors/white
-                      colors/neutral-90)})
+  {:position                :absolute
+   :top                     40
+   :bottom                  0
+   :left                    0
+   :right                   0
+   :height                  20
+   :padding-horizontal      padding-horizontal
+   :border-top-right-radius 16
+   :border-top-left-radius  16
+   :background-color        (colors/theme-colors
+                             colors/white
+                             colors/neutral-90)})

 (defn card-view-chat-icon
  [icon-size]
@@ -90,32 +90,36 @@

 (defn token-requirement-list
  [props community-color]
-  (let [{:keys [gate token-requirements-changed? required-tokens-lost?]} props
+  (let [{:keys [gate token-requirements-changed?
+                required-tokens-lost?]}     props
        [gate-type token-requirement-lists] gate
-        multiple-token-requirements? (multiple-token-requirements? token-requirement-lists)
-        is-sufficient? (are-multiple-token-requirements-met? token-requirement-lists)
-        you-must-hold-label (if (= gate-type :join)
-                              (cond
-                                token-requirements-changed? :t/you-must-now-hold
-                                required-tokens-lost?       :t/you-must-always-hold
-                                :else                       :t/you-must-hold)
-                              :t/you-must-hold)
-        message-label (cond
-                        (= gate-type :join)
-                        (cond
-                          token-requirements-changed? :t/community-join-requirements-changed
-                          required-tokens-lost?       :t/community-join-requirements-tokens-lost
-                          :else                       (if is-sufficient?
+        multiple-token-requirements?        (multiple-token-requirements? token-requirement-lists)
+        is-sufficient?                      (are-multiple-token-requirements-met?
+                                             token-requirement-lists)
+        you-must-hold-label                 (if (= gate-type :join)
+                                              (cond
+                                                token-requirements-changed? :t/you-must-now-hold
+                                                required-tokens-lost?       :t/you-must-always-hold
+                                                :else                       :t/you-must-hold)
+                                              :t/you-must-hold)
+        message-label                       (cond
+                                              (= gate-type :join)
+                                              (cond
+                                                token-requirements-changed?
+                                                :t/community-join-requirements-changed
+                                                required-tokens-lost?
+                                                :t/community-join-requirements-tokens-lost
+                                                :else (if is-sufficient?
                                                        :t/community-join-requirements-met
                                                        :t/community-join-requirements-not-met))
-                        (= gate-type :read)
-                        (if is-sufficient?
-                          :t/community-channel-read-requirements-met
-                          :t/community-channel-read-requirements-not-met)
-                        (= gate-type :write)
-                        (if is-sufficient?
-                          :t/community-channel-write-requirements-met
-                          :t/community-channel-write-requirements-not-met))]
+                                              (= gate-type :read)
+                                              (if is-sufficient?
+                                                :t/community-channel-read-requirements-met
+                                                :t/community-channel-read-requirements-not-met)
+                                              (= gate-type :write)
+                                              (if is-sufficient?
+                                                :t/community-channel-write-requirements-met
+                                                :t/community-channel-write-requirements-not-met))]
    [rn/view
     [rn/view {:style (get styles :token-requirement-text-spacing)}
      [text/text
@@ -0,0 +1,38 @@
+(ns quo2.components.dividers.strength-divider.component-spec
+  (:require [quo2.components.dividers.strength-divider.view :as strength-divider]
+            [test-helpers.component :as h]))
+
+(h/describe "select-profile component"
+  (h/test "render component"
+    (h/render [strength-divider/view {:type :okay}])
+    (-> (h/expect (h/get-by-label-text :strength-divider))
+        (.toBeTruthy)))
+  (h/test "render component with :type :very-weak"
+    (h/render [strength-divider/view {:type :very-weak}])
+    (-> (h/expect (h/get-by-translation-text :strength-divider-very-weak-label))
+        (.toBeTruthy)))
+  (h/test "render component with :type :weak"
+    (h/render [strength-divider/view {:type :weak}])
+    (-> (h/expect (h/get-by-translation-text :strength-divider-weak-label))
+        (.toBeTruthy)))
+  (h/test "render component with :type :okay"
+    (h/render [strength-divider/view {:type :okay}])
+    (-> (h/expect (h/get-by-translation-text :strength-divider-okay-label))
+        (.toBeTruthy)))
+  (h/test "render component with :type :strong"
+    (h/render [strength-divider/view {:type :strong}])
+    (-> (h/expect (h/get-by-translation-text :strength-divider-strong-label))
+        (.toBeTruthy)))
+  (h/test "render component with :type :very-strong"
+    (h/render [strength-divider/view {:type :very-strong}])
+    (-> (h/expect (h/get-by-translation-text :strength-divider-very-strong-label))
+        (.toBeTruthy)))
+  (h/test "render component with :type :alert"
+    (h/render [strength-divider/view {:type :alert} "Text message"])
+    (-> (h/expect (h/get-by-text "Text message"))
+        (.toBeTruthy)))
+  (h/test "render component with :type :info"
+    (h/render [strength-divider/view {:type :info} "Text Info"])
+    (-> (h/expect (h/get-by-text "Text Info"))
+        (.toBeTruthy))))
+
@@ -0,0 +1,13 @@
+(ns quo2.components.dividers.strength-divider.style)
+
+(def container
+  {:height             40
+   :flex-direction     :row
+   :padding-horizontal 20
+   :align-items        :center})
+
+(defn text
+  [color]
+  {:color       color
+   :margin-left 4})
+
@@ -0,0 +1,85 @@
+(ns quo2.components.dividers.strength-divider.view
+  (:require [quo2.components.dividers.strength-divider.style :as style]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.linear-gradient :as linear-gradient]
+            [react-native.svg :as svg]
+            [utils.i18n :as i18n]))
+
+(def strength-divider-types
+  {:very-weak   {:default-text (i18n/label :t/strength-divider-very-weak-label)
+                 :color        colors/danger-60
+                 :percentage   20}
+   :weak        {:default-text (i18n/label :t/strength-divider-weak-label)
+                 :color        (colors/custom-color :orange 60)
+                 :percentage   40}
+   :okay        {:default-text (i18n/label :t/strength-divider-okay-label)
+                 :color        (colors/custom-color :yellow 60)
+                 :percentage   60}
+   :strong      {:default-text (i18n/label :t/strength-divider-strong-label)
+                 :color        colors/success-60
+                 :percentage   80}
+   :very-strong {:default-text (i18n/label :t/strength-divider-very-strong-label)
+                 :color        colors/success-60
+                 :percentage   100}
+   :info        {:color colors/white-opa-40}
+   :alert       {:color colors/danger-60}})
+
+(defn circular-progress
+  [{:keys [color percentage]}]
+  (let [strength-indicator-radius        6.5
+        strength-indicator-circumference (* 2 Math/PI strength-indicator-radius)]
+    [svg/svg
+     {:view-box  "0 0 16 16"
+      :width     14.2
+      :transform [{:rotate "270deg"}]
+      :height    14.2}
+     [svg/circle
+      {:cx           8
+       :cy           8
+       :r            strength-indicator-radius
+       :fill         :transparent
+       :stroke-width 1.2
+       :stroke       (colors/alpha color 0.2)}]
+     [svg/circle
+      {:cx                8
+       :cy                8
+       :r                 strength-indicator-radius
+       :fill              :transparent
+       :stroke-width      1.2
+       :stroke-dasharray  strength-indicator-circumference
+       :stroke-dashoffset (* (- 100 percentage) 0.01 strength-indicator-circumference)
+       :stroke            color}]
+     [svg/circle]]))
+
+(defn strength-indicator
+  [type]
+  (let [{:keys [color percentage]} (strength-divider-types type)]
+    (case type
+      :info  nil
+      :alert [icon/icon :i/alert
+              {:color color
+               :size  16}]
+      [circular-progress {:color color :percentage percentage}])))
+
+(defn view
+  "Options
+   - `:type` `:very-weak`/`:weak`/`:okay`/`:strong`/`:very-strong`/`:info`/`:alert`)
+
+   `text` message string(only works when type is `info`/`alert`)"
+  [{:keys [type] :or {type :very-weak}} text]
+  (let [{:keys [color default-text]} (strength-divider-types type)]
+    [linear-gradient/linear-gradient
+     {:colors [(colors/alpha color 0.05) (colors/alpha color 0)]}
+     [rn/view
+      {:style               style/container
+       :accessibility-label :strength-divider}
+      [strength-indicator type]
+      [text/text
+       {:size   :paragraph-2
+        :weight :medium
+        :style  (style/text color)}
+       (or default-text text)]]]))
+
@@ -6,10 +6,10 @@
            [quo2.components.drawers.action-drawers.style :as style]))

 (defn- get-icon-color
-  [danger?]
+  [danger? override-theme]
  (if danger?
    colors/danger-50
-    (colors/theme-colors colors/neutral-50 colors/neutral-40)))
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))

 (def divider
  [rn/view
@@ -25,6 +25,7 @@
           danger?
           on-press
           add-divider?
+           override-theme
           accessibility-label]
    :as   action-props}]
  (when action-props
@@ -33,7 +34,7 @@
     [rn/touchable-highlight
      {:accessibility-label accessibility-label
       :style               (style/container sub-label)
-       :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90)
+       :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
       :on-press            on-press}
      [rn/view
       {:style (style/row-container sub-label)}
@@ -42,7 +43,7 @@
         :accessible          true
         :style               style/left-icon}
        [icon/icon icon
-         {:color (get-icon-color danger?)
+         {:color (get-icon-color danger? override-theme)
          :size  20}]]
       [rn/view
        {:style style/text-container}
@@ -50,14 +51,15 @@
         {:size   :paragraph-1
          :weight :medium
          :style  {:color
-                   (when danger?
-                     (colors/theme-colors colors/danger-50 colors/danger-60))}}
+                   (cond
+                     danger? (colors/theme-colors colors/danger-50 colors/danger-60 override-theme)
+                     :else   (colors/theme-colors colors/neutral-100 colors/white override-theme))}}
         label]
        (when sub-label
          [text/text
           {:size  :paragraph-2
            :style {:color
-                    (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
+                    (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
           sub-label])]
       (when right-icon
         [rn/view
@@ -65,7 +67,7 @@
           :accessible          true
           :accessibility-label :right-icon-for-action}
          [icon/icon right-icon
-           {:color (get-icon-color danger?)
+           {:color (get-icon-color danger? override-theme)
            :size  20}]])]]]))

 (defn action-drawer
@@ -0,0 +1,70 @@
+(ns quo2.components.drawers.drawer-buttons.component-spec
+  (:require [quo2.components.drawers.drawer-buttons.view :as drawer-buttons]
+            [react-native.core :as rn]
+            [test-helpers.component :as h]))
+
+(h/describe "drawer-buttons"
+  (h/test "the top heading and subheading render"
+    (h/render [drawer-buttons/view
+               {:top-card    {:heading :top-heading}
+                :bottom-card {:heading :bottom-heading}}
+               :top-sub-heading
+               :bottom-sub-heading])
+    (-> (js/expect (h/get-by-text "top-heading"))
+        (.toBeTruthy))
+    (-> (js/expect (h/get-by-text "top-sub-heading"))
+        (.toBeTruthy)))
+
+  (h/test "the bottom heading and subheading render"
+    (h/render [drawer-buttons/view
+               {:top-card    {:heading :top-heading}
+                :bottom-card {:heading :bottom-heading}}
+               :top-sub-heading
+               :bottom-sub-heading])
+    (-> (js/expect (h/get-by-text "bottom-heading"))
+        (.toBeTruthy))
+    (-> (js/expect (h/get-by-text "bottom-sub-heading"))
+        (.toBeTruthy)))
+
+
+  (h/test "it clicks the top card"
+    (let [event (h/mock-fn)]
+      (h/render [drawer-buttons/view
+                 {:top-card    {:on-press event
+                                :heading  :top-heading}
+                  :bottom-card {:heading :bottom-heading}}
+                 :top-sub-heading
+                 :bottom-sub-heading])
+      (h/fire-event :press (h/get-by-text "top-heading"))
+      (-> (js/expect event)
+          (.toHaveBeenCalled))))
+
+  (h/test "it clicks the bottom card"
+    (let [event (h/mock-fn)]
+      (h/render [drawer-buttons/view
+                 {:top-card    {:heading :top-heading}
+                  :bottom-card {:on-press event
+                                :heading  :bottom-heading}}
+                 :top-sub-heading
+                 :bottom-sub-heading])
+      (h/fire-event :press (h/get-by-text "bottom-heading"))
+      (-> (js/expect event)
+          (.toHaveBeenCalled))))
+
+  (h/test "the top card child renders with a render prop"
+    (h/render [drawer-buttons/view
+               {:top-card    {:heading :top-heading}
+                :bottom-card {:heading :bottom-heading}}
+               [rn/text :top-render-fn]
+               :bottom-sub-heading])
+    (-> (js/expect (h/get-by-text "top-render-fn"))
+        (.toBeTruthy)))
+
+  (h/test "the bottom card child renders with a render prop"
+    (h/render [drawer-buttons/view
+               {:top-card    {:heading :top-heading}
+                :bottom-card {:heading :bottom-heading}}
+               :top-sub-heading
+               [rn/text :bottom-render-fn]])
+    (-> (js/expect (h/get-by-text "bottom-render-fn"))
+        (.toBeTruthy))))
@@ -0,0 +1,50 @@
+(ns quo2.components.drawers.drawer-buttons.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def outer-container {:height 216})
+
+(def top-card
+  {:flex                    1
+   :padding-vertical        12
+   :padding-horizontal      20
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :background-color        colors/neutral-80})
+
+(def bottom-card
+  {:position                :absolute
+   :top                     80
+   :left                    0
+   :right                   0
+   :bottom                  0
+   :padding-vertical        12
+   :padding-horizontal      20
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :background-color        (colors/alpha colors/white 0.05)})
+
+(def bottom-container
+  {:flex-direction  :row
+   :justify-content :space-between})
+
+(def bottom-icon
+  {:border-radius   40
+   :border-width    1
+   :margin-left     24
+   :height          28
+   :width           28
+   :justify-content :center
+   :align-items     :center
+   :border-color    (colors/alpha colors/white 0.05)})
+
+(def bottom-text
+  {:flex  1
+   :color (colors/alpha colors/white 0.7)})
+
+(def top-text
+  {:color (colors/alpha colors/white 0.7)})
+
+(defn heading-text
+  [gap]
+  {:color         colors/white
+   :margin-bottom gap})
@@ -0,0 +1,83 @@
+(ns quo2.components.drawers.drawer-buttons.view
+  (:require [react-native.core :as rn]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.drawers.drawer-buttons.style :as style]))
+
+(defn render-bottom
+  [children]
+  [rn/view {:style style/bottom-container}
+   children
+   [rn/view
+    {:style style/bottom-icon}
+    [icon/icon :arrow-right
+     {:color colors/white
+      :size  20}]]])
+
+(defn label? [el] (or (string? el) (keyword? el)))
+
+(defn render-children-bottom
+  [children]
+  (if (label? children)
+    [render-bottom
+     [text/text
+      {:size   :paragraph-2
+       :style  style/bottom-text
+       :weight :semi-bold}
+      children]]
+    [render-bottom children]))
+
+(defn render-children-top
+  [children]
+  (if (label? children)
+    [text/text
+     {:size   :paragraph-2
+      :style  style/top-text
+      :weight :semi-bold}
+     children]
+    children))
+
+(defn card
+  [{:keys [on-press style heading gap accessibility-label top?]} children]
+  [rn/touchable-highlight
+   {:accessibility-label accessibility-label
+    :on-press            on-press
+    :border-radius       20
+    :style               style
+    :underlay-color      (:background-color style)}
+   [rn/view
+    [text/text
+     {:size   :heading-1
+      :style  (style/heading-text gap)
+      :weight :semi-bold}
+     heading]
+    (if top?
+      [render-children-top children]
+      [render-children-bottom children])]])
+
+(defn view
+  "[view opts]
+   opts
+   {:container-style  style-object
+    :top-card         { :on-press event
+                        :heading  string
+                        :accessibility-label keyword}
+    :bottom-card      { :on-press event
+                        :heading  string
+                        :accessibility-label keyword}}
+    child-1           string, keyword or hiccup
+    child-2           string, keyword or hiccup
+   "
+  [{:keys [container-style top-card bottom-card]} child-1 child-2]
+  [rn/view
+   {:style (merge container-style style/outer-container)}
+   [card
+    (merge {:gap   4
+            :top?  true
+            :style style/top-card}
+           top-card) child-1]
+   [card
+    (merge {:style style/bottom-card
+            :gap   20}
+           bottom-card) child-2]])
@@ -3,16 +3,16 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]))

 (defn apply-anim
  [dd-height val]
-  (reanimated/animate-shared-value-with-delay dd-height
-                                              val
-                                              300
-                                              :easing1
-                                              0))
+  (ra/animate-delay dd-height
+                    val
+                    0
+                    300
+                    :easing1))

 (def sizes
  {:big    {:icon-size 20
@@ -141,7 +141,7 @@
  [:f>
   (fn []
     (let [open?     (reagent/atom false)
-           dd-height (reanimated/use-shared-value 0)]
+           dd-height (ra/use-val 0)]
       [rn/view {:style {:flex-grow 1}}
        [dropdown-comp
         {:items        items
@@ -155,8 +155,8 @@
          :default-item default-item
          :open?        open?
          :dd-height    dd-height}]
-        [reanimated/view
-         {:style (reanimated/apply-animations-to-style
+        [ra/view
+         {:style (ra/apply-animations-to-style
                  {:height dd-height}
                  {:height dd-height})}
         [items-comp
@@ -4,7 +4,7 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]))

 (def header-height 56)
@@ -103,7 +103,7 @@
     (into [rn/view {:style header-actions-style}]
           (map header-action accessories))

-     component         component
+     component component

     :else
     [rn/view {:style header-action-placeholder}])])
@@ -112,7 +112,7 @@
  [{:keys [title subtitle component title-align]}]
  [:<>
   (cond
-     component            component
+     component component

     (and title subtitle)
     [:<>
@@ -126,12 +126,12 @@
        :number-of-lines 1}
       subtitle]]

-     title                [text/text
-                           {:weight          :bold
-                            :number-of-lines 0
-                            :align           title-align
-                            :size            :large}
-                           title])])
+     title [text/text
+            {:weight          :bold
+             :number-of-lines 0
+             :align           title-align
+             :size            :large}
+            title])])

 (defn header
  [{:keys [left-width right-width]}]
@@ -162,7 +162,7 @@
               border-bottom false}}]
      (let [status-bar-height (get insets :top 0)
            height            (+ header-height status-bar-height)]
-        [reanimated/view
+        [ra/view
         {:style (header-wrapper-style {:height        height
                                        :background    background
                                        :border-bottom border-bottom})}
@@ -24,6 +24,6 @@

              container-style)
       :accessibility-label accessibility-label
-       :source              (icons/icon-source (str (name icon-name) size))}])))
+       :source (icons/icon-source (str (name icon-name) size))}])))

 (def icon (memoize memo-icon-fn))
@@ -0,0 +1,170 @@
+(ns quo2.components.input.style
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]))
+
+(def variants-colors
+  "Colors that keep the same across input's status change"
+  {:light      {:label         colors/neutral-50
+                :icon          colors/neutral-50
+                :cursor        (colors/custom-color :blue 50)
+                :button-border colors/neutral-30
+                :clear-icon    colors/neutral-40
+                :password-icon colors/neutral-50}
+   :light-blur {:label         colors/neutral-80-opa-40
+                :icon          colors/neutral-80-opa-70
+                :cursor        (colors/custom-color :blue 50)
+                :button-border colors/neutral-80-opa-30
+                :password-icon colors/neutral-100
+                :clear-icon    colors/neutral-80-opa-30}
+   :dark       {:label         colors/neutral-40
+                :icon          colors/neutral-40
+                :cursor        (colors/custom-color :blue 60)
+                :button-border colors/neutral-70
+                :password-icon colors/white
+                :clear-icon    colors/neutral-60}
+   :dark-blur  {:label         colors/white-opa-40
+                :icon          colors/white-opa-70
+                :cursor        colors/white
+                :button-border colors/white-opa-10
+                :password-icon colors/white
+                :clear-icon    colors/white-opa-10}})
+
+(def status-colors
+  {:light      {:default  {:border-color colors/neutral-20
+                           :placeholder  colors/neutral-40
+                           :text         colors/neutral-100}
+                :focus    {:border-color colors/neutral-40
+                           :placeholder  colors/neutral-30
+                           :text         colors/neutral-100}
+                :error    {:border-color colors/danger-opa-40
+                           :placeholder  colors/neutral-40
+                           :text         colors/neutral-100}
+                :disabled {:border-color colors/neutral-20
+                           :placeholder  colors/neutral-40
+                           :text         colors/neutral-40}}
+   :light-blur {:default  {:border-color colors/neutral-80-opa-10
+                           :placeholder  colors/neutral-80-opa-40
+                           :text         colors/neutral-100}
+                :focus    {:border-color colors/neutral-80-opa-20
+                           :placeholder  colors/neutral-80-opa-20
+                           :text         colors/neutral-100}
+                :error    {:border-color colors/danger-opa-40
+                           :placeholder  colors/neutral-80-opa-40
+                           :text         colors/neutral-100}
+                :disabled {:border-color colors/neutral-80-opa-10
+                           :placeholder  colors/neutral-80-opa-30
+                           :text         colors/neutral-80-opa-30}}
+   :dark       {:default  {:border-color colors/neutral-80
+                           :placeholder  colors/neutral-50
+                           :text         colors/white}
+                :focus    {:border-color colors/neutral-60
+                           :placeholder  colors/neutral-60
+                           :text         colors/white}
+                :error    {:border-color colors/danger-opa-40
+                           :placeholder  colors/white-opa-40
+                           :text         colors/white}
+                :disabled {:border-color colors/neutral-80
+                           :placeholder  colors/neutral-40
+                           :text         colors/neutral-40}}
+   :dark-blur  {:default  {:border-color colors/white-opa-10
+                           :placeholder  colors/white-opa-40
+                           :text         colors/white}
+                :focus    {:border-color colors/white-opa-40
+                           :placeholder  colors/white-opa-20
+                           :text         colors/white}
+                :error    {:border-color colors/danger-opa-40
+                           :placeholder  colors/white-opa-40
+                           :text         colors/white}
+                :disabled {:border-color colors/white-opa-10
+                           :placeholder  colors/white-opa-20
+                           :text         colors/white-opa-20}}})
+
+(defn input-container
+  [colors-by-status small? disabled?]
+  {:flex-direction     :row
+   :padding-horizontal 8
+   :border-width       1
+   :border-color       (:border-color colors-by-status)
+   :border-radius      (if small? 10 14)
+   :opacity            (if disabled? 0.3 1)})
+
+(defn left-icon-container
+  [small?]
+  {:margin-left  (if small? 0 4)
+   :margin-right (if small? 4 8)
+   :margin-top   (if small? 5 9)
+   :height       20
+   :width        20})
+
+(defn icon
+  [colors-by-variant]
+  {:color (:icon colors-by-variant)
+   :size  20})
+
+(defn input
+  [colors-by-status small? multiple-lines?]
+  (merge (text/text-style {:size :paragraph-1 :weight :regular})
+         {:flex                1
+          :text-align-vertical :top
+          :padding-horizontal  0
+          :padding-vertical    (if small? 4 8)
+          :color               (:text colors-by-status)}
+         (when-not multiple-lines?
+           {:height (if small? 30 38)})))
+
+(defn right-icon-touchable-area
+  [small?]
+  {:margin-left   (if small? 4 8)
+   :padding-right (if small? 0 4)
+   :padding-top   (if small? 5 9)})
+
+(defn password-icon
+  [variant-colors]
+  {:size  20
+   :color (:password-icon variant-colors)})
+
+(defn clear-icon
+  [variant-colors]
+  {:size  20
+   :color (:clear-icon variant-colors)})
+
+(def texts-container
+  {:flex           1
+   :flex-direction :row
+   :height         18
+   :margin-bottom  8})
+
+(def label-container {:flex 1})
+
+(defn label-color
+  [variant-colors]
+  {:color (:label variant-colors)})
+
+(def counter-container
+  {:flex        1
+   :align-items :flex-end})
+
+(defn counter-color
+  [current-chars char-limit variant-colors]
+  {:color (if (> current-chars char-limit)
+            colors/danger-60
+            (:label variant-colors))})
+
+(defn button
+  [colors-by-variant small?]
+  {:justify-content    :center
+   :align-items        :center
+   :height             24
+   :border-width       1
+   :border-color       (:button-border colors-by-variant)
+   :border-radius      8
+   :margin-vertical    (if small? 3 7)
+   :margin-left        4
+   :margin-right       (if small? -4 0)
+   :padding-horizontal 7
+   :padding-top        1.5
+   :padding-bottom     2.5})
+
+(defn button-text
+  [colors-by-status]
+  {:color (:text colors-by-status)})
@@ -0,0 +1,173 @@
+(ns quo2.components.input.view
+  (:require [oops.core :as oops]
+            [quo2.components.icon :as icon]
+            [quo2.components.input.style :as style]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn- label-&-counter
+  [{:keys [label current-chars char-limit variant-colors]}]
+  (let [count-text (when char-limit (str current-chars "/" char-limit))]
+    [rn/view {:style style/texts-container}
+     [rn/view {:style style/label-container}
+      [text/text
+       {:style  (style/label-color variant-colors)
+        :weight :medium
+        :size   :paragraph-2}
+       label]]
+     [rn/view {:style style/counter-container}
+      [text/text
+       {:style  (style/counter-color current-chars char-limit variant-colors)
+        :weight :regular
+        :size   :paragraph-2}
+       count-text]]]))
+
+(defn- left-accessory
+  [{:keys [variant-colors small icon-name]}]
+  [rn/view {:style (style/left-icon-container small)}
+   [icon/icon icon-name (style/icon variant-colors)]])
+
+(defn- right-accessory
+  [{:keys [variant-colors small disabled on-press icon-style-fn icon-name]}]
+  [rn/touchable-opacity
+   {:style    (style/right-icon-touchable-area small)
+    :disabled disabled
+    :on-press on-press}
+   [icon/icon icon-name (icon-style-fn variant-colors)]])
+
+(defn- right-button
+  [{:keys [variant-colors colors-by-status small disabled on-press text]}]
+  [rn/touchable-opacity
+   {:style    (style/button variant-colors small)
+    :disabled disabled
+    :on-press on-press}
+   [rn/text {:style (style/button-text colors-by-status)}
+    text]])
+
+(def ^:private custom-props
+  "Custom properties that must be removed from properties map passed to InputText."
+  [:type :variant :error :right-icon :left-icon :disabled :small :button :label
+   :char-limit :on-char-limit-reach :icon-name])
+
+(defn- base-input
+  [{:keys [on-change-text on-char-limit-reach]}]
+  (let [status              (reagent/atom :default)
+        on-focus            #(reset! status :focus)
+        on-blur             #(reset! status :default)
+        multiple-lines?     (reagent/atom false)
+        set-multiple-lines! #(let [height (oops/oget % "nativeEvent.contentSize.height")]
+                               (if (> height 57)
+                                 (reset! multiple-lines? true)
+                                 (reset! multiple-lines? false)))
+        char-count          (reagent/atom 0)
+        update-char-limit!  (fn [new-text char-limit]
+                              (when on-change-text (on-change-text new-text))
+                              (let [amount-chars (count new-text)]
+                                (reset! char-count amount-chars)
+                                (when (>= amount-chars char-limit)
+                                  (on-char-limit-reach amount-chars))))]
+    (fn [{:keys [variant error right-icon left-icon disabled small button label char-limit
+                 multiline clearable]
+          :or   {variant :light}
+          :as   props}]
+      (let [status-path      (cond
+                               disabled :disabled
+                               error    :error
+                               :else    @status)
+            colors-by-status (get-in style/status-colors [variant status-path])
+            variant-colors   (style/variants-colors variant)
+            clean-props      (apply dissoc props custom-props)]
+        [rn/view
+         (when (or label char-limit)
+           [label-&-counter
+            {:variant-colors variant-colors
+             :label          label
+             :current-chars  @char-count
+             :char-limit     char-limit}])
+         [rn/view {:style (style/input-container colors-by-status small disabled)}
+          (when-let [{:keys [icon-name]} left-icon]
+            [left-accessory
+             {:variant-colors variant-colors
+              :small          small
+              :icon-name      icon-name}])
+          [rn/text-input
+           (cond-> {:style                  (style/input colors-by-status small @multiple-lines?)
+                    :placeholder-text-color (:placeholder colors-by-status)
+                    :cursor-color           (:cursor variant-colors)
+                    :editable               (not disabled)
+                    :on-focus               on-focus
+                    :on-blur                on-blur}
+             :always    (merge clean-props)
+             multiline  (assoc :on-content-size-change set-multiple-lines!)
+             char-limit (assoc :on-change-text #(update-char-limit! char-limit %)))]
+          (when-let [{:keys [on-press icon-name style-fn]} right-icon]
+            [right-accessory
+             {:variant-colors variant-colors
+              :small          small
+              :disabled       disabled
+              :icon-style-fn  style-fn
+              :icon-name      icon-name
+              :on-press       (fn []
+                                (when clearable (reset! char-count 0))
+                                (on-press))}])
+          (when-let [{:keys [on-press text]} button]
+            [right-button
+             {:colors-by-status colors-by-status
+              :variant-colors   variant-colors
+              :small            small
+              :disabled         disabled
+              :on-press         on-press
+              :text             text}])]]))))
+
+(defn- password-input
+  [_]
+  (let [password-shown? (reagent/atom false)]
+    (fn [props]
+      [base-input
+       (assoc props
+              :auto-capitalize   :none
+              :auto-complete     :new-password
+              :secure-text-entry (not @password-shown?)
+              :right-icon        {:style-fn  style/password-icon
+                                  :icon-name (if @password-shown? :i/hide :i/reveal)
+                                  :on-press  #(swap! password-shown? not)})])))
+
+(defn input
+  "This input supports the following properties:
+  - :type - Can be `:text`(default) or `:password`.
+  - :variant - :light(default), :light-blur, :dark or :dark-blur.
+  - :small - Boolean to specify if this input is rendered in its small version.
+  - :multiline - Boolean to specify if this input support multiple lines.
+  - :icon-name - The name of an icon to display at the left of the input.
+  - :error - Boolean to specify it this input marks an error.
+  - :disabled - Boolean to specify if this input is disabled or not.
+  - :clearable - Booolean to specify if this input has a clear button at the end.
+  - :on-clear - Function executed when the clear button is pressed.
+  - :button - Map containing `:on-press` & `:text` keys, if provided renders a button
+  - :label - A label for this input.
+  - :char-limit - A number to set a maximum char limit for this input.
+  - :on-char-limit-reach - Function executed each time char limit is reached or exceeded.
+  and supports the usual React Native's TextInput properties to control its behaviour:
+  - :value
+  - :default-value
+  - :on-change
+  - :on-change-text
+  ...
+  "
+  [{:keys [type clearable on-clear on-change-text icon-name]
+    :or   {type :text}
+    :as   props}]
+  (let [base-props (cond-> props
+                     icon-name      (assoc-in [:left-icon :icon-name] icon-name)
+                     clearable      (assoc :right-icon
+                                           {:style-fn  style/clear-icon
+                                            :icon-name :i/clear
+                                            :on-press  #(when on-clear (on-clear))})
+                     on-change-text (assoc :on-change-text
+                                           (fn [new-text]
+                                             (on-change-text new-text)
+                                             (reagent/flush))))]
+    (if (= type :password)
+      [password-input base-props]
+      [base-input base-props])))
@@ -0,0 +1,66 @@
+(ns quo2.components.list-items.user-list
+  (:require [react-native.core :as rn]
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icons]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.messages.author.view :as author]
+            [quo2.components.selectors.selectors :as selectors]))
+
+(def container-style
+  {:margin-horizontal  8
+   :padding-vertical   8
+   :padding-horizontal 12
+   :border-radius      12
+   :flex               1
+   :flex-direction     :row
+   :align-items        :center})
+
+(defn action-icon
+  [{:keys [type on-press on-check disabled? checked?]}]
+  [rn/touchable-opacity
+   {:on-press (when on-press on-press)
+    :style    {:position :absolute :right 20}}
+   (case type
+     :options
+     [icons/icon :i/options
+      {:size  20
+       :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
+     :checkbox
+     [selectors/checkbox
+      {:checked?            checked?
+       :accessibility-label :user-list-toggle-check
+       :disabled?           disabled?
+       :on-change           (when on-check on-check)}]
+     :close
+     [text/text "not implemented"]
+     [rn/view])])
+
+(defn user-list
+  [{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified?
+           untrustworthy? on-press on-long-press accessory]}]
+  [rn/touchable-opacity
+   {:style               container-style
+    :accessibility-label :user-list
+    :on-press            (when on-press on-press)
+    :on-long-press       (when on-long-press on-long-press)}
+   [user-avatar/user-avatar
+    {:full-name         primary-name
+     :profile-picture   photo-path
+     :status-indicator? true
+     :online?           online?
+     :size              :small}]
+   [rn/view {:style {:margin-left 8}}
+    [author/author
+     {:primary-name   primary-name
+      :secondary-name secondary-name
+      :contact?       contact?
+      :verified?      verified?
+      :untrustworthy? untrustworthy?}]
+    (when short-chat-key
+      [text/text
+       {:size  :paragraph-1
+        :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
+       short-chat-key])]
+   (when accessory
+     [action-icon accessory])])
@@ -2,7 +2,7 @@
  (:require [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
            [react-native.masked-view :as masked-view]
-            [react-native.reanimated :as reanimated]
+            [react-native.reanimated :as ra]
            [reagent.core :as reagent]))

 (def message-skeleton-height 54)
@@ -30,12 +30,12 @@
           author-width            (content-width :author)
           message-width           (content-width :message)
           {window-width :width}   (rn/use-window-dimensions)
-           translate-x             (reanimated/use-shared-value (- window-width))
-           animated-gradient-style (reanimated/apply-animations-to-style
+           translate-x             (ra/use-val (- window-width))
+           animated-gradient-style (ra/apply-animations-to-style
                                    {:transform [{:translateX translate-x}]}
                                    {:width  window-width
                                     :height "100%"})]
-       (reanimated/animate-shared-value-with-repeat translate-x window-width 1000 :linear (- 1) false)
+       (ra/animate-repeat translate-x window-width (- 1) false 1000 :linear)
       [masked-view/masked-view
        {:style       {:height message-skeleton-height}
         :maskElement (reagent/as-element
@@ -70,7 +70,7 @@
        [rn/view
         {:style {:flex             1
                  :background-color color}}
-         [reanimated/linear-gradient
+         [ra/linear-gradient
          {:colors [color color loading-color color color]
           :start  {:x 0 :y 0}
           :end    {:x 1 :y 0}
@@ -7,14 +7,6 @@
   :flex-direction :row
   :align-items    :center})

-(defn ens-text
-  []
-  {:color (colors/theme-colors colors/neutral-100 colors/white)})
-
-(defn nickname-text
-  []
-  {:color (colors/theme-colors colors/neutral-100 colors/white)})
-
 (def middle-dot-nickname
  {:color             colors/neutral-50
   :margin-horizontal 4})
@@ -27,12 +19,6 @@
  {:color       colors/neutral-50
   :margin-left 4})

-(defn profile-name-text
-  [nickname?]
-  {:color (if nickname?
-            (colors/theme-colors colors/neutral-60 colors/neutral-40)
-            (colors/theme-colors colors/neutral-100 colors/white))})
-
 (def icon-container
  {:margin-left 4})

--- a/Show More
+++ b/Show More