Skip to content

Commit

Permalink
Earn Protocol WIP #5 (#525)
Browse files Browse the repository at this point in the history
5 of N pull requests.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced new components: `EarnNetworkSelectedStrategyPage` and
`EarnNetworkStrategiesPage` for improved navigation and strategy
selection.
- Added a new `StrategiesListView` component for displaying a list of
strategies in a grid layout.
- Implemented `UserActivity` and `StrategyExposure` components for
enhanced user interaction and strategy data presentation.

- **Enhancements**
- Improved layout and data presentation in the `EarnStrategyPage` with
expandable sections for better organization of strategy details.
- Updated the `Form` component to dynamically handle strategy data and
improve user interface context.

- **Bug Fixes**
- Resolved layout issues in the `Carousel` component and ensured
consistent behavior in the `AccountKitFeatures` component when the
signer is unavailable.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Marcin Ciarka <[email protected]>
  • Loading branch information
piekczyk and marcinciarka authored Oct 9, 2024
1 parent 1c764d4 commit 2e4e03c
Show file tree
Hide file tree
Showing 91 changed files with 2,439 additions and 987 deletions.
1 change: 1 addition & 0 deletions apps/earn-protocol-landing-page/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
<NextIntlClientProvider messages={messages}>
<MasterPage>{children}</MasterPage>
</NextIntlClientProvider>
<div id="portal" style={{ position: 'absolute' }} />
</body>
</html>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,55 +1,10 @@
'use client'
import { Carousel, Text } from '@summerfi/app-earn-ui'
import { type DropdownOption, type Risk, type TokenSymbolsList } from '@summerfi/app-types'

import { LandingPageStrategyPicker } from '@/components/organisms/LandingPageStrategyPicker/LandingPageStrategyPicker'
import { strategiesList } from '@/constants/dev-strategies-list'

import classNames from '@/components/layout/LandingPageContent/LandingPageContent.module.scss'

const options: DropdownOption[] = [
{ label: 'DAI', value: 'DAI', tokenSymbol: 'DAI' },
{ label: 'USDC', value: 'USDC', tokenSymbol: 'USDC' },
{ label: 'USDT', value: 'USDT', tokenSymbol: 'USDT' },
]

const content: {
id: string
apy: string
symbol: TokenSymbolsList
risk: Risk
totalAssets: string
bestFor: string
options: DropdownOption[]
}[] = [
{
id: '1',
apy: '9.3',
symbol: 'USDC',
risk: 'high',
totalAssets: '800,130,321',
bestFor: '$800,130,321',
options,
},
{
id: '2',
apy: '6.3',
symbol: 'DAI',
risk: 'medium',
totalAssets: '800,130,321',
bestFor: '$800,130,321',
options,
},
{
id: '3',
apy: '7.3',
symbol: 'USDT',
risk: 'low',
totalAssets: '800,130,321',
bestFor: '$800,130,321',
options,
},
]

export const LandingPageContent = () => {
return (
<div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
Expand All @@ -70,10 +25,9 @@ export const LandingPageContent = () => {
</Text>
</div>
<Carousel
components={content.map((item) => (
<LandingPageStrategyPicker {...item} key={item.id} />
components={strategiesList.map((strategy) => (
<LandingPageStrategyPicker strategy={strategy} key={strategy.id} />
))}
contentHeight={596}
contentWidth={515}
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,67 +1,20 @@
import { type ChangeEvent, useState } from 'react'
import { Sidebar, SidebarFootnote, sidebarFootnote, StrategyCard } from '@summerfi/app-earn-ui'
import { type DropdownOption, type Risk, type TokenSymbolsList } from '@summerfi/app-types'
import { mapNumericInput } from '@summerfi/app-utils'
'use client'

import { StrategyCard, StrategySimulationForm } from '@summerfi/app-earn-ui'

import { type strategiesList } from '@/constants/dev-strategies-list'

import classNames from '@/components/organisms/LandingPageStrategyPicker/LandingPageStrategyPicker.module.scss'

export const LandingPageStrategyPicker = ({
apy,
symbol,
risk,
totalAssets,
bestFor,
options,
strategy,
}: {
id: string
apy: string
symbol: TokenSymbolsList
risk: Risk
totalAssets: string
bestFor: string
options: DropdownOption[]
strategy: (typeof strategiesList)[number]
}) => {
const [value, setValue] = useState(mapNumericInput('10000'))

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
setValue(mapNumericInput(e.target.value))
}

const dropdownValue = options.find((option) => option.value === symbol) || options[0]

const sidebarProps = {
title: 'Deposit',
inputValue: value,
dropdown: { value: dropdownValue, options },
handleInputChange: handleChange,
banner: {
title: 'Estimated earnings after 1 year',
value: '67,353 USDC',
},
primaryButton: {
label: 'Get Started',
action: () => null,
disabled: false,
},
footnote: (
<SidebarFootnote
title={sidebarFootnote.title}
list={sidebarFootnote.list}
tooltip={{ style: sidebarFootnote.tooltip.style, showAbove: true }}
/>
),
}

return (
<div className={classNames.wrapper}>
<StrategyCard
apy={apy}
bestFor={bestFor}
symbol={symbol}
risk={risk}
totalAssets={totalAssets}
/>
<Sidebar {...sidebarProps} />
<StrategyCard {...strategy} />
<StrategySimulationForm strategyData={strategy} />
</div>
)
}
64 changes: 64 additions & 0 deletions apps/earn-protocol-landing-page/constants/dev-strategies-list.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { NetworkNames, type Risk, type TokenSymbolsList } from '@summerfi/app-types'

export const strategiesList = [
{
id: 'USDT-ethereum-high',
symbol: 'USDT' as TokenSymbolsList,
network: NetworkNames.ethereumMainnet,
apy: '3.2',
tokenBonus: '1.1%',
bestFor: 'Higher yields',
risk: 'high' as Risk,
totalAssets: '800,130,321',
},
{
id: 'USDC-ethereum-low',
symbol: 'USDC' as TokenSymbolsList,
network: NetworkNames.ethereumMainnet,
apy: '7.2',
tokenBonus: '2.1%',
bestFor: 'Lending only exposure',
risk: 'low' as Risk,
totalAssets: '800,130,321',
},
{
id: 'ETH-ethereum-high',
symbol: 'ETH' as TokenSymbolsList,
network: NetworkNames.ethereumMainnet,
apy: '2.1',
tokenBonus: '2.1%',
bestFor: 'Higher yields',
risk: 'high' as Risk,
totalAssets: '800,130,321',
},
{
id: 'ETH-base-high',
symbol: 'ETH' as TokenSymbolsList,
network: NetworkNames.baseMainnet,
apy: '2.1',
tokenBonus: '2.1%',
bestFor: 'Lending only exposure',
risk: 'high' as Risk,
totalAssets: '800,130,321',
},
{
id: 'DAI-base-medium',
symbol: 'DAI' as TokenSymbolsList,
network: NetworkNames.baseMainnet,
apy: '2.1',
tokenBonus: '2.1%',
bestFor: 'Higher yields',
risk: 'medium' as Risk,
totalAssets: '800,130,321',
},
{
id: 'AAVE-base-low',
symbol: 'AAVE' as TokenSymbolsList,
network: NetworkNames.baseMainnet,
apy: '2.1',
tokenBonus: '2.1%',
bestFor: 'Lending only exposure',
risk: 'low' as Risk,
totalAssets: '800,130,321',
},
]
8 changes: 2 additions & 6 deletions apps/earn-protocol-landing-page/next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { PrismaPlugin } from '@prisma/nextjs-monorepo-workaround-plugin'
import createNextIntlPlugin from 'next-intl/plugin'

const withNextIntl = createNextIntlPlugin()
Expand All @@ -7,14 +6,11 @@ const withNextIntl = createNextIntlPlugin()
const nextConfig = {
output: 'standalone',
reactStrictMode: false,
webpack: (config, { isServer }) => {
if (isServer) {
config.plugins = [...config.plugins, new PrismaPlugin()]
}
webpack: (config) => {
config.externals.push('pino-pretty', 'encoding')

return config
},
transpilePackages: ['@lifi/widget', '@lifi/wallet-management'],
sassOptions: {
prependData: `
@import './node_modules/include-media/dist/_include-media.scss';
Expand Down
16 changes: 7 additions & 9 deletions apps/earn-protocol-landing-page/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,36 @@
},
"dependencies": {
"@loadable/component": "^5.16.4",
"@prisma/nextjs-monorepo-workaround-plugin": "^5.15.1",
"@summerfi/app-db": "workspace:*",
"@summerfi/app-icons": "workspace:*",
"@summerfi/app-types": "workspace:*",
"@summerfi/app-earn-ui": "workspace:*",
"@summerfi/app-types": "workspace:*",
"@summerfi/app-utils": "workspace:*",
"@summerfi/serverless-shared": "workspace:*",
"@tabler/icons-react": "^3.11.0",
"@tabler/icons-react": "^3.19.0",
"browser-detect": "^0.2.28",
"clsx": "^2.1.1",
"dayjs": "^1.11.12",
"include-media": "2.0.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.1",
"mixpanel": "^0.18.0",
"mixpanel-browser": "^2.53.0",
"next": "^14.2.13",
"next-intl": "^3.17.2",
"next": "^14.2.15",
"next-intl": "^3.21.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"usehooks-ts": "^3.1.0"
},
"devDependencies": {
"@summerfi/eslint-config": "workspace:*",
"@summerfi/typescript-config": "workspace:*",
"@types/jsonwebtoken": "^9.0.0",
"@types/loadable__component": "^5.13.9",
"@types/lodash": "^4.14.109",
"@types/lodash-es": "^4.17.1",
"@types/mixpanel-browser": "^2.49.0",
"@types/node": "^20.14.2",
"@types/node-fetch": "^2.6.11",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/jsonwebtoken": "^9.0.0",
"json-to-ts": "^1.7.0",
"node-fetch": "^2.7.0"
},
Expand Down
3 changes: 0 additions & 3 deletions apps/earn-protocol/.eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,4 @@ module.exports = {
sourceType: 'module',
tsconfigRootDir: __dirname,
},
rules: {
'no-magic-numbers': 'off',
},
}
13 changes: 0 additions & 13 deletions apps/earn-protocol/app/api/rays/route.ts

This file was deleted.

2 changes: 1 addition & 1 deletion apps/earn-protocol/app/api/t/route.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MixpanelEventProduct, MixpanelEventTypes } from '@summerfi/app-types'
import { snakeCase } from 'lodash'
import { snakeCase } from 'lodash-es'
import { type NextRequest, NextResponse } from 'next/server'

import { trackEventHandler } from '@/server-handlers/mixpanel'
Expand Down
19 changes: 19 additions & 0 deletions apps/earn-protocol/app/earn/[network]/[strategy_id]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { type NetworkNames } from '@summerfi/app-types'

import { StrategiesListView } from '@/components/layout/StrategiesListView/StrategiesListView'

const EarnNetworkSelectedStrategyPage = ({
params,
}: {
params: {
network: NetworkNames
strategy_id: string
}
}) => {
// particular strategy loaded
return (
<StrategiesListView selectedNetwork={params.network} selectedStrategy={params.strategy_id} />
)
}

export default EarnNetworkSelectedStrategyPage
16 changes: 16 additions & 0 deletions apps/earn-protocol/app/earn/[network]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { type NetworkNames } from '@summerfi/app-types'

import { StrategiesListView } from '@/components/layout/StrategiesListView/StrategiesListView'

type EarnNetworkStrategiesPageProps = {
params: {
network: NetworkNames | 'all-networks'
}
}

const EarnNetworkStrategiesPage = ({ params }: EarnNetworkStrategiesPageProps) => {
// list of strategies (for a network)
return <StrategiesListView selectedNetwork={params.network} />
}

export default EarnNetworkStrategiesPage
Loading

0 comments on commit 2e4e03c

Please sign in to comment.