updates

https://github.com/status-im/status-go/compare/d40290a6...d60c1d00

.carve_ignore

@@ -1,7 +1,7 @@
 status-im.utils.build/warning-handler
 status-im.utils.build/get-current-sha
-status-im.chat.constants/spacing-char
-status-im.chat.constants/arg-wrapping-char
+status-im2.constants/spacing-char
+status-im2.constants/arg-wrapping-char
 status-im.ios.core/init
 status-im.ui.components.camera/aspects
 status-im.ui.components.camera/capture-targets
@@ -46,8 +46,8 @@ status-im.utils.handlers/logged-in
 status-im.multiaccounts.model/credentials
 status-im.multiaccounts.login.core/contract-fleet?
 status-im.multiaccounts.login.core/fetch-nodes
-status-im.utils.config/rpc-networks-only?
-status-im.utils.config/waku-enabled?
+status-im2.config/rpc-networks-only?
+status-im2.config/waku-enabled?
 status-im.utils.pairing/has-paired-installations?
 status-im.tribute-to-talk.core-test/user-cofx
 quo.gesture-handler/tap-gesture-handler
@@ -154,40 +154,40 @@ status-im.ethereum.ens/name-hash
 status-im.ethereum.ens/ABI-hash
 status-im.ethereum.ens/pubkey-hash
 status-im.network.core/get-network
-status-im.constants/desktop-content-types
-status-im.constants/blocks-per-hour
-status-im.constants/one-earth-day
-status-im.constants/left-pane-min-width
-status-im.constants/system
-status-im.constants/contact-discovery
-status-im.constants/send-transaction-failed-parse-response
-status-im.constants/send-transaction-failed-parse-params
-status-im.constants/send-transaction-no-account-selected
-status-im.constants/send-transaction-invalid-tx-sender
-status-im.constants/web3-get-logs
-status-im.constants/web3-transaction-receipt
-status-im.constants/web3-new-filter
-status-im.constants/web3-new-pending-transaction-filter
-status-im.constants/web3-new-block-filter
-status-im.constants/web3-uninstall-filter
-status-im.constants/web3-get-filter-changes
-status-im.constants/web3-shh-post
-status-im.constants/web3-shh-new-identity
-status-im.constants/web3-shh-has-identity
-status-im.constants/web3-shh-new-group
-status-im.constants/web3-shh-add-to-group
-status-im.constants/web3-shh-new-filter
-status-im.constants/web3-shh-uninstall-filter
-status-im.constants/web3-shh-get-filter-changes
-status-im.constants/web3-shh-get-messages
-status-im.constants/status-create-address
-status-im.constants/event-transfer-hash
-status-im.constants/regx-rtl-characters
-status-im.constants/desktop-msg-chars-hard-limit
-status-im.constants/debug-metrics
-status-im.constants/scan-qr-code
-status-im.constants/ipfs-proto-code
-status-im.constants/swarm-proto-code
+status-im2.constants/desktop-content-types
+status-im2.constants/blocks-per-hour
+status-im2.constants/one-earth-day
+status-im2.constants/left-pane-min-width
+status-im2.constants/system
+status-im2.constants/contact-discovery
+status-im2.constants/send-transaction-failed-parse-response
+status-im2.constants/send-transaction-failed-parse-params
+status-im2.constants/send-transaction-no-account-selected
+status-im2.constants/send-transaction-invalid-tx-sender
+status-im2.constants/web3-get-logs
+status-im2.constants/web3-transaction-receipt
+status-im2.constants/web3-new-filter
+status-im2.constants/web3-new-pending-transaction-filter
+status-im2.constants/web3-new-block-filter
+status-im2.constants/web3-uninstall-filter
+status-im2.constants/web3-get-filter-changes
+status-im2.constants/web3-shh-post
+status-im2.constants/web3-shh-new-identity
+status-im2.constants/web3-shh-has-identity
+status-im2.constants/web3-shh-new-group
+status-im2.constants/web3-shh-add-to-group
+status-im2.constants/web3-shh-new-filter
+status-im2.constants/web3-shh-uninstall-filter
+status-im2.constants/web3-shh-get-filter-changes
+status-im2.constants/web3-shh-get-messages
+status-im2.constants/status-create-address
+status-im2.constants/event-transfer-hash
+status-im2.constants/regx-rtl-characters
+status-im2.constants/desktop-msg-chars-hard-limit
+status-im2.constants/debug-metrics
+status-im2.constants/scan-qr-code
+status-im2.constants/ipfs-proto-code
+status-im2.constants/swarm-proto-code
 status-im.multiaccounts.update.publisher/publish-update!
 status-im.utils.async/task-queue
 status-im.utils.async/async-periodic-run!

.clj-kondo/config.edn

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

.env

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

.env.e2e

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

.env.jenkins

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

.zprintrc

@@ -0,0 +1,48 @@
+;; -*- mode: clojure -*-
+;; vi: ft=clojure
+{:width     105
+ :style     [;; community style
+             ;; https://github.com/kkinnear/zprint/blob/main/doc/reference.md#community
+             :community
+
+             ;; no comma in map
+             :no-comma
+
+             :custom-justify
+
+             ;; respect all newlines
+             ;; https://github.com/kkinnear/zprint/blob/main/doc/reference.md#respect-nl
+             :respect-nl
+
+             ;; respect blank line
+             ;; https://github.com/kkinnear/zprint/blob/main/doc/reference.md#respect-bl
+             :respect-bl]
+ :fn-map
+ {"reg-sub"         :arg1-pair
+  "h/describe"      :arg1-body
+  "h/test"          :arg1-body
+  "global.describe" :arg1-body
+  "global.test"     :arg1-body
+  "list-comp"       :binding
+  "defview"         :arg1-body
+  "letsubs"         :binding
+  "testing"         :arg1-body
+  "deftest-sub"     :arg1-body
+  "wait-for"        :arg1-body
+  "with-deps-check" :arg1-body
+  "->"              [:noarg1-body
+                     {:list               {:constant-pair? false :force-nl? false}
+                      :next-inner-restore [[:list :constant-pair?]]}]
+  "set!"            "reset!"
+  "assoc-when"      "assoc"
+  "assoc-some"      "assoc"
+  "conj-when"       "conj"
+  "conj-some"       "conj"}
+ :remove    {:fn-force-nl #{:noarg1-body}}
+ :style-map
+ {:no-comma       {:map {:comma? false}}
+  :custom-justify
+  {:doc     "Justify everything using pre-1.1.2 approach"
+   :binding {:justify? true :justify {:max-variance 1000}}
+   :map     {:justify? true :justify {:max-variance 1000}}
+   :pair    {:justify? true :justify {:max-variance 1000}}}}}

Makefile

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

ci/Jenkinsfile.ios

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

ci/tests/Jenkinsfile.e2e-nightly

@@ -58,7 +58,7 @@ pipeline {
             sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
             sh """
               python3 -m pytest \
-                --numprocesses 9 \
+                --numprocesses 4 \
                 --rerun_count=2 \
                 --testrail_report=True \
                 -m testrail_id \

ci/tests/Jenkinsfile.e2e-prs

@@ -99,7 +99,7 @@ pipeline {
             sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
             sh """
               python3 -m pytest \
-                --numprocesses 9 \
+                --numprocesses 4 \
                 --rerun_count=2 \
                 --testrail_report=True \
                 -k \"${params.KEYWORD_EXPRESSION}\" \

ci/tests/Jenkinsfile.e2e-upgrade

@@ -74,7 +74,7 @@ pipeline {
               python3 -m pytest \
                 -m "upgrade" \
                 -k \"${params.KEYWORD_EXPRESSION}\" \
-                --numprocesses 15 \
+                --numprocesses 4 \
                 --rerun_count=2 \
                 --testrail_report=True \
                 --apk=${params.APK_NAME} \

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

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

doc/new-guidelines.md

@@ -364,7 +364,7 @@ actually subscribing to them, so reframe's signal graph gets validated too.
       (is (= expected (recipes [current-user all-recipes location]))))))
 
 ;; good
-(require '[status-im.test-helpers :as h])
+(require '[test-helpers.unit :as h])
 
 (re-frame/reg-sub
  :user/recipes
@@ -399,13 +399,15 @@ src
 ├── react_native
 │   ├── gesture.cljs
 │   └── platform.cljs
-├── status_im
+├── status_im/
+├── status_im2
 │   ├── common
 │   │   └── components
 │   │       └── bottom_sheet.cljs
 │   ├── contexts/
 │   ├── setup/
 │   └── subs/
+├── test_helpers/
 └── utils.cljs
 ```
 
@@ -414,17 +416,23 @@ src
 - `src/quo2/`: The component library for Status Mobile.
 - `src/react_native/`: Contains only low-level constructs to help React Native
   work in tandem with Clojure(Script).
-- `src/status_im/common/`: Directories named `common` can appear at any level of
-  the directory tree. Just like directories named `utils`, their directory
+- `src/status_im2/`: Directory where we try to be as strict as possible about
+  our guidelines and where we prefer to write code for the new, redesigned
+  mobile app.
+- `src/status_im/`: Directory containing what we call "old code", not yet
+  migrated to new guidelines for the new mobile app.
+- `src/status_im2/common/`: Directories named `common` can appear at any level
+  of the directory tree. Just like directories named `utils`, their directory
   nesting level communicates their applicable limits.
-- `src/status_im/common/components/`: Contains reusable components that are not
+- `src/status_im2/common/components/`: Contains reusable components that are not
   part of the design system (quo2).
-- `src/status_im/contexts/`: Contains [bounded contexts](#glossary), like
+- `src/status_im2/contexts/`: Contains [bounded contexts](#glossary), like
   `browser/`, `messaging/`, etc. As much as possible, _bounded contexts_ should
   not directly require each other's namespaces.
-- `src/status_im/setup/`: Contains namespaces that are mostly used to initialize
-  the application, configure test runners, etc. In general, such namespaces
-  should not be required from the outside.
+- `src/status_im2/setup/`: Contains namespaces that are mostly used to
+  initialize the application, configure test runners, etc. In general, such
+  namespaces should not be required from the outside.
+- `src/test_helpers/`: Reusable utilities for writing all kinds of tests.
 - `src/status_im/subs/`: All subscriptions should live inside it.
 
 Directories named `utils/` can appear at any level of the directory tree. The
@@ -485,18 +493,26 @@ src
 [Unit tests](#glossary) should be created alongside their respective source
 implementation. We prefer them colocated with the source and not like most
 Clojure (JVM) codebases which mirror the sources in a top-level test directory.
-Component tests should be created in a separate directory `__tests__`. Example:
 
 ```
 ├── models
 │   ├── message.cljs
 │   └── message_test.cljs
-├── __tests__
-│   └── input_bla_test.cljs
 ├── models.cljs
 └── models_test.cljs
 ```
 
+Component tests should be created in a separate directory `__tests__`, colocated
+with the source. When the entire component implementation is isolated under a
+single directory, create a test file named `component_spec.cljs` instead.
+
+```
+└── filter
+    ├── component_spec.cljs
+    ├── style.cljs
+    └── view.cljs
+```
+
 There's no hard rule on how integration test namespaces should be split, but
 we're at least striving to define them under appropriate bounded contexts that
 mirror the source code.

indentation.edn

@@ -1 +0,0 @@
-{letsubs [[:inner 0]]}

ios/Podfile

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

ios/Podfile.lock

@@ -710,6 +710,6 @@ SPEC CHECKSUMS:
   TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
   Yoga: 0276e9f20976c8568e107cfc1163a8629051adc0
 
-PODFILE CHECKSUM: a1de9468266e7f0b5273acea713782ab759690f1
+PODFILE CHECKSUM: ca5d07911eadc1267649ecc15379e5127a0cc839
 
 COCOAPODS: 1.11.3

ios/StatusIm.xcodeproj/project.pbxproj

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

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

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

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

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

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

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

nix/deps/clojure/deps.json

@@ -51,6 +51,19 @@
     }
   },
 
+  {
+    "path": "camel-snake-kebab/camel-snake-kebab/0.4.3/camel-snake-kebab-0.4.3",
+    "host": "https://repo.clojars.org",
+    "pom": {
+      "sha1": "d8a86256bfd06736b84b6ee4c154a1b2518ab461",
+      "sha256": "1fxz1fdhppby21l4qkrci9kp38s508yn01z3cjspda56mj1plnid"
+    },
+    "jar": {
+      "sha1": "5ae08f83ceb8959971e6334596bff0214bf6fdf2",
+      "sha256": "1j627a99ccc4v0v83c8670vdnsp69cjk7ba0ga2xf433fwsz74c1"
+    }
+  },
+
   {
     "path": "cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3",
     "host": "https://repo.clojars.org",
@@ -77,19 +90,6 @@
     }
   },
 
-  {
-    "path": "cljfmt/cljfmt/0.6.7/cljfmt-0.6.7",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "3d7ac9112908c9c9349adc056d1d06ae2cd33c21",
-      "sha256": "1q46q43mykn61f032y5734j84gcjca41pwd3iik9xghnzmphy2mn"
-    },
-    "jar": {
-      "sha1": "91e8afa2c19db72acdef7f881aad905871ba6e69",
-      "sha256": "0ara83gaqnafjgr2aqz5zqmywdsmhsz483xkkxpiwbn9lfqvidmh"
-    }
-  },
-
   {
     "path": "cljs-bean/cljs-bean/1.3.0/cljs-bean-1.3.0",
     "host": "https://repo.clojars.org",
@@ -104,15 +104,15 @@
   },
 
   {
-    "path": "cljsjs/react/17.0.1-0/react-17.0.1-0",
+    "path": "cljsjs/react-dom-server/17.0.1-0/react-dom-server-17.0.1-0",
     "host": "https://repo.clojars.org",
     "pom": {
-      "sha1": "d5d3681281585d981375fe7bb29362bfcd0d4449",
-      "sha256": "0rskh6mfq5h0l0wybs68w9v585a6zlnnfgrvsf5k3h51fk2p28da"
+      "sha1": "ff154f318e1f63061b5bd42d9a38fc8547360cb4",
+      "sha256": "166ynlrph7rx3nql0c85c37vcbcsnwbjamk71hw74rz451pgnncr"
     },
     "jar": {
-      "sha1": "726da8a9305a865df90d81e9a8d58f87ff0ee8bd",
-      "sha256": "0bfmvw8gk98vdf9azll6041r1jaz1pmb0dyb35cfc8dr3mmr4ag7"
+      "sha1": "d5c53eca9f3884402c76268b82e3828223dcbf90",
+      "sha256": "1530hwqpxzxfjm6dy77whqwjzzx79jpnd9xvnkxy1lnk7l7lj494"
     }
   },
 
@@ -130,15 +130,15 @@
   },
 
   {
-    "path": "cljsjs/react-dom-server/17.0.1-0/react-dom-server-17.0.1-0",
+    "path": "cljsjs/react/17.0.1-0/react-17.0.1-0",
     "host": "https://repo.clojars.org",
     "pom": {
-      "sha1": "ff154f318e1f63061b5bd42d9a38fc8547360cb4",
-      "sha256": "166ynlrph7rx3nql0c85c37vcbcsnwbjamk71hw74rz451pgnncr"
+      "sha1": "d5d3681281585d981375fe7bb29362bfcd0d4449",
+      "sha256": "0rskh6mfq5h0l0wybs68w9v585a6zlnnfgrvsf5k3h51fk2p28da"
     },
     "jar": {
-      "sha1": "d5c53eca9f3884402c76268b82e3828223dcbf90",
-      "sha256": "1530hwqpxzxfjm6dy77whqwjzzx79jpnd9xvnkxy1lnk7l7lj494"
+      "sha1": "726da8a9305a865df90d81e9a8d58f87ff0ee8bd",
+      "sha256": "0bfmvw8gk98vdf9azll6041r1jaz1pmb0dyb35cfc8dr3mmr4ag7"
     }
   },
 
@@ -272,32 +272,6 @@
     }
   },
 
-  {
-    "path": "com/googlecode/java-diff-utils/diffutils/1.3.0/diffutils-1.3.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "7d5e372ff32c90095800f96d8308c41af0285a41",
-      "sha256": "1dj7p0m0kwnjvy1y3kq63zb6bw0azjf79i5xbccmy3wv63b1vqrg"
-    },
-    "jar": {
-      "sha1": "7e060dd5b19431e6d198e91ff670644372f60fbd",
-      "sha256": "1hn5plp7iyl626h8mrra56sysfm2qannj1dapr1m5afwkb24vfk1"
-    }
-  },
-
-  {
-    "path": "com/googlecode/json-simple/json-simple/1.1.1/json-simple-1.1.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "5e902aae26ac5c36f6420f689f43333129dd69e2",
-      "sha256": "10vzlnl8vbjv2jqf818wdb7kgy9c6qjka7fjmmi3vdpg1mcn6pv6"
-    },
-    "jar": {
-      "sha1": "c9ad4a0850ab676c5c64461a05ca524cdfff59f1",
-      "sha256": "170rflxnqnah0265ik2aylmxkshyqbf2zas9bp2l32xqj9l6jsaf"
-    }
-  },
-
   {
     "path": "com/google/elemental2/elemental2-core/1.0.0-RC1/elemental2-core-1.0.0-RC1",
     "host": "https://repo1.maven.org/maven2",
@@ -428,6 +402,19 @@
     }
   },
 
+  {
+    "path": "com/googlecode/json-simple/json-simple/1.1.1/json-simple-1.1.1",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "5e902aae26ac5c36f6420f689f43333129dd69e2",
+      "sha256": "10vzlnl8vbjv2jqf818wdb7kgy9c6qjka7fjmmi3vdpg1mcn6pv6"
+    },
+    "jar": {
+      "sha1": "c9ad4a0850ab676c5c64461a05ca524cdfff59f1",
+      "sha256": "170rflxnqnah0265ik2aylmxkshyqbf2zas9bp2l32xqj9l6jsaf"
+    }
+  },
+
   {
     "path": "com/ibm/icu/icu4j/66.1/icu4j-66.1",
     "host": "https://repo1.maven.org/maven2",
@@ -441,58 +428,6 @@
     }
   },
 
-  {
-    "path": "commons-codec/commons-codec/1.10/commons-codec-1.10",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "44b9477418d2942d45550f7e7c66c16262062d0e",
-      "sha256": "1yscxabk7i59vgfjg7c1y3prj39h1d8prnwgxbisc4ni29qdpf5x"
-    },
-    "jar": {
-      "sha1": "4b95f4897fa13f2cd904aee711aeafc0c5295cd8",
-      "sha256": "0scm6321zz76dc3bs8sy2qyami755lz4lq5455gl67bi9slxyha2"
-    }
-  },
-
-  {
-    "path": "commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "65112009d674333c1acfafb4e198ff250d710764",
-      "sha256": "007nyd66fqp3fbrmnsbfp1fpkhmr2lk33qmkp3salqld3xd7qlc8"
-    },
-    "jar": {
-      "sha1": "f95188e3d372e20e7328706c37ef366e5d7859b0",
-      "sha256": "1xyyl54sfxsdcwxdyq6b0azmr31b4dwqns850jjkw9a9dwrh5v54"
-    }
-  },
-
-  {
-    "path": "commons-io/commons-io/2.6/commons-io-2.6",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "5060835593e5b6ed18c82fc2e782f0a3c30a00b1",
-      "sha256": "0q4a6fp6xkyd86ikymkyv2plhf9vj8aqvggxg9d1yad2jcw8c8qc"
-    },
-    "jar": {
-      "sha1": "815893df5f31da2ece4040fe0a12fd44b577afaf",
-      "sha256": "04v5fg53jl9gbn6pyz3l7kbpxv0xjzyasnw6yd1a3hhacq2d6xzq"
-    }
-  },
-
-  {
-    "path": "compojure/compojure/1.5.2/compojure-1.5.2",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "9e8da477b6682094d56802cb155291a2acb829bd",
-      "sha256": "036z64iprypccz03iq7lqxvw99xjh4xlsfmfwbs37pmhfnfmbdnx"
-    },
-    "jar": {
-      "sha1": "0b5258d0616ffc5f64c2b6d95f09de56d24df439",
-      "sha256": "1s2k05lwnlm9a66mxnsss437i9gp70dny8y2rlfkl090s6mdqsaf"
-    }
-  },
-
   {
     "path": "com/taoensso/encore/2.105.0/encore-2.105.0",
     "host": "https://repo.clojars.org",
@@ -571,6 +506,58 @@
     }
   },
 
+  {
+    "path": "commons-codec/commons-codec/1.10/commons-codec-1.10",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "44b9477418d2942d45550f7e7c66c16262062d0e",
+      "sha256": "1yscxabk7i59vgfjg7c1y3prj39h1d8prnwgxbisc4ni29qdpf5x"
+    },
+    "jar": {
+      "sha1": "4b95f4897fa13f2cd904aee711aeafc0c5295cd8",
+      "sha256": "0scm6321zz76dc3bs8sy2qyami755lz4lq5455gl67bi9slxyha2"
+    }
+  },
+
+  {
+    "path": "commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "65112009d674333c1acfafb4e198ff250d710764",
+      "sha256": "007nyd66fqp3fbrmnsbfp1fpkhmr2lk33qmkp3salqld3xd7qlc8"
+    },
+    "jar": {
+      "sha1": "f95188e3d372e20e7328706c37ef366e5d7859b0",
+      "sha256": "1xyyl54sfxsdcwxdyq6b0azmr31b4dwqns850jjkw9a9dwrh5v54"
+    }
+  },
+
+  {
+    "path": "commons-io/commons-io/2.6/commons-io-2.6",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "5060835593e5b6ed18c82fc2e782f0a3c30a00b1",
+      "sha256": "0q4a6fp6xkyd86ikymkyv2plhf9vj8aqvggxg9d1yad2jcw8c8qc"
+    },
+    "jar": {
+      "sha1": "815893df5f31da2ece4040fe0a12fd44b577afaf",
+      "sha256": "04v5fg53jl9gbn6pyz3l7kbpxv0xjzyasnw6yd1a3hhacq2d6xzq"
+    }
+  },
+
+  {
+    "path": "compojure/compojure/1.5.2/compojure-1.5.2",
+    "host": "https://repo.clojars.org",
+    "pom": {
+      "sha1": "9e8da477b6682094d56802cb155291a2acb829bd",
+      "sha256": "036z64iprypccz03iq7lqxvw99xjh4xlsfmfwbs37pmhfnfmbdnx"
+    },
+    "jar": {
+      "sha1": "0b5258d0616ffc5f64c2b6d95f09de56d24df439",
+      "sha256": "1s2k05lwnlm9a66mxnsss437i9gp70dny8y2rlfkl090s6mdqsaf"
+    }
+  },
+
   {
     "path": "crypto-equality/crypto-equality/1.0.0/crypto-equality-1.0.0",
     "host": "https://repo.clojars.org",
@@ -935,19 +922,6 @@
     }
   },
 
-  {
-    "path": "org/clojure/google-closure-library/0.0-20191016-6ae1f72f/google-closure-library-0.0-20191016-6ae1f72f",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "dea94d117aa88d75e281f877914454f79df06bf2",
-      "sha256": "1nysls9ywj3b3zvlfwy68kayx47r4bacidmq1vx8w4h043l9kxrr"
-    },
-    "jar": {
-      "sha1": "6025affb7181cd40418600864f58eed1ea80055d",
-      "sha256": "0w6waii2qps7vp3nzbj5nai809xdq26ss0cabl4wz1s8fc6js6qw"
-    }
-  },
-
   {
     "path": "org/clojure/google-closure-library-third-party/0.0-20191016-6ae1f72f/google-closure-library-third-party-0.0-20191016-6ae1f72f",
     "host": "https://repo1.maven.org/maven2",
@@ -961,6 +935,19 @@
     }
   },
 
+  {
+    "path": "org/clojure/google-closure-library/0.0-20191016-6ae1f72f/google-closure-library-0.0-20191016-6ae1f72f",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "dea94d117aa88d75e281f877914454f79df06bf2",
+      "sha256": "1nysls9ywj3b3zvlfwy68kayx47r4bacidmq1vx8w4h043l9kxrr"
+    },
+    "jar": {
+      "sha1": "6025affb7181cd40418600864f58eed1ea80055d",
+      "sha256": "0w6waii2qps7vp3nzbj5nai809xdq26ss0cabl4wz1s8fc6js6qw"
+    }
+  },
+
   {
     "path": "org/clojure/spec.alpha/0.2.176/spec.alpha-0.2.176",
     "host": "https://repo1.maven.org/maven2",
@@ -987,19 +974,6 @@
     }
   },
 
-  {
-    "path": "org/clojure/tools.analyzer/1.0.0/tools.analyzer-1.0.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "fa72b6392b31762b55e0dc3de1c220ecdc6bb8a7",
-      "sha256": "1yg46a9zbga7rsrhwdv877hh60hcbyaykn37r3i50icxmgqcylq4"
-    },
-    "jar": {
-      "sha1": "d2fb65426c7998647fb1fb3db1fb5b222ab91df6",
-      "sha256": "0mj1xi3v03fzcw1smpayvbvbgly2p3ysbgfz7jgfdhmxi4gl6gs6"
-    }
-  },
-
   {
     "path": "org/clojure/tools.analyzer.jvm/1.1.0/tools.analyzer.jvm-1.1.0",
     "host": "https://repo1.maven.org/maven2",
@@ -1013,6 +987,19 @@
     }
   },
 
+  {
+    "path": "org/clojure/tools.analyzer/1.0.0/tools.analyzer-1.0.0",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "fa72b6392b31762b55e0dc3de1c220ecdc6bb8a7",
+      "sha256": "1yg46a9zbga7rsrhwdv877hh60hcbyaykn37r3i50icxmgqcylq4"
+    },
+    "jar": {
+      "sha1": "d2fb65426c7998647fb1fb3db1fb5b222ab91df6",
+      "sha256": "0mj1xi3v03fzcw1smpayvbvbgly2p3ysbgfz7jgfdhmxi4gl6gs6"
+    }
+  },
+
   {
     "path": "org/clojure/tools.cli/1.0.194/tools.cli-1.0.194",
     "host": "https://repo1.maven.org/maven2",
@@ -1078,19 +1065,6 @@
     }
   },
 
-  {
-    "path": "org/graalvm/js/js/20.1.0/js-20.1.0",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "95452a7fdac1d358f1dd66b33e49f4440e986922",
-      "sha256": "0gkazzg8771g3pc90fb99wmlk99rjimcryrmzz6zab742m4dbina"
-    },
-    "jar": {
-      "sha1": "0abe5e8068014ccb34cf075637a00b7ce37e4a8c",
-      "sha256": "0v5pxjl9p7wwfrrzkkqh6qbvnn0p8n342smxzcqk3qxl4ah3aqnk"
-    }
-  },
-
   {
     "path": "org/graalvm/js/js-scriptengine/20.1.0/js-scriptengine-20.1.0",
     "host": "https://repo1.maven.org/maven2",
@@ -1104,6 +1078,19 @@
     }
   },
 
+  {
+    "path": "org/graalvm/js/js/20.1.0/js-20.1.0",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "95452a7fdac1d358f1dd66b33e49f4440e986922",
+      "sha256": "0gkazzg8771g3pc90fb99wmlk99rjimcryrmzz6zab742m4dbina"
+    },
+    "jar": {
+      "sha1": "0abe5e8068014ccb34cf075637a00b7ce37e4a8c",
+      "sha256": "0v5pxjl9p7wwfrrzkkqh6qbvnn0p8n342smxzcqk3qxl4ah3aqnk"
+    }
+  },
+
   {
     "path": "org/graalvm/regex/regex/20.1.0/regex-20.1.0",
     "host": "https://repo1.maven.org/maven2",
@@ -1234,19 +1221,6 @@
     }
   },
 
-  {
-    "path": "org/ow2/asm/asm/7.1/asm-7.1",
-    "host": "https://repo1.maven.org/maven2",
-    "pom": {
-      "sha1": "7e40eb6619fd20bd7d98bf775bfdd810aec87ac7",
-      "sha256": "101i3pyrq082kjyz413hfqwkjjsyfnk9kx3rqr38ln56mlp78a8g"
-    },
-    "jar": {
-      "sha1": "fa29aa438674ff19d5e1386d2c3527a0267f291e",
-      "sha256": "1pnlb1ick32bihpzc599xl9ppd07qhls6pm0xaqwrj9cdlmzmcja"
-    }
-  },
-
   {
     "path": "org/ow2/asm/asm-analysis/7.1/asm-analysis-7.1",
     "host": "https://repo1.maven.org/maven2",
@@ -1299,6 +1273,19 @@
     }
   },
 
+  {
+    "path": "org/ow2/asm/asm/7.1/asm-7.1",
+    "host": "https://repo1.maven.org/maven2",
+    "pom": {
+      "sha1": "7e40eb6619fd20bd7d98bf775bfdd810aec87ac7",
+      "sha256": "101i3pyrq082kjyz413hfqwkjjsyfnk9kx3rqr38ln56mlp78a8g"
+    },
+    "jar": {
+      "sha1": "fa29aa438674ff19d5e1386d2c3527a0267f291e",
+      "sha256": "1pnlb1ick32bihpzc599xl9ppd07qhls6pm0xaqwrj9cdlmzmcja"
+    }
+  },
+
   {
     "path": "org/wildfly/client/wildfly-client-config/1.0.1.Final/wildfly-client-config-1.0.1.Final",
     "host": "https://repo1.maven.org/maven2",
@@ -1351,19 +1338,6 @@
     }
   },
 
-  {
-    "path": "reagent/reagent/1.0.0/reagent-1.0.0",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "93ad5ccb0101108fb0843a3f2c50da28f8fd8336",
-      "sha256": "1l4xzgc4wbd8b29mhj5j336cf8w1zccaia0w413zf3bnj6jf5m38"
-    },
-    "jar": {
-      "sha1": "a1dd4d40425bb2e1afad0fe72780b43ff394ccfa",
-      "sha256": "1g607s1ymns85923bvhwrsj0y5czyqqq1jmxx0a58fnsm1b318fa"
-    }
-  },
-
   {
     "path": "re-com/re-com/2.8.0/re-com-2.8.0",
     "host": "https://repo.clojars.org",
@@ -1377,19 +1351,6 @@
     }
   },
 
-  {
-    "path": "refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0",
-    "host": "https://repo.clojars.org",
-    "pom": {
-      "sha1": "0bce30b420249ba7e4b90cbb3e046b4bb5416389",
-      "sha256": "0zmg5qc8d55pry7832isiwd2q237znfjqjpxchd2hvlpalh5qnva"
-    },
-    "jar": {
-      "sha1": "6bc3441afc94f7ca024e41a864ca75e05df7e207",
-      "sha256": "0w8hax99y98l53mixxzx2ja0vcnhjv8dnsaz1zj3vqk775ns5w6i"
-    }
-  },
-
   {
     "path": "re-frame/re-frame/0.12.0/re-frame-0.12.0",
     "host": "https://repo.clojars.org",
@@ -1430,28 +1391,28 @@
   },
 
   {
-    "path": "rewrite-clj/rewrite-clj/0.6.1/rewrite-clj-0.6.1",
+    "path": "reagent/reagent/1.0.0/reagent-1.0.0",
     "host": "https://repo.clojars.org",
     "pom": {
-      "sha1": "05778b423e14e8f1b054cc78df4e5d048cc0fc68",
-      "sha256": "0wp9xvmfp37x88msm2yhhzi8sjwd4hxz0vv4bslhal3zi97c1bj6"
+      "sha1": "93ad5ccb0101108fb0843a3f2c50da28f8fd8336",
+      "sha256": "1l4xzgc4wbd8b29mhj5j336cf8w1zccaia0w413zf3bnj6jf5m38"
     },
     "jar": {
-      "sha1": "55b399417a088ca163ef835e56db76ea962ce0a9",
-      "sha256": "0qq3an9nrhhw5mba753zs1m9rnk86w9l1f04n8v0hz0i2kbf1cki"
+      "sha1": "a1dd4d40425bb2e1afad0fe72780b43ff394ccfa",
+      "sha256": "1g607s1ymns85923bvhwrsj0y5czyqqq1jmxx0a58fnsm1b318fa"
     }
   },
 
   {
-    "path": "rewrite-cljs/rewrite-cljs/0.4.4/rewrite-cljs-0.4.4",
+    "path": "refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0",
     "host": "https://repo.clojars.org",
     "pom": {
-      "sha1": "4e7a2542517a5b0231631305461603605bea1592",
-      "sha256": "050imgkzw5q7200klwrkd4v32xxy1f4aghs8g4ma5dbg4rl4pgcd"
+      "sha1": "0bce30b420249ba7e4b90cbb3e046b4bb5416389",
+      "sha256": "0zmg5qc8d55pry7832isiwd2q237znfjqjpxchd2hvlpalh5qnva"
     },
     "jar": {
-      "sha1": "dd14a371d0d09eedccb39f01e3edabefb2d1e64f",
-      "sha256": "0hb07wg71i2bjn8wzs8q6w1nb3jb2s36nhr9kv9mc0gyrr6im244"
+      "sha1": "6bc3441afc94f7ca024e41a864ca75e05df7e207",
+      "sha256": "0w8hax99y98l53mixxzx2ja0vcnhjv8dnsaz1zj3vqk775ns5w6i"
     }
   },
 

nix/deps/clojure/deps.list

@@ -2,13 +2,13 @@ args4j/args4j/2.0.26/args4j-2.0.26.jar
 bidi/bidi/2.1.6/bidi-2.1.6.jar
 binaryage/env-config/0.2.2/env-config-0.2.2.jar
 binaryage/oops/0.7.0/oops-0.7.0.jar
+camel-snake-kebab/camel-snake-kebab/0.4.3/camel-snake-kebab-0.4.3.jar
 cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3.jar
 cider/piggieback/0.4.1/piggieback-0.4.1.jar
-cljfmt/cljfmt/0.6.7/cljfmt-0.6.7.jar
 cljs-bean/cljs-bean/1.3.0/cljs-bean-1.3.0.jar
-cljsjs/react/17.0.1-0/react-17.0.1-0.jar
-cljsjs/react-dom/17.0.1-0/react-dom-17.0.1-0.jar
 cljsjs/react-dom-server/17.0.1-0/react-dom-server-17.0.1-0.jar
+cljsjs/react-dom/17.0.1-0/react-dom-17.0.1-0.jar
+cljsjs/react/17.0.1-0/react-17.0.1-0.jar
 clout/clout/2.1.2/clout-2.1.2.jar
 com/andrewmcveigh/cljs-time/0.5.2/cljs-time-0.5.2.jar
 com/bhauman/cljs-test-display/0.1.1/cljs-test-display-0.1.1.jar
@@ -19,8 +19,6 @@ com/cognitect/transit-js/0.8.846/transit-js-0.8.846.jar
 com/fasterxml/jackson/core/jackson-core/2.8.7/jackson-core-2.8.7.jar
 com/google/code/findbugs/jsr305/3.0.1/jsr305-3.0.1.jar
 com/google/code/gson/gson/2.7/gson-2.7.jar
-com/googlecode/java-diff-utils/diffutils/1.3.0/diffutils-1.3.0.jar
-com/googlecode/json-simple/json-simple/1.1.1/json-simple-1.1.1.jar
 com/google/elemental2/elemental2-core/1.0.0-RC1/elemental2-core-1.0.0-RC1.jar
 com/google/errorprone/error_prone_annotations/2.3.1/error_prone_annotations-2.3.1.jar
 com/google/guava/guava/25.1-jre/guava-25.1-jre.jar
@@ -31,17 +29,18 @@ com/google/jsinterop/base/1.0.0/base-1.0.0.jar
 com/google/jsinterop/jsinterop-annotations/1.0.2/jsinterop-annotations-1.0.2.jar
 com/google/protobuf/protobuf-java/3.11.1/protobuf-java-3.11.1.jar
 com/google/re2j/re2j/1.3/re2j-1.3.jar
+com/googlecode/json-simple/json-simple/1.1.1/json-simple-1.1.1.jar
 com/ibm/icu/icu4j/66.1/icu4j-66.1.jar
-commons-codec/commons-codec/1.10/commons-codec-1.10.jar
-commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4.jar
-commons-io/commons-io/2.6/commons-io-2.6.jar
-compojure/compojure/1.5.2/compojure-1.5.2.jar
 com/taoensso/encore/2.105.0/encore-2.105.0.jar
 com/taoensso/timbre/4.10.0/timbre-4.10.0.jar
 com/taoensso/truss/1.5.0/truss-1.5.0.jar
 com/taoensso/tufte/2.1.0/tufte-2.1.0.jar
 com/wsscode/pathom/2.2.31/pathom-2.2.31.jar
 com/wsscode/spec-inspec/1.0.0-alpha2/spec-inspec-1.0.0-alpha2.jar
+commons-codec/commons-codec/1.10/commons-codec-1.10.jar
+commons-fileupload/commons-fileupload/1.4/commons-fileupload-1.4.jar
+commons-io/commons-io/2.6/commons-io-2.6.jar
+compojure/compojure/1.5.2/compojure-1.5.2.jar
 crypto-equality/crypto-equality/1.0.0/crypto-equality-1.0.0.jar
 crypto-random/crypto-random/1.2.0/crypto-random-1.2.0.jar
 day8/re-frame/test/0.1.5/test-0.1.5.jar
@@ -70,19 +69,19 @@ org/clojure/core.rrb-vector/0.1.1/core.rrb-vector-0.1.1.jar
 org/clojure/core.specs.alpha/0.2.44/core.specs.alpha-0.2.44.jar
 org/clojure/data.json/1.0.0/data.json-1.0.0.jar
 org/clojure/data.priority-map/1.0.0/data.priority-map-1.0.0.jar
-org/clojure/google-closure-library/0.0-20191016-6ae1f72f/google-closure-library-0.0-20191016-6ae1f72f.jar
 org/clojure/google-closure-library-third-party/0.0-20191016-6ae1f72f/google-closure-library-third-party-0.0-20191016-6ae1f72f.jar
+org/clojure/google-closure-library/0.0-20191016-6ae1f72f/google-closure-library-0.0-20191016-6ae1f72f.jar
 org/clojure/spec.alpha/0.2.176/spec.alpha-0.2.176.jar
 org/clojure/test.check/1.1.0/test.check-1.1.0.jar
-org/clojure/tools.analyzer/1.0.0/tools.analyzer-1.0.0.jar
 org/clojure/tools.analyzer.jvm/1.1.0/tools.analyzer.jvm-1.1.0.jar
+org/clojure/tools.analyzer/1.0.0/tools.analyzer-1.0.0.jar
 org/clojure/tools.cli/1.0.194/tools.cli-1.0.194.jar
 org/clojure/tools.logging/0.4.1/tools.logging-0.4.1.jar
 org/clojure/tools.macro/0.1.5/tools.macro-0.1.5.jar
 org/clojure/tools.reader/1.3.3/tools.reader-1.3.3.jar
 org/codehaus/mojo/animal-sniffer-annotations/1.14/animal-sniffer-annotations-1.14.jar
-org/graalvm/js/js/20.1.0/js-20.1.0.jar
 org/graalvm/js/js-scriptengine/20.1.0/js-scriptengine-20.1.0.jar
+org/graalvm/js/js/20.1.0/js-20.1.0.jar
 org/graalvm/regex/regex/20.1.0/regex-20.1.0.jar
 org/graalvm/sdk/graal-sdk/20.1.0/graal-sdk-20.1.0.jar
 org/graalvm/truffle/truffle-api/20.1.0/truffle-api-20.1.0.jar
@@ -93,23 +92,21 @@ org/jboss/xnio/xnio-api/3.8.0.Final/xnio-api-3.8.0.Final.jar
 org/jboss/xnio/xnio-nio/3.8.0.Final/xnio-nio-3.8.0.Final.jar
 org/jsoup/jsoup/1.9.2/jsoup-1.9.2.jar
 org/msgpack/msgpack/0.6.12/msgpack-0.6.12.jar
-org/ow2/asm/asm/7.1/asm-7.1.jar
 org/ow2/asm/asm-analysis/7.1/asm-analysis-7.1.jar
 org/ow2/asm/asm-commons/7.1/asm-commons-7.1.jar
 org/ow2/asm/asm-tree/7.1/asm-tree-7.1.jar
 org/ow2/asm/asm-util/7.1/asm-util-7.1.jar
+org/ow2/asm/asm/7.1/asm-7.1.jar
 org/wildfly/client/wildfly-client-config/1.0.1.Final/wildfly-client-config-1.0.1.Final.jar
 org/wildfly/common/wildfly-common/1.5.2.Final/wildfly-common-1.5.2.Final.jar
 prismatic/schema/1.1.7/schema-1.1.7.jar
 quoin/quoin/0.1.2/quoin-0.1.2.jar
-reagent/reagent/1.0.0/reagent-1.0.0.jar
 re-com/re-com/2.8.0/re-com-2.8.0.jar
-refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0.jar
 re-frame/re-frame/0.12.0/re-frame-0.12.0.jar
 re-frisk-remote/re-frisk-remote/1.6.0/re-frisk-remote-1.6.0.jar
 re-frisk/sente/1.15.0/sente-1.15.0.jar
-rewrite-clj/rewrite-clj/0.6.1/rewrite-clj-0.6.1.jar
-rewrite-cljs/rewrite-cljs/0.4.4/rewrite-cljs-0.4.4.jar
+reagent/reagent/1.0.0/reagent-1.0.0.jar
+refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0.jar
 ring-cors/ring-cors/0.1.8/ring-cors-0.1.8.jar
 ring/ring-codec/1.1.2/ring-codec-1.1.2.jar
 ring/ring-core/1.8.1/ring-core-1.8.1.jar

nix/shell.nix

@@ -17,6 +17,8 @@ in mkShell {
     lsof # used in start-react-native.sh
     # build specific utilities
     clojure maven watchman
+    # lint specific utilities
+    clj-kondo zprint
     # other nice to have stuff
     yarn nodejs python27
   ] # and some special cases

nix/shells.nix

@@ -23,7 +23,7 @@ let
 
     # for calling clojure targets in CI or Makefile
     clojure = mkShell {
-      buildInputs = with pkgs; [ clojure flock maven openjdk clj-kondo ];
+      buildInputs = with pkgs; [ clojure flock maven openjdk ];
       inputsFrom = [ nodejs-sh ];
       # CLASSPATH from clojure deps with 'src' appended to find local sources.
       shellHook = with pkgs; ''

package.json

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

resources/chats.json

@@ -1,134 +0,0 @@
-{
-  "chats": [
-    ["Featured", [
-      "status",
-      "support",
-      "crypto",
-      "chitchat",
-      "defi",
-      "markets",
-      "dap-ps",
-      "devcon",
-      "eth2"
-    ]],
-
-    ["General", [
-      "chitchat",
-      "hello",
-      "worldnews",
-      "status",
-      "support"
-    ]],
-
-    ["Entertainment", [
-      "music",
-      "movies",
-      "podcasts",
-      "books",
-      "gaming",
-      "adult",
-      "tv-shows"
-    ]],
-
-    ["Interests", [
-      "sports",
-      "travel",
-      "design",
-      "food",
-      "automotive"
-    ]],
-
-    ["Society", [
-      "climatechange",
-      "blacklivesmatter",
-      "politics",
-      "hongkong",
-      "privacy"
-    ]],
-
-    ["Crypto", [
-      "crypto",
-      "markets",
-      "crypto-education",
-      "ethereum",
-      "bitcoin",
-      "chainlink",
-      "avalanche",
-      "eth2",
-      "eips",
-      "dap-ps",
-      "cryptolife",
-      "governance",
-      "staking",
-      "defi",
-      "cryptopayments",
-      "tokenomics",
-      "web3",
-      "web3design",
-      "devcon",
-      "exchange",
-      "validators"
-    ]],
-
-    ["Technologies", [
-      "tech",
-      "ai",
-      "vr-ar",
-      "networks"
-    ]],
-
-    ["Status", [
-      "status",
-      "support",
-      "statusphere",
-      "status-townhall-questions",
-      "status-core-ui",
-      "status-keycard",
-      "nimbus-general",
-      "status-assemble",
-      "status-marketing",
-      "status-protocol",
-      "status-desktop",
-      "status-watercooler",
-      "status-security",
-      "waku",
-      "status-docs",
-      "status-general",
-      "status-design"
-    ]],
-
-    ["Development", [
-      "ethereum-clients",
-      "storage",
-      "indexing",
-      "sidechains",
-      "layer2",
-      "devops",
-      "smart-contracts",
-      "embark-community",
-      "subspace",
-      "open-source",
-      "security"
-    ]],
-
-    ["Languages", [
-      "status-espanol",
-      "statusbrasil",
-      "status-german",
-      "status-french",
-      "status-italiano",
-      "status-dutch",
-      "status-russian",
-      "status-chinese",
-      "status-korean",
-      "status-japanese",
-      "status-farsi",
-      "status-turkish",
-      "status-filipino",
-      "status-naija",
-      "status-indian",
-      "status-arabic",
-      "indonesian"
-    ]]
-  ]
-}

resources/config/fleets.json

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

shadow-cljs.edn

@@ -1,116 +1,120 @@
 ;; shadow-cljs configuration
-{:source-paths ["src" "test/cljs"]
+{:source-paths   ["src" "test/cljs"]
 
- :dependencies [[reagent "1.0.0"]
-                [re-frame "0.12.0"]
-                [binaryage/oops "0.7.0"]
-                [com.andrewmcveigh/cljs-time "0.5.2"]
-                [status-im/timbre "4.10.0-2-status"]
-                [com.taoensso/encore "2.105.0"]
-                [hickory "0.7.1"]
-                [cljs-bean "1.3.0"]
-                [com.cognitect/transit-cljs "0.8.248"]
-                [mvxcvi/alphabase "1.0.0"]
-                ;; dev dependencies
-                [refactor-nrepl "2.5.0"]
-                [cider/cider-nrepl "0.25.3"]
-                [cider/piggieback "0.4.1"]
-                [re-frisk-remote "1.6.0"]
-                ;; routing
-                [bidi "2.1.6"]
-                ;; test dependencies
-                [day8.re-frame/test "0.1.5"]
-                [com.taoensso/tufte "2.1.0"]
-                ;; linting
-                [cljfmt/cljfmt "0.6.7"]]
+ :dependencies   [[reagent "1.0.0"]
+                  [re-frame "0.12.0"]
+                  [binaryage/oops "0.7.0"]
+                  [com.andrewmcveigh/cljs-time "0.5.2"]
+                  [status-im/timbre "4.10.0-2-status"]
+                  [com.taoensso/encore "2.105.0"]
+                  [hickory "0.7.1"]
+                  [cljs-bean "1.3.0"]
+                  [com.cognitect/transit-cljs "0.8.248"]
+                  [mvxcvi/alphabase "1.0.0"]
+                  [camel-snake-kebab "0.4.3"]
+                  ;; dev dependencies
+                  [refactor-nrepl "2.5.0"]
+                  [cider/cider-nrepl "0.25.3"]
+                  [cider/piggieback "0.4.1"]
+                  [re-frisk-remote "1.6.0"]
+                  ;; routing
+                  [bidi "2.1.6"]
+                  ;; test dependencies
+                  [day8.re-frame/test "0.1.5"]
+                  [com.taoensso/tufte "2.1.0"]]
 
  ;; port and middleware for repl in development
- :nrepl {:port 7888
-         :middleware [cider.piggieback/wrap-cljs-repl
-                      refactor-nrepl.middleware/wrap-refactor]}
+ :nrepl          {:port       7888
+                  :middleware [cider.piggieback/wrap-cljs-repl
+                               refactor-nrepl.middleware/wrap-refactor]}
 
  ;; shadow-cljs web interface
- :http {:port 3449
-        :host "0.0.0.0"}
+ :http           {:port 3449
+                  :host "0.0.0.0"}
 
  :cache-blockers #{status-im.utils.js-resources status-im.ui.components.icons.icons}
 
- :builds {:mobile
-          {:target :react-native
-           :output-dir "app"
-           :init-fn status-im2.setup.core/init
-           ;; When false, the Shadow-CLJS watcher won't automatically refresh
-           ;; the target files (a.k.a hot reload). When false, you can manually
-           ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.
-           :devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
-           :dev {:devtools {:after-load status-im2.setup.hot-reload/reload
-                            :build-notify status-im2.setup.hot-reload/build-notify
-                            :preloads [re-frisk-remote.preload]}
-                 :closure-defines
-                 {status-im.utils.config/POKT_TOKEN #shadow/env "POKT_TOKEN"
-                  status-im.utils.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
-                 :compiler-options {:output-feature-set :es5
-                                    :closure-defines
-                                    {re-frame.trace/trace-enabled? true}
-                                    :source-map false
-                                    :infer-externs true}
-                 ;; if you want to use a real device, set your local ip
-                 ;; in the SHADOW_HOST env variable to make sure that
-                 ;; it will use the right interface
-                 :local-ip #shadow/env "SHADOW_HOST"}
-           :chunks {:fleets status-im.fleet.default-fleet/default-fleets
-                    :chats status-im.chat.default-chats/default-chats}
-           :release
-           {: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
-                                        ;;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}}}}
-          ;; 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
-          ;; function to use the mocks instead of the rn libraries
-          :test
-          {:output-to        "target/test/test.js"
-           :output-dir       "target/test"
-           :optimizations    :simple
-           :target           :node-test
-           :main             status-im.test-runner/main
-           ;; set :ui-driven to true to let shadow-cljs inject node-repl
-           :ui-driven        true
-           :closure-defines
-           {status-im.utils.config/POKT_TOKEN #shadow/env "POKT_TOKEN"
-            status-im.utils.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
-           :compiler-options {;; needed because we override require and it
-                              ;; messes with source-map which reports callstack
-                              ;; exceeded exceptions instead of real issues
-                              :source-map    false
-                              ;; needed because we use deref in tests
-                              :static-fns    false
-                              :optimizations :simple
-                              :infer-externs true}}
+ :builds
+ {:mobile
+  {:target     :react-native
+   :output-dir "app"
+   :init-fn    status-im2.setup.core/init
+   ;; When false, the Shadow-CLJS watcher won't automatically refresh
+   ;; the target files (a.k.a hot reload). When false, you can manually
+   ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.
+   :devtools   {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
+   :dev        {:devtools         {:after-load   status-im2.setup.hot-reload/reload
+                                   :build-notify status-im2.setup.hot-reload/build-notify
+                                   :preloads     [re-frisk-remote.preload]}
+                :closure-defines
+                {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
+                 status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+                :compiler-options {:output-feature-set :es5
+                                   :closure-defines
+                                   {re-frame.trace/trace-enabled? true}
+                                   :source-map         false
+                                   :infer-externs      true}
+                ;; if you want to use a real device, set your local ip
+                ;; in the SHADOW_HOST env variable to make sure that
+                ;; it will use the right interface
+                :local-ip         #shadow/env "SHADOW_HOST"}
+   :chunks     {:fleets status-im.fleet.default-fleet/default-fleets}
+   :release
+   {:closure-defines
+    {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
+     status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+    :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}}}}
+  ;; 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
+  ;; function to use the mocks instead of the rn libraries
+  :test
+  {:output-to        "target/test/test.js"
+   :output-dir       "target/test"
+   :optimizations    :simple
+   :target           :node-test
+   ;; When running tests without a REPL you can uncomment below line to `make test-watch` a specific file
+   ;;:ns-regexp        "status-im2.subs.subs-test$"
+   :main
+   status-im.test-runner/main
+   ;; set :ui-driven to true to let shadow-cljs inject node-repl
+   :ui-driven
+   true
+   :closure-defines
+   {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
+    status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+   :compiler-options
+   {;; needed because we override require and it
+    ;; messes with source-map which reports callstack
+    ;; exceeded exceptions instead of real issues
+    :source-map    false
+    ;; needed because we use deref in tests
+    :static-fns    false
+    :optimizations :simple
+    :infer-externs true}}
 
-          ;; mock.js-dependencies is mocking the react-native libraries
-          ;; we build it as a node library so that it can be required by
-          ;; override.js
-          :mocks
-          {:target :node-library
-           :exports {:mocks mocks.js-dependencies/mock}
-           :output-to "target/mocks/mocks.js"
-           :output-dir "target/mocks"
-           :compiler-options {:optimizations :simple
-                              :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}}}}
+  ;; mock.js-dependencies is mocking the react-native libraries
+  ;; we build it as a node library so that it can be required by
+  ;; override.js
+  :mocks
+  {:target           :node-library
+   :exports          {:mocks mocks.js-dependencies/mock}
+   :output-to        "target/mocks/mocks.js"
+   :output-dir       "target/mocks"
+   :compiler-options {:optimizations :simple
+                      :source-map    false}}
+  :component-test {:target           :npm-module
+                   :entries          [quo2.core-spec status-im2.core-spec]
+                   :ns-regexp        "component-spec$"
+                   :output-dir       "component-spec"
+                   :compiler-options {:warnings-as-errors false
+                                      :static-fns         false
+                                      :infer-externs      true}}}}

src/js/bottom_sheet.js

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

src/js/record_audio_worklets.js

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

src/js/worklet_factory.js

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

src/mocks/js_dependencies.cljs

@@ -1,27 +1,42 @@
 (ns mocks.js-dependencies
   (:require-macros [status-im.utils.slurp :refer [slurp]])
   (:require [status-im.fleet.default-fleet :refer (default-fleets)])
-  (:require [status-im.utils.test :as utils.test])
-  (:require [status-im.chat.default-chats :refer (default-chats)]))
+  (:require [status-im.utils.test :as utils.test]))
 
-(def action-button          #js {:default #js {:Item #js {}}})
-(def config                 #js {:default #js {}})
-(def camera                 #js {:RNCamera #js {:Constants #js {}}})
-(def dialogs                #js {})
-(def dismiss-keyboard       #js {})
-(def emoji-picker           #js {:default #js {}})
-(def fs                     #js {})
-(def i18n                   #js {:locale "en"})
-(def image-crop-picker      #js {})
-(def image-resizer          #js {})
-(def qr-code                #js {})
-(def svg                    #js {})
+;; to generate a js Proxy at js/__STATUS_MOBILE_JS_IDENTITY_PROXY__ that accept any (.xxx) call and
+;; return itself
+;; For the convenience to mock eg.
+;; (-> reanimated/slide-out-up-animation .springify (.damping 20) (.stiffness 300))
+;; (-> reanimated/slide-out-up-animation (.damping 20) .springify (.stiffness 300))
+(js/eval
+ "
+var globalThis
+if (typeof window === \"undefined\") {
+  globalThis = global
+} else {
+  globalThis = window
+}
+globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}})
+")
+
+(def action-button #js {:default #js {:Item #js {}}})
+(def config #js {:default #js {}})
+(def camera #js {:RNCamera #js {:Constants #js {}}})
+(def dialogs #js {})
+(def dismiss-keyboard #js {})
+(def emoji-picker #js {:default #js {}})
+(def fs #js {})
+(def i18n #js {:locale "en"})
+(def image-crop-picker #js {})
+(def image-resizer #js {})
+(def qr-code #js {})
+(def svg #js {})
 
 (def react-native
-  (clj->js {:NativeModules {:RNGestureHandlerModule {:Direction (fn [])}
-                            :PushNotifications      {}
-                            :Status                 utils.test/status
-                            :ReanimatedModule       {:configureProps (fn [])}}
+  (clj->js {:NativeModules            {:RNGestureHandlerModule {:Direction (fn [])}
+                                       :PushNotifications      {}
+                                       :Status                 utils.test/status
+                                       :ReanimatedModule       {:configureProps (fn [])}}
 
             :View                     {}
             :RefreshControl           {}
@@ -64,9 +79,10 @@
             :Platform                 {:select (fn [])}
             :I18nManager              {:isRTL ""}
             :NativeEventEmitter       (fn [])
-            :LayoutAnimation          {:Presets       #js {:easeInEaseOut nil
-                                                           :linear        nil
-                                                           :spring        nil}
+            :LayoutAnimation          {:Presets       #js
+                                                       {:easeInEaseOut nil
+                                                        :linear        nil
+                                                        :spring        nil}
                                        :Types         #js {}
                                        :Properties    #{}
                                        :create        (fn [])
@@ -77,163 +93,201 @@
 
 (set! js/ReactNative react-native)
 
-(def reanimated-bottom-sheet           #js {:default #js {}})
+(def reanimated-bottom-sheet #js {:default #js {}})
 
-(def icons           #js {:default #js {}})
-(def webview                #js {:WebView #js {}})
-(def status-keycard         #js {:default #js {:nfcIsSupported (fn [] #js {:then identity})
-                                               :nfcIsEnabled (fn [] #js {:then identity})}})
+(def icons #js {:default #js {}})
+(def webview #js {:WebView #js {}})
+(def status-keycard
+  #js
+   {:default #js
+              {:nfcIsSupported (fn [] #js {:then identity})
+               :nfcIsEnabled   (fn [] #js {:then identity})}})
 
-(def snoopy                 #js {:default #js {}})
-(def snoopy-filter          #js {:default #js {}})
-(def snoopy-bars            #js {:default #js {}})
-(def snoopy-buffer          #js {:default #js {}})
-(def fetch                  #js {})
+(def snoopy #js {:default #js {}})
+(def snoopy-filter #js {:default #js {}})
+(def snoopy-bars #js {:default #js {}})
+(def snoopy-buffer #js {:default #js {}})
+(def fetch #js {})
 
 (def async-storage-atom (atom {}))
-(def async-storage #js {:default #js {:setItem #(js/Promise.resolve)
-                                      :multiGet #(js/Promise.resolve)
-                                      :getItem #(js/Promise.resolve)}})
+(def async-storage
+  #js
+   {:default #js
+              {:setItem  #(js/Promise.resolve)
+               :multiGet #(js/Promise.resolve)
+               :getItem  #(js/Promise.resolve)}})
 
-(def background-timer (clj->js {:default {:setTimeout js/setTimeout
-                                          :setInterval js/setInterval
-                                          :clearTimeout js/clearTimeout
-                                          :clearInterval js/clearInterval}}))
+(def background-timer
+  (clj->js {:default {:setTimeout    js/setTimeout
+                      :setInterval   js/setInterval
+                      :clearTimeout  js/clearTimeout
+                      :clearInterval js/clearInterval}}))
 
-(def keychain #js {:setGenericPassword (constantly (.resolve js/Promise true))
-                   :setInternetCredentials #(js/Promise.resolve)
-                   :resetInternetCredentials #(js/Promise.resolve)
-                   "ACCESSIBLE" {}
-                   "ACCESS_CONTROL" {}})
+(def keychain
+  #js
+   {:setGenericPassword       (constantly (.resolve js/Promise true))
+    :setInternetCredentials   #(js/Promise.resolve)
+    :resetInternetCredentials #(js/Promise.resolve)
+    "ACCESSIBLE"              {}
+    "ACCESS_CONTROL"          {}})
 
 (def react-native-mail #js {:mail #js {}})
-(def react-native-screens  #js {})
-(def react-native-shake  #js {})
+(def react-native-screens #js {})
+(def react-native-shake #js {})
 (def react-native-share #js {:default {}})
-(def react-native-svg #js {:SvgUri #js {:render identity}
-                           :SvgXml #js {:render identity}})
+(def react-native-svg
+  #js
+   {:SvgUri  #js {:render identity}
+    :SvgXml  #js {:render identity}
+    :default #js {:render identity}
+    :Path    #js {:render identity}})
 (def react-native-webview #js {:default {}})
 (def react-native-audio-toolkit #js {:MediaStates {}})
-(def net-info  #js {})
-(def touchid  #js {})
+(def net-info #js {})
+(def touchid #js {})
 (def react-native-image-viewing #js {:default {}})
-(def safe-area-context (clj->js {:SafeAreaProvider {:_reactNativeIphoneXHelper {:getStatusBarHeight (fn [])}}
-                                 :SafeAreaInsetsContext {:Consumer (fn [])}
-                                 :SafeAreaView {}}))
+(def safe-area-context
+  (clj->js {:SafeAreaProvider      {:_reactNativeIphoneXHelper {:getStatusBarHeight (fn [])}}
+            :SafeAreaInsetsContext {:Consumer (fn [])}
+            :SafeAreaView          {}}))
 
-(def back-handler #js {:addEventListener identity
-                       :removeEventListener identity})
-(def react #js {:useCallback nil
-                :useEffect nil
-                :useRef nil
-                :createRef nil
-                :Fragment identity})
-(def react-navigation-native #js {:NavigationContainer #js {}
-                                  :useFocusEffect      identity
-                                  :CommonActions       #js {}
-                                  :StackActions        #js {}})
+(def back-handler
+  #js
+   {:addEventListener    identity
+    :removeEventListener identity})
+(def react
+  #js
+   {:useCallback nil
+    :useEffect   nil
+    :useRef      nil
+    :createRef   nil
+    :Fragment    identity})
+(def react-navigation-native
+  #js
+   {:NavigationContainer #js {}
+    :useFocusEffect      identity
+    :CommonActions       #js {}
+    :StackActions        #js {}})
 
-(def react-native-navigation #js {:Navigation #js {:constants (fn [] #js {:then identity})
-                                                   :setDefaultOptions identity
-                                                   :setRoot identity
-                                                   :dismissOverlay #(js/Promise.resolve)
-                                                   :showOverlay identity
-                                                   :setLazyComponentRegistrator identity
-                                                   :pop identity
-                                                   :push identity
-                                                   :mergeOptions identity
-                                                   :popToRoot identity
-                                                   :showModal identity
-                                                   :dismissModal identity
-                                                   :registerComponent identity
-                                                   :events
-                                                   (fn []
-                                                     #js {:registerModalDismissedListener identity
-                                                          :registerAppLaunchedListener identity
-                                                          :registerBottomTabSelectedListener identity
-                                                          :registerComponentDidDisappearListener identity
-                                                          :registerComponentDidAppearListener identity
-                                                          :registerNavigationButtonPressedListener identity})}})
+(def react-native-navigation
+  #js
+   {:Navigation #js
+                 {:constants                   (fn [] #js {:then identity})
+                  :setDefaultOptions           identity
+                  :setRoot                     identity
+                  :dismissOverlay              #(js/Promise.resolve)
+                  :showOverlay                 identity
+                  :setLazyComponentRegistrator identity
+                  :pop                         identity
+                  :push                        identity
+                  :mergeOptions                identity
+                  :popToRoot                   identity
+                  :showModal                   identity
+                  :dismissModal                identity
+                  :registerComponent           identity
+                  :events
+                  (fn []
+                    #js
+                     {:registerModalDismissedListener          identity
+                      :registerAppLaunchedListener             identity
+                      :registerBottomTabSelectedListener       identity
+                      :registerComponentDidDisappearListener   identity
+                      :registerComponentDidAppearListener      identity
+                      :registerNavigationButtonPressedListener identity})}})
 
-(def react-navigation-stack #js {:createStackNavigator identity
-                                 :TransitionPresets    #js {:ModalPresentationIOS #js {}}})
+(def react-navigation-stack
+  #js
+   {:createStackNavigator identity
+    :TransitionPresets    #js {:ModalPresentationIOS #js {}}})
 (def react-navigation-bottom-tabs #js {:createBottomTabNavigator identity})
 
 (def react-native-haptic-feedback #js {:default #js {:trigger nil}})
 
-(def react-native-reanimated #js {:default                #js {:createAnimatedComponent identity
-                                                               :eq                      nil
-                                                               :greaterOrEq             nil
-                                                               :greaterThan             nil
-                                                               :lessThan                nil
-                                                               :lessOrEq                nil
-                                                               :add                     nil
-                                                               :diff                    nil
-                                                               :divide                  nil
-                                                               :sub                     nil
-                                                               :multiply                nil
-                                                               :abs                     nil
-                                                               :min                     nil
-                                                               :max                     nil
-                                                               :neq                     nil
-                                                               :and                     nil
-                                                               :or                      nil
-                                                               :not                     nil
-                                                               :set                     nil
-                                                               :startClock              nil
-                                                               :stopClock               nil
-                                                               :Value                   nil
-                                                               :Clock                   nil
-                                                               :debug                   nil
-                                                               :log                     nil
-                                                               :event                   nil
-                                                               :cond                    nil
-                                                               :block                   nil
-                                                               :interpolateNode         nil
-                                                               :call                    nil
-                                                               :timing                  nil
-                                                               :onChange                nil
-                                                               :View                    #js {}
-                                                               :Image                   #js {}
-                                                               :ScrollView              #js {}
-                                                               :Text                    #js {}
-                                                               :Extrapolate             #js {:CLAMP nil}
-                                                               :Code                    #js {}}
-                                  :EasingNode             #js {:bezier identity
-                                                               :linear identity}
-                                  :clockRunning nil
-                                  :useSharedValue         (fn [])
-                                  :useAnimatedStyle       (fn [])
-                                  :withTiming             (fn [])
-                                  :withDelay              (fn [])
-                                  :Easing                 #js {:bezier identity}
-                                  :Keyframe               (fn [])})
-(def react-native-gesture-handler #js {:default                  #js {}
-                                       :State                    #js {:BEGAN        nil
-                                                                      :ACTIVE       nil
-                                                                      :CANCELLED    nil
-                                                                      :END          nil
-                                                                      :FAILED       nil
-                                                                      :UNDETERMINED nil}
-                                       :PureNativeButton         #js {}
-                                       :TapGestureHandler        #js {}
-                                       :PanGestureHandler        #js {}
-                                       :TouchableHighlight       #js {}
-                                       :LongPressGestureHandler  #js {}
-                                       :TouchableWithoutFeedback #js {}
-                                       :NativeViewGestureHandler #js {}
-                                       :FlatList                 #js {}
-                                       :ScrollView               #js {}
-                                       :TouchableOpacity         #js {}
-                                       :GestureDetector          #js {}
-                                       :Gesture                  #js {:Pan nil}
-                                       :createNativeWrapper      identity})
+(def react-native-reanimated
+  #js
+   {:default                #js
+                             {:createAnimatedComponent identity
+                              :eq                      nil
+                              :greaterOrEq             nil
+                              :greaterThan             nil
+                              :lessThan                nil
+                              :lessOrEq                nil
+                              :add                     nil
+                              :diff                    nil
+                              :divide                  nil
+                              :sub                     nil
+                              :multiply                nil
+                              :abs                     nil
+                              :min                     nil
+                              :max                     nil
+                              :neq                     nil
+                              :and                     nil
+                              :or                      nil
+                              :not                     nil
+                              :set                     nil
+                              :startClock              nil
+                              :stopClock               nil
+                              :Value                   nil
+                              :Clock                   nil
+                              :debug                   nil
+                              :log                     nil
+                              :event                   nil
+                              :cond                    nil
+                              :block                   nil
+                              :interpolateNode         nil
+                              :call                    nil
+                              :timing                  nil
+                              :onChange                nil
+                              :View                    #js {}
+                              :Image                   #js {}
+                              :ScrollView              #js {}
+                              :Text                    #js {}
+                              :Extrapolate             #js {:CLAMP nil}
+                              :Code                    #js {}}
+    :EasingNode             #js
+                             {:bezier identity
+                              :linear identity}
+    :clockRunning           nil
+    :useSharedValue         (fn [])
+    :useAnimatedStyle       (fn [])
+    :withTiming             (fn [])
+    :withDelay              (fn [])
+    :Easing                 #js {:bezier identity}
+    :Keyframe               (fn [])
+    :enableLayoutAnimations (fn [])
+    :SlideOutUp             js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
+    :SlideInUp              js/__STATUS_MOBILE_JS_IDENTITY_PROXY__
+    :LinearTransition       js/__STATUS_MOBILE_JS_IDENTITY_PROXY__})
+
+(def react-native-gesture-handler
+  #js
+   {:default                  #js {}
+    :State                    #js
+                               {:BEGAN        nil
+                                :ACTIVE       nil
+                                :CANCELLED    nil
+                                :END          nil
+                                :FAILED       nil
+                                :UNDETERMINED nil}
+    :PureNativeButton         #js {}
+    :TapGestureHandler        #js {}
+    :PanGestureHandler        #js {}
+    :TouchableHighlight       #js {}
+    :LongPressGestureHandler  #js {}
+    :TouchableWithoutFeedback #js {}
+    :NativeViewGestureHandler #js {}
+    :FlatList                 #js {}
+    :ScrollView               #js {}
+    :TouchableOpacity         #js {}
+    :GestureDetector          #js {}
+    :Gesture                  #js {:Pan nil}
+    :createNativeWrapper      identity})
 
 (def react-native-redash #js {:clamp nil})
 
 (def react-native-languages
-  (clj->js {:default {:language "en",
-                      :addEventListener (fn []),
+  (clj->js {:default {:language            "en"
+                      :addEventListener    (fn [])
                       :removeEventListener (fn [])}}))
 
 (def react-native-device-info
@@ -243,8 +297,9 @@
   #js {:CameraKitCamera #js {}})
 
 (def react-native-push-notification
-  #js {:localNotification identity
-       :requestPermission identity})
+  #js
+   {:localNotification identity
+    :requestPermission identity})
 
 (def react-native-gradien #js {:default #js {}})
 
@@ -272,82 +327,91 @@
 (def react-native-camera-roll
   (clj->js {:default #js {}}))
 
-(def wallet-connect-client #js {:default       #js {}
-                                :CLIENT_EVENTS #js {:session #js {:request nil
-                                                                  :created nil
-                                                                  :deleted nil
-                                                                  :proposal nil
-                                                                  :updated nil}}})
+(def wallet-connect-client
+  #js
+   {:default       #js {}
+    :CLIENT_EVENTS #js
+                    {:session #js
+                               {:request  nil
+                                :created  nil
+                                :deleted  nil
+                                :proposal nil
+                                :updated  nil}}})
 
 (def worklet-factory
   #js {:applyAnimationsToStyle (fn [])})
 
 (def shell-worklets #js {})
 
+(def bottom-sheet #js {})
+(def record-audio-worklets #js {})
+
 ;; Update i18n_resources.cljs
-(defn mock [module]
+(defn mock
+  [module]
   (case module
-    "react-native-languages" react-native-languages
-    "react-native-background-timer" background-timer
-    "react-native-image-crop-picker" image-crop-picker
-    "react-native-gesture-handler" react-native-gesture-handler
-    "react-native-safe-area-context" safe-area-context
-    "react-native-config" config
-    "react-native-iphone-x-helper" (clj->js {:getStatusBarHeight (fn [])
-                                             :getBottomSpace (fn [])})
-    "react-native-screens" (clj->js {})
-    "react-native-reanimated" react-native-reanimated
-    "react-native-redash/lib/module/v1" react-native-redash
-    "react-native-fetch-polyfill" fetch
-    "react-native-status-keycard" status-keycard
-    "react-native-keychain" keychain
-    "react-native-touch-id" touchid
-    "@react-native-community/netinfo" net-info
-    "react-native-dialogs" dialogs
-    "react-native" react-native
-    "react-native-fs" fs
-    "react-native-mail" react-native-mail
-    "react-native-image-resizer" image-resizer
-    "react-native-haptic-feedback" react-native-haptic-feedback
-    "react-native-device-info" react-native-device-info
-    "react-native-push-notification" react-native-push-notification
-    "react-native-linear-gradient" react-native-gradien
-    "@react-native-community/masked-view" masked-view
-    "react-native-blob-util" react-native-blob-util
-    "react-native-navigation" react-native-navigation
+    "react-native-languages"                        react-native-languages
+    "react-native-background-timer"                 background-timer
+    "react-native-image-crop-picker"                image-crop-picker
+    "react-native-gesture-handler"                  react-native-gesture-handler
+    "react-native-safe-area-context"                safe-area-context
+    "react-native-config"                           config
+    "react-native-iphone-x-helper"                  (clj->js {:getStatusBarHeight (fn [])
+                                                              :getBottomSpace     (fn [])})
+    "react-native-screens"                          (clj->js {})
+    "react-native-reanimated"                       react-native-reanimated
+    "react-native-redash/lib/module/v1"             react-native-redash
+    "react-native-fetch-polyfill"                   fetch
+    "react-native-status-keycard"                   status-keycard
+    "react-native-keychain"                         keychain
+    "react-native-touch-id"                         touchid
+    "@react-native-community/netinfo"               net-info
+    "react-native-dialogs"                          dialogs
+    "react-native"                                  react-native
+    "react-native-fs"                               fs
+    "react-native-mail"                             react-native-mail
+    "react-native-image-resizer"                    image-resizer
+    "react-native-haptic-feedback"                  react-native-haptic-feedback
+    "react-native-device-info"                      react-native-device-info
+    "react-native-push-notification"                react-native-push-notification
+    "react-native-linear-gradient"                  react-native-gradien
+    "@react-native-community/masked-view"           masked-view
+    "react-native-blob-util"                        react-native-blob-util
+    "react-native-navigation"                       react-native-navigation
     "@react-native-community/push-notification-ios" push-notification-ios
-    "@react-native-community/blur" react-native-blur
-    "@react-native-community/cameraroll" react-native-camera-roll
-    "react-native-camera-kit" react-native-camera-kit
-    "react-native-permissions" react-native-permissions
-    "rn-emoji-keyboard" rn-emoji-keyboard
-    "react-native-hole-view" react-native-hole-view
-    "react-native-draggable-flatlist" react-native-draggable-flatlist
-    "react-native-webview" react-native-webview
-    "@react-native-community/audio-toolkit" react-native-audio-toolkit
-    "react-native-image-viewing" react-native-image-viewing
-    "react-native-share" react-native-share
-    "@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
-    "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))
-    "../translations/de.json" (js/JSON.parse (slurp "./translations/de.json"))
-    "../translations/en.json" (js/JSON.parse (slurp "./translations/en.json"))
-    "../translations/es.json" (js/JSON.parse (slurp "./translations/es.json"))
-    "../translations/es_419.json" (js/JSON.parse (slurp "./translations/es_419.json"))
-    "../translations/fil.json" (js/JSON.parse (slurp "./translations/fil.json"))
-    "../translations/fr.json" (js/JSON.parse (slurp "./translations/fr.json"))
-    "../translations/id.json" (js/JSON.parse (slurp "./translations/id.json"))
-    "../translations/it.json" (js/JSON.parse (slurp "./translations/it.json"))
-    "../translations/ko.json" (js/JSON.parse (slurp "./translations/ko.json"))
-    "../translations/pt_BR.json" (js/JSON.parse (slurp "./translations/pt_BR.json"))
-    "../translations/ru.json" (js/JSON.parse (slurp "./translations/ru.json"))
-    "../translations/tr.json" (js/JSON.parse (slurp "./translations/tr.json"))
-    "../translations/zh.json" (js/JSON.parse (slurp "./translations/zh.json"))
-    "../translations/zh_hant.json" (js/JSON.parse (slurp "./translations/zh_hant.json"))
-    "../translations/zh_TW.json" (js/JSON.parse (slurp "./translations/zh_TW.json"))
+    "@react-native-community/blur"                  react-native-blur
+    "@react-native-community/cameraroll"            react-native-camera-roll
+    "react-native-camera-kit"                       react-native-camera-kit
+    "react-native-permissions"                      react-native-permissions
+    "rn-emoji-keyboard"                             rn-emoji-keyboard
+    "react-native-hole-view"                        react-native-hole-view
+    "react-native-draggable-flatlist"               react-native-draggable-flatlist
+    "react-native-webview"                          react-native-webview
+    "@react-native-community/audio-toolkit"         react-native-audio-toolkit
+    "react-native-image-viewing"                    react-native-image-viewing
+    "react-native-share"                            react-native-share
+    "@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
+    "../src/js/bottom_sheet.js"                     bottom-sheet
+    "../src/js/record_audio_worklets.js"            record-audio-worklets
+    "./fleets.js"                                   default-fleets
+    "@walletconnect/client"                         wallet-connect-client
+    "../translations/ar.json"                       (js/JSON.parse (slurp "./translations/ar.json"))
+    "../translations/de.json"                       (js/JSON.parse (slurp "./translations/de.json"))
+    "../translations/en.json"                       (js/JSON.parse (slurp "./translations/en.json"))
+    "../translations/es.json"                       (js/JSON.parse (slurp "./translations/es.json"))
+    "../translations/es_419.json"                   (js/JSON.parse (slurp "./translations/es_419.json"))
+    "../translations/fil.json"                      (js/JSON.parse (slurp "./translations/fil.json"))
+    "../translations/fr.json"                       (js/JSON.parse (slurp "./translations/fr.json"))
+    "../translations/id.json"                       (js/JSON.parse (slurp "./translations/id.json"))
+    "../translations/it.json"                       (js/JSON.parse (slurp "./translations/it.json"))
+    "../translations/ko.json"                       (js/JSON.parse (slurp "./translations/ko.json"))
+    "../translations/pt_BR.json"                    (js/JSON.parse (slurp "./translations/pt_BR.json"))
+    "../translations/ru.json"                       (js/JSON.parse (slurp "./translations/ru.json"))
+    "../translations/tr.json"                       (js/JSON.parse (slurp "./translations/tr.json"))
+    "../translations/zh.json"                       (js/JSON.parse (slurp "./translations/zh.json"))
+    "../translations/zh_hant.json"                  (js/JSON.parse (slurp "./translations/zh_hant.json"))
+    "../translations/zh_TW.json"                    (js/JSON.parse (slurp "./translations/zh_TW.json"))
     nil))

src/quo/animated.cljs

@@ -1,12 +1,12 @@
 (ns quo.animated
   (:refer-clojure :exclude [abs set delay divide])
-  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
-            [quo.gesture-handler :as gh]
-            [oops.core :refer [oget ocall]]
-            ["react-native-reanimated" :default animated :refer (clockRunning EasingNode)]
+  (:require ["react-native-reanimated" :default animated :refer (clockRunning EasingNode)]
             ["react-native-redash/lib/module/v1" :as redash]
-            quo.react)
+            [oops.core :refer [ocall oget]]
+            [quo.gesture-handler :as gh]
+            quo.react
+            [quo.react-native :as rn]
+            [reagent.core :as reagent])
   (:require-macros [quo.react :refer [maybe-js-deps]]))
 
 (def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent animated)))
@@ -15,9 +15,10 @@
 (def text (reagent/adapt-react-class (.-Text animated)))
 (def scroll-view (reagent/adapt-react-class (.-ScrollView animated)))
 (def code (reagent/adapt-react-class (.-Code animated)))
-(def animated-flat-list  (create-animated-component gh/flat-list-raw))
+(def animated-flat-list (create-animated-component gh/flat-list-raw))
 
-(defn flat-list [props]
+(defn flat-list
+  [props]
   [animated-flat-list (rn/base-list-props props)])
 
 (def useCode (.-useCode animated))
@@ -58,37 +59,42 @@
 (def bezier (.-bezier ^js EasingNode))
 (def linear (.-linear ^js EasingNode))
 
-(def easings {:linear      linear
-              :ease-in     (bezier 0.42 0 1 1)
-              :ease-out    (bezier 0 0 0.58 1)
-              :ease-in-out (bezier 0.42 0 0.58 1)
-              :cubic       (bezier 0.55 0.055 0.675 0.19)
-              :keyboard    (bezier 0.17 0.59 0.4 0.77)})
+(def easings
+  {:linear      linear
+   :ease-in     (bezier 0.42 0 1 1)
+   :ease-out    (bezier 0 0 0.58 1)
+   :ease-in-out (bezier 0.42 0 0.58 1)
+   :cubic       (bezier 0.55 0.055 0.675 0.19)
+   :keyboard    (bezier 0.17 0.59 0.4 0.77)})
 
-(def springs {:lazy {:damping           50
-                     :mass              0.3
-                     :stiffness         120
-                     :overshootClamping true
-                     :bouncyFactor      1}
-              :jump {:damping                   13
-                     :mass                      0.5
-                     :stiffness                 170
-                     :overshootClamping         false
-                     :bouncyFactor              1
-                     :restSpeedThreshold        0.001
-                     :restDisplacementThreshold 0.001}})
+(def springs
+  {:lazy {:damping           50
+          :mass              0.3
+          :stiffness         120
+          :overshootClamping true
+          :bouncyFactor      1}
+   :jump {:damping                   13
+          :mass                      0.5
+          :stiffness                 170
+          :overshootClamping         false
+          :bouncyFactor              1
+          :restSpeedThreshold        0.001
+          :restDisplacementThreshold 0.001}})
 
-(defn set-value [anim val]
+(defn set-value
+  [anim val]
   (ocall anim "setValue" val))
 
 (def Value (oget animated "Value"))
 
-(defn value [x]
+(defn value
+  [x]
   (new Value x))
 
 (def Clock (oget animated "Clock"))
 
-(defn clock []
+(defn clock
+  []
   (new Clock))
 
 (def debug (oget animated "debug"))
@@ -100,8 +106,10 @@
   ([config options]
    (ocall animated "event" (clj->js config) (clj->js options))))
 
-(defn on-change [state node]
-  (ocall animated "onChange"
+(defn on-change
+  [state node]
+  (ocall animated
+         "onChange"
          state
          (if (vector? node)
            (clj->js node)
@@ -124,24 +132,31 @@
             (clj->js else-node)
             else-node))))
 
-(defn block [opts]
+(defn block
+  [opts]
   (.block ^js animated (to-array opts)))
 
-(defn interpolate [anim-value config]
+(defn interpolate
+  [anim-value config]
   (.interpolateNode ^js animated anim-value (clj->js config)))
 
-(defn call* [args callback]
+(defn call*
+  [args callback]
   (.call ^js animated (to-array args) callback))
 
-(defn timing [clock-value opts config]
+(defn timing
+  [clock-value opts config]
   (.timing ^js animated
            clock-value
            (clj->js opts)
            (clj->js config)))
 
-(defn spring [clock-value opts config]
-  (.spring ^js animated clock-value
-           (clj->js opts) (clj->js config)))
+(defn spring
+  [clock-value opts config]
+  (.spring ^js animated
+           clock-value
+           (clj->js opts)
+           (clj->js config)))
 
 (def extrapolate {:clamp (oget animated "Extrapolate" "CLAMP")})
 
@@ -150,37 +165,48 @@
 (def clamp (oget redash "clamp"))
 (def diff-clamp (.-diffClamp ^js redash))
 
-(defn with-spring [config]
+(defn with-spring
+  [config]
   (ocall redash "withSpring" (clj->js config)))
 
-(defn with-decay [config]
+(defn with-decay
+  [config]
   (.withDecay ^js redash (clj->js config)))
 
-(defn with-offset [config]
+(defn with-offset
+  [config]
   (.withOffset ^js redash (clj->js config)))
 
-(defn with-spring-transition [val config]
+(defn with-spring-transition
+  [val config]
   (.withSpringTransition ^js redash val (clj->js config)))
 
-(defn with-timing-transition [val config]
+(defn with-timing-transition
+  [val config]
   (.withTimingTransition ^js redash val (clj->js config)))
 
-(defn use-spring-transition [val config]
+(defn use-spring-transition
+  [val config]
   (.useSpringTransition ^js redash val (clj->js config)))
 
-(defn use-timing-transition [val config]
+(defn use-timing-transition
+  [val config]
   (.useTimingTransition ^js redash val (clj->js config)))
 
-(defn re-timing [config]
+(defn re-timing
+  [config]
   (.timing ^js redash (clj->js config)))
 
-(defn re-spring [config]
+(defn re-spring
+  [config]
   (.spring ^js redash (clj->js config)))
 
-(defn on-scroll [opts]
+(defn on-scroll
+  [opts]
   (ocall redash "onScrollEvent" (clj->js opts)))
 
-(defn on-gesture [opts]
+(defn on-gesture
+  [opts]
   (let [gesture-event (event #js [#js {:nativeEvent (clj->js opts)}])]
     {:onHandlerStateChange gesture-event
      :onGestureEvent       gesture-event}))
@@ -191,19 +217,22 @@
 
 (def delay (.-delay ^js redash))
 
-(defn loop* [opts]
+(defn loop*
+  [opts]
   (ocall redash "loop" (clj->js opts)))
 
 (def use-value (.-useValue ^js redash))
 
 (def use-clock (.-useClock ^js redash))
 
-(defn use-gesture [opts]
+(defn use-gesture
+  [opts]
   (let [gesture (.useGestureHandler ^js redash (clj->js opts))]
     {:onHandlerStateChange (.-onHandlerStateChange ^js gesture)
      :onGestureEvent       (.-onGestureEvent ^js gesture)}))
 
-(defn snap-point [value velocity snap-points]
+(defn snap-point
+  [value velocity snap-points]
   (.snapPoint ^js redash value velocity (to-array snap-points)))
 
 (defn cancelable-loop
@@ -256,12 +285,13 @@
               (set position (add offset val))])
       (cond* (and* (eq state (:end gh/states))
                    (not* animation-over))
-             [(set position (re-timing
-                             {:clock    c
-                              :easing   easing
-                              :duration duration
-                              :from     position
-                              :to       to}))
+             [(set position
+                   (re-timing
+                    {:clock    c
+                     :easing   easing
+                     :duration duration
+                     :from     position
+                     :to       to}))
               (cond* (not* (clock-running c))
                      finish-animation)])
       position])))

src/quo/components/animated/pressable.cljs

@@ -1,9 +1,9 @@
 (ns quo.components.animated.pressable
-  (:require [quo.animated :as animated]
+  (:require [cljs-bean.core :as bean]
+            [quo.animated :as animated]
+            [quo.gesture-handler :as gesture-handler]
             [quo.react :as react]
-            [reagent.core :as reagent]
-            [cljs-bean.core :as bean]
-            [quo.gesture-handler :as gesture-handler]))
+            [reagent.core :as reagent]))
 
 (def long-press-duration 500)
 (def scale-down-small 0.95)
@@ -54,7 +54,8 @@
    :right    0
    :position :absolute})
 
-(defn pressable-hooks [props]
+(defn pressable-hooks
+  [props]
   (let [{background-color    :bgColor
          border-radius       :borderRadius
          border-color        :borderColor
@@ -69,23 +70,24 @@
          :or                 {border-radius 0
                               type          "primary"}}
         (bean/bean props)
-        long-press-ref       (react/create-ref)
-        state                (animated/use-value (:undetermined gesture-handler/states))
-        active               (animated/eq state (:began gesture-handler/states))
-        gesture-handler      (animated/use-gesture {:state state})
-        animation            (react/use-memo
-                              (fn []
-                                (animated/with-timing-transition active
-                                  {:duration (animated/cond* active time-in time-out)
-                                   :easing   (:ease-in animated/easings)}))
-                              [])
+        long-press-ref (react/create-ref)
+        state (animated/use-value (:undetermined gesture-handler/states))
+        active (animated/eq state (:began gesture-handler/states))
+        gesture-handler (animated/use-gesture {:state state})
+        animation (react/use-memo
+                   (fn []
+                     (animated/with-timing-transition active
+                                                      {:duration (animated/cond* active time-in time-out)
+                                                       :easing   (:ease-in animated/easings)}))
+                   [])
         {:keys [background
-                foreground]} (react/use-memo
-                              (fn []
-                                (type->animation {:type      (keyword type)
-                                                  :animation animation}))
-                              [type])
-        handle-press         (fn [] (when on-press (on-press)))
+                foreground]}
+        (react/use-memo
+         (fn []
+           (type->animation {:type      (keyword type)
+                             :animation animation}))
+         [type])
+        handle-press (fn [] (when on-press (on-press)))
         long-gesture-handler (react/callback
                               (fn [^js evt]
                                 (let [gesture-state (-> evt .-nativeEvent .-state)]
@@ -111,8 +113,9 @@
        :min-duration-ms         long-press-duration
        :max-dist                22
        :ref                     long-press-ref}
-      [animated/view {:accessible          true
-                      :accessibility-label accessibility-label}
+      [animated/view
+       {:accessible          true
+        :accessibility-label accessibility-label}
        [gesture-handler/tap-gesture-handler
         (merge gesture-handler
                {:shouldCancelWhenOutside true
@@ -120,12 +123,13 @@
                 :enabled                 (boolean (and (or on-press on-long-press on-press-start)
                                                        (not disabled)))})
         [animated/view
-         [animated/view {:style (merge absolute-fill
-                                       background
-                                       {:background-color background-color
-                                        :border-radius    border-radius
-                                        :border-color     border-color
-                                        :border-width     border-width})}]
+         [animated/view
+          {:style (merge absolute-fill
+                         background
+                         {:background-color background-color
+                          :border-radius    border-radius
+                          :border-color     border-color
+                          :border-width     border-width})}]
          (into [animated/view {:style foreground}]
                (react/get-children children))]]]])))
 

src/quo/components/animated_header.cljs

@@ -7,7 +7,8 @@
             [quo.platform :as platform]
             [reagent.core :as reagent]))
 
-(defn header-wrapper-style [{:keys [value offset]}]
+(defn header-wrapper-style
+  [{:keys [value offset]}]
   (merge
    {:background-color (:ui-background @colors/theme)}
    (when (and offset platform/android?)
@@ -27,66 +28,78 @@
       :shadow-color   (:shadow-01 @colors/theme)
       :shadow-offset  {:width 0 :height 4}})))
 
-(defn title-style [layout]
-  {:flex          1
+(defn title-style
+  [layout]
+  {:flex            1
    :justify-content :center
-   :padding-right (get-in layout [:right :width])})
+   :padding-right   (get-in layout [:right :width])})
 
-(defn header-container []
+(defn header-container
+  []
   (let [y               (animated/value 0)
         animation-value (animated/value 0)
         animation       (animated/with-timing-transition
-                          animation-value
-                          {:duration 250
-                           :easing   (:ease-in animated/easings)})
+                         animation-value
+                         {:duration 250
+                          :easing   (:ease-in animated/easings)})
         on-scroll       (animated/on-scroll {:y y})
         layout          (reagent/atom {})
         offset          (reagent/atom 0)
         on-layout       (fn [evt]
                           (reset! offset (oget evt "nativeEvent" "layout" "height")))]
     (fn [{:keys [extended-header refresh-control refreshing-sub refreshing-counter] :as props} children]
-      [animated/view {:flex           1
-                      :pointer-events :box-none}
-       [animated/code {:key  (str @offset)
-                       :exec (animated/cond*
-                              (animated/and* (animated/greater-or-eq y @offset)
-                                             (animated/greater-or-eq y 1))
-                              (animated/set animation-value 1)
-                              (animated/set animation-value 0))}]
-       [animated/view {:pointer-events :box-none
-                       :style          (header-wrapper-style {:value  y
-                                                              :offset @offset})}
-        [header/header (merge
-                        {:get-layout      (fn [el l] (swap! layout assoc el l))
-                         :border-bottom   false
-                         :title-component [animated/view {:style (title-style @layout)}
-                                           [extended-header {:value     y
-                                                             :animation animation
-                                                             :minimized true
-                                                             :offset    @offset}]]
-                         :title-align     :left}
-                        (dissoc props :extended-header))]]
-       (into [animated/scroll-view {:on-scroll           on-scroll
-                                    :refreshControl      (when refresh-control
-                                                           (refresh-control
-                                                            (and @refreshing-sub
-                                                                 @refreshing-counter)))
-                                    :style               {:z-index 1}
-                                    :scrollEventThrottle 16}
+      [animated/view
+       {:flex           1
+        :pointer-events :box-none}
+       [animated/code
+        {:key  (str @offset)
+         :exec (animated/cond*
+                (animated/and* (animated/greater-or-eq y @offset)
+                               (animated/greater-or-eq y 1))
+                (animated/set animation-value 1)
+                (animated/set animation-value 0))}]
+       [animated/view
+        {:pointer-events :box-none
+         :style          (header-wrapper-style {:value  y
+                                                :offset @offset})}
+        [header/header
+         (merge
+          {:get-layout      (fn [el l] (swap! layout assoc el l))
+           :border-bottom   false
+           :title-component [animated/view {:style (title-style @layout)}
+                             [extended-header
+                              {:value     y
+                               :animation animation
+                               :minimized true
+                               :offset    @offset}]]
+           :title-align     :left}
+          (dissoc props :extended-header))]]
+       (into [animated/scroll-view
+              {:on-scroll           on-scroll
+               :refreshControl      (when refresh-control
+                                      (refresh-control
+                                       (and @refreshing-sub
+                                            @refreshing-counter)))
+               :style               {:z-index 1}
+               :scrollEventThrottle 16}
               [animated/view {:pointer-events :box-none}
-               [animated/view {:pointer-events :box-none
-                               :on-layout      on-layout}
-                [extended-header {:value     y
-                                  :animation animation
-                                  :offset    @offset}]]]]
+               [animated/view
+                {:pointer-events :box-none
+                 :on-layout      on-layout}
+                [extended-header
+                 {:value     y
+                  :animation animation
+                  :offset    @offset}]]]]
              children)])))
 
-(defn header [{:keys [use-insets] :as props} & children]
+(defn header
+  [{:keys [use-insets] :as props} & children]
   (if use-insets
     [safe-area/consumer
      (fn [insets]
-       [header-container (-> props
-                             (dissoc :use-insets)
-                             (assoc :insets insets))
+       [header-container
+        (-> props
+            (dissoc :use-insets)
+            (assoc :insets insets))
         children])]
     [header-container props children]))

src/quo/components/bottom_sheet/style.cljs

@@ -15,13 +15,14 @@
    :flex            1
    :justify-content :flex-end})
 
-(defn backdrop []
-  {:flex             1
-   :position         :absolute
-   :left             0
-   :top              0
-   :right            0
-   :bottom           0})
+(defn backdrop
+  []
+  {:flex     1
+   :position :absolute
+   :left     0
+   :top      0
+   :right    0
+   :bottom   0})
 
 (defn content-container
   [window-height]

src/quo/components/bottom_sheet/view.cljs

@@ -1,25 +1,27 @@
 (ns quo.components.bottom-sheet.view
-  (:require [reagent.core :as reagent]
+  (:require [cljs-bean.core :as bean]
             [quo.animated :as animated]
-            [quo.react-native :as rn]
-            [quo.react :as react]
-            [quo.platform :as platform]
-            [cljs-bean.core :as bean]
-            [quo.components.safe-area :as safe-area]
             [quo.components.bottom-sheet.style :as styles]
+            [quo.components.safe-area :as safe-area]
+            [quo.design-system.colors :as colors]
             [quo.gesture-handler :as gesture-handler]
-            [quo.design-system.colors :as colors]))
+            [quo.platform :as platform]
+            [quo.react :as react]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
 (def opacity-coeff 0.8)
 (def close-duration 150)
-(def spring-config {:damping                   15
-                    :mass                      0.7
-                    :stiffness                 150
-                    :overshootClamping         false
-                    :restSpeedThreshold        0.1
-                    :restDisplacementThreshold 0.1})
+(def spring-config
+  {:damping                   15
+   :mass                      0.7
+   :stiffness                 150
+   :overshootClamping         false
+   :restSpeedThreshold        0.1
+   :restDisplacementThreshold 0.1})
 
-(defn bottom-sheet-hooks [props]
+(defn bottom-sheet-hooks
+  [props]
   (let [{on-cancel          :onCancel
          disable-drag?      :disableDrag?
          show-handle?       :showHandle?
@@ -31,77 +33,83 @@
                              backdrop-dismiss?  true
                              back-button-cancel true}}
         (bean/bean props)
-        body-ref   (react/create-ref)
+        body-ref (react/create-ref)
         master-ref (react/create-ref)
 
-        height                    (react/state 0)
-        {window-height :height}   (rn/use-window-dimensions)
+        height (react/state 0)
+        {window-height :height} (rn/use-window-dimensions)
         {:keys [keyboard-shown
-                keyboard-height]} (rn/use-keyboard)
-        keyboard-height-android-delta (if (and platform/android? keyboard-shown) (+ keyboard-height 20) 0)
-        safe-area                 (safe-area/use-safe-area)
-        window-height             (- window-height (if platform/android?
-                                                     (+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when react-native-navigation v8 will be implemented https://github.com/wix/react-native-navigation/issues/7225
-                                                     0))
-        min-height                (+ (* styles/vertical-padding 2) (:bottom safe-area))
-        max-height                (- window-height (:top safe-area))
-        visible                   (react/state false)
+                keyboard-height]}
+        (rn/use-keyboard)
+        keyboard-height-android-delta
+        (if (and platform/android? keyboard-shown) (+ keyboard-height 20) 0)
+        safe-area (safe-area/use-safe-area)
+        window-height (- window-height
+                         (if platform/android?
+                           (+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when
+                                                                ;; react-native-navigation v8 will be
+                                                                ;; implemented
+                                                                ;; https://github.com/wix/react-native-navigation/issues/7225
+                           0))
+        min-height (+ (* styles/vertical-padding 2) (:bottom safe-area))
+        max-height (- window-height (:top safe-area))
+        visible (react/state false)
 
         master-translation-y (animated/use-value 0)
-        master-velocity-y    (animated/use-value (:undetermined gesture-handler/states))
-        master-state         (animated/use-value (:undetermined gesture-handler/states))
-        tap-state            (animated/use-value 0)
-        manual-open          (animated/use-value 0)
-        manual-close         (animated/use-value 0)
-        offset               (animated/use-value 0)
-        drag-over            (animated/use-value 1)
-        clock                (animated/use-clock)
-        tap-gesture-handler  (animated/use-gesture {:state tap-state})
-        on-master-event      (animated/use-gesture
-                              {:translationY master-translation-y
-                               :state        master-state
-                               :velocityY    master-velocity-y})
-        on-body-event        on-master-event
-        sheet-height         (min max-height
-                                  (+ styles/border-radius @height))
+        master-velocity-y (animated/use-value (:undetermined gesture-handler/states))
+        master-state (animated/use-value (:undetermined gesture-handler/states))
+        tap-state (animated/use-value 0)
+        manual-open (animated/use-value 0)
+        manual-close (animated/use-value 0)
+        offset (animated/use-value 0)
+        drag-over (animated/use-value 1)
+        clock (animated/use-clock)
+        tap-gesture-handler (animated/use-gesture {:state tap-state})
+        on-master-event (animated/use-gesture
+                         {:translationY master-translation-y
+                          :state        master-state
+                          :velocityY    master-velocity-y})
+        on-body-event on-master-event
+        sheet-height (min max-height
+                          (+ styles/border-radius @height))
 
-        open-snap-point  (animated/use-value 0)
+        open-snap-point (animated/use-value 0)
         close-snap-point 0
-        on-close         (fn []
-                           (when @visible
-                             (reset! visible false)
-                             (reset! height 0)
-                             (when on-cancel
-                               (on-cancel))))
-        close-sheet      (fn []
-                           (animated/set-value manual-close 1))
-        on-snap          (fn [pos]
-                           (when (= close-snap-point (aget pos 0))
-                             (on-close)))
-        interrupted      (animated/and* (animated/eq master-state (:began gesture-handler/states))
-                                        (animated/clock-running clock))
-        translate-y      (react/use-memo
-                          (fn []
-                            (animated/with-easing
-                              {:value          (animated/cond* (animated/less-or-eq master-translation-y 0)
-                                                               (animated/divide master-translation-y 2)
-                                                               master-translation-y)
-                               :velocity       master-velocity-y
-                               :offset         offset
-                               :state          master-state
-                               :animation-over drag-over
-                               :snap-points    [open-snap-point close-snap-point]}))
-                          [])
-        opacity          (react/use-memo
-                          (fn []
-                            (animated/cond*
-                             open-snap-point
-                             (animated/interpolate
-                              translate-y
-                              {:inputRange  [(animated/multiply open-snap-point opacity-coeff) 0]
-                               :outputRange [1 0]
-                               :extrapolate (:clamp animated/extrapolate)})))
-                          [])]
+        on-close (fn []
+                   (when @visible
+                     (reset! visible false)
+                     (reset! height 0)
+                     (when on-cancel
+                       (on-cancel))))
+        close-sheet (fn []
+                      (animated/set-value manual-close 1))
+        on-snap (fn [pos]
+                  (when (= close-snap-point (aget pos 0))
+                    (on-close)))
+        interrupted (animated/and* (animated/eq master-state (:began gesture-handler/states))
+                                   (animated/clock-running clock))
+        translate-y (react/use-memo
+                     (fn []
+                       (animated/with-easing
+                        {:value          (animated/cond* (animated/less-or-eq master-translation-y 0)
+                                                         (animated/divide master-translation-y 2)
+                                                         master-translation-y)
+                         :velocity       master-velocity-y
+                         :offset         offset
+                         :state          master-state
+                         :animation-over drag-over
+                         :snap-points    [open-snap-point close-snap-point]}))
+                     [])
+        opacity (react/use-memo
+                 (fn []
+                   (animated/cond*
+                    open-snap-point
+                    (animated/interpolate
+                     translate-y
+                     {:inputRange  [(animated/multiply open-snap-point opacity-coeff) 0]
+                      :outputRange [1 0]
+                      :extrapolate (:clamp animated/extrapolate)})))
+                 [])]
     (animated/code!
      (fn []
        (animated/cond* (animated/and* (animated/eq master-state (:end gesture-handler/states))
@@ -177,39 +185,48 @@
          (close-sheet)))
      [visible?])
     (reagent/as-element
-     [rn/view {:style          styles/container
-               :pointer-events :box-none}
-      [gesture-handler/tap-gesture-handler (merge {:enabled backdrop-dismiss?}
-                                                  tap-gesture-handler)
-       [animated/view {:style (merge (styles/backdrop)
-                                     (when platform/ios?
-                                       {:opacity          opacity
-                                        :background-color (:backdrop @colors/theme)}))}]]
-      [animated/view {:style (merge (styles/content-container window-height)
-                                    {:transform [{:translateY (if (= sheet-height max-height)
-                                                                (animated/add translate-y keyboard-height-android-delta)
-                                                                translate-y)}
-                                                 {:translateY (* window-height 2)}]})}
-       [gesture-handler/pan-gesture-handler (merge on-master-event
-                                                   {:ref      master-ref
-                                                    :wait-for body-ref
-                                                    :enabled  (not disable-drag?)})
-        [animated/view  {:style styles/content-header}
+     [rn/view
+      {:style          styles/container
+       :pointer-events :box-none}
+      [gesture-handler/tap-gesture-handler
+       (merge {:enabled backdrop-dismiss?}
+              tap-gesture-handler)
+       [animated/view
+        {:style (merge (styles/backdrop)
+                       (when platform/ios?
+                         {:opacity          opacity
+                          :background-color (:backdrop @colors/theme)}))}]]
+      [animated/view
+       {:style (merge (styles/content-container window-height)
+                      {:transform [{:translateY (if (= sheet-height max-height)
+                                                  (animated/add translate-y
+                                                                keyboard-height-android-delta)
+                                                  translate-y)}
+                                   {:translateY (* window-height 2)}]})}
+       [gesture-handler/pan-gesture-handler
+        (merge on-master-event
+               {:ref      master-ref
+                :wait-for body-ref
+                :enabled  (not disable-drag?)})
+        [animated/view {:style styles/content-header}
          (when show-handle?
            [rn/view {:style styles/handle}])]]
-       [gesture-handler/pan-gesture-handler (merge on-body-event
-                                                   {:ref      body-ref
-                                                    :wait-for master-ref
-                                                    :enabled  (and (not disable-drag?)
-                                                                   (not= sheet-height max-height))})
-        [animated/view {:height sheet-height
-                        :flex           1}
-         [animated/view {:style     {:padding-top    styles/vertical-padding
-                                     :padding-bottom (+ styles/vertical-padding
-                                                        (if (and platform/ios? keyboard-shown)
-                                                          keyboard-height
-                                                          (:bottom safe-area)))}
-                         :on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
+       [gesture-handler/pan-gesture-handler
+        (merge on-body-event
+               {:ref      body-ref
+                :wait-for master-ref
+                :enabled  (and (not disable-drag?)
+                               (not= sheet-height max-height))})
+        [animated/view
+         {:height sheet-height
+          :flex   1}
+         [animated/view
+          {:style     {:padding-top    styles/vertical-padding
+                       :padding-bottom (+ styles/vertical-padding
+                                          (if (and platform/ios? keyboard-shown)
+                                            keyboard-height
+                                            (:bottom safe-area)))}
+           :on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
           (into [:<>]
                 (react/get-children children))]]]]])))
 

src/quo/components/button/view.cljs

@@ -1,14 +1,14 @@
 (ns quo.components.button.view
   (:require [quo.components.animated.pressable :as animation]
-            [quo.react-native :as rn]
-            [quo.haptic :as haptic]
+            [quo.components.text :as text] ;; FIXME:
             [quo.design-system.colors :as colors]
             [quo.design-system.spacing :as spacing]
-            [quo.components.text :as text]
-            ;; FIXME:
+            [quo.haptic :as haptic]
+            [quo.react-native :as rn]
             [status-im.ui.components.icons.icons :as icons]))
 
-(defn style-container [type]
+(defn style-container
+  [type]
   (merge {:height          44
           :align-items     :center
           :justify-content :center
@@ -19,14 +19,16 @@
            :icon      {}
            nil)))
 
-(defn content-style [type]
+(defn content-style
+  [type]
   (case type
     :primary   (:base spacing/padding-horizontal)
     :secondary (:x-tiny spacing/padding-horizontal)
     :icon      (:tiny spacing/padding-horizontal)
     nil))
 
-(defn themes [theme]
+(defn themes
+  [theme]
   (case theme
     :main         {:icon-color       (:icon-04 @colors/theme)
                    :background-color (:interactive-02 @colors/theme)
@@ -54,44 +56,46 @@
                    :text-color       (:text-01 @colors/theme)
                    :border-color     (:ui-01 @colors/theme)}))
 
-(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 test-ID]
-               :or   {theme           :main
-                      type            :primary
-                      haptic-feedback true
-                      border-radius   8
-                      haptic-type     :selection}}
-              children]
-  (let [theme' (cond
-                 disabled :disabled
-                 :else    theme)
+(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 test-ID]
+    :or   {theme           :main
+           type            :primary
+           haptic-feedback true
+           border-radius   8
+           haptic-type     :selection}}
+   children]
+  (let [theme'                                                        (cond
+                                                                        disabled :disabled
+                                                                        :else    theme)
         {:keys [icon-color background-color text-color border-color]}
         (themes theme')
 
-        optional-haptic (fn []
-                          (when haptic-feedback
-                            (haptic/trigger haptic-type)))]
-    [animation/pressable (merge {:bg-color            background-color
-                                 :border-radius       border-radius
-                                 :type                type
-                                 :disabled            disabled
-                                 :accessibility-label accessibility-label}
-                                (when border-color
-                                  {:border-color border-color
-                                   :border-width 1})
-                                (when on-press
-                                  {:on-press (fn []
-                                               (optional-haptic)
-                                               (on-press))})
-                                (when on-long-press
-                                  {:on-long-press (fn []
-                                                    (optional-haptic)
-                                                    (on-long-press))})
-                                (when on-press-start
-                                  {:on-press-start (fn []
-                                                     (optional-haptic)
-                                                     (on-press-start))}))
+        optional-haptic                                               (fn []
+                                                                        (when haptic-feedback
+                                                                          (haptic/trigger haptic-type)))]
+    [animation/pressable
+     (merge {:bg-color            background-color
+             :border-radius       border-radius
+             :type                type
+             :disabled            disabled
+             :accessibility-label accessibility-label}
+            (when border-color
+              {:border-color border-color
+               :border-width 1})
+            (when on-press
+              {:on-press (fn []
+                           (optional-haptic)
+                           (on-press))})
+            (when on-long-press
+              {:on-long-press (fn []
+                                (optional-haptic)
+                                (on-long-press))})
+            (when on-press-start
+              {:on-press-start (fn []
+                                 (optional-haptic)
+                                 (on-press-start))}))
      [rn/view {:test-ID test-ID :style (merge (style-container type) style)}
       (when before
         [rn/view
@@ -99,17 +103,19 @@
       (when loading
         [rn/view {:style {:position :absolute}}
          [rn/activity-indicator]])
-      [rn/view {:style (merge (content-style type)
-                              (when loading
-                                {:opacity 0}))}
+      [rn/view
+       {:style (merge (content-style type)
+                      (when loading
+                        {:opacity 0}))}
        (cond
          (= type :icon)
          [icons/icon children {:color icon-color}]
 
          (string? children)
-         [text/text {:weight          :medium
-                     :number-of-lines 1
-                     :style           {:color text-color}}
+         [text/text
+          {:weight          :medium
+           :number-of-lines 1
+           :style           {:color text-color}}
           children]
 
          (vector? children)

src/quo/components/controls/styles.cljs

@@ -2,7 +2,8 @@
   (:require [quo.animated :as animated]
             [quo.design-system.colors :as colors]))
 
-(defn switch-style [state disabled]
+(defn switch-style
+  [state disabled]
   {:width            52
    :height           28
    :border-radius    14
@@ -13,7 +14,8 @@
                                            (:interactive-04 @colors/theme)
                                            (:interactive-01 @colors/theme)))})
 
-(defn switch-bullet-style [state hold]
+(defn switch-bullet-style
+  [state hold]
   {:width            20
    :height           20
    :border-radius    10
@@ -26,7 +28,8 @@
    :shadow-color     (:shadow-01 @colors/theme)
    :shadow-offset    {:width 0 :height 4}})
 
-(defn radio-style [state disabled]
+(defn radio-style
+  [state disabled]
   {:width            20
    :height           20
    :border-radius    10
@@ -37,7 +40,8 @@
                                            (:interactive-04 @colors/theme)
                                            (:interactive-01 @colors/theme)))})
 
-(defn radio-bullet-style [state hold]
+(defn radio-bullet-style
+  [state hold]
   {:width            12
    :height           12
    :border-radius    6
@@ -50,7 +54,8 @@
    :shadow-color     (:shadow-01 @colors/theme)
    :shadow-offset    {:width 0 :height 4}})
 
-(defn animated-checkbox-style [state disabled]
+(defn animated-checkbox-style
+  [state disabled]
   {:width            18
    :height           18
    :border-radius    4
@@ -62,7 +67,8 @@
                                            (:interactive-04 @colors/theme)
                                            (:interactive-01 @colors/theme)))})
 
-(defn checkbox-style [value disabled]
+(defn checkbox-style
+  [value disabled]
   {:width            18
    :height           18
    :border-radius    4
@@ -74,9 +80,11 @@
                          (:interactive-01 @colors/theme))
                        (:ui-01 @colors/theme))})
 
-(defn animated-check-icon-style [state hold]
-  {:opacity       (animated/mix hold 1 0.6)
-   :transform     [{:scale (animated/mix state 0.0001 1)}]})
+(defn animated-check-icon-style
+  [state hold]
+  {:opacity   (animated/mix hold 1 0.6)
+   :transform [{:scale (animated/mix state 0.0001 1)}]})
 
-(defn check-icon-style [value]
+(defn check-icon-style
+  [value]
   {:opacity (if value 1 0)})

src/quo/components/controls/view.cljs

@@ -1,34 +1,37 @@
 (ns quo.components.controls.view
-  (:require [reagent.core :as reagent]
-            [cljs-bean.core :as bean]
+  (:require [cljs-bean.core :as bean]
+            [quo.animated :as animated]
+            [quo.components.controls.styles :as styles]
+            [quo.design-system.colors :as colors]
+            [quo.gesture-handler :as gh]
             [quo.react :as react]
             [quo.react-native :as rn]
-            [quo.animated :as animated]
-            [quo.gesture-handler :as gh]
-            [quo.design-system.colors :as colors]
-            [quo.components.controls.styles :as styles]
+            [reagent.core :as reagent]
             [status-im.ui.components.icons.icons :as icons]))
 
-(defn control-builder [component]
+(defn control-builder
+  [component]
   (fn [props]
     (let [{:keys [value onChange disabled]}
           (bean/bean props)
-          state       (animated/use-value 0)
-          tap-state   (animated/use-value (:undetermined gh/states))
-          tap-handler (animated/on-gesture {:state tap-state})
-          hold        (react/use-memo
-                       (fn []
-                         (animated/with-timing-transition
-                           (animated/eq tap-state (:began gh/states))
-                           {}))
-                       [])
-          transition  (react/use-memo
-                       (fn []
-                         (animated/with-spring-transition state (:lazy animated/springs)))
-                       [])
-          press-end   (fn []
-                        (when (and (not disabled) onChange)
-                          (onChange (not value))))]
+          state                             (animated/use-value 0)
+          tap-state                         (animated/use-value (:undetermined gh/states))
+          tap-handler                       (animated/on-gesture {:state tap-state})
+          hold                              (react/use-memo
+                                             (fn []
+                                               (animated/with-timing-transition
+                                                (animated/eq tap-state (:began gh/states))
+                                                {}))
+                                             [])
+          transition                        (react/use-memo
+                                             (fn []
+                                               (animated/with-spring-transition state
+                                                                                (:lazy
+                                                                                 animated/springs)))
+                                             [])
+          press-end                         (fn []
+                                              (when (and (not disabled) onChange)
+                                                (onChange (not value))))]
       (animated/code!
        (fn []
          (animated/cond* (animated/eq tap-state (:end gh/states))
@@ -41,38 +44,47 @@
          (animated/set state (if (true? value) 1 0)))
        [value])
       (reagent/as-element
-       [gh/tap-gesture-handler (merge tap-handler
-                                      {:shouldCancelWhenOutside true
-                                       :enabled                 (boolean (and onChange (not disabled)))})
+       [gh/tap-gesture-handler
+        (merge tap-handler
+               {:shouldCancelWhenOutside true
+                :enabled                 (boolean (and onChange (not disabled)))})
         [animated/view
-         [component {:transition transition
-                     :hold       hold
-                     :disabled   disabled}]]]))))
+         [component
+          {:transition transition
+           :hold       hold
+           :disabled   disabled}]]]))))
 
-(defn switch-view [{:keys [transition hold disabled value]}]
-  [animated/view {:style               (styles/switch-style transition disabled)
-                  :accessibility-label (str "switch-" (if value "on" "off"))
-                  :accessibility-role  :switch}
+(defn switch-view
+  [{:keys [transition hold disabled value]}]
+  [animated/view
+   {:style               (styles/switch-style transition disabled)
+    :accessibility-label (str "switch-" (if value "on" "off"))
+    :accessibility-role  :switch}
    [animated/view {:style (styles/switch-bullet-style transition hold)}]])
 
-(defn radio-view [{:keys [transition hold disabled value]}]
-  [animated/view {:style (styles/radio-style transition disabled)
-                  :accessibility-label (str "radio-" (if value "on" "off"))
-                  :accessibility-role  :radio}
+(defn radio-view
+  [{:keys [transition hold disabled value]}]
+  [animated/view
+   {:style               (styles/radio-style transition disabled)
+    :accessibility-label (str "radio-" (if value "on" "off"))
+    :accessibility-role  :radio}
    [animated/view {:style (styles/radio-bullet-style transition hold)}]])
 
-(defn checkbox-view [props]
+(defn checkbox-view
+  [props]
   (let [{:keys [value onChange disabled]} (bean/bean props)]
     (reagent/as-element
      [rn/touchable-without-feedback
       {:on-press (when (and onChange (not disabled)) onChange)}
-      [rn/view {:style               (styles/checkbox-style value disabled)
-                :accessibility-label (str "checkbox-" (if value "on" "off"))
-                :accessibility-role  :checkbox}
+      [rn/view
+       {:style               (styles/checkbox-style value disabled)
+        :accessibility-label (str "checkbox-" (if value "on" "off"))
+        :accessibility-role  :checkbox}
        [rn/view {:style (styles/check-icon-style value)}
         [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]])))
 
-(defn animated-checkbox-view [{:keys [transition hold disabled value]}]
+(defn animated-checkbox-view
+  [{:keys [transition hold disabled value]}]
   [animated/view
    {:style               (styles/animated-checkbox-style transition disabled)
     :accessibility-label (str "checkbox-" (if value "on" "off"))

src/quo/components/header.cljs

@@ -10,7 +10,8 @@
 
 (def header-height 56)
 
-(defn header-wrapper-style [{:keys [height border-bottom background]}]
+(defn header-wrapper-style
+  [{:keys [height border-bottom background]}]
   (merge
    (:x-tiny spacing/padding-horizontal)
    {:background-color (:ui-background @colors/theme)
@@ -21,32 +22,37 @@
      {:border-bottom-width 1
       :border-bottom-color (:ui-01 @colors/theme)})))
 
-(def absolute-fill {:position :absolute
-                    :top      0
-                    :bottom   0
-                    :left     0
-                    :right    0})
+(def absolute-fill
+  {:position :absolute
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})
 
-(def content  {:flex            1
-               :flex-direction  :row
-               :align-items     :center
-               :justify-content :center})
+(def content
+  {:flex            1
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :center})
 
-(def left {:position        :absolute
-           :left            0
-           :top             0
-           :bottom          0
-           :justify-content :center
-           :align-items     :flex-start})
+(def left
+  {:position        :absolute
+   :left            0
+   :top             0
+   :bottom          0
+   :justify-content :center
+   :align-items     :flex-start})
 
-(def right {:position        :absolute
-            :right           0
-            :top             0
-            :bottom          0
-            :justify-content :center
-            :align-items     :flex-end})
+(def right
+  {:position        :absolute
+   :right           0
+   :top             0
+   :bottom          0
+   :justify-content :center
+   :align-items     :flex-end})
 
-(defn title-style [{:keys [left right]} title-align]
+(defn title-style
+  [{:keys [left right]} title-align]
   (merge
    absolute-fill
    (case title-align
@@ -59,66 +65,75 @@
 
 (def header-actions-style
   (merge
-   {:flex               1
-    :flex-direction     :row
-    :align-items        :center
-    :justify-content    :center}
+   {:flex            1
+    :flex-direction  :row
+    :align-items     :center
+    :justify-content :center}
    (:x-tiny spacing/padding-horizontal)))
 
 (def header-action-placeholder
   {:width (:base spacing/spacing)})
 
-(def element {:align-items        :center
-              :justify-content    :center
-              :flex               1})
+(def element
+  {:align-items     :center
+   :justify-content :center
+   :flex            1})
 
-(defn header-action [{:keys [icon label on-press disabled accessibility-label]}]
-  [button/button (merge {:on-press on-press
-                         :disabled disabled}
-                        (cond
-                          icon  {:type  :icon
-                                 :theme :icon}
-                          label {:type :secondary})
-                        (when accessibility-label
-                          {:accessibility-label accessibility-label}))
+(defn header-action
+  [{:keys [icon label on-press disabled accessibility-label]}]
+  [button/button
+   (merge {:on-press on-press
+           :disabled disabled}
+          (cond
+            icon  {:type  :icon
+                   :theme :icon}
+            label {:type :secondary})
+          (when accessibility-label
+            {:accessibility-label accessibility-label}))
    (cond
      icon  icon
      label label)])
 
-(defn header-actions [{:keys [accessories component]}]
+(defn header-actions
+  [{:keys [accessories component]}]
   [rn/view {:style element}
    (cond
      (seq accessories)
      (into [rn/view {:style header-actions-style}]
            (map header-action accessories))
 
-     component component
+     component         component
 
      :else
      [rn/view {:style header-action-placeholder}])])
 
-(defn header-title [{:keys [title subtitle component title-align]}]
+(defn header-title
+  [{:keys [title subtitle component title-align]}]
   [:<>
    (cond
-     component component
+     component            component
 
      (and title subtitle)
      [:<>
-      [text/text {:weight          :medium
-                  :number-of-lines 1}
+      [text/text
+       {:weight          :medium
+        :number-of-lines 1}
        title]
-      [text/text {:weight          :regular
-                  :color           :secondary
-                  :number-of-lines 1}
+      [text/text
+       {:weight          :regular
+        :color           :secondary
+        :number-of-lines 1}
        subtitle]]
 
-     title [text/text {:weight          :bold
-                       :number-of-lines 0
-                       :align           title-align
-                       :size            :large}
-            title])])
+     title                [text/text
+                           {:weight          :bold
+                            :number-of-lines 0
+                            :align           title-align
+                            :size            :large}
+                           title])])
 
-(defn header [{:keys [left-width right-width]}]
+(defn header
+  [{:keys [left-width right-width]}]
   (let [layout        (reagent/atom {:left  {:width  (or left-width 8)
                                              :height header-height}
                                      :right {:width  (or right-width 8)
@@ -130,46 +145,61 @@
                           (let [width  (oget evt "nativeEvent" "layout" "width")
                                 height (oget evt "nativeEvent" "layout" "height")]
                             (when get-layout
-                              (get-layout el {:width  width
-                                              :height height}))
-                            (swap! layout assoc el {:width  width
-                                                    :height height}))))]
-    (fn [{:keys [left-accessories left-component border-bottom
-                 right-accessories right-component insets get-layout
-                 title subtitle title-component style title-align
-                 background]
-          :or   {title-align   :center
-                 border-bottom true}}]
+                              (get-layout el
+                                          {:width  width
+                                           :height height}))
+                            (swap! layout assoc
+                              el
+                              {:width  width
+                               :height height}))))]
+    (fn
+      [{:keys [left-accessories left-component border-bottom
+               right-accessories right-component insets get-layout
+               title subtitle title-component style title-align
+               background]
+        :or   {title-align   :center
+               border-bottom true}}]
       (let [status-bar-height (get insets :top 0)
             height            (+ header-height status-bar-height)]
-        [animated/view {:style (header-wrapper-style {:height        height
-                                                      :background    background
-                                                      :border-bottom border-bottom})}
-         [rn/view {:pointer-events :box-none
-                   :height         status-bar-height}]
-         [rn/view {:style          (merge {:height header-height}
-                                          style)
-                   :pointer-events :box-none}
-          [rn/view {:style          absolute-fill
-                    :pointer-events :box-none}
-           [rn/view {:style          content
-                     :pointer-events :box-none}
-            [rn/view {:style          left
-                      :on-layout      (handle-layout :left get-layout)
-                      :pointer-events :box-none}
-             [header-actions {:accessories left-accessories
-                              :component   left-component}]]
+        [animated/view
+         {:style (header-wrapper-style {:height        height
+                                        :background    background
+                                        :border-bottom border-bottom})}
+         [rn/view
+          {:pointer-events :box-none
+           :height         status-bar-height}]
+         [rn/view
+          {:style          (merge {:height header-height}
+                                  style)
+           :pointer-events :box-none}
+          [rn/view
+           {:style          absolute-fill
+            :pointer-events :box-none}
+           [rn/view
+            {:style          content
+             :pointer-events :box-none}
+            [rn/view
+             {:style          left
+              :on-layout      (handle-layout :left get-layout)
+              :pointer-events :box-none}
+             [header-actions
+              {:accessories left-accessories
+               :component   left-component}]]
 
-            [rn/view {:style          (title-style @layout title-align)
-                      :on-layout      (handle-layout :title get-layout)
-                      :pointer-events :box-none}
-             [header-title {:title       title
-                            :subtitle    subtitle
-                            :title-align title-align
-                            :component   title-component}]]
+            [rn/view
+             {:style          (title-style @layout title-align)
+              :on-layout      (handle-layout :title get-layout)
+              :pointer-events :box-none}
+             [header-title
+              {:title       title
+               :subtitle    subtitle
+               :title-align title-align
+               :component   title-component}]]
 
-            [rn/view {:style          right
-                      :on-layout      (handle-layout :right get-layout)
-                      :pointer-events :box-none}
-             [header-actions {:accessories right-accessories
-                              :component   right-component}]]]]]]))))
+            [rn/view
+             {:style          right
+              :on-layout      (handle-layout :right get-layout)
+              :pointer-events :box-none}
+             [header-actions
+              {:accessories right-accessories
+               :component   right-component}]]]]]]))))

src/quo/components/list/footer.cljs

@@ -1,14 +1,17 @@
 (ns quo.components.list.footer
-  (:require [quo.react-native :as rn]
+  (:require [quo.components.text :as text]
             [quo.design-system.spacing :as spacing]
-            [quo.components.text :as text]
+            [quo.react-native :as rn]
             [reagent.core :as reagent]))
 
-(defn footer []
-  (let [this                       (reagent/current-component)
+(defn footer
+  []
+  (let [this (reagent/current-component)
         {:keys [color]
-         :or   {color :secondary}} (reagent/props this)]
-    [rn/view {:style (merge (:base spacing/padding-horizontal)
-                            (:small spacing/padding-vertical))}
+         :or   {color :secondary}}
+        (reagent/props this)]
+    [rn/view
+     {:style (merge (:base spacing/padding-horizontal)
+                    (:small spacing/padding-vertical))}
      (into [text/text {:color color}]
            (reagent/children this))]))

src/quo/components/list/header.cljs

@@ -1,15 +1,19 @@
 (ns quo.components.list.header
-  (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+  (:require [quo.components.text :as text]
             [quo.design-system.spacing :as spacing]
-            [quo.components.text :as text]))
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
-(defn header []
-  (let [this                       (reagent/current-component)
+(defn header
+  []
+  (let [this (reagent/current-component)
         {:keys [color]
-         :or   {color :secondary}} (reagent/props this)]
-    [rn/view {:style (merge (:base spacing/padding-horizontal)
-                            (:x-tiny spacing/padding-vertical))}
-     (into [text/text {:color color
-                       :style {:margin-top 10}}]
+         :or   {color :secondary}}
+        (reagent/props this)]
+    [rn/view
+     {:style (merge (:base spacing/padding-horizontal)
+                    (:x-tiny spacing/padding-vertical))}
+     (into [text/text
+            {:color color
+             :style {:margin-top 10}}]
            (reagent/children this))]))

src/quo/components/list/index.cljs

@@ -1,16 +1,18 @@
 (ns quo.components.list.index
-  (:require [quo.react-native :as rn]
-            [quo.components.text :as text]
-            [quo.design-system.colors :as colors]))
+  (:require [quo.components.text :as text]
+            [quo.design-system.colors :as colors]
+            [quo.react-native :as rn]))
 
-(defn index [{:keys [title]}]
+(defn index
+  [{:keys [title]}]
   [rn/view {:style {:padding-right 16}}
-   [rn/view {:style {:border-top-width           1
-                     :border-bottom-width        1
-                     :border-right-width         1
-                     :border-color               (colors/get-color :border-01)
-                     :padding-vertical           3
-                     :padding-horizontal         16
-                     :border-top-right-radius    16
-                     :border-bottom-right-radius 16}}
+   [rn/view
+    {:style {:border-top-width           1
+             :border-bottom-width        1
+             :border-right-width         1
+             :border-color               (colors/get-color :border-01)
+             :padding-vertical           3
+             :padding-horizontal         16
+             :border-top-right-radius    16
+             :border-bottom-right-radius 16}}
     [text/text title]]])

src/quo/components/list/item.cljs

@@ -1,28 +1,29 @@
 (ns quo.components.list.item
-  (:require [quo.react-native :as rn]
-            [quo.platform :as platform]
-            [quo.haptic :as haptic]
-            [quo.gesture-handler :as gh]
-            [quo.design-system.spacing :as spacing]
-            [quo.design-system.colors :as colors]
-            [quo.components.text :as text]
+  (:require [quo.components.animated.pressable :as animated]
             [quo.components.controls.view :as controls]
+            [quo.components.text :as text]
             [quo.components.tooltip :as tooltip]
-            [status-im.ui.components.icons.icons :as icons]
-            [quo.components.animated.pressable :as animated]))
+            [quo.design-system.colors :as colors]
+            [quo.design-system.spacing :as spacing]
+            [quo.gesture-handler :as gh]
+            [quo.haptic :as haptic]
+            [quo.platform :as platform]
+            [quo.react-native :as rn]
+            [status-im.ui.components.icons.icons :as icons]))
 
-(defn themes [theme]
+(defn themes
+  [theme]
   (case theme
-    :main {:icon-color         (:icon-04 @colors/theme)
-           :icon-bg-color      (:interactive-02 @colors/theme)
-           :active-background  (:interactive-02 @colors/theme)
-           :passive-background (:ui-background @colors/theme)
-           :text-color         (:text-01 @colors/theme)}
-    :accent {:icon-color         (:icon-04 @colors/theme)
-             :icon-bg-color      (:interactive-02 @colors/theme)
-             :active-background  (:interactive-02 @colors/theme)
-             :passive-background (:ui-background @colors/theme)
-             :text-color         (:text-04 @colors/theme)}
+    :main     {:icon-color         (:icon-04 @colors/theme)
+               :icon-bg-color      (:interactive-02 @colors/theme)
+               :active-background  (:interactive-02 @colors/theme)
+               :passive-background (:ui-background @colors/theme)
+               :text-color         (:text-01 @colors/theme)}
+    :accent   {:icon-color         (:icon-04 @colors/theme)
+               :icon-bg-color      (:interactive-02 @colors/theme)
+               :active-background  (:interactive-02 @colors/theme)
+               :passive-background (:ui-background @colors/theme)
+               :text-color         (:text-04 @colors/theme)}
     :negative {:icon-color         (:negative-01 @colors/theme)
                :icon-bg-color      (:negative-02 @colors/theme)
                :active-background  (:negative-02 @colors/theme)
@@ -39,28 +40,34 @@
                :passive-background (:ui-background @colors/theme)
                :text-color         (:text-02 @colors/theme)}))
 
-(defn size->icon-size [size]
+(defn size->icon-size
+  [size]
   (case size
     :small 36
     40))
 
-(defn size->container-size [size]
+(defn size->container-size
+  [size]
   (case size
     :small 52
     64))
 
-(defn size->single-title-size [size]
+(defn size->single-title-size
+  [size]
   (case size
     :small :base
     :large))
 
-(defn container [{:keys [size container-style]} & children]
-  (into [rn/view {:style (merge (:tiny spacing/padding-horizontal)
-                                {:min-height       (size->container-size size)
-                                 :padding-vertical 8
-                                 :flex-direction   :row
-                                 :align-items      :center
-                                 :justify-content  :space-between} container-style)}]
+(defn container
+  [{:keys [size container-style]} & children]
+  (into [rn/view
+         {:style (merge (:tiny spacing/padding-horizontal)
+                        {:min-height       (size->container-size size)
+                         :padding-vertical 8
+                         :flex-direction   :row
+                         :align-items      :center
+                         :justify-content  :space-between}
+                        container-style)}]
         children))
 
 (defn icon-column
@@ -72,103 +79,118 @@
          (vector? icon)
          icon
          (keyword? icon)
-         [rn/view {:style {:width            icon-size
-                           :height           icon-size
-                           :align-items      :center
-                           :justify-content  :center
-                           :border-radius    (/ icon-size 2)
-                           :background-color icon-bg-color}}
+         [rn/view
+          {:style {:width            icon-size
+                   :height           icon-size
+                   :align-items      :center
+                   :justify-content  :center
+                   :border-radius    (/ icon-size 2)
+                   :background-color icon-bg-color}}
           [icons/icon icon {:color icon-color}]])])))
 
 (defn title-column
   [{:keys [title text-color subtitle subtitle-max-lines subtitle-secondary
            title-accessibility-label size text-size title-text-weight
            right-side-present?]}]
-  [rn/view {:style (merge (:tiny spacing/padding-horizontal)
-                          ;; make left-side title grow if nothing is present on right-side
-                          (when-not right-side-present?
-                            {:flex            1
-                             :justify-content :center}))}
+  [rn/view
+   {:style (merge (:tiny spacing/padding-horizontal)
+                  ;; make left-side title grow if nothing is present on right-side
+                  (when-not right-side-present?
+                    {:flex            1
+                     :justify-content :center}))}
    (cond
 
      (and title subtitle)
      [:<>
-      ;; FIXME(Ferossgp): ReactNative 63 will support view inside text on andrid, remove thess if when migrating
+      ;; FIXME(Ferossgp): ReactNative 63 will support view inside text on andrid, remove thess if when
+      ;; migrating
       (if (string? title)
-        [text/text {:weight              (or title-text-weight :medium)
-                    :style               {:color text-color}
-                    :accessibility-label title-accessibility-label
-                    :ellipsize-mode      :tail
-                    :number-of-lines     1
-                    :size                text-size}
+        [text/text
+         {:weight              (or title-text-weight :medium)
+          :style               {:color text-color}
+          :accessibility-label title-accessibility-label
+          :ellipsize-mode      :tail
+          :number-of-lines     1
+          :size                text-size}
          title]
         title)
       (if (string? subtitle-secondary)
         [rn/view {:flex-direction :row}
-         [text/text {:style {:max-width "56.5%"}
-                     :weight          :regular
-                     :color           :secondary
-                     :ellipsize-mode  :tail
-                     :number-of-lines subtitle-max-lines
-                     :size            text-size}
+         [text/text
+          {:style           {:max-width "56.5%"}
+           :weight          :regular
+           :color           :secondary
+           :ellipsize-mode  :tail
+           :number-of-lines subtitle-max-lines
+           :size            text-size}
           subtitle]
-         [text/text {:style {:width "7%" :text-align :center}
-                     :weight          :regular
-                     :color           :secondary
-                     :ellipsize-mode  :middle
-                     :number-of-lines subtitle-max-lines
-                     :size            text-size}
+         [text/text
+          {:style           {:width "7%" :text-align :center}
+           :weight          :regular
+           :color           :secondary
+           :ellipsize-mode  :middle
+           :number-of-lines subtitle-max-lines
+           :size            text-size}
           "•"]
-         [text/text {:style {:max-width "36.5%"}
-                     :weight          :regular
-                     :color           :secondary
-                     :ellipsize-mode  :middle
-                     :number-of-lines subtitle-max-lines
-                     :size            text-size}
+         [text/text
+          {:style           {:max-width "36.5%"}
+           :weight          :regular
+           :color           :secondary
+           :ellipsize-mode  :middle
+           :number-of-lines subtitle-max-lines
+           :size            text-size}
           subtitle-secondary]]
         (if (string? subtitle)
-          [text/text {:weight          :regular
-                      :color           :secondary
-                      :ellipsize-mode  :tail
-                      :number-of-lines subtitle-max-lines
-                      :size            text-size}
+          [text/text
+           {:weight          :regular
+            :color           :secondary
+            :ellipsize-mode  :tail
+            :number-of-lines subtitle-max-lines
+            :size            text-size}
            subtitle]
           subtitle))]
 
      title
      (if (string? title)
-       [text/text {:weight                    (or title-text-weight :regular)
-                   :number-of-lines           1
-                   :style                     {:color text-color}
-                   :title-accessibility-label title-accessibility-label
-                   :ellipsize-mode            :tail
-                   :size                      (or text-size (size->single-title-size size))}
+       [text/text
+        {:weight                    (or title-text-weight :regular)
+         :number-of-lines           1
+         :style                     {:color text-color}
+         :title-accessibility-label title-accessibility-label
+         :ellipsize-mode            :tail
+         :size                      (or text-size (size->single-title-size size))}
         title]
        title))])
 
-(defn left-side [props]
-  [rn/view {:style {:flex-direction :row
-                    ;; Occupy only content width, never grow, but shrink if need be
-                    :flex-grow      0
-                    :flex-shrink    1
-                    :padding-right  16
-                    :align-items    (or (:left-side-alignment props) :center)}}
+(defn left-side
+  [props]
+  [rn/view
+   {:style {:flex-direction :row
+            ;; Occupy only content width, never grow, but shrink if need be
+            :flex-grow      0
+            :flex-shrink    1
+            :padding-right  16
+            :align-items    (or (:left-side-alignment props) :center)}}
    [icon-column props]
    [title-column props]])
 
-(defn right-side [{:keys [chevron active disabled accessory accessory-text accessory-style animated-accessory?]}]
+(defn right-side
+  [{:keys [chevron active disabled accessory accessory-text accessory-style animated-accessory?]}]
   (when (or chevron accessory)
-    [rn/view {:style (merge {:align-items     :center
-                             :justify-content :flex-end
-                             :flex-direction  :row
-                             ;; Grow to occupy full space, shrink when need be, but always maitaining 16px left gutter
-                             :flex-grow       1
-                             :flex-shrink     0
-                             :margin-left     16
-                             ;; When the left-side leaves no room for right-side, the rendered element is pushed out. A flex-basis ensures that there is some room reserved.
-                             ;; The number 80px was determined by trial and error.
-                             :flex-basis      80}
-                            accessory-style)}
+    [rn/view
+     {:style (merge {:align-items     :center
+                     :justify-content :flex-end
+                     :flex-direction  :row
+                     ;; Grow to occupy full space, shrink when need be, but always maitaining 16px left
+                     ;; gutter
+                     :flex-grow       1
+                     :flex-shrink     0
+                     :margin-left     16
+                     ;; When the left-side leaves no room for right-side, the rendered element is pushed
+                     ;; out. A flex-basis ensures that there is some room reserved.
+                     ;; The number 80px was determined by trial and error.
+                     :flex-basis      80}
+                    accessory-style)}
      [rn/view {:style (:tiny spacing/padding-horizontal)}
       (case accessory
         :radio    [controls/radio {:value active :disabled disabled}]
@@ -177,25 +199,28 @@
                      controls/checkbox)
                    {:value active :disabled disabled}]
         :switch   [controls/switch {:value active :disabled disabled}]
-        :text     [text/text {:color           :secondary
-                              :ellipsize-mode  :middle
-                              :number-of-lines 1}
+        :text     [text/text
+                   {:color           :secondary
+                    :ellipsize-mode  :middle
+                    :number-of-lines 1}
                    accessory-text]
         accessory)]
      (when (and chevron platform/ios?)
        [rn/view {:style {:padding-right (:tiny spacing/spacing)}}
-        [icons/icon :main-icons/next {:container-style {:opacity         0.4
-                                                        :align-items     :center
-                                                        :justify-content :center}
-                                      :resize-mode     :center
-                                      :color           (:icon-02 @colors/theme)}]])]))
+        [icons/icon :main-icons/next
+         {:container-style {:opacity         0.4
+                            :align-items     :center
+                            :justify-content :center}
+          :resize-mode     :center
+          :color           (:icon-02 @colors/theme)}]])]))
 
 (defn list-item
   [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
            left-side-alignment icon-color icon-bg-color
            title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
            accessory-text accessibility-label title-accessibility-label accessory-style
-           haptic-feedback haptic-type error animated animated-accessory? title-text-weight container-style
+           haptic-feedback haptic-type error animated animated-accessory? title-text-weight
+           container-style
            active-background-enabled background-color]
     :or   {subtitle-max-lines        1
            theme                     :main
@@ -203,26 +228,29 @@
            animated                  platform/ios?
            active-background-enabled true
            haptic-type               :selection}}]
-  (let [theme           (if disabled :disabled theme)
+  (let [theme                                                     (if disabled :disabled theme)
         {:keys [text-color active-background passive-background]}
         (themes theme)
-        icon-color      (or icon-color (:icon-color (themes theme)))
-        icon-bg-color   (or icon-bg-color (:icon-bg-color (themes theme)))
-        optional-haptic (fn []
-                          (when haptic-feedback
-                            (haptic/trigger haptic-type)))
-        component       (cond
-                          (and (not on-press)
-                               (not on-long-press))
-                          rn/view
-                          animated animated/pressable
-                          :else    gh/touchable-highlight)]
-    [rn/view {:background-color (cond (not= background-color nil)
-                                      background-color
-                                      (and (= accessory :radio) active)
-                                      active-background
-                                      :else
-                                      passive-background)}
+        icon-color                                                (or icon-color
+                                                                      (:icon-color (themes theme)))
+        icon-bg-color                                             (or icon-bg-color
+                                                                      (:icon-bg-color (themes theme)))
+        optional-haptic                                           (fn []
+                                                                    (when haptic-feedback
+                                                                      (haptic/trigger haptic-type)))
+        component                                                 (cond
+                                                                    (and (not on-press)
+                                                                         (not on-long-press))
+                                                                    rn/view
+                                                                    animated animated/pressable
+                                                                    :else gh/touchable-highlight)]
+    [rn/view
+     {:background-color (cond (not= background-color nil)
+                              background-color
+                              (and (= accessory :radio) active)
+                              active-background
+                              :else
+                              passive-background)}
      [component
       (merge {:type                :list-item
               :disabled            disabled
@@ -237,35 +265,39 @@
                                  (optional-haptic)
                                  (on-long-press))}))
       [container {:size size :container-style container-style}
-       [left-side {:icon-color                icon-color
-                   :text-color                (if on-press
-                                                text-color
-                                                (:text-color (themes :main)))
-                   :left-side-alignment       left-side-alignment
-                   :icon-bg-color             icon-bg-color
-                   :title-accessibility-label title-accessibility-label
-                   :icon                      icon
-                   :icon-container-style      icon-container-style
-                   :title                     title
-                   :title-text-weight         title-text-weight
-                   :size                      size
-                   :text-size                 text-size
-                   :subtitle                  subtitle
-                   :subtitle-max-lines        subtitle-max-lines
-                   :subtitle-secondary        subtitle-secondary
-                   :right-side-present?       (or accessory chevron)}]
-       [right-side {:chevron             chevron
-                    :active              active
-                    :disabled            disabled
-                    :on-press            on-press
-                    :accessory-text      accessory-text
-                    :animated-accessory? animated-accessory?
-                    :accessory-style     accessory-style
-                    :accessory           accessory}]]]
+       [left-side
+        {:icon-color                icon-color
+         :text-color                (if on-press
+                                      text-color
+                                      (:text-color (themes :main)))
+         :left-side-alignment       left-side-alignment
+         :icon-bg-color             icon-bg-color
+         :title-accessibility-label title-accessibility-label
+         :icon                      icon
+         :icon-container-style      icon-container-style
+         :title                     title
+         :title-text-weight         title-text-weight
+         :size                      size
+         :text-size                 text-size
+         :subtitle                  subtitle
+         :subtitle-max-lines        subtitle-max-lines
+         :subtitle-secondary        subtitle-secondary
+         :right-side-present?       (or accessory chevron)}]
+       [right-side
+        {:chevron             chevron
+         :active              active
+         :disabled            disabled
+         :on-press            on-press
+         :accessory-text      accessory-text
+         :animated-accessory? animated-accessory?
+         :accessory-style     accessory-style
+         :accessory           accessory}]]]
      (when error
-       [tooltip/tooltip (merge {:bottom-value 0}
-                               (when accessibility-label
-                                 {:accessibility-label (str (name accessibility-label) "-error")}))
-        [text/text {:color :negative
-                    :size  :small}
+       [tooltip/tooltip
+        (merge {:bottom-value 0}
+               (when accessibility-label
+                 {:accessibility-label (str (name accessibility-label) "-error")}))
+        [text/text
+         {:color :negative
+          :size  :small}
          error]])]))

src/quo/components/safe_area.cljs

@@ -1,19 +1,21 @@
 (ns quo.components.safe-area
-  (:require ["react-native-safe-area-context" :as safe-area-context
-             :refer (SafeAreaView SafeAreaProvider SafeAreaInsetsContext useSafeAreaInsets)]
+  (:require ["react-native-safe-area-context" :as safe-area-context :refer
+             (SafeAreaView SafeAreaProvider SafeAreaInsetsContext useSafeAreaInsets)]
             [reagent.core :as reagent]))
 
 (def provider (reagent/adapt-react-class SafeAreaProvider))
 (def ^:private consumer-raw (reagent/adapt-react-class (.-Consumer ^js SafeAreaInsetsContext)))
 (def view (reagent/adapt-react-class SafeAreaView))
 
-(defn consumer [component]
+(defn consumer
+  [component]
   [consumer-raw
    (fn [insets]
      (reagent/as-element
       [component (js->clj insets :keywordize-keys true)]))])
 
-(defn use-safe-area []
+(defn use-safe-area
+  []
   (let [insets (useSafeAreaInsets)]
     {:top    (.-top ^js insets)
      :bottom (.-bottom ^js insets)

src/quo/components/separator.cljs

@@ -1,8 +1,9 @@
 (ns quo.components.separator
-  (:require [quo.react-native :as react]
-            [quo.design-system.colors :as colors]))
+  (:require [quo.design-system.colors :as colors]
+            [quo.react-native :as react]))
 
-(defn separator [{:keys [color style]}]
+(defn separator
+  [{:keys [color style]}]
   [react/view
    {:style
     (merge

src/quo/components/text.cljs

@@ -5,7 +5,8 @@
             [quo.react-native :as rn]
             [reagent.core :as reagent]))
 
-(defn text-style [{:keys [size align weight monospace color style]}]
+(defn text-style
+  [{:keys [size align weight monospace color style]}]
   ;; NOTE(Ferossgo): or in destructoring will keep nil as a value
   (merge (if monospace
            ;; TODO(Ferossgp): Add all weights for monospace
@@ -38,12 +39,15 @@
          {:text-align (or align :auto)}
          style))
 
-(defn text []
+(defn text
+  []
   (let [this      (reagent/current-component)
         props     (reagent/props this)
         component (if (:animated? props) animated/text rn/text)]
-    (into [component (merge {:style (text-style props)}
-                            (dissoc props
-                                    :style :size :weight :color
-                                    :align :animated?))]
+    (into [component
+           (merge {:style (text-style props)}
+                  (dissoc props
+                          :style  :size
+                          :weight :color
+                          :align  :animated?))]
           (reagent/children this))))

src/quo/components/text_input.cljs

@@ -1,16 +1,15 @@
 (ns quo.components.text-input
   (:require [clojure.spec.alpha :as s]
-            [reagent.core :as reagent]
             [oops.core :refer [ocall]]
-            [quo.react-native :as rn]
-            ;; TODO(Ferossgp): Move icon component to lib
-            [status-im.ui.components.icons.icons :as icons]
+            [quo.components.text :as text]
             [quo.components.tooltip :as tooltip]
-            [quo.platform :as platform]
-            [quo.design-system.typography :as typography]
-            [quo.design-system.spacing :as spacing]
             [quo.design-system.colors :as colors]
-            [quo.components.text :as text]))
+            [quo.design-system.spacing :as spacing]
+            [quo.design-system.typography :as typography]
+            [quo.platform :as platform]
+            [quo.react-native :as rn] ;; TODO(Ferossgp): Move icon component to lib
+            [reagent.core :as reagent]
+            [status-im.ui.components.icons.icons :as icons]))
 
 ;; NOTE(Ferossgp): Refactor with hooks when available
 ;; We track all currently mounted text input refs
@@ -22,19 +21,26 @@
 (s/def ::multiline boolean?)
 (s/def ::secure-text-entry boolean?)
 (s/def ::show-cancel boolean?)
-(s/def ::label (s/nilable (s/or :string string? :component vector?)))
+(s/def ::label
+  (s/nilable (s/or :string    string?
+                   :component vector?)))
 (s/def ::cancel-label (s/nilable string?))
 (s/def ::default-value (s/nilable string?))
 (s/def ::placeholder (s/nilable string?))
-(s/def ::keyboard-type (s/nilable (s/or :string string? :keyword keyword?))) ; TODO: make set
-(s/def ::accessibility-label (s/nilable (s/or :string string? :keyword keyword?)))
+(s/def ::keyboard-type
+  (s/nilable (s/or :string  string?
+                   :keyword keyword?))) ; TODO: make set
+(s/def ::accessibility-label
+  (s/nilable (s/or :string  string?
+                   :keyword keyword?)))
 (s/def ::on-focus fn?)
 (s/def ::on-blur fn?)
 (s/def ::on-press fn?)
 
-(s/def ::accessory (s/keys :opt-un [::on-press
-                                    ::icon
-                                    ::component]))
+(s/def ::accessory
+  (s/keys :opt-un [::on-press
+                   ::icon
+                   ::component]))
 (s/def ::after (s/nilable ::accessory))
 (s/def ::before (s/nilable ::accessory))
 
@@ -42,25 +48,27 @@
 (s/def ::input-style ::style)
 (s/def ::container-style ::style)
 
-(s/def ::text-input (s/keys :opt-un
-                            [::label
-                             ::multiline
-                             ::error
-                             ::style
-                             ::input-style
-                             ::keyboard-type
-                             ::before
-                             ::after
-                             ::cancel-label
-                             ::on-focus
-                             ::on-blur
-                             ::container-style
-                             ::show-cancel
-                             ::accessibility-label
-                             ::bottom-value
-                             ::secure-text-entry]))
+(s/def ::text-input
+  (s/keys :opt-un
+          [::label
+           ::multiline
+           ::error
+           ::style
+           ::input-style
+           ::keyboard-type
+           ::before
+           ::after
+           ::cancel-label
+           ::on-focus
+           ::on-blur
+           ::container-style
+           ::show-cancel
+           ::accessibility-label
+           ::bottom-value
+           ::secure-text-entry]))
 
-(defn check-spec [spec prop]
+(defn check-spec
+  [spec prop]
   (if (s/valid? spec prop)
     true
     (do
@@ -70,14 +78,17 @@
 (def height 44)                         ; 22 line-height + 11*2 vertical padding
 (def multiline-height 88)               ; 3 * 22 three line-height + 11* vertical padding
 
-(defn label-style []
+(defn label-style
+  []
   {:margin-bottom (:tiny spacing/spacing)})
 
-(defn text-input-row-style []
+(defn text-input-row-style
+  []
   {:flex-direction :row
    :align-items    :center})
 
-(defn text-input-view-style [style]
+(defn text-input-view-style
+  [style]
   (merge {:border-radius    8
           :flex-direction   :row
           :flex             1
@@ -85,7 +96,8 @@
           :background-color (:ui-01 @colors/theme)}
          style))
 
-(defn text-input-style [multiline input-style monospace before after]
+(defn text-input-style
+  [multiline input-style monospace before after]
   (merge (if monospace
            typography/monospace
            typography/font-regular)
@@ -107,66 +119,76 @@
             :height              multiline-height})
          input-style))
 
-(defn cancel-style []
+(defn cancel-style
+  []
   {:margin-left     (:tiny spacing/spacing)
    :padding-left    (:tiny spacing/spacing)
    :justify-content :center
    :align-self      :stretch})
 
-(defn accessory-style []
+(defn accessory-style
+  []
   (merge (:base spacing/padding-horizontal)
          {:flex            1
           :justify-content :center}))
 
-(defn accessory-element [{:keys [icon component icon-opts style accessibility-label on-press]}]
+(defn accessory-element
+  [{:keys [icon component icon-opts style accessibility-label on-press]}]
   (let [el (if on-press
              rn/touchable-opacity
              rn/view)]
-    [el (merge {:style {:align-self :stretch}}
-               (when on-press
-                 {:on-press on-press}))
-     [rn/view (merge {:style (merge (accessory-style)
-                                    style)}
-                     (when accessibility-label
-                       {:accessibility-label accessibility-label}))
+    [el
+     (merge {:style {:align-self :stretch}}
+            (when on-press
+              {:on-press on-press}))
+     [rn/view
+      (merge {:style (merge (accessory-style)
+                            style)}
+             (when accessibility-label
+               {:accessibility-label accessibility-label}))
       (cond
         icon
-        [icons/icon icon (merge {:color (:icon-01 @colors/theme)}
-                                icon-opts)]
+        [icons/icon icon
+         (merge {:color (:icon-01 @colors/theme)}
+                icon-opts)]
         component
         component
 
         :else
         nil)]]))
 
-(defn text-input-raw []
+(defn text-input-raw
+  []
   (let [focused (reagent/atom nil)
         visible (reagent/atom false)
         ref     (atom nil)
         blur    (fn []
-                  (some-> @ref (ocall "blur")))]
-    (fn [{:keys [label multiline error style input-style keyboard-type before after
-                 cancel-label on-focus on-blur show-cancel accessibility-label
-                 bottom-value secure-text-entry container-style get-ref on-cancel
-                 monospace auto-complete-type auto-correct]
-          :or  {cancel-label "Cancel"}
-          :as  props}]
+                  (some-> @ref
+                          (ocall "blur")))]
+    (fn
+      [{:keys [label multiline error style input-style keyboard-type before after
+               cancel-label on-focus on-blur show-cancel accessibility-label
+               bottom-value secure-text-entry container-style get-ref on-cancel
+               monospace auto-complete-type auto-correct]
+        :or   {cancel-label "Cancel"}
+        :as   props}]
       {:pre [(check-spec ::text-input props)]}
-      (let [show-cancel (if (nil? show-cancel)
-                          ;; Enabled by default on iOs and disabled on Android
-                          platform/ios?
-                          show-cancel)
-            after       (cond
-                          (and secure-text-entry @visible)
-                          {:icon     :main-icons/hide
-                           :on-press #(reset! visible false)}
+      (let [show-cancel   (if (nil? show-cancel)
+                            ;; Enabled by default on iOs and disabled on Android
+                            platform/ios?
+                            show-cancel)
+            after         (cond
+                            (and secure-text-entry @visible)
+                            {:icon     :main-icons/hide
+                             :on-press #(reset! visible false)}
 
-                          (and secure-text-entry (not @visible))
-                          {:icon     :main-icons/show
-                           :on-press #(reset! visible true)}
+                            (and secure-text-entry (not @visible))
+                            {:icon     :main-icons/show
+                             :on-press #(reset! visible true)}
 
-                          :else after)
-            secure        (boolean (and secure-text-entry (not @visible))) ; must be a boolean to work on iOS
+                            :else                                  after)
+            secure        (boolean (and secure-text-entry (not @visible))) ; must be a boolean to work on
+                                                                           ; iOS
             auto-complete (cond
                             (= keyboard-type :visible-password)
                             :off
@@ -176,7 +198,9 @@
 
                             :else
                             auto-complete-type)
-            auto-correct  (and (not= keyboard-type :visible-password) (not secure-text-entry) auto-correct)
+            auto-correct  (and (not= keyboard-type :visible-password)
+                               (not secure-text-entry)
+                               auto-correct)
             on-cancel     (fn []
                             (when on-cancel
                               (on-cancel))
@@ -185,8 +209,10 @@
                             (and platform/ios? (= keyboard-type :visible-password))
                             :default
 
-                            ; the correct approach on Android would be keep secure-text-entry on set keyboard type
-                            ; to visible-password. But until https://github.com/facebook/react-native/issues/27946
+                            ; the correct approach on Android would be keep secure-text-entry on set
+                            ; keyboard type
+                            ; to visible-password. But until
+                            ; https://github.com/facebook/react-native/issues/27946
                             ; is solved that's the second best way.
                             (and platform/android? secure-text-entry)
                             :default
@@ -198,59 +224,71 @@
            [text/text {:style (label-style)}
             label])
          [rn/view {:style (text-input-row-style)}
-          [rn/view {:style                       (text-input-view-style style)
-                    :important-for-accessibility (if secure-text-entry
-                                                   :no-hide-descendants
-                                                   :auto)}
+          [rn/view
+           {:style                       (text-input-view-style style)
+            :important-for-accessibility (if secure-text-entry
+                                           :no-hide-descendants
+                                           :auto)}
            (when before
              [accessory-element before])
            [rn/text-input
-            (merge {:style                   (text-input-style multiline input-style monospace before after)
-                    :ref                     (fn [r]
-                                               (reset! ref r)
-                                               (when get-ref (get-ref r)))
-                    :placeholder-text-color  (:text-02 @colors/theme)
-                    :underline-color-android :transparent
-                    :auto-capitalize         :none
-                    :secure-text-entry       secure
-                    :auto-correct            auto-correct
-                    :auto-complete-type      auto-complete
-                    :on-focus                (fn [evt]
-                                               (when on-focus (on-focus evt))
-                                               (when show-cancel
-                                                 (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
-                                               (reset! focused true))
-                    :on-blur                 (fn [evt]
-                                               (when on-blur (on-blur evt))
-                                               (when show-cancel
-                                                 (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
-                                               (reset! focused false))
-                    :keyboard-type           keyboard-type}
-                   (when (and platform/ios? (not after))
-                     {:clear-button-mode :while-editing})
-                   (dissoc props
-                           :style :keyboard-type :on-focus :on-blur
-                           :secure-text-entry :ref :get-ref :auto-correct :auto-complete-type))]
+            (merge
+             {:style                   (text-input-style multiline input-style monospace before after)
+              :ref                     (fn [r]
+                                         (reset! ref r)
+                                         (when get-ref (get-ref r)))
+              :placeholder-text-color  (:text-02 @colors/theme)
+              :underline-color-android :transparent
+              :auto-capitalize         :none
+              :secure-text-entry       secure
+              :auto-correct            auto-correct
+              :auto-complete-type      auto-complete
+              :on-focus                (fn [evt]
+                                         (when on-focus (on-focus evt))
+                                         (when show-cancel
+                                           (rn/configure-next (:ease-in-ease-out
+                                                               rn/layout-animation-presets)))
+                                         (reset! focused true))
+              :on-blur                 (fn [evt]
+                                         (when on-blur (on-blur evt))
+                                         (when show-cancel
+                                           (rn/configure-next (:ease-in-ease-out
+                                                               rn/layout-animation-presets)))
+                                         (reset! focused false))
+              :keyboard-type           keyboard-type}
+             (when (and platform/ios? (not after))
+               {:clear-button-mode :while-editing})
+             (dissoc props
+                     :style
+                     :keyboard-type :on-focus
+                     :on-blur
+                     :secure-text-entry
+                     :ref           :get-ref
+                     :auto-correct  :auto-complete-type))]
            (when after
              [accessory-element after])]
           (when (and show-cancel
                      (not multiline)
                      @focused)
-            [rn/touchable-opacity {:style    (cancel-style)
-                                   :on-press on-cancel}
+            [rn/touchable-opacity
+             {:style    (cancel-style)
+              :on-press on-cancel}
              [text/text {:color :link} cancel-label]])
           (when error
-            [tooltip/tooltip (merge {:bottom-value (if bottom-value bottom-value 0)}
-                                    (when accessibility-label
-                                      {:accessibility-label (str (name accessibility-label) "-error")}))
-             [text/text {:color :negative
-                         :align :center
-                         :size  :small}
+            [tooltip/tooltip
+             (merge {:bottom-value (if bottom-value bottom-value 0)}
+                    (when accessibility-label
+                      {:accessibility-label (str (name accessibility-label) "-error")}))
+             [text/text
+              {:color :negative
+               :align :center
+               :size  :small}
               error]])]]))))
 
 ;; TODO(Ferossgp): Refactor me when hooks available
-(defn text-input [{:keys [preserve-input?]
-                   :as   props}]
+(defn text-input
+  [{:keys [preserve-input?]
+    :as   props}]
   (if preserve-input?
     [text-input-raw props]
     (let [id (random-uuid)]
@@ -261,10 +299,11 @@
         :reagent-render
         (fn [{:keys [get-ref default-value]
               :as   props}]
-          [text-input-raw (merge props
-                                 {:get-ref (fn [r]
-                                             ;; Store input and its defaultValue
-                                             ;; one we receive a non-nil ref
-                                             (when r
-                                               (swap! text-input-refs assoc id  {:ref r :value default-value}))
-                                             (when get-ref (get-ref r)))})])}))))
+          [text-input-raw
+           (merge props
+                  {:get-ref (fn [r]
+                              ;; Store input and its defaultValue
+                              ;; one we receive a non-nil ref
+                              (when r
+                                (swap! text-input-refs assoc id {:ref r :value default-value}))
+                              (when get-ref (get-ref r)))})])}))))

src/quo/components/tooltip.cljs

@@ -1,17 +1,17 @@
 (ns quo.components.tooltip
-  (:require [reagent.core :as reagent]
-            [oops.core :refer [oget]]
+  (:require [oops.core :refer [oget]]
             [quo.animated :as animated]
-            [quo.react-native :as rn]
             [quo.design-system.colors :as colors]
             [quo.design-system.spacing :as spacing]
-            [quo.platform :as platform]
-            ;; FIXME(Ferossgp): Dependecy on status
+            [quo.platform :as platform] ;; FIXME(Ferossgp): Dependecy on status
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]
             [status-im.ui.components.icons.icons :as icons]))
 
 (def ^:private initial-height 22)
 
-(defn tooltip-style [{:keys [bottom-value animation]}]
+(defn tooltip-style
+  [{:keys [bottom-value animation]}]
   (merge
    (:base spacing/padding-horizontal)
    {:position    :absolute
@@ -22,7 +22,8 @@
     :opacity     animation
     :transform   [{:translateY (animated/mix animation 10 0)}]}))
 
-(defn container-style []
+(defn container-style
+  []
   {:z-index        2
    :align-items    :center
    :shadow-radius  16
@@ -30,43 +31,50 @@
    :shadow-color   (:shadow-01 @colors/theme)
    :shadow-offset  {:width 0 :height 4}})
 
-(defn content-style []
+(defn content-style
+  []
   (merge (:base spacing/padding-horizontal)
          {:padding-vertical 6
           :elevation        2
           :background-color (:ui-background @colors/theme)
           :border-radius    8}))
 
-(defn tooltip []
+(defn tooltip
+  []
   (let [layout      (reagent/atom {:height initial-height})
         animation-v (animated/value 0)
         animation   (animated/with-timing-transition
-                      animation-v
-                      {:easing (:ease-in animated/easings)})
+                     animation-v
+                     {:easing (:ease-in animated/easings)})
         on-layout   (fn [evt]
                       (let [width  (oget evt "nativeEvent" "layout" "width")
                             height (oget evt "nativeEvent" "layout" "height")]
                         (reset! layout {:width  width
                                         :height height})))]
-    (fn  [{:keys [bottom-value accessibility-label]} & children]
+    (fn [{:keys [bottom-value accessibility-label]} & children]
       [:<>
-       [animated/code {:exec (animated/cond* (animated/not* animation-v)
-                                             (animated/set animation-v 1))}]
-       [animated/view {:style          (tooltip-style {:bottom-value (- (get @layout :height)
-                                                                        bottom-value)
-                                                       :animation    animation})
-                       :pointer-events :box-none}
-        [animated/view {:style          (container-style)
-                        :pointer-events :box-none}
-         (into [rn/view {:style               (content-style)
-                         :pointer-events      :box-none
-                         :accessibility-label accessibility-label
-                         :on-layout           on-layout}]
+       [animated/code
+        {:exec (animated/cond* (animated/not* animation-v)
+                               (animated/set animation-v 1))}]
+       [animated/view
+        {:style          (tooltip-style {:bottom-value (- (get @layout :height)
+                                                          bottom-value)
+                                         :animation    animation})
+         :pointer-events :box-none}
+        [animated/view
+         {:style          (container-style)
+          :pointer-events :box-none}
+         (into [rn/view
+                {:style               (content-style)
+                 :pointer-events      :box-none
+                 :accessibility-label accessibility-label
+                 :on-layout           on-layout}]
                children)
 
          (when platform/ios?
            ;; NOTE(Ferossgp): Android does not show elevation for tooltip making it lost on white bg
-           [icons/icon :icons/tooltip-tip {:width           18
-                                           :height          8
-                                           :container-style {:elevation 3}
-                                           :color           (:ui-background @colors/theme)}])]]])))
+           [icons/icon :icons/tooltip-tip
+            {:width           18
+             :height          8
+             :container-style {:elevation 3}
+             :color           (:ui-background @colors/theme)}])]]])))

src/quo/core.cljs

@@ -1,18 +1,18 @@
 (ns quo.core
   (:require [quo.components.animated-header :as animated-header]
+            [quo.components.bottom-sheet.view :as bottom-sheet]
+            [quo.components.button.view :as button]
+            [quo.components.controls.view :as controls]
             [quo.components.header :as header]
+            [quo.components.list.footer :as list-footer]
+            [quo.components.list.header :as list-header]
+            [quo.components.list.index :as list-index]
+            [quo.components.list.item :as list-item]
             [quo.components.safe-area :as safe-area]
+            [quo.components.separator :as separator]
+            [quo.components.text :as text]
             [quo.components.text-input :as text-input]
             [quo.components.tooltip :as tooltip]
-            [quo.components.text :as text]
-            [quo.components.button.view :as button]
-            [quo.components.list.header :as list-header]
-            [quo.components.list.footer :as list-footer]
-            [quo.components.list.item :as list-item]
-            [quo.components.list.index :as list-index]
-            [quo.components.controls.view :as controls]
-            [quo.components.bottom-sheet.view :as bottom-sheet]
-            [quo.components.separator :as separator]
             [quo.design-system.colors :as colors]))
 
 (def text text/text)

src/quo/design_system/colors.cljs

@@ -1,6 +1,6 @@
 (ns quo.design-system.colors
-  (:require [reagent.core :as reagent]
-            [clojure.string :as string]))
+  (:require [clojure.string :as string]
+            [reagent.core :as reagent]))
 
 ;; Colors mapping from figma to code, note that theme is more extended and
 ;; one can follow the comments from the light theme to choose what to use in a component.
@@ -19,14 +19,17 @@
 
 (def light-theme
   {:positive-01    "rgba(68,208,88,1)"     ; Primary Positive, text, icons color
-   :positive-02    "rgba(78,188,96,0.1)"   ; Secondary Positive, Supporting color for success illustrations
+   :positive-02    "rgba(78,188,96,0.1)"   ; Secondary Positive, Supporting color for success
+                                           ; illustrations
    :positive-03    "rgba(78,188,96,1)"     ; Lighter Positive, Supporting color for success illustrations
    :negative-01    "rgba(255,45,85,1)"     ; Primary Negative, text, icons color
-   :negative-02    "rgba(255,45,85,0.1))"  ; Secondary Negative, Supporting color for errors illustrations
+   :negative-02    "rgba(255,45,85,0.1))"  ; Secondary Negative, Supporting color for errors
+                                           ; illustrations
    :warning-01     "rgba(255, 202, 15, 1)"
    :warning-02     "rgba(255, 202, 15, 0.1)"
    :interactive-01 "rgba(67,96,223,1)"     ; Accent color, buttons, own message, actions,active state
-   :interactive-02 "rgba(236,239,252,1)"   ; Light Accent, buttons background, actions background, messages
+   :interactive-02 "rgba(236,239,252,1)"   ; Light Accent, buttons background, actions background,
+                                           ; messages
    :interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent
    :interactive-04 "rgba(147,155,161,1)"   ; Disabled state
    :ui-background  "rgba(255,255,255,1)"   ; Default view background
@@ -85,12 +88,14 @@
 
 (def theme (reagent/atom light-theme))
 
-(defn get-color [color]
+(defn get-color
+  [color]
   (get @theme color))
 
 ;; LEGACY COLORS
 
-(defn alpha [value opacity]
+(defn alpha
+  [value opacity]
   (if (string/starts-with? value "#")
     (let [hex (string/replace value #"#" "")
           r   (js/parseInt (subs hex 0 2) 16)
@@ -100,13 +105,15 @@
     (let [rgb (string/split value #",")]
       (str (string/join "," (butlast rgb)) "," opacity ")"))))
 
-(def old-colors-mapping-light {:mentioned-background "#def6fc"
-                               :mentioned-border     "#b8ecf9"
-                               :pin-background         "#FFEECC"})
+(def old-colors-mapping-light
+  {:mentioned-background "#def6fc"
+   :mentioned-border     "#b8ecf9"
+   :pin-background       "#FFEECC"})
 
-(def old-colors-mapping-dark {:mentioned-background "#2a4046"
-                              :mentioned-border     "#2a4046"
-                              :pin-background         "#34232B"})
+(def old-colors-mapping-dark
+  {:mentioned-background "#2a4046"
+   :mentioned-border     "#2a4046"
+   :pin-background       "#34232B"})
 
 (def old-colors-mapping-themes {:dark old-colors-mapping-dark :light old-colors-mapping-light})
 
@@ -127,7 +134,8 @@
 ;; BLACK
 (def black (:text-01 light-theme))                                  ;; Used as the default text color
 (def black-persist (:ui-background dark-theme))                           ;; this doesn't with theme
-(def black-transparent (:ui-02 light-theme))                   ;; Used as background color for rounded button on dark background and as background color for containers like "Backup recovery phrase"
+(def black-transparent (:ui-02 light-theme))                   ;; Used as background color for rounded button on dark background and as background
+                   ;; color for containers like "Backup recovery phrase"
 (def black-transparent-20 (:backdrop light-theme))                ; accounts divider
 (def black-transparent-40 (:backdrop light-theme))
 (def black-transparent-40-persist (:backdrop light-theme))
@@ -136,7 +144,8 @@
 (def black-transparent-86 (:ui-03 light-theme))
 
 ;; DARK GREY
-(def gray (:text-02 light-theme))                                    ;; Dark grey, used as a background for a light foreground and as section header and secondary text color
+(def gray (:text-02 light-theme))                                    ;; Dark grey, used as a background for a light foreground and as
+                                    ;; section header and secondary text color
 (def gray-transparent-10 (alpha gray 0.1))
 (def gray-transparent-40 (alpha gray 0.4))
 ;; LIGHT GREY
@@ -164,20 +173,22 @@
 (def purple "#887af9")
 (def orange "#FE8F59")
 
-(def chat-colors ["#fa6565"
-                  "#7cda00"
-                  purple
-                  "#51d0f0"
-                  orange
-                  "#d37ef4"])
+(def chat-colors
+  ["#fa6565"
+   "#7cda00"
+   purple
+   "#51d0f0"
+   orange
+   "#d37ef4"])
 
-(def account-colors ["#9B832F"
-                     "#D37EF4"
-                     "#1D806F"
-                     "#FA6565"
-                     "#7CDA00"
-                     purple
-                     "#8B3131"])
+(def account-colors
+  ["#9B832F"
+   "#D37EF4"
+   "#1D806F"
+   "#FA6565"
+   "#7CDA00"
+   purple
+   "#8B3131"])
 
 (def mention-incoming "#0DA4C9")
 (def mention-outgoing "#9EE8FA")
@@ -191,10 +202,12 @@
 
 (def theme-type (reagent/atom :light))
 
-(defn dark? []
+(defn dark?
+  []
   (= :dark @theme-type))
 
-(defn set-legacy-theme-type [type]
+(defn set-legacy-theme-type
+  [type]
   (when-not (= type @theme-type)
     (let [old-colors-mapping-colors (get old-colors-mapping-themes type)]
       (set! white (:ui-background @theme))

src/quo/design_system/spacing.cljs

@@ -1,19 +1,22 @@
 (ns quo.design-system.spacing)
 
-(def spacing {:x-tiny   4
-              :tiny     8
-              :small    12
-              :base     16
-              :large    24
-              :x-large  32
-              :xx-large 48})
+(def spacing
+  {:x-tiny   4
+   :tiny     8
+   :small    12
+   :base     16
+   :large    24
+   :x-large  32
+   :xx-large 48})
 
-(def padding-horizontal (reduce-kv (fn [m k v]
-                                     (assoc m k {:padding-horizontal v}))
-                                   {}
-                                   spacing))
+(def padding-horizontal
+  (reduce-kv (fn [m k v]
+               (assoc m k {:padding-horizontal v}))
+             {}
+             spacing))
 
-(def padding-vertical (reduce-kv (fn [m k v]
-                                   (assoc m k {:padding-vertical v}))
-                                 {}
-                                 spacing))
+(def padding-vertical
+  (reduce-kv (fn [m k v]
+               (assoc m k {:padding-vertical v}))
+             {}
+             spacing))

src/quo/design_system/typography.cljs

@@ -1,25 +1,32 @@
 (ns quo.design-system.typography)
 
-(def tiny {:font-size    10
-           :line-height 14})
+(def tiny
+  {:font-size   10
+   :line-height 14})
 
-(def x-small {:font-size 12
-              :line-height 16})
+(def x-small
+  {:font-size   12
+   :line-height 16})
 
-(def small {:font-size   13
-            :line-height 18})
+(def small
+  {:font-size   13
+   :line-height 18})
 
-(def base {:font-size   15
-           :line-height 22})
+(def base
+  {:font-size   15
+   :line-height 22})
 
-(def large {:font-size   17
-            :line-height 24})
+(def large
+  {:font-size   17
+   :line-height 24})
 
-(def x-large {:font-size   22
-              :line-height 30})
+(def x-large
+  {:font-size   22
+   :line-height 30})
 
-(def xx-large {:font-size  28
-               :line-height 38})
+(def xx-large
+  {:font-size   28
+   :line-height 38})
 
 (def font-regular {:font-family "Inter-Regular"}) ; 400
 

src/quo/gesture_handler.cljs

@@ -1,12 +1,17 @@
 (ns quo.gesture-handler
-  (:require [oops.core :refer [oget]]
-            [reagent.core :as reagent]
+  (:require ["react-native-gesture-handler" :refer
+             (TapGestureHandler PanGestureHandler
+                                LongPressGestureHandler
+                                TouchableWithoutFeedback
+                                TouchableOpacity
+                                TouchableHighlight
+                                State
+                                NativeViewGestureHandler
+                                FlatList
+                                ScrollView)]
+            [oops.core :refer [oget]]
             [quo.design-system.colors :as colors]
-            ["react-native-gesture-handler"
-             :refer (TapGestureHandler PanGestureHandler LongPressGestureHandler
-                                       TouchableWithoutFeedback TouchableOpacity
-                                       TouchableHighlight State NativeViewGestureHandler
-                                       FlatList ScrollView)]))
+            [reagent.core :as reagent]))
 
 (def flat-list-raw FlatList)
 
@@ -30,9 +35,11 @@
 
 (def touchable-highlight-class (reagent/adapt-react-class TouchableHighlight))
 
-(defn touchable-highlight [props & children]
-  (into [touchable-highlight-class (merge {:underlay-color (:interactive-02 @colors/theme)}
-                                          props)]
+(defn touchable-highlight
+  [props & children]
+  (into [touchable-highlight-class
+         (merge {:underlay-color (:interactive-02 @colors/theme)}
+                props)]
         children))
 
 (def touchable-opacity
@@ -40,9 +47,10 @@
 
 (def native-view-gesture-handler (reagent/adapt-react-class NativeViewGestureHandler))
 
-(def states {:began        (oget State "BEGAN")
-             :active       (oget State "ACTIVE")
-             :cancelled    (oget State "CANCELLED")
-             :end          (oget State "END")
-             :failed       (oget State "FAILED")
-             :undetermined (oget State "UNDETERMINED")})
+(def states
+  {:began        (oget State "BEGAN")
+   :active       (oget State "ACTIVE")
+   :cancelled    (oget State "CANCELLED")
+   :end          (oget State "END")
+   :failed       (oget State "FAILED")
+   :undetermined (oget State "UNDETERMINED")})

src/quo/haptic.cljs

@@ -9,16 +9,17 @@
    :notification-success "notificationSuccess"
    :notification-warning "notificationWarning"
    :notification-error   "notificationError"
-   :clock-tick           "clockTick"                    ; (Android only)
-   :context-click        "contextClick"                 ; (Android only)
-   :keyboard-press       "keyboardPress"                ; (Android only)
-   :keyboard-release     "keyboardRelease"              ; (Android only)
-   :keyboard-tap         "keyboardTap"                  ; (Android only)
-   :long-press           "longPress"                    ; (Android only)
-   :text-handle-move     "textHandleMove"               ; (Android only)
-   :virtual-key          "virtualKey"                   ; (Android only)
-   :virtual-key-release  "virtualKeyRelease"            ; (Android only)
-   })
+   :clock-tick           "clockTick"         ; (Android only)
+   :context-click        "contextClick"      ; (Android only)
+   :keyboard-press       "keyboardPress"     ; (Android only)
+   :keyboard-release     "keyboardRelease"   ; (Android only)
+   :keyboard-tap         "keyboardTap"       ; (Android only)
+   :long-press           "longPress"         ; (Android only)
+   :text-handle-move     "textHandleMove"    ; (Android only)
+   :virtual-key          "virtualKey"        ; (Android only)
+   :virtual-key-release  "virtualKeyRelease" ; (Android only)
+  })
 
-(defn trigger [method]
+(defn trigger
+  [method]
   (.trigger ^js react-native-haptic-feedback (get haptic-methods method)))

src/quo/previews/bottom_sheet.cljs

@@ -1,27 +1,29 @@
 (ns quo.previews.bottom-sheet
-  (:require [reagent.core :as reagent]
-            [quo.core :as quo]
-            [quo.react-native :as rn]
+  (:require [quo.core :as quo]
             [quo.design-system.colors :as colors]
-            [quo.previews.preview :as preview]))
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
-(def descriptor [{:label "Show handle:"
-                  :key   :show-handle?
-                  :type  :boolean}
-                 {:label "Backdrop dismiss:"
-                  :key   :backdrop-dismiss?
-                  :type  :boolean}
-                 {:label "Disable drag:"
-                  :key   :disable-drag?
-                  :type  :boolean}
-                 {:label "Android back cancel:"
-                  :key   :back-button-cancel
-                  :type  :boolean}
-                 {:label "Scrollable:"
-                  :key   :scrollable
-                  :type  :boolean}])
+(def descriptor
+  [{:label "Show handle:"
+    :key   :show-handle?
+    :type  :boolean}
+   {:label "Backdrop dismiss:"
+    :key   :backdrop-dismiss?
+    :type  :boolean}
+   {:label "Disable drag:"
+    :key   :disable-drag?
+    :type  :boolean}
+   {:label "Android back cancel:"
+    :key   :back-button-cancel
+    :type  :boolean}
+   {:label "Scrollable:"
+    :key   :scrollable
+    :type  :boolean}])
 
-(defn cool-preview []
+(defn cool-preview
+  []
   (let [state      (reagent/atom {:show-handle?       true
                                   :backdrop-dismiss?  true
                                   :disable-drag?      false
@@ -29,38 +31,47 @@
         visible    (reagent/atom false)
         scrollable (reagent/cursor state [:scrollable])]
     (fn []
-      [rn/view {:margin-bottom 50
-                :padding       16}
+      [rn/view
+       {:margin-bottom 50
+        :padding       16}
        [preview/customizer state descriptor]
        [:<>
-        [rn/view {:style {:align-items :center
-                          :padding     16}}
+        [rn/view
+         {:style {:align-items :center
+                  :padding     16}}
          [rn/touchable-opacity {:on-press #(reset! visible true)}
-          [rn/view {:style {:padding-horizontal 16
-                            :padding-vertical   8
-                            :border-radius      4
-                            :background-color   (:interactive-01 @colors/theme)}}
+          [rn/view
+           {:style {:padding-horizontal 16
+                    :padding-vertical   8
+                    :border-radius      4
+                    :background-color   (:interactive-01 @colors/theme)}}
            [quo/text {:color :secondary-inverse}
             (str "Open sheet: " @visible)]]]]
 
-        [quo/bottom-sheet (merge @state
-                                 {:visible?  @visible
-                                  :on-cancel #(reset! visible false)})
-         [rn/view {:style {:height          (if @scrollable 1200 400)
-                           :justify-content :center
-                           :align-items     :center}}
+        [quo/bottom-sheet
+         (merge @state
+                {:visible?  @visible
+                 :on-cancel #(reset! visible false)})
+         [rn/view
+          {:style {:height          (if @scrollable 1200 400)
+                   :justify-content :center
+                   :align-items     :center}}
           [rn/touchable-opacity {:on-press #(reset! visible false)}
            [quo/text {:color :link} "Close"]]
-          [rn/touchable-opacity {:on-press #(swap! scrollable not)
-                                 :style    {:padding-vertical 16}}
+          [rn/touchable-opacity
+           {:on-press #(swap! scrollable not)
+            :style    {:padding-vertical 16}}
            [quo/text {:color :link} "Toggle size"]]
           [quo/text "Hello world!"]]]]])))
 
-(defn preview []
+(defn preview
+  []
   (fn []
-    [rn/view {:background-color (:ui-background @colors/theme)
-              :flex             1}
-     [rn/flat-list {:flex                      1
-                    :keyboardShouldPersistTaps :always
-                    :header                    [cool-preview]
-                    :key-fn                    str}]]))
+    [rn/view
+     {:background-color (:ui-background @colors/theme)
+      :flex             1}
+     [rn/flat-list
+      {:flex                      1
+       :keyboardShouldPersistTaps :always
+       :header                    [cool-preview]
+       :key-fn                    str}]]))

src/quo/previews/button.cljs

@@ -1,44 +1,46 @@
 (ns quo.previews.button
-  (:require [reagent.core :as reagent]
-            [quo.core :as quo]
-            [quo.react-native :as rn]
+  (:require [quo.core :as quo]
             [quo.design-system.colors :as colors]
-            [quo.previews.preview :as preview]))
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
-(def descriptor [{:label   "Type:"
-                  :key     :type
-                  :type    :select
-                  :options [{:key   :primary
-                             :value "Primary"}
-                            {:key   :secondary
-                             :value "Secondary"}
-                            {:key   :icon
-                             :value "Icon"}]}
-                 {:label   "Theme:"
-                  :key     :theme
-                  :type    :select
-                  :options [{:key   :main
-                             :value "Main"}
-                            {:key   :negative
-                             :value "Negative"}
-                            {:key   :positive
-                             :value "Positive"}
-                            {:key   :accent
-                             :value "Accent"}]}
-                 {:label "After icon:"
-                  :key   :after
-                  :type  :boolean}
-                 {:label "Before icon:"
-                  :key   :before
-                  :type  :boolean}
-                 {:label "Disabled:"
-                  :key   :disabled
-                  :type  :boolean}
-                 {:label "Label"
-                  :key   :label
-                  :type  :text}])
+(def descriptor
+  [{:label   "Type:"
+    :key     :type
+    :type    :select
+    :options [{:key   :primary
+               :value "Primary"}
+              {:key   :secondary
+               :value "Secondary"}
+              {:key   :icon
+               :value "Icon"}]}
+   {:label   "Theme:"
+    :key     :theme
+    :type    :select
+    :options [{:key   :main
+               :value "Main"}
+              {:key   :negative
+               :value "Negative"}
+              {:key   :positive
+               :value "Positive"}
+              {:key   :accent
+               :value "Accent"}]}
+   {:label "After icon:"
+    :key   :after
+    :type  :boolean}
+   {:label "Before icon:"
+    :key   :before
+    :type  :boolean}
+   {:label "Disabled:"
+    :key   :disabled
+    :type  :boolean}
+   {:label "Label"
+    :key   :label
+    :type  :text}])
 
-(defn cool-preview []
+(defn cool-preview
+  []
   (let [state  (reagent/atom {:label "Press Me"
                               :type  :primary
                               :theme :main
@@ -48,28 +50,36 @@
         before (reagent/cursor state [:before])
         after  (reagent/cursor state [:after])]
     (fn []
-      [rn/view {:margin-bottom 50
-                :padding       16}
+      [rn/view
+       {:margin-bottom 50
+        :padding       16}
        [rn/view {:flex 1}
         [preview/customizer state descriptor]]
-       [rn/view {:padding-vertical 16
-                 :flex-direction   :row
-                 :justify-content  :center}
-        [quo/button (merge (dissoc @state
-                                   :theme :before :after)
-                           {:on-press #(println "Hello world!")}
-                           (when @theme
-                             {:theme @theme})
-                           (when @before
-                             {:before :main-icons/back})
-                           (when @after
-                             {:after :main-icons/next}))
+       [rn/view
+        {:padding-vertical 16
+         :flex-direction   :row
+         :justify-content  :center}
+        [quo/button
+         (merge (dissoc @state
+                        :theme
+                        :before
+                        :after)
+                {:on-press #(println "Hello world!")}
+                (when @theme
+                  {:theme @theme})
+                (when @before
+                  {:before :main-icons/back})
+                (when @after
+                  {:after :main-icons/next}))
          @label]]])))
 
-(defn preview-button []
-  [rn/view {:background-color (:ui-background @colors/theme)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :key-fn                    str}]])
+(defn preview-button
+  []
+  [rn/view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :key-fn                    str}]])

src/quo/previews/controls.cljs

@@ -1,44 +1,55 @@
 (ns quo.previews.controls
-  (:require [reagent.core :as reagent]
-            [quo.core :as quo]
+  (:require [quo.core :as quo]
+            [quo.design-system.colors :as colors]
             [quo.react-native :as rn]
-            [quo.design-system.colors :as colors]))
+            [reagent.core :as reagent]))
 
-(defn preview []
+(defn preview
+  []
   (let [switch-state   (reagent/atom true)
         radio-state    (reagent/atom true)
         checkbox-state (reagent/atom true)]
     (fn []
-      [rn/view {:background-color (:ui-background @colors/theme)
-                :flex             1}
-       [rn/view {:padding         20
-                 :flex-direction  :row
-                 :align-items     :center
-                 :justify-content :space-between}
-        [rn/touchable-opacity {:style    {:margin-vertical 10
-                                          :padding         10}
-                               :on-press #(swap! switch-state not)}
+      [rn/view
+       {:background-color (:ui-background @colors/theme)
+        :flex             1}
+       [rn/view
+        {:padding         20
+         :flex-direction  :row
+         :align-items     :center
+         :justify-content :space-between}
+        [rn/touchable-opacity
+         {:style    {:margin-vertical 10
+                     :padding         10}
+          :on-press #(swap! switch-state not)}
          [quo/text (str "Switch state: " @switch-state)]]
-        [quo/switch {:value     @switch-state
-                     :on-change #(reset! switch-state %)}]]
+        [quo/switch
+         {:value     @switch-state
+          :on-change #(reset! switch-state %)}]]
 
-       [rn/view {:padding         20
-                 :flex-direction  :row
-                 :align-items     :center
-                 :justify-content :space-between}
-        [rn/touchable-opacity {:style    {:margin-vertical 10
-                                          :padding         10}
-                               :on-press #(swap! radio-state not)}
+       [rn/view
+        {:padding         20
+         :flex-direction  :row
+         :align-items     :center
+         :justify-content :space-between}
+        [rn/touchable-opacity
+         {:style    {:margin-vertical 10
+                     :padding         10}
+          :on-press #(swap! radio-state not)}
          [quo/text (str "Radio state: " @radio-state)]]
-        [quo/radio {:value     @radio-state
-                    :on-change #(reset! radio-state %)}]]
-       [rn/view {:padding         20
-                 :flex-direction  :row
-                 :align-items     :center
-                 :justify-content :space-between}
-        [rn/touchable-opacity {:style    {:margin-vertical 10
-                                          :padding         10}
-                               :on-press #(swap! checkbox-state not)}
+        [quo/radio
+         {:value     @radio-state
+          :on-change #(reset! radio-state %)}]]
+       [rn/view
+        {:padding         20
+         :flex-direction  :row
+         :align-items     :center
+         :justify-content :space-between}
+        [rn/touchable-opacity
+         {:style    {:margin-vertical 10
+                     :padding         10}
+          :on-press #(swap! checkbox-state not)}
          [quo/text (str "Checkbox state: " @checkbox-state)]]
-        [quo/checkbox {:value     @checkbox-state
-                       :on-change #(reset! checkbox-state %)}]]])))
+        [quo/checkbox
+         {:value     @checkbox-state
+          :on-change #(reset! checkbox-state %)}]]])))

src/quo/previews/header.cljs

@@ -1,44 +1,51 @@
 (ns quo.previews.header
   (:require [quo.core :as quo]
-            [quo.react-native :as rn]
-            [quo.design-system.colors :as colors])
+            [quo.design-system.colors :as colors]
+            [quo.react-native :as rn])
   (:require-macros [quo.previews.preview :as preview]))
 
-(def accessories [nil
-                  [{:icon     :main-icons/close
-                    :on-press identity}]
-                  [{:icon     :main-icons/close
-                    :on-press identity}
-                   {:icon     :main-icons/add
-                    :on-press identity}]
-                  [{:icon     :main-icons/add
-                    :on-press identity}
-                   {:label    "Text"
-                    :on-press identity}]
-                  [{:label    "Text"
-                    :on-press identity}]])
+(def accessories
+  [nil
+   [{:icon     :main-icons/close
+     :on-press identity}]
+   [{:icon     :main-icons/close
+     :on-press identity}
+    {:icon     :main-icons/add
+     :on-press identity}]
+   [{:icon     :main-icons/add
+     :on-press identity}
+    {:label    "Text"
+     :on-press identity}]
+   [{:label    "Text"
+     :on-press identity}]])
 
-(def all-props (preview/list-comp [left-accessories  accessories
-                                   right-accessories accessories
-                                   title             [nil "This is a title" "This is a very long super title"]
-                                   subtitle          [nil "This is a subtitle"]
-                                   title-align       [:left :center]]
-                                  {:left-accessories  left-accessories
-                                   :right-accessories right-accessories
-                                   :title             title
-                                   :subtitle          subtitle
-                                   :title-align       title-align}))
+(def all-props
+  (preview/list-comp [left-accessories  accessories
+                      right-accessories accessories
+                      title             [nil "This is a title" "This is a very long super title"]
+                      subtitle          [nil "This is a subtitle"]
+                      title-align       [:left :center]]
+    {:left-accessories  left-accessories
+     :right-accessories right-accessories
+     :title             title
+     :subtitle          subtitle
+     :title-align       title-align}))
 
-(defn render-item [props]
-  [rn/view {:border-bottom-color "#EEF2F5"
-            :border-bottom-width 2}
+(defn render-item
+  [props]
+  [rn/view
+   {:border-bottom-color "#EEF2F5"
+    :border-bottom-width 2}
    [quo/header props]])
 
-(defn preview-header []
-  [rn/view {:background-color (:ui-background @colors/theme)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :data                      all-props
-                  :render-fn                 render-item
-                  :key-fn                    str}]])
+(defn preview-header
+  []
+  [rn/view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :data                      all-props
+     :render-fn                 render-item
+     :key-fn                    str}]])

src/quo/previews/icons.cljs

@@ -3,9 +3,11 @@
             [quo.react-native :as rn]
             [status-im.ui.components.icons.icons :as icons]))
 
-(defn preview []
-  [rn/scroll-view {:background-color (:ui-background @colors/theme)
-                   :flex             1}
+(defn preview
+  []
+  [rn/scroll-view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
    (for [i (keys icons/icons)]
      [rn/view {:flex-direction :row}
       [icons/icon (keyword i)]

src/quo/previews/lists.cljs

@@ -1,87 +1,94 @@
 (ns quo.previews.lists
-  (:require [reagent.core :as reagent]
-            [quo.core :as quo]
-            [quo.react-native :as rn]
+  (:require [quo.core :as quo]
             [quo.design-system.colors :as colors]
-            [quo.previews.preview :as preview]))
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
 (def all-props (preview/list-comp [] {}))
 
-(defn avatar []
-  [rn/view {:border-radius    20
-            :width            40
-            :height           40
-            :justify-content  :center
-            :align-items      :center
-            :background-color :red}
-   [quo/text {:weight :bold
-              :size   :large}
+(defn avatar
+  []
+  [rn/view
+   {:border-radius    20
+    :width            40
+    :height           40
+    :justify-content  :center
+    :align-items      :center
+    :background-color :red}
+   [quo/text
+    {:weight :bold
+     :size   :large}
     "T"]])
 
-(defn icon-element [type]
+(defn icon-element
+  [type]
   (case type
     :icon      :main-icons/add-contact
     :component [avatar]
     nil))
 
-(def descriptor [{:label   "Accessory:"
-                  :key     :accessory
-                  :type    :select
-                  :options [{:key   :radio
-                             :value "Radio"}
-                            {:key   :checkbox
-                             :value "Checkbox"}
-                            {:key   :switch
-                             :value "Switch"}
-                            {:key   :text
-                             :value "Text"}
-                            {:key   :default
-                             :value "Default"}]}
-                 {:label   "Size:"
-                  :key     :size
-                  :type    :select
-                  :options [{:key   :small
-                             :value "Small"}
-                            {:key   :default
-                             :value "Default"}]}
-                 {:label   "Icon:"
-                  :key     :icon
-                  :type    :select
-                  :options [{:key   :icon
-                             :value "Icon"}
-                            {:key   :component
-                             :value "Component"}]}
-                 {:label   "Theme:"
-                  :key     :theme
-                  :type    :select
-                  :options [{:key   :main
-                             :value "Main"}
-                            {:key   :accent
-                             :value "Accent"}
-                            {:key   :negative
-                             :value "Negative"}
-                            {:key   :positive
-                             :value "Positive"}]}
-                 {:label "Selectable"
-                  :key   :selectable
-                  :type  :boolean}
-                 {:label "Chevron"
-                  :key   :chevron
-                  :type  :boolean}
-                 {:label "Disabled:"
-                  :key   :disabled
-                  :type  :boolean}
-                 {:label "Title"
-                  :key   :title
-                  :type  :text}
-                 {:label "Subtitle"
-                  :key   :subtitle
-                  :type  :text}])
+(def descriptor
+  [{:label   "Accessory:"
+    :key     :accessory
+    :type    :select
+    :options [{:key   :radio
+               :value "Radio"}
+              {:key   :checkbox
+               :value "Checkbox"}
+              {:key   :switch
+               :value "Switch"}
+              {:key   :text
+               :value "Text"}
+              {:key   :default
+               :value "Default"}]}
+   {:label   "Size:"
+    :key     :size
+    :type    :select
+    :options [{:key   :small
+               :value "Small"}
+              {:key   :default
+               :value "Default"}]}
+   {:label   "Icon:"
+    :key     :icon
+    :type    :select
+    :options [{:key   :icon
+               :value "Icon"}
+              {:key   :component
+               :value "Component"}]}
+   {:label   "Theme:"
+    :key     :theme
+    :type    :select
+    :options [{:key   :main
+               :value "Main"}
+              {:key   :accent
+               :value "Accent"}
+              {:key   :negative
+               :value "Negative"}
+              {:key   :positive
+               :value "Positive"}]}
+   {:label "Selectable"
+    :key   :selectable
+    :type  :boolean}
+   {:label "Chevron"
+    :key   :chevron
+    :type  :boolean}
+   {:label "Disabled:"
+    :key   :disabled
+    :type  :boolean}
+   {:label "Title"
+    :key   :title
+    :type  :text}
+   {:label "Subtitle"
+    :key   :subtitle
+    :type  :text}])
 
-(defn render-item [_]
-  [rn/view {:style {:padding-vertical   24}}])
+(defn render-item
+  [_]
+  [rn/view {:style {:padding-vertical 24}}])
 
-(defn cool-preview []
+(defn cool-preview
+  []
   (let [state      (reagent/atom {:title  "Title"
                                   :active false})
         icon       (reagent/cursor state [:icon])
@@ -92,19 +99,23 @@
        [rn/view {:padding-horizontal 16}
         [preview/customizer state descriptor]]
        [rn/view {:padding-vertical 16}
-        [quo/list-item (merge (dissoc @state :active :selectable)
-                              (when @selectable
-                                {:active   @active
-                                 :on-press #(swap! active not)})
-                              {:accessory-text "Accessory"
-                               :icon           (icon-element @icon)})]]])))
+        [quo/list-item
+         (merge (dissoc @state :active :selectable)
+                (when @selectable
+                  {:active   @active
+                   :on-press #(swap! active not)})
+                {:accessory-text "Accessory"
+                 :icon           (icon-element @icon)})]]])))
 
-(defn preview []
-  [rn/view {:background-color (:ui-background @colors/theme)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :data                      all-props
-                  :render-fn                 render-item
-                  :key-fn                    str}]])
+(defn preview
+  []
+  [rn/view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :data                      all-props
+     :render-fn                 render-item
+     :key-fn                    str}]])

src/quo/previews/main.cljs

@@ -1,75 +1,83 @@
 (ns quo.previews.main
-  (:require [quo.previews.header :as header]
+  (:require [quo.core :as quo]
+            [quo.design-system.colors :as colors]
+            [quo.previews.bottom-sheet :as bottom-sheet]
+            [quo.previews.button :as button]
+            [quo.previews.controls :as controls]
+            [quo.previews.header :as header]
+            [quo.previews.icons :as icons]
+            [quo.previews.lists :as lists]
             [quo.previews.text :as text]
             [quo.previews.text-input :as text-input]
             [quo.previews.tooltip :as tooltip]
-            [quo.previews.button :as button]
-            [quo.previews.lists :as lists]
-            [quo.previews.bottom-sheet :as bottom-sheet]
-            [quo.previews.controls :as controls]
             [quo.react-native :as rn]
-            [quo.core :as quo]
-            [quo.design-system.colors :as colors]
             [quo.theme :as theme]
-            [quo.previews.icons :as icons]
             [re-frame.core :as re-frame]))
 
-(def screens [{:name      :texts
-               :insets    {:top false}
-               :component text/preview-text}
-              {:name      :tooltip
-               :insets    {:top false}
-               :component tooltip/preview-tooltip}
-              {:name      :text-input
-               :insets    {:top false}
-               :component text-input/preview-text}
-              {:name      :headers
-               :insets    {:top false}
-               :component header/preview-header}
-              {:name      :button
-               :insets    {:top false}
-               :component button/preview-button}
-              {:name      :lists
-               :instes    {:top false}
-               :component lists/preview}
-              {:name      :bottom-sheet
-               :insets    {:top false}
-               :component bottom-sheet/preview}
-              {:name      :controls
-               :insets    {:top false}
-               :component controls/preview}
-              {:name      :icons
-               :insets    {:top false}
-               :component icons/preview}])
+(def screens
+  [{:name      :texts
+    :insets    {:top false}
+    :component text/preview-text}
+   {:name      :tooltip
+    :insets    {:top false}
+    :component tooltip/preview-tooltip}
+   {:name      :text-input
+    :insets    {:top false}
+    :component text-input/preview-text}
+   {:name      :headers
+    :insets    {:top false}
+    :component header/preview-header}
+   {:name      :button
+    :insets    {:top false}
+    :component button/preview-button}
+   {:name      :lists
+    :instes    {:top false}
+    :component lists/preview}
+   {:name      :bottom-sheet
+    :insets    {:top false}
+    :component bottom-sheet/preview}
+   {:name      :controls
+    :insets    {:top false}
+    :component controls/preview}
+   {:name      :icons
+    :insets    {:top false}
+    :component icons/preview}])
 
-(defn theme-switcher []
-  [rn/view {:style {:flex-direction   :row
-                    :margin-vertical  8
-                    :border-radius    4
-                    :background-color (:ui-01 @colors/theme)
-                    :border-width     1
-                    :border-color     (:ui-02 @colors/theme)}}
-   [rn/touchable-opacity {:style    {:padding         8
-                                     :flex            1
-                                     :justify-content :center
-                                     :align-items     :center}
-                          :on-press #(theme/set-theme :light)}
+(defn theme-switcher
+  []
+  [rn/view
+   {:style {:flex-direction   :row
+            :margin-vertical  8
+            :border-radius    4
+            :background-color (:ui-01 @colors/theme)
+            :border-width     1
+            :border-color     (:ui-02 @colors/theme)}}
+   [rn/touchable-opacity
+    {:style    {:padding         8
+                :flex            1
+                :justify-content :center
+                :align-items     :center}
+     :on-press #(theme/set-theme :light)}
     [quo/text "Set light theme"]]
-   [rn/view {:width            1
-             :margin-vertical  4
-             :background-color (:ui-02 @colors/theme)}]
-   [rn/touchable-opacity {:style    {:padding         8
-                                     :flex            1
-                                     :justify-content :center
-                                     :align-items     :center}
-                          :on-press #(theme/set-theme :dark)}
+   [rn/view
+    {:width            1
+     :margin-vertical  4
+     :background-color (:ui-02 @colors/theme)}]
+   [rn/touchable-opacity
+    {:style    {:padding         8
+                :flex            1
+                :justify-content :center
+                :align-items     :center}
+     :on-press #(theme/set-theme :dark)}
     [quo/text "Set dark theme"]]])
 
-(defn main-screen []
-  [rn/scroll-view {:flex               1
-                   :padding-vertical   8
-                   :padding-horizontal 16
-                   :background-color   (:ui-background @colors/theme)}
+(defn main-screen
+  []
+  [rn/scroll-view
+   {:flex               1
+    :padding-vertical   8
+    :padding-horizontal 16
+    :background-color   (:ui-background @colors/theme)}
    [theme-switcher]
    [rn/view
     (for [{:keys [name]} screens]
@@ -78,6 +86,7 @@
        [rn/view {:style {:padding-vertical 8}}
         [quo/text (str "Preview " name)]]])]])
 
-(def main-screens [{:name      :quo-preview
-                    :insets    {:top false}
-                    :component main-screen}])
+(def main-screens
+  [{:name      :quo-preview
+    :insets    {:top false}
+    :component main-screen}])

src/quo/previews/preview.clj

@@ -1,15 +1,17 @@
 (ns quo.previews.preview)
 
-(defn descriptor->values [{:keys [key options type]}]
+(defn descriptor->values
+  [{:keys [key options type]}]
   {key (case type
          :boolean [false true]
          :text    [nil "Just simple text"] ; NOTE(Ferossgp): add example with long text?
          :select  (mapv :key options))})
 
-(defmacro list-comp [[binding seq-expr & bindings] body-expr]
+(defmacro list-comp
+  [[binding seq-expr & bindings] body-expr]
   (cond (not binding)
         `(list ~body-expr)
 
         :else
         `(mapcat (fn [~binding] (list-comp ~bindings ~body-expr))
-                 ~seq-expr)))
+          ~seq-expr)))

src/quo/previews/preview.cljs

@@ -1,23 +1,26 @@
 (ns quo.previews.preview
-  (:require [reagent.core :as reagent]
+  (:require [quo.core :as quo]
+            [quo.design-system.colors :as colors]
             [quo.react-native :as rn]
-            [quo.core :as quo]
-            [quo.design-system.colors :as colors])
+            [reagent.core :as reagent])
   (:require-macros quo.previews.preview))
 
-(def container {:flex-direction   :row
-                :padding-vertical 8
-                :flex             1
-                :align-items      :center})
+(def container
+  {:flex-direction   :row
+   :padding-vertical 8
+   :flex             1
+   :align-items      :center})
 
-(defn touchable-style []
+(defn touchable-style
+  []
   {:flex               1
    :align-items        :center
    :justify-content    :center
    :padding-horizontal 16
    :height             44})
 
-(defn select-style []
+(defn select-style
+  []
   {:flex               1
    :flex-direction     :row
    :align-items        :center
@@ -28,7 +31,8 @@
    :border-width       1
    :border-color       (:ui-02 @colors/theme)})
 
-(defn select-option-style [selected]
+(defn select-option-style
+  [selected]
   (merge (select-style)
          {:margin-vertical 8
           :justify-content :center}
@@ -36,23 +40,27 @@
            {:background-color (:interactive-02 @colors/theme)}
            {:background-color (:ui-01 @colors/theme)})))
 
-(def label-style {:flex          0.4
-                  :padding-right 8})
+(def label-style
+  {:flex          0.4
+   :padding-right 8})
 
-(defn label-view [state label]
+(defn label-view
+  [state label]
   [rn/view {:style label-style}
    [quo/text
     (when-let [label-color (:preview-label-color @state)]
       {:style {:color label-color}})
     label]])
 
-(defn modal-container []
+(defn modal-container
+  []
   {:flex               1
    :justify-content    :center
    :padding-horizontal 24
    :background-color   "rgba(0,0,0,0.4)"})
 
-(defn modal-view []
+(defn modal-view
+  []
   {:padding-horizontal 16
    :padding-vertical   8
    :border-radius      8
@@ -64,21 +72,25 @@
   (let [state* (reagent/cursor state [key])]
     [rn/view {:style container}
      [label-view state label]
-     [rn/view {:style {:flex-direction   :row
-                       :flex             0.6
-                       :border-radius    4
-                       :background-color (:ui-01 @colors/theme)
-                       :border-width     1
-                       :border-color     (:ui-02 @colors/theme)}}
-      [rn/touchable-opacity {:style    (touchable-style)
-                             :on-press #(reset! state* true)}
-       [quo/text {:color (if  @state* :link :secondary)}
+     [rn/view
+      {:style {:flex-direction   :row
+               :flex             0.6
+               :border-radius    4
+               :background-color (:ui-01 @colors/theme)
+               :border-width     1
+               :border-color     (:ui-02 @colors/theme)}}
+      [rn/touchable-opacity
+       {:style    (touchable-style)
+        :on-press #(reset! state* true)}
+       [quo/text {:color (if @state* :link :secondary)}
         "True"]]
-      [rn/view {:width            1
-                :margin-vertical  4
-                :background-color (:ui-02 @colors/theme)}]
-      [rn/touchable-opacity {:style    (touchable-style)
-                             :on-press #(reset! state* false)}
+      [rn/view
+       {:width            1
+        :margin-vertical  4
+        :background-color (:ui-02 @colors/theme)}]
+      [rn/touchable-opacity
+       {:style    (touchable-style)
+        :on-press #(reset! state* false)}
        [quo/text {:color (if (not @state*) :link :secondary)}
         "False"]]]]))
 
@@ -88,20 +100,22 @@
     [rn/view {:style container}
      [label-view state label]
      [rn/view {:style {:flex 0.6}}
-      [quo/text-input {:value          @state*
-                       :show-cancel    false
-                       :style          {:border-radius 4
-                                        :border-width  1
-                                        :border-color  (:ui-02 @colors/theme)}
-                       :on-change-text #(do
-                                          (reset! state* %)
-                                          (reagent/flush))}]]]))
+      [quo/text-input
+       {:value          @state*
+        :show-cancel    false
+        :style          {:border-radius 4
+                         :border-width  1
+                         :border-color  (:ui-02 @colors/theme)}
+        :on-change-text #(do
+                           (reset! state* %)
+                           (reagent/flush))}]]]))
 
 (defn value-for-key
   [id v]
   (:value (first (filter #(= (:key %) id) v))))
 
-(defn customizer-select []
+(defn customizer-select
+  []
   (let [open (reagent/atom nil)]
     (fn [{:keys [label key state options]}]
       (let [state*   (reagent/cursor state [key])
@@ -109,54 +123,63 @@
         [rn/view {:style container}
          [label-view state label]
          [rn/view {:style {:flex 0.6}}
-          [rn/modal {:visible              @open
-                     :on-request-close     #(reset! open false)
-                     :statusBarTranslucent true
-                     :transparent          true
-                     :animation            :slide}
+          [rn/modal
+           {:visible              @open
+            :on-request-close     #(reset! open false)
+            :statusBarTranslucent true
+            :transparent          true
+            :animation            :slide}
            [rn/view {:style (modal-container)}
             [rn/view {:style (modal-view)}
              [rn/scroll-view
               (doall
                (for [{:keys [key value]} options]
                  ^{:key key}
-                 [rn/touchable-opacity {:style    (select-option-style (= @state* key))
-                                        :on-press #(do
-                                                     (reset! open false)
-                                                     (reset! state* key))}
+                 [rn/touchable-opacity
+                  {:style    (select-option-style (= @state* key))
+                   :on-press #(do
+                                (reset! open false)
+                                (reset! state* key))}
                   [quo/text {:color (if (= @state* key) :link :secondary)}
                    value]]))
               [rn/view {:flex-direction :row}
-               [rn/touchable-opacity {:style    (select-option-style false)
-                                      :on-press #(do
-                                                   (reset! state* nil)
-                                                   (reset! open false))}
+               [rn/touchable-opacity
+                {:style    (select-option-style false)
+                 :on-press #(do
+                              (reset! state* nil)
+                              (reset! open false))}
                 [quo/text "Clear"]]
                [rn/view {:width 16}]
-               [rn/touchable-opacity {:style    (select-option-style false)
-                                      :on-press #(reset! open false)}
+               [rn/touchable-opacity
+                {:style    (select-option-style false)
+                 :on-press #(reset! open false)}
                 [quo/text "Close"]]]]]]]
 
-          [rn/touchable-opacity {:style    (select-style)
-                                 :on-press #(reset! open true)}
+          [rn/touchable-opacity
+           {:style    (select-style)
+            :on-press #(reset! open true)}
            (if selected
              [quo/text {:color :link} selected]
              [quo/text "Select option"])
-           [rn/view {:position        :absolute
-                     :right           16
-                     :top             0
-                     :bottom          0
-                     :justify-content :center}
+           [rn/view
+            {:position        :absolute
+             :right           16
+             :top             0
+             :bottom          0
+             :justify-content :center}
             [quo/text "↓"]]]]]))))
 
-(defn customizer [state descriptors]
-  [rn/view {:style              {:flex 1}
-            :padding-horizontal 16}
+(defn customizer
+  [state descriptors]
+  [rn/view
+   {:style              {:flex 1}
+    :padding-horizontal 16}
    (doall
     (for [{:keys [key type]
-           :as   desc} descriptors
-          :let         [descriptor (merge desc
-                                          {:state state})]]
+           :as   desc}
+          descriptors
+          :let [descriptor (merge desc
+                                  {:state state})]]
       ^{:key key}
       [:<>
        (case type

src/quo/previews/text.cljs

@@ -1,89 +1,99 @@
 (ns quo.previews.text
-  (:require [reagent.core :as reagent]
+  (:require [quo.animated :as animated]
             [quo.core :as quo]
-            [quo.animated :as animated]
-            [quo.react-native :as rn]
             [quo.design-system.colors :as colors]
-            [quo.previews.preview :as preview]))
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
-(def all-props (preview/list-comp [size   [:tiny :small :base :large :x-large :xx-large]
-                                   weight [:regular :medium :semi-bold :bold :monospace]]
-                                  {:weight weight
-                                   :size   size}))
+(def all-props
+  (preview/list-comp [size   [:tiny :small :base :large :x-large :xx-large]
+                      weight [:regular :medium :semi-bold :bold :monospace]]
+    {:weight weight
+     :size   size}))
 
-(def descriptor [{:label   "Size:"
-                  :key     :size
-                  :type    :select
-                  :options [{:key   :tiny
-                             :value "Tiny"}
-                            {:key   :small
-                             :value "Small"}
-                            {:key   :base
-                             :value "Base"}
-                            {:key   :large
-                             :value "Large"}
-                            {:key   :x-large
-                             :value "X-Large"}
-                            {:key   :xx-large
-                             :value "XX-Large"}]}
-                 {:label   "Weight:"
-                  :key     :weight
-                  :type    :select
-                  :options [{:key   :regular
-                             :value "Regular"}
-                            {:key   :medium
-                             :value "Medium"}
-                            {:key   :semi-bold
-                             :value "Semi-bold"}
-                            {:key   :bold
-                             :value "Bold"}
-                            {:key   :monospace
-                             :value "Monospace"}]}
-                 {:label   "Color:"
-                  :key     :color
-                  :type    :select
-                  :options [{:key   :main
-                             :value "main"}
-                            {:key   :secondary
-                             :value "secondary"}
-                            {:key   :secondary-inverse
-                             :value "secondary-inverse"}
-                            {:key   :link
-                             :value "link"}
-                            {:key   :negative
-                             :value "negative"}
-                            {:key   :positive
-                             :value "positive"}]}
-                 {:label "Animated:"
-                  :key   :animated?
-                  :type  :boolean}])
+(def descriptor
+  [{:label   "Size:"
+    :key     :size
+    :type    :select
+    :options [{:key   :tiny
+               :value "Tiny"}
+              {:key   :small
+               :value "Small"}
+              {:key   :base
+               :value "Base"}
+              {:key   :large
+               :value "Large"}
+              {:key   :x-large
+               :value "X-Large"}
+              {:key   :xx-large
+               :value "XX-Large"}]}
+   {:label   "Weight:"
+    :key     :weight
+    :type    :select
+    :options [{:key   :regular
+               :value "Regular"}
+              {:key   :medium
+               :value "Medium"}
+              {:key   :semi-bold
+               :value "Semi-bold"}
+              {:key   :bold
+               :value "Bold"}
+              {:key   :monospace
+               :value "Monospace"}]}
+   {:label   "Color:"
+    :key     :color
+    :type    :select
+    :options [{:key   :main
+               :value "main"}
+              {:key   :secondary
+               :value "secondary"}
+              {:key   :secondary-inverse
+               :value "secondary-inverse"}
+              {:key   :link
+               :value "link"}
+              {:key   :negative
+               :value "negative"}
+              {:key   :positive
+               :value "positive"}]}
+   {:label "Animated:"
+    :key   :animated?
+    :type  :boolean}])
 
-(defn render-item [props]
-  [rn/view {:style {:padding-vertical   24
-                    :padding-horizontal 16}}
+(defn render-item
+  [props]
+  [rn/view
+   {:style {:padding-vertical   24
+            :padding-horizontal 16}}
    [quo/text props
     (str "Text size " props " number 0 1x2")]])
 
-(defn cool-preview []
+(defn cool-preview
+  []
   (let [state     (reagent/atom {})
-        animation    (animated/value 0)]
+        animation (animated/value 0)]
     (fn []
-      [rn/view {:margin-bottom 50
-                :padding       16}
+      [rn/view
+       {:margin-bottom 50
+        :padding       16}
        [animated/code {:exec (animated/set animation (animated/loop* {:duration 1000}))}]
        [preview/customizer state descriptor]
        [rn/view {:padding-vertical 16}
-        [quo/text (merge @state
-                         (when (:animated? @state)
-                           {:opacity animation}))
+        [quo/text
+         (merge @state
+                (when (:animated? @state)
+                  {:opacity animation}))
          "This is a demo text 1 2 0 2x2 0x0"]]])))
 
-(defn preview-text []
-  [rn/view {:background-color (:ui-background @colors/theme)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :data                      all-props
-                  :render-fn                 render-item
-                  :key-fn                    str}]])
+(defn preview-text
+  []
+  [rn/view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :data                      all-props
+     :render-fn                 render-item
+     :key-fn                    str}]])

src/quo/previews/text_input.cljs

@@ -1,57 +1,62 @@
 (ns quo.previews.text-input
-  (:require [reagent.core :as reagent]
-            [quo.core :as quo]
-            [quo.react-native :as rn]
+  (:require [quo.core :as quo]
             [quo.design-system.colors :as colors]
-            [quo.previews.preview :as preview]))
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]))
 
-(def all-props (preview/list-comp [multiline     [false true]
-                                   label         [nil "Input label"]
-                                   default-value [nil "Test initial value"]
-                                   placeholder   [nil "Placeholder value"]
-                                   before        [nil {:icon :main-icons/search}]
-                                   after         [nil {:icon :main-icons/close}]
-                                   error         [nil "Something went wrong!"]
-                                   secure        [false true]
-                                   show-cancel   [false true]]
-                                  {:label             label
-                                   :default-value     default-value
-                                   :placeholder       placeholder
-                                   :multiline         multiline
-                                   :before            before
-                                   :after             after
-                                   :error             error
-                                   :show-cancel       show-cancel
-                                   :secure-text-entry secure}))
+(def all-props
+  (preview/list-comp [multiline     [false true]
+                      label         [nil "Input label"]
+                      default-value [nil "Test initial value"]
+                      placeholder   [nil "Placeholder value"]
+                      before        [nil {:icon :main-icons/search}]
+                      after         [nil {:icon :main-icons/close}]
+                      error         [nil "Something went wrong!"]
+                      secure        [false true]
+                      show-cancel   [false true]]
+    {:label             label
+     :default-value     default-value
+     :placeholder       placeholder
+     :multiline         multiline
+     :before            before
+     :after             after
+     :error             error
+     :show-cancel       show-cancel
+     :secure-text-entry secure}))
 
-(def descriptor [{:label "Multiline:"
-                  :key   :multiline
-                  :type  :boolean}
-                 {:label "Show cancel:"
-                  :key   :show-cancel
-                  :type  :boolean}
-                 {:label "Secure:"
-                  :key   :secure-text-entry
-                  :type  :boolean}
-                 {:label "After icon:"
-                  :key   :after
-                  :type  :boolean}
-                 {:label "Before icon:"
-                  :key   :before
-                  :type  :boolean}
-                 {:label "Show error:"
-                  :key   :error
-                  :type  :boolean}
-                 {:label "Label"
-                  :key   :label
-                  :type  :text}])
+(def descriptor
+  [{:label "Multiline:"
+    :key   :multiline
+    :type  :boolean}
+   {:label "Show cancel:"
+    :key   :show-cancel
+    :type  :boolean}
+   {:label "Secure:"
+    :key   :secure-text-entry
+    :type  :boolean}
+   {:label "After icon:"
+    :key   :after
+    :type  :boolean}
+   {:label "Before icon:"
+    :key   :before
+    :type  :boolean}
+   {:label "Show error:"
+    :key   :error
+    :type  :boolean}
+   {:label "Label"
+    :key   :label
+    :type  :text}])
 
-(defn render-item [props]
-  [rn/view {:style {:padding-horizontal 16
-                    :padding-vertical   24}}
+(defn render-item
+  [props]
+  [rn/view
+   {:style {:padding-horizontal 16
+            :padding-vertical   24}}
    [quo/text-input props]])
 
-(defn cool-preview []
+(defn cool-preview
+  []
   (let [state  (reagent/atom {:secure      false
                               :show-cancel false
                               :multiline   false
@@ -60,22 +65,27 @@
         after  (reagent/cursor state [:after])
         error  (reagent/cursor state [:error])]
     (fn []
-      [rn/view {:margin-bottom 50
-                :padding       16}
+      [rn/view
+       {:margin-bottom 50
+        :padding       16}
        [preview/customizer state descriptor]
-       [quo/text-input (merge @state
-                              {:default-value nil
-                               :placeholder   "I'm a cool placeholder"
-                               :before        (when @before {:icon :main-icons/search})
-                               :after         (when @after {:icon :main-icons/close})
-                               :error         (when @error "Something went wrong!")})]])))
+       [quo/text-input
+        (merge @state
+               {:default-value nil
+                :placeholder   "I'm a cool placeholder"
+                :before        (when @before {:icon :main-icons/search})
+                :after         (when @after {:icon :main-icons/close})
+                :error         (when @error "Something went wrong!")})]])))
 
-(defn preview-text []
-  [rn/view {:background-color (:ui-background @colors/theme)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :data                      all-props
-                  :render-fn                 render-item
-                  :key-fn                    str}]])
+(defn preview-text
+  []
+  [rn/view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :header                    [cool-preview]
+     :data                      all-props
+     :render-fn                 render-item
+     :key-fn                    str}]])

src/quo/previews/tooltip.cljs

@@ -1,30 +1,38 @@
 (ns quo.previews.tooltip
   (:require [quo.core :as quo]
-            [quo.react-native :as rn]
-            [quo.design-system.colors :as colors])
+            [quo.design-system.colors :as colors]
+            [quo.react-native :as rn])
   (:require-macros [quo.previews.preview :as preview]))
 
-(def all-props (preview/list-comp
-                [child [[quo/text {:size :small} "Simple text"]
-                        [quo/text {:color :negative
-                                   :size  :small}
-                         "Error text"]
-                        [rn/view {:width 100 :height 20 :background-color :red}]
-                        [quo/text "Just text, but long. Officia autem est repellendus ad quia exercitationem veniam."]]]
-                child))
+(def all-props
+  (preview/list-comp
+    [child [[quo/text {:size :small} "Simple text"]
+            [quo/text
+             {:color :negative
+              :size  :small}
+             "Error text"]
+            [rn/view {:width 100 :height 20 :background-color :red}]
+            [quo/text
+             "Just text, but long. Officia autem est repellendus ad quia exercitationem veniam."]]]
+    child))
 
-(defn render-item [children]
+(defn render-item
+  [children]
   [rn/view {:margin-vertical 50}
-   [rn/view {:height           20
-             :background-color "rgba(0,0,0,0.1)"}]
+   [rn/view
+    {:height           20
+     :background-color "rgba(0,0,0,0.1)"}]
    [quo/tooltip {}
     children]])
 
-(defn preview-tooltip []
-  [rn/view {:background-color (:ui-background @colors/theme)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :data                      all-props
-                  :render-fn                 render-item
-                  :key-fn                    str}]])
+(defn preview-tooltip
+  []
+  [rn/view
+   {:background-color (:ui-background @colors/theme)
+    :flex             1}
+   [rn/flat-list
+    {:flex                      1
+     :keyboardShouldPersistTaps :always
+     :data                      all-props
+     :render-fn                 render-item
+     :key-fn                    str}]])

src/quo/react.clj

@@ -1,9 +1,11 @@
 (ns quo.react)
 
-(defmacro maybe-js-deps [deps]
+(defmacro maybe-js-deps
+  [deps]
   `(if ~deps (into-array ~deps) js/undefined))
 
-(defmacro with-deps-check [[prev-deps] f deps]
+(defmacro with-deps-check
+  [[prev-deps] f deps]
   `(let [~prev-deps (quo.react/ref ~deps)]
      (when (not= @~prev-deps ~deps)
        (reset! ~prev-deps ~deps))

src/quo/react.cljs

@@ -2,12 +2,12 @@
   (:refer-clojure :exclude [ref])
   (:require ["react" :as react]
             [oops.core :refer [oget oset!]])
-  (:require-macros [quo.react :refer [with-deps-check
-                                      maybe-js-deps]]))
+  (:require-macros [quo.react :refer [with-deps-check maybe-js-deps]]))
 
 (def create-ref react/createRef)
 
-(defn current-ref [ref]
+(defn current-ref
+  [ref]
   (oget ref "current"))
 
 ;; Inspired from UIX, Rum and Rumext
@@ -16,33 +16,35 @@
   (oset! ref "current" val)
   val)
 
-(defn set-native-props [^js ref ^js props]
+(defn set-native-props
+  [^js ref ^js props]
   (when-let [curr-ref ^js (current-ref ref)]
     (.setNativeProps curr-ref props)))
 
 (deftype StateHook [value set-value]
   cljs.core/IHash
-  (-hash [o] (goog/getUid o))
+    (-hash [o] (goog/getUid o))
 
   cljs.core/IDeref
-  (-deref [_o]
-    value)
+    (-deref [_o]
+      value)
 
   cljs.core/IReset
-  (-reset! [_o new-value]
-    (set-value new-value))
+    (-reset! [_o new-value]
+      (set-value new-value))
 
   cljs.core/ISwap
-  (-swap! [_o f]
-    (set-value f))
-  (-swap! [_o f a]
-    (set-value #(f % a)))
-  (-swap! [_o f a b]
-    (set-value #(f % a b)))
-  (-swap! [_o f a b xs]
-    (set-value #(apply f % a b xs))))
+    (-swap! [_o f]
+      (set-value f))
+    (-swap! [_o f a]
+      (set-value #(f % a)))
+    (-swap! [_o f a b]
+      (set-value #(f % a b)))
+    (-swap! [_o f a b xs]
+      (set-value #(apply f % a b xs))))
 
-(defn state [value]
+(defn state
+  [value]
   (let [[value set-value] (react/useState value)
         sh                (react/useMemo #(StateHook. value set-value) #js [])]
     (react/useMemo (fn []
@@ -51,31 +53,33 @@
                      sh)
                    #js [value set-value])))
 
-(defn use-ref [val]
+(defn use-ref
+  [val]
   (let [ref (react/useRef val)]
     (reify
-      cljs.core/IHash
-      (-hash [_] (goog/getUid ref))
+     cljs.core/IHash
+       (-hash [_] (goog/getUid ref))
 
-      cljs.core/IDeref
-      (-deref [_]
-        (current-ref ref))
+     cljs.core/IDeref
+       (-deref [_]
+         (current-ref ref))
 
-      cljs.core/IReset
-      (-reset! [_ new-value]
-        (set-ref-val! ref new-value))
+     cljs.core/IReset
+       (-reset! [_ new-value]
+         (set-ref-val! ref new-value))
 
-      cljs.core/ISwap
-      (-swap! [_ f]
-        (-reset! ref (f (current-ref ref))))
-      (-swap! [_ f a]
-        (-reset! ref (f (current-ref ref) a)))
-      (-swap! [_ f a b]
-        (-reset! ref (f (current-ref ref) a b)))
-      (-swap! [_ f a b xs]
-        (-reset! ref (apply f (current-ref ref) a b xs))))))
+     cljs.core/ISwap
+       (-swap! [_ f]
+         (-reset! ref (f (current-ref ref))))
+       (-swap! [_ f a]
+         (-reset! ref (f (current-ref ref) a)))
+       (-swap! [_ f a b]
+         (-reset! ref (f (current-ref ref) a b)))
+       (-swap! [_ f a b xs]
+         (-reset! ref (apply f (current-ref ref) a b xs))))))
 
-(defn ref [value]
+(defn ref
+  [value]
   (let [vref (use-ref value)]
     (react/useMemo (fn [] vref) #js [])))
 
@@ -125,7 +129,8 @@
 
 (def memo react/memo)
 
-(defn get-children [^js children]
+(defn get-children
+  [^js children]
   (->> children
        (react/Children.toArray)
        (into [])))

src/quo/react_native.cljs

@@ -1,13 +1,13 @@
 (ns quo.react-native
-  (:require [reagent.core :as reagent]
+  (:require ["@react-native-community/hooks" :as hooks]
+            ["react-native" :as rn]
+            ["react-native-draggable-flatlist" :default DraggableFlatList]
+            ["react-native-hole-view" :refer (RNHoleView)]
+            ["react-native-navigation" :refer (Navigation)]
+            ["rn-emoji-keyboard" :refer (EmojiKeyboard)]
             [cljs-bean.core :as bean]
             [quo.platform :as platform]
-            ["react-native" :as rn]
-            ["@react-native-community/hooks" :as hooks]
-            ["react-native-navigation" :refer (Navigation)]
-            ["react-native-hole-view" :refer (RNHoleView)]
-            ["rn-emoji-keyboard" :refer (EmojiKeyboard)]
-            ["react-native-draggable-flatlist" :default DraggableFlatList]))
+            [reagent.core :as reagent]))
 
 (def hole-view (reagent/adapt-react-class RNHoleView))
 
@@ -25,7 +25,9 @@
 (def image (reagent/adapt-react-class (.-Image rn)))
 (def text (reagent/adapt-react-class (.-Text ^js rn)))
 
-(defn resolve-asset-source [uri] (js->clj (.resolveAssetSource ^js (.-Image ^js rn) uri) :keywordize-keys true))
+(defn resolve-asset-source
+  [uri]
+  (js->clj (.resolveAssetSource ^js (.-Image ^js rn) uri) :keywordize-keys true))
 
 (def scroll-view (reagent/adapt-react-class (.-ScrollView ^js rn)))
 (def modal (reagent/adapt-react-class (.-Modal ^js rn)))
@@ -42,11 +44,12 @@
 
 (.then (.constants Navigation)
        (fn [^js consts]
-         (reset! navigation-const {:top-bar-height (.-topBarHeight consts)
+         (reset! navigation-const {:top-bar-height     (.-topBarHeight consts)
                                    :bottom-tabs-height (.-bottomTabsHeight consts)
-                                   :status-bar-height (.-statusBarHeight consts)})))
+                                   :status-bar-height  (.-statusBarHeight consts)})))
 
-(defn keyboard-avoiding-view []
+(defn keyboard-avoiding-view
+  []
   (let [this  (reagent/current-component)
         props (reagent/props this)]
     (into [keyboard-avoiding-view-class
@@ -66,7 +69,8 @@
 
 (def pan-responder (.-PanResponder ^js rn))
 
-(defn create-pan-responder [opts]
+(defn create-pan-responder
+  [opts]
   (.create ^js pan-responder (clj->js opts)))
 
 (def animated (.-Animated rn))
@@ -79,82 +83,99 @@
 (def animated-view
   (reagent/adapt-react-class (.-View ^js animated)))
 
-(def ui-manager  (.-UIManager ^js rn))
+(def ui-manager (.-UIManager ^js rn))
 
 (def layout-animation (.-LayoutAnimation ^js rn))
 (def configure-next (.-configureNext ^js layout-animation))
 (def create-animation (.-create ^js layout-animation))
 
-(def layout-animation-presets {:ease-in-ease-out (-> ^js layout-animation .-Presets .-easeInEaseOut)
-                               :linear           (-> ^js layout-animation .-Presets .-linear)
-                               :spring           (-> ^js layout-animation .-Presets .-spring)})
+(def layout-animation-presets
+  {:ease-in-ease-out (-> ^js layout-animation .-Presets .-easeInEaseOut)
+   :linear           (-> ^js layout-animation .-Presets .-linear)
+   :spring           (-> ^js layout-animation .-Presets .-spring)})
 
-(def layout-animation-types {:spring           (-> ^js layout-animation .-Types .-spring)
-                             :linear           (-> ^js layout-animation .-Types .-linear)
-                             :ease-in-ease-out (-> ^js layout-animation .-Types .-easeInEaseOut)
-                             :ease-in          (-> ^js layout-animation .-Types .-easeIn)
-                             :ease-out         (-> ^js layout-animation .-Types .-easeOut)})
+(def layout-animation-types
+  {:spring           (-> ^js layout-animation .-Types .-spring)
+   :linear           (-> ^js layout-animation .-Types .-linear)
+   :ease-in-ease-out (-> ^js layout-animation .-Types .-easeInEaseOut)
+   :ease-in          (-> ^js layout-animation .-Types .-easeIn)
+   :ease-out         (-> ^js layout-animation .-Types .-easeOut)})
 
-(def layout-animation-properties {:opacity  (-> ^js layout-animation .-Properties .-opacity)
-                                  :scale-x  (-> ^js layout-animation .-Properties .-scaleX)
-                                  :scale-y  (-> ^js layout-animation .-Properties .-scaleY)
-                                  :scale-xy (-> ^js layout-animation .-Properties .-scaleXY)})
+(def layout-animation-properties
+  {:opacity  (-> ^js layout-animation .-Properties .-opacity)
+   :scale-x  (-> ^js layout-animation .-Properties .-scaleX)
+   :scale-y  (-> ^js layout-animation .-Properties .-scaleY)
+   :scale-xy (-> ^js layout-animation .-Properties .-scaleXY)})
 
-(def custom-animations {:ease-opacity-200 #js {:duration 200
-                                               :create   #js {:type     (:ease-in-ease-out layout-animation-types)
-                                                              :property (:opacity layout-animation-properties)}
-                                               :update   #js {:type     (:ease-in-ease-out layout-animation-types)
-                                                              :property (:opacity layout-animation-properties)}
-                                               :delete   #js {:type     (:ease-in-ease-out layout-animation-types)
-                                                              :property (:opacity layout-animation-properties)}}})
+(def custom-animations
+  {:ease-opacity-200 #js
+                      {:duration 200
+                       :create   #js
+                                  {:type     (:ease-in-ease-out layout-animation-types)
+                                   :property (:opacity layout-animation-properties)}
+                       :update   #js
+                                  {:type     (:ease-in-ease-out layout-animation-types)
+                                   :property (:opacity layout-animation-properties)}
+                       :delete   #js
+                                  {:type     (:ease-in-ease-out layout-animation-types)
+                                   :property (:opacity layout-animation-properties)}}})
 
 (defonce enable-layout-animations
-  (when platform/android?
-    (.setLayoutAnimationEnabledExperimental ^js ui-manager true)))
+         (when platform/android?
+           (.setLayoutAnimationEnabledExperimental ^js ui-manager true)))
 
 (def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js rn)))
 
 ;; Flat-list
 (def ^:private rn-flat-list (reagent/adapt-react-class (.-FlatList ^js rn)))
 
-(defn- wrap-render-fn [f render-data]
+(defn- wrap-render-fn
+  [f render-data]
   (fn [data]
     (reagent/as-element [f (.-item ^js data) (.-index ^js data)
                          (.-separators ^js data) render-data
                          (.-isActive ^js data) (.-drag ^js data)])))
 
-(defn- wrap-on-drag-end-fn [f]
+(defn- wrap-on-drag-end-fn
+  [f]
   (fn [data]
     (f (.-from ^js data) (.-to ^js data) (.-data ^js data))))
 
-(defn- wrap-key-fn [f]
+(defn- wrap-key-fn
+  [f]
   (fn [data index]
     {:post [(some? %)]}
     (f data index)))
 
 (defn base-list-props
-  [{:keys [key-fn render-fn empty-component header footer separator data render-data on-drag-end-fn] :as props}]
-  (merge {:data (to-array data)}
-         (when key-fn          {:keyExtractor (wrap-key-fn key-fn)})
-         (when render-fn       {:renderItem (wrap-render-fn render-fn render-data)})
-         (when separator       {:ItemSeparatorComponent (fn [] (reagent/as-element separator))})
-         (when empty-component {:ListEmptyComponent (fn [] (reagent/as-element empty-component))})
-         (when header          {:ListHeaderComponent (reagent/as-element header)})
-         (when footer          {:ListFooterComponent (reagent/as-element footer)})
-         (when on-drag-end-fn  {:onDragEnd (wrap-on-drag-end-fn on-drag-end-fn)})
-         (dissoc props :data :header :footer :empty-component :separator :render-fn :key-fn :on-drag-end-fn)))
+  [{:keys [key-fn render-fn empty-component header footer separator data render-data on-drag-end-fn]
+    :as   props}]
+  (merge
+   {:data (to-array data)}
+   (when key-fn {:keyExtractor (wrap-key-fn key-fn)})
+   (when render-fn {:renderItem (wrap-render-fn render-fn render-data)})
+   (when separator {:ItemSeparatorComponent (fn [] (reagent/as-element separator))})
+   (when empty-component {:ListEmptyComponent (fn [] (reagent/as-element empty-component))})
+   (when header {:ListHeaderComponent (reagent/as-element header)})
+   (when footer {:ListFooterComponent (reagent/as-element footer)})
+   (when on-drag-end-fn {:onDragEnd (wrap-on-drag-end-fn on-drag-end-fn)})
+   (dissoc props :data :header :footer :empty-component :separator :render-fn :key-fn :on-drag-end-fn)))
 
-(defn flat-list [props]
+(defn flat-list
+  [props]
   [rn-flat-list (base-list-props props)])
 
-(defn draggable-flat-list [props]
+(defn draggable-flat-list
+  [props]
   [rn-draggable-flatlist (base-list-props props)])
 
-(defn animated-flat-list [props]
+(defn animated-flat-list
+  [props]
   [animated-flat-list-class (base-list-props props)])
 ;; Hooks
 
-(defn use-window-dimensions []
+(defn use-window-dimensions
+  []
   (let [window (rn/useWindowDimensions)]
     {:font-scale (.-fontScale window)
      :height     (.-height ^js window)
@@ -163,12 +184,14 @@
 
 (def use-back-handler (.-useBackHandler hooks))
 
-(defn use-keyboard []
+(defn use-keyboard
+  []
   (let [kb (.useKeyboard hooks)]
     {:keyboard-shown  (.-keyboardShown ^js kb)
      :keyboard-height (.-keyboardHeight ^js kb)}))
 
-(defn use-layout []
+(defn use-layout
+  []
   (let [{:keys [onLayout x y height width]} (bean/bean (.useLayout hooks))]
     {:on-layout onLayout
      :x         x

src/quo/theme.cljs

@@ -4,13 +4,16 @@
 
 (def theme (reagent/atom nil))
 
-(defn dark? []
+(defn dark?
+  []
   (= :dark @theme))
 
-(defn get-theme []
+(defn get-theme
+  []
   @theme)
 
-(defn set-theme [value]
+(defn set-theme
+  [value]
   (reset! theme value)
   (reset! colors/theme (case value
                          :dark colors/dark-theme

src/quo2/components/avatars/account_avatar.cljs

@@ -1,14 +1,10 @@
 (ns quo2.components.avatars.account-avatar
-  (:require [react-native.core :as rn]
+  (:require [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icons]
-            [quo2.theme :as theme]))
+            [react-native.core :as rn]))
 
-(def icon-color-value
-  {:dark  (get-in colors/customization [:dark :purple])
-   :light (get-in colors/customization [:light :purple])})
-
-(defn get-border-radius [size]
+(defn get-border-radius
+  [size]
   (case size
     80 16
     48 12
@@ -16,7 +12,8 @@
     24 8
     20 6))
 
-(defn get-inner-icon-sizes [size]
+(defn get-inner-icon-sizes
+  [size]
   (case size
     80 36
     48 24
@@ -25,20 +22,20 @@
     20 11))
 
 (defn account-avatar
-  [{:keys [size icon]
-    :or   {size 80
-           icon :main-icons/placeholder}}]
-  (let [icon-color (if (theme/dark?)
-                     (:dark icon-color-value)
-                     (:light icon-color-value))
+  [{:keys [size icon color]
+    :or   {size  80
+           icon  :i/placeholder
+           color :purple}}]
+  (let [icon-color           (colors/custom-color-by-theme color 50 60)
         avatar-border-radius (get-border-radius size)
-        inner-icon-size (get-inner-icon-sizes size)]
-    [rn/view {:style {:width            size
-                      :background-color icon-color
-                      :height           size
-                      :border-radius    avatar-border-radius
-                      :justify-content  :center
-                      :align-items      :center}}
+        inner-icon-size      (get-inner-icon-sizes size)]
+    [rn/view
+     {:style {:width            size
+              :background-color icon-color
+              :height           size
+              :border-radius    avatar-border-radius
+              :justify-content  :center
+              :align-items      :center}}
      [icons/icon icon
       {:no-color true
        :size     inner-icon-size}]]))

src/quo2/components/avatars/channel_avatar.cljs

@@ -1,41 +1,47 @@
 (ns quo2.components.avatars.channel-avatar
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.components.icon :as icons]
+  (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [quo2.theme :as theme]))
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]))
 
-(defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
+(defn channel-avatar
+  [{:keys [big? locked? emoji-background-color emoji]}]
   (let [lock-exists? (some? locked?)
         dark?        (theme/dark?)]
-    [rn/view {:style {:width            (if big? 32 24)
-                      :height           (if big? 32 24)
-                      :border-radius    (if big? 32 24)
-                      :justify-content  :center
-                      :align-items      :center
-                      :background-color emoji-background-color}}
-     [rn/view {:style {:display         :flex
-                       :justify-content :center
-                       :align-items     :center}}
-      [text/text {:size (if big?
-                          :paragraph-1
-                          :label)} emoji]
+    [rn/view
+     {:style {:width            (if big? 32 24)
+              :height           (if big? 32 24)
+              :border-radius    (if big? 32 24)
+              :justify-content  :center
+              :align-items      :center
+              :background-color emoji-background-color}}
+     [rn/view
+      {:style {:display         :flex
+               :justify-content :center
+               :align-items     :center}}
+      [text/text
+       {:size (if big?
+                :paragraph-1
+                :label)} emoji]
       (when lock-exists?
-        [rn/view {:style {:position         :absolute
-                          :left             (if big?
-                                              14
-                                              8)
-                          :top              (if big?
-                                              15
-                                              8)
-                          :background-color (if dark?
-                                              colors/neutral-90
-                                              colors/white)
-                          :border-radius    15
-                          :padding          2}}
-         [icons/icon (if locked?
-                       :main-icons/locked
-                       :main-icons/unlocked)
+        [rn/view
+         {:style {:position         :absolute
+                  :left             (if big?
+                                      14
+                                      8)
+                  :top              (if big?
+                                      15
+                                      8)
+                  :background-color (if dark?
+                                      colors/neutral-90
+                                      colors/white)
+                  :border-radius    15
+                  :padding          2}}
+         [icons/icon
+          (if locked?
+            :main-icons/locked
+            :main-icons/unlocked)
           {:color           (if dark?
                               colors/neutral-40
                               colors/neutral-50)

src/quo2/components/avatars/group_avatar.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.avatars.group-avatar
-  (:require [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icon]
+  (:require [quo2.components.icon :as icon]
+            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))
 
 (def sizes
@@ -11,16 +11,22 @@
                :medium 32
                :large  48}})
 
-;; TODO: this implementation does not support group display picture (can only display default group icon).
-(defn group-avatar [_]
+;; TODO: this implementation does not support group display picture (can only display default group
+;; icon).
+(defn group-avatar
+  [_]
   (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 (colors/custom-color-by-theme color 50 60)}
-       [icon/icon :i/group {:size  icon-size
-                            :color colors/white-opa-70}]])))
+      [rn/view
+       {:width            container-size
+        :height           container-size
+        :align-items      :center
+        :justify-content  :center
+        :border-radius    (/ container-size 2)
+        ;:background-color (colors/custom-color-by-theme color 50 60) ; TODO: this is temporary only.
+        ;Issue: https://github.com/status-im/status-mobile/issues/14566
+        :background-color color}
+       [icon/icon :i/group
+        {:size  icon-size
+         :color colors/white-opa-70}]])))

src/quo2/components/avatars/icon_avatar.cljs

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

src/quo2/components/avatars/user_avatar.cljs

@@ -1,91 +1,96 @@
 (ns quo2.components.avatars.user-avatar
-  (:require [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
+  (:require [clojure.string :refer [blank? split upper-case]]
+            [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icons]
             [quo2.theme :refer [dark?]]
-            [clojure.string :refer [upper-case split blank?]]))
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
 
-(def sizes {:big {:outer 80
-                  :inner 72
-                  :status-indicator 20
-                  :status-indicator-border 4
-                  :font-size :heading-1}
-            :medium {:outer 48
-                     :inner 44
-                     :status-indicator 12
-                     :status-indicator-border 2
-                     :font-size :paragraph-1}
-            :small {:outer 32
-                    :inner 28
-                    :status-indicator 12
-                    :status-indicator-border 2
-                    :font-size :paragraph-2}
-            :xs {:outer 24
-                 :inner 24
-                 :status-indicator 0
-                 :status-indicator-border 0
-                 :font-size :paragraph-2}
-            :xxs {:outer 20
-                  :inner 20
-                  :status-indicator 0
-                  :status-indicator-border 0
-                  :font-size :label}
-            :xxxs {:outer 16
-                   :inner 16
-                   :status-indicator 0
-                   :status-indicator-border 0
-                   :font-size :label}})
+(def sizes
+  {:big    {:outer                   80
+            :inner                   72
+            :status-indicator        20
+            :status-indicator-border 4
+            :font-size               :heading-1}
+   :medium {:outer                   48
+            :inner                   44
+            :status-indicator        12
+            :status-indicator-border 2
+            :font-size               :paragraph-1}
+   :small  {:outer                   32
+            :inner                   28
+            :status-indicator        12
+            :status-indicator-border 2
+            :font-size               :paragraph-2}
+   :xs     {:outer                   24
+            :inner                   24
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :paragraph-2}
+   :xxs    {:outer                   20
+            :inner                   20
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :label}
+   :xxxs   {:outer                   16
+            :inner                   16
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :label}})
 
 (defn dot-indicator
   [size status-indicator? online? ring? dark?]
   (when status-indicator?
-    (let [dimensions (get-in sizes [size :status-indicator])
+    (let [dimensions   (get-in sizes [size :status-indicator])
           border-width (get-in sizes [size :status-indicator-border])
-          right (case size
-                  :big 2
-                  :medium 0
-                  :small -2
-                  0)
-          bottom (case size
-                   :big (if ring?
-                          -1
-                          2)
-                   :medium (if ring?
-                             0
-                             -2)
-                   :small (if ring?
-                            -2
-                            -2)
-                   0)]
-      [rn/view {:style {:background-color (if online?
-                                            colors/success-50
-                                            colors/neutral-40)
-                        :width dimensions
-                        :height dimensions
-                        :border-width border-width
-                        :border-radius dimensions
-                        :border-color (if dark?
-                                        colors/neutral-100
-                                        colors/white)
-                        :position :absolute
-                        :bottom bottom
-                        :right right}}])))
+          right        (case size
+                         :big    2
+                         :medium 0
+                         :small  -2
+                         0)
+          bottom       (case size
+                         :big    (if ring?
+                                   -1
+                                   2)
+                         :medium (if ring?
+                                   0
+                                   -2)
+                         :small  (if ring?
+                                   -2
+                                   -2)
+                         0)]
+      [rn/view
+       {:style {:background-color (if online?
+                                    colors/success-50
+                                    colors/neutral-40)
+                :width            dimensions
+                :height           dimensions
+                :border-width     border-width
+                :border-radius    dimensions
+                :border-color     (if dark?
+                                    colors/neutral-100
+                                    colors/white)
+                :position         :absolute
+                :bottom           bottom
+                :right            right}}])))
 
-(defn container-styling [inner-dimensions outer-dimensions]
-  {:width inner-dimensions
-   :position :absolute
-   :top (/ (- outer-dimensions inner-dimensions) 2)
-   :left (/ (- outer-dimensions inner-dimensions) 2)
-   :height inner-dimensions
+(defn container-styling
+  [inner-dimensions outer-dimensions]
+  {:width         inner-dimensions
+   :position      :absolute
+   :top           (/ (- outer-dimensions inner-dimensions) 2)
+   :left          (/ (- outer-dimensions inner-dimensions) 2)
+   :height        inner-dimensions
    :border-radius inner-dimensions})
 
-(defn container [inner-dimensions outer-dimensions & children]
-  [rn/view {:style (merge {:background-color (colors/custom-color-by-theme :turquoise 50 60)
-                           :justify-content :center
-                           :align-items :center}
-                          (container-styling inner-dimensions outer-dimensions))}
+(defn container
+  [inner-dimensions outer-dimensions & children]
+  [rn/view
+   {:style (merge {:background-color (colors/custom-color-by-theme :turquoise 50 60)
+                   :justify-content  :center
+                   :align-items      :center}
+                  (container-styling inner-dimensions outer-dimensions))}
    children])
 
 (def small-sizes #{:xs :xxs :xxxs})
@@ -112,9 +117,11 @@
         identicon?           (contains? identicon-sizes size)
         small?               (contains? small-sizes size)
         outer-dimensions     (get-in sizes [size :outer])
-        inner-dimensions     (get-in sizes [size (if ring?
-                                                   :inner
-                                                   :outer)])
+        inner-dimensions     (get-in sizes
+                                     [size
+                                      (if ring?
+                                        :inner
+                                        :outer)])
         font-size            (get-in sizes [size :font-size])
         icon-text            (if-not (or (blank? first-initial-letter)
                                          (blank? initials))
@@ -122,22 +129,26 @@
                                  first-initial-letter
                                  initials)
                                "")]
-    [rn/view {:accessibility-label :user-avatar
-              :style               {:width         outer-dimensions
-                                    :height        outer-dimensions
-                                    :border-radius outer-dimensions}}
-     (when (and ring? identicon?)
-       [icons/icon :i/identicon-ring {:size     outer-dimensions
-                                      :no-color true}])
+    [rn/view
+     {:accessibility-label :user-avatar
+      :style               {:width         outer-dimensions
+                            :height        outer-dimensions
+                            :border-radius outer-dimensions}}
+     (when (and false (and ring? identicon?)) ;;TODO not implemented yet
+       [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)}]
+       [fast-image/fast-image
+        {:source 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}}
+        [text/text
+         {:weight :semi-bold
+          :size   font-size
+          :style  {:color colors/white-opa-70}}
          (upper-case icon-text)]])
      [dot-indicator size status-indicator? online? ring? (dark?)]]))

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -1,31 +1,35 @@
 (ns quo2.components.avatars.wallet-user-avatar
-  (:require [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
+  (:require [clojure.string :as string]
             [quo2.components.markdown.text :as text]
-            [clojure.string :as string]))
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
 
-(def circle-sizes {:small 20
-                   :medium 32
-                   :large 48
-                   :x-large 80})
+(def circle-sizes
+  {:small   20
+   :medium  32
+   :large   48
+   :x-large 80})
 
-(def font-sizes {:small :label
-                 :medium :paragraph-2
-                 :large :paragraph-1
-                 :x-large :heading-1})
+(def font-sizes
+  {:small   :label
+   :medium  :paragraph-2
+   :large   :paragraph-1
+   :x-large :heading-1})
 
-(def font-weights {:small :medium
-                   :medium :semi-bold
-                   :large :semi-bold
-                   :x-large :medium})
+(def font-weights
+  {:small   :medium
+   :medium  :semi-bold
+   :large   :semi-bold
+   :x-large :medium})
 
 (defn wallet-user-avatar
   "params, first name, last name, color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name color size] :or {f-name "John"
-                                          l-name "Doe"
-                                          color :red
-                                          size :x-large}}]
+  [{:keys [f-name l-name color size]
+    :or   {f-name "John"
+           l-name "Doe"
+           color  :red
+           size   :x-large}}]
   (let [circle-size    (size circle-sizes)
         small?         (= size :small)
         f-name-initial (-> f-name
@@ -36,16 +40,18 @@
                            (subs 0 1))
         circle-color   (colors/custom-color color 50 20)
         text-color     (colors/custom-color-by-theme color 50 60)]
-    [rn/view {:style {:width circle-size
-                      :height circle-size
-                      :border-radius circle-size
-                      :text-align :center
-                      :justify-content :center
-                      :align-items :center
-                      :background-color circle-color}}
-     [text/text {:size (size font-sizes)
-                 :weight (size font-weights)
-                 :style {:color text-color}}
+    [rn/view
+     {:style {:width            circle-size
+              :height           circle-size
+              :border-radius    circle-size
+              :text-align       :center
+              :justify-content  :center
+              :align-items      :center
+              :background-color circle-color}}
+     [text/text
+      {:size   (size font-sizes)
+       :weight (size font-weights)
+       :style  {:color text-color}}
       (if small?
         (str f-name-initial)
         (str f-name-initial l-name-initial))]]))

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

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

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

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

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

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

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

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

src/quo2/components/buttons/button.cljs

@@ -1,143 +1,145 @@
 (ns quo2.components.buttons.button
-  (:require [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.components.icon :as quo2.icons]
             [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
-            [reagent.core :as reagent]
-            [quo2.components.icon :as quo2.icons]))
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
 
 (def themes
-  {: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-color          colors/white
-                              :background-color     {:default  colors/neutral-95
-                                                     :pressed  colors/neutral-95
-                                                     :disabled 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}}}})
+  {: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-30
+                                                    :pressed  colors/neutral-40
+                                                    :disabled colors/neutral-30}}
+           :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-color      colors/white
+                             :background-color {:default  colors/neutral-95
+                                                :pressed  colors/neutral-95
+                                                :disabled 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))
+(defn shape-style-container
+  [type icon size]
+  {:height        size
+   :border-radius (if (and icon (#{:primary :secondary :danger} type))
                     24
                     (case size
                       56 12
@@ -145,22 +147,43 @@
                       32 10
                       24 8))})
 
-(defn style-container [type size disabled background-color border-color icon above width before after]
+(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)
           :background-color   background-color
           :padding-horizontal (when-not (or icon before after)
-                                (case size 56 16 40 16 32 12 24 8))
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
           :padding-left       (when-not (or icon before)
-                                (case size 56 16 40 16 32 12 24 8))
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
           :padding-right      (when-not (or icon after)
-                                (case size 56 16 40 16 32 12 24 8))
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
           :padding-top        (when-not (or icon before after)
-                                (case size 56 0 40 9 32 5 24 3))
+                                (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))}
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  24 4))}
          (shape-style-container type icon size)
          (when width
            {:width width})
@@ -172,7 +195,8 @@
          (when disabled
            {:opacity 0.3})))
 
-(defn community-themed? [type community-color]
+(defn community-themed?
+  [type community-color]
   (and (= type :community) (string? community-color)))
 
 (defn button
@@ -192,85 +216,97 @@
    [button {:icon true} :main-icons/close-circle]"
   [_ _]
   (let [pressed (reagent/atom false)]
-    (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 test-ID]
-          :or   {type :primary
-                 size 40}}
-         children]
+    (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 test-ID]
+        :or   {type :primary
+               size 40}}
+       children]
       (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)
+            (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 {:test-ID test-ID
-                                               :disabled            disabled
-                                               :accessibility-label accessibility-label}
-                                              (when on-press
-                                                {:on-press (fn []
-                                                             (on-press))})
-                                              (when on-long-press
-                                                {:on-long-press (fn []
-                                                                  (on-long-press))})
-                                              {:on-press-in (fn []
-                                                              (reset! pressed true))}
-                                              {:on-press-out (fn []
-                                                               (reset! pressed nil))})
+        [rn/touchable-without-feedback
+         (merge {:test-ID             test-ID
+                 :disabled            disabled
+                 :accessibility-label accessibility-label}
+                (when on-press
+                  {:on-press (fn []
+                               (on-press))})
+                (when on-long-press
+                  {:on-long-press (fn []
+                                    (on-long-press))})
+                {:on-press-in (fn []
+                                (reset! pressed true))}
+                {:on-press-out (fn []
+                                 (reset! pressed nil))})
 
-         [rn/view {:style (merge
-                           (shape-style-container type icon size)
-                           {:background-color
-                            (if (= state :pressed)
-                              (colors/theme-colors colors/neutral-100 colors/white)
-                              :transparent)}
-                           style)}
-          [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}))))}
+         [rn/view
+          {:style (merge
+                   (shape-style-container type icon size)
+                   {:background-color
+                    (if (= state :pressed)
+                      (colors/theme-colors colors/neutral-100 colors/white)
+                      :transparent)}
+                   style)}
+          [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}]])
+              [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}
-                                       :color           icon-secondary-color
-                                       :size            icon-size}]])
+              [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}]
+              [quo2.icons/icon children
+               {:color    icon-color
+                :no-color icon-no-color
+                :size     icon-size}]
 
               (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)}}
+              [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)}}
 
                children]
 
@@ -278,7 +314,8 @@
               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}]])]]]))))
+              [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/buttons/dynamic_button.cljs

@@ -1,11 +1,12 @@
 (ns quo2.components.buttons.dynamic-button
-  (:require [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [quo2.components.icon :as icon]
+  (:require [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.components.markdown.text :as text]))
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
 
-(defn- get-button-color [type pressed? customization-color]
+(defn- get-button-color
+  [type pressed? customization-color]
   (if (#{:jump-to :mention} type)
     (if pressed?
       (colors/custom-color-by-theme customization-color 60 50)
@@ -14,12 +15,14 @@
       (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80)
       (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))))
 
-(defn- get-icon-and-text-color [type]
+(defn- get-icon-and-text-color
+  [type]
   (if (#{:jump-to :mention} type)
     colors/white
     (colors/theme-colors colors/white colors/neutral-100)))
 
-(defn- icon-view [type]
+(defn- icon-view
+  [type]
   [icon/icon
    (case type
      :jump-to           :i/jump-to
@@ -28,7 +31,7 @@
      :notification-up   :i/arrow-up
      :search-with-label :i/search
      :search            :i/search
-     :bottom            :i/arrow-down)
+     :scroll-to-bottom  :i/arrow-down)
    {:size            12
     :color           (get-icon-and-text-color type)
     :container-style {:margin-top    6
@@ -40,7 +43,7 @@
                                        :notification-up   2
                                        :search-with-label 8
                                        :search            6
-                                       :bottom            6)
+                                       :scroll-to-bottom  6)
                       :margin-right  (case type
                                        :jump-to           8
                                        :mention           2
@@ -48,12 +51,12 @@
                                        :notification-up   8
                                        :search-with-label 4
                                        :search            6
-                                       :bottom            6)}}])
+                                       :scroll-to-bottom  6)}}])
 
 (defn dynamic-button
   "[dynamic-button opts]
    opts
-   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom
+   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
     :on-press            fn
     :count               mentions or notifications count
     :customization-color customize jump-to and mention button color}"
@@ -67,32 +70,34 @@
         :active-opacity      1
         :style               {:padding 5}
         :accessibility-label type}
-       [rn/view {:style (merge
-                         {:flex-direction   :row
-                          :height           24
-                          :border-radius    12
-                          :background-color (get-button-color type @pressed? (or customization-color :primary))}
-                         style)}
-        (when (#{:mention :search :search-with-label :bottom} type)
+       [rn/view
+        {:style (merge
+                 {:flex-direction   :row
+                  :height           24
+                  :border-radius    12
+                  :background-color (get-button-color type @pressed? (or customization-color :primary))}
+                 style)}
+        (when (#{:mention :search :search-with-label :scroll-to-bottom} type)
           [icon-view type])
         (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
-          [text/text {:weight :medium
-                      :size   :paragraph-2
-                      :style  {:color         (get-icon-and-text-color type)
-                               :margin-top    2.5
-                               :margin-bottom 3.5
-                               :margin-left   (case type
-                                                :jump-to           8
-                                                :mention           0
-                                                :notification-down 8
-                                                :notification-up   8
-                                                :search-with-label 0)
-                               :margin-right  (case type
-                                                :jump-to           0
-                                                :mention           8
-                                                :notification-down 0
-                                                :notification-up   0
-                                                :search-with-label 8)}}
+          [text/text
+           {:weight :medium
+            :size   :paragraph-2
+            :style  {:color         (get-icon-and-text-color type)
+                     :margin-top    2.5
+                     :margin-bottom 3.5
+                     :margin-left   (case type
+                                      :jump-to           8
+                                      :mention           0
+                                      :notification-down 8
+                                      :notification-up   8
+                                      :search-with-label 0)
+                     :margin-right  (case type
+                                      :jump-to           0
+                                      :mention           8
+                                      :notification-down 0
+                                      :notification-up   0
+                                      :search-with-label 8)}}
            (case type
              :jump-to                                       label
              :search-with-label                             label

src/quo2/components/code/snippet.cljs

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

src/quo2/components/community/community_card_view.cljs

@@ -1,18 +1,21 @@
 (ns quo2.components.community.community-card-view
-  (:require
-   [quo2.components.community.community-view :as community-view]
-   [quo2.components.community.style :as style]
-   [react-native.core :as rn]))
+  (:require [quo2.components.community.community-view :as community-view]
+            [quo2.components.community.icon :as icon]
+            [quo2.components.community.style :as style]
+            [react-native.core :as rn]))
 
 (defn community-card-view-item
-  [{:keys [name description locked
+  [{:keys [name description locked images
            status tokens cover tags width]} on-press]
-  [rn/touchable-opacity {:on-press on-press}
+  [rn/touchable-opacity
+   {:accessibility-label :community-card-item
+    :on-press            on-press}
    [rn/view {:style (style/community-card 20)}
-    [rn/view {:style    {:width         width
-                         :height        230
-                         :border-radius 20}
-              :on-press on-press}
+    [rn/view
+     {:style    {:width         width
+                 :height        230
+                 :border-radius 20}
+      :on-press on-press}
      [rn/view
       {:flex 1}
       [rn/view (style/community-cover-container 40)
@@ -22,14 +25,15 @@
          {:flex          1
           :border-radius 20}}]]
       [rn/view (style/card-view-content-container 12)
-       [rn/view (style/card-view-chat-icon 48)]
-       ;;TODO new pure component based on quo2 should be implemented without status-im usage
-       ;[communities.icon/community-icon-redesign community 48]]
+       [rn/view (style/card-view-chat-icon 48)
+        [icon/community-icon {:images images} 48]]
+
        (when (= status :gated)
          [rn/view (style/permission-tag-styles)
-          [community-view/permission-tag-container {:locked locked
-                                                    :status status
-                                                    :tokens tokens}]])
+          [community-view/permission-tag-container
+           {:locked locked
+            :status status
+            :tokens tokens}]])
        [community-view/community-title
         {:title       name
          :description description}]

src/quo2/components/community/community_list_view.cljs

@@ -1,125 +1,124 @@
 (ns quo2.components.community.community-list-view
-  (:require
-   [quo2.components.community.community-view :as community-view]
-   [quo2.components.markdown.text :as text]
-   [quo2.foundations.colors :as colors]
-   [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]))
+  (:require [quo2.components.community.community-view :as community-view]
+            [quo2.components.community.style :as style]
+            [quo2.components.counter.counter :as counter]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.community.icon :as community-icon]
+            [react-native.core :as rn]))
 
-(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]}]
+(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)}]
+    [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)}}]))
+    [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})}
-   [rn/touchable-highlight (merge {:style {:height        56
-                                           :border-radius 16}}
-                                  props)
+(defn communities-list-view-item
+  [props
+   {:keys [name
+           locked?
+           status
+           muted?
+           unread-messages?
+           unread-mentions-count
+           community-icon
+           tokens]}]
+  [rn/view
+   {:style (merge (style/community-card 16)
+                  {:margin-bottom 12})}
+   [rn/touchable-highlight
+    (merge {:style {:height        56
+                    :border-radius 16}}
+           props)
     [rn/view {:flex 1}
-     [rn/view {:flex-direction     :row
-               :border-radius      16
-               :padding-horizontal 12
-               :align-items        :center
-               :padding-vertical   8
-               :background-color   background-color}
-      [rn/view]
-      (when community-icon
-        [community-icon-view community-icon])
-      [rn/view {:flex              1
-                :margin-horizontal 12}
-       [text/text {:weight              :semi-bold
-                   :size                :paragraph-1
-                   :accessibility-label :community-name-text
-                   :number-of-lines     1
-                   :ellipsize-mode      :tail
-                   :style               {:color (when muted?
-                                                  (colors/theme-colors
-                                                   colors/neutral-40
-                                                   colors/neutral-60))}}
+     [rn/view (style/list-info-container)
+      [community-icon/community-icon
+       {:images community-icon} 32]
+      [rn/view
+       {:flex              1
+        :margin-horizontal 12}
+       [text/text
+        {:weight              :semi-bold
+         :size                :paragraph-1
+         :accessibility-label :community-name-text
+         :number-of-lines     1
+         :ellipsize-mode      :tail
+         :style               {:color (when muted?
+                                        (colors/theme-colors
+                                         colors/neutral-40
+                                         colors/neutral-60))}}
         name]
        [community-view/community-stats-column :list-view]]
       (if (= status :gated)
-        [community-view/permission-tag-container {:locked? locked?
-                                                  :tokens  tokens}]
-        [notification-view {:muted?                muted?
-                            :unread-mentions-count unread-mentions-count
-                            :unread-messages?      unread-messages?}])]]]])
+        [community-view/permission-tag-container
+         {:locked? locked?
+          :tokens  tokens}]
+        [notification-view
+         {:muted?                muted?
+          :unread-mentions-count unread-mentions-count
+          :unread-messages?      unread-messages?}])]]]])
 
-(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}}
-                                  props)
-    [rn/view {:flex 1}
-     [rn/view {:flex-direction :row
-               :border-radius  16
-               :align-items    :center}
+(defn communities-membership-list-item
+  [props
+   {:keys [name
+           muted?
+           unread-messages?
+           unread-mentions-count
+           status
+           community-icon
+           tokens
+           locked?]}]
+  [rn/touchable-highlight
+   (merge {:underlay-color (colors/theme-colors
+                            colors/neutral-5
+                            colors/neutral-95)
+           :style          {:border-radius 12}}
+          props)
+   [rn/view {:flex 1}
+    [rn/view (style/membership-info-container)
+     [community-icon/community-icon
+      {:images community-icon} 32]
+     [rn/view
+      {:flex            1
+       :margin-left     12
+       :justify-content :center}
+      [text/text
+       {:accessibility-label :chat-name-text
+        :number-of-lines     1
+        :ellipsize-mode      :tail
+        :weight              :semi-bold
+        :size                :paragraph-1}
+       name]]
 
-      (when community-icon
-        [community-icon-view community-icon])
-      [rn/view {:flex            1
-                :margin-left     12
-                :justify-content :center}
-       [text/text
-        {:accessibility-label :chat-name-text
-         :number-of-lines     1
-         :ellipsize-mode      :tail
-         :weight              :semi-bold
-         :size                :paragraph-1}
-        name]]
-
-      [rn/view {:justify-content :center
-                :margin-right    16}
-       (if (= status :gated)
-         [community-view/permission-tag-container {:locked? locked?
-                                                   :tokens  tokens}]
-         [notification-view {:muted?                muted?
-                             :unread-mentions-count unread-mentions-count
-                             :unread-messages?      unread-messages?}])]]]]])
+     [rn/view
+      {:justify-content :center
+       :margin-right    16}
+      (if (= status :gated)
+        [community-view/permission-tag-container
+         {:locked? locked?
+          :tokens  tokens}]
+        [notification-view
+         {:muted?                muted?
+          :unread-mentions-count unread-mentions-count
+          :unread-messages?      unread-messages?}])]]]])

src/quo2/components/community/community_view.cljs

@@ -1,51 +1,60 @@
 (ns quo2.components.community.community-view
-  (:require
-   [quo2.components.markdown.text :as text]
-   [quo2.components.icon :as icons]
-   [quo2.foundations.colors :as colors]
-   [quo2.components.tags.permission-tag :as permission]
-   [quo2.components.tags.tag :as tag]
-   [quo2.components.community.style :as style]
-   [react-native.core :as rn]))
+  (:require [quo2.components.community.style :as style]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.tags.permission-tag :as permission]
+            [quo2.components.tags.tag :as tag]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
 
-(defn community-stats [{:keys [icon members-count icon-color]}]
+(defn community-stats
+  [{:keys [icon members-count icon-color]}]
   [rn/view (style/stats-count-container)
    [rn/view {:margin-right 4}
-    [icons/icon icon {:container-style {:align-items     :center
-                                        :justify-content :center}
-                      :resize-mode     :center
-                      :size            16
-                      :color           icon-color}]]
-   [text/text {:weight :regular
-               :size   :paragraph-1}
+    [icons/icon icon
+     {:container-style {:align-items     :center
+                        :justify-content :center}
+      :resize-mode     :center
+      :size            16
+      :color           icon-color}]]
+   [text/text
+    {:weight :regular
+     :size   :paragraph-1}
     members-count]])
 
-(defn community-stats-column [type]
+(defn community-stats-column
+  [type]
   (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
-    [rn/view (if (= type :card-view)
-               (style/card-stats-container)
-               (style/list-stats-container))
-     [community-stats {:icon       :i/group
-                       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
-                       :icon-color icon-color}]
-     [community-stats {:icon          :i/lightning
-                       :members-count "112.1K"
-                       :icon-color    icon-color}]]))
+    [rn/view
+     (if (= type :card-view)
+       (style/card-stats-container)
+       (style/list-stats-container))
+     [community-stats
+      {:icon          :i/group
+       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from
+                               ;;outside this component
+       :icon-color    icon-color}]
+     [community-stats
+      {:icon          :i/lightning
+       :members-count "112.1K"
+       :icon-color    icon-color}]]))
 
-(defn community-tags [tags]
+(defn community-tags
+  [tags]
   [rn/view (style/community-tags-container)
    (for [{:keys [id tag-label resource]} tags]
      ^{:key id}
      [rn/view {:margin-right 8}
       [tag/tag
-       {:id       id
-        :size     24
-        :label    tag-label
-        :type     :emoji
-        :labelled true
-        :resource resource}]])])
+       {:id        id
+        :size      24
+        :label     tag-label
+        :type      :emoji
+        :labelled? true
+        :resource  resource}]])])
 
-(defn community-title [{:keys [title description size] :or {size :small}}]
+(defn community-title
+  [{:keys [title description size] :or {size :small}}]
   [rn/view (style/community-title-description-container (if (= size :large) 56 32))
    (when title
      [text/text
@@ -65,12 +74,14 @@
        :style               {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(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
+(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
-                   :on-press         on-press}])
+    :size             24
+    :on-press         on-press}])

src/quo2/components/community/discover_card.cljs

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

src/quo2/components/community/icon.cljs

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

src/quo2/components/community/style.cljs

@@ -8,57 +8,66 @@
    :height         52
    :padding-left   18})
 
-(defn community-card [radius]
-  {:shadow-offset    {:width 0
+(defn community-card
+  [radius]
+  {:shadow-offset    {:width  0
                       :height 2}
-   :shadow-radius     radius
-   :shadow-opacity    1
-   :shadow-color      colors/shadow
-   :border-radius     radius
-   :justify-content   :space-between
-   :elevation         2
-   :background-color  (colors/theme-colors
-                       colors/white
-                       colors/neutral-90)})
-
-(defn stats-count-container []
-  {:flex-direction :row
-   :align-items    :center
-   :margin-right   16})
-
-(defn card-stats-container []
-  {:flex-direction :row})
-
-(defn list-stats-container []
-  {:flex-direction :row
-   :align-items    :center})
-
-(defn community-tags-container  []
-  {:flex-direction :row})
-
-(defn card-stats-position []
-  {:position       :absolute
-   :top            116
-   :right          12
-   :left           12})
-
-(defn community-tags-position  []
-  {:position       :absolute
-   :top            154
-   :right          12
-   :left           12})
-
-(defn card-view-content-container [padding-horizontal]
-  {:flex               1
-   :height 20
-   :padding-left padding-horizontal
-   :padding-right padding-horizontal
-   :border-radius      16
+   :shadow-radius    radius
+   :shadow-opacity   1
+   :shadow-color     colors/shadow
+   :border-radius    radius
+   :justify-content  :space-between
+   :elevation        2
    :background-color (colors/theme-colors
                       colors/white
                       colors/neutral-90)})
 
-(defn card-view-chat-icon [icon-size]
+(defn stats-count-container
+  []
+  {:flex-direction :row
+   :align-items    :center
+   :margin-right   16})
+
+(defn card-stats-container
+  []
+  {:flex-direction :row})
+
+(defn list-stats-container
+  []
+  {:flex-direction :row
+   :align-items    :center})
+
+(defn community-tags-container
+  []
+  {:flex-direction :row})
+
+(defn card-stats-position
+  []
+  {:position :absolute
+   :top      116
+   :right    12
+   :left     12})
+
+(defn community-tags-position
+  []
+  {:position :absolute
+   :top      154
+   :right    12
+   :left     12})
+
+(defn card-view-content-container
+  [padding-horizontal]
+  {:flex             1
+   :height           20
+   :padding-left     padding-horizontal
+   :padding-right    padding-horizontal
+   :border-radius    16
+   :background-color (colors/theme-colors
+                      colors/white
+                      colors/neutral-90)})
+
+(defn card-view-chat-icon
+  [icon-size]
   {:border-radius    48
    :position         :absolute
    :top              (- (/ icon-size 2))
@@ -68,29 +77,35 @@
                       colors/white
                       colors/neutral-90)})
 
-(defn list-view-content-container []
-  {:flex-direction    :row
-   :border-radius     16
-   :align-items       :center
-   :background-color (colors/theme-colors
-                      colors/white
-                      colors/neutral-90)})
+(defn list-info-container
+  []
+  {:flex-direction     :row
+   :border-radius      16
+   :padding-horizontal 12
+   :align-items        :center
+   :padding-vertical   8})
 
-(defn list-view-chat-icon []
-  {:border-radius    32
-   :padding          12})
+(defn membership-info-container
+  []
+  {:flex-direction :row
+   :border-radius  16
+   :align-items    :center
+   :height         48})
 
-(defn community-title-description-container [margin-top]
+(defn community-title-description-container
+  [margin-top]
   {:margin-top margin-top})
 
-(defn community-cover-container [height]
+(defn community-cover-container
+  [height]
   {:flex-direction          :row
    :height                  height
    :border-top-right-radius 20
    :border-top-left-radius  20
    :background-color        colors/primary-50-opa-20})
 
-(defn permission-tag-styles []
-  {:position         :absolute
-   :top              8
-   :right            8})
+(defn permission-tag-styles
+  []
+  {:position :absolute
+   :top      8
+   :right    8})

src/quo2/components/community/token_gating.cljs

@@ -7,81 +7,89 @@
             [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]))
+            [utils.i18n :as i18n]
+            [react-native.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}})
+(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]
+(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]
+(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]
+(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))}
+(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}]]))
+                     [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]
+(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)
@@ -89,15 +97,17 @@
         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)
+                                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))
+                          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
@@ -108,12 +118,14 @@
                           :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}
+      [text/text
+       {:weight          :medium
+        :number-of-lines 1}
        (i18n/label
         message-label)]
-      [text/text {:size :paragraph-2
-                  :number-of-lines 1}
+      [text/text
+       {:size            :paragraph-2
+        :number-of-lines 1}
        (i18n/label
         you-must-hold-label)]]
 
@@ -121,22 +133,26 @@
        (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)))}
+          [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"])
+             [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]
+(defn is-community-locked?
+  [community]
   (not (are-multiple-token-requirements-met? (get-in community [:gates :join]))))
 
-(defn is-channel-locked? [channel]
+(defn is-channel-locked?
+  [channel]
   (not (are-multiple-token-requirements-met?
         (or (get-in channel [:gates :read])
             (get-in channel [:gates :write])))))
@@ -174,82 +190,98 @@
                   membership-request-denied?
                   token-requirements-changed?
                   required-tokens-lost?
-                  gates]} (if (= type :community) community channel)
+                  gates]}
+          (if (= type :community) community channel)
           locked? (if
-                   (= type :community)
+                    (= 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 (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)}]
+           [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}])]
+           [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))]
+         [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)
+           [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]]
+        [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]])
+                         [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)}
+           [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))]
+            [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
+             {:size  :paragraph-2
               :style (merge
                       (get styles :info-text)
                       {:color (colors/theme-colors