From 5407a34fd6109734ed0a6a27f2cc5445df83d6d7 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Thu, 13 Oct 2022 11:01:45 +0100 Subject: [PATCH] feat: add drawer variant to main config --- packages/widget-embedded/src/App.tsx | 18 ++++++++--------- packages/widget-embedded/src/config.ts | 13 ++++++++++-- packages/widget/src/App.tsx | 28 ++++++++++++++++++-------- packages/widget/src/AppDrawer.tsx | 11 ++-------- packages/widget/src/AppProvider.tsx | 8 ++------ packages/widget/src/index.ts | 6 +++++- packages/widget/src/types/widget.ts | 8 +++++++- 7 files changed, 56 insertions(+), 36 deletions(-) diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx index d862f1664..4a1b7f8c6 100644 --- 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 = () => { - {drawer ? ( - - ) : ( - - )} + diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts index 5a7167632..2d3fddf45 100644 --- 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 index 0550717b5..42014e146 100644 --- 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 = ({ config }) => { - return ( - - - - ); -}; +export const App: React.FC = forwardRef( + ({ elementRef, open, config }, ref) => { + return config?.variant !== 'drawer' ? ( + + + + ) : ( + + ); + }, +); export const AppDefault = () => { const expandable = useExpandableVariant(); diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx index a1d0be177..1e9fedd55 100644 --- 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; - 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( +export const AppDrawer = forwardRef( ({ 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 index f1b2d7341..cab1a467e 100644 --- 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 >; -export const AppProvider: React.FC> = ({ +export const AppProvider: React.FC> = ({ children, config, }) => { diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index c78af6476..136aebfee 100644 --- 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 index f7d496991..4f9222189 100644 --- 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 & Pick)[]; }; } + +export type WidgetProps = { + elementRef?: RefObject; + config?: WidgetConfig; + open?: boolean; +};