@lifi/widget 3.0.0-alpha.1 → 3.0.0-alpha.11

package/App.tsx

@@ -0,0 +1,29 @@
+'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, 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}
+      />
+    );
+  },
+);

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,141 @@
+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 './AppDefault';
+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}
+          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
+        >
+          <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/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}>
+        <ThemeProvider>
+          <I18nProvider>
+            <WalletProvider>
+              <StoreProvider config={config}>
+                <AppRouter>{children}</AppRouter>
+              </StoreProvider>
+            </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>
+  );
+};