From 6a1fdc5b08439a701e0eeb92c90282e41502feb4 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Tue, 30 Apr 2024 16:10:53 +0100 Subject: [PATCH] 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 --- .../share/share_qr_code/schema.cljs | 6 +++ .../components/share/share_qr_code/view.cljs | 18 ++++++++- .../actions/share_community/view.cljs | 10 ++++- .../share_community_channel/style.cljs | 4 ++ .../actions/share_community_channel/view.cljs | 37 ++++++++++--------- .../preview/quo/share/share_qr_code.cljs | 3 +- 6 files changed, 57 insertions(+), 21 deletions(-) diff --git a/src/quo/components/share/share_qr_code/schema.cljs b/src/quo/components/share/share_qr_code/schema.cljs index 8daf17ddf8..70ffb24d01 100644 --- a/src/quo/components/share/share_qr_code/schema.cljs +++ b/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]] diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index 9f26fb54c0..5bed371c45 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/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 diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index 06374cd8ea..3d1a4e0112 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/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 diff --git a/src/status_im/contexts/communities/actions/share_community_channel/style.cljs b/src/status_im/contexts/communities/actions/share_community_channel/style.cljs index b7c71cdafd..e1d620502c 100644 --- a/src/status_im/contexts/communities/actions/share_community_channel/style.cljs +++ b/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}) diff --git a/src/status_im/contexts/communities/actions/share_community_channel/view.cljs b/src/status_im/contexts/communities/actions/share_community_channel/view.cljs index 58ba51592b..cb06daa09d 100644 --- a/src/status_im/contexts/communities/actions/share_community_channel/view.cljs +++ b/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 diff --git a/src/status_im/contexts/preview/quo/share/share_qr_code.cljs b/src/status_im/contexts/preview/quo/share/share_qr_code.cljs index f8f0cbcd70..804097da13 100644 --- a/src/status_im/contexts/preview/quo/share/share_qr_code.cljs +++ b/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])