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

Add quo2 dApp component (#17074)

This commit is contained in:
erikseppanen 2023-08-23 16:31:28 -04:00 committed by GitHub
parent 3223c71526
commit 0552713143
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 168 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/mock2/coin-gecko@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
resources/images/mock2/coin-gecko@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

24
src/quo2/components/list_items/dapp/component_spec.cljs Normal file
View File

@ -0,0 +1,24 @@
(ns quo2.components.list-items.dapp.component-spec
(:require [quo2.components.list-items.dapp.view :as dapp]
[test-helpers.component :as h]))
(def props
{:dapp {:avatar nil
:name "Coingecko"
:value "coingecko.com"}
:state :default
:action :icon
:blur? false
:customization-color :blue})
(h/describe
"dApp component test"
(h/test "default render"
(h/render [dapp/view props])
(h/is-truthy (h/get-by-text (:name (:dapp props))))
(h/is-truthy (h/get-by-text (:value (:dapp props)))))
(h/test "on-press event"
(let [mock-fn (h/mock-fn)]
(h/render [dapp/view (assoc props :on-press-icon mock-fn)])
(h/fire-event :press (h/get-by-test-id "dapp-component-icon"))
(h/was-called mock-fn))))

47
src/quo2/components/list_items/dapp/style.cljs Normal file
View File

@ -0,0 +1,47 @@
(ns quo2.components.list-items.dapp.style
(:require [quo2.foundations.colors :as colors]))
(defn get-background-color
[{:keys [pressed? state blur? customization-color theme]}]
(cond
(and pressed? (= theme :dark) blur?) colors/white-opa-5
pressed? (colors/theme-colors
(colors/custom-color customization-color 50 5)
(colors/custom-color customization-color 60 5)
theme)
(and (= state :active) (= theme :dark) blur?) colors/white-opa-10
(= state :active) (colors/theme-colors
(colors/custom-color customization-color 50 10)
(colors/custom-color customization-color 60 10)
theme)
:else :transparent))
(defn container
[props]
{:flex 1
:padding-horizontal 12
:padding-vertical 8
:border-radius 12
:background-color (get-background-color props)
:flex-direction :row
:justify-content :space-between
:align-items :center})
(def container-info
{:flex-direction :row
:align-items :center})
(def user-info
{:margin-left 8})
(defn style-text-name
[theme]
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
(defn style-text-value
[theme]
{:color (colors/theme-colors colors/neutral-50 colors/white theme)})

47
src/quo2/components/list_items/dapp/view.cljs Normal file
View File

@ -0,0 +1,47 @@
(ns quo2.components.list-items.dapp.view
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[quo2.components.list-items.dapp.style :as style]
[quo2.theme :as quo.theme]
[reagent.core :as reagent]))
(defn- view-internal
[]
(let [pressed? (reagent/atom false)]
(fn [{:keys [dapp action on-press on-press-icon theme] :as props}]
[rn/pressable
{:style (style/container (assoc props :pressed? @pressed?))
:on-press on-press
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)}
[rn/view {:style style/container-info}
[fast-image/fast-image
{:source (:avatar dapp)
:style {:width 32 :height 32}}]
[rn/view {:style style/user-info}
[text/text
{:weight :semi-bold
:size :paragraph-1
:style (style/style-text-name theme)}
(:name dapp)]
[text/text
{:weight :regular
:size :paragraph-2
:style (style/style-text-value theme)}
(:value dapp)]]]
(when (= action :icon)
[rn/pressable
{:on-press on-press-icon
:testID "dapp-component-icon"}
[icons/icon :i/options
{:color (colors/theme-colors
colors/neutral-50
colors/neutral-40
theme)
:accessibility-label :icon}]])])))
(def view
(quo.theme/with-theme view-internal))

4
src/quo2/core.cljs
View File

@ -62,6 +62,7 @@
quo2.components.list-items.account-list-card.view
quo2.components.list-items.channel
quo2.components.list-items.community.view
quo2.components.list-items.dapp.view
quo2.components.list-items.menu-item
quo2.components.list-items.preview-list
quo2.components.list-items.token-value.view
@ -110,8 +111,8 @@
quo2.components.tags.tags
quo2.components.tags.token-tag
quo2.components.text-combinations.title.view
quo2.components.wallet.account-overview.view
quo2.components.wallet.account-card.view
quo2.components.wallet.account-overview.view
quo2.components.wallet.keypair.view
quo2.components.wallet.network-amount.view
quo2.components.wallet.network-bridge.view
@ -235,6 +236,7 @@
;;;; List items
(def account-list-card quo2.components.list-items.account-list-card.view/view)
(def channel-list-item quo2.components.list-items.channel/list-item)
(def dapp quo2.components.list-items.dapp.view/view)
(def menu-item quo2.components.list-items.menu-item/menu-item)
(def preview-list quo2.components.list-items.preview-list/preview-list)
(def user-list quo2.components.list-items.user-list/user-list)

3
src/quo2/core_spec.cljs
View File

@ -36,6 +36,7 @@
[quo2.components.links.url-preview-list.component-spec]
[quo2.components.links.url-preview.component-spec]
[quo2.components.list-items.community.component-spec]
[quo2.components.list-items.dapp.component-spec]
[quo2.components.list-items.token-value.component-spec]
[quo2.components.markdown.text-component-spec]
[quo2.components.markdown.list.component-spec]
@ -55,8 +56,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-overview.component-spec]
[quo2.components.wallet.account-card.component-spec]
[quo2.components.wallet.account-overview.component-spec]
[quo2.components.wallet.keypair.component-spec]
[quo2.components.wallet.network-amount.component-spec]
[quo2.components.wallet.network-bridge.component-spec]

1
src/status_im2/common/resources.cljs
View File

@ -52,6 +52,7 @@
(def mock-images
{:diamond (js/require "../resources/images/mock2/diamond.png")
:coinbase (js/require "../resources/images/mock2/coinbase.png")
:coin-gecko (js/require "../resources/images/mock2/coin-gecko.png")
:collectible (js/require "../resources/images/mock2/collectible.png")
:contact (js/require "../resources/images/mock2/contact.png")
:community-banner (js/require "../resources/images/mock2/community-banner.png")

40
src/status_im2/contexts/quo_preview/list_items/dapp.cljs Normal file
View File

@ -0,0 +1,40 @@
(ns status-im2.contexts.quo-preview.list-items.dapp
(: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
[{:key :state
:type :select
:options [{:key :default
:value "Default"}
{:key :active
:value "Active"}]}
{:key :action
:type :select
:options [{:key :none
:value "None"}
{:key :icon
:value "Icon"}]}
{:key :blur?
:type :boolean}])
(defn preview
[]
(let [state (reagent/atom {:dapp {:avatar (resources/get-mock-image :coin-gecko)
:name "Coingecko"
:value "coingecko.com"}
:state :default
:action :icon
:blur? false
:customization-color :blue
:on-press-icon (fn [] (js/alert "Button pressed"))})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo/dapp @state]]])))

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

@ -62,6 +62,7 @@
[status-im2.contexts.quo-preview.links.link-preview :as link-preview]
[status-im2.contexts.quo-preview.list-items.account-list-card :as account-list-card]
[status-im2.contexts.quo-preview.list-items.channel :as channel]
[status-im2.contexts.quo-preview.list-items.dapp :as dapp]
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
[status-im2.contexts.quo-preview.list-items.user-list :as user-list]
[status-im2.contexts.quo-preview.list-items.community-list :as community-list]
@ -111,8 +112,8 @@
[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-overview :as account-overview]
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
[status-im2.contexts.quo-preview.wallet.account-overview :as account-overview]
[status-im2.contexts.quo-preview.wallet.keypair :as keypair]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
@ -248,6 +249,8 @@
{:name :community-list
:options {:insets {:top? true}}
:component community-list/view}
{:name :dapp
:component dapp/preview}
{:name :preview-lists
:component preview-lists/preview-preview-lists}
{:name :user-list