From fe788c3c26a004775792eb9fe54ce270a68fadf7 Mon Sep 17 00:00:00 2001
From: Sean Hagstrom <sean@seanhagstrom.com>
Date: Wed, 4 Dec 2024 09:06:19 -0800
Subject: [PATCH] feature: display registered profile keycards inside keycard
 settings (#21739)

This change adds support for displaying the keycards inside the keycards settings screen. Note, that the keycards that are displayed are the keycards that are associated to the user's profile keypair.
---
 .../contexts/settings/keycard/style.cljs      | 22 +++++++++++
 .../contexts/settings/keycard/view.cljs       | 38 ++++++++++++++++++-
 src/status_im/subs/keycard.cljs               | 35 +++++++++++++++++
 translations/en.json                          |  1 +
 4 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/status_im/contexts/settings/keycard/style.cljs

diff --git a/src/status_im/contexts/settings/keycard/style.cljs b/src/status_im/contexts/settings/keycard/style.cljs
new file mode 100644
index 0000000000..9ab263878e
--- /dev/null
+++ b/src/status_im/contexts/settings/keycard/style.cljs
@@ -0,0 +1,22 @@
+(ns status-im.contexts.settings.keycard.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(def registered-keycards-container
+  {:gap                12
+   :padding-horizontal 20})
+
+(def keycard-row
+  {:gap              12
+   :padding          12
+   :border-radius    16
+   :flex-direction   :row
+   :background-color colors/white-opa-5})
+
+(def keycard-owner
+  {:gap            4
+   :flex-direction :row
+   :align-items    :center})
+
+(def keycard-owner-name
+  {:color colors/white-opa-40})
diff --git a/src/status_im/contexts/settings/keycard/view.cljs b/src/status_im/contexts/settings/keycard/view.cljs
index 9ad176645f..0763a3ea0f 100644
--- a/src/status_im/contexts/settings/keycard/view.cljs
+++ b/src/status_im/contexts/settings/keycard/view.cljs
@@ -5,9 +5,45 @@
             [status-im.common.events-helper :as events-helper]
             [status-im.common.resources :as resources]
             [status-im.constants :as constants]
+            [status-im.contexts.settings.keycard.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
+(defn registered-keycard
+  [{:keys [profile-name profile-image customization-color]}]
+  [rn/view {:style style/keycard-row}
+   [quo/icon :i/keycard-card
+    {:size  20
+     :color colors/white-70-blur}]
+   [rn/view
+    [quo/text profile-name]
+    [rn/view {:style style/keycard-owner}
+     [quo/user-avatar
+      {:full-name           profile-name
+       :profile-picture     profile-image
+       :customization-color customization-color
+       :status-indicator    false
+       :ring?               false
+       :size                :xxxs}]
+     [quo/text
+      {:size  :paragraph-2
+       :style style/keycard-owner-name}
+      profile-name]]]])
+
+(defn registered-keycards
+  []
+  (let [keycards (rf/sub [:keycard/registered-keycards])]
+    [:<>
+     [quo/divider-label
+      {:counter? false
+       :tight?   true
+       :blur?    true}
+      (i18n/label :t/registered-keycards)]
+     [rn/view {:style style/registered-keycards-container}
+      (for [keycard keycards]
+        ^{:key (:keycard-uid keycard)}
+        [registered-keycard keycard])]]))
+
 (defn view
   []
   (let [keycard-profile? (rf/sub [:keycard/keycard-profile?])]
@@ -20,7 +56,7 @@
      [quo/page-top
       {:title (i18n/label :t/keycard)}]
      (if keycard-profile?
-       [:<>]
+       [registered-keycards]
        [rn/view {:style {:padding-horizontal 28 :padding-top 20}}
         [quo/small-option-card
          {:variant             :main
diff --git a/src/status_im/subs/keycard.cljs b/src/status_im/subs/keycard.cljs
index 2fd2e29670..d0758e87b9 100644
--- a/src/status_im/subs/keycard.cljs
+++ b/src/status_im/subs/keycard.cljs
@@ -6,6 +6,41 @@
  (fn [db]
    (not (nil? (get-in db [:profile/profile :keycard-pairing])))))
 
+(rf/reg-sub
+ :keycard/keycard-profile
+ :<- [:profile/name]
+ :<- [:profile/image]
+ :<- [:profile/customization-color]
+ (fn [[profile-name profile-image customization-color]]
+   {:profile-name        profile-name
+    :profile-image       profile-image
+    :customization-color customization-color}))
+
+(defn profile-keypair-keycards?
+  [{:keys [type keycards]}]
+  (and (= :profile type) keycards))
+
+(rf/reg-sub
+ :keycard/keypairs-keycards
+ :<- [:wallet/keypairs-list]
+ (fn [keypairs]
+   (transduce (comp (filter profile-keypair-keycards?)
+                    (mapcat :keycards))
+              conj
+              keypairs)))
+
+(rf/reg-sub
+ :keycard/registered-keycards
+ :<- [:keycard/keycard-profile]
+ :<- [:keycard/keypairs-keycards]
+ (fn [[keycard-profile keycards]]
+   (map (fn [keycard]
+          (assoc keycard
+                 :profile-name        (:profile-name keycard-profile)
+                 :profile-image       (:profile-image keycard-profile)
+                 :customization-color (:customization-color keycard-profile)))
+        keycards)))
+
 (rf/reg-sub
  :keycard/nfc-enabled?
  :<- [:keycard]
diff --git a/translations/en.json b/translations/en.json
index f854a882d5..7ab05707e2 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -2111,6 +2111,7 @@
   "reduced-tip": "priority tip will be reduced",
   "refresh": "Refresh",
   "registered": "registered",
+  "registered-keycards": "Registered Keycards",
   "reject": "Reject",
   "reject-and-delete": "Reject and delete",
   "remember-me": "Remember me",