feat: wallet select address screen UI in empty state

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

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

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/touchable-opacity
+      {: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

@@ -132,6 +132,7 @@
                scroll-on-press?
                scrollable?
                style
+               content-style
                size
                blur?
                in-scroll-view?
@@ -166,7 +167,8 @@
              ;; 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           (merge content-style
+                                                       {:padding-top (dec unread-count-offset)})
              :horizontal                        true
              :scroll-event-throttle             64
              :shows-horizontal-scroll-indicator false

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,29 @@
+(ns status-im2.contexts.wallet.send.select-address.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [margin-top]
+  {:flex       1
+   :margin-top margin-top})
+
+(def title-container
+  {:margin-horizontal 20
+   :margin-vertical   12})
+
+(defn divider
+  [theme]
+  {:border-top-width 1
+   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
+
+(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,86 @@
+(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 :recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
+   {:id :saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
+   {:id :contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
+   {:id :my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])
+
+(defn- tab-view
+  [selected-tab]
+  (case selected-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}]
+    :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}]
+    :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}]
+    :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- view-internal
+  []
+  (let [margin-top   (safe-area/get-top)
+        timer        (atom nil)
+        valid-ens?   (reagent/atom false)
+        input-value  (atom "")
+        selected-tab (reagent/atom (:id (first tabs-data)))]
+    (fn [{:keys [theme]}]
+      [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            #(rf/dispatch [:navigate-back])
+         :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}]
+       [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?}]
+       [rn/view {:style (style/divider theme)}]
+       [quo/tabs
+        {:style            style/tabs
+         :content-style    style/tabs-content
+         :size             32
+         :default-active   @selected-tab
+         :data             tabs-data
+         :scrollable?      true
+         :scroll-on-press? true
+         :on-change        #(reset! selected-tab %)}]
+       [tab-view @selected-tab]])))
+
+(def view (quo.theme/with-theme view-internal))

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)

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