Fix QR share screen for community channel (#19792)

* tweak: add support for displaying channel qr codes with quo/share-qr-code component

* chore: add channel qr-code example to quo preview components

* tweak: integrate common/qr-code component for sharing community channel qr-code

* tweak: add support for showing community channel avatar in share-qr-code header

* tweak: hide wallet tabs for channel qr-code

* tweak: integrate share handler for community channel qr-code

* fix: prevent accidentally rendering the community channel qr-code with nil while closing the share-qr modal

* tidy: extract navigate-back dispatch function

* tidy: use styles namespace

* tidy: use case statement to determine which qr-code components have a header

* tweak: check for share-qr-types that support headers

* tidy: extract navigate-back into static function

* fix: prevent community qr-code from glitching when closing modal

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

@@ -25,6 +25,11 @@
    [:type [:= :profile]]
    [:profile-picture [:maybe :schema.quo/profile-picture-source]]])
 
+(def ?channel
+  [:map
+   [:type [:= :channel]]
+   [:emoji {:optional true} [:maybe ?emoji]]])
+
 (def ?wallet
   [:map
    [:type [:= :wallet]]
@@ -60,6 +65,7 @@
    [:catn
     [:props
      [:multi {:dispatch :type}
+      [:channel [:merge ?base ?channel]]
       [:profile [:merge ?base ?profile]]
       [:wallet [:merge ?base ?address-base ?wallet]]
       [:saved-address [:merge ?base ?address-base ?saved-address]]

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

@@ -2,6 +2,7 @@
   (:require [clojure.set]
             [oops.core :as oops]
             [quo.components.avatars.account-avatar.view :as account-avatar]
+            [quo.components.avatars.channel-avatar.view :as channel-avatar]
             [quo.components.avatars.user-avatar.view :as user-avatar]
             [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
             [quo.components.buttons.button.view :as button]
@@ -131,8 +132,22 @@
                                 {:size                :size-32
                                  :customization-color customization-color
                                  :full-name           full-name}]
+    :channel                   [channel-avatar/view
+                                {:size                :size-32
+                                 :emoji               emoji
+                                 :locked-state        :not-set
+                                 :customization-color customization-color
+                                 :full-name           full-name}]
     nil))
 
+(defn- has-header?
+  [share-qr-type]
+  (case share-qr-type
+    (:wallet
+     :watched-address
+     :saved-address) true
+    false))
+
 (defn- share-qr-code
   [{:keys [share-qr-type qr-image-uri component-width customization-color full-name
            profile-picture emoji on-share-press address]
@@ -153,7 +168,7 @@
          {:color           colors/white-opa-40
           :container-style style/watched-account-icon}])]
      [share-button {:on-press on-share-press}]]
-    (when (not= share-qr-type :profile)
+    (when (has-header? share-qr-type)
       [header props])
     [quo.theme/provider :light
      [qr-code/view
@@ -163,6 +178,7 @@
                               :profile                   :profile
                               (:watched-address :wallet) :wallet-account
                               :saved-address             :saved-address
+                              :channel                   :channel
                               nil)
        :customization-color customization-color
        :full-name           full-name

src/status_im/contexts/communities/actions/share_community/view.cljs

@@ -12,14 +12,20 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
+(defn navigate-back
+  []
+  (rf/dispatch [:navigate-back]))
+
 (defn view
   []
-  (let [{:keys [url community-id]} (rf/sub [:get-screen-params])
+  (let [params                     (rf/sub [:get-screen-params])
+        ;; NOTE(seanstrom): We need to store these screen params for when the modal closes
+        ;; because the screen params will be cleared.
+        {:keys [url community-id]} @(rn/use-ref-atom params)
         window-width               (rf/sub [:dimensions/window-width])
         {thumbnail-uri  :logo
          color          :color
          community-name :name}     (rf/sub [:communities/for-context-tag community-id])
-        navigate-back              (rn/use-callback #(rf/dispatch [:navigate-back]))
         on-press-share             (rn/use-callback
                                     (fn []
                                       (rf/dispatch

src/status_im/contexts/communities/actions/share_community_channel/style.cljs

@@ -1,6 +1,10 @@
 (ns status-im.contexts.communities.actions.share-community-channel.style
   (:require [quo.foundations.colors :as colors]))
 
+(defn container
+  [safe-area-top]
+  {:padding-top safe-area-top})
+
 (def header-container
   {:padding-horizontal 20
    :padding-vertical   12})

src/status_im/contexts/communities/actions/share_community_channel/view.cljs

@@ -8,38 +8,41 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
+(defn navigate-back [] (rf/dispatch [:navigate-back]))
+
 (defn view
   []
   (fn []
-    (let [{:keys [url chat-id]}           (rf/sub [:get-screen-params])
+    (let [params                          (rf/sub [:get-screen-params])
+          ;; NOTE(seanstrom): We need to store these screen params for when the modal closes
+          ;; because the screen params will be cleared.
+          {:keys [url chat-id]}           @(rn/use-ref-atom params)
           {:keys [color emoji chat-name]} (rf/sub [:chats/community-channel-ui-details-by-id chat-id])
-          window-width                    (rf/sub [:dimensions/window-width])]
+          on-share-community-channel      (rn/use-callback
+                                           #(rf/dispatch
+                                             [:communities/share-community-channel-url-with-data
+                                              chat-id])
+                                           [chat-id])]
       [quo/overlay {:type :shell}
        [rn/view
-        {:style {:padding-top (safe-area/get-top)}
+        {:style (style/container (safe-area/get-top))
          :key   :share-community}
         [quo/page-nav
          {:icon-name           :i/close
-          :on-press            #(rf/dispatch [:navigate-back])
+          :on-press            navigate-back
           :background          :blur
           :accessibility-label :top-bar}]
         [quo/text-combinations
          {:container-style style/header-container
           :title           (i18n/label :t/share-channel)}]
         [rn/view {:style style/qr-code-wrapper}
-         [quo/gradient-cover
+         [qr-codes/share-qr-code
-          {:container-style
+          {:type                :channel
-           (style/gradient-cover-wrapper window-width)
+           :qr-data             url
-           :customization-color color}]
-         [rn/view
-          {:style {:padding-vertical 12}}
-          [qr-codes/qr-code
-           {:size                (style/qr-code-size window-width)
-            :url                 url
-            :avatar              :channel
            :customization-color color
            :emoji               emoji
-            :full-name           chat-name}]]]
+           :full-name           chat-name
+           :on-share-press      on-share-community-channel}]]
         [quo/text
          {:size   :paragraph-2
           :weight :regular

src/status_im/contexts/preview/quo/share/share_qr_code.cljs

@@ -16,7 +16,8 @@
     :options [{:key :profile}
               {:key :wallet}
               {:key :saved-address}
-              {:key :watched-address}]}])
+              {:key :watched-address}
+              {:key :channel}]}])
 
 (def possible-networks [:ethereum :optimism :arbitrum :myNet])