diff --git a/src/components/Exchange/FeesTooltip.tsx b/src/components/Exchange/FeesTooltip.tsx
index e8f17ffd25..c0c776fa46 100644
--- a/src/components/Exchange/FeesTooltip.tsx
+++ b/src/components/Exchange/FeesTooltip.tsx
@@ -1,4 +1,3 @@
-import { i18n } from "@lingui/core";
import { t, Trans } from "@lingui/macro";
import ExternalLink from "components/ExternalLink/ExternalLink";
import StatsTooltipRow from "components/StatsTooltip/StatsTooltipRow";
@@ -22,8 +21,7 @@ function getFeeLabel(type: FeeType) {
deposit: t`Deposit Fee`,
execution: t`Execution Fee`,
};
-
- return i18n._(labels[type]);
+ return labels[type];
}
function getExecutionFeeStr(chainId, executionFee, executionFeeUsd) {
diff --git a/src/components/Exchange/OrderEditor.js b/src/components/Exchange/OrderEditor.js
index 7a9dc9fc59..0d63ef4a00 100644
--- a/src/components/Exchange/OrderEditor.js
+++ b/src/components/Exchange/OrderEditor.js
@@ -289,7 +289,7 @@ export default function OrderEditor(props) {
)}
@@ -189,21 +203,24 @@ export default function OrdersList(props) {
Limit
|
- Swap{" "}
- {formatAmount(
- order.amountIn,
- fromTokenInfo.decimals,
- fromTokenInfo.isStable || fromTokenInfo.isUsdg ? 2 : 4,
- true
- )}{" "}
- {fromTokenInfo.symbol} for{" "}
- {formatAmount(
- order.minOut,
- toTokenInfo.decimals,
- toTokenInfo.isStable || toTokenInfo.isUsdg ? 2 : 4,
- true
- )}{" "}
- {toTokenInfo.symbol}
+ {
+ return (
+
+ );
+ }}
+ />
|
{!hideActions ? (
@@ -367,17 +384,19 @@ export default function OrdersList(props) {
nativeTokenAddress
);
const markExchangeRate = getExchangeRate(fromTokenInfo, toTokenInfo);
-
+ const collateralUSD = getUsd(order.amountIn, fromTokenInfo.address, true, infoTokens);
+ const titleText = (
+ <>
+ Swap {formatAmount(order.amountIn, fromTokenInfo.decimals, fromTokenInfo.isStable ? 2 : 4, true)}{" "}
+ {fromTokenInfo.symbol} for{" "}
+ {formatAmount(order.minOut, toTokenInfo.decimals, toTokenInfo.isStable ? 2 : 4, true)} {toTokenInfo.symbol}
+
+ );
return (
-
- Swap {formatAmount(order.amountIn, fromTokenInfo.decimals, fromTokenInfo.isStable ? 2 : 4, true)}{" "}
- {fromTokenInfo.symbol} for{" "}
- {formatAmount(order.minOut, toTokenInfo.decimals, toTokenInfo.isStable ? 2 : 4, true)}{" "}
- {toTokenInfo.symbol}
-
-
+ {titleText}
+
Price
@@ -405,6 +424,18 @@ export default function OrdersList(props) {
{getExchangeRateDisplay(markExchangeRate, fromTokenInfo, toTokenInfo)}
+
+
+ Collateral
+
+
+ ${formatAmount(collateralUSD, USD_DECIMALS, 2, true)} (
+ {formatAmount(order.amountIn, fromTokenInfo.decimals, 4, true)}{" "}
+ {fromTokenInfo.baseSymbol || fromTokenInfo.symbol})
+
+
+
+
{!hideActions && (
<>
@@ -437,21 +468,21 @@ export default function OrdersList(props) {
return (
-
- {error ? (
- {error}}
- />
- ) : (
- orderTitle
- )}
-
-
+
+ {error ? (
+ {error}}
+ />
+ ) : (
+ orderTitle
+ )}
+
+
Price
@@ -491,6 +522,8 @@ export default function OrdersList(props) {
)}
+
+
{!hideActions && (
<>
@@ -519,14 +552,12 @@ export default function OrdersList(props) {
{renderLargeList()}
-
- {(!orders || orders.length === 0) && (
-
- No open orders
-
- )}
- {renderSmallList()}
-
+ {(!orders || orders.length === 0) && (
+
+ No open orders
+
+ )}
+ {renderSmallList()}
{editingOrder && (
{getPrimaryText()}
diff --git a/src/components/Exchange/PositionDropdown.css b/src/components/Exchange/PositionDropdown.css
index 953e7f2cc2..f4051970cd 100644
--- a/src/components/Exchange/PositionDropdown.css
+++ b/src/components/Exchange/PositionDropdown.css
@@ -21,5 +21,5 @@
.PositionDropdown-extra-options .menu-items {
top: 1rem;
- min-width: 15.5rem;
+ min-width: max-content;
}
diff --git a/src/components/Exchange/PositionDropdown.js b/src/components/Exchange/PositionDropdown.js
index a286a851b6..58de23c7e8 100644
--- a/src/components/Exchange/PositionDropdown.js
+++ b/src/components/Exchange/PositionDropdown.js
@@ -1,12 +1,24 @@
import { Menu } from "@headlessui/react";
import { Trans } from "@lingui/macro";
+import "./PositionDropdown.css";
import { HiDotsVertical } from "react-icons/hi";
import { AiOutlineEdit } from "react-icons/ai";
import { BiSelectMultiple } from "react-icons/bi";
import { RiShareBoxFill } from "react-icons/ri";
-import "./PositionDropdown.css";
+import increaseLimit from "img/ic_increaselimit_16.svg";
+import increaseMarket from "img/ic_increasemarket_16.svg";
+import triggerClose from "img/ic_triggerclose_16.svg";
+
+function PositionDropdown(p) {
+ const {
+ handleEditCollateral,
+ handleShare,
+ handleMarketSelect,
+ handleMarketIncreaseSize,
+ handleLimitIncreaseSize,
+ handleTriggerClose,
+ } = p;
-function PositionDropdown({ handleEditCollateral, handleShare, handleMarketSelect }) {
return (
-
-
-
+ {handleShare && (
+
+
+
+ )}
+ {handleMarketIncreaseSize && (
+
+
+ 
+
+ Increase Size (Market)
+
+
+ )}
+ {handleLimitIncreaseSize && (
+
+
+ 
+
+ Increase Size (Limit)
+
+
+ )}
+ {handleTriggerClose && (
+
+
+ 
+
+ Trigger Close
+
+
+ )}
diff --git a/src/components/Exchange/PositionEditor.js b/src/components/Exchange/PositionEditor.js
index 16cb1e86c9..36ad58cf92 100644
--- a/src/components/Exchange/PositionEditor.js
+++ b/src/components/Exchange/PositionEditor.js
@@ -477,7 +477,7 @@ export default function PositionEditor(props) {
+
}
@@ -488,7 +488,7 @@ export default function PositionEditor(props) {
);
}
return (
-
)}
diff --git a/src/components/Exchange/PositionSeller.js b/src/components/Exchange/PositionSeller.js
index 54f9f8ccf6..c0a66e6f97 100644
--- a/src/components/Exchange/PositionSeller.js
+++ b/src/components/Exchange/PositionSeller.js
@@ -36,7 +36,7 @@ import Tab from "../Tab/Tab";
import Modal from "../Modal/Modal";
import ExchangeInfoRow from "./ExchangeInfoRow";
import Tooltip from "../Tooltip/Tooltip";
-import TokenSelector from "./TokenSelector";
+import TokenSelector from "components/TokenSelector/TokenSelector";
import "./PositionSeller.css";
import StatsTooltipRow from "../StatsTooltip/StatsTooltipRow";
import { callContract } from "lib/contracts";
@@ -52,6 +52,9 @@ import { formatDateTime, getTimeRemaining } from "lib/dates";
import ExternalLink from "components/ExternalLink/ExternalLink";
import { ErrorCode, ErrorDisplayType } from "./constants";
import FeesTooltip from "./FeesTooltip";
+import Button from "components/Button/Button";
+import ToggleSwitch from "components/ToggleSwitch/ToggleSwitch";
+import SlippageInput from "components/SlippageInput/SlippageInput";
const { AddressZero } = ethers.constants;
const ORDER_SIZE_DUST_USD = expandDecimals(1, USD_DECIMALS - 1); // $0.10
@@ -146,7 +149,6 @@ export default function PositionSeller(props) {
isPositionRouterApproving,
approvePositionRouter,
isHigherSlippageAllowed,
- setIsHigherSlippageAllowed,
minExecutionFee,
minExecutionFeeErrorMessage,
usdgSupply,
@@ -160,6 +162,15 @@ export default function PositionSeller(props) {
const [isProfitWarningAccepted, setIsProfitWarningAccepted] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const prevIsVisible = usePrevious(isVisible);
+ const [allowedSlippage, setAllowedSlippage] = useState(savedSlippageAmount);
+
+ useEffect(() => {
+ setAllowedSlippage(savedSlippageAmount);
+ if (isHigherSlippageAllowed) {
+ setAllowedSlippage(DEFAULT_HIGHER_SLIPPAGE_AMOUNT);
+ }
+ }, [savedSlippageAmount, isHigherSlippageAllowed]);
+
const positionRouterAddress = getContract(chainId, "PositionRouter");
const nativeTokenSymbol = getConstant(chainId, "nativeTokenSymbol");
const longOrShortText = position?.isLong ? t`Long` : t`Short`;
@@ -176,11 +187,6 @@ export default function PositionSeller(props) {
savedRecieveTokenAddress ? toTokens.find((token) => token.address === savedRecieveTokenAddress) : undefined
);
- let allowedSlippage = savedSlippageAmount;
- if (isHigherSlippageAllowed) {
- allowedSlippage = DEFAULT_HIGHER_SLIPPAGE_AMOUNT;
- }
-
const ORDER_OPTIONS = [MARKET, STOP];
const ORDER_OPTION_LABELS = {
[MARKET]: t`Market`,
@@ -938,9 +944,9 @@ export default function PositionSeller(props) {
+
+
}
position="center-top"
className="Tooltip-flex"
@@ -950,9 +956,9 @@ export default function PositionSeller(props) {
}
return (
-
);
}
@@ -997,14 +1003,14 @@ export default function PositionSeller(props) {
onChange={(e) => setFromValue(e.target.value)}
/>
{fromValue !== maxAmountFormattedFree && (
- {
setFromValue(maxAmountFormattedFree);
}}
>
MAX
-
+
)}
USD
@@ -1055,39 +1061,36 @@ export default function PositionSeller(props) {
-
+
Keep leverage at {formatAmount(position.leverage, 4, 2)}x
-
+
- {orderOption === MARKET && (
-
-
-
- Allow up to 1% slippage
-
-
-
- )}
{orderOption === MARKET && (
-
- {
- return (
-
- You can change this in the settings menu on the top right of the page.
-
-
- Note that a low allowed slippage, e.g. less than 0.5%, may result in failed orders if prices
- are volatile.
-
- );
- }}
- />
+ {
+ return (
+
+
+ You can change this in the settings menu on the top right of the page.
+
+
+ Note that a low allowed slippage, e.g. less than 0.5%, may result in failed orders if
+ prices are volatile.
+
+
+ );
+ }}
+ />
+ }
+ >
+
-
+
-
- {positions.length === 0 && positionsDataIsLoading && (
-
- Loading...
-
- )}
- {positions.length === 0 && !positionsDataIsLoading && (
-
- No open positions
-
- )}
+ <>
+ {positions.length === 0 && (
+
+ {positionsDataIsLoading ? Loading... : No open positions}
+
+ )}
+
{positions.map((position) => {
const positionOrders = getOrdersForPosition(account, position, orders, nativeTokenAddress);
const liquidationPrice = getLiquidationPrice(position);
@@ -250,17 +245,13 @@ export default function PositionsList(props) {
return (
-
- {position.indexToken.symbol}
-
-
-
-
-
- Leverage
-
+
+
+ {position.indexToken.symbol}
- {position.leverageStr}
+
+ {position.leverageStr}
+
-
-
- Size
-
- ${formatAmount(position.size, USD_DECIMALS, 2, true)}
-
-
-
- Collateral
+
+
+
-
- {
- return (
- <>
- {position.hasLowCollateral && (
-
-
- WARNING: This position has a low amount of collateral after deducting borrowing
- fees, deposit more collateral to reduce the position's liquidation risk.
-
-
-
-
- )}
-
-
-
-
- {!hideActions && (
-
- Use the Edit Collateral icon to deposit or withdraw collateral.
-
- )}
-
- );
- }}
- />
- {!hideActions && (
- editPosition(position)}>
-
+
+
+ PnL
+
+
+
+ {position.deltaStr} ({position.deltaPercentageStr})
- )}
+
-
-
- PnL
+
+
+ Size
+
+ ${formatAmount(position.size, USD_DECIMALS, 2, true)}
-
-
- {position.deltaStr} ({position.deltaPercentageStr})
-
+
+
+ Collateral
+
+
+ {
+ return (
+ <>
+ {position.hasLowCollateral && (
+
+
+ WARNING: This position has a low amount of collateral after deducting borrowing
+ fees, deposit more collateral to reduce the position's liquidation risk.
+
+
+
+
+ )}
+
+
+
+
+ {!hideActions && (
+
+ Use the Edit Collateral icon to deposit or withdraw collateral.
+
+ )}
+
+ );
+ }}
+ />
+ {!hideActions && (
+ editPosition(position)}>
+
+
+ )}
+
-
-
- Net Value
+
+
+
+
+ Entry Price
+
+ ${formatAmount(position.averagePrice, USD_DECIMALS, 2, true)}
-
-
+
+
+ Mark Price
+
+ ${formatAmount(position.markPrice, USD_DECIMALS, 2, true)}
+
+
+
+ Liq. Price
+
+ ${formatAmount(liquidationPrice, USD_DECIMALS, 2, true)}
+
Orders
@@ -389,29 +405,8 @@ export default function PositionsList(props) {
-
-
-
-
- Entry Price
-
- ${formatAmount(position.averagePrice, USD_DECIMALS, 2, true)}
-
-
-
- Mark Price
-
- ${formatAmount(position.markPrice, USD_DECIMALS, 2, true)}
-
-
-
- Liq. Price
-
- ${formatAmount(liquidationPrice, USD_DECIMALS, 2, true)}
-
-
{!hideActions && (
- <>
+
)}
);
})}
-
+
)}
@@ -478,22 +473,16 @@ export default function PositionsList(props) {
)}
- {positions.length === 0 && positionsDataIsLoading && (
-
- |
- Loading...
- |
-
- )}
- {positions.length === 0 && !positionsDataIsLoading && (
+ {positions.length === 0 && (
|
- No open positions
+ {positionsDataIsLoading ? Loading... : No open positions}
|
)}
+
{positions.map((position) => {
const liquidationPrice = getLiquidationPrice(position) || bigNumberify(0);
const positionOrders = getOrdersForPosition(account, position, orders, nativeTokenAddress);
@@ -542,7 +531,17 @@ export default function PositionsList(props) {
{position.hasPendingChanges && }
- {position.leverageStr && {position.leverageStr}}
+ {position.leverageStr && (
+ {
+ e.stopPropagation();
+ openSettings();
+ }}
+ className="muted Position-leverage"
+ >
+ {position.leverageStr}
+
+ )}
{position.isLong ? t`Long` : t`Short`}
@@ -553,11 +552,12 @@ export default function PositionsList(props) {
{position.deltaStr && (
{position.deltaStr} ({position.deltaPercentageStr})
diff --git a/src/components/Exchange/SwapBox.css b/src/components/Exchange/SwapBox.css
deleted file mode 100644
index 168f9ddb9e..0000000000
--- a/src/components/Exchange/SwapBox.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.SwapBox-collateral-tooltip-text {
- font-weight: normal;
-}
\ No newline at end of file
diff --git a/src/components/Exchange/SwapBox.js b/src/components/Exchange/SwapBox.js
index 7f97b03288..fccd92639b 100644
--- a/src/components/Exchange/SwapBox.js
+++ b/src/components/Exchange/SwapBox.js
@@ -1,11 +1,8 @@
import React, { useEffect, useMemo, useState } from "react";
import Tooltip from "../Tooltip/Tooltip";
import { t, Trans } from "@lingui/macro";
-import Slider, { SliderTooltip } from "rc-slider";
-import "rc-slider/assets/index.css";
-import "./SwapBox.css";
+import "./SwapBox.scss";
-import cx from "classnames";
import useSWR from "swr";
import { ethers } from "ethers";
@@ -46,9 +43,8 @@ import { ARBITRUM, getChainName, getConstant, IS_NETWORK_DISABLED, isSupportedCh
import * as Api from "domain/legacy";
import { getContract } from "config/contracts";
-import Checkbox from "../Checkbox/Checkbox";
import Tab from "../Tab/Tab";
-import TokenSelector from "./TokenSelector";
+import TokenSelector from "components/TokenSelector/TokenSelector";
import ExchangeInfoRow from "./ExchangeInfoRow";
import ConfirmationBox from "./ConfirmationBox";
import OrdersToa from "./OrdersToa";
@@ -62,7 +58,7 @@ import longImg from "img/long.svg";
import shortImg from "img/short.svg";
import swapImg from "img/swap.svg";
-import { useUserReferralCode } from "domain/referrals";
+import { useUserReferralCode } from "domain/referrals/hooks";
import NoLiquidityErrorModal from "./NoLiquidityErrorModal";
import StatsTooltipRow from "../StatsTooltip/StatsTooltipRow";
import { callContract, contractFetcher } from "lib/contracts";
@@ -83,7 +79,10 @@ import { ErrorCode, ErrorDisplayType } from "./constants";
import Button from "components/Button/Button";
import UsefulLinks from "./UsefulLinks";
import { get1InchSwapUrl } from "config/links";
+import ToggleSwitch from "components/ToggleSwitch/ToggleSwitch";
+import BuyInputSection from "components/BuyInputSection/BuyInputSection";
import FeesTooltip from "./FeesTooltip";
+import { LeverageSlider } from "components/LeverageSlider/LeverageSlider";
const SWAP_ICONS = {
[LONG]: longImg,
@@ -93,21 +92,6 @@ const SWAP_ICONS = {
const { AddressZero } = ethers.constants;
-const leverageSliderHandle = (props) => {
- const { value, dragging, index, ...restProps } = props;
- return (
-
-
-
- );
-};
-
function getNextAveragePrice({ size, sizeDelta, hasProfit, delta, nextPrice, isLong }) {
if (!size || !sizeDelta || !delta || !nextPrice) {
return;
@@ -1753,20 +1737,6 @@ export default function SwapBox(props) {
feeBps = feeBasisPoints;
}
- const leverageMarks = {
- 2: "2x",
- 5: "5x",
- 10: "10x",
- 15: "15x",
- 20: "20x",
- 25: "25x",
- 30: "30x",
- 35: "35x",
- 40: "40x",
- 45: "45x",
- 50: "50x",
- };
-
if (!fromToken || !toToken) {
return null;
}
@@ -1900,7 +1870,7 @@ export default function SwapBox(props) {
+
}
@@ -1914,7 +1884,7 @@ export default function SwapBox(props) {
-
-
- {fromUsdMin && (
-
- Pay: {formatAmount(fromUsdMin, USD_DECIMALS, 2, true)} USD
-
- )}
- {!fromUsdMin && t`Pay`}
-
- {fromBalance && (
-
- Balance: {formatAmount(fromBalance, fromToken.decimals, 4, true)}
-
- )}
-
-
-
-
- {shouldShowMaxButton() && (
-
- MAX
-
- )}
-
-
-
-
-
-
-
-
- {toUsdMax && (
-
- {getToLabel()}: {formatAmount(toUsdMax, USD_DECIMALS, 2, true)} USD
-
- )}
- {!toUsdMax && getToLabel()}
-
- {toBalance && isSwap && (
-
- Balance: {formatAmount(toBalance, toToken.decimals, 4, true)}
-
- )}
- {(isLong || isShort) && hasLeverageOption && (
-
- Leverage: {parseFloat(leverageOption).toFixed(2)}x
-
- )}
-
-
+
-
-
- Price
-
- {fromTokenInfo && toTokenInfo && (
- {
- setTriggerRatioValue(
- formatAmountFree(
- getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted),
- USD_DECIMALS,
- 10
- )
- );
- }}
- >
- {formatAmount(getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted), USD_DECIMALS, 4)}
+ {
+ setTriggerRatioValue(
+ formatAmountFree(getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted), USD_DECIMALS, 10)
+ );
+ }}
+ showMaxButton={false}
+ inputValue={triggerRatioValue}
+ onInputValueChange={onTriggerRatioChange}
+ >
+ {(() => {
+ if (!toTokenInfo || !fromTokenInfo) return;
+ const [tokenA, tokenB] = triggerRatioInverted
+ ? [toTokenInfo, fromTokenInfo]
+ : [fromTokenInfo, toTokenInfo];
+ return (
+
+ {tokenA.symbol} per {tokenB.symbol}
- )}
-
-
-
-
-
- {(() => {
- if (!toTokenInfo) return;
- if (!fromTokenInfo) return;
- const [tokenA, tokenB] = triggerRatioInverted
- ? [toTokenInfo, fromTokenInfo]
- : [fromTokenInfo, toTokenInfo];
- return (
-
- {tokenA.symbol} per {tokenB.symbol}
-
- );
- })()}
-
-
+ );
+ })()}
+
)}
{showTriggerPriceSection && (
-
-
-
- Price
-
- {
- setTriggerPriceValue(formatAmountFree(entryMarkPrice, USD_DECIMALS, 2));
- }}
- >
- Mark: {formatAmount(entryMarkPrice, USD_DECIMALS, 2, true)}
-
-
-
-
+ {
+ setTriggerPriceValue(formatAmountFree(entryMarkPrice, USD_DECIMALS, 2));
+ }}
+ showMaxButton={false}
+ inputValue={triggerPriceValue}
+ onInputValueChange={onTriggerPriceChange}
+ >
+ USD
+
)}
{isSwap && (
@@ -2157,28 +2043,15 @@ export default function SwapBox(props) {
)}
{(isLong || isShort) && !isStopOrder && (
-
-
- Leverage slider
-
-
+
+ Leverage slider
+
{isLeverageSliderEnabled && (
-
- setLeverageOption(value)}
- defaultValue={leverageOption}
- />
-
+
)}
{isShort && (
@@ -2313,202 +2186,205 @@ export default function SwapBox(props) {
{renderPrimaryButton()}
- {isSwap && (
-
-
- Swap
-
-
-
-
- {fromToken.symbol} Price
+
+ {isSwap && (
+
+
+ Swap
-
- ${fromTokenInfo && formatAmount(fromTokenInfo.minPrice, USD_DECIMALS, 2, true)}
-
-
-
-
- {toToken.symbol} Price
-
-
- ${toTokenInfo && formatAmount(toTokenInfo.maxPrice, USD_DECIMALS, 2, true)}
+
+
+
+ {fromToken.symbol} Price
+
+
+ ${fromTokenInfo && formatAmount(fromTokenInfo.minPrice, USD_DECIMALS, 2, true)}
+
-
-
-
- Available Liquidity
+
+
+ {toToken.symbol} Price
+
+
+ ${toTokenInfo && formatAmount(toTokenInfo.maxPrice, USD_DECIMALS, 2, true)}
+
+
+
+ Available Liquidity
+
-
- {
- return (
-
-
-
-
- );
- }}
- />
-
-
- {!isMarketOrder && (
-
- {getExchangeRateDisplay(getExchangeRate(fromTokenInfo, toTokenInfo), fromToken, toToken)}
-
- )}
-
- )}
- {(isLong || isShort) && (
-
-
- {isLong ? t`Long` : t`Short`} {toToken.symbol}
-
-
-
-
- Entry Price
-
-
- {
- return (
-
-
- The position will be opened at {formatAmount(entryMarkPrice, USD_DECIMALS, 2, true)} USD with a
- max slippage of {parseFloat(savedSlippageAmount / 100.0).toFixed(2)}%.
-
-
- The slippage amount can be configured under Settings, found by clicking on your address at the
- top right of the page after connecting your wallet.
-
-
-
- More Info
-
-
-
- );
- }}
- />
+
+ {
+ return (
+
+
+
+
+ );
+ }}
+ />
+
+ {!isMarketOrder && (
+
+ {getExchangeRateDisplay(getExchangeRate(fromTokenInfo, toTokenInfo), fromToken, toToken)}
+
+ )}
-
-
- Exit Price
-
-
- {
- return (
-
-
- If you have an existing position, the position will be closed at{" "}
- {formatAmount(entryMarkPrice, USD_DECIMALS, 2, true)} USD.
-
-
- This exit price will change with the price of the asset.
-
-
-
- More Info
-
-
-
- );
- }}
- />
+ )}
+ {(isLong || isShort) && (
+
+
+ {isLong ? t`Long` : t`Short`} {toToken.symbol}
-
-
- Borrow Fee
+
+
+
+ Entry Price
+
+
+ {
+ return (
+
+
+ The position will be opened at {formatAmount(entryMarkPrice, USD_DECIMALS, 2, true)} USD with
+ a max slippage of {parseFloat(savedSlippageAmount / 100.0).toFixed(2)}%.
+
+
+ The slippage amount can be configured under Settings, found by clicking on your address at the
+ top right of the page after connecting your wallet.
+
+
+
+ More Info
+
+
+
+ );
+ }}
+ />
+
-
- {
- return (
-
- {hasZeroBorrowFee && (
-
- {isLong && t`There are more shorts than longs, borrow fees for longing is currently zero`}
- {isShort && t`There are more longs than shorts, borrow fees for shorting is currently zero`}
-
- )}
- {!hasZeroBorrowFee && (
-
-
- The borrow fee is calculated as (assets borrowed) / (total assets in pool) * 0.01% per hour.
-
+
+
+ Exit Price
+
+
+ {
+ return (
+
+
+ If you have an existing position, the position will be closed at{" "}
+ {formatAmount(entryMarkPrice, USD_DECIMALS, 2, true)} USD.
- {isShort && t`You can change the "Collateral In" token above to find lower fees`}
-
- )}
-
-
- More Info
-
-
- );
- }}
- >
- {!hasZeroBorrowFee && null}
-
+ This exit price will change with the price of the asset.
+
+
+
+ More Info
+
+
+
+ );
+ }}
+ />
+
- {renderAvailableLongLiquidity()}
- {isShort && toTokenInfo.hasMaxAvailableShort && (
- Available Liquidity
+ Borrow Fee
{
return (
- <>
-
-
-
+
+ {hasZeroBorrowFee && (
+
+ {isLong && t`There are more shorts than longs, borrow fees for longing is currently zero`}
+ {isShort && t`There are more longs than shorts, borrow fees for shorting is currently zero`}
+
+ )}
+ {!hasZeroBorrowFee && (
+
+
+ The borrow fee is calculated as (assets borrowed) / (total assets in pool) * 0.01% per
+ hour.
+
+
+
+ {isShort && t`You can change the "Collateral In" token above to find lower fees`}
+
+ )}
+
+
+ More Info
+
+
+ >
+ {!hasZeroBorrowFee && null}
+
- )}
-
- )}
-
+ {renderAvailableLongLiquidity()}
+ {isShort && toTokenInfo.hasMaxAvailableShort && (
+
+
+ Available Liquidity
+
+
+ {
+ return (
+ <>
+
+
+
+ );
+ }}
+ >
+
+
+ )}
+
)}
diff --git a/src/components/Exchange/SwapBox.scss b/src/components/Exchange/SwapBox.scss
new file mode 100644
index 0000000000..2c84e6f153
--- /dev/null
+++ b/src/components/Exchange/SwapBox.scss
@@ -0,0 +1,42 @@
+.SwapBox-collateral-tooltip-text {
+ font-weight: normal;
+}
+
+.Exchange-leverage-toggle-wrapper {
+ margin-bottom: 0.8rem !important;
+}
+
+.Exchange-leverage-slider-settings {
+ display: flex;
+ justify-content: space-between;
+
+ .SwapBox-leverage-toggle {
+ width: 30px;
+ height: 18px;
+ background-color: rgba(255, 255, 255, 0.4);
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ border-radius: 50px;
+ padding: 2px;
+ cursor: pointer;
+ position: relative;
+
+ .handle {
+ width: 14.4px;
+ height: 14.4px;
+ background-color: white;
+ border-radius: 40px;
+ transition: all 200ms ease-in-out;
+ position: absolute;
+ left: 2px;
+ }
+ }
+
+ .SwapBox-leverage-toggle[data-is-on="true"] {
+ background-color: #3d51ff;
+ }
+ .SwapBox-leverage-toggle[data-is-on="true"] .handle {
+ left: calc(15px - 2px);
+ }
+}
diff --git a/src/components/Exchange/TradeHistory.js b/src/components/Exchange/TradeHistory.js
index 17c460f600..23db6913fa 100644
--- a/src/components/Exchange/TradeHistory.js
+++ b/src/components/Exchange/TradeHistory.js
@@ -510,12 +510,12 @@ export default function TradeHistory(props) {
{shouldShowPaginationButtons && (
{pageIndex > 0 && (
-
- {getFooterLinks(isHome).map(({ external, text, link, isAppLink }) => {
+ {getFooterLinks(isHome).map(({ external, label, link, isAppLink }) => {
if (external) {
return (
-
- {i18n._(text)}
+
+ {label}
);
}
@@ -41,25 +40,25 @@ export default function Footer({ showRedirectModal, redirectPopupTimestamp }: Pr
if (shouldShowRedirectModal(redirectPopupTimestamp)) {
return (
showRedirectModal && showRedirectModal(link)}
>
- {i18n._(text)}
+ {label}
);
} else {
const baseUrl = getAppBaseUrl();
return (
-
- {i18n._(text)}
+
+ {label}
);
}
}
return (
- {i18n._(text)}
+ {label}
);
})}
diff --git a/src/components/Footer/constants.ts b/src/components/Footer/constants.ts
index 5f8c6e9e4d..c4f2998a14 100644
--- a/src/components/Footer/constants.ts
+++ b/src/components/Footer/constants.ts
@@ -1,14 +1,13 @@
-import { defineMessage } from "@lingui/macro";
+import { t } from "@lingui/macro";
import "./Footer.css";
import twitterIcon from "img/ic_twitter.svg";
import discordIcon from "img/ic_discord.svg";
import telegramIcon from "img/ic_telegram.svg";
import githubIcon from "img/ic_github.svg";
import substackIcon from "img/ic_substack.svg";
-import { MessageDescriptor } from "@lingui/core";
type Link = {
- text: MessageDescriptor;
+ label: string;
link: string;
external?: boolean;
isAppLink?: boolean;
@@ -20,20 +19,19 @@ type SocialLink = {
icon: string;
};
-export const FOOTER_LINKS: { home: Link[]; app: Link[] } = {
- home: [
- { text: defineMessage({ message: "Terms and Conditions" }), link: "/terms-and-conditions" },
- { text: defineMessage({ message: "Referral Terms" }), link: "/referral-terms" },
- { text: defineMessage({ message: "Media Kit" }), link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
- // { text: "Jobs", link: "/jobs", isAppLink: true },
- ],
- app: [
- { text: defineMessage({ message: "Media Kit" }), link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
- // { text: "Jobs", link: "/jobs" },
- ],
-};
-
export function getFooterLinks(isHome) {
+ const FOOTER_LINKS: { home: Link[]; app: Link[] } = {
+ home: [
+ { label: t`Terms and Conditions`, link: "/terms-and-conditions" },
+ { label: t`Referral Terms`, link: "/referral-terms" },
+ { label: t`Media Kit`, link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
+ // { label: "Jobs", link: "/jobs", isAppLink: true },
+ ],
+ app: [
+ { label: t`Media Kit`, link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
+ // { label: "Jobs", link: "/jobs" },
+ ],
+ };
return FOOTER_LINKS[isHome ? "home" : "app"];
}
diff --git a/src/components/Glp/GlpSwap.css b/src/components/Glp/GlpSwap.css
index 9d418831f7..473cf82dad 100644
--- a/src/components/Glp/GlpSwap.css
+++ b/src/components/Glp/GlpSwap.css
@@ -86,7 +86,6 @@
}
.GlpSwap-token-list {
- border: 1px solid #1e2136;
border-radius: 4px;
background: #16182e;
padding: 1.5rem;
@@ -215,23 +214,41 @@
opacity: 0.7;
}
+.AppOrder-ball-icon {
+ text-align: center;
+ display: block;
+ font-size: 2rem;
+ opacity: 0.7;
+}
+
.AppOrder-ball {
- display: flex;
- justify-content: center;
- align-items: center;
position: absolute;
- width: 3.565rem;
- height: 3.565rem;
+ width: 3.5rem;
+ height: 3.5rem;
left: 50%;
margin-left: -1.7825rem;
- top: -2.2rem;
+ top: -2.5rem;
border-radius: 3.1rem;
- user-select: none;
- background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, rgba(46, 61, 205, 1) 100%);
cursor: pointer;
- opacity: 0.85;
+ user-select: none;
+ background: var(--primary-btn-bg);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ color: white;
+ opacity: 0.8;
}
+
.AppOrder-ball:hover {
+ background: var(--primary-btn-hover);
+}
+
+.AppOrder-ball:active {
+ background: var(--primary-btn-active);
+}
+
+.AppOrder-ball:hover .AppOrder-ball-icon {
opacity: 1;
}
diff --git a/src/components/Glp/GlpSwap.js b/src/components/Glp/GlpSwap.js
index d56b31b63f..0e89e555f6 100644
--- a/src/components/Glp/GlpSwap.js
+++ b/src/components/Glp/GlpSwap.js
@@ -25,7 +25,7 @@ import {
import { useGmxPrice } from "domain/legacy";
-import TokenSelector from "../Exchange/TokenSelector";
+import TokenSelector from "components/TokenSelector/TokenSelector";
import BuyInputSection from "../BuyInputSection/BuyInputSection";
import Tooltip from "../Tooltip/Tooltip";
@@ -38,8 +38,6 @@ import Vester from "abis/Vester.json";
import RewardRouter from "abis/RewardRouter.json";
import Token from "abis/Token.json";
-import arrowIcon from "img/ic_convert_down.svg";
-
import "./GlpSwap.css";
import AssetDropdown from "pages/Dashboard/AssetDropdown";
import SwapErrorModal from "./SwapErrorModal";
@@ -56,6 +54,7 @@ import { useChainId } from "lib/chains";
import ExternalLink from "components/ExternalLink/ExternalLink";
import { getIcon } from "config/icons";
import Button from "components/Button/Button";
+import { IoChevronDownOutline } from "react-icons/io5";
const { AddressZero } = ethers.constants;
@@ -416,8 +415,10 @@ export default function GlpSwap(props) {
]);
const switchSwapOption = (hash = "") => {
+ const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
history.push(`${history.location.pathname}#${hash}`);
props.setIsBuying(hash === "redeem" ? false : true);
+ window.scrollTo(0, currentScrollPosition);
};
const fillMaxAmount = () => {
@@ -639,8 +640,8 @@ export default function GlpSwap(props) {
}
};
- let payLabel = t`Pay`;
- let receiveLabel = t`Receive`;
+ let payLabel = t`Pay:`;
+ let receiveLabel = t`Receive:`;
let payBalance = "$0.00";
let receiveBalance = "$0.00";
if (isBuying) {
@@ -817,15 +818,14 @@ export default function GlpSwap(props) {
{isBuying && (
GLP
)}
-
-  {
- setIsBuying(!isBuying);
- switchSwapOption(isBuying ? "redeem" : "");
- }}
- />
-
+
GLP
@@ -888,11 +887,11 @@ export default function GlpSwap(props) {
{!isBuying && (
-
@@ -1190,8 +1189,8 @@ export default function GlpSwap(props) {
{renderFees()} |
|
-
- {visibleTokens.map((token) => {
- const tokenInfo = infoTokens[token.address];
- let utilization = bigNumberify(0);
- if (tokenInfo && tokenInfo.reservedAmount && tokenInfo.poolAmount && tokenInfo.poolAmount.gt(0)) {
- utilization = tokenInfo.reservedAmount.mul(BASIS_POINTS_DIVISOR).div(tokenInfo.poolAmount);
- }
- let maxUsdgAmount = DEFAULT_MAX_USDG_AMOUNT;
- if (tokenInfo.maxUsdgAmount && tokenInfo.maxUsdgAmount.gt(0)) {
- maxUsdgAmount = tokenInfo.maxUsdgAmount;
- }
-
- const tokenImage = importImage("ic_" + token.symbol.toLowerCase() + "_24.svg");
- return (
-
-
-
- 
- {token.symbol}
-
-
-
-
-
-
-
- Price
-
- ${formatKeyAmount(tokenInfo, "minPrice", USD_DECIMALS, 2, true)}
-
-
-
- Pool
-
-
- {
- return (
- <>
-
-
-
-
- );
- }}
- />
-
-
-
-
- Weight
+
+ {isMobile && (
+ <>
+
+ GLP Index Composition 
+
+
+
+ {visibleTokens.map((token) => {
+ const tokenInfo = infoTokens[token.address];
+ let utilization = bigNumberify(0);
+ if (tokenInfo && tokenInfo.reservedAmount && tokenInfo.poolAmount && tokenInfo.poolAmount.gt(0)) {
+ utilization = tokenInfo.reservedAmount.mul(BASIS_POINTS_DIVISOR).div(tokenInfo.poolAmount);
+ }
+ let maxUsdgAmount = DEFAULT_MAX_USDG_AMOUNT;
+ if (tokenInfo.maxUsdgAmount && tokenInfo.maxUsdgAmount.gt(0)) {
+ maxUsdgAmount = tokenInfo.maxUsdgAmount;
+ }
+
+ const tokenImage = importImage("ic_" + token.symbol.toLowerCase() + "_24.svg");
+ return (
+
+
+
+
+ {token.symbol}
+
+
- {getWeightText(tokenInfo)}
-
-
-
- Utilization
+
+
+
+
+ Price
+
+ ${formatKeyAmount(tokenInfo, "minPrice", USD_DECIMALS, 2, true)}
+
+
+
+ Pool
+
+
+ {
+ return (
+ <>
+
+
+
+
+ );
+ }}
+ />
+
+
+
+
+ Weight
+
+ {getWeightText(tokenInfo)}
+
+
+
+ Utilization
+
+ {formatAmount(utilization, 2, 2, false)}%
+
- {formatAmount(utilization, 2, 2, false)}%
-
-
- );
- })}
-
+ );
+ })}
+
+
+ )}
+ {getIsSyntheticsSupported(chainId) && }
diff --git a/src/pages/Ecosystem/Ecosystem.js b/src/pages/Ecosystem/Ecosystem.js
index 08a0c0924c..85d81b532e 100644
--- a/src/pages/Ecosystem/Ecosystem.js
+++ b/src/pages/Ecosystem/Ecosystem.js
@@ -450,7 +450,7 @@ export default function Ecosystem() {
];
return (
-
+
diff --git a/src/pages/Exchange/Exchange.css b/src/pages/Exchange/Exchange.css
index df3c6e22fd..ed27961056 100644
--- a/src/pages/Exchange/Exchange.css
+++ b/src/pages/Exchange/Exchange.css
@@ -27,7 +27,11 @@
}
.Exchange-empty-positions-list-note {
- padding-bottom: 0.465rem;
+ padding-bottom: 0.5rem;
+}
+
+.Exchange-empty-positions-list-note.small {
+ display: none;
}
.position-loading-icon {
@@ -266,6 +270,11 @@
font-weight: bold;
}
+.ExchangeChart-title:hover .chart-token-selector,
+.ExchangeChart-title:hover .chart-token-selector span {
+ color: #7885ff !important;
+}
+
.ExchangeChart-info-label {
font-size: 1.25rem;
opacity: 0.7;
@@ -425,7 +434,7 @@
width: 100%;
}
-.Position-list-order {
+.Position-list-order:not(:first-child) {
white-space: nowrap;
margin-top: 8px;
}
@@ -451,6 +460,9 @@
.Exchange-list .App-card {
margin-bottom: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
}
.Exchange-list-item-error {
@@ -543,7 +555,7 @@ table.Exchange-list th {
}
.Exchange-info-label {
- opacity: 0.7;
+ color: var(--text-gray);
margin-right: 0.8rem;
}
.Exchange-info-value-warning {
@@ -634,6 +646,12 @@ table.Exchange-list th {
border-radius: 0.3rem;
background: linear-gradient(90deg, rgba(30, 34, 61, 0.9) 0%, rgba(38, 43, 71, 0.9) 100%);
box-shadow: inset 0px 0px 3rem 0.5rem rgba(255, 255, 255, 0.01);
+ outline: 1px solid transparent;
+}
+
+.Exchange-swap-section:hover,
+.Exchange-swap-section:focus-within {
+ outline-color: #3a3f798f;
}
.Exchange-swap-option-tabs.Tab.block .Tab-option {
@@ -656,6 +674,7 @@ table.Exchange-list th {
grid-template-columns: auto auto;
font-size: var(--font-sm);
padding-bottom: 1.25rem;
+ line-height: 1;
}
.Exchange-swap-section-bottom {
@@ -664,12 +683,6 @@ table.Exchange-list th {
padding-bottom: 0.31rem;
}
-.Exchange-swap-message {
- font-size: var(--font-sm);
- opacity: 0.7;
- margin: 0.5rem 0;
-}
-
.Exchange-swap-input-container {
position: relative;
overflow: hidden;
@@ -686,12 +699,18 @@ table.Exchange-list th {
z-index: 1;
cursor: pointer;
font-size: var(--font-sm);
- background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, rgba(46, 61, 205, 1) 100%);
+ background: var(--primary-btn-bg);
+ border: none;
+ opacity: 0.8;
}
.Exchange-swap-max:hover {
color: rgba(255, 255, 255, 1);
- background: linear-gradient(90deg, rgba(58, 78, 252, 1) 0%, rgba(51, 68, 222, 1) 100%);
+ background: var(--primary-btn-hover);
+}
+
+.Exchange-swap-max:active {
+ background: var(--primary-btn-active);
}
.Exchange-swap-section-bottom .TokenSelector-box {
@@ -733,27 +752,34 @@ input.Exchange-swap-input.small {
display: block;
transform: rotate(90deg);
font-size: 2rem;
- opacity: 0.7;
+ opacity: 0.8;
}
.Exchange-swap-ball {
position: absolute;
- width: 3.565rem;
- height: 3.565rem;
+ width: 3.5rem;
+ height: 3.5rem;
left: 50%;
margin-left: -1.7825rem;
- top: -1.9375rem;
+ top: -2rem;
border-radius: 3.1rem;
cursor: pointer;
user-select: none;
- background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, rgba(46, 61, 205, 1) 100%);
+ background: var(--primary-btn-bg);
display: flex;
justify-content: center;
align-items: center;
+ border: none;
+ color: white;
+ opacity: 0.8;
}
.Exchange-swap-ball:hover {
- background: linear-gradient(90deg, rgba(58, 78, 252, 1) 0%, rgba(51, 68, 222, 1) 100%);
+ background: var(--primary-btn-hover);
+}
+
+.Exchange-swap-ball:active {
+ background: var(--primary-btn-active);
}
.Exchange-swap-ball:hover .Exchange-swap-ball-icon {
@@ -896,6 +922,18 @@ table.Exchange-list-small td {
margin-right: 0.25rem;
}
+.Position-leverage:hover {
+ opacity: 0.9;
+}
+
+.Position-pnl.negative:hover {
+ color: #fb5971;
+}
+
+.Position-pnl.positive:hover {
+ color: #56dba8;
+}
+
@media (max-width: 1500px) {
.Exchange-swap-box {
width: 38.75rem;
@@ -906,9 +944,17 @@ table.Exchange-list-small td {
.Exchange-list.large {
display: none;
}
-
.Exchange-list.small {
- display: table;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 1rem;
+ }
+ .Exchange-list-title,
+ .Position-leverage {
+ margin-right: 1rem;
+ }
+ .Exchange-empty-positions-list-note.small {
+ display: block;
}
}
@@ -995,11 +1041,25 @@ table.Exchange-list-small td {
.Exchange-swap-box .TokenSelector .Modal {
margin: 0 0.5rem;
}
- .Useful-links-swapbox {
- display: none;
+
+ .Exchange-swap-info-group {
+ display: grid;
+ grid-gap: 1rem;
}
- .Useful-links-exchange {
- display: block;
+
+ .Exchange-swap-box {
+ display: grid;
+ grid-template-columns: 3fr 2fr;
+ grid-gap: 1rem;
+ }
+ .Exchange-swap-market-box {
+ margin-top: 0;
+ }
+}
+
+@media (max-width: 1200px) {
+ .ExchangeChart-top-inner {
+ grid-column-gap: 3rem;
}
}
@@ -1025,6 +1085,18 @@ table.Exchange-list-small td {
.Exchange {
padding-top: 1.5rem !important;
}
+ .Useful-links-swapbox {
+ display: none;
+ }
+ .Exchange-swap-box {
+ grid-template-columns: 1fr;
+ }
+ .Useful-links-exchange {
+ display: block;
+ }
+ .Exchange-list.small {
+ grid-template-columns: 1fr;
+ }
}
@media (max-width: 450px) {
diff --git a/src/pages/Exchange/Exchange.js b/src/pages/Exchange/Exchange.js
index 6b638fb5a3..401c2b70f8 100644
--- a/src/pages/Exchange/Exchange.js
+++ b/src/pages/Exchange/Exchange.js
@@ -354,6 +354,9 @@ export const Exchange = forwardRef((props, ref) => {
setSavedShouldShowPositionLines,
connectWallet,
savedShouldDisableValidationForTesting,
+ tradePageVersion,
+ setTradePageVersion,
+ openSettings,
} = props;
const [showBanner, setShowBanner] = useLocalStorageSerializeKey("showBanner", true);
const [bannerHidden, setBannerHidden] = useLocalStorageSerializeKey("bannerHidden", null);
@@ -525,7 +528,9 @@ export const Exchange = forwardRef((props, ref) => {
const toToken = getTokenInfo(infoTokens, toTokenAddress);
let selectedToken = getChartToken(swapOption, fromToken, toToken, chainId);
let currentTokenPriceStr = formatAmount(selectedToken.maxPrice, USD_DECIMALS, 2, true);
- let title = getPageTitle(currentTokenPriceStr + ` | ${selectedToken.symbol}${selectedToken.isStable ? "" : "USD"}`);
+ let title = getPageTitle(
+ currentTokenPriceStr + ` | ${selectedToken.symbol}${selectedToken.isStable ? "" : "-USD"}`
+ );
document.title = title;
}, [tokenSelection, swapOption, infoTokens, chainId, fromTokenAddress, toTokenAddress]);
@@ -867,6 +872,7 @@ export const Exchange = forwardRef((props, ref) => {
minExecutionFeeErrorMessage={minExecutionFeeErrorMessage}
usdgSupply={usdgSupply}
totalTokenWeights={totalTokenWeights}
+ openSettings={openSettings}
/>
)}
{listSection === ORDERS && (
@@ -918,6 +924,8 @@ export const Exchange = forwardRef((props, ref) => {
savedShouldShowPositionLines={savedShouldShowPositionLines}
orders={orders}
setToTokenAddress={setToTokenAddress}
+ tradePageVersion={tradePageVersion}
+ setTradePageVersion={setTradePageVersion}
/>
);
};
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
index ca4fde6ffc..c0a246a618 100644
--- a/src/pages/Home/Home.css
+++ b/src/pages/Home/Home.css
@@ -222,6 +222,7 @@
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1.5rem;
+ grid-row-gap: 1.5rem;
}
.Home-token-card-option {
@@ -231,7 +232,6 @@
max-width: 59.2rem;
background: #16182e;
box-shadow: 0px 0.5rem 1.3rem #00000085;
- border: 1px solid #2a2b3d;
border-radius: 4px;
}
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index e572b51391..4ed0b0acdd 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -212,7 +212,7 @@ export default function Home({ showRedirectModal, redirectPopupTimestamp }) {
- Enter and exit positions with minimal spread and zero price impact. Get the optimal price without
+ Enter and exit positions with minimal spread and low price impact. Get the optimal price without
incurring additional costs.
@@ -273,7 +273,7 @@ export default function Home({ showRedirectModal, redirectPopupTimestamp }) {
- Two tokens create our ecosystem
+ Three tokens create our ecosystem
diff --git a/src/pages/Jobs/Jobs.js b/src/pages/Jobs/Jobs.js
index 8123f87fd1..dbe4ab214a 100644
--- a/src/pages/Jobs/Jobs.js
+++ b/src/pages/Jobs/Jobs.js
@@ -9,7 +9,7 @@ import ExternalLink from "components/ExternalLink/ExternalLink";
function Jobs() {
return (
-
+
diff --git a/src/pages/MarketPoolsPage/MarketPoolsPage.scss b/src/pages/MarketPoolsPage/MarketPoolsPage.scss
new file mode 100644
index 0000000000..8e6df094ef
--- /dev/null
+++ b/src/pages/MarketPoolsPage/MarketPoolsPage.scss
@@ -0,0 +1,20 @@
+.MarketPoolsPage-content {
+ display: flex;
+ justify-content: space-between;
+}
+
+.MarketPoolsPage-content .MarketPoolsPage-swap-box {
+ max-width: 47.95rem;
+ width: 100%;
+}
+
+@media (max-width: 900px) {
+ .MarketPoolsPage-content {
+ flex-wrap: wrap;
+ }
+
+ .MarketPoolsPage-content .MarketPoolsPage-swap-box {
+ max-width: none;
+ width: 100%;
+ }
+}
diff --git a/src/pages/MarketPoolsPage/MarketPoolsPage.tsx b/src/pages/MarketPoolsPage/MarketPoolsPage.tsx
new file mode 100644
index 0000000000..31006eece3
--- /dev/null
+++ b/src/pages/MarketPoolsPage/MarketPoolsPage.tsx
@@ -0,0 +1,106 @@
+import { Trans } from "@lingui/macro";
+import SEO from "components/Common/SEO";
+import ExternalLink from "components/ExternalLink/ExternalLink";
+import Footer from "components/Footer/Footer";
+import { GmSwapBox, Mode, Operation } from "components/Synthetics/GmSwap/GmSwapBox/GmSwapBox";
+import { MarketStats } from "components/Synthetics/MarketStats/MarketStats";
+import { getSyntheticsDepositMarketKey } from "config/localStorage";
+import { useMarketTokensData, useMarketsInfo } from "domain/synthetics/markets";
+import { useChainId } from "lib/chains";
+import { getPageTitle } from "lib/legacy";
+import { useLocalStorageSerializeKey } from "lib/localStorage";
+import { useState } from "react";
+
+import { getTokenData } from "domain/synthetics/tokens";
+import { getByKey } from "lib/objects";
+import "./MarketPoolsPage.scss";
+import { GmList } from "components/Synthetics/GmList/GmList";
+import { useMarketTokensAPR } from "domain/synthetics/markets/useMarketTokensAPR";
+
+type Props = {
+ connectWallet: () => void;
+ setPendingTxns: (txns: any) => void;
+};
+
+export function MarketPoolsPage(p: Props) {
+ const { chainId } = useChainId();
+
+ const { marketsInfoData = {}, tokensData } = useMarketsInfo(chainId);
+ const markets = Object.values(marketsInfoData);
+
+ const { marketTokensData: depositMarketTokensData } = useMarketTokensData(chainId, { isDeposit: true });
+ const { marketTokensData: withdrawalMarketTokensData } = useMarketTokensData(chainId, { isDeposit: false });
+
+ const { marketsTokensAPRData } = useMarketTokensAPR(chainId, {
+ marketsInfoData,
+ marketTokensData: withdrawalMarketTokensData,
+ });
+
+ const [operation, setOperation] = useState (Operation.Deposit);
+ const [mode, setMode] = useState(Mode.Single);
+
+ const [selectedMarketKey, setSelectedMarketKey] = useLocalStorageSerializeKey(
+ getSyntheticsDepositMarketKey(chainId),
+ undefined
+ );
+
+ const marketInfo = getByKey(marketsInfoData, selectedMarketKey);
+
+ const marketToken = getTokenData(
+ operation === Operation.Deposit ? depositMarketTokensData : withdrawalMarketTokensData,
+ selectedMarketKey
+ );
+
+ return (
+
+
+
+
+
+ V2 Pools
+
+
+
+ Purchase GM Tokens.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/ReferralTerms/ReferralTerms.js b/src/pages/ReferralTerms/ReferralTerms.js
index b40a42fde7..937e4066a7 100644
--- a/src/pages/ReferralTerms/ReferralTerms.js
+++ b/src/pages/ReferralTerms/ReferralTerms.js
@@ -4,10 +4,11 @@ import SEO from "components/Common/SEO";
import { getPageTitle } from "lib/legacy";
import "./ReferralTerms.css";
import ExternalLink from "components/ExternalLink/ExternalLink";
+import { t } from "@lingui/macro";
export default function ReferralTerms() {
return (
-
+
diff --git a/src/pages/Referrals/Referrals.css b/src/pages/Referrals/Referrals.css
index 18b465e6ef..b99266a2c4 100644
--- a/src/pages/Referrals/Referrals.css
+++ b/src/pages/Referrals/Referrals.css
@@ -176,12 +176,14 @@
}
.info-card {
+ min-height: 13rem;
background: var(--dark-blue-bg);
- border: 1px solid #1e2136;
border-radius: 0.4rem;
display: flex;
justify-content: center;
+ align-items: center;
}
+
.info-card .card-label {
font-size: var(--font-md);
line-height: 2.1rem;
@@ -191,6 +193,7 @@
margin-bottom: 1.5rem;
text-align: center;
}
+
.info-card .card-data {
font-size: var(--font-lg);
font-weight: normal;
@@ -198,6 +201,7 @@
padding: 0;
margin: 1.5rem 0;
}
+
.info-card .info-card-question-icon {
vertical-align: middle;
font-size: var(--font-sm);
diff --git a/src/pages/Referrals/Referrals.js b/src/pages/Referrals/Referrals.tsx
similarity index 86%
rename from src/pages/Referrals/Referrals.js
rename to src/pages/Referrals/Referrals.tsx
index 10051a244a..50a4a6cabe 100644
--- a/src/pages/Referrals/Referrals.js
+++ b/src/pages/Referrals/Referrals.tsx
@@ -1,27 +1,32 @@
-import "./Referrals.css";
-import React from "react";
-import { useLocalStorage } from "react-use";
import { Trans, t } from "@lingui/macro";
import { useWeb3React } from "@web3-react/core";
-import { useParams } from "react-router-dom";
-import SEO from "components/Common/SEO";
-import Tab from "components/Tab/Tab";
import Loader from "components/Common/Loader";
+import SEO from "components/Common/SEO";
+import ExternalLink from "components/ExternalLink/ExternalLink";
import Footer from "components/Footer/Footer";
-import { getPageTitle, isHashZero } from "lib/legacy";
-import { registerReferralCode, useCodeOwner, useReferrerTier, useUserReferralCode } from "domain/referrals";
-import JoinReferralCode from "components/Referrals/JoinReferralCode";
+import AddAffiliateCode from "components/Referrals/AddAffiliateCode";
import AffiliatesStats from "components/Referrals/AffiliatesStats";
+import JoinReferralCode from "components/Referrals/JoinReferralCode";
import TradersStats from "components/Referrals/TradersStats";
-import AddAffiliateCode from "components/Referrals/AddAffiliateCode";
import { deserializeSampleStats, isRecentReferralCodeNotExpired } from "components/Referrals/referralsHelper";
-import { ethers } from "ethers";
-import { useLocalStorageSerializeKey } from "lib/localStorage";
+import Tab from "components/Tab/Tab";
+import { getIcon } from "config/icons";
import { REFERRALS_SELECTED_TAB_KEY } from "config/localStorage";
+import {
+ ReferralCodeStats,
+ registerReferralCode,
+ useAffiliateTier,
+ useCodeOwner,
+ useReferralsData,
+ useUserReferralCode,
+} from "domain/referrals";
+import { ethers } from "ethers";
import { useChainId } from "lib/chains";
-import ExternalLink from "components/ExternalLink/ExternalLink";
-import { getIcon } from "config/icons";
-import useReferralsData from "domain/referrals/useReferralsData";
+import { getPageTitle, isHashZero } from "lib/legacy";
+import { useLocalStorageSerializeKey } from "lib/localStorage";
+import { useParams } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+import "./Referrals.css";
const TRADERS = "Traders";
const AFFILIATES = "Affiliates";
@@ -29,7 +34,7 @@ const TAB_OPTIONS = [TRADERS, AFFILIATES];
function Referrals({ connectWallet, setPendingTxns, pendingTxns }) {
const { active, account: walletAccount, library } = useWeb3React();
- const { account: queryAccount } = useParams();
+ const { account: queryAccount } = useParams<{ account?: string }>();
let account;
if (queryAccount && ethers.utils.isAddress(queryAccount)) {
account = ethers.utils.getAddress(queryAccount);
@@ -38,13 +43,19 @@ function Referrals({ connectWallet, setPendingTxns, pendingTxns }) {
}
const { chainId } = useChainId();
const [activeTab, setActiveTab] = useLocalStorage(REFERRALS_SELECTED_TAB_KEY, TRADERS);
- const [recentlyAddedCodes, setRecentlyAddedCodes] = useLocalStorageSerializeKey([chainId, "REFERRAL", account], [], {
- deserializer: deserializeSampleStats,
- });
+ const [recentlyAddedCodes, setRecentlyAddedCodes] = useLocalStorageSerializeKey (
+ [chainId, "REFERRAL", account],
+ [],
+ {
+ raw: false,
+ deserializer: deserializeSampleStats as any,
+ serializer: (value) => JSON.stringify(value),
+ }
+ );
const { data: referralsData, loading } = useReferralsData(account);
const { userReferralCode, userReferralCodeString } = useUserReferralCode(library, chainId, account);
const { codeOwner } = useCodeOwner(library, chainId, account, userReferralCode);
- const { referrerTier: traderTier } = useReferrerTier(library, chainId, codeOwner);
+ const { affiliateTier: traderTier } = useAffiliateTier(library, chainId, codeOwner);
const networkIcon = getIcon(chainId, "network");
function handleCreateReferralCode(referralCode) {
@@ -56,9 +67,11 @@ function Referrals({ connectWallet, setPendingTxns, pendingTxns }) {
}
function renderAffiliatesTab() {
- const currentReferralsData = referralsData?.[chainId];
+ const currentReferralsData = referralsData?.chains?.[chainId];
+
const isReferralCodeAvailable =
- currentReferralsData?.codes?.length > 0 || recentlyAddedCodes?.filter(isRecentReferralCodeNotExpired).length > 0;
+ currentReferralsData?.codes?.length || recentlyAddedCodes?.filter(isRecentReferralCodeNotExpired).length;
+
if (loading) return ;
if (account && isReferralCodeAvailable) {
return (
@@ -109,7 +122,7 @@ function Referrals({ connectWallet, setPendingTxns, pendingTxns }) {
const TAB_OPTION_LABELS = { [TRADERS]: t`Traders`, [AFFILIATES]: t`Affiliates` };
return (
-
+
diff --git a/src/pages/ReferralsTier/ReferralsTier.tsx b/src/pages/ReferralsTier/ReferralsTier.tsx
index 674a1831f5..07d69dce40 100644
--- a/src/pages/ReferralsTier/ReferralsTier.tsx
+++ b/src/pages/ReferralsTier/ReferralsTier.tsx
@@ -17,7 +17,7 @@ export default function ReferralsTier() {
const { referrerTier: currentAffiliateTier } = useReferrerTier(library, chainId, affiliate);
const onConfirmation = useCallback(() => {
- if (affiliate && affiliateTier) {
+ if (affiliate) {
contractSetAffiliateTier(chainId, affiliate, affiliateTier, library, {
sentMsg: "Transaction sent!",
failMsg: "Transaction failed.",
diff --git a/src/pages/Stake/Stake.css b/src/pages/Stake/Stake.css
index cc83213ad6..163afb65f0 100644
--- a/src/pages/Stake/Stake.css
+++ b/src/pages/Stake/Stake.css
@@ -24,9 +24,6 @@
}
@media (max-width: 800px) {
- .StakeModal .Modal-content {
- width: auto;
- }
.Stake-cards {
grid-template-columns: 1fr;
}
diff --git a/src/pages/Stake/StakeV2.css b/src/pages/Stake/StakeV2.css
index 799349a708..56826cf1b4 100644
--- a/src/pages/Stake/StakeV2.css
+++ b/src/pages/Stake/StakeV2.css
@@ -62,6 +62,10 @@
grid-gap: 1.5rem;
}
+.StakeV2-section {
+ margin-top: 1.5rem;
+}
+
.App-card-buttons {
display: flex;
flex-wrap: wrap;
diff --git a/src/pages/Stake/StakeV2.js b/src/pages/Stake/StakeV2.js
index 9f6b6cafd1..0a3efa26a3 100644
--- a/src/pages/Stake/StakeV2.js
+++ b/src/pages/Stake/StakeV2.js
@@ -37,7 +37,7 @@ import { getContract } from "config/contracts";
import "./StakeV2.css";
import SEO from "components/Common/SEO";
-import StatsTooltip from "components/StatsTooltip/StatsTooltip";
+import ChainsStatsTooltipRow from "components/StatsTooltip/ChainsStatsTooltipRow";
import StatsTooltipRow from "components/StatsTooltip/StatsTooltipRow";
import { getServerUrl } from "config/backend";
import { callContract, contractFetcher } from "lib/contracts";
@@ -49,6 +49,12 @@ import { useChainId } from "lib/chains";
import ExternalLink from "components/ExternalLink/ExternalLink";
import GMXAprTooltip from "components/Stake/GMXAprTooltip";
import Button from "components/Button/Button";
+import { GmList } from "components/Synthetics/GmList/GmList";
+import { getIsSyntheticsSupported } from "config/features";
+import { useMarketTokensData, useMarketsInfo } from "domain/synthetics/markets";
+import { useMarketTokensAPR } from "domain/synthetics/markets/useMarketTokensAPR";
+import TooltipWithPortal from "components/Tooltip/TooltipWithPortal";
+import BuyInputSection from "components/BuyInputSection/BuyInputSection";
const { AddressZero } = ethers.constants;
@@ -155,32 +161,20 @@ function StakeModal(props) {
return (
-
-
-
- setValue(formatAmountFree(maxAmount, 18, 18))}>
- Max: {formatAmount(maxAmount, 18, 4, true)}
-
-
-
-
- setValue(e.target.value)}
- />
-
- {stakingTokenSymbol}
-
-
-
@@ -280,30 +274,17 @@ function UnstakeModal(props) {
return (
-
-
-
- setValue(formatAmountFree(maxAmount, 18, 18))}>
- Max: {formatAmount(maxAmount, 18, 4, true)}
-
-
-
-
- setValue(e.target.value)}
- />
-
- {unstakingTokenSymbol}
-
-
You have {formatAmount(reservedAmount, 18, 2, true)} tokens reserved for vesting.
@@ -324,7 +305,7 @@ function UnstakeModal(props) {
)}
-
@@ -425,36 +406,21 @@ function VesterDepositModal(props) {
};
return (
-
+
-
-
-
- setValue(formatAmountFree(maxAmount, 18, 18))}
- >
- Max: {formatAmount(maxAmount, 18, 4, true)}
-
-
-
-
- setValue(e.target.value)}
- />
-
- esGMX
-
-
@@ -467,14 +433,14 @@ function VesterDepositModal(props) {
Vault Capacity
- {
return (
@@ -502,7 +468,7 @@ function VesterDepositModal(props) {
Reserve Amount
- {
return (
<>
@@ -542,7 +508,7 @@ function VesterDepositModal(props) {
-
@@ -591,7 +557,7 @@ function VesterWithdrawModal(props) {
-
-
@@ -900,7 +866,7 @@ function ClaimModal(props) {
-
@@ -1013,6 +979,10 @@ export default function StakeV2({ setPendingTxns, connectWallet }) {
feeGlpTrackerAddress,
];
+ const { marketsInfoData, tokensData } = useMarketsInfo(chainId);
+ const { marketTokensData } = useMarketTokensData(chainId, { isDeposit: false });
+ const { marketsTokensAPRData } = useMarketTokensAPR(chainId, { marketsInfoData, marketTokensData });
+
const { data: walletBalances } = useSWR(
[
`StakeV2:walletBalances:${active}`,
@@ -1620,7 +1590,7 @@ export default function StakeV2({ setPendingTxns, connectWallet }) {
` ($${formatAmount(stakedGmxSupplyUsd, USD_DECIMALS, 0, true)})`
}
renderContent={() => (
-
- |