-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
7 of N pull requests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Introduced the `StrategyDetailsPage` component for detailed strategy information. - Added the `StrategyDetailsView` component to enhance the presentation of strategy details. - Launched the `ToggleButton` component for interactive toggle functionality. - Introduced the `Timeframes` component for selecting chart timeframes. - Enhanced navigation with a new "Yield Trend" item and improved descriptions. - Updated `StrategyExposure` to utilize `InlineButtons` for filter selection. - **Style** - Introduced new styles for the `ToggleButton`, `Timeframes`, and `InlineButtons` components. - Improved hover state styling for navigation items. - **Bug Fixes** - Replaced the `StrategyGridDetails` component with `StrategyGridPreview`, ensuring consistent rendering of strategy information. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: sebastianPiekarczyk <sebastian@oazoapps.com>
- Loading branch information
1 parent
e947a75
commit 8d4f6a4
Showing
38 changed files
with
1,301 additions
and
295 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
apps/earn-protocol/app/earn/[network]/strategy/[strategy_id]/details/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { useMemo } from 'react' | ||
| import { StrategyGridDetails } from '@summerfi/app-earn-ui' | ||
| import { type NetworkNames } from '@summerfi/app-types' | ||
|
|
||
| import { StrategyDetailsView } from '@/components/layout/StrategyDetailsView/StrategyDetailsView' | ||
| import { strategiesList } from '@/constants/dev-strategies-list' | ||
|
|
||
| type StrategyDetailsPageProps = { | ||
| params: { | ||
| network: NetworkNames | 'all-networks' | ||
| strategy_id: string | ||
| } | ||
| } | ||
|
|
||
| const StrategyDetailsPage = ({ params }: StrategyDetailsPageProps) => { | ||
| const selectedStrategyData = useMemo(() => { | ||
| return strategiesList.find((strategy) => strategy.id === params.strategy_id) | ||
| }, [params]) | ||
|
|
||
| return ( | ||
| <StrategyGridDetails strategy={selectedStrategyData as (typeof strategiesList)[number]}> | ||
| <StrategyDetailsView /> | ||
| </StrategyGridDetails> | ||
| ) | ||
| } | ||
|
|
||
| export default StrategyDetailsPage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
apps/earn-protocol/components/layout/StrategyDetailsView/StrategyDetailsView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| 'use client' | ||
| import { Card } from '@summerfi/app-earn-ui' | ||
|
|
||
| import { StrategyDetailsHowItWorks } from '@/components/organisms/StrategyDetailsHowItWorks/StrategyDetailsHowItWorks' | ||
| import { type IndividualYieldsRawData } from '@/components/organisms/StrategyDetailsYields/mapper' | ||
| import { StrategyDetailsYields } from '@/components/organisms/StrategyDetailsYields/StrategyDetailsYields' | ||
|
|
||
| const yieldsRawData: IndividualYieldsRawData[] = [ | ||
| { | ||
| strategy: 'Summer.fi USDC Strategy', | ||
| currentApy: '0.32', | ||
| avgApyPer30d: '0.103', | ||
| avgApyPer1y: '0.093', | ||
| allTimeMedianApy: '0.0643', | ||
| yieldLowHigh: { | ||
| low: '0.0643', | ||
| high: '0.1355', | ||
| }, | ||
| }, | ||
| { | ||
| strategy: 'Pendle USDC0++', | ||
| currentApy: '0.32', | ||
| avgApyPer30d: '0.103', | ||
| avgApyPer1y: '0.093', | ||
| allTimeMedianApy: '0.0643', | ||
| yieldLowHigh: { | ||
| low: '0.0643', | ||
| high: '0.1355', | ||
| }, | ||
| }, | ||
| { | ||
| strategy: 'AAVE v3 USDC', | ||
| currentApy: '0.32', | ||
| avgApyPer30d: '0.103', | ||
| avgApyPer1y: '0.093', | ||
| allTimeMedianApy: '0.0643', | ||
| yieldLowHigh: { | ||
| low: '0.0643', | ||
| high: '0.1355', | ||
| }, | ||
| }, | ||
| { | ||
| strategy: 'MetaMorpho Gauntlet MKR Blended', | ||
| currentApy: '0.32', | ||
| avgApyPer30d: '0.103', | ||
| avgApyPer1y: '0.093', | ||
| allTimeMedianApy: '0.0643', | ||
| yieldLowHigh: { | ||
| low: '0.0643', | ||
| high: '0.1355', | ||
| }, | ||
| }, | ||
| { | ||
| strategy: 'All Defi Median', | ||
| currentApy: '0.32', | ||
| avgApyPer30d: '0.103', | ||
| avgApyPer1y: '0.093', | ||
| allTimeMedianApy: '0.0643', | ||
| yieldLowHigh: { | ||
| low: '0.0643', | ||
| high: '0.1355', | ||
| }, | ||
| }, | ||
| ] | ||
|
|
||
| export const StrategyDetailsView = () => { | ||
| return ( | ||
| <> | ||
| <StrategyDetailsHowItWorks /> | ||
| <StrategyDetailsYields rawData={yieldsRawData} /> | ||
| <div id="yield-sources"> | ||
| <Card variant="cardPrimary"> | ||
| <div style={{ margin: '500px' }}>Yield Sources</div> | ||
| </Card> | ||
| </div> | ||
| <div id="security"> | ||
| <Card variant="cardPrimary"> | ||
| <div style={{ margin: '500px' }}>Security</div> | ||
| </Card> | ||
| </div> | ||
| <div id="faq"> | ||
| <Card variant="cardPrimary"> | ||
| <div style={{ margin: '500px' }}>Faq</div> | ||
| </Card> | ||
| </div> | ||
| </> | ||
| ) | ||
| } |
26 changes: 26 additions & 0 deletions
26
apps/earn-protocol/components/organisms/Charts/ChartHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { SimpleGrid, Timeframes, ToggleButton } from '@summerfi/app-earn-ui' | ||
| import { type TimeframesType } from '@summerfi/app-types' | ||
|
|
||
| type ChartHeaderProps = { | ||
| compare: boolean | ||
| setCompare: (value: boolean) => void | ||
| timeframe: TimeframesType | ||
| setTimeframe: (timeframe: string) => void | ||
| } | ||
|
|
||
| export const ChartHeader = ({ compare, timeframe, setCompare, setTimeframe }: ChartHeaderProps) => { | ||
| return ( | ||
| <SimpleGrid columns={2} rows={1}> | ||
| <ToggleButton | ||
| title="Compare to others" | ||
| checked={compare} | ||
| onChange={() => setCompare(!compare)} | ||
| /> | ||
| <Timeframes | ||
| timeframes={['90d', '6m', '1y', '3y']} | ||
| activeTimeframe={timeframe} | ||
| setActiveTimeframe={setTimeframe} | ||
| /> | ||
| </SimpleGrid> | ||
| ) | ||
| } |
90 changes: 90 additions & 0 deletions
90
apps/earn-protocol/components/organisms/Charts/ComparisonChart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { type TimeframesType } from '@summerfi/app-types' | ||
| import { | ||
| Area, | ||
| ComposedChart, | ||
| Legend, | ||
| Line, | ||
| ResponsiveContainer, | ||
| Tooltip, | ||
| XAxis, | ||
| YAxis, | ||
| } from 'recharts' | ||
|
|
||
| type ComparisonChartProps = { | ||
| data: unknown[] | ||
| dataNames: string[] | ||
| colors: { [key: string]: string } | ||
| compare: boolean | ||
| timeframe: TimeframesType | ||
| } | ||
|
|
||
| export const ComparisonChart = ({ data, dataNames, colors, compare }: ComparisonChartProps) => { | ||
| return ( | ||
| <div style={{ width: '100%', height: '400px' }}> | ||
| <ResponsiveContainer width="100%" height="90%"> | ||
| <ComposedChart | ||
| data={data} | ||
| margin={{ | ||
| top: 50, | ||
| right: 0, | ||
| left: 0, | ||
| bottom: 0, | ||
| }} | ||
| > | ||
| <defs> | ||
| <linearGradient id="summerYieldGradient" x1="0" y1="0" x2="0" y2="1"> | ||
| <stop offset="0%" stopColor="#FF49A4" stopOpacity={0.8} /> | ||
| <stop offset="100%" stopColor="#333333" stopOpacity={0.4} /> | ||
| </linearGradient> | ||
| </defs> | ||
|
|
||
| <XAxis dataKey="name" fontSize={12} interval={0} /> | ||
| <YAxis strokeWidth={0} width={45} tickFormatter={(label: string) => `${label}%`} /> | ||
| <Tooltip | ||
| formatter={(val) => `${Number(val).toFixed(2)}`} | ||
| useTranslate3d | ||
| contentStyle={{ | ||
| zIndex: 1000, | ||
| backgroundColor: 'var(--color-surface-subtler)', | ||
| borderRadius: '5px', | ||
| padding: '20px 30px', | ||
| border: 'none', | ||
| }} | ||
| /> | ||
| {dataNames.map((dataName, dataIndex) => | ||
| dataName === 'Summer USDS Strategy' ? ( | ||
| <Area | ||
| key={dataName} | ||
| type="natural" | ||
| animationDuration={300} | ||
| animationBegin={dataIndex * 50} | ||
| animationEasing="ease-out" | ||
| dataKey={dataName} | ||
| strokeWidth={1} | ||
| stroke={colors[`${dataName}-color` as keyof typeof colors]} | ||
| fillOpacity={1} | ||
| fill="url(#summerYieldGradient)" | ||
| /> | ||
| ) : ( | ||
| <Line | ||
| animationId={dataIndex} | ||
| key={dataName} | ||
| animationDuration={300} | ||
| animationBegin={dataIndex * 50} | ||
| animationEasing="ease-out" | ||
| type="natural" | ||
| dataKey={dataName} | ||
| strokeDasharray="3 3" | ||
| stroke={colors[`${dataName}-color` as keyof typeof colors]} | ||
| strokeWidth={compare ? 1 : 0} | ||
| dot={false} | ||
| connectNulls | ||
| /> | ||
| ), | ||
| )} | ||
| <Legend iconType="circle" iconSize={8} align="center" layout="horizontal" height={60} /> | ||
| </ComposedChart> | ||
| </ResponsiveContainer> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.