diff --git a/src/status_im/contexts/chat/messenger/messages/transport/events.cljs b/src/status_im/contexts/chat/messenger/messages/transport/events.cljs index 6e785375bcfb..d71ef0ef16ad 100644 --- a/src/status_im/contexts/chat/messenger/messages/transport/events.cljs +++ b/src/status_im/contexts/chat/messenger/messages/transport/events.cljs @@ -54,6 +54,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 @@ -203,7 +204,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-clj (types/js->clj customization-color-js)] + (js-delete response-js "customizationColor") + (rf/merge cofx + (process-next response-js sync-handler) + (rf/dispatch [:profile/edit-accent-colour customization-color-clj])))))) (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" diff --git a/src/status_im/contexts/profile/edit/accent_colour/events.cljs b/src/status_im/contexts/profile/edit/accent_colour/events.cljs new file mode 100644 index 000000000000..5c6833933aa6 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/events.cljs @@ -0,0 +1,24 @@ +(ns status-im.contexts.profile.edit.accent-colour.events + (:require [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(rf/reg-event-fx :profile/edit-accent-colour-success + (fn [_] + {:fx [[:dispatch [:navigate-back]] + [:dispatch + [:toasts/upsert + {:type :positive + :theme :dark + :text (i18n/label :t/accent-colour-updated)}]]]})) + +(defn edit-accent-colour + [{:keys [db]} [customizationColor]] + (let [key-uid (get-in db [:profile/profile :key-uid])] + {:db (assoc-in db [:profile/profile :customization-color] customizationColor) + :fx [[:json-rpc/call + [{:method "wakuext_setCustomizationColor" + :params [{:customizationColor customizationColor + :keyUid key-uid}] + :on-success [:profile/edit-accent-colour-success]}]]]})) + +(rf/reg-event-fx :profile/edit-accent-colour edit-accent-colour) diff --git a/src/status_im/contexts/profile/edit/accent_colour/events_test.cljs b/src/status_im/contexts/profile/edit/accent_colour/events_test.cljs new file mode 100644 index 000000000000..82b419ed3387 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/events_test.cljs @@ -0,0 +1,16 @@ +(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]}]]]}] + (is (match? expected + (sut/edit-accent-colour cofx [new-color]))))) diff --git a/src/status_im/contexts/profile/edit/accent_colour/style.cljs b/src/status_im/contexts/profile/edit/accent_colour/style.cljs new file mode 100644 index 000000000000..7a7d5d9c153b --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/style.cljs @@ -0,0 +1,27 @@ +(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 + :padding-horizontal 20 + :justify-content :space-between}) + +(def color-title + {:color colors/white-70-blur + :margin-top 20 + :margin-bottom 16}) + +(def button-wrapper + {:margin-vertical 12}) + +(def profile-card + {:margin-top 22 + :margin-bottom 5}) diff --git a/src/status_im/contexts/profile/edit/accent_colour/view.cljs b/src/status_im/contexts/profile/edit/accent_colour/view.cljs new file mode 100644 index 000000000000..82eb4116e3e9 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/view.cljs @@ -0,0 +1,61 @@ +(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] + [utils.responsiveness :as responsiveness])) + +(defn view + [] + (let [insets (safe-area/get-insets) + {window-width :width} (rn/get-window) + profile (rf/sub [:profile/profile-with-image]) + customization-color (rf/sub [:profile/customization-color]) + profile-picture (profile.utils/photo profile) + display-name (profile.utils/displayed-name profile) + custom-color (reagent/atom (or customization-color + constants/profile-default-color)) + on-change #(reset! custom-color %)] + (fn [] + [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}} + [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 @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 @custom-color + :on-change on-change + :window-width window-width + :container-style {:padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width + window-width)}}]] + [rn/view {:style style/button-wrapper} + [quo/button + {:type :primary + :customization-color @custom-color + :on-press (fn [] + (rf/dispatch [:profile/edit-accent-colour @custom-color]))} + (i18n/label :t/save-colour)]]]]))) diff --git a/src/status_im/contexts/profile/edit/list_items.cljs b/src/status_im/contexts/profile/edit/list_items.cljs index da20a58e4f1c..1328fc9a8be6 100644 --- a/src/status_im/contexts/profile/edit/list_items.cljs +++ b/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 diff --git a/src/status_im/contexts/profile/events.cljs b/src/status_im/contexts/profile/events.cljs index 4826b27b47e3..efd5b7600c51 100644 --- a/src/status_im/contexts/profile/events.cljs +++ b/src/status_im/contexts/profile/events.cljs @@ -2,6 +2,7 @@ (:require [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.name.events] [status-im.contexts.profile.login.events :as profile.login] [status-im.contexts.profile.rpc :as profile.rpc] diff --git a/src/status_im/integration_test/profile_test.cljs b/src/status_im/integration_test/profile_test.cljs index 645c12ab8b0f..498e73205477 100644 --- a/src/status_im/integration_test/profile_test.cljs +++ b/src/status_im/integration_test/profile_test.cljs @@ -2,6 +2,7 @@ (:require [cljs.test :refer [deftest is]] [day8.re-frame.test :as rf-test] + [legacy.status-im.multiaccounts.logout.core :as logout] [status-im.contexts.profile.utils :as profile.utils] [test-helpers.integration :as h] [utils.re-frame :as rf])) @@ -19,4 +20,22 @@ [:toasts/upsert] (let [profile (rf/sub [:profile/profile]) display-name (profile.utils/displayed-name profile)] - (is (= new-name display-name)))))))))) + (is (= new-name display-name))) + (h/logout) + (rf-test/wait-for [::logout/logout-method])))))))) + +(deftest edit-profile-accent-colour-test + (h/log-headline :edit-profile-accent-colour-test) + (let [new-color :yellow] + (rf-test/run-test-async + (h/with-app-initialized + (h/with-account + (rf/dispatch [:profile/edit-accent-colour new-color]) + (rf-test/wait-for + [:navigate-back] + (rf-test/wait-for + [:toasts/upsert] + (let [customization-color (rf/sub [:profile/customization-color])] + (is (= new-color customization-color))) + (h/logout) + (rf-test/wait-for [::logout/logout-method])))))))) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 0e7d2ab9e8af..ca3400368d1e 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -34,6 +34,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] @@ -172,6 +173,10 @@ :options options/transparent-screen-options :component edit-profile/view} + {:name :edit-accent-colour + :options options/transparent-screen-options + :component edit-accent-colour/view} + {:name :edit-name :options options/transparent-screen-options :component edit-name/view} diff --git a/status-go-version.json b/status-go-version.json index daa105e0aa54..8dde2f2c9246 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -3,7 +3,7 @@ "_comment": "Instead use: scripts/update-status-go.sh ", "owner": "status-im", "repo": "status-go", - "version": "v0.172.5", - "commit-sha1": "ea3e59ffeefa623373b4a39ecf7fa5558e384ad0", - "src-sha256": "11rds4i2ylngaddiz5f4g0r0rzwplcbkg5c4wvwzzxl49gza50j3" + "version": "feat/change-accent-colour", + "commit-sha1": "a9541761c8512a80e7ec742d94d9b3d2af8cbcb3", + "src-sha256": "0ghka9armp6nnma4sbs0m22aqkm10xzsysw62ip12aghg21mnhyz" } diff --git a/translations/en.json b/translations/en.json index 16011801eac2..ec10078543c7 100644 --- a/translations/en.json +++ b/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", @@ -1243,6 +1244,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",