WIP: first attempt

Send page > input amount #16926
Numbered keyboard sane defaults Top bar Use input Progress Update token-input Update keyboard Base specs Backspace icon Revert "Backspace icon" This reverts commit e591c5297ae149eb3800df853b956d3154fe206c. Update tests Clean up Fix formatting Fix styles Add autofocus Add icons and update tests Add comment Add on-swap Current limit state Update tests Update column key Improve input interaction Extract make-new-input
2023-11-21 17:30:40 -06:00 · 2023-11-21 16:06:25 +03:00 · 2023-11-21 10:55:46 +04:00 · 2023-11-19 16:26:00 -08:00 · 2023-11-18 11:04:48 -03:00 · 2023-11-18 08:50:11 -03:00
151 changed files with 2583 additions and 814 deletions
@@ -16,10 +16,18 @@
                :clj-kondo-config              {:level :error}
                :cond-else                     {:level :error}
                :consistent-alias              {:level   :error
-                                                :aliases {clojure.string  string
-                                                          clojure.set     set
-                                                          clojure.walk    walk
-                                                          taoensso.timbre log}}
+                                                :aliases {clojure.set      set
+                                                          clojure.string   string
+                                                          clojure.walk     walk
+                                                          malli.core       malli
+                                                          malli.dev.pretty malli.pretty
+                                                          malli.dev.virhe  malli.virhe
+                                                          malli.error      malli.error
+                                                          malli.generator  malli.generator
+                                                          malli.transform  malli.transform
+                                                          malli.util       malli.util
+                                                          schema.core      schema
+                                                          taoensso.timbre  log}}
                :deprecated-namespace          {:level :warning}
                :docstring-blank               {:level :error}
                :equals-true                   {:level :error}
@@ -0,0 +1,2 @@
+{:lint-as {malli.experimental/defn schema.core/defn}
+ :linters {:unresolved-symbol {:exclude [(malli.core/=>)]}}}
@@ -36,6 +36,7 @@
  "deftest-sub"     :arg1-body
  "wait-for"        :arg1-body
  "with-deps-check" :arg1-body
+  "schema/=>"       :arg1-body
  "->"              [:noarg1-body
                     {:list               {:constant-pair? false :force-nl? false}
                      :next-inner-restore [[:list :constant-pair?]]}]
@@ -311,13 +311,14 @@ endef
 lint: export TARGET := clojure
 lint: export CLJ_LINTER_PRINT_WARNINGS ?= false
 lint: ##@test Run code style checks
-	@sh scripts/lint-re-frame-in-quo-components.sh && \
-	sh scripts/lint-direct-require-component-outside-quo.sh && \
+	@sh scripts/lint/re-frame-in-quo-components.sh && \
+	sh scripts/lint/direct-require-component-outside-quo.sh && \
+	sh scripts/lint/require-i18n-resource-first.sh && \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src $(if $(filter $(CLJ_LINTER_PRINT_WARNINGS),true),,| grep -v ': warning: ') && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
-	scripts/lint_translations.clj && \
+	scripts/lint/translations.clj && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
-	sh scripts/lint-trailing-newline.sh && \
+	sh scripts/lint/trailing-newline.sh && \
 	node_modules/.bin/prettier --write .

 # NOTE: We run the linter twice because of https://github.com/kkinnear/zprint/issues/271
@@ -327,7 +328,7 @@ lint-fix: ##@test Run code style checks and fix issues
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
 	clojure-lsp --ns-exclude-regex ".*/src/status_im2/core\.cljs$$" clean-ns && \
-	sh scripts/lint-trailing-newline.sh --fix && \
+	sh scripts/lint/trailing-newline.sh --fix && \
 	node_modules/.bin/prettier --write .

 shadow-server: export TARGET := clojure
@@ -45,11 +45,20 @@
  },

  {
-    "path": "borkdude/edamame/1.1.17/edamame-1.1.17",
+    "path": "borkdude/dynaload/0.3.5/dynaload-0.3.5",
    "host": "https://repo.clojars.org",
    "jar": {
-      "sha1": "9087f7abf0104e0354d7db7fc4576608eac558f4",
-      "sha256": "1n1872i240lakn4pzsag4grf7bv7lcsipmqllxd9m4k1zp3dgla1"
+      "sha1": "accd696ba364b850b4d92e38f5a34d0e828a0ad1",
+      "sha256": "0k62m1f29xfh3cp67w7kcvkp5aj35simi8kf95ycvkmgp76w11q8"
+    }
+  },
+
+  {
+    "path": "borkdude/edamame/1.3.23/edamame-1.3.23",
+    "host": "https://repo.clojars.org",
+    "jar": {
+      "sha1": "254d023e97ed438f0f44532b5a06d928d031ede4",
+      "sha256": "0l7mxza2nimslhg0qh6jp7gmb8sd6l89fk5d1zvzq2xskscq2vly"
    }
  },

@@ -81,20 +90,20 @@
  },

  {
-    "path": "cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0",
+    "path": "cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3",
    "host": "https://repo.clojars.org",
    "jar": {
-      "sha1": "45f6034b26a14138e74145b7a4059628c0fedcd1",
-      "sha256": "1dy1l6y8cb8xiqq97a4lf8giyiicq4wfl4s2lxn5fb6614cjxqx2"
+      "sha1": "5ae0efd9377a5e60c084bdaf4a2ce094f759ce23",
+      "sha256": "0drxf9nm23i1pcgrkwbcr09msq37csilzww38709add0hz8spjhq"
    }
  },

  {
-    "path": "cider/piggieback/0.5.2/piggieback-0.5.2",
+    "path": "cider/piggieback/0.4.1/piggieback-0.4.1",
    "host": "https://repo.clojars.org",
    "jar": {
-      "sha1": "ecfd5c286a85db3f059e75c37fca5722d9e26f79",
-      "sha256": "1ps9yf3cxmlm447hqkidjb5xry90n0wl3jk0jn28fagq31lzylkl"
+      "sha1": "0a02a3e2ecd7a126ab60d8a44793342f20ced79b",
+      "sha256": "142vl5np33akcrnn6pksi0rjfsmmi528villxsj6cwcndvybiw4m"
    }
  },

@@ -539,6 +548,24 @@
    }
  },

+  {
+    "path": "metosin/malli/0.13.0/malli-0.13.0",
+    "host": "https://repo.clojars.org",
+    "jar": {
+      "sha1": "286c52d26a3a9d613b5f692971bd19c581cdc4b0",
+      "sha256": "0vaq9d6cln5j4ww302fwlgg7m647cf2j16gs2i1p1d4klbn4jddz"
+    }
+  },
+
+  {
+    "path": "mvxcvi/arrangement/2.1.0/arrangement-2.1.0",
+    "host": "https://repo.clojars.org",
+    "jar": {
+      "sha1": "1bc8f3bba7a28de85f319b7d464aa8d955f44918",
+      "sha256": "1j1rkwrs4wm8zk9v7ilgpnyav5sipdd2bmb83sazh392blw52wpk"
+    }
+  },
+
  {
    "path": "net/cgrand/macrovich/0.2.1/macrovich-0.2.1",
    "host": "https://repo.clojars.org",
@@ -728,6 +755,15 @@
    }
  },

+  {
+    "path": "org/clojure/test.check/1.1.1/test.check-1.1.1",
+    "host": "https://repo1.maven.org/maven2",
+    "jar": {
+      "sha1": "f33d988fd57bc9c11af1952db81c10f319c91416",
+      "sha256": "0y2hpkj7zl4yrpsl35ifpdaja5c72b8fpjcnmdgmld9c7cb1hlcl"
+    }
+  },
+
  {
    "path": "org/clojure/tools.analyzer/1.1.0/tools.analyzer-1.1.0",
    "host": "https://repo1.maven.org/maven2",
@@ -909,11 +945,11 @@
  },

  {
-    "path": "refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0",
+    "path": "refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0",
    "host": "https://repo.clojars.org",
    "jar": {
-      "sha1": "2b3bb82da53b5db9c2b2aa298417816b81d0ed97",
-      "sha256": "1ysqabmlnghki6x0636zngxza2d83c85276wp9ma9wk183mkv52a"
+      "sha1": "6bc3441afc94f7ca024e41a864ca75e05df7e207",
+      "sha256": "0w8hax99y98l53mixxzx2ja0vcnhjv8dnsaz1zj3vqk775ns5w6i"
    }
  },

@@ -3,12 +3,13 @@ babashka/fs/0.2.16/fs-0.2.16.jar
 bidi/bidi/2.1.6/bidi-2.1.6.jar
 binaryage/env-config/0.2.2/env-config-0.2.2.jar
 binaryage/oops/0.7.2/oops-0.7.2.jar
-borkdude/edamame/1.1.17/edamame-1.1.17.jar
+borkdude/dynaload/0.3.5/dynaload-0.3.5.jar
+borkdude/edamame/1.3.23/edamame-1.3.23.jar
 borkdude/sci.impl.reflector/0.0.1/sci.impl.reflector-0.0.1.jar
 camel-snake-kebab/camel-snake-kebab/0.4.3/camel-snake-kebab-0.4.3.jar
 cheshire/cheshire/5.11.0/cheshire-5.11.0.jar
-cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0.jar
-cider/piggieback/0.5.2/piggieback-0.5.2.jar
+cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3.jar
+cider/piggieback/0.4.1/piggieback-0.4.1.jar
 clj-kondo/clj-kondo/2023.09.07/clj-kondo-2023.09.07.jar
 cljs-bean/cljs-bean/1.9.0/cljs-bean-1.9.0.jar
 clout/clout/2.1.2/clout-2.1.2.jar
@@ -58,6 +59,8 @@ javax/annotation/jsr250-api/1.0/jsr250-api-1.0.jar
 javax/servlet/servlet-api/2.5/servlet-api-2.5.jar
 javax/xml/bind/jaxb-api/2.3.0/jaxb-api-2.3.0.jar
 medley/medley/0.8.2/medley-0.8.2.jar
+metosin/malli/0.13.0/malli-0.13.0.jar
+mvxcvi/arrangement/2.1.0/arrangement-2.1.0.jar
 net/cgrand/macrovich/0.2.1/macrovich-0.2.1.jar
 net/java/dev/jna/jna/5.12.1/jna-5.12.1.jar
 nrepl/bencode/1.1.0/bencode-1.1.0.jar
@@ -79,6 +82,7 @@ org/clojure/data.priority-map/1.1.0/data.priority-map-1.1.0.jar
 org/clojure/google-closure-library/0.0-20230227-c7c0a541/google-closure-library-0.0-20230227-c7c0a541.jar
 org/clojure/google-closure-library-third-party/0.0-20230227-c7c0a541/google-closure-library-third-party-0.0-20230227-c7c0a541.jar
 org/clojure/spec.alpha/0.3.218/spec.alpha-0.3.218.jar
+org/clojure/test.check/1.1.1/test.check-1.1.1.jar
 org/clojure/tools.analyzer/1.1.0/tools.analyzer-1.1.0.jar
 org/clojure/tools.analyzer.jvm/1.2.2/tools.analyzer.jvm-1.2.2.jar
 org/clojure/tools.cli/1.0.206/tools.cli-1.0.206.jar
@@ -99,7 +103,7 @@ org/wildfly/common/wildfly-common/1.5.2.Final/wildfly-common-1.5.2.Final.jar
 prismatic/schema/1.1.7/schema-1.1.7.jar
 reagent/reagent/1.2.0/reagent-1.2.0.jar
 re-com/re-com/2.8.0/re-com-2.8.0.jar
-refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0.jar
+refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0.jar
 re-frame/re-frame/1.3.0/re-frame-1.3.0.jar
 re-frisk-remote/re-frisk-remote/1.6.0/re-frisk-remote-1.6.0.jar
 re-frisk/sente/1.15.0/sente-1.15.0.jar
@@ -67,9 +67,12 @@ stdenv.mkDerivation {
  '';
  buildPhase = ''
    # Assemble CLASSPATH from available clojure dependencies.
-    # We append 'src' so it can find the local sources.
-    export CLASS_PATH="$(find ${deps.clojure} \
-      -iname '*.jar' | tr '\n' ':')src"
+    # We prepend 'src' so it can find the local sources and prioritize
+    # our own namespaces over dependencies, given that indirect dependencies
+    # can also cause naming conflicts (e.g. prismatic/schema already uses
+    # namespace schema.core).
+    export CLASS_PATH="src:$(find ${deps.clojure} \
+      -iname '*.jar' | tr '\n' ':')"

    # target must be one of the builds defined in shadow-cljs.edn
    java -cp "$CLASS_PATH" clojure.main \
@@ -0,0 +1,10 @@
+#!/usr/bin/env sh
+
+if rg --quiet --multiline '^\(ns.*\n^\s*\(:require\n(^\s*(;|#_).*\n)*(^\s*\[status-im2\.setup\.i18n-resources\W)' src/status_im2/core.cljs; then
+  exit 0
+elif [ $? -eq 1 ]; then
+  echo "status-im2.setup.i18n-resources must be loaded first (be the first one in ns :require form) in status-im2.core"
+  echo "For more info, check the comment here https://github.com/status-im/status-mobile/pull/17618#discussion_r1361275489"
+else
+  exit $?
+fi
@@ -9,6 +9,7 @@
                [cljs-bean "1.9.0"]
                [com.cognitect/transit-cljs "0.8.280"]
                [camel-snake-kebab "0.4.3"]
+                [metosin/malli "0.13.0"]

                ;; Dev dependencies
                [refactor-nrepl "2.5.0"]
@@ -50,6 +51,7 @@
                    :after-load-async  status-im2.setup.hot-reload/reload
                    :build-notify      status-im2.setup.hot-reload/build-notify
                    :preloads          [re-frisk-remote.preload
+                                        status-im2.setup.schema-preload
                                        ;; In order to use component test helpers in the REPL we
                                        ;; need to preload namespaces that are not normally required
                                        ;; by production code, such as
@@ -71,6 +73,10 @@
                            :warnings           {:fn-deprecated false}
                            :closure-defines    {re-frame.trace/trace-enabled? true}
                            :source-map         false
+                            ;; This seems to be necessary while using the REPL,
+                            ;; otherwise sometimes you'll get weird errors when
+                            ;; instrumenting functions.
+                            :static-fns         false
                            :infer-externs      true}
         ;; if you want to use a real device, set your local ip
         ;; in the SHADOW_HOST env variable to make sure that
@@ -104,13 +110,15 @@
   :output-dir "target/test"
   :optimizations :simple
   :target :node-test
+   :dev {:devtools {:preloads [status-im2.setup.schema-preload]}}
   ;; Uncomment line below to `make test-watch` a specific file
   ;; :ns-regexp "status-im2.subs.messages-test$"
   :main status-im.test-runner/main
   ;; set :ui-driven to true to let shadow-cljs inject node-repl
   :ui-driven true
   :closure-defines
-   {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
+   {schema.core/throw-on-error?                      true
+    status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
    status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
    status-im2.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
    status-im2.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
@@ -139,9 +147,17 @@
   :compiler-options {:optimizations :simple
                      :source-map    false}}
  :component-test {:target           :npm-module
-                   :entries          [quo.core-spec status-im2.core-spec]
+                   :entries          [;; We need to tell shadow-cljs to compile
+                                      ;; the preloads namespace because it will
+                                      ;; be used directly by Jest in the option
+                                      ;; setupFilesAfterEnv.
+                                      status-im2.setup.schema-preload
+
+                                      quo.core-spec
+                                      status-im2.core-spec]
                   :ns-regexp        "component-spec$"
                   :output-dir       "component-spec"
+                   :closure-defines  {schema.core/throw-on-error? true}
                   :compiler-options {:warnings-as-errors false
                                      :static-fns         false
                                      :infer-externs      true}}}}
@@ -3,18 +3,22 @@
    [quo.components.counter.step.view :as step]
    [test-helpers.component :as h]))

+(defn render
+  [component]
+  (h/render-with-theme-provider component :dark))
+
 (h/describe "step component"
  (h/test "default render of step component"
-    (h/render [step/view {} nil])
+    (render [step/view {} nil])
    (-> (h/expect (h/query-by-label-text :step-counter))
        (h/is-truthy)))

  (h/test "renders step with a string value"
-    (h/render [step/view {} "1"])
+    (render [step/view {} "1"])
    (-> (h/expect (h/get-by-text "1"))
        (h/is-truthy)))

  (h/test "renders step with an integer value"
-    (h/render [step/view {} 1])
+    (render [step/view {} 1])
    (-> (h/expect (h/get-by-text "1"))
        (h/is-truthy))))
@@ -2,10 +2,24 @@
  (:require
    [quo.components.counter.step.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    quo.theme
    [react-native.core :as rn]
+    [schema.core :as schema]
    [utils.number]))

+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:accessibility-label {:optional true} [:maybe :keyword]]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:in-blur-view? {:optional true} [:maybe :boolean]]
+      [:theme :schema.common/theme]
+      [:type {:optional true} [:enum :active :complete :neutral]]]]
+    [:value [:maybe [:or :string :int]]]]
+   :any])
+
 (defn- view-internal
  [{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
  (let [type  (or type :neutral)
@@ -23,6 +37,9 @@
     [text/text
      {:weight :medium
       :size   :label
-       :style  {:color (style/text-color type theme)}} label]]))
+       :style  {:color (style/text-color type theme)}}
+      label]]))

-(def view (theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))
@@ -19,3 +19,7 @@
   :background-color colors/danger-50
   :align-items      :center
   :justify-content  :center})
+
+(def empty-state
+  {:width  375
+   :height 116})
@@ -2,11 +2,12 @@
  (:require
    [quo.components.graph.utils :as utils]
    [quo.components.graph.wallet-graph.style :as style]
-    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
+    [quo.foundations.resources :as resources]
    [quo.theme :as quo.theme]
    [react-native.charts :as charts]
    [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
    [react-native.linear-gradient :as linear-gradient]))

 (defn- time-frame->max-data-points
@@ -42,11 +43,10 @@
        gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
        fill-color      (colors/theme-colors colors/white colors/neutral-95)]
    (if (= time-frame :empty)
-      [rn/view
-       {:accessibility-label :illustration
-        :style               style/illustration}
-       [text/text {:style {:color colors/white}}
-        "Illustration here"]]
+      [fast-image/fast-image
+       {:style               style/empty-state
+        :source              (resources/get-themed-image :no-funds theme)
+        :accessibility-label :illustration}]
      [rn/view
       [linear-gradient/linear-gradient
        {:colors gradient-colors
@@ -3,22 +3,17 @@
    [quo.components.icon :as quo.icons]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
+    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(def themes
-  {:light {:default colors/neutral-50
-           :success colors/success-50
-           :error   colors/danger-50}
-   :dark  {:default colors/neutral-40
-           :success colors/success-60
-           :error   colors/danger-60}})
-
 (defn get-color
-  [k]
-  (get-in themes [(theme/get-theme) k]))
+  [k theme]
+  (case k
+    :success (colors/resolve-color :success theme)
+    :error   (colors/resolve-color :danger theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))

-(defn info-message
+(defn view-internal
  "[info-message opts \"message\"]
  opts
  {:type           :default/:success/:error
@@ -27,11 +22,11 @@
   :text-color     colors/white  ;; text color override
   :icon-color     colors/white  ;; icon color override
   :no-icon-color? false         ;; disable tint color for icon"
-  [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
+  [{:keys [type size theme icon text-color icon-color no-icon-color? style accessibility-label]} message]
  (let [weight     (if (= size :default) :regular :medium)
        icon-size  (if (= size :default) 16 12)
        size       (if (= size :default) :paragraph-2 :label)
-        text-color (or text-color (get-color type))
+        text-color (or text-color (get-color type theme))
        icon-color (or icon-color text-color)]
    [rn/view
     {:style (merge {:flex-direction :row
@@ -42,7 +37,10 @@
       :no-color no-icon-color?
       :size     icon-size}]
     [text/text
-      {:size   size
-       :weight weight
-       :style  {:color             text-color
-                :margin-horizontal 4}} message]]))
+      {:accessibility-label accessibility-label
+       :size                size
+       :weight              weight
+       :style               {:color             text-color
+                             :margin-horizontal 4}} message]]))
+
+(def info-message (quo.theme/with-theme view-internal))
@@ -22,9 +22,10 @@
    (h/is-truthy (h/get-by-text "test description")))

  (h/test "renders step component when step-number is valid and type is step"
-    (h/render [list/view
-               {:type        :step
-                :step-number 1}])
+    (h/render-with-theme-provider [list/view
+                                   {:type        :step
+                                    :step-number 1}]
+                                  :dark)
    (h/is-truthy (h/get-by-label-text :step-counter)))

  (h/test "renders decription with a context tag component and description after the tag"
@@ -36,7 +36,7 @@
                  :blur?     false
                  :type      :digit} 1])
      (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
      (h/was-called on-press)))

  (h/test "Is not pressable when disabled is true"
@@ -47,5 +47,5 @@
                  :blur?     false
                  :type      :digit} 1])
      (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
      (h/was-not-called on-press))))
@@ -7,6 +7,11 @@
    [react-native.core :as rn]
    [reagent.core :as reagent]))

+(defn- label->accessibility-label
+  [label]
+  (let [label-name (if (keyword? label) (name label) label)]
+    (keyword (str "keyboard-key-" label-name))))
+
 (defn- view-internal
  []
  (let [pressed? (reagent/atom false)]
@@ -14,9 +19,11 @@
      (let [label-color      (style/get-label-color disabled? theme blur?)
            background-color (style/toggle-background-color @pressed? blur? theme)]
        [rn/pressable
-         {:accessibility-label :keyboard-key
+         {:accessibility-label (label->accessibility-label label)
          :disabled            (or disabled? (not label))
-          :on-press            (fn [] (on-press label))
+          :on-press            (fn []
+                                 (when on-press
+                                   (on-press label)))
          :on-press-in         #(reset! pressed? true)
          :on-press-out        #(reset! pressed? false)
          :style               (style/container background-color)}
@@ -17,13 +17,15 @@

 (defn- view-internal
  []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete]
+        :or   {left-action :none}}]
    [rn/view
     {:style style/container}
     (for [row-index (range 1 4)]
       ^{:key row-index}
       [rn/view {:style style/row-container}
        (for [column-index (range 1 4)]
+          ^{:key (str row-index column-index)}
          [keyboard-item
           {:item      (+ (* (dec row-index) 3) column-index)
            :type      :digit
@@ -58,10 +60,10 @@
        :theme     theme}]
      (if delete-key?
        [keyboard-item
-         {:item      :i/delete
+         {:item      :i/travel
          :type      :key
          :disabled? disabled?
-          :on-press  on-press
+          :on-press  on-delete
          :blur?     blur?
          :theme     theme}]
        [keyboard-item])]]))
@@ -0,0 +1,53 @@
+(ns quo.components.tags.summary-tag.component-spec
+  (:require
+    [quo.components.tags.summary-tag.view :as summary-tag]
+    [test-helpers.component :as h]))
+
+(h/describe "Summary tag component tests"
+  (h/test "Basic render"
+    (h/render [summary-tag/view])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "Account view render"
+    (h/render [summary-tag/view
+               {:type                :account
+                :label               "Alice's Account"
+                :customization-color "#ff0000"
+                :emoji               "🎉"}])
+    (h/is-truthy (h/get-by-text "Alice's Account")))
+
+  (h/test "Network view render"
+    (h/render [summary-tag/view
+               {:type         :network
+                :label        "Ethereum Network"
+                :image-source "path/to/ethereum-logo.png"}])
+    (h/is-truthy (h/get-by-text "Ethereum Network")))
+
+  (h/test "Saved address view render"
+    (h/render [summary-tag/view
+               {:type                :saved-address
+                :label               "Charlie's Wallet"
+                :customization-color "#00ff00"}])
+    (h/is-truthy (h/get-by-text "Charlie's Wallet")))
+
+  (h/test "Collectible view render"
+    (h/render [summary-tag/view
+               {:type         :collectible
+                :label        "Rare Artifact"
+                :image-source "path/to/artifact-image.png"}])
+    (h/is-truthy (h/get-by-text "Rare Artifact")))
+
+  (h/test "User view render"
+    (h/render [summary-tag/view
+               {:type                :user
+                :label               "Bob Smith"
+                :image-source        "path/to/profile-pic.png"
+                :customization-color "#0000ff"}])
+    (h/is-truthy (h/get-by-text "Bob Smith")))
+
+  (h/test "Token view render"
+    (h/render [summary-tag/view
+               {:type         :token
+                :label        "1,000 SNT"
+                :image-source "path/to/token-image.png"}])
+    (h/is-truthy (h/get-by-text "1,000 SNT"))))
@@ -0,0 +1,29 @@
+(ns quo.components.tags.summary-tag.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn main
+  [{:keys [type theme customization-color]}]
+  {:justify-content  :center
+   :align-items      :center
+   :height           32
+   :padding-left     4
+   :padding-right    10
+   :flex-direction   :row
+   :border-radius    (if (#{:account :collectible} type) 10 16)
+   :background-color (colors/resolve-color customization-color theme 10)})
+
+(defn label
+  [type theme]
+  {:color       (colors/theme-colors colors/neutral-100 colors/white theme)
+   :margin-left (if (= type :address) 6 4)})
+
+(def collectible-image
+  {:width         24
+   :height        24
+   :border-radius 10})
+
+(def token-image
+  {:width         24
+   :height        24
+   :border-radius 12})
@@ -0,0 +1,67 @@
+(ns quo.components.tags.summary-tag.view
+  (:require
+    [quo.components.avatars.account-avatar.view :as account-avatar]
+    [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.summary-tag.style :as style]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]))
+
+(defn- left-view
+  [{:keys [label type customization-color emoji image-source]}]
+  (case type
+    :account
+    [account-avatar/view
+     {:customization-color customization-color
+      :size                24
+      :emoji               emoji
+      :type                :default}]
+    :network
+    [rn/image
+     {:source image-source
+      :style  style/token-image}]
+    :saved-address
+    [wallet-user-avatar/wallet-user-avatar
+     {:full-name           label
+      :size                :size-24
+      :customization-color customization-color}]
+    :collectible
+    [rn/image
+     {:source image-source
+      :style  style/collectible-image}]
+    :user
+    [user-avatar/user-avatar
+     {:full-name           label
+      :size                :xs
+      :profile-picture     image-source
+      :customization-color customization-color}]
+    :token
+    [rn/image
+     {:source image-source
+      :style  style/token-image}]
+    nil))
+
+(defn- view-internal
+  "Options:
+    - :label - string - tag label
+    - :customization-color - color - It will be passed down to components that
+      should vary based on a custom color.
+    - :type - :token / :user / :collectible / :saved-address / :network / :account
+    - :emoji - string - emoji used for displaying account avatar
+    - :image-source - resource - image to display on :network, :collectible :user and :token
+    - :theme - :light / :dark"
+  [{:keys [label customization-color type theme]
+    :as   props
+    :or   {customization-color colors/neutral-80-opa-5}}]
+  [rn/view
+   {:accessibility-label :container
+    :style               (style/main (assoc props :customization-color customization-color))}
+   [left-view props]
+   [text/text
+    {:style  (style/label type theme)
+     :weight :semi-bold
+     :size   :heading-1} label]])
+
+(def view (quo.theme/with-theme view-internal))
@@ -14,7 +14,10 @@
   :padding-bottom     4
   :height             36
   :flex-direction     :row
-   :justify-content    :space-between})
+   :justify-content    :space-between
+   ;;
+   :background-color   :pink
+   })

 (def token
  {:width  32
@@ -22,14 +25,12 @@

 (defn text-input
  [theme]
-  (merge typography/heading-1
-         {:font-weight  "600"
-          :margin-left  8
-          :margin-right (if platform/ios? 6 4)
-          :color        (colors/theme-colors colors/neutral-100 colors/white theme)
-          :padding      0
-          :text-align   :center
-          :height       "100%"}))
+  (assoc typography/heading-1
+    :font-weight "600"
+    :color (colors/theme-colors colors/neutral-100 colors/white theme)
+    :padding 0
+    ;; TODO: fix the padding
+    :height "100%"))

 (defn divider
  [width theme]
@@ -1,73 +1,107 @@
 (ns quo.components.wallet.token-input.view
  (:require
-    [clojure.string :as string]
-    [quo.components.buttons.button.view :as button]
-    [quo.components.dividers.divider-line.view :as divider-line]
-    [quo.components.markdown.text :as text]
-    [quo.components.tags.network-tags.view :as network-tag]
-    [quo.components.wallet.token-input.style :as style]
-    [quo.foundations.colors :as colors]
-    [quo.foundations.common :as common]
-    [quo.foundations.resources :as resources]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+   [clojure.string :as string]
+   [quo.components.buttons.button.view :as button]
+   [quo.components.dividers.divider-line.view :as divider-line]
+   [quo.components.markdown.text :as text]
+   [quo.components.tags.network-tags.view :as network-tag]
+   [quo.components.wallet.token-input.style :as style]
+   [quo.foundations.colors :as colors]
+   [quo.foundations.common :as common]
+   [oops.core :as oops]
+   [quo.foundations.resources :as resources]
+   [quo.theme :as quo.theme]
+   [react-native.core :as rn]
+   [react-native.platform :as platform]
+   [reagent.core :as reagent]))

 (defn calc-value
  [crypto? currency token value conversion]
-  (if crypto?
-    (str (get common/currency-label currency) (.toFixed (* value conversion) 2))
-    (str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
+  (let [num-value (if (string? value) (parse-double (or value "0")) value)]
+    (if crypto?
+      (str (get common/currency-label currency) (.toFixed (* num-value conversion) 2))
+      (str (.toFixed (/ num-value conversion) 2) " " (string/upper-case (or (clj->js token) ""))))))

 (defn- view-internal
  []
  (let [width     (:width (rn/get-window))
-        value     (reagent/atom 0)
+        value     (reagent/atom nil)
        crypto?   (reagent/atom true)
        input-ref (atom nil)]
-    (fn [{:keys [theme token currency conversion networks title customization-color]}]
-      [rn/view {:style (style/main-container width)}
-       [rn/view {:style style/amount-container}
-        [rn/pressable
-         {:on-press #(when @input-ref (.focus ^js @input-ref))
-          :style    {:flex-direction :row
-                     :flex-grow      1
-                     :align-items    :flex-end}}
-         [rn/image
-          {:style  style/token
-           :source (resources/get-token token)}]
-         [rn/text-input
-          {:ref                    #(reset! input-ref %)
-           :placeholder            "0"
-           :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-           :keyboard-type          :numeric
-           :max-length             12
-           :default-value          @value
-           :on-change-text         #(reset! value %)
-           :style                  (style/text-input theme)
-           :selection-color        customization-color}]
-         [text/text
-          {:size   :paragraph-2
-           :weight :semi-bold
-           :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-                    :margin-right   8
-                    :padding-bottom 2}}
-          (string/upper-case (clj->js (if @crypto? token currency)))]]
-        [button/button
-         {:icon                true
-          :icon-only?          true
-          :size                32
-          :on-press            #(swap! crypto? not)
-          :type                :outline
-          :accessibility-label :reorder}
-         :i/reorder]]
-       [divider-line/view {:container-style {:margin-vertical 8}}]
-       [rn/view {:style style/data-container}
-        [network-tag/view {:networks networks :title title}]
-        [text/text
-         {:size   :paragraph-2
-          :weight :medium
-          :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         (calc-value @crypto? currency token @value conversion)]]])))
+    (fn [{:keys          [theme token currency conversion networks title customization-color
+                          on-swap container-style show-keyboard?]
+          :or            {show-keyboard? true}
+          external-value :value}]
+      (let [number-of-chars    (count (or external-value @value))
+            text-unit-position (+ 23
+                                  (* (if (<= number-of-chars 1)
+                                       0
+                                       (- number-of-chars 1))
+                                     15.333))]
+        [rn/view
+         {:style (merge
+                  (style/main-container width)
+                  container-style)}
+         [rn/view {:style style/amount-container}
+          [rn/pressable
+           {:on-press #(when @input-ref (.focus ^js @input-ref))
+            :style    {:flex             1
+                       :background-color :orange
+                       }}
+           [rn/image
+            {:style  style/token
+             :source (resources/get-token token)}]
+
+
+           [rn/view {:style {:background-color :lightblue
+                             ;;
+                             :position         :absolute
+                             :top              0
+                             :bottom           0
+                             :left             40
+                             :right            0
+                             }}
+            [rn/text-input
+             {:ref                      #(reset! input-ref %)
+              :auto-focus               true
+              :placeholder              "0"
+              :placeholder-text-color   (colors/theme-colors colors/neutral-40
+                                                             colors/neutral-50
+                                                             theme)
+              :default-value            (or external-value @value)
+              :keyboard-type            :numeric
+              :max-length               12
+              :on-change-text           #(reset! value %)
+              :style                    (style/text-input theme)
+              :selection-color          customization-color
+              :show-soft-input-on-focus show-keyboard?}]
+            ;;
+            [rn/view {:style {:position :absolute
+                              :bottom   1
+                              :left     text-unit-position}}
+             [text/text
+              {:size   :paragraph-2
+               :weight :semi-bold
+               :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+              (string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]]]
+          [button/button
+           {:icon                true
+            :icon-only?          true
+            :size                32
+            :on-press            (fn []
+                                   (swap! crypto? not)
+                                   (when on-swap
+                                     (on-swap @crypto?)))
+            :type                :outline
+            :accessibility-label :reorder}
+           :i/reorder]]
+         [divider-line/view {:container-style {:margin-vertical 8}}]
+         [rn/view {:style style/data-container}
+          [network-tag/view {:networks networks :title title}]
+          [text/text
+           {:size   :paragraph-2
+            :weight :medium
+            :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+           (calc-value @crypto? currency token (or external-value @value) conversion)]]]))))

 (def view (quo.theme/with-theme view-internal))
@@ -131,6 +131,7 @@
    quo.components.tags.number-tag.view
    quo.components.tags.permission-tag
    quo.components.tags.status-tags
+    quo.components.tags.summary-tag.view
    quo.components.tags.tag
    quo.components.tags.tags
    quo.components.tags.tiny-tag.view
@@ -211,7 +212,7 @@

 ;;;; Counter
 (def counter quo.components.counter.counter.view/view)
-(def step quo.components.counter.step.view/view)
+(def step #'quo.components.counter.step.view/view)

 ;;;; Dividers
 (def divider-label quo.components.dividers.divider-label.view/view)
@@ -360,6 +361,7 @@
 (def number-tag quo.components.tags.number-tag.view/view)
 (def permission-tag quo.components.tags.permission-tag/tag)
 (def status-tag quo.components.tags.status-tags/status-tag)
+(def summary-tag quo.components.tags.summary-tag.view/view)
 (def tag quo.components.tags.tag/tag)
 (def tags quo.components.tags.tags/tags)
 (def tiny-tag quo.components.tags.tiny-tag.view/view)
@@ -73,6 +73,7 @@
    [quo.components.switchers.group-messaging-card.component-spec]
    [quo.components.tags.network-tags.component-spec]
    [quo.components.tags.status-tags-component-spec]
+    [quo.components.tags.summary-tag.component-spec]
    [quo.components.tags.tiny-tag.component-spec]
    [quo.components.wallet.account-card.component-spec]
    [quo.components.wallet.account-origin.component-spec]
@@ -7,6 +7,15 @@
   :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")
   :bored-ape          (js/require "../resources/images/mock2/bored-ape.png")})

+(def ui-themed
+  {:no-funds
+   {:light (js/require "../resources/images/ui2/no-funds-light.png")
+    :dark  (js/require "../resources/images/ui2/no-funds-dark.png")}})
+
+(defn get-themed-image
+  [k theme]
+  (get-in ui-themed [k theme]))
+
 (defn get-image
  [k]
  (get ui k))
@@ -0,0 +1,68 @@
+# Schemas
+
+This document will grow to describe how we use Malli in the project and our
+conventions. It's still early days 🐪
+
+## Guidelines
+### Use var quote `#'` when aliasing instrumented vars
+
+It is common in this repository to have aliases to vars. For example, `view`
+referring to `var-internal`, or `quo.core/button` referring to
+`quo.components.buttons.button.view`.
+
+If the original var being aliased is instrumented, the alias var MUST [var
+quote](https://clojure.org/guides/weird_characters#_var_quote) the original var.
+If you don't do this, the aliased var will not be instrumented.
+
+```clojure
+;; bad, view-internal is instrumented, but both aliases don't use a var quote.
+(schema.core/=> view-internal ?schema)
+(def view (quo.theme/with-theme view-internal))
+(def button quo.components.buttons.button.view/button)
+
+;; good
+(schema.core/=> view-internal ?schema)
+(def view (quo.theme/with-theme #'view-internal))
+(def button #'quo.components.buttons.button.view/button)
+```
+
+### Prefix schema references with `?`
+
+Prefix schema bindings and vars with a question mark `?`. This is the naming
+convention used by malli itself when functions receive instances of schemas and
+it's an unambiguous way to avoid naming clashes.
+
+```clojure
+;; bad
+(def message-type [:enum ...])
+
+(defn view
+  [message-type] ; Shadows `message-type` schema
+  (do-something message-type))
+
+;; good
+(def ?message-type [:enum ...])
+
+(defn view
+  [message-type] ; Unambiguous naming strategy
+  (do-something message-type))
+```
+
+### Define schemas as functions when needed
+
+Malli has many utility functions to manipulate schemas as data, and they will
+automatically check if the schemas were already defined in the registry.
+
+For schemas we want to conveniently access from the global registry, like
+`:schema.common/theme`, they must be registered before Malli tries to use them.
+
+```clojure
+;; bad, will fail if :schema.common/bar is not registered.
+(def ^:private ?foo
+  (malli.util/select-keys :schema.common/bar [:id :name]))
+
+;; good, execution will be delayed until the schema ?foo is correctly registered.
+(defn- ?foo
+  []
+  (malli.util/select-keys :schema.common/bar [:id :name]))
+```
@@ -0,0 +1,14 @@
+(ns schema.common
+  (:require
+    [schema.registry :as registry]))
+
+(def ^:private ?theme
+  [:enum :light :dark])
+
+(def ^:private ?customization-color
+  [:or :string :keyword])
+
+(defn register-schemas
+  []
+  (registry/register ::theme ?theme)
+  (registry/register ::customization-color ?customization-color))
@@ -0,0 +1,17 @@
+(ns schema.core)
+
+(defmacro =>
+  "Similar to `malli.core/=>`, but instrumentation code will be completely removed
+  in non-debug environments.
+
+  `value` is first transformed via `malli.core/schema` to make sure we fail fast
+  and only register valid schemas."
+  [sym value]
+  `(if ^boolean js/goog.DEBUG
+     (try
+       (malli.core/=> ~sym (malli.core/schema ~value))
+       (catch js/Error e#
+         (taoensso.timbre/error "Failed to instrument function"
+                                {:symbol ~sym :error e#})
+         ~sym))
+     ~sym))
@@ -0,0 +1,95 @@
+(ns schema.core
+  (:require-macros schema.core)
+  (:require
+    [malli.core :as malli]
+    [malli.dev.pretty :as malli.pretty]
+    schema.state
+    [taoensso.timbre :as log]))
+
+(goog-define throw-on-error? false)
+
+(defn- ui-reporter
+  "Prints to STDOUT and signals a schema error should be displayed on screen."
+  [schema-id printer]
+  (let [report (malli.pretty/reporter printer)]
+    (fn [type data]
+      (report type data)
+      (swap! schema.state/errors conj schema-id))))
+
+(defn- thrower
+  "Similar to `malli.dev.pretty/thrower`, but this reporter uses js/Error instead
+  of ex-info, otherwise invalid schema errors will be printed in one long and
+  incomprehensible line in unit test failures."
+  ([] (thrower (malli.pretty/-printer)))
+  ([printer]
+   (let [report (malli.pretty/reporter printer)]
+     (fn [type data]
+       (let [message (with-out-str (report type data))]
+         (throw (js/Error. (str "\n" message))))))))
+
+(defn reporter
+  ([]
+   (reporter nil nil))
+  ([schema-id]
+   (reporter schema-id nil))
+  ([schema-id opts]
+   (let [printer (malli.pretty/-printer
+                  (merge {:width        60
+                          :print-length 6
+                          :print-level  3
+                          :print-meta   false}
+                         opts))]
+     (if throw-on-error?
+       ;; The thrower reporter should be used to short-circuit tests on schema errors.
+       (thrower printer)
+       (ui-reporter schema-id printer)))))
+
+(defn- with-clear-schema-error
+  "Clears current schema error on app if args passed to `f` are valid."
+  [schema-id validate-input f]
+  (fn [& args]
+    (when (validate-input args)
+      (swap! schema.state/errors disj schema-id))
+    (apply f args)))
+
+(defn instrument
+  "Similar to `malli/-instrument`, but will automatically clear up visible schema
+  errors if `f` is called with valid arguments.
+
+  We use a validator cached by `malli.core/validator`, so that validation is
+  performed once.
+
+  If `?schema` is invalid, then behave like a nop, log the error and return `f`.
+
+  `schema-id` is optional, but should be passed when instrumenting anonymous
+  functions. Consider using a namespaced keyword. For example:
+
+    (schema/instrument ::foo
+                       (fn [x] (inc x))
+                       [:=> [:cat :int] :int])
+  "
+  ([f ?schema]
+   (if ^boolean js/goog.DEBUG
+     (let [schema-id (when (var? f) (symbol f))]
+       (when-not schema-id
+         (log/warn "Anonymous function instrumented without an explicit identifier."
+                   {:schema ?schema}))
+       (instrument schema-id f ?schema))
+     f))
+  ([schema-id f ?schema]
+   (if ^boolean js/goog.DEBUG
+     (try
+       (let [?schema               (malli/schema ?schema)
+             {schema-input :input} (malli/-function-info ?schema)
+             [validate-input _]    (malli/-vmap malli/validator [schema-input])]
+         (malli/-instrument {:schema ?schema
+                             :report (reporter schema-id
+                                               {:title (str "Schema error at " schema-id)})}
+                            (with-clear-schema-error schema-id validate-input f)))
+       (catch js/Error e
+         (log/error "Failed to instrument function"
+                    {:schema-id schema-id
+                     :error     e
+                     :function  f})
+         f))
+     f)))
@@ -0,0 +1,26 @@
+(ns schema.registry
+  (:refer-clojure :exclude [merge])
+  (:require
+    [malli.core :as malli]
+    malli.registry))
+
+(defonce ^:private registry
+  (atom (malli/default-schemas)))
+
+(defn init-global-registry
+  []
+  (malli.registry/set-default-registry! (malli.registry/mutable-registry registry)))
+
+(defn register
+  "Defines a new schema in mutable `registry`.
+
+  We normalize `?schema` by always registering it as a proper instance of
+  `malli.core/Schema` to avoid inconsistencies down the road."
+  [type ?schema]
+  (swap! registry assoc type (malli/schema ?schema))
+  ?schema)
+
+(defn merge
+  [& schemas]
+  (apply swap! registry cljs.core/merge schemas)
+  schemas)
@@ -0,0 +1,11 @@
+(ns schema.state
+  (:require [reagent.core :as reagent]))
+
+(def errors
+  "Set of schema identifiers, usually namespaced keywords. When the set is empty,
+  no schema errors will be displayed on the app. See `schema.view/view`."
+  (reagent/atom #{}))
+
+(defn clear-errors
+  []
+  (reset! errors #{}))
@@ -0,0 +1,28 @@
+(ns schema.style)
+
+(defn container
+  [{:keys [bottom-inset]}]
+  {:align-items               :center
+   :flex-direction            :row
+   :background-color          "#cc0000"
+   :border-bottom-left-radius 8
+   :border-top-left-radius    8
+   :justify-content           :center
+   :padding-vertical          6
+   :padding-right             16
+   :position                  :absolute
+   :bottom                    (+ 12 bottom-inset)
+   :right                     0
+   :z-index                   10000000})
+
+(def icon
+  {:margin-horizontal 8})
+
+(def text
+  {:font-family "Inter-SemiBold"
+   :font-size   13
+   :color       "#ddd"})
+
+(def text-suffix
+  {:font-style :italic
+   :font-size  9})
@@ -0,0 +1,18 @@
+(ns schema.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
+    schema.state
+    [schema.style :as style]))
+
+(defn view
+  []
+  (when (seq @schema.state/errors)
+    [rn/pressable
+     {:on-press schema.state/clear-errors
+      :style    (style/container {:bottom-inset (safe-area/get-bottom)})}
+     [quo/icon :i/close {:size 12 :color "#ddd" :container-style style/icon}]
+     [rn/text {:style style/text}
+      "Schema error(s)"
+      [rn/text {:style (merge style/text style/text-suffix)} " check logs"]]]))
@@ -107,14 +107,15 @@
  [{:keys [db] :as cofx} message]
  (let [current-chat-id (:current-chat-id db)
        text            (get-in message [:content :text])]
-    {:db       (-> db
-                   (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
-                             message)
-                   (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
-                   (update-in [:chat/inputs current-chat-id :metadata]
-                              dissoc
-                              :sending-image))
-     :dispatch [:mention/to-input-field text current-chat-id]}))
+    {:db         (-> db
+                     (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
+                               message)
+                     (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
+                     (update-in [:chat/inputs current-chat-id :metadata]
+                                dissoc
+                                :sending-image))
+     :dispatch-n [[:chat.ui/set-chat-input-text nil current-chat-id]
+                  [:mention/to-input-field text current-chat-id]]}))

 (rf/defn show-contact-request-input
  "Sets reference to previous chat message and focuses on input"
@@ -8,6 +8,7 @@
    status-im.subs.root
    status-im2.setup.i18n-resources
    [status-im2.setup.interceptors :as interceptors]
+    [status-im2.setup.schema :as schema]
    status-im2.subs.root
    [utils.re-frame :as rf]))

@@ -118,6 +119,7 @@
  [& args]
  (reset-test-data!)
  (interceptors/register-global-interceptors)
+  (schema/setup!)
  (rf/set-mergeable-keys #{:filters/load-filters
                           :pairing/set-installation-metadata
                           :dispatch-n
@@ -225,7 +225,9 @@
                                                                         (.. ^js % -nativeEvent -data)])
        :on-load                                    #(re-frame/dispatch [:browser/loading-started])
        :on-error                                   #(re-frame/dispatch [:browser/error-occured])
-        :injected-java-script-before-content-loaded (js-res/ethereum-provider (str network-id))}])]
+        :injected-java-script-before-content-loaded (js-res/ethereum-provider (str network-id))
+        ;; https://github.com/status-im/status-mobile/issues/17854
+        :allows-inline-media-playback               true}])]
   [navigation
    {:url             url-original
     :name            name
@@ -131,6 +131,13 @@
         :accessibility-label :appearance-settings-button
         :chevron             true
         :on-press            #(re-frame/dispatch [:navigate-to :quo-preview])}])
+     (when config/quo-preview-enabled?
+       [list.item/list-item
+        {:icon                :main-icons/appearance
+         :title               "Status IM Components"
+         :accessibility-label :status-im-common-components
+         :chevron             true
+         :on-press            #(re-frame/dispatch [:navigate-to :status-im-preview])}])
     [list.item/list-item
      {:icon                :main-icons/appearance
       :title               (i18n/label :t/appearance)
@@ -15,6 +15,8 @@

 (def test-dir (.mkdtempSync fs test-dir-prefix))

+(def initialized? (atom false))
+
 (defn signal-received-callback
  [a]
  (re-frame/dispatch [:signals/signal-received a]))
@@ -22,10 +24,12 @@
 ;; We poll for signals, could not get callback working
 (defn init!
  []
-  (.setSignalEventCallback native-status)
-  (js/setInterval (fn []
-                    (.pollSignal native-status signal-received-callback)
-                    100)))
+  (when-not @initialized?
+    (.setSignalEventCallback native-status)
+    (reset! initialized? true)
+    (js/setInterval (fn []
+                      (.pollSignal native-status signal-received-callback)
+                      100))))

 (def status
  (clj->js
@@ -0,0 +1,32 @@
+(ns status-im2.common.floating-button-page.component-spec
+  (:require [quo.core :as quo]
+            [status-im2.common.floating-button-page.view :as floating-button-page]
+            [test-helpers.component :as h]))
+
+(h/describe "floating button page"
+  (h/test "renders with a header and standard button"
+    (h/render [floating-button-page/view
+               {:header [quo/page-nav
+                         {:type        :title-description
+                          :title       "floating button page"
+                          :description "press right icon to swap button type"
+                          :text-align  :left
+                          :background  :blur
+                          :icon-name   :i/close}]
+                :footer [quo/button {} "continue"]}])
+    (h/is-truthy (h/get-by-text "continue"))
+    (h/is-truthy (h/get-by-text "floating button page")))
+
+  (h/test "renders with a header and a slide button"
+    (h/render [floating-button-page/view
+               {:header [quo/page-nav
+                         {:type        :title-description
+                          :title       "floating button page"
+                          :description "press right icon to swap button type"
+                          :text-align  :left
+                          :background  :blur
+                          :icon-name   :i/close}]
+                :footer [quo/slide-button
+                         {:track-text "We gotta slide"
+                          :track-icon :face-id}]}])
+    (h/is-truthy (h/get-by-text "We gotta slide"))))
@@ -0,0 +1,17 @@
+(ns status-im2.common.floating-button-page.floating-container.style
+  (:require [react-native.safe-area :as safe-area]))
+
+(defn content-container
+  [blur? keyboard-shown?]
+  (let [margin-bottom (if keyboard-shown? 0 (safe-area/get-bottom))]
+    (cond-> {:margin-top         :auto
+             :overflow           :hidden
+             :margin-bottom      margin-bottom
+             :padding-vertical   12
+             :padding-horizontal 20}
+      blur? (dissoc :padding-vertical :padding-horizontal))))
+
+(def blur-inner-container
+  {:background-color   :transparent ; required, otherwise blur-view will shrink
+   :padding-vertical   12
+   :padding-horizontal 20})
@@ -0,0 +1,25 @@
+(ns status-im2.common.floating-button-page.floating-container.view
+  (:require [quo.theme :as quo.theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
+            [status-im2.common.floating-button-page.floating-container.style :as style]))
+
+(defn- blur-container
+  [child theme]
+  [blur/view
+   {:blur-amount 12
+    :blur-radius 12
+    :blur-type   (quo.theme/theme-value :light :dark theme)}
+   [rn/view {:style style/blur-inner-container}
+    child]])
+
+(defn view-internal
+  [{:keys [theme on-layout keyboard-shown? blur?]} child]
+  [rn/view
+   {:style     (style/content-container blur? keyboard-shown?)
+    :on-layout on-layout}
+   (if blur?
+     [blur-container child theme]
+     child)])
+
+(def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,15 @@
+(ns status-im2.common.floating-button-page.style)
+
+(def page-container
+  {:position :absolute
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})
+
+(def keyboard-avoiding-view
+  {:position :absolute
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})
@@ -0,0 +1,102 @@
+(ns status-im2.common.floating-button-page.view
+  (:require
+    [oops.core :as oops]
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im2.common.floating-button-page.floating-container.view :as floating-container]
+    [status-im2.common.floating-button-page.style :as style]))
+
+(defn- show-background
+  [{:keys [window-height keyboard-height footer-container-height content-scroll-y
+           content-container-height header-height keyboard-shown?]}]
+  (let [available-space    (- window-height
+                              (safe-area/get-top)
+                              header-height
+                              keyboard-height ; Already contains the bottom safe area value
+                              footer-container-height)
+        scroll-view-height (- content-container-height content-scroll-y)
+        overlap?           (< available-space scroll-view-height)]
+    (and keyboard-shown? overlap?)))
+
+(defn- set-height-on-layout
+  [ratom]
+  (fn [event]
+    (let [height (oops/oget event "nativeEvent.layout.height")]
+      (reset! ratom height))))
+
+(defn- init-keyboard-listeners
+  [{:keys [on-did-show]}]
+  (let [keyboard-will-show? (reagent/atom false)
+        keyboard-did-show?  (reagent/atom false)
+        add-listener        (fn [listener callback]
+                              (oops/ocall rn/keyboard "addListener" listener callback))
+        will-show-listener  (add-listener "keyboardWillShow"
+                                          #(reset! keyboard-will-show? true))
+        did-show-listener   (add-listener "keyboardDidShow"
+                                          (fn [e]
+                                            (reset! keyboard-did-show? true)
+                                            (when on-did-show (on-did-show e))))
+        will-hide-listener  (add-listener "keyboardWillHide"
+                                          #(reset! keyboard-will-show? false))
+        did-hide-listener   (add-listener "keyboardDidHide"
+                                          #(reset! keyboard-did-show? false))
+        remove-listeners    (fn []
+                              (doseq [listener [will-show-listener will-hide-listener
+                                                did-show-listener did-hide-listener]]
+                                (oops/ocall listener "remove")))]
+    {:keyboard-will-show? keyboard-will-show?
+     :keyboard-did-show?  keyboard-did-show?
+     :remove-listeners    remove-listeners}))
+
+(defn view
+  [{:keys [header footer]} & children]
+  (reagent/with-let [window-height                (:height (rn/get-window))
+                     footer-container-height      (reagent/atom 0)
+                     header-height                (reagent/atom 0)
+                     content-container-height     (reagent/atom 0)
+                     content-scroll-y             (reagent/atom 0)
+                     keyboard-height              (reagent/atom 0)
+                     {:keys [keyboard-will-show?
+                             keyboard-did-show?
+                             remove-listeners]}   (init-keyboard-listeners
+                                                   {:on-did-show
+                                                    (fn [e]
+                                                      (reset! keyboard-height
+                                                        (oops/oget e "endCoordinates.height")))})
+                     set-header-height            (set-height-on-layout header-height)
+                     set-content-container-height (set-height-on-layout content-container-height)
+                     set-footer-container-height  (set-height-on-layout footer-container-height)
+                     set-content-y-scroll         (fn [event]
+                                                    (reset! content-scroll-y
+                                                      (oops/oget event "nativeEvent.contentOffset.y")))]
+    (let [keyboard-shown?  (if platform/ios? @keyboard-will-show? @keyboard-did-show?)
+          show-background? (show-background {:window-height            window-height
+                                             :footer-container-height  @footer-container-height
+                                             :keyboard-height          @keyboard-height
+                                             :content-scroll-y         @content-scroll-y
+                                             :content-container-height @content-container-height
+                                             :header-height            @header-height
+                                             :keyboard-shown?          keyboard-shown?})]
+
+      [rn/view {:style style/page-container}
+       [rn/view {:on-layout set-header-height}
+        header]
+       [rn/scroll-view
+        {:on-scroll               set-content-y-scroll
+         :scroll-event-throttle   64
+         :content-container-style {:flex-grow 1}}
+        (into [rn/view {:on-layout set-content-container-height}]
+              children)]
+       [rn/keyboard-avoiding-view
+        {:style                    style/keyboard-avoiding-view
+         :keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
+         :pointer-events           :box-none}
+        [floating-container/view
+         {:on-layout       set-footer-container-height
+          :keyboard-shown? keyboard-shown?
+          :blur?           show-background?}
+         footer]]])
+    (finally
+     (remove-listeners))))
@@ -31,10 +31,10 @@
           :on-change-text #(reset! entered-password %)}]
         (when (not-empty error)
           [quo/info-message
-            {:type  :error
-             :size  :default
-             :icon  :i/info
-             :style {:margin-top 8}}
+            {:type         :error
+             :size         :default
+             :icon         :i/info
+             :containstyle {:margin-top 8}}
            (i18n/label :t/oops-wrong-password)])
         [quo/button
          {:container-style {:margin-bottom 12 :margin-top 40}
@@ -79,7 +79,19 @@
    :dark  (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")}
   :no-notifications
   {:light (js/require "../resources/images/ui2/no-notifications-light.png")
-    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}})
+    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}
+   :no-activity
+   {:light (js/require "../resources/images/ui2/no-activity-light.png")
+    :dark  (js/require "../resources/images/ui2/no-activity-dark.png")}
+   :no-collectibles
+   {:light (js/require "../resources/images/ui2/no-collectibles-light.png")
+    :dark  (js/require "../resources/images/ui2/no-collectibles-dark.png")}
+   :no-dapps
+   {:light (js/require "../resources/images/ui2/no-dapps-light.png")
+    :dark  (js/require "../resources/images/ui2/no-dapps-dark.png")}
+   :no-permissions
+   {:light (js/require "../resources/images/ui2/no-permissions-light.png")
+    :dark  (js/require "../resources/images/ui2/no-permissions-dark.png")}})

 (def mock-images
  {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")
@@ -0,0 +1,7 @@
+(ns status-im2.common.standard-authentication.core
+  (:require
+    status-im2.common.standard-authentication.standard-auth.button.view
+    status-im2.common.standard-authentication.standard-auth.slide-button.view))
+
+(def button status-im2.common.standard-authentication.standard-auth.button.view/view)
+(def slide-button status-im2.common.standard-authentication.standard-auth.slide-button.view/view)
@@ -1,10 +1,6 @@
-(ns status-im2.common.standard-authentication.standard-auth.view
+(ns status-im2.common.standard-authentication.standard-auth.authorize
  (:require
-    [quo.core :as quo]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]
    [react-native.touch-id :as biometric]
-    [reagent.core :as reagent]
    [status-im2.common.standard-authentication.enter-password.view :as enter-password]
    [taoensso.timbre :as log]
    [utils.i18n :as i18n]
@@ -46,39 +42,3 @@
                                     {:on-enter-password on-enter-password
                                      :button-icon-left  auth-button-icon-left
                                      :button-label      auth-button-label}])}]))))))
-
-(defn- view-internal
-  [_]
-  (let [reset-slider? (reagent/atom false)
-        on-close      #(reset! reset-slider? true)]
-    (fn [{:keys [biometric-auth?
-                 track-text
-                 customization-color
-                 auth-button-label
-                 on-enter-password
-                 on-auth-success
-                 on-auth-fail
-                 auth-button-icon-left
-                 size
-                 theme
-                 blur?
-                 container-style]}]
-      [rn/view {:style {:flex 1}}
-       [quo/slide-button
-        {:size                size
-         :container-style     container-style
-         :customization-color customization-color
-         :on-reset            (when @reset-slider? #(reset! reset-slider? false))
-         :on-complete         #(authorize {:on-close              on-close
-                                           :auth-button-icon-left auth-button-icon-left
-                                           :theme                 theme
-                                           :blur?                 blur?
-                                           :on-enter-password     on-enter-password
-                                           :biometric-auth?       biometric-auth?
-                                           :on-auth-success       on-auth-success
-                                           :on-auth-fail          on-auth-fail
-                                           :auth-button-label     auth-button-label})
-         :track-icon          (if biometric-auth? :i/face-id :password)
-         :track-text          track-text}]])))
-
-(def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,44 @@
+(ns status-im2.common.standard-authentication.standard-auth.button.view
+  (:require
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
+    [reagent.core :as reagent]
+    [status-im2.common.standard-authentication.standard-auth.authorize :as authorize]))
+
+(defn- view-internal
+  [_]
+  (let [reset-slider? (reagent/atom false)
+        on-close      #(reset! reset-slider? true)]
+    (fn [{:keys [biometric-auth?
+                 customization-color
+                 auth-button-label
+                 on-enter-password
+                 on-auth-success
+                 on-press
+                 on-auth-fail
+                 auth-button-icon-left
+                 size
+                 button-label
+                 theme
+                 blur?
+                 container-style
+                 icon-left]}]
+      [quo/button
+       {:size                size
+        :container-style     container-style
+        :customization-color customization-color
+        :icon-left           icon-left
+        :on-press            (if on-press
+                               on-press
+                               #(authorize/authorize {:on-close              on-close
+                                                      :auth-button-icon-left auth-button-icon-left
+                                                      :theme                 theme
+                                                      :blur?                 blur?
+                                                      :on-enter-password     on-enter-password
+                                                      :biometric-auth?       biometric-auth?
+                                                      :on-auth-success       on-auth-success
+                                                      :on-auth-fail          on-auth-fail
+                                                      :auth-button-label     auth-button-label}))}
+       button-label])))
+
+(def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,43 @@
+(ns status-im2.common.standard-authentication.standard-auth.slide-button.view
+  (:require
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.common.standard-authentication.standard-auth.authorize :as authorize]))
+
+(defn- view-internal
+  [_]
+  (let [reset-slider? (reagent/atom false)
+        on-close      #(reset! reset-slider? true)]
+    (fn [{:keys [biometric-auth?
+                 track-text
+                 customization-color
+                 auth-button-label
+                 on-enter-password
+                 on-auth-success
+                 on-auth-fail
+                 auth-button-icon-left
+                 size
+                 theme
+                 blur?
+                 container-style]}]
+      [rn/view {:style {:flex 1}}
+       [quo/slide-button
+        {:size                size
+         :container-style     container-style
+         :customization-color customization-color
+         :on-reset            (when @reset-slider? #(reset! reset-slider? false))
+         :on-complete         #(authorize/authorize {:on-close              on-close
+                                                     :auth-button-icon-left auth-button-icon-left
+                                                     :theme                 theme
+                                                     :blur?                 blur?
+                                                     :on-enter-password     on-enter-password
+                                                     :biometric-auth?       biometric-auth?
+                                                     :on-auth-success       on-auth-success
+                                                     :on-auth-fail          on-auth-fail
+                                                     :auth-button-label     auth-button-label})
+         :track-icon          (if biometric-auth? :i/face-id :password)
+         :track-text          track-text}]])))
+
+(def view (quo.theme/with-theme view-internal))
@@ -11,7 +11,7 @@
    [utils.re-frame :as rf]))

 (defn edit-message
-  [state]
+  [{:keys [text-value input-ref]}]
  [rn/view
   {:style               style/container
    :accessibility-label :edit-message}
@@ -30,20 +30,18 @@
    {:size                24
     :icon-only?          true
     :accessibility-label :edit-cancel-button
-     :on-press            (fn []
-                            (utils/cancel-edit-message state)
-                            (rf/dispatch [:chat.ui/cancel-message-edit]))
+     :on-press            #(utils/cancel-edit-message text-value input-ref)
     :type                :outline}
    :i/close]])

 (defn- f-view
-  [state]
+  [props]
  (let [edit   (rf/sub [:chats/edit-message])
        height (reanimated/use-shared-value (if edit constants/edit-container-height 0))]
    (rn/use-effect #(reanimated/animate height (if edit constants/edit-container-height 0)) [edit])
    [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})}
-     (when edit [edit-message state])]))
+     (when edit [edit-message props])]))

 (defn view
-  [state]
-  [:f> f-view state])
+  [props]
+  [:f> f-view props])
@@ -6,6 +6,7 @@
    [react-native.core :as rn]
    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
+    [reagent.core :as reagent]
    [status-im2.contexts.chat.composer.constants :as constants]
    [status-im2.contexts.chat.composer.keyboard :as kb]
    [status-im2.contexts.chat.composer.utils :as utils]
@@ -105,53 +106,62 @@

 (defn use-edit
  [{:keys [input-ref]}
-   {:keys [text-value saved-cursor-position]}
-   {:keys [edit]}]
-  (rn/use-effect
-   (fn []
-     (let [edit-text        (get-in edit [:content :text])
-           text-value-count (count @text-value)]
-       (when (and edit @input-ref)
-         ;; A small setTimeout is necessary to ensure the statement is enqueued and will get executed
-         ;; ASAP.
-         ;; https://github.com/software-mansion/react-native-screens/issues/472
-         (js/setTimeout #(.focus ^js @input-ref) 250)
-         (.setNativeProps ^js @input-ref (clj->js {:text edit-text}))
-         (reset! text-value edit-text)
-         (reset! saved-cursor-position (if (zero? text-value-count)
-                                         (count edit-text)
-                                         text-value-count)))))
-   [(:message-id edit)]))
+   {:keys [text-value saved-cursor-position cursor-position]}
+   {:keys [edit input-with-mentions]}
+   messages-list-on-layout-finished?]
+  (let [mention?              (some #(= :mention (first %)) (seq input-with-mentions))
+        composer-just-opened? (not @messages-list-on-layout-finished?)]
+    (rn/use-effect
+     (fn []
+       (let [mention-text     (reduce (fn [acc item]
+                                        (str acc (second item)))
+                                      ""
+                                      input-with-mentions)
+             edit-text        (cond
+                                mention? mention-text
+                                ;; NOTE: using text-value for cases when the user
+                                ;; leaves the app with an unfinished edit and re-opens
+                                ;; the chat.
+                                (and (seq @text-value) composer-just-opened?)
+                                @text-value
+                                :else (get-in edit [:content :text]))
+             selection-pos    (count edit-text)
+             inject-edit-text (fn []
+                                (reset! text-value edit-text)
+                                (reset! cursor-position selection-pos)
+                                (reset! saved-cursor-position selection-pos)
+                                (when @input-ref
+                                  (.setNativeProps ^js @input-ref
+                                                   (clj->js {:text edit-text}))))]
+
+         (when (and edit @input-ref)
+           ;; NOTE: A small setTimeout is necessary to ensure the focus is enqueued and is executed
+           ;; ASAP. Check https://github.com/software-mansion/react-native-screens/issues/472
+           ;;
+           ;; The nested setTimeout is necessary to avoid both `on-focus` and
+           ;; `on-content-size-change` handlers triggering the height animation simultaneously, as
+           ;; this causes a jump in the
+           ;; UI. This way, `on-focus` will trigger first without changing the height, after which
+           ;; `on-content-size-change` will animate the height of the input based on the injected
+           ;; text.
+           (js/setTimeout #(do (when @messages-list-on-layout-finished? (.focus ^js @input-ref))
+                               (reagent/next-tick inject-edit-text))
+                          600))))
+     [(:message-id edit)])))

 (defn use-reply
  [{:keys [input-ref]}
   {:keys [container-opacity]}
-   {:keys [reply]}]
+   {:keys [reply]}
+   messages-list-on-layout-finished?]
  (rn/use-effect
   (fn []
     (when reply
       (reanimated/animate container-opacity 1))
-     (when (and reply @input-ref)
-       (js/setTimeout #(.focus ^js @input-ref) 250)))
+     (when (and reply @input-ref @messages-list-on-layout-finished?)
+       (js/setTimeout #(.focus ^js @input-ref) 600)))
   [(:message-id reply)]))

-(defn edit-mentions
-  [{:keys [input-ref]} {:keys [text-value cursor-position]} {:keys [input-with-mentions]}]
-  (rn/use-effect (fn []
-                   (let [input-text (reduce (fn [acc item]
-                                              (str acc (second item)))
-                                            ""
-                                            input-with-mentions)]
-                     (reset! text-value input-text)
-                     (reset! cursor-position (count input-text))
-                     (js/setTimeout #(when @input-ref
-                                       (.setNativeProps ^js @input-ref
-                                                        (clj->js {:selection {:start (count input-text)
-                                                                              :end   (count
-                                                                                      input-text)}})))
-                                    300)))
-                 [(some #(= :mention (first %)) (seq input-with-mentions))]))
-
 (defn update-input-mention
  [{:keys [input-ref]}
   {:keys [text-value]}
@@ -43,8 +43,7 @@
    (reset! emoji-kb-extra-height nil))
  (reset! maximized? false)
  (rf/dispatch [:chat.ui/set-input-maximized false])
-  (when @input-ref
-    (.blur ^js @input-ref)))
+  (utils/blur-input input-ref))

 (defn bounce-back
  [{:keys [height saved-height opacity background-y]}
@@ -96,13 +95,13 @@
                                max-height
                                bounded-height
                                saved-height))
-                 (when @input-ref ; sheet at min-height, collapse keyboard
-                   (.blur ^js @input-ref)))))))
+                 ; sheet at min-height, collapse keyboard
+                 (utils/blur-input input-ref))))))
        (gesture/on-end (fn []
                          (let [diff (- (reanimated/get-shared-value height)
                                        (reanimated/get-shared-value saved-height))]
                            (if @gesture-enabled?
-                              (if (>= diff 0)
+                              (if (and @expanding? (>= diff 0))
                                (if (> diff constants/drag-threshold)
                                  (maximize state animations dimensions)
                                  (bounce-back animations dimensions starting-opacity))
@@ -23,12 +23,14 @@
   show-floating-scroll-down-button?]
  (reset! focused? true)
  (rf/dispatch [:chat.ui/set-input-focused true])
-  (reanimated/animate height (reanimated/get-shared-value last-height))
-  (reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height))
-  (reanimated/animate container-opacity 1)
-  (when (> (reanimated/get-shared-value last-height) (* constants/background-threshold max-height))
-    (reanimated/animate opacity 1)
-    (reanimated/set-shared-value background-y 0))
+  (let [last-height-value (reanimated/get-shared-value last-height)]
+    (reanimated/animate height last-height-value)
+    (reanimated/set-shared-value saved-height last-height-value)
+    (reanimated/animate container-opacity 1)
+    (when (> last-height-value (* constants/background-threshold max-height))
+      (reanimated/animate opacity 1)
+      (reanimated/set-shared-value background-y 0)))
+
  (js/setTimeout #(reset! lock-selection? false) 300)
  (when (and (not-empty @text-value) @input-ref)
    (.setNativeProps ^js @input-ref
@@ -72,7 +74,7 @@
  "Save new text height, expand composer if possible, show background overlay if needed"
  [event
   {:keys [maximized? lock-layout? text-value]}
-   {:keys [height saved-height opacity background-y]}
+   {:keys [height saved-height last-height opacity background-y]}
   {:keys [content-height window-height max-height]}
   keyboard-shown]
  (when keyboard-shown
@@ -87,8 +89,9 @@
                                                    max-height)
          new-height   (min new-height max-height)]
      (reset! content-height content-size)
-      (when (utils/update-height? content-size height max-height maximized?)
+      (when (utils/update-height? content-size height max-height)
        (reanimated/animate height new-height)
+        (reanimated/set-shared-value last-height new-height)
        (reanimated/set-shared-value saved-height new-height))
      (when (= new-height max-height)
        (reset! maximized? true)
@@ -4,7 +4,8 @@
    [react-native.async-storage :as async-storage]
    [react-native.core :as rn]
    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]))
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.composer.utils :as utils]))

 (defn get-kb-height
  [curr-height default-height]
@@ -20,18 +21,24 @@
      (async-storage/set-item! :kb-default-height (str height)))))

 (defn handle-emoji-kb-ios
-  "Opening emoji KB on iOS while maximized will cause a flicker up and down. This method handles that."
+  "Opening emoji KB on iOS will cause a flicker up and down due to height differences.
+  This method handles that by adding the extra difference between the keyboards. When the input is
+  expanded to a point where the added difference will make the composer go beyond the screen causing a flicker,
+  we're subtracting the difference so it only reaches the allowed max-height. We're not animating these
+  changes to make it appear seamless during transitions between keyboard types when maximized."
  [event
   {:keys [emoji-kb-extra-height]}
-   {:keys [text-value]}
+   {:keys [text-value kb-height]}
   {:keys [height saved-height]}
   {:keys [max-height]}]
-  (let [start-h         (oops/oget event "startCoordinates.height")
-        end-h           (oops/oget event "endCoordinates.height")
-        diff            (- end-h start-h)
-        max-height-diff (- max-height diff)
-        curr-text       @text-value]
-    (if (> (reanimated/get-shared-value height) max-height-diff)
+  (let [start-h                 (oops/oget event "startCoordinates.height")
+        end-h                   (oops/oget event "endCoordinates.height")
+        diff                    (- end-h start-h)
+        max-height-diff         (- max-height diff)
+        curr-text               @text-value
+        bigger-than-default-kb? (> end-h @kb-height)
+        almost-expanded?        (> (reanimated/get-shared-value height) max-height-diff)]
+    (if (and almost-expanded? bigger-than-default-kb? (pos? diff))
      (do
        (reanimated/set-shared-value height (- (reanimated/get-shared-value height) diff))
        (reanimated/set-shared-value saved-height (- (reanimated/get-shared-value saved-height) diff))
@@ -58,8 +65,8 @@
                                   #(handle-emoji-kb-ios % props state animations dimensions)))
  (reset! keyboard-hide-listener (.addListener rn/keyboard
                                               "keyboardDidHide"
-                                               #(when (and platform/android? @input-ref)
-                                                  (.blur ^js @input-ref)))))
+                                               #(when platform/android?
+                                                  (utils/blur-input input-ref)))))

 (defn handle-refocus-emoji-kb-ios
  [{:keys [saved-emoji-kb-extra-height]}
@@ -9,6 +9,7 @@
    [status-im2.constants :as constant]
    [status-im2.contexts.chat.composer.constants :as constants]
    [status-im2.contexts.chat.composer.reply.style :as style]
+    [status-im2.contexts.chat.composer.utils :as utils]
    [utils.ens.stateofus :as stateofus]
    [utils.i18n :as i18n]
    [utils.re-frame :as rf]))
@@ -85,7 +86,7 @@
 (defn quoted-message
  [{:keys [from content-type contentType parsed-text content deleted? deleted-for-me?
           album-images-count]}
-   in-chat-input? pin? recording-audio?]
+   in-chat-input? pin? recording-audio? input-ref]
  (let [[primary-name _]   (rf/sub [:contacts/contact-two-names-by-identity from])
        current-public-key (rf/sub [:multiaccount/public-key])
        content-type       (or content-type contentType)
@@ -136,7 +137,7 @@
        {:icon-only?          true
         :size                24
         :accessibility-label :reply-cancel-button
-         :on-press            #(rf/dispatch [:chat.ui/cancel-message-reply])
+         :on-press            #(utils/cancel-reply-message input-ref)
         :type                :outline}
        :i/close])
     (when (and in-chat-input? recording-audio?)
@@ -148,13 +149,13 @@
         :style  style/gradient}])]))

 (defn- f-view
-  [recording?]
+  [recording? input-ref]
  (let [reply  (rf/sub [:chats/reply-message])
        height (reanimated/use-shared-value (if reply constants/reply-container-height 0))]
    (rn/use-effect #(reanimated/animate height (if reply constants/reply-container-height 0)) [reply])
    [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})}
-     (when reply [quoted-message reply true false recording?])]))
+     (when reply [quoted-message reply true false recording? input-ref])]))

 (defn view
-  [{:keys [recording?]}]
-  [:f> f-view @recording?])
+  [{:keys [recording?]} input-ref]
+  [:f> f-view @recording? input-ref])
@@ -16,11 +16,10 @@
  (max min-v (min v max-v)))

 (defn update-height?
-  [content-size height max-height maximized?]
-  (when-not @maximized?
-    (let [diff (Math/abs (- content-size (reanimated/get-shared-value height)))]
-      (and (not= (reanimated/get-shared-value height) max-height)
-           (> diff constants/content-change-threshold)))))
+  [content-size height max-height]
+  (let [diff (Math/abs (- content-size (reanimated/get-shared-value height)))]
+    (and (not= (reanimated/get-shared-value height) max-height)
+         (> diff constants/content-change-threshold))))

 (defn show-top-gradient?
  [y lines max-lines gradient-opacity focused?]
@@ -100,10 +99,28 @@
       (not reply?)
       (not audio?)))

+(defn blur-input
+  [input-ref]
+  (when @input-ref
+    (rf/dispatch [:chat.ui/set-input-focused false])
+    (.blur ^js @input-ref)))
+
+(defn cancel-reply-message
+  [input-ref]
+  (js/setTimeout #(blur-input input-ref) 100)
+  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height])
+  (rf/dispatch [:chat.ui/cancel-message-reply]))
+
 (defn cancel-edit-message
-  [{:keys [text-value]}]
+  [text-value input-ref]
  (reset! text-value "")
-  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height]))
+  ;; NOTE: adding a timeout to assure the input is blurred on the next tick
+  ;; after the `text-value` was cleared. Otherwise the height will be calculated
+  ;; with the old `text-value`, leading to wrong composer height after blur.
+  (js/setTimeout #(blur-input input-ref) 100)
+  (.setNativeProps ^js @input-ref (clj->js {:text ""}))
+  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height])
+  (rf/dispatch [:chat.ui/cancel-message-edit]))

 (defn count-lines
  [s]
@@ -33,7 +33,8 @@
           blur-height
           opacity
           background-y
-           theme]} props state]
+           theme
+           messages-list-on-layout-finished?]} props state]
  (let [{:keys [chat-screen-loaded?]
         :as   subscriptions}    (utils/init-subs)
        content-height           (reagent/atom (or (:input-content-height ; Actual text height
@@ -73,10 +74,9 @@
                        animations
                        dimensions
                        subscriptions)
-    (effects/use-edit props state subscriptions)
-    (effects/use-reply props animations subscriptions)
+    (effects/use-edit props state subscriptions messages-list-on-layout-finished?)
+    (effects/use-reply props animations subscriptions messages-list-on-layout-finished?)
    (effects/update-input-mention props state subscriptions)
-    (effects/edit-mentions props state subscriptions)
    (effects/link-previews props state animations subscriptions)
    (effects/use-images props state animations subscriptions)
    [:<>
@@ -98,8 +98,10 @@
        [sub-view/bar]
        (when chat-screen-loaded?
          [:<>
-           [reply/view state]
-           [edit/view state]])
+           [reply/view state (:input-ref props)]
+           [edit/view
+            {:text-value (:text-value state)
+             :input-ref  (:input-ref props)}]])
        [reanimated/touchable-opacity
         {:active-opacity      1
          :on-press            (fn []
@@ -147,11 +149,13 @@
         subscriptions]]]]]))

 (defn composer
-  [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}]
+  [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?
+           messages-list-on-layout-finished?]}]
  (let [window-height (:height (rn/get-window))
        theme         (quo.theme/use-theme-value)
        opacity       (reanimated/use-shared-value 0)
-        background-y  (reanimated/use-shared-value (- window-height)) ; Y position of background overlay
+        background-y  (reanimated/use-shared-value (- window-height)) ; Y position of background
+                                                                      ; overlay
        blur-height   (reanimated/use-shared-value (+ constants/composer-default-height
                                                      (:bottom insets)))
        extra-params  {:insets                            insets
@@ -161,7 +165,8 @@
                       :blur-height                       blur-height
                       :opacity                           opacity
                       :background-y                      background-y
-                       :theme                             theme}
+                       :theme                             theme
+                       :messages-list-on-layout-finished? messages-list-on-layout-finished?}
        props         (utils/init-non-reactive-state)
        state         (utils/init-reactive-state)]
    [rn/view (when platform/ios? {:style {:z-index 1}})
@@ -298,7 +298,7 @@

 (defn f-messages-list-content
  [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms
-           big-name-visible? animate-topbar-opacity? composer-active?
+           big-name-visible? animate-topbar-opacity? composer-active? messages-list-on-layout-finished?
           on-end-reached? animate-topbar-name?]}]
  (rn/use-effect (fn []
                   (if (and (not @on-end-reached?)
@@ -412,6 +412,15 @@
       ;;TODO(rasom) https://github.com/facebook/react-native/issues/30034
       :inverted                          (when platform/ios? true)
       :on-layout                         (fn [e]
+                                            ;; FIXME: the 1s timeout is to assure all effects with
+                                            ;; timeouts that depend on the value are considered.
+                                            ;; Hacky, but we're heavily relying on timeouts in the
+                                            ;; composer and need to react to differently (e.g.
+                                            ;; inside effects/use-edit) when the chat has just
+                                            ;; opened and the subsequent times.
+                                            (js/setTimeout #(reset! messages-list-on-layout-finished?
+                                                              true)
+                                                           1000)
                                            (let [layout-height (oops/oget e
                                                                           "nativeEvent.layout.height")]
                                              (reset! messages-view-height layout-height)))
@@ -15,7 +15,7 @@

 (defn f-chat
  [{:keys [show-floating-scroll-down-button? animate-topbar-name?
-           big-name-visible? animate-topbar-opacity? on-end-reached?]
+           big-name-visible? animate-topbar-opacity? on-end-reached? messages-list-on-layout-finished?]
    :as   inner-state-atoms}]
  (let [insets                   (safe-area/get-insets)
        scroll-y                 (reanimated/use-shared-value 0)
@@ -53,18 +53,19 @@
      :keyboard-vertical-offset (- (:bottom insets))}

     [list.view/message-list-content-view
-      {:chat                    chat
-       :insets                  insets
-       :scroll-y                scroll-y
-       :content-height          content-height
-       :cover-bg-color          :turquoise
-       :keyboard-shown?         keyboard-shown
-       :inner-state-atoms       inner-state-atoms
-       :animate-topbar-name?    animate-topbar-name?
-       :big-name-visible?       big-name-visible?
-       :animate-topbar-opacity? animate-topbar-opacity?
-       :composer-active?        focused?
-       :on-end-reached?         on-end-reached?}]
+      {:chat                              chat
+       :insets                            insets
+       :scroll-y                          scroll-y
+       :content-height                    content-height
+       :cover-bg-color                    :turquoise
+       :keyboard-shown?                   keyboard-shown
+       :inner-state-atoms                 inner-state-atoms
+       :animate-topbar-name?              animate-topbar-name?
+       :big-name-visible?                 big-name-visible?
+       :animate-topbar-opacity?           animate-topbar-opacity?
+       :composer-active?                  focused?
+       :on-end-reached?                   on-end-reached?
+       :messages-list-on-layout-finished? messages-list-on-layout-finished?}]

     [messages.navigation/navigation-view
      {:scroll-y                scroll-y
@@ -86,7 +87,8 @@
         [:f> composer.view/composer
          {:insets                            insets
           :scroll-to-bottom-fn               list.view/scroll-to-bottom
-           :show-floating-scroll-down-button? show-floating-scroll-down-button?}]
+           :show-floating-scroll-down-button? show-floating-scroll-down-button?
+           :messages-list-on-layout-finished? messages-list-on-layout-finished?}]
         [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]))]))

 (defn chat
@@ -99,5 +101,6 @@
         :animate-topbar-name?              (reagent/atom false)
         :big-name-visible?                 (reagent/atom :initial-render)
         :animate-topbar-opacity?           (reagent/atom false)
-         :on-end-reached?                   (reagent/atom false)}]
+         :on-end-reached?                   (reagent/atom false)
+         :messages-list-on-layout-finished? (reagent/atom false)}]
    [:f> f-chat inner-state-atoms]))
@@ -42,26 +42,31 @@
                                               community-id %])
                    :on-error   #(log/error "failed to request to join community" community-id %)}]})

+(defn request-to-join
+  [{:keys [db]} [{:keys [community-id password]}]]
+  (let [pub-key             (get-in db [:profile/profile :public-key])
+        addresses-to-reveal []]
+    {:fx [[:json-rpc/call
+           [{:method     "wakuext_generateJoiningCommunityRequestsForSigning"
+             :params     [pub-key community-id addresses-to-reveal]
+             :on-success [:communities/sign-data community-id password]
+             :on-error   [:communities/requested-to-join-error community-id]}]]]}))
+
 ;; Event to be called to request to join a community.
 ;; This event will generate the data to be signed and then call the sign-data event.
 ;; This is the only event that should be called from the UI.
-(rf/reg-event-fx :communities/request-to-join
- (fn [{:keys [db]} [{:keys [community-id password]}]]
-   (let [pub-key             (get-in db [:profile/profile :public-key])
-         addresses-to-reveal []]
-     {:fx [[:json-rpc/call
-            [{:method     "wakuext_generateJoiningCommunityRequestsForSigning"
-              :params     [pub-key community-id addresses-to-reveal]
-              :on-success [:communities/sign-data community-id password]
-              :on-error   [:communities/requested-to-join-error community-id]}]]]})))
+(rf/reg-event-fx :communities/request-to-join request-to-join)

-(rf/reg-event-fx :communities/sign-data
- (fn [_ [community-id password sign-params]]
-   {:fx [[:json-rpc/call
-          [{:method     "wakuext_signData"
-            :params     [(map #(assoc % :password password) sign-params)]
-            :on-success [:communities/request-to-join-with-signatures community-id]
-            :on-error   [:communities/requested-to-join-error community-id]}]]]}))
+(defn sign-data
+  [_ [community-id password sign-params]]
+  (let [addresses-to-reveal (map :account sign-params)]
+    {:fx [[:json-rpc/call
+           [{:method     "wakuext_signData"
+             :params     [(map #(assoc % :password password) sign-params)]
+             :on-success [:communities/request-to-join-with-signatures community-id addresses-to-reveal]
+             :on-error   [:communities/requested-to-join-error community-id]}]]]}))
+
+(rf/reg-event-fx :communities/sign-data sign-data)

 (rf/reg-event-fx :communities/requested-to-join-error
 (fn [{:keys [db]} [community-id error]]
@@ -71,11 +76,19 @@
               :event        :communities/requested-to-join-error})
   {:db (assoc-in db [:password-authentication :error] error)}))

-(rf/reg-event-fx :communities/request-to-join-with-signatures
- (fn [_ [community-id signatures]]
-   {:fx [[:json-rpc/call
-          [{:method      "wakuext_requestToJoinCommunity"
-            :params      [{:communityId community-id :signatures signatures}]
-            :js-response true
-            :on-success  [:communities/requested-to-join]
-            :on-error    [:communities/requested-to-join-error community-id]}]]]}))
+(defn request-to-join-with-signatures
+  [_ [community-id addresses-to-reveal signatures]]
+  {:fx [[:json-rpc/call
+         [{:method      "wakuext_requestToJoinCommunity"
+           :params      [{:communityId       community-id
+                          :signatures        signatures
+                          :addressesToReveal addresses-to-reveal
+                          ;; NOTE: At least one airdrop address is required.
+                          ;; This is a temporary solution while the address
+                          ;; selection feature is not implemented in mobile.
+                          :airdropAddress    (first addresses-to-reveal)}]
+           :js-response true
+           :on-success  [:communities/requested-to-join]
+           :on-error    [:communities/requested-to-join-error community-id]}]]]})
+
+(rf/reg-event-fx :communities/request-to-join-with-signatures request-to-join-with-signatures)
@@ -0,0 +1,53 @@
+(ns status-im2.contexts.communities.overview.events-test
+  (:require [cljs.test :refer [deftest is]]
+            [native-module.core :as native-module]
+            [status-im2.contexts.communities.overview.events :as sut]))
+
+(def password (native-module/sha3 "password123"))
+(def community-id "0x99")
+(def account-pub-key "0x1")
+
+(deftest request-to-join-test
+  (let [cofx     {:db {:profile/profile {:public-key account-pub-key}}}
+        expected {:fx [[:json-rpc/call
+                        [{:method     "wakuext_generateJoiningCommunityRequestsForSigning"
+                          :params     [account-pub-key community-id []]
+                          :on-success [:communities/sign-data community-id password]
+                          :on-error   [:communities/requested-to-join-error community-id]}]]]}]
+    (is (= expected
+           (sut/request-to-join cofx
+                                [{:community-id community-id
+                                  :password     password}])))))
+
+(deftest sign-data-test
+  (let [cofx                {:db {}}
+        sign-params         [{:data "123" :account account-pub-key}
+                             {:data "456" :account "0x2"}]
+        addresses-to-reveal [account-pub-key "0x2"]
+        expected            {:fx
+                             [[:json-rpc/call
+                               [{:method     "wakuext_signData"
+                                 :params     [[{:data "123" :account account-pub-key :password password}
+                                               {:data "456" :account "0x2" :password password}]]
+                                 :on-success [:communities/request-to-join-with-signatures
+                                              community-id addresses-to-reveal]
+                                 :on-error   [:communities/requested-to-join-error community-id]}]]]}]
+    (is (= expected
+           (sut/sign-data cofx [community-id password sign-params])))))
+
+(deftest request-to-join-with-signatures-test
+  (let [cofx                {:db {}}
+        addresses-to-reveal [account-pub-key "0x2"]
+        signatures          ["11111" "222222"]
+        expected            {:fx [[:json-rpc/call
+                                   [{:method      "wakuext_requestToJoinCommunity"
+                                     :params      [{:communityId       community-id
+                                                    :signatures        signatures
+                                                    :addressesToReveal addresses-to-reveal
+                                                    :airdropAddress    "0x1"}]
+                                     :js-response true
+                                     :on-success  [:communities/requested-to-join]
+                                     :on-error    [:communities/requested-to-join-error
+                                                   community-id]}]]]}]
+    (is (= expected
+           (sut/request-to-join-with-signatures cofx [community-id addresses-to-reveal signatures])))))
@@ -255,7 +255,7 @@
 (defn community-content
  [community]
  (rf/dispatch [:communities/check-all-community-channels-permissions (:id community)])
-  (fn [{:keys [name description joined images tags color id] :as community}
+  (fn [{:keys [name description joined images tags color id token-permissions] :as community}
       pending?
       {:keys [on-category-layout
               collapsed?
@@ -273,12 +273,14 @@
            :last-item-style style/last-community-tag
            :container-style style/community-tag-container}])
        [join-community community pending?]]
-       [channel-list-component
-        {:on-category-layout              on-category-layout
-         :community-id                    id
-         :community-color                 color
-         :on-first-channel-height-changed on-first-channel-height-changed}
-        (add-handlers-to-categorized-chats id chats-by-category joined)]])))
+       (when (or (and (seq token-permissions) joined)
+                 (empty? token-permissions))
+         [channel-list-component
+          {:on-category-layout              on-category-layout
+           :community-id                    id
+           :community-color                 color
+           :on-first-channel-height-changed on-first-channel-height-changed}
+          (add-handlers-to-categorized-chats id chats-by-category joined)])])))

 (defn sticky-category-header
  [_]
@@ -1,15 +1,20 @@
 (ns status-im2.contexts.onboarding.enable-biometrics.view
  (:require
    [quo.core :as quo]
+    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [react-native.safe-area :as safe-area]
    [status-im2.common.biometric.events :as biometric]
    [status-im2.common.parallax.view :as parallax]
    [status-im2.common.parallax.whitelist :as whitelist]
    [status-im2.common.resources :as resources]
+    [status-im2.common.standard-authentication.core :as standard-auth]
    [status-im2.contexts.onboarding.enable-biometrics.style :as style]
+    [status-im2.navigation.state :as state]
    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.re-frame :as rf]
+    [utils.security.core :as security]))
+

 (defn page-title
  []
@@ -21,22 +26,39 @@
    :description-accessibility-label :enable-biometrics-sub-title}])

 (defn enable-biometrics-buttons
-  [insets]
+  [insets theme]
  (let [supported-biometric-type (rf/sub [:biometric/supported-type])
        bio-type-label           (biometric/get-label-by-type supported-biometric-type)
-        profile-color            (:color (rf/sub [:onboarding-2/profile]))]
+        profile-color            (or (:color (rf/sub [:onboarding-2/profile]))
+                                     (rf/sub [:profile/customization-color]))
+        syncing-results?         (= :syncing-results @state/root-id)]
    [rn/view {:style (style/buttons insets)}
-     [quo/button
-      {:accessibility-label :enable-biometrics-button
-       :on-press            #(rf/dispatch [:onboarding-2/enable-biometrics])
-       :icon-left           :i/face-id
-       :customization-color profile-color}
-      (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
+     [standard-auth/button
+      (merge
+       {:size                40
+        :accessibility-label :enable-biometrics-button
+        :icon-left           :i/face-id
+        :customization-color profile-color
+        :button-label        (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})}
+       (if syncing-results?
+         {:theme             theme
+          :blur?             true
+          :on-enter-password (fn [entered-password]
+                               (rf/dispatch
+                                [:onboarding-2/authenticate-enable-biometrics
+                                 (security/safe-unmask-data
+                                  entered-password)])
+                               (rf/dispatch [:hide-bottom-sheet]))
+          :auth-button-label (i18n/label :t/confirm)}
+         {:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])}))]
     [quo/button
      {:accessibility-label :maybe-later-button
       :background          :blur
       :type                :grey
-       :on-press            #(rf/dispatch [:onboarding-2/create-account-and-login])
+       :on-press            #(rf/dispatch (if syncing-results?
+                                            [:navigate-to-within-stack
+                                             [:enable-notifications :enable-biometrics]]
+                                            [:onboarding-2/create-account-and-login]))
       :container-style     {:margin-top 12}}
      (i18n/label :t/maybe-later)]]))

@@ -55,12 +77,19 @@
      :style       (style/page-illustration width)
      :source      (resources/get-image :biometrics)}]))

-(defn enable-biometrics
-  []
+(defn f-enable-biometrics
+  [{:keys [theme]}]
  (let [insets (safe-area/get-insets)]
    [rn/view {:style (style/page-container insets)}
     [page-title]
     (if whitelist/whitelisted?
       [enable-biometrics-parallax]
       [enable-biometrics-simple])
-     [enable-biometrics-buttons insets]]))
+     [enable-biometrics-buttons insets theme]]))
+
+
+(defn- internale-enable-biometrics
+  [params]
+  [:f> f-enable-biometrics params])
+
+(def view (quo.theme/with-theme internale-enable-biometrics))
@@ -51,7 +51,7 @@
     [quo/page-nav
      {:background :blur
       :icon-name  :i/arrow-left
-       :on-press   #(rf/dispatch [:navigate-back-within-stack :new-to-status])}]
+       :on-press   #(rf/dispatch [:navigate-back-within-stack :enable-biometrics])}]
     [page-title]
     [rn/view {:style style/page-illustration}
      [quo/text
@@ -35,11 +35,30 @@
  {:biometric/authenticate {:on-success #(rf/dispatch [:onboarding-2/biometrics-done])
                            :on-fail    #(rf/dispatch [:onboarding-2/biometrics-fail %])}})

+(rf/defn authenticate-enable-biometrics
+  {:events [:onboarding-2/authenticate-enable-biometrics]}
+  [{:keys [db]} password]
+  {:db                     (-> db
+                               (assoc-in [:onboarding-2/profile :password] password)
+                               (assoc-in [:onboarding-2/profile :syncing?] true))
+   :biometric/authenticate {:on-success #(rf/dispatch [:onboarding-2/biometrics-done])
+                            :on-fail    #(rf/dispatch [:onboarding-2/biometrics-fail %])}})
+
+(rf/defn navigate-to-enable-notifications
+  {:events [:onboarding-2/navigate-to-enable-notifications]}
+  [{:keys [db]}]
+  (let [key-uid (get-in db [:profile/profile :key-uid])]
+    {:db       (dissoc db :onboarding-2/profile)
+     :dispatch [:navigate-to-within-stack [:enable-notifications :enable-biometrics]]}))
+
 (rf/defn biometrics-done
  {:events [:onboarding-2/biometrics-done]}
  [{:keys [db]}]
-  {:db       (assoc-in db [:onboarding-2/profile :auth-method] constants/auth-method-biometric)
-   :dispatch [:onboarding-2/create-account-and-login]})
+  (let [syncing? (get-in db [:onboarding-2/profile :syncing?])]
+    {:db       (assoc-in db [:onboarding-2/profile :auth-method] constants/auth-method-biometric)
+     :dispatch (if syncing?
+                 [:onboarding-2/finalize-setup]
+                 [:onboarding-2/create-account-and-login])}))

 (rf/defn biometrics-fail
  {:events [:onboarding-2/biometrics-fail]}
@@ -83,6 +102,14 @@
                 [:navigate-to-within-stack [:enable-biometrics :new-to-status]]
                 [:onboarding-2/create-account-and-login])}))

+(rf/defn navigate-to-enable-biometrics
+  {:events [:onboarding-2/navigate-to-enable-biometrics]}
+  [{:keys [db]}]
+  (let [supported-type (:biometric/supported-type db)]
+    {:dispatch (if supported-type
+                 [:open-modal :enable-biometrics]
+                 [:open-modal :enable-notifications])}))
+
 (rf/defn seed-phrase-entered
  {:events [:onboarding-2/seed-phrase-entered]}
  [_ seed-phrase on-error]
@@ -120,6 +147,7 @@
  [{:keys [db]}]
  (let [masked-password    (get-in db [:onboarding-2/profile :password])
        key-uid            (get-in db [:profile/profile :key-uid])
+        syncing?           (get-in db [:onboarding-2/profile :syncing?])
        biometric-enabled? (= (get-in db [:onboarding-2/profile :auth-method])
                              constants/auth-method-biometric)]
    (cond-> {:db (assoc db :onboarding-2/generated-keys? true)}
@@ -127,7 +155,10 @@
      (assoc :keychain/save-password-and-auth-method
             {:key-uid         key-uid
              :masked-password masked-password
-              :on-success      #(log/debug "successfully saved biometric")
+              :on-success      (fn []
+                                 (if syncing?
+                                   (rf/dispatch [:onboarding-2/navigate-to-enable-notifications])
+                                   (log/error "successfully saved biometrics")))
              :on-error        #(log/error "failed to save biometrics"
                                           {:key-uid key-uid
                                            :error   %})}))))
@@ -54,7 +54,7 @@
     {:on-press            (fn []
                             (when on-press
                               (on-press))
-                             (rf/dispatch [:open-modal :enable-notifications]))
+                             (rf/dispatch [:onboarding-2/navigate-to-enable-biometrics]))
      :accessibility-label :continue-button
      :customization-color profile-color
      :container-style     style/continue-button}
@@ -73,12 +73,12 @@
        (data-store.settings/rpc->settings settings)
        profile-overview (profile.rpc/rpc->profiles-overview account)]
    (rf/merge cofx
-              {:db (assoc db
-                          :chats/loading?           true
-                          :networks/current-network current-network
-                          :wallet/tokens-loading?   true
-                          :networks/networks        (merge networks config/default-networks-by-id)
-                          :profile/profile          (merge profile-overview settings))}
+              {:db (-> db
+                       (assoc :chats/loading?           true
+                              :networks/current-network current-network
+                              :networks/networks        (merge networks config/default-networks-by-id)
+                              :profile/profile          (merge profile-overview settings))
+                       (assoc-in [:wallet :ui :tokens-loading?] true))}
              (notifications/load-preferences)
              (data-store.chats/fetch-chats-preview
               {:on-success
@@ -6,14 +6,14 @@


 (defn- view-internal
-  [{:keys [theme]}]
+  [{:keys [theme title]}]
  (let [logged-in?    (rf/sub [:multiaccount/logged-in?])
        has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
        root          (if has-profiles? :profiles :intro)
        light?        (= theme :light)]
    [quo/page-nav
     {:type       :title
-      :title      "quo components preview"
+      :title      title
      :text-align :left
      :icon-name  :i/close
      :right-side [{:icon-name (if light? :i/dark :i/light)
@@ -26,4 +26,4 @@
        :descriptor            descriptor
        :blur?                 (:in-blur-view? @state)
        :show-blur-background? (:in-blur-view? @state)}
-       [quo/step @state (:value @state)]])))
+       [quo/step (dissoc @state :value) (:value @state)]])))
@@ -153,6 +153,7 @@
    [status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
    [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
    [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
+    [status-im2.contexts.quo-preview.tags.summary-tag :as summary-tag]
    [status-im2.contexts.quo-preview.tags.tag :as tag]
    [status-im2.contexts.quo-preview.tags.tags :as tags]
    [status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
@@ -433,6 +434,8 @@
                        :component permission-tag/view}
                       {:name      :status-tags
                        :component status-tags/view}
+                       {:name      :summary-tag
+                        :component summary-tag/view}
                       {:name      :tag
                        :component tag/view}
                       {:name      :tags
@@ -484,7 +487,7 @@
 (defn- main-screen
  []
  [:<>
-   [common/navigation-bar]
+   [common/navigation-bar {:title "Quo components preview"}]
   [rn/scroll-view {:style (style/main)}
    (for [category (sort screens-categories)]
      ^{:key (first category)}
@@ -317,10 +317,10 @@
         children)])

 (defn- f-preview-container
-  [{:keys [state descriptor blur? blur-dark-only?
+  [{:keys [title state descriptor blur? blur-dark-only?
           component-container-style
           blur-container-style blur-view-props blur-height show-blur-background?]
-    :or   {blur-height 200}}
+    :or   {blur-height 200 title "quo component"}}
   & children]
  (let [theme (quo.theme/use-theme-value)]
    (rn/use-effect (fn []
@@ -332,7 +332,7 @@
    [rn/view
     {:style {:top  (safe-area/get-top)
              :flex 1}}
-     [common/navigation-bar]
+     [common/navigation-bar {:title title}]
     [rn/scroll-view
      {:style                           (style/panel-basic)
       :shows-vertical-scroll-indicator false}
@@ -0,0 +1,66 @@
+(ns status-im2.contexts.quo-preview.tags.summary-tag
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.common.resources :as resources]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(defn data
+  [type]
+  (case type
+    :token
+    {:customization-color "#9999991A"
+     :label               "150 ETH"
+     :image-source        (quo.resources/get-token :eth)}
+    :address
+    {:label "0x39c...Bd2"}
+    :user
+    {:image-source        (resources/mock-images :user-picture-male4)
+     :customization-color :blue
+     :label               "Mark Libot"}
+    :collectible
+    {:label               "Isekai #1"
+     :image-source        (resources/mock-images :collectible2)
+     :customization-color :yellow}
+    :network
+    {:image-source (quo.resources/get-network :ethereum)
+     :label        "Mainnet"}
+    :saved-address
+    {:customization-color :flamingo
+     :label               "Peter Lambo"}
+    :account
+    {:label               "Account"
+     :emoji               "🍿"
+     :customization-color :purple}))
+
+(def descriptor
+  [{:key     :type
+    :type    :select
+    :options [{:value "Token"
+               :key   :token}
+              {:value "Address"
+               :key   :address}
+              {:value "User"
+               :key   :user}
+              {:value "Collectible"
+               :key   :collectible}
+              {:value "Network"
+               :key   :network}
+              {:value "Saved address"
+               :key   :saved-address}
+              {:value "Account"
+               :key   :account}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom
+               (merge {:type :token}
+                      (data :token)))]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [rn/view {:style {:align-items :center}}
+        [quo/summary-tag (merge @state (data (:type @state)))]]])))
@@ -0,0 +1,22 @@
+(ns status-im2.contexts.status-im-preview.common.floating-button-page.style
+  (:require [quo.foundations.colors :as colors]
+            [react-native.safe-area :as safe-area]))
+
+(defn container
+  []
+  {:flex       1
+   :margin-top (safe-area/get-top)})
+
+(def background-image
+  {:position :absolute
+   :top      (- (safe-area/get-top))
+   :left     0
+   :right    0
+   :bottom   200})
+
+(defn page-content
+  [height]
+  {:flex             1
+   :height           height
+   :overflow         :hidden
+   :background-color (colors/resolve-color :army 30)})
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ulises M	a0a3a97596	WIP: first attempt	2023-11-21 17:30:40 -06:00
Rende11	664048468b	Send page > input amount #16926 Numbered keyboard sane defaults Top bar Use input Progress Update token-input Update keyboard Base specs Backspace icon Revert "Backspace icon" This reverts commit e591c5297ae149eb3800df853b956d3154fe206c. Update tests Clean up Fix formatting Fix styles Add autofocus Add icons and update tests Add comment Add on-swap Current limit state Update tests Update column key Improve input interaction Extract make-new-input	2023-11-21 16:06:25 +03:00
Omar Basem	73e9f67dbd	Wallet: illustrations (#17931 ) * wallet: illustrations	2023-11-21 10:55:46 +04:00
Jamie Caprani	86c5505c94	chore(wallet): hook up qr scanner on watch only flow. (#17829 )	2023-11-19 16:26:00 -08:00
Icaro Motta	c1dcd7a764	Introduce malli library (#17867 ) This commit is the foundational step to start using malli (https://github.com/metosin/malli) in this project. Take in consideration we will only be able to realize malli's full power in future iterations. For those without context: the mobile team watched a presentation about malli and went through a light RFC to put everyone on the same page, among other discussions here and there in PRs. To keep things relatively short: 1. Unit, integration and component tests will short-circuit (fail) when inputs/outputs don't conform to their respective function schemas (CI should fail too). 2. Failed schema checks will not block the app from initializing, nor throw an exception that would trigger the LogBox. Exceptions are only thrown in the scope of automated tests. 3. There's zero performance impact in production code because we only instrument. Instrumentation is removed from the compiled code due to the usage of "^boolean js.goog/DEBUG". 4. We shouldn't expect any meaningful slowdown during development. What are we instrumenting in this PR? Per our team's agreement, we're only instrumenting the bare minimum to showcase 2 examples. - Instrument a utility function utils.money/format-amount using the macro approach. - Instrument a quo component quo.components.counter.step.view/view using the functional approach. Both approaches are useful, the functional approach is powerful and allow us to instrument anonymous functions, like the ones we pass to subscriptions or event handlers, or the higher-order function quo.theme/with-theme. The macro approach is perfect for functions already defined with defn. I evaluated the schema or function in the REPL but nothing changes - If you evaluate the source function, you need to evaluate schema/=> or schema/instrument as well. - Remember to var quote when using schema/instrument. - You must call "(status-im2.setup.schema/setup!)" after any var is re-instrumented. It's advisable to add a keybinding in your editor to send this expression automatically to the CLJS REPL, or add the call at the end of the namespace you are working on (similar to how some devs add "(run-tests)" at the end of test namespaces). Where should schemas be defined? For the moment, we should focus on instrumenting quo components, so define each function schema in the same namespace as the component's public "view" var. To be specific: - A schema used only to instrument a single function and not used elsewhere, like a quo component schema, wouldn't benefit from being defined in a separate namespace because that would force the developer to constantly open two files instead of one to check function signatures. - A common schema reused across the repo, like ":schema.common/theme" should be registered in the global registry "schema.registry" so that consumers can just refer to it by keyword, as if it was a built-in malli schema. - A common schema describing status-go entities like message, notification, community, etc can be stored either in the respective "src/status_im2/contexts/*" or registered globally, or even somewhere else. This is yet to be defined, but since I chose not to include schemas for them, we can postpone this guideline.	2023-11-18 11:04:48 -03:00
Icaro Motta	17ebedd6b8	Fix: resolve our Clojure source dependencies first in the classpath (#17919 ) In PR https://github.com/status-im/status-mobile/pull/17867 we have a namespace named schema.core, but this namespace is taken by library prismatic/schema already (see https://github.com/plumatic/schema/tree/master/src/cljc/schema), a library used by our direct dependency on bidi 2.1.6. This leads to a broken build where the ClojureScript compiler reports undeclared vars (https://clojurescript.org/reference/compiler-options#warnings). We change the order Java resolves dependencies via the classpath mechanism. We now first resolve our own Clojure sources, and then project dependencies.	2023-11-18 08:50:11 -03:00
Jamie CapraniandUlises M	2e2d15adfb	chore: add floating button page component (#17737 ) Co-authored-by: Ulises M <ulises.ssb@hotmail.com>	2023-11-17 09:16:55 -08:00
Yevheniia Berdnyk	1d1d586223	e2e: added back status link opening	2023-11-17 18:09:57 +02:00
John Ngei	88dd5e04bb	enable biometric when user signs in with syncing (#17627 )	2023-11-17 17:58:51 +03:00
Lungu CristianandIbrkhalil	8f8c8dede2	Composer collapsing when editing canceled/done (#17785 ) * fix: composer height when entering and canceling edit * fix: blur the composer input when canceling edit * fix: focusing animation and composer height after blur * fix: input height when canceling edit while unfocused * ref: removed arbitrary keyboard check * fix: moved edit-mentions logic to use-edit to fix unresolved mention * fix: composer edit should put the cursor at the end * fix: (potentially) fixing the mention not resolved during edit * fix: emoji-kb handler changing the height when default kb appears * Fix text content when editing and reentering chat * prevent composer when focusing on opening chat with edit/reply * clean * Clauxx comments * Apply for reply * Lintil soup = yummy * refactor variable name * Extract the focusing logic from the data setting logic * Edge case * fix: composer mention key & edit re-enter issues * fix: reply cancel input blur and smooth reply focus --------- Co-authored-by: Ibrkhalil <vampirekid017@gmail.com>	2023-11-17 11:32:31 +02:00
Yevheniia Berdnyk	2e0643fabe	e2e: fixes 15.11	2023-11-16 15:54:35 +02:00
Flavio Fraschetti	ec4046e543	Hide channel list at token-gated communities overview (#17901 ) This commit hides the categorized channel list for token-gated communities overview.	2023-11-16 10:46:17 +00:00
yqrashawn	4a44161163	chore: lint require i18n-resources first in status-im2.core (#17905 )	2023-11-16 11:10:40 +08:00
Icaro Motta	b9353b1ccd	Fix: actually run integration tests (#17900 ) Integration tests weren't running since https://github.com/status-im/status-mobile/pull/17762 was merged a week ago. This commit also allows individual integration test namespaces to run if you change the :ns-regexp option in shadow-cljs. This is quite handy, since they are relatively slow. Fixes https://github.com/status-im/status-mobile/issues/17895	2023-11-15 19:51:09 -03:00
jakub	5ceb7c2215	tests/appium: use requests for fetching APK Also add more context for the error. Signed-off-by: Jakub Sokołowski <jakub@status.im>	2023-11-15 18:08:11 +01:00
jakub	2043e9353b	tests/appium: refactor conftest.py to be more readable Signed-off-by: Jakub Sokołowski <jakub@status.im>	2023-11-15 18:08:10 +01:00
flexsurfer	7153e4da48	[#17854 ] [IOS] The tutorial video animation keeps playing after openi… (#17915 )	2023-11-15 16:24:27 +01:00
Icaro Motta	c7cba5b4d3	Fix: unable to join token-gated communities (#17894 ) Fixes the bug by explicitly passing all available addresses to be revealed to wakuext_requestToJoinCommunity and picking up the first available address as the airdrop address. This is a temporary solution while we work on the feature to allow users to choose which addresses to expose. Fixes https://github.com/status-im/status-mobile/issues/17861 Areas that may be impacted: join community flows. ---------------------------------------------------------------------- Community "Request to join" option is enabled. User holds more than X ETH. Anyone who holds <X> ETH is allowed to Become member in <COMMUNITY>. Expected: request to join is received by desktop client and accepted, mobile user joins the community. ---------------------------------------------------------------------- ---------------------------------------------------------------------- Community "Request to join" option is enabled. User holds less than X ETH. Anyone who holds <X> ETH is allowed to View and post in <CHANNEL>. Expected: request to join is received by desktop client and accepted, mobile user joins the community, but can't post in <CHANNEL>. ---------------------------------------------------------------------- ---------------------------------------------------------------------- Community "Request to join" option is enabled. No token permissions. Expected: request to join is received by desktop client and accepted, mobile user joins the community. ----------------------------------------------------------------------	2023-11-15 06:39:12 -03:00
Ulises Manuel	45df308dd0	[#17823 ] Refactor tokens data app-db (#17880 ) * Refactor edit-account view and events: - Fix `(fn [])` code style. - Avoid overriding clojure.core/type by destructuring the `:type` key. - Split the toast callback to a different function. - `:wallet/save-account` receives `:on-success` instead of `:callback` to improve readability. * Refactor app-db for `:wallet/tokens` & `:wallet/tokens-loading?` - Remove the root sub `:wallet/tokens-loading?`, now it's in app-db in `[:wallet :ui :tokens-loading?]`. - Remove the root subs `:wallet/tokens`, now the value is returned along with the account data by the sub `:wallet/accounts`, it's stored in app-db in `[:wallet :address "0x..." :tokens]`. - Fix the format of the token data returned by the endpoint `"wallet_getWalletToken"` and the fn `js->clj`, - Addresses are no longer keywords (since keywords mustn't start with a number). - Keys are now kebab-case. - Chain-ids are no longer keywords, now they are integers. - Update tests. * Move logic to calculate `:wallet/balances` and change value returned - Move logic to `status-im2.contexts.wallet.common.utils` - The `:wallet/balances` value returned by the sub had the following structure: [{:address "0x1...", :balance 12345} {:address "0x2...", :balance 67890} ...] This required a helper function to get the balance for an address (`get-balance-by-address`) It has been changed to a map: {"0x1..." 12345 "0x2..." 67890, ...} So now we don't need a helper function (just the hashmap itself or `clojure.core/get`). - Because of the previous change, now the `get-balance-by-address` has been removed. - The function `get-account-by-address` has zero uses, so it has been removed. - The test for the sub has been updated. * Create sub `:wallet/account-cards-data` This sub returns a vector of maps to render the account cards in the wallet page. This logic was previously in the `view` namespace, but it was completely calculated from the subs `:wallet/accounts`, `:wallet/balances` and `:wallet/tokens-loading?`, so it was clear that's a derived value.	2023-11-14 10:54:26 -06:00
Brian Sztamfater	a74c934936	feat: implement summary tag component (#17858 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-11-14 11:50:58 -03:00