Skip to content

Commit c9c5b79

Browse files
yannvryannvr
committed
feat: update dependencies and enhance application styling
- Downgraded React and ReactDOM to version 18.3.1 for compatibility. - Added new dependencies: react-icons and react-router-dom for improved routing and icon usage. - Updated TypeScript types for React and React Router. - Introduced global CSS variables for consistent theming across the application. - Enhanced global styles and component-specific styles for better visual consistency and user experience. - Refactored ProtocolList and ProtocolRiskAssessment components to improve functionality and maintainability. - Implemented a risk assessment modal for detailed protocol insights. - Updated the ProtocolTable to include risk assessment actions and improved filtering capabilities.
1 parent 706197d commit c9c5b79

22 files changed

+13044
-293
lines changed

‎app/compare/CompareFilters.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import { Protocol } from '../../src/types/protocol';
5+
import styles from './page.module.css';
6+
import ProtocolList from '../../src/components/ProtocolList';
7+
8+
type CompareFiltersProps = {
9+
protocols: Protocol[];
10+
};
11+
12+
export default function CompareFilters({ protocols }: CompareFiltersProps) {
13+
const [filters, setFilters] = useState({
14+
minApy: 0,
15+
minSafetyScore: 0,
16+
});
17+
18+
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
19+
const { name, value } = e.target;
20+
setFilters(prev => ({
21+
...prev,
22+
[name]: Number(value)
23+
}));
24+
};
25+
26+
const handleReset = () => {
27+
setFilters({
28+
minApy: 0,
29+
minSafetyScore: 0,
30+
});
31+
};
32+
33+
return (
34+
<>
35+
<div className={styles.filterSection}>
36+
<div className={styles.filterIcon}>
37+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
38+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
39+
</svg>
40+
<span>Filter Protocols</span>
41+
</div>
42+
43+
<div className={styles.sliderGroup}>
44+
<div className={styles.sliderLabel}>
45+
<span>Minimum APY (%)</span>
46+
<span className={styles.sliderValue}>{filters.minApy}%</span>
47+
</div>
48+
<input
49+
type="range"
50+
name="minApy"
51+
min="0"
52+
max="20"
53+
step="0.5"
54+
value={filters.minApy}
55+
onChange={handleFilterChange}
56+
className={styles.slider}
57+
/>
58+
<div className={styles.sliderMarkers}>
59+
<span>0%</span>
60+
<span>5%</span>
61+
<span>10%</span>
62+
<span>15%</span>
63+
<span>20%+</span>
64+
</div>
65+
</div>
66+
67+
<div className={styles.sliderGroup}>
68+
<div className={styles.sliderLabel}>
69+
<span>Minimum Safety Score</span>
70+
<span className={styles.sliderValue}>{filters.minSafetyScore}/100</span>
71+
</div>
72+
<input
73+
type="range"
74+
name="minSafetyScore"
75+
min="0"
76+
max="100"
77+
step="5"
78+
value={filters.minSafetyScore}
79+
onChange={handleFilterChange}
80+
className={styles.slider}
81+
/>
82+
<div className={styles.sliderMarkers}>
83+
<span>0</span>
84+
<span>25</span>
85+
<span>50</span>
86+
<span>75</span>
87+
<span>100</span>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div className={styles.resultsHeader}>
93+
<h2>All Available Protocols</h2>
94+
<button
95+
className={styles.resetButton}
96+
onClick={handleReset}
97+
disabled={filters.minApy === 0 && filters.minSafetyScore === 0}
98+
>
99+
Reset Filters
100+
</button>
101+
</div>
102+
103+
<div className={styles.showAdvanced}>
104+
<button className={styles.advancedButton}>Show Advanced Filters</button>
105+
</div>
106+
107+
<div className={styles.protocolList}>
108+
<ProtocolList protocols={protocols} filters={filters} />
109+
</div>
110+
</>
111+
);
112+
}

‎app/compare/page.tsx‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Metadata } from 'next';
22
import { getProtocols } from '../../src/api/protocols';
33
import styles from './page.module.css';
4-
import ProtocolList from '../../src/components/ProtocolList';
4+
import CompareFilters from './CompareFilters';
55

66
export const metadata: Metadata = {
77
title: 'Compare Protocols - YieldMax',
@@ -19,57 +19,7 @@ export default async function ComparePage() {
1919
<p>Find the best yield farming opportunities by comparing key metrics across protocols</p>
2020
</div>
2121

22-
<div className={styles.filterSection}>
23-
<div className={styles.filterIcon}>
24-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
25-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
26-
</svg>
27-
<span>Filter Protocols (Disabled)</span>
28-
</div>
29-
30-
<div className={styles.sliderGroup}>
31-
<div className={styles.sliderLabel}>
32-
<span>Minimum APY (%)</span>
33-
<span className={styles.sliderValue}>0%</span>
34-
</div>
35-
<input type="range" min="0" max="20" defaultValue="0" className={styles.slider} disabled />
36-
<div className={styles.sliderMarkers}>
37-
<span>0%</span>
38-
<span>5%</span>
39-
<span>10%</span>
40-
<span>15%</span>
41-
<span>20%+</span>
42-
</div>
43-
</div>
44-
45-
<div className={styles.sliderGroup}>
46-
<div className={styles.sliderLabel}>
47-
<span>Minimum Safety Score</span>
48-
<span className={styles.sliderValue}>0/100</span>
49-
</div>
50-
<input type="range" min="0" max="100" defaultValue="0" className={styles.slider} disabled />
51-
<div className={styles.sliderMarkers}>
52-
<span>0</span>
53-
<span>25</span>
54-
<span>50</span>
55-
<span>75</span>
56-
<span>100</span>
57-
</div>
58-
</div>
59-
</div>
60-
61-
<div className={styles.resultsHeader}>
62-
<h2>All Available Protocols</h2>
63-
<button className={styles.resetButton} disabled>Reset Filters</button>
64-
</div>
65-
66-
<div className={styles.showAdvanced}>
67-
<button className={styles.advancedButton} disabled>Show Advanced Filters</button>
68-
</div>
69-
70-
<div className={styles.protocolList}>
71-
<ProtocolList protocols={protocols} limit={undefined} />
72-
</div>
22+
<CompareFilters protocols={protocols} />
7323
</div>
7424
);
7525
} catch (error) {

‎app/globals.css‎

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,58 @@
4646
--border-radius-md: 0.375rem;
4747
--border-radius-lg: 0.5rem;
4848
--border-radius-full: 9999px;
49+
50+
/* Global CSS variables for consistent colors */
51+
--color-link: #ffffff;
52+
--color-link-hover: #f0f0f0;
53+
--color-primary: #10b981;
54+
--color-secondary: #60a5fa;
55+
--color-text: #f8fafc;
56+
--color-text-muted: #94a3b8;
57+
--color-border: rgba(71, 85, 105, 0.3);
58+
--color-card: #1e293b;
59+
--color-card-background: #1e293b;
60+
--color-card-background-secondary: #0f172a;
61+
--color-row-hover: rgba(255, 255, 255, 0.05);
62+
--color-background: #0f172a;
63+
--border-radius-md: 0.375rem;
64+
--border-radius-lg: 0.5rem;
65+
--border-radius-xl: 0.75rem;
66+
67+
/* Score colors */
68+
--score-green: #10b981;
69+
--score-blue: #60a5fa;
70+
--score-yellow: #f59e0b;
71+
--score-orange: #f97316;
72+
--score-red: #ef4444;
4973
}
5074

5175
/* Dark mode theme */
5276
@media (prefers-color-scheme: dark) {
5377
:root {
54-
--color-background: #111827;
55-
--color-card: #1F2937;
56-
--color-border: #374151;
57-
58-
--color-text: #F9FAFB;
59-
--color-text-muted: #9CA3AF;
78+
--color-background: #0f172a;
79+
--color-card: #1e293b;
80+
--color-card-background: #1e293b;
81+
--color-card-background-secondary: #0f172a;
82+
--color-border: rgba(71, 85, 105, 0.3);
83+
84+
--color-text: #f8fafc;
85+
--color-text-muted: #94a3b8;
6086
--color-text-light: #6B7280;
6187

88+
--color-link: #ffffff;
89+
--color-link-hover: #f0f0f0;
90+
91+
--color-primary: #10b981;
92+
--color-secondary: #60a5fa;
93+
94+
/* Score colors */
95+
--score-green: #10b981;
96+
--score-blue: #60a5fa;
97+
--score-yellow: #f59e0b;
98+
--score-orange: #f97316;
99+
--score-red: #ef4444;
100+
62101
/* Dark mode shadows */
63102
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
64103
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
@@ -83,10 +122,14 @@ body {
83122
}
84123

85124
a {
86-
color: inherit;
125+
color: var(--color-link);
87126
text-decoration: none;
88127
}
89128

129+
a:hover {
130+
color: var(--color-link-hover);
131+
}
132+
90133
.container {
91134
max-width: var(--max-width);
92135
margin: 0 auto;
@@ -136,3 +179,25 @@ a {
136179
padding: 0;
137180
margin: 0;
138181
}
182+
183+
/* Global styles */
184+
body {
185+
margin: 0;
186+
padding: 0;
187+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
188+
background-color: var(--color-background);
189+
color: var(--color-text);
190+
line-height: 1.5;
191+
}
192+
193+
/* Default container */
194+
.container {
195+
max-width: 1280px;
196+
margin: 0 auto;
197+
padding: 0 1rem;
198+
}
199+
200+
/* Global utility classes */
201+
.text-center {
202+
text-align: center;
203+
}

‎app/page.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
.primary-button:hover {
5252
background-color: var(--color-primary-hover);
5353
transform: translateY(-2px);
54+
color: var(--color-text);
5455
}
5556

5657
.secondary-button {

0 commit comments

Comments
 (0)