This commit adds Emoji Picker in the app for usage in Message Composer and Wallet Account.
---------
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Unshadows all remaining vars in status-mobile, including non
cljs.core/clojure.core ones. The only exceptions are cljs.core/type and
cljs.core/name (which happen quite often, so I'm not sure if it's worth
unshadowing them).
The bug was caused, again, by the fact that the component react-native/image
source was a string and it was not wrapped inside the map {:uri "..."}. The
bug was likely introduced by commit 255a3b917265d381fed57e26422277b4cc8772e4
I decided to change react-native.image for good, similarly to what we do in
react-native/fast-image
(ebd38295c6/src/react_native/fast_image.cljs (L21))
so we can prevent this type of bug in the future.
Fixes https://github.com/status-im/status-mobile/issues/17157
* Add bind-component function to `react-native.navigation`
* Create helper function to use react-native-navigation lifecycle methods
* Fix sync QR code not recognized after trying again & refactor
* Add atom to manage callbacks when qr code scan fails
* Small typo fix
* Move header-spacing & empty-state to common.home namespace
* Create common animated banner component for chats and communities
* Add animated banner to chats tab
This is a continuation of https://github.com/status-im/status-mobile/pull/16500 (Lint
& fix some shadowed core Clojure(Script) vars).
Notes: As a reminder, the goal is to eventually disallow shadowing core Clojure
vars entirely, but to get there and avoid rebase hell and regressions, we need
to do in smaller steps, especially because we can't safely automate the process
of unshadowing vars.
We are already down from ~500 shadowed core vars to 350 in total.
Why is this PR is using names such as "s", "v" or "sym"? Names such as s or v
are the so called idiomatic names, and are listed in the Clojure Style Guide
https://guide.clojure.style/#idiomatic-names. I used them whenever I felt
appropriate. For the var cljs.core/symbol I opted to use sym, even though the
symbol in question is not necessarily a Clojure symbol, I think the alias
conveys the meaning well enough
(https://www.clojure.org/guides/learn/syntax#_symbols_and_idents).
New vars linted:
- comparator
- identity
- str
- symbol
- val
Outstanding shadowed vars include type, name, hash, comp.
Re-implements the component Community List according to guidelines
and, most importantly, fixes a bunch of issues and tries to achieve 100%
compatibility with Figma.
The new implementation is trying to mirror Figma properties as much as possible.
Fixes https://github.com/status-im/status-mobile/issues/16447
Changelog:
- Refactor to guidelines.
- Fix: original implementation in money/format-amounts had a bug caught by new
unit tests ("1000000" was formatted incorrectly).
- Fix: Community permission tag correct background when theme is overridden and
when blur is enabled.
- Fix: Notification dot uses correct colors for dark mode and blur variants.
- Fix: Community stats background when blur is enabled.
- Fix: Community stats icon color when blur is enabled.
- Add: The component's Quo preview screen is smarter and will only show form
fields (aka descriptors) that are relevant for each component type (engage,
discover or share).
- Add: replace hardcoded community statistics with an implementation that
actually accepts real numbers and which are correctly formatted.
- Add: New Quo descriptor type number.
- Add: Component uses correct shadows according to foundations/shadows.
It's well known that shadowing core Clojure vars can lead to unexpected bugs. In
fact, it's a common source of bugs in other languages too. In the status-mobile
repository there are, in total, 562 shadowed vars, ~500 are core vars. Excluding
the "old code" we still have 285 offenders.
In status-mobile I've already seen two bugs caused by shadowed vars, both with
the shadowed var "name". But probably other problems happened in the past, and
others will happen in the future if we don't do something about this. This PR is
also my response to my frustration trying to review PRs and checking for
shadowed vars, humans were not meant for that!
In this commit we are enabling ":shadowed-var" to lint certain (not all) core
vars as errors (not warnings). In future PRs we can gradually unshadow more
vars. For the record, name is shadowed 40 times in the new code and 130 in
total, and type is shadowed 93 times in the new code and 124 in total!
What about non-core vars, should we allow shadowing? There are ~70 non-core
shadowed vars. In my opinion, we should also lint and disallow shadowing
non-core vars, since it may cause the same kind of bugs of shadowing core vars.
But this decision can be left for another moment/issue, after we have fixed the
most prominent problem of shadowing core vars.
Which vars are unshadowed in this PR? I fixed 62 errors and unshadowed
cljs.core/iter, cljs.core/time, cljs.core/count, cljs.core/key,
clojure.core/key.
Resources:
- [clj-kondo linter: shadowed-var](https://github.com/clj-kondo/clj-kondo/blob/master/doc/linters.md#shadowed-var)
* Refactor: Remove use of f-component
* Fix documentation drawer styles
* Refactor: move title styles to style ns
* Fix StaticSafeAreaInsets not being defined on component tests
* Fix bottom sheet height on Android
This commit solves the problem described in detail in issue #15606, but in
essence, it fixes the clear icon by integrating rudimentary support for SVG
icons.
Fixes https://github.com/status-im/status-mobile/issues/15606
- Hopefully, if SVG icons prove to be a solid solution, we can easily and
progressively migrate PNG icons to SVGs, but for the moment, it was aligned
with @flexsurfer
https://github.com/status-im/status-mobile/issues/15606#issuecomment-1514631270
that we'll only use SVG icons on demand.
- Note that it's possible to import SVGs directly via js/require by installing
the library react-native-svg-transformer, but this approach is only good when
we don't want/need color customization, which is rarely the case with icons
where we want to change the foreground and/or background colors. I opted for
rendering the SVG icon as hiccup to support color customization.
- Since icons are fully memoized, the app's performance is on the same ballpark
as PNGs rendered with RN Image.
- It's possible to trim down SVGs by using a tool such as
https://github.com/svg/svgo, but this is obviously outside the scope of this
PR.
