Wallet: watch address - select random color (#17859)
Wallet: randomize color picker
This commit is contained in:
parent
83a7402210
commit
f3e47ac1a2
|
@ -1,3 +1,3 @@
|
|||
(ns quo.components.colors.color.constants)
|
||||
|
||||
(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
|
||||
(def ^:const color-size 48)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)))))
|
||||
|
||||
|
||||
|
|
|
@ -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]
|
||||
{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 #(on-change-handler selected % on-change)
|
||||
: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}])
|
||||
;; 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)))])))
|
||||
: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])
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)))
|
||||
|
|
|
@ -67,5 +67,6 @@
|
|||
:default-active @selected-tab
|
||||
:data tabs-data
|
||||
:on-change #(reset! selected-tab %)
|
||||
:scrollable? true}]
|
||||
:scrollable? true
|
||||
:scroll-on-press? true}]
|
||||
[tabs/view {:selected-tab @selected-tab}]]))))
|
||||
|
|
|
@ -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})
|
|
@ -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))
|
|
@ -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})
|
|
@ -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))
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue