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 Button and Wallet CTAs components (#17006) 

* Quo2 Wallet: Button and CTAs
This commit is contained in:
Omar Basem 2023-08-21 16:01:34 +04:00 committed by GitHub
parent a45f353356
commit 50f3bb005e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 248 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/quo2/components/buttons/wallet_button/component_spec.cljs Normal file
View File

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

20
src/quo2/components/buttons/wallet_button/style.cljs Normal file
View File

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

29
src/quo2/components/buttons/wallet_button/view.cljs Normal file
View File

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

11
src/quo2/components/buttons/wallet_ctas/component_spec.cljs Normal file
View File

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

13
src/quo2/components/buttons/wallet_ctas/style.cljs Normal file
View File

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

55
src/quo2/components/buttons/wallet_ctas/view.cljs Normal file
View File

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

4
src/quo2/core.cljs
View File

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

2
src/quo2/core_spec.cljs
View File

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

35
src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs Normal file
View File

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

30
src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs Normal file
View File

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

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

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

4
translations/en.json
View File

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