From d5da921e1ce992acd8662e48184dc2d1994d9643 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:08:58 +0800 Subject: [PATCH] Implement Edit Wallet Account Screen (base) (#17637) This commit - Adds the base Screen base for the Create/Edit Account/Address - Adds the Wallet Edit Account screen - Adds the gradient in the account options bottom sheet - Adds a new key/prop "right-icon" in the data-item component to prevent overlapping with the icon used in the description and updates its usage. - Updates the "section-label" component to receive "container-style" (this will prevent adding a wrapping view in the screens) --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- .../drawers/action_drawers/style.cljs | 6 +- .../components/inputs/title_input/view.cljs | 2 + .../settings/data_item/component_spec.cljs | 4 + .../components/settings/data_item/view.cljs | 10 +-- .../settings/section_label/view.cljs | 20 +++-- .../quo_preview/settings/data_item.cljs | 1 + .../contexts/wallet/account/style.cljs | 5 ++ .../contexts/wallet/account/view.cljs | 17 ++-- .../create_or_edit_account/style.cljs | 51 ++++++++++++ .../create_or_edit_account/view.cljs | 79 +++++++++++++++++++ .../contexts/wallet/common/temp.cljs | 2 +- .../contexts/wallet/edit_account/style.cljs | 5 ++ .../contexts/wallet/edit_account/view.cljs | 44 +++++++++++ src/status_im2/navigation/screens.cljs | 4 + translations/en.json | 4 +- 15 files changed, 228 insertions(+), 26 deletions(-) create mode 100644 src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs create mode 100644 src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs create mode 100644 src/status_im2/contexts/wallet/edit_account/style.cljs create mode 100644 src/status_im2/contexts/wallet/edit_account/view.cljs diff --git a/src/quo/components/drawers/action_drawers/style.cljs b/src/quo/components/drawers/action_drawers/style.cljs index 7e0c5e5439..c9ab001856 100644 --- a/src/quo/components/drawers/action_drawers/style.cljs +++ b/src/quo/components/drawers/action_drawers/style.cljs @@ -14,20 +14,20 @@ (defn container [sub-label disabled?] {:border-radius 12 - :height (if sub-label 58 50) + :height (if sub-label 56 48) :opacity (when disabled? 0.3) :margin-horizontal 8}) (defn row-container [sub-label] - {:height (if sub-label 58 50) + {:height (if sub-label 56 48) :margin-horizontal 12 :flex-direction :row}) (defn left-icon [sub-label?] {:height 20 - :margin-top (if sub-label? 10 :auto) + :margin-top (if sub-label? 8 :auto) :margin-bottom (when-not sub-label? :auto) :margin-right 12 :width 20}) diff --git a/src/quo/components/inputs/title_input/view.cljs b/src/quo/components/inputs/title_input/view.cljs index e490694bdf..0c76307892 100644 --- a/src/quo/components/inputs/title_input/view.cljs +++ b/src/quo/components/inputs/title_input/view.cljs @@ -20,6 +20,7 @@ placeholder max-length default-value + return-key-type size theme container-style] @@ -46,6 +47,7 @@ :default-value default-value :accessibility-label :profile-title-input :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :return-key-type return-key-type :on-focus #(swap! focused? (constantly true)) :on-blur #(swap! focused? (constantly false)) :auto-focus auto-focus diff --git a/src/quo/components/settings/data_item/component_spec.cljs b/src/quo/components/settings/data_item/component_spec.cljs index 98f6d89f36..987237a800 100644 --- a/src/quo/components/settings/data_item/component_spec.cljs +++ b/src/quo/components/settings/data_item/component_spec.cljs @@ -116,6 +116,7 @@ :blur? false :description :account :icon-right? true + :right-icon :i/chevron-right :card? true :label :none :status :default @@ -133,6 +134,7 @@ :blur? false :description :icon :icon-right? true + :right-icon :i/chevron-right :card? true :label :preview :status :default @@ -150,6 +152,7 @@ :blur? false :description :network :icon-right? true + :right-icon :i/chevron-right :card? true :label :preview :status :default @@ -167,6 +170,7 @@ :blur? false :description :account :icon-right? true + :right-icon :i/chevron-right :card? true :label :preview :status :default diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index b549d29ab9..982697dc4f 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -88,7 +88,7 @@ :emoji emoji}]))]) (defn- right-side - [{:keys [label icon-right? icon icon-color communities-list]}] + [{:keys [label icon-right? right-icon icon-color communities-list]}] [rn/view {:style style/right-container} (case label :preview [preview-list/view @@ -101,13 +101,13 @@ nil) (when icon-right? [rn/view {:style (style/right-icon label)} - [icons/icon icon + [icons/icon right-icon {:accessibility-label :icon-right :color icon-color :size 20}]])]) (def view-internal - (fn [{:keys [blur? card? icon-right? icon label status size theme on-press communities-list + (fn [{:keys [blur? card? icon-right? right-icon label status size theme on-press communities-list container-style] :as props}] (let [icon-color (if (or blur? (= :dark theme)) @@ -119,13 +119,13 @@ {:accessibility-label :data-item :disabled (not icon-right?) :on-press on-press - :style (merge (style/container size card? blur? theme) container-style)} + :style (merge container-style (style/container size card? blur? theme))} [left-side props] (when (and (= :default status) (not= :small size)) [right-side {:label label :icon-right? icon-right? - :icon icon + :right-icon right-icon :icon-color icon-color :communities-list communities-list}])])))) diff --git a/src/quo/components/settings/section_label/view.cljs b/src/quo/components/settings/section_label/view.cljs index b4d69f9df2..e664e49f76 100644 --- a/src/quo/components/settings/section_label/view.cljs +++ b/src/quo/components/settings/section_label/view.cljs @@ -2,7 +2,8 @@ (:require [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] - [quo.theme :as quo.theme])) + [quo.theme :as quo.theme] + [react-native.core :as rn])) (defn- get-text-color [theme blur?] @@ -13,9 +14,11 @@ theme))) (defn label-style - [color] - {:color color - :margin-bottom 2}) + [color description?] + (cond-> {:color color} + + description? + (assoc :margin-bottom 2))) (defn- view-internal "Props: @@ -23,15 +26,16 @@ - description (optional) - description of the section - blur? (optional) - use blurred styling - theme - light or dark" - [{:keys [section description blur? theme]}] + [{:keys [section description blur? theme container-style]}] (let [color (get-text-color theme (or blur? false)) - description? (not (nil? description))] - [:<> + description? (not (nil? description)) + root-view (if (seq container-style) rn/view :<>)] + [root-view {:style container-style} [text/text {:number-of-lines 1 :size (if description? :paragraph-1 :paragraph-2) :weight :medium - :style (label-style color)} + :style (label-style color description?)} section] (when description? [text/text diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index 696b3517a9..0f51b5e15b 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs @@ -47,6 +47,7 @@ :title "Label" :subtitle "Description" :icon :i/placeholder + :right-icon :i/chevron-right :emoji "🎮" :customization-color :yellow :communities-list communities-list})] diff --git a/src/status_im2/contexts/wallet/account/style.cljs b/src/status_im2/contexts/wallet/account/style.cljs index bf878cbcd7..d7e4993f4c 100644 --- a/src/status_im2/contexts/wallet/account/style.cljs +++ b/src/status_im2/contexts/wallet/account/style.cljs @@ -3,3 +3,8 @@ (def tabs {:padding-left 20 :padding-vertical 12}) + +(def drawer-section-label + {:padding-horizontal 20 + :padding-top 12 + :padding-bottom 8}) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 6d7ced1046..0bbda4ea4c 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -18,7 +18,8 @@ [quo/action-drawer [[{:icon :i/edit :accessibility-label :edit - :label (i18n/label :t/edit-account)} + :label (i18n/label :t/edit-account) + :on-press #(rf/dispatch [:navigate-to :wallet-edit-account])} {:icon :i/copy :accessibility-label :copy-address :label (i18n/label :t/copy-address)} @@ -29,12 +30,10 @@ :accessibility-label :remove-account :label (i18n/label :t/remove-account) :danger? true}]]] - [quo/divider-line] - [rn/view - {:style {:padding-horizontal 20 - :padding-top 12 - :padding-bottom 8}} - [quo/section-label {:section (i18n/label :t/select-another-account)}]] + [quo/divider-line {:container-style {:margin-top 8}}] + [quo/section-label + {:section (i18n/label :t/select-another-account) + :container-style style/drawer-section-label}] [rn/flat-list {:data temp/other-accounts :render-fn (fn [account] [quo/account-item {:account-props account}]) @@ -81,7 +80,9 @@ :right-side :account-switcher :account-switcher {:customization-color :purple :on-press #(rf/dispatch [:show-bottom-sheet - {:content account-options}]) + {:content account-options + :gradient-cover? true + :customization-color :purple}]) :emoji "🍑"}}] [quo/account-overview temp/account-overview-state] [quo/wallet-graph {:time-frame :empty}] diff --git a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs new file mode 100644 index 0000000000..f39cceea3e --- /dev/null +++ b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs @@ -0,0 +1,51 @@ +(ns status-im2.contexts.wallet.common.screen-base.create-or-edit-account.style) + +(defn root-container + [top] + {:flex 1 + :margin-top top}) + +(defn gradient-cover-container + [top] + {:position :absolute + :top (- top) + :left 0 + :right 0 + :z-index -1}) + +(def account-avatar-container + {:padding-horizontal 20 + :padding-top 12}) + +(def reaction-button-container + {:position :absolute + :bottom 0 + :left 76}) + +(def title-input-container + {:padding-horizontal 20 + :padding-top 12 + :padding-bottom 16}) + +(def divider-1 + {:margin-bottom 12}) + +(def section-container + {:padding-horizontal 20 + :padding-bottom 4}) + +(def color-picker-container + {:padding-vertical 8}) + +(def color-picker + {:padding-horizontal 12}) + +(def divider-2 + {:margin-top 4 + :margin-bottom 12}) + +(defn bottom-action + [bottom] + {:padding-horizontal 20 + :padding-vertical 12 + :margin-bottom bottom}) diff --git a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs new file mode 100644 index 0000000000..03e98b5a08 --- /dev/null +++ b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs @@ -0,0 +1,79 @@ +(ns status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view + (:require [quo.core :as quo] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn- view-internal + [{:keys [margin-top? page-nav-right-side account-name account-color account-emoji on-change-name + on-change-color + on-change-emoji section-label bottom-action? bottom-action-label bottom-action-props + custom-bottom-action]} & children] + (let [{:keys [top bottom]} (safe-area/get-insets) + margin-top (if (false? margin-top?) 0 top)] + [rn/keyboard-avoiding-view + {:style (style/root-container margin-top) + :keyboard-vertical-offset (- bottom)} + [quo/page-nav + {:type :no-title + :background :blur + :right-side page-nav-right-side + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}] + [quo/gradient-cover + {:customization-color account-color + :container-style (style/gradient-cover-container margin-top)}] + (into + [rn/scroll-view {:bounces false} + [rn/view {:style style/account-avatar-container} + [quo/account-avatar + {:customization-color account-color + :size 80 + :emoji account-emoji + :type :default}] + [quo/button + {:size 32 + :type :grey + :background :photo + :icon-only? true + :on-press #(rf/dispatch [:emoji-picker/open {:on-select on-change-emoji}]) + :container-style style/reaction-button-container} + :i/reaction]] + [quo/title-input + {:placeholder (i18n/label :t/account-name-input-placeholder) + :max-length 24 + :blur? true + :default-value account-name + :on-change-text on-change-name + :container-style style/title-input-container + :return-key-type :done}] + [quo/divider-line {:container-style style/divider-1}] + [quo/section-label + {:section (i18n/label :t/colour) + :container-style style/section-container}] + [rn/view {:style style/color-picker-container} + [quo/color-picker + {:default-selected account-color + :on-change on-change-color + :container-style style/color-picker}]] + [quo/divider-line {:container-style style/divider-2}] + (when section-label + [quo/section-label + {:section (i18n/label section-label) + :container-style style/section-container}])] + children) + (when bottom-action? + [rn/view {:style (style/bottom-action bottom)} + (if custom-bottom-action + custom-bottom-action + [quo/button + (merge + {:size 40 + :type :primary} + bottom-action-props) + (i18n/label bottom-action-label)])])])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index c4d2a04480..097ac0b330 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -148,7 +148,7 @@ (def data-item-state {:description :default :icon-right? true - :icon :i/options + :right-icon :i/options :card? true :label :none :status :default diff --git a/src/status_im2/contexts/wallet/edit_account/style.cljs b/src/status_im2/contexts/wallet/edit_account/style.cljs new file mode 100644 index 0000000000..b9de37aded --- /dev/null +++ b/src/status_im2/contexts/wallet/edit_account/style.cljs @@ -0,0 +1,5 @@ +(ns status-im2.contexts.wallet.edit-account.style) + +(def data-item + {:margin-horizontal 20 + :margin-vertical 8}) diff --git a/src/status_im2/contexts/wallet/edit_account/view.cljs b/src/status_im2/contexts/wallet/edit_account/view.cljs new file mode 100644 index 0000000000..496da1f214 --- /dev/null +++ b/src/status_im2/contexts/wallet/edit_account/view.cljs @@ -0,0 +1,44 @@ +(ns status-im2.contexts.wallet.edit-account.view + (:require [quo.core :as quo] + [quo.theme :as quo.theme] + [reagent.core :as reagent] + [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])) + +(defn- view-internal + [] + (let [account-name (reagent/atom "Account 1") + account-color (reagent/atom :purple) + account-emoji (reagent/atom "🍑") + account-address "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" + on-change-name #(reset! account-name %) + on-change-color #(reset! account-color %) + on-change-emoji #(reset! account-emoji %)] + (fn [] + [create-or-edit-account/view + {:page-nav-right-side [{:icon-name :i/delete + :on-press #(js/alert "Delete account: to be implemented")}] + :account-name @account-name + :account-emoji @account-emoji + :account-color @account-color + :on-change-name on-change-name + :on-change-color on-change-color + :on-change-emoji on-change-emoji + :section-label :t/account-info} + [quo/data-item + {:status :default + :size :default + :description :default + :label :none + :blur? false + :icon-right? true + :right-icon :i/advanced + :card? true + :title (i18n/label :t/address) + :subtitle account-address + :on-press #(js/alert "Network selector: to be implemented") + :container-style style/data-item}]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index ce226b9f19..e808835ca0 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -40,6 +40,7 @@ [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.collectible.view :as wallet-collectible] [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.saved-addresses.view :as wallet-saved-addresses] [status-im2.contexts.wallet.scan-account.view :as scan-address] @@ -243,6 +244,9 @@ {:name :wallet-accounts :component wallet-accounts/view} + {:name :wallet-edit-account + :component wallet-edit-account/view} + {:name :wallet-address-watch :component wallet-address-watch/view} diff --git a/translations/en.json b/translations/en.json index e3bcbed843..4e7de49f3d 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2354,5 +2354,7 @@ "buy-tokens": "Buy Tokens", "ramp-description": "Global crypto to fiat flow.", "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-name-input-placeholder": "Account name" }