status-go-issue

Fixes the bug by explicitly passing all available addresses to be revealed
to wakuext_requestToJoinCommunity and picking up the first available address
as the airdrop address. This is a temporary solution while we work on the
feature to allow users to choose which addresses to expose.

Fixes https://github.com/status-im/status-mobile/issues/17861

*Areas that may be impacted*: join community flows.

    ----------------------------------------------------------------------
    Community "Request to join" option is enabled.
    User holds more than X ETH.
    Anyone who holds <X> ETH is allowed to Become member in <COMMUNITY>.
    
    Expected: request to join is received by desktop client and accepted,
    mobile user joins the community.
    ----------------------------------------------------------------------
    
    ----------------------------------------------------------------------
    Community "Request to join" option is enabled.
    User holds less than X ETH.
    Anyone who holds <X> ETH is allowed to View and post in <CHANNEL>.
    
    Expected: request to join is received by desktop client and accepted, mobile
    user joins the community, but can't post in <CHANNEL>.
    ----------------------------------------------------------------------
    
    ----------------------------------------------------------------------
    Community "Request to join" option is enabled.
    No token permissions.
    
    Expected: request to join is received by desktop client and accepted,
    mobile user joins the community.
    ----------------------------------------------------------------------

VERSION

@@ -1 +1 @@
-1.25.0
+1.26.0

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

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

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

@@ -1,12 +1,13 @@
 (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         48
-   :height        48
+  {:width         constants/color-size
+   :height        constants/color-size
    :border-width  4
    :border-radius 24
    :margin-right  (-> window-width

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

@@ -5,10 +5,6 @@
     [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)}])
@@ -20,11 +16,6 @@
       (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))))
-  (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))))
+          (.toStrictEqual :blue)))))
 
 

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

@@ -1,39 +1,67 @@
 (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 view
+(defn get-item-layout
+  [_ index]
+  #js
+   {:length constants/color-size
+    :offset (* (+ constants/color-size 8) index)
+    :index  index})
+
+(defn- view-internal
   "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]}]
+  [{:keys [default-selected blur? on-change feng-shui? container-style]}]
   (let [selected              (reagent/atom default-selected)
-        {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)))])))
+        {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])

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]}
+                button-one-props button-two-props theme scroll? customization-color container-style]}
         (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,5 +1,6 @@
 (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]
@@ -23,20 +24,31 @@
            avatar
            title-accessibility-label
            description
-           description-accessibility-label]}]
+           description-accessibility-label
+           button-icon
+           button-on-press
+           customization-color]}]
   [rn/view {:style container-style}
-   [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]]
+   [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])]
    (when description
      [text/text
       {:accessibility-label description-accessibility-label

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

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

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

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

src/quo/foundations/colors.cljs

@@ -4,6 +4,9 @@
     [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,3 +29,6 @@
   (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_im2/contexts/chat/messages/navigation/style.cljs

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

src/status_im2/contexts/communities/overview/events.cljs

@@ -42,26 +42,31 @@
                                                community-id %])
                     :on-error   #(log/error "failed to request to join community" community-id %)}]})
 
+(defn request-to-join
+  [{:keys [db]} [{:keys [community-id password]}]]
+  (let [pub-key             (get-in db [:profile/profile :public-key])
+        addresses-to-reveal []]
+    {:fx [[:json-rpc/call
+           [{:method     "wakuext_generateJoiningCommunityRequestsForSigning"
+             :params     [pub-key community-id addresses-to-reveal]
+             :on-success [:communities/sign-data community-id password]
+             :on-error   [:communities/requested-to-join-error community-id]}]]]}))
+
 ;; Event to be called to request to join a community.
 ;; This event will generate the data to be signed and then call the sign-data event.
 ;; This is the only event that should be called from the UI.
-(rf/reg-event-fx :communities/request-to-join
- (fn [{:keys [db]} [{:keys [community-id password]}]]
-   (let [pub-key             (get-in db [:profile/profile :public-key])
-         addresses-to-reveal []]
-     {:fx [[:json-rpc/call
-            [{:method     "wakuext_generateJoiningCommunityRequestsForSigning"
-              :params     [pub-key community-id addresses-to-reveal]
-              :on-success [:communities/sign-data community-id password]
-              :on-error   [:communities/requested-to-join-error community-id]}]]]})))
+(rf/reg-event-fx :communities/request-to-join request-to-join)
 
-(rf/reg-event-fx :communities/sign-data
- (fn [_ [community-id password sign-params]]
-   {:fx [[:json-rpc/call
-          [{:method     "wakuext_signData"
-            :params     [(map #(assoc % :password password) sign-params)]
-            :on-success [:communities/request-to-join-with-signatures community-id]
-            :on-error   [:communities/requested-to-join-error community-id]}]]]}))
+(defn sign-data
+  [_ [community-id password sign-params]]
+  (let [addresses-to-reveal (map :account sign-params)]
+    {:fx [[:json-rpc/call
+           [{:method     "wakuext_signData"
+             :params     [(map #(assoc % :password password) sign-params)]
+             :on-success [:communities/request-to-join-with-signatures community-id addresses-to-reveal]
+             :on-error   [:communities/requested-to-join-error community-id]}]]]}))
+
+(rf/reg-event-fx :communities/sign-data sign-data)
 
 (rf/reg-event-fx :communities/requested-to-join-error
  (fn [{:keys [db]} [community-id error]]
@@ -71,11 +76,19 @@
                :event        :communities/requested-to-join-error})
    {:db (assoc-in db [:password-authentication :error] error)}))
 
-(rf/reg-event-fx :communities/request-to-join-with-signatures
- (fn [_ [community-id signatures]]
-   {:fx [[:json-rpc/call
-          [{:method      "wakuext_requestToJoinCommunity"
-            :params      [{:communityId community-id :signatures signatures}]
-            :js-response true
-            :on-success  [:communities/requested-to-join]
-            :on-error    [:communities/requested-to-join-error community-id]}]]]}))
+(defn request-to-join-with-signatures
+  [_ [community-id addresses-to-reveal signatures]]
+  {:fx [[:json-rpc/call
+         [{:method      "wakuext_requestToJoinCommunity"
+           :params      [{:communityId       community-id
+                          :signatures        signatures
+                          :addressesToReveal addresses-to-reveal
+                          ;; NOTE: At least one airdrop address is required.
+                          ;; This is a temporary solution while the address
+                          ;; selection feature is not implemented in mobile.
+                          :airdropAddress    (first addresses-to-reveal)}]
+           :js-response true
+           :on-success  [:communities/requested-to-join]
+           :on-error    [:communities/requested-to-join-error community-id]}]]]})
+
+(rf/reg-event-fx :communities/request-to-join-with-signatures request-to-join-with-signatures)

src/status_im2/contexts/communities/overview/events_test.cljs

@@ -0,0 +1,53 @@
+(ns status-im2.contexts.communities.overview.events-test
+  (:require [cljs.test :refer [deftest is]]
+            [native-module.core :as native-module]
+            [status-im2.contexts.communities.overview.events :as sut]))
+
+(def password (native-module/sha3 "password123"))
+(def community-id "0x99")
+(def account-pub-key "0x1")
+
+(deftest request-to-join-test
+  (let [cofx     {:db {:profile/profile {:public-key account-pub-key}}}
+        expected {:fx [[:json-rpc/call
+                        [{:method     "wakuext_generateJoiningCommunityRequestsForSigning"
+                          :params     [account-pub-key community-id []]
+                          :on-success [:communities/sign-data community-id password]
+                          :on-error   [:communities/requested-to-join-error community-id]}]]]}]
+    (is (= expected
+           (sut/request-to-join cofx
+                                [{:community-id community-id
+                                  :password     password}])))))
+
+(deftest sign-data-test
+  (let [cofx                {:db {}}
+        sign-params         [{:data "123" :account account-pub-key}
+                             {:data "456" :account "0x2"}]
+        addresses-to-reveal [account-pub-key "0x2"]
+        expected            {:fx
+                             [[:json-rpc/call
+                               [{:method     "wakuext_signData"
+                                 :params     [[{:data "123" :account account-pub-key :password password}
+                                               {:data "456" :account "0x2" :password password}]]
+                                 :on-success [:communities/request-to-join-with-signatures
+                                              community-id addresses-to-reveal]
+                                 :on-error   [:communities/requested-to-join-error community-id]}]]]}]
+    (is (= expected
+           (sut/sign-data cofx [community-id password sign-params])))))
+
+(deftest request-to-join-with-signatures-test
+  (let [cofx                {:db {}}
+        addresses-to-reveal [account-pub-key "0x2"]
+        signatures          ["11111" "222222"]
+        expected            {:fx [[:json-rpc/call
+                                   [{:method      "wakuext_requestToJoinCommunity"
+                                     :params      [{:communityId       community-id
+                                                    :signatures        signatures
+                                                    :addressesToReveal addresses-to-reveal
+                                                    :airdropAddress    "0x1"}]
+                                     :js-response true
+                                     :on-success  [:communities/requested-to-join]
+                                     :on-error    [:communities/requested-to-join-error
+                                                   community-id]}]]]}]
+    (is (= expected
+           (sut/request-to-join-with-signatures cofx [community-id addresses-to-reveal signatures])))))

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

@@ -1,6 +1,7 @@
 (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]))
 
@@ -101,8 +102,9 @@
         :component-container-style {:padding-vertical 30
                                     :flex-direction   :row
                                     :justify-content  :center}}
-       [quo/keypair
-        (merge
-         @state
-         {:details  (if (= (:type @state) :default-keypair) default-details other-details)
-          :accounts (get-accounts (:blur? @state))})]])))
+       [rn/view {:style {:flex 1}}
+        [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,6 +2,7 @@
   (: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]
@@ -36,6 +37,26 @@
                                        :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]
@@ -60,19 +81,18 @@
         (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
-             #(log/info "Initiated local pairing"
-                        {:response %
-                         :event    :syncing/input-connection-string-for-bootstrapping}))))]
+             input-connection-string-callback)))]
     (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,10 +62,11 @@
                                          {: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}]
+          {:style            style/tabs
+           :size             32
+           :default-active   @selected-tab
+           :data             tabs-data
+           :on-change        #(reset! selected-tab %)
+           :scrollable?      true
+           :scroll-on-press? true}]
          [tabs/view {:selected-tab @selected-tab}]]))))

src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs

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

src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs

@@ -1,13 +1,14 @@
-(ns status-im2.contexts.wallet.add-watch-only-account.views
+(ns status-im2.contexts.wallet.add-address-to-watch.confirm-address.view
   (: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-watch-only-account.style :as style]
+    [status-im2.contexts.wallet.add-address-to-watch.confirm-address.style :as style]
     [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
      create-or-edit-account]
     [utils.i18n :as i18n]
@@ -20,7 +21,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 :blue)
+        account-color      (reagent/atom (rand-nth colors/account-colors))
         account-emoji      (reagent/atom (emoji-picker.utils/random-emoji))
         on-change-name     #(reset! account-name %)
         on-change-color    #(reset! account-color %)
@@ -57,4 +58,4 @@
           :container-style style/data-item
           :on-press        #(js/alert "To be implemented")}]]])))
 
-(def address-add-edit (quo.theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))

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

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

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

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

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

@@ -58,7 +58,8 @@
        [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,7 +24,6 @@
 (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

@@ -0,0 +1,12 @@
+(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

@@ -0,0 +1,62 @@
+(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,6 +1,8 @@
 (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]
@@ -12,7 +14,8 @@
     [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.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]
+    [utils.string]))
 
 (defn keypair-string
   [full-name]
@@ -20,30 +23,34 @@
     (i18n/label :t/keypair-title {:name first-name})))
 
 (defn get-keypair-data
-  [name derivation-path]
+  [name derivation-path account-color]
   [{:title             (keypair-string name)
-    :left-icon         :i/placeholder
+    :image             :avatar
+    :image-props       {:full-name           (utils.string/get-initials name 1)
+                        :size                :xxs
+                        :customization-color account-color}
     :action            :button
-    :action-props      {:on-press    #(js/alert "Button pressed!")
+    :action-props      {:on-press    #(rf/dispatch [:navigate-to :wallet-select-keypair])
                         :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    #(rf/dispatch [:navigate-to :wallet-edit-derivation-path])
+    :action-props      {:on-press    #(js/alert "Button pressed!")
                         :button-text (i18n/label :t/edit)
                         :icon-left   :i/placeholder
                         :alignment   :flex-start}
-    :left-icon         :i/derivated-path
     :description       :text
-    :description-props {:text derivation-path}}])
+    :description-props {:text (string/replace derivation-path #"/" " / ")}}])
 
 (defn- view-internal
   []
   (let [top                   (safe-area/get-top)
         bottom                (safe-area/get-bottom)
-        account-color         (reagent/atom :blue)
+        account-color         (reagent/atom (rand-nth colors/account-colors))
         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
@@ -106,7 +113,7 @@
        [quo/category
         {:list-type :settings
          :label     (i18n/label :t/origin)
-         :data      (get-keypair-data primary-name @derivation-path)}]
+         :data      (get-keypair-data primary-name @derivation-path @account-color)}]
        [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 :wallet-address-watch])
+      :on-press            #(rf/dispatch [:navigate-to :add-address-to-watch])
       :add-divider?        true}]]])
 
 (defn- add-account-placeholder

src/status_im2/navigation/screens.cljs

@@ -39,14 +39,15 @@
     [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-watch-only-account.views :as address-add-edit]
+    [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.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]))
@@ -248,16 +249,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      :wallet-address-watch
+    {:name      :add-address-to-watch
      :options   {:insets {:top?    true
                           :bottom? true}}
-     :component wallet-address-watch/view}
+     :component add-address-to-watch/view}
+
+    {:name      :confirm-address-to-watch
+     :component confirm-address-to-watch/view}
 
     {:name      :wallet-bridge
      :options   {:insets                 {:top? true}
@@ -270,6 +271,10 @@
     {: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 6) public-key-size)
+          last-part-of-public-key  (subs public-key (- public-key-size 5) 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...1sgt5N"
+    (is (= "zQ3...sgt5N"
            (utils.address/get-shortened-compressed-key
             "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N"))))
 

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.171.11",
-    "commit-sha1": "8a4c2d8d2f17117aa0a00338e83b0f753ebf1328",
-    "src-sha256": "160qnl9dsl1ypvqg9w6z8wps4fvgq3qxi16piymhrlzgssdwkz8h"
+    "version": "debug/revert-logout",
+    "commit-sha1": "cdb4bb30af634776cafaed25f1586684ffe39ed9",
+    "src-sha256": "1zcxfk07ldllmwv7vr9ki1w2lgx3jd6i5kw8mq5c3pgiclw84gn5"
 }

translations/en.json

@@ -2374,12 +2374,15 @@
     "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"
+    "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"
 }