tweak: utilise use-layout-effect to safely update atom

Upgrade re-frame to latest, from v1.3.0 (released on
2022-08-27) to latest v1.4.3 (released on 2024-01-25).

Important changes:

- [Added] re-frame.alpha namespace, for testing proposed features (see flows
  (https://github.com/day8/re-frame/discussions/795) and polymorphic
  subscriptions https://github.com/day8/re-frame/issues/680#issuecomment-1676487563).
- [Added] dispatch-sync now emits a :sync trace to indicate when it has
  finished.
- Re-frame upgraded its dependency on Reagent to latest v1.2.0.
- There are two breaking changes in v1.4.0, but they don't affect us because we
  don't use interceptors path and unwrap.

Makefile

@@ -139,7 +139,7 @@ _install-hooks: ##@prepare Create prepare-commit-msg git hook symlink
 
 # Remove directories and ignored files
 clean: SHELL := /bin/sh
-clean: _fix-node-perms _tmpdir-rm ##@prepare Remove all output folders
+clean: _fix-node-perms _tmpdir-rm ios-clean android-clean ##@prepare Remove all output folders
 	git clean -dXf
 
 # Remove directories, ignored and non-ignored files
@@ -196,6 +196,10 @@ xcode-clean: XCODE_HOME := $(HOME)/Library/Developer/Xcode
 xcode-clean: ##@prepare Clean XCode derived data and archives
 	rm -fr $(XCODE_HOME)/DerivedData/StatusIm-* $(XCODE_HOME)/Archives/*/StatusIm*
 
+ios-simulator-cache-clean: SHELL := /bin/sh
+ios-simulator-cache-clean: ##@prepare Clean iOS Simulator Caches
+	rm -rf ~/Library/Developer/CoreSimulator/Cache
+
 #----------------
 # Release builds
 #----------------
@@ -409,13 +413,17 @@ geth-connect: ##@other Connect to Geth on the device
 	build/bin/geth attach http://localhost:8545
 
 ios-clean: SHELL := /bin/sh
+ios-clean: ios-simulator-cache-clean
 ios-clean: ##@prepare Clean iOS build artifacts
 	git clean -dxf -f target/ios
 
-android-clean: export TARGET := gradle
+android-clean: SHELL := /bin/sh
 android-clean: ##@prepare Clean Gradle state
 	git clean -dxf -f ./android/app/build; \
-	[[ -d android/.gradle ]] && cd android && ./gradlew clean
+	rm -rf android/.gradle \
+	rm -rf android/build \
+	rm -rf ~/.gradle
+
 
 android-ports: export TARGET := android-sdk
 android-ports: ##@other Add proxies to Android Device/Simulator

nix/deps/clojure/deps.json

@@ -837,11 +837,11 @@
   },
 
   {
-    "path": "org/clojure/tools.logging/1.1.0/tools.logging-1.1.0",
+    "path": "org/clojure/tools.logging/1.2.4/tools.logging-1.2.4",
     "host": "https://repo1.maven.org/maven2",
     "jar": {
-      "sha1": "84cb5d00caa9df2ee504d46f6107f4708271f619",
-      "sha256": "0x2zzivn38z179lxkw9wbi9n9qwsf466lrd9y27khdz7wbxhscb5"
+      "sha1": "3a85764aa30c434a5b0375a2ee72924aa040fa66",
+      "sha256": "0a8riw23pfkiiyz98ccmljpbw1z13mxl73pdgyz80j93s0y0mzj6"
     }
   },
 
@@ -1008,11 +1008,11 @@
   },
 
   {
-    "path": "re-frame/re-frame/1.3.0/re-frame-1.3.0",
+    "path": "re-frame/re-frame/1.4.3/re-frame-1.4.3",
     "host": "https://repo.clojars.org",
     "jar": {
-      "sha1": "b7135a76432b8141027ba1f4eb6bb15a36acfb7c",
-      "sha256": "16wi01z0j4wn04kldwzxvj0pd9dianjyb000nv5611ikhxk1qrps"
+      "sha1": "74e132cc593ed2d72a5d4874954c58677a905f0e",
+      "sha256": "1xdmbjb0gv6dby98y1nx3brz9sdkfzxz9cjk8ajcr1f4zabcaapb"
     }
   },
 

nix/deps/clojure/deps.list

@@ -91,7 +91,7 @@ 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
-org/clojure/tools.logging/1.1.0/tools.logging-1.1.0.jar
+org/clojure/tools.logging/1.2.4/tools.logging-1.2.4.jar
 org/clojure/tools.macro/0.1.5/tools.macro-0.1.5.jar
 org/clojure/tools.reader/1.3.7/tools.reader-1.3.7.jar
 org/javassist/javassist/3.18.1-GA/javassist-3.18.1-GA.jar
@@ -110,7 +110,7 @@ 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.9.1/refactor-nrepl-3.9.1.jar
-re-frame/re-frame/1.3.0/re-frame-1.3.0.jar
+re-frame/re-frame/1.4.3/re-frame-1.4.3.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
 ring-cors/ring-cors/0.1.8/ring-cors-0.1.8.jar

shadow-cljs.edn

@@ -2,7 +2,7 @@
 {:source-paths ["src" "test/cljs"]
 
  :dependencies [[reagent "1.2.0"]
-                [re-frame "1.3.0"]
+                [re-frame "1.4.3"]
                 [binaryage/oops "0.7.2"]
                 [com.andrewmcveigh/cljs-time "0.5.2"]
                 [com.taoensso/timbre "6.3.1"]
@@ -53,14 +53,7 @@
    :dev {:devtools {:before-load-async status-im.setup.hot-reload/before-reload
                     :after-load-async  status-im.setup.hot-reload/reload
                     :build-notify      status-im.setup.hot-reload/build-notify
-                    :preloads          [;; We preload user namespaces so that
-                                        ;; their symbols are available without
-                                        ;; the developer having to manually
-                                        ;; evaluate them after app
-                                        ;; initialization.
-                                        user
-                                        dev.user
-                                        re-frisk-remote.preload
+                    :preloads          [re-frisk-remote.preload
                                         status-im.setup.schema-preload
                                         ;; In order to use component test helpers in the REPL we
                                         ;; need to preload namespaces that are not normally required

src/quo/components/avatars/channel_avatar/style.cljs

@@ -7,6 +7,7 @@
 (defn outer-container
   [{:keys [size customization-color theme]}]
   (let [container-size (case size
+                         :size-80 80
                          :size-64 64
                          :size-32 32
                          24)]
@@ -21,6 +22,7 @@
   [size]
   {:text-align :center
    :font-size  (case size
+                 :size-80 36
                  :size-64 24
                  :size-32 15
                  11)})

src/quo/components/avatars/channel_avatar/view.cljs

@@ -11,15 +11,15 @@
 
 (defn- initials
   [{:keys [full-name size customization-color theme]}]
-  (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
+  (let [amount-initials (if (#{:size-32 :size-64 :size-80} size) 2 1)
         channel-name    (utils.string/safe-replace full-name "#" "")]
     [text/text
      (cond-> {:accessibility-label :initials
               :style               {:color (colors/resolve-color customization-color theme)}
               :size                :paragraph-2
               :weight              :semi-bold}
-       (= size :size-64) (assoc :size   :heading-1
-                                :weight :medium))
+       (#{:size-64 :size-80} size) (assoc :size   :heading-1
+                                          :weight :medium))
      (utils.string/get-initials channel-name amount-initials)]))
 
 (defn- lock

src/quo/components/avatars/collection_avatar/style.cljs

@@ -9,10 +9,17 @@
     :size-20 20
     nil))
 
-(defn collection-avatar
+(defn collection-avatar-container
   [theme size]
-  {:width         (get-dimensions size)
-   :height        (get-dimensions size)
-   :border-width  1
-   :border-color  (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :border-radius 6})
+  {:width           (get-dimensions size)
+   :height          (get-dimensions size)
+   :border-width    1
+   :border-color    (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :border-radius   6
+   :justify-content :center
+   :align-items     :center})
+
+(defn collection-avatar
+  [size]
+  {:width  (get-dimensions size)
+   :height (get-dimensions size)})

src/quo/components/avatars/collection_avatar/view.cljs

@@ -2,18 +2,20 @@
   (:require
     [quo.components.avatars.collection-avatar.style :as style]
     [quo.theme :as quo.theme]
+    [react-native.core :as rn]
     [react-native.fast-image :as fast-image]))
 
 (defn view
   "Opts:
-   
+
     :image - collection image
     :theme - keyword -> :light/:dark"
   [{:keys [image size on-load-end on-error] :or {size :size-24}}]
   (let [theme (quo.theme/use-theme)]
-    [fast-image/fast-image
-     {:accessibility-label :collection-avatar
-      :source              image
-      :on-load-end         on-load-end
-      :on-error            on-error
-      :style               (style/collection-avatar theme size)}]))
+    [rn/view {:style (style/collection-avatar-container theme size)}
+     [fast-image/fast-image
+      {:accessibility-label :collection-avatar
+       :source              image
+       :on-load-end         on-load-end
+       :on-error            on-error
+       :style               (style/collection-avatar size)}]]))

src/quo/components/avatars/group_avatar/view.cljs

@@ -1,6 +1,5 @@
 (ns quo.components.avatars.group-avatar.view
   (:require
-    [clojure.string :as string]
     [quo.components.avatars.group-avatar.style :as style]
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
@@ -22,7 +21,7 @@
              :container 80}})
 
 (defn view
-  [{:keys [size customization-color picture icon-name emoji chat-name]
+  [{:keys [size customization-color picture icon-name emoji]
     :or   {size                :size-20
            customization-color :blue
            picture             nil
@@ -50,14 +49,6 @@
             {:size  :paragraph-1
              :style (dissoc (style/avatar-identifier theme) :font-size)}
             emoji])
-         chat-name
-         (if (= size :size-80)
-           [rn/text
-            {:style (style/avatar-identifier theme)}
-            ((comp first string/upper-case) chat-name)]
-           [text/text
-            {:size :paragraph-1}
-            ((comp first string/upper-case) chat-name)])
          :else
          [icon/icon icon-name
           {:size  icon-size

src/quo/components/buttons/button/view.cljs

@@ -35,6 +35,7 @@
            size                40
            customization-color (if (= type :primary) :blue nil)}}
    children]
+  (when (string? children) (js/console.log "button - " children))
   (let [[pressed-state? set-pressed-state] (rn/use-state false)
         theme (quo.theme/use-theme)
         {:keys [icon-color background-color label-color border-color blur-type

src/quo/components/navigation/page_nav/view.cljs

@@ -44,48 +44,55 @@
 
 (defn- right-section-spacing [] [rn/view {:style style/right-actions-spacing}])
 
+(defmulti add-button
+  (fn [{:keys [button-props]}]
+    (:content-type button-props)))
+
+(defmethod add-button :account-switcher
+  [{:keys [support-account-switcher? button-props]}]
+  (when support-account-switcher?
+    (let [{:keys [customization-color on-press emoji type]} button-props]
+      [rn/pressable {:on-press on-press}
+       [account-avatar/view
+        {:emoji               emoji
+         :size                32
+         :type                (or type :default)
+         :customization-color customization-color}]])))
+
+(defmethod add-button :default
+  [{:keys [background behind-overlay? button-props]}]
+  (let [{:keys [label icon-name]} button-props]
+    [button/button
+     (assoc button-props
+            :type       (button-type background)
+            :icon-only? (boolean icon-name)
+            :size       32
+            :accessible true
+            :background (if behind-overlay?
+                          :blur
+                          (when (button-properties/backgrounds background) background)))
+     (or label icon-name)]))
+
 (defn- add-right-buttons-xf
-  [max-actions background behind-overlay?]
+  [max-actions background behind-overlay? support-account-switcher?]
   (comp (filter map?)
         (take max-actions)
-        (map (fn [{:keys [icon-name label] :as button-props}]
-               [button/button
-                (assoc button-props
-                       :type       (button-type background)
-                       :icon-only? icon-name
-                       :size       32
-                       :accessible true
-                       :background (if behind-overlay?
-                                     :blur
-                                     (when (button-properties/backgrounds background) background)))
-                (or label icon-name)]))
+        (map (fn [button-props]
+               (add-button {:background                background
+                            :behind-overlay?           behind-overlay?
+                            :support-account-switcher? support-account-switcher?
+                            :button-props              button-props})))
         (interpose [right-section-spacing])))
 
-(defn- account-switcher-content
-  [{:keys [customization-color on-press emoji type]}]
-  [rn/pressable {:on-press on-press}
-   [account-avatar/view
-    {:emoji               emoji
-     :size                32
-     :type                (or type :default)
-     :customization-color customization-color}]])
-
 (defn- right-content
-  [{:keys [background content max-actions min-size? support-account-switcher? account-switcher
+  [{:keys [background content max-actions min-size? support-account-switcher?
            behind-overlay?]
     :or   {support-account-switcher? true}}]
   [rn/view (when min-size? {:style style/right-content-min-size})
-   (cond
-     (and support-account-switcher? (= content :account-switcher))
-     [account-switcher-content account-switcher]
-
-     (coll? content)
+   (when (coll? content)
      (into [rn/view {:style style/right-actions-container}]
-           (add-right-buttons-xf max-actions background behind-overlay?)
-           content)
-
-     :else
-     nil)])
+           (add-right-buttons-xf max-actions background behind-overlay? support-account-switcher?)
+           content))])
 
 (def header-height 155)
 (def page-nav-height 25)
@@ -208,19 +215,11 @@
   - on-press: callback for left button
   - icon-name: icon for left button
   - right-side (optional):
-      - The `:account-switcher` keyword
       - vector of maps to render buttons, e.g.:
         {:icon-name           :i/my-icon
          :on-press            (fn callback [] nil)
          :accessibility-label \"an optional label\"}
 
-  - account-switcher (optional)
-      - props to render dropdown component (emoji only) e.g.:
-       {:customization-color :purple
-        :on-press            (fn [] nil)
-        :state               :default (inherit dropdown states)
-        :emoji               \"🍑\"}
-
   Depending on the `type` selected, different properties are accepted:
   `:title`
     - title
@@ -251,7 +250,7 @@
   `:network`
     - network-name
     - network-logo a valid rn/image `:source` value"
-  [{:keys [type right-side background text-align account-switcher behind-overlay?]
+  [{:keys [type right-side background text-align behind-overlay?]
     :or   {type       :no-title
            text-align :center
            right-side :none
@@ -261,22 +260,20 @@
     :no-title
     [page-nav-base props
      [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      3
-       :behind-overlay?  behind-overlay?
-       :account-switcher account-switcher}]]
+      {:background      background
+       :content         right-side
+       :max-actions     3
+       :behind-overlay? behind-overlay?}]]
 
     :title
     (let [centered? (= text-align :center)]
       [page-nav-base props
        [title-center (assoc props :centered? centered?)]
        [right-content
-        {:background       background
-         :content          right-side
-         :max-actions      (if centered? 1 3)
-         :min-size?        centered?
-         :account-switcher account-switcher}]])
+        {:background  background
+         :content     right-side
+         :max-actions (if centered? 1 3)
+         :min-size?   centered?}]])
 
     :dropdown
     [page-nav-base props
@@ -291,10 +288,9 @@
     [page-nav-base props
      [token-center props]
      [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      3
-       :account-switcher account-switcher}]]
+      {:background  background
+       :content     right-side
+       :max-actions 3}]]
 
     :channel
     [page-nav-base props
@@ -318,11 +314,10 @@
     [page-nav-base props
      [wallet-networks-center props]
      [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      1
-       :min-size?        true
-       :account-switcher account-switcher}]]
+      {:background  background
+       :content     right-side
+       :max-actions 3
+       :min-size?   true}]]
 
     (:community :network)
     [page-nav-base props

src/quo/components/notifications/toast/view.cljs

@@ -67,27 +67,26 @@
 
 (defn toast
   "Options:
-   
+
    :type => :neutral/:negative/:positive
    "
-  [{:keys [type icon title text action undo-duration undo-on-press container-style theme user]
+  [{:keys [type icon title text action undo-duration undo-on-press container-style user]
     :or   {type :neutral icon :i/placeholder}}]
-  (let [context-theme (quo.theme/use-theme)
-        context-theme (or theme context-theme)
-        icon-name     (case type
-                        :positive (if (= theme :light)
-                                    :i/correct
-                                    :i/correct-dark)
-                        :negative (if (= theme :light)
-                                    :i/incorrect
-                                    :i/incorrect-dark)
-                        :neutral  icon)]
-    [quo.theme/provider context-theme
+  (let [theme     (quo.theme/use-theme)
+        icon-name (case type
+                    :positive (if (= theme :light)
+                                :i/correct
+                                :i/correct-dark)
+                    :negative (if (= theme :light)
+                                :i/incorrect
+                                :i/incorrect-dark)
+                    :neutral  icon)]
+    [quo.theme/provider theme
      [toast-container
       {:left            (cond user
                               [user-avatar/user-avatar user]
                               icon-name
-                              [icon/icon icon-name (style/icon type context-theme)])
+                              [icon/icon icon-name (style/icon type theme)])
        :title           title
        :text            text
        :right           (if undo-duration
@@ -96,3 +95,4 @@
                             :undo-on-press undo-on-press}]
                           action)
        :container-style container-style}]]))
+

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

@@ -3,7 +3,7 @@
     [quo.foundations.colors :as colors]))
 
 (defn container
-  [size card? blur? theme]
+  [{:keys [size card? blur? actionable? theme]}]
   {:flex-direction     :row
    :justify-content    :space-between
    :padding-vertical   (when (= size :default) 8)
@@ -11,8 +11,11 @@
    :border-radius      16
    :border-width       (when (and card? (not= size :small)) 1)
    :background-color   (if blur?
-                         colors/white-opa-5
-                         (colors/theme-colors colors/white colors/neutral-95 theme))
+                         (if actionable? :transparent colors/white-opa-5)
+                         (colors/theme-colors
+                          (if actionable? colors/white colors/neutral-2_5)
+                          (if actionable? colors/neutral-95 colors/neutral-90)
+                          theme))
    :border-color       (if blur?
                          colors/white-opa-10
                          (colors/theme-colors colors/neutral-10

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

@@ -125,7 +125,12 @@
        {:accessibility-label :data-item
         :disabled            (not icon-right?)
         :on-press            on-press
-        :style               (merge (style/container size card? blur? theme) container-style)}
+        :style               (merge (style/container {:size        size
+                                                      :card?       card?
+                                                      :blur?       blur?
+                                                      :actionable? on-press
+                                                      :theme       theme})
+                                    container-style)}
        [left-side props]
        (when (and (= :default status) (not= :small size))
          [right-side

src/quo/components/text_combinations/standard_title/style.cljs

@@ -3,6 +3,7 @@
 
 (def container
   {:flex-direction  :row
+   :flex            1
    :justify-content :space-between})
 
 (def right-counter

src/react_native/core.cljs

@@ -181,6 +181,14 @@
     #(let [ret (handler)] (if (fn? ret) ret js/undefined))
     (get-js-deps deps))))
 
+(defn use-layout-effect
+  ([handler]
+   (use-layout-effect handler nil))
+  ([handler deps]
+   (react/useLayoutEffect
+    #(let [ret (handler)] (if (fn? ret) ret js/undefined))
+    (get-js-deps deps))))
+
 (defn use-mount
   [handler]
   (use-effect handler []))

src/react_native/utils.cljs

@@ -14,11 +14,11 @@
   [{:keys [on-press allow-multiple-presses? throttle-duration]} throttle-id]
   (if allow-multiple-presses?
     on-press
-    (fn []
+    (fn [event]
       (let [id @throttle-id]
         (when (and id (not (get @throttle id)))
           (swap! throttle assoc id true)
-          (on-press)
+          (on-press event)
           (js/setTimeout
            #(swap! throttle dissoc id)
            (or throttle-duration 500)))))))

src/status_im/common/lightbox/zoomable_image/constants.cljs

@@ -16,4 +16,4 @@
 
 (def ^:const default-dimension 1000)
 
-(def ^:const margin 8)
+(def ^:const margin 16)

src/status_im/common/scroll_page/view.cljs

@@ -64,7 +64,8 @@
         [quo/page-nav
          (cond-> {:margin-top     (safe-area/get-top)
                   :type           :no-title
-                  :background     (if (= 1 (reanimated/get-shared-value opacity-animation))
+                  :background     (if (or (:blur? page-nav-props)
+                                          (= 1 (reanimated/get-shared-value opacity-animation)))
                                     :blur
                                     :photo)
                   :right-side     page-nav-right-section-buttons

src/status_im/common/validation/keypair.cljs

@@ -0,0 +1,23 @@
+(ns status-im.common.validation.keypair
+  (:require [clojure.string :as string]
+            [status-im.common.validation.general :as validators]
+            [status-im.constants :as constants]
+            utils.emojilib
+            [utils.i18n :as i18n]))
+
+(defn keypair-too-short?
+  [s]
+  (< (-> s str string/trim count) constants/key-pair-name-min-length))
+
+(defn keypair-too-long?
+  [s]
+  (> (-> s str string/trim count) constants/key-pair-name-max-length))
+
+(defn validation-keypair-name
+  [s]
+  (cond
+    (string/blank? s)                      nil
+    (validators/has-emojis? s)             (i18n/label :t/key-name-error-emoji)
+    (validators/has-special-characters? s) (i18n/label :t/key-name-error-special-char)
+    (keypair-too-short? s)                 (i18n/label :t/your-key-pair-name-is-too-short)
+    (keypair-too-long? s)                  (i18n/label :t/your-key-pair-name-is-too-long)))

src/status_im/common/validation/keypair_test.cljs

@@ -0,0 +1,27 @@
+(ns status-im.common.validation.keypair-test
+  (:require
+    [cljs.test :refer-macros [deftest are]]
+    [status-im.common.validation.keypair :as keypair-validator]
+    [utils.i18n :as i18n]))
+
+(deftest keypair-name-too-short-test
+  (are [arg expected]
+   (expected (keypair-validator/keypair-too-short? arg))
+   "abc"    true?
+   "abcdef" false?))
+
+(deftest keypair-name-too-long-test
+  (are [arg expected]
+   (expected (keypair-validator/keypair-too-long? arg))
+   (apply str (repeat 25 "a")) true?
+   "abcdef"                    false?))
+
+(deftest validation-keypair-name-test
+  (are [arg expected]
+   (= (keypair-validator/validation-keypair-name arg) expected)
+   nil                         nil
+   ""                          nil
+   "name !"                    (i18n/label :t/key-name-error-special-char)
+   "Hello 😊"                  (i18n/label :t/key-name-error-emoji)
+   "abc"                       (i18n/label :t/your-key-pair-name-is-too-short)
+   (apply str (repeat 25 "a")) (i18n/label :t/your-key-pair-name-is-too-long)))

src/status_im/constants.cljs

@@ -77,6 +77,9 @@
 (def ^:const contact-request-message-state-declined 3)
 (def ^:const contact-request-message-max-length 280)
 
+(def ^:const key-pair-name-max-length 20)
+(def ^:const key-pair-name-min-length 5)
+
 (def request-to-join-pending-state 1)
 
 (def reactions

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

@@ -2,7 +2,6 @@
   (:require
     [oops.core :as oops]
     [quo.core :as quo]
-    [react-native.platform :as platform]
     [reagent.core :as reagent]
     [status-im.common.lightbox.constants :as constants]
     [status-im.contexts.chat.messenger.messages.content.lightbox.style :as style]
@@ -36,7 +35,6 @@
                                 [:lightbox/save-image-to-gallery
                                  uri
                                  #(rf/dispatch [:toasts/upsert
-                                                {:id              :random-id
-                                                 :type            :positive
-                                                 :container-style {:bottom (when platform/android? 20)}
-                                                 :text            (i18n/label :t/photo-saved)}])]))}]]]))
+                                                {:id   :random-id
+                                                 :type :positive
+                                                 :text (i18n/label :t/photo-saved)}])]))}]]]))

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

@@ -48,10 +48,11 @@
    {:transform [{:scale scale}]
     :top       top
     :left      left}
-   {:position      :absolute
-    :border-width  4
-    :border-radius 50
-    :border-color  (colors/theme-colors colors/white colors/neutral-95 theme)}))
+   {:position         :absolute
+    :border-width     4
+    :border-radius    50
+    :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
+    :border-color     (colors/theme-colors colors/white colors/neutral-95 theme)}))
 
 (defn user-name-container
   [top left]

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

@@ -133,15 +133,21 @@
         community-channel? (= chat-type constants/community-chat-type)]
     [reanimated/view
      {:style (style/header-image scale top left theme)}
-     (if group-chat
+     (cond
+       community-channel?
+       [quo/channel-avatar
+        {:size                :size-80
+         :full-name           chat-name
+         :customization-color color
+         :emoji               (when-not (string/blank? emoji)
+                                (string/trim emoji))}]
+       group-chat
        [quo/group-avatar
         {:customization-color color
          :size                :size-80
          :picture             profile-picture
-         :emoji               (when (and (not (string/blank? emoji))
-                                         community-channel?)
-                                (string/trim emoji))
          :chat-name           chat-name}]
+       :else
        [quo/user-avatar
         {:full-name       display-name
          :online?         online?

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

@@ -21,12 +21,10 @@
    :align-items    :center
    :margin-top     20})
 
-(def fetching-placeholder
-  {:align-items     :center
-   :justify-content :center
-   :flex            1})
-
-(def fetching-text {:color :red})
+(defn fetching-placeholder
+  [top-inset]
+  {:flex       1
+   :margin-top top-inset})
 
 (def blur-channel-header
   {:position :absolute

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

@@ -6,9 +6,10 @@
     [quo.theme]
     [react-native.blur :as blur]
     [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.common.home.actions.view :as actions]
-    [status-im.common.not-implemented :as not-implemented]
+    [status-im.common.resources :as resources]
     [status-im.common.scroll-page.style :as scroll-page.style]
     [status-im.common.scroll-page.view :as scroll-page]
     [status-im.config :as config]
@@ -369,18 +370,25 @@
 
 (defn- community-fetching-placeholder
   [id]
-  (let [fetching? (rf/sub [:communities/fetching-community id])]
+  (let [theme     (quo.theme/use-theme)
+        top-inset (safe-area/get-top)
+        fetching? (rf/sub [:communities/fetching-community id])]
     [rn/view
-     {:style               style/fetching-placeholder
+     {:style               (style/fetching-placeholder top-inset)
       :accessibility-label (if fetching?
                              :fetching-community-overview
                              :failed-to-fetch-community-overview)}
-     [not-implemented/not-implemented
-      [rn/text
-       {:style style/fetching-text}
-       (if fetching?
-         "Fetching community..."
-         "Failed to fetch community")]]]))
+     [quo/page-nav
+      {:title      "Community Overview"
+       :type       :title
+       :text-align :left
+       :icon-name  :i/close
+       :on-press   #(rf/dispatch [:navigate-back])}]
+     [quo/empty-state
+      {:image           (resources/get-themed-image :cat-in-box theme)
+       :description     (when-not fetching? (i18n/label :t/here-is-a-cat-in-a-box-instead))
+       :title           (if fetching? "Fetching community..." "Failed to fetch community")
+       :container-style {:flex 1 :justify-content :center}}]]))
 
 (defn- community-card-page-view
   [id]

src/status_im/contexts/preview/quo/navigation/page_nav.cljs

@@ -41,6 +41,12 @@
                :value "Arrow left"}]}])
 
 
+(def account-switcher-option
+  {:content-type        :account-switcher
+   :customization-color :purple
+   :on-press            #(js/alert "Pressed Account Switcher")
+   :emoji               "🍑"})
+
 (def right-side-options
   (let [options [{:icon-name :i/save :on-press #(js/alert "SAVE")}
                  {:icon-name :i/mark-as-read :on-press #(js/alert "MARK AS READ")}
@@ -52,20 +58,21 @@
      {:key   (take 2 options)
       :value "2 actions"}
      {:key   (take 3 options)
-      :value "3 actions"}]))
-
-(def account-switcher
-  {:key :account-switcher})
+      :value "3 actions"}
+     {:key   (conj (take 1 options) account-switcher-option)
+      :value "1 action + account switcher"}
+     {:key   (conj (take 2 options) account-switcher-option)
+      :value "2 actions + account switcher"}]))
 
 (def no-title-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj right-side-options account-switcher)}])
+    :options right-side-options}])
 
 (def title-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj right-side-options account-switcher)}
+    :options right-side-options}
    {:key :title :type :text}
    {:key     :text-align
     :type    :select
@@ -79,7 +86,7 @@
 (def token-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj right-side-options account-switcher)}
+    :options right-side-options}
    {:key     :token-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :status-logo)
@@ -128,7 +135,7 @@
 (def wallet-networks-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj (take 2 right-side-options) account-switcher)}])
+    :options right-side-options}])
 
 (def community-descriptor
   [{:key     :right-side
@@ -195,9 +202,6 @@
                 :community-logo     (resources/get-mock-image :coinbase)
                 :network-name       "Mainnet"
                 :network-logo       (resources/get-mock-image :diamond)
-                :account-switcher   {:customization-color :purple
-                                     :on-press            #(js/alert "Pressed Account Switcher")
-                                     :emoji               "🍑"}
                 :networks           networks})]
     (fn []
       [preview/preview-container

src/status_im/contexts/profile/contact/contact_request/view.cljs

@@ -1,34 +1,222 @@
 (ns status-im.contexts.profile.contact.contact-request.view
   (:require [clojure.string :as string]
             [quo.core :as quo]
+            [re-frame.core :as re-frame]
             [react-native.core :as rn]
             [react-native.platform :as platform]
+            [reagent.ratom]
             [status-im.constants :as constants]
             [status-im.contexts.profile.contact.contact-request.style :as style]
             [status-im.contexts.profile.utils :as profile.utils]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
+;; ---
+
+(def contact-request-message-store
+  (reagent.ratom/atom {}))
+
+(re-frame/reg-sub
+ :contact-request-message
+ (fn []
+   [contact-request-message-store])
+ (fn [[store] [_ id]]
+   (get store id "")))
+
+(re-frame/reg-fx
+ :store/set-contact-request-message
+ (fn [[id message]]
+   (swap! contact-request-message-store assoc id message)))
+
+(re-frame/reg-event-fx
+ :ui/set-contact-request-message
+ (fn [_cofx [id message]]
+   {:fx [[:store/set-contact-request-message [id message]]]}))
+
+;; ---
+
+(def ^:private lookup-sentinel (js-obj))
+
+(defn memo
+  "Returns a memoized version of a referentially transparent function. The
+  memoized version of the function keeps a cache of the mapping from arguments
+  to results and, when calls with the same arguments are repeated often, has
+  higher performance at the expense of higher memory use."
+  [mem f]
+  (fn [& args]
+    (js/console.log "lookup")
+    (let [v (get @mem args lookup-sentinel)]
+      (if (identical? v lookup-sentinel)
+        (let [ret (apply f args)]
+          (js/console.log "swap")
+          (swap! mem assoc args ret)
+          ret)
+        v))))
+
+(defn make-state-ref
+  [state-ratom]
+  (let [state-ref (atom nil)]
+    (js/console.log "init make-state-ref")
+    (let [reaction-sub
+          (reagent.ratom/track!
+           (fn [state-ratom]
+             (js/console.log "reagent reaction")
+             (let [state @state-ratom]
+               (js/console.log
+                (if (nil? @state-ref)
+                  "state-ref init"
+                  "state-ref update")
+                (clj->js state))
+               (reset! state-ref state)
+               state))
+           state-ratom)]
+      @reaction-sub
+      {:sub reaction-sub
+       :ref state-ref})))
+
+(defn make-state-handler-factory [state-ref]
+  (let [storage (rn/use-memo #(atom {}) [state-ref])
+        factory (rn/use-memo
+                 (fn []
+                   (fn [handler]
+                     ((memo storage
+                            (fn [callback]
+                              (print "make state handler")
+                              (fn [event]
+                                (callback @state-ref event))))
+                      handler)))
+                 [state-ref storage])]
+    {:factory factory
+     :storage storage}))
+
+(defn make-snapshot-handler-factory [snapshot]
+  (let [storage (rn/use-memo #(atom {}) [])
+        capture (rn/use-memo #(atom snapshot) [])
+        _update (rn/use-layout-effect
+                 (fn []
+                   (swap! capture (fn [_] snapshot)))
+                 snapshot)
+        factory (rn/use-memo
+                 (fn []
+                   (fn [handler]
+                     ((memo storage
+                            (fn [callback]
+                              (fn [event]
+                                (callback @capture event))))
+                      handler)))
+                 [storage capture])]
+    {:factory factory
+     :storage storage}))
+
+(defn make-past-present-state-handler-factory [state-ref]
+  (let [storage (rn/use-memo #(atom {}) [state-ref])
+        capture (rn/use-memo #(atom @state-ref) [state-ref])
+        factory (rn/use-memo
+                 (fn []
+                   (fn [handler]
+                     (reset! capture @state-ref)
+                     ((memo storage
+                            (fn [callback]
+                              (fn [event]
+                                (callback @capture @state-ref event))))
+                      handler)))
+                 [state-ref storage])]
+    {:factory factory
+     :storage storage}))
+
+(defn use-bind-sub [state-sub]
+  (let [{:keys [ref sub]}
+        (rn/use-memo (fn []
+                       (make-state-ref state-sub))
+                     [state-sub])
+        {:keys [factory storage]}
+        (make-state-handler-factory ref)]
+    (rn/use-unmount (fn []
+                      (js/console.log "unmount bind-sub")
+                      (prn "unmount storage" storage)
+                      (reagent.ratom/dispose! sub)))
+    factory))
+
+(defn use-bind-past-present-sub [state-sub]
+  (let [{:keys [ref sub]}
+        (rn/use-memo (fn []
+                       (make-state-ref state-sub))
+                     [state-sub])
+        {:keys [factory storage]}
+        (make-past-present-state-handler-factory ref)]
+    (rn/use-unmount (fn []
+                      (js/console.log "unmount bind-sub-and-snapshot")
+                      (prn "unmount storage" storage)
+                      (reagent.ratom/dispose! sub)))
+    factory))
+
+(defn use-bind-snapshot [snapshot]
+  (let [{:keys [factory storage]}
+        (make-snapshot-handler-factory snapshot)]
+    (rn/use-unmount (fn []
+                      (js/console.log "unmount bind-snapshot")
+                      (prn "unmount storage" storage)))
+    factory))
+
+;; ---
+
+(defn on-message-submit
+  ([snapshot state _event]
+   (js/console.log "on-press snapshot" (clj->js snapshot))
+   (js/console.log "on-press state" (clj->js state))
+   (let [{:keys [public-key message]} state]
+    ;;  (rf/dispatch [:hide-bottom-sheet])
+    ;;  (rf/dispatch [:contact.ui/send-contact-request
+    ;;                public-key message])
+     (rf/dispatch [:toasts/upsert
+                   {:id   :send-contact-request
+                    :type :positive
+                    :text message}])))
+  ([state _event]
+   (js/console.log "on-press state" (clj->js state))
+   (let [{:keys [public-key message]} state]
+    ;;  (rf/dispatch [:hide-bottom-sheet])
+    ;;  (rf/dispatch [:contact.ui/send-contact-request
+    ;;                public-key message])
+     (rf/dispatch [:toasts/upsert
+                   {:id   :send-contact-request
+                    :type :positive
+                    :text message}]))))
+
+(defn combine-subs-helper [subs-map]
+  (reduce (fn [result [name sub]]
+            (assoc result name @sub))
+          {}
+          subs-map))
+
+(defn combine-subs [subs-map]
+  (reagent.ratom/track combine-subs-helper subs-map))
+
 (defn view
   []
-  (let [{:keys [public-key customization-color]
-         :as   profile}       (rf/sub [:contacts/current-contact])
+  (let [profile-sub           (re-frame/subscribe [:contacts/current-contact])
+        {:keys [public-key customization-color]
+         :as   profile}       (deref profile-sub)
         customization-color   customization-color
         full-name             (profile.utils/displayed-name profile)
         profile-picture       (profile.utils/photo profile)
         input-ref             (rn/use-ref-atom nil)
+        message-sub           (re-frame/subscribe [:contact-request-message public-key])
         [message set-message] (rn/use-state "")
-        on-message-change     (rn/use-callback #(set-message %))
-        on-message-submit     (rn/use-callback (fn []
-                                                 (rf/dispatch [:hide-bottom-sheet])
-                                                 (rf/dispatch [:contact.ui/send-contact-request
-                                                               public-key message])
-                                                 (rf/dispatch [:toasts/upsert
-                                                               {:id   :send-contact-request
-                                                                :type :positive
-                                                                :text (i18n/label
-                                                                       :t/contact-request-was-sent)}]))
-                                               [public-key message])]
+        on-message-change     (rn/use-callback #(do
+                                                  (rf/dispatch-sync [:ui/set-contact-request-message public-key %])
+                                                  (set-message %)))
+        state-sub             (combine-subs {:message message-sub
+                                             :public-key (reagent.ratom/cursor
+                                                          profile-sub
+                                                          [:public-key])})
+        bind-sub              (use-bind-sub state-sub)
+        bind-past-present-sub (use-bind-past-present-sub state-sub)
+        bind-snapshot         (use-bind-snapshot {:public-key public-key
+                                                  :message message})]
+    (rn/use-unmount
+     (fn []
+       (rf/dispatch [:ui/set-contact-request-message public-key ""])))
     (rn/use-mount
      (fn []
        (let [listener (.addListener rn/keyboard
@@ -58,6 +246,7 @@
         :auto-focus            true
         :accessibility-label   :contact-request-message
         :label                 (i18n/label :t/message)
+        :value                 @message-sub
         :on-change-text        on-message-change
         :container-style       {:flex-shrink 1}
         :input-container-style {:flex-shrink 1}}]]
@@ -66,7 +255,18 @@
        :actions          :one-action
        :button-one-props {:disabled?           (string/blank? message)
                           :accessibility-label :send-contact-request
-                          :customization-color customization-color
-                          :on-press            on-message-submit}
-       :button-one-label (i18n/label :t/send-contact-request)}]]))
+                          :customization-color :purple
+                          :on-press            (bind-past-present-sub on-message-submit)}
+       :button-one-label "Past Present Sub"}]
+     [quo/bottom-actions
+      {:container-style  {:style {:flex 1}}
+       :actions          :two-actions
+       :button-one-props {:accessibility-label :send-contact-request
+                          :customization-color :blue
+                          :on-press            (bind-snapshot on-message-submit)}
+       :button-one-label "Snapshot"
+       :button-two-props {:accessibility-label :test-button
+                          :customization-color :orange
+                          :on-press            (bind-sub on-message-submit)}
+       :button-two-label "Sub"}]]))
 

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

@@ -0,0 +1,32 @@
+(ns status-im.contexts.settings.wallet.events
+  (:require
+    [taoensso.timbre :as log]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(rf/reg-event-fx
+ :wallet/rename-keypair-success
+ (fn [{:keys [db]} [key-uid name]]
+   {:db (update-in db
+                   [:wallet :keypairs]
+                   (fn [keypairs]
+                     (map (fn [keypair]
+                            (if (= (keypair :key-uid) key-uid)
+                              (assoc keypair :name name)
+                              keypair))
+                          keypairs)))
+    :fx [[:dispatch [:navigate-back]]
+         [:dispatch
+          [:toasts/upsert
+           {:type :positive
+            :text (i18n/label :t/key-pair-name-updated)}]]]}))
+
+(defn rename-keypair
+  [_ [{:keys [key-uid keypair-name]}]]
+  {:fx [[:json-rpc/call
+         [{:method     "accounts_updateKeypairName"
+           :params     [key-uid keypair-name]
+           :on-success [:wallet/rename-keypair-success key-uid keypair-name]
+           :on-error   #(log/info "failed to rename keypair " %)}]]]})
+
+(rf/reg-event-fx :wallet/rename-keypair rename-keypair)

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

@@ -0,0 +1,20 @@
+(ns status-im.contexts.settings.wallet.events-test
+  (:require
+    [cljs.test :refer-macros [deftest is]]
+    matcher-combinators.test
+    [status-im.contexts.settings.wallet.events :as sut]))
+
+(def key-uid "0xfef454bb492ee4677594f8e05921c84f336fa811deb99b8d922477cc87a38b98")
+
+(deftest rename-keypair-test
+  (let [new-keypair-name "key pair new"
+        cofx             {:db {}}
+        expected         {:fx [[:json-rpc/call
+                                [{:method     "accounts_updateKeypairName"
+                                  :params     [key-uid new-keypair-name]
+                                  :on-success [:wallet/rename-keypair-success key-uid new-keypair-name]
+                                  :on-error   fn?}]]]}]
+    (is (match? expected
+                (sut/rename-keypair cofx
+                                    [{:key-uid      key-uid
+                                      :keypair-name new-keypair-name}])))))

src/status_im/contexts/settings/wallet/keypairs_and_accounts/actions/view.cljs

@@ -1,6 +1,19 @@
 (ns status-im.contexts.settings.wallet.keypairs-and-accounts.actions.view
-  (:require [quo.core :as quo]))
+  (:require [quo.core :as quo]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn on-rename-request
+  [data]
+  (rf/dispatch [:open-modal :screen/settings.rename-keypair data]))
 
 (defn view
-  [props]
-  [quo/drawer-top props])
+  [props data]
+  [:<>
+   [quo/drawer-top props]
+   [quo/action-drawer
+    [(when (= (:type props) :keypair)
+       [{:icon                :i/edit
+         :accessibility-label :rename-key-pair
+         :label               (i18n/label :t/rename-key-pair)
+         :on-press            #(on-rename-request data)}])]]])

src/status_im/contexts/settings/wallet/keypairs_and_accounts/rename/style.cljs

@@ -0,0 +1,11 @@
+(ns status-im.contexts.settings.wallet.keypairs-and-accounts.rename.style)
+
+(def header-container
+  {:margin-bottom 8})
+
+(def bottom-action
+  {:margin-horizontal -20})
+
+(def error-container
+  {:margin-left     20
+   :margin-vertical 8})

src/status_im/contexts/settings/wallet/keypairs_and_accounts/rename/view.cljs

@@ -0,0 +1,84 @@
+(ns status-im.contexts.settings.wallet.keypairs-and-accounts.rename.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.common.floating-button-page.view :as floating-button-page]
+            [status-im.common.validation.keypair :as keypair-validator]
+            [status-im.constants :as constants]
+            [status-im.contexts.settings.wallet.keypairs-and-accounts.rename.style :as style]
+            [utils.debounce :as debounce]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn navigate-back [] (rf/dispatch [:navigate-back]))
+
+(defn view
+  []
+  (let [{:keys [name key-uid]}                          (rf/sub [:get-screen-params])
+        customization-color                             (rf/sub [:profile/customization-color])
+        [unsaved-keypair-name set-unsaved-keypair-name] (rn/use-state name)
+        [error-msg set-error-msg]                       (rn/use-state nil)
+        [typing? set-typing?]                           (rn/use-state false)
+        validate-keypair-name                           (rn/use-callback
+                                                         (debounce/debounce
+                                                          (fn [name]
+                                                            (set-error-msg
+                                                             (keypair-validator/validation-keypair-name
+                                                              name))
+                                                            (set-typing? false))
+                                                          300))
+        on-change-text                                  (rn/use-callback (fn [text]
+                                                                           (set-typing? true)
+                                                                           (set-unsaved-keypair-name
+                                                                            text)
+                                                                           (validate-keypair-name text)))
+        on-clear                                        (rn/use-callback (fn []
+                                                                           (on-change-text "")))
+        on-save                                         (rn/use-callback #(rf/dispatch
+                                                                           [:wallet/rename-keypair
+                                                                            {:key-uid key-uid
+                                                                             :keypair-name
+                                                                             unsaved-keypair-name}])
+                                                                         [unsaved-keypair-name key-uid])]
+    [floating-button-page/view
+     {:header [quo/page-nav
+               {:icon-name           :i/close
+                :on-press            navigate-back
+                :accessibility-label :top-bar}]
+      :footer [quo/bottom-actions
+               {:actions          :one-action
+                :button-one-label (i18n/label :t/save)
+                :button-one-props {:disabled?           (or typing?
+                                                            (string/blank? unsaved-keypair-name)
+                                                            (not (string/blank? error-msg)))
+                                   :customization-color customization-color
+                                   :on-press            on-save}
+                :container-style  style/bottom-action}]}
+     [quo/page-top
+      {:container-style style/header-container
+       :title           (i18n/label :t/rename-key-pair)
+       :description     :context-tag
+       :context-tag     {:type    :icon
+                         :size    24
+                         :context name
+                         :icon    :i/seed-phrase}}]
+     [quo/input
+      {:container-style {:margin-horizontal 20}
+       :placeholder     (i18n/label :t/keypair-name-input-placeholder)
+       :label           (i18n/label :t/keypair-name)
+       :default-value   unsaved-keypair-name
+       :char-limit      constants/key-pair-name-max-length
+       :max-length      constants/key-pair-name-max-length
+       :auto-focus      true
+       :clearable?      (not (string/blank? unsaved-keypair-name))
+       :on-clear        on-clear
+       :on-change-text  on-change-text
+       :error?          (not (string/blank? error-msg))}]
+     (when-not (string/blank? error-msg)
+       [quo/info-message
+        {:type            :error
+         :size            :default
+         :icon            :i/info
+         :container-style style/error-container}
+        error-msg])]))
+

src/status_im/contexts/settings/wallet/keypairs_and_accounts/view.cljs

@@ -15,14 +15,15 @@
 
 (defn on-options-press
   [{:keys [theme]
-    :as   props}]
+    :as   props} keypair]
   (rf/dispatch [:show-bottom-sheet
-                {:content (fn [] [actions/view props])
+                {:content (fn [] [actions/view props keypair])
                  :theme   theme}]))
 
 (defn- keypair
   [{keypair-type :type
-    :keys        [accounts name]}
+    :keys        [accounts name]
+    :as          item}
    _ _
    {:keys [profile-picture compressed-key customization-color]}]
   (let [theme            (quo.theme/use-theme)
@@ -42,7 +43,8 @@
                                       :profile-picture     profile-picture)
                                (not default-keypair?)
                                (assoc :type        :keypair
-                                      :icon-avatar :i/seed))))
+                                      :icon-avatar :i/seed))
+                             item))
                           [customization-color default-keypair? name
                            profile-picture shortened-key theme])]
     [quo/keypair

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

@@ -33,11 +33,12 @@
           {:type     :wallet-networks
            :on-press #(rf/dispatch [:wallet/close-account-page])}]
          [quo/account-overview
-          {:current-value       formatted-balance
+          {:container-style     style/account-overview
+           :current-value       formatted-balance
            :account-name        name
            :account             (if watch-only? :watched-address :default)
            :customization-color color}]
-         [quo/wallet-graph {:time-frame :empty}]
+         (when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])
          (when (not watch-only?)
            [quo/wallet-ctas
             {:container-style style/cta-buttons

src/status_im/contexts/wallet/add_account/create_account/events.cljs

@@ -90,3 +90,18 @@
                        (cske/transform-keys transforms/->kebab-case-keyword derived-address)))}))
 
 (rf/reg-event-fx :wallet/get-derived-addresses-success get-derived-addresses-success)
+
+(rf/reg-event-fx
+ :wallet/set-private-key
+ (fn [{:keys [db]} [value]]
+   {:db (assoc-in db [:wallet :ui :create-account :private-key] (security/mask-data value))}))
+
+(rf/reg-event-fx
+ :wallet/set-public-address
+ (fn [{:keys [db]} [value]]
+   {:db (assoc-in db [:wallet :ui :create-account :public-address] value)}))
+
+(rf/reg-event-fx
+ :wallet/clear-private-key-data
+ (fn [{:keys [db]} _]
+   {:db (update-in db [:wallet :ui :create-account] dissoc :private-key :public-address)}))

src/status_im/contexts/wallet/add_account/create_account/import_private_key/view.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.add-account.create-account.import-private-key.view
   (:require
+    [clojure.string :as string]
     [quo.core :as quo]
     [quo.theme :as theme]
     [react-native.clipboard :as clipboard]
@@ -12,45 +13,50 @@
     [utils.re-frame :as rf]))
 
 (defn- address-input
-  [{:keys [input-value set-input-value set-flow-state error?]}]
-  (let [check-address (rn/use-callback
-                       (debounce/debounce (fn [v]
-                                            (if (empty? v)
-                                              (set-flow-state nil)
-                                              ;; TODO check for validation
-                                              (if-not (v/private-key? v)
-                                                (set-flow-state :invalid-private-key)
-                                                ;; TODO add real requests
-                                                (do
-                                                  (set-flow-state :scanning)
-                                                  (js/setTimeout
-                                                   set-flow-state
-                                                   400
-                                                   (rand-nth [:active-address :inactive-address]))))))
-                                          500))
-        on-change     (rn/use-callback
-                       (fn [v]
-                         (set-input-value v)
-                         (check-address v)))
-        on-paste      (rn/use-callback
-                       (fn []
-                         (clipboard/get-string
-                          (fn [clipboard]
-                            (when-not (empty? clipboard)
-                              (on-change clipboard))))))]
+  [{:keys [input-value set-flow-state error?]}]
+  (let [check-address
+        (rn/use-callback
+         (debounce/debounce
+          (fn [v]
+            (if (empty? v)
+              (set-flow-state nil)
+              ;; TODO check for validation
+              (if-not (v/private-key? v)
+                (set-flow-state :invalid-private-key)
+                ;; TODO add real requests
+                (do
+                  (set-flow-state :scanning)
+                  ;; TODO get real address
+                  ;; Should be fixed in #18819
+                  (rf/dispatch [:wallet/set-public-address
+                                "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"])
+                  (js/setTimeout set-flow-state 400 (rand-nth [:active-address :inactive-address]))))))
+          500))
+
+        on-change (rn/use-callback
+                   (fn [v]
+                     (rf/dispatch [:wallet/set-private-key v])
+                     (check-address v)))
+        on-paste (rn/use-callback
+                  (fn []
+                    (clipboard/get-string
+                     (fn [clipboard]
+                       (when-not (empty? clipboard)
+                         (on-change clipboard))))))]
     [quo/input
-     {:accessibility-label :add-address-to-watch
+     {:accessibility-label :import-private-key
       :placeholder         (i18n/label :t/enter-private-key-placeholder)
       :container-style     style/input
       :label               (i18n/label :t/private-key)
       :type                :password
       :error?              error?
       :return-key-type     :done
+      :auto-focus          true
       :on-change-text      on-change
       :button              (when (empty? input-value)
                              {:on-press on-paste
                               :text     (i18n/label :t/paste)})
-      :value               input-value}]))
+      :default-value       input-value}]))
 
 (defn- activity-indicator
   [state]
@@ -84,13 +90,29 @@
               :style style/indicator)
        (i18n/label message)])))
 
+(defn on-unmount
+  []
+  (rf/dispatch [:wallet/clear-private-key-data]))
+
+(defn navigate-back
+  []
+  (rf/dispatch [:navigate-back]))
+
+(defn navigate-to-keypair-import
+  []
+  (rf/dispatch [:navigate-to
+                :screen/wallet.keypair-name
+                {:workflow :import-private-key}]))
+
 (defn view
   []
-  (let [theme                         (theme/use-theme)
-        customization-color           (rf/sub [:profile/customization-color])
-        [input-value set-input-value] (rn/use-state "")
-        [flow-state set-flow-state]   (rn/use-state)
-        error?                        (= :invalid-private-key flow-state)]
+  (let [theme                       (theme/use-theme)
+        customization-color         (rf/sub [:profile/customization-color])
+        private-key                 (rf/sub [:wallet/import-private-key])
+        public-address              (rf/sub [:wallet/public-address])
+        [flow-state set-flow-state] (rn/use-state nil)
+        error?                      (= :invalid-private-key flow-state)]
+    (rn/use-unmount on-unmount)
     [rn/view {:flex 1}
      [floating-button-page/view
       {:customization-color customization-color
@@ -98,7 +120,7 @@
                              {:background :white
                               :type       :no-title
                               :icon-name  :i/close
-                              :on-press   #(rf/dispatch [:navigate-back])}]
+                              :on-press   navigate-back}]
        :footer              [:<>
                              (when-not (#{:active-address :inactive-address} flow-state)
                                [quo/information-box
@@ -108,8 +130,8 @@
                                 (i18n/label :t/import-private-key-info)])
                              [quo/button
                               {:customization-color customization-color
-                               :disabled?           (or (empty? input-value) error?)
-                               :on-press            #()}
+                               :disabled?           (or (string/blank? private-key) error?)
+                               :on-press            navigate-to-keypair-import}
                               (i18n/label :t/continue)]]}
       [quo/page-top
        {:container-style  style/page-top
@@ -117,17 +139,16 @@
         :description      :text
         :description-text (i18n/label :t/enter-private-key)}]
       [address-input
-       {:input-value     input-value
-        :set-input-value set-input-value
-        :set-flow-state  set-flow-state
-        :error?          error?}]
+       {:input-value    private-key
+        :set-flow-state set-flow-state
+        :error?         error?}]
       (when (#{:scanning :active-address :inactive-address} flow-state)
         [rn/view {:style style/key-section}
          [quo/section-label
           {:section         (i18n/label :t/private-key-public-address)
            :container-style style/section-label}]
-         ;; TODO Get real address
-         [rn/view {:style (style/public-address flow-state theme)}
-          [quo/text "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"]]])
-      (when (seq input-value)
+         (when (seq public-address)
+           [rn/view {:style (style/public-address flow-state theme)}
+            [quo/text public-address]])])
+      (when (seq private-key)
         [activity-indicator flow-state])]]))

src/status_im/contexts/wallet/add_account/create_account/key_pair_name/style.cljs

@@ -0,0 +1,12 @@
+(ns status-im.contexts.wallet.add-account.create-account.key-pair-name.style)
+
+(def page-top
+  {:margin-top 2})
+
+(def input
+  {:padding-top        12
+   :padding-horizontal 20})
+
+(def error-container
+  {:padding-horizontal 20
+   :padding-vertical   8})

src/status_im/contexts/wallet/add_account/create_account/key_pair_name/view.cljs

@@ -0,0 +1,92 @@
+(ns status-im.contexts.wallet.add-account.create-account.key-pair-name.view
+  (:require
+    [clojure.string :as string]
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.common.floating-button-page.view :as floating-button-page]
+    [status-im.common.not-implemented :as not-implemented]
+    [status-im.common.validation.general :as validators]
+    [status-im.constants :as constants]
+    [status-im.contexts.wallet.add-account.create-account.key-pair-name.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(def error-messages
+  {:too-long     (i18n/label :t/key-name-error-length)
+   :too-short    (i18n/label :t/key-name-error-too-short {:count constants/key-pair-name-min-length})
+   :emoji        (i18n/label :t/key-name-error-emoji)
+   :special-char (i18n/label :t/key-name-error-special-char)})
+
+(defn navigate-back
+  []
+  (rf/dispatch [:navigate-back]))
+
+(defn view
+  []
+  (let [{:keys [workflow]}                (rf/sub [:get-screen-params])
+        customization-color               (rf/sub [:profile/customization-color])
+        [key-pair-name set-key-pair-name] (rn/use-state "")
+        [error set-error]                 (rn/use-state nil)
+        on-change-text                    (rn/use-callback
+                                           (fn [value]
+                                             (set-key-pair-name value)
+                                             (cond
+                                               (> (count value) constants/key-pair-name-max-length)
+                                               (set-error :too-long)
+
+                                               (< 0 (count value) constants/key-pair-name-min-length)
+                                               (set-error :too-short)
+
+                                               (validators/has-emojis? value)
+                                               (set-error :emoji)
+
+                                               (validators/has-special-characters? value)
+                                               (set-error :special-char)
+
+                                               :else (set-error nil))))
+        on-continue                       (rn/use-callback
+                                           (fn [_]
+                                             (case workflow
+                                               ;; TODO issue #19759. Implement creation account from
+                                               ;; private key
+                                               :import-private-key
+                                               (not-implemented/alert)
+
+                                               :new-key-pair
+                                               (rf/dispatch [:wallet/new-keypair-continue
+                                                             {:keypair-name key-pair-name}])
+                                               (js/alert "Unknown workflow")))
+                                           [workflow key-pair-name])
+        disabled?                         (or (some? error) (string/blank? key-pair-name))]
+    [rn/view {:style {:flex 1}}
+     [floating-button-page/view
+      {:customization-color customization-color
+       :header              [quo/page-nav
+                             {:icon-name           :i/arrow-left
+                              :on-press            navigate-back
+                              :accessibility-label :top-bar}]
+       :footer              [quo/button
+                             {:customization-color customization-color
+                              :disabled?           disabled?
+                              :on-press            on-continue}
+                             (i18n/label :t/continue)]}
+      [quo/page-top
+       {:title            (i18n/label :t/keypair-name)
+        :description-text (i18n/label :t/keypair-name-description)
+        :description      :text
+        :container-style  style/page-top}]
+      [quo/input
+       {:container-style style/input
+        :placeholder     (i18n/label :t/keypair-name-input-placeholder)
+        :label           (i18n/label :t/keypair-name)
+        :char-limit      constants/key-pair-name-max-length
+        :auto-focus      true
+        :on-change-text  on-change-text
+        :error           error}]
+      (when error
+        [quo/info-message
+         {:type            :error
+          :size            :default
+          :icon            :i/info
+          :container-style style/error-container}
+         (get error-messages error)])]]))

src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs

@@ -81,7 +81,8 @@
                                                 (reset! show-error? false)
                                                 (when (= @quiz-index questions-count)
                                                   (rf/dispatch [:navigate-to
-                                                                :screen/wallet.keypair-name])))
+                                                                :screen/wallet.keypair-name
+                                                                {:workflow :new-key-pair}])))
                                               (do
                                                 (when (> @incorrect-count 0)
                                                   (rf/dispatch [:show-bottom-sheet

src/status_im/contexts/wallet/add_account/create_account/new_keypair/keypair_name/style.cljs

@@ -1,13 +0,0 @@
-(ns status-im.contexts.wallet.add-account.create-account.new-keypair.keypair-name.style)
-
-(def header-container
-  {:margin-horizontal 20
-   :margin-top        12
-   :margin-bottom     20})
-
-(def bottom-action
-  {:margin-horizontal -20})
-
-(def error-container
-  {:margin-left     20
-   :margin-vertical 8})

src/status_im/contexts/wallet/add_account/create_account/new_keypair/keypair_name/view.cljs

@@ -1,75 +0,0 @@
-(ns status-im.contexts.wallet.add-account.create-account.new-keypair.keypair-name.view
-  (:require
-    [quo.core :as quo]
-    [react-native.core :as rn]
-    [status-im.common.floating-button-page.view :as floating-button-page]
-    [status-im.common.validation.general :as validators]
-    [status-im.contexts.wallet.add-account.create-account.new-keypair.keypair-name.style :as style]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
-
-(def keypair-name-max-length 15)
-(def keypair-name-min-length 5)
-
-(def error-messages
-  {:length       (i18n/label :t/key-name-error-length)
-   :emoji        (i18n/label :t/key-name-error-emoji)
-   :special-char (i18n/label :t/key-name-error-special-char)})
-
-(defn navigate-back [] (rf/dispatch [:navigate-back]))
-
-(defn view
-  []
-  (let [[keypair-name set-keypair-name] (rn/use-state "")
-        customization-color             (rf/sub [:profile/customization-color])
-        [error set-error]               (rn/use-state false)
-        on-change-text                  (rn/use-callback (fn [value]
-                                                           (set-keypair-name value)
-                                                           (cond
-                                                             (> (count value) keypair-name-max-length)
-                                                             (set-error :length)
-                                                             (validators/has-emojis? value) (set-error
-                                                                                             :emoji)
-                                                             (validators/has-special-characters? value)
-                                                             (set-error :special-char)
-                                                             :else (set-error nil))))
-        on-continue                     (rn/use-callback #(rf/dispatch [:wallet/new-keypair-continue
-                                                                        {:keypair-name
-                                                                         keypair-name}])
-                                                         [keypair-name])]
-    [rn/view {:style {:flex 1}}
-     [floating-button-page/view
-      {:header [quo/page-nav
-                {:icon-name           :i/arrow-left
-                 :on-press            navigate-back
-                 :accessibility-label :top-bar}]
-       :footer [quo/bottom-actions
-                {:actions          :one-action
-                 :button-one-label (i18n/label :t/continue)
-                 :button-one-props {:disabled?           (or (pos? error)
-                                                             (< (count keypair-name)
-                                                                keypair-name-min-length)
-                                                             (> (count keypair-name)
-                                                                keypair-name-max-length))
-                                    :customization-color customization-color
-                                    :on-press            on-continue}
-                 :container-style  style/bottom-action}]}
-      [quo/text-combinations
-       {:container-style style/header-container
-        :title           (i18n/label :t/keypair-name)
-        :description     (i18n/label :t/keypair-name-description)}]
-      [quo/input
-       {:container-style {:margin-horizontal 20}
-        :placeholder     (i18n/label :t/keypair-name-input-placeholder)
-        :label           (i18n/label :t/keypair-name)
-        :char-limit      keypair-name-max-length
-        :auto-focus      true
-        :on-change-text  on-change-text
-        :error           error}]
-      (when error
-        [quo/info-message
-         {:type            :error
-          :size            :default
-          :icon            :i/info
-          :container-style style/error-container}
-         (get error-messages error)])]]))

src/status_im/contexts/wallet/collectible/options/view.cljs

@@ -1,7 +1,6 @@
 (ns status-im.contexts.wallet.collectible.options.view
   (:require
     [quo.core :as quo]
-    [react-native.platform :as platform]
     [status-im.contexts.wallet.common.utils.external-links :as external-links]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
@@ -28,10 +27,9 @@
                                 [:lightbox/save-image-to-gallery
                                  uri
                                  #(rf/dispatch [:toasts/upsert
-                                                {:id              :random-id
-                                                 :type            :positive
-                                                 :container-style {:bottom (when platform/android? 20)}
-                                                 :text            (i18n/label :t/photo-saved)}])]))}]
+                                                {:id   :random-id
+                                                 :type :positive
+                                                 :text (i18n/label :t/photo-saved)}])]))}]
       [{:icon                :i/share
         :accessibility-label :share-collectible
         :label               (i18n/label :t/share-collectible)

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

@@ -18,7 +18,8 @@
   [rn/view {:style style/header}
    [quo/text
     {:weight :semi-bold
-     :size   :heading-1} collectible-name]
+     :size   :heading-1}
+    collectible-name]
    [rn/view {:style style/collection-container}
     [rn/view {:style style/collection-avatar-container}
      [quo/collection-avatar {:image collection-image-url}]]
@@ -28,7 +29,7 @@
      collection-name]]])
 
 (defn cta-buttons
-  [{:keys [chain-id token-id contract-address watch-only?]}]
+  [{:keys [chain-id token-id contract-address collectible watch-only?]}]
   (let [theme (quo.theme/use-theme)]
     [rn/view {:style style/buttons-container}
      (when-not watch-only?
@@ -36,7 +37,11 @@
         {:container-style style/send-button
          :type            :outline
          :size            40
-         :icon-left       :i/send}
+         :icon-left       :i/send
+         :on-press        #(rf/dispatch
+                            [:wallet/set-collectible-to-send
+                             {:collectible    collectible
+                              :current-screen :screen/wallet.collectible}])}
         (i18n/label :t/send)])
      [quo/button
       {:container-style  style/opensea-button
@@ -106,7 +111,8 @@
                                                                           {:name  collectible-name
                                                                            :image preview-uri}])
                                                          :theme   theme}])}]
-                           :picture     preview-uri}}
+                           :picture     preview-uri
+                           :blur?       true}}
          [rn/view {:style style/container}
           [quo/expanded-collectible
            {:image-src       preview-uri
@@ -133,7 +139,8 @@
            {:chain-id         chain-id
             :token-id         token-id
             :contract-address contract-address
-            :watch-only?      (:watch-only? collectible-owner)}]
+            :watch-only?      false ;(:watch-only? collectible-owner)
+            :collectible      collectible}]
           [quo/tabs
            {:size           32
             :style          style/tabs

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

@@ -4,6 +4,7 @@
     [status-im.contexts.wallet.sheets.account-options.view :as account-options]
     [status-im.contexts.wallet.sheets.network-filter.view :as network-filter]
     [status-im.contexts.wallet.sheets.select-account.view :as select-account]
+    [status-im.feature-flags :as ff]
     [utils.re-frame :as rf]))
 
 (defn get-bottom-sheet-args
@@ -18,11 +19,12 @@
   [{:keys [type on-press accessibility-label icon-name switcher-type margin-top]
     :or   {icon-name           :i/close
            accessibility-label :top-bar
-           switcher-type       :account-options}}]
+           switcher-type       :account-options
+           type                :no-title}}]
   (let [{:keys [color emoji watch-only?]} (rf/sub [:wallet/current-viewing-account])
         networks                          (rf/sub [:wallet/selected-network-details])]
     [quo/page-nav
-     {:type                (or type :no-title)
+     {:type                type
       :icon-name           icon-name
       :margin-top          margin-top
       :background          :blur
@@ -30,9 +32,14 @@
       :accessibility-label accessibility-label
       :networks            networks
       :networks-on-press   #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])
-      :right-side          :account-switcher
-      :account-switcher    {:customization-color color
-                            :on-press            #(rf/dispatch [:show-bottom-sheet
-                                                                (get-bottom-sheet-args switcher-type)])
-                            :emoji               emoji
-                            :type                (when watch-only? :watch-only)}}]))
+      :right-side          [(when (and (ff/enabled? ::ff/wallet.wallet-connect)
+                                       (not watch-only?))
+                              {:icon-name :i/dapps
+                               :on-press  #(rf/dispatch [:navigate-to :screen/wallet.connected-dapps])})
+
+                            {:content-type        :account-switcher
+                             :customization-color color
+                             :on-press            #(rf/dispatch [:show-bottom-sheet
+                                                                 (get-bottom-sheet-args switcher-type)])
+                             :emoji               emoji
+                             :type                (when watch-only? :watch-only)}]}]))

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

@@ -1,17 +1,26 @@
 (ns status-im.contexts.wallet.common.scan-account.view
-  (:require [status-im.common.scan-qr-code.view :as scan-qr-code]
+  (:require [clojure.string :as string]
+            [status-im.common.scan-qr-code.view :as scan-qr-code]
             [status-im.constants :as constants]
             [utils.debounce :as debounce]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(defn- contains-address?
+(def ^:private supported-networks #{:eth :arb1 :opt})
+
+(defn- contains-supported-address?
   [s]
-  (boolean (re-find constants/regx-address-contains s)))
+  (let [address?   (boolean (re-find constants/regx-address-contains s))
+        networks   (when address?
+                     (as-> s $
+                       (string/split $ ":")
+                       (butlast $)))
+        supported? (every? supported-networks (map keyword networks))]
+    (and address? supported?)))
 
 (defn- extract-address
   [scanned-text]
-  (first (re-seq constants/regx-address-contains scanned-text)))
+  (first (re-seq constants/regx-multichain-address scanned-text)))
 
 (defn view
   []
@@ -20,7 +29,7 @@
      {:title           (i18n/label :t/scan-qr)
       :subtitle        (i18n/label :t/scan-an-account-qr-code)
       :error-message   (i18n/label :t/oops-this-qr-does-not-contain-an-address)
-      :validate-fn     #(contains-address? %)
+      :validate-fn     #(contains-supported-address? %)
       :on-success-scan (fn [result]
                          (let [address (extract-address result)]
                            (when on-result (on-result address))

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

@@ -15,16 +15,14 @@
    :right-icon          :i/external})
 
 (defn- action-send
-  [token-data]
+  [send-params]
   {:icon                :i/send
    :accessibility-label :send
    :label               (i18n/label :t/send)
    :on-press            (fn []
                           (rf/dispatch [:hide-bottom-sheet])
                           (rf/dispatch [:wallet/clean-send-data])
-                          (rf/dispatch [:wallet/send-select-token
-                                        {:token       token-data
-                                         :start-flow? true}]))})
+                          (rf/dispatch [:wallet/set-token-to-send send-params]))})
 
 (defn- action-receive
   []
@@ -59,14 +57,21 @@
 
 (defn token-value-drawer
   [token watch-only?]
-  (let [token-data (first (rf/sub [:wallet/current-viewing-account-tokens-filtered (:token token)]))]
+  (let [token-symbol      (:token token)
+        token-data        (first (rf/sub [:wallet/current-viewing-account-tokens-filtered token-symbol]))
+        selected-account? (rf/sub [:wallet/current-viewing-account-address])
+        send-params       (if selected-account?
+                            {:token       token-data
+                             :start-flow? true}
+                            {:token-symbol token-symbol
+                             :start-flow?  true})]
     [quo/action-drawer
      [(cond->> [(when (ff/enabled? ::ff/wallet.assets-modal-manage-tokens)
                   (action-manage-tokens watch-only?))
                 (when (ff/enabled? ::ff/wallet.assets-modal-hide)
                   (action-hide))]
         (not watch-only?) (concat [(action-buy)
-                                   (action-send token-data)
+                                   (action-send send-params)
                                    (action-receive)
                                    (action-bridge token-data)]))]]))
 

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

@@ -271,3 +271,10 @@
     (str (get-in collectible [:id :contract-id :address])
          ":"
          (get-in collectible [:id :token-id]))))
+
+(defn get-token-from-account
+  [db token-symbol address]
+  (let [address-tokens (-> db :wallet :accounts (get address) :tokens)]
+    (some #(when (= token-symbol (:symbol %))
+             %)
+          address-tokens)))

src/status_im/contexts/wallet/connected_dapps/style.cljs

@@ -0,0 +1,17 @@
+(ns status-im.contexts.wallet.connected-dapps.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def screen-padding 20)
+
+(def header-container
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :padding-horizontal screen-padding
+   :margin-vertical    12})
+
+(defn header-text
+  [bottom-padding?]
+  {:padding-horizontal screen-padding
+   :padding-top        12
+   :padding-bottom     (when bottom-padding? 8)
+   :color              colors/black})

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

@@ -0,0 +1,29 @@
+(ns status-im.contexts.wallet.connected-dapps.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.contexts.wallet.connected-dapps.style :as style]
+    [utils.re-frame :as rf]))
+
+(defn- header
+  [{:keys [title subtitle]}]
+  [:<>
+   [rn/view {:style style/header-container}
+    [quo/button
+     {:icon-only?          true
+      :type                :grey
+      :background          :blur
+      :size                32
+      :accessibility-label :close-scan-qr-code
+      :on-press            #(rf/dispatch [:navigate-back])}
+     :i/close]]
+   [quo/text
+    {:size   :heading-1
+     :weight :semi-bold
+     :style  (style/header-text (when subtitle true))}
+    title]])
+
+(defn view
+  []
+  [rn/view {:style {:flex 1}}
+   [header {:title "Connected dApps"}]])

src/status_im/contexts/wallet/events.cljs

@@ -4,6 +4,7 @@
     [clojure.string :as string]
     [react-native.platform :as platform]
     [status-im.constants :as constants]
+    [status-im.contexts.settings.wallet.events]
     [status-im.contexts.wallet.common.utils.networks :as network-utils]
     [status-im.contexts.wallet.data-store :as data-store]
     [status-im.contexts.wallet.db :as db]

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

@@ -2,13 +2,10 @@
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
+    [status-im.contexts.wallet.common.token-value.view :as token-value]
     [status-im.contexts.wallet.home.tabs.assets.style :as style]
     [utils.re-frame :as rf]))
 
-(defn- token-value
-  [item & _rest]
-  [quo/token-value item])
-
 (defn view
   []
   (let [tokens-loading?  (rf/sub [:wallet/tokens-loading?])
@@ -19,6 +16,6 @@
         :parent-height 560
         :animated?     false}]
       [rn/flat-list
-       {:render-fn               token-value
+       {:render-fn               token-value/view
         :data                    tokens
         :content-container-style style/list-container}])))

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

@@ -4,6 +4,7 @@
     [clojure.string :as string]
     [native-module.core :as native-module]
     [status-im.constants :as constants]
+    [status-im.contexts.wallet.collectible.utils :as collectible.utils]
     [status-im.contexts.wallet.common.utils :as utils]
     [status-im.contexts.wallet.common.utils.networks :as network-utils]
     [status-im.contexts.wallet.send.utils :as send-utils]
@@ -136,13 +137,20 @@
          receiver-networks   (network-utils/resolve-receiver-networks
                               {:prefix           prefix
                                :testnet-enabled? testnet-enabled?
-                               :goerli-enabled?  goerli-enabled?})]
+                               :goerli-enabled?  goerli-enabled?})
+         collectible-tx?     (= (-> db :wallet :ui :send :tx-type) :collectible)
+         collectible         (when collectible-tx?
+                               (-> db :wallet :ui :send :collectible))
+         one-collectible?    (when collectible-tx?
+                               (= (collectible.utils/collectible-balance collectible) 1))]
      {:db (-> db
               (assoc-in [:wallet :ui :send :recipient] (or recipient address))
               (assoc-in [:wallet :ui :send :to-address] to-address)
               (assoc-in [:wallet :ui :send :address-prefix] prefix)
               (assoc-in [:wallet :ui :send :receiver-networks] receiver-networks))
-      :fx [[:dispatch
+      :fx [(when (and collectible-tx? one-collectible?)
+             [:dispatch [:wallet/get-suggested-routes {:amount 1}]])
+           [:dispatch
             [:wallet/wizard-navigate-forward
              {:current-screen stack-id
               :start-flow?    start-flow?
@@ -163,12 +171,16 @@
       :fx [[:dispatch [:wallet/get-suggested-routes {:amount amount}]]]})))
 
 (rf/reg-event-fx
- :wallet/send-select-token
- (fn [{:keys [db]} [{:keys [token stack-id start-flow?]}]]
-   {:db (-> db
-            (update-in [:wallet :ui :send] dissoc :collectible)
-            (assoc-in [:wallet :ui :send :token] token)
-            (assoc-in [:wallet :ui :send :token-display-name] (:symbol token)))
+ :wallet/set-token-to-send
+ (fn [{:keys [db]} [{:keys [token-symbol token stack-id start-flow?]}]]
+   ;; `token` is a map extracted from the sender, but in the wallet home page we don't know the
+   ;; sender yet, so we only provide the `token-symbol`, later in
+   ;; `:wallet/select-from-account` the `token` key will be set.
+   {:db (cond-> db
+          :always      (update-in [:wallet :ui :send] dissoc :collectible)
+          :always      (assoc-in [:wallet :ui :send :token-display-name] (:symbol token))
+          token        (assoc-in [:wallet :ui :send :token] token)
+          token-symbol (assoc-in [:wallet :ui :send :token-symbol] token-symbol))
     :fx [[:dispatch [:wallet/clean-suggested-routes]]
          [:dispatch
           [:wallet/wizard-navigate-forward
@@ -198,38 +210,49 @@
                      :collectible
                      :token-display-name
                      :amount
-                     (when (= transaction-type :collecible) :tx-type))})))
+                     (when (= transaction-type :collectible) :tx-type))})))
 
-(rf/reg-event-fx :wallet/send-collectibles-amount
- (fn [{:keys [db]} [{:keys [collectible stack-id amount]}]]
+(rf/reg-event-fx
+ :wallet/set-collectible-to-send
+ (fn [{db :db} [{:keys [collectible current-screen]}]]
    (let [collection-data    (:collection-data collectible)
          collectible-data   (:collectible-data collectible)
          collectible-id     (get-in collectible [:id :token-id])
+         one-collectible?   (= (collectible.utils/collectible-balance collectible) 1)
          token-display-name (cond
                               (and collectible
                                    (not (string/blank? (:name collectible-data))))
                               (:name collectible-data)
 
                               collectible
-                              (str (:name collection-data) " #" collectible-id))]
-     {:db (-> db
-              (update-in [:wallet :ui :send] dissoc :token)
-              (assoc-in [:wallet :ui :send :collectible] collectible)
-              (assoc-in [:wallet :ui :send :token-display-name] token-display-name)
-              (assoc-in [:wallet :ui :send :tx-type] :collectible)
-              (assoc-in [:wallet :ui :send :amount] amount))
-      :fx [[:dispatch [:wallet/get-suggested-routes {:amount amount}]]
-           [:navigate-to-within-stack [:screen/wallet.transaction-confirmation stack-id]]]})))
+                              (str (:name collection-data) " #" collectible-id))
+         collectible-tx     (-> db
+                                (update-in [:wallet :ui :send] dissoc :token)
+                                (assoc-in [:wallet :ui :send :collectible] collectible)
+                                (assoc-in [:wallet :ui :send :token-display-name] token-display-name)
+                                (assoc-in [:wallet :ui :send :tx-type] :collectible))
+         recipient-set?     (-> db :wallet :ui :send :recipient)]
+     {:db (cond-> collectible-tx
+            one-collectible? (assoc-in [:wallet :ui :send :amount] 1))
+      :fx [(when (and one-collectible? recipient-set?)
+             [:dispatch [:wallet/get-suggested-routes {:amount 1}]])
+           [:dispatch
+            [:wallet/wizard-navigate-forward
+             {:current-screen current-screen
+              :flow-id        :wallet-send-flow}]]]})))
 
-(rf/reg-event-fx :wallet/select-collectibles-amount
- (fn [{:keys [db]} [{:keys [collectible stack-id]}]]
-   {:db (-> db
-            (update-in [:wallet :ui :send] dissoc :token)
-            (assoc-in [:wallet :ui :send :collectible] collectible)
-            (assoc-in [:wallet :ui :send :tx-type] :collectible))
-    :fx [[:navigate-to-within-stack [:screen/wallet.select-collectible-amount stack-id]]]}))
+(rf/reg-event-fx
+ :wallet/set-collectible-amount-to-send
+ (fn [{db :db} [{:keys [stack-id amount]}]]
+   {:db (assoc-in db [:wallet :ui :send :amount] amount)
+    :fx [[:dispatch [:wallet/get-suggested-routes {:amount amount}]]
+         [:dispatch
+          [:wallet/wizard-navigate-forward
+           {:current-screen stack-id
+            :flow-id        :wallet-send-flow}]]]}))
 
-(rf/reg-event-fx :wallet/send-select-amount
+(rf/reg-event-fx
+ :wallet/set-token-amount-to-send
  (fn [{:keys [db]} [{:keys [amount stack-id start-flow?]}]]
    {:db (assoc-in db [:wallet :ui :send :amount] amount)
     :fx [[:dispatch
@@ -503,10 +526,21 @@
 
 (rf/reg-event-fx
  :wallet/select-from-account
- (fn [_ [{:keys [address stack-id start-flow?]}]]
-   {:fx [[:dispatch [:wallet/switch-current-viewing-account address]]
-         [:dispatch
-          [:wallet/wizard-navigate-forward
-           {:current-screen stack-id
-            :start-flow?    start-flow?
-            :flow-id        :wallet-send-flow}]]]}))
+ (fn [{db :db} [{:keys [address stack-id start-flow?]}]]
+   (let [token-symbol (-> db :wallet :ui :send :token-symbol)
+         token        (when token-symbol
+                        ;; When this flow has started in the wallet home page, we know the
+                        ;; token or collectible to send, but we don't know from which
+                        ;; account, so we extract the token data from the picked account.
+                        (utils/get-token-from-account db token-symbol address))]
+     {:db (if token-symbol
+            (-> db
+                (assoc-in [:wallet :ui :send :token] token)
+                (update-in [:wallet :ui :send] dissoc :token-symbol))
+            db)
+      :fx [[:dispatch [:wallet/switch-current-viewing-account address]]
+           [:dispatch
+            [:wallet/wizard-navigate-forward
+             {:current-screen stack-id
+              :start-flow?    start-flow?
+              :flow-id        :wallet-send-flow}]]]})))

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

@@ -1,13 +1,30 @@
 (ns status-im.contexts.wallet.send.flow-config)
 
+(defn- collectible-selected?
+  [db]
+  (let [collectible-stored (-> db :wallet :ui :send :collectible)
+        tx-type            (-> db :wallet :ui :send :tx-type)]
+    (and (some? collectible-stored)
+         (= tx-type :collectible))))
+
+(defn- token-selected?
+  [db]
+  (-> db :wallet :ui :send :token some?))
+
 (def steps
   [{:screen-id  :screen/wallet.select-from
     :skip-step? (fn [db] (some? (get-in db [:wallet :current-viewing-account-address])))}
    {:screen-id  :screen/wallet.select-address
     :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :recipient])))}
    {:screen-id  :screen/wallet.select-asset
-    :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :token])))}
+    :skip-step? (fn [db] (or (token-selected? db) (collectible-selected? db)))}
    {:screen-id  :screen/wallet.send-input-amount
-    :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :amount])))}
+    :skip-step? (fn [db]
+                  (or (not (token-selected? db))
+                      (some? (get-in db [:wallet :ui :send :amount]))))}
+   {:screen-id  :screen/wallet.select-collectible-amount
+    :skip-step? (fn [db]
+                  (or (not (collectible-selected? db))
+                      (some? (get-in db [:wallet :ui :send :amount]))))}
    {:screen-id :screen/wallet.transaction-confirmation}
    {:screen-id :screen/wallet.transaction-progress}])

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

@@ -97,7 +97,7 @@
       (let [[input-state set-input-state] (rn/use-state controlled-input/init-state)
             clear-input!                  #(set-input-state controlled-input/delete-all)
             handle-on-confirm             (fn []
-                                            (rf/dispatch [:wallet/send-select-amount
+                                            (rf/dispatch [:wallet/set-token-amount-to-send
                                                           {:amount   (controlled-input/input-value
                                                                       input-state)
                                                            :stack-id current-screen-id}]))

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

@@ -4,7 +4,6 @@
     [quo.core :as quo]
     [react-native.core :as rn]
     [reagent.core :as reagent]
-    [status-im.contexts.wallet.collectible.utils :as utils]
     [status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
     [status-im.contexts.wallet.common.asset-list.view :as asset-list]
     [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles-tab]
@@ -34,15 +33,10 @@
      {:collectibles         collectibles
       :filtered?            search-performed?
       :on-end-reached       #(rf/dispatch [:wallet/request-collectibles-for-current-viewing-account])
-      :on-collectible-press #(let [collectibles-count (utils/collectible-balance %)]
-                               (if (> collectibles-count 1)
-                                 (rf/dispatch [:wallet/select-collectibles-amount
-                                               {:collectible %
-                                                :stack-id    :screen/wallet.select-asset}])
-                                 (rf/dispatch [:wallet/send-collectibles-amount
-                                               {:collectible %
-                                                :amount      1
-                                                :stack-id    :screen/wallet.select-asset}])))}]))
+      :on-collectible-press (fn [collectible]
+                              (rf/dispatch [:wallet/set-collectible-to-send
+                                            {:collectible    collectible
+                                             :current-screen :screen/wallet.select-asset}]))}]))
 
 (defn- tab-view
   [search-text selected-tab on-change-text]
@@ -51,7 +45,7 @@
                                     (and (= selected-tab :tab/collectibles)
                                          (seq unfiltered-collectibles)))
         on-token-press          (fn [token]
-                                  (rf/dispatch [:wallet/send-select-token
+                                  (rf/dispatch [:wallet/set-token-to-send
                                                 {:token    token
                                                  :stack-id :screen/wallet.select-asset}]))]
     [:<>

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

@@ -55,10 +55,10 @@
        :status          (if incorrect-value? :error :default)}]
      [quo/bottom-actions
       {:actions          :one-action
-       :button-one-props {:on-press  #(rf/dispatch [:wallet/send-collectibles-amount
-                                                    {:collectible collectible
-                                                     :amount      value
-                                                     :stack-id    :screen/wallet.select-asset}])
+       :button-one-props {:on-press  #(rf/dispatch
+                                       [:wallet/set-collectible-amount-to-send
+                                        {:stack-id :screen/wallet.select-collectible-amount
+                                         :amount   value}])
                           :disabled? incorrect-value?}
        :button-one-label (i18n/label :t/confirm)}]
      [quo/numbered-keyboard

src/status_im/navigation/effects.cljs

@@ -205,7 +205,8 @@
                  :options (merge (options/statusbar-and-navbar-options (:theme opts) nil nil)
                                  {:layout  {:componentBackgroundColor :transparent
                                             :orientation              ["portrait"]}
-                                  :overlay {:interceptTouchOutside true}}
+                                  :overlay {:interceptTouchOutside true
+                                            :handleKeyboardEvents  true}}
                                  opts)}})))
 
 (rf/reg-fx :show-toasts

src/status_im/navigation/screens.cljs

@@ -57,6 +57,7 @@
     [status-im.contexts.profile.settings.screens.password.change-password.view :as change-password]
     [status-im.contexts.profile.settings.screens.password.view :as settings-password]
     [status-im.contexts.profile.settings.view :as settings]
+    [status-im.contexts.settings.wallet.keypairs-and-accounts.rename.view :as keypair-rename]
     [status-im.contexts.settings.wallet.keypairs-and-accounts.view :as keypairs-and-accounts]
     [status-im.contexts.settings.wallet.saved-addresses.view :as saved-addresses-settings]
     [status-im.contexts.settings.wallet.wallet-options.view :as wallet-options]
@@ -79,12 +80,12 @@
      wallet-edit-derivation-path]
     [status-im.contexts.wallet.add-account.create-account.import-private-key.view :as
      wallet-import-private-key]
+    [status-im.contexts.wallet.add-account.create-account.key-pair-name.view :as
+     wallet-key-pair-name]
     [status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.view :as
      wallet-backup-recovery-phrase]
     [status-im.contexts.wallet.add-account.create-account.new-keypair.check-your-backup.view :as
      wallet-check-your-backup]
-    [status-im.contexts.wallet.add-account.create-account.new-keypair.keypair-name.view :as
-     wallet-keypair-name]
     [status-im.contexts.wallet.add-account.create-account.select-keypair.view :as wallet-select-keypair]
     [status-im.contexts.wallet.add-account.create-account.view :as wallet-create-account]
     [status-im.contexts.wallet.bridge.bridge-to.view :as wallet-bridge-to]
@@ -92,6 +93,7 @@
     [status-im.contexts.wallet.bridge.select-asset.view :as wallet-bridge-select-asset]
     [status-im.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im.contexts.wallet.common.scan-account.view :as wallet-scan-address]
+    [status-im.contexts.wallet.connected-dapps.view :as wallet-connected-dapps]
     [status-im.contexts.wallet.save-address.view :as wallet-save-address]
     [status-im.contexts.wallet.send.from.view :as wallet-select-from]
     [status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
@@ -377,6 +379,10 @@
      :options   {:insets {:top? true}}
      :component wallet-accounts/view}
 
+    {:name      :screen/wallet.connected-dapps
+     :options   {:insets {:top? true}}
+     :component wallet-connected-dapps/view}
+
     {:name      :screen/wallet.edit-account
      :component wallet-edit-account/view}
 
@@ -428,8 +434,8 @@
      :component wallet-check-your-backup/view}
 
     {:name      :screen/wallet.keypair-name
-     :options   {:insets {:top? true :bottom? true}}
-     :component wallet-keypair-name/view}
+     :options   {:insets {:top? true}}
+     :component wallet-key-pair-name/view}
 
     {:name      :screen/wallet.enter-seed-phrase
      :component enter-seed-phrase/view}
@@ -498,6 +504,10 @@
      :options   options/transparent-modal-screen-options
      :component wallet-options/view}
 
+    {:name      :screen/settings.rename-keypair
+     :options   (assoc options/dark-screen :sheet? true)
+     :component keypair-rename/view}
+
     {:name      :screen/settings.saved-addresses
      :options   options/transparent-modal-screen-options
      :component saved-addresses-settings/view}

src/status_im/subs/wallet/wallet.cljs

@@ -5,7 +5,8 @@
             [status-im.contexts.wallet.common.utils :as utils]
             [status-im.contexts.wallet.common.utils.networks :as network-utils]
             [status-im.subs.wallet.add-account.address-to-watch]
-            [utils.number]))
+            [utils.number]
+            [utils.security.core :as security]))
 
 (defn- filter-networks
   [chain-ids network-details]
@@ -182,9 +183,10 @@
  :<- [:wallet/keypairs]
  (fn [keypairs [_ format-options]]
    (->> keypairs
-        (map (fn [{:keys [accounts name type]}]
+        (map (fn [{:keys [accounts name type key-uid]}]
                {:type     (keyword type)
                 :name     name
+                :key-uid  key-uid
                 :accounts (format-settings-keypair-accounts accounts format-options)})))))
 
 (rf/reg-sub
@@ -421,3 +423,16 @@
     {:tokens          tokens
      :currency        currency
      :currency-symbol currency-symbol})))
+
+(rf/reg-sub
+ :wallet/import-private-key
+ :<- [:wallet/create-account]
+ (fn [create-account]
+   (some-> create-account
+           :private-key
+           security/unmask)))
+
+(rf/reg-sub
+ :wallet/public-address
+ :<- [:wallet/create-account]
+ :-> :public-address)

status-go-version.json

@@ -3,7 +3,7 @@
     "_comment": "Instead use: scripts/update-status-go.sh <rev>",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "v0.179.13",
-    "commit-sha1": "f3f48654f54aebbb4949129f930fef648d8da8f9",
-    "src-sha256": "09gcr6fgx6v4qdp83w0n2ynnlvwjqid477jgpqjk57l5wfrv2raq"
+    "version": "v0.179.16",
+    "commit-sha1": "601c80fec2e6db76dd2f5d47fdc94492b5a618f5",
+    "src-sha256": "0g8ryxz6klqfn1avp66zkj44yrbhnck14lfhpyqj92caakz35m84"
 }

translations/en.json

@@ -1255,6 +1255,7 @@
     "remove-network": "Remove network",
     "remove-token": "Remove token",
     "removed": "removed",
+    "rename-key-pair": "Rename key pair",
     "repeat-pin": "Repeat new 6-digit passcode",
     "repeat-puk": "Repeat new 12-digit PUK",
     "report-bug-email-template": "1. Issue Description\n{{description}}\n\n\n2. Steps to reproduce\n{{steps}}\n\n\n3. Attach screenshots that can demo the problem, please\n",
@@ -2570,6 +2571,7 @@
     "keypair-name": "Key pair name",
     "keypair-name-description": "Name key pair for your own personal reference",
     "keypair-name-input-placeholder": "Collectibles account, Old vault....",
+    "key-pair-name-updated": "Key pair name updated",
     "goerli-testnet-toggle-confirmation": "Are you sure you want to toggle Goerli? This will log you out and you will have to login again.",
     "bridged-to": "Bridged to {{network}}",
     "slide-to-bridge": "Slide to bridge",
@@ -2590,9 +2592,12 @@
         "other": "{{count}} addresses"
     },
     "max": "Max: {{number}}",
+    "your-key-pair-name-is-too-long": "Your key pair name is too long",
+    "your-key-pair-name-is-too-short": "Your key pair name is too short",
     "key-name-error-length": "Key name too long",
     "key-name-error-emoji": "Emojis are not allowed",
     "key-name-error-special-char": "Special characters are not allowed",
+    "key-name-error-too-short": "Key pair name must be at least {{count}} characters",
     "display": "Display",
     "testnet-mode-enabled": "Testnet mode enabled",
     "online-community-member": "Online",