lint spacing

This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme.

Changes done:

In Bottom Sheet:
 - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma)
 - Fix the Icon colour for danger in light mode
 - Updated Quo2 Preview to provide an option for the bottom sheet theme

In Action Drawer:
 - Refactor the Action Drawer component to consume theme context

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

.clj-kondo/config.edn

@@ -14,6 +14,13 @@
                                               clojure.set     set
                                               clojure.walk    walk
                                               taoensso.timbre log}}
+                :shadowed-var      {:level   :error
+                                    ;; We temporarily use :include to define an
+                                    ;; allowlist of core Clojure vars. In the
+                                    ;; future, as we progressively fix shadowed
+                                    ;; vars, we should be able to delete this
+                                    ;; option and lint all vars.
+                                    :include [count iter key time]}
                 :invalid-arity     {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
                 ;; TODO remove number when this is fixed
                 ;; https://github.com/borkdude/clj-kondo/issues/867

README.md

@@ -2,7 +2,9 @@
 
 [<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" alt="Get it on Google Play" height="80"/>](https://play.google.com/store/apps/details?id=im.status.ethereum)
 [<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"/>](https://f-droid.org/packages/im.status.ethereum/)
-[<img src="doc/github_badge.png" alt="Get it on Github" height="80"/>](https://github.com/status-im/status-mobile/releases)
+
+
+[Get it on Github](https://github.com/status-im/status-mobile/releases)
 
 Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middle men and `go-ethereum` running directly on your device.
 
@@ -20,31 +22,31 @@ If this interests you, **help us make Status a reality** - anyone can contribute
 
 ## How to Contribute?
 
-Go straight to the [docs](https://status.im/docs) or [join our chat](https://join.status.im/chat/public/status) and choose what interests you:
+Go straight to the [docs](doc/) and choose what interests you:
 
 - **Developer** Developers are the heart of software and to keep Status beating
 we need all the help we can get! If you're looking to code in ClojureScript or
 Golang then Status is the project for you! We use React Native and there is even
 some Java/Objective-C too! Want to learn more about it? Start by reading our
-[Developer Introduction](https://status.im/developer_tools/) which guides you
+[Developer Introduction](doc/starting-guide.md) which guides you
 through the technology stack and start browsing [beginner
 issues](https://github.com/status-im/status-mobile/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aissue%20label%3A%22good%20first%20issue%22%20).
 Then you can read how to [Build
-Status](https://status.im/technical/build_status/), which talks about managing
-project dependencies, coding guidelines and testing procedures. The [doc/](doc/)
-directory also has valuable information for contributors.
+Status](doc/starting-guide.md), which talks about managing
+project dependencies, coding guidelines and testing procedures.
+Check out our [coding guidelines](doc/new-guidelines.md).
 
 - **Community Management**
 Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and long lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)
 
 - **Specification / Documentation**
-John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, head over to our [docs](https://status.im/docs) and see how you can improve what we have.
+John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.
 
 - **Blog Writing**
-Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page. [Jump into our chat](https://join.status.im/chat/public/status) and discuss with the team how you can contribute!
+Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page.
 
 - **Testers**
-It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](https://status.im/technical/build_status/) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
+It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
 
 - **Security**
 Status is a visual interface to make permanent changes on the Blockchain, it handles crypto-tokens that have real value and allows 3rd party code execution. Security is paramount to its success. You are given permission to break Status as hard as you can, as long as you share your findings with the community!
@@ -52,9 +54,6 @@ Status is a visual interface to make permanent changes on the Blockchain, it han
 - **Evangelism**
 Help us spread the word! Tell a friend *right now*, in fact tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)
 
-## Status API
-View our [API Docs](https://status.im/developer_tools/status_web_api.html) and learn how to integrate your DApp into Status. You can read more about how to add your DApp to Status [here](https://status.im/developer_tools/add_your_dapp.html).
-
 ## Give me Binaries!
 
 You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/) or by [building it yourself](https://status.im/technical/build_status/).
@@ -68,12 +67,8 @@ Without the dedication of these outstanding individuals, Status would not exist.
 
 ## Contact us
 
-Feel free to email us at [support@status.im](mailto:support@status.im) or better yet, [join our chat](https://join.status.im/chat/public/status).
+Feel free to email us at [support@status.im](mailto:support@status.im).
 
 ## License
 
 Licensed under the [Mozilla Public License v2.0](https://github.com/status-im/status-mobile/blob/develop/LICENSE.md)
-
-## Testing Supported by
-
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)](https://www.browserstack.com/automate/public-build/SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)

ci/tests/Jenkinsfile.e2e-nightly

@@ -74,7 +74,7 @@ pipeline {
             sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
             sh """
               python3 -m pytest \
-                --numprocesses 4 \
+                --numprocesses 6 \
                 --rerun_count=2 \
                 --testrail_report=True \
                 -m testrail_id \

ci/tests/Jenkinsfile.e2e-prs

@@ -123,7 +123,7 @@ pipeline {
             sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
             sh """
               python3 -m pytest \
-                --numprocesses 4 \
+                --numprocesses 6 \
                 --rerun_count=2 \
                 --testrail_report=True \
                 -k \"${params.KEYWORD_EXPRESSION}\" \

doc/README.md

@@ -24,6 +24,7 @@
 
 [Patching](patching.md)
 
+[Creating a pixel perfect UI](pixel-perfection.md)
 
 ## Testing
 

doc/new-guidelines.md

@@ -80,6 +80,52 @@ This mistake mostly happens with functional components
 
 it's important to name functional components with `f-` prefix
 
+### Component props and API scheme to match Figma as closely as possible
+
+Ideally, the prop names for components (particularly in quo2 Design System) should match the Figma properties as best as possible. This makes it easier for the developer using that component to configure it correctly for the screen it is being used on and avoids unnecessary overwrites and adjustments being made.
+
+#### Avoid unnecessarily grouping categories to reduce the number of props
+For example in Figma if there is a component and it has the following variants:
+
+|theme: "light" blur: "False"|theme: "dark" blur: "False"|theme: "light" blur: "True"|theme: "dark"  blur: "True"|
+|----------------------------|---------------------------|---------------------------|---------------------------|
+| type :neutral label "ABC"  | type :neutral label "ABC" |                           |                           |
+| type :active  label "ABC"  | type :active  label "ABC" |                           |                           |
+| type :danger  label "ABC"  | type :danger  label "ABC" | type :danger label "ABC"  | type :danger label "ABC"  |
+
+```clojure
+;; bad
+"theme - :light or :dark
+type - can be :neutral :active :danger :danger-blur"
+(defn my-component [{:keys [theme type]} label])
+
+;; good
+"theme - :light or :dark
+ type - can be :neutral :active :danger
+ blur? - boolean
+"
+(defn my-component [{:keys [theme blur? type]} label])
+```
+
+Please note this is only for the external API of the component and there should be no restriction of how the component manages its internal API as that will not affect the developer using the component with the issues described above.
+
+In some cases this is not always possible or does not make sense. However the thought process should be how easy will it be for another developer to use this component with the correct configuration given the screen designs for Figma.
+
+#### Avoid unnecessarily renaming props 
+In general it can be helpful to avoid renaming props from their counterpart in Figma.
+
+For example if Figma has sizes `:small`, `:medium` and `:large`
+
+```clojure
+;; bad
+":size - :little, :default or :big"
+(defn my-component [{:keys [size]}])
+
+;; good
+":size - :small, :medium or :large"
+(defn my-component [{:keys [size]}])
+```
+
 ### Component styles
 
 Prefer to define styles in a separate file named `style.cljs`, colocated with

doc/pixel-perfection.md

@@ -0,0 +1,17 @@
+# Pixel Perfection
+The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.
+
+Currently the Figma Designs match up with an "iPhone 11 Pro" screen size. 
+
+To test your implementation is correct you can take the following steps
+
+- Open a new Figma file so that you have write privileges. 
+- Copy in the component or screen from the Figma file.
+
+- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+
+- To get the right size, set your screenshot to width 375px
+
+![](images/pixel-perfection/layer-width.png)
+
+- Lower the opacity so you can see it sitting on top of the Figma mock ups. 

modules/react-native-status/nodejs/status.cpp

@@ -833,6 +833,37 @@ void _SaveAccountAndLogin(const FunctionCallbackInfo<Value>& args) {
 
 }
 
+void _CreateAccountAndLogin(const FunctionCallbackInfo<Value>& args) {
+	Isolate* isolate = args.GetIsolate();
+        Local<Context> context = isolate->GetCurrentContext();
+
+	if (args.Length() != 1) {
+		// Throw an Error that is passed back to JavaScript
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for SaveAccountAndLogin")));
+		return;
+	}
+
+	// Check the argument types
+
+	if (!args[0]->IsString()) {
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'settingsJSON'")));
+		return;
+	}
+
+	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
+	char *arg0 = *arg0Obj;
+
+	// Call exported Go function, which returns a C string
+	char *c = CreateAccountAndLogin(arg0);
+
+	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
+	args.GetReturnValue().Set(ret);
+	delete c;
+
+}
+
 void _GenerateAlias(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
         Local<Context> context = isolate->GetCurrentContext();
@@ -1929,6 +1960,7 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "hashMessage", _HashMessage);
 	NODE_SET_METHOD(exports, "resetChainData", _ResetChainData);
 	NODE_SET_METHOD(exports, "saveAccountAndLogin", _SaveAccountAndLogin);
+	NODE_SET_METHOD(exports, "createAccountAndLogin", _CreateAccountAndLogin);
 	NODE_SET_METHOD(exports, "generateAlias", _GenerateAlias);
 	NODE_SET_METHOD(exports, "validateMnemonic", _ValidateMnemonic);
 	NODE_SET_METHOD(exports, "multiformatSerializePublicKey", _MultiformatSerializePublicKey);

src/js/worklets/lightbox.js

@@ -6,3 +6,10 @@ export function infoLayout(input, isTop) {
     return isTop ? input.value : -input.value;
   });
 }
+
+export function textSheet(input, isHeight) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isHeight ? input.value : -input.value;
+  });
+}

src/js/worklets/shell/constants.js

@@ -1,18 +1,18 @@
 import { Easing } from 'react-native-reanimated';
 
 // Home Stack States
-export const CLOSE_WITH_ANIMATION = 0;
-export const OPEN_WITH_ANIMATION = 1;
-export const CLOSE_WITHOUT_ANIMATION = 2;
-export const OPEN_WITHOUT_ANIMATION = 3;
+export const CLOSE_WITHOUT_ANIMATION = 0;
+export const OPEN_WITHOUT_ANIMATION = 1;
+export const CLOSE_WITH_ANIMATION = 2;
+export const OPEN_WITH_ANIMATION = 3;
 
 // Floating Screen States
-export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 0;
-export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 1;
-export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 2;
-export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 3;
-export const CLOSE_SCREEN_WITHOUT_ANIMATION = 4;
-export const OPEN_SCREEN_WITHOUT_ANIMATION = 5;
+export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
+export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
+export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 2;
+export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 3;
+export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 4;
+export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 5;
 
 export const SHELL_ANIMATION_TIME = 200;
 

src/native_module/core.cljs

@@ -287,11 +287,11 @@
   and then compressed. Example input/output :
   input key  = zQ3shTAten2v9CwyQD1Kc7VXAqNPDcHZAMsfbLHCZEx6nFqk9 and
   output key = 0x025596a7ff87da36860a84b0908191ce60a504afc94aac93c1abd774f182967ce6"
-  [key callback]
+  [input-key callback]
   (log/info "[native-module] Deserializing and then compressing public key"
             {:fn  :deserialize-and-compress-key
-             :key key})
-  (.deserializeAndCompressKey ^js (status) key callback))
+             :key input-key})
+  (.deserializeAndCompressKey ^js (status) input-key callback))
 
 (defn compressed-key->public-key
   "Provides compressed key to status-go and gets back the uncompressed public key via deserialization"

src/quo/animated.cljs

@@ -235,31 +235,6 @@
   [value velocity snap-points]
   (.snapPoint ^js redash value velocity (to-array snap-points)))
 
-(defn cancelable-loop
-  [{:keys [clock duration finished on-reach]}]
-  (let [time       (value 0)
-        frame-time (value 0)
-        position   (value 0)
-        to-value   (value 1)
-        state      {:time      time
-                    :frameTime frame-time
-                    :finished  finished
-                    :position  position}
-        config     {:toValue  to-value
-                    :duration duration
-                    :easing   (:linear easings)}]
-    (block
-     [(timing clock state config)
-      (cond* (and* finished
-                   (eq position to-value))
-             (call* [] on-reach))
-      (cond* finished
-             [(set finished 0)
-              (set time 0)
-              (set frame-time 0)
-              (set position 0)])
-      position])))
-
 (defn with-easing
   [{val   :value
     :keys [snap-points velocity offset state easing duration

src/quo/previews/preview.clj

@@ -1,12 +1,5 @@
 (ns quo.previews.preview)
 
-(defn descriptor->values
-  [{:keys [key options type]}]
-  {key (case type
-         :boolean [false true]
-         :text    [nil "Just simple text"] ; NOTE(Ferossgp): add example with long text?
-         :select  (mapv :key options))})
-
 (defmacro list-comp
   [[binding seq-expr & bindings] body-expr]
   (cond (not binding)

src/quo/previews/preview.cljs

@@ -68,8 +68,8 @@
    :background-color   (:ui-background @colors/theme)})
 
 (defn customizer-boolean
-  [{:keys [label key state]}]
-  (let [state* (reagent/cursor state [key])]
+  [{:keys [label state] :as args}]
+  (let [state* (reagent/cursor state [(:key args)])]
     [rn/view {:style container}
      [label-view state label]
      [rn/view
@@ -95,8 +95,8 @@
         "False"]]]]))
 
 (defn customizer-text
-  [{:keys [label key state]}]
-  (let [state* (reagent/cursor state [key])]
+  [{:keys [label state] :as args}]
+  (let [state* (reagent/cursor state [(:key args)])]
     [rn/view {:style container}
      [label-view state label]
      [rn/view {:style {:flex 0.6}}
@@ -117,8 +117,8 @@
 (defn customizer-select
   []
   (let [open (reagent/atom nil)]
-    (fn [{:keys [label key state options]}]
-      (let [state*   (reagent/cursor state [key])
+    (fn [{:keys [label state options] :as args}]
+      (let [state*   (reagent/cursor state [(:key args)])
             selected (value-for-key @state* options)]
         [rn/view {:style container}
          [label-view state label]
@@ -133,15 +133,15 @@
             [rn/view {:style (modal-view)}
              [rn/scroll-view
               (doall
-               (for [{:keys [key value]} options]
-                 ^{:key key}
+               (for [{k :key v :value} options]
+                 ^{:key k}
                  [rn/touchable-opacity
-                  {:style    (select-option-style (= @state* key))
+                  {:style    (select-option-style (= @state* k))
                    :on-press #(do
                                 (reset! open false)
-                                (reset! state* key))}
-                  [quo/text {:color (if (= @state* key) :link :secondary)}
-                   value]]))
+                                (reset! state* k))}
+                  [quo/text {:color (if (= @state* k) :link :secondary)}
+                   v]]))
               [rn/view {:flex-direction :row}
                [rn/touchable-opacity
                 {:style    (select-option-style false)
@@ -175,17 +175,15 @@
    {:style              {:flex 1}
     :padding-horizontal 16}
    (doall
-    (for [{:keys [key type]
-           :as   desc}
-          descriptors
-          :let [descriptor (merge desc
-                                  {:state state})]]
-      ^{:key key}
+    (for [desc descriptors
+          :let [descriptor (merge desc {:state state})]]
+      ^{:key (:key desc)}
       [:<>
-       (case type
+       (case (:type desc)
          :boolean [customizer-boolean descriptor]
          :text    [customizer-text descriptor]
-         :select  [customizer-select descriptor])]))])
+         :select  [customizer-select descriptor]
+         nil)]))])
 
 (comment
   [{:label "Show error:"

src/quo2/components/avatars/channel_avatar.cljs

@@ -1,50 +0,0 @@
-(ns quo2.components.avatars.channel-avatar
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
-
-(defn channel-avatar
-  [{:keys [big? locked? emoji-background-color emoji]}]
-  (let [lock-exists? locked?
-        dark?        (theme/dark?)]
-    [rn/view
-     {:style {:width            (if big? 32 24)
-              :height           (if big? 32 24)
-              :border-radius    (if big? 32 24)
-              :justify-content  :center
-              :align-items      :center
-              :background-color emoji-background-color}}
-     [rn/view
-      {:style {:display         :flex
-               :justify-content :center
-               :align-items     :center}}
-      [text/text
-       {:size (if big?
-                :paragraph-1
-                :label)} emoji]
-      (when lock-exists?
-        [rn/view
-         {:style {:position         :absolute
-                  :left             (if big?
-                                      14
-                                      8)
-                  :top              (if big?
-                                      15
-                                      8)
-                  :background-color (if dark?
-                                      colors/neutral-90
-                                      colors/white)
-                  :border-radius    15
-                  :padding          2}}
-         [icons/icon
-          (if locked?
-            :main-icons/locked
-            :main-icons/unlocked)
-          {:color           (if dark?
-                              colors/neutral-40
-                              colors/neutral-50)
-           :container-style {:width  12
-                             :height 12}
-           :size            12}]])]]))

src/quo2/components/avatars/channel_avatar/component_spec.cljs

@@ -0,0 +1,35 @@
+(ns quo2.components.avatars.channel-avatar.component-spec
+  (:require [quo2.components.avatars.channel-avatar.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Channel Avatar"
+  (h/test "default render"
+    (h/render [component/view])
+    (h/is-truthy (h/query-by-label-text :initials))
+    (h/is-null (h/query-by-label-text :emoji))
+    (h/is-null (h/query-by-label-text :lock)))
+
+  (h/test "with emoji, no lock set, large size"
+    (let [emoji "🍓"]
+      (h/render [component/view {:emoji emoji :size :size/l}])
+      (h/is-null (h/query-by-label-text :initials))
+      (h/is-truthy (h/query-by-text emoji))
+      (h/is-null (h/query-by-label-text :lock))))
+
+  (h/test "locked"
+    (h/render [component/view {:locked? true}])
+    (h/is-truthy (h/query-by-label-text :lock)))
+
+  (h/test "unlocked"
+    (h/render [component/view {:locked? false}])
+    (h/is-truthy (h/query-by-label-text :lock)))
+
+  (h/test "no emoji, smaller size"
+    (h/render [component/view {:full-name "Status Mobile"}])
+    (h/is-truthy (h/query-by-text "S")))
+
+  (h/test "no emoji, large size"
+    (h/render [component/view
+               {:full-name "Status Mobile"
+                :size      :size/l}])
+    (h/is-truthy (h/query-by-text "SM"))))

src/quo2/components/avatars/channel_avatar/style.cljs

@@ -0,0 +1,28 @@
+(ns quo2.components.avatars.channel-avatar.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def lock-icon-size 12)
+
+(defn outer-container
+  [{:keys [size color]}]
+  (let [size (if (= size :size/l) 32 24)]
+    {:width            size
+     :height           size
+     :border-radius    size
+     :justify-content  :center
+     :align-items      :center
+     :background-color (colors/theme-alpha color 0.1 0.1)}))
+
+(defn lock-container
+  [size]
+  (let [distance (if (= size :size/l) 20 12)]
+    {:position         :absolute
+     :left             distance
+     :top              distance
+     :background-color (colors/theme-colors colors/white colors/neutral-95)
+     :border-radius    (* 2 lock-icon-size)
+     :padding          2}))
+
+(def lock-icon
+  {:width  lock-icon-size
+   :height lock-icon-size})

src/quo2/components/avatars/channel_avatar/view.cljs

@@ -0,0 +1,60 @@
+(ns quo2.components.avatars.channel-avatar.view
+  (:require [clojure.string :as string]
+            [quo2.components.avatars.channel-avatar.style :as style]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            utils.string))
+
+(defn- initials
+  [full-name size color]
+  (let [amount-initials (if (= size :size/l) 2 1)]
+    [text/text
+     {:accessibility-label :initials
+      :size                :paragraph-2
+      :weight              :semi-bold
+      :style               {:color color}}
+     (utils.string/get-initials full-name amount-initials)]))
+
+(defn- lock
+  [locked? size]
+  ;; When `locked?` is nil, we must not display the unlocked icon.
+  (when (boolean? locked?)
+    [rn/view
+     {:accessibility-label :lock
+      :style               (style/lock-container size)}
+     [icons/icon (if locked? :i/locked :i/unlocked)
+      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40)
+       :container-style style/lock-icon
+       :size            12}]]))
+
+(defn view
+  "Options:
+
+  :size - keyword (default nil) - Container size, for the moment,
+  only :size/l (meaning large) is supported.
+
+  :emoji - string (default nil)
+
+  :customization-color - color (default nil) If the component is used for a
+  community channel, then the default color should be the community custom
+  color.
+
+  :locked? - nil/bool (default nil) - When true/false display a locked/unlocked
+  icon respectively. When nil does not show icon.
+
+  :full-name - string (default nil) - When :emoji is blank, this value will be
+  used to extract the initials.
+  "
+  [{:keys [size emoji customization-color locked? full-name]}]
+  [rn/view
+   {:accessibility-label :channel-avatar
+    :style               (style/outer-container {:size size :color customization-color})}
+   (if (string/blank? emoji)
+     [initials full-name size customization-color]
+     [text/text
+      {:accessibility-label :emoji
+       :size                (if (= size :size/l) :paragraph-1 :label)}
+      (string/trim emoji)])
+   [lock locked? size]])

src/quo2/components/avatars/user_avatar/view.cljs

@@ -1,22 +1,9 @@
 (ns quo2.components.avatars.user-avatar.view
-  (:require [clojure.string :as string]
-            [quo2.components.avatars.user-avatar.style :as style]
+  (:require [quo2.components.avatars.user-avatar.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]))
-
-(defn trim-whitespace [s] (string/join " " (string/split (string/trim s) #"\s+")))
-
-(defn- extract-initials
-  [full-name amount-initials]
-  (let [upper-case-first-letter (comp string/upper-case first)
-        names-list              (string/split (trim-whitespace full-name) " ")]
-    (if (= (first names-list) "")
-      ""
-      (->> names-list
-           (map upper-case-first-letter)
-           (take amount-initials)
-           (string/join)))))
+            [react-native.fast-image :as fast-image]
+            utils.string))
 
 (defn initials-avatar
   [{:keys [full-name size draw-ring? customization-color]}]
@@ -29,7 +16,7 @@
       {:style  style/initials-avatar-text
        :size   font-size
        :weight :semi-bold}
-      (extract-initials full-name amount-initials)]]))
+      (utils.string/get-initials full-name amount-initials)]]))
 
 (def valid-ring-sizes #{:big :medium :small})
 

src/quo2/components/buttons/__tests__/buttons_component_spec.cljs

@@ -1,28 +0,0 @@
-(ns quo2.components.buttons.--tests--.buttons-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.buttons.button :as button]
-            [reagent.core :as reagent]))
-
-(defn render-button
-  ([options label]
-   (rtl/render (reagent/as-element [button/button options label]))))
-
-(js/global.test "default render of button component"
-  (fn []
-    (render-button {:accessibility-label "test-button"} "")
-    (-> (js/expect (rtl/screen.getByLabelText "test-button"))
-        (.toBeTruthy))))
-
-(js/global.test "button renders with a label"
-  (fn []
-    (render-button {} "test-label")
-    (-> (js/expect (rtl/screen.getByText "test-label"))
-        (.toBeTruthy))))
-
-(js/global.test "button on-press works"
-  (let [event (js/jest.fn)]
-    (fn []
-      (render-button {:on-press event} "test-label")
-      (rtl/fireEvent.press (rtl/screen.getByText "test-label"))
-      (-> (js/expect event)
-          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/buttons/button/component_spec.cljs

@@ -0,0 +1,18 @@
+(ns quo2.components.buttons.button.component-spec
+  (:require [quo2.components.buttons.button.view :as button]
+            [test-helpers.component :as h]))
+
+(h/describe "button tests"
+  (h/test "default render of button component"
+    (h/render [button/button {:accessibility-label "test-button"} ""])
+    (h/is-truthy (h/get-by-label-text "test-button")))
+
+  (h/test "button renders with a label"
+    (h/render [button/button {} "test-label"])
+    (h/is-truthy (h/get-by-text "test-label")))
+
+  (h/test "button on-press works"
+    (let [event (h/mock-fn)]
+      (h/render [button/button {:on-press event} "test-label"])
+      (h/fire-event :press (h/get-by-text "test-label"))
+      (h/was-called event))))

src/quo2/components/buttons/button/style.cljs

@@ -1,12 +1,46 @@
-(ns quo2.components.buttons.button
-  (:require [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]
-            [quo2.components.buttons.style :as style]))
+(ns quo2.components.buttons.button.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(defn before-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (merge
+   {:margin-left     (or (get override-margins :left)
+                         (if (= size 40) 12 8))
+    :margin-right    (or (get override-margins :right) 4)
+    :align-items     :center
+    :justify-content :center}
+   (when icon-container-size
+     {:width  icon-container-size
+      :height icon-container-size})
+   (when icon-background-color
+     {:background-color icon-background-color})
+   (when icon-container-rounded?
+     {:border-radius (/ (or icon-container-size icon-size) 2)})))
+
+(defn after-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (merge
+   {:margin-left     (or (get override-margins :left) 4)
+    :margin-right    (or (get override-margins :right)
+                         (if (= size 40) 12 8))
+    :align-items     :center
+    :justify-content :center}
+   (when icon-container-size
+     {:width  icon-container-size
+      :height icon-container-size})
+   (when icon-background-color
+     {:background-color icon-background-color})
+   (when icon-container-rounded?
+     {:border-radius (/ (or icon-container-size icon-size) 2)})))
 
 (defn themes
   [customization-color]
@@ -179,7 +213,7 @@
                       24 8))})
 
 (defn style-container
-  [type size disabled background-color border-color icon above width before after blur-active?]
+  [{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
   (merge {:height             size
           :align-items        :center
           :justify-content    :center
@@ -228,132 +262,3 @@
             :border-width 1})
          (when disabled
            {:opacity 0.3})))
-
-(defn- button-internal
-  "with label
-   [button opts \"label\"]
-   opts
-   {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
-            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
-    :size   40 [default] /32/24
-    :icon   true/false
-    :community-color '#FFFFFF'
-    :community-text-color '#000000'
-    :before :icon-keyword
-    :after  :icon-keyword}
-
-   only icon
-   [button {:icon true} :i/close-circle]"
-  [_ _]
-  (let [pressed-in (reagent/atom false)]
-    (fn
-      [{:keys [on-press disabled type size before after above icon-secondary-no-color
-               width customization-color theme override-background-color pressed
-               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
-               blur-active? override-before-margins override-after-margins icon-size icon-container-size
-               icon-container-rounded?]
-        :or   {type                :primary
-               size                40
-               customization-color :primary
-               blur-active?        true}}
-       children]
-      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
-                    blur-overlay-color icon-background-color]}
-            (get-in (themes customization-color)
-                    [theme type])
-            state (cond disabled                 :disabled
-                        (or @pressed-in pressed) :pressed
-                        :else                    :default)
-            blur-state (if blur-active? :blurred :default)
-            icon-size (or icon-size (when (= 24 size) 12))
-            icon-secondary-color (or icon-secondary-color icon-color)]
-        [rn/touchable-without-feedback
-         (merge {:test-ID             test-ID
-                 :disabled            disabled
-                 :accessibility-label accessibility-label
-                 :on-press-in         #(reset! pressed-in true)
-                 :on-press-out        #(reset! pressed-in nil)}
-                (when on-press
-                  {:on-press on-press})
-                (when on-long-press
-                  {:on-long-press on-long-press}))
-         [rn/view
-          {:style (merge
-                   (shape-style-container type icon size)
-                   {:width width}
-                   style)}
-          [rn/view
-           {:style (merge
-                    (style-container
-                     type
-                     size
-                     disabled
-                     (or override-background-color (get background-color state))
-                     (get border-color state)
-                     icon
-                     above
-                     width
-                     before
-                     after
-                     blur-active?)
-                    (when (= state :pressed) {:opacity 0.9})
-                    inner-style)}
-           (when (and (= type :blurred)
-                      blur-active?)
-             [blur/view
-              {:blur-radius   20
-               :blur-type     blur-type
-               :overlay-color blur-overlay-color
-               :style         style/blur-view}])
-           (when above
-             [rn/view
-              [quo2.icons/icon above
-               {:container-style {:margin-bottom 2}
-                :color           icon-secondary-color
-                :size            icon-size}]])
-           (when before
-             [rn/view
-              {:style (style/before-icon-style
-                       {:override-margins        override-before-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
-              [quo2.icons/icon before
-               {:color icon-secondary-color
-                :size  icon-size}]])
-           [rn/view
-            (cond
-              (or icon icon-no-color)
-              [quo2.icons/icon children
-               {:color    icon-color
-                :no-color icon-no-color
-                :size     icon-size}]
-
-              (string? children)
-              [text/text
-               {:size            (when (#{56 24} size) :paragraph-2)
-                :weight          :medium
-                :number-of-lines 1
-                :style           {:color label-color}}
-
-               children]
-
-              (vector? children)
-              children)]
-           (when after
-             [rn/view
-              {:style (style/after-icon-style
-                       {:override-margins        override-after-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
-              [quo2.icons/icon after
-               {:no-color icon-secondary-no-color
-                :color    icon-secondary-color
-                :size     icon-size}]])]]]))))
-
-(def button (theme/with-theme button-internal))

src/quo2/components/buttons/button/view.cljs

@@ -0,0 +1,138 @@
+(ns quo2.components.buttons.button.view
+  (:require [quo2.components.icon :as quo2.icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.blur :as blur]
+            [reagent.core :as reagent]
+            [quo2.components.buttons.button.style :as style]))
+
+(defn- button-internal
+  "with label
+   [button opts \"label\"]
+   opts
+   {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
+            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
+    :size   40 [default] /32/24
+    :icon   true/false
+    :community-color '#FFFFFF'
+    :community-text-color '#000000'
+    :before :icon-keyword
+    :after  :icon-keyword}
+
+   only icon
+   [button {:icon true} :i/close-circle]"
+  [_ _]
+  (let [pressed-in (reagent/atom false)]
+    (fn
+      [{:keys [on-press disabled type size before after above icon-secondary-no-color
+               width customization-color theme override-background-color pressed
+               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
+               blur-active? override-before-margins override-after-margins icon-size icon-container-size
+               icon-container-rounded?]
+        :or   {type                :primary
+               size                40
+               customization-color :primary
+               blur-active?        true}}
+       children]
+      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
+                    blur-overlay-color icon-background-color]}
+            (get-in (style/themes customization-color)
+                    [theme type])
+            state (cond disabled                 :disabled
+                        (or @pressed-in pressed) :pressed
+                        :else                    :default)
+            blur-state (if blur-active? :blurred :default)
+            icon-size (or icon-size (when (= 24 size) 12))
+            icon-secondary-color (or icon-secondary-color icon-color)]
+        [rn/touchable-without-feedback
+         (merge {:test-ID             test-ID
+                 :disabled            disabled
+                 :accessibility-label accessibility-label
+                 :on-press-in         #(reset! pressed-in true)
+                 :on-press-out        #(reset! pressed-in nil)}
+                (when on-press
+                  {:on-press on-press})
+                (when on-long-press
+                  {:on-long-press on-long-press}))
+         [rn/view
+          {:style (merge
+                   (style/shape-style-container type icon size)
+                   {:width width}
+                   style)}
+          [rn/view
+           {:style (merge
+                    (style/style-container {:type type
+                                            :size size
+                                            :disabled disabled
+                                            :background-color
+                                            (or override-background-color (get background-color state))
+                                            :border-color
+                                            (get border-color state)
+                                            :icon icon
+                                            :above above
+                                            :width width
+                                            :before before
+                                            :after after
+                                            :blur-active? blur-active?})
+                    (when (= state :pressed) {:opacity 0.9})
+                    inner-style)}
+           (when (and (= type :blurred)
+                      blur-active?)
+             [blur/view
+              {:blur-radius   20
+               :blur-type     blur-type
+               :overlay-color blur-overlay-color
+               :style         style/blur-view}])
+           (when above
+             [rn/view
+              [quo2.icons/icon above
+               {:container-style {:margin-bottom 2}
+                :color           icon-secondary-color
+                :size            icon-size}]])
+           (when before
+             [rn/view
+              {:style (style/before-icon-style
+                       {:override-margins        override-before-margins
+                        :size                    size
+                        :icon-container-size     icon-container-size
+                        :icon-background-color   (get icon-background-color blur-state)
+                        :icon-container-rounded? icon-container-rounded?
+                        :icon-size               icon-size})}
+              [quo2.icons/icon before
+               {:color icon-secondary-color
+                :size  icon-size}]])
+           [rn/view
+            (cond
+              (or icon icon-no-color)
+              [quo2.icons/icon children
+               {:color    icon-color
+                :no-color icon-no-color
+                :size     icon-size}]
+
+              (string? children)
+              [text/text
+               {:size            (when (#{56 24} size) :paragraph-2)
+                :weight          :medium
+                :number-of-lines 1
+                :style           {:color label-color}}
+
+               children]
+
+              (vector? children)
+              children)]
+           (when after
+             [rn/view
+              {:style (style/after-icon-style
+                       {:override-margins        override-after-margins
+                        :size                    size
+                        :icon-container-size     icon-container-size
+                        :icon-background-color   (get icon-background-color blur-state)
+                        :icon-container-rounded? icon-container-rounded?
+                        :icon-size               icon-size})}
+              [quo2.icons/icon after
+               {:no-color icon-secondary-no-color
+                :color    icon-secondary-color
+                :size     icon-size}]])]]]))))
+
+(def button (theme/with-theme button-internal))

src/quo2/components/buttons/dynamic_button.cljs

@@ -62,7 +62,7 @@
     :customization-color customize jump-to and mention button color}"
   [_]
   (let [pressed? (reagent/atom false)]
-    (fn [{:keys [type label on-press count customization-color style]}]
+    (fn [{:keys [type label on-press customization-color style] :as args}]
       [rn/touchable-opacity
        {:on-press-in         #(reset! pressed? true)
         :on-press-out        #(reset! pressed? false)
@@ -102,6 +102,6 @@
            (case type
              :jump-to                                       label
              :search-with-label                             label
-             (:mention :notification-down :notification-up) (str count))])
+             (:mention :notification-down :notification-up) (str (:count args)))])
         (when (#{:jump-to :notification-down :notification-up} type)
           [icon-view type])]])))

src/quo2/components/buttons/predictive_keyboard/view.cljs

@@ -5,7 +5,7 @@
             [quo2.theme :as theme]
             [react-native.linear-gradient :as linear-gradient]
             [quo2.foundations.colors :as colors]
-            [quo2.components.buttons.button :as button]))
+            [quo2.components.buttons.button.view :as button]))
 
 (def ^:private gradients
   {:light [(colors/alpha colors/neutral-40 0.05) (colors/alpha colors/neutral-40 0)]

src/quo2/components/buttons/style.cljs

@@ -1,42 +0,0 @@
-(ns quo2.components.buttons.style)
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(defn before-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left)
-                         (if (= size 40) 12 8))
-    :margin-right    (or (get override-margins :right) 4)
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
-
-(defn after-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left) 4)
-    :margin-right    (or (get override-margins :right)
-                         (if (= size 40) 12 8))
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))

src/quo2/components/code/snippet.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.code.snippet
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.code.code.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]

src/quo2/components/common/separator/view.cljs

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

src/quo2/components/community/community_list_view.cljs

@@ -3,6 +3,7 @@
             [quo2.components.community.style :as style]
             [quo2.components.counter.counter :as counter]
             [quo2.components.icon :as icons]
+            [quo2.theme :as theme]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.community.icon :as community-icon]
@@ -21,8 +22,8 @@
       :resize-mode     :center
       :size            20
       :color           (colors/theme-colors
-                        colors/neutral-40
-                        colors/neutral-50)}]
+                        colors/neutral-50
+                        colors/neutral-40)}]
     (pos? unread-mentions-count)
     [counter/counter {:type :default} unread-mentions-count]
 
@@ -34,7 +35,7 @@
    {:keys [name
            locked?
            status
-           muted?
+           muted
            unread-messages?
            unread-mentions-count
            community-icon
@@ -59,7 +60,7 @@
          :accessibility-label :community-name-text
          :number-of-lines     1
          :ellipsize-mode      :tail
-         :style               {:color (when muted?
+         :style               {:color (when muted
                                         (colors/theme-colors
                                          colors/neutral-40
                                          colors/neutral-60))}}
@@ -71,14 +72,15 @@
          {:locked? locked?
           :tokens  tokens}]
         [notification-view
-         {:muted?                muted?
+         {:muted?                muted
           :unread-mentions-count unread-mentions-count
           :unread-messages?      unread-messages?}])]]]])
 
 (defn communities-membership-list-item
   [props
+   bottom-sheet?
    {:keys [name
-           muted?
+           muted
            unviewed-messages-count
            unviewed-mentions-count
            status
@@ -105,17 +107,22 @@
        :number-of-lines     1
        :ellipsize-mode      :tail
        :weight              :semi-bold
-       :size                :paragraph-1}
+       :size                :paragraph-1
+       :style               (when muted
+                              {:color (if (theme/dark?)
+                                        colors/neutral-60
+                                        colors/neutral-40)})}
       name]]
 
     [rn/view
      {:justify-content :center
-      :margin-right    16}
+      :margin-right    (when bottom-sheet?
+                         16)}
      (if (= status :gated)
        [community-view/permission-tag-container
         {:locked? locked?
          :tokens  tokens}]
        [notification-view
-        {:muted?                muted?
+        {:muted?                muted
          :unread-mentions-count unviewed-mentions-count
          :unread-messages?      (pos? unviewed-messages-count)}])]]])

src/quo2/components/community/community_view.cljs

@@ -5,13 +5,17 @@
             [quo2.components.tags.permission-tag :as permission]
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
-            [quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
-            [react-native.core :as rn]))
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.gesture :as gesture]
+            utils.money))
 
 (defn community-stats
-  [{:keys [icon members-count icon-color]}]
-  [rn/view (style/stats-count-container)
-   [rn/view {:margin-right 4}
+  [{:keys [icon members-count icon-color accessibility-label]}]
+  [rn/view
+   {:accessibility-label accessibility-label
+    :style               (style/stats-count-container)}
+   [rn/view {:margin-right 2}
     [icons/icon icon
      {:container-style {:align-items     :center
                         :justify-content :center}
@@ -20,29 +24,32 @@
       :color           icon-color}]]
    [text/text
     {:weight :regular
-     :size   :paragraph-1}
+     :size   :paragraph-2}
     members-count]])
 
 (defn community-stats-column
-  [{:keys [type]}]
-  (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
+  [{:keys [type theme blur? members-count active-count]}]
+  (let [icon-color (if (and (= :dark theme) blur?)
+                     colors/white-opa-40
+                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
     [rn/view
      (if (= type :card-view)
        (style/card-stats-container)
        (style/list-stats-container))
      [community-stats
-      {:icon          :i/group
-       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from
-                               ;;outside this component
-       :icon-color    icon-color}]
+      {:accessibility-label :stats-members-count
+       :icon                :i/group
+       :members-count       (utils.money/format-amount members-count)
+       :icon-color          icon-color}]
      [community-stats
-      {:icon          :i/lightning
-       :members-count "112.1K"
-       :icon-color    icon-color}]]))
+      {:accessibility-label :stats-active-count
+       :icon                :i/active-members
+       :members-count       (utils.money/format-amount active-count)
+       :icon-color          icon-color}]]))
 
 (defn community-tags
   [{:keys [tags container-style last-item-style]}]
-  [gesture-handler/scroll-view
+  [gesture/scroll-view
    {:shows-horizontal-scroll-indicator false
     :horizontal                        true
     :style                             container-style}
@@ -84,13 +91,16 @@
        :style               {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(defn permission-tag-container
-  [{:keys [locked? tokens on-press]}]
+(defn- permission-tag-container-internal
+  [{:keys [locked? blur? tokens on-press theme]}]
   [permission/tag
-   {:background-color (colors/theme-colors
-                       colors/neutral-10
-                       colors/neutral-80)
-    :locked?          locked?
-    :tokens           tokens
-    :size             24
-    :on-press         on-press}])
+   {:accessibility-label :permission-tag
+    :background-color    (if (and (= :dark theme) blur?)
+                           colors/white-opa-10
+                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+    :locked?             locked?
+    :tokens              tokens
+    :size                24
+    :on-press            on-press}])
+
+(def permission-tag-container (theme/with-theme permission-tag-container-internal))

src/quo2/components/counter/counter.cljs

@@ -17,8 +17,8 @@
            :outline   colors/neutral-70}})
 
 (defn get-color
-  [key]
-  (get-in themes [(theme/get-theme) key]))
+  [k]
+  (get-in themes [(theme/get-theme) k]))
 
 (defn counter
   [{:keys [type override-text-color override-bg-color style accessibility-label max-value]

src/quo2/components/dividers/date.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.dividers.date
   (:require [quo2.components.markdown.text :as text]
-            [quo2.components.separator :as separator]
+            [quo2.components.common.separator.view :as separator]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))
 

src/quo2/components/drawers/action_drawers/style.cljs

@@ -2,9 +2,9 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn divider
-  []
+  [theme]
   {:border-top-width 1
-   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
+   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
    :margin-top       8
    :margin-bottom    7
    :align-items      :center
@@ -45,6 +45,6 @@
    :width         20})
 
 (defn right-text
-  [override-theme]
-  {:color        (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
+  [theme]
+  {:color        (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :margin-right 12})

src/quo2/components/drawers/action_drawers/view.cljs

@@ -1,20 +1,21 @@
 (ns quo2.components.drawers.action-drawers.view
-  (:require [quo2.components.icon :as icon]
+  (:require [react-native.core :as rn]
+            [quo2.components.drawers.action-drawers.style :as style]
+            [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.components.drawers.action-drawers.style :as style]))
+            [quo2.theme :as quo.theme]))
 
 (defn- get-icon-color
-  [danger? override-theme]
+  [danger? theme]
   (if danger?
-    colors/danger-60
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
+    (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
 (defn- divider
-  []
+  [theme]
   [rn/view
-   {:style               (style/divider)
+   {:style               (style/divider theme)
     :accessible          true
     :accessibility-label :divider}])
 
@@ -24,7 +25,7 @@
     [rn/view (dissoc props :on-press) child]
     [rn/touchable-highlight props child]))
 
-(defn- action
+(defn- action-internal
   [{:keys [icon
            label
            sub-label
@@ -34,65 +35,66 @@
            disabled?
            on-press
            add-divider?
-           override-theme
+           theme
            accessibility-label
-           icon-color]
-    :as   action-props}]
-  (when action-props
-    [:<> {:key label}
-     (when add-divider?
-       [divider])
-     [maybe-pressable disabled?
-      {:accessibility-label accessibility-label
-       :style               (style/container sub-label disabled?)
-       :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
-       :on-press            on-press}
-      [rn/view
-       {:style (style/row-container sub-label)}
-       [rn/view
-        {:accessibility-label :left-icon-for-action
-         :accessible          true
-         :style               style/left-icon}
-        [icon/icon icon
-         {:color (or icon-color (get-icon-color danger? override-theme))
-          :size  20}]]
-       [rn/view
-        {:style style/text-container}
+           icon-color]}]
+  [:<>
+   (when add-divider?
+     [divider theme])
+   [maybe-pressable disabled?
+    {:accessibility-label accessibility-label
+     :style               (style/container sub-label disabled?)
+     :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
+     :on-press            on-press}
+    [rn/view
+     {:style (style/row-container sub-label)}
+     [rn/view
+      {:accessibility-label :left-icon-for-action
+       :accessible          true
+       :style               style/left-icon}
+      [icon/icon icon
+       {:color (or icon-color (get-icon-color danger? theme))
+        :size  20}]]
+     [rn/view
+      {:style style/text-container}
+      [text/text
+       {:size   :paragraph-1
+        :weight :medium
+        :style  {:color
+                 (cond
+                   danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+                   :else   (colors/theme-colors colors/neutral-100 colors/white theme))}}
+       label]
+      (when sub-label
         [text/text
-         {:size   :paragraph-1
-          :weight :medium
-          :style  {:color
-                   (cond
-                     danger? (colors/theme-colors colors/danger-50 colors/danger-60 override-theme)
-                     :else   (colors/theme-colors colors/neutral-100 colors/white override-theme))}}
-         label]
-        (when sub-label
+         {:size  :paragraph-2
+          :style {:color
+                  (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+         sub-label])]
+     (when (or right-text right-icon)
+       [rn/view {:style style/right-side-container}
+        (when right-text
           [text/text
-           {:size  :paragraph-2
-            :style {:color
-                    (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
-           sub-label])]
-       (when (or right-text right-icon)
-         [rn/view {:style style/right-side-container}
-          (when right-text
-            [text/text
-             {:accessibility-label :right-text-for-action
-              :size                :paragraph-1
-              :style               (style/right-text override-theme)}
-             right-text])
-          (when right-icon
-            [rn/view
-             {:style               style/right-icon
-              :accessible          true
-              :accessibility-label :right-icon-for-action}
-             [icon/icon right-icon
-              {:color (get-icon-color danger? override-theme)
-               :size  20}]])])]]]))
+           {:accessibility-label :right-text-for-action
+            :size                :paragraph-1
+            :style               (style/right-text theme)}
+           right-text])
+        (when right-icon
+          [rn/view
+           {:style               style/right-icon
+            :accessible          true
+            :accessibility-label :right-icon-for-action}
+           [icon/icon right-icon
+            {:color (get-icon-color danger? theme)
+             :size  20}]])])]]])
+
+(def ^:private action (quo.theme/with-theme action-internal))
 
 (defn action-drawer
   [sections]
   [:<>
    (doall
     (for [actions sections]
-      (doall
-       (map action actions))))])
+      (let [filtered-actions (filter some? actions)]
+        (doall
+         (map #(with-meta [action %] {:key (:label %)}) filtered-actions)))))])

src/quo2/components/drawers/documentation_drawers/view.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.drawers.documentation-drawers.view
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.components.buttons.button.view :as button]
             [quo2.components.drawers.documentation-drawers.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]

src/quo2/components/dropdowns/dropdown.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo2.components.buttons.button :as button]))
+  (:require [quo2.components.buttons.button.view :as button]))
 
 (defn dropdown
   [_ _]

src/quo2/components/empty_state/empty_state/view.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.empty-state.empty-state.view
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.components.buttons.button.view :as button]
             [quo2.components.empty-state.empty-state.styles :as styles]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]

src/quo2/components/header.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.header
   (:require [oops.core :refer [oget]]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]

src/quo2/components/info/info_message.cljs

@@ -14,8 +14,8 @@
            :error   colors/danger-60}})
 
 (defn get-color
-  [key]
-  (get-in themes [(theme/get-theme) key]))
+  [k]
+  (get-in themes [(theme/get-theme) k]))
 
 (defn info-message
   "[info-message opts \"message\"]

src/quo2/components/info/information_box/style.cljs

@@ -30,12 +30,12 @@
            :close-button colors/white}})
 
 (defn get-color
-  [theme key]
-  (get-in themes [theme key]))
+  [theme k]
+  (get-in themes [theme k]))
 
 (defn get-color-by-type
-  [theme type key]
-  (get-in themes [theme type key]))
+  [theme type k]
+  (get-in themes [theme type k]))
 
 (defn container
   [{:keys [theme type include-button?]}]

src/quo2/components/info/information_box/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.information-box.view
   (:require [clojure.string :as string]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.icon :as icons]
             [quo2.components.info.information-box.style :as style]
             [quo2.components.markdown.text :as text]

src/quo2/components/inputs/profile_input/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.inputs.profile-input.view
   (:require
-    [quo2.components.buttons.button :as buttons]
+    [quo2.components.buttons.button.view :as buttons]
     [quo2.components.avatars.user-avatar.view :as user-avatar]
     [quo2.components.inputs.profile-input.style :as style]
     [quo2.components.inputs.title-input.view :as title-input]

src/quo2/components/links/link_preview/view.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.links.link-preview.view
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.components.buttons.button.view :as button]
             [quo2.components.links.link-preview.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]))

src/quo2/components/list_items/channel.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.list-items.channel
-  (:require [quo2.components.avatars.channel-avatar :as channel-avatar]
-            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]
+  (:require [quo2.components.avatars.channel-avatar.view :as channel-avatar]
+            [quo2.components.common.unread-grey-dot.view :as unread-grey-dot]
             [quo2.components.counter.counter :as quo2.counter]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.markdown.text :as quo2.text]
@@ -13,10 +13,11 @@
 
 (defn list-item
   [{:keys [locked? mentions-count unread-messages?
-           muted? is-active-channel? emoji channel-color]
-    :or   {channel-color colors/primary-50}
+           muted? is-active-channel? emoji channel-color
+           default-color]
     :as   props}]
-  (let [standard-props (apply dissoc props custom-props)
+  (let [channel-color  (or channel-color default-color)
+        standard-props (apply dissoc props custom-props)
         name-text      (:name props)]
     [rn/touchable-opacity standard-props
      [rn/view
@@ -36,11 +37,12 @@
                               :align-items     :center}
         :accessible          true
         :accessibility-label :chat-name-text}
-       [channel-avatar/channel-avatar
-        {:big?                   true
-         :locked?                locked?
-         :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
-         :emoji                  emoji}]
+       [channel-avatar/view
+        {:size                :size/l
+         :locked?             locked?
+         :full-name           (:name props)
+         :customization-color channel-color
+         :emoji               emoji}]
        [quo2.text/text
         {:style  (cond-> {:margin-left 12}
                    (and (not locked?) muted?)
@@ -63,4 +65,4 @@
              mentions-count]]
 
            unread-messages?
-           [unread-grey-dot :unviewed-messages-public])])]]))
+           [unread-grey-dot/unread-grey-dot :unviewed-messages-public])])]]))

src/quo2/components/list_items/community/component_spec.cljs

@@ -0,0 +1,70 @@
+(ns quo2.components.list-items.community.component-spec
+  (:require [quo2.components.list-items.community.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Community list"
+  (h/test "default render"
+    (h/render [component/view {}])
+    (h/is-truthy (h/get-by-label-text :community-item-title))
+    (h/is-null (h/query-by-label-text :community-item-info)))
+
+  (h/describe "type share"
+    (h/test "renders"
+      (h/render [component/view
+                 {:type     :share
+                  :title    "Title"
+                  :subtitle "Subtitle"}])
+      (h/is-truthy (h/get-by-text "# Title"))
+      (h/is-truthy (h/get-by-text "Subtitle"))
+      (h/is-null (h/query-by-label-text :community-item-info))))
+
+  (h/describe "type engage"
+    (h/test "default, no info"
+      (h/render [component/view {:type :engage}])
+      (h/is-null (h/query-by-label-text :community-item-info)))
+
+    (h/test "info is :navigation"
+      (h/render [component/view {:type :engage :info :navigation}])
+      (h/is-truthy (h/get-by-label-text :info-navigation)))
+
+    (h/test "info is :token-gated"
+      (h/render [component/view {:type :engage :info :token-gated}])
+      (h/is-truthy (h/get-by-label-text :info-token-gated)))
+
+    (h/test "info is :muted"
+      (h/render [component/view {:type :engage :info :muted}])
+      (h/is-truthy (h/get-by-label-text :info-muted)))
+
+    (h/test "info is :notification"
+      (h/render [component/view {:type :engage :info :notification}])
+      (h/is-truthy (h/get-by-label-text :info-notification-dot)))
+
+    (h/test "info is :mention"
+      (h/render [component/view
+                 {:type         :engage
+                  :info         :mention
+                  :unread-count 9000}])
+      (h/is-truthy (h/get-by-text "99+"))))
+
+  (h/describe "type discover"
+    (h/test "default, no info, no member stats"
+      (h/render [component/view {:type :discover}])
+      (h/is-null (h/query-by-label-text :stats-members-count))
+      (h/is-null (h/query-by-label-text :community-item-info)))
+
+    (h/test "info is :token-gated, show member stats"
+      (let [on-press-info (h/mock-fn)]
+        (h/render [component/view
+                   {:type          :discover
+                    :info          :token-gated
+                    :locked?       true
+                    :blur?         false
+                    :on-press-info on-press-info
+                    :members       {:members-count 9876 :active-count 1350}
+                    :tokens        [{:id 1 :group [{:id 1}]}]}])
+        (h/is-truthy (h/get-by-label-text :community-item-info))
+        (h/is-truthy (h/get-by-label-text :permission-tag))
+        (h/is-truthy (h/get-by-label-text :stats-members-count))
+        (h/is-truthy (h/get-by-label-text :stats-active-count))
+        (h/fire-event :press (h/get-by-label-text :permission-tag))
+        (h/was-called on-press-info)))))

src/quo2/components/list_items/community/style.cljs

@@ -0,0 +1,65 @@
+(ns quo2.components.list-items.community.style
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.foundations.shadows :as shadows]))
+
+(def logo
+  {:border-radius 50
+   :border-width  0
+   :width         32
+   :height        32
+   :margin-right  10})
+
+(defn notification-dot
+  [blur? theme]
+  {:width            8
+   :height           8
+   :border-radius    4
+   :background-color (if (and (= :dark theme) blur?)
+                       colors/white-opa-40
+                       (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))})
+
+(defn title
+  [{:keys [type info blur? theme]}]
+  {:color (cond
+            (and (= type :engage) (= info :muted))
+            (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+
+            (and (= type :engage) (= info :default) (not blur?))
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+
+            (and (= type :engage) (= info :default) (= :dark theme) blur?)
+            colors/white-70-blur
+
+            :else
+            (colors/theme-colors colors/neutral-100 colors/white theme))})
+
+(defn subtitle
+  [blur? theme]
+  {:color (if (and (= :dark theme) blur?)
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
+(defn container
+  [{:keys [type pressed? blur? customization-color theme info]}]
+  (merge {:padding-vertical   8
+          :padding-horizontal 12
+          :border-radius      12
+          :flex-direction     :row
+          :align-items        :center
+          :background-color   (cond
+                                (and pressed? (= type :engage) (= info :default) (= :dark theme) blur?)
+                                colors/white-opa-5
+
+                                (and pressed? (#{:engage :share} type))
+                                (colors/theme-alpha customization-color 0.05 0.05)
+
+                                (and (not pressed?) (= type :discover) (not blur?))
+                                (colors/theme-colors colors/white colors/neutral-90 theme)
+
+                                (and (not pressed?) (= type :discover) (= :dark theme) blur?)
+                                colors/white-opa-5
+
+                                (and pressed? (= type :discover))
+                                (colors/theme-colors colors/white :transparent theme))}
+         (when (and (= type :discover) (not pressed?))
+           (shadows/get 3))))

src/quo2/components/list_items/community/view.cljs

@@ -0,0 +1,165 @@
+(ns quo2.components.list-items.community.view
+  (:require [quo2.components.community.community-view :as community-view]
+            [quo2.components.counter.counter :as counter]
+            [quo2.components.icon :as icons]
+            [quo2.components.list-items.community.style :as style]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn- logo-component
+  [logo]
+  [rn/image {:source logo :style style/logo}])
+
+(defn- title-component
+  [{:keys [title type] :as props}]
+  [text/text
+   {:weight              :semi-bold
+    :size                :paragraph-1
+    :accessibility-label :community-item-title
+    :number-of-lines     1
+    :ellipsize-mode      :tail
+    :style               (style/title props)}
+   (if (= type :share)
+     (str "# " title)
+     title)])
+
+(defn- subtitle-component
+  [subtitle blur? theme]
+  [text/text
+   {:size                :paragraph-2
+    :number-of-lines     1
+    :accessibility-label :community-item-subtitle
+    :style               (style/subtitle blur? theme)}
+   subtitle])
+
+(defn- notification-dot
+  [blur? theme]
+  [rn/view
+   {:style               (style/notification-dot blur? theme)
+    :accessibility-label :info-notification-dot}])
+
+(defn- info-component
+  [{:keys [customization-color info type blur? locked? on-press-info theme tokens unread-count]}]
+  (let [component
+        (cond
+          (and (= type :discover) (= info :token-gated) (seq tokens))
+          [community-view/permission-tag-container
+           {:locked?  locked?
+            :tokens   tokens
+            :on-press on-press-info
+            :theme    theme
+            :blur?    blur?}]
+
+          (and (= type :engage) (= info :mention) (pos? unread-count))
+          [counter/counter
+           {:type              :default
+            :override-bg-color customization-color}
+           unread-count]
+
+          (and (= type :engage) (= info :notification))
+          [notification-dot blur? theme]
+
+          (and (= type :engage) (= info :muted))
+          [icons/icon :i/muted
+           {:accessibility-label :info-muted
+            :color               (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)}]
+
+          (and (= type :engage) (= info :token-gated))
+          [icons/icon (if locked? :i/locked :i/unlocked)
+           {:accessibility-label :info-token-gated
+            :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+
+          (and (= type :engage) (= info :navigation))
+          [icons/icon :i/chevron-right
+           {:accessibility-label :info-navigation
+            :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]
+    (when component
+      [rn/view
+       {:accessibility-label :community-item-info
+        :style               {:margin-left 10}}
+       component])))
+
+(defn- view-internal
+  "Options:
+
+  :type - :discover/engage/share
+  :info - keyword - Acceptable values vary based on the :type option.
+
+  :title - string
+  :logo - image resource
+  :theme - :light/dark
+
+  :container-style - style map - Override styles in top-level view component.
+
+  :members - {:members-count number, :active-count number} - When non-nil, the
+  statistics component will be shown.
+
+  :tokens - A sequence of maps, e.g. [{:id 1 :group [{:id 1 :token-icon an-icon}]}].
+
+  :locked? - boolean - When true, the permission-tag icon or the token gated
+  icon will appear as closed.
+
+  :blur? - boolean - It will be taken into account when true and dark mode is
+  enabled.
+
+  :customization-color - color - It will be passed down to components that
+  should vary based on a custom color.
+
+  :on-press/:on-long-press - fn - Used by the top-level pressable component.
+
+  :on-press-info - fn - Will be called when the info component is pressed.
+
+  :unread-count - number - When the info is :mention, it will be used to show
+  the number of unread mentions.
+  "
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [members type info tokens locked? title subtitle
+                 logo blur? customization-color
+                 on-press on-long-press on-press-info
+                 container-style unread-count theme]}]
+      [rn/pressable
+       {:accessibility-label :container
+        :on-press-in         (fn [] (reset! pressed? true))
+        :on-press            on-press
+        :on-long-press       on-long-press
+        :on-press-out        (fn [] (reset! pressed? false))
+        :style               (merge (style/container {:blur?               blur?
+                                                      :customization-color customization-color
+                                                      :info                info
+                                                      :type                type
+                                                      :pressed?            @pressed?
+                                                      :theme               theme})
+                                    container-style)}
+       [logo-component logo]
+       [rn/view {:style {:flex 1}}
+        [title-component
+         {:blur? blur?
+          :info  info
+          :theme theme
+          :title title
+          :type  type}]
+        (when (and (= type :share) subtitle)
+          [subtitle-component subtitle blur? theme])
+        (when (and members (= type :discover))
+          [community-view/community-stats-column
+           {:type          :list-view
+            :theme         theme
+            :blur?         blur?
+            :members-count (:members-count members)
+            :active-count  (:active-count members)}])]
+       [info-component
+        {:blur?               blur?
+         :customization-color customization-color
+         :info                info
+         :type                type
+         :locked?             locked?
+         :on-press-info       on-press-info
+         :theme               theme
+         :tokens              tokens
+         :unread-count        unread-count}]])))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/list_items/menu_item.cljs

@@ -7,11 +7,11 @@
 (defn themes
   [type]
   (case type
-    :main        {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
-                  :background (theme-colors colors/white colors/neutral-90)
+    :main        {:icon-color (theme-colors colors/neutral-50 colors/neutral-40)
+                  :background (theme-colors colors/white colors/neutral-95)
                   :text-color (theme-colors colors/neutral-100 colors/white)}
     :danger      {:icon-color (theme-colors colors/danger-50 colors/danger-60)
-                  :background (theme-colors colors/white colors/neutral-90)
+                  :background (theme-colors colors/white colors/neutral-95)
                   :text-color (theme-colors colors/danger-50 colors/danger-60)}
     :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
                   :text-color (theme-colors colors/neutral-100 colors/white)}))

src/quo2/components/loaders/skeleton/view.cljs

@@ -31,8 +31,8 @@
 
 (defn- internal-view
   [{:keys [content theme blur? parent-height]}]
-  (let [number-of-skeletons (int (Math/floor (/ parent-height
-                                                (get-in constants/layout-dimensions [content :height]))))
+  (let [skeleton-height     (get-in constants/layout-dimensions [content :height])
+        number-of-skeletons (int (Math/ceil (/ parent-height skeleton-height)))
         color               (cond
                               blur?           colors/white-opa-5
                               (= theme :dark) colors/neutral-90

src/quo2/components/messages/gap.cljs

@@ -17,8 +17,8 @@
            :background colors/neutral-95}})
 
 (defn get-color
-  [key]
-  (get-in themes [(theme/get-theme) key]))
+  [k]
+  (get-in themes [(theme/get-theme) k]))
 
 (def ui-images
   {:light {:horizontal (js/require "../resources/images/ui/message-gap-hborder-light.png")
@@ -28,8 +28,8 @@
            :circles    (js/require "../resources/images/ui/message-gap-circle-bg-dark.png")}})
 
 (defn get-image
-  [key]
-  (get-in ui-images [(theme/get-theme) key]))
+  [k]
+  (get-in ui-images [(theme/get-theme) k]))
 
 ;;; components
 ;;;; borders

src/quo2/components/navigation/floating_shell_button.cljs

@@ -5,12 +5,12 @@
 
 (defn dynamic-button-view
   [type dynamic-buttons style]
-  (when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
+  (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
     [dynamic-button/dynamic-button
      {:type                type
       :label               label
       :on-press            on-press
-      :count               count
+      :count               (:count props)
       :style               style
       :customization-color customization-color}]))
 

src/quo2/components/navigation/page_nav.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.navigation.page-nav
   (:require [clojure.string :as string]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]

src/quo2/components/notifications/activity_log/view.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.notifications.activity-log.view
   (:require [clojure.string :as string]
             [quo.core :as quo]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.components.notifications.activity-log.style :as style]
@@ -150,8 +150,8 @@
          [activity-reply-text-input props reply-input])
        (when items
          [rn/view style/footer-container
-          (for [{:keys [key] :as item} items]
-            ^{:key key}
+          (for [item items]
+            ^{:key (:key item)}
             [footer-item-view item replying? reply-input])])])))
 
 (defn view

src/quo2/components/notifications/count_down_circle.cljs

@@ -30,10 +30,10 @@
      :path-length path-length}))
 
 (defn- linear-ease
-  [time start goal duration]
+  [input-time start goal duration]
   (if (zero? duration)
     start
-    (-> time
+    (-> input-time
         (/ duration)
         (* goal)
         (+ start))))

src/quo2/components/notifications/info_count.cljs

@@ -4,10 +4,10 @@
             [react-native.core :as rn]))
 
 (defn info-count
-  ([count]
-   (info-count {} count))
-  ([props count]
-   (when (> count 0)
+  ([amount]
+   (info-count {} amount))
+  ([props amount]
+   (when (> amount 0)
      [rn/view
       (merge props
              {:style (merge {:width            16
@@ -23,4 +23,4 @@
        {:style (merge typography/font-medium
                       typography/label
                       {:color colors/white :text-align :center})}
-       count]])))
+       amount]])))

src/quo2/components/notifications/notification/style.cljs

@@ -18,10 +18,10 @@
    :background-color :transparent})
 
 (defn content-container
-  [override-theme]
+  [theme]
   (merge
-   (:shadow-1 shadows/normal-scale)
-   {:background-color   (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+   (shadows/get 1 theme)
+   {:background-color   (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
     :flex-direction     :row
     :padding-vertical   8
     :padding-horizontal 12}))

src/quo2/components/notifications/toast/style.cljs

@@ -18,10 +18,10 @@
    :background-color :transparent})
 
 (defn content-container
-  [override-theme]
+  [theme]
   (merge
-   (:shadow-1 shadows/normal-scale)
-   {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+   (shadows/get 1 theme)
+   {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
     :flex-direction   :row
     :justify-content  :space-between
     :padding-vertical 8

src/quo2/components/profile/profile_card/view.cljs

@@ -6,7 +6,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.hole-view :as hole-view]
             [quo2.components.markdown.text :as text]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.profile.profile-card.style :as style]
             [quo2.components.avatars.user-avatar.view :as user-avatar]))
 
@@ -54,7 +54,6 @@
         [user-avatar/user-avatar
          {:full-name           name
           :profile-picture     profile-picture
-          :override-theme      :dark
           :size                :medium
           :status-indicator?   false
           :customization-color customization-color
@@ -66,7 +65,7 @@
              :size                32
              :blurred?            true
              :labelled?           true
-             :resource            :main-icons2/check
+             :resource            :i/check
              :accessibility-label :logged-in-tag
              :icon-color          colors/success-50
              :override-theme      :dark
@@ -76,7 +75,6 @@
             {:size                32
              :type                :blur-bg
              :icon                true
-             :override-theme      :dark
              :style               style/option-button
              :on-press            on-options-press
              :accessibility-label :profile-card-options}

src/quo2/components/record_audio/record_audio/buttons/record_button.cljs

@@ -4,7 +4,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn :refer [use-effect]]
             [react-native.reanimated :as reanimated]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.record-audio.record-audio.helpers :as helpers]))
 
 (defn f-record-button

src/quo2/components/settings/accounts/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.settings.accounts.view
   (:require [quo2.components.avatars.account-avatar :as account-avatar]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
             [quo2.components.settings.accounts.style :as style]
             [react-native.core :as rn]))

src/quo2/components/settings/category/component_spec.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.settings.category.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.settings.category.view :as category]))
+
+(h/describe "category tests"
+  (h/test "category label renders"
+    (h/render [category/category
+               {:label "label"
+                :data  [{:title     "Item 1"
+                         :left-icon :i/browser
+                         :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "label")))
+
+  (h/test "category item renders"
+    (h/render [category/category
+               {:label "label"
+                :data  [{:title     "Item 1"
+                         :left-icon :i/browser
+                         :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "Item 1"))))

src/quo2/components/settings/category/style.cljs

@@ -0,0 +1,44 @@
+(ns quo2.components.settings.category.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:left               0
+   :right              0
+   :padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     8})
+
+(defn items
+  [theme blur?]
+  {:margin-top       12
+   :border-radius    16
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/white colors/neutral-95 theme))
+   :border-width     1
+   :border-color     (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn separator
+  [theme blur?]
+  {:height           1
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn blur-container
+  []
+  {:position :absolute
+   :left     0
+   :right    0
+   :bottom   0
+   :top      0
+   :overflow :hidden})
+
+(defn blur-view
+  []
+  {:style       {:flex 1}
+   :blur-radius 10
+   :blur-type   (colors/theme-colors :light :dark)
+   :blur-amount 20})

src/quo2/components/settings/category/view.cljs

@@ -0,0 +1,27 @@
+(ns quo2.components.settings.category.view
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.components.settings.settings-list.view :as settings-list]
+    [quo2.foundations.colors :as colors]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [quo2.components.settings.category.style :as style]
+    [quo2.theme :as quo.theme]))
+
+(defn- category-internal
+  [{:keys [label data blur? theme]}]
+  [rn/view {:style style/container}
+   (when blur?
+     [rn/view (style/blur-container) [blur/view (style/blur-view)]])
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+    label]
+   [rn/flat-list
+    {:data      data
+     :style     (style/items theme blur?)
+     :render-fn (fn [item] [settings-list/settings-list item])
+     :separator [rn/view {:style (style/separator theme blur?)}]}]])
+
+(def category (quo.theme/with-theme category-internal))

src/quo2/components/settings/settings_list/view.cljs

@@ -2,7 +2,7 @@
   (:require [quo2.components.settings.settings-list.style :as style]
             [quo2.components.icon :as icons]
             [quo2.components.selectors.selectors.view :as selectors]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
             [quo2.components.tags.status-tags :as status-tag]
             [quo2.foundations.colors :as colors]

src/quo2/components/share/share_qr_code/view.cljs

@@ -4,7 +4,7 @@
             [react-native.blur :as blur]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
             [react-native.core :as rn]))
 
 (defn view

src/quo2/components/tabs/account_selector.cljs

@@ -41,8 +41,8 @@
    :margin-right     8})
 
 (defn get-color-by-type
-  [type key]
-  (get-in themes [(theme/get-theme) type key]))
+  [type k]
+  (get-in themes [(theme/get-theme) type k]))
 
 (defn account-selector
   "[account-selector opts]
@@ -73,4 +73,3 @@
         :size   :paragraph-1
         :style  {:color account-text-color}}
        account-text]]]))
-

src/quo2/components/tags/permission_tag.cljs

@@ -132,13 +132,14 @@
 
 (defn tag
   [_ _]
-  (fn [{:keys [locked? tokens size background-color on-press]
+  (fn [{:keys [locked? tokens size background-color on-press accessibility-label]
         :or   {size 24}}]
     [base-tag/base-tag
-     {:background-color background-color
-      :size             size
-      :type             :permission
-      :on-press         on-press}
+     {:accessibility-label accessibility-label
+      :background-color    background-color
+      :size                size
+      :type                :permission
+      :on-press            on-press}
      [rn/view
       {:flex-direction  :row
        :align-items     :center

src/quo2/core.cljs

@@ -2,21 +2,24 @@
   (:refer-clojure :exclude [filter])
   (:require
     quo2.components.avatars.account-avatar
-    quo2.components.avatars.channel-avatar
+    quo2.components.avatars.channel-avatar.view
     quo2.components.avatars.group-avatar
     quo2.components.avatars.icon-avatar
     quo2.components.avatars.user-avatar.view
     quo2.components.avatars.wallet-user-avatar
     quo2.components.banners.banner.view
-    quo2.components.buttons.button
+    quo2.components.buttons.button.view
     quo2.components.buttons.dynamic-button
     quo2.components.buttons.predictive-keyboard.view
     quo2.components.buttons.slide-button.view
+    quo2.components.code.snippet
     quo2.components.colors.color-picker.view
+    quo2.components.common.separator.view
+    quo2.components.community.banner.view
+    quo2.components.community.channel-actions
     quo2.components.community.community-card-view
     quo2.components.community.community-list-view
     quo2.components.community.community-view
-    quo2.components.community.banner.view
     quo2.components.community.icon
     quo2.components.community.token-gating
     quo2.components.counter.counter
@@ -30,8 +33,8 @@
     quo2.components.drawers.drawer-buttons.view
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
-    quo2.components.header
     quo2.components.empty-state.empty-state.view
+    quo2.components.header
     quo2.components.icon
     quo2.components.info.info-message
     quo2.components.info.information-box.view
@@ -41,10 +44,11 @@
     quo2.components.inputs.search-input.view
     quo2.components.inputs.title-input.view
     quo2.components.keycard.view
+    quo2.components.links.link-preview.view
     quo2.components.links.url-preview-list.view
     quo2.components.links.url-preview.view
-    quo2.components.links.link-preview.view
     quo2.components.list-items.channel
+    quo2.components.list-items.community.view
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
     quo2.components.list-items.user-list
@@ -68,15 +72,17 @@
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.reactions.reaction
-    quo2.components.selectors.reactions.view
     quo2.components.record-audio.record-audio.view
     quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
     quo2.components.selectors.filter.view
+    quo2.components.selectors.reactions.view
     quo2.components.selectors.selectors.view
-    quo2.components.separator
     quo2.components.settings.accounts.view
     quo2.components.settings.privacy-option
+    quo2.components.settings.reorder-item.view
+    quo2.components.settings.settings-list.view
+    quo2.components.settings.category.view
     quo2.components.share.qr-code.view
     quo2.components.share.share-qr-code.view
     quo2.components.tabs.account-selector
@@ -88,13 +94,10 @@
     quo2.components.tags.tag
     quo2.components.tags.tags
     quo2.components.tags.token-tag
-    quo2.components.text-combinations.title.view
-    quo2.components.settings.settings-list.view
-    quo2.components.settings.reorder-item.view
-    quo2.components.community.channel-actions))
+    quo2.components.text-combinations.title.view))
 
 (def icon quo2.components.icon/icon)
-(def separator quo2.components.separator/separator)
+(def separator quo2.components.common.separator.view/separator)
 (def header quo2.components.header/header)
 (def dropdown quo2.components.dropdowns.dropdown/dropdown)
 (def info-message quo2.components.info.info-message/info-message)
@@ -120,7 +123,7 @@
 
 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
-(def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
+(def channel-avatar quo2.components.avatars.channel-avatar.view/view)
 (def group-avatar quo2.components.avatars.group-avatar/group-avatar)
 (def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
 (def user-avatar quo2.components.avatars.user-avatar.view/user-avatar)
@@ -130,11 +133,14 @@
 (def banner quo2.components.banners.banner.view/banner)
 
 ;;;; BUTTONS
-(def button quo2.components.buttons.button/button)
+(def button quo2.components.buttons.button.view/button)
 (def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
 (def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
 (def slide-button quo2.components.buttons.slide-button.view/view)
 
+;;;; CODE
+(def snippet quo2.components.code.snippet/snippet)
+
 ;;;; CARDS
 (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)
 (def keycard quo2.components.keycard.view/keycard)
@@ -145,7 +151,6 @@
 
 ;;;; COMMUNITY
 (def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
-(def communities-list-view-item quo2.components.community.community-list-view/communities-list-view-item)
 (def communities-membership-list-item
   quo2.components.community.community-list-view/communities-membership-list-item)
 (def community-stats-column quo2.components.community.community-view/community-stats-column)
@@ -189,6 +194,7 @@
 (def menu-item quo2.components.list-items.menu-item/menu-item)
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)
+(def community-list-item quo2.components.list-items.community.view/view)
 
 ;;;; LOADERS
 (def skeleton quo2.components.loaders.skeleton/skeleton)
@@ -226,6 +232,7 @@
 (def account quo2.components.settings.accounts.view/account)
 (def settings-list quo2.components.settings.settings-list.view/settings-list)
 (def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
+(def category quo2.components.settings.category.view/category)
 
 ;;;; SHARE
 (def qr-code quo2.components.share.qr-code.view/qr-code)

src/quo2/core_spec.cljs

@@ -2,7 +2,7 @@
   (:require
     [quo2.components.avatars.user-avatar.component-spec]
     [quo2.components.banners.banner.component-spec]
-    [quo2.components.buttons.--tests--.buttons-component-spec]
+    [quo2.components.buttons.button.component-spec]
     [quo2.components.buttons.predictive-keyboard.component-spec]
     [quo2.components.buttons.slide-button.component-spec]
     [quo2.components.colors.color-picker.component-spec]
@@ -22,6 +22,7 @@
     [quo2.components.links.link-preview.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
+    [quo2.components.list-items.community.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
     [quo2.components.markdown.list.component-spec]
     [quo2.components.notifications.notification.component-spec]
@@ -36,5 +37,6 @@
     [quo2.components.selectors.selectors.component-spec]
     [quo2.components.settings.reorder-item.component-spec]
     [quo2.components.settings.settings-list.component-spec]
+    [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/quo2/foundations/colors.cljs

@@ -88,6 +88,7 @@
 (def neutral-100-opa-5 (alpha neutral-100 0.05))
 (def neutral-100-opa-10 (alpha neutral-100 0.1))
 (def neutral-100-opa-30 (alpha neutral-100 0.3))
+(def neutral-100-opa-50 (alpha neutral-100 0.5))
 (def neutral-100-opa-60 (alpha neutral-100 0.6))
 (def neutral-100-opa-70 (alpha neutral-100 0.7))
 (def neutral-100-opa-80 (alpha neutral-100 0.8))
@@ -245,7 +246,8 @@
      ([color suffix opacity]
       (let [color-keyword (keyword color)
             base-color    (get-in colors-map
-                                  [color-keyword suffix])]
+                                  [color-keyword suffix]
+                                  color)]
         (if opacity (alpha base-color (/ opacity 100)) base-color))))))
 
 (defn custom-color-by-theme

src/quo2/foundations/shadows.cljs

@@ -1,66 +1,77 @@
 (ns quo2.foundations.shadows
+  (:refer-clojure :exclude [get])
   (:require [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))
 
-(defn- get-inverted
-  [inverted? number]
-  (if inverted? (* -1 number) number))
+(def ^:private shadows
+  (let [dark-normal           {1 {:shadow-color   (colors/alpha colors/neutral-100 0.5)
+                                  :shadow-offset  {:width 0 :height 4}
+                                  :elevation      3
+                                  :shadow-opacity 1
+                                  :shadow-radius  20}
+                               2 {:shadow-color   (colors/alpha colors/neutral-100 0.64)
+                                  :shadow-offset  {:width 0 :height 4}
+                                  :elevation      4
+                                  :shadow-opacity 1
+                                  :shadow-radius  20}
+                               3 {:shadow-color   (colors/alpha colors/neutral-100 0.64)
+                                  :shadow-offset  {:width 0 :height 12}
+                                  :elevation      8
+                                  :shadow-opacity 1
+                                  :shadow-radius  20}
+                               4 {:shadow-color   (colors/alpha colors/neutral-100 0.72)
+                                  :shadow-offset  {:width 0 :height 16}
+                                  :shadow-opacity 1
+                                  :shadow-radius  20
+                                  :elevation      15}}
+        dark-normal-inverted  (-> dark-normal
+                                  (update-in [:soft :shadow-offset :height] -)
+                                  (update-in [:medium :shadow-offset :height] -)
+                                  (update-in [:intense :shadow-offset :height] -)
+                                  (update-in [:strong :shadow-offset :height] -))
+        light-normal          {1 {:shadow-color   (colors/alpha colors/neutral-100 0.04)
+                                  :shadow-offset  {:width 0 :height 4}
+                                  :elevation      1
+                                  :shadow-opacity 1
+                                  :shadow-radius  16}
+                               2 {:shadow-color   (colors/alpha colors/neutral-100 0.08)
+                                  :shadow-offset  {:width 0 :height 4}
+                                  :elevation      2
+                                  :shadow-opacity 1
+                                  :shadow-radius  16}
+                               3 {:shadow-color   (colors/alpha colors/neutral-100 0.12)
+                                  :shadow-offset  {:width 0 :height 12}
+                                  :elevation      5
+                                  :shadow-opacity 1
+                                  :shadow-radius  16}
+                               4 {:shadow-color   (colors/alpha colors/neutral-100 0.16)
+                                  :shadow-offset  {:width 0 :height 16}
+                                  :shadow-opacity 1
+                                  :shadow-radius  16
+                                  :elevation      13}}
+        light-normal-inverted (-> light-normal
+                                  (update-in [:soft :shadow-offset :height] -)
+                                  (update-in [:medium :shadow-offset :height] -)
+                                  (update-in [:intense :shadow-offset :height] -)
+                                  (update-in [:strong :shadow-offset :height] -))]
+    {:dark  {:normal dark-normal :inverted dark-normal-inverted}
+     :light {:normal light-normal :inverted light-normal-inverted}}))
 
-(defn- get-scales
-  [inverted?]
-  (if (theme/dark?)
-    {:shadow-1 {:shadow-color   (colors/alpha colors/neutral-100 0.5)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 4)}
-                :elevation      3
-                :shadow-opacity 1
-                :shadow-radius  20}
-     :shadow-2 {:shadow-color   (colors/alpha colors/neutral-100 0.64)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 4)}
-                :elevation      4
-                :shadow-opacity 1
-                :shadow-radius  20}
-     :shadow-3 {:shadow-color   (colors/alpha colors/neutral-100 0.64)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 12)}
-                :elevation      8
-                :shadow-opacity 1
-                :shadow-radius  20}
-     :shadow-4 {:shadow-color   (colors/alpha colors/neutral-100 0.72)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 16)}
-                :shadow-opacity 1
-                :shadow-radius  20
-                :elevation      15}}
-    {:shadow-1 {:shadow-color   (colors/alpha colors/neutral-100 0.04)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 4)}
-                :elevation      1
-                :shadow-opacity 1
-                :shadow-radius  16}
-     :shadow-2 {:shadow-color   (colors/alpha colors/neutral-100 0.08)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 4)}
-                :elevation      2
-                :shadow-opacity 1
-                :shadow-radius  16}
-     :shadow-3 {:shadow-color   (colors/alpha colors/neutral-100 0.12)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 12)}
-                :elevation      5
-                :shadow-opacity 1
-                :shadow-radius  16}
-     :shadow-4 {:shadow-color   (colors/alpha colors/neutral-100 0.16)
-                :shadow-offset  {:width  0
-                                 :height (get-inverted inverted? 16)}
-                :shadow-opacity 1
-                :shadow-radius  16
-                :elevation      13}}))
+(defn get
+  "Get the appropriate shadow map for a given shadow `weight`, `theme`, and `scale-type`.
 
-(def normal-scale (get-scales false))
+  Return nil if no shadow is found.
 
-(def inverted-scale (get-scales true))
+  `weight` - int (required) from 1 to 4.
+  `theme` - :light/:dark (optional).
+  `scale-type` - :normal/:inverted (optional).
+  "
+  ([weight]
+   (get weight (quo.theme/get-theme)))
+  ([weight theme]
+   (get weight theme :normal))
+  ([weight theme scale-type]
+   (get-in shadows [theme scale-type weight])))
 
 (def inner-shadow
   {:shadow-color   (colors/alpha colors/neutral-100 0.08)

src/react_native/core.cljs

@@ -21,6 +21,7 @@
 (def text (reagent/adapt-react-class (.-Text ^js react-native)))
 (def text-input (reagent/adapt-react-class (.-TextInput ^js react-native)))
 
+(def pressable (reagent/adapt-react-class (.-Pressable ^js react-native)))
 (def touchable-opacity (reagent/adapt-react-class (.-TouchableOpacity ^js react-native)))
 (def touchable-highlight (reagent/adapt-react-class (.-TouchableHighlight ^js react-native)))
 (def touchable-without-feedback

src/react_native/gesture.cljs

@@ -33,7 +33,7 @@
 
 (defn on-finalize [gesture handler] (.onFinalize ^js gesture handler))
 
-(defn max-pointers [gesture count] (.maxPointers ^js gesture count))
+(defn max-pointers [gesture amount] (.maxPointers ^js gesture amount))
 
 (defn min-distance [gesture dist] (.minDistance ^js gesture dist))
 
@@ -41,7 +41,7 @@
 
 (defn hit-slop [gesture settings] (.hitSlop ^js gesture settings))
 
-(defn number-of-taps [gesture count] (.numberOfTaps ^js gesture count))
+(defn number-of-taps [gesture amount] (.numberOfTaps ^js gesture amount))
 
 (defn enabled [gesture enabled?] (.enabled ^js gesture enabled?))
 

src/react_native/keychain.cljs

@@ -0,0 +1,78 @@
+(ns react-native.keychain
+  (:require ["react-native-keychain" :as react-native-keychain]
+            [clojure.string :as string]
+            [taoensso.timbre :as log]))
+
+;; ********************************************************************************
+;; Storing / Retrieving a user password to/from Keychain
+;; ********************************************************************************
+;;
+;; We are using set/get/reset internet credentials there because they are bound
+;; to an address (`server`) property.
+
+(defn enum-val
+  [enum-name value-name]
+  (get-in (js->clj ^js react-native-keychain) [enum-name value-name]))
+
+;; We need a more strict access mode for keychain entries that save user password.
+;; iOS
+;;   see this article for more details:
+;;   https://developer.apple.com/documentation/security/keychain_services/keychain_items/restricting_keychain_item_accessibility?language=objc
+(def keychain-restricted-availability
+  ;; From Apple's documentation:
+  ;; > The kSecAttrAccessible attribute enables you to control item availability
+  ;; > relative to the lock state of the device.
+  ;; > It also lets you specify eligibility for restoration to a new device.
+  ;; > If the attribute ends with the string ThisDeviceOnly,
+  ;; > the item can be restored to the same device that created a backup,
+  ;; > but it isn’t migrated when restoring another device’s backup data.
+  ;; > ...
+  ;; > For extremely sensitive data
+  ;; > THAT YOU NEVER WANT STORED IN iCloud,
+  ;; > you might choose kSecAttrAccessibleWhenPasscodeSetThisDeviceOnly.
+  ;; That is exactly what we use there.
+  ;; Note that the password won't be stored if the device isn't locked by a passcode.
+  #js {:accessible (enum-val "ACCESSIBLE" "WHEN_PASSCODE_SET_THIS_DEVICE_ONLY")})
+
+(def keychain-secure-hardware
+  ;; (Android) Requires storing the encryption key for the entry in secure hardware
+  ;; or StrongBox (see https://developer.android.com/training/articles/keystore#ExtractionPrevention)
+  "SECURE_HARDWARE")
+
+;; Android only
+(defn secure-hardware-available?
+  [callback]
+  (-> (.getSecurityLevel ^js react-native-keychain)
+      (.then (fn [level] (callback (= level keychain-secure-hardware))))))
+
+;; iOS only
+(defn device-encrypted?
+  [callback]
+  (-> (.canImplyAuthentication
+       ^js react-native-keychain
+       (clj->js
+        {:authenticationType
+         (enum-val "ACCESS_CONTROL" "BIOMETRY_ANY_OR_DEVICE_PASSCODE")}))
+      (.then callback)))
+
+(defn save-credentials
+  "Stores the credentials for the address to the Keychain"
+  [server username password callback]
+  (-> (.setInternetCredentials ^js react-native-keychain
+                               (string/lower-case server)
+                               username
+                               password
+                               keychain-secure-hardware
+                               keychain-restricted-availability)
+      (.then callback)))
+
+(defn get-credentials
+  "Gets the credentials for a specified server from the Keychain"
+  [server callback]
+  (-> (.getInternetCredentials ^js react-native-keychain (string/lower-case server))
+      (.then callback)))
+
+(defn reset-credentials
+  [server]
+  (-> (.resetInternetCredentials ^js react-native-keychain (string/lower-case server))
+      (.then #(when-not % (log/error (str "Error while clearing saved password."))))))

src/react_native/touch_id.cljs

@@ -0,0 +1,19 @@
+(ns react-native.touch-id
+  (:require ["react-native-touch-id" :default touchid]))
+
+;; currently, for android, react-native-touch-id
+;; is not returning supported biometric type
+;; defaulting to :fingerprint
+(def android-default-support :fingerprint)
+
+(defn get-supported-type
+  [callback]
+  (-> (.isSupported ^js touchid)
+      (.then #(callback (or (keyword %) android-default-support)))
+      (.catch #(callback nil))))
+
+(defn authenticate
+  [{:keys [on-success on-fail reason options]}]
+  (-> (.authenticate ^js touchid reason (clj->js options))
+      (.then #(when on-success (on-success)))
+      (.catch #(when on-fail (on-fail (aget % "code"))))))

src/status_im/async_storage/core.cljs

@@ -10,9 +10,9 @@
 (def key->string str)
 
 (defn set-item!
-  [key value]
+  [k value]
   (-> ^js async-storage
-      (.setItem (key->string key)
+      (.setItem (key->string k)
                 (clj->transit value))
       (.catch (fn [error]
                 (log/error "[async-storage]" error)))))

src/status_im/browser/core.cljs

@@ -619,3 +619,40 @@
                                   bookmarks)
         stored-bookmarks  (get-in db [:bookmarks/bookmarks])]
     {:db (assoc-in db [:bookmarks/bookmarks] (merge stored-bookmarks changed-bookmarks))}))
+
+(rf/defn initialize-dapp-permissions
+  {:events [::initialize-dapp-permissions]}
+  [{:keys [db]} all-dapp-permissions]
+  (let [dapp-permissions (reduce (fn [acc {:keys [dapp] :as dapp-permissions}]
+                                   (assoc acc dapp dapp-permissions))
+                                 {}
+                                 all-dapp-permissions)]
+    {:db (assoc db :dapps/permissions dapp-permissions)}))
+
+(rf/defn initialize-browsers
+  {:events [::initialize-browsers]}
+  [{:keys [db]} all-stored-browsers]
+  (let [browsers (reduce (fn [acc {:keys [browser-id] :as browser}]
+                           (assoc acc browser-id browser))
+                         {}
+                         all-stored-browsers)]
+    {:db (assoc db :browser/browsers browsers)}))
+
+(rf/defn initialize-bookmarks
+  {:events [::initialize-bookmarks]}
+  [{:keys [db]} stored-bookmarks]
+  (let [bookmarks (reduce (fn [acc {:keys [url] :as bookmark}]
+                            (assoc acc url bookmark))
+                          {}
+                          stored-bookmarks)]
+    {:db (assoc db :bookmarks/bookmarks bookmarks)}))
+
+(rf/defn initialize-browser
+  [_]
+  {:json-rpc/call
+   [{:method     "wakuext_getBrowsers"
+     :on-success #(re-frame/dispatch [::initialize-browsers %])}
+    {:method     "browsers_getBookmarks"
+     :on-success #(re-frame/dispatch [::initialize-bookmarks %])}
+    {:method     "permissions_getDappPermissions"
+     :on-success #(re-frame/dispatch [::initialize-dapp-permissions %])}]})

src/status_im/chat/models/input.cljs

@@ -167,14 +167,16 @@
         {:keys [message-id]} (get-in db [:chat/inputs chat-id :metadata :responding-to-message])
         album-id             (str (random-uuid))]
     (mapv (fn [[_ {:keys [resized-uri width height]}]]
-            {:chat-id      chat-id
-             :album-id     album-id
-             :content-type constants/content-type-image
-             :image-path   (utils.string/safe-replace resized-uri #"file://" "")
-             :image-width  width
-             :image-height height
-             :text         input-text
-             :response-to  message-id})
+            {:chat-id       chat-id
+             :album-id      album-id
+             :content-type  constants/content-type-image
+             :image-path    (utils.string/safe-replace resized-uri #"file://" "")
+             :image-width   width
+             :image-height  height
+             :text          input-text
+             :link-previews (map #(select-keys % [:url :title :description :thumbnail])
+                                 (get-in db [:chat/link-previews :unfurled]))
+             :response-to   message-id})
           images)))
 
 (rf/defn clean-input

src/status_im/communities/core.cljs

@@ -3,6 +3,7 @@
             [clojure.string :as string]
             [clojure.walk :as walk]
             [quo.design-system.colors :as colors]
+            [quo2.foundations.colors :as quo2.colors]
             [re-frame.core :as re-frame]
             [status-im.utils.types :as types]
             [status-im.async-storage.core :as async-storage]
@@ -16,6 +17,7 @@
             [taoensso.timbre :as log]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
+            [status-im2.common.muting.helpers :refer [format-mute-till]]
             [status-im2.contexts.chat.events :as chat.events]))
 
 (def crop-size 1000)
@@ -72,7 +74,8 @@
                         :isMember                    :is-member?
                         :adminSettings               :admin-settings
                         :tokenPermissions            :token-permissions
-                        :communityTokensMetadata     :tokens-metadata})
+                        :communityTokensMetadata     :tokens-metadata
+                        :muteTill                    :muted-till})
       (update :admin-settings
               set/rename-keys
               {:pinMessageAllMembersEnabled :pin-message-all-members-enabled?})
@@ -284,9 +287,10 @@
                                     :params      [community-id]
                                     :js-response true
                                     :on-success  #(re-frame/dispatch [::left %])
-                                    :on-error    (fn []
+                                    :on-error    (fn [response]
                                                    (log/error "failed to leave community"
-                                                              community-id)
+                                                              community-id
+                                                              response)
                                                    (re-frame/dispatch [::failed-to-leave]))}]}))
 
 (rf/defn status-tag-pressed
@@ -833,12 +837,17 @@
                           :cb   #(re-frame/dispatch
                                   [::category-states-loaded community-id hashes %])}}))
 
+;; Note - dispatch is used to make sure we are opening community once `pop-to-root` is processed.
+;; Don't directly merge effects using `navigation/navigate-to`, because it will work in debug and
+;; release, but for e2e `pop-to-root` closes even currently opened community
+;; https://github.com/status-im/status-mobile/pull/16438#issuecomment-1623954774
 (rf/defn navigate-to-community
   {:events [:communities/navigate-to-community]}
   [cofx community-id]
-  (rf/merge cofx
-            (navigation/pop-to-root :shell-stack)
-            (navigation/navigate-to :community-overview community-id)))
+  (rf/merge
+   cofx
+   {:dispatch [:navigate-to :community-overview community-id]}
+   (navigation/pop-to-root :shell-stack)))
 
 (rf/defn member-role-updated
   {:events [:community.member/role-updated]}
@@ -932,3 +941,58 @@
                                    {:error %
                                     :event
                                     :communities/check-and-delete-pending-request-to-join-community})}]})
+
+(rf/defn mute-community-chats
+  {:events [:community/mute-community-chats]}
+  [{:keys [db]} chat-id muted? muted-till]
+  (log/debug "muted community chat successfully" chat-id muted?)
+  {:db (update-in db [:chats chat-id] merge {:muted muted? :muted-till muted-till})})
+
+(rf/defn mute-and-unmute-community-chats
+  {:events [:community/update-community-chats-mute-status]}
+  [{:keys [db]} community-id muted? mute-till]
+  (let [channels (get-in db [:communities community-id :chats])
+        chats    (mapv vector (keys channels) (vals channels))]
+    (doseq [x chats]
+      (doseq [{:keys [id]} x]
+        (let [chat-id (str community-id id)]
+          (rf/dispatch [:community/mute-community-chats chat-id muted? mute-till]))))))
+
+(rf/defn mute-chat-failed
+  {:events [:community/mute-community-failed]}
+  [{:keys [db]} community-id muted? error]
+  (log/error "mute community failed" community-id error)
+  {:db (update-in db [:communities community-id :muted] (not muted?))}
+  (rf/dispatch [:community/update-community-chats-mute-status community-id muted? error]))
+
+(rf/defn mute-community-successfully
+  {:events [:community/mute-community-successful]}
+  [{:keys [db]} community-id muted? muted-till]
+  (log/debug "muted community successfully" community-id muted-till)
+  (rf/dispatch [:community/update-community-chats-mute-status community-id muted? muted-till])
+  (let [time-string (fn [mute-title mute-duration]
+                      (i18n/label mute-title {:duration mute-duration}))]
+    {:db       (assoc-in db [:communities community-id :muted-till] muted-till)
+     :dispatch [:toasts/upsert
+                {:icon       :correct
+                 :icon-color (quo2.colors/theme-colors
+                              quo2.colors/success-60
+                              quo2.colors/success-50)
+                 :text       (if muted?
+                               (when (some? muted-till)
+                                 (time-string :t/muted-until (format-mute-till muted-till)))
+                               (i18n/label :t/community-unmuted))}]}))
+
+
+(rf/defn set-community-muted
+  {:events [:community/set-muted]}
+  [{:keys [db]} community-id muted? muted-type]
+  (let [params (if muted? [{:communityId community-id :mutedType muted-type}] [community-id])
+        method (if muted? "wakuext_muteCommunityChats" "wakuext_unMuteCommunityChats")]
+    {:db            (assoc-in db [:communities community-id :muted] muted?)
+     :json-rpc/call [{:method     method
+                      :params     params
+                      :on-error   #(rf/dispatch [:community/mute-community-failed community-id
+                                                 muted? %])
+                      :on-success #(rf/dispatch [:community/mute-community-successful
+                                                 community-id muted? %])}]}))

src/status_im/data_store/chats.cljs

@@ -109,7 +109,7 @@
       rpc->type
       unmarshal-members))
 
-(rf/defn fetch-chats-rpc
+(rf/defn fetch-chats-preview
   [_ {:keys [on-success]}]
   {:json-rpc/call [{:method      "wakuext_chatsPreview"
                     :params      []

src/status_im/data_store/settings.cljs

@@ -1,7 +1,8 @@
 (ns status-im.data-store.settings
   (:require [status-im.data-store.visibility-status-updates :as visibility-status-updates]
             [status-im.ethereum.eip55 :as eip55]
-            [status-im2.config :as config]))
+            [status-im2.config :as config]
+            [clojure.set :as set]))
 
 (defn rpc->networks
   [networks]
@@ -33,27 +34,19 @@
              {}
              custom-bootnodes))
 
-(defn rpc->stickers-packs
-  [stickers-packs]
-  (reduce-kv (fn [acc pack-id stickers-pack]
-               (assoc acc (js/parseInt (name pack-id)) stickers-pack))
-             {}
-             stickers-packs))
-
 (defn rpc->settings
   [settings]
   (-> settings
       (update :dapps-address eip55/address->checksum)
       (update :address eip55/address->checksum)
       (update :networks/networks rpc->networks)
-      (update :networks/current-network
-              #(if (seq %)
-                 %
-                 config/default-network))
+      (update :networks/current-network #(if (seq %) % config/default-network))
       (update :wallet/visible-tokens rpc->visible-tokens)
       (update :pinned-mailservers rpc->pinned-mailservers)
       (update :link-previews-enabled-sites set)
       (update :custom-bootnodes rpc->custom-bootnodes)
       (update :custom-bootnodes-enabled? rpc->custom-bootnodes)
       (update :currency keyword)
-      (visibility-status-updates/<-rpc-settings)))
+      (visibility-status-updates/<-rpc-settings)
+      (set/rename-keys {:compressedKey :compressed-key
+                        :emojiHash     :emoji-hash})))

src/status_im/ethereum/decode.cljs

@@ -1,5 +1,5 @@
 (ns status-im.ethereum.decode
-  (:require [status-im.utils.money :as money]))
+  (:require [utils.money :as money]))
 
 (defn uint
   [hex]

src/status_im/ethereum/eip681.cljs

@@ -8,7 +8,7 @@
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.ens :as ens]
             [status-im.ethereum.tokens :as tokens]
-            [status-im.utils.money :as money]))
+            [utils.money :as money]))
 
 (def scheme "ethereum")
 (def scheme-separator ":")

src/status_im/ethereum/eip681_test.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ethereum.eip681-test
   (:require [cljs.test :refer-macros [deftest is] :as test]
             [status-im.ethereum.eip681 :as eip681]
-            [status-im.utils.money :as money]))
+            [utils.money :as money]))
 
 (deftest parse-uri
   (is (= nil (eip681/parse-uri nil)))

src/status_im/events.cljs

@@ -23,7 +23,6 @@
     status-im.log-level.core
     status-im.mailserver.constants
     [status-im.mailserver.core :as mailserver]
-    [status-im.multiaccounts.biometric.core :as biometric]
     status-im.multiaccounts.login.core
     status-im.multiaccounts.logout.core
     [status-im.multiaccounts.model :as multiaccounts.model]
@@ -63,7 +62,8 @@
     [react-native.platform :as platform]
     status-im2.contexts.chat.home.events
     status-im2.contexts.communities.home.events
-    status-im.ui.components.invite.events))
+    status-im.ui.components.invite.events
+    [status-im2.common.biometric.events :as biometric]))
 
 (re-frame/reg-fx
  :dismiss-keyboard
@@ -124,33 +124,26 @@
        [(get-in db [:profile/profile :appearance])
         (:view-id db) true]})))
 
-(def authentication-options
-  {:reason (i18n/label :t/biometric-auth-reason-login)})
-
-(defn- on-biometric-auth-result
-  [{:keys [bioauth-success bioauth-code bioauth-message]}]
-  (when-not bioauth-success
-    (if (= bioauth-code "USER_FALLBACK")
-      (re-frame/dispatch [:multiaccounts.logout.ui/logout-confirmed])
-      (utils/show-confirmation
-       {:title               (i18n/label :t/biometric-auth-confirm-title)
-        :content             (or bioauth-message (i18n/label :t/biometric-auth-confirm-message))
-        :confirm-button-text (i18n/label :t/biometric-auth-confirm-try-again)
-        :cancel-button-text  (i18n/label :t/biometric-auth-confirm-logout)
-        :on-accept           #(biometric/authenticate nil
-                                                      on-biometric-auth-result
-                                                      authentication-options)
-        :on-cancel           #(re-frame/dispatch [:multiaccounts.logout.ui/logout-confirmed])}))))
+(defn- on-biometric-auth-fail
+  [{:keys [code]}]
+  (if (= code "USER_FALLBACK")
+    (re-frame/dispatch [:multiaccounts.logout.ui/logout-confirmed])
+    (utils/show-confirmation
+     {:title               (i18n/label :t/biometric-auth-confirm-title)
+      :content             (i18n/label :t/biometric-auth-confirm-message)
+      :confirm-button-text (i18n/label :t/biometric-auth-confirm-try-again)
+      :cancel-button-text  (i18n/label :t/biometric-auth-confirm-logout)
+      :on-accept           #(biometric/authenticate nil {:on-fail on-biometric-auth-fail})
+      :on-cancel           #(re-frame/dispatch [:multiaccounts.logout.ui/logout-confirmed])})))
 
 (rf/defn on-return-from-background
   [{:keys [db now] :as cofx}]
   (let [new-account?            (get db :onboarding-2/new-account?)
         app-in-background-since (get db :app-in-background-since)
         signed-up?              (get-in db [:profile/profile :signed-up?])
-        biometric-auth?         (= (:auth-method db) "biometric")
         requires-bio-auth       (and
                                  signed-up?
-                                 biometric-auth?
+                                 (= (:auth-method db) "biometric")
                                  (some? app-in-background-since)
                                  (>= (- now app-in-background-since)
                                      constants/ms-in-bg-for-require-bioauth))]
@@ -163,7 +156,7 @@
               #(when-let [chat-id (:current-chat-id db)]
                  {:dispatch [:chat/mark-all-as-read chat-id]})
               #(when requires-bio-auth
-                 (biometric/authenticate % on-biometric-auth-result authentication-options)))))
+                 (biometric/authenticate % {:on-fail on-biometric-auth-fail})))))
 
 (rf/defn on-going-in-background
   [{:keys [db now]}]
@@ -205,16 +198,8 @@
                                      :key-uid (get-in cofx [:db :profile/profile :key-uid])}
                :db                  (assoc db :screens/was-focused-once? true)}
 
-              (= :login view-id)
-              {}
-
               (not (get db :screens/was-focused-once?))
-              {:db (assoc db :screens/was-focused-once? true)}
-
-              :else
-              {::async-storage/set! {:chat-id nil
-                                     :key-uid nil}
-               :db                  (assoc db :screens/was-focused-once? true)})
+              {:db (assoc db :screens/was-focused-once? true)})
             #(case view-id
                :keycard-settings              (keycard/settings-screen-did-load %)
                :reset-card                    (keycard/reset-card-screen-did-load %)
@@ -274,53 +259,3 @@
    cofx
    (navigation/open-modal :buy-crypto nil)
    (wallet/keep-watching-history)))
-
-;; Information Box
-
-(def closable-information-boxes
-  "[{:id      information box id
-     :global? true/false (close information box across all profiles)}]"
-  [])
-
-(defn information-box-id-hash
-  [id public-key global?]
-  (if global?
-    (hash id)
-    (hash (str public-key id))))
-
-(rf/defn close-information-box
-  {:events [:close-information-box]}
-  [{:keys [db]} id global?]
-  (let [public-key (get-in db [:profile/profile :public-key])
-        hash       (information-box-id-hash id public-key global?)]
-    {::async-storage/set! {hash true}
-     :db                  (assoc-in db [:information-box-states id] true)}))
-
-(rf/defn information-box-states-loaded
-  {:events [:information-box-states-loaded]}
-  [{:keys [db]} hashes states]
-  {:db (assoc db
-              :information-box-states
-              (reduce
-               (fn [acc [id hash]]
-                 (assoc acc id (get states hash)))
-               {}
-               hashes))})
-
-(rf/defn load-information-box-states
-  {:events [:load-information-box-states]}
-  [{:keys [db]}]
-  (let [public-key            (get-in db [:profile/profile :public-key])
-        {:keys [keys hashes]} (reduce (fn [acc {:keys [id global?]}]
-                                        (let [hash (information-box-id-hash
-                                                    id
-                                                    public-key
-                                                    global?)]
-                                          (-> acc
-                                              (assoc-in [:hashes id] hash)
-                                              (update :keys #(conj % hash)))))
-                                      {}
-                                      closable-information-boxes)]
-    {::async-storage/get {:keys keys
-                          :cb   #(re-frame/dispatch
-                                  [:information-box-states-loaded hashes %])}}))

src/status_im/group_chats/core.cljs

@@ -9,7 +9,8 @@
             [status-im2.constants :as constants]
             [status-im2.contexts.shell.activity-center.events :as activity-center]
             [status-im2.navigation.events :as navigation]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im.data-store.invitations :as data-store.invitations]))
 
 (rf/defn navigate-chat-updated
   {:events [:navigate-chat-updated]}
@@ -258,3 +259,19 @@
       :on-accept           #(do
                               (re-frame/dispatch [:bottom-sheet/hide-old])
                               (re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id]))}}))
+
+(rf/defn initialize-invitations
+  {:events [::initialize-invitations]}
+  [{:keys [db]} invitations]
+  {:db (assoc db
+              :group-chat/invitations
+              (reduce (fn [acc {:keys [id] :as inv}]
+                        (assoc acc id (data-store.invitations/<-rpc inv)))
+                      {}
+                      invitations))})
+
+(rf/defn get-group-chat-invitations
+  [_]
+  {:json-rpc/call
+   [{:method     "wakuext_getGroupChatInvitations"
+     :on-success #(re-frame/dispatch [::initialize-invitations %])}]})

src/status_im/integration_test.cljs

@@ -26,13 +26,10 @@
   []
   (rf/dispatch [:app-started]))
 
-(defn generate-and-derive-addresses!
-  []
-  (rf/dispatch [:generate-and-derive-addresses]))
-
 (defn create-multiaccount!
   []
-  (rf/dispatch [:create-multiaccount password]))
+  (rf/dispatch [:profile.create/create-and-login
+                {:display-name account-name :password password :color "blue"}]))
 
 (defn assert-app-initialized
   []
@@ -82,15 +79,12 @@
    (initialize-app!) ; initialize app
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!) ; generate 5 new keys
-     (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success] ; wait for the keys
-       (create-multiaccount!) ; create a multiaccount
-       (rf-test/wait-for ; wait for login
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (logout!)
-         (rf-test/wait-for [::logout/logout-method]))))))
+     (create-multiaccount!) ; create a multiaccount
+     (rf-test/wait-for ; wait for login
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (logout!)
+       (rf-test/wait-for [::logout/logout-method])))))
 
 (deftest create-community-test
   (log/info "====== create-community-test ==================")
@@ -98,22 +92,19 @@
    (initialize-app!) ; initialize app
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!) ; generate 5 new keys
-     (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success]
-       (create-multiaccount!) ; create a multiaccount
-       (rf-test/wait-for ; wait for login
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (rf/dispatch-sync [:legacy-only-for-e2e/open-create-community])
-         (doseq [[k v] (dissoc community :membership)]
-           (rf/dispatch-sync [:status-im.communities.core/create-field k v]))
-         (rf/dispatch [:status-im.communities.core/create-confirmation-pressed])
-         (rf-test/wait-for
-           [:status-im.communities.core/community-created]
-           (assert-community-created)
-           (logout!)
-           (rf-test/wait-for [::logout/logout-method])))))))
+     (create-multiaccount!) ; create a multiaccount
+     (rf-test/wait-for ; wait for login
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (rf/dispatch-sync [:legacy-only-for-e2e/open-create-community])
+       (doseq [[k v] (dissoc community :membership)]
+         (rf/dispatch-sync [:status-im.communities.core/create-field k v]))
+       (rf/dispatch [:status-im.communities.core/create-confirmation-pressed])
+       (rf-test/wait-for
+         [:status-im.communities.core/community-created]
+         (assert-community-created)
+         (logout!)
+         (rf-test/wait-for [::logout/logout-method]))))))
 
 (deftest create-wallet-account-test
   (log/info "====== create-wallet-account-test ==================")
@@ -121,19 +112,16 @@
    (initialize-app!)
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!) ; generate 5 new keys
-     (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success]
-       (create-multiaccount!) ; create a multiaccount
-       (rf-test/wait-for ; wait for login
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (create-new-account!) ; create a new account
-         (rf-test/wait-for
-           [:wallet.accounts/account-stored]
-           (assert-new-account-created) ; assert account was created
-           (logout!)
-           (rf-test/wait-for [::logout/logout-method])))))))
+     (create-multiaccount!) ; create a multiaccount
+     (rf-test/wait-for ; wait for login
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (create-new-account!) ; create a new account
+       (rf-test/wait-for
+         [:wallet.accounts/account-stored]
+         (assert-new-account-created) ; assert account was created
+         (logout!)
+         (rf-test/wait-for [::logout/logout-method]))))))
 
 (deftest back-up-seed-phrase-test
   (log/info "========= back-up-seed-phrase-test ==================")
@@ -141,30 +129,27 @@
    (initialize-app!)
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!)
+     (create-multiaccount!)
      (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success]
-       (create-multiaccount!)
-       (rf-test/wait-for
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (rf/dispatch-sync [:set-in [:my-profile/seed :step] :12-words]) ; display seed phrase to user
-         (rf/dispatch-sync [:my-profile/enter-two-random-words]) ; begin prompting user for seed words
-         (let [{:keys [mnemonic]} @(rf/subscribe [:profile/profile])
-               seed               @(rf/subscribe [:my-profile/seed])
-               word1              (second (:first-word seed))
-               word2              (second (:second-word seed))]
-           (is (= 12 (count (string/split mnemonic #" ")))) ; assert 12-word seed phrase
-           (rf/dispatch-sync [:set-in [:my-profile/seed :word] word1])
-           (rf/dispatch-sync [:my-profile/set-step :second-word])
-           (rf/dispatch-sync [:set-in [:my-profile/seed :word] word2])
-           ;; TODO: refactor (defn next-handler) & (defn enter-word) to improve test coverage?
-           (rf/dispatch [:my-profile/finish])
-           (rf-test/wait-for
-             [:my-profile/finish-success]
-             (is (nil? @(rf/subscribe [:mnemonic]))) ; assert seed phrase has been removed
-             (logout!)
-             (rf-test/wait-for [::logout/logout-method]))))))))
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (rf/dispatch-sync [:set-in [:my-profile/seed :step] :12-words]) ; display seed phrase to user
+       (rf/dispatch-sync [:my-profile/enter-two-random-words]) ; begin prompting user for seed words
+       (let [{:keys [mnemonic]} @(rf/subscribe [:profile/profile])
+             seed               @(rf/subscribe [:my-profile/seed])
+             word1              (second (:first-word seed))
+             word2              (second (:second-word seed))]
+         (is (= 12 (count (string/split mnemonic #" ")))) ; assert 12-word seed phrase
+         (rf/dispatch-sync [:set-in [:my-profile/seed :word] word1])
+         (rf/dispatch-sync [:my-profile/set-step :second-word])
+         (rf/dispatch-sync [:set-in [:my-profile/seed :word] word2])
+         ;; TODO: refactor (defn next-handler) & (defn enter-word) to improve test coverage?
+         (rf/dispatch [:my-profile/finish])
+         (rf-test/wait-for
+           [:my-profile/finish-success]
+           (is (nil? @(rf/subscribe [:mnemonic]))) ; assert seed phrase has been removed
+           (logout!)
+           (rf-test/wait-for [::logout/logout-method])))))))
 
 (def multiaccount-name "Narrow Frail Lemming")
 (def multiaccount-mnemonic
@@ -180,20 +165,17 @@
    (initialize-app!)
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!)
+     (create-multiaccount!)
      (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success] ; wait for the keys
-       (create-multiaccount!)
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
        (rf-test/wait-for
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
-         (rf-test/wait-for
-           [:chat/one-to-one-chat-created]
-           (rf/dispatch-sync [:chat/navigate-to-chat chat-id])
-           (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
-           (logout!)
-           (rf-test/wait-for [::logout/logout-method])))))))
+         [:chat/one-to-one-chat-created]
+         (rf/dispatch-sync [:chat/navigate-to-chat chat-id])
+         (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
+         (logout!)
+         (rf-test/wait-for [::logout/logout-method]))))))
 
 (deftest delete-chat-test
   (log/info "========= delete-chat-test ==================")
@@ -201,23 +183,20 @@
    (initialize-app!)
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!)
+     (create-multiaccount!)
      (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success] ; wait for the keys
-       (create-multiaccount!)
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
        (rf-test/wait-for
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
-         (rf-test/wait-for
-           [:chat/one-to-one-chat-created]
-           (rf/dispatch-sync [:chat/navigate-to-chat chat-id])
-           (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
-           (is @(rf/subscribe [:chats/chat chat-id]))
-           (rf/dispatch-sync [:chat.ui/show-remove-confirmation chat-id])
-           (rf/dispatch-sync [:chat.ui/remove-chat chat-id])
-           (logout!)
-           (rf-test/wait-for [::logout/logout-method])))))))
+         [:chat/one-to-one-chat-created]
+         (rf/dispatch-sync [:chat/navigate-to-chat chat-id])
+         (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
+         (is @(rf/subscribe [:chats/chat chat-id]))
+         (rf/dispatch-sync [:chat.ui/show-remove-confirmation chat-id])
+         (rf/dispatch-sync [:chat.ui/remove-chat chat-id])
+         (logout!)
+         (rf-test/wait-for [::logout/logout-method]))))))
 
 (deftest mute-chat-test
   (log/info "========= mute-chat-test ==================")
@@ -225,29 +204,26 @@
    (initialize-app!)
    (rf-test/wait-for
      [:profile/get-profiles-overview-success]
-     (generate-and-derive-addresses!)
+     (create-multiaccount!)
      (rf-test/wait-for
-       [:multiaccount-generate-and-derive-addresses-success] ; wait for the keys
-       (create-multiaccount!)
+       [::transport/messenger-started]
+       (assert-messenger-started)
+       (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
        (rf-test/wait-for
-         [::transport/messenger-started]
-         (assert-messenger-started)
-         (rf/dispatch-sync [:chat.ui/start-chat chat-id]) ;; start a new chat
+         [:chat/one-to-one-chat-created]
+         (rf/dispatch-sync [:chat/navigate-to-chat chat-id])
+         (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
+         (is @(rf/subscribe [:chats/chat chat-id]))
+         (rf/dispatch-sync [:chat.ui/mute chat-id true constants/mute-till-unmuted])
          (rf-test/wait-for
-           [:chat/one-to-one-chat-created]
-           (rf/dispatch-sync [:chat/navigate-to-chat chat-id])
-           (is (= chat-id @(rf/subscribe [:chats/current-chat-id])))
-           (is @(rf/subscribe [:chats/chat chat-id]))
-           (rf/dispatch-sync [:chat.ui/mute chat-id true constants/mute-till-unmuted])
+           [:chat/mute-successfully]
+           (is @(rf/subscribe [:chats/muted chat-id]))
+           (rf/dispatch-sync [:chat.ui/mute chat-id false])
            (rf-test/wait-for
              [:chat/mute-successfully]
-             (is @(rf/subscribe [:chats/muted chat-id]))
-             (rf/dispatch-sync [:chat.ui/mute chat-id false])
-             (rf-test/wait-for
-               [:chat/mute-successfully]
-               (is (not @(rf/subscribe [:chats/muted chat-id])))
-               (logout!)
-               (rf-test/wait-for [::logout/logout-method])))))))))
+             (is (not @(rf/subscribe [:chats/muted chat-id])))
+             (logout!)
+             (rf-test/wait-for [::logout/logout-method]))))))))
 
 (deftest add-contact-test
   (log/info "========= add-contact-test ==================")
@@ -260,27 +236,24 @@
      (initialize-app!)
      (rf-test/wait-for
        [:profile/get-profiles-overview-success]
-       (generate-and-derive-addresses!)
+       (create-multiaccount!)
        (rf-test/wait-for
-         [:multiaccount-generate-and-derive-addresses-success]
-         (create-multiaccount!)
+         [::transport/messenger-started]
+         (assert-messenger-started)
+         ;; search for contact using compressed key
+         (rf/dispatch [:contacts/set-new-identity compressed-key])
          (rf-test/wait-for
-           [::transport/messenger-started]
-           (assert-messenger-started)
-           ;; search for contact using compressed key
-           (rf/dispatch [:contacts/set-new-identity compressed-key])
+           [:contacts/set-new-identity-success]
+           (let [new-identity @(rf/subscribe [:contacts/new-identity])]
+             (is (= public-key (:public-key new-identity)))
+             (is (= :valid (:state new-identity))))
+           ;; click 'view profile' button
+           (rf/dispatch [:chat.ui/show-profile public-key])
            (rf-test/wait-for
-             [:contacts/set-new-identity-success]
-             (let [new-identity @(rf/subscribe [:contacts/new-identity])]
-               (is (= public-key (:public-key new-identity)))
-               (is (= :valid (:state new-identity))))
-             ;; click 'view profile' button
-             (rf/dispatch [:chat.ui/show-profile public-key])
+             [:contacts/build-contact]
              (rf-test/wait-for
-               [:contacts/build-contact]
-               (rf-test/wait-for
-                 [:contacts/contact-built]
-                 (let [contact @(rf/subscribe [:contacts/current-contact])]
-                   (is (= three-words-name (:primary-name contact))))
-                 (logout!)
-                 (rf-test/wait-for [::logout/logout-method]))))))))))
+               [:contacts/contact-built]
+               (let [contact @(rf/subscribe [:contacts/current-contact])]
+                 (is (= three-words-name (:primary-name contact))))
+               (logout!)
+               (rf-test/wait-for [::logout/logout-method])))))))))

src/status_im/keycard/core.cljs

@@ -14,7 +14,6 @@
             [status-im.keycard.sign :as sign]
             status-im.keycard.unpair
             [status-im.keycard.wallet :as wallet]
-            [status-im.multiaccounts.recover.core :as multiaccounts.recover]
             [status-im.multiaccounts.update.core :as multiaccounts.update]
             [utils.re-frame :as rf]
             [utils.datetime :as datetime]
@@ -589,7 +588,8 @@
               (when (and (= card-state :profile/profile)
                          (= flow :import))
                 (if (common/find-multiaccount-by-key-uid db key-uid)
-                  (multiaccounts.recover/show-existing-multiaccount-alert key-uid)
+                  ;; reimplement
+                  ;;(multiaccounts.recover/show-existing-multiaccount-alert key-uid)
                   (if paired?
                     (load-recovery-pin-screen)
                     (recovery/load-pair-screen))))
@@ -681,3 +681,11 @@
   {:events [:keycard.callback/stop-nfc-failure]}
   [{:keys [db]} _]
   (log/debug "[keycard] nfc failed stopping")) ;; leave current value on :nfc-running
+
+(rf/defn init
+  {:events [:keycard/init]}
+  [_]
+  {:keycard/register-card-events nil
+   :keycard/check-nfc-support    nil
+   :keycard/check-nfc-enabled    nil
+   :keycard/retrieve-pairings    nil})

src/status_im/keycard/recovery.cljs

@@ -139,7 +139,6 @@
               {:db (-> db
                        (update :keycard dissoc :flow)
                        (dissoc :restored-account?))}
-              (multiaccounts.create/prepare-intro-wizard)
               (if (pos? (count accs))
                 (navigation/navigate-to :get-your-keys nil)
                 (navigation/set-stack-root :onboarding [:get-your-keys])))))

src/status_im/keycard/sign.cljs

@@ -4,7 +4,7 @@
             [status-im.ethereum.core :as ethereum]
             [status-im.keycard.common :as common]
             [utils.re-frame :as rf]
-            [status-im.utils.money :as money]
+            [utils.money :as money]
             [status-im.utils.types :as types]
             [taoensso.timbre :as log]))
 
@@ -38,8 +38,8 @@
                 {:db (assoc-in db [:signing/sign :keycard-step] :signing)}
                 (common/set-on-card-connected :keycard/sign))
 
-      (pos? keycard-pin-retries) ; if 0, get-application-info will have already closed the connection
-                                 ; sheet and opened the frozen card popup
+      (pos? keycard-pin-retries) ; if 0, get-application-info will have already closed the
+                                 ; connection sheet and opened the frozen card popup
       {:db           (-> db
                          (assoc-in [:keycard :card-read-in-progress?] true)
                          (assoc-in [:keycard :pin :status] :verifying))