Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ibrahem Khalil
|
a613278710 | ||
|
ibrkhalil
|
be2757fab9 |
+4
-12
@@ -16,18 +16,10 @@
|
||||
:clj-kondo-config {:level :error}
|
||||
:cond-else {:level :error}
|
||||
:consistent-alias {:level :error
|
||||
: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}}
|
||||
:aliases {clojure.string string
|
||||
clojure.set set
|
||||
clojure.walk walk
|
||||
taoensso.timbre log}}
|
||||
:deprecated-namespace {:level :warning}
|
||||
:docstring-blank {:level :error}
|
||||
:equals-true {:level :error}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
{:lint-as {malli.experimental/defn schema.core/defn}
|
||||
:linters {:unresolved-symbol {:exclude [(malli.core/=>)]}}}
|
||||
@@ -36,7 +36,6 @@
|
||||
"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,14 +311,13 @@ 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/require-i18n-resource-first.sh && \
|
||||
@sh scripts/lint-re-frame-in-quo-components.sh && \
|
||||
sh scripts/lint-direct-require-component-outside-quo.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
|
||||
@@ -328,7 +327,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,6 +77,7 @@ 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. [Read more...](../src/quo/README.md)
|
||||
- `src/quo/`: The component library for Status Mobile.
|
||||
- `src/react_native/`: Contains only low-level constructs to help React Native
|
||||
work in tandem with Clojure(Script).
|
||||
- `src/status_im2/`: Directory where we try to be as strict as possible about
|
||||
|
||||
+12
-48
@@ -45,20 +45,11 @@
|
||||
},
|
||||
|
||||
{
|
||||
"path": "borkdude/dynaload/0.3.5/dynaload-0.3.5",
|
||||
"path": "borkdude/edamame/1.1.17/edamame-1.1.17",
|
||||
"host": "https://repo.clojars.org",
|
||||
"jar": {
|
||||
"sha1": "accd696ba364b850b4d92e38f5a34d0e828a0ad1",
|
||||
"sha256": "0k62m1f29xfh3cp67w7kcvkp5aj35simi8kf95ycvkmgp76w11q8"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "borkdude/edamame/1.3.23/edamame-1.3.23",
|
||||
"host": "https://repo.clojars.org",
|
||||
"jar": {
|
||||
"sha1": "254d023e97ed438f0f44532b5a06d928d031ede4",
|
||||
"sha256": "0l7mxza2nimslhg0qh6jp7gmb8sd6l89fk5d1zvzq2xskscq2vly"
|
||||
"sha1": "9087f7abf0104e0354d7db7fc4576608eac558f4",
|
||||
"sha256": "1n1872i240lakn4pzsag4grf7bv7lcsipmqllxd9m4k1zp3dgla1"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -90,20 +81,20 @@
|
||||
},
|
||||
|
||||
{
|
||||
"path": "cider/cider-nrepl/0.25.3/cider-nrepl-0.25.3",
|
||||
"path": "cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0",
|
||||
"host": "https://repo.clojars.org",
|
||||
"jar": {
|
||||
"sha1": "5ae0efd9377a5e60c084bdaf4a2ce094f759ce23",
|
||||
"sha256": "0drxf9nm23i1pcgrkwbcr09msq37csilzww38709add0hz8spjhq"
|
||||
"sha1": "45f6034b26a14138e74145b7a4059628c0fedcd1",
|
||||
"sha256": "1dy1l6y8cb8xiqq97a4lf8giyiicq4wfl4s2lxn5fb6614cjxqx2"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "cider/piggieback/0.4.1/piggieback-0.4.1",
|
||||
"path": "cider/piggieback/0.5.2/piggieback-0.5.2",
|
||||
"host": "https://repo.clojars.org",
|
||||
"jar": {
|
||||
"sha1": "0a02a3e2ecd7a126ab60d8a44793342f20ced79b",
|
||||
"sha256": "142vl5np33akcrnn6pksi0rjfsmmi528villxsj6cwcndvybiw4m"
|
||||
"sha1": "ecfd5c286a85db3f059e75c37fca5722d9e26f79",
|
||||
"sha256": "1ps9yf3cxmlm447hqkidjb5xry90n0wl3jk0jn28fagq31lzylkl"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -548,24 +539,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"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",
|
||||
@@ -755,15 +728,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"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",
|
||||
@@ -945,11 +909,11 @@
|
||||
},
|
||||
|
||||
{
|
||||
"path": "refactor-nrepl/refactor-nrepl/2.5.0/refactor-nrepl-2.5.0",
|
||||
"path": "refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.0",
|
||||
"host": "https://repo.clojars.org",
|
||||
"jar": {
|
||||
"sha1": "6bc3441afc94f7ca024e41a864ca75e05df7e207",
|
||||
"sha256": "0w8hax99y98l53mixxzx2ja0vcnhjv8dnsaz1zj3vqk775ns5w6i"
|
||||
"sha1": "2b3bb82da53b5db9c2b2aa298417816b81d0ed97",
|
||||
"sha256": "1ysqabmlnghki6x0636zngxza2d83c85276wp9ma9wk183mkv52a"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -3,13 +3,12 @@ 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/dynaload/0.3.5/dynaload-0.3.5.jar
|
||||
borkdude/edamame/1.3.23/edamame-1.3.23.jar
|
||||
borkdude/edamame/1.1.17/edamame-1.1.17.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.25.3/cider-nrepl-0.25.3.jar
|
||||
cider/piggieback/0.4.1/piggieback-0.4.1.jar
|
||||
cider/cider-nrepl/0.29.0/cider-nrepl-0.29.0.jar
|
||||
cider/piggieback/0.5.2/piggieback-0.5.2.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
|
||||
@@ -59,8 +58,6 @@ 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
|
||||
@@ -82,7 +79,6 @@ 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
|
||||
@@ -103,7 +99,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/2.5.0/refactor-nrepl-2.5.0.jar
|
||||
refactor-nrepl/refactor-nrepl/3.6.0/refactor-nrepl-3.6.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,12 +67,9 @@ stdenv.mkDerivation {
|
||||
'';
|
||||
buildPhase = ''
|
||||
# Assemble CLASSPATH from available clojure dependencies.
|
||||
# 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' ':')"
|
||||
# We append 'src' so it can find the local sources.
|
||||
export CLASS_PATH="$(find ${deps.clojure} \
|
||||
-iname '*.jar' | tr '\n' ':')src"
|
||||
|
||||
# target must be one of the builds defined in shadow-cljs.edn
|
||||
java -cp "$CLASS_PATH" clojure.main \
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@@ -1,10 +0,0 @@
|
||||
#!/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
|
||||
+2
-18
@@ -9,7 +9,6 @@
|
||||
[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"]
|
||||
@@ -51,7 +50,6 @@
|
||||
: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
|
||||
@@ -73,10 +71,6 @@
|
||||
: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
|
||||
@@ -110,15 +104,13 @@
|
||||
: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
|
||||
{schema.core/throw-on-error? true
|
||||
status-im2.config/POKT_TOKEN #shadow/env "POKT_TOKEN"
|
||||
{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"
|
||||
@@ -147,17 +139,9 @@
|
||||
:compiler-options {:optimizations :simple
|
||||
:source-map false}}
|
||||
:component-test {:target :npm-module
|
||||
: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]
|
||||
:entries [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,7 +49,6 @@
|
||||
:Text {}
|
||||
:StatusBar {}
|
||||
:ScrollView {}
|
||||
:SafeAreaView {}
|
||||
:KeyboardAvoidingView {}
|
||||
:TextInput {}
|
||||
:Image {}
|
||||
|
||||
@@ -116,17 +116,6 @@ 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}}
|
||||
(when emoji (string/trim 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}
|
||||
(when emoji (string/trim emoji))])
|
||||
(string/trim emoji)])
|
||||
[lock locked? size theme]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -2,30 +2,26 @@
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(defn- circle-color
|
||||
[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)))
|
||||
[customization-color]
|
||||
(colors/custom-color customization-color 50 20))
|
||||
|
||||
(defn- text-color
|
||||
[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)))
|
||||
[customization-color theme]
|
||||
(colors/theme-colors
|
||||
(colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme))
|
||||
|
||||
(defn container
|
||||
[circle-size customization-color neutral? theme]
|
||||
[circle-size customization-color]
|
||||
{: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 neutral? theme)})
|
||||
:background-color (circle-color customization-color)})
|
||||
|
||||
(defn text
|
||||
[customization-color neutral? theme]
|
||||
{:color (text-color customization-color neutral? theme)})
|
||||
[customization-color theme]
|
||||
{:color (text-color customization-color theme)})
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo.components.avatars.wallet-user-avatar.view
|
||||
(:require [clojure.string :as string]
|
||||
[quo.components.avatars.wallet-user-avatar.style :as style]
|
||||
(:require [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]
|
||||
@@ -41,21 +40,18 @@
|
||||
: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
|
||||
:lowercase? - boolean (default: false) - lowercase text
|
||||
:neutral? - boolean (default: false) - use neutral colors variant"
|
||||
[{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
|
||||
:monospace? - boolean (default: false) - use monospace font"
|
||||
[{:keys [full-name customization-color size theme monospace?]
|
||||
:or {size biggest-possible}}]
|
||||
(let [circle-size (:size (size properties))
|
||||
small? (check-if-size-small size)
|
||||
initials (utils.string/get-initials full-name (if small? 1 2))]
|
||||
small? (check-if-size-small size)]
|
||||
[rn/view
|
||||
{:style (style/container circle-size customization-color neutral? theme)}
|
||||
{:style (style/container circle-size customization-color)}
|
||||
[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 neutral? theme)}
|
||||
(if (and initials lowercase?) (string/lower-case initials) initials)]]))
|
||||
:style (style/text customization-color theme)}
|
||||
(utils.string/get-initials full-name (if small? 1 2))]]))
|
||||
|
||||
(def wallet-user-avatar (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
(ns quo.components.colors.color.constants)
|
||||
|
||||
(def ^:const color-size 48)
|
||||
(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
(ns quo.components.colors.color.style
|
||||
(:require
|
||||
[quo.components.colors.color.constants :as constants]
|
||||
[quo.foundations.colors :as colors]
|
||||
[utils.responsiveness :as responsiveness]))
|
||||
|
||||
(defn color-button-common
|
||||
[window-width]
|
||||
{:width constants/color-size
|
||||
:height constants/color-size
|
||||
{:width 48
|
||||
:height 48
|
||||
:border-width 4
|
||||
:border-radius 24
|
||||
:margin-right (-> window-width
|
||||
|
||||
@@ -5,6 +5,10 @@
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "color-picker"
|
||||
(h/test "color picker rendered"
|
||||
(h/render [color-picker/view])
|
||||
(-> (h/expect (h/get-all-by-label-text :color-picker-item))
|
||||
(.toHaveLength 11)))
|
||||
(h/test "clicks on a color item"
|
||||
(let [event (h/mock-fn)]
|
||||
(h/render [color-picker/view {:on-change #(event)}])
|
||||
@@ -16,6 +20,11 @@
|
||||
(h/render [color-picker/view {:on-change #(reset! selected %)}])
|
||||
(h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
|
||||
(-> (h/expect @selected)
|
||||
(.toStrictEqual :blue)))))
|
||||
(.toStrictEqual :blue))))
|
||||
(h/test "all of the values of colors-list are rendered"
|
||||
(h/render [color-picker/view])
|
||||
(js/Promise.all (map (fn [color]
|
||||
(h/is-truthy (h/get-all-by-label-text color)))
|
||||
color-picker/color-list))))
|
||||
|
||||
|
||||
|
||||
@@ -1,67 +1,39 @@
|
||||
(ns quo.components.colors.color-picker.view
|
||||
(:require
|
||||
[quo.components.colors.color.constants :as constants]
|
||||
[quo.components.colors.color.view :as color]
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def color-list
|
||||
[:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
|
||||
|
||||
(defn- on-change-handler
|
||||
[selected color-name on-change]
|
||||
(reset! selected color-name)
|
||||
(when on-change (on-change color-name)))
|
||||
|
||||
(defn get-item-layout
|
||||
[_ index]
|
||||
#js
|
||||
{:length constants/color-size
|
||||
:offset (* (+ constants/color-size 8) index)
|
||||
:index index})
|
||||
|
||||
(defn- view-internal
|
||||
(defn view
|
||||
"Options
|
||||
- `default-selected` Default selected color name.
|
||||
- `on-change` Callback called when a color is selected `(fn [color-name])`.
|
||||
- `blur?` Boolean to enable blur background support.}"
|
||||
[{:keys [default-selected blur? on-change feng-shui? container-style]}]
|
||||
[{:keys [default-selected]}]
|
||||
(let [selected (reagent/atom default-selected)
|
||||
{window-width :width} (rn/get-window)
|
||||
ref (atom nil)]
|
||||
(rn/use-effect #(js/setTimeout (fn []
|
||||
(.scrollToIndex ^js @ref
|
||||
#js
|
||||
{:animated true
|
||||
:index (.indexOf colors/account-colors
|
||||
default-selected)
|
||||
:viewPosition 0.5}))
|
||||
50))
|
||||
[rn/flat-list
|
||||
{:ref #(reset! ref %)
|
||||
;; TODO: using :feng-shui? temporarily while b & w is being developed.
|
||||
;; https://github.com/status-im/status-mobile/discussions/16676
|
||||
:data (if feng-shui?
|
||||
(conj colors/account-colors :feng-shui)
|
||||
colors/account-colors)
|
||||
:render-fn (fn [color idx]
|
||||
[color/view
|
||||
{:selected? (= color @selected)
|
||||
:on-press (fn [e]
|
||||
(.scrollToIndex ^js @ref
|
||||
#js
|
||||
{:animated true
|
||||
:index idx
|
||||
:viewPosition 0.5})
|
||||
(on-change-handler selected e on-change))
|
||||
:blur? blur?
|
||||
:key color
|
||||
:color color
|
||||
:idx idx
|
||||
:window-width window-width}])
|
||||
:get-item-layout get-item-layout
|
||||
:horizontal true
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:content-container-style container-style}]))
|
||||
|
||||
(defn view
|
||||
[props]
|
||||
[:f> view-internal props])
|
||||
{window-width :width} (rn/get-window)]
|
||||
(fn [{:keys [blur? on-change feng-shui? container-style]}]
|
||||
[rn/scroll-view
|
||||
{:horizontal true
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:content-container-style container-style}
|
||||
(doall (map-indexed (fn [idx color]
|
||||
[color/view
|
||||
{:selected? (= color @selected)
|
||||
:on-press #(on-change-handler selected % on-change)
|
||||
:blur? blur?
|
||||
:key color
|
||||
:color color
|
||||
:idx idx
|
||||
:window-width window-width}])
|
||||
;; TODO: using :feng-shui? temporarily while b & w is being developed.
|
||||
;; https://github.com/status-im/status-mobile/discussions/16676
|
||||
(if feng-shui? (conj color-list :feng-shui) color-list)))])))
|
||||
|
||||
@@ -3,22 +3,18 @@
|
||||
[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"
|
||||
(render [step/view {} nil])
|
||||
(h/render [step/view {} nil])
|
||||
(-> (h/expect (h/query-by-label-text :step-counter))
|
||||
(h/is-truthy)))
|
||||
|
||||
(h/test "renders step with a string value"
|
||||
(render [step/view {} "1"])
|
||||
(h/render [step/view {} "1"])
|
||||
(-> (h/expect (h/get-by-text "1"))
|
||||
(h/is-truthy)))
|
||||
|
||||
(h/test "renders step with an integer value"
|
||||
(render [step/view {} 1])
|
||||
(h/render [step/view {} 1])
|
||||
(-> (h/expect (h/get-by-text "1"))
|
||||
(h/is-truthy))))
|
||||
|
||||
@@ -2,24 +2,10 @@
|
||||
(:require
|
||||
[quo.components.counter.step.style :as style]
|
||||
[quo.components.markdown.text :as text]
|
||||
quo.theme
|
||||
[quo.theme :as 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)
|
||||
@@ -37,9 +23,6 @@
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :label
|
||||
:style {:color (style/text-color type theme)}}
|
||||
label]]))
|
||||
:style {:color (style/text-color type theme)}} label]]))
|
||||
|
||||
(def view
|
||||
(quo.theme/with-theme
|
||||
(schema/instrument #'view-internal ?schema)))
|
||||
(def view (theme/with-theme view-internal))
|
||||
|
||||
@@ -24,9 +24,9 @@
|
||||
:scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
|
||||
[props]
|
||||
(let [{:keys [actions description button-one-label button-two-label
|
||||
button-one-props button-two-props theme scroll? customization-color container-style]}
|
||||
button-one-props button-two-props theme scroll? customization-color]}
|
||||
(merge default-props props)]
|
||||
[rn/view {:style container-style}
|
||||
[:<>
|
||||
[rn/view {:style style/buttons-container}
|
||||
(when (= actions :2-actions)
|
||||
[button/button
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
(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))))
|
||||
@@ -1,49 +0,0 @@
|
||||
(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?))))
|
||||
@@ -1,62 +0,0 @@
|
||||
(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})
|
||||
@@ -1,68 +0,0 @@
|
||||
(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,7 +19,3 @@
|
||||
:background-color colors/danger-50
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(def empty-state
|
||||
{:width 375
|
||||
:height 116})
|
||||
|
||||
@@ -2,12 +2,11 @@
|
||||
(: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
|
||||
@@ -43,10 +42,11 @@
|
||||
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)
|
||||
[fast-image/fast-image
|
||||
{:style style/empty-state
|
||||
:source (resources/get-themed-image :no-funds theme)
|
||||
:accessibility-label :illustration}]
|
||||
[rn/view
|
||||
{:accessibility-label :illustration
|
||||
:style style/illustration}
|
||||
[text/text {:style {:color colors/white}}
|
||||
"Illustration here"]]
|
||||
[rn/view
|
||||
[linear-gradient/linear-gradient
|
||||
{:colors gradient-colors
|
||||
|
||||
@@ -3,18 +3,22 @@
|
||||
[quo.components.icon :as quo.icons]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as quo.theme]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn get-color
|
||||
[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)))
|
||||
(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 view-internal
|
||||
(defn get-color
|
||||
[k]
|
||||
(get-in themes [(theme/get-theme) k]))
|
||||
|
||||
(defn info-message
|
||||
"[info-message opts \"message\"]
|
||||
opts
|
||||
{:type :default/:success/:error
|
||||
@@ -23,11 +27,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 theme icon text-color icon-color no-icon-color? style accessibility-label]} message]
|
||||
[{:keys [type size icon text-color icon-color no-icon-color? style]} 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 theme))
|
||||
text-color (or text-color (get-color type))
|
||||
icon-color (or icon-color text-color)]
|
||||
[rn/view
|
||||
{:style (merge {:flex-direction :row
|
||||
@@ -38,10 +42,7 @@
|
||||
:no-color no-icon-color?
|
||||
:size icon-size}]
|
||||
[text/text
|
||||
{: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))
|
||||
{:size size
|
||||
:weight weight
|
||||
:style {:color text-color
|
||||
:margin-horizontal 4}} message]]))
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
[{:keys [theme address networks blur?]}]
|
||||
[rn/view {:style style/left-container}
|
||||
[wallet-user-avatar/wallet-user-avatar
|
||||
{:size :size-32
|
||||
:full-name "0 x"
|
||||
{:size :medium
|
||||
:f-name "0"
|
||||
:l-name "x"
|
||||
:monospace? true
|
||||
:lowercase? true
|
||||
:neutral? true}]
|
||||
:uppercase? false}]
|
||||
[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-name network) theme)}}
|
||||
(str (:short-name network) ":")])
|
||||
:style {:color (colors/resolve-color network theme)}}
|
||||
(str (subs (name network) 0 3) ":")])
|
||||
networks)
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(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]
|
||||
@@ -12,23 +13,27 @@
|
||||
|
||||
(defn- left-container
|
||||
[{:keys [blur? theme name ens address customization-color]}]
|
||||
[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))]]]])
|
||||
(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))]]]]))
|
||||
|
||||
(defn- internal-view
|
||||
[]
|
||||
|
||||
@@ -26,25 +26,21 @@
|
||||
|
||||
(def info
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:width "70%"})
|
||||
:align-items :center})
|
||||
|
||||
(def token-info
|
||||
{:height 40
|
||||
:flex 1})
|
||||
{:height 40})
|
||||
|
||||
(def token-image
|
||||
{: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})
|
||||
{:width 32
|
||||
:height 32
|
||||
:border-width 1
|
||||
:border-radius 16
|
||||
:border-color colors/neutral-80-opa-5
|
||||
:margin-right 8})
|
||||
|
||||
(def values-container
|
||||
{:align-items :flex-end
|
||||
:max-width "30%"})
|
||||
{:align-items :flex-end})
|
||||
|
||||
(defn fiat-value
|
||||
[theme]
|
||||
|
||||
@@ -15,14 +15,11 @@
|
||||
{:source (or (:source token) token)
|
||||
:style style/token-image}]
|
||||
[rn/view {:style style/token-info}
|
||||
[text/text
|
||||
{:weight :semi-bold
|
||||
:number-of-lines 1}
|
||||
(if-not (empty? label) label "-")]
|
||||
[text/text {:weight :semi-bold} label]
|
||||
[preview-list/view
|
||||
{:type :network
|
||||
:size :size-14
|
||||
:number (count networks)}
|
||||
:number 3}
|
||||
networks]]])
|
||||
|
||||
(defn- values
|
||||
@@ -33,14 +30,12 @@
|
||||
:accessibility-label :check-icon}]
|
||||
[rn/view {:style style/values-container}
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:number-of-lines 1}
|
||||
{:weight :medium
|
||||
:size :paragraph-2}
|
||||
token-value]
|
||||
[text/text
|
||||
{:style (style/fiat-value theme)
|
||||
:size :paragraph-2
|
||||
:number-of-lines 1}
|
||||
{:style (style/fiat-value theme)
|
||||
:size :paragraph-2}
|
||||
fiat-value]]))
|
||||
|
||||
(defn- view-internal
|
||||
|
||||
@@ -22,10 +22,9 @@
|
||||
(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-with-theme-provider [list/view
|
||||
{:type :step
|
||||
:step-number 1}]
|
||||
:dark)
|
||||
(h/render [list/view
|
||||
{:type :step
|
||||
:step-number 1}])
|
||||
(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-1))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key))
|
||||
(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-1))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key))
|
||||
(h/was-not-called on-press))))
|
||||
|
||||
@@ -7,11 +7,6 @@
|
||||
[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)]
|
||||
@@ -19,11 +14,9 @@
|
||||
(let [label-color (style/get-label-color disabled? theme blur?)
|
||||
background-color (style/toggle-background-color @pressed? blur? theme)]
|
||||
[rn/pressable
|
||||
{:accessibility-label (label->accessibility-label label)
|
||||
{:accessibility-label :keyboard-key
|
||||
:disabled (or disabled? (not label))
|
||||
:on-press (fn []
|
||||
(when on-press
|
||||
(on-press label)))
|
||||
:on-press (fn [] (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
|
||||
{:display :flex
|
||||
{:flex 1
|
||||
:padding-top 8
|
||||
:padding-horizontal 48})
|
||||
|
||||
|
||||
@@ -17,17 +17,13 @@
|
||||
|
||||
(defn- view-internal
|
||||
[]
|
||||
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
|
||||
container-style]
|
||||
:or {left-action :none}}]
|
||||
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
|
||||
[rn/view
|
||||
{:style (merge style/container
|
||||
container-style)}
|
||||
{:style style/container}
|
||||
(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
|
||||
@@ -62,10 +58,10 @@
|
||||
:theme theme}]
|
||||
(if delete-key?
|
||||
[keyboard-item
|
||||
{:item :i/backspace
|
||||
{:item :i/delete
|
||||
:type :key
|
||||
:disabled? disabled?
|
||||
:on-press on-delete
|
||||
:on-press on-press
|
||||
:blur? blur?
|
||||
:theme theme}]
|
||||
[keyboard-item])]]))
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
(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})
|
||||
@@ -1,20 +0,0 @@
|
||||
(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,7 +1,6 @@
|
||||
(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
|
||||
@@ -10,14 +9,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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -27,14 +26,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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -45,14 +44,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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -63,14 +62,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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -81,31 +80,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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/get-by-text "Subtitle")))
|
||||
(h/is-truthy (h/get-by-text "Description")))
|
||||
|
||||
(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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -115,6 +114,7 @@
|
||||
(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 "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/query-by-label-text :icon-right)))
|
||||
|
||||
(h/test "icon is visible when subtitle type is icon"
|
||||
(h/test "description icon is visible when description 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 "Subtitle"
|
||||
:subtitle-type :icon
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/query-by-label-text :subtitle-type-icon)))
|
||||
(h/is-truthy (h/query-by-label-text :description-icon)))
|
||||
|
||||
(h/test "image is visible when subtitle type is network"
|
||||
(h/test "description image is visible when description 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,18 +158,17 @@
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :network
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow
|
||||
:network-image (quo.resources/get-network :ethereum)}])
|
||||
(h/is-truthy (h/query-by-label-text :subtitle-type-image)))
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/query-by-label-text :description-image)))
|
||||
|
||||
(h/test "emoji is visible when subtitle type is account"
|
||||
(h/test "description emoji is visible when description 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
|
||||
@@ -177,8 +176,7 @@
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
|
||||
@@ -37,8 +37,8 @@
|
||||
:align-items :center})
|
||||
|
||||
(defn subtitle-icon-container
|
||||
[subtitle-type]
|
||||
{:margin-right (when (not= :default subtitle-type) 4)
|
||||
[description]
|
||||
{:margin-right (when (not= :default description) 4)
|
||||
:justify-content :center})
|
||||
|
||||
(defn title
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
[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]))
|
||||
@@ -16,15 +17,13 @@
|
||||
[rn/view {:style (style/loading-container size blur? theme)}])
|
||||
|
||||
(defn- left-subtitle
|
||||
[{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji
|
||||
network-image]
|
||||
:or {subtitle-type :default}}]
|
||||
[{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
|
||||
[rn/view {:style style/subtitle-container}
|
||||
(when (not= :small size)
|
||||
[rn/view {:style (style/subtitle-icon-container subtitle-type)}
|
||||
(case subtitle-type
|
||||
[rn/view {:style (style/subtitle-icon-container description)}
|
||||
(case description
|
||||
:icon [icons/icon icon
|
||||
{:accessibility-label :subtitle-type-icon
|
||||
{:accessibility-label :description-icon
|
||||
:size 16
|
||||
:color icon-color}]
|
||||
:account [account-avatar/view
|
||||
@@ -33,8 +32,8 @@
|
||||
:emoji emoji
|
||||
:type :default}]
|
||||
:network [rn/image
|
||||
{:accessibility-label :subtitle-type-image
|
||||
:source network-image
|
||||
{:accessibility-label :description-image
|
||||
:source (quo.resources/tokens :eth)
|
||||
:style style/image}]
|
||||
nil)])
|
||||
[text/text
|
||||
@@ -59,9 +58,10 @@
|
||||
(i18n/label :t/days)])])
|
||||
|
||||
(defn- left-side
|
||||
"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]
|
||||
"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]
|
||||
:as props}]
|
||||
[rn/view {:style style/left-side}
|
||||
[left-title
|
||||
@@ -79,14 +79,13 @@
|
||||
[left-subtitle
|
||||
{:theme theme
|
||||
:size size
|
||||
:subtitle-type subtitle-type
|
||||
:description description
|
||||
:icon icon
|
||||
:icon-color icon-color
|
||||
:blur? blur?
|
||||
:subtitle subtitle
|
||||
:customization-color customization-color
|
||||
:emoji emoji
|
||||
:network-image network-image}]))])
|
||||
:emoji emoji}]))])
|
||||
|
||||
(defn- right-side
|
||||
[{:keys [label icon-right? right-icon icon-color communities-list]}]
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
(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"))))
|
||||
@@ -1,29 +0,0 @@
|
||||
(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})
|
||||
@@ -1,67 +0,0 @@
|
||||
(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))
|
||||
@@ -1,28 +0,0 @@
|
||||
(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))))
|
||||
@@ -1,30 +0,0 @@
|
||||
(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)))
|
||||
@@ -1,40 +0,0 @@
|
||||
(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,8 +9,3 @@
|
||||
|
||||
(def description-description-text
|
||||
{:margin-top 8})
|
||||
|
||||
(def emoji-hash
|
||||
{:margin-top 8
|
||||
:letter-spacing 0.5
|
||||
:line-height 20.5})
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo.components.text-combinations.view
|
||||
(:require
|
||||
[quo.components.buttons.button.view :as button]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.text-combinations.style :as style]
|
||||
[quo.theme :as theme]
|
||||
@@ -24,43 +23,26 @@
|
||||
avatar
|
||||
title-accessibility-label
|
||||
description
|
||||
description-accessibility-label
|
||||
button-icon
|
||||
button-on-press
|
||||
customization-color
|
||||
emoji-hash]}]
|
||||
description-accessibility-label]}]
|
||||
[rn/view {:style container-style}
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:justify-content :space-between}}
|
||||
[rn/view {:style style/title-container}
|
||||
(when avatar
|
||||
[rn/view {:style style/avatar-container}
|
||||
[icon avatar 32]])
|
||||
[text/text
|
||||
{:accessibility-label title-accessibility-label
|
||||
:weight :semi-bold
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:size :heading-1}
|
||||
title]]
|
||||
(when button-icon
|
||||
[button/button
|
||||
{:icon-only? true
|
||||
:on-press button-on-press
|
||||
:customization-color customization-color
|
||||
:size 32} button-icon])]
|
||||
[rn/view {:style style/title-container}
|
||||
(when avatar
|
||||
[rn/view {:style style/avatar-container}
|
||||
[icon avatar 32]])
|
||||
|
||||
[text/text
|
||||
{:accessibility-label title-accessibility-label
|
||||
:weight :semi-bold
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:size :heading-1}
|
||||
title]]
|
||||
(when description
|
||||
[text/text
|
||||
{:accessibility-label description-accessibility-label
|
||||
:weight :regular
|
||||
:size :paragraph-1
|
||||
:style style/description-description-text}
|
||||
description])
|
||||
(when emoji-hash
|
||||
[text/text
|
||||
{:number-of-lines 1
|
||||
:style style/emoji-hash}
|
||||
emoji-hash])])
|
||||
description])])
|
||||
|
||||
(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-address` or a `:default` account. (default `nil`)
|
||||
| `:account` | A value that represents if the account is a `:watched-account` 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`)
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
|
||||
(defn container
|
||||
[{:keys [blur? customization-color theme selected?]}]
|
||||
{:border-radius 16
|
||||
{:flex 1
|
||||
:border-radius 20
|
||||
:border-width 1
|
||||
:border-color (if selected?
|
||||
(if blur?
|
||||
@@ -27,10 +28,5 @@
|
||||
(def title-container
|
||||
{: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))})
|
||||
:justify-content :space-between
|
||||
:flex 1})
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
[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]))
|
||||
|
||||
@@ -20,19 +19,21 @@
|
||||
(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
|
||||
customization-color :customization-color
|
||||
profile-picture :profile-picture}]
|
||||
customization-color :customization-color}]
|
||||
(if (= avatar-type :default-keypair)
|
||||
[user-avatar/user-avatar
|
||||
{:full-name full-name
|
||||
:ring? true
|
||||
:size :small
|
||||
:status-indicator? false
|
||||
:customization-color customization-color
|
||||
:profile-picture profile-picture}]
|
||||
:customization-color customization-color}]
|
||||
[icon-avatar/icon-avatar
|
||||
{:size :size-32
|
||||
:icon :i/placeholder
|
||||
@@ -63,21 +64,15 @@
|
||||
[{:keys [details stored blur? theme]}]
|
||||
(let [{:keys [address]} details]
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center}
|
||||
:accessibility-label :details}
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center}}
|
||||
[text/text
|
||||
{: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))]
|
||||
{: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)]
|
||||
(when (= stored :on-keycard)
|
||||
[rn/view {:style {:margin-left 4}}
|
||||
[icon/icon :i/keycard-card
|
||||
@@ -89,9 +84,9 @@
|
||||
(defn- view-internal
|
||||
[]
|
||||
(let [selected? (reagent/atom true)]
|
||||
(fn [{:keys [accounts action container-style] :as props}]
|
||||
(fn [{:keys [accounts action] :as props}]
|
||||
[rn/pressable
|
||||
{:style (merge (style/container (merge props {:selected? @selected?})) container-style)
|
||||
{:style (style/container (merge props {:selected? @selected?}))
|
||||
:on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
|
||||
[rn/view {:style style/header-container}
|
||||
[avatar props]
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
(defn container
|
||||
[networks? theme]
|
||||
{:width "100%"
|
||||
{:width 335
|
||||
:height (if networks? 90 56)
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
|
||||
@@ -15,26 +15,18 @@
|
||||
|
||||
(defn calc-value
|
||||
[crypto? currency token value conversion]
|
||||
(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) ""))))))
|
||||
(if crypto?
|
||||
(str (get common/currency-label currency) (.toFixed (* value conversion) 2))
|
||||
(str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
|
||||
|
||||
(defn- view-internal
|
||||
[{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)}
|
||||
[]
|
||||
(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)}
|
||||
[rn/view {:style style/amount-container}
|
||||
[rn/pressable
|
||||
{:on-press #(when @input-ref (.focus ^js @input-ref))
|
||||
@@ -43,41 +35,29 @@
|
||||
:align-items :flex-end}}
|
||||
[rn/image
|
||||
{:style style/token
|
||||
:source (resources/get-token (keyword (string/lower-case token)))}]
|
||||
:source (resources/get-token token)}]
|
||||
[rn/text-input
|
||||
(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))]
|
||||
{: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}]
|
||||
[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 (or (clj->js (if @crypto? token currency)) ""))]]
|
||||
(string/upper-case (clj->js (if @crypto? token currency)))]]
|
||||
[button/button
|
||||
{:icon true
|
||||
:icon-only? true
|
||||
:size 32
|
||||
:on-press (fn []
|
||||
(swap! crypto? not)
|
||||
(when on-swap
|
||||
(on-swap @crypto?)))
|
||||
:on-press #(swap! crypto? not)
|
||||
:type :outline
|
||||
:accessibility-label :reorder}
|
||||
:i/reorder]]
|
||||
@@ -88,6 +68,6 @@
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
||||
(calc-value @crypto? currency token (or external-value @value) conversion)]]])))
|
||||
(calc-value @crypto? currency token @value conversion)]]])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
||||
+1
-11
@@ -48,7 +48,6 @@
|
||||
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
|
||||
@@ -101,7 +100,6 @@
|
||||
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
|
||||
@@ -133,12 +131,10 @@
|
||||
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
|
||||
@@ -215,7 +211,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)
|
||||
@@ -234,7 +230,6 @@
|
||||
|
||||
;;;; 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
|
||||
@@ -317,9 +312,6 @@
|
||||
(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)
|
||||
|
||||
@@ -368,7 +360,6 @@
|
||||
(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)
|
||||
@@ -376,7 +367,6 @@
|
||||
|
||||
;;;; 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,7 +26,6 @@
|
||||
[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]
|
||||
@@ -74,9 +73,7 @@
|
||||
[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]
|
||||
|
||||
@@ -4,9 +4,6 @@
|
||||
[quo.theme :as theme]
|
||||
[react-native.platform :as platform]))
|
||||
|
||||
(def account-colors
|
||||
[:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
|
||||
|
||||
(defn alpha
|
||||
[value opacity]
|
||||
(when value
|
||||
@@ -148,9 +145,7 @@
|
||||
(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
|
||||
@@ -203,16 +198,6 @@
|
||||
(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
|
||||
@@ -266,9 +251,7 @@
|
||||
:danger {50 danger-50
|
||||
60 danger-60}
|
||||
:success {50 success-50
|
||||
60 success-60}
|
||||
:warning {50 warning-50
|
||||
60 warning-60}}
|
||||
60 success-60}}
|
||||
customization
|
||||
networks))
|
||||
|
||||
|
||||
@@ -29,6 +29,3 @@
|
||||
(testing
|
||||
"when using opacity theme is ignored and uses the light suffix resolver"
|
||||
(is (colors/resolve-color :blue :light 10) (colors/resolve-color :blue :dark 10))))
|
||||
|
||||
(deftest test-account-colors-customization
|
||||
(is (every? #(contains? colors/customization %) colors/account-colors)))
|
||||
|
||||
@@ -7,15 +7,6 @@
|
||||
: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))
|
||||
@@ -33,191 +24,14 @@
|
||||
(get dapps k))
|
||||
|
||||
(def tokens
|
||||
{: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")})
|
||||
{: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")})
|
||||
|
||||
(defn get-token
|
||||
[k]
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
|
||||
(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,16 +58,14 @@
|
||||
|
||||
(defn save-credentials
|
||||
"Stores the credentials for the address to the Keychain"
|
||||
([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))))
|
||||
[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"
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
# 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]))
|
||||
```
|
||||
@@ -1,14 +0,0 @@
|
||||
(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))
|
||||
@@ -1,17 +0,0 @@
|
||||
(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))
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user