diff --git a/src/quo/components/colors/color/constants.cljs b/src/quo/components/colors/color/constants.cljs index cd1f436db0..aec56c8892 100644 --- a/src/quo/components/colors/color/constants.cljs +++ b/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) diff --git a/src/quo/components/colors/color/style.cljs b/src/quo/components/colors/color/style.cljs index fab66aff01..773bf2776b 100644 --- a/src/quo/components/colors/color/style.cljs +++ b/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 diff --git a/src/quo/components/colors/color_picker/component_spec.cljs b/src/quo/components/colors/color_picker/component_spec.cljs index 84000ce1b7..1c6bc42089 100644 --- a/src/quo/components/colors/color_picker/component_spec.cljs +++ b/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))))) diff --git a/src/quo/components/colors/color_picker/view.cljs b/src/quo/components/colors/color_picker/view.cljs index 9e396cadad..a3cac4eeff 100644 --- a/src/quo/components/colors/color_picker/view.cljs +++ b/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]) diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index c61b179757..622d888d67 100644 --- a/src/quo/foundations/colors.cljs +++ b/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 diff --git a/src/quo/foundations/colors_test.cljs b/src/quo/foundations/colors_test.cljs index 98df06a1ef..83d04f7c7c 100644 --- a/src/quo/foundations/colors_test.cljs +++ b/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))) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 97d31a99d4..a8bd18312e 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/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}]])))) diff --git a/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs similarity index 79% rename from src/status_im2/contexts/wallet/add_watch_only_account/style.cljs rename to src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs index 2e70570177..6c23b7c053 100644 --- a/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs +++ b/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}) diff --git a/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs similarity index 88% rename from src/status_im2/contexts/wallet/add_watch_only_account/views.cljs rename to src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs index bd3f415f95..70da0f8d6f 100644 --- a/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs +++ b/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)) diff --git a/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/style.cljs similarity index 68% rename from src/status_im2/contexts/wallet/select_address_to_watch/style.cljs rename to src/status_im2/contexts/wallet/add_address_to_watch/style.cljs index 880ede2f4e..3cd0b8df90 100644 --- a/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs +++ b/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}) diff --git a/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/view.cljs similarity index 77% rename from src/status_im2/contexts/wallet/select_address_to_watch/view.cljs rename to src/status_im2/contexts/wallet/add_address_to_watch/view.cljs index ba20e8baf9..0fb445b8ad 100644 --- a/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs +++ b/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)) diff --git a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs index 877defb26e..273ff1ece9 100644 --- a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/create_account/view.cljs b/src/status_im2/contexts/wallet/create_account/view.cljs index 4a4490f827..45c6a08752 100644 --- a/src/status_im2/contexts/wallet/create_account/view.cljs +++ b/src/status_im2/contexts/wallet/create_account/view.cljs @@ -1,6 +1,7 @@ (ns status-im2.contexts.wallet.create-account.view (:require [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] @@ -43,7 +44,7 @@ [] (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 diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index e214cce3a0..b247c2cdd1 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/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 diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 7b7c381bf1..61b30cd049 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -39,14 +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-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.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 +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 :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}