From 233d1b3261f76067c93e51b84acbd1a9c6382d49 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Wed, 1 Nov 2023 11:31:32 +0300 Subject: [PATCH] [#17288] refactor: migrate previews to new api (#17776) --- .../quo_preview/list_items/token_network.cljs | 2 +- src/status_im2/contexts/quo_preview/main.cljs | 30 +++---- .../notifications/activity_logs.cljs | 2 +- .../notifications/activity_logs_photos.cljs | 2 +- .../contexts/quo_preview/tags/tiny_tag.cljs | 10 +-- .../quo_preview/wallet/account_card.cljs | 80 ++++--------------- .../quo_preview/wallet/account_overview.cljs | 71 ++++++---------- .../contexts/quo_preview/wallet/keypair.cljs | 62 ++++++-------- .../quo_preview/wallet/network_amount.cljs | 26 +++--- .../quo_preview/wallet/network_bridge.cljs | 33 +++----- .../quo_preview/wallet/network_link.cljs | 33 +++----- .../quo_preview/wallet/network_routing.cljs | 14 ++-- .../quo_preview/wallet/progress_bar.cljs | 30 +++---- .../quo_preview/wallet/summary_info.cljs | 32 +++----- .../quo_preview/wallet/token_input.cljs | 37 +++------ .../wallet/transaction_summary.cljs | 2 +- .../quo_preview/wallet/wallet_overview.cljs | 56 +++++-------- 17 files changed, 182 insertions(+), 340 deletions(-) diff --git a/src/status_im2/contexts/quo_preview/list_items/token_network.cljs b/src/status_im2/contexts/quo_preview/list_items/token_network.cljs index 3d424c716b..531a5a0c58 100644 --- a/src/status_im2/contexts/quo_preview/list_items/token_network.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/token_network.cljs @@ -36,7 +36,7 @@ {:key :show-alert-on-press? :type :boolean}]) -(defn preview-token-network +(defn view [] (let [state (reagent/atom {:token (quo.resources/get-token :snt) :label "Status" diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 465b25045f..e94b4a1858 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -331,7 +331,7 @@ {:name :saved-contact-address :component saved-contact-address/view} {:name :token-network - :component token-network/preview-token-network} + :component token-network/view} {:name :token-value :component token-value/view} {:name :user-list @@ -359,9 +359,9 @@ {:name :floating-shell-button :component floating-shell-button/view}] :notifications [{:name :activity-logs - :component activity-logs/preview-activity-logs} + :component activity-logs/view} {:name :activity-logs-photos - :component activity-logs-photos/preview-activity-logs-photos} + :component activity-logs-photos/view} {:name :toast :component toast/view} {:name :notification @@ -435,27 +435,27 @@ {:name :tags :component tags/view} {:name :tiny-tag - :component tiny-tag/preview-tiny-tag} + :component tiny-tag/view} {:name :token-tag :component token-tag/view}] :text-combinations [{:name :text-combinations :component text-combinations/view}] - :wallet [{:name :account-card :component account-card/preview-account-card} + :wallet [{:name :account-card :component account-card/view} {:name :account-origin :component account-origin/view} {:name :account-overview - :component account-overview/preview-account-overview} - {:name :keypair :component keypair/preview} - {:name :network-amount :component network-amount/preview} - {:name :network-bridge :component network-bridge/preview} - {:name :network-link :component network-link/preview} - {:name :network-routing :component network-routing/preview} - {:name :progress-bar :component progress-bar/preview} - {:name :summary-info :component summary-info/preview} - {:name :token-input :component token-input/preview} + :component account-overview/view} + {:name :keypair :component keypair/view} + {:name :network-amount :component network-amount/view} + {:name :network-bridge :component network-bridge/view} + {:name :network-link :component network-link/view} + {:name :network-routing :component network-routing/view} + {:name :progress-bar :component progress-bar/view} + {:name :summary-info :component summary-info/view} + {:name :token-input :component token-input/view} {:name :wallet-activity :component wallet-activity/view} {:name :transaction-summary :component transaction-summary/view} {:name :wallet-overview - :component wallet-overview/preview-wallet-overview}] + :component wallet-overview/view}] :keycard [{:name :keycard-component :component keycard/view}]}) (defn- category-view diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index aacf8b440d..f85510ab9b 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -105,7 +105,7 @@ {:body "Your favorite color is Turquoise." :title "What's my favorite color?"}) -(defn preview-activity-logs +(defn view [] (let [state (reagent/atom {:button-1-label "Decline" :button-1-type :danger diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs index 8a39d0547a..246606eb7c 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs @@ -31,7 +31,7 @@ (resources/get-mock-image :photo2) (resources/get-mock-image :photo3)]) -(defn preview-activity-logs-photos +(defn view [] (let [state (reagent/atom {:count 1})] (fn [] diff --git a/src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs b/src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs index c3fab21264..b723c498b0 100644 --- a/src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs @@ -6,14 +6,10 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Blur?" - :key :blur? - :type :boolean} - {:label "Label" - :key :label - :type :text}]) + [{:key :blur? :type :boolean} + {:key :label :type :text}]) -(defn preview-tiny-tag +(defn view [] (let [state (reagent/atom {:blur? false :label "1,000 SNT"})] diff --git a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs index 94209d4a0c..a1fd1ae419 100644 --- a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs @@ -1,56 +1,27 @@ (ns status-im2.contexts.quo-preview.wallet.account-card (:require - [quo.components.icon :as icon] - [quo.components.markdown.text :as text] [quo.core :as quo] - [quo.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview] [utils.collection])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :default - :value "Default"} - {:key :watch-only - :value "Watch Only"} - {:key :add-account - :value "Add Account"} - {:key :empty - :value "Empty"} - {:key :missing-keypair - :value "Missing Keypair"}]} - {:label "Customization color:" - :key :customization-color - :type :select - :options (map (fn [[color-kw _]] - {:key color-kw - :value (name color-kw)}) - colors/customization)} - {:label "Name:" - :key :name - :type :text} - {:label "Balance:" - :key :balance - :type :text} - {:label "Percentage value:" - :key :percentage-value - :type :text} - {:label "Amount:" - :key :amount - :type :text} - {:label "Metrics:" - :key :metrics? - :type :boolean} - {:label "Loading:" - :key :loading? - :type :boolean} - {:label "Emoji:" - :key :emoji - :type :text}]) + :options [{:key :default} + {:key :watch-only} + {:key :add-account} + {:key :empty} + {:key :missing-keypair}]} + (preview/customization-color-option) + {:key :name :type :text} + {:key :balance :type :text} + {:key :percentage-value :type :text} + {:key :amount :type :text} + {:key :metrics? :type :boolean} + {:key :loading? :type :boolean} + {:key :emoji :type :text}]) (defn initial-state [type] @@ -101,7 +72,7 @@ :type :add-account})) -(defn preview-account-card +(defn view [] (let [state (reagent/atom (initial-state :default))] [:f> @@ -112,23 +83,4 @@ [preview/preview-container {:state state :descriptor descriptor} - [rn/view - {:style {:margin-vertical 40 - :padding-left 40 - :flex-direction :row - :align-items :center}} - [text/text - {:size :heading-1 - :weight :semi-bold} - "Account card"] - [rn/view - {:style {:width 20 - :height 20 - :border-radius 60 - :background-color colors/success-50 - :align-items :center - :justify-content :center - :margin-left 8}} - [icon/icon :i/check {:color colors/white :size 16}]]] - [rn/view {:style {:align-items :center :margin-bottom 20}} - [quo/account-card @state]]])])) + [quo/account-card @state]])])) diff --git a/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs index b39407da47..5867c1cebf 100644 --- a/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/account_overview.cljs @@ -1,53 +1,30 @@ (ns status-im2.contexts.quo-preview.wallet.account-overview (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Time frame string" - :key :time-frame-string - :type :text} - {:label "Time frame to string" - :key :time-frame-to-string - :type :text} - {:label "Percentage change" - :key :percentage-change - :type :text} - {:label "Currency change" - :key :currency-change - :type :text} - {:label "Current value" - :key :current-value - :type :text} - {:label "State" - :key :state + [{:key :time-frame-string :type :text} + {:key :time-frame-to-string :type :text} + {:key :percentage-change :type :text} + {:key :currency-change :type :text} + {:key :current-value :type :text} + {:key :state :type :select - :options [{:key :default - :value "Default"} - {:key :loading - :value "Loading"}]} - {:label "Metrics" - :key :metrics + :options [{:key :default} + {:key :loading}]} + {:key :metrics :type :select - :options [{:key "Positive" - :value :positive} - {:key "Negative" - :value :negative}]} - {:label "Account name" - :key :account-name - :type :text} + :options [{:key :positive} + {:key :negative}]} + {:key :account-name :type :text} (preview/customization-color-option) - {:label "Account" - :key :account + {:key :account :type :select - :options [{:key :watched-address - :value "Watched address"} - {:key :default - :value "Default"}]} - {:label "Time frame" - :key :time-frame + :options [{:key :watched-address} + {:key :default}]} + {:key :time-frame :type :select :options [{:key :one-week :value "1 Week"} @@ -62,7 +39,7 @@ {:key :custom :value "Custom"}]}]) -(defn preview-account-overview +(defn view [] (let [state (reagent/atom {:metrics :positive :currency-change "€0.00" @@ -76,11 +53,9 @@ :customization-color :blue})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:style {:padding-bottom 150}} - [rn/view - {:style {:padding-vertical 60 - :flex-direction :row - :justify-content :center}} - [quo/account-overview @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60 + :flex-direction :row + :justify-content :center}} + [quo/account-overview @state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs index d6809d78a9..382022162d 100644 --- a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.wallet.keypair (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -62,30 +61,20 @@ (map (fn [account] (assoc account :blur? blur?)) accounts)) (def descriptor - [{:label "Stored:" - :key :stored + [{:key :stored :type :select - :options [{:key :on-device - :value "On device"} - {:key :on-keycard - :value "On Keycard"}]} - {:label "Action:" - :key :action + :options [{:key :on-device} + {:key :on-keycard}]} + {:key :action :type :select - :options [{:key :selector - :value "Selector"} - {:key :options - :value "Options"}]} - {:label "Type:" - :key :type + :options [{:key :selector} + {:key :options}]} + {:key :type :type :select - :options [{:key :default-keypair - :value "Default keypair"} - {:key :other - :value "Other"}]} + :options [{:key :default-keypair} + {:key :other}]} (preview/customization-color-option) - {:key :blur? - :type :boolean}]) + {:key :blur? :type :boolean}]) (def default-details {:full-name "John Doe" @@ -93,7 +82,7 @@ (def other-details {:full-name "Metamask"}) -(defn preview +(defn view [] (let [state (reagent/atom {:customization-color :blue :type :default-keypair @@ -103,18 +92,17 @@ :blur? false})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor - :blur? (:blur? @state) - :show-blur-background? true - :blur-dark-only? true - :blur-height 400} - [rn/view - {:style {:padding-vertical 30 - :flex-direction :row - :justify-content :center}} - [quo/keypair - (merge - @state - {:details (if (= (:type @state) :default-keypair) default-details other-details) - :accounts (get-accounts (:blur? @state))})]]]))) + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true + :blur-height 400 + :component-container-style {:padding-vertical 30 + :flex-direction :row + :justify-content :center}} + [quo/keypair + (merge + @state + {:details (if (= (:type @state) :default-keypair) default-details other-details) + :accounts (get-accounts (:blur? @state))})]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs b/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs index f5da35bb52..ef67cec42d 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs @@ -1,32 +1,24 @@ (ns status-im2.contexts.quo-preview.wallet.network-amount (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Amount:" - :key :amount - :type :text} - {:label "Token:" - :key :token + [{:key :amount :type :text} + {:key :token :type :select - :options [{:key :eth - :value "ETH"} - {:key :snt - :value "SNT"}]}]) + :options [{:key :eth} + {:key :snt}]}]) -(defn preview +(defn view [] (let [state (reagent/atom {:amount "5.123456" :token :eth})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [quo/network-amount @state]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-horizontal 20}} + [quo/network-amount @state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs b/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs index 5bb31d388a..940881e9a7 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs @@ -1,23 +1,17 @@ (ns status-im2.contexts.quo-preview.wallet.network-bridge (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Network:" - :key :network + [{:key :network :type :select - :options [{:key :ethereum - :value "Ethereum"} - {:key :optimism - :value "Optimism"} - {:key :arbitrum - :value "Arbitrum"}]} - {:label "Status:" - :key :status + :options [{:key :ethereum} + {:key :optimism} + {:key :arbitrum}]} + {:key :status :type :select :options [{:key :default :value :default} {:key :locked :value :locked} @@ -25,19 +19,16 @@ {:key :disabled :value :disabled} {:key :add :value :add}]}]) -(defn preview +(defn view [] (let [state (reagent/atom {:network :ethereum :status :default :amount "50 SNT"})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [rn/view - {:style {:flex 1 - :margin-top 50 - :align-items :center}} [quo/network-bridge @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-horizontal 20 + :margin-top 50 + :align-items :center}} + [quo/network-bridge @state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_link.cljs b/src/status_im2/contexts/quo_preview/wallet/network_link.cljs index 8871993bac..c81181f8d8 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_link.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_link.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.wallet.network-link (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -14,35 +13,27 @@ :vault "Arbitrum"}]) (def descriptor - [{:label "Shape:" - :key :shape + [{:key :shape :type :select - :options [{:key :linear - :value "Linear"} - {:key :1x - :value "1x"} - {:key :2x - :value "2x"}]} - {:label "Source:" - :key :source + :options [{:key :linear} + {:key :1x} + {:key :2x}]} + {:key :source :type :select :options networks} - {:label "Destination:" - :key :destination + {:key :destination :type :select :options networks}]) -(defn preview +(defn view [] (let [state (reagent/atom {:shape :linear :source :ethereum :destination :optimism})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:flex 1 - :padding-top 40 - :align-items :center}} - [quo/network-link @state]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-top 40 + :align-items :center}} + [quo/network-link @state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_routing.cljs b/src/status_im2/contexts/quo_preview/wallet/network_routing.cljs index 79263772cf..c20a75c6e3 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_routing.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_routing.cljs @@ -6,8 +6,7 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Number of networks" - :key :number-networks + [{:key :number-networks :type :select :options [{:key 2} {:key 3} {:key 4} {:key 5}]}]) @@ -78,7 +77,7 @@ [quo/text "Total amount: " (reduce + (map :amount asked-networks))]] asked-networks)])))) -(defn preview +(defn view [] (let [descriptor-state (reagent/atom {:total-amount 400 :number-networks 4 @@ -88,7 +87,8 @@ :max-amount-3 250 :max-amount-4 200})] (fn [] - [preview/preview-container {:state descriptor-state :descriptor descriptor} - [rn/view {:style {:flex 1 :margin-vertical 28}} - ^{:key (str "preview-network-routing-" (:number-networks @descriptor-state))} - [preview-internal @descriptor-state]]]))) + [preview/preview-container + {:state descriptor-state + :descriptor descriptor + :component-container-style {:margin-vertical 28}} + [preview-internal @descriptor-state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs index 02729649e0..d9b4f2cad8 100644 --- a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs @@ -1,34 +1,26 @@ (ns status-im2.contexts.quo-preview.wallet.progress-bar (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "State:" - :key :state + [{:key :state :type :select - :options [{:key :pending - :value "pending"} - {:key :confirmed - :value "confirmed"} - {:key :finalized - :value "finalized"} - {:key :error - :value "error"}]} + :options [{:key :pending} + {:key :confirmed} + {:key :finalized} + {:key :error}]} (preview/customization-color-option)]) -(defn preview +(defn view [] (let [state (reagent/atom {:state :pending :customization-color :blue})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:flex 1 - :padding-top 40 - :align-items :center}} - [quo/progress-bar @state]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-top 40 + :align-items :center}} + [quo/progress-bar @state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs b/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs index 914ca2d4a5..d0a90da0be 100644 --- a/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/summary_info.cljs @@ -1,30 +1,22 @@ (ns status-im2.contexts.quo-preview.wallet.summary-info (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :status-account - :value "Status Account"} - {:key :user - :value "User"} - {:key :saved-account - :value "Saved Account"} - {:key :account - :value "Account"}]} - {:label "Networks?:" - :key :networks? - :type :boolean}]) + :options [{:key :status-account} + {:key :user} + {:key :saved-account} + {:key :account}]} + {:key :networks? :type :boolean}]) -(defn preview +(defn view [] (let [state (reagent/atom {:type :status-account :networks? true @@ -48,9 +40,7 @@ (fn [] (let [account-props (if (= (:type @state) :status-account) status-account-props user-props)] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [quo/summary-info (merge @state {:account-props account-props})]]])))) + {:state state + :descriptor descriptor + :component-container-style {:padding-horizontal 20}} + [quo/summary-info (merge @state {:account-props account-props})]])))) diff --git a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs index 799aaeaf3c..97701ed5c0 100644 --- a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs @@ -2,7 +2,6 @@ (:require [quo.core :as quo] [quo.foundations.resources :as resources] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -14,22 +13,16 @@ (def title "Max: 200 SNT") (def descriptor - [{:label "Token:" - :key :token + [{:key :token :type :select - :options [{:key :eth - :value "ETH"} - {:key :snt - :value "SNT"}]} - {:label "Currency:" - :key :currency + :options [{:key :eth} + {:key :snt}]} + {:key :currency :type :select - :options [{:key :usd - :value "USD"} - {:key :eur - :value "EUR"}]}]) + :options [{:key :usd} + {:key :eur}]}]) -(defn preview +(defn view [] (let [state (reagent/atom {:token :eth :currency :usd @@ -39,13 +32,9 @@ :customization-color :blue})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [rn/view - {:style {:flex 1 - :margin-top 50 - :align-items :center}} - [quo/token-input @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-horizontal 20 + :margin-top 50 + :align-items :center}} + [quo/token-input @state]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs b/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs index b7e3804c19..62f5d3e401 100644 --- a/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs @@ -222,7 +222,7 @@ {:state component-state :descriptor descriptor :show-blur-background? true - :component-container-style {:align-self :center}} + :component-container-style {:padding-bottom 50}} [quo/transaction-summary (merge {:on-press #(js/alert "Dropdown pressed")} @component-state)]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs index 330b929b5a..2b535f52e1 100644 --- a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs @@ -2,25 +2,18 @@ (:require [quo.core :as quo] [quo.foundations.resources :as quo.resources] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "State" - :key :state + [{:key :state :type :select - :options [{:key :loading - :value "Loading"} - {:key :default - :value "Default"}]} - {:label "Time frame" - :key :time-frame + :options [{:key :loading} + {:key :default}]} + {:key :time-frame :type :select - :options [{:key :none - :value "None"} - {:key :selected - :value "Selected"} + :options [{:key :none} + {:key :selected} {:key :one-week :value "1 Week"} {:key :one-month @@ -31,24 +24,19 @@ :value "1 Year"} {:key :all-time :value "All time"} - {:key :custom - :value "Custom"}]} - {:label "Metrics" - :key :metrics + {:key :custom}]} + {:key :metrics :type :select - :options [{:key :none - :value "None"} - {:key :positive - :value "Positive"} - {:key :negative - :value "Negative"}]}]) + :options [{:key :none} + {:key :positive} + {:key :negative}]}]) (def ^:private networks-list [{:source (quo.resources/get-network :ethereum)} {:source (quo.resources/get-network :optimism)} {:source (quo.resources/get-network :arbitrum)}]) -(defn preview-wallet-overview +(defn view [] (let [state (reagent/atom {:state :default :time-frame :one-week @@ -61,14 +49,12 @@ :percentage-change "0.00%"})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo/wallet-overview - (assoc @state - :networks networks-list - :dropdown-on-press #(js/alert "On pressed dropdown"))]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60 + :flex-direction :row + :justify-content :center}} + [quo/wallet-overview + (assoc @state + :networks networks-list + :dropdown-on-press #(js/alert "On pressed dropdown"))]])))