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