FFFra/account card component

src/quo2/components/wallet/account_card/component_spec.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.wallet.account-card.component-spec
+  (:require [quo2.components.wallet.account-card.view :as account-card]
+            [test-helpers.component :as h]))
+
+(def john-doe-name "John Doe")
+
+(defn get-test-data
+  [type watch-only?]
+  {:name                john-doe-name
+   :balance             "€1,000.00"
+   :percentage-value    "50%"
+   :amount              "€500.00"
+   :customization-color :blue
+   :watch-only?         watch-only?
+   :type                type})
+
+(h/describe "Account_card tests"
+  (h/test "Renders normal"
+    (let [data (get-test-data :default false)]
+      (h/render [account-card/view data])
+      (h/is-truthy (h/get-by-text john-doe-name))))
+
+  (h/test "Renders watch-only"
+    (let [data (get-test-data :watch-only? true)]
+      (h/render [account-card/view data])
+      (h/is-truthy (h/get-by-text john-doe-name))))
+
+  (h/test "Renders add-account"
+    (let [data {:type :add-account}]
+      (h/render [account-card/view data])
+      (h/is-truthy (h/get-by-label-text :plus-button))))
+
+  (h/test "Add account on press fires correctly"
+    (let [handler (h/mock-fn)
+          data    {:type    :add-account
+                   :handler handler}]
+      (h/render [account-card/view data])
+      (h/fire-event :on-press (h/get-by-label-text :plus-button))
+      (h/was-called handler))))

src/quo2/components/wallet/account_card/style.cljs

@@ -0,0 +1,90 @@
+(ns quo2.components.wallet.account-card.style
+  (:require
+    [quo2.foundations.colors :as colors]))
+
+(defn text-color
+  [watch-only?]
+  (if (and watch-only? (not (colors/dark?)))
+    colors/neutral-100
+    colors/white))
+
+(defn card
+  [customization-color watch-only?]
+  {:width              161
+   :height             88
+   :background-color   (if watch-only?
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/neutral-95)
+                         (colors/custom-color-by-theme customization-color 50 60))
+   :border-radius      16
+   :border-width       1
+   :border-color       (if watch-only?
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5)
+                         (colors/custom-color-by-theme customization-color 50 60))
+   :padding-horizontal 12
+   :padding-top        8
+   :padding-bottom     10})
+
+(def profile-container
+  {:margin-bottom  8
+   :flex-direction :row})
+
+(def metrics-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def title
+  {:margin-bottom 9})
+
+(defn account-name
+  [watch-only?]
+  {:style  {:color       (text-color watch-only?)
+            :margin-left 5}
+   :size   :paragraph-2
+   :weight :medium})
+
+(def watch-only-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :center
+   :flex            1})
+
+(defn account-value
+  [watch-only?]
+  {:style  {:color (text-color watch-only?)}
+   :size   :heading-2
+   :weight :semi-bold})
+
+(defn metrics
+  [watch-only?]
+  {:weight :semi-bold
+   :size   :paragraph-2
+   :style  {:color (if (and watch-only? (not (colors/dark?)))
+                     colors/neutral-80-opa-60
+                     colors/white-opa-70)}})
+
+(defn separator
+  [watch-only?]
+  {:width             1
+   :height            10
+   :border-width      1
+   :border-color      (if watch-only?
+                        colors/neutral-80-opa-20
+                        colors/white-opa-40)
+   :margin-horizontal 4})
+
+(def add-account-container
+  {:width              161
+   :height             88
+   :border-color       (colors/theme-colors colors/neutral-20 colors/white-opa-5)
+   :border-width       1
+   :border-style       :dashed
+   :align-items        :center
+   :justify-content    :center
+   :border-radius      16
+   :padding-vertical   12
+   :padding-horizontal 10})
+
+(def add-account-title
+  {:size       :paragraph-2
+   :weight     :medium
+   :margin-top 4})

src/quo2/components/wallet/account_card/view.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.wallet.account-card.view
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icon]
+            [quo2.components.wallet.account-card.style :as style]
+            [status-im2.common.plus-button.view :as plus-button]
+            [utils.i18n :as i18n]
+            [quo2.components.markdown.text :as text]))
+
+(defn user-account-view
+  [{:keys [name balance percentage-value amount customization-color type]}]
+  (let [watch-only? (= :watch-only type)]
+    [:<>
+     [rn/view (style/card customization-color watch-only?)
+      [rn/view style/profile-container
+       [icon/icon :contact]
+       [rn/view style/watch-only-container
+        [text/text (style/account-name watch-only?)
+         name]
+        (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
+
+      [text/text (style/account-value watch-only?) balance]
+      [rn/view style/metrics-container
+       [rn/view {:margin-right 5.5}
+        [icon/icon :positive
+         {:color (if (and watch-only? (not (colors/dark?)))
+                   colors/neutral-100
+                   colors/white)
+          :size  16}]]
+       [text/text (style/metrics watch-only?) percentage-value]
+       [rn/view (style/separator watch-only?)]
+       [text/text (style/metrics watch-only?) amount]]]]))
+
+(defn add-account-view
+  [{:keys [handler type add-account customization-color]}]
+  [rn/view style/add-account-container
+   [plus-button/plus-button
+    {:on-press            handler
+     :customization-color customization-color
+    }]
+   [text/text style/add-account-title (i18n/label :t/add-account)]])
+
+(defn view
+  [{:keys [type] :as props}]
+  (case type
+    :watch-only  [user-account-view props]
+    :add-account [add-account-view props]
+    :default     [user-account-view
+                  props]
+    nil))

src/quo2/core.cljs

@@ -88,6 +88,7 @@
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
     quo2.components.settings.settings-list.view
+    quo2.components.wallet.account-card.view
     quo2.components.settings.reorder-item.view))
 
 (def text quo2.components.markdown.text/text)
@@ -236,3 +237,6 @@
 (def url-preview quo2.components.links.url-preview.view/view)
 (def url-preview-list quo2.components.links.url-preview-list.view/view)
 (def link-preview quo2.components.links.link-preview.view/view)
+
+;;;; WALLET
+(def account-card quo2.components.wallet.account-card.view/view)

src/quo2/core_spec.cljs

@@ -36,4 +36,5 @@
     [quo2.components.settings.reorder-item.component-spec]
     [quo2.components.settings.settings-list.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
-    [quo2.components.tags.--tests--.status-tags-component-spec]))
+    [quo2.components.tags.--tests--.status-tags-component-spec]
+    [quo2.components.wallet.account-card.component-spec]))

src/status_im2/contexts/quo_preview/main.cljs

@@ -96,7 +96,8 @@
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
     [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
-    [status-im2.contexts.quo-preview.keycard.keycard :as keycard]))
+    [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
+    [status-im2.contexts.quo-preview.wallet.account-card :as account-card]))
 
 (def screens-categories
   {:foundations           [{:name      :shadows
@@ -355,7 +356,10 @@
    :text-combinations     [{:name      :title
                             :options   {:topBar {:visible true}}
                             :component title/preview-title}]
-   :wallet                [{:name      :lowest-price
+   :wallet                [{:name      :account-card
+                            :options   {:topBar {:visible true}}
+                            :component account-card/preview-account-card}
+                           {:name      :lowest-price
                             :options   {:topBar {:visible true}}
                             :component lowest-price/preview-lowest-price}
                            {:name      :token-overview
@@ -369,7 +373,8 @@
                             :component network-amount/preview}]
    :keycard               [{:name      :keycard-component
                             :options   {:topBar {:visible true}}
-                            :component keycard/preview-keycard}]})
+                            :component keycard/preview-keycard}]
+  })
 
 (def screens (flatten (map val screens-categories)))
 

src/status_im2/contexts/quo_preview/wallet/account_card.cljs

@@ -0,0 +1,56 @@
+(ns status-im2.contexts.quo-preview.wallet.account-card
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.markdown.text :as text]
+            [quo2.core :as quo]))
+
+(def mock-data
+  [{:id                  1
+    :name                "Alisher account"
+    :balance             "€2,269.12"
+    :percentage-value    "16.9%"
+    :amount              "€570.24"
+    :customization-color :army
+    :type                :default}
+   {:id               2
+    :name             "Ben’s fortune"
+    :balance          "€2,269.12"
+    :percentage-value "16.9%"
+    :amount           "€570.24"
+    :watch-only?      true
+    :type             :watch-only}
+   {:id                  3
+    :type                :add-account
+    :customization-color :blue
+    :handler             #(js/alert "Add account pressed")}])
+
+(defn- separator
+  []
+  [rn/view {:style {:width 40}}])
+
+(defn cool-preview
+  []
+  [rn/view
+   {:style {:margin-vertical 40
+            :margin-left     40
+            :flex            1}}
+   [text/text {:size :heading-1 :weight :semi-bold :style {:margin-bottom 40}} "Account card"]
+   [rn/flat-list
+    {:data                           mock-data
+     :key-extractor                  #(str (:id %))
+     :horizontal                     true
+     :separator                      [separator]
+     :render-fn                      quo/account-card
+     :showsHorizontalScrollIndicator false}]])
+
+(defn preview-account-card
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white
+                                           colors/neutral-90)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])