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

View File

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

View File

@ -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

View File

@ -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)))))

View File

@ -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])

View File

@ -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

View File

@ -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)))

View File

@ -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}]]))))

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
{:flex 1})

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
[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))

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
{: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})

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
[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))

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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}