Share community channel qr code

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

@@ -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/community-channel-url-qr-code-with-data 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)))

src/status_im/contexts/communities/events.cljs

@@ -252,6 +252,20 @@
                                   :chat-id chat-id
                                   :event   "share-community-channel-url-with-data"}))}]})))
 
+(rf/reg-event-fx :communities/community-channel-url-qr-code-with-data
+ (fn [_ [chat-id]]
+   (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]
+                      (rf/dispatch [:open-modal :share-community-channel {:url url}]))
+        :on-error   (fn [err]
+                      (log/error "failed to retrieve community channel url with data"
+                                 {:error err
+                                  :chat-id chat-id
+                                  :event [:communities/community-channel-url-qr-code-with-data]}))}]})))
+
 (rf/reg-event-fx :communities/set-airdrop-address
  (fn [{:keys [db]} [address community-id]]
    {:db (assoc-in db [:communities community-id :airdrop-address] address)}))

src/status_im/contexts/wallet/share_community_channel/style.cljs

@@ -0,0 +1,12 @@
+(ns status-im.contexts.wallet.share-community-channel.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def header-container
+  {:padding-horizontal 20
+   :padding-vertical   12})
+
+(def scan-notice
+  {:color        colors/neutral-40
+   :margin-top   12
+   :margin-left  :auto
+   :margin-right :auto})

src/status_im/contexts/wallet/share_community_channel/view.cljs

@@ -0,0 +1,75 @@
+(ns status-im.contexts.wallet.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.wallet.share-community-channel.style :as style]
+    [utils.i18n :as i18n]
+    [utils.image-server :as image-server]
+    [utils.re-frame :as rf]))
+
+(def qr-size 500)
+
+(def ^:private padding 32)
+
+(defn qr-code-size
+  [total-width]
+  (- total-width (* 2 padding)))
+
+(defn gradient-size
+  [total-width]
+  (- total-width (* 2 20)))
+
+(defn view
+  []
+  (let [padding-top (:top (safe-area/get-insets))]
+    (fn []
+      (let [chat                (rf/sub [:chats/current-chat-chat-view])
+            mediaserver-port    (rf/sub [:mediaserver/port])
+            window-width        (rf/sub [:dimensions/window-width])
+            {:keys [url]}       (rf/sub [:get-screen-params])
+            qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
+                                 {:url         url
+                                  :port        mediaserver-port
+                                  :qr-size     qr-size
+                                  :error-level :highest})
+            title               (i18n/label :t/share-channel)]
+        [quo/overlay {:type :shell}
+         (print qr-media-server-uri)
+         [rn/view
+          {:flex        1
+           :padding-top padding-top
+           :key         :share-community}
+          [quo/page-nav
+           {:icon-name           :i/close
+            :on-press            #(rf/dispatch [:navigate-back])
+            :background          :blur
+            :right-side          [{:icon-name :i/scan
+                                   :on-press  #(js/alert "To be implemented")}]
+            :accessibility-label :top-bar}]
+          [quo/text-combinations
+           {:container-style style/header-container
+            :title           title}]
+          [rn/view {:style {:padding-horizontal 20 :align-items :center}}
+           [quo/gradient-cover
+            {:container-style
+             {:width         (gradient-size window-width)
+              :position      :absolute
+              :border-radius 12
+              :z-index       -1}
+             :customization-color (:color chat)}]
+           [rn/view
+            {:style {:padding-vertical 12}}
+            [qr-codes/qr-code
+             {:size                (qr-code-size window-width)
+              :qr-image-uri        qr-media-server-uri
+              :avatar              :channel
+              :customization-color (:color chat)
+              :emoji               (:emoji chat)
+              :full-name           (:chat-name chat)}]]]
+          [quo/text
+           {:size   :paragraph-2
+            :weight :regular
+            :style  style/scan-notice}
+           (i18n/label :t/scan-with-status-app)]]]))))

src/status_im/navigation/screens.cljs

@@ -72,6 +72,7 @@
     [status-im.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation]
     [status-im.contexts.wallet.send.transaction-progress.view :as wallet-transaction-progress]
     [status-im.contexts.wallet.share-address.view :as wallet-share-address]
+    [status-im.contexts.wallet.share-community-channel.view :as share-community-channel]
     [status-im.navigation.options :as options]
     [status-im.navigation.transitions :as transitions]))
 
@@ -108,6 +109,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}

translations/en.json

@@ -1254,6 +1254,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",
     "search": "Search",
     "search-discover-communities": "Search communities or categories",
     "secret-keys-confirmation-text": "You will need them to continue to use your Keycard in case you ever lose your phone.",