Edge case

Extract the focusing logic from the data setting logic
refactor variable name
2023-11-15 11:27:00 +02:00 · 2023-11-15 11:21:41 +02:00 · 2023-11-15 11:12:33 +02:00 · 2023-11-15 11:12:33 +02:00 · 2023-11-15 11:12:33 +02:00 · 2023-11-15 11:12:33 +02:00
437 changed files with 8587 additions and 6042 deletions
@@ -1,2 +1,2 @@
-{:hooks   {:analyze-call {utils.i18n/label hooks.core/i18n-label}}
+{:hooks   {:analyze-call {utils.i18n/label utils.i18n/label}}
 :linters {:status-im.linter/invalid-translation-keyword {:level :error}}}
@@ -1,19 +0,0 @@
-(ns hooks.core
-  (:require [clj-kondo.hooks-api :as api]))
-
-(defn i18n-label
-  "Verify call to `i18n/label` pass the translation keyword qualified with `t`."
-  [{:keys [node]}]
-  (let [[_ translation-key-node & _] (:children node)]
-    (when (and (api/keyword-node? translation-key-node)
-               (not= "t" (-> translation-key-node api/sexpr namespace)))
-      (api/reg-finding! (assoc (meta translation-key-node)
-                               :message "Translation keyword should be qualified with \"t\""
-                               :type    :status-im.linter/invalid-translation-keyword)))))
-
-(comment
-  ;; Valid
-  (i18n-label {:node (api/parse-string "(i18n/label :t/foo)")})
-
-  ;; Invalid
-  (i18n-label {:node (api/parse-string "(i18n/label :foo)")}))
@@ -0,0 +1,26 @@
+(ns utils.i18n
+  (:require [clj-kondo.hooks-api :as hooks]))
+
+(defn label
+  "Verify call to `utils.i18n/label` pass the translation keyword qualified with `t`."
+  [{:keys [node]}]
+  (let [[_ translation-key-node & _] (:children node)]
+    (when (and (hooks/keyword-node? translation-key-node)
+               (not= "t" (-> translation-key-node hooks/sexpr namespace)))
+      (hooks/reg-finding! (assoc (meta translation-key-node)
+                                 :message "Translation keyword should be qualified with \"t\""
+                                 :type    :status-im.linter/invalid-translation-keyword)))))
+
+(comment
+  ;; Valid
+  (label {:node     (hooks/parse-string "(i18n/label :t/foo {:var \"hello\"})")
+          :cljc     false
+          :lang     :cljs
+          :filename ""
+          :config   {}
+          :ns       ""
+          :context  nil})
+
+  ;; Invalid
+  (label {:node (hooks/parse-string "(i18n/label :foo)")})
+)
@@ -190,3 +190,7 @@ test/appium/tests/users.py

 ## git hooks
 lefthook.yml
+
+## clj-kondo
+/.clj-kondo/taoensso/*
+/.clj-kondo/babashka/*
@@ -7,3 +7,4 @@ modules
 result
 target
 component-spec
+/app
@@ -0,0 +1,12 @@
+{
+    "editor.formatOnSave": true,
+    "clojure.format.enable": false,
+    "[clojure]": {
+        "editor.defaultFormatter": "rflagreca.vscode-clj-zprint"
+    },
+    "vscode-clj-zprint.IgnoreExternalFiles": false,
+    "vscode-clj-zprint.CommunityFormatting": false,
+    "vscode-clj-zprint.OptionsMap": "",
+    "vscode-clj-zprint.width": "",
+    "vscode-clj-zprint.Styles.UseOnlyTheseStyles": false
+}
@@ -274,11 +274,11 @@ run-re-frisk: ##@run Start re-frisk server
 # TODO: Migrate this to a Nix recipe, much the same way as nix/mobile/android/targets/release-android.nix
 run-android: export TARGET := android
 # INFO: If it's empty (no devices attached, parsing issues, script error) - for Nix it's the same as not set.
-run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_arch.sh)
+run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_abis.sh)
 run-android: ##@run Build Android APK and start it on the device
 	npx react-native run-android --appIdSuffix debug

-SIMULATOR=iPhone 11 Pro
+SIMULATOR=iPhone 13
 run-ios: export TARGET := ios
 run-ios: export IOS_STATUS_GO_TARGETS := iossimulator/amd64
 run-ios: ##@run Build iOS app and start it in a simulator/device
@@ -312,8 +312,10 @@ lint: export TARGET := clojure
 lint: export CLJ_LINTER_PRINT_WARNINGS ?= false
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
+	sh scripts/lint-direct-require-component-outside-quo.sh && \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src $(if $(filter $(CLJ_LINTER_PRINT_WARNINGS),true),,| grep -v ': warning: ') && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
+	scripts/lint_translations.clj && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
 	sh scripts/lint-trailing-newline.sh && \
 	node_modules/.bin/prettier --write .
@@ -362,6 +364,7 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	@@scripts/check-metro-shadow-process.sh
 	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
@@ -370,6 +373,7 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
+	@scripts/check-metro-shadow-process.sh
 	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
@@ -6,7 +6,7 @@

 [Get it on Github](https://github.com/status-im/status-mobile/releases)

-Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middle men and `go-ethereum` running directly on your device.
+Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middlemen and `go-ethereum` running directly on your device.

 [![Getting started with Status](https://i.imgur.com/C0aZZEL.jpg)](https://www.youtube.com/watch?v=oDCSEmS9c3o "Getting started with Status")

@@ -14,9 +14,9 @@ Join us in creating a browser, messenger, and gateway to a decentralized world.

 We believe in a medium of pure free trade, economies with fair, permission-less access and a world without intermediaries. We want to create policies that can exist between friends or scale globally, we want to communicate securely and be uninhibited by legacy systems.

-We want to take responsibility for our data, the way we conduct ourselves privately and promote this way of life to a mass audience.
+We want to take responsibility for our data, and the way we conduct ourselves privately and promote this way of life to a mass audience.

-We want deep insights into our own economies so we can make informed, data-driven decisions on how to make our lives better. The Ethereum blockchain, Smart Contracts, Swarm and Whisper provide us a path forward.
+We want deep insights into our own economies so we can make informed, data-driven decisions on how to make our lives better. The Ethereum blockchain, Smart Contracts, Swarm and Whisper provide us with a path forward.

 If this interests you, **help us make Status a reality** - anyone can contribute and we need everyone at any skill level to participate.

@@ -37,26 +37,26 @@ project dependencies, coding guidelines and testing procedures.
 Check out our [coding guidelines](doc/new-guidelines.md).

 - **Community Management**
-Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and long lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)
+Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and the long-lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)

 - **Specification / Documentation**
-John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers and Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.
+John Dewey once said, "Education is not preparation for life; education is life *itself* ". Developers and Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.

 - **Blog Writing**
 Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page.

 - **Testers**
-It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
+It's bug-hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user checks out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!

 - **Security**
 Status is a visual interface to make permanent changes on the Blockchain, it handles crypto-tokens that have real value and allows 3rd party code execution. Security is paramount to its success. You are given permission to break Status as hard as you can, as long as you share your findings with the community!

 - **Evangelism**
-Help us spread the word! Tell a friend *right now*, in fact tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)
+Help us spread the word! Tell a friend *right now*, in fact, tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)

 ## Give me Binaries!

-You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/) or by [building it yourself](https://status.im/technical/build_status/).
+You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/), or by [building it yourself](https://status.im/technical/build_status/).

 ## Core Contributors

@@ -33,7 +33,8 @@
            android:name=".MainApplication"
            android:largeHeap="true"
            android:usesCleartextTraffic="true"
-            android:extractNativeLibs="true">
+            android:extractNativeLibs="true"
+            android:requestLegacyExternalStorage="true">
 <!--        After upgrading Android Gradle Plugin to 4.2.0 and above we must get rid of `extractNativeLibs="true"`
            and use`useLegacyPackaging` flag in our app's `build.gradle`-->
        <meta-data android:name="commitHash" android:value="${commitHash}"/>
@@ -22,7 +22,7 @@

 # Version requirements used throughout the Gradle scripts
 kotlinVersion=1.6.20
-minSdkVersion=23
+minSdkVersion=24
 compileSdkVersion=31
 targetSdkVersion=31
 buildToolsVersion=31.0.0
@@ -26,6 +26,8 @@

 [Creating a pixel perfect UI](pixel-perfection.md)

+[Contributing to status-go](status-go-changes.md)
+
 ## Testing

 [How to run local tests](testing.md)
@@ -23,7 +23,7 @@ setups and runs the test suite once.
 setups and runs the test suite and watches for code changes will then retrigger the test suite.

 ## Writing Tests
-New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
+New test files will need their namespace added to either the file "src/quo/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.


 ### Best practices
@@ -99,3 +99,38 @@ Also to inspect logs in a more flexible manner, instead of the strict output fro
 adb logcat | grep 'ReactNativeJS\|StatusModule\|GoLog'
 ```

+### From @clauxx (visual debugging):
+
+When building/fixing/refactoring components, it can be annoying to set-up the component for instant visual feedback (i.e. finding it in the UI when fixing/refactoring; finding a place for it when building from scratch). Very often if the location of the screen containing your component nested deeply in the app, you might have to do a lot of repeated navigation, nevermind logging in every time the app reloads (even with fast refresh disabled this happens quite often).
+
+To alleviate this discomfort and make the development cycle more *pleasant*, you can use one of the following options (*_both of which involve the ... REPL ༼ つ ╹ ╹ ༽つ, so make sure you have that set-up with your IDE/editor_*)
+
+#### REPL-ing to a screen
+
+This one is straightforward, just evaluate a navigation dispatch form from anywhere:
+
+```cljs
+(comment (rf/dispatch [:navigate-to :your-favorite-buggy-screen]))
+```
+
+> TIP: you can run this from an untracked user namespace `(ns user)`, from which you can experiment or interact with the REPL. This is where I usually keep my development navigation forms.
+
+#### REPL-ing a component
+
+This is also straighforward, but there are some small differences. Just like above, we only have to evaluate a dispatch form, as follows:
+
+```cljs
+;; example debugging a quo component, although it could be any other component e.g. from the `status-im2` ns.
+(comment (re-frame/dispatch [:dev/preview-component
+                      [quo/slide-button
+                       {:track-icon          :face-id
+                        :track-text          "preview component example"
+                        :customization-color :blue
+                        :on-complete         identity}]]))
+```
+
+When evaluated, a full-screen bottom sheet will appear with your component inside. You can make changes to the props or the component internals and re-evaluate the changed forms, after which the component will be re-mounted without running a reload (unless you save the file). Other times it's quicker to just hit save and the component will be reloaded as usual (except for the props you evaluated, which have to be re-evaluated when changed).
+
+> TIP: You can have multiple versions of the component as separate comments to check for the component variations
+
+> TIP: You can leave `comment` blocks at the end of component files (other than quo, since can be previewed in other ways) with usages of components, which other developers can use for visualisation/testing.
@@ -18,7 +18,7 @@ While neat in theory, it has some serious downsides:
  As a result of that, more dynamic/state requiring things (like the live tx detail in `/send` command messages) were very hard to do,
  so instead of "eating our own dogfood", we decided to side-step the API and implement such things as hard-coded logic in the app, while partly
  retaining the js code for "easier" things (like parameter declaration).
-  Needles to say, such efforts produced code of very poor quality, riddling our app with hard-coded "magic" everywhere in the codebase, completly
+  Needles to say, such efforts produced code of very poor quality, riddling our app with hard-coded "magic" everywhere in the codebase, completely
  defeating the point of "dogfooding" while still requiring more effort and being much more error prone (no way to unit test jail logic) because 
  of the need to asynchronously communicate with jail for leftover logic in command messages (the parts not hardcoded in app).
  
@@ -13,7 +13,7 @@ accepted

 There was a generally dissatisfaction with our PR flow process from multiple stakeholders, including devs, QA and design. These largely centered around size, speed of integration and quality of PRs.

-For more details, please see pain points in the meeting notes held end of February here: https://notes.status.im/C5pj8g7gQOu9Wo8PtDZsMw?edit# as well as the preceeding Discuss thread: https://discuss.status.im/t/better-pull-requests-process/1044
+For more details, please see pain points in the meeting notes held end of February here: https://notes.status.im/C5pj8g7gQOu9Wo8PtDZsMw?edit# as well as the preceding Discuss thread: https://discuss.status.im/t/better-pull-requests-process/1044

 Also see conversations in Core Dev Call #12 and #13: https://github.com/status-im/pm/

@@ -18,7 +18,7 @@ The whitepaper also proposes that the deposit is only forfeited to the recipient

 Considering:
 - the absence of efficient ways to perform anonymous transactions (zk-snarks could be used in the future for that)
- the impossibility to prove that a recipient has made an actual reply and not some kind of automated reply (captcha solution was proposed, but wouldn't be pratical until we can use a solution such as swarm feeds that allow users to make free updates to their captcha without on-chain transactions)
+- the impossibility to prove that a recipient has made an actual reply and not some kind of automated reply (captcha solution was proposed, but wouldn't be practical until we can use a solution such as swarm feeds that allow users to make free updates to their captcha without on-chain transactions)
 - the limited time to develop the feature

 We opted for a solution that:
@@ -28,8 +28,8 @@ We opted for a solution that:

 ## Manifests

-Since TtT related informations aren't stored on chain, they need to be stored somewhere else.
-For the first iteration of TtT we opted for IPFS, which is already used accross the app for other forms of content, through Infura IPFS gateway.
+Since TtT related information aren't stored on chain, they need to be stored somewhere else.
+For the first iteration of TtT we opted for IPFS, which is already used across the app for other forms of content, through Infura IPFS gateway.

 On IPFS we store what we call a ttt manifest, which is a json file with the following format:

@@ -4,7 +4,7 @@

 ![](images/export-icons/export-icons.gif)

-1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons`
+1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons2`
 2. if necessary, rename file so that filename contains only lower case chars, e.g. `"Icon-Name@2x.png"` should be renamed to `"icon_name@2x.png"`.
 3. In the app `icon_name.png` still can be accessed as `icon-name`, so in order to use can add the next code:
    ```clojure
@@ -64,7 +64,7 @@ tests (otherwise some PRs could wait their turn of the scheduled Jenkins job til

 ## Analysing test results (and why test fails to pass)

-After automated test run finished test results could be found in GH comment (if the test suite ran agaist PR) and TestRail. There are two states of the test: Passed and Failed. Test failure happens when certain condition of test step has not met or automated test can not proceed execution because it can not find the respective element on screen it expects should be there.
+After automated test run finished test results could be found in GH comment (if the test suite ran against PR) and TestRail. There are two states of the test: Passed and Failed. Test failure happens when certain condition of test step has not met or automated test can not proceed execution because it can not find the respective element on screen it expects should be there.

 Several examples of when test fails to succeed:

@@ -17,9 +17,10 @@ You can use any Clojure enabled editor. Here are instructions for developing the
  - [REPL!](#repl)
    - [Connecting to REPL to IntelliJ](#connecting-to-repl-to-intellij)
    - [Connecting REPL and IntelliJ to `status-mobile`](#connecting-repl-and-intellij-to-status-mobile)
- [Using Calva](#using-calva)
-  - [Start and connect the REPL](#start-and-connect-the-repl)
-  - [Use the REPL](#use-the-repl)
+- [Visual Studio Code](#visual-studio-code)
+  - [Set up the REPL](#set-up-the-repl)
+  - [Auto-format files on save](#auto-format-files-on-save)
+- [Using Emacs with CIDER](#using-emacs-with-cider)

 ## Using Cursive

@@ -160,24 +161,24 @@ Following the above should give you the below result:

 For additional details on issues you may face when setting up REPL with Cursive [see this document](https://notes.status.im/9Gr7kqF8SzC_SmYK0eB7uQ?view#Connecting-Cursive--IntelliJ-IDEA-to-REPL-Problems)

-## Using Calva
+## Visual Studio Code

-For VS Code users.
+### Set up the REPL

-0. Install Calva.
+1. Install Calva extension.
+2. Open the `status-mobile` folder.
+3. Start [Status development](starting-guide.md#development) (Starting the
+   `run-clojure` and `run-metro` jobs in split view in the VS Code integrated
+   terminal works great).
+4. Run the VS Code command: **Calva: Connect to a running REPL Server in the
+   project**.
+   - Select the project type `shadow-cljs`.
+   - Accept the suggested connection `host:port`.
+   - Select to connect to the `:mobile` build.

-### Start and connect the REPL
-
-1. Open the `status-mobile` folder.
-1. Start [Status development](starting-guide.md#development) (Starting the `run-clojure` and `run-metro` jobs in split view in the VS Code integrated terminal works great.)
-1. Run the VS Code command: **Calva: Connect to a running REPL Server in the project**
-   1. Select the project type `shadow-cljs`
-   1. Accept the suggested connection `host:port`
-   1. Select to connect to the `:mobile` build
-
-### Use the REPL
-
-Open any `.cljs` file in the project and evaluate forms in it. See https://calva.io/try-first/ for some starter tips and links. Confirm that your REPL is connected to the app by evaluating:
+Open any `.cljs` file in the project and evaluate forms in it. See
+https://calva.io/try-first/ for some starter tips and links. Confirm that your
+REPL is connected to the app by evaluating:

 ```clojure
 (js/alert "Hello from Status App!")
@@ -185,9 +186,35 @@ Open any `.cljs` file in the project and evaluate forms in it. See https://calva

 🎉 Tada! You are ready to use the REPL to improve Status.im! 🎉

-Please consider bookmarking [calva.io](https://calva.io/) for quick access to the Calva documentation. 
+Consider bookmarking [calva.io](https://calva.io/) for quick access to the Calva
+documentation.

-## Using Emacs/Cider
+### Auto-format files on save
+
+We format Clojure code with [zprint](https://github.com/kkinnear/zprint). We
+recommend configuring VSCode to auto-format Clojure files on every save,
+otherwise you'll need to constantly rely on the much slower `make lint-fix`
+command.
+
+1. Create a file `~/.zprintrc` and enable the `:search-config?` option. This is
+   necessary so the VSCode extension finds the project's `.zprintrc`.
+
+```bash
+echo "{:search-config? true}" > ~/.zprintrc
+```
+
+2. Install the extension
+   [vscode-clj-zprint](https://github.com/rflagreca/vscode-clj-zprint). By the
+   way, did you know this extension is written in ClojureScript?
+3. Copy the recommended settings from our repository in
+   [.vscode/settings.example.json](/.vscode/settings.example.json) and merge it
+   with your workspace settings in `.vscode/settings.json`.
+
+The extension `vscode-clj-zprint` is only available for VSCode. If you are using
+VSCodium, you'll need to build the `vsix` (extension) yourself (it's easy, only
+`yarn` and `vsce` are required).
+
+## Using Emacs with CIDER

 1. Install Emacs/Cider/etc. (there is a lot of variability in how to manage things in emacs, so please google for help with this)
 2. Add a local ~/.shadow-cljs/config.edn file like below (corresponding to the version numbers of the packages you are using):
@@ -198,5 +225,3 @@ Please consider bookmarking [calva.io](https://calva.io/) for quick access to th
  [cider/cider-nrepl "0.28.4"]
  [cider/piggieback "0.5.2"]]}
 ```
-
-
@@ -76,7 +76,7 @@ It's important to name functional components with `f-` prefix.

 ### Component props and API scheme to match Figma as closely as possible

-Ideally, the prop names for components (particularly in quo2 Design System)
+Ideally, the prop names for components (particularly in quo Design System)
 should match the Figma properties as best as possible. This makes it easier for
 the developer using that component to configure it correctly for the screen it
 is being used on and avoids unnecessary overwrites and adjustments being made.
@@ -134,7 +134,7 @@ For example if Figma has sizes `:small`, `:medium` and `:large`

 Prefer to define styles in a separate file named `style.cljs`, colocated with
 the source file. For a real example, see
-[src/quo2/components/record_audio/record_audio/style.cljs](../src/quo2/components/record_audio/record_audio/style.cljs).
+[src/quo/components/record_audio/record_audio/style.cljs](../src/quo/components/record_audio/record_audio/style.cljs).

 ```clojure
 ;; bad
@@ -467,9 +467,9 @@ Prefer the pure version of `:json-rpc/call` (no callbacks).

 ### Registering event handlers

-Register events with `re-frame.core/reg-event-fx` and follow [re-frame's best
+Register events with `utils.re-frame/reg-event-fx` and follow [re-frame's best
 practice](https://github.com/day8/re-frame/blob/39adca93673f334dc751ee2d99d340b51a9cc6db/docs/FAQs/BestPractice.md#use-the-fx-effect)
-so use only `:db` and `:fx` effects. `rf/merge` is deprecated and should not be
+so use only `:db` and `:fx` effects. `utils.re-frame/merge` and `utils.re-frame/defn` are deprecated and should not be
 used in the new code in `src/status_im2/`. Don't use
 `re-frame.core/reg-event-db`.

@@ -528,27 +528,27 @@ due to performance constraints.
   (:preferred-name multiaccount)))
 ```

-### Requiring quo2 components
+### Requiring quo components

-Consume `quo2` components from `quo2.core`, unless the namespace is also inside
-the `quo2/` directory.
+Consume `quo` components from `quo.core`, unless the namespace is also inside
+the `quo/` directory.

 ```clojure
 ;; bad
 (ns my-namespace
-  (:require [quo2.components.icon :as icon]))
+  (:require [quo.components.icon :as icon]))

 (icon/icon :i/verified)

 ;; good
 (ns my-namespace
-  (:require [quo2.core :as quo]))
+  (:require [quo.core :as quo]))

 (quo/icon :i/verified)

-;; also good because both namespaces are inside quo2/
-(ns quo2.components.tabs.account-selector
-  (:require [quo2.components.markdown.text :as text]))
+;; also good because both namespaces are inside quo/
+(ns quo.components.tabs.account-selector
+  (:require [quo.components.markdown.text :as text]))
 ```

 ### Require/import
@@ -615,12 +615,12 @@ Use the appropriate keyword qualification/namespace.

 ```clojure
 ;; bad
-(require '[quo2.components.icon :as icons])
+(require '[quo.components.icon :as icons])
 (icons/icon :main-icons2/verified)

 ;; good
-(require '[quo2.core :as quo2])
-(quo2/icon :i/verified)
+(require '[quo.core :as quo])
+(quo/icon :i/verified)
 ```

 ### Translations
@@ -695,7 +695,7 @@ First, the bird's-eye view with some example ClojureScript files:
 src
 ├── js/
 ├── mocks/
-├── quo2
+├── quo
 │   ├── components/
 │   ├── foundations/
 │   └── theme.cljs
@@ -716,7 +716,7 @@ src

 - `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
 - `src/mocks`: Plumbing configuration to be able to run tests.
- `src/quo2/`: The component library for Status Mobile.
+- `src/quo/`: The component library for Status Mobile.
 - `src/react_native/`: Contains only low-level constructs to help React Native
  work in tandem with Clojure(Script).
 - `src/status_im2/`: Directory where we try to be as strict as possible about
@@ -728,7 +728,7 @@ src
  of the directory tree. Just like directories named `utils`, their directory
  nesting level communicates their applicable limits.
 - `src/status_im2/common/components/`: Contains reusable components that are not
-  part of the design system (quo2).
+  part of the design system (quo).
 - `src/status_im2/contexts/`: Contains [bounded contexts](#glossary), like
  `browser/`, `messaging/`, etc. As much as possible, _bounded contexts_ should
  not directly require each other's namespaces.
@@ -743,9 +743,9 @@ directory nesting level precisely indicates its boundaries. For example, a
 `contexts/user_settings/utils/datetime.cljs` file communicates that it should
 only be used in the `user_settings` context.

-### src/quo2
+### src/quo

-The `src/quo2/` directory holds all components for the new design system. As
+The `src/quo/` directory holds all components for the new design system. As
 much as possible, its sub-directories and component names should reflect the
 same language used by designers.

@@ -753,14 +753,14 @@ Even though the directory lives alongside the rest of the codebase, we should
 think of it as an external entity that abstracts away particular Status domain
 knowledge.

-Components inside `src/quo2/` should not rely on re-frame, i.e. they should not
+Components inside `src/quo/` should not rely on re-frame, i.e. they should not
 dispatch events or use subscriptions.

 Example structure:

 ```
 src
-└── quo2
+└── quo
    ├── components
    │   └── dropdown
    │       ├── style.cljs
@@ -1,7 +1,7 @@
 # Patching

 ## Libraries
-If 3rd party library has an issue and fix is not yet released (or we can't switch to a new release), we use forks. Fix should be commited to the fork, tagged and referenced from package.json.
+If 3rd party library has an issue and fix is not yet released (or we can't switch to a new release), we use forks. Fix should be committed to the fork, tagged and referenced from package.json.

 Example: [`react-native-hole-view`](https://github.com/status-im/react-native-hole-view#refs/tags/v2.1.1-status)

@@ -1,16 +1,22 @@
 # Pixel Perfection
 The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.

-Currently the Figma Designs match up with an "iPhone 11 Pro" screen size. 
+Currently, the Figma Designs match up with both "iPhone 11 Pro" and "iPhone 13" screen size.
+
+The Dimension reference for iPhone 11 Pro is 375 x 812 (width x height) and for iPhone 13 is 390 x 844.

 To test your implementation is correct you can take the following steps

 - Open a new Figma file so that you have write privileges. 
+
 - Copy in the component or screen from the Figma file.

- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+- Using the "iPhone 11 Pro" or the "iPhone 13" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+
+- To get the right size, set your screenshot to width according to your simulator: 
+  - for iPhone 13 set 390
+  - for iPhone 11 Pro set 375

- To get the right size, set your screenshot to width 375px

 ![](images/pixel-perfection/layer-width.png)

@@ -13,7 +13,7 @@ QA process was focused on account creation and login with keycard, and this bug

 ## Resolution process

- the commit was reverted locally by the developer which fixed the issue localy and confirmed the faulty commit
+- the commit was reverted locally by the developer which fixed the issue locally and confirmed the faulty commit
 - the bug was only reproducible on iOS which strongly hinted at a potential issue with native code
 - the missing method was not the origin of the problem but was found at this point and further analysis lead to the shadowing error

@@ -30,23 +30,23 @@ You need to have an emulator like [AVD](https://developer.android.com/studio/run

 #### Running on a simulator

-We highly recommend using the `iPhone 11 Pro` simulator as its screen dimensions match with our design.
+We highly recommend using either the `iPhone 11 Pro` or `iPhone 13` simulator as its screen dimensions match with our design.

-If you have Xcode `v12.x` (and above) installed in your system, you need to follow the below steps to add `iPhone 11 Pro` simulator:
+If you have Xcode `v12.x` (and above) installed in your system, you need to follow the below steps to add `iPhone 13` simulator:

 1. Open Xcode
 2. Menu `>` Window `>` Devices and Simulators
 3. Tap `+` button on bottom left
-4. Select **Device Type** as `iPhone 11 Pro`
+4. Select **Device Type** as `iPhone 13`
 5. Leave the **Simulator Name** empty and tap on **Create**

 ##### NOTE ⚠️

-Running `make run-ios` will target `iPhone 11 Pro` by default.
+Running `make run-ios` will target `iPhone 13` by default.

 If you need to run on any other simulator, you can specify the simulator type by adding the `SIMULATOR` flag:
 ```sh
-make run-ios SIMULATOR="iPhone 11 Pro"
+make run-ios SIMULATOR="iPhone 13"
 ```

 #### Running on a physical device
@@ -0,0 +1,31 @@
+# How to make changes to status-go
+
+
+## Overview
+
+To make changes to status-go, the best approach is to first identify the issue/feature and the changes to be made directly in status-go.
+For any bugs we want to most likely write a failing test in status-go, and make sure that it passes, before we test on mobile.
+
+Once you are quite confident that the status-go code is ready to be tested on mobile, you can test it locally by running the following command:
+
+```
+env STATUS_GO_SRC_OVERRIDE={your-status-go-directory} make run-{android/ios}
+```
+
+This will recompile status-go and run status-mobile on your device with that updated status-go version.
+
+Once you have tested the status-go changes locally and you think it's ready for a PR:
+
+1) Create a PR in status-go
+
+2) Point your local status-mobile branch to that PR by running the script:
+
+```
+scripts/update-status-go.sh {status-go-branch-name}
+```
+
+This will update `status-go-version.json`
+
+Commit updated status-go-version.json and create a status-mobile PR
+
+Once both PRs have been approved and are good to merge, you can follow the [merge guidelines](./merging-pr-process.md)
@@ -75,6 +75,13 @@ abstract_target 'Status' do
        # TODO : remove after upgrading to react-native 0.72.x
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION']
      end
+      # We need to remove the predefinition of IPHONEOS_DEPLOYMENT_TARGET from RNCK lib to use our own.
+      case target.name
+      when 'ReactNativeCameraKit'
+        target.build_configurations.each do |config|
+          config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
+        end
+      end
    end
  end

@@ -247,7 +247,7 @@ PODS:
    - React-Core
  - react-native-blur (4.3.3):
    - React-Core
-  - react-native-cameraroll (4.0.4):
+  - react-native-cameraroll (5.10.0):
    - React-Core
  - react-native-config (1.5.0):
    - react-native-config/App (= 1.5.0)
@@ -346,7 +346,7 @@ PODS:
    - React-perflogger (= 0.69.10)
  - ReactNativeAudioToolkit (2.0.3):
    - React
-  - ReactNativeCameraKit (13.0.0):
+  - ReactNativeCameraKit (14.0.0-beta13):
    - React-Core
  - ReactNativeNavigation (7.27.1):
    - HMSegmentedControl
@@ -468,7 +468,7 @@ DEPENDENCIES:
  - react-native-background-timer (from `../node_modules/react-native-background-timer`)
  - react-native-blob-util (from `../node_modules/react-native-blob-util`)
  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
-  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
+  - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
  - react-native-config (from `../node_modules/react-native-config`)
  - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
  - react-native-lottie-splash-screen (from `../node_modules/react-native-lottie-splash-screen`)
@@ -584,7 +584,7 @@ EXTERNAL SOURCES:
  react-native-blur:
    :path: "../node_modules/@react-native-community/blur"
  react-native-cameraroll:
-    :path: "../node_modules/@react-native-community/cameraroll"
+    :path: "../node_modules/@react-native-camera-roll/camera-roll"
  react-native-config:
    :path: "../node_modules/react-native-config"
  react-native-image-resizer:
@@ -723,7 +723,7 @@ SPEC CHECKSUMS:
  react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
  react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
  react-native-blur: c6d0a1dc2b4b519f7afe3b14d8151998632b6d18
-  react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2
+  react-native-cameraroll: 4701ae7c3dbcd3f5e9e150ca17f250a276154b35
  react-native-config: 5330c8258265c1e5fdb8c009d2cabd6badd96727
  react-native-image-resizer: 2f1577efa3bc762597681f530c8e8d05ce0ceeb3
  react-native-lottie-splash-screen: 068688c15dd478301fda00f8d87d7fb7d5b9a93e
@@ -750,7 +750,7 @@ SPEC CHECKSUMS:
  React-runtimeexecutor: 5ebf1ddaa706bf2986123f22d2cad905443c2c5f
  ReactCommon: 65754b8932ea80272714988268bbfb9f303264a5
  ReactNativeAudioToolkit: de9610f323e855ac6574be8c99621f3d57c5df06
-  ReactNativeCameraKit: 9d46a5d7dd544ca64aa9c03c150d2348faf437eb
+  ReactNativeCameraKit: d95d3e19c514526a234d9f93c6db7e7f10eef9ea
  ReactNativeNavigation: 94979dd1572a3f093fc85d4599360530a1bed8c8
  RNCAsyncStorage: b2489b49e38c85e10ed45a888d13a2a4c7b32ea1
  RNCClipboard: 8148e21ac347c51fd6cd4b683389094c216bb543
@@ -765,7 +765,7 @@ SPEC CHECKSUMS:
  RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
  RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
  RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: cf1259a8cf8dfb1d7fa586ce02565fd0610da1d7
+  RNReanimated: 42f56dc5c032a11177b9ea12cdb57285318b432e
  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
@@ -777,6 +777,6 @@ SPEC CHECKSUMS:
  TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
  Yoga: d24d6184b6b85f742536bd93bd07d69d7b9bb4c1

-PODFILE CHECKSUM: 4d710b4207b0fb0f6ecef4aa92bb79b716a7d13c
+PODFILE CHECKSUM: 84b749023e1c988c133d7a6ec09d125536e4a4fd

 COCOAPODS: 1.12.0
@@ -1194,21 +1194,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        return getPublicStorageDirectory().getAbsolutePath();
    }

-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public String generateAlias(final String seed) {
-        return Statusgo.generateAlias(seed);
-    }
-
-    @ReactMethod
-    public void generateAliasAsync(final String seed, final Callback callback) throws JSONException {
-        executeRunnableStatusGoMethod(() -> Statusgo.generateAlias(seed), callback);
-    }
-
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public String identicon(final String seed) {
-        return Statusgo.identicon(seed);
-    }
-
    @ReactMethod(isBlockingSynchronousMethod = true)
    public String encodeTransfer(final String to, final String value) {
        return Statusgo.encodeTransfer(to, value);
@@ -1269,31 +1254,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        executeRunnableStatusGoMethod(() -> Statusgo.identicon(seed), callback);
    }

-    @ReactMethod
-    public void generateAliasAndIdenticonAsync(final String seed, final Callback callback) {
-
-         Log.d(TAG, "generateAliasAndIdenticonAsync");
-                if (!checkAvailability()) {
-                    callback.invoke(false);
-                    return;
-                }
-
-                Runnable r = new Runnable() {
-                    @Override
-                    public void run() {
-                        String resIdenticon = Statusgo.identicon(seed);
-                        String resAlias = Statusgo.generateAlias(seed);
-
-                        Log.d(TAG, resIdenticon);
-                        Log.d(TAG, resAlias);
-                        callback.invoke(resAlias, resIdenticon);
-                    }
-                };
-
-                StatusThreadPoolExecutor.getInstance().execute(r);
-
-    }
-
    @Override
    public @Nullable
    Map<String, Object> getConstants() {
@@ -880,10 +880,6 @@ RCT_EXPORT_METHOD(callRPC:(NSString *)payload
    });
 }

-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(generateAlias:(NSString *)publicKey) {
-  return StatusgoGenerateAlias(publicKey);
-}
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(keystoreDir) {
    NSFileManager *fileManager = [NSFileManager defaultManager];
    NSURL *rootUrl =[[fileManager
@@ -943,19 +939,6 @@ RCT_EXPORT_METHOD(initLogging:(BOOL)enabled
    callback(@[initResult]);
 }

-RCT_EXPORT_METHOD(generateAliasAsync:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"generateAliasAsync() method called");
-#endif
-    NSString *result = StatusgoGenerateAlias(publicKey);
-    callback(@[result]);
-}
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(identicon:(NSString *)publicKey) {
-  return StatusgoIdenticon(publicKey);
-}
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(encodeTransfer:(NSString *)to
                                       value:(NSString *)value) {
  return StatusgoEncodeTransfer(to,value);
@@ -1011,15 +994,6 @@ RCT_EXPORT_METHOD(validateMnemonic:(NSString *)seed
    callback(@[result]);
 }

-RCT_EXPORT_METHOD(identiconAsync:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"identiconAsync() method called");
-#endif
-    NSString *result = StatusgoIdenticon(publicKey);
-    callback(@[result]);
-}
-
 RCT_EXPORT_METHOD(createAccountAndLogin:(NSString *)request) {
 #if DEBUG
    NSLog(@"createAccountAndLogin() method called");
@@ -1034,16 +1008,6 @@ RCT_EXPORT_METHOD(restoreAccountAndLogin:(NSString *)request) {
    StatusgoRestoreAccountAndLogin(request);
 }

-RCT_EXPORT_METHOD(generateAliasAndIdenticonAsync:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"generateAliasAndIdenticonAsync() method called");
-#endif
-    NSString *identiconResult = StatusgoIdenticon(publicKey);
-    NSString *aliasResult = StatusgoGenerateAlias(publicKey);
-    callback(@[aliasResult, identiconResult]);
-}
-
 RCT_EXPORT_METHOD(callPrivateRPC:(NSString *)payload
                  callback:(RCTResponseSenderBlock)callback) {
    dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
@@ -354,38 +354,6 @@ void _StopCPUProfiling(const FunctionCallbackInfo<Value>& args) {

 }

-void _Identicon(const FunctionCallbackInfo<Value>& args) {
-	Isolate* isolate = args.GetIsolate();
-        Local<Context> context = isolate->GetCurrentContext();
-
-	if (args.Length() != 1) {
-		// Throw an Error that is passed back to JavaScript
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for Identicon")));
-		return;
-	}
-
-	// Check the argument types
-
-	if (!args[0]->IsString()) {
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'pk'")));
-		return;
-	}
-
-
-	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
-	char *arg0 = *arg0Obj;
-
-	// Call exported Go function, which returns a C string
-	char *c = Identicon(arg0);
-
-	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
-	args.GetReturnValue().Set(ret);
-	delete c;
-
-}
-
 void _EncodeTransfer(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
        Local<Context> context = isolate->GetCurrentContext();
@@ -864,38 +832,6 @@ void _CreateAccountAndLogin(const FunctionCallbackInfo<Value>& args) {

 }

-void _GenerateAlias(const FunctionCallbackInfo<Value>& args) {
-	Isolate* isolate = args.GetIsolate();
-        Local<Context> context = isolate->GetCurrentContext();
-
-	if (args.Length() != 1) {
-		// Throw an Error that is passed back to JavaScript
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for GenerateAlias")));
-		return;
-	}
-
-	// Check the argument types
-
-	if (!args[0]->IsString()) {
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'pk'")));
-		return;
-	}
-
-
-	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
-	char *arg0 = *arg0Obj;
-
-	// Call exported Go function, which returns a C string
-	char *c = GenerateAlias(arg0);
-
-	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
-	args.GetReturnValue().Set(ret);
-	delete c;
-
-}
-
 void _ValidateMnemonic(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
        Local<Context> context = isolate->GetCurrentContext();
@@ -1953,7 +1889,6 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "multiAccountStoreAccount", _MultiAccountStoreAccount);
 	NODE_SET_METHOD(exports, "initKeystore", _InitKeystore);
 	NODE_SET_METHOD(exports, "stopCPUProfiling", _StopCPUProfiling);
-	NODE_SET_METHOD(exports, "identicon", _Identicon);
 	NODE_SET_METHOD(exports, "encodeTransfer", _EncodeTransfer);
 	NODE_SET_METHOD(exports, "encodeFunctionCall", _EncodeFunctionCall);
 	NODE_SET_METHOD(exports, "decodeParameters", _DecodeParameters);
@@ -1968,7 +1903,6 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "resetChainData", _ResetChainData);
 	NODE_SET_METHOD(exports, "saveAccountAndLogin", _SaveAccountAndLogin);
 	NODE_SET_METHOD(exports, "createAccountAndLogin", _CreateAccountAndLogin);
-	NODE_SET_METHOD(exports, "generateAlias", _GenerateAlias);
 	NODE_SET_METHOD(exports, "validateMnemonic", _ValidateMnemonic);
 	NODE_SET_METHOD(exports, "multiformatSerializePublicKey", _MultiformatSerializePublicKey);
 	NODE_SET_METHOD(exports, "saveAccountAndLoginWithKeycard", _SaveAccountAndLoginWithKeycard);
@@ -7932,16 +7932,16 @@
  },

  {
-    "path": "com/adobe/xmp/xmpcore/6.0.6",
+    "path": "com/adobe/xmp/xmpcore/6.1.11",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "xmpcore-6.0.6.pom": {
-        "sha1": "6a917e15f78165ed31482a339b9c6bd65900ebdd",
-        "sha256": "sha256-/5kclKMi2JShufIhMW1UXHtH0LP4Uf438vpECHpIoFU="
+      "xmpcore-6.1.11.pom": {
+        "sha1": "9f2a56e38f04aa222f8d5436cb07529d80cf89d2",
+        "sha256": "sha256-cZEYGCECwlM+kqL2fANRAmTmFgVxpzishj51cSQXMj0="
      },
-      "xmpcore-6.0.6.jar": {
-        "sha1": "fb29d75ac313aed79013505b965d2378a87a9405",
-        "sha256": "sha256-Qy95ojgKPmW+p1TI0L4MCcaTjfrqH25hsBeEytbBjP8="
+      "xmpcore-6.1.11.jar": {
+        "sha1": "852f14101381e527e6d43339d7db1698c970436c",
+        "sha256": "sha256-j3AzxXm5n6DZ1t3LlEiHW15LV3w1AAInjORpl9Z4tzc="
      }
    }
  },
@@ -8931,16 +8931,16 @@
  },

  {
-    "path": "com/drewnoakes/metadata-extractor/2.12.0",
+    "path": "com/drewnoakes/metadata-extractor/2.18.0",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "metadata-extractor-2.12.0.pom": {
-        "sha1": "1e3a24770062e3f4d6fb9b9e80b64d7aa4fdb237",
-        "sha256": "sha256-odxWCuxbZlaa7O5YUqun4F/iEX+660IakMXhyRJV+k4="
+      "metadata-extractor-2.18.0.pom": {
+        "sha1": "8a253b5c301e2b71ddb0ad28f3d8656d34f8781f",
+        "sha256": "sha256-p9E4Id81LFQz1QjswN6KDwSWOE6kggfYEhR8pZgqFZ4="
      },
-      "metadata-extractor-2.12.0.jar": {
-        "sha1": "30dce2429145a41770e0d2bd0a8e8ba63f2137c8",
-        "sha256": "sha256-tlzqky+2RNl79mxrfUXmG2lnxyvsISb8PkyD9iWcHQU="
+      "metadata-extractor-2.18.0.jar": {
+        "sha1": "fa9fd43a28b10333108c603819810d5176d2b092",
+        "sha256": "sha256-R4k2H9Bji9skFVS3oMyuIF7SOWl+K3D6nK2t7WmEtWU="
      }
    }
  },
@@ -9545,20 +9545,20 @@
  },

  {
-    "path": "com/fasterxml/jackson/core/jackson-annotations/2.15.3",
+    "path": "com/fasterxml/jackson/core/jackson-annotations/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-annotations-2.15.3.pom": {
-        "sha1": "ff14c9fbeaec5f25b2d61490621477f5197818a2",
-        "sha256": "sha256-/6ZxZvvkz/NJfQzGKcIBnNDnzV7QG+xoOny/IT0DDsg="
+      "jackson-annotations-2.16.0-rc1.pom": {
+        "sha1": "a6e6361e5a7116cc24ae1cfbd76ec384b53fcc64",
+        "sha256": "sha256-P/CYyUC37b4fTX8mIaaNtNaofqmSlRE5Vsccisl69nI="
      },
-      "jackson-annotations-2.15.3.jar": {
-        "sha1": "79baf4e605eb3bbb60b1c475d44a7aecceea1d60",
-        "sha256": "sha256-quhlw9iCVtYbEVI8seiL1I1bmtWFX6H8hZUE/SIEcIo="
+      "jackson-annotations-2.16.0-rc1.jar": {
+        "sha1": "0aa7db9c1afcacf3fa2358107f2a82326aa15c64",
+        "sha256": "sha256-24kpC38tI5Sg8EKNWpb0WprCrt/XMpM7TXdgNvbtWGg="
      },
-      "jackson-annotations-2.15.3.module": {
-        "sha1": "7be6f491ea5707562778533e030f951c78f9a9b1",
-        "sha256": "sha256-ZBDJSzk+SU1T1WncQZOnkYeEjdtu48LuHzkkd6IQWcs="
+      "jackson-annotations-2.16.0-rc1.module": {
+        "sha1": "6b75ee9d686c52f7b7624bfceeacc5ca28a95c1b",
+        "sha256": "sha256-YcrFZD9QeVIPTfBkQPC/SKkxRVwMRW8wnHVItEGKElI="
      }
    }
  },
@@ -9579,20 +9579,20 @@
  },

  {
-    "path": "com/fasterxml/jackson/core/jackson-core/2.15.3",
+    "path": "com/fasterxml/jackson/core/jackson-core/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-core-2.15.3.pom": {
-        "sha1": "6291d6b0843755417d2bc20c2be4904dd467b836",
-        "sha256": "sha256-zNUAkXSDshrhg135hFuRqxGsmroIt5PS7PgtKMBp7OI="
+      "jackson-core-2.16.0-rc1.pom": {
+        "sha1": "be1f4e4e7d6b2c74859aa81edb8bbd00e701172f",
+        "sha256": "sha256-wOXaP11xEWp/+0BgexwoXwv81kmXDk/qfEkb4N31cLM="
      },
-      "jackson-core-2.15.3.jar": {
-        "sha1": "60d600567c1862840397bf9ff5a92398edc5797b",
-        "sha256": "sha256-Ufq3qtUe1YhILtxQf9VCdHk2xQlNGrdu0h3bY7lrYQ0="
+      "jackson-core-2.16.0-rc1.jar": {
+        "sha1": "dba6d80eb8bfc326eaa1e72483e6d80852503e29",
+        "sha256": "sha256-3mlqkMaoGhFeJSu2pDkq85T6je9Da8f66CgL1mwccXI="
      },
-      "jackson-core-2.15.3.module": {
-        "sha1": "cfe2c6fcdf029eb556be3e56ede868535112a856",
-        "sha256": "sha256-E4ApvLMrC/pwENP2RmMr3lyYwYfi8aoSChzUE/I6bCg="
+      "jackson-core-2.16.0-rc1.module": {
+        "sha1": "e948b398d5cc338a0f300fa633caf797bac121a7",
+        "sha256": "sha256-qyE84ApdlT2sZVSlaOw1qPOFA4AMLOt21MzD6yiwwMI="
      }
    }
  },
@@ -9613,20 +9613,20 @@
  },

  {
-    "path": "com/fasterxml/jackson/core/jackson-databind/2.15.3",
+    "path": "com/fasterxml/jackson/core/jackson-databind/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-databind-2.15.3.pom": {
-        "sha1": "0542b905f13dc61af5dd15d6cd9bb6cec2375d58",
-        "sha256": "sha256-tuPNSud9D/lQfqsc55Szqp7ieCQcZUQzO9t++8Wi5Pk="
+      "jackson-databind-2.16.0-rc1.pom": {
+        "sha1": "ffb4977a414eddab58b2d3e1fb21ab48657bcb8e",
+        "sha256": "sha256-1r2DJq1W9dA5yQzF/qcxetqqUB+ybEMEDn6XsNrjgW4="
      },
-      "jackson-databind-2.15.3.jar": {
-        "sha1": "a734bc2c47a9453c4efa772461a3aeb273c010d9",
-        "sha256": "sha256-w8UzM6IXKoBni9oYA+Oc/0W+xq4+nH1PRKgexOKrGNw="
+      "jackson-databind-2.16.0-rc1.jar": {
+        "sha1": "cb84bf813891fd3a6c04518f7dce66cb7f914c12",
+        "sha256": "sha256-40+i+ah5zRD42Xfib4YK37XTKkxCCJRvTyPHucprgm0="
      },
-      "jackson-databind-2.15.3.module": {
-        "sha1": "d4d12bf39a3c3560d0a69b6b05adab2182f1da44",
-        "sha256": "sha256-UbqNcfWgSudo6EyR1O3wmh/IvBJEsDvU+bBguPs5VhU="
+      "jackson-databind-2.16.0-rc1.module": {
+        "sha1": "9d6a30d78b30fea5a62cc629addef1dd2f8ffa21",
+        "sha256": "sha256-wyMhPyOKnSQHiUQZW721rnteq9WNAfZ46HClETqgDiE="
      }
    }
  },
@@ -9658,12 +9658,12 @@
  },

  {
-    "path": "com/fasterxml/jackson/jackson-base/2.15.3",
+    "path": "com/fasterxml/jackson/jackson-base/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-base-2.15.3.pom": {
-        "sha1": "0da5901e059a4accee9e1dbbe41f395a586fcad7",
-        "sha256": "sha256-QpA0Kr8LDkVnMi/7LQw24lsKh6IXu1azVoCo3Y+NZuQ="
+      "jackson-base-2.16.0-rc1.pom": {
+        "sha1": "b0ea2e74cd9077f6394d6c745d84aab9d35436df",
+        "sha256": "sha256-Xihgwy19do1PsQLQZz7D+aZ1NJBalQNh1yqKdkvPQXM="
      }
    }
  },
@@ -9680,12 +9680,12 @@
  },

  {
-    "path": "com/fasterxml/jackson/jackson-bom/2.15.3",
+    "path": "com/fasterxml/jackson/jackson-bom/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-bom-2.15.3.pom": {
-        "sha1": "1b221d661c2943cccc45acfffd41c07d10963494",
-        "sha256": "sha256-ZvyZRcFnFrwgL0udfm2WnfP1Cf7/vhrPGjFRG3U9XJ0="
+      "jackson-bom-2.16.0-rc1.pom": {
+        "sha1": "9f0aa2b767de8428e4151cc86793a6892cf0b22a",
+        "sha256": "sha256-oNo29tts8XhCSM+qZ/HXxjNZYTdoEU4Q5MtImXBefZw="
      }
    }
  },
@@ -9702,12 +9702,12 @@
  },

  {
-    "path": "com/fasterxml/jackson/jackson-parent/2.15",
+    "path": "com/fasterxml/jackson/jackson-parent/2.16-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-parent-2.15.pom": {
-        "sha1": "caffbeb9be9350780ad5407789f43664906042ec",
-        "sha256": "sha256-bN+XvGbzifY+NoUNL1UtEhZoj45aWHJ9P2qY7fhnXN4="
+      "jackson-parent-2.16-rc1.pom": {
+        "sha1": "b0b57e481f46e394aa45a2b164af9ad92dd4946b",
+        "sha256": "sha256-y0Fkj+L5t6Sa19QTaK50D+iHvEs/NQJO2iUayQQ20ss="
      }
    }
  },
@@ -9724,12 +9724,12 @@
  },

  {
-    "path": "com/fasterxml/jackson/module/jackson-modules-base/2.15.3",
+    "path": "com/fasterxml/jackson/module/jackson-modules-base/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-modules-base-2.15.3.pom": {
-        "sha1": "696c8c2635ca5e18809afc24b2c92cff0e930880",
-        "sha256": "sha256-lhtdELjxVWdSYRkED+Jo9lXQwDF01awJpgJO3IMPWe4="
+      "jackson-modules-base-2.16.0-rc1.pom": {
+        "sha1": "449a9b459071042c2d5e3eef698b7435ec7a22d0",
+        "sha256": "sha256-p7KoYdmdDHItUNIOnfQbO5XcXCMXXMpnK+zHqKPwIow="
      }
    }
  },
@@ -9750,20 +9750,20 @@
  },

  {
-    "path": "com/fasterxml/jackson/module/jackson-module-jaxb-annotations/2.15.3",
+    "path": "com/fasterxml/jackson/module/jackson-module-jaxb-annotations/2.16.0-rc1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jackson-module-jaxb-annotations-2.15.3.pom": {
-        "sha1": "2d4fdcbe0f7dda2e7396f3757be75117112ba532",
-        "sha256": "sha256-CUbzJZy+BHolxbVxl3AThdbnteWh+KVrml9dnLT/VYE="
+      "jackson-module-jaxb-annotations-2.16.0-rc1.pom": {
+        "sha1": "7cfdd570dea65bb1144cd3280ced0a3359c3a3b3",
+        "sha256": "sha256-uKkIWZvE6M4xvGiR9cMyPkp6HEucG1kpueJWw0cQjv4="
      },
-      "jackson-module-jaxb-annotations-2.15.3.jar": {
-        "sha1": "74e8ef60b65b42051258465f06c06195e61e92f2",
-        "sha256": "sha256-UqDcjpIm04QXmg6chORajQDNup6akvkT6z9PmdqDYno="
+      "jackson-module-jaxb-annotations-2.16.0-rc1.jar": {
+        "sha1": "04c27538836a829dcd0f38baf55b4b65eb34283b",
+        "sha256": "sha256-bXNKNWyTupzAINnzsvgdaP2SUldbIepfLVWWlBbNAsg="
      },
-      "jackson-module-jaxb-annotations-2.15.3.module": {
-        "sha1": "23d97c5e6a045d87c06e10ae16e0fb57e8367846",
-        "sha256": "sha256-sbbt714pCVO5k/JYnOUSC+XLBPObuUwZZ376q5ZQ9FI="
+      "jackson-module-jaxb-annotations-2.16.0-rc1.module": {
+        "sha1": "65e9ab1a8205e6f8eb8d4652b52c321b2d8b2555",
+        "sha256": "sha256-7CPt/ZsEE4S6IcZYxd7iiM5js21tdflUkb+lEPMyDPg="
      }
    }
  },
@@ -9795,12 +9795,12 @@
  },

  {
-    "path": "com/fasterxml/oss-parent/50",
+    "path": "com/fasterxml/oss-parent/55",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "oss-parent-50.pom": {
-        "sha1": "2e5ec5928fa4a136254d3dfeb8c56f47b049d8ed",
-        "sha256": "sha256-9dpV3XuI+xcMRoAdF3dKZS+y9FgftbHQpfyGqhgrhXc="
+      "oss-parent-55.pom": {
+        "sha1": "24ad110e0e507856ae662736d6c6ef5b101a1689",
+        "sha256": "sha256-D14Y8rNev22Dn3/VSZcog/aWwhD5rjIwr9LCC6iGwE0="
      }
    }
  },
@@ -12027,12 +12027,12 @@
  },

  {
-    "path": "com/sun/xml/bind/jaxb-bom-ext/4.0.3",
+    "path": "com/sun/xml/bind/jaxb-bom-ext/4.0.4",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jaxb-bom-ext-4.0.3.pom": {
-        "sha1": "5838d8e4fa9335d67d5b9c092a4a80c1e67b2dad",
-        "sha256": "sha256-SkQftgU/yfRooSve6hy48Efq9kNzA34/BJrUMEJ/0PA="
+      "jaxb-bom-ext-4.0.4.pom": {
+        "sha1": "43e647d464b91a7a232e6c49510598d1476cdfe1",
+        "sha256": "sha256-AMvdv+7k5Y3pmhnrbrBCS5K8YBttoP+JXcAYPpbsdLM="
      }
    }
  },
@@ -12071,12 +12071,12 @@
  },

  {
-    "path": "com/sun/xml/bind/mvn/jaxb-parent/4.0.3",
+    "path": "com/sun/xml/bind/mvn/jaxb-parent/4.0.4",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jaxb-parent-4.0.3.pom": {
-        "sha1": "ce4f3532ee7c0e092605b7b43cc3640999927af7",
-        "sha256": "sha256-6WIwlX8fVlh/nP25dKNr7XcH6JYWtakKknss99NHZ28="
+      "jaxb-parent-4.0.4.pom": {
+        "sha1": "2846b11dfea85e485a63ce6cbc1c30bf4fdd812e",
+        "sha256": "sha256-5+klMqRcmhpIc2y2goem8e97ey/u1ljUmf3M18ofqts="
      }
    }
  },
@@ -12148,12 +12148,12 @@
  },

  {
-    "path": "com/sun/xml/bind/mvn/jaxb-txw-parent/4.0.3",
+    "path": "com/sun/xml/bind/mvn/jaxb-txw-parent/4.0.4",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jaxb-txw-parent-4.0.3.pom": {
-        "sha1": "be33bd0d60d44f50811c22405c29e56f82d7ecd0",
-        "sha256": "sha256-hU4ErXwT/9tlUbKQ6apsCN10JQdTvMgB4HZVB9EYfXw="
+      "jaxb-txw-parent-4.0.4.pom": {
+        "sha1": "e2f336db2b61a4474b0363c6a86a8bca4342deb8",
+        "sha256": "sha256-4ROP8PpMBot6RjWoE5ZkKuDgdRqSGj/aE8QenwL7I6w="
      }
    }
  },
@@ -12204,16 +12204,16 @@
  },

  {
-    "path": "com/sun/xml/fastinfoset/FastInfoset/2.1.0",
+    "path": "com/sun/xml/fastinfoset/FastInfoset/2.1.1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "FastInfoset-2.1.0.pom": {
-        "sha1": "8a3328cc394e06c71de7147d4b8954f5fb3c4326",
-        "sha256": "sha256-kLnl6oTboVRq9G+7YyYZ8llaMvwGCQ0uwJXao7MtqZc="
+      "FastInfoset-2.1.1.pom": {
+        "sha1": "85420a8093b72919bd47f0e4ca8abf2274c3797c",
+        "sha256": "sha256-Sf3LDhtzh1Ln2kuljnpenkhskI8ZuFNTVQadrvq3On4="
      },
-      "FastInfoset-2.1.0.jar": {
-        "sha1": "cd92e93ef4ee608bffe4ba41b1247846a3d42227",
-        "sha256": "sha256-uWgWGqtr6x6hpKYqPYS112LWJoH3ziPPAwSZFdl0jSE="
+      "FastInfoset-2.1.1.jar": {
+        "sha1": "650c84348bbcf4461bd24d38e67f7a7ce687de24",
+        "sha256": "sha256-ddZjXgkQHvFUXZpZu02VJOxr8VJGVAr1Q1dQ8nFhJ2U="
      }
    }
  },
@@ -12252,12 +12252,12 @@
  },

  {
-    "path": "com/sun/xml/fastinfoset/fastinfoset-project/2.1.0",
+    "path": "com/sun/xml/fastinfoset/fastinfoset-project/2.1.1",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "fastinfoset-project-2.1.0.pom": {
-        "sha1": "170bbdc773e5317f258728a71a4629e6ee17a0d1",
-        "sha256": "sha256-zCQMIUxrJpsvx459lRp1YRd5X0PRUts686i+shjve+o="
+      "fastinfoset-project-2.1.1.pom": {
+        "sha1": "64c42818f61c961fd357788a0e8287369358258d",
+        "sha256": "sha256-HoDvsaCRWw+GJrp11ylrXxuwJpoKL51zh62Zh/duTAk="
      }
    }
  },
@@ -15599,12 +15599,12 @@
  },

  {
-    "path": "org/glassfish/jaxb/jaxb-bom/4.0.3",
+    "path": "org/glassfish/jaxb/jaxb-bom/4.0.4",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jaxb-bom-4.0.3.pom": {
-        "sha1": "53d62c7214b0bece9a644e50df2a7d2aa37e0db8",
-        "sha256": "sha256-Zg8EhAYlliYXiumpcrA86VFmXDPDM8q0U7EXi40NJBU="
+      "jaxb-bom-4.0.4.pom": {
+        "sha1": "d1830dd5724a8e016bc02f09b67da8d92def48af",
+        "sha256": "sha256-FuRpMAtWNmdun7N52twbuY9B98O4ajCuSTjp5NSBLfw="
      }
    }
  },
@@ -15625,16 +15625,16 @@
  },

  {
-    "path": "org/glassfish/jaxb/jaxb-core/4.0.3",
+    "path": "org/glassfish/jaxb/jaxb-core/4.0.4",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "jaxb-core-4.0.3.pom": {
-        "sha1": "0ed53eb2323c424a024c5b87c7a217f282d43dda",
-        "sha256": "sha256-crhKVGcO3sRAUgH3Heo7C/aYJbrkFjNtfzFAbGnHoyc="
+      "jaxb-core-4.0.4.pom": {
+        "sha1": "bebde7111ac1bc5789b3bdd1cbbe779ca536a727",
+        "sha256": "sha256-TpWVc9NJxkOGq2ayYB7etV008XURTVvIKdi2gXU1+pQ="
      },
-      "jaxb-core-4.0.3.jar": {
-        "sha1": "e9093b4a82069a1d78ee9a3233ca387bca88861f",
-        "sha256": "sha256-1tdcQidSaE+/BN10ohaY/q4OSkBsKJK1rwLSPcl7KsY="
+      "jaxb-core-4.0.4.jar": {
+        "sha1": "2d5aadd02af86f1e9d8c6f7e8501673f915d4e25",
+        "sha256": "sha256-ARKiZiNGD7TfWgoptmPyrf5+lYTrE4rgR7WiHJRX8Nc="
      }
    }
  },
@@ -15730,16 +15730,16 @@
  },

  {
-    "path": "org/glassfish/jaxb/txw2/4.0.3",
+    "path": "org/glassfish/jaxb/txw2/4.0.4",
    "repo": "https://repo.maven.apache.org/maven2",
    "files": {
-      "txw2-4.0.3.pom": {
-        "sha1": "998f7a3836d5e44d6fdce01e3c67d8fe01ca6f43",
-        "sha256": "sha256-i4TetIZ5zAQrPL7GjXA9+c6May+SOdqKKOPKqp7a1Nk="
+      "txw2-4.0.4.pom": {
+        "sha1": "8202a6876a73122a6349569a327508713d849fcf",
+        "sha256": "sha256-rPArplfsukbSZyFAfOj3Vl1NBPpFwTt0QXoVT7Qm9SA="
      },
-      "txw2-4.0.3.jar": {
-        "sha1": "47b8fe31c6d1a3382203af919400527389e01e9c",
-        "sha256": "sha256-3welGAG5leRK7JqV74ddlfu43ih0QX3mBm2E9zHLnpw="
+      "txw2-4.0.4.jar": {
+        "sha1": "cfd2bcf08782673ac370694fdf2cf76dbaa607ef",
+        "sha256": "sha256-Mue9UXjinyKU0D0nk8QeVOUjWLarlc0TQ/JsHCsnQic="
      }
    }
  },
@@ -18162,6 +18162,21 @@
    }
  },

+  {
+    "path": "org/junit/junit-bom/5.9.3",
+    "repo": "https://repo.maven.apache.org/maven2",
+    "files": {
+      "junit-bom-5.9.3.pom": {
+        "sha1": "b1874b6a66656e4f5e4b492ab321249bcb749dc7",
+        "sha256": "sha256-TQMpzZ5y8kIOXKFXJMv+b/puX9KIg2FRYnEZD9w0Ltc="
+      },
+      "junit-bom-5.9.3.module": {
+        "sha1": "d70d3d9a503c573e648ef70fb2e211fbe44aa63e",
+        "sha256": "sha256-tAH9JZAeWCpSSqU0PEs54ovFbiSWHBBpvytLv87ka5M="
+      }
+    }
+  },
+
  {
    "path": "org/junit/junit-bom/5.10.0",
    "repo": "https://repo.maven.apache.org/maven2",
@@ -117,7 +117,7 @@ commons-codec:commons-codec:1.11
 commons-io:commons-io:2.4
 commons-logging:commons-logging:1.1.1
 commons-logging:commons-logging:1.2
-com.adobe.xmp:xmpcore:6.0.6
+com.adobe.xmp:xmpcore:6.1.11
 com.afollestad.material-dialogs:commons:0.9.6.0
 com.afollestad.material-dialogs:core:0.9.6.0
 com.airbnb.android:lottie:3.4.4
@@ -444,7 +444,7 @@ com.diffplug.durian:durian-io:1.2.0
 com.diffplug.spotless:spotless-lib-extra:2.30.0
 com.diffplug.spotless:spotless-lib:2.30.0
 com.diffplug.spotless:spotless-plugin-gradle:6.11.0
-com.drewnoakes:metadata-extractor:2.12.0
+com.drewnoakes:metadata-extractor:2.18.0
 com.facebook.conceal:conceal:1.1.3
 com.facebook.fbjni:fbjni-java-only:0.2.2
 com.facebook.fresco:animated-base:2.5.0
@@ -498,7 +498,7 @@ https://repo.maven.apache.org/maven2/commons-codec/commons-codec/1.16.0/commons-
 https://repo.maven.apache.org/maven2/commons-io/commons-io/2.4/commons-io-2.4.pom
 https://repo.maven.apache.org/maven2/commons-logging/commons-logging/1.1.1/commons-logging-1.1.1.pom
 https://repo.maven.apache.org/maven2/commons-logging/commons-logging/1.2/commons-logging-1.2.pom
-https://repo.maven.apache.org/maven2/com/adobe/xmp/xmpcore/6.0.6/xmpcore-6.0.6.pom
+https://repo.maven.apache.org/maven2/com/adobe/xmp/xmpcore/6.1.11/xmpcore-6.1.11.pom
 https://repo.maven.apache.org/maven2/com/afollestad/material-dialogs/commons/0.9.6.0/commons-0.9.6.0.pom
 https://repo.maven.apache.org/maven2/com/afollestad/material-dialogs/core/0.9.6.0/core-0.9.6.0.pom
 https://repo.maven.apache.org/maven2/com/airbnb/android/lottie/3.4.4/lottie-3.4.4.pom
@@ -563,7 +563,7 @@ https://repo.maven.apache.org/maven2/com/diffplug/durian/durian-io/1.2.0/durian-
 https://repo.maven.apache.org/maven2/com/diffplug/spotless/spotless-lib-extra/2.30.0/spotless-lib-extra-2.30.0.pom
 https://repo.maven.apache.org/maven2/com/diffplug/spotless/spotless-lib/2.30.0/spotless-lib-2.30.0.pom
 https://repo.maven.apache.org/maven2/com/diffplug/spotless/spotless-plugin-gradle/6.11.0/spotless-plugin-gradle-6.11.0.pom
-https://repo.maven.apache.org/maven2/com/drewnoakes/metadata-extractor/2.12.0/metadata-extractor-2.12.0.pom
+https://repo.maven.apache.org/maven2/com/drewnoakes/metadata-extractor/2.18.0/metadata-extractor-2.18.0.pom
 https://repo.maven.apache.org/maven2/com/facebook/conceal/conceal/1.1.3/conceal-1.1.3.pom
 https://repo.maven.apache.org/maven2/com/facebook/fbjni/fbjni-java-only/0.2.2/fbjni-java-only-0.2.2.pom
 https://repo.maven.apache.org/maven2/com/facebook/fresco/animated-base/2.5.0/animated-base-2.5.0.pom
@@ -593,25 +593,25 @@ https://repo.maven.apache.org/maven2/com/facebook/soloader/soloader/0.10.1/soloa
 https://repo.maven.apache.org/maven2/com/facebook/soloader/soloader/0.10.3/soloader-0.10.3.pom
 https://repo.maven.apache.org/maven2/com/facebook/yoga/proguard-annotations/1.19.0/proguard-annotations-1.19.0.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-annotations/2.11.1/jackson-annotations-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-annotations/2.15.3/jackson-annotations-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-annotations/2.16.0-rc1/jackson-annotations-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-core/2.11.1/jackson-core-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-core/2.15.3/jackson-core-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-core/2.16.0-rc1/jackson-core-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-databind/2.11.1/jackson-databind-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-databind/2.15.3/jackson-databind-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/core/jackson-databind/2.16.0-rc1/jackson-databind-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/dataformat/jackson-dataformat-xml/2.11.1/jackson-dataformat-xml-2.11.1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-base/2.11.1/jackson-base-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-base/2.15.3/jackson-base-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-base/2.16.0-rc1/jackson-base-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-bom/2.11.1/jackson-bom-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-bom/2.15.3/jackson-bom-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-bom/2.16.0-rc1/jackson-bom-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-parent/2.11/jackson-parent-2.11.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-parent/2.15/jackson-parent-2.15.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/jackson-parent/2.16-rc1/jackson-parent-2.16-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-modules-base/2.11.1/jackson-modules-base-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-modules-base/2.15.3/jackson-modules-base-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-modules-base/2.16.0-rc1/jackson-modules-base-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-module-jaxb-annotations/2.11.1/jackson-module-jaxb-annotations-2.11.1.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-module-jaxb-annotations/2.15.3/jackson-module-jaxb-annotations-2.15.3.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-module-jaxb-annotations/2.16.0-rc1/jackson-module-jaxb-annotations-2.16.0-rc1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/jackson/module/jackson-module-kotlin/2.11.1/jackson-module-kotlin-2.11.1.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/oss-parent/38/oss-parent-38.pom
-https://repo.maven.apache.org/maven2/com/fasterxml/oss-parent/50/oss-parent-50.pom
+https://repo.maven.apache.org/maven2/com/fasterxml/oss-parent/55/oss-parent-55.pom
 https://repo.maven.apache.org/maven2/com/fasterxml/woodstox/woodstox-core/6.2.1/woodstox-core-6.2.1.pom
 https://repo.maven.apache.org/maven2/com/github/bumptech/glide/annotations/4.12.0/annotations-4.12.0.pom
 https://repo.maven.apache.org/maven2/com/github/bumptech/glide/compiler/4.12.0/compiler-4.12.0.pom
@@ -771,26 +771,26 @@ https://repo.maven.apache.org/maven2/com/sun/istack/istack-commons/4.2.0/istack-
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/2.2.11/jaxb-bom-ext-2.2.11.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/2.3.1/jaxb-bom-ext-2.3.1.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/2.3.2/jaxb-bom-ext-2.3.2.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/4.0.3/jaxb-bom-ext-4.0.3.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/bind/jaxb-bom-ext/4.0.4/jaxb-bom-ext-4.0.4.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/2.2.11/jaxb-parent-2.2.11.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/2.3.1/jaxb-parent-2.3.1.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/2.3.2/jaxb-parent-2.3.2.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/4.0.3/jaxb-parent-4.0.3.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-parent/4.0.4/jaxb-parent-4.0.4.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-runtime-parent/2.2.11/jaxb-runtime-parent-2.2.11.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-runtime-parent/2.3.1/jaxb-runtime-parent-2.3.1.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-runtime-parent/2.3.2/jaxb-runtime-parent-2.3.2.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/2.2.11/jaxb-txw-parent-2.2.11.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/2.3.1/jaxb-txw-parent-2.3.1.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/2.3.2/jaxb-txw-parent-2.3.2.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/4.0.3/jaxb-txw-parent-4.0.3.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/bind/mvn/jaxb-txw-parent/4.0.4/jaxb-txw-parent-4.0.4.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/1.2.13/FastInfoset-1.2.13.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/1.2.15/FastInfoset-1.2.15.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/1.2.16/FastInfoset-1.2.16.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/2.1.0/FastInfoset-2.1.0.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/FastInfoset/2.1.1/FastInfoset-2.1.1.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/fastinfoset-project/1.2.13/fastinfoset-project-1.2.13.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/fastinfoset-project/1.2.15/fastinfoset-project-1.2.15.pom
 https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/fastinfoset-project/1.2.16/fastinfoset-project-1.2.16.pom
-https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/fastinfoset-project/2.1.0/fastinfoset-project-2.1.0.pom
+https://repo.maven.apache.org/maven2/com/sun/xml/fastinfoset/fastinfoset-project/2.1.1/fastinfoset-project-2.1.1.pom
 https://repo.maven.apache.org/maven2/com/tunnelvisionlabs/antlr4-annotations/4.5/antlr4-annotations-4.5.pom
 https://repo.maven.apache.org/maven2/com/tunnelvisionlabs/antlr4-annotations/4.9.0/antlr4-annotations-4.9.0.pom
 https://repo.maven.apache.org/maven2/com/tunnelvisionlabs/antlr4-master/4.5/antlr4-master-4.5.pom
@@ -1031,16 +1031,16 @@ https://repo.maven.apache.org/maven2/org/eclipse/jgit/org.eclipse.jgit/5.13.1.20
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/2.2.11/jaxb-bom-2.2.11.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/2.3.1/jaxb-bom-2.3.1.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/2.3.2/jaxb-bom-2.3.2.pom
-https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/4.0.3/jaxb-bom-4.0.3.pom
+https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-bom/4.0.4/jaxb-bom-4.0.4.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-core/2.2.11/jaxb-core-2.2.11.pom
-https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-core/4.0.3/jaxb-core-4.0.3.pom
+https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-core/4.0.4/jaxb-core-4.0.4.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-runtime/2.2.11/jaxb-runtime-2.2.11.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-runtime/2.3.1/jaxb-runtime-2.3.1.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/jaxb-runtime/2.3.2/jaxb-runtime-2.3.2.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/2.2.11/txw2-2.2.11.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/2.3.1/txw2-2.3.1.pom
 https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/2.3.2/txw2-2.3.2.pom
-https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/4.0.3/txw2-4.0.3.pom
+https://repo.maven.apache.org/maven2/org/glassfish/jaxb/txw2/4.0.4/txw2-4.0.4.pom
 https://repo.maven.apache.org/maven2/org/hamcrest/hamcrest-core/1.3/hamcrest-core-1.3.pom
 https://repo.maven.apache.org/maven2/org/hamcrest/hamcrest-core/2.2/hamcrest-core-2.2.pom
 https://repo.maven.apache.org/maven2/org/hamcrest/hamcrest-parent/1.3/hamcrest-parent-1.3.pom
@@ -1199,6 +1199,7 @@ https://repo.maven.apache.org/maven2/org/json/json/20180813/json-20180813.pom
 https://repo.maven.apache.org/maven2/org/json/json/20231013/json-20231013.pom
 https://repo.maven.apache.org/maven2/org/jsoup/jsoup/1.13.1/jsoup-1.13.1.pom
 https://repo.maven.apache.org/maven2/org/junit/junit-bom/5.9.2/junit-bom-5.9.2.pom
+https://repo.maven.apache.org/maven2/org/junit/junit-bom/5.9.3/junit-bom-5.9.3.pom
 https://repo.maven.apache.org/maven2/org/junit/junit-bom/5.10.0/junit-bom-5.10.0.pom
 https://repo.maven.apache.org/maven2/org/jvnet/staxex/stax-ex/1.7.7/stax-ex-1.7.7.pom
 https://repo.maven.apache.org/maven2/org/jvnet/staxex/stax-ex/1.8.1/stax-ex-1.8.1.pom
@@ -21,7 +21,7 @@ let
      buildInputs = with pkgs; [
        clojure flock maven openjdk
        # lint specific utilities
-        clj-kondo zprint clojure-lsp
+        babashka clj-kondo clojure-lsp ripgrep zprint
      ];
      # CLASSPATH from clojure deps with 'src' appended to find local sources.
      shellHook = with pkgs; ''
@@ -10,9 +10,9 @@
  "dependencies": {
    "@babel/preset-typescript": "^7.17.12",
    "@react-native-async-storage/async-storage": "^1.17.9",
+    "@react-native-camera-roll/camera-roll": "git+https://github.com/status-im/react-native-camera-roll.git#refs/tags/v5.1.1.1",
    "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
-    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.3-status",
-    "@react-native-community/cameraroll": "git+https://github.com/status-im/react-native-cameraroll.git#refs/tags/v4.0.4-status.0",
+    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur.git#refs/tags/v4.3.3-status",
    "@react-native-community/clipboard": "^1.2.2",
    "@react-native-community/hooks": "^3.0.0",
    "@react-native-community/masked-view": "^0.1.6",
@@ -34,7 +34,7 @@
    "react-native": "0.69.10",
    "react-native-background-timer": "^2.1.1",
    "react-native-blob-util": "^0.13.18",
-    "react-native-camera-kit": "^13.0.0",
+    "react-native-camera-kit": "14.0.0-beta13",
    "react-native-config": "^1.5.0",
    "react-native-dialogs": "^1.0.4",
    "react-native-draggable-flatlist": "^4.0.1",
@@ -47,6 +47,7 @@
    "react-native-image-crop-picker": "git+https://github.com/status-im/react-native-image-crop-picker.git#refs/tags/v0.36.2-status.0",
    "react-native-image-resizer": "^1.2.3",
    "react-native-image-viewing": "git+https://github.com/status-im/react-native-image-viewing.git#refs/tags/v0.2.1.status",
+    "react-native-intersection-observer": "^0.2.0",
    "react-native-keychain": "git+https://github.com/status-im/react-native-keychain.git#refs/tags/v.3.0.0-5-status",
    "react-native-languages": "^3.0.2",
    "react-native-linear-gradient": "^2.8.0",
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+if pgrep -f 'shadow-cljs watch mobile' > /dev/null; then
+    echo "Error: make run-clojure is already running in another terminal" >&2
+    echo "Please close that terminal before running this command." >&2
+    exit 1
+fi
+
+if pgrep -f 'react-native start' > /dev/null; then
+    echo "Error: make run-metro is already running in another terminal" >&2
+    echo "Please close that terminal before running this command." >&2
+    exit 1
+fi
+
+exit 0
@@ -0,0 +1,14 @@
+#!/usr/bin/env sh
+
+# quo components namespace ends with style|utils|types|reaction-resource
+# are not the component view, they are usually utils fns or styles
+
+if rg --pcre2 --glob '!src/quo/**/*' 'quo\.components(\.[\w-]+)*\.[\w-]*(?<!style|utils|types|reaction-resource)(\s|\]|\n)' src; then
+  echo "Found above direct require of quo component outside src/quo/"
+  echo "For more info, check the style guide https://github.com/status-im/status-mobile/blob/develop/doc/new-guidelines.md#requiring-quo-components"
+  exit 1
+elif [ $? -eq 1 ]; then
+  exit 0
+else
+  exit $?
+fi
@@ -0,0 +1,98 @@
+#!/usr/bin/env bb
+
+(ns lint-translations
+  (:require [babashka.pods :as pods]))
+
+(pods/load-pod 'clj-kondo/clj-kondo "2023.09.07")
+(require '[pod.borkdude.clj-kondo :as kondo])
+(require '[cheshire.core :as json])
+(require '[clojure.set :as set])
+
+(def src-paths ["src"])
+
+(def translation-file "translations/en.json")
+
+;; set the following to true when solving https://github.com/status-im/status-mobile/issues/17811
+(def flag-show-non-namespaced-translation-keys false)
+(def flag-show-non-namespaced-translation-keys-occurrences false) ;; this makes the output super verbose!
+
+;; set the following to true when solving https://github.com/status-im/status-mobile/issues/17813
+;; and keep it permanently on after #17811 and #17813 have both been solved
+(def flag-show-unused-translation-keys false)
+
+(def flag-show-missing-translation-keys true)
+
+(defn- safe-name
+  [x]
+  (when x (name x)))
+
+(defn- ->keyword
+  [analysis-keyword]
+  (keyword (safe-name (:ns analysis-keyword)) (:name analysis-keyword)))
+
+(defn- report-issues
+  [incorrect-usages]
+  (doseq [incorrect-usage incorrect-usages]
+    (->> incorrect-usage
+         ((juxt :filename :row :reason ->keyword))
+         (apply format "%s:%s %s %s")
+         println)))
+
+(defn- extract-translation-keys
+  [file]
+  (-> file slurp json/parse-string keys))
+
+(def ^:private probably-unused-warning
+  (format "Probably unused translation key in %s:" translation-file))
+
+(defn -main
+  [& _args]
+  (println "Linting translations...")
+  (let [result                           (kondo/run!
+                                          {:lint   src-paths
+                                           :config {:output {:analysis {:keywords true}}}})
+        all-keywords                     (get-in result [:analysis :keywords])
+        used-translations                (filter (comp (partial = 't) :ns) all-keywords)
+        file-translation-keys            (apply sorted-set (extract-translation-keys translation-file))
+        missing-translations             (remove (comp file-translation-keys :name) used-translations)
+        used-translation-keys            (set (map :name used-translations))
+        possibly-unused-translation-keys (set/difference file-translation-keys used-translation-keys)
+        non-namespaced-translations      (filter
+                                          (fn [kw]
+                                            (and (not (:ns kw))
+                                                 (possibly-unused-translation-keys (:name kw))))
+                                          all-keywords)
+        unused-translation-keys          (set/difference possibly-unused-translation-keys
+                                                         (set (map :name non-namespaced-translations)))]
+
+    ;; TODO (2023-11-06 akatov): delete the following once #17811 and #17813 have both been solved
+    (doseq [k (apply sorted-set (map :name non-namespaced-translations))]
+      (when flag-show-non-namespaced-translation-keys
+        (println "Probably non-namespaced key" k))
+      (when flag-show-non-namespaced-translation-keys-occurrences
+        (->> non-namespaced-translations
+             (filter #(= k (:name %)))
+             (map #(assoc % :reason "Possibly non-namespaced translation key"))
+             report-issues)))
+
+    (when flag-show-unused-translation-keys
+      (run! #(println probably-unused-warning %) unused-translation-keys))
+
+    (when flag-show-missing-translation-keys
+      (report-issues (map #(assoc % :reason "Undefined Translation Key") missing-translations)))
+
+    (if (and
+         (or (not flag-show-missing-translation-keys)
+             (empty? missing-translations))
+         (or (not flag-show-unused-translation-keys)
+             (empty? possibly-unused-translation-keys))
+         (or (not flag-show-non-namespaced-translation-keys)
+             (not flag-show-non-namespaced-translation-keys-occurrences)
+             (empty? unused-translation-keys)))
+      0
+      1)))
+
+(when (= *file* (System/getProperty "babashka.file"))
+  (->> *command-line-args*
+       (apply -main)
+       System/exit))
@@ -106,11 +106,9 @@
   :target :node-test
   ;; Uncomment line below to `make test-watch` a specific file
   ;; :ns-regexp "status-im2.subs.messages-test$"
-   :main
-   status-im.test-runner/main
+   :main status-im.test-runner/main
   ;; set :ui-driven to true to let shadow-cljs inject node-repl
-   :ui-driven
-   true
+   :ui-driven true
   :closure-defines
   {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
    status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
@@ -6,10 +6,3 @@ export function infoLayout(input, isTop) {
    return isTop ? input.value : -input.value;
  });
 }
-
-export function textSheet(input, isHeight) {
-  return useDerivedValue(function () {
-    'worklet';
-    return isHeight ? input.value : -input.value;
-  });
-}
@@ -300,6 +300,11 @@
   {:clamp     nil
    :withPause (fn [])})

+(def react-native-intersection-observer
+  #js
+   {:InView     #js {}
+    :IOFlatList #js {}})
+
 (def react-native-languages
  (clj->js {:default {:language            "en"
                      :addEventListener    (fn [])
@@ -346,7 +351,8 @@
  (clj->js {:BlurView {}}))

 (def react-native-camera-roll
-  (clj->js {:default #js {}}))
+  (clj->js {:default    #js {}
+            :CameraRoll #js {}}))

 (def react-native-orientation-locker
  (clj->js {:default                    #js {}
@@ -410,7 +416,7 @@
    "react-native-navigation"                        react-native-navigation
    "@react-native-community/push-notification-ios"  push-notification-ios
    "@react-native-community/blur"                   react-native-blur
-    "@react-native-community/cameraroll"             react-native-camera-roll
+    "@react-native-camera-roll/camera-roll"          react-native-camera-roll
    "react-native-camera-kit"                        react-native-camera-kit
    "react-native-permissions"                       react-native-permissions
    "rn-emoji-keyboard"                              rn-emoji-keyboard
@@ -425,6 +431,7 @@
    "react-native-transparent-video"                 react-native-transparent-video
    "react-native-orientation-locker"                react-native-orientation-locker
    "react-native-gifted-charts"                     react-native-gifted-charts
+    "react-native-intersection-observer"             react-native-intersection-observer
    "../resources/data/emojis/en.json"               (js/JSON.parse (slurp
                                                                     "./resources/data/emojis/en.json"))
    "../src/js/worklets/core.js"                     worklet-factory
@@ -4,8 +4,7 @@
    [clojure.string :as string]
    [react-native.platform :as platform]
    [taoensso.timbre :as log]
-    [utils.transforms :as types]
-    [utils.validators :as validators]))
+    [utils.transforms :as types]))

 (defn status
  []
@@ -431,19 +430,6 @@
    ;; in unknown scenarios we also consider the device rooted to avoid degrading security
    :else (callback true)))

-(defn generate-gfycat
-  "Generate a 3 words random name based on the user public-key, synchronously"
-  [public-key]
-  (log/debug "[native-module] generate-gfycat")
-  (when (validators/valid-public-key? public-key)
-    (.generateAlias ^js (status) public-key)))
-
-(defn identicon
-  "Generate a icon based on a string, synchronously"
-  [seed]
-  (log/debug "[native-module] identicon")
-  (.identicon ^js (status) seed))
-
 (defn encode-transfer
  [to-norm amount-hex]
  (log/debug "[native-module] encode-transfer")
@@ -501,12 +487,6 @@
  (log/debug "[native-module] to-checksum-address")
  (.toChecksumAddress ^js (status) address))

-(defn gfycat-identicon-async
-  "Generate an icon based on a string and 3 words random name asynchronously"
-  [seed callback]
-  (log/debug "[native-module] gfycat-identicon-async")
-  (.generateAliasAndIdenticonAsync ^js (status) seed callback))
-
 (defn validate-mnemonic
  "Validate that a mnemonic conforms to BIP39 dictionary/checksum standards"
  [mnemonic callback]
@@ -2,7 +2,7 @@
  (:require
    [oops.core :as oops]
    [quo.components.animated-header-flatlist.style :as style]
-    [quo.core :as quo]
+    [quo.components.icon :as icon]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -73,11 +73,11 @@
      {:active-opacity 1
       :on-press       back-button-on-press
       :style          (style/button-container {:left 20 :theme theme})}
-      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
+      [icon/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [rn/touchable-opacity
      {:active-opacity 1
       :style          (style/button-container {:right 20 :theme theme})}
-      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
+      [icon/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [reanimated/blur-view
      {:blurAmount   32
       :blurType     :light
@@ -37,6 +37,6 @@
         :color icon-color}]]
      [rn/image
       {:source icon
-        :style  {:width 32 :height 32}}])))
+        :style  {:width component-size :height component-size}}])))

 (def icon-avatar (quo.theme/with-theme icon-avatar-internal))
@@ -1,68 +0,0 @@
-(ns quo.components.avatars.wallet-user-avatar
-  (:require
-    [clojure.string :as string]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(def circle-sizes
-  {:small   20
-   :medium  32
-   :large   48
-   :size-64 64
-   :x-large 80})
-
-(def font-sizes
-  {:small   :label
-   :medium  :paragraph-2
-   :large   :paragraph-1
-   :size-64 :heading-1
-   :x-large :heading-1})
-
-(def font-weights
-  {:small   :medium
-   :medium  :semi-bold
-   :large   :semi-bold
-   :size-64 :medium
-   :x-large :medium})
-
-(defn- view-internal
-  "params, first name, last name, customization-color, size
-   and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
-    :or   {f-name     "John"
-           l-name     "Doe"
-           size       :x-large
-           uppercase? true}}]
-  (let [circle-size    (size circle-sizes)
-        small?         (= size :small)
-        f-name-initial (-> f-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        l-name-initial (-> l-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        circle-color   (if customization-color
-                         (colors/resolve-color customization-color theme 20)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
-        text-color     (if customization-color
-                         (colors/resolve-color customization-color theme)
-                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
-    [rn/view
-     {:style {:width            circle-size
-              :height           circle-size
-              :border-radius    circle-size
-              :text-align       :center
-              :justify-content  :center
-              :align-items      :center
-              :background-color circle-color}}
-     [text/text
-      {:size   (size font-sizes)
-       :weight (if monospace? :monospace (size font-weights))
-       :style  {:color text-color}}
-      (if small?
-        (str f-name-initial)
-        (str f-name-initial l-name-initial))]]))
-
-(def wallet-user-avatar (quo.theme/with-theme view-internal))
@@ -0,0 +1,16 @@
+(ns quo.components.avatars.wallet-user-avatar.component-spec
+  (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+            [test-helpers.component :as h]))
+
+(h/describe "wallet user avatar"
+  (h/describe "View internal"
+    (h/test "Renders by default even with no input parameters"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {}])
+      (h/is-truthy (h/query-by-label-text :wallet-user-avatar)))
+
+    (h/test "Renders user’s initials when full name is provided"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {:full-name "Jane Smith"}])
+      (h/is-truthy (h/get-by-text "JS")))))
+
@@ -0,0 +1,27 @@
+(ns quo.components.avatars.wallet-user-avatar.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- circle-color
+  [customization-color]
+  (colors/custom-color customization-color 50 20))
+
+(defn- text-color
+  [customization-color theme]
+  (colors/theme-colors
+   (colors/custom-color customization-color 50)
+   (colors/custom-color customization-color 60)
+   theme))
+
+(defn container
+  [circle-size customization-color]
+  {:width            circle-size
+   :height           circle-size
+   :border-radius    circle-size
+   :text-align       :center
+   :justify-content  :center
+   :align-items      :center
+   :background-color (circle-color customization-color)})
+
+(defn text
+  [customization-color theme]
+  {:color (text-color customization-color theme)})
@@ -0,0 +1,57 @@
+(ns quo.components.avatars.wallet-user-avatar.view
+  (:require [quo.components.avatars.wallet-user-avatar.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.string))
+
+(def properties
+  {:size-20 {:size        20
+             :font-size   :label
+             :font-weight :medium}
+   :size-24 {:size        24
+             :font-size   :label
+             :font-weight :semi-bold}
+   :size-32 {:size        32
+             :font-size   :paragraph-2
+             :font-weight :semi-bold}
+   :size-48 {:size        48
+             :font-size   :paragraph-1
+             :font-weight :semi-bold}
+   :size-64 {:size        64
+             :font-size   :paragraph-1
+             :font-weight :medium}
+   :size-80 {:size        80
+             :font-size   :heading-1
+             :font-weight :medium}})
+
+(def smallest-possible (first (keys properties)))
+(def second-smallest-possible (second (keys properties)))
+(defn check-if-size-small
+  [size]
+  (or (= size smallest-possible)
+      (= size second-smallest-possible)))
+(def biggest-possible (last (keys properties)))
+
+(defn- view-internal
+  "Options:
+
+  :full-name - string (default: nil) - used to generate initials
+  :customization-color  - keyword (default: nil) - color of the avatar
+  :size   - keyword (default: last element of properties object) - size of the
+  avatar
+  :monospace? - boolean (default: false) - use monospace font"
+  [{:keys [full-name customization-color size theme monospace?]
+    :or   {size biggest-possible}}]
+  (let [circle-size (:size (size properties))
+        small?      (check-if-size-small size)]
+    [rn/view
+     {:style (style/container circle-size customization-color)}
+     [text/text
+      {:accessibility-label :wallet-user-avatar
+       :size                (:font-size (size properties))
+       :weight              (if monospace? :monospace (:font-weight (size properties)))
+       :style               (style/text customization-color theme)}
+      (utils.string/get-initials full-name (if small? 1 2))]]))
+
+(def wallet-user-avatar (quo.theme/with-theme view-internal))
@@ -0,0 +1,3 @@
+(ns quo.components.colors.color.constants)
+
+(def ^:const color-size 48)
@@ -1,24 +1,37 @@
 (ns quo.components.colors.color.style
  (:require
-    [quo.foundations.colors :as colors]))
+    [quo.components.colors.color.constants :as constants]
+    [quo.foundations.colors :as colors]
+    [utils.responsiveness :as responsiveness]))

-(def color-button-common
-  {:width             48
-   :height            48
-   :border-width      4
-   :border-radius     24
-   :margin-horizontal 4
-   :transform         [{:rotate "45deg"}]
-   :border-color      :transparent})
+(defn color-button-common
+  [window-width]
+  {:width         constants/color-size
+   :height        constants/color-size
+   :border-width  4
+   :border-radius 24
+   :margin-right  (-> window-width
+                      (- responsiveness/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
+                      ;identical to Figma on iPhone 11
+                      ;Pro, So we're using it's VW here.
+                      (/ 6) ;Dividing by an appropriate factor to get a reasonable value for each VW
+                            ;on other devices (This will yield 0 on iPhone 11 Pro, Which is what we
+                            ;want)
+                      (+ 8)) ;Add same margin that's on Figma for 11 Pro, This value will increase
+                             ;based on the device VW because of the division above.
+   :transform     [{:rotate "45deg"}]
+   :border-color  :transparent})

 (defn color-button
-  [color selected?]
-  (merge color-button-common
-         (when selected?
-           {:border-top-color    (colors/alpha color 0.4)
-            :border-end-color    (colors/alpha color 0.4)
-            :border-bottom-color (colors/alpha color 0.2)
-            :border-start-color  (colors/alpha color 0.2)})))
+  ([color selected?]
+   (color-button color selected? nil nil))
+  ([color selected? idx window-width]
+   (cond-> (color-button-common window-width)
+     selected?   (assoc :border-top-color    (colors/alpha color 0.4)
+                        :border-end-color    (colors/alpha color 0.4)
+                        :border-bottom-color (colors/alpha color 0.2)
+                        :border-start-color  (colors/alpha color 0.2))
+     (zero? idx) (assoc :margin-left -4))))

 (defn color-circle
  [color border?]
@@ -19,7 +19,9 @@
           selected?
           on-press
           blur?
-           theme]
+           theme
+           idx
+           window-width]
    :as   props}]
  (let [border?   (and (not blur?) (not selected?))
        hex-color (if (= :feng-shui color)
@@ -29,7 +31,7 @@
                                         theme))]

    [rn/pressable
-     {:style               (style/color-button hex-color selected?)
+     {:style               (style/color-button hex-color selected? idx window-width)
      :accessibility-label :color-picker-item
      :on-press            #(on-press color)}
     (if (and (= :feng-shui color) (not selected?))
@@ -5,10 +5,6 @@
    [test-helpers.component :as h]))

 (h/describe "color-picker"
-  (h/test "color picker rendered"
-    (h/render [color-picker/view])
-    (-> (h/expect (h/get-all-by-label-text :color-picker-item))
-        (.toHaveLength 11)))
  (h/test "clicks on a color item"
    (let [event (h/mock-fn)]
      (h/render [color-picker/view {:on-change #(event)}])
@@ -20,11 +16,6 @@
      (h/render [color-picker/view {:on-change #(reset! selected %)}])
      (h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
      (-> (h/expect @selected)
-          (.toStrictEqual :blue))))
-  (h/test "all of the values of colors-list are rendered"
-    (h/render [color-picker/view])
-    (js/Promise.all (map (fn [color]
-                           (h/is-truthy (h/get-all-by-label-text color)))
-                         color-picker/color-list))))
+          (.toStrictEqual :blue)))))


@@ -1,36 +1,67 @@
 (ns quo.components.colors.color-picker.view
  (:require
+    [quo.components.colors.color.constants :as constants]
    [quo.components.colors.color.view :as color]
+    [quo.foundations.colors :as colors]
    [react-native.core :as rn]
    [reagent.core :as reagent]))

-(def color-list
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
-
 (defn- on-change-handler
  [selected color-name on-change]
  (reset! selected color-name)
  (when on-change (on-change color-name)))

-(defn view
+(defn get-item-layout
+  [_ index]
+  #js
+   {:length constants/color-size
+    :offset (* (+ constants/color-size 8) index)
+    :index  index})
+
+(defn- view-internal
  "Options
   - `default-selected` Default selected color name.
   - `on-change` Callback called when a color is selected `(fn [color-name])`.
   - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected]}]
-  (let [selected (reagent/atom default-selected)]
-    (fn [{:keys [blur? on-change feng-shui? container-style]}]
-      [rn/scroll-view
-       {:horizontal                        true
-        :shows-horizontal-scroll-indicator false
-        :content-container-style           container-style}
-       (doall (map (fn [color]
-                     [color/view
-                      {:selected? (= color @selected)
-                       :on-press  #(on-change-handler selected % on-change)
-                       :blur?     blur?
-                       :key       color
-                       :color     color}])
-                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-                   ;; https://github.com/status-im/status-mobile/discussions/16676
-                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+  [{:keys [default-selected blur? on-change feng-shui? container-style]}]
+  (let [selected              (reagent/atom default-selected)
+        {window-width :width} (rn/get-window)
+        ref                   (atom nil)]
+    (rn/use-effect #(js/setTimeout (fn []
+                                     (.scrollToIndex ^js @ref
+                                                     #js
+                                                      {:animated     true
+                                                       :index        (.indexOf colors/account-colors
+                                                                               default-selected)
+                                                       :viewPosition 0.5}))
+                                   50))
+    [rn/flat-list
+     {:ref                               #(reset! ref %)
+      ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+      ;; https://github.com/status-im/status-mobile/discussions/16676
+      :data                              (if feng-shui?
+                                           (conj colors/account-colors :feng-shui)
+                                           colors/account-colors)
+      :render-fn                         (fn [color idx]
+                                           [color/view
+                                            {:selected?    (= color @selected)
+                                             :on-press     (fn [e]
+                                                             (.scrollToIndex ^js @ref
+                                                                             #js
+                                                                              {:animated     true
+                                                                               :index        idx
+                                                                               :viewPosition 0.5})
+                                                             (on-change-handler selected e on-change))
+                                             :blur?        blur?
+                                             :key          color
+                                             :color        color
+                                             :idx          idx
+                                             :window-width window-width}])
+      :get-item-layout                   get-item-layout
+      :horizontal                        true
+      :shows-horizontal-scroll-indicator false
+      :content-container-style           container-style}]))
+
+(defn view
+  [props]
+  [:f> view-internal props])
@@ -0,0 +1,18 @@
+(ns quo.components.community.community-stat.component-spec
+  (:require
+    [quo.core :as quo]
+    [test-helpers.component :as h]
+    utils.money))
+
+(h/describe "Community Stat Component"
+  (h/test "default render"
+    (h/render [quo/community-stat
+               {:value               "5000"
+                :icon                :i/active-members
+                :accessibility-label :community-active-members}])
+    (h/is-truthy (h/query-by-label-text :community-active-members)))
+  (h/test "renders community stat with a value"
+    (h/render [quo/community-stat
+               {:value "5000"
+                :icon  :i/members}])
+    (h/is-truthy (h/query-by-text (utils.money/format-amount "5000")))))
@@ -0,0 +1,12 @@
+(ns quo.components.community.community-stat.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction :row
+   :align-items    :center
+   :height         22})
+
+(defn text
+  [theme]
+  {:color       (colors/theme-colors colors/black colors/white theme)
+   :margin-left 2})
@@ -0,0 +1,26 @@
+(ns quo.components.community.community-stat.view
+  (:require [quo.components.community.community-stat.style :as style]
+            [quo.components.icon :as quo.icons]
+            [quo.components.markdown.text :as quo.text]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.money))
+
+(defn view-internal
+  [{:keys [value icon theme style accessibility-label]}]
+  [rn/view
+   {:style               (merge style/container style)
+    :accessibility-label accessibility-label}
+   [quo.icons/icon icon
+    {:size            16
+     :container-style {:align-items     :center
+                       :justify-content :center}
+     :resize-mode     :center
+     :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+   [quo.text/text
+    {:size   :paragraph-1
+     :weight :regular
+     :style  (style/text theme)} (utils.money/format-amount value)]])
+
+(def view (quo.theme/with-theme view-internal))
@@ -1,52 +1,30 @@
 (ns quo.components.community.community-view
  (:require
+    [quo.components.community.community-stat.view :as community-stat]
    [quo.components.community.style :as style]
-    [quo.components.icon :as icons]
    [quo.components.markdown.text :as text]
    [quo.components.tags.permission-tag :as permission]
    [quo.components.tags.tag :as tag]
    [quo.foundations.colors :as colors]
    [quo.theme :as theme]
    [react-native.core :as rn]
-    [react-native.gesture :as gesture]
-    utils.money))
-
-(defn community-stats
-  [{:keys [icon members-count icon-color accessibility-label]}]
-  [rn/view
-   {:accessibility-label accessibility-label
-    :style               (style/stats-count-container)}
-   [rn/view {:margin-right 2}
-    [icons/icon icon
-     {:container-style {:align-items     :center
-                        :justify-content :center}
-      :resize-mode     :center
-      :size            16
-      :color           icon-color}]]
-   [text/text
-    {:weight :regular
-     :size   :paragraph-2}
-    members-count]])
+    [react-native.gesture :as gesture]))

 (defn community-stats-column
-  [{:keys [type theme blur? members-count active-count]}]
-  (let [icon-color (if (and (= :dark theme) blur?)
-                     colors/white-opa-40
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
-    [rn/view
-     (if (= type :card-view)
-       (style/card-stats-container)
-       (style/list-stats-container))
-     [community-stats
-      {:accessibility-label :stats-members-count
-       :icon                :i/group
-       :members-count       (utils.money/format-amount members-count)
-       :icon-color          icon-color}]
-     [community-stats
-      {:accessibility-label :stats-active-count
-       :icon                :i/active-members
-       :members-count       (utils.money/format-amount active-count)
-       :icon-color          icon-color}]]))
+  [{:keys [type members-count active-count]}]
+  [rn/view
+   (if (= type :card-view)
+     (style/card-stats-container)
+     (style/list-stats-container))
+   [community-stat/view
+    {:accessibility-label :stats-members-count
+     :icon                :i/group
+     :value               members-count
+     :style               {:margin-right 12}}]
+   [community-stat/view
+    {:accessibility-label :stats-active-count
+     :icon                :i/active-members
+     :value               active-count}]])

 (defn community-tags
  [{:keys [tags container-style last-item-style]}]
@@ -17,12 +17,6 @@
 (def detail-container
  {:flex 1})

-(defn stats-count-container
-  []
-  {:flex-direction :row
-   :align-items    :center
-   :margin-right   16})
-
 (defn card-stats-container
  []
  {:flex-direction :row})
@@ -3,7 +3,7 @@
    [clojure.string :as string]
    [quo.components.community.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.components.tags.token-tag :as token-tag]
+    [quo.components.tags.token-tag.view :as token-tag]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [utils.i18n :as i18n]))
@@ -14,17 +14,17 @@
   {:style (style/token-row padding?)}
   (doall
    (map-indexed (fn [token-index token]
-                   (let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
+                   (let [{:keys [img-src amount sufficient? purchasable?]} token]
                     ^{:key token-index}
                     [rn/view {:style style/token-tag-spacing}
-                      [token-tag/token-tag
-                       {:symbol      (:symbol token)
-                        :value       amount
-                        :size        24
-                        :sufficient? sufficient?
-                        :purchasable purchasable?
-                        :loading?    loading?
-                        :img-src     img-src}]]))
+                      [token-tag/view
+                       {:token-symbol  (:symbol token)
+                        :token-value   amount
+                        :size          :size-24
+                        :options       (cond
+                                         sufficient?  :hold
+                                         purchasable? :add)
+                        :token-img-src img-src}]]))
                 tokens))])

 (defn- internal-view
@@ -18,6 +18,19 @@
      (h/render [bottom-actions/view
                 {:actions          :2-actions
                  :button-one-label button-one
+                  :button-one-props {:icon-left :i/arrow-left}
                  :button-two-label button-two}])
      (h/is-truthy (h/get-by-text button-one))
-      (h/is-truthy (h/get-by-text button-two)))))
+      (h/is-truthy (h/get-by-label-text :icon))
+      (h/is-truthy (h/get-by-text button-two))))
+
+  (h/test "render disabled button"
+    (h/render [bottom-actions/view
+               {:description      "Sample description"
+                :button-one-props {:disabled? true}
+                :button-one-label "button"}])
+    (h/is-disabled (h/get-by-label-text :button-one)))
+
+  (h/test "sane defaults"
+    (h/render [bottom-actions/view {}])
+    (h/is-truthy (h/get-by-label-text :button-one))))
@@ -7,8 +7,9 @@
    [react-native.core :as rn]))

 (def default-props
-  {:button-one-type :primary
-   :button-two-type :grey})
+  {:button-one-type     :primary
+   :button-two-type     :grey
+   :customization-color :blue})

 (defn- view-internal
  "Options:
@@ -17,32 +18,36 @@
  :description - string (default nil) - Description to display below the title
  :button-one-label - string (default nil) - Label for the first button
  :button-two-label - string (default nil) - Label for the second button
-  :button-one-press - fn (default nil) - Function to call when the first button is pressed
-  :button-two-press - fn (default nil) - Function to call when the second button is pressed
+  :button-one-props - map with props for button one
+  :button-two-props - map with props for button two
  :theme - :light/:dark
-  :scroll - bool (default false) - Whether the iOS Home Indicator should be rendered
-  :button-one-type - same as button/button :type
-  :button-two-type - same as button/button :type"
+  :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
  [props]
  (let [{:keys [actions description button-one-label button-two-label
-                button-one-press button-two-press theme
-                scroll? button-one-type button-two-type]}
+                button-one-props button-two-props theme scroll? customization-color container-style]}
        (merge default-props props)]
-    [:<>
+    [rn/view {:style container-style}
     [rn/view {:style style/buttons-container}
      (when (= actions :2-actions)
        [button/button
-         {:size            40
-          :background      (when scroll? :blur)
-          :container-style style/button-container-2-actions
-          :type            button-two-type
-          :on-press        button-two-press} button-two-label])
+         (merge
+          {:size                40
+           :background          (when scroll? :blur)
+           :container-style     style/button-container-2-actions
+           :theme               theme
+           :accessibility-label :button-two}
+          button-two-props)
+         button-two-label])
      [button/button
-       {:size            40
-        :container-style style/button-container
-        :type            button-one-type
-        :background      (when scroll? :blur)
-        :on-press        button-one-press} button-one-label]]
+       (merge
+        {:size                40
+         :container-style     style/button-container
+         :background          (when scroll? :blur)
+         :theme               theme
+         :accessibility-label :button-one
+         :customization-color customization-color}
+        button-one-props)
+       button-one-label]]
     (when description
       [text/text
        {:size  :paragraph-2
@@ -57,7 +57,7 @@
               {:title                "Title"
                :type                 :account
                :account-avatar-emoji "🍿"
-                :networks             [{:name :ethereum :short :eth}]
+                :networks             [{:name :ethereum :short-name "eth"}]
                :description          "0x62b...0a5"
                :customization-color  :purple}])
    (h/is-truthy (h/get-by-text "Title"))
@@ -8,6 +8,7 @@
    [quo.components.icon :as icons]
    [quo.components.markdown.text :as text]
    [quo.components.tags.context-tag.view :as context-tag]
+    [quo.components.wallet.address-text.view :as address-text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -32,14 +33,6 @@
                       :profile-picture   profile-picture}]
    nil))

-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  (style/network-text-color (:name network))}
-   (str (name (:short network)) ":")])
-
 (defn- keypair-subtitle
  [{:keys [theme blur? keycard?]}]
  [rn/view {:style style/row}
@@ -59,15 +52,16 @@

 (defn- account-subtitle
  [{:keys [networks theme blur? description]}]
-  [rn/view {:style style/row}
-   (for [network networks]
-     ^{:key (str network)}
-     [network-view network])
-   [text/text
-    {:size   :paragraph-2
-     :weight :regular
-     :style  (style/description theme blur?)}
-    description]])
+  (if networks
+    [address-text/view
+     {:networks networks
+      :address  description
+      :format   :short}]
+    [text/text
+     {:size   :paragraph-2
+      :weight :regular
+      :style  (style/description theme blur?)}
+     description]))

 (defn- default-keypair-subtitle
  [{:keys [description theme blur?]}]
@@ -65,22 +65,23 @@
                 ens-regex address-regex
                 valid-ens-or-address?]}]
      (let [on-change              (fn [text]
-                                     (let [ens?     (when ens-regex
-                                                      (boolean (re-matches ens-regex text)))
-                                           address? (when address-regex
-                                                      (boolean (re-matches address-regex text)))]
-                                       (if (> (count text) 0)
-                                         (reset! status :typing)
-                                         (reset! status :active))
-                                       (reset! value text)
-                                       (when on-change-text
-                                         (on-change-text text))
-                                       (when (and ens? on-detect-ens)
-                                         (reset! status :loading)
-                                         (on-detect-ens text))
-                                       (when (and address? on-detect-address)
-                                         (reset! status :loading)
-                                         (on-detect-address text))))
+                                     (when (not= @value text)
+                                       (let [ens?     (when ens-regex
+                                                        (boolean (re-matches ens-regex text)))
+                                             address? (when address-regex
+                                                        (boolean (re-matches address-regex text)))]
+                                         (if (> (count text) 0)
+                                           (reset! status :typing)
+                                           (reset! status :active))
+                                         (reset! value text)
+                                         (when on-change-text
+                                           (on-change-text text))
+                                         (when (and ens? on-detect-ens)
+                                           (reset! status :loading)
+                                           (on-detect-ens text))
+                                         (when (and address? on-detect-address)
+                                           (reset! status :loading)
+                                           (on-detect-address text)))))
            on-paste               (fn []
                                     (clipboard/get-string
                                      (fn [clipboard]
@@ -90,6 +91,8 @@
            on-clear               (fn []
                                     (reset! value "")
                                     (reset! status (if @focused? :active :default))
+                                     (when on-change-text
+                                       (on-change-text ""))
                                     (when on-clear
                                       (on-clear)))
            on-scan                #(when on-scan
@@ -119,6 +122,7 @@
           :auto-complete          (when platform/ios? :none)
           :auto-capitalize        :none
           :auto-correct           false
+           :spell-check            false
           :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
           :on-focus               on-focus
           :on-blur                on-blur
@@ -150,7 +150,7 @@
              :auto-complete       :password
              :secure-text-entry   (not @password-shown?)
              :right-icon          {:style-fn  style/password-icon
-                                    :icon-name (if @password-shown? :i/hide :i/reveal)
+                                    :icon-name (if @password-shown? :i/hide-password :i/reveal)
                                    :on-press  #(swap! password-shown? not)})])))

 (defn input-internal
@@ -23,6 +23,8 @@
           return-key-type
           size
           theme
+           on-focus
+           on-blur
           container-style]
    :or   {max-length    0
           auto-focus    false
@@ -48,8 +50,14 @@
          :accessibility-label :profile-title-input
          :keyboard-appearance (quo.theme/theme-value :light :dark theme)
          :return-key-type return-key-type
-          :on-focus #(swap! focused? (constantly true))
-          :on-blur #(swap! focused? (constantly false))
+          :on-focus (fn []
+                      (when (fn? on-focus)
+                        (on-focus))
+                      (reset! focused? true))
+          :on-blur (fn []
+                     (when (fn? on-blur)
+                       (on-blur))
+                     (reset! focused? false))
          :auto-focus auto-focus
          :input-mode :text
          :on-change-text on-change
@@ -4,19 +4,12 @@
    [quo.components.icon :as icon]
    [quo.components.list-items.account.style :as style]
    [quo.components.markdown.text :as text]
+    [quo.components.wallet.address-text.view :as address-text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [reagent.core :as reagent]))

-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  {:color (colors/custom-color (:name network))}}
-   (str (name (:short network)) ":")])
-
 (defn- account-view
  [{:keys [account-props title-icon? blur? theme]
    :or   {title-icon? false}}]
@@ -38,15 +31,10 @@
          :color (if blur?
                   colors/white-opa-40
                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
-    [text/text {:size :paragraph-2}
-     (for [network (:networks account-props)]
-       ^{:key (str network)}
-       [network-view network])
-     [text/text
-      {:size   :paragraph-2
-       :weight :monospace
-       :style  (style/account-address blur? theme)}
-      (:address account-props)]]]])
+    [address-text/view
+     {:networks (:networks account-props)
+      :address  (:address account-props)
+      :format   :short}]]])

 (defn- balance-view
  [{:keys [balance-props type theme]}]
@@ -4,6 +4,7 @@
    [quo.components.icon :as icon]
    [quo.components.list-items.account-list-card.style :as style]
    [quo.components.markdown.text :as text]
+    [quo.components.wallet.address-text.view :as address-text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -26,20 +27,10 @@
          {:weight :semi-bold
           :size   :paragraph-2}
          (:name account-props)]
-         [text/text {:size :paragraph-2}
-          (map (fn [network]
-                 ^{:key (str network)}
-                 [text/text
-                  {:size  :paragraph-2
-                   :style {:color (colors/resolve-color network theme)}}
-                  (str (subs (name network) 0 3) ":")])
-               networks)
-          [text/text
-           {:size  :paragraph-2
-            :style {:color (if blur?
-                             colors/white-opa-40
-                             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
-           (:address account-props)]]]]
+         [address-text/view
+          {:networks networks
+           :address  (:address account-props)
+           :format   :short}]]]
       (when (= action :icon)
         [rn/pressable {:on-press on-options-press}
          [icon/icon :i/options
@@ -31,4 +31,5 @@
   :align-items    :center})

 (def account-container
-  {:margin-left 8})
+  {:margin-left   8
+   :padding-right 56})
@@ -1,13 +1,13 @@
 (ns quo.components.list-items.address.view
  (:require
-    [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
    [quo.components.list-items.address.style :as style]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [reagent.core :as reagent]
+    [utils.address :as address]))

 (defn- left-container
  [{:keys [theme address networks blur?]}]
@@ -25,7 +25,8 @@
            [text/text
             {:size   :paragraph-1
              :weight :semi-bold
-              :style  {:color (colors/resolve-color network)}} (str (subs (name network) 0 3) ":")])
+              :style  {:color (colors/resolve-color network theme)}}
+             (str (subs (name network) 0 3) ":")])
          networks)
     [text/text
      {:size   :paragraph-1
@@ -33,7 +34,7 @@
       :style  {:color (if blur?
                         colors/white
                         (colors/theme-colors colors/neutral-100 colors/white theme))}}
-      (string/replace address "x" "×")]]]])
+      (address/get-shortened-key address)]]]])

 (defn- internal-view
  []
@@ -60,6 +61,7 @@
         [left-container
          {:theme    theme
           :networks networks
-           :address  address}]]))))
+           :address  address
+           :blur?    blur?}]]))))

 (def view (quo.theme/with-theme internal-view))
@@ -148,8 +148,6 @@
        (when (and members (= type :discover))
          [community-view/community-stats-column
           {:type          :list-view
-            :theme         theme
-            :blur?         blur?
            :members-count (:members-count members)
            :active-count  (:active-count members)}])]
       [info-component
@@ -64,11 +64,11 @@
 (defn- view-internal
  "[preview-list opts items]
   opts
-   {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
-    :number        number of items in the list (optional)
-    :blur?         overflow-label blur?}
-   items           preview list items (only 4 items is required for preview)
+   {:type   :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
+    :size   :size-32 | :size-24 | :size-20 | :size-16 | :size-14
+    :number number of items in the list (optional)
+    :blur?  overflow-label blur?}
+   items    preview list items (only 4 items is required for preview)
  "
  [{:keys [type size number blur?]} items]
  (let [size-key    (if (contains? properties/sizes size) size :size-24)
@@ -13,7 +13,7 @@
    (h/render [saved-address/view])
    (h/fire-event :on-press-in (h/get-by-label-text :container))
    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 5)})))
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))

  (h/test "on-press-in changes state to :pressed with blur? enabled"
    (h/render [saved-address/view {:blur? true}])
@@ -22,24 +22,25 @@
                              {:backgroundColor colors/white-opa-5})))

  (h/test "on-press-out changes state to :active"
-    (h/render [saved-address/view])
+    (h/render [saved-address/view {:active-state? true}])
    (h/fire-event :on-press-in (h/get-by-label-text :container))
    (h/fire-event :on-press-out (h/get-by-label-text :container))
    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 10)})))
+                              {:backgroundColor (colors/resolve-color :blue :light 10)})))

  (h/test "on-press-out changes state to :active with blur? enabled"
-    (h/render [saved-address/view {:blur? true}])
+    (h/render [saved-address/view
+               {:blur?         true
+                :active-state? true}])
    (h/fire-event :on-press-in (h/get-by-label-text :container))
    (h/fire-event :on-press-out (h/get-by-label-text :container))
    (h/wait-for #(h/has-style (h/query-by-label-text :container)
                              {:backgroundColor colors/white-opa-10})))

-  (h/test "on-press-out calls on-press"
+  (h/test "on-press container calls on-press"
    (let [on-press (h/mock-fn)]
      (h/render [saved-address/view {:on-press on-press}])
-      (h/fire-event :on-press-in (h/get-by-label-text :container))
-      (h/fire-event :on-press-out (h/get-by-label-text :container))
+      (h/fire-event :on-press (h/get-by-label-text :container))
      (h/was-called on-press)))

  (h/test "renders options button if type :action"
@@ -1,26 +1,27 @@
 (ns quo.components.list-items.saved-address.view
  (:require
    [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
    [quo.components.icon :as icon]
    [quo.components.list-items.saved-address.style :as style]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [reagent.core :as reagent]
+    [utils.address :as address]))

 (defn- left-container
-  [{:keys [blur? theme name address customization-color]}]
+  [{:keys [blur? theme name ens address customization-color]}]
  (let [names      (remove string/blank? (string/split name " "))
        first-name (if (> (count names) 0) (first names) "")
        last-name  (if (> (count names) 1) (last names) "")]
    [rn/view {:style style/left-container}
     [wallet-user-avatar/wallet-user-avatar
-      {:size   :medium
-       :f-name first-name
-       :l-name last-name
-       :color  customization-color}]
+      {:size                :medium
+       :f-name              first-name
+       :l-name              last-name
+       :customization-color customization-color}]
     [rn/view {:style style/account-container}
      [text/text
       {:weight :semi-bold
@@ -32,7 +33,7 @@
        {:size   :paragraph-2
         :weight :monospace
         :style  (style/account-address blur? theme)}
-        address]]]]))
+        (or ens (address/get-shortened-key address))]]]]))

 (defn- internal-view
  []
@@ -42,39 +43,39 @@
        on-press-in (fn []
                      (when-not (= @state :selected)
                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [blur? user-props customization-color
+    (fn [{:keys [blur? user-props active-state? customization-color
                 on-press
                 on-options-press
                 theme]
          :or   {customization-color :blue
                 blur?               false}}]
      (let [on-press-out (fn []
-                           (let [new-state (if @active? :default :active)]
+                           (let [new-state (if (or (not active-state?) @active?) :default :active)]
                             (when @timer (js/clearTimeout @timer))
                             (reset! timer nil)
                             (reset! active? (= new-state :active))
-                             (reset! state new-state)
-                             (when on-press
-                               (on-press))))]
+                             (reset! state new-state)))]
        [rn/pressable
         {:style               (style/container
                                {:state @state :blur? blur? :customization-color customization-color})
          :on-press-in         on-press-in
          :on-press-out        on-press-out
+          :on-press            on-press
          :accessibility-label :container}
         [left-container
          {:blur?               blur?
           :theme               theme
           :name                (:name user-props)
+           :ens                 (:ens user-props)
           :address             (:address user-props)
-           :customization-color (:customization-color user-props)}]
-         [rn/pressable
-          {:accessibility-label :options-button
-           :on-press            #(when on-options-press
-                                   (on-options-press))}
-          [icon/icon :i/options
-           {:color (if blur?
-                     colors/white-opa-70
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]]]))))
+           :customization-color (or (:customization-color user-props) :blue)}]
+         (when on-options-press
+           [rn/pressable
+            {:accessibility-label :options-button
+             :on-press            on-options-press}
+            [icon/icon :i/options
+             {:color (if blur?
+                       colors/white-opa-70
+                       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))))

 (def view (quo.theme/with-theme internal-view))
@@ -9,6 +9,7 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [reagent.core :as reagent]
+    [utils.address :as address]
    [utils.i18n :as i18n]))

 (defn- account
@@ -30,7 +31,7 @@
    {:size   :paragraph-2
     :weight :monospace
     :style  (style/account-address theme)}
-    address]])
+    (address/get-shortened-key address)]])

 (defn- internal-view
  []
@@ -0,0 +1,47 @@
+(ns quo.components.list-items.token-network.component-spec
+  (:require [quo.components.list-items.token-network.view :as token-network]
+            [quo.foundations.colors :as colors]
+            [quo.foundations.resources :as resources]
+            [test-helpers.component :as h]))
+
+(def props
+  {:token       (resources/get-token :snt)
+   :state       :default
+   :label       "Status"
+   :networks    [(resources/get-network :ethereum)]
+   :token-value "100.00 SNT"
+   :fiat-value  "€0.00"})
+
+(h/describe "List items: Token network"
+  (h/test "default state"
+    (h/render [token-network/view (dissoc props :state)])
+    (h/is-truthy (h/get-by-text "Status")))
+
+  (h/test "default state explicit"
+    (h/render [token-network/view props])
+    (h/is-truthy (h/get-by-text "Status")))
+
+  (h/test "Pressed state"
+    (h/render [token-network/view props])
+    (h/fire-event :on-press-in (h/get-by-label-text :token-network))
+    (h/wait-for #(h/has-style (h/query-by-label-text :token-network)
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
+
+  (h/test "Active state"
+    (h/render [token-network/view (assoc props :state :active)])
+    (h/has-style (h/query-by-label-text :token-network)
+                 {:backgroundColor (colors/resolve-color :blue :light 10)}))
+
+  (h/test "Selected state"
+    (h/render [token-network/view (assoc props :state :selected)])
+    (h/is-truthy (h/query-by-label-text :check-icon)))
+
+  (h/test "Call on-press"
+    (let [on-press (h/mock-fn)]
+      (h/render [token-network/view (assoc props :on-press on-press)])
+      (h/fire-event :on-press (h/get-by-label-text :token-network))
+      (h/was-called on-press)))
+
+  (h/test "Empty props"
+    (h/render [token-network/view {}])
+    (h/is-truthy (h/get-by-label-text :token-network))))
@@ -0,0 +1,47 @@
+(ns quo.components.list-items.token-network.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- background-color
+  [state customization-color theme]
+  (cond
+    (= state :pressed)  (colors/resolve-color customization-color theme 5)
+    (= state :active)   (colors/resolve-color customization-color theme 10)
+    (= state :selected) (colors/resolve-color customization-color theme 5)
+    :else               :transparent))
+
+(defn container
+  [state customization-color theme]
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-radius      12
+   :height             56
+   :background-color   (background-color state customization-color theme)})
+
+(defn check-color
+  [customization-color theme]
+  (colors/resolve-color customization-color theme))
+
+(def info
+  {:flex-direction :row
+   :align-items    :center})
+
+(def token-info
+  {:height 40})
+
+(def token-image
+  {:width         32
+   :height        32
+   :border-width  1
+   :border-radius 16
+   :border-color  colors/neutral-80-opa-5
+   :margin-right  8})
+
+(def values-container
+  {:align-items :flex-end})
+
+(defn fiat-value
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
@@ -0,0 +1,62 @@
+(ns quo.components.list-items.token-network.view
+  (:require
+    [quo.components.icon :as icon]
+    [quo.components.list-items.preview-list.view :as preview-list]
+    [quo.components.list-items.token-network.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
+
+(defn- info
+  [{:keys [token label networks]}]
+  [rn/view {:style style/info}
+   [rn/image
+    {:source (or (:source token) token)
+     :style  style/token-image}]
+   [rn/view {:style style/token-info}
+    [text/text {:weight :semi-bold} label]
+    [preview-list/view
+     {:type   :network
+      :size   :size-14
+      :number 3}
+     networks]]])
+
+(defn- values
+  [{:keys [state token-value fiat-value customization-color theme]}]
+  (if (= state :selected)
+    [icon/icon :i/check
+     {:color               (style/check-color customization-color theme)
+      :accessibility-label :check-icon}]
+    [rn/view {:style style/values-container}
+     [text/text
+      {:weight :medium
+       :size   :paragraph-2}
+      token-value]
+     [text/text
+      {:style (style/fiat-value theme)
+       :size  :paragraph-2}
+      fiat-value]]))
+
+(defn- view-internal
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [on-press state customization-color
+                 _token _networks _token-value _fiat-value theme]
+          :as   props
+          :or   {customization-color :blue}}]
+      (let [internal-state (if @pressed?
+                             :pressed
+                             state)]
+        [rn/pressable
+         {:style               (style/container internal-state customization-color theme)
+          :on-press-in         on-press-in
+          :on-press-out        on-press-out
+          :on-press            on-press
+          :accessibility-label :token-network}
+         [info props]
+         [values props]]))))
+
+(def view (quo.theme/with-theme view-internal))
@@ -14,7 +14,7 @@
 (defn- internal-view
  []
  (let [state (reagent/atom :default)]
-    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
+    (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press]}]
      (let [bg-opacity                                                      (case @state
                                                                              :active  10
                                                                              :pressed 5
@@ -28,6 +28,7 @@
                                 (reset! state :active)
                                 (js/setTimeout #(reset! state :default) 300)
                                 on-press)
+          :on-long-press       on-long-press
          :accessibility-label :container}
         [rn/view
          {:style {:flex-direction :row
@@ -27,8 +27,9 @@
      {:size  20
       :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
     :checkbox
-     [selectors/checkbox
-      {:checked?            checked?
+     [selectors/view
+      {:type                :checkbox
+       :checked?            checked?
       :accessibility-label :user-list-toggle-check
       :disabled?           disabled?
       :on-change           (when on-check on-check)}]
@@ -5,23 +5,22 @@
 (def container
  {:flex-wrap      :nowrap
   :flex-direction :row
-   :align-items    :center})
+   :align-items    :flex-end})

-(defn middle-dot-nickname
+(def name-container
+  {:margin-right   8
+   :flex-direction :row
+   :align-items    :flex-end
+  })
+
+(defn middle-dot
  [theme]
  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :margin-horizontal 4})
+   :margin-horizontal 2})

 (defn chat-key-text
  [theme]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :margin-left 8
-   :padding-top 1})
-
-(defn middle-dot-chat-key
-  [theme]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :margin-left 4})
+  {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})

 (defn primary-name
  [muted? theme]
@@ -34,14 +33,13 @@
  [theme]
  {:padding-top 1
   :flex-shrink 999999
-   :min-width   40
   :color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

-(def icon-container
-  {:margin-left 4})
+(defn icon-container
+  [is-first?]
+  {:margin-left   (if is-first? 4 2)
+   :margin-bottom 2})

 (defn time-text
  [theme]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :padding-top 1
-   :margin-left 8})
+  {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
@@ -14,46 +14,48 @@
           muted? size theme]
    :or   {size 13}}]
  [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
-   [text/text
-    {:weight              :semi-bold
-     :size                (if (= size 15) :paragraph-1 :paragraph-2)
-     :number-of-lines     1
-     :accessibility-label :author-primary-name
-     :style               (style/primary-name muted? theme)}
-    primary-name]
-   (when (not (string/blank? secondary-name))
-     [:<>
-      [text/text
-       {:size            :label
-        :number-of-lines 1
-        :style           (style/middle-dot-nickname theme)}
-       middle-dot]
-      [text/text
-       {:weight              :medium
-        :size                :label
-        :number-of-lines     1
-        :accessibility-label :author-secondary-name
-        :style               (style/secondary-name theme)}
-       secondary-name]])
-   (when contact?
-     [icons/icon :main-icons2/contact
-      {:size            12
-       :no-color        true
-       :container-style style/icon-container}])
-   (cond
-     verified?
-     [icons/icon :main-icons2/verified
-      {:size            12
-       :no-color        true
-       :container-style style/icon-container}]
-     untrustworthy?
-     [icons/icon :main-icons2/untrustworthy
-      {:size            12
-       :no-color        true
-       :container-style style/icon-container}])
+   [rn/view {:style style/name-container}
+    [text/text
+     {:weight              :semi-bold
+      :size                (if (= size 15) :paragraph-1 :paragraph-2)
+      :number-of-lines     1
+      :accessibility-label :author-primary-name
+      :style               (style/primary-name muted? theme)}
+     primary-name]
+    (when (not (string/blank? secondary-name))
+      [:<>
+       [text/text
+        {:size            :label
+         :number-of-lines 1
+         :style           (style/middle-dot theme)}
+        middle-dot]
+       [text/text
+        {:weight              :medium
+         :size                :label
+         :number-of-lines     1
+         :accessibility-label :author-secondary-name
+         :style               (style/secondary-name theme)}
+        secondary-name]])
+    (when contact?
+      [icons/icon :main-icons2/contact
+       {:size            12
+        :no-color        true
+        :container-style (style/icon-container true)}])
+    (cond
+      verified?
+      [icons/icon :main-icons2/verified
+       {:size            12
+        :no-color        true
+        :container-style (style/icon-container contact?)}]
+      untrustworthy?
+      [icons/icon :main-icons2/untrustworthy
+       {:size            12
+        :no-color        true
+        :container-style (style/icon-container contact?)}])
+   ]
   (when (and (not verified?) short-chat-key)
     [text/text
-      {:monospace       true
+      {:weight          :monospace
       :size            :label
       :number-of-lines 1
       :style           (style/chat-key-text theme)}
@@ -63,7 +65,7 @@
      {:monospace       true
       :size            :label
       :number-of-lines 1
-       :style           (style/middle-dot-chat-key theme)}
+       :style           (style/middle-dot theme)}
      middle-dot])
   (when time-str
     [text/text
@@ -95,25 +95,12 @@
           notification-count
           activity-center-on-press
           scan-on-press
-           qr-code-on-press
-           for-qa-only-cellular-network
-           for-qa-only-no-network
-           for-qa-only-network-type]
+           qr-code-on-press]
    :as   props}]
  (let [button-common-props (get-button-common-props {:theme    theme
                                                      :jump-to? jump-to?
                                                      :blur?    blur?})]
    [rn/view {:style style/right-section}
-     (when (= for-qa-only-network-type "cellular")
-       [button/button
-        (merge (dissoc button-common-props :icon-only?)
-               for-qa-only-cellular-network)
-        "🦄"])
-     (when (= for-qa-only-network-type "none")
-       [button/button
-        (merge (dissoc button-common-props :icon-only?)
-               for-qa-only-no-network)
-        "💀"])
     [button/button
      (assoc button-common-props :accessibility-label :open-scanner-button :on-press scan-on-press)
      :i/scan]
@@ -160,8 +147,5 @@
   :qr-code-on-press callback
   :notification-count number
   :max-unread-notifications used to specify max number for counter
-   :for-qa-only-cellular-network used for testing purposed
-   :for-qa-only-no-network used for testing purposed
-   :for-qa-only-network-type used for testing purposed
   "
  (quo.theme/with-theme view-internal))
@@ -2,11 +2,6 @@
  (:require
    [quo.foundations.colors :as colors]))

-(def height 56)
-
-(def root-container
-  {:height height})
-
 (defn container
  [state theme]
  {:padding-top      12
@@ -25,7 +25,7 @@
 (defn- view-internal
  [{:keys [theme container-style default-active state data on-press active-id]}]
  [rn/view
-   {:style               (merge style/root-container container-style)
+   {:style               container-style
    :accessibility-label :showcase-nav}
   [rn/flat-list
    {:data                              data
@@ -11,8 +11,9 @@
   {:on-press            on-change
    :accessibility-label :disclaimer-touchable-opacity}
   [rn/view {:style (merge container-style (style/container blur?))}
-    [selectors/checkbox
-     {:accessibility-label accessibility-label
+    [selectors/view
+     {:type                :checkbox
+      :accessibility-label accessibility-label
      :blur?               blur?
      :checked?            checked?
      :on-change           on-change}]
@@ -6,27 +6,27 @@

 (defn render-toggle
  ([]
-   (render-toggle {}))
+   (render-toggle {:type :toggle}))
  ([opts]
-   (h/render (reagent/as-element [selectors/toggle opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :toggle)]))))

 (defn render-checkbox
  ([]
-   (render-checkbox {}))
+   (render-checkbox {:type :checkbox}))
  ([opts]
-   (h/render (reagent/as-element [selectors/checkbox opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :checkbox)]))))

-(defn render-checkbox-prefill
+(defn render-filled-checkbox
  ([]
-   (render-checkbox-prefill {}))
+   (render-filled-checkbox {:type :filled-checkbox}))
  ([opts]
-   (h/render (reagent/as-element [selectors/checkbox-prefill opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :filled-checkbox)]))))

 (defn render-radio
  ([]
-   (render-radio {}))
+   (render-radio {:type :radio}))
  ([opts]
-   (h/render (reagent/as-element [selectors/radio opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :radio)]))))

 (h/test "default render of toggle component"
  (render-toggle)
@@ -58,12 +58,12 @@
    (h/fire-event :press (h/get-by-test-id "checkbox-component"))
    (h/was-called mock-fn)))

-(h/test "default render of checkbox-prefill component"
-  (render-checkbox-prefill)
-  (h/is-truthy (h/get-by-test-id "checkbox-prefill-component")))
+(h/test "default render of filled-checkbox component"
+  (render-filled-checkbox)
+  (h/is-truthy (h/get-by-test-id "filled-checkbox-component")))

-(h/test "checkbox-prefill component on change is working"
+(h/test "filled-checkbox component on change is working"
  (let [mock-fn (h/mock-fn)]
-    (render-checkbox-prefill {:on-change mock-fn})
-    (h/fire-event :press (h/get-by-test-id "checkbox-prefill-component"))
+    (render-filled-checkbox {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "filled-checkbox-component"))
    (h/was-called mock-fn)))
@@ -6,7 +6,7 @@
  [customization-color theme]
  {:normal {:checked   (colors/resolve-color customization-color theme)
            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                            colors/white-opa-70
                                            theme)
            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
@@ -15,7 +15,7 @@
  [customization-color theme]
  {:normal {:checked   (colors/resolve-color customization-color theme)
            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                            colors/white
                                            theme)
            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
@@ -29,7 +29,7 @@
  [customization-color theme]
  {:normal {:checked   (colors/resolve-color customization-color theme)
            :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                            colors/white)
            :unchecked colors/white-opa-5}})

@@ -38,7 +38,7 @@
  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)})

-(defn- checkbox-prefill-background-color
+(defn- filled-checkbox-background-color
  [theme]
  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
   :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
@@ -119,16 +119,16 @@
            (colors/theme-colors colors/white colors/neutral-100 theme)
            colors/white)})

-(defn checkbox-prefill
+(defn filled-checkbox
  [{:keys [disabled? blur? container-style theme]}]
  (assoc container-style
         :height           21
         :width            21
         :border-radius    6
         :opacity          (if disabled? 0.3 1)
-         :background-color (get-color (checkbox-prefill-background-color theme) blur?)))
+         :background-color (get-color (filled-checkbox-background-color theme) blur?)))

-(defn checkbox-prefill-check
+(defn filled-checkbox-check
  [checked? _blur? theme]
  {:size  20
   :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))})
@@ -11,7 +11,7 @@
  (when checked-atom (swap! checked-atom not))
  (when on-change (on-change (not checked?))))

-(defn- selector-internal
+(defn- base-selector
  [{:keys [default-checked? checked?]}]
  (let [controlled-component? (some? checked?)
        internal-checked?     (when-not controlled-component?
@@ -28,14 +28,13 @@
                                                 :container-style     container-style
                                                 :customization-color customization-color
                                                 :theme               theme})]
-        [rn/touchable-without-feedback
+        [rn/pressable
         (when-not disabled?
           {:on-press #(handle-press on-change internal-checked? actual-checked?)})
         [rn/view
          {:style                             outer-styles
           :needs-offscreen-alpha-compositing true
           :accessibility-label               accessibility-label
-           :accessibility-role                :checkbox
           :testID                            test-id}
          [rn/view
           {:style (inner-style-fn {:theme               theme
@@ -45,39 +44,49 @@
           (when (and icon-style-fn actual-checked?)
             [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))))

-(def ^:private selector (quo.theme/with-theme selector-internal))
-
-(defn toggle
+(defn- toggle
  [props]
-  [selector
+  [base-selector
   (assoc props
          :label-prefix   "toggle"
          :outer-style-fn style/toggle
          :inner-style-fn style/toggle-inner)])

-(defn radio
+(defn- radio
  [props]
-  [selector
+  [base-selector
   (assoc props
          :label-prefix   "radio"
          :outer-style-fn style/radio
          :inner-style-fn style/radio-inner)])

-(defn checkbox
+(defn- checkbox
  [props]
-  [selector
+  [base-selector
   (assoc props
          :label-prefix   "checkbox"
          :outer-style-fn style/checkbox
          :inner-style-fn style/common-checkbox-inner
          :icon-style-fn  style/checkbox-check)])

-(defn checkbox-prefill
+(defn- filled-checkbox
  [props]
-  [selector
+  [base-selector
   (assoc props
-          :label-prefix   "checkbox-prefill"
-          :outer-style-fn style/checkbox-prefill
+          :label-prefix   "filled-checkbox"
+          :outer-style-fn style/filled-checkbox
          :inner-style-fn style/common-checkbox-inner
-          :icon-style-fn  style/checkbox-prefill-check)])
+          :icon-style-fn  style/filled-checkbox-check)])

+(defn view-internal
+  [{:keys [type]
+    :or   {type :toggle}
+    :as   props}]
+  (case type
+    :toggle          [toggle props]
+    :radio           [radio props]
+    :checkbox        [checkbox props]
+    :filled-checkbox [filled-checkbox props]
+    nil))
+
+(def view (quo.theme/with-theme view-internal))
@@ -9,12 +9,13 @@

 (defn- category-internal
  [{:keys [label data blur? theme]}]
-  [rn/view {:style style/container}
-   [text/text
-    {:weight :medium
-     :size   :paragraph-2
-     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-    label]
+  [rn/view {:style (style/container label)}
+   (when label
+     [text/text
+      {:weight :medium
+       :size   :paragraph-2
+       :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+      label])
   [rn/flat-list
    {:data      data
     :style     (style/settings-items theme blur?)
@@ -2,11 +2,12 @@
  (:require
    [quo.foundations.colors :as colors]))

-(def container
+(defn container
+  [label]
  {:left               0
   :right              0
   :padding-horizontal 20
-   :padding-top        12
+   :padding-top        (when label 12)
   :padding-bottom     8})

 (defn settings-items
--- a/Show More
+++ b/Show More