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

Quo Wallet/Required-Tokens Component (#18164)

This commit is contained in:
Ajay Sivan 2023-12-15 13:24:42 +05:30 committed by GitHub
parent 6f3bf98e83
commit 31dea1ca13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 168 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/utilities/token/view.cljs
View File

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

30
src/quo/components/wallet/required_tokens/component_spec.cljs Normal file
View File

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

21
src/quo/components/wallet/required_tokens/style.cljs Normal file
View File

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

56
src/quo/components/wallet/required_tokens/view.cljs Normal file
View File

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

2
src/quo/core.cljs
View File

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

1
src/quo/core_spec.cljs
View File

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

7
src/schema/common.cljs
View File

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

3
src/status_im2/contexts/quo_preview/main.cljs
View File

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

47
src/status_im2/contexts/quo_preview/wallet/required_tokens.cljs Normal file
View File

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