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

@lifi/widget 4.4.0 → 4.6.0

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

Files changed (329) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n// be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n// A Number of other components and hooks work with height values that are often set on or derived from these elements\n// if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n// - useTokenListHeight\n// - useSetContentHeight\n// Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n ({ theme }) => {\n return {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'start',\n flex: 1,\n height:\n theme.container?.display === 'flex'\n ? '100%'\n : theme.container?.maxHeight\n ? 'auto'\n : theme.container?.height \|\| 'auto',\n }\n }\n)\n\nexport const RelativeContainer: React.FC<\n BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n position: 'relative',\n boxSizing: 'content-box',\n width: '100%',\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n background: theme.vars.palette.background.default,\n overflow: 'auto',\n flex: 1,\n ...theme.container,\n maxHeight:\n theme.container?.display === 'flex' && !theme.container?.height\n ? '100%'\n : maxHeight,\n zIndex: 1, // NB: higher than of expansion containers\n variants: [\n {\n props: {\n variant: 'drawer',\n },\n style: {\n maxHeight: 'none',\n height: '100%',\n boxShadow: 'none',\n borderRadius: 0,\n },\n },\n ],\n }\n})\n\ninterface CssBaselineContainerProps {\n variant?: WidgetVariant\n paddingTopAdjustment: number\n elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n shouldForwardProp: (prop) =>\n !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n overflowX: 'clip',\n margin: 0,\n width: '100%',\n maxHeight:\n variant === 'drawer' \|\| theme.container?.display === 'flex'\n ? 'none'\n : maxHeight,\n overflowY: 'auto',\n height: theme.container?.display === 'flex' ? 'auto' : '100%',\n paddingTop: paddingTopAdjustment,\n '&:has(.long-list)': {\n minHeight: getWidgetMaxHeight(theme),\n maxHeight: getWidgetMaxHeight(theme),\n },\n }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n // const ref = useRef<HTMLDivElement>(null);\n const { variant, elementId, theme } = useWidgetConfig()\n const { headerHeight } = useHeaderHeight()\n const positionFixedAdjustment =\n theme?.header?.position === 'fixed' ? headerHeight : 0\n\n return (\n <RelativeContainer\n variant={variant}\n id={createElementId(ElementId.RelativeContainer, elementId)}\n >\n <CssBaselineContainer\n id={createElementId(ElementId.ScrollableContainer, elementId)}\n variant={variant}\n enableColorScheme\n paddingTopAdjustment={positionFixedAdjustment}\n elementId={elementId}\n // ref={ref}\n >\n <FlexContainer disableGutters>{children}</FlexContainer>\n </CssBaselineContainer>\n {/* <ScrollToLocation elementRef={ref} /> */}\n </RelativeContainer>\n )\n}\n\n// export const ScrollToLocation: React.FC<{\n// elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n// const { pathname } = useLocation();\n// useLayoutEffect(() => {\n// elementRef.current?.scrollTo(0, 0);\n// }, [elementRef, pathname]);\n// return null;\n// };\n"],"mappings":";;;;;;;AAkBA,MAAa,uBAA2C,OAAO,GAAG,CAAC,EAChE,EAAE,YAAY;CACb,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;CACrC;AACF,CACF;AAEA,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACxC,CAAC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,SACX;GACA,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;GAChB;EACF,CACF;CACF;AACF,CAAC;AAQD,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;AAAW,CAAC,CAAC,SAAS,IAAc,EAC7E,CAAC,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EACZ,qBAAqB;GACnB,WAAW,mBAAmB,KAAK;GACnC,WAAW,mBAAmB,KAAK;EACrC;CACF;AACF,CAAC;AAED,MAAa,gBAA0C,OAAO,SAAS,CAAC,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;AACR,CAAC;AAED,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,gBAAgB;CACtD,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;CAEvD,OACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,SAAS;~~YAE1D~~,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,SAAS;GACnD;GACT,mBAAA;GACA,sBAAsB;GACX;~~aAGX~~,oBAAC,eAAD;IAAe,gBAAA;IAAgB;GAAwB,CAAA;EACnC,CAAA;CAEL,CAAA;AAEvB"}
1	+ {"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n// be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n// A Number of other components and hooks work with height values that are often set on or derived from these elements\n// if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n// - useTokenListHeight\n// - useSetContentHeight\n// Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n ({ theme }) => {\n return {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'start',\n flex: 1,\n height:\n theme.container?.display === 'flex'\n ? '100%'\n : theme.container?.maxHeight\n ? 'auto'\n : theme.container?.height \|\| 'auto',\n }\n }\n)\n\nexport const RelativeContainer: React.FC<\n BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n position: 'relative',\n boxSizing: 'content-box',\n width: '100%',\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n background: theme.vars.palette.background.default,\n overflow: 'auto',\n flex: 1,\n ...theme.container,\n maxHeight:\n theme.container?.display === 'flex' && !theme.container?.height\n ? '100%'\n : maxHeight,\n zIndex: 1, // NB: higher than of expansion containers\n variants: [\n {\n props: {\n variant: 'drawer',\n },\n style: {\n maxHeight: 'none',\n height: '100%',\n boxShadow: 'none',\n borderRadius: 0,\n },\n },\n ],\n }\n})\n\ninterface CssBaselineContainerProps {\n variant?: WidgetVariant\n paddingTopAdjustment: number\n elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n shouldForwardProp: (prop) =>\n !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n const maxHeight =\n theme.container?.height === 'fit-content' \|\|\n (!theme.container?.height && !theme.container?.maxHeight)\n ? 'none'\n : getWidgetMaxHeight(theme)\n return {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n overflowX: 'clip',\n margin: 0,\n width: '100%',\n maxHeight:\n variant === 'drawer' \|\| theme.container?.display === 'flex'\n ? 'none'\n : maxHeight,\n overflowY: 'auto',\n height: theme.container?.display === 'flex' ? 'auto' : '100%',\n paddingTop: paddingTopAdjustment,\n '&:has(.long-list)': {\n minHeight: getWidgetMaxHeight(theme),\n maxHeight: getWidgetMaxHeight(theme),\n },\n }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n // const ref = useRef<HTMLDivElement>(null);\n const { variant, elementId, theme } = useWidgetConfig()\n const { headerHeight } = useHeaderHeight()\n const positionFixedAdjustment =\n theme?.header?.position === 'fixed' ? headerHeight : 0\n\n return (\n <RelativeContainer\n variant={variant}\n id={createElementId(ElementId.RelativeContainer, elementId)}\n >\n <CssBaselineContainer\n id={createElementId(ElementId.ScrollableContainer, elementId)}\n variant={variant}\n enableColorScheme\n paddingTopAdjustment={positionFixedAdjustment}\n elementId={elementId}\n // ref={ref}\n >\n <FlexContainer disableGutters>{children}</FlexContainer>\n </CssBaselineContainer>\n {/* <ScrollToLocation elementRef={ref} /> */}\n </RelativeContainer>\n )\n}\n\n// export const ScrollToLocation: React.FC<{\n// elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n// const { pathname } = useLocation();\n// useLayoutEffect(() => {\n// elementRef.current?.scrollTo(0, 0);\n// }, [elementRef, pathname]);\n// return null;\n// };\n"],"mappings":";;;;;;;AAkBA,MAAa,uBAA2C,OAAO,GAAG,CAAC,EAChE,EAAE,YAAY;CACb,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;CACrC;AACF,CACF;AAEA,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACxC,CAAC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,SACX;GACA,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;GAChB;EACF,CACF;CACF;AACF,CAAC;AAQD,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;AAAW,CAAC,CAAC,SAAS,IAAc,EAC7E,CAAC,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EACZ,qBAAqB;GACnB,WAAW,mBAAmB,KAAK;GACnC,WAAW,mBAAmB,KAAK;EACrC;CACF;AACF,CAAC;AAED,MAAa,gBAA0C,OAAO,SAAS,CAAC,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;AACR,CAAC;AAED,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,gBAAgB;CACtD,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;CAEvD,OACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,SAAS;EAE1D,UAAA,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,SAAS;GACnD;GACT,mBAAA;GACA,sBAAsB;GACX;GAGX,UAAA,oBAAC,eAAD;IAAe,gBAAA;IAAgB;GAAwB,CAAA;EACnC,CAAA;CAEL,CAAA;AAEvB"}

package/dist/esm/components/Avatar/AccountAvatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccountAvatar.js","names":[],"sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"sourcesContent":["import { getConnectorIcon } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Badge } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useChain } from '../../hooks/useChain.js'\nimport type { ToAddress } from '../../types/widget.js'\nimport { AvatarDefault, AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\ninterface AccountAvatarProps {\n chainId?: number\n account?: Account\n toAddress?: ToAddress\n empty?: boolean\n}\n\nexport const AccountAvatar = ({\n chainId,\n account,\n empty,\n toAddress,\n}: AccountAvatarProps): JSX.Element => {\n const { chain } = useChain(chainId)\n\n const avatar = empty ? (\n <AvatarDefault />\n ) : account?.connector \|\| toAddress?.logoURI ? (\n <AvatarMasked\n src={toAddress?.logoURI \|\| getConnectorIcon(account?.connector)}\n alt={toAddress?.name \|\| account?.connector?.name}\n >\n {(toAddress?.name \|\| account?.connector?.name)?.[0]}\n </AvatarMasked>\n ) : (\n <AvatarDefault>\n <Wallet sx={{ fontSize: 20 }} />\n </AvatarDefault>\n )\n\n return (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<ChainBadgeContent chain={chain} />}\n >\n {avatar}\n </Badge>\n )\n}\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBAAiB,EAC5B,SACA,SACA,OACA,gBACqC;CACrC,MAAM,EAAE,UAAU,SAAS,OAAO;CAElC,MAAM,SAAS,QACb,oBAAC,eAAD,CAAgB,CAAA,IACd,SAAS,aAAa,WAAW,UACnC,oBAAC,cAAD;EACE,KAAK,WAAW,WAAW,iBAAiB,SAAS,SAAS;EAC9D,KAAK,WAAW,QAAQ,SAAS,WAAW;~~aAE1C~~,WAAW,QAAQ,SAAS,WAAW,KAAA,GAAQ;CACrC,CAAA,IAEd,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;CAGjB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;~~YAE~~/C;CACI,CAAA;AAEX"}
1	+ {"version":3,"file":"AccountAvatar.js","names":[],"sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"sourcesContent":["import { getConnectorIcon } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Badge } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useChain } from '../../hooks/useChain.js'\nimport type { ToAddress } from '../../types/widget.js'\nimport { AvatarDefault, AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\ninterface AccountAvatarProps {\n chainId?: number\n account?: Account\n toAddress?: ToAddress\n empty?: boolean\n}\n\nexport const AccountAvatar = ({\n chainId,\n account,\n empty,\n toAddress,\n}: AccountAvatarProps): JSX.Element => {\n const { chain } = useChain(chainId)\n\n const avatar = empty ? (\n <AvatarDefault />\n ) : account?.connector \|\| toAddress?.logoURI ? (\n <AvatarMasked\n src={toAddress?.logoURI \|\| getConnectorIcon(account?.connector)}\n alt={toAddress?.name \|\| account?.connector?.name}\n >\n {(toAddress?.name \|\| account?.connector?.name)?.[0]}\n </AvatarMasked>\n ) : (\n <AvatarDefault>\n <Wallet sx={{ fontSize: 20 }} />\n </AvatarDefault>\n )\n\n return (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<ChainBadgeContent chain={chain} />}\n >\n {avatar}\n </Badge>\n )\n}\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBAAiB,EAC5B,SACA,SACA,OACA,gBACqC;CACrC,MAAM,EAAE,UAAU,SAAS,OAAO;CAElC,MAAM,SAAS,QACb,oBAAC,eAAD,CAAgB,CAAA,IACd,SAAS,aAAa,WAAW,UACnC,oBAAC,cAAD;EACE,KAAK,WAAW,WAAW,iBAAiB,SAAS,SAAS;EAC9D,KAAK,WAAW,QAAQ,SAAS,WAAW;EAE1C,WAAA,WAAW,QAAQ,SAAS,WAAW,KAAA,GAAQ;CACrC,CAAA,IAEd,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;CAGjB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;EAE/C,UAAA;CACI,CAAA;AAEX"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge, Skeleton } from '@mui/material'\nimport { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\nimport { SmallAvatarSkeleton } from './SmallAvatar.js'\n\nexport const AvatarBadgedDefault: React.FC<{\n sx?: SxProps<Theme>\n chain?: ExtendedChain\n avatarSize?: number\n badgeSize?: number\n}> = ({ sx, chain, avatarSize, badgeSize }) => {\n return (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n sx={sx}\n >\n <AvatarDefault\n badgeSize={badgeSize}\n sx={avatarSize ? { width: avatarSize, height: avatarSize } : undefined}\n />\n </Badge>\n )\n}\n\nexport const AvatarBadgedSkeleton: React.FC<{\n sx?: SxProps<Theme>\n avatarSize?: number\n badgeSize?: number\n}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {\n return (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<SmallAvatarSkeleton size={badgeSize} />}\n sx={sx}\n >\n <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n </Badge>\n )\n}\n\nconst AvatarSkeleton: React.FC<{\n avatarSize: number\n badgeSize: number\n}> = ({ avatarSize, badgeSize }) => {\n return (\n <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>\n <Skeleton width={avatarSize} height={avatarSize} variant=\"circular\" />\n </AvatarSkeletonMaskedContainer>\n )\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAKP,EAAE,IAAI,OAAO,YAAY,gBAAgB;CAC7C,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;~~YAEJ~~,oBAAC,eAAD;GACa;GACX,IAAI,aAAa;IAAE,OAAO;IAAY,QAAQ;GAAW,IAAI,KAAA;EAC9D,CAAA;CACI,CAAA;AAEX;AAEA,MAAa,wBAIP,EAAE,IAAI,aAAa,IAAI,YAAY,SAAS;CAChD,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,qBAAD,EAAqB,MAAM,UAAY,CAAA;EACjD;~~YAEJ~~,oBAAC,gBAAD;GAA4B;GAAuB;EAAY,CAAA;CAC1D,CAAA;AAEX;AAEA,MAAM,kBAGA,EAAE,YAAY,gBAAgB;CAClC,OACE,oBAAC,+BAAD;EAA0C;~~YACxC~~,oBAAC,UAAD;GAAU,OAAO;GAAY,QAAQ;GAAY,SAAQ;EAAY,CAAA;CACxC,CAAA;AAEnC"}
1	+ {"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge, Skeleton } from '@mui/material'\nimport { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\nimport { SmallAvatarSkeleton } from './SmallAvatar.js'\n\nexport const AvatarBadgedDefault: React.FC<{\n sx?: SxProps<Theme>\n chain?: ExtendedChain\n avatarSize?: number\n badgeSize?: number\n}> = ({ sx, chain, avatarSize, badgeSize }) => {\n return (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n sx={sx}\n >\n <AvatarDefault\n badgeSize={badgeSize}\n sx={avatarSize ? { width: avatarSize, height: avatarSize } : undefined}\n />\n </Badge>\n )\n}\n\nexport const AvatarBadgedSkeleton: React.FC<{\n sx?: SxProps<Theme>\n avatarSize?: number\n badgeSize?: number\n}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {\n return (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<SmallAvatarSkeleton size={badgeSize} />}\n sx={sx}\n >\n <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n </Badge>\n )\n}\n\nconst AvatarSkeleton: React.FC<{\n avatarSize: number\n badgeSize: number\n}> = ({ avatarSize, badgeSize }) => {\n return (\n <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>\n <Skeleton width={avatarSize} height={avatarSize} variant=\"circular\" />\n </AvatarSkeletonMaskedContainer>\n )\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAKP,EAAE,IAAI,OAAO,YAAY,gBAAgB;CAC7C,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;EAEJ,UAAA,oBAAC,eAAD;GACa;GACX,IAAI,aAAa;IAAE,OAAO;IAAY,QAAQ;GAAW,IAAI,KAAA;EAC9D,CAAA;CACI,CAAA;AAEX;AAEA,MAAa,wBAIP,EAAE,IAAI,aAAa,IAAI,YAAY,SAAS;CAChD,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,qBAAD,EAAqB,MAAM,UAAY,CAAA;EACjD;EAEJ,UAAA,oBAAC,gBAAD;GAA4B;GAAuB;EAAY,CAAA;CAC1D,CAAA;AAEX;AAEA,MAAM,kBAGA,EAAE,YAAY,gBAAgB;CAClC,OACE,oBAAC,+BAAD;EAA0C;EACxC,UAAA,oBAAC,UAAD;GAAU,OAAO;GAAY,QAAQ;GAAY,SAAQ;EAAY,CAAA;CACxC,CAAA;AAEnC"}

package/dist/esm/components/Avatar/ChainBadgeContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainBadgeContent.js","names":[],"sources":["../../../../src/components/Avatar/ChainBadgeContent.tsx"],"sourcesContent":["import type { Chain, ExtendedChain } from '@lifi/sdk'\nimport { AvatarDefaultBadge } from './Avatar.style.js'\nimport { SmallAvatar } from './SmallAvatar.js'\n\ninterface ChainBadgeContentProps {\n chain?: Chain \| ExtendedChain\n size?: number\n}\n\nexport const ChainBadgeContent: React.FC<ChainBadgeContentProps> = ({\n chain,\n size = 16,\n}) => {\n if (chain?.logoURI) {\n return (\n <SmallAvatar src={chain.logoURI} alt={chain.name} size={size}>\n {chain.name?.[0]}\n </SmallAvatar>\n )\n }\n return <AvatarDefaultBadge size={size} />\n}\n"],"mappings":";;;;AASA,MAAa,qBAAuD,EAClE,OACA,OAAO,SACH;CACJ,IAAI,OAAO,SACT,OACE,oBAAC,aAAD;EAAa,KAAK,MAAM;EAAS,KAAK,MAAM;EAAY;~~YACrD~~,MAAM,OAAO;CACH,CAAA;CAGjB,OAAO,oBAAC,oBAAD,EAA0B,KAAO,CAAA;AAC1C"}
1	+ {"version":3,"file":"ChainBadgeContent.js","names":[],"sources":["../../../../src/components/Avatar/ChainBadgeContent.tsx"],"sourcesContent":["import type { Chain, ExtendedChain } from '@lifi/sdk'\nimport { AvatarDefaultBadge } from './Avatar.style.js'\nimport { SmallAvatar } from './SmallAvatar.js'\n\ninterface ChainBadgeContentProps {\n chain?: Chain \| ExtendedChain\n size?: number\n}\n\nexport const ChainBadgeContent: React.FC<ChainBadgeContentProps> = ({\n chain,\n size = 16,\n}) => {\n if (chain?.logoURI) {\n return (\n <SmallAvatar src={chain.logoURI} alt={chain.name} size={size}>\n {chain.name?.[0]}\n </SmallAvatar>\n )\n }\n return <AvatarDefaultBadge size={size} />\n}\n"],"mappings":";;;;AASA,MAAa,qBAAuD,EAClE,OACA,OAAO,SACH;CACJ,IAAI,OAAO,SACT,OACE,oBAAC,aAAD;EAAa,KAAK,MAAM;EAAS,KAAK,MAAM;EAAY;EACrD,UAAA,MAAM,OAAO;CACH,CAAA;CAGjB,OAAO,oBAAC,oBAAD,EAA0B,KAAO,CAAA;AAC1C"}

package/dist/esm/components/Avatar/TokenAvatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenAvatar.js","names":[],"sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"sourcesContent":["import type { Chain, StaticToken } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge } from '@mui/material'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { AvatarBadgedSkeleton } from './Avatar.js'\nimport { AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\nexport const TokenAvatar: React.FC<{\n token?: StaticToken\n chain?: Chain\n isLoading?: boolean\n sx?: SxProps<Theme>\n tokenAvatarSize?: number\n chainAvatarSize?: number\n}> = ({\n token,\n chain,\n isLoading,\n sx,\n tokenAvatarSize = 40,\n chainAvatarSize = 16,\n}) => {\n if (!chain \|\| !token?.logoURI) {\n return (\n <TokenAvatarFallback\n token={token}\n isLoading={isLoading}\n sx={sx}\n tokenAvatarSize={tokenAvatarSize}\n chainAvatarSize={chainAvatarSize}\n />\n )\n }\n return (\n <TokenAvatarBase\n token={token}\n chain={chain}\n isLoading={isLoading}\n sx={sx}\n avatarSize={tokenAvatarSize}\n badgeSize={chainAvatarSize}\n />\n )\n}\n\nconst TokenAvatarFallback: React.FC<{\n token?: StaticToken\n isLoading?: boolean\n sx?: SxProps<Theme>\n tokenAvatarSize: number\n chainAvatarSize: number\n}> = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {\n const { chain } = useChain(token?.chainId)\n const { token: chainToken, isLoading: isLoadingToken } = useToken(\n token?.chainId,\n token?.address\n )\n return (\n <TokenAvatarBase\n token={chainToken ?? token}\n isLoading={isLoading \|\| isLoadingToken}\n chain={chain}\n sx={sx}\n avatarSize={tokenAvatarSize}\n badgeSize={chainAvatarSize}\n />\n )\n}\n\nconst TokenAvatarBase: React.FC<{\n token?: StaticToken\n chain?: Chain\n isLoading?: boolean\n sx?: SxProps<Theme>\n avatarSize: number\n badgeSize: number\n}> = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {\n return isLoading ? (\n <AvatarBadgedSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n ) : (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n sx={sx}\n >\n <AvatarMasked\n src={token?.logoURI}\n alt={token?.symbol}\n avatarSize={avatarSize}\n badgeSize={badgeSize}\n >\n {token?.symbol?.[0]}\n </AvatarMasked>\n </Badge>\n )\n}\n"],"mappings":";;;;;;;;AASA,MAAa,eAOP,EACJ,OACA,OACA,WACA,IACA,kBAAkB,IAClB,kBAAkB,SACd;CACJ,IAAI,CAAC,SAAS,CAAC,OAAO,SACpB,OACE,oBAAC,qBAAD;EACS;EACI;EACP;EACa;EACA;CAClB,CAAA;CAGL,OACE,oBAAC,iBAAD;EACS;EACA;EACI;EACP;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,uBAMA,EAAE,OAAO,WAAW,IAAI,iBAAiB,sBAAsB;CACnE,MAAM,EAAE,UAAU,SAAS,OAAO,OAAO;CACzC,MAAM,EAAE,OAAO,YAAY,WAAW,mBAAmB,SACvD,OAAO,SACP,OAAO,OACT;CACA,OACE,oBAAC,iBAAD;EACE,OAAO,cAAc;EACrB,WAAW,aAAa;EACjB;EACH;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,mBAOA,EAAE,OAAO,OAAO,WAAW,IAAI,YAAY,gBAAgB;CAC/D,OAAO,YACL,oBAAC,sBAAD;EAAkC;EAAuB;CAAY,CAAA,IAErE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;~~YAEJ~~,oBAAC,cAAD;GACE,KAAK,OAAO;GACZ,KAAK,OAAO;GACA;GACD;~~aAEV~~,OAAO,SAAS;EACL,CAAA;CACT,CAAA;AAEX"}
1	+ {"version":3,"file":"TokenAvatar.js","names":[],"sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"sourcesContent":["import type { Chain, StaticToken } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge } from '@mui/material'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { AvatarBadgedSkeleton } from './Avatar.js'\nimport { AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\nexport const TokenAvatar: React.FC<{\n token?: StaticToken\n chain?: Chain\n isLoading?: boolean\n sx?: SxProps<Theme>\n tokenAvatarSize?: number\n chainAvatarSize?: number\n}> = ({\n token,\n chain,\n isLoading,\n sx,\n tokenAvatarSize = 40,\n chainAvatarSize = 16,\n}) => {\n if (!chain \|\| !token?.logoURI) {\n return (\n <TokenAvatarFallback\n token={token}\n isLoading={isLoading}\n sx={sx}\n tokenAvatarSize={tokenAvatarSize}\n chainAvatarSize={chainAvatarSize}\n />\n )\n }\n return (\n <TokenAvatarBase\n token={token}\n chain={chain}\n isLoading={isLoading}\n sx={sx}\n avatarSize={tokenAvatarSize}\n badgeSize={chainAvatarSize}\n />\n )\n}\n\nconst TokenAvatarFallback: React.FC<{\n token?: StaticToken\n isLoading?: boolean\n sx?: SxProps<Theme>\n tokenAvatarSize: number\n chainAvatarSize: number\n}> = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {\n const { chain } = useChain(token?.chainId)\n const { token: chainToken, isLoading: isLoadingToken } = useToken(\n token?.chainId,\n token?.address\n )\n return (\n <TokenAvatarBase\n token={chainToken ?? token}\n isLoading={isLoading \|\| isLoadingToken}\n chain={chain}\n sx={sx}\n avatarSize={tokenAvatarSize}\n badgeSize={chainAvatarSize}\n />\n )\n}\n\nconst TokenAvatarBase: React.FC<{\n token?: StaticToken\n chain?: Chain\n isLoading?: boolean\n sx?: SxProps<Theme>\n avatarSize: number\n badgeSize: number\n}> = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {\n return isLoading ? (\n <AvatarBadgedSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n ) : (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n sx={sx}\n >\n <AvatarMasked\n src={token?.logoURI}\n alt={token?.symbol}\n avatarSize={avatarSize}\n badgeSize={badgeSize}\n >\n {token?.symbol?.[0]}\n </AvatarMasked>\n </Badge>\n )\n}\n"],"mappings":";;;;;;;;AASA,MAAa,eAOP,EACJ,OACA,OACA,WACA,IACA,kBAAkB,IAClB,kBAAkB,SACd;CACJ,IAAI,CAAC,SAAS,CAAC,OAAO,SACpB,OACE,oBAAC,qBAAD;EACS;EACI;EACP;EACa;EACA;CAClB,CAAA;CAGL,OACE,oBAAC,iBAAD;EACS;EACA;EACI;EACP;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,uBAMA,EAAE,OAAO,WAAW,IAAI,iBAAiB,sBAAsB;CACnE,MAAM,EAAE,UAAU,SAAS,OAAO,OAAO;CACzC,MAAM,EAAE,OAAO,YAAY,WAAW,mBAAmB,SACvD,OAAO,SACP,OAAO,OACT;CACA,OACE,oBAAC,iBAAD;EACE,OAAO,cAAc;EACrB,WAAW,aAAa;EACjB;EACH;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,mBAOA,EAAE,OAAO,OAAO,WAAW,IAAI,YAAY,gBAAgB;CAC/D,OAAO,YACL,oBAAC,sBAAD;EAAkC;EAAuB;CAAY,CAAA,IAErE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;EAEJ,UAAA,oBAAC,cAAD;GACE,KAAK,OAAO;GACZ,KAAK,OAAO;GACA;GACD;GAEV,UAAA,OAAO,SAAS;EACL,CAAA;CACT,CAAA;AAEX"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTransactionButton.js","names":[],"sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"sourcesContent":["import { useWalletMenu } from '@lifi/wallet-management'\nimport { Button } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { BaseTransactionButtonProps } from './types.js'\n\nexport const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({\n onClick,\n text,\n disabled,\n loading,\n route,\n sx,\n}) => {\n const { t } = useTranslation()\n const { walletConfig } = useWidgetConfig()\n const { openWalletMenu } = useWalletMenu()\n const [fromChainId] = useFieldValues('fromChain')\n const { chain } = useChain(fromChainId)\n const { connected, missingChain } = useRouteRequiredAccountConnection(\n route,\n chain\n )\n const handleClick = async (e: React.MouseEvent<HTMLElement>) => {\n if (connected) {\n onClick?.()\n return\n }\n const connectionOptions = missingChain ? { chain: missingChain } : undefined\n if (\n walletConfig?.onConnect &&\n !walletConfig?.forceInternalWalletManagement\n ) {\n walletConfig.onConnect(connectionOptions)\n } else {\n openWalletMenu(connectionOptions)\n e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n }\n\n const getButtonText = () => {\n if (connected) {\n if (text) {\n return text\n }\n }\n return missingChain\n ? t('button.connectChainWallet', {\n chain: missingChain.name,\n })\n : t('button.connectWallet')\n }\n\n return (\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleClick}\n disabled={connected && disabled}\n loading={loading}\n loadingPosition=\"center\"\n fullWidth\n sx={sx}\n data-testid=\"widget-transaction-button\"\n >\n {getButtonText()}\n </Button>\n )\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,yBAA+D,EAC1E,SACA,MACA,UACA,SACA,OACA,SACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,CAAC,eAAe,eAAe,WAAW;CAChD,MAAM,EAAE,UAAU,SAAS,WAAW;CACtC,MAAM,EAAE,WAAW,iBAAiB,kCAClC,OACA,KACF;CACA,MAAM,cAAc,OAAO,MAAqC;EAC9D,IAAI,WAAW;GACb,UAAU;GACV;EACF;EACA,MAAM,oBAAoB,eAAe,EAAE,OAAO,aAAa,IAAI,KAAA;EACnE,IACE,cAAc,aACd,CAAC,cAAc,+BAEf,aAAa,UAAU,iBAAiB;OACnC;GACL,eAAe,iBAAiB;GAChC,EAAE,cAAc,KAAK;EACvB;CACF;CAEA,MAAM,sBAAsB;EAC1B,IAAI;~~OACE~~,MACF,OAAO;EAAA;EAGX,OAAO,eACH,EAAE,6BAA6B,EAC7B,OAAO,aAAa,KACtB,CAAC,IACD,EAAE,sBAAsB;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,OAAM;EACN,SAAS;EACT,UAAU,aAAa;EACd;EACT,iBAAgB;EAChB,WAAA;EACI;EACJ,eAAY;~~YAEX~~,cAAc;CACT,CAAA;AAEZ"}
1	+ {"version":3,"file":"BaseTransactionButton.js","names":[],"sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"sourcesContent":["import { useWalletMenu } from '@lifi/wallet-management'\nimport { Button } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { BaseTransactionButtonProps } from './types.js'\n\nexport const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({\n onClick,\n text,\n disabled,\n loading,\n route,\n sx,\n}) => {\n const { t } = useTranslation()\n const { walletConfig } = useWidgetConfig()\n const { openWalletMenu } = useWalletMenu()\n const [fromChainId] = useFieldValues('fromChain')\n const { chain } = useChain(fromChainId)\n const { connected, missingChain } = useRouteRequiredAccountConnection(\n route,\n chain\n )\n const handleClick = async (e: React.MouseEvent<HTMLElement>) => {\n if (connected) {\n onClick?.()\n return\n }\n const connectionOptions = missingChain ? { chain: missingChain } : undefined\n if (\n walletConfig?.onConnect &&\n !walletConfig?.forceInternalWalletManagement\n ) {\n walletConfig.onConnect(connectionOptions)\n } else {\n openWalletMenu(connectionOptions)\n e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n }\n\n const getButtonText = () => {\n if (connected) {\n if (text) {\n return text\n }\n }\n return missingChain\n ? t('button.connectChainWallet', {\n chain: missingChain.name,\n })\n : t('button.connectWallet')\n }\n\n return (\n <Button\n variant=\"contained\"\n color=\"primary\"\n onClick={handleClick}\n disabled={connected && disabled}\n loading={loading}\n loadingPosition=\"center\"\n fullWidth\n sx={sx}\n data-testid=\"widget-transaction-button\"\n >\n {getButtonText()}\n </Button>\n )\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,yBAA+D,EAC1E,SACA,MACA,UACA,SACA,OACA,SACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,CAAC,eAAe,eAAe,WAAW;CAChD,MAAM,EAAE,UAAU,SAAS,WAAW;CACtC,MAAM,EAAE,WAAW,iBAAiB,kCAClC,OACA,KACF;CACA,MAAM,cAAc,OAAO,MAAqC;EAC9D,IAAI,WAAW;GACb,UAAU;GACV;EACF;EACA,MAAM,oBAAoB,eAAe,EAAE,OAAO,aAAa,IAAI,KAAA;EACnE,IACE,cAAc,aACd,CAAC,cAAc,+BAEf,aAAa,UAAU,iBAAiB;OACnC;GACL,eAAe,iBAAiB;GAChC,EAAE,cAAc,KAAK;EACvB;CACF;CAEA,MAAM,sBAAsB;EAC1B,IAAI,WACE;OAAA,MACF,OAAO;EAAA;EAGX,OAAO,eACH,EAAE,6BAA6B,EAC7B,OAAO,aAAa,KACtB,CAAC,IACD,EAAE,sBAAsB;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,OAAM;EACN,SAAS;EACT,UAAU,aAAa;EACd;EACT,iBAAgB;EAChB,WAAA;EACI;EACJ,eAAY;EAEX,UAAA,cAAc;CACT,CAAA;AAEZ"}

package/dist/esm/components/Card/CardButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardButton.js","names":[],"sources":["../../../../src/components/Card/CardButton.tsx"],"sourcesContent":["import type { MouseEventHandler, PropsWithChildren } from 'react'\nimport type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js'\nimport { Card } from './Card.js'\nimport {\n CardRowButton,\n CardTitleContainer,\n CardValue,\n} from './CardButton.style.js'\n\ninterface SettingCardButtonProps extends SettingCardTitle {\n onClick: MouseEventHandler\n}\n\nexport const CardButton: React.FC<\n PropsWithChildren<SettingCardButtonProps>\n> = ({ onClick, icon, title, children }) => (\n <Card>\n <CardRowButton onClick={onClick} disableRipple>\n <CardTitleContainer>\n {icon}\n <CardValue>{title}</CardValue>\n </CardTitleContainer>\n {children}\n </CardRowButton>\n </Card>\n)\n"],"mappings":";;;;AAaA,MAAa,cAER,EAAE,SAAS,MAAM,OAAO,eAC3B,oBAAC,MAAD,EAAA,UACE,qBAAC,eAAD;CAAwB;CAAS,eAAA;~~WAAjC~~,CACE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,GACnB,QACY;~~GACX~~,CAAA"}
1	+ {"version":3,"file":"CardButton.js","names":[],"sources":["../../../../src/components/Card/CardButton.tsx"],"sourcesContent":["import type { MouseEventHandler, PropsWithChildren } from 'react'\nimport type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js'\nimport { Card } from './Card.js'\nimport {\n CardRowButton,\n CardTitleContainer,\n CardValue,\n} from './CardButton.style.js'\n\ninterface SettingCardButtonProps extends SettingCardTitle {\n onClick: MouseEventHandler\n}\n\nexport const CardButton: React.FC<\n PropsWithChildren<SettingCardButtonProps>\n> = ({ onClick, icon, title, children }) => (\n <Card>\n <CardRowButton onClick={onClick} disableRipple>\n <CardTitleContainer>\n {icon}\n <CardValue>{title}</CardValue>\n </CardTitleContainer>\n {children}\n </CardRowButton>\n </Card>\n)\n"],"mappings":";;;;AAaA,MAAa,cAER,EAAE,SAAS,MAAM,OAAO,eAC3B,oBAAC,MAAD,EAAA,UACE,qBAAC,eAAD;CAAwB;CAAS,eAAA;CAAjC,UAAA,CACE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,GACnB,QACY;AACX,CAAA,EAAA,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n maxChainsToOrder,\n maxChainsToShow,\n maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n ChainAvatar,\n ChainCard,\n ChainContainer,\n MoreChainsBox,\n MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const { setFieldValue } = useFieldActions()\n const {\n chainOrder,\n chains,\n isLoading,\n getSelectedChains,\n setChainOrder,\n setCurrentChain,\n } = useChainSelect(formType)\n\n const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n useChainOrderStore((state) => [\n state[`${formType}ShowAllNetworks`],\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n ])\n\n const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n useEffect(() => {\n if (chainId) {\n const hasChainInOrderedList = chainOrder.includes(chainId)\n // If we don't have a chain in the ordered chain list we should add it.\n if (!hasChainInOrderedList) {\n setChainOrder(chainId, formType)\n }\n }\n }, [chainId, chainOrder, formType, setChainOrder])\n\n const onChainSelect = useCallback(\n (selectedChainId: number) => {\n setIsAllNetworks(false, formType)\n setCurrentChain(selectedChainId)\n },\n [setIsAllNetworks, setCurrentChain, formType]\n )\n\n const showAllChains = useCallback(() => {\n navigate({ to: navigationRoutes[`${formType}Chain`] })\n }, [navigate, formType])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', {\n isTouched: true,\n })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n isTouched: true,\n })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n const chainsToHide =\n chains?.length === maxChainsToShow\n ? 0\n : (chains?.length ?? 0) - maxChainsToOrder\n\n const chainsToShow = useMemo(\n () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n [chainsToHide, getSelectedChains, chains]\n )\n\n const tilesCount =\n chainsToShow.length +\n (showAllNetworks ? 1 : 0) +\n (chainsToHide > 0 ? 1 : 0)\n\n if (isLoading) {\n return (\n <ChainContainer itemCount={tilesCount}>\n {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rectangular\"\n width={56}\n height={isMobile ? 36 : 56}\n sx={{ borderRadius: 1 }}\n />\n ))}\n </ChainContainer>\n )\n }\n\n return (\n <ChainContainer itemCount={tilesCount}>\n {showAllNetworks && (\n <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={selectAllNetworks}\n type={isAllNetworks ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <AllChainsAvatar\n chains={chains ?? []}\n size={isMobile ? 'small' : 'medium'}\n />\n </ChainCard>\n </Tooltip>\n )}\n {chainsToShow.map((chain: EVMChain) => (\n <ChainItem\n key={chain.id}\n chain={chain}\n isSelected={chainId === chain.id}\n isAllNetworks={isAllNetworks}\n onSelect={onChainSelect}\n />\n ))}\n {chainsToHide > 0 && (\n <ChainCard component=\"button\" onClick={showAllChains}>\n <MoreChainsBox>\n <MoreChainsText>+{chainsToHide}</MoreChainsText>\n </MoreChainsBox>\n </ChainCard>\n )}\n </ChainContainer>\n )\n }\n)\n\nconst ChainItem = memo(\n ({\n chain,\n isSelected,\n isAllNetworks,\n onSelect,\n }: {\n chain: EVMChain\n isSelected: boolean\n isAllNetworks: boolean\n onSelect: (id: number) => void\n }) => {\n return (\n <Tooltip title={chain.name} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={() => onSelect(chain.id)}\n type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <ChainAvatar src={chain.logoURI} alt={chain.key}>\n {chain.name[0]}\n </ChainAvatar>\n </ChainCard>\n </Tooltip>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,cAAyD,MACnE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,CACpD;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EACJ,YACA,QACA,WACA,mBACA,eACA,oBACE,eAAe,QAAQ;CAE3B,MAAM,CAAC,iBAAiB,eAAe,oBACrC,oBAAoB,UAAU;EAC5B,MAAM,GAAG,SAAS;EAClB,MAAM,GAAG,SAAS;EAClB,MAAM;CACR,CAAC;CAEH,MAAM,CAAC,WAAW,eAAe,cAAc,YAAY,QAAQ,CAAC;CAEpE,gBAAgB;EACd,IAAI;~~OAGE~~,CAF0B,WAAW,SAAS,OAEzB,GACvB,cAAc,SAAS,QAAQ;EAAA;CAGrC,GAAG;EAAC;EAAS;EAAY;EAAU;CAAa,CAAC;CAEjD,MAAM,gBAAgB,aACnB,oBAA4B;EAC3B,iBAAiB,OAAO,QAAQ;EAChC,gBAAgB,eAAe;CACjC,GACA;EAAC;EAAkB;EAAiB;CAAQ,CAC9C;CAEA,MAAM,gBAAgB,kBAAkB;EACtC,SAAS,EAAE,IAAI,iBAAiB,GAAG,SAAS,QAAQ,CAAC;CACvD,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,MAAM,QAAQ;EAE/B,cAAc,cAAc,YAAY,QAAQ,GAAG,IAAI,EACrD,WAAW,KACb,CAAC;EACD,cAAc,cAAc,YAAY,QAAQ,GAAG,IAAI,EACrD,WAAW,KACb,CAAC;CACH,GAAG;EAAC;EAAkB;EAAU;CAAa,CAAC;CAE9C,MAAM,eACJ,QAAQ,WAAA,IACJ,KACC,QAAQ,UAAU,KAAA;CAEzB,MAAM,eAAe,eACZ,eAAe,IAAI,kBAAkB,IAAI,WAAW,CAAC,GAC5D;EAAC;EAAc;EAAmB;CAAM,CAC1C;CAEA,MAAM,aACJ,aAAa,UACZ,kBAAkB,IAAI,MACtB,eAAe,IAAI,IAAI;CAE1B,IAAI,WACF,OACE,oBAAC,gBAAD;EAAgB,WAAW;~~YACxB~~,MAAM,KAAK,EAAE,QAAA,GAA2B,CAAC,CAAC,CAAC,KAAK,GAAG,UAClD,oBAAC,UAAD;GAEE,SAAQ;GACR,OAAO;GACP,QAAQ,WAAW,KAAK;GACxB,IAAI,EAAE,cAAc,EAAE;EACvB,GALM,KAKN,CACF;CACa,CAAA;CAIpB,OACE,qBAAC,gBAAD;EAAgB,WAAW;~~YAA3B~~;GACG,mBACC,oBAAC,SAAD;IAAS,OAAO,EAAE,kBAAkB;IAAG,gBAAgB;~~cACrD~~,oBAAC,WAAD;KACE,WAAU;KACV,SAAS;KACT,MAAM,gBAAgB,aAAa;KACnC,gBAAe;~~eAEf~~,oBAAC,iBAAD;MACE,QAAQ,UAAU,CAAC;MACnB,MAAM,WAAW,UAAU;KAC5B,CAAA;IACQ,CAAA;GACJ,CAAA;GAEV,aAAa,KAAK,UACjB,oBAAC,WAAD;IAES;IACP,YAAY,YAAY,MAAM;IACf;IACf,UAAU;GACX,GALM,MAAM,EAKZ,CACF;GACA,eAAe,KACd,oBAAC,WAAD;IAAW,WAAU;IAAS,SAAS;~~cACrC~~,oBAAC,eAAD,EAAA,UACE,qBAAC,gBAAD,EAAA,UAAA,CAAgB,KAAE,YAA6B,EAAA,CAAA,EAClC,CAAA;GACN,CAAA;EAEC;;AAEpB,CACF;AAEA,MAAM,YAAY,MACf,EACC,OACA,YACA,eACA,eAMI;CACJ,OACE,oBAAC,SAAD;EAAS,OAAO,MAAM;EAAM,gBAAgB;~~YAC1C~~,oBAAC,WAAD;GACE,WAAU;GACV,eAAe,SAAS,MAAM,EAAE;GAChC,MAAM,CAAC,iBAAiB,aAAa,aAAa;GAClD,gBAAe;~~aAEf~~,oBAAC,aAAD;IAAa,KAAK,MAAM;IAAS,KAAK,MAAM;~~cACzC~~,MAAM,KAAK;GACD,CAAA;EACJ,CAAA;CACJ,CAAA;AAEb,CACF"}
1	+ {"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n maxChainsToOrder,\n maxChainsToShow,\n maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n ChainAvatar,\n ChainCard,\n ChainContainer,\n MoreChainsBox,\n MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const { setFieldValue } = useFieldActions()\n const {\n chainOrder,\n chains,\n isLoading,\n getSelectedChains,\n setChainOrder,\n setCurrentChain,\n } = useChainSelect(formType)\n\n const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n useChainOrderStore((state) => [\n state[`${formType}ShowAllNetworks`],\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n ])\n\n const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n useEffect(() => {\n if (chainId) {\n const hasChainInOrderedList = chainOrder.includes(chainId)\n // If we don't have a chain in the ordered chain list we should add it.\n if (!hasChainInOrderedList) {\n setChainOrder(chainId, formType)\n }\n }\n }, [chainId, chainOrder, formType, setChainOrder])\n\n const onChainSelect = useCallback(\n (selectedChainId: number) => {\n setIsAllNetworks(false, formType)\n setCurrentChain(selectedChainId)\n },\n [setIsAllNetworks, setCurrentChain, formType]\n )\n\n const showAllChains = useCallback(() => {\n navigate({ to: navigationRoutes[`${formType}Chain`] })\n }, [navigate, formType])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', {\n isTouched: true,\n })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n isTouched: true,\n })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n const chainsToHide =\n chains?.length === maxChainsToShow\n ? 0\n : (chains?.length ?? 0) - maxChainsToOrder\n\n const chainsToShow = useMemo(\n () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n [chainsToHide, getSelectedChains, chains]\n )\n\n const tilesCount =\n chainsToShow.length +\n (showAllNetworks ? 1 : 0) +\n (chainsToHide > 0 ? 1 : 0)\n\n if (isLoading) {\n return (\n <ChainContainer itemCount={tilesCount}>\n {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rectangular\"\n width={56}\n height={isMobile ? 36 : 56}\n sx={{ borderRadius: 1 }}\n />\n ))}\n </ChainContainer>\n )\n }\n\n return (\n <ChainContainer itemCount={tilesCount}>\n {showAllNetworks && (\n <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={selectAllNetworks}\n type={isAllNetworks ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <AllChainsAvatar\n chains={chains ?? []}\n size={isMobile ? 'small' : 'medium'}\n />\n </ChainCard>\n </Tooltip>\n )}\n {chainsToShow.map((chain: EVMChain) => (\n <ChainItem\n key={chain.id}\n chain={chain}\n isSelected={chainId === chain.id}\n isAllNetworks={isAllNetworks}\n onSelect={onChainSelect}\n />\n ))}\n {chainsToHide > 0 && (\n <ChainCard component=\"button\" onClick={showAllChains}>\n <MoreChainsBox>\n <MoreChainsText>+{chainsToHide}</MoreChainsText>\n </MoreChainsBox>\n </ChainCard>\n )}\n </ChainContainer>\n )\n }\n)\n\nconst ChainItem = memo(\n ({\n chain,\n isSelected,\n isAllNetworks,\n onSelect,\n }: {\n chain: EVMChain\n isSelected: boolean\n isAllNetworks: boolean\n onSelect: (id: number) => void\n }) => {\n return (\n <Tooltip title={chain.name} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={() => onSelect(chain.id)}\n type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <ChainAvatar src={chain.logoURI} alt={chain.key}>\n {chain.name[0]}\n </ChainAvatar>\n </ChainCard>\n </Tooltip>\n )\n }\n)\n"],"mappings":"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"}

package/dist/esm/components/Chains/AllChainsAvatar.js CHANGED Viewed

@@ -33,6 +33,12 @@ const chainTypeIcons = [
 		chainType: ChainType.TVM,
 		icon: "https://lifinance.github.io/types/src/assets/icons/chains/tron.svg",
 		defaultChainId: ChainId.TRN
+	},
+	{
+		name: "Stellar",
+		chainType: ChainType.STL,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/stellar.svg",
+		defaultChainId: ChainId.XLM
 	}
 ];
 const maxChainAvatarsCount = 4;
@@ -54,7 +60,7 @@ const AllChainsAvatar = memo(({ chains, size }) => {
 			}
 			return numberOfChains > 0;
 		});
-		if (existingChainTypeIcons.length === maxChainAvatarsCount) return existingChainTypeIcons;
+		if (existingChainTypeIcons.length >= maxChainAvatarsCount) return existingChainTypeIcons;
 		const remainingSlots = maxChainAvatarsCount - existingChainTypeIcons.length;
 		const predefinedIconNames = new Set(existingChainTypeIcons.map((icon) => icon.name));
 		const additionalIcons = chains.filter((chain) => {

package/dist/esm/components/Chains/AllChainsAvatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n ChainId,\n ChainType,\n type EVMChain,\n type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n chains: ExtendedChain[] \| EVMChain[]\n size: 'small' \| 'medium'\n}\n\nconst chainTypeIcons = [\n {\n name: 'Ethereum',\n chainType: ChainType.EVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n defaultChainId: ChainId.ETH,\n },\n {\n name: 'Solana',\n chainType: ChainType.SVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n defaultChainId: ChainId.SOL,\n },\n {\n name: 'Bitcoin',\n chainType: ChainType.UTXO,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n defaultChainId: ChainId.BTC,\n },\n {\n name: 'Sui',\n chainType: ChainType.MVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n defaultChainId: ChainId.SUI,\n },\n {\n name: 'Tron',\n chainType: ChainType.TVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n defaultChainId: ChainId.TRN,\n },\n]\n\nconst maxChainAvatarsCount = 4\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n const icons = useMemo(() => {\n // Create maps for efficient lookups\n const chainsPerChainType = new Map<ChainType, number>()\n const chainsByChainType = new Map<\n ChainType,\n (ExtendedChain \| EVMChain)[]\n >()\n\n chains.forEach((chain) => {\n chainsPerChainType.set(\n chain.chainType,\n (chainsPerChainType.get(chain.chainType) \|\| 0) + 1\n )\n const chainsOfType = chainsByChainType.get(chain.chainType) \|\| []\n chainsOfType.push(chain)\n chainsByChainType.set(chain.chainType, chainsOfType)\n })\n\n // Get existing ecosystem icons\n const existingChainTypeIcons = chainTypeIcons.filter(\n (predefinedChain) => {\n const numberOfChains =\n chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n // If there's only one chain of this type, check if it's not the default\n if (numberOfChains === 1) {\n const chainsOfType = chainsByChainType.get(\n predefinedChain.chainType\n )\n const singleChain = chainsOfType?.[0]\n // Exclude the predefined icon if the single chain is not the default\n if (\n singleChain &&\n singleChain.id !== predefinedChain.defaultChainId\n ) {\n return false\n }\n }\n\n return numberOfChains > 0\n }\n )\n\n if (existingChainTypeIcons.length ~~===~~ maxChainAvatarsCount) {\n return existingChainTypeIcons\n }\n\n const remainingSlots =\n maxChainAvatarsCount - existingChainTypeIcons.length\n\n // Create a Set for O(1) lookup of predefined icon names\n const predefinedIconNames = new Set(\n existingChainTypeIcons.map((icon) => icon.name)\n )\n\n const chainsWithLogos = chains.filter((chain) => {\n // Filter out chain icons matching ecosystem icons\n return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n })\n\n const additionalIcons = chainsWithLogos\n .slice(0, remainingSlots)\n .map((chain) => ({\n name: chain.name,\n chainType: chain.chainType,\n icon: chain.logoURI!,\n }))\n\n return [...existingChainTypeIcons, ...additionalIcons]\n }, [chains])\n\n const wrapperSize = size === 'small' ? '32px' : '40px'\n const avatarSize = size === 'small' ? '12px' : '16px'\n const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n const gridRows = avatarsCount > 2 ? 2 : 1\n const gridColumns = avatarsCount > 1 ? 2 : 1\n\n return (\n <Box\n sx={{\n width: wrapperSize,\n height: wrapperSize,\n display: 'grid',\n gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n placeItems: 'center',\n }}\n >\n {icons.slice(0, avatarsCount).map((chain, idx) => {\n const isThirdAvatarInThreeAvatarLayout =\n avatarsCount === 3 && idx === 2\n\n return (\n <Avatar\n key={`${chain.chainType}-${idx}`}\n src={chain.icon}\n alt={chain.name}\n sx={{\n width: avatarSize,\n height: avatarSize,\n margin: 'auto',\n ...(isThirdAvatarInThreeAvatarLayout && {\n gridColumn: '1 / span 2',\n gridRow: '2',\n justifySelf: 'center',\n }),\n }}\n >\n {chain.chainType[0]}\n </Avatar>\n )\n })}\n </Box>\n )\n })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;AACF;AAEA,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,IAAuB;EACtD,MAAM,oCAAoB,IAAI,IAG5B;EAEF,OAAO,SAAS,UAAU;GACxB,mBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,SAAS,KAAK,KAAK,CACnD;GACA,MAAM,eAAe,kBAAkB,IAAI,MAAM,SAAS,KAAK,CAAC;GAChE,aAAa,KAAK,KAAK;GACvB,kBAAkB,IAAI,MAAM,WAAW,YAAY;EACrD,CAAC;EAGD,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,SAAS,KAAK;GAGvD,IAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,SAEa,CAAC,GAAG;IAEnC,IACE,eACA,YAAY,OAAO,gBAAgB,gBAEnC,OAAO;GAEX;GAEA,OAAO,iBAAiB;EAC1B,CACF;EAEA,IAAI,uBAAuB,~~WAAW~~,~~sBACpC~~,OAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,IAAI,CAChD;EAOA,MAAM,kBALkB,OAAO,QAAQ,UAAU;GAE/C,OAAO,CAAC,oBAAoB,IAAI,MAAM,IAAI,KAAK,QAAQ,MAAM,OAAO;EACtE,CAEsC,CAAC,CACpC,MAAM,GAAG,cAAc,CAAC,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;EACd,EAAE;EAEJ,OAAO,CAAC,GAAG,wBAAwB,GAAG,eAAe;CACvD,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,oBAAoB;CAChE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;CAE3C,OACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;EACd;~~YAEC~~,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;GAEhC,OACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;KACf;IACF;~~cAEC~~,MAAM,UAAU;GACX,GAfD,GAAG,MAAM,UAAU,GAAG,KAerB;EAEZ,CAAC;CACE,CAAA;AAET,CAAC"}
1	+ {"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n ChainId,\n ChainType,\n type EVMChain,\n type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n chains: ExtendedChain[] \| EVMChain[]\n size: 'small' \| 'medium'\n}\n\nconst chainTypeIcons = [\n {\n name: 'Ethereum',\n chainType: ChainType.EVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n defaultChainId: ChainId.ETH,\n },\n {\n name: 'Solana',\n chainType: ChainType.SVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n defaultChainId: ChainId.SOL,\n },\n {\n name: 'Bitcoin',\n chainType: ChainType.UTXO,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n defaultChainId: ChainId.BTC,\n },\n {\n name: 'Sui',\n chainType: ChainType.MVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n defaultChainId: ChainId.SUI,\n },\n {\n name: 'Tron',\n chainType: ChainType.TVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n defaultChainId: ChainId.TRN,\n },\n {\n name: 'Stellar',\n chainType: ChainType.STL,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/stellar.svg',\n defaultChainId: ChainId.XLM,\n },\n]\n\nconst maxChainAvatarsCount = 4\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n const icons = useMemo(() => {\n // Create maps for efficient lookups\n const chainsPerChainType = new Map<ChainType, number>()\n const chainsByChainType = new Map<\n ChainType,\n (ExtendedChain \| EVMChain)[]\n >()\n\n chains.forEach((chain) => {\n chainsPerChainType.set(\n chain.chainType,\n (chainsPerChainType.get(chain.chainType) \|\| 0) + 1\n )\n const chainsOfType = chainsByChainType.get(chain.chainType) \|\| []\n chainsOfType.push(chain)\n chainsByChainType.set(chain.chainType, chainsOfType)\n })\n\n // Get existing ecosystem icons\n const existingChainTypeIcons = chainTypeIcons.filter(\n (predefinedChain) => {\n const numberOfChains =\n chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n // If there's only one chain of this type, check if it's not the default\n if (numberOfChains === 1) {\n const chainsOfType = chainsByChainType.get(\n predefinedChain.chainType\n )\n const singleChain = chainsOfType?.[0]\n // Exclude the predefined icon if the single chain is not the default\n if (\n singleChain &&\n singleChain.id !== predefinedChain.defaultChainId\n ) {\n return false\n }\n }\n\n return numberOfChains > 0\n }\n )\n\n if (existingChainTypeIcons.length >= maxChainAvatarsCount) {\n return existingChainTypeIcons\n }\n\n const remainingSlots =\n maxChainAvatarsCount - existingChainTypeIcons.length\n\n // Create a Set for O(1) lookup of predefined icon names\n const predefinedIconNames = new Set(\n existingChainTypeIcons.map((icon) => icon.name)\n )\n\n const chainsWithLogos = chains.filter((chain) => {\n // Filter out chain icons matching ecosystem icons\n return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n })\n\n const additionalIcons = chainsWithLogos\n .slice(0, remainingSlots)\n .map((chain) => ({\n name: chain.name,\n chainType: chain.chainType,\n icon: chain.logoURI!,\n }))\n\n return [...existingChainTypeIcons, ...additionalIcons]\n }, [chains])\n\n const wrapperSize = size === 'small' ? '32px' : '40px'\n const avatarSize = size === 'small' ? '12px' : '16px'\n const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n const gridRows = avatarsCount > 2 ? 2 : 1\n const gridColumns = avatarsCount > 1 ? 2 : 1\n\n return (\n <Box\n sx={{\n width: wrapperSize,\n height: wrapperSize,\n display: 'grid',\n gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n placeItems: 'center',\n }}\n >\n {icons.slice(0, avatarsCount).map((chain, idx) => {\n const isThirdAvatarInThreeAvatarLayout =\n avatarsCount === 3 && idx === 2\n\n return (\n <Avatar\n key={`${chain.chainType}-${idx}`}\n src={chain.icon}\n alt={chain.name}\n sx={{\n width: avatarSize,\n height: avatarSize,\n margin: 'auto',\n ...(isThirdAvatarInThreeAvatarLayout && {\n gridColumn: '1 / span 2',\n gridRow: '2',\n justifySelf: 'center',\n }),\n }}\n >\n {chain.chainType[0]}\n </Avatar>\n )\n })}\n </Box>\n )\n })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;AACF;AAEA,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,IAAuB;EACtD,MAAM,oCAAoB,IAAI,IAG5B;EAEF,OAAO,SAAS,UAAU;GACxB,mBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,SAAS,KAAK,KAAK,CACnD;GACA,MAAM,eAAe,kBAAkB,IAAI,MAAM,SAAS,KAAK,CAAC;GAChE,aAAa,KAAK,KAAK;GACvB,kBAAkB,IAAI,MAAM,WAAW,YAAY;EACrD,CAAC;EAGD,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,SAAS,KAAK;GAGvD,IAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,SAEa,CAAC,GAAG;IAEnC,IACE,eACA,YAAY,OAAO,gBAAgB,gBAEnC,OAAO;GAEX;GAEA,OAAO,iBAAiB;EAC1B,CACF;EAEA,IAAI,uBAAuB,UAAU,sBACnC,OAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,IAAI,CAChD;EAOA,MAAM,kBALkB,OAAO,QAAQ,UAAU;GAE/C,OAAO,CAAC,oBAAoB,IAAI,MAAM,IAAI,KAAK,QAAQ,MAAM,OAAO;EACtE,CAEsC,CAAC,CACpC,MAAM,GAAG,cAAc,CAAC,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;EACd,EAAE;EAEJ,OAAO,CAAC,GAAG,wBAAwB,GAAG,eAAe;CACvD,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,oBAAoB;CAChE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;CAE3C,OACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;EACd;EAEC,UAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;GAEhC,OACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;KACf;IACF;IAEC,UAAA,MAAM,UAAU;GACX,GAfD,GAAG,MAAM,UAAU,GAAG,KAerB;EAEZ,CAAC;CACE,CAAA;AAET,CAAC"}

package/dist/esm/components/Chains/ChainList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainList.js","names":["List","ListItemButton","ListItemAvatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Skeleton } from '@mui/material'\nimport type { JSX, RefObject } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FormType } from '../../stores/form/types.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport {\n List,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { VirtualizedChainList } from './VirtualizedChainList.js'\n\ninterface ChainListProps {\n parentRef: RefObject<HTMLDivElement \| null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n isLoading: boolean\n hasSearchQuery: boolean\n inExpansion: boolean\n}\n\nexport const ChainList = ({\n parentRef,\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n isLoading,\n inExpansion,\n}: ChainListProps): JSX.Element => {\n const { t } = useTranslation()\n\n const itemsSize = inExpansion ? 'small' : 'medium'\n\n if (isLoading) {\n return (\n <List disablePadding sx={{ cursor: 'default' }}>\n {Array.from({ length: 3 }).map((_, index) => (\n <ListItemButton\n key={index}\n size={itemsSize}\n sx={{ pointerEvents: 'none' }}\n >\n <ListItemAvatar size={itemsSize}>\n <Skeleton\n variant=\"circular\"\n width={itemsSize === 'small' ? 32 : 40}\n height={itemsSize === 'small' ? 32 : 40}\n sx={{ marginRight: 2 }}\n />\n </ListItemAvatar>\n <ListItemText\n primary={\n <Skeleton\n variant=\"text\"\n width={'100%'}\n height={itemsSize === 'small' ? 18 : 24}\n />\n }\n size={itemsSize}\n />\n </ListItemButton>\n ))}\n </List>\n )\n }\n\n if (!chains.length) {\n return <SearchNotFound message={t('info.message.emptyChainList')} />\n }\n\n return (\n <VirtualizedChainList\n scrollElementRef={parentRef}\n formType={formType}\n chains={chains}\n hasSearchQuery={hasSearchQuery}\n onSelect={onSelect}\n selectedChainId={selectedChainId}\n itemsSize={itemsSize}\n withPinnedChains={inExpansion}\n />\n )\n}\n"],"mappings":";;;;;;;AAyBA,MAAa,aAAa,EACxB,WACA,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACiC;CACjC,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,YAAY,cAAc,UAAU;CAE1C,IAAI,WACF,OACE,oBAACA,QAAD;EAAM,gBAAA;EAAe,IAAI,EAAE,QAAQ,UAAU;~~YAC1C~~,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UACjC,qBAACC,kBAAD;GAEE,MAAM;GACN,IAAI,EAAE,eAAe,OAAO;~~aAH9B~~,CAKE,oBAACC,kBAAD;IAAgB,MAAM;~~cACpB~~,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO,cAAc,UAAU,KAAK;KACpC,QAAQ,cAAc,UAAU,KAAK;KACrC,IAAI,EAAE,aAAa,EAAE;IACtB,CAAA;GACa,CAAA,GAChB,oBAACC,gBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ,cAAc,UAAU,KAAK;IACtC,CAAA;IAEH,MAAM;GACP,CAAA,CACa;~~KAtBT~~,KAsBS,CACjB;CACG,CAAA;CAIV,IAAI,CAAC,OAAO,QACV,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,6BAA6B,EAAI,CAAA;CAGrE,OACE,oBAAC,sBAAD;EACE,kBAAkB;EACR;EACF;EACQ;EACN;EACO;EACN;EACX,kBAAkB;CACnB,CAAA;AAEL"}
1	+ {"version":3,"file":"ChainList.js","names":["List","ListItemButton","ListItemAvatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Skeleton } from '@mui/material'\nimport type { JSX, RefObject } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FormType } from '../../stores/form/types.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport {\n List,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { VirtualizedChainList } from './VirtualizedChainList.js'\n\ninterface ChainListProps {\n parentRef: RefObject<HTMLDivElement \| null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n isLoading: boolean\n hasSearchQuery: boolean\n inExpansion: boolean\n}\n\nexport const ChainList = ({\n parentRef,\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n isLoading,\n inExpansion,\n}: ChainListProps): JSX.Element => {\n const { t } = useTranslation()\n\n const itemsSize = inExpansion ? 'small' : 'medium'\n\n if (isLoading) {\n return (\n <List disablePadding sx={{ cursor: 'default' }}>\n {Array.from({ length: 3 }).map((_, index) => (\n <ListItemButton\n key={index}\n size={itemsSize}\n sx={{ pointerEvents: 'none' }}\n >\n <ListItemAvatar size={itemsSize}>\n <Skeleton\n variant=\"circular\"\n width={itemsSize === 'small' ? 32 : 40}\n height={itemsSize === 'small' ? 32 : 40}\n sx={{ marginRight: 2 }}\n />\n </ListItemAvatar>\n <ListItemText\n primary={\n <Skeleton\n variant=\"text\"\n width={'100%'}\n height={itemsSize === 'small' ? 18 : 24}\n />\n }\n size={itemsSize}\n />\n </ListItemButton>\n ))}\n </List>\n )\n }\n\n if (!chains.length) {\n return <SearchNotFound message={t('info.message.emptyChainList')} />\n }\n\n return (\n <VirtualizedChainList\n scrollElementRef={parentRef}\n formType={formType}\n chains={chains}\n hasSearchQuery={hasSearchQuery}\n onSelect={onSelect}\n selectedChainId={selectedChainId}\n itemsSize={itemsSize}\n withPinnedChains={inExpansion}\n />\n )\n}\n"],"mappings":";;;;;;;AAyBA,MAAa,aAAa,EACxB,WACA,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACiC;CACjC,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,YAAY,cAAc,UAAU;CAE1C,IAAI,WACF,OACE,oBAACA,QAAD;EAAM,gBAAA;EAAe,IAAI,EAAE,QAAQ,UAAU;EAC1C,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UACjC,qBAACC,kBAAD;GAEE,MAAM;GACN,IAAI,EAAE,eAAe,OAAO;GAH9B,UAAA,CAKE,oBAACC,kBAAD;IAAgB,MAAM;IACpB,UAAA,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO,cAAc,UAAU,KAAK;KACpC,QAAQ,cAAc,UAAU,KAAK;KACrC,IAAI,EAAE,aAAa,EAAE;IACtB,CAAA;GACa,CAAA,GAChB,oBAACC,gBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ,cAAc,UAAU,KAAK;IACtC,CAAA;IAEH,MAAM;GACP,CAAA,CACa;EAtBT,GAAA,KAsBS,CACjB;CACG,CAAA;CAIV,IAAI,CAAC,OAAO,QACV,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,6BAA6B,EAAI,CAAA;CAGrE,OACE,oBAAC,sBAAD;EACE,kBAAkB;EACR;EACF;EACQ;EACN;EACO;EACN;EACX,kBAAkB;CACnB,CAAA;AAEL"}

package/dist/esm/components/Chains/ChainListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainListItem.js","names":["ListItem","ListItemButton","ListItemAvatar","Avatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainListItem.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport {\n Avatar,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { PinChainButton, pinButtonClassName } from './PinChainButton.js'\n\ninterface ChainListItemProps {\n chain: ExtendedChain\n onSelect: (chain: ExtendedChain) => void\n selected?: boolean\n itemsSize: 'small' \| 'medium'\n size: number\n start: number\n isPinned: boolean\n onPin: (chainId: number) => void\n withPin: boolean\n}\n\nexport const ChainListItem: React.NamedExoticComponent<ChainListItemProps> =\n memo(\n ({\n chain,\n onSelect,\n selected,\n itemsSize,\n size,\n start,\n isPinned,\n onPin,\n withPin,\n }: ChainListItemProps): JSX.Element => {\n return (\n <ListItem\n style={{\n height: `${size}px`,\n transform: `translateY(${start}px)`,\n padding: 0,\n overflow: 'hidden',\n }}\n sx={{\n [`&:hover .${pinButtonClassName}`]: {\n opacity: 1,\n transform: 'translateY(0)',\n },\n }}\n >\n <ListItemButton\n onClick={() => onSelect(chain)}\n selected={selected}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>\n {chain.name[0]}\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary={chain.name} size={itemsSize} />\n {withPin && (\n <Box\n style={{\n position: 'relative',\n height: 28,\n width: 28,\n }}\n >\n <PinChainButton\n isPinned={isPinned}\n onPin={() => onPin(chain.id)}\n />\n </Box>\n )}\n </ListItemButton>\n </ListItem>\n )\n }\n )\n"],"mappings":";;;;;;AAyBA,MAAa,gBACX,MACG,EACC,OACA,UACA,UACA,WACA,MACA,OACA,UACA,OACA,cACqC;CACrC,OACE,oBAACA,YAAD;EACE,OAAO;GACL,QAAQ,GAAG,KAAK;GAChB,WAAW,cAAc,MAAM;GAC/B,SAAS;GACT,UAAU;EACZ;EACA,IAAI,GACD,YAAY,uBAAuB;GAClC,SAAS;GACT,WAAW;EACb,EACF;~~YAEA~~,qBAACC,kBAAD;GACE,eAAe,SAAS,KAAK;GACnB;GACV,MAAM;~~aAHR~~;IAKE,oBAACC,kBAAD;KAAgB,MAAM;~~eACpB~~,oBAACC,UAAD;MAAQ,KAAK,MAAM;MAAS,KAAK,MAAM;MAAM,MAAM;~~gBAChD~~,MAAM,KAAK;KACN,CAAA;IACM,CAAA;IAChB,oBAACC,gBAAD;KAAc,SAAS,MAAM;KAAM,MAAM;IAAY,CAAA;IACpD,WACC,oBAAC,KAAD;KACE,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;KACT;~~eAEA~~,oBAAC,gBAAD;MACY;MACV,aAAa,MAAM,MAAM,EAAE;KAC5B,CAAA;IACE,CAAA;GAEO;;CACR,CAAA;AAEd,CACF"}
1	+ {"version":3,"file":"ChainListItem.js","names":["ListItem","ListItemButton","ListItemAvatar","Avatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainListItem.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport {\n Avatar,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { PinChainButton, pinButtonClassName } from './PinChainButton.js'\n\ninterface ChainListItemProps {\n chain: ExtendedChain\n onSelect: (chain: ExtendedChain) => void\n selected?: boolean\n itemsSize: 'small' \| 'medium'\n size: number\n start: number\n isPinned: boolean\n onPin: (chainId: number) => void\n withPin: boolean\n}\n\nexport const ChainListItem: React.NamedExoticComponent<ChainListItemProps> =\n memo(\n ({\n chain,\n onSelect,\n selected,\n itemsSize,\n size,\n start,\n isPinned,\n onPin,\n withPin,\n }: ChainListItemProps): JSX.Element => {\n return (\n <ListItem\n style={{\n height: `${size}px`,\n transform: `translateY(${start}px)`,\n padding: 0,\n overflow: 'hidden',\n }}\n sx={{\n [`&:hover .${pinButtonClassName}`]: {\n opacity: 1,\n transform: 'translateY(0)',\n },\n }}\n >\n <ListItemButton\n onClick={() => onSelect(chain)}\n selected={selected}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>\n {chain.name[0]}\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary={chain.name} size={itemsSize} />\n {withPin && (\n <Box\n style={{\n position: 'relative',\n height: 28,\n width: 28,\n }}\n >\n <PinChainButton\n isPinned={isPinned}\n onPin={() => onPin(chain.id)}\n />\n </Box>\n )}\n </ListItemButton>\n </ListItem>\n )\n }\n )\n"],"mappings":";;;;;;AAyBA,MAAa,gBACX,MACG,EACC,OACA,UACA,UACA,WACA,MACA,OACA,UACA,OACA,cACqC;CACrC,OACE,oBAACA,YAAD;EACE,OAAO;GACL,QAAQ,GAAG,KAAK;GAChB,WAAW,cAAc,MAAM;GAC/B,SAAS;GACT,UAAU;EACZ;EACA,IAAI,GACD,YAAY,uBAAuB;GAClC,SAAS;GACT,WAAW;EACb,EACF;EAEA,UAAA,qBAACC,kBAAD;GACE,eAAe,SAAS,KAAK;GACnB;GACV,MAAM;GAHR,UAAA;IAKE,oBAACC,kBAAD;KAAgB,MAAM;KACpB,UAAA,oBAACC,UAAD;MAAQ,KAAK,MAAM;MAAS,KAAK,MAAM;MAAM,MAAM;MAChD,UAAA,MAAM,KAAK;KACN,CAAA;IACM,CAAA;IAChB,oBAACC,gBAAD;KAAc,SAAS,MAAM;KAAM,MAAM;IAAY,CAAA;IACpD,WACC,oBAAC,KAAD;KACE,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;KACT;KAEA,UAAA,oBAAC,gBAAD;MACY;MACV,aAAa,MAAM,MAAM,EAAE;KAC5B,CAAA;IACE,CAAA;GAEO;;CACR,CAAA;AAEd,CACF"}

package/dist/esm/components/Chains/ChainsExpanded.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainsExpanded.js","names":[],"sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"sourcesContent":["import type React from 'react'\nimport { memo } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport {\n chainExpansionWidth,\n SelectChainExpansionContainer,\n} from './ChainsExpanded.style.js'\nimport { SelectChainExpansionContent } from './SelectChainExpansionContent.js'\n\ninterface ChainsExpandedProps {\n formType: FormType\n open: boolean\n}\n\nexport const ChainsExpanded: React.NamedExoticComponent<ChainsExpandedProps> =\n memo(function ChainsExpanded({ formType, open }: ChainsExpandedProps) {\n const { theme } = useWidgetConfig()\n\n return (\n <ExpansionTransition in={open} width={chainExpansionWidth}>\n <SelectChainExpansionContainer\n expansionHeight={getWidgetMaxHeight(theme)}\n >\n <SelectChainExpansionContent formType={formType} />\n </SelectChainExpansionContainer>\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAAE,UAAU,QAA6B;CACpE,MAAM,EAAE,UAAU,gBAAgB;CAElC,OACE,oBAAC,qBAAD;EAAqB,IAAI;EAAM,OAAO;~~YACpC~~,oBAAC,+BAAD;GACE,iBAAiB,mBAAmB,KAAK;~~aAEzC~~,oBAAC,6BAAD,EAAuC,SAAW,CAAA;EACrB,CAAA;CACZ,CAAA;AAEzB,CAAC"}
1	+ {"version":3,"file":"ChainsExpanded.js","names":[],"sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"sourcesContent":["import type React from 'react'\nimport { memo } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport {\n chainExpansionWidth,\n SelectChainExpansionContainer,\n} from './ChainsExpanded.style.js'\nimport { SelectChainExpansionContent } from './SelectChainExpansionContent.js'\n\ninterface ChainsExpandedProps {\n formType: FormType\n open: boolean\n}\n\nexport const ChainsExpanded: React.NamedExoticComponent<ChainsExpandedProps> =\n memo(function ChainsExpanded({ formType, open }: ChainsExpandedProps) {\n const { theme } = useWidgetConfig()\n\n return (\n <ExpansionTransition in={open} width={chainExpansionWidth}>\n <SelectChainExpansionContainer\n expansionHeight={getWidgetMaxHeight(theme)}\n >\n <SelectChainExpansionContent formType={formType} />\n </SelectChainExpansionContainer>\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAAE,UAAU,QAA6B;CACpE,MAAM,EAAE,UAAU,gBAAgB;CAElC,OACE,oBAAC,qBAAD;EAAqB,IAAI;EAAM,OAAO;EACpC,UAAA,oBAAC,+BAAD;GACE,iBAAiB,mBAAmB,KAAK;GAEzC,UAAA,oBAAC,6BAAD,EAAuC,SAAW,CAAA;EACrB,CAAA;CACZ,CAAA;AAEzB,CAAC"}

package/dist/esm/components/Chains/PinChainButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PinChainButton.js","names":[],"sources":["../../../../src/components/Chains/PinChainButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\ninterface PinChainButtonProps {\n isPinned: boolean\n onPin: () => void\n}\n\nexport const pinButtonClassName = 'pin-button'\nconst animationDuration = 225\n\nexport const PinChainButton = ({\n isPinned,\n onPin,\n}: PinChainButtonProps): JSX.Element => {\n const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n return (\n <IconButton\n className={pinButtonClassName}\n edge=\"end\"\n aria-label=\"pin\"\n onClick={(e) => {\n e.stopPropagation()\n onPin()\n }}\n sx={{\n position: 'absolute',\n top: 0,\n left: 0,\n height: 28,\n width: 28,\n transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n ...(isPinned\n ? {\n opacity: 1,\n transform: 'translateY(0)',\n }\n : {\n opacity: 0,\n transform: 'translateY(-50%)',\n }),\n }}\n >\n <PinIcon\n sx={{\n height: 20,\n width: 20,\n color: 'text.secondary',\n }}\n />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB;AAClC,MAAM,oBAAoB;AAE1B,MAAa,kBAAkB,EAC7B,UACA,YACsC;CACtC,MAAM,UAAU,WAAW,cAAc;CACzC,OACE,oBAAC,YAAD;EACE,WAAW;EACX,MAAK;EACL,cAAW;EACX,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,MAAM;EACR;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,QAAQ;GACR,OAAO;GACP,YAAY,WAAW,kBAAkB,6CAA6C,kBAAkB;GACxG,GAAI,WACA;IACE,SAAS;IACT,WAAW;GACb,IACA;IACE,SAAS;IACT,WAAW;GACb;EACN;~~YAEA~~,oBAAC,SAAD,EACE,IAAI;GACF,QAAQ;GACR,OAAO;GACP,OAAO;EACT,EACD,CAAA;CACS,CAAA;AAEhB"}
1	+ {"version":3,"file":"PinChainButton.js","names":[],"sources":["../../../../src/components/Chains/PinChainButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\ninterface PinChainButtonProps {\n isPinned: boolean\n onPin: () => void\n}\n\nexport const pinButtonClassName = 'pin-button'\nconst animationDuration = 225\n\nexport const PinChainButton = ({\n isPinned,\n onPin,\n}: PinChainButtonProps): JSX.Element => {\n const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n return (\n <IconButton\n className={pinButtonClassName}\n edge=\"end\"\n aria-label=\"pin\"\n onClick={(e) => {\n e.stopPropagation()\n onPin()\n }}\n sx={{\n position: 'absolute',\n top: 0,\n left: 0,\n height: 28,\n width: 28,\n transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n ...(isPinned\n ? {\n opacity: 1,\n transform: 'translateY(0)',\n }\n : {\n opacity: 0,\n transform: 'translateY(-50%)',\n }),\n }}\n >\n <PinIcon\n sx={{\n height: 20,\n width: 20,\n color: 'text.secondary',\n }}\n />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB;AAClC,MAAM,oBAAoB;AAE1B,MAAa,kBAAkB,EAC7B,UACA,YACsC;CACtC,MAAM,UAAU,WAAW,cAAc;CACzC,OACE,oBAAC,YAAD;EACE,WAAW;EACX,MAAK;EACL,cAAW;EACX,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,MAAM;EACR;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,QAAQ;GACR,OAAO;GACP,YAAY,WAAW,kBAAkB,6CAA6C,kBAAkB;GACxG,GAAI,WACA;IACE,SAAS;IACT,WAAW;GACb,IACA;IACE,SAAS;IACT,WAAW;GACb;EACN;EAEA,UAAA,oBAAC,SAAD,EACE,IAAI;GACF,QAAQ;GACR,OAAO;GACP,OAAO;EACT,EACD,CAAA;CACS,CAAA;AAEhB"}

package/dist/esm/components/Chains/SelectChainExpansionContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainExpansionContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainExpansionContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, useTheme } from '@mui/material'\nimport { type JSX, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSearch } from '../../hooks/useChainSearch.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { SearchInput } from '../Search/SearchInput.js'\nimport { ChainList } from './ChainList.js'\n\ninterface SelectChainExpansionContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n}\n\nexport function SelectChainExpansionContent({\n formType,\n onSelect,\n}: SelectChainExpansionContentProps): JSX.Element {\n const { t } = useTranslation()\n const theme = useTheme()\n const inputRef = useRef<HTMLInputElement>(null)\n const headerRef = useRef<HTMLElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n\n const {\n filteredChains,\n isLoading,\n selectedChainId,\n onSelectChainFallback,\n onChange,\n onClear,\n } = useChainSearch(formType, listRef, inputRef)\n\n const [headerHeight, setHeaderHeight] = useState(0)\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight)\n }\n }, [])\n\n const listContainerHeight = useMemo(() => {\n if (!headerHeight) {\n return undefined\n }\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const value =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${value} - ${headerHeight}px)`\n }, [theme, headerHeight])\n\n return (\n <PageContainer disableGutters>\n <Box ref={headerRef} sx={{ pb: 2, px: 2.5, pt: 3 }}>\n <SearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n size=\"small\"\n onClear={onClear}\n />\n </Box>\n <Box\n ref={listRef}\n style={{ height: listContainerHeight, overflow: 'auto' }}\n >\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion\n />\n </Box>\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,4BAA4B,EAC1C,UACA,YACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,EACJ,gBACA,WACA,iBACA,uBACA,UACA,YACE,eAAe,UAAU,SAAS,QAAQ;CAE9C,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAElD,sBAAsB;EACpB,IAAI,UAAU,SACZ,gBAAgB,UAAU,QAAQ,YAAY;CAElD,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAsB,cAAc;EACxC,IAAI,CAAC,cACH;EAEF,MAAM,sBAAsB,mBAAmB,KAAK;EAKpD,OAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACe,KAAK,aAAa;CACzC,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,OACE,qBAAC,eAAD;EAAe,gBAAA;~~YAAf~~,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAK,IAAI;GAAE;~~aAC~~/C,oBAAC,aAAD;IACY;IACA;IACV,aAAa,EAAE,oBAAoB;IACnC,MAAK;IACI;GACV,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GACE,KAAK;GACL,OAAO;IAAE,QAAQ;IAAqB,UAAU;GAAO;~~aAEvD~~,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACpC,aAAA;GACD,CAAA;EACE,CAAA,CACQ;;AAEnB"}
1	+ {"version":3,"file":"SelectChainExpansionContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainExpansionContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, useTheme } from '@mui/material'\nimport { type JSX, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSearch } from '../../hooks/useChainSearch.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { SearchInput } from '../Search/SearchInput.js'\nimport { ChainList } from './ChainList.js'\n\ninterface SelectChainExpansionContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n}\n\nexport function SelectChainExpansionContent({\n formType,\n onSelect,\n}: SelectChainExpansionContentProps): JSX.Element {\n const { t } = useTranslation()\n const theme = useTheme()\n const inputRef = useRef<HTMLInputElement>(null)\n const headerRef = useRef<HTMLElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n\n const {\n filteredChains,\n isLoading,\n selectedChainId,\n onSelectChainFallback,\n onChange,\n onClear,\n } = useChainSearch(formType, listRef, inputRef)\n\n const [headerHeight, setHeaderHeight] = useState(0)\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight)\n }\n }, [])\n\n const listContainerHeight = useMemo(() => {\n if (!headerHeight) {\n return undefined\n }\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const value =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${value} - ${headerHeight}px)`\n }, [theme, headerHeight])\n\n return (\n <PageContainer disableGutters>\n <Box ref={headerRef} sx={{ pb: 2, px: 2.5, pt: 3 }}>\n <SearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n size=\"small\"\n onClear={onClear}\n />\n </Box>\n <Box\n ref={listRef}\n style={{ height: listContainerHeight, overflow: 'auto' }}\n >\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion\n />\n </Box>\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,4BAA4B,EAC1C,UACA,YACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,EACJ,gBACA,WACA,iBACA,uBACA,UACA,YACE,eAAe,UAAU,SAAS,QAAQ;CAE9C,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAElD,sBAAsB;EACpB,IAAI,UAAU,SACZ,gBAAgB,UAAU,QAAQ,YAAY;CAElD,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAsB,cAAc;EACxC,IAAI,CAAC,cACH;EAEF,MAAM,sBAAsB,mBAAmB,KAAK;EAKpD,OAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACe,KAAK,aAAa;CACzC,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,OACE,qBAAC,eAAD;EAAe,gBAAA;EAAf,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAK,IAAI;GAAE;GAC/C,UAAA,oBAAC,aAAD;IACY;IACA;IACV,aAAa,EAAE,oBAAoB;IACnC,MAAK;IACI;GACV,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GACE,KAAK;GACL,OAAO;IAAE,QAAQ;IAAqB,UAAU;GAAO;GAEvD,UAAA,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACpC,aAAA;GACD,CAAA;EACE,CAAA,CACQ;;AAEnB"}

package/dist/esm/components/Chains/SelectChainPageContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainPageContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainPageContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { type JSX, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSearch } from '../../hooks/useChainSearch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { SearchInput } from '../Search/SearchInput.js'\nimport { ChainList } from './ChainList.js'\n\ninterface SelectChainPageContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n}\n\nexport function SelectChainPageContent({\n formType,\n onSelect,\n}: SelectChainPageContentProps): JSX.Element {\n const { t } = useTranslation()\n const inputRef = useRef<HTMLInputElement>(null)\n const headerRef = useRef<HTMLElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n\n const {\n filteredChains,\n isLoading,\n selectedChainId,\n onSelectChainFallback,\n onChange,\n onClear,\n } = useChainSearch(formType, listRef, inputRef)\n\n const { listHeight } = useListHeight({\n listParentRef: listRef,\n headerRef,\n })\n\n return (\n <PageContainer disableGutters>\n <Box ref={headerRef} sx={{ pb: 2, px: 3, pt: 1.5 }}>\n <SearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n size=\"medium\"\n onClear={onClear}\n autoFocus\n />\n </Box>\n <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion={false}\n />\n </Box>\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,uBAAuB,EACrC,UACA,YAC2C;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,EACJ,gBACA,WACA,iBACA,uBACA,UACA,YACE,eAAe,UAAU,SAAS,QAAQ;CAE9C,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,OACE,qBAAC,eAAD;EAAe,gBAAA;~~YAAf~~,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;~~aAC~~/C,oBAAC,aAAD;IACY;IACA;IACV,aAAa,EAAE,oBAAoB;IACnC,MAAK;IACI;IACT,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;~~aAC~~/D,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACpC,aAAa;GACd,CAAA;EACE,CAAA,CACQ;;AAEnB"}
1	+ {"version":3,"file":"SelectChainPageContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainPageContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { type JSX, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSearch } from '../../hooks/useChainSearch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { SearchInput } from '../Search/SearchInput.js'\nimport { ChainList } from './ChainList.js'\n\ninterface SelectChainPageContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n}\n\nexport function SelectChainPageContent({\n formType,\n onSelect,\n}: SelectChainPageContentProps): JSX.Element {\n const { t } = useTranslation()\n const inputRef = useRef<HTMLInputElement>(null)\n const headerRef = useRef<HTMLElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n\n const {\n filteredChains,\n isLoading,\n selectedChainId,\n onSelectChainFallback,\n onChange,\n onClear,\n } = useChainSearch(formType, listRef, inputRef)\n\n const { listHeight } = useListHeight({\n listParentRef: listRef,\n headerRef,\n })\n\n return (\n <PageContainer disableGutters>\n <Box ref={headerRef} sx={{ pb: 2, px: 3, pt: 1.5 }}>\n <SearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n size=\"medium\"\n onClear={onClear}\n autoFocus\n />\n </Box>\n <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion={false}\n />\n </Box>\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,uBAAuB,EACrC,UACA,YAC2C;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,EACJ,gBACA,WACA,iBACA,uBACA,UACA,YACE,eAAe,UAAU,SAAS,QAAQ;CAE9C,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,OACE,qBAAC,eAAD;EAAe,gBAAA;EAAf,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;GAC/C,UAAA,oBAAC,aAAD;IACY;IACA;IACV,aAAa,EAAE,oBAAoB;IACnC,MAAK;IACI;IACT,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC/D,UAAA,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACpC,aAAa;GACd,CAAA;EACE,CAAA,CACQ;;AAEnB"}

package/dist/esm/components/Chains/VirtualizedChainList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n List,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n scrollElementRef: RefObject<HTMLDivElement \| null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n itemsSize: 'small' \| 'medium'\n hasSearchQuery: boolean\n withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n itemsSize,\n scrollElementRef,\n withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n const { t } = useTranslation()\n const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n const hasScrolledRef = useRef(false)\n const [\n pinnedChains,\n setPinnedChain,\n isAllNetworks,\n setIsAllNetworks,\n showAllNetworks,\n ] = useChainOrderStore((state) => [\n state.pinnedChains,\n state.setPinnedChain,\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n state[`${formType}ShowAllNetworks`],\n ])\n const { setFieldValue } = useFieldActions()\n const onPin = useCallback(\n (chainId: number) => {\n setPinnedChain(chainId)\n },\n [setPinnedChain]\n )\n\n const sortedChains = useMemo(() => {\n if (!pinnedChains.length) {\n return chains\n }\n // Pinning logic: move pinned chains to the top of the list\n const pinned = pinnedChains\n .map((id) => chains.find((c) => c.id === id))\n .filter(Boolean) as ExtendedChain[]\n const pinnedIds = new Set(pinned.map((c) => c.id))\n const rest = chains.filter((c) => !pinnedIds.has(c.id))\n return [...pinned, ...rest]\n }, [chains, pinnedChains])\n\n const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n const getItemKey = useCallback(\n (index: number) => {\n if (showAllNetworksOption && index === 0) {\n return 'all-chains'\n }\n const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n return `${sortedChains[chainIndex].id}-${index}`\n },\n [sortedChains, showAllNetworksOption]\n )\n\n const onChainSelect = useCallback(\n (chain: ExtendedChain) => {\n setIsAllNetworks(false, formType)\n onSelect(chain)\n },\n [onSelect, setIsAllNetworks, formType]\n )\n\n const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n useVirtualizer({\n count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n overscan: 3,\n paddingEnd: 0,\n getScrollElement: () => scrollElementRef.current,\n estimateSize: () => {\n return itemsSize === 'small' ? 48 : 60\n },\n getItemKey,\n })\n\n // Using mountOnEnter of the ExpansionTransition component\n // leads to a short delay for setting up scrollElementRef,\n // which in turn leads to getVirtualItems() returning an empty array.\n // Workaround: Re-measure when scroll element becomes available\n useEffect(() => {\n if (scrollElementRef.current) {\n measure()\n }\n }, [measure, scrollElementRef.current])\n\n const scrollToIndex = useCallback(\n (index: number) => {\n requestAnimationFrame(() => {\n const offsetInfo = getOffsetForIndex(index, 'center')\n if (!scrollElementRef.current \|\| !offsetInfo) {\n return\n }\n scrollElementRef.current.scrollTo({\n top: offsetInfo[0],\n left: 0,\n behavior: 'smooth',\n })\n })\n },\n [getOffsetForIndex, scrollElementRef.current]\n )\n\n useEffect(() => {\n // Mark as scrolled if \"All Networks\" is initially selected\n if (isAllNetworks) {\n hasScrolledRef.current = true\n return\n }\n\n // Only scroll if sortedChains is not empty and we haven't scrolled yet\n if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n const selectedChainIndex = sortedChains.findIndex(\n (chain) => chain.id === selectedChainIdRef.current\n )\n if (selectedChainIndex !== -1) {\n // Only scroll if the selected chain is not in the visible range\n // +1 and -1 to account for partially visible items\n if (\n range.startIndex + 1 > selectedChainIndex \|\|\n range.endIndex - 1 < selectedChainIndex\n ) {\n scrollToIndex(selectedChainIndex)\n }\n }\n hasScrolledRef.current = true // Mark as scrolled (when needed)\n }\n }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n return (\n <List\n className=\"long-list\"\n style={{ height: getTotalSize() }}\n disablePadding\n >\n {getVirtualItems().map((item) => {\n if (showAllNetworksOption && item.index === 0) {\n return (\n <ListItem\n key={item.key}\n style={{\n height: `${itemsSize}px`,\n transform: `translateY(${item.start}px)`,\n padding: 0,\n }}\n >\n <ListItemButton\n onClick={selectAllNetworks}\n selected={isAllNetworks}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <AllChainsAvatar chains={chains} size={itemsSize} />\n </ListItemAvatar>\n <ListItemText\n primary={t('main.allNetworks')}\n size={itemsSize}\n />\n </ListItemButton>\n </ListItem>\n )\n }\n\n const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n return (\n <ChainListItem\n key={item.key}\n chain={chain}\n onSelect={onChainSelect}\n selected={!isAllNetworks && chain.id === selectedChainId}\n itemsSize={itemsSize}\n size={item.size}\n start={item.start}\n withPin={withPinnedChains}\n isPinned={pinnedChains.includes(chain.id)}\n onPin={onPin}\n />\n )\n })}\n </List>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n List,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n scrollElementRef: RefObject<HTMLDivElement \| null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n itemsSize: 'small' \| 'medium'\n hasSearchQuery: boolean\n withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n itemsSize,\n scrollElementRef,\n withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n const { t } = useTranslation()\n const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n const hasScrolledRef = useRef(false)\n const [\n pinnedChains,\n setPinnedChain,\n isAllNetworks,\n setIsAllNetworks,\n showAllNetworks,\n ] = useChainOrderStore((state) => [\n state.pinnedChains,\n state.setPinnedChain,\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n state[`${formType}ShowAllNetworks`],\n ])\n const { setFieldValue } = useFieldActions()\n const onPin = useCallback(\n (chainId: number) => {\n setPinnedChain(chainId)\n },\n [setPinnedChain]\n )\n\n const sortedChains = useMemo(() => {\n if (!pinnedChains.length) {\n return chains\n }\n // Pinning logic: move pinned chains to the top of the list\n const pinned = pinnedChains\n .map((id) => chains.find((c) => c.id === id))\n .filter(Boolean) as ExtendedChain[]\n const pinnedIds = new Set(pinned.map((c) => c.id))\n const rest = chains.filter((c) => !pinnedIds.has(c.id))\n return [...pinned, ...rest]\n }, [chains, pinnedChains])\n\n const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n const getItemKey = useCallback(\n (index: number) => {\n if (showAllNetworksOption && index === 0) {\n return 'all-chains'\n }\n const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n return `${sortedChains[chainIndex].id}-${index}`\n },\n [sortedChains, showAllNetworksOption]\n )\n\n const onChainSelect = useCallback(\n (chain: ExtendedChain) => {\n setIsAllNetworks(false, formType)\n onSelect(chain)\n },\n [onSelect, setIsAllNetworks, formType]\n )\n\n const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n useVirtualizer({\n count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n overscan: 3,\n paddingEnd: 0,\n getScrollElement: () => scrollElementRef.current,\n estimateSize: () => {\n return itemsSize === 'small' ? 48 : 60\n },\n getItemKey,\n })\n\n // Using mountOnEnter of the ExpansionTransition component\n // leads to a short delay for setting up scrollElementRef,\n // which in turn leads to getVirtualItems() returning an empty array.\n // Workaround: Re-measure when scroll element becomes available\n useEffect(() => {\n if (scrollElementRef.current) {\n measure()\n }\n }, [measure, scrollElementRef.current])\n\n const scrollToIndex = useCallback(\n (index: number) => {\n requestAnimationFrame(() => {\n const offsetInfo = getOffsetForIndex(index, 'center')\n if (!scrollElementRef.current \|\| !offsetInfo) {\n return\n }\n scrollElementRef.current.scrollTo({\n top: offsetInfo[0],\n left: 0,\n behavior: 'smooth',\n })\n })\n },\n [getOffsetForIndex, scrollElementRef.current]\n )\n\n useEffect(() => {\n // Mark as scrolled if \"All Networks\" is initially selected\n if (isAllNetworks) {\n hasScrolledRef.current = true\n return\n }\n\n // Only scroll if sortedChains is not empty and we haven't scrolled yet\n if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n const selectedChainIndex = sortedChains.findIndex(\n (chain) => chain.id === selectedChainIdRef.current\n )\n if (selectedChainIndex !== -1) {\n // Only scroll if the selected chain is not in the visible range\n // +1 and -1 to account for partially visible items\n if (\n range.startIndex + 1 > selectedChainIndex \|\|\n range.endIndex - 1 < selectedChainIndex\n ) {\n scrollToIndex(selectedChainIndex)\n }\n }\n hasScrolledRef.current = true // Mark as scrolled (when needed)\n }\n }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n return (\n <List\n className=\"long-list\"\n style={{ height: getTotalSize() }}\n disablePadding\n >\n {getVirtualItems().map((item) => {\n if (showAllNetworksOption && item.index === 0) {\n return (\n <ListItem\n key={item.key}\n style={{\n height: `${itemsSize}px`,\n transform: `translateY(${item.start}px)`,\n padding: 0,\n }}\n >\n <ListItemButton\n onClick={selectAllNetworks}\n selected={isAllNetworks}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <AllChainsAvatar chains={chains} size={itemsSize} />\n </ListItemAvatar>\n <ListItemText\n primary={t('main.allNetworks')}\n size={itemsSize}\n />\n </ListItemButton>\n </ListItem>\n )\n }\n\n const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n return (\n <ChainListItem\n key={item.key}\n chain={chain}\n onSelect={onChainSelect}\n selected={!isAllNetworks && chain.id === selectedChainId}\n itemsSize={itemsSize}\n size={item.size}\n start={item.start}\n withPin={withPinnedChains}\n isPinned={pinnedChains.includes(chain.id)}\n onPin={onPin}\n />\n )\n })}\n </List>\n )\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.js","names":["Menu"],"sources":["../../../src/components/ContextMenu.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert'\nimport type { SxProps, Theme } from '@mui/material'\nimport { MenuItem } from '@mui/material'\nimport { type JSX, useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContextMenuButton } from './ContextMenu.style.js'\nimport { Menu } from './Menu.js'\n\nexport interface ContextMenuItemConfig {\n icon: React.ReactNode\n label: string\n onClick: () => void\n}\n\ninterface ContextMenuProps {\n items: ContextMenuItemConfig[]\n disabled?: boolean\n buttonSx?: SxProps<Theme>\n}\n\nexport const ContextMenu = ({\n items,\n disabled,\n buttonSx,\n}: ContextMenuProps): JSX.Element => {\n const { t } = useTranslation()\n const menuId = useId()\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)\n const open = Boolean(anchorEl)\n\n const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(e.currentTarget)\n }\n\n const closeMenu = () => {\n setAnchorEl(null)\n }\n\n const handleItemClick = (onClick: () => void) => () => {\n onClick()\n closeMenu()\n }\n\n return (\n <>\n <ContextMenuButton\n aria-label={t('button.options')}\n aria-controls={open ? menuId : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleOpen}\n sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}\n disableRipple\n >\n <MoreVertIcon fontSize=\"small\" />\n </ContextMenuButton>\n <Menu\n id={menuId}\n elevation={0}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n anchorEl={anchorEl}\n open={open}\n onClose={closeMenu}\n >\n {items.map((item) => (\n <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>\n {item.icon}\n {item.label}\n </MenuItem>\n ))}\n </Menu>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,eAAe,EAC1B,OACA,UACA,eACmC;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,MAA2C;EAC7D,YAAY,EAAE,aAAa;CAC7B;CAEA,MAAM,kBAAkB;EACtB,YAAY,IAAI;CAClB;CAEA,MAAM,mBAAmB,kBAA8B;EACrD,QAAQ;EACR,UAAU;CACZ;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAY,EAAE,gBAAgB;EAC9B,iBAAe,OAAO,SAAS,KAAA;EAC/B,iBAAc;EACd,iBAAe,OAAO,SAAS,KAAA;EAC/B,SAAS;EACT,IAAI;GAAE,SAAS,WAAW,KAAM;GAAG,GAAG;EAAS;EAC/C,eAAA;~~YAEA~~,oBAAC,cAAD,EAAc,UAAS,QAAS,CAAA;CACf,CAAA,GACnB,oBAACA,QAAD;EACE,IAAI;EACJ,WAAW;EACX,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,iBAAiB;GAAE,UAAU;GAAO,YAAY;EAAQ;EAC9C;EACJ;EACN,SAAS;~~YAER~~,MAAM,KAAK,SACV,qBAAC,UAAD;GAA2B,SAAS,gBAAgB,KAAK,OAAO;~~aAAhE~~,CACG,KAAK,MACL,KAAK,KACE;~~KAHK~~,KAAK,KAGV,CACX;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"ContextMenu.js","names":["Menu"],"sources":["../../../src/components/ContextMenu.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert'\nimport type { SxProps, Theme } from '@mui/material'\nimport { MenuItem } from '@mui/material'\nimport { type JSX, useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContextMenuButton } from './ContextMenu.style.js'\nimport { Menu } from './Menu.js'\n\nexport interface ContextMenuItemConfig {\n icon: React.ReactNode\n label: string\n onClick: () => void\n}\n\ninterface ContextMenuProps {\n items: ContextMenuItemConfig[]\n disabled?: boolean\n buttonSx?: SxProps<Theme>\n}\n\nexport const ContextMenu = ({\n items,\n disabled,\n buttonSx,\n}: ContextMenuProps): JSX.Element => {\n const { t } = useTranslation()\n const menuId = useId()\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)\n const open = Boolean(anchorEl)\n\n const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(e.currentTarget)\n }\n\n const closeMenu = () => {\n setAnchorEl(null)\n }\n\n const handleItemClick = (onClick: () => void) => () => {\n onClick()\n closeMenu()\n }\n\n return (\n <>\n <ContextMenuButton\n aria-label={t('button.options')}\n aria-controls={open ? menuId : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleOpen}\n sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}\n disableRipple\n >\n <MoreVertIcon fontSize=\"small\" />\n </ContextMenuButton>\n <Menu\n id={menuId}\n elevation={0}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n anchorEl={anchorEl}\n open={open}\n onClose={closeMenu}\n >\n {items.map((item) => (\n <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>\n {item.icon}\n {item.label}\n </MenuItem>\n ))}\n </Menu>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,eAAe,EAC1B,OACA,UACA,eACmC;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,MAA2C;EAC7D,YAAY,EAAE,aAAa;CAC7B;CAEA,MAAM,kBAAkB;EACtB,YAAY,IAAI;CAClB;CAEA,MAAM,mBAAmB,kBAA8B;EACrD,QAAQ;EACR,UAAU;CACZ;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAY,EAAE,gBAAgB;EAC9B,iBAAe,OAAO,SAAS,KAAA;EAC/B,iBAAc;EACd,iBAAe,OAAO,SAAS,KAAA;EAC/B,SAAS;EACT,IAAI;GAAE,SAAS,WAAW,KAAM;GAAG,GAAG;EAAS;EAC/C,eAAA;EAEA,UAAA,oBAAC,cAAD,EAAc,UAAS,QAAS,CAAA;CACf,CAAA,GACnB,oBAACA,QAAD;EACE,IAAI;EACJ,WAAW;EACX,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,iBAAiB;GAAE,UAAU;GAAO,YAAY;EAAQ;EAC9C;EACJ;EACN,SAAS;EAER,UAAA,MAAM,KAAK,SACV,qBAAC,UAAD;GAA2B,SAAS,gBAAgB,KAAK,OAAO;GAAhE,UAAA,CACG,KAAK,MACL,KAAK,KACE;EAHK,GAAA,KAAK,KAGV,CACX;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}

package/dist/esm/components/ContractComponent/NFT/NFTBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n}) => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n p: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n }}\n >\n {isLoading ? (\n <Skeleton\n width={96}\n height={96}\n variant=\"rectangular\"\n sx={{ borderRadius: 1 }}\n />\n ) : (\n <PreviewAvatar src={imageUrl} />\n )}\n <Box\n sx={{\n ml: 2,\n }}\n >\n {isLoading ? (\n <Skeleton width={144} height={21} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {collectionName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={112} height={27} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n }}\n >\n {assetName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={128} height={21} variant=\"text\" />\n ) : owner ? (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {t('main.ownedBy')}{' '}\n <Link\n href={owner.url}\n target=\"_blank\"\n underline=\"none\"\n color=\"primary\"\n >\n {owner.name}\n </Link>\n </Typography>\n ) : null}\n </Box>\n </Box>\n <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />\n </Box>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,EACL;~~YAHF~~,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,OACX;~~aAHF~~,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,EAAE;GACvB,CAAA,IAED,oBAAC,eAAD,EAAe,KAAK,SAAW,CAAA,GAEjC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,EACN;~~cAHF~~;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;KAAQ,CAAA,IAElD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;MACT;~~gBAEC~~;KACS,CAAA;KAEb,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;KAAQ,CAAA,IAElD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;MACd;~~gBAEC~~;KACS,CAAA;KAEb,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;KAAQ,CAAA,IAChD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;MACT;~~gBAJF~~;OAMG,EAAE,cAAc;OAAG;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;~~kBAEL~~,MAAM;OACH,CAAA;MACI;~~UACV~~;IACD;~~KACF~~;~~MACL~~,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI,EAAE,IAAI,EAAE;EAAI,CAAA,CACxD;;AAET"}
1	+ {"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n}) => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n p: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n }}\n >\n {isLoading ? (\n <Skeleton\n width={96}\n height={96}\n variant=\"rectangular\"\n sx={{ borderRadius: 1 }}\n />\n ) : (\n <PreviewAvatar src={imageUrl} />\n )}\n <Box\n sx={{\n ml: 2,\n }}\n >\n {isLoading ? (\n <Skeleton width={144} height={21} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {collectionName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={112} height={27} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n }}\n >\n {assetName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={128} height={21} variant=\"text\" />\n ) : owner ? (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {t('main.ownedBy')}{' '}\n <Link\n href={owner.url}\n target=\"_blank\"\n underline=\"none\"\n color=\"primary\"\n >\n {owner.name}\n </Link>\n </Typography>\n ) : null}\n </Box>\n </Box>\n <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />\n </Box>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,EACL;EAHF,UAAA,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,OACX;GAHF,UAAA,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,EAAE;GACvB,CAAA,IAED,oBAAC,eAAD,EAAe,KAAK,SAAW,CAAA,GAEjC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,EACN;IAHF,UAAA;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;KAAQ,CAAA,IAElD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;MACT;MAEC,UAAA;KACS,CAAA;KAEb,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;KAAQ,CAAA,IAElD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;MACd;MAEC,UAAA;KACS,CAAA;KAEb,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;KAAQ,CAAA,IAChD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;MACT;MAJF,UAAA;OAMG,EAAE,cAAc;OAAG;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;QAEL,UAAA,MAAM;OACH,CAAA;MACI;KACV,CAAA,IAAA;IACD;GACF,CAAA,CAAA;EACL,CAAA,GAAA,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI,EAAE,IAAI,EAAE;EAAI,CAAA,CACxD;;AAET"}

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

@@ -21,8 +21,9 @@ const slotProps = {
 	} }
 };
 const Dialog$1 = ({ children, open, onClose }) => {
+	const getContainer = useGetScrollableContainer();
 	return /* @__PURE__ */ jsx(Dialog, {
-		container: useGetScrollableContainer(),
+		container: getContainer,
 		open,
 		onClose,
 		sx: modalProps.sx,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","names":["Dialog","MuiDialog"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import type { DialogProps, Theme } from '@mui/material'\nimport { Dialog as MuiDialog } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\n\nexport const modalProps: { sx: { position: string; overflow: string } } = {\n sx: {\n position: 'absolute',\n overflow: 'hidden',\n },\n}\n\nexport const slotProps: DialogProps['slotProps'] = {\n paper: {\n sx: (theme: Theme) => ({\n position: 'absolute',\n backgroundImage: 'none',\n backgroundColor: theme.vars.palette.background.default,\n borderTopLeftRadius: theme.vars.shape.borderRadius,\n borderTopRightRadius: theme.vars.shape.borderRadius,\n }),\n },\n backdrop: {\n sx: {\n position: 'absolute',\n backgroundColor: 'rgb(0 0 0 / 32%)',\n backdropFilter: 'blur(3px)',\n },\n },\n}\n\nexport const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({\n children,\n open,\n onClose,\n}) => {\n const getContainer = useGetScrollableContainer()\n return (\n <MuiDialog\n container={getContainer}\n open={open}\n onClose={onClose}\n sx={modalProps.sx}\n slotProps={slotProps}\n >\n {children}\n </MuiDialog>\n )\n}\n"],"mappings":";;;;AAKA,MAAa,aAA6D,EACxE,IAAI;CACF,UAAU;CACV,UAAU;AACZ,EACF;AAEA,MAAa,YAAsC;CACjD,OAAO,EACL,KAAK,WAAkB;EACrB,UAAU;EACV,iBAAiB;EACjB,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,qBAAqB,MAAM,KAAK,MAAM;EACtC,sBAAsB,MAAM,KAAK,MAAM;CACzC,GACF;CACA,UAAU,EACR,IAAI;EACF,UAAU;EACV,iBAAiB;EACjB,gBAAgB;CAClB,EACF;AACF;AAEA,MAAaA,YAAoD,EAC/D,UACA,MACA,cACI;~~CAEJ~~,OACE,oBAACC,QAAD;EACE,~~WAHiB,0BAGK~~;~~EAChB~~;EACG;EACT,IAAI,WAAW;EACJ;EAEV;CACQ,CAAA;AAEf"}
1	+ {"version":3,"file":"Dialog.js","names":["Dialog","MuiDialog"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import type { DialogProps, Theme } from '@mui/material'\nimport { Dialog as MuiDialog } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\n\nexport const modalProps: { sx: { position: string; overflow: string } } = {\n sx: {\n position: 'absolute',\n overflow: 'hidden',\n },\n}\n\nexport const slotProps: DialogProps['slotProps'] = {\n paper: {\n sx: (theme: Theme) => ({\n position: 'absolute',\n backgroundImage: 'none',\n backgroundColor: theme.vars.palette.background.default,\n borderTopLeftRadius: theme.vars.shape.borderRadius,\n borderTopRightRadius: theme.vars.shape.borderRadius,\n }),\n },\n backdrop: {\n sx: {\n position: 'absolute',\n backgroundColor: 'rgb(0 0 0 / 32%)',\n backdropFilter: 'blur(3px)',\n },\n },\n}\n\nexport const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({\n children,\n open,\n onClose,\n}) => {\n const getContainer = useGetScrollableContainer()\n return (\n <MuiDialog\n container={getContainer}\n open={open}\n onClose={onClose}\n sx={modalProps.sx}\n slotProps={slotProps}\n >\n {children}\n </MuiDialog>\n )\n}\n"],"mappings":";;;;AAKA,MAAa,aAA6D,EACxE,IAAI;CACF,UAAU;CACV,UAAU;AACZ,EACF;AAEA,MAAa,YAAsC;CACjD,OAAO,EACL,KAAK,WAAkB;EACrB,UAAU;EACV,iBAAiB;EACjB,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,qBAAqB,MAAM,KAAK,MAAM;EACtC,sBAAsB,MAAM,KAAK,MAAM;CACzC,GACF;CACA,UAAU,EACR,IAAI;EACF,UAAU;EACV,iBAAiB;EACjB,gBAAgB;CAClB,EACF;AACF;AAEA,MAAaA,YAAoD,EAC/D,UACA,MACA,cACI;CACJ,MAAM,eAAe,0BAA0B;CAC/C,OACE,oBAACC,QAAD;EACE,WAAW;EACL;EACG;EACT,IAAI,WAAW;EACJ;EAEV;CACQ,CAAA;AAEf"}

package/dist/esm/components/ExecutionStatusCard/ExecutionChecklist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExecutionChecklist.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionChecklist.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { ExecutionRow } from '../StepActions/executionRows.js'\nimport { renderExecutionRow } from '../StepActions/executionRows.js'\n\nconst ROW_STAGGER = 0.06\n\nconst rowTransition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] as const }\nconst rowExitTransition = {\n duration: 0.2,\n ease: [0.215, 0.61, 0.355, 1] as const,\n}\n\ninterface ExecutionChecklistProps {\n rows: ExecutionRow[]\n}\n\nexport function ExecutionChecklist({\n rows,\n}: ExecutionChecklistProps): JSX.Element \| null {\n if (rows.length === 0) {\n return null\n }\n\n const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n return (\n <AnimatePresence mode=\"popLayout\">\n {rows.map((row, index) => (\n <m.div\n key={\n row.kind === 'action'\n ? `${row.step.id}-${row.action.type}-${index}`\n : `wallet-${row.toChainId}`\n }\n layout\n initial={{ opacity: 0, y: 14, scaleX: 0.8 }}\n animate={{ opacity: 1, y: 0, scaleX: 1 }}\n transition={{\n ...rowTransition,\n delay: index * ROW_STAGGER,\n layout: rowTransition,\n }}\n exit={{\n opacity: 0,\n y: 10,\n scaleX: 0.9,\n transition: rowExitTransition,\n }}\n style={{ transformOrigin: 'center bottom' }}\n >\n <Box sx={{ paddingTop: 1.5 }}>\n {renderExecutionRow(row, index === lastActionIndex)}\n </Box>\n </m.div>\n ))}\n </AnimatePresence>\n )\n}\n"],"mappings":";;;;;;AAOA,MAAM,cAAc;AAEpB,MAAM,gBAAgB;CAAE,UAAU;CAAK,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AACzE,MAAM,oBAAoB;CACxB,UAAU;CACV,MAAM;EAAC;EAAO;EAAM;EAAO;CAAC;AAC9B;AAMA,SAAgB,mBAAmB,EACjC,QAC8C;CAC9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,iBAAD;EAAiB,MAAK;~~YACnB~~,KAAK,KAAK,KAAK,UACd,oBAAC,EAAE,KAAH;GAME,QAAA;GACA,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,QAAQ;GAAI;GAC1C,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,QAAQ;GAAE;GACvC,YAAY;IACV,GAAG;IACH,OAAO,QAAQ;IACf,QAAQ;GACV;GACA,MAAM;IACJ,SAAS;IACT,GAAG;IACH,QAAQ;IACR,YAAY;GACd;GACA,OAAO,EAAE,iBAAiB,gBAAgB;~~aAE1C~~,oBAAC,KAAD;IAAK,IAAI,EAAE,YAAY,IAAI;~~cACxB~~,mBAAmB,KAAK,UAAU,eAAe;GAC/C,CAAA;EACA,GAvBH,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAqBf,CACR;CACc,CAAA;AAErB"}
1	+ {"version":3,"file":"ExecutionChecklist.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionChecklist.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { ExecutionRow } from '../StepActions/executionRows.js'\nimport { renderExecutionRow } from '../StepActions/executionRows.js'\n\nconst ROW_STAGGER = 0.06\n\nconst rowTransition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] as const }\nconst rowExitTransition = {\n duration: 0.2,\n ease: [0.215, 0.61, 0.355, 1] as const,\n}\n\ninterface ExecutionChecklistProps {\n rows: ExecutionRow[]\n}\n\nexport function ExecutionChecklist({\n rows,\n}: ExecutionChecklistProps): JSX.Element \| null {\n if (rows.length === 0) {\n return null\n }\n\n const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n return (\n <AnimatePresence mode=\"popLayout\">\n {rows.map((row, index) => (\n <m.div\n key={\n row.kind === 'action'\n ? `${row.step.id}-${row.action.type}-${index}`\n : `wallet-${row.toChainId}`\n }\n layout\n initial={{ opacity: 0, y: 14, scaleX: 0.8 }}\n animate={{ opacity: 1, y: 0, scaleX: 1 }}\n transition={{\n ...rowTransition,\n delay: index * ROW_STAGGER,\n layout: rowTransition,\n }}\n exit={{\n opacity: 0,\n y: 10,\n scaleX: 0.9,\n transition: rowExitTransition,\n }}\n style={{ transformOrigin: 'center bottom' }}\n >\n <Box sx={{ paddingTop: 1.5 }}>\n {renderExecutionRow(row, index === lastActionIndex)}\n </Box>\n </m.div>\n ))}\n </AnimatePresence>\n )\n}\n"],"mappings":";;;;;;AAOA,MAAM,cAAc;AAEpB,MAAM,gBAAgB;CAAE,UAAU;CAAK,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AACzE,MAAM,oBAAoB;CACxB,UAAU;CACV,MAAM;EAAC;EAAO;EAAM;EAAO;CAAC;AAC9B;AAMA,SAAgB,mBAAmB,EACjC,QAC8C;CAC9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,iBAAD;EAAiB,MAAK;EACnB,UAAA,KAAK,KAAK,KAAK,UACd,oBAAC,EAAE,KAAH;GAME,QAAA;GACA,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,QAAQ;GAAI;GAC1C,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,QAAQ;GAAE;GACvC,YAAY;IACV,GAAG;IACH,OAAO,QAAQ;IACf,QAAQ;GACV;GACA,MAAM;IACJ,SAAS;IACT,GAAG;IACH,QAAQ;IACR,YAAY;GACd;GACA,OAAO,EAAE,iBAAiB,gBAAgB;GAE1C,UAAA,oBAAC,KAAD;IAAK,IAAI,EAAE,YAAY,IAAI;IACxB,UAAA,mBAAmB,KAAK,UAAU,eAAe;GAC/C,CAAA;EACA,GAvBH,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAqBf,CACR;CACc,CAAA;AAErB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExecutionStatusCard.js","names":["Card"],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionStatusCard.tsx"],"sourcesContent":["import { Box, Typography } from '@mui/material'\nimport { stagger } from 'motion'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX, ReactNode } from 'react'\nimport { Card } from '../Card/Card.js'\nimport type { ExecutionRow } from '../StepActions/executionRows.js'\nimport { ExecutionChecklist } from './ExecutionChecklist.js'\nimport { StaggeredRevealTypography } from './StaggeredRevealTypography.js'\n\ninterface ExecutionStatusCardProps {\n /** Title for the current phase. `undefined` until an action has a message. /\n title: string \| undefined\n /* Subtitle under the title. `undefined` when the action has no description. /\n description: string \| undefined\n /* Completed step rows for the animated checklist. /\n rows: ExecutionRow[]\n /* The top icon: a `StatusIcon`, or a contract component for the custom variant. /\n iconSlot: ReactNode\n /* Footer card: `ExecutionDoneCard` when done, otherwise `RouteTokens`. /\n footerSlot: ReactNode\n /* Partner/VC component, shown after the icon/title when done. /\n vcSlot?: ReactNode\n}\n\nconst containerVariants: Variants = {\n hidden: { opacity: 0, scale: 0.97 },\n visible: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: 0.3,\n ease: [0.22, 1, 0.36, 1],\n delayChildren: stagger(0.06),\n },\n },\n}\n\nconst heroColumnVariants: Variants = {\n hidden: {},\n visible: { transition: { delayChildren: stagger(0.04) } },\n}\n\nconst heroItemVariants: Variants = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n },\n}\n\nconst titleVariants: Variants = {\n hidden: { opacity: 0, y: 10, filter: 'blur(2px)' },\n visible: {\n opacity: 1,\n y: 0,\n filter: 'blur(0px)',\n transition: { duration: 0.3, ease: [0.19, 1, 0.22, 1] },\n },\n exit: {\n opacity: 0,\n y: -10,\n filter: 'blur(2px)',\n transition: { duration: 0.05, ease: [0.19, 1, 0.22, 1] },\n },\n}\n\n/* No enter animation — the per-word stagger reveals it. Exit timing matches the title. /\nconst textContainerVariants: Variants = {\n hidden: {\n opacity: 0,\n transition: { duration: 0.05, ease: [0.215, 0.61, 0.355, 1] },\n },\n visible: { opacity: 1, transition: { duration: 0 } },\n}\n\n/\n Animate height explicitly. A plain `layout` animation sets `height: auto`\n * immediately, so the card background would jump to full height before the\n * content appears. `layout` stays only to animate the checklist's position\n * when the hero column above it resizes.\n /\nconst checklistVariants: Variants = {\n hidden: {\n height: 0,\n opacity: 0,\n transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n },\n visible: {\n height: 'auto',\n opacity: 1,\n transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n },\n}\n\nconst layoutTransition: Transition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] }\n\nconst WORD_STAGGER_DELAY = 0.08\n\nexport function ExecutionStatusCard({\n title,\n description,\n rows,\n iconSlot,\n footerSlot,\n vcSlot,\n}: ExecutionStatusCardProps): JSX.Element {\n const hasRows = rows.length > 0\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n {/\n * Keep Card non-animated. Animating its layout would combine with the\n * rows' layout animations and make the rows jump. Its height follows\n * the checklist through normal layout instead.\n /}\n <Card type=\"default\" indented>\n <m.div\n variants={containerVariants}\n initial=\"hidden\"\n animate=\"visible\"\n style={{ width: '100%', transformOrigin: 'top center' }}\n >\n <Box\n component={m.div}\n layout\n transition={{ layout: layoutTransition }}\n variants={heroColumnVariants}\n sx={{\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n textAlign: 'center',\n boxSizing: 'border-box',\n }}\n >\n <m.div\n layout\n variants={heroItemVariants}\n style={{\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n {iconSlot}\n </m.div>\n\n {title && (\n <m.div\n layout\n variants={heroItemVariants}\n style={{ width: '100%', paddingTop: 12 }}\n >\n <AnimatePresence initial={false} mode=\"wait\">\n <m.div\n key={title}\n variants={titleVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"exit\"\n style={{ width: '100%' }}\n >\n <Typography\n sx={{\n fontSize: 16,\n fontWeight: 600,\n lineHeight: 1.4,\n textAlign: 'center',\n }}\n >\n {title}\n </Typography>\n </m.div>\n </AnimatePresence>\n </m.div>\n )}\n\n {/ mode=\"popLayout\": old description leaves layout at once so the column reflows /}\n <AnimatePresence initial={false} mode=\"popLayout\">\n {description && (\n <m.div\n key={description}\n variants={textContainerVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"hidden\"\n style={{ width: '100%', paddingTop: 4 }}\n >\n <StaggeredRevealTypography\n text={description}\n delay={WORD_STAGGER_DELAY}\n sx={{\n fontSize: 14,\n fontWeight: 500,\n color: 'text.secondary',\n textAlign: 'center',\n }}\n />\n </m.div>\n )}\n </AnimatePresence>\n\n {vcSlot && (\n <m.div\n layout\n variants={heroItemVariants}\n style={{ width: '100%' }}\n >\n {vcSlot}\n </m.div>\n )}\n </Box>\n\n <AnimatePresence initial={false}>\n {hasRows && (\n <m.div\n key=\"checklist\"\n layout\n transition={{ layout: layoutTransition }}\n variants={checklistVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"hidden\"\n style={{ width: '100%' }}\n >\n <ExecutionChecklist rows={rows} />\n </m.div>\n )}\n </AnimatePresence>\n </m.div>\n </Card>\n\n {/ layout makes the footer shift smoothly when the card above grows */}\n <m.div layout transition={{ layout: layoutTransition }}>\n {footerSlot}\n </m.div>\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"ExecutionStatusCard.js","names":["Card"],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionStatusCard.tsx"],"sourcesContent":["import { Box, Typography } from '@mui/material'\nimport { stagger } from 'motion'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX, ReactNode } from 'react'\nimport { Card } from '../Card/Card.js'\nimport type { ExecutionRow } from '../StepActions/executionRows.js'\nimport { ExecutionChecklist } from './ExecutionChecklist.js'\nimport { StaggeredRevealTypography } from './StaggeredRevealTypography.js'\n\ninterface ExecutionStatusCardProps {\n /** Title for the current phase. `undefined` until an action has a message. /\n title: string \| undefined\n /* Subtitle under the title. `undefined` when the action has no description. /\n description: string \| undefined\n /* Completed step rows for the animated checklist. /\n rows: ExecutionRow[]\n /* The top icon: a `StatusIcon`, or a contract component for the custom variant. /\n iconSlot: ReactNode\n /* Footer card: `ExecutionDoneCard` when done, otherwise `RouteTokens`. /\n footerSlot: ReactNode\n /* Partner/VC component, shown after the icon/title when done. /\n vcSlot?: ReactNode\n}\n\nconst containerVariants: Variants = {\n hidden: { opacity: 0, scale: 0.97 },\n visible: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: 0.3,\n ease: [0.22, 1, 0.36, 1],\n delayChildren: stagger(0.06),\n },\n },\n}\n\nconst heroColumnVariants: Variants = {\n hidden: {},\n visible: { transition: { delayChildren: stagger(0.04) } },\n}\n\nconst heroItemVariants: Variants = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n },\n}\n\nconst titleVariants: Variants = {\n hidden: { opacity: 0, y: 10, filter: 'blur(2px)' },\n visible: {\n opacity: 1,\n y: 0,\n filter: 'blur(0px)',\n transition: { duration: 0.3, ease: [0.19, 1, 0.22, 1] },\n },\n exit: {\n opacity: 0,\n y: -10,\n filter: 'blur(2px)',\n transition: { duration: 0.05, ease: [0.19, 1, 0.22, 1] },\n },\n}\n\n/* No enter animation — the per-word stagger reveals it. Exit timing matches the title. /\nconst textContainerVariants: Variants = {\n hidden: {\n opacity: 0,\n transition: { duration: 0.05, ease: [0.215, 0.61, 0.355, 1] },\n },\n visible: { opacity: 1, transition: { duration: 0 } },\n}\n\n/\n Animate height explicitly. A plain `layout` animation sets `height: auto`\n * immediately, so the card background would jump to full height before the\n * content appears. `layout` stays only to animate the checklist's position\n * when the hero column above it resizes.\n /\nconst checklistVariants: Variants = {\n hidden: {\n height: 0,\n opacity: 0,\n transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n },\n visible: {\n height: 'auto',\n opacity: 1,\n transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n },\n}\n\nconst layoutTransition: Transition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] }\n\nconst WORD_STAGGER_DELAY = 0.08\n\nexport function ExecutionStatusCard({\n title,\n description,\n rows,\n iconSlot,\n footerSlot,\n vcSlot,\n}: ExecutionStatusCardProps): JSX.Element {\n const hasRows = rows.length > 0\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n {/\n * Keep Card non-animated. Animating its layout would combine with the\n * rows' layout animations and make the rows jump. Its height follows\n * the checklist through normal layout instead.\n /}\n <Card type=\"default\" indented>\n <m.div\n variants={containerVariants}\n initial=\"hidden\"\n animate=\"visible\"\n style={{ width: '100%', transformOrigin: 'top center' }}\n >\n <Box\n component={m.div}\n layout\n transition={{ layout: layoutTransition }}\n variants={heroColumnVariants}\n sx={{\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n textAlign: 'center',\n boxSizing: 'border-box',\n }}\n >\n <m.div\n layout\n variants={heroItemVariants}\n style={{\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n {iconSlot}\n </m.div>\n\n {title && (\n <m.div\n layout\n variants={heroItemVariants}\n style={{ width: '100%', paddingTop: 12 }}\n >\n <AnimatePresence initial={false} mode=\"wait\">\n <m.div\n key={title}\n variants={titleVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"exit\"\n style={{ width: '100%' }}\n >\n <Typography\n sx={{\n fontSize: 16,\n fontWeight: 600,\n lineHeight: 1.4,\n textAlign: 'center',\n }}\n >\n {title}\n </Typography>\n </m.div>\n </AnimatePresence>\n </m.div>\n )}\n\n {/ mode=\"popLayout\": old description leaves layout at once so the column reflows /}\n <AnimatePresence initial={false} mode=\"popLayout\">\n {description && (\n <m.div\n key={description}\n variants={textContainerVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"hidden\"\n style={{ width: '100%', paddingTop: 4 }}\n >\n <StaggeredRevealTypography\n text={description}\n delay={WORD_STAGGER_DELAY}\n sx={{\n fontSize: 14,\n fontWeight: 500,\n color: 'text.secondary',\n textAlign: 'center',\n }}\n />\n </m.div>\n )}\n </AnimatePresence>\n\n {vcSlot && (\n <m.div\n layout\n variants={heroItemVariants}\n style={{ width: '100%' }}\n >\n {vcSlot}\n </m.div>\n )}\n </Box>\n\n <AnimatePresence initial={false}>\n {hasRows && (\n <m.div\n key=\"checklist\"\n layout\n transition={{ layout: layoutTransition }}\n variants={checklistVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"hidden\"\n style={{ width: '100%' }}\n >\n <ExecutionChecklist rows={rows} />\n </m.div>\n )}\n </AnimatePresence>\n </m.div>\n </Card>\n\n {/ layout makes the footer shift smoothly when the card above grows */}\n <m.div layout transition={{ layout: layoutTransition }}>\n {footerSlot}\n </m.div>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;AA0BA,MAAM,oBAA8B;CAClC,QAAQ;EAAE,SAAS;EAAG,OAAO;CAAK;CAClC,SAAS;EACP,SAAS;EACT,OAAO;EACP,YAAY;GACV,UAAU;GACV,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;GACvB,eAAe,QAAQ,GAAI;EAC7B;CACF;AACF;AAEA,MAAM,qBAA+B;CACnC,QAAQ,CAAC;CACT,SAAS,EAAE,YAAY,EAAE,eAAe,QAAQ,GAAI,EAAE,EAAE;AAC1D;AAEA,MAAM,mBAA6B;CACjC,QAAQ,EAAE,SAAS,EAAE;CACrB,SAAS;EACP,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;AACF;AAEA,MAAM,gBAA0B;CAC9B,QAAQ;EAAE,SAAS;EAAG,GAAG;EAAI,QAAQ;CAAY;CACjD,SAAS;EACP,SAAS;EACT,GAAG;EACH,QAAQ;EACR,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,MAAM;EACJ,SAAS;EACT,GAAG;EACH,QAAQ;EACR,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;AACF;;AAGA,MAAM,wBAAkC;CACtC,QAAQ;EACN,SAAS;EACT,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAO;IAAM;IAAO;GAAC;EAAE;CAC9D;CACA,SAAS;EAAE,SAAS;EAAG,YAAY,EAAE,UAAU,EAAE;CAAE;AACrD;;;;;;;AAQA,MAAM,oBAA8B;CAClC,QAAQ;EACN,QAAQ;EACR,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,SAAS;EACP,QAAQ;EACR,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;AACF;AAEA,MAAM,mBAA+B;CAAE,UAAU;CAAK,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAE;AAE/E,MAAM,qBAAqB;AAE3B,SAAgB,oBAAoB,EAClC,OACA,aACA,MACA,UACA,YACA,UACwC;CACxC,MAAM,UAAU,KAAK,SAAS;CAE9B,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;EAA5D,UAAA,CAME,oBAACA,QAAD;GAAM,MAAK;GAAU,UAAA;GACnB,UAAA,qBAAC,EAAE,KAAH;IACE,UAAU;IACV,SAAQ;IACR,SAAQ;IACR,OAAO;KAAE,OAAO;KAAQ,iBAAiB;IAAa;IAJxD,UAAA,CAME,qBAAC,KAAD;KACE,WAAW,EAAE;KACb,QAAA;KACA,YAAY,EAAE,QAAQ,iBAAiB;KACvC,UAAU;KACV,IAAI;MACF,OAAO;MACP,SAAS;MACT,eAAe;MACf,YAAY;MACZ,WAAW;MACX,WAAW;KACb;KAZF,UAAA;MAcE,oBAAC,EAAE,KAAH;OACE,QAAA;OACA,UAAU;OACV,OAAO;QACL,OAAO;QACP,SAAS;QACT,gBAAgB;OAClB;OAEC,UAAA;MACI,CAAA;MAEN,SACC,oBAAC,EAAE,KAAH;OACE,QAAA;OACA,UAAU;OACV,OAAO;QAAE,OAAO;QAAQ,YAAY;OAAG;OAEvC,UAAA,oBAAC,iBAAD;QAAiB,SAAS;QAAO,MAAK;QACpC,UAAA,oBAAC,EAAE,KAAH;SAEE,UAAU;SACV,SAAQ;SACR,SAAQ;SACR,MAAK;SACL,OAAO,EAAE,OAAO,OAAO;SAEvB,UAAA,oBAAC,YAAD;UACE,IAAI;WACF,UAAU;WACV,YAAY;WACZ,YAAY;WACZ,WAAW;UACb;UAEC,UAAA;SACS,CAAA;QACP,GAjBA,KAiBA;OACQ,CAAA;MACZ,CAAA;MAIT,oBAAC,iBAAD;OAAiB,SAAS;OAAO,MAAK;OACnC,UAAA,eACC,oBAAC,EAAE,KAAH;QAEE,UAAU;QACV,SAAQ;QACR,SAAQ;QACR,MAAK;QACL,OAAO;SAAE,OAAO;SAAQ,YAAY;QAAE;QAEtC,UAAA,oBAAC,2BAAD;SACE,MAAM;SACN,OAAO;SACP,IAAI;UACF,UAAU;UACV,YAAY;UACZ,OAAO;UACP,WAAW;SACb;QACD,CAAA;OACI,GAjBA,WAiBA;MAEM,CAAA;MAEhB,UACC,oBAAC,EAAE,KAAH;OACE,QAAA;OACA,UAAU;OACV,OAAO,EAAE,OAAO,OAAO;OAEtB,UAAA;MACI,CAAA;KAEN;IAEL,CAAA,GAAA,oBAAC,iBAAD;KAAiB,SAAS;KACvB,UAAA,WACC,oBAAC,EAAE,KAAH;MAEE,QAAA;MACA,YAAY,EAAE,QAAQ,iBAAiB;MACvC,UAAU;MACV,SAAQ;MACR,SAAQ;MACR,MAAK;MACL,OAAO,EAAE,OAAO,OAAO;MAEvB,UAAA,oBAAC,oBAAD,EAA0B,KAAO,CAAA;KAC5B,GAVD,WAUC;IAEM,CAAA,CACZ;;EACH,CAAA,GAGN,oBAAC,EAAE,KAAH;GAAO,QAAA;GAAO,YAAY,EAAE,QAAQ,iBAAiB;GAClD,UAAA;EACI,CAAA,CACJ;;AAET"}

package/dist/esm/components/ExecutionStatusCard/StaggeredRevealTypography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StaggeredRevealTypography.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from '@mui/material'\nimport { useReducedMotion } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport { Fragment } from 'react'\n\nconst WORD_DURATION = 0.3\nconst WORD_BOUNCE = 0\nconst WORD_ENTER_Y = 4\n\nexport type StaggeredRevealTypographyProps = {\n text: string\n /** Seconds before the first word begins animating. /\n delay?: number\n} & Omit<TypographyProps, 'children'>\n\n/\n Reveals text with a word-level stagger animation on mount.\n * Callers should remount via `key={text}` when the text changes.\n /\nexport function StaggeredRevealTypography({\n text,\n delay,\n ...props\n}: StaggeredRevealTypographyProps): JSX.Element {\n const reduceMotion = useReducedMotion()\n\n if (reduceMotion) {\n return <Typography {...props}>{text}</Typography>\n }\n\n const words = text.split(' ')\n const perWordDuration = words.length > 1 ? WORD_DURATION 0.6 : WORD_DURATION\n const staggerInterval =\n (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1)\n\n return (\n <Typography {...props}>\n {words.map((word, i) => (\n <Fragment key={i}>\n {i > 0 && ' '}\n <m.span\n initial={{ opacity: 0, y: WORD_ENTER_Y }}\n animate={{ opacity: 1, y: 0 }}\n transition={{\n type: 'spring',\n visualDuration: perWordDuration,\n bounce: WORD_BOUNCE,\n delay: (delay ?? 0) + i * staggerInterval,\n }}\n style={{ display: 'inline-block' }}\n >\n {word}\n </m.span>\n </Fragment>\n ))}\n </Typography>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;AAYrB,SAAgB,0BAA0B,EACxC,MACA,OACA,GAAG,SAC2C;CAG9C,IAFqB,iBAEN,GACb,OAAO,oBAAC,YAAD;EAAY,GAAI;~~YAAQ~~;CAAiB,CAAA;CAGlD,MAAM,QAAQ,KAAK,MAAM,GAAG;CAC5B,MAAM,kBAAkB,MAAM,SAAS,IAAI,gBAAgB,KAAM;CACjE,MAAM,mBACH,gBAAgB,mBAAmB,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC;CAElE,OACE,oBAAC,YAAD;EAAY,GAAI;~~YACb~~,MAAM,KAAK,MAAM,MAChB,qBAAC,UAAD,EAAA,UAAA,CACG,IAAI,KAAK,KACV,oBAAC,EAAE,MAAH;GACE,SAAS;IAAE,SAAS;IAAG,GAAG;GAAa;GACvC,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,YAAY;IACV,MAAM;IACN,gBAAgB;IAChB,QAAQ;IACR,QAAQ,SAAS,KAAK,IAAI;GAC5B;GACA,OAAO,EAAE,SAAS,eAAe;~~aAEhC~~;EACK,CAAA,CACA,EAAA,GAfK,CAeL,CACX;CACS,CAAA;AAEhB"}
1	+ {"version":3,"file":"StaggeredRevealTypography.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from '@mui/material'\nimport { useReducedMotion } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport { Fragment } from 'react'\n\nconst WORD_DURATION = 0.3\nconst WORD_BOUNCE = 0\nconst WORD_ENTER_Y = 4\n\nexport type StaggeredRevealTypographyProps = {\n text: string\n /** Seconds before the first word begins animating. /\n delay?: number\n} & Omit<TypographyProps, 'children'>\n\n/\n Reveals text with a word-level stagger animation on mount.\n * Callers should remount via `key={text}` when the text changes.\n /\nexport function StaggeredRevealTypography({\n text,\n delay,\n ...props\n}: StaggeredRevealTypographyProps): JSX.Element {\n const reduceMotion = useReducedMotion()\n\n if (reduceMotion) {\n return <Typography {...props}>{text}</Typography>\n }\n\n const words = text.split(' ')\n const perWordDuration = words.length > 1 ? WORD_DURATION 0.6 : WORD_DURATION\n const staggerInterval =\n (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1)\n\n return (\n <Typography {...props}>\n {words.map((word, i) => (\n <Fragment key={i}>\n {i > 0 && ' '}\n <m.span\n initial={{ opacity: 0, y: WORD_ENTER_Y }}\n animate={{ opacity: 1, y: 0 }}\n transition={{\n type: 'spring',\n visualDuration: perWordDuration,\n bounce: WORD_BOUNCE,\n delay: (delay ?? 0) + i * staggerInterval,\n }}\n style={{ display: 'inline-block' }}\n >\n {word}\n </m.span>\n </Fragment>\n ))}\n </Typography>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;AAYrB,SAAgB,0BAA0B,EACxC,MACA,OACA,GAAG,SAC2C;CAG9C,IAFqB,iBAEN,GACb,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAQ,UAAA;CAAiB,CAAA;CAGlD,MAAM,QAAQ,KAAK,MAAM,GAAG;CAC5B,MAAM,kBAAkB,MAAM,SAAS,IAAI,gBAAgB,KAAM;CACjE,MAAM,mBACH,gBAAgB,mBAAmB,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC;CAElE,OACE,oBAAC,YAAD;EAAY,GAAI;EACb,UAAA,MAAM,KAAK,MAAM,MAChB,qBAAC,UAAD,EAAA,UAAA,CACG,IAAI,KAAK,KACV,oBAAC,EAAE,MAAH;GACE,SAAS;IAAE,SAAS;IAAG,GAAG;GAAa;GACvC,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,YAAY;IACV,MAAM;IACN,gBAAgB;IAChB,QAAQ;IACR,QAAQ,SAAS,KAAK,IAAI;GAC5B;GACA,OAAO,EAAE,SAAS,eAAe;GAEhC,UAAA;EACK,CAAA,CACA,EAAA,GAfK,CAeL,CACX;CACS,CAAA;AAEhB"}