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

package/App.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { forwardRef, useMemo } from 'react';
+import { AppDefault } from './AppDefault';
+import type { WidgetDrawer } from './AppDrawer';
+import { AppDrawer } from './AppDrawer';
+import { AppProvider } from './AppProvider';
+import type { WidgetConfig, WidgetProps } from './types';
+
+export const App = forwardRef<WidgetDrawer, WidgetProps>(
+  ({ elementRef, open, onClose, integrator, ...other }, ref) => {
+    const config: WidgetConfig = useMemo(() => {
+      const config = { integrator, ...other, ...other.config };
+      if (config.variant === 'drawer') {
+        config.containerStyle = {
+          height: '100%',
+          ...config?.containerStyle,
+        };
+      }
+      return config;
+    }, [integrator, other]);
+
+    const app = (
+      <AppProvider config={config}>
+        <AppDefault />
+      </AppProvider>
+    );
+
+    if (config.variant === 'drawer') {
+      return (
+        <AppDrawer
+          ref={ref}
+          elementRef={elementRef}
+          integrator={integrator}
+          config={config}
+          open={open}
+          onClose={onClose}
+        >
+          {app}
+        </AppDrawer>
+      );
+    }
+
+    return app;
+  },
+);

package/AppDefault.tsx

@@ -0,0 +1,35 @@
+'use client';
+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 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/AppDrawer.tsx

@@ -0,0 +1,132 @@
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Drawer } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
+import type { WidgetDrawerContext } from './AppDrawerContext';
+import { DrawerContext } from './AppDrawerContext';
+import type { WidgetProps, WidgetSubvariant } from './types';
+import { HiddenUI } from './types';
+
+export interface WidgetDrawer {
+  isOpen(): void;
+  toggleDrawer(): void;
+  openDrawer(): void;
+  closeDrawer(): void;
+}
+
+export const AppDrawer = forwardRef<
+  WidgetDrawer,
+  PropsWithChildren<WidgetProps>
+>(({ elementRef, open, onClose, config, children }, ref) => {
+  const openRef = useRef(Boolean(open));
+  const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+
+  const toggleDrawer = useCallback(() => {
+    setDrawerOpen((open) => {
+      openRef.current = !open;
+      return openRef.current;
+    });
+    if (!openRef.current) {
+      onClose?.();
+    }
+  }, [onClose]);
+
+  const openDrawer = useCallback(() => {
+    setDrawerOpen(true);
+    openRef.current = true;
+  }, []);
+
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false);
+    openRef.current = false;
+    onClose?.();
+  }, [onClose]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      toggleDrawer,
+      openDrawer,
+      closeDrawer,
+    }),
+    [closeDrawer, openDrawer, toggleDrawer],
+  );
+
+  const drawerContext: WidgetDrawerContext = useMemo(
+    () => ({
+      closeDrawer,
+    }),
+    [closeDrawer],
+  );
+
+  return (
+    <DrawerContext.Provider value={drawerContext}>
+      {!config?.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}
+        slotProps={{
+          backdrop: {
+            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
+      >
+        {children}
+      </Drawer>
+    </DrawerContext.Provider>
+  );
+});
+
+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/AppDrawerContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export interface WidgetDrawerContext {
+  closeDrawer?(): void;
+}
+
+export const DrawerContext = createContext<WidgetDrawerContext>({});
+
+export const useDrawer = (): WidgetDrawerContext => useContext(DrawerContext);

package/AppProvider.tsx

@@ -0,0 +1,47 @@
+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 {
+  I18nProvider,
+  ThemeProvider,
+  WalletProvider,
+  WidgetProvider,
+  useWidgetConfig,
+} from './providers';
+import { StoreProvider, URLSearchParamsBuilder } from './stores';
+import type { WidgetConfigProps } from './types';
+
+export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WidgetProvider config={config}>
+        <WalletProvider>
+          <ThemeProvider>
+            <I18nProvider>
+              <StoreProvider config={config}>
+                <AppRouter>{children}</AppRouter>
+              </StoreProvider>
+            </I18nProvider>
+          </ThemeProvider>
+        </WalletProvider>
+      </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/AppRoutes.tsx

@@ -0,0 +1,126 @@
+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 {
+  BookmarksPage,
+  ConnectedWalletsPage,
+  RecentWalletsPage,
+  SendToWalletPage,
+  SendToConfiguredWalletPage,
+} from './pages/SendToWallet';
+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.sendToWallet,
+    element: <SendToWalletPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.bookmarks}`,
+    element: <BookmarksPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.recentWallets}`,
+    element: <RecentWalletsPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.connectedWallets}`,
+    element: <ConnectedWalletsPage />,
+  },
+  {
+    path: navigationRoutes.configuredWallets,
+    element: <SendToConfiguredWalletPage />,
+  },
+  {
+    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/_cjs/App.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { WidgetDrawer } from './AppDrawer';
+import type { WidgetConfig } from './types';
+export declare const App: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;

package/_cjs/App.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AppDefault_1 = require("./AppDefault");
+const AppDrawer_1 = require("./AppDrawer");
+const AppProvider_1 = require("./AppProvider");
+exports.App = (0, react_1.forwardRef)(({ elementRef, open, onClose, integrator, ...other }, ref) => {
+    const config = (0, react_1.useMemo)(() => {
+        const config = { integrator, ...other, ...other.config };
+        if (config.variant === 'drawer') {
+            config.containerStyle = {
+                height: '100%',
+                ...config?.containerStyle,
+            };
+        }
+        return config;
+    }, [integrator, other]);
+    const app = ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(AppDefault_1.AppDefault, {}) }));
+    if (config.variant === 'drawer') {
+        return ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open, onClose: onClose, children: app }));
+    }
+    return app;
+});
+//# sourceMappingURL=App.js.map

package/_cjs/App.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../App.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AACb,iCAA4C;AAC5C,6CAA0C;AAE1C,2CAAwC;AACxC,+CAA4C;AAG/B,QAAA,GAAG,GAAG,IAAA,kBAAU,EAC3B,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,MAAM,MAAM,GAAiB,IAAA,eAAO,EAAC,GAAG,EAAE;QACxC,MAAM,MAAM,GAAG,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;QACzD,IAAI,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,MAAM,CAAC,cAAc,GAAG;gBACtB,MAAM,EAAE,MAAM;gBACd,GAAG,MAAM,EAAE,cAAc;aAC1B,CAAC;QACJ,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,GAAG,GAAG,CACV,uBAAC,yBAAW,IAAC,MAAM,EAAE,MAAM,YACzB,uBAAC,uBAAU,KAAG,GACF,CACf,CAAC;IAEF,IAAI,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QAChC,OAAO,CACL,uBAAC,qBAAS,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,YAEf,GAAG,GACM,CACb,CAAC;IACJ,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC,CACF,CAAC"}

package/_cjs/AppDefault.d.ts

@@ -0,0 +1 @@
+export declare const AppDefault: () => import("react/jsx-runtime").JSX.Element;

package/_cjs/AppDefault.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppDefault = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppRoutes_1 = require("./AppRoutes");
+const AppContainer_1 = require("./components/AppContainer");
+const Header_1 = require("./components/Header");
+const Initializer_1 = require("./components/Initializer");
+const PoweredBy_1 = require("./components/PoweredBy");
+const Routes_1 = require("./components/Routes");
+const hooks_1 = require("./hooks");
+const providers_1 = require("./providers");
+const utils_1 = require("./utils");
+const AppDefault = () => {
+    const { elementId } = (0, providers_1.useWidgetConfig)();
+    const expandable = (0, hooks_1.useExpandableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.AppExpandedContainer, elementId), children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(Routes_1.RoutesExpanded, {}) : null] }));
+};
+exports.AppDefault = AppDefault;
+//# sourceMappingURL=AppDefault.js.map

package/_cjs/AppDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDefault.js","sourceRoot":"","sources":["../AppDefault.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AACb,2CAAwC;AACxC,4DAImC;AACnC,gDAA6C;AAC7C,0DAAuD;AACvD,sDAAmD;AACnD,gDAAqD;AACrD,mCAA+C;AAC/C,2CAA8C;AAC9C,mCAAqD;AAE9C,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,2BAAe,GAAE,CAAC;IACxC,MAAM,UAAU,GAAG,IAAA,4BAAoB,GAAE,CAAC;IAE1C,OAAO,CACL,wBAAC,mCAAoB,IACnB,EAAE,EAAE,IAAA,uBAAe,EAAC,iBAAS,CAAC,oBAAoB,EAAE,SAAS,CAAC,aAE9D,wBAAC,2BAAY,eACX,uBAAC,eAAM,KAAG,EACV,uBAAC,4BAAa,IAAC,cAAc,kBAC3B,uBAAC,qBAAS,KAAG,GACC,EAChB,uBAAC,qBAAS,KAAG,EACb,uBAAC,yBAAW,KAAG,IACF,EACd,UAAU,CAAC,CAAC,CAAC,uBAAC,uBAAc,KAAG,CAAC,CAAC,CAAC,IAAI,IAClB,CACxB,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB"}

package/_cjs/AppDrawer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { WidgetSubvariant } from './types';
+export interface WidgetDrawer {
+    isOpen(): void;
+    toggleDrawer(): void;
+    openDrawer(): void;
+    closeDrawer(): void;
+}
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & import("./types").WidgetConfig & import("./types").WidgetConfigPartialProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<WidgetDrawer>>;
+export declare const DrawerButtonText: ({ open, subvariant, }: {
+    open: boolean;
+    subvariant?: WidgetSubvariant | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/_cjs/AppDrawer.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerButtonText = exports.AppDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const KeyboardArrowLeft_1 = require("@mui/icons-material/KeyboardArrowLeft");
+const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const AppDrawer_style_1 = require("./AppDrawer.style");
+const AppDrawerContext_1 = require("./AppDrawerContext");
+const types_1 = require("./types");
+exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, onClose, config, children }, ref) => {
+    const openRef = (0, react_1.useRef)(Boolean(open));
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
+    const toggleDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen((open) => {
+            openRef.current = !open;
+            return openRef.current;
+        });
+        if (!openRef.current) {
+            onClose?.();
+        }
+    }, [onClose]);
+    const openDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(true);
+        openRef.current = true;
+    }, []);
+    const closeDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(false);
+        openRef.current = false;
+        onClose?.();
+    }, [onClose]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer, toggleDrawer]);
+    const drawerContext = (0, react_1.useMemo)(() => ({
+        closeDrawer,
+    }), [closeDrawer]);
+    return ((0, jsx_runtime_1.jsxs)(AppDrawerContext_1.DrawerContext.Provider, { value: drawerContext, children: [!config?.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, slotProps: {
+                    backdrop: {
+                        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: children })] }));
+});
+const DrawerButtonText = ({ open, subvariant, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
+};
+exports.DrawerButtonText = DrawerButtonText;
+//# sourceMappingURL=AppDrawer.js.map

package/_cjs/AppDrawer.js.map

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

package/_cjs/AppDrawer.style.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const DrawerButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "href" | "disabled" | "action" | "size" | "classes" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    open?: boolean | undefined;
+    drawerProps?: {
+        width?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+    } | undefined;
+}, {}, {}>;
+export declare const DrawerButtonTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "style" | "className" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CloseButtonLayout: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "disabled" | "action" | "size" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;