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
- {:container-style
- (style/gradient-cover-wrapper window-width)
- :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}]]]
+ [qr-codes/share-qr-code
+ {:type :channel
+ :qr-data url
+ :customization-color color
+ :emoji emoji
+ :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])