stage: maestro basic experiment

- Removed show-floating-scroll-down-button? reagent atom
- Created event for scroll-to-bottom-fn
- Renamed chat.ui/close-chat

.gitignore

@@ -194,8 +194,3 @@ test/appium/tests/users.py
 
 ## git hooks
 lefthook.yml
-
-## clj-kondo
-/.clj-kondo/taoensso/*
-/.clj-kondo/babashka/*
-/.clj-kondo/rewrite-clj/rewrite-clj/config.edn

Makefile

@@ -305,7 +305,7 @@ endif
 
 # Get all clojure files, including untracked, excluding removed
 define find_all_clojure_files
-$$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort <(git ls-files --deleted)) | grep -e \.clj$$ -e \.cljs$$ -e \.cljc$$ -e \.edn)
+$$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort <(git ls-files --deleted)) | grep -E '((\.clj-kondo\/status-im)|(src).*\.clj[sc]?$$)|((\.clj-kondo\/(status-im|config))|(src).*\.edn$$)|shadow-cljs\.edn')
 endef
 
 lint: export TARGET := clojure
@@ -335,26 +335,44 @@ shadow-server: export TARGET := clojure
 shadow-server:##@ Start shadow-cljs in server mode for watching
 	yarn shadow-cljs server
 
-test-watch: export TARGET := clojure
-test-watch: ##@ Watch tests and re-run no changes to cljs files
-	yarn install
-	nodemon --exec 'yarn shadow-cljs compile mocks && yarn shadow-cljs compile test && node --require ./test-resources/override.js target/test/test.js' -e cljs
-
-test-watch-for-repl: export TARGET := clojure
-test-watch-for-repl: ##@ Watch tests and support REPL connections
-	yarn install
-	rm -f target/test/test.js
-	concurrently --kill-others --prefix-colors 'auto' --names 'build,repl' \
-		'yarn shadow-cljs compile mocks && yarn shadow-cljs watch test --verbose' \
-		'until [ -f ./target/test/test.js ] ; do sleep 1 ; done ; node --require ./test-resources/override.js ./target/test/test.js --repl'
-
-test: export TARGET := clojure
-test: ##@test Run tests once in NodeJS
-	# Here we create the gyp bindings for nodejs
-	yarn install
+_test-clojure: export TARGET := clojure
+_test-clojure: export WATCH ?= false
+_test-clojure:
+ifeq ($(WATCH), true)
+	yarn install && \
+	yarn shadow-cljs compile mocks && \
+	nodemon --exec "yarn shadow-cljs compile test && node --require ./test-resources/override.js $$SHADOW_OUTPUT_TO" -e cljs
+else
+	yarn install && \
 	yarn shadow-cljs compile mocks && \
 	yarn shadow-cljs compile test && \
-	node --require ./test-resources/override.js target/test/test.js
+	node --require ./test-resources/override.js "$$SHADOW_OUTPUT_TO"
+endif
+
+test: export SHADOW_OUTPUT_TO := target/test/test.js
+test: export SHADOW_NS_REGEXP := .*-test$$
+test: ##@test Run all Clojure tests
+test: _test-clojure
+
+test-watch-for-repl: export SHADOW_OUTPUT_TO := target/test/test.js
+test-watch-for-repl: export SHADOW_NS_REGEXP := .*-test$$
+test-watch-for-repl: ##@test Watch all Clojure tests and support REPL connections
+	yarn install
+	rm -f target/test/test.js
+	yarn shadow-cljs compile mocks && \
+	concurrently --kill-others --prefix-colors 'auto' --names 'build,repl' \
+		'yarn shadow-cljs watch test --verbose' \
+		"until [ -f $$SHADOW_OUTPUT_TO ] ; do sleep 1 ; done ; node --require ./test-resources/override.js $$SHADOW_OUTPUT_TO --repl"
+
+test-unit: export SHADOW_OUTPUT_TO := target/unit_test/test.js
+test-unit: export SHADOW_NS_REGEXP := ^(?!status-im\.integration-test).*-test$$
+test-unit: ##@test Run unit tests
+test-unit: _test-clojure
+
+test-integration: export SHADOW_OUTPUT_TO := target/integration_test/test.js
+test-integration: export SHADOW_NS_REGEXP := ^status-im\.integration-test.*$$
+test-integration: ##@test Run integration tests
+test-integration: _test-clojure
 
 android-test: jsbundle
 android-test: export TARGET := android

ci/Jenkinsfile.ios

@@ -5,7 +5,7 @@ library 'status-jenkins-lib@v1.8.4'
 def isPRBuild = utils.isPRBuild()
 
 pipeline {
-  agent { label 'macos && arm64 && nix-2.14 && xcode-14.3' }
+  agent { label 'macos && arm64 && nix-2.14 && xcode-15.1' }
 
   parameters {
     string(

ci/Jenkinsfile.tests

@@ -52,16 +52,24 @@ pipeline {
             """
           }
         }
-        stage('Tests') {
+        stage('Unit Tests') {
           steps {
             sh """#!/bin/bash
               set -eo pipefail
-              make test 2>&1 | tee -a ${LOG_FILE}
+              make test-unit 2>&1 | tee -a ${LOG_FILE}
             """
           }
         }
       }
     }
+    stage('Integration Tests') {
+      steps {
+        sh """#!/bin/bash
+          set -eo pipefail
+          make test-integration 2>&1 | tee -a ${LOG_FILE}
+        """
+      }
+    }
     stage('Component Tests') {
       steps {
         sh """#!/bin/bash

doc/testing.md

@@ -5,7 +5,7 @@
 To run tests:
 
 ```
-   make test
+make test
 ```
 
 
@@ -13,10 +13,10 @@ To run tests:
 Also test watcher can be launched. It will re-run the entire test suite when any file is modified
 
 ```
-   make test-watch
+make test WATCH=true
 ```
 
-Developers can also manually change the shadow-cljs option `:ns-regex` to control which namespaces the test runner should pick. 
+Developers can also manually change the shadow-cljs option `:ns-regex` to control which namespaces the test runner should pick.
 
 ## Testing with REPL
 

ios/Podfile.lock

@@ -793,7 +793,7 @@ CHECKOUT OPTIONS:
     :submodules: true
 
 SPEC CHECKSUMS:
-  boost: 57d2868c099736d80fcd648bf211b4431e51a558
+  boost: 64032b9e9b938fda23325e68a3771f0fabf414dc
   BVLinearGradient: 612a04ff38e8480291f3379ee5b5a2c571f03fe0
   CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54

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

@@ -1,44 +0,0 @@
-package im.status.ethereum.module;
-
-import java.util.concurrent.*;
-
-/** Uses an unbounded queue, but allows timeout of core threads
- * (modified case 2 in
- * https://docs.oracle.com/javase/7/docs/api/java/util/concurrent/ThreadPoolExecutor.html ) */
-public class StatusThreadPoolExecutor {
-    private static final int NUMBER_OF_CORES =
-            Runtime.getRuntime().availableProcessors();
-    private static final int THREADS_TO_CORES_RATIO = 100;
-    private static final int KEEP_ALIVE_TIME = 1;
-    private static final TimeUnit KEEP_ALIVE_TIME_UNIT = TimeUnit.SECONDS;
-
-    private final BlockingQueue<Runnable> mQueue;
-    private final ThreadPoolExecutor mThreadPool;
-
-    private StatusThreadPoolExecutor() {
-        mQueue = new LinkedBlockingQueue<>();
-
-        mThreadPool = new ThreadPoolExecutor(
-            THREADS_TO_CORES_RATIO * NUMBER_OF_CORES,
-            THREADS_TO_CORES_RATIO * NUMBER_OF_CORES,
-            KEEP_ALIVE_TIME,
-            KEEP_ALIVE_TIME_UNIT,
-            mQueue);
-
-        // Allow pool to drain
-        mThreadPool.allowCoreThreadTimeOut(true);
-    }
-
-    /** Pugh singleton */
-    private static class Holder {
-        private static StatusThreadPoolExecutor instance = new StatusThreadPoolExecutor();
-    }
-
-    public static StatusThreadPoolExecutor getInstance() {
-        return Holder.instance;
-    }
-
-    public void execute(final Runnable r) {
-        mThreadPool.execute(r);
-    }
-}

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

@@ -0,0 +1,47 @@
+package im.status.ethereum.module
+
+import java.util.concurrent.*
+
+/**
+ * Uses an unbounded queue but allows timeout of core threads
+ * (modified case 2 in
+ * https://docs.oracle.com/javase/7/docs/api/java/util/concurrent/ThreadPoolExecutor.html )
+ */
+class StatusThreadPoolExecutor private constructor() {
+    private val NUMBER_OF_CORES: Int = Runtime.getRuntime().availableProcessors()
+    private val THREADS_TO_CORES_RATIO: Int = 100
+    private val KEEP_ALIVE_TIME: Int = 1
+    private val KEEP_ALIVE_TIME_UNIT: TimeUnit = TimeUnit.SECONDS
+
+    private val mQueue: BlockingQueue<Runnable> = LinkedBlockingQueue()
+    private val mThreadPool: ThreadPoolExecutor
+
+    init {
+        mThreadPool = ThreadPoolExecutor(
+                THREADS_TO_CORES_RATIO * NUMBER_OF_CORES,
+                THREADS_TO_CORES_RATIO * NUMBER_OF_CORES,
+                KEEP_ALIVE_TIME.toLong(),
+                KEEP_ALIVE_TIME_UNIT,
+                mQueue
+        )
+
+        // Allow pool to drain
+        mThreadPool.allowCoreThreadTimeOut(true)
+    }
+
+    /** Singleton holder */
+    private object Holder {
+        val instance = StatusThreadPoolExecutor()
+    }
+
+    companion object {
+        @JvmStatic
+        fun getInstance(): StatusThreadPoolExecutor {
+            return Holder.instance
+        }
+    }
+
+    fun execute(r: Runnable) {
+        mThreadPool.execute(r)
+    }
+}

modules/react-native-status/android/src/test/java/android/util/Log.java

@@ -1,23 +0,0 @@
-package android.util;
-
-public class Log {
-    public static int d(String tag, String msg) {
-        System.out.println("DEBUG: " + tag + ": " + msg);
-        return 0;
-    }
-
-    public static int i(String tag, String msg) {
-        System.out.println("INFO: " + tag + ": " + msg);
-        return 0;
-    }
-
-    public static int w(String tag, String msg) {
-        System.out.println("WARN: " + tag + ": " + msg);
-        return 0;
-    }
-
-    public static int e(String tag, String msg) {
-        System.out.println("ERROR: " + tag + ": " + msg);
-        return 0;
-    }
-}

modules/react-native-status/android/src/test/java/android/util/Log.kt

@@ -0,0 +1,27 @@
+package android.util
+
+object Log {
+    @JvmStatic
+    fun d(tag: String, msg: String): Int {
+        println("DEBUG: $tag: $msg")
+        return 0
+    }
+
+    @JvmStatic
+    fun i(tag: String, msg: String): Int {
+        println("INFO: $tag: $msg")
+        return 0
+    }
+
+    @JvmStatic
+    fun w(tag: String, msg: String): Int {
+        println("WARN: $tag: $msg")
+        return 0
+    }
+
+    @JvmStatic
+    fun e(tag: String, msg: String): Int {
+        println("ERROR: $tag: $msg")
+        return 0
+    }
+}

nix/deps/nodejs-patched/default.nix

@@ -12,6 +12,7 @@ stdenv.mkDerivation {
     "patchBuildIdPhase"
     "patchKeyChainPhase"
     "patchGlogPhase"
+    "patchBoostPodSpec"
     "installPhase"
   ];
 
@@ -77,6 +78,14 @@ stdenv.mkDerivation {
     --replace 'export CXX="' '#export CXX="'
   '';
 
+  # to fix pod checksum issue : https://github.com/facebook/react-native/issues/42180
+  # TODO remove this patch after upgrading to react-native 0.73.2
+  patchBoostPodSpec = ''
+   substituteInPlace ./node_modules/react-native/third-party-podspecs/boost.podspec \
+      --replace 'https://boostorg.jfrog.io/artifactory/main/release/1.76.0/source/boost_1_76_0.tar.bz2' \
+      'https://sourceforge.net/projects/boost/files/boost/1.76.0/boost_1_76_0.tar.bz2' \
+  '';
+
   # The ELF types are incompatible with the host platform, so let's not even try
   # TODO: Use Android NDK to strip binaries manually
   dontPatchELF = true;

nix/overlay.nix

@@ -69,7 +69,7 @@ in {
   yarn = super.yarn.override { nodejs = super.nodejs-18_x; };
   openjdk = super.openjdk11_headless;
   xcodeWrapper = super.xcodeenv.composeXcodeWrapper {
-    version = "14.0";
+    version = "15.0";
     allowHigher = true;
   };
   go = super.go_1_19;

nix/status-go/mobile/default.nix

@@ -19,7 +19,7 @@
 
   ios = {targets ? [ "ios/arm64" "iossimulator/amd64"]}: callPackage ./build.nix {
     platform = "ios";
-    platformVersion = "8.0";
+    platformVersion = "11.0";
     outputFileName = "Statusgo.xcframework";
     inherit meta source goBuildLdFlags targets;
   };

shadow-cljs.edn

@@ -108,13 +108,13 @@
   ;; produced by the target :mocks below and redefines node require
   ;; function to use the mocks instead of the rn libraries
   :test
-  {:output-to "target/test/test.js"
+  {:output-to #shadow/env "SHADOW_OUTPUT_TO"
    :output-dir "target/test"
    :optimizations :simple
    :target :node-test
    :dev {:devtools {:preloads [status-im.setup.schema-preload]}}
    ;; Uncomment line below to `make test-watch` a specific file
-   ;; :ns-regexp "status-im.subs.messages-test$"
+   :ns-regexp #shadow/env "SHADOW_NS_REGEXP"
    :main legacy.status-im.test-runner/main
    ;; set :ui-driven to true to let shadow-cljs inject node-repl
    :ui-driven true

src/js/worklets/chat/messages.js

@@ -39,14 +39,16 @@ export function interpolateNavigationViewOpacity(props) {
   });
 }
 
-export function messagesListOnScroll(distanceFromListTop, callback) {
+export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callback) {
   return function (event) {
     'worklet';
     const currentY = event.contentOffset.y;
     const layoutHeight = event.layoutMeasurement.height;
     const contentSizeY = event.contentSize.height - layoutHeight;
-    distanceFromListTop.value = contentSizeY - currentY;
-    runOnJS(callback)(currentY, layoutHeight);
+    const newDistance = contentSizeY - currentY;
+    distanceFromListTop.value = newDistance;
+    chatListScrollY.value = currentY;
+    runOnJS(callback)(layoutHeight, newDistance);
   };
 }
 
@@ -63,3 +65,28 @@ export function placeholderZIndex(isCalculationsComplete) {
     return isCalculationsComplete.value ? 0 : 2;
   });
 }
+
+export function scrollDownButtonOpacity(chatListScrollY, isComposerFocused, windowHeight) {
+  return useDerivedValue(function () {
+    'worklet';
+    if (isComposerFocused.value) {
+      return 0;
+    } else {
+      return chatListScrollY.value > windowHeight * 0.75 ? 1 : 0;
+    }
+  });
+}
+
+export function jumpToButtonOpacity(scrollDownButtonOpacity, isComposerFocused) {
+  return useDerivedValue(function () {
+    'worklet';
+    return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 0 : 1);
+  });
+}
+
+export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused) {
+  return useDerivedValue(function () {
+    'worklet';
+    return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 35 : 0);
+  });
+}

src/legacy/status_im/chat/models/loading.cljs

@@ -4,7 +4,7 @@
     [legacy.status-im.data-store.messages :as data-store.messages]
     [re-frame.core :as re-frame]
     [status-im.constants :as constants]
-    [status-im.contexts.chat.messages.list.events :as message-list]
+    [status-im.contexts.chat.messenger.messages.list.events :as message-list]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
 

src/legacy/status_im/chat/models/message.cljs

@@ -6,9 +6,9 @@
     [legacy.status-im.utils.deprecated-types :as types]
     [re-frame.core :as re-frame]
     [react-native.platform :as platform]
-    [status-im.contexts.chat.messages.delete-message.events :as delete-message]
-    [status-im.contexts.chat.messages.list.events :as message-list]
-    [status-im.contexts.chat.messages.list.state :as view.state]
+    [status-im.contexts.chat.messenger.messages.delete-message.events :as delete-message]
+    [status-im.contexts.chat.messenger.messages.list.events :as message-list]
+    [status-im.contexts.chat.messenger.messages.list.state :as view.state]
     [utils.re-frame :as rf]))
 
 (defn- message-loaded?

src/legacy/status_im/chat/models/message_test.cljs

@@ -3,7 +3,7 @@
     [cljs.test :refer-macros [deftest is testing]]
     [legacy.status-im.chat.models.loading :as loading]
     [legacy.status-im.chat.models.message :as message]
-    [status-im.contexts.chat.messages.list.state :as list.state]))
+    [status-im.contexts.chat.messenger.messages.list.state :as list.state]))
 
 (deftest add-received-message-test
   (with-redefs [message/add-message #(identity %1)]

src/legacy/status_im/contact/block.cljs

@@ -5,7 +5,7 @@
     [legacy.status-im.utils.deprecated-types :as types]
     [re-frame.core :as re-frame]
     [status-im.contexts.chat.contacts.events :as contacts-store]
-    [status-im.contexts.chat.messages.list.events :as message-list]
+    [status-im.contexts.chat.messenger.messages.list.events :as message-list]
     [status-im.contexts.shell.activity-center.events :as activity-center]
     [status-im.navigation.events :as navigation]
     [utils.re-frame :as rf]))

src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs

@@ -9,8 +9,8 @@
     [quo.foundations.typography :as typography]
     [react-native.core :as rn]
     [status-im.constants :as constants]
-    [status-im.contexts.chat.messages.delete-message-for-me.events]
-    [status-im.contexts.chat.messages.delete-message.events]
+    [status-im.contexts.chat.messenger.messages.delete-message-for-me.events]
+    [status-im.contexts.chat.messenger.messages.delete-message.events]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf])
   (:require-macros [legacy.status-im.utils.views :refer [defview letsubs]]))

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

@@ -8,7 +8,7 @@
     [legacy.status-im.ui.components.react :as react]
     [legacy.status-im.ui.screens.link-previews-settings.styles :as styles]
     [re-frame.core :as re-frame]
-    [status-im.contexts.chat.messages.link-preview.events]
+    [status-im.contexts.chat.messenger.messages.link-preview.events]
     [utils.i18n :as i18n]))
 
 (defn prepare-urls-items-data

src/quo/components/community/community_stat/view.cljs

@@ -8,7 +8,7 @@
             utils.money))
 
 (defn view-internal
-  [{:keys [value icon theme style accessibility-label]}]
+  [{:keys [value icon theme style accessibility-label text-size]}]
   [rn/view
    {:style               (merge style/container style)
     :accessibility-label accessibility-label}
@@ -19,7 +19,7 @@
      :resize-mode     :center
      :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
    [quo.text/text
-    {:size   :paragraph-1
+    {:size   (or text-size :paragraph-1)
      :weight :regular
      :style  (style/text theme)} (utils.money/format-amount value)]])
 

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

@@ -61,7 +61,7 @@
    :container-style])
 
 (defn- base-input
-  [{:keys [on-change-text on-char-limit-reach weight]}]
+  [{:keys [on-change-text on-char-limit-reach weight default-value]}]
   (let [status              (reagent/atom :default)
         internal-on-focus   #(reset! status :focus)
         internal-on-blur    #(reset! status :default)
@@ -72,7 +72,7 @@
                                (if (> height min-height)
                                  (reset! multiple-lines? true)
                                  (reset! multiple-lines? false)))
-        char-count          (reagent/atom 0)
+        char-count          (reagent/atom (count default-value))
         update-char-limit!  (fn [new-text char-limit]
                               (when on-change-text (on-change-text new-text))
                               (let [amount-chars (count new-text)]

src/quo/components/links/internal_link_card/channel/style.cljs

@@ -0,0 +1,72 @@
+(ns quo.components.links.internal-link-card.channel.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn loading-circle
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :margin-right     4
+   :width            16
+   :height           16
+   :border-radius    16})
+
+(defn loading-first-line-bar
+  [theme margin-right?]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            72
+   :margin-right     (when margin-right? 4)
+   :height           16
+   :border-radius    6})
+
+(defn loading-second-line-bar
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            112
+   :height           8
+   :border-radius    6
+   :margin-bottom    17})
+
+(defn loading-thumbnail-box
+  [theme size]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :height           (if (= :message size) 139 160)
+   :border-radius    12})
+
+(defn thumbnail
+  [size]
+  {:width         "100%"
+   :height        (if (= :message size) 139 160)
+   :margin-top    8
+   :border-radius 12})
+
+(defn container
+  [size theme]
+  {:border-width       1
+   :border-color       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :background-color   (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+   :border-radius      16
+   :padding-horizontal 12
+   :padding-top        10
+   :padding-bottom     12
+   :height             (if (= :message size) 215 236)
+   :width              (if (= :message size) 295 335)})
+
+(def header-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def title
+  {:margin-bottom 2})
+
+(def logo
+  {:margin-right  6
+   :width         16
+   :height        16
+   :border-radius 8})
+
+(defn channel-chevron-props
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
+
+(def row-spacing
+  {:flex-direction :row
+   :margin-bottom  13})

src/quo/components/links/internal_link_card/channel/view.cljs

@@ -0,0 +1,92 @@
+(ns quo.components.links.internal-link-card.channel.view
+  (:require
+    [quo.components.icon :as icon]
+    [quo.components.links.internal-link-card.channel.style :as style]
+    [quo.components.links.internal-link-card.schema :as component-schema]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(defn- description-comp
+  [description]
+  [rn/view {:style {:margin-bottom 4}}
+   [text/text
+    {:size                :paragraph-2
+     :number-of-lines     3
+     :accessibility-label :description}
+    description]])
+
+(defn- title-comp
+  [title channel-name theme]
+  [rn/view
+   {:style {:flex-direction :row
+            :align-items    :center}}
+   [text/text
+    {:size                :paragraph-1
+     :number-of-lines     1
+     :weight              :semi-bold
+     :style               style/title
+     :accessibility-label :title}
+    title]
+   [icon/icon :i/chevron-right (style/channel-chevron-props theme)]
+   [text/text
+    {:size                :paragraph-1
+     :number-of-lines     1
+     :weight              :semi-bold
+     :style               style/title
+     :accessibility-label :title}
+    channel-name]])
+
+(defn- banner-comp
+  [thumbnail size]
+  [rn/image
+   {:style               (style/thumbnail size)
+    :source              thumbnail
+    :accessibility-label :banner}])
+
+(defn- logo-comp
+  [logo]
+  [rn/image
+   {:accessibility-label :logo
+    :source              logo
+    :style               (assoc style/logo :margin-bottom 2)}])
+
+(defn- loading-view
+  [theme size]
+  [rn/view
+   {:accessibility-label :loading-channel-link-view
+    :style               {:height 215}}
+   [rn/view {:style {:flex-direction :row}}
+    [rn/view {:style style/row-spacing}
+     [rn/view {:style (style/loading-circle theme)}]
+     [rn/view {:style (style/loading-first-line-bar theme true)}]]
+    [rn/view {:style style/row-spacing}
+     [rn/view {:style (style/loading-circle theme)}]
+     [rn/view {:style (style/loading-first-line-bar theme false)}]]]
+   [rn/view {:style (style/loading-second-line-bar theme)}]
+   [rn/view {:style (style/loading-thumbnail-box theme size)}]])
+
+(defn view-internal
+  [{:keys [title description loading? icon banner
+           theme on-press channel-name size]
+    :or   {channel-name "empty name"}}]
+  [rn/pressable
+   {:style               (style/container size theme)
+    :accessibility-label :internal-link-card
+    :on-press            on-press}
+   (if loading?
+     [loading-view theme size]
+     [:<>
+      [rn/view {:style style/header-container}
+       (when icon
+         [logo-comp icon])
+       [title-comp title channel-name theme]]
+      (when description
+        [description-comp description])
+      (when banner
+        [banner-comp banner size])])])
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/links/internal_link_card/community/style.cljs

@@ -0,0 +1,87 @@
+(ns quo.components.links.internal-link-card.community.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn loading-circle
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :margin-right     4
+   :width            16
+   :height           16
+   :border-radius    16})
+
+(defn loading-stat
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :margin-right     4
+   :width            32
+   :height           8
+   :border-radius    16})
+
+(def loading-stat-container
+  {:flex-direction :row
+   :align-items    :center
+   :margin-right   12
+   :margin-bottom  -6})
+
+(defn loading-first-line-bar
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            145
+   :height           16
+   :border-radius    6})
+
+(defn loading-second-line-bar
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            112
+   :height           8
+   :border-radius    6
+   :margin-bottom    17})
+
+(defn loading-thumbnail-box
+  [theme size]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :height           (if (= :message size) 139 160)
+   :border-radius    12})
+
+(defn thumbnail
+  [size]
+  {:width         "100%"
+   :height        (if (= :message size) 139 160)
+   :margin-top    6
+   :border-radius 12})
+
+(defn container
+  [size theme]
+  {:border-width       1
+   :border-color       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :background-color   (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+   :border-radius      16
+   :padding-horizontal 12
+   :padding-top        10
+   :padding-bottom     12
+   :height             (if (= :message size) 245 266)
+   :width              (if (= :message size) 295 335)})
+
+(def header-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def title
+  {:margin-bottom 2})
+
+(def logo
+  {:width         16
+   :height        16
+   :border-radius 8
+   :margin-right  4
+   :margin-bottom 2})
+
+(def row-spacing
+  {:flex-direction :row
+   :margin-bottom  12
+   :margin-top     4})
+
+(def stat-container
+  {:flex-direction :row
+   :margin-top     12})

src/quo/components/links/internal_link_card/community/view.cljs

@@ -0,0 +1,96 @@
+(ns quo.components.links.internal-link-card.community.view
+  (:require
+    [quo.components.community.community-stat.view :as community-stat]
+    [quo.components.links.internal-link-card.community.style :as style]
+    [quo.components.links.internal-link-card.schema :as component-schema]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(defn- description-comp
+  [description members-count active-members-count]
+  [rn/view
+   [text/text
+    {:size                :paragraph-2
+     :number-of-lines     3
+     :accessibility-label :description}
+    description]
+   [rn/view {:style style/stat-container}
+    [community-stat/view
+     {:value               members-count
+      :icon                :i/members
+      :accessibility-label :members-count
+      :style               {:margin-right 12}
+      :text-size           :paragraph-2}]
+    (when active-members-count
+      [community-stat/view
+       {:value               active-members-count
+        :icon                :i/active-members
+        :accessibility-label :active-members-count
+        :text-size           :paragraph-2}])]])
+
+(defn- title-comp
+  [title]
+  [text/text
+   {:size                :paragraph-1
+    :number-of-lines     1
+    :weight              :semi-bold
+    :style               style/title
+    :accessibility-label :title}
+   title])
+
+(defn- thumbnail-comp
+  [thumbnail size]
+  [rn/image
+   {:style               (style/thumbnail size)
+    :source              thumbnail
+    :accessibility-label :thumbnail}])
+
+(defn- logo-comp
+  [logo]
+  [rn/image
+   {:accessibility-label :logo
+    :source              logo
+    :style               style/logo}])
+
+(defn- stat-loading
+  [theme]
+  [rn/view {:style style/loading-stat-container}
+   [rn/view {:style (style/loading-circle theme)}]
+   [rn/view {:style (style/loading-stat theme)}]])
+
+(defn- loading-view
+  [theme size]
+  [rn/view {:accessibility-label :loading-community-link-view}
+   [rn/view {:style style/row-spacing}
+    [rn/view {:style (style/loading-circle theme)}]
+    [rn/view {:style (style/loading-first-line-bar theme)}]]
+   [rn/view {:style (style/loading-second-line-bar theme)}]
+   [rn/view {:style style/row-spacing}
+    [stat-loading theme]
+    [stat-loading theme]]
+   [rn/view {:style (style/loading-thumbnail-box theme size)}]])
+
+(defn- view-internal
+  [{:keys [title description loading? icon banner members-count active-members-count
+           theme on-press size]}]
+  [rn/pressable
+   {:style               (style/container size theme)
+    :accessibility-label :internal-link-card
+    :on-press            on-press}
+   (if loading?
+     [loading-view theme size]
+     [:<>
+      [rn/view {:style style/header-container}
+       (when icon
+         [logo-comp icon])
+       [title-comp title]]
+      (when description
+        [description-comp description members-count active-members-count])
+      (when banner
+        [thumbnail-comp banner size])])])
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/links/internal_link_card/component_spec.cljs

@@ -0,0 +1,81 @@
+(ns quo.components.links.internal-link-card.component-spec
+  (:require
+    [quo.components.links.internal-link-card.view :as view]
+    [test-helpers.component :as h]))
+
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
+(def user-props
+  {:title               "Some title"
+   :subtitle            "Some description"
+   :loading?            false
+   :icon                "data:image/png,logo-x"
+   :type                :user
+   :customization-color "#ff0000"
+   :emoji-hash          "🌟🚀🐠🌈🏰🔮🦉🐼🍉🎨🚲🌙🍔🌵"})
+
+(h/describe "Internal link card - User"
+  (h/test "renders with most common props"
+    (render [view/view user-props])
+    (h/is-truthy (h/query-by-text (:title user-props)))
+    (h/is-truthy (h/query-by-text (:subtitle user-props))))
+
+  (h/test "does not render logo if prop is not present"
+    (render [view/view (dissoc user-props :icon)])
+    (h/is-null (h/query-by-label-text :logo))))
+
+(def community-props
+  {:title                "Some title"
+   :description          "Some description"
+   :icon                 "data:image/png,logo-x"
+   :banner               "data:image/png,whatever"
+   :members-count        "20"
+   :loading?             false
+   :active-members-count "15"
+   :type                 :community})
+
+(h/describe "Internal link card - Community"
+  (h/test "renders with most common props"
+    (render [view/view community-props])
+    (h/is-truthy (h/query-by-text (:title community-props)))
+    (h/is-truthy (h/query-by-text (:description community-props)))
+    (h/is-truthy (h/query-by-text (:members-count community-props)))
+    (h/is-truthy (h/query-by-text (:active-members-count community-props)))
+    (h/is-truthy (h/query-by-label-text :logo))
+    (h/is-truthy (h/query-by-label-text :thumbnail)))
+
+  (h/test "does not render thumbnail if prop is not present"
+    (render [view/view (dissoc community-props :banner)])
+    (h/is-null (h/query-by-label-text :thumbnail)))
+
+  (h/test "does not render logo if prop is not present"
+    (render [view/view (dissoc community-props :icon)])
+    (h/is-null (h/query-by-label-text :logo))))
+
+(def channel-props
+  {:title        "Doodles"
+   :description  "Coloring the world with joy • ᴗ •"
+   :icon         "data:image/png,logo-x"
+   :banner       "data:image/png,whatever"
+   :loading?     false
+   :channel-name "#general"
+   :type         :channel})
+
+(h/describe "Internal link card - Channel"
+  (h/test "renders with most common props"
+    (render [view/view channel-props])
+    (h/is-truthy (h/query-by-text (:title channel-props)))
+    (h/is-truthy (h/query-by-text (:description channel-props)))
+    (h/is-truthy (h/query-by-text (:channel-name channel-props)))
+    (h/is-truthy (h/query-by-label-text :logo))
+    (h/is-truthy (h/query-by-label-text :banner)))
+
+  (h/test "does not render banner if prop is not present"
+    (render [view/view (dissoc channel-props :banner)])
+    (h/is-null (h/query-by-label-text :banner)))
+
+  (h/test "does not render logo if prop is not present"
+    (render [view/view (dissoc channel-props :icon)])
+    (h/is-null (h/query-by-label-text :logo))))

src/quo/components/links/internal_link_card/schema.cljs

@@ -0,0 +1,23 @@
+(ns quo.components.links.internal-link-card.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:title {:optional true} [:maybe :string]]
+      [:description {:optional true} [:maybe :string]]
+      [:channel-name {:optional true} [:maybe :string]]
+      [:loading? {:optional true} [:maybe :boolean]]
+      [:subtitle {:optional true} [:maybe :string]]
+      [:icon {:optional true} [:maybe [:or :string :int]]]
+      [:banner {:optional true} [:maybe [:or :string :int]]]
+      [:type {:optional true} [:maybe :keyword]]
+      [:on-press {:optional true} [:maybe fn?]]
+      [:members-count {:optional true} [:maybe [:or :int :string]]]
+      [:active-members-count {:optional true} [:maybe [:or :int :string]]]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:emoji-hash {:optional true} [:maybe :string]]
+      [:size {:optional true} [:maybe :keyword]]
+      [:theme :schema.common/theme]]]]
+   :any])

src/quo/components/links/internal_link_card/user/style.cljs

@@ -0,0 +1,66 @@
+(ns quo.components.links.internal-link-card.user.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn loading-circle
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :margin-right     4
+   :width            16
+   :height           16
+   :border-radius    16})
+
+(defn loading-first-line-bar
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            145
+   :height           16
+   :border-radius    6})
+
+(defn loading-second-line-bar
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            112
+   :height           8
+   :border-radius    6
+   :margin-bottom    17})
+
+(defn last-bar-line-bar
+  [theme]
+  {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+   :width            271
+   :height           16
+   :border-radius    6})
+
+(defn gradient-start-color
+  [customization-color theme]
+  (colors/theme-colors (colors/resolve-color customization-color theme 10)
+                       (colors/resolve-color customization-color theme 20)
+                       theme))
+
+(defn container
+  [loading? theme size]
+  {:border-width       1
+   :border-color       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :background-color   (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+   :border-radius      16
+   :padding-horizontal 12
+   :padding-top        10
+   :padding-bottom     12
+   :height             (if loading? 92 110)
+   :width              (if (= :message size) 295 335)})
+
+(def header-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def title
+  {:margin-bottom 2})
+
+(def logo
+  {:margin-right  6
+   :width         16
+   :height        16
+   :border-radius 8
+   :margin-bottom 2})
+
+(def row-spacing {:flex-direction :row :margin-bottom 12})

src/quo/components/links/internal_link_card/user/view.cljs

@@ -0,0 +1,83 @@
+(ns quo.components.links.internal-link-card.user.view
+  (:require
+    [quo.components.links.internal-link-card.schema :as component-schema]
+    [quo.components.links.internal-link-card.user.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.linear-gradient :as linear-gradient]
+    [schema.core :as schema]))
+
+(defn- subtitle-comp
+  [subtitle emoji-hash]
+  [rn/view
+   [text/text
+    {:size                :paragraph-2
+     :number-of-lines     2
+     :accessibility-label :subtitle
+     :style               {:margin-bottom 12}}
+    subtitle]
+   [rn/view {:style {:flex-direction :row}}
+    [text/text
+     {:size                :paragraph-2
+      :number-of-lines     1
+      :weight              :regular
+      :accessibility-label :emoji-hash}
+     emoji-hash]]])
+
+(defn- title-comp
+  [title]
+  [text/text
+   {:size                :paragraph-1
+    :number-of-lines     1
+    :weight              :semi-bold
+    :style               style/title
+    :accessibility-label :title}
+   title])
+
+(defn- logo-comp
+  [logo]
+  [rn/image
+   {:accessibility-label :logo
+    :source              logo
+    :style               style/logo}])
+
+(defn- loading-view
+  [theme]
+  [rn/view {:accessibility-label :loading-user-link-view}
+   [rn/view {:style style/row-spacing}
+    [rn/view {:style (style/loading-circle theme)}]
+    [rn/view {:style (style/loading-first-line-bar theme)}]]
+   [rn/view {:style (style/loading-second-line-bar theme)}]
+   [rn/view {:style (style/last-bar-line-bar theme)}]])
+
+(defn- linear-gradient-props
+  [theme customization-color]
+  [(style/gradient-start-color customization-color theme) :transparent])
+
+(defn view-internal
+  [{:keys [title loading? icon
+           theme on-press subtitle emoji-hash customization-color size]}]
+  (if loading?
+    [rn/pressable
+     {:accessibility-label :internal-link-card
+      :on-press            on-press
+      :style               (style/container loading? theme size)}
+     [loading-view theme]]
+    [linear-gradient/linear-gradient
+     (assoc {:style (style/container loading? theme size)}
+            :colors
+            (linear-gradient-props theme customization-color))
+     [rn/pressable
+      {:accessibility-label :internal-link-card
+       :on-press            on-press}
+      [rn/view {:style style/header-container}
+       (when icon
+         [logo-comp icon])
+       [title-comp title]]
+      (when subtitle
+        [subtitle-comp subtitle emoji-hash])]]))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/components/links/internal_link_card/view.cljs

@@ -0,0 +1,11 @@
+(ns quo.components.links.internal-link-card.view
+  (:require [quo.components.links.internal-link-card.channel.view :as channel.view]
+            [quo.components.links.internal-link-card.community.view :as community.view]
+            [quo.components.links.internal-link-card.user.view :as user.view]))
+
+(defn view
+  [{card-type :type :as props}]
+  (case card-type
+    :community [community.view/view props]
+    :channel   [channel.view/view props]
+    :user      [user.view/view props]))

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -26,6 +26,7 @@
                                    (on-press label)))
           :on-press-in         #(reset! pressed? true)
           :on-press-out        #(reset! pressed? false)
+          :hit-slop            {:top 8 :bottom 8 :left 25 :right 25}
           :style               (style/container background-color)}
          (case type
            :key             [icons/icon

src/quo/components/overlay/view.cljs

@@ -5,7 +5,7 @@
     [react-native.core :as rn]))
 
 (defn view
-  [{:keys [type]} & children]
+  [{:keys [type container-style]} & children]
   [rn/view {:style (style/overlay-background type)}
    (if (= type :shell)
      [blur/view
@@ -14,7 +14,7 @@
        :blur-type     :transparent
        :overlay-color :transparent
        :style         style/container}
-      [rn/view {:style style/blur-container}
+      [rn/view {:style (merge style/blur-container container-style)}
        children]]
-     [rn/view {:style style/container}
+     [rn/view {:style (merge style/container container-style)}
       children])])

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

@@ -7,8 +7,8 @@
     [react-native.core :as rn]))
 
 (defn- category-internal
-  [{:keys [label data] :as props}]
-  [rn/view {:style (style/container label)}
+  [{:keys [label data container-style] :as props}]
+  [rn/view {:style (merge (style/container label) container-style)}
    (when label
      [text/text
       {:weight :medium

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

@@ -19,10 +19,12 @@
 (defn sub-container
   [align-action]
   {:flex-direction :row
+   :padding-right  0.5
    :align-items    (or align-action :center)})
 
-(def left-container
-  {:margin-horizontal 12
+(defn left-container
+  [image?]
+  {:margin-horizontal (if image? 12 0)
    :flex              1
    :height            "100%"
    :justify-content   :flex-start})
@@ -57,6 +59,7 @@
   {:width            15
    :height           15
    :border-radius    12
+   :margin-right     4
    :background-color background-color})
 
 (def status-tag-container

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

@@ -109,7 +109,7 @@
     :accessibility-label accessibility-label}
    [rn/view {:style (style/left-sub-container props)}
     [image-component props]
-    [rn/view {:style style/left-container}
+    [rn/view {:style (style/left-container (:image props))}
      [text/text
       {:weight :medium
        :style  {:color (when blur? colors/white)}} title]

src/quo/components/utilities/token/view.cljs

@@ -37,13 +37,14 @@
 (def ^:private b64-png-image-prefix "data:image/png;base64,")
 
 (defn temp-empty-symbol
-  [token size]
+  [token size style]
   [rn/view
-   {:style (token-style {:justify-content :center
-                         :align-items     :center
-                         :border-radius   20
-                         :border-width    1
-                         :border-color    :grey}
+   {:style (token-style (merge {:justify-content :center
+                                :align-items     :center
+                                :border-radius   20
+                                :border-width    1
+                                :border-color    :grey}
+                               style)
                         size)}
    [quo/text {:style {:color :grey}}
     (some-> token
@@ -73,6 +74,6 @@
       [rn/image
        {:style  (token-style style size)
         :source source}]
-      [temp-empty-symbol token size])))
+      [temp-empty-symbol token size style])))
 
 (def view (schema/instrument #'view-internal ?schema))

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

@@ -11,8 +11,9 @@
     colors/white))
 
 (defn card
-  [{:keys [customization-color type theme pressed?]}]
-  {:width              162
+  [{:keys [customization-color type theme pressed? metrics?]}]
+  {:width              161
+   :height             (if metrics? 88 68)
    :background-color   (when (not= :watch-only type)
                          (colors/theme-colors
                           (colors/resolve-color customization-color

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

@@ -21,7 +21,8 @@
       :style               (style/card {:customization-color customization-color
                                         :type                type
                                         :theme               theme
-                                        :pressed?            false})}
+                                        :pressed?            false
+                                        :metrics?            metrics?})}
      [rn/view {:style style/loader-container}
       [rn/view
        {:style (assoc (style/loader-view {:width       16
@@ -113,7 +114,8 @@
             :style        (style/card {:customization-color customization-color
                                        :type                type
                                        :theme               theme
-                                       :pressed?            @pressed?})
+                                       :pressed?            @pressed?
+                                       :metrics?            metrics?})
             :on-press     on-press}
            (when (and customization-color (and (not watch-only?) (not missing-keypair?)))
              [customization-colors/overlay

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

@@ -29,6 +29,7 @@
       [:checked? {:optional true} [:maybe :boolean]]
       [:disabled? {:optional true} [:maybe :boolean]]
       [:on-change {:optional true} [:maybe fn?]]
+      [:container-style {:optional true} [:maybe :map]]
       [:theme :schema.common/theme]]]]
    :any])
 
@@ -58,11 +59,11 @@
 
 (defn- view-internal
   [{:keys
-    [checked? disabled? on-change token-details keycard? theme]
+    [checked? disabled? on-change token-details keycard? theme container-style]
     {:keys
      [name address emoji customization-color]} :account}]
   [rn/view
-   {:style               (style/container theme)
+   {:style               (merge (style/container theme) container-style)
     :accessibility-label :wallet-account-permissions}
    [rn/view {:style style/row1}
     [account-avatar/view

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

@@ -2,6 +2,7 @@
   (:require
     [quo.components.avatars.account-avatar.view :as account-avatar]
     [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.markdown.text :as text]
     [quo.components.wallet.summary-info.style :as style]
     [quo.foundations.colors :as colors]
@@ -26,24 +27,29 @@
 
 (defn networks
   [values theme]
-  (let [{:keys [ethereum optimism arbitrum]} values]
+  (let [{:keys [ethereum optimism arbitrum]} values
+        show-optimism?                       (pos? optimism)
+        show-arbitrum?                       (pos? arbitrum)]
     [rn/view
      {:style               style/networks-container
       :accessibility-label :networks}
-     [network-amount
-      {:network  :ethereum
-       :amount   (str ethereum " ETH")
-       :divider? true
-       :theme    theme}]
-     [network-amount
-      {:network  :optimism
-       :amount   (str optimism " ETH")
-       :divider? true
-       :theme    theme}]
-     [network-amount
-      {:network :arbitrum
-       :amount  (str arbitrum " ETH")
-       :theme   theme}]]))
+     (when (pos? ethereum)
+       [network-amount
+        {:network  :ethereum
+         :amount   (str ethereum " ETH")
+         :divider? (or show-arbitrum? show-optimism?)
+         :theme    theme}])
+     (when show-optimism?
+       [network-amount
+        {:network  :optimism
+         :amount   (str optimism " OPT")
+         :divider? show-arbitrum?
+         :theme    theme}])
+     (when show-arbitrum?
+       [network-amount
+        {:network :arbitrum
+         :amount  (str arbitrum " ARB")
+         :theme   theme}])]))
 
 (defn- view-internal
   [{:keys [theme type account-props networks? values]}]
@@ -51,8 +57,13 @@
    {:style (style/container networks? theme)}
    [rn/view
     {:style style/info-container}
-    (if (= type :status-account)
-      [account-avatar/view account-props]
+    (case type
+      :status-account [account-avatar/view account-props]
+      :saved-account  [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)]
+      :account        [wallet-user-avatar/wallet-user-avatar
+                       (assoc account-props
+                              :size     :size-32
+                              :neutral? true)]
       [user-avatar/user-avatar account-props])
     [rn/view {:style {:margin-left 8}}
      (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)])

src/quo/core.cljs

@@ -69,6 +69,7 @@
     quo.components.inputs.title-input.view
     quo.components.ios.drawer-bar.view
     quo.components.keycard.view
+    quo.components.links.internal-link-card.view
     quo.components.links.link-preview.view
     quo.components.links.url-preview-list.view
     quo.components.links.url-preview.view
@@ -288,6 +289,7 @@
 (def numbered-keyboard quo.components.numbered-keyboard.numbered-keyboard.view/view)
 
 ;;;; Links
+(def internal-link-card quo.components.links.internal-link-card.view/view)
 (def link-preview quo.components.links.link-preview.view/view)
 (def url-preview quo.components.links.url-preview.view/view)
 (def url-preview-list quo.components.links.url-preview-list.view/view)

src/quo/core_spec.cljs

@@ -39,6 +39,7 @@
     quo.components.inputs.recovery-phrase.component-spec
     quo.components.inputs.title-input.component-spec
     quo.components.keycard.component-spec
+    quo.components.links.internal-link-card.component-spec
     quo.components.links.link-preview.component-spec
     quo.components.links.url-preview-list.component-spec
     quo.components.links.url-preview.component-spec

src/schema/core.clj

@@ -5,11 +5,17 @@
   in non-debug environments.
 
   `value` is first transformed via `malli.core/schema` to make sure we fail fast
-  and only register valid schemas."
+  and only register valid schemas.
+
+  Pass raw schema `value` instead of schema instance when it's `:function` schema
+  https://github.com/status-im/status-mobile/pull/18364#issuecomment-1875543794"
   [sym value]
   `(if ^boolean js/goog.DEBUG
      (try
-       (malli.core/=> ~sym (malli.core/schema ~value))
+       (let [schema-instance# (malli.core/schema ~value)]
+         (if (and (seq ~value) (= :function (first ~value)))
+           (malli.core/=> ~sym ~value)
+           (malli.core/=> ~sym schema-instance#)))
        (catch js/Error e#
          (taoensso.timbre/error "Failed to instrument function"
                                 {:symbol ~sym :error e#})

src/status_im/common/biometric/events.cljs

@@ -24,11 +24,17 @@
 
 (defn get-label-by-type
   [biometric-type]
-  (case biometric-type
+  (condp = biometric-type
     :fingerprint (i18n/label :t/biometric-fingerprint)
     :FaceID      (i18n/label :t/biometric-faceid)
     (i18n/label :t/biometric-touchid)))
 
+(defn get-icon-by-type
+  [biometric-type]
+  (condp = biometric-type
+    :FaceID :i/face-id
+    :i/touch-id))
+
 (re-frame/reg-fx
  :biometric/get-supported-biometric-type
  (fn []
@@ -126,3 +132,26 @@
   {:events [:biometric/authenticate]}
   [_ opts]
   {:biometric/authenticate opts})
+
+(rf/reg-event-fx
+ :biometric/on-enable-success
+ (fn [{:keys [db]} [password]]
+   (let [key-uid (get-in db [:profile/profile :key-uid])]
+     {:db       (assoc db :auth-method constants/auth-method-biometric)
+      :dispatch [:keychain/save-password-and-auth-method
+                 {:key-uid         key-uid
+                  :masked-password password}]})))
+
+(rf/reg-event-fx
+ :biometric/enable
+ (fn [_ [password]]
+   {:dispatch [:biometric/authenticate
+               {:on-success #(rf/dispatch [:biometric/on-enable-success password])
+                :on-fail    #(rf/dispatch [:biometric/show-message %])}]}))
+
+(rf/reg-event-fx
+ :biometric/disable
+ (fn [{:keys [db]}]
+   (let [key-uid (get-in db [:profile/profile :key-uid])]
+     {:db                           (assoc db :auth-method constants/auth-method-none)
+      :keychain/clear-user-password key-uid})))

src/status_im/common/home/actions/view.cljs

@@ -95,7 +95,8 @@
                   :button-text         (i18n/label :t/confirm)
                   :close-button-text   (i18n/label :t/cancel)
                   :on-press            (fn []
-                                         (hide-sheet-and-dispatch [:chat.ui/close-chat chat-id])
+                                         (hide-sheet-and-dispatch [:chat.ui/close-and-remove-chat
+                                                                   chat-id])
                                          (when inside-chat?
                                            (rf/dispatch [:navigate-back])))}])}]))
 

src/status_im/common/keychain/events.cljs

@@ -131,6 +131,7 @@
  :keychain/clear-user-password
  (fn [key-uid]
    (keychain/reset-credentials (password-migration-key-name key-uid))
+   (keychain/reset-credentials (str key-uid "-auth"))
    (keychain/reset-credentials key-uid)))
 
 (re-frame/reg-fx
@@ -142,6 +143,11 @@
        (.then #(when on-success (on-success)))
        (.catch #(when on-error (on-error %))))))
 
+(re-frame/reg-event-fx
+ :keychain/save-password-and-auth-method
+ (fn [_ [opts]]
+   {:keychain/save-password-and-auth-method opts}))
+
 ;; NOTE: migrating the plaintext password in the keychain
 ;; with the hashed one. Added due to the sync onboarding
 ;; flow, where the password arrives already hashed.

src/status_im/common/signals/events.cljs

@@ -5,8 +5,8 @@
     [legacy.status-im.mailserver.core :as mailserver]
     [legacy.status-im.visibility-status-updates.core :as visibility-status-updates]
     [status-im.common.pairing.events :as pairing]
-    [status-im.contexts.chat.messages.link-preview.events :as link-preview]
-    [status-im.contexts.chat.messages.transport.events :as messages.transport]
+    [status-im.contexts.chat.messenger.messages.link-preview.events :as link-preview]
+    [status-im.contexts.chat.messenger.messages.transport.events :as messages.transport]
     [status-im.contexts.communities.discover.events]
     [status-im.contexts.profile.login.events :as profile.login]
     [status-im.contexts.profile.push-notifications.local.events :as local-notifications]

src/status_im/common/standard_authentication/events.cljs

@@ -6,3 +6,8 @@
  (fn [{:keys [db]} [callback]]
    (let [key-uid (get-in db [:profile/profile :key-uid])]
      {:fx [[:keychain/get-user-password [key-uid callback]]]})))
+
+(rf/reg-event-fx
+ :standard-auth/reset-login-password
+ (fn [{:keys [db]}]
+   {:db (update db :profile/login dissoc :password :error)}))

src/status_im/common/standard_authentication/standard_auth/authorize.cljs

@@ -1,6 +1,5 @@
 (ns status-im.common.standard-authentication.standard-auth.authorize
   (:require
-    [native-module.core :as native-module]
     [react-native.touch-id :as biometric]
     [status-im.common.standard-authentication.enter-password.view :as enter-password]
     [taoensso.timbre :as log]
@@ -18,11 +17,11 @@
            auth-button-label theme blur? auth-button-icon-left]}]
   (let [handle-auth-success (fn [biometric?]
                               (fn [entered-password]
-                                (let [sha3-pwd (if biometric?
-                                                 (str (security/safe-unmask-data entered-password))
-                                                 (native-module/sha3 (str (security/safe-unmask-data
-                                                                           entered-password))))]
-                                  (on-auth-success sha3-pwd))))
+                                (let [sha3-masked-password (if biometric?
+                                                             entered-password
+                                                             (security/hash-masked-password
+                                                              entered-password))]
+                                  (on-auth-success sha3-masked-password))))
         password-login      (fn [{:keys [on-press-biometrics]}]
                               (rf/dispatch [:show-bottom-sheet
                                             {:on-close on-close
@@ -53,10 +52,12 @@
                                               (password-login {:on-press-biometrics
                                                                #(on-press-biometrics
                                                                  on-press-biometrics)}))}))]
-    (biometric/get-supported-type
-     (fn [biometric-type]
-       (if (and biometric-auth? biometric-type)
-         (biometrics-login biometrics-login)
-         (do
-           (reset-password)
-           (password-login {})))))))
+    (if biometric-auth?
+      (biometric/get-supported-type
+       (fn [biometric-type]
+         (if biometric-type
+           (biometrics-login biometrics-login)
+           (do
+             (reset-password)
+             (password-login {})))))
+      (password-login {}))))

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

@@ -5,6 +5,7 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im.common.standard-authentication.standard-auth.authorize :as authorize]
+    [status-im.constants :as constants]
     [utils.re-frame :as rf]))
 
 (defn- view-internal
@@ -15,7 +16,7 @@
                            #(reset! reset-slider? true)
                            200))
         auth-method     (rf/sub [:auth-method])
-        biometric-auth? (= auth-method "biometric")]
+        biometric-auth? (= auth-method constants/auth-method-biometric)]
     (fn [{:keys [track-text
                  customization-color
                  auth-button-label
@@ -25,11 +26,11 @@
                  size
                  theme
                  blur?
-                 container-style]}]
-      [rn/view {:style {:flex 1}}
+                 container-style]
+          :or   {container-style {:flex 1}}}]
+      [rn/view {:style container-style}
        [quo/slide-button
         {:size                size
-         :container-style     container-style
          :customization-color customization-color
          :on-reset            (when @reset-slider? #(reset! reset-slider? false))
          :on-complete         #(authorize/authorize {:on-close              on-close

src/status_im/common/universal_links.cljs

@@ -200,24 +200,23 @@
               (handle-url url))))
 
 (defn generate-profile-url
-  ([cofx] (generate-profile-url cofx nil))
-  ([{:keys [db]} [{:keys [public-key cb]}]]
-   (let [profile-public-key (get-in db [:profile/profile :public-key])
-         profile?           (or (not public-key) (= public-key profile-public-key))
-         ens-name?          (if profile?
-                              (get-in db [:profile/profile :ens-name?])
-                              (get-in db [:contacts/contacts public-key :ens-name]))
-         public-key         (if profile? profile-public-key public-key)]
-     (when public-key
-       {:json-rpc/call
-        [{:method     (if ens-name? "wakuext_shareUserURLWithENS" "wakuext_shareUserURLWithData")
-          :params     [public-key]
-          :on-success (fn [url]
-                        (rf/dispatch [:universal-links/save-profile-url public-key url])
-                        (when (fn? cb) (cb)))
-          :on-error   #(log/error "failed to wakuext_shareUserURLWithData"
-                                  {:error      %
-                                   :public-key public-key})}]}))))
+  [{:keys [db]} [{:keys [public-key cb]}]]
+  (let [profile-public-key (get-in db [:profile/profile :public-key])
+        profile?           (or (not public-key) (= public-key profile-public-key))
+        ens-name?          (if profile?
+                             (get-in db [:profile/profile :ens-name?])
+                             (get-in db [:contacts/contacts public-key :ens-name]))
+        public-key         (if profile? profile-public-key public-key)]
+    (when public-key
+      {:json-rpc/call
+       [{:method     (if ens-name? "wakuext_shareUserURLWithENS" "wakuext_shareUserURLWithData")
+         :params     [public-key]
+         :on-success (fn [url]
+                       (rf/dispatch [:universal-links/save-profile-url public-key url])
+                       (when (fn? cb) (cb)))
+         :on-error   #(log/error "failed to wakuext_shareUserURLWithData"
+                                 {:error      %
+                                  :public-key public-key})}]})))
 
 (schema/=> generate-profile-url
   [:=>

src/status_im/common/universal_links_test.cljs

@@ -5,11 +5,14 @@
     [re-frame.core :as re-frame]
     [status-im.common.universal-links :as links]))
 
+(def pubkey
+  "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073")
+
 (deftest handle-url-test
   (testing "the user is not logged in"
     (testing "it stores the url for later processing"
-      (is (= {:db {:universal-links/url "some-url"}}
-             (links/handle-url {:db {}} "some-url")))))
+      (is (match? {:db {:universal-links/url "some-url"}}
+                  (links/handle-url {:db {}} "some-url")))))
   (testing "the user is logged in"
     (let [db {:profile/profile     {:public-key "pk"}
               :app-state           "active"
@@ -18,9 +21,9 @@
         (is (nil? (get-in (links/handle-url {:db db} "some-url")
                           [:db :universal-links/url]))))
       (testing "Handle a custom string"
-        (is (= (get-in (links/handle-url {:db db} "https://status.app/u#statuse2e")
-                       [:router/handle-uri :uri])
-               "https://status.app/u#statuse2e"))))))
+        (is (match? (get-in (links/handle-url {:db db} "https://status.app/u#statuse2e")
+                            [:router/handle-uri :uri])
+                    "https://status.app/u#statuse2e"))))))
 
 (deftest url-event-listener
   (testing "the url is not nil"
@@ -28,77 +31,58 @@
       (let [actual (atom nil)]
         (with-redefs [re-frame/dispatch #(reset! actual %)]
           (links/url-event-listener #js {:url "some-url"})
-          (is (= [:universal-links/handle-url "some-url"] @actual))))))
+          (is (match? [:universal-links/handle-url "some-url"] @actual))))))
   (testing "the url is nil"
     (testing "it does not dispatches the url"
       (let [actual (atom nil)]
         (with-redefs [re-frame/dispatch #(reset! actual %)]
           (links/url-event-listener #js {})
-          (is (= nil @actual)))))))
+          (is (match? nil @actual)))))))
 
 (deftest generate-profile-url
   (testing "user has ens name"
     (testing "it calls the ens rpc method with ens name as param"
-      (let [pubkey "pubkey"
-            db     {:profile/profile {:ens-name? true :public-key pubkey}}
-            rst    (links/generate-profile-url {:db db})]
-        (are [result expected] (= result expected)
+      (let [db  {:profile/profile {:ens-name? true :public-key pubkey}}
+            rst (links/generate-profile-url {:db db} [])]
+        (are [result expected] (match? result expected)
          "wakuext_shareUserURLWithENS" (-> rst :json-rpc/call first :method)
          pubkey                        (-> rst :json-rpc/call first :params first)))))
   (testing "user has no ens name"
     (testing "it calls the ens rpc method with public keyas param"
-      (let [pubkey "pubkey"
-            db     {:profile/profile {:public-key pubkey}}
-            rst    (links/generate-profile-url {:db db})]
-        (are [result expected] (= result expected)
+      (let [db  {:profile/profile {:public-key pubkey}}
+            rst (links/generate-profile-url {:db db} [])]
+        (are [result expected] (match? result expected)
          "wakuext_shareUserURLWithData" (-> rst :json-rpc/call first :method)
          pubkey                         (-> rst :json-rpc/call first :params first)))))
   (testing "contact has ens name"
     (testing "it calls the ens rpc method with ens name as param"
-      (let [pubkey "pubkey"
-            ens    "ensname.eth"
-            db     {:contacts/contacts {pubkey {:ens-name ens}}}
-            rst    (links/generate-profile-url {:db db} [{:public-key pubkey}])]
-        (are [result expected] (= result expected)
+      (let [ens "ensname.eth"
+            db  {:contacts/contacts {pubkey {:ens-name ens}}}
+            rst (links/generate-profile-url {:db db} [{:public-key pubkey}])]
+        (are [result expected] (match? result expected)
          "wakuext_shareUserURLWithENS" (-> rst :json-rpc/call first :method)
          pubkey                        (-> rst :json-rpc/call first :params first)))))
   (testing "contact has no ens name"
     (testing "it calls the ens rpc method with public keyas param"
-      (let [pubkey "pubkey"
-            db     {:contacts/contacts {pubkey {:public-key pubkey}}}
-            rst    (links/generate-profile-url {:db db} [{:public-key pubkey}])]
-        (are [result expected] (= result expected)
+      (let [db  {:contacts/contacts {pubkey {:public-key pubkey}}}
+            rst (links/generate-profile-url {:db db} [{:public-key pubkey}])]
+        (are [result expected] (match? result expected)
          "wakuext_shareUserURLWithData" (-> rst :json-rpc/call first :method)
          pubkey                         (-> rst :json-rpc/call first :params first))))))
 
 (deftest save-profile-url
   (testing "given a contact public key and profile url"
     (testing "it updates the contact in db"
-      (let [pubkey "pubkey"
-            url    "url"
-            db     {:contacts/contacts {pubkey {:public-key pubkey}}}
-            rst    (links/save-profile-url {:db db} [pubkey url])]
-        (is (= (get-in rst [:db :contacts/contacts pubkey :universal-profile-url]) url)))))
+      (let [url "url"
+            db  {:contacts/contacts {pubkey {:public-key pubkey}}}
+            rst (links/save-profile-url {:db db} [pubkey url])]
+        (is (match? (get-in rst [:db :contacts/contacts pubkey :universal-profile-url]) url)))))
   (testing "given a user public key and profile url"
     (testing "it updates the user profile in db"
-      (let [pubkey "pubkey"
-            url    "url"
-            db     {:profile/profile {:public-key pubkey}}
-            rst    (links/save-profile-url {:db db} [pubkey url])]
-        (is (= (get-in rst [:db :profile/profile :universal-profile-url]) url)))))
-  (testing "given a invalid url"
-    (testing "it returns the db untouched"
-      (let [pubkey "pubkey"
-            url    "url"
-            db     {:profile/profile {:public-key pubkey}}
-            rst    (links/save-profile-url {:db db} ["invalid pubkey" url])]
-        (is (= (:db rst) db)))))
-  (testing "given a nil as url"
-    (testing "it returns nil"
-      (let [pubkey "pubkey"
-            db     {:profile/profile {:public-key pubkey}}
-            rst    (links/save-profile-url {:db db} ["invalid pubkey"])]
-        (is (nil? rst))))))
+      (let [url "url"
+            db  {:profile/profile {:public-key pubkey}}
+            rst (links/save-profile-url {:db db} [pubkey url])]
+        (is (match? (get-in rst [:db :profile/profile :universal-profile-url]) url))))))
 
 (deftest universal-link-test
   (testing "universal-link?"

src/status_im/common/validation/profile.cljs

@@ -0,0 +1,41 @@
+(ns status-im.common.validation.profile
+  (:require [clojure.string :as string]
+            [utils.i18n :as i18n]))
+
+;; NOTE - validation should match with Desktop
+;; https://github.com/status-im/status-desktop/blob/2ba96803168461088346bf5030df750cb226df4c/ui/imports/utils/Constants.qml#L468
+(def min-length 5)
+(def max-length 24)
+
+(def emoji-regex
+  #"(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])")
+
+(def status-regex #"^[a-zA-Z0-9\-_ ]+$")
+
+(def common-names ["Ethereum" "Bitcoin"])
+
+(defn has-emojis? [s] (boolean (re-find emoji-regex s)))
+
+(defn has-common-names? [s] (pos? (count (filter #(string/includes? s %) common-names))))
+
+(defn has-special-characters? [s] (not (re-find status-regex s)))
+
+(defn name-too-short? [s] (< (count (string/trim (str s))) min-length))
+
+(defn name-too-long? [s] (> (count (string/trim (str s))) max-length))
+
+(defn validation-name
+  [s]
+  (cond
+    (or (= s nil) (= s ""))      nil
+    (string/ends-with? s "-eth") (i18n/label :t/ending-not-allowed {:ending "-eth"})
+    (string/ends-with? s "_eth") (i18n/label :t/ending-not-allowed {:ending "_eth"})
+    (string/ends-with? s ".eth") (i18n/label :t/ending-not-allowed {:ending ".eth"})
+    (string/starts-with? s " ")  (i18n/label :t/start-with-space)
+    (string/ends-with? s " ")    (i18n/label :t/ends-with-space)
+    (has-common-names? s)        (i18n/label :t/are-not-allowed {:check (i18n/label :t/common-names)})
+    (has-emojis? s)              (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
+    (has-special-characters? s)  (i18n/label :t/are-not-allowed
+                                             {:check (i18n/label :t/special-characters)})
+    (name-too-short? s)          (i18n/label :t/minimum-characters {:min-chars min-length})
+    (name-too-long? s)           (i18n/label :t/profile-name-is-too-long)))

src/status_im/common/validation/profile_test.cljs

@@ -0,0 +1,52 @@
+(ns status-im.common.validation.profile-test
+  (:require
+    [cljs.test :refer-macros [deftest are]]
+    [status-im.common.validation.profile :as profile-validator]
+    [utils.i18n :as i18n]))
+
+(deftest has-emojis-test
+  (are [arg expected]
+   (expected (profile-validator/has-emojis? arg))
+   "Hello 😊" true?
+   "Hello"    false?))
+
+(deftest has-common-names-test
+  (are [arg expected]
+   (expected (profile-validator/has-common-names? arg))
+   "Ethereum" true?
+   "Hello"    false?))
+
+(deftest has-special-characters-test
+  (are [arg expected]
+   (expected (profile-validator/has-special-characters? arg))
+   "@name" true?
+   "name"  false?))
+
+(deftest name-too-short-test
+  (are [arg expected]
+   (expected (profile-validator/name-too-short? arg))
+   "abc"    true?
+   "abcdef" false?))
+
+(deftest name-too-long-test
+  (are [arg expected]
+   (expected (profile-validator/name-too-long? arg))
+   (apply str (repeat 25 "a")) true?
+   "abcdef"                    false?))
+
+(deftest validation-name-test
+  (are [arg expected]
+   (= (profile-validator/validation-name arg) expected)
+   nil                         nil
+   ""                          nil
+   "@name"                     (i18n/label :t/are-not-allowed
+                                           {:check (i18n/label :t/special-characters)})
+   "name-eth"                  (i18n/label :t/ending-not-allowed {:ending "-eth"})
+   "name_eth"                  (i18n/label :t/ending-not-allowed {:ending "_eth"})
+   "name.eth"                  (i18n/label :t/ending-not-allowed {:ending ".eth"})
+   " name"                     (i18n/label :t/start-with-space)
+   "name "                     (i18n/label :t/ends-with-space)
+   "Ethereum"                  (i18n/label :t/are-not-allowed {:check (i18n/label :t/common-names)})
+   "Hello 😊"                  (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
+   "abc"                       (i18n/label :t/minimum-characters {:min-chars 5})
+   (apply str (repeat 25 "a")) (i18n/label :t/profile-name-is-too-long)))

src/status_im/config.cljs

@@ -19,6 +19,9 @@
 
 (def mainnet-rpc-url (str "https://eth-archival.gateway.pokt.network/v1/lb/" POKT_TOKEN))
 (def goerli-rpc-url (str "https://goerli-archival.gateway.pokt.network/v1/lb/" POKT_TOKEN))
+(def mainnet-chain-explorer-link "https://etherscan.io/address/")
+(def optimism-mainnet-chain-explorer-link "https://optimistic.etherscan.io/address/")
+(def arbitrum-mainnet-chain-explorer-link "https://arbiscan.io/address/")
 (def opensea-api-key OPENSEA_API_KEY)
 (def bootnodes-settings-enabled? (enabled? (get-config :BOOTNODES_SETTINGS_ENABLED "1")))
 (def mailserver-confirmations-enabled? (enabled? (get-config :MAILSERVER_CONFIRMATIONS_ENABLED)))
@@ -91,7 +94,7 @@
 
 (def mainnet-networks
   [{:id                  "mainnet_rpc"
-    :chain-explorer-link "https://etherscan.io/address/"
+    :chain-explorer-link mainnet-chain-explorer-link
     :name                "Mainnet with upstream RPC"
     :config              {:NetworkId      (chain/chain-keyword->chain-id :mainnet)
                           :DataDir        "/ethereum/mainnet_rpc"

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

@@ -1,6 +1,7 @@
 (ns status-im.contexts.chat.actions.view
   (:require
     [quo.core :as quo]
+    [utils.debounce :as debounce]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -22,10 +23,14 @@
       :label               (i18n/label :t/new-chat)
       :on-press            (fn []
                              (rf/dispatch [:group-chat/clear-contacts])
-                             (rf/dispatch [:open-modal :start-a-new-chat]))}
+                             (debounce/dispatch-and-chill
+                              [:open-modal :start-a-new-chat]
+                              1000))}
      {:icon                :i/add-user
       :accessibility-label :add-a-contact
       :label               (i18n/label :t/add-a-contact)
       :sub-label           (i18n/label :t/enter-a-chat-key)
       :add-divider?        true
-      :on-press            #(rf/dispatch [:open-modal :new-contact])}]]])
+      :on-press            #(debounce/dispatch-and-chill
+                             [:open-modal :new-contact]
+                             1000)}]]])

src/status_im/contexts/chat/composer/sub_view.cljs

@@ -1,55 +0,0 @@
-(ns status-im.contexts.chat.composer.sub-view
-  (:require
-    [quo.core :as quo]
-    [react-native.blur :as blur]
-    [react-native.core :as rn]
-    [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.style :as style]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
-
-(defn bar
-  [theme]
-  [rn/view {:style style/bar-container}
-   [rn/view {:style (style/bar theme)}]])
-
-(defn f-blur-view
-  [{:keys [layout-height focused? theme]}]
-  [reanimated/view {:style (style/blur-container layout-height focused?)}
-   [blur/view (style/blur-view theme)]])
-
-(defn blur-view
-  [props]
-  [:f> f-blur-view props])
-
-(defn- f-shell-button
-  [{:keys [focused?]} scroll-to-bottom-fn show-floating-scroll-down-button?]
-  (let [customization-color (rf/sub [:profile/customization-color])
-        hide-shell?         (or @focused? @show-floating-scroll-down-button?)
-        y-shell             (reanimated/use-shared-value (if hide-shell? 35 0))
-        opacity             (reanimated/use-shared-value (if hide-shell? 0 1))]
-    (rn/use-effect
-     (fn []
-       (reanimated/animate opacity (if hide-shell? 0 1))
-       (reanimated/animate y-shell (if hide-shell? 35 0)))
-     [@focused? @show-floating-scroll-down-button?])
-    [:<>
-     [reanimated/view
-      {:style (style/shell-button y-shell opacity)}
-      [quo/floating-shell-button
-       {:jump-to
-        {:on-press            (fn []
-                                (rf/dispatch [:shell/navigate-to-jump-to]))
-         :customization-color customization-color
-         :label               (i18n/label :t/jump-to)
-         :style               {:align-self :center}}}
-       {}]]
-     (when (and (not @focused?)
-                @show-floating-scroll-down-button?)
-       [quo/floating-shell-button
-        {:scroll-to-bottom {:on-press scroll-to-bottom-fn}}
-        style/scroll-to-bottom-button])]))
-
-(defn shell-button
-  [state scroll-to-bottom-fn show-floating-scroll-down-button?]
-  [:f> f-shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?])

src/status_im/contexts/chat/effects.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.chat.effects
   (:require
     [react-native.async-storage :as async-storage]
+    [status-im.contexts.chat.messenger.messages.list.state :as chat.state]
     [status-im.contexts.shell.jump-to.constants :as shell.constants]
     [utils.re-frame :as rf]))
 
@@ -16,3 +17,9 @@
            (when (= stored-key-uid key-uid)
              (rf/dispatch [:chat/pop-to-root-and-navigate-to-chat chat-id
                            shell.constants/open-screen-without-animation])))))))))
+
+(rf/reg-fx :effects.chat/scroll-to-bottom
+ (fn []
+   (some-> ^js @chat.state/messages-list-ref
+           (.scrollToOffset #js
+                             {:animated true}))))

src/status_im/contexts/chat/events.cljs

@@ -7,14 +7,14 @@
     [reagent.core :as reagent]
     [status-im.common.muting.helpers :refer [format-mute-till]]
     [status-im.constants :as constants]
-    [status-im.contexts.chat.composer.link-preview.events :as link-preview]
     [status-im.contexts.chat.contacts.events :as contacts-store]
     status-im.contexts.chat.effects
-    status-im.contexts.chat.lightbox.events
-    status-im.contexts.chat.messages.content.reactions.events
-    [status-im.contexts.chat.messages.delete-message-for-me.events :as delete-for-me]
-    [status-im.contexts.chat.messages.delete-message.events :as delete-message]
-    [status-im.contexts.chat.messages.list.state :as chat.state]
+    [status-im.contexts.chat.messenger.composer.link-preview.events :as link-preview]
+    status-im.contexts.chat.messenger.lightbox.events
+    status-im.contexts.chat.messenger.messages.content.reactions.events
+    [status-im.contexts.chat.messenger.messages.delete-message-for-me.events :as delete-for-me]
+    [status-im.contexts.chat.messenger.messages.delete-message.events :as delete-message]
+    [status-im.contexts.chat.messenger.messages.list.state :as chat.state]
     [status-im.navigation.events :as navigation]
     [taoensso.timbre :as log]
     [utils.datetime :as datetime]
@@ -281,7 +281,7 @@
 
 (rf/defn close-and-remove-chat
   "Closes the chat and removes it from chat list while retaining history, producing all necessary effects for that"
-  {:events [:chat.ui/close-chat]}
+  {:events [:chat.ui/close-and-remove-chat]}
   [{:keys [db now] :as cofx} chat-id]
   (rf/merge cofx
             {:effects/push-notifications-clear-message-notifications [chat-id]
@@ -386,7 +386,7 @@
     :confirm-button-text (i18n/label :t/delete)
     :on-accept           #(do
                             (rf/dispatch [:hide-bottom-sheet])
-                            (rf/dispatch [:chat.ui/close-chat chat-id]))}})
+                            (rf/dispatch [:chat.ui/close-and-remove-chat chat-id]))}})
 
 (rf/defn navigate-to-user-pinned-messages
   "Takes coeffects map and chat-id, returns effects necessary for navigation and preloading data"
@@ -447,3 +447,8 @@
                     :params     [{:id chat-id}]
                     :on-success #()
                     :on-error   #(log/error "failed to fetch messages for chat" chat-id %)}]})
+
+(rf/defn scroll-to-bottom
+  {:events [:chat.ui/scroll-to-bottom]}
+  [_]
+  {:effects.chat/scroll-to-bottom nil})

src/status_im/contexts/chat/home/new_chat/styles.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.new-chat.styles
+(ns status-im.contexts.chat.home.new-chat.styles
   (:require
     [react-native.safe-area :as safe-area]))
 

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

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.new-chat.view
+(ns status-im.contexts.chat.home.new-chat.view
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
@@ -10,7 +10,7 @@
     [status-im.common.contact-list.view :as contact-list]
     [status-im.common.resources :as resources]
     [status-im.constants :as constants]
-    [status-im.contexts.chat.new-chat.styles :as style]
+    [status-im.contexts.chat.home.new-chat.styles :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 

src/status_im/contexts/chat/messenger/camera/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.camera.style
+(ns status-im.contexts.chat.messenger.camera.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]

src/status_im/contexts/chat/messenger/camera/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.camera.view
+(ns status-im.contexts.chat.messenger.camera.view
   (:require
     [oops.core :refer [oget]]
     [quo.core :as quo]
@@ -11,7 +11,7 @@
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.camera.style :as style]
+    [status-im.contexts.chat.messenger.camera.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 

src/status_im/contexts/chat/messenger/composer/actions/style.cljs

@@ -1,7 +1,7 @@
-(ns status-im.contexts.chat.composer.actions.style
+(ns status-im.contexts.chat.messenger.composer.actions.style
   (:require
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]))
+    [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
 (def actions-container
   {:height          constants/actions-container-height

src/status_im/contexts/chat/messenger/composer/actions/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.actions.view
+(ns status-im.contexts.chat.messenger.composer.actions.view
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
@@ -9,8 +9,8 @@
     [status-im.common.alert.effects :as alert.effects]
     [status-im.common.device-permissions :as device-permissions]
     [status-im.constants :as constants]
-    [status-im.contexts.chat.composer.actions.style :as style]
-    [status-im.contexts.chat.composer.constants :as comp-constants]
+    [status-im.contexts.chat.messenger.composer.actions.style :as style]
+    [status-im.contexts.chat.messenger.composer.constants :as comp-constants]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -20,8 +20,7 @@
    {:keys [text-value focused? maximized?]}
    {:keys [height saved-height last-height opacity background-y container-opacity]}
    window-height
-   edit
-   scroll-to-bottom-fn]
+   edit]
   (reanimated/animate height comp-constants/input-height)
   (reanimated/set-shared-value saved-height comp-constants/input-height)
   (reanimated/set-shared-value last-height comp-constants/input-height)
@@ -39,11 +38,11 @@
   (reset! text-value "")
   (reset! sending-links? false)
   (reset! sending-images? false)
-  (when (and (not (some? edit)) scroll-to-bottom-fn)
-    (scroll-to-bottom-fn)))
+  (when-not (some? edit)
+    (rf/dispatch [:chat.ui/scroll-to-bottom])))
 
 (defn f-send-button
-  [props state animations window-height images? btn-opacity scroll-to-bottom-fn z-index edit]
+  [props state animations window-height images? btn-opacity z-index edit]
   (let [{:keys [text-value]} state
         customization-color  (rf/sub [:profile/customization-color])]
     (rn/use-effect (fn []
@@ -61,19 +60,17 @@
     [reanimated/view
      {:style (style/send-button btn-opacity @z-index)}
      [quo/button
-      {:icon-only? true
-       :size 32
+      {:icon-only?          true
+       :size                32
        :customization-color customization-color
        :accessibility-label :send-message-button
-       :on-press #(send-message props state animations window-height edit scroll-to-bottom-fn)}
+       :on-press            #(send-message props state animations window-height edit)}
       :i/arrow-up]]))
 
 (defn send-button
-  [props {:keys [text-value] :as state} animations window-height images? edit btn-opacity
-   scroll-to-bottom-fn]
+  [props {:keys [text-value] :as state} animations window-height images? edit btn-opacity]
   (let [z-index (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))]
-    [:f> f-send-button props state animations window-height images? btn-opacity scroll-to-bottom-fn
-     z-index edit]))
+    [:f> f-send-button props state animations window-height images? btn-opacity z-index edit]))
 
 (defn disabled-audio-button
   [opacity]
@@ -231,7 +228,7 @@
     :icon     :i/format}])
 
 (defn view
-  [props state animations window-height insets scroll-to-bottom-fn {:keys [edit images]}]
+  [props state animations window-height insets {:keys [edit images]}]
   (let [send-btn-opacity  (reanimated/use-shared-value 0)
         audio-btn-opacity (reanimated/interpolate send-btn-opacity [0 1] [1 0])]
     [rn/view {:style style/actions-container}
@@ -242,8 +239,7 @@
       [image-button props animations insets edit]
       [reaction-button]
       [format-button]]
-     [:f> send-button props state animations window-height images edit send-btn-opacity
-      scroll-to-bottom-fn]
+     [:f> send-button props state animations window-height images edit send-btn-opacity]
      (when (and (not edit) (not images))
        ;; TODO(alwx): needs to be replaced with an `audio-button` later. See
        ;; https://github.com/status-im/status-mobile/issues/16084 for more details.

src/status_im/contexts/chat/messenger/composer/constants.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.constants
+(ns status-im.contexts.chat.messenger.composer.constants
   (:require
     [quo.foundations.typography :as typography]
     [react-native.platform :as platform]))

src/status_im/contexts/chat/messenger/composer/edit/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.edit.style)
+(ns status-im.contexts.chat.messenger.composer.edit.style)
 
 (def container
   {:flex-direction :row

src/status_im/contexts/chat/messenger/composer/edit/view.cljs

@@ -1,12 +1,12 @@
-(ns status-im.contexts.chat.composer.edit.view
+(ns status-im.contexts.chat.messenger.composer.edit.view
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.edit.style :as style]
-    [status-im.contexts.chat.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.edit.style :as style]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 

src/status_im/contexts/chat/messenger/composer/effects.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.effects
+(ns status-im.contexts.chat.messenger.composer.effects
   (:require
     [clojure.string :as string]
     [oops.core :as oops]
@@ -7,9 +7,9 @@
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.keyboard :as kb]
-    [status-im.contexts.chat.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.keyboard :as kb]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
     [utils.number]
     [utils.re-frame :as rf]))
 

src/status_im/contexts/chat/messenger/composer/events.cljs

@@ -1,10 +1,10 @@
-(ns status-im.contexts.chat.composer.events
+(ns status-im.contexts.chat.messenger.composer.events
   (:require [clojure.string :as string]
             [legacy.status-im.chat.models.mentions :as mentions]
             [legacy.status-im.data-store.messages :as data-store-messages]
             [status-im.constants :as constants]
-            [status-im.contexts.chat.composer.link-preview.events :as link-preview]
-            [status-im.contexts.chat.messages.transport.events :as messages.transport]
+            [status-im.contexts.chat.messenger.composer.link-preview.events :as link-preview]
+            [status-im.contexts.chat.messenger.messages.transport.events :as messages.transport]
             [taoensso.timbre :as log]
             [utils.emojilib :as emoji]
             [utils.i18n :as i18n]

src/status_im/contexts/chat/messenger/composer/gesture.cljs

@@ -1,10 +1,10 @@
-(ns status-im.contexts.chat.composer.gesture
+(ns status-im.contexts.chat.messenger.composer.gesture
   (:require
     [oops.core :as oops]
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
     [utils.number]
     [utils.re-frame :as rf]))
 

src/status_im/contexts/chat/messenger/composer/gradients/style.cljs

@@ -1,8 +1,8 @@
-(ns status-im.contexts.chat.composer.gradients.style
+(ns status-im.contexts.chat.messenger.composer.gradients.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]))
+    [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
 (defn- top-gradient-style
   [opacity z-index showing-extra-space?]

src/status_im/contexts/chat/messenger/composer/gradients/view.cljs

@@ -1,9 +1,9 @@
-(ns status-im.contexts.chat.composer.gradients.view
+(ns status-im.contexts.chat.messenger.composer.gradients.view
   (:require
     [react-native.core :as rn]
     [react-native.linear-gradient :as linear-gradient]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.gradients.style :as style]
+    [status-im.contexts.chat.messenger.composer.gradients.style :as style]
     [utils.re-frame :as rf]))
 
 (defn f-view

src/status_im/contexts/chat/messenger/composer/handlers.cljs

@@ -1,14 +1,14 @@
-(ns status-im.contexts.chat.composer.handlers
+(ns status-im.contexts.chat.messenger.composer.handlers
   (:require
     [clojure.string :as string]
     [oops.core :as oops]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.keyboard :as kb]
-    [status-im.contexts.chat.composer.selection :as selection]
-    [status-im.contexts.chat.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.keyboard :as kb]
+    [status-im.contexts.chat.messenger.composer.selection :as selection]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
     [utils.debounce :as debounce]
     [utils.number]
     [utils.re-frame :as rf]))
@@ -16,11 +16,11 @@
 (defn focus
   "Animate to the `saved-height`, display background-overlay if needed, and set cursor position"
   [{:keys [input-ref] :as props}
-   {:keys [text-value focused? lock-selection? saved-cursor-position]}
+   {:keys [text-value focused? lock-selection? saved-cursor-position composer-focused?]}
    {:keys [height saved-height last-height opacity background-y container-opacity]
     :as   animations}
-   {:keys [max-height] :as dimensions}
-   show-floating-scroll-down-button?]
+   {:keys [max-height] :as dimensions}]
+  (reanimated/set-shared-value composer-focused? true)
   (reset! focused? true)
   (rf/dispatch [:chat.ui/set-input-focused true])
   (let [last-height-value (reanimated/get-shared-value last-height)]
@@ -35,13 +35,12 @@
   (when (and (not-empty @text-value) @input-ref)
     (.setNativeProps ^js @input-ref
                      (clj->js {:selection {:start @saved-cursor-position :end @saved-cursor-position}})))
-  (kb/handle-refocus-emoji-kb-ios props animations dimensions)
-  (reset! show-floating-scroll-down-button? false))
+  (kb/handle-refocus-emoji-kb-ios props animations dimensions))
 
 (defn blur
   "Save the current height, minimize the composer, animate-out the background, and save cursor position"
   [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
-           maximized? recording?]}
+           maximized? recording? composer-focused?]}
    {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
    {:keys [content-height max-height window-height]}
    {:keys [images link-previews? reply]}]
@@ -53,6 +52,7 @@
                                                   max-height
                                                   content-height
                                                   saved-height)]
+      (reanimated/set-shared-value composer-focused? false)
       (reset! focused? false)
       (rf/dispatch [:chat.ui/set-input-focused false])
       (reanimated/set-shared-value last-height reopen-height)

src/status_im/contexts/chat/messenger/composer/images/style.cljs

@@ -1,7 +1,7 @@
-(ns status-im.contexts.chat.composer.images.style
+(ns status-im.contexts.chat.messenger.composer.images.style
   (:require
     [quo.foundations.colors :as colors]
-    [status-im.contexts.chat.composer.constants :as constants]))
+    [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
 (def image-container
   {:padding-top    constants/images-padding-top

src/status_im/contexts/chat/messenger/composer/images/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.images.view
+(ns status-im.contexts.chat.messenger.composer.images.view
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
@@ -6,8 +6,8 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.images.style :as style]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.images.style :as style]
     [utils.re-frame :as rf]))
 
 (defn image

src/status_im/contexts/chat/messenger/composer/keyboard.cljs

@@ -1,11 +1,11 @@
-(ns status-im.contexts.chat.composer.keyboard
+(ns status-im.contexts.chat.messenger.composer.keyboard
   (:require
     [oops.core :as oops]
     [react-native.async-storage :as async-storage]
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.utils :as utils]))
+    [status-im.contexts.chat.messenger.composer.utils :as utils]))
 
 (defn get-kb-height
   [curr-height default-height]

src/status_im/contexts/chat/messenger/composer/link_preview/events.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.link-preview.events
+(ns status-im.contexts.chat.messenger.composer.link-preview.events
   (:require
     [clojure.set :as set]
     [clojure.string :as string]

src/status_im/contexts/chat/messenger/composer/link_preview/events_test.cljs

@@ -1,8 +1,8 @@
-(ns status-im.contexts.chat.composer.link-preview.events-test
+(ns status-im.contexts.chat.messenger.composer.link-preview.events-test
   (:require
     [cljs.test :refer [deftest is testing]]
     matcher-combinators.test
-    [status-im.contexts.chat.composer.link-preview.events :as events]))
+    [status-im.contexts.chat.messenger.composer.link-preview.events :as events]))
 
 (def url-github "https://github.com")
 (def url-gitlab "https://gitlab.com")

src/status_im/contexts/chat/messenger/composer/link_preview/style.cljs

@@ -1,5 +1,5 @@
-(ns status-im.contexts.chat.composer.link-preview.style
-  (:require [status-im.contexts.chat.composer.constants :as constants]))
+(ns status-im.contexts.chat.messenger.composer.link-preview.style
+  (:require [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
 (def padding-horizontal 20)
 (def preview-height 56)

src/status_im/contexts/chat/messenger/composer/link_preview/view.cljs

@@ -1,11 +1,11 @@
-(ns status-im.contexts.chat.composer.link-preview.view
+(ns status-im.contexts.chat.messenger.composer.link-preview.view
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.link-preview.events]
-    [status-im.contexts.chat.composer.link-preview.style :as style]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.link-preview.events]
+    [status-im.contexts.chat.messenger.composer.link-preview.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 

src/status_im/contexts/chat/messenger/composer/mentions/style.cljs

@@ -1,9 +1,9 @@
-(ns status-im.contexts.chat.composer.mentions.style
+(ns status-im.contexts.chat.messenger.composer.mentions.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]))
+    [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
 
 (defn shadow

src/status_im/contexts/chat/messenger/composer/mentions/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.mentions.view
+(ns status-im.contexts.chat.messenger.composer.mentions.view
   (:require
     [react-native.core :as rn]
     [react-native.platform :as platform]
@@ -6,8 +6,8 @@
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.common.contact-list-item.view :as contact-list-item]
-    [status-im.contexts.chat.composer.mentions.style :as style]
-    [status-im.contexts.chat.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.composer.mentions.style :as style]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
     [utils.re-frame :as rf]))
 
 (defn update-cursor

src/status_im/contexts/chat/messenger/composer/reply/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.reply.style)
+(ns status-im.contexts.chat.messenger.composer.reply.style)
 
 
 (defn container

src/status_im/contexts/chat/messenger/composer/reply/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.reply.view
+(ns status-im.contexts.chat.messenger.composer.reply.view
   (:require
     [clojure.string :as string]
     [quo.core :as quo]
@@ -7,9 +7,9 @@
     [react-native.linear-gradient :as linear-gradient]
     [react-native.reanimated :as reanimated]
     [status-im.constants :as constant]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.reply.style :as style]
-    [status-im.contexts.chat.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.reply.style :as style]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
     [utils.ens.stateofus :as stateofus]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))

src/status_im/contexts/chat/messenger/composer/selection.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.selection
+(ns status-im.contexts.chat.messenger.composer.selection
   (:require
     [clojure.string :as string]
     [oops.core :as oops]

src/status_im/contexts/chat/messenger/composer/style.cljs

@@ -1,11 +1,11 @@
-(ns status-im.contexts.chat.composer.style
+(ns status-im.contexts.chat.messenger.composer.style
   (:require
     [quo.foundations.colors :as colors]
     [quo.foundations.typography :as typography]
     [quo.theme :as quo.theme]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.composer.constants :as constants]))
+    [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
 (def border-top-radius 20)
 

src/status_im/contexts/chat/messenger/composer/sub_view.cljs

@@ -0,0 +1,56 @@
+(ns status-im.contexts.chat.messenger.composer.sub-view
+  (:require
+    [quo.core :as quo]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [react-native.reanimated :as reanimated]
+    [status-im.contexts.chat.messenger.composer.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [utils.worklets.chat.messages :as worklets]))
+
+(defn bar
+  [theme]
+  [rn/view {:style style/bar-container}
+   [rn/view {:style (style/bar theme)}]])
+
+(defn f-blur-view
+  [{:keys [layout-height focused? theme]}]
+  [reanimated/view {:style (style/blur-container layout-height focused?)}
+   [blur/view (style/blur-view theme)]])
+
+(defn blur-view
+  [props]
+  [:f> f-blur-view props])
+
+(defn- f-shell-button
+  [{:keys [composer-focused?]} chat-list-scroll-y window-height]
+  (let [customization-color        (rf/sub [:profile/customization-color])
+        scroll-down-button-opacity (worklets/scroll-down-button-opacity
+                                    chat-list-scroll-y
+                                    composer-focused?
+                                    window-height)
+        jump-to-button-opacity     (worklets/jump-to-button-opacity
+                                    scroll-down-button-opacity
+                                    composer-focused?)
+        jump-to-button-position    (worklets/jump-to-button-position
+                                    scroll-down-button-opacity
+                                    composer-focused?)]
+    [:<>
+     [reanimated/view
+      {:style (style/shell-button jump-to-button-position jump-to-button-opacity)}
+      [quo/floating-shell-button
+       {:jump-to
+        {:on-press            #(rf/dispatch [:shell/navigate-to-jump-to])
+         :customization-color customization-color
+         :label               (i18n/label :t/jump-to)
+         :style               {:align-self :center}}}
+       {}]]
+     [quo/floating-shell-button
+      {:scroll-to-bottom {:on-press #(rf/dispatch [:chat.ui/scroll-to-bottom])}}
+      style/scroll-to-bottom-button
+      scroll-down-button-opacity]]))
+
+(defn shell-button
+  [state chat-list-scroll-y window-height]
+  [:f> f-shell-button state chat-list-scroll-y window-height])

src/status_im/contexts/chat/messenger/composer/utils.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.utils
+(ns status-im.contexts.chat.messenger.composer.utils
   (:require
     [clojure.string :as string]
     [oops.core :as oops]
@@ -6,8 +6,8 @@
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.selection :as selection]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.selection :as selection]
     [utils.number]
     [utils.re-frame :as rf]))
 
@@ -193,7 +193,8 @@
    :record-permission?    (reagent/atom true)
    :recording?            (reagent/atom false)
    :first-level?          (reagent/atom true)
-   :menu-items            (reagent/atom selection/first-level-menu-items)})
+   :menu-items            (reagent/atom selection/first-level-menu-items)
+   :composer-focused?     (reanimated/use-shared-value false)})
 
 (defn init-subs
   []

src/status_im/contexts/chat/messenger/composer/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.composer.view
+(ns status-im.contexts.chat.messenger.composer.view
   (:require
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
@@ -8,30 +8,29 @@
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.composer.actions.view :as actions]
-    [status-im.contexts.chat.composer.constants :as constants]
-    [status-im.contexts.chat.composer.edit.view :as edit]
-    [status-im.contexts.chat.composer.effects :as effects]
-    [status-im.contexts.chat.composer.gesture :as drag-gesture]
-    [status-im.contexts.chat.composer.gradients.view :as gradients]
-    [status-im.contexts.chat.composer.handlers :as handler]
-    [status-im.contexts.chat.composer.images.view :as images]
-    [status-im.contexts.chat.composer.link-preview.view :as link-preview]
-    [status-im.contexts.chat.composer.mentions.view :as mentions]
-    [status-im.contexts.chat.composer.reply.view :as reply]
-    [status-im.contexts.chat.composer.selection :as selection]
-    [status-im.contexts.chat.composer.style :as style]
-    [status-im.contexts.chat.composer.sub-view :as sub-view]
-    [status-im.contexts.chat.composer.utils :as utils]
-    [status-im.contexts.chat.messages.contact-requests.bottom-drawer.view :as
+    [status-im.contexts.chat.messenger.composer.actions.view :as actions]
+    [status-im.contexts.chat.messenger.composer.constants :as constants]
+    [status-im.contexts.chat.messenger.composer.edit.view :as edit]
+    [status-im.contexts.chat.messenger.composer.effects :as effects]
+    [status-im.contexts.chat.messenger.composer.gesture :as drag-gesture]
+    [status-im.contexts.chat.messenger.composer.gradients.view :as gradients]
+    [status-im.contexts.chat.messenger.composer.handlers :as handler]
+    [status-im.contexts.chat.messenger.composer.images.view :as images]
+    [status-im.contexts.chat.messenger.composer.link-preview.view :as link-preview]
+    [status-im.contexts.chat.messenger.composer.mentions.view :as mentions]
+    [status-im.contexts.chat.messenger.composer.reply.view :as reply]
+    [status-im.contexts.chat.messenger.composer.selection :as selection]
+    [status-im.contexts.chat.messenger.composer.style :as style]
+    [status-im.contexts.chat.messenger.composer.sub-view :as sub-view]
+    [status-im.contexts.chat.messenger.composer.utils :as utils]
+    [status-im.contexts.chat.messenger.messages.contact-requests.bottom-drawer.view :as
      contact-requests.bottom-drawer]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
 (defn sheet-component
   [{:keys [insets
-           scroll-to-bottom-fn
-           show-floating-scroll-down-button?
+           chat-list-scroll-y
            window-height
            blur-height
            opacity
@@ -89,7 +88,7 @@
       (:edit subscriptions)]
      [rn/view
       {:style style/composer-sheet-and-jump-to-container}
-      [sub-view/shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?]
+      [sub-view/shell-button state chat-list-scroll-y window-height]
       [gesture/gesture-detector
        {:gesture
         (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
@@ -114,42 +113,39 @@
            :menu-items @(:menu-items state)
            :style      (style/input-view state)}
           [rn/text-input
-           {:ref #(reset! (:input-ref props) %)
-            :default-value @(:text-value state)
-            :on-focus
-            #(handler/focus props state animations dimensions show-floating-scroll-down-button?)
-            :on-blur #(handler/blur state animations dimensions subscriptions)
-            :on-content-size-change #(handler/content-size-change %
-                                                                  state
-                                                                  animations
-                                                                  dimensions
-                                                                  (or keyboard-shown
-                                                                      (:edit subscriptions)))
-            :on-scroll #(handler/scroll % props state animations dimensions)
-            :on-change-text #(handler/change-text % props state)
-            :on-selection-change #(handler/selection-change % props state)
-            :on-selection #(selection/on-selection % props state)
-            :keyboard-appearance (quo.theme/theme-value :light :dark)
+           {:ref                      #(reset! (:input-ref props) %)
+            :default-value            @(:text-value state)
+            :on-focus                 #(handler/focus props state animations dimensions)
+            :on-blur                  #(handler/blur state animations dimensions subscriptions)
+            :on-content-size-change   #(handler/content-size-change %
+                                                                    state
+                                                                    animations
+                                                                    dimensions
+                                                                    (or keyboard-shown
+                                                                        (:edit subscriptions)))
+            :on-scroll                #(handler/scroll % props state animations dimensions)
+            :on-change-text           #(handler/change-text % props state)
+            :on-selection-change      #(handler/selection-change % props state)
+            :on-selection             #(selection/on-selection % props state)
+            :keyboard-appearance      (quo.theme/theme-value :light :dark)
             :max-font-size-multiplier 1
-            :multiline true
-            :placeholder (i18n/label :t/type-something)
-            :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
-            :style (style/input-text props
-                                     state
-                                     {:max-height max-height
-                                      :theme      theme})
-            :max-length constants/max-text-size
-            :accessibility-label :chat-message-input}]]]
+            :multiline                true
+            :placeholder              (i18n/label :t/type-something)
+            :placeholder-text-color   (colors/theme-colors colors/neutral-40 colors/neutral-50)
+            :style                    (style/input-text props
+                                                        state
+                                                        {:max-height max-height
+                                                         :theme      theme})
+            :max-length               constants/max-text-size
+            :accessibility-label      :chat-message-input}]]]
         [:<>
          [gradients/view props state animations show-bottom-gradient?]
          [link-preview/view]
          [images/images-list]]
-        [:f> actions/view props state animations window-height insets scroll-to-bottom-fn
-         subscriptions]]]]]))
+        [:f> actions/view props state animations window-height insets subscriptions]]]]]))
 
 (defn f-composer
-  [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?
-           messages-list-on-layout-finished?]}]
+  [{:keys [insets chat-list-scroll-y messages-list-on-layout-finished?]}]
   (let [window-height (:height (rn/get-window))
         theme         (quo.theme/use-theme-value)
         opacity       (reanimated/use-shared-value 0)
@@ -159,8 +155,7 @@
                                                       (:bottom insets)))
         extra-params  {:insets                            insets
                        :window-height                     window-height
-                       :scroll-to-bottom-fn               scroll-to-bottom-fn
-                       :show-floating-scroll-down-button? show-floating-scroll-down-button?
+                       :chat-list-scroll-y                chat-list-scroll-y
                        :blur-height                       blur-height
                        :opacity                           opacity
                        :background-y                      background-y

src/status_im/contexts/chat/messenger/lightbox/animations.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.lightbox.animations
+(ns status-im.contexts.chat.messenger.lightbox.animations
   (:require
     [react-native.reanimated :as reanimated]))
 

src/status_im/contexts/chat/messenger/lightbox/bottom_view.cljs

@@ -1,13 +1,13 @@
-(ns status-im.contexts.chat.lightbox.bottom-view
+(ns status-im.contexts.chat.messenger.lightbox.bottom-view
   (:require
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.lightbox.animations :as anim]
-    [status-im.contexts.chat.lightbox.constants :as c]
-    [status-im.contexts.chat.lightbox.style :as style]
-    [status-im.contexts.chat.lightbox.text-sheet.view :as text-sheet]
+    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
+    [status-im.contexts.chat.messenger.lightbox.constants :as c]
+    [status-im.contexts.chat.messenger.lightbox.style :as style]
+    [status-im.contexts.chat.messenger.lightbox.text-sheet.view :as text-sheet]
     [utils.re-frame :as rf]))
 
 (defn get-small-item-layout

src/status_im/contexts/chat/messenger/lightbox/constants.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.lightbox.constants)
+(ns status-im.contexts.chat.messenger.lightbox.constants)
 
 (def ^:const small-image-size 40)
 (def ^:const focused-extra-size 16)

src/status_im/contexts/chat/messenger/lightbox/effects.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.lightbox.effects
+(ns status-im.contexts.chat.messenger.lightbox.effects
   (:require [react-native.blob :as blob]
             [react-native.cameraroll :as cameraroll]
             [react-native.fs :as fs]

src/status_im/contexts/chat/messenger/lightbox/events.cljs

@@ -1,5 +1,5 @@
-(ns status-im.contexts.chat.lightbox.events
-  (:require status-im.contexts.chat.lightbox.effects
+(ns status-im.contexts.chat.messenger.lightbox.events
+  (:require status-im.contexts.chat.messenger.lightbox.effects
             [utils.re-frame :as rf]))
 
 (rf/reg-event-fx :chat.ui/clear-sending-images

src/status_im/contexts/chat/messenger/lightbox/style.cljs

@@ -1,9 +1,9 @@
-(ns status-im.contexts.chat.lightbox.style
+(ns status-im.contexts.chat.messenger.lightbox.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.lightbox.constants :as c]))
+    [status-im.contexts.chat.messenger.lightbox.constants :as c]))
 
 ;;;; VIEW
 (defn image