[#19048] feat: show contact QR code

src/status_im/contexts/profile/contact/actions/view.cljs

@@ -22,6 +22,13 @@
                                                         :text (i18n/label :t/nickname-removed)}])
                                          (rf/dispatch [:contacts/update-nickname public-key ""]))
                                        [public-key])
+        on-show-qr                    (rn/use-callback
+                                       (fn []
+                                         (rf/dispatch [:universal-links/generate-profile-url
+                                                       {:public-key public-key
+                                                        :cb         (#(rf/dispatch [:open-modal
+                                                                                    :share-contact]))}]))
+                                       [public-key])
         has-nickname?                 (rn/use-memo (fn [] (not (string/blank? nickname))) [nickname])]
     [quo/action-drawer
      [[{:icon                :i/edit
@@ -32,7 +39,7 @@
         :accessibility-label (if nickname :edit-nickname :add-nickname)}
        {:icon                :i/qr-code
         :label               (i18n/label :t/show-qr)
-        :on-press            not-implemented/alert
+        :on-press            on-show-qr
         :accessibility-label :show-qr-code}
        {:icon                :i/share
         :label               (i18n/label :t/share-profile)

src/status_im/contexts/profile/contact/share/style.cljs

@@ -0,0 +1,9 @@
+(ns status-im.contexts.profile.contact.share.style)
+
+(def header-heading
+  {:padding-top    2
+   :padding-bottom 1})
+
+(def qr-code-container
+  {:margin-horizontal 20
+   :margin-top        8})

src/status_im/contexts/profile/contact/share/view.cljs

@@ -0,0 +1,53 @@
+(ns status-im.contexts.profile.contact.share.view
+  (:require [legacy.status-im.ui.components.list-selection :as list-selection]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.common.qr-codes.view :as qr-codes]
+            [status-im.contexts.profile.contact.share.style :as style]
+            [status-im.contexts.profile.utils :as profile.utils]
+            [utils.address :as address]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [{:keys [universal-profile-url customization-color]
+         :as   profile} (rf/sub [:contacts/current-contact])
+        abbreviated-url (rn/use-memo (fn []
+                                       (address/get-abbreviated-profile-url universal-profile-url))
+                                     [universal-profile-url])
+        profile-picture (rn/use-memo #(profile.utils/photo profile) [])
+        display-name    (rn/use-memo #(profile.utils/displayed-name profile) [])
+        on-back-press   (rn/use-callback #(rf/dispatch [:navigate-back]))
+        on-share-press  (rn/use-callback #(list-selection/open-share {:message universal-profile-url}))
+        on-copy-press   (rn/use-callback (fn []
+                                           (rf/dispatch [:share/copy-text-and-show-toast
+                                                         {:text-to-copy universal-profile-url
+                                                          :post-copy-message
+                                                          (i18n/label
+                                                           :t/link-to-profile-copied)}]))
+                                         [universal-profile-url])]
+    [quo/overlay {:type :shell}
+     [rn/view
+      {:style {:padding-top (safe-area/get-top)}
+       :key   :share-community}
+      [quo/page-nav
+       {:icon-name           :i/close
+        :on-press            on-back-press
+        :background          :blur
+        :accessibility-label :top-bar}]
+      [quo/page-top
+       {:container-style style/header-heading
+        :title           (i18n/label :t/share-profile)}]
+      [rn/view {:style style/qr-code-container}
+       [qr-codes/share-qr-code
+        {:type                :profile
+         :qr-data             universal-profile-url
+         :qr-data-label-shown abbreviated-url
+         :on-share-press      on-share-press
+         :on-text-press       on-copy-press
+         :on-text-long-press  on-copy-press
+         :profile-picture     profile-picture
+         :full-name           display-name
+         :customization-color (or customization-color :blue)}]]]]))

src/status_im/navigation/screens.cljs

@@ -34,6 +34,7 @@
     [status-im.contexts.preview.quo.component-preview.view :as component-preview]
     [status-im.contexts.preview.quo.main :as quo.preview]
     [status-im.contexts.preview.status-im.main :as status-im-preview]
+    [status-im.contexts.profile.contact.share.view :as share-contact]
     [status-im.contexts.profile.contact.view :as contact-profile]
     [status-im.contexts.profile.edit.accent-colour.view :as edit-accent-colour]
     [status-im.contexts.profile.edit.bio.view :as edit-bio]
@@ -198,6 +199,10 @@
      :options   {:modalPresentationStyle :overCurrentContext}
      :component contact-profile/view}
 
+    {:name      :share-contact
+     :options   options/transparent-screen-options
+     :component share-contact/view}
+
     {:name      :new-to-status
      :options   {:theme                  :dark
                  :layout                 options/onboarding-transparent-layout