status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Quo2 wallet: add wallet overview (#16855)

This commit is contained in:
erikseppanen 2023-08-04 11:43:39 -04:00 committed by GitHub
parent 18347b44fe
commit 2819c20400
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 280 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/16x16/positive-right@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 439 B

BIN
resources/images/icons2/16x16/positive-right@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 582 B

13
src/quo2/components/wallet/wallet_overview/component_spec.cljs Normal file
View File

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

56
src/quo2/components/wallet/wallet_overview/style.cljs Normal file
View File

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

116
src/quo2/components/wallet/wallet_overview/view.cljs Normal file
View File

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

7
src/quo2/core.cljs
View File

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

5
src/quo2/core_spec.cljs
View File

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

8
src/status_im2/contexts/quo_preview/main.cljs
View File

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

77
src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs Normal file
View File

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

5
translations/en.json
View File

@ -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"