wip

https://github.com/status-im/status-go/compare/12c4e869...3f613a92

doc/import-assets.md

@@ -19,5 +19,5 @@
 Make sure to compress images before using into project.
 ```
 make shell
-./scrips/compress_image.sh image_path
+./scripts/compress_image.sh image_path
 ```

nix/overlay.nix

@@ -51,7 +51,6 @@ in {
   };
 
   # Package version adjustments
-  gradle = super.gradle_8.override { java = super.openjdk17_headless; };
   nodejs = super.nodejs_20;
   ruby = super.ruby_3_1;
   yarn = super.yarn.override { nodejs = super.nodejs_20; };

nix/pkgs.nix

@@ -6,8 +6,16 @@ let
   # For testing local version of nixpkgs
   #nixpkgsSrc = (import <nixpkgs> { }).lib.cleanSource "/home/jakubgs/work/nixpkgs";
 
-  # We use a commit from the unstable channel of nixpkgs for gradle 8.8
+  # We follow release 24-05 of nixpkgs
+  # https://github.com/NixOS/nixpkgs/releases/tag/24.05
   nixpkgsSrc = builtins.fetchTarball {
+    url = "https://github.com/NixOS/nixpkgs/archive/df27247e6f3e636c119e2610bf12d38b5e98cc79.tar.gz";
+    sha256 = "sha256:0bbvimk7xb7akrx106mmsiwf9nzxnssisqmqffla03zz51d0kz2n";
+  };
+
+  # FIXME: remove this additional source when nixpkgs includes gradle 8.8 in stable channel
+  # We use a commit from the unstable channel of nixpkgs for gradle 8.8
+  gradleNixpkgsSrc = builtins.fetchTarball {
     url = "https://github.com/NixOS/nixpkgs/archive/48d567fc7b299de90f70a48e4263e31f690ba03e.tar.gz";
     sha256 = "sha256:0zynbk52khdfhg4qfv26h3r5156xff5p0cga2cin7b07i7lqminh";
   };
@@ -21,6 +29,14 @@ let
   # Override some packages and utilities
   pkgsOverlay = import ./overlay.nix;
 
+  # FIXME: remove this additional source when nixpkgs includes gradle 8.8 in stable channel
+  gradleOverlay = final: prev: {
+    gradle = (import gradleNixpkgsSrc {
+      inherit (prev) system;
+      config = defaultConfig // config;
+    }).gradle_8.override { java = prev.openjdk17_headless; };
+  };
+
   # Fix for lack of Android SDK for M1 Macs.
   systemOverride = let
     inherit (builtins) currentSystem getEnv;
@@ -35,5 +51,5 @@ in
   (import nixpkgsSrc) {
     config = defaultConfig // config;
     system = systemOverride;
-    overlays = [ pkgsOverlay ];
+    overlays = [ pkgsOverlay gradleOverlay ];
   }

nix/status-go/library/default.nix

@@ -1,4 +1,5 @@
-{ lib, stdenv, meta, source, buildGoPackage }:
+{ lib, stdenv, meta, source, buildGoPackage,
+  go-bindata, mockgen, protoc-gen-go, protobuf3_20 }:
 
 buildGoPackage {
   pname = source.repo;
@@ -7,6 +8,10 @@ buildGoPackage {
   inherit meta;
   inherit (source) src goPackagePath;
 
+  nativeBuildInputs = [
+    go-bindata mockgen protoc-gen-go protobuf3_20
+  ];
+
   phases = ["unpackPhase" "configurePhase" "buildPhase"];
 
   # https://pkg.go.dev/net#hdr-Name_Resolution
@@ -22,6 +27,7 @@ buildGoPackage {
   preBuild = ''
     pushd go/src/$goPackagePath
     go run cmd/library/*.go > $NIX_BUILD_TOP/main.go
+    make generate SHELL=$SHELL GO111MODULE=on GO_GENERATE_CMD='go generate'
     popd
   '';
 

nix/status-go/mobile/build.nix

@@ -1,5 +1,6 @@
 { callPackage, lib, buildGoPackage
 , androidPkgs, openjdk, gomobile, xcodeWrapper, removeReferencesTo
+, go-bindata, mockgen, protobuf3_20, protoc-gen-go
 , meta
 , source
 , platform ? "android"
@@ -15,7 +16,7 @@ let
   isAndroid = platform == "android";
   enforceXCodeAvailable = callPackage ./enforceXCodeAvailable.nix { };
 
-in buildGoPackage {
+in buildGoPackage rec {
   pname = source.repo;
   version = "${source.cleanVersion}-${source.shortRev}-${platform}";
 
@@ -27,8 +28,9 @@ in buildGoPackage {
   __noChroot = isIOS;
 
   extraSrcPaths = [ gomobile ];
-  nativeBuildInputs = [ gomobile removeReferencesTo ]
-    ++ optional isAndroid openjdk
+  nativeBuildInputs = [
+    gomobile removeReferencesTo go-bindata mockgen protoc-gen-go protobuf3_20
+  ] ++ optional isAndroid openjdk
     ++ optional isIOS xcodeWrapper;
 
   ldflags = goBuildLdFlags;
@@ -44,6 +46,13 @@ in buildGoPackage {
   # TODO: try removing when go is upgraded to 1.22
   GODEBUG = "netdns=cgo+2";
 
+  preBuild = ''
+    echo 'Generate static files'
+    pushd go/src/$goPackagePath
+    make generate SHELL=$SHELL GO111MODULE=on GO_GENERATE_CMD='go generate'
+    popd
+  '';
+
   buildPhase = ''
     runHook preBuild
     echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"

resources/config/fleets.json

@@ -180,17 +180,17 @@
         },
         "shards.staging": {
             "tcp/p2p/waku/boot": {
-                "boot-01.do-ams3.shards.staging": "/dns4/boot-01.do-ams3.shards.staging.status.im/tcp/30303/p2p/16Uiu2HAmEqqio4UR1SWqAc7KY19t6qyDvtmyjreZpzUBJvb4u65R",
+                "boot-01.do-ams3.shards.staging": "/dns4/boot-01.do-ams3.shards.staging.status.im/tcp/30303/p2p/16Uiu2HAmQE7FXQc6iZHdBzYfw3qCSDa9dLc1wsBJKoP4aZvztq2d",
                 "boot-01.gc-us-central1-a.shards.staging": "/dns4/boot-01.gc-us-central1-a.shards.staging.status.im/tcp/30303/p2p/16Uiu2HAmGAA54bBTE78MYidSy3P7Q9yAWFNTAEReJYD69VRvtL5r",
                 "boot-01.ac-cn-hongkong-c.shards.staging": "/dns4/boot-01.ac-cn-hongkong-c.shards.staging.status.im/tcp/30303/p2p/16Uiu2HAmNTpGnyZ8W1BK2sXEmgSCNWiyDKgRU3NBR2DXST2HzxRU"
             },
             "enr/p2p/waku/boot": {
-                "boot-01.do-ams3.shards.staging": "enr:-QEQuEDsh6FgAb_36cReaX7W4gWx_7_GNpsUki7bXMoMrrrWij5pDEyV3guR-urDW_6GJTAzpQiJV61F-CfNn_NxPbY-AYJpZIJ2NIJpcISPxvrpim11bHRpYWRkcnO4YAAtNihib290LTAxLmRvLWFtczMuc2hhcmRzLnN0YWdpbmcuc3RhdHVzLmltBnZfAC82KGJvb3QtMDEuZG8tYW1zMy5zaGFyZHMuc3RhZ2luZy5zdGF0dXMuaW0GAbveA4Jyc40AEAUAAQAgAEAAgAEAiXNlY3AyNTZrMaEDIH8BcuEzgnmwPQTu7BPYyg4u4om7K9qekKA2gT_H2wSDdGNwgnZfg3VkcIIjKIV3YWt1Mg0",
+                "boot-01.do-ams3.shards.staging": "enr:-QEQuEBuiQgFlJNcv255042zwyl4pOBOivakX8N30Dr9vaaEU2q8-7N4GVY4Hk87iEKELjlIXTpE9Wj6EQq1lrBuc7ayAYJpZIJ2NIJpcISPxvrpim11bHRpYWRkcnO4YAAtNihib290LTAxLmRvLWFtczMuc3RhdHVzLnN0YWdpbmcuc3RhdHVzLmltBnZfAC82KGJvb3QtMDEuZG8tYW1zMy5zdGF0dXMuc3RhZ2luZy5zdGF0dXMuaW0GAbveA4Jyc40AEAUAAQAgAEAAgAEAiXNlY3AyNTZrMaEDq-yGgpuoUG6NKkbIDRmrMiT-bEVzFlpWLEK_rF3yKUaDdGNwgnZfg3VkcIIjKIV3YWt1Mg0",
                 "boot-01.gc-us-central1-a.shards.staging": "enr:-QEiuECWCuk1CoefbPYUV_cff27t-471k_QhJ_MvgOUQmRE4vgI6h9fD4LgXy7TZNSFXeBBP9haWJB7lx8Wujx-LPmhrAYJpZIJ2NIJpcIRoxQVgim11bHRpYWRkcnO4cgA2NjFib290LTAxLmdjLXVzLWNlbnRyYWwxLWEuc2hhcmRzLnN0YWdpbmcuc3RhdHVzLmltBnZfADg2MWJvb3QtMDEuZ2MtdXMtY2VudHJhbDEtYS5zaGFyZHMuc3RhZ2luZy5zdGF0dXMuaW0GAbveA4Jyc40AEAUAAQAgAEAAgAEAiXNlY3AyNTZrMaEDNAvlGjekD1YV4WpmjwArGAH2g9kHFJnMRfgUhcIkoA2DdGNwgnZfg3VkcIIjKIV3YWt1Mg0",
                 "boot-01.ac-cn-hongkong-c.shards.staging": "enr:-QEiuEAcHWW7aNBtJhigTCAnKu9-H1b98SWpBJkGm3PAxth5QjJA0kdiabOfou4HgCD6RuyZEnFE5L8ymahouw3kWRiWAYJpZIJ2NIJpcIQvTKi6im11bHRpYWRkcnO4cgA2NjFib290LTAxLmFjLWNuLWhvbmdrb25nLWMuc2hhcmRzLnN0YWdpbmcuc3RhdHVzLmltBnZfADg2MWJvb3QtMDEuYWMtY24taG9uZ2tvbmctYy5zaGFyZHMuc3RhZ2luZy5zdGF0dXMuaW0GAbveA4Jyc40AEAUAAQAgAEAAgAEAiXNlY3AyNTZrMaEDkbgV7oqPNmFtX5FzSPi9WH8kkmrPB1R3n9xRXge91M-DdGNwgnZfg3VkcIIjKIV3YWt1Mg0"
             },
             "wss/p2p/waku/boot": {
-                "boot-01.do-ams3.shards.staging": "/dns4/boot-01.do-ams3.shards.staging.status.im/tcp/443/wss/p2p/16Uiu2HAmEqqio4UR1SWqAc7KY19t6qyDvtmyjreZpzUBJvb4u65R",
+                "boot-01.do-ams3.shards.staging": "/dns4/boot-01.do-ams3.shards.staging.status.im/tcp/443/wss/p2p/16Uiu2HAmQE7FXQc6iZHdBzYfw3qCSDa9dLc1wsBJKoP4aZvztq2d",
                 "boot-01.gc-us-central1-a.shards.staging": "/dns4/boot-01.gc-us-central1-a.shards.staging.status.im/tcp/443/wss/p2p/16Uiu2HAmGAA54bBTE78MYidSy3P7Q9yAWFNTAEReJYD69VRvtL5r",
                 "boot-01.ac-cn-hongkong-c.shards.staging": "/dns4/boot-01.ac-cn-hongkong-c.shards.staging.status.im/tcp/443/wss/p2p/16Uiu2HAmNTpGnyZ8W1BK2sXEmgSCNWiyDKgRU3NBR2DXST2HzxRU"
             },

src/js/worklets/chat/messenger/navigation.js

@@ -1,47 +0,0 @@
-import { useDerivedValue, withTiming, interpolate } from 'react-native-reanimated';
-
-export function navigationHeaderOpacity(distanceFromListTop, isAllLoaded, isCalculationsComplete, startPosition) {
-  return useDerivedValue(function () {
-    'worklet';
-    const isCalculationsCompleteValue = isCalculationsComplete.value;
-    if (distanceFromListTop.value < startPosition && isAllLoaded.value) {
-      return isCalculationsCompleteValue ? withTiming(0) : 0;
-    } else {
-      return isCalculationsCompleteValue ? withTiming(1) : 1;
-    }
-  });
-}
-
-export function navigationHeaderPosition(distanceFromListTop, isAllLoaded, topBarHeight, startPosition) {
-  return useDerivedValue(function () {
-    'worklet';
-    return distanceFromListTop.value < startPosition && isAllLoaded.value ? withTiming(topBarHeight) : withTiming(0);
-  });
-}
-
-export function navigationButtonsCompleteOpacity(isCalculationComplete) {
-  return useDerivedValue(function () {
-    'worklet';
-    return isCalculationComplete.value ? withTiming(1) : 0;
-  });
-}
-
-export function interpolateNavigationViewOpacity(props) {
-  return useDerivedValue(function () {
-    'worklet';
-    const {
-      'all-loaded?': isAllLoaded,
-      'end-position': endPosition,
-      'start-position': startPosition,
-      'distance-from-list-top': distanceFromListTop,
-    } = props;
-    if (isAllLoaded.value) {
-      return interpolate(distanceFromListTop.value, [startPosition, endPosition], [0, 1], {
-        extrapolateLeft: 'clamp',
-        extrapolateRight: 'clamp',
-      });
-    } else {
-      return 1;
-    }
-  });
-}

src/js/worklets/chat/messenger/placeholder.js

@@ -1,15 +0,0 @@
-import { useDerivedValue } from 'react-native-reanimated';
-
-export function placeholderOpacity(isCalculationsComplete) {
-  return useDerivedValue(function () {
-    'worklet';
-    return isCalculationsComplete.value ? 0 : 1;
-  });
-}
-
-export function placeholderZIndex(isCalculationsComplete) {
-  return useDerivedValue(function () {
-    'worklet';
-    return isCalculationsComplete.value ? 0 : 2;
-  });
-}

src/legacy/status_im/pairing/core.cljs

@@ -256,9 +256,10 @@
   {:events [:pairing/pair-and-sync]}
   [cofx installation-id]
   {:fx [[:json-rpc/call
-         [{:method     "wakuext_enableInstallationAndSync"
-           :params     [{:installationId installation-id}]
-           :on-success #(log/debug "successfully synced devices")}]]]})
+         [{:method      "wakuext_enableInstallationAndSync"
+           :params      [{:installationId installation-id}]
+           :js-response true
+           :on-success  [:sanitize-messages-and-process-response]}]]]})
 
 (rf/defn enable-installation-success
   {:events [:pairing.callback/enable-installation-success]}

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

@@ -65,7 +65,7 @@
                                                       :type            type
                                                       :include-button? include-button?})
                                     style)}
-       [icons/icon icon
+       [icons/icon (or icon :i/info)
         {:color           (style/get-color-by-type theme type :icon)
          :no-color        no-icon-color?
          :size            (or icon-size 16)

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

@@ -1,6 +1,7 @@
 (ns quo.components.list-items.network-list.view
   (:require
     [clojure.string :as string]
+    [quo.components.icon :as icon]
     [quo.components.list-items.network-list.style :as style]
     [quo.components.markdown.text :as text]
     [quo.theme :as quo.theme]
@@ -42,8 +43,8 @@
      [:map {:closed true}
       [:network-image :int]
       [:label :string]
-      [:fiat-value :string]
-      [:token-value :string]
+      [:fiat-value {:optional true} [:maybe :string]]
+      [:token-value {:optional true} [:maybe :string]]
       [:container-style {:optional true} [:maybe :map]]
       [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
       [:state {:optional true} [:enum :pressed :active :disabled :default]]
@@ -51,7 +52,7 @@
    :any])
 
 (defn- view-internal
-  [{:keys [on-press container-style state customization-color]
+  [{:keys [fiat-value token-value on-press container-style state customization-color]
     :as   props
     :or   {customization-color :blue}}]
   (let [theme                  (quo.theme/use-theme)
@@ -67,6 +68,8 @@
       :on-press            (when-not (= state :disabled) on-press)
       :accessibility-label :network-list}
      [info props]
-     [values props]]))
+     (if (or token-value fiat-value)
+       [values props]
+       [icon/icon :i/chevron-right])]))
 
 (def view (schema/instrument #'view-internal ?schema))

src/quo/components/markdown/list/style.cljs

@@ -4,12 +4,10 @@
   [container-style]
   (merge container-style
          {:flex-direction :row
-          :flex           1
           :align-items    :flex-start}))
 
 (def index
   {:margin-left 5})
 
 (def text-container
-  {:margin-left 8
-   :flex        1})
+  {:margin-left 8})

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

@@ -32,7 +32,8 @@
     [rn/pressable
      (when-not disabled?
        {:on-press                on-press
-        :allow-multiple-presses? true})
+        :allow-multiple-presses? true
+        :hit-slop                12})
      [rn/view
       {:style                             outer-styles
        :needs-offscreen-alpha-compositing true

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

@@ -75,3 +75,16 @@
 
 (def fiat-amount
   {:color colors/neutral-50})
+
+(def gradient-common
+  {:width    64
+   :position :absolute
+   :top      0
+   :bottom   0
+   :z-index  1})
+
+(def gradient-start
+  (assoc gradient-common :left 0))
+
+(def gradient-end
+  (assoc gradient-common :right 0))

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

@@ -11,6 +11,7 @@
             [quo.foundations.colors :as colors]
             quo.theme
             [react-native.core :as rn]
+            [react-native.linear-gradient :as linear-gradient]
             [schema.core :as schema]))
 
 (def ?schema
@@ -18,6 +19,7 @@
    [:catn
     [:props
      [:map {:closed true}
+      [:get-ref {:optional true} [:maybe fn?]]
       [:type {:optional true} [:maybe [:enum :pay :receive]]]
       [:status {:optional true} [:maybe [:enum :default :typing :disabled :loading]]]
       [:token {:optional true} [:maybe :string]]
@@ -42,26 +44,65 @@
       [:container-style {:optional true} [:maybe :map]]]]]
    :any])
 
+(def icon-size 32)
+(def container-padding (* 2 (:padding (style/row-1 false))))
+(def max-cursor-position 5)
+
 (defn view-internal
   [{:keys [type status token value fiat-value show-approval-label? error? network-tag-props
            approval-label-props default-value auto-focus? input-disabled? enable-swap?
-           currency-symbol on-change-text show-keyboard?
+           currency-symbol on-change-text show-keyboard? get-ref
            container-style on-swap-press on-token-press on-max-press on-input-focus]}]
-  (let [theme             (quo.theme/use-theme)
-        pay?              (= type :pay)
-        disabled?         (= status :disabled)
-        loading?          (= status :loading)
-        typing?           (= status :typing)
-        controlled-input? (some? value)
-        input-ref         (rn/use-ref-atom nil)
-        set-input-ref     (rn/use-callback (fn [ref] (reset! input-ref ref)) [])
-        focus-input       (rn/use-callback (fn []
-                                             (some-> @input-ref
-                                                     (oops/ocall "focus")))
-                                           [input-ref])]
+  (let [theme                        (quo.theme/use-theme)
+        pay?                         (= type :pay)
+        disabled?                    (= status :disabled)
+        loading?                     (= status :loading)
+        typing?                      (= status :typing)
+        controlled-input?            (some? value)
+        [container-width
+         set-container-width]        (rn/use-state)
+        [overflow?
+         set-overflow?]              (rn/use-state false)
+        [cursor-close-to-start?
+         set-cursor-close-to-start?] (rn/use-state false)
+        [label-width
+         set-label-width]            (rn/use-state 0)
+        input-ref                    (rn/use-ref-atom nil)
+        set-input-ref                (rn/use-callback (fn [ref]
+                                                        (reset! input-ref ref)
+                                                        (when get-ref (get-ref ref)))
+                                                      [])
+        focus-input                  (rn/use-callback (fn []
+                                                        (some-> @input-ref
+                                                                (oops/ocall "focus")))
+                                                      [input-ref])
+        on-layout-container          (rn/use-callback
+                                      (fn [e]
+                                        (let [width (oops/oget e "nativeEvent.layout.width")]
+                                          (set-container-width width))))
+        on-layout-text-input         (rn/use-callback
+                                      (fn [e]
+                                        (let [width     (oops/oget e "nativeEvent.layout.width")
+                                              max-width (- container-width
+                                                           icon-size
+                                                           container-padding
+                                                           (* label-width 2))]
+                                          (set-overflow? (> width max-width))))
+                                      [container-width label-width])
+        on-layout-label              (rn/use-callback
+                                      (fn [e]
+                                        (let [width (oops/oget e "nativeEvent.layout.width")]
+                                          (set-label-width width))))
+        on-selection-change          (rn/use-callback
+                                      (fn [e]
+                                        (let [selection-start (oops/oget e
+                                                                         "nativeEvent.selection.start")]
+                                          (set-cursor-close-to-start?
+                                           (< selection-start max-cursor-position)))))]
     [rn/view
      {:style               container-style
-      :accessibility-label :swap-input}
+      :accessibility-label :swap-input
+      :on-layout           on-layout-container}
      [rn/view {:style (style/content typing? theme)}
       [rn/view
        {:style (style/row-1 loading?)}
@@ -75,25 +116,43 @@
           [rn/pressable
            {:style    style/input-container
             :on-press focus-input}
-           [rn/text-input
-            (cond-> {:ref                      set-input-ref
-                     :style                    (style/input disabled? error? theme)
-                     :placeholder-text-color   (colors/theme-colors colors/neutral-40
-                                                                    colors/neutral-50
-                                                                    theme)
-                     :keyboard-type            :numeric
-                     :editable                 (not input-disabled?)
-                     :auto-focus               auto-focus?
-                     :on-focus                 on-input-focus
-                     :on-change-text           on-change-text
-                     :show-soft-input-on-focus show-keyboard?
-                     :default-value            default-value
-                     :placeholder              "0"}
-              controlled-input? (assoc :value value))]
+           [rn/view {:style {:flex-shrink 1}}
+            (when (and overflow? typing? (not cursor-close-to-start?))
+              [linear-gradient/linear-gradient
+               {:start  {:x 0 :y 0}
+                :end    {:x 1 :y 0}
+                :colors [(colors/theme-colors colors/white colors/neutral-100 theme)
+                         (colors/theme-colors colors/white-opa-10 colors/neutral-100-opa-10 theme)]
+                :style  style/gradient-start}])
+            (when (and overflow? disabled?)
+              [linear-gradient/linear-gradient
+               {:start  {:x 0 :y 0}
+                :end    {:x 1 :y 0}
+                :colors [(colors/theme-colors colors/white-opa-10 colors/neutral-100-opa-10 theme)
+                         (colors/theme-colors colors/white colors/neutral-100 theme)]
+                :style  style/gradient-end}])
+            [rn/text-input
+             (cond-> {:ref                      set-input-ref
+                      :style                    (style/input disabled? error? theme)
+                      :placeholder-text-color   (colors/theme-colors colors/neutral-40
+                                                                     colors/neutral-50
+                                                                     theme)
+                      :keyboard-type            :numeric
+                      :editable                 (not input-disabled?)
+                      :auto-focus               auto-focus?
+                      :on-focus                 on-input-focus
+                      :on-change-text           on-change-text
+                      :on-layout                on-layout-text-input
+                      :on-selection-change      on-selection-change
+                      :show-soft-input-on-focus show-keyboard?
+                      :default-value            default-value
+                      :placeholder              "0"}
+               controlled-input? (assoc :value value))]]
            [text/text
-            {:size   :paragraph-2
-             :weight :semi-bold
-             :style  (style/token-symbol theme)}
+            {:size      :paragraph-2
+             :weight    :semi-bold
+             :style     (style/token-symbol theme)
+             :on-layout on-layout-label}
             token]]
           (when (and pay? enable-swap?)
             [buttons/button

src/status_im/common/resources.cljs

@@ -17,6 +17,7 @@
    :generate-keys1                (js/require "../resources/images/ui2/generating-keys-1.png")
    :ethereum-address              (js/require "../resources/images/ui2/ethereum-address.png")
    :use-keycard                   (js/require "../resources/images/ui2/keycard.png")
+   :check-your-keycard            (js/require "../resources/images/ui2/check-your-keycard.png")
    :onboarding-illustration       (js/require "../resources/images/ui2/onboarding_illustration.png")
    :qr-code                       (js/require "../resources/images/ui2/qr-code.png")
    :keycard-logo                  (js/require "../resources/images/ui2/keycard-logo.png")

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

@@ -17,7 +17,7 @@
    user])
 
 (defn view
-  [{:keys [layout-height]}]
+  [layout-height]
   (let [suggestions                               (rf/sub [:chat/mention-suggestions])
         suggestions?                              (seq suggestions)
         theme                                     (quo.theme/use-theme)

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

@@ -35,7 +35,7 @@
         :default-value            default-value}])))
 
 (defn view
-  [props]
+  [layout-height]
   (let [theme     (quo.theme/use-theme)
         bottom    (safe-area/get-bottom)
         input-ref (rn/use-ref-atom nil)
@@ -43,7 +43,7 @@
                                      (rf/dispatch [:chat/set-input-ref value])
                                      (reset! input-ref value)))]
     [rn/view {:style {:margin-bottom bottom}}
-     [mentions/view props]
+     [mentions/view layout-height]
      [quo/separator]
      [rn/view {:style {:padding-horizontal 20 :padding-top 20}}
       [:<>

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

@@ -3,15 +3,4 @@
 ;;;; Navigation
 (def ^:const top-bar-height 56)
 (def ^:const pinned-banner-height 40)
-(def ^:const header-container-top-margin 48)
 (def ^:const header-container-radius 20)
-(def ^:const header-animation-distance 20)
-(def ^:const content-animation-start-position-android 130)
-(def ^:const content-animation-start-position-ios 124)
-;; Note - We should also consider height of bio for banner animation starting position
-;; Todo - Should be updated once New-profile implemation is complete
-(def ^:const pinned-banner-animation-start-position 148)
-
-(def ^:const default-extrapolation-option
-  {:extrapolateLeft  "clamp"
-   :extrapolateRight "clamp"})

src/status_im/contexts/chat/messenger/messages/contact_requests/bottom_drawer/view.cljs

@@ -11,25 +11,23 @@
 
 (defn view
   [{:keys [contact-id]}]
-  (let [customization-color                          (rf/sub [:profile/customization-color])
-        [primary-name _]                             (rf/sub [:contacts/contact-two-names-by-identity
-                                                              contact-id])
-        {:keys [contact-request-state community-id]} (rf/sub [:chats/current-chat-chat-view])
-        chat-type                                    (rf/sub [:chats/chat-type])
-        community-chat?                              (= chat-type :community-chat)
-        joined                                       (when community-chat?
-                                                       (rf/sub [:communities/community-joined
-                                                                community-id]))
-        pending?                                     (when community-chat?
-                                                       (rf/sub [:communities/my-pending-request-to-join
-                                                                community-id]))
-        contact-request-send?                        (or (not contact-request-state)
-                                                         (= contact-request-state
-                                                            constants/contact-request-state-none))
-        contact-request-received?                    (= contact-request-state
-                                                        constants/contact-request-state-received)
-        contact-request-pending?                     (= contact-request-state
-                                                        constants/contact-request-state-sent)]
+  (let [customization-color       (rf/sub [:profile/customization-color])
+        [primary-name _]          (rf/sub [:contacts/contact-two-names-by-identity contact-id])
+        {:keys [contact-request-state
+                community-id]}    (rf/sub [:chats/current-chat-chat-view])
+        chat-type                 (rf/sub [:chats/chat-type])
+        community-chat?           (= chat-type :community-chat)
+        joined                    (when community-chat?
+                                    (rf/sub [:communities/community-joined community-id]))
+        pending?                  (when community-chat?
+                                    (rf/sub [:communities/my-pending-request-to-join community-id]))
+        contact-request-send?     (or (not contact-request-state)
+                                      (= contact-request-state
+                                         constants/contact-request-state-none))
+        contact-request-received? (= contact-request-state
+                                     constants/contact-request-state-received)
+        contact-request-pending?  (= contact-request-state
+                                     constants/contact-request-state-sent)]
     [rn/view {:style style/container}
      [quo/permission-context
       {:blur?        true

src/status_im/contexts/chat/messenger/messages/list/style.cljs

@@ -1,11 +1,11 @@
 (ns status-im.contexts.chat.messenger.messages.list.style
   (:require
     [quo.foundations.colors :as colors]
-    [quo.foundations.shadows :as shadows]
-    [react-native.reanimated :as reanimated]
+    [react-native.safe-area :as safe-area]
     [status-im.contexts.chat.messenger.messages.constants :as messages.constants]))
 
 (def permission-context-height 46)
+(def distance-from-last-message 4)
 
 (defn keyboard-avoiding-container
   [theme]
@@ -13,70 +13,13 @@
    :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
    :z-index          2})
 
-(defn background-container
-  [background-color background-opacity top-margin]
-  (reanimated/apply-animations-to-style
-   {:opacity background-opacity}
-   {:background-color background-color
-    :position         :absolute
-    :top              0
-    :left             0
-    :right            0
-    :height           (+ top-margin messages.constants/header-container-radius)}))
+(def permission-context-sheet {:flex 3}) ; Pushes composer to bottom
 
-(defn header-bottom-container
-  [bottom top-margin]
-  (reanimated/apply-animations-to-style
-   {:bottom bottom}
-   {:margin-top top-margin}))
-
-(defn header-bottom-part
-  [theme]
-  {:background-color   (colors/theme-colors colors/white colors/neutral-95 theme)
-   :padding-horizontal 20
-   :border-radius      20})
-
-(defn header-bottom-shadow
-  [theme]
-  (assoc
-   (shadows/get 2 theme :inverted)
-   :left          0
-   :right         0
-   :height        40
-   :position      :absolute
-   :border-radius 20))
-
-(defn header-image
-  [scale top left theme]
-  (reanimated/apply-animations-to-style
-   {:transform [{:scale scale}]
-    :top       top
-    :left      left}
-   {:position         :absolute
-    :border-width     4
-    :border-radius    50
-    :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
-    :border-color     (colors/theme-colors colors/white colors/neutral-95 theme)}))
-
-(defn user-name-container
-  [top left]
-  (reanimated/apply-animations-to-style
-   {:top  top
-    :left left}
-   {:z-index -1}))
-
-(def user-name
-  {:align-items    :center
-   :flex-direction :row
-   :margin-top     52})
-
-(defn bio-and-actions
-  [top]
-  (reanimated/apply-animations-to-style
-   {:top top}
-   {:row-gap 16}))
-
-(defn permission-context-sheet
-  [margin-bottom?]
-  {:flex          3 ;; Pushes composer to bottom
-   :margin-bottom (when margin-bottom? permission-context-height)})
+(defn list-paddings
+  [add-padding-bottom?]
+  (let [{:keys [top bottom]} (safe-area/get-insets)]
+    ;; WARNING: the flat-list is reversed, so the paddings are applied inverted
+    {:padding-top    (if add-padding-bottom?
+                       (+ distance-from-last-message permission-context-height bottom)
+                       distance-from-last-message)
+     :padding-bottom (+ top messages.constants/top-bar-height)}))

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -1,6 +1,5 @@
 (ns status-im.contexts.chat.messenger.messages.list.view
   (:require
-    [clojure.string :as string]
     [legacy.status-im.ui.screens.chat.group :as chat.group]
     [oops.core :as oops]
     [quo.core :as quo]
@@ -11,11 +10,9 @@
     [react-native.hooks :as hooks]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [react-native.safe-area :as safe-area]
     [status-im.common.home.actions.view :as home.actions]
     [status-im.constants :as constants]
     [status-im.contexts.chat.messenger.composer.constants :as composer.constants]
-    [status-im.contexts.chat.messenger.messages.constants :as messages.constants]
     [status-im.contexts.chat.messenger.messages.content.view :as message]
     [status-im.contexts.chat.messenger.messages.list.state :as state]
     [status-im.contexts.chat.messenger.messages.list.style :as style]
@@ -25,8 +22,7 @@
     [utils.re-frame :as rf]
     [utils.worklets.chat.messenger.messages :as worklets]))
 
-(defonce ^:const distance-from-last-message 4)
-(defonce ^:const loading-indicator-page-loading-height 100)
+(def ^:const loading-indicator-page-loading-height 100)
 
 (defn list-key-fn [{:keys [message-id value]}] (or message-id value))
 (defn list-ref [ref] (reset! state/messages-list-ref ref))
@@ -60,44 +56,17 @@
                                                    on-loaded])
                                     (if platform/low-device? 700 100)))))
 
-(defn- contact-icon
-  [{:keys [ens-verified added?]} theme]
-  (when (or ens-verified added?)
-    [rn/view
-     {:style {:margin-left 4}}
-     (if ens-verified
-       [quo/icon :i/verified
-        {:no-color true
-         :size     20
-         :color    (colors/theme-colors
-                    (colors/custom-color :success 50)
-                    (colors/custom-color :success 60)
-                    theme)}]
-       (when added?
-         [quo/icon :i/contact
-          {:no-color true
-           :size     20
-           :color    (colors/theme-colors colors/primary-50 colors/primary-60 theme)}]))]))
-
-(defn- skeleton-list-props
-  [content parent-height animated?]
-  {:content       content
-   :parent-height parent-height
-   :animated?     animated?})
-
 (defn loading-view
-  [chat-id {:keys [window-height]}]
+  [{:keys [chat-id window-height]}]
   (let [messages            (rf/sub [:chats/raw-chat-messages-stream chat-id])
         loading-first-page? (= (count messages) 0)
-        top-spacing         (if loading-first-page?
-                              0
-                              (+ messages.constants/top-bar-height (safe-area/get-top)))
         parent-height       (if loading-first-page?
                               window-height
                               loading-indicator-page-loading-height)]
-    [rn/view {:padding-top top-spacing}
-     ;; Don't use animated loading skeleton https://github.com/status-im/status-mobile/issues/17426
-     [quo/skeleton-list (skeleton-list-props :messages parent-height false)]]))
+    [quo/skeleton-list
+     {:content       :messages
+      :parent-height parent-height
+      :animated?     false}]))
 
 (defn header-height
   [{:keys [insets able-to-send-message? images reply edit link-previews? input-content-height]}]
@@ -125,84 +94,6 @@
       (+ (:bottom insets)))
     (- 70 (:bottom insets))))
 
-(defn list-header
-  [insets able-to-send-message?]
-  (let [header-data {:insets                insets
-                     :able-to-send-message? able-to-send-message?
-                     :input-content-height  (:input-content-height (rf/sub [:chats/current-chat-input]))
-                     :images                (rf/sub [:chats/sending-image])
-                     :reply                 (rf/sub [:chats/reply-message])
-                     :edit                  (rf/sub [:chats/edit-message])
-                     :link-previews?        (or (rf/sub [:chats/link-previews?])
-                                                (rf/sub [:chats/status-link-previews?]))}]
-    [rn/view {:style {:height (header-height header-data)}}]))
-
-(defn list-footer-avatar
-  [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color
-           emoji chat-type chat-name empty-chat?]}]
-  (let [scale              (reanimated/interpolate
-                            distance-from-list-top
-                            [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
-                            [1 0.4]
-                            messages.constants/default-extrapolation-option)
-        top                (reanimated/interpolate
-                            distance-from-list-top
-                            [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
-                            [-44 -12]
-                            messages.constants/default-extrapolation-option)
-        left               (reanimated/interpolate
-                            distance-from-list-top
-                            [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
-                            [16 -8]
-                            messages.constants/default-extrapolation-option)
-        community-channel? (= chat-type constants/community-chat-type)]
-    [reanimated/view
-     {:style (style/header-image scale top left theme)}
-     (cond
-       community-channel?
-       [quo/channel-avatar
-        {:size                :size-80
-         :full-name           chat-name
-         :customization-color color
-         :emoji               (when-not (string/blank? emoji)
-                                (string/trim emoji))}]
-       group-chat
-       [quo/group-avatar
-        {:customization-color color
-         :size                :size-80
-         :picture             profile-picture
-         :chat-name           chat-name}]
-       :else
-       [quo/user-avatar
-        {:full-name       display-name
-         :online?         online?
-         :profile-picture profile-picture
-         :size            :big}])]))
-
-(defn chat-display-name
-  [{:keys [distance-from-list-top display-name contact theme empty-chat?]}]
-  (let [top  (reanimated/interpolate
-              distance-from-list-top
-              [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
-              [0 -35]
-              messages.constants/default-extrapolation-option)
-        left (reanimated/interpolate
-              distance-from-list-top
-              [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
-              [0 40]
-              messages.constants/default-extrapolation-option)]
-    [reanimated/view
-     {:style (style/user-name-container top left)}
-     [rn/view
-      {:style style/user-name}
-      [quo/text
-       {:weight          :semi-bold
-        :size            :heading-1
-        :style           {:flex-shrink 1}
-        :number-of-lines 1}
-       display-name]
-      [contact-icon contact theme]]]))
-
 (defn actions
   [chat-id cover-bg-color]
   (let [latest-pin-text                      (rf/sub [:chats/last-pinned-message-text chat-id])
@@ -236,101 +127,12 @@
                                                                 chat-type
                                                                 muted?)))}]}]))
 
-(defn bio-and-actions
-  [{:keys [distance-from-list-top bio chat-id customization-color empty-chat? description]}]
-  (let [has-bio (seq (or bio description))
-        top     (reanimated/interpolate
-                 distance-from-list-top
-                 [0 (if empty-chat? 0 messages.constants/header-container-top-margin)]
-                 [(if has-bio 8 16) (if has-bio -28 -20)]
-                 messages.constants/default-extrapolation-option)]
-    [reanimated/view
-     {:style (style/bio-and-actions top)}
-     (when has-bio
-       [quo/text (or bio description)])
-     [actions chat-id customization-color]]))
-
-(defn footer-component
-  [{:keys [chat distance-from-list-top customization-color]}]
-  (let [theme                 (quo.theme/use-theme)
-        {:keys [chat-id chat-name emoji chat-type
-                group-chat color description
-                empty-chat?]} chat
-        display-name          (cond
-                                (= chat-type constants/one-to-one-chat-type)
-                                (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
-                                (= chat-type constants/community-chat-type)
-                                (str "# " chat-name)
-                                :else (str emoji chat-name))
-        {:keys [bio]}         (rf/sub [:contacts/contact-by-identity chat-id])
-        online?               (rf/sub [:visibility-status-updates/online? chat-id])
-        contact               (when-not group-chat
-                                (rf/sub [:contacts/contact-by-address chat-id]))
-        photo-path            (if group-chat
-                                (rf/sub [:chats/group-chat-image chat-id])
-                                (rf/sub [:chats/photo-path chat-id]))
-        top-margin            (+ (safe-area/get-top)
-                                 messages.constants/top-bar-height
-                                 messages.constants/header-container-top-margin
-                                 32)
-        background-color      (colors/theme-colors
-                               (colors/resolve-color customization-color theme 20)
-                               (colors/resolve-color customization-color theme 40)
-                               theme)
-        bottom                (reanimated/interpolate
-                               distance-from-list-top
-                               [0 messages.constants/header-container-top-margin]
-                               [32 -4]
-                               messages.constants/default-extrapolation-option)
-        background-opacity    (reanimated/interpolate
-                               distance-from-list-top
-                               [messages.constants/header-container-top-margin
-                                (+ messages.constants/header-animation-distance
-                                   messages.constants/header-container-top-margin)]
-                               [1 0]
-                               messages.constants/default-extrapolation-option)]
-    [:<>
-     [reanimated/view
-      {:style (style/background-container background-color background-opacity top-margin)}]
-     [reanimated/view {:style (style/header-bottom-container bottom top-margin)}
-      [rn/view {:style (style/header-bottom-shadow theme)}]
-      [rn/view {:style (style/header-bottom-part theme)}
-       [list-footer-avatar
-        {:distance-from-list-top distance-from-list-top
-         :display-name           display-name
-         :online?                online?
-         :theme                  theme
-         :profile-picture        photo-path
-         :group-chat             group-chat
-         :color                  color
-         :emoji                  emoji
-         :chat-type              chat-type
-         :chat-name              chat-name
-         :empty-chat?            empty-chat?}]
-       [chat-display-name
-        {:distance-from-list-top distance-from-list-top
-         :display-name           display-name
-         :theme                  theme
-         :contact                contact
-         :group-chat             group-chat
-         :empty-chat?            empty-chat?}]
-       [bio-and-actions
-        {:distance-from-list-top distance-from-list-top
-         :bio                    bio
-         :chat-id                chat-id
-         :customization-color    customization-color
-         :description            description
-         :empty-chat?            empty-chat?}]]]]))
-
-(defn list-footer
-  [props]
-  (let [chat-id           (get-in props [:chat :chat-id])
-        loading-messages? (rf/sub [:chats/loading-messages? chat-id])
+(defn more-messages-loader
+  [{:keys [chat-id] :as props}]
+  (let [loading-messages? (rf/sub [:chats/loading-messages? chat-id])
         all-loaded?       (rf/sub [:chats/all-loaded? chat-id])]
-    [:<>
-     (if (or loading-messages? (not all-loaded?))
-       [loading-view chat-id props]
-       [footer-component props])]))
+    (when (or loading-messages? (not all-loaded?))
+      [loading-view props])))
 
 (defn list-group-chat-header
   [{:keys [chat-id invitation-admin]}]
@@ -359,8 +161,7 @@
         (reset! content-height content-height-new)))))
 
 (defn on-layout
-  [{:keys [event layout-height distance-atom distance-from-list-top
-           chat-screen-layout-calculations-complete?]}]
+  [{:keys [event layout-height distance-atom distance-from-list-top on-layout-done?]}]
   (let [layout-height-new (oops/oget event "nativeEvent.layout.height")
         change            (- layout-height-new @layout-height)
         new-distance      (- @distance-atom change)]
@@ -368,8 +169,7 @@
       (reanimated/set-shared-value distance-from-list-top new-distance)
       (reset! distance-atom new-distance)
       (reset! layout-height layout-height-new))
-    (when-not (reanimated/get-shared-value chat-screen-layout-calculations-complete?)
-      (reanimated/set-shared-value chat-screen-layout-calculations-complete? true))))
+    (reset! on-layout-done? true)))
 
 (defn on-scroll-fn
   [distance-atom layout-height-atom]
@@ -379,29 +179,21 @@
     (reset! distance-atom new-distance)))
 
 (defn messages-list-content
-  [{:keys [insets distance-from-list-top content-height layout-height distance-atom
-           chat-screen-layout-calculations-complete? chat-list-scroll-y]}]
-  (let [theme                                (quo.theme/use-theme)
-        {:keys [chat-type chat-id] :as chat} (rf/sub [:chats/current-chat-chat-view])
-        one-to-one-chat?                     (= chat-type constants/one-to-one-chat-type)
-        community-channel?                   (= constants/community-chat-type chat-type)
-        {contact-customization-color
-         :customization-color}               (when one-to-one-chat?
-                                               (rf/sub [:contacts/contact-by-identity chat-id]))
-        customization-color                  (cond community-channel?
-                                                   (or (:color chat)
-                                                       (rf/sub [:communities/community-color
-                                                                (:community-id chat)]))
-                                                   one-to-one-chat? contact-customization-color
-                                                   :else (or (:color chat) :turquoise))
-        {:keys [keyboard-shown]}             (hooks/use-keyboard)
-        {window-height :height}              (rn/get-window)
-        context                              (rf/sub [:chats/current-chat-message-list-view-context])
-        able-to-send-message?                (:able-to-send-message? context)
-        messages                             (rf/sub [:chats/raw-chat-messages-stream chat-id])
-        margin-bottom?                       (and community-channel? (not able-to-send-message?))
-        recording?                           (rf/sub [:chats/recording?])]
-    [rn/view {:style (style/permission-context-sheet margin-bottom?)}
+  [{:keys [insets distance-from-list-top layout-height chat-list-scroll-y on-layout-done?]}]
+  (let [content-height           (rn/use-ref-atom 0)
+        distance-atom            (rn/use-ref-atom 0)
+        theme                    (quo.theme/use-theme)
+        {:keys [keyboard-shown]} (hooks/use-keyboard)
+        {:keys [chat-type chat-id]
+         :as   chat}             (rf/sub [:chats/current-chat-chat-view])
+        community-channel?       (= constants/community-chat-type chat-type)
+        {window-height :height}  (rn/get-window)
+        context                  (rf/sub [:chats/current-chat-message-list-view-context])
+        able-to-send-message?    (:able-to-send-message? context)
+        messages                 (rf/sub [:chats/raw-chat-messages-stream chat-id])
+        add-padding-bottom?      (and community-channel? (not able-to-send-message?))
+        recording?               (rf/sub [:chats/recording?])]
+    [rn/view {:style style/permission-context-sheet}
      [rn/view {:style {:flex-shrink 1}} ;; Keeps flat list on top
       [reanimated/flat-list
        {:key-fn                            list-key-fn
@@ -409,12 +201,9 @@
         :bounces                           false
         :header                            (when (= (:chat-type chat) constants/private-group-chat-type)
                                              [list-group-chat-header chat])
-        :footer                            [list-footer
-                                            {:theme                  theme
-                                             :chat                   chat
-                                             :window-height          window-height
-                                             :distance-from-list-top distance-from-list-top
-                                             :customization-color    customization-color}]
+        :footer                            [more-messages-loader
+                                            {:chat-id       chat-id
+                                             :window-height window-height}]
         :data                              messages
         :render-data                       {:theme           theme
                                             :context         context
@@ -444,15 +233,14 @@
         :style                             {:background-color (colors/theme-colors colors/white
                                                                                    colors/neutral-95
                                                                                    theme)}
-        :content-container-style           {:padding-top distance-from-last-message}
+        :content-container-style           (style/list-paddings add-padding-bottom?)
         :inverted                          true
         :on-layout                         #(on-layout
-                                             {:event %
-                                              :layout-height layout-height
-                                              :distance-atom distance-atom
+                                             {:event                  %
+                                              :layout-height          layout-height
+                                              :distance-atom          distance-atom
                                               :distance-from-list-top distance-from-list-top
-                                              :chat-screen-layout-calculations-complete?
-                                              chat-screen-layout-calculations-complete?})
+                                              :on-layout-done?        on-layout-done?})
         :scroll-enabled                    (not recording?)
         :content-inset-adjustment-behavior :never
         :scroll-indicator-insets           {:right 1}}]]]))

src/status_im/contexts/chat/messenger/messages/navigation/style.cljs

@@ -1,56 +1,43 @@
 (ns status-im.contexts.chat.messenger.messages.navigation.style
-  (:require
-    [quo.foundations.colors :as colors]
-    [react-native.reanimated :as reanimated]))
+  (:require [quo.foundations.colors :as colors]
+            [status-im.contexts.chat.messenger.messages.constants :as messages.constants]))
 
 (defn navigation-view
-  [navigation-view-height pinned-banner-height]
+  [navigation-view-height]
   {:top            0
    :left           0
    :right          0
    :position       :absolute
    :pointer-events :box-none
-   :height         (+ navigation-view-height pinned-banner-height)
+   :height         (+ navigation-view-height messages.constants/pinned-banner-height)
    :z-index        1})
 
-(defn animated-background-view
-  [background-opacity navigation-view-height]
-  (reanimated/apply-animations-to-style
-   {:opacity background-opacity}
-   {:height   navigation-view-height
-    :top      0
-    :left     0
-    :right    0
-    :overflow :hidden
-    :position :absolute}))
+(defn background
+  [navigation-view-height]
+  {:height   navigation-view-height
+   :top      0
+   :left     0
+   :right    0
+   :overflow :hidden
+   :position :absolute})
 
 (defn header-container
-  [top-insets top-bar-height]
+  [top-insets]
   {:margin-top         top-insets
    :flex-direction     :row
    :padding-horizontal 20
    :overflow           :hidden
-   :height             top-bar-height
+   :height             messages.constants/top-bar-height
    :align-items        :center})
 
-(defn button-animation-container
-  [opacity-value]
-  (reanimated/apply-animations-to-style
-   {:opacity opacity-value}
-   {}))
-
 ;;;; Content
 
-(defn header-content-container
-  [header-opacity header-position]
-  (reanimated/apply-animations-to-style
-   {:transform [{:translate-y header-position}]
-    :opacity   header-opacity}
-   {:flex-direction    :row
-    :align-items       :center
-    :flex              1
-    :margin-horizontal 12
-    :height            40}))
+(def header-content-container
+  {:flex-direction    :row
+   :align-items       :center
+   :flex              1
+   :margin-horizontal 12
+   :height            40})
 
 (def header-text-container
   {:margin-left 8})

src/status_im/contexts/chat/messenger/messages/navigation/view.cljs

@@ -7,7 +7,6 @@
     [re-frame.db]
     [react-native.core :as rn]
     [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [status-im.common.home.actions.view :as actions]
     [status-im.constants :as constants]
@@ -15,44 +14,26 @@
     [status-im.contexts.chat.messenger.messages.navigation.style :as style]
     [status-im.contexts.chat.messenger.messages.pin.banner.view :as pin.banner]
     [utils.i18n :as i18n]
-    [utils.re-frame :as rf]
-    [utils.worklets.chat.messenger.messages :as messages.worklets]
-    [utils.worklets.chat.messenger.navigation :as worklets]))
+    [utils.re-frame :as rf]))
 
 (defn header-content-container
-  [{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}]
-  (let [theme                 (quo.theme/use-theme)
-        {:keys [chat-id group-chat chat-type chat-name
-                emoji color]} chat
-        display-name          (cond
-                                (= chat-type constants/one-to-one-chat-type)
-                                (first (rf/sub
-                                        [:contacts/contact-two-names-by-identity
-                                         chat-id]))
-                                (= chat-type constants/community-chat-type)
-                                (str "# " chat-name)
-                                :else (str emoji chat-name))
-        online?               (when-not group-chat (rf/sub [:visibility-status-updates/online? chat-id]))
-        photo-path            (if group-chat
-                                (rf/sub [:chats/group-chat-image chat-id])
-                                (rf/sub [:chats/photo-path chat-id]))
-        header-opacity        (worklets/navigation-header-opacity
-                               distance-from-list-top
-                               all-loaded?
-                               chat-screen-layout-calculations-complete?
-                               (if platform/ios?
-                                 messages.constants/content-animation-start-position-ios
-                                 messages.constants/content-animation-start-position-android))
-        header-position       (worklets/navigation-header-position
-                               distance-from-list-top
-                               all-loaded?
-                               messages.constants/top-bar-height
-                               (if platform/ios?
-                                 messages.constants/content-animation-start-position-ios
-                                 messages.constants/content-animation-start-position-android))
-        community-channel?    (= chat-type constants/community-chat-type)]
-    [reanimated/view
-     {:style (style/header-content-container header-opacity header-position)}
+  [{:keys [chat-id group-chat chat-type chat-name emoji color] :as _chat}]
+  (let [theme              (quo.theme/use-theme)
+        display-name       (cond
+                             (= chat-type constants/one-to-one-chat-type)
+                             (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+
+                             (= chat-type constants/community-chat-type)
+                             (str "# " chat-name)
+
+                             :else
+                             (str emoji chat-name))
+        online?            (when-not group-chat (rf/sub [:visibility-status-updates/online? chat-id]))
+        photo-path         (if group-chat
+                             (rf/sub [:chats/group-chat-image chat-id])
+                             (rf/sub [:chats/photo-path chat-id]))
+        community-channel? (= chat-type constants/community-chat-type)]
+    [rn/view {:style style/header-content-container}
      (cond
        community-channel?
        [quo/channel-avatar
@@ -90,30 +71,11 @@
          (i18n/label
           (if online? :t/online :t/offline))])]]))
 
-(defn animated-background-and-pinned-banner
-  [{:keys [chat-id navigation-view-height distance-from-list-top all-loaded?]}]
-  (let [theme              (quo.theme/use-theme)
-        animation-distance messages.constants/header-animation-distance
-        props              {:distance-from-list-top distance-from-list-top
-                            :all-loaded?            all-loaded?}
-        background-opacity (worklets/interpolate-navigation-view-opacity
-                            (assoc props
-                                   :start-position
-                                   messages.constants/header-container-top-margin
-                                   :end-position
-                                   (+ animation-distance
-                                      messages.constants/header-container-top-margin)))
-        banner-opacity     (worklets/interpolate-navigation-view-opacity
-                            (assoc props
-                                   :start-position
-                                   (+ navigation-view-height
-                                      messages.constants/pinned-banner-animation-start-position)
-                                   :end-position
-                                   (+ animation-distance
-                                      navigation-view-height
-                                      messages.constants/pinned-banner-animation-start-position)))]
+(defn header-background
+  [{:keys [chat-id navigation-view-height]}]
+  (let [theme (quo.theme/use-theme)]
     [:<>
-     [reanimated/view {:style (style/animated-background-view background-opacity navigation-view-height)}
+     [rn/view {:style (style/background navigation-view-height)}
       [quo/blur
        {:style         {:flex 1}
         :blur-amount   20
@@ -121,58 +83,37 @@
         :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme)
         :blur-radius   (if platform/ios? 20 10)}]]
      [pin.banner/banner
-      {:chat-id        chat-id
-       :banner-opacity banner-opacity
-       :top-offset     navigation-view-height}]]))
+      {:chat-id    chat-id
+       :top-offset navigation-view-height}]]))
 
 (defn view
-  [{:keys [distance-from-list-top chat-screen-layout-calculations-complete?]}]
+  []
   (let [{:keys [chat-id chat-type]
-         :as   chat}               (rf/sub [:chats/current-chat-chat-view])
-        all-loaded?                (reanimated/use-shared-value false)
-        all-loaded-sub             (rf/sub [:chats/all-loaded? chat-id])
-        top-insets                 (safe-area/get-top)
-        top-bar-height             messages.constants/top-bar-height
-        navigation-view-height     (+ top-bar-height top-insets)
-        navigation-buttons-opacity (worklets/navigation-buttons-complete-opacity
-                                    chat-screen-layout-calculations-complete?)
-        reached-threshold?         (messages.worklets/use-messages-scrolled-to-threshold
-                                    distance-from-list-top
-                                    top-bar-height)
-        button-background          (if reached-threshold? :photo :blur)]
-    (rn/use-effect (fn [] (reanimated/set-shared-value all-loaded? all-loaded-sub))
-                   [all-loaded-sub])
-    [rn/view
-     {:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)}
-     [animated-background-and-pinned-banner
+         :as   chat}           (rf/sub [:chats/current-chat-chat-view])
+        top-insets             (safe-area/get-top)
+        navigation-view-height (+ top-insets messages.constants/top-bar-height)]
+    [rn/view {:style (style/navigation-view navigation-view-height)}
+     [header-background
       {:chat-id                chat-id
-       :navigation-view-height navigation-view-height
-       :distance-from-list-top distance-from-list-top
-       :all-loaded?            all-loaded?}]
-     [rn/view {:style (style/header-container top-insets top-bar-height)}
-      [reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)}
-       [quo/button
-        {:icon-only?          true
-         :type                :grey
-         :background          button-background
-         :size                32
-         :accessibility-label :back-button
-         :on-press            #(rf/dispatch [:navigate-back])}
-        (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)]]
-      [header-content-container
-       {:chat                                      chat
-        :distance-from-list-top                    distance-from-list-top
-        :all-loaded?                               all-loaded?
-        :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}]
-      [reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)}
-       [quo/button
-        {:icon-only?          true
-         :type                :grey
-         :background          button-background
-         :size                32
-         :accessibility-label :options-button
-         :on-press            (fn []
-                                (rf/dispatch [:dismiss-keyboard])
-                                (rf/dispatch [:show-bottom-sheet
-                                              {:content (fn [] [actions/chat-actions chat true])}]))}
-        :i/options]]]]))
+       :navigation-view-height navigation-view-height}]
+     [rn/view {:style (style/header-container top-insets)}
+      [quo/button
+       {:icon-only?          true
+        :type                :grey
+        :background          :blur
+        :size                32
+        :accessibility-label :back-button
+        :on-press            #(rf/dispatch [:navigate-back])}
+       (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)]
+      [header-content-container chat]
+      [quo/button
+       {:icon-only?          true
+        :type                :grey
+        :background          :blur
+        :size                32
+        :accessibility-label :options-button
+        :on-press            (fn []
+                               (rf/dispatch [:dismiss-keyboard])
+                               (rf/dispatch [:show-bottom-sheet
+                                             {:content (fn [] [actions/chat-actions chat true])}]))}
+       :i/options]]]))

src/status_im/contexts/chat/messenger/messages/pin/banner/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im.contexts.chat.messenger.messages.pin.banner.style
   (:require
-    [react-native.reanimated :as reanimated]
     [status-im.contexts.chat.messenger.messages.constants :as messages.constants]))
 
 (def container
@@ -10,8 +9,6 @@
    :right    0
    :height   messages.constants/pinned-banner-height})
 
-(defn container-animated-style
-  [top-offset banner-opacity]
-  (reanimated/apply-animations-to-style
-   {:opacity banner-opacity}
-   (assoc container :top top-offset)))
+(defn container-with-top-offset
+  [top-offset]
+  (assoc container :top top-offset))

src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs

@@ -2,30 +2,26 @@
   (:require
     [quo.core :as quo]
     [quo.theme]
+    [react-native.core :as rn]
     [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
     [status-im.contexts.chat.messenger.messages.pin.banner.style :as style]
     [utils.re-frame :as rf]))
 
-(defn f-banner
-  [{:keys [chat-id banner-opacity top-offset]} latest-pin-text pins-count]
-  (let [theme (quo.theme/use-theme)]
-    [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)}
-     [quo/blur
-      {:style       style/container
-       :blur-radius (if platform/ios? 20 10)
-       :blur-type   theme
-       :blur-amount 20}]
-     [quo/banner
-      {:latest-pin-text latest-pin-text
-       :pins-count      pins-count
-       :on-press        (fn []
-                          (rf/dispatch [:dismiss-keyboard])
-                          (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]))
-
 (defn banner
-  [{:keys [chat-id] :as props}]
-  (let [latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
+  [{:keys [chat-id top-offset]}]
+  (let [theme           (quo.theme/use-theme)
+        latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
         pins-count      (rf/sub [:chats/pin-messages-count chat-id])]
     (when (> pins-count 0)
-      [:f> f-banner props latest-pin-text pins-count])))
+      [rn/view {:style (style/container-with-top-offset top-offset)}
+       [quo/blur
+        {:style       style/container
+         :blur-radius (if platform/ios? 20 10)
+         :blur-type   theme
+         :blur-amount 20}]
+       [quo/banner
+        {:latest-pin-text latest-pin-text
+         :pins-count      pins-count
+         :on-press        (fn []
+                            (rf/dispatch [:dismiss-keyboard])
+                            (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]])))

src/status_im/contexts/chat/messenger/messages/scroll_to_bottom/view.cljs

@@ -7,7 +7,7 @@
     [utils.worklets.chat.messenger.composer :as worklets]))
 
 (defn button
-  [{:keys [chat-list-scroll-y]}]
+  [chat-list-scroll-y]
   (let [{window-height :height}    (rn/get-window)
         scroll-down-button-opacity (worklets/scroll-down-button-opacity
                                     chat-list-scroll-y

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

@@ -19,57 +19,50 @@
     [utils.re-frame :as rf]))
 
 (defn- footer
-  [props]
+  [layout-height]
   (let [current-chat-id       (rf/sub [:chats/current-chat-id])
         able-to-send-message? (rf/sub [:chats/able-to-send-message?])]
     (when-not (string/blank? current-chat-id)
       (if able-to-send-message?
-        [composer/view props]
+        [composer/view layout-height]
         [contact-requests.bottom-drawer/view {:contact-id current-chat-id}]))))
 
 (defn- chat-screen
-  [{:keys [insets] :as props}]
+  [on-layout-done?]
   (let [theme                    (quo.theme/use-theme)
+        layout-height            (rn/use-ref-atom 0)
+        distance-from-list-top   (reanimated/use-shared-value 0)
+        chat-list-scroll-y       (reanimated/use-shared-value 0)
         alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
-        chat-exist?              (rf/sub [:chats/current-chat-exist?])]
-    (when chat-exist?
-      [rn/keyboard-avoiding-view
-       {:style                    (style/keyboard-avoiding-container theme)
-        :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))}
-       [:<>
-        [list.view/messages-list-content props]
-        [scroll-to-bottom/button props]]
-       [messages.navigation/view props]
-       [footer props]])))
-
-(defn lazy-chat-screen
-  [chat-screen-layout-calculations-complete? *screen-loaded?*]
-  (let [screen-loaded?         (rf/sub [:shell/chat-screen-loaded?])
-        distance-from-list-top (reanimated/use-shared-value 0)
-        chat-list-scroll-y     (reanimated/use-shared-value 0)
-        props                  {:insets (safe-area/get-insets)
-                                :content-height (atom 0)
-                                :layout-height (atom 0)
-                                :distance-atom (atom 0)
-                                :distance-from-list-top distance-from-list-top
-                                :chat-list-scroll-y chat-list-scroll-y
-                                :chat-screen-layout-calculations-complete?
-                                chat-screen-layout-calculations-complete?}]
-    (when *screen-loaded?*
-      (rn/use-mount #(reset! *screen-loaded?* true)))
-    (when-not (if *screen-loaded?* @*screen-loaded?* screen-loaded?)
-      (reanimated/set-shared-value chat-screen-layout-calculations-complete? false)
-      (reanimated/set-shared-value distance-from-list-top 0)
-      (reanimated/set-shared-value chat-list-scroll-y 0))
-    (when (if *screen-loaded?* @*screen-loaded?* screen-loaded?)
-      [chat-screen props])))
+        insets                   (safe-area/get-insets)]
+    [rn/keyboard-avoiding-view
+     {:style                    (style/keyboard-avoiding-container theme)
+      :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0)
+                                   (:bottom insets))}
+     [:<>
+      [list.view/messages-list-content
+       {:insets                 insets
+        :distance-from-list-top distance-from-list-top
+        :chat-list-scroll-y     chat-list-scroll-y
+        :layout-height          layout-height
+        :on-layout-done?        on-layout-done?}]
+      [scroll-to-bottom/button chat-list-scroll-y]]
+     [messages.navigation/view]
+     [footer layout-height]]))
 
 (defn chat
   []
-  (let [chat-screen-layout-calculations-complete? (reanimated/use-shared-value false)
-        jump-to-enabled?                          (ff/enabled? ::ff/shell.jump-to)
-        *screen-loaded?*                          (when-not jump-to-enabled?
-                                                    (reagent/atom false))]
-    [:<>
-     [lazy-chat-screen chat-screen-layout-calculations-complete? *screen-loaded?*]
-     [placeholder.view/view chat-screen-layout-calculations-complete?]]))
+  (let [on-layout-done?    (reagent/atom false)
+        first-render-done? (reagent/atom false)]
+    (fn []
+      (let [chat-exists?               (rf/sub [:chats/current-chat-exist?])
+            jump-to-enabled?           (ff/enabled? ::ff/shell.jump-to)
+            screen-loaded-for-jump-to? (rf/sub [:shell/chat-screen-loaded?])
+            screen-loaded?             (if jump-to-enabled?
+                                         screen-loaded-for-jump-to?
+                                         @first-render-done?)]
+        (rn/use-mount #(reset! first-render-done? true))
+        [:<>
+         (when (and chat-exists? screen-loaded?)
+           [chat-screen on-layout-done?])
+         [placeholder.view/view on-layout-done?]]))))

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

@@ -1,16 +1,15 @@
 (ns status-im.contexts.chat.messenger.placeholder.style
   (:require [quo.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]))
+            [react-native.safe-area :as safe-area]))
 
 (defn container
-  [top opacity z-index theme]
-  (reanimated/apply-animations-to-style
-   {:opacity opacity
-    :z-index z-index}
-   {:position         :absolute
-    :padding-top      top
-    :top              0
-    :left             0
-    :right            0
-    :bottom           0
-    :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
+  [theme on-layout-done?]
+  {:position         :absolute
+   :padding-top      (safe-area/get-top)
+   :top              0
+   :left             0
+   :right            0
+   :bottom           0
+   :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
+   :opacity          (if on-layout-done? 0 1)
+   :z-index          (if on-layout-done? 0 2)})

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

@@ -3,11 +3,8 @@
     [quo.core :as quo]
     [quo.theme]
     [react-native.core :as rn]
-    [react-native.reanimated :as reanimated]
-    [react-native.safe-area :as safe-area]
     [status-im.contexts.chat.messenger.placeholder.style :as style]
-    [utils.re-frame :as rf]
-    [utils.worklets.chat.messenger.placeholder :as worklets]))
+    [utils.re-frame :as rf]))
 
 (defn- loading-skeleton
   []
@@ -17,13 +14,10 @@
     :animated?     false}])
 
 (defn view
-  [chat-screen-layout-calculations-complete?]
+  [on-layout-done?]
   (let [theme       (quo.theme/use-theme)
-        top         (safe-area/get-top)
-        chat-exist? (rf/sub [:chats/current-chat-exist?])
-        opacity     (worklets/placeholder-opacity chat-screen-layout-calculations-complete?)
-        z-index     (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)]
-    [reanimated/view {:style (style/container top opacity z-index theme)}
+        chat-exist? (rf/sub [:chats/current-chat-exist?])]
+    [rn/view {:style (style/container theme @on-layout-done?)}
      (when-not chat-exist?
        [quo/page-nav
         {:icon-name :i/arrow-left

src/status_im/contexts/communities/overview/view.cljs

@@ -119,38 +119,29 @@
     :icon-left           :i/communities}
    (i18n/label :t/request-to-join)])
 
-(defn- info-button-handler
+(defn token-gated-communities-info
   []
-  (rf/dispatch
-   [:show-bottom-sheet
-    {:content
-     (fn []
-       [quo/documentation-drawers
-        {:title        (i18n/label :t/token-gated-communities)
-         :show-button? true
-         :button-label (i18n/label :t/read-more)
-         :button-icon  :info}
-        [quo/text {:size :paragraph-2}
-         (i18n/label :t/token-gated-communities-info)]])}]))
+  [quo/documentation-drawers {:title (i18n/label :t/token-gated-communities)}
+   [quo/text {:size :paragraph-2}
+    (i18n/label :t/token-gated-communities-info)]])
 
 (defn- token-requirements
   [{:keys [id color role-permissions?]}]
-  (let [{:keys [can-request-access?
-                no-member-permission?
-                tokens
-                networks-not-supported?
-                highest-permission-role]} (rf/sub [:community/token-gated-overview id])
-        highest-role-text
-        (i18n/label
-         (communities.utils/role->translation-key highest-permission-role :t/member))
-        on-press (rn/use-callback (fn []
-                                    (if config/community-accounts-selection-enabled?
-                                      (rf/dispatch [:open-modal :community-account-selection-sheet
-                                                    {:community-id id}])
-                                      (rf/dispatch [:open-modal :community-requests-to-join
-                                                    {:id
-                                                     id}])))
-                                  [id])]
+  (let [{:keys [can-request-access? no-member-permission? networks-not-supported?
+                highest-permission-role
+                tokens]}  (rf/sub [:community/token-gated-overview id])
+        highest-role-text (i18n/label
+                           (communities.utils/role->translation-key highest-permission-role :t/member))
+        on-press          (rn/use-callback
+                           (fn []
+                             (if config/community-accounts-selection-enabled?
+                               (rf/dispatch [:open-modal :community-account-selection-sheet
+                                             {:community-id id}])
+                               (rf/dispatch [:open-modal :community-requests-to-join
+                                             {:id id}])))
+                           [id])
+        on-press-info     #(rf/dispatch
+                            [:show-bottom-sheet {:content token-gated-communities-info}])]
     (cond
       networks-not-supported?
       [network-not-supported]
@@ -160,13 +151,12 @@
 
       :else
       [quo/community-token-gating
-       {:role highest-role-text
-        :tokens tokens
+       {:role            highest-role-text
+        :tokens          tokens
         :community-color color
-        :satisfied? can-request-access?
-        :on-press on-press
-        :on-press-info
-        info-button-handler}])))
+        :satisfied?      can-request-access?
+        :on-press        on-press
+        :on-press-info   on-press-info}])))
 
 (defn- join-community
   [{:keys [id joined permissions] :as community}]

src/status_im/contexts/keycard/authorise/view.cljs

@@ -0,0 +1,35 @@
+(ns status-im.contexts.keycard.authorise.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.common.events-helper :as events-helper]
+            [status-im.common.standard-authentication.core :as standard-auth]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [utils.security.core :as security]))
+
+(defn view
+  []
+  (let [profile-name        (rf/sub [:profile/name])
+        profile-picture     (rf/sub [:profile/image])
+        customization-color (rf/sub [:profile/customization-color])]
+    [:<>
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/close
+       :on-press   events-helper/navigate-back}]
+     [quo/page-top
+      {:title       (i18n/label :t/authorise-with-password)
+       :description :context-tag
+       :context-tag {:full-name           profile-name
+                     :profile-picture     profile-picture
+                     :customization-color customization-color}}]
+     [rn/view {:style {:flex 1 :padding-horizontal 20 :justify-content :space-between}}
+      [quo/text (i18n/label :t/migrate-key-pair-authorise)]
+      [standard-auth/slide-button
+       {:size                :size-48
+        :container-style     {}
+        :customization-color customization-color
+        :track-text          (i18n/label :t/slide-to-authorise)
+        :on-auth-success     #(println "TBD" (security/safe-unmask-data %))
+        :auth-button-label   (i18n/label :t/confirm)}]]]))

src/status_im/contexts/keycard/check/view.cljs

@@ -0,0 +1,36 @@
+(ns status-im.contexts.keycard.check.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  [:<>
+   [quo/page-nav
+    {:key        :header
+     :background :blur
+     :icon-name  :i/arrow-left
+     :on-press   events-helper/navigate-back}]
+   [quo/page-top
+    {:title            (i18n/label :t/check-keycard)
+     :description      :text
+     :description-text (i18n/label :t/see-keycard-ready)}]
+   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
+    [rn/image
+     {:resize-mode :contain
+      :source      (resources/get-image :check-your-keycard)}]]
+   [quo/divider-label (i18n/label :t/tips-scan-keycard)]
+   [rn/view {:style {:padding-horizontal 10}}
+    [quo/markdown-list
+     {:container-style {:padding-vertical 10}
+      :description     (i18n/label :t/remove-phone-case)}]
+    [quo/markdown-list
+     {:container-style {:padding-bottom 25}
+      :description     (i18n/label :t/keep-card-steady)}]]
+   [quo/button
+    {:on-press        #(rf/dispatch [:keycard/connect])
+     :container-style {:margin-horizontal 20}}
+    (i18n/label :t/ready-to-scan)]])

src/status_im/contexts/keycard/effects.cljs

@@ -10,10 +10,15 @@
 
 (defonce ^:private active-listeners (atom []))
 
-(defn register-card-events
+(defn unregister-card-events
   []
   (doseq [listener @active-listeners]
     (keycard/remove-event-listener listener))
+  (reset! active-listeners nil))
+
+(defn register-card-events
+  []
+  (unregister-card-events)
   (reset! active-listeners
     [(keycard/on-card-connected #(rf/dispatch [:keycard/on-card-connected]))
      (keycard/on-card-disconnected #(rf/dispatch [:keycard/on-card-disconnected]))
@@ -23,7 +28,9 @@
        (keycard/on-nfc-timeout #(rf/dispatch [:keycard.ios/on-nfc-timeout])))
      (keycard/on-nfc-enabled #(rf/dispatch [:keycard/on-check-nfc-enabled-success true]))
      (keycard/on-nfc-disabled #(rf/dispatch [:keycard/on-check-nfc-enabled-success false]))]))
+
 (rf/reg-fx :effects.keycard/register-card-events register-card-events)
+(rf/reg-fx :effects.keycard/unregister-card-events unregister-card-events)
 
 (defn check-nfc-enabled
   []

src/status_im/contexts/keycard/empty/view.cljs

@@ -0,0 +1,36 @@
+(ns status-im.contexts.keycard.empty.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
+            [status-im.contexts.keycard.sheets.migrate.view :as sheets.migrate]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  [:<>
+   [quo/page-nav
+    {:key        :header
+     :background :blur
+     :icon-name  :i/arrow-left
+     :on-press   events-helper/navigate-back}]
+   [quo/page-top
+    {:title            (i18n/label :t/keycard-empty)
+     :description      :text
+     :description-text (i18n/label :t/what-to-do)}]
+   [rn/view {:style {:padding-horizontal 28 :padding-top 20}}
+    [quo/small-option-card
+     {:variant             :main
+      :title               (i18n/label :t/import-key-pair-keycard)
+      :subtitle            (i18n/label :t/use-keycard-login-sign)
+      :button-label        (i18n/label :t/import-profile-key-pair)
+      :accessibility-label :get-keycard
+      :image               (resources/get-image :generate-keys)
+      :on-press            #(rf/dispatch [:show-bottom-sheet
+                                          {:theme   :dark
+                                           :content (fn [] [sheets.migrate/view])}])}]]
+   [quo/information-box
+    {:type  :default
+     :style {:margin-top 32 :margin-horizontal 28}}
+    (i18n/label :t/empty-card-info)]])

src/status_im/contexts/keycard/error/view.cljs

@@ -0,0 +1,42 @@
+(ns status-im.contexts.keycard.error.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.common.events-helper :as events-helper]
+            [utils.re-frame :as rf]))
+
+(def titles
+  {:keycard/error.keycard-wrong    {:title       "Keycard is not empty"
+                                    :description "You can’t use it to store new keys right now"}
+   :keycard/error.keycard-unpaired {:title       "Keycard is full"
+                                    :description "All pairing slots are occupied"}
+   :keycard/error.keycard-frozen   {:title       "Keycard is locked"
+                                    :description "You can’t use it right now"}
+   :keycard/error.keycard-locked   {:title       "Keycard is locked"
+                                    :description "You can’t use it right now"}})
+
+(defn view
+  []
+  (let [{:keys [top bottom]}        (safe-area/get-insets)
+        error                       (rf/sub [:keycard/application-info-error])
+        {:keys [title description]} (get titles error)]
+    [quo/overlay
+     {:type            :shell
+      :container-style {:padding-top    top
+                        :padding-bottom bottom}}
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/arrow-left
+       :on-press   events-helper/navigate-back}]
+     [quo/page-top
+      {:title            title
+       :description      :text
+       :description-text description}]
+     [rn/view {:height 226}]
+     [rn/view {:padding-horizontal 20}
+      [quo/info-message
+       {:container-style {:padding-top 15}
+        :icon            :i/info
+        :size            :default}
+       "To unlock or factory reset the Keycard, please use the Status desktop app. If you'd like this features on mobile, feel free to upvote them and discuss in the Status community."]]]))

src/status_im/contexts/keycard/events.cljs

@@ -1,8 +1,8 @@
 (ns status-im.contexts.keycard.events
   (:require [re-frame.core :as rf]
             status-im.contexts.keycard.login.events
+            status-im.contexts.keycard.nfc-sheet.events
             status-im.contexts.keycard.pin.events
-            status-im.contexts.keycard.sheet.events
             status-im.contexts.keycard.sign.events
             [status-im.contexts.keycard.utils :as keycard.utils]
             [taoensso.timbre :as log]))
@@ -14,7 +14,9 @@
 (rf/reg-event-fx :keycard.ios/on-nfc-user-cancelled
  (fn [{:keys [db]}]
    (log/debug "[keycard] nfc user cancelled")
-   {:db (assoc-in db [:keycard :pin :status] nil)
+   {:db (-> db
+            (assoc-in [:keycard :pin :status] nil)
+            (assoc-in [:keycard :on-nfc-cancelled-event-vector] nil))
     :fx [(when-let [on-nfc-cancelled-event-vector (get-in db [:keycard :on-nfc-cancelled-event-vector])]
            [:dispatch on-nfc-cancelled-event-vector])]}))
 
@@ -42,12 +44,6 @@
    {:db (assoc-in db [:keycard :card-connected?] false)
     :fx [[:dispatch-later [{:ms 500 :dispatch [:keycard.ios/start-nfc]}]]]}))
 
-(rf/reg-event-fx :keycard/get-application-info
- (fn [_ [{:keys [on-success on-failure]}]]
-   (log/debug "[keycard] get-application-info")
-   {:effects.keycard/get-application-info {:on-success on-success
-                                           :on-failure on-failure}}))
-
 (rf/reg-event-fx :keycard/on-retrieve-pairings-success
  (fn [{:keys [db]} [pairings]]
    {:db (assoc-in db [:keycard :pairings] pairings)
@@ -60,7 +56,7 @@
 
 (rf/reg-event-fx :keycard/on-action-with-pin-error
  (fn [{:keys [db]} [error]]
-   (log/debug "[keycard] get keys error: " error)
+   (log/debug "[keycard] on-action-with-pin-error: " error)
    (let [tag-was-lost?     (keycard.utils/tag-lost? (:error error))
          pin-retries-count (keycard.utils/pin-retries (:error error))]
      (if tag-was-lost?
@@ -69,7 +65,53 @@
          {:effects.utils/show-popup {:title "wrong-keycard"}}
          {:db (-> db
                   (assoc-in [:keycard :application-info :pin-retry-counter] pin-retries-count)
-                  (update-in [:keycard :pin] assoc :status :error))
-          :fx [[:dispatch [:keycard/hide-connection-sheet]]
+                  (assoc-in [:keycard :pin :status] :error))
+          :fx [[:dispatch [:keycard/disconnect]]
                (when (zero? pin-retries-count)
                  [:effects.utils/show-popup {:title "frozen-keycard"}])]})))))
+
+(rf/reg-event-fx :keycard/on-get-application-info-success
+ (fn [{:keys [db]} [application-info {:keys [key-uid on-success-fx]}]]
+   (let [error (keycard.utils/validate-application-info key-uid application-info)]
+     (if error
+       (case error
+         :keycard/error.not-keycard
+         {:fx [[:dispatch [:keycard/disconnect]]
+               [:dispatch [:open-modal :screen/keycard.not-keycard]]]}
+         :keycard/error.keycard-blank
+         {:fx [[:dispatch [:keycard/disconnect]]
+               [:dispatch [:open-modal :screen/keycard.empty]]]}
+         {:db (assoc-in db [:keycard :application-info-error] error)
+          :fx [[:dispatch [:keycard/disconnect]]
+               [:dispatch [:open-modal :screen/keycard.error]]]})
+       {:db (-> db
+                (assoc-in [:keycard :application-info] application-info)
+                (assoc-in [:keycard :pin :status] :verifying))
+        :fx on-success-fx}))))
+
+(rf/reg-event-fx :keycard/get-application-info
+ (fn [_ [{:keys [on-success on-failure]}]]
+   {:effects.keycard/get-application-info {:on-success on-success :on-failure on-failure}}))
+
+(rf/reg-event-fx :keycard/cancel-connection
+ (fn [{:keys [db]}]
+   {:db (-> db
+            (assoc-in [:keycard :on-card-connected-event-vector] nil)
+            (assoc-in [:keycard :on-nfc-cancelled-event-vector] nil))}))
+
+(rf/reg-event-fx :keycard/disconnect
+ (fn [_ _]
+   {:fx [[:dispatch [:keycard/cancel-connection]]
+         [:dispatch [:keycard/hide-connection-sheet]]]}))
+
+(rf/reg-event-fx :keycard/connect
+ (fn [{:keys [db]} [args]]
+   (let [connected?   (get-in db [:keycard :card-connected?])
+         event-vector [:keycard/get-application-info
+                       {:on-success #(rf/dispatch [:keycard/on-get-application-info-success % args])}]]
+     {:db (assoc-in db [:keycard :on-card-connected-event-vector] event-vector)
+      :fx [[:dispatch
+            [:keycard/show-connection-sheet
+             {:on-cancel-event-vector [:keycard/cancel-connection]}]]
+           (when connected?
+             [:dispatch event-vector])]})))

src/status_im/contexts/keycard/login/events.cljs

@@ -1,7 +1,5 @@
 (ns status-im.contexts.keycard.login.events
-  (:require [status-im.contexts.keycard.utils :as keycard.utils]
-            [taoensso.timbre :as log]
-            [utils.re-frame :as rf]))
+  (:require [utils.re-frame :as rf]))
 
 (rf/reg-event-fx :keycard.login/on-get-keys-success
  (fn [{:keys [db]} [data]]
@@ -16,7 +14,7 @@
                   :password      encryption-public-key
                   :key-uid       key-uid
                   :name          (:name profile)))
-      :fx [[:dispatch [:keycard/hide-connection-sheet]]
+      :fx [[:dispatch [:keycard/disconnect]]
            [:effects.keycard/login-with-keycard
             {:password            encryption-public-key
              :whisper-private-key whisper-private-key
@@ -33,36 +31,8 @@
                     :password      encryption-public-key
                     :key-uid       key-uid
                     :name          (:name profile)))
-        :fx [[:dispatch [:keycard/hide-connection-sheet]]
+        :fx [[:dispatch [:keycard/disconnect]]
              [:effects.keycard/login-with-keycard
               {:password            encryption-public-key
                :whisper-private-key whisper-private-key
                :key-uid             key-uid}]]}))))
-
-(rf/reg-event-fx :keycard.login/on-get-application-info-success
- (fn [{:keys [db]} [application-info {:keys [key-uid on-read-fx]}]]
-   (let [error (keycard.utils/validate-application-info key-uid application-info)]
-     (if error
-       {:effects.utils/show-popup {:title (str error)}}
-       {:db (-> db
-                (assoc-in [:keycard :application-info] application-info)
-                (assoc-in [:keycard :pin :status] :verifying))
-        :fx on-read-fx}))))
-
-(rf/reg-event-fx :keycard.login/cancel-reading-card
- (fn [{:keys [db]}]
-   {:db (assoc-in db [:keycard :on-card-connected-event-vector] nil)}))
-
-(rf/reg-event-fx :keycard/read-card
- (fn [{:keys [db]} [args]]
-   (let [connected?   (get-in db [:keycard :card-connected?])
-         event-vector [:keycard/get-application-info
-                       {:on-success #(rf/dispatch [:keycard.login/on-get-application-info-success %
-                                                   args])}]]
-     (log/debug "[keycard] proceed-to-login")
-     {:db (assoc-in db [:keycard :on-card-connected-event-vector] event-vector)
-      :fx [[:dispatch
-            [:keycard/show-connection-sheet
-             {:on-cancel-event-vector [:keycard.login/cancel-reading-card]}]]
-           (when connected?
-             [:dispatch event-vector])]})))

src/status_im/contexts/keycard/nfc_sheet/events.cljs

@@ -1,18 +1,16 @@
-(ns status-im.contexts.keycard.sheet.events
+(ns status-im.contexts.keycard.nfc-sheet.events
   (:require [re-frame.core :as rf]
             [react-native.platform :as platform]
             [taoensso.timbre :as log]))
 
-(rf/reg-event-fx :keycard/show-connection-sheet-component
- (fn [{:keys [db]} [{:keys [on-cancel-event-vector]}]]
-   {:db (assoc-in db [:keycard :connection-sheet-opts] {:on-close #(rf/dispatch on-cancel-event-vector)})
-    :fx [[:dismiss-keyboard true]
-         [:show-nfc-sheet nil]]}))
-
 (rf/reg-event-fx :keycard/show-connection-sheet
- (fn [_ [args]]
+ (fn [{:keys [db]} [{:keys [on-cancel-event-vector]} :as args]]
    (if platform/android?
-     {:dispatch [:keycard/show-connection-sheet-component args]}
+     {:db (assoc-in db
+           [:keycard :connection-sheet-opts]
+           {:on-close #(rf/dispatch on-cancel-event-vector)})
+      :fx [[:dismiss-keyboard true]
+           [:show-nfc-sheet nil]]}
      {:effects.keycard.ios/start-nfc
       {:on-success
        (fn []

src/status_im/contexts/keycard/nfc_sheet/view.cljs

@@ -1,8 +1,9 @@
-(ns status-im.contexts.keycard.sheet.view
+(ns status-im.contexts.keycard.nfc-sheet.view
   (:require [quo.foundations.colors :as colors]
             quo.theme
             [react-native.core :as rn]
             [status-im.common.resources :as resources]
+            [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn connect-keycard
@@ -18,13 +19,13 @@
                :padding-vertical   30
                :background-color   (colors/theme-colors colors/white colors/neutral-95 theme)}}
       [rn/text {:style {:font-size 26 :color "#9F9FA5" :margin-bottom 36}}
-       "Ready to Scan"]
+       (i18n/label :t/ready-to-scan)]
       [rn/image
        {:source (resources/get-image :nfc-prompt)}]
       [rn/text {:style {:font-size 16 :color :white :margin-vertical 36}}
        (if connected?
-         "Connected. Don’t move your card."
-         "Hold your phone near a Status Keycard")]
+         (i18n/label :t/connected-dont-move)
+         (i18n/label :t/hold-phone-near-keycard))]
       [rn/pressable
        {:on-press (fn []
                     (when on-close (on-close))
@@ -33,4 +34,4 @@
        [rn/view
         {:style {:background-color "#8E8E93" :flex 1 :align-items :center :padding 18 :border-radius 10}}
         [rn/text {:style {:color :white :font-size 16}}
-         "Cancel"]]]]]))
+         (i18n/label :t/cancel)]]]]]))

src/status_im/contexts/keycard/not_keycard/view.cljs

@@ -0,0 +1,28 @@
+(ns status-im.contexts.keycard.not-keycard.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.common.events-helper :as events-helper]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [{:keys [top bottom]} (safe-area/get-insets)]
+    [quo/overlay
+     {:type            :shell
+      :container-style {:padding-top    top
+                        :padding-bottom bottom}}
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/arrow-left
+       :on-press   events-helper/navigate-back}]
+     [quo/page-top
+      {:title            (i18n/label :t/oops-not-keycard)
+       :description      :text
+       :description-text (i18n/label :t/make-sure-keycard)}]
+     [rn/view {:flex 1}]
+     [rn/view {:padding-horizontal 20}
+      [quo/button {:on-press #(rf/dispatch [:keycard/connect])}
+       (i18n/label :t/try-again)]]]))

src/status_im/contexts/keycard/pin/create/view.cljs

@@ -0,0 +1,55 @@
+(ns status-im.contexts.keycard.pin.create.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.constants :as constants]
+            [utils.i18n :as i18n]))
+
+(defn view
+  [{:keys [on-complete]}]
+  (let [[pin set-pin]             (rn/use-state "")
+        [first-pin set-first-pin] (rn/use-state "")
+        [error? set-error]        (rn/use-state false)
+        [stage set-stage]         (rn/use-state :create)
+        pin-empty?                (string/blank? pin)
+        on-delete                 (rn/use-callback
+                                   (fn []
+                                     (set-error false)
+                                     (if (= (count pin) 1)
+                                       (do
+                                         (set-pin "")
+                                         (set-stage :create))
+                                       (when (and pin (pos? (count pin)))
+                                         (set-pin (.slice pin 0 -1)))))
+                                   [pin])
+        on-press                  (rn/use-callback
+                                   (fn [new-symbol]
+                                     (let [new-pin (str pin new-symbol)]
+                                       (when (<= (count new-pin) constants/pincode-length)
+                                         (set-pin new-pin)
+                                         (when (= constants/pincode-length (count new-pin))
+                                           (if (= :repeat stage)
+                                             (if (= first-pin new-pin)
+                                               (on-complete new-pin)
+                                               (set-error true))
+                                             (do
+                                               (set-pin "")
+                                               (set-first-pin new-pin)
+                                               (set-stage :repeat)))))))
+                                   [pin stage first-pin])]
+    [rn/view {:style {:padding-bottom 12 :flex 1}}
+     [quo/drawer-top
+      {:title (if (= :create stage)
+                (i18n/label :t/create-keycard-pin)
+                (i18n/label :t/repeat-keycard-pin))}]
+     [rn/view {:style {:flex 1 :justify-content :center :align-items :center :padding-vertical 34}}
+      [quo/pin-input
+       {:blur?                 false
+        :number-of-pins        constants/pincode-length
+        :number-of-filled-pins (count pin)
+        :error?                error?
+        :info                  (when error? (i18n/label :t/pin-not-match))}]]
+     [quo/numbered-keyboard
+      {:delete-key? (not pin-empty?)
+       :on-delete   on-delete
+       :on-press    on-press}]]))

src/status_im/contexts/keycard/sheets/migrate/view.cljs

@@ -0,0 +1,33 @@
+(ns status-im.contexts.keycard.sheets.migrate.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [profile-name        (rf/sub [:profile/name])
+        profile-picture     (rf/sub [:profile/image])
+        customization-color (rf/sub [:profile/customization-color])]
+    [:<>
+     [quo/drawer-top
+      {:type                :context-tag
+       :context-tag-type    :default
+       :title               (i18n/label :t/migrate-key-pair-keycard)
+       :full-name           profile-name
+       :profile-picture     profile-picture
+       :customization-color customization-color}]
+     [rn/view {:style {:padding-horizontal 20}}
+      [quo/text {}
+       (i18n/label :t/migrate-key-pair-keycard-default-key {:name profile-name})]
+      [quo/information-box
+       {:type  :default
+        :style {:margin-top 20 :margin-bottom 12}}
+       (i18n/label :t/migrate-key-pair-keycard-info)]]
+     [quo/bottom-actions
+      {:actions          :two-actions
+       :button-one-label (i18n/label :t/continue)
+       :button-one-props {:on-press #()}
+       :button-two-label (i18n/label :t/cancel)
+       :button-two-props {:type     :grey
+                          :on-press #(rf/dispatch [:hide-bottom-sheet])}}]]))

src/status_im/contexts/keycard/sign/events.cljs

@@ -14,16 +14,17 @@
          path            (get-in db [:wallet :accounts current-address :path])
          key-uid         (get-in db [:profile/profile :key-uid])]
      {:fx [[:dispatch
-            [:keycard/read-card
-             {:key-uid    key-uid
-              :on-read-fx [[:effects.keycard/sign
-                            {:pin pin-text
-                             :path path
-                             :hash (utils.address/naked-address tx-hash)
-                             :on-success
-                             #(do
-                                (rf/dispatch [:keycard/hide-connection-sheet])
-                                (rf/dispatch
-                                 [:wallet/proceed-with-transactions-signatures
-                                  (get-signature-map tx-hash %)]))
-                             :on-failure #(rf/dispatch [:keycard/on-action-with-pin-error %])}]]}]]]})))
+            [:keycard/connect
+             {:key-uid       key-uid
+              :on-success-fx [[:effects.keycard/sign
+                               {:pin pin-text
+                                :path path
+                                :hash (utils.address/naked-address tx-hash)
+                                :on-success
+                                #(do
+                                   (rf/dispatch [:keycard/disconnect])
+                                   (rf/dispatch
+                                    [:wallet/proceed-with-transactions-signatures
+                                     (get-signature-map tx-hash %)]))
+                                :on-failure #(rf/dispatch [:keycard/on-action-with-pin-error
+                                                           %])}]]}]]]})))

src/status_im/contexts/keycard/utils.cljs

@@ -18,28 +18,31 @@
 (defn validate-application-info
   [profile-key-uid {:keys [key-uid paired? pin-retry-counter puk-retry-counter] :as application-info}]
   (let [profile-mismatch? (or (nil? profile-key-uid) (not= profile-key-uid key-uid))]
-    (log/debug "[keycard] login-with-keycard"
+    (log/debug "[keycard]"              "login-with-keycard"
                "empty application info" (empty? application-info)
                "no key-uid"             (empty? key-uid)
                "profile-mismatch?"      profile-mismatch?
                "no pairing"             paired?)
     (cond
       (empty? application-info)
-      :not-keycard
+      :keycard/error.not-keycard
 
       (empty? (:key-uid application-info))
-      :keycard-blank
+      :keycard/error.keycard-blank
 
       profile-mismatch?
-      :keycard-wrong
+      :keycard/error.keycard-wrong
 
       (not paired?)
-      :keycard-unpaired
+      :keycard/error.keycard-unpaired
 
       (and (zero? pin-retry-counter)
            (or (nil? puk-retry-counter)
                (pos? puk-retry-counter)))
-      nil
+      :keycard/error.keycard-frozen
+
+      (zero? puk-retry-counter)
+      :keycard/error.keycard-locked
 
       :else
       nil)))

src/status_im/contexts/onboarding/common/background/view.cljs

@@ -58,7 +58,7 @@
       (reset! shell.state/screen-height height)
       (async-storage/set-item! :screen-height height))))
 
-(defn f-view
+(defn view
   [dark-overlay?]
   (let [view-id      (rf/sub [:view-id])
         animate?     (not dark-overlay?)
@@ -94,5 +94,3 @@
          :blur-radius   (if platform/android? 25 10)
          :blur-type     :transparent
          :overlay-color :transparent}])]))
-
-(defn view [dark-overlay?] [:f> f-view dark-overlay?])

src/status_im/contexts/profile/login/events.cljs

@@ -102,8 +102,6 @@
            [:dispatch-later [{:ms 1500 :dispatch [:profile.login/non-critical-initialization]}]]
            [:dispatch [:network/check-expensive-connection]]
            [:profile.settings/get-profile-picture key-uid]
-           (when (ff/enabled? ::ff/wallet.wallet-connect)
-             [:dispatch [:wallet-connect/init]])
            (when notifications-enabled?
              [:effects/push-notifications-enable])]})))
 

src/status_im/contexts/profile/profiles/view.cljs

@@ -242,12 +242,13 @@
          {:on-complete
           (fn [pin-text]
             (rf/dispatch
-             [:keycard/read-card
-              {:key-uid    key-uid
-               :on-read-fx [[:effects.keycard/get-keys
-                             {:pin        pin-text
-                              :on-success #(rf/dispatch [:keycard.login/on-get-keys-success %])
-                              :on-failure #(rf/dispatch [:keycard/on-action-with-pin-error %])}]]}]))}]
+             [:keycard/connect
+              {:key-uid       key-uid
+               :on-success-fx [[:effects.keycard/get-keys
+                                {:pin        pin-text
+                                 :on-success #(rf/dispatch [:keycard.login/on-get-keys-success %])
+                                 :on-failure #(rf/dispatch [:keycard/on-action-with-pin-error
+                                                            %])}]]}]))}]
         [password-input])]
      (when-not keycard-pairing
        [quo/button

src/status_im/contexts/profile/settings/list_items.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.profile.settings.list-items
   (:require [status-im.common.not-implemented :as not-implemented]
             [status-im.config :as config]
+            [status-im.feature-flags :as ff]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
@@ -54,9 +55,9 @@
        :image       :icon
        :blur?       true
        :action      :arrow})
-    (when config/show-not-implemented-features?
+    (when (ff/enabled? ::ff/keycard.migrate-profile)
       {:title       (i18n/label :t/keycard)
-       :on-press    not-implemented/alert
+       :on-press    #(rf/dispatch [:open-modal :screen/settings.keycard])
        :image-props :i/keycard
        :image       :icon
        :blur?       true

src/status_im/contexts/settings/keycard/view.cljs

@@ -0,0 +1,45 @@
+(ns status-im.contexts.settings.keycard.view
+  (:require [quo.core :as quo]
+            [quo.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [keycard-profile? (rf/sub [:keycard/keycard-profile?])]
+    [:<>
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/arrow-left
+       :on-press   events-helper/navigate-back}]
+     [quo/page-top
+      {:title (i18n/label :t/keycard)}]
+     (if keycard-profile?
+       [:<>]
+       [rn/view {:style {:padding-horizontal 28 :padding-top 20}}
+        [quo/small-option-card
+         {:variant             :main
+          :title               (i18n/label :t/get-keycard)
+          :subtitle            (i18n/label :t/secure-wallet-card)
+          :button-label        (i18n/label :t/buy-keycard)
+          :accessibility-label :get-keycard
+          :image               (resources/get-image :generate-keys)
+          :on-press            #()}]
+        [rn/view {:style {:margin-top 24}}
+         [quo/text
+          {:style  {:margin-bottom 12
+                    :color         colors/white-opa-70}
+           :size   :paragraph-2
+           :weight :medium}
+          (i18n/label :t/own-keycard)]]
+        [quo/small-option-card
+         {:variant             :icon
+          :title               (i18n/label :t/setup-keycard)
+          :subtitle            (i18n/label :t/ready-keycard)
+          :accessibility-label :setup-keycard
+          :image               (resources/get-image :use-keycard)
+          :on-press            #(rf/dispatch [:open-modal :screen/keycard.check])}]])]))

src/status_im/contexts/shell/activity_center/notification_types.cljs

@@ -28,7 +28,8 @@
 
 ;; TODO: Replace with correct enum values once status-go implements them.
 (def ^:const tx 66612)
-(def ^:const system 66614)
+(def ^:const system
+  #{new-installation-received new-installation-created})
 
 (def ^:const membership
   "Membership is like a logical group of notifications with different types, i.e.

src/status_im/contexts/wallet/account/view.cljs

@@ -60,10 +60,9 @@
          :bridge-action    (fn []
                              (rf/dispatch [:wallet/clean-send-data])
                              (rf/dispatch [:wallet/start-bridge]))
-         :swap-action      (when (ff/enabled? ::ff/wallet.swap)
-                             (fn []
-                               (rf/dispatch [:wallet.tokens/get-token-list])
-                               (rf/dispatch [:open-modal :screen/wallet.swap-select-asset-to-pay])))
+         :swap-action      (fn []
+                             (rf/dispatch [:wallet.tokens/get-token-list])
+                             (rf/dispatch [:open-modal :screen/wallet.swap-select-asset-to-pay]))
          :bridge-disabled? testnet-mode?
          :swap-disabled?   testnet-mode?}])
      [quo/tabs

src/status_im/contexts/wallet/buy_crypto/events.cljs

@@ -0,0 +1,72 @@
+(ns status-im.contexts.wallet.buy-crypto.events
+  (:require [re-frame.core :as rf]
+            [react-native.core :as rn]
+            [status-im.contexts.wallet.sheets.buy-network-selection.view :as buy-network-selection]
+            [status-im.contexts.wallet.sheets.select-asset.view :as select-asset]
+            [utils.i18n :as i18n]))
+
+(rf/reg-event-fx :wallet.buy-crypto/select-provider
+ (fn [{:keys [db]} [{:keys [account provider recurrent?]}]]
+   (let [swap-network (get-in db [:wallet :ui :swap :network])]
+     {:db (-> db
+              (assoc-in [:wallet :ui :buy-crypto :account] account)
+              (assoc-in [:wallet :ui :buy-crypto :provider] provider)
+              (assoc-in [:wallet :ui :buy-crypto :recurrent?] recurrent?))
+      :fx [(if swap-network
+             [:dispatch [:wallet.buy-crypto/select-network swap-network]]
+             [:dispatch
+              [:show-bottom-sheet
+               {:content
+                (fn []
+                  [buy-network-selection/view
+                   {:provider provider
+                    :account  account}])}]])]})))
+
+(rf/reg-event-fx :wallet.buy-crypto/select-network
+ (fn [{:keys [db]} [network]]
+   (let [provider                    (get-in db [:wallet :ui :buy-crypto :provider])
+         network-chain-id            (:chain-id network)
+         supported-tokens            (:supported-tokens provider)
+         supported-tokens-on-network (set (map :symbol
+                                               (filter (fn [token]
+                                                         (= (:chain-id token) network-chain-id))
+                                                       supported-tokens)))]
+     {:db (assoc-in db [:wallet :ui :buy-crypto :network] network)
+      :fx [[:dispatch
+            [:show-bottom-sheet
+             {:content
+              (fn []
+                [select-asset/view
+                 {:title         (i18n/label :t/select-asset-to-buy)
+                  :network       network
+                  :provider      provider
+                  :on-select     (fn [token]
+                                   (rf/dispatch [:wallet/get-crypto-on-ramp-url {:token token}]))
+                  :hide-token-fn (fn [_ token]
+                                   (not (contains? supported-tokens-on-network
+                                                   (:symbol token))))}])}]]]})))
+
+(rf/reg-event-fx
+ :wallet/get-crypto-on-ramp-url
+ (fn [{:keys [db]} [{:keys [token]}]]
+   (let [account     (get-in db [:wallet :ui :buy-crypto :account])
+         provider    (get-in db [:wallet :ui :buy-crypto :provider])
+         network     (get-in db [:wallet :ui :buy-crypto :network])
+         recurrent?  (get-in db [:wallet :ui :buy-crypto :recurrent?])
+         provider-id (:id provider)
+         parameters  {:symbol      (:symbol token)
+                      :destAddress (:address account)
+                      :chainID     (:chain-id network)
+                      :isRecurrent recurrent?}]
+     {:fx [[:json-rpc/call
+            [{:method     "wallet_getCryptoOnRampURL"
+              :params     [provider-id parameters]
+              :on-success (fn [url]
+                            (rf/dispatch [:navigate-back])
+                            (rf/dispatch [:wallet.buy-crypto/clean-all])
+                            (rn/open-url url))
+              :on-error   [:wallet/log-rpc-error {:event :wallet/get-crypto-on-ramps}]}]]]})))
+
+(rf/reg-event-fx :wallet.buy-crypto/clean-all
+ (fn [{:keys [db]}]
+   {:db (update-in db [:wallet :ui] dissoc :buy-crypto)}))

src/status_im/contexts/wallet/common/account_switcher/view.cljs

@@ -8,19 +8,20 @@
     [utils.re-frame :as rf]))
 
 (defn get-bottom-sheet-args
-  [switcher-type]
+  [switcher-type params]
   (case switcher-type
     :account-options {:content      account-options/view
                       :hide-handle? true}
-    :select-account  {:content select-account/view}
+    :select-account  {:content (fn []
+                                 [select-account/view params])}
     nil))
 
 (defn- on-dapps-press
-  [switcher-type]
-  (rf/dispatch [:show-bottom-sheet (get-bottom-sheet-args switcher-type)]))
+  [switcher-type params]
+  (rf/dispatch [:show-bottom-sheet (get-bottom-sheet-args switcher-type params)]))
 
 (defn view
-  [{:keys [type on-press accessibility-label icon-name switcher-type margin-top]
+  [{:keys [type on-press accessibility-label icon-name switcher-type margin-top params]
     :or   {icon-name           :i/close
            accessibility-label :top-bar
            switcher-type       :account-options
@@ -45,6 +46,6 @@
                             (when-not sending-collectible?
                               {:content-type        :account-switcher
                                :customization-color color
-                               :on-press            #(on-dapps-press switcher-type)
+                               :on-press            #(on-dapps-press switcher-type params)
                                :emoji               emoji
                                :type                (when watch-only? :watch-only)})]}]))

src/status_im/contexts/wallet/common/asset_list/view.cljs

@@ -32,9 +32,11 @@
                      :selected)}]))
 
 (defn view
-  [{:keys [content-container-style search-text on-token-press preselected-token-symbol]
+  [{:keys [content-container-style search-text on-token-press preselected-token-symbol chain-ids]
     :or   {content-container-style {:padding-horizontal 8}}}]
-  (let [filtered-tokens (rf/sub [:wallet/current-viewing-account-tokens-filtered {:query search-text}])
+  (let [filtered-tokens (rf/sub [:wallet/current-viewing-account-tokens-filtered
+                                 {:query     search-text
+                                  :chain-ids chain-ids}])
         currency        (rf/sub [:profile/currency])
         currency-symbol (rf/sub [:profile/currency-symbol])]
     [gesture/flat-list

src/status_im/contexts/wallet/common/token_value/view.cljs

@@ -47,7 +47,7 @@
                           (rf/dispatch [:wallet/bridge-select-token params]))})
 
 (defn- action-swap
-  [{:keys [token token-symbol testnet-mode?]}]
+  [{:keys [token asset-to-receive token-symbol testnet-mode?]}]
   {:icon                :i/swap
    :accessibility-label :swap
    :label               (i18n/label :t/swap)
@@ -56,6 +56,7 @@
                           (rf/dispatch [:hide-bottom-sheet])
                           (rf/dispatch [:wallet.swap/start
                                         {:asset-to-pay     (or token {:symbol token-symbol})
+                                         :asset-to-receive asset-to-receive
                                          :open-new-screen? true}]))})
 
 (defn- action-manage-tokens
@@ -75,23 +76,26 @@
 
 (defn token-value-drawer
   [token watch-only? entry-point]
-  (let [token-symbol     (:token token)
-        token-data       (first (rf/sub [:wallet/current-viewing-account-tokens-filtered
-                                         {:query token-symbol}]))
-        selected-account (rf/sub [:wallet/current-viewing-account-address])
-        token-owners     (rf/sub [:wallet/operable-addresses-with-token-symbol token-symbol])
-        testnet-mode?    (rf/sub [:profile/test-networks-enabled?])
-        params           (cond-> {:start-flow?   true
-                                  :owners        token-owners
-                                  :testnet-mode? testnet-mode?}
-                           selected-account
-                           (assoc :token        token-data
-                                  :stack-id     :screen/wallet.accounts
-                                  :has-balance? (-> (get-in token [:values :fiat-unformatted-value])
-                                                    (money/greater-than (money/bignumber "0"))))
-                           (not selected-account)
-                           (assoc :token-symbol token-symbol
-                                  :stack-id     :wallet-stack))]
+  (let [token-symbol         (:token token)
+        token-data           (first (rf/sub [:wallet/current-viewing-account-tokens-filtered
+                                             {:query token-symbol}]))
+        selected-account     (rf/sub [:wallet/current-viewing-account-address])
+        token-owners         (rf/sub [:wallet/operable-addresses-with-token-symbol token-symbol])
+        testnet-mode?        (rf/sub [:profile/test-networks-enabled?])
+        receive-token-symbol (if (= token-symbol "SNT") "ETH" "SNT")
+        asset-to-receive     (rf/sub [:wallet/token-by-symbol receive-token-symbol])
+        params               (cond-> {:start-flow?      true
+                                      :owners           token-owners
+                                      :testnet-mode?    testnet-mode?
+                                      :asset-to-receive asset-to-receive}
+                               selected-account
+                               (assoc :token        token-data
+                                      :stack-id     :screen/wallet.accounts
+                                      :has-balance? (-> (get-in token [:values :fiat-unformatted-value])
+                                                        (money/greater-than (money/bignumber "0"))))
+                               (not selected-account)
+                               (assoc :token-symbol token-symbol
+                                      :stack-id     :wallet-stack))]
     [quo/action-drawer
      [(cond->> [(when (ff/enabled? ::ff/wallet.assets-modal-manage-tokens)
                   (action-manage-tokens watch-only?))
@@ -102,8 +106,7 @@
                  (when (seq token-owners)
                    (action-send params entry-point))
                  (action-receive selected-account)
-                 (when (ff/enabled? ::ff/wallet.swap)
-                   (action-swap params))
+                 (action-swap params)
                  (when (seq token-owners)
                    (action-bridge (assoc params
                                          :bridge-disabled?

src/status_im/contexts/wallet/common/utils.cljs

@@ -15,13 +15,17 @@
   [full-name]
   (first (string/split full-name #" ")))
 
-(defn cut-fiat-balance-to-two-decimals
-  [balance]
+(defn cut-fiat-balance
+  [balance decimals]
   (let [valid-balance? (and balance
                             (or (number? balance) (.-toFixed balance)))]
     (as-> balance $
       (if valid-balance? $ 0)
-      (.toFixed $ 2))))
+      (.toFixed $ decimals))))
+
+(defn cut-fiat-balance-to-two-decimals
+  [balance]
+  (cut-fiat-balance balance 2))
 
 (defn prettify-balance
   [currency-symbol balance]
@@ -151,6 +155,10 @@
   [accounts address]
   (some #(when (= (:address %) address) %) accounts))
 
+(defn get-default-account
+  [accounts]
+  (some #(when (:default-account? %) %) accounts))
+
 (defn calculate-token-fiat-value
   "Returns the token fiat value for provided raw balance"
   [{:keys [currency balance token]}]

src/status_im/contexts/wallet/events.cljs

@@ -345,8 +345,7 @@
                            :Prod
                            data-store/rpc->network)
                      data)}]
-     {:fx [(when (ff/enabled? ::ff/wallet.swap)
-             [:dispatch [:wallet.tokens/get-token-list]])]
+     {:fx [[:dispatch [:wallet.tokens/get-token-list]]]
       :db (assoc-in db [:wallet :networks] network-data)})))
 
 (rf/reg-event-fx
@@ -478,7 +477,9 @@
          [:dispatch [:wallet/get-ethereum-chains]]
          [:dispatch [:wallet/get-accounts]]
          [:dispatch [:wallet/get-keypairs]]
-         [:dispatch [:wallet/get-saved-addresses]]]}))
+         [:dispatch [:wallet/get-saved-addresses]]
+         (when (ff/enabled? ::ff/wallet.wallet-connect)
+           [:dispatch-later [{:ms 500 :dispatch [:wallet-connect/init]}]])]}))
 
 (rf/reg-event-fx :wallet/share-account
  (fn [_ [{:keys [content title]}]]

src/status_im/contexts/wallet/home/view.cljs

@@ -8,6 +8,7 @@
     [status-im.common.refreshable-flat-list.view :as refreshable-flat-list]
     [status-im.contexts.wallet.home.style :as style]
     [status-im.contexts.wallet.home.tabs.view :as tabs]
+    [status-im.contexts.wallet.send.transaction-details.view :as transaction-details]
     [status-im.contexts.wallet.sheets.network-filter.view :as network-filter]
     [status-im.feature-flags :as ff]
     [utils.i18n :as i18n]
@@ -93,14 +94,18 @@
                                   :tint-color colors/neutral-40
                                   :on-refresh #(rf/dispatch [:wallet/get-accounts])}]
        :header                  [rn/view {:style (style/header-container theme)}
-                                 [quo/wallet-overview
-                                  {:state             (if tokens-loading? :loading :default)
-                                   :time-frame        :none
-                                   :metrics           :none
-                                   :balance           formatted-balance
-                                   :networks          networks
-                                   :dropdown-on-press #(rf/dispatch [:show-bottom-sheet
-                                                                     {:content network-filter/view}])}]
+                                 [rn/pressable
+                                  {:on-press #(rf/dispatch
+                                               [:show-bottom-sheet
+                                                {:content transaction-details/sheet}])}
+                                  [quo/wallet-overview
+                                   {:state             (if tokens-loading? :loading :default)
+                                    :time-frame        :none
+                                    :metrics           :none
+                                    :balance           formatted-balance
+                                    :networks          networks
+                                    :dropdown-on-press #(rf/dispatch [:show-bottom-sheet
+                                                                      {:content network-filter/view}])}]]
                                  (when (ff/enabled? ::ff/wallet.graph)
                                    [quo/wallet-graph {:time-frame :empty}])
                                  [render-cards cards account-list-ref]

src/status_im/contexts/wallet/send/events_test.cljs

@@ -1,6 +1,6 @@
 (ns status-im.contexts.wallet.send.events-test
   (:require
-    [cljs.test :refer-macros [is testing run-tests]]
+    [cljs.test :refer-macros [is testing]]
     matcher-combinators.test
     [re-frame.db :as rf-db]
     [status-im.contexts.wallet.common.utils.networks :as network-utils]
@@ -710,5 +710,3 @@
                                 :stack-id       stack-id
                                 :start-flow?    start-flow?
                                 :netork-details network-details}])))))))
-
-(run-tests)

src/status_im/contexts/wallet/send/input_amount/view.cljs

@@ -158,16 +158,14 @@
         active-screen?                            (= view-id current-screen-id)
         bottom                                    (safe-area/get-bottom)
         [crypto-currency? set-crypto-currency]    (rn/use-state initial-crypto-currency?)
-        on-navigate-back                          on-navigate-back
         handle-on-confirm                         (fn [amount]
                                                     (rf/dispatch [:wallet/set-token-amount-to-send
                                                                   {:amount   amount
                                                                    :stack-id current-screen-id}]))
         {fiat-currency :currency}                 (rf/sub [:profile/profile])
-        {token-symbol :symbol
+        {token-symbol   :symbol
          token-networks :networks
-         :as
-         token}                                   (rf/sub [:wallet/wallet-send-token])
+         :as            token}                    (rf/sub [:wallet/wallet-send-token])
         send-from-locked-amounts                  (rf/sub [:wallet/wallet-send-from-locked-amounts])
         {:keys [total-balance]
          :as   token-by-symbol}                   (rf/sub [:wallet/token-by-symbol
@@ -196,10 +194,8 @@
                                                     (utils/cut-crypto-decimals-to-fit-usd-cents
                                                      token-balance
                                                      usd-conversion-rate)
-                                                    (-> (money/crypto->fiat
-                                                         token-balance
-                                                         conversion-rate)
-                                                        utils/cut-fiat-balance-to-two-decimals))
+                                                    (utils/cut-fiat-balance-to-two-decimals
+                                                     (money/crypto->fiat token-balance conversion-rate)))
         input-value                               (controlled-input/input-value input-state)
         valid-input?                              (not (or (controlled-input/empty-value? input-state)
                                                            (controlled-input/input-error input-state)))
@@ -389,7 +385,8 @@
        :button-one-label (if should-try-again?
                            (i18n/label :t/try-again)
                            button-one-label)
-       :button-one-props (merge (when-not should-try-again? button-one-props)
+       :button-one-props (merge (when-not should-try-again?
+                                  button-one-props)
                                 {:disabled? (or loading-routes?
                                                 (and (not should-try-again?) confirm-disabled?))
                                  :on-press  (cond

src/status_im/contexts/wallet/send/send_amount/view.cljs

@@ -10,8 +10,7 @@
   [input-amount/view
    {:current-screen-id      :screen/wallet.send-input-amount
     :button-one-label       (i18n/label :t/review-send)
-    :enabled-from-chain-ids (rf/sub
-                             [:wallet/wallet-send-enabled-from-chain-ids])
+    :enabled-from-chain-ids (rf/sub [:wallet/wallet-send-enabled-from-chain-ids])
     :from-enabled-networks  (rf/sub [:wallet/wallet-send-enabled-networks])
     :on-navigate-back       (fn []
                               (rf/dispatch-sync [:wallet/stop-and-clean-suggested-routes])

src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -9,6 +9,7 @@
     [status-im.common.standard-authentication.core :as standard-auth]
     [status-im.contexts.wallet.common.utils :as utils]
     [status-im.contexts.wallet.send.transaction-confirmation.style :as style]
+    [status-im.contexts.wallet.send.transaction-details.view :as transaction-details]
     [status-im.contexts.wallet.send.utils :as send-utils]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
@@ -178,6 +179,17 @@
        [rn/activity-indicator {:style {:flex 1}}]
        route-loaded?
        [:<>
+        [quo/button
+         {:icon-only?          true
+          :type                :outline
+          :size                32
+          :inner-style         {:opacity 1}
+          :accessibility-label :advanced-button
+          :container-style     {:margin-right 8}
+          :on-press            #(rf/dispatch
+                                 [:show-bottom-sheet
+                                  {:content transaction-details/sheet}])}
+         :i/advanced]
         [data-item
          {:title    (i18n/label :t/est-time)
           :subtitle (i18n/label :t/time-in-mins {:minutes (str estimated-time-min)})}]
@@ -270,33 +282,37 @@
            :gradient-cover?          true
            :customization-color      (:color account)}
           [rn/view
-           [transaction-title
-            {:token-display-name token-symbol
-             :amount             amount
-             :account            account
-             :type               type
-             :recipient          recipient
-             :route              route
-             :to-network         bridge-to-network
-             :image-url          image-url
-             :transaction-type   transaction-type
-             :collectible?       collectible?}]
-           [user-summary
-            {:summary-type        :status-account
-             :accessibility-label :summary-from-label
-             :label               (i18n/label :t/from-capitalized)
-             :account-props       from-account-props
-             :theme               theme}]
-           [user-summary
-            {:summary-type        (if (= transaction-type :tx/bridge)
-                                    :status-account
-                                    :account)
-             :accessibility-label :summary-to-label
-             :label               (i18n/label :t/to-capitalized)
-             :account-props       (if (= transaction-type :tx/bridge)
-                                    from-account-props
-                                    user-props)
-             :recipient           recipient
-             :bridge-tx?          (= transaction-type :tx/bridge)
-             :account-to?         true
-             :theme               theme}]]]]))))
+           [rn/pressable
+            {:on-press #(rf/dispatch [:navigate-to-within-stack
+                                      [:screen/wallet.transaction-details
+                                       :screen/wallet.transaction-confirmation]])}
+            [transaction-title
+             {:token-display-name token-symbol
+              :amount             amount
+              :account            account
+              :type               type
+              :recipient          recipient
+              :route              route
+              :to-network         bridge-to-network
+              :image-url          image-url
+              :transaction-type   transaction-type
+              :collectible?       collectible?}]
+            [user-summary
+             {:summary-type        :status-account
+              :accessibility-label :summary-from-label
+              :label               (i18n/label :t/from-capitalized)
+              :account-props       from-account-props
+              :theme               theme}]
+            [user-summary
+             {:summary-type        (if (= transaction-type :tx/bridge)
+                                     :status-account
+                                     :account)
+              :accessibility-label :summary-to-label
+              :label               (i18n/label :t/to-capitalized)
+              :account-props       (if (= transaction-type :tx/bridge)
+                                     from-account-props
+                                     user-props)
+              :recipient           recipient
+              :bridge-tx?          (= transaction-type :tx/bridge)
+              :account-to?         true
+              :theme               theme}]]]]]))))

src/status_im/contexts/wallet/send/transaction_details/style.cljs

@@ -0,0 +1,14 @@
+(ns status-im.contexts.wallet.send.transaction-details.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn prop-text
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(def content-line
+  {:flex-direction  :row
+   :margin-top      2
+   :align-items     :center
+   :column-gap      4
+   :justify-content :flex-start})

src/status_im/contexts/wallet/send/transaction_details/view.cljs

@@ -0,0 +1,49 @@
+(ns status-im.contexts.wallet.send.transaction-details.view
+  (:require
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [utils.i18n :as i18n]))
+
+(defn sheet
+  [_]
+  [rn/view
+   [quo/drawer-top
+    {:title "Transaction settings"}]
+   [quo/category
+    {:list-type :settings
+     :data      [{:title             "Normal ~60s"
+                  :image             :icon
+                  :image-props       :i/placeholder
+                  :description       :text
+                  :description-props {:text "€1.45"}
+                  :on-press          #()
+                  :action            :selector
+                  :action-props      {:type :radio}
+                  :label             :text
+                  :preview-size      :size-32}
+                 {:title             "Fast ~40s"
+                  :image             :icon
+                  :image-props       :i/placeholder
+                  :description       :text
+                  :description-props {:text "€1.65"}
+                  :on-press          #()
+                  :action            :selector
+                  :action-props      {:type :radio}
+                  :label             :text
+                  :preview-size      :size-32}
+                 {:title             "Urget ~15s"
+                  :image             :icon
+                  :image-props       :i/placeholder
+                  :description       :text
+                  :description-props {:text "€1.85"}
+                  :on-press          #()
+                  :action            :selector
+                  :action-props      {:type :radio}
+                  :label             :text
+                  :preview-size      :size-32}]}]
+   [quo/bottom-actions
+    {:actions          :one-action
+     :button-one-props {:on-press #()}
+     :button-one-label (i18n/label :t/confirm)}]])
+

src/status_im/contexts/wallet/sheets/buy_network_selection/style.cljs

@@ -0,0 +1,28 @@
+(ns status-im.contexts.wallet.sheets.buy-network-selection.style)
+
+(defn network-list-container
+  [mainnet?]
+  {:margin-horizontal 8
+   :padding-vertical  (when mainnet? 8)})
+
+(def header-container
+  {:height             62
+   :padding-horizontal 20})
+
+(def context-tag
+  {:margin-top 0})
+
+(def divider-label
+  {:padding-top    0
+   :padding-bottom 0})
+
+(def subheader-container
+  {:flex-direction :row
+   :align-items    :center
+   :margin-top     4})
+
+(def on
+  {:margin-right 4})
+
+(def to
+  {:margin-horizontal 4})

src/status_im/contexts/wallet/sheets/buy_network_selection/view.cljs

@@ -0,0 +1,78 @@
+(ns status-im.contexts.wallet.sheets.buy-network-selection.view
+  (:require [quo.core :as quo]
+            [quo.foundations.resources :as quo.resources]
+            [react-native.core :as rn]
+            [status-im.constants :as constants]
+            [status-im.contexts.wallet.sheets.buy-network-selection.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn- network-item
+  [{:keys [network on-select-network]}]
+  (let [{:keys [network-name]} network
+        mainnet?               (= network-name constants/mainnet-network-name)]
+    [quo/network-list
+     {:label           (name network-name)
+      :network-image   (quo.resources/get-network network-name)
+      :on-press        #(on-select-network network)
+      :container-style (style/network-list-container mainnet?)}]))
+
+(defn- subheader
+  [{:keys [provider account]}]
+  [rn/view {:style style/subheader-container}
+   [quo/text
+    {:size   :paragraph-2
+     :weight :medium
+     :style  style/on}
+    (i18n/label :t/on-uppercase)]
+   [quo/context-tag
+    {:type            :network
+     :network-logo    (:logo-url provider)
+     :network-name    (:name provider)
+     :size            24
+     :container-style style/context-tag}]
+   [quo/text
+    {:size   :paragraph-2
+     :weight :medium
+     :style  style/to}
+    (i18n/label :t/to)]
+   [quo/context-tag
+    {:type            :account
+     :account-name    (:name account)
+     :emoji           (:emoji account)
+     :size            24
+     :container-style style/context-tag}]])
+
+(defn view
+  []
+  (let [provider         (rf/sub [:wallet/wallet-buy-crypto-provider])
+        account          (rf/sub [:wallet/wallet-buy-crypto-account])
+        network-details  (rf/sub [:wallet/network-details])
+        mainnet-network  (first network-details)
+        layer-2-networks (rest network-details)
+        render-fn        (rn/use-callback (fn [network]
+                                            [network-item
+                                             {:network network
+                                              :on-select-network
+                                              (fn [network]
+                                                (rf/dispatch [:wallet.buy-crypto/select-network
+                                                              network]))}]))]
+    [:<>
+     [rn/view {:style style/header-container}
+      [quo/text
+       {:size   :heading-2
+        :weight :semi-bold}
+       (i18n/label :t/select-network-for-buying)]
+      [subheader
+       {:provider provider
+        :account  account}]]
+     (when mainnet-network
+       [network-item
+        {:network           mainnet-network
+         :on-select-network #(rf/dispatch [:wallet.buy-crypto/select-network mainnet-network])}])
+     [quo/divider-label {:container-style style/divider-label}
+      (i18n/label :t/layer-2)]
+     [rn/flat-list
+      {:data           (vec layer-2-networks)
+       :render-fn      render-fn
+       :scroll-enabled false}]]))

src/status_im/contexts/wallet/sheets/buy_token/view.cljs

@@ -7,11 +7,20 @@
             [utils.re-frame :as rf]))
 
 (defn- crypto-on-ramp-item
-  [{:keys [name description fees logo-url site-url recurrent-site-url]} _ _ {:keys [tab]}]
-  (let [open-url (rn/use-callback (fn []
-                                    (rf/dispatch [:open-url
-                                                  (if (= tab :recurrent) recurrent-site-url site-url)]))
-                                  [site-url recurrent-site-url tab])]
+  [{:keys [name description fees logo-url site-url recurrent-site-url urls-need-parameters]
+    :as   provider}
+   _
+   _
+   {:keys [account tab]}]
+  (let [open-url (rn/use-callback
+                  (fn []
+                    (if urls-need-parameters
+                      (rf/dispatch [:wallet.buy-crypto/select-provider
+                                    {:account    account
+                                     :provider   provider
+                                     :recurrent? (= tab :recurrent)}])
+                      (rn/open-url (if (= tab :recurrent) recurrent-site-url site-url))))
+                  [site-url recurrent-site-url tab])]
     [quo/settings-item
      {:title             name
       :description       :text
@@ -39,6 +48,7 @@
   (rn/use-mount (fn []
                   (rf/dispatch [:wallet/get-crypto-on-ramps])))
   (let [crypto-on-ramps                 (rf/sub [:wallet/crypto-on-ramps])
+        account                         (rf/sub [:wallet/current-viewing-account-or-default])
         [selected-tab set-selected-tab] (rn/use-state initial-tab)
         [min-height set-min-height]     (rn/use-state 0)
         on-layout                       (rn/use-callback
@@ -58,5 +68,6 @@
                       (:one-time crypto-on-ramps))
        :on-layout   on-layout
        :style       (style/list-container min-height)
-       :render-data {:tab selected-tab}
+       :render-data {:tab     selected-tab
+                     :account account}
        :render-fn   crypto-on-ramp-item}]]))

src/status_im/contexts/wallet/sheets/select_account/view.cljs

@@ -2,30 +2,60 @@
   (:require [quo.core :as quo]
             quo.theme
             [react-native.gesture :as gesture]
+            [status-im.contexts.wallet.common.utils :as wallet.utils]
             [status-im.contexts.wallet.sheets.select-account.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(defn- render-account-item
-  [{:keys [color address] :as account} _ _ {:keys [selected-account-address]}]
-  [quo/account-item
-   {:type                :default
-    :account-props       (assoc account :customization-color color)
-    :customization-color color
-    :state               (if (= address selected-account-address) :selected :default)
-    :on-press            (fn []
-                           (rf/dispatch [:wallet/switch-current-viewing-account address])
-                           (rf/dispatch [:hide-bottom-sheet]))}])
+(defn list-item
+  [{:keys [account selected-account-address]}]
+  (let [{:keys [color address]} account]
+    [quo/account-item
+     {:type                :default
+      :account-props       (assoc account :customization-color color)
+      :customization-color color
+      :state               (if (= address selected-account-address) :selected :default)
+      :on-press            (fn []
+                             (rf/dispatch [:wallet/switch-current-viewing-account address])
+                             (rf/dispatch [:hide-bottom-sheet]))}]))
+
+(defn list-item-with-balance
+  [{:keys [account selected-account-address asset-symbol network]}]
+  (let [{:keys [color address tokens]} account
+        token                          (->> tokens
+                                            (filter #(= (:symbol %) asset-symbol))
+                                            first)
+        token-balance                  (get-in token [:balances-per-chain (:chain-id network) :balance])]
+    [quo/account-item
+     {:type                (if (= address selected-account-address) :default :tag)
+      :token-props         {:symbol asset-symbol
+                            :value  (wallet.utils/cut-fiat-balance (or (js/parseFloat token-balance) 0)
+                                                                   4)}
+      :account-props       (assoc account :customization-color color)
+      :customization-color color
+      :state               (if (= address selected-account-address) :selected :default)
+      :on-press            (fn []
+                             (rf/dispatch [:wallet/switch-current-viewing-account address])
+                             (rf/dispatch [:hide-bottom-sheet]))}]))
 
 (defn view
-  []
+  [{:keys [show-account-balances? asset-symbol network]}]
   (let [selected-account-address (rf/sub [:wallet/current-viewing-account-address])
         accounts                 (rf/sub [:wallet/operable-accounts])]
     [:<>
      [quo/drawer-top {:title (i18n/label :t/select-account)}]
      [gesture/flat-list
       {:data                            accounts
-       :render-fn                       render-account-item
+       :render-fn                       (fn [account _ _ {:keys [selected-account-address]}]
+                                          (if show-account-balances?
+                                            [list-item-with-balance
+                                             {:account                  account
+                                              :selected-account-address selected-account-address
+                                              :asset-symbol             asset-symbol
+                                              :network                  network}]
+                                            [list-item
+                                             {:account                  account
+                                              :selected-account-address selected-account-address}]))
        :render-data                     {:selected-account-address selected-account-address}
        :content-container-style         style/list-container
        :shows-vertical-scroll-indicator false}]]))

src/status_im/contexts/wallet/sheets/select_asset/view.cljs

@@ -51,14 +51,31 @@
     :network-name full-name
     :type         :network}])
 
+(defn- provider-view
+  [{:keys [name logo-url]}]
+  [quo/context-tag
+   {:size         24
+    :network-logo logo-url
+    :network-name name
+    :type         :network}])
+
 (defn- subheader-view
-  [{:keys [account network]}]
+  [{:keys [provider account network]}]
   [rn/view {:style style/subheader-container}
    [quo/text
     {:size   :paragraph-2
      :weight :medium}
     (i18n/label :t/select-asset-on)]
-   [account-view account]
+   (if provider
+     [provider-view provider]
+     [account-view account])
+   (when provider
+     [:<>
+      [quo/text
+       {:size   :paragraph-2
+        :weight :medium}
+       (i18n/label :t/to)]
+      [account-view account]])
    [quo/text
     {:size   :paragraph-2
      :weight :medium}
@@ -66,9 +83,8 @@
    [network-view network]])
 
 (defn view
-  [{:keys [title on-select hide-token-fn disable-token-fn]}]
-  (let [account                       (rf/sub [:wallet/current-viewing-account])
-        {:keys [network]}             (rf/sub [:wallet/swap])
+  [{:keys [title network provider on-select hide-token-fn disable-token-fn]}]
+  (let [account                       (rf/sub [:wallet/current-viewing-account-or-default])
         [search-text set-search-text] (rn/use-state "")
         window-height                 (:height (rn/get-window))]
     [rn/safe-area-view {:style (style/container window-height)}
@@ -81,8 +97,9 @@
       {:title                     title
        :title-accessibility-label :title-label}]
      [subheader-view
-      {:account account
-       :network network}]
+      {:account  account
+       :network  network
+       :provider provider}]
      [assets-view
       {:search-text      search-text
        :on-change-text   #(set-search-text %)

src/status_im/contexts/wallet/swap/events.cljs

@@ -14,7 +14,7 @@
             [utils.number :as number]))
 
 (rf/reg-event-fx :wallet.swap/start
- (fn [{:keys [db]} [{:keys [network open-new-screen?] :as data}]]
+ (fn [{:keys [db]} [{:keys [network asset-to-receive open-new-screen?] :as data}]]
    (let [{:keys [wallet]}       db
          test-networks-enabled? (get-in db [:profile/profile :test-networks-enabled?])
          account                (swap-utils/wallet-account wallet)
@@ -25,12 +25,6 @@
                                     :account                account
                                     :test-networks-enabled? test-networks-enabled?
                                     :token-symbol           (get-in data [:asset-to-pay :symbol])}))
-         asset-to-receive       (or (:asset-to-receive data)
-                                    (swap-utils/select-default-asset-to-receive
-                                     {:wallet                 wallet
-                                      :account                account
-                                      :test-networks-enabled? test-networks-enabled?
-                                      :asset-to-pay           asset-to-pay}))
          network'               (or network
                                     (swap-utils/select-network asset-to-pay))]
      {:db (-> db
@@ -76,11 +70,7 @@
 
 (rf/reg-event-fx :wallet.swap/select-asset-to-receive
  (fn [{:keys [db]} [{:keys [token]}]]
-   {:db (update-in db
-                   [:wallet :ui :swap]
-                   #(-> %
-                        (assoc :asset-to-receive token)
-                        (assoc :loading-swap-proposal? true)))}))
+   {:db (assoc-in db [:wallet :ui :swap :asset-to-receive] token)}))
 
 (rf/reg-event-fx :wallet.swap/set-default-slippage
  (fn [{:keys [db]}]
@@ -141,8 +131,6 @@
                                       :amount                 amount
                                       :amount-hex             amount-in-hex
                                       :loading-swap-proposal? true)
-                                     :always
-                                     (dissoc :error-response)
                                      clean-approval-transaction?
                                      (dissoc :approval-transaction-id :approved-amount :swap-proposal)))
         :json-rpc/call [{:method   "wallet_getSuggestedRoutesAsync"

src/status_im/contexts/wallet/swap/select_asset_to_pay/view.cljs

@@ -20,10 +20,15 @@
 
 (defn- assets-view
   [search-text on-change-text]
-  (let [on-token-press (fn [token]
-                         (rf/dispatch [:wallet.swap/start
-                                       {:asset-to-pay     token
-                                        :open-new-screen? false}]))]
+  (let [snt-token      (rf/sub [:wallet/token-by-symbol "SNT"])
+        eth-token      (rf/sub [:wallet/token-by-symbol "ETH"])
+        on-token-press (fn [token]
+                         (let [pay-token-symbol (:symbol token)
+                               asset-to-receive (if (= pay-token-symbol "SNT") eth-token snt-token)]
+                           (rf/dispatch [:wallet.swap/start
+                                         {:asset-to-pay     token
+                                          :asset-to-receive asset-to-receive
+                                          :open-new-screen? false}])))]
     [:<>
      [search-input search-text on-change-text]
      [asset-list/view

src/status_im/contexts/wallet/swap/set_spending_cap/style.cljs

@@ -10,8 +10,12 @@
    :height           36
    :background-color :transparent})
 
+(def floating-button-page-content-container
+  {:margin-bottom 168})
+
 (def scroll-view-container
-  {:padding-bottom 150})
+  {:flex           1
+   :padding-bottom 20})
 
 (def content-container
   {:padding-top        12
@@ -56,5 +60,5 @@
 
 (defn footer-container
   [theme]
-  {:margin-bottom    -10
-   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})
+  {:margin-bottom    -12
+   :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

src/status_im/contexts/wallet/swap/set_spending_cap/view.cljs

@@ -254,6 +254,7 @@
     [rn/view {:style style/container}
      [floating-button-page/view
       {:footer-container-padding 0
+       :content-container-style  style/floating-button-page-content-container
        :header                   [quo/page-nav
                                   {:icon-name           :i/close
                                    :on-press            events-helper/navigate-back

src/status_im/contexts/wallet/swap/setup_swap/view.cljs

@@ -1,27 +1,29 @@
 (ns status-im.contexts.wallet.swap.setup-swap.view
-  (:require [clojure.string :as string]
-            [quo.core :as quo]
-            [quo.foundations.colors :as colors]
-            [quo.theme :as quo.theme]
-            [react-native.core :as rn]
-            [react-native.platform :as platform]
-            [react-native.safe-area :as safe-area]
-            [status-im.common.controlled-input.utils :as controlled-input]
-            [status-im.common.events-helper :as events-helper]
-            [status-im.constants :as constants]
-            [status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
-            [status-im.contexts.wallet.common.utils :as utils]
-            [status-im.contexts.wallet.sheets.buy-token.view :as buy-token]
-            [status-im.contexts.wallet.sheets.select-asset.view :as select-asset]
-            [status-im.contexts.wallet.sheets.slippage-settings.view :as slippage-settings]
-            [status-im.contexts.wallet.swap.setup-swap.style :as style]
-            [status-im.contexts.wallet.swap.utils :as swap-utils]
-            [utils.debounce :as debounce]
-            [utils.i18n :as i18n]
-            [utils.money :as money]
-            [utils.number :as number]
-            [utils.re-frame :as rf]
-            [utils.string :as utils.string]))
+  (:require
+    [clojure.string :as string]
+    [oops.core :as oops]
+    [quo.core :as quo]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [react-native.safe-area :as safe-area]
+    [status-im.common.controlled-input.utils :as controlled-input]
+    [status-im.common.events-helper :as events-helper]
+    [status-im.constants :as constants]
+    [status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
+    [status-im.contexts.wallet.common.utils :as utils]
+    [status-im.contexts.wallet.sheets.buy-token.view :as buy-token]
+    [status-im.contexts.wallet.sheets.select-asset.view :as select-asset]
+    [status-im.contexts.wallet.sheets.slippage-settings.view :as slippage-settings]
+    [status-im.contexts.wallet.swap.setup-swap.style :as style]
+    [status-im.contexts.wallet.swap.utils :as swap-utils]
+    [utils.debounce :as debounce]
+    [utils.i18n :as i18n]
+    [utils.money :as money]
+    [utils.number :as number]
+    [utils.re-frame :as rf]
+    [utils.string :as utils.string]))
 
 (def ^:private default-text-for-unfocused-input "0.00")
 
@@ -85,7 +87,7 @@
   [{:keys [input-state on-max-press on-input-focus on-token-press on-approve-press input-focused?]}]
   (let [account-color                    (rf/sub [:wallet/current-viewing-account-color])
         network                          (rf/sub [:wallet/swap-network])
-        asset-to-pay                     (rf/sub [:wallet/swap-asset-to-pay])
+        pay-token-symbol                 (:symbol (rf/sub [:wallet/swap-asset-to-pay]))
         currency                         (rf/sub [:profile/currency])
         loading-swap-proposal?           (rf/sub [:wallet/swap-loading-swap-proposal?])
         swap-proposal                    (rf/sub [:wallet/swap-proposal-without-fees])
@@ -96,14 +98,19 @@
         approval-transaction-id          (rf/sub [:wallet/swap-approval-transaction-id])
         approved-amount                  (rf/sub [:wallet/swap-approved-amount])
         error-response                   (rf/sub [:wallet/swap-error-response])
+        asset-to-pay                     (rf/sub [:wallet/token-by-symbol pay-token-symbol])
+        overlay-shown?                   (boolean (:sheets (rf/sub [:bottom-sheet])))
+        input-ref                        (rn/use-ref-atom nil)
+        set-input-ref                    (rn/use-callback (fn [ref] (reset! input-ref ref)))
         pay-input-num-value              (controlled-input/value-numeric input-state)
         pay-input-amount                 (controlled-input/input-value input-state)
-        pay-token-symbol                 (:symbol asset-to-pay)
         pay-token-decimals               (:decimals asset-to-pay)
-        pay-token-balance-selected-chain (get-in asset-to-pay
-                                                 [:balances-per-chain
-                                                  (:chain-id network) :balance]
-                                                 0)
+        pay-token-balance-selected-chain (number/convert-to-whole-number
+                                          (get-in asset-to-pay
+                                                  [:balances-per-chain
+                                                   (:chain-id network) :raw-balance]
+                                                  0)
+                                          pay-token-decimals)
         pay-token-fiat-value             (str
                                           (utils/calculate-token-fiat-value
                                            {:currency currency
@@ -111,10 +118,15 @@
                                             :token    asset-to-pay}))
         available-crypto-limit           (money/bignumber
                                           pay-token-balance-selected-chain)
+        display-decimals                 (min pay-token-decimals
+                                              constants/min-token-decimals-to-display)
         available-crypto-limit-display   (number/remove-trailing-zeroes
-                                          (.toFixed available-crypto-limit
-                                                    (min pay-token-decimals
-                                                         constants/min-token-decimals-to-display)))
+                                          (.toFixed available-crypto-limit display-decimals))
+        available-crypto-limit-display   (if (and (= available-crypto-limit-display "0")
+                                                  (money/greater-than available-crypto-limit
+                                                                      (money/bignumber 0)))
+                                           (number/small-number-threshold display-decimals)
+                                           available-crypto-limit-display)
         approval-amount-required-num     (when approval-amount-required
                                            (str (number/hex->whole approval-amount-required
                                                                    pay-token-decimals)))
@@ -122,8 +134,7 @@
                                                   (money/greater-than
                                                    (money/bignumber pay-input-amount)
                                                    available-crypto-limit))
-                                             (money/equal-to (money/bignumber
-                                                              available-crypto-limit-display)
+                                             (money/equal-to available-crypto-limit
                                                              (money/bignumber 0)))
         valid-pay-input?                 (and
                                           (not (string/blank?
@@ -141,8 +152,15 @@
      (fn []
        (request-fetch-swap-proposal))
      [pay-input-amount])
+    (rn/use-effect
+     (fn []
+       (when-not overlay-shown?
+         (some-> @input-ref
+                 (oops/ocall "focus"))))
+     [overlay-shown?])
     [quo/swap-input
-     {:type                 :pay
+     {:get-ref              set-input-ref
+      :type                 :pay
       :error?               pay-input-error?
       :token                pay-token-symbol
       :customization-color  :blue
@@ -156,7 +174,7 @@
                               :else                                             :disabled)
       :currency-symbol      currency-symbol
       :on-token-press       on-token-press
-      :on-max-press         #(on-max-press (str available-crypto-limit))
+      :on-max-press         #(on-max-press (str pay-token-balance-selected-chain))
       :on-input-focus       on-input-focus
       :value                pay-input-amount
       :fiat-value           pay-token-fiat-value
@@ -274,23 +292,28 @@
 
 (defn- pay-token-bottom-sheet
   []
-  (let [asset-to-receive (rf/sub [:wallet/swap-asset-to-receive])]
+  (let [asset-to-receive (rf/sub [:wallet/swap-asset-to-receive])
+        network          (rf/sub [:wallet/swap-network])]
     [select-asset/view
      {:title            (i18n/label :t/select-asset-to-pay)
+      :network          network
       :on-select        (fn [token]
                           (rf/dispatch [:wallet.swap/select-asset-to-pay {:token token}]))
-      :hide-token-fn    (fn [type {:keys [available-balance]}]
-                          (and (= type constants/swap-tokens-my)
-                               (= available-balance 0)))
+      :hide-token-fn    (fn [type {:keys [balances-per-chain]}]
+                          (let [balance (get-in balances-per-chain [(:chain-id network) :balance] "0")]
+                            (and (= type constants/swap-tokens-my)
+                                 (= balance "0"))))
       :disable-token-fn (fn [_ token]
                           (= (:symbol token)
                              (:symbol asset-to-receive)))}]))
 
 (defn- receive-token-bottom-sheet
   []
-  (let [asset-to-pay (rf/sub [:wallet/swap-asset-to-pay])]
+  (let [asset-to-pay (rf/sub [:wallet/swap-asset-to-pay])
+        network      (rf/sub [:wallet/swap-network])]
     [select-asset/view
      {:title            (i18n/label :t/select-asset-to-receive)
+      :network          network
       :on-select        (fn [token]
                           (rf/dispatch [:wallet.swap/select-asset-to-receive {:token token}]))
       :disable-token-fn (fn [_ token]
@@ -310,10 +333,12 @@
         network                                     (rf/sub [:wallet/swap-network])
         pay-input-amount                            (controlled-input/input-value pay-input-state)
         pay-token-decimals                          (:decimals asset-to-pay)
-        pay-token-balance-selected-chain            (get-in asset-to-pay
-                                                            [:balances-per-chain
-                                                             (:chain-id network) :balance]
-                                                            0)
+        pay-token-balance-selected-chain            (number/convert-to-whole-number
+                                                     (get-in asset-to-pay
+                                                             [:balances-per-chain
+                                                              (:chain-id network) :raw-balance]
+                                                             0)
+                                                     pay-token-decimals)
         pay-input-error?                            (and (not (string/blank? pay-input-amount))
                                                          (money/greater-than
                                                           (money/bignumber pay-input-amount)
@@ -415,13 +440,17 @@
            (when (and swap-amount refetch-interval)
              (js/clearTimeout @refetch-interval)
              (reset! refetch-interval nil))
-           (if (and swap-amount (not= swap-amount pay-input-amount))
-             (set-pay-input-state
-              (fn [input-state]
-                (controlled-input/set-input-value
-                 input-state
-                 swap-amount)))
-             (refetch-swap-proposal)))))
+           (cond (and swap-amount (not= swap-amount pay-input-amount))
+                 (set-pay-input-state
+                  (fn [input-state]
+                    (controlled-input/set-input-value
+                     input-state
+                     swap-amount)))
+                 (and pay-input-amount
+                      (not (number/valid-decimal-count? pay-input-amount (:decimals asset-to-pay))))
+                 (set-pay-input-state controlled-input/delete-all)
+                 :else
+                 (refetch-swap-proposal)))))
      [asset-to-pay])
     (rn/use-effect
      refetch-swap-proposal
@@ -431,7 +460,10 @@
       {:on-press      on-close
        :icon-name     :i/arrow-left
        :margin-top    (safe-area/get-top)
-       :switcher-type :select-account}]
+       :switcher-type :select-account
+       :params        {:show-account-balances? true
+                       :asset-symbol           (:symbol asset-to-pay)
+                       :network                network}}]
      [rn/view {:style style/inputs-container}
       [pay-token-input
        {:input-state      pay-input-state
@@ -453,7 +485,7 @@
         :on-token-press #(rf/dispatch [:show-bottom-sheet {:content receive-token-bottom-sheet}])
         :on-input-focus #(set-pay-input-focused? false)}]]
      [rn/view {:style style/footer-container}
-      [alert-banner {:pay-input-error? pay-input-error?}]
+      (when-not loading-swap-proposal? [alert-banner {:pay-input-error? pay-input-error?}])
       (when (or loading-swap-proposal? swap-proposal)
         [transaction-details])
       [action-button {:on-press on-review-swap-press}]]

src/status_im/contexts/wallet/tokens/data.cljs

@@ -34,9 +34,8 @@
 
 (defn tokens-by-symbol
   [props]
-  (tokens-by-key (assoc props
-                        :key-fn
-                        (fn [{:keys [address] :as token}]
-                          (if (get-in token [:communityData :id])
-                            address
-                            (:symbol token))))))
+  (tokens-by-key
+   (assoc props
+          :key-fn
+          (fn [{:keys [chainId address] :as token}]
+            (str chainId "-" (if (get-in token [:communityData :id]) address (:symbol token)))))))

src/status_im/contexts/wallet/tokens/events_test.cljs

@@ -75,7 +75,7 @@
                                             :image        nil})
                              :by-symbol  '({:address      "0x0000000000000000000000000000000000000000"
                                             :decimals     18
-                                            :key          "ETH"
+                                            :key          "1-ETH"
                                             :community-id nil
                                             :symbol       "ETH"
                                             :sources      ["native"]
@@ -86,7 +86,7 @@
                                             :image        nil}
                                            {:address      "0x0000000000000000000000000000000000000001"
                                             :decimals     18
-                                            :key          "SNT"
+                                            :key          "1-SNT"
                                             :community-id nil
                                             :symbol       "SNT"
                                             :sources      ["native"]
@@ -174,7 +174,7 @@
                         :image        nil})
          :by-symbol  '({:address      "0x0000000000000000000000000000000000000000"
                         :decimals     18
-                        :key          "ETH"
+                        :key          "1-ETH"
                         :community-id nil
                         :symbol       "ETH"
                         :sources      ["native"]
@@ -185,7 +185,7 @@
                         :image        nil}
                        {:address      "0x0000000000000000000000000000000000000001"
                         :decimals     18
-                        :key          "SNT"
+                        :key          "1-SNT"
                         :community-id nil
                         :symbol       "SNT"
                         :sources      ["native" "second"]
@@ -196,7 +196,7 @@
                         :image        nil}
                        {:address      "0x0000000000000000000000000000000000000002"
                         :decimals     18
-                        :key          "ANOTHER1"
+                        :key          "1-ANOTHER1"
                         :community-id nil
                         :symbol       "ANOTHER1"
                         :sources      ["second"]
@@ -253,7 +253,7 @@
                         :image        nil})
          :by-symbol  '({:address      "0x0000000000000000000000000000000000000000"
                         :decimals     18
-                        :key          "ETH"
+                        :key          "1-ETH"
                         :community-id nil
                         :symbol       "ETH"
                         :sources      ["native"]
@@ -264,7 +264,7 @@
                         :image        nil}
                        {:address      "0x0000000000000000000000000000000000000000"
                         :decimals     18
-                        :key          "ANOTHER1"
+                        :key          "1-ANOTHER1"
                         :community-id nil
                         :symbol       "ANOTHER1"
                         :sources      ["native" "second"]

src/status_im/contexts/wallet/wallet_connect/events/core.cljs

@@ -21,8 +21,8 @@
            {:fx [[:effects.wallet-connect/init
                   {:on-success #(rf/dispatch [:wallet-connect/on-init-success %])
                    :on-fail    #(rf/dispatch [:wallet-connect/on-init-fail %])}]]})
-       ;; NOTE: when offline, fetching persistent sessions only
-       {:fx [[:dispatch [:wallet-connect/fetch-persisted-sessions]]]}))))
+       ;; NOTE: when offline, fetching persistent sessions without initializing WC
+       {:fx [[:dispatch [:wallet-connect/get-sessions]]]}))))
 
 (rf/reg-event-fx
  :wallet-connect/on-init-success
@@ -30,7 +30,7 @@
    (log/info "WalletConnect SDK initialisation successful")
    {:db (assoc db :wallet-connect/web3-wallet web3-wallet)
     :fx [[:dispatch [:wallet-connect/register-event-listeners]]
-         [:dispatch [:wallet-connect/fetch-persisted-sessions]]]}))
+         [:dispatch [:wallet-connect/get-sessions]]]}))
 
 (rf/reg-event-fx
  :wallet-connect/reload-on-network-change

src/status_im/contexts/wallet/wallet_connect/events/effects.cljs

@@ -5,6 +5,7 @@
     [react-native.wallet-connect :as wallet-connect]
     [status-im.config :as config]
     [status-im.constants :as constants]
+    [status-im.contexts.wallet.wallet-connect.utils.sessions :as sessions]
     [status-im.contexts.wallet.wallet-connect.utils.signing :as signing]
     [status-im.contexts.wallet.wallet-connect.utils.transactions :as transactions]
     [status-im.contexts.wallet.wallet-connect.utils.typed-data :as typed-data]
@@ -42,35 +43,19 @@
 
 (rf/reg-fx
  :effects.wallet-connect/disconnect
- (fn [{:keys [web3-wallet topic reason on-success on-fail]}]
-   (-> (wallet-connect/disconnect-session {:web3-wallet web3-wallet
-                                           :topic       topic
-                                           :reason      reason})
+ (fn [{:keys [web3-wallet topic on-success on-fail]}]
+   (-> (sessions/disconnect web3-wallet topic)
        (promesa/then on-success)
        (promesa/catch on-fail))))
 
 (rf/reg-fx
  :effects.wallet-connect/approve-session
- (fn [{:keys [web3-wallet proposal networks accounts on-success on-fail]}]
-   (let [{:keys [params id]} proposal
-         approved-namespaces (->> {:eip155
-                                   {:chains   networks
-                                    :accounts accounts
-                                    :methods  constants/wallet-connect-supported-methods
-                                    :events   constants/wallet-connect-supported-events}}
-                                  (wallet-connect/build-approved-namespaces
-                                   params))]
-     (-> (wallet-connect/approve-session
-          {:web3-wallet         web3-wallet
-           :id                  id
-           :approved-namespaces approved-namespaces})
-         (promesa/then on-success)
-         (promesa/catch on-fail)))))
-
-(rf/reg-fx
- :effects.wallet-connect/fetch-active-sessions
- (fn [{:keys [web3-wallet on-success on-fail]}]
-   (-> (wallet-connect/get-active-sessions web3-wallet)
+ (fn [{:keys [web3-wallet proposal-request session-networks address on-success on-fail]}]
+   (-> (sessions/approve
+        {:web3-wallet      web3-wallet
+         :proposal-request proposal-request
+         :address          address
+         :session-networks session-networks})
        (promesa/then on-success)
        (promesa/catch on-fail))))
 
@@ -156,3 +141,10 @@
            :reason      reason})
          (promesa/then on-success)
          (promesa/catch on-error)))))
+
+(rf/reg-fx
+ :effects.wallet-connect/get-sessions
+ (fn [{:keys [web3-wallet addresses online? on-success on-error]}]
+   (-> (sessions/get-sessions web3-wallet addresses online?)
+       (promesa/then on-success)
+       (promesa/catch on-error))))

src/status_im/contexts/wallet/wallet_connect/events/session_proposals.cljs

@@ -109,7 +109,6 @@
  (fn [{:keys [db]} [address]]
    {:db (assoc-in db [:wallet-connect/current-proposal :address] address)}))
 
-
 (rf/reg-event-fx
  :wallet-connect/approve-session
  (fn [{:keys [db]}]
@@ -119,33 +118,51 @@
                                (map networks/chain-id->eip155)
                                vec)
          current-address  (get-in db [:wallet-connect/current-proposal :address])
-         accounts         (-> (partial networks/format-eip155-address current-address)
-                              (map session-networks))
          network-status   (:network/status db)
-         expiry           (get-in current-proposal [:params :expiryTimestamp])]
+         expired?         (-> current-proposal
+                              (get-in [:params :expiryTimestamp])
+                              uri/timestamp-expired?)]
      (if (= network-status :online)
        {:db (assoc-in db [:wallet-connect/current-proposal :response-sent?] true)
-        :fx [(if (uri/timestamp-expired? expiry)
+        :fx [(if expired?
                [:dispatch
                 [:toasts/upsert
                  {:id   :wallet-connect-proposal-expired
                   :type :negative
                   :text (i18n/label :t/wallet-connect-proposal-expired)}]]
                [:effects.wallet-connect/approve-session
-                {:web3-wallet web3-wallet
-                 :proposal    current-proposal
-                 :networks    session-networks
-                 :accounts    accounts
-                 :on-success  (fn [approved-session]
-                                (log/info "Wallet Connect session approved")
-                                (rf/dispatch [:wallet-connect/reset-current-session-proposal])
-                                (rf/dispatch [:wallet-connect/persist-session
-                                              approved-session]))
-                 :on-fail     (fn [error]
-                                (log/error "Wallet Connect session approval failed"
-                                           {:error error
-                                            :event :wallet-connect/approve-session})
-                                (rf/dispatch
-                                 [:wallet-connect/reset-current-session-proposal]))}])
+                {:web3-wallet      web3-wallet
+                 :proposal-request current-proposal
+                 :session-networks session-networks
+                 :address          current-address
+                 :on-success       #(rf/dispatch [:wallet-connect/approve-session-success %])
+                 :on-fail          #(rf/dispatch [:wallet-connect/approve-session-error %])}])
              [:dispatch [:dismiss-modal :screen/wallet.wallet-connect-session-proposal]]]}
        {:fx [[:dispatch [:wallet-connect/no-internet-toast]]]}))))
+
+(rf/reg-event-fx :wallet-connect/approve-session-success
+ (fn [_ [session]]
+   (log/info "Wallet Connect session approved")
+   {:fx [[:dispatch [:wallet-connect/on-new-session session]]
+         [:dispatch [:wallet-connect/reset-current-session-proposal]]
+         [:dispatch [:wallet-connect/redirect-to-dapp (data-store/get-dapp-redirect-url session)]]]}))
+
+(rf/reg-event-fx :wallet-connect/approve-session-error
+ (fn [_ [error]]
+   (log/error "Wallet Connect session approval failed"
+              {:error error
+               :event :wallet-connect/approve-session})
+   {:fx [[:dispatch [:wallet-connect/reset-current-session-proposal]]]}))
+
+(rf/reg-event-fx
+ :wallet-connect/reject-session-proposal
+ (fn [{:keys [db]} [proposal]]
+   (let [web3-wallet                      (get db :wallet-connect/web3-wallet)
+         {:keys [request response-sent?]} (:wallet-connect/current-proposal db)]
+     {:fx [(when-not response-sent?
+             [:effects.wallet-connect/reject-session-proposal
+              {:web3-wallet web3-wallet
+               :proposal    (or proposal request)
+               :on-success  #(log/info "Wallet Connect session proposal rejected")
+               :on-error    #(log/error "Wallet Connect unable to reject session proposal")}])
+           [:dispatch [:wallet-connect/reset-current-session-proposal]]]})))

src/status_im/contexts/wallet/wallet_connect/events/session_responses.cljs

@@ -165,19 +165,6 @@
    {:fx [[:dispatch [:wallet-connect/send-response {:result result}]]
          [:dispatch [:wallet-connect/dismiss-request-modal]]]}))
 
-(rf/reg-event-fx
- :wallet-connect/reject-session-proposal
- (fn [{:keys [db]} [proposal]]
-   (let [web3-wallet                      (get db :wallet-connect/web3-wallet)
-         {:keys [request response-sent?]} (:wallet-connect/current-proposal db)]
-     {:fx [(when-not response-sent?
-             [:effects.wallet-connect/reject-session-proposal
-              {:web3-wallet web3-wallet
-               :proposal    (or proposal request)
-               :on-success  #(log/info "Wallet Connect session proposal rejected")
-               :on-error    #(log/error "Wallet Connect unable to reject session proposal")}])
-           [:dispatch [:wallet-connect/reset-current-session-proposal]]]})))
-
 ;; NOTE: Currently we only reject a session if the user dismissed a modal
 ;; without accepting the session first.
 ;; But this needs to be solidified to ensure other cases:

src/status_im/contexts/wallet/wallet_connect/events/sessions.cljs

@@ -1,20 +1,20 @@
 (ns status-im.contexts.wallet.wallet-connect.events.sessions
   (:require [re-frame.core :as rf]
-            [react-native.wallet-connect :as wallet-connect]
-            [status-im.constants :as constants]
-            [status-im.contexts.wallet.wallet-connect.utils.data-store :as
-             data-store]
             [status-im.contexts.wallet.wallet-connect.utils.networks :as networks]
             [status-im.contexts.wallet.wallet-connect.utils.sessions :as sessions]
             [taoensso.timbre :as log]
-            [utils.transforms :as types]))
+            [utils.i18n :as i18n]))
 
 (rf/reg-event-fx
  :wallet-connect/on-session-delete
  (fn [{:keys [db]} [{:keys [topic] :as event}]]
    (when (networks/event-should-be-handled? db event)
      (log/info "Received Wallet Connect session delete from the SDK: " event)
-     {:fx [[:dispatch [:wallet-connect/disconnect-persisted-session topic]]]})))
+     {:fx [[:json-rpc/call
+            [{:method     "wallet_disconnectWalletConnectSession"
+              :params     [topic]
+              :on-success [:wallet-connect/delete-session topic]
+              :on-error   #(log/info "Wallet Connect session persistence failed" %)}]]]})))
 
 (rf/reg-event-fx
  :wallet-connect/disconnect-dapp
@@ -26,116 +26,64 @@
        {:fx [[:effects.wallet-connect/disconnect
               {:web3-wallet web3-wallet
                :topic       topic
-               :reason      (wallet-connect/get-sdk-error
-                             constants/wallet-connect-user-disconnected-reason-key)
                :on-fail     on-fail
                :on-success  (fn []
-                              (rf/dispatch [:wallet-connect/disconnect-persisted-session topic])
+                              (log/info "Successfully disconnected dApp session" topic)
+                              (rf/dispatch [:wallet-connect/delete-session topic])
                               (when on-success
                                 (on-success)))}]]}
        {:fx [[:dispatch [:wallet-connect/no-internet-toast]]]}))))
 
-;; We first load sessions from database, then we initiate a call to Wallet Connect SDK and
-;; then replace the list we have stored in the database with the one that came from the SDK.
-;; In addition to that, we also update the backend state by marking sessions that are not
-;; active anymore by calling `:wallet-connect/disconnect-session`.
 (rf/reg-event-fx
- :wallet-connect/fetch-active-sessions-success
- (fn [{:keys [db now]} [sessions]]
-   (let [persisted-sessions (:wallet-connect/sessions db)
-         account-addresses  (->> (get-in db [:wallet :accounts])
-                                 vals
-                                 sessions/filter-operable-accounts
-                                 (map :address))
-         sessions           (->> (js->clj sessions :keywordize-keys true)
-                                 vals
-                                 (map sessions/sdk-session->db-session)
-                                 (sessions/filter-sessions-for-account-addresses
-                                  account-addresses))
-         session-topics     (set (map :topic sessions))
-         expired-sessions   (filter
-                             (fn [{:keys [expiry topic]}]
-                               (or (< expiry (/ now 1000))
-                                   (not (contains? session-topics topic))))
-                             persisted-sessions)]
-     (when (seq expired-sessions)
-       (log/info "Updating WalletConnect persisted sessions due to expired/inactive sessions"
-                 {:expired expired-sessions}))
-     {:fx (mapv (fn [{:keys [topic]}]
-                  [:dispatch [:wallet-connect/disconnect-persisted-session topic]])
-                expired-sessions)
-      :db (assoc db :wallet-connect/sessions sessions)})))
-
-(rf/reg-event-fx
- :wallet-connect/fetch-active-sessions
+ :wallet-connect/get-sessions
  (fn [{:keys [db]}]
-   (let [web3-wallet (get db :wallet-connect/web3-wallet)]
-     {:fx [[:effects.wallet-connect/fetch-active-sessions
-            {:web3-wallet web3-wallet
-             :on-fail     #(log/error "Failed to get active sessions" {:error %})
-             :on-success  #(rf/dispatch [:wallet-connect/fetch-active-sessions-success %])}]]})))
+   (let [addresses (->> (get-in db [:wallet :accounts])
+                        vals
+                        sessions/filter-operable-accounts
+                        (map :address))]
+     (if (not (seq addresses))
+       ;; NOTE: Re-trying to get active sessions if accounts weren't loaded yet during
+       ;; initialization
+       ((log/info "Re-trying to fetch active WalletConnect sessions")
+        {:fx [[:dispatch-later [{:ms 500 :dispatch [:wallet-connect/get-sessions]}]]]})
+       {:fx [[:effects.wallet-connect/get-sessions
+              {:online?     (-> db :network/status (= :online))
+               :web3-wallet (get db :wallet-connect/web3-wallet)
+               :addresses   addresses
+               :on-success  #(rf/dispatch [:wallet-connect/get-sessions-success %])
+               :on-error    #(rf/dispatch [:wallet-connect/get-sessions-error %])}]]}))))
 
 (rf/reg-event-fx
- :wallet-connect/fetch-persisted-sessions-success
+ :wallet-connect/get-sessions-success
  (fn [{:keys [db]} [sessions]]
-   (let [network-status (:network/status db)
-         sessions'      (mapv (fn [{:keys [sessionJson] :as session}]
-                                (assoc session
-                                       :accounts
-                                       (-> sessionJson
-                                           types/json->clj
-                                           :namespaces
-                                           :eip155
-                                           :accounts)))
-                              sessions)]
-     {:fx [(when (= network-status :online)
-             [:dispatch [:wallet-connect/fetch-active-sessions]])]
-      :db (assoc db :wallet-connect/sessions sessions')})))
+   (log/info "WalletConnect sessions loaded successfully")
+   {:db (assoc db :wallet-connect/sessions sessions)}))
 
 (rf/reg-event-fx
- :wallet-connect/fetch-persisted-sessions-fail
+ :wallet-connect/get-sessions-error
  (fn [_ [error]]
-   (log/info "Wallet Connect fetch persisted sessions failed" error)
-   {:fx [[:dispatch [:wallet-connect/fetch-active-sessions]]]}))
+   (log/error "WalletConnect sessions failed to load" error)
+   {:fx [[:dispatch
+          [:toasts/upsert
+           {:type :negative
+            :text (i18n/label :t/wallet-connect-connections-error)}]]]}))
 
 (rf/reg-event-fx
- :wallet-connect/fetch-persisted-sessions
- (fn [{:keys [now]} _]
-   (let [current-timestamp (quot now 1000)]
-     {:fx [[:json-rpc/call
-            [{:method     "wallet_getWalletConnectActiveSessions"
-              ;; NOTE: This is the activeSince timestamp to avoid expired sessions
-              :params     [current-timestamp]
-              :on-success [:wallet-connect/fetch-persisted-sessions-success]
-              :on-error   [:wallet-connect/fetch-persisted-sessions-fail]}]]]})))
+ :wallet-connect/on-new-session
+ (fn [{:keys [db]} [new-session]]
+   {:db (update db
+                :wallet-connect/sessions
+                (fn [sessions]
+                  (->> new-session
+                       sessions/sdk-session->db-session
+                       (conj sessions))))}))
 
 (rf/reg-event-fx
- :wallet-connect/persist-session
- (fn [_ [session-info]]
-   (let [redirect-url (-> session-info
-                          (js->clj :keywordize-keys true)
-                          (data-store/get-dapp-redirect-url))]
-     {:fx [[:json-rpc/call
-            [{:method     "wallet_addWalletConnectSession"
-              :params     [(js/JSON.stringify session-info)]
-              :on-success (fn []
-                            (log/info "Wallet Connect session persisted")
-                            (rf/dispatch [:wallet-connect/fetch-persisted-sessions])
-                            (rf/dispatch [:wallet-connect/redirect-to-dapp redirect-url]))
-              :on-error   #(log/info "Wallet Connect session persistence failed" %)}]]]})))
-
-(rf/reg-event-fx
- :wallet-connect/disconnect-persisted-session
+ :wallet-connect/delete-session
  (fn [{:keys [db]} [topic]]
-   (log/info "Removing session from persistance and state" topic)
    {:db (update db
                 :wallet-connect/sessions
                 (fn [sessions]
                   (->> sessions
                        (remove #(= (:topic %) topic))
-                       (into []))))
-    :fx [[:json-rpc/call
-          [{:method     "wallet_disconnectWalletConnectSession"
-            :params     [topic]
-            :on-success #(log/info "Wallet Connect session disconnected")
-            :on-error   #(log/info "Wallet Connect session persistence failed" %)}]]]}))
+                       (into []))))}))

src/status_im/contexts/wallet/wallet_connect/events/sessions_test.cljs

@@ -0,0 +1,122 @@
+(ns status-im.contexts.wallet.wallet-connect.events.sessions-test
+  (:require
+    [cljs.test :refer-macros [is are testing]]
+    matcher-combinators.test
+    [re-frame.db :as rf-db]
+    status-im.contexts.wallet.wallet-connect.events.session-responses
+    status-im.contexts.wallet.wallet-connect.events.sessions
+    [test-helpers.unit :as h]))
+
+(defn- find-fx
+  [fx name]
+  (some #(when (= name (first %)) %) fx))
+
+(defn- get-fx-arg
+  "Finds the arg value for an effect, if present in the fx vector"
+  [fx fx-name arg-fn]
+  (-> fx
+      (find-fx fx-name)
+      second
+      arg-fn))
+
+(h/deftest-event :wallet-connect/on-session-delete
+  [event-id dispatch]
+  (testing "successfully deletes the session"
+    (reset! rf-db/app-db {:profile/profile         {:test-networks-enabled? false}
+                          :wallet-connect/sessions [{:topic  "topic"
+                                                     :chains ["eip155:1"]}]})
+    (let [fx             (:fx (dispatch [event-id
+                                         {:topic  "topic"
+                                          :chains ["eip155:1"]}]))
+          get-rpc-fx-arg (partial get-fx-arg fx :json-rpc/call)]
+      (are [expected result] (match? expected result)
+       :json-rpc/call                           (-> fx (find-fx :json-rpc/call) first)
+       "wallet_disconnectWalletConnectSession"  (get-rpc-fx-arg (comp :method first))
+       ["topic"]                                (get-rpc-fx-arg (comp :params first))
+       [:wallet-connect/delete-session "topic"] (get-rpc-fx-arg (comp :on-success first)))))
+
+  (testing "ignore the deletion if session topic not found"
+    (let [topic-1 "topic-1"
+          topic-2 "topic-2"]
+      (reset! rf-db/app-db {:profile/profile         {:test-networks-enabled? false}
+                            :wallet-connect/sessions [{:topic  topic-1
+                                                       :chains ["eip155:1"]}]})
+      (is (match? nil
+                  (dispatch [event-id
+                             {:topic  topic-2
+                              :chains ["eip155:1"]}])))))
+
+  (testing "ignore the deletion if the event is for the wrong network mode (testnet/mainnet)"
+    (let [topic "topic"]
+      (reset! rf-db/app-db {:profile/profile         {:test-networks-enabled? true}
+                            :wallet-connect/sessions [{:topic  topic
+                                                       :chains ["eip155:1"]}]})
+      (is (match? nil
+                  (dispatch [event-id
+                             {:topic  topic
+                              :chains ["eip155:11155111"]}]))))))
+
+(h/deftest-event :wallet-connect/disconnect-dapp
+  [event-id dispatch]
+  (testing "disconnecting from dApp when online"
+    (reset! rf-db/app-db {:network/status             :online
+                          :wallet-connect/web3-wallet "mock"})
+    (let [fx (:fx (dispatch [event-id {:topic "topic"}]))]
+      (are [expected result] (match? expected result)
+       :effects.wallet-connect/disconnect (ffirst fx)
+       "topic"                            (-> fx first second :topic)
+       "mock"                             (-> fx first second :web3-wallet))))
+
+  (testing "showing no-internet toast when offline"
+    (reset! rf-db/app-db {:network/status :offline})
+    (is (match? :wallet-connect/no-internet-toast
+                (-> (dispatch [event-id {:topic "topic"}])
+                    :fx
+                    first
+                    second
+                    first)))))
+
+(h/deftest-event :wallet-connect/get-sessions
+  [event-id dispatch]
+  (testing "the fx includes only for the available accounts"
+    (reset! rf-db/app-db {:wallet                     {:accounts {"available"    {:address   "0x123"
+                                                                                  :operable? true}
+                                                                  "watch-only"   {:address     "0x456"
+                                                                                  :operable?   true
+                                                                                  :watch-only? true}
+                                                                  "non-operable" {:address   "0x789"
+                                                                                  :operable? false}}}
+                          :network/status             :online
+                          :wallet-connect/web3-wallet "mock"})
+    (let [fx                  (:fx (dispatch [event-id]))
+          get-sessions-fx-arg (partial get-fx-arg fx :effects.wallet-connect/get-sessions)]
+      (are [expected result] (match? expected result)
+       :effects.wallet-connect/get-sessions (-> fx (find-fx :effects.wallet-connect/get-sessions) first)
+       true                                 (get-sessions-fx-arg :online?)
+       '("0x123")                           (get-sessions-fx-arg :addresses)
+       "mock"                               (get-sessions-fx-arg :web3-wallet)))))
+
+(h/deftest-event :wallet-connect/get-sessions-success
+  [event-id dispatch]
+  (testing "sessions are stored in the db"
+    (let [sessions '({:topic "123"} {:topic "456"})]
+      (is (match? {:db {:wallet-connect/sessions sessions}}
+                  (dispatch [event-id sessions]))))))
+
+(h/deftest-event :wallet-connect/on-new-session
+  [event-id dispatch]
+  (testing "new session is added to db"
+    (let [sessions    '({:topic "123"} {:topic "456"})
+          new-session {:topic "789"}]
+      (reset! rf-db/app-db {:wallet-connect/sessions sessions})
+      (is (match? {:db {:wallet-connect/sessions (conj sessions new-session)}}
+                  (dispatch [event-id new-session]))))))
+
+(h/deftest-event :wallet-connect/delete-session
+  [event-id dispatch]
+  (testing "session is deleted from db"
+    (let [sessions '({:topic "123"} {:topic "456"})
+          expected '({:topic "123"})]
+      (reset! rf-db/app-db {:wallet-connect/sessions sessions})
+      (is (match? {:db {:wallet-connect/sessions expected}}
+                  (dispatch [event-id "456"]))))))

src/status_im/contexts/wallet/wallet_connect/utils/rpc.cljs

@@ -58,6 +58,23 @@
   (-> (rpc-events/call-async "wallet_getSuggestedFees" true chain-id)
       (promesa/then transforms/js->clj)))
 
+(defn wallet-disconnect-persisted-session
+  [topic]
+  (rpc-events/call-async "wallet_disconnectWalletConnectSession" true topic))
+
+(defn wallet-get-persisted-sessions
+  ([]
+   (let [now (-> (js/Date.) .getTime (quot 1000))]
+     (wallet-get-persisted-sessions now)))
+  ([expiry-timestamp]
+   (rpc-events/call-async "wallet_getWalletConnectActiveSessions" false expiry-timestamp)))
+
+(defn wallet-persist-session
+  [session]
+  (->> session
+       transforms/clj->json
+       (rpc-events/call-async "wallet_addWalletConnectSession" false)))
+
 (defn wallet-get-transaction-estimated-time
   [chain-id max-fee-per-gas]
   (-> (rpc-events/call-async "wallet_getTransactionEstimatedTime" true chain-id max-fee-per-gas)

src/status_im/contexts/wallet/wallet_connect/utils/sessions.cljs

@@ -1,6 +1,12 @@
 (ns status-im.contexts.wallet.wallet-connect.utils.sessions
   (:require
     [clojure.string :as string]
+    [promesa.core :as promesa]
+    [react-native.wallet-connect :as wallet-connect]
+    [status-im.constants :as constants]
+    [status-im.contexts.wallet.wallet-connect.utils.networks :as networks]
+    [status-im.contexts.wallet.wallet-connect.utils.rpc :as rpc]
+    [taoensso.timbre :as log]
     [utils.transforms :as transforms]))
 
 (defn sdk-session->db-session
@@ -42,3 +48,102 @@
         first
         (string/split #":")
         last)))
+
+(defn- parse-session-accounts
+  [{:keys [sessionJson] :as session}]
+  (assoc session
+         :accounts
+         (-> sessionJson
+             :namespaces
+             :eip155
+             :accounts)))
+
+(defn- find-inactive-sessions
+  [active-sessions persisted-sessions]
+  (->> persisted-sessions
+       (filter #(->> %
+                     :topic
+                     (contains? (->> active-sessions
+                                     (map :topic)
+                                     set))
+                     not))))
+
+(defn get-persisted-sessions
+  []
+  (-> (rpc/wallet-get-persisted-sessions)
+      (promesa/then #(map parse-session-accounts %))
+      (promesa/catch (fn [err]
+                       (throw (ex-info "Failed to get persisted WalletConnect sessions"
+                                       {:error err
+                                        :code  :error/wc-get-persisted-sessions}))))))
+
+(defn get-active-sessions
+  [web3-wallet addresses]
+  (-> (wallet-connect/get-active-sessions web3-wallet)
+      (promesa/then #(->>
+                       (transforms/js->clj %)
+                       vals
+                       (map sdk-session->db-session)
+                       (filter-sessions-for-account-addresses addresses)))
+      (promesa/catch (fn [err]
+                       (throw (ex-info "Failed to get active WalletConnect sessions"
+                                       {:error err
+                                        :code  :error/wc-get-active-sessions}))))))
+
+(defn sync-persisted-sessions
+  [active-sessions persisted-sessions]
+  (-> (promesa/all
+       (for [topic (find-inactive-sessions active-sessions
+                                           persisted-sessions)]
+         (do (log/info "Syncing disconnected session with persistance" topic)
+             (rpc/wallet-disconnect-persisted-session topic))))
+      (promesa/catch (fn [err]
+                       (throw (ex-info "Failed to synchronize persisted sessions"
+                                       {:error err
+                                        :code  :error/wc-sync-persisted-sessions}))))))
+
+(defn get-sessions
+  [web3-wallet addresses online?]
+  (promesa/let [persisted-sessions (get-persisted-sessions)]
+    (if online?
+      (promesa/let [active-sessions (get-active-sessions web3-wallet addresses)]
+        (sync-persisted-sessions active-sessions persisted-sessions)
+        active-sessions)
+      persisted-sessions)))
+
+(defn disconnect
+  [web3-wallet topic]
+  (let [reason (wallet-connect/get-sdk-error constants/wallet-connect-user-disconnected-reason-key)]
+    (->
+      (promesa/do
+        (wallet-connect/disconnect-session {:web3-wallet web3-wallet
+                                            :topic       topic
+                                            :reason      reason})
+        (rpc/wallet-disconnect-persisted-session topic))
+      (promesa/catch (fn [err]
+                       (throw (ex-info "Failed to disconnect dapp"
+                                       {:err  err
+                                        :code :error/wc-disconnect-dapp})))))))
+
+(defn approve
+  [{:keys [web3-wallet address session-networks proposal-request]}]
+  (let [{:keys [params id]} proposal-request
+        accounts            (-> (partial networks/format-eip155-address address)
+                                (map session-networks))]
+    (-> (promesa/let [session
+                      (wallet-connect/approve-session
+                       {:web3-wallet         web3-wallet
+                        :id                  id
+                        :approved-namespaces (->>
+                                               {:eip155
+                                                {:chains   session-networks
+                                                 :accounts accounts
+                                                 :methods  constants/wallet-connect-supported-methods
+                                                 :events   constants/wallet-connect-supported-events}}
+                                               (wallet-connect/build-approved-namespaces params))})]
+          (rpc/wallet-persist-session session)
+          (transforms/js->clj session))
+        (promesa/catch (fn [err]
+                         (throw (ex-info "Failed to approve session"
+                                         {:err  err
+                                          :code :error/wc-approve})))))))

src/status_im/events.cljs

@@ -41,6 +41,7 @@
     status-im.contexts.syncing.events
     status-im.contexts.wallet.add-account.add-address-to-watch.events
     status-im.contexts.wallet.add-account.create-account.events
+    status-im.contexts.wallet.buy-crypto.events
     status-im.contexts.wallet.collectible.events
     status-im.contexts.wallet.common.wizard.events
     status-im.contexts.wallet.effects

src/status_im/feature_flags.cljs

@@ -31,9 +31,9 @@
    ::wallet.import-private-key          (enabled-in-env? :FLAG_IMPORT_PRIVATE_KEY_ENABLED)
    ::wallet.long-press-watch-only-asset (enabled-in-env? :FLAG_LONG_PRESS_WATCH_ONLY_ASSET_ENABLED)
    ::wallet.saved-addresses             (enabled-in-env? :WALLET_SAVED_ADDRESSES)
-   ::wallet.swap                        (enabled-in-env? :FLAG_SWAP_ENABLED)
    ::wallet.wallet-connect              (enabled-in-env? :FLAG_WALLET_CONNECT_ENABLED)
-   ::wallet.custom-network-amounts      (enabled-in-env? :FLAG_WALLET_CUSTOM_NETWORK_AMOUNTS_ENABLED)})
+   ::wallet.custom-network-amounts      (enabled-in-env? :FLAG_WALLET_CUSTOM_NETWORK_AMOUNTS_ENABLED)
+   ::keycard.migrate-profile            false})
 
 (defonce ^:private feature-flags-config
   (reagent/atom initial-flags))

src/status_im/navigation/options.cljs

@@ -69,6 +69,12 @@
                  transitions/new-to-status-modal-animations
                  transitions/push-animations-for-transparent-background)}))
 
+(def keycard-modal-screen-options
+  (assoc transparent-modal-screen-options
+         :layout nil
+         :theme  :dark
+         :insets {:top? true :bottom? true}))
+
 (def sheet-options
   {:layout                 {:componentBackgroundColor :transparent
                             :orientation              ["portrait"]

src/status_im/navigation/screens.cljs

@@ -26,6 +26,11 @@
     [status-im.contexts.communities.actions.share-community.view :as share-community]
     [status-im.contexts.communities.discover.view :as communities.discover]
     [status-im.contexts.communities.overview.view :as communities.overview]
+    [status-im.contexts.keycard.authorise.view :as keycard.authorise]
+    [status-im.contexts.keycard.check.view :as keycard.check]
+    [status-im.contexts.keycard.empty.view :as keycard.empty]
+    [status-im.contexts.keycard.error.view :as keycard.error]
+    [status-im.contexts.keycard.not-keycard.view :as keycard.not-keycard]
     [status-im.contexts.onboarding.create-or-sync-profile.view :as create-or-sync-profile]
     [status-im.contexts.onboarding.create-password.view :as create-password]
     [status-im.contexts.onboarding.create-profile.view :as create-profile]
@@ -58,6 +63,7 @@
     [status-im.contexts.profile.settings.screens.password.view :as settings-password]
     [status-im.contexts.profile.settings.screens.syncing.view :as settings.syncing]
     [status-im.contexts.profile.settings.view :as settings]
+    [status-im.contexts.settings.keycard.view :as settings.keycard]
     [status-im.contexts.settings.language-and-currency.currency.view :as settings.currency-selection]
     [status-im.contexts.settings.language-and-currency.view :as settings.language-and-currency]
     [status-im.contexts.settings.privacy-and-security.share-usage.view :as settings.share-usage]
@@ -584,6 +590,10 @@
      :options   options/transparent-modal-screen-options
      :component wallet-options/view}
 
+    {:name      :screen/settings.keycard
+     :options   options/keycard-modal-screen-options
+     :component settings.keycard/view}
+
     {:name      :screen/settings.rename-keypair
      :options   options/transparent-screen-options
      :component keypair-rename/view}
@@ -671,7 +681,28 @@
                  :popGesture         false
                  :hardwareBackButton {:dismissModalOnPress false
                                       :popStackOnPress     false})
-     :component change-password-loading/view}]
+     :component change-password-loading/view}
+
+    ;; Keycard
+    {:name      :screen/keycard.check
+     :options   options/keycard-modal-screen-options
+     :component keycard.check/view}
+
+    {:name      :screen/keycard.empty
+     :options   options/keycard-modal-screen-options
+     :component keycard.empty/view}
+
+    {:name      :screen/keycard.error
+     :options   options/keycard-modal-screen-options
+     :component keycard.error/view}
+
+    {:name      :screen/keycard.not-keycard
+     :options   options/keycard-modal-screen-options
+     :component keycard.not-keycard/view}
+
+    {:name      :screen/keycard.authorise
+     :options   options/keycard-modal-screen-options
+     :component keycard.authorise/view}]
 
    [{:name    :shell
      :options {:theme :dark}}]

src/status_im/navigation/view.cljs

@@ -11,7 +11,7 @@
     [status-im.common.bottom-sheet-screen.view :as bottom-sheet-screen]
     [status-im.common.bottom-sheet.view :as bottom-sheet]
     [status-im.common.toasts.view :as toasts]
-    [status-im.contexts.keycard.sheet.view :as keycard.sheet]
+    [status-im.contexts.keycard.nfc-sheet.view :as keycard.sheet]
     [status-im.navigation.screens :as screens]
     [status-im.setup.hot-reload :as reloader]
     [utils.re-frame :as rf]))
@@ -47,7 +47,7 @@
   (merge
    {:flex             1
     :margin-top       alert-banners-top-margin
-    :background-color (or background-color (colors/theme-colors colors/white colors/neutral-100 theme))}
+    :background-color (or background-color (colors/theme-colors colors/white colors/neutral-95 theme))}
    (when bottom?
      {:padding-bottom (safe-area/get-bottom)})
    (when top?

src/status_im/subs/keycard.cljs

@@ -36,3 +36,8 @@
  (fn [keycard]
    (:connection-sheet-opts keycard)))
 
+(rf/reg-sub
+ :keycard/application-info-error
+ :<- [:keycard]
+ (fn [keycard]
+   (:application-info-error keycard)))

src/status_im/subs/profile.cljs

@@ -326,6 +326,12 @@
  (fn [profile]
    (profile.utils/photo profile)))
 
+(re-frame/reg-sub
+ :profile/name
+ :<- [:profile/profile]
+ (fn [profile]
+   (profile.utils/displayed-name profile)))
+
 (re-frame/reg-sub
  :profile/login-profile
  :<- [:profile/login]

src/status_im/subs/wallet/buy.cljs

@@ -5,3 +5,28 @@
  :wallet/crypto-on-ramps
  :<- [:wallet]
  :-> :crypto-on-ramps)
+
+(rf/reg-sub
+ :wallet/wallet-buy-crypto
+ :<- [:wallet/ui]
+ :-> :buy-crypto)
+
+(rf/reg-sub
+ :wallet/wallet-buy-crypto-account
+ :<- [:wallet/wallet-buy-crypto]
+ :-> :account)
+
+(rf/reg-sub
+ :wallet/wallet-buy-crypto-provider
+ :<- [:wallet/wallet-buy-crypto]
+ :-> :provider)
+
+(rf/reg-sub
+ :wallet/wallet-buy-crypto-recurrent?
+ :<- [:wallet/wallet-buy-crypto]
+ :-> :recurrent?)
+
+(rf/reg-sub
+ :wallet/wallet-buy-crypto-network
+ :<- [:wallet/wallet-buy-crypto]
+ :-> :network)

src/status_im/subs/wallet/wallet.cljs

@@ -399,6 +399,22 @@
          (assoc :balance           balance
                 :formatted-balance formatted-balance)))))
 
+(rf/reg-sub
+ :wallet/current-viewing-account-or-default
+ :<- [:wallet/accounts]
+ :<- [:wallet/current-viewing-account-address]
+ :<- [:wallet/balances-in-selected-networks]
+ :<- [:profile/currency-symbol]
+ (fn [[accounts current-viewing-account-address balances currency-symbol]]
+   (let [account           (or (utils/get-account-by-address accounts current-viewing-account-address)
+                               (utils/get-default-account accounts))
+         address           (:address account)
+         balance           (get balances address)
+         formatted-balance (utils/prettify-balance currency-symbol balance)]
+     (assoc account
+            :balance           balance
+            :formatted-balance formatted-balance))))
+
 (rf/reg-sub
  :wallet/current-viewing-account-color
  :<- [:wallet/current-viewing-account]
@@ -420,7 +436,7 @@
 
 (rf/reg-sub
  :wallet/current-viewing-account-tokens-filtered
- :<- [:wallet/current-viewing-account]
+ :<- [:wallet/current-viewing-account-or-default]
  :<- [:wallet/network-details]
  :<- [:wallet/wallet-send]
  (fn [[account networks send-data] [_ {:keys [query chain-ids hide-token-fn]}]]
@@ -454,14 +470,19 @@
 (rf/reg-sub
  :wallet/tokens-filtered
  :<- [:wallet/tokens]
- (fn [{:keys [by-symbol market-values-per-token details-per-token]}
+ :<- [:profile/currency]
+ (fn [[{:keys [by-symbol market-values-per-token details-per-token prices-per-token]} currency]
       [_ {:keys [query chain-ids hide-token-fn]}]]
    (let [tokens        (->> by-symbol
                             (map (fn [token]
-                                   (-> token
-                                       (assoc :market-values
-                                              (get market-values-per-token (:symbol token)))
-                                       (assoc :details (get details-per-token (:symbol token))))))
+                                   (let [token-symbol (keyword (:symbol token))
+                                         price        (get-in prices-per-token [token-symbol currency])]
+                                     (-> token
+                                         (assoc :market-values
+                                                (get market-values-per-token token-symbol))
+                                         (assoc :details (get details-per-token token-symbol))
+                                         (assoc-in [:market-values-per-currency currency :price]
+                                                   price)))))
                             (filter (fn [{:keys [chain-id]}]
                                       (some #{chain-id} chain-ids)))
                             (remove #(when hide-token-fn
@@ -476,7 +497,7 @@
 
 (rf/reg-sub
  :wallet/token-by-symbol
- :<- [:wallet/current-viewing-account]
+ :<- [:wallet/current-viewing-account-or-default]
  :<- [:wallet/network-details]
  (fn [[{:keys [tokens]} networks] [_ token-symbol chain-ids]]
    (->> (utils/tokens-with-balance tokens networks chain-ids)

src/utils/money.cljs

@@ -239,9 +239,12 @@
 
 (defn crypto->fiat
   [crypto fiat-price]
-  (when-let [^js bn (bignumber crypto)]
-    (-> (.times bn ^js (bignumber fiat-price))
-        (with-precision 2))))
+  (let [^js crypto-bn     (bignumber crypto)
+        ^js fiat-price-bn (bignumber fiat-price)]
+    (when (and crypto-bn fiat-price-bn)
+      (-> crypto-bn
+          (.times fiat-price-bn)
+          (with-precision 2)))))
 
 (defn sufficient-funds?
   [^js amount ^js balance]

src/utils/number.cljs

@@ -2,7 +2,8 @@
   (:require [clojure.string :as string]
             [native-module.core :as native-module]
             [utils.hex :as utils.hex]
-            [utils.money :as utils.money]))
+            [utils.money :as utils.money]
+            [utils.money :as money]))
 
 (defn naive-round
   "Quickly and naively round number `n` up to `decimal-places`.
@@ -18,17 +19,6 @@
     (/ (Math/round (* n scale))
        scale)))
 
-(defn convert-to-whole-number
-  "Converts a fractional `amount` to its corresponding whole number representation
-  by dividing it by 10 raised to the power of `decimals`. This is often used in financial
-  calculations where amounts are stored in their smallest units (e.g., cents) and need
-  to be converted to their whole number equivalents (e.g., dollars).
-
-  Example usage:
-  (convert-to-whole-number 12345 2) ; => 123.45"
-  [amount decimals]
-  (/ amount (Math/pow 10 decimals)))
-
 (defn parse-int
   "Parses `n` as an integer. Defaults to zero or `default` instead of NaN."
   ([n]
@@ -65,15 +55,44 @@
              "")
            ""))))
 
+(defn convert-to-whole-number
+  "Converts a fractional `amount` to its corresponding whole number representation
+  by dividing it by 10 raised to the power of `decimals`. This is often used in financial
+  calculations where amounts are stored in their smallest units (e.g., cents) and need
+  to be converted to their whole number equivalents (e.g., dollars).
+
+  Example usage:
+  (convert-to-whole-number 12345 2) ; => 123.45"
+  [amount decimals]
+  (-> amount
+      (/ (Math/pow 10 decimals))
+      (.toFixed decimals)
+      remove-trailing-zeroes))
+
 (defn hex->whole
   [num decimals]
   (-> num
       utils.hex/normalize-hex
       native-module/hex-to-number
-      (convert-to-whole-number decimals)))
+      (convert-to-whole-number decimals)
+      money/bignumber))
 
 (defn to-fixed
   [num decimals]
   (-> num
       (utils.money/to-fixed decimals)
       remove-trailing-zeroes))
+
+(defn small-number-threshold
+  "Receives a decimal count and returns a string like '<0.001' if the decimal count is 3,
+   '<0.000001' if the decimal count is 6, etc."
+  [decimal-count]
+  (if (> decimal-count 0)
+    (str "<0." (apply str (repeat (dec decimal-count) "0")) "1")
+    "0"))
+
+(defn valid-decimal-count?
+  "Returns false if the number has more decimals than the decimal count, otherwise true."
+  [num decimal-count]
+  (let [decimal-part (second (string/split (str num) #"\."))]
+    (or (nil? decimal-part) (<= (count decimal-part) decimal-count))))

src/utils/number_test.cljs

@@ -5,23 +5,23 @@
 
 (deftest convert-to-whole-number-test
   (testing "correctly converts fractional amounts to whole numbers"
-    (is (= 123.45 (utils.number/convert-to-whole-number 12345 2)))
-    (is (= 1.2345 (utils.number/convert-to-whole-number 12345 4)))
-    (is (= 12345.0 (utils.number/convert-to-whole-number 1234500 2)))
-    (is (= 0.123 (utils.number/convert-to-whole-number 123 3)))
-    (is (= 1000.0 (utils.number/convert-to-whole-number 1000000 3))))
+    (is (= "123.45" (utils.number/convert-to-whole-number 12345 2)))
+    (is (= "1.2345" (utils.number/convert-to-whole-number 12345 4)))
+    (is (= "12345" (utils.number/convert-to-whole-number 1234500 2)))
+    (is (= "0.123" (utils.number/convert-to-whole-number 123 3)))
+    (is (= "1000" (utils.number/convert-to-whole-number 1000000 3))))
 
   (testing "handles zero decimals"
-    (is (= 12345 (utils.number/convert-to-whole-number 12345 0))))
+    (is (= "12345" (utils.number/convert-to-whole-number 12345 0))))
 
   (testing "handles negative amounts"
-    (is (= -123.45 (utils.number/convert-to-whole-number -12345 2)))
-    (is (= -1.2345 (utils.number/convert-to-whole-number -12345 4)))
-    (is (= -0.123 (utils.number/convert-to-whole-number -123 3))))
+    (is (= "-123.45" (utils.number/convert-to-whole-number -12345 2)))
+    (is (= "-1.2345" (utils.number/convert-to-whole-number -12345 4)))
+    (is (= "-0.123" (utils.number/convert-to-whole-number -123 3))))
 
   (testing "handles zero amount"
-    (is (= 0 (utils.number/convert-to-whole-number 0 2)))
-    (is (= 0 (utils.number/convert-to-whole-number 0 0)))))
+    (is (= "0" (utils.number/convert-to-whole-number 0 2)))
+    (is (= "0" (utils.number/convert-to-whole-number 0 0)))))
 
 (deftest parse-int-test
   (testing "defaults to zero"
@@ -50,3 +50,36 @@
     (is (= 6 (utils.number/parse-float "6")))
     (is (= 6.99 (utils.number/parse-float "6.99" 0)))
     (is (= -6.9 (utils.number/parse-float "-6.9" 0)))))
+
+(deftest small-number-threshold-test
+  (testing "correctly generates threshold strings based on decimal count"
+    (is (= "<0.1" (utils.number/small-number-threshold 1)))
+    (is (= "<0.01" (utils.number/small-number-threshold 2)))
+    (is (= "<0.001" (utils.number/small-number-threshold 3)))
+    (is (= "<0.000001" (utils.number/small-number-threshold 6)))
+    (is (= "<0.0000000001" (utils.number/small-number-threshold 10)))
+    (is (= "<0.000000000000000001" (utils.number/small-number-threshold 18)))
+    (is (= "<0.000000000000000000001" (utils.number/small-number-threshold 21))))
+
+  (testing "handles edge cases for decimal count"
+    (is (= "0" (utils.number/small-number-threshold 0)))
+    (is (= "0" (utils.number/small-number-threshold -1)))))
+
+(deftest valid-decimal-count?-test
+  (testing "valid decimal count check for numbers with varying decimals"
+    (is (true? (utils.number/valid-decimal-count? 123 2)))
+    (is (true? (utils.number/valid-decimal-count? 123 0)))
+
+    (is (true? (utils.number/valid-decimal-count? 123.45 2)))
+    (is (true? (utils.number/valid-decimal-count? 123.4 2)))
+    (is (true? (utils.number/valid-decimal-count? 123.456 3)))
+
+    (is (false? (utils.number/valid-decimal-count? 123.456 2)))
+    (is (false? (utils.number/valid-decimal-count? 123.456789 4)))
+
+    (is (true? (utils.number/valid-decimal-count? 123.0 1)))
+    (is (true? (utils.number/valid-decimal-count? -123.45 2)))
+    (is (false? (utils.number/valid-decimal-count? -123.4567 3)))
+
+    (is (true? (utils.number/valid-decimal-count? 1234567890.12 2)))
+    (is (false? (utils.number/valid-decimal-count? 1234567890.12345 3)))))

src/utils/worklets/chat/messenger/messages.cljs

@@ -6,8 +6,3 @@
   [distance-from-list-top chat-list-scroll-y callback]
   (.messagesListOnScroll ^js worklets distance-from-list-top chat-list-scroll-y callback))
 
-(defn use-messages-scrolled-to-threshold
-  [distance-from-list-top threshold]
-  (.useMessagesScrolledToThreshold ^js worklets
-                                   distance-from-list-top
-                                   threshold))

src/utils/worklets/chat/messenger/navigation.cljs

@@ -1,27 +0,0 @@
-(ns utils.worklets.chat.messenger.navigation)
-
-(def ^:private worklets (js/require "../src/js/worklets/chat/messenger/navigation.js"))
-
-(defn navigation-header-opacity
-  [distance-from-list-top all-loaded? chat-screen-layout-calculations-complete? start-position]
-  (.navigationHeaderOpacity ^js worklets
-                            distance-from-list-top
-                            all-loaded?
-                            chat-screen-layout-calculations-complete?
-                            start-position))
-
-(defn navigation-header-position
-  [distance-from-list-top all-loaded? top-bar-height start-position]
-  (.navigationHeaderPosition ^js worklets
-                             distance-from-list-top
-                             all-loaded?
-                             top-bar-height
-                             start-position))
-
-(defn navigation-buttons-complete-opacity
-  [chat-screen-layout-calculations-complete?]
-  (.navigationButtonsCompleteOpacity ^js worklets chat-screen-layout-calculations-complete?))
-
-(defn interpolate-navigation-view-opacity
-  [props]
-  (.interpolateNavigationViewOpacity ^js worklets (clj->js props)))