feat: payments page #13
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThe changes introduce a comprehensive set of new files and configurations for a Next.js application, including ESLint settings, a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant PaymentTable
participant RequestTable
User->>App: Navigate to Payments Page
App->>PaymentTable: Render Payment Table
PaymentTable->>App: Fetch Latest Payments
App->>PaymentTable: Display Payments
User->>App: Navigate to Requests Page
App->>RequestTable: Render Request Table
RequestTable->>App: Fetch Latest Requests
App->>RequestTable: Display Requests
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 23
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files ignored due to path filters (6)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/data.svgis excluded by!**/*.svgpublic/logo-1.svgis excluded by!**/*.svgpublic/logo-2.svgis excluded by!**/*.svgpublic/logo-3.svgis excluded by!**/*.svgsrc/app/icon.icois excluded by!**/*.ico
Files selected for processing (47)
- .eslintrc.json (1 hunks)
- .gitignore (1 hunks)
- README.md (1 hunks)
- components.json (1 hunks)
- next.config.mjs (1 hunks)
- package.json (1 hunks)
- postcss.config.mjs (1 hunks)
- src/app/globals.css (1 hunks)
- src/app/layout.tsx (1 hunks)
- src/app/page.tsx (1 hunks)
- src/app/payments/page.tsx (1 hunks)
- src/app/providers.tsx (1 hunks)
- src/app/requests/page.tsx (1 hunks)
- src/components/footer.tsx (1 hunks)
- src/components/header.tsx (1 hunks)
- src/components/logo.tsx (1 hunks)
- src/components/main-nav.tsx (1 hunks)
- src/components/payment-table.tsx (1 hunks)
- src/components/recent-area.tsx (1 hunks)
- src/components/recent-payment-table.tsx (1 hunks)
- src/components/recent-request-table.tsx (1 hunks)
- src/components/request-table.tsx (1 hunks)
- src/components/search-area.tsx (1 hunks)
- src/components/search.tsx (1 hunks)
- src/components/socials.tsx (1 hunks)
- src/components/stats-area.tsx (1 hunks)
- src/components/ui/avatar.tsx (1 hunks)
- src/components/ui/badge.tsx (1 hunks)
- src/components/ui/button.tsx (1 hunks)
- src/components/ui/card.tsx (1 hunks)
- src/components/ui/dropdown-menu.tsx (1 hunks)
- src/components/ui/input.tsx (1 hunks)
- src/components/ui/sheet.tsx (1 hunks)
- src/components/ui/skeleton.tsx (1 hunks)
- src/components/ui/table.tsx (1 hunks)
- src/lib/apollo-wrapper.tsx (1 hunks)
- src/lib/consts.ts (1 hunks)
- src/lib/currency-manager.ts (1 hunks)
- src/lib/graphQlClient.ts (1 hunks)
- src/lib/hooks/use-latest-payments.tsx (1 hunks)
- src/lib/hooks/use-latest-requests.tsx (1 hunks)
- src/lib/queries/payments.ts (1 hunks)
- src/lib/queries/transactions.ts (1 hunks)
- src/lib/types.ts (1 hunks)
- src/lib/utils.ts (1 hunks)
- tailwind.config.ts (1 hunks)
- tsconfig.json (1 hunks)
Additional context used
Biome
src/lib/utils.ts
[error] 16-16: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
src/app/layout.tsx
[error] 39-39: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
src/components/request-table.tsx
[error] 87-87: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
src/components/payment-table.tsx
[error] 94-94: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
Additional comments not posted (59)
README.md (1)
1-1: Approved addition of formatting comment.The
<!-- @format -->comment is a standard practice for enabling automatic formatting tools like Prettier. This ensures that the file adheres to consistent formatting standards..eslintrc.json (1)
1-3: Approved ESLint configuration.The ESLint configuration correctly extends
next/core-web-vitals, which is a best practice for Next.js applications. This setup helps ensure that the application adheres to performance and SEO standards.next.config.mjs (1)
1-4: Verify the necessity of the empty configuration file.The
next.config.mjsfile is currently empty. If this is intended as a placeholder for future configurations, please confirm. Otherwise, consider removing the file to avoid confusion.postcss.config.mjs (1)
1-8: Configuration looks correct and clean.The PostCSS configuration is set up correctly for use with TailwindCSS. The structure is clean and follows best practices for a basic configuration.
src/app/payments/page.tsx (1)
1-7: React component setup is correct.The file correctly sets up a functional React component using Next.js conventions. It imports and renders the
PaymentTablecomponent appropriately.src/app/requests/page.tsx (1)
1-7: React component setup is correct.The file correctly sets up a functional React component using Next.js conventions. It imports and renders the
RequestTablecomponent appropriately.src/lib/currency-manager.ts (2)
5-7: Good use of default settings.The instantiation of
CurrencyManagerusinggetDefaultList()is a good practice as it ensures that the currency manager is ready to use with sensible defaults.
3-3: Verify package dependency.Ensure that the
@requestnetwork/currencypackage is included in your project's dependencies to avoid runtime errors.Verification successful
Dependency Verified.
The package
@requestnetwork/currencyis correctly listed in your project'spackage.jsondependencies, ensuring that the import statement will function as expected. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if the package '@requestnetwork/currency' is listed in package.json. # Test: Search for the package in package.json. Expect: At least one occurrence. rg '@requestnetwork/currency' package.jsonLength of output: 85
src/components/ui/skeleton.tsx (2)
3-13: Well-implemented React component.The
Skeletoncomponent is well-implemented with dynamic class name management using thecnfunction, which enhances its reusability and maintainability.
15-15: Proper use of named exports.Exporting the
Skeletoncomponent using named exports is a good practice, facilitating specific imports and potentially improving bundling efficiency.components.json (1)
1-17: Approve the configuration settings.The
components.jsonfile is well-configured with appropriate settings for React server components, TypeScript, and Tailwind CSS. The use of aliases to simplify imports is a good practice that enhances code maintainability..gitignore (1)
1-36: Comprehensive and appropriate.gitignoresetup.The
.gitignorefile is well-configured for a Next.js project, covering all necessary directories and files that should be excluded from version control. This includes node dependencies, build directories, local environment files, and various logs which are all typical and recommended entries for a project of this nature.src/components/footer.tsx (1)
1-20: Effective and responsive footer component.The
Footercomponent is effectively implemented with responsive design considerations. It includes essential elements like logos, navigation, and social links. The use of conditional classes for different screen sizes enhances the user experience across devices.tsconfig.json (1)
24-25: Review of Include and Exclude SettingsThe "include" and "exclude" settings are appropriately configured:
- "include": Targets TypeScript files and type definitions, ensuring all relevant code is considered.
- "exclude": Excludes the
node_modulesdirectory, which is standard to avoid compiling third-party libraries.These settings are well-configured for efficient project management.
src/app/providers.tsx (1)
7-27: Review ofProvidersComponentThe
Providerscomponent is correctly implemented to provide aQueryClientfor managing data fetching. Here are some considerations:
- Configuration: The
staleTimeis set to 60 seconds. Ensure this value aligns with the expected user interaction and data update frequency in your application.This component is well-implemented, but review the configuration settings to ensure they meet your application's needs.
Consider verifying the
staleTimesetting with real-world usage scenarios to ensure optimal user experience.src/components/logo.tsx (1)
8-34: Well-structured Logo component.The
Logocomponent is implemented correctly with proper use of Next.js components and utilities. The conditional rendering based on thecolorprop is a good practice for dynamic content display.Please ensure that the images
logo-2.svgandlogo-3.svgare correctly placed in the public directory for proper rendering.src/components/header.tsx (1)
10-28: Well-implemented Header component.The
Headercomponent is well-structured with effective use of modular components and conditional rendering. The use ofusePathnamefor dynamic content based on the route is a good practice.Consider adding comments to explain complex conditional rendering or styling decisions for better maintainability.
src/lib/types.ts (1)
3-36: Comprehensive TypeScript interfaces for Payment and Transaction.The interfaces are well-defined with appropriate properties for handling payment and transaction data. Using TypeScript enhances type safety and improves the maintainability of the code.
Consider replacing the
anytype fordataObjectin theTransactioninterface with a more specific type or add a TODO comment to address this in the future for better type safety.src/lib/utils.ts (2)
9-11: LGTM!The
cnfunction is well-implemented, usingclsxandtwMergeeffectively to handle class names dynamically.
22-30: LGTM!The
formatTimestampfunction is correctly implemented, effectively converting UNIX timestamps into a readable format using theDateAPI.src/components/ui/input.tsx (1)
3-25: Well-structured and reusable Input component.The
Inputcomponent is well-implemented with appropriate use of TypeScript and React patterns. The use offorwardRefand spreading of props are particularly good practices for a reusable input component. The class names suggest a consistent approach to styling, which is beneficial for maintaining a uniform look and feel across the application.Consider adding a brief comment explaining the
cnutility function if it's not a well-known utility within the team. This can help new developers understand the code more quickly.src/components/ui/badge.tsx (3)
1-4: Approved: Import statements and utility usage.The import statements are correctly organized and essential for the component's functionality. The use of
cvafor managing style variants is a good practice, enhancing the component's flexibility and maintainability.
6-23: Approved:badgeVariantsconfiguration.The
badgeVariantsconfiguration is well-defined, offering multiple style options for the badge component. The inclusion ofdefaultVariantsis a thoughtful addition, ensuring a default style is applied when no specific variant is provided.
26-36: Approved:Badgecomponent definition.The
Badgecomponent is well-implemented, effectively utilizing thebadgeVariantsfor dynamic styling. The merging ofclassNameand spreading of props are correctly handled, ensuring flexibility and ease of use in various contexts.package.json (1)
1-42: Approved: Configuration ofscriptsanddependencies.The
scriptssection is well-configured for standard development operations. Thedependenciesare thoughtfully selected to support the application's functionality, including UI components, data management, and styling. This setup ensures a robust foundation for the application's development and deployment.src/components/ui/avatar.tsx (1)
1-50: Approved: Import statements, utility usage, and component definitions.The import statements are correctly organized and essential for the component's functionality. The use of
React.forwardRefin definingAvatar,AvatarImage, andAvatarFallbackis correctly implemented, ensuring that these components can properly handle refs. This setup enhances the reusability and functionality of the avatar components within the application.src/lib/consts.ts (3)
3-17: Well-structured blockchain network constants.The
CHAINSobject is well-defined with clear and consistent naming for blockchain networks. This will facilitate easy reference throughout the application.
19-33: Consistent use of blockchain constants in URLs.The
CHAIN_SCAN_URLSobject correctly utilizes computed properties from theCHAINSobject, ensuring consistency. However, it is crucial to verify the correctness of all URLs to ensure they are up-to-date and functional.Please verify the correctness of the URLs either through manual checks or automated tests.
35-49: Clear and consistent naming for payment-related blockchain constants.The
PAYMENT_CHAINSenum is well-defined, using a consistent prefix to distinguish payment-specific operations. This approach enhances code readability and maintainability.src/lib/hooks/use-latest-payments.tsx (1)
26-64: Robust and efficient custom hook implementation.The
useLatestPaymentshook is well-implemented, effectively utilizingreact-queryfor data fetching and state management. The use of prefetching and placeholder data is particularly commendable, as it enhances the user experience by reducing load times and maintaining UI consistency during data updates.src/components/ui/button.tsx (1)
1-5: Imports and utility function are appropriate.The imports are well-organized and relevant to the component's functionality. The utility function
cnis appropriately used for classname concatenation, which is a common pattern in React projects.src/lib/hooks/use-latest-requests.tsx (3)
1-12: Imports and setup are correctly configured.The import statements and initial setup are appropriate for the functionalities used in this hook, including React Query and custom utilities. The 'use client' directive is correctly used for client-side only modules in Next.js.
14-21: InterfaceILatestRequestsis well-defined.The interface
ILatestRequestscorrectly outlines the expected structure of the hook's return value, enhancing type safety and clarity. This is a good practice in TypeScript to ensure the data structure is predictable and manageable.
44-54: Prefetching logic is correctly implemented.The
useEffecthook correctly implements data prefetching for the next page, which is a good practice for improving user experience in paginated interfaces. The calculation for the next page and the use ofqueryClient.prefetchQueryare correctly set up.src/components/recent-request-table.tsx (1)
27-84: Refactor conditional rendering and verify polling interval.
- Polling Interval: The
useLatestRequestshook is set with apollIntervalof 30000 ms. Verify if this interval is optimal for the application's performance and user experience.- Conditional Rendering: Consider refactoring the conditional rendering to use a more concise approach, such as ternary operators or a separate rendering function.
- Semantic Issue: Placing a
Linkcomponent inside aButtonmight not be semantically correct. Consider revising this to ensure proper HTML structure and accessibility.src/components/ui/table.tsx (1)
1-117: Approve component structure and suggest utility function verification.
- Component Structure: The use of
forwardRefand structured component definitions is commendable and follows React best practices.- Utility Functions: Ensure that the
cnutility function is correctly implemented and tested, as it is extensively used for styling components.src/components/recent-payment-table.tsx (1)
29-93: Refactor conditional rendering and verify external links.
- Polling Interval: The
useLatestPaymentshook is set with apollIntervalof 30000 ms. Verify if this interval is optimal for the application's performance and user experience.- External Links: Ensure that the
CHAIN_SCAN_URLSare secure and correctly formatted to prevent security issues.- Conditional Rendering: Consider refactoring the conditional rendering to use a more concise approach, such as ternary operators or a separate rendering function.
src/components/ui/sheet.tsx (7)
18-31: Well-implemented SheetOverlay component.The
SheetOverlaycomponent is well-implemented usingforwardRefand conditional styling based on the component's state. This approach is suitable for responsive UI components that need to handle different states like open and close.
33-49: Good use ofcvafor styling variants.The
sheetVariantsutility effectively usescvato manage complex styling scenarios involving responsiveness and component states. This approach enhances maintainability and readability of the style definitions.
56-75: Complex but well-structured SheetContent component.The
SheetContentcomponent is complex, integratingSheetPortal,SheetOverlay, and handling various props and children. The use offorwardRefand proper composition with other components ensures a flexible and reusable UI component.
77-89: Simple and effective SheetHeader component.The
SheetHeadercomponent is straightforward and effectively uses utility functions for conditional class names. This approach is clean and maintainable.
91-103: Consistent and clean SheetFooter component.The
SheetFootercomponent follows a similar pattern toSheetHeader, using utility functions for conditional class names. This consistency across components is good for maintainability and readability.
105-115: Well-implemented SheetTitle component.The
SheetTitlecomponent usesforwardRefand utility functions for conditional styling, maintaining consistency with other components in the file. This approach is effective for a clean and maintainable UI component.
117-127: Consistent and well-implemented SheetDescription component.The
SheetDescriptioncomponent follows the same implementation patterns asSheetTitle, usingforwardRefand utility functions for conditional styling. This consistency is beneficial for maintainability and readability.src/components/payment-table.tsx (2)
3-35: Import statements and initial setup are correctly implemented.The use of
use clientis appropriate for client-side components in Next.js, and all necessary libraries and components are correctly imported for the functionality of the payment table.
121-251:PaymentTablecomponent implementation is robust and well-structured.The component effectively handles pagination, data fetching, and various UI states. The use of
useReactTablefor managing table state and rendering is appropriately implemented. Conditional rendering for loading and no results states enhances the user experience.src/lib/queries/payments.ts (1)
8-335: GraphQL queryPAYMENTS_QUERYis well-structured and comprehensive.The query efficiently fetches a wide range of payment-related data from multiple blockchains, using pagination variables. This setup is optimal for performance and scalability.
tailwind.config.ts (2)
64-77: Good use of Tailwind for custom animations.Defining custom animations such as 'accordion-down' and 'accordion-up' within the Tailwind configuration is a good practice. It centralizes these definitions and makes them reusable across components.
24-57: Verify the definition of CSS variables.The configuration uses HSL values referenced through CSS variables (e.g.,
var(--primary)). Ensure that these variables are defined in your CSS files or document their expected values to avoid runtime errors.src/components/ui/dropdown-menu.tsx (10)
3-8: Approved import statements.The import statements are correctly organized and only include necessary components and utilities for the dropdown menu functionality.
43-57: ApprovedDropdownMenuSubContentcomponent.The
DropdownMenuSubContentcomponent is well-implemented with attention to detail in handling various states and positions using conditional CSS classes. This enhances the user experience by providing smooth transitions and appropriate styling.
59-75: ApprovedDropdownMenuContentcomponent.The
DropdownMenuContentcomponent correctly usesDropdownMenuPrimitive.Portalto render dropdown content in a portal, which is a best practice for managing layering and positioning in complex UIs.
77-93: ApprovedDropdownMenuItemcomponent.The
DropdownMenuItemcomponent is implemented correctly, with conditional class application and ref forwarding. It maintains consistency with other components in handling theinsetprop.
95-117: ApprovedDropdownMenuCheckboxItemcomponent.The
DropdownMenuCheckboxItemcomponent is well-implemented, including anItemIndicatorwith aCheckicon for clear visual feedback on the checked state, enhancing accessibility and user experience.
119-139: ApprovedDropdownMenuRadioItemcomponent.The
DropdownMenuRadioItemcomponent is correctly implemented with anItemIndicatorfeaturing aCircleicon, providing clear visual feedback for the selected state, which is essential for accessibility.
141-157: ApprovedDropdownMenuLabelcomponent.The
DropdownMenuLabelcomponent is implemented correctly, using conditional classes based on theinsetprop to maintain visual consistency with other components.
159-169: ApprovedDropdownMenuSeparatorcomponent.The
DropdownMenuSeparatorcomponent is straightforward and effectively uses minimal styling to separate sections within the dropdown, which is appropriate for its intended use.
171-182: ApprovedDropdownMenuShortcutcomponent.The
DropdownMenuShortcutcomponent is effectively implemented using a simple span element to display keyboard shortcuts, enhancing usability by providing clear visual cues.
184-200: Approved export statements.All components are correctly exported, facilitating modular use and reusability in other parts of the application or in other projects.
| import { GraphQLClient } from 'graphql-request'; | ||
|
|
||
| export const graphQLClient = new GraphQLClient( | ||
| process.env.NEXT_PUBLIC_HASURA_GRAPHQL_URL || '', | ||
| { | ||
| headers: { | ||
| 'x-hasura-admin-secret': | ||
| process.env.NEXT_PUBLIC_HASURA_GRAPHQL_ADMIN_SECRET || '', | ||
| }, | ||
| }, | ||
| ); |
There was a problem hiding this comment.
Secure and flexible GraphQL client setup.
The configuration of the GraphQL client using environment variables (NEXT_PUBLIC_HASURA_GRAPHQL_URL and NEXT_PUBLIC_HASURA_GRAPHQL_ADMIN_SECRET) is a good practice for security and flexibility. Ensure that these environment variables are well-documented and handled securely.
Would you like me to help document these environment variables in the README.md or elsewhere?
| export function RecentArea() { | ||
| return ( | ||
| <div className="grid gap-4 md:gap-8 md:grid-cols-2 grid-cols-1 place-items-center"> | ||
| <RecentRequestTable /> | ||
| <RecentPaymentTable /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Approve the component structure and suggest adding tests.
The RecentArea component is well-structured for responsive design using Tailwind CSS classes. It correctly integrates RecentPaymentTable and RecentRequestTable components. Consider adding unit tests to ensure the component renders correctly under different conditions.
Would you like me to help with setting up the tests for this component?
| export default function Home() { | ||
| return ( | ||
| <div className="flex flex-col gap-8 w-full"> | ||
| <SearchArea /> | ||
| <StatsArea /> | ||
| <RecentArea /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Approve the page structure and suggest adding tests.
The Home page component is well-structured for layout design using Tailwind CSS classes. It correctly integrates SearchArea, StatsArea, and RecentArea components. Consider adding unit tests to ensure the page renders correctly under different conditions.
Would you like me to help with setting up the tests for this page component?
| /** @format */ | ||
|
|
||
| import { Search as SearchIcon } from 'lucide-react'; | ||
| import { Input } from './ui/input'; | ||
| import { Button } from './ui/button'; | ||
|
|
||
| export function Search() { | ||
| return ( | ||
| <div className="relative ml-auto flex-1 md:grow-0 w-full"> | ||
| {/* TODO: add / paymentReference / CID */} | ||
| <Input | ||
| type="search" | ||
| placeholder="Search by Wallet Address / Request ID" | ||
| className="pl-8 md:w-[400px] lg:w-[800px] h-12 w-full" | ||
| /> | ||
| <Button className="absolute right-2.5 top-1" size="icon"> | ||
| <SearchIcon size="20" /> | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Well-structured search component with a clear TODO for future enhancements.
The Search component is cleanly implemented using external UI components and icons. The TODO comment on line 10 suggests adding functionality for searching by payment reference or CID, which should be tracked as a task in your project management tool to ensure it doesn't get overlooked.
Would you like me to help create a task for this TODO in your project management tool?
| "compilerOptions": { | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "noEmit": true, | ||
| "esModuleInterop": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "bundler", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "jsx": "preserve", | ||
| "incremental": true, | ||
| "plugins": [ | ||
| { | ||
| "name": "next" | ||
| } | ||
| ], | ||
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| } | ||
| }, |
There was a problem hiding this comment.
Review of TypeScript Compiler Options
The configuration in tsconfig.json is well-suited for a Next.js application. Here are some key points:
- "lib": Includes DOM and ECMAScript features, which is appropriate.
- "allowJs": Useful for integrating JavaScript files into the project.
- "strict": Enforces strict typing, enhancing code quality and maintainability.
- "noEmit": Prevents the compiler from emitting files, which is typical in Next.js since it handles the compilation.
- "esModuleInterop": Allows default imports from modules without them, increasing compatibility.
- "moduleResolution": Set to "bundler", which is unusual. Typically, this should be "node" for Node.js projects.
Consider changing "moduleResolution" to "node" unless there is a specific reason for using "bundler".
| export const fetchPayments = async (variables: { | ||
| first: number; | ||
| skip: number; | ||
| }): Promise<Payment[]> => { | ||
| console.log('fetchPayments'); | ||
| const data: { [x: string]: { payments: Payment[] } } = | ||
| await graphQLClient.request(PAYMENTS_QUERY, variables); | ||
|
|
||
| return data | ||
| ? [ | ||
| ...data.payment_mainnet.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.MAINNET }; | ||
| }), | ||
| ...data.payment_arbitrum_one.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.ARBITRUM_ONE }; | ||
| }), | ||
| ...data.payment_avalanche.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.AVALANCHE }; | ||
| }), | ||
| ...data.payment_bsc.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.BSC }; | ||
| }), | ||
| ...data.payment_celo.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.CELO }; | ||
| }), | ||
| ...data.payment_fantom.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.FANTOM }; | ||
| }), | ||
| ...data.payment_fuse.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.FUSE }; | ||
| }), | ||
| ...data.payment_matic.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.MATIC }; | ||
| }), | ||
| ...data.payment_moonbeam.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.MOONBEAM }; | ||
| }), | ||
| ...data.payment_optimism.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.OPTIMISM }; | ||
| }), | ||
| ...data.payment_xdai.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.XDAI }; | ||
| }), | ||
| ...data.payment_zksyncera.payments.map((payment: any) => { | ||
| return { ...payment, chain: CHAINS.ZKSYNCERA }; | ||
| }), | ||
| ].sort((a: Payment, b: Payment) => b.timestamp - a.timestamp) | ||
| : []; | ||
| }; |
There was a problem hiding this comment.
Optimize fetchPayments by removing console log.
The function effectively aggregates and sorts payment data from multiple sources. However, consider removing the console log on line 342 for production readiness, as it may clutter the console in a production environment.
Here's a suggested change:
- console.log('fetchPayments');Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const fetchPayments = async (variables: { | |
| first: number; | |
| skip: number; | |
| }): Promise<Payment[]> => { | |
| console.log('fetchPayments'); | |
| const data: { [x: string]: { payments: Payment[] } } = | |
| await graphQLClient.request(PAYMENTS_QUERY, variables); | |
| return data | |
| ? [ | |
| ...data.payment_mainnet.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.MAINNET }; | |
| }), | |
| ...data.payment_arbitrum_one.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.ARBITRUM_ONE }; | |
| }), | |
| ...data.payment_avalanche.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.AVALANCHE }; | |
| }), | |
| ...data.payment_bsc.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.BSC }; | |
| }), | |
| ...data.payment_celo.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.CELO }; | |
| }), | |
| ...data.payment_fantom.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.FANTOM }; | |
| }), | |
| ...data.payment_fuse.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.FUSE }; | |
| }), | |
| ...data.payment_matic.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.MATIC }; | |
| }), | |
| ...data.payment_moonbeam.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.MOONBEAM }; | |
| }), | |
| ...data.payment_optimism.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.OPTIMISM }; | |
| }), | |
| ...data.payment_xdai.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.XDAI }; | |
| }), | |
| ...data.payment_zksyncera.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.ZKSYNCERA }; | |
| }), | |
| ].sort((a: Payment, b: Payment) => b.timestamp - a.timestamp) | |
| : []; | |
| }; | |
| export const fetchPayments = async (variables: { | |
| first: number; | |
| skip: number; | |
| }): Promise<Payment[]> => { | |
| const data: { [x: string]: { payments: Payment[] } } = | |
| await graphQLClient.request(PAYMENTS_QUERY, variables); | |
| return data | |
| ? [ | |
| ...data.payment_mainnet.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.MAINNET }; | |
| }), | |
| ...data.payment_arbitrum_one.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.ARBITRUM_ONE }; | |
| }), | |
| ...data.payment_avalanche.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.AVALANCHE }; | |
| }), | |
| ...data.payment_bsc.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.BSC }; | |
| }), | |
| ...data.payment_celo.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.CELO }; | |
| }), | |
| ...data.payment_fantom.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.FANTOM }; | |
| }), | |
| ...data.payment_fuse.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.FUSE }; | |
| }), | |
| ...data.payment_matic.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.MATIC }; | |
| }), | |
| ...data.payment_moonbeam.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.MOONBEAM }; | |
| }), | |
| ...data.payment_optimism.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.OPTIMISM }; | |
| }), | |
| ...data.payment_xdai.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.XDAI }; | |
| }), | |
| ...data.payment_zksyncera.payments.map((payment: any) => { | |
| return { ...payment, chain: CHAINS.ZKSYNCERA }; | |
| }), | |
| ].sort((a: Payment, b: Payment) => b.timestamp - a.timestamp) | |
| : []; | |
| }; |
| /** @format */ | ||
|
|
||
| import type { Config } from 'tailwindcss'; | ||
| const { fontFamily } = require('tailwindcss/defaultTheme'); |
There was a problem hiding this comment.
Consider using ES6 import syntax.
The file uses require to import fontFamily from tailwindcss/defaultTheme. In TypeScript files, it's generally recommended to use ES6 import syntax for consistency and to leverage TypeScript's static typing features.
Consider replacing the require statement with an import:
-const { fontFamily } = require('tailwindcss/defaultTheme');
+import { fontFamily } from 'tailwindcss/defaultTheme';Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { fontFamily } = require('tailwindcss/defaultTheme'); | |
| import { fontFamily } from 'tailwindcss/defaultTheme'; |
src/components/stats-area.tsx
Outdated
| {/* | ||
| <p className="text-xs text-muted-foreground"> | ||
| +20.1% from last month | ||
| </p> | ||
| */} | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium">Requests</CardTitle> | ||
| <ArrowRightLeft className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="text-2xl font-bold">13,000</div> | ||
| {/* | ||
| <p className="text-xs text-muted-foreground"> | ||
| +180.1% from last month | ||
| </p> | ||
| */} | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Infrastructure For: | ||
| </CardTitle> | ||
| <Building className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="text-2xl font-bold">2,000+ Companies</div> | ||
| {/* | ||
| <p className="text-xs text-muted-foreground">+19% from last month</p> | ||
| */} | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-sm font-medium">Payments</CardTitle> | ||
| <Activity className="h-4 w-4 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="text-2xl font-bold">15,000</div> | ||
| {/* | ||
| <p className="text-xs text-muted-foreground">+201 since last hour</p> | ||
| */} |
There was a problem hiding this comment.
Consider handling commented-out code.
The component includes several commented-out sections (e.g., lines 19-22). If these sections are placeholders for future enhancements, consider adding a TODO comment to clarify their purpose. Otherwise, it might be cleaner to remove them if they are no longer needed.
src/components/request-table.tsx
Outdated
| ? currencyManager.fromAddress(currencyValue) | ||
| : currencyManager.fromSymbol(currencyValue); | ||
|
|
||
| return `${formatUnits(row.original?.dataObject?.data?.parameters?.expectedAmount || '0', currencyDetails?.decimals!) || 'N/A'} ${currencyDetails?.symbol}`; |
There was a problem hiding this comment.
Remove non-null assertions to improve safety.
The use of non-null assertions (e.g., currencyDetails?.decimals!) can lead to runtime errors if the assumptions about data presence are incorrect. Consider handling potential null values explicitly to improve the robustness of your code.
Apply this diff to handle potential null values:
-return `${formatUnits(row.original?.dataObject?.data?.parameters?.expectedAmount || '0', currencyDetails?.decimals!) || 'N/A'} ${currencyDetails?.symbol}`;
+const formattedAmount = formatUnits(row.original?.dataObject?.data?.parameters?.expectedAmount || '0', currencyDetails?.decimals);
+return `${formattedAmount || 'N/A'} ${currencyDetails?.symbol || ''}`;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return `${formatUnits(row.original?.dataObject?.data?.parameters?.expectedAmount || '0', currencyDetails?.decimals!) || 'N/A'} ${currencyDetails?.symbol}`; | |
| const formattedAmount = formatUnits(row.original?.dataObject?.data?.parameters?.expectedAmount || '0', currencyDetails?.decimals); | |
| return `${formattedAmount || 'N/A'} ${currencyDetails?.symbol || ''}`; |
Tools
Biome
[error] 87-87: Forbidden non-null assertion.
(lint/style/noNonNullAssertion)
| const DropdownMenuSubTrigger = React.forwardRef< | ||
| React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, | ||
| React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { | ||
| inset?: boolean | ||
| } | ||
| >(({ className, inset, children, ...props }, ref) => ( | ||
| <DropdownMenuPrimitive.SubTrigger | ||
| ref={ref} | ||
| className={cn( | ||
| "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", | ||
| inset && "pl-8", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <ChevronRight className="ml-auto h-4 w-4" /> | ||
| </DropdownMenuPrimitive.SubTrigger> | ||
| )) | ||
| DropdownMenuSubTrigger.displayName = | ||
| DropdownMenuPrimitive.SubTrigger.displayName |
There was a problem hiding this comment.
Approved DropdownMenuSubTrigger component with a suggestion.
The DropdownMenuSubTrigger component is implemented correctly, utilizing React.forwardRef for ref forwarding and conditional class application based on the inset prop. Consider adding a brief comment explaining the purpose of the inset prop for future maintainability.
rodrigopavezi
force-pushed
the
feat/payments-page
branch
2 times, most recently
from
45e0027 to
0abed65
Compare
rodrigopavezi
force-pushed
the
feat/payments-page
branch
from
0abed65 to
d8b83df
Compare
rodrigopavezi
force-pushed
the
feat/payments-page
branch
from
d8b83df to
5a18ed9
Compare
Resolves #10
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores
.gitignoreto maintain a clean repository by excluding unnecessary files.