Fix multichain FEDEV-3074

src/components/BridgeModal/BridgeOutModal.tsx

@@ -1,7 +1,7 @@
 import { t, Trans } from "@lingui/macro";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Address, encodeAbiParameters } from "viem";
+import { Address, encodeAbiParameters, zeroAddress } from "viem";
 import { useAccount } from "wagmi";
 
 import {
@@ -15,10 +15,15 @@ import { getChainIcon } from "config/icons";
 import { getLayerZeroEndpointId, getStargatePoolAddress } from "config/multichain";
 import { useGmxAccountSettlementChainId } from "context/GmxAccountContext/hooks";
 import { selectMultichainMarketTokenBalances } from "context/PoolsDetailsContext/selectors/selectMultichainMarketTokenBalances";
-import { selectDepositMarketTokensData } from "context/SyntheticsStateContext/selectors/globalSelectors";
+import {
+  selectDepositMarketTokensData,
+  selectTokensData,
+} from "context/SyntheticsStateContext/selectors/globalSelectors";
 import { useSelector } from "context/SyntheticsStateContext/utils";
 import { useArbitraryError, useArbitraryRelayParamsAndPayload } from "domain/multichain/arbitraryRelayParams";
+import { getMultichainTransferSendParams } from "domain/multichain/getSendParams";
 import type { BridgeOutParams } from "domain/multichain/types";
+import { useQuoteSendNativeFee } from "domain/multichain/useQuoteSend";
 import { buildAndSignBridgeOutTxn } from "domain/synthetics/express/expressOrderUtils";
 import { ExpressTransactionBuilder } from "domain/synthetics/express/types";
 import { getGlvOrMarketAddress, GlvOrMarketInfo } from "domain/synthetics/markets";
@@ -61,6 +66,7 @@ export function BridgeOutModal({
   const [bridgeOutInputValue, setBridgeOutInputValue] = useState("");
   const [isCreatingTxn, setIsCreatingTxn] = useState(false);
 
+  const tokensData = useSelector(selectTokensData);
   const depositMarketTokensData = useSelector(selectDepositMarketTokensData);
   const glvOrMarketAddress = glvOrMarketInfo ? getGlvOrMarketAddress(glvOrMarketInfo) : undefined;
   const marketToken = getTokenData(depositMarketTokensData, glvOrMarketAddress);
@@ -150,6 +156,53 @@ export function BridgeOutModal({
     enabled: isVisible,
   });
 
+  const sendParams = useMemo(() => {
+    if (!bridgeOutChain || !account || bridgeOutAmount === undefined || bridgeOutAmount <= 0n) {
+      return;
+    }
+
+    return getMultichainTransferSendParams({
+      dstChainId: bridgeOutChain,
+      account,
+      amountLD: bridgeOutAmount,
+      isToGmx: false,
+      isManualGas: true,
+      srcChainId: chainId,
+    });
+  }, [bridgeOutChain, account, bridgeOutAmount, chainId]);
+
+  const transferNativeFee = useQuoteSendNativeFee({
+    fromChainId: chainId,
+    toChainId: bridgeOutChain,
+    sendParams,
+    fromStargateAddress: bridgeOutParams?.provider,
+  });
+
+  const networkFeeUsd = useMemo(() => {
+    if (
+      transferNativeFee === undefined ||
+      tokensData === undefined ||
+      tokensData[zeroAddress] === undefined ||
+      expressTxnParamsAsyncResult.data === undefined
+    ) {
+      return;
+    }
+
+    const relayFeeUsd = convertToUsd(
+      expressTxnParamsAsyncResult.data.gasPaymentParams.gasPaymentTokenAmount,
+      expressTxnParamsAsyncResult.data.gasPaymentParams.gasPaymentToken.decimals,
+      getMidPrice(expressTxnParamsAsyncResult.data.gasPaymentParams.gasPaymentToken.prices)
+    )!;
+
+    const transferNativeFeeUsd = convertToUsd(
+      transferNativeFee,
+      tokensData[zeroAddress].decimals,
+      tokensData[zeroAddress].prices.minPrice
+    )!;
+
+    return relayFeeUsd + transferNativeFeeUsd;
+  }, [transferNativeFee, tokensData, expressTxnParamsAsyncResult.data]);
+
   const errors = useArbitraryError(expressTxnParamsAsyncResult.error);
   const hasOutdatedUi = useHasOutdatedUi();
 
@@ -354,6 +407,9 @@ export function BridgeOutModal({
         <Button className="w-full" type="submit" variant="primary-action" disabled={buttonState.disabled}>
           {buttonState.text}
         </Button>
+
+        <SyntheticsInfoRow label={t`Network Fee`} value={formatUsd(networkFeeUsd)} />
+
         <SyntheticsInfoRow
           label={t`GMX Account Balance`}
           value={

src/components/Earn/Portfolio/AssetsList/GmGlvAssetCard.tsx

@@ -11,14 +11,14 @@ import {
   getMarketPoolName,
 } from "domain/synthetics/markets";
 import { isGlvInfo } from "domain/synthetics/markets/glv";
+import { Mode, Operation } from "domain/synthetics/markets/types";
 import { formatPercentage } from "lib/numbers";
 import { EarnPagePortfolioItemType, sendEarnPortfolioItemClickEvent } from "lib/userAnalytics/earnEvents";
 import { ContractsChainId } from "sdk/configs/chains";
 import { getNormalizedTokenSymbol } from "sdk/configs/tokens";
 
 import { AmountWithUsdBalance } from "components/AmountWithUsd/AmountWithUsd";
 import Button from "components/Button/Button";
-import { Mode, Operation } from "components/GmSwap/GmSwapBox/types";
 import { MultichainBalanceTooltip } from "components/MultichainBalanceTooltip/MultichainBalanceTooltip";
 import { SyntheticsInfoRow } from "components/SyntheticsInfoRow";
 import TokenIcon from "components/TokenIcon/TokenIcon";

src/components/GmSwap/GmFees/GmFees.tsx

@@ -3,6 +3,7 @@ import cx from "classnames";
 import { ReactNode, useMemo } from "react";
 import Skeleton from "react-loading-skeleton";
 
+import { Operation } from "domain/synthetics/markets/types";
 import { formatDeltaUsd, formatPercentage } from "lib/numbers";
 import { getPositiveOrNegativeClass } from "lib/utils";
 import { FeeItem } from "sdk/types/fees";
@@ -12,8 +13,6 @@ import StatsTooltipRow from "components/StatsTooltip/StatsTooltipRow";
 import { SyntheticsInfoRow } from "components/SyntheticsInfoRow";
 import Tooltip from "components/Tooltip/Tooltip";
 
-import { Operation } from "../GmSwapBox/types";
-
 import "./GmFees.scss";
 
 type Props = {

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

@@ -185,7 +185,7 @@ export function GmSwapBoxDepositWithdrawal() {
 
   const technicalFees = useTechnicalFees();
 
-  const { logicalFees } = useDepositWithdrawalFees({
+  const logicalFees = useDepositWithdrawalFees({
     amounts,
     chainId,
     gasLimits,

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

@@ -1,6 +1,7 @@
 import { t, Trans } from "@lingui/macro";
 import { useState } from "react";
 
+import { Operation } from "domain/synthetics/markets/types";
 import { GmSwapFees } from "domain/synthetics/trade";
 import { formatDeltaUsd } from "lib/numbers";
 
@@ -9,8 +10,6 @@ import { GmFees } from "components/GmSwap/GmFees/GmFees";
 import { SyntheticsInfoRow } from "components/SyntheticsInfoRow";
 import { UsdValueWithSkeleton } from "components/UsdValueWithSkeleton/UsdValueWithSkeleton";
 
-import { Operation } from "../types";
-
 export function InfoRows({
   isDeposit,
   fees,