From 50f3bb005ef9a92b42cca002ee536e4e8bcd397e Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 21 Aug 2023 16:01:34 +0400 Subject: [PATCH] Quo2: Wallet Button and Wallet CTAs components (#17006) * Quo2 Wallet: Button and CTAs --- .../buttons/wallet_button/component_spec.cljs | 39 +++++++++++++ .../buttons/wallet_button/style.cljs | 20 +++++++ .../buttons/wallet_button/view.cljs | 29 ++++++++++ .../buttons/wallet_ctas/component_spec.cljs | 11 ++++ .../components/buttons/wallet_ctas/style.cljs | 13 +++++ .../components/buttons/wallet_ctas/view.cljs | 55 +++++++++++++++++++ src/quo2/core.cljs | 4 ++ src/quo2/core_spec.cljs | 2 + .../quo_preview/buttons/wallet_button.cljs | 35 ++++++++++++ .../quo_preview/buttons/wallet_ctas.cljs | 30 ++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 8 ++- translations/en.json | 4 +- 12 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 src/quo2/components/buttons/wallet_button/component_spec.cljs create mode 100644 src/quo2/components/buttons/wallet_button/style.cljs create mode 100644 src/quo2/components/buttons/wallet_button/view.cljs create mode 100644 src/quo2/components/buttons/wallet_ctas/component_spec.cljs create mode 100644 src/quo2/components/buttons/wallet_ctas/style.cljs create mode 100644 src/quo2/components/buttons/wallet_ctas/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs create mode 100644 src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs diff --git a/src/quo2/components/buttons/wallet_button/component_spec.cljs b/src/quo2/components/buttons/wallet_button/component_spec.cljs new file mode 100644 index 0000000000..5c8444ed61 --- /dev/null +++ b/src/quo2/components/buttons/wallet_button/component_spec.cljs @@ -0,0 +1,39 @@ +(ns quo2.components.buttons.wallet-button.component-spec + (:require [quo2.components.buttons.wallet-button.view :as wallet-button] + [test-helpers.component :as h])) + +(h/describe "button tests" + (h/test "default render of wallet button component" + (h/render [wallet-button/view + {:icon :i/placeholder + :accessibility-label "test-button"}]) + (h/is-truthy (h/get-by-label-text "test-button"))) + + (h/test "button on-press works" + (let [event (h/mock-fn)] + (h/render [wallet-button/view + {:icon :i/placeholder + :on-press event + :accessibility-label "test-button"}]) + (h/fire-event :press (h/get-by-label-text "test-button")) + (h/was-called event))) + + (h/test "button on-press disabled when disabled" + (let [event (h/mock-fn)] + (h/render [wallet-button/view + {:icon :i/placeholder + :on-press event + :accessibility-label "test-button" + :disabled? true}]) + (h/fire-event :press (h/get-by-label-text "test-button")) + (h/was-not-called event))) + + (h/test "button on-long-press works" + (let [event (h/mock-fn)] + (h/render [wallet-button/view + {:icon :i/placeholder + :on-long-press event + :accessibility-label "test-button"}]) + (h/fire-event :long-press (h/get-by-label-text "test-button")) + (h/was-called event)))) + diff --git a/src/quo2/components/buttons/wallet_button/style.cljs b/src/quo2/components/buttons/wallet_button/style.cljs new file mode 100644 index 0000000000..29b6980445 --- /dev/null +++ b/src/quo2/components/buttons/wallet_button/style.cljs @@ -0,0 +1,20 @@ +(ns quo2.components.buttons.wallet-button.style + (:require [quo2.foundations.colors :as colors])) + +(defn get-border-color + [{:keys [pressed? theme]}] + (if (= pressed? true) + (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) + (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))) + +(defn main + [{:keys [pressed? theme disabled?]}] + {:border-color (get-border-color {:pressed? pressed? + :theme theme}) + :border-width 1 + :border-radius 10 + :width 32 + :height 32 + :justify-content :center + :align-items :center + :opacity (when disabled? 0.3)}) diff --git a/src/quo2/components/buttons/wallet_button/view.cljs b/src/quo2/components/buttons/wallet_button/view.cljs new file mode 100644 index 0000000000..56ee86bc13 --- /dev/null +++ b/src/quo2/components/buttons/wallet_button/view.cljs @@ -0,0 +1,29 @@ +(ns quo2.components.buttons.wallet-button.view + (:require + [quo2.components.buttons.wallet-button.style :as style] + [quo2.components.icon :as quo2.icons] + [quo2.foundations.colors :as colors] + [quo2.theme :as theme] + [react-native.core :as rn] + [reagent.core :as reagent])) + +(defn- view-internal + [] + (let [pressed? (reagent/atom false)] + (fn + [{:keys [on-press on-long-press disabled? icon accessibility-label container-style theme]}] + [rn/pressable + {:accessibility-label (or accessibility-label :wallet-button) + :on-press on-press + :on-press-in #(reset! pressed? true) + :on-press-out #(reset! pressed? nil) + :on-long-press on-long-press + :disabled disabled? + :style (merge (style/main {:pressed? @pressed? + :theme theme + :disabled? disabled?}) + container-style)} + [quo2.icons/icon icon + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]]))) + +(def view (theme/with-theme view-internal)) diff --git a/src/quo2/components/buttons/wallet_ctas/component_spec.cljs b/src/quo2/components/buttons/wallet_ctas/component_spec.cljs new file mode 100644 index 0000000000..446f035d3d --- /dev/null +++ b/src/quo2/components/buttons/wallet_ctas/component_spec.cljs @@ -0,0 +1,11 @@ +(ns quo2.components.buttons.wallet-ctas.component-spec + (:require [test-helpers.component :as h] + [quo2.components.buttons.wallet-ctas.view :as wallet-ctas])) + +(h/describe "Wallet CTAs test" + (h/test "Buttons render" + (h/render [wallet-ctas/view]) + (h/is-truthy (h/get-by-label-text :buy)) + (h/is-truthy (h/get-by-label-text :send)) + (h/is-truthy (h/get-by-label-text :receive)) + (h/is-truthy (h/get-by-label-text :bridge)))) diff --git a/src/quo2/components/buttons/wallet_ctas/style.cljs b/src/quo2/components/buttons/wallet_ctas/style.cljs new file mode 100644 index 0000000000..721bc8011a --- /dev/null +++ b/src/quo2/components/buttons/wallet_ctas/style.cljs @@ -0,0 +1,13 @@ +(ns quo2.components.buttons.wallet-ctas.style) + +(def container + {:padding-top 24 + :padding-bottom 12 + :padding-horizontal 20 + :flex-direction :row}) + +(def button-container + {:padding-vertical 8 + :width 77.75 + :justify-content :center + :align-items :center}) diff --git a/src/quo2/components/buttons/wallet_ctas/view.cljs b/src/quo2/components/buttons/wallet_ctas/view.cljs new file mode 100644 index 0000000000..b879c165de --- /dev/null +++ b/src/quo2/components/buttons/wallet_ctas/view.cljs @@ -0,0 +1,55 @@ +(ns quo2.components.buttons.wallet-ctas.view + (:require + [quo2.components.buttons.wallet-button.view :as wallet-button] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [quo2.theme :as quo.theme] + [react-native.core :as rn] + [utils.i18n :as i18n] + [quo2.components.buttons.wallet-ctas.style :as style])) + + +(defn action-button + [{:keys [icon text on-press theme accessibility-label]}] + [rn/view + {:style style/button-container + :accessibility-label accessibility-label} + [wallet-button/view + {:icon icon + :on-press on-press + :on-long-press #(js/alert "long pressed")}] + [text/text + {:weight :medium + :size :paragraph-2 + :style {:margin-top 4 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]]) + +(defn view-internal + [{:keys [theme buy-action send-action receive-action bridge-action]}] + [rn/view {:style style/container} + [action-button + {:icon :i/add + :text (i18n/label :t/buy) + :on-press buy-action + :theme theme + :accessibility-label :buy}] + [action-button + {:icon :i/send + :text (i18n/label :t/send) + :on-press send-action + :theme theme + :accessibility-label :send}] + [action-button + {:icon :i/receive + :text (i18n/label :t/receive) + :on-press receive-action + :theme theme + :accessibility-label :receive}] + [action-button + {:icon :i/bridge + :text (i18n/label :t/bridge) + :on-press bridge-action + :theme theme + :accessibility-label :bridge}]]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index efabfa8e3f..83cb739d32 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -13,6 +13,8 @@ quo2.components.buttons.dynamic-button.view quo2.components.buttons.predictive-keyboard.view quo2.components.buttons.slide-button.view + quo2.components.buttons.wallet-button.view + quo2.components.buttons.wallet-ctas.view quo2.components.browser.browser-input.view quo2.components.calendar.calendar.view quo2.components.calendar.calendar-day.view @@ -135,6 +137,8 @@ (def dynamic-button quo2.components.buttons.dynamic-button.view/view) (def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view) (def slide-button quo2.components.buttons.slide-button.view/view) +(def wallet-button quo2.components.buttons.wallet-button.view/view) +(def wallet-ctas quo2.components.buttons.wallet-ctas.view/view) ;;;; Browser (def browser-input quo2.components.browser.browser-input.view/view) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index e86292d266..ce612dcbb9 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -8,6 +8,8 @@ [quo2.components.buttons.composer-button.component-spec] [quo2.components.buttons.predictive-keyboard.component-spec] [quo2.components.buttons.slide-button.component-spec] + [quo2.components.buttons.wallet-button.component-spec] + [quo2.components.buttons.wallet-ctas.component-spec] [quo2.components.calendar.calendar.component-spec] [quo2.components.calendar.calendar-day.component-spec] [quo2.components.calendar.calendar.month-picker.component-spec] diff --git a/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs b/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs new file mode 100644 index 0000000000..056c7593f0 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs @@ -0,0 +1,35 @@ +(ns status-im2.contexts.quo-preview.buttons.wallet-button + (:require + [quo2.core :as quo] + [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 "Disabled?:" + :key :disabled? + :type :boolean}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:icon :i/placeholder + :on-press #(js/alert "pressed") + :on-long-press #(js/alert "long pressed")})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:flex 1 :padding-bottom 20} + [rn/view {:height 200} + [preview/customizer state descriptor]] + [rn/view + {:flex 1 + :align-items :center + :justify-content :center} + [quo/wallet-button @state]]]]))) + +(defn preview + [] + [rn/view + {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1} + [cool-preview]]) diff --git a/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs b/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs new file mode 100644 index 0000000000..309b153ae1 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs @@ -0,0 +1,30 @@ +(ns status-im2.contexts.quo-preview.buttons.wallet-ctas + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent])) + +(defn cool-preview + [] + (let [state (reagent/atom {:buy-action #(js/alert "Buy button pressed") + :send-action #(js/alert "Send button pressed") + :receive-action #(js/alert "Receive button pressed") + :bridge-action #(js/alert "Bridge button pressed")})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:style {:padding-bottom 150}} + [rn/view + {:style {:padding-vertical 60 + :flex-direction :row + :justify-content :center}} + [quo/wallet-ctas @state]]]]))) + +(defn preview + [] + [rn/view + {:style {:flex 1}} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 948078207e..fdc52a7e15 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -20,6 +20,8 @@ [status-im2.contexts.quo-preview.buttons.slide-button :as slide-button] [status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button] [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard] + [status-im2.contexts.quo-preview.buttons.wallet-button :as wallet-button] + [status-im2.contexts.quo-preview.buttons.wallet-ctas :as wallet-ctas] [status-im2.contexts.quo-preview.calendar.calendar :as calendar] [status-im2.contexts.quo-preview.calendar.calendar-day :as calendar-day] [status-im2.contexts.quo-preview.calendar.calendar-year :as calendar-year] @@ -146,7 +148,11 @@ {:name :slide-button :component slide-button/preview-slide-button} {:name :predictive-keyboard - :component predictive-keyboard/preview-predictive-keyboard}] + :component predictive-keyboard/preview-predictive-keyboard} + {:name :wallet-button + :component wallet-button/preview} + {:name :wallet-ctas + :component wallet-ctas/preview}] :browser [{:name :browser-input :component browser-input/preview-browser-input}] :calendar [{:name :calendar diff --git a/translations/en.json b/translations/en.json index b4214c295e..2a71a64e43 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2280,5 +2280,7 @@ "collectibles": "Collectibles", "no-collectibles-description": "Don't be a bored ape", "no-activity": "No activity", - "no-activity-description": "C'mon do something..." + "no-activity-description": "C'mon do something...", + "buy": "Buy", + "bridge": "Bridge" }