From 457c42c5f034f63cd3751a2a03fc1daee3d84285 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Tue, 12 Dec 2023 13:38:21 +0000 Subject: [PATCH] chore(wallet): add flow for selecting own accounts in send flows (#18071) --- .../contexts/wallet/send/events.cljs | 12 ++++ .../wallet/send/select_address/style.cljs | 5 -- .../send/select_address/tabs/style.cljs | 10 ++++ .../wallet/send/select_address/tabs/view.cljs | 57 +++++++++++++++++++ .../wallet/send/select_address/view.cljs | 48 ++++------------ src/status_im2/events.cljs | 1 + src/status_im2/subs/root.cljs | 1 + src/status_im2/subs/wallet/send.cljs | 10 ++++ src/status_im2/subs/wallet/send_test.cljs | 14 +++++ src/status_im2/subs/wallet/wallet_test.cljs | 1 - 10 files changed, 117 insertions(+), 42 deletions(-) create mode 100644 src/status_im2/contexts/wallet/send/events.cljs create mode 100644 src/status_im2/contexts/wallet/send/select_address/tabs/style.cljs create mode 100644 src/status_im2/contexts/wallet/send/select_address/tabs/view.cljs create mode 100644 src/status_im2/subs/wallet/send.cljs create mode 100644 src/status_im2/subs/wallet/send_test.cljs diff --git a/src/status_im2/contexts/wallet/send/events.cljs b/src/status_im2/contexts/wallet/send/events.cljs new file mode 100644 index 0000000000..ae57085f97 --- /dev/null +++ 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 index 05a473c694..a3ff3771b0 100644 --- a/src/status_im2/contexts/wallet/send/select_address/style.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/style.cljs @@ -15,11 +15,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 new file mode 100644 index 0000000000..7d8a35430a --- /dev/null +++ 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 new file mode 100644 index 0000000000..c5455302e3 --- /dev/null +++ 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/accounts-without-current-viewing-account])] + (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 index 877f6a8ff5..5540275078 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -2,47 +2,23 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.core :as rn] [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 +(def ^:private 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 [] @@ -131,18 +107,19 @@ :keyboard-should-persist-taps :handled :render-fn suggestion-component}]]))) -(defn- f-view-internal +(defn- f-view [] - (let [selected-tab (reagent/atom (:id (first tabs-data))) - on-close (fn [] + (let [on-close (fn [] (rf/dispatch [:wallet/clean-scanned-address]) (rf/dispatch [:wallet/clean-local-suggestions]) + (rf/dispatch [:wallet/select-address-tab nil]) (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/use-effect (fn [] (fn [] (rf/dispatch [:wallet/clean-scanned-address]) @@ -179,15 +156,14 @@ {:style style/tabs :container-style style/tabs-content :size 32 - :default-active @selected-tab + :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 index 8715692f49..6e489561d5 100644 --- 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 index ca6cbfd0d3..977c17eac6 100644 --- 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 new file mode 100644 index 0000000000..54696e043a --- /dev/null +++ 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 new file mode 100644 index 0000000000..4514b893d5 --- /dev/null +++ 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_test.cljs b/src/status_im2/subs/wallet/wallet_test.cljs index 6312b1963a..8a63e454a0 100644 --- a/src/status_im2/subs/wallet/wallet_test.cljs +++ b/src/status_im2/subs/wallet/wallet_test.cljs @@ -220,7 +220,6 @@ #(-> % (assoc-in [:wallet :accounts] accounts) (assoc-in [:wallet :current-viewing-account-address] "0x1"))) - (is (= (set ["0x1" "0x2"]) (rf/sub [sub-name])))))