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 255a3b9172
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
Fixes: #16123
This commit changes the behavior when joining communities:
1) If the user hasn't joined a community, they will see the
non-collapsed header.
2) If the user has already joined the community, they will see a
collapsed version of the header, in order to have quicker access to
the chats of the community without having to scroll a lot.
One edge case that is taken care of is the following:
1) User visits a community that has not joined, requests to join.
2) The user is on the community page when the state changes from
not-joined -> joined.
In this case the user won't see the collapsed header until they leave
the community view (go back to home say and back to communities).
This is done in order to avoid some janky transition between the non
collapsed & collapsed version of the header.
This is slightly different from as mentioned in the issue "visiting the
page for the 2nd time", as that will require larger changes but it
should be an acceptable behavior, since most of the times they will have
to visit the overview to request access.
Add icon-name to group avatar
Add missing context-tags variants and fix the API to match figma
Updates context-tag previous uses
Update use of group-avatar api
* Refactor page-nav and fix API
* Update and fix page-nav in scroll-page component
* Update page-nav uses in quo-preview
* Update page-nav uses in syncing
* Update page-nav uses in communities
* Update page-nav uses in wallet
* Update page-nav uses in onboarding
This commit updates the "Preview list" component to support the following types (according to Figma):
- collectibles
- dapps
- accounts
- network
- tokens
Additionally, imports the images for wallet networks and dApps.
---------
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit implements the "Showcase nav" component which is needed for emoji picker development.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit adds Gradient Background in the bottom sheet which will be used in Wallet Account Actions, and Switcher bottom sheet.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Improvements to quo previews:
- Change quo-preview.preview code to be more aligned with our guidelines.
- Remove duplication when setting up preview screens in quo-preview.main. Now we
only need to specify the :name and :component keys and fallback to a good
default for "{:options {:topBar {:visible true}}".
- Auto-generate descriptor labels based on the key.
- Fix form field colors for dark & light, especially for Android.
- Redesigned form fields to look nicer 💄
- Create component that abstracts away the code for rendering the form fields
and the preview area. This will aid us in creating more consistent looking
preview screens and keep things DRY.
How do we use the new code?
Just as before, define a state binding and use it to build up the arguments of
the component. Then, use the preview/preview-container to wrap the component.
You can use certain props to control how the preview is styled, etc, but that's
about it.
(def descriptor
[{:type :text :key :label}
{:key :chevron-position
:type :select
:options [{:key :left}
{:key :right}]}])
(defn view
[]
(let [state (reagent/atom {:chevron-position :left
:label "Welcome"})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/divider-label @state]])))
* Inherit custom colour for unread notification dots
* Code style update; notification-dot as a separate component
* Code style update; notification-dot as a separate component
* Removed leftovers
* Updates
* Lint fix
* chore: update quo2 group avatar to best practices
* chore: update quo2 browser-input to best practices
* chore: update quo2 dynamic-button to best practices
* chore: update quo2 tabs to best practices
* chore: cleanup quo2 core file
* chore: use best practices in quo2 banner
* chore: use best practices in quo2 step
This pr. add blur background on continue button on create profile screen should the button container cover the profile color picker when the keyboard is shown
* show button background on scroll
* fix show button on scroll different platforms
* fix: button container loading
* fix: button container background delay
* 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
This commit implements the "Progress bar" component which is needed for wallet screen development.
Additionally, this commit adds a new test helper method "render-with-theme-provider" to test components in different themes.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
* 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 commit adds two new entry points (button on the top right corner in the navigation bar) for the Quo2 preview screen without having to log in to the app:
- "New to Status"
- "login"
Additionally, this commit updates the theme switcher to be sticky at the top of the Quo2 preview screen to quickly change the theme without having to scroll all the way top.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit adds the "on-press" prop to the "collectible" component which is required for navigating to other screens, such as the details screen when we will start building the wallet.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit implements the "Account Avatar" component which is needed for wallet screen development.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit implements the "gradient cover" component which is needed for wallet screen development, and upgrades the "react-native-linear-gradient" library to "v2.8.0".
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
* Small refactor & add customization color to `info-count` component
* Fix notification mark in group chats for no mentions, also notification alignment styles in the component
* Code style: `change > 0` for `pos?`
* Simplifies community banner and adds style property
* Add animation for communities banner card
* Moves value-in-range to `utils.number` and removes `bounded-val`
* Moves animated values to view namespace
* Make `community.banner` component themeable
This commit upgrades Shadow CLJS from 2.11.16 (released on Feb/21) to latest
2.25.0 (Jul/23), so ~1.5 years worth of upgrades. By upgrading shadow we
can finally use the latest major Clojure version 1.11.x.
Why upgrade shadow?
- Shadow CLJS controls the ClojureScript version we can use. In order to use the
latest major Clojure version we must upgrade Shadow CLJS.
- Shadow CLJS releases new versions very frequently, and if you take a look at
its changelog https://github.com/thheller/shadow-cljs/blob/master/CHANGELOG.md, you'll see
it had tons and tons of bug fixes over the years. I hope some of them help
improve the DX for certain contributors who recently reported issues with
it.
- Clojure 1.11 brings new features, bug fixes and even performance improvements
(although I think the performance mostly impacts Clojure on the JVM). See the
changelog https://github.com/clojure/clojure/blob/master/changes.md#changes-to-clojure-in-version-1110
Things that can be beneficial to us, or are interesting nonetheless:
- New :as-alias to be used in require, which is like :as but does not require
the namespace to load. This means namespaced keywords using :as-alias can't
cause circular dependency errors. This feature would very useful if we used
namespaced keywords, but we don't, so...
https://github.com/clojure/clojure/blob/master/changes.md#22-as-alias-in-require
- New macros run-test and run-test-var to run single test with fixtures and
report.
- New iteration function, useful for processing paginated data.
https://www.abhinavomprakash.com/posts/clojure-iteration/
- New update-keys function: applies a function to every key in a map.
- New update-vals function: applies a function to every value in a map.
Examples for update-vals and update-keys. They should perform better than the
common reduce-kv approach since they use a transient data structure.
(let [m {:a 1 :b 2}]
(update-vals m inc)) ; => {:a 2, :b 3}
(let [m {:a 1 :b 2}]
(update-keys m name)) ; => {"a" 1, "b" 2}
Why change namespaces within __tests__ directories?
Any namespace with the word --tests-- throws an error, like the one below. I
didn't bother investigating why, so I changed the guidelines to reflect the new
convention. It's probably related to the double dashes in the name.
Namespace quo2.components.dividers.--tests--.divider-label-component-spec has a
segment starting with an invalid JavaScript identifier at line 1
This commit initialises the status-go method `startSearchForLocalPairingPeers` which in turn will produce logs that are important for peer discovery while local pairing and will produce logs important to detect local pairing crashes.
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.
This commit refactors the "Toast" component to use theme context for consistency across the codebase.
Each toast will have its theme provider, which will help the children to use the context properly without interfering with other toast's context.
The following components are refactored to use with-theme / theme-context as it is used in the "Toast":
- "text" component
- "user-avatar" component
- "icon" component
- "circle-timer" component
This commit also updates the icon keyword used in the ":toasts/upsert" event dispatch to respect icon guidelines.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
* chore: refactor button and add use for community colors
* chore: update color in button to work with community color
* chore: correct uses of button across app
This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme.
Changes done:
In Bottom Sheet:
- Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma)
- Fix the Icon colour for danger in light mode
- Updated Quo2 Preview to provide an option for the bottom sheet theme
In Action Drawer:
- Refactor the Action Drawer component to consume theme context
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit fixes (by skipping) the scroll to the bottom of messages when the user edits a message and sends it.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit adds a flash toggle for the camera in the "Sign in" and "Scan sync code" screens.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Rewrite the shadows foundation API:
- Fix (implementation & usages): theme changes were not causing shadows to be
reevaluated.
- Optimization: define all possible shadow values at compile time. Good to
reduce cycles on garbage collection since recreating the shadow map all the
time is unnecessary and also to save cycles on computing colors since calls to
colors/alpha are not memoized.
- API redesign: unify access to Design System shadows in a single function.
None of the actual shadow values changed.
Fixes https://github.com/status-im/status-mobile/issues/16526
API rationale
=============
The quo2.foundations.shadows namespace reflects what's in the Design System >
Foundations > Shadows https://www.figma.com/file/v98g9ZiaSHYUdKWrbFg9eM/Foundations?type=design&node-id=624-965&mode=design&t=CvIotdjbHKHcHjpd-0).
Figma users see these shadows in other components as "Shadow/Normal/Light/03".
Notice the shadow's weight is shown as a number (not the semantic name in Figma,
e.g. "intense", "strong"):
So to make things as easy as possible, I opted for exposing a single public
function named "get", which receives arguments in order of frequency of usage
and which expects shadow weights as numbers so that devs don't need to mentally
translate 1 to "soft", or 3 to "intense".
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.
This commit fixes the seen state of notifications, if the user is in the Activity Center screen while receiving a new notification.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit fixes the profile colour in the following screens:
- "View Profile" button on the "Add a contact" page
- "Jump to" button inside the chat
- "Jump to" button in the "Community Overview" screen
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
- Community channels may not have an emoji, and in such cases, it should fall
back to a single letter. The component was recently updated in Figma after
this concern was brought up to designers.
- The default (fallback) color to be used in the list of community channels
should be the community color, not a default "primary-50" as was before. It's
a subtle change because the colors are rendered at 10% transparency.
- Rewrote the channel-avatar component to follow guidelines.
Fixes:
- https://github.com/status-im/status-mobile/issues/16332
- https://github.com/status-im/status-mobile/issues/16327
This commit gets rid of the app-state check which is buggy,
The app-state becomes `active` after the universal link code has executed always resulting in the redirect not happening.
This commit does the following:
- Moves `get-abbreviated-profile-url` from shell share view into `utils.address` and update its usage.
- Adds `get-shortened-compressed-key` to `utils.address` and update the code using `get-shortened-key` to now use `get-shortened-compressed-key` instead.
- Adds test for newly introduced utils.
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
* Makes `divider-label` styles more lenient
* Small refactor to `list-items.channel` component
* Fix styles for `channel-list-component`
- Refactor `channel-list-component`
- Add some missing `:style` keys in `status-im2.contexts.communities.overview.view`
- Fix a warning related to using a `deref` in a `lazy-seq`
* Changes icon keyword namespace from `:main-icons` to `:i`
This commit updates the `bottom-sheet-screen` component (which used `override-theme` from `screen-params` subs) to use the theme from the context provider.
The bottom sheet screen will pick the theme specified in the screen options (to override) as expected. If it's not specified, then it will fall back to the user's theme.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Icaro Motta
BalogunofAfrica
yqrashawn
Jamie Caprani
Brian Sztamfater
Mohsen Ghafouri
Siddarth Kumar
Ibrahem Khalil
Andrea Maria Piana
erikseppanen
Parvesh Monu
Omar Basem
Flavio Fraschetti
Ulises Manuel
mmilad75
Mohamed Javid
Mohsen Ghafouri
Ajay Sivan
flexsurfer
Volodymyr Kozieiev
codemaster
Alexander
John Ngei
codemaster115
Roman Volosovskyi
frank
Yevheniia Berdnyk
Flavio Fraschetti
Andrés Felipe Ceballos M
Rahul Pratap