diff --git a/src/pages/AppRoutes.tsx b/src/pages/AppRoutes.tsx
index 2c80c1da9..13fbb84f8 100644
--- a/src/pages/AppRoutes.tsx
+++ b/src/pages/AppRoutes.tsx
@@ -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
@@ -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 },
diff --git a/src/pages/DexV2/Dashboard/components/Card.tsx b/src/pages/DexV2/Dashboard/components/Card.tsx
new file mode 100644
index 000000000..b865c99f3
--- /dev/null
+++ b/src/pages/DexV2/Dashboard/components/Card.tsx
@@ -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;
+ }
+`
diff --git a/src/pages/DexV2/Dashboard/components/LiquidityRewards.tsx b/src/pages/DexV2/Dashboard/components/LiquidityRewards.tsx
new file mode 100644
index 000000000..f6559f440
--- /dev/null
+++ b/src/pages/DexV2/Dashboard/components/LiquidityRewards.tsx
@@ -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 (
+
+
+
+ Deposited and Staked Liquidity
+
+
+
+
+ }>
+ New Deposit
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const TableHeader = () => {
+ return (
+
+
+ Deposit #124
+
+
+ Pool Total
+
+
+ Staked
+
+
+ Unstaked
+
+
+ )
+}
+
+const TableBody = () => {
+ const theme = useTheme()
+ const currency0 = useCurrency('0x949546713004ee02537292b1F41046f705909191')
+ const currency1 = useCurrency('0xA9c2c7D5E9bdA19bF9728384FFD3cF71Ada5dfcB')
+
+ return (
+
+
+
+ {currency0 && currency1 ? : null}
+
+
+ veIXS/USDT
+
+
+ Weighted
+
+ 50/50
+
+
+
+
+
+
+
+ {currency0 ? : null}
+ {currency1 ? : null}
+
+
+
+
+ {currency0 ? : null}
+ {currency1 ? : null}
+
+
+
+
+ {currency0 ? : null}
+ {currency1 ? : null}
+
+
+
+
+
+ Withdraw
+
+
+ Stake
+
+
+
+
+ )
+}
+
+const StyledLiquidItem = ({ currency }: { currency: Currency }) => {
+ return (
+
+
+ veIXS
+ 4,592.00
+
+ )
+}
+
+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};
+`
diff --git a/src/pages/DexV2/Dashboard/components/LockRewards.tsx b/src/pages/DexV2/Dashboard/components/LockRewards.tsx
new file mode 100644
index 000000000..d8548dd30
--- /dev/null
+++ b/src/pages/DexV2/Dashboard/components/LockRewards.tsx
@@ -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 (
+
+
+ Locks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const TableHeader = () => {
+ return (
+
+
+ Lock #124
+
+
+ Lock Date
+
+
+ Amount
+
+
+ Lock Time
+
+
+ )
+}
+
+const TableBody = () => {
+ const theme = useTheme()
+ const currency0 = useCurrency('0x949546713004ee02537292b1F41046f705909191')
+
+ return (
+
+
+
+
+ veIXS
+
+
+
+ Sep 12, 2024
+
+
+ 1,000.00
+
+
+ 30 Days
+
+
+
+
+ Increase
+
+
+ Extend
+
+
+
+
+ )
+}
+
+export default LockRewards
diff --git a/src/pages/DexV2/Dashboard/components/VotingRewards.tsx b/src/pages/DexV2/Dashboard/components/VotingRewards.tsx
new file mode 100644
index 000000000..f5695d360
--- /dev/null
+++ b/src/pages/DexV2/Dashboard/components/VotingRewards.tsx
@@ -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 (
+
+
+ Voting Rewards
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const TableBody = () => {
+ const theme = useTheme()
+ const currency0 = useCurrency('0x949546713004ee02537292b1F41046f705909191')
+ const currency1 = useCurrency('0xA9c2c7D5E9bdA19bF9728384FFD3cF71Ada5dfcB')
+
+ return (
+
+
+
+
+ {currency0 && currency1 ? : null}
+
+
+ veIXS/USDT
+
+ Basic Volatile
+
+
+
+
+
+
+
+ on OP Mainnet
+
+
+
+ Lock #27216
+
+
+ 1.55718 IXS locked
+
+
+
+
+
+ 0.00013 IXS
+
+
+
+
+ 0.00002 USDC
+
+
+
+
+ 0.00006 IXS
+
+
+
+
+ 0.0 USDC
+
+
+
+
+
+
+
+
+ )
+}
+
+const Dot = styled.div`
+ width: 2px;
+ height: 2px;
+ border-radius: 50%;
+ background: ${({ theme }) => theme.text6};
+`
+
+export default VotingRewards
diff --git a/src/pages/DexV2/Dashboard/index.tsx b/src/pages/DexV2/Dashboard/index.tsx
new file mode 100644
index 000000000..b9087a57f
--- /dev/null
+++ b/src/pages/DexV2/Dashboard/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import _get from 'lodash/get'
+
+import { Box, Container } from '@mui/material'
+import LiquidityRewards from './components/LiquidityRewards'
+import LockRewards from './components/LockRewards'
+import VotingRewards from './components/VotingRewards'
+
+const Dashboard: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default Dashboard
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
index 2ce4b0cae..06b69f099 100644
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -194,6 +194,7 @@ export function colors(configColors?: WlColors): Colors {
yellow3: '#F3B71E',
yellow4: wlColors.status?.warning || '#D1BF1E',
yellow5: '#FFD056',
+ yellow69: '#ECBD44E5',
orange: '#FF6D41',
blue1: '#2172E5',
blue2: '#5199FF',
diff --git a/src/theme/styled.d.ts b/src/theme/styled.d.ts
index a3793dcd5..26551c817 100644
--- a/src/theme/styled.d.ts
+++ b/src/theme/styled.d.ts
@@ -114,6 +114,7 @@ export interface Colors {
yellow3: Color
yellow4: Color
yellow5: Color
+ yellow69: Color
orange: Color
blue1: Color
blue2: Color
diff --git a/src/utils/routes.ts b/src/utils/routes.ts
index 2e1e27750..4eec274b3 100644
--- a/src/utils/routes.ts
+++ b/src/utils/routes.ts
@@ -82,6 +82,7 @@ export const routes = {
dexV2Pools: '/dex-v2/pools',
dexV2Swap: '/dex-v2/swap',
dexV2Lock: '/dex-v2/lock',
+ dexV2Dashboard: '/dex-v2/dashboard',
}
export function checkAllowed(path: string, allowedPages: string[] | null | undefined): boolean {