From d9b2a01cb2a72a2c5987d84e611b3136c0c4a1dc Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Mon, 20 Mar 2023 20:29:00 +0800 Subject: [PATCH] feat!: make integrator property required --- packages/widget-embedded/src/App.tsx | 1 + packages/widget-playground/src/App.tsx | 6 +-- .../src/providers/WalletProvider.tsx | 4 +- packages/widget/src/App.tsx | 10 +++-- packages/widget/src/AppDrawer.tsx | 7 ++-- .../components/Insurance/InsuranceSwitch.tsx | 37 +++++++++++++++++++ .../src/providers/SDKProvider/SDKProvider.tsx | 1 + .../WidgetProvider/WidgetProvider.tsx | 21 ++++++++++- packages/widget/src/types/widget.ts | 9 +++-- 9 files changed, 80 insertions(+), 16 deletions(-) create mode 100644 packages/widget/src/components/Insurance/InsuranceSwitch.tsx diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx index 143506ef6..40fb38b3e 100644 --- a/packages/widget-embedded/src/App.tsx +++ b/packages/widget-embedded/src/App.tsx @@ -25,6 +25,7 @@ export const App = () => { } contractTool={openSeaContractTool} config={widgetConfig} + integrator={widgetConfig.integrator} open /> diff --git a/packages/widget-playground/src/App.tsx b/packages/widget-playground/src/App.tsx index c5beec3fd..dc3cffc9e 100644 --- a/packages/widget-playground/src/App.tsx +++ b/packages/widget-playground/src/App.tsx @@ -24,11 +24,11 @@ import { Typography, useMediaQuery, } from '@mui/material'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import React, { useEffect, useState } from 'react'; import { WalletButtons } from './components/WalletButtons'; import { WidgetEvents } from './components/WidgetEvents'; -import { widgetBaseConfig, widgetConfig, WidgetVariants } from './config'; +import { WidgetVariants, widgetBaseConfig, widgetConfig } from './config'; import './index.css'; import { useWallet } from './providers/WalletProvider'; @@ -313,7 +313,7 @@ export const App = () => { - + diff --git a/packages/widget-playground/src/providers/WalletProvider.tsx b/packages/widget-playground/src/providers/WalletProvider.tsx index 7d86dedb7..f7b582ccf 100644 --- a/packages/widget-playground/src/providers/WalletProvider.tsx +++ b/packages/widget-playground/src/providers/WalletProvider.tsx @@ -2,10 +2,10 @@ import type { Signer } from '@ethersproject/abstract-signer'; import type { Token } from '@lifi/sdk'; import type { Wallet } from '@lifi/wallet-management'; import { - addChain as walletAddChain, - switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, + addChain as walletAddChain, + switchChain as walletSwitchChain, } from '@lifi/wallet-management'; import type { WalletAccount, WalletContextProps } from '@lifi/widget/providers'; import type { FC, PropsWithChildren } from 'react'; diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 7f78ba3e9..5fee9b0d8 100644 --- a/packages/widget/src/App.tsx +++ b/packages/widget/src/App.tsx @@ -16,16 +16,20 @@ import { useExpandableVariant } from './hooks'; import type { WidgetProps } from './types'; export const App: React.FC = forwardRef( - ({ elementRef, open, ...other }, ref) => { - const config = useMemo(() => ({ ...other, ...other.config }), [other]); + ({ elementRef, open, integrator, ...other }, ref) => { + const config = useMemo( + () => ({ integrator, ...other, ...other.config }), + [integrator, other], + ); return config?.variant !== 'drawer' ? ( - + ) : ( diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx index 8188443dc..f3e202c37 100644 --- a/packages/widget/src/AppDrawer.tsx +++ b/packages/widget/src/AppDrawer.tsx @@ -23,7 +23,7 @@ export interface WidgetDrawer { } export const AppDrawer = forwardRef( - ({ elementRef, open, config }, ref) => { + ({ elementRef, open, integrator, config }, ref) => { const openRef = useRef(open); const [drawerOpen, setDrawerOpen] = useState(Boolean(open)); @@ -53,16 +53,17 @@ export const AppDrawer = forwardRef( const drawerConfig: WidgetConfig = useMemo( () => ({ ...config, + integrator, containerStyle: { ...config?.containerStyle, height: '100%', }, }), - [config], + [config, integrator], ); return ( - + , + checked: boolean, + ) => void; + } & Omit +> = ({ status, feeAmountUsd, routeId, available, onChange, ...props }) => { + const routeExecution = useRouteExecutionStore( + (state) => state.routes[routeId], + ); + const { routes, isLoading } = useSwapRoutes(routeExecution?.route); + + const handleChange = ( + _: React.ChangeEvent, + checked: boolean, + ) => { + // const insuredRoute = routes?.[0]; + // if (insuredRoute && checked) { + // setExecutableRoute(insuredRoute, stateRouteId); + // } + // setRouteId(checked ? insuredRoute?.id : stateRouteId); + // onChange?.(); + }; + + return ; +}; diff --git a/packages/widget/src/providers/SDKProvider/SDKProvider.tsx b/packages/widget/src/providers/SDKProvider/SDKProvider.tsx index 18e3e1304..3ef73ec2d 100644 --- a/packages/widget/src/providers/SDKProvider/SDKProvider.tsx +++ b/packages/widget/src/providers/SDKProvider/SDKProvider.tsx @@ -16,6 +16,7 @@ export const SDKProvider: React.FC = ({ const value = useMemo(() => { const config = { ...sdkConfig, + integrator: integrator ?? window.location.hostname, defaultRouteOptions: { fee, integrator: integrator ?? window.location.hostname, diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx index 559a61aa4..65749d5f1 100644 --- a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx +++ b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx @@ -8,6 +8,7 @@ import type { WidgetContextProps, WidgetProviderProps } from './types'; const initialContext: WidgetContextProps = { disabledChains: [], elementId: '', + integrator: '', }; const WidgetContext = createContext(initialContext); @@ -25,10 +26,16 @@ export const WidgetProvider: React.FC< toChain, toToken, fromAmount, + integrator, ...config } = {}, }) => { const elementId = useId(); + + if (!integrator) { + throw Error('Required property "integrator" is missing.'); + } + const value = useMemo((): WidgetContextProps => { try { const searchParams = Object.fromEntries( @@ -78,14 +85,24 @@ export const WidgetProvider: React.FC< ? formatAmount(searchParams.fromAmount) : fromAmount, elementId, + integrator, } as WidgetContextProps; setDefaultSettings(value); return value; } catch (e) { console.warn(e); - return { ...config, elementId }; + return { ...config, elementId, integrator }; } - }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]); + }, [ + config, + elementId, + fromAmount, + fromChain, + fromToken, + integrator, + toChain, + toToken, + ]); return ( {children} diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 9ac5c2318..c4850cfd0 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -70,7 +70,10 @@ export interface WidgetWalletManagement { export interface SDKConfig extends Omit< ConfigUpdate, - 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck' + | 'defaultExecutionSettings' + | 'defaultRouteOptions' + | 'disableVersionCheck' + | 'integrator' > { defaultRouteOptions?: Omit; } @@ -104,7 +107,7 @@ export interface WidgetConfig { contractTool?: WidgetContractTool; fee?: number; - integrator?: string; + integrator: string; referrer?: string; routePriority?: Order; @@ -169,5 +172,5 @@ export type WidgetDrawerProps = { export type WidgetProps = WidgetDrawerProps & WidgetConfig & { - config?: WidgetConfig; + config?: Partial; };