[#19048] feat: show contact QR code (#19139)

src/quo/components/share/share_qr_code/schema.cljs

@@ -23,7 +23,7 @@
 (def ?profile
   [:map
    [:type [:= :profile]]
-   [:profile-picture :schema.common/image-source]])
+   [:profile-picture [:maybe :schema.quo/profile-picture-source]]])
 
 (def ?wallet
   [:map

src/status_im/common/universal_links.cljs

@@ -173,7 +173,7 @@
               (handle-url url))))
 
 (defn generate-profile-url
-  [{:keys [db]} [{:keys [public-key cb]}]]
+  [{:keys [db]} [{:keys [public-key on-success]}]]
   (let [profile-public-key (get-in db [:profile/profile :public-key])
         profile?           (or (not public-key) (= public-key profile-public-key))
         ens-name?          (if profile?
@@ -186,7 +186,7 @@
          :params     [public-key]
          :on-success (fn [url]
                        (rf/dispatch [:universal-links/save-profile-url public-key url])
-                       (when (fn? cb) (cb)))
+                       (when (fn? on-success) (on-success)))
          :on-error   #(log/error "failed to wakuext_shareUserURLWithData"
                                  {:error      %
                                   :public-key public-key})}]})))
@@ -200,7 +200,7 @@
       [:?
        [:map
         [:public-key {:optional true} :schema.common/public-key]
-        [:cb {:optional true} fn?]]]]]]
+        [:on-success {:optional true} fn?]]]]]]
    [:map
     [:json-rpc/call :schema.common/rpc-call]]])
 

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
+                                                        :on-success #(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 navigation-back [] (rf/dispatch [:navigate-back]))
+
+(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])
+        on-share-press  (rn/use-callback #(list-selection/open-share {:message universal-profile-url})
+                                         [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            navigation-back
+        :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.utils/photo profile)
+         :full-name           (profile.utils/displayed-name profile)
+         :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