[#18453] feat: implement change accent colour screen (#18517)

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

@@ -35,7 +35,7 @@
             (when (and @ref (>= index 0))
               (some-> ^js @ref
                       (.scrollToIndex #js
-                                       {:animated     true
+                                       {:animated     false
                                         :index        index
                                         :viewPosition 0.5})))))
         50)))

src/status_im/contexts/chat/messenger/messages/transport/events.cljs

@@ -55,6 +55,7 @@
         ^js identity-images            (.-identityImages response-js)
         ^js accounts                   (.-accounts response-js)
         ^js ens-username-details-js    (.-ensUsernameDetails response-js)
+        ^js customization-color-js     (.-customizationColor response-js)
         sync-handler                   (when-not process-async process-response)]
     (cond
 
@@ -204,7 +205,14 @@
         (js-delete response-js "ensUsernameDetails")
         (rf/merge cofx
                   (process-next response-js sync-handler)
-                  (rf/dispatch [:ens/update-usernames ens-username-details-clj]))))))
+                  (rf/dispatch [:ens/update-usernames ens-username-details-clj])))
+
+      (seq customization-color-js)
+      (let [customization-color (types/js->clj customization-color-js)]
+        (js-delete response-js "customizationColor")
+        (rf/merge cofx
+                  (process-next response-js sync-handler)
+                  (rf/dispatch [:profile/save-local-accent-color (keyword customization-color)]))))))
 
 (defn group-by-and-update-unviewed-counts
   "group messages by current chat, profile updates, transactions and update unviewed counters in db for not curent chats"

src/status_im/contexts/profile/edit/accent_colour/events.cljs

@@ -0,0 +1,30 @@
+(ns status-im.contexts.profile.edit.accent-colour.events
+  (:require [taoensso.timbre :as log]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(rf/reg-event-fx :profile/edit-accent-colour-success
+ (fn [_ [customization-color]]
+   {:fx [[:dispatch [:profile/save-local-accent-color customization-color]]
+         [:dispatch [:navigate-back]]
+         [:dispatch
+          [:toasts/upsert
+           {:type  :positive
+            :theme :dark
+            :text  (i18n/label :t/accent-colour-updated)}]]]}))
+
+(rf/reg-event-fx :profile/save-local-accent-color
+ (fn [{:keys [db]} [customization-color]]
+   {:db (assoc-in db [:profile/profile :customization-color] customization-color)}))
+
+(defn edit-accent-colour
+  [{:keys [db]} [customization-color]]
+  (let [key-uid (get-in db [:profile/profile :key-uid])]
+    {:fx [[:json-rpc/call
+           [{:method     "wakuext_setCustomizationColor"
+             :params     [{:customizationColor customization-color
+                           :keyUid             key-uid}]
+             :on-success [:profile/edit-accent-colour-success customization-color]
+             :on-error   #(log/error "failed to edit accent color." {:error %})}]]]}))
+
+(rf/reg-event-fx :profile/edit-accent-colour edit-accent-colour)

src/status_im/contexts/profile/edit/accent_colour/events_test.cljs

@@ -0,0 +1,17 @@
+(ns status-im.contexts.profile.edit.accent-colour.events-test
+  (:require [cljs.test :refer [deftest is]]
+            matcher-combinators.test
+            [status-im.contexts.profile.edit.accent-colour.events :as sut]))
+
+(deftest edit-accent-color-test
+  (let [new-color :yellow
+        key-uid   "key-uid"
+        cofx      {:db {:profile/profile {:key-uid key-uid}}}
+        expected  {:fx [[:json-rpc/call
+                         [{:method     "wakuext_setCustomizationColor"
+                           :params     [{:customizationColor new-color
+                                         :keyUid             key-uid}]
+                           :on-success [:profile/edit-accent-colour-success new-color]
+                           :on-error   fn?}]]]}]
+    (is (match? expected
+                (sut/edit-accent-colour cofx [new-color])))))

src/status_im/contexts/profile/edit/accent_colour/style.cljs

@@ -0,0 +1,30 @@
+(ns status-im.contexts.profile.edit.accent-colour.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn page-wrapper
+  [insets]
+  {:padding-top        (:top insets)
+   :padding-bottom     (:bottom insets)
+   :padding-horizontal 1
+   :flex               1})
+
+(def screen-container
+  {:flex            1
+   :padding-top     14
+   :justify-content :space-between})
+
+(def padding-horizontal
+  {:padding-horizontal 20})
+
+(def color-title
+  {:color         colors/white-70-blur
+   :margin-top    20
+   :margin-bottom 16})
+
+(def button-wrapper
+  {:margin-vertical    12
+   :padding-horizontal 20})
+
+(def profile-card
+  {:margin-top    22
+   :margin-bottom 5})

src/status_im/contexts/profile/edit/accent_colour/view.cljs

@@ -0,0 +1,66 @@
+(ns status-im.contexts.profile.edit.accent-colour.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [reagent.core :as reagent]
+            [status-im.constants :as constants]
+            [status-im.contexts.profile.edit.accent-colour.style :as style]
+            [status-im.contexts.profile.utils :as profile.utils]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn f-view
+  [{:keys [customization-color]}]
+  (let [insets                (safe-area/get-insets)
+        {window-width :width} (rn/get-window)
+        unsaved-custom-color  (reagent/atom customization-color constants/profile-default-color)
+        on-change             #(reset! unsaved-custom-color %)]
+    (fn [{:keys [customization-color]}]
+      (let [profile         (rf/sub [:profile/profile-with-image])
+            profile-picture (profile.utils/photo profile)
+            display-name    (profile.utils/displayed-name profile)]
+        (rn/use-effect
+         #(on-change customization-color)
+         [customization-color])
+        [quo/overlay
+         {:type            :shell
+          :container-style (style/page-wrapper insets)}
+         [quo/page-nav
+          {:key        :header
+           :background :blur
+           :icon-name  :i/arrow-left
+           :on-press   #(rf/dispatch [:navigate-back])}]
+         [rn/view
+          {:key   :content
+           :style style/screen-container}
+          [rn/view {:style {:flex 1}}
+           [rn/view {:style style/padding-horizontal}
+            [quo/text-combinations {:title (i18n/label :t/accent-colour)}]
+            [quo/profile-card
+             {:profile-picture     profile-picture
+              :name                display-name
+              :card-style          style/profile-card
+              :customization-color @unsaved-custom-color}]
+            [quo/text
+             {:size   :paragraph-2
+              :weight :medium
+              :style  style/color-title}
+             (i18n/label :t/accent-colour)]]
+           [quo/color-picker
+            {:blur?            true
+             :default-selected @unsaved-custom-color
+             :on-change        on-change
+             :container-style  style/padding-horizontal
+             :window-width     window-width}]]
+          [rn/view {:style style/button-wrapper}
+           [quo/button
+            {:type                :primary
+             :customization-color @unsaved-custom-color
+             :on-press            (fn []
+                                    (rf/dispatch [:profile/edit-accent-colour @unsaved-custom-color]))}
+            (i18n/label :t/save-colour)]]]]))))
+
+(defn view
+  []
+  (let [customization-color (rf/sub [:profile/customization-color])]
+    [:f> f-view {:customization-color customization-color}]))

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

@@ -25,7 +25,7 @@
                :action          :arrow
                :container-style style/item-container}
               {:title           (i18n/label :t/accent-colour)
-               :on-press        not-implemented/alert
+               :on-press        #(rf/dispatch [:open-modal :edit-accent-colour])
                :label           :color
                :label-props     (colors/resolve-color customization-color theme)
                :blur?           true

src/status_im/contexts/profile/events.cljs

@@ -3,6 +3,7 @@
     [legacy.status-im.data-store.settings :as data-store.settings]
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
+    [status-im.contexts.profile.edit.accent-colour.events]
     [status-im.contexts.profile.edit.header.events]
     [status-im.contexts.profile.edit.name.events]
     [status-im.contexts.profile.login.events :as profile.login]

src/status_im/navigation/options.cljs

@@ -2,7 +2,8 @@
   (:require
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
-    [react-native.platform :as platform]))
+    [react-native.platform :as platform]
+    [status-im.navigation.transitions :as transitions]))
 
 (defn default-options
   []
@@ -88,6 +89,13 @@
                              :orientation              ["portrait"]
                              :backgroundColor          :transparent}}))
 
+(def transparent-modal-screen-options
+  (merge
+   transparent-screen-options
+   {:animations (merge
+                 transitions/new-to-status-modal-animations
+                 transitions/push-animations-for-transparent-background)}))
+
 (def sheet-options
   {:layout                 {:componentBackgroundColor :transparent
                             :orientation              ["portrait"]

src/status_im/navigation/screens.cljs

@@ -35,6 +35,7 @@
     [status-im.contexts.preview.quo.component-preview.view :as component-preview]
     [status-im.contexts.preview.quo.main :as quo.preview]
     [status-im.contexts.preview.status-im.main :as status-im-preview]
+    [status-im.contexts.profile.edit.accent-colour.view :as edit-accent-colour]
     [status-im.contexts.profile.edit.name.view :as edit-name]
     [status-im.contexts.profile.edit.view :as edit-profile]
     [status-im.contexts.profile.profiles.view :as profiles]
@@ -173,11 +174,15 @@
      :component profiles/view}
 
     {:name      :edit-profile
-     :options   options/transparent-screen-options
+     :options   options/transparent-modal-screen-options
      :component edit-profile/view}
 
+    {:name      :edit-accent-colour
+     :options   options/transparent-modal-screen-options
+     :component edit-accent-colour/view}
+
     {:name      :edit-name
-     :options   options/transparent-screen-options
+     :options   options/transparent-modal-screen-options
      :component edit-name/view}
 
     {:name      :new-to-status

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.173.0",
+    "version": "v0.174.1",
-    "commit-sha1": "b83cd418af77ec8dabe3849bf51984a4232740d9",
+    "commit-sha1": "70ee70a19aeafb34e51db1e771b5472fd2568ba9",
-    "src-sha256": "00w8kqdkrv9x95dmlxy7zdm70vilh0gpnj6n81hg1124dy4gwikd"
+    "src-sha256": "1v2mg106r4dzl0hf36nr0jz5wnszk03nmasqvwsvzsrypkcd01c4"
 }

translations/en.json

@@ -5,6 +5,7 @@
     "about-names-content": "No one can pretend to be you! You’re anonymous by default and never have to reveal your real name. You can register a custom name for a small fee.",
     "about-names-title": "Names can’t be changed",
     "accent-colour": "Accent colour",
+    "accent-colour-updated": "Accent colour updated",
     "access-key": "Access key",
     "access-existing-keys": "Access existing keys",
     "accept-and-share-address": "Accept and share address",
@@ -1245,6 +1246,7 @@
     "revoke-access": "Revoke access",
     "rpc-url": "RPC URL",
     "save": "Save",
+    "save-colour": "Save colour",
     "save-name": "Save name",
     "save-password": "Save password",
     "save-password-unavailable": "Set device passcode to save password",