npm - @lifi/widget - Versions diffs - 4.5.0 → 4.6.0 - Mend

@lifi/widget 4.5.0 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/dist/esm/components/Messages/WarningMessages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n route?: Route\n allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n route,\n allowInteraction,\n ...props\n}) => {\n const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n const getMessage = () => {\n switch (messages[0]?.id) {\n case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n return (\n <MissingRouteRequiredAccountMessage\n chain={messages[0].props?.chain}\n address={messages[0].props?.address}\n {...props}\n />\n )\n case 'INSUFFICIENT_FUNDS':\n return <FundsSufficiencyMessage {...props} />\n case 'INSUFFICIENT_GAS':\n return (\n <GasSufficiencyMessage\n insufficientGas={messages[0].props?.insufficientGas}\n {...props}\n />\n )\n case 'MIN_FROM_AMOUNT_USD':\n return (\n <MinFromAmountUSDMessage\n minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n {...props}\n />\n )\n case 'ACCOUNT_NOT_DEPLOYED':\n return <AccountNotDeployedMessage {...props} />\n case 'ACCOUNT_DEPLOYED':\n return <AccountDeployedMessage {...props} />\n default:\n return null\n }\n }\n\n return (\n <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n {getMessage()}\n </Collapse>\n )\n}\n"],"mappings":"~~;;;;;;;;;;AAgBA~~,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,EAAE,EAAE,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,EAAE,CAAC,OAAO;IAC1B,SAAS,SAAS,EAAE,CAAC,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,EAAE,CAAC,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,EAAE,CAAC,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;EACpD,UAAA,WAAW;CACJ,CAAA;AAEd"}
1	+ {"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { UnsupportedToAddressMessage } from './UnsupportedToAddressMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n route?: Route\n allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n route,\n allowInteraction,\n ...props\n}) => {\n const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n const getMessage = () => {\n switch (messages[0]?.id) {\n case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n return (\n <MissingRouteRequiredAccountMessage\n chain={messages[0].props?.chain}\n address={messages[0].props?.address}\n {...props}\n />\n )\n case 'INSUFFICIENT_FUNDS':\n return <FundsSufficiencyMessage {...props} />\n case 'INSUFFICIENT_GAS':\n return (\n <GasSufficiencyMessage\n insufficientGas={messages[0].props?.insufficientGas}\n {...props}\n />\n )\n case 'MIN_FROM_AMOUNT_USD':\n return (\n <MinFromAmountUSDMessage\n minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n {...props}\n />\n )\n case 'ACCOUNT_NOT_DEPLOYED':\n return <AccountNotDeployedMessage {...props} />\n case 'ACCOUNT_DEPLOYED':\n return <AccountDeployedMessage {...props} />\n case 'UNSUPPORTED_TO_ADDRESS':\n return <UnsupportedToAddressMessage {...props} />\n default:\n return null\n }\n }\n\n return (\n <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n {getMessage()}\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,EAAE,EAAE,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,EAAE,CAAC,OAAO;IAC1B,SAAS,SAAS,EAAE,CAAC,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,EAAE,CAAC,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,EAAE,CAAC,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,KAAK,0BACH,OAAO,oBAAC,6BAAD,EAA6B,GAAI,MAAQ,CAAA;GAClD,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;EACpD,UAAA,WAAW;CACJ,CAAA;AAEd"}

package/dist/esm/components/Messages/useMessageQueue.js CHANGED Viewed

@@ -6,13 +6,17 @@ import { useRouteRequiredAccountConnection } from "../../hooks/useRouteRequiredA
 import { useMemo } from "react";
 //#region src/components/Messages/useMessageQueue.ts
 const useMessageQueue = (route, allowInteraction) => {
-	const { requiredToAddress, accountNotDeployedAtDestination, accountDeployedAtDestination, isLoading: isToAddressRequirementsLoading } = useToAddressRequirements(route);
+	const { requiredToAddress, unsupportedReceiverBlocking, accountNotDeployedAtDestination, accountDeployedAtDestination, isLoading: isToAddressRequirementsLoading } = useToAddressRequirements(route);
 	const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } = useFromTokenSufficiency(route);
 	const { insufficientGas, isLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
 	const { missingChain, missingAccountAddress } = useRouteRequiredAccountConnection(route);
 	const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold();
 	const messageQueue = useMemo(() => {
 		const queue = [];
+		if (unsupportedReceiverBlocking) queue.push({
+			id: "UNSUPPORTED_TO_ADDRESS",
+			priority: 7
+		});
 		if (missingChain) queue.push({
 			id: "MISSING_ROUTE_REQUIRED_ACCOUNT",
 			priority: 1,
@@ -51,6 +55,7 @@ const useMessageQueue = (route, allowInteraction) => {
 		accountDeployedAtDestination,
 		accountNotDeployedAtDestination,
 		requiredToAddress,
+		unsupportedReceiverBlocking,
 		missingChain,
 		missingAccountAddress,
 		belowMinFromAmountUSD,

package/dist/esm/components/Messages/useMessageQueue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMessageQueue.js","names":[],"sources":["../../../../src/components/Messages/useMessageQueue.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useMemo } from 'react'\nimport { useFromAmountThreshold } from '../../hooks/useFromAmountThreshold.js'\nimport { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'\nimport { useGasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\n\nexport interface QueuedMessage {\n id: string\n priority: number\n props?: Record<string, any>\n}\n\nexport const useMessageQueue = (\n route?: Route,\n allowInteraction?: boolean\n): {\n messages: QueuedMessage[]\n hasMessages: boolean\n isLoading: boolean\n} => {\n const {\n requiredToAddress,\n accountNotDeployedAtDestination,\n accountDeployedAtDestination,\n isLoading: isToAddressRequirementsLoading,\n } = useToAddressRequirements(route)\n const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =\n useFromTokenSufficiency(route)\n const { insufficientGas, isLoading: isGasSufficiencyLoading } =\n useGasSufficiency(route)\n const { missingChain, missingAccountAddress } =\n useRouteRequiredAccountConnection(route)\n const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold()\n\n const messageQueue = useMemo(() => {\n const queue: QueuedMessage[] = []\n\n if (missingChain) {\n queue.push({\n id: 'MISSING_ROUTE_REQUIRED_ACCOUNT',\n priority: 1,\n props: { chain: missingChain, address: missingAccountAddress },\n })\n }\n\n if (insufficientFromToken) {\n queue.push({\n id: 'INSUFFICIENT_FUNDS',\n priority: 2,\n })\n }\n\n if (belowMinFromAmountUSD) {\n queue.push({\n id: 'MIN_FROM_AMOUNT_USD',\n priority: 3,\n props: { minFromAmountUSD },\n })\n }\n\n if (insufficientGas?.length) {\n queue.push({\n id: 'INSUFFICIENT_GAS',\n priority: 4,\n props: { insufficientGas },\n })\n }\n\n if (accountNotDeployedAtDestination && !allowInteraction) {\n queue.push({\n id: 'ACCOUNT_NOT_DEPLOYED',\n priority: 5,\n })\n }\n\n if (\n requiredToAddress &&\n accountDeployedAtDestination &&\n !allowInteraction\n ) {\n queue.push({\n id: 'ACCOUNT_DEPLOYED',\n priority: 6,\n })\n }\n\n return queue.sort((a, b) => a.priority - b.priority)\n }, [\n allowInteraction,\n insufficientFromToken,\n insufficientGas,\n accountDeployedAtDestination,\n accountNotDeployedAtDestination,\n requiredToAddress,\n missingChain,\n missingAccountAddress,\n belowMinFromAmountUSD,\n minFromAmountUSD,\n ])\n\n return {\n messages: messageQueue,\n hasMessages: messageQueue.length > 0,\n isLoading:\n isGasSufficiencyLoading \|\|\n isFromTokenSufficiencyLoading \|\|\n isToAddressRequirementsLoading,\n }\n}\n"],"mappings":";;;;;;;AAcA,MAAa,mBACX,OACA,qBAKG;CACH,MAAM,EACJ,mBACA,iCACA,8BACA,WAAW,mCACT,yBAAyB,KAAK;CAClC,MAAM,EAAE,uBAAuB,WAAW,kCACxC,wBAAwB,KAAK;CAC/B,MAAM,EAAE,iBAAiB,WAAW,4BAClC,kBAAkB,KAAK;CACzB,MAAM,EAAE,cAAc,0BACpB,kCAAkC,KAAK;CACzC,MAAM,EAAE,uBAAuB,qBAAqB,uBAAuB;CAE3E,MAAM,eAAe,cAAc;EACjC,MAAM,QAAyB,CAAC;EAEhC,IAAI,cACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO;IAAE,OAAO;IAAc,SAAS;GAAsB;EAC/D,CAAC;EAGH,IAAI,uBACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IAAI,uBACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,iBAAiB;EAC5B,CAAC;EAGH,IAAI,iBAAiB,QACnB,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,gBAAgB;EAC3B,CAAC;EAGH,IAAI,mCAAmC,CAAC,kBACtC,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IACE,qBACA,gCACA,CAAC,kBAED,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,OAAO,MAAM,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;CACrD,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO;EACL,UAAU;EACV,aAAa,aAAa,SAAS;EACnC,WACE,2BACA,iCACA;CACJ;AACF"}
1	+ {"version":3,"file":"useMessageQueue.js","names":[],"sources":["../../../../src/components/Messages/useMessageQueue.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useMemo } from 'react'\nimport { useFromAmountThreshold } from '../../hooks/useFromAmountThreshold.js'\nimport { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'\nimport { useGasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\n\nexport interface QueuedMessage {\n id: string\n priority: number\n props?: Record<string, any>\n}\n\nexport const useMessageQueue = (\n route?: Route,\n allowInteraction?: boolean\n): {\n messages: QueuedMessage[]\n hasMessages: boolean\n isLoading: boolean\n} => {\n const {\n requiredToAddress,\n unsupportedReceiverBlocking,\n accountNotDeployedAtDestination,\n accountDeployedAtDestination,\n isLoading: isToAddressRequirementsLoading,\n } = useToAddressRequirements(route)\n const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =\n useFromTokenSufficiency(route)\n const { insufficientGas, isLoading: isGasSufficiencyLoading } =\n useGasSufficiency(route)\n const { missingChain, missingAccountAddress } =\n useRouteRequiredAccountConnection(route)\n const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold()\n\n const messageQueue = useMemo(() => {\n const queue: QueuedMessage[] = []\n\n if (unsupportedReceiverBlocking) {\n queue.push({\n id: 'UNSUPPORTED_TO_ADDRESS',\n priority: 7,\n })\n }\n\n if (missingChain) {\n queue.push({\n id: 'MISSING_ROUTE_REQUIRED_ACCOUNT',\n priority: 1,\n props: { chain: missingChain, address: missingAccountAddress },\n })\n }\n\n if (insufficientFromToken) {\n queue.push({\n id: 'INSUFFICIENT_FUNDS',\n priority: 2,\n })\n }\n\n if (belowMinFromAmountUSD) {\n queue.push({\n id: 'MIN_FROM_AMOUNT_USD',\n priority: 3,\n props: { minFromAmountUSD },\n })\n }\n\n if (insufficientGas?.length) {\n queue.push({\n id: 'INSUFFICIENT_GAS',\n priority: 4,\n props: { insufficientGas },\n })\n }\n\n if (accountNotDeployedAtDestination && !allowInteraction) {\n queue.push({\n id: 'ACCOUNT_NOT_DEPLOYED',\n priority: 5,\n })\n }\n\n if (\n requiredToAddress &&\n accountDeployedAtDestination &&\n !allowInteraction\n ) {\n queue.push({\n id: 'ACCOUNT_DEPLOYED',\n priority: 6,\n })\n }\n\n return queue.sort((a, b) => a.priority - b.priority)\n }, [\n allowInteraction,\n insufficientFromToken,\n insufficientGas,\n accountDeployedAtDestination,\n accountNotDeployedAtDestination,\n requiredToAddress,\n unsupportedReceiverBlocking,\n missingChain,\n missingAccountAddress,\n belowMinFromAmountUSD,\n minFromAmountUSD,\n ])\n\n return {\n messages: messageQueue,\n hasMessages: messageQueue.length > 0,\n isLoading:\n isGasSufficiencyLoading \|\|\n isFromTokenSufficiencyLoading \|\|\n isToAddressRequirementsLoading,\n }\n}\n"],"mappings":";;;;;;;AAcA,MAAa,mBACX,OACA,qBAKG;CACH,MAAM,EACJ,mBACA,6BACA,iCACA,8BACA,WAAW,mCACT,yBAAyB,KAAK;CAClC,MAAM,EAAE,uBAAuB,WAAW,kCACxC,wBAAwB,KAAK;CAC/B,MAAM,EAAE,iBAAiB,WAAW,4BAClC,kBAAkB,KAAK;CACzB,MAAM,EAAE,cAAc,0BACpB,kCAAkC,KAAK;CACzC,MAAM,EAAE,uBAAuB,qBAAqB,uBAAuB;CAE3E,MAAM,eAAe,cAAc;EACjC,MAAM,QAAyB,CAAC;EAEhC,IAAI,6BACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IAAI,cACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO;IAAE,OAAO;IAAc,SAAS;GAAsB;EAC/D,CAAC;EAGH,IAAI,uBACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IAAI,uBACF,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,iBAAiB;EAC5B,CAAC;EAGH,IAAI,iBAAiB,QACnB,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,gBAAgB;EAC3B,CAAC;EAGH,IAAI,mCAAmC,CAAC,kBACtC,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,IACE,qBACA,gCACA,CAAC,kBAED,MAAM,KAAK;GACT,IAAI;GACJ,UAAU;EACZ,CAAC;EAGH,OAAO,MAAM,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;CACrD,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO;EACL,UAAU;EACV,aAAa,aAAa,SAAS;EACnC,WACE,2BACA,iCACA;CACJ;AACF"}

package/dist/esm/components/RouteCard/RouteDetails.js CHANGED Viewed

@@ -28,7 +28,8 @@ const RouteDetails = ({ route }) => {
 	let feePercentage = 0;
 	const feeCollectionStep = route.steps[0].includedSteps.find((includedStep) => includedStep.tool === "feeCollection");
 	if (feeCollectionStep) {
-		feeAmountUSD = formatTokenPrice(BigInt(feeCollectionStep.estimate.fromAmount) - BigInt(feeCollectionStep.estimate.toAmount), feeCollectionStep.action.fromToken.priceUSD, feeCollectionStep.action.fromToken.decimals);
+		const estimatedFromAmount = BigInt(feeCollectionStep.estimate.fromAmount) - BigInt(feeCollectionStep.estimate.toAmount);
+		feeAmountUSD = formatTokenPrice(estimatedFromAmount, feeCollectionStep.action.fromToken.priceUSD, feeCollectionStep.action.fromToken.decimals);
 		feePercentage = feeCollectionStep.estimate.feeCosts?.reduce((percentage, feeCost) => percentage + Number.parseFloat(feeCost.percentage || "0"), 0) ?? 0;
 	}
 	const executionTimeSeconds = Math.floor(route.steps.reduce((duration, step) => duration + step.estimate.executionDuration, 0));

package/dist/esm/components/RouteCard/RouteDetails.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n formatDuration,\n formatTokenAmount,\n formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n DetailInfoIcon,\n DetailLabel,\n DetailLabelContainer,\n DetailRow,\n DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n const { t, i18n } = useTranslation()\n const { rateText, toggleRate } = useTokenRateText(route)\n const { feeConfig } = useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n\n const priceImpact = getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n\n let feeAmountUSD = 0\n let feePercentage = 0\n\n const feeCollectionStep = route.steps[0].includedSteps.find(\n (includedStep) => includedStep.tool === 'feeCollection'\n )\n\n if (feeCollectionStep) {\n const estimatedFromAmount =\n BigInt(feeCollectionStep.estimate.fromAmount) -\n BigInt(feeCollectionStep.estimate.toAmount)\n\n feeAmountUSD = formatTokenPrice(\n estimatedFromAmount,\n feeCollectionStep.action.fromToken.priceUSD,\n feeCollectionStep.action.fromToken.decimals\n )\n\n feePercentage =\n feeCollectionStep.estimate.feeCosts?.reduce(\n (percentage, feeCost) =>\n percentage + Number.parseFloat(feeCost.percentage \|\| '0'),\n 0\n ) ?? 0\n }\n\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n const showIntegratorFeeCollectionDetails =\n (feeAmountUSD \|\| Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n <StepActions route={route} />\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.network')}</DetailLabel>\n <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', { value: gasCostUSD })}\n </DetailValue>\n </DetailRow>\n {feeCosts.length ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeCostUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n {showIntegratorFeeCollectionDetails ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>\n {feeConfig?.name \|\| t('main.fees.defaultIntegrator')}\n {feeConfig?.showFeePercentage && (\n <> ({t('format.percent', { value: feePercentage })})</>\n )}\n </DetailLabel>\n {feeConfig?.showFeeTooltip &&\n (feeConfig?.name \|\| feeConfig?.feeTooltipComponent) ? (\n <Tooltip\n title={\n feeConfig?.feeTooltipComponent \|\|\n t('tooltip.feeCollection', { tool: feeConfig.name })\n }\n >\n <DetailInfoIcon />\n </Tooltip>\n ) : null}\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeAmountUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n <Tooltip title={t('tooltip.priceImpact')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </DetailValue>\n </DetailRow>\n {!isRouteDone(route) ? (\n <>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n <Tooltip title={t('tooltip.slippage')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {route.steps[0].action.slippage\n ? t('format.percent', {\n value: route.steps[0].action.slippage,\n })\n : t('button.auto')}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.minReceived')}</DetailLabel>\n <Tooltip title={t('tooltip.minReceived')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(route.toAmountMin),\n route.toToken.decimals\n ),\n })}{' '}\n {route.toToken.symbol}\n </DetailValue>\n </DetailRow>\n </>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n <Tooltip title={t('tooltip.exchangeRate')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue\n onClick={toggleRate}\n role=\"button\"\n sx={{ cursor: 'pointer' }}\n >\n {rateText}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n <Tooltip title={t('tooltip.estimatedTime')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {formatDuration(executionTimeSeconds, i18n.language)}\n </DetailValue>\n </DetailRow>\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n formatDuration,\n formatTokenAmount,\n formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n DetailInfoIcon,\n DetailLabel,\n DetailLabelContainer,\n DetailRow,\n DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n const { t, i18n } = useTranslation()\n const { rateText, toggleRate } = useTokenRateText(route)\n const { feeConfig } = useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n\n const priceImpact = getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n\n let feeAmountUSD = 0\n let feePercentage = 0\n\n const feeCollectionStep = route.steps[0].includedSteps.find(\n (includedStep) => includedStep.tool === 'feeCollection'\n )\n\n if (feeCollectionStep) {\n const estimatedFromAmount =\n BigInt(feeCollectionStep.estimate.fromAmount) -\n BigInt(feeCollectionStep.estimate.toAmount)\n\n feeAmountUSD = formatTokenPrice(\n estimatedFromAmount,\n feeCollectionStep.action.fromToken.priceUSD,\n feeCollectionStep.action.fromToken.decimals\n )\n\n feePercentage =\n feeCollectionStep.estimate.feeCosts?.reduce(\n (percentage, feeCost) =>\n percentage + Number.parseFloat(feeCost.percentage \|\| '0'),\n 0\n ) ?? 0\n }\n\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n const showIntegratorFeeCollectionDetails =\n (feeAmountUSD \|\| Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n <StepActions route={route} />\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.network')}</DetailLabel>\n <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', { value: gasCostUSD })}\n </DetailValue>\n </DetailRow>\n {feeCosts.length ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeCostUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n {showIntegratorFeeCollectionDetails ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>\n {feeConfig?.name \|\| t('main.fees.defaultIntegrator')}\n {feeConfig?.showFeePercentage && (\n <> ({t('format.percent', { value: feePercentage })})</>\n )}\n </DetailLabel>\n {feeConfig?.showFeeTooltip &&\n (feeConfig?.name \|\| feeConfig?.feeTooltipComponent) ? (\n <Tooltip\n title={\n feeConfig?.feeTooltipComponent \|\|\n t('tooltip.feeCollection', { tool: feeConfig.name })\n }\n >\n <DetailInfoIcon />\n </Tooltip>\n ) : null}\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeAmountUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n <Tooltip title={t('tooltip.priceImpact')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </DetailValue>\n </DetailRow>\n {!isRouteDone(route) ? (\n <>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n <Tooltip title={t('tooltip.slippage')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {route.steps[0].action.slippage\n ? t('format.percent', {\n value: route.steps[0].action.slippage,\n })\n : t('button.auto')}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.minReceived')}</DetailLabel>\n <Tooltip title={t('tooltip.minReceived')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(route.toAmountMin),\n route.toToken.decimals\n ),\n })}{' '}\n {route.toToken.symbol}\n </DetailValue>\n </DetailRow>\n </>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n <Tooltip title={t('tooltip.exchangeRate')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue\n onClick={toggleRate}\n role=\"button\"\n sx={{ cursor: 'pointer' }}\n >\n {rateText}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n <Tooltip title={t('tooltip.estimatedTime')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {formatDuration(executionTimeSeconds, i18n.language)}\n </DetailValue>\n </DetailRow>\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/Routes/LimitOrderRoutes.js CHANGED Viewed

@@ -11,10 +11,10 @@ const LimitOrderRoutes = (props) => {
 	const { routes, isLoading, isFetching, isFetched } = useRoutes();
 	const [toAddress, selectedRouteId] = useFieldValues("toAddress", "selectedRouteId");
 	const { setFieldValue } = useFieldActions();
-	const { requiredToAddress } = useToAddressRequirements();
+	const { requiredToAddress, unsupportedReceiverBlocking } = useToAddressRequirements();
 	const currentRoute = routes?.[0];
 	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
-	const allowInteraction = !(currentRoute && requiredToAddress && !toAddress);
+	const allowInteraction = !(currentRoute && (unsupportedReceiverBlocking || requiredToAddress && !toAddress));
 	const activeRouteId = routes?.find((route) => route.id === selectedRouteId)?.id ?? currentRoute?.id;
 	return /* @__PURE__ */ jsx(Stack, {
 		direction: "column",

package/dist/esm/components/Routes/LimitOrderRoutes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LimitOrderRoutes.js","names":[],"sources":["../../../../src/components/Routes/LimitOrderRoutes.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport {\n RouteProviderCard,\n RouteProviderCardSkeleton,\n} from '../RouteCard/RouteProviderCard.js'\n\nexport const LimitOrderRoutes: React.FC<CardProps> = (props) => {\n const { routes, isLoading, isFetching, isFetched } = useRoutes()\n const [toAddress, selectedRouteId] = useFieldValues(\n 'toAddress',\n 'selectedRouteId'\n )\n const { setFieldValue } = useFieldActions()\n const { requiredToAddress } = useToAddressRequirements()\n\n const currentRoute = routes?.[0]\n\n if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n return null\n }\n\n const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n const allowInteraction = !toAddressUnsatisfied\n\n const activeRouteId =\n routes?.find((route) => route.id === selectedRouteId)?.id ??\n currentRoute?.id\n\n return (\n <Stack\n direction=\"column\"\n spacing={1}\n sx={props.sx}\n className={props.className}\n >\n {isLoading && !currentRoute ? (\n Array.from({ length: 2 }).map((_, index) => (\n <RouteProviderCardSkeleton key={index} />\n ))\n ) : !currentRoute ? (\n <RouteNotFoundCard />\n ) : (\n routes?.map((route) => (\n <RouteProviderCard\n key={route.id}\n route={route}\n active={route.id === activeRouteId}\n onClick={\n allowInteraction\n ? () => setFieldValue('selectedRouteId', route.id)\n : undefined\n }\n />\n ))\n )}\n </Stack>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAyC,UAAU;CAC9D,MAAM,EAAE,QAAQ,WAAW,YAAY,cAAc,UAAU;CAC/D,MAAM,CAAC,WAAW,mBAAmB,eACnC,aACA,iBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,~~sBAAsB~~,yBAAyB;~~CAEvD~~,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;~~CAIT~~,MAAM,mBAAmB,~~EADI~~,~~gBAAgB~~,qBAAqB,CAAC;~~CAGnE~~,MAAM,gBACJ,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,CAAC,EAAE,MACvD,cAAc;CAEhB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,IAAI,MAAM;EACV,WAAW,MAAM;EAEhB,UAAA,aAAa,CAAC,eACb,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,2BAAD,CAAwC,GAAR,KAAQ,CACzC,IACC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,QAAQ,KAAK,UACX,oBAAC,mBAAD;GAES;GACP,QAAQ,MAAM,OAAO;GACrB,SACE,yBACU,cAAc,mBAAmB,MAAM,EAAE,IAC/C,KAAA;EAEP,GARM,MAAM,EAQZ,CACF;CAEE,CAAA;AAEX"}
1	+ {"version":3,"file":"LimitOrderRoutes.js","names":[],"sources":["../../../../src/components/Routes/LimitOrderRoutes.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport {\n RouteProviderCard,\n RouteProviderCardSkeleton,\n} from '../RouteCard/RouteProviderCard.js'\n\nexport const LimitOrderRoutes: React.FC<CardProps> = (props) => {\n const { routes, isLoading, isFetching, isFetched } = useRoutes()\n const [toAddress, selectedRouteId] = useFieldValues(\n 'toAddress',\n 'selectedRouteId'\n )\n const { setFieldValue } = useFieldActions()\n const { requiredToAddress, unsupportedReceiverBlocking } =\n useToAddressRequirements()\n\n const currentRoute = routes?.[0]\n\n if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n return null\n }\n\n const toAddressUnsatisfied =\n currentRoute &&\n (unsupportedReceiverBlocking \|\| (requiredToAddress && !toAddress))\n const allowInteraction = !toAddressUnsatisfied\n\n const activeRouteId =\n routes?.find((route) => route.id === selectedRouteId)?.id ??\n currentRoute?.id\n\n return (\n <Stack\n direction=\"column\"\n spacing={1}\n sx={props.sx}\n className={props.className}\n >\n {isLoading && !currentRoute ? (\n Array.from({ length: 2 }).map((_, index) => (\n <RouteProviderCardSkeleton key={index} />\n ))\n ) : !currentRoute ? (\n <RouteNotFoundCard />\n ) : (\n routes?.map((route) => (\n <RouteProviderCard\n key={route.id}\n route={route}\n active={route.id === activeRouteId}\n onClick={\n allowInteraction\n ? () => setFieldValue('selectedRouteId', route.id)\n : undefined\n }\n />\n ))\n )}\n </Stack>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAyC,UAAU;CAC9D,MAAM,EAAE,QAAQ,WAAW,YAAY,cAAc,UAAU;CAC/D,MAAM,CAAC,WAAW,mBAAmB,eACnC,aACA,iBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,mBAAmB,gCACzB,yBAAyB;CAE3B,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAMT,MAAM,mBAAmB,EAFvB,iBACC,+BAAgC,qBAAqB,CAAC;CAGzD,MAAM,gBACJ,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,CAAC,EAAE,MACvD,cAAc;CAEhB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,IAAI,MAAM;EACV,WAAW,MAAM;EAEhB,UAAA,aAAa,CAAC,eACb,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,2BAAD,CAAwC,GAAR,KAAQ,CACzC,IACC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,QAAQ,KAAK,UACX,oBAAC,mBAAD;GAES;GACP,QAAQ,MAAM,OAAO;GACrB,SACE,yBACU,cAAc,mBAAmB,MAAM,EAAE,IAC/C,KAAA;EAEP,GARM,MAAM,EAQZ,CACF;CAEE,CAAA;AAEX"}

package/dist/esm/components/Routes/RoutesContent.js CHANGED Viewed

@@ -19,10 +19,10 @@ const RoutesContent = memo(function RoutesContent({ routes, isFetching, isLoadin
 	const { mode, modeOptions } = useWidgetConfig();
 	const { account } = useAccount({ chainType: fromChain?.chainType });
 	const [toAddress] = useFieldValues("toAddress");
-	const { requiredToAddress } = useToAddressRequirements();
+	const { requiredToAddress, unsupportedReceiverBlocking } = useToAddressRequirements();
 	const currentRoute = routes?.[0];
 	const routeNotFound = !currentRoute && !isLoading && !isFetching;
-	const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
+	const toAddressUnsatisfied = currentRoute && (unsupportedReceiverBlocking || requiredToAddress && !toAddress);
 	const allowInteraction = account.isConnected && !toAddressUnsatisfied;
 	const title = mode === "custom" ? modeOptions?.custom?.type === "deposit" ? t("header.deposit") : t("header.youPay") : t("header.receive");
 	return /* @__PURE__ */ jsxs(Container$1, {

package/dist/esm/components/Routes/RoutesContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n routes?: Route[]\n isFetching: boolean\n isLoading: boolean\n dataUpdatedAt: number\n refetchTime: number\n fromChain: ExtendedChain \| undefined\n refetch: () => void\n onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n memo(function RoutesContent({\n routes,\n isFetching,\n isLoading,\n dataUpdatedAt,\n refetchTime,\n fromChain,\n refetch,\n onRouteClick,\n }: RoutesContentProps) {\n const { t } = useTranslation()\n const { mode, modeOptions } = useWidgetConfig()\n\n const { account } = useAccount({ chainType: fromChain?.chainType })\n const [toAddress] = useFieldValues('toAddress')\n const { requiredToAddress } = useToAddressRequirements()\n\n const currentRoute = routes?.[0]\n\n const routeNotFound = !currentRoute && !isLoading && !isFetching\n const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n const title =\n mode === 'custom'\n ? modeOptions?.custom?.type === 'deposit'\n ? t('header.deposit')\n : t('header.youPay')\n : t('header.receive')\n\n return (\n <Container enableColorScheme minimumHeight={isLoading}>\n <Header sx={{ height: headerHeight }}>\n <Typography\n noWrap\n sx={{\n fontSize: 18,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n <ProgressToNextUpdate\n updatedAt={dataUpdatedAt \|\| Date.now()}\n timeToUpdate={refetchTime}\n isLoading={isFetching}\n onClick={() => refetch()}\n sx={{ marginRight: -1 }}\n />\n </Header>\n <PageContainer\n sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n >\n <Stack\n direction=\"column\"\n spacing={2}\n sx={{\n flex: 1,\n paddingTop: 1.5,\n paddingBottom: 3,\n }}\n >\n {routeNotFound ? (\n <RouteNotFoundCard />\n ) : (isLoading \|\| isFetching) && !routes?.length ? (\n Array.from({ length: 3 }).map((_, index) => (\n <RouteCardSkeleton key={index} />\n ))\n ) : (\n routes?.map((route: Route, index: number) => (\n <RouteCard\n key={index}\n route={route}\n onClick={\n allowInteraction ? () => onRouteClick(route) : undefined\n }\n active={index === 0}\n expanded={routes?.length === 1}\n />\n ))\n )}\n </Stack>\n </PageContainer>\n </Container>\n )\n })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,~~sBAAsB~~,yBAAyB;~~CAEvD~~,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,~~uBAAuB~~,~~gBAAgB~~,qBAAqB,CAAC;~~CACnE~~,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;EAA5C,UAAA,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;GAAnC,UAAA,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;IAEC,UAAA;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;EACR,CAAA,GAAA,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;GAE/D,UAAA,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;IAEC,UAAA,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}
1	+ {"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n routes?: Route[]\n isFetching: boolean\n isLoading: boolean\n dataUpdatedAt: number\n refetchTime: number\n fromChain: ExtendedChain \| undefined\n refetch: () => void\n onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n memo(function RoutesContent({\n routes,\n isFetching,\n isLoading,\n dataUpdatedAt,\n refetchTime,\n fromChain,\n refetch,\n onRouteClick,\n }: RoutesContentProps) {\n const { t } = useTranslation()\n const { mode, modeOptions } = useWidgetConfig()\n\n const { account } = useAccount({ chainType: fromChain?.chainType })\n const [toAddress] = useFieldValues('toAddress')\n const { requiredToAddress, unsupportedReceiverBlocking } =\n useToAddressRequirements()\n\n const currentRoute = routes?.[0]\n\n const routeNotFound = !currentRoute && !isLoading && !isFetching\n const toAddressUnsatisfied =\n currentRoute &&\n (unsupportedReceiverBlocking \|\| (requiredToAddress && !toAddress))\n const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n const title =\n mode === 'custom'\n ? modeOptions?.custom?.type === 'deposit'\n ? t('header.deposit')\n : t('header.youPay')\n : t('header.receive')\n\n return (\n <Container enableColorScheme minimumHeight={isLoading}>\n <Header sx={{ height: headerHeight }}>\n <Typography\n noWrap\n sx={{\n fontSize: 18,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n <ProgressToNextUpdate\n updatedAt={dataUpdatedAt \|\| Date.now()}\n timeToUpdate={refetchTime}\n isLoading={isFetching}\n onClick={() => refetch()}\n sx={{ marginRight: -1 }}\n />\n </Header>\n <PageContainer\n sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n >\n <Stack\n direction=\"column\"\n spacing={2}\n sx={{\n flex: 1,\n paddingTop: 1.5,\n paddingBottom: 3,\n }}\n >\n {routeNotFound ? (\n <RouteNotFoundCard />\n ) : (isLoading \|\| isFetching) && !routes?.length ? (\n Array.from({ length: 3 }).map((_, index) => (\n <RouteCardSkeleton key={index} />\n ))\n ) : (\n routes?.map((route: Route, index: number) => (\n <RouteCard\n key={index}\n route={route}\n onClick={\n allowInteraction ? () => onRouteClick(route) : undefined\n }\n active={index === 0}\n expanded={routes?.length === 1}\n />\n ))\n )}\n </Stack>\n </PageContainer>\n </Container>\n )\n })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,mBAAmB,gCACzB,yBAAyB;CAE3B,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,uBACJ,iBACC,+BAAgC,qBAAqB,CAAC;CACzD,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;EAA5C,UAAA,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;GAAnC,UAAA,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;IAEC,UAAA;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;EACR,CAAA,GAAA,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;GAE/D,UAAA,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;IAEC,UAAA,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js CHANGED Viewed

@@ -16,9 +16,9 @@ const SendToWalletExpandButton = () => {
 	const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig();
 	const hiddenToAddress = hiddenUI?.toAddress;
 	const disabledToAddress = disabledUI?.toAddress;
-	const { requiredToAddress } = useToAddressRequirements();
+	const { requiredToAddress, unsupportedToAddress } = useToAddressRequirements();
 	const [toAddressValue] = useFieldValues("toAddress");
-	const visible = !hiddenToAddress && !disabledToAddress && !toAddressValue && !requiredToAddress;
+	const visible = !hiddenToAddress && !disabledToAddress && !unsupportedToAddress && !toAddressValue && !requiredToAddress;
 	const handleClick = () => navigate({ to: toAddresses?.length ? navigationRoutes.configuredWallets : navigationRoutes.sendToWallet });
 	return /* @__PURE__ */ jsx(Collapse, {
 		orientation: "horizontal",

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n const hiddenToAddress = hiddenUI?.toAddress\n const disabledToAddress = disabledUI?.toAddress\n const { requiredToAddress } = useToAddressRequirements()\n const [toAddressValue] = useFieldValues('toAddress')\n\n const visible =\n !hiddenToAddress &&\n !disabledToAddress &&\n !toAddressValue &&\n !requiredToAddress\n\n const handleClick = () =>\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n\n return (\n <Collapse\n orientation=\"horizontal\"\n in={visible}\n timeout={225}\n mountOnEnter\n unmountOnExit\n >\n <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n <Button\n variant=\"text\"\n onClick={handleClick}\n sx={{\n ml: 1.5,\n minWidth: 48,\n width: 48,\n height: 48,\n }}\n >\n <Wallet />\n </Button>\n </Tooltip>\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,YAAY,aAAa,gBAAgB;CAC9D,MAAM,kBAAkB,UAAU;CAClC,MAAM,oBAAoB,YAAY;CACtC,MAAM,EAAE,~~sBAAsB~~,yBAAyB;~~CACvD~~,MAAM,CAAC,kBAAkB,eAAe,WAAW;CAEnD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CAEH,OACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;EAEA,UAAA,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;GAChD,UAAA,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;IAEA,UAAA,oBAAC,QAAD,CAAS,CAAA;GACH,CAAA;EACD,CAAA;CACD,CAAA;AAEd"}
1	+ {"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n const hiddenToAddress = hiddenUI?.toAddress\n const disabledToAddress = disabledUI?.toAddress\n const { requiredToAddress, unsupportedToAddress } = useToAddressRequirements()\n const [toAddressValue] = useFieldValues('toAddress')\n\n const visible =\n !hiddenToAddress &&\n !disabledToAddress &&\n !unsupportedToAddress &&\n !toAddressValue &&\n !requiredToAddress\n\n const handleClick = () =>\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n\n return (\n <Collapse\n orientation=\"horizontal\"\n in={visible}\n timeout={225}\n mountOnEnter\n unmountOnExit\n >\n <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n <Button\n variant=\"text\"\n onClick={handleClick}\n sx={{\n ml: 1.5,\n minWidth: 48,\n width: 48,\n height: 48,\n }}\n >\n <Wallet />\n </Button>\n </Tooltip>\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,YAAY,aAAa,gBAAgB;CAC9D,MAAM,kBAAkB,UAAU;CAClC,MAAM,oBAAoB,YAAY;CACtC,MAAM,EAAE,mBAAmB,yBAAyB,yBAAyB;CAC7E,MAAM,CAAC,kBAAkB,eAAe,WAAW;CAEnD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,wBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CAEH,OACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;EAEA,UAAA,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;GAChD,UAAA,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;IAEA,UAAA,oBAAC,QAAD,CAAS,CAAA;GACH,CAAA;EACD,CAAA;CACD,CAAA;AAEd"}

package/dist/esm/components/Skeleton/WidgetSkeleton.js CHANGED Viewed

@@ -59,8 +59,9 @@ const WidgetSkeleton = ({ config }) => {
 	const configTheme = config?.theme;
 	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 	const appearanceMode = !appearance || appearance === "system" ? prefersDarkMode ? "dark" : "light" : appearance;
+	const theme = useMemo(() => createTheme$1(configTheme), [configTheme]);
 	return /* @__PURE__ */ jsx(ThemeProvider, {
-		theme: useMemo(() => createTheme$1(configTheme), [configTheme]),
+		theme,
 		defaultMode: appearanceMode,
 		modeStorageKey: "li.fi-widget-mode",
 		colorSchemeStorageKey: "li.fi-widget-color-scheme",

package/dist/esm/components/Skeleton/WidgetSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n AppExpandedContainer,\n FlexContainer,\n RelativeContainer,\n} from '../AppContainer.js'\nimport {\n SkeletonAmountContainer,\n SkeletonCard,\n SkeletonCardRow,\n SkeletonHeaderAppBar,\n SkeletonHeaderContainer,\n SkeletonInputCard,\n SkeletonPoweredByContainer,\n SkeletonReviewButton,\n SkeletonReviewButtonContainer,\n SkeletonSendToWalletButton,\n SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n <SkeletonWalletMenuButtonContainer>\n <Skeleton width={98} height={24} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n titleWidth?: number\n placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n titleWidth = 36,\n placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n <SkeletonCard elevation={0}>\n <Skeleton width={titleWidth} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n </SkeletonCardRow>\n </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n <SkeletonInputCard elevation={0}>\n <Skeleton width={55} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <SkeletonAmountContainer>\n <Skeleton\n width={48}\n height={37}\n variant=\"text\"\n sx={{ marginTop: -0.75 }}\n />\n <Skeleton width={48} height={12} variant=\"text\" />\n </SkeletonAmountContainer>\n </SkeletonCardRow>\n </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n config,\n}: WidgetConfigPartialProps): JSX.Element => {\n const appearance = config?.appearance\n const hiddenUI = config?.hiddenUI\n const requiredUI = config?.requiredUI\n const configTheme = config?.theme\n const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n const appearanceMode =\n !appearance \|\| appearance === 'system'\n ? prefersDarkMode\n ? 'dark'\n : 'light'\n : appearance\n\n const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n return (\n <ThemeProvider\n theme={theme}\n defaultMode={appearanceMode}\n modeStorageKey=\"li.fi-widget-mode\"\n colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n disableTransitionOnChange\n >\n <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n <SkeletonHeaderContainer>\n {!hiddenUI?.walletMenu ? (\n <SkeletonHeaderAppBar>\n <SkeletonWalletMenuButton />\n </SkeletonHeaderAppBar>\n ) : null}\n <SkeletonHeaderAppBar\n sx={{ justifyContent: 'space-between', height: 52 }}\n >\n <Skeleton width={124} height={36} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonHeaderAppBar>\n </SkeletonHeaderContainer>\n\n <FlexContainer\n sx={{\n gap: 2,\n paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n }}\n >\n <SkeletonSelectCard />\n <SkeletonSelectCard />\n <SkeletonYouPayCard />\n {requiredUI?.toAddress ? (\n <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n ) : null}\n <SkeletonReviewButtonContainer>\n <SkeletonReviewButton variant=\"contained\" fullWidth>\n  \n </SkeletonReviewButton>\n {!requiredUI?.toAddress ? (\n <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n  \n </SkeletonSendToWalletButton>\n ) : null}\n </SkeletonReviewButtonContainer>\n </FlexContainer>\n {!hiddenUI?.poweredBy ? (\n <SkeletonPoweredByContainer>\n <Skeleton width={96} height={18} variant=\"text\" />\n </SkeletonPoweredByContainer>\n ) : null}\n </RelativeContainer>\n </AppExpandedContainer>\n </ThemeProvider>\n )\n}\n"],"mappings":";;;;;;;AAuBA,MAAM,qBAAqB,oBAAC,UAAD;CAAU,OAAO;CAAI,QAAQ;CAAI,SAAQ;AAAW,CAAA;AAC/E,MAAM,iCACJ,qBAAC,mCAAD,EAAA,UAAA,CACE,oBAAC,UAAD;CAAU,OAAO;CAAI,QAAQ;CAAI,SAAQ;AAAQ,CAAA,GACjD,oBAAC,cAAD,CAAe,CAAA,CACkB,EAAA,CAAA;AAOrC,MAAM,sBAAsB,EAC1B,aAAa,IACb,mBAAmB,UAEnB,qBAAC,cAAD;CAAc,WAAW;CAAzB,UAAA,CACE,oBAAC,UAAD;EAAU,OAAO;EAAY,QAAQ;EAAI,SAAQ;CAAQ,CAAA,GACzD,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;CAAY,CAAA,GACrD,oBAAC,UAAD;EAAU,OAAO;EAAkB,QAAQ;EAAI,SAAQ;CAAQ,CAAA,CAChD,EAAA,CAAA,CACL;;AAGhB,MAAM,2BACJ,qBAAC,mBAAD;CAAmB,WAAW;CAA9B,UAAA,CACE,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;CAAQ,CAAA,GACjD,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;CAAY,CAAA,GACrD,qBAAC,yBAAD,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,IAAI,EAAE,WAAW,KAAM;CACxB,CAAA,GACD,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;CAAQ,CAAA,CAC1B,EAAA,CAAA,CACV,EAAA,CAAA,CACA;;AAGrB,MAAa,kBAAkB,EAC7B,aAC2C;CAC3C,MAAM,aAAa,QAAQ;CAC3B,MAAM,WAAW,QAAQ;CACzB,MAAM,aAAa,QAAQ;CAC3B,MAAM,cAAc,QAAQ;CAC5B,MAAM,kBAAkB,cAAc,8BAA8B;CACpE,MAAM,iBACJ,CAAC,cAAc,eAAe,WAC1B,kBACE,SACA,UACF;~~CAIN~~,~~OACE~~,~~oBAAC~~,~~eAAD;EACE,OAJU,~~cAAcA,cAAY,WAAW,GAAG,CAAC,WAAW,~~CAInD~~;~~EACX~~,aAAa;EACb,gBAAe;EACf,uBAAsB;EACtB,2BAAA;EAEA,UAAA,oBAAC,sBAAD;GAAsB,eAAY;GAChC,UAAA,qBAAC,mBAAD;IAAmB,IAAI;KAAE,SAAS;KAAQ,eAAe;IAAS;IAAlE,UAAA;KACE,qBAAC,yBAAD,EAAA,UAAA,CACG,CAAC,UAAU,aACV,oBAAC,sBAAD,EAAA,UACE,oBAAC,0BAAD,CAA2B,CAAA,EACP,CAAA,IACpB,MACJ,qBAAC,sBAAD;MACE,IAAI;OAAE,gBAAgB;OAAiB,QAAQ;MAAG;MADpD,UAAA,CAGE,oBAAC,UAAD;OAAU,OAAO;OAAK,QAAQ;OAAI,SAAQ;MAAQ,CAAA,GAClD,oBAAC,cAAD,CAAe,CAAA,CACK;KACC,CAAA,CAAA,EAAA,CAAA;KAEzB,qBAAC,eAAD;MACE,IAAI;OACF,KAAK;OACL,eAAe,UAAU,YAAY,IAAI;MAC3C;MAJF,UAAA;OAME,oBAAC,oBAAD,CAAqB,CAAA;OACrB,oBAAC,oBAAD,CAAqB,CAAA;OACrB,oBAAC,oBAAD,CAAqB,CAAA;OACpB,YAAY,YACX,oBAAC,oBAAD;QAAoB,YAAY;QAAK,kBAAkB;OAAM,CAAA,IAC3D;OACJ,qBAAC,+BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;QAAsB,SAAQ;QAAY,WAAA;QAAU,UAAA;OAE9B,CAAA,GACrB,CAAC,YAAY,YACZ,oBAAC,4BAAD;QAA4B,SAAQ;QAAO,WAAA;QAAU,UAAA;OAEzB,CAAA,IAC1B,IACyB,EAAA,CAAA;MAClB;;KACd,CAAC,UAAU,YACV,oBAAC,4BAAD,EAAA,UACE,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAI,SAAQ;KAAQ,CAAA,EACvB,CAAA,IAC1B;IACa;;EACC,CAAA;CACT,CAAA;AAEnB"}
1	+ {"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n AppExpandedContainer,\n FlexContainer,\n RelativeContainer,\n} from '../AppContainer.js'\nimport {\n SkeletonAmountContainer,\n SkeletonCard,\n SkeletonCardRow,\n SkeletonHeaderAppBar,\n SkeletonHeaderContainer,\n SkeletonInputCard,\n SkeletonPoweredByContainer,\n SkeletonReviewButton,\n SkeletonReviewButtonContainer,\n SkeletonSendToWalletButton,\n SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n <SkeletonWalletMenuButtonContainer>\n <Skeleton width={98} height={24} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n titleWidth?: number\n placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n titleWidth = 36,\n placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n <SkeletonCard elevation={0}>\n <Skeleton width={titleWidth} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n </SkeletonCardRow>\n </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n <SkeletonInputCard elevation={0}>\n <Skeleton width={55} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <SkeletonAmountContainer>\n <Skeleton\n width={48}\n height={37}\n variant=\"text\"\n sx={{ marginTop: -0.75 }}\n />\n <Skeleton width={48} height={12} variant=\"text\" />\n </SkeletonAmountContainer>\n </SkeletonCardRow>\n </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n config,\n}: WidgetConfigPartialProps): JSX.Element => {\n const appearance = config?.appearance\n const hiddenUI = config?.hiddenUI\n const requiredUI = config?.requiredUI\n const configTheme = config?.theme\n const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n const appearanceMode =\n !appearance \|\| appearance === 'system'\n ? prefersDarkMode\n ? 'dark'\n : 'light'\n : appearance\n\n const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n return (\n <ThemeProvider\n theme={theme}\n defaultMode={appearanceMode}\n modeStorageKey=\"li.fi-widget-mode\"\n colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n disableTransitionOnChange\n >\n <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n <SkeletonHeaderContainer>\n {!hiddenUI?.walletMenu ? (\n <SkeletonHeaderAppBar>\n <SkeletonWalletMenuButton />\n </SkeletonHeaderAppBar>\n ) : null}\n <SkeletonHeaderAppBar\n sx={{ justifyContent: 'space-between', height: 52 }}\n >\n <Skeleton width={124} height={36} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonHeaderAppBar>\n </SkeletonHeaderContainer>\n\n <FlexContainer\n sx={{\n gap: 2,\n paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n }}\n >\n <SkeletonSelectCard />\n <SkeletonSelectCard />\n <SkeletonYouPayCard />\n {requiredUI?.toAddress ? (\n <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n ) : null}\n <SkeletonReviewButtonContainer>\n <SkeletonReviewButton variant=\"contained\" fullWidth>\n  \n </SkeletonReviewButton>\n {!requiredUI?.toAddress ? (\n <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n  \n </SkeletonSendToWalletButton>\n ) : null}\n </SkeletonReviewButtonContainer>\n </FlexContainer>\n {!hiddenUI?.poweredBy ? (\n <SkeletonPoweredByContainer>\n <Skeleton width={96} height={18} variant=\"text\" />\n </SkeletonPoweredByContainer>\n ) : null}\n </RelativeContainer>\n </AppExpandedContainer>\n </ThemeProvider>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/Step/StepActions.js CHANGED Viewed

@@ -17,6 +17,21 @@ const StepActions = ({ route }) => {
 	const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig();
 	const { isGaslessStep } = useEthereumContext();
 	const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps);
+	const flatSteps = route.steps.flatMap((routeStep) => {
+		let steps = routeStep.includedSteps;
+		if (hiddenUI?.integratorStepDetails) {
+			const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
+			if (feeCollectionStep) {
+				steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));
+				steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount;
+			}
+		}
+		const hasGaslessSupport = !!isGaslessStep?.(routeStep);
+		return steps.map((includedStep) => ({
+			includedStep,
+			hasGaslessSupport
+		}));
+	});
 	const tooltipContent = /* @__PURE__ */ jsx(Card$1, {
 		indented: true,
 		children: /* @__PURE__ */ jsx(Box, {
@@ -25,21 +40,7 @@ const StepActions = ({ route }) => {
 				gridTemplateColumns: "32px 1fr",
 				columnGap: 1.5
 			},
-			children: route.steps.flatMap((routeStep) => {
-				let steps = routeStep.includedSteps;
-				if (hiddenUI?.integratorStepDetails) {
-					const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
-					if (feeCollectionStep) {
-						steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));
-						steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount;
-					}
-				}
-				const hasGaslessSupport = !!isGaslessStep?.(routeStep);
-				return steps.map((includedStep) => ({
-					includedStep,
-					hasGaslessSupport
-				}));
-			}).map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+			children: flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
 				const showDivider = i !== arr.length - 1;
 				const isFeeCollection = step.type === "protocol" && step.tool === "feeCollection";
 				const toolName = isFeeCollection && feeConfig?.name ? feeConfig.name : step.toolDetails.name;
@@ -169,7 +170,8 @@ const CustomStepDetailsLabel = ({ step, mode, modeOptions }) => {
 	const { t } = useTranslation();
 	if (!mode) return null;
 	const toolDetails = mode === "custom" && step.includedSteps?.length > 0 ? step.includedSteps.find((step) => step.tool === "custom" && step.toolDetails.key !== "custom")?.toolDetails || step.toolDetails : step.toolDetails;
-	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t(`main.${mode === "custom" && modeOptions?.custom?.type || "checkout"}StepDetails`, { tool: toolDetails.name }) });
+	const stepDetailsKey = mode === "custom" && modeOptions?.custom?.type || "checkout";
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t(`main.${stepDetailsKey}StepDetails`, { tool: toolDetails.name }) });
 };
 const BridgeStepDetailsLabel = ({ step }) => {
 	const { t } = useTranslation();

package/dist/esm/components/Step/StepActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n ModeOptions,\n WidgetFeeConfig,\n WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n StepActionsHeader,\n StepActionsTitle,\n StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n step: StepExtended\n mode?: Extract<WidgetMode, 'custom'>\n modeOptions?: ModeOptions\n feeConfig?: WidgetFeeConfig\n relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n route: RouteExtended\n}> = ({ route }) => {\n const { t } = useTranslation()\n const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n const flatSteps = route.steps.flatMap((routeStep) => {\n let steps = routeStep.includedSteps\n if (hiddenUI?.integratorStepDetails) {\n const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n if (feeCollectionStep) {\n steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n }\n }\n const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n })\n\n const tooltipContent = (\n <Card indented>\n <Box\n sx={{\n display: 'grid',\n gridTemplateColumns: '32px 1fr',\n columnGap: 1.5,\n }}\n >\n {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n const showDivider = i !== arr.length - 1\n const isFeeCollection =\n step.type === 'protocol' && step.tool === 'feeCollection'\n const toolName =\n isFeeCollection && feeConfig?.name\n ? feeConfig.name\n : step.toolDetails.name\n const toolLogoURI =\n isFeeCollection && feeConfig?.logoURI\n ? feeConfig.logoURI\n : step.toolDetails.logoURI\n\n return (\n <Fragment key={step.id}>\n <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n {toolLogoURI ? (\n <SmallAvatar\n src={toolLogoURI}\n alt={toolName}\n sx={{ width: 32, height: 32 }}\n >\n {toolName?.[0]}\n </SmallAvatar>\n ) : null}\n </Box>\n <Box\n sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n >\n {step.type === 'custom' && mode === 'custom' ? (\n <CustomStepDetailsLabel\n step={step}\n mode={mode}\n modeOptions={modeOptions}\n />\n ) : step.type === 'cross' ? (\n <BridgeStepDetailsLabel step={step} />\n ) : step.type === 'protocol' ? (\n <ProtocolStepDetailsLabel\n step={step}\n feeConfig={feeConfig}\n relayerSupport={hasGaslessSupport}\n />\n ) : (\n <SwapStepDetailsLabel step={step} />\n )}\n <StepDetailsContent step={step} />\n </Box>\n {showDivider && (\n <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n <Divider\n orientation=\"vertical\"\n sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n />\n </Box>\n )}\n {showDivider && <Box />}\n </Fragment>\n )\n })}\n </Box>\n </Card>\n )\n\n return (\n <StepActionsHeader>\n <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n <Tooltip\n title={tooltipContent}\n placement=\"bottom-end\"\n arrow={false}\n slotProps={{\n tooltip: {\n sx: {\n bgcolor: 'transparent',\n p: 0,\n boxShadow: 'none',\n maxWidth: 'none',\n },\n },\n transition: {\n style: { transformOrigin: 'right top' },\n },\n }}\n >\n <CardIconButton\n size=\"small\"\n sx={(theme) => ({\n borderRadius: theme.vars.shape.borderRadiusSecondary,\n })}\n >\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\n {headerIncludedSteps.map((includedStep, index) => (\n <Fragment key={index}>\n {index > 0 ? (\n <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n ) : null}\n <SmallAvatar\n src={includedStep.toolDetails.logoURI}\n alt={includedStep.toolDetails.name}\n sx={{ width: 16, height: 16 }}\n >\n {includedStep.toolDetails.name[0]}\n </SmallAvatar>\n </Fragment>\n ))}\n </Box>\n </CardIconButton>\n </Tooltip>\n </StepActionsHeader>\n )\n}\n\nconst StepDetailsContent: React.FC<{\n step: StepExtended\n}> = ({ step }) => {\n const { t } = useTranslation()\n\n const sameTokenProtocolStep =\n step.action.fromToken.chainId === step.action.toToken.chainId &&\n step.action.fromToken.address === step.action.toToken.address\n\n let fromAmount: string \| undefined\n if (sameTokenProtocolStep) {\n const estimatedFromAmount =\n BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n fromAmount =\n estimatedFromAmount > 0n\n ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n : formatTokenAmount(\n BigInt(step.estimate.fromAmount),\n step.action.fromToken.decimals\n )\n } else {\n fromAmount = formatTokenAmount(\n BigInt(step.estimate.fromAmount),\n step.action.fromToken.decimals\n )\n }\n\n const showToAmount =\n step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n return (\n <StepLabelTypography>\n {!showToAmount ? (\n <>\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(step.estimate.fromAmount),\n step.action.fromToken.decimals\n ),\n })}{' '}\n {step.action.fromToken.symbol}\n {' - '}\n </>\n ) : null}\n {t('format.tokenAmount', {\n value: fromAmount,\n })}{' '}\n {step.action.fromToken.symbol}\n {showToAmount ? (\n <>\n <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n ),\n })}{' '}\n {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n </>\n ) : (\n ` (${t('format.currency', {\n value: formatTokenPrice(\n fromAmount,\n step.action.fromToken.priceUSD,\n step.action.fromToken.decimals\n ),\n })})`\n )}\n </StepLabelTypography>\n )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n step,\n mode,\n modeOptions,\n}) => {\n const { t } = useTranslation()\n\n if (!mode) {\n return null\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n ? (step as unknown as LiFiStep).includedSteps.find(\n (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n )?.toolDetails \|\| step.toolDetails\n : step.toolDetails\n\n const stepDetailsKey =\n (mode === 'custom' && modeOptions?.custom?.type) \|\| 'checkout'\n\n return (\n <StepLabelTypography>\n {t(`main.${stepDetailsKey}StepDetails`, {\n tool: toolDetails.name,\n })}\n </StepLabelTypography>\n )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n return (\n <StepLabelTypography>\n {t('main.bridgeStepDetails', {\n from: getChainById(step.action.fromChainId)?.name,\n to: getChainById(step.action.toChainId)?.name,\n tool: step.toolDetails.name,\n })}\n </StepLabelTypography>\n )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n return (\n <StepLabelTypography>\n {t('main.swapStepDetails', {\n chain: getChainById(step.action.fromChainId)?.name,\n tool: step.toolDetails.name,\n })}\n </StepLabelTypography>\n )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n const { t } = useTranslation()\n return (\n <StepLabelTypography>\n {step.toolDetails.key === 'feeCollection'\n ? feeConfig?.name \|\|\n (relayerSupport\n ? t('main.fees.relayerService')\n : t('main.fees.defaultIntegrator'))\n : step.toolDetails.key === 'gasZip'\n ? t('main.refuelStepDetails', {\n tool: step.toolDetails.name,\n })\n : step.toolDetails.name}\n </StepLabelTypography>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n ModeOptions,\n WidgetFeeConfig,\n WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n StepActionsHeader,\n StepActionsTitle,\n StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n step: StepExtended\n mode?: Extract<WidgetMode, 'custom'>\n modeOptions?: ModeOptions\n feeConfig?: WidgetFeeConfig\n relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n route: RouteExtended\n}> = ({ route }) => {\n const { t } = useTranslation()\n const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n const flatSteps = route.steps.flatMap((routeStep) => {\n let steps = routeStep.includedSteps\n if (hiddenUI?.integratorStepDetails) {\n const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n if (feeCollectionStep) {\n steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n }\n }\n const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n })\n\n const tooltipContent = (\n <Card indented>\n <Box\n sx={{\n display: 'grid',\n gridTemplateColumns: '32px 1fr',\n columnGap: 1.5,\n }}\n >\n {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n const showDivider = i !== arr.length - 1\n const isFeeCollection =\n step.type === 'protocol' && step.tool === 'feeCollection'\n const toolName =\n isFeeCollection && feeConfig?.name\n ? feeConfig.name\n : step.toolDetails.name\n const toolLogoURI =\n isFeeCollection && feeConfig?.logoURI\n ? feeConfig.logoURI\n : step.toolDetails.logoURI\n\n return (\n <Fragment key={step.id}>\n <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n {toolLogoURI ? (\n <SmallAvatar\n src={toolLogoURI}\n alt={toolName}\n sx={{ width: 32, height: 32 }}\n >\n {toolName?.[0]}\n </SmallAvatar>\n ) : null}\n </Box>\n <Box\n sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n >\n {step.type === 'custom' && mode === 'custom' ? (\n <CustomStepDetailsLabel\n step={step}\n mode={mode}\n modeOptions={modeOptions}\n />\n ) : step.type === 'cross' ? (\n <BridgeStepDetailsLabel step={step} />\n ) : step.type === 'protocol' ? (\n <ProtocolStepDetailsLabel\n step={step}\n feeConfig={feeConfig}\n relayerSupport={hasGaslessSupport}\n />\n ) : (\n <SwapStepDetailsLabel step={step} />\n )}\n <StepDetailsContent step={step} />\n </Box>\n {showDivider && (\n <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n <Divider\n orientation=\"vertical\"\n sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n />\n </Box>\n )}\n {showDivider && <Box />}\n </Fragment>\n )\n })}\n </Box>\n </Card>\n )\n\n return (\n <StepActionsHeader>\n <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n <Tooltip\n title={tooltipContent}\n placement=\"bottom-end\"\n arrow={false}\n slotProps={{\n tooltip: {\n sx: {\n bgcolor: 'transparent',\n p: 0,\n boxShadow: 'none',\n maxWidth: 'none',\n },\n },\n transition: {\n style: { transformOrigin: 'right top' },\n },\n }}\n >\n <CardIconButton\n size=\"small\"\n sx={(theme) => ({\n borderRadius: theme.vars.shape.borderRadiusSecondary,\n })}\n >\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\n {headerIncludedSteps.map((includedStep, index) => (\n <Fragment key={index}>\n {index > 0 ? (\n <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n ) : null}\n <SmallAvatar\n src={includedStep.toolDetails.logoURI}\n alt={includedStep.toolDetails.name}\n sx={{ width: 16, height: 16 }}\n >\n {includedStep.toolDetails.name[0]}\n </SmallAvatar>\n </Fragment>\n ))}\n </Box>\n </CardIconButton>\n </Tooltip>\n </StepActionsHeader>\n )\n}\n\nconst StepDetailsContent: React.FC<{\n step: StepExtended\n}> = ({ step }) => {\n const { t } = useTranslation()\n\n const sameTokenProtocolStep =\n step.action.fromToken.chainId === step.action.toToken.chainId &&\n step.action.fromToken.address === step.action.toToken.address\n\n let fromAmount: string \| undefined\n if (sameTokenProtocolStep) {\n const estimatedFromAmount =\n BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n fromAmount =\n estimatedFromAmount > 0n\n ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n : formatTokenAmount(\n BigInt(step.estimate.fromAmount),\n step.action.fromToken.decimals\n )\n } else {\n fromAmount = formatTokenAmount(\n BigInt(step.estimate.fromAmount),\n step.action.fromToken.decimals\n )\n }\n\n const showToAmount =\n step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n return (\n <StepLabelTypography>\n {!showToAmount ? (\n <>\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(step.estimate.fromAmount),\n step.action.fromToken.decimals\n ),\n })}{' '}\n {step.action.fromToken.symbol}\n {' - '}\n </>\n ) : null}\n {t('format.tokenAmount', {\n value: fromAmount,\n })}{' '}\n {step.action.fromToken.symbol}\n {showToAmount ? (\n <>\n <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n ),\n })}{' '}\n {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n </>\n ) : (\n ` (${t('format.currency', {\n value: formatTokenPrice(\n fromAmount,\n step.action.fromToken.priceUSD,\n step.action.fromToken.decimals\n ),\n })})`\n )}\n </StepLabelTypography>\n )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n step,\n mode,\n modeOptions,\n}) => {\n const { t } = useTranslation()\n\n if (!mode) {\n return null\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n ? (step as unknown as LiFiStep).includedSteps.find(\n (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n )?.toolDetails \|\| step.toolDetails\n : step.toolDetails\n\n const stepDetailsKey =\n (mode === 'custom' && modeOptions?.custom?.type) \|\| 'checkout'\n\n return (\n <StepLabelTypography>\n {t(`main.${stepDetailsKey}StepDetails`, {\n tool: toolDetails.name,\n })}\n </StepLabelTypography>\n )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n return (\n <StepLabelTypography>\n {t('main.bridgeStepDetails', {\n from: getChainById(step.action.fromChainId)?.name,\n to: getChainById(step.action.toChainId)?.name,\n tool: step.toolDetails.name,\n })}\n </StepLabelTypography>\n )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n return (\n <StepLabelTypography>\n {t('main.swapStepDetails', {\n chain: getChainById(step.action.fromChainId)?.name,\n tool: step.toolDetails.name,\n })}\n </StepLabelTypography>\n )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n const { t } = useTranslation()\n return (\n <StepLabelTypography>\n {step.toolDetails.key === 'feeCollection'\n ? feeConfig?.name \|\|\n (relayerSupport\n ? t('main.fees.relayerService')\n : t('main.fees.defaultIntegrator'))\n : step.toolDetails.key === 'gasZip'\n ? t('main.refuelStepDetails', {\n tool: step.toolDetails.name,\n })\n : step.toolDetails.name}\n </StepLabelTypography>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/StepActions/StepActionRow.js CHANGED Viewed

@@ -7,9 +7,10 @@ import OpenInNew from "@mui/icons-material/OpenInNew";
 //#region src/components/StepActions/StepActionRow.tsx
 const StepActionRow = ({ step, action, href, defaultLabelsOnly }) => {
 	const { title } = useActionMessage(step, action, defaultLabelsOnly);
+	const isFailed = action?.status === "FAILED";
 	return /* @__PURE__ */ jsx(ActionRow, {
 		startAdornment: /* @__PURE__ */ jsx(IconCircle, {
-			status: action?.status === "FAILED" ? "error" : "success",
+			status: isFailed ? "error" : "success",
 			size: 24
 		}),
 		message: title ?? "",

package/dist/esm/components/StepActions/StepActionRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n step: LiFiStepExtended\n action: ExecutionAction\n href: string\n defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n const { title } = useActionMessage(step, action, defaultLabelsOnly)\n const isFailed = action?.status === 'FAILED'\n return (\n <ActionRow\n startAdornment={\n <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n }\n message={title ?? ''}\n endAdornment={\n <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n <OpenInNew sx={{ fontSize: 16 }} />\n </ExternalLink>\n }\n />\n )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;~~CAElE~~,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,~~QAJD,~~QAAQ,WAAW,~~WAIC,~~UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;GAC5C,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}
1	+ {"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n step: LiFiStepExtended\n action: ExecutionAction\n href: string\n defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n const { title } = useActionMessage(step, action, defaultLabelsOnly)\n const isFailed = action?.status === 'FAILED'\n return (\n <ActionRow\n startAdornment={\n <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n }\n message={title ?? ''}\n endAdornment={\n <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n <OpenInNew sx={{ fontSize: 16 }} />\n </ExternalLink>\n }\n />\n )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;CAClE,MAAM,WAAW,QAAQ,WAAW;CACpC,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,QAAQ,WAAW,UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;GAC5C,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}

package/dist/esm/components/Switch.js CHANGED Viewed

@@ -35,7 +35,7 @@ const Switch$1 = styled(Switch)(({ theme }) => ({
 		height: 20
 	},
 	[`.${switchClasses.track}`]: {
-		borderRadius: 24 / 2,
+		borderRadius: 12,
 		opacity: 1,
 		transition: theme.transitions.create(["background-color"], { duration: theme.transitions.duration.standard }),
 		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`

package/dist/esm/components/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n MuiSwitch\n)(({ theme }) => ({\n width: 42,\n height: 24,\n padding: 0,\n [`.${switchClasses.switchBase}`]: {\n padding: 0,\n margin: theme.spacing(0.25),\n transitionDuration: theme.transitions.duration.standard,\n [`&.${switchClasses.checked}`]: {\n transform: 'translateX(18px)',\n color: theme.vars.palette.common.white,\n [`& + .${switchClasses.track}`]: {\n backgroundColor: theme.vars.palette.primary.main,\n opacity: 1,\n border: 0,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.5,\n },\n },\n [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n color: theme.vars.palette.primary.main,\n border: '6px solid',\n borderColor: theme.vars.palette.common.white,\n },\n [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.7,\n ...theme.applyStyles('dark', {\n opacity: 0.3,\n }),\n },\n },\n [`.${switchClasses.thumb}`]: {\n boxSizing: 'border-box',\n width: 20,\n height: 20,\n },\n [`.${switchClasses.track}`]: {\n borderRadius: 24 / 2,\n opacity: 1,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.standard,\n }),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc~~,KAAK~~;~~EACnB~~,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}
1	+ {"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n MuiSwitch\n)(({ theme }) => ({\n width: 42,\n height: 24,\n padding: 0,\n [`.${switchClasses.switchBase}`]: {\n padding: 0,\n margin: theme.spacing(0.25),\n transitionDuration: theme.transitions.duration.standard,\n [`&.${switchClasses.checked}`]: {\n transform: 'translateX(18px)',\n color: theme.vars.palette.common.white,\n [`& + .${switchClasses.track}`]: {\n backgroundColor: theme.vars.palette.primary.main,\n opacity: 1,\n border: 0,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.5,\n },\n },\n [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n color: theme.vars.palette.primary.main,\n border: '6px solid',\n borderColor: theme.vars.palette.common.white,\n },\n [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.7,\n ...theme.applyStyles('dark', {\n opacity: 0.3,\n }),\n },\n },\n [`.${switchClasses.thumb}`]: {\n boxSizing: 'border-box',\n width: 20,\n height: 20,\n },\n [`.${switchClasses.track}`]: {\n borderRadius: 24 / 2,\n opacity: 1,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.standard,\n }),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc;EACd,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}

package/dist/esm/components/Tabs/Tabs.style.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Tab, Tabs, styled, tabClasses, tabsClasses } from "@mui/material";
-const CardTabs = styled(styled(Tabs)(({ theme }) => ({
+//#region src/components/Tabs/Tabs.style.tsx
+const Tabs$1 = styled(Tabs)(({ theme }) => ({
 	flex: 1,
 	[`.${tabsClasses.indicator}`]: {
 		top: theme.spacing(.5),
@@ -8,7 +9,8 @@ const CardTabs = styled(styled(Tabs)(({ theme }) => ({
 		width: `calc(100% - ${theme.spacing(1)})`
 	},
 	[`.${tabsClasses.fixed}`]: { padding: theme.spacing(.5) }
-})))(({ theme }) => ({
+}));
+const CardTabs = styled(Tabs$1)(({ theme }) => ({
 	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	[`.${tabsClasses.indicator}`]: { backgroundColor: theme.vars.palette.background.paper },
 	...theme.applyStyles("dark", {

package/dist/esm/components/Tabs/Tabs.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n Tab as MuiTab,\n Tabs as MuiTabs,\n styled,\n tabClasses,\n tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n flex: 1,\n [`.${tabsClasses.indicator}`]: {\n top: theme.spacing(0.5),\n left: theme.spacing(0.5),\n height: `calc(100% - ${theme.spacing(1)})`,\n width: `calc(100% - ${theme.spacing(1)})`,\n },\n [`.${tabsClasses.fixed}`]: {\n padding: theme.spacing(0.5),\n },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n Tabs\n)(({ theme }) => ({\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: theme.vars.palette.background.paper,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n },\n }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n MuiTab\n)<TabProps>(({ theme }) => ({\n zIndex: 1,\n flex: 1,\n textTransform: 'none',\n fontSize: '1rem',\n fontWeight: 700,\n color: theme.vars.palette.common.onBackground,\n [`&.${tabClasses.selected}`]: {\n color: theme.vars.palette.common.onBackground,\n },\n}))\n"],"mappings":"~~;AAuBA~~,~~MAAa~~,~~WAA2D~~,~~OAb3D,~~OAAOC,IAAO,CAAC,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,~~EAGED~~,~~CACF~~,CAAC,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,CAAC,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,aACnC;AACF,EAAE"}
1	+ {"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n Tab as MuiTab,\n Tabs as MuiTabs,\n styled,\n tabClasses,\n tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n flex: 1,\n [`.${tabsClasses.indicator}`]: {\n top: theme.spacing(0.5),\n left: theme.spacing(0.5),\n height: `calc(100% - ${theme.spacing(1)})`,\n width: `calc(100% - ${theme.spacing(1)})`,\n },\n [`.${tabsClasses.fixed}`]: {\n padding: theme.spacing(0.5),\n },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n Tabs\n)(({ theme }) => ({\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: theme.vars.palette.background.paper,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n },\n }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n MuiTab\n)<TabProps>(({ theme }) => ({\n zIndex: 1,\n flex: 1,\n textTransform: 'none',\n fontSize: '1rem',\n fontWeight: 700,\n color: theme.vars.palette.common.onBackground,\n [`&.${tabClasses.selected}`]: {\n color: theme.vars.palette.common.onBackground,\n },\n}))\n"],"mappings":";;AAUA,MAAMA,SAAO,OAAOC,IAAO,CAAC,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAAE;AAEF,MAAa,WAA2D,OACtED,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,CAAC,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,aACnC;AACF,EAAE"}