From 2819c204002c30d8d979b0d402c453714fe1ed15 Mon Sep 17 00:00:00 2001 From: erikseppanen Date: Fri, 4 Aug 2023 11:43:39 -0400 Subject: [PATCH] Quo2 wallet: add wallet overview (#16855) --- .../images/icons2/16x16/positive-right@2x.png | Bin 0 -> 439 bytes .../images/icons2/16x16/positive-right@3x.png | Bin 0 -> 582 bytes .../wallet_overview/component_spec.cljs | 13 ++ .../wallet/wallet_overview/style.cljs | 56 +++++++++ .../wallet/wallet_overview/view.cljs | 116 ++++++++++++++++++ src/quo2/core.cljs | 7 +- src/quo2/core_spec.cljs | 5 +- src/status_im2/contexts/quo_preview/main.cljs | 8 +- .../quo_preview/wallet/wallet_overview.cljs | 77 ++++++++++++ translations/en.json | 5 + 10 files changed, 280 insertions(+), 7 deletions(-) create mode 100644 resources/images/icons2/16x16/positive-right@2x.png create mode 100644 resources/images/icons2/16x16/positive-right@3x.png create mode 100644 src/quo2/components/wallet/wallet_overview/component_spec.cljs create mode 100644 src/quo2/components/wallet/wallet_overview/style.cljs create mode 100644 src/quo2/components/wallet/wallet_overview/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs diff --git a/resources/images/icons2/16x16/positive-right@2x.png b/resources/images/icons2/16x16/positive-right@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..6649d1576fcf1fdade4b73d0c85f81f34de0a1b4 GIT binary patch literal 439 zcmV;o0Z9IdP)`_B8b z^I1f%KuOpJA@31DQ`2N@S=L$+ed!2!$ySbjW^$QMD>;Az^m^*ZR&=` z%q`wFm_u_mC!!@F$ll>;D{~{H>KCLV0;$T!EFu%no<2YhH4r30JkMSc|GN!2>X?JT zvu}eeRp}(mBEouZMF>ZL5^|BZCPo+&z@I9p1D$yH*I}MUI0y3Rn4=+qq{nR*)|qQh zXCk^vo`8Qwe}_|0?nDo-#DT7P)@8Na=QbjFd9<%?is*%NU=cB-+OLK42=Ee?fx(_Y hKRDJvB9TZ|k#FF}T&!gV(~bZD002ovPDHLkV1miXy2Jng literal 0 HcmV?d00001 diff --git a/resources/images/icons2/16x16/positive-right@3x.png b/resources/images/icons2/16x16/positive-right@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..1278cca64aa62746602e5be1f7bb042acb61f093 GIT binary patch literal 582 zcmV-M0=fN(P)-J*ppDTCtoPqDu@p>wpn+i)wBq< z*(3*<-=$3;+1Z_)$pVZq#u#Ia{l#${3lT68gS3$S&X4zR5J0S3C_A^5X$@WlPzV}) z{rPy%`NxwokLJM(7bgb=XozJ36g+hq|DlfRM>lw)RmAPGylUPbJQeM`#2!Krc?PIx zo4*&qJI-$+pTLKdCI3lO9q4w#3jXVTh!`E>=p>pD$QckvYTuW@7-Nhv#@N5`2^*rL Uz+UhZivR!s07*qoM6N<$f}eH)NdN!< literal 0 HcmV?d00001 diff --git a/src/quo2/components/wallet/wallet_overview/component_spec.cljs b/src/quo2/components/wallet/wallet_overview/component_spec.cljs new file mode 100644 index 0000000000..fac1000807 --- /dev/null +++ b/src/quo2/components/wallet/wallet_overview/component_spec.cljs @@ -0,0 +1,13 @@ +(ns quo2.components.wallet.wallet-overview.component-spec + (:require [quo2.components.wallet.wallet-overview.view :as wallet-overview] + [test-helpers.component :as h])) + +(h/describe + "Wallet overview test" + (h/test "renders correct balance" + (h/render [wallet-overview/view + {:state :default + :time-frame :one-week + :metrics :positive + :balance "€0.01"}]) + (h/is-truthy (h/get-by-text "€0.01")))) diff --git a/src/quo2/components/wallet/wallet_overview/style.cljs b/src/quo2/components/wallet/wallet_overview/style.cljs new file mode 100644 index 0000000000..5a983dbd38 --- /dev/null +++ b/src/quo2/components/wallet/wallet_overview/style.cljs @@ -0,0 +1,56 @@ +(ns quo2.components.wallet.wallet-overview.style + (:require [quo2.foundations.colors :as colors])) + +(def container-info + {:flex 1 + :padding-horizontal 20 + :padding-top 12 + :padding-bottom 32}) + +(def container-info-top + {:flex-direction :row + :flex 1 + :justify-content :space-between + :align-items :center}) + +(def network-dropdown + {:border-color colors/neutral-50 + :border-width 1 + :border-radius 10 + :width 68 + :height 32}) + +(defn color-metrics + [metrics] + (if (= metrics :positive) colors/success-50 colors/danger-50)) + +(defn color-text-heading + [theme] + (colors/theme-colors colors/neutral-100 colors/white theme)) + +(defn color-text-paragraph + [theme] + (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)) + +(defn style-text-heading + [theme] + {:color (color-text-heading theme)}) + +(defn style-text-paragraph + [theme] + {:color (color-text-paragraph theme)}) + +(defn dot-separator + [metrics] + {:background-color (color-metrics metrics) + :margin-horizontal 4 + :width 2 + :height 2}) + +(defn loading-bar + [width height margin-right theme] + {:width width + :height height + :border-radius 6 + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) + :margin-right margin-right}) diff --git a/src/quo2/components/wallet/wallet_overview/view.cljs b/src/quo2/components/wallet/wallet_overview/view.cljs new file mode 100644 index 0000000000..712784227c --- /dev/null +++ b/src/quo2/components/wallet/wallet_overview/view.cljs @@ -0,0 +1,116 @@ +(ns quo2.components.wallet.wallet-overview.view + (:require [quo2.components.icon :as icons] + [quo2.components.markdown.text :as quo2] + [react-native.core :as rn] + [utils.i18n :as i18n] + [quo2.components.wallet.wallet-overview.style :as style] + [quo2.theme :as quo.theme])) + +(def ^:private time-frames + {:one-week (i18n/label :t/one-week-int) + :one-month (i18n/label :t/one-month-int) + :three-months (i18n/label :t/three-months-int) + :one-year (i18n/label :t/one-year) + :all-time (i18n/label :t/all-time)}) + +(defn- loading-bars + [bars theme] + (map (fn [{:keys [width height margin]}] + [rn/view {:style (style/loading-bar width height margin theme)}]) + bars)) + +;; temporary placeholder for network dropdown component +(defn- network-dropdown + [] + [:<> + [rn/view {:style style/network-dropdown}]]) + +(defn- view-info-top + [{:keys [state balance theme]}] + [rn/view {:style style/container-info-top} + (if (= state :loading) + (loading-bars [{:width 201 :height 20 :margin 0}] theme) + [quo2/text + {:weight :semi-bold + :size :heading-1 + :style (style/style-text-heading theme)} + balance]) + [network-dropdown]]) + +(defn- view-metrics + [metrics currency-change percentage-change] + [rn/view + {:style {:flex-direction :row + :align-items :center}} + [quo2/text + {:weight :medium + :size :paragraph-2 + :style {:color (style/color-metrics metrics)}} + percentage-change] + [rn/view + {:style (style/dot-separator metrics)}] + [quo2/text + {:weight :medium + :size :paragraph-2 + :style {:color (style/color-metrics metrics) + :margin-right 4}} + currency-change] + [icons/icon + (if (= metrics :positive) :i/positive :i/negative) + {:color (style/color-metrics metrics) + :size 16}]]) + +(defn- view-info-bottom + [{:keys [state time-frame metrics date begin-date end-date + currency-change percentage-change theme]}] + [rn/view {:flex-direction :row} + (when (= state :loading) + [rn/view + {:style {:flex-direction :row + :align-items :center}} + (loading-bars [{:width 32 :height 10 :margin 8} + {:width 32 :height 10 :margin 4} + {:width 62 :height 10 :margin 4} + {:width 10 :height 10 :margin 0}] + theme)]) + (when (and (= state :default) (= time-frame :selected)) + [quo2/text + {:weight :medium + :size :paragraph-2 + :style (style/style-text-paragraph theme)} + date]) + (when (and (= state :default) (= time-frame :custom)) + [rn/view {:style {:flex-direction :row}} + [quo2/text + {:weight :medium + :size :paragraph-2 + :style (style/style-text-paragraph theme)} + begin-date] + [icons/icon :i/positive-right + {:color (style/color-text-paragraph theme) + :size 16}] + [quo2/text + {:weight :medium + :size :paragraph-2 + :style (style/style-text-paragraph theme)} + end-date]]) + (when (and (= state :default) (not (#{:none :selected} time-frame))) + [rn/view {:style {:flex-direction :row}} + [quo2/text + {:weight :medium + :size :paragraph-2 + :style {:color (style/color-text-paragraph theme) + :margin-right 8}} + (time-frame time-frames)] + (when (and (= state :default) (not= metrics :none)) + [view-metrics metrics currency-change percentage-change])])]) + +(defn- view-internal + [props] + [rn/view {:style style/container-info} + [rn/view {:style {:flex 1}} + [view-info-top props] + [view-info-bottom props]]]) + +(def view + (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 7fad161c81..3b29bf1160 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -102,10 +102,11 @@ quo2.components.tags.tags quo2.components.tags.token-tag quo2.components.text-combinations.title.view + quo2.components.wallet.account-card.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view - quo2.components.wallet.account-card.view - quo2.components.wallet.token-input.view)) + quo2.components.wallet.token-input.view + quo2.components.wallet.wallet-overview.view)) (def separator quo2.components.common.separator.view/separator) @@ -302,4 +303,4 @@ (def network-bridge quo2.components.wallet.network-bridge.view/view) (def account-card quo2.components.wallet.account-card.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 e7fe275c30..f3d5dd21cc 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -49,7 +49,8 @@ [quo2.components.settings.category.component-spec] [quo2.components.share.share-qr-code.component-spec] [quo2.components.tags.status-tags-component-spec] + [quo2.components.wallet.account-card.component-spec] [quo2.components.wallet.network-amount.component-spec] [quo2.components.wallet.network-bridge.component-spec] - [quo2.components.wallet.account-card.component-spec] - [quo2.components.wallet.token-input.component-spec])) + [quo2.components.wallet.token-input.component-spec] + [quo2.components.wallet.wallet-overview.component-spec])) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 1ebc0dfc91..c1cd989ee8 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -103,10 +103,11 @@ [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton] [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions] [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover] + [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.account-card :as account-card] [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])) (def screens-categories @@ -413,7 +414,10 @@ :component network-bridge/preview} {:name :token-input :options {:topBar {:visible true}} - :component token-input/preview}] + :component token-input/preview} + {:name :wallet-overview + :options {:topBar {:visible true}} + :component wallet-overview/preview-wallet-overview}] :keycard [{:name :keycard-component :options {:topBar {:visible true}} :component keycard/preview-keycard}]}) diff --git a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs new file mode 100644 index 0000000000..16e32f5a50 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs @@ -0,0 +1,77 @@ +(ns status-im2.contexts.quo-preview.wallet.wallet-overview + (:require [quo2.core :as quo2] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "State" + :key :state + :type :select + :options [{:key :loading + :value "Loading"} + {:key :default + :value "Default"}]} + {:label "Time frame" + :key :time-frame + :type :select + :options [{:key :none + :value "None"} + {:key :selected + :value "Selected"} + {:key :one-week + :value "1 Week"} + {:key :one-month + :value "1 Month"} + {:key :three-months + :value "3 Months"} + {:key :one-year + :value "1 Year"} + {:key :all-time + :value "All time"} + {:key :custom + :value "Custom"}]} + {:label "Metrics" + :key :metrics + :type :select + :options [{:key :none + :value "None"} + {:key :positive + :value "Positive"} + {:key :negative + :value "Negative"}]}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:state :default + :time-frame :one-week + :metrics :positive + :balance "€0.00" + :date "20 Nov 2023" + :begin-date "16 May" + :end-date "25 May" + :currency-change "€0.00" + :percentage-change "0.00%"})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view + {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + [quo2/wallet-overview @state]]]]))) + +(defn preview-wallet-overview + [] + [rn/view + {:background-color (colors/theme-colors colors/white + colors/neutral-95) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/translations/en.json b/translations/en.json index 6205386ed4..d9be8aea2d 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2262,6 +2262,11 @@ "channel-unmuted-successfully": "Channel unmuted successfully! ", "photo-saved": "Photo saved to your device", "community-unmuted": "Community unmuted", + "all-time": "All time", + "one-week-int": "1 week", + "one-month-int": "1 month", + "three-months-int": "3 months", + "one-year": "1 year", "retake": "Retake", "use-photo": "Use Photo", "photo-caps": "PHOTO"