-
- setMenuOpen(true)} />
-
-
- Menu
-
-
-
-
- );
-};
+import { Topbar } from './components/Navbar/topbar';
export const Layout = () => {
return (
- setMenuOpen(false)}
- >
- Homepage
-
- setMenuOpen(false)}
- >
- Get Started 🚀
-
- setMenuOpen(false)}
- >
- Exchange
-
- setMenuOpen(false)}
- >
- Open Positions
-
- setMenuOpen(false)}
- >
- Closed Positions
-
- setMenuOpen(false)}
- >
- Pool
-
-
-
- (false);
+ const location = useLocation();
+ const ref = useRef(null);
+
+ useClickAway(ref, () => setMenuOpen(false));
+ // lg:hidden md:hidden
+ return (
+
+
);
diff --git a/src/components/BalanceDisplay/index.tsx b/src/components/BalanceDisplay/index.tsx
index 0cb2089..96d94a8 100644
--- a/src/components/BalanceDisplay/index.tsx
+++ b/src/components/BalanceDisplay/index.tsx
@@ -13,7 +13,7 @@ export function BalanceDisplay() {
address: collateralTokenAddress,
functionName: 'balanceOf',
account: address,
- args: [address],
+ args: [address as `0x${string}`],
abi: [
{
constant: true,
@@ -32,7 +32,7 @@ export function BalanceDisplay() {
}
if (isPending) return Loading...
;
-
+ // @ts-ignore-error
if (error) return Error: {(error as BaseError).shortMessage || error.message}
;
return Balance: {balance?.toString()}
;
diff --git a/src/components/Navbar/nav-desktop.tsx b/src/components/Navbar/nav-desktop.tsx
new file mode 100644
index 0000000..d99d3b8
--- /dev/null
+++ b/src/components/Navbar/nav-desktop.tsx
@@ -0,0 +1,25 @@
+//📂./src/components/nav-desktop.tsx
+
+import { routes } from "../../routes";
+
+export const NavDesktop = () => {
+ // lg:flex md:flex md:items-center gap-5 text-sm
+ return (
+ -
+ {routes.map((route) => {
+ const { href, title } = route;
+ return (
+
- + + {title} + + + ); + })} +
+
+ setMenuOpen(true)} />
+
+
+ Menu
+
+
+
+
+ );
+};
diff --git a/src/components/Navbar/topbar.tsx b/src/components/Navbar/topbar.tsx
new file mode 100644
index 0000000..721074b
--- /dev/null
+++ b/src/components/Navbar/topbar.tsx
@@ -0,0 +1,22 @@
+import { NavMobile } from "./nav-mobile";
+// import { NavDesktop } from "./nav-desktop";
+//
+ {routes.map((route) => {
+ const { href, title,icon } = route;
+ return (
+ setMenuOpen(false)}
+ >
+ {title} {icon}
+
+ );
+ })}
+
+
+// 
+//
+
+
+export const Topbar = () => {
+ return (
+
+//
+
+
+ );
+};
diff --git a/src/components/OpenPositionList/index.tsx b/src/components/OpenPositionList/index.tsx
index 84e93cb..34ab145 100644
--- a/src/components/OpenPositionList/index.tsx
+++ b/src/components/OpenPositionList/index.tsx
@@ -20,10 +20,12 @@ import { Market } from '@/types';
import { Asset } from '../Asset';
import { PRICE_PRECISION } from '@/lib/constants';
import { useMarketStore } from '@/store';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { Spinner } from '../ui/spinner';
import { toast } from 'sonner';
import { Pnl } from '../Pnl';
+import { Drawer, DrawerContent, DrawerHeader } from '@/components/ui/drawer.tsx';
+import { TradingViewChart } from '@/components/TradingView';
const openPositionsSubscription = graphql(/* GraphQL */ `
subscription getPositions($owner: String!) {
@@ -50,6 +52,7 @@ interface PositionProps {
isLong: boolean;
market: Market;
pairName: string;
+ onOpenChart: (open: boolean) => void
}
const Position = ({
@@ -60,8 +63,9 @@ const Position = ({
isLong,
market,
pairName,
+ onOpenChart,
}: PositionProps) => {
- const { marketsState } = useMarketStore();
+ const { marketsState, setCurrentMarket } = useMarketStore();
const {
writeContract: writeContractClosePosition,
@@ -93,6 +97,11 @@ const Position = ({
});
};
+ const handleOpenChart = () => {
+ setCurrentMarket(market)
+ onOpenChart(true)
+ }
+
const showSpinner = useMemo(
() => statusClosePosition === 'pending' || isConfirmingClosePosition,
[statusClosePosition, isConfirmingClosePosition]
@@ -147,13 +156,17 @@ const Position = ({
-
(false);
const [result] = useSubscription({
query: openPositionsSubscription,
@@ -218,21 +228,32 @@ export function OpenPositionList() {
);
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 0050f84..d64fad3 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -181,8 +181,8 @@ const CarouselPrevious = React.forwardRef,
VariantProps {
@@ -39,6 +39,7 @@ const Slider = React.forwardRef(
return (
+
+
{currentPrice ? formatPrice(currentPrice) : '$ ...'}
+observe in graph
+Collateral:
@@ -171,10 +184,6 @@ const Position = ({Entry Price:
${formatDynamicPrecisionPrice(Number(entryPrice) / PRICE_PRECISION)}
-
Current Price:
-{currentPrice ? formatPrice(currentPrice) : '$...'}
-Current PnL:
@@ -195,6 +204,7 @@ const Position = ({ export function OpenPositionList() { const { address, status } = useAccount(); + const [isTradingChartOpen, setIsTradingChartOpen] = useState
{data && data.Position.length !== 0 ? (
- data.Position.map(position => (
-
+
+
+
+
+ )
+ : (
+
No open positions.
- )}
+ <>
+ {data.Position.map(position => (
+ No open positions.
+ )}