From d8680ecf29f320b39a1a416e2cb472fa97b95903 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Tue, 8 Aug 2023 08:58:53 +0400 Subject: [PATCH] Quo2 Wallet: Summary Info (#16881) * feat: quo2 wallet - summary info --- .../wallet/summary_info/component_spec.cljs | 60 ++++++++++++++ .../components/wallet/summary_info/style.cljs | 40 +++++++++ .../components/wallet/summary_info/view.cljs | 83 +++++++++++++++++++ src/quo2/core.cljs | 3 + src/quo2/core_spec.cljs | 1 + src/quo2/foundations/resources.cljs | 1 - src/status_im2/contexts/quo_preview/main.cljs | 4 + .../quo_preview/wallet/summary_info.cljs | 55 ++++++++++++ 8 files changed, 246 insertions(+), 1 deletion(-) create mode 100644 src/quo2/components/wallet/summary_info/component_spec.cljs create mode 100644 src/quo2/components/wallet/summary_info/style.cljs create mode 100644 src/quo2/components/wallet/summary_info/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/summary_info.cljs diff --git a/src/quo2/components/wallet/summary_info/component_spec.cljs b/src/quo2/components/wallet/summary_info/component_spec.cljs new file mode 100644 index 0000000000..6b8293bba5 --- /dev/null +++ b/src/quo2/components/wallet/summary_info/component_spec.cljs @@ -0,0 +1,60 @@ +(ns quo2.components.wallet.summary-info.component-spec + (:require + [quo2.components.wallet.summary-info.view :as summary-info] + [test-helpers.component :as h])) + +(def status-account-props + {:customization-color :purple + :size 32 + :emoji "🍑" + :type :default + :name "Collectibles vault" + :address "0x0ah...78b"}) + +(h/describe "Wallet: Summary Info" + (h/test "Type of `status-account` title renders" + (h/render [summary-info/view + {:type :status-account + :networks? true + :values {:ethereum 150 + :optimism 50 + :arbitrum 25} + :account-props status-account-props}]) + (h/is-truthy (h/get-by-text "Collectibles vault"))) + + (h/test "Type of `user` title renders" + (h/render [summary-info/view + {:type :user + :networks? true + :values {:ethereum 150 + :optimism 50 + :arbitrum 25} + :account-props {:full-name "M L" + :status-indicator? false + :size :small + :customization-color :blue + :name "Mark Libot" + :address "0x0ah...78b" + :status-account (merge status-account-props {:size 16})}}]) + (h/is-truthy (h/get-by-text "Mark Libot")) + (h/is-truthy (h/get-by-text "Collectibles vault"))) + + (h/test "Networks true render" + (h/render [summary-info/view + {:type :status-account + :networks? true + :values {:ethereum 150 + :optimism 50 + :arbitrum 25} + :account-props status-account-props}]) + (h/is-truthy (h/get-by-label-text :networks))) + + (h/test "Networks false render" + (h/render [summary-info/view + {:type :status-account + :networks? false + :values {:ethereum 150 + :optimism 50 + :arbitrum 25} + :account-props status-account-props}]) + (h/is-null (h/query-by-label-text :networks)))) diff --git a/src/quo2/components/wallet/summary_info/style.cljs b/src/quo2/components/wallet/summary_info/style.cljs new file mode 100644 index 0000000000..44f9620dee --- /dev/null +++ b/src/quo2/components/wallet/summary_info/style.cljs @@ -0,0 +1,40 @@ +(ns quo2.components.wallet.summary-info.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [networks? theme] + {:width 335 + :height (if networks? 90 56) + :border-radius 16 + :border-width 1 + :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) + :margin-bottom (if networks? 4 8)}) + +(def info-container + {:flex-direction :row + :height 55 + :padding-horizontal 12 + :align-items :center}) + +(defn dot-divider + [theme] + {:width 2 + :height 2 + :border-radius 2 + :margin-horizontal 8 + :background-color (colors/theme-colors colors/neutral-50 + colors/neutral-60 + theme)}) + +(defn line-divider + [theme] + {:width "100%" + :height 1 + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) + +(def networks-container + {:padding-horizontal 12 + :padding-vertical 4 + :height 32 + :flex-direction :row + :align-items :center}) diff --git a/src/quo2/components/wallet/summary_info/view.cljs b/src/quo2/components/wallet/summary_info/view.cljs new file mode 100644 index 0000000000..8bba7fa938 --- /dev/null +++ b/src/quo2/components/wallet/summary_info/view.cljs @@ -0,0 +1,83 @@ +(ns quo2.components.wallet.summary-info.view + (:require + [quo2.components.avatars.user-avatar.view :as user-avatar] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as resources] + [quo2.theme :as quo.theme] + [quo2.components.avatars.account-avatar.view :as account-avatar] + [react-native.core :as rn] + [quo2.components.wallet.summary-info.style :as style])) + +(defn- network-amount + [{:keys [network amount divider? theme]}] + [:<> + [rn/image + {:style {:width 14 + :height 14} + :source (resources/networks network)}] + [text/text + {:size :paragraph-2 + :weight :medium + :style {:margin-left 4}} amount] + (when divider? + [rn/view + {:style (style/dot-divider theme)}])]) + +(defn networks + [values theme] + (let [{:keys [ethereum optimism arbitrum]} values] + [rn/view + {:style style/networks-container + :accessibility-label :networks} + [network-amount + {:network :ethereum + :amount (str ethereum " ETH") + :divider? true + :theme theme}] + [network-amount + {:network :optimism + :amount (str optimism " ETH") + :divider? true + :theme theme}] + [network-amount + {:network :arbitrum + :amount (str arbitrum " ETH") + :theme theme}]])) + +(defn- view-internal + [{:keys [theme type account-props networks? values]}] + [rn/view + {:style (style/container networks? theme)} + [rn/view + {:style style/info-container} + (if (= type :status-account) + [account-avatar/view account-props] + [user-avatar/user-avatar account-props]) + [rn/view {:style {:margin-left 8}} + (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)]) + [rn/view + {:style {:flex-direction :row + :align-items :center}} + (when (= type :user) + [:<> + [rn/view {:style {:margin-right 4}} [account-avatar/view (:status-account account-props)]] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (get-in account-props [:status-account :name])] + [rn/view + {:style (style/dot-divider theme)}]]) + [text/text + {:size (when (not= type :account) :paragraph-2) + :weight (when (= type :account) :semi-bold) + :style {:color (when (not= type :account) + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} + (:address account-props)]]]] + (when networks? + [:<> + [rn/view + {:style (style/line-divider theme)}] + [networks values theme]])]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index a81b007cc6..d77918c74d 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -107,6 +107,7 @@ quo2.components.wallet.account-card.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view + quo2.components.wallet.summary-info.view quo2.components.wallet.token-input.view quo2.components.wallet.wallet-overview.view)) @@ -306,5 +307,7 @@ (def network-amount quo2.components.wallet.network-amount.view/view) (def network-bridge quo2.components.wallet.network-bridge.view/view) (def account-card quo2.components.wallet.account-card.view/view) +(def summary-info quo2.components.wallet.summary-info.view/view) (def token-input quo2.components.wallet.token-input.view/view) (def wallet-overview quo2.components.wallet.wallet-overview.view/view) + diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 88535673ee..d2d1c43616 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -53,5 +53,6 @@ [quo2.components.wallet.account-card.component-spec] [quo2.components.wallet.network-amount.component-spec] [quo2.components.wallet.network-bridge.component-spec] + [quo2.components.wallet.summary-info.component-spec] [quo2.components.wallet.token-input.component-spec] [quo2.components.wallet.wallet-overview.component-spec])) diff --git a/src/quo2/foundations/resources.cljs b/src/quo2/foundations/resources.cljs index 521791c813..a053eafac7 100644 --- a/src/quo2/foundations/resources.cljs +++ b/src/quo2/foundations/resources.cljs @@ -28,4 +28,3 @@ {:ethereum (js/require "../resources/images/tokens/mainnet/ETH.png") :optimism (js/require "../resources/images/tokens/mainnet/OP.png") :arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")}) - diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 254e335f9c..8a4858b03a 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -108,6 +108,7 @@ [status-im2.contexts.quo-preview.wallet.account-card :as account-card] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] + [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] [status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview] [utils.re-frame :as rf])) @@ -421,6 +422,9 @@ {:name :network-bridge :options {:topBar {:visible true}} :component network-bridge/preview} + {:name :summary-info + :options {:topBar {:visible true}} + :component summary-info/preview} {:name :token-input :options {:topBar {:visible true}} :component token-input/preview} diff --git a/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs b/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs new file mode 100644 index 0000000000..1a37076f76 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs @@ -0,0 +1,55 @@ +(ns status-im2.contexts.quo-preview.wallet.summary-info + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + + +(def descriptor + [{:label "Type:" + :key :type + :type :select + :options [{:key :status-account + :value "Status Account"} + {:key :user + :value "User"} + {:key :saved-account + :value "Saved Account"} + {:key :account + :value "Account"}]} + {:label "Networks?:" + :key :networks? + :type :boolean}]) + + +(defn preview + [] + (let [state (reagent/atom {:type :status-account + :networks? true + :values {:ethereum 150 + :optimism 50 + :arbitrum 25}}) + status-account-props {:customization-color :purple + :size 32 + :emoji "🍑" + :type :default + :name "Collectibles vault" + :address "0x0ah...78b"} + user-props {:full-name "M L" + :status-indicator? false + :size :small + :ring-background (resources/get-mock-image :ring) + :customization-color :blue + :name "Mark Libot" + :address "0x0ah...78b" + :status-account (merge status-account-props {:size 16})}] + (fn [] + (let [account-props (if (= (:type @state) :status-account) status-account-props user-props)] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view + {:style {:flex 1 + :padding-horizontal 20}} + [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] + [quo/summary-info (merge @state {:account-props account-props})]]]))))