From 31dea1ca13f0d2a9a29f16a69e459d6594af6c50 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Fri, 15 Dec 2023 13:24:42 +0530 Subject: [PATCH] Quo Wallet/Required-Tokens Component (#18164) --- src/quo/components/utilities/token/view.cljs | 2 +- .../required_tokens/component_spec.cljs | 30 ++++++++++ .../wallet/required_tokens/style.cljs | 21 +++++++ .../wallet/required_tokens/view.cljs | 56 +++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + src/schema/common.cljs | 7 +++ src/status_im2/contexts/quo_preview/main.cljs | 3 + .../quo_preview/wallet/required_tokens.cljs | 47 ++++++++++++++++ 9 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 src/quo/components/wallet/required_tokens/component_spec.cljs create mode 100644 src/quo/components/wallet/required_tokens/style.cljs create mode 100644 src/quo/components/wallet/required_tokens/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/required_tokens.cljs diff --git a/src/quo/components/utilities/token/view.cljs b/src/quo/components/utilities/token/view.cljs index 37c8f0c7ba..01b339e225 100644 --- a/src/quo/components/utilities/token/view.cljs +++ b/src/quo/components/utilities/token/view.cljs @@ -15,7 +15,7 @@ [:token {:optional true} [:or keyword? string?]] [:style {:optional true} map?] ;; Ignores `token` and uses this as parameter to `rn/image`'s source. - [:image-source {:optional true} [:or string? map?]] + [:image-source {:optional true} [:or :schema.common/image-source :string]] ;; If true, adds `data:image/png;base64,` as prefix to the string passed as `image-source` [:add-b64-prefix? {:optional true} boolean?]]] :any]) diff --git a/src/quo/components/wallet/required_tokens/component_spec.cljs b/src/quo/components/wallet/required_tokens/component_spec.cljs new file mode 100644 index 0000000000..d3a7c03e21 --- /dev/null +++ b/src/quo/components/wallet/required_tokens/component_spec.cljs @@ -0,0 +1,30 @@ +(ns quo.components.wallet.required-tokens.component-spec + (:require + [quo.components.wallet.required-tokens.view :as required-tokens] + [test-helpers.component :as h])) + +(defn render + [component] + (h/render-with-theme-provider component :light)) + +(h/describe "Wallet: Required Tokens" + (h/test "basic render" + (render [required-tokens/view + {:token "SNT" + :type :token + :amount 100}]) + (h/is-truthy (h/get-by-label-text :wallet-required-tokens))) + + (h/test "render collectible" + (render [required-tokens/view + {:type :collectible + :collectible-img-src (js/require "../resources/images/mock2/collectible.png") + :collectible-name "Diamond"}]) + (h/is-truthy (h/get-by-text "Diamond"))) + + (h/test "render token with correct amount & symbol" + (render [required-tokens/view + {:type :token + :token "ETH" + :amount 100}]) + (h/is-truthy (h/get-by-text "100 ETH")))) diff --git a/src/quo/components/wallet/required_tokens/style.cljs b/src/quo/components/wallet/required_tokens/style.cljs new file mode 100644 index 0000000000..b4c568dce7 --- /dev/null +++ b/src/quo/components/wallet/required_tokens/style.cljs @@ -0,0 +1,21 @@ +(ns quo.components.wallet.required-tokens.style + (:require [quo.foundations.colors :as colors])) + +(def container + {:align-items :center + :flex-direction :row}) + +(def collectible-img + {:width 14 + :height 14 + :border-radius 4}) + +(defn divider + [theme] + {:width 2 + :height 2 + :border-radius 1 + :margin-left 8 + :background-color (colors/theme-colors colors/neutral-40 + colors/neutral-50 + theme)}) diff --git a/src/quo/components/wallet/required_tokens/view.cljs b/src/quo/components/wallet/required_tokens/view.cljs new file mode 100644 index 0000000000..e1a8d6c496 --- /dev/null +++ b/src/quo/components/wallet/required_tokens/view.cljs @@ -0,0 +1,56 @@ +(ns quo.components.wallet.required-tokens.view + (:require [quo.components.markdown.text :as text] + [quo.components.utilities.token.view :as token] + [quo.components.wallet.required-tokens.style :as style] + quo.theme + [react-native.core :as rn] + [schema.core :as schema])) + +(def ?schema + [:=> + [:catn + [:props + [:map {:closed true} + [:type [:enum :token :collectible]] + [:amount {:optional true} [:maybe [:or :string :int]]] + [:token {:optional true} [:maybe :string]] + [:token-img-src {:optional true} [:maybe :schema.common/image-source]] + [:collectible-img-src {:optional true} :schema.common/image-source] + [:collectible-name {:optional true} [:maybe :string]] + [:divider? {:optional true} [:maybe :boolean]] + [:theme :schema.common/theme] + [:container-style {:optional true} [:maybe :map]]]]] + :any]) + +(defn- view-internal + [{:keys [type amount token token-img-src collectible-img-src collectible-name divider? theme + container-style]}] + [rn/view + {:style (merge style/container container-style) + :accessibility-label :wallet-required-tokens} + (case type + :token [token/view + (assoc (if token-img-src + {:image-source token-img-src} + {:token token}) + :size + 14)] + :collectible [rn/image + {:style style/collectible-img + :source collectible-img-src}] + nil) + [text/text + {:size :paragraph-2 + :weight :medium + :style {:margin-left 4}} + (case type + :token (str amount " " token) + :collectible collectible-name + nil)] + (when divider? + [rn/view + {:style (style/divider theme)}])]) + +(def view + (quo.theme/with-theme + (schema/instrument #'view-internal ?schema))) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index ed60897258..db5cc2edc0 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -155,6 +155,7 @@ quo.components.wallet.network-link.view quo.components.wallet.network-routing.view quo.components.wallet.progress-bar.view + quo.components.wallet.required-tokens.view quo.components.wallet.summary-info.view quo.components.wallet.token-input.view quo.components.wallet.transaction-progress.view @@ -403,6 +404,7 @@ (def network-bridge quo.components.wallet.network-bridge.view/view) (def network-routing quo.components.wallet.network-routing.view/view) (def progress-bar quo.components.wallet.progress-bar.view/view) +(def required-tokens quo.components.wallet.required-tokens.view/view) (def summary-info quo.components.wallet.summary-info.view/view) (def network-link quo.components.wallet.network-link.view/view) (def token-input quo.components.wallet.token-input.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index ca9beb8c58..bd3cb1cc1d 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -87,6 +87,7 @@ [quo.components.wallet.network-bridge.component-spec] [quo.components.wallet.network-routing.component-spec] [quo.components.wallet.progress-bar.component-spec] + [quo.components.wallet.required-tokens.component-spec] [quo.components.wallet.summary-info.component-spec] [quo.components.wallet.token-input.component-spec] [quo.components.wallet.transaction-progress.component-spec] diff --git a/src/schema/common.cljs b/src/schema/common.cljs index c3e9dc45bd..5b5fa57974 100644 --- a/src/schema/common.cljs +++ b/src/schema/common.cljs @@ -11,6 +11,12 @@ (def ^:private ?public-key [:re #"^0x04[0-9a-f]{128}$"]) +(def ^:private ?image-source + [:or + [:int] + [:map + [:uri [:maybe [:string]]]]]) + (def ^:private ?rpc-call [:sequential {:min 1} @@ -27,4 +33,5 @@ (registry/register ::theme ?theme) (registry/register ::customization-color ?customization-color) (registry/register ::public-key ?public-key) + (registry/register ::image-source ?image-source) (registry/register ::rpc-call ?rpc-call)) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 9980aca0ae..1bbf71f176 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -178,6 +178,7 @@ [status-im2.contexts.quo-preview.wallet.network-link :as network-link] [status-im2.contexts.quo-preview.wallet.network-routing :as network-routing] [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar] + [status-im2.contexts.quo-preview.wallet.required-tokens :as required-tokens] [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] [status-im2.contexts.quo-preview.wallet.transaction-progress :as transaction-progress] @@ -477,6 +478,8 @@ {:name :network-link :component network-link/view} {:name :network-routing :component network-routing/view} {:name :progress-bar :component progress-bar/view} + {:name :required-tokens + :component required-tokens/view} {:name :summary-info :component summary-info/view} {:name :token-input :component token-input/view} {:name :wallet-activity :component wallet-activity/view} diff --git a/src/status_im2/contexts/quo_preview/wallet/required_tokens.cljs b/src/status_im2/contexts/quo_preview/wallet/required_tokens.cljs new file mode 100644 index 0000000000..1480788176 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/required_tokens.cljs @@ -0,0 +1,47 @@ +(ns status-im2.contexts.quo-preview.wallet.required-tokens + (:require + [quo.core :as quo] + [reagent.core :as reagent] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:key :type + :type :select + :options [{:key :token} + {:key :collectible}]} + {:key :divider? + :type :boolean}]) + +(def token-descriptor + [{:key :amount + :type :text} + {:key :token + :type :select + :options [{:key "SNT"} + {:key "ETH"}]}]) + +(def collectible-descriptor + [{:key :collectible-name + :type :text}]) + +(defn view + [] + (let + [state + (reagent/atom + {:type :token + :collectible-img-src (resources/mock-images :collectible) + :collectible-name "Collectible name" + :token "SNT" + :amount "100" + :divider? false})] + (fn [] + [preview/preview-container + {:state state + :descriptor (concat descriptor + (case (:type @state) + :token token-descriptor + :collectible collectible-descriptor + nil))} + [quo/required-tokens @state]])))