chore: add sub to get network info (#17650)

src/quo/foundations/resources.cljs

@@ -37,7 +37,7 @@
   [k]
   (get tokens k))
 
-(def networks
+(def ^:private networks
   {:arbitrum (js/require "../resources/images/networks/Arbitrum.png")
    :ethereum (js/require "../resources/images/networks/Ethereum.png")
    :gnosis   (js/require "../resources/images/networks/Gnosis.png")

src/status_im2/constants.cljs

@@ -358,3 +358,17 @@
 
 (def ^:const ens-action-type-register 1)
 (def ^:const ens-action-type-set-pub-key 2)
+
+;; wallet
+(def ^:const mainnet-chain-id 1)
+(def ^:const optimism-chain-id 10)
+(def ^:const arbitrum-chain-id 42161)
+(def ^:const goerli-chain-id 5)
+
+(def ^:const mainnet-short-name "eth")
+(def ^:const optimism-short-name "opt")
+(def ^:const arbitrum-short-name "arb1")
+
+(def ^:const mainnet-network-name :ethereum)
+(def ^:const optimism-network-name :optimism)
+(def ^:const arbitrum-network-name :arbitrum)

src/status_im2/contexts/profile/login/events.cljs

@@ -22,6 +22,7 @@
     [status-im2.contexts.profile.rpc :as profile.rpc]
     [status-im2.contexts.push-notifications.events :as notifications]
     [status-im2.contexts.shell.activity-center.events :as activity-center]
+    [status-im2.contexts.wallet.events :as wallet]
     [status-im2.navigation.events :as navigation]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]
@@ -91,6 +92,7 @@
               (activity-center/notifications-fetch-pending-contact-requests)
               (activity-center/update-seen-state)
               (activity-center/notifications-fetch-unread-count)
+              (wallet/get-ethereum-chains)
               (redirect-to-root))))
 
 ;; login phase 2, we want to load and show chats faster so we split login into 2 phases

src/status_im2/contexts/wallet/account/tabs/about/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [status-im2.contexts.wallet.account.tabs.about.style :as style]
     [status-im2.contexts.wallet.common.temp :as temp]
@@ -9,20 +10,21 @@
     [utils.re-frame :as rf]))
 
 (defn description
-  [{:keys [address]}]
+  [{:keys [address theme]}]
-  [quo/text {:size :paragraph-2}
+  (let [networks-list (rf/sub [:wallet/network-details])]
-   (map (fn [network]
+    [quo/text {:size :paragraph-2}
-          ^{:key (str network)}
+     (map (fn [{:keys [chain-id short-name network-name]}]
-          [quo/text
+            ^{:key (str chain-id short-name)}
-           {:size   :paragraph-2
+            [quo/text
-            :weight :medium
+             {:size   :paragraph-2
-            :style  {:color (colors/custom-color network)}}
+              :weight :medium
-           (str (subs (name network) 0 3) (when (= network :arbitrum) "1") ":")])
+              :style  {:color (colors/resolve-color network-name theme)}}
-        temp/network-names)
+             (str short-name ":")])
-   [quo/text
+          networks-list)
-    {:size   :paragraph-2
+     [quo/text
-     :weight :monospace}
+      {:size   :paragraph-2
-    address]])
+       :weight :monospace}
+      address]]))
 
 (defn about-options
   []
@@ -49,12 +51,16 @@
       :accessibility-label :share-address
       :label               (i18n/label :t/share-address)}]]])
 
-(defn view
+(defn- view-internal
-  []
+  [{:keys [theme]}]
   [rn/view {:style style/about-tab}
    [quo/data-item
     (merge temp/data-item-state
-           {:custom-subtitle (fn [] [description {:address temp/address}])
+           {:custom-subtitle (fn [] [description
+                                     {:theme   theme
+                                      :address temp/address}])
             :container-style {:margin-bottom 12}
             :on-press        #(rf/dispatch [:show-bottom-sheet {:content about-options}])})]
    [quo/account-origin temp/account-origin-state]])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/account/view.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.wallet.account.view
   (:require
     [quo.core :as quo]
-    [quo.foundations.resources :as quo.resources]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
@@ -49,11 +48,6 @@
                  :padding-bottom     8}
      :render-fn quo/settings-item}]])
 
-(def ^:private networks-list
-  [{:source (quo.resources/get-network :ethereum)}
-   {:source (quo.resources/get-network :optimism)}
-   {:source (quo.resources/get-network :arbitrum)}])
-
 (def tabs-data
   [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
    {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
@@ -67,34 +61,35 @@
   (let [top          (safe-area/get-top)
         selected-tab (reagent/atom (:id (first tabs-data)))]
     (fn []
-      [rn/view
+      (let [networks (rf/sub [:wallet/network-details])]
-       {:style {:flex       1
+        [rn/view
-                :margin-top top}}
+         {:style {:flex       1
-       [quo/page-nav
+                  :margin-top top}}
-        {:type              :wallet-networks
+         [quo/page-nav
-         :background        :blur
+          {:type              :wallet-networks
-         :icon-name         :i/close
+           :background        :blur
-         :on-press          #(rf/dispatch [:navigate-back])
+           :icon-name         :i/close
-         :networks          networks-list
+           :on-press          #(rf/dispatch [:navigate-back])
-         :networks-on-press #(js/alert "Pressed Networks")
+           :networks          networks
-         :right-side        :account-switcher
+           :networks-on-press #(js/alert "Pressed Networks")
-         :account-switcher  {:customization-color :purple
+           :right-side        :account-switcher
-                             :on-press            #(rf/dispatch [:show-bottom-sheet
+           :account-switcher  {:customization-color :purple
-                                                                 {:content             account-options
+                               :on-press            #(rf/dispatch [:show-bottom-sheet
-                                                                  :gradient-cover?     true
+                                                                   {:content             account-options
-                                                                  :customization-color :purple}])
+                                                                    :gradient-cover?     true
-                             :emoji               "🍑"}}]
+                                                                    :customization-color :purple}])
-       [quo/account-overview temp/account-overview-state]
+                               :emoji               "🍑"}}]
-       [quo/wallet-graph {:time-frame :empty}]
+         [quo/account-overview temp/account-overview-state]
-       [quo/wallet-ctas
+         [quo/wallet-graph {:time-frame :empty}]
-        {:send-action #(rf/dispatch [:open-modal :wallet-select-address])
+         [quo/wallet-ctas
-         :buy-action  #(rf/dispatch [:show-bottom-sheet
+          {:send-action #(rf/dispatch [:open-modal :wallet-select-address])
-                                     {:content buy-drawer}])}]
+           :buy-action  #(rf/dispatch [:show-bottom-sheet
-       [quo/tabs
+                                       {:content buy-drawer}])}]
-        {:style          style/tabs
+         [quo/tabs
-         :size           32
+          {:style          style/tabs
-         :default-active @selected-tab
+           :size           32
-         :data           tabs-data
+           :default-active @selected-tab
-         :on-change      #(reset! selected-tab %)
+           :data           tabs-data
-         :scrollable?    true}]
+           :on-change      #(reset! selected-tab %)
-       [tabs/view {:selected-tab @selected-tab}]])))
+           :scrollable?    true}]
+         [tabs/view {:selected-tab @selected-tab}]]))))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -9,10 +9,6 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(def networks
-  [{:source (quo.resources/get-network :ethereum)}
-   {:source (quo.resources/get-network :optimism)}
-   {:source (quo.resources/get-network :arbitrum)}])
 
 (defn wallet-temporary-navigation
   []
@@ -28,7 +24,8 @@
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
     "Saved Addresses"]])
 
-(def wallet-overview-state
+(defn wallet-overview-state
+  [networks]
   {:state             :default
    :time-frame        :none
    :metrics           :none
@@ -111,8 +108,6 @@
    :account             :default
    :customization-color :blue})
 
-(def network-names [:ethereum :optimism :arbitrum])
-
 (def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4")
 
 (def data-item-state

src/status_im2/contexts/wallet/events.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.wallet.events
   (:require
     [native-module.core :as native-module]
+    [status-im2.data-store.wallet :as data-store]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]
     [utils.security.core :as security]))
@@ -51,3 +52,26 @@
                       (rf/dispatch [:wallet/add-account password account-details
                                     (first derived-adress-details)]))]
      {:fx [[:dispatch [:wallet/create-derived-addresses password account-details on-success]]]})))
+
+(rf/defn get-ethereum-chains
+  {:events [:wallet/get-ethereum-chains]}
+  [{:keys [db]}]
+  {:fx [[:json-rpc/call
+         [{:method     "wallet_getEthereumChains"
+           :params     []
+           :on-success [:wallet/get-ethereum-chains-success]
+           :on-error   #(log/info "failed to get networks " %)}]]]})
+
+(rf/reg-event-fx
+ :wallet/get-ethereum-chains-success
+ (fn [{:keys [db]} [data]]
+   (let [network-data
+         {:test (map #(->> %
+                           :Test
+                           data-store/<-rpc)
+                     data)
+          :prod (map #(->> %
+                           :Prod
+                           data-store/<-rpc)
+                     data)}]
+     {:db (assoc db :wallet/networks network-data)})))

src/status_im2/contexts/wallet/home/view.cljs

@@ -51,33 +51,35 @@
   (let [top          (safe-area/get-top)
         selected-tab (reagent/atom (:id (first tabs-data)))]
     (fn []
-      [rn/view
+      (let [networks (rf/sub [:wallet/network-details])]
-       {:style {:margin-top top
+        [rn/view
-                :flex       1}}
+         {:style {:margin-top top
-       [common.top-nav/view]
+                  :flex       1}}
-       [rn/view {:style style/overview-container}
+         [common.top-nav/view]
-        [quo/wallet-overview temp/wallet-overview-state]]
+         [rn/view {:style style/overview-container}
-       [rn/pressable
+          [quo/wallet-overview (temp/wallet-overview-state networks)]]
-        {:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])}
+         [rn/pressable
-        [quo/wallet-graph {:time-frame :empty}]]
+          {:on-long-press #(rf/dispatch [:show-bottom-sheet
-       [rn/view {:style style/accounts-container}
+                                         {:content temp/wallet-temporary-navigation}])}
-        [rn/flat-list
+          [quo/wallet-graph {:time-frame :empty}]]
-         {:style      style/accounts-list
+         [rn/view {:style style/accounts-container}
-          :data       account-cards
+          [rn/flat-list
-          :horizontal true
+           {:style      style/accounts-list
-          :separator  [rn/view {:style {:width 12}}]
+            :data       account-cards
-          :render-fn  quo/account-card}]]
+            :horizontal true
-       [quo/tabs
+            :separator  [rn/view {:style {:width 12}}]
-        {:style          style/tabs
+            :render-fn  quo/account-card}]]
-         :size           32
+         [quo/tabs
-         :default-active @selected-tab
+          {:style          style/tabs
-         :data           tabs-data
+           :size           32
-         :on-change      #(reset! selected-tab %)}]
+           :default-active @selected-tab
-       (case @selected-tab
+           :data           tabs-data
-         :assets       [rn/flat-list
+           :on-change      #(reset! selected-tab %)}]
-                        {:render-fn               token-value/view
+         (case @selected-tab
-                         :data                    temp/tokens
+           :assets       [rn/flat-list
-                         :key                     :assets-list
+                          {:render-fn               token-value/view
-                         :content-container-style {:padding-horizontal 8}}]
+                           :data                    temp/tokens
-         :collectibles [collectibles/view]
+                           :key                     :assets-list
-         [activity/view])])))
+                           :content-container-style {:padding-horizontal 8}}]
+           :collectibles [collectibles/view]
+           [activity/view])]))))

src/status_im2/data_store/wallet.cljs

@@ -0,0 +1,25 @@
+(ns status-im2.data-store.wallet
+  (:require
+    clojure.set))
+
+(defn <-rpc
+  [network]
+  (-> network
+      (clojure.set/rename-keys
+       {:Prod                   :prod
+        :Test                   :test
+        :isTest                 :test?
+        :tokenOverrides         :token-overrides
+        :rpcUrl                 :rpc-url
+        :chainColor             :chain-color
+        :chainName              :chain-name
+        :nativeCurrencyDecimals :native-currency-decimals
+        :relatedChainId         :related-chain-id
+        :shortName              :short-name
+        :chainId                :chain-id
+        :originalFallbackURL    :original-fallback-url
+        :originalRpcUrl         :original-rpc-url
+        :fallbackURL            :fallback-url
+        :blockExplorerUrl       :block-explorer-url
+        :nativeCurrencySymbol   :native-currency-symbol
+        :nativeCurrencyName     :native-currency-symbol})))

src/status_im2/subs/root.cljs

@@ -10,7 +10,8 @@
     status-im2.subs.onboarding
     status-im2.subs.pairing
     status-im2.subs.profile
-    status-im2.subs.shell))
+    status-im2.subs.shell
+    status-im2.subs.wallet.networks))
 
 (defn reg-root-key-sub
   [sub-name db-key]
@@ -147,6 +148,7 @@
 ;;wallet
 (reg-root-key-sub :wallet/scanned-address :wallet/scanned-address)
 (reg-root-key-sub :wallet/create-account :wallet/create-account)
+(reg-root-key-sub :wallet/networks :wallet/networks)
 
 ;;debug
 (when js/goog.DEBUG

src/status_im2/subs/wallet/networks.cljs

@@ -0,0 +1,43 @@
+(ns status-im2.subs.wallet.networks
+  (:require [quo.foundations.resources :as resources]
+            [re-frame.core :as re-frame]
+            [status-im2.constants :as constants]))
+
+(re-frame/reg-sub
+ :wallet/filtered-networks-by-mode
+ :<- [:wallet/networks]
+ (fn [networks [_ test?]]
+   (get networks (if test? :test :prod))))
+
+(def mainnet-network-details
+  {:source       (resources/get-network constants/mainnet-network-name)
+   :short-name   constants/mainnet-short-name
+   :network-name constants/mainnet-network-name})
+
+(def arbitrum-network-details
+  {:source       (resources/get-network constants/arbitrum-network-name)
+   :short-name   constants/arbitrum-short-name
+   :network-name constants/arbitrum-network-name})
+
+(def optimism-network-details
+  {:source       (resources/get-network constants/optimism-network-name)
+   :short-name   constants/optimism-short-name
+   :network-name constants/optimism-network-name})
+
+(def network-list
+  {constants/mainnet-chain-id  mainnet-network-details
+   constants/goerli-chain-id   mainnet-network-details
+   constants/arbitrum-chain-id arbitrum-network-details
+   constants/optimism-chain-id optimism-network-details})
+
+(re-frame/reg-sub
+ :wallet/network-details
+ :<- [:wallet/filtered-networks-by-mode false]
+ (fn [networks]
+   (keep
+    (fn [{:keys [chain-id related-chain-id test?]}]
+      (let [network-details (get network-list (if test? related-chain-id chain-id))]
+        (assoc network-details
+               :chain-id         chain-id
+               :related-chain-id related-chain-id)))
+    networks)))

src/status_im2/subs/wallet/networks_test.cljs

@@ -0,0 +1,44 @@
+(ns status-im2.subs.wallet.networks-test
+  (:require
+    [cljs.test :refer [is testing]]
+    [re-frame.db :as rf-db]
+    status-im2.subs.root
+    status-im2.subs.wallet.networks
+    [test-helpers.unit :as h]
+    [utils.re-frame :as rf]))
+
+(def network-data
+  {:test [{:test?            true
+           :short-name       "eth"
+           :network-name     :ethereum
+           :related-chain-id 1}
+          {:test?            true
+           :short-name       "arb1"
+           :related-chain-id 42161}
+          {:test?            true
+           :short-name       "opt"
+           :related-chain-id 10}]
+   :prod [{:test?      false
+           :short-name "eth"
+           :chain-id   1}
+          {:test?      false
+           :short-name "arb1"
+           :chain-id   42161}
+          {:test?      false
+           :short-name "opt"
+           :chain-id   10}]})
+
+(h/deftest-sub :wallet/network-details
+  [sub-name]
+  (testing "returns data with prod"
+    (swap! rf-db/app-db assoc :wallet/networks network-data)
+    (is (= [{:network-name :ethereum
+             :short-name   "eth"
+             :chain-id     1}
+            {:network-name :arbitrum
+             :short-name   "arb1"
+             :chain-id     42161}
+            {:network-name :optimism
+             :short-name   "opt"
+             :chain-id     10}]
+           (map #(dissoc % :source :related-chain-id) (rf/sub [sub-name]))))))