diff --git a/resources/images/ui/coinbase-community-background@2x.png b/resources/images/ui/coinbase-community-background@2x.png new file mode 100644 index 0000000000..ac46114bc1 Binary files /dev/null and b/resources/images/ui/coinbase-community-background@2x.png differ diff --git a/resources/images/ui/coinbase_community-background@3x.png b/resources/images/ui/coinbase_community-background@3x.png new file mode 100644 index 0000000000..cfbb95e23a Binary files /dev/null and b/resources/images/ui/coinbase_community-background@3x.png differ diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index 77f071187a..86cad5ed21 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -1,49 +1,45 @@ (ns quo2.components.community.community-card-view (:require [quo2.components.community.community-view :as community-view] - [status-im.communities.core :as communities] - [status-im.utils.handlers :refer [>evt evt [::communities/load-category-states id]) - (>evt [:dismiss-keyboard]) - (>evt [:navigate-to :community {:community-id id}])) - :on-long-press #(>evt [:bottom-sheet/show-sheet - {:content (fn [] [community/community-actions community])}])} - [react/view - {:flex 1} - [react/view (styles/community-cover-container 40) - [react/image - {:source cover - :style - {:flex 1 - :border-radius 20}}]] - [react/view (styles/card-view-content-container 12) - [react/view (styles/card-view-chat-icon 48) - [communities.icon/community-icon-redesign community 48]] - (when (= status :gated) - [react/view (styles/permission-tag-styles) - [community-view/permission-tag-container {:locked locked - :status status - :tokens tokens}]]) - [community-view/community-title - {:title name - :description description}] - [community-view/community-stats-column :card-view] - [community-view/community-tags tags]]]]])) \ No newline at end of file + [react/touchable-opacity {:on-press on-press} + [react/view {:style (merge (styles/community-card 20) + {:margin-bottom 16} + (if featured + {:margin-right 12 + :width width} + {:flex 1 + :margin-horizontal 20}))} + [react/view {:style {:height 230 + :border-radius 20} + :on-press on-press} + [react/view + {:flex 1} + [react/view (styles/community-cover-container 40) + [react/image + {:source cover + :style + {:flex 1 + :border-radius 20}}]] + [react/view (styles/card-view-content-container 12) + [react/view (styles/card-view-chat-icon 48) + [communities.icon/community-icon-redesign community 48]] + (when (= status :gated) + [react/view (styles/permission-tag-styles) + [community-view/permission-tag-container {:locked locked + :status status + :tokens tokens}]]) + [community-view/community-title + {:title name + :description description}] + [community-view/community-stats-column :card-view] + [community-view/community-tags tags]]]]]])) + diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 0d6119a2a7..1cb8df9f96 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -347,6 +347,21 @@ (sort-by #(get names (get % 0))) (sort-by #(visibility-status-utils/visibility-status-order (get % 0))))))) +(re-frame/reg-sub + :communities/featured-communities + :<- [:communities/enabled?] + :<- [:search/home-filter] + :<- [:communities] + (fn [[communities-enabled? search-filter communities]] + (filterv + (fn [{:keys [name featured id]}] + (and (or featured (= name "Status")) ;; TO DO: remove once featured communities exist + (or communities-enabled? + (= id constants/status-community-id)) + (or (empty? search-filter) + (string/includes? (string/lower-case (str name)) search-filter)))) + (vals communities)))) + (re-frame/reg-sub :communities/communities :<- [:communities/enabled?] diff --git a/src/status_im/switcher/home_stack.cljs b/src/status_im/switcher/home_stack.cljs index 2de45b07cb..003cbd168b 100644 --- a/src/status_im/switcher/home_stack.cljs +++ b/src/status_im/switcher/home_stack.cljs @@ -29,7 +29,7 @@ :right 0 :position :absolute})} (case stack-id - :communities-stack [communities/views] + :communities-stack [communities/communities-list] :chats-stack [home/home] :wallet-stack [wallet.accounts/accounts-overview] :browser-stack [profile.user/my-profile])])])) diff --git a/src/status_im/ui/screens/communities/communities_list_redesign.cljs b/src/status_im/ui/screens/communities/communities_list_redesign.cljs index bf754016df..632dbf1129 100644 --- a/src/status_im/ui/screens/communities/communities_list_redesign.cljs +++ b/src/status_im/ui/screens/communities/communities_list_redesign.cljs @@ -18,7 +18,7 @@ [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.topbar :as topbar] [status-im.ui.components.plus-button :as plus-button] - [status-im.utils.handlers :refer [evt]] [status-im.ui.components.topnav :as topnav] [quo2.components.community.community-card-view :as community-card] [quo2.components.community.community-list-view :as community-list] @@ -28,7 +28,7 @@ (def view-type (reagent/atom :card-view)) (def sort-list-by (reagent/atom :name)) -(def community-item-data +(def mock-community-item-data ;; TO Do remove once communities are loaded with this data. {:data {:status :gated :locked true :cover (resources/get-image :community-cover) @@ -47,17 +47,17 @@ (defn render-other-fn [community-item] (let [item (merge community-item - (get community-item-data :data) + (get mock-community-item-data :data) {:featured false})] (if (= @view-type :card-view) - [community-card/community-card-view-item item] + [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])] [community-list/communities-list-view-item item]))) (defn render-featured-fn [community-item] (let [item (merge community-item - (get community-item-data :data) + (get mock-community-item-data :data) {:featured true})] - [community-card/community-card-view-item item])) + [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])])) (defn community-list-key-fn [item] (:id item)) @@ -101,7 +101,7 @@ (defn featured-communities [communities] [list/flat-list - {:key-fn community-list-key-fn + {:key-fn str :horizontal true :getItemLayout get-item-layout-js :keyboard-should-persist-taps :always @@ -112,7 +112,7 @@ (defn other-communities [communities sort-list-by] (let [sorted-communities (sort-by sort-list-by communities)] [list/flat-list - {:key-fn community-list-key-fn + {:key-fn str :getItemLayout get-item-layout-js :keyboard-should-persist-taps :always :shows-horizontal-scroll-indicator false @@ -133,7 +133,7 @@ [other-communities communities sort-list-by]))) (defn featured-communities-section [communities] - (let [count (reagent/atom {:value 2 :type :grey})] + (let [count (reagent/atom {:value (count communities) :type :grey})] [react/view {:flex 1} [react/view {:flex-direction :row :height 30 @@ -202,9 +202,10 @@ quo2.colors/neutral-50 quo2.colors/neutral-40)}]]])) -(defn views [] +(defn communities-list [] (let [multiaccount ( [react/view {:margin-vertical 4 diff --git a/src/status_im/ui/screens/communities/community_overview_redesign.cljs b/src/status_im/ui/screens/communities/community_overview_redesign.cljs new file mode 100644 index 0000000000..ce24aa84bc --- /dev/null +++ b/src/status_im/ui/screens/communities/community_overview_redesign.cljs @@ -0,0 +1,67 @@ +(ns status-im.ui.screens.communities.community-overview-redesign + (:require [status-im.i18n.i18n :as i18n] + [status-im.ui.components.react :as react] + [quo2.components.markdown.text :as quo2.text] + [quo2.components.buttons.button :as quo2.button] + [quo2.components.community.community-view :as community-view] + [status-im.utils.handlers :refer [