review

Author: OmarBasem

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

@@ -1,4 +1,5 @@
-(ns quo2.components.wallet.network-amount.style)
+(ns quo2.components.wallet.network-amount.style
+  (:require [quo2.foundations.colors :as colors]))
 
 (def container
   {:flex-direction :row
@@ -8,3 +9,9 @@
 (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

@@ -2,13 +2,13 @@
   (:require
     [clojure.string :as str]
     [quo2.components.markdown.text :as text]
-    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
     [react-native.core :as rn]
-    [status-im2.common.resources :as resources]
-    [quo2.components.wallet.network-amount.style :as style]))
+    [quo2.components.wallet.network-amount.style :as style]
+    [quo2.foundations.resources :as resources]))
 
-(defn network-amount
-  [{:keys [amount token]}]
+(defn- network-amount-internal
+  [{:keys [amount token theme]}]
   [rn/view {:style style/container}
    [rn/image
     {:source (resources/tokens token)
@@ -19,6 +19,6 @@
      :style style/text}
     (str amount " " (str/upper-case (clj->js token)))]
    [rn/view
-    {:style {:width            1
-             :height           8
-             :background-color (colors/theme-colors colors/neutral-40 colors/neutral-50)}}]])
+    {:style (style/divider theme)}]])
+
+(def network-amount (quo.theme/with-theme network-amount-internal))

src/quo2/foundations/resources.cljs

@@ -6,6 +6,16 @@
    :keycard-chip-dark  (js/require "../resources/images/ui2/keycard-chip-dark.png")
    :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.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")})
+
 (defn get-image
   [k]
   (get ui 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")

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