From fa9b53854b6cd21784ee677a2cdd4f0aa11b11ce Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:24:17 -0600 Subject: [PATCH] [#18463] Wallet - Page top refactor (#18755) * Use page-top in bridge screen * Use page-top in bridge-to screen * Use page-top in add-address-to-watch screen * Use page-top in backup-recovery-phrase screen * Use page-top in check-your-backup screen * Add support for title right options to page-top * Use page-top in check-your-backup screen * Use page-top in send-to screen * Use page-top in select-asset screen * Use page-top in :wallet-share-address screen * Deprecate text-combinations --- .../text_combinations/page_top/style.cljs | 3 +- .../text_combinations/page_top/view.cljs | 29 ++++++----- .../standard_title/style.cljs | 3 +- .../standard_title/view.cljs | 7 ++- src/quo/core.cljs | 4 +- .../contexts/wallet/account/bridge/style.cljs | 4 -- .../contexts/wallet/account/bridge/view.cljs | 4 +- .../wallet/account/bridge_to/style.cljs | 4 -- .../wallet/account/bridge_to/view.cljs | 10 ++-- .../wallet/add_address_to_watch/style.cljs | 5 +- .../wallet/add_address_to_watch/view.cljs | 9 ++-- .../backup_recovery_phrase/style.cljs | 4 -- .../backup_recovery_phrase/view.cljs | 11 +++-- .../new_keypair/check_your_backup/view.cljs | 8 ++-- .../create_account/select_keypair/style.cljs | 4 +- .../create_account/select_keypair/view.cljs | 48 +++++++++---------- .../wallet/send/select_address/style.cljs | 4 -- .../wallet/send/select_address/view.cljs | 3 +- .../wallet/send/select_asset/view.cljs | 3 +- .../contexts/wallet/share_address/style.cljs | 4 +- .../contexts/wallet/share_address/view.cljs | 33 +++++++------ 21 files changed, 93 insertions(+), 111 deletions(-) diff --git a/src/quo/components/text_combinations/page_top/style.cljs b/src/quo/components/text_combinations/page_top/style.cljs index 1c2134cb19..77c288c478 100644 --- a/src/quo/components/text_combinations/page_top/style.cljs +++ b/src/quo/components/text_combinations/page_top/style.cljs @@ -12,7 +12,8 @@ :height 32}) (def header-title - {:flex-direction :row + {:flex 1 + :flex-direction :row :column-gap 8}) (def header-counter diff --git a/src/quo/components/text_combinations/page_top/view.cljs b/src/quo/components/text_combinations/page_top/view.cljs index 43195b6ecc..c4d0fdaddb 100644 --- a/src/quo/components/text_combinations/page_top/view.cljs +++ b/src/quo/components/text_combinations/page_top/view.cljs @@ -8,6 +8,7 @@ [quo.components.markdown.text :as text] [quo.components.tags.context-tag.view :as context-tag] [quo.components.text-combinations.page-top.style :as style] + [quo.components.text-combinations.standard-title.view :as standard-title] [quo.theme] [react-native.core :as rn] [react-native.fast-image :as fast-image] @@ -32,18 +33,20 @@ (format-counter counter-bottom))]]) (defn- header - [{:keys [title input counter-top counter-bottom] + [{:keys [title title-accessibility-label input counter-top counter-bottom + title-right title-right-props] avatar-props :avatar}] - [rn/view {:style style/header} - [rn/view {:style style/header-title} - (when avatar-props - [channel-avatar/view (assoc avatar-props :size :size-32)]) - [text/text - {:weight :semi-bold - :size :heading-1} - title]] - (when (= input :recovery-phrase) - [header-counter counter-top counter-bottom])]) + (let [title-props (assoc title-right-props + :title title + :right title-right + :accessibility-label title-accessibility-label)] + [rn/view {:style style/header} + [rn/view {:style style/header-title} + (when avatar-props + [channel-avatar/view (assoc avatar-props :size :size-32)]) + [standard-title/view title-props]] + (when (= input :recovery-phrase) + [header-counter counter-top counter-bottom])])) (defn- summary-description [{:keys [row-1 row-2] :as _summary-props} blur?] @@ -112,10 +115,10 @@ emojis)) (defn- view-internal - [{:keys [theme description input blur? input-props] + [{:keys [theme description input blur? input-props container-style] emojis :emoji-dash :as props}] - [rn/view + [rn/view {:style container-style} [rn/view {:style style/top-container} [header props] (when description diff --git a/src/quo/components/text_combinations/standard_title/style.cljs b/src/quo/components/text_combinations/standard_title/style.cljs index 18672e5af7..6b01a2b668 100644 --- a/src/quo/components/text_combinations/standard_title/style.cljs +++ b/src/quo/components/text_combinations/standard_title/style.cljs @@ -2,7 +2,8 @@ (:require [quo.foundations.colors :as colors])) (def container - {:flex-direction :row + {:flex 1 + :flex-direction :row :justify-content :space-between}) (def right-container {:margin-left 20}) diff --git a/src/quo/components/text_combinations/standard_title/view.cljs b/src/quo/components/text_combinations/standard_title/view.cljs index 9633f9fc97..65312a8120 100644 --- a/src/quo/components/text_combinations/standard_title/view.cljs +++ b/src/quo/components/text_combinations/standard_title/view.cljs @@ -53,9 +53,12 @@ :icon-color (style/right-tag-icon-color blur? theme)}])) (defn- view-internal - [{:keys [title right] :as props}] + [{:keys [title right accessibility-label] :as props}] [rn/view {:style style/container} - [text/text {:size :heading-1 :weight :semi-bold} + [text/text + {:size :heading-1 + :weight :semi-bold + :accessibility-label accessibility-label} title] (when right [rn/view {:style style/right-container} diff --git a/src/quo/core.cljs b/src/quo/core.cljs index ede15507d2..de7a05d452 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -405,7 +405,9 @@ (def channel-name quo.components.text-combinations.channel-name.view/view) (def page-top quo.components.text-combinations.page-top.view/view) (def standard-title quo.components.text-combinations.standard-title.view/view) -(def text-combinations quo.components.text-combinations.view/view) +(def ^{:deprecated "quo.components.text-combinations.page-top.view should be used instead"} + text-combinations + quo.components.text-combinations.view/view) (def username quo.components.text-combinations.username.view/view) ;;;; Utilities - Outside of design system diff --git a/src/status_im/contexts/wallet/account/bridge/style.cljs b/src/status_im/contexts/wallet/account/bridge/style.cljs index a436a57baa..10a81375ed 100644 --- a/src/status_im/contexts/wallet/account/bridge/style.cljs +++ b/src/status_im/contexts/wallet/account/bridge/style.cljs @@ -1,9 +1,5 @@ (ns status-im.contexts.wallet.account.bridge.style) -(def header-container - {:padding-horizontal 20 - :padding-vertical 12}) - (def input-container {:padding-horizontal 20 :padding-vertical 8}) diff --git a/src/status_im/contexts/wallet/account/bridge/view.cljs b/src/status_im/contexts/wallet/account/bridge/view.cljs index 59db1c64cc..8749705dbf 100644 --- a/src/status_im/contexts/wallet/account/bridge/view.cljs +++ b/src/status_im/contexts/wallet/account/bridge/view.cljs @@ -17,9 +17,7 @@ [account-switcher/view {:on-press #(rf/dispatch [:navigate-back]) :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/bridge)}] + [quo/page-top {:title (i18n/label :t/bridge)}] [quo/input {:container-style style/input-container :icon-name :i/search diff --git a/src/status_im/contexts/wallet/account/bridge_to/style.cljs b/src/status_im/contexts/wallet/account/bridge_to/style.cljs index 23a50e7d64..3ae18b2c99 100644 --- a/src/status_im/contexts/wallet/account/bridge_to/style.cljs +++ b/src/status_im/contexts/wallet/account/bridge_to/style.cljs @@ -1,9 +1,5 @@ (ns status-im.contexts.wallet.account.bridge-to.style) -(def header-container - {:padding-horizontal 20 - :padding-vertical 12}) - (def content-container {:padding-horizontal 8}) diff --git a/src/status_im/contexts/wallet/account/bridge_to/view.cljs b/src/status_im/contexts/wallet/account/bridge_to/view.cljs index bd3a5325b8..af89424e46 100644 --- a/src/status_im/contexts/wallet/account/bridge_to/view.cljs +++ b/src/status_im/contexts/wallet/account/bridge_to/view.cljs @@ -43,17 +43,15 @@ tokens (:tokens account) mainnet (first network-details) layer-2-networks (rest network-details) - account-token (some #(when (= token-symbol (:symbol %)) %) tokens)] - - + account-token (some #(when (= token-symbol (:symbol %)) %) tokens) + bridge-to-title (i18n/label :t/bridge-to + {:name (string/upper-case (str (:name token)))})] [rn/view [account-switcher/view {:on-press #(rf/dispatch [:navigate-back-within-stack :wallet-bridge-to]) :icon-name :i/arrow-left :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/bridge-to {:name (string/upper-case (str (:name token)))})}] + [quo/page-top {:title bridge-to-title}] [rn/view style/content-container [bridge-token-component (assoc mainnet :network-name :t/mainnet) account-token]] diff --git a/src/status_im/contexts/wallet/add_address_to_watch/style.cljs b/src/status_im/contexts/wallet/add_address_to_watch/style.cljs index b08c4128da..4b8e3a6f00 100644 --- a/src/status_im/contexts/wallet/add_address_to_watch/style.cljs +++ b/src/status_im/contexts/wallet/add_address_to_watch/style.cljs @@ -1,9 +1,6 @@ (ns status-im.contexts.wallet.add-address-to-watch.style) -(def header-container - {:margin-horizontal 20 - :margin-top 12 - :margin-bottom 20}) +(def header-container {:padding-bottom 8}) (def scan {:margin-top 26}) diff --git a/src/status_im/contexts/wallet/add_address_to_watch/view.cljs b/src/status_im/contexts/wallet/add_address_to_watch/view.cljs index 4c455831f4..65dd9a8972 100644 --- a/src/status_im/contexts/wallet/add_address_to_watch/view.cljs +++ b/src/status_im/contexts/wallet/add_address_to_watch/view.cljs @@ -133,10 +133,11 @@ (clear-input)) :container-style {:z-index 2}} (i18n/label :t/continue)]} - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/add-address) - :description (i18n/label :t/enter-eth)}] + [quo/page-top + {:container-style style/header-container + :title (i18n/label :t/add-address) + :description :text + :description-text (i18n/label :t/enter-eth)}] [:f> address-input {:input-value input-value :validate validate diff --git a/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/style.cljs b/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/style.cljs index 70cc607bd9..56c00b8821 100644 --- a/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/style.cljs +++ b/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/style.cljs @@ -4,10 +4,6 @@ [quo.theme :as quo.theme] [react-native.platform :as platform])) -(def header-container - {:margin-horizontal 20 - :margin-vertical 12}) - (defn seed-phrase-container [theme] {:margin-horizontal 20 diff --git a/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs b/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs index ddb329ba32..5cd2f40977 100644 --- a/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs +++ b/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs @@ -51,10 +51,10 @@ {:icon-name :i/close :on-press #(rf/dispatch [:navigate-back]) :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/backup-recovery-phrase) - :description (i18n/label :t/backup-recovery-phrase-description)}] + [quo/page-top + {:title (i18n/label :t/backup-recovery-phrase) + :description :text + :description-text (i18n/label :t/backup-recovery-phrase-description)}] [rn/view {:style (style/seed-phrase-container theme)} [words-column temp/secret-phrase true] [rn/view {:style (style/separator theme)}] @@ -68,7 +68,8 @@ :padding-top 20}} [quo/text {:weight :semi-bold - :style {:margin-bottom 8}} (i18n/label :t/how-to-backup)] + :style {:margin-bottom 8}} + (i18n/label :t/how-to-backup)] [rn/flat-list {:data step-labels :render-fn step-item diff --git a/src/status_im/contexts/wallet/create_account/new_keypair/check_your_backup/view.cljs b/src/status_im/contexts/wallet/create_account/new_keypair/check_your_backup/view.cljs index b20ee05cef..3b15a902d8 100644 --- a/src/status_im/contexts/wallet/create_account/new_keypair/check_your_backup/view.cljs +++ b/src/status_im/contexts/wallet/create_account/new_keypair/check_your_backup/view.cljs @@ -87,10 +87,10 @@ {:icon-name :i/arrow-left :on-press #(rf/dispatch [:navigate-back]) :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/check-your-backup) - :description (i18n/label :t/confirm-the-position)}] + [quo/page-top + {:title (i18n/label :t/check-your-backup) + :description :text + :description-text (i18n/label :t/confirm-the-position)}] [rn/flat-list {:data random-indices :render-fn (fn [num index] diff --git a/src/status_im/contexts/wallet/create_account/select_keypair/style.cljs b/src/status_im/contexts/wallet/create_account/select_keypair/style.cljs index 9057d08f09..61fa431ebd 100644 --- a/src/status_im/contexts/wallet/create_account/select_keypair/style.cljs +++ b/src/status_im/contexts/wallet/create_account/select_keypair/style.cljs @@ -1,9 +1,7 @@ (ns status-im.contexts.wallet.create-account.select-keypair.style) (def header-container - {:margin-horizontal 20 - :margin-top 12 - :margin-bottom 20}) + {:margin-bottom 8}) (def bottom-action-container {:position :absolute diff --git a/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs b/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs index 1a283e2532..6b19284866 100644 --- a/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs +++ b/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs @@ -42,8 +42,7 @@ [] (let [{:keys [public-key compressed-key customization-color]} (rf/sub [:profile/profile]) - display-name (first (rf/sub [:contacts/contact-two-names-by-identity - public-key])) + [display-name _] (rf/sub [:contacts/contact-two-names-by-identity public-key]) profile-with-image (rf/sub [:profile/profile-with-image]) profile-picture (profile.utils/photo profile-with-image)] [rn/view {:style {:flex 1}} @@ -51,29 +50,30 @@ {:icon-name :i/close :on-press #(rf/dispatch [:navigate-back]) :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/keypairs) - :description (i18n/label :t/keypairs-description) - :button-icon :i/add - :button-on-press #(rf/dispatch [:show-bottom-sheet - {:content keypair-options}]) - :customization-color customization-color}] + [quo/page-top + {:container-style style/header-container + :title (i18n/label :t/keypairs) + :title-right :action + :title-right-props {:icon :i/add + :customization-color customization-color + :on-press #(rf/dispatch + [:show-bottom-sheet {:content keypair-options}])} + :description :text + :description-text (i18n/label :t/keypairs-description)}] [quo/keypair - (merge - {:customization-color customization-color - :profile-picture profile-picture - :status-indicator false - :type :default-keypair - :stored :on-device - :on-options-press #(js/alert "Options pressed") - :action :selector - :blur? false - :details {:full-name display-name - :address (utils/get-shortened-compressed-key compressed-key)} - :accounts accounts - :container-style {:margin-horizontal 20 - :margin-vertical 8}})] + {:customization-color customization-color + :profile-picture profile-picture + :status-indicator false + :type :default-keypair + :stored :on-device + :on-options-press #(js/alert "Options pressed") + :action :selector + :blur? false + :details {:full-name display-name + :address (utils/get-shortened-compressed-key compressed-key)} + :accounts accounts + :container-style {:margin-horizontal 20 + :margin-vertical 8}}] [quo/bottom-actions {:actions :one-action :button-one-label (i18n/label :t/confirm-account-origin) diff --git a/src/status_im/contexts/wallet/send/select_address/style.cljs b/src/status_im/contexts/wallet/send/select_address/style.cljs index f462bcc9ea..037f9cbd98 100644 --- a/src/status_im/contexts/wallet/send/select_address/style.cljs +++ b/src/status_im/contexts/wallet/send/select_address/style.cljs @@ -3,10 +3,6 @@ (def container {:flex 1}) -(def title-container - {:margin-horizontal 20 - :margin-vertical 12}) - (def tabs {:padding-top 20 :padding-bottom 12}) diff --git a/src/status_im/contexts/wallet/send/select_address/view.cljs b/src/status_im/contexts/wallet/send/select_address/view.cljs index 4d19c38a8e..e376a37d10 100644 --- a/src/status_im/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im/contexts/wallet/send/select_address/view.cljs @@ -160,9 +160,8 @@ :wallet-select-address}]) :customization-color color} (i18n/label :t/continue)])} - [quo/text-combinations + [quo/page-top {:title (i18n/label :t/send-to) - :container-style style/title-container :title-accessibility-label :title-label}] [address-input input-value input-focused?] [quo/divider-line] diff --git a/src/status_im/contexts/wallet/send/select_asset/view.cljs b/src/status_im/contexts/wallet/send/select_asset/view.cljs index 9420da669d..991a64d44e 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -69,9 +69,8 @@ {:icon-name :i/arrow-left :on-press on-close :switcher-type :select-account}] - [quo/text-combinations + [quo/page-top {:title (i18n/label :t/select-asset) - :container-style style/title-container :title-accessibility-label :title-label}] [quo/segmented-control {:size 32 diff --git a/src/status_im/contexts/wallet/share_address/style.cljs b/src/status_im/contexts/wallet/share_address/style.cljs index f4a108f6d0..4e30e0b96d 100644 --- a/src/status_im/contexts/wallet/share_address/style.cljs +++ b/src/status_im/contexts/wallet/share_address/style.cljs @@ -1,5 +1,3 @@ (ns status-im.contexts.wallet.share-address.style) -(def header-container - {:padding-horizontal 20 - :padding-vertical 12}) +(def header-container {:margin-bottom 8}) diff --git a/src/status_im/contexts/wallet/share_address/view.cljs b/src/status_im/contexts/wallet/share_address/view.cljs index f593b1de24..e306b1eeaa 100644 --- a/src/status_im/contexts/wallet/share_address/view.cljs +++ b/src/status_im/contexts/wallet/share_address/view.cljs @@ -32,18 +32,18 @@ (defn- open-preferences [selected-networks] - (rf/dispatch [:show-bottom-sheet - {:theme :dark - :shell? true - :content - (fn [] - [network-preferences/view - {:blur? true - :selected-networks (set @selected-networks) - :on-save (fn [chain-ids] - (rf/dispatch [:hide-bottom-sheet]) - (reset! selected-networks (map #(get utils/id->network %) - chain-ids)))}])}])) + (let [on-save (fn [chain-ids] + (rf/dispatch [:hide-bottom-sheet]) + (reset! selected-networks (map utils/id->network chain-ids))) + sheet-content (fn [] + [network-preferences/view + {:blur? true + :selected-networks (set @selected-networks) + :on-save on-save}])] + (rf/dispatch [:show-bottom-sheet + {:theme :dark + :shell? true + :content sheet-content}]))) (defn view @@ -74,8 +74,7 @@ [quo/overlay {:type :shell} [rn/view {:flex 1 - :padding-top padding-top - :key :share-adress} + :padding-top padding-top} [quo/page-nav {:icon-name :i/close :on-press #(rf/dispatch [:navigate-back]) @@ -83,9 +82,9 @@ :right-side [{:icon-name :i/scan :on-press #(js/alert "To be implemented")}] :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title title}] + [quo/page-top + {:title title + :container-style style/header-container}] [rn/view {:style {:padding-horizontal 20}} [quo/share-qr-code {:type (if watch-only? :watched-address :wallet)