feat(ng): evm tx fee widget

apps/next/src/components/CollapsedTokenAmount.tsx

@@ -1,6 +1,7 @@
 import {
   Stack,
   StackProps,
+  Tooltip,
   Typography,
   TypographyProps,
 } from '@avalabs/k2-alpine';
@@ -66,21 +67,23 @@ export const CollapsedTokenAmount = ({
 
   if (fraction && indexOfNonZero) {
     return (
-      <Stack
-        direction="row"
-        width="100%"
-        justifyContent="flex-end"
-        {...stackProps}
-      >
-        <Typography {...finalRegularProps}>{integer}.0</Typography>
-        <Typography {...finalOverlineProps}>{zeroCount}</Typography>
-        <Typography {...finalRegularProps}>
-          {fraction.slice(
-            indexOfNonZero,
-            indexOfNonZero + MAX_DIGITS_AFTER_CONSECUTIVE_ZEROES,
-          )}
-        </Typography>
-      </Stack>
+      <Tooltip title={amount}>
+        <Stack
+          direction="row"
+          width="100%"
+          justifyContent="flex-end"
+          {...stackProps}
+        >
+          <Typography {...finalRegularProps}>{integer}.0</Typography>
+          <Typography {...finalOverlineProps}>{zeroCount}</Typography>
+          <Typography {...finalRegularProps}>
+            {fraction.slice(
+              indexOfNonZero,
+              indexOfNonZero + MAX_DIGITS_AFTER_CONSECUTIVE_ZEROES,
+            )}
+          </Typography>
+        </Stack>
+      </Tooltip>
     );
   }
   return <Typography {...finalRegularProps}>{amount}</Typography>;

apps/next/src/hooks/useCurrentFeesForNetwork.ts

@@ -0,0 +1,16 @@
+import { NetworkFee, NetworkWithCaipId } from '@core/types';
+import { useEffect, useState } from 'react';
+
+import { useNetworkFeeContext } from '@core/ui';
+
+export const useCurrentFeesForNetwork = (network: NetworkWithCaipId) => {
+  const { getNetworkFee } = useNetworkFeeContext();
+
+  const [networkFee, setNetworkFee] = useState<NetworkFee | null>();
+
+  useEffect(() => {
+    getNetworkFee(network.caipId).then(setNetworkFee);
+  }, [getNetworkFee, network]);
+
+  return networkFee;
+};

apps/next/src/hooks/useMaxAmountForTokenSend/useMaxAmountForTokenSend.ts

@@ -49,11 +49,9 @@ export const useMaxAmountForTokenSend = (
   useEffect(() => {
     if (!token || !from) return;
 
-    let isMounted = true;
-
     getNetworkFee(token.coreChainId)
       .then((networkFee) => {
-        if (!networkFee || !isMounted) {
+        if (!networkFee) {
           return;
         }
 
@@ -66,19 +64,19 @@ export const useMaxAmountForTokenSend = (
             from.addressBTC,
             to,
             getNetwork(token.coreChainId),
-          ).then((res) => isMounted && setResult(res));
+          ).then(setResult);
         } else if (isAvmCapableAccount(from) && isXChainToken(token)) {
           getXChainMaxAmount(
             from,
             isLedgerWallet,
             getNetwork(token.coreChainId),
-          ).then((res) => isMounted && setResult(res));
+          ).then(setResult);
         } else if (isPvmCapableAccount(from) && isPChainToken(token)) {
           getPChainMaxAmount(
             from,
             isLedgerWallet,
             getNetwork(token.coreChainId),
-          ).then((res) => isMounted && setResult(res));
+          ).then(setResult);
         } else if (
           isSvmCapableAccount(from) &&
           (isSolanaNativeToken(token) || isSolanaSplToken(token))
@@ -98,10 +96,6 @@ export const useMaxAmountForTokenSend = (
           error,
         );
       });
-
-    return () => {
-      isMounted = false;
-    };
   }, [token, getNetworkFee, from, to, getNetwork, isLedgerWallet]);
 
   return result;

apps/next/src/hooks/useNativeToken.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { TokenType } from '@avalabs/vm-module-types';
+
+import { NativeTokenBalance, NetworkWithCaipId } from '@core/types';
+import { useTokensWithBalances } from '@core/ui';
+
+type UseNativeTokenArgs = { network: NetworkWithCaipId };
+
+export const useNativeToken = ({ network }: UseNativeTokenArgs) => {
+  const tokens = useTokensWithBalances({ network });
+
+  return useMemo(
+    () => tokens.find(({ type }) => type === TokenType.NATIVE),
+    [tokens],
+  ) as NativeTokenBalance;
+};

apps/next/src/hooks/useUpdateAccountBalance.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { NetworkWithCaipId } from '@core/types';
+import { useAccountsContext, useBalancesContext } from '@core/ui';
+
+export const useUpdateAccountBalance = (network: NetworkWithCaipId) => {
+  const {
+    accounts: { active: activeAccount },
+  } = useAccountsContext();
+
+  const { updateBalanceOnNetworks } = useBalancesContext();
+
+  useEffect(() => {
+    if (!activeAccount) {
+      return;
+    }
+
+    updateBalanceOnNetworks([activeAccount], [network.chainId]);
+  }, [activeAccount, network.chainId, updateBalanceOnNetworks]);
+};

apps/next/src/localization/locales/en/translation.json

@@ -91,6 +91,7 @@
   "Closing the settings menu will require you to restart the 2 day waiting period.": "Closing the settings menu will require you to restart the 2 day waiting period.",
   "Code copied to clipboard": "Code copied to clipboard",
   "Code verification error": "Code verification error",
+  "Coming soon!": "Coming soon!",
   "Confirm": "Confirm",
   "Confirm Bridge": "Confirm Bridge",
   "Confirm addresses": "Confirm addresses",
@@ -127,6 +128,7 @@
   "Current password": "Current password",
   "Current password is incorrect": "Current password is incorrect",
   "Currently using {{name}}": "Currently using {{name}}",
+  "Custom": "Custom",
   "Customize Core to your liking": "Customize Core to your liking",
   "Dark": "Dark",
   "Decide what default view works best for you, either a floating interface or a sidebar docked to the side to show more content": "Decide what default view works best for you, either a floating interface or a sidebar docked to the side to show more content",
@@ -145,6 +147,7 @@
   "Done": "Done",
   "Download Ledger Live to update": "Download Ledger Live to update",
   "Drop your file here to upload": "Drop your file here to upload",
+  "Edit network fee": "Edit network fee",
   "Email address": "Email address",
   "Enable a sandbox environment for testing without using real funds": "Enable a sandbox environment for testing without using real funds",
   "English": "English",
@@ -181,6 +184,7 @@
   "Failed to save contact": "Failed to save contact",
   "Failed to send the transaction": "Failed to send the transaction",
   "Farming": "Farming",
+  "Fast": "Fast",
   "Feature is disabled": "Feature is disabled",
   "Fetching available authentication methods...": "Fetching available authentication methods...",
   "File Upload Failed": "File Upload Failed",
@@ -190,10 +194,13 @@
   "Follow the instructions in your browser window to add this key to your account.": "Follow the instructions in your browser window to add this key to your account.",
   "Forgot password?": "Forgot password?",
   "French": "French",
+  "Gas fees paid by Core": "Gas fees paid by Core",
+  "Gas limit": "Gas limit",
   "General": "General",
   "Generate a new account in your active wallet": "Generate a new account in your active wallet",
   "German": "German",
   "Get Core to work for you. Whether it’s transferring, sending crypto, just ask away!": "Get Core to work for you. Whether it’s transferring, sending crypto, just ask away!",
+  "Get free gas": "Get free gas",
   "Get started by adding crypto to your wallet": "Get started by adding crypto to your wallet",
   "Governance": "Governance",
   "Help center": "Help center",
@@ -224,6 +231,7 @@
   "Incorrect token address": "Incorrect token address",
   "Install or open your authenticator app to scan the QR code. If you prefer, you can manually copy the code by clicking the link below.": "Install or open your authenticator app to scan the QR code. If you prefer, you can manually copy the code by clicking the link below.",
   "Insufficient balance": "Insufficient balance",
+  "Insufficient balance for fee": "Insufficient balance for fee",
   "Insufficient balance.": "Insufficient balance.",
   "Insufficient funds": "Insufficient funds",
   "Insurance Buyer": "Insurance Buyer",
@@ -275,6 +283,9 @@
   "Manually enter a recovery phrase": "Manually enter a recovery phrase",
   "Manually enter your private key to import": "Manually enter your private key to import",
   "Max": "Max",
+  "Max base fee": "Max base fee",
+  "Max base fee must be greater than max priority fee": "Max base fee must be greater than max priority fee",
+  "Max priority fee": "Max priority fee",
   "Maximum available amount after fees is ~{{maxAmount}}.": "Maximum available amount after fees is ~{{maxAmount}}.",
   "Minimum amount is {{minimum}}.": "Minimum amount is {{minimum}}.",
   "Mismatching provider": "Mismatching provider",
@@ -287,6 +298,7 @@
   "Name your Passkey": "Name your Passkey",
   "Name your Yubikey": "Name your Yubikey",
   "Network error": "Network error",
+  "Network fee amount": "Network fee amount",
   "New password": "New password",
   "New password must be different from current one": "New password must be different from current one",
   "Next": "Next",
@@ -301,6 +313,7 @@
   "No routes found with enough liquidity.": "No routes found with enough liquidity.",
   "No saved addresses": "No saved addresses",
   "No thanks": "No thanks",
+  "Normal": "Normal",
   "Not connected": "Not connected",
   "Only Keystore files from the Avalanche Wallet are supported": "Only Keystore files from the Avalanche Wallet are supported",
   "Only keystore files exported from the Avalanche Wallet are supported.": "Only keystore files exported from the Avalanche Wallet are supported.",
@@ -327,6 +340,7 @@
   "Please enter a password": "Please enter a password",
   "Please enter a recipient address.": "Please enter a recipient address.",
   "Please enter a valid amount.": "Please enter a valid amount.",
+  "Please enter a valid decimal value": "Please enter a valid decimal value",
   "Please enter a valid password": "Please enter a valid password",
   "Please enter an amount": "Please enter an amount",
   "Please enter the private key.": "Please enter the private key.",
@@ -418,6 +432,7 @@
   "Sidebar": "Sidebar",
   "Skip": "Skip",
   "Slippage tolerance exceeded, increase the slippage and try again.": "Slippage tolerance exceeded, increase the slippage and try again.",
+  "Slow": "Slow",
   "Solana": "Solana",
   "Some of the required parameters are invalid.": "Some of the required parameters are invalid.",
   "Some of the required parameters are missing.": "Some of the required parameters are missing.",
@@ -439,11 +454,13 @@
   "That's it!": "That's it!",
   "The active account does not support Bitcoin.": "The active account does not support Bitcoin.",
   "The amount cannot be lower than the bridging fee": "The amount cannot be lower than the bridging fee",
+  "The base fee is set by the network and changes frequently. Any difference between the set max base fee and the actual base fee will be refunded.": "The base fee is set by the network and changes frequently. Any difference between the set max base fee and the actual base fee will be refunded.",
   "The bridging fee is unknown": "The bridging fee is unknown",
   "The export process could not be completed. Please try again.": "The export process could not be completed. Please try again.",
   "The field is required": "The field is required",
   "The key you entered is invalid. Please try again": "The key you entered is invalid. Please try again",
   "The operation either timed out or was not allowed. Please try again.": "The operation either timed out or was not allowed. Please try again.",
+  "The priority fee is an incentive paid to network operators to prioritize processing of this transaction.": "The priority fee is an incentive paid to network operators to prioritize processing of this transaction.",
   "The recovery phrase your entered is invalid. Please double check for spelling mistakes or the order of each word": "The recovery phrase your entered is invalid. Please double check for spelling mistakes or the order of each word",
   "The transaction has been reverted": "The transaction has been reverted",
   "The transaction timed out": "The transaction timed out",
@@ -473,6 +490,9 @@
   "Token": "Token",
   "TokenSets": "TokenSets",
   "Total balance": "Total balance",
+  "Total network fee": "Total network fee",
+  "Total network fee = (current base fee + max priority fee) × gas limit. It will never be higher than max base fee × gas limit.": "Total network fee = (current base fee + max priority fee) × gas limit. It will never be higher than max base fee × gas limit.",
+  "Total units of gas needed to complete the transaction. Editing is not possible at this time.": "Total units of gas needed to complete the transaction. Editing is not possible at this time.",
   "Transaction has been blocked": "Transaction has been blocked",
   "Transaction has been cancelled": "Transaction has been cancelled",
   "Transaction has been rejected": "Transaction has been rejected",

apps/next/src/pages/Approve/components/ActionDetails/evm/EvmActionDetails.tsx

@@ -6,12 +6,16 @@ import { ActionDetailsProps } from '../../../types';
 import { DetailsSection } from '../generic/DetailsSection';
 import { DetailsItem } from '../generic/DetailsItem';
 import { TransactionBalanceChange } from '../generic/TransactionBalanceChange/TransactionBalanceChange';
+import { EvmNetworkFeeWidget } from './EvmNetworkFeeWidget/EvmNetworkFeeWidget';
 
 type EvmActionDetailsProps = Omit<ActionDetailsProps, 'network'> & {
   network: EvmNetwork;
 };
 
-export const EvmActionDetails = ({ action }: EvmActionDetailsProps) => {
+export const EvmActionDetails = ({
+  action,
+  network,
+}: EvmActionDetailsProps) => {
   return (
     <Stack gap={1}>
       {action.displayData.balanceChange && (
@@ -28,6 +32,9 @@ export const EvmActionDetails = ({ action }: EvmActionDetailsProps) => {
           ))}
         </DetailsSection>
       ))}
+      {action.displayData.networkFeeSelector && (
+        <EvmNetworkFeeWidget action={action} network={network} />
+      )}
     </Stack>
   );
 };

apps/next/src/pages/Approve/components/ActionDetails/evm/EvmNetworkFeeWidget/EvmNetworkFeeWidget.tsx

@@ -0,0 +1,72 @@
+import { DisplayData } from '@avalabs/vm-module-types';
+import { Fade, Stack, Typography } from '@avalabs/k2-alpine';
+
+import { Action, EvmNetwork } from '@core/types';
+
+import { DetailsSection } from '../../generic/DetailsSection';
+import { TotalFeeAmount } from '../../generic/NetworkFee';
+
+import { GaslessSwitchRow } from './components/GaslessSwitch';
+import { useEvmTransactionFee } from './hooks/useEvmTransactionFee';
+import { FeePresetSelector } from './components';
+import { useTranslation } from 'react-i18next';
+
+type EvmNetworkFeeWidgetProps = {
+  action: Action<DisplayData>;
+  network: EvmNetwork;
+};
+
+export const EvmNetworkFeeWidget = ({
+  action,
+  network,
+}: EvmNetworkFeeWidgetProps) => {
+  const { t } = useTranslation();
+  const {
+    gasLimit,
+    feePreset,
+    choosePreset,
+    fee,
+    nativeToken,
+    customPreset,
+    feeDecimals,
+    isLoading,
+    hasEnoughForNetworkFee,
+  } = useEvmTransactionFee({
+    action,
+    network,
+  });
+
+  return (
+    <Stack gap={1}>
+      <DetailsSection>
+        <GaslessSwitchRow />
+        <Stack gap={1}>
+          {!isLoading && (
+            <>
+              <FeePresetSelector
+                feePreset={feePreset}
+                customPreset={customPreset}
+                choosePreset={choosePreset}
+                nativeToken={nativeToken}
+                gasLimit={gasLimit}
+                feeDecimals={feeDecimals}
+              />
+              <TotalFeeAmount
+                fee={fee.feeUnit.toString()}
+                symbol={nativeToken?.symbol || ''}
+                currencyValue={fee.feeUSD ?? 0}
+              />
+            </>
+          )}
+        </Stack>
+      </DetailsSection>
+      <Fade in={!isLoading && Boolean(nativeToken) && !hasEnoughForNetworkFee}>
+        <Stack textAlign="center">
+          <Typography variant="caption" color="error.main">
+            {t('Insufficient balance for fee')}
+          </Typography>
+        </Stack>
+      </Fade>
+    </Stack>
+  );
+};