Skip to content

Commit

Permalink
add navigate to earn landing page & open liquidity widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@tienkane
tienkane committed Nov 14, 2024
1 parent d5b9bcc commit 5eea48c
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 155 deletions.
244 changes: 101 additions & 143 deletions src/pages/Earns/PoolExplorer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { ChainId, LiquidityWidget, PoolType } from '@kyberswap/liquidity-widgets'
import '@kyberswap/liquidity-widgets/dist/style.css'
import { t } from '@lingui/macro'
import { useEffect, useMemo, useState } from 'react'
import { Star } from 'react-feather'
import { useMedia } from 'react-use'
import { Flex, Text } from 'rebass'
import { useGetDexListQuery } from 'services/ksSetting'
import { EarnPool, usePoolsExplorerQuery, useSupportedProtocolsQuery } from 'services/zapEarn'
import { usePoolsExplorerQuery, useSupportedProtocolsQuery } from 'services/zapEarn'

import { ReactComponent as IconHighAprPool } from 'assets/svg/ic_pool_high_apr.svg'
import { ReactComponent as IconHighlightedPool } from 'assets/svg/ic_pool_highlighted.svg'
Expand All @@ -15,35 +14,18 @@ import { ReactComponent as IconSolidEarningPool } from 'assets/svg/ic_pool_solid
import Pagination from 'components/Pagination'
import Search from 'components/Search'
import { NETWORKS_INFO } from 'constants/networks'
import { useWeb3React } from 'hooks'
import useChainsConfig from 'hooks/useChainsConfig'
import useDebounce from 'hooks/useDebounce'
import useTheme from 'hooks/useTheme'
import SortIcon, { Direction } from 'pages/MarketOverview/SortIcon'
import { MEDIA_WIDTHS } from 'theme'

import useLiquidityWidget from '../useLiquidityWidget'
import DropdownMenu, { MenuOption } from './DropdownMenu'
import TableContent from './TableContent'
import {
ContentWrapper,
LiquidityWidgetWrapper,
PoolsExplorerWrapper,
TableHeader,
TableWrapper,
Tag,
TagContainer,
} from './styles'
import { ContentWrapper, PoolsExplorerWrapper, TableHeader, TableWrapper, Tag, TagContainer } from './styles'
import useFilter from './useFilter'

interface ZapInParams {
provider: any
poolAddress: string
chainId: ChainId
onDismiss: () => void
source: string
poolType: PoolType
}

export enum FilterTag {
HIGHLIGHTED_POOL = 'highlighted_pool',
HIGH_APR = 'high_apr',
Expand Down Expand Up @@ -77,9 +59,9 @@ export const timings: MenuOption[] = [

const Earn = () => {
const theme = useTheme()
const { library } = useWeb3React()
const { supportedChains } = useChainsConfig()
const { filters, updateFilters } = useFilter()
const { liquidityWidget, handleOpenZapInWidget } = useLiquidityWidget()

const dexList = useGetDexListQuery({
chainId: NETWORKS_INFO[filters.chainId].ksSettingRoute,
Expand Down Expand Up @@ -111,7 +93,6 @@ const Earn = () => {
const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)

const [search, setSearch] = useState('')
const [zapinParams, setZapinParams] = useState<ZapInParams | null>(null)
const deboundedSearch = useDebounce(search, 300)

const onChainChange = (newChainId: string | number) => {
Expand All @@ -137,21 +118,6 @@ const Earn = () => {
updateFilters('orderBy', '')
}

const handleCloseZapInWidget = () => setZapinParams(null)
const handleOpenZapInWidget = (pool: EarnPool) => {
if (!Object.keys(PoolType).includes(`DEX_${pool.exchange.toUpperCase()}`)) return
setZapinParams({
provider: library,
// poolAddress: pool.address,
// chainId: filters.chainId as unknown as ChainId,
poolAddress: '0x641C00A822e8b671738d32a431a4Fb6074E5c79d',
chainId: ChainId.Arbitrum,
onDismiss: handleCloseZapInWidget,
source: 'kyberswap-demo-zap',
poolType: PoolType[`DEX_${pool.exchange.toUpperCase()}` as keyof typeof PoolType],
})
}

useEffect(() => {
if (filters.q !== deboundedSearch) {
updateFilters('q', deboundedSearch || '')
Expand All @@ -160,6 +126,8 @@ const Earn = () => {

return (
<PoolsExplorerWrapper>
{liquidityWidget}

<div>
<Text as="h1" fontSize={24} fontWeight="500">
{t`Earning with Smart Liquidity Providing`}
Expand All @@ -168,113 +136,103 @@ const Earn = () => {
{t`Kyberswap Zap: Instantly and easily add liquidity to high-APY pools using any token or a combination of tokens.`}
</Text>
</div>
{zapinParams ? (
<LiquidityWidgetWrapper>
<LiquidityWidget {...zapinParams} />
</LiquidityWidgetWrapper>
) : (
<>
<TagContainer>
<Tag active={!filters.tag} role="button" onClick={() => updateFilters('tag', '')}>
{t`All pools`}
</Tag>
<Tag active={filters.tag === 'favorite'} role="button" onClick={() => updateFilters('tag', 'favorite')}>
<Star size={16} />
</Tag>
{filterTags.map(item => (
<Tag
active={filters.tag === item.value}
key={item.value}
<TagContainer>
<Tag active={!filters.tag} role="button" onClick={() => updateFilters('tag', '')}>
{t`All pools`}
</Tag>
<Tag active={filters.tag === 'favorite'} role="button" onClick={() => updateFilters('tag', 'favorite')}>
<Star size={16} />
</Tag>
{filterTags.map(item => (
<Tag
active={filters.tag === item.value}
key={item.value}
role="button"
onClick={() => updateFilters('tag', item.value)}
>
{!upToExtraSmall && item.icon}
{item.label}
</Tag>
))}
</TagContainer>
<Flex justifyContent="space-between" flexDirection={upToMedium ? 'column' : 'row'} sx={{ gap: '1rem' }}>
<Flex sx={{ gap: '1rem' }} flexWrap="wrap">
<DropdownMenu options={chains} value={filters.chainId} alignLeft onChange={onChainChange} />
<DropdownMenu
width={90}
options={supportedProtocols}
value={filters.protocol}
alignLeft
onChange={onProtocolChange}
/>
<DropdownMenu width={30} options={timings} value={filters.interval} onChange={onIntervalChange} />
</Flex>
<Search
placeholder="Search by token name, symbol or address"
searchValue={search}
allowClear
onSearch={val => setSearch(val)}
style={{ height: '36px' }}
/>
</Flex>
<TableWrapper>
<ContentWrapper>
{!upToMedium && (
<TableHeader>
<Text>Protocol</Text>
<Text>Pair</Text>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.APR)}
>
APR
<SortIcon sorted={filters.sortBy === SortBy.APR ? (filters.orderBy as Direction) : undefined} />
</Flex>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.EARN_FEE)}
>
Earn Fees
<SortIcon sorted={filters.sortBy === SortBy.EARN_FEE ? (filters.orderBy as Direction) : undefined} />
</Flex>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.TVL)}
>
TVL
<SortIcon sorted={filters.sortBy === SortBy.TVL ? (filters.orderBy as Direction) : undefined} />
</Flex>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => updateFilters('tag', item.value)}
onClick={() => onSortChange(SortBy.VOLUME)}
>
{!upToExtraSmall && item.icon}
{item.label}
</Tag>
))}
</TagContainer>
<Flex justifyContent="space-between" flexDirection={upToMedium ? 'column' : 'row'} sx={{ gap: '1rem' }}>
<Flex sx={{ gap: '1rem' }} flexWrap="wrap">
<DropdownMenu options={chains} value={filters.chainId} alignLeft onChange={onChainChange} />
<DropdownMenu
width={90}
options={supportedProtocols}
value={filters.protocol}
alignLeft
onChange={onProtocolChange}
/>
<DropdownMenu width={30} options={timings} value={filters.interval} onChange={onIntervalChange} />
</Flex>
<Search
placeholder="Search by token name, symbol or address"
searchValue={search}
allowClear
onSearch={val => setSearch(val)}
style={{ height: '36px' }}
/>
</Flex>
<TableWrapper>
<ContentWrapper>
{!upToMedium && (
<TableHeader>
<Text>Protocol</Text>
<Text>Pair</Text>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.APR)}
>
APR
<SortIcon sorted={filters.sortBy === SortBy.APR ? (filters.orderBy as Direction) : undefined} />
</Flex>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.EARN_FEE)}
>
Earn Fees
<SortIcon
sorted={filters.sortBy === SortBy.EARN_FEE ? (filters.orderBy as Direction) : undefined}
/>
</Flex>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.TVL)}
>
TVL
<SortIcon sorted={filters.sortBy === SortBy.TVL ? (filters.orderBy as Direction) : undefined} />
</Flex>
<Flex
justifyContent="flex-end"
sx={{ gap: '4px', alignItems: 'center', cursor: 'pointer' }}
role="button"
onClick={() => onSortChange(SortBy.VOLUME)}
>
Volume
<SortIcon sorted={filters.sortBy === SortBy.VOLUME ? (filters.orderBy as Direction) : undefined} />
</Flex>
<div />
</TableHeader>
)}
<TableContent onOpenZapInWidget={handleOpenZapInWidget} />
</ContentWrapper>
{(!filters.tag || !Object.keys(FilterTag).includes(filters.tag)) && (
<Pagination
onPageChange={(newPage: number) => {
updateFilters('page', newPage.toString())
}}
totalCount={poolData?.data?.pagination?.totalItems || 0}
currentPage={(filters.page || 0) + 1}
pageSize={filters.limit || 10}
/>
)}
</TableWrapper>
</>
)}
Volume
<SortIcon sorted={filters.sortBy === SortBy.VOLUME ? (filters.orderBy as Direction) : undefined} />
</Flex>
<div />
</TableHeader>
)}
<TableContent onOpenZapInWidget={handleOpenZapInWidget} />
</ContentWrapper>
{(!filters.tag || !Object.keys(FilterTag).includes(filters.tag)) && (
<Pagination
onPageChange={(newPage: number) => {
updateFilters('page', newPage.toString())
}}
totalCount={poolData?.data?.pagination?.totalItems || 0}
currentPage={(filters.page || 0) + 1}
pageSize={filters.limit || 10}
/>
)}
</TableWrapper>
</PoolsExplorerWrapper>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Earns/PoolExplorer/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const TableRow = styled.div`
cursor: pointer;
:hover {
background: ${({ theme }) => rgba(theme.primary, 0.2)};
background: #31cb9e1a;
}
${({ theme }) => theme.mediaWidth.upToLarge`
Expand All @@ -108,7 +108,7 @@ export const FeeTier = styled.div`
`

export const CurrencyRoundedImage = styled(Image)`
border-radius: 50%;
/* border-radius: 50%; */
`

export const CurrencySecondImage = styled(CurrencyRoundedImage)`
Expand Down
Loading

0 comments on commit 5eea48c

Please sign in to comment.