Use quo/bottom-actions component in addresses for permissions screen (#18863)

Author: ajayesivan

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

@@ -1,16 +1,3 @@
 (ns status-im.contexts.communities.actions.addresses-for-permissions.style)
 
 (def container {:flex 1})
-
-(def buttons
-  {:flex-direction     :row
-   :gap                12
-   :padding-horizontal 20
-   :padding-vertical   12})
-
-(def highest-role
-  {:flex-direction  :row
-   :gap             4
-   :justify-content :center
-   :align-items     :center
-   :margin-bottom   8})

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

@@ -1,17 +1,24 @@
 (ns status-im.contexts.communities.actions.addresses-for-permissions.view
   (:require [quo.core :as quo]
-            [quo.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
             [status-im.common.not-implemented :as not-implemented]
             [status-im.common.resources :as resources]
             [status-im.constants :as constants]
             [status-im.contexts.communities.actions.addresses-for-permissions.style :as style]
-            [status-im.contexts.communities.utils :as communities.utils]
             [utils.i18n :as i18n]
             [utils.money :as money]
             [utils.re-frame :as rf]))
 
+(defn- role-keyword
+  [role]
+  (condp = role
+    constants/community-token-permission-become-token-owner  :token-owner
+    constants/community-token-permission-become-token-master :token-master
+    constants/community-token-permission-become-admin        :admin
+    constants/community-token-permission-become-member       :member
+    nil))
+
 (defn- balances->components-props
   [balances token-img-src]
   (for [{:keys [amount decimals type name] :as balance} balances]
@@ -70,10 +77,7 @@
             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])
-            highest-role-text                 (when highest-permission-role
-                                                (i18n/label (communities.utils/role->translation-key
-                                                             highest-permission-role)))]
+            unsaved-address-changes?          (rf/sub [:communities/unsaved-address-changes? id])]
         [rn/safe-area-view {:style style/container}
          [quo/drawer-top
           {:type                :context-tag
@@ -109,42 +113,31 @@
            :key-fn                  :address
            :data                    accounts}]
 
-         (if (and highest-permission-role (seq selected-addresses))
-           [rn/view
-            {:style style/highest-role}
-            [quo/text
-             {:size  :paragraph-2
-              :style {:color colors/neutral-50}}
-             (i18n/label :t/eligible-to-join-as)]
-            [quo/context-tag
-             {:type    :icon
-              :icon    :i/members
-              :size    24
-              :context highest-role-text}]]
-           [quo/info-message
-            {:type  :error
-             :size  :default
-             :icon  :i/info
-             :style {:justify-content :center}}
-            (if (empty? selected-addresses)
-              (i18n/label :t/no-addresses-selected)
-              (i18n/label :t/addresses-dont-contain-tokens-needed))])
-
-         [rn/view {:style style/buttons}
-          [quo/button
-           {:type            :grey
-            :container-style {:flex 1}
-            :on-press        (fn []
-                               (rf/dispatch [:communities/reset-selected-permission-addresses id])
-                               (rf/dispatch [:navigate-back]))}
-           (i18n/label :t/cancel)]
-          [quo/button
-           {:container-style     {:flex 1}
-            :customization-color color
-            :disabled?           (or (empty? selected-addresses)
-                                     (not highest-permission-role)
-                                     (not unsaved-address-changes?))
-            :on-press            (fn []
-                                   (rf/dispatch [:communities/update-previous-permission-addresses id])
-                                   (rf/dispatch [:navigate-back]))}
-           (i18n/label :t/confirm-changes)]]]))))
+         [quo/bottom-actions
+          {:actions          :two-actions
+           :button-one-label (i18n/label :t/confirm-changes)
+           :button-one-props {:customization-color color
+                              :disabled?           (or (empty? selected-addresses)
+                                                       (not highest-permission-role)
+                                                       (not unsaved-address-changes?))
+                              :on-press            (fn []
+                                                     (rf/dispatch
+                                                      [:communities/update-previous-permission-addresses
+                                                       id])
+                                                     (rf/dispatch [:navigate-back]))}
+           :button-two-label (i18n/label :t/cancel)
+           :button-two-props {:type     :grey
+                              :on-press (fn []
+                                          (rf/dispatch
+                                           [:communities/reset-selected-permission-addresses id])
+                                          (rf/dispatch [:navigate-back]))}
+           :description      (if (or (empty? selected-addresses)
+                                     (not highest-permission-role))
+                               :top-error
+                               :top)
+           :role             (role-keyword highest-permission-role)
+           :error-message    (cond
+                               (empty? selected-addresses)   (i18n/label :t/no-addresses-selected)
+                               (not highest-permission-role) (i18n/label
+                                                              :t/addresses-dont-contain-tokens-needed)
+                               :else                         nil)}]]))))