Wallet/Approval Label Component (#20117)

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

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

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

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

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)

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

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}

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

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.",