Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decentralized Verification Feedback: Badges Tooltips + Filters #4765

Merged
merged 3 commits into from
Sep 24, 2024

Conversation

mateodaza
Copy link
Member

@mateodaza mateodaza commented Sep 23, 2024

Summary by CodeRabbit

Release Notes

  • New Features

    • Added tooltips for project legitimacy and Givback eligibility in multiple languages (Catalan, English, Spanish).
    • Enhanced filtering capabilities to include Givback eligibility for projects and campaigns.
    • Introduced a delay option for tooltip display in the IconWithTooltip component.
    • Improved project badge display with tooltips for verified and Givback-eligible badges.
  • Bug Fixes

    • Updated logic for displaying project card footers based on Givback eligibility.
  • Style

    • Adjusted link styling in the GIVback toast notification for better visibility.

Copy link

vercel bot commented Sep 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
giveth-dapps-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 24, 2024 0:57am

@mateodaza mateodaza changed the title Decentralized Verification Feedbacks - Tooltip + Filters Decentralized Verification Feedbacks: Badges Tooltips + Filters Sep 23, 2024
@mateodaza mateodaza changed the title Decentralized Verification Feedbacks: Badges Tooltips + Filters Decentralized Verification Feedback: Badges Tooltips + Filters Sep 23, 2024
@mateodaza mateodaza marked this pull request as ready for review September 24, 2024 12:45
Copy link
Contributor

coderabbitai bot commented Sep 24, 2024

Walkthrough

The pull request introduces new tooltip entries in multiple language JSON files, enhancing user information regarding project legitimacy and eligibility for GIVbacks. It also updates TypeScript enums to include new filtering options and modifies several components to utilize these new properties and display tooltips. Additionally, it adjusts styles and logic in various components to improve user experience and clarity regarding project statuses.

Changes

File Change Summary
lang/ca.json, lang/en.json, lang/es.json Added new tooltip entries: "tooltip.vouched" and "tooltip.givback_eligible" to indicate project legitimacy and eligibility.
src/apollo/types/types.ts Updated enums to include IS_GIVBACK_ELIGIBLE and IsGivbackEligible for better filtering of projects and campaigns.
src/components/IconWithToolTip.tsx Introduced an optional delay prop for tooltips, modifying the display logic accordingly.
src/components/Tooltip.tsx Added a constant MARGIN for tooltip positioning adjustments.
src/components/menu/FilterMenu.tsx Updated filtering criteria in projectsFeatures array to focus on GIVback eligibility.
src/components/project-card/ProjectCard.tsx Modified footer display logic to include isGivbackEligible.
src/components/views/project/ProjectBadges.tsx Integrated tooltips with project badges and added a new styled component for tooltip text.
src/components/views/project/ProjectGIVbackToast.tsx Changed styling of the InnerLink component, removing underline and changing color.
src/components/views/project/projectActionCard/ProjectStats.tsx Updated VerificationBadge prop to use isGivbackEligible instead of verified.
src/components/views/userProfile/projectsTab/ProjectItem.tsx Changed VerificationBadge prop to utilize isGivbackEligible.
src/helpers/url.tsx Added a new case in campaignLinkGenerator for handling GIVback eligibility filtering.

Possibly related PRs

Suggested reviewers

  • Meriem-BM
  • MohammadPCh
  • RamRamez

Poem

🐰 In fields of code where changes bloom,
New tooltips rise to dispel the gloom.
With GIVbacks clear, and badges bright,
Our projects shine, a joyful sight!
So hop along, dear friends, and see,
The magic of updates, as sweet as can be! 🌼


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?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    -- I pushed a fix in commit <commit_id>, please review it.
    -- Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    -- @coderabbitai generate unit testing code for this file.
    -- @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    -- @coderabbitai read src/utils.ts and generate unit testing code.
    -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    -- @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Collaborator

@MohammadPCh MohammadPCh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mateodaza Thanks, LGTM

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Outside diff range and nitpick comments (11)
src/components/IconWithToolTip.tsx (1)

21-38: LGTM: Timeout functionality well-implemented. Consider making delay time configurable.

The implementation of the delay functionality using timeoutRef and the showTooltip and hideTooltip functions is well done. The use of useRef for the timeout is correct, and the logic for showing and hiding the tooltip with a delay is properly implemented.

Consider making the delay time (currently hardcoded to 500ms) configurable. This would provide more flexibility for different use cases. You could add a delayTime prop to the component:

interface IIconWithTooltipProps extends ITooltipDirection {
  // ... existing props
  delay?: boolean;
  delayTime?: number;
}

export const IconWithTooltip: FC<IIconWithTooltipProps> = ({
  // ... other props
  delay = false,
  delayTime = 500,
}) => {
  // ... in showTooltip function
  timeoutRef.current = setTimeout(() => {
    setShow(true);
  }, delayTime);
  // ...
}

This change would allow users of the component to customize the delay time if needed.

src/components/views/project/ProjectBadges.tsx (2)

32-48: LGTM: Enhanced verified badge with tooltip

The verified badge has been successfully wrapped with IconWithTooltip, providing additional information to users. The implementation is correct and consistent with the project's style.

Consider extracting the tooltip content into a separate constant or variable to improve readability and maintainability. For example:

const vouchedTooltipContent = (
  <TooltipContent>
    {formatMessage({ id: 'tooltip.vouched' })}
  </TooltipContent>
);

// Then use it in the JSX
<IconWithTooltip
  // ...other props
>
  {vouchedTooltipContent}
</IconWithTooltip>

This approach would make it easier to manage tooltip content, especially if it becomes more complex in the future.


51-70: LGTM: Enhanced GIVbacks eligible badge with tooltip

The GIVbacks eligible badge has been successfully wrapped with IconWithTooltip, providing additional information to users. The implementation is correct and consistent with the verified badge changes.

Similar to the suggestion for the verified badge, consider extracting the tooltip content into a separate constant or variable:

const givbackEligibleTooltipContent = (
  <TooltipContent>
    {formatMessage({ id: 'tooltip.givback_eligible' })}
  </TooltipContent>
);

// Then use it in the JSX
<IconWithTooltip
  // ...other props
>
  {givbackEligibleTooltipContent}
</IconWithTooltip>

This would maintain consistency with the previous suggestion and improve overall code readability.

src/helpers/url.tsx (1)

30-35: LGTM! Consider extracting filter mapping to a separate object.

The addition of the ECampaignFilterField.IsGivbackEligible case is implemented correctly and consistent with the existing pattern. It enhances the filtering capabilities of the campaignLinkGenerator function.

To improve maintainability, consider extracting the mapping between ECampaignFilterField and EProjectsFilter to a separate object. This would make it easier to add new filters in the future and reduce the complexity of the switch statement. Here's an example of how you could refactor this:

const filterFieldToProjectsFilter = {
  [ECampaignFilterField.Verified]: EProjectsFilter.VERIFIED,
  [ECampaignFilterField.IsGivbackEligible]: EProjectsFilter.IS_GIVBACK_ELIGIBLE,
  // ... other mappings ...
};

// In the switch statement:
case ECampaignFilterField.IsGivbackEligible:
case ECampaignFilterField.Verified:
  // ... other cases ...
  const projectsFilter = filterFieldToProjectsFilter[filter];
  if (projectsFilter) {
    params.append('filter', projectsFilter);
  }
  break;

This refactoring would make the code more maintainable and easier to extend in the future.

src/components/Tooltip.tsx (2)

26-26: LGTM! Consider using a more descriptive constant name.

The addition of the MARGIN constant is a good practice for maintainability. However, to improve clarity, consider using a more descriptive name such as TOOLTIP_MARGIN or TOOLTIP_POSITIONING_MARGIN.

-const MARGIN = 4;
+const TOOLTIP_POSITIONING_MARGIN = 4;

161-161: LGTM! Consider extracting the arrow size calculation.

The addition of MARGIN to the tooltip positioning calculations for desktop devices (right and left directions) is correct and maintains consistency with other margin applications.

To improve code readability, consider extracting the arrow size calculation into a separate constant:

+const ARROW_SIZE_WITH_MARGIN = ARROW_SIZE + MARGIN;

// Then use it in the calculations:
-left: parentRect.right + ARROW_SIZE + MARGIN,
+left: parentRect.right + ARROW_SIZE_WITH_MARGIN,

-left: parentRect.left - ARROW_SIZE - MARGIN,
+left: parentRect.left - ARROW_SIZE_WITH_MARGIN,

This change would make the positioning calculations more concise and easier to understand at a glance.

Also applies to: 169-169

src/components/menu/FilterMenu.tsx (1)

Line range hint 1-324: Summary: Filter option updated from "Vouched" to "GIVback Eligible"

The change in this file is focused on updating a single filter option in the projectsFeatures array. This modification aligns with the PR's objective of implementing "Decentralized Verification Feedback" and "GIVbacks".

While the change itself is straightforward and doesn't introduce any immediate issues in this file, it's crucial to ensure that this update is consistently reflected across the entire application. This includes updating any components that may be using the old filter value, ensuring proper translations for the new label, and verifying that the filtering logic in other parts of the application is adjusted accordingly.

Consider the following to ensure a smooth integration of this change:

  1. Update the EProjectsFilter enum in the relevant file to reflect this change.
  2. Review and update any components or utilities that rely on the old VERIFIED filter.
  3. Update relevant documentation or comments that might reference the old filter option.
  4. If there are any analytics or logging related to filter usage, make sure they're updated to track the new filter option correctly.

These steps will help maintain consistency and prevent any potential bugs or confusion that could arise from this change.

src/apollo/types/types.ts (2)

92-92: LGTM! Consider grouping related enum values.

The addition of IS_GIVBACK_ELIGIBLE to the EProjectsFilter enum is consistent with the existing structure and naming conventions. It aligns well with the PR objectives to enhance filtering options for GIVback eligible projects.

Consider grouping related enum values together for better readability. For instance, you could move IS_GIVBACK_ELIGIBLE next to VERIFIED since they both relate to project status/eligibility.


119-119: LGTM! Consider grouping related enum values.

The addition of IsGivbackEligible to the ECampaignFilterField enum is consistent with the existing structure and naming conventions. It aligns well with the PR objectives to enhance filtering options for GIVback eligible campaigns.

Consider grouping related enum values together for better readability. For instance, you could move IsGivbackEligible next to Verified since they both relate to campaign status/eligibility.

src/components/project-card/ProjectCard.tsx (1)

98-98: Approved: Enhanced footer visibility logic

The modification to include isGivbackEligible in the hasFooter condition is a good addition. It ensures that GIVbacks eligible projects display the footer, which aligns with the PR objectives for improved badges and tooltips.

For improved readability, consider using an array with some() method:

const hasFooter = [activeStartedRound, verified, isGivbackEligible].some(Boolean);

This approach makes it easier to add or remove conditions in the future.

lang/en.json (1)

1716-1719: Consider grouping related translations.

While the new entries are correctly added and functioning, consider grouping related translations together for better organization and maintainability. For example, you could move these new tooltip entries near other tooltip-related translations in the file.

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between bbf99fe and 4ed94ba.

Files selected for processing (13)
  • lang/ca.json (1 hunks)
  • lang/en.json (1 hunks)
  • lang/es.json (1 hunks)
  • src/apollo/types/types.ts (2 hunks)
  • src/components/IconWithToolTip.tsx (1 hunks)
  • src/components/Tooltip.tsx (4 hunks)
  • src/components/menu/FilterMenu.tsx (1 hunks)
  • src/components/project-card/ProjectCard.tsx (1 hunks)
  • src/components/views/project/ProjectBadges.tsx (3 hunks)
  • src/components/views/project/ProjectGIVbackToast.tsx (1 hunks)
  • src/components/views/project/projectActionCard/ProjectStats.tsx (1 hunks)
  • src/components/views/userProfile/projectsTab/ProjectItem.tsx (1 hunks)
  • src/helpers/url.tsx (1 hunks)
Additional comments not posted (19)
src/components/IconWithToolTip.tsx (5)

9-9: LGTM: New delay prop added correctly.

The addition of the optional delay prop to the IIconWithTooltipProps interface is well-implemented. It's correctly typed as an optional boolean, and the naming is clear and descriptive.


17-17: LGTM: delay prop correctly added with appropriate default value.

The delay prop is correctly added to the component's destructured props with a default value of false. This ensures backward compatibility and maintains the expected behavior (no delay by default) for existing usage of the component.


48-50: LGTM: Proper cleanup of timeout in useEffect.

The addition of timeout cleanup in the useEffect hook's cleanup function is a good practice. This ensures that any pending timeouts are properly cleared when the component unmounts or when the effect is re-run, preventing potential memory leaks.


56-57: LGTM: Event handlers correctly updated.

The onMouseEnter and onMouseLeave event handlers are properly updated to use the new showTooltip and hideTooltip functions. This change correctly implements the delay functionality for showing the tooltip and ensures consistent behavior with the rest of the component changes.


Line range hint 1-80: Overall, excellent implementation of the delay functionality.

The changes to the IconWithTooltip component are well-implemented and add valuable functionality. The new delay prop and associated logic are correctly integrated into the component, with proper typing, default values, and cleanup. The code is clean and consistent with React best practices.

The only suggestion for improvement is to consider making the delay time configurable, as mentioned in a previous comment. This would enhance the flexibility of the component for various use cases.

Great job on this implementation!

src/components/views/project/ProjectBadges.tsx (3)

15-15: LGTM: New import added for IconWithTooltip

The new import statement for IconWithTooltip is correctly added and necessary for the tooltip functionality implemented in this file.


102-108: LGTM: New TooltipContent styled component

The TooltipContent styled component is well-implemented and provides consistent styling for tooltip content across the project. The use of theme colors is appropriate, ensuring consistency with the overall design system.


Line range hint 1-109: Summary: Excellent enhancement of project badges with tooltips

The changes in this file significantly improve the user experience by adding informative tooltips to the verified and GIVbacks eligible badges. The implementation is consistent, well-structured, and follows good practices. The new TooltipContent styled component ensures consistent styling across tooltips.

A few minor suggestions were made to improve code readability and maintainability, but overall, this is a solid improvement to the ProjectBadges component.

src/components/Tooltip.tsx (4)

128-128: LGTM! Consistent use of the new margin constant.

The addition of MARGIN to the tooltip positioning calculation for mobile devices (non-bottom directions) is correct and consistent with the newly introduced constant.


134-134: LGTM! Consistent margin application for bottom direction.

The addition of MARGIN to the tooltip positioning calculation for mobile devices (bottom direction) is correct and maintains consistency with other margin applications.


143-143: LGTM! Consistent margin application for desktop top and bottom directions.

The addition of MARGIN to the tooltip positioning calculations for desktop devices (top and bottom directions) is correct and maintains consistency with other margin applications.

Also applies to: 151-151


Line range hint 1-203: Overall, the changes improve tooltip positioning consistency.

The introduction of the MARGIN constant and its consistent application across various tooltip positioning scenarios is a positive change. It enhances code maintainability and ensures uniform spacing for tooltips in different directions and device types.

Consider implementing the suggested minor improvements:

  1. Use a more descriptive name for the MARGIN constant.
  2. Extract the arrow size calculation into a separate constant for improved readability.

These changes will further enhance the code quality and maintainability of the Tooltip component.

src/components/views/userProfile/projectsTab/ProjectItem.tsx (1)

94-94: 🛠️ Refactor suggestion

Verify the implications of changing verification criteria

The isVerified prop of the VerificationBadge component is now using project?.isGivbackEligible instead of project?.verified. This change shifts the verification criteria from a general verified status to GIVbacks eligibility.

Please ensure that:

  1. This change is intentional and aligns with the new verification process.
  2. The UI and user experience have been updated to reflect this change in meaning.
  3. Other parts of the application that may depend on the project's verification status have been updated accordingly.

To verify the impact of this change, you can run the following script:

This will help identify other areas of the codebase that might need to be updated to maintain consistency with this change.

Consider renaming the isVerified prop to isGivbackEligible for clarity and consistency with the data being passed. This would make the component's API more explicit about what it's actually representing.

-<VerificationBadge
-  isVerified={project?.isGivbackEligible}
-  verificationStatus={project.projectVerificationForm?.status}
-/>
+<VerificationBadge
+  isGivbackEligible={project?.isGivbackEligible}
+  verificationStatus={project.projectVerificationForm?.status}
+/>

If you make this change, be sure to update the VerificationBadge component definition and all other uses of this component throughout the codebase.

Verification successful

Verification Successful: No issues found with the verification criteria change

The isVerified prop in the VerificationBadge component is now correctly using project?.isGivbackEligible. Since project?.verified is not used elsewhere in the codebase, this change does not introduce any inconsistencies or issues.

Consider renaming the isVerified prop to isGivbackEligible for improved clarity and consistency.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other occurrences of 'verified' property and 'isGivbackEligible' property

echo "Searching for 'verified' property usage:"
rg --type typescript "project\?\.verified"

echo "\nSearching for 'isGivbackEligible' property usage:"
rg --type typescript "project\?\.isGivbackEligible"

echo "\nSearching for 'VerificationBadge' component usage:"
rg --type typescript "VerificationBadge"

Length of output: 581


Script:

#!/bin/bash
# Description: Corrected script to check for occurrences of 'verified' property, 'isGivbackEligible' property, and 'VerificationBadge' component in TypeScript files.

echo "Searching for 'verified' property usage:"
rg --type ts "project\?\.verified"

echo "\nSearching for 'isGivbackEligible' property usage:"
rg --type ts "project\?\.isGivbackEligible"

echo "\nSearching for 'VerificationBadge' component usage:"
rg --type ts "VerificationBadge"

Length of output: 1177

src/components/views/project/ProjectGIVbackToast.tsx (1)

412-412: LGTM: Color change enhances visual appeal.

The color change from neutralColors.gray[900] to brandColors.pinky[500] for the InnerLink styled component is approved. This update likely makes the links more visually appealing and noticeable within the component.

src/apollo/types/types.ts (1)

92-92: Verify the usage of new enum values across the application.

The additions of IS_GIVBACK_ELIGIBLE to EProjectsFilter and IsGivbackEligible to ECampaignFilterField enhance the filtering capabilities for GIVback eligible projects and campaigns. These changes are consistent with the existing code structure and align with the PR objectives.

To ensure these changes are fully integrated, please verify:

  1. The usage of these new enum values in relevant components and services.
  2. Any necessary updates to API calls or GraphQL queries that might use these filters.
  3. The presence of corresponding UI elements to utilize these new filter options.

Run the following script to check for the usage of these new enum values:

This will help ensure that the new enum values are properly utilized throughout the application.

Also applies to: 119-119

Verification successful

Enum Usage Verified Successfully.

The new enum values EProjectsFilter.IS_GIVBACK_ELIGIBLE and ECampaignFilterField.IsGivbackEligible are utilized in the following files:

  • src/helpers/url.tsx
  • src/components/menu/FilterMenu.tsx

These integrations confirm that the enhancements to the filtering capabilities for GIVback eligible projects and campaigns are properly implemented and actively used throughout the application.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for the usage of new enum values across the application

# Search for usage of IS_GIVBACK_ELIGIBLE
echo "Searching for usage of EProjectsFilter.IS_GIVBACK_ELIGIBLE:"
rg --type typescript "EProjectsFilter\.IS_GIVBACK_ELIGIBLE" -g '!src/apollo/types/types.ts'

# Search for usage of IsGivbackEligible
echo "Searching for usage of ECampaignFilterField.IsGivbackEligible:"
rg --type typescript "ECampaignFilterField\.IsGivbackEligible" -g '!src/apollo/types/types.ts'

Length of output: 524


Script:

#!/bin/bash
# Description: Check for the usage of new enum values across the application by searching .ts and .tsx files

# Search for usage of IS_GIVBACK_ELIGIBLE
echo "Searching for usage of EProjectsFilter.IS_GIVBACK_ELIGIBLE:"
rg "EProjectsFilter\.IS_GIVBACK_ELIGIBLE" -g '*.ts' -g '*.tsx' --glob '!src/apollo/types/types.ts'

# Search for usage of IsGivbackEligible
echo "Searching for usage of ECampaignFilterField.IsGivbackEligible:"
rg "ECampaignFilterField\.IsGivbackEligible" -g '*.ts' -g '*.tsx' --glob '!src/apollo/types/types.ts'

Length of output: 681

src/components/project-card/ProjectCard.tsx (1)

98-98: Verify visual impact of expanded footer visibility

The change to hasFooter will cause more projects (those that are GIVbacks eligible) to display the footer section. This could affect the overall layout and appearance of project cards, as well as their hover behavior.

Please ensure that:

  1. The layout remains visually appealing for all types of projects (with and without footer).
  2. The hover behavior works correctly for newly footer-enabled cards.
  3. The change doesn't introduce any unintended consequences in the card's responsiveness.

Consider adding or updating visual regression tests to capture these changes.

lang/en.json (1)

1717-1718: New tooltip entries added for project verification status.

Two new tooltip entries have been added to provide information about project verification status:

  1. "tooltip.vouched": Explains that the project has been verified as legitimate by Giveth Verifiers.
  2. "tooltip.givback_eligible": Indicates that the project has been verified as a Public Good by Giveth.

These additions enhance the user experience by providing clear explanations for different project statuses.

lang/es.json (1)

1717-1718: New tooltip entries added successfully.

Two new tooltip entries have been added to the Spanish language file:

  1. "tooltip.vouched": "Este proyecto ha sido avalado como legítimo por los verificadores de Giveth"
  2. "tooltip.givback_eligible": "Este proyecto ha sido verificado como un Bien Público por Giveth"

The translations appear to be correct and follow the existing structure and naming conventions of the file. These new entries will provide additional context for users regarding project legitimacy and eligibility for GIVbacks.

lang/ca.json (1)

1717-1718: New tooltip entries added correctly.

The two new tooltip entries have been added correctly to the JSON file:

  1. "tooltip.vouched": "Aquest projecte ha estat avalat com a legítim pels verificadors de Giveth"
  2. "tooltip.givback_eligible": "Aquest projecte ha estat verificat com un Bé Públic per Giveth"

These entries are properly formatted and placed at the end of the JSON object, maintaining the correct structure.

@@ -68,7 +68,7 @@ export const ProjectStats = () => {
</IconWithTooltip>
</Flex>
<VerificationBadge
isVerified={projectData?.verified}
isVerified={projectData?.isGivbackEligible}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Inconsistent usage of verification properties detected across the codebase

The change from projectData?.verified to projectData?.isGivbackEligible in ProjectStats.tsx impacts multiple components:

  • projectData?.verified is used in:

    • src/components/views/project/ProjectGIVbackToast.tsx
    • src/components/views/project/ProjectTabs.tsx
    • src/components/views/donate/DonatePageProjectDescription.tsx
  • projectData?.isGivbackEligible is used in:

    • src/components/views/project/ProjectGIVbackToast.tsx
    • src/components/views/project/projectActionCard/ProjectStats.tsx
    • src/components/views/donate/DonatePageProjectDescription.tsx
  • VerificationBadge component is used in:

    • src/components/views/project/projectActionCard/ProjectStats.tsx
    • src/components/views/userProfile/projectsTab/ProjectItem.tsx

This scattered usage suggests potential inconsistencies in how project verification status is handled and displayed across the application. It's recommended to:

  1. Review and unify the verification criteria to ensure consistency.
  2. Update all affected components to use the new isGivbackEligible property if it aligns with the intended functionality.
  3. Consider renaming the VerificationBadge component if its purpose is now specifically tied to GIVbacks eligibility.
  4. Conduct thorough testing to ensure that the changes do not introduce bugs or inconsistencies in the user interface.
Analysis chain

Verify the implications of changing verification criteria

The change from projectData?.verified to projectData?.isGivbackEligible alters the criteria for determining a project's verification status. While this might align with new requirements, it raises several concerns:

  1. The new criteria (isGivbackEligible) might not be a direct equivalent to the previous verified status. A project could potentially be verified but not eligible for GIVbacks, or vice versa.
  2. The component name VerificationBadge might now be misleading if it's specifically showing GIVbacks eligibility rather than a general verification status.
  3. Other parts of the application might still be using projectData?.verified, which could lead to inconsistencies in how project verification is represented across the platform.

To ensure consistency and correct implementation, please run the following script:

This script will help identify other occurrences of these properties and the VerificationBadge component, allowing you to ensure consistent usage across the codebase.

Additionally, consider the following actions:

  1. Update the VerificationBadge component name or its internal logic to accurately reflect its new purpose if it's now specifically for GIVbacks eligibility.
  2. Ensure that this change is documented in the project's documentation or changelog.
  3. Verify that this change aligns with the intended user experience and doesn't introduce confusion for users familiar with the previous verification system.
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other occurrences of 'verified' and 'isGivbackEligible' in the codebase

echo "Searching for 'verified' property usage:"
rg 'projectData\?\.verified' --type typescript

echo "\nSearching for 'isGivbackEligible' property usage:"
rg 'projectData\?\.isGivbackEligible' --type typescript

echo "\nSearching for 'VerificationBadge' component usage:"
rg '<VerificationBadge' --type typescript

Length of output: 592


Script:

#!/bin/bash
# Description: Check for other occurrences of 'verified' and 'isGivbackEligible' in the codebase

echo "Searching for 'verified' property usage:"
rg 'projectData\?\.verified' --type typescriptreact

echo "\nSearching for 'isGivbackEligible' property usage:"
rg 'projectData\?\.isGivbackEligible' --type typescriptreact

echo "\nSearching for 'VerificationBadge' component usage:"
rg '<VerificationBadge' --type typescriptreact

Length of output: 622


Script:

#!/bin/bash
# Description: Check for other occurrences of 'verified' and 'isGivbackEligible' in the codebase within .ts and .tsx files

echo "Searching for 'verified' property usage in .ts and .tsx files:"
rg 'projectData\?\.verified' --glob '*.ts' --glob '*.tsx'

echo "\nSearching for 'isGivbackEligible' property usage in .ts and .tsx files:"
rg 'projectData\?\.isGivbackEligible' --glob '*.ts' --glob '*.tsx'

echo "\nSearching for 'VerificationBadge' component usage in .ts and .tsx files:"
rg '<VerificationBadge' --glob '*.ts' --glob '*.tsx'

Length of output: 1415

Comment on lines +26 to +27
label: { id: 'label.isGivbackEligible' },
value: EProjectsFilter.IS_GIVBACK_ELIGIBLE,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issues Found:

  • EProjectsFilter.VERIFIED is still used in src/helpers/url.tsx.

Please update or remove this usage to ensure consistency with the new filter value.

Analysis chain

LGTM! Verify translations and update related components.

The change from "vouched" to "isGivbackEligible" aligns well with the PR objectives. This update shifts the focus from project verification to GIVback eligibility, which seems to be the intended behavior.

To ensure consistency across the codebase:

  1. Verify that the new label 'label.isGivbackEligible' is properly translated in all language files.
  2. Check other components that might be using the old EProjectsFilter.VERIFIED value and update them accordingly.

Run the following script to help with these verifications:

This script will help identify any inconsistencies or areas that might need updating due to this change.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash

# Check for the new label in translation files
echo "Checking for 'label.isGivbackEligible' in translation files:"
rg --type json "label\.isGivbackEligible"

echo "\nChecking for usages of EProjectsFilter.VERIFIED:"
rg --type typescript "EProjectsFilter\.VERIFIED"

echo "\nChecking for usages of EProjectsFilter.IS_GIVBACK_ELIGIBLE:"
rg --type typescript "EProjectsFilter\.IS_GIVBACK_ELIGIBLE"

Length of output: 800


Script:

#!/bin/bash

# Check for the new label in translation files
echo "Checking for 'label.isGivbackEligible' in translation files:"
rg --type json "label\.isGivbackEligible"

echo "\nChecking for usages of EProjectsFilter.VERIFIED in TypeScript files:"
rg --type ts "EProjectsFilter\.VERIFIED"

echo "\nChecking for usages of EProjectsFilter.IS_GIVBACK_ELIGIBLE in TypeScript files:"
rg --type ts "EProjectsFilter\.IS_GIVBACK_ELIGIBLE"

Length of output: 1014

@divine-comedian
Copy link
Contributor

#4751

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: QA
Development

Successfully merging this pull request may close these issues.

3 participants