feat: wallet select address screen UI in empty state (#17248)

Signed-off-by: Brian Sztamfater <brian@status.im>

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? container-style theme]}]
-  {:border-color        (if blur?
+  (merge
-                          (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+   {:border-color        (if blur?
-                          (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+                           (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
-   :padding-top         12
+                           (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
-   :padding-bottom      8
+    :border-bottom-width 1}
-   :border-bottom-width 1})
+   container-style))

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]}]
+  [props]
-  [rn/view {:style (style/divider-line blur? theme)}])
+  [rn/view {:style (style/divider-line props)}])
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/components/inputs/address_input/view.cljs

@@ -56,10 +56,9 @@
 
 (defn- f-address-input-internal
   []
-  (let [status    (reagent/atom :default)
+  (let [status   (reagent/atom :default)
-        value     (reagent/atom "")
+        value    (reagent/atom "")
-        clipboard (reagent/atom nil)
+        focused? (atom false)]
-        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)
+                                     (clipboard/get-string
-                                       (on-change @clipboard)
+                                      (fn [clipboard]
-                                       (reset! value @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

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}]

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 %)
+            {:ref #(reset! flat-list-ref %)
-             :style                             style
+             :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)}
+             :content-container-style
-             :horizontal                        true
+             (assoc container-style :padding-top (dec unread-count-offset))
-             :scroll-event-throttle             64
+             :horizontal true
+             :scroll-event-throttle 64
              :shows-horizontal-scroll-indicator false
-             :data                              data
+             :data data
-             :key-fn                            (comp str :id)
+             :key-fn (comp str :id)
-             :on-scroll-to-index-failed         identity
+             :on-scroll-to-index-failed identity
-             :on-scroll                         (partial on-scroll-handler
+             :on-scroll (partial on-scroll-handler
-                                                         {:fade-end-percentage fade-end-percentage
+                                 {:fade-end-percentage fade-end-percentage
-                                                          :fade-end?           fade-end?
+                                  :fade-end?           fade-end?
-                                                          :fading              fading
+                                  :fading              fading
-                                                          :on-scroll           on-scroll})
+                                  :on-scroll           on-scroll})
-             :render-fn                         tab-view
+             :render-fn tab-view
-             :render-data                       {:active-tab-id       active-tab-id
+             :render-data {:active-tab-id       active-tab-id
-                                                 :blur?               blur?
+                           :blur?               blur?
-                                                 :customization-color customization-color
+                           :customization-color customization-color
-                                                 :flat-list-ref       flat-list-ref
+                           :flat-list-ref       flat-list-ref
-                                                 :number-of-items     (count data)
+                           :number-of-items     (count data)
-                                                 :on-change           on-change
+                           :on-change           on-change
-                                                 :scroll-on-press?    scroll-on-press?
+                           :scroll-on-press?    scroll-on-press?
-                                                 :size                size
+                           :size                size
-                                                 :style               style}})]]]
+                           :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)]))))

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

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})

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))

src/status_im2/contexts/wallet/send/view.cljs

@@ -1,6 +0,0 @@
-(ns status-im2.contexts.wallet.send.view
-  (:require [react-native.core :as rn]))
-
-(defn view
-  []
-  [rn/view])

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
+    {:name      :wallet-select-address
-     :component wallet-send/view}]
+     :options   {:modalPresentationStyle :overCurrentContext}
+     :component wallet-select-address/view}]
 
    (when config/quo-preview-enabled?
      quo.preview/screens)

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"
 }