[#17288] refactor: migrate previews to new api (#17776)

2023-11-01 11:31:32 +03:00 · 2023-11-01 11:31:32 +03:00 · 233d1b3261
parent 25381b601f
commit 233d1b3261
17 changed files with 182 additions and 340 deletions
--- 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"
--- 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
--- 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
--- 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 []
--- 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"})]
--- 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]])]))
--- 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]])))
--- 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))})]])))
--- 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]])))
--- 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]])))
--- 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]])))
--- 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]])))
--- 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]])))
--- 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})]]))))
--- 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]])))
--- 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)]])))
--- 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"))]])))