Implement Community Permissions Drawer

Fix bottom sheet bg color

Remove comment

Remove detail-token-view from screens

Show Permissions button on request to join screen

Community overview icon color fix

Replace dummy sheet on overview screen with permissions sheet

Passing community id properly to the bottomsheet

Show permission drawer button only when there is membership permission or user meets the requirements

Fix Permission Listing

Remove dead code

Remove anonymous functions

Empty member permission block - fix

Remove unused styles

Lint fix

New events to get all permission checks

src/quo/components/tags/collectible_tag/schema.cljs

@@ -9,7 +9,7 @@
       [:size {:optional true} [:maybe [:enum :size-24 :size-32]]]
       [:blur? {:optional true} [:maybe :boolean]]
       [:theme :schema.common/theme]
-      [:collectible-img-src :schema.common/image-source]
+      [:collectible-img-src [:maybe :schema.common/image-source :string]]
       [:collectible-name :string]
-      [:collectible-id :string]]]]
+      [:collectible-id {:optional true} [:maybe :string]]]]]
    :any])

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

@@ -8,6 +8,7 @@
     [status-im.contexts.communities.actions.addresses-for-permissions.view :as addresses-for-permissions]
     [status-im.contexts.communities.actions.airdrop-addresses.view :as airdrop-addresses]
     [status-im.contexts.communities.actions.community-rules.view :as community-rules]
+    [status-im.contexts.communities.actions.detail-token-gating.view :as detail-token-gating]
     [status-im.contexts.communities.utils :as communities.utils]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -32,21 +33,32 @@
                                                         #(rf/dispatch
                                                           [:communities/request-to-join-with-addresses
                                                            {:community-id id :password %}])}])
-                                         (navigate-back))]
+                                         (navigate-back))
+        open-permission-drawer         (fn []
+                                         (rf/dispatch [:show-bottom-sheet
+                                                       {:content (fn [] [detail-token-gating/view
+                                                                         id])}]))]
     (fn []
-      (let [{:keys [name color images]}       (rf/sub [:communities/community id])
+      (let [{:keys [name color images
+                    membership-permissions?]} (rf/sub [:communities/community id])
             airdrop-account                   (rf/sub [:communities/airdrop-account id])
             selected-accounts                 (rf/sub [:communities/selected-permission-accounts id])
-            {:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
+            {:keys [highest-permission-role
+                    no-member-permission?]}   (rf/sub [:community/token-gated-overview id])
             highest-role-text                 (i18n/label (communities.utils/role->translation-key
                                                            highest-permission-role
                                                            :t/member))]
         [rn/safe-area-view {:style style/container}
          [quo/page-nav
-          {:text-align          :left
-           :icon-name           :i/close
-           :on-press            navigate-back
-           :accessibility-label :back-button}]
+          (cond-> {:text-align          :left
+                   :icon-name           :i/close
+                   :on-press            navigate-back
+                   :accessibility-label :back-button}
+            (or membership-permissions? (and highest-permission-role (not no-member-permission?)))
+            (assoc :right-side
+                   [{:icon-left :i/unlocked
+                     :on-press  open-permission-drawer
+                     :label     (i18n/label :t/permissions)}]))]
          [quo/page-top
           {:title       (i18n/label :t/request-to-join)
            :description :context-tag

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

@@ -1,8 +1,8 @@
 (ns status-im.contexts.communities.actions.addresses-for-permissions.view
   (:require [quo.core :as quo]
             [react-native.gesture :as gesture]
-            [status-im.common.not-implemented :as not-implemented]
             [status-im.constants :as constants]
+            [status-im.contexts.communities.actions.detail-token-gating.view :as detail-token-gating]
             [utils.i18n :as i18n]
             [utils.money :as money]
             [utils.re-frame :as rf]))
@@ -63,27 +63,34 @@
                                      (rf/dispatch [:hide-bottom-sheet]))
         reset-selected-addresses   (fn []
                                      (rf/dispatch [:communities/reset-selected-permission-addresses id])
-                                     (rf/dispatch [:hide-bottom-sheet]))]
+                                     (rf/dispatch [:hide-bottom-sheet]))
+        open-permission-drawer     (fn []
+                                     (rf/dispatch [:show-bottom-sheet
+                                                   {:content (fn [] [detail-token-gating/view id])}]))]
     (rf/dispatch [:communities/get-permissioned-balances id])
     (fn []
-      (let [{:keys [name color images]}       (rf/sub [:communities/community id])
+      (let [{:keys [name color images
+                    membership-permissions?]} (rf/sub [:communities/community id])
             {:keys [checking?
-                    highest-permission-role]} (rf/sub [:community/token-gated-overview id])
+                    highest-permission-role
+                    no-member-permission?]}   (rf/sub [:community/token-gated-overview id])
             accounts                          (rf/sub [:wallet/accounts-without-watched-accounts])
             selected-addresses                (rf/sub [:communities/selected-permission-addresses id])
             share-all-addresses?              (rf/sub [:communities/share-all-addresses? id])
             unsaved-address-changes?          (rf/sub [:communities/unsaved-address-changes? id])]
         [:<>
          [quo/drawer-top
-          {:type                :context-tag
-           :title               (i18n/label :t/addresses-for-permissions)
-           :context-tag-type    :community
-           :community-name      name
-           :button-icon         :i/info
-           :button-type         :grey
-           :on-button-press     not-implemented/alert
-           :community-logo      (get-in images [:thumbnail :uri])
-           :customization-color color}]
+          (cond-> {:type                :context-tag
+                   :title               (i18n/label :t/addresses-for-permissions)
+                   :context-tag-type    :community
+                   :community-name      name
+                   :community-logo      (get-in images [:thumbnail :uri])
+                   :customization-color color}
+            (or membership-permissions? (and highest-permission-role (not no-member-permission?)))
+            (assoc
+             :button-icon
+             :i/info
+             :on-button-press open-permission-drawer))]
 
          [gesture/flat-list
           {:render-fn               account-item

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

@@ -0,0 +1,5 @@
+(ns status-im.contexts.communities.actions.detail-token-gating.style)
+
+(def container
+  {:flex               1
+   :padding-horizontal 20})

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

@@ -0,0 +1,34 @@
+(ns status-im.contexts.communities.actions.detail-token-gating.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.contexts.communities.actions.detail-token-gating.style :as style]
+    [status-im.contexts.communities.utils :as communities.utils]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn view
+  [id]
+  (let [permissions (rf/sub [:community/token-permissions id])
+        role-text   (fn [role]
+                      (i18n/label
+                       (communities.utils/role->translation-key role
+                                                                :t/token-master)))]
+
+    [rn/view {:style style/container}
+     (map (fn [{:keys [tokens role satisfied?]}]
+            (when (seq tokens)
+              ^{:key role}
+              [rn/view {:style {:margin-bottom 20}}
+               [quo/text {:weight :medium}
+                (if satisfied?
+                  (i18n/label :t/you-eligible-to-join-as {:role (role-text role)})
+                  (i18n/label :t/you-not-eligible-to-join))]
+               [quo/text {:size :paragraph-2 :style {:padding-bottom 8}}
+                (if satisfied?
+                  (i18n/label :t/you-hodl)
+                  (i18n/label :t/you-must-hold))]
+               [quo/token-requirement-list
+                {:tokens          tokens
+                 :container-style {:padding-horizontal 20}}]]))
+          permissions)]))

src/status_im/contexts/communities/events.cljs

@@ -30,6 +30,7 @@
               [:communities id]
               (assoc community :last-opened-at (max last-opened-at previous-last-opened-at)))
          :fx [[:dispatch [:communities/initialize-permission-addresses id]]
+              [:dispatch [:communities/check-permissions-to-join-community-with-all-addresses id]]
               (when (not joined)
                 [:dispatch [:chat.ui/spectate-community id]])
               (when (nil? token-permissions-check)

src/status_im/contexts/communities/overview/events.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.communities.overview.events
   (:require
+    [status-im.contexts.communities.utils :as utils]
     [taoensso.timbre :as log]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -38,6 +39,40 @@
                                                   community-id
                                                   err))}]}))))
 
+(rf/reg-event-fx :communities/check-permissions-to-join-community-with-all-addresses-success
+ (fn [{:keys [db]} [community-id result]]
+   {:db (-> db
+            (assoc-in [:communities/permissions-check-all community-id]
+                      {:checking? false
+                       :check     result}))}))
+
+(rf/reg-event-fx :communities/check-permissions-to-join-community-with-all-addresses-failed
+ (fn [{:keys [db]} [community-id]]
+   {:db (assoc-in db [:communities/permissions-check-all community-id :checking?] false)}))
+
+(rf/reg-event-fx :communities/check-permissions-to-join-community-with-all-addresses
+ (fn [{:keys [db]} [community-id]]
+   (let [accounts  (utils/sorted-non-watch-only-accounts db)
+         addresses (set (map :address accounts))]
+     (when-let [community (get-in db [:communities community-id])]
+       (when-not (:checking-permissions? community)
+         {:db            (assoc-in db [:communities/permissions-check community-id :checking?] true)
+          :json-rpc/call [{:method "wakuext_checkPermissionsToJoinCommunity"
+                           :params [(cond-> {:communityId community-id}
+                                      addresses
+                                      (assoc :addresses addresses))]
+                           :on-success
+                           [:communities/check-permissions-to-join-community-with-all-addresses-success
+                            community-id]
+                           :on-error
+                           (fn [err]
+                             (rf/dispatch
+                              [:communities/check-permissions-to-join-community-with-all-addresses-failed
+                               community-id])
+                             (log/error "failed to check permissions for all addresses"
+                                        community-id
+                                        err))}]})))))
+
 (defn request-to-join
   [{:keys [db]}
    [{:keys [community-id password]}]]

src/status_im/contexts/communities/overview/view.cljs

@@ -3,6 +3,7 @@
     [oops.core :as oops]
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
+    [quo.theme :as theme]
     [react-native.blur :as blur]
     [react-native.core :as rn]
     [reagent.core :as reagent]
@@ -14,6 +15,7 @@
     [status-im.constants :as constants]
     [status-im.contexts.communities.actions.chat.view :as chat-actions]
     [status-im.contexts.communities.actions.community-options.view :as options]
+    [status-im.contexts.communities.actions.detail-token-gating.view :as detail-token-gating]
     [status-im.contexts.communities.overview.style :as style]
     [status-im.contexts.communities.utils :as communities.utils]
     [utils.debounce :as debounce]
@@ -96,21 +98,12 @@
     :unknown-access))
 
 (defn- info-button
-  []
-  [rn/pressable
-   {:on-press
-    #(rf/dispatch
-      [:show-bottom-sheet
-       {:content
-        (fn []
-          [quo/documentation-drawers
-           {:title        (i18n/label :t/token-gated-communities)
-            :show-button? true
-            :button-label (i18n/label :t/read-more)
-            :button-icon  :info}
-           [quo/text (i18n/label :t/token-gated-communities-info)]])}])}
-   [rn/view
-    [quo/icon :i/info {:no-color true}]]])
+  [on-press]
+  (let [theme (theme/use-theme)]
+    [rn/pressable
+     {:on-press on-press}
+     [rn/view
+      [quo/icon :i/info {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]]]))
 
 (defn- network-not-supported
   []
@@ -137,7 +130,10 @@
                 highest-permission-role]} (rf/sub [:community/token-gated-overview id])
         highest-role-text
         (i18n/label
-         (communities.utils/role->translation-key highest-permission-role :t/member))]
+         (communities.utils/role->translation-key highest-permission-role :t/member))
+        open-permission-drawer (fn []
+                                 (rf/dispatch [:show-bottom-sheet
+                                               {:content (fn [] [detail-token-gating/view id])}]))]
     (cond
 
       networks-not-supported?
@@ -158,7 +154,7 @@
          (if (and can-request-access? highest-permission-role)
            (i18n/label :t/you-eligible-to-join-as {:role highest-role-text})
            (i18n/label :t/you-not-eligible-to-join))]
-        [info-button]]
+        [info-button open-permission-drawer]]
        [quo/text {:style {:padding-horizontal 12 :padding-bottom 18} :size :paragraph-2}
         (if can-request-access?
           (i18n/label :t/you-hodl)

src/status_im/subs/communities.cljs

@@ -258,8 +258,8 @@
                              :position         position
                              :mentions-count   (or unviewed-mentions-count 0)
                              :can-post?        can-post?
-                             ;; NOTE: this is a troolean nil->no permissions, true->no access, false ->
-                             ;; has access
+                             ;; NOTE: this is a troolean nil->no permissions, true->no access, false
+                             ;; -> has access
                              :locked?          (when token-gated?
                                                  (not can-post?))
                              :id               id}]
@@ -311,6 +311,12 @@
  (fn [permissions [_ id]]
    (get permissions id)))
 
+(re-frame/reg-sub
+ :communities/checking-permissions-all-by-id
+ :<- [:communities/permissions-check-all]
+ (fn [permissions [_ id]]
+   (get permissions id)))
+
 (re-frame/reg-sub
  :community/token-gated-overview
  (fn [[_ community-id]]
@@ -410,3 +416,25 @@
         (map (fn [{sym :symbol image :image}]
                {sym image}))
         (into {}))))
+
+(re-frame/reg-sub
+ :community/token-permissions
+ (fn [[_ community-id]]
+   [(re-frame/subscribe [:communities/community community-id])
+    (re-frame/subscribe [:communities/checking-permissions-all-by-id community-id])])
+ (fn [[{:keys [token-images]}
+       {:keys [checking? check]}] _]
+   (let [roles                      (:roles check)
+         member-and-satisifed-roles (filter #(or (= (:type %) 2) (:satisfied %)) roles)]
+     (into []
+           (map (fn [role]
+                  {:role       (:type role)
+                   :satisfied? (:satisfied role)
+                   :tokens     (map (fn [{:keys [tokenRequirement]}]
+                                      (map
+                                       (partial token-requirement->token
+                                                checking?
+                                                token-images)
+                                       tokenRequirement))
+                                    (:criteria role))})
+                member-and-satisifed-roles)))))

src/status_im/subs/root.cljs

@@ -150,6 +150,7 @@
 (reg-root-key-sub :contract-communities :contract-communities)
 (reg-root-key-sub :communities/permissioned-balances :communities/permissioned-balances)
 (reg-root-key-sub :communities/permissions-check :communities/permissions-check)
+(reg-root-key-sub :communities/permissions-check-all :communities/permissions-check-all)
 (reg-root-key-sub :communities/channel-permissions-check :communities/channel-permissions-check)
 
 ;;activity center

translations/en.json

@@ -2287,9 +2287,7 @@
     "addresses-dont-contain-tokens-needed": "These addresses don’t contain tokens needed to join",
     "you-hodl": "You hodl:",
     "network-not-supported": "Networks not supported",
-    "token-gated-communities": "Token gated communities",
     "read-more": "Read more",
-    "token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it.",
     "dont-yell-at-me": "Don’t yell at me",
     "unmute-channel": "Unmute channel",
     "all-messages": "All messages",