Update send summary to show network in a separate card (#21616)

Author: alwx

src/quo/components/wallet/summary_info/component_spec.cljs

@@ -15,7 +15,7 @@
   (h/test "Type of `status-account` title renders"
     (h/render-with-theme-provider [summary-info/view
                                    {:type          :status-account
-                                    :networks?     true
+                                    :show-networks? true
                                     :values        {:ethereum 150
                                                     :optimism 50
                                                     :arbitrum 25}
@@ -25,7 +25,7 @@
   (h/test "Type of `user` title renders"
     (h/render-with-theme-provider [summary-info/view
                                    {:type          :user
-                                    :networks?     true
+                                    :show-networks?     true
                                     :values        {:ethereum 150
                                                     :optimism 50
                                                     :arbitrum 25}
@@ -43,7 +43,7 @@
   (h/test "Networks true render"
     (h/render-with-theme-provider [summary-info/view
                                    {:type          :status-account
-                                    :networks?     true
+                                    :show-networks?     true
                                     :values        {:ethereum 150
                                                     :optimism 50
                                                     :arbitrum 25}
@@ -53,7 +53,7 @@
   (h/test "Networks false render"
     (h/render-with-theme-provider [summary-info/view
                                    {:type          :status-account
-                                    :networks?     false
+                                    :show-networks?     false
                                     :values        {:ethereum 150
                                                     :optimism 50
                                                     :arbitrum 25}

src/quo/components/wallet/summary_info/style.cljs

@@ -3,13 +3,13 @@
     [quo.foundations.colors :as colors]))
 
 (defn container
-  [networks? theme]
+  [networks-to-show theme]
   {:width         "100%"
-   :height        (if networks? 90 56)
+   :height        (if networks-to-show 90 56)
    :border-radius 16
    :border-width  1
    :border-color  (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
-   :margin-bottom (if networks? 4 8)})
+   :margin-bottom (if networks-to-show 4 8)})
 
 (def info-container
   {:flex-direction     :row

src/quo/components/wallet/summary_info/view.cljs

@@ -28,50 +28,40 @@
      [rn/view
       {:style (style/dot-divider theme)}])])
 
+(def default-token-symbols
+  {:ethereum "ETH"
+   :optimism "OETH"
+   :arbitrum "ARB"
+   :base     "ETH"})
+
+(defn prnt [data]
+  (js/console.log "DATA: " (clj->js data))
+  data)
+
 (defn networks
-  [values theme]
-  (let [{:keys [ethereum optimism arbitrum base]} values
-        show-optimism?                            (and optimism
-                                                       (or (pos? (:amount optimism))
-                                                           (= (:amount optimism) "<0.01")))
-        show-arbitrum?                            (and arbitrum
-                                                       (or (pos? (:amount arbitrum))
-                                                           (= (:amount arbitrum) "<0.01")))
-        show-base?                                (and base
-                                                       (or (pos? (:amount base))
-                                                           (= (:amount base) "<0.01")))]
-    [rn/view
-     {:style               style/networks-container
-      :accessibility-label :networks}
-     (when (and ethereum (pos? (:amount ethereum)))
-       [network-amount
-        {:network  :ethereum
-         :amount   (str (:amount ethereum) " " (or (:token-symbol ethereum) "ETH"))
-         :divider? (or show-arbitrum? show-optimism?)
-         :theme    theme}])
-     (when show-optimism?
-       [network-amount
-        {:network  :optimism
-         :amount   (str (:amount optimism) " " (or (:token-symbol optimism) "OETH"))
-         :divider? show-arbitrum?
-         :theme    theme}])
-     (when show-arbitrum?
-       [network-amount
-        {:network :arbitrum
-         :amount  (str (:amount arbitrum) " " (or (:token-symbol arbitrum) "ARB"))
-         :theme   theme}])
-     (when show-base?
-       [network-amount
-        {:network :base
-         :amount  (str (:amount base) " " (or (:token-symbol base) "ETH"))
-         :theme   theme}])]))
+  [networks-to-show theme]
+  (->> networks-to-show
+       (map-indexed
+         (fn [i [k {:keys [amount token-symbol]}]]
+           (when (or (pos? amount)
+                     (= amount "<0.01"))
+             [network-amount
+              {:network  k
+               :amount   (str amount " " (or token-symbol (get default-token-symbols k)))
+               :divider? (not= (dec i) (-> networks-to-show keys count))
+               :theme    theme}])))
+       (remove nil?)
+       (prnt)
+       (into [rn/view
+              {:style               style/networks-container
+               :accessibility-label :networks}])))
 
 (defn- view-internal
-  [{:keys [type account-props token-props networks? values]}]
+  [{:keys [type account-props token-props networks-to-show]}]
   (let [theme   (quo.theme/use-theme)
         address (or (:address account-props) (:address token-props))]
     [rn/view
-     {:style (style/container networks? theme)}
+     {:style (style/container networks-to-show theme)}
      [rn/view
       {:style style/info-container}
       (case type
@@ -105,10 +95,10 @@
             :style  {:color (when (not= type :account)
                               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
            address])]]]
-     (when networks?
+     (when networks-to-show
        [:<>
         [rn/view
          {:style (style/line-divider theme)}]
-        [networks values theme]])]))
+        [networks networks-to-show theme]])]))
 
 (def view (schema/instrument #'view-internal summary-info-schema/?schema))

src/status_im/contexts/preview/quo/wallet/summary_info.cljs

@@ -12,15 +12,13 @@
     :options [{:key :status-account}
               {:key :user}
               {:key :saved-account}
-              {:key :account}]}
-   {:key :networks? :type :boolean}])
+              {:key :account}]}])
 
 
 (defn view
   []
   (let [state                (reagent/atom {:type      :status-account
-                                            :networks? true
-                                            :values    {:ethereum {:amount 150}
+                                            :networks-to-show {:ethereum {:amount 150}
                                                         :optimism {:amount 50}
                                                         :arbitrum {:amount 25}}})
         status-account-props {:customization-color :purple

src/status_im/contexts/wallet/send/transaction_confirmation/style.cljs

@@ -28,3 +28,7 @@
   [theme]
   {:margin-bottom 8
    :color         (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
+
+(def summary-container
+  {:padding-horizontal 20
+   :padding-bottom     16})

src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -129,14 +129,11 @@
 
 (defn- user-summary
   [{:keys [account-props theme label accessibility-label summary-type recipient bridge-tx? account-to?]}]
-  (let [network-values    (rf/sub [:wallet/network-values account-to?])
-        summary-info-type (case (:recipient-type recipient)
+  (let [summary-info-type (case (:recipient-type recipient)
                             :saved-address :saved-account
                             :account       :status-account
                             summary-type)]
-    [rn/view
-     {:style {:padding-horizontal 20
-              :padding-bottom     16}}
+    [rn/view {:style style/summary-container}
      [quo/text
       {:size                :paragraph-2
        :weight              :medium
@@ -145,8 +142,6 @@
       label]
      [quo/summary-info
       {:type          summary-info-type
-       :networks?     true
-       :values        (send-utils/network-values-for-ui network-values)
        :account-props (cond-> account-props
                         (and account-to? (not bridge-tx?))
                         (assoc
@@ -156,6 +151,21 @@
                          :emoji               (:emoji recipient)
                          :customization-color (:customization-color recipient)))}]]))
 
+(defn- network-summary
+  [{:keys [theme label accessibility-label]}]
+  (let [network (rf/sub [:wallet/send-selected-network])]
+    (when network
+      [rn/view {:style style/summary-container}
+       [quo/text
+        {:size                :paragraph-2
+         :weight              :medium
+         :style               (style/section-label theme)
+         :accessibility-label accessibility-label}
+        label]
+       [quo/summary-info
+        {:type    :network
+         :network :ethereum}]])))
+
 (defn- data-item
   [{:keys [title subtitle]}]
   [quo/data-item
@@ -336,4 +346,7 @@
          :recipient           recipient
          :bridge-tx?          (= transaction-type :tx/bridge)
          :account-to?         true
+         :theme               theme}]
+       [network-summary
+        {:label               (i18n/label :t/on)
          :theme               theme}]]]]))

src/status_im/contexts/wallet/swap/swap_confirmation/view.cljs

@@ -76,13 +76,12 @@
       label]
      [quo/summary-info
       {:type        :token
-       :networks?   true
-       :values      (send-utils/network-values-for-ui network-values)
        :token-props {:token   token-symbol
                      :label   (str amount " " token-symbol)
                      :address (when token-address
                                 (address-utils/get-shortened-compressed-key token-address))
-                     :size    32}}]]))
+                     :size    32}
+       :networks-to-show (send-utils/network-values-for-ui network-values)}]]))
 
 (defn- pay-section
   []

src/status_im/subs/wallet/networks.cljs

@@ -71,3 +71,15 @@
                  {:amount amount-fixed :token-symbol token-symbol})))
       {}
       network-values))))
+
+(re-frame/reg-sub
+  :wallet/send-selected-network
+  :<- [:wallet/wallet-send]
+  (fn [{:keys [to-values-by-chain]}]
+    (let [network-name (-> to-values-by-chain
+                           keys
+                           first
+                           network-utils/id->network)]
+      (if (= network-name :mainnet)
+        :ethereum
+        network-name))))