status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-24 00:28:29 +00:00
Code Issues Projects Releases Wiki Activity

Wallet - Add malli spec to Quo Wallet components (batch 1) #18354 (#18707)

Browse Source 
* draft

* add account_card

* add account-origin

* add account_overview

* add account_permission

* add address_text

* add confirmation_progress

* wrapping up

* resolve comments and fix ci issues

* fix ci issues

* fix transaction_progress tests

* fix all tests

* fix lint issues
This commit is contained in:
mmilad75 2024-02-08 20:31:57 +03:30 committed by GitHub
parent 505f2fe624
commit 523a5809d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 506 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/quo/components/drawers/drawer_top/component_spec.cljs
View File

@ -3,97 +3,110 @@
[quo.core :as quo] [quo.core :as quo]
[test-helpers.component :as h])) [test-helpers.component :as h]))
(def ^:private theme :light)
(h/describe "drawer top tests" (h/describe "drawer top tests"
(h/test "component renders in default type" (h/test "component renders in default type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:type :default}]) :type :default}]
theme)
(h/is-truthy (h/get-by-text "Title"))) (h/is-truthy (h/get-by-text "Title")))
(h/test "component renders in default + description type" (h/test "component renders in default + description type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:type :default :type :default
:description "Description"}]) :description "Description"}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-text "Description"))) (h/is-truthy (h/get-by-text "Description")))
(h/test "component renders in info type" (h/test "component renders in info type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:type :info}]) :type :info}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-label-text :info-icon))) (h/is-truthy (h/get-by-label-text :info-icon)))
(h/test "component renders in info + description type" (h/test "component renders in info + description type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:description "Description" :description "Description"
:type :info}]) :type :info}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-text "Description")) (h/is-truthy (h/get-by-text "Description"))
(h/is-truthy (h/get-by-label-text :info-icon))) (h/is-truthy (h/get-by-label-text :info-icon)))
(h/test "component renders in context-tag type" (h/test "component renders in context-tag type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:type :context-tag :type :context-tag
:community-name "Coinbase"}]) :community-name "Coinbase"}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-label-text :context-tag-wrapper))) (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
(h/test "component renders in context-tag + button type" (h/test "component renders in context-tag + button type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:type :context-tag :type :context-tag
:button-icon :i/placeholder :button-icon :i/placeholder
:community-name "Coinbase"}]) :community-name "Coinbase"}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-label-text :button-icon)) (h/is-truthy (h/get-by-label-text :button-icon))
(h/is-truthy (h/get-by-label-text :context-tag-wrapper))) (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
(h/test "component renders in account type" (h/test "component renders in account type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:type :account :type :account
:account-avatar-emoji "🍿" :account-avatar-emoji "🍿"
:networks [{:name :ethereum :short-name "eth"}] :networks [{:name :ethereum :short-name "eth"}]
:description "0x62b...0a5" :description "0x62b...0a5"
:customization-color :purple}]) :customization-color :purple}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-text "0x62b...0a5")) (h/is-truthy (h/get-by-text "0x62b...0a5"))
(h/is-truthy (h/get-by-label-text :account-avatar))) (h/is-truthy (h/get-by-label-text :account-avatar)))
(h/test "component renders in keypair type when keycard? is false" (h/test "component renders in keypair type when keycard? is false"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:keycard? false :keycard? false
:icon-avatar :i/placeholder :icon-avatar :i/placeholder
:type :keypair}]) :type :keypair}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(-> (h/expect (h/get-by-translation-text :t/on-device)) (-> (h/expect (h/get-by-translation-text :t/on-device))
(.toBeTruthy))) (.toBeTruthy)))
(h/test "component renders in keypair type when keycard? is true" (h/test "component renders in keypair type when keycard? is true"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:keycard? true :keycard? true
:icon-avatar :i/placeholder :icon-avatar :i/placeholder
:type :keypair}]) :type :keypair}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(-> (h/expect (h/get-by-translation-text :t/on-keycard)) (-> (h/expect (h/get-by-translation-text :t/on-keycard))
(.toBeTruthy))) (.toBeTruthy)))
(h/test "component renders in default-keypair type" (h/test "component renders in default-keypair type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:title "Title" {:title "Title"
:description "0x62b...0a5" :description "0x62b...0a5"
:type :default-keypair}]) :type :default-keypair}]
theme)
(h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Title"))
(h/is-truthy (h/get-by-label-text :default-keypair-text))) (h/is-truthy (h/get-by-label-text :default-keypair-text)))
(h/test "component renders in label type" (h/test "component renders in label type"
(h/render [quo/drawer-top (h/render-with-theme-provider [quo/drawer-top
{:label "label" {:label "label"
:type :label}]) :type :label}]
theme)
(h/is-truthy (h/get-by-text "label")))) (h/is-truthy (h/get-by-text "label"))))

40
src/quo/components/list_items/account/component_spec.cljs
View File

@ -4,79 +4,83 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[test-helpers.component :as h])) [test-helpers.component :as h]))
(def ^:private theme :light)
(h/describe "List items: account" (h/describe "List items: account"
(h/test "default render'" (h/test "default render'"
(h/render [account/view]) (h/render-with-theme-provider [account/view] theme)
(h/is-truthy (h/query-by-label-text :container))) (h/is-truthy (h/query-by-label-text :container)))
(h/test "on-press-in changes state to :pressed" (h/test "on-press-in changes state to :pressed"
(h/render [account/view]) (h/render-with-theme-provider [account/view] theme)
(h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container) (h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/resolve-color :blue :light 5)}))) {:backgroundColor (colors/resolve-color :blue :light 5)})))
(h/test "on-press-in changes state to :pressed with blur? enabled" (h/test "on-press-in changes state to :pressed with blur? enabled"
(h/render [account/view {:blur? true}]) (h/render-with-theme-provider [account/view {:blur? true}] theme)
(h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container) (h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor colors/white-opa-5}))) {:backgroundColor colors/white-opa-5})))
(h/test "render with state :active" (h/test "render with state :active"
(h/render [account/view {:state :active}]) (h/render-with-theme-provider [account/view {:state :active}] theme)
(h/has-style (h/query-by-label-text :container) (h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/resolve-color :blue :light 10)})) {:backgroundColor (colors/resolve-color :blue :light 10)}))
(h/test "render with state :active and blur? enabled" (h/test "render with state :active and blur? enabled"
(h/render [account/view (h/render-with-theme-provider [account/view
{:blur? true {:blur? true
:state :active}]) :state :active}]
theme)
(h/has-style (h/query-by-label-text :container) (h/has-style (h/query-by-label-text :container)
{:backgroundColor colors/white-opa-10})) {:backgroundColor colors/white-opa-10}))
(h/test "render with state :selected" (h/test "render with state :selected"
(h/render [account/view {:state :selected}]) (h/render-with-theme-provider [account/view {:state :selected}] theme)
(h/is-truthy (h/query-by-label-text :check-icon))) (h/is-truthy (h/query-by-label-text :check-icon)))
(h/test "calls on-press" (h/test "calls on-press"
(let [on-press (h/mock-fn)] (let [on-press (h/mock-fn)]
(h/render [account/view {:on-press on-press}]) (h/render-with-theme-provider [account/view {:on-press on-press}] theme)
(h/fire-event :on-press (h/get-by-label-text :container)) (h/fire-event :on-press (h/get-by-label-text :container))
(h/was-called on-press))) (h/was-called on-press)))
(h/test "renders token props if type :tag" (h/test "renders token props if type :tag"
(h/render [account/view {:type :tag}]) (h/render-with-theme-provider [account/view {:type :tag}] theme)
(h/is-truthy (h/query-by-label-text :tag-container))) (h/is-truthy (h/query-by-label-text :tag-container)))
(h/test "renders keycard icon if title-icon is present" (h/test "renders keycard icon if title-icon is present"
(h/render [account/view {:title-icon :i/placeholder}]) (h/render-with-theme-provider [account/view {:title-icon :i/placeholder}] theme)
(h/is-truthy (h/query-by-label-text :title-icon))) (h/is-truthy (h/query-by-label-text :title-icon)))
(h/test "doesn't render keycard icon if title-icon is missing" (h/test "doesn't render keycard icon if title-icon is missing"
(h/render [account/view]) (h/render-with-theme-provider [account/view] theme)
(h/is-falsy (h/query-by-label-text :title-icon))) (h/is-falsy (h/query-by-label-text :title-icon)))
(h/test "renders balance container but not arrow icon if type :balance-neutral" (h/test "renders balance container but not arrow icon if type :balance-neutral"
(h/render [account/view {:type :balance-neutral}]) (h/render-with-theme-provider [account/view {:type :balance-neutral}] theme)
(h/is-truthy (h/query-by-label-text :balance-container)) (h/is-truthy (h/query-by-label-text :balance-container))
(h/is-falsy (h/query-by-label-text :arrow-icon))) (h/is-falsy (h/query-by-label-text :arrow-icon)))
(h/test "renders balance container and negative arrow icon if type :balance-negative" (h/test "renders balance container and negative arrow icon if type :balance-negative"
(h/render [account/view {:type :balance-negative}]) (h/render-with-theme-provider [account/view {:type :balance-negative}] theme)
(h/is-truthy (h/query-by-label-text :balance-container)) (h/is-truthy (h/query-by-label-text :balance-container))
(h/is-truthy (h/query-by-label-text :icon-negative)) (h/is-truthy (h/query-by-label-text :icon-negative))
(h/is-falsy (h/query-by-label-text :icon-positive))) (h/is-falsy (h/query-by-label-text :icon-positive)))
(h/test "renders balance container and positive arrow icon if type :balance-positive" (h/test "renders balance container and positive arrow icon if type :balance-positive"
(h/render [account/view {:type :balance-positive}]) (h/render-with-theme-provider [account/view {:type :balance-positive}] theme)
(h/is-truthy (h/query-by-label-text :balance-container)) (h/is-truthy (h/query-by-label-text :balance-container))
(h/is-falsy (h/query-by-label-text :icon-negative)) (h/is-falsy (h/query-by-label-text :icon-negative))
(h/is-truthy (h/query-by-label-text :icon-positive))) (h/is-truthy (h/query-by-label-text :icon-positive)))
(h/test "renders options button if type :action" (h/test "renders options button if type :action"
(let [on-options-press (h/mock-fn)] (let [on-options-press (h/mock-fn)]
(h/render [account/view (h/render-with-theme-provider [account/view
{:type :action {:type :action
:on-options-press on-options-press}]) :on-options-press on-options-press}]
theme)
(h/is-truthy (h/query-by-label-text :options-button)) (h/is-truthy (h/query-by-label-text :options-button))
(h/fire-event :on-press (h/get-by-label-text :options-button)) (h/fire-event :on-press (h/get-by-label-text :options-button))
(h/was-called on-options-press)))) (h/was-called on-options-press))))

19
src/quo/components/wallet/account_card/component_spec.cljs
View File

@ -5,6 +5,7 @@
(def username "Alisher account") (def username "Alisher account")
(def empty-username "Account 1") (def empty-username "Account 1")
(def ^:private theme :light)
(defn get-test-data (defn get-test-data
[{:keys [type watch-only? empty-type? loading? no-metrics?]}] [{:keys [type watch-only? empty-type? loading? no-metrics?]}]
@ -21,54 +22,54 @@
(h/describe "Account_card tests" (h/describe "Account_card tests"
(h/test "Renders Default" (h/test "Renders Default"
(let [data (get-test-data {:type :default})] (let [data (get-test-data {:type :default})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-truthy (h/get-by-text username)))) (h/is-truthy (h/get-by-text username))))
(h/test "Renders Watch-Only" (h/test "Renders Watch-Only"
(let [data (get-test-data {:type :watch-only (let [data (get-test-data {:type :watch-only
:watch-only? true})] :watch-only? true})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-truthy (h/get-by-text username)))) (h/is-truthy (h/get-by-text username))))
(h/test "Renders Add-Account" (h/test "Renders Add-Account"
(let [data {:type :add-account}] (let [data {:type :add-account}]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-truthy (h/get-by-label-text :add-account)))) (h/is-truthy (h/get-by-label-text :add-account))))
(h/test "Renders Empty" (h/test "Renders Empty"
(let [data (get-test-data {:type :empty (let [data (get-test-data {:type :empty
:empty-type? true})] :empty-type? true})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-truthy (h/get-by-text empty-username)))) (h/is-truthy (h/get-by-text empty-username))))
(h/test "Renders Missing Keypair" (h/test "Renders Missing Keypair"
(let [data (get-test-data {:type :missing-keypair})] (let [data (get-test-data {:type :missing-keypair})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-truthy (h/get-by-text username)))) (h/is-truthy (h/get-by-text username))))
(h/test "Add account on press fires correctly" (h/test "Add account on press fires correctly"
(let [on-press (h/mock-fn) (let [on-press (h/mock-fn)
data {:type :add-account data {:type :add-account
:on-press on-press}] :on-press on-press}]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/fire-event :on-press (h/get-by-label-text :add-account)) (h/fire-event :on-press (h/get-by-label-text :add-account))
(h/was-called on-press))) (h/was-called on-press)))
(h/test "Renders component without metrics" (h/test "Renders component without metrics"
(let [data (get-test-data {:type :default (let [data (get-test-data {:type :default
:no-metrics? true})] :no-metrics? true})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-falsy (h/query-by-label-text :metrics)))) (h/is-falsy (h/query-by-label-text :metrics))))
(h/test "Renders loading state" (h/test "Renders loading state"
(let [data (get-test-data {:type :default (let [data (get-test-data {:type :default
:loading? true})] :loading? true})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-truthy (h/get-by-label-text :loading)))) (h/is-truthy (h/get-by-label-text :loading))))
(h/test "Renders loading state without metrics" (h/test "Renders loading state without metrics"
(let [data (get-test-data {:type :default (let [data (get-test-data {:type :default
:no-metrics? true :no-metrics? true
:loading? true})] :loading? true})]
(h/render [account-card/view data]) (h/render-with-theme-provider [account-card/view data] theme)
(h/is-falsy (h/query-by-label-text :metrics))))) (h/is-falsy (h/query-by-label-text :metrics)))))

33
src/quo/components/wallet/account_card/schema.cljs Normal file
View File

@ -0,0 +1,33 @@
(ns quo.components.wallet.account-card.schema)
(def ^:private ?base
[:map
[:type {:optional true} [:enum :default :watch-only :add-account :empty :missing-keypair]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:theme :schema.common/theme]
[:metrics? {:optional true} [:maybe :boolean]]
[:on-press {:optional true} [:maybe fn?]]])
(def ^:private ?amount
[:map
[:amount {:optional true} [:maybe :string]]])
(def ^:private ?card
[:map
[:balance {:optional true} [:maybe :string]]
[:loading? {:optional true} [:maybe :boolean]]
[:name {:optional true} [:maybe :string]]
[:percentage-value {:optional true} [:maybe :string]]
[:emoji {:optional true} [:maybe :string]]])
(def ?schema
[:=>
[:catn
[:props
[:multi {:dispatch :type}
[:default [:merge ?base ?amount ?card]]
[:watch-only [:merge ?base ?amount ?card]]
[:missing-keypair [:merge ?base ?amount ?card]]
[:empty [:merge ?base ?card]]
[:add-account ?base]]]]
:any])

8
src/quo/components/wallet/account_card/view.cljs
View File

@ -4,13 +4,15 @@
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.wallet.account-card.properties :as properties] [quo.components.wallet.account-card.properties :as properties]
[quo.components.wallet.account-card.schema :as component-schema]
[quo.components.wallet.account-card.style :as style] [quo.components.wallet.account-card.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.foundations.customization-colors :as customization-colors] [quo.foundations.customization-colors :as customization-colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient] [react-native.linear-gradient :as linear-gradient]
[reagent.core :as reagent])) [reagent.core :as reagent]
[schema.core :as schema]))
(defn- loading-view (defn- loading-view
[{:keys [customization-color type theme metrics?]}] [{:keys [customization-color type theme metrics?]}]
@ -183,4 +185,6 @@
:add-account [add-account-view props] :add-account [add-account-view props]
nil)) nil))
(def view (quo.theme/with-theme view-internal)) (def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

116
src/quo/components/wallet/account_origin/component_spec.cljs
View File

@ -3,92 +3,104 @@
[quo.core :as quo] [quo.core :as quo]
[test-helpers.component :as h])) [test-helpers.component :as h]))
(def ^:private theme :light)
(h/describe "account origin tests" (h/describe "account origin tests"
(h/test "component renders" (h/test "component renders"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(-> (h/expect (h/get-by-translation-text :t/origin)) (-> (h/expect (h/get-by-translation-text :t/origin))
(.toBeTruthy))) (.toBeTruthy)))
(h/test "recovery phrase icon is visible when :type is :recovery-phrase" (h/test "recovery phrase icon is visible when :type is :recovery-phrase"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(h/is-truthy (h/get-by-label-text :recovery-phrase-icon))) (h/is-truthy (h/get-by-label-text :recovery-phrase-icon)))
(h/test "recovery phrase icon is visible when :type is :recovery-phrase" (h/test "recovery phrase icon is visible when :type is :recovery-phrase"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(h/is-truthy (h/get-by-label-text :recovery-phrase-icon))) (h/is-truthy (h/get-by-label-text :recovery-phrase-icon)))
(h/test "private-key-icon is visible when :type is :private-key" (h/test "private-key-icon is visible when :type is :private-key"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :private-key {:type :private-key
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(h/is-truthy (h/get-by-label-text :private-key-icon))) (h/is-truthy (h/get-by-label-text :private-key-icon)))
(h/test "derivation-path-icon is visible when :type is :default-keypair" (h/test "derivation-path-icon is visible when :type is :default-keypair"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :default-keypair {:type :default-keypair
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(h/is-truthy (h/get-by-label-text :derivation-path-icon))) (h/is-truthy (h/get-by-label-text :derivation-path-icon)))
(h/test "derivation-path-icon is visible when :type is :recovery-phrase" (h/test "derivation-path-icon is visible when :type is :recovery-phrase"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(h/is-truthy (h/get-by-label-text :derivation-path-icon))) (h/is-truthy (h/get-by-label-text :derivation-path-icon)))
(h/test "on-device text is visible when :stored is :on-device" (h/test "on-device text is visible when :stored is :on-device"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-device :stored :on-device
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(-> (h/expect (h/get-by-translation-text :t/on-device)) (-> (h/expect (h/get-by-translation-text :t/on-device))
(.toBeTruthy))) (.toBeTruthy)))
(h/test "on-keycard text is visible when :stored is :on-keycard" (h/test "on-keycard text is visible when :stored is :on-keycard"
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}]) :user-name "Test Name"}]
theme)
(-> (h/expect (h/get-by-translation-text :t/on-keycard)) (-> (h/expect (h/get-by-translation-text :t/on-keycard))
(.toBeTruthy))) (.toBeTruthy)))
(h/test "on-press is called when :type is :recovery-phrase" (h/test "on-press is called when :type is :recovery-phrase"
(let [on-press (h/mock-fn)] (let [on-press (h/mock-fn)]
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :recovery-phrase {:type :recovery-phrase
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name" :user-name "Test Name"
:on-press on-press}]) :on-press on-press}]
theme)
(h/fire-event :press (h/query-by-label-text :derivation-path-button)) (h/fire-event :press (h/query-by-label-text :derivation-path-button))
(h/was-called on-press))) (h/was-called on-press)))
(h/test "on-press is called when :type is :default-keypair" (h/test "on-press is called when :type is :default-keypair"
(let [on-press (h/mock-fn)] (let [on-press (h/mock-fn)]
(h/render [quo/account-origin (h/render-with-theme-provider [quo/account-origin
{:type :default-keypair {:type :default-keypair
:stored :on-keycard :stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2" :derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name" :user-name "Test Name"
:on-press on-press}]) :on-press on-press}]
theme)
(h/fire-event :press (h/query-by-label-text :derivation-path-button)) (h/fire-event :press (h/query-by-label-text :derivation-path-button))
(h/was-called on-press)))) (h/was-called on-press))))

30
src/quo/components/wallet/account_origin/schema.cljs Normal file
View File

@ -0,0 +1,30 @@
(ns quo.components.wallet.account-origin.schema)
(def ^:private ?base
[:map
[:type {:optional true} [:enum :default-keypair :recovery-phrase :private-key]]
[:stored {:optional true} [:enum :on-device :on-keycard]]
[:theme :schema.common/theme]])
(def ^:private ?default-keypair
[:map
[:user-name {:optional true} [:maybe :string]]
[:profile-picture {:optional true} [:maybe [:or :schema.common/image-source :string]]]
[:derivation-path {:optional true} [:maybe :string]]
[:on-press {:optional true} [:maybe fn?]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]])
(def ^:private ?recovery-phrase
[:map
[:derivation-path {:optional true} [:maybe :string]]
[:on-press {:optional true} [:maybe fn?]]])
(def ?schema
[:=>
[:catn
[:props
[:multi {:dispatch :type}
[:default-keypair [:merge ?base ?default-keypair]]
[:recovery-phrase [:merge ?base ?recovery-phrase]]
[:private-key ?base]]]]
:any])

15
src/quo/components/wallet/account_origin/view.cljs
View File

@ -3,10 +3,12 @@
[quo.components.avatars.user-avatar.view :as user-avatar] [quo.components.avatars.user-avatar.view :as user-avatar]
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.wallet.account-origin.schema :as component-schema]
[quo.components.wallet.account-origin.style :as style] [quo.components.wallet.account-origin.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- row-title (defn- row-title
@ -107,14 +109,5 @@
[card-view theme derivation-path secondary-color on-press])])) [card-view theme derivation-path secondary-color on-press])]))
(def view (def view
"Create an account-origin UI component. (quo.theme/with-theme
| key | values | (schema/instrument #'view-internal component-schema/?schema)))
| ----------------------|------------------------------------------------|
| :type | :default-keypair :recovery-phrase :private-key
| :stored | :on-device :on-keycard
| :profile-picture | image source
| :customization-color | profile color
| :derivation-path | string
| :user-name | string
| :on-press | function"
(quo.theme/with-theme view-internal))

20
src/quo/components/wallet/account_overview/schema.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns quo.components.wallet.account-overview.schema)
(def ?schema
[:=>
[:catn
[:props
[:map
[:account-name {:optional true} [:maybe :string]]
[:currency-change {:optional true} [:maybe :string]]
[:current-value {:optional true} [:maybe :string]]
[:percentage-change {:optional true} [:maybe :string]]
[:time-frame-string {:optional true} [:maybe :string]]
[:time-frame-to-string {:optional true} [:maybe :string]]
[:state {:optional true} [:enum :default :loading]]
[:metrics {:optional true} [:enum :negative :positive]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:account {:optional true} [:enum :default :watched-address]]
[:time-frame {:optional true}
[:enum :one-week :one-month :three-months :one-year :all-time :custom]]]]]
:any])

17
src/quo/components/wallet/account_overview/view.cljs
View File

@ -2,10 +2,12 @@
(:require (:require
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.wallet.account-overview.schema :as component-schema]
[quo.components.wallet.account-overview.style :as style] [quo.components.wallet.account-overview.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- loading-state (defn- loading-state
@ -129,16 +131,5 @@
[numeric-changes percentage-change currency-change customization-color theme up?])]])])) [numeric-changes percentage-change currency-change customization-color theme up?])]])]))
(def view (def view
"Create a account-overview UI component. (quo.theme/with-theme
| key | description | (schema/instrument #'view-internal component-schema/?schema)))
| -------------|-------------|
| `:account-name` | A value representing the account name (default `nil`)
| `:account` | A value that represents if the account is a `:watched-address` or a `:default` account. (default `nil`)
| `:time-frame` | A value that represents the type of the timeframe, Can be from a preset of time frames. `[:1-week :1-month :3-months :1-year :custom]` (default `nil`) if custom is set, We expect a start time and if there's a space between two times that are in `time-frame-string` we'll split them with an arrow to the right icon
| `:loading?` | A value that indicates that component is loading data. (default `nil`)
| `:metrics` | A value that indicates if the account value have increased can be `:positive` or `:negative` (default `nil`)
| `:time-frame-string` | A value representing time frame string. (default `nil`)
| `:current-value` | A value representing the current value of the selected account. (default `nil`)
| `:currency-change` | A value representing the change of the value of the selected account in the selected currency. (default `nil`)
| `:percentage-change` | A value representing the change of the value of the selected account in percentage relative to it's previous value. (default `nil`)"
(quo.theme/with-theme view-internal))

22
src/quo/components/wallet/account_permissions/schema.cljs Normal file
View File

@ -0,0 +1,22 @@
(ns quo.components.wallet.account-permissions.schema
(:require [quo.components.wallet.required-tokens.view :as required-tokens]))
(def ?schema
[:=>
[:catn
[:props
[:map
[:account
[:map
[:name [:maybe :string]]
[:address [:maybe :string]]
[:emoji [:maybe :string]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]
[:token-details {:optional true} [:maybe [:vector required-tokens/?schema]]]
[:keycard? {:optional true} [:maybe :boolean]]
[:checked? {:optional true} [:maybe :boolean]]
[:disabled? {:optional true} [:maybe :boolean]]
[:on-change {:optional true} [:maybe fn?]]
[:container-style {:optional true} [:maybe :map]]
[:theme :schema.common/theme]]]]
:any])

23
src/quo/components/wallet/account_permissions/view.cljs
View File

@ -4,6 +4,7 @@
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.selectors.selectors.view :as selectors] [quo.components.selectors.selectors.view :as selectors]
[quo.components.wallet.account-permissions.schema :as component-schema]
[quo.components.wallet.account-permissions.style :as style] [quo.components.wallet.account-permissions.style :as style]
[quo.components.wallet.address-text.view :as address-text] [quo.components.wallet.address-text.view :as address-text]
[quo.components.wallet.required-tokens.view :as required-tokens] [quo.components.wallet.required-tokens.view :as required-tokens]
@ -13,26 +14,6 @@
[schema.core :as schema] [schema.core :as schema]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:account
[:map {:closed true}
[:name [:maybe :string]]
[:address [:maybe :string]]
[:emoji [:maybe :string]]
[:customization-color [:maybe [:or :string :keyword]]]]]
[:token-details {:optional true} [:maybe [:sequential required-tokens/?schema]]]
[:keycard? {:optional true} [:maybe :boolean]]
[:checked? {:optional true} [:maybe :boolean]]
[:disabled? {:optional true} [:maybe :boolean]]
[:on-change {:optional true} [:maybe fn?]]
[:container-style {:optional true} [:maybe :map]]
[:theme :schema.common/theme]]]]
:any])
(defn- token-details-section (defn- token-details-section
[tokens] [tokens]
(when tokens (when tokens
@ -95,4 +76,4 @@
(def view (def view
(quo.theme/with-theme (quo.theme/with-theme
(schema/instrument #'view-internal ?schema))) (schema/instrument #'view-internal component-schema/?schema)))

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

@ -0,0 +1,14 @@
(ns quo.components.wallet.address-text.schema)
(def ?schema
[:=>
[:catn
[:props
[:map
[:address {:optional true} [:maybe :string]]
[:blur? {:optional true} [:maybe :boolean]]
[:format {:optional true} [:enum :short :long]]
[:theme :schema.common/theme]
[:networks {:optional true}
[:maybe [:sequential [:map [:name :keyword] [:short-name :string]]]]]]]]
:any])

6
src/quo/components/wallet/address_text/view.cljs
View File

@ -1,8 +1,10 @@
(ns quo.components.wallet.address-text.view (ns quo.components.wallet.address-text.view
(:require [quo.components.markdown.text :as text] (:require [quo.components.markdown.text :as text]
[quo.components.wallet.address-text.schema :as component-schema]
[quo.components.wallet.address-text.style :as style] [quo.components.wallet.address-text.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme] [quo.theme]
[schema.core :as schema]
[utils.address :as utils])) [utils.address :as utils]))
(defn- colored-network-text (defn- colored-network-text
@ -28,4 +30,6 @@
(into [text/text] network-text-xf $) (into [text/text] network-text-xf $)
(conj $ address-text)))) (conj $ address-text))))
(def view (quo.theme/with-theme view-internal)) (def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

90
src/quo/components/wallet/confirmation_progress/component_spec.cljs
View File

@ -1,99 +1,111 @@
(ns quo.components.wallet.confirmation-progress.component-spec (ns quo.components.wallet.confirmation-progress.component-spec
(:require [quo.core :as quo] (:require [quo.core :as quo]
[reagent.core :as reagent]
[test-helpers.component :as h])) [test-helpers.component :as h]))
(def ^:private theme :light)
(defn- get-test-data (defn- get-test-data
[{:keys [state network] [{:keys [state network]
:or {state :pending network :mainnet}}] :or {state :pending network :mainnet}}]
{:counter (reagent/atom 0) {:counter 0
:total-box 85 :total-box 85
:progress-value "10" :progress-value 10
:network network :network network
:state state :state state
:customization-color :blue}) :customization-color :blue})
(h/describe "Confirmation Progress" (h/describe "Confirmation Progress"
(h/test "component renders when state is sending and network is optimism" (h/test "component renders when state is sending and network is optimism"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :sending (get-test-data {:state :sending
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is confirmed and network is optimism" (h/test "component renders when state is confirmed and network is optimism"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :confirmed (get-test-data {:state :confirmed
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is finalising and network is optimism" (h/test "component renders when state is finalising and network is optimism"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :finalising (get-test-data {:state :finalising
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is finalized and network is optimism" (h/test "component renders when state is finalized and network is optimism"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :finalized (get-test-data {:state :finalized
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is error and network is optimism" (h/test "component renders when state is error and network is optimism"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :error (get-test-data {:state :error
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is sending and network is arbitrum" (h/test "component renders when state is sending and network is arbitrum"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :sending (get-test-data {:state :sending
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is confirmed and network is arbitrum" (h/test "component renders when state is confirmed and network is arbitrum"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :confirmed (get-test-data {:state :confirmed
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is finalising and network is arbitrum" (h/test "component renders when state is finalising and network is arbitrum"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :finalising (get-test-data {:state :finalising
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is finalized and network is arbitrum" (h/test "component renders when state is finalized and network is arbitrum"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :finalized (get-test-data {:state :finalized
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is error and network is arbitrum" (h/test "component renders when state is error and network is arbitrum"
(h/render [quo/confirmation-propgress (h/render-with-theme-provider [quo/confirmation-propgress
(get-test-data {:state :error (get-test-data {:state :error
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :progress-box))) (h/is-truthy (h/get-by-label-text :progress-box)))
(h/test "component renders when state is pending and network is mainnet" (h/test "component renders when state is pending and network is mainnet"
(h/render [quo/confirmation-propgress (get-test-data {})]) (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {})] theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
(h/test "component renders when state is sending and network is mainnet" (h/test "component renders when state is sending and network is mainnet"
(h/render [quo/confirmation-propgress (get-test-data {:state :sending})]) (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :sending})] theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
(h/test "component renders when state is confirmed and network is mainnet" (h/test "component renders when state is confirmed and network is mainnet"
(h/render [quo/confirmation-propgress (get-test-data {:state :confirmed})]) (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :confirmed})] theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
(h/test "component renders when state is finalising and network is mainnet" (h/test "component renders when state is finalising and network is mainnet"
(h/render [quo/confirmation-propgress (get-test-data {:state :finalising})]) (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :finalising})]
theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
(h/test "component renders when state is finalized and network is mainnet" (h/test "component renders when state is finalized and network is mainnet"
(h/render [quo/confirmation-propgress (get-test-data {:state :finalized})]) (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :finalized})] theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
(h/test "component renders when state is error and network is mainnet" (h/test "component renders when state is error and network is mainnet"
(h/render [quo/confirmation-propgress (get-test-data {:state :error})]) (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :error})] theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box)))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box))))

15
src/quo/components/wallet/confirmation_progress/schema.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns quo.components.wallet.confirmation-progress.schema)
(def ?schema
[:=>
[:catn
[:props
[:map
[:total-box {:optional true} [:maybe :int]]
[:counter {:optional true} [:maybe :int]]
[:progress-value {:optional true} [:maybe :int]]
[:network {:optional true} [:enum :mainnet :optimism :arbitrum]]
[:state {:optional true} [:enum :pending :sending :confirmed :finalising :finalized :error]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:theme :schema.common/theme]]]]
:any])

10
src/quo/components/wallet/confirmation_progress/view.cljs
View File

@ -1,8 +1,10 @@
(ns quo.components.wallet.confirmation-progress.view (ns quo.components.wallet.confirmation-progress.view
(:require [quo.components.wallet.confirmation-progress.style :as style] (:require [quo.components.wallet.confirmation-progress.schema :as component-schema]
[quo.components.wallet.confirmation-progress.style :as style]
[quo.components.wallet.progress-bar.view :as progress-box] [quo.components.wallet.progress-bar.view :as progress-box]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]
[schema.core :as schema]))
(def ^:private max-progress 100) (def ^:private max-progress 100)
(def ^:private min-progress 0) (def ^:private min-progress 0)
@ -66,4 +68,6 @@
(:arbitrum :optimism) [progress-boxes-sidenet props] (:arbitrum :optimism) [progress-boxes-sidenet props]
nil)) nil))
(def view (quo.theme/with-theme view-internal)) (def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

62
src/quo/components/wallet/keypair/component_spec.cljs
View File

@ -3,6 +3,8 @@
[quo.components.wallet.keypair.view :as keypair] [quo.components.wallet.keypair.view :as keypair]
[test-helpers.component :as h])) [test-helpers.component :as h]))
(def ^:private theme :light)
(def accounts (def accounts
[{:account-props {:customization-color :turquoise [{:account-props {:customization-color :turquoise
:size 32 :size 32
@ -23,41 +25,45 @@
(h/describe "Wallet: Keypair" (h/describe "Wallet: Keypair"
(h/test "Default keypair title renders" (h/test "Default keypair title renders"
(h/render [keypair/view (h/render-with-theme-provider [keypair/view
{:accounts accounts {:accounts accounts
:customization-color :blue :customization-color :blue
:type :default-keypair :type :default-keypair
:stored :on-device :stored :on-device
:action :selector :action :selector
:details default-details}]) :details default-details}]
theme)
(h/is-truthy (h/get-by-label-text :title))) (h/is-truthy (h/get-by-label-text :title)))
(h/test "On device renders" (h/test "On device renders"
(h/render [keypair/view (h/render-with-theme-provider [keypair/view
{:accounts accounts {:accounts accounts
:customization-color :blue :customization-color :blue
:type :other :type :other
:stored :on-device :stored :on-device
:action :selector :action :selector
:details other-details}]) :details other-details}]
theme)
(h/is-truthy (h/get-by-label-text :details))) (h/is-truthy (h/get-by-label-text :details)))
(h/test "Selector action renders" (h/test "Selector action renders"
(h/render [keypair/view (h/render-with-theme-provider [keypair/view
{:accounts accounts {:accounts accounts
:customization-color :blue :customization-color :blue
:type :other :type :other
:stored :on-keycard :stored :on-keycard
:action :selector :action :selector
:details other-details}]) :details other-details}]
theme)
(h/is-truthy (h/get-by-label-text :radio-on))) (h/is-truthy (h/get-by-label-text :radio-on)))
(h/test "Options action renders" (h/test "Options action renders"
(h/render [keypair/view (h/render-with-theme-provider [keypair/view
{:accounts accounts {:accounts accounts
:customization-color :blue :customization-color :blue
:type :other :type :other
:stored :on-keycard :stored :on-keycard
:action :options :action :options
:details other-details}]) :details other-details}]
theme)
(h/is-truthy (h/get-by-label-text :options-button)))) (h/is-truthy (h/get-by-label-text :options-button))))

167
src/quo/components/wallet/transaction_progress/component_spec.cljs
View File

@ -1,200 +1,225 @@
(ns quo.components.wallet.transaction-progress.component-spec (ns quo.components.wallet.transaction-progress.component-spec
(:require [quo.core :as quo] (:require [quo.core :as quo]
[reagent.core :as reagent]
[test-helpers.component :as h])) [test-helpers.component :as h]))
(def ^:private theme :light)
(defn- get-test-data (defn- get-test-data
[{:keys [state network] [{:keys [state network]
:or {state :pending network :mainnet}}] :or {state :pending network :mainnet}}]
{:title "Title" {:title "Title"
:tag-name "Doodle" :tag-name "Doodle"
:tag-number "120" :tag-number 120
:network network :network network
:customization-color :blue :customization-color :blue
:networks [{:network :mainnet :networks [{:network :mainnet
:state state :state state
:counter (reagent/atom 0) :counter 0
:total-box 85 :total-box 85
:progress 30 :progress 30
:epoch-number "123"} :epoch-number "123"}
{:network :optimism {:network :optimism
:state state :state state
:progress "50" :progress 50
:epoch-number "123"} :epoch-number "123"}
{:network :arbitrum {:network :arbitrum
:state state :state state
:progress "30" :progress 30
:epoch-number "123"}] :epoch-number "123"}]
:on-press (fn [] :on-press (fn []
(js/alert "Transaction progress item pressed"))}) (js/alert "Transaction progress item pressed"))})
(h/describe "Transaction Progress" (h/describe "Transaction Progress"
(h/test "component renders without props" (h/test "component renders without props"
(h/render [quo/transaction-progress]) (h/render-with-theme-provider [quo/transaction-progress] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is pending and network is mainnet" (h/test "component renders when state is pending and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is sending and network is optimism-arbitrum" (h/test "component renders when state is sending and network is optimism-arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :sending (get-test-data {:state :sending
:network :optimism-arbitrum})]) :network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is confirmed and network is optimism-arbitrum" (h/test "component renders when state is confirmed and network is optimism-arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :confirmed (get-test-data {:state :confirmed
:network :optimism-arbitrum})]) :network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalising and network is optimism-arbitrum" (h/test "component renders when state is finalising and network is optimism-arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :finalising (get-test-data {:state :finalising
:network :optimism-arbitrum})]) :network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalized and network is optimism-arbitrum" (h/test "component renders when state is finalized and network is optimism-arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :finalized (get-test-data {:state :finalized
:network :optimism-arbitrum})]) :network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is error and network is optimism-arbitrum" (h/test "component renders when state is error and network is optimism-arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :error (get-test-data {:state :error
:network :optimism-arbitrum})]) :network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is sending and network is optimism" (h/test "component renders when state is sending and network is optimism"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :sending (get-test-data {:state :sending
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is confirmed and network is optimism" (h/test "component renders when state is confirmed and network is optimism"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :confirmed (get-test-data {:state :confirmed
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalising and network is optimism" (h/test "component renders when state is finalising and network is optimism"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :finalising (get-test-data {:state :finalising
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalized and network is optimism" (h/test "component renders when state is finalized and network is optimism"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :finalized (get-test-data {:state :finalized
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is error and network is optimism" (h/test "component renders when state is error and network is optimism"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :error (get-test-data {:state :error
:network :optimism})]) :network :optimism})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is sending and network is arbitrum" (h/test "component renders when state is sending and network is arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :sending (get-test-data {:state :sending
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is confirmed and network is arbitrum" (h/test "component renders when state is confirmed and network is arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :confirmed (get-test-data {:state :confirmed
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalising and network is arbitrum" (h/test "component renders when state is finalising and network is arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :finalising (get-test-data {:state :finalising
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalized and network is arbitrum" (h/test "component renders when state is finalized and network is arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :finalized (get-test-data {:state :finalized
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is error and network is arbitrum" (h/test "component renders when state is error and network is arbitrum"
(h/render [quo/transaction-progress (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:state :error (get-test-data {:state :error
:network :arbitrum})]) :network :arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is pending and network is mainnet" (h/test "component renders when state is pending and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is sending and network is mainnet" (h/test "component renders when state is sending and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {:state :sending})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :sending})] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is confirmed and network is mainnet" (h/test "component renders when state is confirmed and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {:state :confirmed})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :confirmed})] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalising and network is mainnet" (h/test "component renders when state is finalising and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {:state :finalising})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :finalising})] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is finalized and network is mainnet" (h/test "component renders when state is finalized and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {:state :finalized})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :finalized})] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "component renders when state is error and network is mainnet" (h/test "component renders when state is error and network is mainnet"
(h/render [quo/transaction-progress (get-test-data {:state :error})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :error})] theme)
(h/is-truthy (h/get-by-label-text :transaction-progress))) (h/is-truthy (h/get-by-label-text :transaction-progress)))
(h/test "mainnet progress box is visible network is mainnet" (h/test "mainnet progress box is visible network is mainnet"
(h/render [quo/transaction-progress (get-test-data {})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))) (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
(h/test "arbitrum-optimism progress box is visible network is optimism-arbitrum" (h/test "arbitrum-optimism progress box is visible network is optimism-arbitrum"
(h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-all-by-label-text :progress-box))) (h/is-truthy (h/get-all-by-label-text :progress-box)))
(h/test "arbitrum progress box is visible network is arbitrum" (h/test "arbitrum progress box is visible network is arbitrum"
(h/render [quo/transaction-progress (get-test-data {:network :arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
(h/is-truthy (h/get-all-by-label-text :progress-box))) (h/is-truthy (h/get-all-by-label-text :progress-box)))
(h/test "optimism progress box is visible network is optimism" (h/test "optimism progress box is visible network is optimism"
(h/render [quo/transaction-progress (get-test-data {:network :optimism})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
(h/is-truthy (h/get-all-by-label-text :progress-box))) (h/is-truthy (h/get-all-by-label-text :progress-box)))
(h/test "title is visible network is optimism-arbitrum" (h/test "title is visible network is optimism-arbitrum"
(h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-text "Title"))) (h/is-truthy (h/get-by-text "Title")))
(h/test "title is visible network is mainnet" (h/test "title is visible network is mainnet"
(h/render [quo/transaction-progress (get-test-data {})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
(h/is-truthy (h/get-by-text "Title"))) (h/is-truthy (h/get-by-text "Title")))
(h/test "title is visible network is optimism" (h/test "title is visible network is optimism"
(h/render [quo/transaction-progress (get-test-data {:network :optimism})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
(h/is-truthy (h/get-by-text "Title"))) (h/is-truthy (h/get-by-text "Title")))
(h/test "title is visible network is arbitrum" (h/test "title is visible network is arbitrum"
(h/render [quo/transaction-progress (get-test-data {:network :arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
(h/is-truthy (h/get-by-text "Title"))) (h/is-truthy (h/get-by-text "Title")))
(h/test "context tag is visible network is optimism-arbitrum" (h/test "context tag is visible network is optimism-arbitrum"
(h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress
(get-test-data {:network :optimism-arbitrum})]
theme)
(h/is-truthy (h/get-by-label-text :context-tag))) (h/is-truthy (h/get-by-label-text :context-tag)))
(h/test "context tag is visible network is mainnet" (h/test "context tag is visible network is mainnet"
(h/render [quo/transaction-progress (get-test-data {})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
(h/is-truthy (h/get-by-label-text :context-tag))) (h/is-truthy (h/get-by-label-text :context-tag)))
(h/test "context tag is visible network is optimism" (h/test "context tag is visible network is optimism"
(h/render [quo/transaction-progress (get-test-data {:network :optimism})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
(h/is-truthy (h/get-by-label-text :context-tag))) (h/is-truthy (h/get-by-label-text :context-tag)))
(h/test "context tag is visible network is optimism" (h/test "context tag is visible network is optimism"
(h/render [quo/transaction-progress (get-test-data {:network :arbitrum})]) (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
(h/is-truthy (h/get-by-label-text :context-tag)))) (h/is-truthy (h/get-by-label-text :context-tag)))
)

4
src/status_im/contexts/preview/quo/wallet/confirmation_progress.cljs
View File

@ -6,7 +6,7 @@
[status-im.contexts.preview.quo.preview :as preview])) [status-im.contexts.preview.quo.preview :as preview]))
(def descriptor (def descriptor
[{:type :text [{:type :number
:key :progress-value} :key :progress-value}
{:type :select {:type :select
:key :network :key :network
@ -78,7 +78,7 @@
[] []
(let [state (reagent/atom (let [state (reagent/atom
{:total-box total-box {:total-box total-box
:progress-value "10" :progress-value 10
:network :mainnet :network :mainnet
:state :pending :state :pending
:customization-color :blue})] :customization-color :blue})]

8
src/status_im/contexts/preview/quo/wallet/transaction_progress.cljs
View File

@ -19,9 +19,9 @@
:key :epoch-number-arbitrum} :key :epoch-number-arbitrum}
{:type :text {:type :text
:key :tag-number} :key :tag-number}
{:type :text {:type :number
:key :optimism-progress-percentage} :key :optimism-progress-percentage}
{:type :text {:type :number
:key :arbitrum-progress-percentage} :key :arbitrum-progress-percentage}
{:type :select {:type :select
:key :network :key :network
@ -142,8 +142,8 @@
:epoch-number-mainnet "181,329" :epoch-number-mainnet "181,329"
:epoch-number-optimism "181,329" :epoch-number-optimism "181,329"
:epoch-number-arbitrum "181,329" :epoch-number-arbitrum "181,329"
:optimism-progress-percentage "10" :optimism-progress-percentage 10
:arbitrum-progress-percentage "10" :arbitrum-progress-percentage 10
:network :mainnet :network :mainnet
:state-mainnet :pending :state-mainnet :pending
:state-arbitrum :pending :state-arbitrum :pending

2
src/status_im/contexts/wallet/home/view.cljs
View File

@ -60,7 +60,7 @@
:data cards :data cards
:horizontal true :horizontal true
:separator [rn/view {:style style/separator}] :separator [rn/view {:style style/separator}]
:render-fn quo/account-card :render-fn (fn [item] [quo/account-card item])
:shows-horizontal-scroll-indicator false}] :shows-horizontal-scroll-indicator false}]
[quo/tabs [quo/tabs
{:style style/tabs {:style style/tabs