From a3966683eb17f790a47372a18ee15a5ce709bd33 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Mon, 11 Sep 2023 12:38:59 -0300 Subject: [PATCH] feat: wallet select address screen UI in empty state Signed-off-by: Brian Sztamfater --- .../dividers/divider_line/style.cljs | 6 +- .../dividers/divider_line/view.cljs | 4 +- .../components/inputs/address_input/view.cljs | 16 ++-- .../components/navigation/page_nav/view.cljs | 4 +- src/quo2/components/tabs/tabs/view.cljs | 54 +++++------ .../contexts/wallet/account/view.cljs | 3 +- .../wallet/send/select_address/style.cljs | 23 +++++ .../wallet/send/select_address/view.cljs | 91 +++++++++++++++++++ src/status_im2/contexts/wallet/send/view.cljs | 6 -- src/status_im2/navigation/screens.cljs | 7 +- translations/en.json | 10 +- 11 files changed, 172 insertions(+), 52 deletions(-) create mode 100644 src/status_im2/contexts/wallet/send/select_address/style.cljs create mode 100644 src/status_im2/contexts/wallet/send/select_address/view.cljs delete mode 100644 src/status_im2/contexts/wallet/send/view.cljs diff --git a/src/quo2/components/dividers/divider_line/style.cljs b/src/quo2/components/dividers/divider_line/style.cljs index 34a5d4de0bf7..07e868ef8525 100644 --- a/src/quo2/components/dividers/divider_line/style.cljs +++ b/src/quo2/components/dividers/divider_line/style.cljs @@ -2,10 +2,10 @@ (:require [quo2.foundations.colors :as colors])) (defn divider-line - [blur? theme] + [{:keys [blur? padding-top padding-bottom theme]}] {:border-color (if blur? (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)) - :padding-top 12 - :padding-bottom 8 + :padding-top (when padding-top padding-top) + :padding-bottom (when padding-bottom padding-bottom) :border-bottom-width 1}) diff --git a/src/quo2/components/dividers/divider_line/view.cljs b/src/quo2/components/dividers/divider_line/view.cljs index b28b4590b548..30173a4998a6 100644 --- a/src/quo2/components/dividers/divider_line/view.cljs +++ b/src/quo2/components/dividers/divider_line/view.cljs @@ -5,7 +5,7 @@ [quo2.components.dividers.divider-line.style :as style])) (defn- view-internal - [{:keys [blur? theme]}] - [rn/view {:style (style/divider-line blur? theme)}]) + [props] + [rn/view {:style (style/divider-line props)}]) (def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/inputs/address_input/view.cljs b/src/quo2/components/inputs/address_input/view.cljs index 9104a5176e20..79bbb103c9ba 100644 --- a/src/quo2/components/inputs/address_input/view.cljs +++ b/src/quo2/components/inputs/address_input/view.cljs @@ -56,10 +56,9 @@ (defn- f-address-input-internal [] - (let [status (reagent/atom :default) - value (reagent/atom "") - clipboard (reagent/atom nil) - focused? (atom false)] + (let [status (reagent/atom :default) + value (reagent/atom "") + focused? (atom false)] (fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens ens-regex valid-ens?]}] @@ -75,9 +74,11 @@ (reset! status :loading) (on-detect-ens text)))) on-paste (fn [] - (when-not (empty? @clipboard) - (on-change @clipboard) - (reset! value @clipboard))) + (clipboard/get-string + (fn [clipboard] + (when-not (empty? clipboard) + (on-change clipboard) + (reset! value clipboard))))) on-clear (fn [] (reset! value "") (reset! status (if @focused? :active :default)) @@ -100,7 +101,6 @@ (when-not (empty? scanned-value) (on-change scanned-value))) [scanned-value]) - (clipboard/get-string #(reset! clipboard %)) [rn/view {:style style/container} [rn/text-input {:accessibility-label :address-text-input diff --git a/src/quo2/components/navigation/page_nav/view.cljs b/src/quo2/components/navigation/page_nav/view.cljs index 2236ff58bebf..6ac15f71f33b 100644 --- a/src/quo2/components/navigation/page_nav/view.cljs +++ b/src/quo2/components/navigation/page_nav/view.cljs @@ -56,7 +56,9 @@ (cond ;; TODO: use account-switcher when available (issue #16456) (and support-account-switcher? (= content :account-switcher)) - [rn/view {:style style/account-switcher-placeholder}] + [rn/pressable + {:style style/account-switcher-placeholder + :on-press #(js/alert "Not implemented yet")}] (coll? content) (into [rn/view {:style style/right-actions-container}] diff --git a/src/quo2/components/tabs/tabs/view.cljs b/src/quo2/components/tabs/tabs/view.cljs index c28b89064837..4445626e9874 100644 --- a/src/quo2/components/tabs/tabs/view.cljs +++ b/src/quo2/components/tabs/tabs/view.cljs @@ -70,8 +70,7 @@ on-change scroll-on-press? size - style - ]}] + style]}] [rn/view {:style (style/tab {:size size :default-tab-size default-tab-size @@ -132,6 +131,7 @@ scroll-on-press? scrollable? style + container-style size blur? in-scroll-view? @@ -159,35 +159,36 @@ :size) (when scroll-on-press? {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)}) - {:ref #(reset! flat-list-ref %) - :style style + {:ref #(reset! flat-list-ref %) + :style style ;; The padding-top workaround is needed because on Android ;; {:overflow :visible} doesn't work on components inheriting ;; from ScrollView (e.g. FlatList). There are open issues, here's ;; just one about this topic: ;; https://github.com/facebook/react-native/issues/31218 - :content-container-style {:padding-top (dec unread-count-offset)} - :horizontal true - :scroll-event-throttle 64 + :content-container-style + (assoc container-style :padding-top (dec unread-count-offset)) + :horizontal true + :scroll-event-throttle 64 :shows-horizontal-scroll-indicator false - :data data - :key-fn (comp str :id) - :on-scroll-to-index-failed identity - :on-scroll (partial on-scroll-handler - {:fade-end-percentage fade-end-percentage - :fade-end? fade-end? - :fading fading - :on-scroll on-scroll}) - :render-fn tab-view - :render-data {:active-tab-id active-tab-id - :blur? blur? - :customization-color customization-color - :flat-list-ref flat-list-ref - :number-of-items (count data) - :on-change on-change - :scroll-on-press? scroll-on-press? - :size size - :style style}})]]] + :data data + :key-fn (comp str :id) + :on-scroll-to-index-failed identity + :on-scroll (partial on-scroll-handler + {:fade-end-percentage fade-end-percentage + :fade-end? fade-end? + :fading fading + :on-scroll on-scroll}) + :render-fn tab-view + :render-data {:active-tab-id active-tab-id + :blur? blur? + :customization-color customization-color + :flat-list-ref flat-list-ref + :number-of-items (count data) + :on-change on-change + :scroll-on-press? scroll-on-press? + :size size + :style style}})]]] [rn/view (merge style {:flex-direction :row}) (map-indexed (fn [index item] ^{:key (:id item)} @@ -198,6 +199,5 @@ :number-of-items (count data) :on-change on-change :size size - :style style} - ]) + :style style}]) data)])))) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 6b294c036483..ecdd796d01f5 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -36,7 +36,8 @@ :on-press #(rf/dispatch [:open-modal :how-to-pair])}]}] [quo/account-overview temp/account-overview-state] [quo/wallet-graph {:time-frame :empty}] - [quo/wallet-ctas] + [quo/wallet-ctas + {:send-action #(rf/dispatch [:open-modal :wallet-select-address])}] [quo/tabs {:style style/tabs :size 32 diff --git a/src/status_im2/contexts/wallet/send/select_address/style.cljs b/src/status_im2/contexts/wallet/send/select_address/style.cljs new file mode 100644 index 000000000000..1aae414d7524 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_address/style.cljs @@ -0,0 +1,23 @@ +(ns status-im2.contexts.wallet.send.select-address.style) + +(defn container + [margin-top] + {:flex 1 + :margin-top margin-top}) + +(def title-container + {:margin-horizontal 20 + :margin-vertical 12}) + +(def tabs + {:padding-top 20 + :padding-bottom 12}) + +(def tabs-content + {:padding-left 20 + :padding-right 8}) + +(def empty-container-style + {:justify-content :center + :flex 1 + :margin-bottom 44}) diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs new file mode 100644 index 000000000000..3795161fe6e9 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -0,0 +1,91 @@ +(ns status-im2.contexts.wallet.send.select-address.view + (:require [quo2.theme :as quo.theme] + [react-native.core :as rn] + [status-im2.contexts.wallet.send.select-address.style :as style] + [react-native.safe-area :as safe-area] + [quo2.core :as quo] + [utils.re-frame :as rf] + [utils.i18n :as i18n] + [status-im2.constants :as constants] + [reagent.core :as reagent])) + +(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 + [] + (let [timer (atom nil) + valid-ens? (reagent/atom false) + input-value (atom "")] + [quo/address-input + {:on-scan #(js/alert "Not implemented yet") + :ens-regex constants/regx-ens + :on-detect-ens + (fn [_] + (reset! valid-ens? false) + (when @timer (js/clearTimeout @timer)) + (reset! timer (js/setTimeout #(reset! valid-ens? true) 2000))) + :on-change-text #(reset! input-value %) + :valid-ens? @valid-ens?}])) + +(defn- view-internal + [] + (let [margin-top (safe-area/get-top) + selected-tab (reagent/atom (:id (first tabs-data))) + on-close #(rf/dispatch [:navigate-back]) + on-change-tab #(reset! selected-tab %)] + (fn [] + [rn/scroll-view + {:content-container-style (style/container margin-top) + :keyboard-should-persist-taps :never + :scroll-enabled false} + [quo/page-nav + {:icon-name :i/close + :on-press on-close + :accessibility-label :top-bar + :right-side :account-switcher}] + [quo/text-combinations + {:title (i18n/label :t/send-to) + :container-style style/title-container + :title-accessibility-label :title-label}] + [address-input] + [quo/divider-line] + [quo/tabs + {:style style/tabs + :container-style style/tabs-content + :size 32 + :default-active @selected-tab + :data tabs-data + :scrollable? true + :scroll-on-press? true + :on-change on-change-tab}] + [tab-view @selected-tab]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/send/view.cljs b/src/status_im2/contexts/wallet/send/view.cljs deleted file mode 100644 index 279e55aec7ed..000000000000 --- a/src/status_im2/contexts/wallet/send/view.cljs +++ /dev/null @@ -1,6 +0,0 @@ -(ns status-im2.contexts.wallet.send.view - (:require [react-native.core :as rn])) - -(defn view - [] - [rn/view]) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 87ec6c7cde80..3d49dbd1eb23 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -41,7 +41,7 @@ [status-im2.contexts.wallet.create-account.view :as wallet-create-account] [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses] - [status-im2.contexts.wallet.send.view :as wallet-send] + [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address] [status-im2.navigation.options :as options] [status-im2.navigation.transitions :as transitions])) @@ -253,8 +253,9 @@ {:name :wallet-saved-addresses :component wallet-saved-addresses/view} - {:name :wallet-send - :component wallet-send/view}] + {:name :wallet-select-address + :options {:modalPresentationStyle :overCurrentContext} + :component wallet-select-address/view}] (when config/quo-preview-enabled? quo.preview/screens) diff --git a/translations/en.json b/translations/en.json index 73ca01c53b7b..f2c434216cfc 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2318,5 +2318,13 @@ "emoji-symbols": "Symbols", "emoji-flags": "Flags", "emoji-no-results-title": "No emojis match your search", - "emoji-no-results-description": "Try something like “rainbow”" + "emoji-no-results-description": "Try something like “rainbow”", + "send-to": "Send to", + "saved": "Saved", + "no-recent-transactions": "No recent transactions", + "make-one-it-is-easy-we-promise": "Make one, it’s easy, we promise!", + "no-saved-addresses": "No saved addresses", + "you-like-to-type-43-characters": "You like to type 43 characters?", + "no-other-accounts": "No other accounts", + "here-is-a-cat-in-a-box-instead": "Here’s a cat in a box instead" }