Update drawer/bottom-actions component with top & top error variants (#18513)
This commit is contained in:
parent
52a82fffab
commit
ac32de89f9
Binary file not shown.
After Width: | Height: | Size: 695 B |
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
|
@ -4,14 +4,15 @@
|
|||
|
||||
(def backgrounds #{:photo :blur})
|
||||
|
||||
(defn custom-color-type
|
||||
[customization-color icon-only?]
|
||||
{:icon-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color (colors/custom-color customization-color 50)
|
||||
:border-radius (when icon-only? 24)})
|
||||
(defn- custom-color-type
|
||||
[customization-color icon-only? theme]
|
||||
{:icon-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color (colors/resolve-color customization-color theme)
|
||||
:border-radius (when icon-only? 24)
|
||||
:overlay-customization-color customization-color})
|
||||
|
||||
(defn grey-photo
|
||||
(defn- grey-photo
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
|
@ -24,7 +25,7 @@
|
|||
theme))
|
||||
:blur-type (if (= theme :light) :light :dark)})
|
||||
|
||||
(defn grey-blur
|
||||
(defn- grey-blur
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
|
@ -32,7 +33,7 @@
|
|||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
|
||||
|
||||
(defn outline-blur
|
||||
(defn- outline-blur
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
|
@ -40,7 +41,7 @@
|
|||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
|
||||
|
||||
(defn grey
|
||||
(defn- grey
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
|
@ -50,7 +51,7 @@
|
|||
colors/neutral-90
|
||||
theme))})
|
||||
|
||||
(defn dark-grey
|
||||
(defn- dark-grey
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
|
@ -58,7 +59,7 @@
|
|||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
|
||||
|
||||
(defn outline
|
||||
(defn- outline
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
|
@ -66,29 +67,33 @@
|
|||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
|
||||
|
||||
(defn ghost
|
||||
(defn- ghost
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (when pressed?
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
|
||||
(defn black
|
||||
(defn- black
|
||||
[pressed?]
|
||||
{:label-color colors/white
|
||||
:background-color (if pressed? colors/neutral-80 colors/neutral-95)})
|
||||
|
||||
(defn get-values
|
||||
[{:keys [customization-color theme type background pressed? icon-only?]}]
|
||||
(cond
|
||||
(= type :primary) (custom-color-type customization-color icon-only?)
|
||||
(= type :positive) (custom-color-type customization-color icon-only?)
|
||||
(= type :danger) (custom-color-type customization-color icon-only?)
|
||||
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
|
||||
(and (= :blur background) (= type :grey)) (grey-blur theme pressed?)
|
||||
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
|
||||
(= type :grey) (grey theme pressed?)
|
||||
(= type :dark-grey) (dark-grey theme pressed?)
|
||||
(= type :outline) (outline theme pressed?)
|
||||
(= type :ghost) (ghost theme pressed?)
|
||||
(= type :black) (black pressed?)))
|
||||
(let [customization-color (get {:primary customization-color
|
||||
:positive :success
|
||||
:danger :danger}
|
||||
type)]
|
||||
(cond
|
||||
(contains? #{:primary :positive :danger} type) (custom-color-type customization-color
|
||||
icon-only?
|
||||
theme)
|
||||
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
|
||||
(and (= :blur background) (= type :grey)) (grey-blur theme pressed?)
|
||||
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
|
||||
(= type :grey) (grey theme pressed?)
|
||||
(= type :dark-grey) (dark-grey theme pressed?)
|
||||
(= type :outline) (outline theme pressed?)
|
||||
(= type :ghost) (ghost theme pressed?)
|
||||
(= type :black) (black pressed?))))
|
||||
|
|
|
@ -37,13 +37,10 @@
|
|||
pressed? on-press-in on-press-out allow-multiple-presses?]
|
||||
:or {type :primary
|
||||
size 40
|
||||
customization-color (cond (= type :primary) :blue
|
||||
(= type :positive) :success
|
||||
(= type :danger) :danger
|
||||
:else nil)}}
|
||||
customization-color (if (= type :primary) :blue nil)}}
|
||||
children]
|
||||
(let [{:keys [icon-color background-color label-color border-color blur-type
|
||||
blur-overlay-color border-radius]}
|
||||
blur-overlay-color border-radius overlay-customization-color]}
|
||||
(button-properties/get-values {:customization-color customization-color
|
||||
:background background
|
||||
:type type
|
||||
|
@ -79,9 +76,9 @@
|
|||
:icon-left icon-left
|
||||
:icon-right icon-right})
|
||||
inner-style)}
|
||||
(when customization-color
|
||||
(when overlay-customization-color
|
||||
[customization-colors/overlay
|
||||
{:customization-color customization-color
|
||||
{:customization-color overlay-customization-color
|
||||
:theme theme
|
||||
:pressed? (if pressed? pressed? @pressed-state?)}])
|
||||
(when (= background :photo)
|
||||
|
|
|
@ -3,34 +3,60 @@
|
|||
[quo.components.drawers.bottom-actions.view :as bottom-actions]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(defn- render
|
||||
[component]
|
||||
(h/render-with-theme-provider component :light))
|
||||
|
||||
(h/describe "bottom actions tests"
|
||||
(h/test "default render with no description and single action button"
|
||||
(h/render [bottom-actions/view {:button-one-label "Request to join"}])
|
||||
(render [bottom-actions/view {:actions :one-action :button-one-label "Request to join"}])
|
||||
(h/is-truthy (h/get-by-text "Request to join")))
|
||||
|
||||
(h/test "render with description"
|
||||
(h/render [bottom-actions/view {:description "Sample description"}])
|
||||
(h/is-truthy (h/get-by-text "Sample description")))
|
||||
(h/test "render with description & 1 action"
|
||||
(render [bottom-actions/view
|
||||
{:description :bottom
|
||||
:description-text "Sample description"
|
||||
:actions :one-action
|
||||
:button-one-label "Request to join"}])
|
||||
(h/is-truthy (h/get-by-text "Sample description"))
|
||||
(h/is-truthy (h/get-by-text "Request to join")))
|
||||
|
||||
(h/test "render with 2 actions"
|
||||
(let [button-one "Button One"
|
||||
button-two "Button Two"]
|
||||
(h/render [bottom-actions/view
|
||||
{:actions :2-actions
|
||||
:button-one-label button-one
|
||||
:button-one-props {:icon-left :i/arrow-left}
|
||||
:button-two-label button-two}])
|
||||
(render [bottom-actions/view
|
||||
{:actions :two-actions
|
||||
:button-one-label button-one
|
||||
:button-one-props {:icon-left :i/arrow-left}
|
||||
:button-two-label button-two}])
|
||||
(h/is-truthy (h/get-by-text button-one))
|
||||
(h/is-truthy (h/get-by-label-text :icon))
|
||||
(h/is-truthy (h/get-by-text button-two))))
|
||||
|
||||
(h/test "render disabled button"
|
||||
(h/render [bottom-actions/view
|
||||
{:description "Sample description"
|
||||
:button-one-props {:disabled? true}
|
||||
:button-one-label "button"}])
|
||||
(render [bottom-actions/view
|
||||
{:description :bottom
|
||||
:actions :one-action
|
||||
:description-text "Sample description"
|
||||
:button-one-props {:disabled? true}
|
||||
:button-one-label "button"}])
|
||||
(h/is-disabled (h/get-by-label-text :button-one)))
|
||||
|
||||
(h/test "sane defaults"
|
||||
(h/render [bottom-actions/view {}])
|
||||
(h/is-truthy (h/get-by-label-text :button-one))))
|
||||
(h/test "render with error & 1 action"
|
||||
(render [bottom-actions/view
|
||||
{:description :top-error
|
||||
:error-message "Sample error"
|
||||
:actions :one-action
|
||||
:button-one-label "Request to join"}])
|
||||
(h/is-truthy (h/get-by-text "Sample error"))
|
||||
(h/is-truthy (h/get-by-text "Request to join")))
|
||||
|
||||
(h/test "render with top description & 1 action"
|
||||
(render [bottom-actions/view
|
||||
{:description :top
|
||||
:role :admin
|
||||
:actions :one-action
|
||||
:button-one-label "Request to join"}])
|
||||
(h/is-truthy (h/get-by-text "Eligible to join as"))
|
||||
(h/is-truthy (h/get-by-text "Admin"))
|
||||
(h/is-truthy (h/get-by-text "Request to join"))))
|
||||
|
|
|
@ -2,34 +2,58 @@
|
|||
(:require
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(defn- text-color
|
||||
[scroll? blur? theme]
|
||||
(cond
|
||||
scroll? (if blur?
|
||||
colors/white-70-blur
|
||||
(colors/theme-colors colors/neutral-80-opa-70
|
||||
colors/white-opa-70
|
||||
theme))
|
||||
blur? colors/white-opa-40
|
||||
:else (colors/theme-colors colors/neutral-50
|
||||
colors/neutral-40
|
||||
theme)))
|
||||
|
||||
(defn container
|
||||
[scroll? blur? theme]
|
||||
{:background-color (when-not (or scroll? blur?)
|
||||
(colors/theme-colors colors/white colors/neutral-95 theme))})
|
||||
|
||||
(def buttons-container
|
||||
{:flex-direction :row
|
||||
:justify-content :space-around
|
||||
:padding-vertical 12
|
||||
:gap 12
|
||||
:padding-horizontal 20})
|
||||
|
||||
(def button-container
|
||||
{:flex 1})
|
||||
|
||||
(def button-container-2-actions
|
||||
(assoc button-container :margin-right 12))
|
||||
(def description-top
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:gap 5
|
||||
:padding-top 12
|
||||
:padding-bottom 4
|
||||
:justify-content :center})
|
||||
|
||||
(defn description
|
||||
[theme scroll?]
|
||||
{:color (colors/theme-colors
|
||||
(if scroll?
|
||||
(colors/custom-color colors/neutral-80 70)
|
||||
colors/neutral-50)
|
||||
(if scroll?
|
||||
colors/white-opa-70
|
||||
colors/neutral-40)
|
||||
theme)
|
||||
(defn description-top-text
|
||||
[scroll? blur? theme]
|
||||
{:color (text-color scroll? blur? theme)})
|
||||
|
||||
(defn description-bottom
|
||||
[scroll? blur? theme]
|
||||
{:color (text-color scroll? blur? theme)
|
||||
:text-align :center
|
||||
:padding-bottom 12
|
||||
:padding-horizontal 40})
|
||||
|
||||
(def scroll
|
||||
{:margin-top 21
|
||||
:margin-horizontal 120
|
||||
:margin-bottom 8
|
||||
:width 134
|
||||
:height 5})
|
||||
(def error-message
|
||||
{:flex-direction :row
|
||||
:gap 4
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:padding-top 15
|
||||
:padding-horizontal 20
|
||||
:padding-bottom 7})
|
||||
|
|
|
@ -2,55 +2,105 @@
|
|||
(:require
|
||||
[quo.components.buttons.button.view :as button]
|
||||
[quo.components.drawers.bottom-actions.style :as style]
|
||||
[quo.components.icon :as icon]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.context-tag.view :as context-tag]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
[react-native.blur :as blur]
|
||||
[react-native.core :as rn]
|
||||
[schema.core :as schema]
|
||||
[utils.i18n :as i18n]))
|
||||
|
||||
(def default-props
|
||||
{:button-one-type :primary
|
||||
:button-two-type :grey
|
||||
:customization-color :blue})
|
||||
(def ?schema
|
||||
[:=>
|
||||
[:catn
|
||||
[:props
|
||||
[:map {:closed true}
|
||||
[:actions [:maybe [:enum :one-action :two-actions]]]
|
||||
[:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
|
||||
[:description-text {:optional true} [:maybe :string]]
|
||||
[:error-message {:optional true} [:maybe :string]]
|
||||
[:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
|
||||
[:button-one-label {:optional true} [:maybe :string]]
|
||||
[:button-two-label {:optional true} [:maybe :string]]
|
||||
[:button-one-props {:optional true} [:maybe :map]]
|
||||
[:button-two-props {:optional true} [:maybe :map]]
|
||||
[:theme :schema.common/theme]
|
||||
[:scroll? {:optional true} [:maybe :boolean]]
|
||||
[:blur? {:optional true} [:maybe :boolean]]
|
||||
[:container-style {:optional true} [:maybe :map]]]]]
|
||||
:any])
|
||||
|
||||
(def ^:private role-icon
|
||||
{:admin :i/gavel
|
||||
:member :i/members
|
||||
:token-master :i/token-master
|
||||
:owner :i/crown})
|
||||
|
||||
(defn- view-internal
|
||||
"Options:
|
||||
|
||||
:actions - keyword (default nil) - :1-action/:2-actions
|
||||
:description - string (default nil) - Description to display below the title
|
||||
:button-one-label - string (default nil) - Label for the first button
|
||||
:button-two-label - string (default nil) - Label for the second button
|
||||
:button-one-props - map with props for button one
|
||||
:button-two-props - map with props for button two
|
||||
:theme - :light/:dark
|
||||
:scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
|
||||
[props]
|
||||
(let [{:keys [actions description button-one-label button-two-label
|
||||
button-one-props button-two-props theme scroll? customization-color container-style]}
|
||||
(merge default-props props)]
|
||||
[rn/view {:style container-style}
|
||||
[rn/view {:style style/buttons-container}
|
||||
(when (= actions :2-actions)
|
||||
[button/button
|
||||
(merge
|
||||
{:size 40
|
||||
:background (when scroll? :blur)
|
||||
:container-style style/button-container-2-actions
|
||||
:theme theme
|
||||
:accessibility-label :button-two}
|
||||
button-two-props)
|
||||
button-two-label])
|
||||
[button/button
|
||||
(merge
|
||||
{:size 40
|
||||
:container-style style/button-container
|
||||
:background (when scroll? :blur)
|
||||
:theme theme
|
||||
:accessibility-label :button-one
|
||||
:customization-color customization-color}
|
||||
button-one-props)
|
||||
button-one-label]]
|
||||
(when description
|
||||
[{:keys [actions description description-text error-message role button-one-label button-two-label
|
||||
blur? button-one-props button-two-props theme scroll? container-style]}]
|
||||
[blur/view
|
||||
{:blur-amount 20
|
||||
:blur-type :transparent
|
||||
:overlay-color (if blur?
|
||||
colors/neutral-80-opa-1-blur
|
||||
(colors/theme-colors colors/white-70-blur
|
||||
colors/neutral-95-opa-70-blur
|
||||
theme))}
|
||||
[rn/view
|
||||
{:style (merge (style/container scroll? blur? theme) container-style)}
|
||||
(when (= description :top-error)
|
||||
[rn/view {:style style/error-message}
|
||||
[icon/icon
|
||||
:i/alert
|
||||
{:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
|
||||
:size 16}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style (style/description theme scroll?)} description])]))
|
||||
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
|
||||
error-message]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
(when (= description :top)
|
||||
[rn/view
|
||||
{:style style/description-top}
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style (style/description-top-text scroll? blur? theme)}
|
||||
(i18n/label :t/eligible-to-join-as)]
|
||||
[context-tag/view
|
||||
{:type :icon
|
||||
:size 24
|
||||
:icon (role role-icon)
|
||||
:blur? blur?
|
||||
:context (i18n/label (keyword "t" role))}]])
|
||||
|
||||
[rn/view {:style style/buttons-container}
|
||||
(when (= actions :two-actions)
|
||||
[button/button
|
||||
(merge
|
||||
{:size 40
|
||||
:background (when (or blur? scroll?) :blur)
|
||||
:container-style style/button-container
|
||||
:theme theme
|
||||
:accessibility-label :button-two}
|
||||
button-two-props)
|
||||
button-two-label])
|
||||
[button/button
|
||||
(merge
|
||||
{:size 40
|
||||
:container-style style/button-container
|
||||
:background (when (or blur? scroll?) :blur)
|
||||
:theme theme
|
||||
:accessibility-label :button-one}
|
||||
button-one-props)
|
||||
button-one-label]]
|
||||
(when (= description :bottom)
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style (style/description-bottom scroll? blur? theme)} description-text])]])
|
||||
|
||||
(def view
|
||||
(quo.theme/with-theme
|
||||
(schema/instrument #'view-internal ?schema)))
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:style {:color colors/neutral-50}}
|
||||
(i18n/label :t/eligible-to-join-as {:role ""})]
|
||||
(i18n/label :t/eligible-to-join-as)]
|
||||
[quo/context-tag
|
||||
{:type :icon
|
||||
:icon :i/members
|
||||
|
|
|
@ -19,8 +19,10 @@
|
|||
(def descriptor
|
||||
[{:type :select
|
||||
:key :actions
|
||||
:options [{:key :1-action}
|
||||
{:key :2-actions}]}
|
||||
:options [{:key :one-action}
|
||||
{:key :two-actions}]}
|
||||
{:key :button-one-label
|
||||
:type :text}
|
||||
{:label "Button 1 type"
|
||||
:type :select
|
||||
:key :type
|
||||
|
@ -30,6 +32,8 @@
|
|||
:type :boolean
|
||||
:key :disabled?
|
||||
:path [:button-one-props]}
|
||||
{:key :button-two-label
|
||||
:type :text}
|
||||
{:label "Button 2 type"
|
||||
:type :select
|
||||
:key :type
|
||||
|
@ -39,32 +43,59 @@
|
|||
:type :boolean
|
||||
:key :disabled?
|
||||
:path [:button-two-props]}
|
||||
{:key :description
|
||||
:type :text}
|
||||
{:key :button-one-label
|
||||
:type :text}
|
||||
{:key :button-two-label
|
||||
:type :text}
|
||||
{:key :blur?
|
||||
:type :boolean}
|
||||
{:key :scroll?
|
||||
:type :boolean}])
|
||||
:type :boolean}
|
||||
{:key :description
|
||||
:type :select
|
||||
:options [{:key nil
|
||||
:value :none}
|
||||
{:key :top}
|
||||
{:key :bottom}
|
||||
{:key :top-error}]}])
|
||||
|
||||
(def role-descriptor
|
||||
{:key :role
|
||||
:type :select
|
||||
:options [{:key :owner}
|
||||
{:key :token-master}
|
||||
{:key :admin}
|
||||
{:key :member}]})
|
||||
|
||||
(def description-descriptor
|
||||
{:key :description-text
|
||||
:type :text})
|
||||
|
||||
(def error-descriptor
|
||||
{:key :error-message
|
||||
:type :text})
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:actions :2-actions
|
||||
:description description
|
||||
(let [state (reagent/atom {:actions :two-actions
|
||||
:description :bottom
|
||||
:description-text description
|
||||
:error-message "Error message"
|
||||
:button-one-label button-one
|
||||
:button-two-label button-two
|
||||
:button-one-props {:on-press (button-press 1)
|
||||
:type :primary
|
||||
:icon-left :i/arrow-up}
|
||||
:button-one-props {:on-press (button-press 1)
|
||||
:type :primary}
|
||||
:button-two-props {:on-press (button-press 2)
|
||||
:type :grey}
|
||||
:blur? false
|
||||
:role :owner
|
||||
:scroll? false})]
|
||||
(fn []
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor
|
||||
:blur? (:scroll? @state)
|
||||
:descriptor (merge descriptor
|
||||
(case (:description @state)
|
||||
:top role-descriptor
|
||||
:bottom description-descriptor
|
||||
:top-error error-descriptor
|
||||
nil))
|
||||
:blur? (:blur? @state)
|
||||
:show-blur-background? true
|
||||
:blur-dark-only? true
|
||||
:component-container-style {:margin-top 40
|
||||
|
|
|
@ -110,7 +110,8 @@
|
|||
network))}))
|
||||
layer-2-networks)}]
|
||||
[quo/bottom-actions
|
||||
{:button-one-label (i18n/label :t/update)
|
||||
{:actions :one-action
|
||||
:button-one-label (i18n/label :t/update)
|
||||
:button-one-props {:disabled? (= @state :default)
|
||||
:on-press (fn []
|
||||
(let [chain-ids (map :chain-id current-networks)]
|
||||
|
|
|
@ -3,9 +3,13 @@
|
|||
[status-im.contexts.wallet.create-account.edit-derivation-path.view :as edit-derivation-path]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(defn- render
|
||||
[component]
|
||||
(h/render-with-theme-provider component :light))
|
||||
|
||||
(h/describe "Edit derivation path page"
|
||||
(h/test "Default render"
|
||||
(h/render [edit-derivation-path/view {}])
|
||||
(render [edit-derivation-path/view {}])
|
||||
(h/is-truthy (h/get-by-translation-text :t/edit-derivation-path))
|
||||
(h/is-truthy (h/get-by-translation-text :t/path-format))
|
||||
(h/is-truthy (h/get-by-translation-text :t/derivation-path))
|
||||
|
@ -15,14 +19,14 @@
|
|||
|
||||
(h/test "Reveal address pressed"
|
||||
(let [on-reveal (h/mock-fn)]
|
||||
(h/render [edit-derivation-path/view {:on-reveal on-reveal}])
|
||||
(render [edit-derivation-path/view {:on-reveal on-reveal}])
|
||||
(h/fire-event :press (h/get-by-translation-text :t/reveal-address))
|
||||
(h/was-called on-reveal)
|
||||
(h/wait-for #(h/is-truthy (h/get-by-translation-text :t/address-activity)))))
|
||||
|
||||
(h/test "Reset button pressed"
|
||||
(let [on-reset (h/mock-fn)]
|
||||
(h/render [edit-derivation-path/view {:on-reset on-reset}])
|
||||
(render [edit-derivation-path/view {:on-reset on-reset}])
|
||||
(h/fire-event :press (h/get-by-translation-text :t/reset))
|
||||
(h/was-called on-reset)
|
||||
(h/wait-for #(h/is-truthy (h/get-by-translation-text :t/derive-addresses))))))
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
:default
|
||||
[quo/bottom-actions
|
||||
{:theme theme
|
||||
:actions :1-action
|
||||
:actions :one-action
|
||||
:button-one-label (i18n/label :t/reveal-address)
|
||||
:button-one-props {:type :outline
|
||||
:icon-left :i/keycard-card
|
||||
|
@ -81,7 +81,7 @@
|
|||
:empty
|
||||
[quo/bottom-actions
|
||||
{:theme theme
|
||||
:actions :1-action
|
||||
:actions :one-action
|
||||
:button-one-label (i18n/label :t/derive-addresses)
|
||||
:button-one-props {:type :outline
|
||||
:icon-left :i/keycard-card
|
||||
|
@ -111,7 +111,7 @@
|
|||
[rn/view {:style (style/save-button-container bottom)}
|
||||
[quo/bottom-actions
|
||||
{:theme theme
|
||||
:actions :1-action
|
||||
:actions :one-action
|
||||
:button-one-label (i18n/label :t/save)
|
||||
:button-one-props {:type :primary
|
||||
:on-press #(js/alert "Save!")
|
||||
|
|
|
@ -77,7 +77,8 @@
|
|||
(if @revealed?
|
||||
[rn/view {:style style/slide-button}
|
||||
[quo/bottom-actions
|
||||
{:button-one-label (i18n/label :t/i-have-written)
|
||||
{:actions :one-action
|
||||
:button-one-label (i18n/label :t/i-have-written)
|
||||
:button-one-props {:disabled? (some false? (vals @checked?))
|
||||
:customization-color customization-color
|
||||
:on-press #(rf/dispatch [:navigate-to
|
||||
|
@ -87,7 +88,8 @@
|
|||
:style (style/description-text theme)}
|
||||
(i18n/label :t/next-you-will)]]
|
||||
[quo/bottom-actions
|
||||
{:button-one-label (i18n/label :t/reveal-phrase)
|
||||
{:actions :one-action
|
||||
:button-one-label (i18n/label :t/reveal-phrase)
|
||||
:button-one-props {:disabled? (some false? (vals @checked?))
|
||||
:customization-color customization-color
|
||||
:on-press #(reset! revealed? true)}
|
||||
|
|
|
@ -75,7 +75,8 @@
|
|||
:container-style {:margin-horizontal 20
|
||||
:margin-vertical 8}})]
|
||||
[quo/bottom-actions
|
||||
{:button-one-label (i18n/label :t/confirm-account-origin)
|
||||
{:actions :one-action
|
||||
:button-one-label (i18n/label :t/confirm-account-origin)
|
||||
:button-one-props {:disabled? true
|
||||
:customization-color customization-color}
|
||||
:container-style style/bottom-action-container}]]))
|
||||
|
|
|
@ -47,15 +47,19 @@
|
|||
:wallet/wallet-send-suggested-routes {:candidates []}
|
||||
:wallet/wallet-send-selected-networks []})
|
||||
|
||||
(defn- render
|
||||
[component]
|
||||
(h/render-with-theme-provider component :light))
|
||||
|
||||
(h/describe "Send > input amount screen"
|
||||
(h/setup-restorable-re-frame)
|
||||
|
||||
(h/test "Default render"
|
||||
(h/setup-subs sub-mocks)
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 2
|
||||
:limit-crypto 250
|
||||
:initial-crypto-currency? false}])
|
||||
(render [input-amount/view
|
||||
{:crypto-decimals 2
|
||||
:limit-crypto 250
|
||||
:initial-crypto-currency? false}])
|
||||
(h/is-truthy (h/get-by-text "0"))
|
||||
(h/is-truthy (h/get-by-text "ETH"))
|
||||
(h/is-truthy (h/get-by-text "$0.00"))
|
||||
|
@ -65,11 +69,11 @@
|
|||
(h/test "Fill token input and confirm"
|
||||
(h/setup-subs sub-mocks)
|
||||
(let [on-confirm (h/mock-fn)]
|
||||
(h/render [input-amount/view
|
||||
{:on-confirm on-confirm
|
||||
:crypto-decimals 10
|
||||
:limit-crypto 1000
|
||||
:initial-crypto-currency? false}])
|
||||
(render [input-amount/view
|
||||
{:on-confirm on-confirm
|
||||
:crypto-decimals 10
|
||||
:limit-crypto 1000
|
||||
:initial-crypto-currency? false}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
|
||||
|
@ -89,11 +93,11 @@
|
|||
(h/setup-subs sub-mocks)
|
||||
|
||||
(let [on-confirm (h/mock-fn)]
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 10
|
||||
:limit-crypto 1000
|
||||
:on-confirm on-confirm
|
||||
:initial-crypto-currency? false}])
|
||||
(render [input-amount/view
|
||||
{:crypto-decimals 10
|
||||
:limit-crypto 1000
|
||||
:on-confirm on-confirm
|
||||
:initial-crypto-currency? false}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
|
||||
|
@ -111,9 +115,9 @@
|
|||
|
||||
(h/test "Try to fill more than limit"
|
||||
(h/setup-subs sub-mocks)
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 1
|
||||
:limit-crypto 1}])
|
||||
(render [input-amount/view
|
||||
{:crypto-decimals 1
|
||||
:limit-crypto 1}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-9))
|
||||
|
@ -123,10 +127,10 @@
|
|||
|
||||
(h/test "Switch from crypto to fiat and check limit"
|
||||
(h/setup-subs sub-mocks)
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 1
|
||||
:limit-crypto 1
|
||||
:on-confirm #()}])
|
||||
(render [input-amount/view
|
||||
{:crypto-decimals 1
|
||||
:limit-crypto 1
|
||||
:on-confirm #()}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-9))
|
||||
(h/is-truthy (h/get-by-label-text :container-error))
|
||||
|
|
|
@ -222,11 +222,11 @@
|
|||
:input-value @input-value
|
||||
:fetch-routes #(fetch-routes % current-limit)}]
|
||||
[quo/bottom-actions
|
||||
{:actions :1-action
|
||||
:customization-color color
|
||||
:button-one-label (i18n/label :t/confirm)
|
||||
:button-one-props {:disabled? confirm-disabled?
|
||||
:on-press on-confirm}}]
|
||||
{:actions :one-action
|
||||
:button-one-label (i18n/label :t/confirm)
|
||||
:button-one-props {:disabled? confirm-disabled?
|
||||
:on-press on-confirm
|
||||
:customization-color color}}]
|
||||
[quo/numbered-keyboard
|
||||
{:container-style (style/keyboard-container bottom)
|
||||
:left-action :dot
|
||||
|
|
|
@ -2260,9 +2260,9 @@
|
|||
"sync-devices-complete-title": "Device sync complete!",
|
||||
"sync-devices-complete-sub-title": "Your devices are now in sync",
|
||||
"synced-with": "Synced with",
|
||||
"eligible-to-join-as": "Eligible to join as {{role}}",
|
||||
"you-eligible-to-join": "You’re eligible to join",
|
||||
"you-eligible-to-join-as": "You’re eligible to join as {{role}}",
|
||||
"eligible-to-join-as": "Eligible to join as",
|
||||
"you-not-eligible-to-join": "You’re not eligible to join",
|
||||
"you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
|
||||
"token-gated-communities": "Token gated communities",
|
||||
|
|
Loading…
Reference in New Issue