Merge branch 'master' of https://github.com/gmx-io/gmx-interface

src/components/Button/Button.scss

@@ -3,7 +3,6 @@
   font-size: var(--font-sm);
   display: inline-flex;
   align-items: center;
-  text-decoration: none;
   font-weight: normal;
   padding: 1.1rem 1.6rem;
   border: none;

src/components/Synthetics/BridgingInfo/BridgingInfo.tsx

@@ -8,28 +8,39 @@ import ExternalLink from "components/ExternalLink/ExternalLink";
 type Props = {
   chainId: number;
   tokenSymbol?: string;
+  textOpaque?: boolean;
 };
 
 export function BridgingInfo(props: Props) {
-  const { chainId, tokenSymbol } = props;
+  const { chainId, tokenSymbol, textOpaque } = props;
   const chainName = getChainName(chainId);
   const bridgingOptions = getBridgingOptionsForToken(tokenSymbol);
 
   if (!tokenSymbol || !bridgingOptions) return null;
 
-  return (
-    <p className="opacity-70">
-      <Trans>
-        Bridge {tokenSymbol} to {chainName} with
-      </Trans>{" "}
-      {bridgingOptions.map((option, i) => {
-        const bridgeLink = option.generateLink(chainId);
-        return (
-          <ExternalLink key={i} href={bridgeLink}>
-            {option?.name}
-          </ExternalLink>
-        );
-      })}
-    </p>
-  );
+  return bridgingOptions.map((option, i) => {
+    if (option.render) {
+      return (
+        <p key={i} className={textOpaque ? undefined : "text-gray-300"}>
+          {option.render()}
+        </p>
+      );
+    }
+
+    if (!option.generateLink) {
+      return null;
+    }
+
+    const bridgeLink = option.generateLink(chainId);
+    return (
+      <p key={i} className={textOpaque ? undefined : "text-gray-300"}>
+        <Trans>
+          Bridge {tokenSymbol} to {chainName} with
+        </Trans>{" "}
+        <ExternalLink key={i} href={bridgeLink}>
+          {option?.name}
+        </ExternalLink>
+      </p>
+    );
+  });
 }

src/components/Synthetics/GmSwap/GmSwapBox/GmDepositWithdrawalBox/GmDepositWithdrawalBox.tsx

@@ -620,16 +620,25 @@ export function GmSwapBoxDepositWithdrawal(p: GmSwapBoxProps) {
   );
 
   const firstTokenSelectToken = useCallback(
-    (token: Token): void => setFirstTokenAddress(token.address),
-    [setFirstTokenAddress]
+    (token: Token): void => {
+      setFirstTokenAddress(token.address);
+
+      const isGmMarketSelected = vaultInfo && vaultInfo.markets.find((m) => m.address === token.address);
+
+      if (isGmMarketSelected) {
+        onSelectGlvGmMarket?.(token.address);
+      }
+    },
+    [setFirstTokenAddress, vaultInfo, onSelectGlvGmMarket]
   );
 
   const marketTokenSelectMarket = useCallback(
     (marketInfo: MarketInfo): void => {
       onMarketChange(marketInfo.marketTokenAddress);
       showMarketToast(marketInfo);
+      onSelectGlvGmMarket?.(undefined);
     },
-    [onMarketChange]
+    [onMarketChange, onSelectGlvGmMarket]
   );
   // #endregion
 
@@ -658,14 +667,6 @@ export function GmSwapBoxDepositWithdrawal(p: GmSwapBoxProps) {
     [marketAddress, onMarketChange, sortedMarketsInfoByIndexToken]
   );
 
-  useEffect(() => {
-    const isGmAsLongSelected = longTokenInputState?.isGm;
-
-    if (isGmAsLongSelected) {
-      onSelectGlvGmMarket?.(longTokenInputState?.address);
-    }
-  }, [longTokenInputState, onSelectGlvGmMarket]);
-
   useUpdateByQueryParams({
     operation,
     setOperation: onSetOperation,

src/components/Synthetics/GmSwap/GmSwapBox/useUpdateByQueryParams.tsx

@@ -119,6 +119,10 @@ export function useUpdateByQueryParams({
               setFirstTokenAddress(pool);
               onSelectGlvGmMarket?.(pool);
             }
+
+            if (!pool && isGlvMarket) {
+              onSelectGlvGmMarket?.(undefined);
+            }
           }
         }
 

src/components/Synthetics/MarketStats/MarketStatsWithComposition.tsx

@@ -456,7 +456,7 @@ export function MarketStatsWithComposition(p: Props) {
 
           <div className="App-card-divider" />
           <BridgingInfo chainId={chainId} tokenSymbol={longToken?.symbol} />
-          <BridgingInfo chainId={chainId} tokenSymbol={shortToken?.symbol} />
+          {!marketInfo?.isSameCollaterals && <BridgingInfo chainId={chainId} tokenSymbol={shortToken?.symbol} />}
         </div>
       </div>
       <div

src/components/Synthetics/MarketStats/components/CompositionTable.tsx

@@ -76,19 +76,22 @@ export function CompositionTableGm({ marketInfo }: CompositionTableGmProps) {
 
     const sum = bigintToNumber((longPoolAmountUsd ?? 0n) + (shortPoolAmountUsd ?? 0n), USD_DECIMALS);
 
+    const compLong = sum > 0 ? (bigintToNumber(longPoolAmountUsd ?? 0n, USD_DECIMALS) * 100) / sum : 0;
+    const compShort = sum > 0 ? (bigintToNumber(shortPoolAmountUsd ?? 0n, USD_DECIMALS) * 100) / sum : 0;
+
     return {
       type: "gm",
       data: [
         {
           token: longToken,
           amount: longPoolAmount,
-          comp: longPoolAmountUsd !== undefined ? (bigintToNumber(longPoolAmountUsd, USD_DECIMALS) * 100) / sum : 0,
+          comp: compLong,
           prefix: "Long",
         },
         {
           token: shortToken,
           amount: shortPoolAmount,
-          comp: shortPoolAmountUsd !== undefined ? (bigintToNumber(shortPoolAmountUsd, USD_DECIMALS) * 100) / sum : 0,
+          comp: compShort,
           prefix: "Short",
         },
       ],

src/components/Synthetics/PositionSeller/PositionSeller.tsx

@@ -12,6 +12,7 @@ import Modal from "components/Modal/Modal";
 import Tab from "components/Tab/Tab";
 import TokenSelector from "components/TokenSelector/TokenSelector";
 import { ValueTransition } from "components/ValueTransition/ValueTransition";
+import { USD_DECIMALS } from "config/factors";
 import { convertTokenAddress } from "config/tokens";
 import { useSubaccount } from "context/SubaccountContext/SubaccountContext";
 import { useSyntheticsEvents } from "context/SyntheticsEvents";
@@ -32,15 +33,14 @@ import { OrderOption } from "domain/synthetics/trade/usePositionSellerState";
 import { usePriceImpactWarningState } from "domain/synthetics/trade/usePriceImpactWarningState";
 import { getCommonError, getDecreaseError } from "domain/synthetics/trade/utils/validation";
 import { useChainId } from "lib/chains";
-import { USD_DECIMALS } from "config/factors";
 import { formatAmount, formatAmountFree, formatTokenAmountWithUsd, formatUsd, parseValue } from "lib/numbers";
-import { EMPTY_ARRAY } from "lib/objects";
 import { useDebouncedInputValue } from "lib/useDebouncedInputValue";
 import useWallet from "lib/wallets/useWallet";
 import { HighPriceImpactWarning } from "../HighPriceImpactWarning/HighPriceImpactWarning";
 
 import { useSettings } from "context/SettingsContext/SettingsContextProvider";
 import {
+  selectPositionSellerAvailableReceiveTokens,
   selectPositionSellerDecreaseAmounts,
   selectPositionSellerExecutionPrice,
   selectPositionSellerFees,
@@ -67,14 +67,15 @@ import { PositionSellerAdvancedRows } from "./PositionSellerAdvancedDisplayRows"
 import { makeSelectMarketPriceDecimals } from "context/SyntheticsStateContext/selectors/statsSelectors";
 import { helperToast } from "lib/helperToast";
 import {
+  initDecreaseOrderMetricData,
   makeTxnErrorMetricsHandler,
   makeTxnSentMetricsHandler,
-  initDecreaseOrderMetricData,
   sendOrderSubmittedMetric,
   sendTxnValidationErrorMetric,
 } from "lib/metrics/utils";
 import { NetworkFeeRow } from "../NetworkFeeRow/NetworkFeeRow";
 import { TradeFeesRow } from "../TradeFeesRow/TradeFeesRow";
+
 import "./PositionSeller.scss";
 
 export type Props = {
@@ -94,6 +95,7 @@ export function PositionSeller(p: Props) {
     setClosingPositionKey(undefined);
   }, [setClosingPositionKey]);
   const availableTokensOptions = useSelector(selectTradeboxAvailableTokensOptions);
+  const availableReceiveTokens = useSelector(selectPositionSellerAvailableReceiveTokens);
   const tokensData = useTokensData();
   const { chainId } = useChainId();
   const { signer, account } = useWallet();
@@ -508,7 +510,7 @@ export function PositionSeller(p: Props) {
             infoTokens={availableTokensOptions?.infoTokens}
             tokenAddress={receiveToken.address}
             onSelectToken={setReceiveTokenManually}
-            tokens={availableTokensOptions?.swapTokens || EMPTY_ARRAY}
+            tokens={availableReceiveTokens}
             showTokenImgInDropdown={true}
             selectedTokenLabel={
               <span className="PositionSelector-selected-receive-token">

src/components/Synthetics/TradeBox/TradeBox.tsx

@@ -5,23 +5,13 @@ import { IoMdSwap } from "react-icons/io";
 import { useHistory } from "react-router-dom";
 import { useKey, useLatest, usePrevious } from "react-use";
 
-import Button from "components/Button/Button";
-import BuyInputSection from "components/BuyInputSection/BuyInputSection";
-import { ExchangeInfo } from "components/Exchange/ExchangeInfo";
-import ExchangeInfoRow from "components/Exchange/ExchangeInfoRow";
-import ExternalLink from "components/ExternalLink/ExternalLink";
-import { LeverageSlider } from "components/LeverageSlider/LeverageSlider";
-import { MarketSelector } from "components/MarketSelector/MarketSelector";
-import Tab from "components/Tab/Tab";
-import ToggleSwitch from "components/ToggleSwitch/ToggleSwitch";
-import TokenWithIcon from "components/TokenIcon/TokenWithIcon";
-import TokenSelector from "components/TokenSelector/TokenSelector";
-import Tooltip from "components/Tooltip/Tooltip";
-import { ValueTransition } from "components/ValueTransition/ValueTransition";
-import { BASIS_POINTS_DIVISOR } from "config/factors";
+import { getBridgingOptionsForToken } from "config/bridging";
+import { BASIS_POINTS_DIVISOR, USD_DECIMALS } from "config/factors";
+import { get1InchSwapUrlFromAddresses } from "config/links";
 import { NATIVE_TOKEN_ADDRESS } from "config/tokens";
 import { MAX_METAMASK_MOBILE_DECIMALS } from "config/ui";
 import { useSettings } from "context/SettingsContext/SettingsContextProvider";
+import { useSubaccount } from "context/SubaccountContext/SubaccountContext";
 import {
   useMarketsInfoData,
   usePositionsConstants,
@@ -31,6 +21,7 @@ import {
 } from "context/SyntheticsStateContext/hooks/globalsHooks";
 import { selectChainId } from "context/SyntheticsStateContext/selectors/globalSelectors";
 import { selectSavedAcceptablePriceImpactBuffer } from "context/SyntheticsStateContext/selectors/settingsSelectors";
+import { selectSelectedMarketPriceDecimals } from "context/SyntheticsStateContext/selectors/statsSelectors";
 import {
   selectTradeboxAllowedSlippage,
   selectTradeboxAvailableTokensOptions,
@@ -85,7 +76,8 @@ import {
 } from "domain/synthetics/trade/utils/validation";
 import { Token, getMinResidualAmount } from "domain/tokens";
 import { numericBinarySearch } from "lib/binarySearch";
-import { USD_DECIMALS } from "config/factors";
+import { helperToast } from "lib/helperToast";
+import { useLocalizedMap } from "lib/i18n";
 import {
   formatAmount,
   formatAmountFree,
@@ -97,7 +89,9 @@ import {
   parseValue,
 } from "lib/numbers";
 import { EMPTY_ARRAY, getByKey } from "lib/objects";
+import { sleep } from "lib/sleep";
 import { mustNeverExist } from "lib/types";
+import { useCursorInside } from "lib/useCursorInside";
 import useIsMetamaskMobile from "lib/wallets/useIsMetamaskMobile";
 import useWallet from "lib/wallets/useWallet";
 
@@ -109,20 +103,6 @@ import { TradeFeesRow } from "../TradeFeesRow/TradeFeesRow";
 import { MarketPoolSelectorRow } from "./MarketPoolSelectorRow";
 import { CollateralSelectorRow } from "./TradeBoxRows/CollateralSelectorRow";
 
-import { useSubaccount } from "context/SubaccountContext/SubaccountContext";
-import { helperToast } from "lib/helperToast";
-import { useLocalizedMap } from "lib/i18n";
-import { useCursorInside } from "lib/useCursorInside";
-
-import LongIcon from "img/long.svg?react";
-import ShortIcon from "img/short.svg?react";
-import SwapIcon from "img/swap.svg?react";
-import { TradeBoxAdvancedGroups } from "./TradeBoxRows/AdvancedDisplayRows";
-import { LimitAndTPSLGroup } from "./TradeBoxRows/LimitAndTPSLRows";
-import { LimitPriceRow } from "./TradeBoxRows/LimitPriceRow";
-import { MinReceiveRow } from "./TradeBoxRows/MinReceiveRow";
-import { TradeBoxOneClickTrading } from "./TradeBoxRows/OneClickTrading";
-
 import { useRequiredActions } from "./hooks/useRequiredActions";
 import { useTPSLSummaryExecutionFee } from "./hooks/useTPSLSummaryExecutionFee";
 import { useTradeboxButtonState } from "./hooks/useTradeButtonState";
@@ -132,11 +112,33 @@ import { useTradeboxTPSLReset } from "./hooks/useTradeboxTPSLReset";
 import { useTradeboxTransactions } from "./hooks/useTradeboxTransactions";
 import { useTriggerOrdersConsent } from "./hooks/useTriggerOrdersConsent";
 
-import { selectSelectedMarketPriceDecimals } from "context/SyntheticsStateContext/selectors/statsSelectors";
 import { AlertInfo } from "components/AlertInfo/AlertInfo";
+import Button from "components/Button/Button";
+import BuyInputSection from "components/BuyInputSection/BuyInputSection";
+import { ExchangeInfo } from "components/Exchange/ExchangeInfo";
+import ExchangeInfoRow from "components/Exchange/ExchangeInfoRow";
+import ExternalLink from "components/ExternalLink/ExternalLink";
+import { LeverageSlider } from "components/LeverageSlider/LeverageSlider";
+import { MarketSelector } from "components/MarketSelector/MarketSelector";
+import { BridgingInfo } from "components/Synthetics/BridgingInfo/BridgingInfo";
+import Tab from "components/Tab/Tab";
+import ToggleSwitch from "components/ToggleSwitch/ToggleSwitch";
+import TokenWithIcon from "components/TokenIcon/TokenWithIcon";
+import TokenSelector from "components/TokenSelector/TokenSelector";
+import Tooltip from "components/Tooltip/Tooltip";
+import { ValueTransition } from "components/ValueTransition/ValueTransition";
+
+import { TradeBoxAdvancedGroups } from "./TradeBoxRows/AdvancedDisplayRows";
+import { LimitAndTPSLGroup } from "./TradeBoxRows/LimitAndTPSLRows";
+import { LimitPriceRow } from "./TradeBoxRows/LimitPriceRow";
+import { MinReceiveRow } from "./TradeBoxRows/MinReceiveRow";
+import { TradeBoxOneClickTrading } from "./TradeBoxRows/OneClickTrading";
+
+import LongIcon from "img/long.svg?react";
+import ShortIcon from "img/short.svg?react";
+import SwapIcon from "img/swap.svg?react";
 
 import "./TradeBox.scss";
-import { sleep } from "lib/sleep";
 
 export type Props = {
   setPendingTxns: (txns: any) => void;
@@ -519,6 +521,34 @@ export function TradeBox(p: Props) {
           );
           break;
 
+        case "noSwapPath":
+          tooltipContent = (
+            <>
+              <Trans>
+                {collateralToken?.assetSymbol ?? collateralToken?.symbol} is required for collateral.
+                <br />
+                <br />
+                There is no swap path found for {fromToken?.assetSymbol ?? fromToken?.symbol} to{" "}
+                {collateralToken?.assetSymbol ?? collateralToken?.symbol} within GMX.
+                <br />
+                <br />
+                <ExternalLink
+                  href={get1InchSwapUrlFromAddresses(chainId, fromToken?.address, collateralToken?.address)}
+                >
+                  You can buy {collateralToken?.assetSymbol ?? collateralToken?.symbol} on 1inch.
+                </ExternalLink>
+              </Trans>
+              {getBridgingOptionsForToken(collateralToken?.symbol) && (
+                <>
+                  <br />
+                  <br />
+                  <BridgingInfo chainId={chainId} tokenSymbol={collateralToken?.symbol} textOpaque />
+                </>
+              )}
+            </>
+          );
+          break;
+
         default:
           mustNeverExist(tooltipName);
       }
@@ -1222,7 +1252,7 @@ export function TradeBox(p: Props) {
     <Button
       qa="confirm-trade-button"
       variant="primary-action"
-      className="mt-4 w-full"
+      className="mt-4 w-full [text-decoration:inherit]"
       onClick={onSubmit}
       disabled={submitButtonState.disabled && !shouldDisableValidationForTesting}
     >

src/components/Tooltip/Tooltip.tsx

@@ -195,7 +195,7 @@ export default function Tooltip<T extends PropsWithChildren = PropsWithChildren>
       >
         {/* For onMouseLeave to work on disabled button https://github.com/react-component/tooltip/issues/18#issuecomment-411476678 */}
         {isHandlerDisabled ? (
-          <div className="pointer-events-none w-full flex-none">{handle ?? children}</div>
+          <div className="pointer-events-none w-full flex-none [text-decoration:inherit]">{handle ?? children}</div>
         ) : (
           <>{handle ?? children}</>
         )}