diff --git a/resources/images/mock2/coin-gecko@2x.png b/resources/images/mock2/coin-gecko@2x.png new file mode 100644 index 0000000000..151187f9ed Binary files /dev/null and b/resources/images/mock2/coin-gecko@2x.png differ diff --git a/resources/images/mock2/coin-gecko@3x.png b/resources/images/mock2/coin-gecko@3x.png new file mode 100644 index 0000000000..29c4a6afba Binary files /dev/null and b/resources/images/mock2/coin-gecko@3x.png differ diff --git a/src/quo2/components/list_items/dapp/component_spec.cljs b/src/quo2/components/list_items/dapp/component_spec.cljs new file mode 100644 index 0000000000..14a301e11d --- /dev/null +++ b/src/quo2/components/list_items/dapp/component_spec.cljs @@ -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)))) diff --git a/src/quo2/components/list_items/dapp/style.cljs b/src/quo2/components/list_items/dapp/style.cljs new file mode 100644 index 0000000000..82dc241122 --- /dev/null +++ b/src/quo2/components/list_items/dapp/style.cljs @@ -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)}) diff --git a/src/quo2/components/list_items/dapp/view.cljs b/src/quo2/components/list_items/dapp/view.cljs new file mode 100644 index 0000000000..3b3f721cc4 --- /dev/null +++ b/src/quo2/components/list_items/dapp/view.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index cbfde3eaa8..d067440a5a 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 95974ede20..5fa0810941 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -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] diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 278160081c..b476b2c5a1 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -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") diff --git a/src/status_im2/contexts/quo_preview/list_items/dapp.cljs b/src/status_im2/contexts/quo_preview/list_items/dapp.cljs new file mode 100644 index 0000000000..2a4b2a902d --- /dev/null +++ b/src/status_im2/contexts/quo_preview/list_items/dapp.cljs @@ -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]]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index f92fe31642..aedd0b698c 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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