fx namespaces removed in favor of utils.re-frame

* ui for local pairing

lint-fix

removed un-necessary +

addressing some of the feedback on PR

more feedback + removing feature toggle from ui

getting rid of comments/log messages over here

tidy up logs

fix typos and more i18n stuff

swap % with a named parameter

getting rid of global state + lint-fix

get rid of un-used function

icon guidelines and more kebab case stuff :>

moving stuff to events and utils namespace

:main-icons -> :i :)

address feedback and adhere to guidelines etc

fixed the :t/ qualification

moree feedback :-D

referring status-im.utils.security for now

adding "cs" to constants

make tests pass

re-frame to rf

addressing feedback

moving icons to icons2 & renaming stuff

trying to make this file the way it was before

missed out on updating these references

getting rid of the icons moved to icons2

This reverts commit be8552c0d3daaf7a7333cfeaf304d97c86d50d3e.

fixing mistakes

getting rid of the s

* this rename makes sense to me

* adding an alias to the view

* fixed broken up namespaces

.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    "module:metro-react-native-babel-preset"
-  ],
-  "plugins": [
-    "react-native-reanimated/plugin"
-  ]
-}

.carve_ignore

@@ -200,7 +200,7 @@ status-im.utils.platform/isMacOs?
 status-im.utils.platform/isNix?
 status-im.utils.platform/isWin?
 status-im.utils.platform/android-version>=
-status-im.utils.debounce/clear-all
+utils.debounce/clear-all
 status-im.transport.db/create-chat
 status-im.utils.priority-map/priority-map
 status-im.utils.priority-map/priority-map-by

.clj-kondo/config.edn

@@ -1,13 +1,20 @@
-{: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
-           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
-           taoensso.tufte/defnp           clojure.core/defn}
- :linters {:invalid-arity     {:skip-args [status-im.utils.fx/defn]}
-           ;;TODO remove number when this is fixed
-           ;;https://github.com/borkdude/clj-kondo/issues/867
-           :unresolved-symbol {:exclude [PersistentPriorityMap.EMPTY number]}}}
+{: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]}}}

.detoxrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  "testRunner": "jest",
+  "testRegex": "\\.visual\\.js$",
+  "runner-config": "visual-test/config.json",
+  "devices": {
+    "simulator": {
+      "type": "ios.simulator",
+      "device": {
+        "type": "iPhone 11 Pro"
+      }
+    }
+  },
+  "apps": {
+    "ios.release": {
+      "name": "StatusIm",
+      "type": "ios.app",
+      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/StatusIm.app",
+      "build": "make release-ios"
+    },
+    "ios.debug": {
+      "name": "StatusIm",
+      "type": "ios.app",
+      "binaryPath": process.env.TEST_BINARY_PATH,
+      "build": "make run-ios SIMULATOR='iPhone 11 Pro'"
+    }
+  },
+  "configurations": {
+    "ios.sim.release": {
+      "device": "simulator",
+      "app": "ios.release"
+    },
+    "ios.sim.debug": {
+      "device": "simulator",
+      "app": "ios.debug"
+    }
+  }
+}

.env

@@ -4,7 +4,7 @@ DEFAULT_NETWORK=mainnet_rpc
 DEV_BUILD=1
 ETHEREUM_DEV_CLUSTER=1
 EXTENSIONS=0
-FLEET=eth.prod
+FLEET=status.prod
 GROUP_CHATS_ENABLED=1
 LOG_LEVEL=info
 MAILSERVER_CONFIRMATIONS_ENABLED=1
@@ -32,3 +32,4 @@ COMMANDS_ENABLED=1
 TWO_MINUTES_SYNCING=1
 SWAP_ENABLED=1
 STICKERS_TEST_ENABLED=1
+LOCAL_PAIRING_ENABLED=1

.env.e2e

@@ -2,7 +2,7 @@ DEBUG_WEBVIEW=1
 DEFAULT_NETWORK=goerli_rpc
 ETHEREUM_DEV_CLUSTER=1
 EXTENSIONS=0
-FLEET=eth.staging
+FLEET=status.prod
 GROUP_CHATS_ENABLED=1
 LOG_LEVEL=debug
 MAILSERVER_CONFIRMATIONS_ENABLED=0
@@ -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

@@ -3,7 +3,7 @@ DEBUG_WEBVIEW=1
 DEFAULT_NETWORK=goerli_rpc
 ETHEREUM_DEV_CLUSTER=1
 EXTENSIONS=0
-FLEET=eth.prod
+FLEET=status.prod
 GROUP_CHATS_ENABLED=1
 LOG_LEVEL=debug
 MAILSERVER_CONFIRMATIONS_ENABLED=1
@@ -34,3 +34,4 @@ DELETE_MESSAGE_ENABLED=1
 TWO_MINUTES_SYNCING=1
 ENABLE_QUO_PREVIEW=1
 STICKERS_TEST_ENABLED=1
+LOCAL_PAIRING_ENABLED=1

.env.nightly

@@ -2,7 +2,7 @@ DEBUG_WEBVIEW=1
 DEFAULT_NETWORK=mainnet_rpc
 ETHEREUM_DEV_CLUSTER=1
 EXTENSIONS=0
-FLEET=eth.prod
+FLEET=status.prod
 GROUP_CHATS_ENABLED=1
 LOG_LEVEL=info
 MAILSERVER_CONFIRMATIONS_ENABLED=1

.env.release

@@ -2,7 +2,7 @@ DEBUG_WEBVIEW=0
 DEFAULT_NETWORK=mainnet_rpc
 ETHEREUM_DEV_CLUSTER=0
 EXTENSIONS=0
-FLEET=eth.prod
+FLEET=status.prod
 GROUP_CHATS_ENABLED=1
 LOG_LEVEL=
 MAILSERVER_CONFIRMATIONS_ENABLED=1

.gitignore

@@ -7,6 +7,7 @@
 
 # Xcode
 #
+/component-spec
 result/
 build/
 *.pbxuser
@@ -175,3 +176,11 @@ test/appium/tests/users.py
 ##node bindings
 /bin/
 /lib/
+
+## visual tests
+/artifacts
+
+/.calva/
+
+## component-tests
+*.log

Makefile

@@ -48,7 +48,7 @@ export _NIX_GCROOTS = /nix/var/nix/gcroots/per-user/$(USER)/status-mobile
 # Defines which variables will be kept for Nix pure shell, use semicolon as divider
 export _NIX_KEEP ?= TMPDIR,BUILD_ENV,STATUS_GO_SRC_OVERRIDE
 
-# Useful for Andoird release builds
+# Useful for Android release builds
 TMP_BUILD_NUMBER := $(shell ./scripts/version/gen_build_no.sh | cut -c1-10)
 
 # MacOS root is read-only, read nix/README.md for details
@@ -307,13 +307,36 @@ test-watch: ##@ Watch tests and re-run no changes to cljs files
 
 test: export TARGET := clojure
 test: ##@test Run tests once in NodeJS
-	# Here we creates the gyp bindings for nodejs
+	# Here we create the gyp bindings for nodejs
 	yarn install
 	yarn shadow-cljs compile mocks && \
 	yarn shadow-cljs compile test && \
 	node --require ./test-resources/override.js target/test/test.js
 
-#--------------
+
+run-visual-test-ios: export TARGET := clojure
+run-visual-test-ios: XCODE_DERIVED_DATA := $(HOME)/Library/Developer/Xcode/DerivedData
+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 
+
+component-test-watch: export TARGET := clojure
+component-test-watch: export COMPONENT_TEST := true
+component-test-watch: export BABEL_ENV := test
+component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	yarn install
+	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
+
+component-test: export TARGET := clojure
+component-test: export COMPONENT_TEST := true
+component-test: export BABEL_ENV := test
+component-test: ##@test Run tests once in NodeJS
+	# Here we create the gyp bindings for nodejs
+	yarn install
+	yarn shadow-cljs compile component-test && \
+	jest --config=test/jest/jest.config.js
+
 # Other
 #--------------
 

babel.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+
+    "presets": [
+        "module:metro-react-native-babel-preset"
+    ],
+    "plugins": [
+        "react-native-reanimated/plugin"
+    ],
+    "env": {
+        "test": {
+            "presets": [
+                '@babel/preset-react',
+                [
+                    '@babel/preset-env',
+                    {
+                        targets: {
+                            node: '14',
+                        },
+                    },
+                ],
+            ],
+        }
+    }
+}

ci/Jenkinsfile.android

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -36,7 +36,7 @@ pipeline {
     LANG     = "en_US.UTF-8"
     LC_ALL   = "en_US.UTF-8"
     LANGUAGE = "en_US.UTF-8"
-    TARGET   = 'android'
+    TARGET   = "android${utils.isE2EBuild() ? "-e2e" : ""}"
     BUILD_ENV = 'prod'
     NIX_CONF_DIR = "${env.WORKSPACE}/nix"
     FASTLANE_DISABLE_COLORS = 1

ci/Jenkinsfile.combined

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.ios

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.nix-cache

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 pipeline {
   agent { label params.AGENT_LABEL }

ci/Jenkinsfile.tests

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/tests/Jenkinsfile.e2e-nightly

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

ci/tests/Jenkinsfile.e2e-prs

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 pipeline {
 

ci/tools/Jenkinsfile.fastlane-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 pipeline {
   agent { label 'macos' }

ci/tools/Jenkinsfile.playstore-meta

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.1'
+library 'status-jenkins-lib@v1.6.3'
 
 pipeline {
   agent { label 'linux' }

doc/STARTING_GUIDE.md

@@ -93,6 +93,6 @@ To use a physical iPhone your device UDID must be added to provisioning profiles
   - Invite your Apple account to be Developer in Status team.
 3. Run a build in XCode using the project from `status-mobile/ios` directory.
   - You might see error: `Select a development team in the Signing & Capabilities editor`
-  - Select `STATUS HOLDINGS PTE. LTD.` as the development team and rebuild again.
+  - Select `Status Research & Development GmbH` as the development team and rebuild again.
 
 Once build finishes Status should start on your iPhone with its logs in terminal running `make run-metro`.

doc/new-guidelines.md

@@ -62,6 +62,31 @@ with the source file using it. For a real example, see
     (do-something)]])
 ```
 
+#### Styles def vs defn
+
+Always use `def` over `defn`, unless the style relies on dynamic values, such as
+deref'ed atoms.
+
+```clojure
+;; bad
+(defn title-column []
+  {:height 56})
+
+;; good
+(def title-column
+  {:height 56})
+```
+
+```clojure
+;; bad
+(def community-card
+  {:background-color (colors/theme-colors colors/white colors/neutral-90)})
+
+;; good
+(defn community-card []
+  {:background-color (colors/theme-colors colors/white colors/neutral-90)})
+```
+
 ### Using TODOs comments
 
 _TODO_ comments are used extensively in the codebase, but prefer to use them
@@ -249,6 +274,22 @@ test macros `deftest` and `is`, which are ubiquitous in the Clojure community.
   (:require [cljs-time.coerce :as time.coerce]))
 ```
 
+### Javascript interop
+
+Use [binaryage/oops](https://github.com/binaryage/cljs-oops) macros instead of
+core interop macros.
+
+```clojure
+;; bad
+(fn [^js event]
+  (.-width (.-nativeEvent event)))
+
+;; good
+(require '[oops.core :as  oops])
+(fn [event]
+  (oops/oget event "nativeEvent.width"))
+```
+
 ### Accessibility labels
 
 Use keywords instead of strings. As a bonus, remember keywords are cached in
@@ -296,6 +337,53 @@ keywords and concatenating them into a single string.
 (i18n/label :t/biometric-auth-error {:code error-code})
 ```
 
+### Tests
+#### Subscription tests
+
+Test [layer-3 subscriptions](https://day8.github.io/re-frame/subscriptions/) by
+actually subscribing to them, so reframe's signal graph gets validated too.
+
+```clojure
+;; bad
+(defn user-recipes
+  [[current-user all-recipes location]]
+  ...)
+
+(re-frame/reg-sub
+ :user/recipes
+ :<- [:current-user]
+ :<- [:all-recipes]
+ :<- [:location]
+ user-recipes)
+
+(deftest user-recipes-test
+  (testing "builds list of recipes"
+    (let [current-user {...}
+          all-recipes  {...}
+          location     [...]]
+      (is (= expected (recipes [current-user all-recipes location]))))))
+
+;; good
+(require '[status-im.test-helpers :as h])
+
+(re-frame/reg-sub
+ :user/recipes
+ :<- [:current-user]
+ :<- [:all-recipes]
+ :<- [:location]
+ (fn [[current-user all-recipes location]]
+   ...))
+
+(h/deftest-sub :user/recipes
+  [sub-name]
+  (testing "builds list of recipes"
+    (swap! rf-db/app-db assoc
+           :current-user {...}
+           :all-recipes {...}
+           :location [...])
+    (is (= expected (rf/sub [sub-name])))))
+```
+
 ## Project Structure
 
 First, the bird's-eye view with some example ClojureScript files:

ios/Podfile.lock

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

ios/StatusIm.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 46;
+	objectVersion = 52;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -319,7 +319,6 @@
 				FBF6AB84EBC2085D28C3CDEF /* Pods-Status-StatusImPR.debug.xcconfig */,
 				BF23313BEFBC84C6BB7E7677 /* Pods-Status-StatusImPR.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -401,12 +400,12 @@
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
 						CreatedOnToolsVersion = 6.2;
-						DevelopmentTeam = DTX7Z4U3YA;
+						DevelopmentTeam = 8B5X2M6H2Y;
 						ProvisioningStyle = Manual;
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
-						DevelopmentTeam = DTX7Z4U3YA;
+						DevelopmentTeam = 8B5X2M6H2Y;
 						LastSwiftMigration = 1140;
 						ProvisioningStyle = Manual;
 						SystemCapabilities = {
@@ -425,7 +424,7 @@
 						};
 					};
 					3AAD2AB924A3A60E0075D594 = {
-						DevelopmentTeam = DTX7Z4U3YA;
+						DevelopmentTeam = 8B5X2M6H2Y;
 						ProvisioningStyle = Manual;
 					};
 				};
@@ -757,7 +756,7 @@
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "iPhone Developer";
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(SDKROOT)/Developer/Library/Frameworks",
 					"$(inherited)",
@@ -768,7 +767,11 @@
 				);
 				INFOPLIST_FILE = StatusImTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+					"@loader_path/Frameworks",
+				);
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -791,14 +794,18 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				COPY_PHASE_STRIP = NO;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(SDKROOT)/Developer/Library/Frameworks",
 					"$(inherited)",
 				);
 				INFOPLIST_FILE = StatusImTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+					"@loader_path/Frameworks",
+				);
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -818,12 +825,12 @@
 				BUNDLE_ID_SUFFIX = .debug;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusIm/StatusIm.entitlements;
-				CODE_SIGN_IDENTITY = "iPhone Developer";
+				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = "Status Debug";
 				DEAD_CODE_STRIPPING = YES;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				EXCLUDED_ARCHS = "";
 				"EXCLUDED_ARCHS[sdk=iphoneos*]" = x86_64;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -857,7 +864,11 @@
 				);
 				INFOPLIST_FILE = StatusIm/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
-				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited) @executable_path/Frameworks";
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(PROJECT_DIR)",
@@ -888,12 +899,12 @@
 				BUNDLE_ID_SUFFIX = "";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusIm/StatusIm.entitlements;
-				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				CODE_SIGN_IDENTITY = "iPhone Developer";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = Status;
 				DEAD_CODE_STRIPPING = YES;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				EXCLUDED_ARCHS = "";
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus",
@@ -919,7 +930,11 @@
 				);
 				INFOPLIST_FILE = StatusIm/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
-				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited) @executable_path/Frameworks";
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(PROJECT_DIR)",
@@ -953,7 +968,7 @@
 				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = "Status Debug";
 				DEAD_CODE_STRIPPING = YES;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus",
 					"$(inherited)",
@@ -984,7 +999,11 @@
 				);
 				INFOPLIST_FILE = StatusImPR/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
-				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited) @executable_path/Frameworks";
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(PROJECT_DIR)",
@@ -996,7 +1015,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum.pr;
 				PRODUCT_NAME = "Status PR";
-				PROVISIONING_PROFILE_SPECIFIER = "match AdHoc im.status.ethereum.pr";
+				PROVISIONING_PROFILE_SPECIFIER = "match Development im.status.ethereum.pr";
 				SWIFT_OBJC_BRIDGING_HEADER = "StatusIm-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -1013,12 +1032,12 @@
 				BUNDLE_ID_SUFFIX = "";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusImPR/StatusImPR.entitlements;
-				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				CODE_SIGN_IDENTITY = "iPhone Developer";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = Status;
 				DEAD_CODE_STRIPPING = YES;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus",
 					"$(inherited)",
@@ -1043,7 +1062,11 @@
 				);
 				INFOPLIST_FILE = StatusImPR/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
-				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited) @executable_path/Frameworks";
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(PROJECT_DIR)",
@@ -1096,7 +1119,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				ENABLE_BITCODE = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
@@ -1179,7 +1202,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = YES;
-				DEVELOPMENT_TEAM = DTX7Z4U3YA;
+				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
 				ENABLE_BITCODE = NO;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;

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

@@ -0,0 +1,78 @@
+package im.status.ethereum.module;
+
+import android.view.ActionMode;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.uimanager.NativeViewHierarchyManager;
+import com.facebook.react.uimanager.UIBlock;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.views.textinput.ReactEditText;
+import javax.annotation.Nonnull;
+
+class RNSelectableTextInputModule extends ReactContextBaseJavaModule {
+
+    private ActionMode lastActionMode;
+
+    public RNSelectableTextInputModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    @Nonnull
+    @Override
+    public String getName() {
+        return "RNSelectableTextInputManager";
+    }
+
+    @ReactMethod
+    public void setupMenuItems(final Integer selectableTextViewReactTag, final Integer textInputReactTag) {
+        ReactApplicationContext reactContext = this.getReactApplicationContext();
+        UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class);
+        uiManager.addUIBlock(new UIBlock() {
+            public void execute (NativeViewHierarchyManager nvhm) {
+                RNSelectableTextInputViewManager rnSelectableTextManager = (RNSelectableTextInputViewManager) nvhm.resolveViewManager(selectableTextViewReactTag);
+                ReactEditText reactTextView = (ReactEditText) nvhm.resolveView(textInputReactTag);
+                rnSelectableTextManager.registerSelectionListener(reactTextView);
+            }
+        });
+    }
+
+    @ReactMethod
+    public void startActionMode(final Integer textInputReactTag) {
+        ReactApplicationContext reactContext = this.getReactApplicationContext();
+        UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class);
+        uiManager.addUIBlock(new UIBlock() {
+            public void execute (NativeViewHierarchyManager nvhm) {
+                ReactEditText reactTextView = (ReactEditText) nvhm.resolveView(textInputReactTag);
+                lastActionMode = reactTextView.startActionMode(reactTextView.getCustomSelectionActionModeCallback(), ActionMode.TYPE_FLOATING);
+            }
+        });
+    }
+
+    @ReactMethod
+    public void hideLastActionMode(){
+        ReactApplicationContext reactContext = this.getReactApplicationContext();
+        UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class);
+        uiManager.addUIBlock(new UIBlock() {
+            public void execute (NativeViewHierarchyManager nvhm) {
+                if(lastActionMode!=null){
+                    lastActionMode.finish();
+                    lastActionMode = null;
+                }
+            }
+        });
+    }
+
+    @ReactMethod
+    public void setSelection(final Integer textInputReactTag, final Integer start, final Integer end){
+        ReactApplicationContext reactContext = this.getReactApplicationContext();
+        UIManagerModule uiManager = reactContext.getNativeModule(UIManagerModule.class);
+        uiManager.addUIBlock(new UIBlock() {
+            public void execute (NativeViewHierarchyManager nvhm) {
+                ReactEditText reactTextView = (ReactEditText) nvhm.resolveView(textInputReactTag);
+                reactTextView.setSelection(start, end);
+            }
+        });
+    }
+ 
+}

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

@@ -0,0 +1,102 @@
+package im.status.ethereum.module;
+
+import android.view.ActionMode;
+import android.view.ActionMode.Callback;
+import android.view.Menu;
+import android.view.MenuItem;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.facebook.react.views.textinput.ReactEditText;
+import com.facebook.react.views.view.ReactViewGroup;
+import com.facebook.react.views.view.ReactViewManager;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+public class RNSelectableTextInputViewManager extends ReactViewManager {
+    public static final String REACT_CLASS = "RNSelectableTextInput";
+    private String[] _menuItems = new String[0];
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    public ReactViewGroup createViewInstance(ThemedReactContext context) {
+        return new ReactViewGroup(context);
+    }
+
+    @ReactProp(name = "menuItems")
+    public void setMenuItems(ReactViewGroup reactViewGroup, ReadableArray items) {
+        if(items != null) {
+            List<String> result = new ArrayList<String>(items.size());
+            for (int i = 0; i < items.size(); i++) {
+                result.add(items.getString(i));
+            }
+            this._menuItems = result.toArray(new String[items.size()]);
+        }
+    }
+
+    public void registerSelectionListener(final ReactEditText view) {
+        view.setCustomSelectionActionModeCallback(new Callback() {
+            @Override
+            public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
+                menu.clear();
+                for (int i = 0; i < _menuItems.length; i++) {
+                    menu.add(0, i, 0, _menuItems[i]);
+                }
+                return true;
+            }
+
+            @Override
+            public boolean onCreateActionMode(ActionMode mode, Menu menu) {
+                return true;
+            }
+
+            @Override
+            public void onDestroyActionMode(ActionMode mode) {
+            }
+
+            @Override
+            public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
+                int selectionStart = view.getSelectionStart();
+                int selectionEnd = view.getSelectionEnd();
+                String selectedText = view.getText().toString().substring(selectionStart, selectionEnd);
+
+                // Dispatch event
+                onSelectNativeEvent(view, item.getItemId(), selectedText, selectionStart, selectionEnd);
+
+                mode.finish();
+
+                return true;
+            }
+
+        });
+    }
+
+    public void onSelectNativeEvent(ReactEditText view, int eventType, String content, int selectionStart, int selectionEnd) {
+        WritableMap event = Arguments.createMap();
+        event.putInt("eventType", eventType);
+        event.putString("content", content);
+        event.putInt("selectionStart", selectionStart);
+        event.putInt("selectionEnd", selectionEnd);
+
+        // Dispatch
+        ReactContext reactContext = (ReactContext) view.getContext();
+        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(view.getId(), "topSelection", event);
+    }
+
+    @Override
+    public Map getExportedCustomDirectEventTypeConstants() {
+        return MapBuilder.builder()
+                         .put("topSelection", MapBuilder.of("registrationName","onSelection"))
+                         .build();
+    }
+}

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

@@ -940,6 +940,52 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         StatusThreadPoolExecutor.getInstance().execute(r);
     }
 
+    @ReactMethod
+    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);
+
+        if (!checkAvailability()) {
+            callback.invoke(false);
+            return;
+        }
+
+        Runnable runnableTask = new Runnable() {
+            @Override
+            public void run() {
+                String res = Statusgo.getConnectionStringForBootstrappingAnotherDevice(jsonConfig.toString());
+                callback.invoke(res);
+            }
+        };
+
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
+    }
+
+    @ReactMethod
+    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);
+
+        if (!checkAvailability()) {
+            callback.invoke(false);
+            return;
+        }
+
+        Runnable runnableTask = new Runnable() {
+            @Override
+            public void run() {
+                String res = Statusgo.inputConnectionStringForBootstrapping(connectionString,jsonConfig.toString());
+                callback.invoke(res);
+            }
+        };
+
+        StatusThreadPoolExecutor.getInstance().execute(runnableTask);
+    }
+
+
     @ReactMethod
     public void hashTypedData(final String data, final Callback callback) {
         Log.d(TAG, "hashTypedData");

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

@@ -7,6 +7,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
 
 import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.Collections;
 import java.util.List;
 
@@ -29,12 +30,15 @@ public class StatusPackage implements ReactPackage {
         List<NativeModule> modules = new ArrayList<>();
 
         modules.add(new StatusModule(reactContext, this.rootedDevice));
+        modules.add(new RNSelectableTextInputModule(reactContext));
 
         return modules;
     }
 
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
+        return Arrays.<ViewManager>asList(
+                new RNSelectableTextInputViewManager()
+        );
     }
 }

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

@@ -318,6 +318,42 @@ RCT_EXPORT_METHOD(hashMessage:(NSString *)message
     callback(@[result]);
 }
 
+//////////////////////////////////////////////////////////////////// getConnectionStringForBootstrappingAnotherDevice
+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]);
+}
+
+//////////////////////////////////////////////////////////////////// inputConnectionStringForBootstrapping
+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]);
+}
+
 //////////////////////////////////////////////////////////////////// hashTypedData
 RCT_EXPORT_METHOD(hashTypedData:(NSString *)data
                   callback:(RCTResponseSenderBlock)callback) {
@@ -502,11 +538,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;
 }
 
@@ -957,10 +993,10 @@ RCT_EXPORT_METHOD(exportUnencryptedDatabase:(NSString *)accountData
 #if DEBUG
     NSLog(@"exportUnencryptedDatabase() method called");
 #endif
-    
+
     NSString *filePath = [self getExportDbFilePath];
     StatusgoExportUnencryptedDatabase(accountData, password, filePath);
-    
+
     callback(@[filePath]);
 }
 

nix/config.nix

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

nix/mobile/android/release.nix

@@ -45,8 +45,8 @@ in stdenv.mkDerivation rec {
     filter = lib.mkFilter {
       root = path;
       include = [
-        "package.json" "yarn.lock" "metro.config.js" ".babelrc"
-        "resources/.*" "translations/.*" "src/js/worklet_factory.js"
+        "package.json" "yarn.lock" "metro.config.js" "babel.config.js"
+        "resources/.*" "translations/.*" "src/js/.*"
         "modules/react-native-status/android.*" "android/.*"
         envFileName "VERSION" "status-go-version.json" "react-native.config.js"
       ];

nix/overlay.nix

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

nix/scripts/shell.sh

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

nix/status-go/default.nix

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

nix/status-go/mobile/build.nix

@@ -2,7 +2,6 @@
 , androidPkgs, openjdk, gomobile, xcodeWrapper, removeReferencesTo
 , meta
 , source
-, buildNimbusLc
 , platform ? "android"
 , platformVersion ? "23"
 , targets ? [ "android/arm64" "android/arm" ]
@@ -14,14 +13,7 @@ let
   inherit (lib) concatStringsSep optionalString optional;
   isIOS = platform == "ios";
   isAndroid = platform == "android";
-  lc = buildNimbusLc {inherit platform targets;};
-  cgoCflags = "-I" + (builtins.elemAt lc 0);
 
-  lcDirs = (builtins.concatStringsSep " " (builtins.map (s: "-L" + s) lc));
-
-  goBuildLdFlagsModified = 
-    goBuildLdFlags ++ [("-extldflags \"-lverifproxy " + lcDirs + "\"")];
-  ldflags = concatStringsSep " " goBuildLdFlagsModified;
 in buildGoPackage {
   pname = source.repo;
   version = "${source.cleanVersion}-${source.shortRev}-${platform}";
@@ -38,6 +30,8 @@ in buildGoPackage {
     ++ optional isAndroid openjdk
     ++ optional isIOS xcodeWrapper;
 
+  ldflags = concatStringsSep " " goBuildLdFlags;
+
   ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;
 
   # Ensure XCode is present for iOS, instead of failing at the end of the build.
@@ -46,13 +40,11 @@ in buildGoPackage {
   buildPhase = ''
     runHook preBuild
     echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"
-    echo -e "\n LC dirs: ${lcDirs}"
-    echo -e "\n ldflags: ${ldflags}"
+
     set -x
-    export CGO_CFLAGS=\"${cgoCflags}\" 
     gomobile bind \
       ${concatStringsSep " " goBuildFlags} \
-      -ldflags ''\'${ldflags}''\' \
+      -ldflags="$ldflags" \
       -target=${concatStringsSep "," targets} \
       ${optionalString isAndroid "-androidapi=${platformVersion}" } \
       ${optionalString isIOS "-iosversion=${platformVersion}" } \

nix/status-go/mobile/buildNim.nix

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

nix/status-go/mobile/buildNimbus.nix

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

nix/status-go/mobile/default.nix

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

nix/status-go/mobile/route.h

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

nix/status-go/nimbus_source.nix

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

package.json

@@ -74,7 +74,7 @@
     "react-native-touch-id": "^4.4.1",
     "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
     "react-syntax-highlighter": "^15.5.0",
-    "rn-emoji-keyboard": "git+https://github.com/status-im/rn-emoji-keyboard.git#refs/tags/v0.4.3",
+    "rn-emoji-keyboard": "0.7.0",
     "tdigest": "^0.1.1"
   },
   "devDependencies": {
@@ -82,12 +82,21 @@
     "@babel/helper-builder-react-jsx": "7.0.0",
     "@babel/plugin-transform-block-scoping": "7.0.0",
     "@babel/preset-env": "7.1.0",
+    "@babel/preset-react": "^7.18.6",
     "@babel/register": "7.0.0",
+    "@jest/globals": "^25.1.0",
     "@mapbox/node-pre-gyp": "^1.0.9",
+    "@testing-library/jest-native": "^5.0.0",
+    "@testing-library/react-native": "^11.2.0",
+    "@types/jest": "^28.1.6",
+    "detox": "^19.9.1",
     "jest": "^25.1.0",
+    "jest-circus": "^26.0.0",
+    "jest-image-snapshot": "^5.1.0",
     "nodemon": "^2.0.16",
     "nyc": "^14.1.1",
     "process": "0.11.10",
+    "react-test-renderer": "16.13.1",
     "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#refs/tags/v2.0.2-status",
     "shadow-cljs": "2.11.16"
   },

resources/config/fleets.json

@@ -1,131 +1,165 @@
 {
-    "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"
-            }
-        },
-        "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"
-            }
-        },
-        "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"
-            }
-        },
-        "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"
-            }
-        }
+  "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.proxy.misc",
-        "timestamp": "2021-06-07T00:00:09.836740"
+    "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"]
     }
+  },
+  "meta": {
+    "hostname": "node-01.do-ams3.proxy.misc",
+    "timestamp": "2021-06-07T00:00:09.836740"
+  }
 }

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

@@ -2,10 +2,10 @@
 
 CHANGES=$(git diff --no-ext-diff --diff-filter=d --cached --unified=0 --no-prefix --minimal --exit-code src/quo src/quo2 | grep '^+' || echo '')
 
-INVALID_CHANGES=$(echo "$CHANGES" | grep -E '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt)')
+INVALID_CHANGES=$(echo "$CHANGES" | grep -E '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im)')
 
 if test -n "$INVALID_CHANGES"; then
-    echo "re-frame dispatch/subscribe is not allowed in quo/quo2 components"
+    echo "re-frame dispatch/subscribe and status-im are not allowed in quo/quo2 components"
     echo ''
     echo "$INVALID_CHANGES"
     exit 1

shadow-cljs.edn

@@ -64,15 +64,15 @@
            {: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 {:output-feature-set :es6
+            :compiler-options {:output-feature-set :es6
                                         ;;disable for android build as there
                                         ;;is an intermittent warning with deftype
-                                        :warnings-as-errors false
-                                        :infer-externs :auto
-                                        :static-fns true
-                                        :fn-invoke-direct true
-                                        :optimizations :advanced
-                                        :js-options {:js-provider :closure}}}}
+                               :warnings-as-errors false
+                               :infer-externs :auto
+                               :static-fns true
+                               :fn-invoke-direct true
+                               :optimizations :advanced
+                               :js-options {:js-provider :closure}}}}
           ;; the tests are ran with node, react-native dependencies are mocked
           ;; by using node --require override.js, which uses the node-library
           ;; produced by the target :mocks below and redefines node require
@@ -106,4 +106,11 @@
            :output-to "target/mocks/mocks.js"
            :output-dir "target/mocks"
            :compiler-options {:optimizations :simple
-                              :source-map false}}}}
+                              :source-map false}}
+          :component-test {:target :npm-module
+                           :entries [quo2.core-spec]
+                           :ns-regexp "-component-spec$"
+                           :output-dir "component-spec"
+                           :compiler-options {:warnings-as-errors false
+                                              :static-fns    false
+                                              :infer-externs true}}}}

src/js/shell_worklets.js

@@ -0,0 +1,186 @@
+import { useDerivedValue, withTiming, withSequence, withDelay, Easing } from 'react-native-reanimated';
+
+// Shell Worklets
+
+// Home Stack States
+const CLOSE_WITH_ANIMATION = 0;
+const OPEN_WITH_ANIMATION = 1;
+const CLOSE_WITHOUT_ANIMATION = 3;
+const OPEN_WITHOUT_ANIMATION = 4;
+
+// Derived Values
+export function stackOpacity (stackId, selectedStackId) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return selectedStackId.value == stackId ? 1 : 0;
+    }
+  );
+}
+
+export function stackPointer (stackId, selectedStackId) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return selectedStackId.value == stackId ? "auto" : "none";
+    }
+  );
+}
+
+export function bottomTabIconColor (stackId, selectedStackId, homeStackState,
+				    passThrough, selectedTabColor, defaultColor,
+				    passThroughColor) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      var homeStackStateValue = homeStackState.value;
+      if (selectedStackId.value == stackId &&
+	  (homeStackStateValue == OPEN_WITH_ANIMATION ||
+	   homeStackStateValue == OPEN_WITHOUT_ANIMATION)){
+	return selectedTabColor;
+      }
+      else if (passThrough.value){
+	return passThroughColor;
+      }
+      else {
+	return defaultColor;
+      }
+    }
+  );
+}
+
+export function bottomTabsHeight(homeStackState, height, extendedHeight) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      switch (homeStackState.value) {
+      case OPEN_WITH_ANIMATION:
+	return withTiming(extendedHeight, defaultDurationAndEasing);
+	break;
+      case CLOSE_WITH_ANIMATION:
+	return withTiming(height, defaultDurationAndEasing);
+	break;
+      case OPEN_WITHOUT_ANIMATION:
+	return extendedHeight;
+	break;
+      case CLOSE_WITHOUT_ANIMATION:
+	return height;
+	break;
+      }
+    }
+  )
+}
+
+
+// Home Stack
+
+const shellAnimationTime = 200;
+
+const defaultDurationAndEasing = {
+  duration: shellAnimationTime,
+  easing: Easing.bezier(0, 0, 1, 1),
+}
+
+export function homeStackOpacity (homeStackState) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      switch (homeStackState.value) {
+      case OPEN_WITH_ANIMATION:
+	return withTiming(1, defaultDurationAndEasing);
+	break;
+      case CLOSE_WITH_ANIMATION:
+	return withTiming(0, defaultDurationAndEasing);
+	break;
+      case OPEN_WITHOUT_ANIMATION:
+	return 1;
+	break;
+      case CLOSE_WITHOUT_ANIMATION:
+	return 0;
+	break;	
+      }
+    }
+  );
+}
+
+export function homeStackTop (homeStackState, top) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      switch (homeStackState.value) {
+      case OPEN_WITH_ANIMATION:
+	return withTiming(0, defaultDurationAndEasing);
+	break;
+      case CLOSE_WITH_ANIMATION:
+	return withTiming(top, defaultDurationAndEasing);
+	break;
+      case OPEN_WITHOUT_ANIMATION:
+	return 0;
+	break;
+      case CLOSE_WITHOUT_ANIMATION:
+	return top;
+	break;	
+      }
+    }
+  );
+}
+
+export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackState, left) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      if (animateHomeStackLeft.value) {
+	var leftValue = left[selectedStackId.value];
+	switch (homeStackState.value) {
+	case OPEN_WITH_ANIMATION:
+	  return withSequence(withTiming(leftValue, {duration: 0}), withTiming(0, defaultDurationAndEasing))
+	  break;
+	case CLOSE_WITH_ANIMATION:
+	  return withTiming(leftValue, defaultDurationAndEasing);
+	  break;
+	case OPEN_WITHOUT_ANIMATION:
+	  return 0;
+	  break;
+	case CLOSE_WITHOUT_ANIMATION:
+	  return leftValue;
+	  break;	
+	}
+      } else {
+	return 0;
+      }
+    }
+  );
+}
+
+export function homeStackPointer (homeStackState) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      var homeStackStateValue = homeStackState.value;
+      return (homeStackStateValue == OPEN_WITH_ANIMATION ||
+	      homeStackStateValue == OPEN_WITHOUT_ANIMATION) ? "auto" : "none";
+    }
+  );
+}
+
+export function homeStackScale (homeStackState, minimizeScale) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      switch (homeStackState.value) {
+      case OPEN_WITH_ANIMATION:
+	return withTiming(1, defaultDurationAndEasing);
+	break;
+      case CLOSE_WITH_ANIMATION:
+	return withTiming(minimizeScale, defaultDurationAndEasing);
+	break;
+      case OPEN_WITHOUT_ANIMATION:
+	return 1;
+	break;
+      case CLOSE_WITHOUT_ANIMATION:
+	return minimizeScale;
+	break;	
+      }
+    }
+  );
+}

src/js/worklet_factory.js

@@ -1,5 +1,3 @@
-import { useDerivedValue, withTiming, withSequence, withDelay, Easing } from 'react-native-reanimated';
-
 // Generic Worklets
 
 export function applyAnimationsToStyle(animations, style) {
@@ -29,106 +27,3 @@ export function applyAnimationsToStyle(animations, style) {
     return Object.assign(animatedStyle, style);
   };
 };
-
-// Switcher Worklets
-
-export function stackOpacity (stackId, selectedStackId) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return selectedStackId.value == stackId ? 1 : 0;
-    }
-  );
-}
-
-export function stackPointer (stackId, selectedStackId) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return selectedStackId.value == stackId ? "auto" : "none";
-    }
-  );
-}
-
-export function bottomTabIconColor (stackId, selectedStackId, homeStackOpen,
-				    passThrough, selectedTabColor, defaultColor,
-				    passThroughColor) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      if (selectedStackId.value == stackId && homeStackOpen.value){
-	return selectedTabColor;
-      }
-      else if (passThrough.value){
-	return passThroughColor;
-      }
-      else {
-	return defaultColor;
-      }
-    }
-  );
-}
-
-
-// Home Stack
-
-const shellAnimationTime = 200;
-
-const defaultDurationAndEasing = {
-  duration: shellAnimationTime,
-  easing: Easing.bezier(0, 0, 1, 1),
-}
-
-export function homeStackOpacity (homeStackOpen) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return withTiming(homeStackOpen.value ? 1 : 0, defaultDurationAndEasing);
-    }
-  );
-}
-
-export function homeStackTop (homeStackOpen, top) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return withTiming(homeStackOpen.value ? 0 : top, defaultDurationAndEasing);
-    }
-  );
-}
-
-export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackOpen, left) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      if (animateHomeStackLeft.value) {
-	var leftValue = left[selectedStackId.value];
-	if (homeStackOpen.value) {
-	  return withSequence(withTiming(leftValue, {duration: 0}), withTiming(0, defaultDurationAndEasing))
-	} else {
-	  return withTiming(leftValue, defaultDurationAndEasing);
-	}
-      } else {
-	return 0;
-      }
-    }
-  );
-}
-
-export function homeStackPointer (homeStackOpen) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return homeStackOpen.value ? "auto" : "none";
-    }
-  );
-}
-
-export function homeStackScale (homeStackOpen, minimizeScale) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return withTiming(homeStackOpen.value ? 1 : minimizeScale, defaultDurationAndEasing);
-    }
-  );
-}

src/mocks/js_dependencies.cljs

@@ -282,6 +282,8 @@
 (def worklet-factory
   #js {:applyAnimationsToStyle (fn [])})
 
+(def shell-worklets #js {})
+
 ;; Update i18n_resources.cljs
 (defn mock [module]
   (case module
@@ -328,6 +330,7 @@
     "@react-native-async-storage/async-storage" async-storage
     "react-native-svg" react-native-svg
     "../src/js/worklet_factory.js" worklet-factory
+    "../src/js/shell_worklets.js" shell-worklets
     "./fleets.js" default-fleets
     "./chats.js" default-chats
     "@walletconnect/client" wallet-connect-client

src/quo/components/button/view.cljs

@@ -56,7 +56,7 @@
 
 (defn button [{:keys [on-press disabled type theme before after
                       haptic-feedback haptic-type on-long-press on-press-start
-                      accessibility-label loading border-radius style]
+                      accessibility-label loading border-radius style test-ID]
                :or   {theme           :main
                       type            :primary
                       haptic-feedback true
@@ -92,7 +92,7 @@
                                   {:on-press-start (fn []
                                                      (optional-haptic)
                                                      (on-press-start))}))
-     [rn/view {:style (merge (style-container type) style)}
+     [rn/view {:test-ID test-ID :style (merge (style-container type) style)}
       (when before
         [rn/view
          [icons/icon before {:color icon-color}]])

src/quo/react_native.cljs

@@ -34,7 +34,7 @@
 (def touchable-opacity (reagent/adapt-react-class (.-TouchableOpacity ^js rn)))
 (def touchable-highlight (reagent/adapt-react-class (.-TouchableHighlight ^js rn)))
 (def touchable-without-feedback (reagent/adapt-react-class (.-TouchableWithoutFeedback ^js rn)))
-(def text-input (reagent/adapt-react-class  (.-TextInput ^js rn)))
+(def text-input (reagent/adapt-react-class (.-TextInput ^js rn)))
 
 (def keyboard-avoiding-view-class (reagent/adapt-react-class (.-KeyboardAvoidingView ^js rn)))
 

src/quo2/__visual_tests__/button.e2e.js

@@ -0,0 +1,44 @@
+const waitToNavigate = duration => new Promise(resolve => setTimeout(() => resolve(), duration));
+
+const SUPER_SECRET_PASSWORD = 'password'
+
+const loginToHomePage = async () => {
+    if (device.getPlatform() === 'ios') {
+        await device.setStatusBar({ time: '12:34', dataNetwork: 'wifi', wifiBars: '3', batteryState: 'charging', batteryLevel: '100' });
+    }
+    await device.reloadReactNative();
+    await element(by.id('terms-of-service')).tap();
+    await waitToNavigate(400);
+    await element(by.id('get-started')).tap();
+    await waitToNavigate(300);
+    await element(by.id('generate-keys')).tap();
+    await waitToNavigate(200);
+    await element(by.text('Next')).tap();
+    await waitToNavigate(700);
+    await element(by.text('Next')).tap();
+    await waitToNavigate(700);
+    await element(by.id('password-placeholder')).typeText(SUPER_SECRET_PASSWORD);
+    await element(by.id('confirm-password-placeholder')).typeText(SUPER_SECRET_PASSWORD);
+    await element(by.text('Next')).tap();
+    await waitToNavigate(200);
+    await element(by.id("browser-stack")).tap();
+    await waitToNavigate(400);
+    await element(by.text("Quo2.0 Preview")).tap();
+    await waitToNavigate(400);
+}
+
+describe('Default Renders', () => {
+    beforeAll(async () => loginToHomePage())
+    beforeEach(async () => {
+    });
+    afterEach(async () => {
+        await element(by.id("back-button")).tap();
+        await waitToNavigate(200);
+    });
+
+    it(`button page should match image render`, async () => {
+        await element(by.id(`quo2-:button`)).tap();
+        await waitToNavigate(200);
+        const res = await jestExpect(`button`).toMatchImageSnapshot();
+    })
+});

src/quo2/components/avatars/group_avatar.cljs

@@ -4,25 +4,23 @@
             [react-native.core :as rn]))
 
 (def sizes
-  {:icon {:small 12
-          :medium 16
-          :large 20}
-   :container {:small 20
+  {:icon      {:small  12
+               :medium 16
+               :large  20}
+   :container {:small  20
                :medium 32
-               :large 48}})
+               :large  48}})
 
+;; TODO: this implementation does not support group display picture (can only display default group icon).
 (defn group-avatar [_]
-  (fn [{:keys [color size override-theme]}]
-    (let [theme          (or override-theme (if (colors/dark?) :dark :light))
-          container-size (get-in sizes [:container size])
+  (fn [{:keys [color size]}]
+    (let [container-size (get-in sizes [:container size])
           icon-size      (get-in sizes [:icon size])]
       [rn/view {:width            container-size
                 :height           container-size
                 :align-items      :center
                 :justify-content  :center
                 :border-radius    (/ container-size 2)
-                :background-color (if (= theme :light)
-                                    (colors/custom-color color 50)
-                                    (colors/custom-color color 60))}
-       [icon/icon :total-members {:size icon-size
-                                  :color colors/white-opa-70}]])))
+                :background-color (colors/custom-color-by-theme color 50 60)}
+       [icon/icon :i/group {:size  icon-size
+                            :color colors/white-opa-70}]])))

src/quo2/components/avatars/user_avatar.cljs

@@ -122,20 +122,20 @@
                                  first-initial-letter
                                  initials)
                                "")]
-    [rn/view {:style {:width         outer-dimensions
-                      :height        outer-dimensions
-                      :border-radius outer-dimensions}}
+    [rn/view {:accessibility-label :user-avatar
+              :style               {:width         outer-dimensions
+                                    :height        outer-dimensions
+                                    :border-radius outer-dimensions}}
      (when (and ring? identicon?)
-       [icons/icon :main-icons/identicon-ring {:width    outer-dimensions
-                                               :height   outer-dimensions
-                                               :size     outer-dimensions
-                                               :no-color true}])
+       [icons/icon :i/identicon-ring {:size     outer-dimensions
+                                      :no-color true}])
      (if profile-picture
        ;; display image
        [fast-image/fast-image {:source              {:uri profile-picture}
                                :style               (container-styling inner-dimensions outer-dimensions)}]
        ;; else display initials
        [container inner-dimensions outer-dimensions
+        ^{:key :icon-text}
         [text/text {:weight :semi-bold
                     :size   font-size
                     :style  {:color colors/white-opa-70}}

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -2,7 +2,7 @@
   (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
-            [clojure.string :as clojure-string]))
+            [clojure.string :as string]))
 
 (def circle-sizes {:small 20
                    :medium 32
@@ -29,10 +29,10 @@
   (let [circle-size    (size circle-sizes)
         small?         (= size :small)
         f-name-initial (-> f-name
-                           clojure-string/upper-case
+                           string/upper-case
                            (subs 0 1))
         l-name-initial (-> l-name
-                           clojure-string/upper-case
+                           string/upper-case
                            (subs 0 1))
         circle-color   (colors/custom-color color 50 20)
         text-color     (colors/custom-color-by-theme color 50 60)]

src/quo2/components/buttons/button.cljs

@@ -7,147 +7,149 @@
             [quo2.components.icon :as quo2.icons]))
 
 (def themes
-  {:light {:primary         {:icon-color           colors/white
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/primary-50
-                                                    :pressed  colors/primary-60
-                                                    :disabled colors/primary-50}}
-           :secondary       {:icon-color           colors/primary-50
-                             :label                {:style    {:color colors/primary-50}}
-                             :background-color     {:default  colors/primary-50-opa-20
-                                                    :pressed  colors/primary-50-opa-40
-                                                    :disabled colors/primary-50-opa-20}}
-           :grey            {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-50
-                             :label                {:style    {:color colors/neutral-100}}
-                             :background-color     {:default  colors/neutral-10
-                                                    :pressed  colors/neutral-20
-                                                    :disabled colors/neutral-10}}
-           :dark-grey       {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-50
-                             :label                {:style    {:color colors/neutral-100}}
-                             :background-color     {:default  colors/neutral-20
-                                                    :pressed  colors/neutral-30
-                                                    :disabled colors/neutral-20}}
-           :outline         {:icon-color           colors/neutral-50
-                             :icon-secondary-color colors/neutral-50
-                             :label                {:style    {:color colors/neutral-100}}
-                             :border-color         {:default  colors/neutral-20
-                                                    :pressed  colors/neutral-40
-                                                    :disabled colors/neutral-20}}
-           :ghost           {:icon-color           colors/neutral-50
-                             :icon-secondary-color colors/neutral-50
-                             :label                {:style    {:color colors/neutral-100}}
-                             :background-color     {:pressed colors/neutral-10}}
-           :danger          {:icon-color           colors/white
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/danger-50
-                                                    :pressed  colors/danger-60
-                                                    :disabled colors/danger-50}}
-           :positive        {:icon-color       colors/white
-                             :label            {:style {:color colors/white}}
-                             :background-color {:default  colors/success-50
-                                                :pressed  colors/success-60
-                                                :disabled colors/success-50-opa-30}}
-           :photo-bg        {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-80-opa-40
-                             :label                {:style    {:color colors/neutral-100}}
-                             :background-color     {:default  colors/white-opa-40
-                                                    :pressed  colors/white-opa-50
-                                                    :disabled colors/white-opa-40}}
-           :blur-bg         {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-80-opa-40
-                             :label                {:style    {:color colors/neutral-100}}
-                             :background-color     {:default  colors/neutral-80-opa-5
-                                                    :pressed  colors/neutral-80-opa-10
-                                                    :disabled colors/neutral-80-opa-5}}
-           :blur-bg-outline {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-80-opa-40
-                             :label                {:style    {:color colors/neutral-100}}
-                             :border-color         {:default  colors/neutral-80-opa-10
-                                                    :pressed  colors/neutral-80-opa-20
-                                                    :disabled colors/neutral-80-opa-10}}
+  {:light {:primary         {:icon-color            colors/white
+                             :label-color           colors/white
+                             :background-color      {:default  colors/primary-50
+                                                     :pressed  colors/primary-60
+                                                     :disabled colors/primary-50}}
+           :secondary       {:icon-color            colors/primary-50
+                             :label-color           colors/primary-50
+                             :background-color      {:default  colors/primary-50-opa-20
+                                                     :pressed  colors/primary-50-opa-40
+                                                     :disabled colors/primary-50-opa-20}}
+           :grey            {:icon-color            colors/neutral-100
+                             :icon-secondary-color  colors/neutral-50
+                             :label-color           colors/neutral-100
+                             :background-color      {:default  colors/neutral-10
+                                                     :pressed  colors/neutral-20
+                                                     :disabled colors/neutral-10}}
+           :dark-grey       {:icon-color            colors/neutral-100
+                             :icon-secondary-color  colors/neutral-50
+                             :label-color           colors/neutral-100
+                             :background-color      {:default  colors/neutral-20
+                                                     :pressed  colors/neutral-30
+                                                     :disabled colors/neutral-20}}
+           :outline         {:icon-color            colors/neutral-50
+                             :icon-secondary-color  colors/neutral-50
+                             :label-color           colors/neutral-100
+                             :border-color          {:default  colors/neutral-20
+                                                     :pressed  colors/neutral-40
+                                                     :disabled colors/neutral-20}}
+           :ghost           {:icon-color            colors/neutral-50
+                             :icon-secondary-color  colors/neutral-50
+                             :label-color           colors/neutral-100
+                             :background-color      {:pressed colors/neutral-10}}
+           :danger          {:icon-color            colors/white
+                             :label-color           colors/white
+                             :background-color      {:default  colors/danger-50
+                                                     :pressed  colors/danger-60
+                                                     :disabled colors/danger-50}}
+           :positive        {:icon-color            colors/white
+                             :label-color           colors/white
+                             :background-color      {:default  colors/success-50
+                                                     :pressed  colors/success-60
+                                                     :disabled colors/success-50-opa-30}}
+           :photo-bg        {:icon-color            colors/neutral-100
+                             :icon-secondary-color  colors/neutral-80-opa-40
+                             :label-color           colors/neutral-100
+                             :background-color      {:default  colors/white-opa-40
+                                                     :pressed  colors/white-opa-50
+                                                     :disabled colors/white-opa-40}}
+           :blur-bg         {:icon-color            colors/neutral-100
+                             :icon-secondary-color  colors/neutral-80-opa-40
+                             :label-color           colors/neutral-100
+                             :background-color      {:default  colors/neutral-80-opa-5
+                                                     :pressed  colors/neutral-80-opa-10
+                                                     :disabled colors/neutral-80-opa-5}}
+           :blur-bg-outline {:icon-color            colors/neutral-100
+                             :icon-secondary-color  colors/neutral-80-opa-40
+                             :label-color           colors/neutral-100
+                             :border-color          {:default  colors/neutral-80-opa-10
+                                                     :pressed  colors/neutral-80-opa-20
+                                                     :disabled colors/neutral-80-opa-10}}
            :shell            {:icon-color           colors/white
-                              :label                {:style    {:color colors/white}}
+                              :label-color          colors/white
                               :background-color     {:default  colors/neutral-95
                                                      :pressed  colors/neutral-95
                                                      :disabled colors/neutral-95}}}
-   :dark  {:primary         {:icon-color          colors/white
-                             :label               {:style    {:color colors/white}}
-                             :background-color    {:default  colors/primary-60
-                                                   :pressed  colors/primary-50
-                                                   :disabled colors/primary-60}}
-           :secondary       {:icon-color          colors/primary-50
-                             :label               {:style    {:color colors/primary-50}}
-                             :background-color    {:default  colors/primary-50-opa-20
-                                                   :pressed  colors/primary-50-opa-30
-                                                   :disabled colors/primary-50-opa-20}}
-           :grey            {:icon-color           colors/white
-                             :icon-secondary-color colors/neutral-40
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/neutral-80
-                                                    :pressed  colors/neutral-60
-                                                    :disabled colors/neutral-80}}
-           :dark-grey       {:icon-color           colors/white
-                             :icon-secondary-color colors/neutral-40
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/neutral-70
-                                                    :pressed  colors/neutral-60
-                                                    :disabled colors/neutral-70}}
-           :outline         {:icon-color           colors/neutral-40
-                             :icon-secondary-color colors/neutral-40
-                             :label                {:style    {:color colors/white}}
-                             :border-color         {:default  colors/neutral-70
-                                                    :pressed  colors/neutral-60
-                                                    :disabled colors/neutral-70}}
-           :ghost           {:icon-color           colors/neutral-40
-                             :icon-secondary-color colors/neutral-40
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:pressed  colors/neutral-80}}
-           :danger          {:icon-color           colors/white
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/danger-60
-                                                    :pressed  colors/danger-50
-                                                    :disabled colors/danger-60}}
-           :positive        {:icon-color       colors/white
-                             :label            {:style {:color colors/white}}
-                             :background-color {:default  colors/success-60
-                                                :pressed  colors/success-50
-                                                :disabled colors/success-60-opa-30}}
-           :photo-bg        {:icon-color           colors/white
-                             :icon-secondary-color colors/neutral-30
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/neutral-80-opa-40
-                                                    :pressed  colors/neutral-80-opa-50
-                                                    :disabled colors/neutral-80-opa-40}}
-           :blur-bg         {:icon-color           colors/white
-                             :icon-secondary-color colors/white-opa-40
-                             :label                {:style    {:color colors/white}}
-                             :background-color     {:default  colors/white-opa-5
-                                                    :pressed  colors/white-opa-10
-                                                    :disabled colors/white-opa-5}}
-           :blur-bg-outline {:icon-color           colors/white
-                             :icon-secondary-color colors/white-opa-40
-                             :label                {:style    {:color colors/white}}
-                             :border-color         {:default  colors/white-opa-10
-                                                    :pressed  colors/white-opa-20
-                                                    :disabled colors/white-opa-5}}
-           :shell            {:icon-color          colors/white
-                              :label               {:style   {:color colors/white}}
-                              :background-color    {:default colors/neutral-95}}}})
+   :dark  {:primary         {:icon-color            colors/white
+                             :label-color           colors/white
+                             :background-color      {:default  colors/primary-60
+                                                     :pressed  colors/primary-50
+                                                     :disabled colors/primary-60}}
+           :secondary       {:icon-color            colors/primary-50
+                             :label-color           colors/primary-50
+                             :background-color      {:default  colors/primary-50-opa-20
+                                                     :pressed  colors/primary-50-opa-30
+                                                     :disabled colors/primary-50-opa-20}}
+           :grey            {:icon-color            colors/white
+                             :icon-secondary-color  colors/neutral-40
+                             :label-color           colors/white
+                             :background-color      {:default  colors/neutral-80
+                                                     :pressed  colors/neutral-60
+                                                     :disabled colors/neutral-80}}
+           :dark-grey       {:icon-color            colors/white
+                             :icon-secondary-color  colors/neutral-40
+                             :label-color           colors/white
+                             :background-color      {:default  colors/neutral-70
+                                                     :pressed  colors/neutral-60
+                                                     :disabled colors/neutral-70}}
+           :outline         {:icon-color            colors/neutral-40
+                             :icon-secondary-color  colors/neutral-40
+                             :label-color           colors/white
+                             :border-color          {:default  colors/neutral-70
+                                                     :pressed  colors/neutral-60
+                                                     :disabled colors/neutral-70}}
+           :ghost           {:icon-color            colors/neutral-40
+                             :icon-secondary-color  colors/neutral-40
+                             :label-color                 colors/white
+                             :background-color      {:pressed  colors/neutral-80}}
+           :danger          {:icon-color            colors/white
+                             :label-color           colors/white
+                             :background-color      {:default  colors/danger-60
+                                                     :pressed  colors/danger-50
+                                                     :disabled colors/danger-60}}
+           :positive        {:icon-color            colors/white
+                             :label-color           colors/white
+                             :background-color      {:default  colors/success-60
+                                                     :pressed  colors/success-50
+                                                     :disabled colors/success-60-opa-30}}
+           :photo-bg        {:icon-color            colors/white
+                             :icon-secondary-color  colors/neutral-30
+                             :label-color           colors/white
+                             :background-color      {:default  colors/neutral-80-opa-40
+                                                     :pressed  colors/neutral-80-opa-50
+                                                     :disabled colors/neutral-80-opa-40}}
+           :blur-bg         {:icon-color            colors/white
+                             :icon-secondary-color  colors/white-opa-40
+                             :label-color           colors/white
+                             :background-color      {:default  colors/white-opa-5
+                                                     :pressed  colors/white-opa-10
+                                                     :disabled colors/white-opa-5}}
+           :blur-bg-outline {:icon-color            colors/white
+                             :icon-secondary-color  colors/white-opa-40
+                             :label-color           colors/white
+                             :border-color          {:default  colors/white-opa-10
+                                                     :pressed  colors/white-opa-20
+                                                     :disabled colors/white-opa-5}}
+           :shell            {:icon-color           colors/white
+                              :label-color          colors/white
+                              :background-color     {:default colors/neutral-95}}}})
+
+(defn shape-style-container [type icon size]
+  {:border-radius (if (and icon (#{:primary :secondary :danger} type))
+                    24
+                    (case size
+                      56 12
+                      40 12
+                      32 10
+                      24 8))})
 
 (defn style-container [type size disabled background-color border-color icon above width before after]
   (merge {:height             size
           :align-items        :center
           :justify-content    :center
           :flex-direction     (if above :column :row)
-          :border-radius      (if (and icon (#{:primary :secondary :danger} type))
-                                24
-                                (case size
-                                  56 12
-                                  40 12
-                                  32 10
-                                  24 8))
           :background-color   background-color
           :padding-horizontal (when-not (or icon before after)
                                 (case size 56 16 40 16 32 12 24 8))
@@ -159,6 +161,7 @@
                                 (case size 56 0 40 9 32 5 24 3))
           :padding-bottom     (when-not (or icon before after)
                                 (case size 56 0 40 9 32 5 24 4))}
+         (shape-style-container type icon size)
          (when width
            {:width width})
          (when icon
@@ -169,14 +172,19 @@
          (when disabled
            {:opacity 0.3})))
 
+(defn community-themed? [type community-color]
+  (and (= type :community) (string? community-color)))
+
 (defn button
   "with label
    [button opts \"label\"]
    opts
    {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
-            :danger/:photo-bg/:blur-bg/:blur-bg-ouline/:shell
+            :danger/:photo-bg/:blur-bg/:blur-bg-ouline/:shell/:community
     :size   40/32/24
     :icon   true/false
+    :community-color '#FFFFFF'
+    :community-text-color '#000000'
     :before :icon-keyword
     :after  :icon-keyword}
 
@@ -184,20 +192,21 @@
    [button {:icon true} :main-icons/close-circle]"
   [_ _]
   (let [pressed (reagent/atom false)]
-    (fn [{:keys [on-press disabled type size before after above width
+    (fn [{:keys [on-press disabled type size community-color community-text-color before after above width
                  override-theme override-background-color
-                 on-long-press accessibility-label icon icon-no-color style]
+                 on-long-press accessibility-label icon icon-no-color style test-ID]
           :or   {type :primary
                  size 40}}
          children]
-      (let [{:keys [icon-color icon-secondary-color background-color label border-color]}
+      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
             (get-in themes [(or
                              override-theme
                              (theme/get-theme)) type])
             state                (cond disabled :disabled @pressed :pressed :else :default)
             icon-size            (when (= 24 size) 12)
             icon-secondary-color (or icon-secondary-color icon-color)]
-        [rn/touchable-without-feedback (merge {:disabled            disabled
+        [rn/touchable-without-feedback (merge {:test-ID test-ID
+                                               :disabled            disabled
                                                :accessibility-label accessibility-label}
                                               (when on-press
                                                 {:on-press (fn []
@@ -211,48 +220,65 @@
                                                                (reset! pressed nil))})
 
          [rn/view {:style (merge
-                           (style-container
-                            type
-                            size
-                            disabled
-                            (or override-background-color (get background-color state))
-                            (get border-color state)
-                            icon
-                            above
-                            width
-                            before
-                            after)
+                           (shape-style-container type icon size)
+                           {:background-color
+                            (if (= state :pressed)
+                              (colors/theme-colors colors/neutral-100 colors/white)
+                              :transparent)}
                            style)}
-          (when above
-            [rn/view
-             [quo2.icons/icon above {:container-style {:margin-bottom 2}
-                                     :color           icon-secondary-color
-                                     :size            icon-size}]])
-          (when before
-            [rn/view
-             [quo2.icons/icon before {:container-style {:margin-left  (if (= size 40) 12 8)
-                                                        :margin-right 4}
+          [rn/view {:style (merge
+                            (style-container
+                             type
+                             size
+                             disabled
+                             (or override-background-color (get background-color state))
+                             (get border-color state)
+                             icon
+                             above
+                             width
+                             before
+                             after)
+                            (when
+                             (community-themed? type community-color)
+                              (merge
+                               {:background-color community-color}
+                               (when (= state :pressed) {:opacity 0.9}))))}
+           (when above
+             [rn/view
+              [quo2.icons/icon above {:container-style {:margin-bottom 2}
                                       :color           icon-secondary-color
                                       :size            icon-size}]])
-          [rn/view
-           (cond
-             (or icon icon-no-color)
-             [quo2.icons/icon children {:color icon-color
-                                        :no-color icon-no-color
-                                        :size  icon-size}]
+           (when before
+             [rn/view
+              [quo2.icons/icon before {:container-style {:margin-left  (if (= size 40) 12 8)
+                                                         :margin-right 4}
+                                       :color           icon-secondary-color
+                                       :size            icon-size}]])
+           [rn/view
+            (cond
+              (or icon icon-no-color)
+              [quo2.icons/icon children {:color icon-color
+                                         :no-color icon-no-color
+                                         :size  icon-size}]
 
-             (string? children)
-             [text/text (merge {:size            (when (#{56 24} size) :paragraph-2)
-                                :weight          :medium
-                                :number-of-lines 1}
-                               label)
-              children]
+              (string? children)
+              [text/text {:size            (when (#{56 24} size) :paragraph-2)
+                          :weight          :medium
+                          :number-of-lines 1
+                          :style {:color           (if
+                                                    (and
+                                                     (community-themed? type community-color)
+                                                     (string? community-text-color))
+                                                     community-text-color
+                                                     label-color)}}
 
-             (vector? children)
-             children)]
-          (when after
-            [rn/view
-             [quo2.icons/icon after {:container-style {:margin-left  4
-                                                       :margin-right (if (= size 40) 12 8)}
-                                     :color           icon-secondary-color
-                                     :size            icon-size}]])]]))))
+               children]
+
+              (vector? children)
+              children)]
+           (when after
+             [rn/view
+              [quo2.icons/icon after {:container-style {:margin-left  4
+                                                        :margin-right (if (= size 40) 12 8)}
+                                      :color           icon-secondary-color
+                                      :size            icon-size}]])]]]))))

src/quo2/components/code/snippet.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.code.snippet
   (:require ["react-native" :as react-native]
             [cljs-bean.core :as bean]
-            [clojure.string :as str]
+            [clojure.string :as string]
             [oops.core :as oops]
             [react-native.core :as rn]
             [quo2.theme :as theme]
@@ -52,7 +52,7 @@
                              :style (text-style (get-in node [:properties :className]))}]
                  (render-nodes children))
            ;; Remove newlines as we already render each line separately.
-           (-> value str/trim-newline)))
+           (-> value string/trim-newline)))
        nodes))
 
 (defn- code-block [{:keys [rows line-number-width]}]

src/quo2/components/community/community_card_view.cljs

@@ -6,15 +6,11 @@
 
 (defn community-card-view-item
   [{:keys [name description locked
-           status tokens cover tags featured]} on-press]
+           status tokens cover tags width]} on-press]
   [rn/touchable-opacity {:on-press on-press}
-   [rn/view {:style (merge (style/community-card 20)
-                           {:margin-bottom 16}
-                           (if featured
-                             {:margin-right 12}
-                             {:flex              1
-                              :margin-horizontal 20}))}
-    [rn/view {:style    {:height        230
+   [rn/view {:style (style/community-card 20)}
+    [rn/view {:style    {:width         width
+                         :height        230
                          :border-radius 20}
               :on-press on-press}
      [rn/view

src/quo2/components/community/community_list_view.cljs

@@ -6,10 +6,49 @@
    [quo2.components.counter.counter :as counter]
    [quo2.components.icon :as icons]
    [quo2.components.community.style :as style]
+   [react-native.fast-image :as fast-image]
    [react-native.core :as rn]))
 
-(defn communities-list-view-item [props {:keys [name locked? status notifications
-                                                tokens background-color]}]
+(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}}]])
+
+(defn notification-view [{:keys [muted?
+                                 unread-messages?
+                                 unread-mentions-count]}]
+  (cond
+    muted?
+    [icons/icon :i/muted {:container-style {:align-items     :center
+                                            :justify-content :center}
+                          :resize-mode     :center
+                          :size            20
+                          :color           (colors/theme-colors
+                                            colors/neutral-40
+                                            colors/neutral-50)}]
+    (pos? unread-mentions-count)
+    [counter/counter {:type :default} unread-mentions-count]
+
+    unread-messages?
+    [rn/view {:style {:width            8
+                      :height           8
+                      :border-radius    4
+                      :background-color (colors/theme-colors
+                                         colors/neutral-40
+                                         colors/neutral-60)}}]))
+
+(defn communities-list-view-item [props {:keys [name
+                                                locked?
+                                                status
+                                                muted?
+                                                unread-messages?
+                                                unread-mentions-count
+                                                community-icon
+                                                tokens
+                                                background-color]}]
   [rn/view {:style (merge (style/community-card 16)
                           {:margin-bottom     12
                            :margin-horizontal 20})}
@@ -24,8 +63,8 @@
                :padding-vertical   8
                :background-color   background-color}
       [rn/view]
-       ;;TODO new pure component based on quo2 should be implemented without status-im usage
-       ;[communities.icon/community-icon-redesign community 32]]
+      (when community-icon
+        [community-icon-view community-icon])
       [rn/view {:flex              1
                 :margin-horizontal 12}
        [text/text {:weight              :semi-bold
@@ -33,7 +72,7 @@
                    :accessibility-label :community-name-text
                    :number-of-lines     1
                    :ellipsize-mode      :tail
-                   :style               {:color (when (= notifications :muted)
+                   :style               {:color (when muted?
                                                   (colors/theme-colors
                                                    colors/neutral-40
                                                    colors/neutral-60))}}
@@ -42,28 +81,18 @@
       (if (= status :gated)
         [community-view/permission-tag-container {:locked? locked?
                                                   :tokens  tokens}]
-        (cond
-          (= notifications :unread-messages-count)
-          [rn/view {:style {:width            8
-                            :height           8
-                            :border-radius    4
-                            :background-color (colors/theme-colors
-                                               colors/neutral-40
-                                               colors/neutral-60)}}]
+        [notification-view {:muted?                muted?
+                            :unread-mentions-count unread-mentions-count
+                            :unread-messages?      unread-messages?}])]]]])
 
-          (= notifications :unread-mentions-count)
-          [counter/counter {:type :default} 5]
-
-          (= notifications :muted)
-          [icons/icon :i/muted {:container-style {:align-items     :center
-                                                  :justify-content :center}
-                                :resize-mode     :center
-                                :size            20
-                                :color           (colors/theme-colors
-                                                  colors/neutral-40
-                                                  colors/neutral-50)}]))]]]])
-
-(defn communities-membership-list-item [props {:keys [name status tokens locked?]}]
+(defn communities-membership-list-item [props {:keys [name
+                                                      muted?
+                                                      unread-messages?
+                                                      unread-mentions-count
+                                                      status
+                                                      community-icon
+                                                      tokens
+                                                      locked?]}]
   [rn/view {:margin-bottom 20}
    [rn/touchable-highlight (merge {:underlay-color colors/primary-50-opa-5
                                    :style          {:border-radius 12}}
@@ -72,8 +101,9 @@
      [rn/view {:flex-direction :row
                :border-radius  16
                :align-items    :center}
-      ;;TODO new pure component based on quo2 should be implemented without status-im usage
-      ;[communities.icon/community-icon-redesign community 32]
+
+      (when community-icon
+        [community-icon-view community-icon])
       [rn/view {:flex            1
                 :margin-left     12
                 :justify-content :center}
@@ -84,8 +114,12 @@
          :weight              :semi-bold
          :size                :paragraph-1}
         name]]
-      (when (= status :gated)
-        [rn/view {:justify-content :center
-                  :margin-right    12}
+
+      [rn/view {:justify-content :center
+                :margin-right    16}
+       (if (= status :gated)
          [community-view/permission-tag-container {:locked? locked?
-                                                   :tokens  tokens}]])]]]])
+                                                   :tokens  tokens}]
+         [notification-view {:muted?                muted?
+                             :unread-mentions-count unread-mentions-count
+                             :unread-messages?      unread-messages?}])]]]]])

src/quo2/components/community/community_view.cljs

@@ -28,13 +28,9 @@
      [community-stats {:icon       :i/group
                        :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
                        :icon-color icon-color}]
-     [community-stats {:icon       :i/lightning
+     [community-stats {:icon          :i/lightning
                        :members-count "112.1K"
-                       :icon-color icon-color}]
-     (when (= type :card-view)
-       [community-stats {:icon       :i/placeholder
-                         :count      4
-                         :icon-color icon-color}])]))
+                       :icon-color    icon-color}]]))
 
 (defn community-tags [tags]
   [rn/view (style/community-tags-container)
@@ -69,10 +65,12 @@
        :style               {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(defn permission-tag-container [{:keys [locked? tokens]}]
+(defn permission-tag-container [{:keys [locked? tokens on-press]}]
   [permission/tag {:background-color (colors/theme-colors
                                       colors/neutral-10
                                       colors/neutral-80)
                    :locked?          locked?
                    :tokens           tokens
-                   :size             24}])
+
+                   :size             24
+                   :on-press         on-press}])

src/quo2/components/community/token_gating.cljs

@@ -0,0 +1,259 @@
+(ns quo2.components.community.token-gating
+  (:require [quo.react-native :as rn]
+            [quo2.components.avatars.channel-avatar :as channel-avatar]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.icon :as icon]
+            [quo2.components.info.information-box :as information-box]
+            [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]))
+
+(def ^:private token-tag-horizontal-spacing 7)
+(def token-tag-vertical-spacing 5)
+
+(def styles {:container {:flex 1
+                         :padding-horizontal 20}
+             :header-container {:flex-direction :row
+                                :align-items :center}
+             :header-spacing-community {:margin-bottom 16}
+             :header-spacing-channel {:margin-bottom 24}
+             :header-avatar {:margin-right 8}
+             :header-community-avatar-image {:width 32 :height 32}
+             :header-title-container {:flex 1
+                                      :flex-direction :row
+                                      :align-items :center}
+             :header-title-lock {:margin-left 6}
+             :header-info-button {:margin-left 8}
+             :token-requirement-text-spacing {:margin-vertical 8}
+             :token-requirement-list-spacing {:padding-vertical (- 8 token-tag-vertical-spacing)}
+             :token-row {:flex-direction :row
+                         :flex-wrap :wrap
+                         :align-items :center}
+             :token-row-container {:flex-direction :row
+                                   :align-items :center
+                                   :margin-horizontal (- token-tag-horizontal-spacing)}
+             :token-row-container-no-shift {:margin-left 0}
+             :token-row-or-text {:margin-right 3}
+             :token-tag-spacing {:margin-horizontal token-tag-horizontal-spacing
+                                 :margin-vertical token-tag-vertical-spacing}
+             :divider {:height 1
+                       :margin-horizontal -20
+                       :margin-top (- 12 token-tag-vertical-spacing)
+                       :margin-bottom 8}
+             :membership-request-denied {:margin-top 13}
+             :enter-button {:margin-top 16}
+             :info-text {:margin-top 12
+                         :text-align :center
+                         :padding-horizontal 20}})
+
+(defn multiple-token-requirements? [token-requirement-lists]
+  (when (vector? (first token-requirement-lists))
+    (> (count token-requirement-lists) 1)))
+
+(defn is-token-requirement-met? [token-requirement-list]
+  (and (seq token-requirement-list)
+       (every?
+        (fn [token]
+          (get token :is-sufficient?))
+        token-requirement-list)))
+
+(defn are-multiple-token-requirements-met? [token-requirement-lists]
+  (if (multiple-token-requirements? token-requirement-lists)
+    (some is-token-requirement-met? token-requirement-lists)
+    (is-token-requirement-met? token-requirement-lists)))
+
+(defn token-requirement-list-row [tokens community-color]
+  [rn/view {:style (merge
+                    (get styles :token-row)
+                    (get styles :token-requirement-list-spacing))}
+   (map-indexed (fn [token-index token]
+                  (let [{:keys [token-img-src token amount is-sufficient? is-purchasable?]} token]
+                    ^{:key token-index}
+                    [rn/view {:style (get styles :token-tag-spacing)}
+                     [token-tag/token-tag {:token          token
+                                           :value          amount
+                                           :size           24
+                                           :border-color   community-color
+                                           :is-required    is-sufficient?
+                                           :is-purchasable is-purchasable?
+                                           :token-img-src  token-img-src}]]))
+                tokens)])
+
+(defn token-requirement-list [props community-color]
+  (let [{:keys [gate token-requirements-changed? required-tokens-lost?]} props
+        [gate-type token-requirement-lists] gate
+        multiple-token-requirements? (multiple-token-requirements? token-requirement-lists)
+        is-sufficient? (are-multiple-token-requirements-met? token-requirement-lists)
+        you-must-hold-label (if (= gate-type :join)
+                              (cond
+                                token-requirements-changed? :t/you-must-now-hold
+                                required-tokens-lost? :t/you-must-always-hold
+                                :else :t/you-must-hold)
+                              :t/you-must-hold)
+        message-label (cond
+                        (= gate-type :join)
+                        (cond
+                          token-requirements-changed? :t/community-join-requirements-changed
+                          required-tokens-lost? :t/community-join-requirements-tokens-lost
+                          :else (if is-sufficient? :t/community-join-requirements-met :t/community-join-requirements-not-met))
+                        (= gate-type :read)
+                        (if is-sufficient?
+                          :t/community-channel-read-requirements-met
+                          :t/community-channel-read-requirements-not-met)
+                        (= gate-type :write)
+                        (if is-sufficient?
+                          :t/community-channel-write-requirements-met
+                          :t/community-channel-write-requirements-not-met))]
+    [rn/view
+     [rn/view {:style (get styles :token-requirement-text-spacing)}
+      [text/text {:weight :medium
+                  :number-of-lines 1}
+       (i18n/label
+        message-label)]
+      [text/text {:size :paragraph-2
+                  :number-of-lines 1}
+       (i18n/label
+        you-must-hold-label)]]
+
+     (if multiple-token-requirements?
+       (map-indexed
+        (fn [token-requirement-index tokens]
+          ^{:key token-requirement-index}
+          [rn/view {:style (merge
+                            (get styles :token-row-container)
+                            (when-not (= token-requirement-index 0)
+                              (get styles :token-row-container-no-shift)))}
+           (when-not (= token-requirement-index 0)
+             [text/text {:style (get styles :token-row-or-text)
+                         :size :paragraph-2} "or"])
+           [token-requirement-list-row tokens community-color]])
+        token-requirement-lists)
+       [rn/view {:style (get styles :token-row-container)}
+        [token-requirement-list-row token-requirement-lists community-color]])]))
+
+(defn is-community-locked? [community]
+  (not (are-multiple-token-requirements-met? (get-in community [:gates :join]))))
+
+(defn is-channel-locked? [channel]
+  (not (are-multiple-token-requirements-met?
+        (or (get-in channel [:gates :read])
+            (get-in channel [:gates :write])))))
+
+(defn token-gating
+  "[token-gating opts]
+   opts
+   {
+     :community {
+       :name string
+       :community-avatar-img-src string
+       :community-color string
+       :community-text-color string
+       :token-requirements-changed? boolean
+       :required-tokens-lost? boolean
+     }
+     :channel {
+       :name string
+       :emoji string
+       :emoji-background-color :string
+       :on-enter-channel callback
+       :membership-request-denied? boolean
+     }
+   }"
+  [_ _]
+  (fn [{:keys [community channel]}]
+    (let [type (if (some? community) :community :channel)
+          {:keys [name
+                  emoji
+                  emoji-background-color
+                  on-enter-channel
+                  community-avatar-img-src
+                  community-color
+                  community-text-color
+                  membership-request-denied?
+                  token-requirements-changed?
+                  required-tokens-lost?
+                  gates]} (if (= type :community) community channel)
+          locked? (if
+                   (= type :community)
+                    (is-community-locked? community)
+                    (is-channel-locked? channel))]
+
+      [rn/view {:style (merge (get styles :container) {:background-color (colors/theme-colors colors/white colors/neutral-90)})}
+       [rn/view {:style (merge
+                         (get styles :header-container)
+                         (if
+                          (= type :community)
+                           (get styles :header-spacing-community)
+                           (get styles :header-spacing-channel)))}
+
+        [rn/view {:style (get styles :header-avatar)}
+         (if (= type :community)
+           [fast-image/fast-image {:source              community-avatar-img-src
+                                   :style               (get styles :header-community-avatar-image)}]
+
+           [channel-avatar/channel-avatar {:big? true
+                                           :locked? locked?
+                                           :emoji emoji
+                                           :emoji-background-color emoji-background-color}])]
+
+        [rn/view {:style (get styles :header-title-container)}
+         [text/text {:weight :semi-bold
+                     :number-of-lines 1
+                     :size  :heading-1
+                     :style (get styles :header-text)} (if (= type :community) name (str "# " name))]
+
+         (when (= type :community)
+           [icon/icon (if locked?
+                        :main-icons2/locked
+                        :main-icons2/unlocked)
+            {:container-style (get styles :header-title-lock)
+             :color           (colors/theme-colors
+                               colors/neutral-50
+                               colors/neutral-40)}])]
+
+        [button/button {:type :outline
+                        :size 32
+                        :icon true
+                        :style (get styles :header-info-button)} :main-icons2/info]]
+
+       (map-indexed (fn [gate-index gate]
+                      ^{:key gate-index}
+                      [:<>
+                       (when-not (= gate-index 0)
+                         [rn/view {:style (merge
+                                           (get styles :divider)
+                                           {:background-color (colors/theme-colors
+                                                               colors/neutral-10
+                                                               colors/neutral-80)})}])
+                       [token-requirement-list {:gate gate :token-requirements-changed? token-requirements-changed? :required-tokens-lost? required-tokens-lost?} community-color]])
+                    gates)
+
+       (when (= type :channel)
+         (if membership-request-denied?
+           [information-box/information-box {:type :error
+                                             :icon :main-icons2/untrustworthy
+                                             :no-icon-color? true
+                                             :style (get styles :membership-request-denied)}
+            (i18n/label
+             :t/membership-request-denied)]
+
+           [:<>
+            [button/button {:type :community
+                            :community-color community-color
+                            :community-text-color community-text-color
+                            :style (get styles :enter-button)
+                            :disabled locked?
+                            :on-press on-enter-channel}
+             (str "# " (i18n/label
+                        :t/enter-channel))]
+            [text/text
+             {:size :paragraph-2
+              :style (merge
+                      (get styles :info-text)
+                      {:color (colors/theme-colors
+                               colors/neutral-50
+                               colors/neutral-40)})}
+             (i18n/label
+              :t/community-enter-channel-info)]]))])))

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

@@ -0,0 +1,34 @@
+(ns quo2.components.counter.--tests--.counter-component-spec
+  (:require ["@testing-library/react-native" :as rtl]
+            [quo2.components.counter.counter :as counter]
+            [reagent.core :as reagent]))
+
+(defn render-counter
+  ([]
+   (render-counter {} nil))
+  ([opts value]
+   (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))))
+
+(js/global.test "renders counter with a string value"
+                (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))))
+
+(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))))

src/quo2/components/counter/counter.cljs

@@ -20,7 +20,7 @@
 (defn counter
   "type:    default, secondary, grey, outline
    value:   integer"
-  [{:keys [type override-text-color override-bg-color style]} value]
+  [{:keys [type override-text-color override-bg-color style accessibility-label]} value]
   (let [type       (or type :default)
         text-color (or override-text-color
                        (if (or
@@ -38,7 +38,10 @@
                      1     16
                      2     20
                      28)]
-    [rn/view {:style (cond-> (merge
+    [rn/view {:test-ID :counter-component
+              :accessible true
+              :accessibility-label accessibility-label
+              :style (cond-> (merge
                               {:align-items     :center
                                :justify-content :center
                                :border-radius   6

src/quo2/components/dividers/date.cljs

@@ -0,0 +1,18 @@
+(ns quo2.components.dividers.date
+  (:require [react-native.core :as rn]
+            [quo2.components.separator :as separator]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]))
+
+(defn date [value]
+  [rn/view {:margin-vertical 16
+            :padding-right 8
+            :padding-left 62}
+   [text/text {:weight              :medium
+               :accessibility-label :divider-date-text
+               :size :label
+               :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
+                       :text-transform :capitalize
+                       :margin-bottom 4}}
+    value]
+   [separator/separator]])

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

@@ -0,0 +1,63 @@
+(ns quo2.components.drawers.--tests--.action-drawers-component-spec
+  (:require ["@testing-library/react-native" :as rtl]
+            [quo2.components.drawers.action-drawers :as action-drawer]
+            [reagent.core :as reagent]))
+
+(defn render-action-drawer
+  ([options]
+   (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))))
+
+(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))))
+
+(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)))))
+
+(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))))
+
+(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))))

src/quo2/components/drawers/action_drawers.cljs

@@ -6,69 +6,84 @@
 
 (defn- get-icon-color [danger?]
   (if danger?
-    (colors/theme-colors colors/danger-50 colors/danger-60)
+    colors/danger-50
     (colors/theme-colors colors/neutral-50 colors/neutral-40)))
 
+(def divider
+  [rn/view {:style {:border-top-width 1
+                    :border-top-color (colors/theme-colors
+                                       colors/neutral-10 colors/neutral-90)
+                    :margin-top       8
+                    :margin-bottom    7
+                    :align-items      :center
+                    :flex-direction   :row}
+            :accessible true
+            :accessibility-label :divider}])
+
 (defn action [{:keys [icon
                       label
                       sub-label
                       right-icon
                       danger?
-                      on-press] :as action-props}]
+                      on-press
+                      add-divider?
+                      accessibility-label] :as action-props}]
   (when action-props
-    [rn/touchable-opacity {:on-press on-press}
-     [rn/view {:style
-               {:height            (if sub-label 56 47)
-                :margin-horizontal 20
-                :flex-direction    :row}}
+    [:<> {:key label}
+     (when add-divider? divider)
+     [rn/touchable-highlight {:accessibility-label accessibility-label
+                              :style          {:border-radius     12
+                                               :height (if sub-label 58 50)
+                                               :margin-horizontal 8}
+                              :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
+                              :on-press       on-press}
       [rn/view {:style
-                {:height        20
-                 :margin-top    :auto
-                 :margin-bottom :auto
-                 :margin-right  12
-                 :width         20}}
-       [icon/icon icon
-        {:color (get-icon-color danger?)
-         :size  20}]]
-      [rn/view
-       {:style
-        {:flex            1
-         :justify-content :center}}
-       [text/text
-        {:size   :paragraph-1
-         :weight :medium
-         :style  {:color
-                  (when danger?
-                    (colors/theme-colors colors/danger-50 colors/danger-60))}}
-        label]
-       (when sub-label
-         [text/text
-          {:size  :paragraph-2
-           :style {:color
-                   (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
-          sub-label])]
-      (when right-icon
-        [rn/view {:style
-                  {:height        20
-                   :margin-top    :auto
-                   :margin-bottom :auto
-                   :width         20}}
-         [icon/icon right-icon
-          {:color (get-icon-color danger?)
-           :size  20}]])]]))
-
-(defn divider []
-  [rn/view {:style {:border-top-width 1
-                    :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
-                    :margin-top       8
-                    :margin-bottom    7
-                    :align-items      :center
-                    :flex-direction   :row}}])
+                {:height (if sub-label 58 50)
+                 :margin-horizontal 12
+                 :flex-direction    :row}}
+       [rn/view {:accessibility-label :left-icon-for-action
+                 :accessible true
+                 :style
+                 {:height        20
+                  :margin-top    :auto
+                  :margin-bottom :auto
+                  :margin-right  12
+                  :width         20}}
+        [icon/icon icon
+         {:color (get-icon-color danger?)
+          :size  20}]]
+       [rn/view
+        {:style
+         {:flex            1
+          :justify-content :center}}
+        [text/text
+         {:size   :paragraph-1
+          :weight :medium
+          :style  {:color
+                   (when danger?
+                     (colors/theme-colors colors/danger-50 colors/danger-60))}}
+         label]
+        (when sub-label
+          [text/text
+           {:size  :paragraph-2
+            :style {:color
+                    (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
+           sub-label])]
+       (when right-icon
+         [rn/view {:style
+                   {:height        20
+                    :margin-top    :auto
+                    :margin-bottom :auto
+                    :width         20}
+                   :accessible true
+                   :accessibility-label :right-icon-for-action}
+          [icon/icon right-icon
+           {:color (get-icon-color danger?)
+            :size  20}]])]]]))
 
 (defn action-drawer [sections]
-  [:<> {:style
-        {:flex 1}}
-   (interpose
-    [divider]
+  [:<>
+   (doall
     (for [actions sections]
-      (map action actions)))])
+      (doall
+       (map action actions))))])

src/quo2/components/icons/icons.clj

@@ -1,24 +1,29 @@
 (ns quo2.components.icons.icons
   (:require [clojure.java.io :as io]
-            [clojure.string :as cstr]))
+            [clojure.string :as string]))
 
 (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 (str "." path el ".png")
+    (let [s (combine-path path el)
           k (-> el
-                (cstr/replace "_" "-")
-                (cstr/replace " " "-")
-                (cstr/lower-case)
+                (string/replace "_" "-")
+                (string/replace " " "-")
+                (string/lower-case)
                 (str size))]
       [k `(js/require ~s)])))
 
 (defn get-files [path]
   (->> (io/file path)
        file-seq
-       (filter #(cstr/ends-with? % "png"))
-       (map #(first (cstr/split (.getName %) #"@")))
+       (filter #(string/ends-with? % "png"))
+       (map #(first (string/split (.getName %) #"@")))
        distinct))
 
 (defn get-icons [size]
@@ -30,4 +35,5 @@
    (get-icons 12)
    (get-icons 16)
    (get-icons 20)
-   (get-icons 24)))
+   (get-icons 24)
+   (get-icons 32)))

src/quo2/components/info/info_message.cljs

@@ -19,19 +19,21 @@
 (defn info-message
   "[info-message opts \"message\"]
   opts
-  {:type       :default/:success/:error
-   :size       :default/:tiny
-   :icon       :main-icons/info ;; info message icon
-   :text-color colors/white     ;; text color override
-   :icon-color colors/white     ;; icon color override"
-  [{:keys [type size icon text-color icon-color]} message]
+  {:type           :default/:success/:error
+   :size           :default/:tiny
+   :icon           :main-icons/info ;; info message icon
+   :text-color     colors/white     ;; text color override
+   :icon-color     colors/white    ;; icon color override
+   :no-icon-color? false       ;; disable tint color for icon"
+  [{:keys [type size icon text-color icon-color no-icon-color?]} message]
   (let [weight      (if (= size :default) :regular :medium)
         size        (if (= size :default) :paragraph-2 :label)
         text-color  (or text-color (get-color type))
         icon-color  (or icon-color text-color)]
     [rn/view {:style {:flex-direction :row
                       :flex           1}}
-     [quo2.icons/icon icon {:color           icon-color
+     [quo2.icons/icon icon {:color icon-color
+                            :no-color no-icon-color?
                             :size            12
                             :container-style {:margin-top 3}}]
      [text/text {:size   size

src/quo2/components/info/information_box.cljs

@@ -49,11 +49,12 @@
     :closed?         true/false          ;; information box's state
     :id              :information-box-id ;; unique id (required for closable? information box)
     :icon            :main-icons/info    ;; information box icon
+    :no-icon-color?  false               ;; disable tint color for icon
     :style           style
     :button-label    \"PressMe\"         ;; add action button with label
     :on-button-press action              ;; (required for information box with button-label)
     :on-close        on-close            ;; (optional on-close call)"
-  [{:keys [type closable? closed? id icon style button-label on-button-press on-close]} message]
+  [{:keys [type closable? closed? id icon style button-label on-button-press on-close no-icon-color?]} message]
   (let [background-color (get-color-by-type type :bg)
         border-color     (get-color-by-type type :border)
         icon-color       (get-color-by-type type :icon)
@@ -73,7 +74,8 @@
         [info-message/info-message {:size        :default
                                     :icon        icon
                                     :text-color  text-color
-                                    :icon-color  icon-color} message]
+                                    :icon-color  icon-color
+                                    :no-icon-color? no-icon-color?} message]
         (when closable?
           [rn/touchable-opacity
            {:on-press            on-close

src/quo2/components/list_items/channel.cljs

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

src/quo2/components/loaders/skeleton.cljs

@@ -0,0 +1,77 @@
+(ns quo2.components.loaders.skeleton
+  (:require [react-native.core :as rn]
+            [react-native.masked-view :as masked-view]
+            [reagent.core :as reagent]
+            [react-native.reanimated :as reanimated]
+            [quo2.foundations.colors :as colors]))
+
+(def message-skeleton-height 54)
+
+(def avatar-skeleton-size 32)
+
+(def message-content-width [{:author  80
+                             :message 249}
+                            {:author  124
+                             :message 156}
+                            {:author  96
+                             :message 212}
+                            {:author  112
+                             :message 144}])
+
+;; Standlone message skeleton
+(defn message-skeleton []
+  [:f>
+   (fn []
+     (let [color                   (colors/theme-colors colors/neutral-5 colors/neutral-70)
+           loading-color           (colors/theme-colors colors/neutral-10 colors/neutral-60)
+           content-width           (rand-nth message-content-width)
+           author-width            (content-width :author)
+           message-width           (content-width :message)
+           {window-width :width}   (rn/use-window-dimensions)
+           translate-x             (reanimated/use-shared-value (- window-width))
+           animated-gradient-style (reanimated/apply-animations-to-style
+                                    {:transform [{:translateX translate-x}]}
+                                    {:width     window-width
+                                     :height    "100%"})]
+       (reanimated/animate-shared-value-with-repeat translate-x window-width 1000 :linear (- 1) false)
+       [masked-view/masked-view
+        {:style {:height message-skeleton-height}
+         :maskElement (reagent/as-element
+                       [rn/view {:style {:height           message-skeleton-height
+                                         :flex-direction   :row
+                                         :padding-vertical 11
+                                         :background-color :transparent
+                                         :padding-left     21}}
+                        [rn/view {:style {:height           avatar-skeleton-size
+                                          :width            avatar-skeleton-size
+                                          :border-radius    (/ avatar-skeleton-size 2)
+                                          :background-color color
+                                          :overflow         :hidden}}]
+                        [rn/view {:style {:padding-left     8
+                                          :background-color :transparent}}
+                         [rn/view {:style {:height           8
+                                           :width            author-width
+                                           :border-radius    6
+                                           :background-color color
+                                           :margin-bottom    8
+                                           :overflow         :hidden}}]
+                         [rn/view {:style {:height           16
+                                           :width            message-width
+                                           :border-radius    6
+                                           :overflow         :hidden
+                                           :background-color color}}]]])}
+        [rn/view {:style {:flex             1
+                          :background-color color}}
+         [reanimated/linear-gradient {:colors   [color color loading-color color color]
+                                      :start    {:x 0 :y 0}
+                                      :end      {:x 1 :y 0}
+                                      :style    animated-gradient-style}]]]))])
+
+(defn skeleton [parent-height]
+  (let [number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))]
+    [rn/view {:style {:background-color (colors/theme-colors
+                                         colors/white
+                                         colors/neutral-90)
+                      :flex              1}}
+     (for [n (range number-of-skeletons)]
+       [message-skeleton {:key n}])]))

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

@@ -0,0 +1,39 @@
+(ns quo2.components.messages.author.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:flex           1
+   :flex-wrap      :wrap
+   :height         18
+   :flex-direction :row
+   :align-items    :center})
+
+(defn ens-text []
+  {:color (colors/theme-colors colors/neutral-100 colors/white)})
+
+(defn nickname-text []
+  {:color (colors/theme-colors colors/neutral-100 colors/white)})
+
+(def middle-dot-nickname
+  {:color             colors/neutral-50
+   :margin-horizontal 4})
+
+(def chat-key-text
+  {:color       colors/neutral-50
+   :margin-left 8})
+
+(def middle-dot-chat-key
+  {:color       colors/neutral-50
+   :margin-left 4})
+
+(defn profile-name-text [nickname?]
+  {:color (if nickname?
+            (colors/theme-colors colors/neutral-60 colors/neutral-40)
+            (colors/theme-colors colors/neutral-100 colors/white))})
+
+(def icon-container
+  {:margin-left 4})
+
+(defn time-text [ens?]
+  {:color       colors/neutral-50
+   :margin-left (if ens? 8 4)})

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

@@ -0,0 +1,88 @@
+(ns quo2.components.messages.author.view
+  (:require
+   [quo2.components.messages.author.style :as style]
+   [react-native.core :as rn]
+   [quo2.components.markdown.text :as text]
+   [quo2.components.icon :as icons]
+   [status-im.utils.utils :as utils]
+   [clojure.string :as string]))
+
+(def middle-dot "·")
+
+(defn display-name [{:keys [profile-name nickname ens-name text-style]}]
+  (let [ens?      (-> ens-name string/blank? not)
+        nickname? (-> nickname string/blank? not)]
+    (if ens?
+      [text/text (merge {:weight :semi-bold
+                         :size   :paragraph-2
+                         :style  (style/ens-text)}
+                        text-style)
+       ens-name]
+      [:<>
+       (if nickname?
+         [text/text (merge {:weight :semi-bold
+                            :size   :paragraph-2
+                            :style  (style/nickname-text)}
+                           text-style)
+          nickname]
+         [text/text (merge {:weight :semi-bold
+                            :size   :paragraph-2
+                            :style  (style/profile-name-text nickname?)}
+                           text-style)
+          profile-name])])))
+
+(defn author [{:keys [profile-name nickname chat-key ens-name time-str contact? verified? untrustworthy?]}]
+  [:f>
+   (fn []
+     (let [ens? (-> ens-name string/blank? not)
+           nickname? (-> nickname string/blank? not)]
+       [rn/view {:style style/container}
+        (if ens?
+          [text/text {:weight :semi-bold
+                      :size   :paragraph-2
+                      :style  (style/ens-text)}
+           ens-name]
+          [:<>
+           (when nickname?
+             [:<>
+              [text/text {:weight :semi-bold
+                          :size   :paragraph-2
+                          :style  (style/nickname-text)}
+               nickname]
+              [text/text {:size  :paragraph-2
+                          :style style/middle-dot-nickname}
+               middle-dot]])
+           [text/text {:weight (if nickname? :medium :semi-bold)
+                       :size   :paragraph-2
+                       :style  (style/profile-name-text nickname?)}
+            profile-name]])
+        (when contact?
+          [icons/icon :main-icons2/contact
+           {:size            12
+            :no-color        true
+            :container-style style/icon-container}])
+        (cond
+          verified?
+          [icons/icon :main-icons2/verified
+           {:size            12
+            :no-color        true
+            :container-style style/icon-container}]
+          untrustworthy?
+          [icons/icon :main-icons2/untrustworthy
+           {:size            12
+            :no-color        true
+            :container-style style/icon-container}])
+        (when-not ens?
+          [text/text {:monospace true
+                      :size      :paragraph-2
+                      :style     style/chat-key-text}
+           (utils/get-shortened-address chat-key)])
+        (when-not ens?
+          [text/text {:monospace true
+                      :size      :paragraph-2
+                      :style     style/middle-dot-chat-key}
+           middle-dot])
+        [text/text {:monospace true
+                    :size      :paragraph-2
+                    :style     (style/time-text ens?)}
+         time-str]]))])

src/quo2/components/messages/system_message.cljs

@@ -1,12 +1,12 @@
 (ns quo2.components.messages.system-message
-  (:require [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [quo2.theme :as theme]
-            [quo2.components.avatars.icon-avatar :as icon-avatar]
+  (:require [quo2.components.avatars.icon-avatar :as icon-avatar]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [utils :as utils]))
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [utils.string :as utils]))
 
 (def themes-landed {:pinned  colors/primary-50-opa-5
                     :added   colors/primary-50-opa-5
@@ -60,19 +60,19 @@
             :flex-direction  :row}
    [rn/view {:align-items    :center
              :flex-direction :row}
-    [sm-icon {:icon    :main-icons/delete16
+    [sm-icon {:icon    :main-icons/delete
               :color   :danger
               :opacity 5}]
     [text/text {:size  :paragraph-2
                 :style {:color        (get-color :text)
                         :margin-right 5}}
-     (or label (:message-deleted labels))]
+     (or (get labels label) label (:message-deleted labels))]
     [sm-timestamp timestamp-str]]])
 
 (defmethod sm-render :added [{:keys [state mentions timestamp-str labels]}]
   [rn/view {:align-items    :center
             :flex-direction :row}
-   [sm-icon {:icon    :main-icons/add-user16
+   [sm-icon {:icon    :main-icons/add-user
              :color   :primary
              :opacity (if (= state :landed) 0 5)}]
    [sm-user-avatar (:image (first mentions))]
@@ -94,7 +94,7 @@
   [rn/view {:flex-direction :row
             :flex           1
             :align-items    :center}
-   [sm-icon {:icon    :main-icons/pin16
+   [sm-icon {:icon    :main-icons/pin
              :color   :primary
              :opacity (if (= state :landed) 0 5)}]
    [rn/view {:flex-direction :column

src/quo2/components/navigation/bottom_nav_tab.cljs

@@ -26,7 +26,7 @@
     :icon-color-anim        reanimated shared value
   "
   [{:keys [icon new-notifications? notification-indicator counter-label
-           on-press pass-through? icon-color-anim accessibility-label]}]
+           on-press pass-through? icon-color-anim accessibility-label test-ID]}]
   [:f>
    (fn []
      (let [icon-animated-style       (reanimated/apply-animations-to-style
@@ -40,7 +40,8 @@
                                        :height           40
                                        :border-radius    10})]
        [rn/touchable-without-feedback
-        {:on-press            on-press
+        {:test-ID test-ID
+         :on-press            on-press
          :on-press-in         #(toggle-background-color background-color false pass-through?)
          :on-press-out        #(toggle-background-color background-color true pass-through?)
          :accessibility-label accessibility-label}

src/quo2/components/navigation/floating_shell_button.cljs

@@ -14,31 +14,35 @@
       :customization-color customization-color}]))
 
 (defn floating-shell-button
-  "[floating-shell-button dynamic-buttons style]
-  dynamic-buttons
-  {:button-type {:on-press on-press :count count}}"
-  [dynamic-buttons style opacity-anim pointer-anim]
-  [:f>
-   (fn []
-     (let [original-style (merge {:flex-direction    :row
-                                  :margin-horizontal 12} style)
-           animated-style (reanimated/apply-animations-to-style
-                           {:opacity        opacity-anim
-                            :pointer-events pointer-anim}
-                           original-style)]
-       [reanimated/view {:style animated-style}
-        ;; Left Section
-        [rn/view {:style {:flex 1}}
-         [dynamic-button-view :search dynamic-buttons {:position :absolute
-                                                       :right    8}]]
-        ;; Mid Section (jump-to)
-        [dynamic-button-view :jump-to dynamic-buttons nil]
+  "[floating-shell-button dynamic-buttons style opacity-anim pointer-anim]
+  dynamic-buttons {:button-type {:on-press on-press :count count}}
+  style           override style
+  opacity-anim    reanimated value (optional)"
+  ([dynamic-button style]
+   (floating-shell-button dynamic-button style nil))
+  ([dynamic-buttons style opacity-anim]
+   [:f>
+    (fn []
+      (let [original-style (merge {:flex-direction    :row
+                                   :margin-horizontal 12
+                                   :pointer-events    :box-none} style)
+            animated-style (reanimated/apply-animations-to-style
+                            (if opacity-anim
+                              {:opacity opacity-anim} {})
+                            original-style)]
+        [reanimated/view {:style animated-style}
+         ;; Left Section
+         [rn/view {:style {:flex 1}}
+          [dynamic-button-view :search dynamic-buttons {:position :absolute
+                                                        :right    8}]]
+         ;; Mid Section (jump-to)
+         [dynamic-button-view :jump-to dynamic-buttons nil]
         ;; Right Section
-        [rn/view {:style {:flex 1}}
-         [rn/view {:style {:position       :absolute
-                           :flex-direction :row
-                           :right          0}}
-          [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
-          [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
-          [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
-          [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]]))])
+         [rn/view {:style {:flex 1}}
+          [rn/view {:style {:position       :absolute
+                            :flex-direction :row
+                            :right          0}}
+           [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
+           [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
+           [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
+           [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]]))]))

src/quo2/components/navigation/page_nav.cljs

@@ -3,7 +3,9 @@
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.avatars.user-avatar :as user-avatar]))
 
 (def ^:private centrify-style
   {:display         :flex
@@ -12,12 +14,10 @@
 
 (def ^:private align-left (assoc centrify-style :align-items :flex-start))
 
-(def ^:private icon-styles (assoc centrify-style :width 32 :height 32 :border-radius 10))
-
 (defn- big? [size] (= size :big))
 
 (defn- icon-props [color size]
-  (merge {:size      20
+  (merge {:size            20
           :container-style {:width  (if (big? size)
                                       20
                                       16)
@@ -28,34 +28,35 @@
            {:color color}
            {:no-color true})))
 
-(defn render-left-section [{:keys [on-press icon
-                                   icon-color icon-background-color]}
-                           put-middle-section-on-left?]
-  [rn/view {:style (merge
-                    icon-styles
-                    {:background-color icon-background-color
-                     :width            32
-                     :height           32}
-                    (when put-middle-section-on-left? {:margin-right 5}))}
-   [rn/touchable-opacity {:on-press on-press}
-    [icons/icon icon (icon-props icon-color :big)]]])
+(defn left-section-view [{:keys [on-press icon accessibility-label type] :or {type :grey}}
+                         put-middle-section-on-left?]
+  [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
+   [button/button {:on-press            on-press
+                   :icon                true
+                   :type                type
+                   :size                32
+                   :accessibility-label accessibility-label}
+    icon]])
 
 (defn- mid-section-comp
-  [{:keys [description-user-icon horizontal-description? text-secondary-color align-mid? text-color icon main-text type description]}]
-  [rn/view {:style (assoc
-                    centrify-style
-                    :flex-direction    :row
-                    :margin-horizontal 2)}
+  [{:keys [description-img description-user-icon horizontal-description?
+           text-secondary-color align-mid? text-color icon main-text type description]}]
+  [rn/view {:style (assoc centrify-style
+                          :flex-direction :row
+                          :margin-horizontal 2)}
    (when (or (and (not horizontal-description?)
                   align-mid?
                   (not= :text-with-description type))
-             (and description-user-icon
+             (and (or description-img description-user-icon)
                   (not icon)))
-     [rn/image {:source {:uri description-user-icon}
-                :style  {:width         32
-                         :height        32
-                         :border-radius 32
-                         :margin-right  8}}])
+     (if description-img
+       [rn/view {:margin-right 8}
+        [description-img]]
+       [rn/image {:source {:uri description-user-icon}
+                  :style  {:width         32
+                           :height        32
+                           :border-radius 32
+                           :margin-right  8}}]))
    [rn/view {:style {:flex-direction (if horizontal-description?
                                        :row
                                        :column)}}
@@ -73,76 +74,69 @@
                             horizontal-description? (assoc :margin-left 4 :margin-top 2))}
        description])]])
 
-(defn- render-mid-section
+(defn- mid-section-view
   [{:keys [horizontal-description? one-icon-align-left? type left-align?
-           main-text right-icon main-text-icon-color left-icon] :as props}]
-  (let [text-color                (if (colors/dark?) colors/neutral-5 colors/neutral-95)
-        text-secondary-color      (if (colors/dark?) colors/neutral-40 colors/neutral-50)
+           main-text right-icon main-text-icon-color left-icon on-press avatar] :as props}]
+  (let [text-color (if (colors/dark?) colors/neutral-5 colors/neutral-95)
+        text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50)
         component-instance [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]]
-    [rn/view {:style (merge
-                      (if left-align?
-                        align-left
-                        centrify-style)
-                      {:flex                1
-                       :margin-left         4
-                       :text-align-vertical :center})}
-     (case type
-       :text-only [text/text {:size   :paragraph-1
-                              :weight :semi-bold
-                              :style  {:color text-color}}
-                   main-text]
-       :text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)}
-                             [icons/icon left-icon
-                              (icon-props main-text-icon-color :big)]
-                             [text/text {:size   :paragraph-1
-                                         :weight :semi-bold
-                                         :style  {:padding-horizontal 4
-                                                  :color              text-color}}
-                              main-text]
+    [rn/touchable-opacity {:on-press on-press}
+     [rn/view {:style (merge
+                       (if left-align?
+                         align-left
+                         centrify-style)
+                       {:flex                1
+                        :margin-left         4
+                        :text-align-vertical :center})}
+      (case type
+        :text-only [text/text {:size   :paragraph-1
+                               :weight :semi-bold
+                               :style  {:color text-color}}
+                    main-text]
+        :user-avatar [rn/view {:style (assoc centrify-style :flex-direction :row)}
+                      [user-avatar/user-avatar avatar]
+                      [text/text {:size   :paragraph-1
+                                  :weight :semi-bold
+                                  :style  {:padding-horizontal 4
+                                           :color              text-color}}
+                       main-text]]
+        :text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)}
+                              [icons/icon left-icon
+                               (icon-props main-text-icon-color :big)]
+                              [text/text {:size   :paragraph-1
+                                          :weight :semi-bold
+                                          :style  {:padding-horizontal 4
+                                                   :color              text-color}}
+                               main-text]
+                              [icons/icon right-icon
+                               (icon-props main-text-icon-color :big)]]
+        :text-with-one-icon [rn/view {:style {:flex-direction :row}}
+                             (if one-icon-align-left?
+                               [rn/view {:style {:flex-direction :row
+                                                 :align-items    :center}}
+                                (when horizontal-description?
+                                  [icons/icon left-icon
+                                   (icon-props main-text-icon-color :big)])
+                                component-instance]
+                               [rn/view {:style {:flex-direction :row
+                                                 :align-items    :center}}
+                                component-instance
+                                (when horizontal-description?
+                                  [icons/icon left-icon
+                                   (icon-props main-text-icon-color :big)])])]
+        :text-with-description component-instance)]]))
 
-                             [icons/icon right-icon
-                              (icon-props main-text-icon-color :big)]]
-       :text-with-one-icon   [rn/view {:style {:flex-direction :row}}
-                              (if one-icon-align-left?
-                                [rn/view {:style {:flex-direction :row
-                                                  :align-items    :center}}
-                                 (when horizontal-description?
-                                   [icons/icon left-icon
-                                    (icon-props main-text-icon-color :big)])
-                                 component-instance]
-                                [rn/view {:style {:flex-direction :row
-                                                  :align-items :center}}
-                                 component-instance
-                                 (when horizontal-description?
-                                   [icons/icon left-icon
-                                    (icon-props main-text-icon-color :big)])])]
-       :text-with-description component-instance)]))
-
-(defn- right-section-icon
-  [{:keys [background-color icon icon-color push-to-the-left?] :or {push-to-the-left? false}}]
-  [rn/view {:style (assoc
-                    icon-styles
-                    :background-color background-color
-                    :width            32
-                    :height           32
-                    :margin-right (if push-to-the-left? 8 0))}
-   [icons/icon icon (icon-props icon-color :big)]])
-
-(defn- render-right-section [right-section-buttons]
-  [rn/view {:style (assoc
-                    centrify-style
-                    :flex-direction :row
-                    :flex           1
-                    :justify-content :flex-end)}
+(defn- right-section-view [right-section-buttons]
+  [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 background-color icon-color on-press]}]
+     (map-indexed (fn [index {:keys [icon on-press type] :or {type :grey}}]
                     ^{:key index}
-                    [rn/touchable-opacity {:on-press on-press}
-                     [right-section-icon
-                      {:icon             icon
-                       :background-color background-color
-                       :icon-color       icon-color
-                       :push-to-the-left? (not= index last-icon-index)}]])
+                    [rn/view {:style {:margin-right (if (not= index last-icon-index) 8 0)}}
+                     [button/button {:on-press on-press :icon true :type type :size 32}
+                      icon]])
                   right-section-buttons))])
 
 (defn page-nav
@@ -154,7 +148,7 @@
      :page-nav-color          color
      :page-nav-background-uri image-uri
      :mid-section 
-     {:type                  one-of :text-only :text-with-two-icons :text-with-one-icon :text-with-description
+     {:type                  one-of :text-only :text-with-two-icons :text-with-one-icon :text-with-description :user-avatar
       :icon                  icon
       :main-text             string
       :left-icon             icon       
@@ -163,16 +157,19 @@
       :description-color     color
       :description-icon      icon
       :description-user-icon icon
+      :description-img a render prop which will be used in place of :description-user-icon
       :main-text-icon-color  color
      }
      :left-section 
-     {:on-press              event
+     {:type                  button-type
+      :on-press              event
       :icon                  icon 
       :icon-color            color
       :icon-background-color color
      }
      :right-section-buttons vector of 
-      {:on-press              event
+      {:type                  button-type
+       :on-press              event
        :icon                  icon
        :icon-color            color 
        :icon-background-color color
@@ -189,32 +186,35 @@
         mid-section-props
         {:type                    (:type mid-section)
          :horizontal-description? horizontal-description?
+         :description-img         (:description-img mid-section)
          :main-text               (:main-text mid-section)
          :main-text-icon-color    (:main-text-icon-color mid-section)
          :one-icon-align-left?    one-icon-align-left?
          :right-icon              (:right-icon mid-section)
          :icon                    (:icon mid-section)
-         :left-icon               (:left-icon mid-section)}]
+         :left-icon               (:left-icon mid-section)
+         :avatar                  (:avatar mid-section)}]
     [rn/view {:style (cond-> {:display            :flex
                               :flex-direction     :row
                               ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
                               :align-items        :center
                               :padding-horizontal 20
+                              :height             56
                               :justify-content    :space-between}
                        page-nav-background-uri (assoc :background-color page-nav-color)
                        page-nav-color (assoc :background page-nav-background-uri))}
      [rn/view {:style {:flex           1
                        :flex-direction :row
                        :align-items    :center}}
-      (render-left-section left-section put-middle-section-on-left?)
+      [left-section-view left-section put-middle-section-on-left?]
       (when put-middle-section-on-left?
-        [render-mid-section (assoc mid-section-props
-                                   :left-align?                       true
-                                   :description           (:description mid-section)
-                                   :description-color     (:description-color mid-section)
-                                   :description-icon      (:description-icon mid-section)
-                                   :align-mid?                        align-mid?
-                                   :description-user-icon (:description-user-icon mid-section))])]
+        [mid-section-view (assoc mid-section-props
+                                 :left-align? true
+                                 :description (:description mid-section)
+                                 :description-color (:description-color mid-section)
+                                 :description-icon (:description-icon mid-section)
+                                 :align-mid? align-mid?
+                                 :description-user-icon (:description-user-icon mid-section))])]
      (when-not put-middle-section-on-left?
-       [render-mid-section mid-section-props])
-     (render-right-section right-section-buttons)]))
+       [mid-section-view mid-section-props])
+     [right-section-view right-section-buttons]]))

src/quo2/components/navigation/top_nav.cljs

@@ -1,98 +0,0 @@
-(ns quo2.components.navigation.top-nav
-  (:require [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.counter.counter :as counter]
-            [quo2.components.buttons.button :as quo2.button]
-            [quo2.components.avatars.user-avatar :as user-avatar]
-            [react-native.hole-view :as hole-view]))
-
-(defn- get-button-common-props [type]
-  (let [default? (= type :default)
-        dark?    (colors/dark?)]
-    {:icon                      true
-     :size                      32
-     :style                     {:margin-left 12}
-     :type                      (if default?
-                                  (if dark? :grey :dark-grey)
-                                  type)
-     :override-background-color (when (and dark? default?)
-                                  colors/neutral-90)}))
-
-(defn- base-button [icon on-press accessibility-label button-common-props]
-  [quo2.button/button
-   (merge
-    {:on-press            on-press
-     :accessibility-label accessibility-label}
-    button-common-props)
-   icon])
-
-(defn top-nav
-  "[top-nav opts]
-  opts
-  {:type                   :default/:blurred/:shell
-   :new-notifications?     true/false
-   :notification-indicator :unread-dot/:counter
-   :open-profile           fn
-   :open-search            fn
-   :open-scanner           fn
-   :show-qr                fn
-   :open-activity-center   fn
-   :style                  override-style
-   :avatar                 user-avatar
-   :counter-label          number}
-  "
-  [{:keys [type new-notifications? notification-indicator open-profile open-search
-           open-scanner show-qr open-activity-center style avatar counter-label]}]
-  (let [button-common-props (get-button-common-props type)]
-    [rn/view {:style (merge
-                      {:height 56}
-                      style)}
-   ;; Left Section
-     [rn/touchable-without-feedback {:on-press open-profile}
-      [rn/view {:style {:position :absolute
-                        :left     20
-                        :top      12}}
-       [user-avatar/user-avatar
-        (merge
-         {:ring?             true
-          :status-indicator? true
-          :size              :small}
-         avatar)]]]
-   ;; Right Section
-     [rn/view {:style {:position :absolute
-                       :right    20
-                       :top      12
-                       :flex-direction :row}}
-      [base-button :i/search open-search :open-search-button button-common-props]
-      [base-button :i/scan open-scanner :open-scanner-button button-common-props]
-      [base-button :i/qr-code show-qr :show-qr-button button-common-props]
-      [rn/view ;; Keep view instead of "[:<>" to make sure relative
-               ;; position is calculated from this view instead of its parent
-       [hole-view/hole-view {:key   new-notifications? ;; Key is required to force removal of holes
-                             :holes (cond
-                                      (not new-notifications?) ;; No new notifications, remove holes
-                                      []
-
-                                      (= notification-indicator :unread-dot)
-                                      [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
-
-                                      :else
-                                      [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
-        [base-button :i/activity-center open-activity-center
-         :open-activity-center-button button-common-props]]
-       (when new-notifications?
-         (if (= notification-indicator :counter)
-           [counter/counter {:outline             false
-                             :override-text-color colors/white
-                             :override-bg-color   colors/primary-50
-                             :style               {:position :absolute
-                                                   :left     34
-                                                   :top      -6}}
-            counter-label]
-           [rn/view {:style {:width            8
-                             :height           8
-                             :border-radius    4
-                             :top             -2
-                             :left             38
-                             :position         :absolute
-                             :background-color colors/primary-50}}]))]]]))

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

@@ -0,0 +1,76 @@
+(ns quo2.components.notifications.activity-log.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction     :row
+   :flex-grow          1
+   :align-items        :flex-start
+   :padding-top        8
+   :padding-horizontal 12
+   :padding-bottom     12})
+
+(def icon
+  {:height          32
+   :width           32
+   :border-radius   100
+   :margin-top      10
+   :border-width    1
+   :border-color    colors/white-opa-5
+   :align-items     :center
+   :justify-content :center})
+
+(def message-title
+  {:color         colors/white-opa-40
+   :margin-bottom 2})
+
+(def message-body
+  {:color colors/white})
+
+(def message-container
+  {:border-radius      12
+   :margin-top         12
+   :padding-horizontal 12
+   :padding-vertical   8
+   :background-color   colors/white-opa-5})
+
+(def buttons-container
+  {:margin-top     12
+   :flex-direction :row
+   :align-items    :flex-start})
+
+(def status
+  {:margin-top  12
+   :align-items :flex-start
+   :flex        1})
+
+(defn title [replying?]
+  {:color       colors/white
+   :flex-shrink 1
+   :max-width   (when-not replying? "60%")})
+
+(def timestamp
+  {:text-transform :none
+   :flex-grow      1
+   :margin-left    8
+   :color          colors/neutral-40})
+
+(def unread-dot
+  {:background-color colors/primary-50
+   :border-radius    4
+   :width            8
+   :height           8})
+
+(def unread-dot-container
+  {:margin-left        8
+   :padding-horizontal 12
+   :padding-vertical   7})
+
+(def context-container
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :flex-start
+   :flex-wrap       :wrap})
+
+(def top-section-container
+  {:align-items    :center
+   :flex-direction :row})

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

@@ -0,0 +1,179 @@
+(ns quo2.components.notifications.activity-log.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.tags.status-tags :as status-tags]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.notifications.activity-log.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im.i18n.i18n :as i18n]))
+
+(def ^:private max-reply-length
+  280)
+
+(defn- valid-reply?
+  [reply]
+  (<= (count reply) max-reply-length))
+
+(defn- activity-reply-text-input
+  [reply-input on-update-reply]
+  [rn/view
+   [rn/view {:style {:margin-top     16
+                     :margin-bottom  8
+                     :flex-direction :row}}
+    [text/text {:weight :medium
+                :style  {:flex-grow 1
+                         :color     colors/neutral-40}}
+     (i18n/label :t/your-answer)]
+    [text/text {:style {:flex-shrink 1
+                        :color       (if (valid-reply? @reply-input)
+                                       colors/neutral-40
+                                       colors/danger-60)}}
+     (str (count @reply-input) "/" max-reply-length)]]
+   [rn/view
+    ;; TODO(@ilmotta): Replace with quo2 component when available.
+    ;; https://github.com/status-im/status-mobile/issues/14364
+    [quo/text-input
+     {:on-change-text      #(do (reset! reply-input %)
+                                (when on-update-reply
+                                  (on-update-reply %)))
+      :auto-capitalize     :none
+      :auto-focus          true
+      :accessibility-label :identity-verification-reply-text-input
+      :placeholder         (i18n/label :t/type-something)
+      :return-key-type     :none
+      :multiline           false
+      :auto-correct        false}]]])
+
+(defn- activity-icon
+  [icon]
+  [rn/view {:style style/icon}
+   [icon/icon icon {:color colors/white}]])
+
+(defn- activity-context
+  [context replying?]
+  (let [first-line-offset (if replying? 4 0)
+        gap-between-lines 4]
+    (into [rn/view {:style (assoc style/context-container :margin-top first-line-offset)}]
+          (mapcat (fn [detail]
+                    ^{:key (hash detail)}
+                    (if (string? detail)
+                      (map (fn [s]
+                             [rn/view {:style {:margin-right 4
+                                               :margin-top   0}}
+                              [text/text {:size  :paragraph-2
+                                          :style {:color colors/white}}
+                               s]])
+                           (string/split detail #"\s+"))
+                      [[rn/view {:margin-right 4
+                                 :margin-top   gap-between-lines}
+                        detail]]))
+                  context))))
+
+(defn- activity-message
+  [{:keys [title body]}]
+  [rn/view {:style style/message-container}
+   (when title
+     [text/text {:size                :paragraph-2
+                 :accessibility-label :activity-message-title
+                 :style               style/message-title}
+      title])
+   (if (string? body)
+     [text/text {:style               style/message-body
+                 :accessibility-label :activity-message-body
+                 :size                :paragraph-1}
+      body]
+     body)])
+
+(defn- activity-buttons
+  [button-1 button-2 replying? reply-input]
+  (let [size         (if replying? 40 24)
+        common-style (when replying?
+                       {:padding-vertical 9
+                        :flex-grow        1
+                        :flex-basis       0})]
+    [rn/view style/buttons-container
+     (when button-1
+       [button/button (-> button-1
+                          (assoc :size size)
+                          (update :style merge common-style {:margin-right 8}))
+        (:label button-1)])
+     (when button-2
+       [button/button (-> button-2
+                          (assoc :size size)
+                          (assoc :disabled (and replying? (not (valid-reply? @reply-input))))
+                          (update :style merge common-style))
+        (:label button-2)])]))
+
+(defn- activity-status
+  [status]
+  [rn/view {:style               style/status
+            :accessibility-label :activity-status}
+   [status-tags/status-tag {:size   :small
+                            :label  (:label status)
+                            :status status}]])
+
+(defn- activity-title
+  [title replying?]
+  [text/text {:weight              :semi-bold
+              :accessibility-label :activity-title
+              :style               (style/title replying?)
+              :size                (if replying? :heading-2 :paragraph-1)}
+   title])
+
+(defn- activity-timestamp
+  [timestamp]
+  [text/text {:size                :label
+              :accessibility-label :activity-timestamp
+              :style               style/timestamp}
+   timestamp])
+
+(defn- activity-unread-dot
+  []
+  [rn/view {:accessibility-label :activity-unread-indicator
+            :style               style/unread-dot-container}
+   [rn/view {:style style/unread-dot}]])
+
+(defn- footer
+  [_]
+  (let [reply-input (reagent/atom "")]
+    (fn [{:keys [replying? on-update-reply status button-1 button-2]}]
+      [:<>
+       (when replying?
+         [activity-reply-text-input reply-input on-update-reply])
+       (cond (some? status)
+             [activity-status status]
+
+             (or button-1 button-2)
+             [activity-buttons button-1 button-2 replying? reply-input])])))
+
+(defn view
+  [{:keys [icon
+           message
+           context
+           timestamp
+           title
+           replying?
+           unread?]
+    :as   props}]
+  [rn/view {:accessibility-label :activity
+            :style               style/container}
+   (when-not replying?
+     [activity-icon icon])
+   [rn/view {:style {:padding-left (when-not replying? 8)
+                     :flex         1}}
+    [rn/view
+     [rn/view {:style style/top-section-container}
+      [activity-title title replying?]
+      (when-not replying?
+        [activity-timestamp timestamp])
+      (when (and unread? (not replying?))
+        [activity-unread-dot])]
+     (when context
+       [activity-context context replying?])]
+    (when message
+      [activity-message message])
+    [footer props]]])

src/quo2/components/notifications/activity_logs.cljs

@@ -1,157 +0,0 @@
-(ns quo2.components.notifications.activity-logs
-  (:require [react-native.core :as rn]
-            [quo2.components.buttons.button :as button]
-            [quo2.components.icon :as icon]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.tags.status-tags :as status-tags]
-            [quo2.foundations.colors :as colors]))
-
-(defn- activity-icon
-  [icon]
-  [rn/view {:height          32
-            :width           32
-            :border-radius   100
-            :margin-top      10
-            :border-width    1
-            :border-color    colors/white-opa-5
-            :flex-direction  :column
-            :align-items     :center
-            :justify-content :center}
-   [icon/icon icon {:color colors/white}]])
-
-(defn- activity-unread-dot
-  []
-  [rn/view {:margin-left      14
-            :margin-right     6
-            :background-color colors/primary-50
-            :width            8
-            :height           8
-            :border-radius    4}])
-
-(defn- activity-context
-  [context]
-  (let [margin-top 4]
-    (into [rn/view {:flex           1
-                    :flex-direction :row
-                    :align-items    :center
-                    :flex-wrap      :wrap
-                    :margin-top     (+ 4 (- margin-top))}]
-          (map-indexed (fn [index detail]
-                         ^{:key index}
-                         [rn/view {:margin-right 4
-                                   :margin-top   margin-top}
-                          (if (string? detail)
-                            [text/text {:size :paragraph-2}
-                             detail]
-                            detail)])
-                       context))))
-
-(defn- activity-message
-  [{:keys [title body]}]
-  [rn/view {:border-radius      12
-            :margin-top         12
-            :padding-horizontal 12
-            :padding-vertical   8
-            :background-color   colors/white-opa-5
-            :flex               1
-            :flex-direction     :column}
-   (when title
-     [text/text {:size  :paragraph-2
-                 :style {:color colors/white-opa-40}}
-      title])
-   (if (string? body)
-     [text/text {:style {:color colors/white}
-                 :size  :paragraph-1}
-      body]
-     body)])
-
-(defn- activity-buttons
-  [button-1 button-2]
-  (let [size         24
-        common-style {:padding-top    3
-                      :padding-right  8
-                      :padding-bottom 4
-                      :padding-left   8}]
-    [rn/view {:margin-top     12
-              :flex           1
-              :flex-direction :row
-              :align-items    :flex-start}
-     (when button-1
-       [button/button (-> button-1
-                          (assoc :size size)
-                          (assoc-in [:style :margin-right] 8)
-                          (update :style merge common-style))
-        (:label button-1)])
-     (when button-2
-       [button/button (-> button-2
-                          (assoc :size size)
-                          (update :style merge common-style))
-        (:label button-2)])]))
-
-(defn- activity-status
-  [status]
-  [rn/view {:margin-top  12
-            :align-items :flex-start
-            :flex        1}
-   [status-tags/status-tag {:size   :small
-                            :label  (:label status)
-                            :status status}]])
-
-(defn- activity-title
-  [title]
-  [text/text {:weight :semi-bold
-              :style  {:color colors/white}
-              :size   :paragraph-1}
-   title])
-
-(defn- activity-timestamp
-  [timestamp]
-  [rn/view {:margin-left 8}
-   [text/text {:size  :label
-               :style {:text-transform :none
-                       :color          colors/neutral-40}}
-    timestamp]])
-
-(defn activity-log
-  [{:keys [button-1
-           button-2
-           icon
-           message
-           status
-           context
-           timestamp
-           title
-           unread?]}]
-  [rn/view {:flex-direction     :row
-            :flex               1
-            :border-radius      16
-            :padding-top        8
-            :padding-horizontal 12
-            :padding-bottom     12
-            :background-color   (when unread?
-                                  colors/primary-50-opa-10)}
-   [activity-icon icon]
-   [rn/view {:flex-direction :column
-             :padding-left   8
-             :flex           1}
-    [rn/view {:flex           1
-              :align-items    :center
-              :flex-direction :row}
-     [rn/view {:flex           1
-               :align-items    :center
-               :flex-direction :row}
-      [rn/view {:flex-shrink 1}
-       [activity-title title]]
-      [activity-timestamp timestamp]]
-     (when unread?
-       [activity-unread-dot])]
-    (when context
-      [activity-context context])
-    (when message
-      [activity-message message])
-    (cond
-      (some? status)
-      [activity-status status]
-
-      (or button-1 button-2)
-      [activity-buttons button-1 button-2])]])

src/quo2/components/notifications/info_count.cljs

@@ -10,6 +10,8 @@
                              :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]]))

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

@@ -0,0 +1,84 @@
+(ns quo2.components.selectors.--tests--.selectors-component-spec
+  (:require ["@testing-library/react-native" :as rtl]
+            [quo2.components.selectors.selectors :as selectors]
+            [reagent.core :as reagent]))
+
+(defn render-toggle
+  ([]
+   (render-toggle {}))
+  ([opts]
+   (rtl/render (reagent/as-element  [selectors/toggle opts]))))
+
+(defn render-checkbox
+  ([]
+   (render-checkbox {}))
+  ([opts]
+   (rtl/render (reagent/as-element  [selectors/checkbox opts]))))
+
+(defn render-checkbox-prefill
+  ([]
+   (render-checkbox-prefill {}))
+  ([opts]
+   (rtl/render (reagent/as-element  [selectors/checkbox-prefill opts]))))
+
+(defn render-radio
+  ([]
+   (render-radio {}))
+  ([opts]
+   (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))))
+
+(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)))))
+
+(js/global.test "default render of radio component"
+                (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)))))
+
+(js/global.test "default render of checkbox component"
+                (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)))))
+
+(js/global.test "default render of checkbox-prefill component"
+                (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)))))

src/quo2/components/selectors/selectors.cljs

@@ -43,7 +43,8 @@
                                        (colors/alpha colors/neutral-20 (if disabled? 0.3 1))
                                        (colors/alpha colors/neutral-70 (if disabled? 0.3 1))))})
          :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
-         :accessibility-role  :checkbox}
+         :accessibility-role  :checkbox
+         :testID "checkbox-prefill-component"}
         (when @checked?
           [rn/view {:style
                     {:height 20
@@ -82,7 +83,8 @@
                   :border-color     (if @checked? :none
                                         (get-color @checked? disabled? blurred-background?))}
           :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
-          :accessibility-role  :checkbox}
+          :accessibility-role  :checkbox
+          :testID "checkbox-component"}
          (when @checked?
            [rn/view {:style
                      {:height 20
@@ -108,7 +110,8 @@
                                       (colors/theme-colors colors/white
                                                            (colors/alpha colors/neutral-80 0.4)))})
          :accessibility-label (str "radio-" (if @checked? "on" "off"))
-         :accessibility-role  :checkbox}
+         :accessibility-role  :checkbox
+         :testID "radio-component"}
 
         [rn/view {:style
                   {:margin-left :auto
@@ -133,7 +136,8 @@
                   :border-radius 20
                   :background-color (get-color @checked? disabled? blurred-background?)})
          :accessibility-label (str "toggle-" (if @checked? "on" "off"))
-         :accessibility-role  :checkbox}
+         :accessibility-role  :checkbox
+         :testID "toggle-component"}
         [rn/view {:style
                   {:margin-left (if @checked? 12 2)
                    :height 16

src/quo2/components/tabs/tabs.cljs

@@ -3,7 +3,8 @@
             [react-native.core :as rn]
             [quo2.components.tabs.tab :as tab]
             [reagent.core :as reagent]
-            [utils :as utils]
+            [utils.number :as utils.number]
+            [utils.collection :as utils.collection]
             [quo2.foundations.colors :as colors]
             [quo2.components.notifications.notification-dot :refer [notification-dot]]
             [react-native.masked-view :as masked-view]
@@ -11,26 +12,29 @@
 
 (def default-tab-size 32)
 
+(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)}
+   [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 new-info accessibility-label]} data]
+        (for [{:keys [label id notification-dot? accessibility-label]} data]
           ^{:key id}
           [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
-           (when new-info
-             [rn/view {:position         :absolute
-                       :z-index          1
-                       :right            -2
-                       :top              -2
-                       :width            10
-                       :height           10
-                       :border-radius    5
-                       :justify-content  :center
-                       :align-items      :center
-                       :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
-              [notification-dot]])
+           (when notification-dot?
+             [indicator])
            [tab/tab
             {:id                  id
              :size                size
@@ -50,7 +54,7 @@
     ;; Truncate to avoid unnecessary rendering.
     (if (> fade-percentage 0.99)
       0.99
-      (utils/naive-round fade-percentage 2))))
+      (utils.number/naive-round fade-percentage 2))))
 
 (defn scrollable-tabs
   "Just like the component `tabs`, displays horizontally scrollable tabs with
@@ -120,7 +124,7 @@
                               :scroll-on-press?
                               :size)
                       (when scroll-on-press?
-                        {:initial-scroll-index (utils/first-index #(= @active-tab-id (:id %)) data)})
+                        {: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
@@ -154,7 +158,7 @@
                                                                        :on-press       (fn [id]
                                                                                          (reset! active-tab-id id)
                                                                                          (when scroll-on-press?
-                                                                                           (.scrollToIndex @flat-list-ref
+                                                                                           (.scrollToIndex ^js @flat-list-ref
                                                                                                            #js {:animated     true
                                                                                                                 :index        index
                                                                                                                 :viewPosition 0.5}))

src/quo2/components/tags/permission_tag.cljs

@@ -104,11 +104,12 @@
 
 (defn tag
   [_ _]
-  (fn [{:keys [locked tokens size background-color]
+  (fn [{:keys [locked tokens size background-color on-press]
         :or {size 24}}]
     [base-tag/base-tag {:background-color  background-color
                         :size              size
-                        :type              :permission}
+                        :type              :permission
+                        :on-press          on-press}
      [rn/view  {:flex-direction   :row
                 :align-items      :center
                 :justify-content  :flex-end}