@lifi/widget 4.1.0 → 4.3.0

package/dist/esm/utils/token.js

@@ -1,6 +1,24 @@
 import { getConfigItemSets, isFormItemAllowed } from "./item.js";
 //#region src/utils/token.ts
 /**
+* Builds per-chain sets of lowercase token addresses from the
+* `tokens.verified` config allowlist.
+*/
+const getVerifiedTokensSets = (configTokens) => {
+	if (!configTokens?.verified?.length) return;
+	const sets = /* @__PURE__ */ new Map();
+	for (const token of configTokens.verified) {
+		const chainId = Number(token.chainId);
+		let addresses = sets.get(chainId);
+		if (!addresses) {
+			addresses = /* @__PURE__ */ new Set();
+			sets.set(chainId, addresses);
+		}
+		addresses.add(token.address.toLowerCase());
+	}
+	return sets;
+};
+/**
 * Merges verified tokens with search tokens.
 * Verified tokens take priority - search tokens are only added if they don't already exist.
 */
@@ -41,11 +59,28 @@ const filterAllowedTokens = (dataTokens, configTokens, chainsConfig, formType) =
 	const allChainIds = Array.from(/* @__PURE__ */ new Set([...includedTokens.map((t) => t.chainId), ...Object.keys(dataTokens)])).map((chainId) => Number(chainId));
 	const configChainIdsSet = getConfigItemSets(chainsConfig, (chainIds) => new Set(chainIds), formType);
 	const allowedChainIds = configChainIdsSet ? allChainIds.filter((chainId) => isFormItemAllowed(chainId, configChainIdsSet, formType)) : allChainIds;
+	const verifiedTokensSets = getVerifiedTokensSets(configTokens);
 	const allowedTokensByChain = {};
 	for (const chainId of allowedChainIds) {
-		const chainTokens = [...dataTokens[chainId], ...includedTokens.filter((t) => Number(t.chainId) === chainId)];
+		const chainIncludedTokens = includedTokens.filter((t) => Number(t.chainId) === chainId);
+		const includedAddresses = new Set(chainIncludedTokens.map((t) => t.address.toLowerCase()));
 		const allowedAddresses = getConfigItemSets(configTokens, (tokens) => new Set(tokens.filter((t) => Number(t.chainId) === chainId).map((t) => t.address.toLowerCase())), formType);
-		allowedTokensByChain[chainId] = chainTokens.filter((token) => isFormItemAllowed(token, allowedAddresses, formType, (t) => t.address.toLowerCase()));
+		const verifiedAddresses = verifiedTokensSets?.get(chainId);
+		const chainTokens = [...dataTokens[chainId] ?? [], ...chainIncludedTokens];
+		const filtered = [];
+		const seenAddresses = /* @__PURE__ */ new Set();
+		for (const token of chainTokens) {
+			const address = token.address.toLowerCase();
+			if (seenAddresses.has(address)) continue;
+			seenAddresses.add(address);
+			if (!isFormItemAllowed(token, allowedAddresses, formType, (t) => t.address.toLowerCase())) continue;
+			if (!token.verified && (includedAddresses.has(address) || verifiedAddresses?.has(address))) filtered.push({
+				...token,
+				verified: true
+			});
+			else filtered.push(token);
+		}
+		allowedTokensByChain[chainId] = filtered;
 	}
 	return allowedTokensByChain;
 };
@@ -54,6 +89,6 @@ const getExecutionToToken = (route) => ({
 	amount: BigInt(route.steps.at(-1)?.execution?.toAmount ?? route.steps.at(-1)?.estimate.toAmount ?? route.toAmount)
 });
 //#endregion
-export { filterAllowedTokens, getExecutionToToken, mergeVerifiedWithSearchTokens, updateTokenInCache };
+export { filterAllowedTokens, getExecutionToToken, getVerifiedTokensSets, mergeVerifiedWithSearchTokens, updateTokenInCache };
 
 //# sourceMappingURL=token.js.map

package/dist/esm/utils/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","names":[],"sources":["../../../src/utils/token.ts"],"sourcesContent":["import type {\n  BaseToken,\n  RouteExtended,\n  Token,\n  TokenAmount,\n  TokenExtended,\n} from '@lifi/sdk'\nimport type { FormType } from '../stores/form/types.js'\nimport type { TokensByChain } from '../types/token.js'\nimport type { WidgetChains, WidgetTokens } from '../types/widget.js'\nimport { getConfigItemSets, isFormItemAllowed } from './item.js'\n\n/**\n * Merges verified tokens with search tokens.\n * Verified tokens take priority - search tokens are only added if they don't already exist.\n */\nexport const mergeVerifiedWithSearchTokens = (\n  verifiedTokens?: TokensByChain,\n  searchTokens?: TokensByChain\n): TokensByChain | undefined => {\n  if (!verifiedTokens) {\n    return searchTokens\n  }\n  if (!searchTokens) {\n    return verifiedTokens\n  }\n\n  const result = { ...verifiedTokens }\n\n  for (const [chainId, tokens] of Object.entries(searchTokens)) {\n    const chainIdNum = Number(chainId)\n    const existingTokens = result[chainIdNum] || []\n    const existingAddresses = new Set(\n      existingTokens.map((t) => t.address.toLowerCase())\n    )\n\n    const newTokens = tokens.filter(\n      (t) => !existingAddresses.has(t.address.toLowerCase())\n    )\n\n    if (newTokens.length) {\n      result[chainIdNum] = [...existingTokens, ...newTokens]\n    }\n  }\n\n  return result\n}\n\n/**\n * Updates a token in the cache by chainId and address.\n * Returns a new cache object with the token updated, or the original if not found.\n */\nexport const updateTokenInCache = (\n  data: TokensByChain | undefined,\n  token: Token\n): TokensByChain | undefined => {\n  if (!data) {\n    return data\n  }\n  const chainTokens = data[token.chainId]\n  if (!chainTokens) {\n    return data\n  }\n  const index = chainTokens.findIndex((t) => t.address === token.address)\n  if (index < 0) {\n    return data\n  }\n  return {\n    ...data,\n    [token.chainId]: chainTokens.map((t, i) =>\n      i === index ? { ...t, ...token } : t\n    ),\n  }\n}\n\nexport const filterAllowedTokens = (\n  dataTokens: { [chainId: number]: TokenExtended[] } | undefined,\n  configTokens?: WidgetTokens,\n  chainsConfig?: WidgetChains,\n  formType?: FormType\n): { [chainId: number]: TokenExtended[] } | undefined => {\n  if (!dataTokens) {\n    return\n  }\n\n  const includedTokens = configTokens?.include || []\n  const allChainIds = Array.from(\n    new Set([\n      ...includedTokens.map((t) => t.chainId),\n      ...Object.keys(dataTokens),\n    ])\n  ).map((chainId) => Number(chainId))\n\n  const configChainIdsSet = getConfigItemSets(\n    chainsConfig,\n    (chainIds: number[]) => new Set(chainIds),\n    formType\n  )\n\n  const allowedChainIds = configChainIdsSet\n    ? allChainIds.filter((chainId) =>\n        isFormItemAllowed(chainId, configChainIdsSet, formType)\n      )\n    : allChainIds\n\n  const allowedTokensByChain: { [chainId: number]: TokenExtended[] } = {}\n  for (const chainId of allowedChainIds) {\n    const chainTokens = [\n      ...dataTokens[chainId],\n      ...includedTokens.filter((t) => Number(t.chainId) === chainId),\n    ]\n\n    const allowedAddresses = getConfigItemSets(\n      configTokens,\n      (tokens: BaseToken[]) =>\n        new Set(\n          tokens\n            .filter((t) => Number(t.chainId) === chainId)\n            .map((t) => t.address.toLowerCase())\n        ),\n      formType\n    )\n\n    const filtered = chainTokens.filter((token) =>\n      isFormItemAllowed(token, allowedAddresses, formType, (t) =>\n        t.address.toLowerCase()\n      )\n    )\n\n    allowedTokensByChain[chainId] = filtered\n  }\n\n  return allowedTokensByChain\n}\n\nexport const getExecutionToToken = (route: RouteExtended): TokenAmount => ({\n  ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n  amount: BigInt(\n    route.steps.at(-1)?.execution?.toAmount ??\n      route.steps.at(-1)?.estimate.toAmount ??\n      route.toAmount\n  ),\n})\n"],"mappings":";;;;;;AAgBA,MAAa,iCACX,gBACA,iBAC8B;CAC9B,IAAI,CAAC,gBACH,OAAO;CAET,IAAI,CAAC,cACH,OAAO;CAGT,MAAM,SAAS,EAAE,GAAG,eAAe;CAEnC,KAAK,MAAM,CAAC,SAAS,WAAW,OAAO,QAAQ,YAAY,GAAG;EAC5D,MAAM,aAAa,OAAO,OAAO;EACjC,MAAM,iBAAiB,OAAO,eAAe,CAAC;EAC9C,MAAM,oBAAoB,IAAI,IAC5B,eAAe,KAAK,MAAM,EAAE,QAAQ,YAAY,CAAC,CACnD;EAEA,MAAM,YAAY,OAAO,QACtB,MAAM,CAAC,kBAAkB,IAAI,EAAE,QAAQ,YAAY,CAAC,CACvD;EAEA,IAAI,UAAU,QACZ,OAAO,cAAc,CAAC,GAAG,gBAAgB,GAAG,SAAS;CAEzD;CAEA,OAAO;AACT;;;;;AAMA,MAAa,sBACX,MACA,UAC8B;CAC9B,IAAI,CAAC,MACH,OAAO;CAET,MAAM,cAAc,KAAK,MAAM;CAC/B,IAAI,CAAC,aACH,OAAO;CAET,MAAM,QAAQ,YAAY,WAAW,MAAM,EAAE,YAAY,MAAM,OAAO;CACtE,IAAI,QAAQ,GACV,OAAO;CAET,OAAO;EACL,GAAG;GACF,MAAM,UAAU,YAAY,KAAK,GAAG,MACnC,MAAM,QAAQ;GAAE,GAAG;GAAG,GAAG;EAAM,IAAI,CACrC;CACF;AACF;AAEA,MAAa,uBACX,YACA,cACA,cACA,aACuD;CACvD,IAAI,CAAC,YACH;CAGF,MAAM,iBAAiB,cAAc,WAAW,CAAC;CACjD,MAAM,cAAc,MAAM,qBACxB,IAAI,IAAI,CACN,GAAG,eAAe,KAAK,MAAM,EAAE,OAAO,GACtC,GAAG,OAAO,KAAK,UAAU,CAC3B,CAAC,CACH,CAAC,CAAC,KAAK,YAAY,OAAO,OAAO,CAAC;CAElC,MAAM,oBAAoB,kBACxB,eACC,aAAuB,IAAI,IAAI,QAAQ,GACxC,QACF;CAEA,MAAM,kBAAkB,oBACpB,YAAY,QAAQ,YAClB,kBAAkB,SAAS,mBAAmB,QAAQ,CACxD,IACA;CAEJ,MAAM,uBAA+D,CAAC;CACtE,KAAK,MAAM,WAAW,iBAAiB;EACrC,MAAM,cAAc,CAClB,GAAG,WAAW,UACd,GAAG,eAAe,QAAQ,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,CAC/D;EAEA,MAAM,mBAAmB,kBACvB,eACC,WACC,IAAI,IACF,OACG,QAAQ,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,CAAC,CAC5C,KAAK,MAAM,EAAE,QAAQ,YAAY,CAAC,CACvC,GACF,QACF;EAQA,qBAAqB,WANJ,YAAY,QAAQ,UACnC,kBAAkB,OAAO,kBAAkB,WAAW,MACpD,EAAE,QAAQ,YAAY,CACxB,CAGqC;CACzC;CAEA,OAAO;AACT;AAEA,MAAa,uBAAuB,WAAuC;CACzE,GAAI,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,WAAW,WAAW,MAAM;CACpD,QAAQ,OACN,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,WAAW,YAC7B,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,SAAS,YAC7B,MAAM,QACV;AACF"}
+{"version":3,"file":"token.js","names":[],"sources":["../../../src/utils/token.ts"],"sourcesContent":["import type { BaseToken, RouteExtended, Token, TokenAmount } from '@lifi/sdk'\nimport type { FormType } from '../stores/form/types.js'\nimport type { TokensByChain, TokenWithVerified } from '../types/token.js'\nimport type { WidgetChains, WidgetTokens } from '../types/widget.js'\nimport { getConfigItemSets, isFormItemAllowed } from './item.js'\n\n/**\n * Builds per-chain sets of lowercase token addresses from the\n * `tokens.verified` config allowlist.\n */\nexport const getVerifiedTokensSets = (\n  configTokens?: WidgetTokens\n): Map<number, Set<string>> | undefined => {\n  if (!configTokens?.verified?.length) {\n    return undefined\n  }\n  const sets = new Map<number, Set<string>>()\n  for (const token of configTokens.verified) {\n    const chainId = Number(token.chainId)\n    let addresses = sets.get(chainId)\n    if (!addresses) {\n      addresses = new Set()\n      sets.set(chainId, addresses)\n    }\n    addresses.add(token.address.toLowerCase())\n  }\n  return sets\n}\n\n/**\n * Merges verified tokens with search tokens.\n * Verified tokens take priority - search tokens are only added if they don't already exist.\n */\nexport const mergeVerifiedWithSearchTokens = (\n  verifiedTokens?: TokensByChain,\n  searchTokens?: TokensByChain\n): TokensByChain | undefined => {\n  if (!verifiedTokens) {\n    return searchTokens\n  }\n  if (!searchTokens) {\n    return verifiedTokens\n  }\n\n  const result = { ...verifiedTokens }\n\n  for (const [chainId, tokens] of Object.entries(searchTokens)) {\n    const chainIdNum = Number(chainId)\n    const existingTokens = result[chainIdNum] || []\n    const existingAddresses = new Set(\n      existingTokens.map((t) => t.address.toLowerCase())\n    )\n\n    const newTokens = tokens.filter(\n      (t) => !existingAddresses.has(t.address.toLowerCase())\n    )\n\n    if (newTokens.length) {\n      result[chainIdNum] = [...existingTokens, ...newTokens]\n    }\n  }\n\n  return result\n}\n\n/**\n * Updates a token in the cache by chainId and address.\n * Returns a new cache object with the token updated, or the original if not found.\n */\nexport const updateTokenInCache = (\n  data: TokensByChain | undefined,\n  token: Token\n): TokensByChain | undefined => {\n  if (!data) {\n    return data\n  }\n  const chainTokens = data[token.chainId]\n  if (!chainTokens) {\n    return data\n  }\n  const index = chainTokens.findIndex((t) => t.address === token.address)\n  if (index < 0) {\n    return data\n  }\n  return {\n    ...data,\n    [token.chainId]: chainTokens.map((t, i) =>\n      i === index ? { ...t, ...token } : t\n    ),\n  }\n}\n\nexport const filterAllowedTokens = (\n  dataTokens: TokensByChain | undefined,\n  configTokens?: WidgetTokens,\n  chainsConfig?: WidgetChains,\n  formType?: FormType\n): TokensByChain | undefined => {\n  if (!dataTokens) {\n    return\n  }\n\n  const includedTokens = configTokens?.include || []\n  const allChainIds = Array.from(\n    new Set([\n      ...includedTokens.map((t) => t.chainId),\n      ...Object.keys(dataTokens),\n    ])\n  ).map((chainId) => Number(chainId))\n\n  const configChainIdsSet = getConfigItemSets(\n    chainsConfig,\n    (chainIds: number[]) => new Set(chainIds),\n    formType\n  )\n\n  const allowedChainIds = configChainIdsSet\n    ? allChainIds.filter((chainId) =>\n        isFormItemAllowed(chainId, configChainIdsSet, formType)\n      )\n    : allChainIds\n\n  const verifiedTokensSets = getVerifiedTokensSets(configTokens)\n\n  const allowedTokensByChain: TokensByChain = {}\n  for (const chainId of allowedChainIds) {\n    const chainIncludedTokens = includedTokens.filter(\n      (t) => Number(t.chainId) === chainId\n    )\n    const includedAddresses = new Set(\n      chainIncludedTokens.map((t) => t.address.toLowerCase())\n    )\n\n    const allowedAddresses = getConfigItemSets(\n      configTokens,\n      (tokens: BaseToken[]) =>\n        new Set(\n          tokens\n            .filter((t) => Number(t.chainId) === chainId)\n            .map((t) => t.address.toLowerCase())\n        ),\n      formType\n    )\n\n    const verifiedAddresses = verifiedTokensSets?.get(chainId)\n\n    const chainTokens: TokenWithVerified[] = [\n      ...(dataTokens[chainId] ?? []),\n      ...chainIncludedTokens,\n    ]\n\n    const filtered: TokenWithVerified[] = []\n    const seenAddresses = new Set<string>()\n    for (const token of chainTokens) {\n      const address = token.address.toLowerCase()\n      // Data tokens come first and win over include duplicates,\n      // keeping their extended data\n      if (seenAddresses.has(address)) {\n        continue\n      }\n      seenAddresses.add(address)\n      if (\n        !isFormItemAllowed(token, allowedAddresses, formType, (t) =>\n          t.address.toLowerCase()\n        )\n      ) {\n        continue\n      }\n      // Include and verified-allowlist tokens are explicitly set by the\n      // integrator, mark them as verified\n      if (\n        !token.verified &&\n        (includedAddresses.has(address) || verifiedAddresses?.has(address))\n      ) {\n        filtered.push({ ...token, verified: true })\n      } else {\n        filtered.push(token)\n      }\n    }\n\n    allowedTokensByChain[chainId] = filtered\n  }\n\n  return allowedTokensByChain\n}\n\nexport const getExecutionToToken = (route: RouteExtended): TokenAmount => ({\n  ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n  amount: BigInt(\n    route.steps.at(-1)?.execution?.toAmount ??\n      route.steps.at(-1)?.estimate.toAmount ??\n      route.toAmount\n  ),\n})\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -34,22 +34,22 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^4.0.0",
-    "@mui/icons-material": "^9.1.1",
-    "@mui/material": "^9.1.1",
-    "@mui/system": "^9.1.1",
-    "@tanstack/react-router": "^1.170.16",
-    "@tanstack/react-virtual": "^3.14.3",
+    "@lifi/sdk": "^4.1.0",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@mui/system": "^9.2.0",
+    "@tanstack/react-router": "^1.170.17",
+    "@tanstack/react-virtual": "^3.14.5",
     "eventemitter3": "^5.0.4",
-    "i18next": "^26.3.1",
+    "i18next": "^26.3.4",
     "microdiff": "^1.5.0",
-    "motion": "^12.38.0",
+    "motion": "^12.42.2",
     "react-i18next": "^17.0.8",
     "react-intersection-observer": "^10.0.3",
     "react-transition-group": "^4.4.5",
     "zustand": "^5.0.14",
-    "@lifi/widget-provider": "4.1.0",
-    "@lifi/wallet-management": "4.1.0"
+    "@lifi/wallet-management": "4.1.1",
+    "@lifi/widget-provider": "4.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.90.0",

package/src/AppDefault.tsx

@@ -12,6 +12,7 @@ import { NotFound } from './components/NotFound.js'
 import { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'
 import { LanguagesPage } from './pages/LanguagesPage.js'
 import { MainPage } from './pages/MainPage/MainPage.js'
+import { RoutePriorityPage } from './pages/RoutePriorityPage.js'
 import { RoutesPage } from './pages/RoutesPage/RoutesPage.js'
 import { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'
 import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'
@@ -22,6 +23,7 @@ import { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'
 import { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'
 import { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'
 import { SettingsPage } from './pages/SettingsPage/SettingsPage.js'
+import { SlippagePage } from './pages/SettingsPage/SlippageSettings/SlippagePage.js'
 import { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'
 import { TransactionPage } from './pages/TransactionPage/TransactionPage.js'
 import { navigationRoutes } from './utils/navigationRoutes.js'
@@ -66,6 +68,18 @@ const settingsLanguagesRoute = createRoute({
   component: LanguagesPage,
 })
 
+const settingsRoutePriorityRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.routePriority,
+  component: RoutePriorityPage,
+})
+
+const settingsSlippageRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.slippage,
+  component: SlippagePage,
+})
+
 const fromTokenLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: navigationRoutes.fromToken,
@@ -214,6 +228,8 @@ const routeTree = rootRoute.addChildren([
   settingsLayoutRoute.addChildren([
     settingsIndexRoute,
     settingsLanguagesRoute,
+    settingsRoutePriorityRoute,
+    settingsSlippageRoute,
     settingsBridgesRoute,
     settingsExchangesRoute,
   ]),

package/src/components/AmountInput/AmountInputEndAdornment.style.ts

@@ -18,5 +18,5 @@ export const AmountInputButton: React.FC<
   fontWeight: 700,
   lineHeight: 1.3334,
   height: 'auto',
-  borderRadius: theme.shape.borderRadiusSecondary,
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
 }))

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,4 +1,5 @@
 import { formatUnits } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
 import type React from 'react'
 import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -25,6 +26,9 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       FormKeyHelper.getTokenKey(formType)
     )
 
+    const chain = getChainById(chainId)
+    const { account } = useAccount({ chainType: chain?.chainType })
+
     // We get gas recommendations for the source chain to make sure that after pressing the Max button
     // the user will have enough funds remaining to cover gas costs
     const { data } = useGasRecommendation(chainId)
@@ -35,7 +39,6 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       if (!token?.amount) {
         return 0n
       }
-      const chain = getChainById(chainId)
       let maxAmount = token.amount
       if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
         const recommendedAmount = BigInt(data.recommended.amount)
@@ -73,7 +76,7 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       }
     }
 
-    if (formType !== 'from' || !token) {
+    if (formType !== 'from' || !token || !account?.isConnected) {
       return null
     }
 

package/src/components/AmountInputCard/AmountInputCard.style.tsx

@@ -0,0 +1,157 @@
+import {
+  Box,
+  ButtonBase,
+  InputBase,
+  inputBaseClasses,
+  styled,
+  Typography,
+} from '@mui/material'
+import type React from 'react'
+import type { FormType } from '../../stores/form/types.js'
+import { InputCard } from '../Card/InputCard.js'
+
+export const maxInputFontSize = 30
+export const minInputFontSize = 20
+export const amountHeight = 32
+export const footerFontSize = 12
+
+export const AmountCard: React.FC<
+  React.ComponentProps<typeof InputCard> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(InputCard, {
+  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
+})<{ formType?: FormType; mask?: boolean }>(
+  ({ theme, formType, mask = true }) => {
+    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+    // Notch faces the swap button between the stacked cards: bottom edge for the
+    // top (send) card, top edge for the bottom (receive) card.
+    const vertical = formType === 'to' ? '-4px' : 'calc(100% + 4px)'
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1.5),
+      padding: theme.spacing(2),
+      ...(cardVariant !== 'outlined' &&
+        mask && {
+          mask: `radial-gradient(circle 22px at 50% ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
+        }),
+    }
+  }
+)
+
+export const CardHeaderRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: 0,
+  height: theme.spacing(2),
+}))
+
+export const CardBodyRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+}))
+
+export const CardFooterRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: theme.spacing(2),
+}))
+
+export const LargeInput: React.FC<React.ComponentProps<typeof InputBase>> =
+  styled(InputBase)(({ theme }) => ({
+    fontSize: maxInputFontSize,
+    fontWeight: 700,
+    lineHeight: 1.4,
+    height: amountHeight,
+    flex: 1,
+    minWidth: 0,
+    boxShadow: 'none',
+    [`.${inputBaseClasses.input}`]: {
+      height: amountHeight,
+      padding: 0,
+    },
+    [`.${inputBaseClasses.input}::placeholder`]: {
+      color: theme.vars.palette.text.primary,
+      opacity: 0.5,
+    },
+    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
+      {
+        WebkitAppearance: 'none',
+        margin: 0,
+      },
+    '& input[type="number"]': {
+      MozAppearance: 'textfield',
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+      color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+      WebkitTextFillColor: 'unset',
+    },
+  }))
+
+export const AmountDisplay: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(() => ({
+    fontSize: maxInputFontSize,
+    fontWeight: 700,
+    lineHeight: 1.4,
+    height: amountHeight,
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    minWidth: 0,
+    overflow: 'visible',
+    whiteSpace: 'nowrap',
+  }))
+
+export const FooterText: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: footerFontSize,
+    fontWeight: 500,
+    lineHeight: 1,
+    color: theme.vars.palette.text.secondary,
+  }))
+
+export const CardContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+}))
+
+export const ToggleButton: React.FC<
+  React.ComponentProps<typeof ButtonBase> & { clickable?: boolean }
+> = styled(ButtonBase, {
+  shouldForwardProp: (prop) => prop !== 'clickable',
+})<{ clickable?: boolean }>(({ theme, clickable }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.25),
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+  marginLeft: theme.spacing(-0.75),
+  backgroundColor: 'transparent',
+  ...(clickable
+    ? {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+        },
+      }
+    : {
+        cursor: 'default',
+        pointerEvents: 'none',
+      }),
+}))

package/src/components/AmountInputCard/AmountInputCardPair.tsx

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@mui/material'
+import type React from 'react'
+import type { JSX } from 'react'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'
+import { SwapButton } from '../SwapButton/SwapButton.js'
+import { CardContainer } from './AmountInputCard.style.js'
+import { ReceiveAmountCard } from './ReceiveAmountCard.js'
+import { SendAmountCard } from './SendAmountCard.js'
+
+export const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {
+  // Refuel's destination is fixed to native gas, so reversing from/to is
+  // meaningless — hide the swap button (and the notch mask it sits in).
+  const { mode } = useWidgetConfig()
+  const showSwapButton = mode !== 'refuel'
+
+  return (
+    <CardContainer {...props}>
+      {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}
+      <SendAmountCard mask={showSwapButton} />
+      <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />
+      <ReceiveAmountCard mask={showSwapButton} />
+    </CardContainer>
+  )
+}

package/src/components/AmountInputCard/BalanceDisplay.style.tsx

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const BalanceContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+  }))

package/src/components/AmountInputCard/BalanceDisplay.tsx

@@ -0,0 +1,46 @@
+import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
+import { Skeleton } from '@mui/material'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { FooterText, footerFontSize } from './AmountInputCard.style.js'
+import { BalanceContainer } from './BalanceDisplay.style.js'
+
+export const BalanceDisplay: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+    if (isLoading && tokenAddress) {
+      return (
+        <Skeleton variant="text" width={72} sx={{ fontSize: footerFontSize }} />
+      )
+    }
+
+    if (!token?.amount) {
+      return null
+    }
+
+    const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+
+    return (
+      <BalanceContainer>
+        <FooterText title={tokenAmount}>
+          {t('format.tokenAmount', { value: tokenAmount })}
+        </FooterText>
+        <AccountBalanceWalletOutlinedIcon
+          sx={{ fontSize: 16, color: 'text.secondary' }}
+        />
+      </BalanceContainer>
+    )
+  }
+)

package/src/components/AmountInputCard/FiatValueToggle.tsx

@@ -0,0 +1,55 @@
+import SwapVertIcon from '@mui/icons-material/SwapVert'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToken } from '../../hooks/useToken.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import { formatTokenPrice } from '../../utils/format.js'
+import { FooterText, ToggleButton } from './AmountInputCard.style.js'
+
+export const FiatValueToggle: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element => {
+    const { t } = useTranslation()
+    const [chainId, tokenAddress, amount] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+      FormKeyHelper.getAmountKey(formType)
+    )
+
+    const { token } = useToken(chainId, tokenAddress)
+    const { inputMode, toggleInputMode } = useInputModeStore()
+    const currentInputMode = inputMode[formType]
+
+    const handleToggle = (e: React.MouseEvent): void => {
+      e.stopPropagation()
+      toggleInputMode(formType)
+    }
+
+    const canToggle = !!token?.priceUSD
+
+    const displayValue =
+      currentInputMode === 'amount'
+        ? t('format.currency', {
+            value: formatTokenPrice(amount, token?.priceUSD, token?.decimals),
+          })
+        : t('format.tokenAmount', { value: amount || '0' })
+
+    return (
+      <ToggleButton
+        clickable={canToggle}
+        onClick={canToggle ? handleToggle : undefined}
+        aria-label={canToggle ? 'Toggle fiat value' : undefined}
+      >
+        <FooterText>{displayValue}</FooterText>
+        {currentInputMode === 'price' && token?.symbol ? (
+          <FooterText>{token.symbol}</FooterText>
+        ) : null}
+        {canToggle ? (
+          <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
+        ) : null}
+      </ToggleButton>
+    )
+  }
+)

package/src/components/AmountInputCard/PercentageChips.style.tsx

@@ -0,0 +1,60 @@
+import { Box, Button, styled } from '@mui/material'
+import { cardClasses } from '@mui/material/Card'
+import type React from 'react'
+
+const chipCount = 4
+const staggerStepMs = 25
+
+const revealStagger = Object.fromEntries(
+  Array.from({ length: chipCount }, (_, index) => [
+    `&[data-delay="${index}"]`,
+    {
+      [`.${cardClasses.root}:hover &`]: {
+        opacity: 1,
+        transform: 'scale(1) translateX(0)',
+        pointerEvents: 'auto',
+        transitionDelay: `${(chipCount - 1 - index) * staggerStepMs}ms`,
+      },
+      [`.${cardClasses.root}:not(:hover) &`]: {
+        transitionDelay: `${index * staggerStepMs}ms`,
+      },
+    },
+  ])
+)
+
+export const ChipContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+}))
+
+export const Chip: React.FC<React.ComponentProps<typeof Button>> = styled(
+  Button
+)(({ theme }) => ({
+  minWidth: 0,
+  padding: theme.spacing(0.5, 1.5),
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  color: theme.vars.palette.text.primary,
+  transition:
+    'opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease',
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  },
+  // Reveal-on-hover — only on devices that support hover. On touch there is no
+  // hover, so the chips stay permanently visible (the default above) instead of
+  // becoming an unreachable dead row.
+  '@media (hover: hover)': {
+    opacity: 0,
+    transform: 'scale(0.85) translateX(10px)',
+    pointerEvents: 'none',
+    ...revealStagger,
+    '@media (prefers-reduced-motion: reduce)': {
+      transform: 'none !important',
+      transitionDelay: '0ms !important',
+    },
+  },
+}))