Account selection drawer with balance tag (#21356)

src/status_im/contexts/wallet/common/account_switcher/view.cljs

@@ -8,19 +8,20 @@
     [utils.re-frame :as rf]))
 
 (defn get-bottom-sheet-args
-  [switcher-type]
+  [switcher-type params]
   (case switcher-type
     :account-options {:content      account-options/view
                       :hide-handle? true}
-    :select-account  {:content select-account/view}
+    :select-account  {:content (fn []
+                                 [select-account/view params])}
     nil))
 
 (defn- on-dapps-press
-  [switcher-type]
+  [switcher-type params]
-  (rf/dispatch [:show-bottom-sheet (get-bottom-sheet-args switcher-type)]))
+  (rf/dispatch [:show-bottom-sheet (get-bottom-sheet-args switcher-type params)]))
 
 (defn view
-  [{:keys [type on-press accessibility-label icon-name switcher-type margin-top]
+  [{:keys [type on-press accessibility-label icon-name switcher-type margin-top params]
     :or   {icon-name           :i/close
            accessibility-label :top-bar
            switcher-type       :account-options
@@ -45,6 +46,6 @@
                             (when-not sending-collectible?
                               {:content-type        :account-switcher
                                :customization-color color
-                               :on-press            #(on-dapps-press switcher-type)
+                               :on-press            #(on-dapps-press switcher-type params)
                                :emoji               emoji
                                :type                (when watch-only? :watch-only)})]}]))

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

@@ -15,13 +15,17 @@
   [full-name]
   (first (string/split full-name #" ")))
 
-(defn cut-fiat-balance-to-two-decimals
+(defn cut-fiat-balance
-  [balance]
+  [balance decimals]
   (let [valid-balance? (and balance
                             (or (number? balance) (.-toFixed balance)))]
     (as-> balance $
       (if valid-balance? $ 0)
-      (.toFixed $ 2))))
+      (.toFixed $ decimals))))
+
+(defn cut-fiat-balance-to-two-decimals
+  [balance]
+  (cut-fiat-balance balance 2))
 
 (defn prettify-balance
   [currency-symbol balance]

src/status_im/contexts/wallet/sheets/select_account/view.cljs

@@ -2,12 +2,14 @@
   (:require [quo.core :as quo]
             quo.theme
             [react-native.gesture :as gesture]
+            [status-im.contexts.wallet.common.utils :as wallet.utils]
             [status-im.contexts.wallet.sheets.select-account.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(defn- render-account-item
+(defn list-item
-  [{:keys [color address] :as account} _ _ {:keys [selected-account-address]}]
+  [{:keys [account selected-account-address]}]
+  (let [{:keys [color address]} account]
     [quo/account-item
      {:type                :default
       :account-props       (assoc account :customization-color color)
@@ -15,17 +17,45 @@
       :state               (if (= address selected-account-address) :selected :default)
       :on-press            (fn []
                              (rf/dispatch [:wallet/switch-current-viewing-account address])
-                           (rf/dispatch [:hide-bottom-sheet]))}])
+                             (rf/dispatch [:hide-bottom-sheet]))}]))
+
+(defn list-item-with-balance
+  [{:keys [account selected-account-address asset-symbol network]}]
+  (let [{:keys [color address tokens]} account
+        token                          (->> tokens
+                                            (filter #(= (:symbol %) asset-symbol))
+                                            first)
+        token-balance                  (get-in token [:balances-per-chain (:chain-id network) :balance])]
+    [quo/account-item
+     {:type                (if (= address selected-account-address) :default :tag)
+      :token-props         {:symbol asset-symbol
+                            :value  (wallet.utils/cut-fiat-balance (or (js/parseFloat token-balance) 0)
+                                                                   4)}
+      :account-props       (assoc account :customization-color color)
+      :customization-color color
+      :state               (if (= address selected-account-address) :selected :default)
+      :on-press            (fn []
+                             (rf/dispatch [:wallet/switch-current-viewing-account address])
+                             (rf/dispatch [:hide-bottom-sheet]))}]))
 
 (defn view
-  []
+  [{:keys [show-account-balances? asset-symbol network]}]
   (let [selected-account-address (rf/sub [:wallet/current-viewing-account-address])
         accounts                 (rf/sub [:wallet/operable-accounts])]
     [:<>
      [quo/drawer-top {:title (i18n/label :t/select-account)}]
      [gesture/flat-list
       {:data                            accounts
-       :render-fn                       render-account-item
+       :render-fn                       (fn [account _ _ {:keys [selected-account-address]}]
+                                          (if show-account-balances?
+                                            [list-item-with-balance
+                                             {:account                  account
+                                              :selected-account-address selected-account-address
+                                              :asset-symbol             asset-symbol
+                                              :network                  network}]
+                                            [list-item
+                                             {:account                  account
+                                              :selected-account-address selected-account-address}]))
        :render-data                     {:selected-account-address selected-account-address}
        :content-container-style         style/list-container
        :shows-vertical-scroll-indicator false}]]))

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

@@ -431,7 +431,10 @@
       {:on-press      on-close
        :icon-name     :i/arrow-left
        :margin-top    (safe-area/get-top)
-       :switcher-type :select-account}]
+       :switcher-type :select-account
+       :params        {:show-account-balances? true
+                       :asset-symbol           (:symbol asset-to-pay)
+                       :network                network}}]
      [rn/view {:style style/inputs-container}
       [pay-token-input
        {:input-state      pay-input-state