⛵ Add menu to reach saved addresses and show empty state (#19771)

* 💚 Enable wallet on header navigation

- Add settings screen
- Add save address settings screen
- Need to add empty state next

* 🥡 Added empty state for saved-addresses

- Fixed the standard title quo component
- It's flex behaviour was buggy, and it's not being used anywhere

* 🧂PR fixes and lint

- Use callback everywhere

* 🗞️ Move wallet settings to wallet namespace

src/quo/components/text_combinations/standard_title/style.cljs

@@ -2,12 +2,9 @@
   (:require [quo.foundations.colors :as colors]))
 
 (def container
-  {:flex            1
+  {:flex-direction  :row
-   :flex-direction  :row
    :justify-content :space-between})
 
-(def right-container {:margin-left 20})
-
 (def right-counter
   {:padding-top    12
    :padding-bottom 2})

src/quo/components/text_combinations/standard_title/view.cljs

@@ -62,10 +62,8 @@
      :weight              :semi-bold
      :accessibility-label accessibility-label}
     title]
-   (when right
+   (case right
-     [rn/view {:style style/right-container}
+     :counter [right-counter props]
-      (case right
+     :action  [right-action props]
-        :counter [right-counter props]
+     :tag     [right-tag props]
-        :action  [right-action props]
+     nil)])
-        :tag     [right-tag props]
-        nil)])])

src/status_im/contexts/profile/settings/list_items.cljs

@@ -23,13 +23,12 @@
      :image       :icon
      :blur?       true
      :action      :arrow}
-    (when config/show-not-implemented-features?
+    {:title       (i18n/label :t/wallet)
-      {:title       (i18n/label :t/wallet)
+     :on-press    #(rf/dispatch [:open-modal :screen/settings.wallet])
-       :on-press    not-implemented/alert
+     :image-props :i/wallet
-       :image-props :i/wallet
+     :image       :icon
-       :image       :icon
+     :blur?       true
-       :blur?       true
+     :action      :arrow}
-       :action      :arrow})
     (when config/show-not-implemented-features?
       {:title       (i18n/label :t/dapps)
        :on-press    not-implemented/alert

src/status_im/contexts/settings/wallet/saved_addresses/style.cljs

@@ -0,0 +1,14 @@
+(ns status-im.contexts.settings.wallet.saved-addresses.style)
+
+(def title-container
+  {:padding-horizontal 20
+   :margin-top         12})
+
+(defn page-wrapper
+  [inset-top]
+  {:padding-top inset-top
+   :flex        1})
+
+(def empty-container-style
+  {:justify-content :center
+   :flex            1})

src/status_im/contexts/settings/wallet/saved_addresses/view.cljs

@@ -0,0 +1,42 @@
+(ns status-im.contexts.settings.wallet.saved-addresses.view
+  (:require [quo.core :as quo]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.common.resources :as resources]
+            [status-im.contexts.settings.wallet.saved-addresses.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn empty-state
+  []
+  (let [theme (quo.theme/use-theme)]
+    [quo/empty-state
+     {:title           (i18n/label :t/no-saved-addresses)
+      :description     (i18n/label :t/you-like-to-type-43-characters)
+      :image           (resources/get-themed-image :sweating-man theme)
+      :container-style style/empty-container-style}]))
+
+(defn view
+  []
+  (let [inset-top           (safe-area/get-top)
+        customization-color (rf/sub [:profile/customization-color])
+        saved-addresses     []
+        navigate-back       (rn/use-callback #(rf/dispatch [:navigate-back]))]
+    [quo/overlay
+     {:type            :shell
+      :container-style (style/page-wrapper inset-top)}
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/arrow-left
+       :on-press   navigate-back}]
+     [rn/view {:style style/title-container}
+      [quo/standard-title
+       {:title               (i18n/label :t/saved-addresses)
+        :accessibility-label :saved-addresses-header
+        :right               :action
+        :customization-color customization-color
+        :icon                :i/add}]]
+     (when-not (seq saved-addresses)
+       [empty-state])]))

src/status_im/contexts/settings/wallet/wallet_options/style.cljs

@@ -0,0 +1,5 @@
+(ns status-im.contexts.settings.wallet.wallet-options.style)
+
+(defn page-wrapper
+  [inset-top]
+  {:padding-top inset-top})

src/status_im/contexts/settings/wallet/wallet_options/view.cljs

@@ -0,0 +1,45 @@
+(ns status-im.contexts.settings.wallet.wallet-options.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.contexts.settings.wallet.wallet-options.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn open-saved-addresses-settings-modal
+  []
+  (rf/dispatch [:open-modal :screen/settings.saved-addresses]))
+
+(defn gen-basic-settings-options
+  []
+  [{:title    (i18n/label :t/saved-addresses)
+    :blur?    true
+    :on-press open-saved-addresses-settings-modal
+    :action   :arrow}])
+
+(defn basic-settings
+  []
+  [quo/category
+   {:key       :basic-wallet-settings
+    :label     (i18n/label :t/keypairs-accounts-and-addresses)
+    :data      (gen-basic-settings-options)
+    :blur?     true
+    :list-type :settings}])
+
+(defn view
+  []
+  (let [inset-top     (safe-area/get-top)
+        navigate-back (rn/use-callback
+                       #(rf/dispatch [:navigate-back]))]
+    [quo/overlay
+     {:type            :shell
+      :container-style (style/page-wrapper inset-top)}
+     [quo/page-nav
+      {:key        :header
+       :background :blur
+       :icon-name  :i/arrow-left
+       :on-press   navigate-back}]
+     [quo/page-top
+      {:title                     (i18n/label :t/wallet)
+       :title-accessibility-label :wallet-settings-header}]
+     [basic-settings]]))

src/status_im/navigation/screens.cljs

@@ -53,6 +53,8 @@
     [status-im.contexts.profile.settings.screens.messages.view :as settings.messages]
     [status-im.contexts.profile.settings.screens.password.view :as settings-password]
     [status-im.contexts.profile.settings.view :as settings]
+    [status-im.contexts.settings.wallet.saved-addresses.view :as saved-addresses-settings]
+    [status-im.contexts.settings.wallet.wallet-options.view :as wallet-options]
     [status-im.contexts.shell.activity-center.view :as activity-center]
     [status-im.contexts.shell.jump-to.view :as shell]
     [status-im.contexts.shell.qr-reader.view :as shell-qr-reader]
@@ -482,6 +484,14 @@
      :options   options/transparent-modal-screen-options
      :component settings-password/view}
 
+    {:name      :screen/settings.wallet
+     :options   options/transparent-modal-screen-options
+     :component wallet-options/view}
+
+    {:name      :screen/settings.saved-addresses
+     :options   options/transparent-modal-screen-options
+     :component saved-addresses-settings/view}
+
     {:name      :screen/settings-messages
      :options   options/transparent-modal-screen-options
      :component settings.messages/view}

translations/en.json

@@ -2407,6 +2407,7 @@
     "saved": "Saved",
     "no-recent-transactions": "No recent transactions",
     "make-one-it-is-easy-we-promise": "Make one, it’s easy, we promise!",
+    "saved-addresses": "Saved addresses",
     "no-saved-addresses": "No saved addresses",
     "you-like-to-type-43-characters": "You like to type 43 characters?",
     "no-other-accounts": "No other accounts",
@@ -2462,6 +2463,7 @@
     "address-no-activity": "This address has no activity",
     "scanning": "Scanning for activity...",
     "keypairs": "Keypairs",
+    "keypairs-accounts-and-addresses": "Keypairs, accounts and addresses",
     "keypairs-description": "Select keypair to derive your new account from",
     "confirm-account-origin": "Confirm account origin",
     "confirmed-on": "Confirmed on",