Add saved address button

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

@@ -1,5 +1,7 @@
 (ns status-im.contexts.settings.wallet.saved-addresses.view
-  (:require [quo.core :as quo]
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [quo.foundations.colors :as colors]
             [quo.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.safe-area :as safe-area]
@@ -17,12 +19,25 @@
       :image           (resources/get-themed-image :sweating-man theme)
       :container-style style/empty-container-style}]))
 
+(defn render-item
+  [{:keys [address ens] color :colorId saved-address-name :name}]
+  [quo/saved-address
+   {:active-state? false
+    :user-props
+    {:name saved-address-name
+     :address address
+     :ens (when-not (string/blank? ens) ens)
+     :customization-color (keyword color)}}])
+
 (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]))]
+        saved-addresses     (rf/sub [:wallet/saved-addresses])
+        navigate-back       (rn/use-callback #(rf/dispatch [:navigate-back]))
+        add-saved-address   (rn/use-callback
+                             #(rf/dispatch [:open-modal :screen/wallet.save-address]))]
+    (rn/use-mount #(rf/dispatch [:wallet/get-saved-addresses]))
     [quo/overlay
      {:type            :shell
       :container-style (style/page-wrapper inset-top)}
@@ -35,8 +50,26 @@
       [quo/standard-title
        {:title               (i18n/label :t/saved-addresses)
         :accessibility-label :saved-addresses-header
+        :on-press            add-saved-address
         :right               :action
         :customization-color customization-color
         :icon                :i/add}]]
+     [rn/view {:style {:flex 1}}
+      [rn/section-list
+       {:key-fn                         :title
+        :sticky-section-headers-enabled false
+        :sections                       (mapv (fn [[title items]]
+                                                {:title title
+                                                 :data  items})
+                                              (sort (group-by #(string/upper-case (first (:name %))) saved-addresses)))
+        :render-section-header-fn       (fn [{:keys [title]}]
+                                          [quo/divider-label {:container-style {:margin-top       12
+                                                                                :border-top-color colors/white-opa-5}}
+                                           title])
+        :render-section-footer-fn       (fn []
+                                          [rn/view {:style {:height 8}}])
+        :content-container-style        {:padding-bottom 20}
+        :render-fn                      render-item
+        :separator                      [rn/view {:style {:height 4}}]}]]
      (when-not (seq saved-addresses)
        [empty-state])]))

src/status_im/contexts/wallet/save_address/events.cljs

@@ -16,10 +16,10 @@
                chain-short-names (str constants/mainnet-short-name ":")}}]]
    (let [address-to-save {:address           address
                           :name              name
-                          :color-id          customization-color
+                          :colorId          customization-color
                           :ens               ens
-                          :is-test           test?
-                          :chain-short-names chain-short-names}]
+                          :IsTest           test?
+                          :chainShortNames chain-short-names}]
      {:json-rpc/call
       [{:method     "wakuext_upsertSavedAddress"
         :params     [address-to-save]

src/status_im/events.cljs

@@ -37,6 +37,7 @@
     status-im.contexts.wallet.common.wizard.events
     status-im.contexts.wallet.effects
     status-im.contexts.wallet.events
+    status-im.contexts.wallet.save-address.events
     status-im.contexts.wallet.send.events
     status-im.contexts.wallet.signals
     [status-im.db :as db]