wip: add initial keypairs and accounts list view to wallet settings

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

@@ -0,0 +1,10 @@
+(ns status-im.contexts.settings.wallet.keypairs-and-accounts.style)
+
+(def title-container
+  {:padding-horizontal 20
+   :margin-vertical    12})
+
+(defn page-wrapper
+  [inset-top]
+  {:padding-top inset-top
+   :flex        1})

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

@@ -0,0 +1,84 @@
+(ns status-im.contexts.settings.wallet.keypairs-and-accounts.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.constants :as constants]
+            [status-im.contexts.settings.wallet.keypairs-and-accounts.style :as style]
+            [utils.address :as utils]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [status-im.common.not-implemented :as not-implemented]))
+
+(defn navigate-back
+  []
+  (rf/dispatch [:navigate-back]))
+
+(defn- parse-accounts
+  [given-accounts]
+  (->> given-accounts
+       (filter (fn [{:keys [path]}]
+                 (not (string/starts-with? path constants/path-eip1581))))
+       (map (fn [{:keys [customization-color emoji name address]}]
+              {:account-props {:customization-color customization-color
+                               :size                32
+                               :emoji               emoji
+                               :type                :default
+                               :name                name
+                               :address             address}
+               :networks      []
+               :state         :default
+               :action        :none}))))
+
+(def keypair-container-style
+  {:margin-horizontal 20
+   :margin-vertical   8})
+
+(defn- keypair
+  [item index _
+   {:keys [profile-picture compressed-key customization-color]}]
+  (let [accounts (parse-accounts (:accounts item))]
+    [quo/keypair
+     {:blur?               false
+      :status-indicator    false
+      :stored              :on-device
+      :action              :options
+      :accounts            accounts
+      :customization-color customization-color
+      :container-style     keypair-container-style
+      :profile-picture     (when (zero? index) profile-picture)
+      :type                (if (zero? index) :default-keypair :other)
+      :on-options-press    #(not-implemented/alert)
+      :details             {:full-name (:name item)
+                            :address   (when (zero? index)
+                                         (utils/get-shortened-compressed-key compressed-key))}}]))
+
+(defn view
+  []
+  (let [inset-top           (safe-area/get-top)
+        compressed-key      (rf/sub [:profile/compressed-key])
+        profile-picture     (rf/sub [:profile/image])
+        customization-color (rf/sub [:profile/customization-color])
+        keypairs            (rf/sub [:wallet/keypairs])]
+    [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/keypairs-and-accounts)
+        :accessibility-label :keypairs-and-accounts-header
+        :customization-color customization-color}]]
+     [rn/view {:style {:flex 1}}
+      [rn/flat-list
+       {:data                    keypairs
+        :render-fn               keypair
+        :render-data             {:profile-picture     profile-picture
+                                  :compressed-key      compressed-key
+                                  :customization-color customization-color}
+        :initial-num-to-render   1
+        :content-container-style {:padding-bottom 60}}]]]))

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

@@ -9,9 +9,17 @@
   []
   (rf/dispatch [:open-modal :screen/settings.saved-addresses]))
 
+(defn open-keypairs-and-accounts-settings-modal
+  []
+  (rf/dispatch [:open-modal :screen/settings.keypairs-and-accounts]))
+
 (defn gen-basic-settings-options
   []
-  [{:title    (i18n/label :t/saved-addresses)
+  [{:title    (i18n/label :t/keypairs-and-accounts)
+    :blur?    true
+    :on-press open-keypairs-and-accounts-settings-modal
+    :action   :arrow}
+   {:title    (i18n/label :t/saved-addresses)
     :blur?    true
     :on-press open-saved-addresses-settings-modal
     :action   :arrow}])

src/status_im/navigation/screens.cljs

@@ -54,6 +54,7 @@
     [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.keypairs-and-accounts.view :as keypairs-and-accounts]
     [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]
@@ -497,6 +498,10 @@
      :options   options/transparent-modal-screen-options
      :component saved-addresses-settings/view}
 
+    {:name      :screen/settings.keypairs-and-accounts
+     :options   options/transparent-modal-screen-options
+     :component keypairs-and-accounts/view}
+
     {:name      :screen/settings-messages
      :options   options/transparent-modal-screen-options
      :component settings.messages/view}