Wallet: Network Preferences drawer (#17710)
* Wallet: Network Preferences drawer
This commit is contained in:
parent
3197adf855
commit
07dd42a7d3
|
@ -37,6 +37,6 @@
|
|||
:color icon-color}]]
|
||||
[rn/image
|
||||
{:source icon
|
||||
:style {:width 32 :height 32}}])))
|
||||
:style {:width component-size :height component-size}}])))
|
||||
|
||||
(def icon-avatar (quo.theme/with-theme icon-avatar-internal))
|
||||
|
|
|
@ -20,4 +20,11 @@
|
|||
:button-one-label button-one
|
||||
:button-two-label button-two}])
|
||||
(h/is-truthy (h/get-by-text button-one))
|
||||
(h/is-truthy (h/get-by-text button-two)))))
|
||||
(h/is-truthy (h/get-by-text button-two))))
|
||||
|
||||
(h/test "render disabled button"
|
||||
(h/render [bottom-actions/view
|
||||
{:description "Sample description"
|
||||
:disabled? true
|
||||
:button-one-label "button"}])
|
||||
(h/is-disabled (h/get-by-label-text :button-one))))
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
[props]
|
||||
(let [{:keys [actions description button-one-label button-two-label
|
||||
button-one-press button-two-press theme
|
||||
scroll? button-one-type button-two-type]}
|
||||
scroll? button-one-type button-two-type disabled?]}
|
||||
(merge default-props props)]
|
||||
[:<>
|
||||
[rn/view {:style style/buttons-container}
|
||||
|
@ -38,11 +38,13 @@
|
|||
:type button-two-type
|
||||
:on-press button-two-press} button-two-label])
|
||||
[button/button
|
||||
{:size 40
|
||||
:container-style style/button-container
|
||||
:type button-one-type
|
||||
:background (when scroll? :blur)
|
||||
:on-press button-one-press} button-one-label]]
|
||||
{:size 40
|
||||
:container-style style/button-container
|
||||
:type button-one-type
|
||||
:disabled? disabled?
|
||||
:background (when scroll? :blur)
|
||||
:on-press button-one-press
|
||||
:accessibility-label :button-one} button-one-label]]
|
||||
(when description
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
|
|
|
@ -9,12 +9,13 @@
|
|||
|
||||
(defn- category-internal
|
||||
[{:keys [label data blur? theme]}]
|
||||
[rn/view {:style style/container}
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
||||
label]
|
||||
[rn/view {:style (style/container label)}
|
||||
(when label
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
||||
label])
|
||||
[rn/flat-list
|
||||
{:data data
|
||||
:style (style/settings-items theme blur?)
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
(:require
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(def container
|
||||
(defn container
|
||||
[label]
|
||||
{:left 0
|
||||
:right 0
|
||||
:padding-horizontal 20
|
||||
:padding-top 12
|
||||
:padding-top (when label 12)
|
||||
:padding-bottom 8})
|
||||
|
||||
(defn settings-items
|
||||
|
|
|
@ -97,7 +97,9 @@
|
|||
{:type :outline
|
||||
:size 24})
|
||||
(:button-text action-props)]
|
||||
:selector [selectors/toggle action-props]
|
||||
:selector (if (= (:type action-props) :checkbox)
|
||||
[selectors/checkbox action-props]
|
||||
[selectors/toggle action-props])
|
||||
nil)])
|
||||
|
||||
(defn- internal-view
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
(ns status-im2.contexts.wallet.common.network-preferences.style)
|
||||
|
||||
(def data-item
|
||||
{:margin-horizontal 20
|
||||
:margin-vertical 8})
|
|
@ -0,0 +1,62 @@
|
|||
(ns status-im2.contexts.wallet.common.network-preferences.view
|
||||
(:require [quo.core :as quo]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.foundations.resources :as resources]
|
||||
[quo.theme :as quo.theme]
|
||||
[status-im2.contexts.wallet.common.network-preferences.style :as style]
|
||||
[utils.i18n :as i18n]))
|
||||
|
||||
(def mainnet
|
||||
[{:title "Mainnet"
|
||||
:image :icon-avatar
|
||||
:image-props {:icon (resources/get-network :ethereum)
|
||||
:size :size-20}
|
||||
:action :selector
|
||||
:action-props {:type :checkbox}}])
|
||||
|
||||
(def networks-list
|
||||
[{:title "Optimism"
|
||||
:image :icon-avatar
|
||||
:image-props {:icon (resources/get-network :optimism)
|
||||
:size :size-20}
|
||||
:action :selector
|
||||
:action-props {:type :checkbox}}
|
||||
{:title "Arbitrum"
|
||||
:image :icon-avatar
|
||||
:image-props {:icon (resources/get-network :arbitrum)
|
||||
:size :size-20}
|
||||
:action :selector
|
||||
:action-props {:type :checkbox}}])
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [address on-save theme]}]
|
||||
[:<>
|
||||
[quo/drawer-top
|
||||
{:title (i18n/label :t/network-preferences)
|
||||
:description (i18n/label :t/network-preferences-desc)}]
|
||||
[quo/data-item
|
||||
{:status :default
|
||||
:size :default
|
||||
:description :default
|
||||
:label :none
|
||||
:blur? false
|
||||
:card? true
|
||||
:title (i18n/label :t/address)
|
||||
:subtitle address
|
||||
:container-style (merge style/data-item
|
||||
{:background-color (colors/theme-colors colors/neutral-2_5
|
||||
colors/neutral-90
|
||||
theme)})}]
|
||||
[quo/category
|
||||
{:list-type :settings
|
||||
:data mainnet}]
|
||||
[quo/category
|
||||
{:list-type :settings
|
||||
:label (i18n/label :t/layer-2)
|
||||
:data networks-list}]
|
||||
[quo/bottom-actions
|
||||
{:button-one-label (i18n/label :t/update)
|
||||
:disabled? true
|
||||
:button-one-press on-save}]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
|
@ -2,10 +2,12 @@
|
|||
(:require [quo.core :as quo]
|
||||
[quo.theme :as quo.theme]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.wallet.common.network-preferences.view :as network-preferences]
|
||||
[status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
|
||||
create-or-edit-account]
|
||||
[status-im2.contexts.wallet.edit-account.style :as style]
|
||||
[utils.i18n :as i18n]))
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn- view-internal
|
||||
[]
|
||||
|
@ -38,7 +40,12 @@
|
|||
:card? true
|
||||
:title (i18n/label :t/address)
|
||||
:subtitle account-address
|
||||
:on-press #(js/alert "Network selector: to be implemented")
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:show-bottom-sheet
|
||||
{:content (fn [] [network-preferences/view
|
||||
{:address account-address
|
||||
:on-save #(js/alert
|
||||
"calling on save")}])}]))
|
||||
:container-style style/data-item}]])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
@ -201,6 +201,10 @@
|
|||
[element]
|
||||
(.toBeNull (js/expect element)))
|
||||
|
||||
(defn is-disabled
|
||||
[element]
|
||||
(.toBeDisabled (js/expect element)))
|
||||
|
||||
(defn is-equal
|
||||
[element-1 element-2]
|
||||
(.toBe (js/expect element-1) element-2))
|
||||
|
|
|
@ -2356,5 +2356,8 @@
|
|||
"moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.",
|
||||
"latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
|
||||
"account-info": "Account info",
|
||||
"account-name-input-placeholder": "Account name"
|
||||
"account-name-input-placeholder": "Account name",
|
||||
"network-preferences": "Network preferences",
|
||||
"network-preferences-desc": "Select which network this address is happy to receive funds on",
|
||||
"layer-2": "Layer 2"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue