diff --git a/src/pages/Pool/Expand.tsx b/src/pages/Pool/Expand.tsx index d7f7b96d..c9c79517 100644 --- a/src/pages/Pool/Expand.tsx +++ b/src/pages/Pool/Expand.tsx @@ -23,14 +23,17 @@ const Header = styled.div` `; const Extra = styled.div` - display: flex; - align-items: center; - gap: 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 20px; + &, + & > div { + display: flex; + align-items: center; + gap: 10px; + } `; const Content = styled.div` @@ -45,19 +48,28 @@ function Expand({ header, extra, isOpen: defaultOpen, children }: ExpandProps) {
{header} - {extra}
+ aria-hidden + onClick={(event) => { + event.stopPropagation(); + }} + > + {extra} +
+
+
+
{isOpen && ( diff --git a/src/pages/Pool/PoolItem.tsx b/src/pages/Pool/PoolItem.tsx new file mode 100644 index 00000000..75cdaee5 --- /dev/null +++ b/src/pages/Pool/PoolItem.tsx @@ -0,0 +1,299 @@ +import { css } from "@emotion/react"; +import { Numeric } from "@xpla/xpla.js"; +import IconButton from "components/IconButton"; +import Typography from "components/Typography"; +import { LP_DECIMALS } from "constants/dezswap"; +import useAssets from "hooks/useAssets"; +import { useBalance } from "hooks/useBalance"; +import { useNetwork } from "hooks/useNetwork"; +import { useMemo } from "react"; +import { Row, Col } from "react-grid-system"; +import { + formatNumber, + formatDecimals, + amountToValue, + getWalletLink, +} from "utils"; +import iconDefaultToken from "assets/icons/icon-default-token.svg"; +import iconBookmark from "assets/icons/icon-bookmark-default.svg"; +import iconBookmarkSelected from "assets/icons/icon-bookmark-selected.svg"; +import iconLink from "assets/icons/icon-link.svg"; +import styled from "@emotion/styled"; +import Box from "components/Box"; +import Button from "components/Button"; +import { Link } from "react-router-dom"; +import Expand from "./Expand"; +import { PoolWithPair } from "."; + +const SimplePieChart = styled.div<{ data: number[] }>` + width: 100%; + height: 0; + position: relative; + padding-bottom: 100%; + + &::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-image: ${({ data, theme }) => { + const pieColors = [theme.colors.secondary, "#00b1ff"]; + return `conic-gradient(${data + .map((d, i) => `${pieColors[i]} ${d}%`) + .join(", ")})`; + }}; + border-radius: 50%; + } +`; + +const TableRow = styled(Box)` + display: inline-flex; + justify-content: space-between; + align-items: center; + gap: 10px; + flex-wrap: nowrap; + padding: 14px 20px; + background: none; + & > div { + width: 190px; + color: ${({ theme }) => theme.colors.primary}; + font-size: 16px; + font-weight: 500; + &:first-of-type { + width: 244px; + } + } +`; + +const AssetIcon = styled.div<{ src?: string }>` + width: 32px; + height: 32px; + position: relative; + display: inline-block; + &::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-image: ${({ src }) => `url(${src || iconDefaultToken})`}; + background-size: contain; + background-repeat: no-repeat; + background-position: 50% 50%; + } +`; + +const Label = styled(Typography)` + margin-bottom: 15px; +`; + +const LinkButton = styled(Button.withComponent(Link))` + text-decoration: none; +`; + +Label.defaultProps = { + size: 14, + weight: 900, + color: "primary", +}; + +const IconButtonAnchor = styled(IconButton.withComponent("a"))` + cursor: pointer; +`; + +function PoolItem({ pool }: { pool: PoolWithPair }) { + const { getAsset } = useAssets(); + const network = useNetwork(); + const lpBalance = useBalance(pool.pair.liquidity_token); + + const [asset1, asset2] = useMemo( + () => pool.pair.asset_addresses.map((address) => getAsset(address)), + [getAsset, pool], + ); + + const userShare = useMemo(() => { + return ( + Numeric.parse(lpBalance || "0") + .dividedBy(pool.total_share || "1") + .toNumber() || 0 + ); + }, [lpBalance, pool]); + + return ( + +
+ + + + + + + {asset1?.symbol}-{asset2?.symbol} + + +
+
+ {formatNumber( + formatDecimals( + amountToValue(pool.total_share, LP_DECIMALS) || "", + 2, + ), + )} +  LP +
+
-
+
-
+
-
+ + } + extra={[ + , + , + ]} + > + + + + + +
+ +
+ + + + {formatNumber( + formatDecimals( + amountToValue(pool.assets[0].amount, asset1?.decimals) || + "0", + 3, + ), + )} +   + {asset1?.symbol} (50%) + + + {formatNumber( + formatDecimals( + amountToValue(pool.assets[1].amount, asset2?.decimals) || + "0", + 3, + ), + )} +   + {asset2?.symbol} (50%) + + + + + + + + {formatNumber( + formatDecimals(amountToValue(lpBalance, LP_DECIMALS) || "0", 3), + )} + + + + + + {formatNumber( + formatDecimals( + amountToValue( + Numeric.parse(pool.assets[0].amount) + .times(userShare) + .toString() + .split(".")[0], + asset1?.decimals, + ) || "0", + 3, + ), + )} +   + {asset1?.symbol} +
+ {formatNumber( + formatDecimals( + amountToValue( + Numeric.parse(pool.assets[1].amount) + .times(userShare) + .toString() + .split(".")[0], + asset2?.decimals, + ) || "0", + 3, + ), + )} +   + {asset2?.symbol} + + + + + + {formatDecimals(userShare * 100, 2)}% + + + { + event.stopPropagation(); + }} + > + + Add liquidity + + + Remove liquidity + + + + + ); +} + +export default PoolItem; diff --git a/src/pages/Pool/PoolList.tsx b/src/pages/Pool/PoolList.tsx index 64f710d8..2e61b387 100644 --- a/src/pages/Pool/PoolList.tsx +++ b/src/pages/Pool/PoolList.tsx @@ -1,16 +1,9 @@ -import { css } from "@emotion/react"; import styled from "@emotion/styled"; import Box from "components/Box"; -import useAssets from "hooks/useAssets"; -import iconDefaultToken from "assets/icons/icon-default-token.svg"; -import { Col, Row } from "react-grid-system"; -import { amountToValue, formatDecimals, formatNumber } from "utils"; -import { LP_DECIMALS } from "constants/dezswap"; -import Typography from "components/Typography"; -import Button from "components/Button"; -import { Link } from "react-router-dom"; -import Expand from "./Expand"; + +import { useNetwork } from "hooks/useNetwork"; import { PoolWithPair } from "."; +import PoolItem from "./PoolItem"; interface PoolListProps { pools: PoolWithPair[]; @@ -20,40 +13,17 @@ const Wrapper = styled.div` width: 100%; height: auto; position: relative; - overflow-x: auto; display: flex; flex-direction: column; gap: 10px; - /* & > div { + /* overflow-x: auto; + & > div { width: auto; min-width: 100%; } */ `; -const SimplePieChart = styled.div<{ data: number[] }>` - width: 100%; - height: 0; - position: relative; - padding-bottom: 100%; - - &::after { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - background-image: ${({ data, theme }) => { - const pieColors = [theme.colors.secondary, "#00b1ff"]; - return `conic-gradient(${data - .map((d, i) => `${pieColors[i]} ${d}%`) - .join(", ")})`; - }}; - border-radius: 50%; - } -`; - const TableHeader = styled(Box)` /* width: auto; min-width: 100%; */ @@ -74,51 +44,7 @@ const TableHeader = styled(Box)` } `; -const TableRow = styled(TableHeader)` - background: unset; - & > div { - font-size: 16px; - font-weight: 500; - } -`; - -const AssetIcon = styled.div<{ src?: string }>` - width: 32px; - height: 32px; - position: relative; - display: inline-block; - &::after { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - background-image: ${({ src }) => `url(${src || iconDefaultToken})`}; - background-size: contain; - background-repeat: no-repeat; - background-position: 50% 50%; - } -`; - -const PoolItem = styled(Box)``; - -const Label = styled(Typography)` - margin-bottom: 15px; -`; - -const LinkButton = styled(Button.withComponent(Link))` - text-decoration: none; -`; - -Label.defaultProps = { - size: 14, - weight: 900, - color: "primary", -}; - function PoolList({ pools }: PoolListProps) { - const { getAsset } = useAssets(); return ( @@ -130,112 +56,7 @@ function PoolList({ pools }: PoolListProps) { {pools.map((pool) => { - const [asset1, asset2] = pool.pair.asset_addresses.map((address) => - getAsset(address), - ); - return ( - -
- - - - - - - {asset1?.symbol}-{asset2?.symbol} - - -
-
- {formatNumber( - formatDecimals( - amountToValue(pool.total_share, LP_DECIMALS) || "", - 2, - ), - )} -
-
-
-
-
-
-
- - } - extra={[
1
,
2
]} - > - - - - - -
- -
- - - - 0000 {asset1?.symbol} {formatNumber(50)}% - - - 0000 {asset2?.symbol} {formatNumber(50)}% - - - - - - - - - - - - - - { - event.stopPropagation(); - }} - > - - Add liquidity - - - Remove liquidity - - - - - ); + return ; })} ); diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index 7e5b2355..d3bed3f2 100644 --- a/src/pages/Pool/index.tsx +++ b/src/pages/Pool/index.tsx @@ -20,6 +20,7 @@ import PoolButton from "./PoolButton"; import PoolList from "./PoolList"; const timeBaseOptions = ["24h", "7d", "1m"]; +const LIMIT = 8; const HeaderSection = styled.div` width: 100%; @@ -133,7 +134,7 @@ function PoolPage() {
({ - value: item, - label: item, - key: item, - }))} + items={["Liquidity pools", "My pools", "Bookmarks"].map( + (item) => ({ + value: item, + label: item, + key: item, + }), + )} defaultSelectedIndex={0} />
@@ -175,12 +178,17 @@ function PoolPage() { margin-bottom: 25px; `} > - + { setCurrentPage(value); }}