Add a button to address watch screen;

Add account creation screen
chore: add sub to get network info (#17650 )
2023-10-27 21:14:43 +02:00 · 2023-10-27 03:54:58 -07:00 · 2023-10-27 13:14:01 +03:00 · 2023-10-27 11:16:56 +03:00 · 2023-10-27 13:17:16 +05:30 · 2023-10-26 16:07:44 -06:00
139 changed files with 2579 additions and 1336 deletions
@@ -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
+}
@@ -362,6 +362,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 +371,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
@@ -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.
@@ -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"]]}
 ```
-
-
@@ -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: 62e43ee6baafb9ba3d3af1857d7fd23a1d41bff0
  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
@@ -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
@@ -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/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",
@@ -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,25 @@
+(ns dev.component-preview.events
+  (:require
+    [quo.core :as quo]
+    [re-frame.core :as re-frame]))
+
+(def preview-screen-name :dev-component-preview)
+
+(when js/goog.DEBUG
+  (re-frame/reg-event-fx :dev/preview-component
+   (fn [{:keys [db]} [[component-tag props & args]]]
+     (let [view-id   (:view-id db)
+           ;; NOTE: re-render on every evaluation e.g. reset component state without changes
+           component (into [component-tag (assoc props :key (random-uuid))] args)
+           navigate? (not= view-id preview-screen-name)]
+       (cond-> {:db (assoc db :dev/previewed-component component)}
+         navigate? (assoc :fx [[:dispatch [:navigate-to preview-screen-name]]]))))))
+
+;; Usage example
+(comment
+  (re-frame/dispatch [:dev/preview-component
+                      [quo/slide-button
+                       {:track-icon          :face-id
+                        :track-text          ":debug-component example"
+                        :customization-color :blue
+                        :on-complete         identity}]]))
@@ -0,0 +1,16 @@
+(ns dev.component-preview.view
+  (:require
+    [react-native.core :as rn]
+    [utils.re-frame :as rf]))
+
+(def ^:private container-style
+  {:flex               1
+   :padding-horizontal 20
+   :padding-top        80
+   :align-items        :center})
+
+(defn view
+  []
+  (let [component (rf/sub [:dev/previewed-component])]
+    [rn/view {:style container-style}
+     (when component component)]))
@@ -346,7 +346,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 +411,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
@@ -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))
@@ -0,0 +1,3 @@
+(ns quo.components.colors.color.constants)
+
+(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
@@ -1,24 +1,38 @@
 (ns quo.components.colors.color.style
  (:require
+    [quo.components.colors.color.constants :as constants]
    [quo.foundations.colors :as colors]))

-(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         48
+   :height        48
+   :border-width  4
+   :border-radius 24
+   :margin-right  (-> window-width
+                      (- constants/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]
+   (merge (color-button-common window-width)
+          (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)}
+            (when (zero? idx)
+              {: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?))
@@ -17,20 +17,22 @@
   - `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]}]
+  [{:keys [default-selected window-width]}]
  (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)))])))
+       (doall (map-indexed (fn [idx color]
+                             [color/view
+                              {:selected?    (= color @selected)
+                               :on-press     #(on-change-handler selected % on-change)
+                               :blur?        blur?
+                               :key          color
+                               :color        color
+                               :idx          idx
+                               :window-width window-width}])
+                           ;; 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)))])))
@@ -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
@@ -20,4 +20,11 @@
                  :button-one-label button-one
                  :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-text button-two))))
+
+  (h/test "render disabled button"
+    (h/render [bottom-actions/view
+               {:description      "Sample description"
+                :disabled?        true
+                :button-one-label "button"}])
+    (h/is-disabled (h/get-by-label-text :button-one))))
@@ -3,10 +3,9 @@
    [quo.foundations.colors :as colors]))

 (def buttons-container
-  {:flex-direction     :row
-   :justify-content    :space-around
-   :padding-vertical   12
-   :padding-horizontal 20})
+  {:flex-direction   :row
+   :justify-content  :space-around
+   :padding-vertical 12})

 (def button-container
  {:flex 1})
@@ -7,42 +7,54 @@
    [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:

-  :actions - keyword (default nil) - :1-action/:2-actions
-  :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
-  :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"
+       :actions - keyword (default nil) - :1-action/:2-actions
+       :description - string (default nil) - Description to display below the title
+       :button-one-disabled? - bool (default false) - Whether the first button is
+       disabled
+       :button-two-disabled? - bool (default false) - Whether the second button is
+       disabled
+       :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
+       :theme - :light/:dark
+       :scroll? - bool (default false) - Whether the iOS Home Indicator should be
+       rendered
+       :customization-color - keyword (default nil) - Color for the first button
+       :button-one-type - same as button/button :type
+       :button-two-type - same as button/button :type"
  [props]
-  (let [{:keys [actions description button-one-label button-two-label
+  (let [{:keys [actions description button-one-disabled?
+                button-two-disabled? button-one-label button-two-label
                button-one-press button-two-press theme
-                scroll? button-one-type button-two-type]}
+                scroll? customization-color button-one-type button-two-type]}
        (merge default-props props)]
    [:<>
     [rn/view {:style style/buttons-container}
      (when (= actions :2-actions)
        [button/button
         {:size            40
+          :disabled?       button-two-disabled?
          :background      (when scroll? :blur)
          :container-style style/button-container-2-actions
          :type            button-two-type
          :on-press        button-two-press} 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]]
+       {:size                40
+        :disabled?           button-one-disabled?
+        :container-style     style/button-container
+        :type                button-one-type
+        :background          (when scroll? :blur)
+        :on-press            button-one-press
+        :customization-color customization-color
+        :accessibility-label :button-one} button-one-label]]
     (when description
       [text/text
        {:size  :paragraph-2
@@ -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
@@ -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
@@ -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))
@@ -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
@@ -97,7 +97,9 @@
                       {:type :outline
                        :size 24})
                (:button-text action-props)]
-     :selector [selectors/toggle action-props]
+     :selector (if (= (:type action-props) :checkbox)
+                 [selectors/checkbox action-props]
+                 [selectors/toggle action-props])
     nil)])

 (defn- internal-view
@@ -1,124 +0,0 @@
-(ns quo.components.tags.token-tag
-  (:require
-    [quo.components.icon :as icons]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
-    [react-native.core :as rn]))
-
-(def themes
-  {:light {:background-color colors/neutral-20}
-   :dark  {:background-color colors/neutral-80}})
-
-(defn get-value-from-size
-  [size big-option small-option]
-  (if (= size :big) big-option small-option))
-
-(def icon-container-styles
-  {:display         :flex
-   :align-items     :center
-   :justify-content :center
-   :position        :absolute
-   :border-radius   20
-   :margin-left     2})
-
-(defn tag-container
-  [size]
-  {:height         (get-value-from-size size 32 24)
-   :align-items    :center
-   :flex-direction :row
-   :border-radius  20})
-
-(defn tag
-  "[tag opts \"label\"]]
-   opts
-   {
-    :size :small/:big
-    :token-img-src :token-img-src
-    :token-img-style {}
-    :border-color :color
-    :overlay child-elements
-    }"
-  [_ _]
-  (fn [{:keys [size img-src img-style border-color overlay]
-        :or   {size :small}}
-       label]
-    [rn/view
-     {:style (when border-color
-               {:border-color  border-color
-                :border-radius 20
-                :border-width  1})}
-     [rn/view
-      {:style (merge (tag-container size) (get themes (theme/get-theme)))}
-      [rn/image
-       {:src   img-src
-        :style (merge
-                {:height       (get-value-from-size size 28 20)
-                 :width        (get-value-from-size size 28 20)
-                 :margin-left  2
-                 :margin-right (get-value-from-size size 8 6)}
-                img-style)}]
-      [text/text
-       {:weight :medium
-        :number-of-lines 1
-        :style
-        {:margin-right (get-value-from-size size 12 11)}
-        :size (get-value-from-size size :paragraph-2 :label)} label]
-      overlay]]))
-
-(defn loading-icon
-  []
-  [rn/view
-   {:style {:align-items     :center
-            :justify-content :center
-            :position        :absolute
-            :right           -8
-            :top             -8}}
-   [icons/icon :t/checktoken
-    {:no-color true
-     :size     20}]])
-
-(defn icon
-  [size border-color sufficient?]
-  [rn/view
-   {:style (merge
-            icon-container-styles
-            {:background-color border-color
-             :border-color     (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
-             :border-width     1
-             :right            (get-value-from-size size -3.75 -5.75)
-             :bottom           (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
-   [icons/icon (if sufficient? :i/hold :i/add)
-    {:no-color true
-     :size     12}]])
-
-(defn token-tag
-  "[token-tag opts]
-   opts
-   {
-    :symbol string
-    :value string
-    :size :small/:big
-    :token-img-src :token-img-src
-    :border-color :color
-    :sufficient? true/false
-    :purchasable? true/false
-    :loading? true/false
-    }"
-  [_ _]
-  (fn [{:keys [value size img-src border-color purchasable? sufficient? loading?]
-        :or   {size :small}
-        :as   props}]
-    (let [sym          (:symbol props)
-          sufficient?  (when-not loading? sufficient?)
-          border-color (if sufficient? colors/success-50 border-color)]
-      [tag
-       {:size size
-        :img-src img-src
-        :border-color (if sufficient? colors/success-50 border-color)
-        :overlay
-        (if loading?
-          [loading-icon]
-          (when (or purchasable? sufficient?)
-            [icon size border-color sufficient?]))}
-       (str value " " sym)])))
@@ -0,0 +1,49 @@
+(ns quo.components.tags.token-tag.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [size options blur? theme]
+  (let [hold? (= options :hold)]
+    (merge {:background-color (if blur?
+                                (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                                (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+            :flex-direction   :row
+            :align-items      :center
+            :padding-left     2
+            :border-width     (if hold? 1 0)
+            :border-radius    20
+            :border-color     (colors/theme-colors colors/success-50 colors/success-60 theme)}
+           (condp = size
+             :size-24 {:height        (if hold? 26 24)
+                       :padding-right 10
+                       :border-radius (if hold? 13 12)}
+             :size-32 {:height        (if hold? 34 32)
+                       :padding-right 12
+                       :border-radius (if hold? 17 16)}))))
+
+(defn options-icon
+  [size]
+  (assoc
+   (condp = size
+     :size-24 {:right -8
+               :top   -8}
+     :size-32 {:right -6
+               :top   -6})
+   :position
+   :absolute))
+
+(defn token-img
+  [size]
+  (condp = size
+    :size-24 {:width         20
+              :height        20
+              :margin-right  6
+              :border-radius 10}
+    :size-32 {:width         28
+              :height        28
+              :margin-right  8
+              :border-radius 14}))
+
+(defn label
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
@@ -0,0 +1,57 @@
+(ns quo.components.tags.token-tag.view
+  (:require
+    [oops.core :refer [oget]]
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.token-tag.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]
+    [reagent.core :as reagent]))
+
+(defn- view-internal
+  "Options:
+    - :options - false / :add / :hold (default false)
+    - :size - :size-24 / :size-32 (default :size-24)
+    - :blur? - boolean (default false)
+    - :theme - :light / :dark 
+    - :token-img-src - token image source
+    - :token-value - string - token value
+    - :token-symbol - string"
+  []
+  (let [container-width (reagent/atom 0)]
+    (fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
+          :or   {size :size-24}}]
+      [rn/view
+       {:on-layout #(reset! container-width
+                      (oget % :nativeEvent :layout :width))}
+       [hole-view/hole-view
+        {:holes (if options
+                  [{:x            (- @container-width
+                                     (condp = size
+                                       :size-24 10
+                                       :size-32 12))
+                    :y            (condp = size
+                                    :size-24 -6
+                                    :size-32 -4)
+                    :width        16
+                    :height       16
+                    :borderRadius 8}]
+                  [])}
+        [rn/view
+         {:style (style/container size options blur? theme)}
+         [rn/image
+          {:style  (style/token-img size)
+           :source token-img-src}]
+         [text/text
+          {:size   :paragraph-2
+           :weight :medium
+           :style  (style/label theme)}
+          (str token-value " " token-symbol)]]]
+       (when options
+         [rn/view {:style (style/options-icon size)}
+          [icons/icon (if (= options :hold) :i/hold :i/add-token)
+           {:size     20
+            :no-color true}]])])))
+
+(def view (quo.theme/with-theme view-internal))
@@ -7,7 +7,7 @@
 (def empty-username "Account 1")

 (defn get-test-data
-  [type watch-only? empty-type? loading? metrics?]
+  [{:keys [type watch-only? empty-type? loading? no-metrics?]}]
  {:name                (if empty-type? empty-username username)
   :balance             "€1,000.00"
   :percentage-value    "50%"
@@ -15,17 +15,18 @@
   :customization-color :blue
   :watch-only?         watch-only?
   :loading?            loading?
-   :metrics?            metrics?
+   :metrics?            (not no-metrics?)
   :type                type})

 (h/describe "Account_card tests"
  (h/test "Renders Default"
-    (let [data (get-test-data :default false false false true)]
+    (let [data (get-test-data {:type :default})]
      (h/render [account-card/view data])
      (h/is-truthy (h/get-by-text username))))

  (h/test "Renders Watch-Only"
-    (let [data (get-test-data :watch-only true false false true)]
+    (let [data (get-test-data {:type        :watch-only
+                               :watch-only? true})]
      (h/render [account-card/view data])
      (h/is-truthy (h/get-by-text username))))

@@ -35,10 +36,16 @@
      (h/is-truthy (h/get-by-label-text :add-account))))

  (h/test "Renders Empty"
-    (let [data (get-test-data :empty false true false true)]
+    (let [data (get-test-data {:type        :empty
+                               :empty-type? true})]
      (h/render [account-card/view data])
      (h/is-truthy (h/get-by-text empty-username))))

+  (h/test "Renders Missing Keypair"
+    (let [data (get-test-data {:type :missing-keypair})]
+      (h/render [account-card/view data])
+      (h/is-truthy (h/get-by-text username))))
+
  (h/test "Add account on press fires correctly"
    (let [on-press (h/mock-fn)
          data     {:type     :add-account
@@ -48,16 +55,20 @@
      (h/was-called on-press)))

  (h/test "Renders component without metrics"
-    (let [data (get-test-data :default false false false false)]
+    (let [data (get-test-data {:type        :default
+                               :no-metrics? true})]
      (h/render [account-card/view data])
      (h/is-falsy (h/query-by-label-text :metrics))))

  (h/test "Renders loading state"
-    (let [data (get-test-data :default false false true true)]
+    (let [data (get-test-data {:type     :default
+                               :loading? true})]
      (h/render [account-card/view data])
      (h/is-truthy (h/get-by-label-text :loading))))

  (h/test "Renders loading state without metrics"
-    (let [data (get-test-data :default false false true false)]
+    (let [data (get-test-data {:type        :default
+                               :no-metrics? true
+                               :loading?    true})]
      (h/render [account-card/view data])
      (h/is-falsy (h/query-by-label-text :metrics)))))
@@ -0,0 +1,20 @@
+(ns quo.components.wallet.account-card.properties
+  (:require [quo.foundations.colors :as colors]))
+
+(defn gradient-start-color
+  [theme customization-color]
+  (colors/theme-colors
+   (colors/resolve-color customization-color theme 0)
+   colors/neutral-95
+   theme))
+
+(defn gradient-end-color
+  [theme customization-color]
+  (colors/theme-colors
+   (colors/resolve-color customization-color theme 6)
+   colors/neutral-95
+   theme))
+
+(defn alert-icon-color
+  [theme]
+  (colors/theme-colors colors/neutral-50 colors/white theme))
@@ -3,24 +3,29 @@
    [quo.foundations.colors :as colors]))

 (defn text-color
-  [watch-only? theme]
-  (if (and watch-only? (= :light theme))
+  [type theme]
+  (if (and (or (= :missing-keypair type)
+               (= :watch-only type))
+           (= :light theme))
    colors/neutral-100
    colors/white))

 (defn card
-  [{:keys [customization-color watch-only? metrics? theme pressed?]}]
+  [{:keys [customization-color type theme pressed?]}]
  {:width              162
-   :height             (if metrics? 88 68)
-   :background-color   (if watch-only?
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/neutral-95 theme)
+   :background-color   (when (not= :watch-only type)
                         (colors/theme-colors
-                          (colors/custom-color customization-color 50)
-                          (colors/custom-color customization-color 60)
+                          (colors/resolve-color customization-color
+                                                theme
+                                                (when (= :missing-keypair type) (if pressed? 20 10)))
+                          (colors/resolve-color customization-color
+                                                theme
+                                                (when (= :missing-keypair type) (if pressed? 30 20)))
                          theme))
   :border-radius      16
   :border-width       1
-   :border-color       (if watch-only?
+   :border-color       (if (or (= :missing-keypair type)
+                               (= :watch-only type))
                         (colors/theme-colors
                          (if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
                          (if pressed? colors/white-opa-10 colors/white-opa-5)
@@ -28,10 +33,10 @@
                         colors/neutral-80-opa-10)
   :padding-horizontal 12
   :padding-top        6
-   :padding-bottom     10})
+   :padding-bottom     9})

 (def profile-container
-  {:margin-bottom  6
+  {:margin-bottom  8
   :flex-direction :row})

 (def metrics-container
@@ -39,8 +44,8 @@
   :align-items    :center})

 (defn account-name
-  [watch-only? theme]
-  {:color       (text-color watch-only? theme)
+  [type theme]
+  {:color       (text-color type theme)
   :margin-left 2})

 (def watch-only-container
@@ -50,21 +55,25 @@
   :flex            1})

 (defn account-value
-  [watch-only? theme]
-  {:color (text-color watch-only? theme)})
+  [type theme]
+  {:color (text-color type theme)})

 (defn metrics
-  [watch-only? theme]
-  {:color (if (and watch-only? (= :light theme))
+  [type theme]
+  {:color (if (and (or (= :missing-keypair type)
+                       (= :watch-only type))
+                   (= :light theme))
            colors/neutral-80-opa-60
            colors/white-opa-70)})

 (defn separator
-  [watch-only? theme]
+  [type theme]
  {:width             2
   :height            2
   :border-radius     20
-   :background-color  (if (and watch-only? (= :light theme))
+   :background-color  (if (and (or (= :missing-keypair type)
+                                   (= :watch-only type))
+                               (= :light theme))
                        colors/neutral-80-opa-20
                        colors/white-opa-40)
   :margin-horizontal 4})
@@ -102,3 +111,12 @@

 (def metrics-icon-container
  {:margin-left 4})
+
+(def gradient-view
+  {:position      :absolute
+   :bottom        0
+   :top           0
+   :left          0
+   :right         0
+   :border-radius 16
+   :z-index       -1})
@@ -3,11 +3,13 @@
    [quo.components.buttons.button.view :as button]
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
+    [quo.components.wallet.account-card.properties :as properties]
    [quo.components.wallet.account-card.style :as style]
    [quo.foundations.colors :as colors]
    [quo.foundations.customization-colors :as customization-colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
+    [react-native.linear-gradient :as linear-gradient]
    [reagent.core :as reagent]))

 (defn- loading-view
@@ -17,8 +19,7 @@
    [rn/view
     {:accessibility-label :loading
      :style               (style/card {:customization-color customization-color
-                                        :watch-only?         watch-only?
-                                        :metrics?            metrics?
+                                        :type                type
                                        :theme               theme
                                        :pressed?            false})}
     [rn/view {:style style/loader-container}
@@ -54,31 +55,43 @@
                                     10)}])]))

 (defn- metrics-percentage
-  [watch-only? theme account-percentage]
+  [type theme account-percentage]
  [text/text
-   {:weight              :semi-bold
+   {:weight              :medium
    :size                :paragraph-2
    :accessibility-label :metrics
-    :style               (style/metrics watch-only? theme)}
+    :style               (style/metrics type theme)}
   account-percentage])

 (defn- metrics-info
-  [watch-only? theme account-amount]
+  [type theme account-amount]
  [:<>
-   [rn/view (style/separator watch-only? theme)]
+   [rn/view (style/separator type theme)]
   [text/text
-    {:weight :semi-bold
+    {:weight :medium
     :size   :paragraph-2
-     :style  (style/metrics watch-only? theme)}
+     :style  (style/metrics type theme)}
    account-amount]
   [rn/view {:style style/metrics-icon-container}
    [icon/icon
     :i/positive
-     {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
+     {:color (colors/theme-colors (if (or (= :missing-keypair type)
+                                          (= :watch-only type))
+                                    colors/neutral-50
+                                    colors/white-opa-70)
                                  colors/white-opa-70
                                  theme)
      :size  16}]]])

+(defn- gradient-overview
+  [theme customization-color]
+  [linear-gradient/linear-gradient
+   {:colors [(properties/gradient-start-color theme customization-color)
+             (properties/gradient-end-color theme customization-color)]
+    :style  style/gradient-view
+    :start  {:x 0 :y 0}
+    :end    {:x 1 :y 0}}])
+
 (defn- user-account
  []
  (let [pressed?     (reagent/atom false)
@@ -86,7 +99,8 @@
        on-press-out #(reset! pressed? false)]
    (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
                 theme on-press]}]
-      (let [watch-only? (= :watch-only type)]
+      (let [watch-only?      (= :watch-only type)
+            missing-keypair? (= :missing-keypair type)]
        (if loading?
          [loading-view
           {:customization-color customization-color
@@ -97,12 +111,11 @@
           {:on-press-in  on-press-in
            :on-press-out on-press-out
            :style        (style/card {:customization-color customization-color
-                                       :watch-only?         watch-only?
-                                       :metrics?            metrics?
+                                       :type                type
                                       :theme               theme
                                       :pressed?            @pressed?})
            :on-press     on-press}
-           (when (and customization-color (not watch-only?))
+           (when (and customization-color (and (not watch-only?) (not missing-keypair?)))
             [customization-colors/overlay
              {:customization-color customization-color
               :border-radius       16
@@ -115,19 +128,23 @@
             [text/text
              {:size   :paragraph-2
               :weight :medium
-               :style  (style/account-name watch-only? theme)}
+               :style  (style/account-name type theme)}
              name]
-             (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
+             (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])
+             (when missing-keypair?
+               [icon/icon :i/alert {:color (properties/alert-icon-color theme) :size 12}])]]
           [text/text
            {:size   :heading-2
             :weight :semi-bold
-             :style  (style/account-value watch-only? theme)}
+             :style  (style/account-value type theme)}
            balance]
           (when metrics?
             [rn/view {:style style/metrics-container}
-              [metrics-percentage watch-only? theme percentage-value]
+              [metrics-percentage type theme percentage-value]
              (when (not= :empty type)
-                [metrics-info watch-only? theme amount])])])))))
+                [metrics-info type theme amount])])
+           (when watch-only?
+             [gradient-overview theme customization-color])])))))

 (defn- add-account-view
  []
@@ -156,10 +173,8 @@
 (defn- view-internal
  [{:keys [type] :as props}]
  (case type
-    :watch-only  [user-account props]
-    :add-account [add-account-view props]
-    :default     [user-account props]
-    :empty       [user-account props]
+    (:watch-only :default :empty :missing-keypair) [user-account props]
+    :add-account                                   [add-account-view props]
    nil))

 (def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,115 @@
+(ns quo.components.wallet.network-routing.animation
+  (:require [react-native.reanimated :as reanimated]))
+
+(def ^:private slider-timing 300)
+
+(defn show-slider
+  [opacity-shared-value]
+  (reanimated/animate opacity-shared-value 1 slider-timing))
+
+(defn hide-slider
+  [opacity-shared-value]
+  (reanimated/animate opacity-shared-value 0 slider-timing))
+
+(defn increase-slider
+  [width-shared-value height-shared-value]
+  (reanimated/animate width-shared-value 8 slider-timing)
+  (reanimated/animate height-shared-value 40 slider-timing))
+
+(defn decrease-slider
+  [width-shared-value height-shared-value]
+  (reanimated/animate width-shared-value 4 slider-timing)
+  (reanimated/animate height-shared-value 32 slider-timing))
+
+(def ^:private pressed-bar-timing 600)
+
+(defn move-previous-bars
+  [{:keys [bars bars-widths-negative]}]
+  (doseq [[bar-idx bar] (map-indexed vector bars)
+          :let          [new-translation-x (->> (take (inc bar-idx) bars-widths-negative)
+                                                (reduce +)
+                                                (dec))]]
+    (reanimated/animate (:translate-x-shared-value bar)
+                        new-translation-x
+                        pressed-bar-timing)))
+
+(defn move-pressed-bar
+  [{:keys                              [bars-widths-negative number-previous-bars]
+    {:keys [translate-x-shared-value]} :bar}]
+  (let [new-translation-x (reduce + (take number-previous-bars bars-widths-negative))]
+    (reanimated/animate translate-x-shared-value
+                        new-translation-x
+                        (- pressed-bar-timing 20))))
+
+(defn move-next-bars
+  [{:keys [bars bars-widths-negative number-previous-bars extra-offset add-new-timeout]}]
+  (doseq [[bar-idx bar] (map-indexed vector bars)
+          :let          [number-bars-before (+ number-previous-bars
+                                               (inc bar-idx))
+                         new-translation-x  (->> (take number-bars-before bars-widths-negative)
+                                                 (reduce +)
+                                                 (* 1.05))]]
+    (reanimated/animate (:translate-x-shared-value bar) new-translation-x pressed-bar-timing)
+    (add-new-timeout
+     (keyword (str "fix-next-bars-position-" bar-idx))
+     (fn []
+       (let [translate-x-value (reanimated/get-shared-value (:translate-x-shared-value bar))
+             hidden-position   (- translate-x-value extra-offset)]
+         (reanimated/set-shared-value (:translate-x-shared-value bar) hidden-position)))
+     pressed-bar-timing)))
+
+(def ^:private max-limit-bar-timing 300)
+
+(defn show-max-limit-bar
+  [max-limit-bar-opacity]
+  (reanimated/animate max-limit-bar-opacity 1 max-limit-bar-timing))
+
+(defn hide-max-limit-bar
+  [max-limit-bar-opacity]
+  (reanimated/animate max-limit-bar-opacity 0 max-limit-bar-timing))
+
+(defn reset-bars-positions
+  [bars unlock-press-fn add-new-timeout]
+  (let [bars-reset-timing 500]
+    (doseq [{:keys [translate-x-shared-value]} bars]
+      (reanimated/animate translate-x-shared-value 0 bars-reset-timing))
+    (add-new-timeout :unlock-press unlock-press-fn bars-reset-timing)))
+
+(defn align-bars-off-screen
+  [{:keys [new-network-values network-bars amount->width add-new-timeout]}]
+  (let [width-to-off-screen (->> new-network-values
+                                 (reduce #(- %1 (:amount %2)) 0)
+                                 (amount->width))]
+    (doseq [[bar-idx {new-amount :amount} bar] (map vector (range) new-network-values network-bars)]
+      (reanimated/set-shared-value (:amount-shared-value bar) new-amount)
+      (reanimated/set-shared-value (:translate-x-shared-value bar) (* 2 width-to-off-screen))
+      (add-new-timeout
+       (keyword (str "align-bar-" bar-idx))
+       #(reanimated/set-shared-value (:translate-x-shared-value bar) width-to-off-screen)
+       1))))
+
+(def ^:private hide-bar-timing 400)
+
+(defn hide-pressed-bar
+  [{:keys [translate-x-shared-value amount-shared-value]} amount->width]
+  (let [bar-width         (amount->width (reanimated/get-shared-value amount-shared-value))
+        new-translation-x (- (reanimated/get-shared-value translate-x-shared-value)
+                             bar-width)]
+    (reanimated/animate translate-x-shared-value new-translation-x hide-bar-timing)))
+
+(defn update-bar-values-and-reset-animations
+  [{:keys [new-network-values network-bars amount->width reset-values-fn add-new-timeout
+           lock-press-fn unlock-press-fn]}]
+  (lock-press-fn)
+  (add-new-timeout
+   :update-bars-values
+   (fn []
+     (align-bars-off-screen {:new-network-values new-network-values
+                             :network-bars       network-bars
+                             :amount->width      amount->width
+                             :add-new-timeout    add-new-timeout})
+     (reset-values-fn)
+     (add-new-timeout :reset-bars
+                      #(reset-bars-positions network-bars unlock-press-fn add-new-timeout)
+                      100))
+   hide-bar-timing))
@@ -0,0 +1,79 @@
+(ns quo.components.wallet.network-routing.style
+  (:require [quo.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+(defn container
+  [container-style theme]
+  (assoc container-style
+         :flex-direction   :row
+         :height           64
+         :background-color (colors/theme-colors colors/neutral-100-opa-5 colors/neutral-90 theme)
+         :border-radius    20
+         :overflow         :hidden))
+
+(defn max-limit-bar
+  [{:keys [opacity-shared-value width]}]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity-shared-value}
+   {:position       :absolute
+    :top            0
+    :bottom         0
+    :left           0
+    :width          width
+    :z-index        -1
+    :flex-direction :row}))
+
+(defn max-limit-bar-background
+  [network-name]
+  {:flex             1
+   :background-color (colors/resolve-color network-name nil 10)})
+
+(defn network-bar
+  [{:keys                                           [max-width on-top? bar-division? theme]
+    {:keys [network-name translate-x-shared-value]} :bar}
+   width-shared-value]
+  (reanimated/apply-animations-to-style
+   {:width     width-shared-value
+    :transform [{:translate-x translate-x-shared-value}]}
+   {:max-width          max-width
+    :flex-direction     :row
+    :justify-content    :flex-end
+    :background-color   (colors/resolve-color network-name nil)
+    :z-index            (if on-top? 1 0)
+    :border-right-width (if bar-division? 0 1)
+    :border-color       (colors/theme-colors colors/white colors/neutral-95 theme)}))
+
+(def slider-container
+  {:width            40
+   :background-color :transparent
+   :justify-content  :center
+   :align-items      :center
+   :right            -20})
+
+(def ^:private slider-fixed-styles
+  {:background-color colors/white
+   :height           32
+   :width            4
+   :border-radius    4})
+
+(defn slider
+  [{:keys [width-shared-value height-shared-value opacity-shared-value]}]
+  (reanimated/apply-animations-to-style
+   {:width   width-shared-value
+    :height  height-shared-value
+    :opacity opacity-shared-value}
+   slider-fixed-styles))
+
+(def dashed-line
+  {:width       1
+   :height      "100%"
+   :margin-left -1
+   :margin-top  -1.5})
+
+(defn dashed-line-line
+  [network-name]
+  {:background-color (colors/resolve-color network-name nil)
+   :height           3
+   :width            1})
+
+(def dashed-line-space {:height 4 :width 1})
@@ -0,0 +1,189 @@
+(ns quo.components.wallet.network-routing.view
+  (:require
+    [oops.core :as oops]
+    [quo.components.wallet.network-routing.animation :as animation]
+    [quo.components.wallet.network-routing.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.gesture :as gesture]
+    [react-native.reanimated :as reanimated]
+    [reagent.core :as reagent]
+    [utils.number]))
+
+(def ^:private timeouts (atom {}))
+
+(defn- add-new-timeout
+  [k f ms]
+  (letfn [(exec-fn-and-remove-timeout []
+            (f)
+            (swap! timeouts dissoc k))]
+    (js/clearTimeout (k @timeouts))
+    (swap! timeouts assoc k (js/setTimeout exec-fn-and-remove-timeout ms))))
+
+(defn- f-slider
+  [slider-shared-values]
+  [rn/view {:style style/slider-container}
+   [reanimated/view {:style (style/slider slider-shared-values)}]])
+
+(defn f-network-bar
+  [_]
+  (let [detecting-gesture?      (reagent/atom false)
+        amount-on-gesture-start (atom 0)]
+    (fn [{:keys                [total-width total-amount on-press on-new-amount allow-press?]
+          {:keys [amount-shared-value
+                  max-amount]} :bar
+          :as                  props}]
+      (let [slider-width-shared-value   (reanimated/use-shared-value 4)
+            slider-height-shared-value  (reanimated/use-shared-value 32)
+            slider-opacity-shared-value (reanimated/use-shared-value 0)
+            network-bar-shared-value    (reanimated/interpolate amount-shared-value
+                                                                [0 total-amount]
+                                                                [0 total-width])
+            width->amount               #(/ (* % total-amount) total-width)]
+        [rn/touchable-without-feedback
+         {:on-press (fn []
+                      (when (and (not @detecting-gesture?) allow-press?)
+                        (on-press)
+                        (reset! detecting-gesture? true)
+                        (animation/show-slider slider-opacity-shared-value)))}
+         [reanimated/view
+          {:style               (style/network-bar props network-bar-shared-value)
+           :accessibility-label :network-routing-bar}
+          [gesture/gesture-detector
+           {:gesture
+            (-> (gesture/gesture-pan)
+                (gesture/enabled @detecting-gesture?)
+                (gesture/on-begin
+                 (fn [_]
+                   (animation/increase-slider slider-width-shared-value slider-height-shared-value)
+                   (reset! amount-on-gesture-start (reanimated/get-shared-value amount-shared-value))))
+                (gesture/on-update
+                 (fn [event]
+                   (let [new-amount (-> (oops/oget event "translationX")
+                                        (width->amount)
+                                        (+ @amount-on-gesture-start)
+                                        (utils.number/value-in-range 1 max-amount))]
+                     (reanimated/set-shared-value amount-shared-value new-amount))))
+                (gesture/on-finalize
+                 (fn [_]
+                   (animation/decrease-slider slider-width-shared-value slider-height-shared-value)
+                   (animation/hide-slider slider-opacity-shared-value)
+                   (on-new-amount (reanimated/get-shared-value amount-shared-value))
+                   (add-new-timeout :turn-off-gesture #(reset! detecting-gesture? false) 20))))}
+           [:f> f-slider
+            {:width-shared-value   slider-width-shared-value
+             :height-shared-value  slider-height-shared-value
+             :opacity-shared-value slider-opacity-shared-value}]]]]))))
+
+(defn- add-bar-shared-values
+  [{:keys [amount] :as network}]
+  (assoc network
+         :amount-shared-value      (reanimated/use-shared-value amount)
+         :translate-x-shared-value (reanimated/use-shared-value 0)))
+
+(def ^:private get-negative-amount
+  (comp - reanimated/get-shared-value :amount-shared-value))
+
+(defn- dashed-line
+  [network-name]
+  [rn/view {:style style/dashed-line}
+   (take 19
+         (interleave (repeat [rn/view {:style (style/dashed-line-line network-name)}])
+                     (repeat [rn/view {:style style/dashed-line-space}])))])
+
+(defn f-network-routing-bars
+  [_]
+  (let [selected-network-idx (reagent/atom nil)
+        press-locked?        (reagent/atom false)
+        lock-press           #(reset! press-locked? true)
+        unlock-press         #(reset! press-locked? false)
+        reset-state-values   #(reset! selected-network-idx nil)]
+    (fn [{:keys [networks total-width total-amount requesting-data? on-amount-selected]}]
+      (let [bar-opacity-shared-value (reanimated/use-shared-value 0)
+            network-bars             (map add-bar-shared-values networks)
+            amount->width            #(* % (/ total-width total-amount))
+            bars-widths-negative     (map #(-> % get-negative-amount amount->width)
+                                          network-bars)
+            last-bar-idx             (dec (count network-bars))]
+        (rn/use-effect
+         #(when (and (not requesting-data?) @selected-network-idx)
+            (let [bar (nth network-bars @selected-network-idx)]
+              (animation/hide-pressed-bar bar amount->width))
+            (animation/update-bar-values-and-reset-animations
+             {:new-network-values networks
+              :network-bars       network-bars
+              :amount->width      amount->width
+              :reset-values-fn    reset-state-values
+              :lock-press-fn      lock-press
+              :unlock-press-fn    unlock-press
+              :add-new-timeout    add-new-timeout}))
+         [requesting-data?])
+        [:<>
+         (doall
+          (for [[bar-idx bar] (map-indexed vector network-bars)
+                :let          [bar-max-width      (amount->width (:max-amount bar))
+                               bar-width          (-> (:amount-shared-value bar)
+                                                      (reanimated/get-shared-value)
+                                                      (amount->width))
+                               hide-division?     (or (= last-bar-idx bar-idx) @selected-network-idx)
+                               this-bar-selected? (= @selected-network-idx bar-idx)]]
+            ^{:key (str "network-bar-" bar-idx)}
+            [:f> f-network-bar
+             {:bar           bar
+              :max-width     bar-max-width
+              :total-width   total-width
+              :total-amount  total-amount
+              :bar-division? hide-division?
+              :on-top?       this-bar-selected?
+              :allow-press?  (and (or (not @selected-network-idx) this-bar-selected?)
+                                  (not requesting-data?)
+                                  (not @press-locked?))
+              :on-press      (fn []
+                               (when-not @selected-network-idx
+                                 (let [[previous-bars [_ & next-bars]] (split-at bar-idx network-bars)
+                                       number-previous-bars            bar-idx]
+                                   (animation/move-previous-bars
+                                    {:bars                 previous-bars
+                                     :bars-widths-negative bars-widths-negative})
+                                   (animation/move-pressed-bar
+                                    {:bar                  bar
+                                     :bars-widths-negative bars-widths-negative
+                                     :number-previous-bars number-previous-bars})
+                                   (animation/move-next-bars
+                                    {:bars                 next-bars
+                                     :bars-widths-negative bars-widths-negative
+                                     :number-previous-bars (inc number-previous-bars)
+                                     :extra-offset         (max 0 (- bar-max-width bar-width))
+                                     :add-new-timeout      add-new-timeout}))
+                                 (animation/show-max-limit-bar bar-opacity-shared-value)
+                                 (reset! selected-network-idx bar-idx)))
+              :on-new-amount (fn [new-amount]
+                               (animation/hide-max-limit-bar bar-opacity-shared-value)
+                               (when on-amount-selected
+                                 (on-amount-selected new-amount @selected-network-idx)))}]))
+
+         (let [{:keys [max-amount network-name]} (some->> @selected-network-idx
+                                                          (nth network-bars))
+               limit-bar-width                   (amount->width max-amount)]
+           [reanimated/view
+            {:style (style/max-limit-bar
+                     {:opacity-shared-value bar-opacity-shared-value
+                      :width                limit-bar-width})}
+            [rn/view {:style (style/max-limit-bar-background network-name)}]
+            [dashed-line network-name]])]))))
+
+(defn view-internal
+  [{:keys [networks container-style theme] :as params}]
+  (reagent/with-let [total-width (reagent/atom nil)]
+    [rn/view
+     {:accessibility-label :network-routing
+      :style               (style/container container-style theme)
+      :on-layout           #(reset! total-width (oops/oget % "nativeEvent.layout.width"))}
+     (when @total-width
+       ^{:key (str "network-routing-" (count networks))}
+       [:f> f-network-routing-bars (assoc params :total-width @total-width)])]
+    (finally
+     (doseq [[_ living-timeout] @timeouts]
+       (js/clearTimeout living-timeout)))))
+
+(def view (quo.theme/with-theme view-internal))
@@ -77,6 +77,7 @@
    quo.components.list-items.preview-list.view
    quo.components.list-items.saved-address.view
    quo.components.list-items.saved-contact-address.view
+    quo.components.list-items.token-network.view
    quo.components.list-items.token-value.view
    quo.components.list-items.user-list
    quo.components.loaders.skeleton-list.view
@@ -112,7 +113,6 @@
    quo.components.selectors.selectors.view
    quo.components.settings.accounts.view
    quo.components.settings.category.view
-    quo.components.settings.category.view
    quo.components.settings.data-item.view
    quo.components.settings.privacy-option.view
    quo.components.settings.reorder-item.view
@@ -132,7 +132,7 @@
    quo.components.tags.tag
    quo.components.tags.tags
    quo.components.tags.tiny-tag.view
-    quo.components.tags.token-tag
+    quo.components.tags.token-tag.view
    quo.components.text-combinations.view
    quo.components.wallet.account-card.view
    quo.components.wallet.account-origin.view
@@ -141,6 +141,7 @@
    quo.components.wallet.network-amount.view
    quo.components.wallet.network-bridge.view
    quo.components.wallet.network-link.view
+    quo.components.wallet.network-routing.view
    quo.components.wallet.progress-bar.view
    quo.components.wallet.summary-info.view
    quo.components.wallet.token-input.view
@@ -278,6 +279,7 @@
 (def community-list-item quo.components.list-items.community.view/view)
 (def saved-address quo.components.list-items.saved-address.view/view)
 (def saved-contact-address quo.components.list-items.saved-contact-address.view/view)
+(def token-network quo.components.list-items.token-network.view/view)
 (def token-value quo.components.list-items.token-value.view/view)

 ;;;; Loaders
@@ -360,7 +362,7 @@
 (def tag quo.components.tags.tag/tag)
 (def tags quo.components.tags.tags/tags)
 (def tiny-tag quo.components.tags.tiny-tag.view/view)
-(def token-tag quo.components.tags.token-tag/tag)
+(def token-tag quo.components.tags.token-tag.view/view)

 ;;;; Text combinations
 (def text-combinations quo.components.text-combinations.view/view)
@@ -372,6 +374,7 @@
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)
 (def network-bridge quo.components.wallet.network-bridge.view/view)
+(def network-routing quo.components.wallet.network-routing.view/view)
 (def progress-bar quo.components.wallet.progress-bar.view/view)
 (def summary-info quo.components.wallet.summary-info.view/view)
 (def network-link quo.components.wallet.network-link.view/view)
@@ -32,7 +32,6 @@
    [quo.components.inputs.address-input.component-spec]
    [quo.components.inputs.input.component-spec]
    [quo.components.inputs.locked-input.component-spec]
-    [quo.components.inputs.locked-input.component-spec]
    [quo.components.inputs.profile-input.component-spec]
    [quo.components.inputs.recovery-phrase.component-spec]
    [quo.components.inputs.title-input.component-spec]
@@ -46,6 +45,7 @@
    [quo.components.list-items.dapp.component-spec]
    [quo.components.list-items.saved-address.component-spec]
    [quo.components.list-items.saved-contact-address.component-spec]
+    [quo.components.list-items.token-network.component-spec]
    [quo.components.list-items.token-value.component-spec]
    [quo.components.loaders.skeleton-list.component-spec]
    [quo.components.markdown.list.component-spec]
@@ -72,6 +72,7 @@
    [quo.components.switchers.group-messaging-card.component-spec]
    [quo.components.tags.network-tags.component-spec]
    [quo.components.tags.status-tags-component-spec]
+    [quo.components.tags.tiny-tag.component-spec]
    [quo.components.wallet.account-card.component-spec]
    [quo.components.wallet.account-origin.component-spec]
    [quo.components.wallet.account-overview.component-spec]
@@ -37,7 +37,7 @@
  [k]
  (get tokens k))

-(def networks
+(def ^:private networks
  {:arbitrum (js/require "../resources/images/networks/Arbitrum.png")
   :ethereum (js/require "../resources/images/networks/Ethereum.png")
   :gnosis   (js/require "../resources/images/networks/Gnosis.png")
@@ -0,0 +1,28 @@
+(ns quo2.components.wallet.network-routing.component-spec
+  (:require [oops.core :as oops]
+            [quo2.components.wallet.network-routing.view :as network-routing]
+            [reagent.core :as reagent]
+            [test-helpers.component :as h]))
+
+(h/describe "Network-routing tests"
+  (let [network       {:amount 250 :max-amount 300 :network-name :unknown}
+        default-props {:networks           [network network network]
+                       :total-amount       500
+                       :requesting-data?   false
+                       :on-amount-selected (fn [_new-amount _network-idx] nil)}]
+    (h/test "Renders Default"
+      (h/render [network-routing/view default-props])
+      (h/is-truthy (h/get-by-label-text :network-routing)))
+
+    (h/test "Renders bars inside"
+      (let [component   (h/render [network-routing/view default-props])
+            rerender-fn #((oops/oget component "rerender") (reagent/as-element %))
+            component   (h/get-by-label-text :network-routing)]
+        ;; Fires on-layout callback since the total width is required
+        (h/fire-event :layout component #js {:nativeEvent #js {:layout #js {:width 1000}}})
+        ;; Update props to trigger rerender, otherwise it won't be updated
+        (rerender-fn [network-routing/view (assoc default-props :requesting-data? true)])
+        ;; Check number of networks rendered
+        (->> (js->clj (h/query-all-by-label-text :network-routing-bar))
+             (count)
+             (h/is-equal 3))))))
@@ -1,6 +1,6 @@
 (ns react-native.cameraroll
  (:require
-    ["@react-native-community/cameraroll" :as CameraRoll]
+    ["@react-native-camera-roll/camera-roll" :refer [CameraRoll]]
    [react-native.fs :as fs]
    [taoensso.timbre :as log]
    [utils.transforms :as transforms]))
@@ -22,3 +22,9 @@
  (-> (.save CameraRoll (clj->js path))
      (.then #(fs/unlink path))
      (.catch #(fs/unlink path))))
+
+(defn get-photos-count-ios
+  [cb]
+  (-> (.getPhotosCountiOS CameraRoll)
+      (.then #(cb %))
+      (.catch #(js/console.error %))))
@@ -20,9 +20,6 @@
          (map? view)
          (merge view)

-          (= view :mobile-network)
-          (merge mobile-network-settings/settings-sheet)
-
          (= view :mobile-network-offline)
          (merge mobile-network-settings/offline-sheet)

@@ -29,15 +29,6 @@
     cofx
     {:db (assoc db :network-status/initialized? true)}
     (cond
-       (and logged-in?
-            (utils/cellular? (:network/type db))
-            (not remember-syncing-choice?)
-            (not= :create-multiaccount (:view-id db)))
-
-       [(bottom-sheet/show-bottom-sheet-old
-         {:view :mobile-network})
-        (sheet-defaults)]
-
       ;; NOTE(rasom): When we log into account on-network-status-change is
       ;; dispatched, but that doesn't mean there was a status change, thus
       ;; no reason to restart wallet.
@@ -67,18 +67,17 @@
                 :else    theme)
        {:keys [icon-color background-color text-color border-color]}
        (themes theme')]
-    (println "theme" theme' background-color)
+
    [rn/touchable-without-feedback
-     (merge (when on-press
+     (merge {:disabled            disabled
+             :accessibility-label accessibility-label}
+            (when on-press
              {:on-press on-press})
            (when on-long-press
              {:on-long-press on-long-press}))
     [rn/view
-      (merge {:background-color    background-color
-              :border-radius       border-radius
-              :type                type
-              :disabled            disabled
-              :accessibility-label accessibility-label}
+      (merge {:background-color background-color
+              :border-radius    border-radius}
             (when border-color
               {:border-color border-color
                :border-width 1}))
@@ -1,7 +1,6 @@
 (ns status-im.ui.components.text
  (:require
    [react-native.core :as rn]
-    [react-native.reanimated :as animated]
    [reagent.core :as reagent]
    [status-im.ui.components.colors :as colors]
    [status-im.ui.components.typography :as typography]))
@@ -44,7 +43,7 @@
  []
  (let [this      (reagent/current-component)
        props     (reagent/props this)
-        component (if (:animated? props) animated/text rn/text)]
+        component rn/text]
    (into [component
           (merge {:style (text-style props)}
                  (dissoc props
@@ -1,12 +1,10 @@
 (ns status-im.ui.screens.mobile-network-settings.sheets
  (:require-macros [status-im.utils.views :as views])
-  (:require
-    [re-frame.core :as re-frame]
-    [status-im.ui.components.checkbox.view :as checkbox]
-    [status-im.ui.components.list.item :as list.item]
-    [status-im.ui.components.react :as react]
-    [status-im.ui.screens.mobile-network-settings.sheets-styles :as styles]
-    [utils.i18n :as i18n]))
+  (:require [re-frame.core :as re-frame]
+            [status-im.ui.components.list.item :as list.item]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.screens.mobile-network-settings.sheets-styles :as styles]
+            [utils.i18n :as i18n]))

 (defn title
  [label]
@@ -36,65 +34,6 @@
     :on-press #(re-frame/dispatch [:mobile-network/navigate-to-settings])}
    (i18n/label :t/mobile-network-go-to-settings)]])

-(views/defview checkbox
-  []
-  (views/letsubs [checked? [:mobile-network/remember-choice?]]
-    [react/view
-     {:style               styles/checkbox-line-container
-      :accessibility-label "remember-choice"}
-     [checkbox/checkbox
-      {:checked?        checked?
-       :style           styles/checkbox
-       :icon-style      styles/checkbox-icon
-       :on-value-change #(re-frame/dispatch [:mobile-network/remember-choice? %])}]
-     [react/view
-      {:style styles/checkbox-text-container}
-      [react/text (i18n/label :t/mobile-network-sheet-remember-choice)]]]))
-
-(defn settings
-  []
-  [react/view
-   {:style styles/settings-container}
-   [react/nested-text
-    {:style    styles/settings-text
-     :on-press #(re-frame/dispatch [:mobile-network/navigate-to-settings])}
-    (i18n/label :t/mobile-network-sheet-configure)
-    [{:style styles/settings-link}
-     (str " " (i18n/label :t/mobile-network-sheet-settings))]]])
-
-(defn hide-sheet-and-dispatch
-  [event]
-  (re-frame/dispatch [:bottom-sheet/hide-old])
-  (re-frame/dispatch event))
-
-(views/defview settings-sheet
-  []
-  [react/view {:flex 1}
-   [react/view {:align-items :center}
-    [title :mobile-syncing-sheet-title]
-    [details :mobile-syncing-sheet-details]]
-   [list.item/list-item
-    {:theme               :accent
-     :accessibility-label "mobile-network-continue-syncing"
-     :title               (i18n/label :t/mobile-network-continue-syncing)
-     :subtitle            (i18n/label :t/mobile-network-continue-syncing-details)
-     :subtitle-max-lines  2
-     :icon                :main-icons/network
-     :on-press            #(hide-sheet-and-dispatch [:mobile-network/continue-syncing])}]
-   [list.item/list-item
-    {:theme               :negative
-     :accessibility-label "mobile-network-stop-syncing"
-     :title               (i18n/label :t/mobile-network-stop-syncing)
-     :subtitle            (i18n/label :t/mobile-network-stop-syncing-details)
-     :icon                :main-icons/cancel
-     :on-press            #(hide-sheet-and-dispatch [:mobile-network/stop-syncing])}]
-   [separator]
-   [react/view
-    {:flex       1
-     :align-self :stretch}
-    [checkbox]
-    [settings]]])
-
 (views/defview offline-sheet
  []
  [react/view {:flex 1}
@@ -53,8 +53,5 @@
        :on-press            #(hide-sheet-and-dispatch [:mobile-network/restore-defaults])}
       (i18n/label :t/restore-defaults)]]]))

-(def settings-sheet
-  {:content sheets/settings-sheet})
-
 (def offline-sheet
  {:content sheets/offline-sheet})
@@ -1,16 +1,18 @@
 (ns status-im.ui.screens.qr-scanner.views
-  (:require-macros [status-im.utils.views :refer [defview letsubs]])
  (:require
    [clojure.string :as string]
    [re-frame.core :as re-frame]
    [react-native.camera-kit :as camera-kit]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
    [status-im.ui.components.colors :as colors]
    [status-im.ui.components.core :as quo]
    [status-im.ui.components.react :as react]
    [status-im.ui.components.topbar :as topbar]
    [status-im.ui.screens.qr-scanner.styles :as styles]
    [status-im2.config :as config]
-    [utils.i18n :as i18n]))
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))

 (defn get-qr-code-data
  [^js event]
@@ -85,13 +87,18 @@
  [opts data]
  (re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (get-qr-code-data data)]))

-(defview qr-scanner
+(defn- navigate-back-handler
  []
-  (letsubs [read-once?             (atom false)
-            {:keys [height width]} [:dimensions/window]
-            camera-flashlight      [:wallet-legacy.send/camera-flashlight]
-            opts                   [:get-screen-params]
-            camera-ref             (atom nil)]
+  (re-frame/dispatch [:navigate-back])
+  true)
+
+(defn f-qr-scanner
+  []
+  (let [read-once?             (reagent/atom false)
+        {:keys [height width]} (rf/sub [:dimensions/window])
+        camera-flashlight      (rf/sub [:wallet-legacy.send/camera-flashlight])
+        opts                   (rf/sub [:get-screen-params])
+        camera-ref             (reagent/atom nil)]
    [react/view
     {:flex             1
      :background-color colors/black-persist}
@@ -111,3 +118,11 @@
                            (reset! read-once? true)
                            (on-barcode-read opts %))}]]
        [viewfinder (int (* 2 (/ (min height width) 3)))]])]))
+
+(defn qr-scanner
+  []
+  (reagent/create-class
+   {:display-name           "qr-scanner"
+    :component-did-mount    #(rn/hw-back-add-listener navigate-back-handler)
+    :component-will-unmount #(rn/hw-back-remove-listener navigate-back-handler)
+    :reagent-render         f-qr-scanner}))
@@ -73,6 +73,7 @@
    [status-im.ui.screens.wallet.settings.views :as wallet-settings]
    [status-im.ui.screens.wallet.swap.views :as wallet.swap]
    [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
+    [status-im.ui.screens.wallet.address-add-edit.views :as address-add-edit]
    [status-im2.contexts.chat.group-details.view :as group-details]
    [utils.i18n :as i18n]))

@@ -152,7 +153,7 @@
    :component wallet.account/account}
   {:name      :add-new-account
    ;;TODO dynamic title
-    :options   {:insets {:top? true}}
+    :options   {:insets {:top? true :bottom? true}}
    :component add-account/add-account-view}
   {:name      :add-new-account-pin
    ;;TODO dynamic title
@@ -219,6 +220,9 @@
    :options   {:insets {:top? true}}
    :component wallet.swap/asset-selector}

+   {:name      :address-to-watch-edit
+    :component address-add-edit/address-add-edit}
+
   ;;PROFILE

   {:name      :my-profile
@@ -211,7 +211,7 @@
    {:style    styles/round-action-button
     :on-press on-press}
    (icons/icon icon {:color colors/white})]
-   [quo/text
+   [components.core/text
    {:color :secondary
     :size  :small
     :style {:margin-top (:tiny spacing/spacing)}}
@@ -348,7 +348,7 @@
                     :margin-top        8
                     :margin-horizontal 67.5
                     :text-align        :center}}
-            [quo/text
+            [components.core/text
             {:color :secondary
              :size  :small
              :style {:text-align :center}}
@@ -145,7 +145,7 @@
   :justify-content :center
   :left            0
   :right           0
-   :bottom          16
+   :bottom          56
   :height          40})

 (defn send-button
@@ -0,0 +1,17 @@
+(ns status-im.ui.screens.wallet.address-add-edit.style)
+
+(def container
+  {:flex 1})
+(def input
+  {:margin-right 12
+   :flex         1})
+(def data-item
+  {:margin-horizontal  20
+   :padding-vertical   8
+   :padding-horizontal 12})
+(defn button-container
+  [bottom]
+  {:position :absolute
+   :bottom   (+ bottom 12)
+   :left     20
+   :right    20})
@@ -0,0 +1,14 @@
+(ns status-im.ui.screens.wallet.address-add-edit.utils)
+
+(defn random-emoji
+  []
+  (let [positive-emojis ["😀" "😃" "😄" "😁" "😆" "😅" "🤣" "😂" "🙂" "🙃"
+                         "😉" "😊" "😇" "🥰" "😍" "🤩" "😘" "😗" "😚" "😙"
+                         "😋" "😛" "😜" "🤪" "😝" "🤑" "🤗" "🤭" "🤫" "🤔"
+                         "😐" "😑" "😶" "😏" "😌" "😔" "😪" "🤤" "😴"
+                         "🥶" "😵" "🤯" "🤠" "🥳" "😎" "🤓"
+                         "🧐" "😮" "😯" "😲" "😳" "🥺"
+                         "😓" "😩" "😫" "🥱" "😤" "😈" "👿"
+                         "👻" "👽" "👾" "🤖"
+                         "😺" "😸" "😹" "😻" "😼" "😽" "🙀" "😾"]]
+    (rand-nth positive-emojis)))
@@ -0,0 +1,59 @@
+(ns status-im.ui.screens.wallet.address-add-edit.views
+  (:require
+    [reagent.core :as reagent]
+    [react-native.safe-area :as safe-area]
+    [utils.i18n :as i18n]
+    [re-frame.core :as re-frame]
+    [react-native.core :as rn]
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
+    [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
+     create-or-edit-account]
+    [utils.re-frame :as rf]
+    [status-im.ui.screens.wallet.address-add-edit.style :as style]
+    [status-im.ui.screens.wallet.address-add-edit.utils :as utils]))
+
+(defn- view-internal
+  []
+  (let [{:keys [accounts-count address]} (rf/sub [:get-screen-params])
+        account-name                     (reagent/atom (str "Account " accounts-count))
+        address-title                    (i18n/label :t/watch-address)
+        account-color                    (reagent/atom :purple)
+        account-emoji                    (reagent/atom (utils/random-emoji))
+        on-change-name                   #(reset! account-name %)
+        on-change-color                  #(reset! account-color %)
+        on-change-emoji                  #(reset! account-emoji %)
+        safe-bottom                      (safe-area/get-bottom)]
+    (fn []
+      [rn/view {:style style/container}
+       [create-or-edit-account/view
+        {:page-nav-right-side [{:icon-name :i/info
+                                :on-press
+                                #(js/alert
+                                  "Get info (to be
+                                implemented)")}]
+         :account-name        @account-name
+         :account-emoji       @account-emoji
+         :account-color       @account-color
+         :on-change-name      on-change-name
+         :on-change-color     on-change-color
+         :on-change-emoji     on-change-emoji}
+        [quo/data-item
+         {:card?           true
+          :right-icon      :i/advanced
+          :icon-right?     true
+          :emoji           @account-emoji
+          :title           address-title
+          :subtitle        address
+          :status          :default
+          :size            :default
+          :container-style style/data-item
+          :on-press        #(js/alert "To be implemented")}]]
+       [rn/view {:style (style/button-container safe-bottom)}
+        [quo/bottom-actions
+         {:button-one-label     (i18n/label :t/create-account)
+          :button-one-disabled? (clojure.string/blank? @account-name)
+          :button-one-press     #(re-frame/dispatch [:navigate-to :wallet-account])
+          :customization-color  @account-color}]]])))
+
+(def address-add-edit (quo.theme/with-theme view-internal))
@@ -244,10 +244,11 @@
           to to-wallet to-contact
           gas-limit gas-price-gwei gas-price-eth gas-used
           fee-cap-gwei tip-cap-gwei
-           cost nonce data]}]
+           cost nonce data]
+    :as   tx}]
  [react/view {:style styles/details-block}
   [details-list-row :t/block block]
-   [details-list-row :t/hash hash]
+   [details-list-row :t/hash (:hash tx)]
   [details-list-row :t/from-capitalized
    [{:accessibility-label (if from-wallet :sender-name-text :sender-address-text)}
     (or from-wallet from-contact from)]
@@ -1,21 +1,12 @@
 (ns status-im2.common.home.top-nav.view
  (:require
    [quo.core :as quo]
-    [react-native.core :as rn]
    [status-im.multiaccounts.core :as multiaccounts]
    [status-im2.common.home.top-nav.style :as style]
    [status-im2.constants :as constants]
    [utils.debounce :refer [dispatch-and-chill]]
    [utils.re-frame :as rf]))

-(defn connectivity-sheet
-  []
-  (let [peers-count  (rf/sub [:peers-count])
-        network-type (rf/sub [:network/type])]
-    [rn/view
-     [quo/text {:accessibility-label :peers-network-type-text} (str "NETWORK TYPE: " network-type)]
-     [quo/text {:accessibility-label :peers-count-text} (str "PEERS COUNT: " peers-count)]]))
-
 (defn view
  "[top-nav props]
  props
@@ -30,7 +21,6 @@
        avatar               {:online?         online?
                              :full-name       (multiaccounts/displayed-name account)
                              :profile-picture (multiaccounts/displayed-photo account)}
-        network-type         (rf/sub [:network/type])
        unread-count         (rf/sub [:activity-center/unread-count])
        indicator            (rf/sub [:activity-center/unread-indicator])
        notification-type    (case indicator
@@ -41,22 +31,15 @@
                                                               ; https://github.com/status-im/status-mobile/issues/17102
                               nil)]
    [quo/top-nav
-     {:avatar-on-press              #(rf/dispatch [:navigate-to :my-profile])
-      :scan-on-press                #(js/alert "to be implemented")
-      :activity-center-on-press     #(rf/dispatch [:activity-center/open])
-      :qr-code-on-press             #(dispatch-and-chill [:open-modal :share-shell] 1000)
-      :container-style              (merge style/top-nav-container container-style)
-      :blur?                        blur?
-      :jump-to?                     jump-to?
-      :customization-color          customization-color
-      :avatar-props                 avatar
-      :max-unread-notifications     constants/activity-center-max-unread-count
-      :notification-count           unread-count
-      :notification                 notification-type
-      :for-qa-only-cellular-network {:accessibility-label :on-cellular-network
-                                     :on-press            #(rf/dispatch [:show-bottom-sheet
-                                                                         {:content connectivity-sheet}])}
-      :for-qa-only-no-network       {:accessibility-label :no-network-connection
-                                     :on-press            #(rf/dispatch [:show-bottom-sheet
-                                                                         {:content connectivity-sheet}])}
-      :for-qa-only-network-type     network-type}]))
+     {:avatar-on-press          #(rf/dispatch [:navigate-to :my-profile])
+      :scan-on-press            #(js/alert "to be implemented")
+      :activity-center-on-press #(rf/dispatch [:activity-center/open])
+      :qr-code-on-press         #(dispatch-and-chill [:open-modal :share-shell] 1000)
+      :container-style          (merge style/top-nav-container container-style)
+      :blur?                    blur?
+      :jump-to?                 jump-to?
+      :customization-color      customization-color
+      :avatar-props             avatar
+      :max-unread-notifications constants/activity-center-max-unread-count
+      :notification-count       unread-count
+      :notification             notification-type}]))
@@ -46,7 +46,8 @@
   :no-contacts-to-invite-light   (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
   :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
   :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
-   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
+   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")
+   :welcome-illustration          (js/require "../resources/images/ui2/welcome_illustration.png")})

 (def ui-themed
  {:no-messages
@@ -9,13 +9,11 @@
    [utils.re-frame :as rf]))

 (defn view
-  [{:keys [on-enter-password button-label]}]
-  (let [{:keys [key-uid display-name
-                customization-color]
-         :as   account}                     (rf/sub [:profile/multiaccount])
-        {:keys [error processing password]} (rf/sub [:profile/login])
-        sign-in-enabled?                    (rf/sub [:sign-in-enabled?])
-        profile-picture                     (multiaccounts/displayed-photo account)]
+  [{:keys [on-enter-password button-label button-icon-left customization-color]}]
+  (let [{:keys [key-uid display-name] :as account} (rf/sub [:profile/multiaccount])
+        {:keys [error processing password]}        (rf/sub [:profile/login])
+        sign-in-enabled?                           (rf/sub [:sign-in-enabled?])
+        profile-picture                            (multiaccounts/displayed-photo account)]
    [:<>
     [rn/view {:style style/enter-password-container}
      [rn/view
@@ -45,7 +43,7 @@
          :type                :primary
          :customization-color (or customization-color :primary)
          :accessibility-label :login-button
-          :icon-left           :i/reveal
+          :icon-left           button-icon-left
          :disabled?           (or (not sign-in-enabled?) processing)
          :on-press            (fn []
                                 (rf/dispatch [:set-in [:profile/login :key-uid] key-uid])
@@ -17,7 +17,7 @@

 (defn authorize
  [{:keys [on-enter-password biometric-auth? on-auth-success on-auth-fail on-close
-           fallback-button-label theme blur?]}]
+           auth-button-label theme blur? customization-color auth-button-icon-left]}]
  (biometric/get-supported-type
   (fn [biometric-type]
     (if (and biometric-auth? biometric-type)
@@ -43,8 +43,10 @@
                        :shell?   blur?
                        :content  (fn []
                                    [enter-password/view
-                                     {:on-enter-password on-enter-password
-                                      :button-label      fallback-button-label}])}]))))))
+                                     {:customization-color customization-color
+                                      :on-enter-password   on-enter-password
+                                      :button-icon-left    auth-button-icon-left
+                                      :button-label        auth-button-label}])}]))))))

 (defn- view-internal
  [_]
@@ -53,26 +55,31 @@
    (fn [{:keys [biometric-auth?
                 track-text
                 customization-color
-                 fallback-button-label
+                 auth-button-label
                 on-enter-password
                 on-auth-success
                 on-auth-fail
+                 auth-button-icon-left
                 size
                 theme
-                 blur?]}]
+                 blur?
+                 container-style]}]
      [rn/view {:style {:flex 1}}
       [quo/slide-button
        {:size                size
+         :container-style     container-style
         :customization-color customization-color
         :on-reset            (when @reset-slider? #(reset! reset-slider? false))
         :on-complete         #(authorize {:on-close              on-close
+                                           :auth-button-icon-left auth-button-icon-left
                                           :theme                 theme
                                           :blur?                 blur?
+                                           :customization-color   customization-color
                                           :on-enter-password     on-enter-password
                                           :biometric-auth?       biometric-auth?
                                           :on-auth-success       on-auth-success
                                           :on-auth-fail          on-auth-fail
-                                           :fallback-button-label fallback-button-label})
+                                           :auth-button-label     auth-button-label})
         :track-icon          (if biometric-auth? :i/face-id :password)
         :track-text          track-text}]])))

@@ -358,3 +358,17 @@

 (def ^:const ens-action-type-register 1)
 (def ^:const ens-action-type-set-pub-key 2)
+
+;; wallet
+(def ^:const mainnet-chain-id 1)
+(def ^:const optimism-chain-id 10)
+(def ^:const arbitrum-chain-id 42161)
+(def ^:const goerli-chain-id 5)
+
+(def ^:const mainnet-short-name "eth")
+(def ^:const optimism-short-name "opt")
+(def ^:const arbitrum-short-name "arb1")
+
+(def ^:const mainnet-network-name :ethereum)
+(def ^:const optimism-network-name :optimism)
+(def ^:const arbitrum-network-name :arbitrum)
@@ -1,5 +1,6 @@
 (ns status-im2.contexts.chat.camera.view
  (:require
+    [oops.core :refer [oget]]
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [react-native.camera-kit :as camera-kit]
@@ -70,13 +71,12 @@

 (defn zoom-buttons
  []
-  (let [current-zoom (reagent/atom 1)]
-    (fn [top insets rotate]
-      [rn/view {:style (style/zoom-container top insets)}
-       [zoom-button {:value 0.5 :current-zoom current-zoom :rotate rotate}]
-       [zoom-button {:value 1 :current-zoom current-zoom :rotate rotate}]
-       [zoom-button {:value 2 :current-zoom current-zoom :rotate rotate}]
-       [zoom-button {:value 3 :current-zoom current-zoom :rotate rotate}]])))
+  (fn [top insets rotate current-zoom]
+    [rn/view {:style (style/zoom-container top insets)}
+     [zoom-button {:value 0.5 :current-zoom current-zoom :rotate rotate}]
+     [zoom-button {:value 1 :current-zoom current-zoom :rotate rotate}]
+     [zoom-button {:value 2 :current-zoom current-zoom :rotate rotate}]
+     [zoom-button {:value 3 :current-zoom current-zoom :rotate rotate}]]))


 (defn- f-bottom-area
@@ -108,7 +108,7 @@
    [:f> f-bottom-area args back flip-camera]))

 (defn- f-camera-screen
-  [{:keys [camera-ref uri camera-type current-orientation flash toggle-flash]}]
+  [{:keys [camera-ref uri camera-type current-orientation flash toggle-flash current-zoom]}]
  (let [window                 (rn/get-window)
        {:keys [width height]} window
        camera-window-height   (* width 1.33)
@@ -140,9 +140,13 @@
        {:ref         #(reset! camera-ref %)
         :style       (style/camera-window width camera-window-height top)
         :flash-mode  (if @flash :on :off)
-         :camera-type @camera-type}])
+         :camera-type @camera-type
+         :zoom        @current-zoom
+         :max-zoom    3
+         :on-zoom     (fn [event]
+                        (reset! current-zoom (oget event "nativeEvent.zoom")))}])
     (when-not @uri
-       [zoom-buttons top insets rotate])
+       [zoom-buttons top insets rotate current-zoom])
     [rn/view {:style (style/confirmation-container insets @uri)}
      [quo/text
       {:on-press on-press
@@ -171,5 +175,6 @@
               :camera-type         (reagent/atom camera-kit/camera-type-back)
               :current-orientation (atom orientation/portrait)
               :flash               flash
-               :toggle-flash        #(swap! flash not)}]
+               :toggle-flash        #(swap! flash not)
+               :current-zoom        (reagent/atom 1)}]
    [:f> f-camera-screen args]))
@@ -112,7 +112,10 @@
     (let [edit-text        (get-in edit [:content :text])
           text-value-count (count @text-value)]
       (when (and edit @input-ref)
-         (.focus ^js @input-ref)
+         ;; A small setTimeout is necessary to ensure the statement is enqueued and will get executed
+         ;; ASAP.
+         ;; https://github.com/software-mansion/react-native-screens/issues/472
+         (js/setTimeout #(.focus ^js @input-ref) 250)
         (.setNativeProps ^js @input-ref (clj->js {:text edit-text}))
         (reset! text-value edit-text)
         (reset! saved-cursor-position (if (zero? text-value-count)
@@ -129,7 +132,7 @@
     (when reply
       (reanimated/animate container-opacity 1))
     (when (and reply @input-ref)
-       (.focus ^js @input-ref)))
+       (js/setTimeout #(.focus ^js @input-ref) 250)))
   [(:message-id reply)]))

 (defn edit-mentions
@@ -181,7 +184,7 @@
                                        (+ (reanimated/get-shared-value last-height) value))))
       (let [curr-text @text-value]
         (reset! text-value (str @text-value " "))
-         (js/setTimeout #(reset! text-value curr-text) 10)))
+         (js/setTimeout #(reset! text-value curr-text) 100)))
     (reset! sending-links? link-previews?))
   [link-previews?]))

@@ -208,7 +211,7 @@
                                        (+ (reanimated/get-shared-value last-height) value))))
       (let [curr-text @text-value]
         (reset! text-value (str @text-value " "))
-         (js/setTimeout #(reset! text-value curr-text) 10)))
+         (js/setTimeout #(reset! text-value curr-text) 100)))
     (reset! sending-images? (boolean (seq images))))
   [(boolean (seq images))]))

@@ -82,12 +82,13 @@
       :online?             online?
       :photo-path          photo-path}]

-     (if able-to-send-message?
-       [:f> composer.view/composer
-        {:insets                            insets
-         :scroll-to-bottom-fn               list.view/scroll-to-bottom
-         :show-floating-scroll-down-button? show-floating-scroll-down-button?}]
-       [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat])]))
+     (when (seq chat)
+       (if able-to-send-message?
+         [:f> composer.view/composer
+          {:insets                            insets
+           :scroll-to-bottom-fn               list.view/scroll-to-bottom
+           :show-floating-scroll-down-button? show-floating-scroll-down-button?}]
+         [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]))]))

 (defn chat
  []
@@ -4,6 +4,7 @@
    [quo.foundations.colors :as colors]
    [react-native.core :as rn]
    [react-native.gesture :as gesture]
+    [react-native.platform :as platform]
    [react-native.reanimated :as reanimated]
    [status-im2.contexts.chat.photo-selector.album-selector.style :as style]
    [utils.i18n :as i18n]
@@ -61,15 +62,25 @@

 (defn- f-album-selector
  [{:keys [scroll-enabled on-scroll]} album? selected-album top]
-  (let [albums          (rf/sub [:camera-roll/albums])
-        albums-sections [{:title no-title :data (:smart-albums albums)}
-                         {:title (i18n/label :t/my-albums) :data (:my-albums albums)}]
-        window-height   (:height (rn/get-window))]
+  (let [albums                     (rf/sub [:camera-roll/albums])
+        total-photos-count-android (rf/sub [:camera-roll/total-photos-count-android])
+        total-photos-count-ios     (rf/sub [:camera-roll/total-photos-count-ios])
+        albums-sections            [{:title no-title
+                                     :data  [(assoc (:smart-album albums)
+                                                    :count
+                                                    (if platform/ios?
+                                                      total-photos-count-ios
+                                                      total-photos-count-android))]}
+                                    {:title (i18n/label :t/my-albums)
+                                     :data  (:my-albums albums)}]
+        window-height              (:height (rn/get-window))]
    [reanimated/view {:style (style/selector-container top)}
     [gesture/section-list
      {:data                           albums-sections
       :sections                       albums-sections
-       :render-data                    {:album? album? :selected-album selected-album :top top}
+       :render-data                    {:album?         album?
+                                        :selected-album selected-album
+                                        :top            top}
       :render-fn                      render-album
       :sticky-section-headers-enabled false
       :render-section-header-fn       section-header
@@ -6,6 +6,7 @@
    [react-native.core :as rn]
    [react-native.image-resizer :as image-resizer]
    [react-native.permissions :as permissions]
+    [react-native.platform :as platform]
    [status-im2.constants :as constants]
    [taoensso.timbre :as log]
    [utils.i18n :as i18n]
@@ -56,25 +57,25 @@

 (defn get-albums
  [callback]
-  (let [albums (atom {:smart-albums []
-                      :my-albums    []})]
+  (let [albums (atom {:smart-album []
+                      :my-albums   []})]
    ;; Get the "recent" album first
    (cameraroll/get-photos
-     {:first 1 :groupTypes "All"}
+     {:first 1 :groupTypes "All" :assetType "Photos"}
     (fn [res-recent]
       (swap! albums assoc
-         :smart-albums
-         [{:title (i18n/label :t/recent)
-           :uri   (get-in (first (:edges res-recent)) [:node :image :uri])}])
+         :smart-album
+         {:title (i18n/label :t/recent)
+          :uri   (get-in (first (:edges res-recent)) [:node :image :uri])})
       ;; Get albums, then loop over albums and get each one's cover (first photo)
       (cameraroll/get-albums
-        {:assetType :Photos}
+        {:assetType "Photos"}
        (fn [res-albums]
          (let [response-count (count res-albums)]
            (if (pos? response-count)
              (doseq [album res-albums]
                (cameraroll/get-photos
-                 {:first 1 :groupTypes "Albums" :groupName (:title album)}
+                 {:first 1 :groupTypes "Albums" :groupName (:title album) :assetType "Photos"}
                 (fn [res]
                   (let [uri (get-in (first (:edges res)) [:node :image :uri])]
                     (swap! albums update :my-albums conj (merge album {:uri uri}))
@@ -83,21 +84,42 @@
                       (callback @albums))))))
              (callback @albums)))))))))

+(defn get-photos-count-ios-fx
+  [cb]
+  (cameraroll/get-photos-count-ios cb))
+
 (re-frame/reg-fx
 :camera-roll-get-albums
 (fn []
   (get-albums #(re-frame/dispatch [:on-camera-roll-get-albums %]))))

+(re-frame/reg-fx
+ :camera-roll-get-photos-count-ios
+ (fn []
+   (when platform/ios?
+     (get-photos-count-ios-fx #(re-frame/dispatch [:on-camera-roll-get-images-count-ios %])))))
+
 (rf/defn on-camera-roll-get-albums
  {:events [:on-camera-roll-get-albums]}
  [{:keys [db]} albums]
-  {:db (assoc db :camera-roll/albums albums)})
+  {:db       (assoc db :camera-roll/albums albums)
+   :dispatch [:photo-selector/camera-roll-get-ios-photo-count]})
+
+(rf/defn get-photos-count-ios
+  {:events [:on-camera-roll-get-images-count-ios]}
+  [{:keys [db]} count]
+  {:db (assoc db :camera-roll/ios-images-count count)})

 (rf/defn camera-roll-get-albums
  {:events [:photo-selector/camera-roll-get-albums]}
  [_]
  {:camera-roll-get-albums nil})

+(rf/defn camera-roll-get-ios-photo-count
+  {:events [:photo-selector/camera-roll-get-ios-photo-count]}
+  [_]
+  {:camera-roll-get-photos-count-ios nil})
+
 (rf/defn camera-roll-select-album
  {:events [:chat.ui/camera-roll-select-album]}
  [{:keys [db]} album]
@@ -125,7 +125,7 @@
            [album-selector/album-selector sheet album? selected-album top])
          [:<>
           [gesture/flat-list
-            {:key-fn                  identity
+            {:key-fn                  #(hash (:uri %))
             :render-fn               render-image
             :render-data             {:window-width window-width :selected selected-images}
             :data                    camera-roll-photos
@@ -14,6 +14,7 @@
    [status-im2.contexts.communities.actions.community-options.view :as options]
    [status-im2.contexts.communities.overview.style :as style]
    [status-im2.contexts.communities.overview.utils :as utils]
+    [utils.debounce :as debounce]
    [utils.i18n :as i18n]
    [utils.re-frame :as rf]))

@@ -210,7 +211,7 @@
   (when (and (not locked?) id)
     {:on-press      (fn []
                       (rf/dispatch [:dismiss-keyboard])
-                       (rf/dispatch [:chat/navigate-to-chat (str community-id id)]))
+                       (debounce/dispatch-and-chill [:chat/navigate-to-chat (str community-id id)] 1000))
      :on-long-press #(rf/dispatch
                       [:show-bottom-sheet
                        {:content (fn []
@@ -2,6 +2,7 @@
  (:require
    [clojure.string :as string]
    [oops.core :as oops]
+    [quo.components.colors.color.constants :as constants]
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [react-native.blur :as blur]
@@ -33,6 +34,12 @@
 (defn length-not-valid [s] (< (count (string/trim (str s))) min-length))
 (def scroll-view-height (reagent/atom 0))
 (def content-container-height (reagent/atom 0))
+(defn iphone-11-Pro-20-pixel-from-width
+  [window-width]
+  ;; Divide iPhone 11 Pro VW by the desired value
+  (let [calculate-ratio (/ constants/IPHONE_11_PRO_VIEWPORT_WIDTH 20)]
+    ;; Divide window width by the ratio to get a dynamic value. Based on the VW width
+    (int (/ window-width calculate-ratio))))

 (defn validation-message
  [s]
@@ -131,7 +138,8 @@
          {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
          show-background?                         (show-button-background keyboard-height
                                                                           keyboard-shown
-                                                                           @content-scroll-y)]
+                                                                           @content-scroll-y)
+          {window-width :width}                    (rn/get-window)]
      [rn/view {:style style/page-container}
       [quo/page-nav
        {:margin-top navigation-bar-top
@@ -194,11 +202,13 @@
            {:size   :paragraph-2
             :weight :medium
             :style  style/color-title}
-            (i18n/label :t/accent-colour)]
-           [quo/color-picker
-            {:blur?            true
-             :default-selected :blue
-             :on-change        on-change}]]]]]
+            (i18n/label :t/accent-colour)]]]
+         [quo/color-picker
+          {:blur?            true
+           :default-selected :blue
+           :on-change        on-change
+           :window-width     window-width
+           :container-style  {:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]]

       [rn/keyboard-avoiding-view
        {:style          {:position :absolute
@@ -1,6 +1,4 @@
-(ns status-im2.contexts.onboarding.welcome.style
-  (:require
-    [quo.foundations.colors :as colors]))
+(ns status-im2.contexts.onboarding.welcome.style)

 (def default-margin 20)

@@ -9,16 +7,27 @@
  {:flex        1
   :padding-top (:top insets)})

-(def page-illustration
-  {:flex              1
-   :background-color  colors/danger-50
-   :align-items       :center
-   :margin-horizontal default-margin
-   :border-radius     20
-   :margin-top        default-margin
-   :justify-content   :center})
+(defn page-illustration
+  [width]
+  {:resize-mode   :stretch
+   :resize-method :scale
+   :width         width
+   :margin-top    12
+   :margin-bottom 4})

 (defn buttons
  [insets]
-  {:margin        default-margin
-   :margin-bottom (+ 14 (:bottom insets))})
+  {:position      :absolute
+   :left          0
+   :right         0
+   :padding-left  default-margin
+   :padding-right default-margin
+   :bottom        (+ 12 (:bottom insets))})
+
+(def bottom-shadow
+  {:position :absolute
+   :height   64
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})
@@ -1,9 +1,12 @@
 (ns status-im2.contexts.onboarding.welcome.view
  (:require
    [quo.core :as quo]
+    [quo.foundations.colors :as colors]
    [re-frame.core :as re-frame]
    [react-native.core :as rn]
+    [react-native.linear-gradient :as linear-gradient]
    [react-native.safe-area :as safe-area]
+    [status-im2.common.resources :as resources]
    [status-im2.constants :as constants]
    [status-im2.contexts.onboarding.welcome.style :as style]
    [utils.i18n :as i18n]
@@ -30,6 +33,7 @@
  []
  (let [profile-color         (rf/sub [:onboarding-2/customization-color])
        {:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
+        window                (rf/sub [:dimensions/window])
        insets                (safe-area/get-insets)]
    [rn/view {:style (style/page-container insets)}
     (when (nil? status-type)
@@ -40,10 +44,14 @@
       :icon-name  :i/arrow-left
       :on-press   #(rf/dispatch [:navigate-back-within-stack :enable-notifications])}]
     [page-title]
-     [rn/view {:style style/page-illustration}
-      [quo/text
-       "Illustration here"]]
+     [rn/image
+      {:style  (style/page-illustration (:width window))
+       :source (resources/get-image :welcome-illustration)}]
     [rn/view {:style (style/buttons insets)}
+      (when rn/small-screen?
+        [linear-gradient/linear-gradient
+         {:style  style/bottom-shadow
+          :colors [colors/neutral-100-opa-0 colors/neutral-100-opa-80]}])
      [quo/button
       {:on-press            (fn []
                               (rf/dispatch [:init-root :shell-stack])
@@ -22,6 +22,7 @@
    [status-im2.contexts.profile.rpc :as profile.rpc]
    [status-im2.contexts.push-notifications.events :as notifications]
    [status-im2.contexts.shell.activity-center.events :as activity-center]
+    [status-im2.contexts.wallet.events :as wallet]
    [status-im2.navigation.events :as navigation]
    [taoensso.timbre :as log]
    [utils.re-frame :as rf]
@@ -91,6 +92,7 @@
              (activity-center/notifications-fetch-pending-contact-requests)
              (activity-center/update-seen-state)
              (activity-center/notifications-fetch-unread-count)
+              (wallet/get-ethereum-chains)
              (redirect-to-root))))

 ;; login phase 2, we want to load and show chats faster so we split login into 2 phases
@@ -188,14 +190,16 @@
                            native-module/sha3)]
    {:json-rpc/call [{:method     "accounts_verifyPassword"
                      :params     [hashed-password]
-                      :on-success #(do (rf/dispatch [:profile.login/verified-database-password %]) (cb))
+                      :on-success #(rf/dispatch [:profile.login/verified-database-password % cb])
                      :on-error   #(log/error "accounts_verifyPassword error" %)}]}))

 (rf/defn verify-database-password-success
  {:events [:profile.login/verified-database-password]}
-  [{:keys [db] :as cofx} valid?]
+  [{:keys [db] :as cofx} valid? callback]
  (if valid?
    (do
+      (when (fn? callback)
+        (callback))
      {:db (update db
                   :profile/login
                   dissoc
@@ -42,8 +42,10 @@
  [:<>
   [quo/text {:style {:margin-right 4}} "Hold"]
   [quo/token-tag
-    {:size          :small
-     :token-img-src (quo.resources/get-token :eth)} "ETH"]
+    {:size          :size-24
+     :token-img-src (quo.resources/get-token :eth)
+     :token-value   5
+     :token-symbol  "ETH"}]
   [quo/text {:style {:margin-left 4}} "To post"]])

 (defn example-3
@@ -0,0 +1,55 @@
+(ns status-im2.contexts.quo-preview.list-items.token-network
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def networks-list
+  [{:source (quo.resources/get-network :ethereum)}
+   {:source (quo.resources/get-network :optimism)}
+   {:source (quo.resources/get-network :arbitrum)}
+   {:source (quo.resources/get-network :zksync)}
+   {:source (quo.resources/get-network :polygon)}])
+
+(def descriptor
+  [{:key     :state
+    :type    :select
+    :options [{:key :default}
+              {:key :active}
+              {:key :selected}]}
+   {:key     :token
+    :type    :select
+    :options [{:value :eth
+               :key   (quo.resources/get-token :eth)}
+              {:value :snt
+               :key   (quo.resources/get-token :snt)}
+              {:value :dai
+               :key   (quo.resources/get-token :dai)}]}
+   {:key  :label
+    :type :text}
+   {:key  :token-value
+    :type :text}
+   {:key  :fiat-value
+    :type :text}
+   (preview/customization-color-option)
+   {:key  :show-alert-on-press?
+    :type :boolean}])
+
+(defn preview-token-network
+  []
+  (let [state (reagent/atom {:token               (quo.resources/get-token :snt)
+                             :label               "Status"
+                             :token-value         "0.00 SNT"
+                             :fiat-value          "€0.00"
+                             :networks            networks-list
+                             :state               :default
+                             :customization-color :blue})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/token-network
+        (merge @state
+               (when (:show-alert-on-press? @state)
+                 {:on-press #(js/alert "Pressed!")}))]])))
@@ -92,6 +92,7 @@
    [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
    [status-im2.contexts.quo-preview.list-items.saved-address :as saved-address]
    [status-im2.contexts.quo-preview.list-items.saved-contact-address :as saved-contact-address]
+    [status-im2.contexts.quo-preview.list-items.token-network :as token-network]
    [status-im2.contexts.quo-preview.list-items.token-value :as token-value]
    [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
    [status-im2.contexts.quo-preview.loaders.skeleton-list :as skeleton-list]
@@ -151,6 +152,7 @@
    [status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
    [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
    [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
+    [status-im2.contexts.quo-preview.tags.tag :as tag]
    [status-im2.contexts.quo-preview.tags.tags :as tags]
    [status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
    [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
@@ -164,6 +166,7 @@
    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
    [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
    [status-im2.contexts.quo-preview.wallet.network-link :as network-link]
+    [status-im2.contexts.quo-preview.wallet.network-routing :as network-routing]
    [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar]
    [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
    [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
@@ -327,6 +330,8 @@
                        :component saved-address/view}
                       {:name      :saved-contact-address
                        :component saved-contact-address/view}
+                       {:name      :token-network
+                        :component token-network/preview-token-network}
                       {:name      :token-value
                        :component token-value/view}
                       {:name      :user-list
@@ -408,31 +413,33 @@
   :switchers         [{:name      :group-messaging-card
                        :component group-messaging-card/view}
                       {:name      :switcher-cards
-                        :component switcher-cards/preview-switcher-cards}]
+                        :component switcher-cards/view}]
   :tabs              [{:name      :segmented
-                        :component segmented/preview-segmented}
+                        :component segmented/view}
                       {:name      :tabs
-                        :component tabs/preview-tabs}
+                        :component tabs/view}
                       {:name      :account-selector
-                        :component account-selector/preview-this}]
+                        :component account-selector/view}]
   :tags              [{:name      :context-tags
-                        :component context-tags/preview-context-tags}
+                        :component context-tags/view}
                       {:name      :network-tags
-                        :component network-tags/preview}
+                        :component network-tags/view}
                       {:name      :number-tag
-                        :component number-tag/preview}
+                        :component number-tag/view}
                       {:name      :permission-tag
-                        :component permission-tag/preview-permission-tag}
+                        :component permission-tag/view}
                       {:name      :status-tags
-                        :component status-tags/preview-status-tags}
+                        :component status-tags/view}
+                       {:name      :tag
+                        :component tag/view}
                       {:name      :tags
-                        :component tags/preview-tags}
+                        :component tags/view}
                       {:name      :tiny-tag
                        :component tiny-tag/preview-tiny-tag}
                       {:name      :token-tag
-                        :component token-tag/preview-token-tag}]
+                        :component token-tag/view}]
   :text-combinations [{:name      :text-combinations
-                        :component text-combinations/preview}]
+                        :component text-combinations/view}]
   :wallet            [{:name :account-card :component account-card/preview-account-card}
                       {:name :account-origin :component account-origin/view}
                       {:name      :account-overview
@@ -441,6 +448,7 @@
                       {:name :network-amount :component network-amount/preview}
                       {:name :network-bridge :component network-bridge/preview}
                       {:name :network-link :component network-link/preview}
+                       {:name :network-routing :component network-routing/preview}
                       {:name :progress-bar :component progress-bar/preview}
                       {:name :summary-info :component summary-info/preview}
                       {:name :token-input :component token-input/preview}
@@ -6,46 +6,27 @@
    [status-im2.contexts.quo-preview.preview :as preview]))

 (def descriptor
-  [{:label "Title"
-    :key   :title
-    :type  :text}
-   {:label   "Status"
-    :key     :status
+  [{:key :title :type :text}
+   {:key     :status
    :type    :select
-    :options [{:key   :read
-               :value :read}
-              {:key   :unread
-               :value :unread}
-              {:key   :mention
-               :value :mention}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-   {:label   "Type"
-    :key     :type
+    :options [{:key :read}
+              {:key :unread}
+              {:key :mention}]}
+   {:key :counter-label :type :text}
+   {:key     :type
    :type    :select
    :options [{:key   :message
               :value :text}
-              {:key   :photo
-               :value :photo}
-              {:key   :sticker
-               :value :sticker}
-              {:key   :gif
-               :value :gif}
-              {:key   :audio
-               :value :audio}
-              {:key   :community
-               :value :community}
-              {:key   :link
-               :value :link}
+              {:key :photo}
+              {:key :sticker}
+              {:key :gif}
+              {:key :audio}
+              {:key :community}
+              {:key :link}
              {:key   :code
               :value :code-snippet}]}
-   {:label "Last Message"
-    :key   :last-message
-    :type  :text}
-   {:label "Avatar:"
-    :key   :avatar?
-    :type  :boolean}
+   {:key :last-message :type :text}
+   {:key :avatar? :type :boolean}
   (preview/customization-color-option)])

 ;; Mock data
@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.switcher.switcher-cards
  (:require
    [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im2.common.resources :as resources]
    [status-im2.constants :as constants]
@@ -10,8 +9,7 @@
    [status-im2.contexts.shell.jump-to.constants :as shell.constants]))

 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
    :type    :select
    :options [{:key   shell.constants/communities-discover
               :value "Communities Discover"}
@@ -33,27 +31,15 @@
               :value "Wallet Graph"}
              {:key   shell.constants/empty-card
               :value "Empty Card"}]}
-   {:label "Title"
-    :key   :title
-    :type  :text}
-   {:label "New Notifications?"
-    :key   :new-notifications?
-    :type  :boolean}
-   {:label "Banner?"
-    :key   :banner?
-    :type  :boolean}
-   {:label   "Notification Indicator"
-    :key     :notification-indicator
+   {:key :title :type :text}
+   {:key :new-notifications? :type :boolean}
+   {:key :banner? :type :boolean}
+   {:key     :notification-indicator
    :type    :select
-    :options [{:key   :counter
-               :value :counter}
-              {:key   :unread-dot
-               :value :unread-dot}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-   {:label   "Content Type"
-    :key     :content-type
+    :options [{:key :counter}
+              {:key :unread-dot}]}
+   {:key :counter-label :type :text}
+   {:key     :content-type
    :type    :select
    :options [{:key   constants/content-type-text
               :value :text}
@@ -69,21 +55,10 @@
               :value :community}
              {:key   constants/content-type-link
               :value :link}]}
-   {:label "Last Message"
-    :key   :last-message
-    :type  :text}
-   {:label "Customization"
-    :key :customization-color
-    :type :select
-    :options
-    (map
-     (fn [c]
-       {:key   c
-        :value c})
-     (keys colors/customization))}])
+   {:key :last-message :type :text}
+   (preview/customization-color-option)])

 ;; Mocked Data
-
 (def banner (resources/get-mock-image :community-banner))
 (def sticker {:source (resources/get-mock-image :sticker)})
 (def community-avatar {:source (resources/get-mock-image :community-logo)})
@@ -151,7 +126,7 @@
     :else
     {})))

-(defn preview-switcher-cards
+(defn view
  []
  (let [state (reagent/atom {:type                   shell.constants/private-group-chat-card
                             :title                  "Alisher Yakupov"
@@ -165,10 +140,7 @@
                             :preview-label-color    colors/white})]
    (fn []
      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [switcher-cards/card (get-mock-data @state)]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60}}
+       [switcher-cards/card (get-mock-data @state)]])))
@@ -1,23 +1,14 @@
 (ns status-im2.contexts.quo-preview.tabs.account-selector
  (:require
-    [quo.components.tabs.account-selector :as quo]
-    [react-native.core :as rn]
+    [quo.core :as quo]
    [reagent.core :as reagent]
    [status-im2.contexts.quo-preview.preview :as preview]))

 (def descriptor
-  [{:label "Show Label?:"
-    :key   :show-label?
-    :type  :boolean}
-   {:label "Transparent Background?:"
-    :key   :transparent?
-    :type  :boolean}
-   {:label "Account Text"
-    :key   :account-text
-    :type  :text}
-   {:label "Label Text"
-    :key   :label-text
-    :type  :text}])
+  [{:key :show-label? :type :boolean}
+   {:key :transparent? :type :boolean}
+   {:key :account-text :type :text}
+   {:key :label-text :type :text}])

 ;; keeping this unused data structure in the code for now
 ;; will reference them when I introduce multiple account support
@@ -46,7 +37,7 @@
    :account-emoji "🍟"
    :label-text    "Label 3"}])

-(defn preview-this
+(defn view
  []
  (let [state (reagent/atom {:show-label?   true
                             :transparent?  false
@@ -56,10 +47,7 @@
                             :label-text    "Label"})]
    (fn []
      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/account-selector @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60}}
+       [quo/account-selector @state]])))
@@ -1,50 +1,44 @@
 (ns status-im2.contexts.quo-preview.tabs.segmented-tab
  (:require
-    [quo.components.tabs.segmented-tab :as quo]
-    [quo.theme :as theme]
+    [quo.core :as quo]
    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im2.contexts.quo-preview.preview :as preview]))

 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
    :type    :select
    :options [{:key   28
               :value "28"}
              {:key   20
               :value "20"}]}
-   {:label "Blur?"
-    :key   :blur?
-    :type  :boolean}])
+   {:key  :blur?
+    :type :boolean}])

-(defn preview-segmented
+(defn view
  []
  (let [state (reagent/atom {:size  32
                             :blur? false})]
    (fn []
      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [preview/blur-view
-         {:show-blur-background? (:blur? @state)
-          :height                200
-          :style                 {:width "100%"}
-          :blur-view-props       {:blur-type (theme/get-theme)}}
-         [:<>
-          [quo/segmented-control
-           (merge @state
-                  {:default-active 1
-                   :data           [{:id 1 :label "Tab 1"}
-                                    {:id 2 :label "Tab 2"}
-                                    {:id 3 :label "Tab 3"}
-                                    {:id 4 :label "Tab 4"}]
-                   :on-change      #(println "Active tab" %)})]
-          [rn/view {:style {:padding-top 24}}
-           [quo/segmented-control
-            (merge @state
-                   {:default-active 1
-                    :data           [{:id 1 :label "Tab 1"}
-                                     {:id 2 :label "Tab 2"}]
-                    :on-change      #(println "Active tab" %)})]]]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :blur?                     (:blur? @state)
+        :show-blur-background?     true
+        :component-container-style {:padding-vertical 60}}
+       [:<>
+        [quo/segmented-control
+         (assoc @state
+                :default-active 1
+                :data           [{:id 1 :label "Tab 1"}
+                                 {:id 2 :label "Tab 2"}
+                                 {:id 3 :label "Tab 3"}
+                                 {:id 4 :label "Tab 4"}]
+                :on-change      #(println "Active tab" %))]
+        [rn/view {:style {:padding-top 24}}
+         [quo/segmented-control
+          (assoc @state
+                 :default-active 1
+                 :data           [{:id 1 :label "Tab 1"}
+                                  {:id 2 :label "Tab 2"}]
+                 :on-change      #(println "Active tab" %))]]]])))
@@ -1,24 +1,18 @@
 (ns status-im2.contexts.quo-preview.tabs.tabs
  (:require
    [quo.core :as quo]
-    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im2.contexts.quo-preview.preview :as preview]))

 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
    :type    :select
    :options [{:key   32
               :value "32"}
              {:key   24
               :value "24"}]}
-   {:label "Show unread indicators?"
-    :key   :unread-indicators?
-    :type  :boolean}
-   {:label "Scrollable:"
-    :key   :scrollable?
-    :type  :boolean}])
+   {:key :unread-indicators? :type :boolean}
+   {:key :scrollable? :type :boolean}])

 (defn generate-tab-items
  [length unread-indicators?]
@@ -28,27 +22,25 @@
     :label             (str "Tab " (inc index))
     :notification-dot? (and unread-indicators? (zero? (rem index 2)))}))

-(defn preview-tabs
+(defn view
  []
  (let [state (reagent/atom {:size        32
                             :scrollable? false})]
    (fn []
      [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical   60
-          :padding-horizontal 20
-          :flex-direction     :row
-          :justify-content    :center}
-         [quo/tabs
-          (merge @state
-                 {:default-active 1
-                  :data           (generate-tab-items (if (:scrollable? @state) 15 4)
-                                                      (:unread-indicators? @state))
-                  :on-change      #(println "Active tab" %)}
-                 (when (:scrollable? @state)
-                   {:scroll-on-press?    true
-                    :fade-end-percentage 0.4
-                    :fade-end?           true}))]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical   60
+                                    :padding-horizontal 20
+                                    :flex-direction     :row
+                                    :justify-content    :center}}
+       [quo/tabs
+        (merge @state
+               {:default-active 1
+                :data           (generate-tab-items (if (:scrollable? @state) 15 4)
+                                                    (:unread-indicators? @state))
+                :on-change      #(println "Active tab" %)}
+               (when (:scrollable? @state)
+                 {:scroll-on-press?    true
+                  :fade-end-percentage 0.4
+                  :fade-end?           true}))]])))
@@ -21,15 +21,13 @@
    :value "User pic female 2"}])

 (def size-descriptor
-  {:label   "Size"
-   :key     :size
+  {:key     :size
   :type    :select
   :options [{:key 24}
             {:key 32}]})

 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
    :type    :select
    :options [{:key :default}
              {:key :multiuser}
@@ -66,8 +64,7 @@
               nil
               (resources/mock-images :user-picture-female2)
               nil]]
-    [{:label   "users"
-      :key     :users
+    [{:key     :users
      :type    :select
      :options (map (fn [idx]
                      {:key   (mapv (fn [picture idx-name]
@@ -81,44 +78,36 @@

 (def group-descriptor
  [size-descriptor
-   {:label "Group"
-    :key   :group-name
-    :type  :text}])
+   {:key  :group-name
+    :type :text}])

 (def channel-descriptor
  [size-descriptor
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}
-   {:label "Channel name"
-    :key   :channel-name
-    :type  :text}])
+   {:key  :community-name
+    :type :text}
+   {:key  :channel-name
+    :type :text}])

 (def community-descriptor
  [size-descriptor
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}])
+   {:key  :community-name
+    :type :text}])

 (def token-descriptor
  [size-descriptor
-   {:label "Amount"
-    :key   :amount
-    :type  :text}
-   {:label "Token name"
-    :key   :token-name
-    :type  :text}])
+   {:key  :amount
+    :type :text}
+   {:key  :token-name
+    :type :text}])

 (def network-descriptor
  [size-descriptor
-   {:label "Network name"
-    :key   :network-name
-    :type  :text}])
+   {:key  :network-name
+    :type :text}])

 (def multinetwork-descriptor
  (let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
-    [{:label   "Networks"
-      :key     :networks
+    [{:key     :networks
      :type    :select
      :options (map (fn [size]
                      {:key   (take size networks)
@@ -127,11 +116,9 @@

 (def account-descriptor
  [size-descriptor
-   {:label "Account name"
-    :key   :account-name
-    :type  :text}
-   {:label   "Emoji"
-    :key     :emoji
+   {:key  :account-name
+    :type :text}
+   {:key     :emoji
    :type    :select
    :options [{:key "🐷" :value "🐷"}
              {:key "🍇" :value "🍇"}
@@ -139,39 +126,63 @@

 (def collectible-descriptor
  [size-descriptor
-   {:label "Collectible name"
-    :key   :collectible-name
-    :type  :text}
-   {:label "Collectible number"
-    :key   :collectible-number
-    :type  :text}])
+   {:key  :collectible-name
+    :type :text}
+   {:key  :collectible-number
+    :type :text}])

 (def address-descriptor
  [size-descriptor])

 (def icon-descriptor
  [size-descriptor
-   {:label "Context"
-    :key   :context
-    :type  :text}
-   {:label   "Icon"
-    :key     :icon
+   {:key  :context
+    :type :text}
+   {:key     :icon
    :type    :select
    :options [{:key :i/placeholder :value "Placeholder"}
              {:key :i/add :value "Add"}
              {:key :i/alert :value "Alert"}]}])

 (def audio-descriptor
-  [{:label "Duration"
-    :key   :duration
-    :type  :text}])
+  [{:key  :duration
+    :type :text}])

-(defn preview-context-tags
+(defn f-view
+  [state type]
+  (rn/use-effect (fn []
+                   (when (#{:multiuser :multinetwork :audio} @type)
+                     (swap! state assoc :size 24)))
+                 [@type])
+  [preview/preview-container
+   {:state                 state
+    :descriptor            (concat descriptor
+                                   (case (:type @state)
+                                     :default      default-descriptor
+                                     :multiuser    multiuser-descriptor
+                                     :group        group-descriptor
+                                     :channel      channel-descriptor
+                                     :community    community-descriptor
+                                     :token        token-descriptor
+                                     :network      network-descriptor
+                                     :multinetwork multinetwork-descriptor
+                                     :account      account-descriptor
+                                     :collectible  collectible-descriptor
+                                     :address      address-descriptor
+                                     :icon         icon-descriptor
+                                     :audio        audio-descriptor
+                                     default-descriptor))
+    :blur-height           80
+    :blur?                 (:blur? @state)
+    :show-blur-background? true}
+   [rn/view {:style {:align-items :center}}
+    [quo/context-tag @state]]])
+
+(defn view
  []
  (let [state
        (reagent/atom
-         {:label               "Name"
-          :size                32
+         {:size                32
          :type                :group
          :blur?               false
          :state               :selected
@@ -208,32 +219,4 @@
          :context             "Context"
          :duration            "00:32"})
        type (reagent/cursor state [:type])]
-    [:f>
-     (fn []
-       (rn/use-effect (fn []
-                        (when (#{:multiuser :multinetwork :audio} @type)
-                          (swap! state assoc :size 24)))
-                      [@type])
-       [preview/preview-container
-        {:state                 state
-         :descriptor            (concat descriptor
-                                        (case (:type @state)
-                                          :default      default-descriptor
-                                          :multiuser    multiuser-descriptor
-                                          :group        group-descriptor
-                                          :channel      channel-descriptor
-                                          :community    community-descriptor
-                                          :token        token-descriptor
-                                          :network      network-descriptor
-                                          :multinetwork multinetwork-descriptor
-                                          :account      account-descriptor
-                                          :collectible  collectible-descriptor
-                                          :address      address-descriptor
-                                          :icon         icon-descriptor
-                                          :audio        audio-descriptor
-                                          default-descriptor))
-         :blur-height           80
-         :blur?                 true
-         :show-blur-background? (:blur? @state)}
-        [rn/view {:style {:align-items :center}}
-         [quo/context-tag @state]]])]))
+    [:f> f-view state type]))
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tumanov-alex	61382e8eef	Add a button to address watch screen; Add account creation screen	2023-10-27 21:14:43 +02:00
Jamie Caprani	06c31f3a12	chore: add sub to get network info (#17650 )	2023-10-27 03:54:58 -07:00
Lungu Cristian	954373105d	Visual debugging of components (#17729 ) * feat: debug/show components from the REPL * ref: some renames and cleanup * chore: removed comments/imports * feat: added remount on every eval & small changes * doc: added tip to debugging doc * doc: formatting * doc: more formatting * fix: fixed docs and other review comments * fix: moved & renamed into the dev.component-preview ns * style: adjusted debugging readme spacing * fix: removed trailing line	2023-10-27 13:14:01 +03:00
Mohsen	2aeafa30bd	[#17423 ] fix: update sync flow (#17731 )	2023-10-27 11:16:56 +03:00
Parvesh Monu	5920c35677	Fixed Some Grammatical Errors in README.md (#17716 ) Author: Janumala Akhilendra <82641474+JanumalaAkhilendra@users.noreply.github.com>	2023-10-27 13:17:16 +05:30
Ulises Manuel	1f71883fa4	[#16755 ] - Network routing component (#17457 ) * Add network routing component & animations * Add basic tests and accessibility labels	2023-10-26 16:07:44 -06:00
Siddarth Kumar	c9b3196203	improve make component-test robustness (#17743 ) Many times devs run `make component-test` or `make component-test-watch` when there is already a metro or clojure terminal running on their system. This causes weird behaviour and it is advised to not run these commands together. This commit prevents that and shows a warning.	2023-10-26 23:24:23 +05:30
mmilad75	6ebd5b421c	Fix account-card component UI (#17589 ) * add new type * fix lint issues * add tests * refactor get-test-data function * resolve comments * fix imports * resolve comments * fix lint issues * remove extra code * fix height	2023-10-26 16:46:24 +03:30
Ibrahem Khalil	901644e023	Make color selector take full 0device width to match Figma and add dynamic width (#17465 )	2023-10-26 13:20:40 +03:00
Mohsen	df256bf2b4	[#17534 ] fix: Add contact scan QR screen back handler issue (#17694 )	2023-10-26 12:38:47 +03:00
Jamie Caprani	56492949f1	feat (wallet): add ability to create new account (#17496 )	2023-10-26 01:45:33 -07:00
frank	ab2ad0ec12	Don't sync AC notifications, only decisions/state (#17600 ) * fix outgoing contact request state not show correctly * update status-go-version.json	2023-10-26 14:44:06 +08:00
Ibrahem Khalil	fe2272b703	Fix Composer not focusing on edit/reply (#17640 )	2023-10-26 05:43:49 +03:00
Icaro Motta	c0b21aa315	Document how to auto-format Clojure files in VSCode with zprint (#17719 ) Document how a VSCode user can configure their editor to auto-format Clojure(Script) files that respect all the formatter (zprint) settings specified in status-mobile/.zprintrc. The result should be that on every file save, the file should be identically formatted as if you used make lint-fix, at least the part about zprint. If lint-fix does other things now or in the future that are outside the scope of zprint, those won't be covered by the VSCode extension.	2023-10-25 23:19:56 -03:00
Nikolay	876b020a32	Token network component (#17667 )	2023-10-25 13:35:42 -07:00
Mohsen	8ed7059aa9	[#17230 ] fix: fetch group member info (#17726 )	2023-10-25 21:26:34 +03:00
Omar Basem	125c117bac	wallet: token value drawer (#17730 ) * wallet: token value drawer	2023-10-25 15:45:45 +04:00
Parvesh Monu	078976806a	Don't display "Add Unknown as contact to send a Message" if chat is not loaded (#17704 )	2023-10-25 16:38:01 +05:30
Omar Basem	07dd42a7d3	Wallet: Network Preferences drawer (#17710 ) * Wallet: Network Preferences drawer	2023-10-25 14:55:17 +04:00
Ajay Sivan	3197adf855	Refactor tag preview screens to new api (#17549 )	2023-10-25 03:19:37 -07:00
Ibrahem Khalil	8296bda85b	Fix recent album not showing count (#17498 )	2023-10-24 17:23:16 +03:00
flexsurfer	ca2b3abb1c	old wallet fixes (#17697 )	2023-10-24 15:36:10 +03:00
Ibrahem Khalil	b910f05286	Update `react-native-camera-kit` to latest beta to enable programmitcal zooming (#17708 )	2023-10-24 11:48:36 +03:00
Mohsen	c42fc5153d	[#17288 ] refactor: migrate previews to new api (#17695 )	2023-10-23 20:40:22 +03:00
codemaster	221c501279	fix: remove qa-only features(unicorn, skull) (#17594 )	2023-10-23 22:33:09 +10:00
diana	071d8f0925	e2e: new link format	2023-10-23 11:26:53 +02:00