status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet: watch address - select random color (#17859) 

Wallet: randomize color picker
This commit is contained in:
Omar Basem 2023-11-13 14:25:44 +04:00 committed by GitHub
parent 83a7402210
commit f3e47ac1a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 96 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/colors/color/constants.cljs
View File

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

5
src/quo/components/colors/color/style.cljs
View File

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

11
src/quo/components/colors/color_picker/component_spec.cljs
View File

@ -5,10 +5,6 @@
[test-helpers.component :as h])) [test-helpers.component :as h]))
(h/describe "color-picker" (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" (h/test "clicks on a color item"
(let [event (h/mock-fn)] (let [event (h/mock-fn)]
(h/render [color-picker/view {:on-change #(event)}]) (h/render [color-picker/view {:on-change #(event)}])
@ -20,11 +16,6 @@
(h/render [color-picker/view {:on-change #(reset! selected %)}]) (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/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
(-> (h/expect @selected) (-> (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))))

74
src/quo/components/colors/color_picker/view.cljs
View File

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

3
src/quo/foundations/colors.cljs
View File

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

3
src/quo/foundations/colors_test.cljs
View File

@ -29,3 +29,6 @@
(testing (testing
"when using opacity theme is ignored and uses the light suffix resolver" "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)))) (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)))

13
src/status_im2/contexts/wallet/account/view.cljs
View File

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

2
src/status_im2/contexts/wallet/add_watch_only_account/style.cljs → src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs
View File

@ -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 (def container
{:flex 1}) {:flex 1})

9
src/status_im2/contexts/wallet/add_watch_only_account/views.cljs → src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs
View File

@ -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 (:require
[clojure.string :as string] [clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.emoji-picker.utils :as emoji-picker.utils] [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 [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
create-or-edit-account] create-or-edit-account]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -20,7 +21,7 @@
account-name (reagent/atom (i18n/label :t/default-account-name account-name (reagent/atom (i18n/label :t/default-account-name
{:number (inc number-of-accounts)})) {:number (inc number-of-accounts)}))
address-title (i18n/label :t/watch-address) 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)) account-emoji (reagent/atom (emoji-picker.utils/random-emoji))
on-change-name #(reset! account-name %) on-change-name #(reset! account-name %)
on-change-color #(reset! account-color %) on-change-color #(reset! account-color %)
@ -57,4 +58,4 @@
:container-style style/data-item :container-style style/data-item
:on-press #(js/alert "To be implemented")}]]]))) :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))

7
src/status_im2/contexts/wallet/select_address_to_watch/style.cljs → src/status_im2/contexts/wallet/add_address_to_watch/style.cljs
View File

@ -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 (def header-container
{:margin-horizontal 20 {:margin-horizontal 20
@ -10,9 +10,8 @@
:padding-horizontal 20 :padding-horizontal 20
:align-items :flex-end}) :align-items :flex-end})
(defn button-container (def button-container
[bottom]
{:position :absolute {:position :absolute
:bottom (- bottom 22) :bottom 22
:left 20 :left 20
:right 20}) :right 20})

16
src/status_im2/contexts/wallet/select_address_to_watch/view.cljs → src/status_im2/contexts/wallet/add_address_to_watch/view.cljs
View File

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

3
src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs
View File

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

3
src/status_im2/contexts/wallet/create_account/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.contexts.wallet.create-account.view (ns status-im2.contexts.wallet.create-account.view
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
@ -43,7 +44,7 @@
[] []
(let [top (safe-area/get-top) (let [top (safe-area/get-top)
bottom (safe-area/get-bottom) 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)) emoji (reagent/atom (emoji-picker.utils/random-emoji))
number-of-accounts (count (rf/sub [:wallet/accounts])) number-of-accounts (count (rf/sub [:wallet/accounts]))
account-name (reagent/atom (i18n/label :t/default-account-name account-name (reagent/atom (i18n/label :t/default-account-name

2
src/status_im2/contexts/wallet/home/view.cljs
View File

@ -25,7 +25,7 @@
:accessibility-label :add-a-contact :accessibility-label :add-a-contact
:label (i18n/label :t/add-address) :label (i18n/label :t/add-address)
:sub-label (i18n/label :t/add-address-description) :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}]]]) :add-divider? true}]]])
(defn- add-account-placeholder (defn- add-account-placeholder

14
src/status_im2/navigation/screens.cljs
View File

@ -39,14 +39,14 @@
[status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] [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.bridge.view :as bridge]
[status-im2.contexts.wallet.account.view :as wallet-accounts] [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.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.edit-derivation-path.view :as wallet-edit-derivation-path]
[status-im2.contexts.wallet.create-account.view :as wallet-create-account] [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.edit-account.view :as wallet-edit-account]
[status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] [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.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.contexts.wallet.send.select-address.view :as wallet-select-address]
[status-im2.navigation.options :as options] [status-im2.navigation.options :as options]
[status-im2.navigation.transitions :as transitions])) [status-im2.navigation.transitions :as transitions]))
@ -248,16 +248,16 @@
:options {:insets {:top? true}} :options {:insets {:top? true}}
:component wallet-accounts/view} :component wallet-accounts/view}
{:name :address-to-watch-edit
:component address-add-edit/address-add-edit}
{:name :wallet-edit-account {:name :wallet-edit-account
:component wallet-edit-account/view} :component wallet-edit-account/view}
{:name :wallet-address-watch {:name :add-address-to-watch
:options {:insets {:top? true :options {:insets {:top? true
:bottom? 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 {:name :wallet-bridge
:options {:insets {:top? true} :options {:insets {:top? true}