Feat 1074/refont of reward section add new image#1189
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@luighis is attempting to deploy a commit to the LFG Labs Team on Vercel. A member of the Team first needs to authorize it. |
|
""" WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PageComponent
participant StatsComponent
participant NextImage
User->>PageComponent: Render rewards section
PageComponent->>StatsComponent: Render CategoryTitle and Stats inside flex container
PageComponent->>NextImage: Render /tokens.webp image to the right
Assessment against linked issues
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error code ERESOLVE ... [truncated 730 characters] ... error node_modules/@typescript-eslint/eslint-plugin 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hi @Kevils @Marchand-Nicolas , check the PR, please. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/tokens.pngis excluded by!**/*.png
📒 Files selected for processing (1)
components/UI/stats/stats.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: joeperpetua
PR: lfglabs-dev/starknet.quest#870
File: components/discover/tokenIcon.tsx:19-29
Timestamp: 2024-10-11T11:08:32.705Z
Learning: In the `TokenIcon` component (`components/discover/tokenIcon.tsx`), when an unknown token is encountered, default to using the USDC icon, consistent with the implementation in `TokenSymbol` (`components/quest-boost/TokenSymbol.tsx`).
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: app/page.tsx:34-34
Timestamp: 2024-11-27T07:42:52.459Z
Learning: In this project, updating the Card component to use Next.js Image component is considered out of scope.
Learnt from: fricoben
PR: lfglabs-dev/starknet.quest#963
File: components/discover/defiTable.tsx:322-325
Timestamp: 2024-11-26T01:48:15.315Z
Learning: Utility functions like `getTokenIcon` should be placed in `utils/defi.ts` for better code reuse and maintainability.
components/UI/stats/stats.tsx (3)
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: app/page.tsx:34-34
Timestamp: 2024-11-27T07:42:52.459Z
Learning: In this project, updating the Card component to use Next.js Image component is considered out of scope.
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: components/pages/home/splitTitle.tsx:3-3
Timestamp: 2024-11-27T07:26:15.265Z
Learning: In the file `components/pages/home/splitTitle.tsx`, the `motion` library is correctly imported from `motion/react` rather than `framer-motion`.
Learnt from: joeperpetua
PR: lfglabs-dev/starknet.quest#870
File: components/discover/tokenIcon.tsx:19-29
Timestamp: 2024-10-11T11:08:32.705Z
Learning: In the `TokenIcon` component (`components/discover/tokenIcon.tsx`), when an unknown token is encountered, default to using the USDC icon, consistent with the implementation in `TokenSymbol` (`components/quest-boost/TokenSymbol.tsx`).
🔇 Additional comments (2)
components/UI/stats/stats.tsx (2)
6-6: LGTM! Next.js Image import added correctly.The import is necessary for the new Image component and follows Next.js best practices for image optimization.
20-20: Good responsive layout implementation.The Tailwind utility classes provide a clean, responsive flexbox layout that adapts to different screen sizes with appropriate spacing.
Marchand-Nicolas
left a comment
Marchand-Nicolas
left a comment
There was a problem hiding this comment.
Can you convert the image to web please ? https://image.online-convert.com/convert/png-to-webp
Also please center it vertically inside the block
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/quests/page.tsx(2 hunks)components/UI/stats/stats.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/UI/stats/stats.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: app/page.tsx:34-34
Timestamp: 2024-11-27T07:42:52.459Z
Learning: In this project, updating the Card component to use Next.js Image component is considered out of scope.
Learnt from: joeperpetua
PR: lfglabs-dev/starknet.quest#870
File: components/discover/tokenIcon.tsx:19-29
Timestamp: 2024-10-11T11:08:32.705Z
Learning: In the `TokenIcon` component (`components/discover/tokenIcon.tsx`), when an unknown token is encountered, default to using the USDC icon, consistent with the implementation in `TokenSymbol` (`components/quest-boost/TokenSymbol.tsx`).
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: components/pages/home/splitTitle.tsx:3-3
Timestamp: 2024-11-27T07:26:15.265Z
Learning: In the file `components/pages/home/splitTitle.tsx`, the `motion` library is correctly imported from `motion/react` rather than `framer-motion`.
Learnt from: fricoben
PR: lfglabs-dev/starknet.quest#963
File: components/discover/defiTable.tsx:322-325
Timestamp: 2024-11-26T01:48:15.315Z
Learning: Utility functions like `getTokenIcon` should be placed in `utils/defi.ts` for better code reuse and maintainability.
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: components/pages/home/splitTitle.tsx:373-392
Timestamp: 2024-11-27T07:25:07.612Z
Learning: In the `SplitTitle` component (`components/pages/home/splitTitle.tsx`), the use of `Math.random()` in the `getVariants` function is intentional to create unpredictable animations.
app/quests/page.tsx (5)
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: app/page.tsx:34-34
Timestamp: 2024-11-27T07:42:52.459Z
Learning: In this project, updating the Card component to use Next.js Image component is considered out of scope.
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: components/pages/home/splitTitle.tsx:3-3
Timestamp: 2024-11-27T07:26:15.265Z
Learning: In the file `components/pages/home/splitTitle.tsx`, the `motion` library is correctly imported from `motion/react` rather than `framer-motion`.
Learnt from: baitcode
PR: lfglabs-dev/starknet.quest#962
File: components/pages/home/splitTitle.tsx:373-392
Timestamp: 2024-11-27T07:25:07.612Z
Learning: In the `SplitTitle` component (`components/pages/home/splitTitle.tsx`), the use of `Math.random()` in the `getVariants` function is intentional to create unpredictable animations.
Learnt from: joeperpetua
PR: lfglabs-dev/starknet.quest#870
File: components/discover/tokenIcon.tsx:19-29
Timestamp: 2024-10-11T11:08:32.705Z
Learning: In the `TokenIcon` component (`components/discover/tokenIcon.tsx`), when an unknown token is encountered, default to using the USDC icon, consistent with the implementation in `TokenSymbol` (`components/quest-boost/TokenSymbol.tsx`).
Learnt from: fricoben
PR: lfglabs-dev/starknet.quest#963
File: components/discover/defiTable.tsx:418-456
Timestamp: 2024-11-25T01:01:20.940Z
Learning: When displaying opportunity cards in the `DataTable` component (`components/discover/defiTable.tsx`), ensure that data is rendered dynamically based on the current filters and sorting applied, avoiding hardcoded values.
🔇 Additional comments (1)
app/quests/page.tsx (1)
12-12: LGTM: Proper Next.js Image import.The import statement follows Next.js conventions and is correctly positioned with other imports.
|
@Marchand-Nicolas the change is ready.
|
Marchand-Nicolas
left a comment
Marchand-Nicolas
left a comment
There was a problem hiding this comment.
Very good job, it's perfect!
Lgtm :)
2 participants
📐 Features
✅ An image was added to the Stats component, according to the figma design.
✅ The image was optimized (compressed), reducing its weight, this makes the page load faster, improving the user experience
✅ Image, responsive on desktop, tablet, and mobile
Close: #1074
Summary by CodeRabbit
New Features
Style