@@ -88,6 +119,14 @@ export function AdvancedSettingsDialog() {
label="Receiver"
placeholder="0xabc...123"
tooltipText={TOOLTIP_DESCRIPTIONS.RECIPIENT}
+ extraLabelElement={
+
}
+ identifier={receiver}
+ networkId={chainId as ChainId}
+ />
+ }
/>
@@ -132,6 +171,8 @@ export function AdvancedSettingsDialog() {
tooltipText={
TOOLTIP_DESCRIPTIONS.MAX_TIME_SINCE_LAST_ORACLE_UPDATE
}
+ min={0}
+ max={24 * 365}
/>
@@ -154,24 +195,19 @@ export function AdvancedSettingsDialog() {
>
Save Settings
-
{
- const defaultSettings = {
- receiver: safeAddress,
- maxHoursSinceOracleUpdates: 1,
- tokenBuyOracle: "" as const,
- tokenSellOracle: "" as const,
- partiallyFillable: false,
- };
- reset(defaultSettings);
- setAdvancedSettings(defaultSettings);
- }}
- >
-
+ {areSettingsDifferentFromDefault && (
+
{
+ reset(defaultSettings);
+ setAdvancedSettings(defaultSettings);
+ }}
+ >
+
+ )}
diff --git a/src/components/CurrentMarketPrice.tsx b/src/components/CurrentMarketPrice.tsx
index a108d51..d39e989 100644
--- a/src/components/CurrentMarketPrice.tsx
+++ b/src/components/CurrentMarketPrice.tsx
@@ -1,26 +1,84 @@
"use client";
-import { formatNumber } from "@bleu/ui";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+ formatNumber,
+} from "@bleu/ui";
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
import { useFormContext, useWatch } from "react-hook-form";
+import { useTokens } from "#/contexts/tokensContext";
import { SwapData } from "#/lib/types";
export function CurrentMarketPrice() {
const { control } = useFormContext
();
-
- const [tokenSell, tokenBuy, marketPrice] = useWatch({
+ const [tokenSell, tokenBuy] = useWatch({
control,
- name: ["tokenSell", "tokenBuy", "marketPrice"],
+ name: ["tokenSell", "tokenBuy"],
});
+ const [open, setOpen] = useState(false);
+
+ const { useTokenPairPrice, useTokenPrice } = useTokens();
+ const { data: tokenBuyPrice } = useTokenPrice(tokenBuy);
+ const { data: tokenSellPrice } = useTokenPrice(tokenSell);
+ const { data: marketPrice } = useTokenPairPrice(tokenSell, tokenBuy);
if (!tokenSell || !tokenBuy || !marketPrice || marketPrice <= 0) return null;
+
+ const formatPrice = (price: number) =>
+ formatNumber(price, 6, "currency", "standard");
+ const formatDecimal = (price: number) =>
+ formatNumber(price, 6, "decimal", "standard");
+ const inversePrice = 1 / marketPrice;
+
return (
-
- Current market price:{" "}
-
- {tokenSell.symbol} = {formatNumber(marketPrice, 4)}{" "}
-
- {tokenBuy.symbol}
-
+
+
+
+
+ 1 {tokenSell.symbol}
+
+ {open ? (
+
+
+
+
+
+ {formatDecimal(inversePrice)} {tokenBuy.symbol}
+
+ {tokenSellPrice && (
+
+ ~{formatPrice(tokenSellPrice)}
+
+ )}
+
+
+
+
+ 1 {tokenBuy.symbol}
+
+
+
+ {formatDecimal(marketPrice)} {tokenSell.symbol}
+
+ {tokenBuyPrice && (
+
+ ~{formatPrice(tokenBuyPrice)}
+
+ )}
+
+
+
+
- No draft orders. Create a new one to get started.
+
+ No draft orders. Create a new one to get started.
+
)}
@@ -90,7 +93,7 @@ export function DraftOrdersTab() {
setReviewDialogOpen(true);
}}
>
- Review orders
+ Review {selectedIds.length > 1 ? "orders" : "order"}