Basic market page (#22523)

vkjr · web-flow · commit fa7321729c9e · 2025-04-24T09:52:43.000+01:00
* Market page basic implementation

* fix safe area

* feature flag

* review notes fixed
diff --git a/.env b/.env
@@ -39,3 +39,4 @@ API_LOGGING_ENABLED=1
 SENTRY_ENABLED=0
 SENTRY_ENVIRONMENT=ci-main
 USE_PUBLIC_LOG_DIR=0
+FLAG_MARKET_ENABLED=0
diff --git a/resources/images/icons2/24x24/swap@2x.png b/resources/images/icons2/24x24/swap@2x.png
diff --git a/resources/images/icons2/24x24/swap@3x.png b/resources/images/icons2/24x24/swap@3x.png
diff --git a/src/quo/components/list_items/market_token/style.cljs b/src/quo/components/list_items/market_token/style.cljs
@@ -54,4 +54,3 @@
 (defn market-cap
   [theme]
   {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
-
diff --git a/src/status_im/contexts/market/style.cljs b/src/status_im/contexts/market/style.cljs
@@ -0,0 +1,41 @@
+(ns status-im.contexts.market.style
+  (:require
+    [quo.foundations.colors :as colors]
+    [react-native.safe-area :as safe-area]
+    [status-im.contexts.shell.constants :as constants]))
+
+(defn header-background
+  [theme]
+  (colors/theme-colors colors/white colors/neutral-95 theme))
+
+(defn swap-header-container
+  [theme]
+  {:background-color   (header-background theme)
+   :padding-horizontal 20
+   :padding-vertical   12
+   :flex-direction     :row
+   :justify-content    :space-between})
+
+(defn sort-header-container
+  [theme]
+  {:background-color   (header-background theme)
+   :padding-horizontal 20
+   :padding-vertical   12
+   :align-items        :center
+   :flex-direction     :row})
+
+(defn market-header-text
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn sort-text
+  [theme]
+  {:color (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)})
+
+(def list-container
+  {:padding-bottom constants/floating-shell-button-height})
+
+(defn home-container
+  []
+  {:margin-top safe-area/top
+   :flex       1})
diff --git a/src/status_im/contexts/market/view.cljs b/src/status_im/contexts/market/view.cljs
@@ -0,0 +1,68 @@
+(ns status-im.contexts.market.view
+  (:require
+    [quo.context]
+    [quo.core :as quo]
+    [quo.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [status-im.common.home.top-nav.view :as common.top-nav]
+    [status-im.common.refreshable-flat-list.view :as refreshable-flat-list]
+    [status-im.contexts.market.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn swap-header
+  []
+  (let [theme (quo.context/use-theme)]
+    [rn/view {:style (style/swap-header-container theme)}
+     [quo/text
+      {:weight :semi-bold
+       :size   :heading-1
+       :style  (style/market-header-text theme)}
+      (i18n/label :t/market)]
+     [quo/button
+      {:size      32
+       :icon-left :i/swap
+       :on-press  #()}
+      (i18n/label :t/swap)]]))
+
+(defn sort-header
+  []
+  (let [theme (quo.context/use-theme)]
+    [rn/view {:style (style/sort-header-container theme)}
+     [quo/text
+      {:size  :paragraph-2
+       :style (style/sort-text theme)}
+      (i18n/label :t/market-cap)]
+     [quo/icon :i/arrow-down
+      {:size            12
+       :color           colors/neutral-50
+       :container-style {:margin-left 4}}]]))
+
+(defn token
+  [token-data]
+  [quo/market-token token-data])
+
+(defn view
+  []
+  (let [tokens-loading?                (rf/sub [:wallet/home-tokens-loading?])
+        tokens                         (rf/sub [:market/tokens])
+        [init-loaded? set-init-loaded] (rn/use-state false)]
+    (rn/use-effect
+     #(when (and (boolean? tokens-loading?) (not tokens-loading?) (not init-loaded?))
+        (set-init-loaded true))
+     [tokens-loading?])
+    [rn/view {:style (style/home-container)}
+     [common.top-nav/view]
+     [refreshable-flat-list/view
+      {:refresh-control         [rn/refresh-control
+                                 {:refreshing (and tokens-loading? init-loaded?)
+                                  :colors     [colors/neutral-40]
+                                  :tint-color colors/neutral-40
+                                  :on-refresh #()}]
+       :header                  [rn/view
+                                 [swap-header]
+                                 [sort-header]]
+       :content-container-style style/list-container
+       :sticky-header-indices   [0]
+       :data                    tokens
+       :render-fn               token}]]))
diff --git a/src/status_im/contexts/shell/bottom_tabs/view.cljs b/src/status_im/contexts/shell/bottom_tabs/view.cljs
@@ -8,11 +8,13 @@
     [status-im.config :as config]
     [status-im.contexts.shell.bottom-tabs.style :as style]
     [status-im.contexts.shell.constants :as shell.constants]
+    [status-im.feature-flags :as ff]
     [utils.re-frame :as rf]))
 
 (defn bottom-tab
-  [icon stack-id shared-values notifications-data]
-  (let [customization-color (rf/sub [:profile/customization-color])
+  [icon stack-id shared-values]
+  (let [notifications-data  (rf/sub [:shell/bottom-tabs-notifications-data])
+        customization-color (rf/sub [:profile/customization-color])
         on-press            (rn/use-callback #(rf/dispatch [:shell/change-tab stack-id]))
         icon-color          (->> stack-id
                                  (get shell.constants/tabs-icon-color-keywords)
@@ -29,8 +31,7 @@
 
 (defn view
   [shared-values]
-  (let [notifications-data             (rf/sub [:shell/bottom-tabs-notifications-data])
-        communities-double-tab-gesture (-> (gesture/gesture-tap)
+  (let [communities-double-tab-gesture (-> (gesture/gesture-tap)
                                            (gesture/number-of-taps 2)
                                            (gesture/on-start
                                             (fn [_event]
@@ -44,10 +45,12 @@
      [reanimated/view
       {:style (style/bottom-tabs-container (:bottom-tabs-height shared-values))}
       [rn/view {:style (style/bottom-tabs)}
-       [bottom-tab :i/wallet :screen/wallet-stack shared-values notifications-data]
+       [bottom-tab :i/wallet :screen/wallet-stack shared-values]
+       (when (ff/enabled? ::ff/market)
+         [bottom-tab :i/swap :screen/market-stack shared-values])
        [gesture/gesture-detector {:gesture messages-double-tap-gesture}
-        [bottom-tab :i/messages :screen/chats-stack shared-values notifications-data]]
+        [bottom-tab :i/messages :screen/chats-stack shared-values]]
        [gesture/gesture-detector {:gesture communities-double-tab-gesture}
-        [bottom-tab :i/communities :screen/communities-stack shared-values notifications-data]]
+        [bottom-tab :i/communities :screen/communities-stack shared-values]]
        (when config/show-not-implemented-features?
-         [bottom-tab :i/browser :screen/browser-stack shared-values notifications-data])]]]))
+         [bottom-tab :i/browser :screen/browser-stack shared-values])]]]))
diff --git a/src/status_im/contexts/shell/constants.cljs b/src/status_im/contexts/shell/constants.cljs
@@ -10,23 +10,27 @@
 
 ;; Stacks
 (def stacks-ids
-  #{:screen/communities-stack :screen/chats-stack :screen/wallet-stack :screen/browser-stack})
+  #{:screen/communities-stack :screen/chats-stack :screen/wallet-stack :screen/browser-stack
+    :screen/market-stack})
 
 ;; Keywords
 (def ^:const stacks-opacity-keywords
   {:screen/communities-stack :communities-stack-opacity
    :screen/chats-stack       :chats-stack-opacity
    :screen/wallet-stack      :wallet-stack-opacity
+   :screen/market-stack      :market-stack-opacity
    :screen/browser-stack     :browser-stack-opacity})
 
 (def ^:const tabs-icon-color-keywords
   {:screen/communities-stack :communities-tab-icon-color
    :screen/chats-stack       :chats-tab-icon-opacity
    :screen/wallet-stack      :wallet-tab-icon-opacity
+   :screen/market-stack      :market-tab-icon-opacity
    :screen/browser-stack     :browser-tab-icon-opacity})
 
 (def ^:const stacks-z-index-keywords
   {:screen/communities-stack :communities-stack-z-index
    :screen/chats-stack       :chats-stack-z-index
    :screen/wallet-stack      :wallet-stack-z-index
+   :screen/market-stack      :market-stack-z-index
    :screen/browser-stack     :browser-stack-z-index})
diff --git a/src/status_im/contexts/shell/home_stack/view.cljs b/src/status_im/contexts/shell/home_stack/view.cljs
@@ -6,6 +6,7 @@
     [react-native.reanimated :as reanimated]
     [status-im.contexts.chat.home.view :as chat]
     [status-im.contexts.communities.home.view :as communities]
+    [status-im.contexts.market.view :as market]
     [status-im.contexts.shell.constants :as shell.constants]
     [status-im.contexts.shell.home-stack.style :as style]
     [status-im.contexts.shell.state :as state]
@@ -17,7 +18,8 @@
     :screen/communities-stack @state/load-communities-stack?
     :screen/chats-stack       @state/load-chats-stack?
     :screen/browser-stack     @state/load-browser-stack?
-    :screen/wallet-stack      @state/load-wallet-stack?))
+    :screen/wallet-stack      @state/load-wallet-stack?
+    :screen/market-stack      @state/load-market-stack?))
 
 (defn- f-stack-view
   [stack-id shared-values]
@@ -32,6 +34,7 @@
      :screen/communities-stack [communities/view]
      :screen/chats-stack       [chat/view]
      :screen/wallet-stack      [wallet/view]
+     :screen/market-stack      [market/view]
      :screen/browser-stack     [browser.stack/browser-stack]
      [:<>])])
 
@@ -48,4 +51,5 @@
      [lazy-screen :screen/communities-stack shared-values theme]
      [lazy-screen :screen/chats-stack shared-values theme]
      [lazy-screen :screen/browser-stack shared-values theme]
-     [lazy-screen :screen/wallet-stack shared-values theme]]))
+     [lazy-screen :screen/wallet-stack shared-values theme]
+     [lazy-screen :screen/market-stack shared-values theme]]))
diff --git a/src/status_im/contexts/shell/state.cljs b/src/status_im/contexts/shell/state.cljs
@@ -11,4 +11,5 @@
 (def load-communities-stack? (reagent/atom false))
 (def load-chats-stack? (reagent/atom false))
 (def load-wallet-stack? (reagent/atom false))
+(def load-market-stack? (reagent/atom false))
 (def load-browser-stack? (reagent/atom false))
diff --git a/src/status_im/contexts/shell/utils.cljs b/src/status_im/contexts/shell/utils.cljs
@@ -17,6 +17,7 @@
     :screen/communities-stack (reset! state/load-communities-stack? true)
     :screen/chats-stack       (reset! state/load-chats-stack? true)
     :screen/wallet-stack      (reset! state/load-wallet-stack? true)
+    :screen/market-stack      (reset! state/load-market-stack? true)
     :screen/browser-stack     (reset! state/load-browser-stack? true)
     ""))
 
@@ -33,4 +34,5 @@
     (reset! state/load-communities-stack? (= selected-stack-id :screen/communities-stack))
     (reset! state/load-chats-stack? (= selected-stack-id :screen/chats-stack))
     (reset! state/load-wallet-stack? (= selected-stack-id :screen/wallet-stack))
+    (reset! state/load-market-stack? (= selected-stack-id :screen/market-stack))
     (reset! state/load-browser-stack? (= selected-stack-id :screen/browser-stack))))
diff --git a/src/status_im/feature_flags.cljs b/src/status_im/feature_flags.cljs
@@ -34,7 +34,8 @@
    ::wallet.saved-addresses             (enabled-in-env? :WALLET_SAVED_ADDRESSES)
    ::wallet.wallet-connect              (enabled-in-env? :FLAG_WALLET_CONNECT_ENABLED)
    ::wallet.custom-network-amounts      (enabled-in-env? :FLAG_WALLET_CUSTOM_NETWORK_AMOUNTS_ENABLED)
-   ::wallet.transaction-params          (enabled-in-env? :FLAG_WALLET_TRANSACTION_PARAMS_ENABLED)})
+   ::wallet.transaction-params          (enabled-in-env? :FLAG_WALLET_TRANSACTION_PARAMS_ENABLED)
+   ::market                             (enabled-in-env? :FLAG_MARKET_ENABLED)})
 
 (defonce ^:private feature-flags-config
   (reagent/atom initial-flags))
diff --git a/src/status_im/subs/market.cljs b/src/status_im/subs/market.cljs
@@ -0,0 +1,91 @@
+(ns status-im.subs.market
+  (:require
+    [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :market/tokens
+ (fn [_db _]
+   [{:token             :btc
+     :token-rank        1
+     :token-name        "Bitcoin"
+     :market-cap        "$1.63T"
+     :price             "$82,275.52"
+     :percentage-change 4.35}
+    {:token             :eth
+     :token-rank        2
+     :token-name        "Ethereum"
+     :market-cap        "$188.13B"
+     :price             "$1,558.92"
+     :percentage-change 4.15}
+    {:token             :usdt
+     :token-rank        3
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :xrp
+     :token-rank        5
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :bnb
+     :token-rank        6
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :sol
+     :token-rank        7
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :usdc
+     :token-rank        8
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :btc
+     :token-rank        1
+     :token-name        "Bitcoin"
+     :market-cap        "$1.63T"
+     :price             "$82,275.52"
+     :percentage-change 4.35}
+    {:token             :eth
+     :token-rank        2
+     :token-name        "Ethereum"
+     :market-cap        "$188.13B"
+     :price             "$1,558.92"
+     :percentage-change 4.15}
+    {:token             :usdt
+     :token-rank        3
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :xrp
+     :token-rank        5
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :bnb
+     :token-rank        6
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :sol
+     :token-rank        7
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}
+    {:token             :usdc
+     :token-rank        8
+     :token-name        "Tether"
+     :market-cap        "$144.24B"
+     :price             "$0.9993"
+     :percentage-change -0.0001}]))
diff --git a/src/status_im/subs/root.cljs b/src/status_im/subs/root.cljs
@@ -10,6 +10,7 @@
     status-im.subs.contact
     status-im.subs.general
     status-im.subs.keycard
+    status-im.subs.market
     status-im.subs.messages
     status-im.subs.onboarding
     status-im.subs.pairing
diff --git a/translations/en.json b/translations/en.json
@@ -1598,6 +1598,8 @@
   "mark-as-read": "Mark as read",
   "mark-untrustworthy": "Mark as Untrustworthy",
   "mark-user-untrustworthy": "Mark {{username}} as untrustworthy",
+  "market": "Market",
+  "market-cap": "Market cap",
   "master-account": "Master account",
   "max": "Max: {{number}}",
   "max-2-decimals": "Max. 2 decimals",
