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

@lifi/widget 4.4.0 → 4.5.0

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

Files changed (175) hide show

package/dist/esm/App.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"App.js","names":[],"sources":["../../src/App.tsx"],"sourcesContent":["'use client'\nimport type { JSX, Ref } from 'react'\nimport { useMemo } from 'react'\nimport { AppDefault } from './AppDefault.js'\nimport type { WidgetDrawer } from './AppDrawer.js'\nimport { AppDrawer } from './AppDrawer.js'\nimport { AppProvider } from './AppProvider.js'\nimport type { WidgetConfig, WidgetProps } from './types/widget.js'\n\nexport const App = (\n props: WidgetProps & { ref?: Ref<WidgetDrawer> }\n): JSX.Element => {\n const config: WidgetConfig = useMemo(() => {\n const config = { ...props, ...props.config }\n if (config.variant === 'drawer') {\n config.theme = {\n ...config.theme,\n container: {\n height: '100%',\n ...config.theme?.container,\n },\n }\n }\n return config\n }, [props])\n\n if (config.variant === 'drawer') {\n return (\n <AppProvider config={config} formRef={props.formRef}>\n <AppDrawer\n ref={props.ref}\n elementRef={props.elementRef}\n config={config}\n open={props.open}\n onClose={props.onClose}\n >\n <AppDefault />\n </AppDrawer>\n </AppProvider>\n )\n }\n\n return (\n <AppProvider config={config} formRef={props.formRef}>\n <AppDefault />\n </AppProvider>\n )\n}\n"],"mappings":";;;;;;;AASA,MAAa,OACX,UACgB;CAChB,MAAM,SAAuB,cAAc;EACzC,MAAM,SAAS;GAAE,GAAG;GAAO,GAAG,MAAM;EAAO;EAC3C,IAAI,OAAO,YAAY,UACrB,OAAO,QAAQ;GACb,GAAG,OAAO;GACV,WAAW;IACT,QAAQ;IACR,GAAG,OAAO,OAAO;GACnB;EACF;EAEF,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,OAAO,YAAY,UACrB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;~~YAC1C~~,oBAAC,WAAD;GACE,KAAK,MAAM;GACX,YAAY,MAAM;GACV;GACR,MAAM,MAAM;GACZ,SAAS,MAAM;~~aAEf~~,oBAAC,YAAD,CAAa,CAAA;EACJ,CAAA;CACA,CAAA;CAIjB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;~~YAC1C~~,oBAAC,YAAD,CAAa,CAAA;CACF,CAAA;AAEjB"}
1	+ {"version":3,"file":"App.js","names":[],"sources":["../../src/App.tsx"],"sourcesContent":["'use client'\nimport type { JSX, Ref } from 'react'\nimport { useMemo } from 'react'\nimport { AppDefault } from './AppDefault.js'\nimport type { WidgetDrawer } from './AppDrawer.js'\nimport { AppDrawer } from './AppDrawer.js'\nimport { AppProvider } from './AppProvider.js'\nimport type { WidgetConfig, WidgetProps } from './types/widget.js'\n\nexport const App = (\n props: WidgetProps & { ref?: Ref<WidgetDrawer> }\n): JSX.Element => {\n const config: WidgetConfig = useMemo(() => {\n const config = { ...props, ...props.config }\n if (config.variant === 'drawer') {\n config.theme = {\n ...config.theme,\n container: {\n height: '100%',\n ...config.theme?.container,\n },\n }\n }\n return config\n }, [props])\n\n if (config.variant === 'drawer') {\n return (\n <AppProvider config={config} formRef={props.formRef}>\n <AppDrawer\n ref={props.ref}\n elementRef={props.elementRef}\n config={config}\n open={props.open}\n onClose={props.onClose}\n >\n <AppDefault />\n </AppDrawer>\n </AppProvider>\n )\n }\n\n return (\n <AppProvider config={config} formRef={props.formRef}>\n <AppDefault />\n </AppProvider>\n )\n}\n"],"mappings":";;;;;;;AASA,MAAa,OACX,UACgB;CAChB,MAAM,SAAuB,cAAc;EACzC,MAAM,SAAS;GAAE,GAAG;GAAO,GAAG,MAAM;EAAO;EAC3C,IAAI,OAAO,YAAY,UACrB,OAAO,QAAQ;GACb,GAAG,OAAO;GACV,WAAW;IACT,QAAQ;IACR,GAAG,OAAO,OAAO;GACnB;EACF;EAEF,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,OAAO,YAAY,UACrB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;EAC1C,UAAA,oBAAC,WAAD;GACE,KAAK,MAAM;GACX,YAAY,MAAM;GACV;GACR,MAAM,MAAM;GACZ,SAAS,MAAM;GAEf,UAAA,oBAAC,YAAD,CAAa,CAAA;EACJ,CAAA;CACA,CAAA;CAIjB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;EAC1C,UAAA,oBAAC,YAAD,CAAa,CAAA;CACF,CAAA;AAEjB"}

package/dist/esm/AppDrawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppDrawer.js","names":[],"sources":["../../src/AppDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { JSX, PropsWithChildren, Ref } from 'react'\nimport {\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport type { WidgetDrawerContext } from './AppDrawerContext.js'\nimport { DrawerContext } from './AppDrawerContext.js'\nimport type { WidgetDrawerProps } from './types/widget.js'\n\nexport interface WidgetDrawer {\n isOpen(): void\n toggleDrawer(): void\n openDrawer(): void\n closeDrawer(): void\n}\n\nexport const AppDrawer = ({\n elementRef,\n open,\n onClose,\n children,\n ref,\n}: PropsWithChildren<WidgetDrawerProps> & {\n ref?: Ref<WidgetDrawer>\n}): JSX.Element => {\n const openRef = useRef(Boolean(open))\n const [drawerOpen, setDrawerOpen] = useState(Boolean(open))\n\n const toggleDrawer = useCallback(() => {\n setDrawerOpen((open) => {\n openRef.current = !open\n return openRef.current\n })\n if (!openRef.current) {\n onClose?.()\n }\n }, [onClose])\n\n const openDrawer = useCallback(() => {\n setDrawerOpen(true)\n openRef.current = true\n }, [])\n\n const closeDrawer = useCallback(() => {\n setDrawerOpen(false)\n openRef.current = false\n onClose?.()\n }, [onClose])\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => openRef.current,\n toggleDrawer,\n openDrawer,\n closeDrawer,\n }),\n [closeDrawer, openDrawer, toggleDrawer]\n )\n\n const drawerContext: WidgetDrawerContext = useMemo(\n () => ({\n closeDrawer,\n }),\n [closeDrawer]\n )\n\n return (\n <DrawerContext value={drawerContext}>\n <Drawer\n ref={elementRef}\n anchor=\"right\"\n open={drawerOpen}\n onClose={closeDrawer}\n slotProps={{\n paper: {\n sx: (theme) => ({\n background: theme.vars.palette.background.default,\n width: theme?.container?.width ?? '100%',\n minWidth:\n theme?.container?.minWidth ?? theme.breakpoints.values.xs,\n maxWidth:\n theme?.container?.maxWidth ?? theme.breakpoints.values.sm,\n }),\n },\n backdrop: {\n sx: {\n backgroundColor: 'rgb(0 0 0 / 48%)',\n backdropFilter: 'blur(3px)',\n },\n },\n }}\n keepMounted\n >\n {children}\n </Drawer>\n </DrawerContext>\n )\n}\n"],"mappings":";;;;;AAoBA,MAAa,aAAa,EACxB,YACA,MACA,SACA,UACA,UAGiB;CACjB,MAAM,UAAU,OAAO,QAAQ,IAAI,CAAC;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,IAAI,CAAC;CAE1D,MAAM,eAAe,kBAAkB;EACrC,eAAe,SAAS;GACtB,QAAQ,UAAU,CAAC;GACnB,OAAO,QAAQ;EACjB,CAAC;EACD,IAAI,CAAC,QAAQ,SACX,UAAU;CAEd,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB;EACnC,cAAc,IAAI;EAClB,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,cAAc,KAAK;EACnB,QAAQ,UAAU;EAClB,UAAU;CACZ,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAY;CAAY,CACxC;CASA,OACE,oBAAC,eAAD;EAAe,OAR0B,eAClC,EACL,YACF,IACA,CAAC,WAAW,CAIsB;~~YAChC~~,oBAAC,QAAD;GACE,KAAK;GACL,QAAO;GACP,MAAM;GACN,SAAS;GACT,WAAW;IACT,OAAO,EACL,KAAK,WAAW;KACd,YAAY,MAAM,KAAK,QAAQ,WAAW;KAC1C,OAAO,OAAO,WAAW,SAAS;KAClC,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;KACzD,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;IAC3D,GACF;IACA,UAAU,EACR,IAAI;KACF,iBAAiB;KACjB,gBAAgB;IAClB,EACF;GACF;GACA,aAAA;GAEC;EACK,CAAA;CACK,CAAA;AAEnB"}
1	+ {"version":3,"file":"AppDrawer.js","names":[],"sources":["../../src/AppDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { JSX, PropsWithChildren, Ref } from 'react'\nimport {\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport type { WidgetDrawerContext } from './AppDrawerContext.js'\nimport { DrawerContext } from './AppDrawerContext.js'\nimport type { WidgetDrawerProps } from './types/widget.js'\n\nexport interface WidgetDrawer {\n isOpen(): void\n toggleDrawer(): void\n openDrawer(): void\n closeDrawer(): void\n}\n\nexport const AppDrawer = ({\n elementRef,\n open,\n onClose,\n children,\n ref,\n}: PropsWithChildren<WidgetDrawerProps> & {\n ref?: Ref<WidgetDrawer>\n}): JSX.Element => {\n const openRef = useRef(Boolean(open))\n const [drawerOpen, setDrawerOpen] = useState(Boolean(open))\n\n const toggleDrawer = useCallback(() => {\n setDrawerOpen((open) => {\n openRef.current = !open\n return openRef.current\n })\n if (!openRef.current) {\n onClose?.()\n }\n }, [onClose])\n\n const openDrawer = useCallback(() => {\n setDrawerOpen(true)\n openRef.current = true\n }, [])\n\n const closeDrawer = useCallback(() => {\n setDrawerOpen(false)\n openRef.current = false\n onClose?.()\n }, [onClose])\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => openRef.current,\n toggleDrawer,\n openDrawer,\n closeDrawer,\n }),\n [closeDrawer, openDrawer, toggleDrawer]\n )\n\n const drawerContext: WidgetDrawerContext = useMemo(\n () => ({\n closeDrawer,\n }),\n [closeDrawer]\n )\n\n return (\n <DrawerContext value={drawerContext}>\n <Drawer\n ref={elementRef}\n anchor=\"right\"\n open={drawerOpen}\n onClose={closeDrawer}\n slotProps={{\n paper: {\n sx: (theme) => ({\n background: theme.vars.palette.background.default,\n width: theme?.container?.width ?? '100%',\n minWidth:\n theme?.container?.minWidth ?? theme.breakpoints.values.xs,\n maxWidth:\n theme?.container?.maxWidth ?? theme.breakpoints.values.sm,\n }),\n },\n backdrop: {\n sx: {\n backgroundColor: 'rgb(0 0 0 / 48%)',\n backdropFilter: 'blur(3px)',\n },\n },\n }}\n keepMounted\n >\n {children}\n </Drawer>\n </DrawerContext>\n )\n}\n"],"mappings":";;;;;AAoBA,MAAa,aAAa,EACxB,YACA,MACA,SACA,UACA,UAGiB;CACjB,MAAM,UAAU,OAAO,QAAQ,IAAI,CAAC;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,IAAI,CAAC;CAE1D,MAAM,eAAe,kBAAkB;EACrC,eAAe,SAAS;GACtB,QAAQ,UAAU,CAAC;GACnB,OAAO,QAAQ;EACjB,CAAC;EACD,IAAI,CAAC,QAAQ,SACX,UAAU;CAEd,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB;EACnC,cAAc,IAAI;EAClB,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,cAAc,KAAK;EACnB,QAAQ,UAAU;EAClB,UAAU;CACZ,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAY;CAAY,CACxC;CASA,OACE,oBAAC,eAAD;EAAe,OAR0B,eAClC,EACL,YACF,IACA,CAAC,WAAW,CAIsB;EAChC,UAAA,oBAAC,QAAD;GACE,KAAK;GACL,QAAO;GACP,MAAM;GACN,SAAS;GACT,WAAW;IACT,OAAO,EACL,KAAK,WAAW;KACd,YAAY,MAAM,KAAK,QAAQ,WAAW;KAC1C,OAAO,OAAO,WAAW,SAAS;KAClC,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;KACzD,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;IAC3D,GACF;IACA,UAAU,EACR,IAAI;KACF,iBAAiB;KACjB,gBAAgB;IAClB,EACF;GACF;GACA,aAAA;GAEC;EACK,CAAA;CACK,CAAA;AAEnB"}

package/dist/esm/AppLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppLayout.js","names":[],"sources":["../../src/AppLayout.tsx"],"sourcesContent":["'use client'\nimport { Outlet } from '@tanstack/react-router'\nimport {\n AppContainer,\n AppExpandedContainer,\n} from './components/AppContainer.js'\nimport { Expansion } from './components/Expansion/Expansion.js'\nimport { Header } from './components/Header/Header.js'\nimport { Initializer } from './components/Initializer.js'\nimport { PageEntered } from './components/PageEntered.js'\nimport { version } from './config/version.js'\nimport { useWideVariant } from './hooks/useWideVariant.js'\nimport { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'\nimport { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'\nimport { createElementId, ElementId } from './utils/elements.js'\n\nexport const AppLayout: React.FC = () => {\n const { elementId, buildUrl } = useWidgetConfig()\n const wideVariant = useWideVariant()\n\n return (\n <AppExpandedContainer\n id={createElementId(ElementId.AppExpandedContainer, elementId)}\n data-version={version}\n >\n <AppContainer>\n <Header />\n <Initializer />\n {buildUrl ? <URLSearchParamsBuilder /> : null}\n <PageEntered />\n <Outlet />\n </AppContainer>\n {wideVariant && <Expansion />}\n </AppExpandedContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,kBAA4B;CACvC,MAAM,EAAE,WAAW,aAAa,gBAAgB;CAChD,MAAM,cAAc,eAAe;CAEnC,OACE,qBAAC,sBAAD;EACE,IAAI,gBAAA,iCAAgD,SAAS;EAC7D,gBAAc;~~YAFhB~~,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,CAAS,CAAA;GACT,oBAAC,aAAD,CAAc,CAAA;GACb,WAAW,oBAAC,wBAAD,CAAyB,CAAA,IAAI;GACzC,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,QAAD,CAAS,CAAA;EACG,EAAA,CAAA,GACb,eAAe,oBAAC,WAAD,CAAY,CAAA,CACR;;AAE1B"}
1	+ {"version":3,"file":"AppLayout.js","names":[],"sources":["../../src/AppLayout.tsx"],"sourcesContent":["'use client'\nimport { Outlet } from '@tanstack/react-router'\nimport {\n AppContainer,\n AppExpandedContainer,\n} from './components/AppContainer.js'\nimport { Expansion } from './components/Expansion/Expansion.js'\nimport { Header } from './components/Header/Header.js'\nimport { Initializer } from './components/Initializer.js'\nimport { PageEntered } from './components/PageEntered.js'\nimport { version } from './config/version.js'\nimport { useWideVariant } from './hooks/useWideVariant.js'\nimport { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'\nimport { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'\nimport { createElementId, ElementId } from './utils/elements.js'\n\nexport const AppLayout: React.FC = () => {\n const { elementId, buildUrl } = useWidgetConfig()\n const wideVariant = useWideVariant()\n\n return (\n <AppExpandedContainer\n id={createElementId(ElementId.AppExpandedContainer, elementId)}\n data-version={version}\n >\n <AppContainer>\n <Header />\n <Initializer />\n {buildUrl ? <URLSearchParamsBuilder /> : null}\n <PageEntered />\n <Outlet />\n </AppContainer>\n {wideVariant && <Expansion />}\n </AppExpandedContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,kBAA4B;CACvC,MAAM,EAAE,WAAW,aAAa,gBAAgB;CAChD,MAAM,cAAc,eAAe;CAEnC,OACE,qBAAC,sBAAD;EACE,IAAI,gBAAA,iCAAgD,SAAS;EAC7D,gBAAc;EAFhB,UAAA,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,CAAS,CAAA;GACT,oBAAC,aAAD,CAAc,CAAA;GACb,WAAW,oBAAC,wBAAD,CAAyB,CAAA,IAAI;GACzC,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,QAAD,CAAS,CAAA;EACG,EAAA,CAAA,GACb,eAAe,oBAAC,WAAD,CAAY,CAAA,CACR;;AAE1B"}

package/dist/esm/AppProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppProvider.js","names":[],"sources":["../../src/AppProvider.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { I18nProvider } from './providers/I18nProvider/I18nProvider.js'\nimport { QueryClientProvider } from './providers/QueryClientProvider.js'\nimport { SDKClientProvider } from './providers/SDKClientProvider.js'\nimport { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'\nimport { WalletProvider } from './providers/WalletProvider/WalletProvider.js'\nimport { WidgetProvider } from './providers/WidgetProvider/WidgetProvider.js'\nimport { StoreProvider } from './stores/StoreProvider.js'\nimport { SettingsStoreProvider } from './stores/settings/SettingsStore.js'\nimport type { WidgetConfigProps } from './types/widget.js'\n\nexport const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({\n children,\n config,\n formRef,\n}) => {\n return (\n <QueryClientProvider>\n <SettingsStoreProvider config={config}>\n <WidgetProvider config={config}>\n <I18nProvider>\n <ThemeProvider>\n <SDKClientProvider>\n <WalletProvider providers={config.providers ?? []}>\n <StoreProvider config={config} formRef={formRef}>\n {children}\n </StoreProvider>\n </WalletProvider>\n </SDKClientProvider>\n </ThemeProvider>\n </I18nProvider>\n </WidgetProvider>\n </SettingsStoreProvider>\n </QueryClientProvider>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,eAA+D,EAC1E,UACA,QACA,cACI;CACJ,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,uBAAD;EAA+B;~~YAC7B~~,oBAAC,gBAAD;GAAwB;~~aACtB~~,oBAAC,cAAD,EAAA,UACE,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,gBAAD;IAAgB,WAAW,OAAO,aAAa,CAAC;~~cAC9C~~,oBAAC,eAAD;KAAuB;KAAiB;KACrC;IACY,CAAA;GACD,CAAA,EACC,CAAA,EACN,CAAA,EACH,CAAA;EACA,CAAA;CACK,CAAA,EACJ,CAAA;AAEzB"}
1	+ {"version":3,"file":"AppProvider.js","names":[],"sources":["../../src/AppProvider.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { I18nProvider } from './providers/I18nProvider/I18nProvider.js'\nimport { QueryClientProvider } from './providers/QueryClientProvider.js'\nimport { SDKClientProvider } from './providers/SDKClientProvider.js'\nimport { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'\nimport { WalletProvider } from './providers/WalletProvider/WalletProvider.js'\nimport { WidgetProvider } from './providers/WidgetProvider/WidgetProvider.js'\nimport { StoreProvider } from './stores/StoreProvider.js'\nimport { SettingsStoreProvider } from './stores/settings/SettingsStore.js'\nimport type { WidgetConfigProps } from './types/widget.js'\n\nexport const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({\n children,\n config,\n formRef,\n}) => {\n return (\n <QueryClientProvider>\n <SettingsStoreProvider config={config}>\n <WidgetProvider config={config}>\n <I18nProvider>\n <ThemeProvider>\n <SDKClientProvider>\n <WalletProvider providers={config.providers ?? []}>\n <StoreProvider config={config} formRef={formRef}>\n {children}\n </StoreProvider>\n </WalletProvider>\n </SDKClientProvider>\n </ThemeProvider>\n </I18nProvider>\n </WidgetProvider>\n </SettingsStoreProvider>\n </QueryClientProvider>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,eAA+D,EAC1E,UACA,QACA,cACI;CACJ,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,uBAAD;EAA+B;EAC7B,UAAA,oBAAC,gBAAD;GAAwB;GACtB,UAAA,oBAAC,cAAD,EAAA,UACE,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,gBAAD;IAAgB,WAAW,OAAO,aAAa,CAAC;IAC9C,UAAA,oBAAC,eAAD;KAAuB;KAAiB;KACrC;IACY,CAAA;GACD,CAAA,EACC,CAAA,EACN,CAAA,EACH,CAAA;EACA,CAAA;CACK,CAAA,EACJ,CAAA;AAEzB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionRow.js","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material'\nimport type { FC, ReactNode } from 'react'\nimport { ActionRowContainer, ActionRowLabel } from './ActionRow.style.js'\n\ninterface ActionRowProps {\n message: string\n startAdornment: ReactNode\n endAdornment?: ReactNode\n sx?: SxProps<Theme>\n}\n\nexport const ActionRow: FC<ActionRowProps> = ({\n message,\n startAdornment,\n endAdornment,\n sx,\n}) => {\n return (\n <ActionRowContainer sx={sx}>\n {startAdornment}\n <ActionRowLabel>{message}</ActionRowLabel>\n {endAdornment}\n </ActionRowContainer>\n )\n}\n"],"mappings":";;;AAWA,MAAa,aAAiC,EAC5C,SACA,gBACA,cACA,SACI;CACJ,OACE,qBAAC,oBAAD;EAAwB;~~YAAxB~~;GACG;GACD,oBAAC,gBAAD,EAAA,UAAiB,QAAwB,CAAA;GACxC;EACiB;;AAExB"}
1	+ {"version":3,"file":"ActionRow.js","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material'\nimport type { FC, ReactNode } from 'react'\nimport { ActionRowContainer, ActionRowLabel } from './ActionRow.style.js'\n\ninterface ActionRowProps {\n message: string\n startAdornment: ReactNode\n endAdornment?: ReactNode\n sx?: SxProps<Theme>\n}\n\nexport const ActionRow: FC<ActionRowProps> = ({\n message,\n startAdornment,\n endAdornment,\n sx,\n}) => {\n return (\n <ActionRowContainer sx={sx}>\n {startAdornment}\n <ActionRowLabel>{message}</ActionRowLabel>\n {endAdornment}\n </ActionRowContainer>\n )\n}\n"],"mappings":";;;AAWA,MAAa,aAAiC,EAC5C,SACA,gBACA,cACA,SACI;CACJ,OACE,qBAAC,oBAAD;EAAwB;EAAxB,UAAA;GACG;GACD,oBAAC,gBAAD,EAAA,UAAiB,QAAwB,CAAA;GACxC;EACiB;;AAExB"}

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 {\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?.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 { mode, modeOptions } = 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 mode === 'custom'\n ? modeOptions?.custom?.type === '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":";;;;;;;;;;;;;;;;;AAgCA,MAAa,eAAoD,EAC/D,UACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,gBAAgB;CAEvC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAEhD,MAAM,WAAW,YAAY;CAC7B,OACE,oBAAC,iBAAD;EACY;EACH;EACP,iBAAiB,oBAAC,qBAAD,EAA+B,SAAW,CAAA;EACjD;EACV,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAQD,EACH,UACA,OACA,gBACA,iBACA,UACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAC9C,MAAM,MAAM,OAAyB,IAAI;CAEzC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,EAAE;CAEjE,MAAM,YAAY,cAAc,aAAa,QAAQ;CACrD,MAAM,CAAC,SAAS,eAAe,SAAS;CACxC,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,cAAc,kBAAkB;CAExC,MAAM,mBAAmB,UAAU;CACnC,IAAI;CACJ,IAAI,aAAa,SACf,IAAI,qBAAqB,SACvB,eAAe;MAEf,eAAe;MAGjB,IAAI,qBAAqB,SAEvB,eAAe,kBADI,iBAAiB,OAAiB,OAAO,QAEjD,CAAC,CAAC,QAAA,CAAmB,GAAA,CAEhC;MAEA,eAAe;CAInB,MAAM,gBACJ,UACG;EACH,MAAM,EAAE,OAAO,eAAe,MAAM;EACpC,aAAa,UAAU;EAEvB,IAAI;EACJ,IAAI,qBAAqB,SAAS;GAEhC,iBAAiB,kBADO,WAAW,QAAQ,KAAK,EACC,GAAA,GAAgB,IAAI;GACrE,MAAM,aAAa,mBAAmB,gBAAgB,OAAO,QAAQ;GACrE,uBAAuB,cAAc;GACrC,cAAc,WAAW,YAAY;IAAE,SAAS;IAAM,WAAW;GAAK,CAAC;EACzE,OAAO;GACL,iBAAiB,kBAAkB,YAAY,OAAO,UAAU,IAAI;GACpE,cAAc,WAAW,gBAAgB;IACvC,SAAS;IACT,WAAW;GACb,CAAC;EACH;CACF;CAEA,MAAM,cACJ,UACG;EACH,MAAM,EAAE,OAAO,eAAe,MAAM;EACpC,aAAa,UAAU;EAEvB,IAAI;EACJ,IAAI,qBAAqB,SAAS;GAEhC,iBAAiB,kBADO,WAAW,QAAQ,KAAK,EACC,GAAA,CAAc;GAE/D,MAAM,kBAAkB,kBADL,mBAAmB,gBAAgB,OAAO,QACV,GAAG,OAAO,QAAQ;GACrE,cAAc,WAAW,iBAAiB;IACxC,SAAS;IACT,WAAW;GACb,CAAC;EACH,OAAO;GACL,iBAAiB,kBAAkB,YAAY,OAAO,QAAQ;GAC9D,cAAc,WAAW,gBAAgB;IACvC,SAAS;IACT,WAAW;GACb,CAAC;EACH;CACF;CAGA,sBAAsB;EACpB,IAAI,IAAI,SACN,aAAA,IAAA,IAAiD,IAAI,OAAO;CAEhE,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,eAAe,IACjB,EAAE,eAAe,IACnB,EAAE,aAAa;CAErB,OACE,qBAAC,WAAD;EAAW,GAAI;~~YAAf~~;GACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,sBAAD,EAAA,UAAuB,MAA4B,CAAA,EAC9B,CAAA;GACvB,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,2BAAD,EAAqC,SAAW,CAAA,GAChD,qBAAC,aAAD;IAAa,WAAA;~~cAAb~~,CACE,oBAAC,OAAD;KACE,UAAU;KACV,MAAK;KACL,cAAa;KACb,aAAa,qBAAqB,UAAU,OAAO;KACnC;KAChB,YAAY,EACV,WAAW,UACb;KACA,UAAU;KACV,QAAQ;KACR,OACE,qBAAqB,UACjB,eACE,IAAI,iBACJ,KACF;KAEN,MAAM;KACI;KACV,UAAA;IACD,CAAA,GACA,eACU;~~KACA~~,EAAA,CAAA;GACd,CAAC,YAAY,oBAAC,yBAAD,EAAmC,SAAW,CAAA;EACnD;;AAEf"}
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 {\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?.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 { mode, modeOptions } = 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 mode === 'custom'\n ? modeOptions?.custom?.type === '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/AmountInputEndAdornment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInputEndAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.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 {\n AmountInputButton,\n ButtonContainer,\n} from './AmountInputEndAdornment.style.js'\n\nexport const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =\n memo(({ formType }: FormTypeProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n const { setFieldValue } = useFieldActions()\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const chain = getChainById(chainId)\n const { account } = useAccount({ chainType: chain?.chainType })\n\n // We get gas recommendations for the source chain to make sure that after pressing the Max button\n // the user will have enough funds remaining to cover gas costs\n const { data } = useGasRecommendation(chainId)\n\n const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n const getMaxAmount = () => {\n if (!token?.amount) {\n return 0n\n }\n let maxAmount = token.amount\n if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n const recommendedAmount = BigInt(data.recommended.amount)\n if (token.amount > recommendedAmount) {\n maxAmount = token.amount - recommendedAmount\n }\n }\n return maxAmount\n }\n\n const handlePercentage = (percentage: number) => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n setFieldValue(\n FormKeyHelper.getAmountKey(formType),\n formatUnits(percentageAmount, token.decimals),\n {\n isTouched: true,\n }\n )\n }\n }\n\n const handleMax = () => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n setFieldValue(\n FormKeyHelper.getAmountKey(formType),\n formatUnits(maxAmount, token.decimals),\n {\n isTouched: true,\n }\n )\n }\n }\n\n if (formType !== 'from' \|\| !token \|\| !account?.isConnected) {\n return null\n }\n\n return (\n <ButtonContainer>\n <AmountInputButton onClick={() => handlePercentage(25)}>\n 25%\n </AmountInputButton>\n <AmountInputButton onClick={() => handlePercentage(50)}>\n 50%\n </AmountInputButton>\n <AmountInputButton onClick={() => handlePercentage(75)}>\n 75%\n </AmountInputButton>\n <AmountInputButton onClick={handleMax}>\n {t('button.max')}\n </AmountInputButton>\n </ButtonContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,0BACX,MAAM,EAAE,eAAkD;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,QAAQ,aAAa,OAAO;CAClC,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,OAAO,UAAU,CAAC;CAI9D,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAE7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,QACV,OAAO;EAET,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAEA,MAAM,oBAAoB,eAAuB;EAC/C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,kBAAkB,MAAM,QAAQ,GAC5C,EACE,WAAW,KACb,CACF;EACF;CACF;CAEA,MAAM,kBAAkB;EACtB,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,WAAW,MAAM,QAAQ,GACrC,EACE,WAAW,KACb,CACF;CAEJ;CAEA,IAAI,aAAa,UAAU,CAAC,SAAS,CAAC,SAAS,aAC7C,OAAO;CAGT,OACE,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;~~aAAG~~;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;~~aAAG~~;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;~~aAAG~~;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,SAAS;~~aACzB~~,EAAE,YAAY;EACE,CAAA;CACJ,EAAA,CAAA;AAErB,CAAC"}
1	+ {"version":3,"file":"AmountInputEndAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.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 {\n AmountInputButton,\n ButtonContainer,\n} from './AmountInputEndAdornment.style.js'\n\nexport const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =\n memo(({ formType }: FormTypeProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n const { setFieldValue } = useFieldActions()\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const chain = getChainById(chainId)\n const { account } = useAccount({ chainType: chain?.chainType })\n\n // We get gas recommendations for the source chain to make sure that after pressing the Max button\n // the user will have enough funds remaining to cover gas costs\n const { data } = useGasRecommendation(chainId)\n\n const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n const getMaxAmount = () => {\n if (!token?.amount) {\n return 0n\n }\n let maxAmount = token.amount\n if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n const recommendedAmount = BigInt(data.recommended.amount)\n if (token.amount > recommendedAmount) {\n maxAmount = token.amount - recommendedAmount\n }\n }\n return maxAmount\n }\n\n const handlePercentage = (percentage: number) => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n setFieldValue(\n FormKeyHelper.getAmountKey(formType),\n formatUnits(percentageAmount, token.decimals),\n {\n isTouched: true,\n }\n )\n }\n }\n\n const handleMax = () => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n setFieldValue(\n FormKeyHelper.getAmountKey(formType),\n formatUnits(maxAmount, token.decimals),\n {\n isTouched: true,\n }\n )\n }\n }\n\n if (formType !== 'from' \|\| !token \|\| !account?.isConnected) {\n return null\n }\n\n return (\n <ButtonContainer>\n <AmountInputButton onClick={() => handlePercentage(25)}>\n 25%\n </AmountInputButton>\n <AmountInputButton onClick={() => handlePercentage(50)}>\n 50%\n </AmountInputButton>\n <AmountInputButton onClick={() => handlePercentage(75)}>\n 75%\n </AmountInputButton>\n <AmountInputButton onClick={handleMax}>\n {t('button.max')}\n </AmountInputButton>\n </ButtonContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,0BACX,MAAM,EAAE,eAAkD;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,QAAQ,aAAa,OAAO;CAClC,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,OAAO,UAAU,CAAC;CAI9D,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAE7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,QACV,OAAO;EAET,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAEA,MAAM,oBAAoB,eAAuB;EAC/C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,kBAAkB,MAAM,QAAQ,GAC5C,EACE,WAAW,KACb,CACF;EACF;CACF;CAEA,MAAM,kBAAkB;EACtB,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,WAAW,MAAM,QAAQ,GACrC,EACE,WAAW,KACb,CACF;CAEJ;CAEA,IAAI,aAAa,UAAU,CAAC,SAAS,CAAC,SAAS,aAC7C,OAAO;CAGT,OACE,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;GAAG,UAAA;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;GAAG,UAAA;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;GAAG,UAAA;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,SAAS;GACzB,UAAA,EAAE,YAAY;EACE,CAAA;CACJ,EAAA,CAAA;AAErB,CAAC"}

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,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CACA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,OACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;CACR,CAAA;AAEL,CAAC;AAEH,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,QAAQ,CAAC;CACpE,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CAEzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,IAC9C;CAEJ,MAAM,mCAAmC;EACvC,IAAI,qBAAqB,UAAU;GACjC,MAAM,aAAa,iBACjB,QACA,OAAO,UACP,OAAO,QACT;GACA,OAAO,EAAE,mBAAmB,EAAE,OAAO,WAAW,CAAC;EACnD,OACE,OAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAE3D;CAEA,MAAM,oBAAoB,MAAwB;EAChD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,OACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;EACb;~~YATF~~,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;KACd;~~eAEC~~,2BAA2B;IAClB,CAAA;IACX,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;KACf;~~eAEC~~,MAAM;IACG,CAAA,IACV;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACzC;~~MACjB~~,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;EAAK,CAAA,IAC/C,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;GACf;GACA,OAAO;~~aAEN~~,KAAK,EAAE,sBAAsB,EAC5B,OAAO,YACT,CAAC;EACS,CAAA,IACV,IACU;;AAEpB"}
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,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CACA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,OACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;CACR,CAAA;AAEL,CAAC;AAEH,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,QAAQ,CAAC;CACpE,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CAEzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,IAC9C;CAEJ,MAAM,mCAAmC;EACvC,IAAI,qBAAqB,UAAU;GACjC,MAAM,aAAa,iBACjB,QACA,OAAO,UACP,OAAO,QACT;GACA,OAAO,EAAE,mBAAmB,EAAE,OAAO,WAAW,CAAC;EACnD,OACE,OAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAE3D;CAEA,MAAM,oBAAoB,MAAwB;EAChD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,OACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;EACb;EATF,UAAA,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;GADhD,UAAA;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;KACd;KAEC,UAAA,2BAA2B;IAClB,CAAA;IACX,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;KACf;KAEC,UAAA,MAAM;IACG,CAAA,IACV;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACzC;EACjB,CAAA,GAAA,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;EAAK,CAAA,IAC/C,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;GACf;GACA,OAAO;GAEN,UAAA,KAAK,EAAE,sBAAsB,EAC5B,OAAO,YACT,CAAC;EACS,CAAA,IACV,IACU;;AAEpB"}

package/dist/esm/components/AmountInputCard/AmountInputCardPair.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInputCardPair.js","names":[],"sources":["../../../../src/components/AmountInputCard/AmountInputCardPair.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'\nimport { SwapButton } from '../SwapButton/SwapButton.js'\nimport { CardContainer } from './AmountInputCard.style.js'\nimport { ReceiveAmountCard } from './ReceiveAmountCard.js'\nimport { SendAmountCard } from './SendAmountCard.js'\n\nexport const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {\n // Refuel's destination is fixed to native gas, so reversing from/to is\n // meaningless — hide the swap button (and the notch mask it sits in).\n const { mode } = useWidgetConfig()\n const showSwapButton = mode !== 'refuel'\n\n return (\n <CardContainer {...props}>\n {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}\n <SendAmountCard mask={showSwapButton} />\n <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />\n <ReceiveAmountCard mask={showSwapButton} />\n </CardContainer>\n )\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAA2C,UAAuB;CAG7E,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,iBAAiB,SAAS;CAEhC,OACE,qBAAC,eAAD;EAAe,GAAI;~~YAAnB~~;GACG,SAAS,UAAU,oBAAC,gBAAD,EAAgB,IAAI,EAAE,cAAc,EAAE,EAAI,CAAA,IAAI;GAClE,oBAAC,gBAAD,EAAgB,MAAM,eAAiB,CAAA;GACvC,oBAAC,YAAD,EAAY,IAAI,EAAE,YAAY,iBAAiB,YAAY,SAAS,EAAI,CAAA;GACxE,oBAAC,mBAAD,EAAmB,MAAM,eAAiB,CAAA;EAC7B;;AAEnB"}
1	+ {"version":3,"file":"AmountInputCardPair.js","names":[],"sources":["../../../../src/components/AmountInputCard/AmountInputCardPair.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'\nimport { SwapButton } from '../SwapButton/SwapButton.js'\nimport { CardContainer } from './AmountInputCard.style.js'\nimport { ReceiveAmountCard } from './ReceiveAmountCard.js'\nimport { SendAmountCard } from './SendAmountCard.js'\n\nexport const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {\n // Refuel's destination is fixed to native gas, so reversing from/to is\n // meaningless — hide the swap button (and the notch mask it sits in).\n const { mode } = useWidgetConfig()\n const showSwapButton = mode !== 'refuel'\n\n return (\n <CardContainer {...props}>\n {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}\n <SendAmountCard mask={showSwapButton} />\n <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />\n <ReceiveAmountCard mask={showSwapButton} />\n </CardContainer>\n )\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAA2C,UAAuB;CAG7E,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,iBAAiB,SAAS;CAEhC,OACE,qBAAC,eAAD;EAAe,GAAI;EAAnB,UAAA;GACG,SAAS,UAAU,oBAAC,gBAAD,EAAgB,IAAI,EAAE,cAAc,EAAE,EAAI,CAAA,IAAI;GAClE,oBAAC,gBAAD,EAAgB,MAAM,eAAiB,CAAA;GACvC,oBAAC,YAAD,EAAY,IAAI,EAAE,YAAY,iBAAiB,YAAY,SAAS,EAAI,CAAA;GACxE,oBAAC,mBAAD,EAAmB,MAAM,eAAiB,CAAA;EAC7B;;AAEnB"}

package/dist/esm/components/AmountInputCard/BalanceDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BalanceDisplay.js","names":[],"sources":["../../../../src/components/AmountInputCard/BalanceDisplay.tsx"],"sourcesContent":["import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'\nimport { Skeleton } from '@mui/material'\nimport { type JSX, 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 { formatTokenAmount } from '../../utils/format.js'\nimport { FooterText, footerFontSize } from './AmountInputCard.style.js'\nimport { BalanceContainer } from './BalanceDisplay.style.js'\n\nexport const BalanceDisplay: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n if (isLoading && tokenAddress) {\n return (\n <Skeleton variant=\"text\" width={72} sx={{ fontSize: footerFontSize }} />\n )\n }\n\n if (!token?.amount) {\n return null\n }\n\n const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n\n return (\n <BalanceContainer>\n <FooterText title={tokenAmount}>\n {t('format.tokenAmount', { value: tokenAmount })}\n </FooterText>\n <AccountBalanceWalletOutlinedIcon\n sx={{ fontSize: 16, color: 'text.secondary' }}\n />\n </BalanceContainer>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iBAA4D,MACtE,EAAE,eAAkD;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,IAAI,aAAa,cACf,OACE,oBAAC,UAAD;EAAU,SAAQ;EAAO,OAAO;EAAI,IAAI,EAAE,UAAA,GAAyB;CAAI,CAAA;CAI3E,IAAI,CAAC,OAAO,QACV,OAAO;CAGT,MAAM,cAAc,kBAAkB,MAAM,QAAQ,MAAM,QAAQ;CAElE,OACE,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EAAY,OAAO;~~YAChB~~,EAAE,sBAAsB,EAAE,OAAO,YAAY,CAAC;CACrC,CAAA,GACZ,oBAAC,kCAAD,EACE,IAAI;EAAE,UAAU;EAAI,OAAO;CAAiB,EAC7C,CAAA,CACe,EAAA,CAAA;AAEtB,CACF"}
1	+ {"version":3,"file":"BalanceDisplay.js","names":[],"sources":["../../../../src/components/AmountInputCard/BalanceDisplay.tsx"],"sourcesContent":["import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'\nimport { Skeleton } from '@mui/material'\nimport { type JSX, 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 { formatTokenAmount } from '../../utils/format.js'\nimport { FooterText, footerFontSize } from './AmountInputCard.style.js'\nimport { BalanceContainer } from './BalanceDisplay.style.js'\n\nexport const BalanceDisplay: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n if (isLoading && tokenAddress) {\n return (\n <Skeleton variant=\"text\" width={72} sx={{ fontSize: footerFontSize }} />\n )\n }\n\n if (!token?.amount) {\n return null\n }\n\n const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n\n return (\n <BalanceContainer>\n <FooterText title={tokenAmount}>\n {t('format.tokenAmount', { value: tokenAmount })}\n </FooterText>\n <AccountBalanceWalletOutlinedIcon\n sx={{ fontSize: 16, color: 'text.secondary' }}\n />\n </BalanceContainer>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iBAA4D,MACtE,EAAE,eAAkD;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,IAAI,aAAa,cACf,OACE,oBAAC,UAAD;EAAU,SAAQ;EAAO,OAAO;EAAI,IAAI,EAAE,UAAA,GAAyB;CAAI,CAAA;CAI3E,IAAI,CAAC,OAAO,QACV,OAAO;CAGT,MAAM,cAAc,kBAAkB,MAAM,QAAQ,MAAM,QAAQ;CAElE,OACE,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EAAY,OAAO;EAChB,UAAA,EAAE,sBAAsB,EAAE,OAAO,YAAY,CAAC;CACrC,CAAA,GACZ,oBAAC,kCAAD,EACE,IAAI;EAAE,UAAU;EAAI,OAAO;CAAiB,EAC7C,CAAA,CACe,EAAA,CAAA;AAEtB,CACF"}

package/dist/esm/components/AmountInputCard/FiatValueToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FiatValueToggle.js","names":[],"sources":["../../../../src/components/AmountInputCard/FiatValueToggle.tsx"],"sourcesContent":["import SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\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 { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenPrice } from '../../utils/format.js'\nimport { FooterText, ToggleButton } from './AmountInputCard.style.js'\n\nexport const FiatValueToggle: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const [chainId, tokenAddress, amount] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType),\n FormKeyHelper.getAmountKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n const { inputMode, toggleInputMode } = useInputModeStore()\n const currentInputMode = inputMode[formType]\n\n const handleToggle = (e: React.MouseEvent): void => {\n e.stopPropagation()\n toggleInputMode(formType)\n }\n\n const canToggle = !!token?.priceUSD\n\n const displayValue =\n currentInputMode === 'amount'\n ? t('format.currency', {\n value: formatTokenPrice(amount, token?.priceUSD, token?.decimals),\n })\n : t('format.tokenAmount', { value: amount \|\| '0' })\n\n return (\n <ToggleButton\n clickable={canToggle}\n onClick={canToggle ? handleToggle : undefined}\n aria-label={canToggle ? 'Toggle fiat value' : undefined}\n >\n <FooterText>{displayValue}</FooterText>\n {currentInputMode === 'price' && token?.symbol ? (\n <FooterText>{token.symbol}</FooterText>\n ) : null}\n {canToggle ? (\n <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n ) : null}\n </ToggleButton>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,kBAA6D,MACvE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,cAAc,UAAU,eACtC,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,GAClC,cAAc,aAAa,QAAQ,CACrC;CAEA,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAChD,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CACzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,gBAAgB,MAA8B;EAClD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,YAAY,CAAC,CAAC,OAAO;CAE3B,MAAM,eACJ,qBAAqB,WACjB,EAAE,mBAAmB,EACnB,OAAO,iBAAiB,QAAQ,OAAO,UAAU,OAAO,QAAQ,EAClE,CAAC,IACD,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAEtD,OACE,qBAAC,cAAD;EACE,WAAW;EACX,SAAS,YAAY,eAAe,KAAA;EACpC,cAAY,YAAY,sBAAsB,KAAA;~~YAHhD~~;GAKE,oBAAC,YAAD,EAAA,UAAa,aAAyB,CAAA;GACrC,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD,EAAA,UAAa,MAAM,OAAmB,CAAA,IACpC;GACH,YACC,oBAAC,cAAD,EAAc,IAAI;IAAE,UAAU;IAAI,OAAO;GAAiB,EAAI,CAAA,IAC5D;EACQ;;AAElB,CACF"}
1	+ {"version":3,"file":"FiatValueToggle.js","names":[],"sources":["../../../../src/components/AmountInputCard/FiatValueToggle.tsx"],"sourcesContent":["import SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\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 { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenPrice } from '../../utils/format.js'\nimport { FooterText, ToggleButton } from './AmountInputCard.style.js'\n\nexport const FiatValueToggle: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element => {\n const { t } = useTranslation()\n const [chainId, tokenAddress, amount] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType),\n FormKeyHelper.getAmountKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n const { inputMode, toggleInputMode } = useInputModeStore()\n const currentInputMode = inputMode[formType]\n\n const handleToggle = (e: React.MouseEvent): void => {\n e.stopPropagation()\n toggleInputMode(formType)\n }\n\n const canToggle = !!token?.priceUSD\n\n const displayValue =\n currentInputMode === 'amount'\n ? t('format.currency', {\n value: formatTokenPrice(amount, token?.priceUSD, token?.decimals),\n })\n : t('format.tokenAmount', { value: amount \|\| '0' })\n\n return (\n <ToggleButton\n clickable={canToggle}\n onClick={canToggle ? handleToggle : undefined}\n aria-label={canToggle ? 'Toggle fiat value' : undefined}\n >\n <FooterText>{displayValue}</FooterText>\n {currentInputMode === 'price' && token?.symbol ? (\n <FooterText>{token.symbol}</FooterText>\n ) : null}\n {canToggle ? (\n <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n ) : null}\n </ToggleButton>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,kBAA6D,MACvE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,cAAc,UAAU,eACtC,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,GAClC,cAAc,aAAa,QAAQ,CACrC;CAEA,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAChD,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CACzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,gBAAgB,MAA8B;EAClD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,YAAY,CAAC,CAAC,OAAO;CAE3B,MAAM,eACJ,qBAAqB,WACjB,EAAE,mBAAmB,EACnB,OAAO,iBAAiB,QAAQ,OAAO,UAAU,OAAO,QAAQ,EAClE,CAAC,IACD,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAEtD,OACE,qBAAC,cAAD;EACE,WAAW;EACX,SAAS,YAAY,eAAe,KAAA;EACpC,cAAY,YAAY,sBAAsB,KAAA;EAHhD,UAAA;GAKE,oBAAC,YAAD,EAAA,UAAa,aAAyB,CAAA;GACrC,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD,EAAA,UAAa,MAAM,OAAmB,CAAA,IACpC;GACH,YACC,oBAAC,cAAD,EAAc,IAAI;IAAE,UAAU;IAAI,OAAO;GAAiB,EAAI,CAAA,IAC5D;EACQ;;AAElB,CACF"}

package/dist/esm/components/AmountInputCard/PercentageChips.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PercentageChips.js","names":[],"sources":["../../../../src/components/AmountInputCard/PercentageChips.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 type { DisabledUIConfig } from '../../types/widget.js'\nimport { Chip, ChipContainer } from './PercentageChips.style.js'\n\nexport const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n const { setFieldValue } = useFieldActions()\n const { disabledUI, mode } = useWidgetConfig()\n const { setSendAmount } = useLinkedLimitFields()\n\n const amountKey = FormKeyHelper.getAmountKey(formType)\n const isDisabled = !!disabledUI?.[amountKey as keyof DisabledUIConfig]\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const chain = getChainById(chainId)\n const { account } = useAccount({ chainType: chain?.chainType })\n\n const { data } = useGasRecommendation(chainId)\n const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n const getMaxAmount = (): bigint => {\n if (!token?.amount) {\n return 0n\n }\n let maxAmount = token.amount\n if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n const recommendedAmount = BigInt(data.recommended.amount)\n if (token.amount > recommendedAmount) {\n maxAmount = token.amount - recommendedAmount\n }\n }\n return maxAmount\n }\n\n // In limit mode the send amount must flow through the linked-field\n // derivation so the receive amount recomputes; otherwise it is a plain\n // form-field write.\n const applyAmount = (value: string): void => {\n if (mode === 'limit') {\n setSendAmount(value)\n } else {\n setFieldValue(amountKey, value, { isTouched: true })\n }\n }\n\n const handlePercentage = (percentage: number): void => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n applyAmount(formatUnits(percentageAmount, token.decimals))\n }\n }\n\n const handleMax = (): void => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n applyAmount(formatUnits(maxAmount, token.decimals))\n }\n }\n\n if (formType !== 'from' \|\| isDisabled \|\| !token \|\| !account?.isConnected) {\n return null\n }\n\n return (\n <ChipContainer>\n <Chip data-delay=\"0\" onClick={() => handlePercentage(25)}>\n 25%\n </Chip>\n <Chip data-delay=\"1\" onClick={() => handlePercentage(50)}>\n 50%\n </Chip>\n <Chip data-delay=\"2\" onClick={() => handlePercentage(75)}>\n 75%\n </Chip>\n <Chip data-delay=\"3\" onClick={handleMax}>\n {t('button.max')}\n </Chip>\n </ChipContainer>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,kBAA6D,MACvE,EAAE,eAAkD;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,EAAE,kBAAkB,qBAAqB;CAE/C,MAAM,YAAY,cAAc,aAAa,QAAQ;CACrD,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,QAAQ,aAAa,OAAO;CAClC,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,OAAO,UAAU,CAAC;CAE9D,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAC7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAA6B;EACjC,IAAI,CAAC,OAAO,QACV,OAAO;EAET,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAKA,MAAM,eAAe,UAAwB;EAC3C,IAAI,SAAS,SACX,cAAc,KAAK;OAEnB,cAAc,WAAW,OAAO,EAAE,WAAW,KAAK,CAAC;CAEvD;CAEA,MAAM,oBAAoB,eAA6B;EACrD,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,YAAY,YAAY,kBAAkB,MAAM,QAAQ,CAAC;EAC3D;CACF;CAEA,MAAM,kBAAwB;EAC5B,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,YAAY,YAAY,WAAW,MAAM,QAAQ,CAAC;CAEtD;CAEA,IAAI,aAAa,UAAU,cAAc,CAAC,SAAS,CAAC,SAAS,aAC3D,OAAO;CAGT,OACE,qBAAC,eAAD,EAAA,UAAA;EACE,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;~~aAAG~~;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;~~aAAG~~;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;~~aAAG~~;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,SAAS;~~aAC3B~~,EAAE,YAAY;EACX,CAAA;CACO,EAAA,CAAA;AAEnB,CACF"}
1	+ {"version":3,"file":"PercentageChips.js","names":[],"sources":["../../../../src/components/AmountInputCard/PercentageChips.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 type { DisabledUIConfig } from '../../types/widget.js'\nimport { Chip, ChipContainer } from './PercentageChips.style.js'\n\nexport const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(\n ({ formType }: FormTypeProps): JSX.Element \| null => {\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n const { setFieldValue } = useFieldActions()\n const { disabledUI, mode } = useWidgetConfig()\n const { setSendAmount } = useLinkedLimitFields()\n\n const amountKey = FormKeyHelper.getAmountKey(formType)\n const isDisabled = !!disabledUI?.[amountKey as keyof DisabledUIConfig]\n\n const [chainId, tokenAddress] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType)\n )\n\n const chain = getChainById(chainId)\n const { account } = useAccount({ chainType: chain?.chainType })\n\n const { data } = useGasRecommendation(chainId)\n const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n const getMaxAmount = (): bigint => {\n if (!token?.amount) {\n return 0n\n }\n let maxAmount = token.amount\n if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n const recommendedAmount = BigInt(data.recommended.amount)\n if (token.amount > recommendedAmount) {\n maxAmount = token.amount - recommendedAmount\n }\n }\n return maxAmount\n }\n\n // In limit mode the send amount must flow through the linked-field\n // derivation so the receive amount recomputes; otherwise it is a plain\n // form-field write.\n const applyAmount = (value: string): void => {\n if (mode === 'limit') {\n setSendAmount(value)\n } else {\n setFieldValue(amountKey, value, { isTouched: true })\n }\n }\n\n const handlePercentage = (percentage: number): void => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n applyAmount(formatUnits(percentageAmount, token.decimals))\n }\n }\n\n const handleMax = (): void => {\n const maxAmount = getMaxAmount()\n if (maxAmount && token?.decimals) {\n applyAmount(formatUnits(maxAmount, token.decimals))\n }\n }\n\n if (formType !== 'from' \|\| isDisabled \|\| !token \|\| !account?.isConnected) {\n return null\n }\n\n return (\n <ChipContainer>\n <Chip data-delay=\"0\" onClick={() => handlePercentage(25)}>\n 25%\n </Chip>\n <Chip data-delay=\"1\" onClick={() => handlePercentage(50)}>\n 50%\n </Chip>\n <Chip data-delay=\"2\" onClick={() => handlePercentage(75)}>\n 75%\n </Chip>\n <Chip data-delay=\"3\" onClick={handleMax}>\n {t('button.max')}\n </Chip>\n </ChipContainer>\n )\n }\n)\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,kBAA6D,MACvE,EAAE,eAAkD;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,EAAE,kBAAkB,qBAAqB;CAE/C,MAAM,YAAY,cAAc,aAAa,QAAQ;CACrD,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,QAAQ,aAAa,OAAO;CAClC,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,OAAO,UAAU,CAAC;CAE9D,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAC7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAA6B;EACjC,IAAI,CAAC,OAAO,QACV,OAAO;EAET,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAKA,MAAM,eAAe,UAAwB;EAC3C,IAAI,SAAS,SACX,cAAc,KAAK;OAEnB,cAAc,WAAW,OAAO,EAAE,WAAW,KAAK,CAAC;CAEvD;CAEA,MAAM,oBAAoB,eAA6B;EACrD,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,YAAY,YAAY,kBAAkB,MAAM,QAAQ,CAAC;EAC3D;CACF;CAEA,MAAM,kBAAwB;EAC5B,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,YAAY,YAAY,WAAW,MAAM,QAAQ,CAAC;CAEtD;CAEA,IAAI,aAAa,UAAU,cAAc,CAAC,SAAS,CAAC,SAAS,aAC3D,OAAO;CAGT,OACE,qBAAC,eAAD,EAAA,UAAA;EACE,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;GAAG,UAAA;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;GAAG,UAAA;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;GAAG,UAAA;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,SAAS;GAC3B,UAAA,EAAE,YAAY;EACX,CAAA;CACO,EAAA,CAAA;AAEnB,CACF"}

package/dist/esm/components/AmountInputCard/ReceiveAmountCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReceiveAmountCard.js","names":["InfoOutlinedIcon"],"sources":["../../../../src/components/AmountInputCard/ReceiveAmountCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport type { CardProps } from '@mui/material'\nimport { Box, Skeleton, Tooltip } from '@mui/material'\nimport { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n AmountCard,\n AmountDisplay,\n amountHeight,\n CardBodyRow,\n CardFooterRow,\n CardHeaderRow,\n FooterText,\n footerFontSize,\n maxInputFontSize,\n minInputFontSize,\n ToggleButton,\n} from './AmountInputCard.style.js'\n\nconst formType = 'to' as const\n\ntype ReceiveCardProps = CardProps & { mask?: boolean }\n\nconst ReceiveAmountCardLayout = ({\n cardProps,\n title,\n headerEnd,\n amount,\n footerStart,\n footerEnd,\n}: {\n cardProps: ReceiveCardProps\n title: string\n headerEnd?: ReactNode\n amount: ReactNode\n footerStart: ReactNode\n footerEnd?: ReactNode\n}): JSX.Element => (\n <AmountCard {...cardProps} formType={formType}>\n <CardHeaderRow>\n <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n {headerEnd}\n </CardHeaderRow>\n <CardBodyRow>\n {amount}\n <TokenPillButton formType={formType} />\n </CardBodyRow>\n <CardFooterRow>\n {footerStart}\n {footerEnd}\n </CardFooterRow>\n </AmountCard>\n)\n\nconst PriceImpactBadge = ({\n priceImpact,\n}: {\n priceImpact: number \| undefined\n}): JSX.Element \| null => {\n const { t } = useTranslation()\n if (priceImpact === undefined) {\n return null\n }\n return (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n <FooterText>\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </FooterText>\n <Tooltip title={t('tooltip.priceImpact')}>\n <InfoOutlinedIcon\n sx={{ fontSize: 16, color: 'text.secondary', cursor: 'help' }}\n />\n </Tooltip>\n </Box>\n )\n}\n\nconst useReceivePriceImpact = (\n route: Route \| undefined\n): number \| undefined => {\n const { hiddenUI } = useWidgetConfig()\n if (!route \|\| hiddenUI?.routeCardPriceImpact) {\n return undefined\n }\n return getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n}\n\n/*\n The receive amount is a read-only quote derived from the best route, with a\n * fiat/token toggle and price impact in the footer. In limit mode the amount is\n * still the quote for the current limit (the limit price drives it via the\n * dedicated price card); it is never edited here, and the header shows the\n * refetch progress indicator with a \"Buy\" title.\n */\nexport const ReceiveAmountCard: React.FC<ReceiveCardProps> = (\n props\n): JSX.Element => {\n const { t } = useTranslation()\n const amountRef = useRef<HTMLSpanElement>(null)\n const { inputMode, toggleInputMode } = useInputModeStore()\n const showFiat = inputMode[formType] === 'price'\n const { hiddenUI, mode } = useWidgetConfig()\n const isLimit = mode === 'limit'\n\n const [selectedRouteId] = useFieldValues('selectedRouteId')\n const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } =\n useRoutes()\n // Reflect the route the user selected in the routes list (falling back to the\n // best route), so the buy amount matches the highlighted provider card.\n const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0]\n const priceImpact = useReceivePriceImpact(route)\n const showPriceImpact = !hiddenUI?.routeCardPriceImpact\n\n const receiveAmount = route?.toAmount\n ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)\n : undefined\n // Only show skeletons on the initial fetch.\n const showSkeleton = isFetching && !receiveAmount\n\n const fiatValue =\n receiveAmount && route?.toToken.priceUSD\n ? formatTokenPrice(receiveAmount, route.toToken.priceUSD)\n : 0\n const canToggle = !!receiveAmount && !!route?.toToken.priceUSD\n\n const mainDisplay = showFiat\n ? t('format.currency', { value: fiatValue })\n : t('format.tokenAmount', { value: receiveAmount \|\| '0' })\n const footerDisplay = showFiat\n ? t('format.tokenAmount', { value: receiveAmount \|\| '0' })\n : t('format.currency', { value: fiatValue })\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n useLayoutEffect(() => {\n if (amountRef.current) {\n fitInputText(maxInputFontSize, minInputFontSize, amountRef.current)\n }\n }, [mainDisplay])\n\n return (\n <ReceiveAmountCardLayout\n cardProps={props}\n title={isLimit ? t('header.buy') : t('header.receive')}\n headerEnd={\n isLimit && (isFetching \|\| routes?.length) ? (\n <ProgressToNextUpdate\n updatedAt={dataUpdatedAt \|\| Date.now()}\n timeToUpdate={refetchTime}\n isLoading={isFetching}\n onClick={() => refetch()}\n sx={{ padding: 0 }}\n />\n ) : undefined\n }\n amount={\n showSkeleton ? (\n <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n ) : (\n <AmountDisplay\n ref={amountRef}\n sx={{ color: 'text.primary', opacity: receiveAmount ? 1 : 0.5 }}\n >\n {mainDisplay}\n </AmountDisplay>\n )\n }\n footerStart={\n showSkeleton ? (\n <Skeleton\n variant=\"text\"\n width={72}\n sx={{ fontSize: footerFontSize }}\n />\n ) : (\n <ToggleButton\n clickable={canToggle}\n onClick={canToggle ? () => toggleInputMode(formType) : undefined}\n aria-label={canToggle ? 'Toggle fiat value' : undefined}\n >\n <FooterText>{footerDisplay}</FooterText>\n {canToggle ? (\n <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n ) : null}\n </ToggleButton>\n )\n }\n footerEnd={\n showSkeleton ? (\n showPriceImpact ? (\n <Skeleton\n variant=\"text\"\n width={56}\n sx={{ fontSize: footerFontSize }}\n />\n ) : null\n ) : (\n <PriceImpactBadge priceImpact={priceImpact} />\n )\n }\n />\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"ReceiveAmountCard.js","names":["InfoOutlinedIcon"],"sources":["../../../../src/components/AmountInputCard/ReceiveAmountCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport type { CardProps } from '@mui/material'\nimport { Box, Skeleton, Tooltip } from '@mui/material'\nimport { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n AmountCard,\n AmountDisplay,\n amountHeight,\n CardBodyRow,\n CardFooterRow,\n CardHeaderRow,\n FooterText,\n footerFontSize,\n maxInputFontSize,\n minInputFontSize,\n ToggleButton,\n} from './AmountInputCard.style.js'\n\nconst formType = 'to' as const\n\ntype ReceiveCardProps = CardProps & { mask?: boolean }\n\nconst ReceiveAmountCardLayout = ({\n cardProps,\n title,\n headerEnd,\n amount,\n footerStart,\n footerEnd,\n}: {\n cardProps: ReceiveCardProps\n title: string\n headerEnd?: ReactNode\n amount: ReactNode\n footerStart: ReactNode\n footerEnd?: ReactNode\n}): JSX.Element => (\n <AmountCard {...cardProps} formType={formType}>\n <CardHeaderRow>\n <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n {headerEnd}\n </CardHeaderRow>\n <CardBodyRow>\n {amount}\n <TokenPillButton formType={formType} />\n </CardBodyRow>\n <CardFooterRow>\n {footerStart}\n {footerEnd}\n </CardFooterRow>\n </AmountCard>\n)\n\nconst PriceImpactBadge = ({\n priceImpact,\n}: {\n priceImpact: number \| undefined\n}): JSX.Element \| null => {\n const { t } = useTranslation()\n if (priceImpact === undefined) {\n return null\n }\n return (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n <FooterText>\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </FooterText>\n <Tooltip title={t('tooltip.priceImpact')}>\n <InfoOutlinedIcon\n sx={{ fontSize: 16, color: 'text.secondary', cursor: 'help' }}\n />\n </Tooltip>\n </Box>\n )\n}\n\nconst useReceivePriceImpact = (\n route: Route \| undefined\n): number \| undefined => {\n const { hiddenUI } = useWidgetConfig()\n if (!route \|\| hiddenUI?.routeCardPriceImpact) {\n return undefined\n }\n return getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n}\n\n/*\n The receive amount is a read-only quote derived from the best route, with a\n * fiat/token toggle and price impact in the footer. In limit mode the amount is\n * still the quote for the current limit (the limit price drives it via the\n * dedicated price card); it is never edited here, and the header shows the\n * refetch progress indicator with a \"Buy\" title.\n */\nexport const ReceiveAmountCard: React.FC<ReceiveCardProps> = (\n props\n): JSX.Element => {\n const { t } = useTranslation()\n const amountRef = useRef<HTMLSpanElement>(null)\n const { inputMode, toggleInputMode } = useInputModeStore()\n const showFiat = inputMode[formType] === 'price'\n const { hiddenUI, mode } = useWidgetConfig()\n const isLimit = mode === 'limit'\n\n const [selectedRouteId] = useFieldValues('selectedRouteId')\n const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } =\n useRoutes()\n // Reflect the route the user selected in the routes list (falling back to the\n // best route), so the buy amount matches the highlighted provider card.\n const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0]\n const priceImpact = useReceivePriceImpact(route)\n const showPriceImpact = !hiddenUI?.routeCardPriceImpact\n\n const receiveAmount = route?.toAmount\n ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)\n : undefined\n // Only show skeletons on the initial fetch.\n const showSkeleton = isFetching && !receiveAmount\n\n const fiatValue =\n receiveAmount && route?.toToken.priceUSD\n ? formatTokenPrice(receiveAmount, route.toToken.priceUSD)\n : 0\n const canToggle = !!receiveAmount && !!route?.toToken.priceUSD\n\n const mainDisplay = showFiat\n ? t('format.currency', { value: fiatValue })\n : t('format.tokenAmount', { value: receiveAmount \|\| '0' })\n const footerDisplay = showFiat\n ? t('format.tokenAmount', { value: receiveAmount \|\| '0' })\n : t('format.currency', { value: fiatValue })\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n useLayoutEffect(() => {\n if (amountRef.current) {\n fitInputText(maxInputFontSize, minInputFontSize, amountRef.current)\n }\n }, [mainDisplay])\n\n return (\n <ReceiveAmountCardLayout\n cardProps={props}\n title={isLimit ? t('header.buy') : t('header.receive')}\n headerEnd={\n isLimit && (isFetching \|\| routes?.length) ? (\n <ProgressToNextUpdate\n updatedAt={dataUpdatedAt \|\| Date.now()}\n timeToUpdate={refetchTime}\n isLoading={isFetching}\n onClick={() => refetch()}\n sx={{ padding: 0 }}\n />\n ) : undefined\n }\n amount={\n showSkeleton ? (\n <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n ) : (\n <AmountDisplay\n ref={amountRef}\n sx={{ color: 'text.primary', opacity: receiveAmount ? 1 : 0.5 }}\n >\n {mainDisplay}\n </AmountDisplay>\n )\n }\n footerStart={\n showSkeleton ? (\n <Skeleton\n variant=\"text\"\n width={72}\n sx={{ fontSize: footerFontSize }}\n />\n ) : (\n <ToggleButton\n clickable={canToggle}\n onClick={canToggle ? () => toggleInputMode(formType) : undefined}\n aria-label={canToggle ? 'Toggle fiat value' : undefined}\n >\n <FooterText>{footerDisplay}</FooterText>\n {canToggle ? (\n <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n ) : null}\n </ToggleButton>\n )\n }\n footerEnd={\n showSkeleton ? (\n showPriceImpact ? (\n <Skeleton\n variant=\"text\"\n width={56}\n sx={{ fontSize: footerFontSize }}\n />\n ) : null\n ) : (\n <PriceImpactBadge priceImpact={priceImpact} />\n )\n }\n />\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/AmountInputCard/SendAmountCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SendAmountCard.js","names":[],"sources":["../../../../src/components/AmountInputCard/SendAmountCard.tsx"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport type { ChangeEvent, JSX } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper } 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 {\n formatInputAmount,\n formatTokenPrice,\n priceToTokenAmount,\n usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n AmountCard,\n CardBodyRow,\n CardFooterRow,\n CardHeaderRow,\n LargeInput,\n maxInputFontSize,\n minInputFontSize,\n} from './AmountInputCard.style.js'\nimport { BalanceDisplay } from './BalanceDisplay.js'\nimport { FiatValueToggle } from './FiatValueToggle.js'\nimport { PercentageChips } from './PercentageChips.js'\n\nexport const SendAmountCard: React.FC<CardProps & { mask?: boolean }> = (\n props\n): JSX.Element => {\n const { t } = useTranslation()\n const { disabledUI, mode, modeOptions } = useWidgetConfig()\n const ref = useRef<HTMLInputElement>(null)\n const isEditingRef = useRef(false)\n const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n const formType = 'from' as const\n\n const [chainId, tokenAddress, value] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType),\n FormKeyHelper.getAmountKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n const { setFieldValue } = useFieldActions()\n const { inputMode } = useInputModeStore()\n const { setSendAmount } = useLinkedLimitFields()\n const currentInputMode = inputMode[formType]\n const disabled = disabledUI?.fromAmount\n\n // In limit mode the send amount drives the linked receive amount; otherwise\n // it is a plain form-field write.\n const applyFromAmount = (value: string): void => {\n if (mode === 'limit') {\n setSendAmount(value)\n } else {\n setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })\n }\n }\n\n const title =\n mode === 'limit'\n ? t('header.sell')\n : mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n ? t('header.deposit')\n : t('header.send')\n\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 ): void => {\n const { value: inputValue } = event.target\n isEditingRef.current = true\n\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n const formattedValue = formatInputAmount(\n cleanInputValue,\n usdDecimals,\n true\n )\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n setFormattedPriceInput(formattedValue)\n applyFromAmount(tokenValue)\n } else {\n const formattedValue = formatInputAmount(\n inputValue,\n token?.decimals,\n true\n )\n applyFromAmount(formattedValue)\n }\n }\n\n const handleBlur = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ): void => {\n const { value: inputValue } = event.target\n isEditingRef.current = false\n\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n const formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n applyFromAmount(formattedAmount)\n } else {\n const formattedValue = formatInputAmount(inputValue, token?.decimals)\n applyFromAmount(formattedValue)\n }\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n useLayoutEffect(() => {\n if (ref.current) {\n fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n }\n }, [displayValue])\n\n return (\n <AmountCard {...props} formType={formType}>\n <CardHeaderRow>\n <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n <PercentageChips formType={formType} />\n </CardHeaderRow>\n <CardBodyRow>\n <LargeInput\n inputRef={ref}\n size=\"small\"\n autoComplete=\"off\"\n placeholder={currentInputMode === 'price' ? '$0' : '0'}\n inputProps={{ inputMode: 'decimal' }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={\n currentInputMode === 'price'\n ? displayValue\n ? `$${displayValue}`\n : ''\n : displayValue\n }\n name=\"fromAmount\"\n disabled={disabled}\n required\n />\n <TokenPillButton formType={formType} />\n </CardBodyRow>\n <CardFooterRow>\n <FiatValueToggle formType={formType} />\n <BalanceDisplay formType={formType} />\n </CardFooterRow>\n </AmountCard>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,MAAa,kBACX,UACgB;CAChB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,YAAY,MAAM,gBAAgB,gBAAgB;CAC1D,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,EAAE;CAEjE,MAAM,WAAW;CAEjB,MAAM,CAAC,SAAS,cAAc,SAAS,eACrC,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,GAClC,cAAc,aAAa,QAAQ,CACrC;CAEA,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAChD,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,kBAAkB,qBAAqB;CAC/C,MAAM,mBAAmB,UAAU;CACnC,MAAM,WAAW,YAAY;CAI7B,MAAM,mBAAmB,UAAwB;EAC/C,IAAI,SAAS,SACX,cAAc,KAAK;OAEnB,cAAc,cAAc,OAAO;GAAE,SAAS;GAAM,WAAW;EAAK,CAAC;CAEzE;CAEA,MAAM,QACJ,SAAS,UACL,EAAE,aAAa,IACf,SAAS,YAAY,aAAa,QAAQ,SAAS,YACjD,EAAE,gBAAgB,IAClB,EAAE,aAAa;CAEvB,IAAI;CACJ,IAAI,aAAa,SACf,IAAI,qBAAqB,SACvB,eAAe;MAEf,eAAe;MAGjB,IAAI,qBAAqB,SAEvB,eAAe,kBADI,iBAAiB,OAAiB,OAAO,QAEjD,CAAC,CAAC,QAAA,CAAmB,GAAA,CAEhC;MAEA,eAAe;CAInB,MAAM,gBACJ,UACS;EACT,MAAM,EAAE,OAAO,eAAe,MAAM;EACpC,aAAa,UAAU;EAEvB,IAAI,qBAAqB,SAAS;GAEhC,MAAM,iBAAiB,kBADC,WAAW,QAAQ,KAAK,EAEhC,GAAA,GAEd,IACF;GACA,MAAM,aAAa,mBAAmB,gBAAgB,OAAO,QAAQ;GACrE,uBAAuB,cAAc;GACrC,gBAAgB,UAAU;EAC5B,OAAO;GACL,MAAM,iBAAiB,kBACrB,YACA,OAAO,UACP,IACF;GACA,gBAAgB,cAAc;EAChC;CACF;CAEA,MAAM,cACJ,UACS;EACT,MAAM,EAAE,OAAO,eAAe,MAAM;EACpC,aAAa,UAAU;EAEvB,IAAI,qBAAqB,SAAS;GAIhC,MAAM,kBAAkB,kBADL,mBADI,kBADC,WAAW,QAAQ,KAAK,EACO,GAAA,CACJ,GAAG,OAAO,QACV,GAAG,OAAO,QAAQ;GACrE,gBAAgB,eAAe;EACjC,OAAO;GACL,MAAM,iBAAiB,kBAAkB,YAAY,OAAO,QAAQ;GACpE,gBAAgB,cAAc;EAChC;CACF;CAGA,sBAAsB;EACpB,IAAI,IAAI,SACN,aAAA,IAAA,IAAiD,IAAI,OAAO;CAEhE,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,YAAD;EAAY,GAAI;EAAiB;~~YAAjC~~;GACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,WAAD;IAAW,IAAI,EAAE,SAAS,EAAE;~~cAAI~~;GAAiB,CAAA,GACjD,oBAAC,iBAAD,EAA2B,SAAW,CAAA,CACzB,EAAA,CAAA;GACf,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,YAAD;IACE,UAAU;IACV,MAAK;IACL,cAAa;IACb,aAAa,qBAAqB,UAAU,OAAO;IACnD,YAAY,EAAE,WAAW,UAAU;IACnC,UAAU;IACV,QAAQ;IACR,OACE,qBAAqB,UACjB,eACE,IAAI,iBACJ,KACF;IAEN,MAAK;IACK;IACV,UAAA;GACD,CAAA,GACD,oBAAC,iBAAD,EAA2B,SAAW,CAAA,CAC3B,EAAA,CAAA;GACb,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,iBAAD,EAA2B,SAAW,CAAA,GACtC,oBAAC,gBAAD,EAA0B,SAAW,CAAA,CACxB,EAAA,CAAA;EACL;;AAEhB"}
1	+ {"version":3,"file":"SendAmountCard.js","names":[],"sources":["../../../../src/components/AmountInputCard/SendAmountCard.tsx"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport type { ChangeEvent, JSX } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper } 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 {\n formatInputAmount,\n formatTokenPrice,\n priceToTokenAmount,\n usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n AmountCard,\n CardBodyRow,\n CardFooterRow,\n CardHeaderRow,\n LargeInput,\n maxInputFontSize,\n minInputFontSize,\n} from './AmountInputCard.style.js'\nimport { BalanceDisplay } from './BalanceDisplay.js'\nimport { FiatValueToggle } from './FiatValueToggle.js'\nimport { PercentageChips } from './PercentageChips.js'\n\nexport const SendAmountCard: React.FC<CardProps & { mask?: boolean }> = (\n props\n): JSX.Element => {\n const { t } = useTranslation()\n const { disabledUI, mode, modeOptions } = useWidgetConfig()\n const ref = useRef<HTMLInputElement>(null)\n const isEditingRef = useRef(false)\n const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n const formType = 'from' as const\n\n const [chainId, tokenAddress, value] = useFieldValues(\n FormKeyHelper.getChainKey(formType),\n FormKeyHelper.getTokenKey(formType),\n FormKeyHelper.getAmountKey(formType)\n )\n\n const { token } = useToken(chainId, tokenAddress)\n const { setFieldValue } = useFieldActions()\n const { inputMode } = useInputModeStore()\n const { setSendAmount } = useLinkedLimitFields()\n const currentInputMode = inputMode[formType]\n const disabled = disabledUI?.fromAmount\n\n // In limit mode the send amount drives the linked receive amount; otherwise\n // it is a plain form-field write.\n const applyFromAmount = (value: string): void => {\n if (mode === 'limit') {\n setSendAmount(value)\n } else {\n setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })\n }\n }\n\n const title =\n mode === 'limit'\n ? t('header.sell')\n : mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n ? t('header.deposit')\n : t('header.send')\n\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 ): void => {\n const { value: inputValue } = event.target\n isEditingRef.current = true\n\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n const formattedValue = formatInputAmount(\n cleanInputValue,\n usdDecimals,\n true\n )\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n setFormattedPriceInput(formattedValue)\n applyFromAmount(tokenValue)\n } else {\n const formattedValue = formatInputAmount(\n inputValue,\n token?.decimals,\n true\n )\n applyFromAmount(formattedValue)\n }\n }\n\n const handleBlur = (\n event: ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n ): void => {\n const { value: inputValue } = event.target\n isEditingRef.current = false\n\n if (currentInputMode === 'price') {\n const cleanInputValue = inputValue.replace('$', '')\n const formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n applyFromAmount(formattedAmount)\n } else {\n const formattedValue = formatInputAmount(inputValue, token?.decimals)\n applyFromAmount(formattedValue)\n }\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n useLayoutEffect(() => {\n if (ref.current) {\n fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n }\n }, [displayValue])\n\n return (\n <AmountCard {...props} formType={formType}>\n <CardHeaderRow>\n <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n <PercentageChips formType={formType} />\n </CardHeaderRow>\n <CardBodyRow>\n <LargeInput\n inputRef={ref}\n size=\"small\"\n autoComplete=\"off\"\n placeholder={currentInputMode === 'price' ? '$0' : '0'}\n inputProps={{ inputMode: 'decimal' }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={\n currentInputMode === 'price'\n ? displayValue\n ? `$${displayValue}`\n : ''\n : displayValue\n }\n name=\"fromAmount\"\n disabled={disabled}\n required\n />\n <TokenPillButton formType={formType} />\n </CardBodyRow>\n <CardFooterRow>\n <FiatValueToggle formType={formType} />\n <BalanceDisplay formType={formType} />\n </CardFooterRow>\n </AmountCard>\n )\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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