lint fixes

some cleanup
improve flow
2023-12-05 02:31:24 -03:00 · 2023-12-05 02:23:06 -03:00 · 2023-12-05 01:13:05 -03:00 · 2023-12-04 21:46:33 -03:00 · 2023-12-04 20:48:48 -03:00 · 2023-12-04 20:48:48 -03:00
245 changed files with 5473 additions and 1346 deletions
@@ -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}
@@ -0,0 +1,2 @@
+{:lint-as {malli.experimental/defn schema.core/defn}
+ :linters {:unresolved-symbol {:exclude [(malli.core/=>)]}}}
@@ -36,6 +36,7 @@
  "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?]]}]
@@ -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
@@ -77,7 +77,6 @@ pipeline {
          }
        }
        stage('Upload') {
-          when { expression { !utils.isReleaseBuild() } }
          steps { script {
            env.DIAWI_URL = ios.uploadToDiawi()
            env.PKG_URL = env.DIAWI_URL
@@ -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
@@ -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"
    }
  },

@@ -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
@@ -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 \
@@ -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
@@ -9,6 +9,7 @@
                [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"]
@@ -50,6 +51,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 +73,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 +110,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 +147,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}}}}
@@ -49,6 +49,7 @@
    :Text                     {}
    :StatusBar                {}
    :ScrollView               {}
+    :SafeAreaView             {}
    :KeyboardAvoidingView     {}
    :TextInput                {}
    :Image                    {}
@@ -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
@@ -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))
@@ -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))
@@ -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)})
@@ -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))
@@ -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))))
@@ -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)))
@@ -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))))
@@ -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?))))
@@ -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})
@@ -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))
@@ -19,3 +19,7 @@
   :background-color colors/danger-50
   :align-items      :center
   :justify-content  :center})
+
+(def empty-state
+  {:width  375
+   :height 116})
@@ -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
@@ -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))
@@ -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
@@ -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
  []
@@ -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]
@@ -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
@@ -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"
@@ -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))))
@@ -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)}
@@ -1,7 +1,7 @@
 (ns quo.components.numbered-keyboard.numbered-keyboard.style)

 (def container
-  {:flex               1
+  {:display            :flex
   :padding-top        8
   :padding-horizontal 48})

@@ -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])]]))
@@ -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})
@@ -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])])
@@ -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}])
@@ -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
@@ -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]}]
@@ -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"))))
@@ -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})
@@ -0,0 +1,67 @@
+(ns quo.components.tags.summary-tag.view
+  (:require
+    [quo.components.avatars.account-avatar.view :as account-avatar]
+    [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.summary-tag.style :as style]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]))
+
+(defn- left-view
+  [{:keys [label type customization-color emoji image-source]}]
+  (case type
+    :account
+    [account-avatar/view
+     {:customization-color customization-color
+      :size                24
+      :emoji               emoji
+      :type                :default}]
+    :network
+    [rn/image
+     {:source image-source
+      :style  style/token-image}]
+    :saved-address
+    [wallet-user-avatar/wallet-user-avatar
+     {:full-name           label
+      :size                :size-24
+      :customization-color customization-color}]
+    :collectible
+    [rn/image
+     {:source image-source
+      :style  style/collectible-image}]
+    :user
+    [user-avatar/user-avatar
+     {:full-name           label
+      :size                :xs
+      :profile-picture     image-source
+      :customization-color customization-color}]
+    :token
+    [rn/image
+     {:source image-source
+      :style  style/token-image}]
+    nil))
+
+(defn- view-internal
+  "Options:
+    - :label - string - tag label
+    - :customization-color - color - It will be passed down to components that
+      should vary based on a custom color.
+    - :type - :token / :user / :collectible / :saved-address / :network / :account
+    - :emoji - string - emoji used for displaying account avatar
+    - :image-source - resource - image to display on :network, :collectible :user and :token
+    - :theme - :light / :dark"
+  [{:keys [label customization-color type theme]
+    :as   props
+    :or   {customization-color colors/neutral-80-opa-5}}]
+  [rn/view
+   {:accessibility-label :container
+    :style               (style/main (assoc props :customization-color customization-color))}
+   [left-view props]
+   [text/text
+    {:style  (style/label type theme)
+     :weight :semi-bold
+     :size   :heading-1} label]])
+
+(def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,28 @@
+(ns quo.components.text-combinations.channel-name.component-spec
+  (:require [quo.components.text-combinations.channel-name.view :as channel-name]
+            [test-helpers.component :as h]))
+
+(h/describe "Channel name"
+  (h/test "Renders Default"
+    (h/render [channel-name/view {:channel-name "Test channel"}])
+    (h/is-truthy (h/get-by-text "# Test channel")))
+
+  (h/test "Renders unlocked icon"
+    (h/render [channel-name/view
+               {:channel-name "Test channel"
+                :unlocked?    true}])
+    (h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon)))
+
+  (h/test "Renders muted icon"
+    (h/render [channel-name/view
+               {:channel-name "Test channel"
+                :muted?       true}])
+    (h/is-truthy (h/get-by-label-text :channel-name-muted-icon)))
+
+  (h/test "Renders muted and unlocked icon"
+    (h/render [channel-name/view
+               {:channel-name "Test channel"
+                :muted?       true
+                :unlocked?    true}])
+    (h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon))
+    (h/is-truthy (h/get-by-label-text :channel-name-muted-icon))))
@@ -0,0 +1,30 @@
+(ns quo.components.text-combinations.channel-name.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def container {:flex-direction :row})
+
+(def icons-container
+  {:flex-direction :row
+   :padding-top    8
+   :padding-bottom 4
+   :margin-left    6})
+
+(def icon {:width 20 :height 20})
+
+(def icons-gap {:width 4})
+
+(defn- blur-icon-color
+  [theme]
+  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme))
+
+(defn unlocked-icon-color
+  [theme blur?]
+  (if blur?
+    (blur-icon-color theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
+(defn muted-icon-color
+  [theme blur?]
+  (if blur?
+    (blur-icon-color theme)
+    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))
@@ -0,0 +1,40 @@
+(ns quo.components.text-combinations.channel-name.view
+  (:require [quo.components.icon :as icon]
+            [quo.components.markdown.text :as text]
+            [quo.components.text-combinations.channel-name.style :as style]
+            [quo.theme]
+            [react-native.core :as rn]))
+
+(defn icons
+  [{:keys [theme unlocked? muted? blur?]}]
+  [rn/view {:style style/icons-container}
+   (when unlocked?
+     [rn/view
+      {:style               style/icon
+       :accessibility-label :channel-name-unlocked-icon}
+      [icon/icon :i/unlocked
+       {:color (style/unlocked-icon-color theme blur?)
+        :size  20}]])
+
+   (when (and unlocked? muted?)
+     [rn/view {:style style/icons-gap}])
+
+   (when muted?
+     [rn/view
+      {:style               style/icon
+       :accessibility-label :channel-name-muted-icon}
+      [icon/icon :i/muted
+       {:color (style/muted-icon-color theme blur?)
+        :size  20}]])])
+
+(defn- view-internal
+  [{:keys [unlocked? muted? channel-name] :as props}]
+  [rn/view {:style style/container}
+   [text/text
+    {:size   :heading-1
+     :weight :semi-bold}
+    (str "# " channel-name)]
+   (when (or unlocked? muted?)
+     [icons props])])
+
+(def view (quo.theme/with-theme view-internal))
@@ -9,3 +9,8 @@

 (def description-description-text
  {:margin-top 8})
+
+(def emoji-hash
+  {:margin-top     8
+   :letter-spacing 0.5
+   :line-height    20.5})
@@ -27,7 +27,8 @@
           description-accessibility-label
           button-icon
           button-on-press
-           customization-color]}]
+           customization-color
+           emoji-hash]}]
  [rn/view {:style container-style}
   [rn/view
    {:style {:flex-direction  :row
@@ -55,6 +56,11 @@
       :weight              :regular
       :size                :paragraph-1
       :style               style/description-description-text}
-      description])])
+      description])
+   (when emoji-hash
+     [text/text
+      {:number-of-lines 1
+       :style           style/emoji-hash}
+      emoji-hash])])

 (def view (theme/with-theme view-internal))
@@ -133,7 +133,7 @@
     | key          | description |
  | -------------|-------------|
  | `:account-name`      | A value representing the account name (default `nil`)
-  | `:account`           | A value that represents if the account is a `:watched-account` or a `:default` account. (default `nil`)
+  | `:account`           | A value that represents if the account is a `:watched-address` or a `:default` account. (default `nil`)
  | `:time-frame`        | A value that represents the type of the timeframe, Can be from a preset of time frames. `[:1-week :1-month :3-months :1-year :custom]` (default `nil`) if custom is set, We expect a start time and if there's a space between two times that are in `time-frame-string` we'll split them with an arrow to the right icon
  | `:loading?`          | A value that indicates that component is loading data. (default `nil`)
  | `:metrics`           | A value that indicates if the account value have increased can be `:positive` or `:negative` (default `nil`)
@@ -28,3 +28,9 @@
  {:flex-direction  :row
   :align-items     :center
   :justify-content :space-between})
+
+(defn subtitle
+  [blur? theme]
+  {:color (if blur?
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
@@ -11,6 +11,7 @@
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
+    [react-native.platform :as platform]
    [reagent.core :as reagent]
    [utils.i18n :as i18n]))

@@ -19,11 +20,6 @@
  (let [first-name (first (string/split full-name #" "))]
    (i18n/label :t/keypair-title {:name first-name})))

-(defn details-string
-  [address stored]
-  (str (when address (str address " ∙ "))
-       (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
-
 (defn avatar
  [{{:keys [full-name]} :details
    avatar-type         :type
@@ -67,15 +63,21 @@
  [{:keys [details stored blur? theme]}]
  (let [{:keys [address]} details]
    [rn/view
-     {:style {:flex-direction :row
-              :align-items    :center}}
+     {:style               {:flex-direction :row
+                            :align-items    :center}
+      :accessibility-label :details}
     [text/text
-      {:size                :paragraph-2
-       :accessibility-label :details
-       :style               {:color (if blur?
-                                      colors/white-opa-40
-                                      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
-      (details-string address stored)]
+      {:size  :paragraph-2
+       :style (style/subtitle blur? theme)}
+      address]
+     [text/text
+      {:size  :paragraph-2
+       :style (merge (style/subtitle blur? theme) {:bottom (if platform/ios? 2 -2)})}
+      " ∙ "]
+     [text/text
+      {:size  :paragraph-2
+       :style (style/subtitle blur? theme)}
+      (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))]
     (when (= stored :on-keycard)
       [rn/view {:style {:margin-left 4}}
        [icon/icon :i/keycard-card
@@ -4,7 +4,7 @@

 (defn container
  [networks? theme]
-  {:width         335
+  {:width         "100%"
   :height        (if networks? 90 56)
   :border-radius 16
   :border-width  1
@@ -15,18 +15,26 @@

 (defn calc-value
  [crypto? currency token value conversion]
-  (if crypto?
-    (str (get common/currency-label currency) (.toFixed (* value conversion) 2))
-    (str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
+  (let [num-value (if (string? value) (parse-double (or value "0")) value)]
+    (if crypto?
+      (str (get common/currency-label currency) (.toFixed (* num-value conversion) 2))
+      (str (.toFixed (/ num-value conversion) 2) " " (string/upper-case (or (clj->js token) ""))))))

 (defn- view-internal
-  []
-  (let [width     (:width (rn/get-window))
-        value     (reagent/atom 0)
-        crypto?   (reagent/atom true)
-        input-ref (atom nil)]
-    (fn [{:keys [theme token currency conversion networks title customization-color]}]
-      [rn/view {:style (style/main-container width)}
+  [{external-value :value}]
+  (let [width             (:width (rn/get-window))
+        value             (reagent/atom nil)
+        crypto?           (reagent/atom true)
+        input-ref         (atom nil)
+        controlled-input? (some? external-value)]
+    (fn [{:keys          [theme token currency conversion networks title customization-color
+                          on-change-text on-swap container-style show-keyboard?]
+          :or            {show-keyboard? true}
+          external-value :value}]
+      [rn/view
+       {:style (merge
+                (style/main-container width)
+                container-style)}
       [rn/view {:style style/amount-container}
        [rn/pressable
         {:on-press #(when @input-ref (.focus ^js @input-ref))
@@ -35,29 +43,41 @@
                     :align-items    :flex-end}}
         [rn/image
          {:style  style/token
-           :source (resources/get-token token)}]
+           :source (resources/get-token (keyword (string/lower-case token)))}]
         [rn/text-input
-          {:ref                    #(reset! input-ref %)
-           :placeholder            "0"
-           :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-           :keyboard-type          :numeric
-           :max-length             12
-           :default-value          @value
-           :on-change-text         #(reset! value %)
-           :style                  (style/text-input theme)
-           :selection-color        customization-color}]
+          (cond-> {:auto-focus               true
+                   :ref                      #(reset! input-ref %)
+                   :placeholder              "0"
+                   :placeholder-text-color   (colors/theme-colors colors/neutral-40
+                                                                  colors/neutral-50
+                                                                  theme)
+                   :keyboard-type            :numeric
+                   :max-length               12
+                   :on-change-text           (fn [v]
+                                               (when-not controlled-input?
+                                                 (reset! value v))
+                                               (when on-change-text
+                                                 (on-change-text v)))
+                   :style                    (style/text-input theme)
+                   :selection-color          customization-color
+                   :show-soft-input-on-focus show-keyboard?}
+            controlled-input?       (assoc :value external-value)
+            (not controlled-input?) (assoc :default-value @value))]
         [text/text
          {:size   :paragraph-2
           :weight :semi-bold
           :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
                    :margin-right   8
                    :padding-bottom 2}}
-          (string/upper-case (clj->js (if @crypto? token currency)))]]
+          (string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]
        [button/button
         {:icon                true
          :icon-only?          true
          :size                32
-          :on-press            #(swap! crypto? not)
+          :on-press            (fn []
+                                 (swap! crypto? not)
+                                 (when on-swap
+                                   (on-swap @crypto?)))
          :type                :outline
          :accessibility-label :reorder}
         :i/reorder]]
@@ -68,6 +88,6 @@
         {:size   :paragraph-2
          :weight :medium
          :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         (calc-value @crypto? currency token @value conversion)]]])))
+         (calc-value @crypto? currency token (or external-value @value) conversion)]]])))

 (def view (quo.theme/with-theme view-internal))
@@ -48,6 +48,7 @@
    quo.components.drawers.drawer-buttons.view
    quo.components.drawers.drawer-top.view
    quo.components.drawers.permission-context.view
+    quo.components.dropdowns.dropdown-input.view
    quo.components.dropdowns.dropdown.view
    quo.components.dropdowns.network-dropdown.view
    quo.components.empty-state.empty-state.view
@@ -100,6 +101,7 @@
    quo.components.numbered-keyboard.keyboard-key.view
    quo.components.numbered-keyboard.numbered-keyboard.view
    quo.components.onboarding.small-option-card.view
+    quo.components.overlay.view
    quo.components.password.tips.view
    quo.components.profile.collectible.view
    quo.components.profile.profile-card.view
@@ -131,10 +133,12 @@
    quo.components.tags.number-tag.view
    quo.components.tags.permission-tag
    quo.components.tags.status-tags
+    quo.components.tags.summary-tag.view
    quo.components.tags.tag
    quo.components.tags.tags
    quo.components.tags.tiny-tag.view
    quo.components.tags.token-tag.view
+    quo.components.text-combinations.channel-name.view
    quo.components.text-combinations.view
    quo.components.wallet.account-card.view
    quo.components.wallet.account-origin.view
@@ -211,7 +215,7 @@

 ;;;; Counter
 (def counter quo.components.counter.counter.view/view)
-(def step quo.components.counter.step.view/view)
+(def step #'quo.components.counter.step.view/view)

 ;;;; Dividers
 (def divider-label quo.components.dividers.divider-label.view/view)
@@ -230,6 +234,7 @@

 ;;;; Dropdowns
 (def dropdown quo.components.dropdowns.dropdown.view/view)
+(def dropdown-input quo.components.dropdowns.dropdown-input.view/view)
 (def network-dropdown quo.components.dropdowns.network-dropdown.view/view)

 ;;;; Empty State
@@ -312,6 +317,9 @@
 (def notification quo.components.notifications.notification.view/notification)
 (def toast quo.components.notifications.toast.view/toast)

+;;;; Overlay
+(def overlay quo.components.overlay.view/view)
+
 ;;;; Password
 (def tips quo.components.password.tips.view/view)

@@ -360,6 +368,7 @@
 (def number-tag quo.components.tags.number-tag.view/view)
 (def permission-tag quo.components.tags.permission-tag/tag)
 (def status-tag quo.components.tags.status-tags/status-tag)
+(def summary-tag quo.components.tags.summary-tag.view/view)
 (def tag quo.components.tags.tag/tag)
 (def tags quo.components.tags.tags/tags)
 (def tiny-tag quo.components.tags.tiny-tag.view/view)
@@ -367,6 +376,7 @@

 ;;;; Text combinations
 (def text-combinations quo.components.text-combinations.view/view)
+(def channel-name quo.components.text-combinations.channel-name.view/view)

 ;;;; Wallet
 (def account-card quo.components.wallet.account-card.view/view)
@@ -26,6 +26,7 @@
    [quo.components.drawers.drawer-buttons.component-spec]
    [quo.components.drawers.drawer-top.component-spec]
    [quo.components.drawers.permission-context.component-spec]
+    [quo.components.dropdowns.dropdown-input.component-spec]
    [quo.components.dropdowns.dropdown.component-spec]
    [quo.components.dropdowns.network-dropdown.component-spec]
    [quo.components.gradient.gradient-cover.component-spec]
@@ -73,7 +74,9 @@
    [quo.components.switchers.group-messaging-card.component-spec]
    [quo.components.tags.network-tags.component-spec]
    [quo.components.tags.status-tags-component-spec]
+    [quo.components.tags.summary-tag.component-spec]
    [quo.components.tags.tiny-tag.component-spec]
+    [quo.components.text-combinations.channel-name.component-spec]
    [quo.components.wallet.account-card.component-spec]
    [quo.components.wallet.account-origin.component-spec]
    [quo.components.wallet.account-overview.component-spec]
@@ -148,7 +148,9 @@
 (def black-opa-30 (alpha black 0.3))
 (def black-opa-60 (alpha black 0.6))
 (def onboarding-header-black "#000716")
-
+(def border-avatar-light
+  "Simulates a blurred, transparent border for avatars in light mode"
+  "#475060")
 ;;;;Primary

 ;;Solid
@@ -201,6 +203,16 @@
 (def danger-50-opa-30 (alpha danger-50 0.3))
 (def danger-50-opa-40 (alpha danger-50 0.4))

+;;;;Warning
+(def warning-50 "#FF7D46")
+(def warning-60 "#CC6438")
+
+;;50 with transparency
+(def warning-50-opa-5 (alpha warning-50 0.05))
+(def warning-50-opa-10 (alpha warning-50 0.1))
+(def warning-50-opa-20 (alpha warning-50 0.2))
+(def warning-50-opa-30 (alpha warning-50 0.3))
+(def warning-50-opa-40 (alpha warning-50 0.4))

 ;; Colors for customizing users account
 (def customization
@@ -254,7 +266,9 @@
          :danger  {50 danger-50
                    60 danger-60}
          :success {50 success-50
-                    60 success-60}}
+                    60 success-60}
+          :warning {50 warning-50
+                    60 warning-60}}
         customization
         networks))

@@ -7,6 +7,15 @@
   :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")
   :bored-ape          (js/require "../resources/images/mock2/bored-ape.png")})

+(def ui-themed
+  {:no-funds
+   {:light (js/require "../resources/images/ui2/no-funds-light.png")
+    :dark  (js/require "../resources/images/ui2/no-funds-dark.png")}})
+
+(defn get-themed-image
+  [k theme]
+  (get-in ui-themed [k theme]))
+
 (defn get-image
  [k]
  (get ui k))
@@ -24,14 +33,191 @@
  (get dapps k))

 (def tokens
-  {:eth  (js/require "../resources/images/tokens/mainnet/ETH-token.png")
-   :knc  (js/require "../resources/images/tokens/mainnet/KNC.png")
-   :mana (js/require "../resources/images/tokens/mainnet/MANA.png")
-   :rare (js/require "../resources/images/tokens/mainnet/RARE.png")
-   :dai  (js/require "../resources/images/tokens/mainnet/DAI.png")
-   :fxc  (js/require "../resources/images/tokens/mainnet/FXC.png")
-   :usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
-   :snt  (js/require "../resources/images/tokens/mainnet/SNT.png")})
+  {:0-native  (js/require "../resources/images/tokens/mainnet/0-native.png")
+   :0xbtc     (js/require "../resources/images/tokens/mainnet/0XBTC.png")
+   :1st       (js/require "../resources/images/tokens/mainnet/1ST.png")
+   :abt       (js/require "../resources/images/tokens/mainnet/ABT.png")
+   :abyss     (js/require "../resources/images/tokens/mainnet/ABYSS.png")
+   :ae        (js/require "../resources/images/tokens/mainnet/AE.png")
+   :agld      (js/require "../resources/images/tokens/mainnet/AGLD.png")
+   :akro      (js/require "../resources/images/tokens/mainnet/AKRO.png")
+   :amb       (js/require "../resources/images/tokens/mainnet/AMB.png")
+   :ampl      (js/require "../resources/images/tokens/mainnet/AMPL.png")
+   :ant       (js/require "../resources/images/tokens/mainnet/ANT.png")
+   :appc      (js/require "../resources/images/tokens/mainnet/APPC.png")
+   :ast       (js/require "../resources/images/tokens/mainnet/AST.png")
+   :atmchain  (js/require "../resources/images/tokens/mainnet/ATMChain.png")
+   :ausdc     (js/require "../resources/images/tokens/mainnet/aUSDC.png")
+   :bal       (js/require "../resources/images/tokens/mainnet/BAL.png")
+   :bam       (js/require "../resources/images/tokens/mainnet/BAM.png")
+   :band      (js/require "../resources/images/tokens/mainnet/BAND.png")
+   :bat       (js/require "../resources/images/tokens/mainnet/BAT.png")
+   :blt       (js/require "../resources/images/tokens/mainnet/BLT.png")
+   :blz       (js/require "../resources/images/tokens/mainnet/BLZ.png")
+   :bnb       (js/require "../resources/images/tokens/mainnet/BNB.png")
+   :bnt       (js/require "../resources/images/tokens/mainnet/BNT.png")
+   :brln      (js/require "../resources/images/tokens/mainnet/BRLN.png")
+   :btm       (js/require "../resources/images/tokens/mainnet/BTM.png")
+   :btu       (js/require "../resources/images/tokens/mainnet/BTU.png")
+   :cdai      (js/require "../resources/images/tokens/mainnet/cDAI.png")
+   :cdt       (js/require "../resources/images/tokens/mainnet/CDT.png")
+   :centra    (js/require "../resources/images/tokens/mainnet/Centra.png")
+   :cfi       (js/require "../resources/images/tokens/mainnet/CFI.png")
+   :ck        (js/require "../resources/images/tokens/mainnet/CK.png")
+   :cnd       (js/require "../resources/images/tokens/mainnet/CND.png")
+   :cob       (js/require "../resources/images/tokens/mainnet/COB.png")
+   :comp      (js/require "../resources/images/tokens/mainnet/COMP.png")
+   :crv       (js/require "../resources/images/tokens/mainnet/CRV.png")
+   :cvc       (js/require "../resources/images/tokens/mainnet/CVC.png")
+   :dai       (js/require "../resources/images/tokens/mainnet/DAI.png")
+   :dat       (js/require "../resources/images/tokens/mainnet/DAT.png")
+   :data      (js/require "../resources/images/tokens/mainnet/DATA.png")
+   :dcn       (js/require "../resources/images/tokens/mainnet/DCN.png")
+   :dgd       (js/require "../resources/images/tokens/mainnet/DGD.png")
+   :dgx       (js/require "../resources/images/tokens/mainnet/DGX.png")
+   :dlt       (js/require "../resources/images/tokens/mainnet/DLT.png")
+   :dnt       (js/require "../resources/images/tokens/mainnet/DNT.png")
+   :dpy       (js/require "../resources/images/tokens/mainnet/DPY.png")
+   :drt       (js/require "../resources/images/tokens/mainnet/DRT.png")
+   :dta       (js/require "../resources/images/tokens/mainnet/DTA.png")
+   :edg       (js/require "../resources/images/tokens/mainnet/EDG.png")
+   :edo       (js/require "../resources/images/tokens/mainnet/EDO.png")
+   :ekg       (js/require "../resources/images/tokens/mainnet/EKG.png")
+   :eko       (js/require "../resources/images/tokens/mainnet/EKO.png")
+   :elf       (js/require "../resources/images/tokens/mainnet/ELF.png")
+   :emona     (js/require "../resources/images/tokens/mainnet/EMONA.png")
+   :eng       (js/require "../resources/images/tokens/mainnet/ENG.png")
+   :enj       (js/require "../resources/images/tokens/mainnet/ENJ.png")
+   :ens       (js/require "../resources/images/tokens/mainnet/ENS.png")
+   :eos       (js/require "../resources/images/tokens/mainnet/EOS.png")
+   :equad     (js/require "../resources/images/tokens/mainnet/EQUAD.png")
+   :eth       (js/require "../resources/images/tokens/mainnet/ETH-token.png")
+   :eth2x-fli (js/require "../resources/images/tokens/mainnet/ETH2x-FLI.png")
+   :ethos     (js/require "../resources/images/tokens/mainnet/ETHOS.png")
+   :evx       (js/require "../resources/images/tokens/mainnet/EVX.png")
+   :fuel      (js/require "../resources/images/tokens/mainnet/FUEL.png")
+   :fun       (js/require "../resources/images/tokens/mainnet/FUN.png")
+   :fxc       (js/require "../resources/images/tokens/mainnet/FXC.png")
+   :gdc       (js/require "../resources/images/tokens/mainnet/GDC.png")
+   :gen       (js/require "../resources/images/tokens/mainnet/GEN.png")
+   :glm       (js/require "../resources/images/tokens/mainnet/GLM.png")
+   :gno       (js/require "../resources/images/tokens/mainnet/GNO.png")
+   :gnt       (js/require "../resources/images/tokens/mainnet/GNT.png")
+   :grid      (js/require "../resources/images/tokens/mainnet/GRID.png")
+   :grt       (js/require "../resources/images/tokens/mainnet/GRT.png")
+   :hez       (js/require "../resources/images/tokens/mainnet/HEZ.png")
+   :hst       (js/require "../resources/images/tokens/mainnet/HST.png")
+   :ht        (js/require "../resources/images/tokens/mainnet/HT.png")
+   :icn       (js/require "../resources/images/tokens/mainnet/ICN.png")
+   :icos      (js/require "../resources/images/tokens/mainnet/ICOS.png")
+   :iost      (js/require "../resources/images/tokens/mainnet/IOST.png")
+   :kdo       (js/require "../resources/images/tokens/mainnet/KDO.png")
+   :kin       (js/require "../resources/images/tokens/mainnet/KIN.png")
+   :knc       (js/require "../resources/images/tokens/mainnet/KNC.png")
+   :kudos     (js/require "../resources/images/tokens/mainnet/Kudos.png")
+   :lend      (js/require "../resources/images/tokens/mainnet/LEND.png")
+   :link      (js/require "../resources/images/tokens/mainnet/LINK.png")
+   :lisk      (js/require "../resources/images/tokens/mainnet/LISK.png")
+   :loom      (js/require "../resources/images/tokens/mainnet/LOOM.png")
+   :lpt       (js/require "../resources/images/tokens/mainnet/LPT.png")
+   :lrc       (js/require "../resources/images/tokens/mainnet/LRC.png")
+   :mana      (js/require "../resources/images/tokens/mainnet/MANA.png")
+   :mco       (js/require "../resources/images/tokens/mainnet/MCO.png")
+   :mda       (js/require "../resources/images/tokens/mainnet/MDA.png")
+   :met       (js/require "../resources/images/tokens/mainnet/MET.png")
+   :mfg       (js/require "../resources/images/tokens/mainnet/MFG.png")
+   :mgo       (js/require "../resources/images/tokens/mainnet/MGO.png")
+   :mkr       (js/require "../resources/images/tokens/mainnet/MKR.png")
+   :mln       (js/require "../resources/images/tokens/mainnet/MLN.png")
+   :moc       (js/require "../resources/images/tokens/mainnet/MOC.png")
+   :mod       (js/require "../resources/images/tokens/mainnet/MOD.png")
+   :mth       (js/require "../resources/images/tokens/mainnet/MTH.png")
+   :mtl       (js/require "../resources/images/tokens/mainnet/MTL.png")
+   :myb       (js/require "../resources/images/tokens/mainnet/MYB.png")
+   :nexo      (js/require "../resources/images/tokens/mainnet/NEXO.png")
+   :nexxo     (js/require "../resources/images/tokens/mainnet/NEXXO.png")
+   :nmr       (js/require "../resources/images/tokens/mainnet/NMR.png")
+   :npxs      (js/require "../resources/images/tokens/mainnet/NPXS.png")
+   :ogn       (js/require "../resources/images/tokens/mainnet/OGN.png")
+   :omg       (js/require "../resources/images/tokens/mainnet/OMG.png")
+   :otn       (js/require "../resources/images/tokens/mainnet/OTN.png")
+   :oxt       (js/require "../resources/images/tokens/mainnet/OXT.png")
+   :pax       (js/require "../resources/images/tokens/mainnet/PAX.png")
+   :paxg      (js/require "../resources/images/tokens/mainnet/PAXG.png")
+   :pay       (js/require "../resources/images/tokens/mainnet/PAY.png")
+   :pbtc      (js/require "../resources/images/tokens/mainnet/PBTC.png")
+   :plr       (js/require "../resources/images/tokens/mainnet/PLR.png")
+   :poe       (js/require "../resources/images/tokens/mainnet/POE.png")
+   :poly      (js/require "../resources/images/tokens/mainnet/POLY.png")
+   :powr      (js/require "../resources/images/tokens/mainnet/POWR.png")
+   :ppp       (js/require "../resources/images/tokens/mainnet/PPP.png")
+   :ppt       (js/require "../resources/images/tokens/mainnet/PPT.png")
+   :pt        (js/require "../resources/images/tokens/mainnet/PT.png")
+   :qkc       (js/require "../resources/images/tokens/mainnet/QKC.png")
+   :qrl       (js/require "../resources/images/tokens/mainnet/QRL.png")
+   :qsp       (js/require "../resources/images/tokens/mainnet/QSP.png")
+   :r         (js/require "../resources/images/tokens/mainnet/R.png")
+   :rae       (js/require "../resources/images/tokens/mainnet/RAE.png")
+   :rare      (js/require "../resources/images/tokens/mainnet/RARE.png")
+   :rcn       (js/require "../resources/images/tokens/mainnet/RCN.png")
+   :rdn       (js/require "../resources/images/tokens/mainnet/RDN.png")
+   :ren       (js/require "../resources/images/tokens/mainnet/REN.png")
+   :rep       (js/require "../resources/images/tokens/mainnet/REP.png")
+   :req       (js/require "../resources/images/tokens/mainnet/REQ.png")
+   :rhoc      (js/require "../resources/images/tokens/mainnet/RHOC.png")
+   :rlc       (js/require "../resources/images/tokens/mainnet/RLC.png")
+   :rol       (js/require "../resources/images/tokens/mainnet/ROL.png")
+   :sai       (js/require "../resources/images/tokens/mainnet/SAI.png")
+   :salt      (js/require "../resources/images/tokens/mainnet/SALT.png")
+   :san       (js/require "../resources/images/tokens/mainnet/SAN.png")
+   :sngls     (js/require "../resources/images/tokens/mainnet/SNGLS.png")
+   :snm       (js/require "../resources/images/tokens/mainnet/SNM.png")
+   :snt       (js/require "../resources/images/tokens/mainnet/SNT.png")
+   :snx       (js/require "../resources/images/tokens/mainnet/SNX.png")
+   :socks     (js/require "../resources/images/tokens/mainnet/SOCKS.png")
+   :spank     (js/require "../resources/images/tokens/mainnet/SPANK.png")
+   :spike     (js/require "../resources/images/tokens/mainnet/SPIKE.png")
+   :spn       (js/require "../resources/images/tokens/mainnet/SPN.png")
+   :st        (js/require "../resources/images/tokens/mainnet/ST.png")
+   :storj     (js/require "../resources/images/tokens/mainnet/STORJ.png")
+   :storm     (js/require "../resources/images/tokens/mainnet/STORM.png")
+   :strk      (js/require "../resources/images/tokens/mainnet/STRK.png")
+   :stx       (js/require "../resources/images/tokens/mainnet/STX.png")
+   :sub       (js/require "../resources/images/tokens/mainnet/SUB.png")
+   :supr      (js/require "../resources/images/tokens/mainnet/SUPR.png")
+   :susd      (js/require "../resources/images/tokens/mainnet/sUSD.png")
+   :taas      (js/require "../resources/images/tokens/mainnet/TAAS.png")
+   :taud      (js/require "../resources/images/tokens/mainnet/TAUD.png")
+   :tcad      (js/require "../resources/images/tokens/mainnet/TCAD.png")
+   :tgbp      (js/require "../resources/images/tokens/mainnet/TGBP.png")
+   :tkn       (js/require "../resources/images/tokens/mainnet/TKN.png")
+   :tkx       (js/require "../resources/images/tokens/mainnet/TKX.png")
+   :tnt       (js/require "../resources/images/tokens/mainnet/TNT.png")
+   :trst      (js/require "../resources/images/tokens/mainnet/TRST.png")
+   :trx       (js/require "../resources/images/tokens/mainnet/TRX.png")
+   :tusd      (js/require "../resources/images/tokens/mainnet/TUSD.png")
+   :ubi       (js/require "../resources/images/tokens/mainnet/UBI.png")
+   :ubt       (js/require "../resources/images/tokens/mainnet/UBT.png")
+   :ukg       (js/require "../resources/images/tokens/mainnet/UKG.png")
+   :uni       (js/require "../resources/images/tokens/mainnet/UNI.png")
+   :upp       (js/require "../resources/images/tokens/mainnet/UPP.png")
+   :usdc      (js/require "../resources/images/tokens/mainnet/USDC.png")
+   :usds      (js/require "../resources/images/tokens/mainnet/USDS.png")
+   :usdt      (js/require "../resources/images/tokens/mainnet/USDT.png")
+   :veri      (js/require "../resources/images/tokens/mainnet/VERI.png")
+   :vgx       (js/require "../resources/images/tokens/mainnet/VGX.png")
+   :vib       (js/require "../resources/images/tokens/mainnet/VIB.png")
+   :wabi      (js/require "../resources/images/tokens/mainnet/WaBi.png")
+   :wbtc      (js/require "../resources/images/tokens/mainnet/WBTC.png")
+   :weth      (js/require "../resources/images/tokens/mainnet/WETH.png")
+   :wings     (js/require "../resources/images/tokens/mainnet/WINGS.png")
+   :wtc       (js/require "../resources/images/tokens/mainnet/WTC.png")
+   :xaur      (js/require "../resources/images/tokens/mainnet/XAUR.png")
+   :xpa       (js/require "../resources/images/tokens/mainnet/XPA.png")
+   :xrl       (js/require "../resources/images/tokens/mainnet/XRL.png")
+   :xuc       (js/require "../resources/images/tokens/mainnet/XUC.png")
+   :zrx       (js/require "../resources/images/tokens/mainnet/ZRX.png")
+   :zsc       (js/require "../resources/images/tokens/mainnet/ZSC.png")})

 (defn get-token
  [k]
@@ -17,6 +17,7 @@

 (def view (reagent/adapt-react-class (.-View ^js react-native)))
 (def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
+(def safe-area-view (reagent/adapt-react-class (.-SafeAreaView ^js react-native)))

 (def ^:private image-native
  (reagent/adapt-react-class (.-Image ^js react-native)))
@@ -58,14 +58,16 @@

 (defn save-credentials
  "Stores the credentials for the address to the Keychain"
-  [server username password callback]
-  (-> (.setInternetCredentials ^js react-native-keychain
-                               (string/lower-case server)
-                               username
-                               password
-                               keychain-secure-hardware
-                               keychain-restricted-availability)
-      (.then callback)))
+  ([server username password]
+   (save-credentials server username password identity))
+  ([server username password callback]
+   (-> (.setInternetCredentials ^js react-native-keychain
+                                (string/lower-case server)
+                                username
+                                password
+                                keychain-secure-hardware
+                                keychain-restricted-availability)
+       (.then callback))))

 (defn get-credentials
  "Gets the credentials for a specified server from the Keychain"
@@ -0,0 +1,68 @@
+# Schemas
+
+This document will grow to describe how we use Malli in the project and our
+conventions. It's still early days 🐪
+
+## Guidelines
+### Use var quote `#'` when aliasing instrumented vars
+
+It is common in this repository to have aliases to vars. For example, `view`
+referring to `var-internal`, or `quo.core/button` referring to
+`quo.components.buttons.button.view`.
+
+If the original var being aliased is instrumented, the alias var MUST [var
+quote](https://clojure.org/guides/weird_characters#_var_quote) the original var.
+If you don't do this, the aliased var will not be instrumented.
+
+```clojure
+;; bad, view-internal is instrumented, but both aliases don't use a var quote.
+(schema.core/=> view-internal ?schema)
+(def view (quo.theme/with-theme view-internal))
+(def button quo.components.buttons.button.view/button)
+
+;; good
+(schema.core/=> view-internal ?schema)
+(def view (quo.theme/with-theme #'view-internal))
+(def button #'quo.components.buttons.button.view/button)
+```
+
+### Prefix schema references with `?`
+
+Prefix schema bindings and vars with a question mark `?`. This is the naming
+convention used by malli itself when functions receive instances of schemas and
+it's an unambiguous way to avoid naming clashes.
+
+```clojure
+;; bad
+(def message-type [:enum ...])
+
+(defn view
+  [message-type] ; Shadows `message-type` schema
+  (do-something message-type))
+
+;; good
+(def ?message-type [:enum ...])
+
+(defn view
+  [message-type] ; Unambiguous naming strategy
+  (do-something message-type))
+```
+
+### Define schemas as functions when needed
+
+Malli has many utility functions to manipulate schemas as data, and they will
+automatically check if the schemas were already defined in the registry.
+
+For schemas we want to conveniently access from the global registry, like
+`:schema.common/theme`, they must be registered before Malli tries to use them.
+
+```clojure
+;; bad, will fail if :schema.common/bar is not registered.
+(def ^:private ?foo
+  (malli.util/select-keys :schema.common/bar [:id :name]))
+
+;; good, execution will be delayed until the schema ?foo is correctly registered.
+(defn- ?foo
+  []
+  (malli.util/select-keys :schema.common/bar [:id :name]))
+```
@@ -0,0 +1,14 @@
+(ns schema.common
+  (:require
+    [schema.registry :as registry]))
+
+(def ^:private ?theme
+  [:enum :light :dark])
+
+(def ^:private ?customization-color
+  [:or :string :keyword])
+
+(defn register-schemas
+  []
+  (registry/register ::theme ?theme)
+  (registry/register ::customization-color ?customization-color))
@@ -0,0 +1,17 @@
+(ns schema.core)
+
+(defmacro =>
+  "Similar to `malli.core/=>`, but instrumentation code will be completely removed
+  in non-debug environments.
+
+  `value` is first transformed via `malli.core/schema` to make sure we fail fast
+  and only register valid schemas."
+  [sym value]
+  `(if ^boolean js/goog.DEBUG
+     (try
+       (malli.core/=> ~sym (malli.core/schema ~value))
+       (catch js/Error e#
+         (taoensso.timbre/error "Failed to instrument function"
+                                {:symbol ~sym :error e#})
+         ~sym))
+     ~sym))
@@ -0,0 +1,95 @@
+(ns schema.core
+  (:require-macros schema.core)
+  (:require
+    [malli.core :as malli]
+    [malli.dev.pretty :as malli.pretty]
+    schema.state
+    [taoensso.timbre :as log]))
+
+(goog-define throw-on-error? false)
+
+(defn- ui-reporter
+  "Prints to STDOUT and signals a schema error should be displayed on screen."
+  [schema-id printer]
+  (let [report (malli.pretty/reporter printer)]
+    (fn [type data]
+      (report type data)
+      (swap! schema.state/errors conj schema-id))))
+
+(defn- thrower
+  "Similar to `malli.dev.pretty/thrower`, but this reporter uses js/Error instead
+  of ex-info, otherwise invalid schema errors will be printed in one long and
+  incomprehensible line in unit test failures."
+  ([] (thrower (malli.pretty/-printer)))
+  ([printer]
+   (let [report (malli.pretty/reporter printer)]
+     (fn [type data]
+       (let [message (with-out-str (report type data))]
+         (throw (js/Error. (str "\n" message))))))))
+
+(defn reporter
+  ([]
+   (reporter nil nil))
+  ([schema-id]
+   (reporter schema-id nil))
+  ([schema-id opts]
+   (let [printer (malli.pretty/-printer
+                  (merge {:width        60
+                          :print-length 6
+                          :print-level  3
+                          :print-meta   false}
+                         opts))]
+     (if throw-on-error?
+       ;; The thrower reporter should be used to short-circuit tests on schema errors.
+       (thrower printer)
+       (ui-reporter schema-id printer)))))
+
+(defn- with-clear-schema-error
+  "Clears current schema error on app if args passed to `f` are valid."
+  [schema-id validate-input f]
+  (fn [& args]
+    (when (validate-input args)
+      (swap! schema.state/errors disj schema-id))
+    (apply f args)))
+
+(defn instrument
+  "Similar to `malli/-instrument`, but will automatically clear up visible schema
+  errors if `f` is called with valid arguments.
+
+  We use a validator cached by `malli.core/validator`, so that validation is
+  performed once.
+
+  If `?schema` is invalid, then behave like a nop, log the error and return `f`.
+
+  `schema-id` is optional, but should be passed when instrumenting anonymous
+  functions. Consider using a namespaced keyword. For example:
+
+    (schema/instrument ::foo
+                       (fn [x] (inc x))
+                       [:=> [:cat :int] :int])
+  "
+  ([f ?schema]
+   (if ^boolean js/goog.DEBUG
+     (let [schema-id (when (var? f) (symbol f))]
+       (when-not schema-id
+         (log/warn "Anonymous function instrumented without an explicit identifier."
+                   {:schema ?schema}))
+       (instrument schema-id f ?schema))
+     f))
+  ([schema-id f ?schema]
+   (if ^boolean js/goog.DEBUG
+     (try
+       (let [?schema               (malli/schema ?schema)
+             {schema-input :input} (malli/-function-info ?schema)
+             [validate-input _]    (malli/-vmap malli/validator [schema-input])]
+         (malli/-instrument {:schema ?schema
+                             :report (reporter schema-id
+                                               {:title (str "Schema error at " schema-id)})}
+                            (with-clear-schema-error schema-id validate-input f)))
+       (catch js/Error e
+         (log/error "Failed to instrument function"
+                    {:schema-id schema-id
+                     :error     e
+                     :function  f})
+         f))
+     f)))
@@ -0,0 +1,26 @@
+(ns schema.registry
+  (:refer-clojure :exclude [merge])
+  (:require
+    [malli.core :as malli]
+    malli.registry))
+
+(defonce ^:private registry
+  (atom (malli/default-schemas)))
+
+(defn init-global-registry
+  []
+  (malli.registry/set-default-registry! (malli.registry/mutable-registry registry)))
+
+(defn register
+  "Defines a new schema in mutable `registry`.
+
+  We normalize `?schema` by always registering it as a proper instance of
+  `malli.core/Schema` to avoid inconsistencies down the road."
+  [type ?schema]
+  (swap! registry assoc type (malli/schema ?schema))
+  ?schema)
+
+(defn merge
+  [& schemas]
+  (apply swap! registry cljs.core/merge schemas)
+  schemas)
@@ -0,0 +1,11 @@
+(ns schema.state
+  (:require [reagent.core :as reagent]))
+
+(def errors
+  "Set of schema identifiers, usually namespaced keywords. When the set is empty,
+  no schema errors will be displayed on the app. See `schema.view/view`."
+  (reagent/atom #{}))
+
+(defn clear-errors
+  []
+  (reset! errors #{}))
@@ -0,0 +1,28 @@
+(ns schema.style)
+
+(defn container
+  [{:keys [bottom-inset]}]
+  {:align-items               :center
+   :flex-direction            :row
+   :background-color          "#cc0000"
+   :border-bottom-left-radius 8
+   :border-top-left-radius    8
+   :justify-content           :center
+   :padding-vertical          6
+   :padding-right             16
+   :position                  :absolute
+   :bottom                    (+ 12 bottom-inset)
+   :right                     0
+   :z-index                   10000000})
+
+(def icon
+  {:margin-horizontal 8})
+
+(def text
+  {:font-family "Inter-SemiBold"
+   :font-size   13
+   :color       "#ddd"})
+
+(def text-suffix
+  {:font-style :italic
+   :font-size  9})
@@ -0,0 +1,18 @@
+(ns schema.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
+    schema.state
+    [schema.style :as style]))
+
+(defn view
+  []
+  (when (seq @schema.state/errors)
+    [rn/pressable
+     {:on-press schema.state/clear-errors
+      :style    (style/container {:bottom-inset (safe-area/get-bottom)})}
+     [quo/icon :i/close {:size 12 :color "#ddd" :container-style style/icon}]
+     [rn/text {:style style/text}
+      "Schema error(s)"
+      [rn/text {:style (merge style/text style/text-suffix)} " check logs"]]]))
@@ -107,14 +107,15 @@
  [{:keys [db] :as cofx} message]
  (let [current-chat-id (:current-chat-id db)
        text            (get-in message [:content :text])]
-    {:db       (-> db
-                   (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
-                             message)
-                   (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
-                   (update-in [:chat/inputs current-chat-id :metadata]
-                              dissoc
-                              :sending-image))
-     :dispatch [:mention/to-input-field text current-chat-id]}))
+    {:db         (-> db
+                     (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
+                               message)
+                     (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
+                     (update-in [:chat/inputs current-chat-id :metadata]
+                                dissoc
+                                :sending-image))
+     :dispatch-n [[:chat.ui/set-chat-input-text nil current-chat-id]
+                  [:mention/to-input-field text current-chat-id]]}))

 (rf/defn show-contact-request-input
  "Sets reference to previous chat message and focuses on input"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Brian Sztamfater	984bc74b6d	lint fixes	2023-12-05 02:31:24 -03:00
Brian Sztamfater	17cd163f25	some cleanup	2023-12-05 02:23:06 -03:00
Brian Sztamfater	f3c967f26b	improve flow	2023-12-05 01:13:05 -03:00
Brian Sztamfater	9f78eaa91d	integrate select input screen to the flow, also calculate routes prior showing transaction confirmation screen	2023-12-04 21:46:33 -03:00
Brian Sztamfater	778b06abb2	some refactor	2023-12-04 20:48:48 -03:00
Brian Sztamfater	68d7eddb4d	only allow ETH transfers for now	2023-12-04 20:48:48 -03:00
Brian Sztamfater	c7165cf078	calculate fiat balances correctly and some other fixes	2023-12-04 20:48:46 -03:00
Brian Sztamfater	50dcf9d9b9	goerli as default suggested routes network	2023-12-04 20:48:22 -03:00
Brian Sztamfater	372bf83da5	some polishing	2023-12-04 20:48:21 -03:00
Brian Sztamfater	710829d248	fix endpoints integration	2023-12-04 20:47:45 -03:00
Brian Sztamfater	23fae29f9d	try basic integration	2023-12-04 20:47:42 -03:00
Brian Sztamfater	daf3e52281	some cleanup	2023-12-04 20:46:45 -03:00
Jamie Caprani	3338a4b1a1	chore	2023-12-04 20:03:28 -03:00
Jamie Caprani	9ead91c383	progress	2023-12-04 20:02:09 -03:00
Ajay Sivan	fb84885af0	Add Test Networks Enabled option in settings	2023-12-04 19:59:06 -03:00
Ulises M	4aac04e931	Add `utils.money/add` version able to work with `nil`s	2023-12-04 19:59:05 -03:00
Brian Sztamfater	90166e8762	some refactor	2023-12-01 13:38:57 -03:00
Brian Sztamfater	d68fdb18f4	adjustment to summary info component	2023-12-01 13:38:57 -03:00
Brian Sztamfater	e46f4d9081	adjust text color	2023-12-01 13:38:56 -03:00
Brian Sztamfater	dd2fd3410b	some refactor	2023-12-01 13:38:56 -03:00
Brian Sztamfater	085e2df34c	localize strings	2023-12-01 13:38:55 -03:00
Brian Sztamfater	51bfd3567c	most of the ui in place, polishing pending	2023-12-01 13:38:54 -03:00
Brian Sztamfater	fb6d907cc5	some progress	2023-12-01 13:38:54 -03:00
Brian Sztamfater	a88c5b7bf7	feat: transaction confirmation page ui	2023-12-01 13:38:52 -03:00
Jamie Caprani	f9f328107d	chore: add ability to create watch address & some related ui changes on account page (#17868 )	2023-12-01 04:29:01 -08:00
Yevheniia Berdnyk	04dee8be45	e2e: updated data for waku backup test	2023-12-01 12:28:26 +02:00
Alexander	52f7fc59ee	Updated `data-item`, monospaced & aligned address (#18008 ) * Upd * Fix	2023-12-01 10:03:08 +01:00
Mohamed Javid	b5202b4d28	[Feature] Added activity check on entered watch address (#17970 ) This commit - implements the activity check for the entered watch address. - added warning colors - fixes bottom inset in add address to watch screen --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-12-01 00:28:09 +05:30
Andrea Maria Piana	210cf64ce0	Fix panic syncing community token gated https://github.com/status-im/status-go/compare/8a4c2d8d...8206ffc7	2023-11-30 13:49:47 +00:00
Lungu Cristian	ed270b2162	Enabling biometry without password during sync (#17960 ) * feat: added migration for the keychain hashed password * feat: added sync biometry without password entry * fix: biometry typo from develop * ref: moved migration side-effects outside the event * ref: some renaming for keychain migration * ref: addressed @cammellos' review comments * ref: removed unnecessary anon fn * fix: addressed @ilmotta's review comments * ref: removed theme from enable-biometrics * ref: addressed J-Son89's review comments * test: added tests for mask-data and hash-masked-password * test: added schema to hash-masked-password and fixed test * fix: forgot the threading * ref: improved the masked data schema * fix: no biometry error when canceled by user * fix: biometry error wasn't propagated during login * fix: alert dismiss button not passed properly * fix: show biometrics NOT_ENROLLED error only once * lint: removed unused require	2023-11-30 13:40:29 +02:00
Andrea Maria Piana	d412fa3c63	Set up skeleton for communities request to join	2023-11-30 09:49:43 +00:00
Yevheniia Berdnyk	b7f675aa5c	e2e: fix for deep links test	2023-11-30 01:09:42 +02:00
Volodymyr Kozieiev	bfa23c182f	Add requirement for component tests (#18015 )	2023-11-29 18:50:49 +00:00
Mohsen	6b721265af	[#17986 ] feat: implement new settings ui, header section (#17991 )	2023-11-29 20:54:11 +03:00
Jamie CapraniandRende11	589a581298	chore(wallet): add ui for send page (#17786 ) - merged in (#18017 ) --------- Co-authored-by: Rende11 <artamonovn@gmail.com>	2023-11-29 05:12:21 -08:00
Yevheniia Berdnyk	0546a87e9a	e2e: deep links tests added	2023-11-29 14:09:31 +02:00
Parvesh Monu	e5ce7fed3a	fix position of the last item in the community chat list and the position of the jump-to button (#17999 )	2023-11-29 16:45:30 +05:30
Siddarth Kumar	58d5c3d7a5	don't restrict diawi upload for iOS release builds (#18016 ) This commit removes the restriction of uploading iOS release builds to Diawi Its helpful to have the status app uploaded to Diawi to test release builds on our iPhones. The installer is very straightforward and makes life easier when we want to try out release builds.	2023-11-28 22:46:58 +05:30
Ibrahem Khalil	6ccea1ddb2	Continue button is invisible behind keyboard in Add Address To Watch … (#17940 )	2023-11-28 18:38:06 +02:00
Alex Tumanov	a9a17aaae8	Implement dropdown-input based on the original dropdown component (#17927 )	2023-11-28 15:21:15 +00:00
Andrea Maria Piana	6d69c278cd	Update key in tests	2023-11-28 10:57:10 +00:00
Yevheniia Berdnyk	c7e230d070	e2e: changed test order	2023-11-28 12:05:47 +02:00
frank	d309aa366d	chore: specify light client mode for wakuv2 (#18002 )	2023-11-28 14:48:58 +08:00
Jamie Caprani	f124ca4252	chore(wallet): add common page-nav component for account switcher (#17946 )	2023-11-27 09:16:31 -08:00
Brian Sztamfater	1385e27cf4	feat: select asset screen ui (#17780 ) feat: select asset screen ui Signed-off-by: Brian Sztamfater <brian@status.im>	2023-11-27 11:03:02 -03:00
Volodymyr Kozieiev	f82d28c6c9	Show network info on collectible info page (#17980 )	2023-11-27 12:29:12 +00:00
Omar Basem	a2856cf1c3	Wallet: Emoji picker performance (#17891 ) Wallet: Emoji picker navigation perf	2023-11-27 09:57:29 +04:00
Yevheniia Berdnyk	e6a7c420a2	e2e: APK upload time limit increased	2023-11-23 12:34:30 +02:00
alwx	671aa67002	Detect image dimensions correctly	2023-11-23 09:28:38 +00:00
Omar Basem	dbc8df251a	Wallet: Keypair follow up (#17953 ) * Wallet: Keypair follow up	2023-11-23 10:00:22 +04:00
Ulises Manuel	279993b658	Add channel-name component (#17903 )	2023-11-22 15:54:52 -06:00
Volodymyr Kozieiev	0c1a18b444	Connect collectible overview page to backend (#17884 )	2023-11-22 19:40:26 +00:00
Omar Basem	73e9f67dbd	Wallet: illustrations (#17931 ) * wallet: illustrations	2023-11-21 10:55:46 +04:00
Jamie Caprani	86c5505c94	chore(wallet): hook up qr scanner on watch only flow. (#17829 )	2023-11-19 16:26:00 -08:00
Icaro Motta	c1dcd7a764	Introduce malli library (#17867 ) This commit is the foundational step to start using malli (https://github.com/metosin/malli) in this project. Take in consideration we will only be able to realize malli's full power in future iterations. For those without context: the mobile team watched a presentation about malli and went through a light RFC to put everyone on the same page, among other discussions here and there in PRs. To keep things relatively short: 1. Unit, integration and component tests will short-circuit (fail) when inputs/outputs don't conform to their respective function schemas (CI should fail too). 2. Failed schema checks will not block the app from initializing, nor throw an exception that would trigger the LogBox. Exceptions are only thrown in the scope of automated tests. 3. There's zero performance impact in production code because we only instrument. Instrumentation is removed from the compiled code due to the usage of "^boolean js.goog/DEBUG". 4. We shouldn't expect any meaningful slowdown during development. What are we instrumenting in this PR? Per our team's agreement, we're only instrumenting the bare minimum to showcase 2 examples. - Instrument a utility function utils.money/format-amount using the macro approach. - Instrument a quo component quo.components.counter.step.view/view using the functional approach. Both approaches are useful, the functional approach is powerful and allow us to instrument anonymous functions, like the ones we pass to subscriptions or event handlers, or the higher-order function quo.theme/with-theme. The macro approach is perfect for functions already defined with defn. I evaluated the schema or function in the REPL but nothing changes - If you evaluate the source function, you need to evaluate schema/=> or schema/instrument as well. - Remember to var quote when using schema/instrument. - You must call "(status-im2.setup.schema/setup!)" after any var is re-instrumented. It's advisable to add a keybinding in your editor to send this expression automatically to the CLJS REPL, or add the call at the end of the namespace you are working on (similar to how some devs add "(run-tests)" at the end of test namespaces). Where should schemas be defined? For the moment, we should focus on instrumenting quo components, so define each function schema in the same namespace as the component's public "view" var. To be specific: - A schema used only to instrument a single function and not used elsewhere, like a quo component schema, wouldn't benefit from being defined in a separate namespace because that would force the developer to constantly open two files instead of one to check function signatures. - A common schema reused across the repo, like ":schema.common/theme" should be registered in the global registry "schema.registry" so that consumers can just refer to it by keyword, as if it was a built-in malli schema. - A common schema describing status-go entities like message, notification, community, etc can be stored either in the respective "src/status_im2/contexts/*" or registered globally, or even somewhere else. This is yet to be defined, but since I chose not to include schemas for them, we can postpone this guideline.	2023-11-18 11:04:48 -03:00
Icaro Motta	17ebedd6b8	Fix: resolve our Clojure source dependencies first in the classpath (#17919 ) In PR https://github.com/status-im/status-mobile/pull/17867 we have a namespace named schema.core, but this namespace is taken by library prismatic/schema already (see https://github.com/plumatic/schema/tree/master/src/cljc/schema), a library used by our direct dependency on bidi 2.1.6. This leads to a broken build where the ClojureScript compiler reports undeclared vars (https://clojurescript.org/reference/compiler-options#warnings). We change the order Java resolves dependencies via the classpath mechanism. We now first resolve our own Clojure sources, and then project dependencies.	2023-11-18 08:50:11 -03:00
Jamie CapraniandUlises M	2e2d15adfb	chore: add floating button page component (#17737 ) Co-authored-by: Ulises M <ulises.ssb@hotmail.com>	2023-11-17 09:16:55 -08:00
Yevheniia Berdnyk	1d1d586223	e2e: added back status link opening	2023-11-17 18:09:57 +02:00
John Ngei	88dd5e04bb	enable biometric when user signs in with syncing (#17627 )	2023-11-17 17:58:51 +03:00
Lungu CristianandIbrkhalil	8f8c8dede2	Composer collapsing when editing canceled/done (#17785 ) * fix: composer height when entering and canceling edit * fix: blur the composer input when canceling edit * fix: focusing animation and composer height after blur * fix: input height when canceling edit while unfocused * ref: removed arbitrary keyboard check * fix: moved edit-mentions logic to use-edit to fix unresolved mention * fix: composer edit should put the cursor at the end * fix: (potentially) fixing the mention not resolved during edit * fix: emoji-kb handler changing the height when default kb appears * Fix text content when editing and reentering chat * prevent composer when focusing on opening chat with edit/reply * clean * Clauxx comments * Apply for reply * Lintil soup = yummy * refactor variable name * Extract the focusing logic from the data setting logic * Edge case * fix: composer mention key & edit re-enter issues * fix: reply cancel input blur and smooth reply focus --------- Co-authored-by: Ibrkhalil <vampirekid017@gmail.com>	2023-11-17 11:32:31 +02:00
Yevheniia Berdnyk	2e0643fabe	e2e: fixes 15.11	2023-11-16 15:54:35 +02:00
Flavio Fraschetti	ec4046e543	Hide channel list at token-gated communities overview (#17901 ) This commit hides the categorized channel list for token-gated communities overview.	2023-11-16 10:46:17 +00:00
yqrashawn	4a44161163	chore: lint require i18n-resources first in status-im2.core (#17905 )	2023-11-16 11:10:40 +08:00
Icaro Motta	b9353b1ccd	Fix: actually run integration tests (#17900 ) Integration tests weren't running since https://github.com/status-im/status-mobile/pull/17762 was merged a week ago. This commit also allows individual integration test namespaces to run if you change the :ns-regexp option in shadow-cljs. This is quite handy, since they are relatively slow. Fixes https://github.com/status-im/status-mobile/issues/17895	2023-11-15 19:51:09 -03:00
jakub	5ceb7c2215	tests/appium: use requests for fetching APK Also add more context for the error. Signed-off-by: Jakub Sokołowski <jakub@status.im>	2023-11-15 18:08:11 +01:00
jakub	2043e9353b	tests/appium: refactor conftest.py to be more readable Signed-off-by: Jakub Sokołowski <jakub@status.im>	2023-11-15 18:08:10 +01:00
flexsurfer	7153e4da48	[#17854 ] [IOS] The tutorial video animation keeps playing after openi… (#17915 )	2023-11-15 16:24:27 +01:00
Icaro Motta	c7cba5b4d3	Fix: unable to join token-gated communities (#17894 ) Fixes the bug by explicitly passing all available addresses to be revealed to wakuext_requestToJoinCommunity and picking up the first available address as the airdrop address. This is a temporary solution while we work on the feature to allow users to choose which addresses to expose. Fixes https://github.com/status-im/status-mobile/issues/17861 Areas that may be impacted: join community flows. ---------------------------------------------------------------------- Community "Request to join" option is enabled. User holds more than X ETH. Anyone who holds <X> ETH is allowed to Become member in <COMMUNITY>. Expected: request to join is received by desktop client and accepted, mobile user joins the community. ---------------------------------------------------------------------- ---------------------------------------------------------------------- Community "Request to join" option is enabled. User holds less than X ETH. Anyone who holds <X> ETH is allowed to View and post in <CHANNEL>. Expected: request to join is received by desktop client and accepted, mobile user joins the community, but can't post in <CHANNEL>. ---------------------------------------------------------------------- ---------------------------------------------------------------------- Community "Request to join" option is enabled. No token permissions. Expected: request to join is received by desktop client and accepted, mobile user joins the community. ----------------------------------------------------------------------	2023-11-15 06:39:12 -03:00
Ulises Manuel	45df308dd0	[#17823 ] Refactor tokens data app-db (#17880 ) * Refactor edit-account view and events: - Fix `(fn [])` code style. - Avoid overriding clojure.core/type by destructuring the `:type` key. - Split the toast callback to a different function. - `:wallet/save-account` receives `:on-success` instead of `:callback` to improve readability. * Refactor app-db for `:wallet/tokens` & `:wallet/tokens-loading?` - Remove the root sub `:wallet/tokens-loading?`, now it's in app-db in `[:wallet :ui :tokens-loading?]`. - Remove the root subs `:wallet/tokens`, now the value is returned along with the account data by the sub `:wallet/accounts`, it's stored in app-db in `[:wallet :address "0x..." :tokens]`. - Fix the format of the token data returned by the endpoint `"wallet_getWalletToken"` and the fn `js->clj`, - Addresses are no longer keywords (since keywords mustn't start with a number). - Keys are now kebab-case. - Chain-ids are no longer keywords, now they are integers. - Update tests. * Move logic to calculate `:wallet/balances` and change value returned - Move logic to `status-im2.contexts.wallet.common.utils` - The `:wallet/balances` value returned by the sub had the following structure: [{:address "0x1...", :balance 12345} {:address "0x2...", :balance 67890} ...] This required a helper function to get the balance for an address (`get-balance-by-address`) It has been changed to a map: {"0x1..." 12345 "0x2..." 67890, ...} So now we don't need a helper function (just the hashmap itself or `clojure.core/get`). - Because of the previous change, now the `get-balance-by-address` has been removed. - The function `get-account-by-address` has zero uses, so it has been removed. - The test for the sub has been updated. * Create sub `:wallet/account-cards-data` This sub returns a vector of maps to render the account cards in the wallet page. This logic was previously in the `view` namespace, but it was completely calculated from the subs `:wallet/accounts`, `:wallet/balances` and `:wallet/tokens-loading?`, so it was clear that's a derived value.	2023-11-14 10:54:26 -06:00
Brian Sztamfater	a74c934936	feat: implement summary tag component (#17858 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-11-14 11:50:58 -03:00