-
Notifications
You must be signed in to change notification settings - Fork 984
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Quo2 wallet: add wallet overview (#16855)
- Loading branch information
1 parent
18347b4
commit 2819c20
Showing
10 changed files
with
280 additions
and
7 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions
13
src/quo2/components/wallet/wallet_overview/component_spec.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}]]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters