Merge branch 'develop' into 14781

* [Feature][#14713] Added Admin Notifications in Activity Center

* [Feature][#14713] Admin Notification UI fixes

* [Feature][#14713] Admin Notification PR Feedbacks

* [Feature][#14713] Admin Notification PR Feedbacks

* [Feature][#14713] Admin Notification accessiblity label update

.clj-kondo/config.edn

@@ -1,20 +1,23 @@
-{:lint-as {status-im.utils.views/defview      clojure.core/defn
-           status-im.utils.views/letsubs      clojure.core/let
-           reagent.core/with-let              clojure.core/let
-           status-im.utils.fx/defn            clj-kondo.lint-as/def-catch-all
-           utils.re-frame/defn                clj-kondo.lint-as/def-catch-all
-           quo.react/with-deps-check          clojure.core/fn
-           quo.previews.preview/list-comp     clojure.core/for
-           status-im.utils.styles/def         clojure.core/def
-           status-im.utils.styles/defn        clojure.core/defn
-           status-im.test-helpers/deftest-sub clojure.core/defn
-           taoensso.tufte/defnp               clojure.core/defn}
- :linters {:consistent-alias  {:level   :error
-                               :aliases {clojure.string  string
-                                         taoensso.timbre log}}
-           :invalid-arity     {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
-           ;; TODO remove number when this is fixed
-           ;; https://github.com/borkdude/clj-kondo/issues/867
-           :unresolved-symbol {:exclude [PersistentPriorityMap.EMPTY
-                                         number
-                                         status-im.test-helpers/restore-app-db]}}}
+{:lint-as      {status-im.utils.views/defview  clojure.core/defn
+                status-im.utils.views/letsubs  clojure.core/let
+                reagent.core/with-let          clojure.core/let
+                status-im.utils.fx/defn        clj-kondo.lint-as/def-catch-all
+                utils.re-frame/defn            clj-kondo.lint-as/def-catch-all
+                quo.react/with-deps-check      clojure.core/fn
+                quo.previews.preview/list-comp clojure.core/for
+                status-im.utils.styles/def     clojure.core/def
+                status-im.utils.styles/defn    clojure.core/defn
+                test-helpers.unit/deftest-sub  clojure.core/defn
+                taoensso.tufte/defnp           clojure.core/defn}
+ :linters      {:consistent-alias  {:level   :error
+                                    :aliases {clojure.string  string
+                                              clojure.set     set
+                                              clojure.walk    walk
+                                              taoensso.timbre log}}
+                :invalid-arity     {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
+                ;; TODO remove number when this is fixed
+                ;; https://github.com/borkdude/clj-kondo/issues/867
+                :unresolved-symbol {:exclude [PersistentPriorityMap.EMPTY
+                                              number
+                                              status-im.test-helpers/restore-app-db]}}
+ :config-in-ns {mocks.js-dependencies {:linters {:clojure-lsp/unused-public-var {:level :off}}}}}

.env

@@ -32,3 +32,4 @@ COMMANDS_ENABLED=1
 TWO_MINUTES_SYNCING=1
 SWAP_ENABLED=1
 STICKERS_TEST_ENABLED=1
+LOCAL_PAIRING_ENABLED=1

.env.e2e

@@ -32,3 +32,4 @@ COMMUNITIES_MANAGEMENT_ENABLED=1
 DELETE_MESSAGE_ENABLED=1
 TWO_MINUTES_SYNCING=1
 STICKERS_TEST_ENABLED=1
+LOCAL_PAIRING_ENABLED=1

.env.jenkins

@@ -34,3 +34,4 @@ DELETE_MESSAGE_ENABLED=1
 TWO_MINUTES_SYNCING=1
 ENABLE_QUO_PREVIEW=1
 STICKERS_TEST_ENABLED=1
+LOCAL_PAIRING_ENABLED=1

.zprintrc

@@ -19,15 +19,17 @@
              :respect-bl]
  :fn-map
  {"reg-sub"         :arg1-pair
+  "h/describe"      :arg1-body
+  "h/test"          :arg1-body
+  "global.describe" :arg1-body
+  "global.test"     :arg1-body
   "list-comp"       :binding
   "defview"         :arg1-body
   "letsubs"         :binding
   "testing"         :arg1-body
   "deftest-sub"     :arg1-body
+  "wait-for"        :arg1-body
   "with-deps-check" :arg1-body
-  "ns"              [:arg1-body
-                     {:list   {:respect-nl? false}
-                      :vector {:respect-nl? false}}]
   "->"              [:noarg1-body
                      {:list               {:constant-pair? false :force-nl? false}
                       :next-inner-restore [[:list :constant-pair?]]}]
@@ -39,7 +41,6 @@
  :remove    {:fn-force-nl #{:noarg1-body}}
  :style-map
  {:no-comma       {:map {:comma? false}}
-  :rj-var         {:pair {:justify {:max-variance 1000}}}
   :custom-justify
   {:doc     "Justify everything using pre-1.1.2 approach"
    :binding {:justify? true :justify {:max-variance 1000}}

Makefile

@@ -1,4 +1,4 @@
-.PHONY: nix-add-gcroots clean nix-clean run-metro test release _list _fix-node-perms _tmpdir-mk _tmpdir-rm _install-hooks
+.PHONY: nix-add-gcroots clean nix-clean run-metro test release _list _fix-node-perms _tmpdir-rm
 
 help: SHELL := /bin/sh
 help: ##@other Show this help
@@ -118,10 +118,11 @@ _fix-node-perms: ##@prepare Fix permissions so that directory can be cleaned
 	$(shell test -d node_modules && chmod -R 744 node_modules)
 	$(shell test -d node_modules.tmp && chmod -R 744 node_modules.tmp)
 
-_tmpdir-mk: SHELL := /bin/sh
-_tmpdir-mk: ##@prepare Create a TMPDIR for temporary files
+$(TMPDIR): SHELL := /bin/sh
+$(TMPDIR): ##@prepare Create a TMPDIR for temporary files
 	@mkdir -p "$(TMPDIR)"
 # Make sure TMPDIR exists every time make is called
+_tmpdir-mk: $(TMPDIR)
 -include _tmpdir-mk
 
 _tmpdir-rm: SHELL := /bin/sh
@@ -154,7 +155,7 @@ pod-install: ##@prepare Run 'pod install' to install podfiles and update Podfile
 
 update-fleets: ##@prepare Download up-to-date JSON file with current fleets state
 	curl -s https://fleets.status.im/ \
-		| jq --indent 4 --sort-keys . \
+		| sed 's/"warning": "/"warning": "DO NOT EDIT! /' \
 		> resources/config/fleets.json
 
 $(KEYSTORE_PATH): export TARGET := keytool
@@ -285,19 +286,24 @@ endif
 # Tests
 #--------------
 
+# Get all clojure files, including untracked, excluding removed
+define find_all_clojure_files
+$$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort <(git ls-files --deleted)) | grep -e \.clj$$ -e \.cljs$$ -e \.cljc$$ -e \.edn)
+endef
+
 lint: export TARGET := default
 lint: ##@test Run code style checks
-	sh scripts/lint-re-frame-in-quo-components.sh && \
+	@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 | grep -e \.clj$$ -e \.cljs$$ -e \.cljc$$ -e \.edn$$ || echo shadow-cljs.edn) && \
-	zprint '{:search-config? true}' -fc $$TARGETS
+	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
+	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES
 
+# NOTE: We run the linter twice because of https://github.com/kkinnear/zprint/issues/271
 lint-fix: export TARGET := default
 lint-fix: ##@test Run code style checks and fix issues
-	TARGETS=$$(git diff --diff-filter=d --cached --name-only | grep -e \.clj$$ -e \.cljs$$ -e \.cljc$$ -e \.edn$$ || echo shadow-cljs.edn) && \
-	clojure-lsp clean-ns --filenames $$(echo $$TARGETS | xargs | sed -e 's/ /,/g') && \
-	zprint '{:search-config? true}' -fw $$TARGETS && \
-	zprint '{:search-config? true}' -fw $$TARGETS
+	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
+	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
+	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES
 
 
 shadow-server: export TARGET := clojure
@@ -309,6 +315,14 @@ test-watch: ##@ Watch tests and re-run no changes to cljs files
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile mocks && yarn shadow-cljs compile test && node --require ./test-resources/override.js target/test/test.js' -e cljs
 
+test-watch-for-repl: export TARGET := clojure
+test-watch-for-repl: ##@ Watch tests and support REPL connections
+	yarn install
+	rm -f target/test/test.js
+	concurrently --kill-others --prefix-colors 'auto' --names 'build,repl' \
+		'yarn shadow-cljs compile mocks && yarn shadow-cljs watch test --verbose' \
+		'until [ -f ./target/test/test.js ] ; do sleep 1 ; done ; node --require ./test-resources/override.js ./target/test/test.js --repl'
+
 test: export TARGET := clojure
 test: ##@test Run tests once in NodeJS
 	# Here we create the gyp bindings for nodejs
@@ -323,7 +337,7 @@ run-visual-test-ios: XCODE_DERIVED_DATA := $(HOME)/Library/Developer/Xcode/Deriv
 run-visual-test-ios: APPLICATION_NAME := StatusIm-brfnruzfrkkycpbndmdoeyrigthc
 run-visual-test-ios: export TEST_BINARY_PATH := $(XCODE_DERIVED_DATA)/$(APPLICATION_NAME)/Build/Products/Debug-iphonesimulator/StatusIm.app
 run-visual-test-ios: ##@test Run tests once in NodeJS
-	detox test --configuration ios.sim.debug 
+	detox test --configuration ios.sim.debug
 
 component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true

ci/Jenkinsfile.ios

@@ -4,7 +4,7 @@ library 'status-jenkins-lib@v1.6.3'
 def isPRBuild = utils.isPRBuild()
 
 pipeline {
-  agent { label 'macos && x86_64 && nix-2.11 && xcode-13.4' }
+  agent { label 'macos && arm64 && nix-2.11 && xcode-14.2' }
 
   parameters {
     string(

doc/decisions/0007-masking-sensitive-data.md

@@ -20,6 +20,8 @@ printed out by mistake in a log entry (see https://github.com/status-im/status-m
 To minimize the risk of leaking passwords through logs, we should not pass
 passwords as strings in our codebase. We introduced a new type `MaskedData` in
 `status-im.utils.security`.
+update (16-Dec-2022) `status-im.utils.security` is now moved over to `utils.security.core` 
+
 We use `(security/mask-data <data to hide>` to wrap sensitive data into this
 type and then use `(security/unmask <masked-data>)` to get the plaintext back.
 

doc/new-guidelines.md

@@ -364,7 +364,7 @@ actually subscribing to them, so reframe's signal graph gets validated too.
       (is (= expected (recipes [current-user all-recipes location]))))))
 
 ;; good
-(require '[status-im.test-helpers :as h])
+(require '[test-helpers.unit :as h])
 
 (re-frame/reg-sub
  :user/recipes
@@ -399,13 +399,15 @@ src
 ├── react_native
 │   ├── gesture.cljs
 │   └── platform.cljs
-├── status_im
+├── status_im/
+├── status_im2
 │   ├── common
 │   │   └── components
 │   │       └── bottom_sheet.cljs
 │   ├── contexts/
 │   ├── setup/
 │   └── subs/
+├── test_helpers/
 └── utils.cljs
 ```
 
@@ -414,17 +416,23 @@ src
 - `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
+- `src/status_im2/`: Directory where we try to be as strict as possible about
+  our guidelines and where we prefer to write code for the new, redesigned
+  mobile app.
+- `src/status_im/`: Directory containing what we call "old code", not yet
+  migrated to new guidelines for the new mobile app.
+- `src/status_im2/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
+- `src/status_im2/common/components/`: Contains reusable components that are not
   part of the design system (quo2).
-- `src/status_im/contexts/`: Contains [bounded contexts](#glossary), like
+- `src/status_im2/contexts/`: Contains [bounded contexts](#glossary), like
   `browser/`, `messaging/`, etc. As much as possible, _bounded contexts_ should
   not directly require each other's namespaces.
-- `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_im2/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/test_helpers/`: Reusable utilities for writing all kinds of tests.
 - `src/status_im/subs/`: All subscriptions should live inside it.
 
 Directories named `utils/` can appear at any level of the directory tree. The
@@ -485,18 +493,26 @@ src
 [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
 ```
 
+Component tests should be created in a separate directory `__tests__`, colocated
+with the source. When the entire component implementation is isolated under a
+single directory, create a test file named `component_spec.cljs` instead.
+
+```
+└── filter
+    ├── component_spec.cljs
+    ├── style.cljs
+    └── view.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.

ios/Podfile

@@ -35,20 +35,24 @@ abstract_target 'Status' do
   target 'StatusImPR' do
   end
 
-  #commented out temporarily
-  #use_flipper!({ 'Flipper' => '0.74.0' })
-  #post_install do |installer|
-  #  flipper_post_install(installer)
-  #end
-
-  # some of libs wouldn't be build for x86_64 otherwise and that is
-  # necessary for ios simulators
-  post_install do |installer_representation|
-    installer_representation.pods_project.targets.each do |target|
+  post_install do |installer|
+    # some of libs wouldn't be build for x86_64 otherwise and that is
+    # necessary for ios simulators
+    installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
         config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
       end
     end
+
+    # FIXME: Fix dependency signing broken on Xcode 14 due to lack of Team ID.
+    # https://github.com/CocoaPods/CocoaPods/issues/11402
+    installer.pods_project.targets.each do |target|
+      if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
+        target.build_configurations.each do |config|
+          config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+        end
+      end
+    end
   end
 
   use_native_modules!

ios/Podfile.lock

@@ -640,7 +640,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 352a8ca9bbc8e2f097d680747a8c97ecef12d469
   FBReactNativeSpec: 7dfb84f624136a45727c813ed21d130cd3e61beb
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
+  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c

ios/StatusIm.xcodeproj/project.pbxproj

@@ -10,7 +10,6 @@
 		00E356F31AD99517003FC87E /* StatusImTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* StatusImTests.m */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		1DD629CDA66802C7E5575C38 /* libPods-Status-StatusImPR.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9674A3ACAC81C20142ABF2DC /* libPods-Status-StatusImPR.a */; };
 		25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */; };
 		3870E1E692E24133A80B07DE /* Inter-SemiBold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */; };
 		393D26E3080B443A998F4A2F /* Inter-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */; };
@@ -45,16 +44,17 @@
 		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 */; };
 		B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FC1DE7195700D694FF /* Social.framework */; };
 		B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FE1DE7195F00D694FF /* MessageUI.framework */; };
-		B2A2642817FA09632CAAE2BA /* libPods-Status-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 011AA4853B13093497B93F8C /* libPods-Status-StatusIm.a */; };
 		B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; };
 		BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
+		BFF6343F5A1F0F5FFFC8D020 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A4B974811E312E44D5BBE9EC /* libPods-Status-StatusIm-StatusImTests.a */; };
 		CE4E31B31D8695250033ED64 /* Statusgo.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = CE4E31B21D8695250033ED64 /* Statusgo.xcframework */; };
 		D1786306E0184916B11F4C37 /* Inter-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */; };
 		D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */; };
 		D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = B321D25F4493470980039457 /* Inter-BoldItalic.otf */; };
+		E9C92E7783C7FB91C9616112 /* libPods-Status-StatusImPR.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 57CBBEA420F440D344DD99E5 /* libPods-Status-StatusImPR.a */; };
+		F51761A0F4D1FAE41A72435A /* libPods-Status-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 928CC6D1D5BCCF9D3BC60D6A /* libPods-Status-StatusIm.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -102,35 +102,39 @@
 		00E356EE1AD99517003FC87E /* StatusImTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = StatusImTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* StatusImTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = StatusImTests.m; sourceTree = "<group>"; };
-		011AA4853B13093497B93F8C /* libPods-Status-StatusIm.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07F961A680F5B00A75B9A /* StatusIm.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = StatusIm.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = StatusIm/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = StatusIm/AppDelegate.m; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = StatusIm/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = StatusIm/main.m; sourceTree = "<group>"; };
 		1426DF592BA248FC81D955CB /* Inter-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Regular.otf"; path = "../resources/fonts/Inter-Regular.otf"; sourceTree = "<group>"; };
-		1E88D313E5D854BE6BC81FC1 /* libPods-Status-StatusIm-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3A2626CE245C3F2200D5F94B /* Dummy.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Dummy.swift; sourceTree = "<group>"; };
 		3A6406FB24A3ADF90046ED37 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		3A8F8EA924A4D31600BF206D /* GameKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = GameKit.framework; path = System/Library/Frameworks/GameKit.framework; sourceTree = SDKROOT; };
 		3AAD2ADC24A3A60E0075D594 /* Status PR.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Status PR.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3AB1C3AD245C043900098F67 /* StatusIm-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusIm-Bridging-Header.h"; sourceTree = "<group>"; };
-		45E0DC52E25A332264874B0F /* Pods-Status-StatusIm.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.release.xcconfig"; sourceTree = "<group>"; };
+		43341A7CBCE457435677CC51 /* 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>"; };
 		4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		4E586E1B0E544F64AA9F5BD1 /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
+		564309A78329EB657677709C /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
+		57CBBEA420F440D344DD99E5 /* libPods-Status-StatusImPR.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusImPR.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		5F30F922E4B02AB10F6CB65E /* Pods-Status-StatusIm.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.release.xcconfig"; sourceTree = "<group>"; };
 		65F693BD2578002500A45E76 /* CoreNFC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreNFC.framework; path = System/Library/Frameworks/CoreNFC.framework; sourceTree = SDKROOT; };
 		65F693BF2578003600A45E76 /* CoreNFC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreNFC.framework; path = Platforms/MacOSX.platform/Developer/SDKs/MacOSX11.0.sdk/System/iOSSupport/System/Library/Frameworks/CoreNFC.framework; sourceTree = DEVELOPER_DIR; };
 		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>"; };
+		70ACC04C7CF0A6C6421A805D /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.release.xcconfig"; 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>"; };
+		8B3C115CD813729DE4735219 /* Pods-Status-StatusImPR.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.release.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; };
+		8D3CFDC9666FBD03D1AA059A /* Pods-Status-StatusImPR.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.debug.xcconfig"; sourceTree = "<group>"; };
 		922C4CA61F4D5F8B0033C753 /* StatusIm.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = StatusIm.entitlements; path = StatusIm/StatusIm.entitlements; sourceTree = "<group>"; };
-		9674A3ACAC81C20142ABF2DC /* libPods-Status-StatusImPR.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusImPR.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		928CC6D1D5BCCF9D3BC60D6A /* libPods-Status-StatusIm.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "InterStatus-Regular.otf"; path = "../resources/fonts/InterStatus-Regular.otf"; sourceTree = "<group>"; };
 		9EC0135C1E06FB1900155B5C /* RCTWKWebView.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWKWebView.xcodeproj; path = "../node_modules/react-native-wkwebview-reborn/ios/RCTWKWebView.xcodeproj"; sourceTree = "<group>"; };
+		A4B974811E312E44D5BBE9EC /* libPods-Status-StatusIm-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBoldItalic.otf"; path = "../resources/fonts/Inter-SemiBoldItalic.otf"; sourceTree = "<group>"; };
 		B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Italic.otf"; path = "../resources/fonts/Inter-Italic.otf"; sourceTree = "<group>"; };
 		B24FC7FC1DE7195700D694FF /* Social.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Social.framework; path = System/Library/Frameworks/Social.framework; sourceTree = SDKROOT; };
@@ -138,13 +142,9 @@
 		B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Medium.otf"; path = "../resources/fonts/Inter-Medium.otf"; sourceTree = "<group>"; };
 		B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StatusIm/Images.xcassets; sourceTree = "<group>"; };
 		B321D25F4493470980039457 /* Inter-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-BoldItalic.otf"; path = "../resources/fonts/Inter-BoldItalic.otf"; sourceTree = "<group>"; };
-		B650FC314F823A68E7CE11D5 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.release.xcconfig"; sourceTree = "<group>"; };
-		BB42B2C150BA8A2AA109EA43 /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
-		BF23313BEFBC84C6BB7E7677 /* Pods-Status-StatusImPR.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.release.xcconfig"; sourceTree = "<group>"; };
 		C6B1215047604CD59A4C74D6 /* Inter-MediumItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-MediumItalic.otf"; path = "../resources/fonts/Inter-MediumItalic.otf"; sourceTree = "<group>"; };
 		CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Bold.otf"; path = "../resources/fonts/Inter-Bold.otf"; sourceTree = "<group>"; };
 		CE4E31B21D8695250033ED64 /* Statusgo.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = Statusgo.xcframework; path = "../modules/react-native-status/ios/RCTStatus/Statusgo.xcframework"; sourceTree = "<group>"; };
-		FBF6AB84EBC2085D28C3CDEF /* Pods-Status-StatusImPR.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.debug.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -152,7 +152,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				A0093AB50DA85E1D01818CCA /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
+				BFF6343F5A1F0F5FFFC8D020 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -165,7 +165,7 @@
 				CE4E31B31D8695250033ED64 /* Statusgo.xcframework in Frameworks */,
 				25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */,
 				BA68A2377A20496EA737000D /* libz.tbd in Frameworks */,
-				B2A2642817FA09632CAAE2BA /* libPods-Status-StatusIm.a in Frameworks */,
+				F51761A0F4D1FAE41A72435A /* libPods-Status-StatusIm.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -179,7 +179,7 @@
 				3AAD2AC224A3A60E0075D594 /* Statusgo.xcframework in Frameworks */,
 				3AAD2AC524A3A60E0075D594 /* libc++.tbd in Frameworks */,
 				3AAD2AC624A3A60E0075D594 /* libz.tbd in Frameworks */,
-				1DD629CDA66802C7E5575C38 /* libPods-Status-StatusImPR.a in Frameworks */,
+				E9C92E7783C7FB91C9616112 /* libPods-Status-StatusImPR.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -302,9 +302,9 @@
 				CE4E31B21D8695250033ED64 /* Statusgo.xcframework */,
 				8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */,
 				4E586E1B0E544F64AA9F5BD1 /* libz.tbd */,
-				011AA4853B13093497B93F8C /* libPods-Status-StatusIm.a */,
-				1E88D313E5D854BE6BC81FC1 /* libPods-Status-StatusIm-StatusImTests.a */,
-				9674A3ACAC81C20142ABF2DC /* libPods-Status-StatusImPR.a */,
+				928CC6D1D5BCCF9D3BC60D6A /* libPods-Status-StatusIm.a */,
+				A4B974811E312E44D5BBE9EC /* libPods-Status-StatusIm-StatusImTests.a */,
+				57CBBEA420F440D344DD99E5 /* libPods-Status-StatusImPR.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -312,12 +312,12 @@
 		D0D5C8D06825D33BA2D2121E /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				BB42B2C150BA8A2AA109EA43 /* Pods-Status-StatusIm.debug.xcconfig */,
-				45E0DC52E25A332264874B0F /* Pods-Status-StatusIm.release.xcconfig */,
-				7AFBE28450C0239119FBDBA2 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */,
-				B650FC314F823A68E7CE11D5 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */,
-				FBF6AB84EBC2085D28C3CDEF /* Pods-Status-StatusImPR.debug.xcconfig */,
-				BF23313BEFBC84C6BB7E7677 /* Pods-Status-StatusImPR.release.xcconfig */,
+				564309A78329EB657677709C /* Pods-Status-StatusIm.debug.xcconfig */,
+				5F30F922E4B02AB10F6CB65E /* Pods-Status-StatusIm.release.xcconfig */,
+				43341A7CBCE457435677CC51 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */,
+				70ACC04C7CF0A6C6421A805D /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */,
+				8D3CFDC9666FBD03D1AA059A /* Pods-Status-StatusImPR.debug.xcconfig */,
+				8B3C115CD813729DE4735219 /* Pods-Status-StatusImPR.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -329,11 +329,11 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "StatusImTests" */;
 			buildPhases = (
-				9EDBFFDF8534CA0328CECC7B /* [CP] Check Pods Manifest.lock */,
+				0F876BD5356F61BF142A01A0 /* [CP] Check Pods Manifest.lock */,
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
-				BE7BAE4A16BB2298029AE05C /* [CP] Copy Pods Resources */,
+				6ECED279DE66BA46FFB5EE0D /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -349,14 +349,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "StatusIm" */;
 			buildPhases = (
-				3A2B06D667746967CAF851DA /* [CP] Check Pods Manifest.lock */,
+				119C58BA120E4E4D213DA7CD /* [CP] Check Pods Manifest.lock */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				20B6B6891D92C42700CC5C6A /* Embed Frameworks */,
 				E3914A731DF919ED00EBB515 /* Run Script */,
-				CBFE8A62956C05D561D73D56 /* [CP] Copy Pods Resources */,
+				3C1038075AE5E6FB86AC2319 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -371,14 +371,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 3AAD2AD924A3A60E0075D594 /* Build configuration list for PBXNativeTarget "StatusImPR" */;
 			buildPhases = (
-				D0BDEAC0595D0C2E7409DBA0 /* [CP] Check Pods Manifest.lock */,
+				50F1BA2DC5224CBE6FDD2998 /* [CP] Check Pods Manifest.lock */,
 				3AAD2ABB24A3A60E0075D594 /* Sources */,
 				3AAD2ABF24A3A60E0075D594 /* Frameworks */,
 				3AAD2AC924A3A60E0075D594 /* Resources */,
 				3AAD2AD524A3A60E0075D594 /* Bundle React Native code and images */,
 				3AAD2AD624A3A60E0075D594 /* Embed Frameworks */,
 				3AAD2AD724A3A60E0075D594 /* Run Script */,
-				7C4DF7147D0F01A8C9DB77D3 /* [CP] Copy Pods Resources */,
+				E732E3E1B024946173BF6D3D /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -528,7 +528,29 @@
 			shellPath = /bin/sh;
 			shellScript = "set -o errexit\nexport NODE_BINARY=\"node\"\nexport NODE_ARGS=\" --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
 		};
-		3A2B06D667746967CAF851DA /* [CP] Check Pods Manifest.lock */ = {
+		0F876BD5356F61BF142A01A0 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-StatusImTests-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		119C58BA120E4E4D213DA7CD /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -578,73 +600,7 @@
 			shellPath = /bin/sh;
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./set_xcode_version.log 2>&1";
 		};
-		7C4DF7147D0F01A8C9DB77D3 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
-		9EDBFFDF8534CA0328CECC7B /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-StatusImTests-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
-		BE7BAE4A16BB2298029AE05C /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
-		CBFE8A62956C05D561D73D56 /* [CP] Copy Pods Resources */ = {
+		3C1038075AE5E6FB86AC2319 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -666,7 +622,7 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		D0BDEAC0595D0C2E7409DBA0 /* [CP] Check Pods Manifest.lock */ = {
+		50F1BA2DC5224CBE6FDD2998 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -688,6 +644,28 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		6ECED279DE66BA46FFB5EE0D /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		E3914A731DF919ED00EBB515 /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 8;
@@ -702,6 +680,28 @@
 			shellPath = /bin/sh;
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./set_xcode_version.log 2>&1";
 		};
+		E732E3E1B024946173BF6D3D /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */
@@ -749,7 +749,7 @@
 /* Begin XCBuildConfiguration section */
 		00E356F61AD99517003FC87E /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 7AFBE28450C0239119FBDBA2 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
+			baseConfigurationReference = 43341A7CBCE457435677CC51 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_ID_SUFFIX = .debug;
@@ -786,7 +786,7 @@
 		};
 		00E356F71AD99517003FC87E /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = B650FC314F823A68E7CE11D5 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
+			baseConfigurationReference = 70ACC04C7CF0A6C6421A805D /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_ID_SUFFIX = "";
@@ -819,7 +819,7 @@
 		};
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = BB42B2C150BA8A2AA109EA43 /* Pods-Status-StatusIm.debug.xcconfig */;
+			baseConfigurationReference = 564309A78329EB657677709C /* Pods-Status-StatusIm.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = .debug;
@@ -893,7 +893,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 45E0DC52E25A332264874B0F /* Pods-Status-StatusIm.release.xcconfig */;
+			baseConfigurationReference = 5F30F922E4B02AB10F6CB65E /* Pods-Status-StatusIm.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";
@@ -957,7 +957,7 @@
 		};
 		3AAD2ADA24A3A60E0075D594 /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = FBF6AB84EBC2085D28C3CDEF /* Pods-Status-StatusImPR.debug.xcconfig */;
+			baseConfigurationReference = 8D3CFDC9666FBD03D1AA059A /* Pods-Status-StatusImPR.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = .debug;
@@ -1026,7 +1026,7 @@
 		};
 		3AAD2ADB24A3A60E0075D594 /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = BF23313BEFBC84C6BB7E7677 /* Pods-Status-StatusImPR.release.xcconfig */;
+			baseConfigurationReference = 8B3C115CD813729DE4735219 /* Pods-Status-StatusImPR.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIconPR$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";

modules/react-native-status/android/build.gradle

@@ -19,6 +19,11 @@ def getStatusGoSHA1 = { ->
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
     defaultConfig {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion

modules/react-native-status/android/src/main/java/im/status/ethereum/module/StatusModule.java

@@ -59,8 +59,12 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.io.OutputStream;
 import java.io.OutputStreamWriter;
+import java.lang.reflect.Method;
+import java.lang.reflect.InvocationTargetException;
 import java.text.SimpleDateFormat;
 import java.util.HashMap;
+import java.util.function.Function;
+import java.util.function.Supplier;
 import java.util.Map;
 import java.util.Stack;
 import java.util.zip.ZipEntry;
@@ -527,45 +531,33 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         StatusThreadPoolExecutor.getInstance().execute(r);
     }
 
-    @ReactMethod
-    public void verify(final String address, final String password, final Callback callback) {
-        Log.d(TAG, "verify");
+    private void executeRunnableStatusGoMethod(Supplier<String> method, Callback callback) throws JSONException {
         if (!checkAvailability()) {
             callback.invoke(false);
             return;
         }
 
+        Runnable runnableTask = () -> {
+            String res = method.get();
+            callback.invoke(res);
+        };
+
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
+    }
+
+    @ReactMethod
+    public void verify(final String address, final String password, final Callback callback) throws JSONException {
         Activity currentActivity = getCurrentActivity();
 
         final String absRootDirPath = this.getNoBackupDirectory();
         final String newKeystoreDir = pathCombine(absRootDirPath, "keystore");
 
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String result = Statusgo.verifyAccountPassword(newKeystoreDir, address, password);
-
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        executeRunnableStatusGoMethod(() -> Statusgo.verifyAccountPassword(newKeystoreDir, address, password), callback);
     }
 
     @ReactMethod
-    public void verifyDatabasePassword(final String keyUID, final String password, final Callback callback) {
-        Log.d(TAG, "verifyDatabasePassword");
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String result = Statusgo.verifyDatabasePassword(keyUID, password);
-
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void verifyDatabasePassword(final String keyUID, final String password, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.verifyDatabasePassword(keyUID, password), callback);
     }
 
     public String getKeyStorePath(String keyUID) {
@@ -735,361 +727,209 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void addPeer(final String enode, final Callback callback) {
-        Log.d(TAG, "addPeer");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.addPeer(enode);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void addPeer(final String enode, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.addPeer(enode), callback);
     }
 
     @ReactMethod
-    public void multiAccountStoreAccount(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountStoreAccount");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountStoreAccount(json);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountStoreAccount(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountStoreAccount(json), callback);
     }
 
     @ReactMethod
-    public void multiAccountLoadAccount(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountLoadAccount");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountLoadAccount(json);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountLoadAccount(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountLoadAccount(json), callback);
     }
 
     @ReactMethod
-    public void multiAccountReset(final Callback callback) {
-        Log.d(TAG, "multiAccountReset");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountReset();
+    public void multiAccountReset(final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountReset(), callback);
 
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
     }
 
     @ReactMethod
-    public void multiAccountDeriveAddresses(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountDeriveAddresses");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountDeriveAddresses(json);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountDeriveAddresses(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountDeriveAddresses(json), callback);
     }
 
     @ReactMethod
-    public void multiAccountGenerateAndDeriveAddresses(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountGenerateAndDeriveAddresses");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountGenerateAndDeriveAddresses(json);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountGenerateAndDeriveAddresses(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountGenerateAndDeriveAddresses(json), callback);
     }
 
     @ReactMethod
-    public void multiAccountStoreDerived(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountStoreDerived");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountStoreDerivedAccounts(json);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountStoreDerived(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountStoreDerivedAccounts(json), callback);
     }
 
     @ReactMethod
-    public void multiAccountImportMnemonic(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountImportMnemonic");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountImportMnemonic(json);
-                callback.invoke(res);
-            }
-        };
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountImportMnemonic(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountImportMnemonic(json), callback);
     }
 
     @ReactMethod
-    public void multiAccountImportPrivateKey(final String json, final Callback callback) {
-        Log.d(TAG, "multiAccountImportPrivateKey");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.multiAccountImportPrivateKey(json);
-                callback.invoke(res);
-            }
-        };
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void multiAccountImportPrivateKey(final String json, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.multiAccountImportPrivateKey(json), callback);
     }
 
     @ReactMethod
-    public void hashTransaction(final String txArgsJSON, final Callback callback) {
-        Log.d(TAG, "hashTransaction");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.hashTransaction(txArgsJSON);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void hashTransaction(final String txArgsJSON, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.hashTransaction(txArgsJSON), callback);
     }
 
     @ReactMethod
-    public void hashMessage(final String message, final Callback callback) {
-        Log.d(TAG, "hashMessage");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.hashMessage(message);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void hashMessage(final String message, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.hashMessage(message), callback);
     }
 
     @ReactMethod
-    public void hashTypedData(final String data, final Callback callback) {
-        Log.d(TAG, "hashTypedData");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
+    public void getConnectionStringForBootstrappingAnotherDevice(final String configJSON, final Callback callback) throws JSONException {
+         final JSONObject jsonConfig = new JSONObject(configJSON);
+         final String keyUID = jsonConfig.getString("keyUID");
+         final String keyStorePath = this.getKeyStorePath(keyUID);
+         jsonConfig.put("keystorePath", keyStorePath);
 
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.hashTypedData(data);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        executeRunnableStatusGoMethod(() -> Statusgo.getConnectionStringForBootstrappingAnotherDevice(jsonConfig.toString()), callback);
     }
 
     @ReactMethod
-    public void hashTypedDataV4(final String data, final Callback callback) {
-        Log.d(TAG, "hashTypedDataV4");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
+    public void inputConnectionStringForBootstrapping(final String connectionString, final String configJSON, final Callback callback) throws JSONException {
+         final JSONObject jsonConfig = new JSONObject(configJSON);
+         final String keyStorePath = pathCombine(this.getNoBackupDirectory(), "/keystore");
+         jsonConfig.put("keystorePath", keyStorePath);
 
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.hashTypedDataV4(data);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        executeRunnableStatusGoMethod(() -> Statusgo.inputConnectionStringForBootstrapping(connectionString, jsonConfig.toString()), callback);
     }
 
     @ReactMethod
-    public void sendTransactionWithSignature(final String txArgsJSON, final String signature, final Callback callback) {
-        Log.d(TAG, "sendTransactionWithSignature");
+    public void multiformatSerializePublicKey(final String multiCodecKey, final String base58btc, final Callback callback) throws JSONException {
         if (!checkAvailability()) {
             callback.invoke(false);
             return;
         }
 
-        Runnable r = new Runnable() {
+        Runnable runnableTask = new Runnable() {
             @Override
             public void run() {
-                String res = Statusgo.sendTransactionWithSignature(txArgsJSON, signature);
+                String res = Statusgo.multiformatSerializePublicKey(multiCodecKey,base58btc);
                 callback.invoke(res);
             }
         };
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
     }
 
     @ReactMethod
-    public void sendTransaction(final String txArgsJSON, final String password, final Callback callback) {
-        Log.d(TAG, "sendTransaction");
+    public void multiformatDeserializePublicKey(final String multiCodecKey, final String base58btc, final Callback callback) throws JSONException {
         if (!checkAvailability()) {
             callback.invoke(false);
             return;
         }
 
-        Runnable r = new Runnable() {
+        Runnable runnableTask = new Runnable() {
             @Override
             public void run() {
-                String res = Statusgo.sendTransaction(txArgsJSON, password);
+                String res = Statusgo.multiformatDeserializePublicKey(multiCodecKey,base58btc);
                 callback.invoke(res);
             }
         };
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
     }
 
     @ReactMethod
-    public void signMessage(final String rpcParams, final Callback callback) {
-        Log.d(TAG, "signMessage");
+    public void compressPublicKey(final String multiCodecKey, final Callback callback) throws JSONException {
         if (!checkAvailability()) {
             callback.invoke(false);
             return;
         }
 
-        Runnable r = new Runnable() {
+        Runnable runnableTask = new Runnable() {
             @Override
             public void run() {
-                String res = Statusgo.signMessage(rpcParams);
+                String res = Statusgo.compressPublicKey(multiCodecKey);
                 callback.invoke(res);
             }
         };
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
     }
 
     @ReactMethod
-    public void recover(final String rpcParams, final Callback callback) {
-        Log.d(TAG, "recover");
+    public void decompressPublicKey(final String multiCodecKey, final Callback callback) throws JSONException {
         if (!checkAvailability()) {
             callback.invoke(false);
             return;
         }
 
-        Runnable r = new Runnable() {
+        Runnable runnableTask = new Runnable() {
             @Override
             public void run() {
-                String res = Statusgo.recover(rpcParams);
+                String res = Statusgo.decompressPublicKey(multiCodecKey);
                 callback.invoke(res);
             }
         };
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
     }
 
     @ReactMethod
-    public void signTypedData(final String data, final String account, final String password, final Callback callback) {
-        Log.d(TAG, "signTypedData");
+    public void deserializeAndCompressKey(final String desktopKey, final Callback callback) throws JSONException {
         if (!checkAvailability()) {
             callback.invoke(false);
             return;
         }
 
-        Runnable r = new Runnable() {
+        Runnable runnableTask = new Runnable() {
             @Override
             public void run() {
-                String res = Statusgo.signTypedData(data, account, password);
+                String res = Statusgo.deserializeAndCompressKey(desktopKey);
                 callback.invoke(res);
             }
         };
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
     }
 
     @ReactMethod
-    public void signTypedDataV4(final String data, final String account, final String password, final Callback callback) {
-        Log.d(TAG, "signTypedDataV4");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
+    public void hashTypedData(final String data, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.hashTypedData(data), callback);
+    }
 
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.signTypedDataV4(data, account, password);
-                callback.invoke(res);
-            }
-        };
+    @ReactMethod
+    public void hashTypedDataV4(final String data, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.hashTypedDataV4(data), callback);
+    }
+
+    @ReactMethod
+    public void sendTransactionWithSignature(final String txArgsJSON, final String signature, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.sendTransactionWithSignature(txArgsJSON, signature), callback);
+    }
+
+    @ReactMethod
+    public void sendTransaction(final String txArgsJSON, final String password, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.sendTransaction(txArgsJSON, password), callback);
+    }
+
+    @ReactMethod
+    public void signMessage(final String rpcParams, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.signMessage(rpcParams), callback);
+    }
+
+    @ReactMethod
+    public void recover(final String rpcParams, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.recover(rpcParams), callback);
+    }
+
+    @ReactMethod
+    public void signTypedData(final String data, final String account, final String password, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.signTypedData(data, account, password), callback);
+    }
+
+    @ReactMethod
+    public void signTypedDataV4(final String data, final String account, final String password, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.signTypedDataV4(data, account, password), callback);
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
     }
 
     @ReactMethod
@@ -1194,29 +1034,13 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void callRPC(final String payload, final Callback callback) {
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.callRPC(payload);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void callRPC(final String payload, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.callRPC(payload), callback);
     }
 
     @ReactMethod
-    public void callPrivateRPC(final String payload, final Callback callback) {
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.callPrivateRPC(payload);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void callPrivateRPC(final String payload, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.callPrivateRPC(payload), callback);
     }
 
     @ReactMethod
@@ -1279,105 +1103,30 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void extractGroupMembershipSignatures(final String signaturePairs, final Callback callback) {
-        Log.d(TAG, "extractGroupMembershipSignatures");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String result = Statusgo.extractGroupMembershipSignatures(signaturePairs);
-
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void extractGroupMembershipSignatures(final String signaturePairs, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.extractGroupMembershipSignatures(signaturePairs), callback);
     }
 
     @ReactMethod
-    public void signGroupMembership(final String content, final Callback callback) {
-        Log.d(TAG, "signGroupMembership");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String result = Statusgo.signGroupMembership(content);
-
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void signGroupMembership(final String content, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.signGroupMembership(content), callback);
     }
 
     @ReactMethod
-    public void getNodeConfig(final Callback callback) {
-        Log.d(TAG, "getNodeConfig");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String result = Statusgo.getNodeConfig();
-
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void getNodeConfig(final Callback callback) throws JSONException {
+         executeRunnableStatusGoMethod(() -> Statusgo.getNodeConfig(), callback);
     }
 
     @ReactMethod
-    public void deleteMultiaccount(final String keyUID, final Callback callback) {
-        Log.d(TAG, "deleteMultiaccount");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
+    public void deleteMultiaccount(final String keyUID, final Callback callback) throws JSONException {
         final String keyStoreDir = this.getKeyStorePath(keyUID);
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.deleteMultiaccount(keyUID, keyStoreDir);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        executeRunnableStatusGoMethod(() -> Statusgo.deleteMultiaccount(keyUID, keyStoreDir), callback);
     }
 
     @ReactMethod
-    public void deleteImportedKey(final String keyUID, final String address, final String password, final Callback callback) {
-        Log.d(TAG, "deleteImportedKey");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
+    public void deleteImportedKey(final String keyUID, final String address, final String password, final Callback callback) throws JSONException {
         final String keyStoreDir = this.getKeyStorePath(keyUID);
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.deleteImportedKey(address, password, keyStoreDir);
-
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        executeRunnableStatusGoMethod(() -> Statusgo.deleteImportedKey(address, password, keyStoreDir), callback);
     }
 
     @ReactMethod(isBlockingSynchronousMethod = true)
@@ -1386,24 +1135,8 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void generateAliasAsync(final String seed, final Callback callback) {
-        Log.d(TAG, "generateAliasAsync");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.generateAlias(seed);
-
-                Log.d(TAG, res);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void generateAliasAsync(final String seed, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.generateAlias(seed), callback);
     }
 
     @ReactMethod(isBlockingSynchronousMethod = true)
@@ -1467,47 +1200,33 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void identiconAsync(final String seed, final Callback callback) {
-        Log.d(TAG, "identiconAsync");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String res = Statusgo.identicon(seed);
-
-                Log.d(TAG, res);
-                callback.invoke(res);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void identiconAsync(final String seed, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.identicon(seed), callback);
     }
 
     @ReactMethod
     public void generateAliasAndIdenticonAsync(final String seed, final Callback callback) {
-        Log.d(TAG, "generateAliasAndIdenticonAsync");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
 
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String resIdenticon = Statusgo.identicon(seed);
-                String resAlias = Statusgo.generateAlias(seed);
+         Log.d(TAG, "generateAliasAndIdenticonAsync");
+                if (!checkAvailability()) {
+                    callback.invoke(false);
+                    return;
+                }
 
-                Log.d(TAG, resIdenticon);
-                Log.d(TAG, resAlias);
-                callback.invoke(resAlias, resIdenticon);
-            }
-        };
+                Runnable r = new Runnable() {
+                    @Override
+                    public void run() {
+                        String resIdenticon = Statusgo.identicon(seed);
+                        String resAlias = Statusgo.generateAlias(seed);
+
+                        Log.d(TAG, resIdenticon);
+                        Log.d(TAG, resAlias);
+                        callback.invoke(resAlias, resIdenticon);
+                    }
+                };
+
+                StatusThreadPoolExecutor.getInstance().execute(r);
 
-        StatusThreadPoolExecutor.getInstance().execute(r);
     }
 
     @Override
@@ -1529,24 +1248,8 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void validateMnemonic(final String seed, final Callback callback) {
-        Log.d(TAG, "validateMnemonic");
-        if (!checkAvailability()) {
-            callback.invoke(false);
-            return;
-        }
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String resValidateMnemonic = Statusgo.validateMnemonic(seed);
-
-                Log.d(TAG, resValidateMnemonic);
-                callback.invoke(resValidateMnemonic);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void validateMnemonic(final String seed, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.validateMnemonic(seed), callback);
     }
 
     @ReactMethod
@@ -1597,35 +1300,14 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     }
 
     @ReactMethod
-    public void reEncryptDbAndKeystore(final String keyUID, final String password, final String newPassword, final Callback callback) {
-        Log.d(TAG, "reEncryptDbAndKeyStore");
-
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-		// changes db password and re-encrypts keystore
-                String result = Statusgo.changeDatabasePassword(keyUID, password, newPassword);
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+    public void reEncryptDbAndKeystore(final String keyUID, final String password, final String newPassword, final Callback callback) throws JSONException {
+        executeRunnableStatusGoMethod(() -> Statusgo.changeDatabasePassword(keyUID, password, newPassword), callback);
     }
 
     @ReactMethod
-    public void convertToKeycardAccount(final String keyUID, final String accountData, final String options, final String password, final String newPassword, final Callback callback) {
-        Log.d(TAG, "convertToKeycardAccount");
-
+    public void convertToKeycardAccount(final String keyUID, final String accountData, final String options, final String password, final String newPassword, final Callback callback) throws JSONException {
         final String keyStoreDir = this.getKeyStorePath(keyUID);
-        Runnable r = new Runnable() {
-            @Override
-            public void run() {
-                String result = Statusgo.convertToKeycardAccount(keyStoreDir, accountData, options, password, newPassword);
-                callback.invoke(result);
-            }
-        };
-
-        StatusThreadPoolExecutor.getInstance().execute(r);
+        executeRunnableStatusGoMethod(() -> Statusgo.convertToKeycardAccount(keyStoreDir, accountData, options, password, newPassword), callback);
     }
 
 }

modules/react-native-status/ios/RCTStatus/RCTStatus.m

@@ -90,26 +90,25 @@ static RCTBridge *bridge;
 
 RCT_EXPORT_MODULE();
 
-////////////////////////////////////////////////////////////////////
 #pragma mark - shouldMoveToInternalStorage
-//////////////////////////////////////////////////////////////////// shouldMoveToInternalStorage
+
 RCT_EXPORT_METHOD(shouldMoveToInternalStorage:(RCTResponseSenderBlock)onResultCallback) {
     // Android only
     onResultCallback(@[[NSNull null]]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - moveToInternalStorage
-//////////////////////////////////////////////////////////////////// moveToInternalStorage
+
 RCT_EXPORT_METHOD(moveToInternalStorage:(RCTResponseSenderBlock)onResultCallback) {
     // Android only
     onResultCallback(@[[NSNull null]]);
 }
 
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - InitKeystore method
-//////////////////////////////////////////////////////////////////// StopNode
+
 RCT_EXPORT_METHOD(initKeystore:(NSString *)keyUID
                       callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -132,9 +131,9 @@ RCT_EXPORT_METHOD(initKeystore:(NSString *)keyUID
                    });
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - SendLogs method
-//////////////////////////////////////////////////////////////////// sendLogs
+
 RCT_EXPORT_METHOD(sendLogs:(NSString *)dbJson
                   jsLogs:(NSString *)jsLogs
                   callback:(RCTResponseSenderBlock)callback) {
@@ -196,7 +195,6 @@ RCT_EXPORT_METHOD(sendLogs:(NSString *)dbJson
     callback(@[zipFile.absoluteString]);
 }
 
-//////////////////////////////////////////////////////////////////// addPeer
 RCT_EXPORT_METHOD(exportLogs:(RCTResponseSenderBlock)callback) {
 #if DEBUG
     NSLog(@"exportLogs() method called");
@@ -205,7 +203,6 @@ RCT_EXPORT_METHOD(exportLogs:(RCTResponseSenderBlock)callback) {
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// addPeer
 RCT_EXPORT_METHOD(addPeer:(NSString *)enode
                   callback:(RCTResponseSenderBlock)callback) {
   NSString *result = StatusgoAddPeer(enode);
@@ -215,7 +212,6 @@ RCT_EXPORT_METHOD(addPeer:(NSString *)enode
 #endif
 }
 
-//////////////////////////////////////////////////////////////////// multiAccountImportPrivateKey
 RCT_EXPORT_METHOD(deleteMultiaccount:(NSString *)keyUID
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -226,7 +222,6 @@ RCT_EXPORT_METHOD(deleteMultiaccount:(NSString *)keyUID
     callback(@[result]);
 }
 
-////////////////////////////////////verify//////////////////////////////// multiAccountImportPrivateKey
 RCT_EXPORT_METHOD(deleteImportedKey:(NSString *)keyUID
                   address:(NSString *)address
                   password:(NSString *)password
@@ -239,7 +234,6 @@ RCT_EXPORT_METHOD(deleteImportedKey:(NSString *)keyUID
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// multiAccountGenerateAndDeriveAddresses
 RCT_EXPORT_METHOD(multiAccountGenerateAndDeriveAddresses:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -249,7 +243,6 @@ RCT_EXPORT_METHOD(multiAccountGenerateAndDeriveAddresses:(NSString *)json
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// MultiAccountStoreAccount
 RCT_EXPORT_METHOD(multiAccountStoreAccount:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -259,7 +252,6 @@ RCT_EXPORT_METHOD(multiAccountStoreAccount:(NSString *)json
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// MultiAccountLoadAccount
 RCT_EXPORT_METHOD(multiAccountLoadAccount:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -269,7 +261,6 @@ RCT_EXPORT_METHOD(multiAccountLoadAccount:(NSString *)json
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// MultiAccountReset
 RCT_EXPORT_METHOD(multiAccountReset:(RCTResponseSenderBlock)callback) {
 #if DEBUG
     NSLog(@"MultiAccountReset() method called");
@@ -278,7 +269,6 @@ RCT_EXPORT_METHOD(multiAccountReset:(RCTResponseSenderBlock)callback) {
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// multiAccountStoreDerived
 RCT_EXPORT_METHOD(multiAccountStoreDerived:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -288,7 +278,6 @@ RCT_EXPORT_METHOD(multiAccountStoreDerived:(NSString *)json
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// multiAccountImportPrivateKey
 RCT_EXPORT_METHOD(multiAccountImportPrivateKey:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -298,7 +287,6 @@ RCT_EXPORT_METHOD(multiAccountImportPrivateKey:(NSString *)json
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// hashTransaction
 RCT_EXPORT_METHOD(hashTransaction:(NSString *)txArgsJSON
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -308,7 +296,6 @@ RCT_EXPORT_METHOD(hashTransaction:(NSString *)txArgsJSON
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// hashMessage
 RCT_EXPORT_METHOD(hashMessage:(NSString *)message
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -318,7 +305,72 @@ RCT_EXPORT_METHOD(hashMessage:(NSString *)message
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// hashTypedData
+RCT_EXPORT_METHOD(getConnectionStringForBootstrappingAnotherDevice:(NSString *)configJSON
+                  callback:(RCTResponseSenderBlock)callback) {
+
+    NSData *configData = [configJSON dataUsingEncoding:NSUTF8StringEncoding];
+    NSDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:nil];
+    NSString *keyUID = [configDict objectForKey:@"keyUID"];
+    NSURL *multiaccountKeystoreDir = [self getKeyStoreDir:keyUID];
+    NSString *keystoreDir = multiaccountKeystoreDir.path;
+
+    [configDict setValue:keystoreDir forKey:@"keystorePath"];
+    NSString *modifiedConfigJSON = [configDict bv_jsonStringWithPrettyPrint:NO];
+
+    NSString *result = StatusgoGetConnectionStringForBootstrappingAnotherDevice(modifiedConfigJSON);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(inputConnectionStringForBootstrapping:(NSString *)cs
+                  configJSON:(NSString *)configJSON
+                  callback:(RCTResponseSenderBlock)callback) {
+
+    NSData *configData = [configJSON dataUsingEncoding:NSUTF8StringEncoding];
+    NSDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:nil];
+    NSFileManager *fileManager = [NSFileManager defaultManager];
+    NSURL *rootUrl =[[fileManager URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask] lastObject];
+    NSURL *multiaccountKeystoreDir = [rootUrl URLByAppendingPathComponent:@"keystore"];
+    NSString *keystoreDir = multiaccountKeystoreDir.path;
+
+    [configDict setValue:keystoreDir forKey:@"keystorePath"];
+    NSString *modifiedConfigJSON = [configDict bv_jsonStringWithPrettyPrint:NO];
+
+    NSString *result = StatusgoInputConnectionStringForBootstrapping(cs,modifiedConfigJSON);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(multiformatSerializePublicKey:(NSString *)multiCodecKey
+                  base58btc:(NSString *)base58btc
+                  callback:(RCTResponseSenderBlock)callback) {
+    NSString *result = StatusgoMultiformatSerializePublicKey(multiCodecKey,base58btc);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(multiformatDeserializePublicKey:(NSString *)multiCodecKey
+                  base58btc:(NSString *)base58btc
+                  callback:(RCTResponseSenderBlock)callback) {
+    NSString *result = StatusgoMultiformatDeserializePublicKey(multiCodecKey,base58btc);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(decompressPublicKey:(NSString *)multiCodecKey
+                  callback:(RCTResponseSenderBlock)callback) {
+    NSString *result = StatusgoDecompressPublicKey(multiCodecKey);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(compressPublicKey:(NSString *)multiCodecKey
+                  callback:(RCTResponseSenderBlock)callback) {
+    NSString *result = StatusgoCompressPublicKey(multiCodecKey);
+    callback(@[result]);
+}
+
+RCT_EXPORT_METHOD(deserializeAndCompressKey:(NSString *)desktopKey
+                  callback:(RCTResponseSenderBlock)callback) {
+    NSString *result = StatusgoDeserializeAndCompressKey(desktopKey);
+    callback(@[result]);
+}
+
 RCT_EXPORT_METHOD(hashTypedData:(NSString *)data
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -328,7 +380,6 @@ RCT_EXPORT_METHOD(hashTypedData:(NSString *)data
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// hashTypedDataV4
 RCT_EXPORT_METHOD(hashTypedDataV4:(NSString *)data
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -338,7 +389,6 @@ RCT_EXPORT_METHOD(hashTypedDataV4:(NSString *)data
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// sendTransactionWithSignature
 RCT_EXPORT_METHOD(sendTransactionWithSignature:(NSString *)txArgsJSON
                   signature:(NSString *)signature
                   callback:(RCTResponseSenderBlock)callback) {
@@ -349,7 +399,6 @@ RCT_EXPORT_METHOD(sendTransactionWithSignature:(NSString *)txArgsJSON
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// multiAccountImportMnemonic
 RCT_EXPORT_METHOD(multiAccountImportMnemonic:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -359,7 +408,6 @@ RCT_EXPORT_METHOD(multiAccountImportMnemonic:(NSString *)json
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// multiAccountDeriveAddresses
 RCT_EXPORT_METHOD(multiAccountDeriveAddresses:(NSString *)json
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -379,7 +427,6 @@ RCT_EXPORT_METHOD(multiAccountDeriveAddresses:(NSString *)json
     return [json valueForKey:@"key-uid"];
 }
 
-//////////////////////////////////////////////////////////////////// prepareDirAndUpdateConfig
 -(NSString *) prepareDirAndUpdateConfig:(NSString *)config
                              withKeyUID:(NSString *)keyUID {
     NSFileManager *fileManager = [NSFileManager defaultManager];
@@ -452,7 +499,6 @@ RCT_EXPORT_METHOD(multiAccountDeriveAddresses:(NSString *)json
 }
 
 
-//////////////////////////////////////////////////////////////////// prepareDirAndUpdateConfig
 RCT_EXPORT_METHOD(prepareDirAndUpdateConfig:(NSString *)keyUID
                                      config:(NSString *)config
                                    callback:(RCTResponseSenderBlock)callback) {
@@ -464,7 +510,6 @@ RCT_EXPORT_METHOD(prepareDirAndUpdateConfig:(NSString *)keyUID
     callback(@[updatedConfig]);
 }
 
-//////////////////////////////////////////////////////////////////// saveAccountAndLogin
 RCT_EXPORT_METHOD(saveAccountAndLogin:(NSString *)multiaccountData
                   password:(NSString *)password
                   settings:(NSString *)settings
@@ -481,7 +526,6 @@ RCT_EXPORT_METHOD(saveAccountAndLogin:(NSString *)multiaccountData
     NSLog(@"%@", result);
 }
 
-//////////////////////////////////////////////////////////////////// saveAccountAndLoginWithKeycard
 RCT_EXPORT_METHOD(saveAccountAndLoginWithKeycard:(NSString *)multiaccountData
                   password:(NSString *)password
                   settings:(NSString *)settings
@@ -502,11 +546,11 @@ RCT_EXPORT_METHOD(saveAccountAndLoginWithKeycard:(NSString *)multiaccountData
 - (NSString *) getExportDbFilePath {
     NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:@"export.db"];
     NSFileManager *fileManager = [NSFileManager defaultManager];
-    
+
     if ([fileManager fileExistsAtPath:filePath]) {
         [fileManager removeItemAtPath:filePath error:nil];
     }
-    
+
     return filePath;
 }
 
@@ -543,7 +587,6 @@ RCT_EXPORT_METHOD(saveAccountAndLoginWithKeycard:(NSString *)multiaccountData
     }
 }
 
-//////////////////////////////////////////////////////////////////// login
 RCT_EXPORT_METHOD(login:(NSString *)accountData
                   password:(NSString *)password) {
 #if DEBUG
@@ -555,7 +598,6 @@ RCT_EXPORT_METHOD(login:(NSString *)accountData
     NSLog(@"%@", result);
 }
 
-//////////////////////////////////////////////////////////////////// loginWithConfig
 RCT_EXPORT_METHOD(loginWithConfig:(NSString *)accountData
                   password:(NSString *)password
                   configJSON:(NSString *)configJSON) {
@@ -568,7 +610,6 @@ RCT_EXPORT_METHOD(loginWithConfig:(NSString *)accountData
     NSLog(@"%@", result);
 }
 
-//////////////////////////////////////////////////////////////////// loginWithKeycard
 RCT_EXPORT_METHOD(loginWithKeycard:(NSString *)accountData
                   password:(NSString *)password
                   chatKey:(NSString *)chatKey) {
@@ -583,7 +624,6 @@ RCT_EXPORT_METHOD(loginWithKeycard:(NSString *)accountData
     NSLog(@"%@", result);
 }
 
-//////////////////////////////////////////////////////////////////// logout
 RCT_EXPORT_METHOD(logout) {
 #if DEBUG
     NSLog(@"Logout() method called");
@@ -593,7 +633,6 @@ RCT_EXPORT_METHOD(logout) {
     NSLog(@"%@", result);
 }
 
-//////////////////////////////////////////////////////////////////// openAccounts
 RCT_EXPORT_METHOD(openAccounts:(RCTResponseSenderBlock)callback) {
 #if DEBUG
     NSLog(@"OpenAccounts() method called");
@@ -607,7 +646,6 @@ RCT_EXPORT_METHOD(openAccounts:(RCTResponseSenderBlock)callback) {
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// verityAccountPassword
 RCT_EXPORT_METHOD(verify:(NSString *)address
                   password:(NSString *)password
                   callback:(RCTResponseSenderBlock)callback) {
@@ -624,7 +662,6 @@ RCT_EXPORT_METHOD(verify:(NSString *)address
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// verifyDatabasePassword
 RCT_EXPORT_METHOD(verifyDatabasePassword:(NSString *)keyUID
                   password:(NSString *)password
                   callback:(RCTResponseSenderBlock)callback) {
@@ -635,7 +672,6 @@ RCT_EXPORT_METHOD(verifyDatabasePassword:(NSString *)keyUID
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// changeDatabasePassword
 RCT_EXPORT_METHOD(reEncryptDbAndKeystore:(NSString *)keyUID
                   currentPassword:(NSString *)currentPassword
                   newPassword:(NSString *)newPassword
@@ -648,7 +684,6 @@ RCT_EXPORT_METHOD(reEncryptDbAndKeystore:(NSString *)keyUID
     callback(@[result]);
 }
 
-//////////////////////////////////////////////////////////////////// convertToKeycardAccount
 RCT_EXPORT_METHOD(convertToKeycardAccount:(NSString *)keyUID
                   accountData:(NSString *)accountData
                   settings:(NSString *)settings
@@ -663,9 +698,9 @@ RCT_EXPORT_METHOD(convertToKeycardAccount:(NSString *)keyUID
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - SendTransaction
-//////////////////////////////////////////////////////////////////// sendTransaction
+
 RCT_EXPORT_METHOD(sendTransaction:(NSString *)txArgsJSON
                   password:(NSString *)password
                   callback:(RCTResponseSenderBlock)callback) {
@@ -676,9 +711,9 @@ RCT_EXPORT_METHOD(sendTransaction:(NSString *)txArgsJSON
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - SignMessage
-//////////////////////////////////////////////////////////////////// signMessage
+
 RCT_EXPORT_METHOD(signMessage:(NSString *)message
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -688,9 +723,9 @@ RCT_EXPORT_METHOD(signMessage:(NSString *)message
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - Recover
-//////////////////////////////////////////////////////////////////// recover
+
 RCT_EXPORT_METHOD(recover:(NSString *)message
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -700,9 +735,9 @@ RCT_EXPORT_METHOD(recover:(NSString *)message
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - SignTypedData
-//////////////////////////////////////////////////////////////////// signTypedData
+
 RCT_EXPORT_METHOD(signTypedData:(NSString *)data
                   account:(NSString *)account
                   password:(NSString *)password
@@ -714,9 +749,9 @@ RCT_EXPORT_METHOD(signTypedData:(NSString *)data
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - SignTypedDataV4
-//////////////////////////////////////////////////////////////////// signTypedDataV4
+
 RCT_EXPORT_METHOD(signTypedDataV4:(NSString *)data
                   account:(NSString *)account
                   password:(NSString *)password
@@ -728,9 +763,9 @@ RCT_EXPORT_METHOD(signTypedDataV4:(NSString *)data
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - SignGroupMembership
-//////////////////////////////////////////////////////////////////// signGroupMembership
+
 RCT_EXPORT_METHOD(signGroupMembership:(NSString *)content
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -740,9 +775,9 @@ RCT_EXPORT_METHOD(signGroupMembership:(NSString *)content
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - ExtractGroupMembershipSignatures
-//////////////////////////////////////////////////////////////////// extractGroupMembershipSignatures
+
 RCT_EXPORT_METHOD(extractGroupMembershipSignatures:(NSString *)content
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -752,9 +787,9 @@ RCT_EXPORT_METHOD(extractGroupMembershipSignatures:(NSString *)content
     callback(@[result]);
 }
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - GetNodeConfig
-//////////////////////////////////////////////////////////////////// getNodeConfig
+
 RCT_EXPORT_METHOD(getNodeConfig:(RCTResponseSenderBlock)callback) {
 #if DEBUG
     NSLog(@"GetNodeConfig() method called");
@@ -764,9 +799,9 @@ RCT_EXPORT_METHOD(getNodeConfig:(RCTResponseSenderBlock)callback) {
 }
 
 
-////////////////////////////////////////////////////////////////////
+
 #pragma mark - only android methods
-////////////////////////////////////////////////////////////////////
+
 RCT_EXPORT_METHOD(setAdjustResize) {
 #if DEBUG
     NSLog(@"setAdjustResize() works only on Android");
@@ -957,10 +992,10 @@ RCT_EXPORT_METHOD(exportUnencryptedDatabase:(NSString *)accountData
 #if DEBUG
     NSLog(@"exportUnencryptedDatabase() method called");
 #endif
-    
+
     NSString *filePath = [self getExportDbFilePath];
     StatusgoExportUnencryptedDatabase(accountData, password, filePath);
-    
+
     callback(@[filePath]);
 }
 
@@ -995,7 +1030,7 @@ RCT_EXPORT_METHOD(deactivateKeepAwake)
     });
 }
 
-//// deviceinfo
+#pragma mark - deviceinfo
 
 - (bool) is24Hour
 {

nix/shell.nix

@@ -18,7 +18,7 @@ in mkShell {
     # build specific utilities
     clojure maven watchman
     # lint specific utilities
-    clj-kondo zprint clojure-lsp
+    clj-kondo zprint
     # other nice to have stuff
     yarn nodejs python27
   ] # and some special cases

package.json

@@ -89,6 +89,7 @@
     "@testing-library/jest-native": "^5.0.0",
     "@testing-library/react-native": "^11.2.0",
     "@types/jest": "^28.1.6",
+    "concurrently": "^7.6.0",
     "detox": "^19.9.1",
     "jest": "^25.1.0",
     "jest-circus": "^26.0.0",

resources/config/fleets.json

@@ -1,165 +1,197 @@
 {
-  "fleets": {
-    "eth.prod": {
-      "boot": {
-        "boot-01.ac-cn-hongkong-c.eth.prod": "enode://6e6554fb3034b211398fcd0f0082cbb6bd13619e1a7e76ba66e1809aaa0c5f1ac53c9ae79cf2fd4a7bacb10d12010899b370c75fed19b991d9c0cdd02891abad@47.75.99.169:443",
-        "boot-01.do-ams3.eth.prod": "enode://436cc6f674928fdc9a9f7990f2944002b685d1c37f025c1be425185b5b1f0900feaf1ccc2a6130268f9901be4a7d252f37302c8335a2c1a62736e9232691cc3a@178.128.138.128:443",
-        "boot-01.gc-us-central1-a.eth.prod": "enode://32ff6d88760b0947a3dee54ceff4d8d7f0b4c023c6dad34568615fcae89e26cc2753f28f12485a4116c977be937a72665116596265aa0736b53d46b27446296a@34.70.75.208:443",
-        "boot-02.ac-cn-hongkong-c.eth.prod": "enode://23d0740b11919358625d79d4cac7d50a34d79e9c69e16831c5c70573757a1f5d7d884510bc595d7ee4da3c1508adf87bbc9e9260d804ef03f8c1e37f2fb2fc69@47.52.106.107:443",
-        "boot-02.do-ams3.eth.prod": "enode://5395aab7833f1ecb671b59bf0521cf20224fe8162fc3d2675de4ee4d5636a75ec32d13268fc184df8d1ddfa803943906882da62a4df42d4fccf6d17808156a87@178.128.140.188:443",
-        "boot-02.gc-us-central1-a.eth.prod": "enode://5405c509df683c962e7c9470b251bb679dd6978f82d5b469f1f6c64d11d50fbd5dd9f7801c6ad51f3b20a5f6c7ffe248cc9ab223f8bcbaeaf14bb1c0ef295fd0@35.223.215.156:443"
-      },
-      "mail": {
-        "mail-01.ac-cn-hongkong-c.eth.prod": "enode://606ae04a71e5db868a722c77a21c8244ae38f1bd6e81687cc6cfe88a3063fa1c245692232f64f45bd5408fed5133eab8ed78049332b04f9c110eac7f71c1b429@47.75.247.214:443",
-        "mail-01.do-ams3.eth.prod": "enode://c42f368a23fa98ee546fd247220759062323249ef657d26d357a777443aec04db1b29a3a22ef3e7c548e18493ddaf51a31b0aed6079bd6ebe5ae838fcfaf3a49@178.128.142.54:443",
-        "mail-01.gc-us-central1-a.eth.prod": "enode://ee2b53b0ace9692167a410514bca3024695dbf0e1a68e1dff9716da620efb195f04a4b9e873fb9b74ac84de801106c465b8e2b6c4f0d93b8749d1578bfcaf03e@104.197.238.144:443",
-        "mail-02.ac-cn-hongkong-c.eth.prod": "enode://2c8de3cbb27a3d30cbb5b3e003bc722b126f5aef82e2052aaef032ca94e0c7ad219e533ba88c70585ebd802de206693255335b100307645ab5170e88620d2a81@47.244.221.14:443",
-        "mail-02.do-ams3.eth.prod": "enode://7aa648d6e855950b2e3d3bf220c496e0cae4adfddef3e1e6062e6b177aec93bc6cdcf1282cb40d1656932ebfdd565729da440368d7c4da7dbd4d004b1ac02bf8@178.128.142.26:443",
-        "mail-02.gc-us-central1-a.eth.prod": "enode://30211cbd81c25f07b03a0196d56e6ce4604bb13db773ff1c0ea2253547fafd6c06eae6ad3533e2ba39d59564cfbdbb5e2ce7c137a5ebb85e99dcfc7a75f99f55@23.236.58.92:443",
-        "mail-03.ac-cn-hongkong-c.eth.prod": "enode://e85f1d4209f2f99da801af18db8716e584a28ad0bdc47fbdcd8f26af74dbd97fc279144680553ec7cd9092afe683ddea1e0f9fc571ebcb4b1d857c03a088853d@47.244.129.82:443",
-        "mail-03.do-ams3.eth.prod": "enode://8a64b3c349a2e0ef4a32ea49609ed6eb3364be1110253c20adc17a3cebbc39a219e5d3e13b151c0eee5d8e0f9a8ba2cd026014e67b41a4ab7d1d5dd67ca27427@178.128.142.94:443",
-        "mail-03.gc-us-central1-a.eth.prod": "enode://44160e22e8b42bd32a06c1532165fa9e096eebedd7fa6d6e5f8bbef0440bc4a4591fe3651be68193a7ec029021cdb496cfe1d7f9f1dc69eb99226e6f39a7a5d4@35.225.221.245:443"
-      },
-      "rendezvous": {
-        "boot-01.ac-cn-hongkong-c.eth.prod": "/ip4/47.75.99.169/tcp/30703/ethv4/16Uiu2HAmV8Hq9e3zm9TMVP4zrVHo3BjqW5D6bDVV6VQntQd687e4",
-        "boot-01.do-ams3.eth.prod": "/ip4/178.128.138.128/tcp/30703/ethv4/16Uiu2HAmRHPzF3rQg55PgYPcQkyvPVH9n2hWsYPhUJBZ6kVjJgdV",
-        "boot-01.gc-us-central1-a.eth.prod": "/ip4/34.70.75.208/tcp/30703/ethv4/16Uiu2HAm6ZsERLx2BwVD2UM9SVPnnMU6NBycG8XPtu8qKys5awsU",
-        "boot-02.ac-cn-hongkong-c.eth.prod": "/ip4/47.52.106.107/tcp/30703/ethv4/16Uiu2HAmEHiptiDDd9gqNY8oQqo8hHUWMHJzfwt5aLRdD6W2zcXR",
-        "boot-02.do-ams3.eth.prod": "/ip4/178.128.140.188/tcp/30703/ethv4/16Uiu2HAmLqTXuY4Sb6G28HNooaFUXUKzpzKXCcgyJxgaEE2i5vnf",
-        "boot-02.gc-us-central1-a.eth.prod": "/ip4/35.223.215.156/tcp/30703/ethv4/16Uiu2HAmQEUFE2YaJohavWtHxPTEFv3sEGJtDqvtGEv78DFoEWQF"
-      },
-      "whisper": {
-        "node-01.ac-cn-hongkong-c.eth.prod": "enode://b957e51f41e4abab8382e1ea7229e88c6e18f34672694c6eae389eac22dab8655622bbd4a08192c321416b9becffaab11c8e2b7a5d0813b922aa128b82990dab@47.75.222.178:443",
-        "node-01.do-ams3.eth.prod": "enode://66ba15600cda86009689354c3a77bdf1a97f4f4fb3ab50ffe34dbc904fac561040496828397be18d9744c75881ffc6ac53729ddbd2cdbdadc5f45c400e2622f7@178.128.141.87:443",
-        "node-01.gc-us-central1-a.eth.prod": "enode://182ed5d658d1a1a4382c9e9f7c9e5d8d9fec9db4c71ae346b9e23e1a589116aeffb3342299bdd00e0ab98dbf804f7b2d8ae564ed18da9f45650b444aed79d509@34.68.132.118:443",
-        "node-02.ac-cn-hongkong-c.eth.prod": "enode://8bebe73ddf7cf09e77602c7d04c93a73f455b51f24ae0d572917a4792f1dec0bb4c562759b8830cc3615a658d38c1a4a38597a1d7ae3ba35111479fc42d65dec@47.75.85.212:443",
-        "node-02.do-ams3.eth.prod": "enode://4ea35352702027984a13274f241a56a47854a7fd4b3ba674a596cff917d3c825506431cf149f9f2312a293bb7c2b1cca55db742027090916d01529fe0729643b@134.209.136.79:443",
-        "node-02.gc-us-central1-a.eth.prod": "enode://fbeddac99d396b91d59f2c63a3cb5fc7e0f8a9f7ce6fe5f2eed5e787a0154161b7173a6a73124a4275ef338b8966dc70a611e9ae2192f0f2340395661fad81c0@34.67.230.193:443",
-        "node-03.ac-cn-hongkong-c.eth.prod": "enode://ac3948b2c0786ada7d17b80cf869cf59b1909ea3accd45944aae35bf864cc069126da8b82dfef4ddf23f1d6d6b44b1565c4cf81c8b98022253c6aea1a89d3ce2@47.75.88.12:443",
-        "node-03.do-ams3.eth.prod": "enode://ce559a37a9c344d7109bd4907802dd690008381d51f658c43056ec36ac043338bd92f1ac6043e645b64953b06f27202d679756a9c7cf62fdefa01b2e6ac5098e@134.209.136.123:443",
-        "node-03.gc-us-central1-a.eth.prod": "enode://c07aa0deea3b7056c5d45a85bca42f0d8d3b1404eeb9577610f386e0a4744a0e7b2845ae328efc4aa4b28075af838b59b5b3985bffddeec0090b3b7669abc1f3@35.226.92.155:443",
-        "node-04.ac-cn-hongkong-c.eth.prod": "enode://385579fc5b14e04d5b04af7eee835d426d3d40ccf11f99dbd95340405f37cf3bbbf830b3eb8f70924be0c2909790120682c9c3e791646e2d5413e7801545d353@47.244.221.249:443",
-        "node-04.do-ams3.eth.prod": "enode://4e0a8db9b73403c9339a2077e911851750fc955db1fc1e09f81a4a56725946884dd5e4d11258eac961f9078a393c45bcab78dd0e3bc74e37ce773b3471d2e29c@134.209.136.101:443",
-        "node-04.gc-us-central1-a.eth.prod": "enode://0624b4a90063923c5cc27d12624b6a49a86dfb3623fcb106801217fdbab95f7617b83fa2468b9ae3de593ff6c1cf556ccf9bc705bfae9cb4625999765127b423@35.222.158.246:443",
-        "node-05.ac-cn-hongkong-c.eth.prod": "enode://b77bffc29e2592f30180311dd81204ab845e5f78953b5ba0587c6631be9c0862963dea5eb64c90617cf0efd75308e22a42e30bc4eb3cd1bbddbd1da38ff6483e@47.75.10.177:443",
-        "node-05.do-ams3.eth.prod": "enode://a8bddfa24e1e92a82609b390766faa56cf7a5eef85b22a2b51e79b333c8aaeec84f7b4267e432edd1cf45b63a3ad0fc7d6c3a16f046aa6bc07ebe50e80b63b8c@178.128.141.249:443",
-        "node-05.gc-us-central1-a.eth.prod": "enode://a5fe9c82ad1ffb16ae60cb5d4ffe746b9de4c5fbf20911992b7dd651b1c08ba17dd2c0b27ee6b03162c52d92f219961cc3eb14286aca8a90b75cf425826c3bd8@104.154.230.58:443",
-        "node-06.ac-cn-hongkong-c.eth.prod": "enode://cf5f7a7e64e3b306d1bc16073fba45be3344cb6695b0b616ccc2da66ea35b9f35b3b231c6cf335fdfaba523519659a440752fc2e061d1e5bc4ef33864aac2f19@47.75.221.196:443",
-        "node-06.do-ams3.eth.prod": "enode://887cbd92d95afc2c5f1e227356314a53d3d18855880ac0509e0c0870362aee03939d4074e6ad31365915af41d34320b5094bfcc12a67c381788cd7298d06c875@178.128.141.0:443",
-        "node-06.gc-us-central1-a.eth.prod": "enode://282e009967f9f132a5c2dd366a76319f0d22d60d0c51f7e99795a1e40f213c2705a2c10e4cc6f3890319f59da1a535b8835ed9b9c4b57c3aad342bf312fd7379@35.223.240.17:443",
-        "node-07.ac-cn-hongkong-c.eth.prod": "enode://13d63a1f85ccdcbd2fb6861b9bd9d03f94bdba973608951f7c36e5df5114c91de2b8194d71288f24bfd17908c48468e89dd8f0fb8ccc2b2dedae84acdf65f62a@47.244.210.80:443",
-        "node-07.do-ams3.eth.prod": "enode://2b01955d7e11e29dce07343b456e4e96c081760022d1652b1c4b641eaf320e3747871870fa682e9e9cfb85b819ce94ed2fee1ac458904d54fd0b97d33ba2c4a4@134.209.136.112:443",
-        "node-07.gc-us-central1-a.eth.prod": "enode://b706a60572634760f18a27dd407b2b3582f7e065110dae10e3998498f1ae3f29ba04db198460d83ed6d2bfb254bb06b29aab3c91415d75d3b869cd0037f3853c@35.239.5.162:443",
-        "node-08.ac-cn-hongkong-c.eth.prod": "enode://32915c8841faaef21a6b75ab6ed7c2b6f0790eb177ad0f4ea6d731bacc19b938624d220d937ebd95e0f6596b7232bbb672905ee12601747a12ee71a15bfdf31c@47.75.59.11:443",
-        "node-08.do-ams3.eth.prod": "enode://0d9d65fcd5592df33ed4507ce862b9c748b6dbd1ea3a1deb94e3750052760b4850aa527265bbaf357021d64d5cc53c02b410458e732fafc5b53f257944247760@178.128.141.42:443",
-        "node-08.gc-us-central1-a.eth.prod": "enode://e87f1d8093d304c3a9d6f1165b85d6b374f1c0cc907d39c0879eb67f0a39d779be7a85cbd52920b6f53a94da43099c58837034afa6a7be4b099bfcd79ad13999@35.238.106.101:443"
-      }
+    "meta": {
+        "hostname": "node-01.do-ams3.sites.misc",
+        "timestamp": "2023-01-05T10:03:38.657813",
+        "warning": "DO NOT EDIT! Auto generated from Consul. Should only be used at build time."
     },
-    "eth.staging": {
-      "boot": {
-        "boot-01.ac-cn-hongkong-c.eth.staging": "enode://630b0342ca4e9552f50714b6c8e28d6955bc0fd14e7950f93bc3b2b8cc8c1f3b6d103df66f51a13d773b5db0f130661fb5c7b8fa21c48890c64c79b41a56a490@47.91.229.44:443",
-        "boot-01.do-ams3.eth.staging": "enode://f79fb3919f72ca560ad0434dcc387abfe41e0666201ebdada8ede0462454a13deb05cda15f287d2c4bd85da81f0eb25d0a486bbbc8df427b971ac51533bd00fe@174.138.107.239:443",
-        "boot-01.gc-us-central1-a.eth.staging": "enode://10a78c17929a7019ef4aa2249d7302f76ae8a06f40b2dc88b7b31ebff4a623fbb44b4a627acba296c1ced3775d91fbe18463c15097a6a36fdb2c804ff3fc5b35@35.238.97.234:443"
-      },
-      "mail": {
-        "mail-01.ac-cn-hongkong-c.eth.staging": "enode://b74859176c9751d314aeeffc26ec9f866a412752e7ddec91b19018a18e7cca8d637cfe2cedcb972f8eb64d816fbd5b4e89c7e8c7fd7df8a1329fa43db80b0bfe@47.52.90.156:443",
-        "mail-01.do-ams3.eth.staging": "enode://69f72baa7f1722d111a8c9c68c39a31430e9d567695f6108f31ccb6cd8f0adff4991e7fdca8fa770e75bc8a511a87d24690cbc80e008175f40c157d6f6788d48@206.189.240.16:443",
-        "mail-01.gc-us-central1-a.eth.staging": "enode://e4fc10c1f65c8aed83ac26bc1bfb21a45cc1a8550a58077c8d2de2a0e0cd18e40fd40f7e6f7d02dc6cd06982b014ce88d6e468725ffe2c138e958788d0002a7f@35.239.193.41:443"
-      },
-      "rendezvous": {
-        "boot-01.ac-cn-hongkong-c.eth.staging": "/ip4/47.91.229.44/tcp/30703/ethv4/16Uiu2HAmRnt2Eyoknh3auxh4fJwkRgqkH1gqrWGes8Pk1k3MV4xu",
-        "boot-01.do-ams3.eth.staging": "/ip4/174.138.107.239/tcp/30703/ethv4/16Uiu2HAm8UZXUHEPZrpJbcQ3yVFH6UtKrwsG6jH4ai72PsbLfVFb",
-        "boot-01.gc-us-central1-a.eth.staging": "/ip4/35.238.97.234/tcp/30703/ethv4/16Uiu2HAm6G9sDMkrB4Xa5EH3Zx2dysCxFgBTSRzghic3Z9tRFRNE"
-      },
-      "whisper": {
-        "node-01.ac-cn-hongkong-c.eth.staging": "enode://088cf5a93c576fae52f6f075178467b8ff98bacf72f59e88efb16dfba5b30f80a4db78f8e3cb3d87f2f6521746ef4a8768465ef2896c6af24fd77a425e95b6dd@47.52.226.137:443",
-        "node-01.do-ams3.eth.staging": "enode://914c0b30f27bab30c1dfd31dad7652a46fda9370542aee1b062498b1345ee0913614b8b9e3e84622e84a7203c5858ae1d9819f63aece13ee668e4f6668063989@167.99.19.148:443",
-        "node-01.gc-us-central1-a.eth.staging": "enode://d3878441652f010326889f28360e69f2d09d06540f934fada0e17b374ce5319de64279aba3c44a5bf807d9967c6d705b3b4c6b03fa70763240e2ee6af01a539e@35.192.0.86:443"
-      }
-    },
-    "eth.test": {
-      "boot": {
-        "boot-01.ac-cn-hongkong-c.eth.test": "enode://daae2e72820e86e942fa2a8aa7d6e9954d4043a753483d8bd338e16be82cf962392d5c0e1ae57c3d793c3d3dddd8fd58339262e4234dc966f953cd73b535f5fa@47.52.188.149:443",
-        "boot-01.do-ams3.eth.test": "enode://9e0988575eb7717c25dea72fd11c7b37767dc09c1a7686f7c2ec577d308d24b377ceb675de4317474a1a870e47882732967f4fa785b02ba95d669b31d464dec0@206.189.243.164:443",
-        "boot-01.gc-us-central1-a.eth.test": "enode://c1e5018887c863d64e431b69bf617561087825430e4401733f5ba77c70db14236df381fefb0ebe1ac42294b9e261bbe233dbdb83e32c586c66ae26c8de70cb4c@35.188.168.137:443"
-      },
-      "mail": {
-        "mail-01.ac-cn-hongkong-c.eth.test": "enode://619dbb5dda12e85bf0eb5db40fb3de625609043242737c0e975f7dfd659d85dc6d9a84f9461a728c5ab68c072fed38ca6a53917ca24b8e93cc27bdef3a1e79ac@47.52.188.196:443",
-        "mail-01.do-ams3.eth.test": "enode://e4865fe6c2a9c1a563a6447990d8e9ce672644ae3e08277ce38ec1f1b690eef6320c07a5d60c3b629f5d4494f93d6b86a745a0bf64ab295bbf6579017adc6ed8@206.189.243.161:443",
-        "mail-01.gc-us-central1-a.eth.test": "enode://707e57453acd3e488c44b9d0e17975371e2f8fb67525eae5baca9b9c8e06c86cde7c794a6c2e36203bf9f56cae8b0e50f3b33c4c2b694a7baeea1754464ce4e3@35.192.229.172:443"
-      },
-      "rendezvous": {
-        "boot-01.ac-cn-hongkong-c.eth.test": "/ip4/47.52.188.149/tcp/30703/ethv4/16Uiu2HAm9Vatqr4GfVCqnyeaPtCF3q8fz8kDDUgqXVfFG7ZfSA7w",
-        "boot-01.do-ams3.eth.test": "/ip4/206.189.243.164/tcp/30703/ethv4/16Uiu2HAmBCh5bgYr6V3fDuLqUzvtSAsFTQJCQ3TVHT8ta8bTu2Jm",
-        "boot-01.gc-us-central1-a.eth.test": "/ip4/35.188.168.137/tcp/30703/ethv4/16Uiu2HAm3MUqtGjmetyZ9L4SN2R8oHDWvACUcec25LjtDD5euiRH"
-      },
-      "whisper": {
-        "node-01.ac-cn-hongkong-c.eth.test": "enode://ad38f94030a846cc7005b7a1f3b6b01bf4ef59d34e8d3d6f4d12df23d14ba8656702a435d34cf4df3b412c0c1923df5adcce8461321a0d8ffb9435b26e572c2a@47.52.255.194:443",
-        "node-01.do-ams3.eth.test": "enode://1d193635e015918fb85bbaf774863d12f65d70c6977506187ef04420d74ec06c9e8f0dcb57ea042f85df87433dab17a1260ed8dde1bdf9d6d5d2de4b7bf8e993@206.189.243.163:443",
-        "node-01.gc-us-central1-a.eth.test": "enode://f593a27731bc0f8eb088e2d39222c2d59dfb9bf0b3950d7a828d51e8ab9e08fffbd9916a82fd993c1a080c57c2bd70ed6c36f489a969de697aff93088dbee1a9@35.194.31.108:443"
-      }
-    },
-    "status.prod": {
-      "waku": {
-        "node-01.ac-cn-hongkong-c.status.prod": "/dns4/node-01.ac-cn-hongkong-c.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAkvEZgh3KLwhLwXg95e5ojM8XykJ4Kxi2T7hk22rnA7pJC",
-        "node-01.do-ams3.status.prod": "/dns4/node-01.do-ams3.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAm6HZZr7aToTvEBPpiys4UxajCTU97zj5v7RNR2gbniy1D",
-        "node-01.gc-us-central1-a.status.prod": "/dns4/node-01.gc-us-central1-a.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAkwBp8T6G77kQXSNMnxgaMky1JeyML5yqoTHRM8dbeCBNb",
-        "node-02.ac-cn-hongkong-c.status.prod": "/dns4/node-02.ac-cn-hongkong-c.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmFy8BrJhCEmCYrUfBdSNkrPw6VHExtv4rRp1DSBnCPgx8",
-        "node-02.do-ams3.status.prod": "/dns4/node-02.do-ams3.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmSve7tR5YZugpskMv2dmJAsMUKmfWYEKRXNUxRaTCnsXV",
-        "node-02.gc-us-central1-a.status.prod": "/dns4/node-02.gc-us-central1-a.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmDQugwDHM3YeUp86iGjrUvbdw3JPRgikC7YoGBsT2ymMg"
-      },
-      "waku-websocket": {
-        "node-01.ac-cn-hongkong-c.status.prod": "/dns4/node-01.ac-cn-hongkong-c.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvEZgh3KLwhLwXg95e5ojM8XykJ4Kxi2T7hk22rnA7pJC",
-        "node-01.do-ams3.status.prod": "/dns4/node-01.do-ams3.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAm6HZZr7aToTvEBPpiys4UxajCTU97zj5v7RNR2gbniy1D",
-        "node-01.gc-us-central1-a.status.prod": "/dns4/node-01.gc-us-central1-a.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAkwBp8T6G77kQXSNMnxgaMky1JeyML5yqoTHRM8dbeCBNb",
-        "node-02.ac-cn-hongkong-c.status.prod": "/dns4/node-02.ac-cn-hongkong-c.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmFy8BrJhCEmCYrUfBdSNkrPw6VHExtv4rRp1DSBnCPgx8",
-        "node-02.do-ams3.status.prod": "/dns4/node-02.do-ams3.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmSve7tR5YZugpskMv2dmJAsMUKmfWYEKRXNUxRaTCnsXV",
-        "node-02.gc-us-central1-a.status.prod": "/dns4/node-02.gc-us-central1-a.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmDQugwDHM3YeUp86iGjrUvbdw3JPRgikC7YoGBsT2ymMg"
-      },
-      "waku-nodes": ["enrtree://AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM@prod.nodes.status.im"]
-    },
-    "status.test": {
-      "waku": {
-        "node-01.ac-cn-hongkong-c.status.test": "/dns4/node-01.ac-cn-hongkong-c.status.test.statusim.net/tcp/30303/p2p/16Uiu2HAm2BjXxCp1sYFJQKpLLbPbwd5juxbsYofu3TsS3auvT9Yi",
-        "node-01.do-ams3.status.test": "/dns4/node-01.do-ams3.status.test.statusim.net/tcp/30303/p2p/16Uiu2HAkukebeXjTQ9QDBeNDWuGfbaSg79wkkhK4vPocLgR6QFDf",
-        "node-01.gc-us-central1-a.status.test": "/dns4/node-01.gc-us-central1-a.status.test.statusim.net/tcp/30303/p2p/16Uiu2HAmGDX3iAFox93PupVYaHa88kULGqMpJ7AEHGwj3jbMtt76"
-      },
-      "waku-websocket": {
-        "node-01.ac-cn-hongkong-c.status.test": "/dns4/node-01.ac-cn-hongkong-c.status.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAm2BjXxCp1sYFJQKpLLbPbwd5juxbsYofu3TsS3auvT9Yi",
-        "node-01.do-ams3.status.test": "/dns4/node-01.do-ams3.status.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkukebeXjTQ9QDBeNDWuGfbaSg79wkkhK4vPocLgR6QFDf",
-        "node-01.gc-us-central1-a.status.test": "/dns4/node-01.gc-us-central1-a.status.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmGDX3iAFox93PupVYaHa88kULGqMpJ7AEHGwj3jbMtt76"
-      },
-      "waku-nodes": ["enrtree://AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM@test.nodes.status.im"]
-    },
-    "wakuv2.prod": {
-      "waku": {
-        "node-01.ac-cn-hongkong-c.wakuv2.prod": "/ip4/8.210.222.231/tcp/30303/p2p/16Uiu2HAm4v86W3bmT1BiH6oSPzcsSr24iDQpSN5Qa992BCjjwgrD",
-        "node-01.do-ams3.wakuv2.prod": "/ip4/188.166.135.145/tcp/30303/p2p/16Uiu2HAmL5okWopX7NqZWBUKVqW8iUxCEmd5GMHLVPwCgzYzQv3e",
-        "node-01.gc-us-central1-a.wakuv2.prod": "/ip4/34.121.100.108/tcp/30303/p2p/16Uiu2HAmVkKntsECaYfefR1V2yCR79CegLATuTPE6B9TxgxBiiiA"
-      },
-      "waku-websocket": {
-        "node-01.ac-cn-hongkong-c.wakuv2.prod": "/dns4/node-01.ac-cn-hongkong-c.wakuv2.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAm4v86W3bmT1BiH6oSPzcsSr24iDQpSN5Qa992BCjjwgrD",
-        "node-01.do-ams3.wakuv2.prod": "/dns4/node-01.do-ams3.wakuv2.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmL5okWopX7NqZWBUKVqW8iUxCEmd5GMHLVPwCgzYzQv3e",
-        "node-01.gc-us-central1-a.wakuv2.prod": "/dns4/node-01.gc-us-central1-a.wakuv2.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmVkKntsECaYfefR1V2yCR79CegLATuTPE6B9TxgxBiiiA"
-      },
-      "waku-nodes": ["enrtree://AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM@prod.waku.nodes.status.im"]
-    },
-    "wakuv2.test": {
-      "waku": {
-        "node-01.ac-cn-hongkong-c.wakuv2.test": "/ip4/47.242.210.73/tcp/30303/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
-        "node-01.do-ams3.wakuv2.test": "/ip4/134.209.139.210/tcp/30303/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
-        "node-01.gc-us-central1-a.wakuv2.test": "/ip4/104.154.239.128/tcp/30303/p2p/16Uiu2HAmJb2e28qLXxT5kZxVUUoJt72EMzNGXB47Rxx5hw3q4YjS"
-      },
-      "waku-websocket": {
-        "node-01.ac-cn-hongkong-c.wakuv2.test": "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
-        "node-01.do-ams3.wakuv2.test": "/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
-        "node-01.gc-us-central1-a.wakuv2.test": "/dns4/node-01.gc-us-central1-a.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmJb2e28qLXxT5kZxVUUoJt72EMzNGXB47Rxx5hw3q4YjS"
-      },
-      "waku-nodes": ["enrtree://AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM@test.waku.nodes.status.im"]
+    "fleets": {
+        "eth.prod": {
+            "boot": {
+                "boot-01.do-ams3.eth.prod": "enode://436cc6f674928fdc9a9f7990f2944002b685d1c37f025c1be425185b5b1f0900feaf1ccc2a6130268f9901be4a7d252f37302c8335a2c1a62736e9232691cc3a@178.128.138.128:443",
+                "boot-02.do-ams3.eth.prod": "enode://5395aab7833f1ecb671b59bf0521cf20224fe8162fc3d2675de4ee4d5636a75ec32d13268fc184df8d1ddfa803943906882da62a4df42d4fccf6d17808156a87@178.128.140.188:443",
+                "boot-01.gc-us-central1-a.eth.prod": "enode://32ff6d88760b0947a3dee54ceff4d8d7f0b4c023c6dad34568615fcae89e26cc2753f28f12485a4116c977be937a72665116596265aa0736b53d46b27446296a@34.70.75.208:443",
+                "boot-02.gc-us-central1-a.eth.prod": "enode://5405c509df683c962e7c9470b251bb679dd6978f82d5b469f1f6c64d11d50fbd5dd9f7801c6ad51f3b20a5f6c7ffe248cc9ab223f8bcbaeaf14bb1c0ef295fd0@35.223.215.156:443",
+                "boot-01.ac-cn-hongkong-c.eth.prod": "enode://6e6554fb3034b211398fcd0f0082cbb6bd13619e1a7e76ba66e1809aaa0c5f1ac53c9ae79cf2fd4a7bacb10d12010899b370c75fed19b991d9c0cdd02891abad@47.75.99.169:443",
+                "boot-02.ac-cn-hongkong-c.eth.prod": "enode://23d0740b11919358625d79d4cac7d50a34d79e9c69e16831c5c70573757a1f5d7d884510bc595d7ee4da3c1508adf87bbc9e9260d804ef03f8c1e37f2fb2fc69@47.52.106.107:443"
+            },
+            "mail": {
+                "mail-01.do-ams3.eth.prod": "enode://c42f368a23fa98ee546fd247220759062323249ef657d26d357a777443aec04db1b29a3a22ef3e7c548e18493ddaf51a31b0aed6079bd6ebe5ae838fcfaf3a49@178.128.142.54:443",
+                "mail-02.do-ams3.eth.prod": "enode://7aa648d6e855950b2e3d3bf220c496e0cae4adfddef3e1e6062e6b177aec93bc6cdcf1282cb40d1656932ebfdd565729da440368d7c4da7dbd4d004b1ac02bf8@178.128.142.26:443",
+                "mail-03.do-ams3.eth.prod": "enode://8a64b3c349a2e0ef4a32ea49609ed6eb3364be1110253c20adc17a3cebbc39a219e5d3e13b151c0eee5d8e0f9a8ba2cd026014e67b41a4ab7d1d5dd67ca27427@178.128.142.94:443",
+                "mail-01.gc-us-central1-a.eth.prod": "enode://ee2b53b0ace9692167a410514bca3024695dbf0e1a68e1dff9716da620efb195f04a4b9e873fb9b74ac84de801106c465b8e2b6c4f0d93b8749d1578bfcaf03e@104.197.238.144:443",
+                "mail-02.gc-us-central1-a.eth.prod": "enode://30211cbd81c25f07b03a0196d56e6ce4604bb13db773ff1c0ea2253547fafd6c06eae6ad3533e2ba39d59564cfbdbb5e2ce7c137a5ebb85e99dcfc7a75f99f55@23.236.58.92:443",
+                "mail-03.gc-us-central1-a.eth.prod": "enode://44160e22e8b42bd32a06c1532165fa9e096eebedd7fa6d6e5f8bbef0440bc4a4591fe3651be68193a7ec029021cdb496cfe1d7f9f1dc69eb99226e6f39a7a5d4@35.225.221.245:443",
+                "mail-01.ac-cn-hongkong-c.eth.prod": "enode://606ae04a71e5db868a722c77a21c8244ae38f1bd6e81687cc6cfe88a3063fa1c245692232f64f45bd5408fed5133eab8ed78049332b04f9c110eac7f71c1b429@47.75.247.214:443",
+                "mail-02.ac-cn-hongkong-c.eth.prod": "enode://2c8de3cbb27a3d30cbb5b3e003bc722b126f5aef82e2052aaef032ca94e0c7ad219e533ba88c70585ebd802de206693255335b100307645ab5170e88620d2a81@47.244.221.14:443",
+                "mail-03.ac-cn-hongkong-c.eth.prod": "enode://e85f1d4209f2f99da801af18db8716e584a28ad0bdc47fbdcd8f26af74dbd97fc279144680553ec7cd9092afe683ddea1e0f9fc571ebcb4b1d857c03a088853d@47.244.129.82:443"
+            },
+            "whisper": {
+                "node-01.do-ams3.eth.prod": "enode://66ba15600cda86009689354c3a77bdf1a97f4f4fb3ab50ffe34dbc904fac561040496828397be18d9744c75881ffc6ac53729ddbd2cdbdadc5f45c400e2622f7@178.128.141.87:443",
+                "node-02.do-ams3.eth.prod": "enode://4ea35352702027984a13274f241a56a47854a7fd4b3ba674a596cff917d3c825506431cf149f9f2312a293bb7c2b1cca55db742027090916d01529fe0729643b@134.209.136.79:443",
+                "node-03.do-ams3.eth.prod": "enode://ce559a37a9c344d7109bd4907802dd690008381d51f658c43056ec36ac043338bd92f1ac6043e645b64953b06f27202d679756a9c7cf62fdefa01b2e6ac5098e@134.209.136.123:443",
+                "node-04.do-ams3.eth.prod": "enode://4e0a8db9b73403c9339a2077e911851750fc955db1fc1e09f81a4a56725946884dd5e4d11258eac961f9078a393c45bcab78dd0e3bc74e37ce773b3471d2e29c@134.209.136.101:443",
+                "node-05.do-ams3.eth.prod": "enode://a8bddfa24e1e92a82609b390766faa56cf7a5eef85b22a2b51e79b333c8aaeec84f7b4267e432edd1cf45b63a3ad0fc7d6c3a16f046aa6bc07ebe50e80b63b8c@178.128.141.249:443",
+                "node-06.do-ams3.eth.prod": "enode://887cbd92d95afc2c5f1e227356314a53d3d18855880ac0509e0c0870362aee03939d4074e6ad31365915af41d34320b5094bfcc12a67c381788cd7298d06c875@178.128.141.0:443",
+                "node-07.do-ams3.eth.prod": "enode://2b01955d7e11e29dce07343b456e4e96c081760022d1652b1c4b641eaf320e3747871870fa682e9e9cfb85b819ce94ed2fee1ac458904d54fd0b97d33ba2c4a4@134.209.136.112:443",
+                "node-08.do-ams3.eth.prod": "enode://0d9d65fcd5592df33ed4507ce862b9c748b6dbd1ea3a1deb94e3750052760b4850aa527265bbaf357021d64d5cc53c02b410458e732fafc5b53f257944247760@178.128.141.42:443",
+                "node-01.gc-us-central1-a.eth.prod": "enode://182ed5d658d1a1a4382c9e9f7c9e5d8d9fec9db4c71ae346b9e23e1a589116aeffb3342299bdd00e0ab98dbf804f7b2d8ae564ed18da9f45650b444aed79d509@34.68.132.118:443",
+                "node-02.gc-us-central1-a.eth.prod": "enode://fbeddac99d396b91d59f2c63a3cb5fc7e0f8a9f7ce6fe5f2eed5e787a0154161b7173a6a73124a4275ef338b8966dc70a611e9ae2192f0f2340395661fad81c0@34.67.230.193:443",
+                "node-03.gc-us-central1-a.eth.prod": "enode://c07aa0deea3b7056c5d45a85bca42f0d8d3b1404eeb9577610f386e0a4744a0e7b2845ae328efc4aa4b28075af838b59b5b3985bffddeec0090b3b7669abc1f3@35.226.92.155:443",
+                "node-04.gc-us-central1-a.eth.prod": "enode://0624b4a90063923c5cc27d12624b6a49a86dfb3623fcb106801217fdbab95f7617b83fa2468b9ae3de593ff6c1cf556ccf9bc705bfae9cb4625999765127b423@35.222.158.246:443",
+                "node-05.gc-us-central1-a.eth.prod": "enode://a5fe9c82ad1ffb16ae60cb5d4ffe746b9de4c5fbf20911992b7dd651b1c08ba17dd2c0b27ee6b03162c52d92f219961cc3eb14286aca8a90b75cf425826c3bd8@104.154.230.58:443",
+                "node-06.gc-us-central1-a.eth.prod": "enode://282e009967f9f132a5c2dd366a76319f0d22d60d0c51f7e99795a1e40f213c2705a2c10e4cc6f3890319f59da1a535b8835ed9b9c4b57c3aad342bf312fd7379@35.223.240.17:443",
+                "node-07.gc-us-central1-a.eth.prod": "enode://b706a60572634760f18a27dd407b2b3582f7e065110dae10e3998498f1ae3f29ba04db198460d83ed6d2bfb254bb06b29aab3c91415d75d3b869cd0037f3853c@35.239.5.162:443",
+                "node-08.gc-us-central1-a.eth.prod": "enode://e87f1d8093d304c3a9d6f1165b85d6b374f1c0cc907d39c0879eb67f0a39d779be7a85cbd52920b6f53a94da43099c58837034afa6a7be4b099bfcd79ad13999@35.238.106.101:443",
+                "node-01.ac-cn-hongkong-c.eth.prod": "enode://b957e51f41e4abab8382e1ea7229e88c6e18f34672694c6eae389eac22dab8655622bbd4a08192c321416b9becffaab11c8e2b7a5d0813b922aa128b82990dab@47.75.222.178:443",
+                "node-02.ac-cn-hongkong-c.eth.prod": "enode://8bebe73ddf7cf09e77602c7d04c93a73f455b51f24ae0d572917a4792f1dec0bb4c562759b8830cc3615a658d38c1a4a38597a1d7ae3ba35111479fc42d65dec@47.75.85.212:443",
+                "node-03.ac-cn-hongkong-c.eth.prod": "enode://ac3948b2c0786ada7d17b80cf869cf59b1909ea3accd45944aae35bf864cc069126da8b82dfef4ddf23f1d6d6b44b1565c4cf81c8b98022253c6aea1a89d3ce2@47.75.88.12:443",
+                "node-04.ac-cn-hongkong-c.eth.prod": "enode://385579fc5b14e04d5b04af7eee835d426d3d40ccf11f99dbd95340405f37cf3bbbf830b3eb8f70924be0c2909790120682c9c3e791646e2d5413e7801545d353@47.244.221.249:443",
+                "node-05.ac-cn-hongkong-c.eth.prod": "enode://b77bffc29e2592f30180311dd81204ab845e5f78953b5ba0587c6631be9c0862963dea5eb64c90617cf0efd75308e22a42e30bc4eb3cd1bbddbd1da38ff6483e@47.75.10.177:443",
+                "node-06.ac-cn-hongkong-c.eth.prod": "enode://cf5f7a7e64e3b306d1bc16073fba45be3344cb6695b0b616ccc2da66ea35b9f35b3b231c6cf335fdfaba523519659a440752fc2e061d1e5bc4ef33864aac2f19@47.75.221.196:443",
+                "node-07.ac-cn-hongkong-c.eth.prod": "enode://13d63a1f85ccdcbd2fb6861b9bd9d03f94bdba973608951f7c36e5df5114c91de2b8194d71288f24bfd17908c48468e89dd8f0fb8ccc2b2dedae84acdf65f62a@47.244.210.80:443",
+                "node-08.ac-cn-hongkong-c.eth.prod": "enode://32915c8841faaef21a6b75ab6ed7c2b6f0790eb177ad0f4ea6d731bacc19b938624d220d937ebd95e0f6596b7232bbb672905ee12601747a12ee71a15bfdf31c@47.75.59.11:443"
+            },
+            "rendezvous": {
+                "boot-01.do-ams3.eth.prod": "/ip4/178.128.138.128/tcp/30703/ethv4/16Uiu2HAmRHPzF3rQg55PgYPcQkyvPVH9n2hWsYPhUJBZ6kVjJgdV",
+                "boot-02.do-ams3.eth.prod": "/ip4/178.128.140.188/tcp/30703/ethv4/16Uiu2HAmLqTXuY4Sb6G28HNooaFUXUKzpzKXCcgyJxgaEE2i5vnf",
+                "boot-01.gc-us-central1-a.eth.prod": "/ip4/34.70.75.208/tcp/30703/ethv4/16Uiu2HAm6ZsERLx2BwVD2UM9SVPnnMU6NBycG8XPtu8qKys5awsU",
+                "boot-02.gc-us-central1-a.eth.prod": "/ip4/35.223.215.156/tcp/30703/ethv4/16Uiu2HAmQEUFE2YaJohavWtHxPTEFv3sEGJtDqvtGEv78DFoEWQF",
+                "boot-01.ac-cn-hongkong-c.eth.prod": "/ip4/47.75.99.169/tcp/30703/ethv4/16Uiu2HAmV8Hq9e3zm9TMVP4zrVHo3BjqW5D6bDVV6VQntQd687e4",
+                "boot-02.ac-cn-hongkong-c.eth.prod": "/ip4/47.52.106.107/tcp/30703/ethv4/16Uiu2HAmEHiptiDDd9gqNY8oQqo8hHUWMHJzfwt5aLRdD6W2zcXR"
+            }
+        },
+        "eth.staging": {
+            "boot": {
+                "boot-01.do-ams3.eth.staging": "enode://f79fb3919f72ca560ad0434dcc387abfe41e0666201ebdada8ede0462454a13deb05cda15f287d2c4bd85da81f0eb25d0a486bbbc8df427b971ac51533bd00fe@174.138.107.239:443",
+                "boot-01.gc-us-central1-a.eth.staging": "enode://10a78c17929a7019ef4aa2249d7302f76ae8a06f40b2dc88b7b31ebff4a623fbb44b4a627acba296c1ced3775d91fbe18463c15097a6a36fdb2c804ff3fc5b35@35.238.97.234:443",
+                "boot-01.ac-cn-hongkong-c.eth.staging": "enode://630b0342ca4e9552f50714b6c8e28d6955bc0fd14e7950f93bc3b2b8cc8c1f3b6d103df66f51a13d773b5db0f130661fb5c7b8fa21c48890c64c79b41a56a490@47.91.229.44:443"
+            },
+            "mail": {
+                "mail-01.do-ams3.eth.staging": "enode://69f72baa7f1722d111a8c9c68c39a31430e9d567695f6108f31ccb6cd8f0adff4991e7fdca8fa770e75bc8a511a87d24690cbc80e008175f40c157d6f6788d48@206.189.240.16:443",
+                "mail-01.gc-us-central1-a.eth.staging": "enode://e4fc10c1f65c8aed83ac26bc1bfb21a45cc1a8550a58077c8d2de2a0e0cd18e40fd40f7e6f7d02dc6cd06982b014ce88d6e468725ffe2c138e958788d0002a7f@35.239.193.41:443",
+                "mail-01.ac-cn-hongkong-c.eth.staging": "enode://b74859176c9751d314aeeffc26ec9f866a412752e7ddec91b19018a18e7cca8d637cfe2cedcb972f8eb64d816fbd5b4e89c7e8c7fd7df8a1329fa43db80b0bfe@47.52.90.156:443"
+            },
+            "whisper": {
+                "node-01.do-ams3.eth.staging": "enode://914c0b30f27bab30c1dfd31dad7652a46fda9370542aee1b062498b1345ee0913614b8b9e3e84622e84a7203c5858ae1d9819f63aece13ee668e4f6668063989@167.99.19.148:443",
+                "node-01.gc-us-central1-a.eth.staging": "enode://2d897c6e846949f9dcf10279f00e9b8325c18fe7fa52d658520ad7be9607c83008b42b06aefd97cfe1fdab571f33a2a9383ff97c5909ed51f63300834913237e@35.192.0.86:443",
+                "node-01.ac-cn-hongkong-c.eth.staging": "enode://00395686f5954662a3796e170b9e87bbaf68a050d57e9987b78a2292502dae44aae2b8803280a017ec9af9be0b3121db9d6b3693ab3a0451a866bcbedd58fdac@47.52.226.137:443"
+            },
+            "rendezvous": {
+                "boot-01.do-ams3.eth.staging": "/ip4/174.138.107.239/tcp/30703/ethv4/16Uiu2HAm8UZXUHEPZrpJbcQ3yVFH6UtKrwsG6jH4ai72PsbLfVFb",
+                "boot-01.gc-us-central1-a.eth.staging": "/ip4/35.238.97.234/tcp/30703/ethv4/16Uiu2HAm6G9sDMkrB4Xa5EH3Zx2dysCxFgBTSRzghic3Z9tRFRNE",
+                "boot-01.ac-cn-hongkong-c.eth.staging": "/ip4/47.91.229.44/tcp/30703/ethv4/16Uiu2HAmRnt2Eyoknh3auxh4fJwkRgqkH1gqrWGes8Pk1k3MV4xu"
+            }
+        },
+        "wakuv2.prod": {
+            "tcp/p2p/waku": {
+                "node-01.do-ams3.wakuv2.prod": "/dns4/node-01.do-ams3.wakuv2.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmL5okWopX7NqZWBUKVqW8iUxCEmd5GMHLVPwCgzYzQv3e",
+                "node-01.gc-us-central1-a.wakuv2.prod": "/dns4/node-01.gc-us-central1-a.wakuv2.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmVkKntsECaYfefR1V2yCR79CegLATuTPE6B9TxgxBiiiA",
+                "node-01.ac-cn-hongkong-c.wakuv2.prod": "/dns4/node-01.ac-cn-hongkong-c.wakuv2.prod.statusim.net/tcp/30303/p2p/16Uiu2HAm4v86W3bmT1BiH6oSPzcsSr24iDQpSN5Qa992BCjjwgrD"
+            },
+            "enr/p2p/waku": {
+                "node-01.do-ams3.wakuv2.prod": "enr:-M-4QLdAB-KyzT3QEsDoNa4LXT6RGH9BIylvTlDFLQhigWmxKEesulgc8AoKmVEUKj_4St6ThBKwyBc69tBfCe2hVTABgmlkgnY0gmlwhLymh5GKbXVsdGlhZGRyc7EALzYobm9kZS0wMS5kby1hbXMzLndha3V2Mi5wcm9kLnN0YXR1c2ltLm5ldAYfQN4DiXNlY3AyNTZrMaEDbl1X_zJIw3EAJGtmHMVn4Z2xhpSoUaP5ElsHKCv7hlWDdGNwgnZfg3VkcIIjKIV3YWt1Mg8",
+                "node-01.gc-us-central1-a.wakuv2.prod": "enr:-Nm4QNgc2L6L-4nk6jgllNDE1QDcn6kv2922rTRYs1wM3My_OmSsTimkMCIMh8fat6enFdYfuJ23KjWdF5whBz3zXgUBgmlkgnY0gmlwhCJ5ZGyKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuZ2MtdXMtY2VudHJhbDEtYS53YWt1djIucHJvZC5zdGF0dXNpbS5uZXQGH0DeA4lzZWNwMjU2azGhA_30kHgQqfXZRioa4J_u5asgXTJ5iw_8w3lEICH4TFu_g3RjcIJ2X4N1ZHCCIyiFd2FrdTIP",
+                "node-01.ac-cn-hongkong-c.wakuv2.prod": "enr:-Nm4QOdTOKZJKTUUZ4O_W932CXIET-M9NamewDnL78P5u9DOGnZlK0JFZ4k0inkfe6iY-0JAaJVovZXc575VV3njeiABgmlkgnY0gmlwhAjS3ueKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuYWMtY24taG9uZ2tvbmctYy53YWt1djIucHJvZC5zdGF0dXNpbS5uZXQGH0DeA4lzZWNwMjU2azGhAo0C-VvfgHiXrxZi3umDiooXMGY9FvYj5_d1Q4EeS7eyg3RjcIJ2X4N1ZHCCIyiFd2FrdTIP"
+            },
+            "wss/p2p/waku": {
+                "node-01.do-ams3.wakuv2.prod": "/dns4/node-01.do-ams3.wakuv2.prod.statusim.net/tcp/8000/wss/p2p/16Uiu2HAmL5okWopX7NqZWBUKVqW8iUxCEmd5GMHLVPwCgzYzQv3e",
+                "node-01.gc-us-central1-a.wakuv2.prod": "/dns4/node-01.gc-us-central1-a.wakuv2.prod.statusim.net/tcp/8000/wss/p2p/16Uiu2HAmVkKntsECaYfefR1V2yCR79CegLATuTPE6B9TxgxBiiiA",
+                "node-01.ac-cn-hongkong-c.wakuv2.prod": "/dns4/node-01.ac-cn-hongkong-c.wakuv2.prod.statusim.net/tcp/8000/wss/p2p/16Uiu2HAm4v86W3bmT1BiH6oSPzcsSr24iDQpSN5Qa992BCjjwgrD"
+            }
+        },
+        "wakuv2.test": {
+            "tcp/p2p/waku": {
+                "node-01.do-ams3.wakuv2.test": "/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/30303/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
+                "node-01.gc-us-central1-a.wakuv2.test": "/dns4/node-01.gc-us-central1-a.wakuv2.test.statusim.net/tcp/30303/p2p/16Uiu2HAmJb2e28qLXxT5kZxVUUoJt72EMzNGXB47Rxx5hw3q4YjS",
+                "node-01.ac-cn-hongkong-c.wakuv2.test": "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/30303/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
+            },
+            "enr/p2p/waku": {
+                "node-01.do-ams3.wakuv2.test": "enr:-M-4QCtJKX2WDloRYDT4yjeMGKUCRRcMlsNiZP3cnPO0HZn6IdJ035RPCqsQ5NvTyjqHzKnTM6pc2LoKliV4CeV0WrgBgmlkgnY0gmlwhIbRi9KKbXVsdGlhZGRyc7EALzYobm9kZS0wMS5kby1hbXMzLndha3V2Mi50ZXN0LnN0YXR1c2ltLm5ldAYfQN4DiXNlY3AyNTZrMaEDnr03Tuo77930a7sYLikftxnuG3BbC3gCFhA4632ooDaDdGNwgnZfg3VkcIIjKIV3YWt1Mg8",
+                "node-01.gc-us-central1-a.wakuv2.test": "enr:-Nm4QLHYoJ5WYQoVzyqPR-pwIeQvi3ONWs-EPwk3uUiBiDseN9Dd7fYbCvkMdeXcuZ-8U9IYdGm38VxSDf_Oq3zZ0cEBgmlkgnY0gmlwhGia74CKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuZ2MtdXMtY2VudHJhbDEtYS53YWt1djIudGVzdC5zdGF0dXNpbS5uZXQGH0DeA4lzZWNwMjU2azGhA1giYsmWV9r2yJZYAiMGHJfjLlLeqAuTAokUGPN__pkxg3RjcIJ2X4N1ZHCCIyiFd2FrdTIP",
+                "node-01.ac-cn-hongkong-c.wakuv2.test": "enr:-Nm4QC0_ClHzbsutYzgT3jJm7ZY1D4shylAdd6Ac-L4uwAUha1oHM0zwoEkTORVt94W5Cpa0IiyrTcXAYLgpRXpVNUsBgmlkgnY0gmlwhC_y0kmKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuYWMtY24taG9uZ2tvbmctYy53YWt1djIudGVzdC5zdGF0dXNpbS5uZXQGH0DeA4lzZWNwMjU2azGhAhAm-P4q6mWONKcGnbLPU8WXZJ4Qs3AxIbrycvc7PVKsg3RjcIJ2X4N1ZHCCIyiFd2FrdTIP"
+            },
+            "wss/p2p/waku": {
+                "node-01.do-ams3.wakuv2.test": "/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/8000/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
+                "node-01.gc-us-central1-a.wakuv2.test": "/dns4/node-01.gc-us-central1-a.wakuv2.test.statusim.net/tcp/8000/wss/p2p/16Uiu2HAmJb2e28qLXxT5kZxVUUoJt72EMzNGXB47Rxx5hw3q4YjS",
+                "node-01.ac-cn-hongkong-c.wakuv2.test": "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/8000/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
+            }
+        },
+        "status.prod": {
+            "tcp/p2p/waku": {
+                "node-01.do-ams3.status.prod": "/dns4/node-01.do-ams3.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAm6HZZr7aToTvEBPpiys4UxajCTU97zj5v7RNR2gbniy1D",
+                "node-02.do-ams3.status.prod": "/dns4/node-02.do-ams3.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmSve7tR5YZugpskMv2dmJAsMUKmfWYEKRXNUxRaTCnsXV",
+                "node-01.gc-us-central1-a.status.prod": "/dns4/node-01.gc-us-central1-a.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAkwBp8T6G77kQXSNMnxgaMky1JeyML5yqoTHRM8dbeCBNb",
+                "node-02.gc-us-central1-a.status.prod": "/dns4/node-02.gc-us-central1-a.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmDQugwDHM3YeUp86iGjrUvbdw3JPRgikC7YoGBsT2ymMg",
+                "node-01.ac-cn-hongkong-c.status.prod": "/dns4/node-01.ac-cn-hongkong-c.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAkvEZgh3KLwhLwXg95e5ojM8XykJ4Kxi2T7hk22rnA7pJC",
+                "node-02.ac-cn-hongkong-c.status.prod": "/dns4/node-02.ac-cn-hongkong-c.status.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmFy8BrJhCEmCYrUfBdSNkrPw6VHExtv4rRp1DSBnCPgx8"
+            },
+            "enr/p2p/waku": {
+                "node-01.do-ams3.status.prod": "enr:-M-4QLOTEs_ZFxCb09FgIezZd5KeTru5CWWyEtMWMN-yUABrerWxckU-pMIh3yO8VjxHpgZ4jU2WSXuK3goW4uYb6c4BgmlkgnY0gmlwhI_G-a6KbXVsdGlhZGRyc7EALzYobm9kZS0wMS5kby1hbXMzLnN0YXR1cy5wcm9kLnN0YXR1c2ltLm5ldAYBu94DiXNlY3AyNTZrMaECoVyonsTGEQvVioM562Q1fjzTb_vKD152PPIdsV7sM6SDdGNwgnZfg3VkcIIjKIV3YWt1MgM",
+                "node-02.do-ams3.status.prod": "enr:-M-4QIhQjPgSnoKXLsJAxbRzF8cZYYjOfdt1ysBkibcriCvXb9lWHDiRghIv11JQltK5KYFs2zrCKoQ-_ZoRXEs5FasBgmlkgnY0gmlwhKEj9HmKbXVsdGlhZGRyc7EALzYobm9kZS0wMi5kby1hbXMzLnN0YXR1cy5wcm9kLnN0YXR1c2ltLm5ldAYBu94DiXNlY3AyNTZrMaED1AYI2Ox27DnSqf2qoih5M2fNpHFq-OzJ3thREEApdiiDdGNwgnZfg3VkcIIjKIV3YWt1MgM",
+                "node-01.gc-us-central1-a.status.prod": "enr:-Nm4QPRAGqCjHCuu3DjbDVoLPqpE35Lfc3mjdCsmGTqdWmxjOF2NAbdYezEnukrz38TkTNXzEdslw_n_H5uUQ3hi-2EBgmlkgnY0gmlwhCPKN5mKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuZ2MtdXMtY2VudHJhbDEtYS5zdGF0dXMucHJvZC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAhoqdPkAZNvNRuzEecDGwnt5UbF98qwM16PZG3JmW6kUg3RjcIJ2X4N1ZHCCIyiFd2FrdTID",
+                "node-02.gc-us-central1-a.status.prod": "enr:-Nm4QEdveBFdGPTVPCmYBikMKtGFlvLnzvXfYLOWDLPtTejBLcV_9e5Ry7dqx5K027rn5zedG-HnNiHP_GBcdCpGnq0BgmlkgnY0gmlwhCKE1emKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDIuZ2MtdXMtY2VudHJhbDEtYS5zdGF0dXMucHJvZC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAwtASPpiz5Gq3zuFuWF4MTviQVipi3HaQGytF-4wfbdvg3RjcIJ2X4N1ZHCCIyiFd2FrdTID",
+                "node-01.ac-cn-hongkong-c.status.prod": "enr:-Nm4QOxEmmi5LQo3EwmHCagXOzVXzsLDGDwPDTL6ECmUCoXPYV0ldWvzMVqPOEPzXMCtECdk7xpleiNN85oKQxFiGnYBgmlkgnY0gmlwhC_yyjuKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuYWMtY24taG9uZ2tvbmctYy5zdGF0dXMucHJvZC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAgwDLi50TMXqxWTCnR_rjQP3Eeznjs645ZNBoRh5B3jhg3RjcIJ2X4N1ZHCCIyiFd2FrdTID",
+                "node-02.ac-cn-hongkong-c.status.prod": "enr:-Nm4QOqKQ4bi7sYE1ZXAqnryEGeJOnQxIzo9UK5xHY_GeP4healoFVspoG2FaUCSyIg8pa4X2P99BbC15iSh98NIgPYBgmlkgnY0gmlwhC_zgIaKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDIuYWMtY24taG9uZ2tvbmctYy5zdGF0dXMucHJvZC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAzE4YIBrPK5oT_9MvYEeggmaDd205iU4Nn1MAhU5xqY5g3RjcIJ2X4N1ZHCCIyiFd2FrdTID"
+            },
+            "wss/p2p/waku": {
+                "node-01.do-ams3.status.prod": "/dns4/node-01.do-ams3.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAm6HZZr7aToTvEBPpiys4UxajCTU97zj5v7RNR2gbniy1D",
+                "node-02.do-ams3.status.prod": "/dns4/node-02.do-ams3.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmSve7tR5YZugpskMv2dmJAsMUKmfWYEKRXNUxRaTCnsXV",
+                "node-01.gc-us-central1-a.status.prod": "/dns4/node-01.gc-us-central1-a.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAkwBp8T6G77kQXSNMnxgaMky1JeyML5yqoTHRM8dbeCBNb",
+                "node-02.gc-us-central1-a.status.prod": "/dns4/node-02.gc-us-central1-a.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmDQugwDHM3YeUp86iGjrUvbdw3JPRgikC7YoGBsT2ymMg",
+                "node-01.ac-cn-hongkong-c.status.prod": "/dns4/node-01.ac-cn-hongkong-c.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvEZgh3KLwhLwXg95e5ojM8XykJ4Kxi2T7hk22rnA7pJC",
+                "node-02.ac-cn-hongkong-c.status.prod": "/dns4/node-02.ac-cn-hongkong-c.status.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmFy8BrJhCEmCYrUfBdSNkrPw6VHExtv4rRp1DSBnCPgx8"
+            }
+        },
+        "status.test": {
+            "tcp/p2p/waku": {
+                "node-01.do-ams3.status.test": "/dns4/node-01.do-ams3.status.test.statusim.net/tcp/30303/p2p/16Uiu2HAkukebeXjTQ9QDBeNDWuGfbaSg79wkkhK4vPocLgR6QFDf",
+                "node-01.gc-us-central1-a.status.test": "/dns4/node-01.gc-us-central1-a.status.test.statusim.net/tcp/30303/p2p/16Uiu2HAmGDX3iAFox93PupVYaHa88kULGqMpJ7AEHGwj3jbMtt76",
+                "node-01.ac-cn-hongkong-c.status.test": "/dns4/node-01.ac-cn-hongkong-c.status.test.statusim.net/tcp/30303/p2p/16Uiu2HAm2BjXxCp1sYFJQKpLLbPbwd5juxbsYofu3TsS3auvT9Yi"
+            },
+            "enr/p2p/waku": {
+                "node-01.do-ams3.status.test": "enr:-M-4QI1qCnM3DMuZR2Y86FygFXPtm9fIRc4rFdUaDj0NbEA3Jl4In8mXAjUWgoei7W9Grc7oqtgibmIo-HIHHg7wrhMBgmlkgnY0gmlwhEDhUe2KbXVsdGlhZGRyc7EALzYobm9kZS0wMS5kby1hbXMzLnN0YXR1cy50ZXN0LnN0YXR1c2ltLm5ldAYBu94DiXNlY3AyNTZrMaECBNx5Erw5Jdsw-uI9pBjB_V2R6brvuVWE-MJwYCQKVv6DdGNwgnZfg3VkcIIjKIV3YWt1Mg8",
+                "node-01.gc-us-central1-a.status.test": "enr:-Nm4QFxGf89g3MGnCLYBxBgpXejyB44mvXvJSpNzjlRwNXO6BIn7hl66OJpESPWdH7ipHNemmz0e04wtJHe_wVV5woABgmlkgnY0gmlwhCJ6_HaKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuZ2MtdXMtY2VudHJhbDEtYS5zdGF0dXMudGVzdC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAzToWxPoQnnubNH_CIu7YHPV0RHadQVIKlpfMJxxC2eFg3RjcIJ2X4N1ZHCCIyiFd2FrdTIP",
+                "node-01.ac-cn-hongkong-c.status.test": "enr:-Nm4QCF2zwCuAZzxTtjjjbo5hn6vx0ICcEJBGRBMdDCfpoX5BGiApbfhEljEjpI4ePhYra_k0o5uI8eTTGYHkr6208gBgmlkgnY0gmlwhC_y6SSKbXVsdGlhZGRyc7g6ADg2MW5vZGUtMDEuYWMtY24taG9uZ2tvbmctYy5zdGF0dXMudGVzdC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAmRvsjqPlfX7OOJ4x4F3GAOpBa4y4NQSoNHjX2XIo1lvg3RjcIJ2X4N1ZHCCIyiFd2FrdTIP"
+            },
+            "wss/p2p/waku": {
+                "node-01.do-ams3.status.test": "/dns4/node-01.do-ams3.status.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkukebeXjTQ9QDBeNDWuGfbaSg79wkkhK4vPocLgR6QFDf",
+                "node-01.gc-us-central1-a.status.test": "/dns4/node-01.gc-us-central1-a.status.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmGDX3iAFox93PupVYaHa88kULGqMpJ7AEHGwj3jbMtt76",
+                "node-01.ac-cn-hongkong-c.status.test": "/dns4/node-01.ac-cn-hongkong-c.status.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAm2BjXxCp1sYFJQKpLLbPbwd5juxbsYofu3TsS3auvT9Yi"
+            }
+        },
+        "go-waku.prod": {
+            "tcp/p2p/waku": {
+                "node-01.do-ams3.go-waku.prod": "/dns4/node-01.do-ams3.go-waku.prod.statusim.net/tcp/30303/p2p/16Uiu2HAkyScd7DiwgMwzfw8CFFhznH3wRzciqEUfjDzn7vyimR8c",
+                "node-01.gc-us-central1-a.go-waku.prod": "/dns4/node-01.gc-us-central1-a.go-waku.prod.statusim.net/tcp/30303/p2p/16Uiu2HAmKTYnoPKebjWy63e1zPKiYRCQvm25W5mNSnCFE8EmzLga",
+                "node-01.ac-cn-hongkong-c.go-waku.prod": "/dns4/node-01.ac-cn-hongkong-c.go-waku.prod.statusim.net/tcp/30303/p2p/16Uiu2HAkwUKwy66nhcSFeW7y5qijNqXC4ZD3TaMMqnoEbh3wK2xU"
+            },
+            "enr/p2p/waku": {
+                "node-01.do-ams3.go-waku.prod": "enr:-NC4QGRYrus1rbuI183CZmxjb1wL4_wdNMcJDKaxaTaRs-RUTXP6KQ0VxL8zGaPNNxLT45ItXS8dmQvcyBWUlTwqXfYBgmlkgnY0gmlwhIbRh8OKbXVsdGlhZGRyc7IAMDYpbm9kZS0wMS5kby1hbXMzLmdvLXdha3UucHJvZC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAjusiHwKZa-rftTSq-KnDnirfCBW-q5ClJf4YEw9N8_Jg3RjcIJ2X4N1ZHCCIyiFd2FrdTIP",
+                "node-01.gc-us-central1-a.go-waku.prod": "enr:-Nq4QJuKC3qwV704_zzThJiIaV2Jb1YLLjRzSalpgrgAUV7vU0_fMYTQUshz6hcqds0lR3lHFzhCDEdrT6TmP1rBF1IBgmlkgnY0gmlwhCJ6XvOKbXVsdGlhZGRyc7g7ADk2Mm5vZGUtMDEuZ2MtdXMtY2VudHJhbDEtYS5nby13YWt1LnByb2Quc3RhdHVzaW0ubmV0BgG73gOJc2VjcDI1NmsxoQNlE4TEM5FmqnyDaMQ4viBkHpx2FZb9SPVl_XsVCrn5q4N0Y3CCdl-DdWRwgiMohXdha3UyDw",
+                "node-01.ac-cn-hongkong-c.go-waku.prod": "enr:-Nq4QFd-E6Ej3RuGF_-zZWYLfIb4vpfhKNi6RiLWrt30O90oNuJnbhUo8rMvuX_sO95X6QoyHa9RaUYx9N7cywA4WWkBgmlkgnY0gmlwhAjSBH6KbXVsdGlhZGRyc7g7ADk2Mm5vZGUtMDEuYWMtY24taG9uZ2tvbmctYy5nby13YWt1LnByb2Quc3RhdHVzaW0ubmV0BgG73gOJc2VjcDI1NmsxoQIeZXd0MFV5YU9q0pWt05cUEc0RnptCtJarNlnxV7OpJYN0Y3CCdl-DdWRwgiMohXdha3UyDw"
+            },
+            "wss/p2p/waku": {
+                "node-01.do-ams3.go-waku.prod": "/dns4/node-01.do-ams3.go-waku.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAkyScd7DiwgMwzfw8CFFhznH3wRzciqEUfjDzn7vyimR8c",
+                "node-01.gc-us-central1-a.go-waku.prod": "/dns4/node-01.gc-us-central1-a.go-waku.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAmKTYnoPKebjWy63e1zPKiYRCQvm25W5mNSnCFE8EmzLga",
+                "node-01.ac-cn-hongkong-c.go-waku.prod": "/dns4/node-01.ac-cn-hongkong-c.go-waku.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAkwUKwy66nhcSFeW7y5qijNqXC4ZD3TaMMqnoEbh3wK2xU"
+            }
+        },
+        "go-waku.test": {
+            "tcp/p2p/waku": {
+                "node-01.do-ams3.go-waku.test": "/dns4/node-01.do-ams3.go-waku.test.statusim.net/tcp/30303/p2p/16Uiu2HAm9vnvCQgCDrynDK1h7GJoEZVGvnuzq84RyDQ3DEdXmcX7",
+                "node-01.gc-us-central1-a.go-waku.test": "/dns4/node-01.gc-us-central1-a.go-waku.test.statusim.net/tcp/30303/p2p/16Uiu2HAmPz63Xc6AuVkDeujz7YeZta18rcdau3Y1BzaxKAfDrBqz",
+                "node-01.ac-cn-hongkong-c.go-waku.test": "/dns4/node-01.ac-cn-hongkong-c.go-waku.test.statusim.net/tcp/30303/p2p/16Uiu2HAmBDbMWFiG9ki8sDw6fYtraSxo4oHU9HbuN43S2HVyq1FD"
+            },
+            "enr/p2p/waku": {
+                "node-01.do-ams3.go-waku.test": "enr:-NC4QKYOHGKa69sKLLKbRlcR890mmPRIboV0MUSMQtvjiwd7SISpBYqVibOpmTuS0kRlU6KmBQs_MXA9LPOBgMbRB7UBgmlkgnY0gmlwhIbRhj-KbXVsdGlhZGRyc7IAMDYpbm9kZS0wMS5kby1hbXMzLmdvLXdha3UudGVzdC5zdGF0dXNpbS5uZXQGAbveA4lzZWNwMjU2azGhAtd5TiUZInW1nFF7nZtkXrw0iuqOLyV31_f7EhuM_Fs-g3RjcIJ2X4N1ZHCCIyiFd2FrdTIP",
+                "node-01.gc-us-central1-a.go-waku.test": "enr:-Nq4QEb3btlua6_4EdC1SAF0wTl0JqI8Du34Bm7raZoYOAbHPmRzVt4rq-0ItCM3L4MkOpCFn_X26aTq-Q2YEK8DuGEBgmlkgnY0gmlwhCPft1uKbXVsdGlhZGRyc7g7ADk2Mm5vZGUtMDEuZ2MtdXMtY2VudHJhbDEtYS5nby13YWt1LnRlc3Quc3RhdHVzaW0ubmV0BgG73gOJc2VjcDI1NmsxoQOoVQePH5eRqlcCf-0XwZsoJPeZp1Mq59un_jYM9hUc6YN0Y3CCdl-DdWRwgiMohXdha3UyDw",
+                "node-01.ac-cn-hongkong-c.go-waku.test": "enr:-Nq4QCWN6qBpeK_1GiqE_F45k3MmBDxaOJ7X9fAOKO0qu_6xCPAkjOVz6Th_vn8n-CLdEizO5oJ6YOivuAiRHDdJ3q4BgmlkgnY0gmlwhAjaAm6KbXVsdGlhZGRyc7g7ADk2Mm5vZGUtMDEuYWMtY24taG9uZ2tvbmctYy5nby13YWt1LnRlc3Quc3RhdHVzaW0ubmV0BgG73gOJc2VjcDI1NmsxoQLqosp15CMf5c4k-z9MGM7_aiR0DGdmSrpjQ_xWnmsTOIN0Y3CCdl-DdWRwgiMohXdha3UyDw"
+            },
+            "wss/p2p/waku": {
+                "node-01.do-ams3.go-waku.test": "/dns4/node-01.do-ams3.go-waku.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAm9vnvCQgCDrynDK1h7GJoEZVGvnuzq84RyDQ3DEdXmcX7",
+                "node-01.gc-us-central1-a.go-waku.test": "/dns4/node-01.gc-us-central1-a.go-waku.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPz63Xc6AuVkDeujz7YeZta18rcdau3Y1BzaxKAfDrBqz",
+                "node-01.ac-cn-hongkong-c.go-waku.test": "/dns4/node-01.ac-cn-hongkong-c.go-waku.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmBDbMWFiG9ki8sDw6fYtraSxo4oHU9HbuN43S2HVyq1FD"
+            }
+        }
     }
-  },
-  "meta": {
-    "hostname": "node-01.do-ams3.proxy.misc",
-    "timestamp": "2021-06-07T00:00:09.836740"
-  }
-}
+}

shadow-cljs.edn

@@ -19,6 +19,7 @@
                   ;; routing
                   [bidi "2.1.6"]
                   ;; test dependencies
+                  [camel-snake-kebab "0.4.3"]
                   [day8.re-frame/test "0.1.5"]
                   [com.taoensso/tufte "2.1.0"]]
 
@@ -81,20 +82,25 @@
    :output-dir       "target/test"
    :optimizations    :simple
    :target           :node-test
-   :main             status-im.test-runner/main
+   ;; When running tests without a REPL you can uncomment below line to `make test-watch` a specific file
+   ;;:ns-regexp        "status-im2.subs.subs-test$"
+   :main
+   status-im.test-runner/main
    ;; set :ui-driven to true to let shadow-cljs inject node-repl
-   :ui-driven        true
+   :ui-driven
+   true
    :closure-defines
    {status-im.utils.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
     status-im.utils.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
-   :compiler-options {;; needed because we override require and it
-                      ;; messes with source-map which reports callstack
-                      ;; exceeded exceptions instead of real issues
-                      :source-map    false
-                      ;; needed because we use deref in tests
-                      :static-fns    false
-                      :optimizations :simple
-                      :infer-externs true}}
+   :compiler-options
+   {;; needed because we override require and it
+    ;; messes with source-map which reports callstack
+    ;; exceeded exceptions instead of real issues
+    :source-map    false
+    ;; needed because we use deref in tests
+    :static-fns    false
+    :optimizations :simple
+    :infer-externs true}}
 
   ;; mock.js-dependencies is mocking the react-native libraries
   ;; we build it as a node library so that it can be required by
@@ -107,8 +113,8 @@
    :compiler-options {:optimizations :simple
                       :source-map    false}}
   :component-test {:target           :npm-module
-                   :entries          [quo2.core-spec]
-                   :ns-regexp        "-component-spec$"
+                   :entries          [quo2.core-spec status-im2.core-spec]
+                   :ns-regexp        "component-spec$"
                    :output-dir       "component-spec"
                    :compiler-options {:warnings-as-errors false
                                       :static-fns         false

src/i18n/i18n.cljs

@@ -3,7 +3,7 @@
             [clojure.string :as string]
             [status-im.goog.i18n :as goog.i18n]))
 
-(defn init
+(defn setup
   [default-device-language translations-by-locale]
   (set! (.-fallbacks i18n) true)
   (set! (.-defaultSeparator i18n) "/")

src/js/bottom_sheet.js

@@ -0,0 +1,15 @@
+import {useDerivedValue, runOnJS as reaRunOnJS, runOnJS} from "react-native-reanimated";
+
+export function useTranslateY(initialTranslationY, bottomSheetDy, panY) {
+  return useDerivedValue(() => {
+    return initialTranslationY - (bottomSheetDy.value - panY.value)
+  })
+}
+
+export function useBackgroundOpacity(translateY, backgroundHeight, windowHeight) {
+  return useDerivedValue(() => {
+    const opacity = ((translateY.value - windowHeight) / -backgroundHeight) * 0.5
+
+    return Math.max(Math.min(opacity, 0.5), 0)
+  })
+}

src/js/record_audio_worklets.js

@@ -0,0 +1,18 @@
+import { useDerivedValue } from 'react-native-reanimated';
+
+const MAX_SCALE = 1.8;
+
+export function ringScale(scale, subtract) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      const value = scale.value;
+      const maxDelta = MAX_SCALE - 1;
+      const maxDeltaDiff = 1 - maxDelta;
+      const maxVirtualScale = MAX_SCALE + maxDelta;
+      const decimals = value - Math.floor(value);
+      const normalizedValue = value >= maxVirtualScale ? (decimals + ((parseInt(value) - 1) * maxDeltaDiff) + 1) : value;
+      return (((normalizedValue - subtract) > MAX_SCALE ? normalizedValue - maxDelta : normalizedValue) - subtract);
+    }
+  );
+}

src/js/worklet_factory.js

@@ -1,3 +1,5 @@
+import { useDerivedValue, interpolate } from 'react-native-reanimated';
+
 // Generic Worklets
 
 export function applyAnimationsToStyle(animations, style) {
@@ -27,3 +29,12 @@ export function applyAnimationsToStyle(animations, style) {
     return Object.assign(animatedStyle, style);
   };
 };
+
+export function interpolateValue(sharedValue, inputRange, outputRange) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return interpolate(sharedValue.value, inputRange, outputRange);
+    }
+  );
+}

src/mocks/js_dependencies.cljs

@@ -4,6 +4,22 @@
   (:require [status-im.utils.test :as utils.test])
   (:require [status-im.chat.default-chats :refer (default-chats)]))
 
+;; to generate a js Proxy at js/__STATUS_MOBILE_JS_IDENTITY_PROXY__ that accept any (.xxx) call and
+;; return itself
+;; For the convenience to mock eg.
+;; (-> reanimated/slide-out-up-animation .springify (.damping 20) (.stiffness 300))
+;; (-> reanimated/slide-out-up-animation (.damping 20) .springify (.stiffness 300))
+(js/eval
+ "
+var globalThis
+if (typeof window === \"undefined\") {
+  globalThis = global
+} else {
+  globalThis = window
+}
+globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}})
+")
+
 (def action-button #js {:default #js {:Item #js {}}})
 (def config #js {:default #js {}})
 (def camera #js {:RNCamera #js {:Constants #js {}}})
@@ -122,8 +138,10 @@
 (def react-native-share #js {:default {}})
 (def react-native-svg
   #js
-   {:SvgUri #js {:render identity}
-    :SvgXml #js {:render identity}})
+   {:SvgUri  #js {:render identity}
+    :SvgXml  #js {:render identity}
+    :default #js {:render identity}
+    :Path    #js {:render identity}})
 (def react-native-webview #js {:default {}})
 (def react-native-audio-toolkit #js {:MediaStates {}})
 (def net-info #js {})
@@ -188,55 +206,60 @@
 
 (def react-native-reanimated
   #js
-   {:default          #js
-                       {:createAnimatedComponent identity
-                        :eq                      nil
-                        :greaterOrEq             nil
-                        :greaterThan             nil
-                        :lessThan                nil
-                        :lessOrEq                nil
-                        :add                     nil
-                        :diff                    nil
-                        :divide                  nil
-                        :sub                     nil
-                        :multiply                nil
-                        :abs                     nil
-                        :min                     nil
-                        :max                     nil
-                        :neq                     nil
-                        :and                     nil
-                        :or                      nil
-                        :not                     nil
-                        :set                     nil
-                        :startClock              nil
-                        :stopClock               nil
-                        :Value                   nil
-                        :Clock                   nil
-                        :debug                   nil
-                        :log                     nil
-                        :event                   nil
-                        :cond                    nil
-                        :block                   nil
-                        :interpolateNode         nil
-                        :call                    nil
-                        :timing                  nil
-                        :onChange                nil
-                        :View                    #js {}
-                        :Image                   #js {}
-                        :ScrollView              #js {}
-                        :Text                    #js {}
-                        :Extrapolate             #js {:CLAMP nil}
-                        :Code                    #js {}}
-    :EasingNode       #js
-                       {:bezier identity
-                        :linear identity}
-    :clockRunning     nil
-    :useSharedValue   (fn [])
-    :useAnimatedStyle (fn [])
-    :withTiming       (fn [])
-    :withDelay        (fn [])
-    :Easing           #js {:bezier identity}
-    :Keyframe         (fn [])})
+   {:default                #js
+                             {:createAnimatedComponent identity
+                              :eq                      nil
+                              :greaterOrEq             nil
+                              :greaterThan             nil
+                              :lessThan                nil
+                              :lessOrEq                nil
+                              :add                     nil
+                              :diff                    nil
+                              :divide                  nil
+                              :sub                     nil
+                              :multiply                nil
+                              :abs                     nil
+                              :min                     nil
+                              :max                     nil
+                              :neq                     nil
+                              :and                     nil
+                              :or                      nil
+                              :not                     nil
+                              :set                     nil
+                              :startClock              nil
+                              :stopClock               nil
+                              :Value                   nil
+                              :Clock                   nil
+                              :debug                   nil
+                              :log                     nil
+                              :event                   nil
+                              :cond                    nil
+                              :block                   nil
+                              :interpolateNode         nil
+                              :call                    nil
+                              :timing                  nil
+                              :onChange                nil
+                              :View                    #js {}
+                              :Image                   #js {}
+                              :ScrollView              #js {}
+                              :Text                    #js {}
+                              :Extrapolate             #js {:CLAMP nil}
+                              :Code                    #js {}}
+    :EasingNode             #js
+                             {:bezier identity
+                              :linear identity}
+    :clockRunning           nil
+    :useSharedValue         (fn [])
+    :useAnimatedStyle       (fn [])
+    :withTiming             (fn [])
+    :withDelay              (fn [])
+    :Easing                 #js {:bezier identity}
+    :Keyframe               (fn [])
+    :enableLayoutAnimations (fn [])
+    :SlideOutUp             js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
+    :SlideInUp              js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
+    :LinearTransition       js/__STATUS_MOBILE_JS_IDENTITY_PROXY__})
+
 (def react-native-gesture-handler
   #js
    {:default                  #js {}
@@ -321,6 +344,9 @@
 
 (def shell-worklets #js {})
 
+(def bottom-sheet #js {})
+(def record-audio-worklets #js {})
+
 ;; Update i18n_resources.cljs
 (defn mock
   [module]
@@ -369,6 +395,8 @@
     "react-native-svg"                              react-native-svg
     "../src/js/worklet_factory.js"                  worklet-factory
     "../src/js/shell_worklets.js"                   shell-worklets
+    "../src/js/bottom_sheet.js"                     bottom-sheet
+    "../src/js/record_audio_worklets.js"            record-audio-worklets
     "./fleets.js"                                   default-fleets
     "./chats.js"                                    default-chats
     "@walletconnect/client"                         wallet-connect-client

src/quo2/components/avatars/account_avatar.cljs

@@ -1,13 +1,8 @@
 (ns quo2.components.avatars.account-avatar
   (:require [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
             [react-native.core :as rn]))
 
-(def icon-color-value
-  {:dark  (get-in colors/customization [:dark :purple])
-   :light (get-in colors/customization [:light :purple])})
-
 (defn get-border-radius
   [size]
   (case size
@@ -27,12 +22,11 @@
     20 11))
 
 (defn account-avatar
-  [{:keys [size icon]
-    :or   {size 80
-           icon :main-icons/placeholder}}]
-  (let [icon-color           (if (theme/dark?)
-                               (:dark icon-color-value)
-                               (:light icon-color-value))
+  [{:keys [size icon color]
+    :or   {size  80
+           icon  :i/placeholder
+           color :purple}}]
+  (let [icon-color           (colors/custom-color-by-theme color 50 60)
         avatar-border-radius (get-border-radius size)
         inner-icon-size      (get-inner-icon-sizes size)]
     [rn/view

src/quo2/components/avatars/group_avatar.cljs

@@ -24,7 +24,9 @@
         :align-items      :center
         :justify-content  :center
         :border-radius    (/ container-size 2)
-        :background-color (colors/custom-color-by-theme color 50 60)}
+        ;:background-color (colors/custom-color-by-theme color 50 60) ; TODO: this is temporary only.
+        ;Issue: https://github.com/status-im/status-mobile/issues/14566
+        :background-color color}
        [icon/icon :i/group
         {:size  icon-size
          :color colors/white-opa-70}]])))

src/quo2/components/avatars/user_avatar.cljs

@@ -141,7 +141,7 @@
      (if profile-picture
        ;; display image
        [fast-image/fast-image
-        {:source {:uri profile-picture}
+        {:source profile-picture
          :style  (container-styling inner-dimensions outer-dimensions)}]
        ;; else display initials
        [container inner-dimensions outer-dimensions

src/quo2/components/banners/banner/component_spec.cljs

@@ -0,0 +1,27 @@
+(ns quo2.components.banners.banner.component-spec
+  (:require ["@testing-library/react-native" :as rtl]
+            [quo2.components.banners.banner.view :as banner]
+            [reagent.core :as reagent]))
+
+(defn render-banner
+  [opts]
+  (rtl/render (reagent/as-element [banner/banner opts])))
+
+(js/global.test "basic render of banner component"
+  (fn []
+    (render-banner {:pins-count      "5"
+                    :latest-pin-text "this message"})
+    (-> (js/expect (rtl/screen.getByText "this message"))
+        (.toBeTruthy))
+    (-> (js/expect (rtl/screen.getByText "5"))
+        (.toBeTruthy))))
+
+(js/global.test "banner component fires an event when pressed"
+  (let [mock-fn (js/jest.fn)]
+    (fn []
+      (render-banner {:on-press        mock-fn
+                      :pins-count      "5"
+                      :latest-pin-text "this message"})
+      (rtl/fireEvent.press (rtl/screen.getByText "this message"))
+      (-> (js/expect mock-fn)
+          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/banners/banner/style.cljs

@@ -0,0 +1,28 @@
+(ns quo2.components.banners.banner.style
+  (:require [quo2.foundations.colors :as colors]))
+
+
+(def container
+  {:height           40
+   :flex             1
+   :background-color colors/primary-50-opa-20
+   :flex-direction   :row
+   :align-items      :center
+   :padding-right    22
+   :padding-left     20
+   :padding-vertical 10})
+
+(def counter
+  {:flex            1
+   :justify-content :center
+   :align-items     :center})
+
+(def icon
+  {:flex         1
+   :margin-right 10})
+
+(defn text
+  [hide-pin?]
+  {:flex         (if hide-pin? 16 15)
+   :margin-right 10})
+

src/quo2/components/banners/banner/view.cljs

@@ -0,0 +1,30 @@
+(ns quo2.components.banners.banner.view
+  (:require [quo2.components.banners.banner.style :as style]
+            [quo2.components.counter.counter :as counter]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+(defn banner
+  [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
+  (when (pos? pins-count)
+    [rn/touchable-opacity
+     {:accessibility-label :pinned-banner
+      :style               style/container
+      :active-opacity      1
+      :on-press            on-press}
+     (when-not hide-pin?
+       [rn/view {:style style/icon}
+        [icons/icon :i/pin
+         {:color (colors/theme-colors colors/neutral-100 colors/white)
+          :size  20}]])
+     [rn/view {:style (style/text hide-pin?)}
+      [text/text
+       {:number-of-lines 1
+        :size            :paragraph-2}
+       latest-pin-text]]
+     [rn/view
+      {:accessibility-label :pins-count
+       :style               style/counter}
+      (when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]]))

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

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

src/quo2/components/buttons/button.cljs

@@ -32,9 +32,9 @@
            :outline         {:icon-color           colors/neutral-50
                              :icon-secondary-color colors/neutral-50
                              :label-color          colors/neutral-100
-                             :border-color         {:default  colors/neutral-20
+                             :border-color         {:default  colors/neutral-30
                                                     :pressed  colors/neutral-40
-                                                    :disabled colors/neutral-20}}
+                                                    :disabled colors/neutral-30}}
            :ghost           {:icon-color           colors/neutral-50
                              :icon-secondary-color colors/neutral-50
                              :label-color          colors/neutral-100
@@ -138,7 +138,8 @@
 
 (defn shape-style-container
   [type icon size]
-  {:border-radius (if (and icon (#{:primary :secondary :danger} type))
+  {:height        size
+   :border-radius (if (and icon (#{:primary :secondary :danger} type))
                     24
                     (case size
                       56 12

src/quo2/components/buttons/dynamic_button.cljs

@@ -31,7 +31,7 @@
      :notification-up   :i/arrow-up
      :search-with-label :i/search
      :search            :i/search
-     :bottom            :i/arrow-down)
+     :scroll-to-bottom  :i/arrow-down)
    {:size            12
     :color           (get-icon-and-text-color type)
     :container-style {:margin-top    6
@@ -43,7 +43,7 @@
                                        :notification-up   2
                                        :search-with-label 8
                                        :search            6
-                                       :bottom            6)
+                                       :scroll-to-bottom  6)
                       :margin-right  (case type
                                        :jump-to           8
                                        :mention           2
@@ -51,12 +51,12 @@
                                        :notification-up   8
                                        :search-with-label 4
                                        :search            6
-                                       :bottom            6)}}])
+                                       :scroll-to-bottom  6)}}])
 
 (defn dynamic-button
   "[dynamic-button opts]
    opts
-   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom
+   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
     :on-press            fn
     :count               mentions or notifications count
     :customization-color customize jump-to and mention button color}"
@@ -77,7 +77,7 @@
                   :border-radius    12
                   :background-color (get-button-color type @pressed? (or customization-color :primary))}
                  style)}
-        (when (#{:mention :search :search-with-label :bottom} type)
+        (when (#{:mention :search :search-with-label :scroll-to-bottom} type)
           [icon-view type])
         (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
           [text/text

src/quo2/components/community/community_card_view.cljs

@@ -1,12 +1,15 @@
 (ns quo2.components.community.community-card-view
   (:require [quo2.components.community.community-view :as community-view]
+            [quo2.components.community.icon :as icon]
             [quo2.components.community.style :as style]
             [react-native.core :as rn]))
 
 (defn community-card-view-item
-  [{:keys [name description locked
+  [{:keys [name description locked images
            status tokens cover tags width]} on-press]
-  [rn/touchable-opacity {:on-press on-press}
+  [rn/touchable-opacity
+   {:accessibility-label :community-card-item
+    :on-press            on-press}
    [rn/view {:style (style/community-card 20)}
     [rn/view
      {:style    {:width         width
@@ -22,9 +25,9 @@
          {: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]]
+       [rn/view (style/card-view-chat-icon 48)
+        [icon/community-icon {:images images} 48]]
+
        (when (= status :gated)
          [rn/view (style/permission-tag-styles)
           [community-view/permission-tag-container

src/quo2/components/community/community_list_view.cljs

@@ -5,19 +5,8 @@
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]))
-
-(defn community-icon-view
-  [community-icon]
-  [rn/view
-   {:width  32
-    :height 32}
-   [fast-image/fast-image
-    {:source {:uri community-icon}
-     :style  {:height        32
-              :border-radius 16
-              :width         32}}]])
+            [quo2.components.community.icon :as community-icon]
+            [react-native.core :as rn]))
 
 (defn notification-view
   [{:keys [muted?
@@ -54,27 +43,18 @@
            unread-messages?
            unread-mentions-count
            community-icon
-           tokens
-           background-color]}]
+           tokens]}]
   [rn/view
    {:style (merge (style/community-card 16)
-                  {:margin-bottom     12
-                   :margin-horizontal 20})}
+                  {:margin-bottom 12})}
    [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]
-      (when community-icon
-        [community-icon-view community-icon])
+     [rn/view (style/list-info-container)
+      [community-icon/community-icon
+       {:images community-icon} 32]
       [rn/view
        {:flex              1
         :margin-horizontal 12}
@@ -109,39 +89,36 @@
            community-icon
            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/touchable-highlight
+   (merge {:underlay-color (colors/theme-colors
+                            colors/neutral-5
+                            colors/neutral-95)
+           :style          {:border-radius 12}}
+          props)
+   [rn/view {:flex 1}
+    [rn/view (style/membership-info-container)
+     [community-icon/community-icon
+      {:images community-icon} 32]
      [rn/view
-      {:flex-direction :row
-       :border-radius  16
-       :align-items    :center}
+      {: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 community-icon
-        [community-icon-view community-icon])
-      [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]]
-
-      [rn/view
-       {:justify-content :center
-        :margin-right    16}
-       (if (= status :gated)
-         [community-view/permission-tag-container
-          {:locked? locked?
-           :tokens  tokens}]
-         [notification-view
-          {:muted?                muted?
-           :unread-mentions-count unread-mentions-count
-           :unread-messages?      unread-messages?}])]]]]])
+     [rn/view
+      {:justify-content :center
+       :margin-right    16}
+      (if (= status :gated)
+        [community-view/permission-tag-container
+         {:locked? locked?
+          :tokens  tokens}]
+        [notification-view
+         {:muted?                muted?
+          :unread-mentions-count unread-mentions-count
+          :unread-messages?      unread-messages?}])]]]])

src/quo2/components/community/community_view.cljs

@@ -46,12 +46,12 @@
      ^{:key id}
      [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}}]

src/quo2/components/community/icon.cljs

@@ -0,0 +1,13 @@
+(ns quo2.components.community.icon
+  (:require [react-native.core :as rn]))
+
+(defn community-icon
+  [{:keys [images]} size]
+  (let [thumbnail-image (get-in images [:thumbnail :uri])]
+    [rn/image
+     {:source {:uri thumbnail-image}
+      :style  {:border-radius 50
+               :border-width  0
+               :border-color  :transparent
+               :width         size
+               :height        size}}]))

src/quo2/components/community/style.cljs

@@ -77,19 +77,20 @@
                       colors/white
                       colors/neutral-90)})
 
-(defn list-view-content-container
+(defn list-info-container
   []
-  {:flex-direction   :row
-   :border-radius    16
-   :align-items      :center
-   :background-color (colors/theme-colors
-                      colors/white
-                      colors/neutral-90)})
+  {:flex-direction     :row
+   :border-radius      16
+   :padding-horizontal 12
+   :align-items        :center
+   :padding-vertical   8})
 
-(defn list-view-chat-icon
+(defn membership-info-container
   []
-  {:border-radius 32
-   :padding       12})
+  {:flex-direction :row
+   :border-radius  16
+   :align-items    :center
+   :height         48})
 
 (defn community-title-description-container
   [margin-top]
@@ -107,4 +108,4 @@
   []
   {:position :absolute
    :top      8
-   :right    8})
+   :right    8})

src/quo2/components/community/token_gating.cljs

@@ -7,8 +7,8 @@
             [quo2.components.markdown.text :as text]
             [quo2.components.tags.token-tag :as token-tag]
             [quo2.foundations.colors :as colors]
-            [status-im.i18n.i18n :as i18n]
-            [status-im.ui.components.fast-image :as fast-image]))
+            [i18n.i18n :as i18n]
+            [react-native.fast-image :as fast-image]))
 
 (def ^:private token-tag-horizontal-spacing 7)
 (def token-tag-vertical-spacing 5)

src/quo2/components/counter/__tests__/counter_component_spec.cljs

@@ -10,25 +10,25 @@
    (rtl/render (reagent/as-element [counter/counter opts value]))))
 
 (js/global.test "default render of counter component"
-                (fn []
-                  (render-counter)
-                  (-> (js/expect (rtl/screen.getByTestId "counter-component"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-counter)
+    (-> (js/expect (rtl/screen.getByTestId "counter-component"))
+        (.toBeTruthy))))
 
 (js/global.test "renders counter with a string value"
-                (fn []
-                  (render-counter {} "1")
-                  (-> (js/expect (rtl/screen.getByText "1"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-counter {} "1")
+    (-> (js/expect (rtl/screen.getByText "1"))
+        (.toBeTruthy))))
 
 (js/global.test "renders counter with an integer value"
-                (fn []
-                  (render-counter {} 1)
-                  (-> (js/expect (rtl/screen.getByText "1"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-counter {} 1)
+    (-> (js/expect (rtl/screen.getByText "1"))
+        (.toBeTruthy))))
 
 (js/global.test "renders counter with value 99+ when the value is greater than 99"
-                (fn []
-                  (render-counter {} "100")
-                  (-> (js/expect (rtl/screen.getByText "99+"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-counter {} "100")
+    (-> (js/expect (rtl/screen.getByText "99+"))
+        (.toBeTruthy))))

src/quo2/components/dividers/__tests__/divider_label_component_spec.cljs

@@ -0,0 +1,45 @@
+(ns quo2.components.dividers.--tests--.divider-label-component-spec
+  (:require ["@testing-library/react-native" :as rtl]
+            [quo2.components.dividers.divider-label :as divider-label]
+            [reagent.core :as reagent]))
+
+(defn render-divider-label
+  ([]
+   (render-divider-label {}))
+  ([opts]
+   (rtl/render (reagent/as-element [divider-label/divider-label opts]))))
+
+(js/global.test "default render of divider-label component"
+  (fn []
+    (render-divider-label)
+    (-> (js/expect (rtl/screen.getByLabelText "divider-label"))
+        (.toBeTruthy))))
+
+(js/global.test "render divider-label component with a label"
+  (fn []
+    (render-divider-label {:label :hello})
+    (-> (js/expect (rtl/screen.getByText "hello"))
+        (.toBeTruthy))))
+
+(js/global.test "render divider-label component with a counter-value"
+  (fn []
+    (render-divider-label {:label         :hello
+                           :counter-value "1"})
+    (-> (js/expect (rtl/screen.getByText "1"))
+        (.toBeTruthy))))
+
+(js/global.test "divider-label chevron icon renders to the left when set"
+  (fn []
+    (render-divider-label {:label            :hello
+                           :counter-value    "1"
+                           :chevron-position :left})
+    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-left"))
+        (.toBeTruthy))))
+
+(js/global.test "divider-label chevron icon renders to the right when set"
+  (fn []
+    (render-divider-label {:label            :hello
+                           :counter-value    "1"
+                           :chevron-position :right})
+    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-right"))
+        (.toBeTruthy))))

src/quo2/components/dividers/date.cljs

@@ -7,9 +7,9 @@
 (defn date
   [value]
   [rn/view
-   {:margin-vertical 16
-    :padding-right   8
-    :padding-left    62}
+   {:margin-vertical 8
+    :padding-right   20
+    :padding-left    60}
    [text/text
     {:weight              :medium
      :accessibility-label :divider-date-text

src/quo2/components/dividers/divider_label.cljs

@@ -23,14 +23,18 @@
         text-and-icon-color         (if dark? colors/neutral-40 colors/neutral-50)
         counter-text-color          (if dark? colors/white colors/neutral-100)]
     [rn/view
-     {:style {:border-top-width   1
-              :border-top-color   border-and-counter-bg-color
-              :padding-top        padding-top
-              :padding-horizontal 16
-              :align-items        :center
-              :flex-direction     :row}}
+     {:accessible          true
+      :accessibility-label :divider-label
+      :style               {:border-top-width   1
+                            :border-top-color   border-and-counter-bg-color
+                            :padding-top        padding-top
+                            :padding-horizontal 16
+                            :align-items        :center
+                            :flex-direction     :row}}
      (when (= chevron-position :left)
-       [rn/view {:style {:margin-right 4}}
+       [rn/view
+        {:test-ID :divider-label-icon-left
+         :style   {:margin-right 4}}
         [icons/icon
          :main-icons/chevron-down
          {:color  text-and-icon-color
@@ -43,10 +47,11 @@
                 :flex  1}}
       label]
      (when (= chevron-position :right)
-       [icons/icon
-        :main-icons/chevron-down
-        {:color text-and-icon-color
-         :size  chevron-icon-container-width}])
+       [rn/view {:test-ID :divider-label-icon-right}
+        [icons/icon
+         :main-icons/chevron-down
+         {:color text-and-icon-color
+          :size  chevron-icon-container-width}]])
      (when (pos? counter-value)
        [rn/view
         {:style {:border-radius    6

src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs

@@ -8,56 +8,46 @@
    (rtl/render (reagent/as-element [action-drawer/action-drawer options]))))
 
 (js/global.test "action-drawer renders with elements label displaying"
-                (fn []
-                  (render-action-drawer [[{:icon  :i/friend
-                                           :label "a sample label"}]])
-                  (-> (js/expect (rtl/screen.getByText "a sample label"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-action-drawer [[{:icon  :i/friend
+                             :label "a sample label"}]])
+    (-> (js/expect (rtl/screen.getByText "a sample label"))
+        (.toBeTruthy))))
 
 (js/global.test "action-drawer renders with elements sub-label displaying"
-                (fn []
-                  (render-action-drawer [[{:icon      :i/friend
-                                           :label     "a sample label"
-                                           :sub-label "a sample sub label"}]])
-                  (-> (js/expect (rtl/screen.getByText "a sample sub label"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-action-drawer [[{:icon      :i/friend
+                             :label     "a sample label"
+                             :sub-label "a sample sub label"}]])
+    (-> (js/expect (rtl/screen.getByText "a sample sub label"))
+        (.toBeTruthy))))
 
 (js/global.test "action-drawer on click action works on element"
-                (let [event (js/jest.fn)]
-                  (fn []
-                    (render-action-drawer [[{:icon     :i/friend
-                                             :label    "a sample label"
-                                             :on-press event}]])
-                    (rtl/fireEvent.press (rtl/screen.getByText "a sample label"))
-                    (-> (js/expect event)
-                        (.toHaveBeenCalled)))))
+  (let [event (js/jest.fn)]
+    (fn []
+      (render-action-drawer [[{:icon     :i/friend
+                               :label    "a sample label"
+                               :on-press event}]])
+      (rtl/fireEvent.press (rtl/screen.getByText "a sample label"))
+      (-> (js/expect event)
+          (.toHaveBeenCalled)))))
 
 (js/global.test "action-drawer renders two icons when set"
-                (fn []
-                  (render-action-drawer [[{:icon                :i/friend
-                                           :label               "a sample label"
-                                           :right-icon          :i/friend
-                                           :accessibility-label :first-element}]])
-                  (-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action"))
-                      (.toBeTruthy))
-                  (-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
-                      (.toBeTruthy))))
-
-(js/global.test "action-drawer does not render a divider when the add-divider? prop is false"
-                (fn []
-                  (render-action-drawer [[{:icon                :i/friend
-                                           :label               "a sample label"
-                                           :add-divider?        false
-                                           :accessibility-label :first-element}]])
-                  (-> (js/expect (rtl/screen.getAllByLabelText "divider"))
-                      (.not)
-                      (.toBeTruthy))))
+  (fn []
+    (render-action-drawer [[{:icon                :i/friend
+                             :label               "a sample label"
+                             :right-icon          :i/friend
+                             :accessibility-label :first-element}]])
+    (-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action"))
+        (.toBeTruthy))
+    (-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
+        (.toBeTruthy))))
 
 (js/global.test "action-drawer renders a divider when the add-divider? prop is true"
-                (fn []
-                  (render-action-drawer [[{:icon                :i/friend
-                                           :label               "a sample label"
-                                           :add-divider?        true
-                                           :accessibility-label :first-element}]])
-                  (-> (js/expect (rtl/screen.getAllByLabelText "divider"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-action-drawer [[{:icon                :i/friend
+                             :label               "a sample label"
+                             :add-divider?        true
+                             :accessibility-label :first-element}]])
+    (-> (js/expect (rtl/screen.getAllByLabelText "divider"))
+        (.toBeTruthy))))

src/quo2/components/drawers/permission_context/__tests__/permission_context_component_spec.cljs

@@ -0,0 +1,13 @@
+(ns quo2.components.drawers.permission-context.--tests--.permission-context-component-spec
+  (:require [quo2.components.drawers.permission-context.view :as permission-context]
+            [react-native.core :as rn]
+            [test-helpers.component :as h]))
+
+(h/describe "permission context"
+  (h/test
+    (h/render [permission-context/view
+               [rn/text
+                {:accessibility-label :accessibility-id}
+                "a sample label"]])
+    (-> (js/expect (h/get-by-label-text :accessibility-id))
+        (.toBeTruthy))))

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

@@ -0,0 +1,16 @@
+(ns quo2.components.drawers.permission-context.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def radius 20)
+(def container
+  {:padding-top             16
+   :padding-bottom          48
+   :padding-horizontal      20
+   :shadow-offset           {:width  0
+                             :height 2}
+   :shadow-radius           radius
+   :border-top-left-radius  radius
+   :border-top-right-radius radius
+   :elevation               2
+   :shadow-opacity          1
+   :shadow-color            colors/shadow})

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

@@ -0,0 +1,8 @@
+(ns quo2.components.drawers.permission-context.view
+  (:require [react-native.core :as rn]
+            [quo2.components.drawers.permission-context.style :as style]))
+
+(defn view
+  [children]
+  [rn/view {:style style/container}
+   children])

src/quo2/components/icons/icons.clj

@@ -4,16 +4,10 @@
 
 (def icon-path "./resources/images/icons2/")
 
-(defn combine-path
-  [path el]
-  (if (System/getenv "COMPONENT_TEST")
-    (str "." path el "@2x.png")
-    (str "." path el ".png")))
-
 (defn require-icon
   [size path]
   (fn [el]
-    (let [s (combine-path path el)
+    (let [s (str "." path el ".png")
           k (-> el
                 (string/replace "_" "-")
                 (string/replace " " "-")
@@ -41,4 +35,5 @@
    (get-icons 16)
    (get-icons 20)
    (get-icons 24)
-   (get-icons 32)))
+   (get-icons 32)
+   (get-icons 120)))

src/quo2/components/list_items/menu_item.cljs

@@ -15,22 +15,24 @@
              :text-color (theme-colors colors/danger-50 colors/danger-60)}))
 
 (defn menu-item
-  [{:keys [type title accessibility-label icon on-press]
+  [{:keys [type title accessibility-label icon on-press style-props subtitle subtitle-color]
     :or   {type :main}}]
   (let [{:keys [icon-color text-color background]} (themes type)]
     [rn/touchable-opacity
      (merge {:accessibility-label accessibility-label
-             :style               {:background-color background
-                                   :height           48
-                                   :flex-direction   :row
-                                   :align-items      :center}}
+             :style               (merge style-props
+                                         {:background-color background
+                                          :height           48
+                                          :flex-direction   :row
+                                          :align-items      :center})}
             (when on-press
               {:on-press on-press}))
      [rn/view
       {:style {:flex-direction     :row
                :flex-grow          0
                :flex-shrink        1
-               :padding-horizontal 20}}
+               :padding-horizontal 20
+               :align-items        :center}}
       [rn/view
        {:style {:width           20
                 :height          20
@@ -38,10 +40,19 @@
                 :justify-content :center
                 :margin-right    12}}
        [icons/icon icon {:color icon-color}]]
-      [text/text
-       {:weight          :medium
-        :style           {:color text-color}
-        :ellipsize-mode  :tail
-        :number-of-lines 1
-        :size            :paragraph-1}
-       title]]]))
+      [rn/view
+       [text/text
+        {:weight          :medium
+         :style           {:color text-color}
+         :ellipsize-mode  :tail
+         :number-of-lines 1
+         :size            :paragraph-1}
+        title]
+       (when subtitle
+         [text/text
+          {:weight          :medium
+           :style           {:color subtitle-color}
+           :ellipsize-mode  :tail
+           :number-of-lines 1
+           :size            :paragraph-1}
+          subtitle])]]]))

src/quo2/components/markdown/__tests__/text_component_spec.cljs

@@ -0,0 +1,14 @@
+(ns quo2.components.markdown.--tests--.text-component-spec
+  (:require ["@testing-library/react-native" :as rtl]
+            [quo2.components.markdown.text :as text]
+            [reagent.core :as reagent]))
+
+(defn render-text
+  ([options value]
+   (rtl/render (reagent/as-element [text/text options value]))))
+
+(js/global.test "text renders with text"
+  (fn []
+    (render-text {} "hello")
+    (-> (js/expect (rtl/screen.getByText "hello"))
+        (.toBeTruthy))))

src/quo2/components/messages/author/style.cljs

@@ -4,7 +4,6 @@
 (def container
   {:flex           1
    :flex-wrap      :wrap
-   :height         18
    :flex-direction :row
    :align-items    :center})
 
@@ -40,4 +39,4 @@
 (defn time-text
   [ens?]
   {:color       colors/neutral-50
-   :margin-left (if ens? 8 4)})
+   :margin-left (if ens? 8 4)})

src/quo2/components/messages/author/view.cljs

@@ -93,7 +93,8 @@
             :style     style/middle-dot-chat-key}
            middle-dot])
         [text/text
-         {:monospace true
-          :size      :paragraph-2
-          :style     (style/time-text ens?)}
+         {:monospace           true
+          :size                :paragraph-2
+          :accessibility-label :message-timestamp
+          :style               (style/time-text ens?)}
          time-str]]))])

src/quo2/components/navigation/floating_shell_button.cljs

@@ -50,4 +50,4 @@
            [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-button-view :scroll-to-bottom dynamic-buttons {:margin-left 8}]]]]))]))

src/quo2/components/navigation/page_nav.cljs

@@ -146,12 +146,11 @@
   [rn/view
    {:style (assoc centrify-style
                   :flex-direction  :row
-                  :flex            1
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
-     (map-indexed (fn [index {:keys [icon on-press type] :or {type :grey}}]
+     (map-indexed (fn [index {:keys [icon on-press type style] :or {type :grey}}]
                     ^{:key index}
-                    [rn/view {:style {:margin-right (if (not= index last-icon-index) 8 0)}}
+                    [rn/view {:style (merge {:margin-right (if (not= index last-icon-index) 8 0)} style)}
                      [button/button {:on-press on-press :icon true :type type :size 32}
                       icon]])
                   right-section-buttons))])

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

@@ -9,7 +9,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im.i18n.i18n :as i18n]))
+            [i18n.i18n :as i18n]))
 
 (def ^:private max-reply-length
   280)
@@ -81,19 +81,21 @@
            context))))
 
 (defn- activity-message
-  [{:keys [title body]}]
+  [{:keys [title body title-number-of-lines body-number-of-lines]}]
   [rn/view {:style style/message-container}
    (when title
      [text/text
       {:size                :paragraph-2
        :accessibility-label :activity-message-title
-       :style               style/message-title}
+       :style               style/message-title
+       :number-of-lines     title-number-of-lines}
       title])
    (if (string? body)
      [text/text
       {:style               style/message-body
        :accessibility-label :activity-message-body
-       :size                :paragraph-1}
+       :size                :paragraph-1
+       :number-of-lines     body-number-of-lines}
       body]
      body)])
 

src/quo2/components/notifications/count_down_circle.cljs

@@ -0,0 +1,105 @@
+(ns quo2.components.notifications.count-down-circle
+  (:require [goog.string :as gstring]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.svg :as svg]
+            [reagent.core :as reagent]))
+
+(defn- get-path-props
+  [size stroke-width rotation]
+  (let [half-size          (/ size 2)
+        half-stroke-width  (/ stroke-width 2)
+        arc-radius         (- half-size half-stroke-width)
+        arc-diameter       (* arc-radius 2)
+        rotation-indicator (if (= rotation :clockwise) "1,0" "0,1")
+        path-length        (* js/Math.PI arc-diameter)
+        path               (gstring/format
+                            "m %s,%s a %s,%s 0 %s 0,%s a %s,%s 0 %s 0 ,-%s"
+                            half-size
+                            half-stroke-width
+                            arc-radius
+                            arc-radius
+                            rotation-indicator
+                            arc-diameter
+                            arc-radius
+                            arc-radius
+                            rotation-indicator
+                            arc-diameter)]
+    {:path        path
+     :path-length path-length}))
+
+(defn- linear-ease
+  [time start goal duration]
+  (if (zero? duration)
+    start
+    (-> time
+        (/ duration)
+        (* goal)
+        (+ start))))
+
+(defn- get-start-at
+  [duration initial-remaining-time]
+  (cond (or (zero? duration) (= duration initial-remaining-time)) 0
+        (number? initial-remaining-time)                          (- duration initial-remaining-time)
+        :else                                                     0))
+
+(def ^:private themes
+  {:color {:light colors/neutral-80-opa-40
+           :dark  colors/white-opa-40}})
+
+(defn circle-timer
+  [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}]
+  (let [rotation                     (or rotation :clockwise)
+        duration                     (or duration 4)
+        stroke-width                 (or stroke-width 1)
+        size                         (or size 9)
+        max-stroke-width             (max stroke-width 0)
+        {:keys [path path-length]}   (get-path-props size max-stroke-width rotation)
+        start-at                     (get-start-at duration initial-remaining-time)
+        elapsed-time                 (reagent/atom 0)
+        prev-frame-time              (reagent/atom nil)
+        frame-request                (reagent/atom nil)
+        display-time                 (reagent/atom start-at)
+        ;; get elapsed frame time
+        swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time]
+                                       (if (nil? @prev-frame-time)
+                                         (do (reset! prev-frame-time frame-time)
+                                             (reset! frame-request (js/requestAnimationFrame
+                                                                    swap-elapsed-time-each-frame)))
+                                         (let [delta                (- (/ frame-time 1000)
+                                                                       (/ @prev-frame-time 1000))
+                                               current-elapsed      (swap! elapsed-time + delta)
+                                               current-display-time (+ start-at current-elapsed)
+                                               completed?           (>= current-display-time duration)]
+                                           (reset! display-time (if completed?
+                                                                  duration
+                                                                  current-display-time))
+                                           (when-not completed?
+                                             (reset! prev-frame-time frame-time)
+                                             (reset! frame-request (js/requestAnimationFrame
+                                                                    swap-elapsed-time-each-frame))))))]
+    (reagent/create-class
+     {:component-will-unmount #(js/cancelAnimationFrame @frame-request)
+      :reagent-render
+      (fn []
+        (reset! frame-request (js/requestAnimationFrame swap-elapsed-time-each-frame))
+        [rn/view
+         {:style {:position :relative
+                  :width    size
+                  :height   size}}
+         [svg/svg
+          {:view-box (str "0 0 " size " " size)
+           :width    size
+           :height   size}
+          [svg/path
+           {:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}]
+          (when-not (= @display-time duration)
+            [svg/path
+             {:d                 path
+              :fill              :none
+              :stroke            (or color (get-in themes [:color (theme/get-theme)]))
+              :stroke-linecap    :square
+              :stroke-width      stroke-width
+              :stroke-dasharray  path-length
+              :stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])})))

src/quo2/components/notifications/info_count.cljs

@@ -4,18 +4,23 @@
             [react-native.core :as rn]))
 
 (defn info-count
-  [count style]
-  (when (> count 0)
-    [rn/view
-     {:style (merge {:width            16
-                     :height           16
-                     :position         :absolute
-                     :right            22
-                     :border-radius    6
-                     :justify-content  :center
-                     :align-items      :center
-                     :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
-                    style)}
-     [rn/text
-      {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})}
-      count]]))
+  ([count]
+   (info-count {} count))
+  ([props count]
+   (when (> count 0)
+     [rn/view
+      (merge props
+             {:style (merge {:width            16
+                             :height           16
+                             :position         :absolute
+                             :right            22
+                             :border-radius    6
+                             :justify-content  :center
+                             :align-items      :center
+                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
+                            (:style props))})
+      [rn/text
+       {:style (merge typography/font-medium
+                      typography/label
+                      {:color colors/white :text-align :center})}
+       count]])))

src/quo2/components/notifications/toast.cljs

@@ -0,0 +1,87 @@
+(ns quo2.components.notifications.toast
+  (:require [i18n.i18n :as i18n]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.count-down-circle :as count-down-circle]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]))
+
+(def ^:private themes
+  {:container        {:dark  {:background-color colors/white-opa-70}
+                      :light {:background-color colors/neutral-80-opa-70}}
+   :text             {:dark  {:color colors/neutral-100}
+                      :light {:color colors/white}}
+   :icon             {:dark  {:color colors/neutral-100}
+                      :light {:color colors/white}}
+   :action-container {:dark  {:background-color :colors/neutral-80-opa-5}
+                      :light {:background-color :colors/white-opa-5}}})
+
+(defn- merge-theme-style
+  [component-key styles]
+  (merge (get-in themes [component-key (theme/get-theme)]) styles))
+
+(defn toast-action-container
+  [{:keys [on-press style]} & children]
+  [rn/touchable-highlight
+   {:on-press       on-press
+    :underlay-color :transparent}
+   [into
+    [rn/view
+     {:style (merge
+              {:flex-direction     :row
+               :padding-vertical   3
+               :padding-horizontal 8
+               :align-items        :center
+               :border-radius      8
+               :background-color   (get-in themes
+                                           [:action-container (theme/get-theme)
+                                            :background-color])}
+              style)}]
+    children]])
+
+(defn toast-undo-action
+  [duration on-press]
+  [toast-action-container
+   {:on-press on-press :accessibility-label :toast-undo-action}
+   [rn/view {:style {:margin-right 5}}
+    [count-down-circle/circle-timer {:duration duration}]]
+   [text/text
+    {:size :paragraph-2 :weight :medium :style (merge-theme-style :text {})}
+    [i18n/label :t/undo]]])
+
+(defn- toast-container
+  [{:keys [left middle right]}]
+  [rn/view {:style {:padding-left 12 :padding-right 12}}
+   [rn/view
+    {:style (merge-theme-style :container
+                               {:flex-direction   :row
+                                :width            "100%"
+                                :margin           :auto
+                                :justify-content  :space-between
+                                :padding-vertical 8
+                                :padding-left     10
+                                :padding-right    8
+                                :border-radius    12})}
+    [rn/view {:style {:padding 2}} left]
+    [rn/view {:style {:padding 4 :flex 1}}
+     [text/text
+      {:size                :paragraph-2
+       :weight              :medium
+       :style               (merge-theme-style :text {})
+       :accessibility-label :toast-content}
+      middle]]
+    (when right right)]])
+
+(defn toast
+  [{:keys [icon icon-color text action undo-duration undo-on-press]}]
+  [toast-container
+   {:left   (when icon
+              [icon/icon icon
+               {:container-style {:width 20 :height 20}
+                :color           (or icon-color
+                                     (get-in themes [:icon (theme/get-theme) :color]))}])
+    :middle text
+    :right  (if undo-duration
+              [toast-undo-action undo-duration undo-on-press]
+              action)}])

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

@@ -0,0 +1,40 @@
+(ns quo2.components.profile.profile-card.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn card-container
+  [customization-color]
+  {:flex-direction   :column
+   :padding          12
+   :flex             1
+   :border-radius    16
+   :background-color (colors/custom-color customization-color 50 40)})
+
+(def card-header
+  {:flex-direction  :row
+   :justify-content :space-between})
+
+(def name-container
+  {:flex-direction :row
+   :margin-top     8
+   :margin-bottom  2
+   :align-items    :center
+   :padding-right  12})
+
+(def user-name
+  {:margin-right 4
+   :color        colors/white})
+
+(def emoji-hash
+  {:margin-top 10})
+
+(def user-hash
+  {:color colors/white-opa-60})
+
+(def sign-button
+  {:margin-top 14})
+
+(def keycard-icon
+  {:color colors/white-opa-40})
+
+(def option-button
+  {:background-color colors/white-opa-5})

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

@@ -0,0 +1,64 @@
+(ns quo2.components.profile.profile-card.view
+  (:require
+   [quo2.components.profile.profile-card.style :as style]
+   [quo2.foundations.colors :as colors]
+   [quo2.components.avatars.user-avatar :as user-avatar]
+   [quo2.components.icon :as icon]
+   [quo2.components.markdown.text :as text]
+   [quo2.components.buttons.button :as button]
+   [react-native.core :as rn]))
+
+
+(defn profile-card
+  [{:keys [show-sign-profile? key-card? profile-picture name hash customization-color sign-label
+           emoji-hash on-press-dots on-press-sign show-emoji-hash?]
+    :or   {show-sign-profile?  false
+           show-emoji-hash?    false
+           customization-color :turquoise
+           key-card?           false}}]
+  [rn/view
+   {:style (style/card-container customization-color)}
+   [rn/view
+    {:style style/card-header}
+    [user-avatar/user-avatar
+     {:full-name         name
+      :profile-picture   profile-picture
+      :override-theme    :dark
+      :size              :medium
+      :status-indicator? false
+      :ring?             true}]
+    [button/button
+     {:size           32
+      :type           :blur-bg
+      :icon           true
+      :override-theme :dark
+      :style          style/option-button
+      :on-press       on-press-dots}
+     :i/options]]
+   [rn/view
+    {:style style/name-container}
+    [text/text
+     {:size            :heading-2
+      :weight          :semi-bold
+      :number-of-lines 1
+      :style           style/user-name} name]
+    (when key-card?
+      (icon/icon
+       :i/keycard
+       style/keycard-icon))]
+   [text/text
+    {:weight          :monospace
+     :number-of-lines 1
+     :style           style/user-hash} hash]
+   (when (and show-emoji-hash? emoji-hash)
+     [text/text
+      {:weight          :monospace
+       :number-of-lines 1
+       :style           style/emoji-hash} emoji-hash])
+   (when show-sign-profile?
+     [button/button
+      {:on-press             on-press-sign
+       :type                 :community
+       :community-color      (colors/custom-color customization-color 60)
+       :community-text-color colors/white
+       :style                style/sign-button} sign-label])])

src/quo2/components/reactions/reaction.cljs

@@ -1,31 +1,18 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as quo2.text]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.reactions.style :as style]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
             [react-native.core :as rn]))
 
-(def reaction-styling
-  {:flex-direction     :row
-   :justify-content    :center
-   :align-items        :center
-   :padding-horizontal 8
-   :border-radius      8
-   :height             24})
-
-(defn open-reactions-menu
+(defn add-reaction
   [{:keys [on-press]}]
   (let [dark? (theme/dark?)]
     [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)})}
+      :style               (style/add-reaction)}
      [icons/icon :i/add
       {:size  20
        :color (if dark?
@@ -35,41 +22,19 @@
 (defn reaction
   "Add your emoji as a param here"
   [{: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)]
+  (let [numeric-value (int clicks)]
     [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)))}
+      :style               (style/reaction neutral?)}
      [icons/icon emoji
       {:no-color true
        :size     16}]
-     [quo2.text/text
+     [text/text
       {:size            :paragraph-2
        :weight          :semi-bold
-       :color           text-color
        :flex-direction  :row
        :align-items     :center
        :justify-content :center}
-      (if clicks-positive?
-        (str " " numeric-value)
-        "")]]))
+      (when (pos? numeric-value)
+        (str " " numeric-value))]]))

src/quo2/components/reactions/style.cljs

@@ -0,0 +1,34 @@
+(ns quo2.components.reactions.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def reaction-styling
+  {:flex-direction     :row
+   :justify-content    :center
+   :align-items        :center
+   :padding-horizontal 8
+   :border-radius      8
+   :height             24})
+
+(defn add-reaction
+  []
+  (merge reaction-styling
+         {:padding-horizontal 9
+          :border-width       1
+          :border-color       (colors/theme-colors colors/neutral-30 colors/neutral-70)}))
+
+(defn reaction
+  [neutral?]
+  (merge reaction-styling
+         (cond->
+           {:background-color (colors/theme-colors (if neutral?
+                                                     colors/neutral-30
+                                                     :transparent)
+                                                   (if neutral?
+                                                     colors/neutral-70
+                                                     :transparent))}
+           (and (colors/dark?) (not neutral?))
+           (assoc :border-color colors/neutral-70
+                  :border-width 1)
+           (and (not (colors/dark?)) (not neutral?))
+           (assoc :border-color colors/neutral-30
+                  :border-width 1))))

src/quo2/components/record_audio/record_audio/style.cljs

@@ -0,0 +1,228 @@
+(ns quo2.components.record-audio.record-audio.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+(defn animated-circle
+  [scale opacity color]
+  (reanimated/apply-animations-to-style
+   {:transform [{:scale scale}]
+    :opacity   opacity}
+   {:width           56
+    :height          56
+    :border-width    1
+    :border-color    color
+    :border-radius   28
+    :position        :absolute
+    :justify-content :center
+    :align-items     :center
+    :z-index         0}))
+
+(defn record-button-big-container
+  [translate-x translate-y opacity]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translateY translate-y}
+                {:translateX translate-x}]
+    :opacity   opacity}
+   {:position        :absolute
+    :bottom          0
+    :right           0
+    :width           96
+    :height          96
+    :align-items     :center
+    :justify-content :center
+    :z-index         0}))
+
+(defn record-button-big-body
+  [button-color]
+  {:width            56
+   :height           56
+   :border-radius    28
+   :justify-content  :center
+   :align-items      :center
+   :background-color button-color
+   :overflow         :hidden})
+
+(defn record-button-big-red-overlay
+  [red-overlay-opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity red-overlay-opacity}
+   {:position         :absolute
+    :top              0
+    :left             0
+    :right            0
+    :bottom           0
+    :background-color colors/danger-50}))
+
+(defn record-button-big-gray-overlay
+  [gray-overlay-opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity gray-overlay-opacity}
+   {:position         :absolute
+    :top              0
+    :left             0
+    :right            0
+    :bottom           0
+    :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80)}))
+
+(defn record-button-big-icon-container
+  [icon-opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity icon-opacity}
+   {}))
+
+(def stop-icon
+  {:width            13
+   :height           13
+   :border-radius    4
+   :background-color colors/white})
+
+(defn send-button-container
+  [opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity}
+   {:justify-content :center
+    :align-items     :center
+    :position        :absolute
+    :width           56
+    :height          56
+    :top             0
+    :right           20}))
+
+(defn send-button-connector
+  [opacity width height border-radius-first-half border-radius-second-half]
+  (reanimated/apply-animations-to-style
+   {:opacity                    opacity
+    :width                      width
+    :height                     height
+    :border-bottom-left-radius  border-radius-second-half
+    :border-top-left-radius     border-radius-first-half
+    :border-top-right-radius    border-radius-first-half
+    :border-bottom-right-radius border-radius-second-half}
+   {:justify-content  :center
+    :align-items      :center
+    :align-self       :center
+    :background-color colors/primary-50
+    :z-index          0}))
+
+(defn send-button
+  [translate-y opacity]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translateY translate-y}]
+    :opacity   opacity}
+   {:justify-content  :center
+    :align-items      :center
+    :background-color colors/primary-50
+    :width            32
+    :height           32
+    :border-radius    16
+    :position         :absolute
+    :top              0
+    :right            32
+    :z-index          10}))
+
+(def send-icon-container
+  {:z-index 10})
+
+(defn lock-button-container
+  [opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity}
+   {:transform       [{:rotate "45deg"}]
+    :justify-content :center
+    :align-items     :center
+    :position        :absolute
+    :width           56
+    :height          56
+    :top             20
+    :left            20}))
+
+(defn lock-button-connector
+  [opacity width height border-radius-first-half border-radius-second-half]
+  (reanimated/apply-animations-to-style
+   {:opacity                    opacity
+    :width                      width
+    :height                     height
+    :border-bottom-left-radius  border-radius-first-half
+    :border-top-left-radius     border-radius-first-half
+    :border-top-right-radius    border-radius-second-half
+    :border-bottom-right-radius border-radius-second-half}
+   {:justify-content  :center
+    :align-items      :center
+    :align-self       :center
+    :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80)
+    :overflow         :hidden}))
+
+(defn lock-button
+  [translate-x-y opacity]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translateX translate-x-y}
+                {:translateY translate-x-y}]
+    :opacity   opacity}
+   {:width            32
+    :height           32
+    :justify-content  :center
+    :align-items      :center
+    :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80)
+    :border-radius    16
+    :position         :absolute
+    :top              24
+    :left             24
+    :overflow         :hidden
+    :z-index          12}))
+
+(defn delete-button-container
+  [opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity}
+   {:justify-content :center
+    :align-items     :center
+    :position        :absolute
+    :width           56
+    :height          56
+    :bottom          20
+    :left            0}))
+
+(defn delete-button-connector
+  [opacity width height border-radius-first-half border-radius-second-half]
+  (reanimated/apply-animations-to-style
+   {:opacity                    opacity
+    :width                      width
+    :height                     height
+    :border-bottom-left-radius  border-radius-first-half
+    :border-top-left-radius     border-radius-first-half
+    :border-top-right-radius    border-radius-second-half
+    :border-bottom-right-radius border-radius-second-half}
+   {:justify-content  :center
+    :align-items      :center
+    :align-self       :center
+    :background-color colors/danger-50
+    :z-index          0}))
+
+(defn delete-button
+  [translate-x opacity]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translateX translate-x}]
+    :opacity   opacity}
+   {:width            32
+    :height           32
+    :justify-content  :center
+    :align-items      :center
+    :background-color colors/danger-50
+    :border-radius    16
+    :position         :absolute
+    :top              76
+    :left             0
+    :z-index          11}))
+
+(defn record-button-container
+  [opacity]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity}
+   {:margin-bottom 32
+    :margin-right  32}))
+
+(def input-container
+  {:width           140
+   :height          140
+   :align-items     :flex-end
+   :justify-content :flex-end})

src/quo2/components/record_audio/record_audio/view.cljs

@@ -0,0 +1,767 @@
+(ns quo2.components.record-audio.record-audio.view
+  (:require [cljs-bean.core :as bean]
+            [oops.core :as oops]
+            [quo.react :refer [effect! memo]]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.icon :as icons]
+            [quo2.components.record-audio.record-audio.style :as style]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [reagent.core :as reagent]
+            [status-im.utils.utils :as utils]))
+
+(def ^:private scale-to-each 1.8)
+(def ^:private scale-to-total 2.6)
+(def ^:private scale-padding 0.16)
+(def ^:private opacity-from-lock 1)
+(def ^:private opacity-from-default 0.5)
+(def ^:private signal-anim-duration 3900)
+(def ^:private signal-anim-duration-2 1950)
+
+(def ^:private animated-ring
+  (reagent/adapt-react-class
+   (memo
+    (fn [props]
+      (let [{:keys [scale opacity color]} (bean/bean props)]
+        (reagent/as-element
+         [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))
+
+(def ^:private record-button-area-big
+  {:width  56
+   :height 56
+   :x      64
+   :y      64})
+
+(def ^:private record-button-area
+  {:width  48
+   :height 48
+   :x      68
+   :y      68})
+
+(defn- delete-button-area
+  [active?]
+  {:width  (if active? 72 82)
+   :height 56
+   :x      (if active? -16 -32)
+   :y      (if active? 64 70)})
+
+(defn- lock-button-area
+  [active?]
+  {:width  (if active? 72 100)
+   :height (if active? 72 102)
+   :x      -32
+   :y      -32})
+
+(defn- send-button-area
+  [active?]
+  {:width  56
+   :height (if active? 72 92)
+   :x      68
+   :y      (if active? -16 -32)})
+
+(defn- touch-inside-area?
+  [{:keys [location-x location-y ignore-min-y? ignore-max-y? ignore-min-x? ignore-max-x?]}
+   {:keys [width height x y]}]
+  (let [max-x (+ x width)
+        max-y (+ y height)]
+    (and
+     (and
+      (or ignore-min-x? (>= location-x x))
+      (or ignore-max-x? (<= location-x max-x)))
+     (and
+      (or ignore-min-y? (>= location-y y))
+      (or ignore-max-y? (<= location-y max-y))))))
+
+(def record-audio-worklets (js/require "../src/js/record_audio_worklets.js"))
+
+(defn- ring-scale
+  [scale substract]
+  (.ringScale ^js record-audio-worklets
+              scale
+              substract))
+
+(defn- record-button-big
+  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
+   record-button-at-initial-position? locked? reviewing-audio? recording-timer recording-length-ms
+   clear-timeout touch-active?]
+  [:f>
+   (fn []
+     (let [scale                (reanimated/use-shared-value 1)
+           opacity              (reanimated/use-shared-value 0)
+           opacity-from         (if @ready-to-lock? opacity-from-lock opacity-from-default)
+           animations           (map
+                                 (fn [index]
+                                   (let [ring-scale (ring-scale scale (* scale-padding index))]
+                                     {:scale   ring-scale
+                                      :opacity (reanimated/interpolate ring-scale
+                                                                       [1 scale-to-each]
+                                                                       [opacity-from 0])}))
+                                 (range 0 5))
+           rings-color          (cond
+                                  @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
+                                                                         colors/neutral-80)
+                                  @ready-to-delete? colors/danger-50
+                                  :else             colors/primary-50)
+           translate-y          (reanimated/use-shared-value 0)
+           translate-x          (reanimated/use-shared-value 0)
+           button-color         colors/primary-50
+           icon-color           (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
+           icon-opacity         (reanimated/use-shared-value 1)
+           red-overlay-opacity  (reanimated/use-shared-value 0)
+           gray-overlay-opacity (reanimated/use-shared-value 0)
+           complete-animation   (fn []
+                                  (cond
+                                    (and @ready-to-lock? (not @record-button-is-animating?))
+                                    (do
+                                      (reset! locked? true)
+                                      (reset! ready-to-lock? false))
+                                    (and (not @locked?) (not @reviewing-audio?))
+                                    (do
+                                      (reset! recording? false)
+                                      (reset! ready-to-send? false)
+                                      (reset! ready-to-delete? false)
+                                      (reset! ready-to-lock? false)
+                                      (utils/clear-interval @recording-timer)
+                                      (reset! recording-length-ms 0))))
+           start-animation      (fn []
+                                  (reanimated/set-shared-value opacity 1)
+                                  (reanimated/animate-shared-value-with-timing scale
+                                                                               2.6
+                                                                               signal-anim-duration
+                                                                               :linear)
+                                  ;; TODO: Research if we can implement this with withSequence method
+                                  ;; from Reanimated 2
+                                  ;; GitHub issue [#14561]:
+                                  ;; https://github.com/status-im/status-mobile/issues/14561
+                                  (reset! clear-timeout
+                                    (utils/set-timeout
+                                     #(do (reanimated/set-shared-value scale scale-to-each)
+                                          (reanimated/animate-shared-value-with-delay-repeat
+                                           scale
+                                           scale-to-total
+                                           signal-anim-duration-2
+                                           :linear
+                                           0
+                                           -1))
+                                     signal-anim-duration)))
+           stop-animation       (fn []
+                                  (reanimated/set-shared-value opacity 0)
+                                  (reanimated/cancel-animation scale)
+                                  (reanimated/set-shared-value scale 1)
+                                  (when @clear-timeout (utils/clear-timeout @clear-timeout)))
+           start-y-animation    (fn []
+                                  (reset! record-button-at-initial-position? false)
+                                  (reset! record-button-is-animating? true)
+                                  (reanimated/animate-shared-value-with-timing translate-y
+                                                                               -64
+                                                                               250
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-delay icon-opacity
+                                                                              0       33.33
+                                                                              :linear 76.66)
+                                  (utils/set-timeout (fn []
+                                                       (reset! record-button-is-animating? false)
+                                                       (when-not @touch-active? (complete-animation)))
+                                                     250))
+           reset-y-animation    (fn []
+                                  (reanimated/animate-shared-value-with-timing translate-y
+                                                                               0
+                                                                               300
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-timing icon-opacity
+                                                                               1
+                                                                               500
+                                                                               :linear)
+                                  (utils/set-timeout (fn []
+                                                       (reset! record-button-at-initial-position? true))
+                                                     500))
+           start-x-animation    (fn []
+                                  (reset! record-button-at-initial-position? false)
+                                  (reset! record-button-is-animating? true)
+                                  (reanimated/animate-shared-value-with-timing translate-x
+                                                                               -64
+                                                                               250
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-delay icon-opacity
+                                                                              0       33.33
+                                                                              :linear 76.66)
+                                  (reanimated/animate-shared-value-with-timing red-overlay-opacity
+                                                                               1
+                                                                               33.33
+                                                                               :linear)
+                                  (utils/set-timeout (fn []
+                                                       (reset! record-button-is-animating? false)
+                                                       (when-not @touch-active? (complete-animation)))
+                                                     250))
+           reset-x-animation    (fn []
+                                  (reanimated/animate-shared-value-with-timing translate-x
+                                                                               0
+                                                                               300
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-timing icon-opacity
+                                                                               1
+                                                                               500
+                                                                               :linear)
+                                  (reanimated/animate-shared-value-with-timing red-overlay-opacity
+                                                                               0
+                                                                               100
+                                                                               :linear)
+                                  (utils/set-timeout (fn []
+                                                       (reset! record-button-at-initial-position? true))
+                                                     500))
+           start-x-y-animation  (fn []
+                                  (reset! record-button-at-initial-position? false)
+                                  (reset! record-button-is-animating? true)
+                                  (reanimated/animate-shared-value-with-timing translate-y
+                                                                               -44
+                                                                               200
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-timing translate-x
+                                                                               -44
+                                                                               200
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-delay icon-opacity
+                                                                              0       33.33
+                                                                              :linear 33.33)
+                                  (reanimated/animate-shared-value-with-timing gray-overlay-opacity
+                                                                               1
+                                                                               33.33
+                                                                               :linear)
+                                  (utils/set-timeout (fn []
+                                                       (reset! record-button-is-animating? false)
+                                                       (when-not @touch-active? (complete-animation)))
+                                                     200))
+           reset-x-y-animation  (fn []
+                                  (reanimated/animate-shared-value-with-timing translate-y
+                                                                               0
+                                                                               300
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-timing translate-x
+                                                                               0
+                                                                               300
+                                                                               :easing1)
+                                  (reanimated/animate-shared-value-with-timing icon-opacity
+                                                                               1
+                                                                               500
+                                                                               :linear)
+                                  (reanimated/animate-shared-value-with-timing gray-overlay-opacity
+                                                                               0
+                                                                               800
+                                                                               :linear)
+                                  (utils/set-timeout (fn []
+                                                       (reset! record-button-at-initial-position? true))
+                                                     800))]
+       (effect! #(cond
+                   @recording?
+                   (start-animation)
+                   (not @ready-to-lock?)
+                   (stop-animation))
+                [@recording?])
+       (effect! #(if @ready-to-lock?
+                   (start-x-y-animation)
+                   (reset-x-y-animation))
+                [@ready-to-lock?])
+       (effect! #(if @ready-to-send?
+                   (start-y-animation)
+                   (reset-y-animation))
+                [@ready-to-send?])
+       (effect! #(if @ready-to-delete?
+                   (start-x-animation)
+                   (reset-x-animation))
+                [@ready-to-delete?])
+       [reanimated/view
+        {:style          (style/record-button-big-container translate-x translate-y opacity)
+         :pointer-events :none}
+        [:<>
+         (map-indexed
+          (fn [id animation]
+            ^{:key id}
+            [animated-ring
+             {:scale   (:scale animation)
+              :opacity (:opacity animation)
+              :color   rings-color}])
+          animations)]
+        [rn/view {:style (style/record-button-big-body button-color)}
+         [reanimated/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}]
+         [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}]
+         [reanimated/view {:style (style/record-button-big-icon-container icon-opacity)}
+          (if @locked?
+            [rn/view {:style style/stop-icon}]
+            [icons/icon :i/audio {:color icon-color}])]]]))])
+
+(defn- send-button
+  [recording? ready-to-send? reviewing-audio?]
+  [:f>
+   (fn []
+     (let [opacity                   (reanimated/use-shared-value 0)
+           translate-y               (reanimated/use-shared-value 20)
+           connector-opacity         (reanimated/use-shared-value 0)
+           width                     (reanimated/use-shared-value 12)
+           height                    (reanimated/use-shared-value 24)
+           border-radius-first-half  (reanimated/use-shared-value 16)
+           border-radius-second-half (reanimated/use-shared-value 8)
+           start-y-animation         (fn []
+                                       (reanimated/animate-shared-value-with-delay translate-y
+                                                                                   12      50
+                                                                                   :linear 133.33)
+                                       (reanimated/animate-shared-value-with-delay connector-opacity
+                                                                                   1        0
+                                                                                   :easing1 93.33)
+                                       (reanimated/animate-shared-value-with-delay width
+                                                                                   56       83.33
+                                                                                   :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay height
+                                                                                   56       83.33
+                                                                                   :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay
+                                        border-radius-first-half
+                                        28       83.33
+                                        :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay
+                                        border-radius-second-half
+                                        28       83.33
+                                        :easing1 80))
+           reset-y-animation         (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-y
+                                                                                    0
+                                                                                    100
+                                                                                    :linear)
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 12)
+                                       (reanimated/set-shared-value height 24)
+                                       (reanimated/set-shared-value border-radius-first-half 16)
+                                       (reanimated/set-shared-value border-radius-second-half 8))
+           fade-in-animation         (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-y
+                                                                                    0
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/animate-shared-value-with-timing opacity
+                                                                                    1
+                                                                                    200
+                                                                                    :linear))
+           fade-out-animation        (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-y
+                                                                                    (if @reviewing-audio?
+                                                                                      76
+                                                                                      20)
+                                                                                    200
+                                                                                    :linear)
+                                       (when-not @reviewing-audio?
+                                         (reanimated/animate-shared-value-with-timing opacity
+                                                                                      0
+                                                                                      200
+                                                                                      :linear))
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 24)
+                                       (reanimated/set-shared-value height 12)
+                                       (reanimated/set-shared-value border-radius-first-half 8)
+                                       (reanimated/set-shared-value border-radius-second-half 16))
+           fade-out-reset-animation  (fn []
+                                       (reanimated/animate-shared-value-with-timing opacity
+                                                                                    0
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/animate-shared-value-with-delay translate-y
+                                                                                   20      0
+                                                                                   :linear 200)
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 24)
+                                       (reanimated/set-shared-value height 12)
+                                       (reanimated/set-shared-value border-radius-first-half 8)
+                                       (reanimated/set-shared-value border-radius-second-half 16))]
+       (effect! #(if @recording?
+                   (fade-in-animation)
+                   (fade-out-animation))
+                [@recording?])
+       (effect! #(when-not @reviewing-audio?
+                   (fade-out-reset-animation))
+                [@reviewing-audio?])
+       (effect! #(cond
+                   @ready-to-send?
+                   (start-y-animation)
+                   @recording?     (reset-y-animation))
+                [@ready-to-send?])
+       [:<>
+        [reanimated/view {:style (style/send-button-container opacity)}
+         [reanimated/view
+          {:style (style/send-button-connector connector-opacity
+                                               width
+                                               height
+                                               border-radius-first-half
+                                               border-radius-second-half)}]]
+        [reanimated/view
+         {:style          (style/send-button translate-y opacity)
+          :pointer-events :none}
+         [icons/icon :i/arrow-up
+          {:color           colors/white
+           :size            20
+           :container-style style/send-icon-container}]]]))])
+
+(defn- lock-button
+  [recording? ready-to-lock? locked?]
+  [:f>
+   (fn []
+     (let [translate-x-y             (reanimated/use-shared-value 20)
+           opacity                   (reanimated/use-shared-value 0)
+           connector-opacity         (reanimated/use-shared-value 0)
+           width                     (reanimated/use-shared-value 24)
+           height                    (reanimated/use-shared-value 12)
+           border-radius-first-half  (reanimated/use-shared-value 8)
+           border-radius-second-half (reanimated/use-shared-value 8)
+           start-x-y-animation       (fn []
+                                       (reanimated/animate-shared-value-with-delay translate-x-y
+                                                                                   8       50
+                                                                                   :linear 116.66)
+                                       (reanimated/animate-shared-value-with-delay connector-opacity
+                                                                                   1        0
+                                                                                   :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay width
+                                                                                   56       83.33
+                                                                                   :easing1 63.33)
+                                       (reanimated/animate-shared-value-with-delay height
+                                                                                   56       83.33
+                                                                                   :easing1 63.33)
+                                       (reanimated/animate-shared-value-with-delay
+                                        border-radius-first-half
+                                        28       83.33
+                                        :easing1 63.33)
+                                       (reanimated/animate-shared-value-with-delay
+                                        border-radius-second-half
+                                        28       83.33
+                                        :easing1 63.33))
+           reset-x-y-animation       (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-x-y
+                                                                                    0
+                                                                                    100
+                                                                                    :linear)
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 24)
+                                       (reanimated/set-shared-value height 12)
+                                       (reanimated/set-shared-value border-radius-first-half 8)
+                                       (reanimated/set-shared-value border-radius-second-half 16))
+           fade-in-animation         (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-x-y
+                                                                                    0
+                                                                                    220
+                                                                                    :linear)
+                                       (reanimated/animate-shared-value-with-timing opacity
+                                                                                    1
+                                                                                    220
+                                                                                    :linear))
+           fade-out-animation        (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-x-y
+                                                                                    20
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/animate-shared-value-with-timing opacity
+                                                                                    0
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 24)
+                                       (reanimated/set-shared-value height 12)
+                                       (reanimated/set-shared-value border-radius-first-half 8)
+                                       (reanimated/set-shared-value border-radius-second-half 16))]
+       (effect! #(if @recording?
+                   (fade-in-animation)
+                   (fade-out-animation))
+                [@recording?])
+       (effect! #(cond
+                   @ready-to-lock?
+                   (start-x-y-animation)
+                   (and @recording? (not @locked?))
+                   (reset-x-y-animation))
+                [@ready-to-lock?])
+       (effect! #(if @locked?
+                   (fade-out-animation)
+                   (reset-x-y-animation))
+                [@locked?])
+       [:<>
+        [reanimated/view {:style (style/lock-button-container opacity)}
+         [reanimated/view
+          {:style (style/lock-button-connector connector-opacity
+                                               width
+                                               height
+                                               border-radius-first-half
+                                               border-radius-second-half)}]]
+        [reanimated/view
+         {:style          (style/lock-button translate-x-y opacity)
+          :pointer-events :none}
+         [icons/icon (if @ready-to-lock? :i/locked :i/unlocked)
+          {:color (colors/theme-colors colors/black colors/white)
+           :size  20}]]]))])
+
+(defn- delete-button
+  [recording? ready-to-delete?]
+  [:f>
+   (fn []
+     (let [opacity                   (reanimated/use-shared-value 0)
+           translate-x               (reanimated/use-shared-value 20)
+           connector-opacity         (reanimated/use-shared-value 0)
+           width                     (reanimated/use-shared-value 24)
+           height                    (reanimated/use-shared-value 12)
+           border-radius-first-half  (reanimated/use-shared-value 8)
+           border-radius-second-half (reanimated/use-shared-value 8)
+           start-x-animation         (fn []
+                                       (reanimated/animate-shared-value-with-delay translate-x
+                                                                                   12      50
+                                                                                   :linear 133.33)
+                                       (reanimated/animate-shared-value-with-delay connector-opacity
+                                                                                   1        0
+                                                                                   :easing1 93.33)
+                                       (reanimated/animate-shared-value-with-delay width
+                                                                                   56       83.33
+                                                                                   :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay height
+                                                                                   56       83.33
+                                                                                   :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay
+                                        border-radius-first-half
+                                        28       83.33
+                                        :easing1 80)
+                                       (reanimated/animate-shared-value-with-delay
+                                        border-radius-second-half
+                                        28       83.33
+                                        :easing1 80))
+           reset-x-animation         (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-x
+                                                                                    0
+                                                                                    100
+                                                                                    :linear)
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 24)
+                                       (reanimated/set-shared-value height 12)
+                                       (reanimated/set-shared-value border-radius-first-half 8)
+                                       (reanimated/set-shared-value border-radius-second-half 16))
+           fade-in-animation         (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-x
+                                                                                    0
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/animate-shared-value-with-timing opacity
+                                                                                    1
+                                                                                    200
+                                                                                    :linear))
+           fade-out-animation        (fn []
+                                       (reanimated/animate-shared-value-with-timing translate-x
+                                                                                    20
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/animate-shared-value-with-timing opacity
+                                                                                    0
+                                                                                    200
+                                                                                    :linear)
+                                       (reanimated/set-shared-value connector-opacity 0)
+                                       (reanimated/set-shared-value width 24)
+                                       (reanimated/set-shared-value height 12)
+                                       (reanimated/set-shared-value border-radius-first-half 8)
+                                       (reanimated/set-shared-value border-radius-second-half 16))]
+       (effect! #(if @recording?
+                   (fade-in-animation)
+                   (fade-out-animation))
+                [@recording?])
+       (effect! #(cond
+                   @ready-to-delete?
+                   (start-x-animation)
+                   @recording?
+                   (reset-x-animation))
+                [@ready-to-delete?])
+       [:<>
+        [reanimated/view {:style (style/delete-button-container opacity)}
+         [reanimated/view
+          {:style (style/delete-button-connector connector-opacity
+                                                 width
+                                                 height
+                                                 border-radius-first-half
+                                                 border-radius-second-half)}]]
+        [reanimated/view
+         {:style          (style/delete-button translate-x opacity)
+          :pointer-events :none}
+         [icons/icon :i/delete
+          {:color colors/white
+           :size  20}]]]))])
+
+(defn- record-button
+  [recording? reviewing-audio?]
+  [:f>
+   (fn []
+     (let [opacity        (reanimated/use-shared-value 1)
+           show-animation #(reanimated/set-shared-value opacity 1)
+           hide-animation #(reanimated/set-shared-value opacity 0)]
+       (effect! #(if (or @recording? @reviewing-audio?)
+                   (hide-animation)
+                   (show-animation))
+                [@recording? @reviewing-audio?])
+       [reanimated/view {:style (style/record-button-container opacity)}
+        [button/button
+         {:type                :outline
+          :size                32
+          :width               32
+          :accessibility-label :mic-button}
+         [icons/icon :i/audio {:color (colors/theme-colors colors/neutral-100 colors/white)}]]]))])
+
+(defn input-view
+  []
+  [:f>
+   (fn []
+     (let [recording?                         (reagent/atom false)
+           locked?                            (reagent/atom false)
+           ready-to-send?                     (reagent/atom false)
+           ready-to-lock?                     (reagent/atom false)
+           ready-to-delete?                   (reagent/atom false)
+           reviewing-audio?                   (reagent/atom false)
+           clear-timeout                      (atom nil)
+           record-button-at-initial-position? (atom true)
+           record-button-is-animating?        (atom false)
+           touch-active?                      (atom false)
+           recording-timer                    (atom nil)
+           recording-length-ms                (atom 0)
+           on-start-should-set-responder
+           (fn [^js e]
+             (when-not @locked?
+               (let [pressed-record-button? (touch-inside-area?
+                                             {:location-x    (oops/oget e "nativeEvent.locationX")
+                                              :location-y    (oops/oget e "nativeEvent.locationY")
+                                              :ignore-min-y? false
+                                              :ignore-max-y? false
+                                              :ignore-min-x? false
+                                              :ignore-max-x? false}
+                                             record-button-area)]
+                 (when-not @reviewing-audio?
+                   (reset! recording? pressed-record-button?)
+                   (when pressed-record-button?
+                     ;; TODO: By now we just track recording length, we need to add actual audio
+                     ;; recording logic
+                     ;; GitHub issue [#14558]: https://github.com/status-im/status-mobile/issues/14558
+                     (reset! recording-timer (utils/set-interval #(reset! recording-length-ms
+                                                                    (+ @recording-length-ms 500))
+                                                                 500))))
+                 (reset! touch-active? true)))
+             true)
+           on-responder-move
+           (fn [^js e]
+             (when-not @locked?
+               (let [location-x              (oops/oget e "nativeEvent.locationX")
+                     location-y              (oops/oget e "nativeEvent.locationY")
+                     page-x                  (oops/oget e "nativeEvent.pageX")
+                     page-y                  (oops/oget e "nativeEvent.pageY")
+                     moved-to-send-button?   (touch-inside-area?
+                                              {:location-x    location-x
+                                               :location-y    location-y
+                                               :ignore-min-y? true
+                                               :ignore-max-y? false
+                                               :ignore-min-x? false
+                                               :ignore-max-x? true}
+                                              (send-button-area @ready-to-send?))
+                     moved-to-delete-button? (touch-inside-area?
+                                              {:location-x    location-x
+                                               :location-y    location-y
+                                               :ignore-min-y? false
+                                               :ignore-max-y? true
+                                               :ignore-min-x? true
+                                               :ignore-max-x? false}
+                                              (delete-button-area @ready-to-delete?))
+                     moved-to-lock-button?   (touch-inside-area?
+                                              {:location-x    location-x
+                                               :location-y    location-y
+                                               :ignore-min-y? false
+                                               :ignore-max-y? false
+                                               :ignore-min-x? false
+                                               :ignore-max-x? false}
+                                              (lock-button-area @ready-to-lock?))
+                     moved-to-record-button? (and
+                                              (touch-inside-area?
+                                               {:location-x    location-x
+                                                :location-y    location-y
+                                                :ignore-min-y? false
+                                                :ignore-max-y? false
+                                                :ignore-min-x? false
+                                                :ignore-max-x? false}
+                                               record-button-area-big)
+                                              (not= location-x page-x)
+                                              (not= location-y page-y))]
+                 (cond
+                   (and
+                    (or
+                     (and moved-to-record-button? @ready-to-lock?)
+                     (and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?))
+                    (not @ready-to-delete?)
+                    (not @ready-to-send?)
+                    @recording?)
+                   (reset! ready-to-lock? moved-to-lock-button?)
+                   (and
+                    (or
+                     (and moved-to-record-button? @ready-to-delete?)
+                     (and moved-to-delete-button? @record-button-at-initial-position?))
+                    (not @ready-to-lock?)
+                    (not @ready-to-send?)
+                    @recording?)
+                   (reset! ready-to-delete? moved-to-delete-button?)
+                   (and
+                    (or
+                     (and moved-to-record-button? @ready-to-send?)
+                     (and moved-to-send-button? @record-button-at-initial-position?))
+                    (not @ready-to-lock?)
+                    (not @ready-to-delete?)
+                    @recording?)
+                   (reset! ready-to-send? moved-to-send-button?)))))
+           on-responder-release
+           (fn [^js e]
+             (let [on-record-button? (touch-inside-area?
+                                      {:location-x    (oops/oget e "nativeEvent.locationX")
+                                       :location-y    (oops/oget e "nativeEvent.locationY")
+                                       :ignore-min-y? false
+                                       :ignore-max-y? false
+                                       :ignore-min-x? false
+                                       :ignore-max-x? false}
+                                      (if @reviewing-audio? record-button-area record-button-area-big))]
+               (cond
+                 (and @reviewing-audio? on-record-button?)
+                 (reset! reviewing-audio? false)
+                 (and @ready-to-lock? (not @record-button-is-animating?))
+                 (do
+                   (reset! locked? true)
+                   (reset! ready-to-lock? false))
+                 (and (not @reviewing-audio?) on-record-button?)
+                 (do
+                   (when (>= @recording-length-ms 500) (reset! reviewing-audio? true))
+                   (reset! locked? false)
+                   (reset! recording? false)
+                   (reset! ready-to-lock? false)
+                   (utils/clear-interval @recording-timer)
+                   (reset! recording-length-ms 0))
+                 (and (not @locked?) (not @reviewing-audio?) (not @record-button-is-animating?))
+                 (do
+                   (reset! recording? false)
+                   (reset! ready-to-send? false)
+                   (reset! ready-to-delete? false)
+                   (reset! ready-to-lock? false)
+                   (utils/clear-interval @recording-timer)
+                   (reset! recording-length-ms 0))))
+             (reset! touch-active? false))]
+       (fn []
+         [rn/view
+          {:style                         style/input-container
+           :pointer-events                :box-only
+           :on-start-should-set-responder on-start-should-set-responder
+           :on-responder-move             on-responder-move
+           :on-responder-release          on-responder-release}
+          [delete-button recording? ready-to-delete?]
+          [lock-button recording? ready-to-lock? locked?]
+          [send-button recording? ready-to-send? reviewing-audio?]
+          [record-button-big
+           recording?
+           ready-to-send?
+           ready-to-lock?
+           ready-to-delete?
+           record-button-is-animating?
+           record-button-at-initial-position?
+           locked?
+           reviewing-audio?
+           recording-timer
+           recording-length-ms
+           clear-timeout
+           touch-active?]
+          [record-button recording? reviewing-audio?]])))])

src/quo2/components/selectors/__tests__/selectors_component_spec.cljs

@@ -28,57 +28,57 @@
    (rtl/render (reagent/as-element [selectors/radio opts]))))
 
 (js/global.test "default render of toggle component"
-                (fn []
-                  (render-toggle)
-                  (-> (js/expect (rtl/screen.getByTestId "toggle-component"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-toggle)
+    (-> (js/expect (rtl/screen.getByTestId "toggle-component"))
+        (.toBeTruthy))))
 
 (js/global.test "toggle component on change is working"
-                (let [mock-fn (js/jest.fn)]
-                  (fn []
-                    (render-toggle {:on-change mock-fn})
-                    (rtl/fireEvent.press (rtl/screen.getByTestId "toggle-component"))
-                    (-> (js/expect mock-fn)
-                        (.toHaveBeenCalledTimes 1)))))
+  (let [mock-fn (js/jest.fn)]
+    (fn []
+      (render-toggle {:on-change mock-fn})
+      (rtl/fireEvent.press (rtl/screen.getByTestId "toggle-component"))
+      (-> (js/expect mock-fn)
+          (.toHaveBeenCalledTimes 1)))))
 
 (js/global.test "default render of radio component"
-                (fn []
-                  (render-radio)
-                  (-> (js/expect (rtl/screen.getByTestId "radio-component"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-radio)
+    (-> (js/expect (rtl/screen.getByTestId "radio-component"))
+        (.toBeTruthy))))
 
 (js/global.test "radio component on change is working"
-                (let [mock-fn (js/jest.fn)]
-                  (fn []
-                    (render-radio {:on-change mock-fn})
-                    (rtl/fireEvent.press (rtl/screen.getByTestId "radio-component"))
-                    (-> (js/expect mock-fn)
-                        (.toHaveBeenCalledTimes 1)))))
+  (let [mock-fn (js/jest.fn)]
+    (fn []
+      (render-radio {:on-change mock-fn})
+      (rtl/fireEvent.press (rtl/screen.getByTestId "radio-component"))
+      (-> (js/expect mock-fn)
+          (.toHaveBeenCalledTimes 1)))))
 
 (js/global.test "default render of checkbox component"
-                (fn []
-                  (render-checkbox)
-                  (-> (js/expect (rtl/screen.getByTestId "checkbox-component"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-checkbox)
+    (-> (js/expect (rtl/screen.getByTestId "checkbox-component"))
+        (.toBeTruthy))))
 
 (js/global.test "checkbox component on change is working"
-                (let [mock-fn (js/jest.fn)]
-                  (fn []
-                    (render-checkbox {:on-change mock-fn})
-                    (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-component"))
-                    (-> (js/expect mock-fn)
-                        (.toHaveBeenCalledTimes 1)))))
+  (let [mock-fn (js/jest.fn)]
+    (fn []
+      (render-checkbox {:on-change mock-fn})
+      (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-component"))
+      (-> (js/expect mock-fn)
+          (.toHaveBeenCalledTimes 1)))))
 
 (js/global.test "default render of checkbox-prefill component"
-                (fn []
-                  (render-checkbox-prefill)
-                  (-> (js/expect (rtl/screen.getByTestId "checkbox-prefill-component"))
-                      (.toBeTruthy))))
+  (fn []
+    (render-checkbox-prefill)
+    (-> (js/expect (rtl/screen.getByTestId "checkbox-prefill-component"))
+        (.toBeTruthy))))
 
 (js/global.test "checkbox-prefill component on change is working"
-                (let [mock-fn (js/jest.fn)]
-                  (fn []
-                    (render-checkbox-prefill {:on-change mock-fn})
-                    (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-prefill-component"))
-                    (-> (js/expect mock-fn)
-                        (.toHaveBeenCalledTimes 1)))))
+  (let [mock-fn (js/jest.fn)]
+    (fn []
+      (render-checkbox-prefill {:on-change mock-fn})
+      (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-prefill-component"))
+      (-> (js/expect mock-fn)
+          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/selectors/disclaimer.cljs

@@ -1,32 +0,0 @@
-(ns quo2.components.selectors.disclaimer
-  (:require [quo2.components.markdown.text :as text]
-            [quo2.components.selectors.selectors :as selectors]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
-
-(defn disclaimer
-  [{:keys [on-change accessibility-label container-style]} label]
-  [rn/view
-   {:style
-    (merge
-     container-style
-     {:flex             1
-      :flex-direction   :row
-      :background-color (colors/theme-colors
-                         colors/neutral-5
-                         colors/neutral-80-opa-40)
-      :padding          11
-      :align-self       :stretch
-      :border-radius    12
-      :border-width     1
-      :border-color     (colors/theme-colors
-                         colors/neutral-20
-                         colors/neutral-70)})}
-   [selectors/checkbox
-    {:on-change on-change}]
-   [text/text
-    {:accessibility-label accessibility-label
-     :size                :paragraph-2
-     :style               {:margin-left 8}}
-    label]])
-

src/quo2/components/selectors/disclaimer/style.cljs

@@ -0,0 +1,16 @@
+(ns quo2.components.selectors.disclaimer.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  []
+  {:flex             1
+   :flex-direction   :row
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)
+   :padding          11
+   :align-self       :stretch
+   :border-radius    12
+   :border-width     1
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-70)})
+
+(def text
+  {:margin-left 8})

src/quo2/components/selectors/disclaimer/view.cljs

@@ -0,0 +1,17 @@
+(ns quo2.components.selectors.disclaimer.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.selectors.disclaimer.style :as style]
+            [quo2.components.selectors.selectors :as selectors]
+            [react-native.core :as rn]))
+
+(defn view
+  [{:keys [on-change accessibility-label container-style]} label]
+  [rn/view
+   {:style (merge container-style (style/container))}
+   [selectors/checkbox
+    {:accessibility-label accessibility-label
+     :on-change           on-change}]
+   [text/text
+    {:size  :paragraph-2
+     :style style/text}
+    label]])

src/quo2/components/selectors/filter/component_spec.cljs

@@ -0,0 +1,16 @@
+(ns quo2.components.selectors.filter.component-spec
+  (:require [quo2.components.selectors.filter.view :as quo]
+            [test-helpers.component :as h]))
+
+(h/describe "selector filter component"
+  (h/test "renders component"
+    (h/render [quo/view])
+    (-> (js/expect (h/get-by-label-text :selector-filter))
+        (.toBeTruthy)))
+
+  (h/test "calls custom event handler when on-press-out is triggered"
+    (let [on-press-out-mock (js/jest.fn)]
+      (h/render [quo/view {:on-press-out on-press-out-mock}])
+      (h/fire-event :press-out (h/get-by-label-text :selector-filter))
+      (-> (js/expect on-press-out-mock)
+          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/selectors/filter/style.cljs

@@ -0,0 +1,60 @@
+(ns quo2.components.selectors.filter.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container-default
+  {:width           32
+   :height          32
+   :border-radius   10
+   :align-items     :center
+   :justify-content :center
+   :padding         6})
+
+(defn container-border-color
+  [pressed? blur? override-theme]
+  (let [dark? (= :dark override-theme)]
+    (cond
+      (and (not pressed?) (not dark?) (not blur?))
+      colors/neutral-20
+
+      (and (not pressed?) dark? (not blur?))
+      colors/neutral-80
+
+      (and pressed? (not dark?) blur?)
+      colors/neutral-80-opa-20
+
+      (or (and pressed? (not dark?) (not blur?))
+          (and (not pressed?) (not dark?) blur?))
+      colors/neutral-80-opa-10
+
+      (or (and pressed? dark? (not blur?))
+          (and (not pressed?) dark? blur?)
+          (and pressed? dark? blur?))
+      colors/white-opa-10
+
+      :else
+      nil)))
+
+(defn container-background-color
+  [pressed? override-theme]
+  (when pressed?
+    (if (= :dark override-theme)
+      colors/primary-60
+      colors/primary-50)))
+
+(defn container-outer
+  [pressed? override-theme]
+  (merge container-default
+         {:background-color (container-background-color pressed? override-theme)}))
+
+(defn container-inner
+  [pressed? blur? override-theme]
+  (merge container-default
+         {:border-width 1
+          :border-color (container-border-color pressed? blur? override-theme)}))
+
+(defn icon-color
+  [pressed? override-theme]
+  (if (and (not pressed?)
+           (= :light override-theme))
+    colors/neutral-100
+    colors/white))

src/quo2/components/selectors/filter/view.cljs

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

src/quo2/components/selectors/selectors.cljs

@@ -2,7 +2,9 @@
   (:require [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.components.selectors.styles :as style]))
+
 
 (defn- get-color
   [checked? disabled? blurred-background?]
@@ -66,6 +68,7 @@
                      (colors/alpha colors/neutral-100 (if disabled? 0.3 1))
                      (colors/alpha colors/white (if disabled? 0.3 1)))}]])]])))
 
+
 (defn checkbox
   [{:keys [default-checked?]}]
   (let [checked? (reagent/atom (or default-checked? false))]
@@ -107,6 +110,34 @@
              {:size  20
               :color colors/white}]])]]])))
 
+;; TODO (Omar): issue https://github.com/status-im/status-mobile/issues/14681
+;(defn checkbox
+;  [{:keys [default-checked?]}]
+;  (let [checked? (reagent/atom (or default-checked? false))]
+;    @(reagent/track
+;      (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 20
+;                    :width  20})}
+;          [rn/view
+;           {:style               (style/checkbox-toggle checked? disabled? blurred-background?)
+;            :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
+;            :accessibility-role  :checkbox
+;            :testID              "checkbox-component"}
+;           (when @checked?
+;             [rn/view
+;              {:style
+;               {:height 20
+;                :width  20}}
+;              [icons/icon :i/check-small
+;               {:size  20
+;                :color colors/white}]])]]])
+;      checked?)))
+
 (defn radio
   [{:keys [default-checked?]}]
   (let [checked? (reagent/atom (or default-checked? false))]
@@ -120,7 +151,9 @@
                                 :width            20
                                 :border-radius    20
                                 :border-width     1
-                                :border-color     (get-color @checked? disabled? blurred-background?)
+                                :border-color     (style/get-color @checked?
+                                                                   disabled?
+                                                                   blurred-background?)
                                 :background-color (when-not blurred-background?
                                                     (colors/theme-colors colors/white
                                                                          (colors/alpha colors/neutral-80
@@ -134,7 +167,7 @@
           {:margin-left      :auto
            :height           14
            :width            14
-           :background-color (when @checked? (get-color @checked? disabled? blurred-background?))
+           :background-color (when @checked? (style/get-color @checked? disabled? blurred-background?))
            :border-radius    20
            :margin-right     :auto
            :margin-top       :auto
@@ -152,7 +185,9 @@
                                {:height           20
                                 :width            30
                                 :border-radius    20
-                                :background-color (get-color @checked? disabled? blurred-background?)})
+                                :background-color (style/get-color @checked?
+                                                                   disabled?
+                                                                   blurred-background?)})
          :accessibility-label (str "toggle-" (if @checked? "on" "off"))
          :accessibility-role  :checkbox
          :testID              "toggle-component"}

src/quo2/components/selectors/styles.cljs

@@ -0,0 +1,41 @@
+(ns quo2.components.selectors.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(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)))))
+
+(defn checkbox-toggle
+  [checked? disabled? blurred-background?]
+  {:flex             1
+   :border-radius    6
+   :border-width     (if @checked? 0 1)
+   :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? blurred-background?))})

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

@@ -0,0 +1,71 @@
+(ns quo2.components.settings.accounts.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def card
+  {:position      :relative
+   :padding       8
+   :border-radius 16
+   :height        160
+   :width         160})
+
+(defn background-top
+  [custom-color]
+  {:position                :absolute
+   :top                     0
+   :border-top-left-radius  16
+   :border-top-right-radius 16
+   :width                   160
+   :height                  64
+   :background-color        (-> colors/customization
+                                (get-in [custom-color 50])
+                                (colors/alpha 0.2))})
+
+(defn background-bottom
+  []
+  {:position         :absolute
+   :top              40
+   :border-radius    16
+   :width            160
+   :height           120
+   :background-color (colors/theme-colors
+                      colors/white
+                      colors/neutral-90)})
+
+(defn avatar-border
+  []
+  {:margin          2
+   :justify-content :center
+   :align-items     :center
+   :width           52
+   :height          52
+   :border-radius   14
+   :border-width    2
+   :border-color    (colors/theme-colors
+                     colors/white
+                     colors/neutral-90)})
+
+(def menu-button-container
+  {:justify-content :center
+   :align-items     :center
+   :align-self      :flex-start})
+(defn menu-button-color
+  []
+  {:background-color (colors/theme-colors
+                      colors/white-opa-40
+                      colors/neutral-80-opa-40)})
+
+(defn address-text
+  []
+  {:color (colors/theme-colors
+           colors/neutral-50
+           colors/neutral-40)})
+
+(def card-top
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between})
+
+(def card-bottom
+  {:flex              1
+   :margin-horizontal 4
+   :margin-top        4})

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

@@ -0,0 +1,46 @@
+(ns quo2.components.settings.accounts.view
+  (:require [quo2.components.avatars.account-avatar :as account-avatar]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.settings.accounts.style :as style]
+            [react-native.core :as rn]))
+
+(defn card-background
+  [{:keys [custom-color]}]
+  [:<>
+   [rn/view {:style (style/background-top custom-color)}]
+   [rn/view {:style (style/background-bottom)}]])
+
+(defn avatar
+  [avatar-props]
+  [rn/view {:style (style/avatar-border)}
+   [account-avatar/account-avatar (assoc avatar-props :size 48)]])
+
+(defn menu-button
+  [{:keys [on-press]}]
+  [rn/view {:style style/menu-button-container}
+   [button/button
+    {:style    (style/menu-button-color)
+     :type     :gray
+     :icon     true
+     :size     24
+     :on-press on-press}
+    :i/more]])
+
+(defn account
+  [{:keys [account-name account-address avatar-icon custom-color on-press-menu]}]
+  [rn/view {:style style/card}
+   [card-background {:custom-color custom-color}]
+   [rn/view {:style style/card-top}
+    [avatar
+     {:color custom-color
+      :icon  avatar-icon}]
+    [menu-button {:on-press on-press-menu}]]
+   [rn/view {:style style/card-bottom}
+    [text/text {:size :paragraph-1 :weight :semi-bold}
+     account-name]
+    [text/text
+     {:style  (style/address-text)
+      :size   :paragraph-2
+      :weight :medium}
+     account-address]]])

src/quo2/components/settings/privacy_option.cljs

@@ -0,0 +1,67 @@
+(ns quo2.components.settings.privacy-option
+  (:require [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.selectors.selectors :as selectors]
+            [quo2.components.settings.style :as style]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+(defn- bullet
+  []
+  [rn/view {:style style/bullet-container}
+   [rn/view {:style (style/bullet)}]])
+
+(defn- unordered-list
+  [container-style list-items]
+  [rn/view {:style (merge style/list-container container-style)}
+   (for [item list-items]
+     ^{:key (hash item)}
+     [rn/view {:style style/list-item}
+      [bullet]
+      [text/text {:size :paragraph-2} item]])])
+
+(defn- card-footer
+  [{:keys [active? label on-toggle]}]
+  [rn/touchable-without-feedback
+   [rn/view {:style (style/card-footer)}
+    [rn/view {:style style/card-footer-label-container}
+     [text/text {:size :paragraph-2} label]]
+    [rn/view {:style style/card-footer-toggle-container}
+     [selectors/toggle
+      {:disabled? (not active?)
+       :on-change on-toggle}]]]])
+
+(defn- selection-indicator
+  [active?]
+  [rn/view {:style (style/selection-indicator-container active?)}
+   [rn/view {:style (style/selection-indicator active?)}]])
+
+(defn- card-header
+  [{:keys [icon label active?]}]
+  [rn/view {:style style/card-header-container}
+   [icons/icon icon
+    {:size  20
+     :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
+   [rn/view {:style style/card-header-label-container}
+    [text/text {:weight :semi-bold} label]]
+   [selection-indicator active?]])
+
+(defn card
+  [{:keys [active? header footer list-items icon on-select on-toggle]
+    :or   {icon    :i/world
+           active? false}}]
+  [rn/touchable-without-feedback
+   {:on-press            on-select
+    :accessibility-label :privacy-option-card
+    :testID              :privacy-option-card}
+   [rn/view (style/privacy-option-card active?)
+    [card-header
+     {:active? active?
+      :icon    icon
+      :label   header}]
+    [unordered-list (when-not footer {:margin-bottom 8}) list-items]
+    (when footer
+      [card-footer
+       {:active?   active?
+        :label     footer
+        :on-toggle on-toggle}])]])

src/quo2/components/settings/style.cljs

@@ -0,0 +1,93 @@
+(ns quo2.components.settings.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def bullet-container
+  {:width        20
+   :height       20
+   :margin-right 8
+   :align-self   :flex-start})
+
+(defn bullet
+  []
+  {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
+   :border-radius    100
+   :width            8
+   :height           8
+   :position         :absolute
+   :left             6
+   :top              6})
+
+(def list-container
+  {:margin-right 12})
+
+(def list-item
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :padding-vertical   6
+   :padding-horizontal 12})
+
+(defn selection-indicator-container
+  [active?]
+  {:height        20
+   :width         20
+   :border-radius 20
+   :border-width  1
+   :border-color  (if active?
+                    (colors/theme-colors colors/primary-50 colors/primary-60)
+                    (colors/theme-colors colors/neutral-20 colors/neutral-80))})
+
+(defn selection-indicator
+  [active?]
+  {:margin-left      :auto
+   :height           14
+   :width            14
+   :background-color (if active?
+                       (colors/theme-colors colors/primary-50 colors/primary-60)
+                       (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
+   :border-radius    20
+   :margin-right     :auto
+   :margin-top       :auto
+   :margin-bottom    :auto})
+
+(def card-footer-label-container
+  {:flex        0.9
+   :margin-left 16})
+
+(def card-footer-toggle-container
+  {:flex              0.1
+   :margin-horizontal 12
+   :align-self        :center})
+
+(defn card-footer
+  []
+  {:flex              1
+   :flex-direction    :row
+   :justify-content   :space-between
+   :margin-horizontal 12
+   :margin-top        8
+   :margin-bottom     12
+   :padding-vertical  12
+   :border-radius     12
+   :border-width      1
+   :background-color  (colors/theme-colors colors/neutral-5 colors/neutral-90)
+   :border-color      (colors/theme-colors colors/neutral-10 colors/neutral-80)})
+
+(def card-header-container
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-top        12
+   :padding-bottom     8
+   :padding-horizontal 12})
+
+(def card-header-label-container
+  {:flex        1
+   :margin-left 4})
+
+(defn privacy-option-card
+  [active?]
+  {:border-radius 16
+   :border-width  1
+   :border-color  (if active?
+                    (colors/theme-colors colors/primary-50 colors/primary-60)
+                    (colors/theme-colors colors/neutral-10 colors/neutral-80))})

src/quo2/components/tabs/tabs.cljs

@@ -15,40 +15,19 @@
 (defn indicator
   []
   [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)}
+   {:accessibility-label :notification-dot
+    :style               {: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]])
 
-(defn tabs
-  [{:keys [default-active on-change style]}]
-  (let [active-tab-id (reagent/atom default-active)]
-    (fn [{:keys [data size] :or {size default-tab-size}}]
-      [rn/view (merge {:flex-direction :row} style)
-       (doall
-        (for [{:keys [label id notification-dot? accessibility-label]} data]
-          ^{:key id}
-          [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
-           (when notification-dot?
-             [indicator])
-           [tab/tab
-            {: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
   [{:keys [offset-x content-width layout-width max-fade-percentage]}]
   (let [fade-percentage (max max-fade-percentage
@@ -59,30 +38,35 @@
       0.99
       (utils.number/naive-round fade-percentage 2))))
 
-(defn scrollable-tabs
-  "Just like the component `tabs`, displays horizontally scrollable tabs with
-  extra options to control if/how the end of the scroll view fades.
-
-  Tabs are rendered using ReactNative's FlatList, which offers the convenient
-  `scrollToIndex` method. FlatList accepts VirtualizedList and ScrollView props,
-  and so does this component.
-
-  Usage:
-  [tabs/scrollable-tabs
-    {:scroll-on-press? true
-     :fade-end?        true
-     :on-change        #(...)
-     :default-active   :tab-a
-     :data             [{:id :tab-a :label \"Tab A\"}
-                        {:id :tab-b :label \"Tab B\"}]}]]
-
+(defn tabs
+  "Usage:
+   {:type             :icon/:emoji/:label
+    :component        tag/tab
+    :size             32/24
+    :on-press         fn
+    :blurred?         true/false 
+    :labelled?        true/false
+    :disabled?        true/false
+    :scrollable?      false
+    :scroll-on-press? true
+    :fade-end?        true
+    :on-change        fn
+    :default-active   tag-id
+    :data             [{:id :label \"\" :resource \"url\"}
+                       {:id :label \"\" :resource \"url\"}]}
   Opts:
-  - `size` number
-  - `scroll-on-press?` When non-nil, clicking on a tab centers it the middle
+   - `component` this is to determine which component is to be rendered since the 
+                 logic in this view is shared between tab and tag component
+   - `blurred`   boolean: use to determine border color if the background is blurred
+   - `type`      can be icon or emoji with or without a tag label
+   - `labelled`  boolean: is true if tag has label else false
+   - `size` number
+   - `scroll-on-press?` When non-nil, clicking on a tag centers it the middle
   (with animation enabled).
-  - `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
-  - `fade-end-percentage` Percentage where fading starts relative to the total
+   - `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
+   - `fade-end-percentage` Percentage where fading starts relative to the total
   layout width of the `flat-list` data."
+
   [{:keys [default-active fade-end-percentage]
     :or   {fade-end-percentage 0.8}}]
   (let [active-tab-id (reagent/atom default-active)
@@ -96,98 +80,123 @@
                on-scroll
                scroll-event-throttle
                scroll-on-press?
+               scrollable?
+               style
                size
                blur?
                override-theme]
         :or   {fade-end-percentage   fade-end-percentage
                fade-end?             false
                scroll-event-throttle 64
+               scrollable?           false
                scroll-on-press?      false
                size                  default-tab-size}
         :as   props}]
-      (let [maybe-mask-wrapper (if fade-end?
-                                 [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
-          (merge
-           (dissoc props
-                   :default-active
-                   :fade-end-percentage
-                   :fade-end?
-                   :on-change
-                   :scroll-on-press?
-                   :size)
-           (when scroll-on-press?
-             {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
-           {:ref                               #(reset! flat-list-ref %)
-            :extra-data                        (str @active-tab-id)
-            :horizontal                        true
-            :scroll-event-throttle             scroll-event-throttle
-            :shows-horizontal-scroll-indicator false
-            :data                              data
-            :key-fn                            (comp str :id)
-            :on-scroll                         (fn [^js e]
-                                                 (when fade-end?
-                                                   (let [offset-x       (oget
-                                                                         e
-                                                                         "nativeEvent.contentOffset.x")
-                                                         content-width  (oget
-                                                                         e
-                                                                         "nativeEvent.contentSize.width")
-                                                         layout-width
-                                                         (oget e "nativeEvent.layoutMeasurement.width")
-                                                         new-percentage
-                                                         (calculate-fade-end-percentage
-                                                          {:offset-x            offset-x
-                                                           :content-width       content-width
-                                                           :layout-width        layout-width
-                                                           :max-fade-percentage fade-end-percentage})]
-                                                     ;; Avoid unnecessary re-rendering.
-                                                     (when (not= new-percentage
-                                                                 (get @fading :fade-end-percentage))
-                                                       (swap! fading assoc
-                                                         :fade-end-percentage
-                                                         new-percentage))))
-                                                 (when on-scroll
-                                                   (on-scroll e)))
-            :render-fn                         (fn [{:keys [id label]} index]
-                                                 [rn/view
-                                                  {:style {:margin-right  (if (= size default-tab-size)
-                                                                            12
-                                                                            8)
-                                                           :padding-right (when (= index
-                                                                                   (dec (count data)))
-                                                                            (get-in props
-                                                                                    [:style
-                                                                                     :padding-left]))}}
-                                                  [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 ^js
-                                                                                        @flat-list-ref
-                                                                                        #js
-                                                                                         {:animated true
-                                                                                          :index index
-                                                                                          :viewPosition
-                                                                                          0.5}))
-                                                                      (when on-change
-                                                                        (on-change id)))}
-                                                   label]])})])))))
+      (if scrollable?
+        (let [maybe-mask-wrapper (if fade-end?
+                                   [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
+            (merge
+             (dissoc props
+                     :default-active
+                     :fade-end-percentage
+                     :fade-end?
+                     :on-change
+                     :scroll-on-press?
+                     :size)
+             (when scroll-on-press?
+               {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
+             {:ref                               #(reset! flat-list-ref %)
+              :extra-data                        (str @active-tab-id)
+              :horizontal                        true
+              :scroll-event-throttle             scroll-event-throttle
+              :shows-horizontal-scroll-indicator false
+              :data                              data
+              :key-fn                            (comp str :id)
+              :on-scroll-to-index-failed         identity
+              :on-scroll                         (fn [^js e]
+                                                   (when fade-end?
+                                                     (let [offset-x       (oget
+                                                                           e
+                                                                           "nativeEvent.contentOffset.x")
+                                                           content-width
+                                                           (oget
+                                                            e
+                                                            "nativeEvent.contentSize.width")
+                                                           layout-width
+                                                           (oget e
+                                                                 "nativeEvent.layoutMeasurement.width")
+                                                           new-percentage
+                                                           (calculate-fade-end-percentage
+                                                            {:offset-x            offset-x
+                                                             :content-width       content-width
+                                                             :layout-width        layout-width
+                                                             :max-fade-percentage fade-end-percentage})]
+                                                       ;; Avoid unnecessary re-rendering.
+                                                       (when (not= new-percentage
+                                                                   (get @fading :fade-end-percentage))
+                                                         (swap! fading assoc
+                                                           :fade-end-percentage
+                                                           new-percentage))))
+                                                   (when on-scroll
+                                                     (on-scroll e)))
+              :render-fn                         (fn [{:keys [id label]} index]
+                                                   [rn/view
+                                                    {:style {:margin-right  (if (= size default-tab-size)
+                                                                              12
+                                                                              8)
+                                                             :padding-right (when (= index
+                                                                                     (dec (count data)))
+                                                                              (get-in props
+                                                                                      [:style
+                                                                                       :padding-left]))}}
+                                                    [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
+                                                                           ^js
+                                                                           @flat-list-ref
+                                                                           #js
+                                                                            {:animated     true
+                                                                             :index        index
+                                                                             :viewPosition
+                                                                             0.5}))
+                                                                        (when on-change
+                                                                          (on-change id)))}
+                                                     label]])})]))
+        [rn/view (merge {:flex-direction :row} style)
+         (doall
+          (for [{:keys [label id notification-dot? accessibility-label]} data]
+            ^{:key id}
+            [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
+             (when notification-dot?
+               [indicator])
+             [tab/tab
+              {: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]]))]))))

src/quo2/components/tags/base_tag.cljs

@@ -16,25 +16,21 @@
            {:width size})))
 
 (defn base-tag
-  "opts
-   {:type :icon/:emoji/:label/:permission
-    :size 32/24}
-    :labelled true"
   [_]
-  (fn [{:keys [id size disabled border-color border-width background-color on-press
-               accessibility-label label type]
+  (fn [{:keys [id size disabled? border-color border-width background-color on-press
+               accessibility-label labelled? type]
         :or   {size 32}} children]
     [rn/touchable-without-feedback
-     (merge {:disabled            disabled
+     (merge {:disabled            disabled?
              :accessibility-label accessibility-label}
             (when on-press
               {:on-press #(on-press id)}))
      [rn/view
       {:style (merge (style-container size
-                                      disabled
+                                      disabled?
                                       border-color
                                       border-width
                                       background-color
-                                      label
+                                      labelled?
                                       type))}
       children]]))

src/quo2/components/tags/context_tags.cljs

@@ -1,16 +1,11 @@
 (ns quo2.components.tags.context-tags
   (:require [quo2.components.avatars.group-avatar :as group-avatar]
+            [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as quo2.theme]
             [react-native.core :as rn]))
 
-(defn padding-left-for-type
-  [type]
-  (case type
-    :group-avatar 3
-    8))
-
 (defn trim-public-key
   [pk]
   (str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
@@ -29,7 +24,7 @@
           :padding-left     8
           :background-color (if (= theme :light)
                               colors/neutral-10
-                              colors/neutral-80)}
+                              colors/neutral-90)}
          style)]
        children))))
 
@@ -39,7 +34,8 @@
     [base-tag
      (-> opts
          (select-keys [:override-theme :style])
-         (assoc-in [:style :padding-left] 3))
+         (assoc-in [:style :padding-left] 3)
+         (assoc-in [:style :padding-vertical] 2))
      [group-avatar/group-avatar opts]
      [text/text
       {:weight :medium
@@ -57,22 +53,74 @@
       (trim-public-key public-key)]]))
 
 (defn context-tag
-  [params photo name]
-  (let [text-style (params :text-style)]
-    [base-tag (assoc-in params [:style :padding-left] 3)
-     [rn/image
-      {:style  {:width            20
-                :border-radius    10
-                :background-color :white
-                :height           20}
-       :source photo}]
-     [text/text
-      (merge {:weight :medium
-              :size   :paragraph-2}
-             {:style text-style})
-      (str " " name)]]))
+  [_ _]
+  (fn [params photo name channel-name]
+    (let [text-style  (:text-style params)
+          text-params {:weight :medium
+                       :size   :paragraph-2
+                       :style  (assoc text-style :justify-content :center)}
+          icon-color  (colors/theme-colors colors/neutral-50 colors/neutral-40)]
+      [base-tag (assoc-in params [:style :padding-left] 3)
+       [rn/image
+        {:style  {:width            20
+                  :border-radius    10
+                  :background-color :red
+                  :height           20}
+         :source photo}]
+       [rn/view
+        {:style {:align-items    :center
+                 :flex-direction :row}}
+        [text/text text-params (str " " name)]
+        (when channel-name
+          [:<>
+           [icons/icon
+            :i/chevron-right
+            {:color icon-color
+             :size  16}]
+           [text/text text-params (str "# " channel-name)]])]])))
 
 (defn user-avatar-tag
   []
   (fn [params username photo]
     [context-tag params {:uri photo} username]))
+
+(defn audio-tag
+  [duration params]
+  [base-tag
+   (merge
+    {:style {:padding-left     2
+             :padding-vertical 2}}
+    params)
+   [rn/view
+    {:width            20
+     :height           20
+     :border-radius    10
+     :align-items      :center
+     :justify-content  :center
+     :background-color colors/primary-50}
+    [icons/icon
+     :i/play
+     {:color colors/white
+      :size  12}]]
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:margin-left 4
+              :color       (colors/theme-colors
+                            colors/neutral-100
+                            colors/white
+                            (:override-theme params))}}
+    duration]])
+
+(defn community-tag
+  [avatar community-name params]
+  [context-tag
+   (merge
+    {:style      {:padding-vertical 2}
+     :text-style {:margin-left 2
+                  :color       (colors/theme-colors
+                                colors/neutral-100
+                                colors/white
+                                (:override-theme params))}}
+    params)
+   avatar community-name])

src/quo2/components/tags/tag.cljs

@@ -68,26 +68,40 @@
       label])])
 
 (defn tag
+  "opts
+   {:type         :icon/:emoji/:label
+    :size         32/24
+    :on-press     fn
+    :blurred?     true/false 
+    :resource     icon/image
+    :labelled?    true/false
+    :disabled?    true/false}
+  
+   opts
+    - `blurred`  boolean: use to determine border color if the background is blurred
+    - `type`     can be icon or emoji with or without a tag label
+    - `labelled` boolean: is true if tag has label else false"
   [_ _]
-  (fn [{:keys [id on-press disabled size resource active accessibility-label
-               label type labelled blurred icon-color]
+  (fn [{:keys [id on-press disabled? size resource active accessibility-label
+               label type labelled? blurred? icon-color]
         :or   {size 32}}]
-    (let [state                                                  (cond disabled :disabled
-                                                                       active   :active
-                                                                       :else    :default)
+    (let [state                                                  (cond disabled? :disabled
+                                                                       active    :active
+                                                                       :else     :default)
           {:keys [border-color blurred-border-color text-color]}
           (get-in themes [(theme/get-theme) state])]
-      [base-tag/base-tag
-       {:id                  id
-        :size                size
-        :border-width        1
-        :border-color        (if blurred
-                               blurred-border-color
-                               border-color)
-        :on-press            on-press
-        :accessibility-label accessibility-label
-        :disabled            disabled
-        :type                type
-        :label               label}
-       [tag-resources size type resource icon-color label text-color labelled]])))
+      [rn/view {:style {:align-items :center}}
+       [base-tag/base-tag
+        {:id                  id
+         :size                size
+         :border-width        1
+         :border-color        (if blurred?
+                                blurred-border-color
+                                border-color)
+         :on-press            on-press
+         :accessibility-label accessibility-label
+         :disabled?           disabled?
+         :type                type
+         :labelled?           (if (= type :label) true labelled?)}
+        [tag-resources size type resource icon-color label text-color labelled?]]])))
 

src/quo2/components/tags/tags.cljs

@@ -1,29 +1,171 @@
 (ns quo2.components.tags.tags
-  (:require [quo2.components.tags.tag :as tag]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]))
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [oops.core :refer [oget]]
+            [status-im.ui.components.react :as react]
+            [status-im.utils.core :as utils]
+            [quo2.components.tags.tag :as tag]
+            [utils.number :as number-utils]))
+
+(def default-tab-size 32)
+
+(defn calculate-fade-end-percentage
+  [{:keys [offset-x content-width layout-width max-fade-percentage]}]
+  (let [fade-percentage (max max-fade-percentage
+                             (/ (+ layout-width offset-x)
+                                content-width))]
+    ;; Truncate to avoid unnecessary rendering.
+    (if (> fade-percentage 0.99)
+      0.99
+      (number-utils/naive-round fade-percentage 2))))
 
 (defn tags
-  [{:keys [default-active on-change]}]
-  (let [active-tab-id (reagent/atom default-active)]
-    (fn [{:keys [data size type labelled disabled blurred icon-color] :or {size 32}}]
-      (let [active-id @active-tab-id]
-        [rn/view {:flex-direction :row}
-         (for [{:keys [tag-label id resource]} data]
-           ^{:key id}
-           [rn/view {:margin-right 8}
-            [tag/tag
-             (merge {:id         id
-                     :size       size
-                     :type       type
-                     :label      (if labelled tag-label (when (= type :label) tag-label))
-                     :active     (= id active-id)
-                     :disabled   disabled
-                     :blurred    blurred
-                     :icon-color icon-color
-                     :labelled   (if (= type :label) true labelled)
-                     :resource   (if (= type :icon)
-                                   :i/placeholder
-                                   resource)
-                     :on-press   #(do (reset! active-tab-id %)
-                                      (when on-change (on-change %)))})]])]))))
+  "Usage:
+   {:type             :icon/:emoji/:label
+    :component        tag/tab
+    :size             32/24
+    :on-press         fn
+    :blurred?         true/false 
+    :labelled?        true/false
+    :disabled?        true/false
+    :scroll-on-press? true
+    :scrollable?      false
+    :fade-end?        true
+    :on-change        fn
+    :default-active   tag-id
+    :data             [{:id :label \"\" :resource \"url\"}
+                       {:id :label \"\" :resource \"url\"}]}
+  Opts:
+   - `component` this is to determine which component is to be rendered since the 
+                 logic in this view is shared between tab and tag component
+   - `blurred`   boolean: use to determine border color if the background is blurred
+   - `type`      can be icon or emoji with or without a tag label
+   - `labelled`  boolean: is true if tag has label else false
+   - `size` number
+   - `scroll-on-press?` When non-nil, clicking on a tag centers it the middle
+  (with animation enabled).
+   - `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
+   - `fade-end-percentage` Percentage where fading starts relative to the total
+  layout width of the `flat-list` data."
+
+  [{:keys [default-active fade-end-percentage]
+    :or   {fade-end-percentage 0.8}}]
+  (let [active-tab-id (reagent/atom default-active)
+        fading        (reagent/atom {:fade-end-percentage fade-end-percentage})
+        flat-list-ref (atom nil)]
+    (fn
+      [{:keys [data
+               fade-end-percentage
+               fade-end?
+               on-change
+               on-scroll
+               scroll-event-throttle
+               scrollable?
+               scroll-on-press?
+               size
+               type
+               labelled?
+               disabled?
+               blurred?
+               icon-color]
+        :or   {fade-end-percentage   fade-end-percentage
+               fade-end?             false
+               scroll-event-throttle 64
+               scrollable?           false
+               scroll-on-press?      false
+               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%"}}])}]
+                                 [:<>])]
+        (if scrollable?
+          (conj
+           maybe-mask-wrapper
+           [rn/flat-list
+            (merge (dissoc props
+                           :default-active
+                           :fade-end-percentage
+                           :fade-end?
+                           :on-change
+                           :scroll-on-press?
+                           :size)
+                   (when scroll-on-press?
+                     {:initial-scroll-index (utils/first-index #(= @active-tab-id (:id %)) data)})
+                   {:ref #(reset! flat-list-ref %)
+                    :extra-data (str @active-tab-id)
+                    :horizontal true
+                    :scroll-event-throttle scroll-event-throttle
+                    :shows-horizontal-scroll-indicator false
+                    :data data
+                    :key-fn (comp str :id)
+                    :on-scroll (fn [^js e]
+                                 (when fade-end?
+                                   (let [offset-x       (oget e "nativeEvent.contentOffset.x")
+                                         content-width  (oget e "nativeEvent.contentSize.width")
+                                         layout-width   (oget e "nativeEvent.layoutMeasurement.width")
+                                         new-percentage (calculate-fade-end-percentage
+                                                         {:offset-x            offset-x
+                                                          :content-width       content-width
+                                                          :layout-width        layout-width
+                                                          :max-fade-percentage fade-end-percentage})]
+                                     ;; Avoid unnecessary re-rendering.
+                                     (when (not= new-percentage (get @fading :fade-end-percentage))
+                                       (swap! fading assoc :fade-end-percentage new-percentage))))
+                                 (when on-scroll
+                                   (on-scroll e)))
+                    :render-fn (fn [{:keys [id label resource]} index]
+                                 [rn/view
+                                  {:style {:margin-right  (if (= size default-tab-size) 12 8)
+                                           :padding-right (when (= index (dec (count data)))
+                                                            (get-in props [:style :padding-left]))}}
+                                  [tag/tag
+                                   {:id         id
+                                    :size       size
+                                    :active     (= id @active-tab-id)
+                                    :resource   resource
+                                    :blurred?   blurred?
+                                    :icon-color icon-color
+                                    :disabled?  disabled?
+                                    :label      label
+                                    :type       type
+                                    :labelled?  labelled?
+                                    :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]])})])
+          [rn/view {:style {:flex-direction :row}}
+           (for [{:keys [label id resource]} data]
+             ^{:key id}
+             [rn/view {:style {:margin-right 8}}
+              [tag/tag
+               (merge {:id         id
+                       :size       size
+                       :type       type
+                       :label      (if labelled? label (when (= type :label) label))
+                       :active     (= id active-tab-id)
+                       :disabled?  disabled?
+                       :blurred?   blurred?
+                       :icon-color icon-color
+                       :labelled?  (if (= type :label) true labelled?)
+                       :resource   (if (= type :icon)
+                                     :i/placeholder
+                                     resource)
+                       :on-press   #(do (reset! active-tab-id %)
+                                        (when on-change (on-change %)))})]])])))))

src/quo2/core.cljs

@@ -1,49 +1,61 @@
 (ns quo2.core
-  (:require 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.buttons.button
-            quo2.components.buttons.dynamic-button
-            quo2.components.community.community-card-view
-            quo2.components.community.community-list-view
-            quo2.components.community.community-view
-            quo2.components.community.discover-card
-            quo2.components.community.token-gating
-            quo2.components.counter.counter
-            quo2.components.dividers.date
-            quo2.components.dividers.divider-label
-            quo2.components.dividers.new-messages
-            quo2.components.drawers.action-drawers
-            quo2.components.dropdowns.dropdown
-            quo2.components.header
-            quo2.components.icon
-            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.loaders.skeleton
-            quo2.components.markdown.text
-            quo2.components.messages.gap
-            quo2.components.messages.system-message
-            quo2.components.navigation.floating-shell-button
-            quo2.components.navigation.page-nav
-            quo2.components.notifications.activity-log.view
-            quo2.components.notifications.info-count
-            quo2.components.notifications.notification-dot
-            quo2.components.reactions.reaction
-            quo2.components.selectors.disclaimer
-            quo2.components.selectors.selectors
-            quo2.components.separator
-            quo2.components.tabs.account-selector
-            quo2.components.tabs.tabs
-            quo2.components.tags.context-tags
-            quo2.components.tags.status-tags
-            quo2.components.tags.tags))
+  (:refer-clojure :exclude [filter])
+  (:require
+   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.banners.banner.view
+   quo2.components.buttons.button
+   quo2.components.buttons.dynamic-button
+   quo2.components.community.community-card-view
+   quo2.components.community.community-list-view
+   quo2.components.community.community-view
+   quo2.components.community.discover-card
+   quo2.components.community.icon
+   quo2.components.community.token-gating
+   quo2.components.counter.counter
+   quo2.components.dividers.date
+   quo2.components.dividers.divider-label
+   quo2.components.dividers.new-messages
+   quo2.components.drawers.action-drawers
+   quo2.components.dropdowns.dropdown
+   quo2.components.header
+   quo2.components.icon
+   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.loaders.skeleton
+   quo2.components.markdown.text
+   quo2.components.messages.author.view
+   quo2.components.messages.gap
+   quo2.components.messages.system-message
+   quo2.components.navigation.floating-shell-button
+   quo2.components.navigation.page-nav
+   quo2.components.notifications.activity-log.view
+   quo2.components.notifications.count-down-circle
+   quo2.components.notifications.info-count
+   quo2.components.notifications.notification-dot
+   quo2.components.notifications.toast
+   quo2.components.reactions.reaction
+   quo2.components.selectors.disclaimer.view
+   quo2.components.selectors.filter.view
+   quo2.components.selectors.selectors
+   quo2.components.separator
+   quo2.components.settings.accounts.view
+   quo2.components.settings.privacy-option
+   quo2.components.tabs.account-selector
+   quo2.components.tabs.tabs
+   quo2.components.tags.context-tags
+   quo2.components.tags.status-tags
+   quo2.components.profile.profile-card.view
+   quo2.components.tags.tags))
 
+(def toast quo2.components.notifications.toast/toast)
 (def button quo2.components.buttons.button/button)
 (def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
 (def text quo2.components.markdown.text/text)
@@ -58,19 +70,23 @@
 (def gap quo2.components.messages.gap/gap)
 (def system-message quo2.components.messages.system-message/system-message)
 (def reaction quo2.components.reactions.reaction/reaction)
+(def add-reaction quo2.components.reactions.reaction/add-reaction)
 (def tags quo2.components.tags.tags/tags)
 (def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag)
 (def context-tag quo2.components.tags.context-tags/context-tag)
 (def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag)
+(def audio-tag quo2.components.tags.context-tags/audio-tag)
+(def community-tag quo2.components.tags.context-tags/community-tag)
 (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)
 (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
-(def disclaimer quo2.components.selectors.disclaimer/disclaimer)
+(def disclaimer quo2.components.selectors.disclaimer.view/view)
 (def checkbox quo2.components.selectors.selectors/checkbox)
+(def filter quo2.components.selectors.filter.view/view)
 (def skeleton quo2.components.loaders.skeleton/skeleton)
+(def author quo2.components.messages.author.view/author)
 
 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
@@ -80,6 +96,9 @@
 (def user-avatar quo2.components.avatars.user-avatar/user-avatar)
 (def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
 
+;;;; BANNER
+(def banner quo2.components.banners.banner.view/banner)
+
 ;;;; 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)
@@ -92,6 +111,7 @@
 (def permission-tag-container quo2.components.community.community-view/permission-tag-container)
 (def discover-card quo2.components.community.discover-card/discover-card)
 (def token-gating quo2.components.community.token-gating/token-gating)
+(def community-icon quo2.components.community.icon/community-icon)
 
 ;;;; DIVIDERS
 (def divider-label quo2.components.dividers.divider-label/divider-label)
@@ -107,3 +127,11 @@
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def info-count quo2.components.notifications.info-count/info-count)
 (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
+(def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
+
+;;;; PROFILE
+(def profile-card quo2.components.profile.profile-card.view/profile-card)
+
+;;;; SETTINGS
+(def privacy-option quo2.components.settings.privacy-option/card)
+(def account quo2.components.settings.accounts.view/account)

src/quo2/core_spec.cljs

@@ -1,4 +1,10 @@
 (ns quo2.core-spec
-  (:require [quo2.components.counter.--tests--.counter-component-spec]
+  (:require [quo2.components.banners.banner.component-spec]
+            [quo2.components.buttons.--tests--.buttons-component-spec]
+            [quo2.components.counter.--tests--.counter-component-spec]
+            [quo2.components.dividers.--tests--.divider-label-component-spec]
             [quo2.components.drawers.--tests--.action-drawers-component-spec]
-            [quo2.components.selectors.--tests--.selectors-component-spec]))
+            [quo2.components.drawers.permission-context.--tests--.permission-context-component-spec]
+            [quo2.components.markdown.--tests--.text-component-spec]
+            [quo2.components.selectors.--tests--.selectors-component-spec]
+            [quo2.components.selectors.filter.component-spec]))

src/quo2/foundations/colors.cljs

@@ -14,6 +14,21 @@
       (let [rgb (string/split value #",")]
         (str (string/join "," (butlast rgb)) "," opacity ")")))))
 
+(defn- alpha-opaque
+  [value opacity]
+  (when value
+    (if (string/starts-with? value "#")
+      (let [hex (string/replace value #"#" "")
+            r   (- 255 (* opacity (- 255 (js/parseInt (subs hex 0 2) 16))))
+            g   (- 255 (* opacity (- 255 (js/parseInt (subs hex 2 4) 16))))
+            b   (- 255 (* opacity (- 255 (js/parseInt (subs hex 4 6) 16))))]
+        (str "rgb(" r "," g "," b ")"))
+      (let [rgb (string/split value #",")
+            r   (- 255 (* opacity (- 255 (get rgb 0))))
+            g   (- 255 (* opacity (- 255 (get rgb 1))))
+            b   (- 255 (* opacity (- 255 (get rgb 2))))]
+        (str "rgb(" r "," g "," b ")")))))
+
 (def theme-alpha
   (memoize
    (fn
@@ -50,6 +65,7 @@
 ;;80 with transparency
 (def neutral-80-opa-5 (alpha neutral-80 0.05))
 (def neutral-80-opa-10 (alpha neutral-80 0.1))
+(def neutral-80-opa-15 (alpha neutral-80 0.15))
 (def neutral-80-opa-20 (alpha neutral-80 0.2))
 (def neutral-80-opa-30 (alpha neutral-80 0.3))
 (def neutral-80-opa-40 (alpha neutral-80 0.4))
@@ -68,11 +84,17 @@
 (def neutral-95-opa-95 (alpha neutral-95 0.95))
 
 ;;100 with transparency
+(def neutral-100-opa-0 (alpha neutral-100 0))
+(def neutral-100-opa-10 (alpha neutral-100 0.1))
 (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))
+(def neutral-100-opa-100 (alpha neutral-100 1))
+
+;;80 with transparency opaque
+(def neutral-80-opa-5-opaque (alpha-opaque neutral-80 0.05))
 
 ;;;;White
 
@@ -92,6 +114,11 @@
 (def white-opa-90 (alpha white 0.9))
 (def white-opa-95 (alpha white 0.95))
 
+;;;;Black
+
+;;Solid
+(def black "#000000")
+
 ;;;;Primary
 
 ;;Solid

src/react_native/core.cljs

@@ -1,6 +1,9 @@
 (ns react-native.core
   (:require ["@react-native-community/blur" :as blur]
+            ["react" :as react]
             ["react-native" :as react-native]
+            [cljs-bean.core :as bean]
+            [oops.core :as oops]
             [react-native.flat-list :as flat-list]
             [react-native.platform :as platform]
             [react-native.section-list :as section-list]
@@ -22,6 +25,8 @@
 
 (def flat-list flat-list/flat-list)
 
+(def flat-list-inside-gesture-handler flat-list/flat-list-inside-gesture-handler)
+
 (def section-list section-list/section-list)
 
 (def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js react-native)))
@@ -64,6 +69,12 @@
 
 (def status-bar (.-StatusBar ^js react-native))
 
+(def style-sheet (.-StyleSheet ^js react-native))
+
+(defn status-bar-height
+  []
+  (.-currentHeight ^js status-bar))
+
 (defn hw-back-add-listener
   [callback]
   (.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))
@@ -80,3 +91,16 @@
          (merge (when platform/ios? {:behavior :padding})
                 props)]
         children))
+
+(defn use-effect
+  ([effect] (use-effect effect []))
+  ([effect deps]
+   (react/useEffect effect (bean/->js deps))))
+
+(def use-ref react/useRef)
+(defn use-effect-once [effect] (use-effect effect))
+(defn use-unmount
+  [f]
+  (let [fn-ref (use-ref f)]
+    (oops/oset! fn-ref "current" f)
+    (use-effect-once (fn [] (fn [] (oops/ocall! fn-ref "current"))))))

src/react_native/flat_list.cljs

@@ -1,6 +1,7 @@
 (ns react-native.flat-list
   (:require ["react-native" :as react-native]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo.gesture-handler :as gesture-handler]))
 
 (def react-native-flat-list (reagent/adapt-react-class (.-FlatList ^js react-native)))
 
@@ -39,3 +40,7 @@
 (defn flat-list
   [props]
   [react-native-flat-list (base-list-props props)])
+
+(defn flat-list-inside-gesture-handler
+  [props]
+  [gesture-handler/flat-list (base-list-props props)])

src/react_native/hooks.cljs

@@ -0,0 +1,8 @@
+(ns react-native.hooks
+  (:require ["@react-native-community/hooks" :as hooks]))
+
+(defn use-keyboard
+  []
+  (let [kb (.useKeyboard hooks)]
+    {:keyboard-shown  (.-keyboardShown ^js kb)
+     :keyboard-height (.-keyboardHeight ^js kb)}))

src/react_native/reanimated.cljs

@@ -1,11 +1,25 @@
 (ns react-native.reanimated
-  (:require
-   ["react-native" :as rn]
-   ["react-native-linear-gradient" :default LinearGradient]
-   ["react-native-reanimated" :default reanimated :refer
-    (useSharedValue useAnimatedStyle withTiming withDelay withSpring withRepeat Easing Keyframe)]
-   [clojure.string :as string]
-   [reagent.core :as reagent]))
+  (:require ["react-native" :as rn]
+            ["react-native-linear-gradient" :default LinearGradient]
+            ["react-native-reanimated" :default reanimated :refer
+             (useSharedValue useAnimatedStyle
+                             withTiming
+                             withDelay
+                             withSpring
+                             withRepeat
+                             Easing
+                             Keyframe
+                             cancelAnimation
+                             SlideInUp
+                             SlideOutUp
+                             LinearTransition)]
+            [clojure.string :as string]
+            [reagent.core :as reagent]))
+
+;; Animations
+(def slide-in-up-animation SlideInUp)
+(def slide-out-up-animation SlideOutUp)
+(def linear-transition LinearTransition)
 
 ;; Animated Components
 (def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent reanimated)))
@@ -26,6 +40,7 @@
 (def with-spring withSpring)
 (def key-frame Keyframe)
 (def with-repeat withRepeat)
+(def cancel-animation cancelAnimation)
 
 ;; Easings
 (def bezier (.-bezier ^js Easing))
@@ -39,11 +54,13 @@
 ;; Helper functions
 (defn get-shared-value
   [anim]
-  (.-value anim))
+  (when anim
+    (.-value anim)))
 
 (defn set-shared-value
   [anim val]
-  (set! (.-value anim) val))
+  (when anim
+    (set! (.-value anim) val)))
 
 (defn kebab-case->camelCase
   [k]
@@ -60,6 +77,13 @@
 ;; Worklets
 (def worklet-factory (js/require "../src/js/worklet_factory.js"))
 
+(defn interpolate
+  [shared-value input-range output-range]
+  (.interpolateValue ^js worklet-factory
+                     shared-value
+                     (clj->js input-range)
+                     (clj->js output-range)))
+
 ;;;; Component Animations
 
 ;; kebab-case styles are not working for worklets
@@ -94,4 +118,26 @@
                                               (js-obj "duration" duration
                                                       "easing"   (get easings easing)))
                                  number-of-repetitions
-                                 reverse?)))
+                                 reverse?)))
+
+(defn animate-shared-value-with-delay-repeat
+  ([anim val duration easing delay number-of-repetitions]
+   (animate-shared-value-with-delay-repeat anim val duration easing delay number-of-repetitions false))
+  ([anim val duration easing delay number-of-repetitions reverse?]
+   (set-shared-value anim
+                     (with-delay delay
+                                 (with-repeat
+                                  (with-timing val
+                                               #js
+                                                {:duration duration
+                                                 :easing   (get easings easing)})
+                                  number-of-repetitions
+                                  reverse?)))))
+
+(defn animate-shared-value-with-spring
+  [anim val {:keys [mass stiffness damping]}]
+  (set-shared-value anim
+                    (with-spring val
+                                 (js-obj "mass"      mass
+                                         "damping"   damping
+                                         "stiffness" stiffness))))

src/react_native/safe_area.cljs

@@ -8,7 +8,7 @@
 (defn consumer
   [component]
   [consumer-raw
-   (fn [insets]
+   (fn [^js insets]
      (reagent/as-element
       [component (js->clj insets :keywordize-keys true)]))])
 

src/react_native/svg.cljs

@@ -0,0 +1,6 @@
+(ns react-native.svg
+  (:require ["react-native-svg" :as Svg]
+            [reagent.core :as reagent]))
+
+(def svg (reagent/adapt-react-class Svg/default))
+(def path (reagent/adapt-react-class Svg/Path))

src/status_im/add_new/core.cljs

@@ -7,10 +7,10 @@
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.ens :as ens]
             [status-im.ethereum.stateofus :as stateofus]
-            [status-im.i18n.i18n :as i18n]
+            [i18n.i18n :as i18n]
             [status-im.router.core :as router]
             [status-im.utils.db :as utils.db]
-            [status-im.utils.fx :as fx]
+            [utils.re-frame :as rf]
             [status-im.utils.random :as random]
             [status-im.utils.utils :as utils]
             [status-im2.navigation.events :as navigation]))
@@ -24,7 +24,7 @@
 ;;NOTE we want to handle only last resolve
 (def resolve-last-id (atom nil))
 
-(fx/defn new-chat-set-new-identity
+(rf/defn new-chat-set-new-identity
   {:events [:new-chat/set-new-identity]}
   [{db :db} new-identity-raw new-ens-name id]
   (let [ens-error (and (= new-identity-raw "0x") (not (string/blank? new-ens-name)))]
@@ -61,12 +61,12 @@
                                                             new-identity
                                                             @resolve-last-id])}})))))))
 
-(fx/defn clear-new-identity
+(rf/defn clear-new-identity
   {:events [::clear-new-identity ::new-chat-focus]}
   [{:keys [db]}]
   {:db (dissoc db :contacts/new-identity)})
 
-(fx/defn qr-code-handled
+(rf/defn qr-code-handled
   {:events [::qr-code-handled]}
   [{:keys [db] :as cofx} {:keys [type public-key chat-id data ens-name]}
    {:keys [new-contact? nickname] :as opts}]
@@ -81,7 +81,7 @@
         validation-result (db/validate-pub-key db chat-key)]
     (if-not validation-result
       (if new-contact?
-        (fx/merge cofx
+        (rf/merge cofx
                   (contact/add-contact chat-key nickname ens-name)
                   (navigation/navigate-to-cofx :contacts-list {}))
         (chat/start-chat cofx chat-key ens-name))
@@ -93,7 +93,7 @@
                                         (i18n/label :t/can-not-add-yourself))
                           :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :chat-stack])}})))
 
-(fx/defn qr-code-scanned
+(rf/defn qr-code-scanned
   {:events [:contact/qr-code-scanned]}
   [{:keys [db]} data opts]
   {::router/handle-uri {:chain (ethereum/chain-keyword db)