stage wip steps for WSA

stage scripts and refactor of doc so far
chore: update introduction a bit
2023-07-31 07:15:11 +05:30 · 2023-07-30 13:15:10 +05:30 · 2023-07-29 07:44:47 +05:30 · 2023-07-29 07:44:46 +05:30 · 2023-07-28 13:33:07 -06:00 · 2023-07-28 13:18:33 -06:00
103 changed files with 2051 additions and 857 deletions
@@ -2,7 +2,7 @@
 name: MVPBug Report
 about: MVPBug Report
 title: ''
-labels: E:MobileBugfixesMVP
+labels: 'E:Mobile Bugfixes MVP'
 assignees: ''

 ---
@@ -263,6 +263,10 @@ run-metro: export TARGET := clojure
 run-metro: ##@run Start Metro to build React Native changes
 	@scripts/start-react-native.sh

+run-socat: export TARGET := clojure
+run-socat: ##@run Start Socat for WSL to port forward on windowsOS
+	socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037
+
 run-re-frisk: export TARGET := clojure
 run-re-frisk: ##@run Start re-frisk server
 	yarn shadow-cljs run re-frisk-remote.core/start
@@ -782,9 +782,9 @@ Clojure (JVM) codebases which mirror the sources in a top-level test directory.
 └── models_test.cljs
 ```

-Component tests should be created in a separate directory `__tests__`, colocated
-with the source. When the entire component implementation is isolated under a
-single directory, create a test file named `component_spec.cljs` instead.
+Component tests should be created in the same directory as the source component,
+and named as `component_spec.cljs`.
+

 ```
 └── filter
@@ -0,0 +1,191 @@
+### Setting up status-mobile on Windows
+
+Note: It is far easier to dual boot your Windows OS with any linux Distro.
+(Preferably `Ubuntu` if you're new to Linux)
+However if you still wish to get status-mobile repository set up on a Windows OS,
+below are the instructions: 
+
+#### Step 1: WSL2 (Windows SubSystem for Linux)
+At a high level, `WSL2` is basically running as a `VM` on `Windows OS` with its own 
+networking stack that is connected to a private (virtual) network where `Windows OS` 
+acts as the gateway.
+
+To check your installed version of WSL execute this command in powershell:
+
+`wsl -l -v`
+
+If you see any linux distro as an output with version 2 you are good to 
+skip this step. Else you will have to install `WSL2`, use the following command
+in powershell which was "Run as Administrator" :
+
+`wsl --install`
+
+reference : https://learn.microsoft.com/de-de/windows/wsl/install#install-wsl-command
+
+#### Step 2: Get the status-mobile repository inside WSL2
+
+If you newly installed WSL2 and followed the setup till the end your existing powershell
+terminal would automatically log you into the WSL2 Linux Distro (Could be Ubuntu in your case).
+
+Otherwise you can open a WSL2 terminal by pressing the window key and typing "wsl"
+
+Once inside a wsl terminal decide where you want to clone status-mobile's repository and 
+cd into that directory and run :
+
+`git clone https://github.com/status-im/status-mobile.git`
+
+![Screenshot 2023-07-29 at 8.09.19 AM.png](..%2F..%2F..%2F..%2F..%2F..%2F..%2Fvar%2Ffolders%2Fnb%2Fl9h53lq15wd6xtccvkz737_00000gn%2FT%2FTemporaryItems%2FNSIRD_screencaptureui_qdXdA2%2FScreenshot%202023-07-29%20at%208.09.19%20AM.png)
+
+#### Step 3: Running the clojure terminal
+`cd status-mobile`
+
+Once inside the cloned repository you should run this command :
+
+`make run-clojure`
+
+#### What does it do?
+This command will install nix and nix will then install all the necessary 
+dependencies, once that is done. This command will run `shadow-cljs` and compile the
+`clojurescript` code and then start a hot reloading server.
+note : This might take a while
+
+wait till you see something like this : 
+
+```log
+[:mobile] Build completed. (1337 files, 1335 compiled, 0 warnings, 573.69s)
+```
+
+#### Your freshly installed Linux Distro might not have make
+In case of Ubuntu
+`sudo apt install make` should be all that's needed to install `make`
+
+#### Step 4: Running the metro terminal
+In a new terminal tab run the following command :
+`make run-metro`
+
+#### What does it do?
+This command first configures a nix shell with target `clojure` and then it runs the
+metro server which react-native needs.
+
+After it succeeds you should see something like this :
+
+![Screenshot 2023-07-29 at 9.00.43 AM.png](..%2F..%2F..%2F..%2F..%2F..%2F..%2Fvar%2Ffolders%2Fnb%2Fl9h53lq15wd6xtccvkz737_00000gn%2FT%2FTemporaryItems%2FNSIRD_screencaptureui_AvRCky%2FScreenshot%202023-07-29%20at%209.00.43%20AM.png)
+
+
+#### Step 6: Set up WSA (Windows Subsystem for Android)
+ref : https://learn.microsoft.com/en-us/windows/android/wsa/
+
+Windows Subsystem for Android is available on **Windows 11.** 
+Your device must meet specific requirements: 
+https://support.microsoft.com/en-gb/windows/install-mobile-apps-and-the-amazon-appstore-on-windows-f8d0abb5-44ad-47d8-b9fb-ad6b1459ff6c
+
+A pre-requisite of WSA is to Download Amazon App Store which is only available for the following countries :
+https://support.microsoft.com/en-gb/windows/countries-and-regions-that-support-amazon-appstore-on-windows-d8dd17c7-5994-4187-9527-ddb076f9493e?preview=true
+
+You can change your Region in settings and the restart your microsoft store and then search "amazon app store"
+This will allow you to proceed further.
+
+![Screenshot 2023-07-30 at 1.51.15 PM.png](..%2F..%2F..%2F..%2F..%2FDesktop%2FScreenshot%202023-07-30%20at%201.51.15%20PM.png)
+
+
+#### Step 5: Building and running on Android Emulator
+Open your Desired Android Emulator and make sure it has booted up.
+
+Then in a new terminal tab run the following command :
+`make run-android`
+
+
+//TODO : refactor below part once you verify makefile changes
+
+There are several different apps in the development stack that need to be coordinated. 
+Namely, `ADB`, `Shadow-CLJS`, and `React Metro`.
+This guide is going to combine tips from 
+https://gist.github.com/bergmannjg/461958db03c6ae41a66d264ae6504ade#enable-access-to-adb-server-from-wsl2
+And
+https://stackoverflow.com/a/45522559
+First, we assume you’ve downloaded `Android Studio` and setup an appropriately recent `AVD`. 
+I’m using `API 30` on an `x86 ABI`. 
+
+![images/windows-setup/avd-screenshot.png](images/windows-setup/avd-screenshot.png)
+
+You’ll want to have a batch script to launch the emulator, so you don’t need to have `Android Studio` open. 
+That, and you need to run `ADB` from the CLI independent of `Android Studio`, so you wouldn’t want to launch it 
+from `Android Studio` anyway. From https://stackoverflow.com/a/45522559 CC BY-SA 4.0:
+You can make a batch file, that will open your emulator directly without opening `Android Studio`. 
+
+If you are using Windows:
+
+- Open Notepad
+- New file
+- Copy the next lines into your file:
+- `cd /d C:\Users\%username%\AppData\Local\Android\sdk\tools`
+- `emulator @[YOUR_EMULATOR_DEVICE_NAME]`
+
+Notes:
+- Replace `[YOUR_EMULATOR_DEVICE_NAME]` with the device name you created in emulator
+- To get the device name go to: `C:\Users\%username%\AppData\Local\Android\sdk\tools`
+- Run cmd and type: `emulator -list-avds`
+- Copy the device name and paste it in the batch file
+- Save the file as `emulator.bat` and close
+- Now double-click on `emulator.bat`, and you got the emulator running!
+
+You will also need to run an `ADB daemon` on `Windows` that runs in the foreground and listens on all addresses. 
+From https://gist.github.com/bergmannjg/461958db03c6ae41a66d264ae6504ade#enable-access-to-adb-server-from-wsl2:
+
+- `adb kill-server`
+- `adb -a nodaemon server start`
+
+Approve `ADB` to bypass firewall rules, as applicable.
+Next, boot up `WSL2` and cd into your local copy of status-mobile’s git repo.
+
+For the following steps, I recommend using a terminal multiplexer like TMUX or Screen. 
+We are going to start 5 different ttys, and then one more Windows CMD 
+(at this point we already have two Windows CMDs from launching the emulator and ADB), 
+so at a high level, here’s the outline of what we have left to do:
+
+- terminal 1 = set shadow host and run the `clojure`
+- terminal 2 = `re-frisk debugger`
+- terminal 3 = `metro`
+- terminal 4 = `run socat`
+- terminal 5 = `run-android`
+- on windows = `portforward` 8081 to 12
+
+In terminal 1, we need to set an environment variable SHADOW_HOST and set it to WSL2’s ip address. 
+You can get it from `ip addr` or just try the following:
+
+- `export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2`
+- `export SHADOW_HOST=${WSL_HOST}`
+- `make run-clojure`
+
+This will ensure the Metro app running on the emulator will pingback to our shadow-cljs server, 
+here’s where that envvar goes if you’re curious: 
+https://github.com/status-im/status-mobile/blob/e260187cf5d800e5af2ab5614ca67c6ae1faccfe/shadow-cljs.edn#L73
+
+In terminal 2, run the re-frisk debugger, nothing different from the standard Status developer guide here. 
+You can skip this if you don’t need a CLJS debug server.
+- `make run-re-frisk`
+
+In terminal 3, run metro, again nothing different here.
+- `make run-metro`
+
+In terminal 4, we are going to do things a bit different. We aren’t going to run-android just yet.
+We are going to run socat per the already cited gist 
+[https://gist.github.com/bergmannjg/461958db03c6ae41a66d264ae6504ade#enable-access-to-adb-server-from-wsl2] 
+(go apt-get install it if you haven’t already). 
+Unfortunately, the ADB_SERVER_SOCKET method may look like it works when you run adb from within a nix shell, 
+but gradle appears to ignore these envvars, 
+so packet-forwarding is the way to go:
+`socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037`
+
+Now one more thing before we actually go run-android, we need to forward the Metro 8081 port to our WSL2 VM, 
+on Windows CMD use the following incantation stolen from the aforementioned gist:
+- `iex "netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=127.0.0.1" | out-null;`
+- `$WSL_CLIENT = bash.exe -c "ifconfig eth0 | grep 'inet '";`
+- `$WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';`
+- `$WSL_CLIENT = $matches[0];`
+- `iex "netsh interface portproxy add v4tov4 listenport=8081 listenaddress=127.0.0.1`
+- `connectport=8081 connectaddress=$WSL_CLIENT"`
+
+Finally, we can go ahead and run-android in terminal 5:
+`make run-android`
+
@@ -1,6 +1,9 @@
 # Description

 This document provides information on how to start developing Status App.
+note : This guide only works for Linux and MacOS Environments.
+
+For Windows OS refer this guide : [setup-guide-for-windows-os.md](setup-guide-for-windows-os.md)

 # Getting Started

@@ -823,6 +823,11 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        executeRunnableStatusGoMethod(() -> Statusgo.hashMessage(message), callback);
    }

+    @ReactMethod
+    public void startSearchForLocalPairingPeers(final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.startSearchForLocalPairingPeers(), callback);
+    }
+
    @ReactMethod
    public void getConnectionStringForBootstrappingAnotherDevice(final String configJSON, final Callback callback) throws JSONException {
         final JSONObject jsonConfig = new JSONObject(configJSON);
@@ -1172,19 +1177,19 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        executeRunnableStatusGoMethod(() -> Statusgo.deleteImportedKey(address, password, keyStoreDir), callback);
    }

-    @ReactMethod(isBlockingSynchronousMethod = true) 
+    @ReactMethod(isBlockingSynchronousMethod = true)
    public String keystoreDir() {
        final String absRootDirPath = this.getNoBackupDirectory();
        return pathCombine(absRootDirPath, "keystore");
    }

-    @ReactMethod(isBlockingSynchronousMethod = true) 
+    @ReactMethod(isBlockingSynchronousMethod = true)
    public String backupDisabledDataDir() {
        return this.getNoBackupDirectory();
    }


-    @ReactMethod(isBlockingSynchronousMethod = true) 
+    @ReactMethod(isBlockingSynchronousMethod = true)
    public String logFileDirectory() {
        return getPublicStorageDirectory().getAbsolutePath();
    }
@@ -312,6 +312,11 @@ RCT_EXPORT_METHOD(localPairingPreflightOutboundCheck:(RCTResponseSenderBlock)cal
    callback(@[result]);
 }

+RCT_EXPORT_METHOD(startSearchForLocalPairingPeers:(RCTResponseSenderBlock)callback) {
+    NSString *result = StatusgoStartSearchForLocalPairingPeers();
+    callback(@[result]);
+}
+
 RCT_EXPORT_METHOD(getConnectionStringForBootstrappingAnotherDevice:(NSString *)configJSON
                  callback:(RCTResponseSenderBlock)callback) {

@@ -1,17 +1,4 @@
 [
-  {
-    "path": "args4j/args4j/2.0.26/args4j-2.0.26",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "f0aada195340b361a1a45aa9c3d417c7cbb0a6b5",
-      "sha256": "0151vnbmbjnr5089ik8np91r3a4g2ylcahih22zr49a3ilri6f80"
-    },
-    "jar": {
-      "sha1": "01ebb18ebb3b379a74207d5af4ea7c8338ebd78b",
-      "sha256": "193i0xgn295bdz5gk4zrk4ncfa29x8vl97bfd01kl1za44ixm6wq"
-    }
-  },
-
  {
    "path": "bidi/bidi/2.1.6/bidi-2.1.6",
    "host": "https://repo.clojars.org",
@@ -39,15 +26,15 @@
  },

  {
-    "path": "binaryage/oops/0.7.0/oops-0.7.0",
+    "path": "binaryage/oops/0.7.2/oops-0.7.2",
    "host": "https://repo.clojars.org",
    "pom": {
-      "sha1": "de223223c4272ce9ee75c81f8764e894029630b4",
-      "sha256": "0sz21344v8lxd6mjlrb8r8yyz934h4lnkwqlpg3csgsi11mppya3"
+      "sha1": "bdce8b7dc9f2b569f5c42a4d6108325899970eb9",
+      "sha256": "1rc4slg4836pnxds447sam9hsiwd4x2al1ykazp6iglc10ix9igd"
    },
    "jar": {
-      "sha1": "9729401b4c6551f6becf44cf0818d04255410099",
-      "sha256": "0jkdybj37q3a4vvay3asj47ms7l3qjpidhkk30293w0zc7jk18k8"
+      "sha1": "2f47298f9aa41ef6f2c4f2c49f472eb113e94ae7",
+      "sha256": "0c9f7wylwl0lxcn4vqncprlzmdddqhxzb3vdaawdm0da0xh010hb"
    }
  },

@@ -65,28 +52,28 @@
  },

  {
-    "path": "cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3",
+    "path": "cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0",
    "host": "https://repo.clojars.org",
    "pom": {
-      "sha1": "3a39a7a1690b4ee6b48a4f0c65d089eacf47e8a5",
-      "sha256": "1qhz6q1afg22j5d8zyxzqsbbinix3zh4lyy2acij8hrp02f274wj"
+      "sha1": "d2dd4e969cf44bfffd8609d0d4945a4a561b5a58",
+      "sha256": "0f4yxk0wx1i13inkq9zjd1450bbly5lf62216a88clmn4l5x8knn"
    },
    "jar": {
-      "sha1": "5ae0efd9377a5e60c084bdaf4a2ce094f759ce23",
-      "sha256": "0drxf9nm23i1pcgrkwbcr09msq37csilzww38709add0hz8spjhq"
+      "sha1": "45f6034b26a14138e74145b7a4059628c0fedcd1",
+      "sha256": "1dy1l6y8cb8xiqq97a4lf8giyiicq4wfl4s2lxn5fb6614cjxqx2"
    }
  },

  {
-    "path": "cider/piggieback/0.4.1/piggieback-0.4.1",
+    "path": "cider/piggieback/0.5.2/piggieback-0.5.2",
    "host": "https://repo.clojars.org",
    "pom": {
-      "sha1": "c432ffbdd51b67bf82e4a63f1f4f102ba55f4ddf",
-      "sha256": "191wpjlq78s08d509hq2yrxsdzm3qfkqf2zdiwxxlmmh14dg65rx"
+      "sha1": "7e88493d18a4aaf13aff9d0319dcd82178d95f1d",
+      "sha256": "08w5y48bpvnlyqbdjs0h7nz9dp35rc7b46hsvh1a0vpdszisxh0p"
    },
    "jar": {
-      "sha1": "0a02a3e2ecd7a126ab60d8a44793342f20ced79b",
-      "sha256": "142vl5np33akcrnn6pksi0rjfsmmi528villxsj6cwcndvybiw4m"
+      "sha1": "ecfd5c286a85db3f059e75c37fca5722d9e26f79",
+      "sha256": "1ps9yf3cxmlm447hqkidjb5xry90n0wl3jk0jn28fagq31lzylkl"
    }
  },

@@ -207,162 +194,6 @@
    }
  },

-  {
-    "path": "com/google/code/findbugs/jsr305/3.0.1/jsr305-3.0.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "d04690f71f3393e23f30998d9534365274fa5f9f",
-      "sha256": "1khlag991h7326xsjnpx6hnyip5cwawsmxz6m20kkzavvihsfw21"
-    },
-    "jar": {
-      "sha1": "f7be08ec23c21485b9b5a1cf1654c2ec8c58168d",
-      "sha256": "1k9zl76xi2nykixaynss2gk4h861zipdb9xl6q1br0ln4hscx1f8"
-    }
-  },
-
-  {
-    "path": "com/google/code/gson/gson/2.7/gson-2.7",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "09f9e39f9b791aeb73ba428ad30872f1a703edb3",
-      "sha256": "1phf2qksjf75ykwgp39189jdbqsn5zrmi07g8h522yxq0zn3cfbj"
-    },
-    "jar": {
-      "sha1": "751f548c85fa49f330cecbb1875893f971b33c4e",
-      "sha256": "0clda1xrjfja969xsbrhc61ip588xvsi9k054kpd4cz1m5gfnhrd"
-    }
-  },
-
-  {
-    "path": "com/google/elemental2/elemental2-core/1.0.0-RC1/elemental2-core-1.0.0-RC1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "2ccdbc92bc4dfbc9159bf43cf794c240ec37621f",
-      "sha256": "04gmnxv7fpsn66wvmsip4s9hqcc1wphsy3bg13vx262kg9w35j19"
-    },
-    "jar": {
-      "sha1": "7e6e9ec8574d2ff6503f3f774c43695d0276f8f4",
-      "sha256": "1l6g27a361nyl90ln9k2xamjds9xm3kjrfb9xcqz1gqhjgmnml7i"
-    }
-  },
-
-  {
-    "path": "com/google/errorprone/error_prone_annotations/2.3.1/error_prone_annotations-2.3.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "19c878e6870c8382864dcc459de1c6bfe7f36e54",
-      "sha256": "16l1kbc7wbisjmjvkfac854ddyql0b5smdxr2vz8wdms26vydp1y"
-    },
-    "jar": {
-      "sha1": "a6a2b2df72fd13ec466216049b303f206bd66c5d",
-      "sha256": "0831h49f21znl7z8lkr2ikywwajdachgxva7zpj8sp7rl2d9998h"
-    }
-  },
-
-  {
-    "path": "com/google/guava/guava/25.1-jre/guava-25.1-jre",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "5dd13f6c0d56f05059c5eba88a20a8699ece583d",
-      "sha256": "1pya5f4vbh8z9zvprnl64i9qqp0rghjfsflx64q9md28w5pb9y35"
-    },
-    "jar": {
-      "sha1": "6c57e4b22b44e89e548b5c9f70f0c45fe10fb0b4",
-      "sha256": "1gqaqxdnxhr1gk9haldrifvda8ingj1s4bin5sf455y38jic7c3d"
-    }
-  },
-
-  {
-    "path": "com/google/j2objc/j2objc-annotations/1.1/j2objc-annotations-1.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "b964a9414771661bdf35a3f10692a2fb0dd2c866",
-      "sha256": "1gnn7b80krv19qjd9hhacahffqq9iwqgmw4ds56wp9wk3rbqrjgh"
-    },
-    "jar": {
-      "sha1": "ed28ded51a8b1c6b112568def5f4b455e6809019",
-      "sha256": "1xpcvmnw2y3fa56hhk8dmknrq8afr6r3kdmzsg9hnwgjg3msg519"
-    }
-  },
-
-  {
-    "path": "com/google/javascript/closure-compiler-externs/v20200830/closure-compiler-externs-v20200830",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "703aed7fd9e61298194db257c105b934c5e0cc12",
-      "sha256": "06wpqr4rpj9qz067dn6j54k37lpaqpljrqzamdfb1lrkpygksb29"
-    },
-    "jar": {
-      "sha1": "d5182c2e1bd226e39835c3b97875e27b54ee7401",
-      "sha256": "0f3zgq7k9n1cwm787k2kkyxc9r033h54wlmb60d4nfhd39dbsza3"
-    }
-  },
-
-  {
-    "path": "com/google/javascript/closure-compiler-unshaded/v20200830/closure-compiler-unshaded-v20200830",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "f1ac30ac5c39c2b6a8b9672373bebb1b5521cffa",
-      "sha256": "0nhxzkdyri03mccxf65lxjxn1fafvhdkqvphf8vkxzkjbgiqwjdm"
-    },
-    "jar": {
-      "sha1": "a017550b64e2690e3a4a5340d1eb699809b9f775",
-      "sha256": "1kpihfzp4x8vxykgd6lcf4nb1r4f5zp3hpivs2793ny019w73rbn"
-    }
-  },
-
-  {
-    "path": "com/google/jsinterop/base/1.0.0/base-1.0.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "9d68520e28ac9b035f86a520692196ea31aaf4f0",
-      "sha256": "0byl8ksnlpvs0nm3a2midrbp6zrgxl7jzqgcz7z1hb1iy3jzfdk1"
-    },
-    "jar": {
-      "sha1": "5d2a5cda3092004832cb67cfe7a100a2ef8411f8",
-      "sha256": "04j4r89vimffmfim0ipmgbd54bxx111c0ygs34dn0krqdb13adk0"
-    }
-  },
-
-  {
-    "path": "com/google/jsinterop/jsinterop-annotations/1.0.2/jsinterop-annotations-1.0.2",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "718fc66ea5e7ee1597960c5874d4603542814166",
-      "sha256": "0bslwg7rqjanczf3sz11pgdans4hcl4nbp1f5xyy7dzfnkhyhbhx"
-    },
-    "jar": {
-      "sha1": "abd7319f53d018e11108a88f599bd16492448dd2",
-      "sha256": "057hgcrix9ss4cfgkl7pqqlcc7g1xnlx39i8lipn0sjv3xrl9bzw"
-    }
-  },
-
-  {
-    "path": "com/google/protobuf/protobuf-java/3.11.1/protobuf-java-3.11.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "599529d980b7ca0b4145ae48d4323f3e85e5b1c5",
-      "sha256": "0a0w96psyxpss3y3va5b8hcqzfxxy2kisng9hc6b4im9f83gj56x"
-    },
-    "jar": {
-      "sha1": "1752390841a56e112b01990c9b523e6978abb24f",
-      "sha256": "1wbwasjsqb19xpjk66wyih67492di8sg64qh2n2az7mpfy1dn0aa"
-    }
-  },
-
-  {
-    "path": "com/google/re2j/re2j/1.3/re2j-1.3",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "565024724e6527255f0ae38e507c7f90c55b21ce",
-      "sha256": "0bzj30pnw9bm7jfcwl5ypaqrgvvp3yndf9vdw0qjfyzr9xx39z2d"
-    },
-    "jar": {
-      "sha1": "dc7de2b32fa8cc569ab44fb849abadbbc6983b91",
-      "sha256": "06fypacl4jsbiddgby40fxxz6bpck7jvc5ch344f472cqnhhy16q"
-    }
-  },
-
  {
    "path": "com/googlecode/json-simple/json-simple/1.1.1/json-simple-1.1.1",
    "host": "https://repo1.maven.org/maven2",
@@ -376,6 +207,19 @@
    }
  },

+  {
+    "path": "com/google/javascript/closure-compiler-unshaded/v20210302/closure-compiler-unshaded-v20210302",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "1f790dd30fd0c2279cf73d79c4eba6a9f7516532",
+      "sha256": "17vb4r6bn97s4jjwja7xmpwfdnfzknhyigz2vdiqpqyh4a31hb3c"
+    },
+    "jar": {
+      "sha1": "14a87750b6bbe6e29932446b6db1f015851fd4e8",
+      "sha256": "11ydn317q2aqh1bkm7gry48r2bakw5ifpx1yrrq192vq5kg7zwhq"
+    }
+  },
+
  {
    "path": "com/ibm/icu/icu4j/66.1/icu4j-66.1",
    "host": "https://repo1.maven.org/maven2",
@@ -389,6 +233,58 @@
    }
  },

+  {
+    "path": "commons-codec/commons-codec/1.10/commons-codec-1.10",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "44b9477418d2942d45550f7e7c66c16262062d0e",
+      "sha256": "1yscxabk7i59vgfjg7c1y3prj39h1d8prnwgxbisc4ni29qdpf5x"
+    },
+    "jar": {
+      "sha1": "4b95f4897fa13f2cd904aee711aeafc0c5295cd8",
+      "sha256": "0scm6321zz76dc3bs8sy2qyami755lz4lq5455gl67bi9slxyha2"
+    }
+  },
+
+  {
+    "path": "commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "65112009d674333c1acfafb4e198ff250d710764",
+      "sha256": "007nyd66fqp3fbrmnsbfp1fpkhmr2lk33qmkp3salqld3xd7qlc8"
+    },
+    "jar": {
+      "sha1": "f95188e3d372e20e7328706c37ef366e5d7859b0",
+      "sha256": "1xyyl54sfxsdcwxdyq6b0azmr31b4dwqns850jjkw9a9dwrh5v54"
+    }
+  },
+
+  {
+    "path": "commons-io/commons-io/2.6/commons-io-2.6",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "5060835593e5b6ed18c82fc2e782f0a3c30a00b1",
+      "sha256": "0q4a6fp6xkyd86ikymkyv2plhf9vj8aqvggxg9d1yad2jcw8c8qc"
+    },
+    "jar": {
+      "sha1": "815893df5f31da2ece4040fe0a12fd44b577afaf",
+      "sha256": "04v5fg53jl9gbn6pyz3l7kbpxv0xjzyasnw6yd1a3hhacq2d6xzq"
+    }
+  },
+
+  {
+    "path": "compojure/compojure/1.5.2/compojure-1.5.2",
+    "host": "https://repo.clojars.org",
+    "pom": {
+      "sha1": "9e8da477b6682094d56802cb155291a2acb829bd",
+      "sha256": "036z64iprypccz03iq7lqxvw99xjh4xlsfmfwbs37pmhfnfmbdnx"
+    },
+    "jar": {
+      "sha1": "0b5258d0616ffc5f64c2b6d95f09de56d24df439",
+      "sha256": "1s2k05lwnlm9a66mxnsss437i9gp70dny8y2rlfkl090s6mdqsaf"
+    }
+  },
+
  {
    "path": "com/taoensso/encore/2.105.0/encore-2.105.0",
    "host": "https://repo.clojars.org",
@@ -467,58 +363,6 @@
    }
  },

-  {
-    "path": "commons-codec/commons-codec/1.10/commons-codec-1.10",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "44b9477418d2942d45550f7e7c66c16262062d0e",
-      "sha256": "1yscxabk7i59vgfjg7c1y3prj39h1d8prnwgxbisc4ni29qdpf5x"
-    },
-    "jar": {
-      "sha1": "4b95f4897fa13f2cd904aee711aeafc0c5295cd8",
-      "sha256": "0scm6321zz76dc3bs8sy2qyami755lz4lq5455gl67bi9slxyha2"
-    }
-  },
-
-  {
-    "path": "commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "65112009d674333c1acfafb4e198ff250d710764",
-      "sha256": "007nyd66fqp3fbrmnsbfp1fpkhmr2lk33qmkp3salqld3xd7qlc8"
-    },
-    "jar": {
-      "sha1": "f95188e3d372e20e7328706c37ef366e5d7859b0",
-      "sha256": "1xyyl54sfxsdcwxdyq6b0azmr31b4dwqns850jjkw9a9dwrh5v54"
-    }
-  },
-
-  {
-    "path": "commons-io/commons-io/2.6/commons-io-2.6",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "5060835593e5b6ed18c82fc2e782f0a3c30a00b1",
-      "sha256": "0q4a6fp6xkyd86ikymkyv2plhf9vj8aqvggxg9d1yad2jcw8c8qc"
-    },
-    "jar": {
-      "sha1": "815893df5f31da2ece4040fe0a12fd44b577afaf",
-      "sha256": "04v5fg53jl9gbn6pyz3l7kbpxv0xjzyasnw6yd1a3hhacq2d6xzq"
-    }
-  },
-
-  {
-    "path": "compojure/compojure/1.5.2/compojure-1.5.2",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "9e8da477b6682094d56802cb155291a2acb829bd",
-      "sha256": "036z64iprypccz03iq7lqxvw99xjh4xlsfmfwbs37pmhfnfmbdnx"
-    },
-    "jar": {
-      "sha1": "0b5258d0616ffc5f64c2b6d95f09de56d24df439",
-      "sha256": "1s2k05lwnlm9a66mxnsss437i9gp70dny8y2rlfkl090s6mdqsaf"
-    }
-  },
-
  {
    "path": "crypto-equality/crypto-equality/1.0.0/crypto-equality-1.0.0",
    "host": "https://repo.clojars.org",
@@ -663,15 +507,15 @@
  },

  {
-    "path": "io/undertow/undertow-core/2.1.3.Final/undertow-core-2.1.3.Final",
+    "path": "io/undertow/undertow-core/2.2.4.Final/undertow-core-2.2.4.Final",
    "host": "https://repo1.maven.org/maven2",
    "pom": {
-      "sha1": "28ef70062f9f9442f346d345fb7403d1181c2603",
-      "sha256": "0khc267iljd5b3wlb9rks3zr9blqiz55dky2y0lgx5slxvr5ww95"
+      "sha1": "0c0f3b7a6b2c2b4e73d719362b4595e77fbe98cd",
+      "sha256": "14z0577jgx3r510zgjrzd2vcz9md3d5qpb81ir14zis9vdn5pwxf"
    },
    "jar": {
-      "sha1": "ea86fcf86ad8d283c5b14a6820061a6bd203839e",
-      "sha256": "00z8d052wp0ba0f64ki08867d7hsx3w1zrhngpbm45qcqs2hphai"
+      "sha1": "78650b4029dd9280c4769d9425b5559f12cb83bf",
+      "sha256": "1brpkd2l98byf76jga6hj5drv5sj2d93lxlq2xz0rxpqyqas1xm4"
    }
  },

@@ -741,28 +585,15 @@
  },

  {
-    "path": "nrepl/nrepl/0.7.0/nrepl-0.7.0",
+    "path": "nrepl/nrepl/1.0.0/nrepl-1.0.0",
    "host": "https://repo.clojars.org",
    "pom": {
-      "sha1": "913a846875363d8255bcede71d1186082f0f05d5",
-      "sha256": "1f1ii5k975fmlcqj6dydc28mzbpiyyq9hqzv9lnzm9n15fgggafa"
+      "sha1": "79b3e7030f2da9c4b8a20e4e5b44b401fbaccefc",
+      "sha256": "0wnsyd2vwikqljl8si3040s5b89fm8j9zfa4a1c8g3lzj4npjwvl"
    },
    "jar": {
-      "sha1": "55dabf4f271d30e7a8f0e198055c000398991e14",
-      "sha256": "1h9zin2z4ll3jfr0cqp7zfvy6d2axrjjnyv8qbir0krjsss13ikw"
-    }
-  },
-
-  {
-    "path": "org/checkerframework/checker-qual/2.0.0/checker-qual-2.0.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "17ab37f0fb0338647a70ab40f15c2c685e4185e3",
-      "sha256": "0s0062lnqk8vq23dil7qma7rl5x1h16h2x4bah7fw6rbvm9h7cfy"
-    },
-    "jar": {
-      "sha1": "518929596ee3249127502a8573b2e008e2d51ed3",
-      "sha256": "15br88i0dk5l0hdh6ikgg6kvdbdir38jdw69j9s579az5xil317w"
+      "sha1": "f47774c43493efdc879d36b95ebd67ea0d9c890a",
+      "sha256": "1fx5ssmixgqmklliw0ng8fjz41kkhys56x8dbwv9yqrfzws9f2x3"
    }
  },

@@ -780,15 +611,15 @@
  },

  {
-    "path": "org/clojure/clojurescript/1.10.773/clojurescript-1.10.773",
+    "path": "org/clojure/clojurescript/1.10.844/clojurescript-1.10.844",
    "host": "https://repo1.maven.org/maven2",
    "pom": {
-      "sha1": "ae4301ccf5a38dad594760b1c08774fc471fd59c",
-      "sha256": "15vfzdq8vx9slppvkyvgvzndnrgqrc5m2vl0969lnprwizmrv570"
+      "sha1": "f4004d2de394c5f41317a38ae32f79e78826b45f",
+      "sha256": "0nq8mz45gl86aigrmjnkq2fd612caayxfzkyk03dmp5v4sr5zxf6"
    },
    "jar": {
-      "sha1": "9f9729dbbf9b814c83dc189977b447d2ae92b6cd",
-      "sha256": "1r0b6241ci1jwh6dk2yqb2ylh4aj4f2df5xxzwx3qp33xlday11z"
+      "sha1": "86bedf67c795c72bde3feb0415b41be8b95f2cbb",
+      "sha256": "03rs4dpwssa5ym9idip6vkxq27np3dwx7mzxms2s0yv4lipla58v"
    }
  },

@@ -884,28 +715,28 @@
  },

  {
-    "path": "org/clojure/google-closure-library-third-party/0.0-20191016-6ae1f72f/google-closure-library-third-party-0.0-20191016-6ae1f72f",
+    "path": "org/clojure/google-closure-library/0.0-20201211-3e6c510d/google-closure-library-0.0-20201211-3e6c510d",
    "host": "https://repo1.maven.org/maven2",
    "pom": {
-      "sha1": "1aa0b32fd70e6644dcb06b88b55630d6bbb6f188",
-      "sha256": "1wq6gvhlvy3mdhj1cb0w62kclqd7x42dqd0275l40rlla5q5h1z1"
+      "sha1": "9fbaa40e54d12d1d35afee260600b8e7325034cc",
+      "sha256": "046qdcbqclxz0p4lnahglqkazraw47gymx3cin5jrw2wd7dpmr0l"
    },
    "jar": {
-      "sha1": "4fc15daa4fd1b150e8c6d32755796634446dd86a",
-      "sha256": "1ykw162gng0lcbxn2f387vv1l4d7hfwyayhxgzqqgi9jx211fzw5"
+      "sha1": "b8c673dd84d8ed85c6d857e28afee5524a0ef82c",
+      "sha256": "0q84zw1nl0sg69cx9i7g2bkw7996ig2j3m9pw4yfysjsn5aycm1q"
    }
  },

  {
-    "path": "org/clojure/google-closure-library/0.0-20191016-6ae1f72f/google-closure-library-0.0-20191016-6ae1f72f",
+    "path": "org/clojure/google-closure-library-third-party/0.0-20201211-3e6c510d/google-closure-library-third-party-0.0-20201211-3e6c510d",
    "host": "https://repo1.maven.org/maven2",
    "pom": {
-      "sha1": "dea94d117aa88d75e281f877914454f79df06bf2",
-      "sha256": "1nysls9ywj3b3zvlfwy68kayx47r4bacidmq1vx8w4h043l9kxrr"
+      "sha1": "93650c3e00cf1dc0811d2e347068828cf6700fca",
+      "sha256": "1y6a10n8w98gr02ys8zxkddq2qrz7l5y3462d4hg8jpaq3r2pdm8"
    },
    "jar": {
-      "sha1": "6025affb7181cd40418600864f58eed1ea80055d",
-      "sha256": "0w6waii2qps7vp3nzbj5nai809xdq26ss0cabl4wz1s8fc6js6qw"
+      "sha1": "edcb415db3c88ada448cfbf65b021f12c7b131e9",
+      "sha256": "1f5hjr2r323il0g9maamwdbgqxrvm3hg87jsgc13wa7naw4pm9pi"
    }
  },

@@ -935,19 +766,6 @@
    }
  },

-  {
-    "path": "org/clojure/tools.analyzer.jvm/1.1.0/tools.analyzer.jvm-1.1.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "3f21bdbd549557232eb0bf0965b2beea34004d52",
-      "sha256": "0cyyhf82pn4mjw4whr4sx3cnxrgsk862dq92gn79yawxr6842i51"
-    },
-    "jar": {
-      "sha1": "027d2ebe594eb5f46d6bcea62593e184937b3011",
-      "sha256": "0kcfcn12dmyrm7sk1jkrlcb7ws8kazfqziv62mfid62xc095gayz"
-    }
-  },
-
  {
    "path": "org/clojure/tools.analyzer/1.0.0/tools.analyzer-1.0.0",
    "host": "https://repo1.maven.org/maven2",
@@ -961,6 +779,19 @@
    }
  },

+  {
+    "path": "org/clojure/tools.analyzer.jvm/1.1.0/tools.analyzer.jvm-1.1.0",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "3f21bdbd549557232eb0bf0965b2beea34004d52",
+      "sha256": "0cyyhf82pn4mjw4whr4sx3cnxrgsk862dq92gn79yawxr6842i51"
+    },
+    "jar": {
+      "sha1": "027d2ebe594eb5f46d6bcea62593e184937b3011",
+      "sha256": "0kcfcn12dmyrm7sk1jkrlcb7ws8kazfqziv62mfid62xc095gayz"
+    }
+  },
+
  {
    "path": "org/clojure/tools.cli/1.0.194/tools.cli-1.0.194",
    "host": "https://repo1.maven.org/maven2",
@@ -1014,15 +845,15 @@
  },

  {
-    "path": "org/codehaus/mojo/animal-sniffer-annotations/1.14/animal-sniffer-annotations-1.14",
+    "path": "org/graalvm/js/js/20.1.0/js-20.1.0",
    "host": "https://repo1.maven.org/maven2",
    "pom": {
-      "sha1": "99a56e3312f8ece1d457c8ca0a3c4b69d173d000",
-      "sha256": "09ianw2880ch3x6xq5d2cz2b15ik6f4ndf8hb7ckw7lr0ndg2y8q"
+      "sha1": "95452a7fdac1d358f1dd66b33e49f4440e986922",
+      "sha256": "0gkazzg8771g3pc90fb99wmlk99rjimcryrmzz6zab742m4dbina"
    },
    "jar": {
-      "sha1": "775b7e22fb10026eed3f86e8dc556dfafe35f2d5",
-      "sha256": "0pchd4360mim0f0a6vwr33szigihgvv4ic1scz1l9mxssq5k4s10"
+      "sha1": "0abe5e8068014ccb34cf075637a00b7ce37e4a8c",
+      "sha256": "0v5pxjl9p7wwfrrzkkqh6qbvnn0p8n342smxzcqk3qxl4ah3aqnk"
    }
  },

@@ -1039,19 +870,6 @@
    }
  },

-  {
-    "path": "org/graalvm/js/js/20.1.0/js-20.1.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "95452a7fdac1d358f1dd66b33e49f4440e986922",
-      "sha256": "0gkazzg8771g3pc90fb99wmlk99rjimcryrmzz6zab742m4dbina"
-    },
-    "jar": {
-      "sha1": "0abe5e8068014ccb34cf075637a00b7ce37e4a8c",
-      "sha256": "0v5pxjl9p7wwfrrzkkqh6qbvnn0p8n342smxzcqk3qxl4ah3aqnk"
-    }
-  },
-
  {
    "path": "org/graalvm/regex/regex/20.1.0/regex-20.1.0",
    "host": "https://repo1.maven.org/maven2",
@@ -1182,6 +1000,19 @@
    }
  },

+  {
+    "path": "org/ow2/asm/asm/7.1/asm-7.1",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "7e40eb6619fd20bd7d98bf775bfdd810aec87ac7",
+      "sha256": "101i3pyrq082kjyz413hfqwkjjsyfnk9kx3rqr38ln56mlp78a8g"
+    },
+    "jar": {
+      "sha1": "fa29aa438674ff19d5e1386d2c3527a0267f291e",
+      "sha256": "1pnlb1ick32bihpzc599xl9ppd07qhls6pm0xaqwrj9cdlmzmcja"
+    }
+  },
+
  {
    "path": "org/ow2/asm/asm-analysis/7.1/asm-analysis-7.1",
    "host": "https://repo1.maven.org/maven2",
@@ -1234,19 +1065,6 @@
    }
  },

-  {
-    "path": "org/ow2/asm/asm/7.1/asm-7.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "7e40eb6619fd20bd7d98bf775bfdd810aec87ac7",
-      "sha256": "101i3pyrq082kjyz413hfqwkjjsyfnk9kx3rqr38ln56mlp78a8g"
-    },
-    "jar": {
-      "sha1": "fa29aa438674ff19d5e1386d2c3527a0267f291e",
-      "sha256": "1pnlb1ick32bihpzc599xl9ppd07qhls6pm0xaqwrj9cdlmzmcja"
-    }
-  },
-
  {
    "path": "org/wildfly/client/wildfly-client-config/1.0.1.Final/wildfly-client-config-1.0.1.Final",
    "host": "https://repo1.maven.org/maven2",
@@ -1299,6 +1117,19 @@
    }
  },

+  {
+    "path": "reagent/reagent/1.2.0/reagent-1.2.0",
+    "host": "https://repo.clojars.org",
+    "pom": {
+      "sha1": "d2279922777793edfc0ae9e01d68a832eb5ce52d",
+      "sha256": "1h1gk4cykidm1jx75dq426lrgf8r7900fcir5jz59zp1ka2a0ywb"
+    },
+    "jar": {
+      "sha1": "1b9a181b5c7ed3557768d2ea0c66f5616aef5e97",
+      "sha256": "0scvkzfqjs613z10rngh7427v3pxdqablf0fcl65pbpkzz16wgav"
+    }
+  },
+
  {
    "path": "re-com/re-com/2.8.0/re-com-2.8.0",
    "host": "https://repo.clojars.org",
@@ -1312,6 +1143,19 @@
    }
  },

+  {
+    "path": "refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0",
+    "host": "https://repo.clojars.org",
+    "pom": {
+      "sha1": "699468e940eace1064d6fa7a7553bf87d4ed4026",
+      "sha256": "12djd3mxi22b23c9vrv6amq1r9x9iq9b00s3ywl301rjmq5lqh4l"
+    },
+    "jar": {
+      "sha1": "2b3bb82da53b5db9c2b2aa298417816b81d0ed97",
+      "sha256": "1ysqabmlnghki6x0636zngxza2d83c85276wp9ma9wk183mkv52a"
+    }
+  },
+
  {
    "path": "re-frame/re-frame/1.3.0/re-frame-1.3.0",
    "host": "https://repo.clojars.org",
@@ -1351,32 +1195,6 @@
    }
  },

-  {
-    "path": "reagent/reagent/1.2.0/reagent-1.2.0",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "d2279922777793edfc0ae9e01d68a832eb5ce52d",
-      "sha256": "1h1gk4cykidm1jx75dq426lrgf8r7900fcir5jz59zp1ka2a0ywb"
-    },
-    "jar": {
-      "sha1": "1b9a181b5c7ed3557768d2ea0c66f5616aef5e97",
-      "sha256": "0scvkzfqjs613z10rngh7427v3pxdqablf0fcl65pbpkzz16wgav"
-    }
-  },
-
-  {
-    "path": "refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "0bce30b420249ba7e4b90cbb3e046b4bb5416389",
-      "sha256": "0zmg5qc8d55pry7832isiwd2q237znfjqjpxchd2hvlpalh5qnva"
-    },
-    "jar": {
-      "sha1": "6bc3441afc94f7ca024e41a864ca75e05df7e207",
-      "sha256": "0w8hax99y98l53mixxzx2ja0vcnhjv8dnsaz1zj3vqk775ns5w6i"
-    }
-  },
-
  {
    "path": "ring-cors/ring-cors/0.1.8/ring-cors-0.1.8",
    "host": "https://repo.clojars.org",
@@ -1456,15 +1274,15 @@
  },

  {
-    "path": "thheller/shadow-cljs/2.11.16/shadow-cljs-2.11.16-aot",
+    "path": "thheller/shadow-cljs/2.12.0/shadow-cljs-2.12.0-aot",
    "host": "https://repo.clojars.org",
    "pom": {
-      "sha1": "c06750fa2103c3ade8e9580034401d7379558768",
-      "sha256": "09m0yl56b2ld1a9031x6x3wlzys608hfzdf87hrnmpihg8khq5ph"
+      "sha1": "e89cabf1b6c7d268ee38343c839bc17c62160eaf",
+      "sha256": "0l9yv2c6acp3n2x5z1g9nqwqx58hl619srls5flnlf2x41f5gn7f"
    },
    "jar": {
-      "sha1": "6da05fd411b96fa939fa4df19aa28c0a37b0a87d",
-      "sha256": "1w6xm7bfg216cygmc4skns2laip3b7vp8nvgqmylpgna1k21mps2"
+      "sha1": "4748679d4953be302acf7e791b284a8dc49523d7",
+      "sha256": "1gcbna7wam7fnhrxxfb4v3agq0655la2fmwd7r9a6ip9xxc86z3a"
    }
  },

@@ -1481,6 +1299,19 @@
    }
  },

+  {
+    "path": "thheller/shadow-undertow/0.1.0/shadow-undertow-0.1.0",
+    "host": "https://repo.clojars.org",
+    "pom": {
+      "sha1": "456dc9b20bccd14b6012540547d1a8e7c47f7c66",
+      "sha256": "0gwxvbpkfvy84h01gjasd0fnfgqmsaybiilbz0461vaazvcd3v8b"
+    },
+    "jar": {
+      "sha1": "e072ad66285641c59df19f5352872a51da106156",
+      "sha256": "1ywcyfsrr3g42kxwchj6jvb2x43md3sdpnnk87h9m5g786ilay3r"
+    }
+  },
+
  {
    "path": "thheller/shadow-util/0.7.0/shadow-util-0.7.0",
    "host": "https://repo.clojars.org",
@@ -1,10 +1,9 @@
-args4j/args4j/2.0.26/args4j-2.0.26.jar
 bidi/bidi/2.1.6/bidi-2.1.6.jar
 binaryage/env-config/0.2.2/env-config-0.2.2.jar
-binaryage/oops/0.7.0/oops-0.7.0.jar
+binaryage/oops/0.7.2/oops-0.7.2.jar
 camel-snake-kebab/camel-snake-kebab/0.4.3/camel-snake-kebab-0.4.3.jar
-cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3.jar
-cider/piggieback/0.4.1/piggieback-0.4.1.jar
+cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0.jar
+cider/piggieback/0.5.2/piggieback-0.5.2.jar
 cljs-bean/cljs-bean/1.3.0/cljs-bean-1.3.0.jar
 clout/clout/2.1.2/clout-2.1.2.jar
 com/andrewmcveigh/cljs-time/0.5.2/cljs-time-0.5.2.jar
@@ -14,30 +13,19 @@ com/cognitect/transit-cljs/0.8.248/transit-cljs-0.8.248.jar
 com/cognitect/transit-java/1.0.343/transit-java-1.0.343.jar
 com/cognitect/transit-js/0.8.846/transit-js-0.8.846.jar
 com/fasterxml/jackson/core/jackson-core/2.8.7/jackson-core-2.8.7.jar
-com/google/code/findbugs/jsr305/3.0.1/jsr305-3.0.1.jar
-com/google/code/gson/gson/2.7/gson-2.7.jar
-com/google/elemental2/elemental2-core/1.0.0-RC1/elemental2-core-1.0.0-RC1.jar
-com/google/errorprone/error_prone_annotations/2.3.1/error_prone_annotations-2.3.1.jar
-com/google/guava/guava/25.1-jre/guava-25.1-jre.jar
-com/google/j2objc/j2objc-annotations/1.1/j2objc-annotations-1.1.jar
-com/google/javascript/closure-compiler-externs/v20200830/closure-compiler-externs-v20200830.jar
-com/google/javascript/closure-compiler-unshaded/v20200830/closure-compiler-unshaded-v20200830.jar
-com/google/jsinterop/base/1.0.0/base-1.0.0.jar
-com/google/jsinterop/jsinterop-annotations/1.0.2/jsinterop-annotations-1.0.2.jar
-com/google/protobuf/protobuf-java/3.11.1/protobuf-java-3.11.1.jar
-com/google/re2j/re2j/1.3/re2j-1.3.jar
 com/googlecode/json-simple/json-simple/1.1.1/json-simple-1.1.1.jar
+com/google/javascript/closure-compiler-unshaded/v20210302/closure-compiler-unshaded-v20210302.jar
 com/ibm/icu/icu4j/66.1/icu4j-66.1.jar
+commons-codec/commons-codec/1.10/commons-codec-1.10.jar
+commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4.jar
+commons-io/commons-io/2.6/commons-io-2.6.jar
+compojure/compojure/1.5.2/compojure-1.5.2.jar
 com/taoensso/encore/2.105.0/encore-2.105.0.jar
 com/taoensso/timbre/4.10.0/timbre-4.10.0.jar
 com/taoensso/truss/1.5.0/truss-1.5.0.jar
 com/taoensso/tufte/2.1.0/tufte-2.1.0.jar
 com/wsscode/pathom/2.2.31/pathom-2.2.31.jar
 com/wsscode/spec-inspec/1.0.0-alpha2/spec-inspec-1.0.0-alpha2.jar
-commons-codec/commons-codec/1.10/commons-codec-1.10.jar
-commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4.jar
-commons-io/commons-io/2.6/commons-io-2.6.jar
-compojure/compojure/1.5.2/compojure-1.5.2.jar
 crypto-equality/crypto-equality/1.0.0/crypto-equality-1.0.0.jar
 crypto-random/crypto-random/1.2.0/crypto-random-1.2.0.jar
 day8/re-frame/test/0.1.5/test-0.1.5.jar
@@ -49,16 +37,15 @@ hickory/hickory/0.7.1/hickory-0.7.1.jar
 http-kit/http-kit/2.2.0/http-kit-2.2.0.jar
 instaparse/instaparse/1.4.0/instaparse-1.4.0.jar
 io/aviso/pretty/0.1.33/pretty-0.1.33.jar
-io/undertow/undertow-core/2.1.3.Final/undertow-core-2.1.3.Final.jar
+io/undertow/undertow-core/2.2.4.Final/undertow-core-2.2.4.Final.jar
 javax/servlet/servlet-api/2.5/servlet-api-2.5.jar
 javax/xml/bind/jaxb-api/2.3.0/jaxb-api-2.3.0.jar
 medley/medley/0.8.2/medley-0.8.2.jar
 mvxcvi/alphabase/1.0.0/alphabase-1.0.0.jar
 net/cgrand/macrovich/0.2.1/macrovich-0.2.1.jar
-nrepl/nrepl/0.7.0/nrepl-0.7.0.jar
-org/checkerframework/checker-qual/2.0.0/checker-qual-2.0.0.jar
+nrepl/nrepl/1.0.0/nrepl-1.0.0.jar
 org/clojure/clojure/1.10.1/clojure-1.10.1.jar
-org/clojure/clojurescript/1.10.773/clojurescript-1.10.773.jar
+org/clojure/clojurescript/1.10.844/clojurescript-1.10.844.jar
 org/clojure/core.async/1.3.610/core.async-1.3.610.jar
 org/clojure/core.cache/1.0.207/core.cache-1.0.207.jar
 org/clojure/core.memoize/1.0.236/core.memoize-1.0.236.jar
@@ -66,19 +53,18 @@ org/clojure/core.rrb-vector/0.1.1/core.rrb-vector-0.1.1.jar
 org/clojure/core.specs.alpha/0.2.44/core.specs.alpha-0.2.44.jar
 org/clojure/data.json/1.0.0/data.json-1.0.0.jar
 org/clojure/data.priority-map/1.0.0/data.priority-map-1.0.0.jar
-org/clojure/google-closure-library-third-party/0.0-20191016-6ae1f72f/google-closure-library-third-party-0.0-20191016-6ae1f72f.jar
-org/clojure/google-closure-library/0.0-20191016-6ae1f72f/google-closure-library-0.0-20191016-6ae1f72f.jar
+org/clojure/google-closure-library/0.0-20201211-3e6c510d/google-closure-library-0.0-20201211-3e6c510d.jar
+org/clojure/google-closure-library-third-party/0.0-20201211-3e6c510d/google-closure-library-third-party-0.0-20201211-3e6c510d.jar
 org/clojure/spec.alpha/0.2.176/spec.alpha-0.2.176.jar
 org/clojure/test.check/1.1.0/test.check-1.1.0.jar
-org/clojure/tools.analyzer.jvm/1.1.0/tools.analyzer.jvm-1.1.0.jar
 org/clojure/tools.analyzer/1.0.0/tools.analyzer-1.0.0.jar
+org/clojure/tools.analyzer.jvm/1.1.0/tools.analyzer.jvm-1.1.0.jar
 org/clojure/tools.cli/1.0.194/tools.cli-1.0.194.jar
 org/clojure/tools.logging/1.1.0/tools.logging-1.1.0.jar
 org/clojure/tools.macro/0.1.5/tools.macro-0.1.5.jar
 org/clojure/tools.reader/1.3.3/tools.reader-1.3.3.jar
-org/codehaus/mojo/animal-sniffer-annotations/1.14/animal-sniffer-annotations-1.14.jar
-org/graalvm/js/js-scriptengine/20.1.0/js-scriptengine-20.1.0.jar
 org/graalvm/js/js/20.1.0/js-20.1.0.jar
+org/graalvm/js/js-scriptengine/20.1.0/js-scriptengine-20.1.0.jar
 org/graalvm/regex/regex/20.1.0/regex-20.1.0.jar
 org/graalvm/sdk/graal-sdk/20.1.0/graal-sdk-20.1.0.jar
 org/graalvm/truffle/truffle-api/20.1.0/truffle-api-20.1.0.jar
@@ -89,28 +75,29 @@ org/jboss/xnio/xnio-api/3.8.0.Final/xnio-api-3.8.0.Final.jar
 org/jboss/xnio/xnio-nio/3.8.0.Final/xnio-nio-3.8.0.Final.jar
 org/jsoup/jsoup/1.9.2/jsoup-1.9.2.jar
 org/msgpack/msgpack/0.6.12/msgpack-0.6.12.jar
+org/ow2/asm/asm/7.1/asm-7.1.jar
 org/ow2/asm/asm-analysis/7.1/asm-analysis-7.1.jar
 org/ow2/asm/asm-commons/7.1/asm-commons-7.1.jar
 org/ow2/asm/asm-tree/7.1/asm-tree-7.1.jar
 org/ow2/asm/asm-util/7.1/asm-util-7.1.jar
-org/ow2/asm/asm/7.1/asm-7.1.jar
 org/wildfly/client/wildfly-client-config/1.0.1.Final/wildfly-client-config-1.0.1.Final.jar
 org/wildfly/common/wildfly-common/1.5.2.Final/wildfly-common-1.5.2.Final.jar
 prismatic/schema/1.1.7/schema-1.1.7.jar
 quoin/quoin/0.1.2/quoin-0.1.2.jar
+reagent/reagent/1.2.0/reagent-1.2.0.jar
 re-com/re-com/2.8.0/re-com-2.8.0.jar
+refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0.jar
 re-frame/re-frame/1.3.0/re-frame-1.3.0.jar
 re-frisk-remote/re-frisk-remote/1.6.0/re-frisk-remote-1.6.0.jar
 re-frisk/sente/1.15.0/sente-1.15.0.jar
-reagent/reagent/1.2.0/reagent-1.2.0.jar
-refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0.jar
 ring-cors/ring-cors/0.1.8/ring-cors-0.1.8.jar
 ring/ring-codec/1.1.2/ring-codec-1.1.2.jar
 ring/ring-core/1.8.1/ring-core-1.8.1.jar
 spec-coerce/spec-coerce/1.0.0-alpha6/spec-coerce-1.0.0-alpha6.jar
 status-im/timbre/4.10.0-2-status/timbre-4.10.0-2-status.jar
 thheller/shadow-client/1.3.3/shadow-client-1.3.3.jar
-thheller/shadow-cljs/2.11.16/shadow-cljs-2.11.16-aot.jar
+thheller/shadow-cljs/2.12.0/shadow-cljs-2.12.0-aot.jar
 thheller/shadow-cljsjs/0.0.21/shadow-cljsjs-0.0.21.jar
+thheller/shadow-undertow/0.1.0/shadow-undertow-0.1.0.jar
 thheller/shadow-util/0.7.0/shadow-util-0.7.0.jar
 viebel/codox-klipse-theme/0.0.1/codox-klipse-theme-0.0.1.jar
@@ -99,7 +99,7 @@
    "process": "0.11.10",
    "react-test-renderer": "18.0.0",
    "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#refs/tags/v2.0.2-status",
-    "shadow-cljs": "2.11.16"
+    "shadow-cljs": "2.25.0"
  },
  "binary": {
    "module_name": "status_nodejs_addon",
@@ -0,0 +1,15 @@
+@echo off
+
+:: Determine user directory path
+set USER_PATH=%USERPROFILE%
+
+:: Construct the path to emulator
+set PATH_TO_EMULATOR=%USER_PATH%\AppData\Local\Android\Sdk\emulator\emulator.exe
+
+:: Get the list of AVDs. This assumes only one AVD is present.
+for /f "delims=" %%i in ('%PATH_TO_EMULATOR% -list-avds') do set AVD_NAME=%%i
+
+:: Start the AVD
+%PATH_TO_EMULATOR% -avd %AVD_NAME%
+
+:: End of script
@@ -0,0 +1,19 @@
+@echo off
+
+:: Determine user directory path
+set USER_PATH=%USERPROFILE%
+
+:: Construct the path to adb based on typical Android SDK installation
+set ADB_PATH=%USER_PATH%\AppData\Local\Android\Sdk\platform-tools\adb.exe
+
+:: Check if adb exists at the constructed path
+if not exist "%ADB_PATH%" (
+    echo "adb not found. Please ensure adb is installed."
+    exit /b
+)
+
+:: Run the adb commands
+%ADB_PATH% kill-server
+%ADB_PATH% -a nodaemon server start
+
+:: End of script
@@ -0,0 +1,18 @@
+@echo off
+
+REM Execute the netsh command to delete the existing port proxy.
+netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=127.0.0.1
+
+REM Use bash to retrieve the IP address from WSL's eth0 interface using the ip command.
+FOR /F "tokens=*" %%i IN ('bash -c "ip -4 addr show eth0 | grep -oP '(?<=inet\s)\d+\.\d+\.\d+\.\d+'"') DO SET WSL_CLIENT=%%i
+
+REM Use the retrieved IP address to set up the new port proxy.
+netsh interface portproxy add v4tov4 listenport=8081 listenaddress=127.0.0.1 connectport=8081 connectaddress=%WSL_CLIENT%
+
+echo.
+echo Operations executed:
+echo 1. Deleted any existing port proxy on port 8081 and address 127.0.0.1.
+echo 2. Retrieved WSL eth0 IP address: %WSL_CLIENT%.
+echo 3. Created a new port proxy on port 8081, local address 127.0.0.1, forwarding to WSL IP address on the same port.
+
+pause
@@ -3,23 +3,27 @@

 :dependencies [[reagent "1.2.0"]
                [re-frame "1.3.0"]
-                [binaryage/oops "0.7.0"]
+                [binaryage/oops "0.7.2"]
                [com.andrewmcveigh/cljs-time "0.5.2"]
                [status-im/timbre "4.10.0-2-status"]
-                [com.taoensso/encore "2.105.0"]
                [hickory "0.7.1"]
                [cljs-bean "1.3.0"]
                [com.cognitect/transit-cljs "0.8.248"]
                [mvxcvi/alphabase "1.0.0"]
                [camel-snake-kebab "0.4.3"]
-                ;; dev dependencies
+                ;; Dev dependencies
                [refactor-nrepl "2.5.0"]
                [cider/cider-nrepl "0.25.3"]
                [cider/piggieback "0.4.1"]
                [re-frisk-remote "1.6.0"]
-                ;; routing
+                ;; We don't use the encore library, but re-frisk requires re-frisk/sente (fork of
+                ;; com.taoensso/sente), which in turn requires encore. We need to bump encore to
+                ;; 3.21.0+ to remove a warning displayed while shadow-cljs starts (commit
+                ;; https://github.com/ptaoussanis/encore/commit/f7a21567b9611a63999609ca183c7fb175034bd6).
+                [com.taoensso/encore "3.21.0"]
+                ;; Routing
                [bidi "2.1.6"]
-                ;; test dependencies
+                ;; Test dependencies
                [day8.re-frame/test "0.1.5"]
                [com.taoensso/tufte "2.1.0"]]

@@ -48,10 +52,9 @@
                    :after-load-async  status-im2.setup.hot-reload/reload
                    :build-notify      status-im2.setup.hot-reload/build-notify
                    :preloads          [re-frisk-remote.preload
-                                        ;; In order to use component test helpers in
-                                        ;; the REPL we need to preload namespaces
-                                        ;; that are not normally required by
-                                        ;; production code, such as
+                                        ;; In order to use component test helpers in the REPL we
+                                        ;; need to preload namespaces that are not normally required
+                                        ;; by production code, such as
                                        ;; @testing-library/react-native.
                                        test-helpers.component]}
         :closure-defines
@@ -99,8 +102,8 @@
   :output-dir "target/test"
   :optimizations :simple
   :target :node-test
-   ;; When running tests without a REPL you can uncomment below line to `make test-watch` a specific file
-   ;; :ns-regexp        "status-im2.subs.chat.messages-test$"
+   ;; Uncomment line below to `make test-watch` a specific file
+   ;; :ns-regexp "status-im2.subs.chat.messages-test$"
   :main
   status-im.test-runner/main
   ;; set :ui-driven to true to let shadow-cljs inject node-repl
@@ -258,6 +258,13 @@
  (log/debug "[native-module] hash-message")
  (.hashMessage ^js (status) message callback))

+(defn start-searching-for-local-pairing-peers
+  "starts a UDP multicast beacon that both listens for and broadcasts to LAN peers"
+  [callback]
+  (log/info "[native-module] Start Searching for Local Pairing Peers"
+            {:fn :start-searching-for-local-pairing-peers})
+  (.startSearchForLocalPairingPeers ^js (status) callback))
+
 (defn local-pairing-preflight-outbound-check
  "Checks whether the device has allows connecting to the local server"
  [callback]
@@ -0,0 +1,64 @@
+(ns quo2.components.calendar.calendar.component-spec
+  (:require [quo2.components.calendar.calendar.view :as calendar]
+            [test-helpers.component :as h]
+            [cljs-time.core :as time]))
+
+(def start-date (time/date-time (time/year (time/now)) (time/month (time/now)) 5))
+(def end-date (time/date-time (time/plus start-date (time/days 2))))
+
+(h/describe "calendar component"
+  (h/test "default render of calendar component"
+    (h/render
+     [calendar/view
+      {:start-date start-date
+       :end-date   end-date}])
+    (-> (h/expect (h/query-by-translation-text "Mo"))
+        (h/is-truthy)))
+
+  (h/test "should call on-change with selected date on first click"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [calendar/view
+        {:start-date nil
+         :end-date   nil
+         :on-change  on-change}])
+      (h/fire-event :press (h/query-by-text (str (time/day start-date))))
+      (h/was-called-with on-change {:start-date start-date :end-date nil})))
+
+  (h/test "should call on-change with start and end date on second click"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [calendar/view
+        {:start-date start-date :end-date nil :on-change on-change}])
+      (h/fire-event :press (h/query-by-text (str (time/day end-date))))
+      (h/was-called-with on-change {:start-date start-date :end-date end-date})))
+
+  (h/test "should reset the dates on third click"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [calendar/view
+        {:start-date start-date
+         :end-date   end-date
+         :on-change  on-change}])
+      (h/fire-event :press (h/query-by-text (str (time/day start-date))))
+      (h/was-called-with on-change {:start-date start-date :end-date nil})))
+
+  (h/test "should reset dates when start date is clicked again"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [calendar/view
+        {:start-date start-date
+         :end-date   nil
+         :on-change  on-change}])
+      (h/fire-event :press (h/query-by-text (str (time/day start-date))))
+      (h/was-called-with on-change {:start-date nil :end-date nil})))
+
+  (h/test "should assign start and end date correctly when upper range selected first"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [calendar/view
+        {:start-date end-date
+         :end-date   nil
+         :on-change  on-change}])
+      (h/fire-event :press (h/query-by-text (str (time/day start-date))))
+      (h/was-called-with on-change {:start-date start-date :end-date end-date}))))
@@ -0,0 +1,7 @@
+(ns quo2.components.calendar.calendar.days-grid.style)
+
+(def container-days
+  {:flex-grow         1
+   :margin-top        4
+   :margin-horizontal 8
+   :overflow          :hidden})
@@ -0,0 +1,65 @@
+(ns quo2.components.calendar.calendar.days-grid.utils
+  (:require
+    [utils.number :as utils.number]
+    [cljs-time.core :as time]))
+
+(defn- day-of-week
+  [date]
+  (let [day (time/day-of-week date)]
+    (mod day 7)))
+
+(defn- add-days
+  [date days]
+  (time/plus date (time/days days)))
+
+(defn day-grid
+  [year month]
+  (let [year      (utils.number/parse-int year)
+        month     (utils.number/parse-int month)
+        first-day (time/date-time year month 1)
+        start-day (add-days first-day (- 0 (day-of-week first-day)))
+        end-day   (add-days start-day 34)]
+    (loop [days        []
+           current-day start-day]
+      (if (time/after? current-day end-day)
+        days
+        (recur (conj days current-day) (add-days current-day 1))))))
+
+(defn get-day-state
+  [day today year month start-date end-date]
+  (cond
+    (and start-date (time/equal? day start-date))             :selected
+    (and end-date (time/equal? day end-date))                 :selected
+    (and (= (time/year day) (time/year today))
+         (= (time/month day) (time/month today))
+         (= (time/day day) (time/day today)))                 :today
+    (and (= (time/year day) year) (= (time/month day) month)) :default
+    :else                                                     :disabled))
+
+(defn update-range
+  [day start-date end-date]
+  (let [new-state (cond
+                    (and start-date end-date)                     {:start-date day :end-date nil}
+                    (and start-date (time/equal? day start-date)) {:start-date nil :end-date nil}
+                    (and end-date (time/equal? day end-date))     {:start-date nil :end-date nil}
+                    (nil? start-date)                             {:start-date day :end-date nil}
+                    (nil? end-date)                               {:start-date start-date :end-date day}
+                    :else                                         {:start-date start-date
+                                                                   :end-date   end-date})]
+    (if (and (:start-date new-state)
+             (:end-date new-state)
+             (time/after? (:start-date new-state) (:end-date new-state)))
+      {:start-date (:end-date new-state) :end-date (:start-date new-state)}
+      new-state)))
+
+(defn in-range?
+  [day start-date end-date]
+  (and start-date end-date (time/after? day start-date) (time/before? day end-date)))
+
+(defn get-in-range-pos
+  [day start-date end-date]
+  (cond
+    (or (nil? start-date) (nil? end-date))        nil
+    (and start-date (time/equal? day start-date)) :start
+    (and end-date (time/equal? day end-date))     :end
+    (in-range? day start-date end-date)           :middle))
@@ -0,0 +1,51 @@
+(ns quo2.components.calendar.calendar.days-grid.utils-test
+  (:require [cljs.test :refer-macros [deftest is testing]]
+            [quo2.components.calendar.calendar.days-grid.utils :as utils]
+            [cljs-time.core :as time]))
+
+(deftest day-grid-test
+  (let [day-grid-result (utils/day-grid "2023" "7")]
+    (testing "it returns correct days grid"
+      (is (= 35 (count day-grid-result)))
+      (is (time/equal? (time/date-time 2023 6 25) (first day-grid-result)))
+      (is (time/equal? (time/date-time 2023 7 29) (last day-grid-result))))))
+
+(deftest get-day-state-test
+  (let [today      (time/date-time 2023 7 27)
+        year       2023
+        month      7
+        start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)]
+    (testing "it returns :today when day equals today"
+      (is (= :today (utils/get-day-state today today year month start-date end-date))))
+    (testing "it returns :selected when day equals start-date and not today"
+      (is
+       (= :selected (utils/get-day-state start-date today year month start-date end-date))))
+    (testing "it returns :selected when day equals end-date and not today"
+      (is
+       (= :selected (utils/get-day-state end-date today year month start-date end-date))))))
+
+(deftest update-range-test
+  (let [start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)
+        day        (time/date-time 2023 7 27)]
+    (testing "it returns updated range"
+      (is
+       (= {:start-date day :end-date nil} (utils/update-range day start-date end-date))))))
+
+(deftest in-range-test
+  (let [start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)
+        day        (time/date-time 2023 7 27)]
+    (testing "it returns true when day is within range"
+      (is (utils/in-range? day start-date end-date))
+      (is (not (utils/in-range? (time/date-time 2023 7 19) start-date end-date))))))
+
+(deftest get-in-range-pos-test
+  (let [start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)
+        day        (time/date-time 2023 7 27)]
+    (testing "it returns correct position within range"
+      (is (= :start (utils/get-in-range-pos start-date start-date end-date)))
+      (is (= :end (utils/get-in-range-pos end-date start-date end-date)))
+      (is (= :middle (utils/get-in-range-pos day start-date end-date))))))
@@ -0,0 +1,41 @@
+(ns quo2.components.calendar.calendar.days-grid.view
+  (:require [react-native.core :as rn]
+            [cljs-time.core :as time]
+            [quo2.components.calendar.calendar.days-grid.utils :as utils]
+            [quo2.components.calendar.calendar-day.view :as calendar-day]
+            [quo2.components.calendar.calendar.days-grid.style :as style]))
+
+(defn- day-view
+  [day _ _ {:keys [year month selection-range on-press customization-color]}]
+  (let [today      (time/now)
+        start-date (:start-date selection-range)
+        end-date   (:end-date selection-range)
+        state      (utils/get-day-state day today year month start-date end-date)
+        in-range   (utils/get-in-range-pos day start-date end-date)
+        on-press   #(on-press (time/date-time day))]
+    [calendar-day/view
+     {:customization-color customization-color
+      :state               state
+      :in-range            in-range
+      :on-press            on-press}
+     (str (time/day day))]))
+
+(defn view
+  [{:keys [year month on-change start-date end-date customization-color]}]
+  (let [on-day-press (fn [day]
+                       (let [new-selection (utils/update-range day start-date end-date)]
+                         (on-change new-selection)))]
+    [rn/view
+     {:style style/container-days}
+     [rn/flat-list
+      {:data                    (utils/day-grid year month)
+       :key-fn                  str
+       :num-columns             7
+       :content-container-style {:margin-horizontal -2}
+       :render-fn               day-view
+       :render-data             {:customization-color customization-color
+                                 :year                year
+                                 :month               month
+                                 :on-press            on-day-press
+                                 :selection-range     {:start-date start-date
+                                                       :end-date   end-date}}}]]))
@@ -0,0 +1,25 @@
+(ns quo2.components.calendar.calendar.month-picker.component-spec
+  (:require [quo2.components.calendar.calendar.month-picker.view :as month-picker]
+            [test-helpers.component :as h]))
+
+(h/describe "month-picker component"
+  (h/test "default render of month-picker component"
+    (h/render
+     [month-picker/view
+      {:year "2023" :month "7"}])
+    (-> (h/expect (h/query-by-translation-text "July 2023"))
+        (h/is-truthy)))
+
+  (h/test "should call on-change with next month when right button pressed"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [month-picker/view {:year "2023" :month "7" :on-change on-change}])
+      (h/fire-event :press (h/query-by-label-text :next-month-button))
+      (h/was-called on-change)))
+
+  (h/test "should call on-change with previous month when left button pressed"
+    (let [on-change (h/mock-fn)]
+      (h/render
+       [month-picker/view {:year "2023" :month "1" :on-change on-change}])
+      (h/fire-event :press (h/query-by-label-text :previous-month-button))
+      (h/was-called on-change))))
@@ -0,0 +1,14 @@
+(ns quo2.components.calendar.calendar.month-picker.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:align-items        :center
+   :flex-direction     :row
+   :flex-grow          1
+   :padding-horizontal 12
+   :padding-vertical   9
+   :justify-content    :space-between})
+
+(defn text
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
@@ -0,0 +1,22 @@
+(ns quo2.components.calendar.calendar.month-picker.utils
+  (:require [utils.datetime :as datetime]))
+
+(defn format-month-year
+  [year month]
+  (let [month (cond
+                (or (nil? month) (zero? month)) 1
+                (> month 12)                    12
+                :else                           month)]
+    (str (datetime/format-long-month month) " " year)))
+
+(defn next-month
+  [year month]
+  (let [new-month (if (= month 12) 1 (inc month))
+        new-year  (if (= month 12) (inc year) year)]
+    {:year (str new-year) :month (str new-month)}))
+
+(defn previous-month
+  [year month]
+  (let [new-month (if (= month 1) 12 (dec month))
+        new-year  (if (= month 1) (dec year) year)]
+    {:year (str new-year) :month (str new-month)}))
@@ -0,0 +1,20 @@
+(ns quo2.components.calendar.calendar.month-picker.utils-test
+  (:require [cljs.test :refer-macros [deftest is testing]]
+            [quo2.components.calendar.calendar.month-picker.utils :as utils]))
+
+(deftest format-month-year-test
+  (testing "returns correct format for given year and month"
+    (is (= (utils/format-month-year 2023 1) "January 2023"))
+    (is (= (utils/format-month-year 2023 12) "December 2023"))
+    (is (= (utils/format-month-year 2023 0) "January 2023"))
+    (is (= (utils/format-month-year 2023 13) "December 2023"))))
+
+(deftest next-month-test
+  (testing "returns the next month and year"
+    (is (= (utils/next-month 2023 1) {:year "2023" :month "2"}))
+    (is (= (utils/next-month 2023 12) {:year "2024" :month "1"}))))
+
+(deftest previous-month-test
+  (testing "returns the previous month and year"
+    (is (= (utils/previous-month 2023 1) {:year "2022" :month "12"}))
+    (is (= (utils/previous-month 2023 12) {:year "2023" :month "11"}))))
@@ -0,0 +1,36 @@
+(ns quo2.components.calendar.calendar.month-picker.view
+  (:require [react-native.core :as rn]
+            [utils.number :as utils.number]
+            [quo2.theme :as theme]
+            [quo2.components.buttons.button.view :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.calendar.calendar.month-picker.style :as style]
+            [quo2.components.calendar.calendar.month-picker.utils :as utils]))
+
+(defn- view-internal
+  [{:keys [year month on-change theme]}]
+  (let [year  (utils.number/parse-int year)
+        month (utils.number/parse-int month)]
+    [rn/view
+     {:style style/container}
+     [button/button
+      {:icon                true
+       :type                :outline
+       :accessibility-label :previous-month-button
+       :size                24
+       :on-press            #(on-change (utils/previous-month year month))}
+      :i/chevron-left]
+     [text/text
+      {:weight :semi-bold
+       :size   :paragraph-1
+       :style  (style/text theme)}
+      (utils/format-month-year year month)]
+     [button/button
+      {:icon                true
+       :accessibility-label :next-month-button
+       :size                24
+       :type                :outline
+       :on-press            #(on-change (utils/next-month year month))}
+      :i/chevron-right]]))
+
+(def view (theme/with-theme view-internal))
@@ -0,0 +1,14 @@
+(ns quo2.components.calendar.calendar.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [theme]
+  {:flex-direction   :row
+   :height           270
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :border-radius    12
+   :border-width     1
+   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)})
+
+(def container-main
+  {:flex-grow 1})
@@ -0,0 +1,25 @@
+(ns quo2.components.calendar.calendar.utils
+  (:require [utils.datetime :as datetime]
+            [utils.number :as utils.number]
+            [clojure.string :as string]))
+
+(defn generate-years
+  [current-year]
+  (let [current-year current-year]
+    (reverse (vec (range (- current-year 100) (+ current-year 1))))))
+
+(defn current-year
+  []
+  (-> (datetime/now)
+      datetime/timestamp->year-month-day-date
+      (string/split #"-")
+      first
+      utils.number/parse-int))
+
+(defn current-month
+  []
+  (-> (datetime/now)
+      datetime/timestamp->year-month-day-date
+      (string/split #"-")
+      second
+      utils.number/parse-int))
@@ -0,0 +1,30 @@
+(ns quo2.components.calendar.calendar.utils-test
+  (:require [cljs.test :refer-macros [deftest is testing]]
+            [quo2.components.calendar.calendar.utils :as utils]
+            [utils.datetime :as datetime]
+            [clojure.string :as string]
+            [utils.number :as utils.number]))
+
+(deftest generate-years-test
+  (testing "returns correct years range"
+    (let [current-year (utils/current-year)]
+      (is (= (last (utils/generate-years current-year)) (- current-year 100)))
+      (is (= (first (utils/generate-years current-year)) current-year)))))
+
+(deftest current-year-test
+  (testing "returns the current year"
+    (let [current-year (-> (datetime/now)
+                           datetime/timestamp->year-month-day-date
+                           (string/split #"-")
+                           first
+                           utils.number/parse-int)]
+      (is (= (utils/current-year) current-year)))))
+
+(deftest current-month-test
+  (testing "returns the current month"
+    (let [current-month (-> (datetime/now)
+                            datetime/timestamp->year-month-day-date
+                            (string/split #"-")
+                            second
+                            utils.number/parse-int)]
+      (is (= (utils/current-month) current-month)))))
@@ -0,0 +1,42 @@
+(ns quo2.components.calendar.calendar.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
+            [reagent.core :as reagent]
+            [utils.number :as utils.number]
+            [quo2.components.calendar.calendar.utils :as utils]
+            [quo2.components.calendar.calendar.style :as style]
+            [quo2.components.calendar.calendar.years-list.view :as years-list]
+            [quo2.components.calendar.calendar.days-grid.view :as days-grid]
+            [quo2.components.calendar.calendar.weekdays-header.view :as weekdays-header]
+            [quo2.components.calendar.calendar.month-picker.view :as month-picker]))
+
+(defn- view-internal
+  []
+  (let [selected-year   (reagent/atom (utils/current-year))
+        selected-month  (reagent/atom (utils/current-month))
+        on-change-year  #(reset! selected-year %)
+        on-change-month (fn [new-date]
+                          (reset! selected-year (utils.number/parse-int (:year new-date)))
+                          (reset! selected-month (utils.number/parse-int (:month new-date))))]
+    (fn [{:keys [on-change start-date end-date theme]}]
+      [rn/view
+       {:style (style/container theme)}
+       [years-list/view
+        {:on-change-year on-change-year
+         :year           @selected-year}]
+       [rn/view
+        {:style style/container-main}
+        [month-picker/view
+         {:year      @selected-year
+          :month     @selected-month
+          :on-change on-change-month}]
+        [weekdays-header/view]
+        [days-grid/view
+         {:year                @selected-year
+          :month               @selected-month
+          :start-date          start-date
+          :end-date            end-date
+          :on-change           on-change
+          :customization-color :blue}]]])))
+
+(def view (theme/with-theme view-internal))
@@ -0,0 +1,18 @@
+(ns quo2.components.calendar.calendar.weekdays-header.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container-weekday-row
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :padding-horizontal 8})
+
+(def container-weekday
+  {:width           32
+   :height          30
+   :padding-top     2
+   :justify-content :center
+   :align-items     :center})
+
+(defn text-weekdays
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
@@ -0,0 +1,23 @@
+(ns quo2.components.calendar.calendar.weekdays-header.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
+            [utils.datetime :as datetime]
+            [utils.i18n :as i18n]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.calendar.calendar.weekdays-header.style :as style]))
+
+(defn- view-internal
+  [theme]
+  [rn/view
+   {:style style/container-weekday-row}
+   (for [weekday datetime/weekday-names]
+     [rn/view
+      {:style style/container-weekday
+       :key   weekday}
+      [text/text
+       {:weight :medium
+        :size   :paragraph-2
+        :style  (style/text-weekdays theme)}
+       (str (i18n/label weekday))]])])
+
+(def view (theme/with-theme view-internal))
@@ -0,0 +1,33 @@
+(ns quo2.components.calendar.calendar.years-list.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn gradient-start-color
+  [theme]
+  (colors/theme-colors colors/white colors/neutral-90 theme))
+
+(defn gradient-end-color
+  [theme]
+  (colors/theme-colors colors/white-opa-0 colors/neutral-100-opa-0 theme))
+
+(def gradient-view
+  {:position               :absolute
+   :height                 50
+   :border-top-left-radius 12
+   :top                    0
+   :left                   0
+   :right                  0})
+
+(defn container-years
+  [theme]
+  {:border-width              1
+   :overflow                  :hidden
+   :padding-left              8
+   :padding-right             7
+   :padding-vertical          8
+   :margin-left               -1
+   :margin-top                -1
+   :margin-bottom             -1
+   :border-style              :dashed
+   :border-top-left-radius    12
+   :border-bottom-left-radius 12
+   :border-color              (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)})
@@ -0,0 +1,49 @@
+(ns quo2.components.calendar.calendar.years-list.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
+            [react-native.linear-gradient :as linear-gradient]
+            [quo2.components.calendar.calendar.utils :as utils]
+            [quo2.components.calendar.calendar-year.view :as calendar-year]
+            [quo2.components.calendar.calendar.years-list.style :as style]))
+
+(defn- year-view
+  [year _ _ {:keys [selected-year on-press]}]
+  [calendar-year/view
+   {:selected? (= year selected-year)
+    :on-press  #(on-press year)}
+   (str year)])
+
+(defn- separator
+  []
+  [rn/view {:style {:height 4}}])
+
+(defn- footer
+  []
+  [rn/view {:style {:height 32}}])
+
+(defn- gradiant-overview
+  [theme]
+  [linear-gradient/linear-gradient
+   {:colors [(style/gradient-start-color theme) (style/gradient-end-color theme)]
+    :style  style/gradient-view
+    :start  {:x 0 :y 0}
+    :end    {:x 0 :y 1}}])
+
+(defn view-internal
+  [{:keys [on-change-year year theme]}]
+  [rn/view
+   {:style (style/container-years theme)}
+   [rn/flat-list
+    {:data                            (utils/generate-years (utils/current-year))
+     :key-fn                          str
+     :list-key                        :years-list
+     :inverted                        true
+     :shows-vertical-scroll-indicator false
+     :footer                          [footer]
+     :separator                       [separator]
+     :render-fn                       year-view
+     :render-data                     {:selected-year year
+                                       :on-press      #(on-change-year %)}}]
+   [gradiant-overview theme]])
+
+(def view (theme/with-theme view-internal))
@@ -0,0 +1,14 @@
+(ns quo2.components.calendar.calendar-day.component-spec
+  (:require [quo2.components.calendar.calendar-day.view :as calendar-day]
+            [test-helpers.component :as h]))
+
+(h/describe "calendar-day component"
+  (h/test "default render of calendar-day component"
+    (h/render [calendar-day/view {} "25"])
+    (h/is-truthy (h/query-by-text "25")))
+
+  (h/test "should not call on-press when state is :disabled"
+    (let [on-press (h/mock-fn)]
+      (h/render [calendar-day/view {:on-press on-press :state :disabled} "25"])
+      (h/fire-event :press (h/query-by-text "25"))
+      (h/was-not-called on-press))))
@@ -0,0 +1,69 @@
+(ns quo2.components.calendar.calendar-day.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def wrapper
+  {:flex            1
+   :margin-vertical 2
+   :justify-content :center
+   :align-items     :center})
+
+(def container-base
+  {:align-items     :center
+   :justify-content :center
+   :border-radius   10
+   :height          32
+   :width           32})
+
+(defn text-base
+  [theme]
+  {:color      (colors/theme-colors colors/neutral-100 colors/white theme)
+   :text-align :center})
+
+(defn in-range-background
+  [{:keys [in-range theme]}]
+  (cond-> {:position :absolute
+           :top      0
+           :right    0
+           :left     0
+           :bottom   0}
+    (= in-range :start)
+    (assoc :background-color
+           (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+           :left 20)
+
+    (= in-range :middle)
+    (assoc :background-color
+           (colors/theme-colors colors/neutral-5 colors/neutral-80 theme))
+
+    (= in-range :end)
+    (assoc :background-color
+           (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+           :right 20)))
+
+(defn container
+  [{:keys [state theme customization-color]}]
+  (cond-> container-base
+    (= state :default)
+    (assoc :background-color colors/neutral-100-opa-0)
+
+    (= state :disabled)
+    (assoc :opacity 0.3)
+
+    (= state :selected)
+    (assoc :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme))))
+
+(defn text
+  [{:keys [state theme]}]
+  (cond-> (text-base theme)
+    (= state :selected) (assoc :color colors/white)))
+
+(defn indicator
+  [{:keys [state theme customization-color]}]
+  {:width            4
+   :position         :absolute
+   :bottom           3
+   :height           2
+   :border-radius    8
+   :background-color (if (= state :today)
+                       (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
+                       colors/neutral-100-opa-0)})
@@ -0,0 +1,31 @@
+(ns quo2.components.calendar.calendar-day.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.calendar.calendar-day.style :as style]))
+
+(defn- view-internal
+  [{:keys [state in-range on-press customization-color theme]
+    :or   {state :default}}
+   day]
+  [rn/view {:style style/wrapper}
+   [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
+   [rn/touchable-opacity
+    {:on-press on-press
+     :style    (style/container
+                {:state               state
+                 :theme               theme
+                 :customization-color customization-color})
+     :disabled (= state :disabled)}
+    [text/text
+     {:weight :medium
+      :size   :paragraph-2
+      :style  (style/text {:state state :theme theme})}
+     day]
+    [rn/view
+     {:style (style/indicator
+              {:state               state
+               :theme               theme
+               :customization-color customization-color})}]]])
+
+(def view (theme/with-theme view-internal))
@@ -0,0 +1,14 @@
+(ns quo2.components.calendar.calendar-year.component-spec
+  (:require [quo2.components.calendar.calendar-year.view :as calendar-year]
+            [test-helpers.component :as h]))
+
+(h/describe "calendar-year component"
+  (h/test "default render of calendar-year component"
+    (h/render [calendar-year/view {} "2023"])
+    (h/is-truthy (h/query-by-text "2023")))
+
+  (h/test "should not call on-press when disabled"
+    (let [on-press (h/mock-fn)]
+      (h/render [calendar-year/view {:on-press on-press :disabled? true} "2023"])
+      (h/fire-event :press (h/query-by-text "2023"))
+      (h/was-not-called on-press))))
@@ -0,0 +1,25 @@
+(ns quo2.components.calendar.calendar-year.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container-base
+  {:align-items     :center
+   :justify-content :center
+   :border-radius   10
+   :height          32
+   :width           48})
+
+(defn text-base
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
+
+(defn container
+  [{:keys [selected? disabled? theme]}]
+  (cond-> container-base
+    disabled? (assoc :opacity 0.3)
+    selected? (assoc :background-color
+                     (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
+
+(defn text
+  [{:keys [selected? theme]}]
+  (cond-> (text-base theme)
+    selected? (assoc :color (colors/theme-colors colors/neutral-100 colors/white theme))))
@@ -0,0 +1,24 @@
+(ns quo2.components.calendar.calendar-year.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.calendar.calendar-year.style :as style]))
+
+(defn- view-internal
+  [{:keys [selected? disabled? on-press theme]} year]
+  [rn/touchable-opacity
+   {:on-press on-press
+    :style    (style/container
+               {:selected? selected?
+                :disabled? disabled?
+                :theme     theme})
+    :disabled disabled?}
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  (style/text
+              {:selected? selected?
+               :theme     theme})}
+    year]])
+
+(def view (theme/with-theme view-internal))
@@ -2,18 +2,21 @@
  (:require [quo2.foundations.colors :as colors]))

 (defn community-card
-  [radius]
-  {:shadow-offset    {:width  0
-                      :height 2}
-   :shadow-radius    radius
-   :shadow-opacity   1
-   :shadow-color     colors/shadow
-   :elevation        1
-   :border-radius    radius
-   :justify-content  :space-between
-   :background-color (colors/theme-colors
-                      colors/white
-                      colors/neutral-90)})
+  [theme]
+  {:shadow-offset     {:width 0 :height 2}
+   :shadow-radius     16
+   :shadow-opacity    1
+   :shadow-color      colors/shadow
+   :elevation         1
+   :border-radius     16
+   :justify-content   :space-between
+   :background-color  (colors/theme-colors colors/white colors/neutral-90 theme)
+   :flex-direction    :row
+   :margin-horizontal 20
+   :margin-top        8
+   :margin-bottom     8
+   :height            56
+   :padding-right     12})

 (def banner-content
  {:flex           1
@@ -25,13 +28,6 @@
  {:flex               1
   :padding-horizontal 12})

-(def banner-card
-  {:flex-direction    :row
-   :margin-horizontal 20
-   :margin-vertical   8
-   :height            56
-   :padding-right     12})
-
 (def discover-illustration
  {:position :absolute
   :top      -4
@@ -2,14 +2,13 @@
  (:require [quo2.components.community.banner.style :as style]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
            [react-native.core :as rn]))

 (defn- card-title-and-description
-  [title description]
-  [rn/view
-   {:style style/banner-content}
-   [rn/view
-    {:style style/banner-title}
+  [title description theme]
+  [rn/view {:style style/banner-content}
+   [rn/view {:style style/banner-title}
    [text/text
     {:accessibility-label :community-name-text
      :ellipsize-mode      :tail
@@ -21,26 +20,21 @@
     {:accessibility-label :community-name-text
      :ellipsize-mode      :tail
      :number-of-lines     1
-      :color               (colors/theme-colors
-                            colors/neutral-50
-                            colors/neutral-40)
+      :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
      :weight              :regular
      :size                :paragraph-2}
     description]]])

-(defn view
-  [{:keys [title description on-press accessibility-label banner]}]
+(defn view-internal
+  [{:keys [title description on-press accessibility-label banner style theme]}]
  [rn/touchable-without-feedback
   {:on-press            on-press
    :accessibility-label accessibility-label}
-   [rn/view
-    (merge (style/community-card 16)
-           {:background-color (colors/theme-colors
-                               colors/white
-                               colors/neutral-90)}
-           style/banner-card)
-    [card-title-and-description title description]
+   [rn/view {:style (merge (style/community-card theme) style)}
+    [card-title-and-description title description theme]
    [rn/image
     {:style               style/discover-illustration
      :source              banner
      :accessibility-label :discover-communities-illustration}]]])
+
+(def view (theme/with-theme view-internal))
@@ -1,4 +1,4 @@
-(ns quo2.components.counter.--tests--.counter-component-spec
+(ns quo2.components.counter.component-spec
  (:require [quo2.components.counter.counter :as counter]
            [test-helpers.component :as h]))

@@ -1,4 +1,4 @@
-(ns quo2.components.dividers.--tests--.divider-label-component-spec
+(ns quo2.components.dividers.divider-label-component-spec
  (:require ["@testing-library/react-native" :as rtl]
            [quo2.components.dividers.divider-label :as divider-label]
            [reagent.core :as reagent]))
@@ -15,7 +15,7 @@
   :margin-bottom (+ (safe-area/get-bottom) 8)})

 (defn title
-  [shell?]
+  [theme]
  {:color (colors/theme-colors colors/neutral-100
                               colors/white
-                               (when shell? :dark))})
+                               theme)})
@@ -3,9 +3,10 @@
            [quo2.components.drawers.documentation-drawers.style :as style]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
-            [react-native.gesture :as gesture]))
+            [react-native.gesture :as gesture]
+            [quo2.theme :as quo.theme]))

-(defn view
+(defn- view-internal
  "Options
   - `title` Title text
   - `show-button?` Show button
@@ -15,7 +16,7 @@
   - `shell?` use shell theme
   `content` Content of the drawer
   "
-  [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
+  [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
  [gesture/scroll-view
   {:style                             style/outer-container
    :always-bounce-vertical            false
@@ -24,18 +25,18 @@
    [text/text
     {:size                :heading-2
      :accessibility-label :documentation-drawer-title
-      :style               (style/title shell?)
+      :style               (style/title theme)
      :weight              :semi-bold}
     title]
    [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
     content]
    (when show-button?
      [button/button
-       (cond-> {:size                24
-                :type                (if shell? :blur-bg-outline :outline)
-                :on-press            on-press-button
-                :accessibility-label :documentation-drawer-button
-                :after               button-icon}
-         shell? (assoc :override-theme :dark))
+       {:size                24
+        :type                (if shell? :blur-bg-outline :outline)
+        :on-press            on-press-button
+        :accessibility-label :documentation-drawer-button
+        :after               button-icon}
       button-label])]])

+(def view (quo.theme/with-theme view-internal))
@@ -3,62 +3,62 @@
            [quo2.foundations.colors :as colors]))

 (defn variants-colors
-  [blur? override-theme]
+  [blur? theme]
  (if blur?
-    {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
-     :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
-     :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
-     :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme)
-     :clear-icon    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
+    {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+     :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
+     :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
+     :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme)
+     :clear-icon    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
     :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                         colors/white
-                                         override-theme)}
-    {:label         (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
-     :icon          (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
-     :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
-     :clear-icon    (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
-     :password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
+                                         theme)}
+    {:label         (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+     :icon          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+     :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
+     :clear-icon    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+     :password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
     :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                         (colors/custom-color :blue 60)
-                                         override-theme)}))
+                                         theme)}))

 (defn status-colors
-  [status blur? override-theme]
+  [status blur? theme]
  (if blur?
    (case status
      :focus
-      {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :disabled
-      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)
-       :text         (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)
+       :text         (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)}
      ;; :default
-      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)})
+      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)})
    (case status
      :focus
-      {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+       :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :disabled
-      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)
+       :text         (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)}
      ;; :default
-      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
+      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)})))

 (defn input-container
  [colors-by-status small? disabled?]
@@ -5,7 +5,7 @@
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))

 (defn- label-&-counter
  [{:keys [label current-chars char-limit variant-colors]}]
@@ -54,7 +54,7 @@

 (def ^:private custom-props
  "Custom properties that must be removed from properties map passed to InputText."
-  [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
+  [:type :blur? :theme :error? :right-icon :left-icon :disabled? :small? :button
   :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])

 (defn- base-input
@@ -74,15 +74,15 @@
                                (reset! char-count amount-chars)
                                (when (>= amount-chars char-limit)
                                  (on-char-limit-reach amount-chars))))]
-    (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
+    (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
                 label char-limit multiline? clearable? on-focus on-blur]
          :as   props}]
      (let [status-kw        (cond
                               disabled? :disabled
                               error?    :error
                               :else     @status)
-            colors-by-status (style/status-colors status-kw blur? override-theme)
-            variant-colors   (style/variants-colors blur? override-theme)
+            colors-by-status (style/status-colors status-kw blur? theme)
+            variant-colors   (style/variants-colors blur? theme)
            clean-props      (apply dissoc props custom-props)]
        [:<>
         (when (or label char-limit)
@@ -101,7 +101,7 @@
           (cond-> {:style                  (style/input colors-by-status small? @multiple-lines?)
                    :accessibility-label    :input
                    :placeholder-text-color (:placeholder colors-by-status)
-                    :keyboard-appearance    (theme/theme-value :light :dark override-theme)
+                    :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
                    :cursor-color           (:cursor variant-colors)
                    :editable               (not disabled?)
                    :on-focus               (fn []
@@ -148,11 +148,11 @@
                                    :icon-name (if @password-shown? :i/hide :i/reveal)
                                    :on-press  #(swap! password-shown? not)})])))

-(defn input
+(defn input-internal
  "This input supports the following properties:
  - :type - Can be `:text`(default) or `:password`.
  - :blur? - Boolean to set the blur color variant.
-  - :override-theme - Can be `light` or `:dark`.
+  - :theme - Can be `light` or `:dark`.
  - :small? - Boolean to specify if this input is rendered in its small version.
  - :multiline? - Boolean to specify if this input support multiple lines.
  - :icon-name - The name of an icon to display at the left of the input.
@@ -188,3 +188,5 @@
    (if (= type :password)
      [password-input base-props]
      [base-input base-props])))
+
+(def input (quo.theme/with-theme input-internal))
@@ -17,29 +17,29 @@
         :text-align-vertical :top))

 (defn placeholder-color
-  [input-state override-theme blur?]
+  [input-state theme blur?]
  (cond
    (and (= input-state :focused) blur?)
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)

    (= input-state :focused) ; Not blur
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)

    blur? ; :default & blur
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)

    :else ; :default & not blur
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))

 (defn cursor-color
-  [customization-color override-theme]
+  [customization-color theme]
  (colors/theme-colors (colors/custom-color customization-color 50)
                       (colors/custom-color customization-color 60)
-                       override-theme))
+                       theme))

 (defn error-word
-  []
+  [theme]
  {:height             22
   :padding-horizontal 20
   :background-color   colors/danger-50-opa-10
-   :color              (colors/theme-colors colors/danger-50 colors/danger-60)})
+   :color              (colors/theme-colors colors/danger-50 colors/danger-60 theme)})
@@ -3,19 +3,19 @@
            [quo2.components.inputs.recovery-phrase.style :as style]
            [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))

 (def ^:private custom-props
-  [:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
+  [:customization-color :theme :blur? :cursor-color :multiline :on-focus :on-blur
   :placeholder-text-color :mark-errors? :error-pred :word-limit])

 (defn- error-word
-  [text]
-  [rn/text {:style (style/error-word)}
+  [text theme]
+  [rn/text {:style (style/error-word theme)}
   text])

 (defn- mark-error-words
-  [pred-last-word pred-previous-words text word-limit]
+  [{:keys [pred-last-word pred-previous-words text word-limit theme]}]
  (let [last-index (dec (count (string/split text #"\s+")))
        words      (map #(apply str %)
                        (partition-by #(= " " %) text))]
@@ -31,18 +31,18 @@
                       :always           (update :result
                                                 conj
                                                 (if invalid-word?
-                                                   [error-word word]
+                                                   [error-word word theme]
                                                   word)))))
                 {:result [:<>]
                  :idx    0})
         :result)))

-(defn recovery-phrase-input
+(defn recovery-phrase-input-internal
  [_ _]
  (let [state       (reagent/atom :default)
        set-focused #(reset! state :focused)
        set-default #(reset! state :default)]
-    (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
+    (fn [{:keys [customization-color theme blur? on-focus on-blur mark-errors?
                 error-pred-current-word error-pred-written-words word-limit]
          :or   {customization-color      :blue
                 word-limit               ##Inf
@@ -55,9 +55,9 @@
         [rn/text-input
          (merge {:accessibility-label    :recovery-phrase-input
                  :style                  (style/input)
-                  :placeholder-text-color (style/placeholder-color @state override-theme blur?)
-                  :cursor-color           (style/cursor-color customization-color override-theme)
-                  :keyboard-appearance    (theme/theme-value :light :dark override-theme)
+                  :placeholder-text-color (style/placeholder-color @state theme blur?)
+                  :cursor-color           (style/cursor-color customization-color theme)
+                  :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
                  :multiline              true
                  :on-focus               (fn []
                                            (set-focused)
@@ -67,5 +67,11 @@
                                            (when on-blur (on-blur)))}
                 extra-props)
          (if mark-errors?
-            (mark-error-words error-pred-current-word error-pred-written-words text word-limit)
+            (mark-error-words {:pred-last-word      error-pred-current-word
+                               :pred-previous-words error-pred-written-words
+                               :text                text
+                               :word-limit          word-limit
+                               :theme               theme})
            text)]]))))
+
+(def recovery-phrase-input (quo.theme/with-theme recovery-phrase-input-internal))
@@ -5,7 +5,8 @@
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
            [react-native.fast-image :as fast-image]
-            [react-native.hole-view :as hole-view]))
+            [react-native.hole-view :as hole-view]
+            [quo2.theme :as quo.theme]))

 (def params
  {32 {:border-radius {:circular 16 :rounded 10}
@@ -61,13 +62,13 @@
     [avatar item type size border-radius]]))

 (defn get-overflow-color
-  [transparent? transparent-color light-color dark-color override-theme]
+  [transparent? transparent-color light-color dark-color theme]
  (if transparent?
    transparent-color
-    (colors/theme-colors light-color dark-color override-theme)))
+    (colors/theme-colors light-color dark-color theme)))

 (defn overflow-label
-  [label size transparent? border-radius margin-left override-theme more-than-99-label]
+  [{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
  [rn/view
   {:style {:width            size
            :height           size
@@ -80,7 +81,7 @@
                               colors/white-opa-10
                               colors/neutral-20
                               colors/neutral-70
-                               override-theme)}}
+                               theme)}}
   (if (= size 16)
     [quo2.icons/icon :i/more
      {:size  12
@@ -89,7 +90,7 @@
               colors/white-opa-70
               colors/neutral-50
               colors/neutral-40
-               override-theme)}]
+               theme)}]
     [quo2.text/text
      {:size   (if (= size 32) :paragraph-2 :label)
       :weight :medium
@@ -98,7 +99,7 @@
                              colors/white-opa-70
                              colors/neutral-60
                              colors/neutral-40
-                              override-theme)
+                              theme)
                :margin-left -2}}
      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
      (if (< label 100)
@@ -111,7 +112,7 @@
    (:account :collectible :photo) :rounded
    :circular))

-(defn preview-list
+(defn- preview-list-internal
  "[preview-list opts items]
   opts
   {:type          :user/:community/:account/:token/:collectible/:dapp
@@ -120,7 +121,7 @@
    :transparent?  overflow-label transparent?}
   items           preview list items (only 4 items is required for preview)
  "
-  [{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
+  [{:keys [type size list-size transparent? theme more-than-99-label]} items]
  (let [items-arr     (into [] items)
        list-size     (or list-size (count items))
        margin-left   (get-in params [size :margin-left])
@@ -135,5 +136,13 @@
       [list-item index type size (get items-arr index) list-size
        margin-left hole-size hole-radius hole-x hole-y border-radius])
     (when (> list-size 4)
-       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme
-        more-than-99-label])]))
+       [overflow-label
+        {:label              (- list-size 3)
+         :size               size
+         :transparent?       transparent?
+         :border-radius      border-radius
+         :margin-left        margin-left
+         :theme              theme
+         :more-than-99-label more-than-99-label}])]))
+
+(def preview-list (quo.theme/with-theme preview-list-internal))
@@ -1,4 +1,4 @@
-(ns quo2.components.markdown.--tests--.text-component-spec
+(ns quo2.components.markdown.text-component-spec
  (:require ["@testing-library/react-native" :as rtl]
            [quo2.components.markdown.text :as text]
            [reagent.core :as reagent]))
@@ -3,22 +3,27 @@
            [quo2.foundations.typography :as typography]
            [react-native.core :as rn]))

+(defn- counter-style
+  [customization-color overwritten-styles]
+  (merge {:width            16
+          :height           16
+          :position         :absolute
+          :right            22
+          :border-radius    6
+          :justify-content  :center
+          :align-items      :center
+          :background-color (colors/custom-color-by-theme customization-color 50 60)}
+         overwritten-styles))
+
 (defn info-count
  ([amount]
   (info-count {} amount))
-  ([props amount]
-   (when (> amount 0)
-     [rn/view
-      (merge props
-             {:style (merge {:width            16
-                             :height           16
-                             :position         :absolute
-                             :right            22
-                             :border-radius    6
-                             :justify-content  :center
-                             :align-items      :center
-                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
-                            (:style props))})
+  ([{:keys [customization-color style]
+     :or   {customization-color :blue}
+     :as   props}
+    amount]
+   (when (pos? amount)
+     [rn/view (assoc props :style (counter-style customization-color style))
      [rn/text
       {:style (merge typography/font-medium
                      typography/label
@@ -1,4 +1,4 @@
-(ns quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec
+(ns quo2.components.record-audio.record-audio.component-spec
  (:require [quo2.components.record-audio.record-audio.view :as record-audio]
            [react-native.audio-toolkit :as audio]
            [test-helpers.component :as h]
@@ -252,5 +252,3 @@
          (h/advance-timers-by-time 250)
          (-> (js/expect event)
              (.toHaveBeenCalledTimes 1)))))))
-
-
@@ -1,4 +1,4 @@
-(ns quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec
+(ns quo2.components.record-audio.soundtrack.component-spec
  (:require [quo2.components.record-audio.soundtrack.view :as soundtrack]
            [test-helpers.component :as h]
            [reagent.core :as reagent]
@@ -10,8 +10,8 @@
   :padding         6})

 (defn container-border-color
-  [pressed? blur? override-theme]
-  (let [dark? (= :dark override-theme)]
+  [pressed? blur? theme]
+  (let [dark? (= :dark theme)]
    (cond
      (and (not pressed?) (not dark?) (not blur?))
      colors/neutral-20
@@ -35,26 +35,24 @@
      nil)))

 (defn container-background-color
-  [pressed? override-theme]
+  [pressed? theme]
  (when pressed?
-    (if (= :dark override-theme)
-      colors/primary-60
-      colors/primary-50)))
+    (colors/theme-colors colors/primary-50 colors/primary-60 theme)))

 (defn container-outer
-  [pressed? override-theme]
+  [pressed? theme]
  (merge container-default
-         {:background-color (container-background-color pressed? override-theme)}))
+         {:background-color (container-background-color pressed? theme)}))

 (defn container-inner
-  [pressed? blur? override-theme]
+  [pressed? blur? theme]
  (merge container-default
         {:border-width 1
-          :border-color (container-border-color pressed? blur? override-theme)}))
+          :border-color (container-border-color pressed? blur? theme)}))

 (defn icon-color
-  [pressed? override-theme]
+  [pressed? theme]
  (if (and (not pressed?)
-           (= :light override-theme))
+           (= :light theme))
    colors/neutral-100
    colors/white))
@@ -1,23 +1,24 @@
 (ns quo2.components.selectors.filter.view
  (:require [quo2.components.icon :as icon]
            [quo2.components.selectors.filter.style :as style]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
            [react-native.core :as rn]
            [reagent.core :as reagent]))

-(defn view
+(defn view-internal
  [initial-props]
  (let [pressed? (reagent/atom (:pressed? initial-props))]
-    (fn [{:keys [blur? override-theme on-press-out]
-          :or   {override-theme (theme/get-theme)}}]
+    (fn [{:keys [blur? theme on-press-out]}]
      [rn/touchable-without-feedback
       {:accessibility-label :selector-filter
        :on-press-out        (fn []
                               (swap! pressed? not)
                               (when on-press-out
                                 (on-press-out @pressed?)))}
-       [rn/view {:style (style/container-outer @pressed? override-theme)}
-        [rn/view {:style (style/container-inner @pressed? blur? override-theme)}
+       [rn/view {:style (style/container-outer @pressed? theme)}
+        [rn/view {:style (style/container-inner @pressed? blur? theme)}
         [icon/icon :i/unread
-          {:color (style/icon-color @pressed? override-theme)
+          {:color (style/icon-color @pressed? theme)
           :size  20}]]]])))
+
+(def view (quo.theme/with-theme view-internal))
@@ -1,9 +1,9 @@
 (ns quo2.components.tabs.segmented-tab
  (:require [quo2.components.tabs.tab.view :as tab]
            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
            [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.theme :as quo.theme]))

 (def themes-for-blur
  {:light {:background-color colors/neutral-80-opa-5}
@@ -13,17 +13,17 @@
  {:light {:background-color colors/neutral-10}
   :dark  {:background-color colors/neutral-90}})

-(defn segmented-control
+(defn- segmented-control-internal
  [{:keys [default-active on-change]}]
  (let [active-tab-id (reagent/atom default-active)]
-    (fn [{:keys [data size override-theme blur? container-style item-container-style
+    (fn [{:keys [data size theme blur? container-style item-container-style
                 active-item-container-style]}]
      (let [active-id @active-tab-id]
        [rn/view
         (merge
          {:flex-direction   :row
           :background-color (get-in (if blur? themes-for-blur themes)
-                                     [(or override-theme (theme/get-theme)) :background-color])
+                                     [theme :background-color])
           :border-radius    (case size
                               32 10
                               28 8
@@ -42,7 +42,6 @@
              :item-container-style        item-container-style
              :segmented?                  true
              :size                        size
-              :override-theme              override-theme
              :blur?                       blur?
              :active                      (= id active-id)
              :on-press                    (fn [tab-id]
@@ -50,3 +49,5 @@
                                             (when on-change
                                               (on-change tab-id)))}
             label]])]))))
+
+(def segmented-control (quo.theme/with-theme segmented-control-internal))
@@ -6,7 +6,7 @@
            [react-native.masked-view :as masked-view]
            [reagent.core :as reagent]
            [utils.collection :as utils.collection]
-            [utils.number :as utils.number]
+            [utils.number]
            [react-native.gesture :as gesture]))

 (def default-tab-size 32)
@@ -2,8 +2,8 @@
  (:require [quo2.components.icon :as icon]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo2.theme]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.theme :as quo.theme]))

 (def default-container-style
  {:border-radius 20
@@ -81,7 +81,7 @@
    :border-color        colors/danger-50-opa-20
    :label               label
    ;; The negative tag uses the same color for `dark` and `dark blur` variant
-    :text-color          (if (= theme :light) colors/danger-50 colors/danger-60)}])
+    :text-color          (colors/theme-colors colors/danger-50 colors/danger-60 theme)}])

 (defn- pending
  [size theme label blur? no-icon?]
@@ -104,8 +104,8 @@
                           colors/white-opa-70
                           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])

-(defn status-tag
-  [{:keys [status size override-theme label blur? no-icon?]}]
+(defn- status-tag-internal
+  [{:keys [status size theme label blur? no-icon?]}]
  (when status
    (when-let [status-component (case (:type status)
                                  :positive positive
@@ -114,7 +114,9 @@
                                  nil)]
      [status-component
       size
-       (or override-theme (quo2.theme/get-theme))
+       theme
       label
       blur?
       no-icon?])))
+
+(def status-tag (quo.theme/with-theme status-tag-internal))
@@ -1,4 +1,4 @@
-(ns quo2.components.tags.--tests--.status-tags-component-spec
+(ns quo2.components.tags.status-tags-component-spec
  (:require [quo2.components.tags.status-tags :as quo2]
            [test-helpers.component :as h]))

@@ -13,6 +13,9 @@
    quo2.components.buttons.predictive-keyboard.view
    quo2.components.buttons.slide-button.view
    quo2.components.browser.browser-input.view
+    quo2.components.calendar.calendar.view
+    quo2.components.calendar.calendar-day.view
+    quo2.components.calendar.calendar-year.view
    quo2.components.code.snippet
    quo2.components.colors.color-picker.view
    quo2.components.common.separator.view
@@ -98,30 +101,7 @@
    quo2.components.tags.token-tag
    quo2.components.text-combinations.title.view))

-(def icon quo2.components.icon/icon)
 (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)
-(def information-box quo2.components.info.information-box.view/view)
-(def gap quo2.components.messages.gap/gap)
-(def system-message quo2.components.messages.system-message/system-message)
-(def reaction quo2.components.reactions.reaction/reaction)
-(def add-reaction quo2.components.reactions.reaction/add-reaction)
-(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
-(def context-tag quo2.components.tags.context-tag.view/context-tag)
-(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
-(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
-(def community-tag quo2.components.tags.context-tag.view/community-tag)
-
-
-(def disclaimer quo2.components.selectors.disclaimer.view/view)
-(def checkbox quo2.components.selectors.selectors.view/checkbox)
-(def filter quo2.components.selectors.filter.view/view)
-(def author quo2.components.messages.author.view/author)
-
-;;;; SELECTORS
-(def reactions quo2.components.selectors.reactions.view/view)

 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
@@ -143,6 +123,11 @@
 ;;;; BROWSER
 (def browser-input quo2.components.browser.browser-input.view/browser-input)

+;;;; CALENDAR
+(def calendar quo2.components.calendar.calendar.view/view)
+(def calendar-day quo2.components.calendar.calendar-day.view/view)
+(def calendar-year quo2.components.calendar.calendar-year.view/view)
+
 ;;;; CODE
 (def snippet quo2.components.code.snippet/snippet)

@@ -184,9 +169,22 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)

+;;;; DROPDOWNS
+(def dropdown quo2.components.dropdowns.dropdown/dropdown)
+
 ;;;; EMPTY STATE
 (def empty-state quo2.components.empty-state.empty-state.view/empty-state)

+;;;; HEADER
+(def header quo2.components.header/header)
+
+;;;; ICON
+(def icon quo2.components.icon/icon)
+
+;;;; INFO
+(def info-message quo2.components.info.info-message/info-message)
+(def information-box quo2.components.info.information-box.view/view)
+
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)
@@ -213,6 +211,10 @@
 (def markdown-list quo2.components.markdown.list.view/view)
 (def text quo2.components.markdown.text/text)

+;;;; MESSAGES
+(def gap quo2.components.messages.gap/gap)
+(def system-message quo2.components.messages.system-message/system-message)
+
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
@@ -229,10 +231,21 @@
 (def profile-card quo2.components.profile.profile-card.view/profile-card)
 (def select-profile quo2.components.profile.select-profile.view/view)

+;;;; REACTIONS
+(def reaction quo2.components.reactions.reaction/reaction)
+(def add-reaction quo2.components.reactions.reaction/add-reaction)
+
 ;;;; RECORD AUDIO
 (def record-audio quo2.components.record-audio.record-audio.view/record-audio)
 (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack)

+;;;; SELECTORS
+(def author quo2.components.messages.author.view/author)
+(def disclaimer quo2.components.selectors.disclaimer.view/view)
+(def filter quo2.components.selectors.filter.view/view)
+(def reactions quo2.components.selectors.reactions.view/view)
+(def checkbox quo2.components.selectors.selectors.view/checkbox)
+
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
@@ -255,6 +268,11 @@
 (def permission-tag quo2.components.tags.permission-tag/tag)
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def token-tag quo2.components.tags.token-tag/tag)
+(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
+(def context-tag quo2.components.tags.context-tag.view/context-tag)
+(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
+(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
+(def community-tag quo2.components.tags.context-tag.view/community-tag)

 ;;;; TITLE
 (def title quo2.components.text-combinations.title.view/title)
@@ -5,11 +5,15 @@
    [quo2.components.buttons.button.component-spec]
    [quo2.components.buttons.predictive-keyboard.component-spec]
    [quo2.components.buttons.slide-button.component-spec]
+    [quo2.components.calendar.calendar.component-spec]
+    [quo2.components.calendar.calendar-day.component-spec]
+    [quo2.components.calendar.calendar.month-picker.component-spec]
+    [quo2.components.calendar.calendar-year.component-spec]
    [quo2.components.browser.browser-input.component-spec]
    [quo2.components.colors.color-picker.component-spec]
-    [quo2.components.counter.--tests--.counter-component-spec]
+    [quo2.components.counter.component-spec]
    [quo2.components.counter.step.component-spec]
-    [quo2.components.dividers.--tests--.divider-label-component-spec]
+    [quo2.components.dividers.divider-label-component-spec]
    [quo2.components.dividers.strength-divider.component-spec]
    [quo2.components.drawers.action-drawers.component-spec]
    [quo2.components.drawers.documentation-drawers.component-spec]
@@ -24,14 +28,14 @@
    [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.text-component-spec]
    [quo2.components.markdown.list.component-spec]
    [quo2.components.notifications.notification.component-spec]
    [quo2.components.onboarding.small-option-card.component-spec]
    [quo2.components.password.tips.component-spec]
    [quo2.components.profile.select-profile.component-spec]
-    [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
-    [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
+    [quo2.components.record-audio.record-audio.component-spec]
+    [quo2.components.record-audio.soundtrack.component-spec]
    [quo2.components.selectors.disclaimer.component-spec]
    [quo2.components.selectors.filter.component-spec]
    [quo2.components.selectors.reactions.component-spec]
@@ -40,4 +44,4 @@
    [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]))
+    [quo2.components.tags.status-tags-component-spec]))
@@ -16,14 +16,12 @@
 (def animation-delay 450)

 (defn with-animation
-  [value & [options callback]]
+  [value]
  (reanimated/with-spring
   value
-   (clj->js (merge {:mass      2
-                    :stiffness 500
-                    :damping   200})
-            options)
-   callback))
+   (clj->js {:mass      2
+             :stiffness 500
+             :damping   200})))

 (defn get-bottom-sheet-gesture
  [pan-y translate-y bg-height bg-height-expanded
@@ -188,9 +186,9 @@
                                    (with-animation (+ bg-height-expanded (.-value pan-y))))
                                   ;; Workaround for
                                   ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
-                                   ;; withTiming/withSpring callback not working
-                                   ;; on-expanded should be called as a callback of
-                                   ;; with-animation instead, once this issue has been resolved
+                                   ;; withTiming/withSpring callback not working on-expanded should
+                                   ;; be called as a callback of with-animation instead, once this
+                                   ;; issue has been resolved
                                   (timer/set-timeout on-expanded animation-delay))
                                 (do
                                   (reanimated/set-shared-value
@@ -198,9 +196,9 @@
                                    (with-animation (+ bg-height (.-value pan-y))))
                                   ;; Workaround for
                                   ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
-                                   ;; withTiming/withSpring callback not working
-                                   ;; on-collapsed should be called as a callback of
-                                   ;; with-animation instead, once this issue has been resolved
+                                   ;; withTiming/withSpring callback not working on-collapsed should
+                                   ;; be called as a callback of with-animation instead, once this
+                                   ;; issue has been resolved
                                   (timer/set-timeout on-collapsed animation-delay)))

                               (= @show-bottom-sheet? false)
@@ -210,7 +210,9 @@
  (js/setTimeout #(-> (.getInitialURL ^js react/linking)
                      (.then dispatch-url))
                 200)
-  (.addEventListener ^js react/linking "url" url-event-listener))
+  (.addEventListener ^js react/linking "url" url-event-listener)
+  (native-module/start-searching-for-local-pairing-peers
+   #(log/info "[local-pairing] errors from local-pairing-preflight-outbound-check ->" %)))

 (defn finalize
  "Remove event listener for url"
@@ -9,7 +9,7 @@
    [status-im2.contexts.chat.composer.constants :as constants]
    [status-im2.contexts.chat.composer.keyboard :as kb]
    [status-im2.contexts.chat.composer.utils :as utils]
-    [utils.number :as utils.number]
+    [utils.number]
    [utils.re-frame :as rf]))

 (defn reenter-screen-effect
@@ -1,10 +1,11 @@
 (ns status-im2.contexts.chat.composer.gesture
  (:require
+    [oops.core :as oops]
    [react-native.gesture :as gesture]
    [react-native.reanimated :as reanimated]
-    [oops.core :as oops]
    [status-im2.contexts.chat.composer.constants :as constants]
    [status-im2.contexts.chat.composer.utils :as utils]
+    [utils.number]
    [utils.re-frame :as rf]))

 (defn set-opacity
@@ -83,7 +84,7 @@
           (let [translation    (oops/oget event "translationY")
                 min-height     (utils/get-min-height lines images link-previews?)
                 new-height     (- (reanimated/get-shared-value saved-height) translation)
-                 bounded-height (utils/bounded-val new-height min-height max-height)]
+                 bounded-height (utils.number/value-in-range new-height min-height max-height)]
             (when keyboard-shown
               (if (>= new-height min-height)
                 (do ; expand sheet
@@ -10,6 +10,7 @@
    [status-im2.contexts.chat.composer.selection :as selection]
    [status-im2.contexts.chat.composer.utils :as utils]
    [utils.debounce :as debounce]
+    [utils.number]
    [utils.re-frame :as rf]))

 (defn focus
@@ -82,7 +83,9 @@
          content-size          (if (or (= lines 1) (empty? @text-value))
                                  constants/input-height
                                  (if (= lines 2) constants/multiline-minimized-height content-size))
-          new-height            (utils/bounded-val content-size constants/input-height max-height)
+          new-height            (utils.number/value-in-range content-size
+                                                             constants/input-height
+                                                             max-height)
          bottom-content-height (utils/calc-bottom-content-height images link-previews?)
          new-height            (min (+ new-height bottom-content-height) max-height)]
      (reset! content-height content-size)
@@ -8,6 +8,7 @@
    [reagent.core :as reagent]
    [status-im2.contexts.chat.composer.constants :as constants]
    [status-im2.contexts.chat.composer.selection :as selection]
+    [utils.number]
    [utils.re-frame :as rf]))

 (defn bounded-val
@@ -142,7 +143,7 @@
        base             (+ base (- curr-height constants/input-height))
        base             (+ base (calc-top-content-height reply edit))
        view-height      (- window-height keyboard-height (:top insets))
-        container-height (bounded-val
+        container-height (utils.number/value-in-range
                          (* (/ constants/mentions-max-height 4) size)
                          (/ constants/mentions-max-height 4)
                          constants/mentions-max-height)]
@@ -228,7 +229,7 @@
     :saved-height      (reanimated/use-shared-value
                         initial-height)
     :last-height       (reanimated/use-shared-value
-                         (bounded-val
+                         (utils.number/value-in-range
                          (+ @content-height bottom-content-height)
                          constants/input-height
                          max-height))
@@ -21,15 +21,31 @@
   :top              16
   :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})

-(def muted-icon
-  {:position :absolute
-   :right    19
-   :top      16})
-
 (defn timestamp
  [muted?]
-  {:color       (or (when muted?
-                      colors/neutral-50)
-                    (colors/theme-colors colors/neutral-50 colors/neutral-40))
+  {:color       (if muted?
+                  colors/neutral-50
+                  (colors/theme-colors colors/neutral-50 colors/neutral-40))
   :margin-top  3
   :margin-left 8})
+
+(def chat-data-container
+  {:flex         1
+   :margin-left  8
+   :margin-right 16})
+
+(def notification-container
+  {:margin-left     :auto
+   :height          20
+   :width           20
+   :justify-content :center
+   :align-items     :center})
+
+;; TODO: duplicate of `quo2.components.common.unread-grey-dot.style`
+;; Replace it when this component is defined as part of `quo2.components`
+(defn grey-dot
+  []
+  {:width            8
+   :height           8
+   :border-radius    4
+   :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})
@@ -208,16 +208,42 @@
     {:color color
      :size  :medium}]))

+(defn notification
+  [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
+  (let [customization-color (rf/sub [:profile/customization-color])
+        unread-messages?    (pos? unviewed-messages-count)
+        unread-mentions?    (pos? unviewed-mentions-count)]
+    [rn/view {:style style/notification-container}
+     (cond
+       muted
+       [icons/icon :i/muted {:color colors/neutral-40}]
+
+       (and group-chat unread-mentions?)
+       [quo/info-count
+        {:style               {:position :relative :right 0}
+         :customization-color customization-color
+         :accessibility-label :new-message-counter}
+        unviewed-mentions-count]
+
+       ;; TODO: use the grey-dot component when chat-list-item is moved to quo2.components
+       (and group-chat unread-messages?)
+       [rn/view {:style (style/grey-dot)}]
+
+       unread-messages?
+       [quo/info-count
+        {:style               {:position :relative :right 0}
+         :customization-color customization-color
+         :accessibility-label :new-message-counter}
+        unviewed-messages-count])]))
+
 (defn chat-list-item
-  [{:keys [chat-id group-chat color name unviewed-messages-count
-           timestamp last-message muted]
+  [{:keys [chat-id group-chat color name timestamp last-message muted]
    :as   item}]
-  (let [display-name       (if group-chat
-                             name
-                             (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
-        contact            (when-not group-chat
-                             (rf/sub [:contacts/contact-by-address chat-id]))
-        show-unread-badge? (and (not muted) (> unviewed-messages-count 0))]
+  (let [display-name (if group-chat
+                       name
+                       (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
+        contact      (when-not group-chat
+                       (rf/sub [:contacts/contact-by-address chat-id]))]
    [rn/touchable-opacity
     {:style         (style/container)
      :on-press      (open-chat chat-id)
@@ -229,16 +255,7 @@
       :full-name display-name
       :color     color
       :muted?    muted}]
-     [rn/view {:style {:margin-left 8}}
+     [rn/view {:style style/chat-data-container}
      [name-view display-name contact timestamp muted]
      [last-message-preview group-chat last-message muted]]
-     (if-not muted
-       (when show-unread-badge?
-         [quo/info-count
-          {:style               {:top   16
-                                 :right 16}
-           :accessibility-label :new-message-counter}
-          unviewed-messages-count])
-       [icons/icon :i/muted
-        {:color           colors/neutral-40
-         :container-style style/muted-icon}])]))
+     [notification item]]))
@@ -1,12 +1,14 @@
 (ns status-im2.contexts.communities.home.style
  (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+            [react-native.platform :as platform]
+            [react-native.safe-area :as safe-area]
+            [react-native.reanimated :as reanimated]))

 (def header-height 245)

 (def tabs
  {:padding-horizontal 20
-   :padding-top        16
+   :padding-top        8
   :padding-bottom     12})

 (def blur
@@ -17,8 +19,8 @@
   :bottom   0})

 (defn empty-state-container
-  [top]
-  {:margin-top      (+ header-height top)
+  []
+  {:margin-top      (+ header-height (safe-area/get-top))
   :margin-bottom   44
   :flex            1
   :justify-content :center})
@@ -29,16 +31,46 @@
   :background-color colors/danger-50})

 (defn header-spacing
-  [top]
-  {:height (+ header-height top)})
+  []
+  {:height (+ header-height (safe-area/get-top))})

-(defn blur-container
-  [top]
-  {:overflow    (if platform/ios? :visible :hidden)
+(defn blur-banner-layer
+  [animated-translation-y]
+  (let [fixed-height (+ (safe-area/get-top) 244)]
+    (reanimated/apply-animations-to-style
+     {:transform [{:translate-y animated-translation-y}]}
+     {:overflow (if platform/ios? :visible :hidden)
+      :z-index  1
+      :position :absolute
+      :top      0
+      :right    0
+      :left     0
+      :height   fixed-height})))
+
+(defn hiding-banner-layer
+  []
+  {:z-index     2
   :position    :absolute
-   :z-index     1
   :top         0
   :right       0
   :left        0
-   :padding-top top})
+   :padding-top (safe-area/get-top)})

+(defn tabs-banner-layer
+  [animated-translation-y]
+  (let [top-offset (+ (safe-area/get-top) 192)]
+    (reanimated/apply-animations-to-style
+     {:transform [{:translate-y animated-translation-y}]}
+     {:z-index  3
+      :position :absolute
+      :top      top-offset
+      :right    0
+      :left     0})))
+
+(def animated-card-container {:overflow :hidden})
+
+(defn animated-card
+  [opacity translate-y]
+  (reanimated/apply-animations-to-style {:opacity   opacity
+                                         :transform [{:translate-y translate-y}]}
+                                        {}))
@@ -1,18 +1,20 @@
 (ns status-im2.contexts.communities.home.view
-  (:require [quo2.core :as quo]
+  (:require [oops.core :as oops]
+            [quo2.core :as quo]
            [quo2.foundations.colors :as colors]
            [quo2.theme :as theme]
-            [utils.debounce :as debounce]
            [react-native.blur :as blur]
            [react-native.core :as rn]
            [react-native.platform :as platform]
-            [react-native.safe-area :as safe-area]
+            [react-native.reanimated :as reanimated]
            [status-im2.common.home.view :as common.home]
            [status-im2.common.resources :as resources]
            [status-im2.contexts.communities.actions.community-options.view :as options]
            [status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]
            [status-im2.contexts.communities.home.style :as style]
+            [utils.debounce :as debounce]
            [utils.i18n :as i18n]
+            [utils.number]
            [utils.re-frame :as rf]))

 (defn item-render
@@ -60,9 +62,10 @@
                                                          :no-opened-communities-dark))}
    nil))

-(defn empty-state
-  [{:keys [style selected-tab customization-color]}]
-  (let [{:keys [image title description]} (empty-state-content selected-tab)]
+(defn- empty-state
+  [{:keys [style selected-tab]}]
+  (let [{:keys [image title description]} (empty-state-content selected-tab)
+        customization-color               (rf/sub [:profile/customization-color])]
    [rn/view {:style style}
     [quo/empty-state
      {:customization-color customization-color
@@ -70,56 +73,116 @@
       :title               title
       :description         description}]]))

+(defn- blur-banner-layer
+  [animated-translation-y]
+  (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
+    [reanimated/view {:style (style/blur-banner-layer animated-translation-y)}
+     [blur/view
+      {:blur-amount   (if platform/ios? 20 10)
+       :blur-type     (theme/theme-value (if platform/ios? :light :xlight) :dark)
+       :style         style/blur
+       :overlay-color (if open-sheet?
+                        (colors/theme-colors colors/white colors/neutral-95-opa-70)
+                        (theme/theme-value nil colors/neutral-95-opa-70))}]]))
+
+(defn- hiding-banner-layer
+  [animated-translation-y animated-opacity]
+  (let [customization-color (rf/sub [:profile/customization-color])]
+    [rn/view {:style (style/hiding-banner-layer)}
+     [common.home/top-nav {:type :grey}]
+     [common.home/title-column
+      {:label               (i18n/label :t/communities)
+       :handler             #(rf/dispatch
+                              [:show-bottom-sheet {:content actions.home-plus/view}])
+       :accessibility-label :new-communities-button
+       :customization-color customization-color}]
+     [rn/view {:style style/animated-card-container}
+      [reanimated/view {:style (style/animated-card animated-opacity animated-translation-y)}
+       [quo/discover-card
+        {:on-press            #(rf/dispatch [:navigate-to :discover-communities])
+         :title               (i18n/label :t/discover)
+         :description         (i18n/label :t/favorite-communities)
+         :banner              (resources/get-image :discover)
+         :accessibility-label :communities-home-discover-card}]]]]))
+
+(defn- reset-banner-animation
+  [animated-opacity animated-translation-y]
+  (reanimated/animate-shared-value-with-timing animated-opacity 1 200 :easing3)
+  (reanimated/animate-shared-value-with-timing animated-translation-y 0 200 :easing3))
+
+(defn- reset-scroll
+  [flat-list-ref]
+  (some-> flat-list-ref
+          (.scrollToOffset #js {:offset 0 :animated? true})))
+
+(defn- tabs-banner-layer
+  [animated-translation-y animated-opacity selected-tab flat-list-ref]
+  (let [on-tab-change (fn [tab]
+                        (if (empty? (get (rf/sub [:communities/grouped-by-status]) tab))
+                          (reset-banner-animation animated-opacity animated-translation-y)
+                          (reset-scroll @flat-list-ref))
+                        (rf/dispatch [:communities/select-tab tab]))]
+    [reanimated/view {:style (style/tabs-banner-layer animated-translation-y)}
+     ^{:key (str "tabs-" selected-tab)}
+     [quo/tabs
+      {:size           32
+       :style          style/tabs
+       :on-change      on-tab-change
+       :default-active selected-tab
+       :data           tabs-data}]]))
+
+(defn- animated-banner
+  [{:keys [selected-tab animated-translation-y animated-opacity flat-list-ref]}]
+  [:<>
+   [:f> blur-banner-layer animated-translation-y]
+   [:f> hiding-banner-layer animated-translation-y animated-opacity]
+   [:f> tabs-banner-layer animated-translation-y animated-opacity selected-tab flat-list-ref]])
+
+(def ^:private card-height (+ 56 16)) ; Card height + its vertical margins
+(def ^:private card-opacity-factor (/ 100 card-height 100))
+(def ^:private max-scroll (- (+ card-height 8))) ; added 8 from tabs top padding
+
+(defn- set-animated-banner-values
+  [{:keys [scroll-offset translation-y opacity]}]
+  (let [new-opacity       (-> (* (- card-height scroll-offset) card-opacity-factor)
+                              (utils.number/value-in-range 0 1))
+        new-translation-y (-> (- scroll-offset)
+                              (utils.number/value-in-range max-scroll 0))]
+    (reanimated/animate-shared-value-with-timing opacity new-opacity 80 :easing4)
+    (reanimated/animate-shared-value-with-timing translation-y new-translation-y 80 :easing4)))
+
 (defn home
  []
-  (let [selected-tab                    (or (rf/sub [:communities/selected-tab]) :joined)
-        {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status])
-        customization-color             (rf/sub [:profile/customization-color])
-        selected-items                  (case selected-tab
-                                          :joined  joined
-                                          :pending pending
-                                          :opened  opened)
-        top                             (safe-area/get-top)]
-    [:<>
-     (if (empty? selected-items)
-       [empty-state
-        {:style               (style/empty-state-container top)
-         :selected-tab        selected-tab
-         :customization-color customization-color}]
-       [rn/flat-list
-        {:key-fn                            :id
-         :content-inset-adjustment-behavior :never
-         :header                            [rn/view {:style (style/header-spacing top)}]
-         :render-fn                         item-render
-         :data                              selected-items}])
-
-     [rn/view {:style (style/blur-container top)}
-      (let [{:keys [sheets]} (rf/sub [:bottom-sheet])]
-        [blur/view
-         {:blur-amount   (if platform/ios? 20 10)
-          :blur-type     (if (colors/dark?) :dark (if platform/ios? :light :xlight))
-          :style         style/blur
-          :overlay-color (if (seq sheets)
-                           (theme/theme-value colors/white colors/neutral-95-opa-70)
-                           (when (colors/dark?)
-                             colors/neutral-95-opa-70))}])
-      [common.home/top-nav {:type :grey}]
-      [common.home/title-column
-       {:label               (i18n/label :t/communities)
-        :handler             #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}])
-        :accessibility-label :new-communities-button
-        :customization-color customization-color}]
-      [quo/discover-card
-       {:on-press            #(rf/dispatch [:navigate-to :discover-communities])
-        :title               (i18n/label :t/discover)
-        :description         (i18n/label :t/favorite-communities)
-        :banner              (resources/get-image :discover)
-        :accessibility-label :communities-home-discover-card}]
-      ^{:key (str "tabs-" selected-tab)}
-      [quo/tabs
-       {:size           32
-        :style          style/tabs
-        :on-change      (fn [tab]
-                          (rf/dispatch [:communities/select-tab tab]))
-        :default-active selected-tab
-        :data           tabs-data}]]]))
+  (let [flat-list-ref (atom nil)]
+    (fn []
+      (let [selected-tab                    (or (rf/sub [:communities/selected-tab]) :joined)
+            {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status])
+            selected-items                  (case selected-tab
+                                              :joined  joined
+                                              :pending pending
+                                              :opened  opened)
+            animated-opacity                (reanimated/use-shared-value 1)
+            animated-translation-y          (reanimated/use-shared-value 0)]
+        [:<>
+         (if (empty? selected-items)
+           [empty-state
+            {:style        (style/empty-state-container)
+             :selected-tab selected-tab}]
+           [rn/flat-list
+            {:ref                               #(reset! flat-list-ref %)
+             :key-fn                            :id
+             :content-inset-adjustment-behavior :never
+             :header                            [rn/view {:style (style/header-spacing)}]
+             :render-fn                         item-render
+             :data                              selected-items
+             :on-scroll                         #(set-animated-banner-values
+                                                  {:scroll-offset (oops/oget
+                                                                   %
+                                                                   "nativeEvent.contentOffset.y")
+                                                   :translation-y animated-translation-y
+                                                   :opacity       animated-opacity})}])
+         [:f> animated-banner
+          {:selected-tab           selected-tab
+           :animated-translation-y animated-translation-y
+           :animated-opacity       animated-opacity
+           :flat-list-ref          flat-list-ref}]]))))
@@ -31,7 +31,6 @@
        [quo/user-avatar
         {:full-name           name
          :profile-picture     profile-picture
-          :override-theme      :dark
          :size                :medium
          :status-indicator?   false
          :customization-color customization-color}]]
@@ -0,0 +1,42 @@
+(ns status-im2.contexts.quo-preview.calendar.calendar
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [utils.datetime :as dt]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [quo2.core :as quo]))
+
+(def descriptor
+  [{:label "Start Date"
+    :key   :start-date
+    :type  :text}
+   {:label "End Date"
+    :key   :end-date
+    :type  :text}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:start-date nil :end-date nil})
+        range (reagent/atom {:start-date nil :end-date nil})]
+    (fn
+      []
+      [rn/touchable-without-feedback
+       {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:flex 1}}
+        [preview/customizer state descriptor]
+        [rn/view {:style {:padding 19 :flex-grow 2}}
+         [quo/calendar
+          {:start-date (:start-date @range)
+           :end-date   (:end-date @range)
+           :on-change  (fn [new-range]
+                         (reset! state
+                           {:start-date (dt/format-date (:start-date new-range))
+                            :end-date   (dt/format-date (:end-date new-range))})
+                         (reset! range new-range))}]]]])))
+
+(defn preview-calendar
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [cool-preview]])
@@ -0,0 +1,45 @@
+(ns status-im2.contexts.quo-preview.calendar.calendar-day
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [quo2.core :as quo]))
+
+(def descriptor
+  [{:label   "State:"
+    :key     :state
+    :type    :select
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :selected
+               :value "Selected"}
+              {:key   :disabled
+               :value "Disabled"}
+              {:key   :today
+               :value "Today"}]}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom
+               {:state :default})]
+    (fn
+      []
+      [rn/touchable-without-feedback
+       {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo/calendar-day (assoc @state :customization-color :blue) 12]]]])))
+
+(defn preview-calendar-day
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])
@@ -0,0 +1,39 @@
+(ns status-im2.contexts.quo-preview.calendar.calendar-year
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [quo2.core :as quo]))
+
+(def descriptor
+  [{:label "Selected?"
+    :key   :selected?
+    :type  :boolean}
+   {:label "Disabled?"
+    :key   :disabled?
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:selected? false :disabled? false})]
+    (fn
+      []
+      [rn/touchable-without-feedback
+       {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo/calendar-year @state "2023"]]]])))
+
+(defn preview-calendar-year
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])
@@ -17,13 +17,6 @@
   {:label "Blur:"
    :key   :blur?
    :type  :boolean}
-   {:label   "Override Theme:"
-    :key     :override-theme
-    :type    :select
-    :options [{:key   :dark
-               :value "Dark"}
-              {:key   :light
-               :value "Light"}]}
   {:label "Error:"
    :key   :error?
    :type  :boolean}
@@ -65,7 +58,6 @@
  []
  (let [state (reagent/atom {:type                :text
                             :blur                false
-                             :override-theme      nil
                             :placeholder         "Type something"
                             :error               false
                             :icon-name           false
@@ -19,6 +19,9 @@
    [status-im2.contexts.quo-preview.buttons.slide-button :as slide-button]
    [status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button]
    [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard]
+    [status-im2.contexts.quo-preview.calendar.calendar :as calendar]
+    [status-im2.contexts.quo-preview.calendar.calendar-day :as calendar-day]
+    [status-im2.contexts.quo-preview.calendar.calendar-year :as calendar-year]
    [status-im2.contexts.quo-preview.browser.browser-input :as browser-input]
    [status-im2.contexts.quo-preview.code.snippet :as code-snippet]
    [status-im2.contexts.quo-preview.colors.color-picker :as color-picker]
@@ -145,6 +148,15 @@
   :browser           [{:name      :browser-input
                        :options   {:topBar {:visible false}}
                        :component browser-input/preview-browser-input}]
+   :calendar          [{:name      :calendar
+                        :options   {:topBar {:visible true}}
+                        :component calendar/preview-calendar}
+                       {:name      :calendar-day
+                        :options   {:topBar {:visible true}}
+                        :component calendar-day/preview-calendar-day}
+                       {:name      :calendar-year
+                        :options   {:topBar {:visible true}}
+                        :component calendar-year/preview-calendar-year}]
   :code              [{:name      :snippet
                        :options   {:topBar {:visible true}}
                        :component code-snippet/preview-code-snippet}]
@@ -77,11 +77,10 @@
   "did something here."])

 (def complex-user-action
-  (let [tag-props {:color          :purple
-                   :override-theme :dark
-                   :size           :small
-                   :style          {:background-color colors/white-opa-10}
-                   :text-style     {:color colors/white}}]
+  (let [tag-props {:color      :purple
+                   :size       :small
+                   :style      {:background-color colors/white-opa-10}
+                   :text-style {:color colors/white}}]
    [[quo2/user-avatar-tag tag-props "Alice"]
     "from"
     [quo2/user-avatar-tag tag-props "Mainnet"]
@@ -11,13 +11,12 @@
  []
  (let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
    [quo/filter
-     {:pressed?       unread-filter-enabled?
-      :blur?          true
-      :override-theme :dark
-      :on-press-out   #(rf/dispatch [:activity-center.notifications/fetch-first-page
-                                     {:filter-status (if unread-filter-enabled?
-                                                       :all
-                                                       :unread)}])}]))
+     {:pressed?     unread-filter-enabled?
+      :blur?        true
+      :on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
+                                   {:filter-status (if unread-filter-enabled?
+                                                     :all
+                                                     :unread)}])}]))

 (defn header
  []
@@ -10,7 +10,6 @@

 (def tag-params
  {:size                   :small
-   :override-theme         :dark
   :color                  colors/primary-50
   :style                  style/user-avatar-tag
   :text-style             style/user-avatar-tag-text
@@ -20,11 +19,10 @@
  [user-id]
  (let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
    [quo/user-avatar-tag
-     {:color          :purple
-      :override-theme :dark
-      :size           :small
-      :style          style/user-avatar-tag
-      :text-style     style/user-avatar-tag-text}
+     {:color      :purple
+      :size       :small
+      :style      style/user-avatar-tag
+      :text-style style/user-avatar-tag-text}
     primary-name
     (multiaccounts/displayed-photo contact)]))

@@ -27,7 +27,7 @@
             :z-index (get shared-values
                           (get shell.constants/stacks-z-index-keywords stack-id))})}
   (case stack-id
-     :communities-stack [communities/home]
+     :communities-stack [:f> communities/home]
     :chats-stack       [chat/home]
     :wallet-stack      [wallet.accounts/accounts-overview-old]
     :browser-stack     [browser.stack/browser-stack]
@@ -38,15 +38,13 @@
     shell.constants/community-card
     (case (:type community-info)
       :pending             [quo/status-tag
-                             {:status         {:type :pending}
-                              :label          (i18n/label :t/pending)
-                              :size           :small
-                              :override-theme :dark}]
+                             {:status {:type :pending}
+                              :label  (i18n/label :t/pending)
+                              :size   :small}]
       :kicked              [quo/status-tag
-                             {:status         {:type :negative}
-                              :size           :small
-                              :override-theme :dark
-                              :label          (i18n/label :t/kicked)}]
+                             {:status {:type :negative}
+                              :size   :small
+                              :label  (i18n/label :t/kicked)}]
       (:count :permission) [:<>] ;; Add components for these cases
       nil)

@@ -69,8 +67,8 @@
       [quo/preview-list
        {:type               :photo
         :more-than-99-label (i18n/label :counter-99-plus)
-         :size               24
-         :override-theme     :dark} data]
+         :size               24}
+        data]

       constants/content-type-sticker
       [fast-image/fast-image
@@ -262,12 +260,11 @@
            [rn/view {:style style/avatar-container}
             [avatar avatar-params type customization-color]])
          [quo/button
-           {:size           24
-            :type           :grey
-            :icon           true
-            :on-press       #(rf/dispatch [:shell/close-switcher-card id])
-            :override-theme :dark
-            :style          style/close-button}
+           {:size     24
+            :type     :grey
+            :icon     true
+            :on-press #(rf/dispatch [:shell/close-switcher-card id])
+            :style    style/close-button}
           :i/close]]]))))

 ;; browser Card
@@ -21,7 +21,6 @@
     :type                :blur-bg
     :size                32
     :accessibility-label :close-shell-share-tab
-     :override-theme      :dark
     :style               style/header-button
     :on-press            #(rf/dispatch [:navigate-back])}
    :i/close]
@@ -84,7 +83,6 @@
          :type                :blur-bg
          :size                32
          :accessibility-label :link-to-profile
-          :override-theme      :dark
          :on-press            #(list-selection/open-share {:message profile-url})}
         :i/share]]]]

@@ -113,7 +111,6 @@
         :type                :blur-bg
         :size                32
         :accessibility-label :link-to-profile
-         :override-theme      :dark
         :style               {:margin-right 12}
         :on-press            #(rf/dispatch [:share/copy-text-and-show-toast
                                             {:text-to-copy      emoji-hash-string
@@ -137,7 +134,6 @@
        [quo/segmented-control
         {:size           28
          :blur?          true
-          :override-theme :dark
          :on-change      #(reset! selected-tab %)
          :default-active :profile
          :data           [{:id    :profile
@@ -54,7 +54,6 @@
         :type                :blur-bg
         :size                32
         :accessibility-label :close-sign-in-by-syncing
-         :override-theme      :dark
         :on-press            (fn []
                                (if (and animated? reset-animations-fn)
                                  (reset-animations-fn)
@@ -70,7 +69,6 @@
         :type                :blur-bg
         :size                32
         :accessibility-label :find-sync-code
-         :override-theme      :dark
         :on-press            #(rf/dispatch [:open-modal :find-sync-code])}
        (i18n/label :t/find-sync-code)]]]
     [reanimated/view
@@ -101,7 +99,6 @@
               style/tabs-container)}
      [quo/segmented-control
       {:size           32
-        :override-theme :dark
        :blur?          true
        :default-active @active-tab
        :data           [{:id 1 :label (i18n/label :t/scan-sync-qr-code)}
@@ -151,7 +148,6 @@
       :type                :primary
       :size                32
       :accessibility-label accessibility-label
-       :override-theme      :dark
       :customization-color :blue
       :on-press            on-press}
      (i18n/label button-label)]]))
@@ -115,7 +115,6 @@
             [quo/input
              {:default-value  @code
               :type           :password
-               :override-theme :dark
               :default-shown? true
               :editable       false}]
             [quo/button
@@ -26,19 +26,17 @@

    :button-grey
    [quo/button
-     {:type           :grey
-      :override-theme :dark
-      :size           24
-      :style          style/button-grey}
+     {:type  :grey
+      :size  24
+      :style style/button-grey}
     (i18n/label value)]

    :button-grey-placeholder
    [quo/button
-     {:type           :grey
-      :override-theme :dark
-      :size           24
-      :before         :i/placeholder
-      :style          style/button-grey-placeholder}
+     {:type   :grey
+      :size   24
+      :before :i/placeholder
+      :style  style/button-grey-placeholder}
     (i18n/label value)]

    :context-tag
@@ -111,7 +109,6 @@
         [rn/view {:style style/tabs-container}
          [quo/segmented-control
           {:size           28
-            :override-theme :dark
            :blur?          true
            :default-active :mobile
            :data           platform-data
@@ -88,13 +88,11 @@
     :component add-new-contact/new-contact}

    {:name      :how-to-pair
-     :options   {:theme  :dark
-                 :sheet? true}
+     :options   (assoc options/dark-screen :sheet? true)
     :component how-to-pair/view}

    {:name      :find-sync-code
-     :options   {:theme  :dark
-                 :sheet? true}
+     :options   (assoc options/dark-screen :sheet? true)
     :component find-sync-code/view}

    {:name      :discover-communities
@@ -204,6 +204,10 @@
  [mock]
  (.toHaveBeenCalled (js/expect mock)))

+(defn was-called-with
+  [mock expected-arg]
+  (.toHaveBeenCalledWith (js/expect mock) expected-arg))
+
 (defn was-called-times
  [^js mock number-of-times]
  (.toHaveBeenCalledTimes (js/expect mock) number-of-times))
@@ -9,6 +9,8 @@

 (defn now [] (t/now))

+(def weekday-names ["su" "mo" "tu" "we" "th" "fr" "sa"])
+
 (def ^:const int->weekday
  "Maps the corresponding string representation of a weekday
   By it's numeric index as in cljs-time"
@@ -93,6 +95,12 @@
  [^js locsym]
  (nth (.-DATEFORMATS locsym) 2))

+(defn format-date
+  [date]
+  (if date
+    (t.format/unparse (t.format/formatter "dd/MM/yyyy") date)
+    ""))
+
 ;;;; Datetime formats
 (defn- medium-date-time-format
  [locsym]
@@ -113,6 +121,10 @@
 (def short-date-with-time-fmt (get-formatter-fn short-date-format-with-time))
 (def datetime-within-one-week-fmt (get-formatter-fn datetime-within-one-week-format))

+(def format-long-month
+  (memoize (fn [month]
+             (.format ^js ((get-formatter-fn (constantly "MMMM")))
+                      (t/date-time 1970 month)))))
 ;;;; Utilities
 (defn previous-years?
  [datetime]
@@ -190,3 +190,11 @@
                                              "it"
                                              #'utils.datetime/medium-date-time-format)]
       (is (= (datetime/day-relative epoch) "01 gen 1970, 12:00:00 AM")))))
+
+(deftest format-long-month-test
+  (testing "returns correct month string"
+    (is (= "January" (datetime/format-long-month 1)))
+    (is (= "February" (datetime/format-long-month 2)))
+    (is (= "March" (datetime/format-long-month 3)))
+    (is (= "April" (datetime/format-long-month 4)))
+    (is (= "December" (datetime/format-long-month 12)))))
@@ -114,8 +114,6 @@
    goog.i18n.CompactNumberFormatSymbols_zh_TW
    goog.i18n.CompactNumberFormatSymbols_zu
    goog.i18n.currency
-    goog.i18n.currency.CurrencyInfo
-    goog.i18n.currency.CurrencyInfoTier2
    goog.i18n.DateTimeFormat
    goog.i18n.DateTimeFormat.Format
    goog.i18n.DateTimeSymbols
@@ -23,3 +23,9 @@
     (if (integer? maybe-int)
       maybe-int
       default))))
+
+(defn value-in-range
+  "Returns `num` if is in the range [`lower-bound` `upper-bound`]
+  if `num` exceeds a given bound, then returns the bound exceeded."
+  [number lower-bound upper-bound]
+  (max lower-bound (min number upper-bound)))
@@ -1401,10 +1401,9 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
        chat.long_press_element()
        if self.home_1.mute_chat_button.text != transl["unmute-chat"]:
            self.errors.append("Chat is not muted")
-        # ToDo: enable the next check when https://github.com/status-im/status-mobile/issues/16768 is fixed
-        # expected_text = "%s %s" % (transl["muted-until"], transl["until-you-turn-it-back-on"])
-        # if not self.home_1.element_by_text(expected_text).is_element_displayed():
-        #     self.errors.append("Text '%s' is not shown for muted chat" %expected_text)
+        expected_text = "Muted until you turn it back on"
+        if not self.home_1.element_by_text(expected_text).is_element_displayed():
+            self.errors.append("Text '%s' is not shown for muted chat" %expected_text)
        self.home_1.mute_chat_button.click()

        unmuted_message = "after unmute"
@@ -558,11 +558,10 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
        chat.long_press_element()
        if self.homes[1].mute_chat_button.text != transl["unmute-chat"]:
            self.errors.append("Chat is not muted")
-        # ToDo: enable the next check when https://github.com/status-im/status-mobile/issues/16768 is fixed
-        # # expected_text = "Muted until %s today" % device_time + 1
-        # expected_text = "%s %s" % (transl["muted-until"], transl["until-you-turn-it-back-on"])
-        # if not self.homes[1].element_by_text(expected_text).is_element_displayed():
-        #     self.errors.append("Text '%s' is not shown for muted chat" % expected_text)
+        # expected_text = "Muted until %s today" % device_time + 1
+        expected_text = "Muted until you turn it back on"
+        if not self.homes[1].element_by_text(expected_text).is_element_displayed():
+            self.errors.append("Text '%s' is not shown for muted chat" % expected_text)
        self.chats[1].just_fyi("Member 1 unmutes the chat")
        # self.chats[1].just_fyi("Close app and change device time so chat will be unmuted by timer")
        # self.homes[1].put_app_to_background()
@@ -349,6 +349,22 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):

        self.errors.verify_no_errors()

+    @marks.testrail_id(702869)
+    def test_community_undo_delete_message(self):
+        if not self.channel.chat_message_input.is_element_displayed():
+            self.home.click_system_back_button_until_element_is_shown()
+            self.home.get_to_community_channel_from_home(self.community_name)
+        message_to_delete = "message to delete and undo"
+        self.channel.send_message(message_to_delete)
+        self.channel.delete_message_in_chat(message_to_delete)
+        self.channel.element_by_text("Undo").click()
+        try:
+            self.channel.chat_element_by_text(message_to_delete).wait_for_visibility_of_element()
+        except TimeoutException:
+            pytest.fail("Message was not restored by clicking 'Undo' button")
+        if self.channel.element_starts_with_text("Message deleted").is_element_displayed():
+            pytest.fail("Text about deleted message is shown in the chat")
+
    @marks.testrail_id(703382)
    def test_community_mute_community_and_channel(self):
        self.home.jump_to_communities_home()
@@ -386,7 +402,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
        device_time = self.home.driver.device_time
        current_time = datetime.datetime.strptime(device_time, "%Y-%m-%dT%H:%M:%S%z")
        expected_time = current_time + datetime.timedelta(days=7)
-        expected_text = "Muted until %s" % expected_time.strftime('%H:%M %a %d %b')
+        expected_text = "Muted until %s" % expected_time.strftime('%H:%M %a %-d %b')
        self.community_view.get_channel(self.channel_name).long_press_element()
        if not self.home.element_by_text(expected_text).is_element_displayed():
            self.errors.append("Text '%s' is not shown for a muted community channel" % expected_text)
@@ -402,21 +418,17 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
        self.errors.verify_no_errors()

    @marks.testrail_id(703133)
+    @marks.xfail(reason="Restoring communities issue: 16787; "
+                        "restoring contacts issue: 15500",
+                 run=False)
    def test_restore_multiaccount_with_waku_backup_remove_switch(self):
        self.home.jump_to_communities_home()
        profile = self.home.profile_button.click()
        profile.logout()
+        self.home.just_fyi("Restore user with predefined communities and contacts")
        self.sign_in.recover_access(passphrase=waku_user.seed, second_user=True)

-        self.home.just_fyi("Restore user with predefined communities, check communities")
-        self.home.communities_tab.click()
-        for key in ['admin_open', 'member_open', 'admin_closed', 'member_closed']:
-            if not self.home.element_by_text(waku_user.communities[key]).is_element_displayed(30):
-                self.errors.append("%s was not restored from waku-backup!!" % key)
-        # TODO: there is a bug when pending community sometimes restored as joined; needs investigation
-        # self.home.opened_communities_tab.click()
-        # if not self.home.element_by_text(waku_user.communities['member_pending']).is_element_displayed(30):
-        #     self.errors.append("Pending community %s was not restored from waku-backup!" % waku_user.communities['member_pending'])
+        self.home.just_fyi("Restore user with predefined communities and contacts")

        self.home.just_fyi("Check contacts/blocked users")
        self.home.chats_tab.click()
@@ -433,23 +445,33 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
                if shown_name_text in waku_user.contacts:
                    waku_user.contacts.remove(shown_name_text)
                    continue
-                else:
-                    contact_row.click()
-                    shown_name_text = profile.default_username_text.text
-                    if shown_name_text in waku_user.contacts:
-                        waku_user.contacts.remove(shown_name_text)
-                        continue
-                    else:
-                        chat = self.home.get_chat_view()
-                        chat.profile_send_message_button.click()
-                        for name in waku_user.contacts:
-                            if chat.element_starts_with_text(name).is_element_displayed(sec=20):
-                                waku_user.contacts.remove(name)
-                                continue
+                # else:
+                #     contact_row.click()
+                #     shown_name_text = profile.default_username_text.text
+                #     if shown_name_text in waku_user.contacts:
+                #         waku_user.contacts.remove(shown_name_text)
+                #         continue
+                #     else:
+                #         chat = self.home.get_chat_view()
+                #         chat.profile_send_message_button.click()
+                #         for name in waku_user.contacts:
+                #             if chat.element_starts_with_text(name).is_element_displayed(sec=20):
+                #                 waku_user.contacts.remove(name)
+                #                 continue
        if waku_user.contacts:
            self.errors.append(
                "Contact(s) was (were) not restored from backup: %s!" % ", ".join(waku_user.contacts))

+        self.home.just_fyi("Check restored communities")
+        self.home.communities_tab.click()
+        for key in ['admin_open', 'member_open', 'admin_closed', 'member_closed']:
+            if not self.home.element_by_text(waku_user.communities[key]).is_element_displayed(30):
+                self.errors.append("%s was not restored from waku-backup!!" % key)
+        # TODO: there is a bug when pending community sometimes restored as joined; needs investigation
+        # self.home.opened_communities_tab.click()
+        # if not self.home.element_by_text(waku_user.communities['member_pending']).is_element_displayed(30):
+        #     self.errors.append("Pending community %s was not restored from waku-backup!" % waku_user.communities['member_pending'])
+
        if not pytest_config_global['pr_number']:
            self.home.just_fyi("Perform back up")
            self.home.click_system_back_button_until_element_is_shown()
@@ -498,7 +520,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
                                                                                   'username': self.username_1}),
                                                      (self.device_2.create_user, {'username': self.username_2}))))
        self.homes = self.home_1, self.home_2 = self.device_1.get_home_view(), self.device_2.get_home_view()
-        self.public_key_2 = self.home_2.get_public_key()
+        self.public_key_2 = self.home_2.get_public_key_via_share_profile_tab()
        self.profile_1 = self.home_1.get_profile_view()
        [home.click_system_back_button_until_element_is_shown() for home in self.homes]
        [home.chats_tab.click() for home in self.homes]
@@ -19,7 +19,8 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC
                                                      (self.device_2.create_user, {'username': self.username_2}))))
        self.homes = self.home_1, self.home_2 = self.device_1.get_home_view(), self.device_2.get_home_view()
        self.profile_1, self.profile_2 = self.home_1.get_profile_view(), self.home_2.get_profile_view()
-        self.public_key_1, self.public_key_2 = (home.get_public_key() for home in self.homes)
+        self.public_key_1 = self.home_1.get_public_key()
+        self.public_key_2 = self.home_2.get_public_key_via_share_profile_tab()
        [home.click_system_back_button_until_element_is_shown() for home in self.homes]
        [home.chats_tab.click() for home in self.homes]

@@ -78,9 +79,22 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC

    @marks.testrail_id(702851)
    def test_activity_center_contact_request_accept_swipe_mark_all_as_read(self):
-        self.device_2.just_fyi('Device2 re-sends a contact request to Device1')
+        self.device_2.just_fyi('Creating a new user on Device2')
        self.home_2.jump_to_messages_home()
-        self.home_2.add_contact(self.public_key_1, remove_from_contacts=True)
+        self.home_2.profile_button.click()
+        self.profile_2.logout()
+        new_username = "new user"
+        self.device_2.create_user(second_user=True, username=new_username)
+
+        self.device_2.just_fyi('Device2 sends a contact request to Device1 via Paste button and check user details')
+        self.home_2.driver.set_clipboard_text(self.public_key_1)
+        self.home_2.new_chat_button.click_until_presence_of_element(self.home_2.add_a_contact_chat_bottom_sheet_button)
+        self.home_2.add_a_contact_chat_bottom_sheet_button.click()
+        self.home_2.element_by_translation_id("paste").click()
+        self.home_2.element_by_translation_id("user-found").wait_for_visibility_of_element(10)
+        chat = self.home_2.get_chat_view()
+        chat.view_profile_new_contact_button.click_until_presence_of_element(chat.profile_block_contact_button)
+        chat.profile_add_to_contacts_button.click()

        self.device_1.just_fyi('Device1 accepts pending contact request by swiping')
        self.home_1.chats_tab.click()
@@ -88,7 +102,7 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC
        self.home_1.open_activity_center_button.click()

        self.home_1.just_fyi("Mark all as read")
-        cr_element = self.home_1.get_element_from_activity_center_view(self.username_2)
+        cr_element = self.home_1.get_element_from_activity_center_view(new_username)
        self.home_1.more_options_activity_button.click()
        self.home_1.mark_all_read_activity_button.click()
        if cr_element.is_element_displayed():
@@ -100,7 +114,7 @@ class TestActivityCenterContactRequestMultipleDevicePR(MultipleSharedDeviceTestC
        self.home_1.activity_notification_swipe_button.click_inside_element_by_coordinate(rel_x=0.5, rel_y=0.5)
        self.home_1.close_activity_centre.click()
        self.home_1.contacts_tab.click()
-        if not self.home_1.contact_details_row(username=self.username_2).is_element_displayed(20):
+        if not self.home_1.contact_details_row(username=new_username).is_element_displayed(20):
            self.errors.append("Contact was not added to contact list after accepting contact request (as receiver)")

        self.device_2.just_fyi('Device1 check that contact appeared in contact list mutually')
@@ -7,5 +7,6 @@ communities = {
    'member_closed': 'test_comm_enc',
    'member_pending': 'RC1 testing community'
 }
-contacts = ['Test_contact', 'MyCustomNickname']
-blocked_user = 'Clear Flat Milkweedbug'
+# contacts = ['Test_contact', 'MyCustomNickname'] # enable back when https://github.com/status-im/status-mobile/issues/15500 is fixed
+contacts = ['Used Bulky Wirehair', 'Vengeful Healthy Arcticseal']
+blocked_user = 'Clear Flat Milkweedbug'
@@ -240,6 +240,7 @@ class HomeView(BaseView):
        # Notification centre
        self.notifications_button = Button(self.driver, accessibility_id="notifications-button")
        self.notifications_unread_badge = BaseElement(self.driver, accessibility_id="activity-center-unread-count")
+        self.show_qr_code_button = Button(self.driver, accessibility_id="show-qr-button")
        self.open_activity_center_button = Button(self.driver, accessibility_id="open-activity-center-button")
        self.close_activity_centre = Button(self.driver, accessibility_id="close-activity-center")

@@ -313,6 +314,11 @@ class HomeView(BaseView):
        self.more_options_activity_button = Button(self.driver, accessibility_id="activity-center-open-more")
        self.mark_all_read_activity_button = Button(self.driver, translation_id="mark-all-notifications-as-read")

+        # Share tab
+        self.link_to_profile_text = Text(
+            self.driver,
+            xpath="(//*[@content-desc='link-to-profile']/preceding-sibling::*[1]/android.widget.TextView)[1]")
+
    def wait_for_syncing_complete(self):
        self.driver.info('Waiting for syncing to complete')
        while True:
@@ -518,3 +524,11 @@ class HomeView(BaseView):

    def get_contact_rows_count(self):
        return len(ContactDetailsRow(self.driver).find_elements())
+
+    def get_public_key_via_share_profile_tab(self):
+        self.driver.info("Getting public key via Share tab")
+        self.show_qr_code_button.click()
+        self.link_to_profile_text.click()
+        c_text = self.driver.get_clipboard_text()
+        self.click_system_back_button()
+        return c_text.split("/")[-1]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Siddarth Kumar	62cbbb5484	stage wip steps for WSA	2023-07-31 07:15:11 +05:30
Siddarth Kumar	56700092e0	stage scripts and refactor of doc so far	2023-07-30 13:15:10 +05:30
Siddarth Kumar	e770bc1e44	chore: update introduction a bit	2023-07-29 07:44:47 +05:30
Siddarth Kumar	d056b347d2	docs to setup status-mobile on windows OS	2023-07-29 07:44:46 +05:30
Ulises Manuel Cárdenas	82645f5df4	[#16481 ] Fix unread badge in group chats (#16610 ) * Small refactor & add customization color to `info-count` component * Fix notification mark in group chats for no mentions, also notification alignment styles in the component * Code style: `change > 0` for `pos?`	2023-07-28 13:33:07 -06:00
Ulises Manuel Cárdenas	c4b142ea68	[#16446 ] Communities banner animation (#16567 ) * Simplifies community banner and adds style property * Add animation for communities banner card * Moves value-in-range to `utils.number` and removes `bounded-val` * Moves animated values to view namespace * Make `community.banner` component themeable	2023-07-28 13:18:33 -06:00
Mohsen Ghafouri	3b8f66d2ec	[#16377 ] feat: add calendar component in quo2 preview (#16783 )	2023-07-29 00:26:15 +05:30
Icaro Motta	b9890a9d44	Upgrade shadow-cljs and ClojureScript (#15417 ) This commit upgrades Shadow CLJS from 2.11.16 (released on Feb/21) to latest 2.25.0 (Jul/23), so ~1.5 years worth of upgrades. By upgrading shadow we can finally use the latest major Clojure version 1.11.x. Why upgrade shadow? - Shadow CLJS controls the ClojureScript version we can use. In order to use the latest major Clojure version we must upgrade Shadow CLJS. - Shadow CLJS releases new versions very frequently, and if you take a look at its changelog https://github.com/thheller/shadow-cljs/blob/master/CHANGELOG.md, you'll see it had tons and tons of bug fixes over the years. I hope some of them help improve the DX for certain contributors who recently reported issues with it. - Clojure 1.11 brings new features, bug fixes and even performance improvements (although I think the performance mostly impacts Clojure on the JVM). See the changelog https://github.com/clojure/clojure/blob/master/changes.md#changes-to-clojure-in-version-1110 Things that can be beneficial to us, or are interesting nonetheless: - New :as-alias to be used in require, which is like :as but does not require the namespace to load. This means namespaced keywords using :as-alias can't cause circular dependency errors. This feature would very useful if we used namespaced keywords, but we don't, so... https://github.com/clojure/clojure/blob/master/changes.md#22-as-alias-in-require - New macros run-test and run-test-var to run single test with fixtures and report. - New iteration function, useful for processing paginated data. https://www.abhinavomprakash.com/posts/clojure-iteration/ - New update-keys function: applies a function to every key in a map. - New update-vals function: applies a function to every value in a map. Examples for update-vals and update-keys. They should perform better than the common reduce-kv approach since they use a transient data structure. (let [m {:a 1 :b 2}] (update-vals m inc)) ; => {:a 2, :b 3} (let [m {:a 1 :b 2}] (update-keys m name)) ; => {"a" 1, "b" 2} Why change namespaces within __tests__ directories? Any namespace with the word --tests-- throws an error, like the one below. I didn't bother investigating why, so I changed the guidelines to reflect the new convention. It's probably related to the double dashes in the name. Namespace quo2.components.dividers.--tests--.divider-label-component-spec has a segment starting with an invalid JavaScript identifier at line 1	2023-07-28 13:40:54 -03:00
Siddarth Kumar	ac3b3970f2	fix crash (#16812 )	2023-07-28 21:10:12 +05:30
Siddarth Kumar	1c405d3ed9	chore: wire up `startSearchForLocalPairingPeers` (#16803 ) This commit initialises the status-go method `startSearchForLocalPairingPeers` which in turn will produce logs that are important for peer discovery while local pairing and will produce logs important to detect local pairing crashes.	2023-07-28 15:22:58 +05:30
Jamie Caprani	a8303dbe50	chore: remove uses of override theme prop (#16570 )	2023-07-28 02:36:54 -07:00
Tetiana Churikova	43cba161d6	gh: add label to bug template (#16796 )	2023-07-27 16:56:12 +02:00
Yevheniia BerdnykandChurikova Tetiana	ce08131c01	e2e: new pub key (#16779 ) Co-authored-by: Churikova Tetiana <tatiana@status.im>	2023-07-27 13:14:09 +02:00