status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet/Approval Label Component (#20117)

This commit is contained in:
Ajay Sivan 2024-05-22 13:29:46 +05:30 committed by GitHub
parent ff82d9c39e
commit e5ab94f1b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 201 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/quo/components/wallet/approval_label/component_spec.cljs Normal file
View File

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

14
src/quo/components/wallet/approval_label/schema.cljs Normal file
View File

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

28
src/quo/components/wallet/approval_label/style.cljs Normal file
View File

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

70
src/quo/components/wallet/approval_label/view.cljs Normal file
View File

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

2
src/quo/core.cljs
View File

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

1
src/quo/core_spec.cljs
View File

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

3
src/status_im/contexts/preview/quo/main.cljs
View File

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

37
src/status_im/contexts/preview/quo/wallet/approval_label.cljs Normal file
View File

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

3
translations/en.json
View File

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