Quo2 Wallet: Summary Info (#16881)

* feat: quo2 wallet - summary info

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))))

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})

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))

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)
+

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]))

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")})
-

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}

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})]]]))))