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: Summary Info (#16881) 

* feat: quo2 wallet - summary info
This commit is contained in:
Omar Basem 2023-08-08 08:58:53 +04:00 committed by GitHub
parent 24c4cd1509
commit d8680ecf29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 246 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/quo2/components/wallet/summary_info/component_spec.cljs Normal file
View File

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

40
src/quo2/components/wallet/summary_info/style.cljs Normal file
View File

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

83
src/quo2/components/wallet/summary_info/view.cljs Normal file
View File

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

3
src/quo2/core.cljs
View File

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

1
src/quo2/core_spec.cljs
View File

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

1
src/quo2/foundations/resources.cljs
View File

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

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

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

55
src/status_im2/contexts/quo_preview/wallet/summary_info.cljs Normal file
View File

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