chore(wallet): add flow for selecting own accounts in sendflows

status-im · Dec 5, 2023 · 1367305 · 1367305
1 parent d039864
commit 1367305
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 47 deletions.
diff --git a/src/status_im2/contexts/wallet/send/events.cljs b/src/status_im2/contexts/wallet/send/events.cljs
@@ -0,0 +1,12 @@
+(ns status-im2.contexts.wallet.send.events
+  (:require
+    [utils.number]
+    [utils.re-frame :as rf]))
+
+(rf/reg-event-fx :wallet/select-address-tab
+ (fn [{:keys [db]} [tab]]
+   {:db (assoc-in db [:wallet :ui :send :select-address-tab] tab)}))
+
+(rf/reg-event-fx :wallet/select-send-account-address
+ (fn [{:keys [db]} [address]]
+   {:db (assoc db [:wallet :ui :send :send-account-address] address)}))
diff --git a/src/status_im2/contexts/wallet/send/select_address/style.cljs b/src/status_im2/contexts/wallet/send/select_address/style.cljs
@@ -17,11 +17,6 @@
   {:padding-left  20
    :padding-right 8})
 
-(def empty-container-style
-  {:justify-content :center
-   :flex            1
-   :margin-bottom   44})
-
 (def button
   {:justify-self      :flex-end
    :margin-bottom     46

diff --git a/src/status_im2/contexts/wallet/send/select_address/tabs/style.cljs b/src/status_im2/contexts/wallet/send/select_address/tabs/style.cljs
@@ -0,0 +1,10 @@
+(ns status-im2.contexts.wallet.send.select-address.tabs.style)
+
+(def empty-container-style
+  {:justify-content :center
+   :flex            1
+   :margin-bottom   44})
+
+(def my-accounts-container
+  {:padding-left  8
+   :padding-right 8})
diff --git a/src/status_im2/contexts/wallet/send/select_address/tabs/view.cljs b/src/status_im2/contexts/wallet/send/select_address/tabs/view.cljs
@@ -0,0 +1,57 @@
+(ns status-im2.contexts.wallet.send.select-address.tabs.view
+  (:require
+    [quo.core :as quo]
+    [react-native.gesture :as gesture]
+    [status-im2.contexts.wallet.send.select-address.tabs.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- render-account-item
+  [{:keys [color address] :as account}]
+  [quo/account-item
+   {:account-props (assoc account :customization-color color)
+    :on-press      (fn []
+                     (rf/dispatch [:wallet/select-send-account-address address])
+                     (rf/dispatch [:navigate-to-within-stack
+                                   [:wallet-select-asset :wallet-select-address]]))}])
+
+(def data
+  [{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
+   {:id :tab/saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
+   {:id :tab/contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
+   {:id :tab/my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])
+
+(defn my-accounts
+  []
+  (let [other-accounts (rf/sub [:wallet/other-accounts])]
+    (if (zero? (count other-accounts))
+      [quo/empty-state
+       {:title           (i18n/label :t/no-other-accounts)
+        :description     (i18n/label :t/here-is-a-cat-in-a-box-instead)
+        :placeholder?    true
+        :container-style style/empty-container-style}]
+      [gesture/flat-list
+       {:data                            other-accounts
+        :render-fn                       render-account-item
+        :content-container-style         style/my-accounts-container
+        :shows-vertical-scroll-indicator false}])))
+
+(defn view
+  [selected-tab]
+  (case selected-tab
+    :tab/recent      [quo/empty-state
+                      {:title           (i18n/label :t/no-recent-transactions)
+                       :description     (i18n/label :t/make-one-it-is-easy-we-promise)
+                       :placeholder?    true
+                       :container-style style/empty-container-style}]
+    :tab/saved       [quo/empty-state
+                      {:title           (i18n/label :t/no-saved-addresses)
+                       :description     (i18n/label :t/you-like-to-type-43-characters)
+                       :placeholder?    true
+                       :container-style style/empty-container-style}]
+    :tab/contacts    [quo/empty-state
+                      {:title           (i18n/label :t/no-contacts)
+                       :description     (i18n/label :t/no-contacts-description)
+                       :placeholder?    true
+                       :container-style style/empty-container-style}]
+    :tab/my-accounts [my-accounts]))
diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs
@@ -2,48 +2,18 @@
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im2.constants :as constants]
     [status-im2.contexts.wallet.common.account-switcher.view :as account-switcher]
     [status-im2.contexts.wallet.item-types :as types]
     [status-im2.contexts.wallet.send.select-address.style :as style]
+    [status-im2.contexts.wallet.send.select-address.tabs.view :as tabs]
     [utils.debounce :as debounce]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(def tabs-data
-  [{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
-   {:id :tab/saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
-   {:id :tab/contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
-   {:id :tab/my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])
-
-(defn- tab-view
-  [selected-tab]
-  (case selected-tab
-    :tab/recent      [quo/empty-state
-                      {:title           (i18n/label :t/no-recent-transactions)
-                       :description     (i18n/label :t/make-one-it-is-easy-we-promise)
-                       :placeholder?    true
-                       :container-style style/empty-container-style}]
-    :tab/saved       [quo/empty-state
-                      {:title           (i18n/label :t/no-saved-addresses)
-                       :description     (i18n/label :t/you-like-to-type-43-characters)
-                       :placeholder?    true
-                       :container-style style/empty-container-style}]
-    :tab/contacts    [quo/empty-state
-                      {:title           (i18n/label :t/no-contacts)
-                       :description     (i18n/label :t/no-contacts-description)
-                       :placeholder?    true
-                       :container-style style/empty-container-style}]
-    :tab/my-accounts [quo/empty-state
-                      {:title           (i18n/label :t/no-other-accounts)
-                       :description     (i18n/label :t/here-is-a-cat-in-a-box-instead)
-                       :placeholder?    true
-                       :container-style style/empty-container-style}]))
-
 (defn- address-input
   [input-value input-focused?]
   (fn []
@@ -130,19 +100,20 @@
          :keyboard-should-persist-taps :handled
          :render-fn                    suggestion-component}]])))
 
-(defn- f-view-internal
+(defn- f-view
   []
   (let [margin-top     (safe-area/get-top)
-        selected-tab   (reagent/atom (:id (first tabs-data)))
+
         on-close       (fn []
                          (rf/dispatch [:wallet/clean-scanned-address])
                          (rf/dispatch [:wallet/clean-local-suggestions])
                          (rf/dispatch [:navigate-back]))
-        on-change-tab  #(reset! selected-tab %)
+        on-change-tab  #(rf/dispatch [:wallet/select-address-tab %])
         input-value    (reagent/atom "")
         input-focused? (reagent/atom false)]
     (fn []
-      (let [valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
+      (let [selected-tab          (or (rf/sub [:wallet/send-tab]) (:id (first tabs/data)))
+            valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
         [rn/scroll-view
          {:content-container-style      (style/container margin-top)
           :keyboard-should-persist-taps :handled
@@ -178,15 +149,14 @@
              {:style            style/tabs
               :container-style  style/tabs-content
               :size             32
-              :default-active   @selected-tab
-              :data             tabs-data
+              :default-active   selected-tab
+              :data             tabs/data
               :scrollable?      true
               :scroll-on-press? true
               :on-change        on-change-tab}]
-            [tab-view @selected-tab]])]))))
+            [tabs/view selected-tab]])]))))
 
-(defn- view-internal
+(defn view
   []
-  [:f> f-view-internal])
+  [:f> f-view])
 
-(def view (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/events.cljs b/src/status_im2/events.cljs
@@ -22,6 +22,7 @@
     status-im2.contexts.shell.share.events
     status-im2.contexts.syncing.events
     status-im2.contexts.wallet.events
+    status-im2.contexts.wallet.send.events
     [status-im2.db :as db]
     [utils.re-frame :as rf]))
 

diff --git a/src/status_im2/subs/root.cljs b/src/status_im2/subs/root.cljs
@@ -13,6 +13,7 @@
     status-im2.subs.shell
     status-im2.subs.wallet.collectibles
     status-im2.subs.wallet.networks
+    status-im2.subs.wallet.send
     status-im2.subs.wallet.wallet))
 
 (defn reg-root-key-sub

diff --git a/src/status_im2/subs/wallet/send.cljs b/src/status_im2/subs/wallet/send.cljs
@@ -0,0 +1,10 @@
+(ns status-im2.subs.wallet.send
+  (:require
+    [re-frame.core :as rf]
+    [utils.number]))
+
+(rf/reg-sub
+ :wallet/send-tab
+ :<- [:wallet/ui]
+ (fn [ui]
+   (get-in ui [:send :select-address-tab])))
diff --git a/src/status_im2/subs/wallet/send_test.cljs b/src/status_im2/subs/wallet/send_test.cljs
@@ -0,0 +1,14 @@
+(ns status-im2.subs.wallet.send-test
+  (:require
+    [cljs.test :refer [is testing]]
+    [re-frame.db :as rf-db]
+    status-im2.subs.root
+    status-im2.subs.wallet.send
+    [test-helpers.unit :as h]
+    [utils.re-frame :as rf]))
+
+(h/deftest-sub :wallet/send-tab
+  [sub-name]
+  (testing "returns active tab for selecting address"
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :select-address-tab] :tabs/recent)
+    (is (= :tabs/recent (rf/sub [sub-name])))))
diff --git a/src/status_im2/subs/wallet/wallet.cljs b/src/status_im2/subs/wallet/wallet.cljs
@@ -27,6 +27,13 @@
            vals
            (sort-by :position)))
 
+(rf/reg-sub
+ :wallet/other-accounts
+ :<- [:wallet/accounts]
+ :<- [:wallet/current-viewing-account-address]
+ (fn [[accounts current-address]]
+   (filter #(not= (:address %) current-address) accounts)))
+
 (rf/reg-sub
  :wallet/addresses
  :<- [:wallet]

diff --git a/src/status_im2/subs/wallet/wallet_test.cljs b/src/status_im2/subs/wallet/wallet_test.cljs
@@ -176,11 +176,21 @@
       #(-> %
            (assoc-in [:wallet :accounts] accounts)
            (assoc-in [:wallet :current-viewing-account-address] "0x1")))
-
     (is
      (= (set ["0x1" "0x2"])
         (rf/sub [sub-name])))))
 
+(h/deftest-sub :wallet/other-accounts
+  [sub-name]
+  (testing "returns all accounts except the current active"
+    (swap! rf-db/app-db
+      #(-> %
+           (assoc-in [:wallet :accounts] accounts)
+           (assoc-in [:wallet :current-viewing-account-address] "0x1")))
+    (is
+     (= [(get-in accounts ["0x2"])]
+        (rf/sub [sub-name])))))
+
 (h/deftest-sub :wallet/watch-address-activity-state
   [sub-name]
   (testing "watch address activity state with nil value"