refactor: do not keep active conn to storenodes

https://github.com/status-im/status-go/compare/4cc53630...d7e7792b

.carve_ignore

@@ -95,7 +95,6 @@ react-native.fs/unlink
 react-native.fs/file-exists?
 status-im.ui.components.colors/white
 status-im.ui.components.colors/black
-status-im.transport.core-test/messages
 status-im.ui.components.core/animated-header
 status-im.ui.components.core/safe-area-provider
 status-im.ui.components.core/safe-area-consumer

.clj-kondo/config.edn

@@ -16,10 +16,18 @@
                 :clj-kondo-config              {:level :error}
                 :cond-else                     {:level :error}
                 :consistent-alias              {:level   :error
-                                                :aliases {clojure.string  string
-                                                          clojure.set     set
-                                                          clojure.walk    walk
-                                                          taoensso.timbre log}}
+                                                :aliases {clojure.set      set
+                                                          clojure.string   string
+                                                          clojure.walk     walk
+                                                          malli.core       malli
+                                                          malli.dev.pretty malli.pretty
+                                                          malli.dev.virhe  malli.virhe
+                                                          malli.error      malli.error
+                                                          malli.generator  malli.generator
+                                                          malli.transform  malli.transform
+                                                          malli.util       malli.util
+                                                          schema.core      schema
+                                                          taoensso.timbre  log}}
                 :deprecated-namespace          {:level :warning}
                 :docstring-blank               {:level :error}
                 :equals-true                   {:level :error}

.clj-kondo/metosin/malli/config.edn

@@ -0,0 +1,2 @@
+{:lint-as {malli.experimental/defn schema.core/defn}
+ :linters {:unresolved-symbol {:exclude [(malli.core/=>)]}}}

.gitignore

@@ -190,3 +190,7 @@ test/appium/tests/users.py
 
 ## git hooks
 lefthook.yml
+
+## clj-kondo
+/.clj-kondo/taoensso/*
+/.clj-kondo/babashka/*

.zprintrc

@@ -32,10 +32,12 @@
   "letsubs"         :binding
   "with-let"        "let"
   "reg-event-fx"    :arg1-pair
+  "reg-fx"          :arg1-pair
   "testing"         :arg1-body
   "deftest-sub"     :arg1-body
   "wait-for"        :arg1-body
   "with-deps-check" :arg1-body
+  "schema/=>"       :arg1-body
   "->"              [:noarg1-body
                      {:list               {:constant-pair? false :force-nl? false}
                       :next-inner-restore [[:list :constant-pair?]]}]

Makefile

@@ -311,13 +311,14 @@ endef
 lint: export TARGET := clojure
 lint: export CLJ_LINTER_PRINT_WARNINGS ?= false
 lint: ##@test Run code style checks
-	@sh scripts/lint-re-frame-in-quo-components.sh && \
-	sh scripts/lint-direct-require-component-outside-quo.sh && \
+	@sh scripts/lint/re-frame-in-quo-components.sh && \
+	sh scripts/lint/direct-require-component-outside-quo.sh && \
+	sh scripts/lint/require-i18n-resource-first.sh && \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src $(if $(filter $(CLJ_LINTER_PRINT_WARNINGS),true),,| grep -v ': warning: ') && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
-	scripts/lint_translations.clj && \
+	scripts/lint/translations.clj && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
-	sh scripts/lint-trailing-newline.sh && \
+	sh scripts/lint/trailing-newline.sh && \
 	node_modules/.bin/prettier --write .
 
 # NOTE: We run the linter twice because of https://github.com/kkinnear/zprint/issues/271
@@ -327,7 +328,7 @@ lint-fix: ##@test Run code style checks and fix issues
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
 	clojure-lsp --ns-exclude-regex ".*/src/status_im2/core\.cljs$$" clean-ns && \
-	sh scripts/lint-trailing-newline.sh --fix && \
+	sh scripts/lint/trailing-newline.sh --fix && \
 	node_modules/.bin/prettier --write .
 
 shadow-server: export TARGET := clojure

android/app/src/main/java/im/status/ethereum/StatusOkHttpClientFactory.java

@@ -27,18 +27,23 @@ class StatusOkHttpClientFactory implements OkHttpClientFactory {
       X509Certificate cert = null;
       HandshakeCertificates clientCertificates;
       String certPem = "";
+      // Get TLS PEM certificate from status-go
+      try {
+         // induce half second sleep because sometimes a cert is not immediately available
+         // TODO : remove sleep if App no longer crashes on Android 10 devices with
+         // java.lang.RuntimeException: Could not invoke WebSocketModule.connect
+         Thread.sleep(500);
+         certPem = getCertificatePem();
+      } catch(Exception e) {
+          Log.e(TAG, "Could not getImageTLSCert",e);
+      }
 
-    // Get TLS PEM certificate from status-go
-    try {
-        // induce half second sleep because sometimes a cert is not immediately available
-        // TODO : remove sleep if App no longer crashes on Android 10 devices with
-        // java.lang.RuntimeException: Could not invoke WebSocketModule.connect
-        Thread.sleep(500);
-        certPem = StatusPackage.getImageTLSCert();
-    } catch(Exception e) {
-        Log.e(TAG, "Could not getImageTLSCert",e);
-    }
-    // Convert PEM certificate string to X509Certificate object
+      if (certPem.isEmpty()) {
+          Log.e(TAG, "Certificate is empty, cannot create OkHttpClient without a valid certificate");
+          return null;
+      }
+
+      // Convert PEM certificate string to X509Certificate object
     try {
       // induce half second sleep because sometimes a cert is not immediately available
       // TODO : remove sleep if App no longer crashes on Android 10 devices
@@ -74,4 +79,17 @@ class StatusOkHttpClientFactory implements OkHttpClientFactory {
       return null;
     }
   }
+    private String getCertificatePem() {
+        try {
+            String certPem = StatusPackage.getImageTLSCert();
+            if (certPem == null || certPem.trim().isEmpty()) {
+                Log.e(TAG, "Certificate PEM string is null or empty");
+                return "";
+            }
+            return certPem;
+        } catch (Exception e) {
+            Log.e(TAG, "Could not getImageTLSCert", e);
+            return "";
+        }
+    }
 }

ci/Jenkinsfile.ios

@@ -77,7 +77,6 @@ pipeline {
           }
         }
         stage('Upload') {
-          when { expression { !utils.isReleaseBuild() } }
           steps { script {
             env.DIAWI_URL = ios.uploadToDiawi()
             env.PKG_URL = env.DIAWI_URL

doc/README.md

@@ -10,9 +10,9 @@
 
 [Coding guidelines](new-guidelines.md)
 
-[Debugging](debugging.md)
+[Release Checklist](release-checklist.md)
 
-[Using custom `status-go` version](custom-status-go.md)
+[Release Guide](release-guide.md)
 
 [Merging PR process](merging-pr-process.md)
 
@@ -20,15 +20,14 @@
 
 [Working on PR together with QA team](pipeline_process.md)
 
-[Release Checklist](release-checklist.md)
-
-[Release Guide](release-guide.md)
-
+[Debugging](debugging.md)
 
 [Patching](patching.md)
 
 [Creating a pixel perfect UI](pixel-perfection.md)
 
+[Contributing to status-go](status-go-changes.md)
+
 ## Testing
 
 [How to run local tests](testing.md)

doc/custom-status-go.md

@@ -1,27 +0,0 @@
-# Using custom `status-go` version
-
-## Building mobile with custom `status-go` branch
-If you need to use a branch of a `status-go` as a dependency of `status-mobile`, you specify it using an update script in `status-mobile` repo:
-```bash
-scripts/update-status-go.sh <rev>
-```
-
-Where `rev` is a branch name, tag, or commit SHA1 you want to build. The script will save the indicated commit hash along with other information in the `status-go-version.json` file.
-
-If you are using a GitHub fork of `status-go` repo, export the `STATUS_GO_OWNER` environment variable when running the script.
-
-## Building mobile with `status-go` from local repository
-If instead you need to use a locally checked-out `status-go` repository as a dependency of `status-mobile`, you can achieve that by defining the `STATUS_GO_SRC_OVERRIDE`
-environment variable:
-
-```bash
-export STATUS_GO_SRC_OVERRIDE=$GOPATH/src/github.com/status-im/status-go
-# Any command that you run from now on will use the specified status-go location.
-make run-ios
-```
-
-or for a one-off build:
-
-```bash
-make run-ios STATUS_GO_SRC_OVERRIDE=$GOPATH/src/github.com/status-im/status-go
-```

doc/new-guidelines.md

@@ -716,7 +716,7 @@ src
 
 - `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
 - `src/mocks`: Plumbing configuration to be able to run tests.
-- `src/quo/`: The component library for Status Mobile.
+- `src/quo/`: The component library for Status Mobile. [Read more...](../src/quo/README.md)
 - `src/react_native/`: Contains only low-level constructs to help React Native
   work in tandem with Clojure(Script).
 - `src/status_im2/`: Directory where we try to be as strict as possible about

doc/status-go-changes.md

@@ -0,0 +1,31 @@
+# How to make changes to status-go
+
+
+## Overview
+
+To make changes to status-go, the best approach is to first identify the issue/feature and the changes to be made directly in status-go.
+For any bugs we want to most likely write a failing test in status-go, and make sure that it passes, before we test on mobile.
+
+Once you are quite confident that the status-go code is ready to be tested on mobile, you can test it locally by running the following command:
+
+```
+env STATUS_GO_SRC_OVERRIDE={your-status-go-directory} make run-{android/ios}
+```
+
+This will recompile status-go and run status-mobile on your device with that updated status-go version.
+
+Once you have tested the status-go changes locally and you think it's ready for a PR:
+
+1) Create a PR in status-go
+
+2) Point your local status-mobile branch to that PR by running the script:
+
+```
+scripts/update-status-go.sh {status-go-branch-name}
+```
+
+This will update `status-go-version.json`
+
+Commit updated status-go-version.json and create a status-mobile PR
+
+Once both PRs have been approved and are good to merge, you can follow the [merge guidelines](./merging-pr-process.md)

nix/deps/clojure/deps.json

@@ -45,11 +45,20 @@
   },
 
   {
-    "path": "borkdude/edamame/1.1.17/edamame-1.1.17",
+    "path": "borkdude/dynaload/0.3.5/dynaload-0.3.5",
     "host": "https://repo.clojars.org",
     "jar": {
-      "sha1": "9087f7abf0104e0354d7db7fc4576608eac558f4",
-      "sha256": "1n1872i240lakn4pzsag4grf7bv7lcsipmqllxd9m4k1zp3dgla1"
+      "sha1": "accd696ba364b850b4d92e38f5a34d0e828a0ad1",
+      "sha256": "0k62m1f29xfh3cp67w7kcvkp5aj35simi8kf95ycvkmgp76w11q8"
+    }
+  },
+
+  {
+    "path": "borkdude/edamame/1.3.23/edamame-1.3.23",
+    "host": "https://repo.clojars.org",
+    "jar": {
+      "sha1": "254d023e97ed438f0f44532b5a06d928d031ede4",
+      "sha256": "0l7mxza2nimslhg0qh6jp7gmb8sd6l89fk5d1zvzq2xskscq2vly"
     }
   },
 
@@ -81,20 +90,20 @@
   },
 
   {
-    "path": "cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0",
+    "path": "cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3",
     "host": "https://repo.clojars.org",
     "jar": {
-      "sha1": "45f6034b26a14138e74145b7a4059628c0fedcd1",
-      "sha256": "1dy1l6y8cb8xiqq97a4lf8giyiicq4wfl4s2lxn5fb6614cjxqx2"
+      "sha1": "5ae0efd9377a5e60c084bdaf4a2ce094f759ce23",
+      "sha256": "0drxf9nm23i1pcgrkwbcr09msq37csilzww38709add0hz8spjhq"
     }
   },
 
   {
-    "path": "cider/piggieback/0.5.2/piggieback-0.5.2",
+    "path": "cider/piggieback/0.4.1/piggieback-0.4.1",
     "host": "https://repo.clojars.org",
     "jar": {
-      "sha1": "ecfd5c286a85db3f059e75c37fca5722d9e26f79",
-      "sha256": "1ps9yf3cxmlm447hqkidjb5xry90n0wl3jk0jn28fagq31lzylkl"
+      "sha1": "0a02a3e2ecd7a126ab60d8a44793342f20ced79b",
+      "sha256": "142vl5np33akcrnn6pksi0rjfsmmi528villxsj6cwcndvybiw4m"
     }
   },
 
@@ -539,6 +548,24 @@
     }
   },
 
+  {
+    "path": "metosin/malli/0.13.0/malli-0.13.0",
+    "host": "https://repo.clojars.org",
+    "jar": {
+      "sha1": "286c52d26a3a9d613b5f692971bd19c581cdc4b0",
+      "sha256": "0vaq9d6cln5j4ww302fwlgg7m647cf2j16gs2i1p1d4klbn4jddz"
+    }
+  },
+
+  {
+    "path": "mvxcvi/arrangement/2.1.0/arrangement-2.1.0",
+    "host": "https://repo.clojars.org",
+    "jar": {
+      "sha1": "1bc8f3bba7a28de85f319b7d464aa8d955f44918",
+      "sha256": "1j1rkwrs4wm8zk9v7ilgpnyav5sipdd2bmb83sazh392blw52wpk"
+    }
+  },
+
   {
     "path": "net/cgrand/macrovich/0.2.1/macrovich-0.2.1",
     "host": "https://repo.clojars.org",
@@ -728,6 +755,15 @@
     }
   },
 
+  {
+    "path": "org/clojure/test.check/1.1.1/test.check-1.1.1",
+    "host": "https://repo1.maven.org/maven2",
+    "jar": {
+      "sha1": "f33d988fd57bc9c11af1952db81c10f319c91416",
+      "sha256": "0y2hpkj7zl4yrpsl35ifpdaja5c72b8fpjcnmdgmld9c7cb1hlcl"
+    }
+  },
+
   {
     "path": "org/clojure/tools.analyzer/1.1.0/tools.analyzer-1.1.0",
     "host": "https://repo1.maven.org/maven2",
@@ -909,11 +945,11 @@
   },
 
   {
-    "path": "refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0",
+    "path": "refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0",
     "host": "https://repo.clojars.org",
     "jar": {
-      "sha1": "2b3bb82da53b5db9c2b2aa298417816b81d0ed97",
-      "sha256": "1ysqabmlnghki6x0636zngxza2d83c85276wp9ma9wk183mkv52a"
+      "sha1": "6bc3441afc94f7ca024e41a864ca75e05df7e207",
+      "sha256": "0w8hax99y98l53mixxzx2ja0vcnhjv8dnsaz1zj3vqk775ns5w6i"
     }
   },
 

nix/deps/clojure/deps.list

@@ -3,12 +3,13 @@ babashka/fs/0.2.16/fs-0.2.16.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.2/oops-0.7.2.jar
-borkdude/edamame/1.1.17/edamame-1.1.17.jar
+borkdude/dynaload/0.3.5/dynaload-0.3.5.jar
+borkdude/edamame/1.3.23/edamame-1.3.23.jar
 borkdude/sci.impl.reflector/0.0.1/sci.impl.reflector-0.0.1.jar
 camel-snake-kebab/camel-snake-kebab/0.4.3/camel-snake-kebab-0.4.3.jar
 cheshire/cheshire/5.11.0/cheshire-5.11.0.jar
-cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0.jar
-cider/piggieback/0.5.2/piggieback-0.5.2.jar
+cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3.jar
+cider/piggieback/0.4.1/piggieback-0.4.1.jar
 clj-kondo/clj-kondo/2023.09.07/clj-kondo-2023.09.07.jar
 cljs-bean/cljs-bean/1.9.0/cljs-bean-1.9.0.jar
 clout/clout/2.1.2/clout-2.1.2.jar
@@ -58,6 +59,8 @@ javax/annotation/jsr250-api/1.0/jsr250-api-1.0.jar
 javax/servlet/servlet-api/2.5/servlet-api-2.5.jar
 javax/xml/bind/jaxb-api/2.3.0/jaxb-api-2.3.0.jar
 medley/medley/0.8.2/medley-0.8.2.jar
+metosin/malli/0.13.0/malli-0.13.0.jar
+mvxcvi/arrangement/2.1.0/arrangement-2.1.0.jar
 net/cgrand/macrovich/0.2.1/macrovich-0.2.1.jar
 net/java/dev/jna/jna/5.12.1/jna-5.12.1.jar
 nrepl/bencode/1.1.0/bencode-1.1.0.jar
@@ -79,6 +82,7 @@ org/clojure/data.priority-map/1.1.0/data.priority-map-1.1.0.jar
 org/clojure/google-closure-library/0.0-20230227-c7c0a541/google-closure-library-0.0-20230227-c7c0a541.jar
 org/clojure/google-closure-library-third-party/0.0-20230227-c7c0a541/google-closure-library-third-party-0.0-20230227-c7c0a541.jar
 org/clojure/spec.alpha/0.3.218/spec.alpha-0.3.218.jar
+org/clojure/test.check/1.1.1/test.check-1.1.1.jar
 org/clojure/tools.analyzer/1.1.0/tools.analyzer-1.1.0.jar
 org/clojure/tools.analyzer.jvm/1.2.2/tools.analyzer.jvm-1.2.2.jar
 org/clojure/tools.cli/1.0.206/tools.cli-1.0.206.jar
@@ -99,7 +103,7 @@ 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
 reagent/reagent/1.2.0/reagent-1.2.0.jar
 re-com/re-com/2.8.0/re-com-2.8.0.jar
-refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0.jar
+refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0.jar
 re-frame/re-frame/1.3.0/re-frame-1.3.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

nix/mobile/jsbundle/default.nix

@@ -67,9 +67,12 @@ stdenv.mkDerivation {
   '';
   buildPhase = ''
     # Assemble CLASSPATH from available clojure dependencies.
-    # We append 'src' so it can find the local sources.
-    export CLASS_PATH="$(find ${deps.clojure} \
-      -iname '*.jar' | tr '\n' ':')src"
+    # We prepend 'src' so it can find the local sources and prioritize
+    # our own namespaces over dependencies, given that indirect dependencies
+    # can also cause naming conflicts (e.g. prismatic/schema already uses
+    # namespace schema.core).
+    export CLASS_PATH="src:$(find ${deps.clojure} \
+      -iname '*.jar' | tr '\n' ':')"
 
     # target must be one of the builds defined in shadow-cljs.edn
     java -cp "$CLASS_PATH" clojure.main \

package.json

@@ -94,7 +94,7 @@
     "process": "0.11.10",
     "react-test-renderer": "18.0.0",
     "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#refs/tags/v2.0.2-status",
-    "shadow-cljs": "2.25.0"
+    "shadow-cljs": "2.26.2"
   },
   "binary": {
     "module_name": "status_nodejs_addon",

scripts/lint/require-i18n-resource-first.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env sh
+
+if rg --quiet --multiline '^\(ns.*\n^\s*\(:require\n(^\s*(;|#_).*\n)*(^\s*\[status-im2\.setup\.i18n-resources\W)' src/status_im2/core.cljs; then
+  exit 0
+elif [ $? -eq 1 ]; then
+  echo "status-im2.setup.i18n-resources must be loaded first (be the first one in ns :require form) in status-im2.core"
+  echo "For more info, check the comment here https://github.com/status-im/status-mobile/pull/17618#discussion_r1361275489"
+else
+  exit $?
+fi

shadow-cljs.edn

@@ -9,11 +9,13 @@
                 [cljs-bean "1.9.0"]
                 [com.cognitect/transit-cljs "0.8.280"]
                 [camel-snake-kebab "0.4.3"]
+                [metosin/malli "0.13.0"]
 
                 ;; Dev dependencies
-                [refactor-nrepl "2.5.0"]
-                [cider/cider-nrepl "0.25.3"]
+                [refactor-nrepl "3.9.1"]
+                [cider/cider-nrepl "0.31.0"]
                 [cider/piggieback "0.4.1"]
+                [org.slf4j/slf4j-nop "2.0.9"]
                 [re-frisk-remote "1.6.0"]
 
                 ;; Use the same version specified in the Nix dependency.
@@ -50,6 +52,7 @@
                     :after-load-async  status-im2.setup.hot-reload/reload
                     :build-notify      status-im2.setup.hot-reload/build-notify
                     :preloads          [re-frisk-remote.preload
+                                        status-im2.setup.schema-preload
                                         ;; In order to use component test helpers in the REPL we
                                         ;; need to preload namespaces that are not normally required
                                         ;; by production code, such as
@@ -71,6 +74,10 @@
                             :warnings           {:fn-deprecated false}
                             :closure-defines    {re-frame.trace/trace-enabled? true}
                             :source-map         false
+                            ;; This seems to be necessary while using the REPL,
+                            ;; otherwise sometimes you'll get weird errors when
+                            ;; instrumenting functions.
+                            :static-fns         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
@@ -104,13 +111,15 @@
    :output-dir "target/test"
    :optimizations :simple
    :target :node-test
+   :dev {:devtools {:preloads [status-im2.setup.schema-preload]}}
    ;; Uncomment line below to `make test-watch` a specific file
    ;; :ns-regexp "status-im2.subs.messages-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"
+   {schema.core/throw-on-error?                      true
+    status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
     status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
     status-im2.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
     status-im2.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
@@ -139,9 +148,17 @@
    :compiler-options {:optimizations :simple
                       :source-map    false}}
   :component-test {:target           :npm-module
-                   :entries          [quo.core-spec status-im2.core-spec]
+                   :entries          [;; We need to tell shadow-cljs to compile
+                                      ;; the preloads namespace because it will
+                                      ;; be used directly by Jest in the option
+                                      ;; setupFilesAfterEnv.
+                                      status-im2.setup.schema-preload
+
+                                      quo.core-spec
+                                      status-im2.core-spec]
                    :ns-regexp        "component-spec$"
                    :output-dir       "component-spec"
+                   :closure-defines  {schema.core/throw-on-error? true}
                    :compiler-options {:warnings-as-errors false
                                       :static-fns         false
                                       :infer-externs      true}}}}

src/mocks/js_dependencies.cljs

@@ -49,6 +49,7 @@
     :Text                     {}
     :StatusBar                {}
     :ScrollView               {}
+    :SafeAreaView             {}
     :KeyboardAvoidingView     {}
     :TextInput                {}
     :Image                    {}

src/quo/README.md

@@ -116,6 +116,17 @@ rendered. We use [React Native Testing Library](https://callstack.github.io/reac
 There are dozens of examples in the repository, so use them as a reference. A
 good and complete example is [quo.components.avatars.user-avatar.component-spec](/src/quo/components/avatars/user_avatar/component_spec.cljs)
 
+### No-props test
+
+When writing tests for the component that has props, please add one test that covers situation when props aren't passed. Because even if component not showing anything meaningful without props, it shouldn't crash.
+
+```clojure
+(h/describe "Transaction Progress"
+  (h/test "component renders without props"
+    (h/render [quo/transaction-progress {}])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+```
+
 ## Do not couple the library with re-frame
 
 Don't use re-frame inside this library (e.g. dispatch & subscribe). If a

src/quo/components/avatars/account_avatar/view.cljs

@@ -30,6 +30,6 @@
       {:accessibility-label      :account-emoji
        :adjusts-font-size-to-fit true
        :style                    {:font-size emoji-size}}
-      (string/trim emoji)]]))
+      (when emoji (string/trim emoji))]]))
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/avatars/channel_avatar/view.cljs

@@ -67,7 +67,7 @@
      [rn/text
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
-      (string/trim emoji)])
+      (when emoji (string/trim emoji))])
    [lock locked? size theme]])
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/avatars/wallet_user_avatar/style.cljs

@@ -2,26 +2,30 @@
   (:require [quo.foundations.colors :as colors]))
 
 (defn- circle-color
-  [customization-color]
-  (colors/custom-color customization-color 50 20))
+  [customization-color neutral? theme]
+  (if neutral?
+    (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+    (colors/custom-color customization-color 50 20)))
 
 (defn- text-color
-  [customization-color theme]
-  (colors/theme-colors
-   (colors/custom-color customization-color 50)
-   (colors/custom-color customization-color 60)
-   theme))
+  [customization-color neutral? theme]
+  (if neutral?
+    (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
+    (colors/theme-colors
+     (colors/custom-color customization-color 50)
+     (colors/custom-color customization-color 60)
+     theme)))
 
 (defn container
-  [circle-size customization-color]
+  [circle-size customization-color neutral? theme]
   {:width            circle-size
    :height           circle-size
    :border-radius    circle-size
    :text-align       :center
    :justify-content  :center
    :align-items      :center
-   :background-color (circle-color customization-color)})
+   :background-color (circle-color customization-color neutral? theme)})
 
 (defn text
-  [customization-color theme]
-  {:color (text-color customization-color theme)})
+  [customization-color neutral? theme]
+  {:color (text-color customization-color neutral? theme)})

src/quo/components/avatars/wallet_user_avatar/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.avatars.wallet-user-avatar.view
-  (:require [quo.components.avatars.wallet-user-avatar.style :as style]
+  (:require [clojure.string :as string]
+            [quo.components.avatars.wallet-user-avatar.style :as style]
             [quo.components.markdown.text :as text]
             [quo.theme :as quo.theme]
             [react-native.core :as rn]
@@ -40,18 +41,21 @@
   :customization-color  - keyword (default: nil) - color of the avatar
   :size   - keyword (default: last element of properties object) - size of the
   avatar
-  :monospace? - boolean (default: false) - use monospace font"
-  [{:keys [full-name customization-color size theme monospace?]
+  :monospace? - boolean (default: false) - use monospace font
+  :lowercase? - boolean (default: false) - lowercase text
+  :neutral? - boolean (default: false) - use neutral colors variant"
+  [{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
     :or   {size biggest-possible}}]
   (let [circle-size (:size (size properties))
-        small?      (check-if-size-small size)]
+        small?      (check-if-size-small size)
+        initials    (utils.string/get-initials full-name (if small? 1 2))]
     [rn/view
-     {:style (style/container circle-size customization-color)}
+     {:style (style/container circle-size customization-color neutral? theme)}
      [text/text
       {:accessibility-label :wallet-user-avatar
        :size                (:font-size (size properties))
        :weight              (if monospace? :monospace (:font-weight (size properties)))
-       :style               (style/text customization-color theme)}
-      (utils.string/get-initials full-name (if small? 1 2))]]))
+       :style               (style/text customization-color neutral? theme)}
+      (if (and initials lowercase?) (string/lower-case initials) initials)]]))
 
 (def wallet-user-avatar (quo.theme/with-theme view-internal))

src/quo/components/colors/color/constants.cljs

@@ -1,3 +1,3 @@
 (ns quo.components.colors.color.constants)
 
-(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
+(def ^:const color-size 48)

src/quo/components/colors/color/style.cljs

@@ -1,12 +1,13 @@
 (ns quo.components.colors.color.style
   (:require
+    [quo.components.colors.color.constants :as constants]
     [quo.foundations.colors :as colors]
     [utils.responsiveness :as responsiveness]))
 
 (defn color-button-common
   [window-width]
-  {:width         48
-   :height        48
+  {:width         constants/color-size
+   :height        constants/color-size
    :border-width  4
    :border-radius 24
    :margin-right  (-> window-width

src/quo/components/colors/color_picker/component_spec.cljs

@@ -5,10 +5,6 @@
     [test-helpers.component :as h]))
 
 (h/describe "color-picker"
-  (h/test "color picker rendered"
-    (h/render [color-picker/view])
-    (-> (h/expect (h/get-all-by-label-text :color-picker-item))
-        (.toHaveLength 11)))
   (h/test "clicks on a color item"
     (let [event (h/mock-fn)]
       (h/render [color-picker/view {:on-change #(event)}])
@@ -20,11 +16,6 @@
       (h/render [color-picker/view {:on-change #(reset! selected %)}])
       (h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
       (-> (h/expect @selected)
-          (.toStrictEqual :blue))))
-  (h/test "all of the values of colors-list are rendered"
-    (h/render [color-picker/view])
-    (js/Promise.all (map (fn [color]
-                           (h/is-truthy (h/get-all-by-label-text color)))
-                         color-picker/color-list))))
+          (.toStrictEqual :blue)))))
 
 

src/quo/components/colors/color_picker/view.cljs

@@ -1,39 +1,67 @@
 (ns quo.components.colors.color-picker.view
   (:require
+    [quo.components.colors.color.constants :as constants]
     [quo.components.colors.color.view :as color]
+    [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
-(def color-list
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
-
 (defn- on-change-handler
   [selected color-name on-change]
   (reset! selected color-name)
   (when on-change (on-change color-name)))
 
-(defn view
+(defn get-item-layout
+  [_ index]
+  #js
+   {:length constants/color-size
+    :offset (* (+ constants/color-size 8) index)
+    :index  index})
+
+(defn- view-internal
   "Options
    - `default-selected` Default selected color name.
    - `on-change` Callback called when a color is selected `(fn [color-name])`.
    - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected]}]
+  [{:keys [default-selected blur? on-change feng-shui? container-style]}]
   (let [selected              (reagent/atom default-selected)
-        {window-width :width} (rn/get-window)]
-    (fn [{:keys [blur? on-change feng-shui? container-style]}]
-      [rn/scroll-view
-       {:horizontal                        true
-        :shows-horizontal-scroll-indicator false
-        :content-container-style           container-style}
-       (doall (map-indexed (fn [idx color]
-                             [color/view
-                              {:selected?    (= color @selected)
-                               :on-press     #(on-change-handler selected % on-change)
-                               :blur?        blur?
-                               :key          color
-                               :color        color
-                               :idx          idx
-                               :window-width window-width}])
-                           ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-                           ;; https://github.com/status-im/status-mobile/discussions/16676
-                           (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+        {window-width :width} (rn/get-window)
+        ref                   (atom nil)]
+    (rn/use-effect #(js/setTimeout (fn []
+                                     (.scrollToIndex ^js @ref
+                                                     #js
+                                                      {:animated     true
+                                                       :index        (.indexOf colors/account-colors
+                                                                               default-selected)
+                                                       :viewPosition 0.5}))
+                                   50))
+    [rn/flat-list
+     {:ref                               #(reset! ref %)
+      ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+      ;; https://github.com/status-im/status-mobile/discussions/16676
+      :data                              (if feng-shui?
+                                           (conj colors/account-colors :feng-shui)
+                                           colors/account-colors)
+      :render-fn                         (fn [color idx]
+                                           [color/view
+                                            {:selected?    (= color @selected)
+                                             :on-press     (fn [e]
+                                                             (.scrollToIndex ^js @ref
+                                                                             #js
+                                                                              {:animated     true
+                                                                               :index        idx
+                                                                               :viewPosition 0.5})
+                                                             (on-change-handler selected e on-change))
+                                             :blur?        blur?
+                                             :key          color
+                                             :color        color
+                                             :idx          idx
+                                             :window-width window-width}])
+      :get-item-layout                   get-item-layout
+      :horizontal                        true
+      :shows-horizontal-scroll-indicator false
+      :content-container-style           container-style}]))
+
+(defn view
+  [props]
+  [:f> view-internal props])

src/quo/components/community/community_stat/component_spec.cljs

@@ -0,0 +1,18 @@
+(ns quo.components.community.community-stat.component-spec
+  (:require
+    [quo.core :as quo]
+    [test-helpers.component :as h]
+    utils.money))
+
+(h/describe "Community Stat Component"
+  (h/test "default render"
+    (h/render [quo/community-stat
+               {:value               "5000"
+                :icon                :i/active-members
+                :accessibility-label :community-active-members}])
+    (h/is-truthy (h/query-by-label-text :community-active-members)))
+  (h/test "renders community stat with a value"
+    (h/render [quo/community-stat
+               {:value "5000"
+                :icon  :i/members}])
+    (h/is-truthy (h/query-by-text (utils.money/format-amount "5000")))))

src/quo/components/community/community_stat/style.cljs

@@ -0,0 +1,12 @@
+(ns quo.components.community.community-stat.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction :row
+   :align-items    :center
+   :height         22})
+
+(defn text
+  [theme]
+  {:color       (colors/theme-colors colors/black colors/white theme)
+   :margin-left 2})

src/quo/components/community/community_stat/view.cljs

@@ -0,0 +1,26 @@
+(ns quo.components.community.community-stat.view
+  (:require [quo.components.community.community-stat.style :as style]
+            [quo.components.icon :as quo.icons]
+            [quo.components.markdown.text :as quo.text]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.money))
+
+(defn view-internal
+  [{:keys [value icon theme style accessibility-label]}]
+  [rn/view
+   {:style               (merge style/container style)
+    :accessibility-label accessibility-label}
+   [quo.icons/icon icon
+    {:size            16
+     :container-style {:align-items     :center
+                       :justify-content :center}
+     :resize-mode     :center
+     :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+   [quo.text/text
+    {:size   :paragraph-1
+     :weight :regular
+     :style  (style/text theme)} (utils.money/format-amount value)]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo/components/community/community_view.cljs

@@ -1,52 +1,30 @@
 (ns quo.components.community.community-view
   (:require
+    [quo.components.community.community-stat.view :as community-stat]
     [quo.components.community.style :as style]
-    [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
     [quo.components.tags.permission-tag :as permission]
     [quo.components.tags.tag :as tag]
     [quo.foundations.colors :as colors]
     [quo.theme :as theme]
     [react-native.core :as rn]
-    [react-native.gesture :as gesture]
-    utils.money))
-
-(defn community-stats
-  [{:keys [icon members-count icon-color accessibility-label]}]
-  [rn/view
-   {:accessibility-label accessibility-label
-    :style               (style/stats-count-container)}
-   [rn/view {:margin-right 2}
-    [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-2}
-    members-count]])
+    [react-native.gesture :as gesture]))
 
 (defn community-stats-column
-  [{:keys [type theme blur? members-count active-count]}]
-  (let [icon-color (if (and (= :dark theme) blur?)
-                     colors/white-opa-40
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
-    [rn/view
-     (if (= type :card-view)
-       (style/card-stats-container)
-       (style/list-stats-container))
-     [community-stats
-      {:accessibility-label :stats-members-count
-       :icon                :i/group
-       :members-count       (utils.money/format-amount members-count)
-       :icon-color          icon-color}]
-     [community-stats
-      {:accessibility-label :stats-active-count
-       :icon                :i/active-members
-       :members-count       (utils.money/format-amount active-count)
-       :icon-color          icon-color}]]))
+  [{:keys [type members-count active-count]}]
+  [rn/view
+   (if (= type :card-view)
+     (style/card-stats-container)
+     (style/list-stats-container))
+   [community-stat/view
+    {:accessibility-label :stats-members-count
+     :icon                :i/group
+     :value               members-count
+     :style               {:margin-right 12}}]
+   [community-stat/view
+    {:accessibility-label :stats-active-count
+     :icon                :i/active-members
+     :value               active-count}]])
 
 (defn community-tags
   [{:keys [tags container-style last-item-style]}]

src/quo/components/community/style.cljs

@@ -17,12 +17,6 @@
 (def detail-container
   {:flex 1})
 
-(defn stats-count-container
-  []
-  {:flex-direction :row
-   :align-items    :center
-   :margin-right   16})
-
 (defn card-stats-container
   []
   {:flex-direction :row})

src/quo/components/counter/step/component_spec.cljs

@@ -3,18 +3,22 @@
     [quo.components.counter.step.view :as step]
     [test-helpers.component :as h]))
 
+(defn render
+  [component]
+  (h/render-with-theme-provider component :dark))
+
 (h/describe "step component"
   (h/test "default render of step component"
-    (h/render [step/view {} nil])
+    (render [step/view {} nil])
     (-> (h/expect (h/query-by-label-text :step-counter))
         (h/is-truthy)))
 
   (h/test "renders step with a string value"
-    (h/render [step/view {} "1"])
+    (render [step/view {} "1"])
     (-> (h/expect (h/get-by-text "1"))
         (h/is-truthy)))
 
   (h/test "renders step with an integer value"
-    (h/render [step/view {} 1])
+    (render [step/view {} 1])
     (-> (h/expect (h/get-by-text "1"))
         (h/is-truthy))))

src/quo/components/counter/step/view.cljs

@@ -2,10 +2,24 @@
   (:require
     [quo.components.counter.step.style :as style]
     [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    quo.theme
     [react-native.core :as rn]
+    [schema.core :as schema]
     [utils.number]))
 
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:accessibility-label {:optional true} [:maybe :keyword]]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:in-blur-view? {:optional true} [:maybe :boolean]]
+      [:theme :schema.common/theme]
+      [:type {:optional true} [:enum :active :complete :neutral]]]]
+    [:value [:maybe [:or :string :int]]]]
+   :any])
+
 (defn- view-internal
   [{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
   (let [type  (or type :neutral)
@@ -23,6 +37,9 @@
      [text/text
       {:weight :medium
        :size   :label
-       :style  {:color (style/text-color type theme)}} label]]))
+       :style  {:color (style/text-color type theme)}}
+      label]]))
 
-(def view (theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/drawers/bottom_actions/view.cljs

@@ -24,9 +24,9 @@
   :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
   [props]
   (let [{:keys [actions description button-one-label button-two-label
-                button-one-props button-two-props theme scroll? customization-color]}
+                button-one-props button-two-props theme scroll? customization-color container-style]}
         (merge default-props props)]
-    [:<>
+    [rn/view {:style container-style}
      [rn/view {:style style/buttons-container}
       (when (= actions :2-actions)
         [button/button

src/quo/components/dropdowns/dropdown_input/component_spec.cljs

@@ -0,0 +1,56 @@
+(ns quo.components.dropdowns.dropdown-input.component-spec
+  (:require
+    [quo.components.dropdowns.dropdown-input.view :as dropdown-input]
+    [test-helpers.component :as h]))
+
+(h/describe "Dropdown Input"
+
+  (h/test "default render"
+    (let [header-label "Label"
+          label        "Dropdown"]
+      (h/render [dropdown-input/view
+                 {:label? true
+                  :header-label
+                  header-label} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-truthy (h/get-by-text header-label))
+      (h/is-truthy (h/get-by-text label))))
+
+  (h/test "render with icon"
+    (let [label "Dropdown"]
+      (h/render [dropdown-input/view
+                 {:icon? true
+                  :icon-name
+                  :i/wallet
+                  :label? true}
+                 label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-truthy (h/get-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))))
+
+  (h/test "render in active state"
+    (let [label "Dropdown"]
+      (h/render [dropdown-input/view
+                 {:state :active
+                  :label?
+                  true} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-truthy (h/get-by-label-text :right-icon "Expecting active state icon"))))
+
+  (h/test "render in disabled state"
+    (let [label "Dropdown"]
+      (h/render [dropdown-input/view
+                 {:state  :disabled
+                  :label? true} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-disabled (h/get-by-text label "Dropdown should be disabled in disabled state"))))
+
+  (h/test "on-press"
+    (let [event (h/mock-fn)
+          label "Dropdown"]
+      (h/render [dropdown-input/view
+                 {:on-press event
+                  :label?
+                  true} label])
+      (h/fire-event :press (h/get-by-text label))
+      (h/was-called event))))

src/quo/components/dropdowns/dropdown_input/properties.cljs

@@ -0,0 +1,49 @@
+(ns quo.components.dropdowns.dropdown-input.properties
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(def icon-size 20)
+
+(defn- grey-blur
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-80-opa-20
+                                              colors/white-opa-40
+                                              theme)
+                         (colors/theme-colors colors/neutral-80-opa-10
+                                              colors/white-opa-10
+                                              theme))})
+
+(defn- outline
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
+
+(defn- grey
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+                         (colors/theme-colors colors/neutral-20
+                                              colors/neutral-60
+                                              theme))})
+
+(defn get-colors
+  [{:keys [theme state blur?]}]
+  (let [active? (= state :active)]
+    (cond
+      blur?            (grey-blur theme active?)
+      (= theme :dark)  (outline theme active?)
+      (= theme :light) (grey theme active?))))

src/quo/components/dropdowns/dropdown_input/style.cljs

@@ -0,0 +1,62 @@
+(ns quo.components.dropdowns.dropdown-input.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(def gap 8)
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(def left-icon
+  {:margin-right gap})
+
+(defn right-icon
+  [theme]
+  {:color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :margin-right gap})
+
+(defn header-label
+  [theme blur?]
+  {:color         (if blur?
+                    (colors/theme-colors colors/neutral-80-opa-40
+                                         colors/white-opa-70
+                                         theme)
+                    (colors/theme-colors colors/neutral-50
+                                         colors/neutral-40
+                                         theme))
+   :margin-bottom gap})
+
+(def root-container
+  {:width  "100%"
+   :height 40})
+
+(defn container
+  [{:keys [background-color border-color]}
+   {:keys [icon? state]}]
+  (cond-> {:align-items      :center
+           :justify-content  :space-between
+           :flex-direction   :row
+           :padding-vertical 9
+           :padding-left     16
+           :padding-right    12
+           :overflow         :hidden
+           :background-color background-color
+           :border-radius    12}
+
+    icon?
+    (assoc :padding-left 12)
+
+    border-color
+    (assoc :border-color border-color
+           :border-width 1)
+
+    (= state :disabled)
+    (assoc :opacity 0.3)))
+
+(def right-half-container
+  {:flex-direction :row
+   :align-items    :center})

src/quo/components/dropdowns/dropdown_input/view.cljs

@@ -0,0 +1,68 @@
+(ns quo.components.dropdowns.dropdown-input.view
+  (:require
+    [quo.components.dropdowns.dropdown-input.properties :as properties]
+    [quo.components.dropdowns.dropdown-input.style :as style]
+    [quo.components.icon :as icon]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as theme]
+    [react-native.core :as rn]))
+
+(defn- view-internal
+  [{:keys [state theme on-press icon?
+           label? blur?
+           accessibility-label header-label]
+    :or   {state        :default
+           icon?        true
+           label?       true
+           blur?        false
+           header-label "Label"}
+    :as   props}
+   label]
+  (let [{:keys [left-icon-color right-icon-color right-icon-color-2]
+         :as   colors} (properties/get-colors props)
+        right-icon     (if (= state :active) :i/pullup :i/dropdown)]
+    [rn/view
+     {:style style/root-container}
+     (when label?
+       [text/text
+        {:size   :paragraph-2
+         :weight :medium
+         :align  :left
+         :style  (style/header-label theme blur?)} header-label])
+     [rn/pressable
+      {:accessibility-label (or accessibility-label :dropdown)
+       :disabled            (= state :disabled)
+       :on-press            on-press
+       :style               (style/container colors props)}
+      [rn/view
+       {:style style/right-half-container}
+       (when icon?
+         [icon/icon
+          :i/placeholder
+          {:accessibility-label :left-icon
+           :color               left-icon-color
+           :size                properties/icon-size
+           :container-style     style/left-icon}])
+       [text/text
+        {:size            :paragraph-1
+         :weight          :regular
+         :number-of-lines 1
+         :style           (style/right-icon theme)}
+        label]]
+      [icon/icon
+       right-icon
+       {:size                properties/icon-size
+        :accessibility-label :right-icon
+        :color               right-icon-color
+        :color-2             right-icon-color-2}]]]))
+
+(def view
+  "Props:
+    - state: :default (default) | :active | :disabled
+    - label: string
+    - header-label: string
+    - icon?: boolean
+    - label?: boolean
+    - blur?: boolean
+    - on-press: function"
+  (theme/with-theme view-internal))

src/quo/components/graph/wallet_graph/style.cljs

@@ -19,3 +19,7 @@
    :background-color colors/danger-50
    :align-items      :center
    :justify-content  :center})
+
+(def empty-state
+  {:width  375
+   :height 116})

src/quo/components/graph/wallet_graph/view.cljs

@@ -2,11 +2,12 @@
   (:require
     [quo.components.graph.utils :as utils]
     [quo.components.graph.wallet-graph.style :as style]
-    [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]
+    [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
     [react-native.charts :as charts]
     [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
     [react-native.linear-gradient :as linear-gradient]))
 
 (defn- time-frame->max-data-points
@@ -42,11 +43,10 @@
         gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
         fill-color      (colors/theme-colors colors/white colors/neutral-95)]
     (if (= time-frame :empty)
-      [rn/view
-       {:accessibility-label :illustration
-        :style               style/illustration}
-       [text/text {:style {:color colors/white}}
-        "Illustration here"]]
+      [fast-image/fast-image
+       {:style               style/empty-state
+        :source              (resources/get-themed-image :no-funds theme)
+        :accessibility-label :illustration}]
       [rn/view
        [linear-gradient/linear-gradient
         {:colors gradient-colors

src/quo/components/info/info_message.cljs

@@ -3,22 +3,18 @@
     [quo.components.icon :as quo.icons]
     [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
+    [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
-(def themes
-  {:light {:default colors/neutral-50
-           :success colors/success-50
-           :error   colors/danger-50}
-   :dark  {:default colors/neutral-40
-           :success colors/success-60
-           :error   colors/danger-60}})
-
 (defn get-color
-  [k]
-  (get-in themes [(theme/get-theme) k]))
+  [k theme]
+  (case k
+    :success (colors/resolve-color :success theme)
+    :error   (colors/resolve-color :danger theme)
+    :warning (colors/resolve-color :warning theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
-(defn info-message
+(defn view-internal
   "[info-message opts \"message\"]
   opts
   {:type           :default/:success/:error
@@ -27,11 +23,11 @@
    :text-color     colors/white  ;; text color override
    :icon-color     colors/white  ;; icon color override
    :no-icon-color? false         ;; disable tint color for icon"
-  [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
+  [{:keys [type size theme icon text-color icon-color no-icon-color? style accessibility-label]} message]
   (let [weight     (if (= size :default) :regular :medium)
         icon-size  (if (= size :default) 16 12)
         size       (if (= size :default) :paragraph-2 :label)
-        text-color (or text-color (get-color type))
+        text-color (or text-color (get-color type theme))
         icon-color (or icon-color text-color)]
     [rn/view
      {:style (merge {:flex-direction :row
@@ -42,7 +38,10 @@
        :no-color no-icon-color?
        :size     icon-size}]
      [text/text
-      {:size   size
-       :weight weight
-       :style  {:color             text-color
-                :margin-horizontal 4}} message]]))
+      {:accessibility-label accessibility-label
+       :size                size
+       :weight              weight
+       :style               {:color             text-color
+                             :margin-horizontal 4}} message]]))
+
+(def info-message (quo.theme/with-theme view-internal))

src/quo/components/ios/drawer_bar/style.cljs

@@ -0,0 +1,17 @@
+(ns quo.components.ios.drawer-bar.style
+  (:require
+    [quo.foundations.colors :as colors]
+    [quo.theme :as theme]))
+
+(def handle-container
+  {:padding-vertical 8
+   :height           20
+   :align-items      :center})
+
+(defn handle
+  [{:keys [theme]}]
+  {:width            32
+   :height           4
+   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
+   :opacity          (theme/theme-value 0.05 0.1 theme)
+   :border-radius    100})

src/quo/components/ios/drawer_bar/view.cljs

@@ -0,0 +1,12 @@
+(ns quo.components.ios.drawer-bar.view
+  (:require
+    [quo.components.ios.drawer-bar.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]))
+
+(defn- view-internal
+  [props]
+  [rn/view {:style style/handle-container}
+   [rn/view {:style (style/handle props)}]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo/components/list_items/account/component_spec.cljs

@@ -13,7 +13,7 @@
     (h/render [account/view])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 5)})))
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
 
   (h/test "on-press-in changes state to :pressed with blur? enabled"
     (h/render [account/view {:blur? true}])
@@ -21,31 +21,26 @@
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor colors/white-opa-5})))
 
-  (h/test "on-press-out changes state to :active"
-    (h/render [account/view])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 10)})))
+  (h/test "render with state :active"
+    (h/render [account/view {:state :active}])
+    (h/has-style (h/query-by-label-text :container)
+                 {:backgroundColor (colors/resolve-color :blue :light 10)}))
 
-  (h/test "on-press-out changes state to :active with blur? enabled"
-    (h/render [account/view {:blur? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor colors/white-opa-10})))
+  (h/test "render with state :active and blur? enabled"
+    (h/render [account/view
+               {:blur? true
+                :state :active}])
+    (h/has-style (h/query-by-label-text :container)
+                 {:backgroundColor colors/white-opa-10}))
 
-  (h/test "on-press-out changes state to :selected"
-    (h/render [account/view {:selectable? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/is-truthy (h/query-by-label-text :check-icon))))
+  (h/test "render with state :selected"
+    (h/render [account/view {:state :selected}])
+    (h/is-truthy (h/query-by-label-text :check-icon)))
 
-  (h/test "on-press-out calls on-press"
+  (h/test "calls on-press"
     (let [on-press (h/mock-fn)]
       (h/render [account/view {:on-press on-press}])
-      (h/fire-event :on-press-in (h/get-by-label-text :container))
-      (h/fire-event :on-press-out (h/get-by-label-text :container))
+      (h/fire-event :on-press (h/get-by-label-text :container))
       (h/was-called on-press)))
 
   (h/test "renders token props if type :tag"

src/quo/components/list_items/account/style.cljs

@@ -3,12 +3,12 @@
     [quo.foundations.colors :as colors]))
 
 (defn- background-color
-  [{:keys [state blur? customization-color]}]
-  (cond (or (= state :pressed) (= state :selected))
-        (if blur? colors/white-opa-5 (colors/custom-color customization-color 50 5))
+  [{:keys [state pressed? blur? customization-color]}]
+  (cond (or pressed? (= state :selected))
+        (if blur? colors/white-opa-5 (colors/resolve-color customization-color :light 5))
         (= state :active)
-        (if blur? colors/white-opa-10 (colors/custom-color customization-color 50 10))
-        (and (= state :pressed) blur?) colors/white-opa-10
+        (if blur? colors/white-opa-10 (colors/resolve-color customization-color :light 10))
+        (and pressed? blur?) colors/white-opa-10
         :else :transparent))
 
 (defn container

src/quo/components/list_items/account/view.cljs

@@ -94,62 +94,42 @@
    [icon/icon :i/check
     {:color (if blur?
               colors/white
-              (colors/theme-colors (colors/custom-color customization-color 50)
-                                   (colors/custom-color customization-color 60)
-                                   theme))}]])
-
-(defn- f-internal-view
-  []
-  (let [state               (reagent/atom :default)
-        active-or-selected? (atom false)
-        timer               (atom nil)
-        on-press-in         (fn []
-                              (when-not (= @state :selected)
-                                (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [type selectable? blur? customization-color on-press]
-          :or   {customization-color :blue
-                 type                :default
-                 blur?               false}
-          :as   props}]
-      (let [on-press-out (fn []
-                           (let [new-state (if @active-or-selected?
-                                             :default
-                                             (if (and (= type :default) selectable?)
-                                               :selected
-                                               :active))]
-                             (when @timer (js/clearTimeout @timer))
-                             (reset! timer nil)
-                             (reset! active-or-selected? (or (= new-state :active)
-                                                             (= new-state :selected)))
-                             (reset! state new-state)
-                             (when on-press
-                               (on-press))))]
-        (rn/use-effect
-         #(cond (and selectable? (= type :default) (= @state :active))         (reset! state :selected)
-                (and (not selectable?) (= type :default) (= @state :selected)) (reset! state :active))
-         [selectable?])
-        [rn/pressable
-         {:style               (style/container
-                                {:state @state :blur? blur? :customization-color customization-color})
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :accessibility-label :container}
-         [account-view props]
-         [rn/view {:style (when (= type :tag) style/token-tag-container)}
-          (when (or (= type :balance-neutral)
-                    (= type :balance-negative)
-                    (= type :balance-positive))
-            [balance-view props])
-          (when (= type :tag)
-            [token-tag props])
-          (when (= type :action)
-            [options-button props])
-          (when (and (= type :default)
-                     (= @state :selected))
-            [check-icon props])]]))))
+              (colors/resolve-color customization-color theme))}]])
 
 (defn- internal-view
-  [props]
-  [:f> f-internal-view props])
+  [_]
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [type state blur? customization-color on-press]
+          :or   {customization-color :blue
+                 type                :default
+                 state               :default
+                 blur?               false}
+          :as   props}]
+      [rn/pressable
+       {:style               (style/container
+                              {:state               state
+                               :blur?               blur?
+                               :customization-color customization-color
+                               :pressed?            @pressed?})
+        :on-press-in         on-press-in
+        :on-press            on-press
+        :on-press-out        on-press-out
+        :accessibility-label :container}
+       [account-view props]
+       [rn/view {:style (when (= type :tag) style/token-tag-container)}
+        (cond
+          (#{:balance-neutral :balance-negative :balance-positive} type)
+          [balance-view props]
+
+          (= type :tag)
+          [token-tag props]
+
+          (= type :action)
+          [options-button props]
+
+          (and (= type :default) (= state :selected))
+          [check-icon props])]])))
 
 (def view (quo.theme/with-theme internal-view))

src/quo/components/list_items/address/view.cljs

@@ -13,11 +13,11 @@
   [{:keys [theme address networks blur?]}]
   [rn/view {:style style/left-container}
    [wallet-user-avatar/wallet-user-avatar
-    {:size       :medium
-     :f-name     "0"
-     :l-name     "x"
+    {:size       :size-32
+     :full-name  "0 x"
      :monospace? true
-     :uppercase? false}]
+     :lowercase? true
+     :neutral?   true}]
    [rn/view {:style style/account-container}
     [text/text {:size :paragraph-1}
      (map (fn [network]
@@ -25,8 +25,8 @@
             [text/text
              {:size   :paragraph-1
               :weight :semi-bold
-              :style  {:color (colors/resolve-color network theme)}}
-             (str (subs (name network) 0 3) ":")])
+              :style  {:color (colors/resolve-color (:network-name network) theme)}}
+             (str (:short-name network) ":")])
           networks)
      [text/text
       {:size   :paragraph-1

src/quo/components/list_items/community/view.cljs

@@ -148,8 +148,6 @@
         (when (and members (= type :discover))
           [community-view/community-stats-column
            {:type          :list-view
-            :theme         theme
-            :blur?         blur?
             :members-count (:members-count members)
             :active-count  (:active-count members)}])]
        [info-component

src/quo/components/list_items/saved_address/view.cljs

@@ -1,6 +1,5 @@
 (ns quo.components.list-items.saved-address.view
   (:require
-    [clojure.string :as string]
     [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.icon :as icon]
     [quo.components.list-items.saved-address.style :as style]
@@ -13,27 +12,23 @@
 
 (defn- left-container
   [{:keys [blur? theme name ens address customization-color]}]
-  (let [names      (remove string/blank? (string/split name " "))
-        first-name (if (> (count names) 0) (first names) "")
-        last-name  (if (> (count names) 1) (last names) "")]
-    [rn/view {:style style/left-container}
-     [wallet-user-avatar/wallet-user-avatar
-      {:size                :medium
-       :f-name              first-name
-       :l-name              last-name
-       :customization-color customization-color}]
-     [rn/view {:style style/account-container}
-      [text/text
-       {:weight :semi-bold
-        :size   :paragraph-1
-        :style  style/name-text}
-       name]
-      [text/text {:size :paragraph-2}
-       [text/text
-        {:size   :paragraph-2
-         :weight :monospace
-         :style  (style/account-address blur? theme)}
-        (or ens (address/get-shortened-key address))]]]]))
+  [rn/view {:style style/left-container}
+   [wallet-user-avatar/wallet-user-avatar
+    {:size                :size-32
+     :full-name           name
+     :customization-color customization-color}]
+   [rn/view {:style style/account-container}
+    [text/text
+     {:weight :semi-bold
+      :size   :paragraph-1
+      :style  style/name-text}
+     name]
+    [text/text {:size :paragraph-2}
+     [text/text
+      {:size   :paragraph-2
+       :weight :monospace
+       :style  (style/account-address blur? theme)}
+      (or ens (address/get-shortened-key address))]]]])
 
 (defn- internal-view
   []

src/quo/components/list_items/token_network/style.cljs

@@ -26,21 +26,25 @@
 
 (def info
   {:flex-direction :row
-   :align-items    :center})
+   :align-items    :center
+   :width          "70%"})
 
 (def token-info
-  {:height 40})
+  {:height 40
+   :flex   1})
 
 (def token-image
-  {:width         32
-   :height        32
-   :border-width  1
-   :border-radius 16
-   :border-color  colors/neutral-80-opa-5
-   :margin-right  8})
+  {:width            32
+   :height           32
+   :border-width     1
+   :border-radius    16
+   :border-color     colors/neutral-80-opa-5
+   :margin-right     8
+   :background-color colors/neutral-80-opa-5})
 
 (def values-container
-  {:align-items :flex-end})
+  {:align-items :flex-end
+   :max-width   "30%"})
 
 (defn fiat-value
   [theme]

src/quo/components/list_items/token_network/view.cljs

@@ -15,11 +15,14 @@
     {:source (or (:source token) token)
      :style  style/token-image}]
    [rn/view {:style style/token-info}
-    [text/text {:weight :semi-bold} label]
+    [text/text
+     {:weight          :semi-bold
+      :number-of-lines 1}
+     (if-not (empty? label) label "-")]
     [preview-list/view
      {:type   :network
       :size   :size-14
-      :number 3}
+      :number (count networks)}
      networks]]])
 
 (defn- values
@@ -30,12 +33,14 @@
       :accessibility-label :check-icon}]
     [rn/view {:style style/values-container}
      [text/text
-      {:weight :medium
-       :size   :paragraph-2}
+      {:weight          :medium
+       :size            :paragraph-2
+       :number-of-lines 1}
       token-value]
      [text/text
-      {:style (style/fiat-value theme)
-       :size  :paragraph-2}
+      {:style           (style/fiat-value theme)
+       :size            :paragraph-2
+       :number-of-lines 1}
       fiat-value]]))
 
 (defn- view-internal

src/quo/components/markdown/list/component_spec.cljs

@@ -22,9 +22,10 @@
     (h/is-truthy (h/get-by-text "test description")))
 
   (h/test "renders step component when step-number is valid and type is step"
-    (h/render [list/view
-               {:type        :step
-                :step-number 1}])
+    (h/render-with-theme-provider [list/view
+                                   {:type        :step
+                                    :step-number 1}]
+                                  :dark)
     (h/is-truthy (h/get-by-label-text :step-counter)))
 
   (h/test "renders decription with a context tag component and description after the tag"

src/quo/components/numbered_keyboard/keyboard_key/component_spec.cljs

@@ -36,7 +36,7 @@
                   :blur?     false
                   :type      :digit} 1])
       (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/was-called on-press)))
 
   (h/test "Is not pressable when disabled is true"
@@ -47,5 +47,5 @@
                   :blur?     false
                   :type      :digit} 1])
       (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/was-not-called on-press))))

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -7,6 +7,11 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
+(defn- label->accessibility-label
+  [label]
+  (let [label-name (if (keyword? label) (name label) label)]
+    (keyword (str "keyboard-key-" label-name))))
+
 (defn- view-internal
   []
   (let [pressed? (reagent/atom false)]
@@ -14,9 +19,11 @@
       (let [label-color      (style/get-label-color disabled? theme blur?)
             background-color (style/toggle-background-color @pressed? blur? theme)]
         [rn/pressable
-         {:accessibility-label :keyboard-key
+         {:accessibility-label (label->accessibility-label label)
           :disabled            (or disabled? (not label))
-          :on-press            (fn [] (on-press label))
+          :on-press            (fn []
+                                 (when on-press
+                                   (on-press label)))
           :on-press-in         #(reset! pressed? true)
           :on-press-out        #(reset! pressed? false)
           :style               (style/container background-color)}

src/quo/components/numbered_keyboard/numbered_keyboard/style.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.numbered-keyboard.numbered-keyboard.style)
 
 (def container
-  {:flex               1
+  {:display            :flex
    :padding-top        8
    :padding-horizontal 48})
 

src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs

@@ -17,13 +17,17 @@
 
 (defn- view-internal
   []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
+               container-style]
+        :or   {left-action :none}}]
     [rn/view
-     {:style style/container}
+     {:style (merge style/container
+                    container-style)}
      (for [row-index (range 1 4)]
        ^{:key row-index}
        [rn/view {:style style/row-container}
         (for [column-index (range 1 4)]
+          ^{:key (str row-index column-index)}
           [keyboard-item
            {:item      (+ (* (dec row-index) 3) column-index)
             :type      :digit
@@ -58,10 +62,10 @@
         :theme     theme}]
       (if delete-key?
         [keyboard-item
-         {:item      :i/delete
+         {:item      :i/backspace
           :type      :key
           :disabled? disabled?
-          :on-press  on-press
+          :on-press  on-delete
           :blur?     blur?
           :theme     theme}]
         [keyboard-item])]]))

src/quo/components/overlay/style.cljs

@@ -0,0 +1,22 @@
+(ns quo.components.overlay.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn overlay-background
+  [type]
+  (let [background-color (case type
+                           :shell  colors/neutral-80-opa-80-blur
+                           :drawer colors/neutral-100-opa-70-blur
+                           nil)]
+    {:position         :absolute
+     :top              0
+     :left             0
+     :right            0
+     :bottom           0
+     :background-color background-color}))
+
+(def container
+  {:flex 1})
+
+(def blur-container
+  {:flex             1
+   :background-color :transparent})

src/quo/components/overlay/view.cljs

@@ -0,0 +1,20 @@
+(ns quo.components.overlay.view
+  (:require
+    [quo.components.overlay.style :as style]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [type]} & children]
+  [rn/view {:style (style/overlay-background type)}
+   (if (= type :shell)
+     [blur/view
+      {:blur-amount   20
+       :blur-radius   25
+       :blur-type     :transparent
+       :overlay-color :transparent
+       :style         style/container}
+      [rn/view {:style style/blur-container}
+       children]]
+     [rn/view {:style style/container}
+      children])])

src/quo/components/profile/showcase_nav/style.cljs

@@ -2,11 +2,6 @@
   (:require
     [quo.foundations.colors :as colors]))
 
-(def height 56)
-
-(def root-container
-  {:height height})
-
 (defn container
   [state theme]
   {:padding-top      12

src/quo/components/profile/showcase_nav/view.cljs

@@ -25,7 +25,7 @@
 (defn- view-internal
   [{:keys [theme container-style default-active state data on-press active-id]}]
   [rn/view
-   {:style               (merge style/root-container container-style)
+   {:style               container-style
     :accessibility-label :showcase-nav}
    [rn/flat-list
     {:data                              data

src/quo/components/settings/data_item/component_spec.cljs

@@ -1,6 +1,7 @@
 (ns quo.components.settings.data-item.component-spec
   (:require
     [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
     [test-helpers.component :as h]))
 
 (h/describe
@@ -9,14 +10,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -26,14 +27,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               false
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -44,14 +45,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :small
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -62,14 +63,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -80,31 +81,31 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
-    (h/is-truthy (h/get-by-text "Description")))
+    (h/is-truthy (h/get-by-text "Subtitle")))
 
   (h/test "right icon is not visible when icon-right? is false"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -114,7 +115,6 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -122,17 +122,17 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
     (h/is-truthy (h/query-by-label-text :icon-right)))
 
-  (h/test "description icon is visible when description is icon"
+  (h/test "icon is visible when subtitle type is icon"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :icon
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -140,17 +140,17 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :icon
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
-    (h/is-truthy (h/query-by-label-text :description-icon)))
+    (h/is-truthy (h/query-by-label-text :subtitle-type-icon)))
 
-  (h/test "description image is visible when description is network"
+  (h/test "image is visible when subtitle type is network"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :network
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -158,17 +158,18 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :network
                 :icon                :i/placeholder
                 :emoji               "🎮"
-                :customization-color :yellow}])
-    (h/is-truthy (h/query-by-label-text :description-image)))
+                :customization-color :yellow
+                :network-image       (quo.resources/get-network :ethereum)}])
+    (h/is-truthy (h/query-by-label-text :subtitle-type-image)))
 
-  (h/test "description emoji is visible when description is account"
+  (h/test "emoji is visible when subtitle type is account"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -176,7 +177,8 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])

src/quo/components/settings/data_item/style.cljs

@@ -37,8 +37,8 @@
    :align-items    :center})
 
 (defn subtitle-icon-container
-  [description]
-  {:margin-right    (when (not= :default description) 4)
+  [subtitle-type]
+  {:margin-right    (when (not= :default subtitle-type) 4)
    :justify-content :center})
 
 (defn title

src/quo/components/settings/data_item/view.cljs

@@ -7,7 +7,6 @@
     [quo.components.markdown.text :as text]
     [quo.components.settings.data-item.style :as style]
     [quo.foundations.colors :as colors]
-    [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -17,13 +16,15 @@
   [rn/view {:style (style/loading-container size blur? theme)}])
 
 (defn- left-subtitle
-  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
+  [{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji
+           network-image]
+    :or   {subtitle-type :default}}]
   [rn/view {:style style/subtitle-container}
    (when (not= :small size)
-     [rn/view {:style (style/subtitle-icon-container description)}
-      (case description
+     [rn/view {:style (style/subtitle-icon-container subtitle-type)}
+      (case subtitle-type
         :icon    [icons/icon icon
-                  {:accessibility-label :description-icon
+                  {:accessibility-label :subtitle-type-icon
                    :size                16
                    :color               icon-color}]
         :account [account-avatar/view
@@ -32,8 +33,8 @@
                    :emoji               emoji
                    :type                :default}]
         :network [rn/image
-                  {:accessibility-label :description-image
-                   :source              (quo.resources/tokens :eth)
+                  {:accessibility-label :subtitle-type-image
+                   :source              network-image
                    :style               style/image}]
         nil)])
    [text/text
@@ -58,10 +59,9 @@
       (i18n/label :t/days)])])
 
 (defn- left-side
-  "The description can either be given as a string `description` or a component `custom-subtitle`"
-  [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
-           customization-color
-           emoji]
+  "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
+  [{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
+           customization-color network-image emoji]
     :as   props}]
   [rn/view {:style style/left-side}
    [left-title
@@ -79,13 +79,14 @@
        [left-subtitle
         {:theme               theme
          :size                size
-         :description         description
+         :subtitle-type       subtitle-type
          :icon                icon
          :icon-color          icon-color
          :blur?               blur?
          :subtitle            subtitle
          :customization-color customization-color
-         :emoji               emoji}]))])
+         :emoji               emoji
+         :network-image       network-image}]))])
 
 (defn- right-side
   [{:keys [label icon-right? right-icon icon-color communities-list]}]

src/quo/components/tags/base_tag.cljs

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

src/quo/components/tags/summary_tag/component_spec.cljs

@@ -0,0 +1,53 @@
+(ns quo.components.tags.summary-tag.component-spec
+  (:require
+    [quo.components.tags.summary-tag.view :as summary-tag]
+    [test-helpers.component :as h]))
+
+(h/describe "Summary tag component tests"
+  (h/test "Basic render"
+    (h/render [summary-tag/view])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "Account view render"
+    (h/render [summary-tag/view
+               {:type                :account
+                :label               "Alice's Account"
+                :customization-color "#ff0000"
+                :emoji               "🎉"}])
+    (h/is-truthy (h/get-by-text "Alice's Account")))
+
+  (h/test "Network view render"
+    (h/render [summary-tag/view
+               {:type         :network
+                :label        "Ethereum Network"
+                :image-source "path/to/ethereum-logo.png"}])
+    (h/is-truthy (h/get-by-text "Ethereum Network")))
+
+  (h/test "Saved address view render"
+    (h/render [summary-tag/view
+               {:type                :saved-address
+                :label               "Charlie's Wallet"
+                :customization-color "#00ff00"}])
+    (h/is-truthy (h/get-by-text "Charlie's Wallet")))
+
+  (h/test "Collectible view render"
+    (h/render [summary-tag/view
+               {:type         :collectible
+                :label        "Rare Artifact"
+                :image-source "path/to/artifact-image.png"}])
+    (h/is-truthy (h/get-by-text "Rare Artifact")))
+
+  (h/test "User view render"
+    (h/render [summary-tag/view
+               {:type                :user
+                :label               "Bob Smith"
+                :image-source        "path/to/profile-pic.png"
+                :customization-color "#0000ff"}])
+    (h/is-truthy (h/get-by-text "Bob Smith")))
+
+  (h/test "Token view render"
+    (h/render [summary-tag/view
+               {:type         :token
+                :label        "1,000 SNT"
+                :image-source "path/to/token-image.png"}])
+    (h/is-truthy (h/get-by-text "1,000 SNT"))))

src/quo/components/tags/summary_tag/style.cljs

@@ -0,0 +1,29 @@
+(ns quo.components.tags.summary-tag.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn main
+  [{:keys [type theme customization-color]}]
+  {:justify-content  :center
+   :align-items      :center
+   :height           32
+   :padding-left     4
+   :padding-right    10
+   :flex-direction   :row
+   :border-radius    (if (#{:account :collectible} type) 10 16)
+   :background-color (colors/resolve-color customization-color theme 10)})
+
+(defn label
+  [type theme]
+  {:color       (colors/theme-colors colors/neutral-100 colors/white theme)
+   :margin-left (if (= type :address) 6 4)})
+
+(def collectible-image
+  {:width         24
+   :height        24
+   :border-radius 10})
+
+(def token-image
+  {:width         24
+   :height        24
+   :border-radius 12})