Merge branch 'develop' into 15563

Fix https://github.com/status-im/status-mobile/issues/15592

Notes:

- The red border around the icon has been reported in issue
  https://github.com/status-im/status-mobile/issues/15606
- The loading state doesn't have a spinning icon on purpose. This will be done
  separately.

VERSION

@@ -1 +1 @@
-1.21.0
+1.22.0

doc/new-guidelines.md

@@ -90,6 +90,28 @@ their styles in the top-level of the properties map, prefer to add them inside t
  ]
 ```
 
+### Always apply animated styles in the style file
+
+When implementing styles for reanimated views, we should always define
+them in the style file and apply animations with reanimated/apply-animations-to-style
+in the style definition.
+
+```clojure
+;; bad
+(defn circle
+  []
+  (let [opacity (reanimated/use-shared-value 1)]
+    [reanimated/view {:style (reanimated/apply-animations-to-style
+                              {:opacity opacity}
+                              style/circle-container)}]))
+
+;; good
+(defn circle
+  []
+  (let [opacity (reanimated/use-shared-value 1)]
+    [reanimated/view {:style (style/circle-container opacity)}]))
+```
+
 ### Don't use percents to define width/height
 
 In ReactNative, all layouts use the [flexbox

ios/StatusIm.xcodeproj/project.pbxproj

@@ -417,7 +417,9 @@
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
+						DevelopmentTeam = 8B5X2M6H2Y;
 						LastSwiftMigration = 1140;
+						ProvisioningStyle = Manual;
 						SystemCapabilities = {
 							com.apple.BackgroundModes = {
 								enabled = 1;
@@ -841,8 +843,9 @@
 				BUNDLE_ID_SUFFIX = .debug;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusIm/StatusIm.entitlements;
-				CODE_SIGN_IDENTITY = "Apple Development";
-				CODE_SIGN_STYLE = Automatic;
+				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = "Status Debug";
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
@@ -895,7 +898,8 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum;
 				PRODUCT_NAME = StatusIm;
-				PROVISIONING_PROFILE_SPECIFIER = "";
+				PROVISIONING_PROFILE = "9da75626-9594-43d9-a827-0f6d43c28f54";
+				PROVISIONING_PROFILE_SPECIFIER = "match Development im.status.ethereum";
 				SWIFT_OBJC_BRIDGING_HEADER = "StatusIm-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -913,8 +917,9 @@
 				BUNDLE_ID_SUFFIX = "";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusIm/StatusIm.entitlements;
-				CODE_SIGN_IDENTITY = "Apple Development";
-				CODE_SIGN_STYLE = Automatic;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
+				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = Status;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
@@ -959,7 +964,8 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum;
 				PRODUCT_NAME = StatusIm;
-				PROVISIONING_PROFILE_SPECIFIER = "";
+				PROVISIONING_PROFILE = "e2202b12-7a66-4ff7-af3c-a52e35f32dc1";
+				PROVISIONING_PROFILE_SPECIFIER = "match AdHoc im.status.ethereum";
 				SWIFT_OBJC_BRIDGING_HEADER = "StatusIm-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = 1;

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

@@ -149,11 +149,15 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         this.getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("gethEvent", params);
     }
 
-    private File getLogsFile() {
+    private File getPublicStorageDirectory() {
         final Context context = this.getReactApplicationContext();
         // Environment.getExternalStoragePublicDirectory doesn't work as expected on Android Q
         // https://developer.android.com/reference/android/os/Environment#getExternalStoragePublicDirectory(java.lang.String)
-        final File pubDirectory = context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS);
+        return context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS);
+
+    }
+    private File getLogsFile() {
+        final File pubDirectory = this.getPublicStorageDirectory();
         final File logFile = new File(pubDirectory, gethLogFileName);
 
         return logFile;
@@ -1170,8 +1174,8 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
 
 
     @ReactMethod(isBlockingSynchronousMethod = true) 
-    public String logFilePath() {
-        return getLogsFile().getAbsolutePath();
+    public String logFileDirectory() {
+        return getPublicStorageDirectory().getAbsolutePath();
     }
 
     @ReactMethod(isBlockingSynchronousMethod = true)

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

@@ -882,7 +882,7 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(backupDisabledDataDir) {
     return rootUrl.path;
 }
 
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(logFilePath) {
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(logFileDirectory) {
     NSFileManager *fileManager = [NSFileManager defaultManager];
     NSURL *rootUrl =[[fileManager
                       URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask]

nix/deps/nodejs-patched/default.nix

@@ -12,6 +12,7 @@ stdenv.mkDerivation {
     "patchBuildIdPhase"
     "patchHermesPhase"
     "patchJavaPhase"
+    "patchYogaNodePackagePhase"
     "installPhase"
   ];
 
@@ -66,6 +67,14 @@ stdenv.mkDerivation {
   patchJavaPhase = ''
     ${nodejs}/bin/node ./node_modules/jetifier/bin/jetify
   '';
+  # Patch React Native Yoga.cpp file
+  # FIXME: Remove this once release newer than 1.19.0 is used which includes:
+  # https://github.com/facebook/yoga/commit/f174de70
+  patchYogaNodePackagePhase = ''
+    substituteInPlace ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp --replace \
+        'node->getLayout().hadOverflow() |' \
+        'node->getLayout().hadOverflow() ||'
+  '';
   installPhase = ''
     mkdir -p $out
     cp -R node_modules $out/

nix/overlay.nix

@@ -53,9 +53,9 @@ in {
     version = "13.3";
     allowHigher = true;
   };
-  go = super.go_1_18;
-  buildGoPackage = super.buildGo118Package;
-  buildGoModule = super.buildGo118Module;
+  go = super.go_1_19;
+  buildGoPackage = super.buildGo119Package;
+  buildGoModule = super.buildGo119Module;
   gomobile = (super.gomobile.overrideAttrs (old: {
     patches = self.fetchurl { # https://github.com/golang/mobile/pull/84
       url = "https://github.com/golang/mobile/commit/f20e966e05b8f7e06bed500fa0da81cf6ebca307.patch";

nix/pkgs.nix

@@ -11,10 +11,11 @@ let
   # We follow the master branch of official nixpkgs.
   nixpkgsSrc = fetchFromGitHub {
     name = "nixpkgs-source";
-    owner = "status-im"; # FIXME: Fork used to get Cocoapods 1.12.0.
+    # FIXME: Fork used to get Cocoapods 1.12.0 and apksigner macOS build.
+    owner = "status-im";
     repo = "nixpkgs";
-    rev = "b9b2ed705edc00003d47625950602136be3e1ed5";
-    sha256 = "sha256-F0qOawdKx7kgiGqwVikYIawL2taJ1XfcgHy0Wn0mho8=";
+    rev = "d0c06fa3d3982a91aa01bd63ed84020cbde3d3ab";
+    sha256 = "sha256-8blvuUHnuf0hFr/PpBxVohJp5CaGXIXhgJlFN/cv7us=";
     # To get the compressed Nix sha256, use:
     # nix-prefetch-url --unpack https://github.com/${ORG}/nixpkgs/archive/${REV}.tar.gz
   };

src/js/worklets/bottom_sheet.js

@@ -6,10 +6,10 @@ export function useTranslateY(initialTranslationY, bottomSheetDy, panY) {
   })
 }
 
-export function useBackgroundOpacity(translateY, backgroundHeight, windowHeight) {
+export function useBackgroundOpacity(translateY, backgroundHeight, windowHeight, opacity) {
   return useDerivedValue(() => {
-    const opacity = ((translateY.value - windowHeight) / -backgroundHeight) * 0.5
+    const calculatedOpacity = ((translateY.value - windowHeight) / -backgroundHeight) * opacity
 
-    return Math.max(Math.min(opacity, 0.5), 0)
+    return Math.max(Math.min(calculatedOpacity, opacity), 0)
   })
 }

src/js/worklets/onboarding_carousel.js

@@ -0,0 +1,47 @@
+import { useDerivedValue, withTiming, Easing } from 'react-native-reanimated';
+
+const slideAnimationDuration = 300;
+
+const easeOut = {
+  duration: slideAnimationDuration,
+  easing: Easing.bezier(0, 0, 0.58, 1),
+}
+
+// Derived Values
+export function dynamicProgressBarWidth(staticProgressBarWidth, progress) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return staticProgressBarWidth * (progress.value || 0) / 100;
+    }
+  );
+}
+
+export function carouselLeftPosition(windowWidth, progress) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      const progressValue = progress.value;
+      switch (true) {
+      case (progressValue < 25):
+	return 0;
+      case (progressValue === 25):
+	return withTiming(-windowWidth, easeOut);
+      case (progressValue < 50):
+	return -windowWidth;
+      case (progressValue === 50):
+	return withTiming(-2 * windowWidth, easeOut);
+      case (progressValue < 75):
+	return -2 * windowWidth;
+      case (progressValue === 75):
+	return withTiming(-3 * windowWidth, easeOut);
+      case (progressValue < 100):
+	return -3 * windowWidth;
+      case (progressValue === 100):
+	return withTiming(-4 * windowWidth, easeOut);
+      default:
+	return 0;
+      }
+    });
+}
+

src/mocks/js_dependencies.cljs

@@ -293,7 +293,10 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     :createNativeWrapper      identity
     :default                  #js {}})
 
-(def react-native-redash #js {:clamp nil})
+(def react-native-redash
+  #js
+   {:clamp     nil
+    :withPause (fn [])})
 
 (def react-native-languages
   (clj->js {:default {:language            "en"
@@ -370,6 +373,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "react-native-screens"                          (clj->js {})
     "react-native-reanimated"                       react-native-reanimated
     "react-native-redash/lib/module/v1"             react-native-redash
+    "react-native-redash"                           react-native-redash
     "react-native-fetch-polyfill"                   fetch
     "react-native-status-keycard"                   status-keycard
     "react-native-keychain"                         keychain
@@ -407,6 +411,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "../src/js/worklets/bottom_sheet.js"            #js {}
     "../src/js/worklets/record_audio.js"            #js {}
     "../src/js/worklets/scroll_view.js"             #js {}
+    "../src/js/worklets/onboarding_carousel.js"     #js {}
     "../src/js/worklets/lightbox.js"                #js {}
     "./fleets.js"                                   default-fleets
     "@walletconnect/client"                         wallet-connect-client

src/quo2/components/code/code/style.cljs

@@ -0,0 +1,87 @@
+(ns quo2.components.code.code.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
+    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
+    :line-number  colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  []
+  {:overflow         :hidden
+   :padding          8
+   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
+   :border-color     (border-color)
+   :border-width     1
+   :border-radius    16})
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             0
+   :width            (+ line-number-width 8 7)
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width]
+  {:margin-right 20 ; 8+12 margin
+   :width        width})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/snippet.cljs

@@ -1,175 +1,110 @@
 (ns quo2.components.code.snippet
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
-            [oops.core :as oops]
             [quo2.components.buttons.button :as button]
+            [quo2.components.code.code.style :as style]
             [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
-            [react-native.masked-view :as masked-view]
             [react-native.syntax-highlighter :as highlighter]
             [reagent.core :as reagent]))
 
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(def ^:private themes
-  {:light {:hljs-comment {:color colors/neutral-40}
-           :hljs-title   {:color (colors/custom-color :blue 50)}
-           :hljs-keyword {:color (colors/custom-color :green 50)}
-           :hljs-string  {:color (colors/custom-color :turquoise 50)}
-           :hljs-literal {:color (colors/custom-color :turquoise 50)}
-           :hljs-number  {:color (colors/custom-color :turquoise 50)}
-           :line-number  {:color colors/neutral-40}}
-   :dark  {:hljs-comment {:color colors/neutral-60}
-           :hljs-title   {:color (colors/custom-color :blue 60)}
-           :hljs-keyword {:color (colors/custom-color :green 60)}
-           :hljs-string  {:color (colors/custom-color :turquoise 60)}
-           :hljs-literal {:color (colors/custom-color :turquoise 60)}
-           :hljs-number  {:color (colors/custom-color :turquoise 60)}
-           :line-number  {:color colors/neutral-40}}})
-
-(defn- text-style
-  [class-names]
-  (->> class-names
-       (map keyword)
-       (reduce #(merge %1 (get-in themes [(theme/get-theme) %2]))
-               {:flex-shrink 1
-                ;; Round to a nearest whole number to achieve consistent
-                ;; spacing (also important for calculating `max-text-height`).
-                ;; Line height seems to be inconsistent between text being
-                ;; wrapped and text being rendered on a newline using Flexbox
-                ;; layout.
-                :line-height 18})))
-
 (defn- render-nodes
   [nodes]
-  (map (fn [{:keys [children value] :as node}]
-         ;; Node can have :children or a :value.
+  (map (fn [{:keys [children value last-line?] :as node}]
          (if children
            (into [text/text
-                  {:weight :code
-                   :size   :paragraph-2
-                   :style  (text-style (get-in node [:properties :className]))}]
+                  (cond-> {:weight :code
+                           :size   :paragraph-2
+                           :style  (style/text-style (get-in node [:properties :className]))}
+                    last-line? (assoc :number-of-lines 1))]
                  (render-nodes children))
            ;; Remove newlines as we already render each line separately.
-           (-> value string/trim-newline)))
+           (string/trim-newline value)))
        nodes))
 
+(defn- line
+  [{:keys [line-number line-number-width]} children]
+  [rn/view {:style style/line}
+   [rn/view {:style (style/line-number line-number-width)}
+    [text/text
+     {:style  (style/text-style ["line-number"])
+      :weight :code
+      :size   :paragraph-2}
+     line-number]]
+   children])
+
 (defn- code-block
   [{:keys [rows line-number-width]}]
-  [into [:<>]
+  [rn/view
    (->> rows
         (render-nodes)
-        ;; Line numbers
-        (map-indexed (fn [idx row]
-                       (conj [rn/view {:style {:flex-direction :row}}
-                              [rn/view
-                               {:style {:width        line-number-width
-                                        ;; 8+12 margin
-                                        :margin-right 20}}
-                               [text/text
-                                {:weight :code
-                                 :size   :paragraph-2
-                                 :style  (text-style ["line-number"])}
-                                (inc idx)]]]
-                             row))))])
+        (map-indexed (fn [idx row-content]
+                       [line
+                        {:line-number       (inc idx)
+                         :line-number-width line-number-width}
+                        row-content]))
+        (into [:<>]))])
+
+(defn- mask-view
+  [{:keys [apply-mask?]} child]
+  (if apply-mask?
+    [:<>
+     [rn/view {:style style/gradient-container}
+      [linear-gradient/linear-gradient
+       {:style  style/gradient
+        :colors [:transparent (style/gradient-color)]}
+       [rn/view {:style style/gradient}]]]
+     child]
+    child))
+
+(defn- calc-line-number-width
+  [font-scale rows-to-show]
+  (let [max-line-digits (-> rows-to-show str count)]
+    (if (= 1 max-line-digits)
+      18 ;; ~ 9 is char width, 18 is width used in Figma.
+      (* 9 max-line-digits font-scale))))
 
 (defn- native-renderer
-  []
-  (let [text-height (reagent/atom nil)]
-    (fn [{:keys [rows max-lines on-copy-press]}]
-      (let [background-color      (colors/theme-colors
-                                   colors/white
-                                   colors/neutral-80-opa-40)
-            background-color-left (colors/theme-colors
-                                   colors/neutral-5
-                                   colors/neutral-80)
-            border-color          (colors/theme-colors
-                                   colors/neutral-20
-                                   colors/neutral-80)
-            rows                  (bean/->clj rows)
-            font-scale            (:font-scale (rn/use-window-dimensions))
-            max-rows              (or max-lines (count rows)) ;; Cut down on rows to process.
-            max-line-digits       (-> rows count (min max-rows) str count)
-            ;; ~ 9 is char width, 18 is width used in Figma.
-            line-number-width     (* font-scale (max 18 (* 9 max-line-digits)))
-            max-text-height       (some-> max-lines
-                                          (* font-scale 18)) ;; 18 is font's line height.
-            truncated?            (and max-text-height (< max-text-height @text-height))
-            maybe-mask-wrapper    (if truncated?
-                                    [masked-view/masked-view
-                                     {:mask-element
-                                      (reagent/as-element
-                                       [linear-gradient/linear-gradient
-                                        {:colors    ["black" "transparent"]
-                                         :locations [0.75 1]
-                                         :style     {:flex 1}}])}]
-                                    [:<>])]
-
-        [rn/view
-         {:style {:overflow         :hidden
-                  :padding          8
-                  :background-color background-color
-                  :border-color     border-color
-                  :border-width     1
-                  :border-radius    8
-                  ;; Hide on intial render to avoid flicker when mask-wrapper is shown.
-                  :opacity          (if @text-height 1 0)}}
-         ;; Line number container
-         [rn/view
-          {:style {:position           :absolute
-                   :bottom             0
-                   :top                0
-                   :left               0
-                   :width              (+ line-number-width 8 8)
-                   :background-color   background-color-left
-                   :border-right-color border-color
-                   :border-right-width 1}}]
-         (conj maybe-mask-wrapper
-               [rn/view {:max-height max-text-height}
-                [rn/view
-                 {:on-layout (fn [evt]
-                               (let [height (oops/oget evt "nativeEvent.layout.height")]
-                                 (reset! text-height height)))}
-                 [code-block
-                  {:rows              (take max-rows rows)
-                   :line-number-width line-number-width}]]])
-
-         ;; Copy button
-         [rn/view
-          {:style {:position :absolute
-                   :bottom   8
-                   :right    8}}
-          [button/button
-           {:icon     true
-            :type     :grey
-            :size     24
-            :on-press on-copy-press}
-           :main-icons/copy]]]))))
-
-(defn- wrap-renderer-fn
-  [f {:keys [max-lines on-copy-press]}]
-  (fn [^js props]
-    (reagent/as-element [:f> f
-                         {:rows          (.-rows props)
-                          :max-lines     max-lines
-                          :on-copy-press on-copy-press}])))
+  [{:keys [rows max-lines on-copy-press]
+    :or   {max-lines ##Inf}}]
+  (let [font-scale          (:font-scale (rn/use-window-dimensions))
+        total-rows          (count rows)
+        number-rows-to-show (min (count rows) max-lines)
+        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+        truncated?          (< number-rows-to-show total-rows)
+        rows-to-show-coll   (if truncated?
+                              (as-> rows $
+                                (update $ number-rows-to-show assoc :last-line? true)
+                                (take (inc number-rows-to-show) $))
+                              rows)]
+    [rn/view {:style (style/container)}
+     [rn/view {:style (style/line-number-container line-number-width)}]
+     [rn/view {:style (style/divider line-number-width)}]
+     [mask-view {:apply-mask? truncated?}
+      [code-block
+       {:rows              rows-to-show-coll
+        :line-number-width line-number-width}]]
+     [rn/view {:style style/copy-button}
+      [button/button
+       {:icon                      true
+        :type                      :grey
+        :size                      24
+        :on-press                  on-copy-press
+        :override-background-color (style/button-background-color)}
+       :main-icons/copy]]]))
 
 (defn snippet
   [{:keys [language max-lines on-copy-press]} children]
   [highlighter/highlighter
    {:language          language
-    :renderer          (wrap-renderer-fn
-                        native-renderer
-                        {:max-lines     max-lines
-                         :on-copy-press #(when on-copy-press
-                                           (on-copy-press children))})
-    ;; Default props to adapt Highlighter for react-native.
-    ;;:CodeTag           react-native/View
-    ;;:PreTag            react-native/View
+    :renderer          (fn [^js/Object props]
+                         (reagent/as-element
+                          [:f> native-renderer
+                           {:rows          (-> props .-rows bean/->clj)
+                            :on-copy-press #(when on-copy-press (on-copy-press children))
+                            :max-lines     max-lines}]))
     :show-line-numbers false
-    :style             #js {}
-    :custom-style      #js {:backgroundColor nil}}
+    :style             {}
+    :custom-style      {:background-color nil}}
    children])

src/quo2/components/common/unread_grey_dot/view.cljs

@@ -3,6 +3,7 @@
             [quo2.components.common.unread-grey-dot.style :as style]))
 
 (defn unread-grey-dot
-  []
+  [accessibility-label]
   [rn/view
-   {:style style/unread-grey-dot}])
+   (cond-> {:style style/unread-grey-dot}
+     accessibility-label (assoc :accessibility-label accessibility-label :accessible true))])

src/quo2/components/community/community_card_view.cljs

@@ -16,15 +16,13 @@
                  :height        230
                  :border-radius 20}
       :on-press on-press}
-     [rn/view
-      {:flex 1}
+     [rn/view {:style style/detail-container}
       [rn/view (style/community-cover-container 60)
        [rn/image
         {:source cover
-         :style
-         {:flex                    1
-          :border-top-right-radius 20
-          :border-top-left-radius  20}}]]
+         :style  {:flex                    1
+                  :border-top-right-radius 20
+                  :border-top-left-radius  20}}]]
       [rn/view (style/card-view-content-container 12)
        [rn/view (style/card-view-chat-icon 48)
         [icon/community-icon {:images images} 48]]
@@ -38,7 +36,7 @@
         {:title       name
          :description description}]
        [rn/view {:style (style/card-stats-position)}
-        [community-view/community-stats-column :card-view]]
+        [community-view/community-stats-column
+         {:type :card-view}]]
        [rn/view {:style (style/community-tags-position)}
         [community-view/community-tags tags]]]]]]])
-

src/quo2/components/community/community_list_view.cljs

@@ -27,7 +27,7 @@
     [counter/counter {:type :default} unread-mentions-count]
 
     unread-messages?
-    [unread-grey-dot]))
+    [unread-grey-dot :unviewed-messages-public]))
 
 (defn communities-list-view-item
   [props
@@ -46,7 +46,7 @@
     (merge {:style {:height        56
                     :border-radius 16}}
            props)
-    [rn/view {:flex 1}
+    [rn/view {:style style/detail-container}
      [rn/view (style/list-info-container)
       [community-icon/community-icon
        {:images community-icon} 32]
@@ -64,7 +64,8 @@
                                          colors/neutral-40
                                          colors/neutral-60))}}
         name]
-       [community-view/community-stats-column :list-view]]
+       [community-view/community-stats-column
+        {:type :list-view}]]
       (if (= status :gated)
         [community-view/permission-tag-container
          {:locked? locked?

src/quo2/components/community/community_view.cljs

@@ -5,6 +5,7 @@
             [quo2.components.tags.permission-tag :as permission]
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
+            [quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
             [react-native.core :as rn]))
 
 (defn community-stats
@@ -23,7 +24,7 @@
     members-count]])
 
 (defn community-stats-column
-  [type]
+  [{:keys [type]}]
   (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
     [rn/view
      (if (= type :card-view)
@@ -41,7 +42,9 @@
 
 (defn community-tags
   [tags]
-  [rn/view (style/community-tags-container)
+  [gesture-handler/scroll-view
+   {:shows-horizontal-scroll-indicator false
+    :horizontal                        true}
    (for [{:keys [name emoji]} tags]
      ^{:key name}
      [rn/view {:margin-right 8}

src/quo2/components/community/style.cljs

@@ -22,6 +22,9 @@
                       colors/white
                       colors/neutral-90)})
 
+(def detail-container
+  {:flex 1})
+
 (defn stats-count-container
   []
   {:flex-direction :row
@@ -37,10 +40,6 @@
   {:flex-direction :row
    :align-items    :center})
 
-(defn community-tags-container
-  []
-  {:flex-direction :row})
-
 (defn card-stats-position
   []
   {:position :absolute
@@ -62,7 +61,7 @@
    :bottom                  0
    :left                    0
    :right                   0
-   :height                  20
+   :border-radius           20
    :padding-horizontal      padding-horizontal
    :border-top-right-radius 16
    :border-top-left-radius  16

src/quo2/components/drawers/drawer_buttons/style.cljs

@@ -1,7 +1,10 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
 
-(def outer-container {:height 216})
+(def outer-container
+  {:height        216
+   :border-radius 20})
 
 (def top-card
   {:flex                    1
@@ -9,7 +12,9 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        colors/neutral-80})
+   :background-color        (if platform/ios?
+                              colors/neutral-80-opa-80-blur
+                              colors/neutral-80)})
 
 (def bottom-card
   {:position                :absolute
@@ -21,7 +26,7 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        (colors/alpha colors/white 0.05)})
+   :background-color        colors/white-opa-5})
 
 (def bottom-container
   {:flex-direction  :row
@@ -35,14 +40,14 @@
    :width           28
    :justify-content :center
    :align-items     :center
-   :border-color    (colors/alpha colors/white 0.05)})
+   :border-color    colors/white-opa-5})
 
 (def bottom-text
   {:flex  1
-   :color (colors/alpha colors/white 0.7)})
+   :color colors/white-70-blur})
 
 (def top-text
-  {:color (colors/alpha colors/white 0.7)})
+  {:color colors/white-70-blur})
 
 (defn heading-text
   [gap]

src/quo2/components/drawers/drawer_buttons/view.cljs

@@ -3,6 +3,7 @@
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
+            [react-native.blur :as blur]
             [quo2.components.drawers.drawer-buttons.style :as style]))
 
 (defn render-bottom
@@ -70,7 +71,7 @@
     child-2           string, keyword or hiccup
    "
   [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [rn/view
+  [blur/ios-view
    {:style (merge container-style style/outer-container)}
    [card
     (merge {:gap   4

src/quo2/components/inputs/profile_input/view.cljs

@@ -6,6 +6,7 @@
     [quo2.components.inputs.title-input.view :as title-input]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [react-native.platform :as platform]
     [react-native.hole-view :as hole-view]))
 
 (defn profile-input
@@ -18,20 +19,29 @@
     [rn/view
      {:style (style/container customization-color)}
      [rn/view
-      [hole-view/hole-view
-       {:holes [{:x            33
-                 :y            23
-                 :width        24
-                 :height       24
-                 :borderRadius 12}]}
-       [user-avatar/user-avatar
-        (assoc image-picker-props
-               :customization-color customization-color
-               :full-name           (if (seq full-name)
-                                      full-name
-                                      placeholder)
-               :status-indicator?   false
-               :size                :medium)]]
+      (if platform/ios?
+        [hole-view/hole-view
+         {:holes [{:x            33
+                   :y            23
+                   :width        24
+                   :height       24
+                   :borderRadius 12}]}
+         [user-avatar/user-avatar
+          (assoc image-picker-props
+                 :customization-color customization-color
+                 :full-name           (if (seq full-name)
+                                        full-name
+                                        placeholder)
+                 :status-indicator?   false
+                 :size                :medium)]]
+        [user-avatar/user-avatar
+         (assoc image-picker-props
+                :customization-color customization-color
+                :full-name           (if (seq full-name)
+                                       full-name
+                                       placeholder)
+                :status-indicator?   false
+                :size                :medium)])
       [buttons/button
        {:accessibility-label       :select-profile-picture-button
         :type                      :grey
@@ -47,6 +57,7 @@
      [rn/view {:style style/input-container}
       [title-input/title-input
        (merge title-input-props
-              {:override-theme      :dark
+              {:blur?               true
+               :override-theme      :dark
                :placeholder         placeholder
                :customization-color customization-color})]]]))

src/quo2/components/inputs/title_input/style.cljs

@@ -2,34 +2,35 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn get-focused-placeholder-color
-  [blur?]
+  [blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2))
-    (colors/theme-colors colors/neutral-30 colors/neutral-60)))
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme))
+)
 
 (defn get-placeholder-color
-  [blur?]
+  [blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
 
 (defn- get-disabled-color
-  [blur?]
+  [blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30)
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
 
 (defn- get-char-count-color
-  [blur?]
+  [blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
 
 (defn get-selection-color
-  [customization-color blur?]
+  [customization-color blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-100 colors/white)
-    (colors/custom-color customization-color (if colors/dark? 60 50))))
+    (colors/theme-colors colors/neutral-100 colors/white override-theme)
+    (colors/custom-color customization-color (if (or (= :dark override-theme) colors/dark?) 60 50))))
 
 (def text-input-container {:flex 1})
 
@@ -37,12 +38,12 @@
   [disabled? blur? override-theme]
   {:text-align-vertical :bottom
    :color               (if disabled?
-                          (get-disabled-color blur?)
+                          (get-disabled-color blur? override-theme)
                           (colors/theme-colors colors/neutral-100 colors/white override-theme))})
 
 (defn char-count
-  [blur?]
-  {:color (get-char-count-color blur?)})
+  [blur? override-theme]
+  {:color (get-char-count-color blur? override-theme)})
 
 (def container
   {:flex-direction  :row

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

@@ -45,21 +45,21 @@
           :editable (not disabled?)
           :max-length max-length
           :placeholder placeholder
-          :selection-color (style/get-selection-color customization-color blur?)
+          :selection-color (style/get-selection-color customization-color blur? override-theme)
           :placeholder-text-color (if @focused?
-                                    (style/get-focused-placeholder-color blur?)
-                                    (style/get-placeholder-color blur?))}]]
+                                    (style/get-focused-placeholder-color blur? override-theme)
+                                    (style/get-placeholder-color blur? override-theme))}]]
        [rn/view
         {:style style/counter-container}
         [text/text
          [text/text
-          {:style (style/char-count blur?)
+          {:style (style/char-count blur? override-theme)
            :size  :paragraph-2}
           (pad-0
            (str
             (count @value)))]
          [text/text
-          {:style (style/char-count blur?)
+          {:style (style/char-count blur? override-theme)
            :size  :paragraph-2}
           (str "/"
                (pad-0

src/quo2/components/links/url_preview/component_spec.cljs

@@ -0,0 +1,29 @@
+(ns quo2.components.links.url-preview.component-spec
+  (:require
+    [quo2.components.links.url-preview.view :as view]
+    [test-helpers.component :as h]))
+
+(h/describe "Links - URL Preview"
+  (h/test "default render"
+    (h/render [view/view])
+    (h/is-truthy (h/query-by-label-text :title))
+    (h/is-truthy (h/query-by-label-text :logo))
+    (h/is-truthy (h/query-by-label-text :button-clear-preview))
+    (h/is-null (h/query-by-label-text :url-preview-loading)))
+
+  (h/test "on-clear event"
+    (let [on-clear (h/mock-fn)]
+      (h/render [view/view {:on-clear on-clear}])
+      (h/fire-event :press (h/get-by-label-text :button-clear-preview))
+      (h/was-called on-clear)))
+
+  (h/describe "loading state"
+    (h/test "shows a loading container"
+      (h/render [view/view {:loading? true :loading-message "Hello"}])
+      (h/is-null (h/query-by-label-text :title))
+      (h/is-truthy (h/query-by-label-text :url-preview-loading)))
+
+    (h/test "renders if `loading-message` is not passed"
+      (h/render [view/view {:loading? true}])
+      (h/is-null (h/query-by-label-text :title))
+      (h/is-truthy (h/query-by-label-text :url-preview-loading)))))

src/quo2/components/links/url_preview/style.cljs

@@ -0,0 +1,58 @@
+(ns quo2.components.links.url-preview.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def horizontal-padding 12)
+
+(defn container
+  []
+  {:height             56
+   :background-color   (colors/theme-colors colors/neutral-5 colors/neutral-90)
+   :padding-vertical   10
+   :padding-horizontal horizontal-padding
+   :border-radius      12
+   :align-self         :stretch
+   :flex-direction     :row})
+
+(defn loading-container
+  []
+  {:height          56
+   :border-width    1
+   :border-radius   12
+   :border-style    :dashed
+   :align-items     :center
+   :justify-content :center
+   :align-self      :stretch
+   :padding         horizontal-padding
+   :border-color    (colors/theme-colors colors/neutral-30 colors/neutral-80)})
+
+(defn loading-message
+  []
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})
+
+(def logo
+  {:width         16
+   :height        16
+   :top           1
+   :border-radius 8})
+
+(def content-container
+  {:margin-left 6
+   :flex        1})
+
+(defn title
+  []
+  {:color (colors/theme-colors colors/neutral-100 colors/white)})
+
+(defn body
+  []
+  {:text-transform :lowercase
+   :color          (colors/theme-colors colors/neutral-50 colors/neutral-40)})
+
+(def clear-button
+  {:border-color colors/danger-50
+   :border-width 1})
+
+(def clear-button-container
+  {:width       20
+   :height      20
+   :margin-left 6})

src/quo2/components/links/url_preview/view.cljs

@@ -0,0 +1,63 @@
+(ns quo2.components.links.url-preview.view
+  (:require
+    [quo2.components.icon :as icon]
+    [quo2.components.links.url-preview.style :as style]
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]))
+
+(defn- logo-component
+  [{:keys [logo]}]
+  [rn/image
+   {:accessibility-label :logo
+    :source              logo
+    :style               style/logo}])
+
+(defn- content
+  [{:keys [title body]}]
+  [rn/view {:style style/content-container}
+   [text/text
+    {:accessibility-label :title
+     :size                :paragraph-2
+     :weight              :semi-bold
+     :number-of-lines     1
+     :style               (style/title)}
+    title]
+   [text/text
+    {:accessibility-label :body
+     :size                :paragraph-2
+     :weight              :medium
+     :number-of-lines     1
+     :style               (style/body)}
+    body]])
+
+(defn- clear-button
+  [{:keys [on-press]}]
+  [rn/touchable-opacity
+   {:on-press            on-press
+    :style               style/clear-button-container
+    :hit-slop            {:top 3 :right 3 :bottom 3 :left 3}
+    :accessibility-label :button-clear-preview}
+   [icon/icon :i/clear
+    {:size            20
+     :container-style style/clear-button
+     :color           (colors/theme-colors colors/neutral-50 colors/neutral-60)}]])
+
+(defn view
+  [{:keys [title body logo on-clear loading? loading-message container-style]}]
+  (if loading?
+    [rn/view
+     {:accessibility-label :url-preview-loading
+      :style               (merge (style/loading-container) container-style)}
+     [rn/text
+      {:size            :paragraph-2
+       :weight          :medium
+       :number-of-lines 1
+       :style           (style/loading-message)}
+      loading-message]]
+    [rn/view
+     {:accessibility-label :url-preview
+      :style               (merge (style/container) container-style)}
+     [logo-component {:logo logo}]
+     [content {:title title :body body}]
+     [clear-button {:on-press on-clear}]]))

src/quo2/components/list_items/channel.cljs

@@ -62,4 +62,4 @@
                 (not muted?)
                 (not (pos? (int mentions-count)))
                 unread-messages?)
-       [unread-grey-dot])]]])
+       [unread-grey-dot :unviewed-messages-public])]]])

src/quo2/components/navigation/page_nav.cljs

@@ -203,8 +203,8 @@
       }
    }
   "
-  [{:keys [one-icon-align-left? horizontal-description? align-mid?
-           page-nav-color page-nav-background-uri
+  [{:keys [container-style one-icon-align-left? horizontal-description?
+           align-mid? page-nav-color page-nav-background-uri
            mid-section
            left-section
            right-section-buttons]}]
@@ -222,13 +222,14 @@
          :left-icon               (:left-icon mid-section)
          :avatar                  (:avatar mid-section)}]
     [rn/view
-     {:style (cond-> {:display            :flex
-                      :flex-direction     :row
-                      ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
-                      :align-items        :center
-                      :padding-horizontal 20
-                      :height             56
-                      :justify-content    :space-between}
+     {:style (cond-> (merge {:display            :flex
+                             :flex-direction     :row
+                             ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
+                             :align-items        :center
+                             :padding-horizontal 20
+                             :height             56
+                             :justify-content    :space-between}
+                            container-style)
                page-nav-background-uri (assoc :background-color page-nav-color)
                page-nav-color          (assoc :background page-nav-background-uri))}
      [rn/view

src/quo2/components/tags/status_tags.cljs

@@ -11,12 +11,14 @@
 
 (def small-container-style
   (merge default-container-style
-         {:padding-horizontal 8
+         {:min-height         24
+          :padding-horizontal 8
           :padding-vertical   1}))
 
 (def large-container-style
   (merge default-container-style
-         {:padding-horizontal 11
+         {:min-height         32
+          :padding-horizontal 11
           :padding-vertical   4}))
 
 (defn base-tag
@@ -36,6 +38,7 @@
         :style               (assoc (if (= size :small)
                                       small-container-style
                                       large-container-style)
+                                    :align-self       :flex-start
                                     :border-width     1
                                     :border-color     border-color
                                     :background-color background-color)}
@@ -45,10 +48,11 @@
         [rn/view
          {:style {:justify-content :center
                   :align-items     :center}}
-         [icon/icon
-          icon
-          {:no-color true
-           :size     (if (= size :large) 20 12)}]]
+         (when icon
+           [icon/icon
+            icon
+            {:no-color true
+             :size     (if (= size :large) 20 12)}])]
         [text/text
          {:size   paragraph-size
           :weight :medium
@@ -56,11 +60,11 @@
                    :color        text-color}} label]]])))
 
 (defn- positive
-  [size theme label _]
+  [size theme label _ no-icon?]
   [base-tag
    {:accessibility-label :status-tag-positive
     :size                size
-    :icon                :i/positive-state
+    :icon                (when-not no-icon? :i/positive-state)
     :background-color    colors/success-50-opa-10
     :border-color        colors/success-50-opa-20
     :label               label
@@ -68,11 +72,11 @@
     :text-color          (if (= theme :dark) colors/success-60 colors/success-50)}])
 
 (defn- negative
-  [size theme label _]
+  [size theme label _ no-icon?]
   [base-tag
    {:accessibility-label :status-tag-negative
     :size                size
-    :icon                :i/negative-state
+    :icon                (when-not no-icon? :i/negative-state)
     :background-color    colors/danger-50-opa-10
     :border-color        colors/danger-50-opa-20
     :label               label
@@ -80,14 +84,15 @@
     :text-color          (if (= theme :light) colors/danger-50 colors/danger-60)}])
 
 (defn- pending
-  [size theme label blur?]
+  [size theme label blur? no-icon?]
   [base-tag
    {:accessibility-label :status-tag-pending
     :size                size
     :label               label
-    :icon                (if blur?
-                           :i/pending-dark-blur
-                           (if (= theme :light) :i/pending-light :i/pending-dark))
+    :icon                (when-not no-icon?
+                           (if blur?
+                             :i/pending-dark-blur
+                             (if (= theme :light) :i/pending-light :i/pending-dark)))
     :background-color    (if blur?
                            colors/white-opa-5
                            (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))
@@ -100,7 +105,7 @@
                            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])
 
 (defn status-tag
-  [{:keys [status size override-theme label blur?]}]
+  [{:keys [status size override-theme label blur? no-icon?]}]
   (when status
     (when-let [status-component (case (:type status)
                                   :positive positive
@@ -111,4 +116,5 @@
        size
        (or override-theme (quo2.theme/get-theme))
        label
-       blur?])))
+       blur?
+       no-icon?])))

src/quo2/core.cljs

@@ -33,6 +33,7 @@
     quo2.components.inputs.input.view
     quo2.components.inputs.title-input.view
     quo2.components.inputs.profile-input.view
+    quo2.components.links.url-preview.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
@@ -182,3 +183,6 @@
 (def permission-tag quo2.components.tags.permission-tag/tag)
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def token-tag quo2.components.tags.token-tag/tag)
+
+;;;; LINKS
+(def url-preview quo2.components.links.url-preview.view/view)

src/quo2/core_spec.cljs

@@ -1,24 +1,26 @@
 (ns quo2.core-spec
-  (:require [quo2.components.avatars.user-avatar.component-spec]
-            [quo2.components.banners.banner.component-spec]
-            [quo2.components.buttons.--tests--.buttons-component-spec]
-            [quo2.components.colors.color-picker.component-spec]
-            [quo2.components.counter.--tests--.counter-component-spec]
-            [quo2.components.dividers.--tests--.divider-label-component-spec]
-            [quo2.components.dividers.strength-divider.component-spec]
-            [quo2.components.drawers.action-drawers.component-spec]
-            [quo2.components.drawers.drawer-buttons.component-spec]
-            [quo2.components.drawers.permission-context.component-spec]
-            [quo2.components.inputs.input.component-spec]
-            [quo2.components.inputs.profile-input.component-spec]
-            [quo2.components.inputs.title-input.component-spec]
-            [quo2.components.markdown.--tests--.text-component-spec]
-            [quo2.components.onboarding.small-option-card.component-spec]
-            [quo2.components.password.tips.component-spec]
-            [quo2.components.profile.select-profile.component-spec]
-            [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
-            [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
-            [quo2.components.selectors.--tests--.selectors-component-spec]
-            [quo2.components.selectors.disclaimer.component-spec]
-            [quo2.components.selectors.filter.component-spec]
-            [quo2.components.tags.--tests--.status-tags-component-spec]))
+  (:require
+    [quo2.components.avatars.user-avatar.component-spec]
+    [quo2.components.banners.banner.component-spec]
+    [quo2.components.buttons.--tests--.buttons-component-spec]
+    [quo2.components.colors.color-picker.component-spec]
+    [quo2.components.counter.--tests--.counter-component-spec]
+    [quo2.components.dividers.--tests--.divider-label-component-spec]
+    [quo2.components.dividers.strength-divider.component-spec]
+    [quo2.components.drawers.action-drawers.component-spec]
+    [quo2.components.drawers.drawer-buttons.component-spec]
+    [quo2.components.drawers.permission-context.component-spec]
+    [quo2.components.inputs.input.component-spec]
+    [quo2.components.inputs.profile-input.component-spec]
+    [quo2.components.inputs.title-input.component-spec]
+    [quo2.components.links.url-preview.component-spec]
+    [quo2.components.markdown.--tests--.text-component-spec]
+    [quo2.components.onboarding.small-option-card.component-spec]
+    [quo2.components.password.tips.component-spec]
+    [quo2.components.profile.select-profile.component-spec]
+    [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
+    [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
+    [quo2.components.selectors.--tests--.selectors-component-spec]
+    [quo2.components.selectors.disclaimer.component-spec]
+    [quo2.components.selectors.filter.component-spec]
+    [quo2.components.tags.--tests--.status-tags-component-spec]))

src/quo2/foundations/colors.cljs

@@ -117,6 +117,7 @@
 
 ;;;;Blur
 (def white-70-blur (alpha white 0.7))
+(def neutral-80-opa-1-blur (alpha "#192438" 0.1))
 (def neutral-5-opa-70-blur (alpha neutral-5 0.7))
 (def neutral-80-opa-80-blur (alpha "#192438" 0.8))
 (def neutral-90-opa-70-blur (alpha neutral-90 0.7))
@@ -127,6 +128,7 @@
 
 ;;Solid
 (def black "#000000")
+(def onboarding-header-black "#000716")
 
 ;;;;Primary
 

src/react_native/blur.cljs

@@ -1,5 +1,10 @@
 (ns react-native.blur
   (:require ["@react-native-community/blur" :as blur]
-            [reagent.core :as reagent]))
+            [react-native.platform :as platform]
+            [reagent.core :as reagent]
+            [react-native.core :as rn]))
 
 (def view (reagent/adapt-react-class (.-BlurView blur)))
+
+;; blur view is currently not working correctly on Android.
+(def ios-view (if platform/ios? view rn/view))

src/react_native/gesture.cljs

@@ -6,7 +6,8 @@
               Swipeable
               TouchableWithoutFeedback
               gestureHandlerRootHOC
-              FlatList)]
+              FlatList
+              ScrollView)]
             [react-native.flat-list :as rn-flat-list]
             [reagent.core :as reagent]))
 
@@ -69,6 +70,9 @@
         children))
 
 (def gesture-flat-list (reagent/adapt-react-class FlatList))
+
 (defn flat-list
   [props]
   [gesture-flat-list (rn-flat-list/base-list-props props)])
+
+(def scroll-view (reagent/adapt-react-class ScrollView))

src/react_native/reanimated.cljs

@@ -9,16 +9,18 @@
                              withDelay
                              withSpring
                              withRepeat
+                             withSequence
                              withDecay
                              Easing
                              Keyframe
                              cancelAnimation
                              SlideInUp
                              SlideOutUp
-                             LinearTransition)]
+                             LinearTransition
+                             runOnJS)]
             [reagent.core :as reagent]
+            ["react-native-redash" :refer (withPause)]
             [react-native.flat-list :as rn-flat-list]
-            [utils.collection]
             [utils.worklets.core :as worklets.core]))
 
 (def ^:const default-duration 300)
@@ -59,8 +61,12 @@
 (def with-decay withDecay)
 (def key-frame Keyframe)
 (def with-repeat withRepeat)
+(def with-sequence withSequence)
+(def with-pause withPause)
 (def cancel-animation cancelAnimation)
 
+(def run-on-js runOnJS)
+
 ;; Easings
 (def bezier (.-bezier ^js Easing))
 

src/react_native/syntax_highlighter.cljs

@@ -1,5 +1,11 @@
 (ns react-native.syntax-highlighter
-  (:require ["react-syntax-highlighter" :default Highlighter]
-            [reagent.core :as reagent]))
+  (:require ["react-native" :as react-native]
+            ["react-syntax-highlighter" :default Highlighter]))
 
-(def highlighter (reagent/adapt-react-class Highlighter))
+
+(defn highlighter
+  [props code-string]
+  [:> Highlighter
+   ;; Default props to adapt Highlighter for react-native.
+   (assoc props :Code-tag react-native/View :Pre-tag react-native/View)
+   code-string])

src/status_im/add_new/core.cljs

@@ -83,7 +83,7 @@
       (if new-contact?
         (rf/merge cofx
                   (contact/add-contact chat-key nickname ens-name)
-                  (navigation/navigate-to-cofx :contacts-list {}))
+                  (navigation/navigate-to :contacts-list {}))
         (chat/start-chat cofx chat-key ens-name))
       {:utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
                           :content    (case validation-result

src/status_im/bottom_sheet/events.cljs

@@ -0,0 +1,30 @@
+(ns status-im.bottom-sheet.events
+  (:require [utils.re-frame :as rf]))
+
+(rf/defn show-bottom-sheet-old
+  [{:keys [db]} {:keys [view options]}]
+  {:dismiss-keyboard              nil
+   :show-bottom-sheet-overlay-old nil
+   :db                            (assoc db
+                                         :bottom-sheet/show?   true
+                                         :bottom-sheet/view    view
+                                         :bottom-sheet/options options)})
+
+(rf/defn show-bottom-sheet-event
+  {:events [:bottom-sheet/show-sheet-old]}
+  [cofx view options]
+  (show-bottom-sheet-old
+   cofx
+   {:view    view
+    :options options}))
+
+(rf/defn hide-bottom-sheet-old
+  {:events [:bottom-sheet/hide-old]}
+  [{:keys [db]}]
+  {:db                               (assoc db :bottom-sheet/show? false)
+   :dismiss-bottom-sheet-overlay-old nil})
+
+(rf/defn hide-bottom-sheet-navigation-overlay
+  {:events [:bottom-sheet/hide-old-navigation-overlay]}
+  [{}]
+  {:dismiss-bottom-sheet-overlay-old nil})

src/status_im/bottom_sheet/sheets.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.common.bottom-sheet.sheets
+(ns status-im.bottom-sheet.sheets
   (:require [utils.re-frame :as rf]
             [status-im.ui.screens.about-app.views :as about-app]
             [status-im.ui.screens.home.sheet.views :as home.sheet]
@@ -6,16 +6,15 @@
             [status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
             [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
             [status-im.ui.screens.multiaccounts.recover.views :as recover.views]
-            [status-im2.common.bottom-sheet.view :as bottom-sheet]
-            [status-im2.contexts.chat.messages.pin.list.view :as pin.list]
+            [status-im.bottom-sheet.view :as bottom-sheet]
             [react-native.core :as rn]))
 
 (defn bottom-sheet
   []
   (let [dismiss-bottom-sheet-callback (fn []
-                                        (rf/dispatch [:bottom-sheet/hide])
+                                        (rf/dispatch [:bottom-sheet/hide-old])
                                         true)
-        {:keys [show? view options]} (rf/sub [:bottom-sheet])
+        {:keys [show? view options]} (rf/sub [:bottom-sheet-old])
         {:keys [content]
          :as   opts}
         (cond-> {:visible? show?}
@@ -31,12 +30,6 @@
           (= view :add-new)
           (merge home.sheet/add-new)
 
-          (= view :new-chat-bottom-sheet)
-          (merge home.sheet/new-chat-bottom-sheet-comp)
-
-          (= view :start-a-new-chat)
-          (merge home.sheet/start-a-new-chat)
-
           (= view :keycard.login/more)
           (merge keycard/more-sheet)
 
@@ -47,10 +40,8 @@
           (merge recover.views/bottom-sheet)
 
           (= view :migrate-account-password)
-          (merge key-storage/migrate-account-password)
+          (merge key-storage/migrate-account-password))]
 
-          (= view :pinned-messages-list)
-          (merge {:content pin.list/pinned-messages-list}))]
     [:f>
      (fn []
        (rn/use-effect (fn []

src/status_im/bottom_sheet/styles.cljs

@@ -0,0 +1,56 @@
+(ns status-im.bottom-sheet.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(def border-radius 20)
+
+(defn handle
+  [override-theme]
+  {:position         :absolute
+   :top              8
+   :width            32
+   :height           4
+   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
+   :opacity          0.1
+   :border-radius    100
+   :align-self       :center})
+
+(def backdrop
+  {:position         :absolute
+   :left             0
+   :right            0
+   :bottom           0
+   :top              0
+   :background-color colors/neutral-100})
+
+(def container
+  {:position :absolute
+   :left     0
+   :right    0
+   :top      0
+   :bottom   0
+   :overflow :hidden})
+
+(defn content-style
+  [insets bottom-safe-area-spacing?]
+  {:position       :absolute
+   :left           0
+   :right          0
+   :top            0
+   :padding-top    border-radius
+   :padding-bottom (if bottom-safe-area-spacing? (:bottom insets) 0)})
+
+(defn selected-background
+  [override-theme]
+  {:border-radius     12
+   :padding-left      12
+   :margin-horizontal 8
+   :margin-bottom     10
+   :height            48
+   :background-color  (colors/theme-colors colors/white colors/neutral-90 override-theme)})
+
+(defn background
+  [override-theme]
+  {:background-color        (colors/theme-colors colors/white colors/neutral-95 override-theme)
+   :flex                    1
+   :border-top-left-radius  border-radius
+   :border-top-right-radius border-radius})

src/status_im/bottom_sheet/view.cljs

@@ -0,0 +1,240 @@
+(ns status-im.bottom-sheet.view
+  (:require [oops.core :refer [oget]]
+            [quo.react :as react]
+            [status-im.bottom-sheet.styles :as styles]
+            [re-frame.core :as re-frame]
+            [react-native.background-timer :as timer]
+            [react-native.core :as rn]
+            [react-native.gesture :as gesture]
+            [react-native.hooks :as hooks]
+            [react-native.platform :as platform]
+            [react-native.reanimated :as reanimated]
+            [react-native.safe-area :as safe-area]
+            [reagent.core :as reagent]
+            [utils.worklets.bottom-sheet :as worklets.bottom-sheet]))
+
+(def animation-delay 450)
+
+(defn with-animation
+  [value & [options callback]]
+  (reanimated/with-spring
+   value
+   (clj->js (merge {:mass      2
+                    :stiffness 500
+                    :damping   200})
+            options)
+   callback))
+
+(defn get-bottom-sheet-gesture
+  [pan-y translate-y bg-height bg-height-expanded
+   window-height keyboard-shown disable-drag? expandable?
+   show-bottom-sheet? expanded? close-bottom-sheet gesture-running?]
+  (-> (gesture/gesture-pan)
+      (gesture/on-start
+       (fn [_]
+         (reset! gesture-running? true)
+         (when (and keyboard-shown (not disable-drag?) show-bottom-sheet?)
+           (re-frame/dispatch [:dismiss-keyboard]))))
+      (gesture/on-update
+       (fn [evt]
+         (when (and (not disable-drag?) show-bottom-sheet?)
+           (let [max-pan-up   (if (or @expanded? (not expandable?))
+                                0
+                                (- (- bg-height-expanded bg-height)))
+                 max-pan-down (if @expanded?
+                                bg-height-expanded
+                                bg-height)]
+             (reanimated/set-shared-value pan-y
+                                          (max
+                                           (min
+                                            (.-translationY evt)
+                                            max-pan-down)
+                                           max-pan-up))))))
+      (gesture/on-end
+       (fn [_]
+         (reset! gesture-running? false)
+         (when (and (not disable-drag?) show-bottom-sheet?)
+           (let [end-pan-y                  (- window-height (.-value translate-y))
+                 expand-threshold           (min (* bg-height 1.1) (+ bg-height 50))
+                 collapse-threshold         (max (* bg-height-expanded 0.9) (- bg-height-expanded 50))
+                 should-close-bottom-sheet? (< end-pan-y (max (* bg-height 0.7) 50))]
+             (cond
+               should-close-bottom-sheet?
+               (close-bottom-sheet)
+
+               (and (not @expanded?) (> end-pan-y expand-threshold))
+               (reset! expanded? true)
+
+               (and @expanded? (< end-pan-y collapse-threshold))
+               (reset! expanded? false))))))))
+
+(defn handle-comp
+  [window-width override-theme]
+  [rn/view
+   {:style {:width            window-width
+            :position         :absolute
+            :background-color :transparent
+            :top              0
+            :height           20}}
+   [rn/view {:style (styles/handle override-theme)}]])
+
+(defn bottom-sheet
+  [props children]
+  (let [{on-cancel                 :on-cancel
+         disable-drag?             :disable-drag?
+         show-handle?              :show-handle?
+         visible?                  :visible?
+         backdrop-dismiss?         :backdrop-dismiss?
+         expandable?               :expandable?
+         bottom-safe-area-spacing? :bottom-safe-area-spacing?
+         selected-item             :selected-item
+         is-initially-expanded?    :expanded?
+         override-theme            :override-theme
+         :or                       {show-handle?              true
+                                    backdrop-dismiss?         true
+                                    expandable?               false
+                                    bottom-safe-area-spacing? true
+                                    is-initially-expanded?    false}}
+        props
+        content-height (reagent/atom nil)
+        show-bottom-sheet? (reagent/atom nil)
+        keyboard-was-shown? (reagent/atom false)
+        expanded? (reagent/atom is-initially-expanded?)
+        gesture-running? (reagent/atom false)
+        reset-atoms (fn []
+                      (reset! show-bottom-sheet? nil)
+                      (reset! content-height nil)
+                      (reset! expanded? false)
+                      (reset! keyboard-was-shown? false)
+                      (reset! gesture-running? false))
+        close-bottom-sheet (fn []
+                             (reset! show-bottom-sheet? false)
+                             (when (fn? on-cancel) (on-cancel))
+                             (timer/set-timeout
+                              #(do
+                                 (re-frame/dispatch [:bottom-sheet/hide-old-navigation-overlay])
+                                 (reset-atoms))
+                              animation-delay))]
+    [safe-area/consumer
+     (fn [insets]
+       [:f>
+        (fn []
+          (let [{height       :height
+                 window-width :width}
+                (rn/use-window-dimensions)
+                window-height (if selected-item (- height 72) height)
+                {:keys [keyboard-shown]} (hooks/use-keyboard)
+                bg-height-expanded (- window-height (:top insets))
+                bg-height (max (min @content-height bg-height-expanded) 109)
+                bottom-sheet-dy (reanimated/use-shared-value 0)
+                pan-y (reanimated/use-shared-value 0)
+                translate-y (worklets.bottom-sheet/use-translate-y window-height bottom-sheet-dy pan-y)
+                bg-opacity
+                (worklets.bottom-sheet/use-background-opacity translate-y bg-height window-height 0.7)
+                on-content-layout (fn [evt]
+                                    (let [height (oget evt "nativeEvent" "layout" "height")]
+                                      (reset! content-height height)))
+                on-expanded (fn []
+                              (reanimated/set-shared-value bottom-sheet-dy bg-height-expanded)
+                              (reanimated/set-shared-value pan-y 0))
+                on-collapsed (fn []
+                               (reanimated/set-shared-value bottom-sheet-dy bg-height)
+                               (reanimated/set-shared-value pan-y 0))
+                bottom-sheet-gesture (get-bottom-sheet-gesture
+                                      pan-y
+                                      translate-y
+                                      bg-height
+                                      bg-height-expanded
+                                      window-height
+                                      keyboard-shown
+                                      disable-drag?
+                                      expandable?
+                                      show-bottom-sheet?
+                                      expanded?
+                                      close-bottom-sheet
+                                      gesture-running?)
+                handle-comp [gesture/gesture-detector {:gesture bottom-sheet-gesture}
+                             [handle-comp window-width override-theme]]]
+
+            (react/effect! #(do
+                              (cond
+                                (and
+                                 (nil? @show-bottom-sheet?)
+                                 visible?
+                                 (some? @content-height)
+                                 (> @content-height 0))
+                                (reset! show-bottom-sheet? true)
+
+                                (and @show-bottom-sheet? (not visible?))
+                                (close-bottom-sheet)))
+                           [@show-bottom-sheet? @content-height visible?])
+            (react/effect! #(do
+                              (when @show-bottom-sheet?
+                                (cond
+                                  keyboard-shown
+                                  (do
+                                    (reset! keyboard-was-shown? true)
+                                    (reset! expanded? true))
+                                  (and @keyboard-was-shown? (not keyboard-shown))
+                                  (reset! expanded? false))))
+                           [@show-bottom-sheet? @keyboard-was-shown? keyboard-shown])
+            (react/effect! #(do
+                              (when-not @gesture-running?
+                                (cond
+                                  @show-bottom-sheet?
+                                  (if @expanded?
+                                    (do
+                                      (reanimated/set-shared-value
+                                       bottom-sheet-dy
+                                       (with-animation (+ bg-height-expanded (.-value pan-y))))
+                                      ;; Workaround for
+                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
+                                      ;; withTiming/withSpring callback not working
+                                      ;; on-expanded should be called as a callback of
+                                      ;; with-animation instead, once this issue has been resolved
+                                      (timer/set-timeout on-expanded animation-delay))
+                                    (do
+                                      (reanimated/set-shared-value
+                                       bottom-sheet-dy
+                                       (with-animation (+ bg-height (.-value pan-y))))
+                                      ;; Workaround for
+                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
+                                      ;; withTiming/withSpring callback not working
+                                      ;; on-collapsed should be called as a callback of
+                                      ;; with-animation instead, once this issue has been resolved
+                                      (timer/set-timeout on-collapsed animation-delay)))
+
+                                  (= @show-bottom-sheet? false)
+                                  (reanimated/set-shared-value bottom-sheet-dy (with-animation 0)))))
+                           [@show-bottom-sheet? @expanded? @gesture-running?])
+
+            [:<>
+             [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)}
+              [reanimated/view
+               {:style (reanimated/apply-animations-to-style
+                        {:opacity bg-opacity}
+                        styles/backdrop)}]]
+             (cond->> [reanimated/view
+                       {:style (reanimated/apply-animations-to-style
+                                {:transform [{:translateY translate-y}]}
+                                {:width  window-width
+                                 :height window-height})}
+                       [rn/view {:style styles/container}
+                        (when selected-item
+                          [rn/view {:style (styles/selected-background override-theme)}
+                           [selected-item]])
+                        [rn/view {:style (styles/background override-theme)}
+                         [rn/keyboard-avoiding-view
+                          {:behaviour (if platform/ios? :padding :height)
+                           :style     {:flex 1}}
+                          [rn/view
+                           {:style     (styles/content-style insets bottom-safe-area-spacing?)
+                            :on-layout (when-not (and
+                                                  (some? @content-height)
+                                                  (> @content-height 0))
+                                         on-content-layout)}
+                           children]]
+                         (when show-handle?
+                           handle-comp)]]]
+               (not show-handle?)
+               (conj [gesture/gesture-detector {:gesture bottom-sheet-gesture}]))]))])]))

src/status_im/browser/core.cljs

@@ -3,7 +3,7 @@
     ["eth-phishing-detect" :as eth-phishing-detect]
     [clojure.string :as string]
     [re-frame.core :as re-frame]
-    [status-im2.common.bottom-sheet.events :as bottom-sheet]
+    [status-im.bottom-sheet.events :as bottom-sheet]
     [status-im.browser.eip3085 :as eip3085]
     [status-im.browser.eip3326 :as eip3326]
     [status-im.browser.permissions :as browser.permissions]
@@ -572,7 +572,7 @@
   [{:keys [db] :as cofx} address]
   (rf/merge cofx
             {:browser/clear-web-data nil}
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (browser.permissions/clear-dapps-permissions)
             (multiaccounts.update/multiaccount-update :dapps-address address {})
             #(when (= (:view-id db) :browser)

src/status_im/browser/eip3085.cljs

@@ -28,7 +28,7 @@
                     :on-success #(re-frame/dispatch [:eip3085/send-success-call-to-bridge cofx id
                                                      message-id])
                     :on-error   #(log/error "failed to perform settings_saveSetting" %)}]
-   :dispatch      [:bottom-sheet/hide]})
+   :dispatch      [:bottom-sheet/hide-old]})
 
 (rf/defn deny-permission
   {:events [:eip3085.ui/dapp-permission-denied]}
@@ -37,7 +37,7 @@
                             :messageId message-id
                             :error     {:code    4001
                                         :message "User rejected the request."}}
-   :dispatch               [:bottom-sheet/hide]})
+   :dispatch               [:bottom-sheet/hide-old]})
 
 (rf/defn handle-add-ethereum-chain
   {:events [:eip3085/handle-add-ethereum-chain]}
@@ -64,7 +64,7 @@
                                                               :id           id
                                                               :new-network  network)]
         (if (network/chain-id-available? networks network)
-          {:dispatch [:bottom-sheet/show-sheet
+          {:dispatch [:bottom-sheet/show-sheet-old
                       {:content (fn []
                                   [sheet/permissions-panel dapp-name message-id params])}]}
           (send-success-call-to-bridge cofx id message-id)))

src/status_im/browser/eip3326.cljs

@@ -13,7 +13,7 @@
                             :messageId message-id
                             :error     {:code    4001
                                         :message "User rejected the request."}}
-   :dispatch               [:bottom-sheet/hide]})
+   :dispatch               [:bottom-sheet/hide-old]})
 
 (rf/defn handle-switch-ethereum-chain
   {:events [:eip3326/handle-switch-ethereum-chain]}
@@ -39,7 +39,7 @@
                                        :target-network-id target-network-id
                                        :network-from      network-from
                                        :network-to        network-to)]
-          {:dispatch [:bottom-sheet/show-sheet
+          {:dispatch [:bottom-sheet/show-sheet-old
                       {:content (fn []
                                   [sheet/permissions-panel dapp-name message-id params])}]}))
       {:browser/send-to-bridge {:type constants/web3-send-async-callback

src/status_im/chat/models/input.cljs

@@ -41,36 +41,19 @@
 
 (rf/defn select-mention
   {:events [:chat.ui/select-mention]}
-  [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match] :as user}]
-  (let [chat-id     (:current-chat-id db)
-        new-text    (mentions/new-input-text-with-mention cofx user)
-        at-sign-idx (get-in db [:chats/mentions chat-id :mentions :at-sign-idx])
-        cursor      (+ at-sign-idx (count primary-name) 2)]
-    (rf/merge
-     cofx
-     {:db                   (-> db
-                                (assoc-in [:chats/cursor chat-id] cursor)
-                                (assoc-in [:chats/mention-suggestions chat-id] nil))
-      :set-text-input-value [chat-id new-text text-input-ref]}
-     (set-chat-input-text new-text chat-id)
-     ;; NOTE(rasom): Some keyboards do not react on selection property passed to
-     ;; text input (specifically Samsung keyboard with predictive text set on).
-     ;; In this case, if the user continues typing after the programmatic change,
-     ;; the new text is added to the last known cursor position before
-     ;; programmatic change. By calling `reset-text-input-cursor` we force the
-     ;; keyboard's cursor position to be changed before the next input.
-     (mentions/reset-text-input-cursor text-input-ref cursor)
-     ;; NOTE(roman): on-text-input event is not dispatched when we change input
-     ;; programmatically, so we have to call `on-text-input` manually
-     (mentions/on-text-input
-      (let [match-len (count match)
-            start     (inc at-sign-idx)
-            end       (+ start match-len)]
-        {:new-text      match
-         :previous-text searched-text
-         :start         start
-         :end           end}))
-     (mentions/recheck-at-idxs {primary-name user}))))
+  [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}]
+  (let [chat-id (:current-chat-id db)
+        text    (get-in db [:chat/inputs chat-id :input-text])
+        method  "wakuext_chatMentionNewInputTextWithMention"
+        params  [chat-id text primary-name]]
+    {:json-rpc/call [{:method     method
+                      :params     params
+                      :on-success #(rf/dispatch [:mention/on-new-input-text-with-mentions-success %
+                                                 primary-name text-input-ref match searched-text
+                                                 public-key])
+                      :on-error   #(rf/dispatch [:mention/on-error
+                                                 {:method method
+                                                  :params params} %])}]}))
 
 (rf/defn disable-chat-cooldown
   "Turns off chat cooldown (protection against message spamming)"
@@ -182,8 +165,7 @@
     (rf/merge cofx
               {:set-text-input-value [current-chat-id ""]}
               (clean-input current-chat-id)
-              (mentions/clear-mentions)
-              (mentions/clear-cursor))))
+              (mentions/clear-mentions))))
 
 (rf/defn send-messages
   [{:keys [db] :as cofx} input-text current-chat-id]
@@ -251,13 +233,29 @@
   [{{:keys [current-chat-id] :as db} :db :as cofx}]
   (let [{:keys [input-text metadata]} (get-in db [:chat/inputs current-chat-id])
         editing-message               (:editing-message metadata)
-        input-text-with-mentions      (mentions/check-mentions cofx input-text)]
-    (rf/merge cofx
-              (if editing-message
-                (send-edited-message input-text-with-mentions editing-message)
-                (send-messages input-text-with-mentions current-chat-id))
-              (mentions/clear-mentions)
-              (mentions/clear-cursor))))
+        method                        "wakuext_chatMentionCheckMentions"
+        params                        [current-chat-id input-text]]
+    {:json-rpc/call [{:method     method
+                      :params     params
+                      :on-error   #(rf/dispatch [:mention/on-error {:method method :params params} %])
+                      :on-success #(rf/dispatch [:mention/on-check-mentions-success
+                                                 current-chat-id
+                                                 editing-message
+                                                 input-text
+                                                 %])}]}))
+
+(rf/defn on-check-mentions-success
+  {:events [:mention/on-check-mentions-success]}
+  [{:keys [db] :as cofx} current-chat-id editing-message input-text new-text]
+  (log/debug "[mentions] on-check-mentions-success"
+             {:chat-id         current-chat-id
+              :editing-message editing-message
+              :input-text      input-text
+              :new-text        new-text})
+  (rf/merge cofx
+            (if editing-message
+              (send-edited-message new-text editing-message)
+              (send-messages new-text current-chat-id))))
 
 (rf/defn send-contact-request
   {:events [:contacts/send-contact-request]}
@@ -271,7 +269,6 @@
                                          :on-error    #(log/warn "failed to send a contact request" %)
                                          :on-success  #(re-frame/dispatch [:transport/message-sent %])}]}
             (mentions/clear-mentions)
-            (mentions/clear-cursor)
             (clean-input (:current-chat-id db))))
 
 (rf/defn cancel-contact-request
@@ -282,7 +279,6 @@
     (rf/merge cofx
               {:db (assoc-in db [:chat/inputs current-chat-id :metadata :sending-contact-request] nil)}
               (mentions/clear-mentions)
-              (mentions/clear-cursor)
               (clean-input (:current-chat-id db)))))
 
 (rf/defn chat-send-sticker

src/status_im/chat/models/mentions_test.cljs

@@ -1,323 +0,0 @@
-(ns status-im.chat.models.mentions-test
-  (:require [cljs.test :as test]
-            [clojure.string :as string]
-            [status-im.chat.models.mentions :as mentions]))
-
-(def ->info-input
-  [[:text "H."]
-   [:mention
-    "@helpinghand.eth"]
-   [:text
-    " "]])
-
-(def ->info-expected
-  {:at-sign-idx   2
-   :mention-end   19
-   :new-text      " "
-   :previous-text ""
-   :start         18
-   :end           18
-   :at-idxs       [{:mention? true
-                    :from     2
-                    :to       17
-                    :checked? true}]})
-
-(test/deftest test->info
-  (test/testing "->info base case"
-    (test/is (= ->info-expected (mentions/->info ->info-input)))))
-
-;; No mention
-(def mention-text-1 "parse-text")
-(def mention-text-result-1 [[:text "parse-text"]])
-
-;; Mention in the middle
-(def mention-text-2
-  "hey @0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073 he")
-(def mention-text-result-2
-  [[:text "hey "]
-   [:mention
-    "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]
-   [:text " he"]])
-
-;; Mention at the beginning
-(def mention-text-3
-  "@0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073 he")
-(def mention-text-result-3
-  [[:mention
-    "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]
-   [:text " he"]])
-
-;; Mention at the end
-(def mention-text-4
-  "hey @0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073")
-(def mention-text-result-4
-  [[:text "hey "]
-   [:mention
-    "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]])
-
-;; Invalid mention
-(def mention-text-5
-  "invalid @0x04fBce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073")
-(def mention-text-result-5
-  [[:text
-    "invalid @0x04fBce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]])
-
-(test/deftest test-to-input
-  (test/testing "only text"
-    (test/is (= mention-text-result-1 (mentions/->input-field mention-text-1))))
-  (test/testing "in the middle"
-    (test/is (= mention-text-result-2 (mentions/->input-field mention-text-2))))
-  (test/testing "at the beginning"
-    (test/is (= mention-text-result-3 (mentions/->input-field mention-text-3))))
-  (test/testing "at the end"
-    (test/is (= mention-text-result-4 (mentions/->input-field mention-text-4))))
-  (test/testing "invalid"
-    (test/is (= mention-text-result-5 (mentions/->input-field mention-text-5)))))
-
-(test/deftest test-replace-mentions
-  (let [users {"User Number One"
-               {:primary-name "User Number One"
-                :public-key   "0xpk1"}
-               "User Number Two"
-               {:primary-name   "user2"
-                :secondary-name "User Number Two"
-                :public-key     "0xpk2"}
-               "User Number Three"
-               {:primary-name   "user3"
-                :secondary-name "User Number Three"
-                :public-key     "0xpk3"}}]
-    (test/testing "empty string"
-      (let [text   ""
-            result (mentions/replace-mentions text users)]
-        (test/is (= result text) (pr-str text))))
-
-    (test/testing "no text"
-      (let [text   nil
-            result (mentions/replace-mentions text users)]
-        (test/is (= result text) (pr-str text))))
-
-    (test/testing "incomlepte mention 1"
-      (let [text   "@"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result text) (pr-str text))))
-
-    (test/testing "incomplete mention 2"
-      (let [text   "@r"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result text) (pr-str text))))
-
-    (test/testing "no mentions"
-      (let [text   "foo bar @buzz kek @foo"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result text) (pr-str text))))
-
-    (test/testing "starts with mention"
-      (let [text   "@User Number One"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "@0xpk1") (pr-str text))))
-
-    (test/testing "starts with mention, comma after mention"
-      (let [text   "@User Number One,"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "@0xpk1,") (pr-str text))))
-
-    (test/testing "starts with mention but no space after"
-      (let [text   "@User Number Onefoo"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result text) (pr-str text))))
-
-    (test/testing "starts with mention, some text after mention"
-      (let [text   "@User Number One foo"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "@0xpk1 foo") (pr-str text))))
-
-    (test/testing "starts with some text, then mention"
-      (let [text   "text @User Number One"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "text @0xpk1") (pr-str text))))
-
-    (test/testing "starts with some text, then mention, then more text"
-      (let [text   "text @User Number One foo"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "text @0xpk1 foo") (pr-str text))))
-
-    (test/testing "no space before mention"
-      (let [text   "text@User Number One"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "text@0xpk1") (pr-str text))))
-
-    (test/testing "two different mentions"
-      (let [text   "@User Number One @User Number two"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "@0xpk1 @0xpk2") (pr-str text))))
-
-    (test/testing "two different mentions, separated with comma"
-      (let [text   "@User Number One,@User Number two"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "@0xpk1,@0xpk2") (pr-str text))))
-
-    (test/testing "two different mentions inside text"
-      (let [text   "foo@User Number One bar @User Number two baz"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "foo@0xpk1 bar @0xpk2 baz") (pr-str text))))
-
-    (test/testing "ens mention"
-      (let [text   "@user2"
-            result (mentions/replace-mentions text users)]
-        (test/is (= result "@0xpk2") (pr-str text))))
-
-    (test/testing "multiple mentions"
-      (let [text             (string/join
-                              " "
-                              (repeat 1000 "@User Number One @User Number two"))
-            result           (mentions/replace-mentions text users)
-            exprected-result (string/join
-                              " "
-                              (repeat 1000 "@0xpk1 @0xpk2"))]
-        (test/is (= exprected-result result))))
-    (test/testing "markdown"
-      (test/testing "single * case 1"
-        (let [text   "*@user2*"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "single * case 2"
-        (let [text   "*@user2 *"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "*@0xpk2 *") (pr-str text))))
-
-      (test/testing "single * case 3"
-        (let [text   "a*@user2*"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "single * case 4"
-        (let [text   "*@user2 foo*foo"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "*@0xpk2 foo*foo") (pr-str text))))
-
-      (test/testing "single * case 5"
-        (let [text   "a *@user2*"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "single * case 6"
-        (let [text   "*@user2 foo*"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "single * case 7"
-        (let [text   "@user2 *@user2 foo* @user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "@0xpk2 *@user2 foo* @0xpk2") (pr-str text))))
-
-      (test/testing "single * case 8"
-        (let [text   "*@user2 foo**@user2 foo*"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "single * case 9"
-        (let [text   "*@user2 foo***@user2 foo* @user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "*@user2 foo***@user2 foo* @0xpk2") (pr-str text))))
-
-      (test/testing "double * case 1"
-        (let [text   "**@user2**"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "double * case 2"
-        (let [text   "**@user2 **"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "**@0xpk2 **") (pr-str text))))
-
-      (test/testing "double * case 3"
-        (let [text   "a**@user2**"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "double * case 4"
-        (let [text   "**@user2 foo**foo"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "**@user2 foo**foo") (pr-str text))))
-
-      (test/testing "double * case 5"
-        (let [text   "a **@user2**"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "double * case 6"
-        (let [text   "**@user2 foo**"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "double * case 7"
-        (let [text   "@user2 **@user2 foo** @user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "@0xpk2 **@user2 foo** @0xpk2") (pr-str text))))
-
-      (test/testing "double * case 8"
-        (let [text   "**@user2 foo****@user2 foo**"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "double * case 9"
-        (let [text   "**@user2 foo*****@user2 foo** @user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "**@user2 foo*****@user2 foo** @0xpk2") (pr-str text))))
-
-      (test/testing "tripple * case 1"
-        (let [text   "***@user2 foo***@user2 foo*"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "***@user2 foo***@0xpk2 foo*") (pr-str text))))
-
-      (test/testing "tripple ~ case 1"
-        (let [text   "~~~@user2 foo~~~@user2 foo~"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "quote case 1"
-        (let [text   ">@user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "quote case 2"
-        (let [text   "\n>@user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "quote case 3"
-        (let [text   "\n> @user2 \n   \n @user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "\n> @user2 \n   \n @0xpk2") (pr-str text))))
-
-      (test/testing "quote case 4"
-        (let [text   ">@user2\n\n>@user2"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "quote case 5"
-        (let [text   "***hey\n\n>@user2\n\n@user2 foo***"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "***hey\n\n>@user2\n\n@0xpk2 foo***")
-                   (pr-str text))))
-
-      (test/testing "code case 1"
-        (let [text   "` @user2 `"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "code case 2"
-        (let [text   "` @user2 `"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "code case 3"
-        (let [text   "``` @user2 ```"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result text) (pr-str text))))
-
-      (test/testing "code case 4"
-        (let [text   "` ` @user2 ``"
-              result (mentions/replace-mentions text users)]
-          (test/is (= result "` ` @0xpk2 ``") (pr-str text)))))))

src/status_im/communities/core.cljs

@@ -8,7 +8,7 @@
             [status-im.async-storage.core :as async-storage]
             [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles]
             [status-im.utils.universal-links.core :as universal-links]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im2.common.toasts.events :as toasts]
             [status-im2.constants :as constants]
             [status-im2.contexts.activity-center.events :as activity-center]
@@ -445,7 +445,7 @@
   [cofx id]
   (rf/merge cofx
             (reset-community-id-input id)
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (navigation/open-modal :invite-people-community {:invite? true})))
 
 (rf/defn share-community-pressed
@@ -453,7 +453,7 @@
   [cofx id]
   (rf/merge cofx
             (reset-community-id-input id)
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (navigation/open-modal :invite-people-community {})))
 
 (rf/defn create-channel-pressed
@@ -575,7 +575,7 @@
   {:events [::member-banned]}
   [cofx response-js]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (handle-response response-js)
             (activity-center/notifications-fetch-unread-count)))
 
@@ -596,7 +596,7 @@
   {:events [::member-kicked]}
   [cofx response-js]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (handle-response response-js)))
 
 (rf/defn member-kick
@@ -817,13 +817,13 @@
   [cofx community-id]
   (rf/merge cofx
             (navigation/pop-to-root :shell-stack)
-            (navigation/navigate-to-cofx :community-overview community-id)))
+            (navigation/navigate-to :community-overview community-id)))
 
 (rf/defn member-role-updated
   {:events [:community.member/role-updated]}
   [cofx response-js]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (handle-response response-js)))
 
 (rf/defn add-role-to-member

src/status_im/contact/core.cljs

@@ -9,4 +9,4 @@
             {:db (assoc db
                         :group/selected-contacts #{}
                         :new-chat-name           "")}
-            (navigation/navigate-to-cofx :contact-toggle-list nil)))
+            (navigation/navigate-to :contact-toggle-list nil)))

src/status_im/data_store/messages.cljs

@@ -41,7 +41,8 @@
         :albumId                  :album-id
         :imageWidth               :image-width
         :imageHeight              :image-height
-        :new                      :new?})
+        :new                      :new?
+        :albumImagesCount         :album-images-count})
 
       (update :quoted-message
               set/rename-keys

src/status_im/ens/core.cljs

@@ -2,7 +2,7 @@
   (:refer-clojure :exclude [name])
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip55 :as eip55]
             [status-im.ethereum.ens :as ens]
@@ -121,7 +121,7 @@
   (let [{:keys [state username custom-domain?]} (:ens/registration db)]
     (case state
       (:available :owned)
-      (navigation/navigate-to-cofx cofx :ens-checkout {})
+      (navigation/navigate-to cofx :ens-checkout {})
       :connected-with-different-key
       (re-frame/dispatch [::set-pub-key])
       :connected
@@ -261,7 +261,7 @@
   [{:keys [db] :as cofx} _ {:keys [address]}]
   (rf/merge cofx
             {:db (assoc-in db [:ens/registration :address] address)}
-            (bottom-sheet/hide-bottom-sheet)))
+            (bottom-sheet/hide-bottom-sheet-old)))
 
 (rf/defn save-preferred-name
   {:events [::save-preferred-name]}
@@ -311,14 +311,14 @@
                ::resolve-pubkey
                [chain-id username
                 #(re-frame/dispatch [::public-key-resolved username %])]}
-              (navigation/navigate-to-cofx :ens-name-details username))))
+              (navigation/navigate-to :ens-name-details username))))
 
 (rf/defn start-registration
   {:events [::add-username-pressed ::get-started-pressed]}
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             (set-username-candidate (get-in db [:ens/registration :username] ""))
-            (navigation/navigate-to-cofx :ens-search {})))
+            (navigation/navigate-to :ens-search {})))
 
 (rf/defn remove-username
   {:events [::remove-username]}

src/status_im/events.cljs

@@ -115,7 +115,7 @@
   {:events [:system-theme-mode-changed]}
   [{:keys [db] :as cofx} _]
   (let [current-theme-type (get-in cofx [:db :multiaccount :appearance])]
-    (when (and (multiaccounts.model/logged-in? cofx)
+    (when (and (multiaccounts.model/logged-in? db)
                (= current-theme-type status-im2.constants/theme-type-system))
       {:multiaccounts.ui/switch-theme-fx
        [(get-in db [:multiaccount :appearance])

src/status_im/group_chats/core.cljs

@@ -245,7 +245,7 @@
             {:db (-> db
                      (assoc :new-chat-name (get-in db [:chats chat-id :name]))
                      (assoc :current-chat-id chat-id))}
-            (navigation/navigate-to-cofx :group-chat-profile nil)))
+            (navigation/navigate-to :group-chat-profile nil)))
 
 (rf/defn ui-leave-chat-pressed
   {:events [:group-chats.ui/leave-chat-pressed]}
@@ -256,5 +256,5 @@
       :content             (i18n/label :t/leave-chat-confirmation)
       :confirm-button-text (i18n/label :t/leave)
       :on-accept           #(do
-                              (re-frame/dispatch [:bottom-sheet/hide])
+                              (re-frame/dispatch [:bottom-sheet/hide-old])
                               (re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id]))}}))

src/status_im/keycard/backup_key.cljs

@@ -18,8 +18,8 @@
             {:db (-> db
                      (assoc-in [:keycard :creating-backup?] backup-type))}
             (when (:multiaccount db)
-              (navigation/navigate-to-cofx :my-profile nil))
-            (navigation/navigate-to-cofx :seed-phrase nil)))
+              (navigation/navigate-to :my-profile nil))
+            (navigation/navigate-to :seed-phrase nil)))
 
 (rf/defn recovery-card-pressed
   {:events [:keycard-settings.ui/recovery-card-pressed]}
@@ -69,4 +69,4 @@
                                    (update :multiaccounts/key-storage dissoc :seed-phrase))
              :dismiss-keyboard nil}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
+            (navigation/navigate-to :keycard-onboarding-intro nil)))

src/status_im/keycard/change_pin.cljs

@@ -59,7 +59,7 @@
             (common/clear-pin)
             (common/hide-connection-sheet)
             (if (get-in db [:keycard :pin :puk-restore?])
-              (navigation/navigate-to-cofx :multiaccounts nil)
+              (navigation/navigate-to :multiaccounts nil)
               (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings]))))
 
 (rf/defn change-pin
@@ -150,7 +150,7 @@
                                   :content (i18n/label :t/pin-changed)}}
               (common/hide-connection-sheet)
               (if puk-restore?
-                (navigation/navigate-to-cofx :multiaccounts nil)
+                (navigation/navigate-to :multiaccounts nil)
                 (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings]))
               (when (:multiaccounts/login db)
                 (common/get-keys-from-keycard)))))
@@ -211,5 +211,5 @@
                                        :sign         []
                                        :error-label  :t/pin-mismatch))}
                    (when (zero? pin-retries) (common/frozen-keycard-popup))
-                   (navigation/navigate-to-cofx :enter-pin-settings nil))
+                   (navigation/navigate-to :enter-pin-settings nil))
          (common/show-wrong-keycard-alert))))))

src/status_im/keycard/common.cljs

@@ -1,7 +1,7 @@
 (ns status-im.keycard.common
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [utils.i18n :as i18n]
             [status-im.keycard.nfc :as nfc]
@@ -195,8 +195,7 @@
                connected?)
     (rf/merge
      cofx
-     {:dismiss-keyboard true}
-     (bottom-sheet/show-bottom-sheet
+     (bottom-sheet/show-bottom-sheet-old
       {:view {:transparent        platform/ios?
               :show-handle?       false
               :backdrop-dismiss?  false
@@ -231,7 +230,7 @@
             {:db (assoc-in db [:keycard :card-read-in-progress?] false)}
             (restore-on-card-connected)
             (restore-on-card-read)
-            (bottom-sheet/hide-bottom-sheet)))
+            (bottom-sheet/hide-bottom-sheet-old)))
 
 (rf/defn hide-connection-sheet
   [cofx]
@@ -309,7 +308,7 @@
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db (assoc-in db [:keycard :pin :current] [])}
-            (navigation/navigate-to-cofx :enter-pin-settings nil)))
+            (navigation/navigate-to :enter-pin-settings nil)))
 
 (defn- tag-lost-exception?
   [code error]
@@ -492,7 +491,7 @@
       (if login?
         (rf/merge cofx
                   (clear-on-card-read)
-                  (navigation/navigate-to-cofx :not-keycard nil))
+                  (navigation/navigate-to :not-keycard nil))
         (rf/merge cofx
                   {:db (assoc-in db [:keycard :application-info-error] error)}
 

src/status_im/keycard/core.cljs

@@ -40,7 +40,7 @@
                                {:enter-step   :original
                                 :original     []
                                 :confirmation []}))}
-            (navigation/navigate-to-cofx :keycard-onboarding-pin nil)))
+            (navigation/navigate-to :keycard-onboarding-pin nil)))
 
 (rf/defn load-recovery-pin-screen
   [{:keys [db] :as cofx}]
@@ -66,7 +66,7 @@
              "instance-uid"
              instance-uid)
   (if (= flow :import)
-    (navigation/navigate-to-cofx cofx :keycard-recovery-no-key nil)
+    (navigation/navigate-to cofx :keycard-recovery-no-key nil)
     (if paired?
       (rf/merge cofx
                 (common/listen-to-hardware-back-button)
@@ -86,7 +86,7 @@
                      (assoc-in [:keycard :pin :on-verified] nil)
                      (assoc-in [:keycard :setup-step] nil))}
             (common/clear-on-card-connected)
-            (navigation/navigate-to-cofx :keycard-settings nil)))
+            (navigation/navigate-to :keycard-settings nil)))
 
 (rf/defn password-option-pressed
   {:eevents [:keycard.ui/password-option-pressed]}
@@ -272,7 +272,7 @@
                              (not on-verified-failure))
                     (when exporting?
                       (navigation/navigate-back)))
-                  ;(navigation/navigate-to-cofx :enter-pin-settings nil)))
+                  ;(navigation/navigate-to :enter-pin-settings nil)))
                   (when (zero? pin-retries) (common/frozen-keycard-popup))
                   (when on-verified-failure
                     (fn [_]
@@ -505,7 +505,7 @@
               (when multiaccount
                 (set-multiaccount-pairing multiaccount pairing paired-on))
               (when (= flow :login)
-                (navigation/navigate-to-cofx :multiaccounts nil))
+                (navigation/navigate-to :multiaccounts nil))
               (when (= flow :recovery)
                 (onboarding/proceed-with-generating-key))
               (when (= flow :import)
@@ -531,7 +531,7 @@
                                                 :keycard/pair))
                 (common/hide-connection-sheet)
                 (when (= flow :import)
-                  (navigation/navigate-to-cofx :keycard-recovery-pair nil))
+                  (navigation/navigate-to :keycard-recovery-pair nil))
                 (when (not= setup-step :enter-pair-code)
                   (common/process-error code error))))))
 
@@ -579,7 +579,7 @@
 
               (when (= card-state :pre-init)
                 (if (= flow :import)
-                  (navigation/navigate-to-cofx :keycard-recovery-no-key nil)
+                  (navigation/navigate-to :keycard-recovery-no-key nil)
                   (fn [cofx]
                     (rf/merge
                      cofx
@@ -596,7 +596,7 @@
 
               (when (= card-state :blank)
                 (if (= flow :import)
-                  (navigation/navigate-to-cofx :keycard-recovery-no-key nil)
+                  (navigation/navigate-to :keycard-recovery-no-key nil)
                   (show-no-keycard-applet-alert)))
 
               (when (and (= card-state :multiaccount)

src/status_im/keycard/delete_key.cljs

@@ -6,7 +6,7 @@
 (rf/defn reset-card-pressed
   {:events [:keycard-settings.ui/reset-card-pressed]}
   [cofx]
-  (navigation/navigate-to-cofx cofx :reset-card nil))
+  (navigation/navigate-to cofx :reset-card nil))
 
 (rf/defn delete-card
   [{:keys [db] :as cofx}]
@@ -20,7 +20,7 @@
 (rf/defn navigate-to-reset-card-screen
   {:events [:keycard/navigate-to-reset-card-screen]}
   [cofx]
-  (navigation/navigate-to-cofx cofx :reset-card nil))
+  (navigation/navigate-to cofx :reset-card nil))
 
 (rf/defn reset-card-next-button-pressed
   {:events [:keycard-settings.ui/reset-card-next-button-pressed]}

src/status_im/keycard/login.cljs

@@ -1,5 +1,5 @@
 (ns status-im.keycard.login
-  (:require [status-im2.common.bottom-sheet.events :as bottom-sheet]
+  (:require [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [status-im.keycard.common :as common]
             status-im.keycard.fx
@@ -22,13 +22,13 @@
 (rf/defn login-pin-more-icon-pressed
   {:events [:keycard.login.pin.ui/more-icon-pressed]}
   [cofx]
-  (bottom-sheet/show-bottom-sheet cofx {:view :keycard.login/more}))
+  (bottom-sheet/hide-bottom-sheet-old cofx))
 
 (rf/defn login-create-key-pressed
   {:events [:keycard.login.ui/create-new-key-pressed]}
   [cofx]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
             (onboarding/start-onboarding-flow)))
 
 (rf/defn login-add-key-pressed
@@ -48,7 +48,7 @@
   (log/debug "[keycard] load-pair-card-pressed")
   (rf/merge cofx
             {:db (assoc-in db [:keycard :flow] :login)}
-            (navigation/navigate-to-cofx :keycard-recovery-pair nil)))
+            (navigation/navigate-to :keycard-recovery-pair nil)))
 
 (rf/defn reset-pin
   {:events [::reset-pin]}
@@ -70,11 +70,11 @@
                                    :status     nil))
       :hide-popover nil})
    (when (:multiaccount db)
-     (navigation/navigate-to-cofx :my-profile nil))
+     (navigation/navigate-to :my-profile nil))
    (when-not (:multiaccounts/login db)
      (if (:popover/popover db)
        (navigation/navigate-replace :keycard-pin nil)
-       (navigation/navigate-to-cofx :keycard-pin nil)))))
+       (navigation/navigate-to :keycard-pin nil)))))
 
 (rf/defn dismiss-frozen-keycard-popover
   {:events [::frozen-keycard-popover-dismissed]}
@@ -107,22 +107,22 @@
       (empty? application-info)
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to-cofx :not-keycard nil))
+                (navigation/navigate-to :not-keycard nil))
 
       (empty? key-uid)
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to-cofx :keycard-blank nil))
+                (navigation/navigate-to :keycard-blank nil))
 
       multiaccount-mismatch?
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to-cofx :keycard-wrong nil))
+                (navigation/navigate-to :keycard-wrong nil))
 
       (not paired?)
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to-cofx :keycard-unpaired nil))
+                (navigation/navigate-to :keycard-unpaired nil))
 
       (and (zero? pin-retry-counter)
            (or (nil? puk-retry-counter)

src/status_im/keycard/onboarding.cljs

@@ -36,7 +36,7 @@
         (rf/merge cofx
                   {:utils/show-popup {:title   (i18n/label :t/error)
                                       :content (i18n/label :t/something-went-wrong)}}
-                  (navigation/navigate-to-cofx :keycard-authentication-method nil))))))
+                  (navigation/navigate-to :keycard-authentication-method nil))))))
 
 (rf/defn load-preparing-screen
   {:events [:keycard/load-preparing-screen]}
@@ -120,7 +120,7 @@
   [cofx]
   (rf/merge cofx
             (recovery-phrase-start-confirmation)
-            (navigation/navigate-to-cofx :keycard-onboarding-recovery-phrase-confirm-word1 nil)))
+            (navigation/navigate-to :keycard-onboarding-recovery-phrase-confirm-word1 nil)))
 
 (rf/defn recovery-phrase-next-word
   [{:keys [db]}]
@@ -143,7 +143,7 @@
                                     :on-verified :keycard/generate-and-load-key
                                     :current     []})
                          (assoc-in [:keycard :setup-step] :loading-keys))}
-                (navigation/navigate-to-cofx :keycard-onboarding-pin nil))
+                (navigation/navigate-to :keycard-onboarding-pin nil))
       (load-finishing-screen cofx))))
 
 (rf/defn recovery-phrase-confirm-word-next-pressed
@@ -178,10 +178,10 @@
     (rf/merge cofx
               {:keycard/check-nfc-enabled nil}
               (if (= flow :import)
-                (navigation/navigate-to-cofx :keycard-recovery-intro nil)
+                (navigation/navigate-to :keycard-recovery-intro nil)
                 (do
                   (common/listen-to-hardware-back-button)
-                  (navigation/navigate-to-cofx :keycard-onboarding-intro nil))))))
+                  (navigation/navigate-to :keycard-onboarding-intro nil))))))
 
 (rf/defn start-onboarding-flow
   {:events [:keycard/start-onboarding-flow]}
@@ -190,7 +190,7 @@
             {:db                        (assoc-in db [:keycard :flow] :create)
              :keycard/check-nfc-enabled nil}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
+            (navigation/navigate-to :keycard-onboarding-intro nil)))
 
 (rf/defn open-nfc-settings-pressed
   {:events [:keycard.onboarding.nfc-on/open-nfc-settings-pressed]}

src/status_im/keycard/recovery.cljs

@@ -1,7 +1,7 @@
 (ns status-im.keycard.recovery
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im2.constants :as constants]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip55 :as eip55]
@@ -54,16 +54,16 @@
   (rf/merge cofx
             {:db       (-> db
                            (assoc-in [:keycard :setup-step] :pair))
-             :dispatch [:bottom-sheet/hide]}
+             :dispatch [:bottom-sheet/hide-old]}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to-cofx :keycard-recovery-pair nil)))
+            (navigation/navigate-to :keycard-recovery-pair nil)))
 
 (rf/defn keycard-storage-selected-for-recovery
   {:events [:recovery.ui/keycard-storage-selected]}
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db (assoc-in db [:keycard :flow] :recovery)}
-            (navigation/navigate-to-cofx :keycard-recovery-enter-mnemonic nil)))
+            (navigation/navigate-to :keycard-recovery-enter-mnemonic nil)))
 
 (rf/defn start-import-flow
   {:events [::recover-with-keycard-pressed]}
@@ -74,13 +74,13 @@
                  (assoc-in [:keycard :flow] :import)
                  (assoc :recovered-account? true))
              :keycard/check-nfc-enabled nil}
-            (bottom-sheet/hide-bottom-sheet)
-            (navigation/navigate-to-cofx :keycard-recovery-intro nil)))
+            (bottom-sheet/hide-bottom-sheet-old)
+            (navigation/navigate-to :keycard-recovery-intro nil)))
 
 (rf/defn access-key-pressed
   {:events [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]}
   [_]
-  {:dispatch [:bottom-sheet/show-sheet :recover-sheet]})
+  {:dispatch [:bottom-sheet/show-sheet-old :recover-sheet]})
 
 (rf/defn recovery-keycard-selected
   {:events [:recovery.ui/keycard-option-pressed]}
@@ -89,7 +89,7 @@
             {:db                        (assoc-in db [:keycard :flow] :recovery)
              :keycard/check-nfc-enabled nil}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
+            (navigation/navigate-to :keycard-onboarding-intro nil)))
 
 (rf/defn cancel-pressed
   {:events [::cancel-pressed]}
@@ -126,10 +126,10 @@
                          :keycard dissoc
                          :multiaccount-wallet-address
                          :multiaccount-whisper-public-key)}
-            (navigation/navigate-to-cofx (if platform/android?
-                                           :notifications-settings
-                                           :welcome)
-                                         nil)))
+            (navigation/navigate-to (if platform/android?
+                                      :notifications-settings
+                                      :welcome)
+                                    nil)))
 
 (rf/defn intro-wizard
   {:events [:multiaccounts.create.ui/intro-wizard]}
@@ -141,7 +141,7 @@
                        (dissoc :restored-account?))}
               (multiaccounts.create/prepare-intro-wizard)
               (if (pos? (count accs))
-                (navigation/navigate-to-cofx :get-your-keys nil)
+                (navigation/navigate-to :get-your-keys nil)
                 (navigation/set-stack-root :onboarding [:get-your-keys])))))
 
 (rf/defn recovery-no-key
@@ -238,7 +238,7 @@
                                                        :t/keycard-can-use-with-new-passcode
                                                        :t/keycard-backup-success-body))}}
             (cond
-              (multiaccounts.model/logged-in? cofx)
+              (multiaccounts.model/logged-in? db)
               (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings])
 
               (:multiaccounts/login db)

src/status_im/keycard/unpair.cljs

@@ -87,7 +87,7 @@
                                  :content (i18n/label :t/card-unpaired)}}
      (common/clear-on-card-connected)
      (remove-pairing-from-multiaccount nil)
-     (navigation/navigate-to-cofx :keycard-settings nil))))
+     (navigation/navigate-to :keycard-settings nil))))
 
 (rf/defn on-unpair-error
   {:events [:keycard.callback/on-unpair-error]}
@@ -103,7 +103,7 @@
              :utils/show-popup             {:title   ""
                                             :content (i18n/label :t/something-went-wrong)}}
             (common/clear-on-card-connected)
-            (navigation/navigate-to-cofx :keycard-settings nil)))
+            (navigation/navigate-to :keycard-settings nil)))
 
 (rf/defn remove-key-with-unpair
   {:events [:keycard/remove-key-with-unpair]}

src/status_im/keycard/wallet.cljs

@@ -1,5 +1,5 @@
 (ns status-im.keycard.wallet
-  (:require [status-im2.common.bottom-sheet.events :as bottom-sheet]
+  (:require [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im2.constants :as constants]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip55 :as eip55]
@@ -17,7 +17,7 @@
                           (assoc-in [:keycard :pin :enter-step] :export-key)
                           (update-in [:keycard :pin] dissoc :export-key))
     :dismiss-keyboard nil}
-   (bottom-sheet/show-bottom-sheet {:view {:content add-new.views/pin}})))
+   (bottom-sheet/show-bottom-sheet-old {:view {:content add-new.views/pin}})))
 
 (rf/defn verify-pin-with-delay
   [cofx]
@@ -29,7 +29,7 @@
 (rf/defn hide-pin-sheet
   {:events [:keycard/new-account-pin-sheet-hide]}
   [cofx]
-  (bottom-sheet/hide-bottom-sheet cofx))
+  (bottom-sheet/hide-bottom-sheet-old cofx))
 
 (rf/defn generate-new-keycard-account
   {:events [:wallet.accounts/generate-new-keycard-account]}

src/status_im/mailserver/core.cljs

@@ -255,7 +255,7 @@
               (set-input :id id)
               (set-input :url (str url))
               (set-input :name (str name))
-              (navigation/navigate-to-cofx :edit-mailserver nil))))
+              (navigation/navigate-to :edit-mailserver nil))))
 
 (defn mailserver->rpc
   [mailserver current-fleet]
@@ -411,4 +411,4 @@
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db (dissoc db :mailserver.edit/mailserver)}
-            (navigation/navigate-to-cofx :edit-mailserver nil)))
+            (navigation/navigate-to :edit-mailserver nil)))

src/status_im/mobile_sync_settings/core.cljs

@@ -1,5 +1,5 @@
 (ns status-im.mobile-sync-settings.core
-  (:require [status-im2.common.bottom-sheet.events :as bottom-sheet]
+  (:require [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im2.contexts.add-new-contact.events :as add-new-contact]
             [status-im.mailserver.core :as mailserver]
             [status-im.multiaccounts.model :as multiaccounts.model]
@@ -21,7 +21,7 @@
 (rf/defn on-network-status-change
   [{:keys [db] :as cofx}]
   (let [initialized?                       (get db :network-status/initialized?)
-        logged-in?                         (multiaccounts.model/logged-in? cofx)
+        logged-in?                         (multiaccounts.model/logged-in? db)
         {:keys [remember-syncing-choice?]} (:multiaccount db)]
     (apply
      rf/merge
@@ -33,7 +33,7 @@
             (not remember-syncing-choice?)
             (not= :create-multiaccount (:view-id db)))
 
-       [(bottom-sheet/show-bottom-sheet
+       [(bottom-sheet/show-bottom-sheet-old
          {:view :mobile-network})
         (sheet-defaults)]
 
@@ -42,13 +42,13 @@
        ;; no reason to restart wallet.
        (and logged-in? initialized?)
        [(mailserver/process-next-messages-request)
-        (bottom-sheet/hide-bottom-sheet)
+        (bottom-sheet/hide-bottom-sheet-old)
         (wallet/restart-wallet-service nil)
         (add-new-contact/set-new-identity-reconnected)]
 
        logged-in?
        [(mailserver/process-next-messages-request)
-        (bottom-sheet/hide-bottom-sheet)]))))
+        (bottom-sheet/hide-bottom-sheet-old)]))))
 
 (defn apply-settings
   ([sync?] (apply-settings sync? :default))
@@ -115,12 +115,10 @@
   [cofx]
   (rf/merge
    cofx
-   (bottom-sheet/hide-bottom-sheet)
-   (navigation/navigate-to-cofx :mobile-network-settings nil)))
+   (bottom-sheet/hide-bottom-sheet-old)
+   (navigation/navigate-to :mobile-network-settings nil)))
 
 (rf/defn mobile-network-show-offline-sheet
   {:events [:mobile-network/show-offline-sheet]}
   [cofx]
-  (bottom-sheet/show-bottom-sheet
-   cofx
-   {:view :mobile-network-offline}))
+  (bottom-sheet/hide-bottom-sheet-old cofx))

src/status_im/multiaccounts/biometric/core.cljs

@@ -125,6 +125,28 @@
  (fn [[cb options]]
    (authenticate-fx #(cb %) options)))
 
+(re-frame/reg-fx
+ :biometric/enable-and-save-password
+ (fn [{:keys [key-uid
+              masked-password
+              on-success
+              on-error]}]
+   (-> (keychain/save-user-password!
+        key-uid
+        masked-password)
+       (.then
+        (fn [_]
+          (keychain/save-auth-method!
+           key-uid
+           keychain/auth-method-biometric)))
+       (.then
+        (fn [_]
+          (when on-success
+            (on-success))))
+       (.catch (fn [error]
+                 (when on-error
+                   (on-error error)))))))
+
 (rf/defn update-biometric
   [{db :db :as cofx} biometric-auth?]
   (let [key-uid (or (get-in db [:multiaccount :key-uid])

src/status_im/multiaccounts/core.cljs

@@ -2,7 +2,7 @@
   (:require [clojure.string :as string]
             [quo.platform :as platform]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im.multiaccounts.update.core :as multiaccounts.update]
             [status-im.native-module.core :as native-module]
             [utils.re-frame :as rf]
@@ -44,6 +44,7 @@
   (let [me? (= (:public-key current-multiaccount) identity)]
     (if me?
       [(or (:preferred-name current-multiaccount)
+           (:primary-name contact)
            (gfycat/generate-gfy identity))]
       [(:primary-name contact) (:secondary-name contact)])))
 
@@ -146,12 +147,12 @@
            [:dark :light colors/neutral-100]
            [:light :dark colors/white])]
      (theme/set-theme theme)
-     (re-frame/dispatch [:change-root-status-bar-style
+     (re-frame/dispatch [:change-shell-status-bar-style
                          (if (shell.animation/home-stack-open?) status-bar-theme :light)])
      (when reload-ui?
        (hot-reload/reload)
        (when-not (= view-id :shell-stack)
-         (re-frame/dispatch [:change-root-nav-bar-color nav-bar-color]))))))
+         (re-frame/dispatch [:change-shell-nav-bar-color nav-bar-color]))))))
 
 (rf/defn switch-appearance
   {:events [:multiaccounts.ui/appearance-switched]}
@@ -197,7 +198,7 @@
                                 :params     [key-uid (clean-path path) ax ay bx by]
                                 ;; NOTE: In case of an error we can show a toast error
                                 :on-success #(re-frame/dispatch [::update-local-picture %])}]}
-              (bottom-sheet/hide-bottom-sheet))))
+              (bottom-sheet/hide-bottom-sheet-old))))
 
 (rf/defn save-profile-picture-from-url
   {:events [::save-profile-picture-from-url]}
@@ -208,7 +209,7 @@
                                 :params     [key-uid url]
                                 :on-error   #(log/error "::save-profile-picture-from-url error" %)
                                 :on-success #(re-frame/dispatch [::update-local-picture %])}]}
-              (bottom-sheet/hide-bottom-sheet))))
+              (bottom-sheet/hide-bottom-sheet-old))))
 
 (comment
   (re-frame/dispatch
@@ -226,7 +227,7 @@
                                 ;; with a toast error
                                 :on-success #(log/info "[multiaccount] Delete profile image" %)}]}
               (multiaccounts.update/optimistic :images nil)
-              (bottom-sheet/hide-bottom-sheet))))
+              (bottom-sheet/hide-bottom-sheet-old))))
 
 (rf/defn get-profile-picture
   [cofx]

src/status_im/multiaccounts/create/core.cljs

@@ -94,16 +94,16 @@
 (rf/defn multiaccount-generate-and-derive-addresses-success
   {:events [:multiaccount-generate-and-derive-addresses-success]}
   [{:keys [db]} result]
-  {:db             (update db
-                           :intro-wizard
-                           (fn [data]
-                             (-> data
-                                 (dissoc :processing?)
-                                 (assoc :multiaccounts         result
-                                        :selected-storage-type :default
-                                        :selected-id           (-> result first :id)
-                                        :step                  :choose-key))))
-   :navigate-to-fx :choose-name})
+  {:db          (update db
+                        :intro-wizard
+                        (fn [data]
+                          (-> data
+                              (dissoc :processing?)
+                              (assoc :multiaccounts         result
+                                     :selected-storage-type :default
+                                     :selected-id           (-> result first :id)
+                                     :step                  :choose-key))))
+   :navigate-to :choose-name})
 
 (rf/defn generate-and-derive-addresses
   {:events [:generate-and-derive-addresses]}

src/status_im/multiaccounts/key_storage/core.cljs

@@ -1,7 +1,7 @@
 (ns status-im.multiaccounts.key-storage.core
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.mnemonic :as mnemonic]
             [utils.i18n :as i18n]
@@ -21,10 +21,10 @@
 (rf/defn key-and-storage-management-pressed
   "This event can be dispatched before login and from profile and needs to redirect accordingly"
   {:events [::key-and-storage-management-pressed]}
-  [cofx]
-  (navigation/navigate-to-cofx
+  [{:keys [db] :as cofx}]
+  (navigation/navigate-to
    cofx
-   (if (multiaccounts.model/logged-in? cofx)
+   (if (multiaccounts.model/logged-in? db)
      :actions-logged-in
      :actions-not-logged-in)
    nil))
@@ -60,7 +60,7 @@
   (rf/merge
    cofx
    {:db (assoc db :recovered-account? true)}
-   (navigation/navigate-to-cofx :seed-phrase nil)))
+   (navigation/navigate-to :seed-phrase nil)))
 
 (rf/defn seed-phrase-input-changed
   {:events [::seed-phrase-input-changed]}
@@ -85,7 +85,7 @@
   (let [backup? (get-in db [:keycard :creating-backup?])]
     (if backup?
       (keycard.backup/start-keycard-backup cofx)
-      (navigation/navigate-to-cofx cofx :storage nil))))
+      (navigation/navigate-to cofx :storage nil))))
 
 (defn validate-seed-against-key-uid
   "Check if the key-uid was generated with the given seed-phrase"
@@ -173,7 +173,7 @@ We don't need to take the exact steps, just set the required state and redirect
 "
 (rf/defn import-multiaccount
   [{:keys [db] :as cofx}]
-  {:dispatch [:bottom-sheet/hide]
+  {:dispatch [:bottom-sheet/hide-old]
    ::multiaccounts.recover/import-multiaccount
    {:passphrase    (get-in db [:multiaccounts/key-storage :seed-phrase])
     :password      nil
@@ -183,7 +183,7 @@ We don't need to take the exact steps, just set the required state and redirect
   {:events [::delete-multiaccount-and-init-keycard-onboarding]}
   [{:keys [db] :as cofx}]
   (rf/merge
-   {:dispatch [:bottom-sheet/hide]
+   {:dispatch [:bottom-sheet/hide-old]
     :db       (assoc-in db [:multiaccounts/key-storage :reset-db-checked?] true)}
    (import-multiaccount)))
 
@@ -192,7 +192,7 @@ We don't need to take the exact steps, just set the required state and redirect
   [{:keys [db] :as cofx}]
   (if (get-in db [:multiaccounts/key-storage :reset-db-checked?])
     (popover/show-popover cofx {:view :transfer-multiaccount-to-keycard-warning})
-    (bottom-sheet/show-bottom-sheet cofx {:view :migrate-account-password})))
+    (bottom-sheet/hide-bottom-sheet-old cofx)))
 
 (rf/defn skip-password-pressed
   {:events [::skip-password-pressed]}
@@ -248,14 +248,14 @@ We don't need to take the exact steps, just set the required state and redirect
                      (dissoc :multiaccounts/key-storage))}
             (popover/hide-popover)
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
+            (navigation/navigate-to :keycard-onboarding-intro nil)))
 
 (rf/defn goto-multiaccounts-screen
   {:events [::hide-popover-and-goto-multiaccounts-screen]}
   [cofx _]
   (rf/merge cofx
             (popover/hide-popover)
-            (navigation/navigate-to-cofx :multiaccounts nil)))
+            (navigation/navigate-to :multiaccounts nil)))
 
 (rf/defn confirm-logout-and-goto-key-storage
   {:events [::confirm-logout-and-goto-key-storage]}

src/status_im/multiaccounts/login/core.cljs

@@ -476,11 +476,8 @@
   "Decides which root should be initialised depending on user and app state"
   [db]
   (cond
-    (get db :local-pairing/completed-pairing?)
-    (re-frame/dispatch [:syncing/pairing-completed])
-
     (get db :onboarding-2/new-account?)
-    (re-frame/dispatch [:navigate-to :enable-notifications])
+    (re-frame/dispatch [:onboarding-2/finalize-setup])
 
     (get db :tos/accepted?)
     (re-frame/dispatch [:init-root :shell-stack])
@@ -490,8 +487,9 @@
 
 (rf/defn login-only-events
   [{:keys [db] :as cofx} key-uid password save-password?]
-  (let [auth-method     (:auth-method db)
-        new-auth-method (get-new-auth-method auth-method save-password?)]
+  (let [auth-method          (:auth-method db)
+        new-auth-method      (get-new-auth-method auth-method save-password?)
+        pairing-in-progress? (get-in db [:syncing :pairing-in-progress?])]
     (log/debug "[login] login-only-events"
                "auth-method"     auth-method
                "new-auth-method" new-auth-method)
@@ -500,7 +498,8 @@
                :json-rpc/call
                [{:method     "settings_getSettings"
                  :on-success #(do (re-frame/dispatch [::get-settings-callback %])
-                                  (redirect-to-root db))}]}
+                                  (when-not pairing-in-progress?
+                                    (redirect-to-root db)))}]}
               (notifications/load-notification-preferences)
               (when save-password?
                 (keychain/save-user-password key-uid password))
@@ -621,12 +620,12 @@
     (if password
       (rf/merge
        cofx
-       {:db           (update-in db
-                                 [:multiaccounts/login]
-                                 assoc
-                                 :password       password
-                                 :save-password? true)
-        :init-root-fx :progress}
+       {:db       (update-in db
+                             [:multiaccounts/login]
+                             assoc
+                             :password       password
+                             :save-password? true)
+        :set-root :progress}
        login)
       (rf/merge
        cofx
@@ -636,10 +635,10 @@
                   (assoc-in [:keycard :pin :status] nil)
                   (assoc-in [:keycard :pin :login] []))})
        #(if keycard-account?
-          {:init-root-fx :multiaccounts-keycard}
-          {:init-root-fx :profiles})
+          {:set-root :multiaccounts-keycard}
+          {:set-root :profiles})
        #(when goto-key-storage?
-          (navigation/navigate-to-cofx % :actions-not-logged-in nil))))))
+          (navigation/navigate-to % :actions-not-logged-in nil))))))
 
 (rf/defn get-credentials
   [{:keys [db] :as cofx} key-uid]
@@ -725,7 +724,7 @@
 (rf/defn welcome-lets-go
   {:events [:welcome-lets-go]}
   [_]
-  {:init-root-fx :shell-stack})
+  {:set-root :shell-stack})
 
 (rf/defn multiaccount-selected
   {:events [:multiaccounts.login.ui/multiaccount-selected]}
@@ -738,7 +737,7 @@
      cofx
      (merge
       {:db (update db :keycard dissoc :application-info)}
-      (when keycard-multiaccount? {:navigate-to-fx :keycard-login-pin}))
+      (when keycard-multiaccount? {:navigate-to :keycard-login-pin}))
      (open-login (select-keys multiaccount [:key-uid :name :public-key :identicon :images])))))
 
 (rf/defn hide-keycard-banner

src/status_im/multiaccounts/logout/core.cljs

@@ -14,7 +14,7 @@
   [{:keys [db] :as cofx} {:keys [auth-method logout?]}]
   (let [key-uid (get-in db [:multiaccount :key-uid])]
     (rf/merge cofx
-              {:init-root-fx                         :progress
+              {:set-root                             :progress
                :chat.ui/clear-inputs                 nil
                :chat.ui/clear-inputs-old             nil
                :shell/reset-bottom-tabs              nil

src/status_im/multiaccounts/model.cljs

@@ -1,9 +1,8 @@
 (ns status-im.multiaccounts.model)
 
 (defn logged-in?
-  [cofx]
-  (boolean
-   (get-in cofx [:db :multiaccount])))
+  [{:keys [multiaccount]}]
+  (boolean multiaccount))
 
 (defn credentials
   [cofx]

src/status_im/multiaccounts/model_test.cljs

@@ -4,6 +4,6 @@
 
 (deftest logged-in-test
   (testing "multiaccount is defined"
-    (is (multiaccounts.model/logged-in? {:db {:multiaccount {}}})))
+    (is (multiaccounts.model/logged-in? {:multiaccount {}})))
   (testing "multiaccount is not there"
-    (is (not (multiaccounts.model/logged-in? {:db {}})))))
+    (is (not (multiaccounts.model/logged-in? {})))))

src/status_im/multiaccounts/recover/core.cljs

@@ -1,7 +1,7 @@
 (ns status-im.multiaccounts.recover.core
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im2.constants :as constants]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.mnemonic :as mnemonic]
@@ -142,7 +142,7 @@
                   :step :recovery-success)}
      (when (existing-account? multiaccounts key-uid)
        (show-existing-multiaccount-alert key-uid))
-     (navigation/navigate-to-cofx :recover-multiaccount-success nil))))
+     (navigation/navigate-to :recover-multiaccount-success nil))))
 
 (rf/defn enter-phrase-pressed
   {:events [::enter-phrase-pressed]}
@@ -159,8 +159,8 @@
                     :forward-action         :multiaccounts.recover/enter-phrase-next-pressed}
                    :recovered-account? true)
             (update :keycard dissoc :flow))}
-   (bottom-sheet/hide-bottom-sheet)
-   (navigation/navigate-to-cofx :recover-multiaccount-enter-phrase nil)))
+   (bottom-sheet/hide-bottom-sheet-old)
+   (navigation/navigate-to :recover-multiaccount-enter-phrase nil)))
 
 (rf/defn proceed-to-import-mnemonic
   {:events [:multiaccounts.recover/phrase-validated]}
@@ -234,7 +234,7 @@
       {:dispatch [:recovery.ui/keycard-option-pressed]}
       (rf/merge cofx
                 {:db (update db :intro-wizard assoc :step :create-code)}
-                (navigation/navigate-to-cofx :create-password nil)))))
+                (navigation/navigate-to :create-password nil)))))
 
 (rf/defn re-encrypt-pressed
   {:events [:multiaccounts.recover/re-encrypt-pressed]}
@@ -246,7 +246,7 @@
                          :step :select-key-storage
                          :selected-storage-type :default)}
             (if (nfc/nfc-supported?)
-              (navigation/navigate-to-cofx :select-key-storage nil)
+              (navigation/navigate-to :select-key-storage nil)
               (select-storage-next-pressed))))
 
 (rf/defn confirm-password-next-button-pressed

src/status_im/multiaccounts/update/core.cljs

@@ -1,17 +1,29 @@
 (ns status-im.multiaccounts.update.core
-  (:require [status-im2.constants :as constants]
-            [utils.re-frame :as rf]
-            [status-im.utils.types :as types]
-            [taoensso.timbre :as log]))
+  (:require [status-im.utils.types :as types]
+            [status-im2.constants :as constants]
+            [taoensso.timbre :as log]
+            [utils.re-frame :as rf]))
 
-(rf/defn send-multiaccount-update
-  [{:keys [db] :as cofx}]
-  (let [multiaccount                          (:multiaccount db)
-        {:keys [name preferred-name address]} multiaccount]
+(rf/defn send-contact-update
+  [{:keys [db]}]
+  (let [{:keys [name preferred-name display-name address]} (:multiaccount db)]
     {:json-rpc/call [{:method     "wakuext_sendContactUpdates"
-                      :params     [(or preferred-name name) ""]
+                      :params     [(or preferred-name display-name name) ""]
                       :on-success #(log/debug "sent contact update")}]}))
 
+(rf/defn update-multiaccount-account-name
+  "This updates the profile name in the profile list before login"
+  {:events [:multiaccounts.ui/update-name]}
+  [{:keys [db] :as cofx} raw-multiaccounts-from-status-go]
+  (let [{:keys [key-uid name preferred-name
+                display-name]} (:multiaccount db)
+        account                (some #(and (= (:key-uid %) key-uid) %) raw-multiaccounts-from-status-go)]
+    (when-let [new-name (and account (or preferred-name display-name name))]
+      (rf/merge cofx
+                {:json-rpc/call [{:method     "multiaccounts_updateAccount"
+                                  :params     [(assoc account :name new-name)]
+                                  :on-success #(log/debug "sent multiaccount update")}]}))))
+
 (rf/defn multiaccount-update
   "Takes effects (containing :db) + new multiaccount fields, adds all effects necessary for multiaccount update.
   Optionally, one can specify a success-event to be dispatched after fields are persisted."
@@ -25,17 +37,21 @@
       (throw
        (js/Error.
         "Please shake the phone to report this error and restart the app. multiaccount is currently empty, which means something went wrong when trying to update it with"))
-      (rf/merge cofx
-                {:db (if setting-value
-                       (assoc-in db [:multiaccount setting] setting-value)
-                       (update db :multiaccount dissoc setting))
-                 :json-rpc/call
-                 [{:method     "settings_saveSetting"
-                   :params     [setting setting-value]
-                   :on-success on-success}]}
-                (when (and (not dont-sync?)
-                           (#{:name :prefered-name} setting))
-                  (send-multiaccount-update))))))
+      (rf/merge
+       cofx
+       {:db (if setting-value
+              (assoc-in db [:multiaccount setting] setting-value)
+              (update db :multiaccount dissoc setting))
+        :json-rpc/call
+        [{:method     "settings_saveSetting"
+          :params     [setting setting-value]
+          :on-success on-success}]}
+
+       (when (#{:name :preferred-name} setting)
+         (constantly {:setup/open-multiaccounts #(rf/dispatch [:multiaccounts.ui/update-name %])}))
+
+       (when (and (not dont-sync?) (#{:name :preferred-name} setting))
+         (send-contact-update))))))
 
 (rf/defn clean-seed-phrase
   "A helper function that removes seed phrase from storage."
@@ -44,7 +60,7 @@
 
 (defn augment-synchronized-recent-stickers
   "Add 'url' parameter to stickers that are synchronized from other devices.
-   It is not sent from aanother devices but we have it in our db."
+   It is not sent from another devices but we have it in our db."
   [synced-stickers stickers-from-db]
   (mapv #(assoc %
                 :url

src/status_im/multiaccounts/update/core_test.cljs

@@ -1,5 +1,5 @@
 (ns status-im.multiaccounts.update.core-test
-  (:require [clojure.test :refer-macros [deftest is]]
+  (:require [clojure.test :refer-macros [deftest is testing]]
             [status-im.multiaccounts.update.core :as multiaccounts.update]))
 
 (deftest test-multiaccount-update
@@ -21,3 +21,36 @@
         json-rpc (into #{} (map :method (:json-rpc/call efx)))]
     (is (json-rpc "settings_saveSetting"))
     (is (nil? (get-in efx [:db :multiaccount :mnemonic])))))
+
+(deftest test-update-multiaccount-account-name
+  (let [cofx                             {:db {:multiaccount {:key-uid        1
+                                                              :name           "name"
+                                                              :preferred-name "preferred-name"
+                                                              :display-name   "display-name"}}}
+        raw-multiaccounts-from-status-go [{:key-uid 1 :name "old-name"}]]
+    (testing "wrong account"
+      (is (nil? (multiaccounts.update/update-multiaccount-account-name cofx []))))
+    (testing "name priority preferred-name > display-name > name"
+      (let [new-account-name= (fn [efx new-name]
+                                (-> efx
+                                    :json-rpc/call
+                                    first
+                                    :params
+                                    first
+                                    :name
+                                    (= new-name)))]
+        (is (new-account-name=
+             (multiaccounts.update/update-multiaccount-account-name
+              cofx
+              raw-multiaccounts-from-status-go)
+             "preferred-name"))
+        (is (new-account-name=
+             (multiaccounts.update/update-multiaccount-account-name
+              (update-in cofx [:db :multiaccount] dissoc :preferred-name)
+              raw-multiaccounts-from-status-go)
+             "display-name"))
+        (is (new-account-name=
+             (multiaccounts.update/update-multiaccount-account-name
+              (update-in cofx [:db :multiaccount] dissoc :preferred-name :display-name)
+              raw-multiaccounts-from-status-go)
+             "name"))))))

src/status_im/native_module/core.cljs

@@ -628,6 +628,6 @@
   []
   (.keystoreDir ^js (status)))
 
-(defn log-file-path
+(defn log-file-directory
   []
-  (.logFilePath ^js (status)))
+  (.logFileDirectory ^js (status)))

src/status_im/network/core.cljs

@@ -202,4 +202,4 @@
 (rf/defn open-network-details
   {:events [::network-entry-pressed]}
   [cofx network]
-  (navigation/navigate-to-cofx cofx :network-details {:networks/selected-network network}))
+  (navigation/navigate-to cofx :network-details {:networks/selected-network network}))

src/status_im/node/core.cljs

@@ -165,7 +165,7 @@
              :MailserversConfig {:Enabled true}
              :EnableNTPSync true
              :WakuConfig
-             {:Enabled         true
+             {:Enabled         (not wakuv2-enabled)
               :BloomFilterMode waku-bloom-filter-mode
               :LightClient     true
               :MinimumPoW      0.000001}

src/status_im/pairing/core.cljs

@@ -73,7 +73,7 @@
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db (assoc-in db [:pairing/prompt-user-pop-up] false)}
-            (navigation/navigate-to-cofx :installations nil)))
+            (navigation/navigate-to :installations nil)))
 
 (rf/defn prompt-user-on-new-installation
   [{:keys [db]}]
@@ -247,11 +247,11 @@
   [cofx installation-id]
   (rf/merge cofx
             (enable installation-id)
-            (multiaccounts.update/send-multiaccount-update)))
+            (multiaccounts.update/send-contact-update)))
 
 (rf/defn disable-installation-success
   {:events [:pairing.callback/disable-installation-success]}
   [cofx installation-id]
   (rf/merge cofx
             (disable installation-id)
-            (multiaccounts.update/send-multiaccount-update)))
+            (multiaccounts.update/send-contact-update)))

src/status_im/qr_scanner/core.cljs

@@ -66,7 +66,7 @@
       (and public-key own)
       (rf/merge cofx
                 {:pop-to-root-fx :shell-stack}
-                (navigation/navigate-to-cofx :my-profile nil))
+                (navigation/navigate-to :my-profile nil))
 
       (and public-key (not own))
       (rf/merge cofx

src/status_im/signals/core.cljs

@@ -60,27 +60,29 @@
   [{:keys [db] :as cofx} event]
   (log/info "local pairing signal received"
             {:event event})
-  (let [connection-success?             (= (:type event)
-                                           constants/local-pairing-event-connection-success)
+  (let [connection-success?             (and (= (:type event)
+                                                constants/local-pairing-event-connection-success)
+                                             (= (:action event)
+                                                constants/local-pairing-action-connect))
         error-on-pairing?               (contains? constants/local-pairing-event-errors (:type event))
         completed-pairing?              (and (= (:type event)
-                                                constants/local-pairing-event-process-success)
+                                                constants/local-pairing-event-transfer-success)
                                              (= (:action event)
-                                                constants/local-pairing-action-pairing-account))
-        logged-in?                      (multiaccounts.model/logged-in? cofx)
+                                                constants/local-pairing-action-pairing-installation))
+        logged-in?                      (multiaccounts.model/logged-in? db)
         ;; since `connection-success` event is received on both sender and receiver devices
         ;; we check the `logged-in?` status to identify the receiver and take the user to next screen
         navigate-to-syncing-devices?    (and connection-success? (not logged-in?))
         user-in-syncing-devices-screen? (= (:view-id db) :syncing-devices)]
     (merge {:db (cond-> db
                   connection-success?
-                  (assoc :local-pairing/completed-pairing? false)
+                  (assoc-in [:syncing :pairing-in-progress?] true)
 
                   error-on-pairing?
-                  (dissoc :local-pairing/completed-pairing?)
+                  (update-in [:syncing :pairing-in-progress?] dissoc)
 
                   completed-pairing?
-                  (assoc :local-pairing/completed-pairing? true))}
+                  (assoc-in [:syncing :pairing-in-progress?] false))}
            (when navigate-to-syncing-devices?
              {:dispatch [:navigate-to :syncing-devices]})
            (when (and error-on-pairing? user-in-syncing-devices-screen?)
@@ -89,7 +91,9 @@
                              :icon-color     colors/danger-50
                              :override-theme :light
                              :text           (i18n/label :t/error-syncing-connection-failed)}]
-                           [:navigate-back]]}))))
+                           [:navigate-back]]})
+           (when completed-pairing?
+             {:dispatch [:syncing/pairing-completed]}))))
 
 (rf/defn process
   {:events [:signals/signal-received]}

src/status_im/signing/gas.cljs

@@ -1,7 +1,7 @@
 (ns status-im.signing.gas
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im2.common.bottom-sheet.events :as bottom-sheet]
+            [status-im.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [utils.i18n :as i18n]
             [status-im.popover.core :as popover]
@@ -277,7 +277,7 @@
                                                                    max-priority-fee})]
     (rf/merge cofx
               {:db (assoc db :signing/edit-fee edit-fee)}
-              (bottom-sheet/show-bottom-sheet {:view sheet-opts}))))
+              (bottom-sheet/show-bottom-sheet-old {:view sheet-opts}))))
 
 (rf/defn submit-fee
   {:events [:signing.edit-fee.ui/submit]}
@@ -300,14 +300,14 @@
                              :maxFeePerGas         (money/->wei :gwei (:value-number maxFeePerGas))
                              :maxPriorityFeePerGas (money/->wei :gwei
                                                                 (:value-number maxPriorityFeePerGas)))}
-                (bottom-sheet/hide-bottom-sheet)))))
+                (bottom-sheet/hide-bottom-sheet-old)))))
 
 (rf/defn submit-nonce
   {:events [:signing.nonce/submit]}
   [{db :db :as cofx} nonce]
   (rf/merge cofx
             {:db (assoc-in db [:signing/tx :nonce] (if (string/blank? nonce) nil nonce))}
-            (bottom-sheet/hide-bottom-sheet)))
+            (bottom-sheet/hide-bottom-sheet-old)))
 
 (re-frame/reg-fx
  :signing/update-gas-price

src/status_im/ui/components/connectivity/view.cljs

@@ -80,7 +80,7 @@
 
 (defn hide-sheet-and-dispatch
   [event]
-  (re-frame/dispatch [:bottom-sheet/hide])
+  (re-frame/dispatch [:bottom-sheet/hide-old])
   (re-frame/dispatch event))
 
 (defview connectivity-sheet
@@ -187,6 +187,6 @@
       [quo/button
        {:type                :icon
         :accessibility-label (str "conn-button-" (name icon))
-        :on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet
+        :on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                                   {:content connectivity-sheet}])
         :theme               (if (= (:peers state) :offline) :negative :secondary)} icon])))

src/status_im/ui/components/invite/views.cljs

@@ -19,7 +19,7 @@
     :icon                :main-icons/share
     :accessibility-label accessibility-label
     :on-press            (fn []
-                           (re-frame/dispatch [:bottom-sheet/hide])
+                           (re-frame/dispatch [:bottom-sheet/hide-old])
                            (js/setTimeout
                             #(re-frame/dispatch [::invite.events/share-link nil])
                             250))}])

src/status_im/ui/components/topbar.cljs

@@ -9,7 +9,7 @@
   [modal? {:keys [on-press label icon]}]
   (cond-> {:icon                (if modal? :i/close :i/arrow-left)
            :accessibility-label :back-button
-           :on-press            #(re-frame/dispatch [:navigate-back :bottom-sheet/hide])}
+           :on-press            #(re-frame/dispatch [:navigate-back :bottom-sheet/hide-old])}
     on-press
     (assoc :on-press on-press)
 

src/status_im/ui/screens/browser/empty_tab/views.cljs

@@ -18,7 +18,7 @@
 
 (defn hide-sheet-and-dispatch
   [event]
-  (re-frame/dispatch [:bottom-sheet/hide])
+  (re-frame/dispatch [:bottom-sheet/hide-old])
   (js/setTimeout #(re-frame/dispatch event) 200))
 
 (defn list-item
@@ -30,7 +30,7 @@
         :on-press            #(re-frame/dispatch [:browser.ui/open-url url])
         :on-long-press       (fn []
                                (re-frame/dispatch
-                                [:bottom-sheet/show-sheet
+                                [:bottom-sheet/show-sheet-old
                                  {:content (fn []
                                              [react/view {:flex 1}
                                               [quo/list-item
@@ -109,7 +109,7 @@
      [quo/button
       {:accessibility-label :select-account
        :type                :scale
-       :on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet
+       :on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                                  {:content (accounts/accounts-list accounts
                                                                                    dapps-account)}])}
       [react/view (styles/dapps-account color)