feat(ng): evm tx fee widget (#406)

Author: meeh0w

apps/legacy/package.json

@@ -15,9 +15,9 @@
     "typecheck": "yarn tsc --skipLibCheck --noEmit"
   },
   "dependencies": {
-    "@avalabs/avalanche-module": "1.9.10",
+    "@avalabs/avalanche-module": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@avalabs/avalanchejs": "5.1.0-alpha.2",
-    "@avalabs/bitcoin-module": "1.9.10",
+    "@avalabs/bitcoin-module": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@avalabs/bridge-unified": "4.0.3",
     "@avalabs/core-bridge-sdk": "3.1.0-alpha.60",
     "@avalabs/core-chains-sdk": "3.1.0-alpha.60",
@@ -30,13 +30,13 @@
     "@avalabs/core-token-prices-sdk": "3.1.0-alpha.60",
     "@avalabs/core-utils-sdk": "3.1.0-alpha.60",
     "@avalabs/core-wallets-sdk": "3.1.0-alpha.60",
-    "@avalabs/evm-module": "1.9.10",
+    "@avalabs/evm-module": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@avalabs/glacier-sdk": "3.1.0-alpha.60",
-    "@avalabs/hvm-module": "1.9.10",
+    "@avalabs/hvm-module": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@avalabs/hw-app-avalanche": "0.14.1",
-    "@avalabs/svm-module": "1.9.10",
+    "@avalabs/svm-module": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@avalabs/types": "3.1.0-alpha.60",
-    "@avalabs/vm-module-types": "1.9.10",
+    "@avalabs/vm-module-types": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@blockaid/client": "0.10.0",
     "@coinbase/cbpay-js": "1.6.0",
     "@core/common": "workspace:*",

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

@@ -1046,7 +1046,7 @@
   "Transaction has been cancelled": "Transaction has been cancelled",
   "Transaction has been rejected": "Transaction has been rejected",
   "Transaction has failed": "Transaction has failed",
-  "Transaction pre-exution is unavailable. The displayed token list might be incomplete.": "Transaction pre-exution is unavailable. The displayed token list might be incomplete.",
+  "Transaction pre-execution is unavailable. The displayed token list might be incomplete.": "Transaction pre-execution is unavailable. The displayed token list might be incomplete.",
   "Transaction rejected": "Transaction rejected",
   "Transaction timed out": "Transaction timed out",
   "Transfer": "Transfer",

apps/legacy/src/pages/SignTransaction/components/TxBalanceChange.tsx

@@ -42,7 +42,7 @@ export const TxBalanceChange = ({
         tooltip={
           showNoPreExecWarning
             ? t(
-                'Transaction pre-exution is unavailable. The displayed token list might be incomplete.',
+                'Transaction pre-execution is unavailable. The displayed token list might be incomplete.',
               )
             : ''
         }

apps/next/package.json

@@ -22,7 +22,7 @@
     "@avalabs/core-wallets-sdk": "3.1.0-alpha.60",
     "@avalabs/k2-alpine": "1.228.0",
     "@avalabs/types": "3.1.0-alpha.60",
-    "@avalabs/vm-module-types": "1.9.10",
+    "@avalabs/vm-module-types": "0.0.0-fix-nft-set-approval-for-all-20250829175304",
     "@core/common": "workspace:*",
     "@core/messaging": "workspace:*",
     "@core/service-worker": "workspace:*",

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/components/Forms/InvisibleInput.tsx

@@ -10,14 +10,21 @@ const NAME_INPUT_STYLES = {
   textAlign: 'center',
 } as const;
 
-const InvisibileInput = styled('input')(({ theme }) => ({
+export const InvisibileInput = styled('input')(({ theme }) => ({
   background: 'transparent',
   border: 0,
   paddingInline: theme.spacing(2),
   lineHeight: 1,
   outline: 'none',
   color: theme.palette.text.primary,
   textOverflow: 'ellipsis',
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
+  },
+  'input[type=number]': {
+    '-moz-appearance': 'textfield',
+  },
 }));
 
 export const InvisibleNameInput = styled(InvisibileInput)(NAME_INPUT_STYLES);

apps/next/src/config/constants.ts

@@ -1,3 +1,5 @@
+import { TransactionPriority } from '@core/types';
+
 export const CORE_WEB_BASE_URL =
   process.env.CORE_WEB_BASE_URL ?? 'https://core.app';
 export const BUG_BOUNTIES_URL =
@@ -9,3 +11,6 @@ export const CORE_FEEDBACK_URL =
   'https://docs.google.com/forms/d/e/1FAIpQLSdUQiVnJoqQ1g_6XTREpkSB5vxKKK8ba5DRjhzQf1XVeET8Rw/viewform?usp=pp_url&entry.2070152111=Core%20browser%20extension&entry.903657115=${extensionVersion}&entry.1148340936=${os}';
 
 export const DARK_THEME_SURFACE_COLOR = '#404046';
+
+export const DEFAULT_FEE_PRESET: TransactionPriority = 'low';
+export const DEFAULT_FEE_PRESET_C_CHAIN: TransactionPriority = 'high';

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;
+};