Quo Wallet/Required-Tokens Component (#18164)

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

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

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

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

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)

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]

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

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}

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