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}]]
|
:color icon-color}]]
|
||||||
[rn/image
|
[rn/image
|
||||||
{:source icon
|
{:source icon
|
||||||
:style {:width 32 :height 32}}])))
|
:style {:width component-size :height component-size}}])))
|
||||||
|
|
||||||
(def icon-avatar (quo.theme/with-theme icon-avatar-internal))
|
(def icon-avatar (quo.theme/with-theme icon-avatar-internal))
|
||||||
|
|
|
@ -20,4 +20,11 @@
|
||||||
:button-one-label button-one
|
:button-one-label button-one
|
||||||
:button-two-label button-two}])
|
:button-two-label button-two}])
|
||||||
(h/is-truthy (h/get-by-text button-one))
|
(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]
|
[props]
|
||||||
(let [{:keys [actions description button-one-label button-two-label
|
(let [{:keys [actions description button-one-label button-two-label
|
||||||
button-one-press button-two-press theme
|
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)]
|
(merge default-props props)]
|
||||||
[:<>
|
[:<>
|
||||||
[rn/view {:style style/buttons-container}
|
[rn/view {:style style/buttons-container}
|
||||||
|
@ -38,11 +38,13 @@
|
||||||
:type button-two-type
|
:type button-two-type
|
||||||
:on-press button-two-press} button-two-label])
|
:on-press button-two-press} button-two-label])
|
||||||
[button/button
|
[button/button
|
||||||
{:size 40
|
{:size 40
|
||||||
:container-style style/button-container
|
:container-style style/button-container
|
||||||
:type button-one-type
|
:type button-one-type
|
||||||
:background (when scroll? :blur)
|
:disabled? disabled?
|
||||||
:on-press button-one-press} button-one-label]]
|
:background (when scroll? :blur)
|
||||||
|
:on-press button-one-press
|
||||||
|
:accessibility-label :button-one} button-one-label]]
|
||||||
(when description
|
(when description
|
||||||
[text/text
|
[text/text
|
||||||
{:size :paragraph-2
|
{:size :paragraph-2
|
||||||
|
|
|
@ -9,12 +9,13 @@
|
||||||
|
|
||||||
(defn- category-internal
|
(defn- category-internal
|
||||||
[{:keys [label data blur? theme]}]
|
[{:keys [label data blur? theme]}]
|
||||||
[rn/view {:style style/container}
|
[rn/view {:style (style/container label)}
|
||||||
[text/text
|
(when label
|
||||||
{:weight :medium
|
[text/text
|
||||||
:size :paragraph-2
|
{:weight :medium
|
||||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
:size :paragraph-2
|
||||||
label]
|
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
||||||
|
label])
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:data data
|
{:data data
|
||||||
:style (style/settings-items theme blur?)
|
:style (style/settings-items theme blur?)
|
||||||
|
|
|
@ -2,11 +2,12 @@
|
||||||
(:require
|
(:require
|
||||||
[quo.foundations.colors :as colors]))
|
[quo.foundations.colors :as colors]))
|
||||||
|
|
||||||
(def container
|
(defn container
|
||||||
|
[label]
|
||||||
{:left 0
|
{:left 0
|
||||||
:right 0
|
:right 0
|
||||||
:padding-horizontal 20
|
:padding-horizontal 20
|
||||||
:padding-top 12
|
:padding-top (when label 12)
|
||||||
:padding-bottom 8})
|
:padding-bottom 8})
|
||||||
|
|
||||||
(defn settings-items
|
(defn settings-items
|
||||||
|
|
|
@ -97,7 +97,9 @@
|
||||||
{:type :outline
|
{:type :outline
|
||||||
:size 24})
|
:size 24})
|
||||||
(:button-text action-props)]
|
(:button-text action-props)]
|
||||||
:selector [selectors/toggle action-props]
|
:selector (if (= (:type action-props) :checkbox)
|
||||||
|
[selectors/checkbox action-props]
|
||||||
|
[selectors/toggle action-props])
|
||||||
nil)])
|
nil)])
|
||||||
|
|
||||||
(defn- internal-view
|
(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]
|
(:require [quo.core :as quo]
|
||||||
[quo.theme :as quo.theme]
|
[quo.theme :as quo.theme]
|
||||||
[reagent.core :as reagent]
|
[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
|
[status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
|
||||||
create-or-edit-account]
|
create-or-edit-account]
|
||||||
[status-im2.contexts.wallet.edit-account.style :as style]
|
[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
|
(defn- view-internal
|
||||||
[]
|
[]
|
||||||
|
@ -38,7 +40,12 @@
|
||||||
:card? true
|
:card? true
|
||||||
:title (i18n/label :t/address)
|
:title (i18n/label :t/address)
|
||||||
:subtitle account-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}]])))
|
:container-style style/data-item}]])))
|
||||||
|
|
||||||
(def view (quo.theme/with-theme view-internal))
|
(def view (quo.theme/with-theme view-internal))
|
||||||
|
|
|
@ -201,6 +201,10 @@
|
||||||
[element]
|
[element]
|
||||||
(.toBeNull (js/expect element)))
|
(.toBeNull (js/expect element)))
|
||||||
|
|
||||||
|
(defn is-disabled
|
||||||
|
[element]
|
||||||
|
(.toBeDisabled (js/expect element)))
|
||||||
|
|
||||||
(defn is-equal
|
(defn is-equal
|
||||||
[element-1 element-2]
|
[element-1 element-2]
|
||||||
(.toBe (js/expect 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.",
|
"moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.",
|
||||||
"latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
|
"latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
|
||||||
"account-info": "Account info",
|
"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