Merge branch 'develop' into 17842

src/quo/components/colors/color/constants.cljs

@@ -1,3 +1,3 @@
 (ns quo.components.colors.color.constants)
 
-(def ^:const color-size 48)
+(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)

src/quo/components/colors/color/style.cljs

@@ -1,13 +1,12 @@
 (ns quo.components.colors.color.style
   (:require
-    [quo.components.colors.color.constants :as constants]
     [quo.foundations.colors :as colors]
     [utils.responsiveness :as responsiveness]))
 
 (defn color-button-common
   [window-width]
-  {:width         constants/color-size
-   :height        constants/color-size
+  {:width         48
+   :height        48
    :border-width  4
    :border-radius 24
    :margin-right  (-> window-width

src/quo/components/colors/color_picker/component_spec.cljs

@@ -5,6 +5,10 @@
     [test-helpers.component :as h]))
 
 (h/describe "color-picker"
+  (h/test "color picker rendered"
+    (h/render [color-picker/view])
+    (-> (h/expect (h/get-all-by-label-text :color-picker-item))
+        (.toHaveLength 11)))
   (h/test "clicks on a color item"
     (let [event (h/mock-fn)]
       (h/render [color-picker/view {:on-change #(event)}])
@@ -16,6 +20,11 @@
       (h/render [color-picker/view {:on-change #(reset! selected %)}])
       (h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
       (-> (h/expect @selected)
-          (.toStrictEqual :blue)))))
+          (.toStrictEqual :blue))))
+  (h/test "all of the values of colors-list are rendered"
+    (h/render [color-picker/view])
+    (js/Promise.all (map (fn [color]
+                           (h/is-truthy (h/get-all-by-label-text color)))
+                         color-picker/color-list))))
 
 

src/quo/components/colors/color_picker/view.cljs

@@ -1,67 +1,39 @@
 (ns quo.components.colors.color-picker.view
   (:require
-    [quo.components.colors.color.constants :as constants]
     [quo.components.colors.color.view :as color]
-    [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
+(def color-list
+  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
+
 (defn- on-change-handler
   [selected color-name on-change]
   (reset! selected color-name)
   (when on-change (on-change color-name)))
 
-(defn get-item-layout
-  [_ index]
-  #js
-   {:length constants/color-size
-    :offset (* (+ constants/color-size 8) index)
-    :index  index})
-
-(defn- view-internal
+(defn view
   "Options
    - `default-selected` Default selected color name.
    - `on-change` Callback called when a color is selected `(fn [color-name])`.
    - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected blur? on-change feng-shui? container-style]}]
+  [{:keys [default-selected]}]
   (let [selected              (reagent/atom default-selected)
-        {window-width :width} (rn/get-window)
-        ref                   (atom nil)]
-    (rn/use-effect #(js/setTimeout (fn []
-                                     (.scrollToIndex ^js @ref
-                                                     #js
-                                                      {:animated     true
-                                                       :index        (.indexOf colors/account-colors
-                                                                               default-selected)
-                                                       :viewPosition 0.5}))
-                                   50))
-    [rn/flat-list
-     {:ref                               #(reset! ref %)
-      ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-      ;; https://github.com/status-im/status-mobile/discussions/16676
-      :data                              (if feng-shui?
-                                           (conj colors/account-colors :feng-shui)
-                                           colors/account-colors)
-      :render-fn                         (fn [color idx]
-                                           [color/view
-                                            {:selected?    (= color @selected)
-                                             :on-press     (fn [e]
-                                                             (.scrollToIndex ^js @ref
-                                                                             #js
-                                                                              {:animated     true
-                                                                               :index        idx
-                                                                               :viewPosition 0.5})
-                                                             (on-change-handler selected e on-change))
-                                             :blur?        blur?
-                                             :key          color
-                                             :color        color
-                                             :idx          idx
-                                             :window-width window-width}])
-      :get-item-layout                   get-item-layout
-      :horizontal                        true
-      :shows-horizontal-scroll-indicator false
-      :content-container-style           container-style}]))
-
-(defn view
-  [props]
-  [:f> view-internal props])
+        {window-width :width} (rn/get-window)]
+    (fn [{:keys [blur? on-change feng-shui? container-style]}]
+      [rn/scroll-view
+       {:horizontal                        true
+        :shows-horizontal-scroll-indicator false
+        :content-container-style           container-style}
+       (doall (map-indexed (fn [idx color]
+                             [color/view
+                              {:selected?    (= color @selected)
+                               :on-press     #(on-change-handler selected % on-change)
+                               :blur?        blur?
+                               :key          color
+                               :color        color
+                               :idx          idx
+                               :window-width window-width}])
+                           ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+                           ;; https://github.com/status-im/status-mobile/discussions/16676
+                           (if feng-shui? (conj color-list :feng-shui) color-list)))])))

src/quo/components/drawers/bottom_actions/view.cljs

@@ -24,9 +24,9 @@
   :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
   [props]
   (let [{:keys [actions description button-one-label button-two-label
-                button-one-props button-two-props theme scroll? customization-color container-style]}
+                button-one-props button-two-props theme scroll? customization-color]}
         (merge default-props props)]
-    [rn/view {:style container-style}
+    [:<>
      [rn/view {:style style/buttons-container}
       (when (= actions :2-actions)
         [button/button

src/quo/components/text_combinations/view.cljs

@@ -1,6 +1,5 @@
 (ns quo.components.text-combinations.view
   (:require
-    [quo.components.buttons.button.view :as button]
     [quo.components.markdown.text :as text]
     [quo.components.text-combinations.style :as style]
     [quo.theme :as theme]
@@ -24,31 +23,20 @@
            avatar
            title-accessibility-label
            description
-           description-accessibility-label
-           button-icon
-           button-on-press
-           customization-color]}]
+           description-accessibility-label]}]
   [rn/view {:style container-style}
-   [rn/view
-    {:style {:flex-direction  :row
-             :justify-content :space-between}}
-    [rn/view {:style style/title-container}
-     (when avatar
-       [rn/view {:style style/avatar-container}
-        [icon avatar 32]])
-     [text/text
-      {:accessibility-label title-accessibility-label
-       :weight              :semi-bold
-       :ellipsize-mode      :tail
-       :number-of-lines     1
-       :size                :heading-1}
-      title]]
-    (when button-icon
-      [button/button
-       {:icon-only?          true
-        :on-press            button-on-press
-        :customization-color customization-color
-        :size                32} button-icon])]
+   [rn/view {:style style/title-container}
+    (when avatar
+      [rn/view {:style style/avatar-container}
+       [icon avatar 32]])
+
+    [text/text
+     {:accessibility-label title-accessibility-label
+      :weight              :semi-bold
+      :ellipsize-mode      :tail
+      :number-of-lines     1
+      :size                :heading-1}
+     title]]
    (when description
      [text/text
       {:accessibility-label description-accessibility-label

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

@@ -4,7 +4,8 @@
 
 (defn container
   [{:keys [blur? customization-color theme selected?]}]
-  {:border-radius  16
+  {:flex           1
+   :border-radius  20
    :border-width   1
    :border-color   (if selected?
                      (if blur?
@@ -27,4 +28,5 @@
 (def title-container
   {:flex-direction  :row
    :align-items     :center
-   :justify-content :space-between})
+   :justify-content :space-between
+   :flex            1})

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

@@ -27,16 +27,13 @@
 (defn avatar
   [{{:keys [full-name]} :details
     avatar-type         :type
-    customization-color :customization-color
-    profile-picture     :profile-picture}]
+    customization-color :customization-color}]
   (if (= avatar-type :default-keypair)
     [user-avatar/user-avatar
      {:full-name           full-name
       :ring?               true
       :size                :small
-      :status-indicator?   false
-      :customization-color customization-color
-      :profile-picture     profile-picture}]
+      :customization-color customization-color}]
     [icon-avatar/icon-avatar
      {:size    :size-32
       :icon    :i/placeholder
@@ -87,9 +84,9 @@
 (defn- view-internal
   []
   (let [selected? (reagent/atom true)]
-    (fn [{:keys [accounts action container-style] :as props}]
+    (fn [{:keys [accounts action] :as props}]
       [rn/pressable
-       {:style    (merge (style/container (merge props {:selected? @selected?})) container-style)
+       {:style    (style/container (merge props {:selected? @selected?}))
         :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
        [rn/view {:style style/header-container}
         [avatar props]

src/quo/foundations/colors.cljs

@@ -4,9 +4,6 @@
     [quo.theme :as theme]
     [react-native.platform :as platform]))
 
-(def account-colors
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
-
 (defn alpha
   [value opacity]
   (when value

src/quo/foundations/colors_test.cljs

@@ -29,6 +29,3 @@
   (testing
     "when using opacity theme is ignored and uses the light suffix resolver"
     (is (colors/resolve-color :blue :light 10) (colors/resolve-color :blue :dark 10))))
-
-(deftest test-account-colors-customization
-  (is (every? #(contains? colors/customization %) colors/account-colors)))

src/status_im/chat/models/input.cljs

@@ -107,15 +107,14 @@
   [{:keys [db] :as cofx} message]
   (let [current-chat-id (:current-chat-id db)
         text            (get-in message [:content :text])]
-    {:db         (-> db
-                     (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
-                               message)
-                     (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
-                     (update-in [:chat/inputs current-chat-id :metadata]
-                                dissoc
-                                :sending-image))
-     :dispatch-n [[:chat.ui/set-chat-input-text nil current-chat-id]
-                  [:mention/to-input-field text current-chat-id]]}))
+    {:db       (-> db
+                   (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
+                             message)
+                   (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
+                   (update-in [:chat/inputs current-chat-id :metadata]
+                              dissoc
+                              :sending-image))
+     :dispatch [:mention/to-input-field text current-chat-id]}))
 
 (rf/defn show-contact-request-input
   "Sets reference to previous chat message and focuses on input"

src/status_im2/contexts/chat/composer/effects.cljs

@@ -109,7 +109,8 @@
    {:keys [edit]}]
   (rn/use-effect
    (fn []
-     (let [edit-text (get-in edit [:content :text])]
+     (let [edit-text        (get-in edit [:content :text])
+           text-value-count (count @text-value)]
        (when (and edit @input-ref)
          ;; A small setTimeout is necessary to ensure the statement is enqueued and will get executed
          ;; ASAP.
@@ -117,7 +118,9 @@
          (js/setTimeout #(.focus ^js @input-ref) 250)
          (.setNativeProps ^js @input-ref (clj->js {:text edit-text}))
          (reset! text-value edit-text)
-         (reset! saved-cursor-position (count edit-text)))))
+         (reset! saved-cursor-position (if (zero? text-value-count)
+                                         (count edit-text)
+                                         text-value-count)))))
    [(:message-id edit)]))
 
 (defn use-reply

src/status_im2/contexts/chat/messages/navigation/style.cljs

@@ -44,7 +44,7 @@
 
 (defn navigation-view
   [loaded?]
-  {:z-index  1
+  {:z-index  1000
    :top      0
    :right    0
    :left     0

src/status_im2/contexts/quo_preview/wallet/keypair.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.wallet.keypair
   (:require
     [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -102,9 +101,8 @@
         :component-container-style {:padding-vertical 30
                                     :flex-direction   :row
                                     :justify-content  :center}}
-       [rn/view {:style {:flex 1}}
-        [quo/keypair
-         (merge
-          @state
-          {:details  (if (= (:type @state) :default-keypair) default-details other-details)
-           :accounts (get-accounts (:blur? @state))})]]])))
+       [quo/keypair
+        (merge
+         @state
+         {:details  (if (= (:type @state) :default-keypair) default-details other-details)
+          :accounts (get-accounts (:blur? @state))})]])))

src/status_im2/contexts/syncing/events.cljs

@@ -2,7 +2,6 @@
   (:require
     [clojure.string :as string]
     [native-module.core :as native-module]
-    [quo.foundations.colors :as colors]
     [re-frame.core :as re-frame]
     [react-native.platform :as platform]
     [status-im.data-store.settings :as data-store.settings]
@@ -37,26 +36,6 @@
                                        :custom-bootnodes-enabled? false}}]
     (node/get-multiaccount-node-config db)))
 
-(defn- extract-error
-  [json-str]
-  (-> json-str
-      transforms/json->clj
-      (get :error "")
-      not-empty))
-
-(defn- input-connection-string-callback
-  [res]
-  (log/info "[local-pairing] input-connection-string-for-bootstrapping callback"
-            {:response res
-             :event    :syncing/input-connection-string-for-bootstrapping})
-  (let [error (when (extract-error res)
-                (str "generic-error: " res))]
-    (when (some? error)
-      (rf/dispatch [:toasts/upsert
-                    {:icon       :i/alert
-                     :icon-color colors/danger-50
-                     :text       error}]))))
-
 (rf/defn preflight-outbound-check-for-local-pairing
   {:events [:syncing/preflight-outbound-check]}
   [_ set-checks-passed]
@@ -81,18 +60,19 @@
         (fn [final-node-config]
           (let [config-map (.stringify js/JSON
                                        (clj->js
-                                        {:receiverConfig
-                                         {:kdfIterations config/default-kdf-iterations
-                                          :nodeConfig final-node-config
-                                          :settingCurrentNetwork config/default-network
-                                          :deviceType platform/os
-                                          :deviceName
-                                          (native-module/get-installation-name)}}))]
+                                        {:receiverConfig {:kdfIterations config/default-kdf-iterations
+                                                          :nodeConfig final-node-config
+                                                          :settingCurrentNetwork config/default-network
+                                                          :deviceType platform/os
+                                                          :deviceName
+                                                          (native-module/get-installation-name)}}))]
             (rf/dispatch [:syncing/update-role constants/local-pairing-role-receiver])
             (native-module/input-connection-string-for-bootstrapping
              connection-string
              config-map
-             input-connection-string-callback)))]
+             #(log/info "Initiated local pairing"
+                        {:response %
+                         :event    :syncing/input-connection-string-for-bootstrapping}))))]
     (native-module/prepare-dir-and-update-config "" default-node-config-string callback)))
 
 (rf/defn preparations-for-connection-string

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

@@ -62,11 +62,10 @@
                                          {:content buy-drawer}])
            :bridge-action #(rf/dispatch [:open-modal :wallet-bridge])}]
          [quo/tabs
-          {:style            style/tabs
-           :size             32
-           :default-active   @selected-tab
-           :data             tabs-data
-           :on-change        #(reset! selected-tab %)
-           :scrollable?      true
-           :scroll-on-press? true}]
+          {:style          style/tabs
+           :size           32
+           :default-active @selected-tab
+           :data           tabs-data
+           :on-change      #(reset! selected-tab %)
+           :scrollable?    true}]
          [tabs/view {:selected-tab @selected-tab}]]))))

src/status_im2/contexts/wallet/add_watch_only_account/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.wallet.add-address-to-watch.confirm-address.style)
+(ns status-im2.contexts.wallet.add-watch-only-account.style)
 
 (def container
   {:flex 1})

src/status_im2/contexts/wallet/add_watch_only_account/views.cljs

@@ -1,14 +1,13 @@
-(ns status-im2.contexts.wallet.add-address-to-watch.confirm-address.view
+(ns status-im2.contexts.wallet.add-watch-only-account.views
   (:require
     [clojure.string :as string]
     [quo.core :as quo]
-    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [re-frame.core :as re-frame]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils]
-    [status-im2.contexts.wallet.add-address-to-watch.confirm-address.style :as style]
+    [status-im2.contexts.wallet.add-watch-only-account.style :as style]
     [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
      create-or-edit-account]
     [utils.i18n :as i18n]
@@ -21,7 +20,7 @@
         account-name       (reagent/atom (i18n/label :t/default-account-name
                                                      {:number (inc number-of-accounts)}))
         address-title      (i18n/label :t/watch-address)
-        account-color      (reagent/atom (rand-nth colors/account-colors))
+        account-color      (reagent/atom :blue)
         account-emoji      (reagent/atom (emoji-picker.utils/random-emoji))
         on-change-name     #(reset! account-name %)
         on-change-color    #(reset! account-color %)
@@ -58,4 +57,4 @@
           :container-style style/data-item
           :on-press        #(js/alert "To be implemented")}]]])))
 
-(def view (quo.theme/with-theme view-internal))
+(def address-add-edit (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs

@@ -58,8 +58,7 @@
        [quo/section-label
         {:section         (i18n/label :t/colour)
          :container-style style/section-container}]
-       [rn/view
-        {:style style/color-picker-container}
+       [rn/view {:style style/color-picker-container}
         [quo/color-picker
          {:default-selected account-color
           :on-change        on-change-color

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

@@ -24,6 +24,7 @@
 (defn get-derivation-path
   [number-of-accounts]
   (str constants/path-wallet-root "/" number-of-accounts))
+
 (defn format-derivation-path
   [path]
   (string/replace path "/" " / "))

src/status_im2/contexts/wallet/create_account/select_keypair/style.cljs

@@ -1,12 +0,0 @@
-(ns status-im2.contexts.wallet.create-account.select-keypair.style)
-
-(def header-container
-  {:margin-horizontal 20
-   :margin-top        12
-   :margin-bottom     20})
-
-(def bottom-action-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0})

src/status_im2/contexts/wallet/create_account/select_keypair/view.cljs

@@ -1,62 +0,0 @@
-(ns status-im2.contexts.wallet.create-account.select-keypair.view
-  (:require
-    [quo.core :as quo]
-    [react-native.core :as rn]
-    [status-im2.contexts.profile.utils :as profile.utils]
-    [status-im2.contexts.wallet.create-account.select-keypair.style :as style]
-    [utils.address :as utils]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
-
-(def accounts
-  [{:account-props {:customization-color :turquoise
-                    :size                32
-                    :emoji               "\uD83C\uDFB2"
-                    :type                :default
-                    :name                "Trip to Vegas"
-                    :address             "0x0ah...71a"}
-    :networks      [{:network-name :ethereum :short-name "eth"}
-                    {:network-name :optimism :short-name "opt"}]
-    :state         :default
-    :action        :none}])
-
-(defn view
-  []
-  (let [{:keys [public-key compressed-key
-                customization-color]} (rf/sub [:profile/profile])
-        display-name                  (first (rf/sub [:contacts/contact-two-names-by-identity
-                                                      public-key]))
-        profile-with-image            (rf/sub [:profile/profile-with-image])
-        profile-picture               (profile.utils/photo profile-with-image)]
-    [rn/view {:style {:flex 1}}
-     [quo/page-nav
-      {:icon-name           :i/close
-       :on-press            #(rf/dispatch [:navigate-back])
-       :accessibility-label :top-bar}]
-     [quo/text-combinations
-      {:container-style     style/header-container
-       :title               (i18n/label :t/keypairs)
-       :description         (i18n/label :t/keypairs-description)
-       :button-icon         :i/add
-       :button-on-press     #(js/alert "not implemented")
-       :customization-color customization-color}]
-     [quo/keypair
-      (merge
-       {:customization-color customization-color
-        :profile-picture     profile-picture
-        :status-indicator    false
-        :type                :default-keypair
-        :stored              :on-device
-        :on-options-press    #(js/alert "Options pressed")
-        :action              :selector
-        :blur?               false
-        :details             {:full-name display-name
-                              :address   (utils/get-shortened-compressed-key compressed-key)}
-        :accounts            accounts
-        :container-style     {:margin-horizontal 20
-                              :margin-vertical   8}})]
-     [quo/bottom-actions
-      {:button-one-label (i18n/label :t/confirm-account-origin)
-       :button-one-props {:disabled?           true
-                          :customization-color customization-color}
-       :container-style  style/bottom-action-container}]]))

src/status_im2/contexts/wallet/create_account/view.cljs

@@ -1,8 +1,6 @@
 (ns status-im2.contexts.wallet.create-account.view
   (:require
-    [clojure.string :as string]
     [quo.core :as quo]
-    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
@@ -14,8 +12,7 @@
     [status-im2.contexts.wallet.create-account.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
-    [utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]
-    [utils.string]))
+    [utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]))
 
 (defn keypair-string
   [full-name]
@@ -23,34 +20,30 @@
     (i18n/label :t/keypair-title {:name first-name})))
 
 (defn get-keypair-data
-  [name derivation-path account-color]
+  [name derivation-path]
   [{:title             (keypair-string name)
-    :image             :avatar
-    :image-props       {:full-name           (utils.string/get-initials name 1)
-                        :size                :xxs
-                        :customization-color account-color}
+    :left-icon         :i/placeholder
     :action            :button
-    :action-props      {:on-press    #(rf/dispatch [:navigate-to :wallet-select-keypair])
+    :action-props      {:on-press    #(js/alert "Button pressed!")
                         :button-text (i18n/label :t/edit)
                         :alignment   :flex-start}
     :description       :text
     :description-props {:text (i18n/label :t/on-device)}}
    {:title             (i18n/label :t/derivation-path)
-    :image             :icon
-    :image-props       :i/derivated-path
     :action            :button
-    :action-props      {:on-press    #(js/alert "Button pressed!")
+    :action-props      {:on-press    #(rf/dispatch [:navigate-to :wallet-edit-derivation-path])
                         :button-text (i18n/label :t/edit)
                         :icon-left   :i/placeholder
                         :alignment   :flex-start}
+    :left-icon         :i/derivated-path
     :description       :text
-    :description-props {:text (string/replace derivation-path #"/" " / ")}}])
+    :description-props {:text derivation-path}}])
 
 (defn- view-internal
   []
   (let [top                   (safe-area/get-top)
         bottom                (safe-area/get-bottom)
-        account-color         (reagent/atom (rand-nth colors/account-colors))
+        account-color         (reagent/atom :blue)
         emoji                 (reagent/atom (emoji-picker.utils/random-emoji))
         number-of-accounts    (count (rf/sub [:wallet/accounts]))
         account-name          (reagent/atom (i18n/label :t/default-account-name
@@ -113,7 +106,7 @@
        [quo/category
         {:list-type :settings
          :label     (i18n/label :t/origin)
-         :data      (get-keypair-data primary-name @derivation-path @account-color)}]
+         :data      (get-keypair-data primary-name @derivation-path)}]
        [standard-auth/view
         {:size                :size-48
          :track-text          (i18n/label :t/slide-to-create-account)

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

@@ -25,7 +25,7 @@
       :accessibility-label :add-a-contact
       :label               (i18n/label :t/add-address)
       :sub-label           (i18n/label :t/add-address-description)
-      :on-press            #(rf/dispatch [:navigate-to :add-address-to-watch])
+      :on-press            #(rf/dispatch [:navigate-to :wallet-address-watch])
       :add-divider?        true}]]])
 
 (defn- add-account-placeholder

src/status_im2/contexts/wallet/select_address_to_watch/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.wallet.add-address-to-watch.style)
+(ns status-im2.contexts.wallet.select-address-to-watch.style)
 
 (def header-container
   {:margin-horizontal 20
@@ -10,8 +10,9 @@
    :padding-horizontal 20
    :align-items        :flex-end})
 
-(def button-container
+(defn button-container
+  [bottom]
   {:position :absolute
-   :bottom   22
+   :bottom   (- bottom 22)
    :left     20
    :right    20})

src/status_im2/contexts/wallet/select_address_to_watch/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.wallet.add-address-to-watch.view
+(ns status-im2.contexts.wallet.select-address-to-watch.view
   (:require
     [clojure.string :as string]
     [quo.core :as quo]
@@ -6,18 +6,22 @@
     [re-frame.core :as re-frame]
     [react-native.clipboard :as clipboard]
     [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
-    [status-im2.contexts.wallet.add-address-to-watch.style :as style]
+    [status-im2.contexts.wallet.select-address-to-watch.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
 (defn view-internal
   []
-  (let [input-value         (reagent/atom "")
+  (let [top                 (safe-area/get-top)
+        bottom              (safe-area/get-bottom)
+        input-value         (reagent/atom "")
         customization-color (rf/sub [:profile/customization-color])]
     (fn []
       [rn/view
-       {:style {:flex 1}}
+       {:style {:flex       1
+                :margin-top top}}
        [quo/page-nav
         {:type      :no-title
          :icon-name :i/close
@@ -44,9 +48,9 @@
         {:customization-color customization-color
          :disabled?           (clojure.string/blank? @input-value)
          :on-press            #(re-frame/dispatch [:navigate-to
-                                                   :confirm-address-to-watch
+                                                   :address-to-watch-edit
                                                    {:address @input-value}])
-         :container-style     style/button-container}
+         :container-style     (style/button-container bottom)}
         (i18n/label :t/continue)]])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/navigation/screens.cljs

@@ -39,15 +39,14 @@
     [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
     [status-im2.contexts.wallet.account.bridge.view :as bridge]
     [status-im2.contexts.wallet.account.view :as wallet-accounts]
-    [status-im2.contexts.wallet.add-address-to-watch.confirm-address.view :as confirm-address-to-watch]
-    [status-im2.contexts.wallet.add-address-to-watch.view :as add-address-to-watch]
+    [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit]
     [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im2.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path]
-    [status-im2.contexts.wallet.create-account.select-keypair.view :as wallet-select-keypair]
     [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
     [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
     [status-im2.contexts.wallet.scan-account.view :as scan-address]
+    [status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-watch]
     [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im2.navigation.options :as options]
     [status-im2.navigation.transitions :as transitions]))
@@ -249,16 +248,16 @@
      :options   {:insets {:top? true}}
      :component wallet-accounts/view}
 
+    {:name      :address-to-watch-edit
+     :component address-add-edit/address-add-edit}
+
     {:name      :wallet-edit-account
      :component wallet-edit-account/view}
 
-    {:name      :add-address-to-watch
+    {:name      :wallet-address-watch
      :options   {:insets {:top?    true
                           :bottom? true}}
-     :component add-address-to-watch/view}
-
-    {:name      :confirm-address-to-watch
-     :component confirm-address-to-watch/view}
+     :component wallet-address-watch/view}
 
     {:name      :wallet-bridge
      :options   {:insets                 {:top? true}
@@ -271,10 +270,6 @@
     {:name      :wallet-collectible
      :component wallet-collectible/view}
 
-    {:name      :wallet-select-keypair
-     :options   {:insets {:top? true}}
-     :component wallet-select-keypair/view}
-
     {:name      :wallet-create-account
      :options   {:insets {:top? true}}
      :component wallet-create-account/view}

src/utils/address.cljs

@@ -68,7 +68,7 @@
     (let [first-part-of-public-key (subs public-key 0 3)
           ellipsis                 "..."
           public-key-size          (count public-key)
-          last-part-of-public-key  (subs public-key (- public-key-size 5) public-key-size)
+          last-part-of-public-key  (subs public-key (- public-key-size 6) public-key-size)
           abbreviated-public-key   (str first-part-of-public-key ellipsis last-part-of-public-key)]
       abbreviated-public-key)
     nil))

src/utils/address_test.cljs

@@ -5,7 +5,7 @@
 
 (deftest get-shortened-compressed-key
   (testing "Ensure the function correctly abbreviates a valid public key"
-    (is (= "zQ3...sgt5N"
+    (is (= "zQ3...1sgt5N"
            (utils.address/get-shortened-compressed-key
             "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N"))))
 

translations/en.json

@@ -2374,15 +2374,12 @@
     "reset": "Reset",
     "reveal-address": "Reveal address",
     "derive-addresses": "Derive addresses",
+    "address-activity": "This address has activity",
     "sign transactions": "sign transactions",
+    "search-assets": "Search assets",
     "account-created": "{{name}} created",
     "update-account-name": "Update account name",
     "edit-wallet-account-emoji-updated-message": "Account emoji has been updated",
     "edit-wallet-account-name-updated-message": "Account name has been updated",
-    "edit-wallet-account-colour-updated-message": "Account colour has been updated",
-    "search-assets": "Search assets",
-    "address-activity": "This address has activity",
-    "keypairs": "Keypairs",
-    "keypairs-description": "Select keypair to derive your new account from",
-    "confirm-account-origin": "Confirm account origin"
+    "edit-wallet-account-colour-updated-message": "Account colour has been updated"
 }