overlay fix

https://github.com/status-im/status-go/compare/7662cd61...5aad6fa0

Makefile

@@ -272,7 +272,7 @@ run-android: export TARGET := android
 run-android: ##@run Build Android APK and start it on the device
 	npx react-native run-android --appIdSuffix debug
 
-SIMULATOR=
+SIMULATOR=iPhone 13
 run-ios: export TARGET := ios
 run-ios: ##@run Build iOS app and start it in a simulator/device
 ifneq ("$(SIMULATOR)", "")
@@ -287,6 +287,7 @@ endif
 
 lint: export TARGET := clojure
 lint: ##@test Run code style checks
+	sh scripts/lint-re-frame-in-quo-components.sh && \
 	clj-kondo --config .clj-kondo/config.edn --cache false --lint src && \
 	TARGETS=$$(git diff --diff-filter=d --cached --name-only src && echo src) && \
 	clojure -Scp "$$CLASS_PATH" -m cljfmt.main check --indents indentation.edn $$TARGETS

README.md

@@ -10,11 +10,11 @@ Join us in creating a browser, messenger, and gateway to a decentralized world.
 
 ## Why?
 
-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 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 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 provides 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 provides us 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.
 
@@ -22,29 +22,37 @@ If this interests you, **help us make Status a reality** - anyone can contribute
 
 Go straight to the [docs](https://status.im/docs) or [join our chat](https://join.status.im/chat/public/status) and choose what interests you:
 
-- **Developer**
-Developers are the heart of software and to keep Status beating we need all the help we can get! If you're looking to code in ClojureScript or Golang then Status is the project for you! We use React Native and there is even some Java/Objective-C too!  
-Want to learn more about it? Start by reading our [Developer Introduction](https://status.im/developer_tools/) which guides you through the technology stack and start browsing [beginner issues](https://github.com/status-im/status-mobile/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aissue%20label%3A%22good%20first%20issue%22%20). Then you can read how to [Build Status](https://status.im/technical/build_status/), which talks about managing project dependencies, coding guidelines and testing procedures.
+- **Developer** Developers are the heart of software and to keep Status beating
+we need all the help we can get! If you're looking to code in ClojureScript or
+Golang then Status is the project for you! We use React Native and there is even
+some Java/Objective-C too! Want to learn more about it? Start by reading our
+[Developer Introduction](https://status.im/developer_tools/) which guides you
+through the technology stack and start browsing [beginner
+issues](https://github.com/status-im/status-mobile/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aissue%20label%3A%22good%20first%20issue%22%20).
+Then you can read how to [Build
+Status](https://status.im/technical/build_status/), which talks about managing
+project dependencies, coding guidelines and testing procedures. The [doc/](doc/)
+directory also has valuable information for contributors.
 
-- **Community Management**  
+- **Community Management**
 Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and long lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)
 
-- **Specification / Documentation**  
+- **Specification / Documentation**
 John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, head over to our [docs](https://status.im/docs) and see how you can improve what we have.
 
-- **Blog Writing**  
+- **Blog Writing**
 Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page. [Jump into our chat](https://join.status.im/chat/public/status) and discuss with the team how you can contribute!
 
-- **Testers**  
+- **Testers**
 It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](https://status.im/technical/build_status/) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
 
-- **Security**  
+- **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**  
+- **Evangelism**
 Help us spread the word! Tell a friend *right now*, in fact tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)
 
-## Status API 
+## Status API
 View our [API Docs](https://status.im/developer_tools/status_web_api.html) and learn how to integrate your DApp into Status. You can read more about how to add your DApp to Status [here](https://status.im/developer_tools/add_your_dapp.html).
 
 ## Give me Binaries!

ci/tests/Jenkinsfile.e2e-nightly

@@ -62,7 +62,7 @@ pipeline {
                 --rerun_count=2 \
                 --testrail_report=True \
                 -m testrail_id \
-                -m \"not upgrade\" \
+                -m \"new_ui_critical\" \
                 -k \"${params.KEYWORD_EXPRESSION}\" \
                 --apk=${params.APK_NAME}
             """

ci/tests/Jenkinsfile.e2e-prs

@@ -14,7 +14,7 @@ pipeline {
     string(
       name: 'TEST_MARKERS',
       description: 'Marker expression for matching tests to run.',
-      defaultValue: 'critical',
+      defaultValue: 'new_ui_critical',
     ) */
     string(
       name: 'APK_NAME',

doc/codebase-structure-and-guidelines.md

@@ -1,5 +1,9 @@
 # Codebase Structure and Guidelines
 
+As of Nov/2022, we're starting to document and migrate the codebase to [new
+guidelines](new-guidelines.md), which will supersede some of the guidelines in
+this document.
+
 ## Starting the app
 
 The app is bundled and run in a Nix environment. Information regarding how to run it locally can be found [here](https://status.im/technical/build_status/).
@@ -85,7 +89,7 @@ These guidelines make db.cljs namespaces the place to go when making changes to
     - If issues - label 'TESTED-ISSUES' and comment from QA with bugs.
     - After fix and/or discussion the process is repeated.
 
-  - If manual QA is not needed but all tests don't pass, you can ping @churik or @Serhy to confirm that failed E2E tests are not unrelated. 
+  - If manual QA is not needed but all tests don't pass, you can ping @churik or @Serhy to confirm that failed E2E tests are not unrelated.
 
 ## Enabling debug logs
 Calls to `log/debug` will not be printed to the console by default. It can be enabled under "Advanced settings" in the app:

doc/new-guidelines.md

@@ -0,0 +1,440 @@
+# Guidelines
+
+>The goal of this document is to help all contributors (core and external) to
+>write code in _unison_ and help establish good practices that serve the Status
+>Mobile contributors well.
+
+We don't want to turn this document into an exhaustive list of rules to be
+followed that nobody will read. As much as possible, we'll try to document only
+what we consider important for Status Mobile. In other words, we don't want to
+maintain a general Clojure convention/style guide, nor do we want to turn this
+document into a long tutorial.
+
+This is a **work in progress**, and not all conventions are properly implemented
+in the codebase yet. The project structure is also going over major changes (as
+of Nov/2022), and it'll take a considerable amount of time until we migrate the
+existing code to the new structure.
+
+If you find out anything is outdated or missing, please, share with us or even
+better, create a pull-request! 🤸
+
+## Style guide
+
+We mostly follow the [Clojure Style
+Guide](https://github.com/bbatsov/clojure-style-guide), so it's recommended to
+get familiar with it.
+
+As of Nov/2022, running `make lint` should fix the most basic formatting issues,
+and we are in the process of integrating a tool to format non-trivial code
+according to the Clojure Style Guide. This should greatly reduce noise in
+pull-request reviews and it'll simplify the life of all contributors.
+
+Pay special attention to:
+
+- Align let bindings https://github.com/bbatsov/clojure-style-guide#bindings-alignment
+- Align map keys https://github.com/bbatsov/clojure-style-guide#map-keys-alignment
+
+## Dos and don'ts
+
+### Component styles
+
+Prefer to define styles in separate files named `style.cljs`, usually colocated
+with the source file using it. For a real example, see
+[src/status_im/ui2/screens/chat/messages/style.cljs](../src/status_im/ui2/screens/chat/messages/style.cljs).
+
+```clojure
+;; bad
+(defn animated-checkbox-view [{:keys [size]}]
+  [animated/view
+   {:style {:width           size
+            :height          size
+            :border-radius   4
+            :justify-content :center
+            :align-items     :center}}
+   [animated/view
+    (do-something)]])
+
+;; good
+(defn animated-checkbox-view [{:keys [size]}]
+  [animated/view
+   {:style (style/animated-checkbox-style size)}
+   [animated/view
+    (do-something)]])
+```
+
+### Using TODOs comments
+
+_TODO_ comments are used extensively in the codebase, but prefer to use them
+only when strictly necessary and when an issue is not enough to track the work
+left to be done.
+
+These are all good examples:
+
+```clojure
+;; TODO(@username): <message>
+;; TODO(@username): <message>, <issue URL>
+;; TODO(YYYY-MM-DD): <message>
+;; TODO(@username,YYYY-MM-DD): <message>
+```
+
+### Subscription names and event names
+
+Always register events and subscriptions using a meaningful namespace, but don't
+namespace them with `::`. We understand it's a controversial decision because
+there are both pros and cons to such practice.
+
+Whenever appropriate, it's also recommended to use _fake_ namespaces to convey
+more knowledge in the keyword about which bounded context (domain) it refers to.
+You may also use dots to convey hierarchical structures.
+
+```clojure
+;; bad
+;; Don't use real namespaced keywords.
+(re-frame/reg-sub
+ ::profile-pictures-visibility
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (:profile-pictures-visibility multiaccount)))
+
+;; good
+;; Uses a fake namespaced keyword.
+(re-frame/reg-sub
+ :profile/pictures-visibility
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (:profile-pictures-visibility multiaccount)))
+
+;; better
+;; Uses a fake namespaced keyword with a parent namespace (multiaccount).
+(re-frame/reg-sub
+ :multiaccount.profile/pictures-visibility
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (:profile-pictures-visibility multiaccount)))
+```
+
+### Declaring view components
+
+Use the simple `defn` to declare components. Don't use `utils.views/defview` and
+`utils.views/letsubs`.
+
+```clojure
+;; bad
+(utils.views/defview browser []
+  (utils.views/letsubs [window-width [:dimensions/window-width]]
+    (do-something window-width)))
+
+;; good
+(defn browser []
+  (let [window-width (rf/sub [:dimensions/window-width])]
+    (do-something window-width)))
+```
+
+### Using re-frame subscriptions and dispatching events
+
+Use the `utils.re-frame` namespace instead of `re-frame.core` to subscribe and
+dispatch.
+
+```clojure
+;; bad
+(ns my-namespace
+  (:require [re-frame.core :as rf]))
+
+(let [username @(rf/subscribe [:username])]
+  [pressable/pressable {:on-press #(rf/dispatch [:do-something])}
+   [rn/view
+    (str "Hello " username)]])
+
+;; good
+(ns my-namespace
+  (:require [utils.re-frame :as rf]))
+
+(let [username (rf/sub [:username])]
+  [pressable/pressable {:on-press #(rf/dispatch [:do-something])}
+   [rn/view
+    (str "Hello " username)]])
+```
+
+### Registering event handlers
+
+Events must always be declared with the `utils.fx/defn` macro. Also, don't use
+`re-frame.core/reg-event-db`.
+
+```clojure
+;; bad
+(re-frame/reg-event-fx
+ :wakuv2.ui/save-all-confirmed
+ (fn [{:keys [db] :as cofx}]
+   ...))
+
+;; good
+(fx/defn save-all
+  {:events [:wakuv2.ui/save-all-confirmed]}
+  [{:keys [db] :as cofx}]
+  ...)
+```
+
+### Registering top-level re-frame subscriptions
+
+Use `subs.root/reg-root-key-sub` to register top-level (root) subscriptions.
+Additionally, register root subscriptions in the `subs.root` namespace.
+
+```clojure
+;; bad
+(re-frame/reg-sub
+ :view-id
+ (fn [db]
+   (:view-id db)))
+
+;; good
+(reg-root-key-sub :view-id :view-id)
+```
+
+### Registering layer-3 subscriptions
+
+The majority of the subscriptions should be defined as [layer-3
+subscriptions](https://day8.github.io/re-frame/subscriptions/#the-four-layer)
+due to performance constraints.
+
+```clojure
+;; bad
+(re-frame/reg-sub
+ :ens/preferred-name
+ (fn [db]
+   (get-in db [:multiaccount :preferred-name])))
+
+;; good
+(re-frame/reg-sub
+ :ens/preferred-name
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (:preferred-name multiaccount)))
+```
+
+### Requiring quo2 components
+
+Consume `quo2` components from `quo2.core`, unless the namespace is also inside
+the `quo2/` directory.
+
+```clojure
+;; bad
+(ns my-namespace
+  (:require [quo2.components.icon :as icon]))
+
+(icon/icon :i/verified)
+
+;; good
+(ns my-namespace
+  (:require [quo2.core :as quo2]))
+
+(quo2/icon :i/verified)
+
+;; also good because both namespaces are inside quo2/
+(ns quo2.components.tabs.account-selector
+  (:require [quo2.components.markdown.text :as text]))
+```
+
+### Require/import
+
+Prefer `:as` instead of `:refer`. There are exceptions to this rule, e.g. the
+test macros `deftest` and `is`, which are ubiquitous in the Clojure community.
+
+```clojure
+;; bad
+(ns status-im.utils.datetime
+  (:require [cljs-time.coerce :refer [from-long]]))
+
+;; good
+(ns status-im.utils.datetime
+  (:require [cljs-time.coerce :as time.coerce]))
+```
+
+### Accessibility labels
+
+Use keywords instead of strings. As a bonus, remember keywords are cached in
+memory.
+
+```clojure
+;; bad
+[text/text {:accessibility-label "profile-nickname"}
+ "Markov"]
+
+;; good
+[text/text {:accessibility-label :profile-nickname}
+ "Markov"]
+```
+
+### Icons
+
+Use the appropriate keyword qualification/namespace and don't directly require
+namespaces inside `quo2/components/`.
+
+```clojure
+;; bad
+(require '[quo2.components.icon :as icons])
+(icons/icon :main-icons2/verified)
+
+;; good
+(require '[quo2.core :as quo2])
+(quo2/icon :i/verified)
+```
+
+### Translations
+
+Prefer to use translation placeholders instead of creating multiple translation
+keywords and concatenating them into a single string.
+
+```clojure
+;; bad
+;; Assume the translation key is:
+;;   "biometric-auth-error": "Unable perform biometric authentication"
+(str (i18n/label :t/biometric-auth-error) "(" error-code ")")
+
+;; good
+;; Assume the translation key is:
+;;   "biometric-auth-error": "Unable perform biometric authentication ({{code}})"
+(i18n/label :t/biometric-auth-error {:code error-code})
+```
+
+## Project Structure
+
+First, the bird's-eye view with some example ClojureScript files:
+
+```
+src
+├── js/
+├── mocks/
+├── quo2
+│   ├── components/
+│   ├── foundations/
+│   └── theme.cljs
+├── react_native
+│   ├── gesture.cljs
+│   └── platform.cljs
+├── status_im
+│   ├── common
+│   │   └── components
+│   │       └── bottom_sheet.cljs
+│   ├── contexts/
+│   ├── setup/
+│   └── subs/
+└── utils.cljs
+```
+
+- `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
+- `src/mocks`: Plumbing configuration to be able to run tests.
+- `src/quo2/`: The component library for Status Mobile.
+- `src/react_native/`: Contains only low-level constructs to help React Native
+  work in tandem with Clojure(Script).
+- `src/status_im/common/`: Directories named `common` can appear at any level of
+  the directory tree. Just like directories named `utils`, their directory
+  nesting level communicates their applicable limits.
+- `src/status_im/common/components/`: Contains reusable components that are not
+  part of the design system (quo2).
+- `src/status_im/contexts/`: Contains [bounded contexts](#glossary), like
+  `browser/`, `messaging/`, etc. As much as possible, _bounded contexts_ should
+  not directly require each other's namespaces.
+- `src/status_im/setup/`: Contains namespaces that are mostly used to initialize
+  the application, configure test runners, etc. In general, such namespaces
+  should not be required from the outside.
+- `src/status_im/subs/`: All subscriptions should live inside it.
+
+Directories named `utils/` can appear at any level of the directory tree. The
+directory nesting level precisely indicates its boundaries. For example, a
+`contexts/user_settings/utils/datetime.cljs` file communicates that it should
+only be used in the `user_settings` context.
+
+### src/quo2
+
+The `src/quo2/` directory holds all components for the new design system. As
+much as possible, its sub-directories and component names should reflect the
+same language used by designers.
+
+Even though the directory lives alongside the rest of the codebase, we should
+think of it as an external entity that abstracts away particular Status domain
+knowledge.
+
+Components inside `src/quo2/` should not rely on re-frame, i.e. they should not
+dispatch events or use subscriptions.
+
+Example structure:
+
+```
+src
+└── quo2
+    ├── components
+    │   └── dropdown
+    │       ├── style.cljs
+    │       ├── test.cljs
+    │       └── view.cljs
+    └── screens
+        └── dropdown
+            └── view.cljs
+```
+
+### Re-frame events
+
+Event handlers should be defined in files named `events.cljs`, and they should
+be _close_ to other _things_, like view files, components, etc.
+
+For example:
+
+```
+src
+└── contexts
+    └── browser
+        ├── bookmarks/
+        ├── options/
+        ├── permissions/
+        ├── events.cljs
+        ├── events_test.cljs
+        ├── style.cljs
+        └── view.cljs
+```
+
+### Test structure
+
+[Unit tests](#glossary) should be created alongside their respective source
+implementation. We prefer them colocated with the source and not like most
+Clojure (JVM) codebases which mirror the sources in a top-level test directory.
+Component tests should be created in a separate directory `__tests__`. Example:
+
+```
+├── models
+│   ├── message.cljs
+│   └── message_test.cljs
+├── __tests__
+│   └── input_bla_test.cljs
+├── models.cljs
+└── models_test.cljs
+```
+
+There's no hard rule on how integration test namespaces should be split, but
+we're at least striving to define them under appropriate bounded contexts that
+mirror the source code.
+
+```
+test
+├── appium/
+└── integration
+    ├── browser/
+    ├── communities/
+    ├── messaging/
+    ├── user_settings/
+    └── wallet
+        └── payment_test.cljs
+```
+
+## Glossary
+
+**Unit test**: The smallest atomic unit that's meaningful to test. For example,
+tests for utility functions and event handlers are considered unit tests in the
+mobile codebase. They should be completely deterministic, _fast_, and they
+should work flawlessly in the REPL.
+
+**Bounded context**: A logical separation between different domains. It's an
+important concept in the [Domain-Driven
+Design](https://en.wikipedia.org/wiki/Domain-driven_design) literature. See
+[Bounded Context, by Martin
+Fowler](https://martinfowler.com/bliki/BoundedContext.html) for an introduction
+to the topic.

ios/Podfile.lock

@@ -4,14 +4,14 @@ PODS:
     - React
   - CryptoSwift (1.5.1)
   - DoubleConversion (1.1.6)
-  - FBLazyVector (0.63.4)
-  - FBReactNativeSpec (0.63.4):
+  - FBLazyVector (0.63.5)
+  - FBReactNativeSpec (0.63.5):
     - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.4)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
+    - RCTRequired (= 0.63.5)
+    - RCTTypeSafety (= 0.63.5)
+    - React-Core (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
   - Folly (2020.01.13.00):
     - boost-for-react-native
     - DoubleConversion
@@ -40,172 +40,172 @@ PODS:
     - RNPermissions
   - Permission-Microphone (2.1.5):
     - RNPermissions
-  - RCTRequired (0.63.4)
-  - RCTTypeSafety (0.63.4):
-    - FBLazyVector (= 0.63.4)
+  - RCTRequired (0.63.5)
+  - RCTTypeSafety (0.63.5):
+    - FBLazyVector (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.4)
-    - React-Core (= 0.63.4)
-  - React (0.63.4):
-    - React-Core (= 0.63.4)
-    - React-Core/DevSupport (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-RCTActionSheet (= 0.63.4)
-    - React-RCTAnimation (= 0.63.4)
-    - React-RCTBlob (= 0.63.4)
-    - React-RCTImage (= 0.63.4)
-    - React-RCTLinking (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - React-RCTSettings (= 0.63.4)
-    - React-RCTText (= 0.63.4)
-    - React-RCTVibration (= 0.63.4)
-  - React-callinvoker (0.63.4)
-  - React-Core (0.63.4):
+    - RCTRequired (= 0.63.5)
+    - React-Core (= 0.63.5)
+  - React (0.63.5):
+    - React-Core (= 0.63.5)
+    - React-Core/DevSupport (= 0.63.5)
+    - React-Core/RCTWebSocket (= 0.63.5)
+    - React-RCTActionSheet (= 0.63.5)
+    - React-RCTAnimation (= 0.63.5)
+    - React-RCTBlob (= 0.63.5)
+    - React-RCTImage (= 0.63.5)
+    - React-RCTLinking (= 0.63.5)
+    - React-RCTNetwork (= 0.63.5)
+    - React-RCTSettings (= 0.63.5)
+    - React-RCTText (= 0.63.5)
+    - React-RCTVibration (= 0.63.5)
+  - React-callinvoker (0.63.5)
+  - React-Core (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
-    - React-Core/Default (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-Core/Default (= 0.63.5)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/CoreModulesHeaders (0.63.4):
+  - React-Core/CoreModulesHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/Default (0.63.4):
+  - React-Core/Default (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/DevSupport (0.63.4):
+  - React-Core/DevSupport (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
-    - React-Core/Default (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
-    - React-jsinspector (= 0.63.4)
+    - React-Core/Default (= 0.63.5)
+    - React-Core/RCTWebSocket (= 0.63.5)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
+    - React-jsinspector (= 0.63.5)
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.63.4):
+  - React-Core/RCTActionSheetHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.63.4):
+  - React-Core/RCTAnimationHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTBlobHeaders (0.63.4):
+  - React-Core/RCTBlobHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTImageHeaders (0.63.4):
+  - React-Core/RCTImageHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.63.4):
+  - React-Core/RCTLinkingHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.63.4):
+  - React-Core/RCTNetworkHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.63.4):
+  - React-Core/RCTSettingsHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTTextHeaders (0.63.4):
+  - React-Core/RCTTextHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.63.4):
+  - React-Core/RCTVibrationHeaders (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-Core/RCTWebSocket (0.63.4):
+  - React-Core/RCTWebSocket (0.63.5):
     - Folly (= 2020.01.13.00)
     - glog
-    - React-Core/Default (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-Core/Default (= 0.63.5)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-jsiexecutor (= 0.63.5)
     - Yoga
-  - React-CoreModules (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+  - React-CoreModules (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/CoreModulesHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTImage (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-cxxreact (0.63.4):
+    - RCTTypeSafety (= 0.63.5)
+    - React-Core/CoreModulesHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-RCTImage (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-cxxreact (0.63.5):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
     - Folly (= 2020.01.13.00)
     - glog
-    - React-callinvoker (= 0.63.4)
-    - React-jsinspector (= 0.63.4)
-  - React-jsi (0.63.4):
+    - React-callinvoker (= 0.63.5)
+    - React-jsinspector (= 0.63.5)
+  - React-jsi (0.63.5):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
     - Folly (= 2020.01.13.00)
     - glog
-    - React-jsi/Default (= 0.63.4)
-  - React-jsi/Default (0.63.4):
+    - React-jsi/Default (= 0.63.5)
+  - React-jsi/Default (0.63.5):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
     - Folly (= 2020.01.13.00)
     - glog
-  - React-jsiexecutor (0.63.4):
+  - React-jsiexecutor (0.63.5):
     - DoubleConversion
     - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-  - React-jsinspector (0.63.4)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
+  - React-jsinspector (0.63.5)
   - react-native-background-timer (2.2.0):
     - React
   - react-native-blob-util (0.13.18):
@@ -243,66 +243,66 @@ PODS:
     - React
   - react-native-webview (11.16.0):
     - React-Core
-  - React-RCTActionSheet (0.63.4):
-    - React-Core/RCTActionSheetHeaders (= 0.63.4)
-  - React-RCTAnimation (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+  - React-RCTActionSheet (0.63.5):
+    - React-Core/RCTActionSheetHeaders (= 0.63.5)
+  - React-RCTAnimation (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTAnimationHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTBlob (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+    - RCTTypeSafety (= 0.63.5)
+    - React-Core/RCTAnimationHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-RCTBlob (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - React-Core/RCTBlobHeaders (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTImage (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+    - React-Core/RCTBlobHeaders (= 0.63.5)
+    - React-Core/RCTWebSocket (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-RCTNetwork (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-RCTImage (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTImageHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTLinking (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - React-Core/RCTLinkingHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTNetwork (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+    - RCTTypeSafety (= 0.63.5)
+    - React-Core/RCTImageHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - React-RCTNetwork (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-RCTLinking (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
+    - React-Core/RCTLinkingHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-RCTNetwork (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTNetworkHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTSettings (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+    - RCTTypeSafety (= 0.63.5)
+    - React-Core/RCTNetworkHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-RCTSettings (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTSettingsHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTText (0.63.4):
-    - React-Core/RCTTextHeaders (= 0.63.4)
-  - React-RCTVibration (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
+    - RCTTypeSafety (= 0.63.5)
+    - React-Core/RCTSettingsHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - React-RCTText (0.63.5):
+    - React-Core/RCTTextHeaders (= 0.63.5)
+  - React-RCTVibration (0.63.5):
+    - FBReactNativeSpec (= 0.63.5)
     - Folly (= 2020.01.13.00)
-    - React-Core/RCTVibrationHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - ReactCommon/turbomodule/core (0.63.4):
+    - React-Core/RCTVibrationHeaders (= 0.63.5)
+    - React-jsi (= 0.63.5)
+    - ReactCommon/turbomodule/core (= 0.63.5)
+  - ReactCommon/turbomodule/core (0.63.5):
     - DoubleConversion
     - Folly (= 2020.01.13.00)
     - glog
-    - React-callinvoker (= 0.63.4)
-    - React-Core (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
+    - React-callinvoker (= 0.63.5)
+    - React-Core (= 0.63.5)
+    - React-cxxreact (= 0.63.5)
+    - React-jsi (= 0.63.5)
   - ReactNativeAudioToolkit (2.0.3):
     - React
   - ReactNativeNavigation (7.27.1):
@@ -637,25 +637,25 @@ SPEC CHECKSUMS:
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
   DoubleConversion: cde416483dac037923206447da6e1454df403714
-  FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
-  FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
+  FBLazyVector: 352a8ca9bbc8e2f097d680747a8c97ecef12d469
+  FBReactNativeSpec: 7dfb84f624136a45727c813ed21d130cd3e61beb
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
+  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
   Permission-Camera: afad27bf90337684d4a86f3825112d648c8c4d3b
   Permission-Microphone: 0ffabc3fe1c75cfb260525ee3f529383c9f4368c
-  RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
-  RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
-  React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
-  React-callinvoker: c3f44dd3cb195b6aa46621fff95ded79d59043fe
-  React-Core: d3b2a1ac9a2c13c3bcde712d9281fc1c8a5b315b
-  React-CoreModules: 0581ff36cb797da0943d424f69e7098e43e9be60
-  React-cxxreact: c1480d4fda5720086c90df537ee7d285d4c57ac3
-  React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
-  React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
-  React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
+  RCTRequired: 5520387431beaa5f32aa8726bf746cd5353119fe
+  RCTTypeSafety: bc90d6e287fa427c50ed770922bac30faf0bbfa3
+  React: 83a7f231f462b09260a53c5c51005e7659c66890
+  React-callinvoker: 1c3fdb5562c792212e149637b8a167516bb4b58e
+  React-Core: 8baca8644a516e772c77e3923697cfe2b58c1606
+  React-CoreModules: 200c931e17b332024c2e9d878f67b87c00c2c83b
+  React-cxxreact: 9096ebaeebf6a1475a14448fa8bfc380c13d7882
+  React-jsi: 7d908b17758178b076a05a254523f1a4227b53d2
+  React-jsiexecutor: e06a32e42affb2bd89e4c8369349b5fcf787710c
+  React-jsinspector: fdbc08866b34ae8e1b788ea1cbd9f9d1ca2aa3d6
   react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
   react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
   react-native-blur: 4568dd93d1d82748c180df8beb2d929c97b13b47
@@ -673,16 +673,16 @@ SPEC CHECKSUMS:
   react-native-status: 21f75d492fd311dc111303da38a7a2b23a8a8466
   react-native-status-keycard: f60ca57d789aad6875c64ece81ab06ef0609e0d3
   react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703
-  React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
-  React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
-  React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
-  React-RCTImage: c1b1f2d3f43a4a528c8946d6092384b5c880d2f0
-  React-RCTLinking: 35ae4ab9dc0410d1fcbdce4d7623194a27214fb2
-  React-RCTNetwork: 29ec2696f8d8cfff7331fac83d3e893c95ef43ae
-  React-RCTSettings: 60f0691bba2074ef394f95d4c2265ec284e0a46a
-  React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
-  React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
-  ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
+  React-RCTActionSheet: e911b99f0d6fa7711ffc2f62d236b12a32771835
+  React-RCTAnimation: ad8b853170a059faf31d6add34f67d22391bbe01
+  React-RCTBlob: 134c7270b6672c9c05383b2e0f7f044ba39d7dda
+  React-RCTImage: c5c74ba8850a193d73aef8efb8fcbb4f9cad7653
+  React-RCTLinking: 12468e952704555c8cb4e3de94c7b5a266811326
+  React-RCTNetwork: e9cfaeb9f3657ae91f895e798734141db6e1af5b
+  React-RCTSettings: 9a09419bd5e8494f6e146e2c9f5c8e2c6e90ed58
+  React-RCTText: 393f059d7ec02c733da57240694201e734f0dc84
+  React-RCTVibration: 3e83f53610d63d3c1fc4db303305e934e73047cc
+  ReactCommon: b9ff54b6dd22ba4a776eda22d7f83ec27544ca35
   ReactNativeAudioToolkit: de9610f323e855ac6574be8c99621f3d57c5df06
   ReactNativeNavigation: 94979dd1572a3f093fc85d4599360530a1bed8c8
   RNCAsyncStorage: b2489b49e38c85e10ed45a888d13a2a4c7b32ea1
@@ -708,7 +708,7 @@ SPEC CHECKSUMS:
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
-  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
+  Yoga: 0276e9f20976c8568e107cfc1163a8629051adc0
 
 PODFILE CHECKSUM: a1de9468266e7f0b5273acea713782ab759690f1
 

ios/StatusIm.xcodeproj/project.pbxproj

@@ -41,6 +41,8 @@
 		65F6941A25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
 		65F6941B25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
 		70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 1426DF592BA248FC81D955CB /* Inter-Regular.otf */; };
+		715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
+		715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
 		8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
 		A0093AB50DA85E1D01818CCA /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E88D313E5D854BE6BC81FC1 /* libPods-Status-StatusIm-StatusImTests.a */; };
@@ -121,6 +123,7 @@
 		65F6941725780A4E00A45E76 /* StatusImTests-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusImTests-Bridging-Header.h"; sourceTree = "<group>"; };
 		65F6941825780A4F00A45E76 /* Bridge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bridge.swift; sourceTree = "<group>"; };
 		693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; };
+		715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "UbuntuMono-Regular.ttf"; path = "../resources/fonts/UbuntuMono-Regular.ttf"; sourceTree = "<group>"; };
 		74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
 		7AFBE28450C0239119FBDBA2 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
@@ -229,6 +232,7 @@
 				693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */,
 				A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */,
 				9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */,
+				715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -475,6 +479,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */,
+				715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
 				B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
 				D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */,
 				D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */,
@@ -493,6 +498,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				3AAD2ACA24A3A60E0075D594 /* launch-image-universal.storyboard in Resources */,
+				715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
 				3AAD2ACB24A3A60E0075D594 /* Images.xcassets in Resources */,
 				3AAD2ACC24A3A60E0075D594 /* Inter-Bold.otf in Resources */,
 				3AAD2ACD24A3A60E0075D594 /* Inter-BoldItalic.otf in Resources */,

ios/StatusIm/Info.plist

@@ -105,6 +105,7 @@
 		<string>Inter-Thin-BETA.otf</string>
 		<string>Inter-ThinItalic-BETA.otf</string>
 		<string>InterStatus-Regular.otf</string>
+		<string>UbuntuMono-Regular.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/StatusImPR/Info.plist

@@ -108,6 +108,7 @@
 		<string>Inter-Thin-BETA.otf</string>
 		<string>Inter-ThinItalic-BETA.otf</string>
 		<string>InterStatus-Regular.otf</string>
+		<string>UbuntuMono-Regular.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

nix/config.nix

@@ -14,6 +14,7 @@
 
     status-go = {
       src-override = null;
+      gomobile-src-override = null;
       ipfs-gateway-url = "https://ipfs.status.im/";
     };
   };

nix/overlay.nix

@@ -9,17 +9,47 @@ self: super:
 
 let
   inherit (super) stdenv stdenvNoCC callPackage;
-in {
-  # Fix for MacOS
-  mkShell = super.mkShell.override { stdenv = stdenvNoCC; };
-
-  # Various utilities
-  utils = callPackage ./tools/utils.nix { };
   lib = (super.lib or { }) // (import ./lib {
     inherit (super) lib;
     inherit (self) config;
   });
 
+  gomobileSrcOverride = "/Users/vvlasov/c/mobile";
+  # Warning message about using local sources
+  localSrcWarn = (path: "Using local gomobile sources from ${path}");
+  localGomobileSrc = rec {
+    owner = "status-im";
+    repo = "mobile";
+    rev = "unknown";
+    shortRev = rev;
+    rawVersion = "develop";
+    cleanVersion = rawVersion;
+    goPackagePath = "github.com/${owner}/${repo}";
+    # We use builtins.path so that we can name the resulting derivation,
+    # Normally the name would not be deterministic, taken from the checkout directory.
+    src = builtins.path rec {
+      path = lib.traceValFn localSrcWarn gomobileSrcOverride;
+      name = "${repo}-source-${shortRev}";
+      # Keep this filter as restrictive as possible in order
+      # to avoid unnecessary rebuilds and limit closure size
+      filter = lib.mkFilter {
+        root = path;
+        include = [ ".*" ];
+        exclude = [
+          ".*/[.]git.*" ".*[.]md" ".*[.]yml" ".*/.*_test.go$"
+          "VERSION" "_assets/.*" "build/.*"
+          ".*/.*LICENSE.*" ".*/CONTRIB.*" ".*/AUTHOR.*"
+        ];
+      };
+    };
+  };
+in {
+  inherit lib;
+  # Fix for MacOS
+  mkShell = super.mkShell.override { stdenv = stdenvNoCC; };
+
+  # Various utilities
+  utils = callPackage ./tools/utils.nix { };
   # Project dependencies
   deps = {
     clojure = callPackage ./deps/clojure { };
@@ -45,11 +75,17 @@ in {
   buildGoPackage = super.buildGo118Package;
   buildGoModule = super.buildGo118Module;
   gomobile = (super.gomobile.overrideAttrs (old: {
-    patches = self.fetchurl { # https://github.com/golang/mobile/pull/84
-      url = "https://github.com/golang/mobile/commit/f20e966e05b8f7e06bed500fa0da81cf6ebca307.patch";
-      sha256 = "sha256-TZ/Yhe8gMRQUZFAs9G5/cf2b9QGtTHRSObBFD5Pbh7Y=";
-    };
-  })).override {
+    src = "/Users/vvlasov/c/mobile";
+    vendorSha256 = "sha256-TZ/Yhe8gMRQUZFAs9G5/cf2b9QGtTHRSObBFD5Pbh7Y=";
+    # patches = self.fetchurl { # https://github.com/golang/mobile/pull/84
+    #   url = "https://github.com/golang/mobile/commit/f20e966e05b8f7e06bed500fa0da81cf6ebca307.patch";
+    #   sha256 = "sha256-TZ/Yhe8gMRQUZFAs9G5/cf2b9QGtTHRSObBFD5Pbh7Y=";
+    # };
+    })).override rec {
+      buildGoModule = args: super.buildGoModule ( args // {
+        src =  "/Users/vvlasov/c/mobile";
+        vendorSha256 = "sha256-C6GD3NMolRIve1siG8wpcQav7ZWTugjce8K22EQDD7M=";
+    });
     # FIXME: No Android SDK packages for aarch64-darwin.
     withAndroidPkgs = stdenv.system != "aarch64-darwin";
     androidPkgs = self.androidEnvCustom.compose;

nix/scripts/shell.sh

@@ -46,6 +46,9 @@ config=''
 if [[ -n "${STATUS_GO_SRC_OVERRIDE}" ]]; then
     config+="status-im.status-go.src-override=\"${STATUS_GO_SRC_OVERRIDE}\";"
 fi
+if [[ -n "${GOMOBILE_SRC_OVERRIDE}" ]]; then
+    config+="status-im.status-go.gomobile-src-override=\"${GOMOBILE_SRC_OVERRIDE}\";"
+fi
 config+="status-im.build-type=\"${BUILD_TYPE}\";"
 
 if [[ -n "$config" ]]; then

nix/status-go/default.nix

@@ -12,6 +12,7 @@ let
 
   # Source can be changed with a local override from config
   source = callPackage ./source.nix { };
+  nimbusSource = callPackage ./nimbus_source.nix { };
 
   # Params to be set at build time, important for About section and metrics
   goBuildParams = {
@@ -31,14 +32,55 @@ let
     "-w" # -w disables DWARF debugging information
   ];
 in rec {
+  inherit nimbusSource;
+
   mobile = callPackage ./mobile {
-    inherit meta source goBuildLdFlags;
+    inherit meta source nimbusSource nimCompiler goBuildLdFlags;
   };
 
   library = callPackage ./library {
     inherit meta source;
   };
 
+  nimCompiler = callPackage ./mobile/buildNim.nix {
+    srcRaw = nimbusSource;
+  };
+
+  liblcproxy-android-arm = callPackage ./mobile/buildNimbus.nix {
+    srcRaw = nimbusSource;
+    nimCompiler = nimCompiler;
+    platform = "android";
+    arch = "arm";
+  };
+
+  liblcproxy-android-arm64 = callPackage ./mobile/buildNimbus.nix {
+    srcRaw = nimbusSource;
+    nimCompiler = nimCompiler;
+    platform = "android";
+    arch = "arm64";
+  };
+
+  liblcproxy-android-x86 = callPackage ./mobile/buildNimbus.nix {
+    srcRaw = nimbusSource;
+    nimCompiler = nimCompiler;
+    platform = "android";
+    arch = "x86";
+  };
+
+  liblcproxy-ios-x86 = callPackage ./mobile/buildNimbus.nix {
+    srcRaw = nimbusSource;
+    nimCompiler = nimCompiler;
+    platform = "ios";
+    arch = "x86";
+  };
+
+  liblcproxy-ios-arm64 = callPackage ./mobile/buildNimbus.nix {
+    srcRaw = nimbusSource;
+    nimCompiler = nimCompiler;
+    platform = "ios";
+    arch = "arm64";
+  };
+
   shell = mkShell {
     inputsFrom = [ mobile.android mobile.ios ];
   };

nix/status-go/library/default.nix

@@ -20,7 +20,11 @@ buildGoPackage {
   # Build the Go library
   buildPhase = ''
     runHook preBuild
-    go build -buildmode=c-archive -o $out/libstatus.a $NIX_BUILD_TOP/main.go
+    go build \
+      -buildmode='c-archive' \
+      -tags='gowaku_skip_migrations' \
+      -o "$out/libstatus.a" \
+      $NIX_BUILD_TOP/main.go
     runHook postBuild
   '';
 }

nix/status-go/mobile/build.nix

@@ -2,6 +2,7 @@
 , androidPkgs, openjdk, gomobile, xcodeWrapper, removeReferencesTo
 , meta
 , source
+, buildNimbusLc
 , platform ? "android"
 , platformVersion ? "23"
 , targets ? [ "android/arm64" "android/arm" ]
@@ -11,6 +12,16 @@
 
 let
   inherit (lib) concatStringsSep optionalString optional;
+  isIOS = platform == "ios";
+  isAndroid = platform == "android";
+  lc = buildNimbusLc {inherit platform targets;};
+  cgoCflags = "-I" + (builtins.elemAt lc 0);
+
+  lcDirs = (builtins.concatStringsSep " " (builtins.map (s: "-L" + s) lc));
+
+  goBuildLdFlagsModified = 
+    goBuildLdFlags ++ [("-extldflags \"-lverifproxy " + lcDirs + "\"")];
+  ldflags = concatStringsSep " " goBuildLdFlagsModified;
 in buildGoPackage {
   pname = source.repo;
   version = "${source.cleanVersion}-${source.shortRev}-${platform}";
@@ -20,30 +31,32 @@ in buildGoPackage {
 
   # Sandbox causes Xcode issues on MacOS. Requires sandbox=relaxed.
   # https://github.com/status-im/status-mobile/pull/13912
-  __noChroot = (platform == "ios");
+  __noChroot = isIOS;
 
   extraSrcPaths = [ gomobile ];
   nativeBuildInputs = [ gomobile removeReferencesTo ]
-    ++ optional (platform == "android") openjdk
-    ++ optional (platform == "ios") xcodeWrapper;
+    ++ optional isAndroid openjdk
+    ++ optional isIOS xcodeWrapper;
 
-  ldflags = concatStringsSep " " goBuildLdFlags;
-
-  ANDROID_HOME = optionalString (platform == "android") androidPkgs.sdk;
+  ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;
 
   # Ensure XCode is present for iOS, instead of failing at the end of the build.
-  preConfigure = optionalString (platform == "ios") utils.enforceXCodeAvailable;
+  preConfigure = optionalString isIOS utils.enforceXCodeAvailable;
 
   buildPhase = ''
     runHook preBuild
     echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"
-
+    echo -e "\n LC dirs: ${lcDirs}"
+    echo -e "\n ldflags: ${ldflags}"
+    set -x
+    export CGO_CFLAGS=\"${cgoCflags}\" 
     gomobile bind \
       ${concatStringsSep " " goBuildFlags} \
-      -ldflags="$ldflags" \
+      -ldflags ''\'${ldflags}''\' \
       -target=${concatStringsSep "," targets} \
-      ${optionalString (platform == "android") "-androidapi=${platformVersion}"} \
-      ${optionalString (platform == "ios") "-iosversion=${platformVersion}"} \
+      ${optionalString isAndroid "-androidapi=${platformVersion}" } \
+      ${optionalString isIOS "-iosversion=${platformVersion}" } \
+     -tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
       -o ${outputFileName} \
       ${source.goPackagePath}/mobile
 
@@ -58,7 +71,7 @@ in buildGoPackage {
   # Drop govers from disallowedReferences.
   dontRenameImports = true;
   # Replace hardcoded paths to go package in /nix/store.
-  preFixup = optionalString (platform == "ios") ''
+  preFixup = optionalString isIOS ''
     find $out -type f -exec \
       remove-references-to -t $disallowedReferences '{}' + || true
   '';

nix/status-go/mobile/buildNim.nix

@@ -0,0 +1,67 @@
+{ pkgs, stdenv, lib, fetchFromGitHub
+# Dependencies
+, xcodeWrapper
+, srcRaw
+, writeScript
+, writeTextFile
+, androidPkgs
+, git 
+, platform ? "android"
+, arch ? "386"
+, api ? "29" }:
+
+let
+  osId = builtins.elemAt (builtins.split "\-" stdenv.hostPlatform.system) 2;
+  osArch = builtins.elemAt (builtins.split "\-" stdenv.hostPlatform.system) 0;
+
+  nimHostOs = if osId == "darwin" then "Darwin"
+              else if osId == "linux" then "Linux"
+              else "Windows_NT";
+
+  createNimbleLink = writeTextFile {
+    name = "createNimbleLink.sh";
+    text = ''
+    mkdir -p vendor/.nimble/pkgs
+
+    curdir=`pwd`
+    for dir in vendor/*/;
+    do
+      baseDirName=`basename ''${dir}`
+      dirName=vendor/.nimble/pkgs/$baseDirName-\#head
+      echo $dirName
+      mkdir -p $dirName
+
+      packageDir="''${curdir}/vendor/''${baseDirName}"
+      if [ -d "''${packageDir}/src" ]; then
+        packageDir="''${packageDir}/src"
+      fi
+      echo "''${packageDir}" > ''${dirName}/''${baseDirName}.nimble-link
+      echo "''${packageDir}" >> ''${dirName}/''${baseDirName}.nimble-link
+    done
+    '';
+    executable = true;
+  };
+
+in stdenv.mkDerivation rec {
+  pname = "nimCompiler";
+  name = "nimCompiler";
+  src = srcRaw.src;
+  #version = lib.strings.substring 0 7 src.rev;
+  buildInputs = with pkgs; [ wget git clang which tcl curl];
+
+  phases = [ "unpackPhase" "buildPhase" "installPhase" ];
+
+
+  buildPhase = ''
+    ${createNimbleLink}
+    export HOME=$PWD
+    unset SSL_CERT_FILE
+    make V=3 CC=clang build-nim
+   '';
+
+  installPhase = ''
+    mkdir -p $out
+    cp -r vendor/nimbus-build-system/vendor/Nim/* $out/
+  '';
+}
+

nix/status-go/mobile/buildNimbus.nix

@@ -0,0 +1,231 @@
+{ pkgs, stdenv, lib, fetchFromGitHub
+# Dependencies
+, xcodeWrapper
+, srcRaw
+, writeScript
+, writeTextFile
+, androidPkgs
+, git 
+, nimCompiler 
+, platform ? "android"
+, arch ? "386"
+, api ? "29" }:
+
+let
+  osId = builtins.elemAt (builtins.split "\-" stdenv.hostPlatform.system) 2;
+  osArch = builtins.elemAt (builtins.split "\-" stdenv.hostPlatform.system) 0;
+
+  
+  # Arg arch -> Nim arch
+  nimCpuMap = {
+    "x86" = "i386";
+    "x86-64" = "amd64"; 
+    "arm" = "arm"; 
+    "arm64" = "arm64";
+  };
+
+  iosArchMap = {
+    "x86" = "x86_64";
+    "x86-64" = "x86_64";
+    "arm" = "armv7";
+    "arm64" = "arm64";
+  };
+
+  nimCpu = if platform == "ios" && arch == "x86"
+    then "amd64" else "${lib.getAttr arch nimCpuMap}";
+  nimPlatform = "${(if platform == "ios" then "ios" else "android")}";
+
+  iosSdk = if arch == "x86" then "iphonesimulator" else "iphoneos";
+  iosArch = lib.getAttr arch iosArchMap;
+
+  isAndroid = lib.hasPrefix "android" platform;
+  isIOS = platform == "ios";
+
+
+  buildType = lib.getConfig "build-type" "";
+
+
+  routeHeader = builtins.readFile ./route.h;
+
+  PROJECT_ROOT = srcRaw.src;
+
+  iosIncludes = stdenv.mkDerivation {
+    name = "nim-status-ios-includes";
+    buildInputs = [ pkgs.coreutils ];
+    builder = writeScript "nim-ios-includes.sh"
+    ''
+      export PATH=${pkgs.coreutils}/bin
+      mkdir $out
+      cd $out
+      mkdir net
+      echo "${routeHeader}" > net/route.h
+    '';
+  };
+
+
+  ANDROID_NDK_HOME = "${androidPkgs.sdk}/ndk-bundle";
+  
+  
+  androidToolchain = "${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/${osId}-${osArch}";
+  androidTargetArchMap = {
+    "x86" = "i686-linux-android";
+    "x86-64" = "x86_64-linux-android";
+    "arm" = "armv7a-linux-androideabi";
+    "arm64" = "aarch64-linux-android";
+  };
+
+  androidTargetArch = lib.getAttr arch androidTargetArchMap;
+
+  iosVersion = "9.0";
+
+  sysroot = if isAndroid then "${androidToolchain}/sysroot" else "$(xcrun --sdk ${iosSdk} --show-sdk-path)";  
+  compilerFlags = if isAndroid then
+    "--sysroot ${sysroot} -fPIC -target ${androidTargetArch}${api}"
+    else if isIOS then
+    # TODO The conditional for -miphoneos-version-min=8.0 is required,
+    # otherwise Nim will complain that thread-local storage is not supported for the current target
+    # when expanding 'NIM_THREADVAR' macro
+    "-isysroot ${sysroot} -fembed-bitcode -target ${iosArch}-apple-ios${iosVersion} ${if arch == "arm" then "" else "-miphoneos-version-min=${iosVersion}"} -I${iosIncludes}"
+    else throw "Unsupported platform!";
+
+  linkerFlags = if isAndroid then
+  "--sysroot ${sysroot} -target ${androidTargetArch}${api}"
+  else if isIOS then
+  "--sysroot ${sysroot} -fembed-bitcode -target ${iosArch}-apple-ios${iosVersion} ${if arch == "arm" then "" else "-miphoneos-version-min=${iosVersion}"} -v"
+  else throw "Unsupported platform!";
+  
+  ldDirMap = {
+    "x86" = "i686";
+    "x86-64" = "x86_64";
+    "arm" = "armeabi-v7a"; 
+    "arm64" = "arm64-v8a";
+  };
+
+  cmakeArgs = if isAndroid then
+    "-DCMAKE_SYSTEM_NAME=Android -DCMAKE_SYSTEM_VERSION=${api} -DCMAKE_ANDROID_ARCH_ABI=${lib.getAttr arch ldDirMap} -DCMAKE_ANDROID_NDK=${ANDROID_NDK_HOME}"
+  else if isIOS then "-DCMAKE_SYSTEM_NAME=iOS -DCMAKE_OSX_SYSROOT=\"$(CMAKE_SYSROOT)\" -DCMAKE_OSX_ARCHITECTURES=${iosArch} -DCMAKE_OSX_DEPLOYMENT_TARGET=9.3 -DCMAKE_XCODE_ATTRIBUTE_ONLY_ACTIVE_ARCH=NO -DCMAKE_IOS_INSTALL_COMBINED=YES"
+  else throw "Unsupported platform!";
+  #clangPath = if isAndroid then "${androidToolchain}/bin" else "";
+  #clangName = if isAndroid then "${androidTargetArch}${api}-clang" else "";
+
+  compilerVars = if isAndroid then
+    ''
+      export PATH=${androidToolchain}/bin:$PATH
+      export CC=clang
+      export CXX=clang++
+      export AR=${androidToolchain}/bin/llvm-ar
+      export NM=${androidToolchain}/bin/llvm-nm
+      export RANLIB=${androidToolchain}/bin/llvm-ranlib
+      export LD=${androidToolchain}/bin/ld
+      export AS=$CC
+      export CFLAGS="${compilerFlags}"
+      export LDFLAGS="${linkerFlags}"
+
+      mkdir bin
+      touch bin/git
+      chmod +x bin/git
+      export PATH=./bin:$PATH
+    ''
+    else if isIOS then
+    ''
+      export PATH=${xcodeWrapper}/bin:$PATH
+      export CC=clang #$(xcrun --sdk ${iosSdk} --find clang)
+      export CXX=clang++ #$(xcrun --sdk ${iosSdk} --find clang++)
+      export LD=clang
+      export CFLAGS="${compilerFlags}"
+      export LDFLAGS="${linkerFlags}"
+
+      mkdir bin
+      touch bin/git
+      chmod +x bin/git
+      export PATH=./bin:$PATH
+
+      export CMAKE_SYSROOT=${sysroot}
+    ''
+    else throw "Unsupported platform!";
+ 
+  src = srcRaw;
+
+
+  nimHostOs = if osId == "darwin" then "Darwin"
+              else if osId == "linux" then "Linux"
+              else "Windows_NT";
+  createNimbleLink = writeTextFile {
+    name = "createNimbleLink.sh";
+    text = ''
+    mkdir -p vendor/.nimble/pkgs
+
+    curdir=`pwd`
+    for dir in vendor/*/;
+    do
+      baseDirName=`basename ''${dir}`
+      dirName=vendor/.nimble/pkgs/$baseDirName-\#head
+      echo $dirName
+      mkdir -p $dirName
+
+      packageDir="''${curdir}/vendor/''${baseDirName}"
+      if [ -d "''${packageDir}/src" ]; then
+        packageDir="''${packageDir}/src"
+      fi
+      echo "''${packageDir}" > ''${dirName}/''${baseDirName}.nimble-link
+      echo "''${packageDir}" >> ''${dirName}/''${baseDirName}.nimble-link
+    done
+    '';
+    executable = true;
+  };
+
+in stdenv.mkDerivation rec {
+  pname = "libverifproxy";
+  name = "libverifproxy";
+  src = srcRaw.src;
+  #version = lib.strings.substring 0 7 src.rev;
+  buildInputs = with pkgs; [ wget git which tcl cmake libtool binutils];
+
+  phases = [ "unpackPhase" "preBuildPhase" "buildPhase" "installPhase" ];
+
+  preBuildPhase = ''
+
+    sed -E -i 's|^(LIBBACKTRACE_SED := true.*)|\1\nCMAKE_ARGS := ${cmakeArgs}|g' vendor/nim-libbacktrace/Makefile
+
+    sed -E -i 's|^(.*)(useNews\* = )(.*)|\1\2 false|g' vendor/nim-json-rpc/json_rpc/clients/config.nim
+    sed -E -i 's|(.*XOPEN_SOURCE.*)|#\1|g' vendor/nim-nat-traversal/vendor/miniupnp/miniupnpc/Makefile
+
+    export HOME=$PWD
+
+    ${createNimbleLink}
+
+    ${compilerVars}
+    export PATH=${nimCompiler}/bin:$PATH
+    #export PATH=${pkgs.binutils}/bin:$PATH
+    ln -sf ${pkgs.binutils}/bin/ar bin/ar
+  '';
+
+
+  buildPhase = ''
+    which ar
+    make V=3 OS=${nimHostOs} \
+      CC=clang CXX=clang USE_SYSTEM_NIM=1 \
+      NIMFLAGS="\
+      --passC:\"${compilerFlags}\" \
+      --passL:\"${linkerFlags}\" \
+      --debuginfo:off \
+      --cc:clang \
+      --listcmd \
+      --cpu:${nimCpu} \
+      --os:${nimPlatform} \
+      -d:disableMarchNative" \
+    libverifproxy
+
+    echo "### ls build/libverifproxy"
+    ls -l build/libverifproxy/*
+   '';
+
+  installPhase = ''
+    set -x
+    mkdir -p $out
+    cp libverifproxy* $out/
+    cp build/libverifproxy/verifproxy.h $out/
+    cp build/libverifproxy/nimbase.h $out/
+  '';
+}
+

nix/status-go/mobile/default.nix

@@ -1,19 +1,44 @@
-{ callPackage, meta, source, goBuildLdFlags }:
+{ stdenv, callPackage, meta, source, nimbusSource, nimCompiler, goBuildLdFlags }:
+
+let 
+  buildNimbusLc = { platform, targets }: builtins.map
+      (target:
+        let
+          arch =
+            if platform == "ios" then
+              (if target == "iossimulator" && stdenv.hostPlatform.isx86
+              then "x86" else "arm64")
+            else builtins.elemAt (builtins.split "\/" target) 2 ;
+        in
+        callPackage ./buildNimbus.nix {
+          inherit nimCompiler platform arch;
+          srcRaw = nimbusSource;
+        }
+      )
+      targets;
+in {
+
+  #ios-x86 = buildNimbusLc {platform = "ios"; targets = ["ios" "iossimulator"];};
+  ios-x86 = buildNimbusLc {platform = "ios"; targets = ["iossimulator"];};
+  ios-arm = buildNimbusLc {platform = "ios"; targets = ["ios"];};
+  android-arm64 = buildNimbusLc {platform = "android"; targets = ["android/arm64"];};
+  android-arm = buildNimbusLc {platform = "android"; targets = ["android/arm"];};
+
 
-{
   android = callPackage ./build.nix {
     platform = "android";
     platformVersion = "23";
-    targets = [ "android/arm" "android/arm64" "android/386" ];
+    #targets = [ "android/arm" "android/arm64" "android/386" ];
+    targets = [ "android/arm64" ];
     outputFileName = "status-go-${source.shortRev}.aar";
-    inherit meta source goBuildLdFlags;
+    inherit meta source buildNimbusLc goBuildLdFlags;
   };
 
   ios = callPackage ./build.nix {
     platform = "ios";
     platformVersion = "8.0";
-    targets = [ "ios" "iossimulator" ];
+    targets = [ "iossimulator" ];
     outputFileName = "Statusgo.xcframework";
-    inherit meta source goBuildLdFlags;
+    inherit meta source buildNimbusLc goBuildLdFlags;
   };
 }

nix/status-go/mobile/route.h

@@ -0,0 +1,259 @@
+/*
+ * Copyright (c) 2000-2017 Apple Inc. All rights reserved.
+ *
+ * @APPLE_OSREFERENCE_LICENSE_HEADER_START@
+ *
+ * This file contains Original Code and/or Modifications of Original Code
+ * as defined in and that are subject to the Apple Public Source License
+ * Version 2.0 (the 'License'). You may not use this file except in
+ * compliance with the License. The rights granted to you under the License
+ * may not be used to create, or enable the creation or redistribution of,
+ * unlawful or unlicensed copies of an Apple operating system, or to
+ * circumvent, violate, or enable the circumvention or violation of, any
+ * terms of an Apple operating system software license agreement.
+ *
+ * Please obtain a copy of the License at
+ * http://www.opensource.apple.com/apsl/ and read it before using this file.
+ *
+ * The Original Code and all software distributed under the License are
+ * distributed on an 'AS IS' basis, WITHOUT WARRANTY OF ANY KIND, EITHER
+ * EXPRESS OR IMPLIED, AND APPLE HEREBY DISCLAIMS ALL SUCH WARRANTIES,
+ * INCLUDING WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
+ * Please see the License for the specific language governing rights and
+ * limitations under the License.
+ *
+ * @APPLE_OSREFERENCE_LICENSE_HEADER_END@
+ */
+/*
+ * Copyright (c) 1980, 1986, 1993
+ *	The Regents of the University of California.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ * 3. All advertising materials mentioning features or use of this software
+ *    must display the following acknowledgement:
+ *	This product includes software developed by the University of
+ *	California, Berkeley and its contributors.
+ * 4. Neither the name of the University nor the names of its contributors
+ *    may be used to endorse or promote products derived from this software
+ *    without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED.  IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
+ * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
+ * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
+ * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ * SUCH DAMAGE.
+ *
+ *	@(#)route.h	8.3 (Berkeley) 4/19/94
+ * $FreeBSD: src/sys/net/route.h,v 1.36.2.1 2000/08/16 06:14:23 jayanth Exp $
+ */
+
+#ifndef _NET_ROUTE_H_
+#define _NET_ROUTE_H_
+#include <sys/appleapiopts.h>
+#include <stdint.h>
+#include <sys/types.h>
+#include <sys/socket.h>
+
+/*
+ * These numbers are used by reliable protocols for determining
+ * retransmission behavior and are included in the routing structure.
+ */
+struct rt_metrics {
+	u_int32_t       rmx_locks;      /* Kernel leaves these values alone */
+	u_int32_t       rmx_mtu;        /* MTU for this path */
+	u_int32_t       rmx_hopcount;   /* max hops expected */
+	int32_t         rmx_expire;     /* lifetime for route, e.g. redirect */
+	u_int32_t       rmx_recvpipe;   /* inbound delay-bandwidth product */
+	u_int32_t       rmx_sendpipe;   /* outbound delay-bandwidth product */
+	u_int32_t       rmx_ssthresh;   /* outbound gateway buffer limit */
+	u_int32_t       rmx_rtt;        /* estimated round trip time */
+	u_int32_t       rmx_rttvar;     /* estimated rtt variance */
+	u_int32_t       rmx_pksent;     /* packets sent using this route */
+	u_int32_t       rmx_state;      /* route state */
+	u_int32_t       rmx_filler[3];  /* will be used for T/TCP later */
+};
+
+/*
+ * rmx_rtt and rmx_rttvar are stored as microseconds;
+ */
+#define RTM_RTTUNIT     1000000 /* units for rtt, rttvar, as units per sec */
+
+
+
+#define RTF_UP          0x1             /* route usable */
+#define RTF_GATEWAY     0x2             /* destination is a gateway */
+#define RTF_HOST        0x4             /* host entry (net otherwise) */
+#define RTF_REJECT      0x8             /* host or net unreachable */
+#define RTF_DYNAMIC     0x10            /* created dynamically (by redirect) */
+#define RTF_MODIFIED    0x20            /* modified dynamically (by redirect) */
+#define RTF_DONE        0x40            /* message confirmed */
+#define RTF_DELCLONE    0x80            /* delete cloned route */
+#define RTF_CLONING     0x100           /* generate new routes on use */
+#define RTF_XRESOLVE    0x200           /* external daemon resolves name */
+#define RTF_LLINFO      0x400           /* DEPRECATED - exists ONLY for backward
+	                                 *  compatibility */
+#define RTF_LLDATA      0x400           /* used by apps to add/del L2 entries */
+#define RTF_STATIC      0x800           /* manually added */
+#define RTF_BLACKHOLE   0x1000          /* just discard pkts (during updates) */
+#define RTF_NOIFREF     0x2000          /* not eligible for RTF_IFREF */
+#define RTF_PROTO2      0x4000          /* protocol specific routing flag */
+#define RTF_PROTO1      0x8000          /* protocol specific routing flag */
+
+#define RTF_PRCLONING   0x10000         /* protocol requires cloning */
+#define RTF_WASCLONED   0x20000         /* route generated through cloning */
+#define RTF_PROTO3      0x40000         /* protocol specific routing flag */
+                                        /* 0x80000 unused */
+#define RTF_PINNED      0x100000        /* future use */
+#define RTF_LOCAL       0x200000        /* route represents a local address */
+#define RTF_BROADCAST   0x400000        /* route represents a bcast address */
+#define RTF_MULTICAST   0x800000        /* route represents a mcast address */
+#define RTF_IFSCOPE     0x1000000       /* has valid interface scope */
+#define RTF_CONDEMNED   0x2000000       /* defunct; no longer modifiable */
+#define RTF_IFREF       0x4000000       /* route holds a ref to interface */
+#define RTF_PROXY       0x8000000       /* proxying, no interface scope */
+#define RTF_ROUTER      0x10000000      /* host is a router */
+#define RTF_DEAD        0x20000000      /* Route entry is being freed */
+                                        /* 0x40000000 and up unassigned */
+
+#define RTPRF_OURS      RTF_PROTO3      /* set on routes we manage */
+#define RTF_BITS \
+	"\020\1UP\2GATEWAY\3HOST\4REJECT\5DYNAMIC\6MODIFIED\7DONE" \
+	"\10DELCLONE\11CLONING\12XRESOLVE\13LLINFO\14STATIC\15BLACKHOLE" \
+	"\16NOIFREF\17PROTO2\20PROTO1\21PRCLONING\22WASCLONED\23PROTO3" \
+	"\25PINNED\26LOCAL\27BROADCAST\30MULTICAST\31IFSCOPE\32CONDEMNED" \
+	"\33IFREF\34PROXY\35ROUTER"
+
+#define IS_DIRECT_HOSTROUTE(rt) \
+	(((rt)->rt_flags & (RTF_HOST | RTF_GATEWAY)) == RTF_HOST)
+/*
+ * Routing statistics.
+ */
+struct  rtstat {
+	short   rts_badredirect;        /* bogus redirect calls */
+	short   rts_dynamic;            /* routes created by redirects */
+	short   rts_newgateway;         /* routes modified by redirects */
+	short   rts_unreach;            /* lookups which failed */
+	short   rts_wildcard;           /* lookups satisfied by a wildcard */
+	short   rts_badrtgwroute;       /* route to gateway is not direct */
+};
+
+/*
+ * Structures for routing messages.
+ */
+struct rt_msghdr {
+	u_short rtm_msglen;     /* to skip over non-understood messages */
+	u_char  rtm_version;    /* future binary compatibility */
+	u_char  rtm_type;       /* message type */
+	u_short rtm_index;      /* index for associated ifp */
+	int     rtm_flags;      /* flags, incl. kern & message, e.g. DONE */
+	int     rtm_addrs;      /* bitmask identifying sockaddrs in msg */
+	pid_t   rtm_pid;        /* identify sender */
+	int     rtm_seq;        /* for sender to identify action */
+	int     rtm_errno;      /* why failed */
+	int     rtm_use;        /* from rtentry */
+	u_int32_t rtm_inits;    /* which metrics we are initializing */
+	struct rt_metrics rtm_rmx; /* metrics themselves */
+};
+
+struct rt_msghdr2 {
+	u_short rtm_msglen;     /* to skip over non-understood messages */
+	u_char  rtm_version;    /* future binary compatibility */
+	u_char  rtm_type;       /* message type */
+	u_short rtm_index;      /* index for associated ifp */
+	int     rtm_flags;      /* flags, incl. kern & message, e.g. DONE */
+	int     rtm_addrs;      /* bitmask identifying sockaddrs in msg */
+	int32_t rtm_refcnt;     /* reference count */
+	int     rtm_parentflags; /* flags of the parent route */
+	int     rtm_reserved;   /* reserved field set to 0 */
+	int     rtm_use;        /* from rtentry */
+	u_int32_t rtm_inits;    /* which metrics we are initializing */
+	struct rt_metrics rtm_rmx; /* metrics themselves */
+};
+
+
+#define RTM_VERSION     5       /* Up the ante and ignore older versions */
+
+/*
+ * Message types.
+ */
+#define RTM_ADD         0x1     /* Add Route */
+#define RTM_DELETE      0x2     /* Delete Route */
+#define RTM_CHANGE      0x3     /* Change Metrics or flags */
+#define RTM_GET         0x4     /* Report Metrics */
+#define RTM_LOSING      0x5     /* RTM_LOSING is no longer generated by xnu
+	                         *  and is deprecated */
+#define RTM_REDIRECT    0x6     /* Told to use different route */
+#define RTM_MISS        0x7     /* Lookup failed on this address */
+#define RTM_LOCK        0x8     /* fix specified metrics */
+#define RTM_OLDADD      0x9     /* caused by SIOCADDRT */
+#define RTM_OLDDEL      0xa     /* caused by SIOCDELRT */
+#define RTM_RESOLVE     0xb     /* req to resolve dst to LL addr */
+#define RTM_NEWADDR     0xc     /* address being added to iface */
+#define RTM_DELADDR     0xd     /* address being removed from iface */
+#define RTM_IFINFO      0xe     /* iface going up/down etc. */
+#define RTM_NEWMADDR    0xf     /* mcast group membership being added to if */
+#define RTM_DELMADDR    0x10    /* mcast group membership being deleted */
+#define RTM_IFINFO2     0x12    /* */
+#define RTM_NEWMADDR2   0x13    /* */
+#define RTM_GET2        0x14    /* */
+
+/*
+ * Bitmask values for rtm_inits and rmx_locks.
+ */
+#define RTV_MTU         0x1     /* init or lock _mtu */
+#define RTV_HOPCOUNT    0x2     /* init or lock _hopcount */
+#define RTV_EXPIRE      0x4     /* init or lock _expire */
+#define RTV_RPIPE       0x8     /* init or lock _recvpipe */
+#define RTV_SPIPE       0x10    /* init or lock _sendpipe */
+#define RTV_SSTHRESH    0x20    /* init or lock _ssthresh */
+#define RTV_RTT         0x40    /* init or lock _rtt */
+#define RTV_RTTVAR      0x80    /* init or lock _rttvar */
+
+/*
+ * Bitmask values for rtm_addrs.
+ */
+#define RTA_DST         0x1     /* destination sockaddr present */
+#define RTA_GATEWAY     0x2     /* gateway sockaddr present */
+#define RTA_NETMASK     0x4     /* netmask sockaddr present */
+#define RTA_GENMASK     0x8     /* cloning mask sockaddr present */
+#define RTA_IFP         0x10    /* interface name sockaddr present */
+#define RTA_IFA         0x20    /* interface addr sockaddr present */
+#define RTA_AUTHOR      0x40    /* sockaddr for author of redirect */
+#define RTA_BRD         0x80    /* for NEWADDR, broadcast or p-p dest addr */
+
+/*
+ * Index offsets for sockaddr array for alternate internal encoding.
+ */
+#define RTAX_DST        0       /* destination sockaddr present */
+#define RTAX_GATEWAY    1       /* gateway sockaddr present */
+#define RTAX_NETMASK    2       /* netmask sockaddr present */
+#define RTAX_GENMASK    3       /* cloning mask sockaddr present */
+#define RTAX_IFP        4       /* interface name sockaddr present */
+#define RTAX_IFA        5       /* interface addr sockaddr present */
+#define RTAX_AUTHOR     6       /* sockaddr for author of redirect */
+#define RTAX_BRD        7       /* for NEWADDR, broadcast or p-p dest addr */
+#define RTAX_MAX        8       /* size of array to allocate */
+
+struct rt_addrinfo {
+	int     rti_addrs;
+	struct  sockaddr *rti_info[RTAX_MAX];
+};
+
+
+#endif /* _NET_ROUTE_H_ */
+
+

nix/status-go/nimbus_source.nix

@@ -0,0 +1,64 @@
+{ utils, lib, fetchFromGitHub }:
+
+let
+  inherit (lib) strings traceValFn importJSON getConfig;
+
+  srcOverride = getConfig "nimbus-eth1.src-override" null;
+  # Warning message about using local sources
+  localSrcWarn = (path: "Using local nimbus-eth1 sources from ${path}");
+
+  localSrc = rec {
+    owner = "status-im";
+    repo = "nimbus-eth1";
+    rev = "unknown";
+    shortRev = rev;
+    rawVersion = "develop";
+    cleanVersion = rawVersion;
+    goPackagePath = "github.com/${owner}/${repo}";
+    # We use builtins.path so that we can name the resulting derivation,
+    # Normally the name would not be deterministic, taken from the checkout directory.
+    src = builtins.path rec {
+      path = traceValFn localSrcWarn srcOverride;
+      name = "${repo}-source-${shortRev}";
+      # Keep this filter as restrictive as possible in order
+      # to avoid unnecessary rebuilds and limit closure size
+      filter = lib.mkFilter {
+        root = path;
+        include = [ ".*" ];
+        exclude = [
+          ".*/[.]git.*" ".*[.]md" ".*[.]yml" ".*/.*_test.go$"
+          "VERSION" "_assets/.*" "build/.*"
+          ".*/.*LICENSE.*" ".*/CONTRIB.*" ".*/AUTHOR.*"
+        ];
+      };
+    };
+  };
+
+  githubSrc = let
+    owner = "status-im";
+    repo = "nimbus-eth1";
+    # Static lib
+    # rev = "211a0ed1e89bc836a79759e35db4a45f23a79b14";
+    # sha256 = "sha256-Z+PoQMoYJK9ort2ZiXE1oLeoNu2H44HHNnL4pbp+uI8=";
+    # Dynamic lib
+    rev = "1199e476397e271b889e54680dc632e47bc01dd6";
+    sha256 = "sha256-egx+I4h/V/56QRBtlaZffc3hrq7IaZCqL2Lm5XNqH1c=";
+    version = "0.1";
+  in rec {
+    inherit owner repo rev sha256 version;
+    shortRev = strings.substring 0 7 rev;
+    rawVersion = version;
+    cleanVersion = utils.sanitizeVersion version;
+    src = fetchFromGitHub {
+      inherit rev owner repo sha256;
+      name = "${repo}-${shortRev}-source-with-submodules";
+      fetchSubmodules = true;
+    };
+  };
+in
+  if srcOverride != null
+  # If config.status-im.status-go.src-override is defined,
+  # instruct Nix to use that path to build status-go
+  then localSrc
+  # Otherwise grab it from the location defined by status-go-version.json
+  else githubSrc

package.json

@@ -12,6 +12,9 @@
     "app:packager": "react-native start --host 0.0.0.0 --port 8081",
     "app:android": "react-native run-android"
   },
+  "resolutions": {
+    "react-devtools-core": "^4.26.0"
+  },
   "dependencies": {
     "@babel/preset-typescript": "^7.17.12",
     "@react-native-async-storage/async-storage": "^1.17.9",
@@ -37,7 +40,7 @@
     "qrcode": "^1.4.1",
     "react": "16.13.1",
     "react-dom": "^16.4.2",
-    "react-native": "0.63.4",
+    "react-native": "0.63.5",
     "react-native-background-timer": "^2.1.1",
     "react-native-blob-util": "^0.13.18",
     "react-native-camera-kit": "^8.0.4",
@@ -70,6 +73,7 @@
     "react-native-svg": "^9.8.4",
     "react-native-touch-id": "^4.4.1",
     "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
+    "react-syntax-highlighter": "^15.5.0",
     "rn-emoji-keyboard": "git+https://github.com/status-im/rn-emoji-keyboard.git#refs/tags/v0.4.3",
     "tdigest": "^0.1.1"
   },

scripts/lint-re-frame-in-quo-components.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+
+CHANGES=$(git diff --no-ext-diff --diff-filter=d --cached --unified=0 --no-prefix --minimal --exit-code src/quo src/quo2 | grep '^+' || echo '')
+
+INVALID_CHANGES=$(echo "$CHANGES" | grep -E '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt)')
+
+if test -n "$INVALID_CHANGES"; then
+    echo "re-frame dispatch/subscribe is not allowed in quo/quo2 components"
+    echo ''
+    echo "$INVALID_CHANGES"
+    exit 1
+fi

shadow-cljs.edn

@@ -38,13 +38,13 @@
  :builds {:mobile
           {:target :react-native
            :output-dir "app"
-           :init-fn status-im.core/init
+           :init-fn status-im2.setup.core/init
            ;; When false, the Shadow-CLJS watcher won't automatically refresh
            ;; the target files (a.k.a hot reload). When false, you can manually
            ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.
            :devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
-           :dev {:devtools {:after-load status-im.reloader/reload
-                            :build-notify status-im.reloader/build-notify
+           :dev {:devtools {:after-load status-im2.setup.hot-reload/reload
+                            :build-notify status-im2.setup.hot-reload/build-notify
                             :preloads [re-frisk-remote.preload]}
                  :closure-defines
                  {status-im.utils.config/POKT_TOKEN #shadow/env "POKT_TOKEN"

src/i18n/i18n.cljs

@@ -0,0 +1,66 @@
+(ns i18n.i18n
+  (:require
+   ["i18n-js" :as i18n]
+   [clojure.string :as string]
+   [status-im.goog.i18n :as goog.i18n]))
+
+(defn init [default-device-language translations-by-locale]
+  (set! (.-fallbacks i18n) true)
+  (set! (.-defaultSeparator i18n) "/")
+  (set! (.-locale i18n) default-device-language)
+  (set! (.-translations i18n) translations-by-locale))
+
+(defn get-translations []
+  (.-translations i18n))
+
+(defn set-language [lang]
+  (set! (.-locale i18n) lang))
+
+;;:zh, :zh-hans-xx, :zh-hant-xx have been added until this bug will be fixed https://github.com/fnando/i18n-js/issues/460
+
+(def delimeters
+  "This function is a hack: mobile Safari doesn't support toLocaleString(), so we need to pass
+  this map to WKWebView to make number formatting work."
+  (let [n          (.toLocaleString ^js (js/Number 1000.1))
+        delimiter? (= (count n) 7)]
+    (if delimiter?
+      {:delimiter (subs n 1 2)
+       :separator (subs n 5 6)}
+      {:delimiter ""
+       :separator (subs n 4 5)})))
+
+(defn label-number [number]
+  (when number
+    (let [{:keys [delimiter separator]} delimeters]
+      (.toNumber i18n
+                 (string/replace number #"," ".")
+                 (clj->js {:precision                 10
+                           :strip_insignificant_zeros true
+                           :delimiter                 delimiter
+                           :separator                 separator})))))
+
+(def default-option-value "<no value>")
+
+(defn label-options [options]
+  ;; i18n ignores nil value, leading to misleading messages
+  (into {} (for [[k v] options] [k (or v default-option-value)])))
+
+(defn label-fn
+  ([path] (label-fn path {}))
+  ([path options]
+   (if (exists? (.t i18n))
+     (let [options (update options :amount label-number)]
+       (.t i18n (name path) (clj->js (label-options options))))
+     (name path))))
+
+(def label (memoize label-fn))
+
+(defn label-pluralize [count path & options]
+  (if (exists? (.t i18n))
+    (.p i18n count (name path) (clj->js options))
+    (name path)))
+
+(def locale
+  (.-locale i18n))
+
+(def format-currency goog.i18n/format-currency)

src/js/worklet_factory.js

@@ -1,4 +1,4 @@
-import { useDerivedValue } from 'react-native-reanimated';
+import { useDerivedValue, withTiming, withSequence, withDelay, Easing } from 'react-native-reanimated';
 
 // Generic Worklets
 
@@ -32,38 +32,103 @@ export function applyAnimationsToStyle(animations, style) {
 
 // Switcher Worklets
 
-export function switcherCloseButtonOpacity (switcherButtonOpacity) {  
+export function stackOpacity (stackId, selectedStackId) {
   return useDerivedValue(
     function () {
       'worklet'
-      return 1 - switcherButtonOpacity.value;
+      return selectedStackId.value == stackId ? 1 : 0;
     }
   );
 }
 
-export function switcherScreenRadius (switcherScreenSize) {
+export function stackPointer (stackId, selectedStackId) {
   return useDerivedValue(
     function () {
       'worklet'
-      return switcherScreenSize.value/2;
+      return selectedStackId.value == stackId ? "auto" : "none";
     }
   );
 }
 
-export function switcherScreenBottomPosition (switcherScreenRadius, switcherPressedRadius, initalPosition) {
+export function bottomTabIconColor (stackId, selectedStackId, homeStackOpen,
+				    passThrough, selectedTabColor, defaultColor,
+				    passThroughColor) {
   return useDerivedValue(
     function () {
       'worklet'
-      return initalPosition + switcherPressedRadius - switcherScreenRadius.value;
+      if (selectedStackId.value == stackId && homeStackOpen.value){
+	return selectedTabColor;
+      }
+      else if (passThrough.value){
+	return passThroughColor;
+      }
+      else {
+	return defaultColor;
+      }
     }
   );
 }
 
-export function switcherContainerBottomPosition (switcherScreenBottom, heightOffset) {
+
+// Home Stack
+
+const shellAnimationTime = 200;
+
+const defaultDurationAndEasing = {
+  duration: shellAnimationTime,
+  easing: Easing.bezier(0, 0, 1, 1),
+}
+
+export function homeStackOpacity (homeStackOpen) {
   return useDerivedValue(
     function () {
       'worklet'
-      return - (switcherScreenBottom.value + heightOffset);
+      return withTiming(homeStackOpen.value ? 1 : 0, defaultDurationAndEasing);
+    }
+  );
+}
+
+export function homeStackTop (homeStackOpen, top) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return withTiming(homeStackOpen.value ? 0 : top, defaultDurationAndEasing);
+    }
+  );
+}
+
+export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackOpen, left) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      if (animateHomeStackLeft.value) {
+	var leftValue = left[selectedStackId.value];
+	if (homeStackOpen.value) {
+	  return withSequence(withTiming(leftValue, {duration: 0}), withTiming(0, defaultDurationAndEasing))
+	} else {
+	  return withTiming(leftValue, defaultDurationAndEasing);
+	}
+      } else {
+	return 0;
+      }
+    }
+  );
+}
+
+export function homeStackPointer (homeStackOpen) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return homeStackOpen.value ? "auto" : "none";
+    }
+  );
+}
+
+export function homeStackScale (homeStackOpen, minimizeScale) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return withTiming(homeStackOpen.value ? 1 : minimizeScale, defaultDurationAndEasing);
     }
   );
 }

src/quo/components/bottom_sheet/view.cljs

@@ -44,7 +44,7 @@
                                                      (+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when react-native-navigation v8 will be implemented https://github.com/wix/react-native-navigation/issues/7225
                                                      0))
         min-height                (+ (* styles/vertical-padding 2) (:bottom safe-area))
-        max-height                (- window-height (:top safe-area) styles/margin-top)
+        max-height                (- window-height (:top safe-area))
         visible                   (react/state false)
 
         master-translation-y (animated/use-value 0)
@@ -202,17 +202,15 @@
                                                     :wait-for master-ref
                                                     :enabled  (and (not disable-drag?)
                                                                    (not= sheet-height max-height))})
-        [animated/view {:height sheet-height}
-         [animated/scroll-view {:bounces        false
-                                :flex           1
-                                :scroll-enabled (= sheet-height max-height)}
-          [animated/view {:style     {:padding-top    styles/vertical-padding
-                                      :padding-bottom (+ styles/vertical-padding
-                                                         (if (and platform/ios? keyboard-shown)
-                                                           keyboard-height
-                                                           (:bottom safe-area)))}
-                          :on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
-           (into [:<>]
-                 (react/get-children children))]]]]]])))
+        [animated/view {:height sheet-height
+                        :flex           1}
+         [animated/view {:style     {:padding-top    styles/vertical-padding
+                                     :padding-bottom (+ styles/vertical-padding
+                                                        (if (and platform/ios? keyboard-shown)
+                                                          keyboard-height
+                                                          (:bottom safe-area)))}
+                         :on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
+          (into [:<>]
+                (react/get-children children))]]]]])))
 
-(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks)))
+(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks)))

src/quo/react_native.cljs

@@ -56,6 +56,8 @@
                   {:keyboardVerticalOffset (+ 44 (:status-bar-height @navigation-const))})]
           (reagent/children this))))
 
+(def status-bar (.-StatusBar ^js rn))
+
 (def keyboard (.-Keyboard ^js rn))
 
 (def dismiss-keyboard! #(.dismiss ^js keyboard))

src/quo2/components/avatars/account_avatar.cljs

@@ -1,11 +1,11 @@
 (ns quo2.components.avatars.account-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [status-im.ui.components.icons.icons :as icons]
-            [quo.theme :as theme]))
+            [quo2.components.icon :as icons]
+            [quo2.theme :as theme]))
 
 (def icon-color-value
-  {:dark (get-in colors/customization [:dark :purple])
+  {:dark  (get-in colors/customization [:dark :purple])
    :light (get-in colors/customization [:light :purple])})
 
 (defn get-border-radius [size]
@@ -28,11 +28,11 @@
   [{:keys [size icon]
     :or   {size 80
            icon :main-icons/placeholder}}]
-  (let [icon-color           (if (theme/dark?)
-                               (:dark icon-color-value)
-                               (:light icon-color-value))
+  (let [icon-color (if (theme/dark?)
+                     (:dark icon-color-value)
+                     (:light icon-color-value))
         avatar-border-radius (get-border-radius size)
-        inner-icon-size      (get-inner-icon-sizes size)]
+        inner-icon-size (get-inner-icon-sizes size)]
     [rn/view {:style {:width            size
                       :background-color icon-color
                       :height           size
@@ -40,6 +40,5 @@
                       :justify-content  :center
                       :align-items      :center}}
      [icons/icon icon
-      {:no-color        true
-       :container-style {:width  inner-icon-size
-                         :height inner-icon-size}}]]))
+      {:no-color true
+       :size     inner-icon-size}]]))

src/quo2/components/avatars/channel_avatar.cljs

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

src/quo2/components/avatars/group_avatar.cljs

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

src/quo2/components/avatars/icon_avatar.cljs

@@ -1,29 +1,28 @@
 (ns quo2.components.avatars.icon-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [status-im.ui.components.icons.icons :as icons]))
+            [quo2.components.icon :as icons]))
 
 (def sizes
-  {:big 48
+  {:big    48
    :medium 32
-   :small 20})
+   :small  20})
 
 (defn icon-avatar
   [{:keys [size icon color opacity]
     :or   {opacity 20}}]
   (let [component-size (size sizes)
-        circle-color   (colors/custom-color color 50 opacity)
-        icon-color     (colors/custom-color-by-theme color 50 60)
-        icon-size      (case size
-                         :big    20
-                         :medium 16
-                         :small  12)]
+        circle-color (colors/custom-color color 50 opacity)
+        icon-color (colors/custom-color-by-theme color 50 60)
+        icon-size (case size
+                    :big 20
+                    :medium 16
+                    :small 12)]
     [rn/view {:style {:width            component-size
                       :height           component-size
                       :border-radius    component-size
                       :background-color circle-color
                       :justify-content  :center
                       :align-items      :center}}
-     [icons/icon icon {:container-style {:width  icon-size
-                                         :height icon-size}
-                       :color           icon-color}]]))
+     [icons/icon icon {:size  icon-size
+                       :color icon-color}]]))

src/quo2/components/avatars/user_avatar.cljs

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

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.wallet-user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [clojure.string :as clojure-string]))

src/quo2/components/buttons/button.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.buttons.button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [reagent.core :as reagent]
             [quo2.components.icon :as quo2.icons]))
 
@@ -44,6 +44,11 @@
                              :background-color     {:default  colors/danger-50
                                                     :pressed  colors/danger-60
                                                     :disabled colors/danger-50}}
+           :positive        {:icon-color       colors/white
+                             :label            {:style {:color colors/white}}
+                             :background-color {:default  colors/success-50
+                                                :pressed  colors/success-60
+                                                :disabled colors/success-50-opa-30}}
            :photo-bg        {:icon-color           colors/neutral-100
                              :icon-secondary-color colors/neutral-80-opa-40
                              :label                {:style    {:color colors/neutral-100}}
@@ -104,6 +109,11 @@
                              :background-color     {:default  colors/danger-60
                                                     :pressed  colors/danger-50
                                                     :disabled colors/danger-60}}
+           :positive        {:icon-color       colors/white
+                             :label            {:style {:color colors/white}}
+                             :background-color {:default  colors/success-60
+                                                :pressed  colors/success-50
+                                                :disabled colors/success-60-opa-30}}
            :photo-bg        {:icon-color           colors/white
                              :icon-secondary-color colors/neutral-30
                              :label                {:style    {:color colors/white}}

src/quo2/components/buttons/dynamic_button.cljs

@@ -1,7 +1,6 @@
 (ns quo2.components.buttons.dynamic-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im.i18n.i18n :as i18n]
             [quo2.components.icon :as icon]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]))
@@ -23,13 +22,13 @@
 (defn- icon-view [type]
   [icon/icon
    (case type
-     :jump-to           :main-icons2/jump-to
-     :mention           :main-icons2/mention
-     :notification-down :main-icons2/arrow-down
-     :notification-up   :main-icons2/arrow-up
-     :search-with-label :main-icons2/search
-     :search            :main-icons2/search
-     :bottom            :main-icons2/arrow-down)
+     :jump-to           :i/jump-to
+     :mention           :i/mention
+     :notification-down :i/arrow-down
+     :notification-up   :i/arrow-up
+     :search-with-label :i/search
+     :search            :i/search
+     :bottom            :i/arrow-down)
    {:size            12
     :color           (get-icon-and-text-color type)
     :container-style {:margin-top    6
@@ -60,11 +59,14 @@
     :customization-color customize jump-to and mention button color}"
   [_]
   (let [pressed? (reagent/atom false)]
-    (fn [{:keys [type on-press count customization-color style]}]
-      [rn/touchable-without-feedback
-       {:on-press-in      #(reset! pressed? true)
-        :on-press-out     #(reset! pressed? false)
-        :on-press         on-press}
+    (fn [{:keys [type label on-press count customization-color style]}]
+      [rn/touchable-opacity
+       {:on-press-in         #(reset! pressed? true)
+        :on-press-out        #(reset! pressed? false)
+        :on-press            on-press
+        :active-opacity      1
+        :style               {:padding 5}
+        :accessibility-label type}
        [rn/view {:style (merge
                          {:flex-direction   :row
                           :height           24
@@ -92,8 +94,8 @@
                                                 :notification-up   0
                                                 :search-with-label 8)}}
            (case type
-             :jump-to                                       (i18n/label :t/jump-to)
-             :search-with-label                             (i18n/label :t/back)
+             :jump-to                                       label
+             :search-with-label                             label
              (:mention :notification-down :notification-up) (str count))])
         (when (#{:jump-to :notification-down :notification-up} type)
           [icon-view type])]])))

src/quo2/components/code/snippet.cljs

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

src/quo2/components/community/community_card_view.cljs

@@ -1,45 +1,44 @@
 (ns quo2.components.community.community-card-view
   (:require
    [quo2.components.community.community-view :as community-view]
-   [status-im.utils.handlers :refer [<sub]]
-   [status-im.ui.components.react :as react]
-   [status-im.ui.screens.communities.styles :as styles]
-   [status-im.ui.screens.communities.icon :as communities.icon]))
+   [quo2.components.community.style :as style]
+   [react-native.core :as rn]))
 
 (defn community-card-view-item
   [{:keys [name description locked
-           status tokens cover tags featured] :as community} on-press]
-  (let [width (* (<sub [:dimensions/window-width]) 0.90)]
-    [react/touchable-opacity {:on-press on-press}
-     [react/view {:style (merge (styles/community-card 20)
-                                {:margin-bottom 16}
-                                (if featured
-                                  {:margin-right 12
-                                   :width width}
-                                  {:flex              1
-                                   :margin-horizontal 20}))}
-      [react/view {:style         {:height          230
-                                   :border-radius   20}
-                   :on-press      on-press}
-       [react/view
-        {:flex 1}
-        [react/view (styles/community-cover-container 40)
-         [react/image
-          {:source cover
-           :style
-           {:flex 1
-            :border-radius 20}}]]
-        [react/view (styles/card-view-content-container 12)
-         [react/view (styles/card-view-chat-icon 48)
-          [communities.icon/community-icon-redesign community 48]]
-         (when (= status :gated)
-           [react/view (styles/permission-tag-styles)
-            [community-view/permission-tag-container {:locked locked
-                                                      :status status
-                                                      :tokens tokens}]])
-         [community-view/community-title
-          {:title name
-           :description description}]
-         [community-view/community-stats-column :card-view]
-         [community-view/community-tags tags]]]]]]))
+           status tokens cover tags featured]} on-press]
+  [rn/touchable-opacity {:on-press on-press}
+   [rn/view {:style (merge (style/community-card 20)
+                           {:margin-bottom 16}
+                           (if featured
+                             {:margin-right 12}
+                             {:flex              1
+                              :margin-horizontal 20}))}
+    [rn/view {:style    {:height        230
+                         :border-radius 20}
+              :on-press on-press}
+     [rn/view
+      {:flex 1}
+      [rn/view (style/community-cover-container 40)
+       [rn/image
+        {:source cover
+         :style
+         {:flex          1
+          :border-radius 20}}]]
+      [rn/view (style/card-view-content-container 12)
+       [rn/view (style/card-view-chat-icon 48)]
+       ;;TODO new pure component based on quo2 should be implemented without status-im usage
+       ;[communities.icon/community-icon-redesign community 48]]
+       (when (= status :gated)
+         [rn/view (style/permission-tag-styles)
+          [community-view/permission-tag-container {:locked locked
+                                                    :status status
+                                                    :tokens tokens}]])
+       [community-view/community-title
+        {:title       name
+         :description description}]
+       [rn/view {:style (style/card-stats-position)}
+        [community-view/community-stats-column :card-view]]
+       [rn/view {:style (style/community-tags-position)}
+        [community-view/community-tags tags]]]]]]])
 

src/quo2/components/community/community_list_view.cljs

@@ -3,74 +3,89 @@
    [quo2.components.community.community-view :as community-view]
    [quo2.components.markdown.text :as text]
    [quo2.foundations.colors :as colors]
-   [status-im.communities.core :as communities]
-   [status-im.utils.handlers :refer [>evt]]
-   [status-im.ui.components.react :as react]
-   [status-im.ui.screens.communities.styles :as styles]
-   [status-im.ui.screens.communities.community :as community]
-   [status-im.ui.screens.communities.icon :as communities.icon]))
+   [quo2.components.counter.counter :as counter]
+   [quo2.components.icon :as icons]
+   [quo2.components.community.style :as style]
+   [react-native.core :as rn]))
 
-(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
-  [react/view {:style (merge (styles/community-card 16)
-                             {:margin-bottom    12
-                              :margin-horizontal 20})}
-   [react/view {:style         {:height             56
-                                :border-radius      16}
-                :on-press      (fn []
-                                 (>evt [::communities/load-category-states id])
-                                 (>evt [:dismiss-keyboard])
-                                 (>evt [:navigate-to :community {:community-id id}]))
-                :on-long-press #(>evt [:bottom-sheet/show-sheet
-                                       {:content (fn []
-                                                   [community/community-actions community])}])}
-    [react/view {:flex    1}
-     [react/view {:flex-direction     :row
-                  :border-radius      16
-                  :padding-horizontal 12
-                  :align-items        :center
-                  :padding-vertical   8
-                  :background-color   background-color}
-      [react/view
-       [communities.icon/community-icon-redesign community 32]]
-      [react/view {:flex              1
-                   :margin-horizontal 12}
+(defn communities-list-view-item [props {:keys [name locked? status notifications
+                                                tokens background-color]}]
+  [rn/view {:style (merge (style/community-card 16)
+                          {:margin-bottom     12
+                           :margin-horizontal 20})}
+   [rn/touchable-highlight (merge {:style {:height        56
+                                           :border-radius 16}}
+                                  props)
+    [rn/view {:flex 1}
+     [rn/view {:flex-direction     :row
+               :border-radius      16
+               :padding-horizontal 12
+               :align-items        :center
+               :padding-vertical   8
+               :background-color   background-color}
+      [rn/view]
+       ;;TODO new pure component based on quo2 should be implemented without status-im usage
+       ;[communities.icon/community-icon-redesign community 32]]
+      [rn/view {:flex              1
+                :margin-horizontal 12}
        [text/text {:weight              :semi-bold
                    :size                :paragraph-1
                    :accessibility-label :community-name-text
                    :number-of-lines     1
-                   :ellipsize-mode      :tail}
+                   :ellipsize-mode      :tail
+                   :style               {:color (when (= notifications :muted)
+                                                  (colors/theme-colors
+                                                   colors/neutral-40
+                                                   colors/neutral-60))}}
         name]
        [community-view/community-stats-column :list-view]]
-      (when (= status :gated)
-        [community-view/permission-tag-container {:locked       locked
-                                                  :status       status
-                                                  :tokens       tokens}])]]]])
+      (if (= status :gated)
+        [community-view/permission-tag-container {:locked? locked?
+                                                  :tokens  tokens}]
+        (cond
+          (= notifications :unread-messages-count)
+          [rn/view {:style {:width            8
+                            :height           8
+                            :border-radius    4
+                            :background-color (colors/theme-colors
+                                               colors/neutral-40
+                                               colors/neutral-60)}}]
 
-(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
-  [react/view {:margin-bottom       12
-               :padding-horizontal  8}
-   [react/touchable-highlight {:underlay-color      colors/primary-50-opa-5
-                               :style               {:border-radius 12}
-                               :on-press      (fn []
-                                                (>evt [::communities/load-category-states id])
-                                                (>evt [:dismiss-keyboard])
-                                                (>evt [:navigate-to :community {:community-id id}]))
-                               :on-long-press #(>evt [:bottom-sheet/show-sheet
-                                                      {:content (fn []
-                                                                  [community/community-actions community])}])}
-    [react/view {:flex               1
-                 :padding-vertical   8
-                 :padding-horizontal 12}
-     [react/view {:flex-direction    :row
-                  :border-radius     16
-                  :align-items       :center}
-      [communities.icon/community-icon-redesign community 48]
-      [react/view {:margin-left   12
-                   :flex          1}
-       [community-view/community-title {:title  name}]]
+          (= notifications :unread-mentions-count)
+          [counter/counter {:type :default} 5]
+
+          (= notifications :muted)
+          [icons/icon :i/muted {:container-style {:align-items     :center
+                                                  :justify-content :center}
+                                :resize-mode     :center
+                                :size            20
+                                :color           (colors/theme-colors
+                                                  colors/neutral-40
+                                                  colors/neutral-50)}]))]]]])
+
+(defn communities-membership-list-item [props {:keys [name status tokens locked?]}]
+  [rn/view {:margin-bottom 20}
+   [rn/touchable-highlight (merge {:underlay-color colors/primary-50-opa-5
+                                   :style          {:border-radius 12}}
+                                  props)
+    [rn/view {:flex 1}
+     [rn/view {:flex-direction :row
+               :border-radius  16
+               :align-items    :center}
+      ;;TODO new pure component based on quo2 should be implemented without status-im usage
+      ;[communities.icon/community-icon-redesign community 32]
+      [rn/view {:flex            1
+                :margin-left     12
+                :justify-content :center}
+       [text/text
+        {:accessibility-label :chat-name-text
+         :number-of-lines     1
+         :ellipsize-mode      :tail
+         :weight              :semi-bold
+         :size                :paragraph-1}
+        name]]
       (when (= status :gated)
-        [react/view {:justify-content   :center
-                     :margin-right      12}
-         [community-view/permission-tag-container {:locked       locked
-                                                   :status       status
-                                                   :tokens       tokens}]])]]]])
+        [rn/view {:justify-content :center
+                  :margin-right    12}
+         [community-view/permission-tag-container {:locked? locked?
+                                                   :tokens  tokens}]])]]]])

src/quo2/components/community/community_view.cljs

@@ -4,83 +4,75 @@
    [quo2.components.icon :as icons]
    [quo2.foundations.colors :as colors]
    [quo2.components.tags.permission-tag :as permission]
-   [quo2.components.tags.tag  :as tag]
-   [status-im.ui.components.react :as react]
-   [status-im.utils.money :as money]
-   [status-im.i18n.i18n :as i18n]
-   [status-im.ui.screens.communities.styles :as styles]))
+   [quo2.components.tags.tag :as tag]
+   [quo2.components.community.style :as style]
+   [react-native.core :as rn]))
 
-(defn format-members [count]
-  (if (> count 1000000)
-    (str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
-    (if (and (> count 999) (< count 1000000))
-      (str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
-      count)))
-
-(defn community-stats [{:keys [icon count icon-color]}]
-  [react/view (styles/stats-count-container)
-   [react/view {:margin-right  4}
+(defn community-stats [{:keys [icon members-count icon-color]}]
+  [rn/view (style/stats-count-container)
+   [rn/view {:margin-right 4}
     [icons/icon icon {:container-style {:align-items     :center
                                         :justify-content :center}
-                      :resize-mode      :center
-                      :size             16
-                      :color            icon-color}]]
-   [text/text {:weight  :regular
-               :size    :paragraph-1}
-    (format-members count)]])
+                      :resize-mode     :center
+                      :size            16
+                      :color           icon-color}]]
+   [text/text {:weight :regular
+               :size   :paragraph-1}
+    members-count]])
 
 (defn community-stats-column [type]
-  (let [icon-color  (colors/theme-colors colors/neutral-50 colors/neutral-40)]
-    [react/view (if (= type :card-view)
-                  (styles/card-stats-container)
-                  (styles/list-stats-container))
-     [community-stats {:icon       :main-icons2/group
-                       :count      "629.2K"
+  (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
+    [rn/view (if (= type :card-view)
+               (style/card-stats-container)
+               (style/list-stats-container))
+     [community-stats {:icon       :i/group
+                       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
                        :icon-color icon-color}]
-     [community-stats {:icon       :main-icons2/lightning
-                       :count      "112.1K"
+     [community-stats {:icon       :i/lightning
+                       :members-count "112.1K"
                        :icon-color icon-color}]
-     [community-stats {:icon       :main-icons2/placeholder
-                       :count      4
-                       :icon-color icon-color}]]))
+     (when (= type :card-view)
+       [community-stats {:icon       :i/placeholder
+                         :count      4
+                         :icon-color icon-color}])]))
 
 (defn community-tags [tags]
-  [react/view (styles/community-tags-container)
+  [rn/view (style/community-tags-container)
    (for [{:keys [id tag-label resource]} tags]
      ^{:key id}
-     [react/view {:margin-right 8}
+     [rn/view {:margin-right 8}
       [tag/tag
-       {:id          id
-        :size        24
-        :label       tag-label
-        :type        :emoji
-        :labelled    true
-        :resource    resource}]])])
+       {:id       id
+        :size     24
+        :label    tag-label
+        :type     :emoji
+        :labelled true
+        :resource resource}]])])
 
 (defn community-title [{:keys [title description size] :or {size :small}}]
-  [react/view (styles/community-title-description-container (if (= size :large) 56 32))
+  [rn/view (style/community-title-description-container (if (= size :large) 56 32))
    (when title
      [text/text
       {:accessibility-label :chat-name-text
        :number-of-lines     1
        :ellipsize-mode      :tail
        :weight              :semi-bold
-       :size               (if (= size :large) :heading-1 :heading-2)}
+       :size                (if (= size :large) :heading-1 :heading-2)}
       title])
    (when description
      [text/text
       {:accessibility-label :community-description-text
        :number-of-lines     2
        :ellipsize-mode      :tail
-       :weight  :regular
-       :size    :paragraph-1
-       :style {:margin-top (if (= size :large) 8 2)}}
+       :weight              :regular
+       :size                :paragraph-1
+       :style               {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(defn permission-tag-container [{:keys [locked tokens]}]
+(defn permission-tag-container [{:keys [locked? tokens]}]
   [permission/tag {:background-color (colors/theme-colors
                                       colors/neutral-10
                                       colors/neutral-80)
-                   :locked           locked
+                   :locked?          locked?
                    :tokens           tokens
-                   :size             24}])
+                   :size             24}])

src/quo2/components/community/discover_card.cljs

@@ -0,0 +1,94 @@
+(ns quo2.components.community.discover-card
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.community.style :as style]
+            [react-native.core :as rn]))
+
+;; Discover card placeholders images.
+;; TODO replaced when real data is available
+(def images
+  {:images [{:id 1 :column-images [{:id 1   :image   ""}]}
+            {:id 2 :column-images [{}]}]})
+
+(defn card-title-and-description [title description]
+  [rn/view
+   {:flex               1
+    :padding-top        8
+    :padding-bottom     8
+    :border-radius      12}
+   [rn/view {:flex                1
+             :padding-horizontal  12}
+    [text/text {:accessibility-label :community-name-text
+                :ellipsize-mode      :tail
+                :number-of-lines     1
+                :weight              :semi-bold
+                :size                :paragraph-1}
+     title]
+    [text/text {:accessibility-label :community-name-text
+                :ellipsize-mode      :tail
+                :number-of-lines     1
+                :color               (colors/theme-colors
+                                      colors/neutral-50
+                                      colors/neutral-40)
+                :weight               :regular
+                :size                 :paragraph-2}
+     description]]])
+
+(defn placeholder-list-images [{:keys [images width height border-radius]}]
+  [rn/view
+   [rn/view {:justify-content    :center}
+    (for [{:keys [id]} images]
+      ^{:key id}
+      [rn/view {:border-radius    border-radius
+                :margin-top       4
+                :margin-right     4
+                :width            width
+                :height           height
+                :background-color colors/neutral-10}])]])
+
+(defn placeholder-row-images [{:keys [first-image last-image images width height
+                                      border-radius]}]
+  [rn/view
+   (when first-image
+     [rn/view {:border-bottom-right-radius 6
+               :border-bottom-left-radius  6
+               :margin-right               4
+               :width                      width
+               :height                     height
+               :background-color           colors/neutral-10}])
+   (when images
+     [placeholder-list-images {:images        images
+                               :width         32
+                               :height        32
+                               :border-radius 6}])
+   (when last-image
+     [rn/view {:border-top-left-radius    border-radius
+               :border-top-right-radius   6
+               :margin-top                4
+               :width                     width
+               :height                    height
+               :background-color          colors/neutral-10}])])
+
+(defn discover-card [{:keys [title description on-press accessibility-label]}]
+  (let [on-joined-images     (get images   :images)]
+    [rn/touchable-without-feedback
+     {:on-press            on-press
+      :accessibility-label accessibility-label}
+     [rn/view (merge (style/community-card 16)
+                     {:background-color  (colors/theme-colors
+                                          colors/white
+                                          colors/neutral-90)}
+                     {:flex-direction  :row
+                      :margin-horizontal 20
+                      :height          56
+                      :padding-right   12})
+      [card-title-and-description title description]
+      (for [{:keys [id column-images]} on-joined-images]
+        ^{:key id}
+        [placeholder-row-images {:images        (when (= id 1)
+                                                  column-images)
+                                 :width         32
+                                 :height        (if (= id 1) 8 26)
+                                 :border-radius 6
+                                 :first-image   "" ; TODO replace with real data
+                                 :last-image    ""}])]])) ; TODO replace with real data

src/quo2/components/community/style.cljs

@@ -1,6 +1,5 @@
-(ns status-im.ui.screens.communities.styles
-  (:require
-   [quo2.foundations.colors :as colors]))
+(ns quo2.components.community.style
+  (:require [quo2.foundations.colors :as colors]))
 
 (def category-item
   {:flex           1
@@ -28,16 +27,26 @@
    :margin-right   16})
 
 (defn card-stats-container []
-  {:flex-direction :row
-   :margin-top 12})
+  {:flex-direction :row})
 
 (defn list-stats-container []
   {:flex-direction :row
    :align-items    :center})
 
 (defn community-tags-container  []
-  {:flex-direction :row
-   :margin-top 16})
+  {:flex-direction :row})
+
+(defn card-stats-position []
+  {:position       :absolute
+   :top            116
+   :right          12
+   :left           12})
+
+(defn community-tags-position  []
+  {:position       :absolute
+   :top            154
+   :right          12
+   :left           12})
 
 (defn card-view-content-container [padding-horizontal]
   {:flex               1

src/quo2/components/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.counter.counter
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]))
 

src/quo2/components/dividers/divider_label.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.dividers.divider-label
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.markdown.text :as markdown.text]
-            [status-im.ui.components.icons.icons :as icons]
-            [quo2.foundations.colors :as colors]))
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icons]))
 
 (def chevron-icon-container-width 20)
 
@@ -42,8 +42,7 @@
        [icons/icon
         :main-icons/chevron-down
         {:color  text-and-icon-color
-         :width  chevron-icon-container-width
-         :height chevron-icon-container-height}])
+         :size  chevron-icon-container-width}])
      (when (pos? counter-value)
        [rn/view {:style {:border-radius 6
                          :height 16

src/quo2/components/dividers/new_messages.cljs

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

src/quo2/components/drawers/action_drawers.cljs

@@ -1,68 +1,74 @@
 (ns quo2.components.drawers.action-drawers
-  (:require  [status-im.ui.components.react :as react]
-             [quo.react-native :as rn]
-             [quo2.components.markdown.text :as text]
-             [quo2.components.icon :as icon]
-             [quo2.foundations.colors :as colors]))
+  (:require [react-native.core :as rn]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icon]
+            [quo2.foundations.colors :as colors]))
 
-(defn- get-icon-color [section]
-  (if (= section :bottom)
+(defn- get-icon-color [danger?]
+  (if danger?
     (colors/theme-colors colors/danger-50 colors/danger-60)
     (colors/theme-colors colors/neutral-50 colors/neutral-40)))
 
-(defn action [section]
-  (fn [{:keys [icon label sub-label right-icon on-press]}]
+(defn action [{:keys [icon
+                      label
+                      sub-label
+                      right-icon
+                      danger?
+                      on-press] :as action-props}]
+  (when action-props
     [rn/touchable-opacity {:on-press on-press}
-     [react/view {:style
-                  {:flex 1
-                   :height (if sub-label 56 47)
-                   :margin-horizontal 20
-                   :flex-direction :row}}
-      [react/view {:style
-                   {:height 20
-                    :margin-top :auto
-                    :margin-bottom :auto
-                    :margin-right 12
-                    :width 20}}
+     [rn/view {:style
+               {:height            (if sub-label 56 47)
+                :margin-horizontal 20
+                :flex-direction    :row}}
+      [rn/view {:style
+                {:height        20
+                 :margin-top    :auto
+                 :margin-bottom :auto
+                 :margin-right  12
+                 :width         20}}
        [icon/icon icon
-        {:color (get-icon-color section)
-         :size 20}]]
-      [react/view
+        {:color (get-icon-color danger?)
+         :size  20}]]
+      [rn/view
        {:style
-        {:flex 1
+        {:flex            1
          :justify-content :center}}
        [text/text
-        {:size :paragraph-1
+        {:size   :paragraph-1
          :weight :medium
-         :style
-         {:color (when (= section :bottom)
-                   (colors/theme-colors colors/danger-50 colors/danger-60))}}
+         :style  {:color
+                  (when danger?
+                    (colors/theme-colors colors/danger-50 colors/danger-60))}}
         label]
-       (when sub-label [text/text
-                        {:size :paragraph-2
-                         :style
-                         {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
-                        sub-label])]
+       (when sub-label
+         [text/text
+          {:size  :paragraph-2
+           :style {:color
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
+          sub-label])]
       (when right-icon
-        [react/view {:style
-                     {:height 20
-                      :margin-top :auto
-                      :margin-bottom :auto
-                      :width 20}}
+        [rn/view {:style
+                  {:height        20
+                   :margin-top    :auto
+                   :margin-bottom :auto
+                   :width         20}}
          [icon/icon right-icon
-          {:color (get-icon-color section)
-           :size 20}]])]]))
+          {:color (get-icon-color danger?)
+           :size  20}]])]]))
 
-(defn action-drawer [{:keys [actions actions-with-consequence]}]
+(defn divider []
+  [rn/view {:style {:border-top-width 1
+                    :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
+                    :margin-top       8
+                    :margin-bottom    7
+                    :align-items      :center
+                    :flex-direction   :row}}])
+
+(defn action-drawer [sections]
   [:<> {:style
         {:flex 1}}
-   (map (action :top) actions)
-   (when actions-with-consequence
-     [:<>
-      [rn/view {:style {:border-top-width 1
-                        :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
-                        :margin-top       8
-                        :margin-bottom    7
-                        :align-items      :center
-                        :flex-direction   :row}}]
-      (map (action :bottom) actions-with-consequence)])])
+   (interpose
+    [divider]
+    (for [actions sections]
+      (map action actions)))])

src/quo2/components/dropdowns/dropdown.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.reanimated :as reanimated]
+            [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]))
 
 (defn apply-anim [dd-height val]

src/quo2/components/header.cljs

@@ -1,11 +1,10 @@
 (ns quo2.components.header
   (:require [oops.core :refer [oget]]
-            [quo.animated :as animated]
+            [react-native.reanimated :as reanimated]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo.design-system.spacing :as spacing]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [reagent.core :as reagent]))
 
 (def header-height 56)
@@ -61,15 +60,14 @@
       :right           (max (:width left) (:width right))})))
 
 (def header-actions-style
-  (merge
-   {:flex               1
-    :flex-direction     :row
-    :align-items        :center
-    :justify-content    :center}
-   (:x-tiny spacing/padding-horizontal)))
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :justify-content    :center
+   :padding-horizontal 4})
 
 (def header-action-placeholder
-  {:width (:base spacing/spacing)})
+  {:width 16})
 
 (def element {:align-items        :center
               :justify-content    :center
@@ -145,9 +143,9 @@
                  border-bottom false}}]
       (let [status-bar-height (get insets :top 0)
             height            (+ header-height status-bar-height)]
-        [animated/view {:style (header-wrapper-style {:height        height
-                                                      :background    background
-                                                      :border-bottom border-bottom})}
+        [reanimated/view {:style (header-wrapper-style {:height        height
+                                                        :background    background
+                                                        :border-bottom border-bottom})}
          [rn/view {:pointer-events :box-none
                    :height         status-bar-height}]
          [rn/view {:style          (merge {:height header-height}

src/quo2/components/icon.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.icon
   (:require
-   [quo2.components.icons.icons :as icons]
-   [status-im.ui.components.react :as react]
    [clojure.string :as string]
+   [react-native.core :as rn]
+   [quo2.components.icons.icons :as icons]
    [quo2.foundations.colors :as colors]))
 
 (defn memo-icon-fn
@@ -12,7 +12,7 @@
                :or   {accessibility-label :icon}}]
    (let [size (or size 20)]
      ^{:key icon-name}
-     [react/image
+     [rn/image
       {:style
        (merge {:width  size
                :height size}

src/quo2/components/info/info_message.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.info-message
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]))

src/quo2/components/info/information_box.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.information-box
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [react-native.core :as rn]
             [clojure.string :as string]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]
@@ -78,10 +78,10 @@
           [rn/touchable-opacity
            {:on-press            on-close
             :accessibility-label (str (or id "information-box") "-close-button")}
-           [quo2.icons/icon :main-icons2/close {:size            12
-                                                :color           (get-color :close-button)
-                                                :container-style {:margin-top  4
-                                                                  :margin-left 8}}]])]
+           [quo2.icons/icon :i/close {:size            12
+                                      :color           (get-color :close-button)
+                                      :container-style {:margin-top  4
+                                                        :margin-left 8}}]])]
        (when include-button?
          [quo2.button/button {:type     :primary
                               :size     24

src/quo2/components/list_items/channel.cljs

@@ -1,15 +1,15 @@
 (ns quo2.components.list-items.channel
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.counter.counter :as quo2.counter]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.avatars.channel-avatar :as channel-avatar]
             [quo2.components.markdown.text :as quo2.text]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (defn list-item [{:keys [name locked? mentions-count unread-messages?
                          muted? is-active-channel? emoji channel-color]
-                  :or {channel-color colors/primary-50}}]
+                  :or   {channel-color colors/primary-50}}]
   [rn/view {:style (merge {:height          48
                            :display         :flex
                            :border-radius   12
@@ -21,26 +21,24 @@
                            :padding-right   12}
                           (when is-active-channel?
                             {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
-   [rn/view {:display :flex
-             :flex-direction :row
+   [rn/view {:display         :flex
+             :flex-direction  :row
              :justify-content :flex-start
-             :align-items :center}
+             :align-items     :center}
     [channel-avatar/channel-avatar
      {:big?                   true
-      :locked?            locked?
+      :locked?                locked?
       :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
       :emoji                  emoji}]
     [quo2.text/text
-     {:style (merge {:margin-left 12}
-                    (when
-                     (and (not locked?)
-                          muted?)
-                      {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
+     {:style  (merge {:margin-left 12}
+                     (when (and (not locked?) muted?)
+                       {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
       :weight :medium :size :paragraph-1} (str "# " name)]]
    [rn/view {:style {:height 20}}
     (when (and (not locked?)
                muted?)
-      [quo2.icons/icon :main-icons2/muted
+      [quo2.icons/icon :i/muted
        {:size     20
         :no-color true}])
     (when (and (not locked?)
@@ -53,6 +51,6 @@
                (not muted?)
                (not (pos? (int mentions-count)))
                unread-messages?)
-      [quo2.icons/icon :main-icons2/channel-notification
+      [quo2.icons/icon :i/channel-notification
        {:size     20
-        :no-color true}])]])
+        :no-color true}])]])

src/quo2/components/list_items/menu_item.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.list-items.menu-item
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors :refer [theme-colors]]
             [quo2.components.markdown.text :as text]
             [quo2.components.icon :as icons]))

src/quo2/components/list_items/preview_list.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.list-items.preview-list
-  (:require [quo.react-native :as rn]
-            [status-im.i18n.i18n :as i18n]
+  (:require [react-native.core :as rn]
+            [react-native.hole-view :as hole-view]
+            [react-native.fast-image :as fast-image]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]
-            [status-im.ui.components.fast-image :as fast-image]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.markdown.text :as quo2.text]))
 
@@ -42,13 +42,13 @@
 (defn list-item [index type size item list-size margin-left
                  hole-size hole-radius hole-x hole-y border-radius]
   (let [last-item? (= index (- list-size 1))]
-    [rn/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
-                   :holes (if last-item? []
-                              [{:x             hole-x
-                                :y             hole-y
-                                :width         hole-size
-                                :height        hole-size
-                                :borderRadius  hole-radius}])}
+    [hole-view/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
+                          :holes (if last-item? []
+                                     [{:x             hole-x
+                                       :y             hole-y
+                                       :width         hole-size
+                                       :height        hole-size
+                                       :borderRadius  hole-radius}])}
      [avatar item type size border-radius]]))
 
 (defn get-overflow-color [transparent? transparent-color light-color dark-color override-theme]
@@ -56,7 +56,7 @@
     transparent-color
     (colors/theme-colors light-color dark-color override-theme)))
 
-(defn overflow-label [label size transparent? border-radius margin-left override-theme]
+(defn overflow-label [label size transparent? border-radius margin-left override-theme more-than-99-label]
   [rn/view {:style {:width            size
                     :height           size
                     :margin-left      margin-left
@@ -70,13 +70,13 @@
                                        colors/neutral-70
                                        override-theme)}}
    (if (= size 16)
-     [quo2.icons/icon :main-icons2/more {:size 12
-                                         :color (get-overflow-color
-                                                 transparent?
-                                                 colors/white-opa-70
-                                                 colors/neutral-50
-                                                 colors/neutral-40
-                                                 override-theme)}]
+     [quo2.icons/icon :i/more {:size 12
+                               :color (get-overflow-color
+                                       transparent?
+                                       colors/white-opa-70
+                                       colors/neutral-50
+                                       colors/neutral-40
+                                       override-theme)}]
      [quo2.text/text {:size   (if (= size 32) :paragraph-2 :label)
                       :weight :medium
                       :style  {:color       (get-overflow-color
@@ -89,7 +89,7 @@
       ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
       (if (< label 100)
         (str "+" label)
-        (i18n/label :counter-99-plus))])])
+        more-than-99-label)])])
 
 (defn border-type [type]
   (case type
@@ -105,7 +105,7 @@
     :transparent?  overflow-label transparent?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size list-size transparent? override-theme]} items]
+  [{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
   (let [items-arr     (into [] items)
         list-size     (or list-size (count items))
         margin-left   (get-in params [size :margin-left])
@@ -120,4 +120,4 @@
        [list-item index type size (get items-arr index) list-size
         margin-left hole-size hole-radius hole-x hole-y border-radius])
      (when (> list-size 4)
-       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme])]))
+       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme more-than-99-label])]))

src/quo2/components/markdown/text.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.markdown.text
-  (:require [quo.react-native :as rn]
-            [quo.theme :as theme]
+  (:require [react-native.core :as rn]
+            [quo2.theme :as theme]
             [quo2.foundations.colors :as colors]
             [quo2.foundations.typography :as typography]
             [reagent.core :as reagent]))
@@ -12,6 +12,7 @@
            :semi-bold typography/font-semi-bold
            :bold      typography/font-bold
            :monospace typography/monospace
+           :code      typography/code
            :inherit   nil)
          (case (or size :paragraph-1)
            :label       typography/label

src/quo2/components/messages/gap.cljs

@@ -1,15 +1,12 @@
 (ns quo2.components.messages.gap
   (:require
    [oops.core :refer [oget]]
-   [quo.react-native :as rn]
-   [quo.theme :as theme]
+   [react-native.core :as rn]
+   [quo2.theme :as theme]
    [quo2.components.icon :as icon]
    [quo2.components.markdown.text :as text]
    [quo2.foundations.colors :as colors]
-   [reagent.core :as reagent]
-   [status-im.i18n.i18n :as i18n]
-   [status-im.ui.components.react :refer [pressable-class]]
-   [status-im.utils.handlers :refer [>evt]]))
+   [reagent.core :as reagent]))
 
 ;;; helpers
 (def themes
@@ -84,7 +81,7 @@
                       :color          (get-color :time)}} str])
 
 (defn info-button [on-press]
-  [pressable-class
+  [rn/touchable-without-feedback
    {:on-press on-press}
    [icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
 
@@ -99,7 +96,7 @@
    [rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}]
    [circle]])
 
-(defn body [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]
+(defn body [timestamp-far timestamp-near on-info-button-pressed on-press warning-label]
   [rn/view {:flex 1}
    [rn/view
     {:flex-direction    :row
@@ -109,12 +106,10 @@
     [timestamp timestamp-far]
     (when on-info-button-pressed [info-button on-info-button-pressed])]
 
-   [pressable-class
+   [rn/touchable-without-feedback
     {:style    {:flex 1 :margin-top 16 :margin-bottom 20}
-     :on-press #(when (and chat-id gap-ids)
-                  (>evt [:chat.ui/fill-gaps chat-id gap-ids]))}
-    [text/text
-     (i18n/label :messages-gap-warning)]]
+     :on-press #(when on-press (on-press))}
+    [text/text warning-label]]
 
    [timestamp timestamp-near]])
 
@@ -124,10 +119,10 @@
   if `on-info-button-pressed` fn is provided, the info button will show up and is pressable"
   [{:keys [timestamp-far
            timestamp-near
-           gap-ids
-           chat-id
            on-info-button-pressed
-           style]}]
+           style
+           on-press
+           warning-label]}]
   (let [body-height (reagent/atom nil)]
     (fn []
       [rn/view
@@ -145,6 +140,6 @@
                        style)
 
         [timeline]
-        [body timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]]
+        [body timestamp-far timestamp-near on-info-button-pressed on-press warning-label]]
        [vborder :left body-height]
        [vborder :right body-height]])))

src/quo2/components/messages/system_message.cljs

@@ -1,13 +1,12 @@
 (ns quo2.components.messages.system-message
-  (:require [quo.react-native :as rn]
-            [quo.theme :as theme]
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [quo2.theme :as theme]
             [quo2.components.avatars.icon-avatar :as icon-avatar]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.reanimated :as ra]
-            [status-im.i18n.i18n :as i18n]
-            [status-im.utils.core :as utils]))
+            [utils :as utils]))
 
 (def themes-landed {:pinned  colors/primary-50-opa-5
                     :added   colors/primary-50-opa-5
@@ -54,7 +53,7 @@
 
 (defmulti sm-render :type)
 
-(defmethod sm-render :deleted [{:keys [label timestamp-str]}]
+(defmethod sm-render :deleted [{:keys [label timestamp-str labels]}]
   [rn/view {:align-items     :center
             :justify-content :space-between
             :flex            1
@@ -67,10 +66,10 @@
     [text/text {:size  :paragraph-2
                 :style {:color        (get-color :text)
                         :margin-right 5}}
-     (i18n/label (or label :message-deleted))]
+     (or label (:message-deleted labels))]
     [sm-timestamp timestamp-str]]])
 
-(defmethod sm-render :added [{:keys [state mentions timestamp-str]}]
+(defmethod sm-render :added [{:keys [state mentions timestamp-str labels]}]
   [rn/view {:align-items    :center
             :flex-direction :row}
    [sm-icon {:icon    :main-icons/add-user16
@@ -84,14 +83,14 @@
                :style {:color        (get-color :text)
                        :margin-left  3
                        :margin-right 3}}
-    (i18n/label :added)]
+    (:added labels)]
    [sm-user-avatar (:image (second mentions))]
    [text/text {:weight :semi-bold
                :size   :paragraph-2}
     (:name (second mentions))]
    [sm-timestamp timestamp-str]])
 
-(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str]}]
+(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str labels]}]
   [rn/view {:flex-direction :row
             :flex           1
             :align-items    :center}
@@ -110,7 +109,7 @@
                :margin-right 2}
       [text/text {:size  :paragraph-2
                   :style {:color (get-color :text)}}
-       (i18n/label :pinned-a-message)]]
+       (:pinned-a-message labels)]]
      [sm-timestamp timestamp-str]]
     [rn/view {:flex-direction :row}
      [rn/view {:flex-direction :row
@@ -137,19 +136,19 @@
          (utils/truncate-str (:info content) 24)])]]]])
 
 (defn system-message
-  [{:keys [type style non-pressable? animate-landing?] :as message}]
+  [{:keys [type style non-pressable? animate-landing? labels] :as message}]
   [:f>
    (fn []
-     (let [sv-color (ra/use-shared-value
+     (let [sv-color (reanimated/use-shared-value
                      (get-color :bg (if animate-landing? :landed :default) type))]
        (when animate-landing?
-         (ra/animate-shared-value-with-delay
+         (reanimated/animate-shared-value-with-delay
           sv-color (get-color :bg :default type) 0 :linear 1000))
-       [ra/touchable-opacity
+       [reanimated/touchable-opacity
         {:on-press #(when-not non-pressable?
-                      (ra/set-shared-value
+                      (reanimated/set-shared-value
                        sv-color (get-color :bg :pressed type)))
-         :style    (ra/apply-animations-to-style
+         :style    (reanimated/apply-animations-to-style
                     {:background-color sv-color}
                     (merge
                      {:flex-direction     :row
@@ -159,4 +158,4 @@
                       :padding-horizontal 11
                       :background-color   sv-color}
                      style))}
-        [sm-render message]]))])
+        [sm-render message labels]]))])

src/quo2/components/navigation/bottom_nav_tab.cljs

@@ -1,71 +1,78 @@
 (ns quo2.components.navigation.bottom-nav-tab
-  (:require [quo.react-native :as rn]
-            [reagent.core :as reagent]
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [react-native.hole-view :as hole-view]
             [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icon]
+            [quo2.components.icons.icons :as icons]
             [quo2.components.counter.counter :as counter]))
 
 (defn toggle-background-color [background-color press-out? pass-through?]
-  (let [color (cond
-                press-out?    nil
-                pass-through? colors/white-opa-5
-                :else         colors/neutral-70)]
-    (reset! background-color color)))
+  (reanimated/set-shared-value
+   background-color
+   (cond
+     press-out?    "transparent"
+     pass-through? colors/white-opa-5
+     :else         colors/neutral-70)))
 
 (defn bottom-nav-tab
   "[bottom-nav-tab opts]
    opts
-   {:icon                   :main-icons2/communities
-    :selected?              true/false
+   {:icon                   :i/communities
     :new-notifications?     true/false
     :notification-indicator :unread-dot/:counter
     :counter-label          number
     :on-press               bottom-tab on-press function
     :pass-through?          true/false
+    :icon-color-anim        reanimated shared value
   "
-  [_]
-  (let [background-color (reagent/atom nil)]
-    (fn [{:keys [icon selected? new-notifications? notification-indicator counter-label on-press pass-through?]}]
-      [rn/touchable-without-feedback
-       {:on-press       on-press
-        :on-press-in    #(toggle-background-color background-color false pass-through?)
-        :on-press-out   #(toggle-background-color background-color true pass-through?)}
-       [rn/view {:style {:width            90
-                         :height           40
-                         :background-color @background-color
-                         :border-radius    10}}
-        [rn/hole-view {:style {:padding-left 33
-                               :padding-top  8}
-                       :key    new-notifications? ;; Key is required to force removal of holes
-                       :holes  (cond
-                                 (not new-notifications?) ;; No new notifications, remove holes
-                                 []
+  [{:keys [icon new-notifications? notification-indicator counter-label
+           on-press pass-through? icon-color-anim accessibility-label]}]
+  [:f>
+   (fn []
+     (let [icon-animated-style       (reanimated/apply-animations-to-style
+                                      {:tint-color icon-color-anim}
+                                      {:width  24
+                                       :height 24})
+           background-color          (reanimated/use-shared-value "transparent")
+           background-animated-style (reanimated/apply-animations-to-style
+                                      {:background-color background-color}
+                                      {:width            90
+                                       :height           40
+                                       :border-radius    10})]
+       [rn/touchable-without-feedback
+        {:on-press            on-press
+         :on-press-in         #(toggle-background-color background-color false pass-through?)
+         :on-press-out        #(toggle-background-color background-color true pass-through?)
+         :accessibility-label accessibility-label}
+        [reanimated/view {:style background-animated-style}
+         [hole-view/hole-view {:style {:padding-left 33
+                                       :padding-top  8}
+                               :key   new-notifications? ;; Key is required to force removal of holes
+                               :holes (cond
+                                        (not new-notifications?) ;; No new notifications, remove holes
+                                        []
 
-                                 (= notification-indicator :unread-dot)
-                                 [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
+                                        (= notification-indicator :unread-dot)
+                                        [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
 
-                                 :else
-                                 [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
-         [icon/icon
-          icon
-          {:size 24
-           :color (cond
-                    selected?     colors/white
-                    pass-through? colors/white-opa-40
-                    :else         colors/neutral-50)}]]
-        (when new-notifications?
-          (if (= notification-indicator :counter)
-            [counter/counter {:outline             false
-                              :override-text-color colors/white
-                              :override-bg-color   colors/primary-50
-                              :style               {:position :absolute
-                                                    :left     48
-                                                    :top      2}}
-             counter-label]
-            [rn/view {:style {:width            8
-                              :height           8
-                              :border-radius    4
-                              :top              6
-                              :left             51
-                              :position         :absolute
-                              :background-color colors/primary-50}}]))]])))
+                                        :else
+                                        [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
+          [reanimated/image
+           {:style icon-animated-style
+            :source (icons/icon-source (keyword (str icon 24)))}]]
+         (when new-notifications?
+           (if (= notification-indicator :counter)
+             [counter/counter {:outline             false
+                               :override-text-color colors/white
+                               :override-bg-color   colors/primary-50
+                               :style               {:position :absolute
+                                                     :left     48
+                                                     :top      2}}
+              counter-label]
+             [rn/view {:style {:width            8
+                               :height           8
+                               :border-radius    4
+                               :top              6
+                               :left             51
+                               :position         :absolute
+                               :background-color colors/primary-50}}]))]]))])

src/quo2/components/navigation/floating_shell_button.cljs

@@ -1,11 +1,13 @@
 (ns quo2.components.navigation.floating-shell-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
             [quo2.components.buttons.dynamic-button :as dynamic-button]))
 
 (defn dynamic-button-view [type dynamic-buttons style]
-  (when-let [{:keys [count on-press customization-color]} (get dynamic-buttons type)]
+  (when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
     [dynamic-button/dynamic-button
      {:type                type
+      :label               label
       :on-press            on-press
       :count               count
       :style               style
@@ -15,21 +17,28 @@
   "[floating-shell-button dynamic-buttons style]
   dynamic-buttons
   {:button-type {:on-press on-press :count count}}"
-  [dynamic-buttons style]
-  [rn/view {:style (merge {:flex-direction    :row
-                           :margin-horizontal 12} style)}
-   ;; Left Section
-   [rn/view {:style {:flex 1}}
-    [dynamic-button-view :search dynamic-buttons {:position :absolute
-                                                  :right    8}]]
-   ;; Mid Section (jump-to)
-   [dynamic-button-view :jump-to dynamic-buttons nil]
-   ;; Right Section   
-   [rn/view {:style {:flex 1}}
-    [rn/view {:style {:position       :absolute
-                      :flex-direction :row
-                      :right          0}}
-     [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
-     [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
-     [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
-     [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]])
+  [dynamic-buttons style opacity-anim pointer-anim]
+  [:f>
+   (fn []
+     (let [original-style (merge {:flex-direction    :row
+                                  :margin-horizontal 12} style)
+           animated-style (reanimated/apply-animations-to-style
+                           {:opacity        opacity-anim
+                            :pointer-events pointer-anim}
+                           original-style)]
+       [reanimated/view {:style animated-style}
+        ;; Left Section
+        [rn/view {:style {:flex 1}}
+         [dynamic-button-view :search dynamic-buttons {:position :absolute
+                                                       :right    8}]]
+        ;; Mid Section (jump-to)
+        [dynamic-button-view :jump-to dynamic-buttons nil]
+        ;; Right Section
+        [rn/view {:style {:flex 1}}
+         [rn/view {:style {:position       :absolute
+                           :flex-direction :row
+                           :right          0}}
+          [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
+          [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
+          [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
+          [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]]))])

src/quo2/components/navigation/page_nav.cljs

@@ -1,10 +1,9 @@
 (ns quo2.components.navigation.page-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
-            [status-im.utils.dimensions :as dimensions]
-            [clojure.string :as string]
-            [quo2.components.markdown.text :as text]))
+            [quo2.components.markdown.text :as text]
+            [clojure.string :as string]))
 
 (def ^:private centrify-style
   {:display         :flex
@@ -185,8 +184,7 @@
            mid-section
            left-section
            right-section-buttons]}]
-  (let [{:keys [height width]}      (dimensions/window)
-        put-middle-section-on-left? (or align-mid?
+  (let [put-middle-section-on-left? (or align-mid?
                                         (> (count right-section-buttons) 1))
         mid-section-props
         {:type                    (:type mid-section)
@@ -197,15 +195,12 @@
          :right-icon              (:right-icon mid-section)
          :icon                    (:icon mid-section)
          :left-icon               (:left-icon mid-section)}]
-    [rn/view {:style (cond->
-                      {:display            :flex
-                       :flex-direction     :row
-                       :width              width
-                       :height             (* 0.0497 height)
-                      ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
-                       :align-items        :center
-                       :padding-horizontal 20
-                       :justify-content    :space-between}
+    [rn/view {:style (cond-> {:display            :flex
+                              :flex-direction     :row
+                              ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
+                              :align-items        :center
+                              :padding-horizontal 20
+                              :justify-content    :space-between}
                        page-nav-background-uri (assoc :background-color page-nav-color)
                        page-nav-color (assoc :background page-nav-background-uri))}
      [rn/view {:style {:flex           1

src/quo2/components/navigation/top_nav.cljs

@@ -1,9 +1,10 @@
 (ns quo2.components.navigation.top-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.counter.counter :as counter]
             [quo2.components.buttons.button :as quo2.button]
-            [quo2.components.avatars.user-avatar :as user-avatar]))
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [react-native.hole-view :as hole-view]))
 
 (defn- get-button-common-props [type]
   (let [default? (= type :default)
@@ -44,8 +45,7 @@
            open-scanner show-qr open-activity-center style avatar counter-label]}]
   (let [button-common-props (get-button-common-props type)]
     [rn/view {:style (merge
-                      {:height 56
-                       :flex   1}
+                      {:height 56}
                       style)}
    ;; Left Section
      [rn/touchable-without-feedback {:on-press open-profile}
@@ -63,22 +63,22 @@
                        :right    20
                        :top      12
                        :flex-direction :row}}
-      [base-button :main-icons2/search open-search :open-search-button button-common-props]
-      [base-button :main-icons2/scan open-scanner :open-scanner-button button-common-props]
-      [base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props]
+      [base-button :i/search open-search :open-search-button button-common-props]
+      [base-button :i/scan open-scanner :open-scanner-button button-common-props]
+      [base-button :i/qr-code show-qr :show-qr-button button-common-props]
       [rn/view ;; Keep view instead of "[:<>" to make sure relative
                ;; position is calculated from this view instead of its parent
-       [rn/hole-view {:key    new-notifications? ;; Key is required to force removal of holes
-                      :holes  (cond
-                                (not new-notifications?) ;; No new notifications, remove holes
-                                []
+       [hole-view/hole-view {:key   new-notifications? ;; Key is required to force removal of holes
+                             :holes (cond
+                                      (not new-notifications?) ;; No new notifications, remove holes
+                                      []
 
-                                (= notification-indicator :unread-dot)
-                                [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
+                                      (= notification-indicator :unread-dot)
+                                      [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
 
-                                :else
-                                [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
-        [base-button :main-icons2/activity-center open-activity-center
+                                      :else
+                                      [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
+        [base-button :i/activity-center open-activity-center
          :open-activity-center-button button-common-props]]
        (when new-notifications?
          (if (= notification-indicator :counter)

src/quo2/components/notifications/activity_logs.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.activity-logs
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.buttons.button :as button]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]

src/quo2/components/notifications/info_count.cljs

@@ -0,0 +1,15 @@
+(ns quo2.components.notifications.info-count
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.foundations.typography :as typography]))
+
+(defn info-count [count style]
+  (when (> count 0)
+    [rn/view {:style (merge {:width            16
+                             :height           16
+                             :position         :absolute
+                             :right            22
+                             :border-radius    6
+                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
+                            style)}
+     [rn/text {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})} count]]))

src/quo2/components/notifications/notification_dot.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.notifications.notification-dot
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]))
+
+(defn notification-dot [style]
+  [rn/view {:style (merge {:background-color (colors/theme-colors colors/primary-50 colors/primary-60)
+                           :width            8
+                           :height           8
+                           :border-radius    4
+                           :position         :absolute
+                           :z-index          1}
+                          style)}])

src/quo2/components/reactions/reaction.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.markdown.text :as quo2.text]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]))
 
@@ -16,15 +16,17 @@
 (defn open-reactions-menu
   [{:keys [on-press]}]
   (let [dark? (theme/dark?)]
-    [rn/touchable-opacity {:on-press on-press
-                           :style (merge reaction-styling
+    [rn/touchable-opacity
+     {:on-press               on-press
+      :accessibility-label :emoji-reaction-add
+      :style                      (merge reaction-styling
                                          {:padding-horizontal 9
-                                          :border-width 1
-                                          :margin-top 5
-                                          :border-color (if dark?
-                                                          colors/neutral-70
-                                                          colors/neutral-30)})}
-     [icons/icon :main-icons2/add
+                                          :border-width           1
+                                          :margin-top              5
+                                          :border-color           (if dark?
+                                                                    colors/neutral-70
+                                                                    colors/neutral-30)})}
+     [icons/icon :i/add
       {:size 20
        :color (if dark?
                 colors/white
@@ -32,26 +34,30 @@
 
 (defn reaction
   "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press]}]
+  [{:keys [emoji clicks neutral? on-press accessibility-label]}]
   (let [dark? (theme/dark?)
         text-color (if dark? colors/white
                        colors/neutral-100)
         numeric-value (int clicks)
         clicks-positive? (pos? numeric-value)]
-    [rn/touchable-opacity {:on-press on-press
-                           :style (merge reaction-styling
-                                         (cond-> {:background-color
-                                                  (if dark?
-                                                    (if neutral?
-                                                      colors/neutral-70
-                                                      :transparent)
-                                                    (if neutral?
-                                                      colors/neutral-30
-                                                      :transparent))}
-                                           (and dark? (not neutral?)) (assoc :border-color colors/neutral-70
-                                                                             :border-width 1)
-                                           (and (not dark?) (not neutral?)) (assoc :border-color colors/neutral-30
-                                                                                   :border-width 1)))}
+    [rn/touchable-opacity
+     {:on-press            on-press
+      :accessibility-label accessibility-label
+      :style               (merge reaction-styling
+                                  (cond-> {:background-color
+                                           (if dark?
+                                             (if neutral?
+                                               colors/neutral-70
+                                               :transparent)
+                                             (if neutral?
+                                               colors/neutral-30
+                                               :transparent))}
+                                    (and dark? (not neutral?))
+                                    (assoc :border-color colors/neutral-70
+                                           :border-width 1)
+                                    (and (not dark?) (not neutral?))
+                                    (assoc :border-color colors/neutral-30
+                                           :border-width 1)))}
      [icons/icon emoji {:no-color true
                         :size     16}]
      [quo2.text/text {:size :paragraph-2

src/quo2/components/selectors/disclaimer.cljs

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

src/quo2/components/selectors/selectors.cljs

@@ -1,14 +1,19 @@
 (ns quo2.components.selectors.selectors
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]
             [reagent.core :as reagent]
             [quo2.components.icon :as icons]))
 
-(defn- get-color [checked? disabled?]
-  (if checked?
+(defn- get-color [checked? disabled? blurred-background?]
+  (cond
+    checked?
     (colors/custom-color-by-theme
      :primary 50 60 (when disabled? 30) (when disabled? 30))
+    blurred-background?
+    (colors/theme-colors
+     (colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
+     (colors/alpha colors/white (if disabled? 0.05 0.1)))
+    :else
     (colors/theme-colors
      (colors/alpha colors/neutral-20 (if disabled? 0.4 1))
      (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
@@ -21,7 +26,7 @@
 
 (defn checkbox-prefill [{:keys [default-checked?]}]
   (let [checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? container-style]}]
+    (fn [{:keys [on-change disabled? blurred-background? container-style]}]
       [rn/touchable-without-feedback
        {:on-press (handle-press disabled? on-change checked?)}
        [rn/view
@@ -30,16 +35,20 @@
                  {:height 21
                   :width 21
                   :border-radius 6
-                  :background-color (colors/theme-colors
-                                     (colors/alpha colors/neutral-20 (if disabled? 0.3 1))
-                                     (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))})
+                  :background-color (if blurred-background?
+                                      (colors/theme-colors
+                                       (colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
+                                       (colors/alpha colors/white (if disabled? 0.05 0.1)))
+                                      (colors/theme-colors
+                                       (colors/alpha colors/neutral-20 (if disabled? 0.3 1))
+                                       (colors/alpha colors/neutral-70 (if disabled? 0.3 1))))})
          :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
          :accessibility-role  :checkbox}
         (when @checked?
           [rn/view {:style
                     {:height 20
                      :width 20}}
-           [icons/icon :main-icons2/check
+           [icons/icon :i/check-small
             {:size 20
              :color (colors/theme-colors
                      (colors/alpha colors/neutral-100 (if disabled? 0.3 1))
@@ -47,38 +56,44 @@
 
 (defn checkbox [{:keys [default-checked?]}]
   (let [checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? container-style]}]
+    (fn [{:keys [on-change disabled? blurred-background? container-style]}]
       [rn/touchable-without-feedback
        {:on-press (handle-press disabled? on-change checked?)}
        [rn/view
         {:style  (merge
                   container-style
-                  {:height 21
-                   :width 21})}
+                  {:height 20
+                   :width 20})}
         [rn/view
          {:style {:flex             1
                   :border-radius    6
                   :border-width     (if @checked? 0 1)
-                  :background-color (if @checked?
-                                      (get-color @checked? disabled?)
+                  :background-color (cond
+                                      @checked?
+                                      (get-color @checked? disabled? blurred-background?)
+                                      blurred-background?
+                                      (colors/theme-colors
+                                       colors/white-opa-5
+                                       colors/white-opa-10)
+                                      :else
                                       (colors/theme-colors
                                        colors/white
                                        colors/neutral-80-opa-40))
                   :border-color     (if @checked? :none
-                                        (get-color @checked? disabled?))}
+                                        (get-color @checked? disabled? blurred-background?))}
           :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
           :accessibility-role  :checkbox}
          (when @checked?
            [rn/view {:style
                      {:height 20
                       :width 20}}
-            [icons/icon :main-icons2/check
+            [icons/icon :i/check-small
              {:size 20
-              :color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]])))
+              :color colors/white}]])]]])))
 
 (defn radio [{:keys [default-checked?]}]
   (let [checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? container-style]}]
+    (fn [{:keys [on-change disabled? blurred-background? container-style]}]
       [rn/touchable-without-feedback
        {:on-press (handle-press disabled? on-change checked?)}
        [rn/view
@@ -88,9 +103,10 @@
                   :width 20
                   :border-radius 20
                   :border-width 1
-                  :border-color (get-color @checked? disabled?)
-                  :background-color (colors/theme-colors colors/white
-                                                         (colors/alpha colors/neutral-80 0.4))})
+                  :border-color (get-color @checked? disabled? blurred-background?)
+                  :background-color (when-not blurred-background?
+                                      (colors/theme-colors colors/white
+                                                           (colors/alpha colors/neutral-80 0.4)))})
          :accessibility-label (str "radio-" (if @checked? "on" "off"))
          :accessibility-role  :checkbox}
 
@@ -98,7 +114,7 @@
                   {:margin-left :auto
                    :height 14
                    :width 14
-                   :background-color (when @checked? (get-color @checked? disabled?))
+                   :background-color (when @checked? (get-color @checked? disabled? blurred-background?))
                    :border-radius 20
                    :margin-right :auto
                    :margin-top :auto
@@ -106,7 +122,7 @@
 
 (defn toggle [{:keys [default-checked?]}]
   (let [checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? container-style]}]
+    (fn [{:keys [on-change disabled? blurred-background? container-style]}]
       [rn/touchable-without-feedback
        {:on-press (handle-press disabled? on-change checked?)}
        [rn/view
@@ -115,17 +131,20 @@
                  {:height 20
                   :width 30
                   :border-radius 20
-                  :background-color (get-color @checked? disabled?)})
+                  :background-color (get-color @checked? disabled? blurred-background?)})
          :accessibility-label (str "toggle-" (if @checked? "on" "off"))
          :accessibility-role  :checkbox}
         [rn/view {:style
                   {:margin-left (if @checked? 12 2)
                    :height 16
                    :width 16
-                   :background-color (colors/alpha colors/white
-                                                   (if (theme/dark?)
-                                                     (if disabled? 0.3 1)
-                                                     1))
+                   :background-color (if blurred-background?
+                                       (colors/theme-colors
+                                        (colors/alpha colors/white (if disabled? 0.4 1))
+                                        (colors/alpha colors/white (if disabled? 0.3 1)))
+                                       (colors/theme-colors
+                                        (colors/alpha colors/white 1)
+                                        (colors/alpha colors/white (if disabled? 0.4 1))))
                    :border-radius 20
                    :margin-right :auto
                    :margin-top :auto

src/quo2/components/separator.cljs

@@ -1,14 +1,14 @@
 (ns quo2.components.separator
-  (:require [quo.react-native :as react]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as quo2.colors]))
 
 (defn separator [{:keys [style]}]
-  [react/view
+  [rn/view
    {:style
     (merge
      style
      {:background-color (quo2.colors/theme-colors
-                         quo2.colors/neutral-30
+                         quo2.colors/neutral-10
                          quo2.colors/neutral-80)
       :align-self       :stretch
       :height           1})}])

src/quo2/components/tabs/account_selector.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.account-selector
   (:require
-   [quo.theme :as theme]
-   [quo.react-native :as rn]
+   [quo2.theme :as theme]
+   [react-native.core :as rn]
    [quo2.foundations.colors :as colors]
    [quo2.components.markdown.text :as quo2]))
 

src/quo2/components/tabs/segmented_tab.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tabs.segmented-tab
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.tabs.tab :as tab]
             [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (def themes {:light {:background-color colors/neutral-20}
              :dark  {:background-color colors/neutral-80}})

src/quo2/components/tabs/tab.cljs

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

src/quo2/components/tabs/tabs.cljs

@@ -1,11 +1,13 @@
 (ns quo2.components.tabs.tabs
   (:require [oops.core :refer [oget]]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.tabs.tab :as tab]
             [reagent.core :as reagent]
-            [status-im.ui.components.react :as react]
-            [status-im.utils.core :as utils]
-            [status-im.utils.number :as number-utils]))
+            [utils :as utils]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.notifications.notification-dot :refer [notification-dot]]
+            [react-native.masked-view :as masked-view]
+            [react-native.linear-gradient :as linear-gradient]))
 
 (def default-tab-size 32)
 
@@ -14,17 +16,30 @@
     (fn [{:keys [data size] :or {size default-tab-size}}]
       [rn/view (merge {:flex-direction :row} style)
        (doall
-        (for [{:keys [label id]} data]
+        (for [{:keys [label id new-info accessibility-label]} data]
           ^{:key id}
           [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
+           (when new-info
+             [rn/view {:position         :absolute
+                       :z-index          1
+                       :right            -2
+                       :top              -2
+                       :width            10
+                       :height           10
+                       :border-radius    5
+                       :justify-content  :center
+                       :align-items      :center
+                       :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
+              [notification-dot]])
            [tab/tab
-            {:id       id
-             :size     size
-             :active   (= id @active-tab-id)
-             :on-press (fn []
-                         (reset! active-tab-id id)
-                         (when on-change
-                           (on-change id)))}
+            {:id                  id
+             :size                size
+             :accessibility-label accessibility-label
+             :active              (= id @active-tab-id)
+             :on-press            (fn []
+                                    (reset! active-tab-id id)
+                                    (when on-change
+                                      (on-change id)))}
             label]]))])))
 
 (defn- calculate-fade-end-percentage
@@ -35,7 +50,7 @@
     ;; Truncate to avoid unnecessary rendering.
     (if (> fade-percentage 0.99)
       0.99
-      (number-utils/naive-round fade-percentage 2))))
+      (utils/naive-round fade-percentage 2))))
 
 (defn scrollable-tabs
   "Just like the component `tabs`, displays horizontally scrollable tabs with
@@ -83,15 +98,17 @@
                  size                  default-tab-size}
           :as   props}]
       (let [maybe-mask-wrapper (if fade-end?
-                                 [react/masked-view
-                                  {:mask-element (reagent/as-element
-                                                  [react/linear-gradient {:colors         [:black :transparent]
-                                                                          :locations      [(get @fading :fade-end-percentage) 1]
-                                                                          :start          {:x 0 :y 0}
-                                                                          :end            {:x 1 :y 0}
-                                                                          :pointer-events :none
-                                                                          :style          {:width  "100%"
-                                                                                           :height "100%"}}])}]
+                                 [masked-view/masked-view
+                                  {:mask-element
+                                   (reagent/as-element
+                                    [linear-gradient/linear-gradient
+                                     {:colors         [:black :transparent]
+                                      :locations      [(get @fading :fade-end-percentage) 1]
+                                      :start          {:x 0 :y 0}
+                                      :end            {:x 1 :y 0}
+                                      :pointer-events :none
+                                      :style          {:width  "100%"
+                                                       :height "100%"}}])}]
                                  [:<>])]
         (conj maybe-mask-wrapper
               [rn/flat-list
@@ -132,15 +149,15 @@
                                                              [tab/tab {:id             id
                                                                        :size           size
                                                                        :override-theme override-theme
-                                                                       :blur?           blur?
-                                                                       :active          (= id @active-tab-id)
-                                                                       :on-press        (fn [id]
-                                                                                          (reset! active-tab-id id)
-                                                                                          (when scroll-on-press?
-                                                                                            (.scrollToIndex @flat-list-ref
-                                                                                                            #js {:animated     true
-                                                                                                                 :index        index
-                                                                                                                 :viewPosition 0.5}))
-                                                                                          (when on-change
-                                                                                            (on-change id)))}
+                                                                       :blur?          blur?
+                                                                       :active         (= id @active-tab-id)
+                                                                       :on-press       (fn [id]
+                                                                                         (reset! active-tab-id id)
+                                                                                         (when scroll-on-press?
+                                                                                           (.scrollToIndex @flat-list-ref
+                                                                                                           #js {:animated     true
+                                                                                                                :index        index
+                                                                                                                :viewPosition 0.5}))
+                                                                                         (when on-change
+                                                                                           (on-change id)))}
                                                               label]])})])))))

src/quo2/components/tags/base_tag.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.tags.base-tag
-  (:require
-   [quo.react-native :as rn]))
+  (:require [react-native.core :as rn]))
 
 (defn style-container [size disabled border-color border-width background-color label type]
   (merge {:height             size

src/quo2/components/tags/context_tags.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.context-tags
   (:require [quo2.foundations.colors :as colors]
-            [quo.theme :as quo.theme]
+            [quo2.theme :as quo2.theme]
             [quo2.components.markdown.text :as text]
             [quo2.components.avatars.group-avatar :as group-avatar]
-            [quo.react-native :as rn]))
+            [react-native.core :as rn]))
 
 (defn padding-left-for-type [type]
   (case type
@@ -15,7 +15,7 @@
 
 (defn base-tag [_ _]
   (fn [{:keys [override-theme style]} & children]
-    (let [theme (or override-theme (quo.theme/get-theme))]
+    (let [theme (or override-theme (quo2.theme/get-theme))]
       (into
        [rn/view
         (merge

src/quo2/components/tags/permission_tag.cljs

@@ -1,10 +1,9 @@
 (ns quo2.components.tags.permission-tag
-  (:require [status-im.ui.components.react :as react]
+  (:require [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
-            [quo2.components.tags.base-tag :as base-tag]
-            [status-im.i18n.i18n :as i18n]))
+            [quo2.components.tags.base-tag :as base-tag]))
 
 (defn outer-resource-container [size background-color]
   {:background-color background-color
@@ -28,8 +27,8 @@
 (defn extra-count [total-group-count selected-count size background-color]
   (let [extra-group-count (- total-group-count selected-count)]
     (when (> extra-group-count 0)
-      [react/view (outer-resource-container size background-color)
-       [react/view (extra-count-styles size)
+      [rn/view (outer-resource-container size background-color)
+       [rn/view (extra-count-styles size)
         (if (< extra-group-count 4)
           [text/text {:size :label
                       :style {:align-items     :center
@@ -37,12 +36,12 @@
                                                 colors/neutral-50
                                                 colors/neutral-40)}}
            (str "+" extra-group-count)]
-          [icons/icon :main-icons2/pending-default {:container-style {:align-items     :center
-                                                                      :justify-content :center}
-                                                    :color (colors/theme-colors
-                                                            colors/neutral-50
-                                                            colors/neutral-40)
-                                                    :size  12}])]])))
+          [icons/icon :i/pending-default {:container-style {:align-items     :center
+                                                            :justify-content :center}
+                                          :color (colors/theme-colors
+                                                  colors/neutral-50
+                                                  colors/neutral-40)
+                                          :size  12}])]])))
 
 (defn selected-token-count [group]
   (cond
@@ -58,20 +57,20 @@
         :or {size 24}}]
     (let [tokens-count (count group)
           selected-tokens (take (selected-token-count group) group)]
-      [react/view {:flex-direction :row
-                   :align-items    :center}
+      [rn/view {:flex-direction :row
+                :align-items    :center}
        (for [{:keys [token-icon]} selected-tokens]
          ^{:key token-icon}
-         [react/view {:flex-direction :row}
-          [react/view (outer-resource-container size background-color)
-           [react/image {:source token-icon
-                         :style  {:height        (case size 32 28 24 20)
-                                  :width         (case size 32 28 24 20)
-                                  :border-radius size}}]]])
+         [rn/view {:flex-direction :row}
+          [rn/view (outer-resource-container size background-color)
+           [rn/image {:source token-icon
+                      :style  {:height        (case size 32 28 24 20)
+                               :width         (case size 32 28 24 20)
+                               :border-radius size}}]]])
 
        [extra-count tokens-count (count selected-tokens) size]
        (when-not last-group
-         [react/view {:align-items   :center}
+         [rn/view {:align-items   :center}
           [text/text {:weight        :medium
                       :size          (case size 32       :paragraph-2 24 :label)
                       :style         {:color             (colors/theme-colors
@@ -80,7 +79,7 @@
                                       :padding-left      4
                                       :text-transform    :lowercase
                                       :padding-right     (case size 32 16 24 12)}}
-           (i18n/label :t/or)]])])))
+           "or"]])])))
 
 (defn selected-group-count [tokens]
   (cond
@@ -94,8 +93,8 @@
         :or {size 24}}]
     (let [selected-groups (take (selected-group-count tokens) tokens)
           last-group-id ((last selected-groups) :id)]
-      [react/view {:flex-direction :row
-                   :align-items    :center}
+      [rn/view {:flex-direction :row
+                :align-items    :center}
        (for [{:keys [id group]} selected-groups]
          ^{:key id}
          [token-group {:group                 group
@@ -110,13 +109,13 @@
     [base-tag/base-tag {:background-color  background-color
                         :size              size
                         :type              :permission}
-     [react/view  {:flex-direction   :row
-                   :align-items      :center
-                   :justify-content  :flex-end}
-      [react/view {:padding-left    (case 32 8 24 6)
-                   :padding-right   (case size 32 16 24 12)}
-       [icons/icon (if locked :main-icons2/locked
-                       :main-icons2/unlocked)
+     [rn/view  {:flex-direction   :row
+                :align-items      :center
+                :justify-content  :flex-end}
+      [rn/view {:padding-left    (case 32 8 24 6)
+                :padding-right   (case size 32 16 24 12)}
+       [icons/icon (if locked :i/locked
+                       :i/unlocked)
         {:resize-mode      :center
          :size             (case size 32 20 24 16)
          :color            (colors/theme-colors
@@ -124,4 +123,4 @@
                             colors/neutral-40)}]]
       [tag-tokens {:tokens     tokens
                    :size             size
-                   :background-color background-color}]]]))
+                   :background-color background-color}]]]))

src/quo2/components/tags/status_tags.cljs

@@ -1,10 +1,9 @@
 (ns quo2.components.tags.status-tags
-  (:require [quo.react-native :as rn]
-            [quo.theme :as quo.theme]
+  (:require [react-native.core :as rn]
+            [quo2.theme :as quo2.theme]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [status-im.i18n.i18n :as i18n]))
+            [quo2.foundations.colors :as colors]))
 
 (def default-container-style
   {:border-radius 20
@@ -54,7 +53,7 @@
              :background-color colors/success-50-opa-10
              :icon             :verified
              :border-color     colors/success-50-opa-20
-             :label            (or label (i18n/label :positive))
+             :label            label
              :text-color       (if (= theme :light) colors/success-50
                                    colors/success-60)}])
 
@@ -64,7 +63,7 @@
              :icon             :untrustworthy
              :background-color colors/danger-50-opa-10
              :border-color     colors/danger-50-opa-20
-             :label            (or label (i18n/label :negative))
+             :label            label
              :text-color       (if (= theme :light)
                                  colors/danger-50
                                  colors/danger-60)}])
@@ -73,7 +72,7 @@
   [size theme label]
   [base-tag {:size             size
              :icon             :pending
-             :label            (or label (i18n/label :pending))
+             :label            label
              :background-color (if (= theme :light)
                                  colors/neutral-10
                                  colors/neutral-80)
@@ -91,5 +90,5 @@
                                   nil)]
       [status-component
        size
-       (or override-theme (quo.theme/get-theme))
+       (or override-theme (quo2.theme/get-theme))
        label])))

src/quo2/components/tags/tag.cljs

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

src/quo2/components/tags/tags.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tags.tags
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.tags.tag :as tag]))
 
 (defn tags [{:keys [default-active on-change]}]
@@ -22,8 +22,7 @@
                      :icon-color    icon-color
                      :labelled      (if (= type :label) true labelled)
                      :resource      (if (= type :icon)
-                                      :main-icons2/placeholder
+                                      :i/placeholder
                                       resource)
                      :on-press      #(do (reset! active-tab-id %)
-                                         (when on-change (on-change %)))})
-             tag-label]])]))))
+                                         (when on-change (on-change %)))})]])]))))

src/quo2/components/tags/token_tag.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.token-tag
   (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
             [quo2.components.markdown.text :as text]
-            [status-im.ui.components.icons.icons :as icons]))
+            [quo2.components.icon :as icons]))
 
 (def themes {:light {:background-color colors/neutral-20}
              :dark {:background-color colors/neutral-80}})
@@ -76,23 +76,19 @@
         :or
         {size :small border-color (colors/custom-color-by-theme :purple 50 60)}}]
 
-    [tag {:size size
+    [tag {:size          size
           :token-img-src token-img-src
-          :border-color (when is-required border-color)
+          :border-color  (when is-required border-color)
           :overlay
           (when (or is-required is-purchasable)
             [rn/view
              {:style (merge icon-container-styles
-                            {:width 15.5
-                             :height 15.5
-                             :background-color border-color
-                             :border-color (if (=  (theme/get-theme) :dark) colors/neutral-100 colors/white)
-                             :border-width 1
-                             :right  (get-value-from-size size -3.75 -5.75)
-                             :bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)
-                             })}
-             [icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12)
+                            {:background-color border-color
+                             :border-color     (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
+                             :border-width     1
+                             :right            (get-value-from-size size -3.75 -5.75)
+                             :bottom           (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
+             [icons/icon (if is-required :i/hold :i/add)
               {:no-color true
-               :width 13.5
-               :height 13.5}]])}
+               :size 12}]])}
      (str value " " token)]))

src/quo2/components/wallet/lowest_price.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.lowest-price
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [clojure.string :as string]))
 
 (def centrify {:style {:flex-direction  :row

src/quo2/components/wallet/network_amount.cljs

@@ -1,19 +1,17 @@
 (ns quo2.components.wallet.network-amount
-  (:require [clojure.string :as string]
-            [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [status-im.i18n.i18n :as i18n]))
+            [quo2.foundations.colors :as colors]))
 
 (defn network-amount
   "[network-amount opts]
    opts
    {:style        style                 ;; extra styles for the container (takes precedence)
     :network-name \"Mainnet\"             ;; shown network name
-    :icon         :main-icons2/ethereum ;; key of icon belonging to the network
+    :icon         :i/ethereum ;; key of icon belonging to the network
     :eth-value    1.2345678             ;; shown ETH value}"
-  [{:keys [show-right-border? style network-name icon eth-value] :as _opts}]
+  [{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}]
   [rn/view (merge {:accessibility-label :network-amount
                    :background-color    (colors/theme-colors colors/white colors/neutral-95)
                    :border-radius       16
@@ -35,7 +33,7 @@
       [text/text {:weight :medium
                   :size   :paragraph-2
                   :style  {:color (colors/theme-colors colors/neutral-100 colors/white)}}
-       eth-value \space (i18n/label :t/eth)]
+       eth-value \space (:eth labels)]
       [rn/view {:style {:border-right-width (when show-right-border? 1)
                         :border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
                         :padding-left       8
@@ -44,4 +42,4 @@
      [text/text {:weight :medium
                  :size   :label
                  :style  {:color colors/neutral-50}}
-      (string/lower-case (i18n/label :t/on)) \space network-name]]]])
+      (:on labels) \space network-name]]]])

src/quo2/components/wallet/network_breakdown.cljs

@@ -1,11 +1,11 @@
 (ns quo2.components.wallet.network-breakdown
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.wallet.network-amount :refer [network-amount]]))
 
 (defn network-breakdown
-  [{:keys [top-value network-conversions]}]
+  [{:keys [top-value network-conversions labels]}]
   [rn/view {:style {:background-color   (colors/theme-colors
                                          colors/white
                                          colors/neutral-95)
@@ -41,5 +41,6 @@
           [network-amount {:show-right-border? (not= idx last-item-idx)
                            :icon               icon
                            :network-name       network
-                           :eth-value          conversion}]])
+                           :eth-value          conversion
+                           :labels             labels}]])
        network-conversions))]])

src/quo2/components/wallet/token_overview.cljs

@@ -1,12 +1,10 @@
 (ns quo2.components.wallet.token-overview
   (:require
    [quo2.foundations.colors :as colors]
-   [status-im.i18n.i18n :as i18n]
-   [quo.react-native :as rn]
+   [react-native.core :as rn]
    [clojure.string :as string]
-   [status-im.utils.currency :as currencies]
-   [status-im.ui.components.icons.icons :as icons]
-   [quo2.components.markdown.text :as text]))
+   [quo2.components.markdown.text :as text]
+   [quo2.components.icon :as icons]))
 
 (def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
 
@@ -42,18 +40,18 @@
     }"
   []
   (fn
-    [{:keys [currency price  percentage-change] :or {currency :usd price "0.00" percentage-change "0.0"}}]
+    [{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
     (let [direction (get-direction percentage-change)]
       [rn/view {:style container-style}
        [text/text  {:number-of-lines 1
-                    :size  :paragraph-2} (i18n/label :token-price)]
+                    :size  :paragraph-2} label]
        [text/text  {:style {:margin-top 4}
                     :weight :semi-bold
                     :number-of-lines 1
-                    :size  :heading-2} (str (get-in currencies/currencies [currency :symbol]) price)]
+                    :size  :heading-2} (str currency price)]
 
        [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
-        (when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12)
+        (when (not (zero? direction)) [icons/icon (if (>= direction 0) :i/price-increase12 :i/price-decrease12)
                                        {:no-color true
                                         :width 14
                                         :height 14
@@ -76,7 +74,7 @@
     :percentage-change :string
     }"
   []
-  (fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {currency :usd account-balance "0.00" price "0.00" percentage-change "0.0"}}]
+  (fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
     (let [direction (get-direction percentage-change)]
       [rn/view {:style container-style}
        [text/text  {:weight :regular
@@ -85,20 +83,19 @@
        [rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
         [text/text  {:number-of-lines 1
                      :weight :semi-bold
-                     :size  :heading-1} (str (get-in currencies/currencies [currency :symbol]) account-balance)]
+                     :size  :heading-1} (str currency account-balance)]
         [rn/image {:source token-img-src
                    :style {:height 32
                            :width 32}}]]
        [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
-        (when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase12 :main-icons2/price-decrease12)
+        (when (not (zero? direction)) [icons/icon (if (pos? direction) :i/price-increase :i/price-decrease)
                                        {:no-color true
-                                        :width 12
-                                        :height 12
+                                        :size 12
                                         :container-style {:margin-right 4}}])
         [text/text  {:number-of-lines 1
                      :weight :medium
                      :size  :paragraph-2
-                     :style {:color  (price-color direction)}} (str (get-in currencies/currencies [currency :symbol]) price)]
+                     :style {:color  (price-color direction)}} (str currency price)]
         [divider direction]
         [text/text {:number-of-lines 1
                     :weight :medium

src/quo2/core.cljs

@@ -0,0 +1,87 @@
+(ns quo2.core
+  (:require quo2.components.buttons.button
+            quo2.components.buttons.dynamic-button
+            quo2.components.markdown.text
+            quo2.components.icon
+            quo2.components.separator
+            quo2.components.header
+            quo2.components.avatars.account-avatar
+            quo2.components.avatars.channel-avatar
+            quo2.components.avatars.group-avatar
+            quo2.components.avatars.icon-avatar
+            quo2.components.avatars.user-avatar
+            quo2.components.avatars.wallet-user-avatar
+            quo2.components.community.community-card-view
+            quo2.components.community.community-list-view
+            quo2.components.community.community-view
+            quo2.components.community.discover-card
+            quo2.components.counter.counter
+            quo2.components.dividers.divider-label
+            quo2.components.dividers.new-messages
+            quo2.components.drawers.action-drawers
+            quo2.components.dropdowns.dropdown
+            quo2.components.info.info-message
+            quo2.components.info.information-box
+            quo2.components.list-items.channel
+            quo2.components.list-items.menu-item
+            quo2.components.list-items.preview-list
+            quo2.components.messages.gap
+            quo2.components.messages.system-message
+            quo2.components.reactions.reaction
+            quo2.components.notifications.activity-logs
+            quo2.components.notifications.info-count
+            quo2.components.notifications.notification-dot
+            quo2.components.tags.tags
+            quo2.components.tabs.tabs
+            quo2.components.tabs.account-selector))
+
+(def button quo2.components.buttons.button/button)
+(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
+(def text quo2.components.markdown.text/text)
+(def icon quo2.components.icon/icon)
+(def separator quo2.components.separator/separator)
+(def counter quo2.components.counter.counter/counter)
+(def header quo2.components.header/header)
+(def action-drawer quo2.components.drawers.action-drawers/action-drawer)
+(def dropdown quo2.components.dropdowns.dropdown/dropdown)
+(def info-message quo2.components.info.info-message/info-message)
+(def information-box quo2.components.info.information-box/information-box)
+(def gap quo2.components.messages.gap/gap)
+(def system-message quo2.components.messages.system-message/system-message)
+(def reaction quo2.components.reactions.reaction/reaction)
+(def tags quo2.components.tags.tags/tags)
+(def tabs quo2.components.tabs.tabs/tabs)
+(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
+(def account-selector quo2.components.tabs.account-selector/account-selector)
+
+;;;; AVATAR
+(def account-avatar quo2.components.avatars.account-avatar/account-avatar)
+(def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
+(def group-avatar quo2.components.avatars.group-avatar/group-avatar)
+(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
+(def user-avatar quo2.components.avatars.user-avatar/user-avatar)
+(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
+
+;;;; COMMUNITY
+(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
+(def communities-list-view-item quo2.components.community.community-list-view/communities-list-view-item)
+(def communities-membership-list-item quo2.components.community.community-list-view/communities-membership-list-item)
+(def community-stats-column quo2.components.community.community-view/community-stats-column)
+(def community-stats quo2.components.community.community-view/community-stats)
+(def community-tags quo2.components.community.community-view/community-tags)
+(def community-title quo2.components.community.community-view/community-title)
+(def discover-card quo2.components.community.discover-card/discover-card)
+
+;;;; DIVIDERS
+(def divider-label quo2.components.dividers.divider-label/divider-label)
+(def new-messages quo2.components.dividers.new-messages/new-messages)
+
+;;;; LIST ITEMS
+(def channel-list-item quo2.components.list-items.channel/list-item)
+(def menu-item quo2.components.list-items.menu-item/menu-item)
+(def preview-list quo2.components.list-items.preview-list/preview-list)
+
+;;;; NOTIFICATIONS
+(def activity-log quo2.components.notifications.activity-logs/activity-log)
+(def info-count quo2.components.notifications.info-count/info-count)
+(def notification-dot quo2.components.notifications.notification-dot/notification-dot)

src/quo2/foundations/colors.cljs

@@ -1,6 +1,6 @@
 (ns quo2.foundations.colors
   (:require [clojure.string :as string]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (defn alpha [value opacity]
   (when value
@@ -45,7 +45,6 @@
 ;;Blur
 (def neutral-5-opa-70  (alpha neutral-5 0.7))
 (def neutral-90-opa-70 (alpha neutral-90 0.7))
-(def neutral-95-opa-70 (alpha neutral-95 0.7))
 
 ;;80 with transparency
 (def neutral-80-opa-5  (alpha neutral-80 0.05))
@@ -60,6 +59,20 @@
 (def neutral-80-opa-90 (alpha neutral-80 0.9))
 (def neutral-80-opa-95 (alpha neutral-80 0.95))
 
+;;95 with transparency
+(def neutral-95-opa-60 (alpha neutral-95 0.6))
+(def neutral-95-opa-70 (alpha neutral-95 0.7))
+(def neutral-95-opa-80 (alpha neutral-95 0.8))
+(def neutral-95-opa-90 (alpha neutral-95 0.9))
+(def neutral-95-opa-95 (alpha neutral-95 0.95))
+
+;;100 with transparency
+(def neutral-100-opa-60 (alpha neutral-100 0.6))
+(def neutral-100-opa-70 (alpha neutral-100 0.7))
+(def neutral-100-opa-80 (alpha neutral-100 0.8))
+(def neutral-100-opa-90 (alpha neutral-100 0.9))
+(def neutral-100-opa-95 (alpha neutral-100 0.95))
+
 ;;;;White
 
 ;;Solid
@@ -104,6 +117,12 @@
 (def success-50-opa-30 (alpha success-50 0.3))
 (def success-50-opa-40 (alpha success-50 0.4))
 
+(def success-60-opa-5 (alpha success-60 0.05))
+(def success-60-opa-10 (alpha success-60 0.1))
+(def success-60-opa-20 (alpha success-60 0.2))
+(def success-60-opa-30 (alpha success-60 0.3))
+(def success-60-opa-40 (alpha success-60 0.4))
+
 ;;;;Danger
 
 ;;Solid

src/quo2/foundations/typography.cljs

@@ -45,3 +45,5 @@
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
 (def monospace {:font-family "InterStatus-Regular"})
+
+(def code {:font-family "UbuntuMono-Regular"})

src/quo2/screens/navigation/bottom_nav_tab.cljs

@@ -1,61 +0,0 @@
-(ns quo2.screens.navigation.bottom-nav-tab
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
-            [reagent.core :as reagent]
-            [quo2.components.navigation.bottom-nav-tab :as quo2]
-            [quo2.foundations.colors :as colors]))
-
-(def descriptor [{:label   "Type"
-                  :key     :icon
-                  :type    :select
-                  :options [{:key   :main-icons2/communities
-                             :value "Communities"}
-                            {:key   :main-icons2/messages
-                             :value "Messages"}
-                            {:key   :main-icons2/wallet
-                             :value "Wallet"}
-                            {:key   :main-icons2/browser
-                             :value "Browser"}]}
-                 {:label "Selected?"
-                  :key   :selected?
-                  :type  :boolean}
-                 {:label "Pass through?"
-                  :key   :pass-through?
-                  :type  :boolean}
-                 {:label "New Notifications?"
-                  :key   :new-notifications?
-                  :type  :boolean}
-                 {:label   "Notification Indicator"
-                  :key     :notification-indicator
-                  :type    :select
-                  :options [{:key   :counter
-                             :value :counter}
-                            {:key   :unread-dot
-                             :value :unread-dot}]}
-                 {:label "Counter Label"
-                  :key   :counter-label
-                  :type  :text}])
-
-(defn cool-preview []
-  (let [state (reagent/atom {:icon                   :main-icons2/communities
-                             :selected?              true
-                             :pass-through?          true
-                             :new-notifications?     true
-                             :notification-indicator :counter
-                             :counter-label          8
-                             :preview-label-color    colors/white})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60
-                  :align-items      :center}
-         [quo2/bottom-nav-tab @state (:value @state)]]]])))
-
-(defn preview-bottom-nav-tab []
-  [rn/view {:background-color colors/neutral-100
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :key-fn                    str}]])

src/quo2/screens/selectors/selectors.cljs

@@ -1,40 +0,0 @@
-(ns quo2.screens.selectors.selectors
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
-            [reagent.core :as reagent]
-            [quo2.components.selectors.selectors :as quo2]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]))
-
-(def descriptor [{:label "Disabled?"
-                  :key   :disabled?
-                  :type  :boolean}])
-
-(defn cool-preview []
-  (let [state (reagent/atom {:disabled false})]
-    (fn []
-      [rn/view {:margin-bottom 50
-                :padding       16}
-       [preview/customizer state descriptor]
-       [rn/view {:padding-vertical 60
-                 :align-items      :center}
-        [text/text {:size :heading-2} "Toggle"]
-        [quo2/toggle {:container-style {:margin-top 0}
-                      :disabled? (:disabled? @state)}]
-        [text/text {:size :heading-2} "Radio"]
-        [quo2/radio {:container-style {:margin-top 0}
-                     :disabled? (:disabled? @state)}]
-        [text/text {:size :heading-2} "Checkbox"]
-        [quo2/checkbox {:container-style {:margin-top 0}
-                        :disabled? (:disabled? @state)}]
-        [text/text {:size :heading-2} "Checkbox Prefill"]
-        [quo2/checkbox-prefill {:container-style {:margin-top 0}
-                                :disabled? (:disabled? @state)}]]])))
-
-(defn preview-selectors []
-  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :key-fn                    str}]])

src/quo2/theme.cljs

@@ -0,0 +1,13 @@
+(ns quo2.theme
+  (:require [reagent.core :as reagent]))
+
+(def theme (reagent/atom :light))
+
+(defn dark? []
+  (= :dark @theme))
+
+(defn get-theme []
+  @theme)
+
+(defn set-theme [value]
+  (reset! theme value))

src/react_native/background_timer.cljs

@@ -0,0 +1,14 @@
+(ns react-native.background-timer
+  (:require ["react-native-background-timer" :default background-timer]))
+
+(defn set-timeout [cb ms]
+  (.setTimeout background-timer cb ms))
+
+(defn clear-timeout [id]
+  (.clearTimeout background-timer id))
+
+(defn set-interval [cb ms]
+  (.setInterval background-timer cb ms))
+
+(defn clear-interval [id]
+  (.clearInterval background-timer id))

src/react_native/config.cljs

@@ -0,0 +1,8 @@
+(ns react-native.config
+  (:require ["react-native-config" :default react-native-config]))
+
+(def config (js->clj react-native-config :keywordize-keys true))
+
+(defn get-config
+  ([k] (get config k))
+  ([k not-found] (get config k not-found)))

src/react_native/core.cljs

@@ -0,0 +1,50 @@
+(ns react-native.core
+  (:require [reagent.core :as reagent]
+            ["react-native" :as react-native]
+            [react-native.flat-list :as flat-list]))
+
+(def app-state ^js (.-AppState ^js react-native))
+
+(def view (reagent/adapt-react-class (.-View ^js react-native)))
+(def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
+(def image (reagent/adapt-react-class (.-Image ^js react-native)))
+(def text (reagent/adapt-react-class (.-Text ^js react-native)))
+(def text-input (reagent/adapt-react-class  (.-TextInput ^js react-native)))
+
+(def touchable-opacity (reagent/adapt-react-class (.-TouchableOpacity ^js react-native)))
+(def touchable-highlight (reagent/adapt-react-class (.-TouchableHighlight ^js react-native)))
+(def touchable-without-feedback (reagent/adapt-react-class (.-TouchableWithoutFeedback ^js react-native)))
+
+(def flat-list flat-list/flat-list)
+
+(def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js react-native)))
+
+(def modal (reagent/adapt-react-class (.-Modal ^js react-native)))
+
+(def keyboard ^js (.-Keyboard ^js react-native))
+
+(def dismiss-keyboard! #(.dismiss keyboard))
+
+(defn use-window-dimensions []
+  (let [window ^js (react-native/useWindowDimensions)]
+    {:font-scale (.-fontScale window)
+     :height     (.-height window)
+     :scale      (.-scale window)
+     :width      (.-width window)}))
+
+(defn hide-splash-screen []
+  (.hide ^js (-> react-native .-NativeModules .-SplashScreen)))
+
+(defn alert [title message buttons options]
+  (.alert (.-Alert ^js react-native) title message (clj->js buttons) (clj->js options)))
+
+(def appearance ^js (.-Appearance ^js react-native))
+
+(defn get-color-scheme []
+  (.getColorScheme appearance))
+
+(defn appearance-add-change-listener [handler]
+  (.addChangeListener appearance handler))
+
+(defn get-window []
+  (js->clj (.get (.-Dimensions ^js react-native) "window") :keywordize-keys true))

src/react_native/fast_image.cljs

@@ -0,0 +1,32 @@
+(ns react-native.fast-image
+  (:require ["react-native-fast-image" :as FastImage]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(def fast-image-class (reagent/adapt-react-class ^js FastImage))
+
+(defn placeholder [style child]
+  [rn/view {:style (merge style {:flex 1 :justify-content :center :align-items :center})}
+   child])
+
+(defn fast-image [_]
+  (let [loaded? (reagent/atom false)
+        error? (reagent/atom false)]
+    (fn [props]
+      [fast-image-class (merge
+                         props
+                         {:on-error (fn [e]
+                                      (when-let [on-error (:on-error props)]
+                                        (on-error e))
+                                      (reset! error? true))
+                          :on-load (fn [e]
+                                     (when-let [on-load (:on-load props)]
+                                       (on-load e))
+                                     (reset! loaded? true)
+                                     (reset! error? false))})
+       (when (or @error? (not @loaded?))
+         [placeholder (:style props)
+          (if @error?
+            [rn/text "X"]
+            (when-not @loaded?
+              [rn/activity-indicator {:animating true}]))])])))

src/react_native/flat_list.cljs

@@ -0,0 +1,35 @@
+(ns react-native.flat-list
+  (:require [reagent.core :as reagent]
+            ["react-native" :as react-native]))
+
+(def react-native-flat-list (reagent/adapt-react-class (.-FlatList ^js react-native)))
+
+(defn- wrap-render-fn [f render-data]
+  (fn [data]
+    (reagent/as-element [f (.-item ^js data) (.-index ^js data)
+                         (.-separators ^js data) render-data
+                         (.-isActive ^js data) (.-drag ^js data)])))
+
+(defn- wrap-on-drag-end-fn [f]
+  (fn [data]
+    (f (.-from ^js data) (.-to ^js data) (.-data ^js data))))
+
+(defn- wrap-key-fn [f]
+  (fn [data index]
+    {:post [(some? %)]}
+    (f data index)))
+
+(defn base-list-props
+  [{:keys [key-fn render-fn empty-component header footer separator data render-data on-drag-end-fn] :as props}]
+  (merge {:data (to-array data)}
+         (when key-fn          {:keyExtractor (wrap-key-fn key-fn)})
+         (when render-fn       {:renderItem (wrap-render-fn render-fn render-data)})
+         (when separator       {:ItemSeparatorComponent (fn [] (reagent/as-element separator))})
+         (when empty-component {:ListEmptyComponent (fn [] (reagent/as-element empty-component))})
+         (when header          {:ListHeaderComponent (reagent/as-element header)})
+         (when footer          {:ListFooterComponent (reagent/as-element footer)})
+         (when on-drag-end-fn  {:onDragEnd (wrap-on-drag-end-fn on-drag-end-fn)})
+         (dissoc props :data :header :footer :empty-component :separator :render-fn :key-fn :on-drag-end-fn)))
+
+(defn flat-list [props]
+  [react-native-flat-list (base-list-props props)])