Investment features

[shadrach68]

Closes #419

Description

Implements Investment Features for the Search Bar to improve the overall application quality and user experience in the Web3/DeFi ecosystem. This replaces the static list rendering with an interactive, performant search, filter, and sorting component.

Changes

• ✅ Created a new InvestmentSearchBar component with extensive search and filter capabilities.
• ✅ Integrated the new component into DeFiInterface.tsx to dynamically filter the active protocol list.
• ✅ Wrote a full Vitest test suite (InvestmentSearchBar.test.tsx).
• ✅ Fixed pre-existing strict TypeScript warnings in DeFiInterface (resolved unused setStakeDuration, replaced as any with proper types, and safely removed dangerous non-null assertions).

Features

• Text Search: Search protocols by name or token symbol.
• Risk Level Filtering: Filter investments by Low, Medium, or High risk.
• Minimum APY Filtering: Filter protocols offering returns above a specific APY threshold.
• Sorting: Sort results by Highest APY or Highest TVL (default).
• Accessibility: Full semantic HTML, ARIA labels, and aria-expanded states for screen readers.
• Performance: Optimized rendering using React's useMemo for heavy filtering and sorting logic.

Testing

• InvestmentSearchBar Component: 6/6 tests passing ✅ (Search, toggle filters, risk level, min APY, sorting).
• Total: All existing and new tests passing ✅.

Screenshots

• Default Search Bar view
• Search results populated
• Expanded Filters (Risk & APY)
• List Sorted by Highest APY

Checklist

• Code follows project coding standards (resolved TypeScript strict mode issues)
• All tests pass locally (npm run test)
• No regression in existing functionality
• Accessibility guidelines followed (WCAG)
• Performance impact is minimal
• Code review requested

Related Issues

Closes #419 - Search Bar : Investment Features

[drips-wave]

@shadrach68 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits