Show modal title and community context tag

Author: ilmotta

src/status_im2/contexts/communities/actions/accounts_selection/style.cljs

@@ -0,0 +1,5 @@
+(ns status-im2.contexts.communities.actions.accounts-selection.style)
+
+(def page-top
+  {:padding-horizontal 20
+   :padding-vertical   12})

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

@@ -4,7 +4,8 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [status-im2.common.password-authentication.view :as password-authentication]
-    [status-im2.contexts.communities.actions.request-to-join.style :as style]
+    [status-im2.contexts.communities.actions.accounts-selection.style :as style]
+    [status-im2.contexts.communities.actions.request-to-join.style :as req-join.style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -17,24 +18,38 @@
                                           {:community-id id :password %}])}])
   (rf/dispatch [:navigate-back]))
 
+(defn- page-top
+  [{:keys [community-name logo-uri]}]
+  [rn/view {:style style/page-top}
+   [quo/text
+    {:size   :heading-1
+     :weight :semi-bold}
+    (i18n/label :t/request-to-join)]
+   [quo/context-tag
+    {:type            :community
+     :size            24
+     :community-logo  logo-uri
+     :community-name  community-name
+     :container-style {:margin-top 8}}]])
+
 (defn view
   []
-  (fn []
-    (let [{:keys [_name
-                  id
-                  _images]} (rf/sub [:get-screen-params])]
-      [rn/view {:flex 1}
-       [gesture/scroll-view {:style {:flex 1}}
-        [rn/view style/page-container
-         [rn/view {:style (style/bottom-container)}
-          [quo/button
-           {:accessibility-label :cancel
-            :on-press            #(rf/dispatch [:navigate-back])
-            :type                :grey
-            :container-style     style/cancel-button}
-           (i18n/label :t/cancel)]
-          [quo/button
-           {:accessibility-label :join-community-button
-            :on-press            #(join-community-and-navigate-back id)
-            :container-style     {:flex 1}}
-           (i18n/label :t/request-to-join)]]]]])))
+  (let [{id :community-id}          (rf/sub [:get-screen-params])
+        {:keys [name color images]} (rf/sub [:communities/community id])]
+    [rn/view {:style {:flex 1}}
+     [quo/page-nav
+      {:text-align          :left
+       :icon-name           :i/close
+       :on-press            #(rf/dispatch [:navigate-back])
+       :accessibility-label :back-button}]
+     [page-top
+      {:community-name name
+       :logo-uri       (get-in images [:thumbnail :uri])}]
+     [gesture/scroll-view {:style {:flex 1}}
+      [rn/view req-join.style/page-container
+       [quo/slide-button
+        {:size                48
+         :track-text          (i18n/label :t/slide-to-request-to-join)
+         :track-icon          :i/face-id
+         :customization-color color
+         :on-complete         #(join-community-and-navigate-back id)}]]]]))

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

@@ -173,7 +173,7 @@
         (i18n/label :t/join-open-community)]])))
 
 (defn join-community
-  [{:keys [joined color permissions token-permissions] :as community}
+  [{:keys [joined color permissions token-permissions id] :as community}
    pending?]
   (let [access-type     (get-access-type (:access permissions))
         unknown-access? (= access-type :unknown-access)
@@ -185,7 +185,7 @@
          [quo/button
           {:on-press
            (if config/community-accounts-selection-enabled?
-             #(rf/dispatch [:open-modal :community-account-selection community])
+             #(rf/dispatch [:open-modal :community-account-selection {:community-id id}])
              #(rf/dispatch [:open-modal :community-requests-to-join community]))
 
            :accessibility-label :show-request-to-join-screen-button

translations/en.json

@@ -1902,6 +1902,7 @@
     "swap": "Swap",
     "select-token-to-swap": "Select token to Swap",
     "select-token-to-receive": "Select token to receive",
+    "slide-to-request-to-join": "Slide to request to join",
     "slide-to-reveal-code": "Slide to reveal code",
     "slide-to-create-account": "Slide to create account",
     "minimum-received": "Minimum received",
@@ -2405,5 +2406,5 @@
     "send-limit": "Max: {{limit}}",
     "searching-for-activity": "Searching for activity...",
     "this-address-has-no-activity": "This address has no activity",
-    "this-address-has-activity": "This address has activity"   
+    "this-address-has-activity": "This address has activity"
 }