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

@lifi/widget 4.4.0 → 4.5.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 (175) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n route: RouteExtended\n showEssentials?: boolean\n defaultExpanded?: boolean\n fromSlot?: React.ReactNode\n}> = ({ route, showEssentials, defaultExpanded, fromSlot }) => {\n const { mode } = useWidgetConfig()\n\n const fromToken = {\n ...route.steps[0].action.fromToken,\n amount: BigInt(route.steps[0].action.fromAmount),\n }\n\n const lastStepIndex = route.steps.length - 1\n const toToken = {\n ...(route.steps[lastStepIndex].execution?.toToken ??\n route.steps[lastStepIndex].action.toToken),\n amount: route.steps[lastStepIndex].execution?.toAmount\n ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n : mode === 'custom'\n ? BigInt(route.toAmount)\n : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n }\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n {fromSlot ?? (fromToken ? <Token token={fromToken} /> : null)}\n <Box\n sx={{\n width: 40,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n </Box>\n {toToken ? (\n <RouteToken\n route={route}\n token={toToken}\n impactToken={fromToken}\n showEssentials={showEssentials}\n defaultExpanded={defaultExpanded}\n />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAKP,EAAE,OAAO,gBAAgB,iBAAiB,eAAe;CAC7D,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,EAAE,CAAC,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,EAAE,CAAC,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,cAAc,CAAC,WAAW,WACxC,MAAM,MAAM,cAAc,CAAC,OAAO;EACpC,QAAQ,MAAM,MAAM,cAAc,CAAC,WAAW,WAC1C,OAAO,MAAM,MAAM,cAAc,CAAC,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,cAAc,CAAC,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;~~YAA9D~~;GACG,aAAa,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GACxD,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;~~cAEA~~,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}
1	+ {"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n route: RouteExtended\n showEssentials?: boolean\n defaultExpanded?: boolean\n fromSlot?: React.ReactNode\n}> = ({ route, showEssentials, defaultExpanded, fromSlot }) => {\n const { mode } = useWidgetConfig()\n\n const fromToken = {\n ...route.steps[0].action.fromToken,\n amount: BigInt(route.steps[0].action.fromAmount),\n }\n\n const lastStepIndex = route.steps.length - 1\n const toToken = {\n ...(route.steps[lastStepIndex].execution?.toToken ??\n route.steps[lastStepIndex].action.toToken),\n amount: route.steps[lastStepIndex].execution?.toAmount\n ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n : mode === 'custom'\n ? BigInt(route.toAmount)\n : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n }\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n {fromSlot ?? (fromToken ? <Token token={fromToken} /> : null)}\n <Box\n sx={{\n width: 40,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n </Box>\n {toToken ? (\n <RouteToken\n route={route}\n token={toToken}\n impactToken={fromToken}\n showEssentials={showEssentials}\n defaultExpanded={defaultExpanded}\n />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAKP,EAAE,OAAO,gBAAgB,iBAAiB,eAAe;CAC7D,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,EAAE,CAAC,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,EAAE,CAAC,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,cAAc,CAAC,WAAW,WACxC,MAAM,MAAM,cAAc,CAAC,OAAO;EACpC,QAAQ,MAAM,MAAM,cAAc,CAAC,WAAW,WAC1C,OAAO,MAAM,MAAM,cAAc,CAAC,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,cAAc,CAAC,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAA9D,UAAA;GACG,aAAa,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GACxD,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;IAEA,UAAA,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}

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;~~YAEhB~~,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 } = 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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()\n const {\n routes,\n isLoading,\n isFetching,\n isFetched,\n dataUpdatedAt,\n refetchTime,\n refetch,\n } = useRoutes()\n\n const currentRoute = routes?.[0]\n\n if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n return null\n }\n\n const handleCardClick = () => {\n navigate({ to: navigationRoutes.routes })\n }\n\n const routeNotFound = !currentRoute && !isLoading && !isFetching\n const onlySingleRoute = mode === 'refuel' \|\| showSingleRoute\n const showAll =\n !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n const title =\n mode === 'custom'\n ? modeOptions?.custom?.type === 'deposit'\n ? t('header.receive')\n : t('header.youPay')\n : t('header.receive')\n\n return (\n <Card {...props}>\n {/* The cards layout's Receive card already carries this header. */}\n {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}\n <ProgressToNextUpdate\n updatedAt={dataUpdatedAt \|\| Date.now()}\n timeToUpdate={refetchTime}\n isLoading={isFetching}\n onClick={() => refetch()}\n sx={{\n position: 'absolute',\n top: 8,\n right: 8,\n }}\n />\n <Box\n sx={{\n p: 2,\n }}\n >\n {isLoading && !currentRoute ? (\n <RouteCardSkeleton variant=\"cardless\" />\n ) : !currentRoute ? (\n <RouteNotFoundCard />\n ) : (\n <RouteCard route={currentRoute} variant=\"cardless\" active />\n )}\n\n <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n <Box\n sx={{\n mt: 2,\n }}\n >\n <ButtonTertiary onClick={handleCardClick} fullWidth>\n {t('button.showAll')}\n </ButtonTertiary>\n </Box>\n </Collapse>\n </Box>\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,iBAAiB,cAAc,gBAAgB;CAC1E,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;~~YAAV~~;GAEG,WAAW,WAAW,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GACrE,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;~~cAHF~~,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;~~eACjD~~,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;~~gBAEA~~,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;~~iBACvC~~,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}
1	+ {"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()\n const {\n routes,\n isLoading,\n isFetching,\n isFetched,\n dataUpdatedAt,\n refetchTime,\n refetch,\n } = useRoutes()\n\n const currentRoute = routes?.[0]\n\n if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n return null\n }\n\n const handleCardClick = () => {\n navigate({ to: navigationRoutes.routes })\n }\n\n const routeNotFound = !currentRoute && !isLoading && !isFetching\n const onlySingleRoute = mode === 'refuel' \|\| showSingleRoute\n const showAll =\n !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n const title =\n mode === 'custom'\n ? modeOptions?.custom?.type === 'deposit'\n ? t('header.receive')\n : t('header.youPay')\n : t('header.receive')\n\n return (\n <Card {...props}>\n {/* The cards layout's Receive card already carries this header. */}\n {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}\n <ProgressToNextUpdate\n updatedAt={dataUpdatedAt \|\| Date.now()}\n timeToUpdate={refetchTime}\n isLoading={isFetching}\n onClick={() => refetch()}\n sx={{\n position: 'absolute',\n top: 8,\n right: 8,\n }}\n />\n <Box\n sx={{\n p: 2,\n }}\n >\n {isLoading && !currentRoute ? (\n <RouteCardSkeleton variant=\"cardless\" />\n ) : !currentRoute ? (\n <RouteNotFoundCard />\n ) : (\n <RouteCard route={currentRoute} variant=\"cardless\" active />\n )}\n\n <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n <Box\n sx={{\n mt: 2,\n }}\n >\n <ButtonTertiary onClick={handleCardClick} fullWidth>\n {t('button.showAll')}\n </ButtonTertiary>\n </Box>\n </Collapse>\n </Box>\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,iBAAiB,cAAc,gBAAgB;CAC1E,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;EAAV,UAAA;GAEG,WAAW,WAAW,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GACrE,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;IAHF,UAAA,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;KACjD,UAAA,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;MAEA,UAAA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;OACvC,UAAA,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}

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;~~YAA5C~~,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;~~aAAnC~~,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;~~cAEC~~;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;~~MACR~~,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;~~aAE~~/D,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;~~cAEC~~,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 } = 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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n canOpen: boolean\n setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n memo(function RoutesExpanded({\n canOpen,\n setOpenExpansion,\n }: RoutesExpandedProps) {\n const emitter = useWidgetEvents()\n const navigate = useNavigate()\n const routesRef = useRef<Route[]>(undefined)\n const routesActiveRef = useRef(false)\n\n const {\n routes,\n isLoading,\n isFetching,\n isFetched,\n dataUpdatedAt,\n refetchTime,\n fromChain,\n refetch,\n setReviewableRoute,\n } = useRoutes()\n\n const onExit = useCallback(() => {\n // Clean routes cache on exit\n routesRef.current = undefined\n }, [])\n\n // We cache routes results in ref for a better exit animation\n if (routesRef.current && !routes) {\n routesActiveRef.current = false\n // If we are loading routes with a new queryKey, we need to clear the cache\n if (isLoading) {\n routesRef.current = undefined\n }\n } else {\n routesRef.current = routes\n routesActiveRef.current = Boolean(routes)\n }\n\n const expanded =\n Boolean(\n routesActiveRef.current \|\| isLoading \|\| isFetching \|\| isFetched\n ) && canOpen\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n const onRouteClick = useCallback(\n (route: Route) => {\n setReviewableRoute(route)\n navigate({\n to: navigationRoutes.transactionExecution,\n search: { routeId: route.id },\n })\n emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n },\n [emitter, routes, setReviewableRoute]\n )\n\n // Use layout effect to update parent's width when expansion changes\n useLayoutEffect(() => {\n setOpenExpansion(expanded)\n }, [expanded, setOpenExpansion])\n\n useEffect(() => {\n emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n }, [emitter, expanded])\n\n return (\n <ExpansionTransition\n in={expanded}\n width={routesExpansionWidth}\n onExited={onExit}\n >\n <RoutesContent\n routes={routesRef.current}\n isFetching={isFetching}\n isLoading={isLoading}\n dataUpdatedAt={dataUpdatedAt}\n refetchTime={refetchTime}\n fromChain={fromChain}\n refetch={refetch}\n onRouteClick={onRouteClick}\n />\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,gBAAgB;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,OAAgB,KAAA,CAAS;CAC3C,MAAM,kBAAkB,OAAO,KAAK;CAEpC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CAEd,MAAM,SAAS,kBAAkB;EAE/B,UAAU,UAAU,KAAA;CACtB,GAAG,CAAC,CAAC;CAGL,IAAI,UAAU,WAAW,CAAC,QAAQ;EAChC,gBAAgB,UAAU;EAE1B,IAAI,WACF,UAAU,UAAU,KAAA;CAExB,OAAO;EACL,UAAU,UAAU;EACpB,gBAAgB,UAAU,QAAQ,MAAM;CAC1C;CAEA,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,SACxD,KAAK;CAGP,MAAM,eAAe,aAClB,UAAiB;EAChB,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GAAE;GAAe;EAAQ,CAAC;CACpE,GACA;EAAC;EAAS;EAAQ;CAAkB,CACtC;CAGA,sBAAsB;EACpB,iBAAiB,QAAQ;CAC3B,GAAG,CAAC,UAAU,gBAAgB,CAAC;CAE/B,gBAAgB;EACd,QAAQ,KAAA,kBAAiC,QAAQ;CACnD,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,OACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;~~YAEV~~,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;EACf,CAAA;CACkB,CAAA;AAEzB,CAAC"}
1	+ {"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n canOpen: boolean\n setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n memo(function RoutesExpanded({\n canOpen,\n setOpenExpansion,\n }: RoutesExpandedProps) {\n const emitter = useWidgetEvents()\n const navigate = useNavigate()\n const routesRef = useRef<Route[]>(undefined)\n const routesActiveRef = useRef(false)\n\n const {\n routes,\n isLoading,\n isFetching,\n isFetched,\n dataUpdatedAt,\n refetchTime,\n fromChain,\n refetch,\n setReviewableRoute,\n } = useRoutes()\n\n const onExit = useCallback(() => {\n // Clean routes cache on exit\n routesRef.current = undefined\n }, [])\n\n // We cache routes results in ref for a better exit animation\n if (routesRef.current && !routes) {\n routesActiveRef.current = false\n // If we are loading routes with a new queryKey, we need to clear the cache\n if (isLoading) {\n routesRef.current = undefined\n }\n } else {\n routesRef.current = routes\n routesActiveRef.current = Boolean(routes)\n }\n\n const expanded =\n Boolean(\n routesActiveRef.current \|\| isLoading \|\| isFetching \|\| isFetched\n ) && canOpen\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n const onRouteClick = useCallback(\n (route: Route) => {\n setReviewableRoute(route)\n navigate({\n to: navigationRoutes.transactionExecution,\n search: { routeId: route.id },\n })\n emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n },\n [emitter, routes, setReviewableRoute]\n )\n\n // Use layout effect to update parent's width when expansion changes\n useLayoutEffect(() => {\n setOpenExpansion(expanded)\n }, [expanded, setOpenExpansion])\n\n useEffect(() => {\n emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n }, [emitter, expanded])\n\n return (\n <ExpansionTransition\n in={expanded}\n width={routesExpansionWidth}\n onExited={onExit}\n >\n <RoutesContent\n routes={routesRef.current}\n isFetching={isFetching}\n isLoading={isLoading}\n dataUpdatedAt={dataUpdatedAt}\n refetchTime={refetchTime}\n fromChain={fromChain}\n refetch={refetch}\n onRouteClick={onRouteClick}\n />\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,gBAAgB;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,OAAgB,KAAA,CAAS;CAC3C,MAAM,kBAAkB,OAAO,KAAK;CAEpC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CAEd,MAAM,SAAS,kBAAkB;EAE/B,UAAU,UAAU,KAAA;CACtB,GAAG,CAAC,CAAC;CAGL,IAAI,UAAU,WAAW,CAAC,QAAQ;EAChC,gBAAgB,UAAU;EAE1B,IAAI,WACF,UAAU,UAAU,KAAA;CAExB,OAAO;EACL,UAAU,UAAU;EACpB,gBAAgB,UAAU,QAAQ,MAAM;CAC1C;CAEA,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,SACxD,KAAK;CAGP,MAAM,eAAe,aAClB,UAAiB;EAChB,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GAAE;GAAe;EAAQ,CAAC;CACpE,GACA;EAAC;EAAS;EAAQ;CAAkB,CACtC;CAGA,sBAAsB;EACpB,iBAAiB,QAAQ;CAC3B,GAAG,CAAC,UAAU,gBAAgB,CAAC;CAE/B,gBAAgB;EACd,QAAQ,KAAA,kBAAiC,QAAQ;CACnD,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,OACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;EAEV,UAAA,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;EACf,CAAA;CACkB,CAAA;AAEzB,CAAC"}

package/dist/esm/components/Search/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import ClearIcon from '@mui/icons-material/Clear'\nimport Search from '@mui/icons-material/Search'\nimport { FormControl, IconButton, InputAdornment } from '@mui/material'\nimport type {\n ChangeEventHandler,\n FocusEventHandler,\n JSX,\n RefObject,\n} from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from './SearchInput.style.js'\n\ninterface SearchInputProps {\n inputRef?: RefObject<HTMLInputElement \| null>\n name?: string\n value?: string\n placeholder?: string\n onChange?: ChangeEventHandler<HTMLInputElement>\n onBlur?: FocusEventHandler<HTMLInputElement>\n onClear?: () => void\n autoFocus?: boolean\n size?: 'small' \| 'medium'\n}\n\nexport const SearchInput = ({\n inputRef,\n name,\n placeholder,\n onChange,\n onBlur,\n onClear,\n value,\n autoFocus,\n size = 'medium',\n}: SearchInputProps): JSX.Element => {\n return (\n <InputCard>\n <FormControl fullWidth>\n <Input\n inputRef={inputRef}\n size={size}\n placeholder={placeholder}\n startAdornment={\n <InputAdornment position=\"start\">\n <Search />\n </InputAdornment>\n }\n endAdornment={\n (value \|\| inputRef?.current?.value) &&\n onClear && (\n <InputAdornment position=\"end\">\n <IconButton\n size={size}\n onClick={onClear}\n aria-label=\"Clear\"\n tabIndex={-1}\n sx={{\n padding: 0.5,\n }}\n >\n <ClearIcon fontSize={size} />\n </IconButton>\n </InputAdornment>\n )\n }\n inputProps={{\n inputMode: 'search',\n onChange,\n onBlur,\n name,\n value,\n maxLength: 128,\n }}\n autoComplete=\"off\"\n autoFocus={autoFocus}\n />\n </FormControl>\n </InputCard>\n )\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,eAAe,EAC1B,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,OAAO,eAC4B;CACnC,OACE,oBAAC,WAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAA;~~YACX~~,oBAAC,OAAD;GACY;GACJ;GACO;GACb,gBACE,oBAAC,gBAAD;IAAgB,UAAS;~~cACvB~~,oBAAC,QAAD,CAAS,CAAA;GACK,CAAA;GAElB,eACG,SAAS,UAAU,SAAS,UAC7B,WACE,oBAAC,gBAAD;IAAgB,UAAS;~~cACvB~~,oBAAC,YAAD;KACQ;KACN,SAAS;KACT,cAAW;KACX,UAAU;KACV,IAAI,EACF,SAAS,GACX;~~eAEA~~,oBAAC,WAAD,EAAW,UAAU,KAAO,CAAA;IAClB,CAAA;GACE,CAAA;GAGpB,YAAY;IACV,WAAW;IACX;IACA;IACA;IACA;IACA,WAAW;GACb;GACA,cAAa;GACF;EACZ,CAAA;CACU,CAAA,EACJ,CAAA;AAEf"}
1	+ {"version":3,"file":"SearchInput.js","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import ClearIcon from '@mui/icons-material/Clear'\nimport Search from '@mui/icons-material/Search'\nimport { FormControl, IconButton, InputAdornment } from '@mui/material'\nimport type {\n ChangeEventHandler,\n FocusEventHandler,\n JSX,\n RefObject,\n} from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from './SearchInput.style.js'\n\ninterface SearchInputProps {\n inputRef?: RefObject<HTMLInputElement \| null>\n name?: string\n value?: string\n placeholder?: string\n onChange?: ChangeEventHandler<HTMLInputElement>\n onBlur?: FocusEventHandler<HTMLInputElement>\n onClear?: () => void\n autoFocus?: boolean\n size?: 'small' \| 'medium'\n}\n\nexport const SearchInput = ({\n inputRef,\n name,\n placeholder,\n onChange,\n onBlur,\n onClear,\n value,\n autoFocus,\n size = 'medium',\n}: SearchInputProps): JSX.Element => {\n return (\n <InputCard>\n <FormControl fullWidth>\n <Input\n inputRef={inputRef}\n size={size}\n placeholder={placeholder}\n startAdornment={\n <InputAdornment position=\"start\">\n <Search />\n </InputAdornment>\n }\n endAdornment={\n (value \|\| inputRef?.current?.value) &&\n onClear && (\n <InputAdornment position=\"end\">\n <IconButton\n size={size}\n onClick={onClear}\n aria-label=\"Clear\"\n tabIndex={-1}\n sx={{\n padding: 0.5,\n }}\n >\n <ClearIcon fontSize={size} />\n </IconButton>\n </InputAdornment>\n )\n }\n inputProps={{\n inputMode: 'search',\n onChange,\n onBlur,\n name,\n value,\n maxLength: 128,\n }}\n autoComplete=\"off\"\n autoFocus={autoFocus}\n />\n </FormControl>\n </InputCard>\n )\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,eAAe,EAC1B,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,OAAO,eAC4B;CACnC,OACE,oBAAC,WAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAA;EACX,UAAA,oBAAC,OAAD;GACY;GACJ;GACO;GACb,gBACE,oBAAC,gBAAD;IAAgB,UAAS;IACvB,UAAA,oBAAC,QAAD,CAAS,CAAA;GACK,CAAA;GAElB,eACG,SAAS,UAAU,SAAS,UAC7B,WACE,oBAAC,gBAAD;IAAgB,UAAS;IACvB,UAAA,oBAAC,YAAD;KACQ;KACN,SAAS;KACT,cAAW;KACX,UAAU;KACV,IAAI,EACF,SAAS,GACX;KAEA,UAAA,oBAAC,WAAD,EAAW,UAAU,KAAO,CAAA;IAClB,CAAA;GACE,CAAA;GAGpB,YAAY;IACV,WAAW;IACX;IACA;IACA;IACA;IACA,WAAW;GACb;GACA,cAAa;GACF;EACZ,CAAA;CACU,CAAA,EACJ,CAAA;AAEf"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n const hiddenReverse =\n mode === 'refuel' \|\|\n disabledUI?.fromToken \|\|\n disabledUI?.toToken \|\|\n hiddenUI?.fromToken \|\|\n hiddenUI?.toToken \|\|\n hiddenUI?.reverseTokensButton\n\n const hiddenFromToken = hiddenUI?.fromToken\n const hiddenToToken = mode === 'custom' \|\| hiddenUI?.toToken\n\n const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n return (\n <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n {!hiddenFromToken ? (\n <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n ) : null}\n {showReverseButton ? (\n !hiddenReverse ? (\n <ReverseTokensButton />\n ) : (\n <ReverseTokensButtonEmpty />\n )\n ) : null}\n {!hiddenToToken ? (\n <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,SAAS,gBAAgB;CAEvD,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;~~YAAnD~~;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}
1	+ {"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n const hiddenReverse =\n mode === 'refuel' \|\|\n disabledUI?.fromToken \|\|\n disabledUI?.toToken \|\|\n hiddenUI?.fromToken \|\|\n hiddenUI?.toToken \|\|\n hiddenUI?.reverseTokensButton\n\n const hiddenFromToken = hiddenUI?.fromToken\n const hiddenToToken = mode === 'custom' \|\| hiddenUI?.toToken\n\n const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n return (\n <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n {!hiddenFromToken ? (\n <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n ) : null}\n {showReverseButton ? (\n !hiddenReverse ? (\n <ReverseTokensButton />\n ) : (\n <ReverseTokensButtonEmpty />\n )\n ) : null}\n {!hiddenToToken ? (\n <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,SAAS,gBAAgB;CAEvD,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;EAAnD,UAAA;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectTokenButton.js","names":["CardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { ChainOrderState } from '../../stores/chains/types.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n CardContent,\n SelectTokenCard,\n SelectTokenCardHeader,\n} from './SelectTokenButton.style.js'\n\nexport const SelectTokenButton: React.FC<\n FormTypeProps & {\n hiddenReverse?: boolean\n }\n> = ({ formType, hiddenReverse }) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { disabledUI, mode } = useWidgetConfig()\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n tokenKey\n )\n const { chain, isLoading: isChainLoading } = useChain(chainId)\n const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)\n\n const isAllNetworks = useChainOrderStore(\n (state: ChainOrderState) => state[`${formType}IsAllNetworks`]\n )\n\n const handleClick = () => {\n navigate({\n to:\n formType === 'from'\n ? navigationRoutes.fromToken\n : mode === 'refuel'\n ? navigationRoutes.toTokenNative\n : navigationRoutes.toToken,\n })\n }\n\n const isSelected = !!(chain && token)\n const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]\n ? handleClick\n : undefined\n const defaultPlaceholder = `${t('main.select')}...`\n const cardTitle: string =\n formType === 'from' && mode === 'custom'\n ? t('header.payWith')\n : t(`main.${formType}`)\n return (\n <SelectTokenCard component=\"button\" onClick={onClick}>\n <CardContent formType={formType} mask={!hiddenReverse}>\n <CardTitle>{cardTitle}</CardTitle>\n {chainId && tokenAddress && (isChainLoading \|\| isTokenLoading) ? (\n <SelectTokenCardHeader\n avatar={<AvatarBadgedSkeleton />}\n title={<Skeleton variant=\"text\" width={64} height={24} />}\n subheader={<Skeleton variant=\"text\" width={72} height={16} />}\n />\n ) : (\n <SelectTokenCardHeader\n avatar={\n isSelected ? (\n <TokenAvatar token={token} chain={chain} />\n ) : (\n <AvatarBadgedDefault\n chain={isAllNetworks ? undefined : chain}\n />\n )\n }\n title={isSelected ? token.symbol : defaultPlaceholder}\n slotProps={{\n title: {\n title: isSelected ? token.symbol : defaultPlaceholder,\n },\n subheader: {\n title: isSelected ? chain.name : undefined,\n },\n }}\n subheader={isSelected ? chain.name : null}\n selected={isSelected}\n />\n )}\n </CardContent>\n </SelectTokenCard>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAa,qBAIR,EAAE,UAAU,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CACA,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,OAAO;CAC7D,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,SAAS,YAAY;CAE3E,MAAM,gBAAgB,oBACnB,UAA2B,MAAM,GAAG,SAAS,eAChD;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,EAAE,SAAS;CAC/B,MAAM,UAAU,CAAC,aAAa,YAC1B,cACA,KAAA;CACJ,MAAM,qBAAqB,GAAG,EAAE,aAAa,EAAE;CAC/C,MAAM,YACJ,aAAa,UAAU,SAAS,WAC5B,EAAE,gBAAgB,IAClB,EAAE,QAAQ,UAAU;CAC1B,OACE,oBAAC,iBAAD;EAAiB,WAAU;EAAkB;~~YAC3C~~,qBAACA,eAAD;GAAuB;GAAU,MAAM,CAAC;~~aAAxC~~,CACE,oBAAC,WAAD,EAAA,UAAY,UAAqB,CAAA,GAChC,WAAW,iBAAiB,kBAAkB,kBAC7C,oBAAC,uBAAD;IACE,QAAQ,oBAAC,sBAAD,CAAuB,CAAA;IAC/B,OAAO,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;IACxD,WAAW,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;GAC7D,CAAA,IAED,oBAAC,uBAAD;IACE,QACE,aACE,oBAAC,aAAD;KAAoB;KAAc;IAAQ,CAAA,IAE1C,oBAAC,qBAAD,EACE,OAAO,gBAAgB,KAAA,IAAY,MACpC,CAAA;IAGL,OAAO,aAAa,MAAM,SAAS;IACnC,WAAW;KACT,OAAO,EACL,OAAO,aAAa,MAAM,SAAS,mBACrC;KACA,WAAW,EACT,OAAO,aAAa,MAAM,OAAO,KAAA,EACnC;IACF;IACA,WAAW,aAAa,MAAM,OAAO;IACrC,UAAU;GACX,CAAA,CAEQ;;CACE,CAAA;AAErB"}
1	+ {"version":3,"file":"SelectTokenButton.js","names":["CardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { ChainOrderState } from '../../stores/chains/types.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n CardContent,\n SelectTokenCard,\n SelectTokenCardHeader,\n} from './SelectTokenButton.style.js'\n\nexport const SelectTokenButton: React.FC<\n FormTypeProps & {\n hiddenReverse?: boolean\n }\n> = ({ formType, hiddenReverse }) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { disabledUI, mode } = useWidgetConfig()\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n tokenKey\n )\n const { chain, isLoading: isChainLoading } = useChain(chainId)\n const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)\n\n const isAllNetworks = useChainOrderStore(\n (state: ChainOrderState) => state[`${formType}IsAllNetworks`]\n )\n\n const handleClick = () => {\n navigate({\n to:\n formType === 'from'\n ? navigationRoutes.fromToken\n : mode === 'refuel'\n ? navigationRoutes.toTokenNative\n : navigationRoutes.toToken,\n })\n }\n\n const isSelected = !!(chain && token)\n const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]\n ? handleClick\n : undefined\n const defaultPlaceholder = `${t('main.select')}...`\n const cardTitle: string =\n formType === 'from' && mode === 'custom'\n ? t('header.payWith')\n : t(`main.${formType}`)\n return (\n <SelectTokenCard component=\"button\" onClick={onClick}>\n <CardContent formType={formType} mask={!hiddenReverse}>\n <CardTitle>{cardTitle}</CardTitle>\n {chainId && tokenAddress && (isChainLoading \|\| isTokenLoading) ? (\n <SelectTokenCardHeader\n avatar={<AvatarBadgedSkeleton />}\n title={<Skeleton variant=\"text\" width={64} height={24} />}\n subheader={<Skeleton variant=\"text\" width={72} height={16} />}\n />\n ) : (\n <SelectTokenCardHeader\n avatar={\n isSelected ? (\n <TokenAvatar token={token} chain={chain} />\n ) : (\n <AvatarBadgedDefault\n chain={isAllNetworks ? undefined : chain}\n />\n )\n }\n title={isSelected ? token.symbol : defaultPlaceholder}\n slotProps={{\n title: {\n title: isSelected ? token.symbol : defaultPlaceholder,\n },\n subheader: {\n title: isSelected ? chain.name : undefined,\n },\n }}\n subheader={isSelected ? chain.name : null}\n selected={isSelected}\n />\n )}\n </CardContent>\n </SelectTokenCard>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAa,qBAIR,EAAE,UAAU,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CACA,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,OAAO;CAC7D,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,SAAS,YAAY;CAE3E,MAAM,gBAAgB,oBACnB,UAA2B,MAAM,GAAG,SAAS,eAChD;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,EAAE,SAAS;CAC/B,MAAM,UAAU,CAAC,aAAa,YAC1B,cACA,KAAA;CACJ,MAAM,qBAAqB,GAAG,EAAE,aAAa,EAAE;CAC/C,MAAM,YACJ,aAAa,UAAU,SAAS,WAC5B,EAAE,gBAAgB,IAClB,EAAE,QAAQ,UAAU;CAC1B,OACE,oBAAC,iBAAD;EAAiB,WAAU;EAAkB;EAC3C,UAAA,qBAACA,eAAD;GAAuB;GAAU,MAAM,CAAC;GAAxC,UAAA,CACE,oBAAC,WAAD,EAAA,UAAY,UAAqB,CAAA,GAChC,WAAW,iBAAiB,kBAAkB,kBAC7C,oBAAC,uBAAD;IACE,QAAQ,oBAAC,sBAAD,CAAuB,CAAA;IAC/B,OAAO,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;IACxD,WAAW,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;GAC7D,CAAA,IAED,oBAAC,uBAAD;IACE,QACE,aACE,oBAAC,aAAD;KAAoB;KAAc;IAAQ,CAAA,IAE1C,oBAAC,qBAAD,EACE,OAAO,gBAAgB,KAAA,IAAY,MACpC,CAAA;IAGL,OAAO,aAAa,MAAM,SAAS;IACnC,WAAW;KACT,OAAO,EACL,OAAO,aAAa,MAAM,SAAS,mBACrC;KACA,WAAW,EACT,OAAO,aAAa,MAAM,OAAO,KAAA,EACnC;IACF;IACA,WAAW,aAAa,MAAM,OAAO;IACrC,UAAU;GACX,CAAA,CAEQ;;CACE,CAAA;AAErB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n SendToWalletCardHeader,\n SendToWalletCardTitleRow,\n SendToWalletRequiredLabel,\n SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<\n CardProps & {\n onEditAddress?: (() => void) \| null\n onClearAddress?: () => void\n // Keep the card visible (and flag it required when empty) even when the\n // widget's own toAddress requirement is off, e.g. a user-settable checkout\n // recipient that must be filled before continuing.\n requireAddress?: boolean\n }\n> = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n useWidgetConfig()\n const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n 'toAddress',\n 'toChain',\n 'toToken'\n )\n const { setFieldValue } = useFieldActions()\n const { selectedBookmark } = useBookmarks()\n const { setSelectedBookmark } = useBookmarkActions()\n const { accounts } = useAccount()\n const { getChainTypeFromAddress } = useChainTypeFromAddress()\n const { requiredToAddress } = useToAddressRequirements()\n const disabledToAddress = disabledUI?.toAddress\n const hiddenToAddress = hiddenUI?.toAddress\n\n const address = toAddressFieldValue\n ? shortenAddress(toAddressFieldValue)\n : t('sendToWallet.enterAddress', {\n context: 'short',\n })\n\n const matchingConnectedAccount = accounts.find(\n (account) => account.address === toAddressFieldValue\n )\n\n const chainType = !matchingConnectedAccount\n ? selectedBookmark?.chainType \|\|\n (toAddressFieldValue\n ? getChainTypeFromAddress(toAddressFieldValue)\n : undefined)\n : undefined\n\n const chainId =\n toChainId && toTokenAddress\n ? toChainId\n : matchingConnectedAccount\n ? matchingConnectedAccount.chainId\n : chainType\n ? defaultChainIdsByType[chainType]\n : undefined\n\n const isConnectedAccount =\n selectedBookmark?.isConnectedAccount &&\n matchingConnectedAccount?.isConnected\n const connectedAccountName = matchingConnectedAccount?.connector?.name\n const bookmarkName = selectedBookmark?.name\n\n const headerTitle = isConnectedAccount\n ? connectedAccountName \|\| address\n : bookmarkName \|\| connectedAccountName \|\| address\n\n const headerSubheader =\n isConnectedAccount \|\| bookmarkName \|\| connectedAccountName ? address : null\n\n const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n // `onEditAddress === null` renders the card read-only (consumer-controlled,\n // e.g. a fixed checkout recipient); a function overrides the default route nav.\n const readOnly = onEditAddress === null \|\| disabledForChanges\n\n const handleOnClick = () => {\n if (onEditAddress !== undefined) {\n onEditAddress?.()\n return\n }\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n }\n\n const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n if (onClearAddress) {\n onClearAddress()\n return\n }\n setFieldValue('toAddress', '', { isTouched: true })\n setSelectedBookmark()\n }\n\n // The collapse opens instantly on first page load/component mount when there is an address to display\n // After which it needs an animated transition for open and closing.\n // collapseTransitionTime is used specify the transition time for opening and closing\n const collapseTransitionTime = useRef(0)\n\n // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n useEffect(() => {\n const timeout = setTimeout(() => {\n collapseTransitionTime.current = 225\n }, 0)\n return () => clearTimeout(timeout)\n }, [])\n\n const addressRequired = requireAddress \|\| requiredToAddress\n const isOpenCollapse =\n !hiddenToAddress && (addressRequired \|\| !!toAddressFieldValue)\n\n const title =\n mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n ? t('header.depositTo')\n : t('header.sendToWallet')\n\n return (\n <Collapse\n timeout={collapseTransitionTime.current as number}\n in={isOpenCollapse}\n mountOnEnter\n unmountOnExit\n >\n <Card\n role=\"button\"\n onClick={readOnly ? undefined : handleOnClick}\n sx={{ width: '100%', ...props.sx }}\n >\n <SendToWalletCardTitleRow>\n <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n {addressRequired && !toAddressFieldValue ? (\n <SendToWalletRequiredLabel variant=\"warning\">\n <WarningRounded sx={{ fontSize: 14 }} />\n <SendToWalletRequiredLabelText type=\"icon\">\n {t('sendToWallet.required')}\n </SendToWalletRequiredLabelText>\n </SendToWalletRequiredLabel>\n ) : null}\n </SendToWalletCardTitleRow>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <SendToWalletCardHeader\n avatar={\n <AccountAvatar\n chainId={chainId}\n account={matchingConnectedAccount}\n toAddress={toAddress}\n empty={!toAddressFieldValue}\n />\n }\n title={headerTitle}\n subheader={headerSubheader}\n selected={!!toAddressFieldValue \|\| disabledToAddress}\n action={\n toAddressFieldValue && !readOnly ? (\n <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n <CloseRounded fontSize=\"inherit\" />\n </CardIconButton>\n ) : null\n }\n />\n </Box>\n </Card>\n </Collapse>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n SendToWalletCardHeader,\n SendToWalletCardTitleRow,\n SendToWalletRequiredLabel,\n SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<\n CardProps & {\n onEditAddress?: (() => void) \| null\n onClearAddress?: () => void\n // Keep the card visible (and flag it required when empty) even when the\n // widget's own toAddress requirement is off, e.g. a user-settable checkout\n // recipient that must be filled before continuing.\n requireAddress?: boolean\n }\n> = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n useWidgetConfig()\n const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n 'toAddress',\n 'toChain',\n 'toToken'\n )\n const { setFieldValue } = useFieldActions()\n const { selectedBookmark } = useBookmarks()\n const { setSelectedBookmark } = useBookmarkActions()\n const { accounts } = useAccount()\n const { getChainTypeFromAddress } = useChainTypeFromAddress()\n const { requiredToAddress } = useToAddressRequirements()\n const disabledToAddress = disabledUI?.toAddress\n const hiddenToAddress = hiddenUI?.toAddress\n\n const address = toAddressFieldValue\n ? shortenAddress(toAddressFieldValue)\n : t('sendToWallet.enterAddress', {\n context: 'short',\n })\n\n const matchingConnectedAccount = accounts.find(\n (account) => account.address === toAddressFieldValue\n )\n\n const chainType = !matchingConnectedAccount\n ? selectedBookmark?.chainType \|\|\n (toAddressFieldValue\n ? getChainTypeFromAddress(toAddressFieldValue)\n : undefined)\n : undefined\n\n const chainId =\n toChainId && toTokenAddress\n ? toChainId\n : matchingConnectedAccount\n ? matchingConnectedAccount.chainId\n : chainType\n ? defaultChainIdsByType[chainType]\n : undefined\n\n const isConnectedAccount =\n selectedBookmark?.isConnectedAccount &&\n matchingConnectedAccount?.isConnected\n const connectedAccountName = matchingConnectedAccount?.connector?.name\n const bookmarkName = selectedBookmark?.name\n\n const headerTitle = isConnectedAccount\n ? connectedAccountName \|\| address\n : bookmarkName \|\| connectedAccountName \|\| address\n\n const headerSubheader =\n isConnectedAccount \|\| bookmarkName \|\| connectedAccountName ? address : null\n\n const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n // `onEditAddress === null` renders the card read-only (consumer-controlled,\n // e.g. a fixed checkout recipient); a function overrides the default route nav.\n const readOnly = onEditAddress === null \|\| disabledForChanges\n\n const handleOnClick = () => {\n if (onEditAddress !== undefined) {\n onEditAddress?.()\n return\n }\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n }\n\n const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n if (onClearAddress) {\n onClearAddress()\n return\n }\n setFieldValue('toAddress', '', { isTouched: true })\n setSelectedBookmark()\n }\n\n // The collapse opens instantly on first page load/component mount when there is an address to display\n // After which it needs an animated transition for open and closing.\n // collapseTransitionTime is used specify the transition time for opening and closing\n const collapseTransitionTime = useRef(0)\n\n // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n useEffect(() => {\n const timeout = setTimeout(() => {\n collapseTransitionTime.current = 225\n }, 0)\n return () => clearTimeout(timeout)\n }, [])\n\n const addressRequired = requireAddress \|\| requiredToAddress\n const isOpenCollapse =\n !hiddenToAddress && (addressRequired \|\| !!toAddressFieldValue)\n\n const title =\n mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n ? t('header.depositTo')\n : t('header.sendToWallet')\n\n return (\n <Collapse\n timeout={collapseTransitionTime.current as number}\n in={isOpenCollapse}\n mountOnEnter\n unmountOnExit\n >\n <Card\n role=\"button\"\n onClick={readOnly ? undefined : handleOnClick}\n sx={{ width: '100%', ...props.sx }}\n >\n <SendToWalletCardTitleRow>\n <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n {addressRequired && !toAddressFieldValue ? (\n <SendToWalletRequiredLabel variant=\"warning\">\n <WarningRounded sx={{ fontSize: 14 }} />\n <SendToWalletRequiredLabelText type=\"icon\">\n {t('sendToWallet.required')}\n </SendToWalletRequiredLabelText>\n </SendToWalletRequiredLabel>\n ) : null}\n </SendToWalletCardTitleRow>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <SendToWalletCardHeader\n avatar={\n <AccountAvatar\n chainId={chainId}\n account={matchingConnectedAccount}\n toAddress={toAddress}\n empty={!toAddressFieldValue}\n />\n }\n title={headerTitle}\n subheader={headerSubheader}\n selected={!!toAddressFieldValue \|\| disabledToAddress}\n action={\n toAddressFieldValue && !readOnly ? (\n <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n <CloseRounded fontSize=\"inherit\" />\n </CardIconButton>\n ) : null\n }\n />\n </Box>\n </Card>\n </Collapse>\n )\n}\n"],"mappings":"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"}

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;~~YAEA~~,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;~~aAChD~~,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;~~cAEA~~,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 } = 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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsPanel.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Card } from '../Card/Card.js'\nimport {\n SettingsPanelButton,\n SettingsPanelContainer,\n SettingsPanelTitle,\n SettingsPanelValue,\n} from './SettingsPanel.style.js'\nimport {\n bridgeSettingsPanelKeys,\n type SettingsPanelKey,\n swapSettingsPanelKeys,\n} from './utils.js'\n\nexport const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const splitMode = useSplitMode()\n const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])\n const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =\n useSettingsStore((state) => [\n Object.values(state._enabledBridges).filter(Boolean).length,\n Object.values(state._enabledBridges).length,\n Object.values(state._enabledExchanges).filter(Boolean).length,\n Object.values(state._enabledExchanges).length,\n ])\n\n const rows =\n splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys\n\n const labelByKey: Record<SettingsPanelKey, string> = {\n routePriority: t('settings.routePriority'),\n exchanges: t('settings.enabledExchanges'),\n bridges: t('settings.enabledBridges'),\n slippage: t('settings.slippage'),\n }\n\n const valueByKey: Record<SettingsPanelKey, string> = {\n routePriority:\n routePriority === 'FASTEST'\n ? t('settings.routePriorityOptions.fastest.title')\n : t('settings.routePriorityOptions.cheapest.title'),\n exchanges: `${enabledExchanges}/${totalExchanges}`,\n bridges: `${enabledBridges}/${totalBridges}`,\n slippage: slippage ? `${slippage}%` : t('button.auto'),\n }\n\n const handleClick = (key: SettingsPanelKey) => {\n navigate({\n to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,\n })\n }\n\n return (\n <SettingsPanelContainer {...props}>\n {rows.map((key) => (\n <Card key={key}>\n <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>\n <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>\n <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>\n </SettingsPanelButton>\n </Card>\n ))}\n </SettingsPanelContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,iBAAqC,UAAuB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,aAAa;CAC/B,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,CAAC,gBAAgB,cAAc,kBAAkB,kBACrD,kBAAkB,UAAU;EAC1B,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACrD,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC;EACrC,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACvD,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC;CACzC,CAAC;CAEH,MAAM,OACJ,cAAc,WAAW,0BAA0B;CAErD,MAAM,aAA+C;EACnD,eAAe,EAAE,wBAAwB;EACzC,WAAW,EAAE,2BAA2B;EACxC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,mBAAmB;CACjC;CAEA,MAAM,aAA+C;EACnD,eACE,kBAAkB,YACd,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACtD,WAAW,GAAG,iBAAiB,GAAG;EAClC,SAAS,GAAG,eAAe,GAAG;EAC9B,UAAU,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;CACvD;CAEA,MAAM,eAAe,QAA0B;EAC7C,SAAS,EACP,IAAI,IAAI,iBAAiB,SAAS,GAAG,iBAAiB,OACxD,CAAC;CACH;CAEA,OACE,oBAAC,wBAAD;EAAwB,GAAI;~~YACzB~~,KAAK,KAAK,QACT,oBAAC,MAAD,EAAA,UACE,qBAAC,qBAAD;GAAqB,eAAe,YAAY,GAAG;GAAG,eAAA;~~aAAtD~~,CACE,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,GACzD,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,CACtC;~~KACjB~~,GALK,GAKL,CACP;CACqB,CAAA;AAE5B"}
1	+ {"version":3,"file":"SettingsPanel.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Card } from '../Card/Card.js'\nimport {\n SettingsPanelButton,\n SettingsPanelContainer,\n SettingsPanelTitle,\n SettingsPanelValue,\n} from './SettingsPanel.style.js'\nimport {\n bridgeSettingsPanelKeys,\n type SettingsPanelKey,\n swapSettingsPanelKeys,\n} from './utils.js'\n\nexport const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const splitMode = useSplitMode()\n const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])\n const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =\n useSettingsStore((state) => [\n Object.values(state._enabledBridges).filter(Boolean).length,\n Object.values(state._enabledBridges).length,\n Object.values(state._enabledExchanges).filter(Boolean).length,\n Object.values(state._enabledExchanges).length,\n ])\n\n const rows =\n splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys\n\n const labelByKey: Record<SettingsPanelKey, string> = {\n routePriority: t('settings.routePriority'),\n exchanges: t('settings.enabledExchanges'),\n bridges: t('settings.enabledBridges'),\n slippage: t('settings.slippage'),\n }\n\n const valueByKey: Record<SettingsPanelKey, string> = {\n routePriority:\n routePriority === 'FASTEST'\n ? t('settings.routePriorityOptions.fastest.title')\n : t('settings.routePriorityOptions.cheapest.title'),\n exchanges: `${enabledExchanges}/${totalExchanges}`,\n bridges: `${enabledBridges}/${totalBridges}`,\n slippage: slippage ? `${slippage}%` : t('button.auto'),\n }\n\n const handleClick = (key: SettingsPanelKey) => {\n navigate({\n to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,\n })\n }\n\n return (\n <SettingsPanelContainer {...props}>\n {rows.map((key) => (\n <Card key={key}>\n <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>\n <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>\n <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>\n </SettingsPanelButton>\n </Card>\n ))}\n </SettingsPanelContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,iBAAqC,UAAuB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,aAAa;CAC/B,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,CAAC,gBAAgB,cAAc,kBAAkB,kBACrD,kBAAkB,UAAU;EAC1B,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACrD,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC;EACrC,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACvD,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC;CACzC,CAAC;CAEH,MAAM,OACJ,cAAc,WAAW,0BAA0B;CAErD,MAAM,aAA+C;EACnD,eAAe,EAAE,wBAAwB;EACzC,WAAW,EAAE,2BAA2B;EACxC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,mBAAmB;CACjC;CAEA,MAAM,aAA+C;EACnD,eACE,kBAAkB,YACd,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACtD,WAAW,GAAG,iBAAiB,GAAG;EAClC,SAAS,GAAG,eAAe,GAAG;EAC9B,UAAU,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;CACvD;CAEA,MAAM,eAAe,QAA0B;EAC7C,SAAS,EACP,IAAI,IAAI,iBAAiB,SAAS,GAAG,iBAAiB,OACxD,CAAC;CACH;CAEA,OACE,oBAAC,wBAAD;EAAwB,GAAI;EACzB,UAAA,KAAK,KAAK,QACT,oBAAC,MAAD,EAAA,UACE,qBAAC,qBAAD;GAAqB,eAAe,YAAY,GAAG;GAAG,eAAA;GAAtD,UAAA,CACE,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,GACzD,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,CACtC;EACjB,CAAA,EAAA,GALK,GAKL,CACP;CACqB,CAAA;AAE5B"}

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;~~WAAzB~~,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;~~WAA9B~~,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;~~YAEA~~,oBAAC,sBAAD;GAAsB,eAAY;~~aAChC~~,qBAAC,mBAAD;IAAmB,IAAI;KAAE,SAAS;KAAQ,eAAe;IAAS;~~cAAlE~~;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;~~gBADpD~~,CAGE,oBAAC,UAAD;OAAU,OAAO;OAAK,QAAQ;OAAI,SAAQ;MAAQ,CAAA,GAClD,oBAAC,cAAD,CAAe,CAAA,CACK;~~OACC~~,EAAA,CAAA;KAEzB,qBAAC,eAAD;MACE,IAAI;OACF,KAAK;OACL,eAAe,UAAU,YAAY,IAAI;MAC3C;~~gBAJF~~;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;~~kBAAU~~;OAE9B,CAAA,GACrB,CAAC,YAAY,YACZ,oBAAC,4BAAD;QAA4B,SAAQ;QAAO,WAAA;~~kBAAU~~;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.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/SentToWalletRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SentToWalletRow.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, IconButton } from '@mui/material'\nimport type { MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'\n\ninterface SentToWalletRowProps {\n toAddress: string\n toChainId: number\n}\n\nexport const SentToWalletRow: React.FC<SentToWalletRowProps> = ({\n toAddress,\n toChainId,\n}) => {\n const { t } = useTranslation()\n const { getAddressLink } = useExplorer()\n const addressLink = getAddressLink(toAddress, toChainId)\n\n const handleCopy = (e: MouseEvent) => {\n e.stopPropagation()\n navigator.clipboard.writeText(toAddress)\n }\n\n return (\n <ActionRow\n startAdornment={\n <ActionIconCircle>\n <Wallet color=\"success\" sx={{ fontSize: 16 }} />\n </ActionIconCircle>\n }\n message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}\n endAdornment={\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n <IconButton size=\"small\" onClick={handleCopy} sx={{ p: 0.5 }}>\n <ContentCopyRounded sx={{ fontSize: 16 }} />\n </IconButton>\n {addressLink ? (\n <ExternalLink\n href={addressLink}\n target=\"_blank\"\n rel=\"nofollow noreferrer\"\n >\n <OpenInNew sx={{ fontSize: 16 }} />\n </ExternalLink>\n ) : undefined}\n </Box>\n }\n />\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,WACA,gBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,cAAc,eAAe,WAAW,SAAS;CAEvD,MAAM,cAAc,MAAkB;EACpC,EAAE,gBAAgB;EAClB,UAAU,UAAU,UAAU,SAAS;CACzC;CAEA,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,IAAI,EAAE,UAAU,GAAG;EAAI,CAAA,EAC/B,CAAA;EAEpB,SAAS,GAAG,EAAE,mBAAmB,EAAE,IAAI,eAAe,SAAS;EAC/D,cACE,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;~~aAA3D~~,CACE,oBAAC,YAAD;IAAY,MAAK;IAAQ,SAAS;IAAY,IAAI,EAAE,GAAG,GAAI;~~cACzD~~,oBAAC,oBAAD,EAAoB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACjC,CAAA,GACX,cACC,oBAAC,cAAD;IACE,MAAM;IACN,QAAO;IACP,KAAI;~~cAEJ~~,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACtB,CAAA,IACZ,KAAA,CACD;;CAER,CAAA;AAEL"}
1	+ {"version":3,"file":"SentToWalletRow.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, IconButton } from '@mui/material'\nimport type { MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'\n\ninterface SentToWalletRowProps {\n toAddress: string\n toChainId: number\n}\n\nexport const SentToWalletRow: React.FC<SentToWalletRowProps> = ({\n toAddress,\n toChainId,\n}) => {\n const { t } = useTranslation()\n const { getAddressLink } = useExplorer()\n const addressLink = getAddressLink(toAddress, toChainId)\n\n const handleCopy = (e: MouseEvent) => {\n e.stopPropagation()\n navigator.clipboard.writeText(toAddress)\n }\n\n return (\n <ActionRow\n startAdornment={\n <ActionIconCircle>\n <Wallet color=\"success\" sx={{ fontSize: 16 }} />\n </ActionIconCircle>\n }\n message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}\n endAdornment={\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n <IconButton size=\"small\" onClick={handleCopy} sx={{ p: 0.5 }}>\n <ContentCopyRounded sx={{ fontSize: 16 }} />\n </IconButton>\n {addressLink ? (\n <ExternalLink\n href={addressLink}\n target=\"_blank\"\n rel=\"nofollow noreferrer\"\n >\n <OpenInNew sx={{ fontSize: 16 }} />\n </ExternalLink>\n ) : undefined}\n </Box>\n }\n />\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,WACA,gBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,cAAc,eAAe,WAAW,SAAS;CAEvD,MAAM,cAAc,MAAkB;EACpC,EAAE,gBAAgB;EAClB,UAAU,UAAU,UAAU,SAAS;CACzC;CAEA,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,IAAI,EAAE,UAAU,GAAG;EAAI,CAAA,EAC/B,CAAA;EAEpB,SAAS,GAAG,EAAE,mBAAmB,EAAE,IAAI,eAAe,SAAS;EAC/D,cACE,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;GAA3D,UAAA,CACE,oBAAC,YAAD;IAAY,MAAK;IAAQ,SAAS;IAAY,IAAI,EAAE,GAAG,GAAI;IACzD,UAAA,oBAAC,oBAAD,EAAoB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACjC,CAAA,GACX,cACC,oBAAC,cAAD;IACE,MAAM;IACN,QAAO;IACP,KAAI;IAEJ,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACtB,CAAA,IACZ,KAAA,CACD;;CAER,CAAA;AAEL"}

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;~~aAC5C~~,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;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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepActionsList.js","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { Fragment } from 'react'\nimport { renderExecutionRow, useExecutionRows } from './executionRows.js'\n\ninterface StepActionsListProps {\n route: RouteExtended\n toAddress?: string\n}\n\n/** Non-animated list of completed execution step rows (transaction details view). */\nexport const StepActionsList: React.FC<StepActionsListProps> = ({\n route,\n toAddress,\n}) => {\n const rows = useExecutionRows(route, toAddress)\n\n if (rows.length === 0) {\n return null\n }\n\n const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n {rows.map((row, index) => (\n <Fragment\n key={\n row.kind === 'action'\n ? `${row.step.id}-${row.action.type}-${index}`\n : `wallet-${row.toChainId}`\n }\n >\n {renderExecutionRow(row, index === lastActionIndex)}\n </Fragment>\n ))}\n </Box>\n )\n}\n"],"mappings":";;;;;;AAYA,MAAa,mBAAmD,EAC9D,OACA,gBACI;CACJ,MAAM,OAAO,iBAAiB,OAAO,SAAS;CAE9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;~~YAC3D~~,KAAK,KAAK,KAAK,UACd,oBAAC,UAAD,EAAA,UAOG,mBAAmB,KAAK,UAAU,eAAe,EAC1C,GANN,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAIZ,CACX;CACE,CAAA;AAET"}
1	+ {"version":3,"file":"StepActionsList.js","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { Fragment } from 'react'\nimport { renderExecutionRow, useExecutionRows } from './executionRows.js'\n\ninterface StepActionsListProps {\n route: RouteExtended\n toAddress?: string\n}\n\n/** Non-animated list of completed execution step rows (transaction details view). */\nexport const StepActionsList: React.FC<StepActionsListProps> = ({\n route,\n toAddress,\n}) => {\n const rows = useExecutionRows(route, toAddress)\n\n if (rows.length === 0) {\n return null\n }\n\n const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n {rows.map((row, index) => (\n <Fragment\n key={\n row.kind === 'action'\n ? `${row.step.id}-${row.action.type}-${index}`\n : `wallet-${row.toChainId}`\n }\n >\n {renderExecutionRow(row, index === lastActionIndex)}\n </Fragment>\n ))}\n </Box>\n )\n}\n"],"mappings":";;;;;;AAYA,MAAa,mBAAmD,EAC9D,OACA,gBACI;CACJ,MAAM,OAAO,iBAAiB,OAAO,SAAS;CAE9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAC3D,UAAA,KAAK,KAAK,KAAK,UACd,oBAAC,UAAD,EAAA,UAOG,mBAAmB,KAAK,UAAU,eAAe,EAC1C,GANN,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAIZ,CACX;CACE,CAAA;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SwapButton.js","names":["ArrowDownward"],"sources":["../../../../src/components/SwapButton/SwapButton.tsx"],"sourcesContent":["import ArrowDownward from '@mui/icons-material/ArrowDownward'\nimport type { BoxProps } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'\n\nexport const SwapButton: React.FC<BoxProps> = ({\n sx,\n ...props\n}): JSX.Element => {\n const { t } = useTranslation()\n const { mode } = useWidgetConfig()\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = (): void => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress',\n 'toAmount'\n )\n const newFromAmount =\n mode === 'limit' && toAmount ? (toAmount as string) : ''\n setFieldValue('fromAmount', newFromAmount, { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n if (autoPopulatedToAddress) {\n return\n }\n\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n\n return (\n <SwapButtonContainer sx={sx} {...props}>\n <SwapIconCard\n component=\"button\"\n onClick={handleClick}\n aria-label={t('button.swap')}\n data-testid=\"widget-swap-tokens-button\"\n >\n <ArrowDownward fontSize=\"inherit\" />\n </SwapIconCard>\n </SwapButtonContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAkC,EAC7C,IACA,GAAG,YACc;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAA0B;EAC9B,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,WAAW,YAC5D,eACE,aACA,aACA,WACA,WACA,aACA,UACF;EAGF,cAAc,cADZ,SAAS,WAAW,WAAY,WAAsB,IACb,EAAE,WAAW,KAAK,CAAC;EAC9D,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAUvD,IAR+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAEyB,GACvB;EAGF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CAEA,OACE,oBAAC,qBAAD;EAAyB;EAAI,GAAI;~~YAC~~/B,oBAAC,cAAD;GACE,WAAU;GACV,SAAS;GACT,cAAY,EAAE,aAAa;GAC3B,eAAY;~~aAEZ~~,oBAACA,mBAAD,EAAe,UAAS,UAAW,CAAA;EACvB,CAAA;CACK,CAAA;AAEzB"}
1	+ {"version":3,"file":"SwapButton.js","names":["ArrowDownward"],"sources":["../../../../src/components/SwapButton/SwapButton.tsx"],"sourcesContent":["import ArrowDownward from '@mui/icons-material/ArrowDownward'\nimport type { BoxProps } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'\n\nexport const SwapButton: React.FC<BoxProps> = ({\n sx,\n ...props\n}): JSX.Element => {\n const { t } = useTranslation()\n const { mode } = useWidgetConfig()\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = (): void => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress',\n 'toAmount'\n )\n const newFromAmount =\n mode === 'limit' && toAmount ? (toAmount as string) : ''\n setFieldValue('fromAmount', newFromAmount, { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n if (autoPopulatedToAddress) {\n return\n }\n\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n\n return (\n <SwapButtonContainer sx={sx} {...props}>\n <SwapIconCard\n component=\"button\"\n onClick={handleClick}\n aria-label={t('button.swap')}\n data-testid=\"widget-swap-tokens-button\"\n >\n <ArrowDownward fontSize=\"inherit\" />\n </SwapIconCard>\n </SwapButtonContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAkC,EAC7C,IACA,GAAG,YACc;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAA0B;EAC9B,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,WAAW,YAC5D,eACE,aACA,aACA,WACA,WACA,aACA,UACF;EAGF,cAAc,cADZ,SAAS,WAAW,WAAY,WAAsB,IACb,EAAE,WAAW,KAAK,CAAC;EAC9D,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAUvD,IAR+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAEyB,GACvB;EAGF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CAEA,OACE,oBAAC,qBAAD;EAAyB;EAAI,GAAI;EAC/B,UAAA,oBAAC,cAAD;GACE,WAAU;GACV,SAAS;GACT,cAAY,EAAE,aAAa;GAC3B,eAAY;GAEZ,UAAA,oBAACA,mBAAD,EAAe,UAAS,UAAW,CAAA;EACvB,CAAA;CACK,CAAA;AAEzB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextFitter.js","names":[],"sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport type { TextFitterProps } from './types.js'\n\nconst initialState = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n}\n\nexport const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({\n children,\n width = '100%',\n height,\n preserveAspectRatio = 'xMinYMid meet',\n textStyle,\n svgStyle,\n cropTop,\n cropBottom,\n onFit,\n}) => {\n const theme = useTheme()\n const textRef = useRef<SVGTextElement>(null)\n const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)\n\n const [ref] = useInView({\n onChange(inView) {\n if (inView) {\n calculateBox()\n }\n },\n })\n\n const calculateBox = useCallback(() => {\n if (!textRef.current) {\n return\n }\n const box = textRef.current.getBBox()\n if (cropTop) {\n box.y += box.height * cropTop\n box.height -= box.height * cropTop\n }\n if (cropBottom) {\n box.height -= box.height * cropBottom\n }\n setViewBox(box)\n onFit?.()\n }, [cropBottom, cropTop, onFit])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes\n useLayoutEffect(() => {\n calculateBox()\n }, [calculateBox, children])\n\n useLayoutEffect(() => {\n if (document.fonts) {\n document.fonts.ready.then(() => {\n calculateBox()\n })\n }\n }, [calculateBox])\n\n return (\n <svg\n style={svgStyle}\n viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}\n width={width}\n height={height}\n // height={\n // textRect.height && maxHeight && textRect.height >= maxHeight\n // ? maxHeight\n // : height\n // }\n preserveAspectRatio={preserveAspectRatio}\n fill={theme.vars.palette.text.primary}\n ref={ref}\n >\n <title>{children}</title>\n <text x={0} y={0} style={textStyle} ref={textRef}>\n {children}\n </text>\n </svg>\n )\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;AACV;AAEA,MAAa,cAA4D,EACvE,UACA,QAAQ,QACR,QACA,sBAAsB,iBACtB,WACA,UACA,SACA,YACA,YACI;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA2B,YAAY;CAErE,MAAM,CAAC,OAAO,UAAU,EACtB,SAAS,QAAQ;EACf,IAAI,QACF,aAAa;CAEjB,EACF,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,QAAQ,SACX;EAEF,MAAM,MAAM,QAAQ,QAAQ,QAAQ;EACpC,IAAI,SAAS;GACX,IAAI,KAAK,IAAI,SAAS;GACtB,IAAI,UAAU,IAAI,SAAS;EAC7B;EACA,IAAI,YACF,IAAI,UAAU,IAAI,SAAS;EAE7B,WAAW,GAAG;EACd,QAAQ;CACV,GAAG;EAAC;EAAY;EAAS;CAAK,CAAC;CAG/B,sBAAsB;EACpB,aAAa;CACf,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,sBAAsB;EACpB,IAAI,SAAS,OACX,SAAS,MAAM,MAAM,WAAW;GAC9B,aAAa;EACf,CAAC;CAEL,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,OAAD;EACE,OAAO;EACP,SAAS,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,MAAM,GAAG,QAAQ;EACxD;EACC;EAMa;EACrB,MAAM,MAAM,KAAK,QAAQ,KAAK;EACzB;~~YAZP~~,CAcE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,GACxB,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAG,OAAO;GAAW,KAAK;GACtC;EACG,CAAA,CACH;;AAET"}
1	+ {"version":3,"file":"TextFitter.js","names":[],"sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport type { TextFitterProps } from './types.js'\n\nconst initialState = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n}\n\nexport const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({\n children,\n width = '100%',\n height,\n preserveAspectRatio = 'xMinYMid meet',\n textStyle,\n svgStyle,\n cropTop,\n cropBottom,\n onFit,\n}) => {\n const theme = useTheme()\n const textRef = useRef<SVGTextElement>(null)\n const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)\n\n const [ref] = useInView({\n onChange(inView) {\n if (inView) {\n calculateBox()\n }\n },\n })\n\n const calculateBox = useCallback(() => {\n if (!textRef.current) {\n return\n }\n const box = textRef.current.getBBox()\n if (cropTop) {\n box.y += box.height * cropTop\n box.height -= box.height * cropTop\n }\n if (cropBottom) {\n box.height -= box.height * cropBottom\n }\n setViewBox(box)\n onFit?.()\n }, [cropBottom, cropTop, onFit])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes\n useLayoutEffect(() => {\n calculateBox()\n }, [calculateBox, children])\n\n useLayoutEffect(() => {\n if (document.fonts) {\n document.fonts.ready.then(() => {\n calculateBox()\n })\n }\n }, [calculateBox])\n\n return (\n <svg\n style={svgStyle}\n viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}\n width={width}\n height={height}\n // height={\n // textRect.height && maxHeight && textRect.height >= maxHeight\n // ? maxHeight\n // : height\n // }\n preserveAspectRatio={preserveAspectRatio}\n fill={theme.vars.palette.text.primary}\n ref={ref}\n >\n <title>{children}</title>\n <text x={0} y={0} style={textStyle} ref={textRef}>\n {children}\n </text>\n </svg>\n )\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;AACV;AAEA,MAAa,cAA4D,EACvE,UACA,QAAQ,QACR,QACA,sBAAsB,iBACtB,WACA,UACA,SACA,YACA,YACI;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA2B,YAAY;CAErE,MAAM,CAAC,OAAO,UAAU,EACtB,SAAS,QAAQ;EACf,IAAI,QACF,aAAa;CAEjB,EACF,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,QAAQ,SACX;EAEF,MAAM,MAAM,QAAQ,QAAQ,QAAQ;EACpC,IAAI,SAAS;GACX,IAAI,KAAK,IAAI,SAAS;GACtB,IAAI,UAAU,IAAI,SAAS;EAC7B;EACA,IAAI,YACF,IAAI,UAAU,IAAI,SAAS;EAE7B,WAAW,GAAG;EACd,QAAQ;CACV,GAAG;EAAC;EAAY;EAAS;CAAK,CAAC;CAG/B,sBAAsB;EACpB,aAAa;CACf,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,sBAAsB;EACpB,IAAI,SAAS,OACX,SAAS,MAAM,MAAM,WAAW;GAC9B,aAAa;EACf,CAAC;CAEL,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,OAAD;EACE,OAAO;EACP,SAAS,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,MAAM,GAAG,QAAQ;EACxD;EACC;EAMa;EACrB,MAAM,MAAM,KAAK,QAAQ,KAAK;EACzB;EAZP,UAAA,CAcE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,GACxB,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAG,OAAO;GAAW,KAAK;GACtC;EACG,CAAA,CACH;;AAET"}

package/dist/esm/components/Timer/StepStatusTimer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepStatusTimer.js","names":[],"sources":["../../../../src/components/Timer/StepStatusTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTimer } from '../../hooks/timer/useTimer.js'\nimport { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\nimport {\n CircularProgressPending,\n ProgressFill,\n ProgressTrack,\n RingContainer,\n StatusCircle,\n TimerLabel,\n} from './StepStatusTimer.style.js'\n\ninterface TimerRingProps {\n step?: LiFiStepExtended\n size?: number\n thickness?: number\n showLabel?: boolean\n}\n\nexport const TimerRing: React.FC<TimerRingProps> = ({\n step,\n size = iconCircleSize,\n thickness = 2,\n showLabel = true,\n}) => {\n const { i18n } = useTranslation()\n const [isExpired, setExpired] = useState(false)\n\n const signedAt = step?.execution?.signedAt\n const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000\n const expiryTimestamp = getExpiryTimestamp(step)\n\n const { days, hours, minutes, seconds } = useTimer({\n autoStart: Boolean(signedAt),\n expiryTimestamp,\n onExpire: () => setExpired(true),\n })\n\n const hasActiveCountdown =\n Boolean(signedAt) && !isExpired && (Boolean(minutes) \|\| Boolean(seconds))\n\n const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)\n const countdownProgress =\n totalDuration > 0\n ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)\n : 0\n\n return (\n <RingContainer sx={{ width: size, height: size }}>\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={size}\n thickness={thickness}\n />\n {hasActiveCountdown ? (\n <ProgressFill\n variant=\"determinate\"\n value={countdownProgress}\n size={size}\n thickness={thickness}\n />\n ) : (\n <CircularProgressPending size={size} thickness={thickness} />\n )}\n {showLabel && hasActiveCountdown ? (\n <StatusCircle>\n <TimerLabel>\n {formatTimer({\n locale: i18n.language,\n days,\n hours,\n minutes,\n seconds,\n })}\n </TimerLabel>\n </StatusCircle>\n ) : null}\n </RingContainer>\n )\n}\n"],"mappings":";;;;;;;AAuBA,MAAa,aAAuC,EAClD,MACA,OAAA,IACA,YAAY,GACZ,YAAY,WACR;CACJ,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,WAAW,MAAM,WAAW;CAClC,MAAM,iBAAiB,MAAM,SAAS,qBAAqB,KAAK;CAChE,MAAM,kBAAkB,mBAAmB,IAAI;CAE/C,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY,SAAS;EACjD,WAAW,QAAQ,QAAQ;EAC3B;EACA,gBAAgB,WAAW,IAAI;CACjC,CAAC;CAED,MAAM,qBACJ,QAAQ,QAAQ,KAAK,CAAC,cAAc,QAAQ,OAAO,KAAK,QAAQ,OAAO;CAEzE,MAAM,YAAY,KAAK,IAAI,gBAAgB,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC;CACpE,MAAM,oBACJ,gBAAgB,IACZ,KAAK,KAAM,gBAAgB,aAAa,gBAAiB,KAAK,GAAG,IACjE;CAEN,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,OAAO;GAAM,QAAQ;EAAK;~~YAA~~/C;GACE,oBAAC,eAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA;GACA,qBACC,oBAAC,cAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA,IAED,oBAAC,yBAAD;IAA+B;IAAiB;GAAY,CAAA;GAE7D,aAAa,qBACZ,oBAAC,cAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UACG,YAAY;IACX,QAAQ,KAAK;IACb;IACA;IACA;IACA;GACF,CAAC,EACS,CAAA,EACA,CAAA,IACZ;EACS;;AAEnB"}
1	+ {"version":3,"file":"StepStatusTimer.js","names":[],"sources":["../../../../src/components/Timer/StepStatusTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTimer } from '../../hooks/timer/useTimer.js'\nimport { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\nimport {\n CircularProgressPending,\n ProgressFill,\n ProgressTrack,\n RingContainer,\n StatusCircle,\n TimerLabel,\n} from './StepStatusTimer.style.js'\n\ninterface TimerRingProps {\n step?: LiFiStepExtended\n size?: number\n thickness?: number\n showLabel?: boolean\n}\n\nexport const TimerRing: React.FC<TimerRingProps> = ({\n step,\n size = iconCircleSize,\n thickness = 2,\n showLabel = true,\n}) => {\n const { i18n } = useTranslation()\n const [isExpired, setExpired] = useState(false)\n\n const signedAt = step?.execution?.signedAt\n const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000\n const expiryTimestamp = getExpiryTimestamp(step)\n\n const { days, hours, minutes, seconds } = useTimer({\n autoStart: Boolean(signedAt),\n expiryTimestamp,\n onExpire: () => setExpired(true),\n })\n\n const hasActiveCountdown =\n Boolean(signedAt) && !isExpired && (Boolean(minutes) \|\| Boolean(seconds))\n\n const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)\n const countdownProgress =\n totalDuration > 0\n ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)\n : 0\n\n return (\n <RingContainer sx={{ width: size, height: size }}>\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={size}\n thickness={thickness}\n />\n {hasActiveCountdown ? (\n <ProgressFill\n variant=\"determinate\"\n value={countdownProgress}\n size={size}\n thickness={thickness}\n />\n ) : (\n <CircularProgressPending size={size} thickness={thickness} />\n )}\n {showLabel && hasActiveCountdown ? (\n <StatusCircle>\n <TimerLabel>\n {formatTimer({\n locale: i18n.language,\n days,\n hours,\n minutes,\n seconds,\n })}\n </TimerLabel>\n </StatusCircle>\n ) : null}\n </RingContainer>\n )\n}\n"],"mappings":";;;;;;;AAuBA,MAAa,aAAuC,EAClD,MACA,OAAA,IACA,YAAY,GACZ,YAAY,WACR;CACJ,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,WAAW,MAAM,WAAW;CAClC,MAAM,iBAAiB,MAAM,SAAS,qBAAqB,KAAK;CAChE,MAAM,kBAAkB,mBAAmB,IAAI;CAE/C,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY,SAAS;EACjD,WAAW,QAAQ,QAAQ;EAC3B;EACA,gBAAgB,WAAW,IAAI;CACjC,CAAC;CAED,MAAM,qBACJ,QAAQ,QAAQ,KAAK,CAAC,cAAc,QAAQ,OAAO,KAAK,QAAQ,OAAO;CAEzE,MAAM,YAAY,KAAK,IAAI,gBAAgB,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC;CACpE,MAAM,oBACJ,gBAAgB,IACZ,KAAK,KAAM,gBAAgB,aAAa,gBAAiB,KAAK,GAAG,IACjE;CAEN,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,OAAO;GAAM,QAAQ;EAAK;EAA/C,UAAA;GACE,oBAAC,eAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA;GACA,qBACC,oBAAC,cAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA,IAED,oBAAC,yBAAD;IAA+B;IAAiB;GAAY,CAAA;GAE7D,aAAa,qBACZ,oBAAC,cAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UACG,YAAY;IACX,QAAQ,KAAK;IACb;IACA;IACA;IACA;GACF,CAAC,EACS,CAAA,EACA,CAAA,IACZ;EACS;;AAEnB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n token: TokenAmount\n impactToken?: TokenAmount\n enableImpactTokenTooltip?: boolean\n step?: LiFiStep\n stepVisible?: boolean\n disableDescription?: boolean\n isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n if (!token.priceUSD \|\| !token.logoURI) {\n return <TokenFallback token={token} {...other} />\n }\n return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n token,\n isLoading,\n ...other\n}) => {\n const { token: chainToken, isLoading: isLoadingToken } = useToken(\n token.chainId,\n token.address\n )\n\n return (\n <TokenBase\n token={{ ...token, ...chainToken } as TokenAmount}\n isLoading={isLoading \|\| isLoadingToken}\n {...other}\n />\n )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n token,\n impactToken,\n enableImpactTokenTooltip,\n step,\n stepVisible,\n disableDescription,\n isLoading,\n ...other\n}) => {\n const { t, i18n } = useTranslation()\n const { chain } = useChain(token?.chainId)\n\n if (isLoading) {\n return (\n <TokenSkeleton\n token={token}\n step={step}\n disableDescription={disableDescription}\n {...other}\n />\n )\n }\n\n const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n const tokenPrice = formatTokenPrice(\n token.amount,\n token.priceUSD,\n token.decimals\n )\n\n let priceImpact: number \| undefined\n let priceImpactPercent: number \| undefined\n if (impactToken) {\n priceImpact = getPriceImpact({\n fromToken: impactToken,\n fromAmount: impactToken.amount,\n toToken: token,\n toAmount: token.amount,\n })\n priceImpactPercent = priceImpact * 100\n }\n\n const tokenOnChain = !disableDescription ? (\n <TextSecondary>\n {t('main.tokenOnChain', {\n tokenSymbol: token.symbol,\n chainName: chain?.name,\n })}\n </TextSecondary>\n ) : null\n\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n isLoading={isLoading}\n sx={{ marginRight: 2 }}\n />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Box\n sx={{\n mb: 0.5,\n height: 24,\n display: 'flex',\n alignItems: 'center',\n }}\n title={tokenAmount}\n >\n <TextFitter\n height={30}\n textStyle={{\n fontWeight: 700,\n }}\n >\n {t('format.tokenAmount', {\n value: tokenAmount,\n })}\n </TextFitter>\n </Box>\n <TextSecondaryContainer>\n <TextSecondary>\n {t('format.currency', {\n value: tokenPrice,\n })}\n </TextSecondary>\n {impactToken ? (\n <TextSecondary sx={{ px: 0.5 }} dot>\n •\n </TextSecondary>\n ) : null}\n {impactToken ? (\n enableImpactTokenTooltip ? (\n <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n <TextSecondary>\n {t('format.percent', {\n value: priceImpact,\n usePlusSign: true,\n })}\n </TextSecondary>\n </Tooltip>\n ) : (\n <TextSecondary\n title={priceImpactPercent?.toLocaleString(i18n.language, {\n maximumFractionDigits: 9,\n })}\n >\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </TextSecondary>\n )\n ) : null}\n {!disableDescription ? (\n <TextSecondary sx={{ px: 0.5 }} dot>\n •\n </TextSecondary>\n ) : null}\n {!disableDescription && step ? (\n <TokenStep\n step={step}\n stepVisible={stepVisible}\n disableDescription={disableDescription}\n >\n {tokenOnChain}\n </TokenStep>\n ) : (\n tokenOnChain\n )}\n </TextSecondaryContainer>\n </Box>\n </Box>\n )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n step,\n stepVisible,\n disableDescription,\n children,\n}) => {\n return (\n <Box\n sx={{\n flex: 1,\n position: 'relative',\n overflow: 'hidden',\n height: 16,\n }}\n >\n <Grow\n in={!stepVisible && !disableDescription}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n {children as ReactElement}\n </Box>\n </Grow>\n <Grow\n in={stepVisible}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n <Box\n sx={{\n mr: 0.75,\n height: 16,\n }}\n >\n <SmallAvatar\n src={step?.toolDetails.logoURI}\n alt={step?.toolDetails.name}\n >\n {step?.toolDetails.name[0]}\n </SmallAvatar>\n </Box>\n <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n </Box>\n </Grow>\n </Box>\n )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n step,\n disableDescription,\n ...other\n}) => {\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n }}\n >\n <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Skeleton width={112} height={28} variant=\"text\" />\n <TextSecondaryContainer>\n <Skeleton\n width={48}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5 }}\n />\n {!step && !disableDescription ? (\n <Skeleton\n width={96}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n />\n ) : null}\n </TextSecondaryContainer>\n </Box>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n token: TokenAmount\n impactToken?: TokenAmount\n enableImpactTokenTooltip?: boolean\n step?: LiFiStep\n stepVisible?: boolean\n disableDescription?: boolean\n isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n if (!token.priceUSD \|\| !token.logoURI) {\n return <TokenFallback token={token} {...other} />\n }\n return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n token,\n isLoading,\n ...other\n}) => {\n const { token: chainToken, isLoading: isLoadingToken } = useToken(\n token.chainId,\n token.address\n )\n\n return (\n <TokenBase\n token={{ ...token, ...chainToken } as TokenAmount}\n isLoading={isLoading \|\| isLoadingToken}\n {...other}\n />\n )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n token,\n impactToken,\n enableImpactTokenTooltip,\n step,\n stepVisible,\n disableDescription,\n isLoading,\n ...other\n}) => {\n const { t, i18n } = useTranslation()\n const { chain } = useChain(token?.chainId)\n\n if (isLoading) {\n return (\n <TokenSkeleton\n token={token}\n step={step}\n disableDescription={disableDescription}\n {...other}\n />\n )\n }\n\n const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n const tokenPrice = formatTokenPrice(\n token.amount,\n token.priceUSD,\n token.decimals\n )\n\n let priceImpact: number \| undefined\n let priceImpactPercent: number \| undefined\n if (impactToken) {\n priceImpact = getPriceImpact({\n fromToken: impactToken,\n fromAmount: impactToken.amount,\n toToken: token,\n toAmount: token.amount,\n })\n priceImpactPercent = priceImpact * 100\n }\n\n const tokenOnChain = !disableDescription ? (\n <TextSecondary>\n {t('main.tokenOnChain', {\n tokenSymbol: token.symbol,\n chainName: chain?.name,\n })}\n </TextSecondary>\n ) : null\n\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n isLoading={isLoading}\n sx={{ marginRight: 2 }}\n />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Box\n sx={{\n mb: 0.5,\n height: 24,\n display: 'flex',\n alignItems: 'center',\n }}\n title={tokenAmount}\n >\n <TextFitter\n height={30}\n textStyle={{\n fontWeight: 700,\n }}\n >\n {t('format.tokenAmount', {\n value: tokenAmount,\n })}\n </TextFitter>\n </Box>\n <TextSecondaryContainer>\n <TextSecondary>\n {t('format.currency', {\n value: tokenPrice,\n })}\n </TextSecondary>\n {impactToken ? (\n <TextSecondary sx={{ px: 0.5 }} dot>\n •\n </TextSecondary>\n ) : null}\n {impactToken ? (\n enableImpactTokenTooltip ? (\n <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n <TextSecondary>\n {t('format.percent', {\n value: priceImpact,\n usePlusSign: true,\n })}\n </TextSecondary>\n </Tooltip>\n ) : (\n <TextSecondary\n title={priceImpactPercent?.toLocaleString(i18n.language, {\n maximumFractionDigits: 9,\n })}\n >\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </TextSecondary>\n )\n ) : null}\n {!disableDescription ? (\n <TextSecondary sx={{ px: 0.5 }} dot>\n •\n </TextSecondary>\n ) : null}\n {!disableDescription && step ? (\n <TokenStep\n step={step}\n stepVisible={stepVisible}\n disableDescription={disableDescription}\n >\n {tokenOnChain}\n </TokenStep>\n ) : (\n tokenOnChain\n )}\n </TextSecondaryContainer>\n </Box>\n </Box>\n )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n step,\n stepVisible,\n disableDescription,\n children,\n}) => {\n return (\n <Box\n sx={{\n flex: 1,\n position: 'relative',\n overflow: 'hidden',\n height: 16,\n }}\n >\n <Grow\n in={!stepVisible && !disableDescription}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n {children as ReactElement}\n </Box>\n </Grow>\n <Grow\n in={stepVisible}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n <Box\n sx={{\n mr: 0.75,\n height: 16,\n }}\n >\n <SmallAvatar\n src={step?.toolDetails.logoURI}\n alt={step?.toolDetails.name}\n >\n {step?.toolDetails.name[0]}\n </SmallAvatar>\n </Box>\n <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n </Box>\n </Grow>\n </Box>\n )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n step,\n disableDescription,\n ...other\n}) => {\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n }}\n >\n <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Skeleton width={112} height={28} variant=\"text\" />\n <TextSecondaryContainer>\n <Skeleton\n width={48}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5 }}\n />\n {!step && !disableDescription ? (\n <Skeleton\n width={96}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n />\n ) : null}\n </TextSecondaryContainer>\n </Box>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}