From e5ab94f1b290748936442c2915ea89cea1be010e Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Wed, 22 May 2024 13:29:46 +0530 Subject: [PATCH] Wallet/Approval Label Component (#20117) --- .../wallet/approval_label/component_spec.cljs | 43 ++++++++++++ .../wallet/approval_label/schema.cljs | 14 ++++ .../wallet/approval_label/style.cljs | 28 ++++++++ .../wallet/approval_label/view.cljs | 70 +++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + src/status_im/contexts/preview/quo/main.cljs | 3 + .../preview/quo/wallet/approval_label.cljs | 37 ++++++++++ translations/en.json | 3 + 9 files changed, 201 insertions(+) create mode 100644 src/quo/components/wallet/approval_label/component_spec.cljs create mode 100644 src/quo/components/wallet/approval_label/schema.cljs create mode 100644 src/quo/components/wallet/approval_label/style.cljs create mode 100644 src/quo/components/wallet/approval_label/view.cljs create mode 100644 src/status_im/contexts/preview/quo/wallet/approval_label.cljs diff --git a/src/quo/components/wallet/approval_label/component_spec.cljs b/src/quo/components/wallet/approval_label/component_spec.cljs new file mode 100644 index 0000000000..ac4a2ca690 --- /dev/null +++ b/src/quo/components/wallet/approval_label/component_spec.cljs @@ -0,0 +1,43 @@ +(ns quo.components.wallet.approval-label.component-spec + (:require [quo.components.wallet.approval-label.view :as approval-label] + [test-helpers.component :as h])) + +(h/describe "Wallet: Approval Label" + (h/test "with :approve status" + (h/render-with-theme-provider + [approval-label/view + {:status :approve + :customization-color :blue + :token-value "100" + :token-symbol "SNT"}]) + (h/is-truthy (h/get-by-translation-text :t/approve-amount-symbol {:amount "100" :symbol "SNT"}))) + + (h/test "with :approving status" + (h/render-with-theme-provider + [approval-label/view + {:status :approving + :customization-color :blue + :token-value "50" + :token-symbol "DAI"}]) + (h/is-truthy (h/get-by-translation-text :t/approving-amount-symbol {:amount "50" :symbol "DAI"}))) + + (h/test "with :approved status" + (h/render-with-theme-provider + [approval-label/view + {:status :approved + :customization-color :blue + :token-value "5" + :token-symbol "ETH"}]) + (h/is-truthy (h/get-by-translation-text :t/approved-amount-symbol {:amount "5" :symbol "ETH"}))) + + (h/test "on-press event is called when button is pressed" + (let [mock-fn (h/mock-fn)] + (h/render-with-theme-provider + [approval-label/view + {:status :approve + :customization-color :blue + :token-value "11" + :token-symbol "DAI" + :button-props {:on-press mock-fn}}]) + (h/fire-event :press (h/get-by-translation-text :t/approve)) + (h/was-called mock-fn)))) diff --git a/src/quo/components/wallet/approval_label/schema.cljs b/src/quo/components/wallet/approval_label/schema.cljs new file mode 100644 index 0000000000..94c4ad9d11 --- /dev/null +++ b/src/quo/components/wallet/approval_label/schema.cljs @@ -0,0 +1,14 @@ +(ns quo.components.wallet.approval-label.schema) + +(def ?schema + [:=> + [:catn + [:props + [:map {:closed true} + [:status [:enum :approve :approving :approved]] + [:token-value :string] + [:token-symbol :string] + [:container-style {:optional true} [:maybe :map]] + [:button-props {:optional true} [:maybe :map]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]] + :any]) diff --git a/src/quo/components/wallet/approval_label/style.cljs b/src/quo/components/wallet/approval_label/style.cljs new file mode 100644 index 0000000000..a6888f5b40 --- /dev/null +++ b/src/quo/components/wallet/approval_label/style.cljs @@ -0,0 +1,28 @@ +(ns quo.components.wallet.approval-label.style + (:require [quo.foundations.colors :as colors])) + +(def ^:const top-hole-view-height 24) + +(defn container + [customization-color theme] + {:background-color (colors/resolve-color customization-color theme 5) + :align-items :center + :padding-horizontal 12 + :padding-vertical 8 + :padding-top (+ 8 top-hole-view-height) + :gap 8 + :border-bottom-left-radius 16 + :border-bottom-right-radius 16 + :flex-direction :row}) + +(def content + {:flex-direction :row + :align-items :center + :flex 1 + :padding-vertical 4 + :gap 4}) + +(defn message + [theme] + {:flex 1 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) diff --git a/src/quo/components/wallet/approval_label/view.cljs b/src/quo/components/wallet/approval_label/view.cljs new file mode 100644 index 0000000000..711b6e289a --- /dev/null +++ b/src/quo/components/wallet/approval_label/view.cljs @@ -0,0 +1,70 @@ +(ns quo.components.wallet.approval-label.view + (:require [oops.core :as oops] + [quo.components.buttons.button.view :as button] + [quo.components.icon :as icon] + [quo.components.markdown.text :as text] + [quo.components.wallet.approval-label.schema :as approval-label.schema] + [quo.components.wallet.approval-label.style :as style] + [quo.foundations.colors :as colors] + quo.theme + [react-native.core :as rn] + [react-native.hole-view :as hole-view] + [schema.core :as schema] + [utils.i18n :as i18n])) + +(def ^:private status-icons + {:approve :i/alert + :approving :i/pending-state + :approved :i/check}) + +(def ^:private status-message + {:approve :t/approve-amount-symbol + :approving :t/approving-amount-symbol + :approved :t/approved-amount-symbol}) + +(defn- view-internal + [{:keys [status token-value token-symbol + container-style button-props] + :as props}] + (let [theme (quo.theme/use-theme) + customization-color (or (:customization-color props) :blue) + [container-width set-container-width] (rn/use-state 0) + on-layout (rn/use-callback + #(set-container-width + (oops/oget % :nativeEvent :layout :width)))] + [hole-view/hole-view + {:holes [{:x 0 + :y 0 + :height style/top-hole-view-height + :width container-width + :borderBottomStartRadius 16 + :borderBottomEndRadius 16}] + :style {:margin-top (- style/top-hole-view-height)} + :on-layout on-layout} + [rn/view + {:style (merge (style/container customization-color theme) + container-style) + :accessibility-label :approval-label} + [rn/view {:style style/content} + [icon/icon + (status-icons status) + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :size 16}] + [text/text + {:size :paragraph-2 + :style (style/message theme)} + (i18n/label (status-message status) + {:amount token-value + :symbol token-symbol})]] + (when button-props + [button/button + (merge {:type (if (= status :approve) :primary :grey) + :background (when-not (= status :approve) :blur) + :customization-color customization-color + :size 24} + button-props) + (i18n/label (if (= status :approve) + :t/approve + :t/view))])]])) + +(def view (schema/instrument #'view-internal approval-label.schema/?schema)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 6353a33803..3b6fe86585 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -165,6 +165,7 @@ quo.components.wallet.account-permissions.view quo.components.wallet.address-text.view quo.components.wallet.amount-input.view + quo.components.wallet.approval-label.view quo.components.wallet.confirmation-progress.view quo.components.wallet.keypair.view quo.components.wallet.network-amount.view @@ -434,6 +435,7 @@ (def account-permissions quo.components.wallet.account-permissions.view/view) (def address-text quo.components.wallet.address-text.view/view) (def amount-input quo.components.wallet.amount-input.view/view) +(def approval-label quo.components.wallet.approval-label.view/view) (def confirmation-progress quo.components.wallet.confirmation-progress.view/view) (def keypair quo.components.wallet.keypair.view/view) (def network-amount quo.components.wallet.network-amount.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index e999593073..da7ad8baaf 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -95,6 +95,7 @@ quo.components.wallet.account-overview.component-spec quo.components.wallet.account-permissions.component-spec quo.components.wallet.amount-input.component-spec + quo.components.wallet.approval-label.component-spec quo.components.wallet.confirmation-progress.component-spec quo.components.wallet.keypair.component-spec quo.components.wallet.network-amount.component-spec diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 6315a2323d..7e2adcb1c8 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -191,6 +191,7 @@ account-overview] [status-im.contexts.preview.quo.wallet.account-permissions :as account-permissions] [status-im.contexts.preview.quo.wallet.amount-input :as amount-input] + [status-im.contexts.preview.quo.wallet.approval-label :as approval-label] [status-im.contexts.preview.quo.wallet.confirmation-progress :as confirmation-progress] [status-im.contexts.preview.quo.wallet.keypair :as keypair] @@ -526,6 +527,8 @@ :component account-permissions/view} {:name :amount-input :component amount-input/view} + {:name :approval-label + :component approval-label/view} {:name :confirmation-progress :component confirmation-progress/view} {:name :keypair :component keypair/view} diff --git a/src/status_im/contexts/preview/quo/wallet/approval_label.cljs b/src/status_im/contexts/preview/quo/wallet/approval_label.cljs new file mode 100644 index 0000000000..be6f046d58 --- /dev/null +++ b/src/status_im/contexts/preview/quo/wallet/approval_label.cljs @@ -0,0 +1,37 @@ +(ns status-im.contexts.preview.quo.wallet.approval-label + (:require + [quo.core :as quo] + [react-native.core :as rn] + [status-im.contexts.preview.quo.preview :as preview])) + +(def descriptor + [{:type :select + :key :status + :options [{:key :approve} + {:key :approving} + {:key :approved}]} + {:type :text + :key :token-value} + {:type :select + :key :token-symbol + :options [{:key "SNT"} + {:key "DAI"} + {:key "ETH"}]} + (preview/customization-color-option)]) + +(defn view + [] + (let [[state set-state] (rn/use-state {:status :approve + :customization-color :blue + :token-value "100" + :token-symbol "SNT"})] + [preview/preview-container + {:state state + :set-state set-state + :descriptor descriptor + :component-container-style {:padding-top 50}} + [quo/approval-label + (assoc state + :button-props + {:on-press + #(js/alert "Pressed")})]])) diff --git a/translations/en.json b/translations/en.json index 2fb3a88d9f..0ccd0bbdf2 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1991,6 +1991,9 @@ "approve-token-contract-desc": "Approving a token with a contract allows it to spend your token balance. If you feel that a project is untrustworthy, don’t approve the token with them, or approve only the amount you will use with them.", "unlimited": "Unlimited", "approve": "Approve", + "approve-amount-symbol": "Approve {{amount}} {{symbol}}", + "approving-amount-symbol": "Approving {{amount}} {{symbol}}...", + "approved-amount-symbol": "Approved {{amount}} {{symbol}}", "limit": "Limit", "last-transaction": "Last transaction", "price-impact-desc": "Estimated price impact for this transaction. If the current block base fee exceeds this, your transaction will be included in a following block with a lower base fee.",