Add account page: fixed button style, fixed input reappearing

2023-03-02 11:46:18 +00:00
192 changed files with 10799 additions and 11677 deletions
@@ -228,8 +228,6 @@ 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):
@@ -240,7 +238,7 @@ PODS:
    - React
  - react-native-status (1.0.0):
    - React
-  - react-native-status-keycard (2.5.39):
+  - react-native-status-keycard (2.5.38):
    - Keycard
    - React
  - react-native-webview (11.16.0):
@@ -435,7 +433,6 @@ 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`)
@@ -548,8 +545,6 @@ 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:
@@ -671,13 +666,12 @@ 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: f1c1227b2d5984c10fb44db68e4bfd2937f31e98
+  react-native-status-keycard: f60ca57d789aad6875c64ece81ab06ef0609e0d3
  react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703
  React-RCTActionSheet: e911b99f0d6fa7711ffc2f62d236b12a32771835
  React-RCTAnimation: ad8b853170a059faf31d6add34f67d22391bbe01
@@ -526,7 +526,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			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";
+			shellScript = "set -o errexit\nexport 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;
@@ -584,7 +584,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			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";
+			shellScript = "set -o errexit\nexport 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;
@@ -1139,6 +1139,11 @@ 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);
@@ -866,6 +866,12 @@ 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,7 +24,6 @@ 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:
 ```
@@ -67,14 +66,9 @@ 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:~/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(+)
-
+[nix-shell:~/status-mobile]$ nix/deps/gradle/add_package.sh com.android.tools.build:gradle:3.4.0
 Regenerating Nix files...
-Successfully added: com.android.tools.build:gradle:3.5.3
-
-NOTICE: Running 'make nix-update-gradle' in a new shell is recommended.
+Found 548 direct dependencies...
+Successfully added: com.android.tools.build:gradle:3.4.0
 ```
-Keep in mind that the changes made by this script do not affect the already spawned shell.
+This may take a bit longer than normal `make nix-update-gradle` but should add the missing package.
@@ -1,10 +1,6 @@
 #!/usr/bin/env bash

-# 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
+set -Eeu

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

 # Remove duplicates and sort.
-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
+sort -uo nix/deps/gradle/deps.urls nix/deps/gradle/deps.urls

 # 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,44 +1,82 @@
 { stdenv, lib, pkgs, fetchurl, writeShellScriptBin }:

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

-  deps = lib.importJSON ./deps.json;
+  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";

  script = writeShellScriptBin "create-local-maven-repo" (''
    mkdir -p $out
    cd $out
  '' +
-    # 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"
+  # TODO: Generalize this section to not repeat the same code.
+  (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; }
+      );
+      nodeps = {
+        sha1 = attrByPath [ "nodeps" "sha1" ] "" dep;
+        sha256 = attrByPath [ "nodeps" "sha256" ] "" dep;
+      };
+      nodeps-download = optionalString (nodeps.sha256 != "") (
+        fetchurl { url = "${url}-nodeps.jar"; inherit (nodeps) 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"
+        ''}
+        ${optionalString (nodeps-download != "") ''
+        ln -s "${nodeps-download}" "${dep.path}-nodeps.jar"
+        ''}
+        ${optionalString (nodeps.sha1 != "") ''
+        echo "${nodeps.sha1}" > "${dep.path}.${dep.type}.sha1"
+        ''}
      '')
-      dep.files)
-    ) deps)
-  );
+    deps));

 in makeOverridable stdenv.mkDerivation {
  name = "status-mobile-maven-deps";
-
-  buildInputs = [ pkgs.aapt2 ];
-
+  buildInputs = [ aapt2 ];
  phases = [ "buildPhase" "patchPhase" ];
  buildPhase = "${script}/bin/create-local-maven-repo";
-  # Replace AAPT2 package only with our patched version from overlay.
+  # Patched AAPT2 
  patchPhase = ''
-    aapt2_dir=$out/com/android/tools/build/aapt2/${pkgs.aapt2.version}
+    aapt2_dir=$out/com/android/tools/build/aapt2/${aapt2.version}
    mkdir -p $aapt2_dir
-    ln -sf ${pkgs.aapt2}/* $aapt2_dir
+    ln -sf ${aapt2}/* $aapt2_dir
  '';
 }
@@ -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.32.0/checker-qual-3.32.0.pom
+https://repo.maven.apache.org/maven2/org/checkerframework/checker-qual/3.31.0/checker-qual-3.31.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
@@ -1,16 +1,18 @@
 #!/usr/bin/env bash

-# 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
+# Stop on any failures, including in pipes
+set -e
+set -o 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"

@@ -25,43 +27,41 @@ 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}")
-    # 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..."
+    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..."
 }

 # Find download URLs for each dependency.
 function gen_deps_urls() {
-    go-maven-resolver < "${DEPS_LIST}" | sort -uV -o "${DEPS_URLS}"
-    echo -e "${CLR}Found ${GRN}$(wc -l < "${DEPS_URLS}")${RST} dependency URLs..."
+    cat ${DEPS_LIST} | go-maven-resolver | 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,19 +1,12 @@
 #!/usr/bin/env bash

-# 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
+set -Eeu

 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
+AWK_SCRIPT="${GIT_ROOT}/nix/deps/gradle/gradle_parser.awk"

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

-# And clean up the output using AWK script.
-AWK_SCRIPT="${GIT_ROOT}/nix/deps/gradle/gradle_parser.awk"
+# 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`

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

-# 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
+set -Eeu

 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,7 +26,6 @@ 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,6 +6,8 @@
 # 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"
@@ -35,87 +37,105 @@ function match_repo_url() {
 }

 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}")\"
-      }"
+    grep '<shadedClassifierName>nodeps</shadedClassifierName>' $1 \
+        2>&1 >/dev/null
 }

 if [[ -z "${1}" ]]; then
-    echo "Required POM URL argument not given!" >&2
+    echo "Required argument not given!" >&2
    exit 1
 fi
+
 POM_URL=${1}
-# Drop the POM extension.
-PKG_URL_NO_EXT="${POM_URL%.pom}"
-# Name of package without extension.
-PKG_NAME="$(basename "${PKG_URL_NO_EXT}")"
+# Drop the POM extension
+OBJ_REL_URL=${POM_URL%.pom}

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

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

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

 # Both JARs and AARs have a POM
-POM_NIX_FETCH_OUT=$(nix_fetch "${PKG_URL_NO_EXT}.pom")
+POM_NIX_FETCH_OUT=$(nix_fetch "${OBJ_REL_URL}.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: ${PKG_URL_NO_EXT}.pom" >&2
+    echo " ! Failed to fetch: ${OBJ_REL_URL}.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, bundle, or just POM.
-OBJ_TYPE=$(grep -oP '<packaging>\K[^<]+' "${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

 # 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
+
+# Some deps include nodeps JARs which include.
+if pom_has_nodeps_jar "${POM_PATH}"; then
+    NODEPS_NIX_FETCH_OUT=$(nix_fetch "${OBJ_REL_URL}-nodeps.jar")
+    if [[ ${?} -eq 0 ]]; then
+        NODEPS_PATH=$(get_nix_path "${NODEPS_NIX_FETCH_OUT}")
+        NODEPS_SHA256=$(get_nix_sha "${NODEPS_NIX_FETCH_OUT}")
+        NODEPS_SHA1=$(get_sha1 "${NODEPS_PATH}")
+    fi
+fi
+
 # Format into a Nix attrset entry
 echo -ne "
  {
-    \"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  },'
+    \"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}\"
+    }";[[ -n "${NODEPS_SHA256}" ]] && echo -n ","
+fi
+if [[ -n "${NODEPS_SHA256}" ]]; then
+    echo -n "
+    \"nodeps\": {
+      \"sha1\": \"${NODEPS_SHA1}\",
+      \"sha256\": \"${NODEPS_SHA256}\"
+    }"
+fi
+echo -e "\n  },"
@@ -29,14 +29,7 @@ stdenv.mkDerivation {
  # maven and google central repositories with our own local directories.
  # This prevents the builder from downloading Maven artifacts
  patchGradlePhase = ''
-    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
+    for modBuildGradle in $(find -L ./node_modules -name build.gradle); do
      relativeToNode=''${modBuildGradle#*node_modules/}
      moduleName=''${relativeToNode%%/*}
      if [[ -L ./node_modules/$moduleName ]]; then
@@ -20,7 +20,6 @@ in {
    ];

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

 mkShell {
-  # Check if node modules changed and if so install them.
+  # Fix for ERR_OSSL_EVP_UNSUPPORTED error.
+  NODE_OPTIONS = "--openssl-legacy-provider";
+
+  # 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}
  '';
@@ -16,8 +16,7 @@ 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" 'gradlePluginPortal()' 'mavenLocal()'
+  patchMavenSource "$gradleFile" 'mavenCentral()' 'mavenLocal()'
+  patchMavenSource "$gradleFile" 'google()'       'mavenLocal()'
+  patchMavenSource "$gradleFile" 'jcenter()'      'mavenLocal()'
 '')
@@ -28,6 +28,7 @@
    "@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",
@@ -61,7 +62,6 @@
    "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",
@@ -334,10 +334,6 @@ 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 {}
@@ -403,7 +399,6 @@ 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
@@ -1,6 +1,6 @@
 (ns quo2.components.animated-header-flatlist.style
  (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as ra]))
+            [react-native.reanimated :as reanimated]))

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

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

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

 (defn header-bottom-part
  [animation]
-  (ra/apply-animations-to-style
+  (reanimated/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]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   ;; here using `left` won't work on Android, so we are using `translateX`
-   {:transform [{:translateX (ra/use-val 64)} {:translateY y-animation}]
+   {:transform [{:translateX (reanimated/use-shared-value 64)} {:translateY y-animation}]
    :opacity   opacity-animation}
   {:position :absolute
    :z-index  3}))
@@ -3,7 +3,7 @@
    [quo2.core :as quo]
    [react-native.core :as rn]
    [react-native.platform :as platform]
-    [react-native.reanimated :as ra]
+    [react-native.reanimated :as reanimated]
    [react-native.safe-area :as safe-area]
    [react-native.fast-image :as fast-image]
    [reagent.core :as reagent]
@@ -18,16 +18,16 @@

 (defn interpolate
  [value input-range output-range]
-  (ra/interpolate value
-                  input-range
-                  output-range
-                  {:extrapolateLeft  "clamp"
-                   :extrapolateRight "clamp"}))
+  (reanimated/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)]
-    (ra/set-val scroll-y current-y)))
+    (reanimated/set-shared-value scroll-y current-y)))

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

 (defn animated-header-list
@@ -64,7 +64,7 @@
           initial-y         (if platform/ios? (- (:top insets)) 0)]
       [:f>
        (fn []
-          (let [scroll-y                (ra/use-val initial-y)
+          (let [scroll-y                (reanimated/use-shared-value initial-y)
                opacity-animation       (interpolate scroll-y
                                                     [(* threshold 0.33) (* threshold 0.66)]
                                                     [0 1])
@@ -80,14 +80,14 @@
              {:active-opacity 1
               :style          (style/button-container {:right 20})}
              [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
-             [ra/blur-view
+             [reanimated/blur-view
              {:blurAmount   32
               :blurType     :light
               :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
               :style        (style/blur-view opacity-animation)}
-              [ra/view {:style (style/header-comp translate-animation title-opacity-animation)}
+              [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)}
               [header-comp]]]
-             [ra/flat-list
+             [reanimated/flat-list
              {:data                  [nil]
               :render-fn             main-comp
               :key-fn                str
@@ -254,7 +254,7 @@
                   (shape-style-container type icon size)
                   {:background-color
                    (if (= state :pressed)
-                      (colors/theme-colors colors/neutral-100 colors/white)
+                      (colors/theme-colors colors/white colors/neutral-100)
                      :transparent)
                    :width width}
                   style)}
@@ -5,8 +5,8 @@
            [react-native.core :as rn]))

 (defn community-card-view-item
-  [{:keys [name description locked images cover
-           status tokens tags width]} on-press]
+  [{:keys [name description locked images
+           status tokens cover 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 60)
+      [rn/view (style/community-cover-container 40)
       [rn/image
        {:source cover
         :style
-         {:flex                    1
-          :border-top-right-radius 20
-          :border-top-left-radius  20}}]]
+         {:flex          1
+          :border-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,15 +42,16 @@
 (defn community-tags
  [tags]
  [rn/view (style/community-tags-container)
-   (for [{:keys [name emoji]} tags]
-     ^{:key name}
+   (for [{:keys [id tag-label resource]} tags]
+     ^{:key id}
     [rn/view {:margin-right 8}
      [tag/tag
-       {:size      24
-        :label     name
+       {:id        id
+        :size      24
+        :label     tag-label
        :type      :emoji
        :labelled? true
-        :resource  emoji}]])])
+        :resource  resource}]])])

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

 (defn card-view-content-container
  [padding-horizontal]
-  {: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)})
+  {: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)})

 (defn card-view-chat-icon
  [icon-size]
@@ -4,24 +4,22 @@
 (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})
+  {:flex               1
+   :padding-vertical   12
+   :padding-horizontal 20
+   :border-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)})
+  {:position           :absolute
+   :top                80
+   :left               0
+   :right              0
+   :bottom             0
+   :padding-vertical   12
+   :padding-horizontal 20
+   :border-radius      20
+   :background-color   (colors/alpha colors/white 0.05)})

 (def bottom-container
  {:flex-direction  :row
@@ -39,14 +39,13 @@
    children))

 (defn card
-  [{:keys [on-press style heading gap accessibility-label top?]} children]
+  [{:keys [on-press style heading gap 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
+   {: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)
@@ -61,11 +60,9 @@
   opts
   {:container-style  style-object
    :top-card         { :on-press event
-                        :heading  string
-                        :accessibility-label keyword}
+                        :heading  string}
    :bottom-card      { :on-press event
-                        :heading  string
-                        :accessibility-label keyword}}
+                        :heading  string}}
    child-1           string, keyword or hiccup
    child-2           string, keyword or hiccup
   "
@@ -3,16 +3,16 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [reagent.core :as reagent]))

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

 (def sizes
  {:big    {:icon-size 20
@@ -141,7 +141,7 @@
  [:f>
   (fn []
     (let [open?     (reagent/atom false)
-           dd-height (ra/use-val 0)]
+           dd-height (reanimated/use-shared-value 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}]
-        [ra/view
-         {:style (ra/apply-animations-to-style
+        [reanimated/view
+         {:style (reanimated/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 ra]
+            [react-native.reanimated :as reanimated]
            [reagent.core :as reagent]))

 (def header-height 56)
@@ -162,7 +162,7 @@
               border-bottom false}}]
      (let [status-bar-height (get insets :top 0)
            height            (+ header-height status-bar-height)]
-        [ra/view
+        [reanimated/view
         {:style (header-wrapper-style {:height        height
                                        :background    background
                                        :border-bottom border-bottom})}
@@ -1,170 +0,0 @@
-(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)})
@@ -1,173 +0,0 @@
-(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])))
@@ -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 ra]
+            [react-native.reanimated :as reanimated]
            [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             (ra/use-val (- window-width))
-           animated-gradient-style (ra/apply-animations-to-style
+           translate-x             (reanimated/use-shared-value (- window-width))
+           animated-gradient-style (reanimated/apply-animations-to-style
                                    {:transform [{:translateX translate-x}]}
                                    {:width  window-width
                                     :height "100%"})]
-       (ra/animate-repeat translate-x window-width (- 1) false 1000 :linear)
+       (reanimated/animate-shared-value-with-repeat translate-x window-width 1000 :linear (- 1) false)
       [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}}
-         [ra/linear-gradient
+         [reanimated/linear-gradient
          {:colors [color color loading-color color color]
           :start  {:x 0 :y 0}
           :end    {:x 1 :y 0}
@@ -5,7 +5,7 @@
            [quo2.foundations.colors :as colors]
            [quo2.theme :as theme]
            [react-native.core :as rn]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [utils.string :as utils]))

 (def themes-landed
@@ -176,20 +176,20 @@
  [{:keys [type style non-pressable? animate-landing? labels on-long-press] :as message}]
  [:f>
   (fn []
-     (let [sv-color (ra/use-val
+     (let [sv-color (reanimated/use-shared-value
                     (get-color :bg (if animate-landing? :landed :default) type))]
       (when animate-landing?
-         (ra/animate-delay
+         (reanimated/animate-shared-value-with-delay
          sv-color
          (get-color :bg :default type)
-          1000
          0
-          :linear))
-       [ra/touchable-opacity
+          :linear
+          1000))
+       [reanimated/touchable-opacity
        {:on-press      #(when-not non-pressable?
-                           (ra/set-val sv-color (get-color :bg :pressed type)))
+                           (reanimated/set-shared-value sv-color (get-color :bg :pressed type)))
         :on-long-press on-long-press
-         :style         (ra/apply-animations-to-style
+         :style         (reanimated/apply-animations-to-style
                         {:background-color sv-color}
                         (merge
                          {:flex-direction     :row
@@ -5,11 +5,11 @@
            [react-native.core :as rn]
            [react-native.platform :as platform]
            [react-native.hole-view :as hole-view]
-            [react-native.reanimated :as ra]))
+            [react-native.reanimated :as reanimated]))

 (defn toggle-background-color
  [background-color press-out? pass-through?]
-  (ra/set-val
+  (reanimated/set-shared-value
   background-color
   (cond
     press-out?    "transparent"
@@ -31,14 +31,14 @@
           on-press pass-through? icon-color-anim accessibility-label test-ID]}]
  [:f>
   (fn []
-     (let [icon-animated-style       (ra/apply-animations-to-style
+     (let [icon-animated-style       (reanimated/apply-animations-to-style
                                      {:tint-color icon-color-anim}
                                      {:width       24
                                       :height      24
                                       :margin-left 33
                                       :margin-top  8})
-           background-color          (ra/use-val "transparent")
-           background-animated-style (ra/apply-animations-to-style
+           background-color          (reanimated/use-shared-value "transparent")
+           background-animated-style (reanimated/apply-animations-to-style
                                      {:background-color background-color}
                                      {:width         90
                                       :height        40
@@ -49,7 +49,7 @@
         :on-press-in         #(toggle-background-color background-color false pass-through?)
         :on-press-out        #(toggle-background-color background-color true pass-through?)
         :accessibility-label accessibility-label}
-        [ra/view {:style background-animated-style}
+        [reanimated/view {:style background-animated-style}
         ;; In android animations are not working for the animated components which are nested by
         ;; hole-view,
         ;; Interestingly this only happens when hole view and blur view are used together
@@ -69,10 +69,10 @@

                      :else
                      [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
-            [ra/image
+            [reanimated/image
             {:style  icon-animated-style
              :source (icons/icon-source (keyword (str icon 24)))}]]
-           [ra/image
+           [reanimated/image
            {:style  icon-animated-style
             :source (icons/icon-source (keyword (str icon 24)))}])
         (when new-notifications?
@@ -1,7 +1,7 @@
 (ns quo2.components.navigation.floating-shell-button
  (:require [quo2.components.buttons.dynamic-button :as dynamic-button]
            [react-native.core :as rn]
-            [react-native.reanimated :as ra]))
+            [react-native.reanimated :as reanimated]))

 (defn dynamic-button-view
  [type dynamic-buttons style]
@@ -28,12 +28,12 @@
                                   :margin-horizontal 12
                                   :pointer-events    :box-none}
                                  style)
-            animated-style (ra/apply-animations-to-style
+            animated-style (reanimated/apply-animations-to-style
                            (if opacity-anim
                              {:opacity opacity-anim}
                              {})
                            original-style)]
-        [ra/view {:style animated-style}
+        [reanimated/view {:style animated-style}
         ;; Left Section
         [rn/view {:style {:flex 1}}
          [dynamic-button-view :search dynamic-buttons
@@ -216,6 +216,7 @@
                      ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
                      :align-items        :center
                      :padding-horizontal 20
+                      :margin-top         44
                      :height             56
                      :justify-content    :space-between}
               page-nav-background-uri (assoc :background-color page-nav-color)
@@ -2,14 +2,12 @@
  (:require [quo2.foundations.colors :as colors]))

 (defn card-container
-  [customization-color padding-bottom]
-  {:flex-direction     :column
-   :padding-horizontal 12
-   :padding-top        12
-   :padding-bottom     padding-bottom
-   :flex               1
-   :border-radius      16
-   :background-color   (colors/custom-color customization-color 50 40)})
+  [customization-color]
+  {:flex-direction   :column
+   :padding          12
+   :flex             1
+   :border-radius    16
+   :background-color (colors/custom-color customization-color 50 40)})

 (def card-header
  {:flex-direction  :row
@@ -18,23 +16,25 @@
 (def name-container
  {:flex-direction :row
   :margin-top     8
+   :margin-bottom  2
   :align-items    :center
   :padding-right  12})

 (def user-name
-  {:color colors/white})
+  {:margin-right 4
+   :color        colors/white})

 (def emoji-hash
-  {:margin-top 12})
+  {:margin-top 10})

 (def user-hash
-  {:margin-top 2
-   :color      colors/white-opa-60})
+  {:color colors/white-opa-60})
+
+(def sign-button
+  {:margin-top 14})

 (def keycard-icon
-  {:margin-left 4
-   :color       colors/white-opa-40})
+  {:color colors/white-opa-40})

 (def option-button
-  {:background-color colors/white-opa-5
-   :margin-left      8})
+  {:background-color colors/white-opa-5})
@@ -1,80 +1,63 @@
 (ns quo2.components.profile.profile-card.view
-  (:require [utils.i18n :as i18n]
-            [react-native.core :as rn]
-            [quo2.components.icon :as icon]
-            [quo2.components.tags.tag :as tag]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.buttons.button :as button]
-            [quo2.components.avatars.user-avatar :as user-avatar]
-            [quo2.components.profile.profile-card.style :as style]))
+  (:require
+    [quo2.components.profile.profile-card.style :as style]
+    [quo2.foundations.colors :as colors]
+    [quo2.components.avatars.user-avatar :as user-avatar]
+    [quo2.components.icon :as icon]
+    [quo2.components.markdown.text :as text]
+    [quo2.components.buttons.button :as button]
+    [react-native.core :as rn]))
+

 (defn profile-card
-  [{:keys [key-card? profile-picture name hash customization-color
-           emoji-hash on-options-press show-emoji-hash? padding-bottom
-           show-options-button? show-user-hash? show-logged-in? on-card-press]
-    :or   {show-emoji-hash?     false
-           show-user-hash?      false
-           customization-color  :turquoise
-           show-options-button? false
-           show-logged-in?      false
-           key-card?            false}}]
-  [rn/touchable-without-feedback
-   {:on-press            on-card-press
-    :flex                1
-    :accessibility-label :profile-card}
+  [{:keys [show-sign-profile? key-card? profile-picture name hash customization-color sign-label
+           emoji-hash on-press-dots on-press-sign show-emoji-hash?]
+    :or   {show-sign-profile?  false
+           show-emoji-hash?    false
+           customization-color :turquoise
+           key-card?           false}}]
+  [rn/view
+   {:style (style/card-container customization-color)}
   [rn/view
-    (style/card-container
-     customization-color
-     (or padding-bottom (if show-emoji-hash? 12 10)))
-    [rn/view
-     {:style style/card-header}
-     [user-avatar/user-avatar
-      {:full-name         name
-       :profile-picture   profile-picture
-       :override-theme    :dark
-       :size              :medium
-       :status-indicator? false}]
-     [rn/view {:flex-direction :row}
-      (when show-logged-in?
-        [tag/tag
-         {:type                :icon
-          :size                32
-          :blurred?            true
-          :labelled?           true
-          :resource            :main-icons2/check
-          :accessibility-label :logged-in-tag
-          :icon-color          colors/success-50
-          :override-theme      :dark
-          :label               (i18n/label :t/logged-in)}])
-      (when show-options-button?
-        [button/button
-         {:size                32
-          :type                :blur-bg
-          :icon                true
-          :override-theme      :dark
-          :style               style/option-button
-          :on-press            on-options-press
-          :accessibility-label :profile-card-options}
-         :i/options])]]
-    [rn/view
-     {:style style/name-container}
+    {:style style/card-header}
+    [user-avatar/user-avatar
+     {:full-name         name
+      :profile-picture   profile-picture
+      :override-theme    :dark
+      :size              :medium
+      :status-indicator? false}]
+    [button/button
+     {:size           32
+      :type           :blur-bg
+      :icon           true
+      :override-theme :dark
+      :style          style/option-button
+      :on-press       on-press-dots}
+     :i/options]]
+   [rn/view
+    {:style style/name-container}
+    [text/text
+     {:size            :heading-2
+      :weight          :semi-bold
+      :number-of-lines 1
+      :style           style/user-name} name]
+    (when key-card?
+      (icon/icon
+       :i/keycard
+       style/keycard-icon))]
+   [text/text
+    {:weight          :monospace
+     :number-of-lines 1
+     :style           style/user-hash} hash]
+   (when (and show-emoji-hash? emoji-hash)
     [text/text
-      {:size            :heading-2
-       :weight          :semi-bold
+      {:weight          :monospace
       :number-of-lines 1
-       :style           style/user-name} name]
-     (when key-card?
-       (icon/icon
-        :i/keycard
-        style/keycard-icon))]
-    (when show-user-hash?
-      [text/text
-       {:weight          :monospace
-        :number-of-lines 1
-        :style           style/user-hash} hash])
-    (when (and show-emoji-hash? emoji-hash)
-      [text/text
-       {:weight          :monospace
-        :number-of-lines 1
-        :style           style/emoji-hash} emoji-hash])]])
+       :style           style/emoji-hash} emoji-hash])
+   (when show-sign-profile?
+     [button/button
+      {:on-press             on-press-sign
+       :type                 :community
+       :community-color      (colors/custom-color customization-color 60)
+       :community-text-color colors/white
+       :style                style/sign-button} sign-label])])
@@ -2,7 +2,7 @@
  (:require [quo2.components.icon :as icons]
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [react-native.core :refer [use-effect]]
            [quo2.components.record-audio.record-audio.helpers :refer
             [animate-linear-with-delay
@@ -14,14 +14,14 @@
  [recording? ready-to-delete? reviewing-audio?]
  [:f>
   (fn []
-     (let [opacity                   (ra/use-val 0)
-           translate-x               (ra/use-val 20)
-           scale                     (ra/use-val 1)
-           connector-opacity         (ra/use-val 0)
-           connector-width           (ra/use-val 24)
-           connector-height          (ra/use-val 12)
-           border-radius-first-half  (ra/use-val 8)
-           border-radius-second-half (ra/use-val 8)
+     (let [opacity                   (reanimated/use-shared-value 0)
+           translate-x               (reanimated/use-shared-value 20)
+           scale                     (reanimated/use-shared-value 1)
+           connector-opacity         (reanimated/use-shared-value 0)
+           connector-width           (reanimated/use-shared-value 24)
+           connector-height          (reanimated/use-shared-value 12)
+           border-radius-first-half  (reanimated/use-shared-value 8)
+           border-radius-second-half (reanimated/use-shared-value 8)
           start-x-animation         (fn []
                                       (animate-linear-with-delay translate-x 12 50 133.33)
                                       (animate-easing-with-delay connector-opacity 1 0 93.33)
@@ -73,14 +73,14 @@
                       (reset-x-animation)))
                   [@ready-to-delete?])
       [:<>
-        [ra/view {:style (style/delete-button-container opacity)}
-         [ra/view
+        [reanimated/view {:style (style/delete-button-container opacity)}
+         [reanimated/view
          {:style (style/delete-button-connector connector-opacity
                                                 connector-width
                                                 connector-height
                                                 border-radius-first-half
                                                 border-radius-second-half)}]]
-        [ra/view
+        [reanimated/view
         {:style          (style/delete-button scale translate-x opacity)
          :pointer-events :none}
         [icons/icon :i/delete
@@ -2,7 +2,7 @@
  (:require [quo2.components.icon :as icons]
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [react-native.core :refer [use-effect]]
            [quo2.components.record-audio.record-audio.helpers :refer
             [animate-linear-with-delay
@@ -14,13 +14,13 @@
  [recording? ready-to-lock? locked?]
  [:f>
   (fn []
-     (let [translate-x-y             (ra/use-val 20)
-           opacity                   (ra/use-val 0)
-           connector-opacity         (ra/use-val 0)
-           width                     (ra/use-val 24)
-           height                    (ra/use-val 12)
-           border-radius-first-half  (ra/use-val 8)
-           border-radius-second-half (ra/use-val 8)
+     (let [translate-x-y             (reanimated/use-shared-value 20)
+           opacity                   (reanimated/use-shared-value 0)
+           connector-opacity         (reanimated/use-shared-value 0)
+           width                     (reanimated/use-shared-value 24)
+           height                    (reanimated/use-shared-value 12)
+           border-radius-first-half  (reanimated/use-shared-value 8)
+           border-radius-second-half (reanimated/use-shared-value 8)
           start-x-y-animation       (fn []
                                       (animate-linear-with-delay translate-x-y 8 50 116.66)
                                       (animate-easing-with-delay connector-opacity 1 0 80)
@@ -70,14 +70,14 @@
                       (reset-x-y-animation)))
                   [@locked?])
       [:<>
-        [ra/view {:style (style/lock-button-container opacity)}
-         [ra/view
+        [reanimated/view {:style (style/lock-button-container opacity)}
+         [reanimated/view
          {:style (style/lock-button-connector connector-opacity
                                               width
                                               height
                                               border-radius-first-half
                                               border-radius-second-half)}]]
-        [ra/view
+        [reanimated/view
         {:style          (style/lock-button translate-x-y opacity)
          :pointer-events :none}
         [icons/icon (if @ready-to-lock? :i/locked :i/unlocked)
@@ -3,7 +3,7 @@
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn :refer [use-effect]]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [quo2.components.buttons.button :as button]
            [quo2.components.record-audio.record-audio.helpers :refer [set-value]]))

@@ -11,7 +11,7 @@
  [recording? reviewing-audio?]
  [:f>
   (fn []
-     (let [opacity        (ra/use-val 1)
+     (let [opacity        (reanimated/use-shared-value 1)
           show-animation #(set-value opacity 1)
           hide-animation #(set-value opacity 0)]
       (use-effect (fn []
@@ -19,7 +19,7 @@
                       (hide-animation)
                       (show-animation)))
                   [@recording? @reviewing-audio?])
-       [ra/view {:style (style/record-button-container opacity)}
+       [reanimated/view {:style (style/record-button-container opacity)}
        [button/button
         {:type                :outline
          :size                32
@@ -3,7 +3,7 @@
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn :refer [use-effect]]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [react-native.audio-toolkit :as audio]
            [taoensso.timbre :as log]
            [cljs-bean.core :as bean]
@@ -37,7 +37,7 @@
    (fn [props]
      (let [{:keys [scale opacity color]} (bean/bean props)]
        (reagent/as-element
-         [ra/view {:style (style/animated-circle scale opacity color)}]))))))
+         [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))

 (defn record-button-big
  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
@@ -45,29 +45,29 @@
   clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
  [:f>
   (fn []
-     (let [scale                (ra/use-val 1)
-           opacity              (ra/use-val 0)
+     (let [scale                (reanimated/use-shared-value 1)
+           opacity              (reanimated/use-shared-value 0)
           opacity-from         (if @ready-to-lock? opacity-from-lock opacity-from-default)
           animations           (map
                                 (fn [index]
                                   (let [ring-scale (ring-scale scale (* scale-padding index))]
                                     {:scale   ring-scale
-                                      :opacity (ra/interpolate ring-scale
-                                                               [1 scale-to-each]
-                                                               [opacity-from 0])}))
+                                      :opacity (reanimated/interpolate ring-scale
+                                                                       [1 scale-to-each]
+                                                                       [opacity-from 0])}))
                                 (range 0 5))
           rings-color          (cond
                                  @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
                                                                         colors/neutral-80)
                                  @ready-to-delete? colors/danger-50
                                  :else             colors/primary-50)
-           translate-y          (ra/use-val 0)
-           translate-x          (ra/use-val 0)
+           translate-y          (reanimated/use-shared-value 0)
+           translate-x          (reanimated/use-shared-value 0)
           button-color         colors/primary-50
           icon-color           (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
-           icon-opacity         (ra/use-val 1)
-           red-overlay-opacity  (ra/use-val 0)
-           gray-overlay-opacity (ra/use-val 0)
+           icon-opacity         (reanimated/use-shared-value 1)
+           red-overlay-opacity  (reanimated/use-shared-value 0)
+           gray-overlay-opacity (reanimated/use-shared-value 0)
           complete-animation   (fn []
                                  (cond
                                    (and @ready-to-lock? (not @record-button-is-animating?))
@@ -114,7 +114,7 @@
                                     signal-anim-duration)))
           stop-animation       (fn []
                                  (set-value opacity 0)
-                                  (ra/cancel-animation scale)
+                                  (reanimated/cancel-animation scale)
                                  (set-value scale 1)
                                  (when @clear-timeout (js/clearTimeout @clear-timeout)))
           start-y-animation    (fn []
@@ -190,7 +190,7 @@
                       (start-x-animation)
                       (reset-x-animation)))
                   [@ready-to-delete?])
-       [ra/view
+       [reanimated/view
        {:style          (style/record-button-big-container translate-x translate-y opacity)
         :pointer-events :none}
        [:<>
@@ -203,9 +203,9 @@
              :color   rings-color}])
          animations)]
        [rn/view {:style (style/record-button-big-body button-color)}
-         [ra/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}]
-         [ra/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}]
-         [ra/view {:style (style/record-button-big-icon-container icon-opacity)}
+         [reanimated/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}]
+         [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}]
+         [reanimated/view {:style (style/record-button-big-icon-container icon-opacity)}
          (if @locked?
            [rn/view {:style style/stop-icon}]
            [icons/icon :i/audio {:color icon-color}])]]]))])
@@ -2,7 +2,7 @@
  (:require [quo2.components.icon :as icons]
            [quo2.components.record-audio.record-audio.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as ra]
+            [react-native.reanimated :as reanimated]
            [react-native.core :refer [use-effect]]
            [quo2.components.record-audio.record-audio.helpers :refer
             [animate-linear
@@ -14,13 +14,13 @@
  [recording? ready-to-send? reviewing-audio?]
  [:f>
   (fn []
-     (let [opacity                   (ra/use-val 0)
-           translate-y               (ra/use-val 20)
-           connector-opacity         (ra/use-val 0)
-           width                     (ra/use-val 12)
-           height                    (ra/use-val 24)
-           border-radius-first-half  (ra/use-val 16)
-           border-radius-second-half (ra/use-val 8)
+     (let [opacity                   (reanimated/use-shared-value 0)
+           translate-y               (reanimated/use-shared-value 20)
+           connector-opacity         (reanimated/use-shared-value 0)
+           width                     (reanimated/use-shared-value 12)
+           height                    (reanimated/use-shared-value 24)
+           border-radius-first-half  (reanimated/use-shared-value 16)
+           border-radius-second-half (reanimated/use-shared-value 8)
           start-y-animation         (fn []
                                       (animate-linear-with-delay translate-y 12 50 133.33)
                                       (animate-easing-with-delay connector-opacity 1 0 93.33)
@@ -74,14 +74,14 @@
                       @recording? (reset-y-animation)))
                   [@ready-to-send?])
       [:<>
-        [ra/view {:style (style/send-button-container opacity)}
-         [ra/view
+        [reanimated/view {:style (style/send-button-container opacity)}
+         [reanimated/view
          {:style (style/send-button-connector connector-opacity
                                               width
                                               height
                                               border-radius-first-half
                                               border-radius-second-half)}]]
-        [ra/view
+        [reanimated/view
         {:style          (style/send-button translate-y opacity)
          :pointer-events :none}
         [icons/icon :i/arrow-up
@@ -1,9 +1,9 @@
 (ns quo2.components.record-audio.record-audio.helpers
-  (:require [react-native.reanimated :as ra]))
+  (:require [react-native.reanimated :as reanimated]))

 (defn animate-linear
  [shared-value value duration]
-  (ra/animate
+  (reanimated/animate-shared-value-with-timing
   shared-value
   value
   duration
@@ -11,26 +11,26 @@

 (defn animate-linear-with-delay
  [shared-value value duration delay]
-  (ra/animate-delay
+  (reanimated/animate-shared-value-with-delay
   shared-value
   value
-   delay
   duration
-   :linear))
+   :linear
+   delay))

 (defn animate-linear-with-delay-loop
  [shared-value value duration delay]
-  (ra/animate-delay-repeat
+  (reanimated/animate-shared-value-with-delay-repeat
   shared-value
   value
-   delay
-   -1
   duration
-   :linear))
+   :linear
+   delay
+   -1))

 (defn animate-easing
  [shared-value value duration]
-  (ra/animate
+  (reanimated/animate-shared-value-with-timing
   shared-value
   value
   duration
@@ -38,13 +38,13 @@

 (defn animate-easing-with-delay
  [shared-value value duration delay]
-  (ra/animate-delay
+  (reanimated/animate-shared-value-with-delay
   shared-value
   value
-   delay
   duration
-   :easing1))
+   :easing1
+   delay))

 (defn set-value
  [shared-value value]
-  (ra/set-val shared-value value))
+  (reanimated/set-shared-value shared-value value))
@@ -1,10 +1,10 @@
 (ns quo2.components.record-audio.record-audio.style
  (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as ra]))
+            [react-native.reanimated :as reanimated]))

 (defn animated-circle
  [scale opacity color]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:transform [{:scale scale}]
    :opacity   opacity}
   {:width           56
@@ -19,7 +19,7 @@

 (defn record-button-big-container
  [translate-x translate-y opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:transform [{:translateY translate-y}
                {:translateX translate-x}]
    :opacity   opacity}
@@ -44,7 +44,7 @@

 (defn record-button-big-red-overlay
  [red-overlay-opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity red-overlay-opacity}
   {:position         :absolute
    :top              0
@@ -55,7 +55,7 @@

 (defn record-button-big-gray-overlay
  [gray-overlay-opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity gray-overlay-opacity}
   {:position         :absolute
    :top              0
@@ -66,7 +66,7 @@

 (defn record-button-big-icon-container
  [icon-opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity icon-opacity}
   {}))

@@ -78,7 +78,7 @@

 (defn send-button-container
  [opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity opacity}
   {:justify-content :center
    :align-items     :center
@@ -90,7 +90,7 @@

 (defn send-button-connector
  [opacity width height border-radius-first-half border-radius-second-half]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity                    opacity
    :width                      width
    :height                     height
@@ -106,7 +106,7 @@

 (defn send-button
  [translate-y opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:transform [{:translateY translate-y}]
    :opacity   opacity}
   {:justify-content  :center
@@ -125,7 +125,7 @@

 (defn lock-button-container
  [opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity opacity}
   {:transform       [{:rotate "45deg"}]
    :justify-content :center
@@ -138,7 +138,7 @@

 (defn lock-button-connector
  [opacity width height border-radius-first-half border-radius-second-half]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity                    opacity
    :width                      width
    :height                     height
@@ -154,7 +154,7 @@

 (defn lock-button
  [translate-x-y opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:transform [{:translateX translate-x-y}
                {:translateY translate-x-y}]
    :opacity   opacity}
@@ -172,7 +172,7 @@

 (defn delete-button-container
  [opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity opacity}
   {:justify-content :center
    :align-items     :center
@@ -184,7 +184,7 @@

 (defn delete-button-connector
  [opacity width height border-radius-first-half border-radius-second-half]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity                    opacity
    :width                      width
    :height                     height
@@ -200,7 +200,7 @@

 (defn delete-button
  [scale translate-x opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:transform [{:translateX translate-x}
                {:scale scale}]
    :opacity   opacity}
@@ -217,7 +217,7 @@

 (defn record-button-container
  [opacity]
-  (ra/apply-animations-to-style
+  (reanimated/apply-animations-to-style
   {:opacity opacity}
   {:margin-bottom 32
    :margin-right  32}))
@@ -2,7 +2,7 @@
  (:require [react-native.core :as rn]))

 (defn style-container
-  [size disabled border-color border-width background-color labelled? type]
+  [size disabled border-color border-width background-color label type]
  (merge {:height           size
          :border-color     border-color
          :background-color background-color
@@ -12,23 +12,14 @@
          :justify-content  :center}
         (when disabled
           {:opacity 0.3})
-         (when (and (or (= type :icon) (= type :emoji)) (not labelled?))
+         (when (and (or (= type :icon) (= type :emoji)) (not label))
           {:width size})))

 (defn base-tag
  [_]
-  (fn
-    [{:keys [id
-             size
-             disabled?
-             border-color
-             border-width
-             background-color
-             on-press
-             accessibility-label
-             type
-             labelled?]
-      :or   {size 32}} children]
+  (fn [{:keys [id size disabled? border-color border-width background-color on-press
+               accessibility-label labelled? type]
+        :or   {size 32}} children]
    [rn/touchable-without-feedback
     (merge {:disabled            disabled?
             :accessibility-label accessibility-label}
@@ -27,7 +27,7 @@
                      :text-color           {:style {:color colors/white}}}}})

 (defn tag-resources
-  [size type resource icon-color label text-color labelled?]
+  [size type resource icon-color label text-color labelled]
  [rn/view
   {:style (merge {:flex-direction  :row
                   :align-items     :center
@@ -46,14 +46,16 @@
                          24 12)
       :color           icon-color}])
   (when (= type :emoji)
-     [text/text
-      {:style {:margin-right 4}
-       :size  (case size
-                32 :paragraph-1
-                24 :paragraph-2
-                nil)}
-      resource])
-   (when labelled?
+     [rn/image
+      {:source resource
+       :style  (merge (case size
+                        32 {:height 20
+                            :width  20}
+                        24 {:height 12
+                            :width  12})
+                      (when label
+                        {:margin-right 4}))}])
+   (when labelled
     [text/text
      (merge {:size            (case size
                                 32 :paragraph-1
@@ -68,7 +70,6 @@
 (defn tag
  "opts
   {:type         :icon/:emoji/:label
-    :label        string
    :size         32/24
    :on-press     fn
    :blurred?     true/false 
@@ -81,26 +82,14 @@
    - `type`     can be icon or emoji with or without a tag label
    - `labelled` boolean: is true if tag has label else false"
  [_ _]
-  (fn
-    [{:keys [id
-             on-press
-             disabled?
-             size
-             active
-             accessibility-label
-             label
-             resource
-             type
-             labelled?
-             blurred?
-             icon-color
-             override-theme]
-      :or   {size 32}}]
+  (fn [{:keys [id on-press disabled? size resource active accessibility-label
+               label type labelled? blurred? icon-color]
+        :or   {size 32}}]
    (let [state (cond disabled? :disabled
                      active    :active
                      :else     :default)
          {:keys [border-color blurred-border-color text-color]}
-          (get-in themes [(or override-theme (theme/get-theme)) state])]
+          (get-in themes [(theme/get-theme) state])]
      [rn/view {:style {:align-items :center}}
       [base-tag/base-tag
        {:id                  id
@@ -138,9 +138,7 @@
                              :blurred?   blurred?
                              :icon-color icon-color
                              :disabled?  disabled?
-                              :label      (if labelled?
-                                            label
-                                            (when (= type :label) label))
+                              :label      label
                              :type       type
                              :labelled?  labelled?
                              :on-press   (fn [id]
@@ -152,18 +150,17 @@
                                                                :index        index
                                                                :viewPosition 0.5}))
                                            (when on-change
-                                              (on-change id)))}]])})])
+                                              (on-change id)))}
+                             label]])})])
          [rn/view {:style {:flex-direction :row}}
-           (for [{:keys [id label resource]} data]
+           (for [{:keys [label id resource]} data]
             ^{:key id}
             [rn/view {:style {:margin-right 8}}
              [tag/tag
               (merge {:id         id
                       :size       size
                       :type       type
-                       :label      (if labelled?
-                                     label
-                                     (when (= type :label) label))
+                       :label      (if labelled? label (when (= type :label) label))
                       :active     (= id active-tab-id)
                       :disabled?  disabled?
                       :blurred?   blurred?
@@ -30,7 +30,6 @@
    quo2.components.icon
    quo2.components.info.info-message
    quo2.components.info.information-box
-    quo2.components.input.view
    quo2.components.list-items.channel
    quo2.components.list-items.menu-item
    quo2.components.list-items.preview-list
@@ -140,9 +139,6 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)

-;;;; INPUTS
-(def input quo2.components.input.view/input)
-
 ;;;; LIST ITEMS
 (def channel-list-item quo2.components.list-items.channel/list-item)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
@@ -58,6 +58,10 @@
 (def neutral-95 "#0D1625")
 (def neutral-100 "#09101C")

+;;Blur
+(def neutral-5-opa-70 (alpha neutral-5 0.7))
+(def neutral-90-opa-70 (alpha neutral-90 0.7))
+
 ;;80 with transparency
 (def neutral-80-opa-5 (alpha neutral-80 0.05))
 (def neutral-80-opa-10 (alpha neutral-80 0.1))
@@ -110,14 +114,6 @@
 (def white-opa-90 (alpha white 0.9))
 (def white-opa-95 (alpha white 0.95))

-;;;;Blur
-(def white-70-blur (alpha white 0.7))
-(def neutral-5-opa-70-blur (alpha neutral-5 0.7))
-(def neutral-80-opa-80-blur (alpha "#192438" 0.8))
-(def neutral-90-opa-70-blur (alpha neutral-90 0.7))
-(def neutral-95-opa-70-blur neutral-95-opa-70)
-(def neutral-100-opa-70-blur neutral-100-opa-70)
-
 ;;;;Black

 ;;Solid
@@ -156,10 +152,6 @@
 (def success-60-opa-40 (alpha success-60 0.4))

 ;;;;Danger
-(def danger "#E95460")
-
-;; Danger with transparency
-(def danger-opa-40 (alpha danger 0.4))

 ;;Solid
 (def danger-50 "#E65F5C")
@@ -26,8 +26,6 @@

 (defn on-end [gesture handler] (.onEnd ^js gesture handler))

-(defn on-finalize [gesture handler] (.onFinalize ^js gesture handler))
-
 (defn number-of-taps [gesture count] (.numberOfTaps ^js gesture count))

 (defn enabled [gesture enabled?] (.enabled ^js gesture enabled?))
@@ -1,32 +0,0 @@
-(ns react-native.orientation
-  (:require ["react-native-orientation-locker" :default orientation :refer (useDeviceOrientationChange)]
-            [react-native.navigation :as navigation]))
-
-(def use-device-orientation-change useDeviceOrientationChange)
-
-(def get-auto-rotate-state (.-getAutoRotateState orientation))
-
-(def portrait-options
-  (clj->js {:layout    {:orientation ["portrait"]}
-            :statusBar {:visible true}}))
-
-(def landscape-option-1 (clj->js {:layout {:orientation ["landscape"]}}))
-(def landscape-option-2 (clj->js {:statusBar {:visible false}}))
-
-(defn lock-to-portrait
-  [id]
-  (navigation/merge-options id portrait-options))
-
-(defn lock-to-landscape
-  [id]
-  (navigation/merge-options id landscape-option-1)
-  ;; On Android, hiding the status-bar while changing orientation causes a flicker, so we enqueue it
-  (js/setTimeout #(navigation/merge-options id landscape-option-2) 0))
-
-(def ^:const portrait "PORTRAIT")
-
-(def ^:const landscape "LANDSCAPE")
-
-(def ^:const landscape-left "LANDSCAPE-LEFT")
-
-(def ^:const landscape-right "LANDSCAPE-RIGHT")
@@ -20,13 +20,12 @@
            [react-native.flat-list :as rn-flat-list]
            [utils.collection]))

-;;; Constants
-(def ^:const default-duration 300)
+;; Animations
+(def slide-in-up-animation SlideInUp)
+(def slide-out-up-animation SlideOutUp)
+(def linear-transition LinearTransition)

-;;; Worklets
-(def worklet-factory (js/require "../src/js/worklet_factory.js"))
-
-;;; Animated Components
+;; Animated Components
 (def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent reanimated)))

 (def view (reagent/adapt-react-class (.-View reanimated)))
@@ -35,22 +34,18 @@
 (defn flat-list
  [props]
  [reanimated-flat-list (rn-flat-list/base-list-props props)])
+
 (def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn)))
+
 (def linear-gradient (create-animated-component LinearGradient))
 (def fast-image (create-animated-component FastImage))
 (def blur-view (create-animated-component (.-BlurView blur)))

-;;; Easings
-(def in-out (.-inOut ^js Easing))
-(def bezier (.-bezier ^js Easing))
-(def easings
-  {:default (in-out (.-quad ^js Easing))
-   :linear  (bezier 0 0 1 1)
-   :easing1 (bezier 0.25 0.1 0.25 1)
-   :easing2 (bezier 0 0.3 0.6 0.9)
-   :easing3 (bezier 0.3 0.3 0.3 0.9)})
+;; Hooks
+(def use-shared-value useSharedValue)
+(def use-animated-style useAnimatedStyle)

-;;; Animations
+;; Animations
 (def with-timing withTiming)
 (def with-delay withDelay)
 (def with-spring withSpring)
@@ -58,103 +53,104 @@
 (def key-frame Keyframe)
 (def with-repeat withRepeat)
 (def cancel-animation cancelAnimation)
-(defn with-repeat-timing
-  [val reps reverse? duration easing]
-  (with-repeat
-   (with-timing val
-                (clj->js {:duration duration
-                          :easing   (get easings easing)}))
-   reps
-   reverse?))

+;; Easings
+(def bezier (.-bezier ^js Easing))

-;;; Hooks and Helpers
-(def use-val useSharedValue)
-(defn get-val
+(def easings
+  {:linear  (bezier 0 0 1 1)
+   :easing1 (bezier 0.25 0.1 0.25 1) ;; TODO(parvesh) - rename easing functions, (design team input)
+   :easing2 (bezier 0 0.3 0.6 0.9)
+   :easing3 (bezier 0.3 0.3 0.3 0.9)})
+
+;; Helper functions
+(defn get-shared-value
  [anim]
  (when anim
    (.-value anim)))
-(defn set-val
+
+(defn set-shared-value
  [anim val]
  (when (and anim (some? val))
    (set! (.-value anim) val)))

-;;; Executing animation functions
-(defn animate
-  ([animation value]
-   (animate animation value default-duration :default))
-  ([animation value duration]
-   (animate animation value duration :default))
-  ([animation value duration easing]
-   (set-val animation
-            (with-timing value
-                         (clj->js {:duration duration
-                                   :easing   (get easings easing)})))))
-
-(defn animate-spring
-  [animation val {:keys [damping mass stiffness]}]
-  (set-val animation
-           (with-spring val
-                        (clj->js {:damping   damping
-                                  :mass      mass
-                                  :stiffness stiffness}))))
-
-(defn animate-decay
-  ([animation velocity]
-   (animate-decay animation velocity []))
-  ([animation velocity clamp]
-   (set-val animation
-            (with-decay (clj->js {:velocity velocity
-                                  :clamp    clamp})))))
-
-(defn animate-delay
-  ([animation val delay]
-   (animate-delay animation val delay default-duration :default))
-  ([animation val delay duration]
-   (animate-delay animation val delay duration :default))
-  ([animation val delay duration easing]
-   (set-val animation
-            (with-delay delay
-                        (with-timing val
-                                     (clj->js {:duration duration
-                                               :easing   (get easings easing)}))))))
-
-(defn animate-repeat
-  ([animation val reps]
-   (animate-repeat animation val reps false default-duration :default))
-  ([animation val reps reverse?]
-   (animate-repeat animation val reps reverse? default-duration :default))
-  ([animation val reps reverse? duration]
-   (animate-repeat animation val reps reverse? duration :default))
-  ([animation val reps reverse? duration easing]
-   (set-val animation (with-repeat-timing val reps reverse? duration easing))))
-
-(defn animate-delay-repeat
-  ([animation val duration easing delay reps]
-   (animate-delay-repeat animation val duration easing delay reps false))
-  ([animation val duration easing delay reps reverse?]
-   (set-val animation (with-delay delay (with-repeat-timing val reps reverse? duration easing)))))
+;; Worklets
+(def worklet-factory (js/require "../src/js/worklet_factory.js"))

 (defn interpolate
-  ([val input-range output-range]
-   (interpolate val input-range output-range nil))
-  ([val input-range output-range extrapolation]
+  ([shared-value input-range output-range]
+   (interpolate shared-value input-range output-range nil))
+  ([shared-value input-range output-range extrapolation]
   (.interpolateValue ^js worklet-factory
-                      val
+                      shared-value
                      (clj->js input-range)
                      (clj->js output-range)
                      (clj->js extrapolation))))

-
-;;; Styling
-(def use-animated-style useAnimatedStyle)
+;;;; Component Animations
 (defn apply-animations-to-style
  [animations style]
  (use-animated-style
   (.applyAnimationsToStyle ^js worklet-factory (clj->js animations) (clj->js style))))

+;; Animators
+(defn animate-shared-value-with-timing
+  [anim val duration easing]
+  (set-shared-value anim
+                    (with-timing val
+                                 (js-obj "duration" duration
+                                         "easing"   (get easings easing)))))

-;;; Built-in Animations
-(def slide-in-up-animation SlideInUp)
-(def slide-out-up-animation SlideOutUp)
-(def linear-transition LinearTransition)
+(defn animate-shared-value-with-delay
+  [anim val duration easing delay]
+  (set-shared-value anim
+                    (with-delay delay
+                                (with-timing val
+                                             (js-obj "duration" duration
+                                                     "easing"   (get easings easing))))))
+
+(defn animate-shared-value-with-repeat
+  [anim val duration easing number-of-repetitions reverse?]
+  (set-shared-value anim
+                    (with-repeat (with-timing val
+                                              (js-obj "duration" duration
+                                                      "easing"   (get easings easing)))
+                                 number-of-repetitions
+                                 reverse?)))
+
+(defn animate-shared-value-with-delay-repeat
+  ([anim val duration easing delay number-of-repetitions]
+   (animate-shared-value-with-delay-repeat anim val duration easing delay number-of-repetitions false))
+  ([anim val duration easing delay number-of-repetitions reverse?]
+   (set-shared-value anim
+                     (with-delay delay
+                                 (with-repeat
+                                  (with-timing val
+                                               #js
+                                                {:duration duration
+                                                 :easing   (get easings easing)})
+                                  number-of-repetitions
+                                  reverse?)))))
+
+(defn animate-shared-value-with-spring
+  [anim val {:keys [mass stiffness damping]}]
+  (set-shared-value anim
+                    (with-spring val
+                                 (js-obj "mass"      mass
+                                         "damping"   damping
+                                         "stiffness" stiffness))))
+
+(defn animate-shared-value-with-decay
+  [anim velocity clamp]
+  (set-shared-value anim
+                    (with-decay (clj->js {:velocity velocity
+                                          :clamp    clamp}))))
+
+(def in-out
+  (.-inOut Easing))
+
+(defn with-timing-duration
+  [val duration]
+  (with-timing val
+               (clj->js {:duration duration
+                         :easing   (in-out (.-quad ^js Easing))})))
@@ -1,28 +1,13 @@
 (ns status-im.data-store.activities
  (:require [clojure.set :as set]
-            [status-im.data-store.messages :as messages]
            [status-im2.constants :as constants]
+            [status-im.data-store.messages :as messages]
            [status-im2.contexts.activity-center.notification-types :as notification-types]))

 (defn mark-notifications-as-read
  [notifications]
  (map #(assoc % :read true) notifications))

-(defn pending-contact-request?
-  [contact-id {:keys [type author]}]
-  (and (= type notification-types/contact-request)
-       (= contact-id author)))
-
-(defn parse-notification-counts-response
-  [response]
-  (reduce-kv (fn [acc k count-number]
-               (let [maybe-type (js/parseInt (name k) 10)]
-                 (if (notification-types/all-supported maybe-type)
-                   (assoc acc maybe-type count-number)
-                   acc)))
-             {}
-             response))
-
 (defn- rpc->type
  [{:keys [type name] :as chat}]
  (case type
@@ -97,33 +97,3 @@
               (assoc :type notification-types/one-to-one-chat)
               store/<-rpc
               (select-keys [:name :chat-type :chat-name :public? :group-chat]))))))
-
-(deftest remove-pending-contact-request-test
-  (is (true? (store/pending-contact-request?
-              "contact-id"
-              {:type   notification-types/contact-request
-               :author "contact-id"})))
-  (is (false? (store/pending-contact-request?
-               "contact-id"
-               {:type   notification-types/contact-request
-                :author "contactzzzz"}))))
-
-(deftest parse-notification-counts-response-test
-  (is
-   (= {notification-types/one-to-one-chat      15
-       notification-types/private-group-chat   16
-       notification-types/mention              17
-       notification-types/reply                18
-       notification-types/contact-request      19
-       notification-types/admin                20
-       notification-types/contact-verification 21}
-      (store/parse-notification-counts-response
-       {(keyword (str notification-types/one-to-one-chat))      15
-        (keyword (str notification-types/private-group-chat))   16
-        (keyword (str notification-types/mention))              17
-        (keyword (str notification-types/reply))                18
-        (keyword (str notification-types/contact-request))      19
-        (keyword (str notification-types/admin))                20
-        (keyword (str notification-types/contact-verification)) 21
-        ;; Unsupported type in the response is ignored
-        :999                                                    100}))))
@@ -49,6 +49,7 @@
    status-im.visibility-status-popover.core
    status-im.visibility-status-updates.core
    status-im.waku.core
+    status-im.wallet-connect-legacy.core
    status-im.wallet-connect.core
    status-im.wallet.accounts.core
    status-im.wallet.choose-recipient.core
@@ -18,7 +18,8 @@
            {:db (-> db
                     (assoc-in [:keycard :creating-backup?] backup-type))}
            (when (:multiaccount db)
-              (navigation/navigate-to-cofx :my-profile nil))
+              (navigation/change-tab :browser-stack)) ;; Profile tab - Currently browser tab is used for
+                                                      ;; profile
            (navigation/navigate-to-cofx :seed-phrase nil)))

 (rf/defn recovery-card-pressed
@@ -70,7 +70,7 @@
                                   :status     nil))
      :hide-popover nil})
   (when (:multiaccount db)
-     (navigation/navigate-to-cofx :my-profile nil))
+     (navigation/change-tab :browser-stack)) ;; Profile tab - Currently browser tab is used for profile
   (when-not (:multiaccounts/login db)
     (if (:popover/popover db)
       (navigation/navigate-replace :keycard-pin nil)
@@ -1,7 +1,6 @@
 (ns status-im.multiaccounts.login.core
  (:require
    [clojure.string :as string]
-    [clojure.set :as set]
    [re-frame.core :as re-frame]
    [status-im.async-storage.core :as async-storage]
    [status-im.communities.core :as communities]
@@ -35,6 +34,7 @@
    [status-im.utils.types :as types]
    [status-im.utils.utils :as utils]
    [status-im.utils.wallet-connect :as wallet-connect]
+    [status-im.wallet-connect-legacy.core :as wallet-connect-legacy]
    [status-im.wallet.core :as wallet]
    [status-im.wallet.prices :as prices]
    [status-im2.common.json-rpc.events :as json-rpc]
@@ -44,7 +44,8 @@
    [status-im2.navigation.events :as navigation]
    [status-im2.common.log :as logging]
    [taoensso.timbre :as log]
-    [utils.security.core :as security]))
+    [utils.security.core :as security]
+    [status-im2.contexts.emoji-hash.events :as emoji-hash]))

 (re-frame/reg-fx
 ::initialize-communities-enabled
@@ -172,7 +173,8 @@
     (transactions/get-fetched-transfers))
   (when (ethereum/binance-chain? db)
     (wallet/request-current-block-update))
-   (prices/update-prices)))
+   (prices/update-prices)
+   (wallet-connect-legacy/get-connector-session-from-db)))

 (rf/defn login
  {:events [:multiaccounts.login.ui/password-input-submitted]}
@@ -388,10 +390,7 @@
  (let [{:networks/keys [current-network networks]
         :as            settings}
        (data-store.settings/rpc->settings settings)
-        multiaccount (-> settings
-                         (dissoc :networks/current-network :networks/networks)
-                         (set/rename-keys {:compressedKey :compressed-key
-                                           :emojiHash     :emoji-hash}))
+        multiaccount (dissoc settings :networks/current-network :networks/networks)
        ;;for some reason we save default networks in db, in case when we want to modify default-networks
        ;;for
        ;; existing accounts we have to merge them again into networks
@@ -412,7 +411,7 @@
              (get-node-config)
              (communities/fetch)
              (logging/set-log-level (:log-level multiaccount))
-              (activity-center/notifications-fetch-pending-contact-requests)
+              (activity-center/notifications-fetch-unread-contact-requests)
              (activity-center/notifications-fetch-unread-count))))

 (re-frame/reg-fx
@@ -475,6 +474,7 @@
              (get-group-chat-invitations)
              (multiaccounts/get-profile-picture)
              (multiaccounts/switch-preview-privacy-mode-flag)
+              (emoji-hash/fetch-for-current-public-key)
              (link-preview/request-link-preview-whitelist)
              (visibility-status-updates-store/fetch-visibility-status-updates-rpc)
              (switcher-cards-store/fetch-switcher-cards-rpc))))
@@ -34,7 +34,8 @@
  [cofx]
  ;; we need to disable notifications before starting the logout process
  (rf/merge cofx
-            {:dispatch-later [{:ms       100
+            {:dispatch       [:wallet-connect-legacy/clean-up-sessions]
+             :dispatch-later [{:ms       100
                               :dispatch [::logout-method
                                          {:auth-method keychain/auth-method-none
                                           :logout?     true}]}]}
@@ -481,6 +481,12 @@
  (when (validators/valid-public-key? public-key)
    (.generateAliasAsync ^js (status) public-key callback)))

+(defn public-key->emoji-hash
+  "Generate an emoji hash from the multiaccount public key"
+  [public-key callback]
+  (when (validators/valid-public-key? public-key)
+    (.emojiHash ^js (status) public-key callback)))
+
 (defn identicon
  "Generate a icon based on a string, synchronously"
  [seed]
@@ -1,5 +1,6 @@
 (ns status-im.qr-scanner.core
-  (:require [re-frame.core :as re-frame]
+  (:require [clojure.string :as string]
+            [re-frame.core :as re-frame]
            [status-im.add-new.db :as new-chat.db]
            [status-im.chat.models :as chat]
            [status-im.ethereum.core :as ethereum]
@@ -64,9 +65,8 @@
  (let [own (new-chat.db/own-public-key? db public-key)]
    (cond
      (and public-key own)
-      (rf/merge cofx
-                {:pop-to-root-fx :shell-stack}
-                (navigation/navigate-to-cofx :my-profile nil))
+      {:shell/change-tab-fx :browser-stack ;; Profile tab -  Currently browser tab is used for profile
+       :pop-to-root-fx      :shell-stack}

      (and public-key (not own))
      (rf/merge cofx
@@ -88,7 +88,10 @@
 (rf/defn handle-wallet-connect
  {:events [::handle-wallet-connect-uri]}
  [cofx data]
-  {:dispatch [:wallet-connect/pair data]})
+  (let [wc-version (last (string/split (first (string/split data "?")) "@"))]
+    (if (= wc-version "1")
+      {:dispatch [:wallet-connect-legacy/pair data]}
+      {:dispatch [:wallet-connect/pair data]})))

 (rf/defn handle-local-pairing
  {:events [::handle-local-pairing-uri]}
@@ -99,15 +102,14 @@
  {:events [::match-scanned-value]}
  [cofx {:keys [type] :as data}]
  (case type
-    :public-chat  (handle-public-chat cofx data)
-    :group-chat   (handle-group-chat cofx data)
-    :private-chat (handle-private-chat cofx data)
-    :contact      (handle-view-profile cofx data)
-    :browser      (handle-browse cofx data)
-    :eip681       (handle-eip681 cofx data)
-    ;; Re-enable with https://github.com/status-im/status-mobile/issues/13429
-    ;;:wallet-connect (handle-wallet-connect cofx data)
-    :localpairing (handle-local-pairing cofx data)
+    :public-chat    (handle-public-chat cofx data)
+    :group-chat     (handle-group-chat cofx data)
+    :private-chat   (handle-private-chat cofx data)
+    :contact        (handle-view-profile cofx data)
+    :browser        (handle-browse cofx data)
+    :eip681         (handle-eip681 cofx data)
+    :wallet-connect (handle-wallet-connect cofx data)
+    :localpairing   (handle-local-pairing cofx data)
    (do
      (log/info "Unable to find matcher for scanned value"
                {:type  type
@@ -5,6 +5,7 @@
  {:empty-chats-header (js/require "../resources/images/ui/empty-chats-header.png")
   :welcome            (js/require "../resources/images/ui/welcome.jpg")
   :welcome-dark       (js/require "../resources/images/ui/welcome-dark.jpg")
+   :add-new-contact    (js/require "../resources/images/ui/add-contact.png")
   :chat               (js/require "../resources/images/ui/chat.jpg")
   :chat-dark          (js/require "../resources/images/ui/chat-dark.jpg")
   :wallet             (js/require "../resources/images/ui/wallet.jpg")
@@ -48,9 +49,29 @@
   :hand-wave          (js/require "../resources/images/ui/hand-wave.png")
   :graph              (js/require "../resources/images/ui/graph.png")
   :discover           (js/require "../resources/images/ui/discover.png")
+   :community-cover    (js/require "../resources/images/ui/community-cover.png")
+   :lifestyle          (js/require "../resources/images/ui/lifestyle.png")
+   :music              (js/require "../resources/images/ui/music.png")
+   :podcasts           (js/require "../resources/images/ui/podcasts.png")
   :no-contacts        (js/require "../resources/images/ui/no-contacts.png")
   :no-contacts-dark   (js/require "../resources/images/ui/no-contacts-dark.png")})

+(def mock-images
+  {:photo1               (js/require "../resources/images/mock/photo1.png")
+   :photo2               (js/require "../resources/images/mock/photo2.png")
+   :photo3               (js/require "../resources/images/mock/photo3.png")
+   :community-banner     (js/require "../resources/images/mock/community-banner.png")
+   :community-logo       (js/require "../resources/images/mock/community-logo.png")
+   :gif                  (js/require "../resources/images/mock/gif.png")
+   :sticker              (js/require "../resources/images/mock/sticker.png")
+   :user-picture-female2 (js/require "../resources/images/mock/user_picture_female2.png")
+   :user-picture-male4   (js/require "../resources/images/mock/user_picture_male4.png")
+   :user-picture-male5   (js/require "../resources/images/mock/user_picture_male5.png")
+   :coinbase             (js/require "../resources/images/mock/coinbase.png")
+   :small-opt-card-icon  (js/require "../resources/images/mock/small_opt_card_icon.png")
+   :small-opt-card-main  (js/require "../resources/images/mock/small_opt_card_main.png")
+   :ring                 (js/require "../resources/images/mock/ring.png")})
+
 (defn get-theme-image
  [k]
  (get ui (when (colors/dark?) (keyword (str (name k) "-dark"))) (get ui k)))
@@ -66,6 +87,15 @@
           (get ui k))
         k)))

+(defn get-mock-image
+  [k]
+  (if (contains? @loaded-images k)
+    (get @loaded-images k)
+    (get (swap! loaded-images assoc
+           k
+           (get mock-images k))
+         k)))
+
 (def reactions-old
  {:love        (js/require "../resources/images/reactions/love.png")
   :angry       (js/require "../resources/images/reactions/angry.png")
--- a/Show More
+++ b/Show More