feat(communities): add feature to share community channel qr code (#18807)
This commit is contained in:
parent
28f43acb83
commit
321ff9257b
|
@ -12,7 +12,7 @@
|
|||
(defn- initials
|
||||
[{:keys [full-name size customization-color theme]}]
|
||||
(let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
|
||||
channel-name (string/replace full-name "#" "")]
|
||||
channel-name (utils.string/safe-replace full-name "#" "")]
|
||||
[text/text
|
||||
(cond-> {:accessibility-label :initials
|
||||
:style {:color (colors/resolve-color customization-color theme)}
|
||||
|
|
|
@ -33,9 +33,12 @@
|
|||
(let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
|
||||
{:url url
|
||||
:port (rf/sub [:mediaserver/port])
|
||||
:qr-size (or 400 (int size))
|
||||
:qr-size (or (int size) 400)
|
||||
:error-level :highest})]
|
||||
[quo/qr-code (assoc props :qr-image-uri qr-media-server-uri)]))
|
||||
[quo/qr-code
|
||||
(assoc props
|
||||
:qr-image-uri
|
||||
qr-media-server-uri)]))
|
||||
|
||||
(defn get-network-short-name-url
|
||||
[network]
|
||||
|
|
|
@ -94,10 +94,10 @@
|
|||
:label (i18n/label :t/invite-people-from-contacts)})
|
||||
|
||||
(defn- action-qr-code
|
||||
[]
|
||||
[chat-id]
|
||||
{:icon :i/qr-code
|
||||
:accessibility-label :chat-show-qr-code
|
||||
:on-press not-implemented/alert
|
||||
:on-press #(rf/dispatch [:communities/share-community-channel-url-qr-code chat-id])
|
||||
:label (i18n/label :t/show-qr)})
|
||||
|
||||
(defn- action-share
|
||||
|
@ -115,7 +115,7 @@
|
|||
[quo/action-drawer
|
||||
[[(action-invite-people)
|
||||
(action-token-requirements)
|
||||
(action-qr-code)
|
||||
(action-qr-code chat-id)
|
||||
(action-share chat-id)]]]
|
||||
|
||||
(and (not inside-chat?) (not locked?))
|
||||
|
@ -126,7 +126,7 @@
|
|||
(action-notification-settings)
|
||||
(action-pinned-messages)
|
||||
(action-invite-people)
|
||||
(action-qr-code)
|
||||
(action-qr-code chat-id)
|
||||
(action-share chat-id)]]]
|
||||
|
||||
(and inside-chat? (not locked?))
|
||||
|
@ -139,7 +139,7 @@
|
|||
(when config/fetch-messages-enabled?
|
||||
(chat-actions/fetch-messages chat-id))
|
||||
(action-invite-people)
|
||||
(action-qr-code)
|
||||
(action-qr-code chat-id)
|
||||
(action-share chat-id)]]]
|
||||
|
||||
:else nil)))
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
(ns status-im.contexts.communities.actions.share-community-channel.style
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(def header-container
|
||||
{:padding-horizontal 20
|
||||
:padding-vertical 12})
|
||||
|
||||
(def scan-notice
|
||||
{:color colors/white-70-blur
|
||||
:margin-top 16
|
||||
:margin-left :auto
|
||||
:margin-right :auto})
|
||||
|
||||
(def qr-code-wrapper
|
||||
{:padding-horizontal 20
|
||||
:margin-top 8
|
||||
:align-items :center})
|
||||
|
||||
(def gradient-cover-padding 20)
|
||||
(def qr-code-padding 12)
|
||||
|
||||
(defn qr-code-size
|
||||
[total-width]
|
||||
(- total-width (* gradient-cover-padding 2) (* qr-code-padding 2)))
|
||||
|
||||
(defn gradient-cover-size
|
||||
[total-width]
|
||||
(- total-width (* gradient-cover-padding 2)))
|
||||
|
||||
(defn gradient-cover-wrapper
|
||||
[width]
|
||||
{:width (gradient-cover-size width)
|
||||
:position :absolute
|
||||
:border-radius 12
|
||||
:z-index -1})
|
|
@ -0,0 +1,47 @@
|
|||
(ns status-im.contexts.communities.actions.share-community-channel.view
|
||||
(:require
|
||||
[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.communities.actions.share-community-channel.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(fn []
|
||||
(let [{:keys [url chat-id]} (rf/sub [:get-screen-params])
|
||||
{:keys [color emoji chat-name]} (rf/sub [:chats/community-channel-ui-details-by-id chat-id])
|
||||
window-width (rf/sub [:dimensions/window-width])]
|
||||
[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 #(rf/dispatch [: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}]]]
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:style style/scan-notice}
|
||||
(i18n/label :t/scan-with-status-app)]]])))
|
|
@ -252,14 +252,23 @@
|
|||
(get-in db [:communities community-id :previous-share-all-addresses?]))
|
||||
:fx [[:dispatch [:communities/check-permissions-to-join-community community-id]]]})))
|
||||
|
||||
(rf/reg-event-fx :communities/share-community-channel-url-with-data
|
||||
(fn [_ [chat-id]]
|
||||
(let [{:keys [community-id channel-id]} (data-store.chats/decode-chat-id chat-id)
|
||||
title (i18n/label :t/channel-on-status)]
|
||||
(rf/reg-event-fx :communities/get-community-channel-share-data
|
||||
(fn [_ [chat-id on-success]]
|
||||
(let [{:keys [community-id channel-id]} (data-store.chats/decode-chat-id chat-id)]
|
||||
{:json-rpc/call
|
||||
[{:method "wakuext_shareCommunityChannelURLWithData"
|
||||
:params [{:CommunityID community-id :ChannelID channel-id}]
|
||||
:on-success (fn [url]
|
||||
:on-success on-success
|
||||
:on-error (fn [err]
|
||||
(log/error "failed to retrieve community channel url with data"
|
||||
{:error err
|
||||
:chat-id chat-id
|
||||
:event :communities/get-community-channel-share-data}))}]})))
|
||||
|
||||
(rf/reg-event-fx :communities/share-community-channel-url-with-data
|
||||
(fn [_ [chat-id]]
|
||||
(let [title (i18n/label :t/channel-on-status)
|
||||
on-success (fn [url]
|
||||
(share/open
|
||||
(if platform/ios?
|
||||
{:activityItemSources [{:placeholderItem {:type "text"
|
||||
|
@ -271,12 +280,15 @@
|
|||
:subject title
|
||||
:message url
|
||||
:url url
|
||||
:isNewTask true})))
|
||||
:on-error (fn [err]
|
||||
(log/error "failed to retrieve community channel url with data"
|
||||
{:error err
|
||||
:chat-id chat-id
|
||||
:event "share-community-channel-url-with-data"}))}]})))
|
||||
:isNewTask true})))]
|
||||
{:fx [[:dispatch [:communities/get-community-channel-share-data chat-id on-success]]]})))
|
||||
|
||||
(rf/reg-event-fx :communities/share-community-channel-url-qr-code
|
||||
(fn [_ [chat-id]]
|
||||
(let [on-success #(rf/dispatch [:open-modal :share-community-channel
|
||||
{:chat-id chat-id
|
||||
:url %}])]
|
||||
{:fx [[:dispatch [:communities/get-community-channel-share-data chat-id on-success]]]})))
|
||||
|
||||
(rf/reg-event-fx :communities/set-airdrop-address
|
||||
(fn [{:keys [db]} [address community-id]]
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
addresses-for-permissions]
|
||||
[status-im.contexts.communities.actions.airdrop-addresses.view :as airdrop-addresses]
|
||||
[status-im.contexts.communities.actions.request-to-join.view :as join-menu]
|
||||
[status-im.contexts.communities.actions.share-community-channel.view :as share-community-channel]
|
||||
[status-im.contexts.communities.discover.view :as communities.discover]
|
||||
[status-im.contexts.communities.overview.view :as communities.overview]
|
||||
[status-im.contexts.onboarding.create-password.view :as create-password]
|
||||
|
@ -115,6 +116,10 @@
|
|||
:options {:sheet? true}
|
||||
:component join-menu/view}
|
||||
|
||||
{:name :share-community-channel
|
||||
:options options/transparent-screen-options
|
||||
:component share-community-channel/view}
|
||||
|
||||
{:name :community-account-selection
|
||||
:options {:sheet? true}
|
||||
:component communities.accounts-selection/view}
|
||||
|
|
|
@ -221,6 +221,16 @@
|
|||
:community-id
|
||||
:emoji])))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:chats/community-channel-ui-details-by-id
|
||||
:<- [:chats/chats]
|
||||
(fn [chats [_ chat-id]]
|
||||
(select-keys
|
||||
(get chats chat-id)
|
||||
[:chat-name
|
||||
:color
|
||||
:emoji])))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:chats/current-chat-message-list-view-context
|
||||
:<- [:chats/current-chat-chat-view]
|
||||
|
|
|
@ -161,3 +161,19 @@
|
|||
(is (not (:can-delete-message-for-everyone? (rf/sub [sub-name]))))
|
||||
(is (not (:group-admin? (rf/sub [sub-name]))))
|
||||
(is (not (:message-pin-enabled (rf/sub [sub-name])))))))
|
||||
|
||||
(h/deftest-sub :chats/community-channel-ui-details-by-id
|
||||
[sub-name]
|
||||
(testing "returns specific ui details of a given community channel chat id"
|
||||
(let [chats {chat-id (assoc community-chat
|
||||
:color :army
|
||||
:emoji "🍑"
|
||||
:chat-name "test")}]
|
||||
(swap! rf-db/app-db assoc
|
||||
:chats
|
||||
chats)
|
||||
(let [result (rf/sub [sub-name chat-id])]
|
||||
(is (= 3 (count (keys result))))
|
||||
(is (= :army (:color result)))
|
||||
(is (= "test" (:chat-name result)))
|
||||
(is (= "🍑" (:emoji result)))))))
|
||||
|
|
|
@ -1260,6 +1260,7 @@
|
|||
"scan-or-enter-sync-code": "Scan or enter sync code",
|
||||
"scan-qr": "Scan QR",
|
||||
"scan-qr-code": "Scan QR code",
|
||||
"scan-with-status-app": "Scan with the Status app on another device",
|
||||
"invalid-qr": "Oops! This QR doesn’t work with Status",
|
||||
"search": "Search",
|
||||
"search-discover-communities": "Search communities or categories",
|
||||
|
|
Loading…
Reference in New Issue