Quo2: Network Amount (#16764)

* feat: network amount component

src/quo2/components/wallet/lowest_price.cljs

@@ -1,77 +0,0 @@
-(ns quo2.components.wallet.lowest-price
-  (:require [clojure.string :as string]
-            [react-native.core :as rn]))
-
-(def centrify
-  {:style {:flex-direction  :row
-           :justify-content :center
-           :align-items     :center}})
-
-(defn border-alignment
-  [value-bg-color]
-  {:style {:align-self         :flex-start
-           :padding-horizontal 16
-           :padding-vertical   2
-           :flex-grow          0.25
-           :border-radius      4
-           :background-color   value-bg-color}})
-
-(def line-dots-props
-  {:ellipsize-mode  :middle
-   :number-of-lines 1
-   :font-size       10
-   :line-height     2})
-
-(defn dots
-  "Returns the dots"
-  [few-of-dots?]
-  (let [dots-text (->> ". "
-                       (repeat (if few-of-dots?
-                                 16
-                                 48))
-                       string/join
-                       (str " "))]
-    dots-text))
-
-(defn dots-comp
-  "Returns the dots adding their styles"
-  [few-of-dots?]
-  [rn/view
-   {:style {:align-items :center
-            :bottom      5}}
-   [rn/text line-dots-props (dots few-of-dots?)]])
-
-(defn lowest-price-value-comp
-  "Component responsible for the top and bottom values"
-  [top-value top-value-bg-color top-value-text-color]
-  [rn/view (border-alignment top-value-bg-color)
-   [rn/text
-    {:style {:color      top-value-text-color
-             :text-align :center}} top-value]])
-
-(defn lowest-price-styles
-  [margin-top]
-  {:style {:flex-direction  :column
-           :width           "100%"
-           :overflow        :hidden
-           :margin-top      (int margin-top)
-           :justify-content :center}})
-
-(defn lowest-price
-  "Shows the lowest price component"
-  [{:keys [top-value
-           bottom-value
-           margin-top
-           top-value-text-color
-           top-value-bg-color
-           bottom-value-bg-color
-           bottom-value-text-color]}]
-  [rn/view (lowest-price-styles margin-top)
-   [rn/view centrify
-    [dots-comp true]
-    [lowest-price-value-comp top-value top-value-bg-color top-value-text-color]
-    [dots-comp false]]
-   [rn/view centrify
-    [dots-comp false]
-    [lowest-price-value-comp bottom-value bottom-value-bg-color bottom-value-text-color]
-    [dots-comp true]]])

src/quo2/components/wallet/network_amount.cljs

@@ -1,53 +0,0 @@
-(ns quo2.components.wallet.network-amount
-  (:require [quo2.components.icon :as icon]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
-
-(defn network-amount
-  "[network-amount opts]
-   opts
-   {:style        style                 ;; extra styles for the container (takes precedence)
-    :network-name \"Mainnet\"             ;; shown network name
-    :icon         :i/ethereum ;; key of icon belonging to the network
-    :eth-value    1.2345678             ;; shown ETH value}"
-  [{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}]
-  [rn/view
-   (merge {:accessibility-label :network-amount
-           :background-color    (colors/theme-colors colors/white colors/neutral-95)
-           :border-radius       16
-           :padding             6}
-          style)
-   [rn/view
-    {:style {:flex-direction :row
-             :align-items    :center}}
-    [rn/view
-     {:flex-direction :column
-      :align-self     :flex-start
-      :padding-top    3
-      :padding-right  4}
-     [icon/icon icon
-      {:size            40
-       :no-color        true
-       :container-style {:width  12
-                         :height 12}}]]
-    [rn/view
-     [rn/view
-      {:style {:flex-direction :row
-               :align-items    :center}}
-      [text/text
-       {:weight :medium
-        :size   :paragraph-2
-        :style  {:color (colors/theme-colors colors/neutral-100 colors/white)}}
-       eth-value \space (:eth labels)]
-      [rn/view
-       {:style {:border-right-width (when show-right-border? 1)
-                :border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
-                :padding-left       8
-                :align-self         :center
-                :height             8}}]]
-     [text/text
-      {:weight :medium
-       :size   :label
-       :style  {:color colors/neutral-50}}
-      (:on labels) \space network-name]]]])

src/quo2/components/wallet/network_amount/component_spec.cljs

@@ -0,0 +1,10 @@
+(ns quo2.components.wallet.network-amount.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.wallet.network-amount.view :as network-amount]))
+
+(h/describe "Wallet: Network Amount"
+  (h/test "Amount renders"
+    (h/render [network-amount/view
+               {:amount "5.123"
+                :token  :eth}])
+    (h/is-truthy (h/get-by-text "5.123 ETH"))))

src/quo2/components/wallet/network_amount/style.cljs

@@ -0,0 +1,17 @@
+(ns quo2.components.wallet.network-amount.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction :row
+   :align-items    :center
+   :height         18})
+
+(def text
+  {:margin-left  4
+   :margin-right 8})
+
+(defn divider
+  [theme]
+  {:width            1
+   :height           8
+   :background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})

src/quo2/components/wallet/network_amount/view.cljs

@@ -0,0 +1,24 @@
+(ns quo2.components.wallet.network-amount.view
+  (:require
+    [clojure.string :as string]
+    [quo2.components.markdown.text :as text]
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [quo2.components.wallet.network-amount.style :as style]
+    [quo2.foundations.resources :as resources]))
+
+(defn- view-internal
+  [{:keys [amount token theme]}]
+  [rn/view {:style style/container}
+   [rn/image
+    {:source (resources/tokens token)
+     :style  {:width 12 :height 12}}]
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  style/text}
+    (str amount " " (string/upper-case (clj->js token)))]
+   [rn/view
+    {:style (style/divider theme)}]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/wallet/network_breakdown.cljs

@@ -1,52 +0,0 @@
-(ns quo2.components.wallet.network-breakdown
-  (:require [quo2.components.markdown.text :as text]
-            [quo2.components.wallet.network-amount :refer [network-amount]]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
-
-(defn network-breakdown
-  [{:keys [top-value network-conversions labels]}]
-  [rn/view
-   {:style {:background-color   (colors/theme-colors
-                                 colors/white
-                                 colors/neutral-95)
-            :padding-horizontal 40
-            :padding-top        24
-            :border-radius      16
-            :height             126
-            :width              390
-            :overflow           :hidden}}
-   [rn/view
-    {:style {:border-bottom-width 1
-             :border-bottom-color (colors/theme-colors
-                                   colors/neutral-20
-                                   colors/neutral-70)
-             :padding-vertical    6}}
-    [text/text
-     {:weight :medium
-      :style  {:color     (colors/theme-colors
-                           colors/neutral-100
-                           colors/white)
-               :font-size 19}}
-     (str top-value)]]
-   [rn/scroll-view
-    {:horizontal true
-     :style      {:text-align :center
-                  :margin-top 6
-                  :width      340}}
-    (let [last-item-idx (-> network-conversions
-                            count
-                            dec)]
-      (map-indexed
-       (fn [idx {:keys [conversion network icon]}]
-         [rn/view
-          {:style (cond-> {:flex-direction :row}
-                    (not= idx 0) (assoc :margin-left -4))
-           :key   idx}
-          [network-amount
-           {:show-right-border? (not= idx last-item-idx)
-            :icon               icon
-            :network-name       network
-            :eth-value          conversion
-            :labels             labels}]])
-       network-conversions))]])

src/quo2/components/wallet/token_overview.cljs

@@ -1,127 +0,0 @@
-(ns quo2.components.wallet.token-overview
-  (:require [clojure.string :as string]
-            [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
-
-(def container-style
-  {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
-
-(defn price-direction
-  [price-change increase decrease neutral]
-  (cond
-    (pos? price-change) increase
-    (neg? price-change) decrease
-    :else               neutral))
-
-(defn price-color
-  [direction]
-  (price-direction direction colors/success-50 colors/danger-50 colors/neutral-50))
-
-(defn divider
-  [direction]
-  [rn/view
-   {:style {:height           10
-            :margin-left      4
-            :margin-right     4
-            :width            1
-            :background-color (price-direction direction
-                                               colors/success-50-opa-40
-                                               colors/danger-50-opa-40
-                                               colors/divider-light)}}])
-
-(defn get-direction
-  [percentage-change]
-  (if (zero? (js/parseInt percentage-change))
-    0
-    (/ (js/parseInt percentage-change) (js/Math.abs (js/parseInt percentage-change)))))
-
-(defn trim-minus
-  [percentage-change]
-  (if (= (first percentage-change) "-") (string/join (rest percentage-change)) percentage-change))
-
-(defn token-price
-  "[token-price opts \"label\"]
-   opts
-   {
-    :currency :currency-key
-    :price :string
-    :percentage-change :string
-    }"
-  []
-  (fn
-    [{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
-    (let [direction (get-direction percentage-change)]
-      [rn/view {:style container-style}
-       [text/text
-        {:number-of-lines 1
-         :size            :paragraph-2} label]
-       [text/text
-        {:style           {:margin-top 4}
-         :weight          :semi-bold
-         :number-of-lines 1
-         :size            :heading-2} (str currency price)]
-
-       [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
-        (when (not (zero? direction))
-          [icons/icon (if (>= direction 0) :i/price-increase12 :i/price-decrease12)
-           {:no-color        true
-            :width           14
-            :height          14
-            :container-style {:margin-right 4}}])
-        [text/text
-         {:number-of-lines 1
-          :weight          :medium
-          :size            :paragraph-2
-          :style           {:color (price-color direction)}}
-         (str (trim-minus percentage-change) "%")]]])))
-
-(defn token-balance
-  "[token-balance opts \"label\"]
-   opts
-   {
-    :token string
-    :token-img-src :token-img-src
-    :currency :currency-key
-    :account-balance :string
-    :price :string
-    :percentage-change :string
-    }"
-  []
-  (fn [{:keys [token token-img-src currency account-balance price percentage-change]
-        :or   {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
-    (let [direction (get-direction percentage-change)]
-      [rn/view {:style container-style}
-       [text/text
-        {:weight          :regular
-         :number-of-lines 1
-         :size            :paragraph-1} (str "Account " token " Balance")]
-       [rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
-        [text/text
-         {:number-of-lines 1
-          :weight          :semi-bold
-          :size            :heading-1} (str currency account-balance)]
-        [rn/image
-         {:source token-img-src
-          :style  {:height 32
-                   :width  32}}]]
-       [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
-        (when (not (zero? direction))
-          [icons/icon (if (pos? direction) :i/price-increase :i/price-decrease)
-           {:no-color        true
-            :size            12
-            :container-style {:margin-right 4}}])
-        [text/text
-         {:number-of-lines 1
-          :weight          :medium
-          :size            :paragraph-2
-          :style           {:color (price-color direction)}} (str currency price)]
-        [divider direction]
-        [text/text
-         {:number-of-lines 1
-          :weight          :medium
-          :size            :paragraph-2
-          :style           {:color (price-color direction)}}
-         (str (trim-minus percentage-change) "%")]]])))
-

src/quo2/core.cljs

@@ -100,7 +100,8 @@
     quo2.components.tags.tag
     quo2.components.tags.tags
     quo2.components.tags.token-tag
-    quo2.components.text-combinations.title.view))
+    quo2.components.text-combinations.title.view
+    quo2.components.wallet.network-amount.view))
 
 (def separator quo2.components.common.separator.view/separator)
 
@@ -283,5 +284,10 @@
 (def url-preview-list quo2.components.links.url-preview-list.view/view)
 (def link-preview quo2.components.links.link-preview.view/view)
 
+
 ;;;; GRADIENT
 (def gradient-cover quo2.components.gradient.gradient-cover.view/view)
+
+;;;; WALLET
+(def network-amount quo2.components.wallet.network-amount.view/view)
+

src/quo2/core_spec.cljs

@@ -45,4 +45,5 @@
     [quo2.components.settings.settings-list.component-spec]
     [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
-    [quo2.components.tags.status-tags-component-spec]))
+    [quo2.components.tags.status-tags-component-spec]
+    [quo2.components.wallet.network-amount.component-spec]))

src/quo2/foundations/resources.cljs

@@ -9,3 +9,17 @@
 (defn get-image
   [k]
   (get ui k))
+
+(def tokens
+  {:eth  (js/require "../resources/images/tokens/mainnet/ETH.png")
+   :knc  (js/require "../resources/images/tokens/mainnet/KNC.png")
+   :mana (js/require "../resources/images/tokens/mainnet/MANA.png")
+   :rare (js/require "../resources/images/tokens/mainnet/RARE.png")
+   :dai  (js/require "../resources/images/tokens/mainnet/DAI.png")
+   :fxc  (js/require "../resources/images/tokens/mainnet/FXC.png")
+   :usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
+   :snt  (js/require "../resources/images/tokens/mainnet/SNT.png")})
+
+(defn get-token
+  [k]
+  (get tokens k))

src/status_im2/common/resources.cljs

@@ -77,16 +77,6 @@
    :user-picture-male4   (js/require "../resources/images/mock2/user_picture_male4.png")
    :user-picture-male5   (js/require "../resources/images/mock2/user_picture_male5.png")})
 
-(def tokens
-  {:eth  (js/require "../resources/images/tokens/mainnet/ETH.png")
-   :knc  (js/require "../resources/images/tokens/mainnet/KNC.png")
-   :mana (js/require "../resources/images/tokens/mainnet/MANA.png")
-   :rare (js/require "../resources/images/tokens/mainnet/RARE.png")
-   :dai  (js/require "../resources/images/tokens/mainnet/DAI.png")
-   :fxc  (js/require "../resources/images/tokens/mainnet/FXC.png")
-   :usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
-   :snt  (js/require "../resources/images/tokens/mainnet/SNT.png")})
-
 (def parallax-video
   {:biometrics    [(js/require "../resources/videos2/biometrics_01.mp4")
                    (js/require "../resources/videos2/biometrics_02.mp4")
@@ -107,7 +97,3 @@
 (defn get-themed-image
   [k k2]
   (get ui (if (colors/dark?) k k2)))
-
-(defn get-token
-  [k]
-  (get tokens k))

src/status_im2/contexts/quo_preview/community/token_gating.cljs

@@ -1,9 +1,10 @@
 (ns status-im2.contexts.quo-preview.community.token-gating
-  (:require [reagent.core :as reagent]
+  (:require
-            [status-im2.common.resources :as resources]
+    [quo2.foundations.resources :as resources]
-            [react-native.core :as rn]
+    [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
+    [react-native.core :as rn]
-            [quo2.core :as quo]))
+    [status-im2.contexts.quo-preview.preview :as preview]
+    [quo2.core :as quo]))
 
 (def descriptor
   [{:label "Tokens sufficient"

src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.quo-preview.drawers.permission-drawers
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [quo2.foundations.resources :as quo.resources]
             [react-native.core :as rn]
             [status-im2.common.resources :as resources]))
 
@@ -43,7 +44,7 @@
    [quo/text {:style {:margin-right 4}} "Hold"]
    [quo/token-tag
     {:size          :small
-     :token-img-src (resources/get-token :eth)} "ETH"]
+     :token-img-src (quo.resources/get-token :eth)} "ETH"]
    [quo/text {:style {:margin-left 4}} "To post"]])
 
 (defn example-3

src/status_im2/contexts/quo_preview/main.cljs

@@ -97,14 +97,11 @@
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
     [status-im2.contexts.quo-preview.title.title :as title]
-    [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
-    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
-    [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
-    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
     [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
-    [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]))
+    [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
+    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]))
 
 (def screens-categories
   {:foundations       [{:name      :shadows
@@ -392,16 +389,7 @@
    :text-combinations [{:name      :title
                         :options   {:topBar {:visible true}}
                         :component title/preview-title}]
-   :wallet            [{:name      :lowest-price
+   :wallet            [{:name      :network-amount
-                        :options   {:topBar {:visible true}}
-                        :component lowest-price/preview-lowest-price}
-                       {:name      :token-overview
-                        :options   {:topBar {:visible true}}
-                        :component token-overview/preview-token-overview}
-                       {:name      :network-breakdown
-                        :options   {:topBar {:visible true}}
-                        :component network-breakdown/preview-network-breakdown}
-                       {:name      :network-amount
                         :options   {:topBar {:visible true}}
                         :component network-amount/preview}]
    :keycard           [{:name      :keycard-component

src/status_im2/contexts/quo_preview/settings/reorder_item.cljs

@@ -3,6 +3,7 @@
     [quo2.core :as quo]
     [react-native.core :as rn]
     [status-im2.common.resources :as resources]
+    [quo2.foundations.resources :as quo2.resources]
     [quo2.foundations.colors :as colors]
     [quo2.components.settings.reorder-item.types :as types]))
 
@@ -22,7 +23,7 @@
            :title      "Status"}}
    {:id   3
     :type types/item
-    :data {:image      (resources/tokens :eth)
+    :data {:image      (quo2.resources/tokens :eth)
            :image-size 21
            :right-icon :i/world
            :title      "Ethereum"}}

src/status_im2/contexts/quo_preview/tags/token_tag.cljs

@@ -1,10 +1,10 @@
 (ns status-im2.contexts.quo-preview.tags.token-tag
   (:require [quo2.components.tags.token-tag :as quo2]
             [quo2.foundations.colors :as colors]
+            [quo2.foundations.resources :as resources]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.contexts.quo-preview.preview :as preview]))
-            [status-im2.common.resources :as resources]))
 
 (def descriptor
   [{:label   "Size:"

src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs

@@ -1,60 +0,0 @@
-(ns status-im2.contexts.quo-preview.wallet.lowest-price
-  (:require [quo2.components.wallet.lowest-price :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:label "Top value"
-    :key   :top-value
-    :type  :text}
-   {:label "Top value background color"
-    :key   :top-value-bg-color
-    :type  :text}
-   {:label "Top value text color"
-    :key   :top-value-text-color
-    :type  :text}
-   {:label "Bottom value"
-    :key   :bottom-value
-    :type  :text}
-   {:label "Bottom value background color"
-    :key   :bottom-value-bg-color
-    :type  :text}
-   {:label "Bottom value text color"
-    :key   :bottom-value-text-color
-    :type  :text}
-   {:label "Margin top"
-    :key   :margin-top
-    :type  :text}])
-
-(defn cool-preview
-  []
-  (let [state (reagent/atom {:top-value               20
-                             :bottom-value            20
-                             :top-value-bg-color      colors/neutral-100
-                             :top-value-text-color    colors/white
-                             :bottom-value-bg-color   colors/neutral-100
-                             :bottom-value-text-color colors/white})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo2/lowest-price @state]]]])))
-
-(defn preview-lowest-price
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white
-                                           colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/wallet/network_amount.cljs

@@ -1,68 +1,31 @@
 (ns status-im2.contexts.quo-preview.wallet.network-amount
-  (:require [clojure.string :as string]
+  (:require
-            [quo2.components.wallet.network-amount :refer [network-amount]]
+    [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
-            [react-native.core :as rn]
+    [reagent.core :as reagent]
-            [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
-            [utils.i18n :as i18n]
-            [status-im2.contexts.quo-preview.preview :as preview]))
 
-(def ^:private networks
-  [{:icon :i/ethereum :name "Mainnet"}
-   {:icon :i/arbitrum :name "Arbitrum"}
-   {:icon :i/optimism :name "Optimism"}
-   {:icon :i/zksync :name "zkSync"}])
 
-(defn- networks->options
+(def descriptor
-  [networks]
+  [{:label "Amount:"
-  (for [{:keys [name]
+    :key   :amount
-         :as   network}
-        networks]
-    {:key   network
-     :value name}))
-
-(def ^:private descriptors
-  [{:label "ETH Value"
-    :key   :eth-value
     :type  :text}
-   {:label   "Network"
+   {:label   "Token:"
-    :key     :network
+    :key     :token
     :type    :select
-    :options (networks->options networks)}])
+    :options [{:key   :eth
-
+               :value "ETH"}
-(def ^:private default-network
+              {:key   :snt
-  (first networks))
+               :value "SNT"}]}])
-
-(defn- state->opts
-  [{:keys [eth-value network show-right-border?]
-    :or   {eth-value          5.123456
-           show-right-border? true}}]
-  {:network-name       (:name (or network default-network))
-   :icon               (:icon (or network default-network))
-   :eth-value          eth-value
-   :show-right-border? show-right-border?})
-
-(defn- cool-preview
-  []
-  (let [state (reagent/atom {:labels {:eth (i18n/label :t/eth)
-                                      :on  (string/lower-case (i18n/label :t/on))}})]
-    (fn []
-      [rn/view
-       {:margin-bottom 50
-        :padding       16}
-       [preview/customizer state descriptors]
-       [rn/view
-        {:padding-vertical 60
-         :align-items      :center}
-        [network-amount (state->opts @state)]]])))
 
 (defn preview
   []
-  [rn/view
+  (let [state (reagent/atom {:amount "5.123456"
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
+                             :token  :eth})]
-    :flex             1}
+    (fn []
-   [rn/flat-list
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-    {:flex                         1
+       [rn/view
-     :keyboard-should-persist-taps :always
+        {:style {:flex               1
-     :header                       [cool-preview]
+                 :padding-horizontal 20}}
-     :key-fn                       str}]])
+        [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
+        [quo/network-amount @state]]])))

src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs

@@ -1,75 +0,0 @@
-(ns status-im2.contexts.quo-preview.wallet.network-breakdown
-  (:require [clojure.string :as string]
-            [quo2.components.wallet.network-breakdown :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [utils.i18n :as i18n]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:label "Ethereum Value"
-    :key   :top-value
-    :type  :text}
-   {:label "Conversion"
-    :key   :conversion
-    :type  :text}
-   {:label "Network"
-    :key   :network
-    :type  :text}
-   {:label   "Icon"
-    :key     :icon
-    :type    :select
-    :options [{:key   :main-icons/arbitrum
-               :value "Arbitrum"}
-              {:key   :main-icons/optimism
-               :value "Optimism"}
-              {:key   :main-icons/zksync
-               :value "ZK Sync"}
-              {:key   :main-icons/arbitrum
-               :value "Arbitrum"}
-              {:key   :main-icons/ethereum
-               :value "Ethereum"}]}])
-
-(defn cool-preview
-  []
-  (let [state (reagent/atom {:icon       :main-icons/arbitrum
-                             :network    "Mainnet"
-                             :conversion "5.1234"
-                             :top-value  "10 ETH"
-                             :labels     {:eth (i18n/label :t/eth)
-                                          :on  (string/lower-case (i18n/label :t/on))}})]
-    (fn []
-      [rn/view
-       {:margin-bottom 50
-        :padding       16}
-       [rn/view {:flex 1}
-        [preview/customizer state descriptor]]
-       [rn/view
-        {:padding-vertical 60
-         :flex-direction   :row
-         :justify-content  :center}
-        [quo2/network-breakdown @state]]
-       [rn/touchable-opacity
-        {:style    {:background-color colors/neutral-100
-                    :width            100}
-         :on-press (fn []
-                     (swap! state update-in
-                       [:network-conversions]
-                       conj
-                       {:conversion (:conversion @state)
-                        :icon       (:icon @state)
-                        :network    (:network @state)}))}
-        [rn/text {:style {:color colors/white}} "Add current conversion"]]])))
-
-(defn preview-network-breakdown
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white
-                                           colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/wallet/token_overview.cljs

@@ -1,74 +0,0 @@
-(ns status-im2.contexts.quo-preview.wallet.token-overview
-  (:require [quo2.components.wallet.token-overview :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [utils.i18n :as i18n]
-            [status-im.utils.currency :as currencies]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]))
-
-(def descriptor
-  [{:label   "Token:"
-    :key     :token
-    :type    :select
-    :options [{:key   "SNT"
-               :value "SNT"}
-              {:key   "ETH"
-               :value "ETH"}]}
-
-   {:label "Account Balance:"
-    :key   :account-balance
-    :type  :text}
-   {:label "Price:"
-    :key   :price
-    :type  :text}
-   {:label "Percentage-Increase:"
-    :key   :percentage-change
-    :type  :text}
-   {:label   "Currency:"
-    :key     :currency
-    :type    :select
-    :options [{:key   :usd
-               :value "$"}
-              {:key   :eur
-               :value "€"}]}])
-
-(def eth-token (resources/get-token :eth))
-(def snt-token (resources/get-token :snt))
-
-(defn cool-preview
-  []
-  (let [state (reagent/atom {:token             "ETH"
-                             :account-balance   "3.00"
-                             :price             "1.00"
-                             :percentage-change "-3.0"
-                             :currency          (get-in currencies/currencies [:usd :symbol])})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:border       :black
-          :border-width 1
-          :align-items  :center}
-         [quo2/token-balance
-          (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
-         [rn/view
-          {:padding-vertical 25
-           :align-items      :center}]
-         [quo2/token-price
-          (assoc @state
-                 :token-img-src (if (= (:token @state) "ETH") eth-token snt-token)
-                 :label         (i18n/label :token-price))]]]])))
-
-(defn preview-token-overview
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])