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.

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})

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

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]

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",