Multichain withdrawal gas FEDEV-3233

src/components/GmxAccountModal/InsufficientWntBanner.tsx

@@ -4,7 +4,7 @@ import { zeroAddress } from "viem";
 
 import { useGmxAccountDepositViewTokenAddress, useGmxAccountModalOpen } from "context/GmxAccountContext/hooks";
 import { useChainId } from "lib/chains";
-import { formatAmount, formatUsd } from "lib/numbers";
+import { formatBalanceAmount, formatUsd } from "lib/numbers";
 import { getWrappedToken } from "sdk/configs/tokens";
 
 import { AlertInfoCard } from "components/AlertInfo/AlertInfoCard";
@@ -63,7 +63,7 @@ export function InsufficientWntBanner({
   let secondLine: React.ReactNode | undefined;
 
   if (neededAmount !== undefined && neededAmountUsd !== undefined) {
-    const formattedAmount = formatAmount(neededAmount, wrappedNativeTokenDecimals);
+    const formattedAmount = formatBalanceAmount(neededAmount, wrappedNativeTokenDecimals);
     const formattedUsd = formatUsd(neededAmountUsd);
 
     firstLine = (

src/components/GmxAccountModal/WithdrawalView.tsx

@@ -174,6 +174,7 @@ export const WithdrawalView = () => {
   const globalExpressParams = useSelector(selectExpressGlobalParams);
   const relayerFeeToken = getByKey(tokensData, globalExpressParams?.relayerFeeTokenAddress);
   const { gasTokenBuffer, gasTokenBufferWarningThreshold } = useUsdGasTokenBuffer();
+  const gasPaymentToken = useSelector(selectGasPaymentToken);
 
   const { provider } = useJsonRpcProvider(chainId);
 
@@ -421,41 +422,86 @@ export const WithdrawalView = () => {
   }, [errors, tokensData]);
 
   const relayFeeAmount = expressTxnParamsAsyncResult?.data?.gasPaymentParams.relayerFeeAmount;
+  const gasPaymentTokenAmount = expressTxnParamsAsyncResult?.data?.gasPaymentParams.gasPaymentTokenAmount;
   const gasPaymentParams = expressTxnParamsAsyncResult?.data?.gasPaymentParams;
 
-  const { networkFeeUsd, networkFee } = useMemo(() => {
-    if (relayFeeAmount === undefined || relayerFeeToken === undefined) {
-      return { networkFeeUsd: undefined, networkFee: undefined };
+  const { networkFeeUsd, wntFee, wntFeeUsd, networkFeeInGasPaymentToken } = useMemo(() => {
+    if (
+      gasPaymentTokenAmount === undefined ||
+      gasPaymentToken === undefined ||
+      relayFeeAmount === undefined ||
+      relayerFeeToken === undefined
+    ) {
+      return {
+        networkFeeUsd: undefined,
+        wntFee: undefined,
+        wntFeeUsd: undefined,
+        networkFeeInGasPaymentToken: undefined,
+      };
     }
 
     const relayFeeUsd = convertToUsd(relayFeeAmount, relayerFeeToken.decimals, getMidPrice(relayerFeeToken.prices));
 
-    if (relayFeeUsd === undefined || bridgeNetworkFeeUsd === undefined || bridgeNetworkFee === undefined) {
-      return { networkFeeUsd: undefined, networkFee: undefined };
+    const gasPaymentTokenUsd = convertToUsd(
+      gasPaymentTokenAmount,
+      gasPaymentToken?.decimals,
+      getMidPrice(gasPaymentToken.prices)
+    );
+
+    if (
+      relayFeeUsd === undefined ||
+      gasPaymentTokenUsd === undefined ||
+      bridgeNetworkFeeUsd === undefined ||
+      bridgeNetworkFee === undefined
+    ) {
+      return {
+        networkFeeUsd: undefined,
+        wntFee: undefined,
+        wntFeeUsd: undefined,
+        networkFeeInGasPaymentToken: undefined,
+      };
     }
 
+    const bridgeNetworkFeeInGasPaymentToken = convertToTokenAmount(
+      bridgeNetworkFeeUsd,
+      gasPaymentToken.decimals,
+      getMidPrice(gasPaymentToken.prices)
+    )!;
+
+    const wntFee = bridgeNetworkFee + (gasPaymentToken.isWrapped ? relayFeeAmount : 0n);
+    const wntFeeUsd = bridgeNetworkFeeUsd + (gasPaymentToken.isWrapped ? relayFeeUsd : 0n);
+
     return {
-      networkFeeUsd: relayFeeUsd + bridgeNetworkFeeUsd,
-      networkFee:
-        // We assume it is all in WNT
-        relayFeeAmount + bridgeNetworkFee,
+      networkFeeUsd: gasPaymentTokenUsd + bridgeNetworkFeeUsd,
+      wntFee,
+      wntFeeUsd,
+      networkFeeInGasPaymentToken: gasPaymentTokenAmount + bridgeNetworkFeeInGasPaymentToken,
     };
-  }, [bridgeNetworkFee, bridgeNetworkFeeUsd, relayFeeAmount, relayerFeeToken]);
+  }, [bridgeNetworkFee, bridgeNetworkFeeUsd, gasPaymentToken, gasPaymentTokenAmount, relayFeeAmount, relayerFeeToken]);
 
   const [showWntWarning, setShowWntWarning] = useState(false);
   const [lastValidNetworkFees, setLastValidNetworkFees] = useState({
-    networkFee: networkFee,
-    networkFeeUsd: networkFeeUsd,
+    wntFee,
+    networkFeeUsd,
+    networkFeeInGasPaymentToken,
+    wntFeeUsd,
   });
 
   useEffect(() => {
-    if (networkFee !== undefined && networkFeeUsd !== undefined) {
+    if (
+      wntFee !== undefined &&
+      networkFeeUsd !== undefined &&
+      wntFeeUsd !== undefined &&
+      networkFeeInGasPaymentToken !== undefined
+    ) {
       setLastValidNetworkFees({
-        networkFee,
+        wntFee,
         networkFeeUsd,
+        networkFeeInGasPaymentToken,
+        wntFeeUsd,
       });
     }
-  }, [networkFee, networkFeeUsd]);
+  }, [wntFee, networkFeeUsd, networkFeeInGasPaymentToken, wntFeeUsd]);
 
   useEffect(() => {
     if (wrappedNativeTokenAddress === zeroAddress) {
@@ -472,20 +518,21 @@ export const WithdrawalView = () => {
       return;
     }
 
-    const someNetworkFee = networkFee ?? lastValidNetworkFees.networkFee;
-    if (someNetworkFee === undefined) {
+    const someWntFee = wntFee ?? lastValidNetworkFees.wntFee;
+
+    if (someWntFee === undefined) {
       return;
     }
 
     const value = (unwrappedSelectedTokenAddress === zeroAddress ? inputAmount : 0n) ?? 0n;
 
-    setShowWntWarning(wrappedNativeToken.gmxAccountBalance - value < someNetworkFee);
+    setShowWntWarning(wrappedNativeToken.gmxAccountBalance - value < someWntFee);
   }, [
     wrappedNativeToken,
-    networkFee,
+    wntFee,
     unwrappedSelectedTokenAddress,
     inputAmount,
-    lastValidNetworkFees.networkFee,
+    lastValidNetworkFees.wntFee,
     wrappedNativeTokenAddress,
   ]);
 
@@ -650,8 +697,6 @@ export const WithdrawalView = () => {
     }
   };
 
-  const gasPaymentToken = useSelector(selectGasPaymentToken);
-
   const handleMaxButtonClick = useCallback(async () => {
     if (
       selectedToken === undefined ||
@@ -682,7 +727,7 @@ export const WithdrawalView = () => {
       }
     }
 
-    const nativeFee = bridgeNetworkFee ?? baseNativeFee;
+    const nativeFee = wntFee ?? lastValidNetworkFees.wntFee ?? bridgeNetworkFee ?? baseNativeFee;
 
     if (unwrappedSelectedTokenAddress === zeroAddress && nativeFee !== undefined) {
       amount = amount - (nativeFee * 11n) / 10n;
@@ -700,10 +745,12 @@ export const WithdrawalView = () => {
     gasPaymentToken?.decimals,
     gasPaymentToken?.prices,
     gasTokenBuffer,
+    lastValidNetworkFees.wntFee,
     selectedToken,
     setInputValue,
     unwrappedSelectedTokenAddress,
     withdrawalViewChain,
+    wntFee,
   ]);
 
   const shouldShowMinRecommendedAmount = useMemo(() => {
@@ -1102,8 +1149,8 @@ export const WithdrawalView = () => {
 
           {showWntWarning && !(errors?.isOutOfTokenError?.tokenAddress === wrappedNativeTokenAddress) && (
             <InsufficientWntBanner
-              neededAmount={networkFee ?? lastValidNetworkFees.networkFee}
-              neededAmountUsd={networkFeeUsd ?? lastValidNetworkFees.networkFeeUsd}
+              neededAmount={wntFee ?? lastValidNetworkFees.wntFee}
+              neededAmountUsd={wntFeeUsd ?? lastValidNetworkFees.wntFeeUsd}
             />
           )}
         </>
@@ -1129,13 +1176,13 @@ export const WithdrawalView = () => {
           <SyntheticsInfoRow
             label={<Trans>Network Fee</Trans>}
             value={
-              networkFeeUsd !== undefined && relayerFeeToken ? (
+              networkFeeUsd !== undefined && gasPaymentToken ? (
                 <AmountWithUsdBalance
                   className="leading-1"
-                  amount={networkFee}
-                  decimals={relayerFeeToken.decimals}
+                  amount={networkFeeInGasPaymentToken}
+                  decimals={gasPaymentToken.decimals}
                   usd={networkFeeUsd}
-                  symbol={relayerFeeToken.symbol}
+                  symbol={gasPaymentToken.symbol}
                 />
               ) : (
                 "..."

src/locales/de/messages.po

@@ -129,10 +129,6 @@ msgstr ""
 msgid "Yield Optimizer on Avalanche"
 msgstr "Yield-Optimierer auf Avalanche"
 
-#: src/components/SwitchToSettlementChain/SwitchToSettlementChainWarning.tsx
-#~ msgid "Claim Rewards is only available on {settlementChainName}. Please switch to {settlementChainName} to access earning opportunities."
-#~ msgstr ""
-
 #: src/components/Earn/Discovery/EarnYieldOverview.tsx
 msgid "Arbitrum"
 msgstr "Arbitrum"
@@ -182,10 +178,6 @@ msgstr "Aktualisiere {updateOrdersCount} TP/SL-Order(s)"
 msgid "RabbitHole"
 msgstr "RabbitHole"
 
-#: src/pages/Dashboard/WeightText.tsx
-#~ msgid "{0} is above its target weight.<0/><1/>Get lower fees to <2>swap</2> tokens for {1}."
-#~ msgstr "{0} liegt über der Zielgewichtung.<0/><1/>Erhalte niedrigere Gebühren, um <2>Token für {1} zu tauschen</2>."
-
 #: src/domain/synthetics/markets/createGlvWithdrawalTxn.ts
 #: src/domain/synthetics/markets/createWithdrawalTxn.ts
 msgid "Withdrawal error."
@@ -672,10 +664,6 @@ msgstr "Verteilungshistorie für eingelöste Rabatte und Airdrops."
 msgid "providing liquidity"
 msgstr "Liquidität bereitstellen"
 
-#: src/lib/wallets/connecters/binanceW3W/binanceWallet.ts
-msgid "Tap [Create Wallet] to start using your Web3 Wallet."
-msgstr "Tippe auf [Wallet erstellen], um dein Web3 Wallet zu verwenden."
-
 #: src/pages/Ecosystem/ecosystemConstants.tsx
 msgid "Plutus"
 msgstr "Plutus"
@@ -717,10 +705,6 @@ msgstr "Limitpreis über Markpreis"
 msgid "Open Interest (<0>{longOIPercentage}</0>/<1>{shortOIPercentage}</1>)"
 msgstr "Offenes Interest (<0>{longOIPercentage}</0>/<1>{shortOIPercentage}</1>)"
 
-#: src/lib/wallets/connecters/binanceW3W/binanceWallet.ts
-msgid "Create or Import a Wallet"
-msgstr "Wallet erstellen oder importieren"
-
 #: src/components/NetworkDropdown/NetworkDropdown.tsx
 msgid "Networks and Settings"
 msgstr "Netzwerke und Einstellungen"
@@ -3579,10 +3563,6 @@ msgstr "Empfehlungscode eingereicht."
 msgid "GMX is not actively looking for new hires at the moment. However, if you think you can contribute to the project, please email <0>[email protected]</0>."
 msgstr "GMX sucht derzeit nicht aktiv nach neuen Mitarbeitern. Wenn du jedoch denkst, dass du zum Projekt beitragen kannst, sende bitte eine E-Mail an <0>[email protected]</0>."
 
-#: src/lib/wallets/connecters/binanceW3W/binanceWallet.ts
-msgid "After you scan, a connection prompt will appear for you to connect your wallet."
-msgstr "Nach dem Scannen erscheint eine Verbindungsaufforderung, um deine Wallet zu verbinden."
-
 #: src/components/SwitchToSettlementChain/SwitchToSettlementChainWarning.tsx
 msgid "Liquidity providing for this market is only available on {chainNames} and {lastChainName}. Please switch to {chainNames} or {lastChainName} to access earning opportunities."
 msgstr "Liquiditätsbereitstellung für diesen Markt ist nur auf {chainNames} und {lastChainName} verfügbar. Bitte wechseln Sie zu {chainNames} oder {lastChainName}, um Verdienstmöglichkeiten zu nutzen."
@@ -4180,10 +4160,6 @@ msgstr "TP"
 msgid "<0>Claimable Funding Fee.</0>"
 msgstr "<0>Beanspruchbare Finanzierungsgebühr.</0>"
 
-#: src/lib/wallets/connecters/binanceW3W/binanceWallet.ts
-msgid "Log in to your Binance app and tap [Wallets]. Go to [Web3]."
-msgstr "Melde dich in deiner Binance-App an und tippe auf [Wallets]. Gehe zu [Web3]."
-
 #: src/components/Claims/ClaimableCard.tsx
 #: src/components/Earn/Portfolio/AssetsList/GmxAssetCard/VestModal.tsx
 msgid "Claimable"
@@ -5067,10 +5043,6 @@ msgstr "zahlen"
 msgid "Total circulating supply of GMX tokens."
 msgstr "Gesamte umlaufende Versorgung von GMX-Token."
 
-#: src/pages/Dashboard/WeightText.tsx
-#~ msgid "Target Weight"
-#~ msgstr "Ziel-Gewichtung"
-
 #: src/domain/synthetics/trade/useMaxAutoCancelOrdersState.tsx
 msgid "You can have up to {allowedAutoCancelOrdersNumber} active auto-cancelable TP/SL orders. Additional orders must be canceled manually, while existing ones will still close automatically with their related position."
 msgstr "Du kannst bis zu {allowedAutoCancelOrdersNumber} aktive auto-stornierbare TP/SL-Orders haben. Zusätzliche Orders müssen manuell storniert werden, während bestehende automatisch mit ihrer zugehörigen Position schließen."
@@ -5505,10 +5477,6 @@ msgstr "Neuen Betrag oder Preis eingeben"
 msgid "Wins and losses for fully closed positions."
 msgstr "Gewinne und Verluste für vollständig geschlossene Positionen."
 
-#: src/lib/wallets/connecters/binanceW3W/binanceWallet.ts
-msgid "Open Binance app"
-msgstr "Binance-App öffnen"
-
 #: src/components/NpsModal/NpsModal.tsx
 msgid "Enter your answer here."
 msgstr "Geben Sie Ihre Antwort hier ein."
@@ -6180,10 +6148,6 @@ msgstr "Startet in"
 msgid "The network fees are high currently, which may be due to a temporary increase in transactions on the {chainName} network."
 msgstr "Die Netzwerkgebühren sind derzeit hoch, was auf eine vorübergehende Zunahme von Transaktionen im {chainName}-Netzwerk zurückzuführen sein kann."
 
-#: src/lib/wallets/connecters/binanceW3W/binanceWallet.ts
-msgid "Scan the QR code"
-msgstr "Scanne den QR-Code"
-
 #: src/components/StatusNotification/GmStatusNotification.tsx
 msgid "Unknown shift GM order"
 msgstr "Unbekannte Shift-GM-Order"
@@ -6309,10 +6273,6 @@ msgstr "Gebühren überschreiten Betrag"
 msgid "Search Type"
 msgstr "Suchtyp"
 
-#: src/pages/Dashboard/WeightText.tsx
-#~ msgid "{0} is below its target weight.<0/><1/>Get lower fees to <2>buy GLP</2> with {1}, and to <3>swap</3> {2} for other tokens."
-#~ msgstr "{0} ist unter seinem Zielgewicht.<0/><1/>Erhalte niedrigere Gebühren zum <2>Kaufen von GLP</2> mit {1}, und zum <3>Swappen</3> von {2} für andere Token."
-
 #: src/pages/AccountDashboard/GeneralPerformanceDetails.tsx
 #: src/pages/LeaderboardPage/components/LeaderboardAccountsTable.tsx
 msgid "Win Rate"
@@ -6972,10 +6932,6 @@ msgstr "Min. Anzahl der Teile: {MIN_TWAP_NUMBER_OF_PARTS}"
 msgid "Request Settlement of Funding Fees"
 msgstr "Antrag auf Abrechnung von Finanzierungsgebühren"
 
-#: src/pages/Dashboard/WeightText.tsx
-#~ msgid "Current Weight"
-#~ msgstr "Aktuelle Gewichtung"
-
 #: src/pages/Ecosystem/Ecosystem.tsx
 msgid "Partnerships and Integrations"
 msgstr "Partnerschaften und Integrationen"