@lifi/widget 3.0.0-alpha.0 → 3.0.0-alpha.2

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.2",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "lint-staged": {
-    "src/**/*.{ts,tsx}": [
-      "yarn run lint:fix",
-      "yarn run prettier:fix"
-    ]
-  },
+  "type": "module",
+  "main": "./src/_esm/index.js",
+  "module": "./src/_esm/index.js",
+  "types": "./src/_esm/index.d.ts",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -40,7 +36,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@lifi/sdk": "^3.0.0-alpha.36",
-    "@lifi/wallet-management": "^3.0.0-alpha.0",
+    "@lifi/wallet-management": "^3.0.0-alpha.1",
     "@mui/icons-material": "^5.14.19",
     "@mui/lab": "^5.0.0-alpha.154",
     "@mui/material": "^5.14.19",
@@ -48,8 +44,8 @@
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.23",
     "@solana/web3.js": "^1.87.6",
-    "@tanstack/react-query": "^5.12.0",
-    "@tanstack/react-virtual": "^3.0.0-beta.68",
+    "@tanstack/react-query": "^5.12.2",
+    "@tanstack/react-virtual": "^3.0.0",
     "i18next": "^23.7.7",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
@@ -58,7 +54,7 @@
     "react-hook-form": "^7.48.2",
     "react-i18next": "^13.5.0",
     "react-intersection-observer": "^9.5.3",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.20.1",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
     "viem": "^2.0.0-beta.6",
@@ -75,9 +71,13 @@
       "optional": true
     }
   },
-  "eslintConfig": {
-    "extends": "../../.eslintrc"
+  "private": false,
+  "exports": {
+    ".": {
+      "types": "./src/_esm/index.d.ts",
+      "default": "./src/_esm/index.js"
+    },
+    "./package.json": "./package.json"
   },
-  "sideEffects": false,
-  "private": false
+  "typings": "./src/_esm/index.d.ts"
 }

package/src/App.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useMemo } from 'react';
+import type { WidgetDrawer } from './AppDrawer';
+import { AppDrawer } from './AppDrawer';
+import { AppProvider } from './AppProvider';
+import { AppRoutes } from './AppRoutes';
+import {
+  AppContainer,
+  AppExpandedContainer,
+  FlexContainer,
+} from './components/AppContainer';
+import { Header } from './components/Header';
+import { Initializer } from './components/Initializer';
+import { PoweredBy } from './components/PoweredBy';
+import { RoutesExpanded } from './components/Routes';
+import { useExpandableVariant } from './hooks';
+import { useWidgetConfig } from './providers';
+import type { WidgetConfig, WidgetProps } from './types';
+import { ElementId, createElementId } from './utils';
+
+export const App = forwardRef<WidgetDrawer, WidgetProps>(
+  ({ elementRef, open, integrator, ...other }, ref) => {
+    const config: WidgetConfig = useMemo(
+      () => ({ integrator, ...other, ...other.config }),
+      [integrator, other],
+    );
+    return config?.variant !== 'drawer' ? (
+      <AppProvider config={config}>
+        <AppDefault />
+      </AppProvider>
+    ) : (
+      <AppDrawer
+        ref={ref}
+        elementRef={elementRef}
+        integrator={integrator}
+        config={config}
+        open={open}
+      />
+    );
+  },
+);
+
+export const AppDefault = () => {
+  const { elementId } = useWidgetConfig();
+  const expandable = useExpandableVariant();
+
+  return (
+    <AppExpandedContainer
+      id={createElementId(ElementId.AppExpandedContainer, elementId)}
+    >
+      <AppContainer>
+        <Header />
+        <FlexContainer disableGutters>
+          <AppRoutes />
+        </FlexContainer>
+        <PoweredBy />
+        <Initializer />
+      </AppContainer>
+      {expandable ? <RoutesExpanded /> : null}
+    </AppExpandedContainer>
+  );
+};

package/src/AppDrawer.style.tsx

@@ -0,0 +1,109 @@
+import { Button, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const getButtonTransformWidth = (
+  drawerWidth?: number | string,
+  drawerMaxWidth?: number | string,
+) => {
+  if (typeof drawerWidth === 'number') {
+    return `${drawerWidth}px`;
+  }
+  if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+    return drawerWidth;
+  }
+  if (typeof drawerMaxWidth === 'number') {
+    return `${drawerMaxWidth}px`;
+  }
+  if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+    return drawerMaxWidth;
+  }
+  return '392px';
+};
+
+export const DrawerButton = styled(Button, {
+  shouldForwardProp: (prop) =>
+    !['open', 'drawerProps'].includes(prop as string),
+})<{
+  open?: boolean;
+  drawerProps?: {
+    width?: number | string;
+    maxWidth?: number | string;
+  };
+}>(({ theme, open, drawerProps }) => ({
+  background:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white,
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.white
+      : theme.palette.common.black,
+  alignItems: 'center',
+  borderRadius: `${theme.shape.borderRadiusSecondary}px 0 0 ${theme.shape.borderRadiusSecondary}px`,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  minHeight: 144,
+  minWidth: 40,
+  padding: theme.spacing(1, 0, 1, 0),
+  position: 'absolute',
+  right: 0,
+  top: 'calc(50% - 74px)',
+  transform: `translate3d(calc(${
+    open
+      ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
+      : '0px'
+  } * -1), 0, 0)`,
+  transition: theme.transitions.create(['transform'], {
+    duration: open
+      ? theme.transitions.duration.enteringScreen
+      : theme.transitions.duration.leavingScreen,
+    easing: open
+      ? theme.transitions.easing.easeOut
+      : theme.transitions.easing.sharp,
+  }),
+  zIndex: 1500,
+  '&:hover': {
+    background:
+      theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+  },
+  svg: {
+    color:
+      theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+  },
+}));
+
+export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
+  borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,
+  background:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white,
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.white
+      : theme.palette.common.black,
+  cursor: 'pointer',
+  display: 'flex',
+  flexDirection: 'row',
+  padding: theme.spacing(1),
+  position: 'relative',
+  textTransform: 'none',
+  transform: 'rotateZ(180deg)',
+  writingMode: 'vertical-rl',
+}));
+
+export const CloseButtonLayout = styled(IconButton)(() => ({
+  position: 'absolute',
+  top: '12px',
+  right: '26px',
+  zIndex: 1,
+  height: '40px',
+  width: '40px',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));

package/src/AppDrawer.tsx

@@ -0,0 +1,139 @@
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Drawer } from '@mui/material';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppDefault } from './App';
+import {
+  CloseButtonLayout,
+  DrawerButton,
+  DrawerButtonTypography,
+} from './AppDrawer.style';
+import { AppProvider } from './AppProvider';
+import type { WidgetConfig, WidgetProps, WidgetSubvariant } from './types';
+import { HiddenUI } from './types';
+
+export interface WidgetDrawer {
+  isOpen(): void;
+  toggleDrawer(): void;
+  openDrawer(): void;
+  closeDrawer(): void;
+}
+
+export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
+  ({ elementRef, open, integrator, config }, ref) => {
+    const openRef = useRef(open);
+    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+
+    const toggleDrawer = useCallback(() => {
+      setDrawerOpen((open) => !open);
+    }, []);
+
+    const openDrawer = useCallback(() => {
+      setDrawerOpen(true);
+    }, []);
+
+    const closeDrawer = useCallback(() => {
+      setDrawerOpen(false);
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+      }),
+      [closeDrawer, openDrawer, toggleDrawer],
+    );
+
+    const widgetConfig: WidgetConfig = useMemo(
+      () => ({
+        ...config,
+        integrator,
+        containerStyle: {
+          ...config?.containerStyle,
+          height: '100%',
+        },
+      }),
+      [config, integrator],
+    );
+
+    return (
+      <AppProvider config={widgetConfig}>
+        {!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (
+          <DrawerButton
+            variant="contained"
+            onClick={toggleDrawer}
+            open={drawerOpen}
+            drawerProps={config?.containerStyle}
+          >
+            {drawerOpen ? (
+              <KeyboardArrowRightIcon />
+            ) : (
+              <KeyboardArrowLeftIcon />
+            )}
+            <DrawerButtonText
+              open={drawerOpen}
+              subvariant={config?.subvariant}
+            />
+          </DrawerButton>
+        ) : null}
+        <Drawer
+          ref={elementRef}
+          anchor="right"
+          open={drawerOpen}
+          onClose={closeDrawer}
+          BackdropProps={{
+            sx: {
+              backgroundColor: 'rgb(0 0 0 / 48%)',
+              backdropFilter: 'blur(3px)',
+            },
+          }}
+          PaperProps={{
+            sx: {
+              width: config?.containerStyle?.width ?? '100%',
+              minWidth: config?.containerStyle?.minWidth ?? 360,
+              maxWidth: config?.containerStyle?.maxWidth ?? 392,
+            },
+          }}
+          keepMounted
+        >
+          <CloseButtonLayout onClick={closeDrawer} edge="end">
+            <CloseIcon />
+          </CloseButtonLayout>
+          <AppDefault />
+        </Drawer>
+      </AppProvider>
+    );
+  },
+);
+
+export const DrawerButtonText = ({
+  open,
+  subvariant,
+}: {
+  open: boolean;
+  subvariant?: WidgetSubvariant;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <DrawerButtonTypography>
+      {open
+        ? t('button.hide')
+        : subvariant === 'nft'
+          ? t('button.lifiCheckout')
+          : t('button.lifiExchange')}
+    </DrawerButtonTypography>
+  );
+};

package/src/AppProvider.tsx

@@ -0,0 +1,51 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import type { PropsWithChildren } from 'react';
+import { Fragment } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router-dom';
+import { queryClient } from './config/queryClient';
+import {
+  FormProvider,
+  I18nProvider,
+  ThemeProvider,
+  URLSearchParamsBuilder,
+  WalletProvider,
+  WidgetProvider,
+  useWidgetConfig,
+} from './providers';
+import { StoreProvider } from './stores';
+import type { WidgetConfigProps } from './types';
+
+export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WidgetProvider config={config}>
+        <ThemeProvider>
+          <I18nProvider>
+            <WalletProvider>
+              <FormProvider>
+                <StoreProvider config={config}>
+                  <AppRouter>{children}</AppRouter>
+                </StoreProvider>
+              </FormProvider>
+            </WalletProvider>
+          </I18nProvider>
+        </ThemeProvider>
+      </WidgetProvider>
+    </QueryClientProvider>
+  );
+};
+
+export const AppRouter: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+  const { buildUrl } = useWidgetConfig();
+  const inRouterContext = useInRouterContext();
+  const Router = inRouterContext ? Fragment : MemoryRouter;
+  return (
+    <Router>
+      {children}
+      {buildUrl ? <URLSearchParamsBuilder /> : null}
+    </Router>
+  );
+};

package/src/AppRoutes.tsx

@@ -0,0 +1,99 @@
+import type { RouteObject } from 'react-router-dom';
+import { useLocation, useRoutes } from 'react-router-dom';
+import { NotFound } from './components/NotFound';
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
+import { LanguagesPage } from './pages/LanguagesPage';
+import { MainPage } from './pages/MainPage';
+import { RoutesPage } from './pages/RoutesPage';
+import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
+import { SelectTokenPage } from './pages/SelectTokenPage';
+import { SelectWalletPage } from './pages/SelectWalletPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
+import { TransactionPage } from './pages/TransactionPage';
+import { navigationRoutes } from './utils';
+
+// SelectWalletPage should be accessible from every page and this handler helps avoid creating multiple paths.
+// Avoid using it for anything else, we need to come up with a better solution once we have one more page accessible from everywhere.
+const NotFoundRouteHandler = () => {
+  const { pathname } = useLocation();
+  return pathname.includes(navigationRoutes.selectWallet) ? (
+    <SelectWalletPage />
+  ) : (
+    <NotFound />
+  );
+};
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <MainPage />,
+  },
+  {
+    path: navigationRoutes.settings,
+    element: <SettingsPage />,
+  },
+  {
+    path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
+    element: <SelectEnabledToolsPage type="Bridges" />,
+  },
+  {
+    path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
+    element: <SelectEnabledToolsPage type="Exchanges" />,
+  },
+  {
+    path: `${navigationRoutes.settings}/${navigationRoutes.languages}`,
+    element: <LanguagesPage />,
+  },
+  {
+    path: navigationRoutes.fromToken,
+    element: <SelectTokenPage formType="from" />,
+  },
+  {
+    path: navigationRoutes.toToken,
+    element: <SelectTokenPage formType="to" />,
+  },
+  {
+    path: navigationRoutes.toTokenNative,
+    element: <SelectChainPage formType="to" selectNativeToken />,
+  },
+  {
+    path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
+    element: <SelectChainPage formType="from" />,
+  },
+  {
+    path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
+    element: <SelectChainPage formType="to" />,
+  },
+  {
+    path: navigationRoutes.routes,
+    element: <RoutesPage />,
+  },
+  {
+    path: navigationRoutes.activeTransactions,
+    element: <ActiveTransactionsPage />,
+  },
+  {
+    path: navigationRoutes.transactionHistory,
+    element: <TransactionHistoryPage />,
+  },
+  {
+    path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+    element: <TransactionDetailsPage />,
+  },
+  {
+    path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+    element: <TransactionPage />,
+  },
+  {
+    path: '*',
+    element: <NotFoundRouteHandler />,
+  },
+];
+
+export const AppRoutes = () => {
+  const element = useRoutes(routes);
+  return element;
+};

package/src/_esm/App.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { AppDrawer } from './AppDrawer';
+import { AppProvider } from './AppProvider';
+import { AppRoutes } from './AppRoutes';
+import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer';
+import { Header } from './components/Header';
+import { Initializer } from './components/Initializer';
+import { PoweredBy } from './components/PoweredBy';
+import { RoutesExpanded } from './components/Routes';
+import { useExpandableVariant } from './hooks';
+import { useWidgetConfig } from './providers';
+import { ElementId, createElementId } from './utils';
+export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
+    const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
+    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+});
+export const AppDefault = () => {
+    const { elementId } = useWidgetConfig();
+    const expandable = useExpandableVariant();
+    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
+};
+//# sourceMappingURL=App.js.map

package/src/_esm/App.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,aAAa,GACd,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClD,MAAM,MAAM,GAAiB,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EACjD,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAC;IACF,OAAO,MAAM,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,YACzB,KAAC,UAAU,KAAG,GACF,CACf,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,OAAO,CACL,MAAC,oBAAoB,IACnB,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,oBAAoB,EAAE,SAAS,CAAC,aAE9D,MAAC,YAAY,eACX,KAAC,MAAM,KAAG,EACV,KAAC,aAAa,IAAC,cAAc,kBAC3B,KAAC,SAAS,KAAG,GACC,EAChB,KAAC,SAAS,KAAG,EACb,KAAC,WAAW,KAAG,IACF,EACd,UAAU,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,IAAI,IAClB,CACxB,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/AppDrawer.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Drawer } from '@mui/material';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppDefault } from './App';
+import { CloseButtonLayout, DrawerButton, DrawerButtonTypography, } from './AppDrawer.style';
+import { AppProvider } from './AppProvider';
+import { HiddenUI } from './types';
+export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
+    const openRef = useRef(open);
+    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+    const toggleDrawer = useCallback(() => {
+        setDrawerOpen((open) => !open);
+    }, []);
+    const openDrawer = useCallback(() => {
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = useCallback(() => {
+        setDrawerOpen(false);
+    }, []);
+    useImperativeHandle(ref, () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer, toggleDrawer]);
+    const widgetConfig = useMemo(() => ({
+        ...config,
+        integrator,
+        containerStyle: {
+            ...config?.containerStyle,
+            height: '100%',
+        },
+    }), [config, integrator]);
+    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsxs(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+                    sx: {
+                        backgroundColor: 'rgb(0 0 0 / 48%)',
+                        backdropFilter: 'blur(3px)',
+                    },
+                }, PaperProps: {
+                    sx: {
+                        width: config?.containerStyle?.width ?? '100%',
+                        minWidth: config?.containerStyle?.minWidth ?? 360,
+                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
+                    },
+                }, keepMounted: true, children: [_jsx(CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: _jsx(CloseIcon, {}) }), _jsx(AppDefault, {})] })] }));
+});
+export const DrawerButtonText = ({ open, subvariant, }) => {
+    const { t } = useTranslation();
+    return (_jsx(DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
+};
+//# sourceMappingURL=AppDrawer.js.map

package/src/_esm/AppDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDrawer.js","sourceRoot":"","sources":["../../../src/AppDrawer.tsx"],"names":[],"mappings":"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"}