From 07dd42a7d3a442c8b80c02d3b274f13c5939abaa Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Wed, 25 Oct 2023 14:55:17 +0400 Subject: [PATCH] Wallet: Network Preferences drawer (#17710) * Wallet: Network Preferences drawer --- src/quo/components/avatars/icon_avatar.cljs | 2 +- .../bottom_actions/component_spec.cljs | 9 ++- .../drawers/bottom_actions/view.cljs | 14 +++-- .../settings/category/settings/view.cljs | 13 ++-- .../components/settings/category/style.cljs | 5 +- .../settings/settings_item/view.cljs | 4 +- .../common/network_preferences/style.cljs | 5 ++ .../common/network_preferences/view.cljs | 62 +++++++++++++++++++ .../contexts/wallet/edit_account/view.cljs | 11 +++- src/test_helpers/component.cljs | 4 ++ translations/en.json | 5 +- 11 files changed, 114 insertions(+), 20 deletions(-) create mode 100644 src/status_im2/contexts/wallet/common/network_preferences/style.cljs create mode 100644 src/status_im2/contexts/wallet/common/network_preferences/view.cljs diff --git a/src/quo/components/avatars/icon_avatar.cljs b/src/quo/components/avatars/icon_avatar.cljs index 1473ebeb0f..fe3ac54301 100644 --- a/src/quo/components/avatars/icon_avatar.cljs +++ b/src/quo/components/avatars/icon_avatar.cljs @@ -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)) diff --git a/src/quo/components/drawers/bottom_actions/component_spec.cljs b/src/quo/components/drawers/bottom_actions/component_spec.cljs index cbdd87994f..95dee663ef 100644 --- a/src/quo/components/drawers/bottom_actions/component_spec.cljs +++ b/src/quo/components/drawers/bottom_actions/component_spec.cljs @@ -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)))) diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index ab98de3e72..75c657c326 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -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 diff --git a/src/quo/components/settings/category/settings/view.cljs b/src/quo/components/settings/category/settings/view.cljs index 762ca7ed08..0e736b86a9 100644 --- a/src/quo/components/settings/category/settings/view.cljs +++ b/src/quo/components/settings/category/settings/view.cljs @@ -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?) diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index a6d16d6697..a64be4780a 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -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 diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 2d65079974..0bfd20f3c7 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -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 diff --git a/src/status_im2/contexts/wallet/common/network_preferences/style.cljs b/src/status_im2/contexts/wallet/common/network_preferences/style.cljs new file mode 100644 index 0000000000..fa08ca5cd8 --- /dev/null +++ b/src/status_im2/contexts/wallet/common/network_preferences/style.cljs @@ -0,0 +1,5 @@ +(ns status-im2.contexts.wallet.common.network-preferences.style) + +(def data-item + {:margin-horizontal 20 + :margin-vertical 8}) diff --git a/src/status_im2/contexts/wallet/common/network_preferences/view.cljs b/src/status_im2/contexts/wallet/common/network_preferences/view.cljs new file mode 100644 index 0000000000..8083260516 --- /dev/null +++ b/src/status_im2/contexts/wallet/common/network_preferences/view.cljs @@ -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)) diff --git a/src/status_im2/contexts/wallet/edit_account/view.cljs b/src/status_im2/contexts/wallet/edit_account/view.cljs index 496da1f214..f691cbc305 100644 --- a/src/status_im2/contexts/wallet/edit_account/view.cljs +++ b/src/status_im2/contexts/wallet/edit_account/view.cljs @@ -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)) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index 220ce2b312..8a67df9818 100644 --- a/src/test_helpers/component.cljs +++ b/src/test_helpers/component.cljs @@ -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)) diff --git a/translations/en.json b/translations/en.json index 4e7de49f3d..98d8a15aa4 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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" }