npm - @lifi/widget - Versions diffs - 4.0.0-beta.17 → 4.0.0-beta.18 - Mend

@lifi/widget 4.0.0-beta.17 → 4.0.0-beta.18

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 (123) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInput.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport type { CardProps } from '@mui/material'\nimport type { ChangeEvent, ReactNode } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { DisabledUI } from '../../types/widget.js'\nimport {\n formatInputAmount,\n formatTokenPrice,\n priceToTokenAmount,\n usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { InputCard } from '../Card/InputCard.js'\nimport {\n AmountInputCardHeader,\n AmountInputCardTitle,\n FormContainer,\n FormControl,\n Input,\n maxInputFontSize,\n minInputFontSize,\n} from './AmountInput.style.js'\nimport { AmountInputEndAdornment } from './AmountInputEndAdornment.js'\nimport { AmountInputStartAdornment } from './AmountInputStartAdornment.js'\nimport { PriceFormHelperText } from './PriceFormHelperText.js'\n\nexport const AmountInput: React.FC<FormTypeProps & CardProps> = ({\n formType,\n ...props\n}) => {\n const { disabledUI } = useWidgetConfig()\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n\n const disabled = disabledUI?.includes(DisabledUI.FromAmount)\n return (\n <AmountInputBase\n formType={formType}\n token={token}\n bottomAdornment={<PriceFormHelperText formType={formType} />}\n disabled={disabled}\n {...props}\n />\n )\n}\n\nconst AmountInputBase: React.FC<\n FormTypeProps &\n CardProps & {\n token?: Token\n startAdornment?: ReactNode\n bottomAdornment?: ReactNode\n disabled?: boolean\n }\n> = ({\n formType,\n token,\n startAdornment,\n bottomAdornment,\n disabled,\n ...props\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const ref = useRef<HTMLInputElement>(null)\n\n const isEditingRef = useRef(false)\n const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n const amountKey = FormKeyHelper.getAmountKey(formType)\n const [value] = useFieldValues(amountKey)\n const { setFieldValue } = useFieldActions()\n const { inputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n let displayValue: string\n if (isEditingRef.current) {\n if (currentInputMode === 'price') {\n displayValue = formattedPriceInput\n } else {\n displayValue = value as string\n }\n } else {\n if (currentInputMode === 'price') {\n const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n displayValue = formatInputAmount(\n priceValue.toFixed(usdDecimals),\n usdDecimals\n )\n } else {\n displayValue = value as string\n }\n }\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = true\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n setFormattedPriceInput(formattedValue)\n setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals, true)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n const handleBlur = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = false\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n setFieldValue(amountKey, formattedAmount, {\n isDirty: true,\n isTouched: true,\n })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change\n useLayoutEffect(() => {\n if (ref.current) {\n fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n }\n }, [displayValue])\n\n const title =\n subvariant === 'custom'\n ? subvariantOptions?.custom === 'deposit'\n ? t('header.amount')\n : t('header.youPay')\n : t('header.send')\n\n return (\n <InputCard {...props}>\n <AmountInputCardHeader>\n <AmountInputCardTitle>{title}</AmountInputCardTitle>\n </AmountInputCardHeader>\n <FormContainer>\n <AmountInputStartAdornment formType={formType} />\n <FormControl fullWidth>\n <Input\n inputRef={ref}\n size=\"small\"\n autoComplete=\"off\"\n placeholder={currentInputMode === 'price' ? '$0' : '0'}\n startAdornment={startAdornment}\n inputProps={{\n inputMode: 'decimal',\n }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={\n currentInputMode === 'price'\n ? displayValue\n ? `$${displayValue}`\n : ''\n : displayValue\n }\n name={amountKey}\n disabled={disabled}\n required\n />\n {bottomAdornment}\n </FormControl>\n </FormContainer>\n {!disabled && <AmountInputEndAdornment formType={formType} />}\n </InputCard>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,MAAa,eAAoD,EAC/D,UACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,iBAAiB;CAExC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;CAEjD,MAAM,WAAW,YAAY,SAAA,aAA+B;AAC5D,QACE,oBAAC,iBAAD;EACY;EACH;EACP,iBAAiB,oBAAC,qBAAD,EAA+B,UAAY,CAAA;EAClD;EACV,GAAI;EACJ,CAAA;;AAIN,MAAM,mBAQD,EACH,UACA,OACA,gBACA,iBACA,UACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,MAAM,OAAyB,KAAK;CAE1C,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,GAAG;CAElE,MAAM,YAAY,cAAc,aAAa,SAAS;CACtD,MAAM,CAAC,SAAS,eAAe,UAAU;CACzC,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,EAAE,cAAc,mBAAmB;CAEzC,MAAM,mBAAmB,UAAU;CACnC,IAAI;AACJ,KAAI,aAAa,QACf,KAAI,qBAAqB,QACvB,gBAAe;KAEf,gBAAe;UAGb,qBAAqB,QAEvB,gBAAe,kBADI,iBAAiB,OAAiB,OAAO,~~SAAS~~,~~CAExD~~,QAAA,EAAoB,EAAA,EAEhC;KAED,gBAAe;CAInB,MAAM,gBACJ,UACG;EACH,MAAM,EAAE,OAAO,eAAe,MAAM;AACpC,eAAa,UAAU;EAEvB,IAAI;AACJ,MAAI,qBAAqB,SAAS;AAEhC,oBAAiB,kBADO,WAAW,QAAQ,KAAK,~~GAAG~~,EAAA,~~GACc~~,KAAK;GACtE,MAAM,aAAa,mBAAmB,gBAAgB,OAAO,SAAS;AACtE,0BAAuB,eAAe;AACtC,iBAAc,WAAW,YAAY;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;SACnE;AACL,oBAAiB,kBAAkB,YAAY,OAAO,UAAU,KAAK;AACrE,iBAAc,WAAW,gBAAgB;IACvC,SAAS;IACT,WAAW;IACZ,CAAC;;;CAIN,MAAM,cACJ,UACG;EACH,MAAM,EAAE,OAAO,eAAe,MAAM;AACpC,eAAa,UAAU;EAEvB,IAAI;AACJ,MAAI,qBAAqB,SAAS;AAEhC,oBAAiB,kBADO,WAAW,QAAQ,KAAK,~~GAAG~~,EAAA,~~EACa~~;AAGhE,iBAAc,WADU,kBADL,mBAAmB,gBAAgB,OAAO,~~SAAS~~,~~EAChB~~,OAAO,~~SAAS~~,~~EAC5B~~;IACxC,SAAS;IACT,WAAW;IACZ,CAAC;SACG;AACL,oBAAiB,kBAAkB,YAAY,OAAO,SAAS;AAC/D,iBAAc,WAAW,gBAAgB;IACvC,SAAS;IACT,WAAW;IACZ,CAAC;;;AAKN,uBAAsB;AACpB,MAAI,IAAI,QACN,cAAA,IAAA,IAAiD,IAAI,QAAQ;IAE9D,CAAC,aAAa,CAAC;CAElB,MAAM,QACJ,eAAe,WACX,mBAAmB,WAAW,YAC5B,EAAE,gBAAgB,GAClB,EAAE,gBAAgB,GACpB,EAAE,cAAc;AAEtB,QACE,qBAAC,WAAD;EAAW,GAAI;YAAf;GACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,sBAAD,EAAA,UAAuB,OAA6B,CAAA,EAC9B,CAAA;GACxB,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,2BAAD,EAAqC,UAAY,CAAA,EACjD,qBAAC,aAAD;IAAa,WAAA;cAAb,CACE,oBAAC,OAAD;KACE,UAAU;KACV,MAAK;KACL,cAAa;KACb,aAAa,qBAAqB,UAAU,OAAO;KACnC;KAChB,YAAY,EACV,WAAW,WACZ;KACD,UAAU;KACV,QAAQ;KACR,OACE,qBAAqB,UACjB,eACE,IAAI,iBACJ,KACF;KAEN,MAAM;KACI;KACV,UAAA;KACA,CAAA,EACD,gBACW;MACA,EAAA,CAAA;GACf,CAAC,YAAY,oBAAC,yBAAD,EAAmC,UAAY,CAAA;GACnD"}
1	+ {"version":3,"file":"AmountInput.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport type { CardProps } from '@mui/material'\nimport type { ChangeEvent, ReactNode } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { DisabledUI } from '../../types/widget.js'\nimport {\n formatInputAmount,\n formatTokenPrice,\n priceToTokenAmount,\n usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { InputCard } from '../Card/InputCard.js'\nimport {\n AmountInputCardHeader,\n AmountInputCardTitle,\n FormContainer,\n FormControl,\n Input,\n maxInputFontSize,\n minInputFontSize,\n} from './AmountInput.style.js'\nimport { AmountInputEndAdornment } from './AmountInputEndAdornment.js'\nimport { AmountInputStartAdornment } from './AmountInputStartAdornment.js'\nimport { PriceFormHelperText } from './PriceFormHelperText.js'\n\nexport const AmountInput: React.FC<FormTypeProps & CardProps> = ({\n formType,\n ...props\n}) => {\n const { disabledUI } = useWidgetConfig()\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n\n const disabled = disabledUI?.includes(DisabledUI.FromAmount)\n return (\n <AmountInputBase\n formType={formType}\n token={token}\n bottomAdornment={<PriceFormHelperText formType={formType} />}\n disabled={disabled}\n {...props}\n />\n )\n}\n\nconst AmountInputBase: React.FC<\n FormTypeProps &\n CardProps & {\n token?: Token\n startAdornment?: ReactNode\n bottomAdornment?: ReactNode\n disabled?: boolean\n }\n> = ({\n formType,\n token,\n startAdornment,\n bottomAdornment,\n disabled,\n ...props\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const ref = useRef<HTMLInputElement>(null)\n\n const isEditingRef = useRef(false)\n const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n const amountKey = FormKeyHelper.getAmountKey(formType)\n const [value] = useFieldValues(amountKey)\n const { setFieldValue } = useFieldActions()\n const { inputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n let displayValue: string\n if (isEditingRef.current) {\n if (currentInputMode === 'price') {\n displayValue = formattedPriceInput\n } else {\n displayValue = value as string\n }\n } else {\n if (currentInputMode === 'price') {\n const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n displayValue = formatInputAmount(\n priceValue.toFixed(usdDecimals),\n usdDecimals\n )\n } else {\n displayValue = value as string\n }\n }\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = true\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n setFormattedPriceInput(formattedValue)\n setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals, true)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n const handleBlur = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ) => {\n const { value: inputValue } = event.target\n isEditingRef.current = false\n\n let formattedValue: string\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n setFieldValue(amountKey, formattedAmount, {\n isDirty: true,\n isTouched: true,\n })\n } else {\n formattedValue = formatInputAmount(inputValue, token?.decimals)\n setFieldValue(amountKey, formattedValue, {\n isDirty: true,\n isTouched: true,\n })\n }\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change\n useLayoutEffect(() => {\n if (ref.current) {\n fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n }\n }, [displayValue])\n\n const title =\n subvariant === 'custom'\n ? subvariantOptions?.custom === 'deposit'\n ? t('header.amount')\n : t('header.youPay')\n : t('header.send')\n\n return (\n <InputCard {...props}>\n <AmountInputCardHeader>\n <AmountInputCardTitle>{title}</AmountInputCardTitle>\n </AmountInputCardHeader>\n <FormContainer>\n <AmountInputStartAdornment formType={formType} />\n <FormControl fullWidth>\n <Input\n inputRef={ref}\n size=\"small\"\n autoComplete=\"off\"\n placeholder={currentInputMode === 'price' ? '$0' : '0'}\n startAdornment={startAdornment}\n inputProps={{\n inputMode: 'decimal',\n }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={\n currentInputMode === 'price'\n ? displayValue\n ? `$${displayValue}`\n : ''\n : displayValue\n }\n name={amountKey}\n disabled={disabled}\n required\n />\n {bottomAdornment}\n </FormControl>\n </FormContainer>\n {!disabled && <AmountInputEndAdornment formType={formType} />}\n </InputCard>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInputStartAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"sourcesContent":["import { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\n\nexport const AmountInputStartAdornment: React.FC<FormTypeProps> = ({\n formType,\n}) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { chain } = useChain(chainId)\n const { token } = useToken(chainId, tokenAddress)\n const isSelected = !!(chain && token)\n\n return isSelected ? (\n <TokenAvatar token={token} chain={chain} />\n ) : (\n <AvatarBadgedDefault />\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAsD,EACjE,eACI;CACJ,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,QAAQ;CACnC,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;AAGjD,~~QAFmB~~,~~CAAC~~,EAAE,SAAS,SAG7B,oBAAC,aAAD;EAAoB;EAAc;EAAS,CAAA,GAE3C,oBAAC,qBAAD,EAAuB,CAAA"}
1	+ {"version":3,"file":"AmountInputStartAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"sourcesContent":["import { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\n\nexport const AmountInputStartAdornment: React.FC<FormTypeProps> = ({\n formType,\n}) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { chain } = useChain(chainId)\n const { token } = useToken(chainId, tokenAddress)\n const isSelected = !!(chain && token)\n\n return isSelected ? (\n <TokenAvatar token={token} chain={chain} />\n ) : (\n <AvatarBadgedDefault />\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAsD,EACjE,eACI;CACJ,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,QAAQ;CACnC,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;AAGjD,QAAO,CAFa,EAAE,SAAS,SAG7B,oBAAC,aAAD;EAAoB;EAAc;EAAS,CAAA,GAE3C,oBAAC,qBAAD,EAAuB,CAAA"}

package/dist/esm/components/AmountInput/PriceFormHelperText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n memo<FormTypeProps>(({ formType }) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n return (\n <PriceFormHelperTextBase\n formType={formType}\n isLoading={isLoading}\n tokenAddress={tokenAddress}\n token={token}\n />\n )\n })\n\nconst PriceFormHelperTextBase: React.FC<\n FormTypeProps & {\n isLoading?: boolean\n tokenAddress?: string\n token?: TokenAmount\n }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n const { t } = useTranslation()\n const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n const { inputMode, toggleInputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n\n const tokenAmount = token\n ? formatTokenAmount(token.amount, token.decimals)\n : '0'\n\n const getPriceAmountDisplayValue = () => {\n if (currentInputMode === 'amount') {\n const tokenPrice = formatTokenPrice(\n amount,\n token?.priceUSD,\n token?.decimals\n )\n return t('format.currency', { value: tokenPrice })\n } else {\n return t('format.tokenAmount', { value: amount \|\| '0' })\n }\n }\n\n const handleToggleMode = (e: React.MouseEvent) => {\n e.stopPropagation()\n toggleInputMode(formType)\n }\n\n return (\n <FormHelperText\n component=\"div\"\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: 0,\n marginLeft: 1.25,\n marginTop: 0.5,\n }}\n >\n <InputPriceButton\n onClick={token?.priceUSD ? handleToggleMode : undefined}\n >\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n marginRight: 0.25,\n maxWidth: 136,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {getPriceAmountDisplayValue()}\n </Typography>\n {currentInputMode === 'price' && token?.symbol ? (\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n wordBreak: 'break-word',\n overflowWrap: 'break-word',\n marginRight: 0.25,\n }}\n >\n {token.symbol}\n </Typography>\n ) : null}\n {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n </InputPriceButton>\n {isLoading && tokenAddress ? (\n <Skeleton variant=\"text\" width={56} height={16} />\n ) : token?.amount ? (\n <Typography\n sx={{\n fontWeight: 500,\n fontSize: 12,\n color: 'text.secondary',\n lineHeight: 1,\n paddingLeft: 0.25,\n }}\n title={tokenAmount}\n >\n {`/ ${t('format.tokenAmount', {\n value: tokenAmount,\n })}`}\n </Typography>\n ) : null}\n </FormHelperText>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,aAAa;AAE1E,QACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;EACP,CAAA;EAEJ;AAEJ,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,SAAS,CAAC;CACrE,MAAM,EAAE,WAAW,oBAAoB,mBAAmB;CAE1D,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,SAAS,GAC/C;CAEJ,MAAM,mCAAmC;AACvC,MAAI,qBAAqB,SAMvB,QAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,~~SACR~~,~~EACgD~~,CAAC;MAElD,QAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,KAAK,CAAC;;CAI5D,MAAM,oBAAoB,MAAwB;AAChD,IAAE,iBAAiB;AACnB,kBAAgB,SAAS;;AAG3B,QACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACZ;YATH,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;MACb;eAEA,4BAA4B;KAClB,CAAA;IACZ,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;MACd;eAEA,MAAM;KACI,CAAA,GACX;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACzC;MAClB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;GAAM,CAAA,GAChD,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;IACd;GACD,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,aACR,CAAC;GACS,CAAA,GACX,KACW"}
1	+ {"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n memo<FormTypeProps>(({ formType }) => {\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n return (\n <PriceFormHelperTextBase\n formType={formType}\n isLoading={isLoading}\n tokenAddress={tokenAddress}\n token={token}\n />\n )\n })\n\nconst PriceFormHelperTextBase: React.FC<\n FormTypeProps & {\n isLoading?: boolean\n tokenAddress?: string\n token?: TokenAmount\n }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n const { t } = useTranslation()\n const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n const { inputMode, toggleInputMode } = useInputModeStore()\n\n const currentInputMode = inputMode[formType]\n\n const tokenAmount = token\n ? formatTokenAmount(token.amount, token.decimals)\n : '0'\n\n const getPriceAmountDisplayValue = () => {\n if (currentInputMode === 'amount') {\n const tokenPrice = formatTokenPrice(\n amount,\n token?.priceUSD,\n token?.decimals\n )\n return t('format.currency', { value: tokenPrice })\n } else {\n return t('format.tokenAmount', { value: amount \|\| '0' })\n }\n }\n\n const handleToggleMode = (e: React.MouseEvent) => {\n e.stopPropagation()\n toggleInputMode(formType)\n }\n\n return (\n <FormHelperText\n component=\"div\"\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: 0,\n marginLeft: 1.25,\n marginTop: 0.5,\n }}\n >\n <InputPriceButton\n onClick={token?.priceUSD ? handleToggleMode : undefined}\n >\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n marginRight: 0.25,\n maxWidth: 136,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {getPriceAmountDisplayValue()}\n </Typography>\n {currentInputMode === 'price' && token?.symbol ? (\n <Typography\n sx={{\n color: 'text.secondary',\n fontWeight: 500,\n fontSize: 12,\n lineHeight: 1,\n wordBreak: 'break-word',\n overflowWrap: 'break-word',\n marginRight: 0.25,\n }}\n >\n {token.symbol}\n </Typography>\n ) : null}\n {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n </InputPriceButton>\n {isLoading && tokenAddress ? (\n <Skeleton variant=\"text\" width={56} height={16} />\n ) : token?.amount ? (\n <Typography\n sx={{\n fontWeight: 500,\n fontSize: 12,\n color: 'text.secondary',\n lineHeight: 1,\n paddingLeft: 0.25,\n }}\n title={tokenAmount}\n >\n {`/ ${t('format.tokenAmount', {\n value: tokenAmount,\n })}`}\n </Typography>\n ) : null}\n </FormHelperText>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,aAAa;AAE1E,QACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;EACP,CAAA;EAEJ;AAEJ,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,SAAS,CAAC;CACrE,MAAM,EAAE,WAAW,oBAAoB,mBAAmB;CAE1D,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,SAAS,GAC/C;CAEJ,MAAM,mCAAmC;AACvC,MAAI,qBAAqB,SAMvB,QAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,SAEsC,EAAE,CAAC;MAElD,QAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,KAAK,CAAC;;CAI5D,MAAM,oBAAoB,MAAwB;AAChD,IAAE,iBAAiB;AACnB,kBAAgB,SAAS;;AAG3B,QACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACZ;YATH,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;MACb;eAEA,4BAA4B;KAClB,CAAA;IACZ,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;MACd;eAEA,MAAM;KACI,CAAA,GACX;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACzC;MAClB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;GAAM,CAAA,GAChD,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;IACd;GACD,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,aACR,CAAC;GACS,CAAA,GACX,KACW"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n maxChainsToOrder,\n maxChainsToShow,\n maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n ChainAvatar,\n ChainCard,\n ChainContainer,\n MoreChainsBox,\n MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const { setFieldValue } = useFieldActions()\n const {\n chainOrder,\n chains,\n isLoading,\n getSelectedChains,\n setChainOrder,\n setCurrentChain,\n } = useChainSelect(formType)\n\n const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n useChainOrderStore((state) => [\n state[`${formType}ShowAllNetworks`],\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n ])\n\n const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n useEffect(() => {\n if (chainId) {\n const hasChainInOrderedList = chainOrder.includes(chainId)\n // If we don't have a chain in the ordered chain list we should add it.\n if (!hasChainInOrderedList) {\n setChainOrder(chainId, formType)\n }\n }\n }, [chainId, chainOrder, formType, setChainOrder])\n\n const onChainSelect = useCallback(\n (selectedChainId: number) => {\n setIsAllNetworks(false, formType)\n setCurrentChain(selectedChainId)\n },\n [setIsAllNetworks, setCurrentChain, formType]\n )\n\n const showAllChains = useCallback(() => {\n navigate({ to: navigationRoutes[`${formType}Chain`] })\n }, [navigate, formType])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', {\n isTouched: true,\n })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n isTouched: true,\n })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n const chainsToHide =\n chains?.length === maxChainsToShow\n ? 0\n : (chains?.length ?? 0) - maxChainsToOrder\n\n const chainsToShow = useMemo(\n () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n [chainsToHide, getSelectedChains, chains]\n )\n\n const tilesCount =\n chainsToShow.length +\n (showAllNetworks ? 1 : 0) +\n (chainsToHide > 0 ? 1 : 0)\n\n if (isLoading) {\n return (\n <ChainContainer itemCount={tilesCount}>\n {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rectangular\"\n width={56}\n height={isMobile ? 36 : 56}\n sx={{ borderRadius: 1 }}\n />\n ))}\n </ChainContainer>\n )\n }\n\n return (\n <ChainContainer itemCount={tilesCount}>\n {showAllNetworks && (\n <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={selectAllNetworks}\n type={isAllNetworks ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <AllChainsAvatar\n chains={chains ?? []}\n size={isMobile ? 'small' : 'medium'}\n />\n </ChainCard>\n </Tooltip>\n )}\n {chainsToShow.map((chain: EVMChain) => (\n <ChainItem\n key={chain.id}\n chain={chain}\n isSelected={chainId === chain.id}\n isAllNetworks={isAllNetworks}\n onSelect={onChainSelect}\n />\n ))}\n {chainsToHide > 0 && (\n <ChainCard component=\"button\" onClick={showAllChains}>\n <MoreChainsBox>\n <MoreChainsText>+{chainsToHide}</MoreChainsText>\n </MoreChainsBox>\n </ChainCard>\n )}\n </ChainContainer>\n )\n }\n)\n\nconst ChainItem = memo(\n ({\n chain,\n isSelected,\n isAllNetworks,\n onSelect,\n }: {\n chain: EVMChain\n isSelected: boolean\n isAllNetworks: boolean\n onSelect: (id: number) => void\n }) => {\n return (\n <Tooltip title={chain.name} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={() => onSelect(chain.id)}\n type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <ChainAvatar src={chain.logoURI} alt={chain.key}>\n {chain.name[0]}\n </ChainAvatar>\n </ChainCard>\n </Tooltip>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,cAAyD,MACnE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,CACpD;CACD,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,EACJ,YACA,QACA,WACA,mBACA,eACA,oBACE,eAAe,SAAS;CAE5B,MAAM,CAAC,iBAAiB,eAAe,oBACrC,oBAAoB,UAAU;EAC5B,MAAM,GAAG,SAAS;EAClB,MAAM,GAAG,SAAS;EAClB,MAAM;EACP,CAAC;CAEJ,MAAM,CAAC,WAAW,eAAe,cAAc,YAAY,SAAS,CAAC;AAErE,iBAAgB;AACd,MAAI;OAGE,CAF0B,WAAW,SAAS,~~QAAQ~~,~~CAGxD~~,eAAc,SAAS,SAAS;;IAGnC;EAAC;EAAS;EAAY;EAAU;EAAc,CAAC;CAElD,MAAM,gBAAgB,aACnB,oBAA4B;AAC3B,mBAAiB,OAAO,SAAS;AACjC,kBAAgB,gBAAgB;IAElC;EAAC;EAAkB;EAAiB;EAAS,CAC9C;CAED,MAAM,gBAAgB,kBAAkB;AACtC,WAAS,EAAE,IAAI,iBAAiB,GAAG,SAAS,SAAS,CAAC;IACrD,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,oBAAoB,kBAAkB;AAC1C,mBAAiB,MAAM,SAAS;AAEhC,gBAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EACrD,WAAW,MACZ,CAAC;AACF,gBAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EACrD,WAAW,MACZ,CAAC;IACD;EAAC;EAAkB;EAAU;EAAc,CAAC;CAE/C,MAAM,eACJ,QAAQ,WAAA,IACJ,KACC,QAAQ,UAAU,KAAA;CAEzB,MAAM,eAAe,eACZ,eAAe,IAAI,mBAAmB,GAAG,WAAW,EAAE,EAC7D;EAAC;EAAc;EAAmB;EAAO,CAC1C;CAED,MAAM,aACJ,aAAa,UACZ,kBAAkB,IAAI,MACtB,eAAe,IAAI,IAAI;AAE1B,KAAI,UACF,QACE,oBAAC,gBAAD;EAAgB,WAAW;YACxB,MAAM,KAAK,EAAE,QAAA,IAA4B,CAAC,CAAC,KAAK,GAAG,UAClD,oBAAC,UAAD;GAEE,SAAQ;GACR,OAAO;GACP,QAAQ,WAAW,KAAK;GACxB,IAAI,EAAE,cAAc,GAAG;GACvB,EALK,MAKL,CACF;EACa,CAAA;AAIrB,QACE,qBAAC,gBAAD;EAAgB,WAAW;YAA3B;GACG,mBACC,oBAAC,SAAD;IAAS,OAAO,EAAE,mBAAmB;IAAE,gBAAgB;cACrD,oBAAC,WAAD;KACE,WAAU;KACV,SAAS;KACT,MAAM,gBAAgB,aAAa;KACnC,gBAAe;eAEf,oBAAC,iBAAD;MACE,QAAQ,UAAU,EAAE;MACpB,MAAM,WAAW,UAAU;MAC3B,CAAA;KACQ,CAAA;IACJ,CAAA;GAEX,aAAa,KAAK,UACjB,oBAAC,WAAD;IAES;IACP,YAAY,YAAY,MAAM;IACf;IACf,UAAU;IACV,EALK,MAAM,GAKX,CACF;GACD,eAAe,KACd,oBAAC,WAAD;IAAW,WAAU;IAAS,SAAS;cACrC,oBAAC,eAAD,EAAA,UACE,qBAAC,gBAAD,EAAA,UAAA,CAAgB,KAAE,aAA8B,EAAA,CAAA,EAClC,CAAA;IACN,CAAA;GAEC;;EAGtB;AAED,MAAM,YAAY,MACf,EACC,OACA,YACA,eACA,eAMI;AACJ,QACE,oBAAC,SAAD;EAAS,OAAO,MAAM;EAAM,gBAAgB;YAC1C,oBAAC,WAAD;GACE,WAAU;GACV,eAAe,SAAS,MAAM,GAAG;GACjC,MAAM,CAAC,iBAAiB,aAAa,aAAa;GAClD,gBAAe;aAEf,oBAAC,aAAD;IAAa,KAAK,MAAM;IAAS,KAAK,MAAM;cACzC,MAAM,KAAK;IACA,CAAA;GACJ,CAAA;EACJ,CAAA;EAGf"}
1	+ {"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n maxChainsToOrder,\n maxChainsToShow,\n maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n ChainAvatar,\n ChainCard,\n ChainContainer,\n MoreChainsBox,\n MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const { setFieldValue } = useFieldActions()\n const {\n chainOrder,\n chains,\n isLoading,\n getSelectedChains,\n setChainOrder,\n setCurrentChain,\n } = useChainSelect(formType)\n\n const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n useChainOrderStore((state) => [\n state[`${formType}ShowAllNetworks`],\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n ])\n\n const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n useEffect(() => {\n if (chainId) {\n const hasChainInOrderedList = chainOrder.includes(chainId)\n // If we don't have a chain in the ordered chain list we should add it.\n if (!hasChainInOrderedList) {\n setChainOrder(chainId, formType)\n }\n }\n }, [chainId, chainOrder, formType, setChainOrder])\n\n const onChainSelect = useCallback(\n (selectedChainId: number) => {\n setIsAllNetworks(false, formType)\n setCurrentChain(selectedChainId)\n },\n [setIsAllNetworks, setCurrentChain, formType]\n )\n\n const showAllChains = useCallback(() => {\n navigate({ to: navigationRoutes[`${formType}Chain`] })\n }, [navigate, formType])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', {\n isTouched: true,\n })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n isTouched: true,\n })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n const chainsToHide =\n chains?.length === maxChainsToShow\n ? 0\n : (chains?.length ?? 0) - maxChainsToOrder\n\n const chainsToShow = useMemo(\n () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n [chainsToHide, getSelectedChains, chains]\n )\n\n const tilesCount =\n chainsToShow.length +\n (showAllNetworks ? 1 : 0) +\n (chainsToHide > 0 ? 1 : 0)\n\n if (isLoading) {\n return (\n <ChainContainer itemCount={tilesCount}>\n {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rectangular\"\n width={56}\n height={isMobile ? 36 : 56}\n sx={{ borderRadius: 1 }}\n />\n ))}\n </ChainContainer>\n )\n }\n\n return (\n <ChainContainer itemCount={tilesCount}>\n {showAllNetworks && (\n <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={selectAllNetworks}\n type={isAllNetworks ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <AllChainsAvatar\n chains={chains ?? []}\n size={isMobile ? 'small' : 'medium'}\n />\n </ChainCard>\n </Tooltip>\n )}\n {chainsToShow.map((chain: EVMChain) => (\n <ChainItem\n key={chain.id}\n chain={chain}\n isSelected={chainId === chain.id}\n isAllNetworks={isAllNetworks}\n onSelect={onChainSelect}\n />\n ))}\n {chainsToHide > 0 && (\n <ChainCard component=\"button\" onClick={showAllChains}>\n <MoreChainsBox>\n <MoreChainsText>+{chainsToHide}</MoreChainsText>\n </MoreChainsBox>\n </ChainCard>\n )}\n </ChainContainer>\n )\n }\n)\n\nconst ChainItem = memo(\n ({\n chain,\n isSelected,\n isAllNetworks,\n onSelect,\n }: {\n chain: EVMChain\n isSelected: boolean\n isAllNetworks: boolean\n onSelect: (id: number) => void\n }) => {\n return (\n <Tooltip title={chain.name} enterNextDelay={100}>\n <ChainCard\n component=\"button\"\n onClick={() => onSelect(chain.id)}\n type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n >\n <ChainAvatar src={chain.logoURI} alt={chain.key}>\n {chain.name[0]}\n </ChainAvatar>\n </ChainCard>\n </Tooltip>\n )\n }\n)\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"sourcesContent":["import type { EVMChain, ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrder } from '../../stores/chains/useChainOrder.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { DisabledUI } from '../../types/widget.js'\n\nexport const useChainSelect = (\n formType: FormType\n): {\n chainOrder: number[]\n chains: ExtendedChain[] \| undefined\n getSelectedChains: () => EVMChain[]\n isLoading: boolean\n setChainOrder: (chainId: number, type: FormType) => void\n setCurrentChain: (chainId: number) => void\n} => {\n const { disabledUI } = useWidgetConfig()\n const chainKey = FormKeyHelper.getChainKey(formType)\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { useExternalWalletProvidersOnly, externalChainTypes } =\n useExternalWalletProvider()\n const { chains, isLoading, getChainById } = useChains(\n formType,\n // If the integrator uses external wallet management and has not opted in for partial wallet management,\n // restrict the displayed chains to those compatible with external wallet management.\n // This ensures users only see chains for which they can sign transactions.\n formType === 'from' && useExternalWalletProvidersOnly\n ? externalChainTypes\n : undefined\n )\n\n const [chainOrder, setChainOrder] = useChainOrder(formType)\n const swapOnly = useSwapOnly()\n const { tryResetToAddress } = useToAddressReset()\n\n const getSelectedChains = useCallback((): EVMChain[] => {\n if (!chains) {\n return []\n }\n const selectedChains = chainOrder\n .map((chainId) => chains.find((chain) => chain.id === chainId))\n .filter(Boolean) as EVMChain[]\n return selectedChains\n }, [chains, chainOrder])\n\n const setCurrentChain = useCallback(\n (chainId: number): void => {\n setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })\n if (swapOnly) {\n setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {\n isTouched: true,\n })\n }\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n if (!disabledUI?.includes(tokenKey as DisabledUI)) {\n setFieldValue(tokenKey, '')\n }\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.includes(amountKey as DisabledUI)) {\n setFieldValue(amountKey, '')\n }\n\n const [toChainId] = getFieldValues('toChain')\n const toChain = getChainById(toChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n setChainOrder(chainId, formType)\n },\n [\n chainKey,\n swapOnly,\n setFieldValue,\n disabledUI,\n formType,\n getChainById,\n tryResetToAddress,\n setChainOrder,\n getFieldValues,\n ]\n )\n\n return {\n chainOrder: chainOrder,\n chains: chains,\n getSelectedChains: getSelectedChains,\n isLoading: isLoading,\n setChainOrder: setChainOrder,\n setCurrentChain: setCurrentChain,\n }\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,kBACX,aAQG;CACH,MAAM,EAAE,eAAe,iBAAiB;CACxC,MAAM,WAAW,cAAc,YAAY,SAAS;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,gCAAgC,uBACtC,2BAA2B;CAC7B,MAAM,EAAE,QAAQ,WAAW,iBAAiB,UAC1C,UAIA,aAAa,UAAU,iCACnB,qBACA,KAAA,EACL;CAED,MAAM,CAAC,YAAY,iBAAiB,cAAc,SAAS;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,sBAAsB,mBAAmB;AAiDjD,QAAO;EACO;EACJ;EACR,mBAlDwB,kBAA8B;AACtD,OAAI,CAAC,OACH,QAAO,EAAE;AAKX,UAHuB,WACpB,KAAK,YAAY,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ,CAAC,CAC9D,OAAO,~~QAAQ~~;~~KAEjB~~,CAAC,QAAQ,WAAW,~~CAAC~~;~~EA2CX~~;EACI;EACf,iBA3CsB,aACrB,YAA0B;AACzB,iBAAc,UAAU,SAAS;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;AACpE,OAAI,SACF,eAAc,cAAc,YAAY,KAAK,EAAE,SAAS,EACtD,WAAW,MACZ,CAAC;GAEJ,MAAM,WAAW,cAAc,YAAY,SAAS;AACpD,OAAI,CAAC,YAAY,SAAS,SAAuB,CAC/C,eAAc,UAAU,GAAG;GAE7B,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,OAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;GAG9B,MAAM,CAAC,aAAa,eAAe,UAAU;GAC7C,MAAM,UAAU,aAAa,UAAU;AACvC,OAAI,QACF,mBAAkB,QAAQ;AAE5B,iBAAc,SAAS,SAAS;KAElC;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,~~CACF~~;~~EASA~~"}
1	+ {"version":3,"file":"useChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"sourcesContent":["import type { EVMChain, ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrder } from '../../stores/chains/useChainOrder.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { DisabledUI } from '../../types/widget.js'\n\nexport const useChainSelect = (\n formType: FormType\n): {\n chainOrder: number[]\n chains: ExtendedChain[] \| undefined\n getSelectedChains: () => EVMChain[]\n isLoading: boolean\n setChainOrder: (chainId: number, type: FormType) => void\n setCurrentChain: (chainId: number) => void\n} => {\n const { disabledUI } = useWidgetConfig()\n const chainKey = FormKeyHelper.getChainKey(formType)\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { useExternalWalletProvidersOnly, externalChainTypes } =\n useExternalWalletProvider()\n const { chains, isLoading, getChainById } = useChains(\n formType,\n // If the integrator uses external wallet management and has not opted in for partial wallet management,\n // restrict the displayed chains to those compatible with external wallet management.\n // This ensures users only see chains for which they can sign transactions.\n formType === 'from' && useExternalWalletProvidersOnly\n ? externalChainTypes\n : undefined\n )\n\n const [chainOrder, setChainOrder] = useChainOrder(formType)\n const swapOnly = useSwapOnly()\n const { tryResetToAddress } = useToAddressReset()\n\n const getSelectedChains = useCallback((): EVMChain[] => {\n if (!chains) {\n return []\n }\n const selectedChains = chainOrder\n .map((chainId) => chains.find((chain) => chain.id === chainId))\n .filter(Boolean) as EVMChain[]\n return selectedChains\n }, [chains, chainOrder])\n\n const setCurrentChain = useCallback(\n (chainId: number): void => {\n setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })\n if (swapOnly) {\n setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {\n isTouched: true,\n })\n }\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n if (!disabledUI?.includes(tokenKey as DisabledUI)) {\n setFieldValue(tokenKey, '')\n }\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.includes(amountKey as DisabledUI)) {\n setFieldValue(amountKey, '')\n }\n\n const [toChainId] = getFieldValues('toChain')\n const toChain = getChainById(toChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n setChainOrder(chainId, formType)\n },\n [\n chainKey,\n swapOnly,\n setFieldValue,\n disabledUI,\n formType,\n getChainById,\n tryResetToAddress,\n setChainOrder,\n getFieldValues,\n ]\n )\n\n return {\n chainOrder: chainOrder,\n chains: chains,\n getSelectedChains: getSelectedChains,\n isLoading: isLoading,\n setChainOrder: setChainOrder,\n setCurrentChain: setCurrentChain,\n }\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,kBACX,aAQG;CACH,MAAM,EAAE,eAAe,iBAAiB;CACxC,MAAM,WAAW,cAAc,YAAY,SAAS;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,gCAAgC,uBACtC,2BAA2B;CAC7B,MAAM,EAAE,QAAQ,WAAW,iBAAiB,UAC1C,UAIA,aAAa,UAAU,iCACnB,qBACA,KAAA,EACL;CAED,MAAM,CAAC,YAAY,iBAAiB,cAAc,SAAS;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,sBAAsB,mBAAmB;AAiDjD,QAAO;EACO;EACJ;EACR,mBAlDwB,kBAA8B;AACtD,OAAI,CAAC,OACH,QAAO,EAAE;AAKX,UAHuB,WACpB,KAAK,YAAY,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ,CAAC,CAC9D,OAAO,QACW;KACpB,CAAC,QAAQ,WAAW,CA0Ce;EACzB;EACI;EACf,iBA3CsB,aACrB,YAA0B;AACzB,iBAAc,UAAU,SAAS;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;AACpE,OAAI,SACF,eAAc,cAAc,YAAY,KAAK,EAAE,SAAS,EACtD,WAAW,MACZ,CAAC;GAEJ,MAAM,WAAW,cAAc,YAAY,SAAS;AACpD,OAAI,CAAC,YAAY,SAAS,SAAuB,CAC/C,eAAc,UAAU,GAAG;GAE7B,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,OAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;GAG9B,MAAM,CAAC,aAAa,eAAe,UAAU;GAC7C,MAAM,UAAU,aAAa,UAAU;AACvC,OAAI,QACF,mBAAkB,QAAQ;AAE5B,iBAAc,SAAS,SAAS;KAElC;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAS+B;EACjC"}

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

@@ -35,7 +35,7 @@ const chainTypeIcons = [
 		defaultChainId: ChainId.TRN
 	}
 ];
-const maxChainAvatarsCount = chainTypeIcons.length;
+const maxChainAvatarsCount = 4;
 const AllChainsAvatar = memo(({ chains, size }) => {
 	const icons = useMemo(() => {
 		const chainsPerChainType = /* @__PURE__ */ new Map();

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 = ~~chainTypeIcons.length~~\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;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB~~,eAAe~~;~~AAE5C~~,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,~~UACjB~~,~~GACkC~~;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;~~IACrE~~,~~CAGC~~,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,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;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}
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;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UAEc,GAAG;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IAGhC,CACpC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,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;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n memo(function SelectChainContent({\n formType,\n onSelect,\n inExpansion,\n }: SelectChainContentProps) {\n const theme = useTheme()\n const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n const elementId = useDefaultElementId()\n const scrollableContainer = useScrollableContainer(elementId ?? '')\n const [selectedChainId] = useFieldValues(\n FormKeyHelper.getChainKey(formType)\n )\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n const filteredChains = useMemo(() => {\n const value = debouncedSearchValue.toLowerCase()\n return value\n ? (chains?.filter((chain) =>\n chain.name.toLowerCase().includes(value)\n ) ?? [])\n : (chains ?? [])\n }, [chains, debouncedSearchValue])\n\n const scrollToTop = useCallback(() => {\n // Scroll widget container to top\n if (!inExpansion && scrollableContainer) {\n scrollableContainer.scrollTop = 0\n }\n }, [inExpansion, scrollableContainer])\n\n const debouncedFilterChains = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearchValue(value)\n scrollToTop()\n }, 250),\n [scrollToTop]\n )\n\n const onSelectChainFallback = useCallback(\n (chain: ExtendedChain) => {\n setCurrentChain(chain.id)\n },\n [setCurrentChain]\n )\n\n const onChange = useCallback(() => {\n const value = inputRef.current?.value \|\| ''\n debouncedFilterChains(value)\n }, [debouncedFilterChains])\n\n const onClear = useCallback(() => {\n setDebouncedSearchValue('')\n scrollToTop()\n }, [scrollToTop])\n\n const listContainerHeight = useMemo(() => {\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const heightValue =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${heightValue} - ${searchHeaderHeight})`\n }, [theme])\n\n return (\n <FullPageContainer disableGutters>\n <ChainSearchInput\n inputRef={inputRef}\n inExpansion={inExpansion}\n onChange={onChange}\n onClear={onClear}\n searchHeaderHeight={searchHeaderHeight}\n />\n <Box\n ref={listRef}\n sx={\n inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n }\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={inExpansion}\n />\n </Box>\n </FullPageContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,~~qBAAqB~~,~~IACyB~~,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;AAChD,SAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;AAEpC,MAAI,CAAC,eAAe,oBAClB,qBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;AAC1B,0BAAwB,MAAM;AAC9B,eAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;AACxB,kBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;AAEjC,wBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;AAChC,0BAAwB,GAAG;AAC3B,eAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;AAKrD,SAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}
1	+ {"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n memo(function SelectChainContent({\n formType,\n onSelect,\n inExpansion,\n }: SelectChainContentProps) {\n const theme = useTheme()\n const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n const elementId = useDefaultElementId()\n const scrollableContainer = useScrollableContainer(elementId ?? '')\n const [selectedChainId] = useFieldValues(\n FormKeyHelper.getChainKey(formType)\n )\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n const filteredChains = useMemo(() => {\n const value = debouncedSearchValue.toLowerCase()\n return value\n ? (chains?.filter((chain) =>\n chain.name.toLowerCase().includes(value)\n ) ?? [])\n : (chains ?? [])\n }, [chains, debouncedSearchValue])\n\n const scrollToTop = useCallback(() => {\n // Scroll widget container to top\n if (!inExpansion && scrollableContainer) {\n scrollableContainer.scrollTop = 0\n }\n }, [inExpansion, scrollableContainer])\n\n const debouncedFilterChains = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearchValue(value)\n scrollToTop()\n }, 250),\n [scrollToTop]\n )\n\n const onSelectChainFallback = useCallback(\n (chain: ExtendedChain) => {\n setCurrentChain(chain.id)\n },\n [setCurrentChain]\n )\n\n const onChange = useCallback(() => {\n const value = inputRef.current?.value \|\| ''\n debouncedFilterChains(value)\n }, [debouncedFilterChains])\n\n const onClear = useCallback(() => {\n setDebouncedSearchValue('')\n scrollToTop()\n }, [scrollToTop])\n\n const listContainerHeight = useMemo(() => {\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const heightValue =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${heightValue} - ${searchHeaderHeight})`\n }, [theme])\n\n return (\n <FullPageContainer disableGutters>\n <ChainSearchInput\n inputRef={inputRef}\n inExpansion={inExpansion}\n onChange={onChange}\n onClear={onClear}\n searchHeaderHeight={searchHeaderHeight}\n />\n <Box\n ref={listRef}\n sx={\n inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n }\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={inExpansion}\n />\n </Box>\n </FullPageContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,qBAC0C,IAAI,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;AAChD,SAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;AAEpC,MAAI,CAAC,eAAe,oBAClB,qBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;AAC1B,0BAAwB,MAAM;AAC9B,eAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;AACxB,kBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;AAEjC,wBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;AAChC,0BAAwB,GAAG;AAC3B,eAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;AAKrD,SAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}

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

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

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,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAA,eACA,kBAAA,UAEA,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,~~CAAC~~;~~YAGlC~~,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}
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,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAA,eACA,kBAAA,UAEA,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAGQ;YAAzC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n getStatusColor,\n IconCircleRoot,\n iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n status: StatusIcon\n size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n status,\n size = iconCircleSize,\n ...rest\n}) => {\n const theme = useTheme()\n const colorConfig = getStatusColor(status, theme)\n const Icon = statusIcons[status]\n\n return (\n <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n <Icon />\n </IconCircleRoot>\n )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,~~UAAU~~,~~CACyB~~;CACjD,MAAM,OAAO,YAAY;AAEzB,QACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,EAAQ,CAAA;EACO,CAAA"}
1	+ {"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n getStatusColor,\n IconCircleRoot,\n iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n status: StatusIcon\n size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n status,\n size = iconCircleSize,\n ...rest\n}) => {\n const theme = useTheme()\n const colorConfig = getStatusColor(status, theme)\n const Icon = statusIcons[status]\n\n return (\n <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n <Icon />\n </IconCircleRoot>\n )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,UACkC,CAAC;CACjD,MAAM,OAAO,YAAY;AAEzB,QACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,EAAQ,CAAA;EACO,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = () => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress'\n )\n setFieldValue('fromAmount', '', { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n // Returning early as a compatible connected wallet was found, and toAddress has been populated\n if (autoPopulatedToAddress) {\n return\n }\n\n // Auto-population applies in certain scenarios, but otherwise,\n // we attempt to reset `toAddress` when bridging across ecosystems\n // fromChainId becomes toChainId after using reverse\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n return (\n <ReverseContainer>\n <IconCard onClick={handleClick}>\n <ArrowForward fontSize=\"inherit\" />\n </IconCard>\n </ReverseContainer>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,EAAE,sBAAsB,mBAAmB;CACjD,MAAM,wBAAwB,0BAA0B;CAExD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,YACD;AACH,gBAAc,cAAc,IAAI,EAAE,WAAW,MAAM,CAAC;AACpD,gBAAc,aAAa,WAAW,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,aAAa,SAAS,EAAE,WAAW,MAAM,CAAC;AACxD,gBAAc,WAAW,aAAa,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,WAAW,WAAW,EAAE,WAAW,MAAM,CAAC;AAWxD,MAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;GAC/B,~~CAAC~~,~~CAIA~~;EAMF,MAAM,UAAU,aAAa,YAAY;AACzC,MAAI,QACF,mBAAkB,QAAQ;;AAG9B,QACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,SAAS;YACjB,oBAAC,cAAD,EAAc,UAAS,WAAY,CAAA;EAC1B,CAAA,EACM,CAAA"}
1	+ {"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = () => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress'\n )\n setFieldValue('fromAmount', '', { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n // Returning early as a compatible connected wallet was found, and toAddress has been populated\n if (autoPopulatedToAddress) {\n return\n }\n\n // Auto-population applies in certain scenarios, but otherwise,\n // we attempt to reset `toAddress` when bridging across ecosystems\n // fromChainId becomes toChainId after using reverse\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n return (\n <ReverseContainer>\n <IconCard onClick={handleClick}>\n <ArrowForward fontSize=\"inherit\" />\n </IconCard>\n </ReverseContainer>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,EAAE,sBAAsB,mBAAmB;CACjD,MAAM,wBAAwB,0BAA0B;CAExD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,YACD;AACH,gBAAc,cAAc,IAAI,EAAE,WAAW,MAAM,CAAC;AACpD,gBAAc,aAAa,WAAW,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,aAAa,SAAS,EAAE,WAAW,MAAM,CAAC;AACxD,gBAAc,WAAW,aAAa,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,WAAW,WAAW,EAAE,WAAW,MAAM,CAAC;AAWxD,MAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;GAC/B,CAGyB,CACxB;EAMF,MAAM,UAAU,aAAa,YAAY;AACzC,MAAI,QACF,mBAAkB,QAAQ;;AAG9B,QACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,SAAS;YACjB,oBAAC,cAAD,EAAc,UAAS,WAAY,CAAA;EAC1B,CAAA,EACM,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI, type RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n route,\n active,\n variant = 'default',\n expanded: defaultExpanded,\n ...other\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions, routeLabels, hiddenUI } =\n useWidgetConfig()\n\n const token: TokenAmount =\n subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : { ...route.toToken, amount: BigInt(route.toAmount) }\n const impactToken: TokenAmount \| undefined =\n subvariant !== 'custom' &&\n !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact)\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : undefined\n\n const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n const mainTag = route.tags?.find(\n (tag) => tag === 'CHEAPEST' \|\| tag === 'FASTEST'\n )\n const tags: string[] = mainTag ? [mainTag] : []\n const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n if (!combinedFeesUSD) {\n tags.push('gasless')\n }\n if (route.steps.length > 1) {\n tags.push('multistep')\n }\n const customLabels = getMatchingLabels(route, routeLabels)\n return [tags, customLabels]\n }, [route.tags, route, routeLabels])\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {subvariant !== 'refuel' && (tags.length \|\| customLabels.length) ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n gap: 1,\n flexWrap: 'wrap',\n }}\n >\n {tags?.map((tag) => {\n const formattedTag = tag.toLowerCase()\n const tooltipKey = `tooltip.${formattedTag}` as any\n const tooltipText = t(tooltipKey)\n const hasTooltip = tooltipText !== tooltipKey\n\n const cardLabel = (\n <CardLabel\n variant={\n tag === 'gasless'\n ? 'success'\n : active\n ? 'secondary'\n : undefined\n }\n key={tag}\n >\n <CardLabelTypography>\n {t(`main.tags.${formattedTag}` as any)}\n </CardLabelTypography>\n </CardLabel>\n )\n\n return hasTooltip ? (\n <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n {cardLabel}\n </Tooltip>\n ) : (\n cardLabel\n )\n })}\n {customLabels.map((label, index) => (\n <CardLabel key={index} sx={label.sx}>\n <CardLabelTypography>{label.text}</CardLabelTypography>\n </CardLabel>\n ))}\n </Box>\n ) : null}\n <RouteToken\n route={route}\n token={token}\n impactToken={impactToken}\n defaultExpanded={defaultExpanded}\n showEssentials\n />\n </Box>\n )\n\n return subvariant === 'refuel' \|\| variant === 'cardless' ? (\n cardContent\n ) : (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n indented\n {...other}\n >\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,mBAAmB,aAAa,aAClD,iBAAiB;CAEnB,MAAM,QACJ,eAAe,YAAY,mBAAmB,WAAW,YACrD;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,SAAS;EAAE;CAC1D,MAAM,cACJ,eAAe,YACf,CAAC,UAAU,SAAA,uBAAuC,GAC9C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,UACxC;EACD,MAAM,OAAiB,UAAU,CAAC,QAAQ,GAAG,EAAE;EAC/C,MAAM,EAAE,oBAAoB,gCAAgC,MAAM;AAClE,MAAI,CAAC,gBACH,MAAK,KAAK,UAAU;AAEtB,MAAI,MAAM,MAAM,SAAS,EACvB,MAAK,KAAK,YAAY;AAGxB,SAAO,CAAC,MADa,kBAAkB,OAAO,~~YAAY~~,~~CAC/B~~;IAC1B;EAAC,MAAM;EAAM;EAAO;EAAY,CAAC;CAEpC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH,CAKG,eAAe,aAAa,KAAK,UAAU,aAAa,UACvD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;IACX;aAPH,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,aAAa;IACtC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,WAAW;IACjC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,eAAsB,EAClB,CAAA;KACZ,EALL,IAKK;AAGd,WAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;KACO,EAFI,IAEJ,GAEV;KAEF,EACD,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,MAA2B,CAAA;IAC7C,EAFI,MAEJ,CACZ,CACE;OACJ,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;GACA,CAAA,CACE;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;EACI,CAAA"}
1	+ {"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI, type RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n route,\n active,\n variant = 'default',\n expanded: defaultExpanded,\n ...other\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions, routeLabels, hiddenUI } =\n useWidgetConfig()\n\n const token: TokenAmount =\n subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : { ...route.toToken, amount: BigInt(route.toAmount) }\n const impactToken: TokenAmount \| undefined =\n subvariant !== 'custom' &&\n !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact)\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : undefined\n\n const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n const mainTag = route.tags?.find(\n (tag) => tag === 'CHEAPEST' \|\| tag === 'FASTEST'\n )\n const tags: string[] = mainTag ? [mainTag] : []\n const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n if (!combinedFeesUSD) {\n tags.push('gasless')\n }\n if (route.steps.length > 1) {\n tags.push('multistep')\n }\n const customLabels = getMatchingLabels(route, routeLabels)\n return [tags, customLabels]\n }, [route.tags, route, routeLabels])\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {subvariant !== 'refuel' && (tags.length \|\| customLabels.length) ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n gap: 1,\n flexWrap: 'wrap',\n }}\n >\n {tags?.map((tag) => {\n const formattedTag = tag.toLowerCase()\n const tooltipKey = `tooltip.${formattedTag}` as any\n const tooltipText = t(tooltipKey)\n const hasTooltip = tooltipText !== tooltipKey\n\n const cardLabel = (\n <CardLabel\n variant={\n tag === 'gasless'\n ? 'success'\n : active\n ? 'secondary'\n : undefined\n }\n key={tag}\n >\n <CardLabelTypography>\n {t(`main.tags.${formattedTag}` as any)}\n </CardLabelTypography>\n </CardLabel>\n )\n\n return hasTooltip ? (\n <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n {cardLabel}\n </Tooltip>\n ) : (\n cardLabel\n )\n })}\n {customLabels.map((label, index) => (\n <CardLabel key={index} sx={label.sx}>\n <CardLabelTypography>{label.text}</CardLabelTypography>\n </CardLabel>\n ))}\n </Box>\n ) : null}\n <RouteToken\n route={route}\n token={token}\n impactToken={impactToken}\n defaultExpanded={defaultExpanded}\n showEssentials\n />\n </Box>\n )\n\n return subvariant === 'refuel' \|\| variant === 'cardless' ? (\n cardContent\n ) : (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n indented\n {...other}\n >\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,mBAAmB,aAAa,aAClD,iBAAiB;CAEnB,MAAM,QACJ,eAAe,YAAY,mBAAmB,WAAW,YACrD;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,SAAS;EAAE;CAC1D,MAAM,cACJ,eAAe,YACf,CAAC,UAAU,SAAA,uBAAuC,GAC9C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,UACxC;EACD,MAAM,OAAiB,UAAU,CAAC,QAAQ,GAAG,EAAE;EAC/C,MAAM,EAAE,oBAAoB,gCAAgC,MAAM;AAClE,MAAI,CAAC,gBACH,MAAK,KAAK,UAAU;AAEtB,MAAI,MAAM,MAAM,SAAS,EACvB,MAAK,KAAK,YAAY;AAGxB,SAAO,CAAC,MADa,kBAAkB,OAAO,YACpB,CAAC;IAC1B;EAAC,MAAM;EAAM;EAAO;EAAY,CAAC;CAEpC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH,CAKG,eAAe,aAAa,KAAK,UAAU,aAAa,UACvD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;IACX;aAPH,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,aAAa;IACtC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,WAAW;IACjC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,eAAsB,EAClB,CAAA;KACZ,EALL,IAKK;AAGd,WAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;KACO,EAFI,IAEJ,GAEV;KAEF,EACD,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,MAA2B,CAAA;IAC7C,EAFI,MAEJ,CACZ,CACE;OACJ,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;GACA,CAAA,CACE;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;EACI,CAAA"}

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

@@ -100,7 +100,7 @@ const SendToWalletButton = (props) => {
 					title: headerTitle,
 					subheader: headerSubheader,
 					selected: !!toAddressFieldValue || disabledToAddress,
-					action: !!toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
+					action: toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
 						onClick: clearSelectedBookmark,
 						size: "small",
 						children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "inherit" })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n SendToWalletCardHeader,\n SendToWalletCardTitleRow,\n SendToWalletRequiredLabel,\n SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const {\n disabledUI,\n hiddenUI,\n toAddress,\n toAddresses,\n subvariant,\n subvariantOptions,\n } = useWidgetConfig()\n const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n 'toAddress',\n 'toChain',\n 'toToken'\n )\n const { setFieldValue } = useFieldActions()\n const { selectedBookmark } = useBookmarks()\n const { setSelectedBookmark } = useBookmarkActions()\n const { accounts } = useAccount()\n const { getChainTypeFromAddress } = useChainTypeFromAddress()\n const { requiredToAddress } = useToAddressRequirements()\n const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n const address = toAddressFieldValue\n ? shortenAddress(toAddressFieldValue)\n : t('sendToWallet.enterAddress', {\n context: 'short',\n })\n\n const matchingConnectedAccount = accounts.find(\n (account) => account.address === toAddressFieldValue\n )\n\n const chainType = !matchingConnectedAccount\n ? selectedBookmark?.chainType \|\|\n (toAddressFieldValue\n ? getChainTypeFromAddress(toAddressFieldValue)\n : undefined)\n : undefined\n\n const chainId =\n toChainId && toTokenAddress\n ? toChainId\n : matchingConnectedAccount\n ? matchingConnectedAccount.chainId\n : chainType\n ? defaultChainIdsByType[chainType]\n : undefined\n\n const isConnectedAccount =\n selectedBookmark?.isConnectedAccount &&\n matchingConnectedAccount?.isConnected\n const connectedAccountName = matchingConnectedAccount?.connector?.name\n const bookmarkName = selectedBookmark?.name\n\n const headerTitle = isConnectedAccount\n ? connectedAccountName \|\| address\n : bookmarkName \|\| connectedAccountName \|\| address\n\n const headerSubheader =\n isConnectedAccount \|\| bookmarkName \|\| connectedAccountName ? address : null\n\n const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n const handleOnClick = () => {\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n }\n\n const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setFieldValue('toAddress', '', { isTouched: true })\n setSelectedBookmark()\n }\n\n // The collapse opens instantly on first page load/component mount when there is an address to display\n // After which it needs an animated transition for open and closing.\n // collapseTransitionTime is used specify the transition time for opening and closing\n const collapseTransitionTime = useRef(0)\n\n // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n useEffect(() => {\n const timeout = setTimeout(() => {\n collapseTransitionTime.current = 225\n }, 0)\n return () => clearTimeout(timeout)\n }, [])\n\n const isOpenCollapse =\n !hiddenToAddress && (requiredToAddress \|\| !!toAddressFieldValue)\n\n const title =\n subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n ? t('header.depositTo')\n : t('header.sendToWallet')\n\n return (\n <Collapse\n timeout={collapseTransitionTime.current as number}\n in={isOpenCollapse}\n mountOnEnter\n unmountOnExit\n >\n <Card\n role=\"button\"\n onClick={disabledForChanges ? undefined : handleOnClick}\n sx={{ width: '100%', ...props.sx }}\n >\n <SendToWalletCardTitleRow>\n <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n {requiredToAddress && !toAddressFieldValue ? (\n <SendToWalletRequiredLabel variant=\"warning\">\n <WarningRounded sx={{ fontSize: 14 }} />\n <SendToWalletRequiredLabelText type=\"icon\">\n {t('sendToWallet.required')}\n </SendToWalletRequiredLabelText>\n </SendToWalletRequiredLabel>\n ) : null}\n </SendToWalletCardTitleRow>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <SendToWalletCardHeader\n avatar={\n <AccountAvatar\n chainId={chainId}\n account={matchingConnectedAccount}\n toAddress={toAddress}\n empty={!toAddressFieldValue}\n />\n }\n title={headerTitle}\n subheader={headerSubheader}\n selected={!!toAddressFieldValue \|\| disabledToAddress}\n action={\n !!toAddressFieldValue && !disabledForChanges ? (\n <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n <CloseRounded fontSize=\"inherit\" />\n </CardIconButton>\n ) : null\n }\n />\n </Box>\n </Card>\n </Collapse>\n )\n}\n"],"mappings":"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~~CAAC,CAAC,~~uBAAuB,CAAC,~~qBACxB~~,oBAAC,gBAAD;MAAgB,SAAS;MAAuB,MAAK;gBACnD,oBAAC,cAAD,EAAc,UAAS,WAAY,CAAA;MACpB,CAAA,GACf;KAEN,CAAA;IACE,CAAA,CACD;;EACE,CAAA"}
1	+ {"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n SendToWalletCardHeader,\n SendToWalletCardTitleRow,\n SendToWalletRequiredLabel,\n SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const {\n disabledUI,\n hiddenUI,\n toAddress,\n toAddresses,\n subvariant,\n subvariantOptions,\n } = useWidgetConfig()\n const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n 'toAddress',\n 'toChain',\n 'toToken'\n )\n const { setFieldValue } = useFieldActions()\n const { selectedBookmark } = useBookmarks()\n const { setSelectedBookmark } = useBookmarkActions()\n const { accounts } = useAccount()\n const { getChainTypeFromAddress } = useChainTypeFromAddress()\n const { requiredToAddress } = useToAddressRequirements()\n const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n const address = toAddressFieldValue\n ? shortenAddress(toAddressFieldValue)\n : t('sendToWallet.enterAddress', {\n context: 'short',\n })\n\n const matchingConnectedAccount = accounts.find(\n (account) => account.address === toAddressFieldValue\n )\n\n const chainType = !matchingConnectedAccount\n ? selectedBookmark?.chainType \|\|\n (toAddressFieldValue\n ? getChainTypeFromAddress(toAddressFieldValue)\n : undefined)\n : undefined\n\n const chainId =\n toChainId && toTokenAddress\n ? toChainId\n : matchingConnectedAccount\n ? matchingConnectedAccount.chainId\n : chainType\n ? defaultChainIdsByType[chainType]\n : undefined\n\n const isConnectedAccount =\n selectedBookmark?.isConnectedAccount &&\n matchingConnectedAccount?.isConnected\n const connectedAccountName = matchingConnectedAccount?.connector?.name\n const bookmarkName = selectedBookmark?.name\n\n const headerTitle = isConnectedAccount\n ? connectedAccountName \|\| address\n : bookmarkName \|\| connectedAccountName \|\| address\n\n const headerSubheader =\n isConnectedAccount \|\| bookmarkName \|\| connectedAccountName ? address : null\n\n const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n const handleOnClick = () => {\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n }\n\n const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setFieldValue('toAddress', '', { isTouched: true })\n setSelectedBookmark()\n }\n\n // The collapse opens instantly on first page load/component mount when there is an address to display\n // After which it needs an animated transition for open and closing.\n // collapseTransitionTime is used specify the transition time for opening and closing\n const collapseTransitionTime = useRef(0)\n\n // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n useEffect(() => {\n const timeout = setTimeout(() => {\n collapseTransitionTime.current = 225\n }, 0)\n return () => clearTimeout(timeout)\n }, [])\n\n const isOpenCollapse =\n !hiddenToAddress && (requiredToAddress \|\| !!toAddressFieldValue)\n\n const title =\n subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n ? t('header.depositTo')\n : t('header.sendToWallet')\n\n return (\n <Collapse\n timeout={collapseTransitionTime.current as number}\n in={isOpenCollapse}\n mountOnEnter\n unmountOnExit\n >\n <Card\n role=\"button\"\n onClick={disabledForChanges ? undefined : handleOnClick}\n sx={{ width: '100%', ...props.sx }}\n >\n <SendToWalletCardTitleRow>\n <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n {requiredToAddress && !toAddressFieldValue ? (\n <SendToWalletRequiredLabel variant=\"warning\">\n <WarningRounded sx={{ fontSize: 14 }} />\n <SendToWalletRequiredLabelText type=\"icon\">\n {t('sendToWallet.required')}\n </SendToWalletRequiredLabelText>\n </SendToWalletRequiredLabel>\n ) : null}\n </SendToWalletCardTitleRow>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <SendToWalletCardHeader\n avatar={\n <AccountAvatar\n chainId={chainId}\n account={matchingConnectedAccount}\n toAddress={toAddress}\n empty={!toAddressFieldValue}\n />\n }\n title={headerTitle}\n subheader={headerSubheader}\n selected={!!toAddressFieldValue \|\| disabledToAddress}\n action={\n toAddressFieldValue && !disabledForChanges ? (\n <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n <CloseRounded fontSize=\"inherit\" />\n </CardIconButton>\n ) : null\n }\n />\n </Box>\n </Card>\n </Collapse>\n )\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n AppExpandedContainer,\n FlexContainer,\n RelativeContainer,\n} from '../AppContainer.js'\nimport {\n SkeletonAmountContainer,\n SkeletonCard,\n SkeletonCardRow,\n SkeletonHeaderAppBar,\n SkeletonHeaderContainer,\n SkeletonInputCard,\n SkeletonPoweredByContainer,\n SkeletonReviewButton,\n SkeletonReviewButtonContainer,\n SkeletonSendToWalletButton,\n SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n <SkeletonWalletMenuButtonContainer>\n <Skeleton width={98} height={24} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n titleWidth?: number\n placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n titleWidth = 36,\n placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n <SkeletonCard elevation={0}>\n <Skeleton width={titleWidth} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n </SkeletonCardRow>\n </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n <SkeletonInputCard elevation={0}>\n <Skeleton width={55} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <SkeletonAmountContainer>\n <Skeleton\n width={48}\n height={37}\n variant=\"text\"\n sx={{ marginTop: -0.75 }}\n />\n <Skeleton width={48} height={12} variant=\"text\" />\n </SkeletonAmountContainer>\n </SkeletonCardRow>\n </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n config,\n}: WidgetConfigPartialProps): JSX.Element => {\n const appearance = config?.appearance\n const hiddenUI = config?.hiddenUI \|\| []\n const requiredUI = config?.requiredUI \|\| []\n const configTheme = config?.theme\n const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n const appearanceMode =\n !appearance \|\| appearance === 'system'\n ? prefersDarkMode\n ? 'dark'\n : 'light'\n : appearance\n\n const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n return (\n <ThemeProvider\n theme={theme}\n defaultMode={appearanceMode}\n modeStorageKey=\"li.fi-widget-mode\"\n colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n disableTransitionOnChange\n >\n <AppExpandedContainer>\n <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n <SkeletonHeaderContainer>\n {!hiddenUI.includes('walletMenu') ? (\n <SkeletonHeaderAppBar>\n <SkeletonWalletMenuButton />\n </SkeletonHeaderAppBar>\n ) : null}\n <SkeletonHeaderAppBar\n sx={{ justifyContent: 'space-between', height: 52 }}\n >\n <Skeleton width={124} height={36} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonHeaderAppBar>\n </SkeletonHeaderContainer>\n\n <FlexContainer\n sx={{\n gap: 2,\n paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,\n }}\n >\n <SkeletonSelectCard />\n <SkeletonSelectCard />\n <SkeletonYouPayCard />\n {requiredUI.includes('toAddress') ? (\n <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n ) : null}\n <SkeletonReviewButtonContainer>\n <SkeletonReviewButton variant=\"contained\" fullWidth>\n  \n </SkeletonReviewButton>\n {!requiredUI.includes('toAddress') ? (\n <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n  \n </SkeletonSendToWalletButton>\n ) : null}\n </SkeletonReviewButtonContainer>\n </FlexContainer>\n {!hiddenUI.includes('poweredBy') ? (\n <SkeletonPoweredByContainer>\n <Skeleton width={96} height={18} variant=\"text\" />\n </SkeletonPoweredByContainer>\n ) : null}\n </RelativeContainer>\n </AppExpandedContainer>\n </ThemeProvider>\n )\n}\n"],"mappings":";;;;;;;AAuBA,MAAM,qBAAqB,oBAAC,UAAD;CAAU,OAAO;CAAI,QAAQ;CAAI,SAAQ;CAAY,CAAA;AAChF,MAAM,iCACJ,qBAAC,mCAAD,EAAA,UAAA,CACE,oBAAC,UAAD;CAAU,OAAO;CAAI,QAAQ;CAAI,SAAQ;CAAS,CAAA,EAClD,oBAAC,cAAD,EAAgB,CAAA,CACkB,EAAA,CAAA;AAOtC,MAAM,sBAAsB,EAC1B,aAAa,IACb,mBAAmB,UAEnB,qBAAC,cAAD;CAAc,WAAW;WAAzB,CACE,oBAAC,UAAD;EAAU,OAAO;EAAY,QAAQ;EAAI,SAAQ;EAAS,CAAA,EAC1D,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAa,CAAA,EACtD,oBAAC,UAAD;EAAU,OAAO;EAAkB,QAAQ;EAAI,SAAQ;EAAS,CAAA,CAChD,EAAA,CAAA,CACL;;AAGjB,MAAM,2BACJ,qBAAC,mBAAD;CAAmB,WAAW;WAA9B,CACE,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAS,CAAA,EAClD,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAa,CAAA,EACtD,qBAAC,yBAAD,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,IAAI,EAAE,WAAW,MAAO;EACxB,CAAA,EACF,oBAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAS,CAAA,CAC1B,EAAA,CAAA,CACV,EAAA,CAAA,CACA;;AAGtB,MAAa,kBAAkB,EAC7B,aAC2C;CAC3C,MAAM,aAAa,QAAQ;CAC3B,MAAM,WAAW,QAAQ,YAAY,EAAE;CACvC,MAAM,aAAa,QAAQ,cAAc,EAAE;CAC3C,MAAM,cAAc,QAAQ;CAC5B,MAAM,kBAAkB,cAAc,+BAA+B;CACrE,MAAM,iBACJ,CAAC,cAAc,eAAe,WAC1B,kBACE,SACA,UACF;AAIN,QACE,oBAAC,eAAD;EACE,OAJU,cAAcA,cAAY,YAAY,EAAE,CAAC,YAAY,~~CAAC~~;~~EAKhE~~,aAAa;EACb,gBAAe;EACf,uBAAsB;EACtB,2BAAA;YAEA,oBAAC,sBAAD,EAAA,UACE,qBAAC,mBAAD;GAAmB,IAAI;IAAE,SAAS;IAAQ,eAAe;IAAU;aAAnE;IACE,qBAAC,yBAAD,EAAA,UAAA,CACG,CAAC,SAAS,SAAS,aAAa,GAC/B,oBAAC,sBAAD,EAAA,UACE,oBAAC,0BAAD,EAA4B,CAAA,EACP,CAAA,GACrB,MACJ,qBAAC,sBAAD;KACE,IAAI;MAAE,gBAAgB;MAAiB,QAAQ;MAAI;eADrD,CAGE,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,EACnD,oBAAC,cAAD,EAAgB,CAAA,CACK;OACC,EAAA,CAAA;IAE1B,qBAAC,eAAD;KACE,IAAI;MACF,KAAK;MACL,eAAe,SAAS,SAAS,YAAY,GAAG,IAAI;MACrD;eAJH;MAME,oBAAC,oBAAD,EAAsB,CAAA;MACtB,oBAAC,oBAAD,EAAsB,CAAA;MACtB,oBAAC,oBAAD,EAAsB,CAAA;MACrB,WAAW,SAAS,YAAY,GAC/B,oBAAC,oBAAD;OAAoB,YAAY;OAAK,kBAAkB;OAAO,CAAA,GAC5D;MACJ,qBAAC,+BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;OAAsB,SAAQ;OAAY,WAAA;iBAAU;OAE7B,CAAA,EACtB,CAAC,WAAW,SAAS,YAAY,GAChC,oBAAC,4BAAD;OAA4B,SAAQ;OAAO,WAAA;iBAAU;OAExB,CAAA,GAC3B,KAC0B,EAAA,CAAA;MAClB;;IACf,CAAC,SAAS,SAAS,YAAY,GAC9B,oBAAC,4BAAD,EAAA,UACE,oBAAC,UAAD;KAAU,OAAO;KAAI,QAAQ;KAAI,SAAQ;KAAS,CAAA,EACvB,CAAA,GAC3B;IACc;MACC,CAAA;EACT,CAAA"}
1	+ {"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n AppExpandedContainer,\n FlexContainer,\n RelativeContainer,\n} from '../AppContainer.js'\nimport {\n SkeletonAmountContainer,\n SkeletonCard,\n SkeletonCardRow,\n SkeletonHeaderAppBar,\n SkeletonHeaderContainer,\n SkeletonInputCard,\n SkeletonPoweredByContainer,\n SkeletonReviewButton,\n SkeletonReviewButtonContainer,\n SkeletonSendToWalletButton,\n SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n <SkeletonWalletMenuButtonContainer>\n <Skeleton width={98} height={24} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n titleWidth?: number\n placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n titleWidth = 36,\n placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n <SkeletonCard elevation={0}>\n <Skeleton width={titleWidth} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n </SkeletonCardRow>\n </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n <SkeletonInputCard elevation={0}>\n <Skeleton width={55} height={22} variant=\"text\" />\n <SkeletonCardRow>\n <Skeleton width={40} height={40} variant=\"circular\" />\n <SkeletonAmountContainer>\n <Skeleton\n width={48}\n height={37}\n variant=\"text\"\n sx={{ marginTop: -0.75 }}\n />\n <Skeleton width={48} height={12} variant=\"text\" />\n </SkeletonAmountContainer>\n </SkeletonCardRow>\n </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n config,\n}: WidgetConfigPartialProps): JSX.Element => {\n const appearance = config?.appearance\n const hiddenUI = config?.hiddenUI \|\| []\n const requiredUI = config?.requiredUI \|\| []\n const configTheme = config?.theme\n const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n const appearanceMode =\n !appearance \|\| appearance === 'system'\n ? prefersDarkMode\n ? 'dark'\n : 'light'\n : appearance\n\n const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n return (\n <ThemeProvider\n theme={theme}\n defaultMode={appearanceMode}\n modeStorageKey=\"li.fi-widget-mode\"\n colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n disableTransitionOnChange\n >\n <AppExpandedContainer>\n <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n <SkeletonHeaderContainer>\n {!hiddenUI.includes('walletMenu') ? (\n <SkeletonHeaderAppBar>\n <SkeletonWalletMenuButton />\n </SkeletonHeaderAppBar>\n ) : null}\n <SkeletonHeaderAppBar\n sx={{ justifyContent: 'space-between', height: 52 }}\n >\n <Skeleton width={124} height={36} variant=\"text\" />\n <SkeletonIcon />\n </SkeletonHeaderAppBar>\n </SkeletonHeaderContainer>\n\n <FlexContainer\n sx={{\n gap: 2,\n paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,\n }}\n >\n <SkeletonSelectCard />\n <SkeletonSelectCard />\n <SkeletonYouPayCard />\n {requiredUI.includes('toAddress') ? (\n <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n ) : null}\n <SkeletonReviewButtonContainer>\n <SkeletonReviewButton variant=\"contained\" fullWidth>\n  \n </SkeletonReviewButton>\n {!requiredUI.includes('toAddress') ? (\n <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n  \n </SkeletonSendToWalletButton>\n ) : null}\n </SkeletonReviewButtonContainer>\n </FlexContainer>\n {!hiddenUI.includes('poweredBy') ? (\n <SkeletonPoweredByContainer>\n <Skeleton width={96} height={18} variant=\"text\" />\n </SkeletonPoweredByContainer>\n ) : null}\n </RelativeContainer>\n </AppExpandedContainer>\n </ThemeProvider>\n )\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.js","names":["Step","Card"],"sources":["../../../../src/components/Step/Step.tsx"],"sourcesContent":["import type {\n ExecutionActionType,\n LiFiStepExtended,\n TokenAmount,\n} from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActions } from '../../components/StepActions/StepActions.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { StepTimer } from '../Timer/StepTimer.js'\nimport { DestinationWalletAddress } from './DestinationWalletAddress.js'\nimport { StepAction } from './StepAction.js'\n\nexport const Step: React.FC<{\n step: LiFiStepExtended\n fromToken?: TokenAmount\n toToken?: TokenAmount\n impactToken?: TokenAmount\n toAddress?: string\n}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const { getAddressLink } = useExplorer()\n\n // If execution status is failed outside of actions scope,\n // show a synthetic action to represent the failed execution\n const actions = step.execution?.actions ?? []\n const failedWithoutActions =\n step.execution?.status === 'FAILED' &&\n !actions.some((a) => a.status === 'FAILED')\n\n const getCardTitle = () => {\n const hasBridgeStep = step.includedSteps.some(\n (step) => step.type === 'cross'\n )\n const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')\n const hasCustomStep = step.includedSteps.some(\n (step) => step.type === 'custom'\n )\n\n const isCustomVariant = hasCustomStep && subvariant === 'custom'\n\n if (hasBridgeStep && hasSwapStep) {\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepBridgeAndDeposit')\n : t('main.stepBridgeAndBuy')\n : t('main.stepSwapAndBridge')\n }\n if (hasBridgeStep) {\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepBridgeAndDeposit')\n : t('main.stepBridgeAndBuy')\n : t('main.stepBridge')\n }\n if (hasSwapStep) {\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepSwapAndDeposit')\n : t('main.stepSwapAndBuy')\n : t('main.stepSwap')\n }\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepDeposit')\n : t('main.stepBuy')\n : t('main.stepSwap')\n }\n\n const formattedToAddress = shortenAddress(toAddress)\n const toAddressLink = toAddress\n ? getAddressLink(toAddress, step.action.toChainId)\n : undefined\n\n return (\n <Card type={step.execution?.status === 'FAILED' ? 'error' : 'default'}>\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n }}\n >\n <CardTitle sx={{ flex: 1 }}>{getCardTitle()}</CardTitle>\n <Box sx={{ p: 2, pb: 0, fontSize: 14, fontWeight: 600 }}>\n <StepTimer step={step} />\n </Box>\n </Box>\n <Box\n sx={{\n py: 1,\n }}\n >\n {fromToken ? <Token token={fromToken} sx={{ px: 2, py: 1 }} /> : null}\n <StepActions step={step} sx={{ px: 2, py: 1 }} dense />\n {prepareActions(step.execution?.actions ?? []).map(\n (actionsGroup, index) => (\n <StepAction key={index} step={step} actionsGroup={actionsGroup} />\n )\n )}\n {failedWithoutActions ? (\n <StepAction\n step={step}\n actionsGroup={[\n {\n status: 'FAILED',\n type: 'EXECUTION' as ExecutionActionType, // synthetic action to represent a failed execution with no actions\n error: step.execution?.error,\n },\n ]}\n />\n ) : null}\n {formattedToAddress && toAddressLink ? (\n <DestinationWalletAddress\n step={step}\n toAddress={formattedToAddress}\n toAddressLink={toAddressLink}\n />\n ) : null}\n {toToken ? (\n <Token\n token={toToken}\n impactToken={impactToken}\n enableImpactTokenTooltip\n sx={{ px: 2, py: 1 }}\n />\n ) : null}\n </Box>\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAaA,UAMP,EAAE,MAAM,WAAW,SAAS,aAAa,gBAAgB;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,mBAAmB,aAAa;CAIxC,MAAM,UAAU,KAAK,WAAW,WAAW,EAAE;CAC7C,MAAM,uBACJ,KAAK,WAAW,WAAW,YAC3B,CAAC,QAAQ,MAAM,MAAM,EAAE,WAAW,SAAS;CAE7C,MAAM,qBAAqB;EACzB,MAAM,gBAAgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,QACzB;EACD,MAAM,cAAc,KAAK,cAAc,MAAM,SAAS,KAAK,SAAS,OAAO;EAK3E,MAAM,kBAJgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,~~SACzB~~,~~IAEwC~~,eAAe;AAExD,MAAI,iBAAiB,YACnB,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,yBAAyB;AAEjC,MAAI,cACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,kBAAkB;AAE1B,MAAI,YACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,0BAA0B,GAC5B,EAAE,sBAAsB,GAC1B,EAAE,gBAAgB;AAExB,SAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,mBAAmB,GACrB,EAAE,eAAe,GACnB,EAAE,gBAAgB;;CAGxB,MAAM,qBAAqB,eAAe,UAAU;CACpD,MAAM,gBAAgB,YAClB,eAAe,WAAW,KAAK,OAAO,UAAU,GAChD,KAAA;AAEJ,QACE,qBAACC,QAAD;EAAM,MAAM,KAAK,WAAW,WAAW,WAAW,UAAU;YAA5D,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,MAAM;IACP;aAJH,CAME,oBAAC,WAAD;IAAW,IAAI,EAAE,MAAM,GAAG;cAAG,cAAc;IAAa,CAAA,EACxD,oBAAC,KAAD;IAAK,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG,UAAU;KAAI,YAAY;KAAK;cACrD,oBAAC,WAAD,EAAiB,MAAQ,CAAA;IACrB,CAAA,CACF;MACN,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,GACL;aAHH;IAKG,YAAY,oBAAC,OAAD;KAAO,OAAO;KAAW,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAI,CAAA,GAAG;IACjE,oBAAC,aAAD;KAAmB;KAAM,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAE,OAAA;KAAQ,CAAA;IACtD,eAAe,KAAK,WAAW,WAAW,EAAE,CAAC,CAAC,KAC5C,cAAc,UACb,oBAAC,YAAD;KAA8B;KAAoB;KAAgB,EAAjD,MAAiD,CAErE;IACA,uBACC,oBAAC,YAAD;KACQ;KACN,cAAc,CACZ;MACE,QAAQ;MACR,MAAM;MACN,OAAO,KAAK,WAAW;MACxB,CACF;KACD,CAAA,GACA;IACH,sBAAsB,gBACrB,oBAAC,0BAAD;KACQ;KACN,WAAW;KACI;KACf,CAAA,GACA;IACH,UACC,oBAAC,OAAD;KACE,OAAO;KACM;KACb,0BAAA;KACA,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KACpB,CAAA,GACA;IACA;KACD"}
1	+ {"version":3,"file":"Step.js","names":["Step","Card"],"sources":["../../../../src/components/Step/Step.tsx"],"sourcesContent":["import type {\n ExecutionActionType,\n LiFiStepExtended,\n TokenAmount,\n} from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActions } from '../../components/StepActions/StepActions.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { StepTimer } from '../Timer/StepTimer.js'\nimport { DestinationWalletAddress } from './DestinationWalletAddress.js'\nimport { StepAction } from './StepAction.js'\n\nexport const Step: React.FC<{\n step: LiFiStepExtended\n fromToken?: TokenAmount\n toToken?: TokenAmount\n impactToken?: TokenAmount\n toAddress?: string\n}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const { getAddressLink } = useExplorer()\n\n // If execution status is failed outside of actions scope,\n // show a synthetic action to represent the failed execution\n const actions = step.execution?.actions ?? []\n const failedWithoutActions =\n step.execution?.status === 'FAILED' &&\n !actions.some((a) => a.status === 'FAILED')\n\n const getCardTitle = () => {\n const hasBridgeStep = step.includedSteps.some(\n (step) => step.type === 'cross'\n )\n const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')\n const hasCustomStep = step.includedSteps.some(\n (step) => step.type === 'custom'\n )\n\n const isCustomVariant = hasCustomStep && subvariant === 'custom'\n\n if (hasBridgeStep && hasSwapStep) {\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepBridgeAndDeposit')\n : t('main.stepBridgeAndBuy')\n : t('main.stepSwapAndBridge')\n }\n if (hasBridgeStep) {\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepBridgeAndDeposit')\n : t('main.stepBridgeAndBuy')\n : t('main.stepBridge')\n }\n if (hasSwapStep) {\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepSwapAndDeposit')\n : t('main.stepSwapAndBuy')\n : t('main.stepSwap')\n }\n return isCustomVariant\n ? subvariantOptions?.custom === 'deposit'\n ? t('main.stepDeposit')\n : t('main.stepBuy')\n : t('main.stepSwap')\n }\n\n const formattedToAddress = shortenAddress(toAddress)\n const toAddressLink = toAddress\n ? getAddressLink(toAddress, step.action.toChainId)\n : undefined\n\n return (\n <Card type={step.execution?.status === 'FAILED' ? 'error' : 'default'}>\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n }}\n >\n <CardTitle sx={{ flex: 1 }}>{getCardTitle()}</CardTitle>\n <Box sx={{ p: 2, pb: 0, fontSize: 14, fontWeight: 600 }}>\n <StepTimer step={step} />\n </Box>\n </Box>\n <Box\n sx={{\n py: 1,\n }}\n >\n {fromToken ? <Token token={fromToken} sx={{ px: 2, py: 1 }} /> : null}\n <StepActions step={step} sx={{ px: 2, py: 1 }} dense />\n {prepareActions(step.execution?.actions ?? []).map(\n (actionsGroup, index) => (\n <StepAction key={index} step={step} actionsGroup={actionsGroup} />\n )\n )}\n {failedWithoutActions ? (\n <StepAction\n step={step}\n actionsGroup={[\n {\n status: 'FAILED',\n type: 'EXECUTION' as ExecutionActionType, // synthetic action to represent a failed execution with no actions\n error: step.execution?.error,\n },\n ]}\n />\n ) : null}\n {formattedToAddress && toAddressLink ? (\n <DestinationWalletAddress\n step={step}\n toAddress={formattedToAddress}\n toAddressLink={toAddressLink}\n />\n ) : null}\n {toToken ? (\n <Token\n token={toToken}\n impactToken={impactToken}\n enableImpactTokenTooltip\n sx={{ px: 2, py: 1 }}\n />\n ) : null}\n </Box>\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAaA,UAMP,EAAE,MAAM,WAAW,SAAS,aAAa,gBAAgB;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,mBAAmB,aAAa;CAIxC,MAAM,UAAU,KAAK,WAAW,WAAW,EAAE;CAC7C,MAAM,uBACJ,KAAK,WAAW,WAAW,YAC3B,CAAC,QAAQ,MAAM,MAAM,EAAE,WAAW,SAAS;CAE7C,MAAM,qBAAqB;EACzB,MAAM,gBAAgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,QACzB;EACD,MAAM,cAAc,KAAK,cAAc,MAAM,SAAS,KAAK,SAAS,OAAO;EAK3E,MAAM,kBAJgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,SAGW,IAAI,eAAe;AAExD,MAAI,iBAAiB,YACnB,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,yBAAyB;AAEjC,MAAI,cACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,kBAAkB;AAE1B,MAAI,YACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,0BAA0B,GAC5B,EAAE,sBAAsB,GAC1B,EAAE,gBAAgB;AAExB,SAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,mBAAmB,GACrB,EAAE,eAAe,GACnB,EAAE,gBAAgB;;CAGxB,MAAM,qBAAqB,eAAe,UAAU;CACpD,MAAM,gBAAgB,YAClB,eAAe,WAAW,KAAK,OAAO,UAAU,GAChD,KAAA;AAEJ,QACE,qBAACC,QAAD;EAAM,MAAM,KAAK,WAAW,WAAW,WAAW,UAAU;YAA5D,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,MAAM;IACP;aAJH,CAME,oBAAC,WAAD;IAAW,IAAI,EAAE,MAAM,GAAG;cAAG,cAAc;IAAa,CAAA,EACxD,oBAAC,KAAD;IAAK,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG,UAAU;KAAI,YAAY;KAAK;cACrD,oBAAC,WAAD,EAAiB,MAAQ,CAAA;IACrB,CAAA,CACF;MACN,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,GACL;aAHH;IAKG,YAAY,oBAAC,OAAD;KAAO,OAAO;KAAW,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAI,CAAA,GAAG;IACjE,oBAAC,aAAD;KAAmB;KAAM,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAE,OAAA;KAAQ,CAAA;IACtD,eAAe,KAAK,WAAW,WAAW,EAAE,CAAC,CAAC,KAC5C,cAAc,UACb,oBAAC,YAAD;KAA8B;KAAoB;KAAgB,EAAjD,MAAiD,CAErE;IACA,uBACC,oBAAC,YAAD;KACQ;KACN,cAAc,CACZ;MACE,QAAQ;MACR,MAAM;MACN,OAAO,KAAK,WAAW;MACxB,CACF;KACD,CAAA,GACA;IACH,sBAAsB,gBACrB,oBAAC,0BAAD;KACQ;KACN,WAAW;KACI;KACf,CAAA,GACA;IACH,UACC,oBAAC,OAAD;KACE,OAAO;KACM;KACb,0BAAA;KACA,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KACpB,CAAA,GACA;IACA;KACD"}

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

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

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

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