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

Token network component (#17667)

This commit is contained in:
Nikolay 2023-10-25 23:35:42 +03:00 committed by GitHub
parent 8ed7059aa9
commit 876b020a32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 218 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/quo/components/list_items/token_network/component_spec.cljs Normal file
View File

@ -0,0 +1,47 @@
(ns quo.components.list-items.token-network.component-spec
(:require [quo.components.list-items.token-network.view :as token-network]
[quo.foundations.colors :as colors]
[quo.foundations.resources :as resources]
[test-helpers.component :as h]))
(def props
{:token (resources/get-token :snt)
:state :default
:label "Status"
:networks [(resources/get-network :ethereum)]
:token-value "100.00 SNT"
:fiat-value "€0.00"})
(h/describe "List items: Token network"
(h/test "default state"
(h/render [token-network/view (dissoc props :state)])
(h/is-truthy (h/get-by-text "Status")))
(h/test "default state explicit"
(h/render [token-network/view props])
(h/is-truthy (h/get-by-text "Status")))
(h/test "Pressed state"
(h/render [token-network/view props])
(h/fire-event :on-press-in (h/get-by-label-text :token-network))
(h/wait-for #(h/has-style (h/query-by-label-text :token-network)
{:backgroundColor (colors/resolve-color :blue :light 5)})))
(h/test "Active state"
(h/render [token-network/view (assoc props :state :active)])
(h/has-style (h/query-by-label-text :token-network)
{:backgroundColor (colors/resolve-color :blue :light 10)}))
(h/test "Selected state"
(h/render [token-network/view (assoc props :state :selected)])
(h/is-truthy (h/query-by-label-text :check-icon)))
(h/test "Call on-press"
(let [on-press (h/mock-fn)]
(h/render [token-network/view (assoc props :on-press on-press)])
(h/fire-event :on-press (h/get-by-label-text :token-network))
(h/was-called on-press)))
(h/test "Empty props"
(h/render [token-network/view {}])
(h/is-truthy (h/get-by-label-text :token-network))))

47
src/quo/components/list_items/token_network/style.cljs Normal file
View File

@ -0,0 +1,47 @@
(ns quo.components.list-items.token-network.style
(:require [quo.foundations.colors :as colors]))
(defn- background-color
[state customization-color theme]
(cond
(= state :pressed) (colors/resolve-color customization-color theme 5)
(= state :active) (colors/resolve-color customization-color theme 10)
(= state :selected) (colors/resolve-color customization-color theme 5)
:else :transparent))
(defn container
[state customization-color theme]
{:flex-direction :row
:justify-content :space-between
:align-items :center
:padding-horizontal 12
:padding-vertical 8
:border-radius 12
:height 56
:background-color (background-color state customization-color theme)})
(defn check-color
[customization-color theme]
(colors/resolve-color customization-color theme))
(def info
{:flex-direction :row
:align-items :center})
(def token-info
{:height 40})
(def token-image
{:width 32
:height 32
:border-width 1
:border-radius 16
:border-color colors/neutral-80-opa-5
:margin-right 8})
(def values-container
{:align-items :flex-end})
(defn fiat-value
[theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

62
src/quo/components/list_items/token_network/view.cljs Normal file
View File

@ -0,0 +1,62 @@
(ns quo.components.list-items.token-network.view
(:require
[quo.components.icon :as icon]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.list-items.token-network.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]))
(defn- info
[{:keys [token label networks]}]
[rn/view {:style style/info}
[rn/image
{:source (or (:source token) token)
:style style/token-image}]
[rn/view {:style style/token-info}
[text/text {:weight :semi-bold} label]
[preview-list/view
{:type :network
:size :size-14
:number 3}
networks]]])
(defn- values
[{:keys [state token-value fiat-value customization-color theme]}]
(if (= state :selected)
[icon/icon :i/check
{:color (style/check-color customization-color theme)
:accessibility-label :check-icon}]
[rn/view {:style style/values-container}
[text/text
{:weight :medium
:size :paragraph-2}
token-value]
[text/text
{:style (style/fiat-value theme)
:size :paragraph-2}
fiat-value]]))
(defn- view-internal
[]
(let [pressed? (reagent/atom false)
on-press-in #(reset! pressed? true)
on-press-out #(reset! pressed? false)]
(fn [{:keys [on-press state customization-color
_token _networks _token-value _fiat-value theme]
:as props
:or {customization-color :blue}}]
(let [internal-state (if @pressed?
:pressed
state)]
[rn/pressable
{:style (style/container internal-state customization-color theme)
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
:accessibility-label :token-network}
[info props]
[values props]]))))
(def view (quo.theme/with-theme view-internal))

3
src/quo/core.cljs
View File

@ -77,6 +77,7 @@
quo.components.list-items.preview-list.view
quo.components.list-items.saved-address.view
quo.components.list-items.saved-contact-address.view
quo.components.list-items.token-network.view
quo.components.list-items.token-value.view
quo.components.list-items.user-list
quo.components.loaders.skeleton-list.view
@ -112,7 +113,6 @@
quo.components.selectors.selectors.view
quo.components.settings.accounts.view
quo.components.settings.category.view
quo.components.settings.category.view
quo.components.settings.data-item.view
quo.components.settings.privacy-option.view
quo.components.settings.reorder-item.view
@ -278,6 +278,7 @@
(def community-list-item quo.components.list-items.community.view/view)
(def saved-address quo.components.list-items.saved-address.view/view)
(def saved-contact-address quo.components.list-items.saved-contact-address.view/view)
(def token-network quo.components.list-items.token-network.view/view)
(def token-value quo.components.list-items.token-value.view/view)
;;;; Loaders

3
src/quo/core_spec.cljs
View File

@ -32,7 +32,6 @@
[quo.components.inputs.address-input.component-spec]
[quo.components.inputs.input.component-spec]
[quo.components.inputs.locked-input.component-spec]
[quo.components.inputs.locked-input.component-spec]
[quo.components.inputs.profile-input.component-spec]
[quo.components.inputs.recovery-phrase.component-spec]
[quo.components.inputs.title-input.component-spec]
@ -46,6 +45,7 @@
[quo.components.list-items.dapp.component-spec]
[quo.components.list-items.saved-address.component-spec]
[quo.components.list-items.saved-contact-address.component-spec]
[quo.components.list-items.token-network.component-spec]
[quo.components.list-items.token-value.component-spec]
[quo.components.loaders.skeleton-list.component-spec]
[quo.components.markdown.list.component-spec]
@ -72,6 +72,7 @@
[quo.components.switchers.group-messaging-card.component-spec]
[quo.components.tags.network-tags.component-spec]
[quo.components.tags.status-tags-component-spec]
[quo.components.tags.tiny-tag.component-spec]
[quo.components.wallet.account-card.component-spec]
[quo.components.wallet.account-origin.component-spec]
[quo.components.wallet.account-overview.component-spec]

55
src/status_im2/contexts/quo_preview/list_items/token_network.cljs Normal file
View File

@ -0,0 +1,55 @@
(ns status-im2.contexts.quo-preview.list-items.token-network
(:require
[quo.core :as quo]
[quo.foundations.resources :as quo.resources]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def networks-list
[{:source (quo.resources/get-network :ethereum)}
{:source (quo.resources/get-network :optimism)}
{:source (quo.resources/get-network :arbitrum)}
{:source (quo.resources/get-network :zksync)}
{:source (quo.resources/get-network :polygon)}])
(def descriptor
[{:key :state
:type :select
:options [{:key :default}
{:key :active}
{:key :selected}]}
{:key :token
:type :select
:options [{:value :eth
:key (quo.resources/get-token :eth)}
{:value :snt
:key (quo.resources/get-token :snt)}
{:value :dai
:key (quo.resources/get-token :dai)}]}
{:key :label
:type :text}
{:key :token-value
:type :text}
{:key :fiat-value
:type :text}
(preview/customization-color-option)
{:key :show-alert-on-press?
:type :boolean}])
(defn preview-token-network
[]
(let [state (reagent/atom {:token (quo.resources/get-token :snt)
:label "Status"
:token-value "0.00 SNT"
:fiat-value "€0.00"
:networks networks-list
:state :default
:customization-color :blue})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[quo/token-network
(merge @state
(when (:show-alert-on-press? @state)
{:on-press #(js/alert "Pressed!")}))]])))

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

@ -92,6 +92,7 @@
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
[status-im2.contexts.quo-preview.list-items.saved-address :as saved-address]
[status-im2.contexts.quo-preview.list-items.saved-contact-address :as saved-contact-address]
[status-im2.contexts.quo-preview.list-items.token-network :as token-network]
[status-im2.contexts.quo-preview.list-items.token-value :as token-value]
[status-im2.contexts.quo-preview.list-items.user-list :as user-list]
[status-im2.contexts.quo-preview.loaders.skeleton-list :as skeleton-list]
@ -328,6 +329,8 @@
:component saved-address/view}
{:name :saved-contact-address
:component saved-contact-address/view}
{:name :token-network
:component token-network/preview-token-network}
{:name :token-value
:component token-value/view}
{:name :user-list