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

@lifi/widget 4.4.0 → 4.5.0

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

Files changed (175) hide show

package/dist/esm/components/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\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;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/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":"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"}

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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusIcon.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { TimerRing } from '../Timer/StepStatusTimer.js'\nimport type { ExecutionIconKey } from './iconKey.js'\nimport { resolveExecutionIconKey } from './iconKey.js'\nimport { StatusIconContainer } from './StatusIcon.style.js'\n\nconst ICON_EXIT = { duration: 0.08, ease: [0.22, 1, 0.36, 1] as const }\n\nconst iconEnterConfig: Record<\n ExecutionIconKey,\n { initialScale: number; transition: Transition }\n> = {\n success: {\n initialScale: 0.6,\n transition: { type: 'spring', visualDuration: 0.3, bounce: 0.18 },\n },\n warning: {\n initialScale: 0.75,\n transition: { type: 'spring', visualDuration: 0.27, bounce: 0.1 },\n },\n error: {\n initialScale: 0.75,\n transition: { duration: 0.18, ease: [0.22, 1, 0.36, 1] },\n },\n info: {\n initialScale: 0.8,\n transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n },\n timer: {\n initialScale: 0.85,\n transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },\n },\n}\n\nconst iconVariants: Variants = {\n hidden: (key: ExecutionIconKey) => ({\n opacity: 0,\n scale: iconEnterConfig[key].initialScale,\n }),\n visible: (key: ExecutionIconKey) => ({\n opacity: 1,\n scale: 1,\n transition: iconEnterConfig[key].transition,\n }),\n exit: {\n opacity: 0,\n scale: 0.8,\n filter: 'blur(4px)',\n transition: { duration: ICON_EXIT.duration, ease: ICON_EXIT.ease },\n },\n}\n\ninterface StatusIconProps {\n route: RouteExtended\n status: RouteExecutionStatus\n}\n\n/*\n The animated status icon. Each state animates in its own way; they all\n * animate out the same way.\n */\nexport function StatusIcon({ route, status }: StatusIconProps): JSX.Element {\n const iconKey = resolveExecutionIconKey(route, status)\n const step = route.steps.at(-1)\n\n return (\n <StatusIconContainer>\n <AnimatePresence mode=\"popLayout\" initial={false}>\n <m.div\n key={iconKey}\n custom={iconKey}\n variants={iconVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"exit\"\n style={{\n position: 'absolute',\n inset: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n {iconKey === 'timer' ? (\n <TimerRing step={step} />\n ) : (\n <IconCircle status={iconKey} />\n )}\n </m.div>\n </AnimatePresence>\n </StatusIconContainer>\n )\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,YAAY;CAAE,UAAU;CAAM,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AAEtE,MAAM,kBAGF;CACF,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAK,QAAQ;EAAK;CAClE;CACA,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAM,QAAQ;EAAI;CAClE;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;CACA,MAAM;EACJ,cAAc;EACd,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;AACF;AAEA,MAAM,eAAyB;CAC7B,SAAS,SAA2B;EAClC,SAAS;EACT,OAAO,gBAAgB,IAAI,CAAC;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,IAAI,CAAC;CACnC;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,YAAY;GAAE,UAAU,UAAU;GAAU,MAAM,UAAU;EAAK;CACnE;AACF;;;;;AAWA,SAAgB,WAAW,EAAE,OAAO,UAAwC;CAC1E,MAAM,UAAU,wBAAwB,OAAO,MAAM;CACrD,MAAM,OAAO,MAAM,MAAM,GAAG,EAAE;CAE9B,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD;EAAiB,MAAK;EAAY,SAAS;~~YACzC~~,oBAAC,EAAE,KAAH;GAEE,QAAQ;GACR,UAAU;GACV,SAAQ;GACR,SAAQ;GACR,MAAK;GACL,OAAO;IACL,UAAU;IACV,OAAO;IACP,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;~~aAEC~~,YAAY,UACX,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAExB,oBAAC,YAAD,EAAY,QAAQ,QAAU,CAAA;EAE3B,GAnBA,OAmBA;CACQ,CAAA,EACE,CAAA;AAEzB"}
1	+ {"version":3,"file":"StatusIcon.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { TimerRing } from '../Timer/StepStatusTimer.js'\nimport type { ExecutionIconKey } from './iconKey.js'\nimport { resolveExecutionIconKey } from './iconKey.js'\nimport { StatusIconContainer } from './StatusIcon.style.js'\n\nconst ICON_EXIT = { duration: 0.08, ease: [0.22, 1, 0.36, 1] as const }\n\nconst iconEnterConfig: Record<\n ExecutionIconKey,\n { initialScale: number; transition: Transition }\n> = {\n success: {\n initialScale: 0.6,\n transition: { type: 'spring', visualDuration: 0.3, bounce: 0.18 },\n },\n warning: {\n initialScale: 0.75,\n transition: { type: 'spring', visualDuration: 0.27, bounce: 0.1 },\n },\n error: {\n initialScale: 0.75,\n transition: { duration: 0.18, ease: [0.22, 1, 0.36, 1] },\n },\n info: {\n initialScale: 0.8,\n transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n },\n timer: {\n initialScale: 0.85,\n transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },\n },\n}\n\nconst iconVariants: Variants = {\n hidden: (key: ExecutionIconKey) => ({\n opacity: 0,\n scale: iconEnterConfig[key].initialScale,\n }),\n visible: (key: ExecutionIconKey) => ({\n opacity: 1,\n scale: 1,\n transition: iconEnterConfig[key].transition,\n }),\n exit: {\n opacity: 0,\n scale: 0.8,\n filter: 'blur(4px)',\n transition: { duration: ICON_EXIT.duration, ease: ICON_EXIT.ease },\n },\n}\n\ninterface StatusIconProps {\n route: RouteExtended\n status: RouteExecutionStatus\n}\n\n/*\n The animated status icon. Each state animates in its own way; they all\n * animate out the same way.\n */\nexport function StatusIcon({ route, status }: StatusIconProps): JSX.Element {\n const iconKey = resolveExecutionIconKey(route, status)\n const step = route.steps.at(-1)\n\n return (\n <StatusIconContainer>\n <AnimatePresence mode=\"popLayout\" initial={false}>\n <m.div\n key={iconKey}\n custom={iconKey}\n variants={iconVariants}\n initial=\"hidden\"\n animate=\"visible\"\n exit=\"exit\"\n style={{\n position: 'absolute',\n inset: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n {iconKey === 'timer' ? (\n <TimerRing step={step} />\n ) : (\n <IconCircle status={iconKey} />\n )}\n </m.div>\n </AnimatePresence>\n </StatusIconContainer>\n )\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,YAAY;CAAE,UAAU;CAAM,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AAEtE,MAAM,kBAGF;CACF,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAK,QAAQ;EAAK;CAClE;CACA,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAM,QAAQ;EAAI;CAClE;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;CACA,MAAM;EACJ,cAAc;EACd,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;AACF;AAEA,MAAM,eAAyB;CAC7B,SAAS,SAA2B;EAClC,SAAS;EACT,OAAO,gBAAgB,IAAI,CAAC;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,IAAI,CAAC;CACnC;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,YAAY;GAAE,UAAU,UAAU;GAAU,MAAM,UAAU;EAAK;CACnE;AACF;;;;;AAWA,SAAgB,WAAW,EAAE,OAAO,UAAwC;CAC1E,MAAM,UAAU,wBAAwB,OAAO,MAAM;CACrD,MAAM,OAAO,MAAM,MAAM,GAAG,EAAE;CAE9B,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD;EAAiB,MAAK;EAAY,SAAS;EACzC,UAAA,oBAAC,EAAE,KAAH;GAEE,QAAQ;GACR,UAAU;GACV,SAAQ;GACR,SAAQ;GACR,MAAK;GACL,OAAO;IACL,UAAU;IACV,OAAO;IACP,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;GAEC,UAAA,YAAY,UACX,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAExB,oBAAC,YAAD,EAAY,QAAQ,QAAU,CAAA;EAE3B,GAnBA,OAmBA;CACQ,CAAA,EACE,CAAA;AAEzB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain \|\|\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,qBAAqB;CACjE,MAAM,wBAAwB,OAAsB,aAAa;CACjE,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAGlD,IACE,kBAAA,eACA,kBAAA,WAEA,sBAAsB,UAAU;CAWlC,OACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;GACnC,OAAO,aACH,uBACA,qBACE,sBACA;EACR,GAAG,CAAC,YAAY,kBAAkB,CAGQ;~~YAAxC~~,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;EACnB,CAAA,GACD,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;EACP,CAAA,CACiB;;AAExB"}
1	+ {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain \|\|\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,qBAAqB;CACjE,MAAM,wBAAwB,OAAsB,aAAa;CACjE,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAGlD,IACE,kBAAA,eACA,kBAAA,WAEA,sBAAsB,UAAU;CAWlC,OACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;GACnC,OAAO,aACH,uBACA,qBACE,sBACA;EACR,GAAG,CAAC,YAAY,kBAAkB,CAGQ;EAAxC,UAAA,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;EACnB,CAAA,GACD,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;EACP,CAAA,CACiB;;AAExB"}

package/dist/esm/components/Expansion/ExpansionTransition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n animationDuration,\n defaultStyle,\n transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n in: boolean\n width: string\n onExited?: () => void\n}\n\nexport function ExpansionTransition({\n in: inProp,\n children,\n width,\n onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n const nodeRef = useRef(null)\n return (\n <Transition\n nodeRef={nodeRef}\n in={inProp}\n timeout={animationDuration}\n onExited={onExited}\n mountOnEnter\n unmountOnExit\n >\n {(state) => {\n return (\n <Box\n ref={nodeRef}\n style={{\n ...defaultStyle,\n ...transitionStyles[state as keyof typeof transitionStyles],\n width,\n }}\n >\n {children}\n </Box>\n )\n }}\n </Transition>\n )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,IAAI;CAC3B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;~~aAEE~~,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;IACF;IAEC;GACE,CAAA;EAET;CACU,CAAA;AAEhB"}
1	+ {"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n animationDuration,\n defaultStyle,\n transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n in: boolean\n width: string\n onExited?: () => void\n}\n\nexport function ExpansionTransition({\n in: inProp,\n children,\n width,\n onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n const nodeRef = useRef(null)\n return (\n <Transition\n nodeRef={nodeRef}\n in={inProp}\n timeout={animationDuration}\n onExited={onExited}\n mountOnEnter\n unmountOnExit\n >\n {(state) => {\n return (\n <Box\n ref={nodeRef}\n style={{\n ...defaultStyle,\n ...transitionStyles[state as keyof typeof transitionStyles],\n width,\n }}\n >\n {children}\n </Box>\n )\n }}\n </Transition>\n )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,IAAI;CAC3B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;EAEE,WAAA,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;IACF;IAEC;GACE,CAAA;EAET;CACU,CAAA;AAEhB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n gasCosts?: FeesBreakdown[]\n feeCosts?: FeesBreakdown[]\n gasless?: boolean\n children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n gasCosts,\n feeCosts,\n gasless,\n children,\n}) => {\n const { t } = useTranslation()\n return (\n <Tooltip\n title={\n <Box>\n {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n {gasCosts?.length && !gasless ? (\n <Box>\n {t('main.fees.network')}\n {getFeeBreakdownTypography(gasCosts, t)}\n </Box>\n ) : null}\n {feeCosts?.length && !gasless ? (\n <Box\n sx={{\n mt: 0.5,\n }}\n >\n {t('main.fees.provider')}\n {getFeeBreakdownTypography(feeCosts, t)}\n </Box>\n ) : null}\n </Box>\n }\n sx={{ cursor: 'help' }}\n >\n {children}\n </Tooltip>\n )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n fees.map((fee, index) => (\n <Typography\n color=\"inherit\"\n key={`${fee.token.address}${index}`}\n sx={{\n fontSize: 12,\n fontWeight: '500',\n }}\n >\n {t('format.currency', { value: fee.amountUSD })} (\n {t('format.tokenAmount', {\n value: formatTokenAmount(fee.amount, fee.token.decimals),\n })}{' '}\n {fee.token.symbol})\n </Typography>\n ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,iBAAiB,EAAO,CAAA,IAAI;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,mBAAmB,GACrB,0BAA0B,UAAU,CAAC,CACnC,EAAA,CAAA,IACH;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACN;~~cAHF~~,CAKG,EAAE,oBAAoB,GACtB,0BAA0B,UAAU,CAAC,CACnC;~~QACH~~;EACD,EAAA,CAAA;EAEP,IAAI,EAAE,QAAQ,OAAO;EAEpB;CACM,CAAA;AAEb;AAEA,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;CACd;~~WANF~~;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,UAAU,CAAC;EAAE;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,EACzD,CAAC;EAAG;EACH,IAAI,MAAM;EAAO;CACR;~~GAXL~~,GAAG,IAAI,MAAM,UAAU,OAWlB,CACb"}
1	+ {"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n gasCosts?: FeesBreakdown[]\n feeCosts?: FeesBreakdown[]\n gasless?: boolean\n children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n gasCosts,\n feeCosts,\n gasless,\n children,\n}) => {\n const { t } = useTranslation()\n return (\n <Tooltip\n title={\n <Box>\n {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n {gasCosts?.length && !gasless ? (\n <Box>\n {t('main.fees.network')}\n {getFeeBreakdownTypography(gasCosts, t)}\n </Box>\n ) : null}\n {feeCosts?.length && !gasless ? (\n <Box\n sx={{\n mt: 0.5,\n }}\n >\n {t('main.fees.provider')}\n {getFeeBreakdownTypography(feeCosts, t)}\n </Box>\n ) : null}\n </Box>\n }\n sx={{ cursor: 'help' }}\n >\n {children}\n </Tooltip>\n )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n fees.map((fee, index) => (\n <Typography\n color=\"inherit\"\n key={`${fee.token.address}${index}`}\n sx={{\n fontSize: 12,\n fontWeight: '500',\n }}\n >\n {t('format.currency', { value: fee.amountUSD })} (\n {t('format.tokenAmount', {\n value: formatTokenAmount(fee.amount, fee.token.decimals),\n })}{' '}\n {fee.token.symbol})\n </Typography>\n ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,iBAAiB,EAAO,CAAA,IAAI;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,mBAAmB,GACrB,0BAA0B,UAAU,CAAC,CACnC,EAAA,CAAA,IACH;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACN;IAHF,UAAA,CAKG,EAAE,oBAAoB,GACtB,0BAA0B,UAAU,CAAC,CACnC;GACH,CAAA,IAAA;EACD,EAAA,CAAA;EAEP,IAAI,EAAE,QAAQ,OAAO;EAEpB;CACM,CAAA;AAEb;AAEA,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;CACd;CANF,UAAA;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,UAAU,CAAC;EAAE;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,EACzD,CAAC;EAAG;EACH,IAAI,MAAM;EAAO;CACR;AAXL,GAAA,GAAG,IAAI,MAAM,UAAU,OAWlB,CACb"}

package/dist/esm/components/Header/ActivitiesButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivitiesButton.js","names":[],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active \|\| indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple={indicator.active \|\| indicator.failed}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active \|\| indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,2BAA2B;CAE7C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,mBAAmB;~~YACnC~~,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,WAAW,CAAC;GAC3D,eAAe,UAAU,UAAU,UAAU;~~aAE7C~~,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA;IAE9D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;IAAQ;~~cAErD~~,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;KACZ,CAAA;KAEF,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;MAAG;KAC/C,CAAA;KAEH,oBAAC,aAAD,CAAc,CAAA;IACD,EAAA,CAAA;GACL,CAAA;EACQ,CAAA;CACf,CAAA;AAEb"}
1	+ {"version":3,"file":"ActivitiesButton.js","names":[],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active \|\| indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple={indicator.active \|\| indicator.failed}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active \|\| indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,2BAA2B;CAE7C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,mBAAmB;EACnC,UAAA,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,WAAW,CAAC;GAC3D,eAAe,UAAU,UAAU,UAAU;GAE7C,UAAA,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA;IAE9D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;IAAQ;IAErD,UAAA,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;KACZ,CAAA;KAEF,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;MAAG;KAC/C,CAAA;KAEH,oBAAC,aAAD,CAAc,CAAA;IACD,EAAA,CAAA;GACL,CAAA;EACQ,CAAA;CACf,CAAA;AAEb"}

package/dist/esm/components/Header/BackButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n const theme = useTheme()\n const navigateBack = useNavigateBack()\n const [backAction, executeBackAction] = useHeaderStore((state) => [\n state.backAction,\n state.executeBackAction,\n ])\n\n return (\n <IconButton\n size=\"medium\"\n edge={theme?.navigation?.edge ? 'start' : false}\n onClick={() => {\n if (backAction) {\n executeBackAction()\n } else {\n navigateBack()\n }\n }}\n >\n <ArrowBack />\n </IconButton>\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,iBACR,CAAC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,kBAAkB;QAElB,aAAa;EAEjB;~~YAEA~~,oBAAC,WAAD,CAAY,CAAA;CACF,CAAA;AAEhB"}
1	+ {"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n const theme = useTheme()\n const navigateBack = useNavigateBack()\n const [backAction, executeBackAction] = useHeaderStore((state) => [\n state.backAction,\n state.executeBackAction,\n ])\n\n return (\n <IconButton\n size=\"medium\"\n edge={theme?.navigation?.edge ? 'start' : false}\n onClick={() => {\n if (backAction) {\n executeBackAction()\n } else {\n navigateBack()\n }\n }}\n >\n <ArrowBack />\n </IconButton>\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,iBACR,CAAC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,kBAAkB;QAElB,aAAa;EAEjB;EAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;CACF,CAAA;AAEhB"}

package/dist/esm/components/Header/CloseDrawerButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n header?: 'navigation' \| 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n header,\n}: CloseDrawerButtonProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const { closeDrawer } = useDrawer()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const showInNavigationHeader =\n header === 'navigation' && useExternalWalletProvidersOnly\n\n const showInWalletHeader = header === 'wallet'\n\n return showInNavigationHeader \|\| showInWalletHeader ? (\n <Tooltip title={t('button.close')}>\n <IconButton\n size=\"medium\"\n data-testid=\"widget-close-drawer-button\"\n onClick={closeDrawer}\n >\n <CloseRounded />\n </IconButton>\n </Tooltip>\n ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,gBAAgB,UAAU;CAClC,MAAM,EAAE,mCAAmC,0BAA0B;CAOrE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,cAAc;~~YAC9B~~,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;~~aAET~~,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}
1	+ {"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n header?: 'navigation' \| 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n header,\n}: CloseDrawerButtonProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const { closeDrawer } = useDrawer()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const showInNavigationHeader =\n header === 'navigation' && useExternalWalletProvidersOnly\n\n const showInWalletHeader = header === 'wallet'\n\n return showInNavigationHeader \|\| showInWalletHeader ? (\n <Tooltip title={t('button.close')}>\n <IconButton\n size=\"medium\"\n data-testid=\"widget-close-drawer-button\"\n onClick={closeDrawer}\n >\n <CloseRounded />\n </IconButton>\n </Tooltip>\n ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,gBAAgB,UAAU;CAClC,MAAM,EAAE,mCAAmC,0BAA0B;CAOrE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,cAAc;EAC9B,UAAA,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;GAET,UAAA,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}

package/dist/esm/components/Header/DisconnectIconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n account,\n}: {\n account: Account\n}): JSX.Element => {\n const disconnect = useAccountDisconnect()\n return (\n <IconButton\n size=\"medium\"\n onClick={async (e) => {\n e.stopPropagation()\n await disconnect(account)\n }}\n >\n <PowerSettingsNewRounded />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,qBAAqB;CACxC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,gBAAgB;GAClB,MAAM,WAAW,OAAO;EAC1B;~~YAEA~~,oBAAC,yBAAD,CAA0B,CAAA;CAChB,CAAA;AAEhB"}
1	+ {"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n account,\n}: {\n account: Account\n}): JSX.Element => {\n const disconnect = useAccountDisconnect()\n return (\n <IconButton\n size=\"medium\"\n onClick={async (e) => {\n e.stopPropagation()\n await disconnect(account)\n }}\n >\n <PowerSettingsNewRounded />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,qBAAqB;CACxC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,gBAAgB;GAClB,MAAM,WAAW,OAAO;EAC1B;EAEA,UAAA,oBAAC,yBAAD,CAA0B,CAAA;CAChB,CAAA;AAEhB"}

package/dist/esm/components/Header/HeaderTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\ninterface HeaderTab<K extends string> {\n key: K\n label: string\n}\n\ninterface HeaderTabsProps<K extends string> {\n tabs: HeaderTab<K>[]\n value: K\n onChange: (key: K) => void\n}\n\n/*\n Presentational header tabs bar shared by split mode and configured\n * navigation tabs.\n * Clears the form fields on switch; the caller supplies the labelled tabs, the\n * active key, and what selecting a key means for its store.\n */\nexport const HeaderTabs = <K extends string>({\n tabs,\n value,\n onChange,\n}: HeaderTabsProps<K>): JSX.Element => {\n const { setFieldValue } = useFieldActions()\n\n const handleChange = (_: React.SyntheticEvent, key: K) => {\n setFieldValue('fromAmount', '')\n setFieldValue('fromToken', '')\n setFieldValue('toToken', '')\n onChange(key)\n }\n\n return (\n <NavigationTabs value={value} onChange={handleChange} aria-label=\"tabs\">\n {tabs.map((tab) => (\n <NavigationTab\n key={tab.key}\n value={tab.key}\n label={tab.label}\n disableRipple\n />\n ))}\n </NavigationTabs>\n )\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAgC,EAC3C,MACA,OACA,eACqC;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,gBAAgB,GAAyB,QAAW;EACxD,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,GAAG;CACd;CAEA,OACE,oBAAC,gBAAD;EAAuB;EAAO,UAAU;EAAc,cAAW;~~YAC9D~~,KAAK,KAAK,QACT,oBAAC,eAAD;GAEE,OAAO,IAAI;GACX,OAAO,IAAI;GACX,eAAA;EACD,GAJM,IAAI,GAIV,CACF;CACa,CAAA;AAEpB"}
1	+ {"version":3,"file":"HeaderTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\ninterface HeaderTab<K extends string> {\n key: K\n label: string\n}\n\ninterface HeaderTabsProps<K extends string> {\n tabs: HeaderTab<K>[]\n value: K\n onChange: (key: K) => void\n}\n\n/*\n Presentational header tabs bar shared by split mode and configured\n * navigation tabs.\n * Clears the form fields on switch; the caller supplies the labelled tabs, the\n * active key, and what selecting a key means for its store.\n */\nexport const HeaderTabs = <K extends string>({\n tabs,\n value,\n onChange,\n}: HeaderTabsProps<K>): JSX.Element => {\n const { setFieldValue } = useFieldActions()\n\n const handleChange = (_: React.SyntheticEvent, key: K) => {\n setFieldValue('fromAmount', '')\n setFieldValue('fromToken', '')\n setFieldValue('toToken', '')\n onChange(key)\n }\n\n return (\n <NavigationTabs value={value} onChange={handleChange} aria-label=\"tabs\">\n {tabs.map((tab) => (\n <NavigationTab\n key={tab.key}\n value={tab.key}\n label={tab.label}\n disableRipple\n />\n ))}\n </NavigationTabs>\n )\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAgC,EAC3C,MACA,OACA,eACqC;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,gBAAgB,GAAyB,QAAW;EACxD,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,GAAG;CACd;CAEA,OACE,oBAAC,gBAAD;EAAuB;EAAO,UAAU;EAAc,cAAW;EAC9D,UAAA,KAAK,KAAK,QACT,oBAAC,eAAD;GAEE,OAAO,IAAI;GACX,OAAO,IAAI;GACX,eAAA;EACD,GAJM,IAAI,GAIV,CACF;CACa,CAAA;AAEpB"}

package/dist/esm/components/Header/NavigationHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { HeaderNavigationTabs } from './HeaderNavigationTabs.js'\nimport { SettingsButton } from './SettingsButton.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { hiddenUI, variant, defaultUI } = useWidgetConfig()\n const navigationTabsCount = useNavigationTabsStore(\n (state) => state.tabs.length\n )\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // The store resolves which tabs to show (split Swap/Bridge or configured\n // navigation tabs); the header just reflects whether there are any.\n const showHeaderTabs = !hasPath && navigationTabsCount > 0\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showHeaderTabs ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <HeaderNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}\n <SettingsButton />\n {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element \|\| (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,UAAU,SAAS,cAAc,gBAAgB;CACzD,MAAM,sBAAsB,wBACzB,UAAU,MAAM,KAAK,MACxB;CACA,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,iBAAiB,CAAC,WAAW,sBAAsB;CAEzD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;~~YAApE~~;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,iBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;~~cACjC~~,oBAAC,sBAAD,CAAuB,CAAA;GACpB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;~~cAEC~~;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}
1	+ {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { HeaderNavigationTabs } from './HeaderNavigationTabs.js'\nimport { SettingsButton } from './SettingsButton.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { hiddenUI, variant, defaultUI } = useWidgetConfig()\n const navigationTabsCount = useNavigationTabsStore(\n (state) => state.tabs.length\n )\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // The store resolves which tabs to show (split Swap/Bridge or configured\n // navigation tabs); the header just reflects whether there are any.\n const showHeaderTabs = !hasPath && navigationTabsCount > 0\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showHeaderTabs ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <HeaderNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}\n <SettingsButton />\n {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element \|\| (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,UAAU,SAAS,cAAc,gBAAgB;CACzD,MAAM,sBAAsB,wBACzB,UAAU,MAAM,KAAK,MACxB;CACA,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,iBAAiB,CAAC,WAAW,sBAAsB;CAEzD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;EAApE,UAAA;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,iBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;IACjC,UAAA,oBAAC,sBAAD,CAAuB,CAAA;GACpB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;IAEC,UAAA;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}

package/dist/esm/components/Header/SettingsButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n SettingsIconBadge,\n SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n\n const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n useSettingMonitor()\n\n const variant = isRouteSettingsWithWarnings\n ? 'warning'\n : isCustomRouteSettings\n ? 'info'\n : undefined\n\n const tooltipMessage = variant\n ? t('tooltip.settingsModified')\n : t('header.settings')\n\n return (\n <Tooltip title={tooltipMessage}>\n <SettingsIconButton\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.settings })}\n variant={variant}\n >\n {variant ? (\n <SettingsIconBadge variant=\"dot\" color={variant}>\n <Settings />\n </SettingsIconBadge>\n ) : (\n <Settings />\n )}\n </SettingsIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;~~YAInB~~,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;~~aAER~~,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;~~cACtC~~,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}
1	+ {"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n SettingsIconBadge,\n SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n\n const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n useSettingMonitor()\n\n const variant = isRouteSettingsWithWarnings\n ? 'warning'\n : isCustomRouteSettings\n ? 'info'\n : undefined\n\n const tooltipMessage = variant\n ? t('tooltip.settingsModified')\n : t('header.settings')\n\n return (\n <Tooltip title={tooltipMessage}>\n <SettingsIconButton\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.settings })}\n variant={variant}\n >\n {variant ? (\n <SettingsIconBadge variant=\"dot\" color={variant}>\n <Settings />\n </SettingsIconBadge>\n ) : (\n <Settings />\n )}\n </SettingsIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;EAInB,UAAA,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;GAER,UAAA,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;IACtC,UAAA,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}

package/dist/esm/components/Header/WalletHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n getConnectorIcon,\n useAccount,\n useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n DrawerWalletContainer,\n HeaderAppBar,\n WalletAvatar,\n WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n const { hiddenUI } = useWidgetConfig()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const isWalletMenuHidden = hiddenUI?.walletMenu\n\n const shouldShowWalletMenu =\n !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n return {\n shouldShowWalletMenu,\n }\n}\n\nexport const WalletHeader: React.FC = () => {\n const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n return shouldShowWalletMenu ? (\n <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n <WalletMenuButton />\n </HeaderAppBar>\n ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n const { variant, hiddenUI } = useWidgetConfig()\n const { account, accounts } = useAccount()\n\n const [fromChainId] = useFieldValues('fromChain')\n const { chain: fromChain } = useChain(fromChainId)\n\n const activeAccount =\n (fromChain\n ? accounts.find((account) => account.chainType === fromChain.chainType)\n : undefined) \|\| account\n\n if (variant === 'drawer') {\n return (\n <DrawerWalletContainer>\n {activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )}\n {!hiddenUI?.drawerCloseButton ? (\n <CloseDrawerButton header=\"wallet\" />\n ) : null}\n </DrawerWalletContainer>\n )\n }\n return activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )\n}\n\nconst ConnectButton = () => {\n const { t } = useTranslation()\n const { walletConfig, variant } = useWidgetConfig()\n const { openWalletMenu } = useWalletMenu()\n const connect = async (event: React.MouseEvent<HTMLElement>) => {\n if (\n !walletConfig?.usePartialWalletManagement &&\n !walletConfig?.forceInternalWalletManagement &&\n walletConfig?.onConnect\n ) {\n walletConfig.onConnect()\n return\n }\n openWalletMenu()\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n return (\n <WalletButton\n withOffset={walletPosition === 'end'}\n endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n startIcon={\n walletPosition === 'start' ? (\n <Wallet sx={{ marginLeft: -0.25 }} />\n ) : undefined\n }\n onClick={connect}\n >\n {t('button.connectWallet')}\n </WalletButton>\n )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n const { chain } = useChain(account.chainId)\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)\n const walletAddress = shortenAddress(account.address)\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget)\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n return (\n <>\n <WalletButton\n withOffset\n endIcon={<ExpandMore />}\n startIcon={\n chain?.logoURI ? (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={\n <SmallAvatar\n src={chain?.logoURI}\n alt={chain?.name}\n sx={{ width: 12, height: 12 }}\n >\n {chain?.name[0]}\n </SmallAvatar>\n }\n >\n <WalletAvatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n >\n {account.connector?.name[0]}\n </WalletAvatar>\n </Badge>\n ) : (\n <Avatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n sx={{ width: 24, height: 24 }}\n >\n {account.connector?.name[0]}\n </Avatar>\n )\n }\n onClick={handleClick}\n >\n {walletAddress}\n </WalletButton>\n <WalletMenuContainer\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n <WalletMenu onClose={handleClose} />\n </WalletMenuContainer>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAM,oCAAoC;CACxC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,mCAAmC,0BAA0B;CAErE,MAAM,qBAAqB,UAAU;CAKrC,OAAO,EACL,sBAHA,CAAC,kCAAkC,CAAC,mBAItC;AACF;AAEA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,yBAAyB,4BAA4B;CAE7D,OAAO,uBACL,oBAAC,cAAD;EAAc,WAAW;EAAG,IAAI,EAAE,gBAAgB,WAAW;~~YAC3D~~,oBAAC,kBAAD,CAAmB,CAAA;CACP,CAAA,IACZ;AACN;AAEA,MAAM,yBAAmC;CACvC,MAAM,EAAE,SAAS,aAAa,gBAAgB;CAC9C,MAAM,EAAE,SAAS,aAAa,WAAW;CAEzC,MAAM,CAAC,eAAe,eAAe,WAAW;CAChD,MAAM,EAAE,OAAO,cAAc,SAAS,WAAW;CAEjD,MAAM,iBACH,YACG,SAAS,MAAM,YAAY,QAAQ,cAAc,UAAU,SAAS,IACpE,KAAA,MAAc;CAEpB,IAAI,YAAY,UACd,OACE,qBAAC,uBAAD,EAAA,UAAA,CACG,cAAc,cACb,oBAAC,iBAAD,EAAiB,SAAS,cAAgB,CAAA,IAE1C,oBAAC,eAAD,CAAgB,CAAA,GAEjB,CAAC,UAAU,oBACV,oBAAC,mBAAD,EAAmB,QAAO,SAAU,CAAA,IAClC,IACiB,EAAA,CAAA;CAG3B,OAAO,cAAc,cACnB,oBAAC,iBAAD,EAAiB,SAAS,cAAgB,CAAA,IAE1C,oBAAC,eAAD,CAAgB,CAAA;AAEpB;AAEA,MAAM,sBAAsB;CAC1B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,cAAc,YAAY,gBAAgB;CAClD,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,OAAO,UAAyC;EAC9D,IACE,CAAC,cAAc,8BACf,CAAC,cAAc,iCACf,cAAc,WACd;GACA,aAAa,UAAU;GACvB;EACF;EACA,eAAe;EACf,MAAM,cAAc,KAAK;CAC3B;CAEA,MAAM,iBAAiB,YAAY,WAAW,UAAU;CAExD,OACE,oBAAC,cAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,mBAAmB,QAAQ,oBAAC,QAAD,CAAS,CAAA,IAAI,KAAA;EACjD,WACE,mBAAmB,UACjB,oBAAC,QAAD,EAAQ,IAAI,EAAE,YAAY,KAAM,EAAI,CAAA,IAClC,KAAA;EAEN,SAAS;~~YAER~~,EAAE,sBAAsB;CACb,CAAA;AAElB;AAEA,MAAM,mBAAmB,EAAE,cAAoC;CAC7D,MAAM,EAAE,UAAU,SAAS,QAAQ,OAAO;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,gBAAgB,eAAe,QAAQ,OAAO;CAEpD,MAAM,eAAe,UAAyC;EAC5D,YAAY,MAAM,aAAa;EAC/B,MAAM,cAAc,KAAK;CAC3B;CAEA,MAAM,oBAAoB;EACxB,YAAY,IAAI;CAClB;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,YAAA;EACA,SAAS,oBAAC,YAAD,CAAa,CAAA;EACtB,WACE,OAAO,UACL,oBAAC,OAAD;GACE,SAAQ;GACR,cAAc;IAAE,UAAU;IAAU,YAAY;GAAQ;GACxD,cACE,oBAAC,aAAD;IACE,KAAK,OAAO;IACZ,KAAK,OAAO;IACZ,IAAI;KAAE,OAAO;KAAI,QAAQ;IAAG;~~cAE3B~~,OAAO,KAAK;GACF,CAAA;~~aAGf~~,oBAAC,cAAD;IACE,KAAK,iBAAiB,QAAQ,SAAS;IACvC,KAAK,QAAQ,WAAW;~~cAEvB~~,QAAQ,WAAW,KAAK;GACb,CAAA;EACT,CAAA,IAEP,oBAAC,QAAD;GACE,KAAK,iBAAiB,QAAQ,SAAS;GACvC,KAAK,QAAQ,WAAW;GACxB,IAAI;IAAE,OAAO;IAAI,QAAQ;GAAG;~~aAE3B~~,QAAQ,WAAW,KAAK;EACnB,CAAA;EAGZ,SAAS;~~YAER~~;CACW,CAAA,GACd,oBAAC,qBAAD;EACY;EACV,MAAM,QAAQ,QAAQ;EACtB,SAAS;~~YAET~~,oBAAC,YAAD,EAAY,SAAS,YAAc,CAAA;CAChB,CAAA,CACrB,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n getConnectorIcon,\n useAccount,\n useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n DrawerWalletContainer,\n HeaderAppBar,\n WalletAvatar,\n WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n const { hiddenUI } = useWidgetConfig()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const isWalletMenuHidden = hiddenUI?.walletMenu\n\n const shouldShowWalletMenu =\n !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n return {\n shouldShowWalletMenu,\n }\n}\n\nexport const WalletHeader: React.FC = () => {\n const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n return shouldShowWalletMenu ? (\n <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n <WalletMenuButton />\n </HeaderAppBar>\n ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n const { variant, hiddenUI } = useWidgetConfig()\n const { account, accounts } = useAccount()\n\n const [fromChainId] = useFieldValues('fromChain')\n const { chain: fromChain } = useChain(fromChainId)\n\n const activeAccount =\n (fromChain\n ? accounts.find((account) => account.chainType === fromChain.chainType)\n : undefined) \|\| account\n\n if (variant === 'drawer') {\n return (\n <DrawerWalletContainer>\n {activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )}\n {!hiddenUI?.drawerCloseButton ? (\n <CloseDrawerButton header=\"wallet\" />\n ) : null}\n </DrawerWalletContainer>\n )\n }\n return activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )\n}\n\nconst ConnectButton = () => {\n const { t } = useTranslation()\n const { walletConfig, variant } = useWidgetConfig()\n const { openWalletMenu } = useWalletMenu()\n const connect = async (event: React.MouseEvent<HTMLElement>) => {\n if (\n !walletConfig?.usePartialWalletManagement &&\n !walletConfig?.forceInternalWalletManagement &&\n walletConfig?.onConnect\n ) {\n walletConfig.onConnect()\n return\n }\n openWalletMenu()\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n return (\n <WalletButton\n withOffset={walletPosition === 'end'}\n endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n startIcon={\n walletPosition === 'start' ? (\n <Wallet sx={{ marginLeft: -0.25 }} />\n ) : undefined\n }\n onClick={connect}\n >\n {t('button.connectWallet')}\n </WalletButton>\n )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n const { chain } = useChain(account.chainId)\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)\n const walletAddress = shortenAddress(account.address)\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget)\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n return (\n <>\n <WalletButton\n withOffset\n endIcon={<ExpandMore />}\n startIcon={\n chain?.logoURI ? (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={\n <SmallAvatar\n src={chain?.logoURI}\n alt={chain?.name}\n sx={{ width: 12, height: 12 }}\n >\n {chain?.name[0]}\n </SmallAvatar>\n }\n >\n <WalletAvatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n >\n {account.connector?.name[0]}\n </WalletAvatar>\n </Badge>\n ) : (\n <Avatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n sx={{ width: 24, height: 24 }}\n >\n {account.connector?.name[0]}\n </Avatar>\n )\n }\n onClick={handleClick}\n >\n {walletAddress}\n </WalletButton>\n <WalletMenuContainer\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n <WalletMenu onClose={handleClose} />\n </WalletMenuContainer>\n </>\n )\n}\n"],"mappings":"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"}