[Chore] Minor UI improvements #568
Conversation
|
WalkthroughThis update introduces a new condition to handle the absence of Changes
Uplevel your code reviews with CodeRabbit ProCodeRabbit ProIf you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Files selected (4)
- packages/web/src/components/VaultCard/VaultCard.tsx (3)
- packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx (1)
- packages/web/src/styles/global.styles.ts (1)
- packages/web/src/styles/variables.styles.ts (1)
Files ignored due to filter (1)
- packages/web/src/languages/en.json
Files skipped from review due to trivial changes (3)
- packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx
- packages/web/src/styles/global.styles.ts
- packages/web/src/styles/variables.styles.ts
Review comments generated (3)
- Review: 2
- LGTM: 1
Tips
Chat with 
CodeRabbit Bot (@coderabbitai)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging
@coderabbitaiin a reply.
Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.
Pausing incremental reviews
- Add
@coderabbitai: ignoreanywhere in the PR description to pause further reviews from the bot.
| const startTime = moment(vault.description["project-metadata"].starttime * 1000); | ||
|
|
||
| if (startTime.diff(moment(), "hours") <= 24) { | ||
| return ( | ||
| <div className="mb-4"> | ||
| <Pill transparent dotColor="yellow" text={`${t("starting")} ${startTime.fromNow()}`} /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The code is using moment() to handle date and time. While this isn't necessarily a problem, it's worth noting that Moment.js is now considered a legacy project and is no longer being maintained. It's recommended to use other libraries like Luxon or date-fns for handling dates and times in JavaScript. Here's how you could refactor the code with Luxon:
- const startTime = moment(vault.description["project-metadata"].starttime * 1000);
+ import { DateTime } from 'luxon';
+ const startTime = DateTime.fromMillis(vault.description["project-metadata"].starttime * 1000);
- if (startTime.diff(moment(), "hours") <= 24) {
+ if (DateTime.local().diff(startTime, 'hours').hours <= 24) {| @@ -132,7 +143,7 @@ export const VaultCard = ({ | |||
| if (endTime.diff(moment(), "hours") <= 24) { | |||
| return ( | |||
| <div className="mb-4"> | |||
| <Pill transparent dotColor="yellow" text={`${t("endingSoon")} ${endTime.fromNow()}`} /> | |||
| <Pill transparent dotColor="yellow" text={`${t("ending")} ${endTime.fromNow()}`} /> | |||
There was a problem hiding this comment.
Similar to the previous comment, consider replacing Moment.js with another library like Luxon or date-fns.
- <Pill transparent dotColor="yellow" text={`${t("ending")} ${endTime.fromNow()}`} />
+ import { DateTime } from 'luxon';
+ const endTime = DateTime.fromMillis(vault.description["project-metadata"].endtime * 1000);
+ <Pill transparent dotColor="yellow" text={`${t("ending")} ${endTime.toRelative()}`} />
Deploying with
|
| Latest commit: |
16e57c6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f3eddb32.dapp-a9y.pages.dev |
| Branch Preview URL: | https://chore-minor-improvements.dapp-a9y.pages.dev |
Summary by CodeRabbit
startTimeof the vault in the UI if it is within 24 hours from the current time, enhancing user awareness about upcoming events.