From d2f67ef46cf8f70f37cabeeccc2bddd409975482 Mon Sep 17 00:00:00 2001 From: Alexander Date: Mon, 17 Jun 2024 09:37:35 +0200 Subject: [PATCH] Update `quo/data-item` to show accounts and networks as preview (#20382) * Update `quo/data-item` to show accounts and networks as preview * Podfile.lock change reverted --- .../settings/data_item/component_spec.cljs | 23 ----- .../components/settings/data_item/style.cljs | 5 +- .../components/settings/data_item/view.cljs | 90 ++++++++----------- .../preview/quo/settings/data_item.cljs | 48 +++++++--- .../wallet/account/edit_account/view.cljs | 2 - .../wallet/account/tabs/about/view.cljs | 2 - .../wallet/send/input_amount/view.cljs | 2 - .../send/transaction_confirmation/view.cljs | 2 - .../sheets/network_preferences/view.cljs | 1 - .../wallet/sheets/remove_account/view.cljs | 1 - 10 files changed, 73 insertions(+), 103 deletions(-) diff --git a/src/quo/components/settings/data_item/component_spec.cljs b/src/quo/components/settings/data_item/component_spec.cljs index d74ed50bb4..600f4f0896 100644 --- a/src/quo/components/settings/data_item/component_spec.cljs +++ b/src/quo/components/settings/data_item/component_spec.cljs @@ -10,9 +10,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? false :card? true - :label :none :status :default :size :default :title "Label" @@ -27,9 +25,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? false :card? false - :label :none :status :default :size :default :title "Label" @@ -45,9 +41,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? false :card? true - :label :none :status :default :size :small :title "Label" @@ -63,9 +57,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? false :card? true - :label :none :status :default :size :default :title "Label" @@ -81,9 +73,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? false :card? true - :label :none :status :default :size :default :title "Label" @@ -98,9 +88,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? false :card? true - :label :none :status :default :size :default :title "Label" @@ -115,10 +103,8 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? true :right-icon :i/chevron-right :card? true - :label :none :status :default :size :default :title "Label" @@ -133,10 +119,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? true - :right-icon :i/chevron-right :card? true - :label :preview :status :default :size :default :title "Label" @@ -151,10 +134,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? true - :right-icon :i/chevron-right :card? true - :label :preview :status :default :size :default :title "Label" @@ -170,10 +150,7 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :icon-right? true - :right-icon :i/chevron-right :card? true - :label :preview :status :default :size :default :title "Label" diff --git a/src/quo/components/settings/data_item/style.cljs b/src/quo/components/settings/data_item/style.cljs index 008f7e0968..71e049c3bb 100644 --- a/src/quo/components/settings/data_item/style.cljs +++ b/src/quo/components/settings/data_item/style.cljs @@ -71,9 +71,8 @@ (colors/theme-colors colors/neutral-100 colors/white theme))}) -(defn right-icon - [label] - {:margin-left (if (or (= label :graph) (= label :none)) 12 8)}) +(def right-icon + {:margin-left 12}) (def left-side {:flex 1}) diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index 1d9df58586..e99104498a 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -1,15 +1,13 @@ (ns quo.components.settings.data-item.view (:require [quo.components.avatars.account-avatar.view :as account-avatar] - [quo.components.common.not-implemented.view :as not-implemented] [quo.components.icon :as icons] [quo.components.list-items.preview-list.view :as preview-list] [quo.components.markdown.text :as text] [quo.components.settings.data-item.style :as style] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.core :as rn] - [utils.i18n :as i18n])) + [react-native.core :as rn])) (defn- left-loading [{:keys [size blur?]}] @@ -45,32 +43,24 @@ subtitle]])) (defn- left-title - [{:keys [title label size blur?]}] + [{:keys [title blur?]}] (let [theme (quo.theme/use-theme)] [rn/view {:style style/title-container} [text/text {:weight :regular :size :paragraph-2 :style (style/title blur? theme)} - title] - (when (and (= :graph label) (not= :small size)) - [text/text - {:weight :regular - :size :label - :style (style/title blur? theme)} - (i18n/label :t/days)])])) + title]])) (defn- left-side "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`" - [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color + [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type icon-color customization-color network-image emoji] :as props}] (let [theme (quo.theme/use-theme)] [rn/view {:style style/left-side} [left-title {:title title - :label label - :size size :blur? blur? :theme theme}] (if (= status :loading) @@ -93,49 +83,43 @@ :network-image network-image}]))])) (defn- right-side - [{:keys [label icon-right? right-icon icon-color communities-list]}] - [rn/view {:style style/right-container} - (case label - :preview [preview-list/view - {:type :communities - :number 3 - :size :size-24} - communities-list] - :graph [text/text "graph"] - :none nil - nil) - (when icon-right? - [rn/view {:style (style/right-icon label)} - [icons/icon right-icon - {:accessibility-label :icon-right - :color icon-color - :size 20}]])]) + [{:keys [right-icon right-content icon-color]}] + (let [{:keys [type data size] + :or {size :size-24}} right-content] + [rn/view {:style style/right-container} + (when type + [preview-list/view + {:type type + :number (count data) + :size size} + data]) + (when right-icon + [rn/view {:style style/right-icon} + [icons/icon right-icon + {:accessibility-label :icon-right + :color icon-color + :size 20}]])])) (defn view - [{:keys [blur? card? icon-right? right-icon label status size on-press communities-list - container-style] + [{:keys [blur? card? right-icon right-content status size on-press container-style] :as props}] (let [theme (quo.theme/use-theme) icon-color (if (or blur? (= :dark theme)) colors/neutral-40 colors/neutral-50)] - (if (= :graph label) - [not-implemented/view {:blur? blur?}] - [rn/pressable - {:accessibility-label :data-item - :disabled (not icon-right?) - :on-press on-press - :style (merge (style/container {:size size - :card? card? - :blur? blur? - :actionable? on-press - :theme theme}) - container-style)} - [left-side props] - (when (and (= :default status) (not= :small size)) - [right-side - {:label label - :icon-right? icon-right? - :right-icon right-icon - :icon-color icon-color - :communities-list communities-list}])]))) + [rn/pressable + {:accessibility-label :data-item + :disabled (not right-icon) + :on-press on-press + :style (merge (style/container {:size size + :card? card? + :blur? blur? + :actionable? on-press + :theme theme}) + container-style)} + [left-side props] + (when (and (= :default status) (not= :small size)) + [right-side + {:right-icon right-icon + :right-content right-content + :icon-color icon-color}])])) diff --git a/src/status_im/contexts/preview/quo/settings/data_item.cljs b/src/status_im/contexts/preview/quo/settings/data_item.cljs index 643aa67315..27bfdd2c7a 100644 --- a/src/status_im/contexts/preview/quo/settings/data_item.cljs +++ b/src/status_im/contexts/preview/quo/settings/data_item.cljs @@ -6,15 +6,42 @@ [status-im.common.resources :as resources] [status-im.contexts.preview.quo.preview :as preview])) +(def communities-list + [{:source (resources/get-mock-image :coinbase)} + {:source (resources/get-mock-image :decentraland)} + {:source (resources/get-mock-image :rarible)}]) + +(def networks-list + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) + (def descriptor [{:key :blur? :type :boolean} {:key :card? :type :boolean} - {:key :icon-right? :type :boolean} {:type :select - :key :label - :options [{:key :none} - {:key :graph} - {:key :preview}]} + :key :right-icon + :options [{:key :i/chevron-right} + {:key :i/copy} + {:key nil + :value "None"}]} + {:type :select + :key :right-content + :options [{:key nil + :value "None"} + {:key {:type :communities + :data communities-list} + :value "Communities"} + {:key {:type :network + :data networks-list} + :value "Networks"} + {:key {:type :accounts + :data [{:emoji "🔥" :customization-color :yellow}]} + :value "Account (size-24)"} + {:key {:type :accounts + :data [{:emoji "🔥" :customization-color :yellow}] + :size :size-32} + :value "Account (size-32)"}]} {:type :select :key :subtitle-type :options [{:key :default} @@ -30,29 +57,22 @@ :options [{:key :default} {:key :small}]}]) -(def communities-list - [{:source (resources/get-mock-image :coinbase)} - {:source (resources/get-mock-image :decentraland)} - {:source (resources/get-mock-image :rarible)}]) - (defn view [] (let [state (reagent/atom {:on-press #(js/alert (str "pressed")) :blur? false :subtitle-type :account - :icon-right? false :card? true - :label :none :status :default :size :default :title "Label" :subtitle "Subtitle" :icon :i/placeholder :right-icon :i/chevron-right + :right-content nil :emoji "🎮" :customization-color :yellow - :network-image (quo.resources/get-network :ethereum) - :communities-list communities-list})] + :network-image (quo.resources/get-network :ethereum)})] (fn [] [preview/preview-container {:state state diff --git a/src/status_im/contexts/wallet/account/edit_account/view.cljs b/src/status_im/contexts/wallet/account/edit_account/view.cljs index 48565023db..3dffd8c670 100644 --- a/src/status_im/contexts/wallet/account/edit_account/view.cljs +++ b/src/status_im/contexts/wallet/account/edit_account/view.cljs @@ -83,9 +83,7 @@ {:status :default :size :default :subtitle-type :default - :label :none :blur? false - :icon-right? true :right-icon :i/advanced :card? true :title (i18n/label :t/address) diff --git a/src/status_im/contexts/wallet/account/tabs/about/view.cljs b/src/status_im/contexts/wallet/account/tabs/about/view.cljs index f67e0f6b7c..798d3209fc 100644 --- a/src/status_im/contexts/wallet/account/tabs/about/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/about/view.cljs @@ -76,10 +76,8 @@ :content-container-style {:padding-bottom (+ constants/floating-shell-button-height 8)}} [quo/data-item {:description :default - :icon-right? true :right-icon :i/options :card? true - :label :none :status :default :size :default :title (if watch-only? (i18n/label :t/watched-address) (i18n/label :t/address)) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index af111c9410..594ceee617 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -48,14 +48,12 @@ :i/advanced]] [quo/data-item {:container-style style/fees-data-item - :label :none :status (if loading-routes? :loading :default) :size :small :title (i18n/label :t/fees) :subtitle fees}] [quo/data-item {:container-style style/amount-data-item - :label :none :status (if loading-routes? :loading :default) :size :small :title (i18n/label :t/recipient-gets) diff --git a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs index 7cd2be8371..a61896ef69 100644 --- a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs +++ b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs @@ -162,9 +162,7 @@ {:container-style style/detail-item :blur? false :description :default - :icon-right? false :card? false - :label :none :status :default :size :small :title title diff --git a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs index 86cd06c828..e47c964c13 100644 --- a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs +++ b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs @@ -81,7 +81,6 @@ {:status :default :size :default :description :default - :label :none :blur? blur? :card? true :title (i18n/label :t/address) diff --git a/src/status_im/contexts/wallet/sheets/remove_account/view.cljs b/src/status_im/contexts/wallet/sheets/remove_account/view.cljs index 3c91f5cb55..a87ca824bf 100644 --- a/src/status_im/contexts/wallet/sheets/remove_account/view.cljs +++ b/src/status_im/contexts/wallet/sheets/remove_account/view.cljs @@ -49,7 +49,6 @@ :custom-subtitle (fn [] [quo/text {:weight :medium} formatted-path]) - :icon-right? true :right-icon :i/copy :on-press (fn [] (rf/dispatch [:toasts/upsert