feat(wallet) - implement network configuration on an account (#17862)

src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs

@@ -23,7 +23,8 @@
 
 (defn- options
   [{:keys [theme show-account-selector? options-height]}]
-  (let [{:keys [name color emoji address]} (rf/sub [:wallet/current-viewing-account])]
+  (let [{:keys [name color emoji address]} (rf/sub [:wallet/current-viewing-account])
+        network-preference-details         (rf/sub [:wallet/network-preference-details])]
     [rn/view
      {:on-layout #(reset! options-height (oops/oget % "nativeEvent.layout.height"))
       :style     (when show-account-selector? style/options-container)}
@@ -44,9 +45,7 @@
      [quo/drawer-top
       {:title                name
        :type                 :account
-       :networks             [{:network-name :ethereum :short-name "eth"}
+       :networks             network-preference-details
-                              {:network-name :optimism :short-name "opt"}
-                              {:network-name :arbitrum :short-name "arb1"}]
        :description          address
        :account-avatar-emoji emoji
        :customization-color  color}]

src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs

@@ -1,42 +1,57 @@
 (ns status-im2.contexts.wallet.common.sheets.network-preferences.view
-  (:require [quo.core :as quo]
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
             [quo.foundations.colors :as colors]
             [quo.foundations.resources :as resources]
             [quo.theme :as quo.theme]
+            [reagent.core :as reagent]
             [status-im2.contexts.wallet.common.sheets.network-preferences.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(defn- mainnet
-  [account-color]
-  [{:title        "Mainnet"
-    :image        :icon-avatar
-    :image-props  {:icon (resources/get-network :ethereum)
-                   :size :size-20}
-    :action       :selector
-    :action-props {:type                :checkbox
-                   :customization-color account-color}}])
 
-(defn- networks-list
+(defn- make-network-item
-  [account-color]
+  [{:keys [network-name] :as _network}
-  [{:title        "Optimism"
+   {:keys [title color on-change network-preferences state] :as _options}]
+  {:title        (or title (string/capitalize (name network-name)))
    :image        :icon-avatar
-    :image-props  {:icon (resources/get-network :optimism)
+   :image-props  {:icon (resources/get-network network-name)
                   :size :size-20}
    :action       :selector
-    :action-props {:type                :checkbox
+   :action-props {:type                (if (= :default state)
-                   :customization-color account-color}}
+                                         :filled-checkbox
-   {:title        "Arbitrum"
+                                         :checkbox)
-    :image        :icon-avatar
+                  :customization-color color
-    :image-props  {:icon (resources/get-network :arbitrum)
+                  :checked?            (contains? network-preferences network-name)
-                   :size :size-20}
+                  :on-change           on-change}})
-    :action       :selector
-    :action-props {:type                :checkbox
-                   :customization-color account-color}}])
 
 (defn- view-internal
-  [{:keys [on-save theme]}]
+  []
-  (let [{:keys [color address]} (rf/sub [:wallet/current-viewing-account])]
+  (let [state                               (reagent/atom :default)
+        {:keys [color address
+                network-preferences-names]} (rf/sub [:wallet/current-viewing-account])
+        initial-network-preferences-names   network-preferences-names
+        network-preferences-names-state     (reagent/atom #{})
+        toggle-network                      (fn [network-name]
+                                              (reset! state :changed)
+                                              (if (contains? @network-preferences-names-state
+                                                             network-name)
+                                                (swap! network-preferences-names-state disj
+                                                  network-name)
+                                                (swap! network-preferences-names-state conj
+                                                  network-name)))
+        get-current-preferences-names       (fn []
+                                              (if (= @state :default)
+                                                initial-network-preferences-names
+                                                @network-preferences-names-state))]
+    (fn [{:keys [on-save theme]}]
+      (let [network-details  (rf/sub [:wallet/network-details])
+            mainnet          (first network-details)
+            layer-2-networks (rest network-details)
+            current-networks (filter (fn [network]
+                                       (contains? (get-current-preferences-names)
+                                                  (:network-name network)))
+                                     network-details)]
         [:<>
          [quo/drawer-top
           {:title       (i18n/label :t/network-preferences)
@@ -44,27 +59,46 @@
          [quo/data-item
           {:status          :default
            :size            :default
+           :description     :default
            :label           :none
            :blur?           false
            :card?           true
            :title           (i18n/label :t/address)
-       :subtitle        address
+           :custom-subtitle (fn []
-       :subtitle-type   :default
+                              [quo/address-text
+                               {:networks current-networks
+                                :address  address
+                                :format   :long}])
            :container-style (merge style/data-item
                                    {:background-color (colors/theme-colors colors/neutral-2_5
                                                                            colors/neutral-90
                                                                            theme)})}]
          [quo/category
           {:list-type :settings
-       :data      (mainnet color)}]
+           :data      [(make-network-item mainnet
+                                          {:state               @state
+                                           :title               (i18n/label :t/mainnet)
+                                           :color               color
+                                           :network-preferences (get-current-preferences-names)
+                                           :on-change           #(toggle-network (:network-name
+                                                                                  mainnet))})]}]
          [quo/category
           {:list-type :settings
            :label     (i18n/label :t/layer-2)
-       :data      (networks-list color)}]
+           :data      (mapv (fn [network]
+                              (make-network-item network
+                                                 {:state               @state
+                                                  :color               color
+                                                  :network-preferences (get-current-preferences-names)
+                                                  :on-change           #(toggle-network (:network-name
+                                                                                         network))}))
+                            layer-2-networks)}]
          [quo/bottom-actions
-      {:button-one-label (i18n/label :t/update)
+          {:button-one-label (i18n/label :t/confirm)
-       :button-one-props {:disabled?           true
+           :button-one-props {:disabled?           (= @state :default)
-                          :on-press            on-save
+                              :on-press            (fn []
-                          :customization-color color}}]]))
+                                                     (let [chain-ids (map :chain-id current-networks)]
+                                                       (on-save chain-ids)))
+                              :customization-color color}}]]))))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -42,6 +42,10 @@
       (total-raw-balance-in-all-chains)
       (money/token->unit decimals)))
 
+(defn get-account-by-address
+  [accounts address]
+  (some #(when (= (:address %) address) %) accounts))
+
 (defn calculate-raw-balance
   [raw-balance decimals]
   (if-let [n (utils.number/parse-int raw-balance nil)]

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

@@ -18,6 +18,7 @@
                   :name                     :t/edit-wallet-account-name-updated-message
                   :color                    :t/edit-wallet-account-colour-updated-message
                   :emoji                    :t/edit-wallet-account-emoji-updated-message
+                  :prod-preferred-chain-ids :t/edit-wallet-network-preferences-updated-message
                   nil)]
     (rf/dispatch [:toasts/upsert
                   {:id         :edit-account
@@ -55,10 +56,11 @@
                                               :new-value   @edited-account-name
                                               :theme       theme}))]
     (fn []
-      (let [{:keys [name emoji address color]
+      (let [{:keys [name emoji address color] :as account} (rf/sub [:wallet/current-viewing-account])
-             :as   account}  (rf/sub [:wallet/current-viewing-account])
+            network-details                                (rf/sub [:wallet/network-preference-details])
             account-name                                   (or @edited-account-name name)
-            button-disabled? (or (nil? @edited-account-name) (= name @edited-account-name))]
+            button-disabled?                               (or (nil? @edited-account-name)
+                                                               (= name @edited-account-name))]
         [create-or-edit-account/view
          {:page-nav-right-side [{:icon-name :i/delete
                                  :on-press  #(js/alert "Delete account: to be implemented")}]
@@ -86,18 +88,22 @@
            :right-icon      :i/advanced
            :card?           true
            :title           (i18n/label :t/address)
-           :custom-subtitle (fn []
+           :custom-subtitle (fn [] [quo/address-text
-                              [quo/address-text
+                                    {:networks network-details
-                               {:networks [{:network-name :ethereum :short-name "eth"}
-                                           {:network-name :optimism :short-name "opt"}
-                                           {:network-name :arbitrum :short-name "arb1"}]
                                      :address  address
                                      :format   :long}])
            :on-press        (fn []
                               (rf/dispatch [:show-bottom-sheet
-                                            {:content (fn []
+                                            {:content
+                                             (fn []
                                                [network-preferences/view
-                                                         {:on-save #(js/alert "calling on save")}])}]))
+                                                {:on-save (fn [chain-ids]
+                                                            (rf/dispatch [:hide-bottom-sheet])
+                                                            (save-account
+                                                             {:account     account
+                                                              :updated-key :prod-preferred-chain-ids
+                                                              :new-value   chain-ids
+                                                              :theme       theme}))}])}]))
            :container-style style/data-item}]]))))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/subs/wallet/networks.cljs

@@ -34,13 +34,15 @@
  :wallet/network-details
  :<- [:wallet/filtered-networks-by-mode false]
  (fn [networks]
+   (->> networks
         (keep
-    (fn [{:keys [chain-id related-chain-id test?]}]
+         (fn [{:keys [chain-id related-chain-id layer 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)))
+                    :related-chain-id related-chain-id
-    networks)))
+                    :layer            layer))))
+        (sort-by (juxt :layer :short-name)))))
 
 (re-frame/reg-sub
  :wallet/network-details-by-chain-id

src/status_im2/subs/wallet/networks_test.cljs

@@ -11,22 +11,28 @@
   {:test [{:test?            true
            :short-name       "eth"
            :network-name     :ethereum
-           :related-chain-id 1}
+           :related-chain-id 1
+           :layer            1}
           {:test?            true
            :short-name       "arb1"
-           :related-chain-id 42161}
+           :related-chain-id 42161
+           :layer            2}
           {:test?            true
            :short-name       "opt"
-           :related-chain-id 10}]
+           :related-chain-id 10
+           :layer            2}]
    :prod [{:test?      false
            :short-name "eth"
-           :chain-id   1}
+           :chain-id   1
+           :layer      1}
           {:test?      false
            :short-name "arb1"
-           :chain-id   42161}
+           :chain-id   42161
+           :layer      2}
           {:test?      false
            :short-name "opt"
-           :chain-id   10}]})
+           :chain-id   10
+           :layer      2}]})
 
 (h/deftest-sub :wallet/network-details
   [sub-name]
@@ -34,11 +40,14 @@
     (swap! rf-db/app-db assoc :wallet/networks network-data)
     (is (= [{:network-name :ethereum
              :short-name   "eth"
-             :chain-id     1}
+             :chain-id     1
+             :layer        1}
             {:network-name :arbitrum
              :short-name   "arb1"
-             :chain-id     42161}
+             :chain-id     42161
+             :layer        2}
             {:network-name :optimism
              :short-name   "opt"
-             :chain-id     10}]
+             :chain-id     10
+             :layer        2}]
            (map #(dissoc % :source :related-chain-id) (rf/sub [sub-name]))))))

src/status_im2/subs/wallet/wallet.cljs

@@ -4,6 +4,25 @@
             [status-im2.contexts.wallet.common.utils :as utils]
             [utils.number]))
 
+(defn- filter-networks
+  [chain-ids network-details]
+  (filter (fn [{:keys [chain-id]}]
+            (contains? chain-ids chain-id))
+          network-details))
+
+(defn- assoc-network-preferences-names
+  [network-details account testnet?]
+  (let [{:keys [prod-preferred-chain-ids
+                test-preferred-chain-ids]} account
+        current-chain-ids                  (if testnet?
+                                             test-preferred-chain-ids
+                                             prod-preferred-chain-ids)
+        network-preferences-names          (->> network-details
+                                                (filter-networks current-chain-ids)
+                                                (map :network-name)
+                                                (set))]
+    (assoc account :network-preferences-names network-preferences-names)))
+
 (rf/reg-sub
  :wallet/ui
  :<- [:wallet]
@@ -14,6 +33,12 @@
  :<- [:wallet/ui]
  :-> :tokens-loading?)
 
+
+(rf/reg-sub
+ :wallet/current-viewing-account-address
+ :<- [:wallet]
+ :-> :current-viewing-account-address)
+
 (rf/reg-sub
  :wallet/watch-address-activity-state
  :<- [:wallet/ui]
@@ -22,10 +47,16 @@
 (rf/reg-sub
  :wallet/accounts
  :<- [:wallet]
- :-> #(->> %
+ :<- [:wallet/network-details]
+ (fn [[wallet network-details]]
+   ;; TODO(@rende11): `testnet?` value would be relevant after this implementation,
+   ;; https://github.com/status-im/status-mobile/issues/17826
+   (let [testnet? false]
+     (->> wallet
           :accounts
           vals
-           (sort-by :position)))
+          (map #(assoc-network-preferences-names network-details % testnet?))
+          (sort-by :position)))))
 
 (rf/reg-sub
  :wallet/addresses
@@ -59,12 +90,13 @@
 
 (rf/reg-sub
  :wallet/current-viewing-account
- :<- [:wallet]
+ :<- [:wallet/accounts]
+ :<- [:wallet/current-viewing-account-address]
  :<- [:wallet/balances]
- (fn [[{:keys [current-viewing-account-address] :as wallet} balances]]
+ (fn [[accounts current-viewing-account-address balances]]
-   (-> wallet
+   (let [current-viewing-account (utils/get-account-by-address accounts current-viewing-account-address)]
-       (get-in [:accounts current-viewing-account-address])
+     (-> current-viewing-account
-       (assoc :balance (get balances current-viewing-account-address)))))
+         (assoc :balance (get balances current-viewing-account-address))))))
 
 (rf/reg-sub
  :wallet/tokens-filtered
@@ -85,11 +117,6 @@
                                  sorted-tokens)]
      filtered-tokens)))
 
-(rf/reg-sub
- :wallet/current-viewing-account-address
- :<- [:wallet]
- :-> :current-viewing-account-address)
-
 (rf/reg-sub
  :wallet/accounts-without-current-viewing-account
  :<- [:wallet/accounts]
@@ -122,3 +149,11 @@
  :<- [:chain-id]
  (fn [[current-account chain-id]]
    (mapv #(calc-token-value % chain-id) (:tokens current-account))))
+
+(rf/reg-sub
+ :wallet/network-preference-details
+ :<- [:wallet/current-viewing-account]
+ :<- [:wallet/network-details]
+ (fn [[current-viewing-account network-details]]
+   (let [network-preferences-names (:network-preferences-names current-viewing-account)]
+     (filter #(contains? network-preferences-names (:network-name %)) network-details))))

src/status_im2/subs/wallet/wallet_test.cljs

@@ -82,6 +82,33 @@
           :removed                  false
           :tokens                   tokens-0x2}})
 
+(def network-data
+  {:test [{:test?            true
+           :short-name       "eth"
+           :network-name     :ethereum
+           :related-chain-id 1
+           :layer            1}
+          {:test?            true
+           :short-name       "arb1"
+           :related-chain-id 42161
+           :layer            2}
+          {:test?            true
+           :short-name       "opt"
+           :related-chain-id 10
+           :layer            2}]
+   :prod [{:test?      false
+           :short-name "eth"
+           :chain-id   1
+           :layer      1}
+          {:test?      false
+           :short-name "arb1"
+           :chain-id   42161
+           :layer      2}
+          {:test?      false
+           :short-name "opt"
+           :chain-id   10
+           :layer      2}]})
+
 (h/deftest-sub :wallet/balances
   [sub-name]
   (testing "a map: address->balance"
@@ -96,8 +123,10 @@
 (h/deftest-sub :wallet/accounts
   [sub-name]
   (testing "returns all accounts without balance"
-    (swap! rf-db/app-db #(assoc-in % [:wallet :accounts] accounts))
+    (swap! rf-db/app-db
-
+      #(-> %
+           (assoc-in [:wallet :accounts] accounts)
+           (assoc :wallet/networks network-data)))
     (is
      (= (list {:path                      "m/44'/60'/0'/0/0"
                :emoji                     "😃"
@@ -111,6 +140,7 @@
                :color                     :blue
                :hidden                    false
                :prod-preferred-chain-ids  #{1 10 42161}
+               :network-preferences-names #{:ethereum :arbitrum :optimism}
                :position                  0
                :clock                     1698945829328
                :created-at                1698928839000
@@ -131,6 +161,7 @@
                :color                     :purple
                :hidden                    false
                :prod-preferred-chain-ids  #{1 10 42161}
+               :network-preferences-names #{:ethereum :arbitrum :optimism}
                :position                  1
                :clock                     1698945829328
                :created-at                1698928839000
@@ -141,15 +172,21 @@
                :tokens                    tokens-0x2})
         (rf/sub [sub-name])))))
 
+(h/deftest-sub :wallet/current-viewing-account-address
+  [sub-name]
+  (testing "returns current viewing account address"
+    (swap! rf-db/app-db #(assoc-in % [:wallet :current-viewing-account-address] "0x1"))
+    (is (= "0x1" (rf/sub [sub-name])))))
+
 (h/deftest-sub :wallet/current-viewing-account
   [sub-name]
   (testing "returns current account with balance base"
     (swap! rf-db/app-db
       #(-> %
            (assoc-in [:wallet :accounts] accounts)
-           (assoc-in [:wallet :current-viewing-account-address] "0x1")))
+           (assoc-in [:wallet :current-viewing-account-address] "0x1")
+           (assoc :wallet/networks network-data)))
     (let [result (rf/sub [sub-name])]
-
       (is
        (= {:path                      "m/44'/60'/0'/0/0"
            :emoji                     "😃"
@@ -163,6 +200,7 @@
            :color                     :blue
            :hidden                    false
            :prod-preferred-chain-ids  #{1 10 42161}
+           :network-preferences-names #{:ethereum :arbitrum :optimism}
            :position                  0
            :clock                     1698945829328
            :created-at                1698928839000
@@ -175,7 +213,6 @@
 
       (is (money/equal-to (:balance result) (money/bignumber 3250))))))
 
-
 (h/deftest-sub :wallet/addresses
   [sub-name]
   (testing "returns all addresses"
@@ -201,19 +238,14 @@
     (swap! rf-db/app-db #(assoc-in % [:wallet :ui :watch-address-activity-state] :has-activity))
     (is (= :has-activity (rf/sub [sub-name])))))
 
-(h/deftest-sub :wallet/current-viewing-account-address
-  [sub-name]
-  (testing "returns the address of the current viewing account"
-    (swap! rf-db/app-db #(assoc-in % [:wallet :current-viewing-account-address] "0x1"))
-    (is (= "0x1" (rf/sub [sub-name])))))
-
 (h/deftest-sub :wallet/accounts-without-current-viewing-account
   [sub-name]
   (testing "returns the accounts list without the current viewing account in it"
     (swap! rf-db/app-db
       #(-> %
            (assoc-in [:wallet :accounts] accounts)
-           (assoc-in [:wallet :current-viewing-account-address] "0x2")))
+           (assoc-in [:wallet :current-viewing-account-address] "0x2")
+           (assoc :wallet/networks network-data)))
     (is
      (= (list
          {:path                      "m/44'/60'/0'/0/0"
@@ -228,6 +260,7 @@
           :color                     :blue
           :hidden                    false
           :prod-preferred-chain-ids  #{1 10 42161}
+          :network-preferences-names #{:ethereum :arbitrum :optimism}
           :position                  0
           :clock                     1698945829328
           :created-at                1698928839000
@@ -237,3 +270,31 @@
           :removed                   false
           :tokens                    tokens-0x1})
         (rf/sub [sub-name])))))
+
+(h/deftest-sub :wallet/network-preference-details
+  [sub-name]
+  (testing "returns current viewing account address"
+    (swap! rf-db/app-db
+      #(-> %
+           (assoc-in [:wallet :accounts] accounts)
+           (assoc-in [:wallet :current-viewing-account-address] "0x1")
+           (assoc :wallet/networks network-data)))
+    (is
+     (= [{:short-name       "eth"
+          :network-name     :ethereum
+          :chain-id         1
+          :related-chain-id nil
+          :layer            1}
+         {:short-name       "arb1"
+          :network-name     :arbitrum
+          :chain-id         42161
+          :related-chain-id nil
+          :layer            2}
+         {:short-name       "opt"
+          :network-name     :optimism
+          :chain-id         10
+          :related-chain-id nil
+          :layer            2}]
+        (->> (rf/sub [sub-name])
+             ;; Removed `#js source` property for correct compare
+             (map #(dissoc % :source)))))))

translations/en.json

@@ -2375,7 +2375,7 @@
     "account-info": "Account info",
     "account-name-input-placeholder": "Account name",
     "network-preferences": "Network preferences",
-    "network-preferences-desc": "Select which network this address is happy to receive funds on",
+    "network-preferences-desc": "Select which networks to receive funds on",
     "layer-2": "Layer 2",
     "manage-tokens": "Manage tokens",
     "edit-derivation-path": "Edit derivation path",
@@ -2389,6 +2389,7 @@
     "edit-wallet-account-emoji-updated-message": "Account emoji has been updated",
     "edit-wallet-account-name-updated-message": "Account name has been updated",
     "edit-wallet-account-colour-updated-message": "Account colour has been updated",
+    "edit-wallet-network-preferences-updated-message": "Account network preferences has been updated",
     "search-assets": "Search assets",
     "address-activity": "This address has activity",
     "keypairs": "Keypairs",