[Feature] Wallet - Account Switcher for send flow (#18100)

This commit: - adds another variant ("Select account" bottom sheet) of the account switcher for wallet - send flow - adds watch-only? key in the account to prevent repetitive account type checks across the codebase Signed-off-by: Mohamed Javid <[email protected]>
status-im · Dec 13, 2023 · b668e4d · b668e4d
1 parent 879a82c
commit b668e4d
Show file tree

Hide file tree

Showing 14 changed files with 342 additions and 114 deletions.
diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs
@@ -14,6 +14,8 @@
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
 
+(def ^:private left-image-supported-types #{:account :keypair :default-keypair})
+
 (defn- left-image
   [{:keys [type customization-color account-avatar-emoji icon-avatar profile-picture]}]
   (case type
@@ -165,13 +167,14 @@
            button-disabled? account-avatar-emoji customization-color icon-avatar
            profile-picture keycard? networks label]}]
   [rn/view {:style style/container}
-   [rn/view {:style style/left-container}
-    [left-image
-     {:type                 type
-      :customization-color  customization-color
-      :account-avatar-emoji account-avatar-emoji
-      :icon-avatar          icon-avatar
-      :profile-picture      profile-picture}]]
+   (when (left-image-supported-types type)
+     [rn/view {:style style/left-container}
+      [left-image
+       {:type                 type
+        :customization-color  customization-color
+        :account-avatar-emoji account-avatar-emoji
+        :icon-avatar          icon-avatar
+        :profile-picture      profile-picture}]])
    [rn/view {:style style/body-container}
     [left-title
      {:type  type

diff --git a/src/status_im2/common/data_store/wallet.cljs b/src/status_im2/common/data_store/wallet.cljs
@@ -15,6 +15,10 @@
   [ids]
   (string/join constants/chain-id-separator ids))
 
+(defn add-keys-to-account
+  [account]
+  (assoc account :watch-only? (= (:type account) :watch)))
+
 (defn rpc->account
   [account]
   (-> account
@@ -25,7 +29,8 @@
       (update :prod-preferred-chain-ids chain-ids-string->set)
       (update :test-preferred-chain-ids chain-ids-string->set)
       (update :type keyword)
-      (update :color #(if (seq %) (keyword %) constants/account-default-customization-color))))
+      (update :color #(if (seq %) (keyword %) constants/account-default-customization-color))
+      add-keys-to-account))
 
 (defn rpc->accounts
   [accounts]
@@ -40,7 +45,8 @@
                         :test-preferred-chain-ids :testPreferredChainIds
                         :color                    :colorId})
       (update :prodPreferredChainIds chain-ids-set->string)
-      (update :testPreferredChainIds chain-ids-set->string)))
+      (update :testPreferredChainIds chain-ids-set->string)
+      (dissoc :watch-only?)))
 
 (defn <-rpc
   [network]

diff --git a/src/status_im2/contexts/wallet/account/tabs/about/view.cljs b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs
@@ -35,9 +35,8 @@
 (defn view
   []
   (let [{:keys [customization-color] :as profile} (rf/sub [:profile/profile-with-image])
-        {:keys [type address path]}               (rf/sub [:wallet/current-viewing-account])
-        networks                                  (rf/sub [:wallet/network-details])
-        watch-only?                               (= type :watch)]
+        {:keys [address path watch-only?]}        (rf/sub [:wallet/current-viewing-account])
+        networks                                  (rf/sub [:wallet/network-details])]
     [rn/view {:style style/about-tab}
      [quo/data-item
       {:description     :default

diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs
@@ -16,6 +16,7 @@
     (case selected-tab
       :assets       [rn/flat-list
                      {:render-fn               token-value/view
+                      :style                   {:flex 1}
                       :data                    tokens
                       :content-container-style {:padding-horizontal 8}}]
       :collectibles [collectibles/view]

diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs
@@ -35,8 +35,7 @@
   []
   (let [selected-tab (reagent/atom first-tab-id)]
     (fn []
-      (let [{:keys [name color balance type]} (rf/sub [:wallet/current-viewing-account])
-            watch-only?                       (= type :watch)]
+      (let [{:keys [name color balance watch-only?]} (rf/sub [:wallet/current-viewing-account])]
         [rn/view {:style {:flex 1}}
          [account-switcher/view {:on-press #(rf/dispatch [:wallet/close-account-page])}]
          [quo/account-overview

diff --git a/src/status_im2/contexts/wallet/common/account_switcher/view.cljs b/src/status_im2/contexts/wallet/common/account_switcher/view.cljs
@@ -1,14 +1,26 @@
 (ns status-im2.contexts.wallet.common.account-switcher.view
   (:require [quo.core :as quo]
             [status-im2.contexts.wallet.common.sheets.account-options.view :as account-options]
+            [status-im2.contexts.wallet.common.sheets.select-account.view :as select-account]
             [utils.re-frame :as rf]))
 
+(defn get-bottom-sheet-args
+  [switcher-type]
+  (case switcher-type
+    :account-options {:content      account-options/view
+                      :hide-handle? true}
+    :select-account  {:content select-account/view}
+    nil))
+
 (defn view
-  [{:keys [on-press accessibility-label] :or {accessibility-label :top-bar}}]
+  [{:keys [on-press accessibility-label icon-name switcher-type]
+    :or   {icon-name           :i/close
+           accessibility-label :top-bar
+           switcher-type       :account-options}}]
   (let [{:keys [color emoji]} (rf/sub [:wallet/current-viewing-account])
         networks              (rf/sub [:wallet/network-details])]
     [quo/page-nav
-     {:icon-name           :i/close
+     {:icon-name           icon-name
       :background          :blur
       :on-press            on-press
       :accessibility-label accessibility-label
@@ -17,6 +29,5 @@
       :right-side          :account-switcher
       :account-switcher    {:customization-color color
                             :on-press            #(rf/dispatch [:show-bottom-sheet
-                                                                {:content      account-options/view
-                                                                 :hide-handle? true}])
+                                                                (get-bottom-sheet-args switcher-type)])
                             :emoji               emoji}}]))
diff --git a/src/status_im2/contexts/wallet/common/sheets/select_account/style.cljs b/src/status_im2/contexts/wallet/common/sheets/select_account/style.cljs
@@ -0,0 +1,4 @@
+(ns status-im2.contexts.wallet.common.sheets.select-account.style)
+
+(def list-container
+  {:margin-horizontal 8})
diff --git a/src/status_im2/contexts/wallet/common/sheets/select_account/view.cljs b/src/status_im2/contexts/wallet/common/sheets/select_account/view.cljs
@@ -0,0 +1,33 @@
+(ns status-im2.contexts.wallet.common.sheets.select-account.view
+  (:require [quo.core :as quo]
+            quo.theme
+            [react-native.gesture :as gesture]
+            [status-im2.contexts.wallet.common.sheets.select-account.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn- render-account-item
+  [{:keys [color address] :as account} _ _ {:keys [selected-account-address]}]
+  [quo/account-item
+   {:type                :default
+    :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-internal
+  []
+  (let [selected-account-address (rf/sub [:wallet/current-viewing-account-address])
+        accounts                 (rf/sub [:wallet/accounts-without-watched-accounts])]
+    [:<>
+     [quo/drawer-top {:title (i18n/label :t/select-account)}]
+     [gesture/flat-list
+      {:data                            accounts
+       :render-fn                       render-account-item
+       :render-data                     {:selected-account-address selected-account-address}
+       :content-container-style         style/list-container
+       :shows-vertical-scroll-indicator false}]]))
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/contexts/wallet/send/input_amount/component_spec.cljs b/src/status_im2/contexts/wallet/send/input_amount/component_spec.cljs
@@ -12,12 +12,33 @@
      (fn [_] (val keyval)))))
 
 (def sub-mocks
-  {:profile/profile        {:currency :usd}
-   :wallet/network-details [{:source           525
-                             :short-name       "eth"
-                             :network-name     :ethereum
-                             :chain-id         1
-                             :related-chain-id 5}]})
+  {:profile/profile                {:currency :usd}
+   :wallet/network-details         [{:source           525
+                                     :short-name       "eth"
+                                     :network-name     :ethereum
+                                     :chain-id         1
+                                     :related-chain-id 5}]
+   :wallet/current-viewing-account {:path                      "m/44'/60'/0'/0/1"
+                                    :emoji                     "💎"
+                                    :key-uid                   "0x2f5ea39"
+                                    :address                   "0x1"
+                                    :wallet                    false
+                                    :name                      "Account One"
+                                    :type                      :generated
+                                    :watch-only?               false
+                                    :chat                      false
+                                    :test-preferred-chain-ids  #{5 420 421613}
+                                    :color                     :purple
+                                    :hidden                    false
+                                    :prod-preferred-chain-ids  #{1 10 42161}
+                                    :network-preferences-names #{:ethereum :arbitrum :optimism}
+                                    :position                  1
+                                    :clock                     1698945829328
+                                    :created-at                1698928839000
+                                    :operable                  "fully"
+                                    :mixedcase-address         "0x7bcDfc75c431"
+                                    :public-key                "0x04371e2d9d66b82f056bc128064"
+                                    :removed                   false}})
 
 (h/describe "Send > input amount screen"
   (h/test "Default render"

diff --git a/src/status_im2/contexts/wallet/send/input_amount/view.cljs b/src/status_im2/contexts/wallet/send/input_amount/view.cljs
@@ -6,6 +6,7 @@
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
+    [status-im2.contexts.wallet.common.account-switcher.view :as account-switcher]
     [status-im2.contexts.wallet.send.input-amount.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -101,14 +102,10 @@
              #(.remove app-keyboard-listener))))
         [rn/view
          {:style style/screen}
-         [quo/page-nav
-          {:background       :blur
-           :icon-name        :i/arrow-left
-           :on-press         #(rf/dispatch [:navigate-back])
-           :right-side       :account-switcher
-           :account-switcher {:customization-color :yellow
-                              :emoji               "🎮"
-                              :on-press            #(js/alert "Switch account")}}]
+         [account-switcher/view
+          {:icon-name     :i/arrow-left
+           :on-press      #(rf/dispatch [:navigate-back])
+           :switcher-type :select-account}]
          [quo/token-input
           {:container-style style/input-container
            :token           token

diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs
@@ -128,7 +128,9 @@
          {:content-container-style      style/container
           :keyboard-should-persist-taps :handled
           :scroll-enabled               false}
-         [account-switcher/view {:on-press on-close}]
+         [account-switcher/view
+          {:on-press      on-close
+           :switcher-type :select-account}]
          [quo/text-combinations
           {:title                     (i18n/label :t/send-to)
            :container-style           style/title-container

diff --git a/src/status_im2/contexts/wallet/send/select_asset/view.cljs b/src/status_im2/contexts/wallet/send/select_asset/view.cljs
@@ -75,7 +75,10 @@
         {:content-container-style      {:flex 1}
          :keyboard-should-persist-taps :handled
          :scroll-enabled               false}
-        [account-switcher/view {:on-press on-close}]
+        [account-switcher/view
+         {:icon-name     :i/arrow-left
+          :on-press      on-close
+          :switcher-type :select-account}]
         [quo/text-combinations
          {:title                     (i18n/label :t/select-asset)
           :container-style           style/title-container

diff --git a/src/status_im2/subs/wallet/wallet.cljs b/src/status_im2/subs/wallet/wallet.cljs
@@ -79,10 +79,10 @@
  :<- [:wallet/balances]
  :<- [:wallet/tokens-loading?]
  (fn [[accounts balances tokens-loading?]]
-   (mapv (fn [{:keys [color address type] :as account}]
+   (mapv (fn [{:keys [color address watch-only?] :as account}]
            (assoc account
                   :customization-color color
-                  :type                (if (= type :watch) :watch-only :empty)
+                  :type                (if watch-only? :watch-only :empty)
                   :on-press            #(rf/dispatch [:wallet/navigate-to-account address])
                   :loading?            tokens-loading?
                   :balance             (utils/prettify-balance (get balances address))))
@@ -124,6 +124,12 @@
  (fn [[accounts current-viewing-account-address]]
    (remove #(= (:address %) current-viewing-account-address) accounts)))
 
+(rf/reg-sub
+ :wallet/accounts-without-watched-accounts
+ :<- [:wallet/accounts]
+ (fn [accounts]
+   (remove #(:watch-only? %) accounts)))
+
 (defn- calc-token-value
   [{:keys [market-values-per-currency] :as item} chain-id]
   (let [crypto-value                      (utils/token-value-in-chain item chain-id)