💾 🗂️ [17653] wallet implement UI for save address bottom sheet (#19079)

* 🚧 Save address UI reached teenage years

* 🚧 Save point

* 📑 Use bottom sheet effect properly

* 📝 Can't get title input to work

* 🎨 Design in place

* 🗺️ Add address box and trigger for network prefs

* 💅 Pixel perfect UI and hide save address button

* ⏫ Upgrade to screen tech

* 🤚 Undo changes made to color picker during rebase

* 🧰 Fix screens I broke during rebase

* ❄️ Fix json indent

* ⚒️ Implement PR feedback

* ⛏️ Remove unrelated translations

* 🖼️ Remove container to fix margin issue

- Use rn/use-callback instead of defined functions

* 😶‍🌫️ Hide save address button

* 🔨 Fix lint

* ❌ Remove bottom sheet screen updates

* ❌ Remove empty lines between elements

src/status_im/contexts/wallet/send/save_address/style.cljs

@@ -0,0 +1,39 @@
+(ns status-im.contexts.wallet.send.save-address.style)
+
+(def title-input-container
+  {:padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     16})
+
+(def account-avatar-container
+  {:padding-horizontal 20
+   :padding-top        12})
+
+(def color-picker-top-divider
+  {:margin-bottom 12})
+
+(def color-picker-container
+  {:padding-vertical 12})
+
+(def section-container
+  {:padding-horizontal 20
+   :padding-bottom     4})
+
+(def color-picker
+  {:padding-horizontal 20
+   :padding-top        12})
+
+(def color-picker-bottom-divider
+  {:padding-top    8
+   :padding-bottom 12})
+
+(def save-address-button
+  {:padding-horizontal 20})
+
+(def data-item
+  {:margin-horizontal 20
+   :padding-vertical  8})
+
+(def address-container
+  {:padding-top    8
+   :padding-bottom 12})

src/status_im/contexts/wallet/send/save_address/view.cljs

@@ -0,0 +1,89 @@
+(ns status-im.contexts.wallet.send.save-address.view
+  (:require
+    [clojure.string :as string]
+    [quo.core :as quo]
+    [quo.theme]
+    [react-native.core :as rn]
+    [status-im.common.floating-button-page.view :as floating-button-page]
+    [status-im.contexts.wallet.send.save-address.style :as style]
+    [status-im.contexts.wallet.sheets.network-preferences.view
+     :as network-preferences]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- address-view
+  [address]
+  (let [network-details (rf/sub [:wallet/network-preference-details])]
+    [rn/view {:style style/address-container}
+     [quo/data-item
+      {:status          :default
+       :size            :default
+       :subtitle-type   :default
+       :label           :none
+       :blur?           false
+       :icon-right?     true
+       :right-icon      :i/advanced
+       :card?           true
+       :title           (i18n/label :t/address)
+       :custom-subtitle (rn/use-callback
+                         (fn [] [quo/address-text
+                                 {:networks network-details
+                                  :address  address
+                                  :format   :long}]))
+       :on-press        (rn/use-callback
+                         (fn []
+                           (rf/dispatch [:show-bottom-sheet
+                                         {:content
+                                          (fn []
+                                            [network-preferences/view
+                                             {:on-save (fn [])}])}])))
+       :container-style style/data-item}]]))
+
+(defn view
+  []
+  (let [[address-label set-address-label] (rn/use-state "")
+        [address-color set-address-color] (rn/use-state :blue)
+        placeholder                       (i18n/label :t/address-name)]
+    [floating-button-page/view
+     {:footer-container-padding 0
+      :header                   [quo/page-nav
+                                 {:type                :no-title
+                                  :background          :blur
+                                  :icon-name           :i/close
+                                  :on-press            (rn/use-callback #(rf/dispatch [:navigate-back]))
+                                  :accessibility-label :save-address-top-bar}]
+      :footer                   [quo/button
+                                 {:accessibility-label :save-address-button
+                                  :type                :primary
+                                  :container-style     style/save-address-button}
+                                 (i18n/label :t/save-address)]
+      :customization-color      address-color
+      :gradient-cover?          true}
+     [rn/view
+      {:style style/account-avatar-container}
+      [quo/user-avatar
+       {:full-name           (if (string/blank? address-label)
+                               placeholder
+                               address-label)
+        :customization-color address-color
+        :size                :big}]]
+     [quo/title-input
+      {:blur?               true
+       :auto-focus          true
+       :max-length          24
+       :size                :heading-1
+       :placeholder         placeholder
+       :default-value       address-label
+       :on-change-text      set-address-label
+       :customization-color address-color
+       :container-style     style/title-input-container}]
+     [quo/divider-line {:container-style style/color-picker-top-divider}]
+     [quo/section-label
+      {:section         (i18n/label :t/colour)
+       :container-style style/section-container}]
+     [quo/color-picker
+      {:default-selected address-color
+       :on-change        set-address-color
+       :container-style  style/color-picker}]
+     [quo/divider-line {:container-style style/color-picker-bottom-divider}]
+     [address-view "0xshivek"]]))

src/status_im/contexts/wallet/send/transaction_progress/view.cljs

@@ -25,6 +25,23 @@
     (some (fn [[_k v]] (= (:status v) :confirmed)) transaction-details)   :confirmed
     :else                                                                 nil))
 
+(defn- footer
+  [{:keys [color leave-page]}]
+  (let [save-address-visible? false]
+    [quo/bottom-actions
+     {:actions          (if save-address-visible? :two-actions :one-action)
+      :button-two-label (i18n/label :t/save-address)
+      :button-two-props {:type                :grey
+                         :icon-left           :i/contact-book
+                         :accessibility-label :save-address
+                         :on-press            (rn/use-callback
+                                               #(rf/dispatch [:open-modal :screen/wallet.save-address]))}
+      :button-one-label (i18n/label :t/done)
+      :button-one-props {:customization-color color
+                         :type                :primary
+                         :accessibility-label :done
+                         :on-press            leave-page}}]))
+
 (defn view
   []
   (let [leave-page      #(rf/dispatch [:wallet/close-transaction-progress-page])
@@ -40,10 +57,9 @@
                                       :margin-top          (safe-area/get-top)
                                       :on-press            leave-page
                                       :accessibility-label :top-bar}]
-          :footer                   [quo/button
+          :footer                   [footer
-                                     {:customization-color color
+                                     {:color      color
-                                      :on-press            leave-page}
+                                      :leave-page leave-page}]
-                                     (i18n/label :t/done)]
           :customization-color      color
           :gradient-cover?          true}
          [rn/view {:style style/content-container}

src/status_im/navigation/screens.cljs

@@ -71,6 +71,7 @@
     [status-im.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
     [status-im.contexts.wallet.scan-account.view :as wallet-scan-address]
+    [status-im.contexts.wallet.send.save-address.view :as wallet-save-address]
     [status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im.contexts.wallet.send.select-asset.view :as wallet-select-asset]
     [status-im.contexts.wallet.send.send-amount.view :as wallet-send-input-amount]
@@ -383,6 +384,10 @@
     {:name      :screen/wallet.saved-addresses
      :component wallet-saved-addresses/view}
 
+    {:name      :screen/wallet.save-address
+     :options   {:sheet? true}
+     :component wallet-save-address/view}
+
     {:name      :screen/wallet.send-input-amount
      :options   {:modalPresentationStyle :overCurrentContext
                  :insets                 {:top?    true

translations/en.json

@@ -14,6 +14,7 @@
     "account-color": "Account color",
     "added-to-group-chat": "Added to group chat",
     "added-you-to": "added you to",
+    "address-name": "Address name",
     "anyone": "Anyone",
     "messages-from-contacts-only-subtitle": "Only people you added as contacts can start a new chat with you or invite you to a group",
     "messages-gap-warning": "Some messages might be missing",
@@ -1249,6 +1250,7 @@
     "reveal-sync-code": "Reveal sync code",
     "revoke-access": "Revoke access",
     "save": "Save",
+    "save-address": "Save address",
     "save-bio": "Save bio",
     "save-colour": "Save colour",
     "save-name": "Save name",
@@ -1971,6 +1973,7 @@
     "wallet-connect": "Wallet Connect",
     "reject": "Reject",
     "manage-connections": "Manage connections from within Application Connections",
+    "contact-request-was-ignored": "Contact request ignored",
     "wallet-manage-app-connections": "Manage app connections",
     "connection-request": "Connection Request",
     "disconnect": "Disconnect",
@@ -1982,7 +1985,6 @@
     "contact-request-was-sent": "Contact request sent",
     "contact-request-sent-to": "Contact request sent to",
     "contact-request-was-accepted": "Contact request accepted",
-    "contact-request-was-ignored": "Contact request ignored",
     "contact-request-is-now-a-contact": "is now a contact",
     "contact-request-removed-you-as-contact": "removed you as a contact",
     "contact-request-removed-as-contact": "removed as a contact",