feat: add drawer variant to main config

lifinance · Oct 13, 2022 · 5407a34 · 5407a34
1 parent e7e0079
commit 5407a34
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 36 deletions.
diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx
@@ -4,7 +4,7 @@ import {
   switchChain,
   switchChainAndAddToken,
 } from '@lifi/wallet-management';
-import { LiFiWidget, LiFiWidgetDrawer } from '@lifi/widget';
+import { LiFiWidget } from '@lifi/widget';
 import {
   Box,
   // Button,
@@ -23,7 +23,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 import { WalletButtons } from './components/WalletButtons';
 import { WidgetEvents } from './components/WidgetEvents';
-import { widgetConfig, widgetDrawerConfig } from './config';
+import { widgetBaseConfig, widgetConfig } from './config';
 import './index.css';
 import { useWallet } from './providers/WalletProvider';
 
@@ -67,7 +67,7 @@ export const App = () => {
   useEffect(() => {
     setConfig(() => ({
       ...(drawer
-        ? widgetDrawerConfig
+        ? widgetBaseConfig
         : {
             ...widgetConfig,
             appearance: systemColor ? 'auto' : darkMode ? 'dark' : 'light',
@@ -97,7 +97,11 @@ export const App = () => {
           fontFamily,
         },
       },
-      variant: expandableRoutesView ? 'expandable' : 'default',
+      variant: drawer
+        ? 'drawer'
+        : expandableRoutesView
+        ? 'expandable'
+        : 'default',
     }));
   }, [
     borderRadius,
@@ -311,11 +315,7 @@ export const App = () => {
           </Box>
         </Drawer>
         <Box flex={1} margin="auto">
-          {drawer ? (
-            <LiFiWidgetDrawer config={config} open />
-          ) : (
-            <LiFiWidget config={config} />
-          )}
+          <LiFiWidget config={config} open />
         </Box>
       </Box>
     </ThemeProvider>

diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts
@@ -1,7 +1,7 @@
 import type { WidgetConfig } from '@lifi/widget';
 import './index.css';
 
-export const widgetDrawerConfig: WidgetConfig = {
+export const widgetBaseConfig: WidgetConfig = {
   // fromChain: 137,
   // toChain: 10,
   // fromToken: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
@@ -22,6 +22,15 @@ export const widgetDrawerConfig: WidgetConfig = {
   // },
   tokens: {
     featured: [
+      // {
+      //   address: '0xba98c0fbebc892f5b07a42b0febd606913ebc981',
+      //   symbol: 'MEH',
+      //   decimals: 18,
+      //   chainId: 1,
+      //   name: 'meh',
+      //   logoURI:
+      //     'https://s2.coinmarketcap.com/static/img/coins/64x64/22158.png',
+      // },
       {
         address: '0x195e3087ea4d7eec6e9c37e9640162fe32433d5e',
         symbol: '$ALTI',
@@ -91,7 +100,7 @@ export const widgetDrawerConfig: WidgetConfig = {
 };
 
 export const widgetConfig: WidgetConfig = {
-  ...widgetDrawerConfig,
+  ...widgetBaseConfig,
   containerStyle: {
     // border: `1px solid ${
     //   window.matchMedia('(prefers-color-scheme: dark)').matches

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,4 +1,6 @@
-import type { AppProps } from './AppProvider';
+import { forwardRef } from 'react';
+import type { WidgetDrawer } from './AppDrawer';
+import { AppDrawer } from './AppDrawer';
 import { AppProvider } from './AppProvider';
 import { AppRoutes } from './AppRoutes';
 import {
@@ -11,14 +13,24 @@ import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
 import { useExpandableVariant } from './hooks';
+import type { WidgetProps } from './types';
 
-export const App: React.FC<AppProps> = ({ config }) => {
-  return (
-    <AppProvider config={config}>
-      <AppDefault />
-    </AppProvider>
-  );
-};
+export const App: React.FC<WidgetProps> = forwardRef<WidgetDrawer, WidgetProps>(
+  ({ elementRef, open, config }, ref) => {
+    return config?.variant !== 'drawer' ? (
+      <AppProvider config={config}>
+        <AppDefault />
+      </AppProvider>
+    ) : (
+      <AppDrawer
+        ref={ref}
+        elementRef={elementRef}
+        config={config}
+        open={open}
+      />
+    );
+  },
+);
 
 export const AppDefault = () => {
   const expandable = useExpandableVariant();

diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -2,9 +2,7 @@ import {
   KeyboardArrowLeft as KeyboardArrowLeftIcon,
   KeyboardArrowRight as KeyboardArrowRightIcon,
 } from '@mui/icons-material';
-import type { DrawerProps } from '@mui/material';
 import { Drawer } from '@mui/material';
-import type { RefObject } from 'react';
 import {
   forwardRef,
   useCallback,
@@ -17,12 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
-import type { WidgetConfig } from './types';
-
-export type WidgetDrawerProps = DrawerProps & {
-  elementRef?: RefObject<HTMLDivElement>;
-  config?: WidgetConfig;
-};
+import type { WidgetConfig, WidgetProps } from './types';
 
 export interface WidgetDrawer {
   isOpen(): void;
@@ -31,7 +24,7 @@ export interface WidgetDrawer {
   closeDrawer(): void;
 }
 
-export const AppDrawer = forwardRef<WidgetDrawer, WidgetDrawerProps>(
+export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
   ({ elementRef, open, config }, ref) => {
     const { t } = useTranslation();
     const openRef = useRef(open);

diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx
@@ -3,7 +3,6 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import type { FC, PropsWithChildren } from 'react';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
-import type { WidgetConfig } from '.';
 import { queryClient } from './config/queryClient';
 import {
   SDKProvider,
@@ -13,16 +12,13 @@ import {
   WalletProvider,
   WidgetProvider,
 } from './providers';
-
-export interface AppProps {
-  config?: WidgetConfig;
-}
+import type { WidgetProps } from './types';
 
 const QueryProvider = QueryClientProvider as FC<
   PropsWithChildren<QueryClientProviderProps>
 >;
 
-export const AppProvider: React.FC<PropsWithChildren<AppProps>> = ({
+export const AppProvider: React.FC<PropsWithChildren<WidgetProps>> = ({
   children,
   config,
 }) => {

diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -3,7 +3,7 @@ import { AppDrawer } from './AppDrawer';
 import './fonts/inter.css';
 import { configureReactI18next } from './i18n';
 
-export type { WidgetDrawer, WidgetDrawerProps } from './AppDrawer';
+export type { WidgetDrawer } from './AppDrawer';
 export { useWidgetEvents } from './hooks';
 export * from './types';
 
@@ -13,4 +13,8 @@ configureReactI18next();
 // );
 
 export const LiFiWidget = App;
+
+/**
+ * @deprecated Use configuration { variant: 'drawer' } instead
+ */
 export const LiFiWidgetDrawer = AppDrawer;
diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -2,7 +2,7 @@ import type { ChainKey, ConfigUpdate, Token } from '@lifi/sdk';
 import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, RefObject } from 'react';
 
 export type WidgetVariant = 'default' | 'expandable' | 'drawer';
 
@@ -69,3 +69,9 @@ export interface WidgetConfig {
     deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
   };
 }
+
+export type WidgetProps = {
+  elementRef?: RefObject<HTMLDivElement>;
+  config?: WidgetConfig;
+  open?: boolean;
+};