quo2 core (#14319)

* quo2 core

src/quo2/components/community/community_card_view.cljs

@@ -1,48 +1,44 @@
 (ns quo2.components.community.community-card-view
   (:require
    [quo2.components.community.community-view :as community-view]
-   [status-im.utils.handlers :refer [<sub]]
+   [quo2.components.community.style :as style]
-   [status-im.ui.components.react :as react]
+   [react-native.core :as rn]))
-   [status-im.ui.screens.communities.styles :as styles]
-   [status-im.ui.screens.communities.icon :as communities.icon]))
 
-;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
 (defn community-card-view-item
   [{:keys [name description locked
-           status tokens cover tags featured] :as community} on-press]
+           status tokens cover tags featured]} on-press]
-  (let [width (* (<sub [:dimensions/window-width]) 0.90)]
+  [rn/touchable-opacity {:on-press on-press}
-    [react/touchable-opacity {:on-press on-press}
+   [rn/view {:style (merge (style/community-card 20)
-     [react/view {:style (merge (styles/community-card 20)
                            {:margin-bottom 16}
                            (if featured
-                                  {:margin-right 12
+                             {:margin-right 12}
-                                   :width width}
                              {:flex              1
                               :margin-horizontal 20}))}
-      [react/view {:style         {:height          230
+    [rn/view {:style    {:height        230
                          :border-radius 20}
               :on-press on-press}
-       [react/view
+     [rn/view
       {:flex 1}
-        [react/view (styles/community-cover-container 40)
+      [rn/view (style/community-cover-container 40)
-         [react/image
+       [rn/image
         {:source cover
          :style
          {:flex          1
           :border-radius 20}}]]
-        [react/view (styles/card-view-content-container 12)
+      [rn/view (style/card-view-content-container 12)
-         [react/view (styles/card-view-chat-icon 48)
+       [rn/view (style/card-view-chat-icon 48)]
-          [communities.icon/community-icon-redesign community 48]]
+       ;;TODO new pure component based on quo2 should be implemented without status-im usage
+       ;[communities.icon/community-icon-redesign community 48]]
        (when (= status :gated)
-           [react/view (styles/permission-tag-styles)
+         [rn/view (style/permission-tag-styles)
           [community-view/permission-tag-container {:locked locked
                                                     :status status
                                                     :tokens tokens}]])
        [community-view/community-title
         {:title       name
          :description description}]
-         [react/view {:style (styles/card-stats-position)}
+       [rn/view {:style (style/card-stats-position)}
         [community-view/community-stats-column :card-view]]
-         [react/view {:style (styles/community-tags-position)}
+       [rn/view {:style (style/community-tags-position)}
-          [community-view/community-tags tags]]]]]]]))
+        [community-view/community-tags tags]]]]]]])
 

src/quo2/components/community/community_list_view.cljs

@@ -5,38 +5,28 @@
    [quo2.foundations.colors :as colors]
    [quo2.components.counter.counter :as counter]
    [quo2.components.icon :as icons]
-   [status-im.communities.core :as communities]
+   [quo2.components.community.style :as style]
-   [status-im.utils.handlers :refer [>evt]]
+   [react-native.core :as rn]))
-   [status-im.ui.components.react :as react]
-   [status-im.ui.screens.communities.styles :as styles]
-   [status-im.ui.screens.communities.community :as community]
-   [status-im.ui.screens.communities.icon :as communities.icon]))
 
-;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
+(defn communities-list-view-item [props {:keys [name locked? status notifications
-(defn communities-list-view-item [{:keys [id name locked? status notifications
+                                                tokens background-color]}]
-                                          tokens background-color] :as community}]
+  [rn/view {:style (merge (style/community-card 16)
-  [react/view {:style (merge (styles/community-card 16)
                           {:margin-bottom     12
                            :margin-horizontal 20})}
-   [react/view {:style         {:height             56
+   [rn/touchable-highlight (merge {:style {:height        56
-                                :border-radius      16}
+                                           :border-radius 16}}
-                :on-press      (fn []
+                                  props)
-                                 (>evt [::communities/load-category-states id])
+    [rn/view {:flex 1}
-                                 (>evt [:dismiss-keyboard])
+     [rn/view {:flex-direction     :row
-                                 (>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 {:flex-direction     :row
                :border-radius      16
                :padding-horizontal 12
                :align-items        :center
                :padding-vertical   8
                :background-color   background-color}
-      [react/view
+      [rn/view]
-       [communities.icon/community-icon-redesign community 32]]
+       ;;TODO new pure component based on quo2 should be implemented without status-im usage
-      [react/view {:flex              1
+       ;[communities.icon/community-icon-redesign community 32]]
+      [rn/view {:flex              1
                 :margin-horizontal 12}
        [text/text {:weight              :semi-bold
                    :size                :paragraph-1
@@ -54,7 +44,7 @@
                                                   :tokens  tokens}]
         (cond
           (= notifications :unread-messages-count)
-          [react/view {:style {:width            8
+          [rn/view {:style {:width            8
                             :height           8
                             :border-radius    4
                             :background-color (colors/theme-colors
@@ -73,23 +63,18 @@
                                                             colors/neutral-40
                                                             colors/neutral-50)}]))]]]])
 
-(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}]
+(defn communities-membership-list-item [props {:keys [name status tokens locked?]}]
-  [react/view {:margin-bottom       20}
+  [rn/view {:margin-bottom 20}
-   [react/touchable-highlight {:underlay-color      colors/primary-50-opa-5
+   [rn/touchable-highlight (merge {:underlay-color colors/primary-50-opa-5
-                               :style               {:border-radius 12}
+                                   :style          {:border-radius 12}}
-                               :on-press      (fn []
+                                  props)
-                                                (>evt [::communities/load-category-states id])
+    [rn/view {:flex 1}
-                                                (>evt [:dismiss-keyboard])
+     [rn/view {:flex-direction :row
-                                                (>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 {:flex-direction    :row
                :border-radius  16
                :align-items    :center}
-      [communities.icon/community-icon-redesign community 32]
+      ;;TODO new pure component based on quo2 should be implemented without status-im usage
-      [react/view {:flex              1
+      ;[communities.icon/community-icon-redesign community 32]
+      [rn/view {:flex            1
                 :margin-left     12
                 :justify-content :center}
        [text/text
@@ -100,7 +85,7 @@
          :size                :paragraph-1}
         name]]
       (when (= status :gated)
-        [react/view {:justify-content   :center
+        [rn/view {:justify-content :center
                   :margin-right    12}
          [community-view/permission-tag-container {:locked? locked?
                                                    :tokens  tokens}]])]]]])

src/quo2/components/community/community_view.cljs

@@ -5,22 +5,12 @@
    [quo2.foundations.colors :as colors]
    [quo2.components.tags.permission-tag :as permission]
    [quo2.components.tags.tag :as tag]
-   [status-im.ui.components.react :as react]
+   [quo2.components.community.style :as style]
-   [status-im.utils.money :as money]
+   [react-native.core :as rn]))
-   [status-im.i18n.i18n :as i18n]
-   [status-im.ui.screens.communities.styles :as styles]))
 
-;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
+(defn community-stats [{:keys [icon members-count icon-color]}]
-(defn format-members [count]
+  [rn/view (style/stats-count-container)
-  (if (> count 1000000)
+   [rn/view {:margin-right 4}
-    (str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
-    (if (and (> count 999) (< count 1000000))
-      (str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
-      count)))
-
-(defn community-stats [{:keys [icon count icon-color]}]
-  [react/view (styles/stats-count-container)
-   [react/view {:margin-right  4}
     [icons/icon icon {:container-style {:align-items     :center
                                         :justify-content :center}
                       :resize-mode     :center
@@ -28,18 +18,18 @@
                       :color           icon-color}]]
    [text/text {:weight :regular
                :size   :paragraph-1}
-    (format-members count)]])
+    members-count]])
 
 (defn community-stats-column [type]
   (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
-    [react/view (if (= type :card-view)
+    [rn/view (if (= type :card-view)
-                  (styles/card-stats-container)
+               (style/card-stats-container)
-                  (styles/list-stats-container))
+               (style/list-stats-container))
      [community-stats {:icon       :main-icons2/group
-                       :count      "629.2K"
+                       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
                        :icon-color icon-color}]
      [community-stats {:icon       :main-icons2/lightning
-                       :count      "112.1K"
+                       :members-count "112.1K"
                        :icon-color icon-color}]
      (when (= type :card-view)
        [community-stats {:icon       :main-icons2/placeholder
@@ -47,10 +37,10 @@
                          :icon-color icon-color}])]))
 
 (defn community-tags [tags]
-  [react/view (styles/community-tags-container)
+  [rn/view (style/community-tags-container)
    (for [{:keys [id tag-label resource]} tags]
      ^{:key id}
-     [react/view {:margin-right 8}
+     [rn/view {:margin-right 8}
       [tag/tag
        {:id       id
         :size     24
@@ -60,7 +50,7 @@
         :resource resource}]])])
 
 (defn community-title [{:keys [title description size] :or {size :small}}]
-  [react/view (styles/community-title-description-container (if (= size :large) 56 32))
+  [rn/view (style/community-title-description-container (if (= size :large) 56 32))
    (when title
      [text/text
       {:accessibility-label :chat-name-text

src/quo2/components/community/discover_card.cljs

@@ -1,10 +1,8 @@
 (ns quo2.components.community.discover-card
   (:require [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [status-im.ui.screens.communities.styles :as styles]
+            [quo2.components.community.style :as style]
-            [status-im.ui.components.react :as react]))
+            [react-native.core :as rn]))
-
-;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
 
 ;; Discover card placeholders images.
 ;; TODO replaced when real data is available
@@ -13,12 +11,12 @@
             {:id 2 :column-images [{}]}]})
 
 (defn card-title-and-description [title description]
-  [react/view
+  [rn/view
    {:flex               1
     :padding-top        8
     :padding-bottom     8
     :border-radius      12}
-   [react/view {:flex                1
+   [rn/view {:flex                1
              :padding-horizontal  12}
     [text/text {:accessibility-label :community-name-text
                 :ellipsize-mode      :tail
@@ -37,11 +35,11 @@
      description]]])
 
 (defn placeholder-list-images [{:keys [images width height border-radius]}]
-  [react/view
+  [rn/view
-   [react/view {:justify-content    :center}
+   [rn/view {:justify-content    :center}
     (for [{:keys [id]} images]
       ^{:key id}
-      [react/view {:border-radius    border-radius
+      [rn/view {:border-radius    border-radius
                 :margin-top       4
                 :margin-right     4
                 :width            width
@@ -50,9 +48,9 @@
 
 (defn placeholder-row-images [{:keys [first-image last-image images width height
                                       border-radius]}]
-  [react/view
+  [rn/view
    (when first-image
-     [react/view {:border-bottom-right-radius 6
+     [rn/view {:border-bottom-right-radius 6
                :border-bottom-left-radius  6
                :margin-right               4
                :width                      width
@@ -64,7 +62,7 @@
                                :height        32
                                :border-radius 6}])
    (when last-image
-     [react/view {:border-top-left-radius    border-radius
+     [rn/view {:border-top-left-radius    border-radius
                :border-top-right-radius   6
                :margin-top                4
                :width                     width
@@ -73,10 +71,10 @@
 
 (defn discover-card [{:keys [title description on-press accessibility-label]}]
   (let [on-joined-images     (get images   :images)]
-    [react/touchable-without-feedback
+    [rn/touchable-without-feedback
      {:on-press            on-press
       :accessibility-label accessibility-label}
-     [react/view (merge (styles/community-card 16)
+     [rn/view (merge (style/community-card 16)
                      {:background-color  (colors/theme-colors
                                           colors/white
                                           colors/neutral-90)}

src/quo2/components/community/style.cljs

@@ -1,6 +1,5 @@
-(ns status-im.ui.screens.communities.styles
+(ns quo2.components.community.style
-  (:require
+  (:require [quo2.foundations.colors :as colors]))
-   [quo2.foundations.colors :as colors]))
 
 (def category-item
   {:flex           1

src/quo2/core.cljs

@@ -0,0 +1,87 @@
+(ns quo2.core
+  (:require quo2.components.buttons.button
+            quo2.components.buttons.dynamic-button
+            quo2.components.markdown.text
+            quo2.components.icon
+            quo2.components.separator
+            quo2.components.header
+            quo2.components.avatars.account-avatar
+            quo2.components.avatars.channel-avatar
+            quo2.components.avatars.group-avatar
+            quo2.components.avatars.icon-avatar
+            quo2.components.avatars.user-avatar
+            quo2.components.avatars.wallet-user-avatar
+            quo2.components.community.community-card-view
+            quo2.components.community.community-list-view
+            quo2.components.community.community-view
+            quo2.components.community.discover-card
+            quo2.components.counter.counter
+            quo2.components.dividers.divider-label
+            quo2.components.dividers.new-messages
+            quo2.components.drawers.action-drawers
+            quo2.components.dropdowns.dropdown
+            quo2.components.info.info-message
+            quo2.components.info.information-box
+            quo2.components.list-items.channel
+            quo2.components.list-items.menu-item
+            quo2.components.list-items.preview-list
+            quo2.components.messages.gap
+            quo2.components.messages.system-message
+            quo2.components.reactions.reaction
+            quo2.components.notifications.activity-logs
+            quo2.components.notifications.info-count
+            quo2.components.notifications.notification-dot
+            quo2.components.tags.tags
+            quo2.components.tabs.tabs
+            quo2.components.tabs.account-selector))
+
+(def button quo2.components.buttons.button/button)
+(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
+(def text quo2.components.markdown.text/text)
+(def icon quo2.components.icon/icon)
+(def separator quo2.components.separator/separator)
+(def counter quo2.components.counter.counter/counter)
+(def header quo2.components.header/header)
+(def action-drawer quo2.components.drawers.action-drawers/action-drawer)
+(def dropdown quo2.components.dropdowns.dropdown/dropdown)
+(def info-message quo2.components.info.info-message/info-message)
+(def information-box quo2.components.info.information-box/information-box)
+(def gap quo2.components.messages.gap/gap)
+(def system-message quo2.components.messages.system-message/system-message)
+(def reaction quo2.components.reactions.reaction/reaction)
+(def tags quo2.components.tags.tags/tags)
+(def tabs quo2.components.tabs.tabs/tabs)
+(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
+(def account-selector quo2.components.tabs.account-selector/account-selector)
+
+;;;; AVATAR
+(def account-avatar quo2.components.avatars.account-avatar/account-avatar)
+(def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
+(def group-avatar quo2.components.avatars.group-avatar/group-avatar)
+(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
+(def user-avatar quo2.components.avatars.user-avatar/user-avatar)
+(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
+
+;;;; COMMUNITY
+(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
+(def communities-list-view-item quo2.components.community.community-list-view/communities-list-view-item)
+(def communities-membership-list-item quo2.components.community.community-list-view/communities-membership-list-item)
+(def community-stats-column quo2.components.community.community-view/community-stats-column)
+(def community-stats quo2.components.community.community-view/community-stats)
+(def community-tags quo2.components.community.community-view/community-tags)
+(def community-title quo2.components.community.community-view/community-title)
+(def discover-card quo2.components.community.discover-card/discover-card)
+
+;;;; DIVIDERS
+(def divider-label quo2.components.dividers.divider-label/divider-label)
+(def new-messages quo2.components.dividers.new-messages/new-messages)
+
+;;;; LIST ITEMS
+(def channel-list-item quo2.components.list-items.channel/list-item)
+(def menu-item quo2.components.list-items.menu-item/menu-item)
+(def preview-list quo2.components.list-items.preview-list/preview-list)
+
+;;;; NOTIFICATIONS
+(def activity-log quo2.components.notifications.activity-logs/activity-log)
+(def info-count quo2.components.notifications.info-count/info-count)
+(def notification-dot quo2.components.notifications.notification-dot/notification-dot)

src/status_im/communities/core.cljs

@@ -655,7 +655,7 @@
     {:db (update-in db [:communities community-id :categories] merge categories)}))
 
 (fx/defn load-category-states
-  {:events [::load-category-states]}
+  {:events [:communities/load-category-states]}
   [{:keys [db]} community-id]
   (let [public-key            (get-in db [:multiaccount :public-key])
         categories            (get-in db [:communities community-id :categories])

src/status_im/switcher/switcher_cards/styles.cljs

@@ -1,4 +1,4 @@
-(ns quo2.components.switcher.styles
+(ns status-im.switcher.switcher-cards.styles
   (:require [quo2.foundations.colors :as colors]))
 
 (def colors-map

src/status_im/switcher/switcher_cards/switcher_cards.cljs

@@ -1,22 +1,18 @@
-(ns quo2.components.switcher.switcher-cards
+(ns status-im.switcher.switcher-cards.switcher-cards
   (:require [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.buttons.button :as button]
-            [quo2.components.switcher.styles :as styles]
             [quo2.components.counter.counter :as counter]
             [quo2.components.tags.status-tags :as status-tags]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.avatars.group-avatar :as group-avatar]
             [quo2.components.list-items.preview-list :as preview-list]
             [quo2.components.avatars.channel-avatar :as channel-avatar]
+            [status-im.switcher.switcher-cards.styles :as styles]
             [status-im.i18n.i18n :as i18n]))
 
-;;TODO move outside quo or find a way how to move i18n outside
-
-;; Supporting Components
-
 (defn content-container [{:keys [content-type data new-notifications? color-50]}]
   [rn/view {:style (styles/content-container new-notifications?)}
    (case content-type

src/status_im/ui/screens/communities/community.cljs

@@ -22,7 +22,7 @@
             [re-frame.core :as re-frame]
             [status-im.ui.screens.chat.sheets :as sheets]
             [status-im.ui.components.accordion :as accordion]
-            [status-im.ui.screens.communities.styles :as styles]))
+            [quo2.components.community.style :as styles]))
 
 (def request-cooldown-ms (* 24 60 60 1000))
 

src/status_im/ui/screens/communities/community_overview_redesign.cljs

@@ -8,13 +8,13 @@
              [quo2.components.dividers.divider-label :as divider-label]
              [quo2.components.community.community-view :as community-view]
              [quo2.components.tags.status-tags :as status-tags]
+             [quo2.components.community.style :as styles]
+             [quo2.foundations.colors :as colors]
+             [quo2.components.navigation.page-nav :as page-nav]
              [status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join]
              [status-im.ui.screens.communities.community-options-bottom-sheet :as options-menu]
              [status-im.ui.components.list.views :as list]
              [status-im.utils.handlers :refer [<sub >evt]]
-             [status-im.ui.screens.communities.styles :as styles]
-             [quo2.foundations.colors :as colors]
-             [quo2.components.navigation.page-nav :as page-nav]
              [status-im.ui.screens.communities.icon :as communities.icon]))
 
 ;; Mocked list items

src/status_im/ui/screens/communities/reorder_categories.cljs

@@ -13,7 +13,7 @@
             [status-im.communities.core :as communities]
             [status-im.utils.handlers :refer [>evt <sub]]
             [status-im.ui.components.icons.icons :as icons]
-            [status-im.ui.screens.communities.styles :as styles]
+            [quo2.components.community.style :as styles]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.tabs :as tabs]

src/status_im/ui/screens/communities/views.cljs

@@ -41,7 +41,7 @@
                                                     {:border-bottom-color (quo.colors/get-color :ui-01)
                                                      :border-bottom-width 1}))
                             :on-press      (fn []
-                                             (>evt [::communities/load-category-states id])
+                                             (>evt [:communities/load-category-states id])
                                              (>evt [:dismiss-keyboard])
                                              (>evt [:navigate-to :community {:community-id id}]))
                             :on-long-press #(>evt [:bottom-sheet/show-sheet

src/status_im/ui2/screens/communities/communities_home.cljs

@@ -12,7 +12,8 @@
             [status-im.i18n.i18n :as i18n]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as rn]
-            [status-im.ui.components.plus-button :as components.plus-button]))
+            [status-im.ui.components.plus-button :as components.plus-button]
+            [status-im.ui.screens.communities.community :as community]))
 
 (def selected-tab (reagent/atom :joined))
 
@@ -25,7 +26,15 @@
       :accessibility-label :new-chat-button}]))
 
 (defn render-fn [community-item]
-  [community-list-view/communities-membership-list-item community-item])
+  [community-list-view/communities-membership-list-item
+   {:on-press      (fn []
+                     (>evt [:communities/load-category-states (:id community-item)])
+                     (>evt [:dismiss-keyboard])
+                     (>evt [:navigate-to :community {:community-id (:id community-item)}]))
+    :on-long-press #(>evt [:bottom-sheet/show-sheet
+                           {:content (fn []
+                                       [community/community-actions community-item])}])}
+   community-item])
 
 (defn community-list-key-fn [item]
   (:id item))

src/status_im/ui2/screens/communities/discover_communities.cljs

@@ -12,7 +12,8 @@
             [quo2.components.community.community-card-view :as community-card]
             [quo2.components.community.community-list-view :as community-list]
             [quo2.components.icon :as icons]
-            [quo2.foundations.colors :as colors]))
+            [quo2.foundations.colors :as colors]
+            [status-im.ui.screens.communities.community :as community]))
 
 (def view-type   (reagent/atom  :card-view))
 
@@ -40,7 +41,15 @@
                     {:featured       false})]
     (if (= @view-type :card-view)
       [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]
-      [community-list/communities-list-view-item item])))
+      [community-list/communities-list-view-item
+       {:on-press      (fn []
+                         (>evt [:communities/load-category-states (:id item)])
+                         (>evt [:dismiss-keyboard])
+                         (>evt [:navigate-to :community {:community-id (:id item)}]))
+        :on-long-press #(>evt [:bottom-sheet/show-sheet
+                               {:content (fn []
+                                           [community/community-actions item])}])}
+       item])))
 
 (defn render-featured-fn [community-item]
   (let [item (merge community-item

src/status_im/ui2/screens/quo2_preview/community/community_list_view.cljs

@@ -56,7 +56,7 @@
          [preview/customizer state descriptor]]
         [rn/view {:padding-vertical 60
                   :justify-content  :center}
-         [community-list-view/communities-list-view-item (merge @state
+         [community-list-view/communities-list-view-item {} (merge @state
                                                                    community-data)]]]])))
 
 (defn preview-community-list-view []

src/status_im/ui2/screens/quo2_preview/switcher/switcher_cards.cljs

@@ -4,7 +4,7 @@
             [status-im.ui2.screens.quo2-preview.preview :as preview]
             [quo2.foundations.colors :as colors]
             [status-im.react-native.resources :as resources]
-            [quo2.components.switcher.switcher-cards :as switcher-cards]))
+            [status-im.switcher.switcher-cards.switcher-cards :as switcher-cards]))
 
 (def descriptor [{:label   "Type"
                   :key     :type

src/status_im/utils/money.cljs

@@ -1,6 +1,7 @@
 (ns status-im.utils.money
   (:require ["bignumber.js" :as BigNumber]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [status-im.i18n.i18n :as i18n]))
 
 ;; The BigNumber version included in web3 sometimes hangs when dividing large
 ;; numbers Hence we want to use these functions instead of fromWei etc, which
@@ -191,3 +192,10 @@
 
 (defn div-and-round [bn1 bn2]
   (.round (.dividedBy ^js bn1 bn2) 0))
+
+(defn format-members [count]
+  (if (> count 1000000)
+    (str (with-precision (/ count 1000000) 1) (i18n/label :t/M))
+    (if (and (> count 999) (< count 1000000))
+      (str (with-precision (/ count 1000) 1) (i18n/label :t/K))
+      count)))