Skip to content

Commit

Permalink
feat: [IXSPD1-2312] add v2 dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@galvin96
galvin96 committed Jan 13, 2025
1 parent 178feb8 commit e807285
Show file tree
Hide file tree
Showing 9 changed files with 405 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/pages/AppRoutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const DexV2CreatePool = lazy(() => import('pages/DexV2/Pool/Create'))
const DexV2Pool = lazy(() => import('pages/DexV2/Pool/List'))
const DexV2Swap = lazy(() => import('pages/DexV2/Swap'))
const DexV2Lock = lazy(() => import('pages/DexV2/Lock'))
const DexV2Dashboard = lazy(() => import('pages/DexV2/Dashboard'))

export interface RouteMapEntry {
path: string
Expand Down Expand Up @@ -169,6 +170,7 @@ export const routeConfigs: RouteMapEntry[] = [
{ path: routes.dexV2Pools, component: DexV2Pool },
{ path: routes.dexV2Swap, component: DexV2Swap },
{ path: routes.dexV2Lock, component: DexV2Lock },
{ path: routes.dexV2Dashboard, component: DexV2Dashboard },
{ path: routes.faucet, component: Faucet },

{ path: routes.securityToken(), component: SecTokenDetails },
Expand Down
12 changes: 12 additions & 0 deletions src/pages/DexV2/Dashboard/components/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import styled from "styled-components";

export const Card = styled.div`
cursor: pointer;
border-radius: 16px;
background: #fff;
padding: 48px;
&:hover {
background: #FFFFFF4D;
}
`
156 changes: 156 additions & 0 deletions src/pages/DexV2/Dashboard/components/LiquidityRewards.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import { Box, Button, Grid, Stack, Tooltip } from "@mui/material"
import { TYPE } from "theme"
import styled, { useTheme } from "styled-components"
import { Card } from "./Card"
import { ReactComponent as AddIcon } from 'assets/images/plus-blue.svg'
import { ReactComponent as InfoIcon } from 'assets/images/info.svg'
import DoubleCurrencyLogo from "components/DoubleLogo"
import { useCurrency } from "hooks/Tokens"
import { Line } from "components/Line"
import CurrencyLogo from 'components/CurrencyLogo'
import { Currency } from "@ixswap1/sdk-core"
import { NewApproveButton, PinnedContentButton } from "components/Button"

const LiquidityRewards = () => {
return (
<Box mb={8}>
<Stack mb={3} direction='row' alignItems='center' justifyContent='space-between'>
<Stack direction='row' alignItems='center' gap={1}>
<TYPE.label>Deposited and Staked Liquidity</TYPE.label>
<Tooltip title="Info">
<InfoIcon />
</Tooltip>
</Stack>
<StyledButton startIcon={<AddIcon />}>
New Deposit
</StyledButton>
</Stack>
<Card>
<TableHeader />
<Box my={3}>
<Line />
</Box>
<TableBody />
</Card>
</Box>
)
}

const TableHeader = () => {
return (
<Grid container spacing={2}>
<Grid item xs={3}>
<TYPE.subHeader1>Deposit #124</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1>Pool Total</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1>Staked</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1>Unstaked</TYPE.subHeader1>
</Grid>
</Grid>
)
}

const TableBody = () => {
const theme = useTheme()
const currency0 = useCurrency('0x949546713004ee02537292b1F41046f705909191')
const currency1 = useCurrency('0xA9c2c7D5E9bdA19bF9728384FFD3cF71Ada5dfcB')

return (
<Grid container spacing={2} alignItems='center'>
<Grid item xs={3}>
<Box width={40}>
{currency0 && currency1 ? <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={32} /> : null}
</Box>
<Box my={1}>
<TYPE.label fontSize={16}>veIXS/USDT</TYPE.label>
</Box>
<Stack direction='row' alignItems='center' gap={1}>
<TYPE.subHeader1 color='yellow69'>Weighted</TYPE.subHeader1>
<Dot />
<TYPE.subHeader1 color='text6'>50/50</TYPE.subHeader1>
<Tooltip title="Info">
<InfoIcon width={12} />
</Tooltip>
</Stack>
</Grid>
<Grid item xs={2}>
<Stack gap={1}>
{currency0 ? <StyledLiquidItem currency={currency0} />: null}
{currency1 ? <StyledLiquidItem currency={currency1} />: null}
</Stack>
</Grid>
<Grid item xs={2}>
<Stack gap={1}>
{currency0 ? <StyledLiquidItem currency={currency0} />: null}
{currency1 ? <StyledLiquidItem currency={currency1} />: null}
</Stack>
</Grid>
<Grid item xs={2}>
<Stack gap={1}>
{currency0 ? <StyledLiquidItem currency={currency0} />: null}
{currency1 ? <StyledLiquidItem currency={currency1} />: null}
</Stack>
</Grid>
<Grid item xs={3}>
<Stack direction='row' gap={2}>
<NewApproveButton
style={{
color: theme.primary1,
border: `1px solid ${theme.bg24}`,
width: 'auto',
paddingTop: 12,
paddingBottom: 12,
}}
>
Withdraw
</NewApproveButton>
<PinnedContentButton
style={{
width: 'auto',
paddingTop: 12,
paddingBottom: 12,
}}
>
Stake
</PinnedContentButton>
</Stack>
</Grid>
</Grid>
)
}

const StyledLiquidItem = ({ currency }: { currency: Currency }) => {
return (
<Stack direction='row' alignItems='center' gap={1}>
<CurrencyLogo currency={currency} size='20px' />
<TYPE.subHeader1 color='text6'>veIXS</TYPE.subHeader1>
<TYPE.subHeader1>4,592.00</TYPE.subHeader1>
</Stack>
)
}

export default LiquidityRewards

const StyledButton = styled(Button)`
&.MuiButton-root {
background: ${({ theme }) => theme.white};
text-transform: unset;
padding: 12px 32px;
}
&.MuiButton-root:hover {
background: ${({ theme }) => theme.white};
}
`

const Dot = styled.div`
width: 3px;
height: 3px;
border-radius: 50%;
background: ${({ theme }) => theme.text6};
`
110 changes: 110 additions & 0 deletions src/pages/DexV2/Dashboard/components/LockRewards.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Box, Grid, Stack, Tooltip } from "@mui/material"
import { TYPE } from "theme"
import { useTheme } from "styled-components"
import { Card } from "./Card"
import { ReactComponent as InfoIcon } from 'assets/images/info.svg'
import { useCurrency } from "hooks/Tokens"
import { Line } from "components/Line"
import CurrencyLogo from 'components/CurrencyLogo'
import { NewApproveButton, PinnedContentButton } from "components/Button"

const LockRewards = () => {
return (
<Box mb={8}>
<Stack mb={3} direction='row' alignItems='center' gap={1}>
<TYPE.label>Locks</TYPE.label>
<Tooltip title="Info">
<InfoIcon />
</Tooltip>
</Stack>
<Box mb={1}>
<Card>
<TableHeader />
<Box my={3}>
<Line />
</Box>
<TableBody />
</Card>
</Box>
<Box mb={1}>
<Card>
<TableHeader />
<Box my={3}>
<Line />
</Box>
<TableBody />
</Card>
</Box>
</Box>
)
}

const TableHeader = () => {
return (
<Grid container spacing={2}>
<Grid item xs={3}>
<TYPE.subHeader1 color='text6'>Lock #124</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1 color='text6'>Lock Date</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1 color='text6'>Amount</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1 color='text6'>Lock Time</TYPE.subHeader1>
</Grid>
</Grid>
)
}

const TableBody = () => {
const theme = useTheme()
const currency0 = useCurrency('0x949546713004ee02537292b1F41046f705909191')

return (
<Grid container spacing={2} alignItems='center'>
<Grid item xs={3}>
<Stack direction='row' alignItems='center' gap={1}>
<CurrencyLogo currency={currency0} size='20px' />
<TYPE.subHeader1>veIXS</TYPE.subHeader1>
</Stack>
</Grid>
<Grid item xs={2}>
<TYPE.subHeader1>Sep 12, 2024</TYPE.subHeader1>
</Grid>
<Grid item xs={2}>
<TYPE.label fontSize={16}>1,000.00</TYPE.label>
</Grid>
<Grid item xs={2}>
<TYPE.label fontSize={16}>30 Days</TYPE.label>
</Grid>
<Grid item xs={3}>
<Stack direction='row' gap={2}>
<NewApproveButton
style={{
color: theme.primary1,
border: `1px solid ${theme.bg24}`,
width: 'auto',
paddingTop: 12,
paddingBottom: 12,
}}
>
Increase
</NewApproveButton>
<PinnedContentButton
style={{
width: 'auto',
paddingTop: 12,
paddingBottom: 12,
}}
>
Extend
</PinnedContentButton>
</Stack>
</Grid>
</Grid>
)
}

export default LockRewards
101 changes: 101 additions & 0 deletions src/pages/DexV2/Dashboard/components/VotingRewards.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { Box, Button, Chip, Grid, Stack, Tooltip } from "@mui/material"
import { TYPE } from "theme"
import styled, { useTheme } from "styled-components"
import { Card } from "./Card"
import { ReactComponent as InfoIcon } from 'assets/images/info.svg'
import { ReactComponent as UnlockIcon } from 'assets/images/dex-v2/unlock.svg'
import { useCurrency } from "hooks/Tokens"
import DoubleCurrencyLogo from "components/DoubleLogo"
import CurrencyLogo from "components/CurrencyLogo"

const VotingRewards = () => {
return (
<Box>
<Stack mb={3} direction='row' alignItems='center' gap={1}>
<TYPE.label>Voting Rewards</TYPE.label>
<Tooltip title="Info">
<InfoIcon />
</Tooltip>
</Stack>
<Box mb={1}>
<Card>
<TableBody />
</Card>
</Box>
</Box>
)
}

const TableBody = () => {
const theme = useTheme()
const currency0 = useCurrency('0x949546713004ee02537292b1F41046f705909191')
const currency1 = useCurrency('0xA9c2c7D5E9bdA19bF9728384FFD3cF71Ada5dfcB')

return (
<Grid container spacing={1}>
<Grid item xs={3} style={{ borderRight: `1px solid ${theme.launchpad.colors.border.default}` }}>
<Stack direction='row' gap={4}>
<Box width={40}>
{currency0 && currency1 ? <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={32} /> : null}
</Box>
<Box>
<TYPE.label fontSize={16}>veIXS/USDT</TYPE.label>
<Stack direction='row' alignItems='center' gap={1}>
<TYPE.subHeader1 color='yellow69'>Basic Volatile</TYPE.subHeader1>
<Dot />
<Tooltip title="Info">
<InfoIcon width={12} />
</Tooltip>
</Stack>
</Box>
</Stack>
<TYPE.subHeader1>on OP Mainnet</TYPE.subHeader1>
</Grid>
<Grid item xs={6}>
<Stack direction='row' gap={1} mb={1}>
<TYPE.label fontSize={16}>Lock #27216</TYPE.label>
<UnlockIcon />
</Stack>
<TYPE.label fontSize={14} color='text6'>1.55718 IXS locked</TYPE.label>
</Grid>
<Grid item xs={3}>
<Stack gap={0.5}>
<Stack direction='row' alignItems='center' justifyContent='flex-end' gap={1}>
<CurrencyLogo currency={currency0} size='16px' />
<TYPE.black fontSize={14}>0.00013 IXS</TYPE.black>
<Chip size='small' label="Fee" />
</Stack>
<Stack direction='row' alignItems='center' justifyContent='flex-end' gap={1}>
<CurrencyLogo currency={currency1} size='16px' />
<TYPE.black fontSize={14}>0.00002 USDC</TYPE.black>
<Chip size='small' label="Fee" />
</Stack>
<Stack direction='row' alignItems='center' justifyContent='flex-end' gap={1}>
<CurrencyLogo currency={currency0} size='16px' />
<TYPE.black fontSize={14}>0.00006 IXS</TYPE.black>
<Chip size='small' label="Incentive" />
</Stack>
<Stack direction='row' alignItems='center' justifyContent='flex-end' gap={1}>
<CurrencyLogo currency={currency1} size='16px' />
<TYPE.black fontSize={14}>0.0 USDC</TYPE.black>
<Chip size='small' label="Incentive" />
</Stack>
<Stack direction='row' justifyContent='flex-end'>
<Button style={{ textTransform: 'none' }}>
Claim
</Button>
</Stack>
</Stack>
</Grid>
</Grid>
)
}

const Dot = styled.div`
width: 2px;
height: 2px;
border-radius: 50%;
background: ${({ theme }) => theme.text6};
`

export default VotingRewards
Loading

0 comments on commit e807285

Please sign in to comment.