no contacts mostly done, working on contacts

chore: set gowaku build tags for status-go
Signed-off-by: Jakub Sokołowski <jakub@status.im>
2022-11-09 17:11:52 -05:00 · 2022-11-09 18:47:15 +01:00 · 2022-11-09 15:41:34 +03:00 · 2022-11-08 19:50:36 +00:00 · 2022-11-08 19:13:56 +01:00 · 2022-11-08 18:30:17 +01:00
183 changed files with 2452 additions and 1514 deletions
@@ -640,7 +640,7 @@ SPEC CHECKSUMS:
  FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
  FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
+  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
  HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
  Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
  libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
@@ -41,6 +41,8 @@
 		65F6941A25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
 		65F6941B25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
 		70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 1426DF592BA248FC81D955CB /* Inter-Regular.otf */; };
+		715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
+		715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
 		8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
 		A0093AB50DA85E1D01818CCA /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E88D313E5D854BE6BC81FC1 /* libPods-Status-StatusIm-StatusImTests.a */; };
@@ -121,6 +123,7 @@
 		65F6941725780A4E00A45E76 /* StatusImTests-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusImTests-Bridging-Header.h"; sourceTree = "<group>"; };
 		65F6941825780A4F00A45E76 /* Bridge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bridge.swift; sourceTree = "<group>"; };
 		693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; };
+		715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "UbuntuMono-Regular.ttf"; path = "../resources/fonts/UbuntuMono-Regular.ttf"; sourceTree = "<group>"; };
 		74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
 		7AFBE28450C0239119FBDBA2 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
@@ -229,6 +232,7 @@
 				693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */,
 				A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */,
 				9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */,
+				715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -475,6 +479,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */,
+				715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
 				B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
 				D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */,
 				D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */,
@@ -493,6 +498,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				3AAD2ACA24A3A60E0075D594 /* launch-image-universal.storyboard in Resources */,
+				715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
 				3AAD2ACB24A3A60E0075D594 /* Images.xcassets in Resources */,
 				3AAD2ACC24A3A60E0075D594 /* Inter-Bold.otf in Resources */,
 				3AAD2ACD24A3A60E0075D594 /* Inter-BoldItalic.otf in Resources */,
@@ -105,6 +105,7 @@
 		<string>Inter-Thin-BETA.otf</string>
 		<string>Inter-ThinItalic-BETA.otf</string>
 		<string>InterStatus-Regular.otf</string>
+		<string>UbuntuMono-Regular.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>
@@ -108,6 +108,7 @@
 		<string>Inter-Thin-BETA.otf</string>
 		<string>Inter-ThinItalic-BETA.otf</string>
 		<string>InterStatus-Regular.otf</string>
+		<string>UbuntuMono-Regular.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>
@@ -20,7 +20,11 @@ buildGoPackage {
  # Build the Go library
  buildPhase = ''
    runHook preBuild
-    go build -buildmode=c-archive -o $out/libstatus.a $NIX_BUILD_TOP/main.go
+    go build \
+      -buildmode='c-archive' \
+      -tags='gowaku_skip_migrations' \
+      -o "$out/libstatus.a" \
+      $NIX_BUILD_TOP/main.go
    runHook postBuild
  '';
 }
@@ -11,6 +11,9 @@

 let
  inherit (lib) concatStringsSep optionalString optional;
+  isIOS = platform == "ios";
+  isAndroid = platform == "android";
+
 in buildGoPackage {
  pname = source.repo;
  version = "${source.cleanVersion}-${source.shortRev}-${platform}";
@@ -20,30 +23,32 @@ in buildGoPackage {

  # Sandbox causes Xcode issues on MacOS. Requires sandbox=relaxed.
  # https://github.com/status-im/status-mobile/pull/13912
-  __noChroot = (platform == "ios");
+  __noChroot = isIOS;

  extraSrcPaths = [ gomobile ];
  nativeBuildInputs = [ gomobile removeReferencesTo ]
-    ++ optional (platform == "android") openjdk
-    ++ optional (platform == "ios") xcodeWrapper;
+    ++ optional isAndroid openjdk
+    ++ optional isIOS xcodeWrapper;

  ldflags = concatStringsSep " " goBuildLdFlags;

-  ANDROID_HOME = optionalString (platform == "android") androidPkgs.sdk;
+  ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;

  # Ensure XCode is present for iOS, instead of failing at the end of the build.
-  preConfigure = optionalString (platform == "ios") utils.enforceXCodeAvailable;
+  preConfigure = optionalString isIOS utils.enforceXCodeAvailable;

  buildPhase = ''
    runHook preBuild
    echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"

+    set -x
    gomobile bind \
      ${concatStringsSep " " goBuildFlags} \
      -ldflags="$ldflags" \
      -target=${concatStringsSep "," targets} \
-      ${optionalString (platform == "android") "-androidapi=${platformVersion}"} \
-      ${optionalString (platform == "ios") "-iosversion=${platformVersion}"} \
+      ${optionalString isAndroid "-androidapi=${platformVersion}" } \
+      ${optionalString isIOS "-iosversion=${platformVersion}" } \
+     -tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
      -o ${outputFileName} \
      ${source.goPackagePath}/mobile

@@ -58,7 +63,7 @@ in buildGoPackage {
  # Drop govers from disallowedReferences.
  dontRenameImports = true;
  # Replace hardcoded paths to go package in /nix/store.
-  preFixup = optionalString (platform == "ios") ''
+  preFixup = optionalString isIOS ''
    find $out -type f -exec \
      remove-references-to -t $disallowedReferences '{}' + || true
  '';
@@ -37,7 +37,7 @@
    "qrcode": "^1.4.1",
    "react": "16.13.1",
    "react-dom": "^16.4.2",
-    "react-native": "0.63.4",
+    "react-native": "0.63.5",
    "react-native-background-timer": "^2.1.1",
    "react-native-blob-util": "^0.13.18",
    "react-native-camera-kit": "^8.0.4",
@@ -70,6 +70,7 @@
    "react-native-svg": "^9.8.4",
    "react-native-touch-id": "^4.4.1",
    "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
+    "react-syntax-highlighter": "^15.5.0",
    "rn-emoji-keyboard": "git+https://github.com/status-im/rn-emoji-keyboard.git#refs/tags/v0.4.3",
    "tdigest": "^0.1.1"
  },
@@ -1,8 +1,8 @@
 (ns quo2.components.avatars.account-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [status-im.ui.components.icons.icons :as icons]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))

 (def icon-color-value
  {:dark (get-in colors/customization [:dark :purple])
@@ -1,9 +1,9 @@
 (ns quo2.components.avatars.channel-avatar
  (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
            [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))

 (defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
  (let [lock-exists? (some? locked?)
@@ -1,7 +1,7 @@
 (ns quo2.components.avatars.group-avatar
  (:require [quo2.foundations.colors :as colors]
            [quo2.components.icon :as icon]
-            [quo.react-native :as rn]))
+            [react-native.core :as rn]))

 (def sizes
  {:icon {:small 12
@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.icon-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [status-im.ui.components.icons.icons :as icons]))

@@ -1,10 +1,11 @@
 (ns quo2.components.avatars.user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [quo2.components.icon :as icons]
            [clojure.string :refer [upper-case split blank?]]
-            [quo.theme :refer [dark?]]))
+            [quo2.theme :refer [dark?]]
+            [status-im.ui.components.fast-image :as fast-image]))

 (def sizes {:big {:outer 80
                  :inner 72
@@ -131,8 +132,8 @@
                                               :no-color true}])
     (if profile-picture
       ;; display image
-       [rn/image {:style  (container-styling inner-dimensions outer-dimensions)
-                  :source profile-picture}]
+       [fast-image/fast-image {:source              {:uri profile-picture}
+                               :style               (container-styling inner-dimensions outer-dimensions)}]
       ;; else display initials
       [container inner-dimensions outer-dimensions
        [text/text {:weight :semi-bold
@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.wallet-user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.markdown.text :as text]
            [clojure.string :as clojure-string]))
@@ -1,8 +1,8 @@
 (ns quo2.components.buttons.button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.markdown.text :as text]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
            [reagent.core :as reagent]
            [quo2.components.icon :as quo2.icons]))

@@ -1,5 +1,5 @@
 (ns quo2.components.buttons.dynamic-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
            [status-im.i18n.i18n :as i18n]
            [quo2.components.icon :as icon]
@@ -0,0 +1,154 @@
+(ns quo2.components.code.snippet
+  (:require ["react-native" :as react-native]
+            ["react-syntax-highlighter" :default Highlighter]
+            [cljs-bean.core :as bean]
+            [clojure.string :as str]
+            [oops.core :as oops]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [status-im.ui.components.react :as react]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(def ^:private themes
+  {:light {:hljs-comment {:color colors/neutral-40},
+           :hljs-title   {:color (colors/custom-color :blue 50)},
+           :hljs-keyword {:color (colors/custom-color :green 50)},
+           :hljs-string  {:color (colors/custom-color :turquoise 50)},
+           :hljs-literal {:color (colors/custom-color :turquoise 50)}
+           :hljs-number  {:color (colors/custom-color :turquoise 50)}
+           :line-number  {:color colors/neutral-40}}
+   :dark  {:hljs-comment {:color colors/neutral-60},
+           :hljs-title   {:color (colors/custom-color :blue 60)},
+           :hljs-keyword {:color (colors/custom-color :green 60)},
+           :hljs-string  {:color (colors/custom-color :turquoise 60)},
+           :hljs-literal {:color (colors/custom-color :turquoise 60)}
+           :hljs-number  {:color (colors/custom-color :turquoise 60)}
+           :line-number  {:color colors/neutral-40}}})
+
+(defn- text-style [class-names]
+  (->> class-names
+       (map keyword)
+       (reduce #(merge %1 (get-in themes [(theme/get-theme) %2]))
+               {:flex-shrink 1
+                ;; Round to a nearest whole number to achieve consistent
+                ;; spacing (also important for calculating `max-text-height`).
+                ;; Line height seems to be inconsistent between text being
+                ;; wrapped and text being rendered on a newline using Flexbox
+                ;; layout.
+                :line-height 18})))
+
+(defn- render-nodes [nodes]
+  (map (fn [{:keys [children value] :as node}]
+         ;; Node can have :children or a :value.
+         (if children
+           (into [text/text {:weight :code
+                             :size :paragraph-2
+                             :style (text-style (get-in node [:properties :className]))}]
+                 (render-nodes children))
+           ;; Remove newlines as we already render each line separately.
+           (-> value str/trim-newline)))
+       nodes))
+
+(defn- code-block [{:keys [rows line-number-width]}]
+  [into [:<>]
+   (->> rows
+        (render-nodes)
+        ;; Line numbers
+        (map-indexed (fn [idx row]
+                       (conj [rn/view {:style {:flex-direction :row}}
+                              [rn/view {:style {:width line-number-width
+                                                ;; 8+12 margin
+                                                :margin-right 20}}
+                               [text/text {:weight :code
+                                           :size :paragraph-2
+                                           :style (text-style ["line-number"])}
+                                (inc idx)]]]
+                             row))))])
+
+(defn- native-renderer []
+  (let [text-height (reagent/atom nil)]
+    (fn [{:keys [rows max-lines on-copy-press]}]
+      (let [background-color      (colors/theme-colors
+                                   colors/white
+                                   colors/neutral-80-opa-40)
+            background-color-left (colors/theme-colors
+                                   colors/neutral-5
+                                   colors/neutral-80)
+            border-color          (colors/theme-colors
+                                   colors/neutral-20
+                                   colors/neutral-80)
+            rows                  (bean/->clj rows)
+            font-scale            (:font-scale (rn/use-window-dimensions))
+            max-rows              (or max-lines (count rows)) ;; Cut down on rows to process.
+            max-line-digits       (-> rows count (min max-rows) str count)
+            ;; ~ 9 is char width, 18 is width used in Figma.
+            line-number-width     (* font-scale (max 18 (* 9 max-line-digits)))
+            max-text-height       (some-> max-lines (* font-scale 18)) ;; 18 is font's line height.
+            truncated?            (and max-text-height (< max-text-height @text-height))
+            maybe-mask-wrapper    (if truncated?
+                                    [react/masked-view
+                                     {:mask-element
+                                      (reagent/as-element
+                                       [react/linear-gradient {:colors ["black" "transparent"]
+                                                               :locations [0.75 1]
+                                                               :style {:flex 1}}])}]
+                                    [:<>])]
+
+        [rn/view {:style {:overflow         :hidden
+                          :padding          8
+                          :background-color background-color
+                          :border-color     border-color
+                          :border-width     1
+                          :border-radius    8
+                          ;; Hide on intial render to avoid flicker when mask-wrapper is shown.
+                          :opacity          (if @text-height 1 0)}}
+         ;; Line number container
+         [rn/view {:style {:position           :absolute
+                           :bottom             0
+                           :top                0
+                           :left               0
+                           :width              (+ line-number-width 8 8)
+                           :background-color   background-color-left
+                           :border-right-color border-color
+                           :border-right-width 1}}]
+         (conj maybe-mask-wrapper [rn/view {:max-height max-text-height}
+                                   [rn/view {:on-layout (fn [evt]
+                                                          (let [height (oops/oget evt "nativeEvent.layout.height")]
+                                                            (reset! text-height height)))}
+                                    [code-block {:rows (take max-rows rows)
+                                                 :line-number-width line-number-width}]]])
+
+         ;; Copy button
+         [rn/view {:style {:position :absolute
+                           :bottom   8
+                           :right    8}}
+          [button/button {:icon     true
+                          :type     :grey
+                          :size     24
+                          :on-press on-copy-press}
+           :main-icons/copy]]]))))
+
+(defn- wrap-renderer-fn [f {:keys [max-lines on-copy-press]}]
+  (fn [^js props]
+    (reagent/as-element [:f> f {:rows (.-rows props)
+                                :max-lines max-lines
+                                :on-copy-press on-copy-press}])))
+
+(defn snippet [{:keys [language max-lines on-copy-press]} children]
+  [:> Highlighter {:language          language
+                   :renderer          (wrap-renderer-fn
+                                       native-renderer {:max-lines max-lines
+                                                        :on-copy-press #(when on-copy-press
+                                                                          (on-copy-press children))})
+                   ;; Default props to adapt Highlighter for react-native.
+                   :CodeTag           react-native/View
+                   :PreTag            react-native/View
+                   :show-line-numbers false
+                   :style             #js {}
+                   :custom-style      #js {:backgroundColor nil}}
+   children])
@@ -40,6 +40,8 @@
         [community-view/community-title
          {:title name
           :description description}]
-         [community-view/community-stats-column :card-view]
-         [community-view/community-tags tags]]]]]]))
+         [react/view {:style (styles/card-stats-position)}
+          [community-view/community-stats-column :card-view]]
+         [react/view {:style (styles/community-tags-position)}
+          [community-view/community-tags tags]]]]]]]))

@@ -3,6 +3,8 @@
   [quo2.components.community.community-view :as community-view]
   [quo2.components.markdown.text :as text]
   [quo2.foundations.colors :as colors]
+   [quo2.components.counter.counter :as counter]
+   [quo2.components.icon :as icons]
   [status-im.communities.core :as communities]
   [status-im.utils.handlers :refer [>evt]]
   [status-im.ui.components.react :as react]
@@ -10,7 +12,8 @@
   [status-im.ui.screens.communities.community :as community]
   [status-im.ui.screens.communities.icon :as communities.icon]))

-(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
+(defn communities-list-view-item [{:keys [id name locked? status notifications
+                                          tokens background-color] :as community}]
  [react/view {:style (merge (styles/community-card 16)
                             {:margin-bottom    12
                              :margin-horizontal 20})}
@@ -38,17 +41,39 @@
                   :size                :paragraph-1
                   :accessibility-label :community-name-text
                   :number-of-lines     1
-                   :ellipsize-mode      :tail}
+                   :ellipsize-mode      :tail
+                   :style               {:color   (when (= notifications :muted)
+                                                    (colors/theme-colors
+                                                     colors/neutral-40
+                                                     colors/neutral-60))}}
        name]
       [community-view/community-stats-column :list-view]]
-      (when (= status :gated)
-        [community-view/permission-tag-container {:locked       locked
-                                                  :status       status
-                                                  :tokens       tokens}])]]]])
+      (if  (= status :gated)
+        [community-view/permission-tag-container {:locked?      locked?
+                                                  :tokens       tokens}]
+        (cond
+          (= notifications :unread-messages-count)
+          [react/view {:style {:width            8
+                               :height           8
+                               :border-radius    4
+                               :background-color (colors/theme-colors
+                                                  colors/neutral-40
+                                                  colors/neutral-60)}}]

-(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
-  [react/view {:margin-bottom       12
-               :padding-horizontal  8}
+          (= notifications :unread-mentions-count)
+          [counter/counter {:type :default} 5]
+
+          (= notifications :muted)
+          [icons/icon  :main-icons2/muted {:container-style {:align-items     :center
+                                                             :justify-content :center}
+                                           :resize-mode      :center
+                                           :size             20
+                                           :color            (colors/theme-colors
+                                                              colors/neutral-40
+                                                              colors/neutral-50)}]))]]]])
+
+(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}]
+  [react/view {:margin-bottom       20}
   [react/touchable-highlight {:underlay-color      colors/primary-50-opa-5
                               :style               {:border-radius 12}
                               :on-press      (fn []
@@ -58,19 +83,23 @@
                               :on-long-press #(>evt [:bottom-sheet/show-sheet
                                                      {:content (fn []
                                                                  [community/community-actions community])}])}
-    [react/view {:flex               1
-                 :padding-vertical   8
-                 :padding-horizontal 12}
+    [react/view {:flex               1}
     [react/view {:flex-direction    :row
                  :border-radius     16
                  :align-items       :center}
-      [communities.icon/community-icon-redesign community 48]
-      [react/view {:margin-left   12
-                   :flex          1}
-       [community-view/community-title {:title  name}]]
+      [communities.icon/community-icon-redesign community 32]
+      [react/view {:flex              1
+                   :margin-left       12
+                   :justify-content   :center}
+       [text/text
+        {:accessibility-label :chat-name-text
+         :number-of-lines     1
+         :ellipsize-mode      :tail
+         :weight              :semi-bold
+         :size                :paragraph-1}
+        name]]
      (when (= status :gated)
        [react/view {:justify-content   :center
                     :margin-right      12}
-         [community-view/permission-tag-container {:locked       locked
-                                                   :status       status
+         [community-view/permission-tag-container {:locked?      locked?
                                                   :tokens       tokens}]])]]]])
@@ -40,9 +40,10 @@
     [community-stats {:icon       :main-icons2/lightning
                       :count      "112.1K"
                       :icon-color icon-color}]
-     [community-stats {:icon       :main-icons2/placeholder
-                       :count      4
-                       :icon-color icon-color}]]))
+     (when (= type :card-view)
+       [community-stats {:icon       :main-icons2/placeholder
+                         :count      4
+                         :icon-color icon-color}])]))

 (defn community-tags [tags]
  [react/view (styles/community-tags-container)
@@ -77,10 +78,10 @@
       :style {:margin-top (if (= size :large) 8 2)}}
      description])])

-(defn permission-tag-container [{:keys [locked tokens]}]
+(defn permission-tag-container [{:keys [locked? tokens]}]
  [permission/tag {:background-color (colors/theme-colors
                                      colors/neutral-10
                                      colors/neutral-80)
-                   :locked           locked
+                   :locked?          locked?
                   :tokens           tokens
                   :size             24}])
@@ -69,10 +69,11 @@
                  :height                    height
                  :background-color          colors/neutral-10}])])

-(defn discover-card [{:keys [title description on-press]}]
+(defn discover-card [{:keys [title description on-press accessibility-label]}]
  (let [on-joined-images     (get images   :images)]
    [react/touchable-without-feedback
-     {:on-press on-press}
+     {:on-press            on-press
+      :accessibility-label accessibility-label}
     [react/view (merge (styles/community-card 16)
                        {:background-color  (colors/theme-colors
                                             colors/white
@@ -91,4 +92,4 @@
                                 :border-radius 6
                                 :first-image   "" ; TODO replace with real data
                                 :last-image    ""}]) ; TODO replace with real data
-      ]]))
+      ]]))
@@ -1,6 +1,6 @@
 (ns quo2.components.counter.counter
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [react-native.core :as rn]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]))

@@ -1,5 +1,5 @@
 (ns quo2.components.dividers.divider-label
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.components.markdown.text :as markdown.text]
            [status-im.ui.components.icons.icons :as icons]
            [quo2.foundations.colors :as colors]))
@@ -1,18 +1,16 @@
 (ns quo2.components.dividers.new-messages
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [status-im.i18n.i18n :as i18n]
-            [status-im.ui.components.react :as react]))
+            [react-native.linear-gradient :as linear-gradient]))

 (defn new-messages
  "new-messages params - label, color"
-  [{:keys [label color] :or {label (i18n/label :new-messages-header)
-                             color :primary}}]
+  [{:keys [label color] :or {color :primary}}]
  (let [bg-color   (colors/custom-color-by-theme color 50 60 5 5)
        text-color (colors/custom-color-by-theme color 50 60)]
-    [react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
-                            :start {:x 0 :y 0} :end {:x 0 :y 1}}
+    [linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
+                                      :start {:x 0 :y 0} :end {:x 0 :y 1}}
     [rn/view {:style {:padding-left     60
                       :padding-vertical 12
                       :padding-right    24}}
@@ -1,6 +1,6 @@
 (ns quo2.components.drawers.action-drawers
  (:require  [status-im.ui.components.react :as react]
-             [quo.react-native :as rn]
+             [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.components.icon :as icon]
             [quo2.foundations.colors :as colors]))
@@ -1,9 +1,9 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [quo2.reanimated :as reanimated]
+            [react-native.reanimated :as reanimated]
            [reagent.core :as reagent]))

 (defn apply-anim [dd-height val]
@@ -1,11 +1,10 @@
 (ns quo2.components.header
  (:require [oops.core :refer [oget]]
-            [quo.animated :as animated]
+            [react-native.reanimated :as reanimated]
            [quo2.components.buttons.button :as button]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [quo.design-system.spacing :as spacing]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
            [reagent.core :as reagent]))

 (def header-height 56)
@@ -61,15 +60,14 @@
      :right           (max (:width left) (:width right))})))

 (def header-actions-style
-  (merge
-   {:flex               1
-    :flex-direction     :row
-    :align-items        :center
-    :justify-content    :center}
-   (:x-tiny spacing/padding-horizontal)))
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :justify-content    :center
+   :padding-horizontal 4})

 (def header-action-placeholder
-  {:width (:base spacing/spacing)})
+  {:width 16})

 (def element {:align-items        :center
              :justify-content    :center
@@ -145,9 +143,9 @@
                 border-bottom false}}]
      (let [status-bar-height (get insets :top 0)
            height            (+ header-height status-bar-height)]
-        [animated/view {:style (header-wrapper-style {:height        height
-                                                      :background    background
-                                                      :border-bottom border-bottom})}
+        [reanimated/view {:style (header-wrapper-style {:height        height
+                                                        :background    background
+                                                        :border-bottom border-bottom})}
         [rn/view {:pointer-events :box-none
                   :height         status-bar-height}]
         [rn/view {:style          (merge {:height header-height}
@@ -1,6 +1,6 @@
 (ns quo2.components.info.info-message
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [react-native.core :as rn]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [quo2.components.icon :as quo2.icons]))
@@ -1,6 +1,6 @@
 (ns quo2.components.info.information-box
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [react-native.core :as rn]
            [clojure.string :as string]
            [quo2.foundations.colors :as colors]
            [quo2.components.icon :as quo2.icons]
@@ -1,15 +1,15 @@
 (ns quo2.components.list-items.channel
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.counter.counter :as quo2.counter]
            [quo2.components.icon :as quo2.icons]
            [quo2.components.avatars.channel-avatar :as channel-avatar]
            [quo2.components.markdown.text :as quo2.text]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))

 (defn list-item [{:keys [name locked? mentions-count unread-messages?
                         muted? is-active-channel? emoji channel-color]
-                  :or {channel-color colors/primary-50}}]
+                  :or   {channel-color colors/primary-50}}]
  [rn/view {:style (merge {:height          48
                           :display         :flex
                           :border-radius   12
@@ -21,21 +21,19 @@
                           :padding-right   12}
                          (when is-active-channel?
                            {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
-   [rn/view {:display :flex
-             :flex-direction :row
+   [rn/view {:display         :flex
+             :flex-direction  :row
             :justify-content :flex-start
-             :align-items :center}
+             :align-items     :center}
    [channel-avatar/channel-avatar
     {:big?                   true
-      :locked?            locked?
+      :locked?                locked?
      :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
      :emoji                  emoji}]
    [quo2.text/text
-     {:style (merge {:margin-left 12}
-                    (when
-                     (and (not locked?)
-                          muted?)
-                      {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
+     {:style  (merge {:margin-left 12}
+                     (when (and (not locked?) muted?)
+                       {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
      :weight :medium :size :paragraph-1} (str "# " name)]]
   [rn/view {:style {:height 20}}
    (when (and (not locked?)
@@ -1,5 +1,5 @@
 (ns quo2.components.list-items.menu-item
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors :refer [theme-colors]]
            [quo2.components.markdown.text :as text]
            [quo2.components.icon :as icons]))
@@ -1,5 +1,6 @@
 (ns quo2.components.list-items.preview-list
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
+            [react-native.hole-view :as hole-view]
            [status-im.i18n.i18n :as i18n]
            [quo2.foundations.colors :as colors]
            [quo2.components.icon :as quo2.icons]
@@ -42,13 +43,13 @@
 (defn list-item [index type size item list-size margin-left
                 hole-size hole-radius hole-x hole-y border-radius]
  (let [last-item? (= index (- list-size 1))]
-    [rn/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
-                   :holes (if last-item? []
-                              [{:x             hole-x
-                                :y             hole-y
-                                :width         hole-size
-                                :height        hole-size
-                                :borderRadius  hole-radius}])}
+    [hole-view/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
+                          :holes (if last-item? []
+                                     [{:x             hole-x
+                                       :y             hole-y
+                                       :width         hole-size
+                                       :height        hole-size
+                                       :borderRadius  hole-radius}])}
     [avatar item type size border-radius]]))

 (defn get-overflow-color [transparent? transparent-color light-color dark-color override-theme]
@@ -1,5 +1,5 @@
-(ns quo2.components.list-items.received-contact-request
-  (:require [quo.react-native :as rn]
+(ns quo2.components.list-items.received-cr-item
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [status-im.utils.handlers :refer [<sub >evt]]
            [quo2.components.avatars.user-avatar :as user-avatar]
@@ -10,17 +10,9 @@
            [status-im.i18n.i18n :as i18n]
            [quo2.components.notifications.notification-dot :refer [notification-dot]]))

-(defn get-display-name [chat-id no-ens-name no-nickname]
-  (let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
-    (if (and no-ens-name no-nickname)
-      (let [[word1 word2] (str/split name " ")]
-        (str word1 " " word2))
-      name)))
-
-(defn list-item [{:keys [chat-id image contact message timestamp read]}]
+(defn received-cr-item [{:keys [chat-id message timestamp read]}]
  (let [no-ens-name  (str/blank? (get-in message [:content :ens-name]))
-        no-nickname  (nil? (get-in contact [:names :nickname]))
-        display-name (get-display-name chat-id no-ens-name no-nickname)]
+        display-name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
    [rn/view {:style {:flex-direction :row
                      :padding-top    8
                      :margin-top     4
@@ -32,7 +24,6 @@
                               :status-indicator? true
                               :online?           true
                               :size              :small
-                               :profile-picture   image
                               :ring?             false}]
     [rn/view {:style {:margin-horizontal 8}}
      [rn/view {:style {:flex-direction :row}}
@@ -82,3 +73,5 @@
                                                    :padding-horizontal 8
                                                    :margin-left        8}}
        [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
+
+
@@ -1,6 +1,6 @@
 (ns quo2.components.markdown.text
-  (:require [quo.react-native :as rn]
-            [quo.theme :as theme]
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
            [quo2.foundations.colors :as colors]
            [quo2.foundations.typography :as typography]
            [reagent.core :as reagent]))
@@ -12,6 +12,7 @@
           :semi-bold typography/font-semi-bold
           :bold      typography/font-bold
           :monospace typography/monospace
+           :code      typography/code
           :inherit   nil)
         (case (or size :paragraph-1)
           :label       typography/label
@@ -1,8 +1,8 @@
 (ns quo2.components.messages.gap
  (:require
   [oops.core :refer [oget]]
-   [quo.react-native :as rn]
-   [quo.theme :as theme]
+   [react-native.core :as rn]
+   [quo2.theme :as theme]
   [quo2.components.icon :as icon]
   [quo2.components.markdown.text :as text]
   [quo2.foundations.colors :as colors]
@@ -1,11 +1,11 @@
 (ns quo2.components.messages.system-message
-  (:require [quo.react-native :as rn]
-            [quo.theme :as theme]
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [quo2.theme :as theme]
            [quo2.components.avatars.icon-avatar :as icon-avatar]
            [quo2.components.avatars.user-avatar :as user-avatar]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [quo2.reanimated :as ra]
            [status-im.i18n.i18n :as i18n]
            [status-im.utils.core :as utils]))

@@ -140,16 +140,16 @@
  [{:keys [type style non-pressable? animate-landing?] :as message}]
  [:f>
   (fn []
-     (let [sv-color (ra/use-shared-value
+     (let [sv-color (reanimated/use-shared-value
                     (get-color :bg (if animate-landing? :landed :default) type))]
       (when animate-landing?
-         (ra/animate-shared-value-with-delay
+         (reanimated/animate-shared-value-with-delay
          sv-color (get-color :bg :default type) 0 :linear 1000))
-       [ra/touchable-opacity
+       [reanimated/touchable-opacity
        {:on-press #(when-not non-pressable?
-                      (ra/set-shared-value
+                      (reanimated/set-shared-value
                       sv-color (get-color :bg :pressed type)))
-         :style    (ra/apply-animations-to-style
+         :style    (reanimated/apply-animations-to-style
                    {:background-color sv-color}
                    (merge
                     {:flex-direction     :row
@@ -1,6 +1,7 @@
 (ns quo2.components.navigation.bottom-nav-tab
-  (:require [quo.react-native :as rn]
-            [quo2.reanimated :as reanimated]
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [react-native.hole-view :as hole-view]
            [quo2.foundations.colors :as colors]
            [quo2.components.icons.icons :as icons]
            [quo2.components.counter.counter :as counter]))
@@ -44,18 +45,18 @@
         :on-press-out        #(toggle-background-color background-color true pass-through?)
         :accessibility-label accessibility-label}
        [reanimated/view {:style background-animated-style}
-         [rn/hole-view {:style {:padding-left 33
-                                :padding-top  8}
-                        :key    new-notifications? ;; Key is required to force removal of holes
-                        :holes  (cond
-                                  (not new-notifications?) ;; No new notifications, remove holes
-                                  []
+         [hole-view/hole-view {:style {:padding-left 33
+                                       :padding-top  8}
+                               :key   new-notifications? ;; Key is required to force removal of holes
+                               :holes (cond
+                                        (not new-notifications?) ;; No new notifications, remove holes
+                                        []

-                                  (= notification-indicator :unread-dot)
-                                  [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
+                                        (= notification-indicator :unread-dot)
+                                        [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]

-                                  :else
-                                  [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
+                                        :else
+                                        [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
          [reanimated/image
           {:style icon-animated-style
            :source (icons/icon-source (keyword (str icon 24)))}]]
@@ -1,5 +1,5 @@
 (ns quo2.components.navigation.floating-shell-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.components.buttons.dynamic-button :as dynamic-button]))

 (defn dynamic-button-view [type dynamic-buttons style]
@@ -1,10 +1,10 @@
 (ns quo2.components.navigation.page-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.icon :as icons]
            [status-im.utils.dimensions :as dimensions]
-            [clojure.string :as string]
-            [quo2.components.markdown.text :as text]))
+            [quo2.components.markdown.text :as text]
+            [clojure.string :as string]))

 (def ^:private centrify-style
  {:display         :flex
@@ -1,9 +1,10 @@
 (ns quo2.components.navigation.top-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.counter.counter :as counter]
            [quo2.components.buttons.button :as quo2.button]
-            [quo2.components.avatars.user-avatar :as user-avatar]))
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [react-native.hole-view :as hole-view]))

 (defn- get-button-common-props [type]
  (let [default? (= type :default)
@@ -67,16 +68,16 @@
      [base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props]
      [rn/view ;; Keep view instead of "[:<>" to make sure relative
               ;; position is calculated from this view instead of its parent
-       [rn/hole-view {:key    new-notifications? ;; Key is required to force removal of holes
-                      :holes  (cond
-                                (not new-notifications?) ;; No new notifications, remove holes
-                                []
+       [hole-view/hole-view {:key   new-notifications? ;; Key is required to force removal of holes
+                             :holes (cond
+                                      (not new-notifications?) ;; No new notifications, remove holes
+                                      []

-                                (= notification-indicator :unread-dot)
-                                [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
+                                      (= notification-indicator :unread-dot)
+                                      [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]

-                                :else
-                                [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
+                                      :else
+                                      [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
        [base-button :main-icons2/activity-center open-activity-center
         :open-activity-center-button button-common-props]]
       (when new-notifications?
@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.activity-logs
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.components.buttons.button :as button]
            [quo2.components.icon :as icon]
            [quo2.components.markdown.text :as text]
@@ -0,0 +1,15 @@
+(ns quo2.components.notifications.info-count
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.foundations.typography :as typography]))
+
+(defn info-count [count style]
+  (when (> count 0)
+    [rn/view {:style (merge {:width            16
+                             :height           16
+                             :position         :absolute
+                             :right            22
+                             :border-radius    6
+                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
+                            style)}
+     [rn/text {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})} count]]))
@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.notification-dot
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]))

 (defn notification-dot [style]
@@ -1,7 +1,7 @@
 (ns quo2.components.reactions.reaction
  (:require [quo2.components.markdown.text :as quo2.text]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
            [quo2.foundations.colors :as colors]
            [quo2.components.icon :as icons]))

@@ -1,5 +1,5 @@
 (ns quo2.components.selectors.disclaimer
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.markdown.text :as text]
            [quo2.components.selectors.selectors :as selectors]))
@@ -1,7 +1,7 @@
 (ns quo2.components.selectors.selectors
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
            [reagent.core :as reagent]
            [quo2.components.icon :as icons]))

@@ -1,14 +1,14 @@
 (ns quo2.components.separator
-  (:require [quo.react-native :as react]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as quo2.colors]))

 (defn separator [{:keys [style]}]
-  [react/view
+  [rn/view
   {:style
    (merge
     style
     {:background-color (quo2.colors/theme-colors
-                         quo2.colors/neutral-30
+                         quo2.colors/neutral-10
                         quo2.colors/neutral-80)
      :align-self       :stretch
      :height           1})}])
@@ -1,5 +1,5 @@
 (ns quo2.components.switcher.switcher-cards
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [status-im.i18n.i18n :as i18n]
            [quo2.foundations.colors :as colors]
            [quo2.components.markdown.text :as text]
@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.account-selector
  (:require
-   [quo.theme :as theme]
-   [quo.react-native :as rn]
+   [quo2.theme :as theme]
+   [react-native.core :as rn]
   [quo2.foundations.colors :as colors]
   [quo2.components.markdown.text :as quo2]))

@@ -1,9 +1,9 @@
 (ns quo2.components.tabs.segmented-tab
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
            [quo2.components.tabs.tab :as tab]
            [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))

 (def themes {:light {:background-color colors/neutral-20}
             :dark  {:background-color colors/neutral-80}})
@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.tab
  (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
            [status-im.ui.components.icons.icons :as icons]
            [quo2.components.markdown.text :as text]))

@@ -1,6 +1,6 @@
 (ns quo2.components.tabs.tabs
  (:require [oops.core :refer [oget]]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
            [quo2.components.tabs.tab :as tab]
            [reagent.core :as reagent]
            [status-im.ui.components.react :as react]
@@ -16,7 +16,7 @@
    (fn [{:keys [data size] :or {size default-tab-size}}]
      [rn/view (merge {:flex-direction :row} style)
       (doall
-        (for [{:keys [label id new-info]} data]
+        (for [{:keys [label id new-info accessibility-label]} data]
          ^{:key id}
          [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
           (when new-info
@@ -32,13 +32,14 @@
                       :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
              [notification-dot]])
           [tab/tab
-            {:id       id
-             :size     size
-             :active   (= id @active-tab-id)
-             :on-press (fn []
-                         (reset! active-tab-id id)
-                         (when on-change
-                           (on-change id)))}
+            {:id                  id
+             :size                size
+             :accessibility-label accessibility-label
+             :active              (= id @active-tab-id)
+             :on-press            (fn []
+                                    (reset! active-tab-id id)
+                                    (when on-change
+                                      (on-change id)))}
            label]]))])))

 (defn- calculate-fade-end-percentage
@@ -1,6 +1,5 @@
 (ns quo2.components.tags.base-tag
-  (:require
-   [quo.react-native :as rn]))
+  (:require [react-native.core :as rn]))

 (defn style-container [size disabled border-color border-width background-color label type]
  (merge {:height             size
@@ -1,9 +1,9 @@
 (ns quo2.components.tags.context-tags
  (:require [quo2.foundations.colors :as colors]
-            [quo.theme :as quo.theme]
+            [quo2.theme :as quo2.theme]
            [quo2.components.markdown.text :as text]
            [quo2.components.avatars.group-avatar :as group-avatar]
-            [quo.react-native :as rn]))
+            [react-native.core :as rn]))

 (defn padding-left-for-type [type]
  (case type
@@ -15,7 +15,7 @@

 (defn base-tag [_ _]
  (fn [{:keys [override-theme style]} & children]
-    (let [theme (or override-theme (quo.theme/get-theme))]
+    (let [theme (or override-theme (quo2.theme/get-theme))]
      (into
       [rn/view
        (merge
@@ -1,6 +1,6 @@
 (ns quo2.components.tags.status-tags
-  (:require [quo.react-native :as rn]
-            [quo.theme :as quo.theme]
+  (:require [react-native.core :as rn]
+            [quo2.theme :as quo2.theme]
            [quo2.components.icon :as icon]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
@@ -91,5 +91,5 @@
                                  nil)]
      [status-component
       size
-       (or override-theme (quo.theme/get-theme))
+       (or override-theme (quo2.theme/get-theme))
       label])))
@@ -1,7 +1,7 @@
 (ns quo2.components.tags.tag
  (:require [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]
-            [quo.react-native :as rn]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
            [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
            [quo2.components.tags.base-tag :as base-tag]))
@@ -1,6 +1,6 @@
 (ns quo2.components.tags.tags
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
            [quo2.components.tags.tag :as tag]))

 (defn tags [{:keys [default-active on-change]}]
@@ -25,5 +25,4 @@
                                      :main-icons2/placeholder
                                      resource)
                     :on-press      #(do (reset! active-tab-id %)
-                                         (when on-change (on-change %)))})
-             tag-label]])]))))
+                                         (when on-change (on-change %)))})]])]))))
@@ -1,9 +1,9 @@
 (ns quo2.components.tags.token-tag
  (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
            [quo2.components.markdown.text :as text]
-            [status-im.ui.components.icons.icons :as icons]))
+            [quo2.components.icon :as icons]))

 (def themes {:light {:background-color colors/neutral-20}
             :dark {:background-color colors/neutral-80}})
@@ -76,23 +76,19 @@
        :or
        {size :small border-color (colors/custom-color-by-theme :purple 50 60)}}]

-    [tag {:size size
+    [tag {:size          size
          :token-img-src token-img-src
-          :border-color (when is-required border-color)
+          :border-color  (when is-required border-color)
          :overlay
          (when (or is-required is-purchasable)
            [rn/view
             {:style (merge icon-container-styles
-                            {:width 15.5
-                             :height 15.5
-                             :background-color border-color
-                             :border-color (if (=  (theme/get-theme) :dark) colors/neutral-100 colors/white)
-                             :border-width 1
-                             :right  (get-value-from-size size -3.75 -5.75)
-                             :bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)
-                             })}
-             [icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12)
+                            {:background-color border-color
+                             :border-color     (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
+                             :border-width     1
+                             :right            (get-value-from-size size -3.75 -5.75)
+                             :bottom           (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
+             [icons/icon (if is-required :main-icons2/hold :main-icons2/add)
              {:no-color true
-               :width 13.5
-               :height 13.5}]])}
+               :size 12}]])}
     (str value " " token)]))
@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.lowest-price
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [clojure.string :as string]))

 (def centrify {:style {:flex-direction  :row
@@ -1,6 +1,6 @@
 (ns quo2.components.wallet.network-amount
  (:require [clojure.string :as string]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
            [quo2.components.icon :as icon]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.network-breakdown
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
            [quo2.components.markdown.text :as text]
            [quo2.components.wallet.network-amount :refer [network-amount]]))
@@ -2,7 +2,7 @@
  (:require
   [quo2.foundations.colors :as colors]
   [status-im.i18n.i18n :as i18n]
-   [quo.react-native :as rn]
+   [react-native.core :as rn]
   [clojure.string :as string]
   [status-im.utils.currency :as currencies]
   [status-im.ui.components.icons.icons :as icons]
@@ -1,6 +1,6 @@
 (ns quo2.foundations.colors
  (:require [clojure.string :as string]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))

 (defn alpha [value opacity]
  (when value
@@ -45,3 +45,5 @@
 (def font-bold {:font-family "Inter-Bold"}) ; 700

 (def monospace {:font-family "InterStatus-Regular"})
+
+(def code {:font-family "UbuntuMono-Regular"})
@@ -1,8 +1,7 @@
 (ns quo2.screens.avatars.account-avatar
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
-            [quo.design-system.colors :as colors]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.components.avatars.account-avatar :as quo2]))

 (def descriptor [{:label   "Icon"
@@ -40,8 +39,7 @@
        [quo2/account-avatar @state]]])))

 (defn preview-account-avatar []
-  [rn/view {:background-color (:preview-background @colors/theme)
-            :flex             1}
+  [rn/view {:flex             1}
   [rn/flat-list {:flex                      1
                  :keyboardShouldPersistTaps :always
                  :header                    [cool-preview]
@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.channel-avatar
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.avatars.channel-avatar :as quo2]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.group-avatar
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.avatars.group-avatar :as quo2]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.icon-avatar
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.avatars.icon-avatar :as quo2]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [quo2.foundations.colors :as colors]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.components.avatars.user-avatar :as quo2]
            [reagent.core :as reagent]
            [status-im.react-native.resources :as resources]))
@@ -1,6 +1,6 @@
 (ns quo2.screens.avatars.wallet-user-avatar
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
            [quo2.components.avatars.wallet-user-avatar :as quo2]
            [quo2.foundations.colors :as colors]))
@@ -1,7 +1,7 @@
 (ns quo2.screens.buttons.button
  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.buttons.button :as quo2]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.buttons.dynamic-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.buttons.dynamic-button :as quo2]))

@@ -0,0 +1,92 @@
+(ns quo2.screens.code.snippet
+  (:require [quo2.screens.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.components.code.snippet :as snippet]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]))
+
+(def go-example "func (s *Server) listenAndServe() {
+    cfg := &tls.Config{Certificates: []tls.Certificate{*s.cert}, ServerName: s.hostname, MinVersion: tls.VersionTLS12}
+
+    // in case of restart, we should use the same port as the first start in order not to break existing links
+    listener, err := tls.Listen(\"tcp\", s.getHost(), cfg)
+    if err != nil {
+        s.logger.Error(\"failed to start server, retrying\", zap.Error(err))
+        s.ResetPort()
+        err = s.Start()
+        if err != nil {
+            s.logger.Error(\"server start failed, giving up\", zap.Error(err))
+        }
+        return
+    }
+
+    err = s.SetPort(listener.Addr().(*net.TCPAddr).Port)
+    if err != nil {
+        s.logger.Error(\"failed to set Server.port\", zap.Error(err))
+        return
+    }
+}")
+
+(def clojure-example "(defn request->xhrio-options
+  [{:as   request
+    :keys [on-success on-failure]
+    :or   {on-success      [:http-no-on-success]
+           on-failure      [:http-no-on-failure]}}]
+  ; wrap events in cljs-ajax callback
+  (let [api (new goog.net.XhrIo)]
+    (-> request
+        (assoc
+          :api     api
+          :handler (partial ajax-xhrio-handler
+                            #(dispatch (conj on-success %))
+                            #(dispatch (conj on-failure %))
+                            api))
+        (dissoc :on-success :on-failure :on-request))))")
+
+(def examples {:clojure {:language :clojure
+                         :text     clojure-example}
+               :go      {:language :go
+                         :text     go-example}})
+
+(def descriptor [{:label   "Language:"
+                  :key     :language
+                  :type    :select
+                  :options [{:key   :clojure
+                             :value :clojure}
+                            {:key   :go
+                             :value :go}]}
+                 {:label   "Max lines:"
+                  :key     :max-lines
+                  :type    :text}
+                 {:label "Syntax highlight:"
+                  :key   :syntax
+                  :type  :boolean}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:language  :clojure
+                             :max-lines ""
+                             :syntax    true})]
+    (fn []
+      (let [language  (if (:syntax @state) (:language @state) :text)
+            text      (-> (:language @state) examples :text)
+            max-lines (as-> (:max-lines @state) max-lines
+                        (js/parseInt max-lines)
+                        (when-not (js/Number.isNaN max-lines)
+                          max-lines))]
+        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+         [rn/view {:style {:padding-bottom 150}}
+          [preview/customizer state descriptor]
+          [rn/view {:style {:padding-vertical   60
+                            :padding-horizontal 16}}
+           [snippet/snippet {:language      language
+                             :max-lines     max-lines
+                             :on-copy-press #(js/alert %)}
+            text]]]]))))
+
+(defn preview-code-snippet []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])
@@ -1,11 +1,10 @@
 (ns quo2.screens.community.community-card-view
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
            [status-im.constants :as constants]
-            [quo.design-system.colors :as quo.colors]
            [quo2.foundations.colors :as colors]
-            [quo2.components.community.community-list-view :as community-list-view]
+            [quo.design-system.colors :as quo.colors]
            [quo2.components.community.community-card-view :as community-card-view]
            [status-im.i18n.i18n :as i18n]
            [status-im.react-native.resources :as resources]))
@@ -14,27 +13,28 @@
  {:id             constants/status-community-id
   :name           "Status"
   :description    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
-   :status         :gated
-   :section        :popular
-   :permissions    true
   :cover          (resources/get-image :community-cover)
   :community-icon (resources/get-image :status-logo)
   :color          (rand-nth quo.colors/chat-colors)
-   :tokens         [{:id  1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
+   :tokens         [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
   :tags           [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
                    {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
                    {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})

-(def descriptor [{:label   "Community views"
-                  :key     :view-style
+(def descriptor [{:label   "Status:"
+                  :key     :status
                  :type    :select
-                  :options [{:key   :card-view
-                             :value "Card view"}
-                            {:key   :list-view
-                             :value "List view"}]}])
+                  :options [{:key   :gated
+                             :value "Gated"}
+                            {:key   :open
+                             :value "Open"}]}
+                 {:label "Locked:"
+                  :key   :locked?
+                  :type  :boolean}])

 (defn cool-preview []
-  (let [state (reagent/atom {:view-style :card-view})]
+  (let [state (reagent/atom {:status      :gated
+                             :locked?     true})]
    (fn []
      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
       [rn/view {:padding-bottom 150}
@@ -43,9 +43,8 @@
         [preview/customizer state descriptor]]
        [rn/view {:padding-vertical 60
                  :justify-content  :center}
-         (if (= :card-view (:view-style @state))
-           [community-card-view/community-card-view-item community-data]
-           [community-list-view/communities-list-view-item community-data])]]])))
+         [community-card-view/community-card-view-item (merge @state community-data)]]]])))
+
 (defn preview-community-card []
  [rn/view {:background-color (colors/theme-colors colors/neutral-5
                                                   colors/neutral-95)
@@ -0,0 +1,70 @@
+(ns quo2.screens.community.community-list-view
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [status-im.constants :as constants]
+            [quo.design-system.colors :as quo.colors]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.community.community-list-view :as community-list-view]
+            [status-im.i18n.i18n :as i18n]
+            [status-im.react-native.resources :as resources]))
+
+(def community-data
+  {:id             constants/status-community-id
+   :name           "Status"
+   :description    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
+   :cover          (resources/get-image :community-cover)
+   :community-icon (resources/get-image :status-logo)
+   :color          (rand-nth quo.colors/chat-colors)
+   :tokens         [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
+   :tags           [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
+                    {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
+                    {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
+
+(def descriptor [{:label   "Notifications:"
+                  :key     :notifications
+                  :type    :select
+                  :options [{:key   :muted
+                             :value "Muted"}
+                            {:key   :unread-mentions-count
+                             :value "Mention counts"}
+                            {:key   :unread-messages-count
+                             :value "Unread messages"}]}
+                 {:label   "Status:"
+                  :key     :status
+                  :type    :select
+                  :options [{:key   :gated
+                             :value "Gated"}
+                            {:key   :open
+                             :value "Open"}]}
+                 {:label   "Locked:"
+                  :key     :locked?
+                  :type    :boolean}])
+
+(defn cool-preview []
+  (let [notifications  (reagent/atom  (:notifications nil))
+        state          (reagent/atom {:locked?       true
+                                      :notifications nil
+                                      :status        (if notifications
+                                                       :gated
+                                                       :open)})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1
+                  :padding       16}
+         [preview/customizer state descriptor]]
+        [rn/view {:padding-vertical 60
+                  :justify-content  :center}
+         [community-list-view/communities-list-view-item (merge @state
+                                                                community-data)]]]])))
+
+(defn preview-community-list-view []
+  [rn/view {:background-color (colors/theme-colors colors/neutral-5
+                                                   colors/neutral-95)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])
+
@@ -0,0 +1,34 @@
+(ns quo2.screens.community.discover-card
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [status-im.i18n.i18n :as i18n]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.community.discover-card :as discover-card]))
+
+(def descriptor [{:label "Joined:"
+                  :key   :joined?
+                  :type  :boolean}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:joined? :false})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1
+                  :padding       16}
+         [preview/customizer state descriptor]]
+        [rn/view {:padding-vertical 60
+                  :justify-content  :center}
+         [discover-card/discover-card {:joined?      (:joined? @state)
+                                       :title       (i18n/label :t/discover)
+                                       :description (i18n/label :t/whats-trending)}]]]])))
+
+(defn preview-discoverd-card []
+  [rn/view {:background-color (colors/theme-colors colors/neutral-5
+                                                   colors/neutral-95)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])
@@ -1,6 +1,6 @@
 (ns quo2.screens.counter.counter
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
            [quo2.components.counter.counter :as quo2]
            [quo2.foundations.colors :as colors]))
@@ -1,7 +1,7 @@
 (ns quo2.screens.dividers.divider-label
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.dividers.divider-label :as divider-label]))

@@ -1,9 +1,10 @@
 (ns quo2.screens.dividers.new-messages
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
-            [quo2.components.dividers.new-messages :as new-messages]))
+            [quo2.components.dividers.new-messages :as new-messages]
+            [status-im.i18n.i18n :as i18n]))

 (def descriptor [{:label   "Label"
                  :key     :label
@@ -36,7 +37,7 @@
                            {:key   :beige
                             :value "Beige"}]}])
 (defn cool-preview []
-  (let [state     (reagent/atom {:label "New messages"
+  (let [state     (reagent/atom {:label (i18n/label :new-messages-header)
                                 :color :primary})]
    (fn []
      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
@@ -1,6 +1,6 @@
 (ns quo2.screens.drawers.action-drawers
-  (:require [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [react-native.core :as rn]
            [quo2.components.drawers.action-drawers :as quo2]
            [quo2.components.buttons.button :as button]
            [quo2.foundations.colors :as colors]
@@ -1,7 +1,6 @@
 (ns quo2.screens.dropdowns.dropdown
-  (:require [quo.components.text :as text]
-            [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.components.dropdowns.dropdown :as quo2]
            [quo2.foundations.colors :as colors]
            [reagent.core :as reagent]))
@@ -64,7 +63,7 @@
        [preview/customizer state descriptor]
        [rn/view {:padding-vertical 60
                  :align-items      :center}
-         [text/text {:color :main} (str "Selected item: " @selected-item)]
+         [rn/text (str "Selected item: " @selected-item)]
         [quo2/dropdown (merge @state {:on-select on-select
                                       :items     items})]]]])))

@@ -1,7 +1,7 @@
 (ns quo2.screens.info.info-message
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.info.info-message :as quo2]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.info.information-box
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.info.information-box :as quo2]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.list-items.channel
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [quo2.components.list-items.channel :as quo2-channel]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.list-items.preview-lists
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
            [quo2.foundations.colors :as colors]
            [status-im.react-native.resources :as resources]
            [quo2.components.list-items.preview-list :as quo2]))
@@ -1,10 +1,8 @@
 (ns quo2.screens.main
-  (:require [quo.components.safe-area :as safe-area]
-            [quo.core :as quo]
-            [quo.design-system.colors :as quo.colors]
+  (:require [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
            [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
            [quo2.components.markdown.text :as quo2-text]
            [quo2.components.buttons.button :as quo2-button]
            [quo2.screens.avatars.channel-avatar :as channel-avatar]
@@ -14,8 +12,11 @@
            [quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar]
            [quo2.screens.buttons.button :as button]
            [quo2.screens.buttons.dynamic-button :as dynamic-button]
+            [quo2.screens.code.snippet :as code-snippet]
            [quo2.screens.counter.counter :as counter]
            [quo2.screens.community.community-card-view :as community-card]
+            [quo2.screens.community.discover-card :as discover-card]
+            [quo2.screens.community.community-list-view :as community-list-view]
            [quo2.screens.dividers.divider-label :as divider-label]
            [quo2.screens.dividers.new-messages :as new-messages]
            [quo2.screens.drawers.action-drawers :as drawers]
@@ -76,9 +77,18 @@
             {:name      :dynamic-button
              :insets    {:top false}
              :component dynamic-button/preview-dynamic-button}]
-   :community [{:name      :community-cards
+   :code [{:name         :snippet
+           :insets       {:top false}
+           :component    code-snippet/preview-code-snippet}]
+   :community [{:name      :community-card-view
                :insets    {:top false}
-                :component community-card/preview-community-card}]
+                :component community-card/preview-community-card}
+               {:name      :community-list-view
+                :insets    {:top false}
+                :component community-list-view/preview-community-list-view}
+               {:name      :discover-card
+                :insets    {:top false}
+                :component discover-card/preview-discoverd-card}]
   :counter [{:name      :counter
              :insets    {:top false}
              :component counter/preview-counter}]
@@ -183,26 +193,9 @@

 (defn theme-switcher []
  [rn/view {:style {:flex-direction   :row
-                    :margin-vertical  8
-                    :border-radius    4
-                    :background-color (:ui-01 @quo.colors/theme)
-                    :border-width     1
-                    :border-color     (:ui-02 @quo.colors/theme)}}
-   [rn/touchable-opacity {:style    {:padding         8
-                                     :flex            1
-                                     :justify-content :center
-                                     :align-items     :center}
-                          :on-press #(theme/set-theme :light)}
-    [quo/text "Set light theme"]]
-   [rn/view {:width            1
-             :margin-vertical  4
-             :background-color (:ui-02 @quo.colors/theme)}]
-   [rn/touchable-opacity {:style    {:padding         8
-                                     :flex            1
-                                     :justify-content :center
-                                     :align-items     :center}
-                          :on-press #(theme/set-theme :dark)}
-    [quo/text "Set dark theme"]]])
+                    :margin-vertical  8}}
+   [quo2-button/button {:on-press #(theme/set-theme :light)} "Set light theme"]
+   [quo2-button/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])

 (defn main-screen []
  (fn []
@@ -1,7 +1,7 @@
 (ns quo2.screens.markdown.text
  (:require [quo2.foundations.colors :as colors]
-            [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
+            [quo2.screens.preview :as preview]
+            [react-native.core :as rn]
            [quo2.components.markdown.text :as quo2]
            [reagent.core :as reagent]))

@@ -1,7 +1,7 @@
 (ns quo2.screens.messages.gap
  (:require
-   [quo.previews.preview :as preview]
-   [quo.react-native :as rn]
+   [quo2.screens.preview :as preview]
+   [react-native.core :as rn]
   [quo2.components.messages.gap :as gap]
   [reagent.core :as reagent]))

@@ -1,8 +1,8 @@
 (ns quo2.screens.messages.system-message
  (:require [reagent.core :as reagent]
            [status-im.react-native.resources :as resources]
-            [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [quo2.components.messages.system-message :as system-message]
            [quo2.foundations.colors :as colors]))

@@ -1,8 +1,8 @@
 (ns quo2.screens.navigation.bottom-nav-tab
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
-            [quo2.reanimated :as reanimated]
            [quo2.components.navigation.bottom-nav-tab :as quo2]
            [quo2.foundations.colors :as colors]))

@@ -1,6 +1,6 @@
 (ns quo2.screens.navigation.floating-shell-button
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
            [quo2.components.navigation.floating-shell-button :as quo2]
            [quo2.foundations.colors :as colors]))
@@ -1,6 +1,6 @@
 (ns quo2.screens.navigation.page-nav
-  (:require [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [react-native.core :as rn]
            [quo2.components.navigation.page-nav :as quo2]
            [quo2.foundations.colors :as colors]
            [reagent.core :as reagent]))
@@ -1,6 +1,6 @@
 (ns quo2.screens.navigation.top-nav
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
            [quo2.components.navigation.top-nav :as quo2]
            [quo2.foundations.colors :as colors]))
@@ -1,6 +1,6 @@
 (ns quo2.screens.notifications.activity-logs
-  (:require [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [react-native.core :as rn]
            [quo2.components.markdown.text :as text]
            [quo2.components.notifications.activity-logs :as activity-logs]
            [quo2.components.tags.context-tags :as context-tags]
@@ -0,0 +1,9 @@
+(ns quo2.screens.preview)
+
+(defmacro list-comp [[binding seq-expr & bindings] body-expr]
+  (cond (not binding)
+        `(list ~body-expr)
+
+        :else
+        `(mapcat (fn [~binding] (list-comp ~bindings ~body-expr))
+                 ~seq-expr)))
@@ -0,0 +1,179 @@
+(ns quo2.screens.preview
+  (:require [reagent.core :as reagent]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors])
+  (:require-macros quo2.screens.preview))
+
+(def container {:flex-direction   :row
+                :padding-vertical 8
+                :flex             1
+                :align-items      :center})
+
+(defn touchable-style []
+  {:flex               1
+   :align-items        :center
+   :justify-content    :center
+   :padding-horizontal 16
+   :height             44})
+
+(defn select-style []
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 16
+   :height             44
+   :border-radius      4
+   :background-color   colors/neutral-20
+   :border-width       1
+   :border-color       colors/neutral-100})
+
+(defn select-option-style [selected]
+  (merge (select-style)
+         {:margin-vertical 8
+          :justify-content :center}
+         (if selected
+           {:background-color colors/primary-50-opa-30}
+           {:background-color (colors/theme-colors colors/neutral-20 colors/white)})))
+
+(def label-style {:flex          0.4
+                  :padding-right 8})
+
+(defn label-view [_ label]
+  [rn/view {:style label-style}
+   [rn/text
+    (when-let [label-color (colors/theme-colors colors/neutral-100 colors/white)]
+      {:style {:color label-color}})
+    label]])
+
+(defn modal-container []
+  {:flex               1
+   :justify-content    :center
+   :padding-horizontal 24
+   :background-color   "rgba(0,0,0,0.4)"})
+
+(defn modal-view []
+  {:padding-horizontal 16
+   :padding-vertical   8
+   :border-radius      8
+   :flex-direction     :column
+   :margin-vertical    100
+   :background-color   (colors/theme-colors colors/neutral-20 colors/white)})
+
+(defn customizer-boolean
+  [{:keys [label key state]}]
+  (let [state* (reagent/cursor state [key])]
+    [rn/view {:style container}
+     [label-view state label]
+     [rn/view {:style {:flex-direction   :row
+                       :flex             0.6
+                       :border-radius    4
+                       :background-color (colors/theme-colors colors/neutral-20 colors/white)
+                       :border-width     1
+                       :border-color     (colors/theme-colors colors/neutral-100 colors/white)}}
+      [rn/touchable-opacity {:style    (merge (touchable-style) {:background-color (when  @state* colors/primary-50-opa-30)})
+                             :on-press #(reset! state* true)}
+       [rn/text
+        "True"]]
+      [rn/view {:width            1
+                :margin-vertical  4
+                :background-color (colors/theme-colors colors/neutral-20 colors/white)}]
+      [rn/touchable-opacity {:style    (merge (touchable-style) {:background-color (when (not @state*) colors/primary-50-opa-30)})
+                             :on-press #(reset! state* false)}
+       [rn/text {}
+        "False"]]]]))
+
+(defn customizer-text
+  [{:keys [label key state]}]
+  (let [state* (reagent/cursor state [key])]
+    [rn/view {:style container}
+     [label-view state label]
+     [rn/view {:style {:flex 0.6}}
+      [rn/text-input {:value          @state*
+                      :show-cancel    false
+                      :style          {:border-radius 4
+                                       :border-width  1
+                                       :border-color  (colors/theme-colors colors/neutral-100 colors/white)}
+                      :on-change-text #(do
+                                         (reset! state* %)
+                                         (reagent/flush))}]]]))
+
+(defn value-for-key
+  [id v]
+  (:value (first (filter #(= (:key %) id) v))))
+
+(defn customizer-select []
+  (let [open (reagent/atom nil)]
+    (fn [{:keys [label key state options]}]
+      (let [state*   (reagent/cursor state [key])
+            selected (value-for-key @state* options)]
+        [rn/view {:style container}
+         [label-view state label]
+         [rn/view {:style {:flex 0.6}}
+          [rn/modal {:visible              @open
+                     :on-request-close     #(reset! open false)
+                     :statusBarTranslucent true
+                     :transparent          true
+                     :animation            :slide}
+           [rn/view {:style (modal-container)}
+            [rn/view {:style (modal-view)}
+             [rn/scroll-view
+              (doall
+               (for [{:keys [key value]} options]
+                 ^{:key key}
+                 [rn/touchable-opacity {:style    (select-option-style (= @state* key))
+                                        :on-press #(do
+                                                     (reset! open false)
+                                                     (reset! state* key))}
+                  [rn/text {:color (if (= @state* key) :link :secondary)}
+                   value]]))]
+             [rn/view {:flex-direction :row :padding-top 20 :margin-top 10
+                       :border-top-width 1 :border-top-color (colors/theme-colors colors/neutral-100 colors/white)}
+              [rn/touchable-opacity {:style    (select-option-style false)
+                                     :on-press #(do
+                                                  (reset! state* nil)
+                                                  (reset! open false))}
+               [rn/text "Clear"]]
+              [rn/view {:width 16}]
+              [rn/touchable-opacity {:style    (select-option-style false)
+                                     :on-press #(reset! open false)}
+               [rn/text "Close"]]]]]]
+
+          [rn/touchable-opacity {:style    (select-style)
+                                 :on-press #(reset! open true)}
+           (if selected
+             [rn/text {:color :link} selected]
+             [rn/text "Select option"])
+           [rn/view {:position        :absolute
+                     :right           16
+                     :top             0
+                     :bottom          0
+                     :justify-content :center}
+            [rn/text "↓"]]]]]))))
+
+(defn customizer [state descriptors]
+  [rn/view {:style              {:flex 1}
+            :padding-horizontal 16}
+   (doall
+    (for [{:keys [key type]
+           :as   desc} descriptors
+          :let         [descriptor (merge desc
+                                          {:state state})]]
+      ^{:key key}
+      [:<>
+       (case type
+         :boolean [customizer-boolean descriptor]
+         :text    [customizer-text descriptor]
+         :select  [customizer-select descriptor])]))])
+
+(comment
+  [{:label "Show error:"
+    :key   :error
+    :type  :boolean}
+   {:label "Label:"
+    :key   :label
+    :type  :text}
+   {:label   "Type:"
+    :key     :type
+    :type    :select
+    :options [{:key :primary :value "Primary"}
+              {:key :secondary :value "Secondary"}]}])
@@ -1,6 +1,6 @@
 (ns quo2.screens.reactions.react
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
            [reagent.core :as reagent]
            [quo2.foundations.colors :as colors]
            [quo2.components.reactions.reaction :as quo2.reaction]))
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Erik Seppanen	3c507be976	no contacts mostly done, working on contacts	2022-11-09 17:11:52 -05:00
Richard Ramos	0f6022a731	chore: set gowaku build tags for status-go Signed-off-by: Jakub Sokołowski <jakub@status.im>	2022-11-09 18:47:15 +01:00
John Ngei	a1c1be8f8a	updated communities home and discover screen (#14018 )	2022-11-09 15:41:34 +03:00
Andrea Maria Piana	01eae4da9c	upgrade react native to 0.63.5	2022-11-08 19:50:36 +00:00
Roman Volosovskyi	77d0084467	Attempt to fix too long prefix for notification types	2022-11-08 19:13:56 +01:00
flexsurfer	5907edccc8	cleanup quo2 (#14301 ) * cleanup quo2	2022-11-08 18:30:17 +01:00
Churikova Tetiana	add00a5609	e2e: configurable datacenter	2022-11-08 10:35:05 +01:00
Omar Basem	f17f57cc5e	Messages home items (#14256 ) * feat: messages home items	2022-11-08 13:01:02 +04:00
frank	187d147dc7	fix #14236 Sometimes profile pictures don't load (#14257 )	2022-11-07 16:58:29 +01:00
pavloburykh	b378d88aaf	e2e: deep_link tests	2022-11-04 16:54:13 +02:00
Ibrahem Khalil	3b69e5873e	Add members key to the chat-preview flow to show count of members on chat preview (#14274 )	2022-11-03 12:10:01 +03:00
Andrej Česen	5e5ed0a11e	Add `code-snippet` component (#14275 )	2022-11-03 10:55:33 +03:00
Ibrahem Khalil	bca2258508	Format numbers helper (#14186 ) format number to 100000 -> 100k/ 1000000000 -> 1b/ 1000000 -> 1m	2022-11-03 10:33:34 +03:00
flexsurfer	7b739dff45	New icons (icons2) not working in token-tag component #14277 (#14280 )	2022-11-01 14:58:33 +01:00