Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add action menu on tables to invert price #57

Merged
merged 3 commits into from
Jul 16, 2024
Merged

Add action menu on tables to invert price #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c3dfc32
add action menu on tables to invert price
yvesfracari Jul 15, 2024
86e0f24
run formater and linter
yvesfracari Jul 16, 2024
73eac9a
increase test timeout
yvesfracari Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
"clsx": "^2.1.1",
"cmdk": "^0.2.1",
"embla-carousel-react": "8.1.6",
"eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
"gql": "^1.1.2",
"graphql-codegen-plugin-typescript-swr": "^0.8.5",
"graphql-request": "6.1.0",
Expand Down Expand Up @@ -114,6 +113,7 @@
"eslint-plugin-graphql": "latest",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "latest",
"eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
"eslint-plugin-react-hooks": "latest",
"eslint-plugin-simple-import-sort": "latest",
"eslint-plugin-tailwindcss": "^3.17.4",
Expand Down
6 changes: 3 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 30 additions & 8 deletions src/components/DraftOrdersTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@ import { useTokenPairPrice } from "#/hooks/useTokenPairPrice";
import { getOrderDescription } from "#/lib/orderDescription";
import { DraftOrder } from "#/lib/types";

import { ReviewOrdersDialog } from "./ReviewOrdersDialog";
import { OrderDropdownMenuCell } from "./OrderDropdownMenuCell";
import { RemoveDraftOrdersDialog } from "./RemoveDraftOrdersDialog";
import { ReviewOrdersDialog } from "./ReviewOrdersDialog";

export function DraftOrdersTab() {
const { draftOrders, removeDraftOrders } = useOrder();
const { draftOrders } = useOrder();
const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
const [selectedIds, setSelectedIds] = useState<string[]>([]);

Expand Down Expand Up @@ -60,7 +61,10 @@ export function DraftOrdersTab() {
<TableHead>Order</TableHead>
<TableHead>Trigger price</TableHead>
<TableHead>Limit price</TableHead>
<TableHead className="rounded-tr-md">Current price</TableHead>
<TableHead>Current price</TableHead>
<TableCell className="rounded-tr-md">
<span className="sr-only">Actions</span>
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
Expand All @@ -85,7 +89,7 @@ export function DraftOrdersTab() {
})
) : (
<TableRow>
<TableCell colSpan={5} className="text-center">
<TableCell colSpan={100} className="text-center">
<div className="py-4">
No draft orders. Create a new one to get started.
</div>
Expand Down Expand Up @@ -122,6 +126,8 @@ export function DraftOrderRow({
checked: boolean;
onSelect: (selected: boolean) => void;
}) {
const [invertedPrice, setInvertedPrice] = useState(false);

const orderDescription = getOrderDescription({
tokenBuy: order.tokenBuy,
tokenSell: order.tokenSell,
Expand All @@ -130,7 +136,9 @@ export function DraftOrderRow({
amountBuy: order.amountBuy,
});

const priceUnity = `${order.tokenBuy.symbol}/${order.tokenSell.symbol}`;
const priceUnity = invertedPrice
? `${order.tokenSell.symbol}/${order.tokenBuy.symbol}`
: order.tokenBuy.symbol + "/" + order.tokenSell.symbol;

const { data: marketPrice } = useTokenPairPrice(
order.tokenSell,
Expand All @@ -149,16 +157,30 @@ export function DraftOrderRow({
</TableCell>
<TableCell>{orderDescription}</TableCell>
<TableCell>
{formatNumber(order.strikePrice, 4)} {priceUnity}
{formatNumber(
invertedPrice ? 1 / order.strikePrice : order.strikePrice,
4,
)}{" "}
{priceUnity}
</TableCell>
<TableCell>
{formatNumber(order.limitPrice, 4)} {priceUnity}
{formatNumber(
invertedPrice ? 1 / order.limitPrice : order.limitPrice,
4,
)}{" "}
{priceUnity}
</TableCell>
<TableCell>
{marketPrice
? ` ${formatNumber(marketPrice, 4)} ${priceUnity}`
? ` ${formatNumber(invertedPrice ? 1 / marketPrice : marketPrice, 4)} ${priceUnity}`
: `Market price not found`}
</TableCell>
<OrderDropdownMenuCell
orderId={order.id}
invertedPrice={invertedPrice}
setInvertedPrice={setInvertedPrice}
showDetails={false}
/>
</TableRow>
);
}
39 changes: 26 additions & 13 deletions src/components/HistoryOrdersTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ import {
} from "@bleu/ui";
import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { formatUnits } from "viem";

import { useOrderList } from "#/hooks/useOrderList";
import { StopLossOrderType } from "#/lib/types";

import { OrderDropdownMenuCell } from "./OrderDropdownMenuCell";
import { StatusBadge } from "./StatusBadge";

export function HistoryOrdersTab() {
Expand All @@ -29,7 +31,10 @@ export function HistoryOrdersTab() {
<TableCell>Order</TableCell>
<TableCell>Trigger price</TableCell>
<TableCell>Filled</TableCell>
<TableCell className="rounded-tr-md">Status</TableCell>
<TableCell>Status</TableCell>
<TableCell className="rounded-tr-md">
<span className="sr-only">Actions</span>
</TableCell>{" "}
</TableHeader>
<TableBody>
{historyOrders.length ? (
Expand All @@ -38,7 +43,7 @@ export function HistoryOrdersTab() {
})
) : (
<TableRow>
<TableCell colSpan={5} className="text-center">
<TableCell colSpan={100} className="text-center">
{isLoading ? (
<Spinner />
) : (
Expand All @@ -57,33 +62,35 @@ export function HistoryOrdersTab() {
export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
const { safe } = useSafeAppsSDK();
const router = useRouter();
const [invertedPrice, setInvertedPrice] = useState(false);

if (!order.stopLossData) {
return null;
}

const priceUnity =
order.stopLossData.tokenOut.symbol +
"/" +
order.stopLossData.tokenIn.symbol;
const priceUnity = invertedPrice
? `${order.stopLossData.tokenIn.symbol}/${order.stopLossData.tokenOut.symbol}`
: order.stopLossData.tokenOut.symbol +
"/" +
order.stopLossData.tokenIn.symbol;

const triggerPrice = formatUnits(order.stopLossData?.strike, 18);
const triggerPrice = Number(formatUnits(order.stopLossData?.strike, 18));

const amountSell = Number(
formatUnits(
order.stopLossData?.tokenAmountIn,
order.stopLossData.tokenIn.decimals
)
order.stopLossData.tokenIn.decimals,
),
);
const amountBuy = Number(
formatUnits(
order.stopLossData?.tokenAmountOut,
order.stopLossData.tokenOut.decimals
)
order.stopLossData.tokenOut.decimals,
),
);

const orderDateTime = epochToDate(
Number(order.blockTimestamp)
Number(order.blockTimestamp),
).toLocaleString();

return (
Expand All @@ -104,12 +111,18 @@ export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
</div>
</TableCell>
<TableCell>
{formatNumber(triggerPrice, 4)} {priceUnity}
{formatNumber(invertedPrice ? 1 / triggerPrice : triggerPrice, 4)}{" "}
{priceUnity}
</TableCell>
<TableCell>{((order.filledPct || 0) * 100).toFixed()}%</TableCell>
<TableCell>
<StatusBadge status={order.status} />
</TableCell>
<OrderDropdownMenuCell
orderId={order.id}
invertedPrice={invertedPrice}
setInvertedPrice={setInvertedPrice}
/>
</TableRow>
);
}
47 changes: 30 additions & 17 deletions src/components/OpenOrdersTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { useTokenPairPrice } from "#/hooks/useTokenPairPrice";
import { OrderCancelArgs, TRANSACTION_TYPES } from "#/lib/transactionFactory";
import { IToken, StopLossOrderType } from "#/lib/types";

import { OrderDropdownMenuCell } from "./OrderDropdownMenuCell";
import { StatusBadge } from "./StatusBadge";
import { Spinner } from "./ui/spinner";

Expand Down Expand Up @@ -67,9 +68,12 @@ export function OpenOrdersTab() {
<TableCell>Created</TableCell>
<TableCell>Order</TableCell>
<TableCell>Trigger price</TableCell>
<TableCell>Current market price</TableCell>
<TableCell>Current price</TableCell>
<TableCell>Filled</TableCell>
<TableCell className="rounded-tr-md">Status</TableCell>
<TableCell>Status</TableCell>
<TableCell className="rounded-tr-md">
<span className="sr-only">Actions</span>
</TableCell>
</TableHeader>
<TableBody>
{openOrders.length ? (
Expand All @@ -91,7 +95,7 @@ export function OpenOrdersTab() {
})
) : (
<TableRow>
<TableCell colSpan={7} className="text-center">
<TableCell colSpan={100} className="text-center">
{isLoading ? (
<Spinner />
) : (
Expand Down Expand Up @@ -133,35 +137,38 @@ export function OpenOrderRow({

const { data: marketPrice } = useTokenPairPrice(
order.stopLossData?.tokenIn as IToken,
order.stopLossData?.tokenOut as IToken
order.stopLossData?.tokenOut as IToken,
);

const [invertedPrice, setInvertedPrice] = useState(false);

if (!order.stopLossData) {
return null;
}

const priceUnity =
order.stopLossData.tokenOut.symbol +
"/" +
order.stopLossData.tokenIn.symbol;
const priceUnity = invertedPrice
? `${order.stopLossData.tokenIn.symbol}/${order.stopLossData.tokenOut.symbol}`
: order.stopLossData.tokenOut.symbol +
"/" +
order.stopLossData.tokenIn.symbol;

const triggerPrice = formatUnits(order.stopLossData?.strike, 18);
const triggerPrice = Number(formatUnits(order.stopLossData?.strike, 18));

const amountSell = Number(
formatUnits(
order.stopLossData?.tokenAmountIn,
order.stopLossData.tokenIn.decimals
)
order.stopLossData.tokenIn.decimals,
),
);
const amountBuy = Number(
formatUnits(
order.stopLossData?.tokenAmountOut,
order.stopLossData.tokenOut.decimals
)
order.stopLossData.tokenOut.decimals,
),
);

const orderDateTime = epochToDate(
Number(order.blockTimestamp)
Number(order.blockTimestamp),
).toLocaleString();

return (
Expand All @@ -175,7 +182,7 @@ export function OpenOrderRow({
onClick={(e) => {
e.stopPropagation();
}}
className="cursor-normal"
className="cursor-default"
>
<Checkbox
checked={checked}
Expand All @@ -195,17 +202,23 @@ export function OpenOrderRow({
</div>
</TableCell>
<TableCell>
{formatNumber(triggerPrice, 4)} {priceUnity}
{formatNumber(invertedPrice ? 1 / triggerPrice : triggerPrice, 4)}{" "}
{priceUnity}
</TableCell>
<TableCell>
{marketPrice
? ` ${formatNumber(marketPrice, 4)} ${priceUnity}`
? ` ${formatNumber(invertedPrice ? 1 / marketPrice : triggerPrice, 4)} ${priceUnity}`
: `Loading...`}
</TableCell>
<TableCell>{((order.filledPct || 0) * 100).toFixed()}%</TableCell>
<TableCell>
<StatusBadge status={order.status} />
</TableCell>
<OrderDropdownMenuCell
orderId={order.id}
invertedPrice={invertedPrice}
setInvertedPrice={setInvertedPrice}
/>
</TableRow>
);
}
Loading
Loading